diff --git a/apps/app/components/cycles/single-cycle-card.tsx b/apps/app/components/cycles/single-cycle-card.tsx
index 581139875..5bd0115c3 100644
--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@@ -271,13 +271,13 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
 
               <div className="flex items-center justify-start gap-5">
                 <div className="flex items-start gap-1 ">
-                  <CalendarDaysIcon className="h-4 w-4 text-gray-900" />
-                  <span className="text-gray-400">Start :</span>
+                  <CalendarDaysIcon className="h-4 w-4 text-brand-base" />
+                  <span className="text-brand-secondary">Start :</span>
                   <span>{renderShortDateWithYearFormat(startDate)}</span>
                 </div>
                 <div className="flex items-start gap-1 ">
-                  <TargetIcon className="h-4 w-4 text-gray-900" />
-                  <span className="text-gray-400">End :</span>
+                  <TargetIcon className="h-4 w-4 text-brand-base" />
+                  <span className="text-brand-secondary">End :</span>
                   <span>{renderShortDateWithYearFormat(endDate)}</span>
                 </div>
               </div>
@@ -293,11 +293,11 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                       alt={cycle.owned_by.first_name}
                     />
                   ) : (
-                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-800 capitalize  text-white">
+                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-brand-base capitalize  bg-brand-secondary">
                       {cycle.owned_by.first_name.charAt(0)}
                     </span>
                   )}
-                  <span className="text-gray-900">{cycle.owned_by.first_name}</span>
+                  <span className="text-brand-base">{cycle.owned_by.first_name}</span>
                 </div>
                 <div className="flex items-center">
                   {!isCompleted && (
@@ -306,7 +306,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                         e.preventDefault();
                         handleEditCycle();
                       }}
-                      className="flex cursor-pointer items-center rounded p-1 duration-300 hover:bg-gray-100"
+                      className="flex cursor-pointer items-center rounded p-1 duration-300 hover:bg-brand-surface-1"
                     >
                       <span>
                         <PencilIcon className="h-4 w-4" />
diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index 1cfa7928c..030f51c0d 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -175,12 +175,12 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
             <div className="grid grid-cols-2 gap-4">
               <div className="flex items-start gap-1">
                 <CalendarMonthIcon className="h-4 w-4 text-brand-base" />
-                <span className="text-gray-400">Start:</span>
+                <span className="text-brand-secondary">Start:</span>
                 <span>{renderShortDateWithYearFormat(startDate)}</span>
               </div>
               <div className="flex items-start gap-1">
                 <TargetIcon className="h-4 w-4 text-brand-base" />
-                <span className="text-gray-400">End:</span>
+                <span className="text-brand-secondary">End:</span>
                 <span>{renderShortDateWithYearFormat(endDate)}</span>
               </div>
             </div>
@@ -189,7 +189,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
         <div className="flex h-20 flex-col items-end">
           <div className="flex w-full items-center justify-between gap-2 justify-self-end bg-brand-surface-1 p-4">
             <span>Progress</span>
-            <div className="bar relative h-1 w-full rounded bg-gray-300">
+            <div className="bar relative h-1 w-full rounded bg-brand-surface-2">
               <div
                 className="absolute top-0 left-0 h-1 rounded bg-green-500 duration-300"
                 style={{