diff --git a/src/ContentProcessorWeb/src/Components/DocumentViewer/DocumentViewer.styles.scss b/src/ContentProcessorWeb/src/Components/DocumentViewer/DocumentViewer.styles.scss
index f305e1f9..f79409b6 100644
--- a/src/ContentProcessorWeb/src/Components/DocumentViewer/DocumentViewer.styles.scss
+++ b/src/ContentProcessorWeb/src/Components/DocumentViewer/DocumentViewer.styles.scss
@@ -1,11 +1,11 @@
 .imageContainer{
     width: 100%;
     height: 100%;
-    border: 1px solid rgb(219, 219, 219)
+    border: 1px solid var(--colorNeutralBackground2Pressed)
 }
 
 .imageErrorContainer{
-    background: rgba(0, 0, 0, 0.3);
+    background: var(--colorBrandShadowAmbient);
     /* margin: auto; */
     display: flex;
     align-items: center;
@@ -22,19 +22,19 @@
     box-sizing: content-box;
     margin: 30px;
     border-radius: 6px;
-    border: 1px solid #c0c0c0;
+    border: 1px solid var(--colorNeutralStroke1Pressed);
     /* font-size: 21px; */
     /* font-weight: 600; */
     box-shadow: azure;
     /* transform: translate(-50%, -50%); */
     /* top: 50%; */
     /* left: 50%; */
-    background: white;
+    background: var(--colorNeutralBackground1);
     /* display: flex
 ; */
-    background-color: white;
+    background-color: var(--colorNeutralBackground1);
     border: 1px solid #ddd;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 8px var(--colorNeutralShadowAmbientDarker);
 
     .imgEH{
         font-size: 24px;
@@ -47,8 +47,8 @@
     display: flex;
     justify-content: center;
     height: 100%;
-    border: 1px solid rgb(219, 219, 219);
-    background: rgb(246, 246, 246);
+    border: 1px solid var(--colorNeutralBackground2Pressed);
+    background: var(--colorNeutralBackground4)
 }
 
 
diff --git a/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessQueueGrid/ProcessQueueGrid.styles.scss b/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessQueueGrid/ProcessQueueGrid.styles.scss
index 14b02376..1db7f226 100644
--- a/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessQueueGrid/ProcessQueueGrid.styles.scss
+++ b/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessQueueGrid/ProcessQueueGrid.styles.scss
@@ -49,7 +49,7 @@
     }
 
     .roundedBtn {
-        border: 1px solid #BDBDBD;
+        border: 1px solid var(--colorNeutralForegroundDisabled);
         border-radius: 20px;
         text-align: center;
         padding: 1px 10px;
@@ -61,11 +61,11 @@
         text-transform: capitalize;
 
         span {
-            color: #2C3C85
+            color: var(--colorPaletteCornflowerForeground2)
         }
 
         .ProcessedCls {
-            color: #00666D
+            color: var(--colorPaletteLightTealForeground2)
         }
 
     }
@@ -75,23 +75,23 @@
         text-align: center;
 
         .gClass {
-            color: #359B35;
+            color: var(--colorStatusSuccessForeground3);
         }
 
         .yClass {
-            color: #C19C00;
+            color: var(--colorPaletteGoldBorderActive);
         }
 
         .oClass {
-            color: #FF5F3DE5;
+            color: var(--colorStatusWarningBackground3);
         }
 
         .rClass {
-            color: #B10E1C;
+            color: var(--colorStatusDangerForeground1);
         }
 
         .textClass {
-            color: #0F6CBD
+            color: var(--colorNeutralForeground2BrandHover)
         }
     }
 
@@ -107,7 +107,6 @@
 
     .columnCotainer {
         font-size: 12px;
-        color: #323130;
         width: 100%;
     }
 
@@ -127,6 +126,6 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #0F6CBD
+        color: var(--colorNeutralForeground2BrandHover)
     }
 }
\ No newline at end of file
diff --git a/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessSteps/ProcessSteps.tsx b/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessSteps/ProcessSteps.tsx
index 5b5513d8..4480a9a7 100644
--- a/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessSteps/ProcessSteps.tsx
+++ b/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessSteps/ProcessSteps.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState, useRef } from "react";
-import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from "@fluentui/react-components";
+import { Accordion, AccordionItem, AccordionHeader, AccordionPanel, tokens } from "@fluentui/react-components";
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { RootState, AppDispatch } from '../../../../store/index.ts';
 import { JsonEditor } from "json-edit-react";
@@ -70,7 +70,7 @@ const ProcessSteps = () => {
       {!status.includes(store.selectedItem.status) && store.processStepsData?.map((step, index) => (
         <AccordionItem key={index} value={step.step_name}>
           <AccordionHeader onClick={() => handleExpand(index)}> {loadingStates[index] && <Spinner size="tiny" style={{ position: 'absolute', left: '10px' }} label="" />}
-            <span style={{ fontWeight: 'bold', textTransform: 'capitalize' }}>{step.step_name}</span>
+            <span style={{ fontWeight: 'bold', textTransform: 'capitalize'}}>{step.step_name}</span>
             <span style={{ color: 'green', marginLeft: 'auto', display: 'flex', alignItems: 'center' }}>
               {renderProcessTimeInSeconds(step.processed_time)} <CheckmarkCircleFilled style={{ marginLeft: '4px' }} />
             </span>
diff --git a/src/ContentProcessorWeb/src/Pages/DefaultPage/PanelCenter.tsx b/src/ContentProcessorWeb/src/Pages/DefaultPage/PanelCenter.tsx
index 13b57a99..3464ea51 100644
--- a/src/ContentProcessorWeb/src/Pages/DefaultPage/PanelCenter.tsx
+++ b/src/ContentProcessorWeb/src/Pages/DefaultPage/PanelCenter.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import "../../Styles/App.css";
 import { makeStyles, SelectTabData, SelectTabEvent, Tab, TabList, TabValue, Textarea, Divider, Button } from "@fluentui/react-components";
-import { Field } from "@fluentui/react-components";
+import { Field,tokens } from "@fluentui/react-components";
 import PanelToolbar from "../../Hooks/usePanelHooks.tsx";
 import JSONEditor from "../../Components/JSONEditor/JSONEditor"
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
@@ -14,7 +14,6 @@ import { setRefreshGrid } from "../../store/slices/leftPanelSlice.ts";
 
 import { bundleIcon, ChevronDoubleLeft20Filled, ChevronDoubleLeft20Regular } from "@fluentui/react-icons";
 const ChevronDoubleLeft = bundleIcon(ChevronDoubleLeft20Regular, ChevronDoubleLeft20Filled);
-
 interface PanelCenterProps {
   togglePanel: (panel: string) => void;
 }
@@ -41,7 +40,7 @@ const useStyles = makeStyles({
   panelCenterBottomSeciton: {
     padding: '10px 16px',
     boxSizing: 'border-box',
-    background: '#FAFAFA',
+    background: tokens.colorNeutralBackground2,
     position: 'relative'
   },
   panelLabel: {
@@ -62,13 +61,13 @@ const useStyles = makeStyles({
     height: 'calc(100vh - 200px)',
     border: '1px solid #DBDBDB',
     overflow: 'auto',
-    background: '#f6f6f6',
+    background: tokens.colorNeutralBackground3,
     padding: '5px',
     boxSizing: 'border-box'
   },
   fieldLabel: {
     fontWeight: 'bold',
-    color: '#424242',
+    color: tokens.colorNeutralForeground2,
   },
   textAreaClass: {
     minHeight: '90px',
diff --git a/src/ContentProcessorWeb/src/Pages/DefaultPage/Panels.styles.scss b/src/ContentProcessorWeb/src/Pages/DefaultPage/Panels.styles.scss
index 39e09349..2018d046 100644
--- a/src/ContentProcessorWeb/src/Pages/DefaultPage/Panels.styles.scss
+++ b/src/ContentProcessorWeb/src/Pages/DefaultPage/Panels.styles.scss
@@ -5,15 +5,14 @@
 /* Panel container styling */
 
 .panelLeftLayout {
-  /* background-color: var(--colorNeutralBackground4); */
   position: relative;
   display: flex;
   height: 100%;
   box-sizing: border-box;
   flex-direction: column;
   overflow-y: auto;
-  background-color: white;
-  border: 1px solid #D6D6D6;
+  background-color: var(--colorNeutralBackground1);
+  border: 1px solid var(--colorNeutralBackground3Pressed);
   border-width: 1px 1px 0px 0px;
   flex: 37%;
   min-width: 300px;
@@ -30,8 +29,8 @@
     box-sizing: border-box;
     flex-direction: column;
     overflow-y: auto;
-    background-color: white;
-    border: 1px solid #D6D6D6;
+    background-color: var(--colorNeutralBackground1);
+    border: 1px solid var(--colorNeutralBackground3Pressed);
     border-width: 1px 1px 0px 0px;
   }
 
@@ -86,8 +85,8 @@
 
   flex: 31%;
   min-width: 280px;
-  background: white;
-  border: 2px solid #d6d6d6;
+  background: var(--colorNeutralBackground1);
+  border: 2px solid var(--colorNeutralBackground3Pressed);
   border-width: 2px 2px 0 0;
 
   .custom-test button {
@@ -102,7 +101,7 @@
 
     .msgp {
       margin: auto;
-      color: red;
+      color: var(--colorPaletteRedBackground3);
     }
   }
 
@@ -115,7 +114,7 @@
   flex: none;
   width: auto;
   min-width: 20px;
-  border: 1px solid #d6d6d6;
+  border: 1px solid var(--colorNeutralBackground3Pressed);
   border-width: 1px 1px 0 0;
 
   .collapseButtonDiv {
@@ -129,21 +128,21 @@
 
 
 .panelRight {
-  /* background-color: var(--colorNeutralBackground4); */
+   background-color: var(--colorNeutralBackground4);
   position: relative;
   display: flex;
   height: 100%;
   box-sizing: border-box;
   flex-direction: column;
   overflow-y: auto;
-  background-color: white;
-  border: 1px solid #D6D6D6;
+  background-color: var(--colorNeutralBackground1);
+  border: 1px solid var(--colorNeutralBackground3Pressed);
   border-width: 1px 0px 0px 0px;
 
   flex: 31%;
   min-width: 280px;
-  background: white;
-  border: 1px solid #d6d6d6;
+  background: var(--colorNeutralBackground1);
+  border: 1px solid var(--colorNeutralBackground3Pressed);
   border-width: 1px 1px 0 0;
 
   .panelRightContent {
@@ -213,7 +212,6 @@
   /* Automatically adjusts height */
   width: fit-content;
   /* Adjust width based on content */
-  background-color: #f0f0f0;
   cursor: pointer;
   min-width: 10px !important;