diff --git a/src/app/components/Charts/Network/index.tsx b/src/app/components/Charts/Network/index.tsx
index 1b8b50099..74ab6926c 100644
--- a/src/app/components/Charts/Network/index.tsx
+++ b/src/app/components/Charts/Network/index.tsx
@@ -61,7 +61,7 @@ export function NetworkViz(props: NetworkVizProps) {
           stroke={node.borderColor}
           transform={`translate(${node.x}, ${node.y}) scale(1)`}
           css={
-            node.color === "#E2E2E2"
+            node.color === appColors.COMMON.SELECTED_ITEM_VALUE_COLOR
               ? `fill: url(#diagonalHatch);`
               : `fill: ${node.color};`
           }
diff --git a/src/app/components/Charts/common/breadcrumbs/index.tsx b/src/app/components/Charts/common/breadcrumbs/index.tsx
index 1d5323e96..94879c60c 100644
--- a/src/app/components/Charts/common/breadcrumbs/index.tsx
+++ b/src/app/components/Charts/common/breadcrumbs/index.tsx
@@ -3,6 +3,7 @@ import { useRecoilState } from "recoil";
 import { useHistory } from "react-router-dom";
 import RightIcon from "@material-ui/icons/ChevronRight";
 import { breadCrumbItems } from "app/state/recoil/atoms";
+import { appColors } from "app/theme";
 
 export default function BreadCrumbs() {
   const history = useHistory();
@@ -65,14 +66,15 @@ export default function BreadCrumbs() {
               <button
                 css={`
                   background: ${index === breadCrumbList.length - 1
-                    ? "#495057"
-                    : "#868e96"};
+                    ? appColors.BREADCRUMBS.ITEM_BUTTON_BACKGROUND_COLOR
+                    : appColors.BREADCRUMBS
+                        .ITEM_BUTTON_SELECTED_BACKGROUND_COLOR};
                   height: 32px;
                   padding: 13px 12px;
                   border-radius: 20px;
                   font-size: 14px;
                   font-weight: 700;
-                  color: #fff;
+                  color: ${appColors.BREADCRUMBS.ITEM_BUTTON_COLOR};
                   text-align: center;
                   display: flex;
                   align-items: center;
@@ -84,7 +86,8 @@ export default function BreadCrumbs() {
                   :hover,
                   :active,
                   :focus {
-                    background: #495057;
+                    background: ${appColors.BREADCRUMBS
+                      .ITEM_BUTTON_SELECTED_BACKGROUND_COLOR};
                   }
                 `}
                 type="button"
@@ -100,7 +103,7 @@ export default function BreadCrumbs() {
               {index === breadCrumbList.length - 1 ? null : (
                 <div
                   css={`
-                    color: #495057;
+                    color: ${appColors.BREADCRUMBS.ITEM_ARROW_COLOR};
                     display: flex;
                     align-items: center;
                   `}
diff --git a/src/app/components/PageHeader/index.tsx b/src/app/components/PageHeader/index.tsx
index a6c5d9dd0..8bc0b59d5 100644
--- a/src/app/components/PageHeader/index.tsx
+++ b/src/app/components/PageHeader/index.tsx
@@ -48,7 +48,6 @@ const styles = {
   title: (bigPadding: boolean) => css`
     width: 100%;
     color: ${appColors.PAGE_HEADER.TITLE_COLOR};
-    color: #262c34;
     font-size: 18px;
     overflow: hidden;
     line-height: 24px;
diff --git a/src/app/components/PerformanceFrameworkExpandedView/components/ResultsTable/index.tsx b/src/app/components/PerformanceFrameworkExpandedView/components/ResultsTable/index.tsx
index 5b8aa6ba4..809ec6af2 100644
--- a/src/app/components/PerformanceFrameworkExpandedView/components/ResultsTable/index.tsx
+++ b/src/app/components/PerformanceFrameworkExpandedView/components/ResultsTable/index.tsx
@@ -203,7 +203,8 @@ function ResultsTableRow(props: ResultsTableRowProps) {
                 width: 12px;
                 height: 12px;
                 border-radius: 50%;
-                background: ${props.color === "#E2E2E2"
+                background: ${props.color ===
+                appColors.COMMON.SELECTED_ITEM_VALUE_COLOR
                   ? appColors.NETWORK.TABLE_CIRCLE_INDICATOR_BACKGROUND_COLOR
                   : props.color};
               `}
@@ -424,7 +425,8 @@ function MobileResultsTable(props: PFIndicator) {
                   width: 12px;
                   height: 12px;
                   border-radius: 50%;
-                  background: ${selectedItem.color === "#E2E2E2"
+                  background: ${selectedItem.color ===
+                  appColors.COMMON.SELECTED_ITEM_VALUE_COLOR
                     ? appColors.NETWORK.TABLE_CIRCLE_INDICATOR_BACKGROUND_COLOR
                     : selectedItem.color};
                 `}
diff --git a/src/app/components/RangeSlider/index.tsx b/src/app/components/RangeSlider/index.tsx
index bdd15eaee..539d19ac4 100644
--- a/src/app/components/RangeSlider/index.tsx
+++ b/src/app/components/RangeSlider/index.tsx
@@ -74,7 +74,7 @@ const Track = (params: {
       ...params.props.style,
       height: "6px",
       width: "calc(100% - 50px)",
-      background: `linear-gradient(to right, ${appColors.COMMON.WHITE},#7e8a96,#0a0b0c)`,
+      background: appColors.RANGE_SLIDER.TRACK_BACKGROUND_COLOR,
     }}
   >
     {params.children}
@@ -127,7 +127,7 @@ export function RangeSlider(props: RangeSliderProps) {
                 outline: "none",
                 justifyContent: "center",
                 alignItems: "center",
-                boxShadow: "0px 2px 6px #AAA",
+                boxShadow: `0px 2px 6px ${appColors.RANGE_SLIDER.THUMB_BOX_SHADOW_COLOR}`,
               }}
             >
               <ThumbLabel
diff --git a/src/app/components/ToolBoxPanel/components/controlrow/index.tsx b/src/app/components/ToolBoxPanel/components/controlrow/index.tsx
index 98d1d4451..02070ca89 100644
--- a/src/app/components/ToolBoxPanel/components/controlrow/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/controlrow/index.tsx
@@ -82,11 +82,11 @@ export function ToolBoxPanelControlRow(props: ToolBoxPanelControlRowProps) {
                   }
 
                   &:hover {
-                    color: #fff;
+                    color: ${appColors.COMMON.WHITE};
                     cursor: pointer;
 
                     path {
-                      fill: #13183f;
+                      fill: ${appColors.TOOLBOX.VIEWS_ICON_ACTIVE_COLOR};
                     }
                   }
                 `}
@@ -109,10 +109,12 @@ export function ToolBoxPanelControlRow(props: ToolBoxPanelControlRowProps) {
                 flex-direction: row;
                 border-radius: 20px;
                 align-items: center;
-                color: ${props.selected === option.value ? "#fff" : "#262C34"};
+                color: ${props.selected === option.value
+                  ? appColors.COMMON.WHITE
+                  : appColors.COMMON.PRIMARY_COLOR_1};
                 background: ${props.selected === option.value
-                  ? "#262C34"
-                  : "#fff"};
+                  ? appColors.COMMON.PRIMARY_COLOR_1
+                  : appColors.COMMON.WHITE};
 
                 > * {
                   @supports (-webkit-touch-callout: none) and
@@ -124,11 +126,11 @@ export function ToolBoxPanelControlRow(props: ToolBoxPanelControlRowProps) {
                 }
 
                 &:hover {
-                  color: #fff;
+                  color: ${appColors.COMMON.WHITE};
                   cursor: pointer;
                   background: ${props.selected === option.value
-                    ? "#262C34"
-                    : "#13183F"};
+                    ? appColors.COMMON.PRIMARY_COLOR_1
+                    : appColors.COMMON.SECONDARY_COLOR_13};
                 }
               `}
             >
diff --git a/src/app/components/ToolBoxPanel/components/datapath/index.tsx b/src/app/components/ToolBoxPanel/components/datapath/index.tsx
index c0de97726..dd43e7b24 100644
--- a/src/app/components/ToolBoxPanel/components/datapath/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/datapath/index.tsx
@@ -11,6 +11,7 @@ import CloseOutlinedIcon from "@material-ui/icons/CloseOutlined";
 import TimelineSeparator from "@material-ui/lab/TimelineSeparator";
 import TimelineConnector from "@material-ui/lab/TimelineConnector";
 import { useStoreState, useStoreActions } from "app/state/store/hooks";
+import { appColors } from "app/theme";
 
 export function DataPathPanel() {
   const history = useHistory();
@@ -57,7 +58,7 @@ export function DataPathPanel() {
           flex-direction: row;
           align-items: center;
           justify-content: space-between;
-          border-bottom: 1px solid #cfd4da;
+          border-bottom: 1px solid ${appColors.COMMON.SECONDARY_COLOR_6};
 
           @media (max-width: 767px) {
             padding: 16px;
@@ -72,7 +73,7 @@ export function DataPathPanel() {
           `}
           onClick={() => setShowDataPath(false)}
         >
-          <CloseOutlinedIcon htmlColor="#2E4063" />
+          <CloseOutlinedIcon htmlColor={appColors.COMMON.SECONDARY_COLOR_18} />
         </IconButton>
       </div>
       {dataPathSteps.length > 0 && (
@@ -97,7 +98,7 @@ export function DataPathPanel() {
                 .MuiTimelineDot-root {
                   margin: 0;
                   padding: 3px;
-                  background: #262c34;
+                  background: ${appColors.COMMON.PRIMARY_COLOR_1};
                 }
 
                 .MuiTimelineContent-root {
@@ -106,7 +107,7 @@ export function DataPathPanel() {
                 }
 
                 .MuiTimelineConnector-root {
-                  background: #adb5bd;
+                  background: ${appColors.COMMON.SECONDARY_COLOR_5};
                 }
               }
             `}
@@ -132,18 +133,6 @@ export function DataPathPanel() {
                         ? drilldown.name.split("-")[1]
                         : drilldown.name}
                     </div>
-                    {/* <div
-                      css={`
-                        color: #fff;
-                        margin-top: 8px;
-                        padding: 2px 8px;
-                        width: fit-content;
-                        background: #98a1aa;
-                        border-radius: 26px;
-                      `}
-                    >
-                      By Components
-                    </div> */}
                   </TimelineContent>
                 </TimelineItem>
               ))}
diff --git a/src/app/modules/about-module/index.tsx b/src/app/modules/about-module/index.tsx
index 0b76a8561..7f21264fd 100644
--- a/src/app/modules/about-module/index.tsx
+++ b/src/app/modules/about-module/index.tsx
@@ -73,7 +73,7 @@ export default function About() {
               }
               > p {
                 > a {
-                  color: #000;
+                  color: ${appColors.ABOUT_PAGE.LINK_COLOR};
                 }
               }
             }
diff --git a/src/app/modules/about-module/links.tsx b/src/app/modules/about-module/links.tsx
index ad7ba079e..7508f1a7d 100644
--- a/src/app/modules/about-module/links.tsx
+++ b/src/app/modules/about-module/links.tsx
@@ -5,6 +5,7 @@ import useTitle from "react-use/lib/useTitle";
 import { PageHeader } from "app/components/PageHeader";
 import get from "lodash/get";
 import { useCMSData } from "app/hooks/useCMSData";
+import { appColors } from "app/theme";
 
 export default function LinkList() {
   const cmsData = useCMSData({ returnData: true });
@@ -43,15 +44,15 @@ export default function LinkList() {
 
           > a {
             width: 100%;
-            color: #000;
+            color: ${appColors.ABOUT_PAGE.LINK_COLOR};
             font-size: 14px;
             padding: 10px 0;
             font-weight: bold;
             text-align: center;
-            background: #dfe3e6;
+            background: ${appColors.ABOUT_PAGE.LINK_BACKGROUND_COLOR};
             border-radius: 20px;
             text-decoration: none;
-            border: 1px solid #dfe3e6;
+            border: 1px solid ${appColors.ABOUT_PAGE.LINK_BORDER_COLOR};
             box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.05);
             font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
           }
diff --git a/src/app/modules/common/no-match-page/index.tsx b/src/app/modules/common/no-match-page/index.tsx
index c01c05567..1b09df4cc 100644
--- a/src/app/modules/common/no-match-page/index.tsx
+++ b/src/app/modules/common/no-match-page/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import get from "lodash/get";
 import { useCMSData } from "app/hooks/useCMSData";
+import { appColors } from "app/theme";
 
 // cc:refactor this component, inline css need to be moved to proper styled components
 
@@ -31,7 +32,7 @@ export const NoMatchPage = () => {
           font-stretch: normal;
           line-height: 1.71;
           letter-spacing: 0.1px;
-          color: #525252;
+          color: ${appColors.COMMON.SECONDARY_COLOR_19};
         `}
       >
         <div>{get(cmsData, "modulesCommon.noMatchOops", "")}</div>
@@ -44,7 +45,7 @@ export const NoMatchPage = () => {
           font-stretch: normal;
           line-height: normal;
           letter-spacing: 2.15px;
-          color: #525252;
+          color: ${appColors.COMMON.SECONDARY_COLOR_19};
           font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
         `}
       >
@@ -60,7 +61,7 @@ export const NoMatchPage = () => {
           line-height: 1.71;
           letter-spacing: 1.25px;
           text-align: center;
-          color: #525252;
+          color: ${appColors.COMMON.SECONDARY_COLOR_19};
           margin-bottom: 50px;
         `}
       >
@@ -79,7 +80,7 @@ export const NoMatchPage = () => {
             align-items: center;
             width: 204px;
             height: 46px;
-            background: #262c34;
+            background: ${appColors.COMMON.PRIMARY_COLOR_1};
             border-radius: 20px;
           `}
         >
diff --git a/src/app/modules/grant-detail-module/components/sub-modules/overview/index.tsx b/src/app/modules/grant-detail-module/components/sub-modules/overview/index.tsx
index 9d492d751..e45b156fb 100644
--- a/src/app/modules/grant-detail-module/components/sub-modules/overview/index.tsx
+++ b/src/app/modules/grant-detail-module/components/sub-modules/overview/index.tsx
@@ -209,7 +209,7 @@ export function GrantDetailOverviewModule() {
               <Link
                 to={`/partner/${grantInfoData.principalRecipient.code}/investments`}
                 css={`
-                  color: #000;
+                  color: ${appColors.GRANTS.DETAIL_LINK_COLOR};
                   font-size: 12px;
                 `}
               >
@@ -328,7 +328,7 @@ export function GrantDetailOverviewModule() {
         <a
           href={`mailto:${grantInfoData.manager.email}`}
           css={`
-            color: #000;
+            color: ${appColors.GRANTS.DETAIL_LINK_COLOR};
             font-size: 12px;
           `}
         >
diff --git a/src/app/modules/viz-module/sub-modules/budgets/flow/index.tsx b/src/app/modules/viz-module/sub-modules/budgets/flow/index.tsx
index 5cb3e6aea..fb06464fe 100644
--- a/src/app/modules/viz-module/sub-modules/budgets/flow/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/budgets/flow/index.tsx
@@ -21,6 +21,7 @@ import { useRecoilState } from "recoil";
 import { breadCrumbItems } from "app/state/recoil/atoms";
 import { Grid } from "@material-ui/core";
 import { formatFinancialValue } from "app/utils/formatFinancialValue";
+import { appColors } from "app/theme";
 
 interface BudgetsFlowModuleProps {
   nodes: {
@@ -280,7 +281,11 @@ export function BudgetsFlowModule(props: BudgetsFlowModuleProps) {
         item
         xs={12}
         sm={2}
-        css="font-size: 12px !important; color: #262C34; margin-top: -9px;"
+        css={`
+          font-size: 12px !important;
+          color: ${appColors.COMMON.PRIMARY_COLOR_1};
+          margin-top: -9px;
+        `}
       >
         <b>Budget</b>
         <p
diff --git a/src/app/theme/index.ts b/src/app/theme/index.ts
index 6e8b01f0a..742ead916 100644
--- a/src/app/theme/index.ts
+++ b/src/app/theme/index.ts
@@ -338,6 +338,8 @@ const SECONDARY_COLOR_13 = "#13183F";
 const SECONDARY_COLOR_14 = "#ACAFBC";
 const SECONDARY_COLOR_15 = "#C4C4C4";
 const SECONDARY_COLOR_17 = "#1B2127";
+const SECONDARY_COLOR_18 = "#2E4063";
+const SECONDARY_COLOR_19 = "#525252";
 
 const GRAPH_COLOR_1 = "#B1BCC8";
 const GRAPH_COLOR_2 = "#D7D8DD";
@@ -375,6 +377,7 @@ export const appColors = {
     SECONDARY_COLOR_3,
     SECONDARY_COLOR_4,
     SECONDARY_COLOR_5,
+    SECONDARY_COLOR_6,
     SECONDARY_COLOR_7,
     SECONDARY_COLOR_10,
     SECONDARY_COLOR_11,
@@ -383,9 +386,12 @@ export const appColors = {
     SECONDARY_COLOR_14,
     SECONDARY_COLOR_15,
     SECONDARY_COLOR_17,
+    SECONDARY_COLOR_18,
+    SECONDARY_COLOR_19,
     COMMON_ICON_COLOR: WHITE,
     PAGE_BACKGROUND_COLOR_1: WHITE,
     PAGE_BACKGROUND_COLOR_2: SECONDARY_COLOR_10,
+    SELECTED_ITEM_VALUE_COLOR: "#E2E2E2",
   },
   GRAPH_COLORS: {
     GRAPH_COLOR_1,
@@ -412,6 +418,12 @@ export const appColors = {
     GRAPH_COLOR_22,
     GRAPH_COLOR_23,
   },
+  BREADCRUMBS: {
+    ITEM_BUTTON_BACKGROUND_COLOR: SECONDARY_COLOR_3,
+    ITEM_BUTTON_SELECTED_BACKGROUND_COLOR: PRIMARY_COLOR_2,
+    ITEM_BUTTON_COLOR: WHITE,
+    ITEM_ARROW_COLOR: PRIMARY_COLOR_2,
+  },
   APPBAR: {
     MOBILE_HEADER_CHEVRON_ICON_COLOR: WHITE,
     DATASETS_MENU_SCROLLBAR_BACKGROUND_COLOR: PRIMARY_COLOR_1,
@@ -490,6 +502,7 @@ export const appColors = {
     DATA_LAYER_COLOR_12: PRIMARY_COLOR_1,
   },
   GRANTS: {
+    DETAIL_LINK_COLOR: "#000",
     TEXT_COLOR: PRIMARY_COLOR_1,
     TOOLTIP_COLOR: PRIMARY_COLOR_1,
     TOOLTIP_BACKGROUND_COLOR: SECONDARY_COLOR_10,
@@ -716,4 +729,13 @@ export const appColors = {
     LOCATION_LIST_ITEM_COLOR: WHITE,
     LOCATION_LIST_BACKGROUND_COLOR: PRIMARY_COLOR_1,
   },
+  RANGE_SLIDER: {
+    TRACK_BACKGROUND_COLOR: "linear-gradient(to right,#fff,#7e8a96,#0a0b0c)",
+    THUMB_BOX_SHADOW_COLOR: "#AAA",
+  },
+  ABOUT_PAGE: {
+    LINK_COLOR: "#000",
+    LINK_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+    LINK_BORDER_COLOR: SECONDARY_COLOR_7,
+  },
 };