diff --git a/ui/src/TestCase/FailedTestCases.tsx b/ui/src/TestCase/FailedTestCases.tsx
index 6ab317de1..0197c60cb 100644
--- a/ui/src/TestCase/FailedTestCases.tsx
+++ b/ui/src/TestCase/FailedTestCases.tsx
@@ -28,7 +28,7 @@ const FailedTestCases = ({ publicId }: FailedTestCasesProps) => {
         loadingState={loadingState}
         successComponent={
           <TestCaseFailurePanelList
-            testCases={failedTestCases}
+            failedTestCases={failedTestCases}
             publicId={publicId}
           />
         }
diff --git a/ui/src/TestCase/TestCaseFailurePanel.tsx b/ui/src/TestCase/TestCaseFailurePanel.tsx
index d17a2deb9..791c05a42 100644
--- a/ui/src/TestCase/TestCaseFailurePanel.tsx
+++ b/ui/src/TestCase/TestCaseFailurePanel.tsx
@@ -24,12 +24,14 @@ const useStyles = makeStyles(() => ({
 
 interface TestCaseFailurePanelProps {
   testCase: TestCase;
-  publicId: String;
+  publicId: string;
+  showFullFailure?: boolean;
 }
 
 const TestCaseFailurePanel = ({
   testCase,
-  publicId
+  publicId,
+  showFullFailure
 }: TestCaseFailurePanelProps) => {
   const classes = useStyles({});
   const testCaseIdentifier = `${testCase.testSuiteIdx}-${testCase.idx}`;
@@ -47,7 +49,11 @@ const TestCaseFailurePanel = ({
       <ExpansionPanelDetails className={classes.failureMessage}>
         {testCase.failure != null && (
           <div>
-            <pre>{testCase.failure.failureMessage}</pre>
+            <pre data-testid={`test-case-failure-text-${testCaseIdentifier}`}>
+              {showFullFailure
+                ? testCase.failure.failureText
+                : testCase.failure.failureMessage}
+            </pre>
           </div>
         )}
       </ExpansionPanelDetails>
diff --git a/ui/src/TestCase/TestCaseFailurePanelList.tsx b/ui/src/TestCase/TestCaseFailurePanelList.tsx
index 0ad9ca528..da6edfb4c 100644
--- a/ui/src/TestCase/TestCaseFailurePanelList.tsx
+++ b/ui/src/TestCase/TestCaseFailurePanelList.tsx
@@ -2,22 +2,27 @@ import * as React from "react";
 import { TestCase } from "../model/TestRunModel";
 import TestCaseFailurePanel from "./TestCaseFailurePanel";
 
+const showFullFailureMaxFailureCount = 5;
+
 interface TestCaseFailurePanelListProps {
-  testCases: TestCase[];
-  publicId: String;
+  failedTestCases: TestCase[];
+  publicId: string;
 }
 
 const TestCaseFailurePanelList = ({
-  testCases,
+  failedTestCases,
   publicId
 }: TestCaseFailurePanelListProps) => {
   return (
     <div>
-      {testCases.map(testCase => (
+      {failedTestCases.map(testCase => (
         <TestCaseFailurePanel
           testCase={testCase}
           publicId={publicId}
-          key={`test-case-${testCase.idx}`}
+          key={`test-case-${testCase.testSuiteIdx}-${testCase.idx}`}
+          showFullFailure={
+            failedTestCases.length <= showFullFailureMaxFailureCount
+          }
         />
       ))}
     </div>
diff --git a/ui/src/TestCase/__tests__/TestCaseFailurePanel.spec.tsx b/ui/src/TestCase/__tests__/TestCaseFailurePanel.spec.tsx
index 8fdd3e4de..51ef685fb 100644
--- a/ui/src/TestCase/__tests__/TestCaseFailurePanel.spec.tsx
+++ b/ui/src/TestCase/__tests__/TestCaseFailurePanel.spec.tsx
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom/extend-expect";
 import React from "react";
-import { render } from "@testing-library/react";
-import { TestCase } from "../../model/TestRunModel";
+import { getNodeText, render } from "@testing-library/react";
+import { TestCase, TestFailure } from "../../model/TestRunModel";
 import TestCaseFailurePanel from "../TestCaseFailurePanel";
 
 describe("TestCaseFailurePanel", () => {
@@ -131,4 +131,62 @@ describe("TestCaseFailurePanel", () => {
       queryByTestId("test-case-summary-system-err-link-2-1")
     ).not.toBeNull();
   });
+
+  it("should render failure message when flag to show full failure is false", () => {
+    const failure: TestFailure = {
+      failureMessage: "My failure message",
+      failureText: "My failure text",
+      failureType: ""
+    };
+
+    const testCase = createTestCaseWithFailure(failure);
+
+    const { getByTestId } = render(
+      <TestCaseFailurePanel testCase={testCase} publicId="12345" />
+    );
+
+    expect(getNodeText(getByTestId("test-case-failure-text-2-1"))).toContain(
+      "My failure message"
+    );
+  });
+
+  it("should render failure text when flag to show full failure is true", () => {
+    const failure: TestFailure = {
+      failureMessage: "My failure message",
+      failureText: "My failure text",
+      failureType: ""
+    };
+
+    const testCase = createTestCaseWithFailure(failure);
+
+    const { getByTestId } = render(
+      <TestCaseFailurePanel
+        testCase={testCase}
+        publicId="12345"
+        showFullFailure={true}
+      />
+    );
+
+    expect(getNodeText(getByTestId("test-case-failure-text-2-1"))).toContain(
+      "My failure text"
+    );
+  });
+
+  function createTestCaseWithFailure(failure: TestFailure): TestCase {
+    const testCase: TestCase = {
+      idx: 1,
+      testSuiteIdx: 2,
+      name: "Test Case",
+      packageName: "",
+      className: "",
+      duration: 1.2,
+      passed: false,
+      skipped: false,
+      hasSystemOut: true,
+      hasSystemErr: true,
+      failure
+    };
+
+    return testCase;
+  }
 });
diff --git a/ui/src/TestCase/__tests__/TestCaseFailurePanelList.spec.tsx b/ui/src/TestCase/__tests__/TestCaseFailurePanelList.spec.tsx
new file mode 100644
index 000000000..65146ad0d
--- /dev/null
+++ b/ui/src/TestCase/__tests__/TestCaseFailurePanelList.spec.tsx
@@ -0,0 +1,68 @@
+import "@testing-library/jest-dom/extend-expect";
+import React from "react";
+import { getNodeText, render } from "@testing-library/react";
+import { TestCase, TestFailure } from "../../model/TestRunModel";
+import TestCaseFailurePanelList from "../TestCaseFailurePanelList";
+
+describe("TestCaseFailureListPanel", () => {
+  it("should render longer failure text when less than 5 failures", () => {
+    const failure: TestFailure = {
+      failureMessage: "My failure message",
+      failureText: "My longer and more descriptive failure text",
+      failureType: ""
+    };
+
+    const testCases = [1, 2, 3, 4].map(idx =>
+      createTestCaseWithFailure(idx, failure)
+    );
+
+    const { getByTestId } = render(
+      <TestCaseFailurePanelList failedTestCases={testCases} publicId="12345" />
+    );
+
+    expect(getNodeText(getByTestId("test-case-failure-text-2-1"))).toContain(
+      "My longer and more descriptive failure text"
+    );
+  });
+
+  it("should render shorter failure message when more than 5 failures", () => {
+    const failure: TestFailure = {
+      failureMessage: "My failure message",
+      failureText: "My longer and more descriptive failure text",
+      failureType: ""
+    };
+
+    const testCases = [1, 2, 3, 4, 5, 6].map(idx =>
+      createTestCaseWithFailure(idx, failure)
+    );
+
+    const { getByTestId } = render(
+      <TestCaseFailurePanelList failedTestCases={testCases} publicId="12345" />
+    );
+
+    expect(getNodeText(getByTestId("test-case-failure-text-2-1"))).toContain(
+      "My failure message"
+    );
+  });
+
+  function createTestCaseWithFailure(
+    idx: number,
+    failure: TestFailure
+  ): TestCase {
+    const testCase: TestCase = {
+      idx,
+      testSuiteIdx: 2,
+      name: "Test Case",
+      packageName: "",
+      className: "",
+      duration: 1.2,
+      passed: false,
+      skipped: false,
+      hasSystemOut: true,
+      hasSystemErr: true,
+      failure
+    };
+
+    return testCase;
+  }
+});
diff --git a/ui/src/TestOutput/TestSystemOutput.tsx b/ui/src/TestOutput/TestSystemOutput.tsx
index cc592917b..166d92122 100644
--- a/ui/src/TestOutput/TestSystemOutput.tsx
+++ b/ui/src/TestOutput/TestSystemOutput.tsx
@@ -18,7 +18,8 @@ const useStyles = makeStyles({
     paddingTop: "10px",
     paddingBottom: "10px",
     backgroundColor: "#EDEDED",
-    borderRadius: "8px"
+    borderRadius: "8px",
+    overflowX: "auto"
   }
 });