diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx
index 89d0ace8..d2bbbc80 100644
--- a/client/src/components/ui/button.tsx
+++ b/client/src/components/ui/button.tsx
@@ -12,7 +12,7 @@ const buttonVariants = cva(
       variant: {
         default: "bg-primary text-big-stone-900 shadow hover:bg-sky-blue-200",
         secondary:
-          "bg-secondary text-accent-foreground shadow-sm hover:bg-big-stone-200",
+          "bg-secondary text-accent-foreground shadow-sm hover:bg-muted-foreground",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-rose-700 focus-visible:ring-destructive",
         outline:
diff --git a/client/src/containers/overview/project-details/index.tsx b/client/src/containers/overview/project-details/index.tsx
index 54e5400b..b59f3b2e 100644
--- a/client/src/containers/overview/project-details/index.tsx
+++ b/client/src/containers/overview/project-details/index.tsx
@@ -189,7 +189,7 @@ export default function ProjectDetails() {
                       <h3 className="text-md">Total project cost</h3>
                     </Label>
                   </div>
-                  <div className="text-sm text-big-stone-200">
+                  <div className="text-sm text-muted-foreground">
                     Refers to the summary of Capital Expenditure and Operating
                     Expenditure
                   </div>
@@ -252,7 +252,7 @@ export default function ProjectDetails() {
                       <h3 className="text-md">Total project cost</h3>
                     </Label>
                   </div>
-                  <div className="text-sm text-big-stone-200">
+                  <div className="text-sm text-muted-foreground">
                     Refers to the summary of Capital Expenditure and Operating
                     Expenditure
                   </div>
@@ -319,7 +319,7 @@ export default function ProjectDetails() {
                   {renderAbatementCurrency(projectData.abatement)}
                 </span>
               </div>
-              <div className="mt-4 space-y-2 text-sm text-big-stone-200">
+              <div className="mt-4 space-y-2 text-sm text-muted-foreground">
                 <p>Estimation of total CO2 expected during the project.</p>
               </div>
             </Card>
@@ -364,7 +364,7 @@ export default function ProjectDetails() {
                 </Label>
               </div>
               {/*<div className="flex items-center gap-2">*/}
-              {/*  <Label className="text-xs text-big-stone-200">*/}
+              {/*  <Label className="text-xs text-muted-foreground">*/}
               {/*    Compare with a different project*/}
               {/*  </Label>*/}
               {/*  <Button*/}
@@ -414,7 +414,7 @@ export default function ProjectDetails() {
                 </Label>
               </div>
               {/*<div className="flex items-center gap-2">*/}
-              {/*  <Label className="text-xs text-big-stone-200">*/}
+              {/*  <Label className="text-xs text-muted-foreground">*/}
               {/*    Compare with a different project*/}
               {/*  </Label>*/}
               {/*  <Button*/}
diff --git a/client/src/containers/projects/custom-project/cost-details/table/index.tsx b/client/src/containers/projects/custom-project/cost-details/table/index.tsx
index e27250e7..f1ebdcea 100644
--- a/client/src/containers/projects/custom-project/cost-details/table/index.tsx
+++ b/client/src/containers/projects/custom-project/cost-details/table/index.tsx
@@ -83,7 +83,7 @@ const CostDetailTable: FC<CostDetailTableProps> = ({ data }) => {
                     key={cell.id}
                     className={cn({
                       "px-4": cell.column.id === "value",
-                      "text-big-stone-200": cell.column.id === "label",
+                      "text-muted-foreground": cell.column.id === "label",
                     })}
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/client/src/containers/projects/custom-project/cost/index.tsx b/client/src/containers/projects/custom-project/cost/index.tsx
index 60306f8c..39bcbc21 100644
--- a/client/src/containers/projects/custom-project/cost/index.tsx
+++ b/client/src/containers/projects/custom-project/cost/index.tsx
@@ -37,7 +37,7 @@ const ProjectCost: FC<ProjectCostProps> = ({ total, capex, opex }) => {
               <h2 className="text-base font-semibold">Total project cost</h2>
             </Label>
           </div>
-          <div className="text-sm text-big-stone-200">
+          <div className="text-sm text-muted-foreground">
             Refers to the summary of Capital Expenditure and Operating
             Expenditure
           </div>
diff --git a/client/src/containers/projects/custom-project/left-over/index.tsx b/client/src/containers/projects/custom-project/left-over/index.tsx
index 4cf858d4..f558278a 100644
--- a/client/src/containers/projects/custom-project/left-over/index.tsx
+++ b/client/src/containers/projects/custom-project/left-over/index.tsx
@@ -31,7 +31,7 @@ const LeftOver: FC<LeftoverProps> = ({ total, leftover, opex }) => {
               <h3 className="text-md">Leftover after OpEx</h3>
             </Label>
           </div>
-          <div className="text-sm text-big-stone-200">
+          <div className="text-sm text-muted-foreground">
             Refers to the difference between Total Revenue and Operating
             Expenditure.
           </div>