diff --git a/apps/app/components/core/sidebar/progress-chart.tsx b/apps/app/components/core/sidebar/progress-chart.tsx
index bb3f7e059d2..f8454650e86 100644
--- a/apps/app/components/core/sidebar/progress-chart.tsx
+++ b/apps/app/components/core/sidebar/progress-chart.tsx
@@ -40,7 +40,7 @@ const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
   const CustomTooltip = ({ active, payload }: TooltipProps<ValueType, NameType>) => {
     if (active && payload && payload.length) {
       return (
-        <div className="rounded-sm bg-gray-300 p-1 text-xs text-gray-800">
+        <div className="rounded-sm bg-brand-surface-1 p-1 text-xs text-brand-base">
           <p>{payload[0].payload.currentDate}</p>
         </div>
       );
@@ -68,20 +68,8 @@ const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
             <stop offset="100%" stopColor="#3F76FF" stopOpacity={0} />
           </linearGradient>
         </defs>
-        <XAxis
-          dataKey="currentDate"
-          stroke="#9ca3af"
-          tick={{ fontSize: "12px", fill: "#1f2937" }}
-          tickSize={10}
-          minTickGap={10}
-        />
-        <YAxis
-          stroke="#9ca3af"
-          tick={{ fontSize: "12px", fill: "#1f2937" }}
-          tickSize={10}
-          minTickGap={10}
-          allowDecimals={false}
-        />
+        <XAxis dataKey="currentDate" tickSize={10} minTickGap={10} />
+        <YAxis tickSize={10} minTickGap={10} allowDecimals={false} />
         <Tooltip content={<CustomTooltip />} />
         <Area
           type="monotone"
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index bbbd170e4e6..f896d232ea8 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -135,7 +135,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
       <div
         className={`fixed top-0 ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-surface-2 py-5 duration-300`}
+        } z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
       >
         {cycle ? (
           <>
@@ -297,15 +297,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                     </CustomMenu>
                   </div>
 
-                  <span className="whitespace-normal text-sm leading-5 text-brand-base">
+                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary">
                     {cycle.description}
                   </span>
                 </div>
 
                 <div className="flex flex-col  gap-4  text-sm">
                   <div className="flex items-center justify-start gap-1">
-                    <div className="flex w-40 items-center justify-start gap-2">
-                      <UserCircleIcon className="h-5 w-5 text-gray-400" />
+                    <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+                      <UserCircleIcon className="h-5 w-5" />
                       <span>Lead</span>
                     </div>
 
@@ -323,17 +323,17 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           {cycle.owned_by.first_name.charAt(0)}
                         </span>
                       )}
-                      <span className="text-brand-base">{cycle.owned_by.first_name}</span>
+                      <span className="text-brand-secondary">{cycle.owned_by.first_name}</span>
                     </div>
                   </div>
 
                   <div className="flex items-center justify-start gap-1">
-                    <div className="flex w-40 items-center justify-start gap-2">
-                      <ChartPieIcon className="h-5 w-5 text-gray-400" />
+                    <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+                      <ChartPieIcon className="h-5 w-5" />
                       <span>Progress</span>
                     </div>
 
-                    <div className="flex items-center gap-2.5 text-brand-muted-1">
+                    <div className="flex items-center gap-2.5 text-brand-secondary">
                       <span className="h-4 w-4">
                         <ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} />
                       </span>
diff --git a/apps/app/components/modules/sidebar-select/select-lead.tsx b/apps/app/components/modules/sidebar-select/select-lead.tsx
index 795d0f75c21..b551294fbea 100644
--- a/apps/app/components/modules/sidebar-select/select-lead.tsx
+++ b/apps/app/components/modules/sidebar-select/select-lead.tsx
@@ -54,8 +54,8 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
 
   return (
     <div className="flex items-center justify-start gap-1">
-      <div className="flex w-40 items-center justify-start gap-2">
-        <UserCircleIcon className="h-5 w-5 text-gray-400" />
+      <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+        <UserCircleIcon className="h-5 w-5" />
         <span>Lead</span>
       </div>
       <div className="sm:basis-1/2">
diff --git a/apps/app/components/modules/sidebar-select/select-members.tsx b/apps/app/components/modules/sidebar-select/select-members.tsx
index c71a2c52808..2f024913f70 100644
--- a/apps/app/components/modules/sidebar-select/select-members.tsx
+++ b/apps/app/components/modules/sidebar-select/select-members.tsx
@@ -50,8 +50,8 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
 
   return (
     <div className="flex items-center justify-start gap-1">
-      <div className="flex w-40 items-center justify-start gap-2">
-        <UserGroupIcon className="h-5 w-5 text-gray-400" />
+      <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+        <UserGroupIcon className="h-5 w-5" />
         <span>Members</span>
       </div>
       <div className="sm:basis-1/2">
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index b33bf6613e3..e3d75be450d 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -185,7 +185,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
       <div
         className={`fixed top-0 ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-surface-2 py-5 duration-300`}
+        } z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
       >
         {module ? (
           <>
@@ -336,7 +336,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                     </CustomMenu>
                   </div>
 
-                  <span className="whitespace-normal text-sm leading-5 text-brand-base">
+                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary">
                     {module.description}
                   </span>
                 </div>
@@ -368,12 +368,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                   />
 
                   <div className="flex items-center justify-start gap-1">
-                    <div className="flex w-40 items-center justify-start gap-2">
-                      <ChartPieIcon className="h-5 w-5 text-gray-400" />
+                    <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+                      <ChartPieIcon className="h-5 w-5" />
                       <span>Progress</span>
                     </div>
 
-                    <div className="flex items-center gap-2.5 text-brand-muted-1">
+                    <div className="flex items-center gap-2.5 text-brand-secondary">
                       <span className="h-4 w-4">
                         <ProgressBar
                           value={module.completed_issues}
@@ -532,7 +532,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                   <PlusIcon className="h-4 w-4" />
                 </button>
               </div>
-              <div className="mt-2 space-y-2 hover:bg-gray-100">
+              <div className="mt-2 space-y-2 hover:bg-brand-surface-2">
                 {memberRole && module.link_module && module.link_module.length > 0 ? (
                   <LinksList
                     links={module.link_module}
diff --git a/apps/app/components/ui/progress-bar.tsx b/apps/app/components/ui/progress-bar.tsx
index f013913b0eb..4ef06747efa 100644
--- a/apps/app/components/ui/progress-bar.tsx
+++ b/apps/app/components/ui/progress-bar.tsx
@@ -63,7 +63,7 @@ export const ProgressBar: React.FC<Props> = ({
   return (
     <svg width={radius * 2} height={radius * 2}>
       {renderOuterCircle()}
-      <circle r={radius - strokeWidth} cx={radius} cy={radius} fill="#f9fafb" />
+      <circle r={radius - strokeWidth} cx={radius} cy={radius} className="progress-bar"/>
     </svg>
   );
 };
diff --git a/apps/app/components/workspace/sidebar-dropdown.tsx b/apps/app/components/workspace/sidebar-dropdown.tsx
index fa9163d652c..b1e23a12fa7 100644
--- a/apps/app/components/workspace/sidebar-dropdown.tsx
+++ b/apps/app/components/workspace/sidebar-dropdown.tsx
@@ -86,7 +86,7 @@ export const WorkspaceSidebarDropdown = () => {
         <div className="flex items-center justify-between gap-2.5">
           <Menu.Button className="text-brand-muted-1 flex w-full items-center rounded-md py-2 text-sm font-semibold focus:outline-none">
             <div
-              className={`flex w-full items-center gap-x-2 rounded-md bg-brand-base px-2 py-1.5 ${
+              className={`flex w-full items-center gap-x-2 rounded-md bg-brand-surface-2 px-2 py-1.5 ${
                 sidebarCollapse ? "justify-center" : ""
               }`}
             >
@@ -189,9 +189,9 @@ export const WorkspaceSidebarDropdown = () => {
                     onClick={() => {
                       router.push("/create-workspace");
                     }}
-                    className="flex w-full items-center gap-1 text-sm text-gray-600"
+                    className="flex w-full items-center gap-1 text-sm text-brand-secondary"
                   >
-                    <PlusIcon className="h-3 w-3 text-gray-600" />
+                    <PlusIcon className="h-3 w-3" />
                     Create Workspace
                   </Menu.Item>
                 </div>
@@ -209,7 +209,7 @@ export const WorkspaceSidebarDropdown = () => {
                 <Menu.Item
                   key={index}
                   as="div"
-                  className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-gray-600 hover:bg-brand-surface-1"
+                  className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-brand-secondary hover:bg-brand-surface-1"
                 >
                   <Link href={link.href}>
                     <a className="w-full">{link.name}</a>
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index 3393842ee5e..c16b39807e8 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -206,4 +206,9 @@
   );
 }
 
+.progress-bar{
+  fill: currentColor;
+  color: rgba(var(--color-bg-sidebar));
+}
+
 /* end react datepicker styling */