diff --git a/src/Components/LogUpdate/Sections/IOBalance.tsx b/src/Components/LogUpdate/Sections/IOBalance.tsx
index cceffc0a361..8d51ad9ee06 100644
--- a/src/Components/LogUpdate/Sections/IOBalance.tsx
+++ b/src/Components/LogUpdate/Sections/IOBalance.tsx
@@ -76,7 +76,9 @@ export default logUpdateSection(
                     <div key={j} className="flex items-end gap-4">
                       <div className="flex-1">
                         {j == 0 && (
-                          <div className="mb-2 text-sm text-gray-800">Type</div>
+                          <div className="mb-2 text-sm text-secondary-800">
+                            Type
+                          </div>
                         )}
                         <SelectMenuV2
                           options={field.options
@@ -119,7 +121,7 @@ export default logUpdateSection(
                         }
                         label={
                           j == 0 && (
-                            <div className="text-sm text-gray-800">
+                            <div className="text-sm text-secondary-800">
                               Quantity
                             </div>
                           )
@@ -143,7 +145,7 @@ export default logUpdateSection(
                 )}
                 <ButtonV2
                   variant="secondary"
-                  className="bg-gray-200"
+                  className="bg-secondary-200"
                   onClick={() =>
                     onChange({
                       [field.key]: [
@@ -163,7 +165,7 @@ export default logUpdateSection(
                 </ButtonV2>
               </div>
             ))}
-            <div className="flex items-center justify-between border-b-2 border-b-gray-400 pb-2">
+            <div className="flex items-center justify-between border-b-2 border-b-secondary-400 pb-2">
               <h4>Total</h4>
               <div>
                 {fields
diff --git a/src/Components/LogUpdate/Sections/NeurologicalMonitoring.tsx b/src/Components/LogUpdate/Sections/NeurologicalMonitoring.tsx
index ef9b8aafc1c..7382bf13831 100644
--- a/src/Components/LogUpdate/Sections/NeurologicalMonitoring.tsx
+++ b/src/Components/LogUpdate/Sections/NeurologicalMonitoring.tsx
@@ -30,7 +30,7 @@ export default logUpdateSection(
 
     return (
       <div>
-        <div className="mt-4 flex items-center justify-between rounded-lg bg-gray-200 p-4">
+        <div className="mt-4 flex items-center justify-between rounded-lg bg-secondary-200 p-4">
           <CheckBoxFormField
             name="in_prone_position"
             label="The patient is in prone position"
@@ -129,7 +129,7 @@ export default logUpdateSection(
         <div className="flex items-center justify-between">
           <h3>Glasgow Coma Scale</h3>
           <div>
-            <span className="text-xs text-gray-700">Total&nbsp;</span>
+            <span className="text-xs text-secondary-700">Total&nbsp;</span>
             <span className="text-5xl font-bold text-primary-400">
               {(log.glasgow_eye_open || 0) +
                 (log.glasgow_verbal_response || 0) +
diff --git a/src/Components/LogUpdate/Sections/NursingCare.tsx b/src/Components/LogUpdate/Sections/NursingCare.tsx
index 2f976373616..3b4d54fe6ec 100644
--- a/src/Components/LogUpdate/Sections/NursingCare.tsx
+++ b/src/Components/LogUpdate/Sections/NursingCare.tsx
@@ -15,7 +15,7 @@ export default logUpdateSection(
 
         return (
           <div key={i}>
-            <div className="overflow-hidden rounded-lg border border-gray-400 bg-gray-200 ring-0 ring-primary-400 transition-all focus-within:ring-2">
+            <div className="overflow-hidden rounded-lg border border-secondary-400 bg-secondary-200 ring-0 ring-primary-400 transition-all focus-within:ring-2">
               <div className="p-4">
                 <CheckBoxFormField
                   label={field.desc}
diff --git a/src/Components/LogUpdate/Sections/PressureSore.tsx b/src/Components/LogUpdate/Sections/PressureSore.tsx
index e3fd7f53969..a2d620861b3 100644
--- a/src/Components/LogUpdate/Sections/PressureSore.tsx
+++ b/src/Components/LogUpdate/Sections/PressureSore.tsx
@@ -33,7 +33,7 @@ export default logUpdateSection(
         till: 0,
         color: "#ECECEC",
         text: "",
-        className: "bg-gray-300 border border-gray-400",
+        className: "bg-secondary-300 border border-secondary-400",
       },
       {
         till: 3,
diff --git a/src/Components/LogUpdate/Sections/RespiratorySupport.tsx b/src/Components/LogUpdate/Sections/RespiratorySupport.tsx
index fb4feac36cb..2a8147c27e9 100644
--- a/src/Components/LogUpdate/Sections/RespiratorySupport.tsx
+++ b/src/Components/LogUpdate/Sections/RespiratorySupport.tsx
@@ -157,7 +157,7 @@ export default logUpdateSection(
             })
           }
         />
-        <div className="border-l-2 border-l-gray-400 pl-4">
+        <div className="border-l-2 border-l-secondary-400 pl-4">
           {
             RESPIRATORY_SUPPORT_OPTIONS.find(
               (o) => o.value === log.ventilator_interface,
diff --git a/src/Components/LogUpdate/Sections/Vitals.tsx b/src/Components/LogUpdate/Sections/Vitals.tsx
index 65d33615351..56dabfe7463 100644
--- a/src/Components/LogUpdate/Sections/Vitals.tsx
+++ b/src/Components/LogUpdate/Sections/Vitals.tsx
@@ -85,7 +85,7 @@ export default logUpdateSection(
             { text: "Normal", className: "text-green-500" },
           ]}
         />
-        <hr className="my-8 border border-gray-400" />
+        <hr className="my-8 border border-secondary-400" />
         <RangeFormField
           label="Temperature"
           name="temperature"
@@ -137,7 +137,7 @@ export default logUpdateSection(
           }
           onChange={(pain_scale_enhanced) => onChange({ pain_scale_enhanced })}
         />
-        <hr className="my-8 border border-gray-400" />
+        <hr className="my-8 border border-secondary-400" />
         <RadioFormField
           label="Heartbeat Rhythm"
           name="heartbeat-rythm"
diff --git a/src/Components/LogUpdate/components/PainChart.tsx b/src/Components/LogUpdate/components/PainChart.tsx
index 15950098baf..98da3d7cd2a 100644
--- a/src/Components/LogUpdate/components/PainChart.tsx
+++ b/src/Components/LogUpdate/components/PainChart.tsx
@@ -21,7 +21,7 @@ export default function PainChart(props: {
       till: 0,
       color: "#ECECEC",
       text: "No Pain",
-      className: "bg-gray-300 border border-gray-400",
+      className: "bg-secondary-300 border border-secondary-400",
     },
     {
       till: 3,
diff --git a/src/Components/LogUpdate/components/PupilSizeSelect.tsx b/src/Components/LogUpdate/components/PupilSizeSelect.tsx
index 386f86ea87a..3aa90d38ed7 100644
--- a/src/Components/LogUpdate/components/PupilSizeSelect.tsx
+++ b/src/Components/LogUpdate/components/PupilSizeSelect.tsx
@@ -52,8 +52,8 @@ export default function PupilSizeSelect(props: {
             <button
               disabled={!onChange}
               key={size}
-              //className={`h-10 flex items-center justify-center aspect-square rounded-full border border-black/20 ${size === pupilSize ? "bg-gray-300" : "bg-white"}`}
-              className={`flex aspect-square h-20 flex-col items-center justify-between rounded-lg border py-2 transition-all ${size === pupilSize ? "border-primary-500 bg-gray-300 bg-primary-500/10" : "border-gray-300 bg-white hover:bg-gray-200"}`}
+              //className={`h-10 flex items-center justify-center aspect-square rounded-full border border-black/20 ${size === pupilSize ? "bg-secondary-300" : "bg-white"}`}
+              className={`flex aspect-square h-20 flex-col items-center justify-between rounded-lg border py-2 transition-all ${size === pupilSize ? "border-primary-500 bg-primary-500/10 bg-secondary-300" : "border-secondary-300 bg-white hover:bg-secondary-200"}`}
               onClick={() => onChange?.(size)}
             >
               <div