diff --git a/ui/components/app/app-header/app-header.component.js b/ui/components/app/app-header/app-header.component.js
index 561ab518d..0b50e3333 100644
--- a/ui/components/app/app-header/app-header.component.js
+++ b/ui/components/app/app-header/app-header.component.js
@@ -122,8 +122,6 @@ export default class AppHeader extends PureComponent {
             {!hideNetworkIndicator && (
               <div className="app-header__network-component-wrapper">
                 <NetworkDisplay
-                  colored={false}
-                  outline
                   onClick={(event) => this.handleNetworkIndicatorClick(event)}
                   disabled={disabled || disableNetworkIndicator}
                 />
diff --git a/ui/components/app/network-display/index.scss b/ui/components/app/network-display/index.scss
index dd7f3d0a5..1ca9b410a 100644
--- a/ui/components/app/network-display/index.scss
+++ b/ui/components/app/network-display/index.scss
@@ -11,34 +11,6 @@
     cursor: not-allowed;
   }
 
-  &--colored {
-    background-color: lighten(rgb(125, 128, 130), 45%);
-  }
-
-  &--mainnet {
-    background-color: lighten($blue-lagoon, 68%);
-  }
-
-  &--ropsten {
-    background-color: lighten($crimson, 45%);
-  }
-
-  &--kovan {
-    background-color: lighten($purple, 65%);
-  }
-
-  &--rinkeby {
-    background-color: lighten($tulip-tree, 35%);
-  }
-
-  &--goerli {
-    background-color: lighten($dodger-blue, 35%);
-  }
-
-  &--localhost {
-    background-color: lighten($blue-lagoon, 68%);
-  }
-
   &.chip {
     margin: 0;
     max-width: 100%;
diff --git a/ui/components/app/network-display/network-display.js b/ui/components/app/network-display/network-display.js
index 29e90ff3d..a92278ef6 100644
--- a/ui/components/app/network-display/network-display.js
+++ b/ui/components/app/network-display/network-display.js
@@ -20,8 +20,6 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import { isNetworkLoading } from '../../../selectors';
 
 export default function NetworkDisplay({
-  colored,
-  outline,
   indicatorSize,
   disabled,
   labelProps,
@@ -40,7 +38,7 @@ export default function NetworkDisplay({
 
   return (
     <Chip
-      borderColor={outline ? COLORS.UI3 : COLORS.TRANSPARENT}
+      borderColor={onClick ? COLORS.BORDER_DEFAULT : COLORS.BORDER_MUTED}
       onClick={onClick}
       leftIcon={
         <LoadingIndicator
@@ -60,16 +58,18 @@ export default function NetworkDisplay({
           />
         </LoadingIndicator>
       }
-      rightIcon={<IconCaretDown size={16} className="network-display__icon" />}
+      rightIcon={
+        onClick ? (
+          <IconCaretDown size={16} className="network-display__icon" />
+        ) : null
+      }
       label={
         networkType === NETWORK_TYPE_RPC
           ? networkNickname ?? t('privateNetwork')
           : t(networkType)
       }
       className={classnames('network-display', {
-        'network-display--colored': colored,
         'network-display--disabled': disabled,
-        [`network-display--${networkType}`]: colored && networkType,
         'network-display--clickable': typeof onClick === 'function',
       })}
       labelProps={{
@@ -80,22 +80,37 @@ export default function NetworkDisplay({
   );
 }
 NetworkDisplay.propTypes = {
-  colored: PropTypes.bool,
+  /**
+   * The size of the indicator
+   */
   indicatorSize: PropTypes.oneOf(Object.values(SIZES)),
+  /**
+   * The label props of the label can use most of the Typography props
+   */
   labelProps: Chip.propTypes.labelProps,
+  /**
+   * The target network
+   */
   targetNetwork: PropTypes.shape({
     type: PropTypes.oneOf([
-      ...Object.values(NETWORK_TYPE_TO_ID_MAP),
+      ...Object.keys(NETWORK_TYPE_TO_ID_MAP),
       NETWORK_TYPE_RPC,
     ]),
     nickname: PropTypes.string,
   }),
-  outline: PropTypes.bool,
+  /**
+   * Whether the NetworkDisplay is disabled
+   */
   disabled: PropTypes.bool,
+  /**
+   * The onClick event handler of the NetworkDisplay
+   * if it is not passed it is assumed that the NetworkDisplay
+   * should not be interactive and removes the caret and changes the border color
+   * of the NetworkDisplay
+   */
   onClick: PropTypes.func,
 };
 
 NetworkDisplay.defaultProps = {
-  colored: true,
   indicatorSize: SIZES.LG,
 };
diff --git a/ui/components/app/network-display/network-display.stories.js b/ui/components/app/network-display/network-display.stories.js
index 7799589bb..8fc695a55 100644
--- a/ui/components/app/network-display/network-display.stories.js
+++ b/ui/components/app/network-display/network-display.stories.js
@@ -1,34 +1,93 @@
 import React from 'react';
+
+import {
+  NETWORK_TYPE_TO_ID_MAP,
+  NETWORK_TYPE_RPC,
+} from '../../../../shared/constants/network';
+import { SIZES } from '../../../helpers/constants/design-system';
+
 import NetworkDisplay from '.';
 
 export default {
   title: 'Components/App/NetworkDisplay',
   id: __filename,
   argTypes: {
-    colored: {
-      control: 'boolean',
-    },
     indicatorSize: {
-      control: 'oneOf(Object.values(SIZES))',
+      control: 'select',
+      options: Object.values(SIZES),
     },
     labelProps: {
-      control: 'labelProps',
-    },
-    targetNetwork: {
       control: 'object',
     },
-    outline: {
-      control: 'boolean',
+    targetNetwork: {
+      control: 'select',
+      options: [...Object.keys(NETWORK_TYPE_TO_ID_MAP), NETWORK_TYPE_RPC],
     },
     disabled: {
       control: 'boolean',
     },
     onClick: {
       action: 'onClick',
+      description:
+        'The onClick event handler of the NetworkDisplay. If it is not passed it is assumed that the NetworkDisplay SHOULD NOT be interactive and removes the caret and changes the border color of the NetworkDisplay to border-muted',
     },
   },
+  args: {
+    targetNetwork: 'ropsten',
+  },
 };
 
-export const DefaultStory = (args) => <NetworkDisplay {...args} />;
+export const DefaultStory = (args) => (
+  <NetworkDisplay
+    {...args}
+    targetNetwork={{
+      type: args.targetNetwork,
+      nickname: args.targetNetwork,
+    }}
+  />
+);
 
 DefaultStory.storyName = 'Default';
+
+export const TargetNetwork = (args) => {
+  const targetNetworkArr = [
+    ...Object.keys(NETWORK_TYPE_TO_ID_MAP),
+    NETWORK_TYPE_RPC,
+  ];
+  return (
+    <>
+      {Object.values(targetNetworkArr).map((variant) => (
+        <NetworkDisplay
+          {...args}
+          key={variant}
+          targetNetwork={{
+            type: variant,
+            nickname: variant,
+          }}
+        />
+      ))}
+    </>
+  );
+};
+
+export const DisplayOnly = (args) => {
+  const targetNetworkArr = [
+    ...Object.keys(NETWORK_TYPE_TO_ID_MAP),
+    NETWORK_TYPE_RPC,
+  ];
+  return (
+    <>
+      {Object.values(targetNetworkArr).map((variant) => (
+        <NetworkDisplay
+          {...args}
+          key={variant}
+          targetNetwork={{
+            type: variant,
+            nickname: variant,
+          }}
+          onClick={undefined}
+        />
+      ))}
+    </>
+  );
+};
diff --git a/ui/components/app/signature-request/index.scss b/ui/components/app/signature-request/index.scss
index de89e8116..b92452e46 100644
--- a/ui/components/app/signature-request/index.scss
+++ b/ui/components/app/signature-request/index.scss
@@ -17,7 +17,6 @@
   flex: 1;
 
   .network-display {
-    padding: 0;
     justify-content: flex-end;
     margin-left: auto;
   }
diff --git a/ui/components/app/signature-request/signature-request-header/signature-request-header.component.js b/ui/components/app/signature-request/signature-request-header/signature-request-header.component.js
index e853ea427..6b94732d7 100644
--- a/ui/components/app/signature-request/signature-request-header/signature-request-header.component.js
+++ b/ui/components/app/signature-request/signature-request-header/signature-request-header.component.js
@@ -17,7 +17,7 @@ export default class SignatureRequestHeader extends PureComponent {
           {fromAccount ? <AccountListItem account={fromAccount} /> : null}
         </div>
         <div className="signature-request-header--network">
-          <NetworkDisplay colored={false} />
+          <NetworkDisplay />
         </div>
       </div>
     );
diff --git a/ui/components/app/signature-request/signature-request-header/signature-request-header.stories.js b/ui/components/app/signature-request/signature-request-header/signature-request-header.stories.js
new file mode 100644
index 000000000..281125a0f
--- /dev/null
+++ b/ui/components/app/signature-request/signature-request-header/signature-request-header.stories.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import SignatureRequestHeader from '.';
+
+export default {
+  title: 'Components/App/SignatureRequest/SignatureRequestHeader',
+  id: __filename,
+};
+
+export const DefaultStory = () => <SignatureRequestHeader />;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/css/design-system/deprecated-colors.scss b/ui/css/design-system/deprecated-colors.scss
index 82d953de5..c43c8ee3b 100644
--- a/ui/css/design-system/deprecated-colors.scss
+++ b/ui/css/design-system/deprecated-colors.scss
@@ -9,10 +9,4 @@ $malibu-blue: #7ac9fd;
 $alto: #dedede;
 $black: #000;
 $white: #fff;
-$blue-lagoon: #038789;
-$crimson: #e91550;
-$purple: #690496;
-$tulip-tree: #ebb33f;
-$dodger-blue: #3099f2;
 $monzo: #d0021b;
-$dusty-gray: #9b9b9b;
diff --git a/ui/pages/confirmation/confirmation.js b/ui/pages/confirmation/confirmation.js
index 44768c633..8bb7e22ea 100644
--- a/ui/pages/confirmation/confirmation.js
+++ b/ui/pages/confirmation/confirmation.js
@@ -166,7 +166,7 @@ export default function ConfirmationPage() {
                 setCurrentPendingConfirmation(currentPendingConfirmation - 1)
               }
             >
-              <i className="fas fa-chevron-left"></i>
+              <i className="fas fa-chevron-left" />
             </button>
           )}
           <button
@@ -178,7 +178,7 @@ export default function ConfirmationPage() {
               setCurrentPendingConfirmation(currentPendingConfirmation + 1)
             }
           >
-            <i className="fas fa-chevron-right"></i>
+            <i className="fas fa-chevron-right" />
           </button>
         </div>
       )}
@@ -186,7 +186,6 @@ export default function ConfirmationPage() {
         {templatedValues.networkDisplay ? (
           <Box justifyContent="center">
             <NetworkDisplay
-              colored={false}
               indicatorSize={SIZES.XS}
               labelProps={{ color: COLORS.BLACK }}
             />