diff --git a/doc/newsfragments/2725_new.status_icons.rst b/doc/newsfragments/2725_new.status_icons.rst
new file mode 100644
index 000000000..12185063d
--- /dev/null
+++ b/doc/newsfragments/2725_new.status_icons.rst
@@ -0,0 +1 @@
+Status-indicating icons have been introduced to improve accessibility for colour vision deficiency.
\ No newline at end of file
diff --git a/testplan/web_ui/testing/src/AssertionPane/Assertion.js b/testplan/web_ui/testing/src/AssertionPane/Assertion.js
index f2e255160..30900a351 100644
--- a/testplan/web_ui/testing/src/AssertionPane/Assertion.js
+++ b/testplan/web_ui/testing/src/AssertionPane/Assertion.js
@@ -1,8 +1,9 @@
 import PropTypes from "prop-types";
 import { Card, CardBody, Collapse } from "reactstrap";
 import { css, StyleSheet } from "aphrodite";
-import { ErrorBoundary } from "../Common/ErrorBoundary";
+import { useAtomValue } from "jotai";
 
+import { ErrorBoundary } from "../Common/ErrorBoundary";
 import BasicAssertion from "./AssertionTypes/BasicAssertion";
 import MarkdownAssertion from "./AssertionTypes/MarkdownAssertion";
 import CodeLogAssertion from "./AssertionTypes/CodeLogAssertion";
@@ -30,6 +31,7 @@ import {
 import LogfileMatchAssertion from "./AssertionTypes/LogfileMatchAssertion";
 import { EXPAND_STATUS } from "../Common/defaults";
 import XMLCheckAssertion from "./AssertionTypes/XMLCheckAssertion";
+import { showStatusIconsPreference } from "../UserSettings/UserSettings";
 
 /**
  * Component to render one assertion.
@@ -127,6 +129,7 @@ function Assertion({
       }
     }
   }
+  let showStatusIcons = useAtomValue(showStatusIconsPreference);
 
   return (
     <Card className={css(styles.card)}>
@@ -136,6 +139,7 @@ function Assertion({
         toggleExpand={toggleExpand}
         index={index}
         displayPath={displayPath}
+        showStatusIcons={showStatusIcons}
       />
       <Collapse
         isOpen={expand === EXPAND_STATUS.EXPAND}
diff --git a/testplan/web_ui/testing/src/AssertionPane/AssertionHeader.js b/testplan/web_ui/testing/src/AssertionPane/AssertionHeader.js
index 55792310a..69cbb92a2 100644
--- a/testplan/web_ui/testing/src/AssertionPane/AssertionHeader.js
+++ b/testplan/web_ui/testing/src/AssertionPane/AssertionHeader.js
@@ -4,12 +4,24 @@ import { css, StyleSheet } from "aphrodite";
 import { CardHeader, Tooltip } from "reactstrap";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faLayerGroup } from "@fortawesome/free-solid-svg-icons";
+import {
+  faLayerGroup,
+  faTimes,
+  faInfo,
+  faCheck,
+} from "@fortawesome/free-solid-svg-icons";
 import Button from "@material-ui/core/Button";
 import Linkify from "linkify-react";
 
 library.add(faLayerGroup);
 
+
+const STATUS_ICONS = {
+  false: faTimes,
+  true: faCheck,
+  undefined: faInfo,
+};
+
 /**
  * Header component of an assertion.
  */
@@ -18,6 +30,7 @@ function AssertionHeader({
   displayPath,
   uid,
   toggleExpand,
+  showStatusIcons,
 }) {
   const [isUTCTooltipOpen, setIsUTCTooltipOpen] = useState(false);
   const [isPathTooltipOpen, setIsPathTooltipOpen] = useState(false);
@@ -67,20 +80,27 @@ function AssertionHeader({
     ) : (
       <>
         <span
-          className={css(styles.cardHeaderAlignRight, styles.timeInfo)}
+          className={
+            css(styles.cardHeaderAlignRight, styles.timeInfo, styles.button)
+          }
+          onClick={toggleExpand}
           id={`tooltip_duration_${timeInfoArray[0]}`}
           style={{ order: 3, display: "inline-flex", alignItems: "center" }}
         >
           {timeInfoArray[2]}
         </span>
         <span
-          className={css(styles.cardHeaderAlignRight)}
+          className={css(styles.cardHeaderAlignRight, styles.button)}
+          onClick={toggleExpand}
           style={{ order: 2 }}
         >
           &nbsp;&nbsp;
         </span>
         <span
-          className={css(styles.cardHeaderAlignRight, styles.timeInfo)}
+          className={
+            css(styles.cardHeaderAlignRight, styles.timeInfo, styles.button)
+          }
+          onClick={toggleExpand}
           id={`tooltip_utc_${timeInfoArray[0]}`}
           style={{ order: 1, display: "inline-flex", alignItems: "center" }}
         >
@@ -159,6 +179,17 @@ function AssertionHeader({
     ""
   );
 
+  const statusIcon = showStatusIcons ? (
+    <span className={css(styles.statusIcon)}>
+      <FontAwesomeIcon
+        title={assertion.passed ? "passed" : "failed"}
+        size="sm"
+        icon={STATUS_ICONS[assertion.passed]}
+        className={css(styles.icon)}
+      />
+    </span>
+  ) : null;
+
   return (
     <CardHeader className={css(styles.cardHeader, cardHeaderColorStyle)}>
       <div style={{ display: "flex" }}>
@@ -172,10 +203,10 @@ function AssertionHeader({
             ...assertion.custom_style,
           }}
         >
+          {statusIcon}
           <span style={{ fontWeight: "bold" }}>{description}</span>
           <span>({assertion.type})</span>
         </span>
-
         {component}
         {pathButton}
         {/*
@@ -273,6 +304,11 @@ const styles = StyleSheet.create({
   icon: {
     margin: "0rem .25rem 0rem 0rem",
   },
+  statusIcon: {
+    display: "inline-flex",
+    width: "1rem",
+    justifyContent: "center",
+  },
 });
 
 export default AssertionHeader;
diff --git a/testplan/web_ui/testing/src/AssertionPane/__tests__/AssertionHeader.test.js b/testplan/web_ui/testing/src/AssertionPane/__tests__/AssertionHeader.test.js
index 11602e366..9d91d2990 100644
--- a/testplan/web_ui/testing/src/AssertionPane/__tests__/AssertionHeader.test.js
+++ b/testplan/web_ui/testing/src/AssertionPane/__tests__/AssertionHeader.test.js
@@ -1,8 +1,10 @@
 import React from "react";
 import { shallow } from "enzyme";
 import { StyleSheetTestUtils } from "aphrodite";
+import { getDefaultStore } from "jotai";
 
 import AssertionHeader from "../AssertionHeader";
+import { showStatusIconsPreference } from "../../UserSettings/UserSettings";
 
 function defaultProps() {
   return {
@@ -39,4 +41,10 @@ describe("AssertionHeader", () => {
     shallowComponent = shallow(<AssertionHeader {...props} />);
     expect(shallowComponent).toMatchSnapshot();
   });
+
+  it("shallow renders the correct HTML structure with status icons enabled", () => {
+    getDefaultStore().set(showStatusIconsPreference, true);
+    shallowComponent = shallow(<AssertionHeader {...props} />);
+    expect(shallowComponent).toMatchSnapshot();
+  });
 });
diff --git a/testplan/web_ui/testing/src/AssertionPane/__tests__/__snapshots__/Assertion.test.js.snap b/testplan/web_ui/testing/src/AssertionPane/__tests__/__snapshots__/Assertion.test.js.snap
index d98130ec7..92e15ab93 100644
--- a/testplan/web_ui/testing/src/AssertionPane/__tests__/__snapshots__/Assertion.test.js.snap
+++ b/testplan/web_ui/testing/src/AssertionPane/__tests__/__snapshots__/Assertion.test.js.snap
@@ -22,6 +22,7 @@ exports[`Assertion shallow renders the correct HTML structure 1`] = `
       }
     }
     index={0}
+    showStatusIcons={false}
   />
   <Collapse
     appear={false}
diff --git a/testplan/web_ui/testing/src/AssertionPane/__tests__/__snapshots__/AssertionHeader.test.js.snap b/testplan/web_ui/testing/src/AssertionPane/__tests__/__snapshots__/AssertionHeader.test.js.snap
index 9574221d9..b33638c98 100644
--- a/testplan/web_ui/testing/src/AssertionPane/__tests__/__snapshots__/AssertionHeader.test.js.snap
+++ b/testplan/web_ui/testing/src/AssertionPane/__tests__/__snapshots__/AssertionHeader.test.js.snap
@@ -41,3 +41,45 @@ exports[`AssertionHeader shallow renders the correct HTML structure 1`] = `
   </div>
 </CardHeader>
 `;
+
+exports[`AssertionHeader shallow renders the correct HTML structure with status icons enabled 1`] = `
+<CardHeader
+  className="cardHeader_1s246z6-o_O-cardHeaderColorPassed_1nxwz58"
+  tag="div"
+>
+  <div
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+  >
+    <span
+      className="button_13xlah4"
+      style={
+        Object {
+          "flexGrow": 4,
+          "order": 4,
+          "padding": ".125rem 0.75rem",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "fontWeight": "bold",
+          }
+        }
+      />
+      <span>
+        (
+        Equal
+        )
+      </span>
+    </span>
+    <span
+      className="cardHeaderAlignRight_107ja4p"
+    />
+  </div>
+</CardHeader>
+`;
diff --git a/testplan/web_ui/testing/src/Common/Styles.js b/testplan/web_ui/testing/src/Common/Styles.js
index c5c882ed7..03ff450e4 100644
--- a/testplan/web_ui/testing/src/Common/Styles.js
+++ b/testplan/web_ui/testing/src/Common/Styles.js
@@ -2,7 +2,21 @@
  * Common aphrodite styles.
  */
 import { StyleSheet } from "aphrodite";
-import { RED, GREEN, ORANGE, BLACK } from "../Common/defaults";
+import {
+  faCheck,
+  faInfo,
+  faQuestionCircle,
+  faTimes,
+} from "@fortawesome/free-solid-svg-icons";
+
+import {
+  RED,
+  GREEN,
+  ORANGE,
+  BLACK,
+  LIGHT_GREY,
+  MEDIUM_GREY
+} from "../Common/defaults";
 
 export const unselectable = {
   "moz-user-select": "-moz-none",
@@ -15,26 +29,33 @@ export const unselectable = {
 export const statusStyles = {
   passed: {
     color: GREEN,
+    icon: faCheck,
   },
   failed: {
     color: RED,
+    icon: faTimes,
   },
   error: {
     color: RED,
+    icon: faTimes,
   },
   skipped: {
     color: ORANGE,
+    icon: faQuestionCircle,
   },
   unstable: {
     color: ORANGE,
+    icon: faQuestionCircle,
   },
   unknown: {
     color: BLACK,
+    icon: faInfo,
   },
 };
 
 export const navStyles = StyleSheet.create({
   entryName: {
+    display: "flex",
     overflow: "hidden",
     "text-overflow": "ellipsis",
     "white-space": "nowrap",
@@ -82,6 +103,33 @@ export const navStyles = StyleSheet.create({
     flexDirection: "column",
     alignItems: "end",
   },
+  navButton: {
+    position: "relative",
+    display: "block",
+    border: "none",
+    backgroundColor: LIGHT_GREY,
+    cursor: "pointer",
+  },
+  navButtonInteract: {
+    ":hover": {
+      backgroundColor: MEDIUM_GREY,
+    },
+  },
+  navButtonInteractFocus: {
+    backgroundColor: MEDIUM_GREY,
+    outline: "none",
+  },
+  buttonList: {
+    "overflow-y": "auto",
+    height: "100%",
+  },
+  statusIcon: {
+    display: "inline-flex",
+    width: "1rem",
+    justifyContent: "center",
+    marginRight: "0.3rem",
+    alignSelf: "center",
+  },
   environmentToggle: {
     padding: "0.65em 0em 0.65em 0em",
   },
diff --git a/testplan/web_ui/testing/src/Nav/InteractiveNavEntry.js b/testplan/web_ui/testing/src/Nav/InteractiveNavEntry.js
index 76d8aa603..bc380bba3 100644
--- a/testplan/web_ui/testing/src/Nav/InteractiveNavEntry.js
+++ b/testplan/web_ui/testing/src/Nav/InteractiveNavEntry.js
@@ -11,7 +11,7 @@ import {
   faToggleOn,
   faFastBackward,
 } from "@fortawesome/free-solid-svg-icons";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 
 import {
   CATEGORY_ICONS,
@@ -23,8 +23,9 @@ import {
   NAV_ENTRY_ACTIONS,
 } from "../Common/defaults";
 import { navStyles } from "../Common/Styles";
-import { generateNavTimeInfo } from "./navUtils";
+import { generateNavTimeInfo, GetStatusIcon } from "./navUtils";
 import { pendingEnvRequestAtom } from "../Report/InteractiveReport";
+import { showStatusIconsPreference } from "../UserSettings/UserSettings";
 
 /**
  * Display interactive NavEntry information:
@@ -67,6 +68,10 @@ const InteractiveNavEntry = (props) => {
       props.teardownTime,
       props.executionTime,
     ) : null;
+  
+  const statusIcon2 = useAtomValue(showStatusIconsPreference)
+    ? GetStatusIcon(props.status)
+    : null;
 
   return (
     <div
@@ -89,6 +94,7 @@ const InteractiveNavEntry = (props) => {
         }
         title={props.description || props.name}
       >
+        {statusIcon2}
         {props.name}
       </div>
       <div className={css(navStyles.entryIcons)}>
diff --git a/testplan/web_ui/testing/src/Nav/NavEntry.js b/testplan/web_ui/testing/src/Nav/NavEntry.js
index 5bc8d40cc..7717b3283 100644
--- a/testplan/web_ui/testing/src/Nav/NavEntry.js
+++ b/testplan/web_ui/testing/src/Nav/NavEntry.js
@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Badge } from "reactstrap";
 import { css } from "aphrodite";
+import { useAtomValue } from "jotai";
 
 import {
   CATEGORY_ICONS,
@@ -10,7 +11,8 @@ import {
   STATUS_CATEGORY,
 } from "../Common/defaults";
 import { navStyles } from "../Common/Styles";
-import { generateNavTimeInfo } from "./navUtils";
+import { generateNavTimeInfo, GetStatusIcon } from "./navUtils";
+import { showStatusIconsPreference } from "../UserSettings/UserSettings";
 
 /**
  * Display NavEntry information:
@@ -26,6 +28,9 @@ const NavEntry = (props) => {
       props.teardownTime,
       props.executionTime,
     ) : null;
+  const statusIcon =
+    useAtomValue(showStatusIconsPreference) ? GetStatusIcon(props.status)
+    : null;
 
   return (
     <div
@@ -50,6 +55,7 @@ const NavEntry = (props) => {
         }
         title={`${props.description || props.name} - ${props.status}`}
       >
+        {statusIcon}
         {props.name}
       </div>
       <div className={css(navStyles.entryIcons)}>
diff --git a/testplan/web_ui/testing/src/Nav/__tests__/NavEntry.test.js b/testplan/web_ui/testing/src/Nav/__tests__/NavEntry.test.js
index d474335e7..3bb5cd7d6 100644
--- a/testplan/web_ui/testing/src/Nav/__tests__/NavEntry.test.js
+++ b/testplan/web_ui/testing/src/Nav/__tests__/NavEntry.test.js
@@ -1,9 +1,10 @@
 import React from "react";
 import { shallow } from "enzyme";
 import { StyleSheetTestUtils } from "aphrodite";
-import { Badge } from "reactstrap";
+import { getDefaultStore } from "jotai";
 
 import NavEntry from "../NavEntry";
+import { showStatusIconsPreference } from "../../UserSettings/UserSettings";
 
 function defaultProps() {
   return {
@@ -45,4 +46,10 @@ describe("NavEntry", () => {
     const navEntry = shallow(<NavEntry {...failProps} />);
     expect(navEntry).toMatchSnapshot();
   });
+
+  it("shallow renders the correct HTML structure with status icons enabled", () => {
+    getDefaultStore().set(showStatusIconsPreference, true);
+    const navEntry = shallow(<NavEntry {...props} />);
+    expect(navEntry).toMatchSnapshot();
+  });
 });
diff --git a/testplan/web_ui/testing/src/Nav/__tests__/__snapshots__/InteractiveNavEntry.test.js.snap b/testplan/web_ui/testing/src/Nav/__tests__/__snapshots__/InteractiveNavEntry.test.js.snap
index 925b26050..27895804f 100644
--- a/testplan/web_ui/testing/src/Nav/__tests__/__snapshots__/InteractiveNavEntry.test.js.snap
+++ b/testplan/web_ui/testing/src/Nav/__tests__/__snapshots__/InteractiveNavEntry.test.js.snap
@@ -20,7 +20,7 @@ exports[`InteractiveNavEntry renders a testcase in "failed" state 1`] = `
     C
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-failed_11es5k7"
+    className="entryName_1u6ioda-o_O-failed_fshwig"
     title="TestCaseDesc"
   >
     FakeTestcase
@@ -29,20 +29,20 @@ exports[`InteractiveNavEntry renders a testcase in "failed" state 1`] = `
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-failed_11es5k7-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-failed_fshwig-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         8
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
       >
         1
       </span>
@@ -112,7 +112,7 @@ exports[`InteractiveNavEntry renders a testcase in "not_run" state 1`] = `
     C
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-unknown_1qg7pkz"
+    className="entryName_1u6ioda-o_O-unknown_1vtq7dx"
     title="TestCaseDesc"
   >
     FakeTestcase
@@ -121,20 +121,20 @@ exports[`InteractiveNavEntry renders a testcase in "not_run" state 1`] = `
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-unknown_1qg7pkz-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-unknown_1vtq7dx-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         0
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
       >
         0
       </span>
@@ -204,7 +204,7 @@ exports[`InteractiveNavEntry renders a testcase in "passed" state 1`] = `
     C
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-passed_1kh4m98"
+    className="entryName_1u6ioda-o_O-passed_159jltg"
     title="TestCaseDesc"
   >
     FakeTestcase
@@ -213,20 +213,20 @@ exports[`InteractiveNavEntry renders a testcase in "passed" state 1`] = `
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-passed_1kh4m98-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-passed_159jltg-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         9
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
       >
         0
       </span>
@@ -296,7 +296,7 @@ exports[`InteractiveNavEntry renders a testcase in "ready" state 1`] = `
     C
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-unknown_1qg7pkz"
+    className="entryName_1u6ioda-o_O-unknown_1vtq7dx"
     title="TestCaseDesc"
   >
     FakeTestcase
@@ -305,20 +305,20 @@ exports[`InteractiveNavEntry renders a testcase in "ready" state 1`] = `
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-unknown_1qg7pkz-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-unknown_1vtq7dx-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         0
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
       >
         0
       </span>
@@ -388,7 +388,7 @@ exports[`InteractiveNavEntry renders a testcase in "resetting" state 1`] = `
     C
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-unknown_1qg7pkz"
+    className="entryName_1u6ioda-o_O-unknown_1vtq7dx"
     title="TestCaseDesc"
   >
     FakeTestcase
@@ -397,20 +397,20 @@ exports[`InteractiveNavEntry renders a testcase in "resetting" state 1`] = `
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-unknown_1qg7pkz-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-unknown_1vtq7dx-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         0
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
       >
         0
       </span>
@@ -480,7 +480,7 @@ exports[`InteractiveNavEntry renders a testcase in "running" state 1`] = `
     C
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-unknown_1qg7pkz"
+    className="entryName_1u6ioda-o_O-unknown_1vtq7dx"
     title="TestCaseDesc"
   >
     FakeTestcase
@@ -489,20 +489,20 @@ exports[`InteractiveNavEntry renders a testcase in "running" state 1`] = `
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-unknown_1qg7pkz-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-unknown_1vtq7dx-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         0
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
       >
         0
       </span>
@@ -572,7 +572,7 @@ exports[`InteractiveNavEntry renders a testcase in "waiting" state 1`] = `
     C
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-unknown_1qg7pkz"
+    className="entryName_1u6ioda-o_O-unknown_1vtq7dx"
     title="TestCaseDesc"
   >
     FakeTestcase
@@ -581,20 +581,20 @@ exports[`InteractiveNavEntry renders a testcase in "waiting" state 1`] = `
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-unknown_1qg7pkz-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-unknown_1vtq7dx-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         0
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
       >
         0
       </span>
@@ -664,7 +664,7 @@ exports[`InteractiveNavEntry renders an entry with environment status STARTED 1`
     MT
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-unknown_1qg7pkz"
+    className="entryName_1u6ioda-o_O-unknown_1vtq7dx"
     title="TestCaseDesc"
   >
     FakeTestcase
@@ -673,20 +673,20 @@ exports[`InteractiveNavEntry renders an entry with environment status STARTED 1`
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-unknown_1qg7pkz-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-unknown_1vtq7dx-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         0
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
       >
         0
       </span>
@@ -838,7 +838,7 @@ exports[`InteractiveNavEntry renders an entry with environment status STARTING 1
     MT
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-unknown_1qg7pkz"
+    className="entryName_1u6ioda-o_O-unknown_1vtq7dx"
     title="TestCaseDesc"
   >
     FakeTestcase
@@ -847,20 +847,20 @@ exports[`InteractiveNavEntry renders an entry with environment status STARTING 1
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-unknown_1qg7pkz-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-unknown_1vtq7dx-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         0
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
       >
         0
       </span>
@@ -1015,7 +1015,7 @@ exports[`InteractiveNavEntry renders an entry with environment status STOPPED 1`
     MT
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-unknown_1qg7pkz"
+    className="entryName_1u6ioda-o_O-unknown_1vtq7dx"
     title="TestCaseDesc"
   >
     FakeTestcase
@@ -1024,20 +1024,20 @@ exports[`InteractiveNavEntry renders an entry with environment status STOPPED 1`
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-unknown_1qg7pkz-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-unknown_1vtq7dx-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         0
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
       >
         0
       </span>
@@ -1189,7 +1189,7 @@ exports[`InteractiveNavEntry renders an entry with environment status STOPPING 1
     MT
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-unknown_1qg7pkz"
+    className="entryName_1u6ioda-o_O-unknown_1vtq7dx"
     title="TestCaseDesc"
   >
     FakeTestcase
@@ -1198,20 +1198,20 @@ exports[`InteractiveNavEntry renders an entry with environment status STOPPING 1
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-unknown_1qg7pkz-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-unknown_1vtq7dx-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         0
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
       >
         0
       </span>
diff --git a/testplan/web_ui/testing/src/Nav/__tests__/__snapshots__/NavEntry.test.js.snap b/testplan/web_ui/testing/src/Nav/__tests__/__snapshots__/NavEntry.test.js.snap
index 78bfe33be..9fa4a21a1 100644
--- a/testplan/web_ui/testing/src/Nav/__tests__/__snapshots__/NavEntry.test.js.snap
+++ b/testplan/web_ui/testing/src/Nav/__tests__/__snapshots__/NavEntry.test.js.snap
@@ -20,7 +20,7 @@ exports[`NavEntry shallow renders the correct HTML structure 1`] = `
     TP
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-passed_1kh4m98"
+    className="entryName_1u6ioda-o_O-passed_159jltg"
     title="entry description - passed"
   >
     entry name
@@ -29,20 +29,115 @@ exports[`NavEntry shallow renders the correct HTML structure 1`] = `
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-passed_1kh4m98-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-passed_159jltg-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         0
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
+      >
+        0
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`NavEntry shallow renders the correct HTML structure with status icons enabled 1`] = `
+<div
+  className="d-flex justify-content-between align-items-center"
+  style={
+    Object {
+      "height": "1.5em",
+      "userSelect": "none",
+    }
+  }
+>
+  <Badge
+    className="entryIcon_9gb3m5-o_O-passedBadge_1isorc2-o_O-badge_1nusemj"
+    color="secondary"
+    pill={true}
+    tag="span"
+    title="testplan"
+  >
+    TP
+  </Badge>
+  <div
+    className="entryName_1u6ioda-o_O-passed_159jltg"
+    title="entry description - passed"
+  >
+    <span
+      className="statusIcon_15gxpoi"
+    >
+      <FontAwesomeIcon
+        beat={false}
+        beatFade={false}
+        border={false}
+        bounce={false}
+        className=""
+        fade={false}
+        fixedWidth={false}
+        flip={false}
+        icon={
+          Object {
+            "icon": Array [
+              512,
+              512,
+              Array [],
+              "f00c",
+              "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z",
+            ],
+            "iconName": "check",
+            "prefix": "fas",
+          }
+        }
+        inverse={false}
+        listItem={false}
+        mask={null}
+        maskId={null}
+        pull={null}
+        pulse={false}
+        rotation={null}
+        shake={false}
+        size="sm"
+        spin={false}
+        spinPulse={false}
+        spinReverse={false}
+        swapOpacity={false}
+        symbol={false}
+        title="passed"
+        titleId={null}
+        transform={null}
+      />
+    </span>
+    entry name
+  </div>
+  <div
+    className="entryIcons_9stzon"
+  >
+    <span
+      className="entryIcon_9gb3m5-o_O-passed_159jltg-o_O-navTime_rnvtmc"
+    />
+    <span
+      className="entryIcon_9gb3m5"
+      title="passed/failed testcases"
+    >
+      <span
+        className="passed_159jltg"
+      >
+        0
+      </span>
+      /
+      <span
+        className="failed_fshwig"
       >
         0
       </span>
@@ -71,7 +166,7 @@ exports[`NavEntry when prop status="failed" name div and Badge have correct styl
     TP
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-failed_11es5k7"
+    className="entryName_1u6ioda-o_O-failed_fshwig"
     title="entry description - failed"
   >
     entry name
@@ -80,20 +175,20 @@ exports[`NavEntry when prop status="failed" name div and Badge have correct styl
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-failed_11es5k7-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-failed_fshwig-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         0
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
       >
         0
       </span>
@@ -122,7 +217,7 @@ exports[`NavEntry when prop status="xfail" name div and Badge have correct style
     TP
   </Badge>
   <div
-    className="entryName_j2oag5-o_O-unstable_17i2uy2"
+    className="entryName_1u6ioda-o_O-unstable_zxs7ca"
     title="entry description - xfail"
   >
     entry name
@@ -131,20 +226,20 @@ exports[`NavEntry when prop status="xfail" name div and Badge have correct style
     className="entryIcons_9stzon"
   >
     <span
-      className="entryIcon_9gb3m5-o_O-unstable_17i2uy2-o_O-navTime_rnvtmc"
+      className="entryIcon_9gb3m5-o_O-unstable_zxs7ca-o_O-navTime_rnvtmc"
     />
     <span
       className="entryIcon_9gb3m5"
       title="passed/failed testcases"
     >
       <span
-        className="passed_1kh4m98"
+        className="passed_159jltg"
       >
         0
       </span>
       /
       <span
-        className="failed_11es5k7"
+        className="failed_fshwig"
       >
         0
       </span>
diff --git a/testplan/web_ui/testing/src/Nav/navUtils.js b/testplan/web_ui/testing/src/Nav/navUtils.js
index 53165892d..2662c523e 100644
--- a/testplan/web_ui/testing/src/Nav/navUtils.js
+++ b/testplan/web_ui/testing/src/Nav/navUtils.js
@@ -3,16 +3,16 @@
  */
 import React from "react";
 import { ListGroup, ListGroupItem } from "reactstrap";
-import { StyleSheet, css } from "aphrodite";
+import { css } from "aphrodite";
 import _ from "lodash";
+import { NavLink } from "react-router-dom";
+import { generatePath } from "react-router";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import TagList from "./TagList";
 import Column from "./Column";
-import { LIGHT_GREY, MEDIUM_GREY } from "../Common/defaults";
-import CommonStyles from "../Common/Styles.js";
-import { statusStyles } from "../Common/Styles";
-import { NavLink } from "react-router-dom";
-import { generatePath } from "react-router";
+import CommonStyles, { statusStyles } from "../Common/Styles.js";
+import { navStyles } from "../Common/Styles";
 import {
   generateURLWithParameters,
   formatShortDuration,
@@ -43,11 +43,11 @@ const CreateNavButtons = (props, createEntryComponent, uidEncoder) => {
 
     const tabIndex = entryIndex + 1;
     const cssClass = [
-      styles.navButton,
-      styles.navButtonInteract,
+      navStyles.navButton,
+      navStyles.navButtonInteract,
       CommonStyles.unselectable,
     ];
-    const cssActiveClass = [...cssClass, styles.navButtonInteractFocus];
+    const cssActiveClass = [...cssClass, navStyles.navButtonInteractFocus];
 
     let [reportuid, ...selectionuids] = uidEncoder
       ? entry.uids.map(uidEncoder)
@@ -77,7 +77,7 @@ const CreateNavButtons = (props, createEntryComponent, uidEncoder) => {
   });
 
   const navButtonsEmpty = (
-    <ListGroupItem className={css(styles.navButton)}>
+    <ListGroupItem className={css(navStyles.navButton)}>
       No entries to display...
     </ListGroupItem>
   );
@@ -144,34 +144,6 @@ const applyNamedFilter = (entries, filter) => {
   }
 };
 
-export const styles = StyleSheet.create({
-  entryIcon: {
-    fontSize: "x-small",
-    margin: "0em 0.5em 0em 0.5em",
-  },
-  navButton: {
-    position: "relative",
-    display: "block",
-    border: "none",
-    backgroundColor: LIGHT_GREY,
-    cursor: "pointer",
-  },
-  navButtonInteract: {
-    ":hover": {
-      backgroundColor: MEDIUM_GREY,
-    },
-  },
-  navButtonInteractFocus: {
-    backgroundColor: MEDIUM_GREY,
-    outline: "none",
-  },
-  buttonList: {
-    "overflow-y": "auto",
-    height: "100%",
-  },
-  ...statusStyles,
-});
-
 /**
  * Return the UID of the currently selected entry, or null if there is no
  * entry selected.
@@ -323,10 +295,21 @@ const GetNavBreadcrumbs = (selected) => {
 
 const GetNavColumn = (props, navButtons) => (
   <Column width={props.width} handleColumnResizing={props.handleColumnResizing}>
-    <ListGroup className={css(styles.buttonList)}>{navButtons}</ListGroup>
+    <ListGroup className={css(navStyles.buttonList)}>{navButtons}</ListGroup>
   </Column>
 );
 
+const GetStatusIcon = (status) => (
+  <span className={css(navStyles.statusIcon)}>
+    <FontAwesomeIcon
+      title={status}
+      size="sm"
+      icon={statusStyles[status].icon}
+      className={css(navStyles.icon)}
+    />
+  </span>
+);
+
 const generateNavTimeInfo = (
   setupTimeProp,
   teardownTimeProp,
@@ -342,7 +325,7 @@ const generateNavTimeInfo = (
   const detailedTimeElement =
     (_.isNumber(setupTimeProp) || _.isNumber(teardownTimeProp))
     ? (
-      <span className={css(styles.entryIcon)}
+      <span className={css(navStyles.entryIcon)}
       title="Setup / Execution / Teardown duration">
           (
             {
@@ -359,7 +342,7 @@ const generateNavTimeInfo = (
   const totalTimeElement = 
     _.isNumber(totalTime)
     ? (
-      <span className={css(styles.entryIcon)} title="Total runtime">
+      <span className={css(navStyles.entryIcon)} title="Total runtime">
           {formatShortDuration(totalTime)}
       </span>
     )
@@ -374,6 +357,7 @@ const generateNavTimeInfo = (
 export {
   CreateNavButtons,
   generateNavTimeInfo,
+  GetStatusIcon,
   GetSelectedUid,
   GetNavEntries,
   GetInteractiveNavEntries,
diff --git a/testplan/web_ui/testing/src/Report/__tests__/__snapshots__/BatchReport.test.js.snap b/testplan/web_ui/testing/src/Report/__tests__/__snapshots__/BatchReport.test.js.snap
index 3890f0ad1..e1935080e 100644
--- a/testplan/web_ui/testing/src/Report/__tests__/__snapshots__/BatchReport.test.js.snap
+++ b/testplan/web_ui/testing/src/Report/__tests__/__snapshots__/BatchReport.test.js.snap
@@ -26259,6 +26259,62 @@ ZeroDivisionError: integer division or modulo by zero
                                       </button>
                                     </DropdownItem>
                                   </UserPreferenceCheckbox>
+                                  <UserPreferenceCheckbox
+                                    preferenceAtom={
+                                      Object {
+                                        "read": [Function],
+                                        "toString": [Function],
+                                        "write": [Function],
+                                      }
+                                    }
+                                  >
+                                    <DropdownItem
+                                      className="dropdownItem_1h5fos4"
+                                      tag="button"
+                                      toggle={false}
+                                    >
+                                      <button
+                                        className="dropdownItem_1h5fos4 dropdown-item"
+                                        onClick={[Function]}
+                                        role="menuitem"
+                                        tabIndex="0"
+                                      >
+                                        <Label
+                                          check={true}
+                                          className="filterLabel_1wpifct"
+                                          tag="label"
+                                          widths={
+                                            Array [
+                                              "xs",
+                                              "sm",
+                                              "md",
+                                              "lg",
+                                              "xl",
+                                            ]
+                                          }
+                                        >
+                                          <label
+                                            className="filterLabel_1wpifct form-check-label"
+                                          >
+                                            <Input
+                                              checked={false}
+                                              onChange={[Function]}
+                                              type="checkbox"
+                                            >
+                                              <input
+                                                checked={false}
+                                                className="form-check-input"
+                                                onChange={[Function]}
+                                                type="checkbox"
+                                              />
+                                            </Input>
+                                             
+                                            Show status icons
+                                          </label>
+                                        </Label>
+                                      </button>
+                                    </DropdownItem>
+                                  </UserPreferenceCheckbox>
                                   <DropdownItem
                                     divider={true}
                                     tag="button"
diff --git a/testplan/web_ui/testing/src/Toolbar/Toolbar.js b/testplan/web_ui/testing/src/Toolbar/Toolbar.js
index 387a157a0..0e888f5ef 100644
--- a/testplan/web_ui/testing/src/Toolbar/Toolbar.js
+++ b/testplan/web_ui/testing/src/Toolbar/Toolbar.js
@@ -56,6 +56,7 @@ import {
   hideEmptyTestcasesPreference,
   hideSkippedTestcasesPreference,
   useTreeViewPreference,
+  showStatusIconsPreference,
 } from "../UserSettings/UserSettings";
 import { useAtom, useAtomValue } from "jotai";
 import _ from "lodash";
@@ -242,6 +243,9 @@ const ToolbarPreferencesButton = ({ toolbarStyle }) => {
         <UserPreferenceCheckbox preferenceAtom={displayPathPreference}>
           Display file path of assertions
         </UserPreferenceCheckbox>
+        <UserPreferenceCheckbox preferenceAtom={showStatusIconsPreference}>
+          Show status icons
+        </UserPreferenceCheckbox>
         <DropdownItem divider />
         <DropdownItem header>Navigation preferences</DropdownItem>
         <UserPreferenceCheckbox preferenceAtom={useTreeViewPreference}>
diff --git a/testplan/web_ui/testing/src/UserSettings/UserSettings.js b/testplan/web_ui/testing/src/UserSettings/UserSettings.js
index 9795c6b0f..cadfca1c5 100644
--- a/testplan/web_ui/testing/src/UserSettings/UserSettings.js
+++ b/testplan/web_ui/testing/src/UserSettings/UserSettings.js
@@ -15,3 +15,7 @@ export const hideSkippedTestcasesPreference = atomWithStorage(
   "hideSkippedTestcases",
   false
 );
+export const showStatusIconsPreference = atomWithStorage(
+  "showStatusIcons",
+  false
+);