diff --git a/.env b/.env
index da48755037b..528b49e2b8d 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,7 @@
 # Whitelabelling envs
 
 REACT_APP_TITLE=CARE
-REACT_APP_META_DESCRIPTION=CoronaSafe Network is an open-source public utility designed by a multi-disciplinary team of innovators and volunteers. CoronaSafe Care is a Digital Public Good recognised by United Nations.
+REACT_APP_META_DESCRIPTION=Revolutionizing EMR with AI: Open Healthcare Network develops free, open-source tools to enhance efficiency in global healthcare delivery. Our EMR system is recognized as a Digital Public Good by the United Nations.
 REACT_APP_COVER_IMAGE=https://cdn.coronasafe.network/care_logo.svg
 REACT_APP_COVER_IMAGE_ALT=https://cdn.coronasafe.network/care_logo.svg
 REACT_PUBLIC_URL=https://care.coronasafe.in
diff --git a/src/CAREUI/display/Count.tsx b/src/CAREUI/display/Count.tsx
index 3b889b10e9b..997b58794eb 100644
--- a/src/CAREUI/display/Count.tsx
+++ b/src/CAREUI/display/Count.tsx
@@ -19,11 +19,11 @@ export default function CountBlock(props: Props) {
           <CareIcon icon={props.icon} className="text-primary-600" />
         </div>
         <div>
-          <dt className="my-2 truncate text-sm font-semibold text-gray-700">
+          <dt className="my-2 truncate text-sm font-semibold text-secondary-700">
             {props.text}
           </dt>
           {props.loading ? (
-            <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-gray-300" />
+            <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-secondary-300" />
           ) : (
             <dd id="count" className="text-5xl font-black leading-9">
               {props.count}
diff --git a/src/CAREUI/display/FilterBadge.tsx b/src/CAREUI/display/FilterBadge.tsx
index a4cd743b86a..0259439a4b8 100644
--- a/src/CAREUI/display/FilterBadge.tsx
+++ b/src/CAREUI/display/FilterBadge.tsx
@@ -16,13 +16,13 @@ const FilterBadge = ({ name, value, onRemove }: FilterBadgeProps) => {
       data-testid={name}
       className={`${
         !value && "hidden"
-      } flex flex-row items-center rounded-full border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-600`}
+      } flex flex-row items-center rounded-full border border-secondary-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-secondary-600`}
     >
       {`${name}: ${value}`}
       <CareIcon
         id="removeicon"
         icon="l-times"
-        className="ml-2 box-content cursor-pointer rounded-full text-base hover:bg-gray-500"
+        className="ml-2 box-content cursor-pointer rounded-full text-base hover:bg-secondary-500"
         onClick={onRemove}
       />
     </span>
diff --git a/src/CAREUI/display/SubHeading.tsx b/src/CAREUI/display/SubHeading.tsx
index a9024e83687..1161ecd8e55 100644
--- a/src/CAREUI/display/SubHeading.tsx
+++ b/src/CAREUI/display/SubHeading.tsx
@@ -13,11 +13,11 @@ export default function SubHeading(props: Props) {
   return (
     <div className="flex flex-wrap items-center justify-between py-2">
       <div className="flex items-center">
-        <span className="text-lg font-semibold leading-relaxed text-gray-900">
+        <span className="text-lg font-semibold leading-relaxed text-secondary-900">
           {props.title}
         </span>
         {props.lastModified && (
-          <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-gray-600">
+          <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-secondary-600">
             <CareIcon icon="l-history-alt" className="text-sm" />
             <RecordMeta time={props.lastModified} prefix="Last modified" />
           </div>
diff --git a/src/CAREUI/display/Timeline.tsx b/src/CAREUI/display/Timeline.tsx
index 3414a792398..bbbf5e24859 100644
--- a/src/CAREUI/display/Timeline.tsx
+++ b/src/CAREUI/display/Timeline.tsx
@@ -62,7 +62,7 @@ export const TimelineNode = (props: TimelineNodeProps) => {
           "absolute left-0 top-0 flex w-6 justify-center",
         )}
       >
-        <div className="w-px bg-gray-300" />
+        <div className="w-px bg-secondary-300" />
       </div>
 
       <div
@@ -81,9 +81,9 @@ export const TimelineNode = (props: TimelineNodeProps) => {
             {props.title || (
               <TimelineNodeTitle event={props.event}>
                 <div className="flex w-full justify-between gap-2">
-                  <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600 md:w-2/3">
+                  <p className="flex-auto py-0.5 text-xs leading-5 text-secondary-600 md:w-2/3">
                     {props.event.by && (
-                      <span className="font-medium text-gray-900">
+                      <span className="font-medium text-secondary-900">
                         {props.event.by.username.startsWith("asset")
                           ? t("virtual_nursing_assistant")
                           : `${formatName(props.event.by)} ${
@@ -101,7 +101,7 @@ export const TimelineNode = (props: TimelineNodeProps) => {
                       <TimelineNodeActions>{props.actions}</TimelineNodeActions>
                     )}
                     <RecordMeta
-                      className="flex-none py-0.5 text-xs leading-5 text-gray-500"
+                      className="flex-none py-0.5 text-xs leading-5 text-secondary-500"
                       time={props.event.timestamp}
                     />
                   </div>
@@ -131,13 +131,13 @@ export const TimelineNodeTitle = (props: TimelineNodeTitleProps) => {
       <div
         className={classNames(
           props.event.iconWrapperStyle,
-          "relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500",
+          "relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-secondary-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500",
         )}
       >
         <CareIcon
           className={classNames(
             props.event.iconStyle,
-            "text-base text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white",
+            "text-base text-secondary-700 transition-all duration-200 ease-in-out group-hover:text-white",
           )}
           aria-hidden="true"
           icon={props.event.icon}
@@ -171,9 +171,11 @@ export const TimelineNodeNotes = ({
   }
 
   return (
-    <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-gray-200">
-      <CareIcon icon={icon} className="text-lg text-gray-700" />
-      <div className="mt-1 flex-auto text-xs text-gray-700">{children}</div>
+    <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-secondary-200">
+      <CareIcon icon={icon} className="text-lg text-secondary-700" />
+      <div className="mt-1 flex-auto text-xs text-secondary-700">
+        {children}
+      </div>
     </div>
   );
 };
diff --git a/src/CAREUI/interactive/LegendInput.tsx b/src/CAREUI/interactive/LegendInput.tsx
index 334c4b84838..e4b16eb19fc 100644
--- a/src/CAREUI/interactive/LegendInput.tsx
+++ b/src/CAREUI/interactive/LegendInput.tsx
@@ -127,7 +127,7 @@ export default function LegendInput(props: InputProps) {
           required={props.required}
           autoComplete={props.autoComplete}
           className={classNames(
-            "cui-input w-full rounded-md border-gray-300 bg-gray-50 shadow-sm focus:border-2 focus:border-primary-500 focus:bg-gray-100 focus:outline-none focus:ring-0",
+            "cui-input bg-secondary-50 w-full rounded-md border-secondary-300 shadow-sm focus:border-2 focus:border-primary-500 focus:bg-secondary-100 focus:outline-none focus:ring-0",
             props.size === "small" && "px-3 py-2 text-xs",
             (!props.size || !["small", "large"].includes(props.size)) &&
               "px-4 py-3",
diff --git a/src/CAREUI/interactive/ScrollOverlay.tsx b/src/CAREUI/interactive/ScrollOverlay.tsx
index 7c481495b59..7389f313e7c 100644
--- a/src/CAREUI/interactive/ScrollOverlay.tsx
+++ b/src/CAREUI/interactive/ScrollOverlay.tsx
@@ -19,7 +19,7 @@ export default function ScrollOverlay(props: Props) {
       <div ref={ref as any} />
       <div
         className={classNames(
-          "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-gray-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0",
+          "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-secondary-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0",
           hasScrollContent ? "h-16 opacity-75" : "h-0 opacity-0",
         )}
       >
diff --git a/src/CAREUI/interactive/Switch.tsx b/src/CAREUI/interactive/Switch.tsx
index 48eca49151d..0bdf39716c5 100644
--- a/src/CAREUI/interactive/Switch.tsx
+++ b/src/CAREUI/interactive/Switch.tsx
@@ -26,7 +26,7 @@ export default function Switch<T extends string>({
               size === "lg" && "px-4 py-3 text-base",
               props.selected === tab
                 ? "border-primary-500 bg-primary-500 font-semibold text-white hover:bg-primary-600 focus:border-primary-500 focus:ring-primary-500"
-                : "border-gray-400 bg-gray-50 hover:bg-gray-200 focus:border-primary-500 focus:ring-primary-500",
+                : "bg-secondary-50 border-secondary-400 hover:bg-secondary-200 focus:border-primary-500 focus:ring-primary-500",
             )}
             onClick={() => props.onChange(tab as T)}
           >
diff --git a/src/Common/hooks/useFilters.tsx b/src/Common/hooks/useFilters.tsx
index b86206c4b2d..a59b8e1e000 100644
--- a/src/Common/hooks/useFilters.tsx
+++ b/src/Common/hooks/useFilters.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import GenericFilterBadge from "../../CAREUI/display/FilterBadge";
 import PaginationComponent from "../../Components/Common/Pagination";
 import useConfig from "./useConfig";
-import { classNames } from "../../Utils/utils";
+import { classNames, humanizeStrings } from "../../Utils/utils";
 import FiltersCache from "../../Utils/FiltersCache";
 
 export type FilterState = Record<string, unknown>;
@@ -87,10 +87,7 @@ export default function useFilters({
           name={name}
           value={
             value === undefined
-              ? paramKey
-                  .map((k) => qParams[k])
-                  .filter(Boolean)
-                  .join(", ")
+              ? humanizeStrings(paramKey.map((k) => qParams[k]).filter(Boolean))
               : value
           }
           onRemove={() => removeFilters(paramKey)}
@@ -196,7 +193,7 @@ export default function useFilters({
         {(activeFilters.length >= 1 || children) && (
           <button
             id="clear-all-filters"
-            className="rounded-full border border-gray-300 bg-white px-2 py-1 text-xs text-gray-600 hover:text-gray-800"
+            className="rounded-full border border-secondary-300 bg-white px-2 py-1 text-xs text-secondary-600 hover:text-secondary-800"
             onClick={() => removeFilters()}
           >
             {t("clear_all_filters")}
diff --git a/src/Common/utils.tsx b/src/Common/utils.tsx
index 05022d8bc2e..4e14e3bf5ba 100644
--- a/src/Common/utils.tsx
+++ b/src/Common/utils.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect } from "react";
 import { OptionsType } from "./constants";
+import { humanizeStrings } from "../Utils/utils";
 
 export interface statusType {
   aborted?: boolean;
@@ -34,14 +35,15 @@ export const parseOptionId: (
   options: readonly OptionsType[],
   id: string | string[],
 ) => string = (options, id) => {
-  const textArray = options
-    .filter((option) => {
-      return id instanceof Array
-        ? id.map((i) => String(i)).includes(String(option.id))
-        : String(option.id) === String(id);
-    })
-    .map((option) => option.text);
-  return textArray.join(", ");
+  return humanizeStrings(
+    options
+      .filter((option) => {
+        return id instanceof Array
+          ? id.map((i) => String(i)).includes(String(option.id))
+          : String(option.id) === String(id);
+      })
+      .map((option) => option.text),
+  );
 };
 
 export const deepEqual = (x: any, y: any): boolean => {
diff --git a/src/Components/ABDM/ABDMFacilityRecords.tsx b/src/Components/ABDM/ABDMFacilityRecords.tsx
index 96040905d6c..eadf39b8db7 100644
--- a/src/Components/ABDM/ABDMFacilityRecords.tsx
+++ b/src/Components/ABDM/ABDMFacilityRecords.tsx
@@ -44,13 +44,13 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
             <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
               {/* eslint-disable-next-line tailwindcss/migration-from-tailwind-2 */}
               <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5  sm:rounded-lg">
-                <table className="min-w-full table-fixed divide-y divide-gray-300">
-                  <thead className="bg-gray-50">
+                <table className="min-w-full table-fixed divide-y divide-secondary-300">
+                  <thead className="bg-secondary-50">
                     <tr>
                       {TableHeads.map((head) => (
                         <th
                           scope="col"
-                          className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900"
+                          className="px-3 py-3.5 text-center text-sm font-semibold text-secondary-900"
                         >
                           {head}
                         </th>
@@ -62,7 +62,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                         <ButtonV2
                           onClick={() => refetch()}
                           ghost
-                          className="max-w-2xl text-sm text-gray-700 hover:text-gray-900"
+                          className="max-w-2xl text-sm text-secondary-700 hover:text-secondary-900"
                         >
                           <CareIcon icon="l-refresh" /> Refresh
                         </ButtonV2>
@@ -70,12 +70,12 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-gray-200 bg-white">
+                  <tbody className="divide-y divide-secondary-200 bg-white">
                     {consentsResult?.results.map((consent) => (
                       <tr key={consent.id}>
                         <td className="px-3 py-4 text-center text-sm">
                           {consent.patient_abha_object?.name}
-                          <p className="text-gray-600">
+                          <p className="text-secondary-600">
                             ({consent.patient_abha})
                           </p>
                         </td>
@@ -104,7 +104,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
 
                         {/* <td className="px-3 py-4 text-center text-sm">
                           {`${consent.requester?.first_name} ${consent.requester?.last_name}`.trim()}
-                          <p className="text-gray-600">
+                          <p className="text-secondary-600">
                             ({consent.requester.username})
                           </p>
                         </td> */}
@@ -134,7 +134,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                               consent.consent_artefacts?.[0]?.hi_types ??
                               consent.hi_types
                             )?.map((hiType) => (
-                              <span className="mb-2 mr-2 rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600">
+                              <span className="mb-2 mr-2 rounded-full bg-secondary-100 px-2 py-1 text-xs font-medium text-secondary-600">
                                 {hiType}
                               </span>
                             ))}
@@ -159,7 +159,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                                 View
                               </Link>
                             ) : (
-                              <p className="cursor-not-allowed text-gray-600 opacity-70 ">
+                              <p className="cursor-not-allowed text-secondary-600 opacity-70 ">
                                 View
                               </p>
                             )}
diff --git a/src/Components/ABDM/ABDMRecordsTab.tsx b/src/Components/ABDM/ABDMRecordsTab.tsx
index 9100f368216..f101b3ae45c 100644
--- a/src/Components/ABDM/ABDMRecordsTab.tsx
+++ b/src/Components/ABDM/ABDMRecordsTab.tsx
@@ -23,30 +23,32 @@ function ConsentArtefactCard({ artefact }: IConsentArtefactCardProps) {
     >
       <div className="flex flex-col items-center justify-between gap-4 px-4 py-5 sm:flex-row sm:gap-0 sm:px-6">
         <div className="flex flex-col items-center">
-          <h5 className="font-semibold leading-6 text-gray-900">
+          <h5 className="font-semibold leading-6 text-secondary-900">
             {artefact.hip}
           </h5>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             created {dayjs(artefact.created_date).fromNow()}
           </p>
         </div>
         <div className="flex flex-col items-center">
-          <h6 className="mt-1 leading-6 text-gray-700">{artefact.status}</h6>
-          <h6 className="mt-1 leading-6 text-gray-700">
+          <h6 className="mt-1 leading-6 text-secondary-700">
+            {artefact.status}
+          </h6>
+          <h6 className="mt-1 leading-6 text-secondary-700">
             {dayjs(artefact.from_time).format("MMM DD YYYY")} -{" "}
             {dayjs(artefact.to_time).format("MMM DD YYYY")}
           </h6>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             expires in {dayjs(artefact.expiry).fromNow()}
           </p>
         </div>
       </div>
-      <div className="flex flex-wrap items-center justify-center border-t border-gray-200 px-4 py-5 sm:gap-4">
+      <div className="flex flex-wrap items-center justify-center border-t border-secondary-200 px-4 py-5 sm:gap-4">
         {artefact.hi_types.map((hiType) => {
           return (
             <div
               key={hiType}
-              className="flex items-center justify-center rounded-full bg-gray-600 px-4 py-1.5 text-xs font-medium text-white"
+              className="flex items-center justify-center rounded-full bg-secondary-600 px-4 py-1.5 text-xs font-medium text-white"
             >
               {hiType}
             </div>
@@ -66,22 +68,22 @@ function ConsentRequestCard({ consent }: IConsentRequestCardProps) {
     <div className="overflow-hidden bg-white shadow sm:rounded-lg">
       <div className="flex flex-col items-center justify-between gap-4 px-4 py-5 sm:flex-row sm:gap-0 sm:px-6">
         <div className="flex flex-col items-center">
-          <h5 className="font-semibold leading-6 text-gray-900">
+          <h5 className="font-semibold leading-6 text-secondary-900">
             {
               ABDM_CONSENT_PURPOSE.find((p) => p.value === consent.purpose)
                 ?.label
             }
           </h5>
-          <h6 className="mt-1 leading-6 text-gray-700">
+          <h6 className="mt-1 leading-6 text-secondary-700">
             {consent.requester.first_name} {consent.requester.last_name}
           </h6>
         </div>
         <div className="flex flex-col items-center">
-          <h6 className="mt-1 leading-6 text-gray-700">
+          <h6 className="mt-1 leading-6 text-secondary-700">
             {dayjs(consent.from_time).format("MMM DD YYYY")} -{" "}
             {dayjs(consent.to_time).format("MMM DD YYYY")}
           </h6>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             expires in {dayjs(consent.expiry).fromNow()}
           </p>
         </div>
@@ -106,34 +108,34 @@ function ConsentRequestCard({ consent }: IConsentRequestCardProps) {
               }
             }}
             ghost
-            className="max-w-2xl text-sm text-gray-700 hover:text-gray-900"
+            className="max-w-2xl text-sm text-secondary-700 hover:text-secondary-900"
           >
             <CareIcon icon="l-refresh" /> check status
           </ButtonV2>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             created {dayjs(consent.created_date).fromNow()}
           </p>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             modified {dayjs(consent.modified_date).fromNow()}
           </p>
         </div>
       </div>
       {consent.consent_artefacts?.length ? (
-        <div className="flex flex-wrap items-center justify-center border-t border-gray-200 bg-gray-50 px-4 py-5 sm:gap-4">
+        <div className="bg-secondary-50 flex flex-wrap items-center justify-center border-t border-secondary-200 px-4 py-5 sm:gap-4">
           {consent.consent_artefacts?.map((artefact) => (
             <ConsentArtefactCard key={artefact.id} artefact={artefact} />
           ))}
         </div>
       ) : (
-        <div className="border-t border-gray-200 bg-gray-50 px-4 py-5 sm:gap-4">
-          <p className="text-center text-sm text-gray-800">
+        <div className="bg-secondary-50 border-t border-secondary-200 px-4 py-5 sm:gap-4">
+          <p className="text-center text-sm text-secondary-800">
             {consent.status === "REQUESTED"
               ? "Waiting for the Patient to approve the consent request"
               : "Patient has rejected the consent request"}
           </p>
         </div>
       )}
-      <div className="flex flex-wrap items-center justify-center border-t border-gray-200 px-4 py-5 sm:gap-4">
+      <div className="flex flex-wrap items-center justify-center border-t border-secondary-200 px-4 py-5 sm:gap-4">
         {consent.hi_types.map((hiType) => {
           return (
             <div
@@ -141,8 +143,8 @@ function ConsentRequestCard({ consent }: IConsentRequestCardProps) {
               className={classNames(
                 "flex items-center justify-center rounded-full px-4 py-1.5 text-xs font-medium text-white",
                 consent.consent_artefacts?.length
-                  ? "bg-gray-400"
-                  : "bg-gray-600",
+                  ? "bg-secondary-400"
+                  : "bg-secondary-600",
               )}
             >
               {hiType}
@@ -173,8 +175,8 @@ export default function ABDMRecordsTab({ patientId }: IProps) {
   if (!data?.results.length) {
     return (
       <div className="mt-12 flex flex-col items-center justify-center gap-2.5">
-        <p className="font-semibold text-gray-600">No Records found</p>
-        <p className="text-sm text-gray-600">
+        <p className="font-semibold text-secondary-600">No Records found</p>
+        <p className="text-sm text-secondary-600">
           Raise a consent request to fetch patient records over ABDM
         </p>
       </div>
diff --git a/src/Components/ABDM/ABHAProfileModal.tsx b/src/Components/ABDM/ABHAProfileModal.tsx
index 7815165db7d..4853626f1ef 100644
--- a/src/Components/ABDM/ABHAProfileModal.tsx
+++ b/src/Components/ABDM/ABHAProfileModal.tsx
@@ -106,7 +106,7 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
           ].map((item, index) =>
             item.value ? (
               <div key={index}>
-                <div className="text-xs text-gray-700">{item.label}</div>
+                <div className="text-xs text-secondary-700">{item.label}</div>
                 <div>{item.value}</div>
               </div>
             ) : null,
@@ -114,7 +114,7 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
         </div>
       </div>
 
-      <div className="mt-4 flex flex-col text-xs text-gray-700">
+      <div className="mt-4 flex flex-col text-xs text-secondary-700">
         {abha?.created_date && (
           <div className="flex items-center gap-1">
             <span className="">Created On: </span>
diff --git a/src/Components/ABDM/ConfigureHealthFacility.tsx b/src/Components/ABDM/ConfigureHealthFacility.tsx
index 6f13cf01374..8259cd18a33 100644
--- a/src/Components/ABDM/ConfigureHealthFacility.tsx
+++ b/src/Components/ABDM/ConfigureHealthFacility.tsx
@@ -162,7 +162,7 @@ export const ConfigureHealthFacility = (props: any) => {
                   {state.form.health_facility?.registered ? (
                     <>
                       <div className="tooltip-text -ml-20 -mt-36 flex w-48 flex-col gap-4 whitespace-break-spaces">
-                        <span className="text-gray-100">
+                        <span className="text-secondary-100">
                           The ABDM health facility is successfully linked with
                           care{" "}
                           <strong>and registered as a service in bridge</strong>
@@ -176,7 +176,7 @@ export const ConfigureHealthFacility = (props: any) => {
                   ) : (
                     <>
                       <div className="tooltip-text -ml-20 -mt-44 flex w-48 flex-col gap-4 whitespace-break-spaces">
-                        <span className="text-gray-100">
+                        <span className="text-secondary-100">
                           The ABDM health facility is successfully linked with
                           care{" "}
                           <strong>
diff --git a/src/Components/ABDM/FetchRecordsModal.tsx b/src/Components/ABDM/FetchRecordsModal.tsx
index 950b69611c4..b457ccc453a 100644
--- a/src/Components/ABDM/FetchRecordsModal.tsx
+++ b/src/Components/ABDM/FetchRecordsModal.tsx
@@ -122,7 +122,7 @@ export default function FetchRecordsModal({ patient, show, onClose }: IProps) {
           )}
         >
           {idVerificationStatus === "in-progress" && (
-            <CircularProgress className="!h-5 !w-5 !text-gray-500" />
+            <CircularProgress className="!h-5 !w-5 !text-secondary-500" />
           )}
           {idVerificationStatus === "verified" && <CareIcon icon="l-check" />}
           {
diff --git a/src/Components/ABDM/HealthInformation.tsx b/src/Components/ABDM/HealthInformation.tsx
index ceff48a0b7d..1531f47c853 100644
--- a/src/Components/ABDM/HealthInformation.tsx
+++ b/src/Components/ABDM/HealthInformation.tsx
@@ -33,14 +33,14 @@ export default function HealthInformation({ artefactId }: IProps) {
       <div className="mt-10 flex flex-col items-center justify-center gap-6">
         {!!error?.is_archived && (
           <>
-            <h3 className="text-2xl font-semibold text-gray-700">
+            <h3 className="text-2xl font-semibold text-secondary-700">
               This record has been archived
             </h3>
-            <h5 className="mt-2 text-sm text-gray-500">
+            <h5 className="mt-2 text-sm text-secondary-500">
               This record has been archived and is no longer available for
               viewing.
             </h5>
-            <h4 className="mt-2 text-center text-gray-500">
+            <h4 className="mt-2 text-center text-secondary-500">
               This record was archived on{" "}
               {new Date(error?.archived_time as string).toLocaleString()} as{" "}
               {error?.archived_reason as string}
@@ -49,13 +49,13 @@ export default function HealthInformation({ artefactId }: IProps) {
         )}
         {error && !error?.is_archived && (
           <>
-            <h3 className="text-2xl font-semibold text-gray-700">
+            <h3 className="text-2xl font-semibold text-secondary-700">
               This record hasn't been fetched yet
             </h3>
-            <h5 className="mt-2 text-sm text-gray-500">
+            <h5 className="mt-2 text-sm text-secondary-500">
               This record hasn't been fetched yet. Please try again later.
             </h5>
-            <h4 className="mt-2 text-gray-500">
+            <h4 className="mt-2 text-secondary-500">
               Waiting for the HIP to send the record.
             </h4>
           </>
diff --git a/src/Components/ABDM/LinkABHANumberModal.tsx b/src/Components/ABDM/LinkABHANumberModal.tsx
index 2598dfa20c4..ea996ddd1da 100644
--- a/src/Components/ABDM/LinkABHANumberModal.tsx
+++ b/src/Components/ABDM/LinkABHANumberModal.tsx
@@ -158,7 +158,9 @@ const ScanABHAQRSection = ({
   if (isLoading) {
     return (
       <div className="flex items-center justify-center gap-2">
-        <span className="text-3xl font-semibold text-gray-700">Loading</span>
+        <span className="text-3xl font-semibold text-secondary-700">
+          Loading
+        </span>
         <CircularProgress className="text-green-500" />
       </div>
     );
@@ -233,14 +235,14 @@ const ScanABHAQRSection = ({
       />
       {!txnId && (
         <div>
-          <span className="items-center text-xs text-gray-800">
+          <span className="items-center text-xs text-secondary-800">
             <input
               type="checkbox"
               checked={acceptedDisclaimer}
               onChange={(e) => {
                 setAcceptedDisclaimer(e.target.checked);
               }}
-              className="mr-2 rounded border-gray-700 shadow-sm ring-0 ring-offset-0"
+              className="mr-2 rounded border-secondary-700 shadow-sm ring-0 ring-offset-0"
             />
             I declare that the ABHA No. of the patient is voluntarily provided
             by the patient (or guardian or nominee of the patient).
@@ -524,7 +526,7 @@ const VerifyAadhaarSection = ({ onVerified }: VerifyAadhaarSectionProps) => {
         />
         <span
           className={classNames(
-            "ml-2 text-sm font-medium text-gray-600",
+            "ml-2 text-sm font-medium text-secondary-600",
             !aadhaarNumberError && "-mt-4",
           )}
         >
@@ -534,14 +536,14 @@ const VerifyAadhaarSection = ({ onVerified }: VerifyAadhaarSectionProps) => {
 
       {!otpSent && (
         <div className="flex flex-col gap-2">
-          <span className="items-center text-xs text-gray-800">
+          <span className="items-center text-xs text-secondary-800">
             <input
               type="checkbox"
               checked={acceptedDisclaimer1}
               onChange={(e) => {
                 setAcceptedDisclaimer1(e.target.checked);
               }}
-              className="mr-2 rounded border-gray-700 shadow-sm ring-0 ring-offset-0"
+              className="mr-2 rounded border-secondary-700 shadow-sm ring-0 ring-offset-0"
             />
             I declare that consent of the patient (or guardian or nominee of the
             patient) is obtained for generation of such ABHA Number as per the{" "}
@@ -551,14 +553,14 @@ const VerifyAadhaarSection = ({ onVerified }: VerifyAadhaarSectionProps) => {
             .
           </span>
 
-          <span className="items-center text-xs text-gray-800">
+          <span className="items-center text-xs text-secondary-800">
             <input
               type="checkbox"
               checked={acceptedDisclaimer2}
               onChange={(e) => {
                 setAcceptedDisclaimer2(e.target.checked);
               }}
-              className="mr-2 rounded border-gray-700 shadow-sm ring-0 ring-offset-0"
+              className="mr-2 rounded border-secondary-700 shadow-sm ring-0 ring-offset-0"
             />
             I declare that the Aadhaar Number and demographic details of the
             patient are shared voluntarily by the patient (or guardian or
@@ -838,7 +840,7 @@ const CreateHealthIDSection = ({
       </p>
 
       {isHealthIdInputInFocus && (
-        <div className="mb-2 pl-2 text-sm text-gray-500">
+        <div className="mb-2 pl-2 text-sm text-secondary-500">
           {validateRule(
             healthId.length >= 4,
             "Should be atleast 4 character long",
diff --git a/src/Components/ABDM/LinkCareContextModal.tsx b/src/Components/ABDM/LinkCareContextModal.tsx
index 36749ff3d23..b22189c9f2f 100644
--- a/src/Components/ABDM/LinkCareContextModal.tsx
+++ b/src/Components/ABDM/LinkCareContextModal.tsx
@@ -63,14 +63,14 @@ const LinkCareContextModal = ({
       />
 
       <div>
-        <span className="items-center text-xs text-gray-800">
+        <span className="items-center text-xs text-secondary-800">
           <input
             type="checkbox"
             checked={acceptedDisclaimer}
             onChange={(e) => {
               setAcceptedDisclaimer(e.target.checked);
             }}
-            className="mr-2 rounded border-gray-700 shadow-sm ring-0 ring-offset-0"
+            className="mr-2 rounded border-secondary-700 shadow-sm ring-0 ring-offset-0"
           />
           I declare that the data of the patient is voluntarily provided by the
           patient (or guardian or nominee of the patient).
diff --git a/src/Components/Assets/AssetImportModal.tsx b/src/Components/Assets/AssetImportModal.tsx
index 8c020e1a006..d553e30b79e 100644
--- a/src/Components/Assets/AssetImportModal.tsx
+++ b/src/Components/Assets/AssetImportModal.tsx
@@ -124,11 +124,11 @@ const AssetImportModal = ({ open, onClose, facility, onUpdate }: Props) => {
       className="w-[48rem]"
       fixedWidth={false}
     >
-      <span className="mt-1 text-gray-700">{facility.name}</span>
+      <span className="mt-1 text-secondary-700">{facility.name}</span>
       {!loading && locations.length === 0 ? (
         <>
           <div className="flex h-full flex-col items-center justify-center">
-            <h1 className="m-7 text-2xl font-medium text-gray-700">
+            <h1 className="m-7 text-2xl font-medium text-secondary-700">
               You need at least one location to import an assest.
             </h1>
             <Link href={`/facility/${facility.id}/location/add`}>
diff --git a/src/Components/Assets/AssetManage.tsx b/src/Components/Assets/AssetManage.tsx
index 5835ad297f5..934a4cf0d16 100644
--- a/src/Components/Assets/AssetManage.tsx
+++ b/src/Components/Assets/AssetManage.tsx
@@ -136,24 +136,24 @@ const AssetManage = (props: AssetManageProps) => {
       setTransactionDetails(
         transactions?.results.map((transaction: AssetTransaction) => (
           <tr key={`transaction_id_${transaction.id}`}>
-            <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
-              <span className="font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-secondary-500">
+              <span className="font-medium text-secondary-900">
                 {transaction.from_location.name}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
-              <span className="font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500">
+              <span className="font-medium text-secondary-900">
                 {transaction.to_location.name}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
-              <span className="font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500">
+              <span className="font-medium text-secondary-900">
                 {transaction.performed_by.first_name}{" "}
                 {transaction.performed_by.last_name}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-right text-sm leading-5 text-gray-500">
-              <span className="font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-right text-sm leading-5 text-secondary-500">
+              <span className="font-medium text-secondary-900">
                 {formatDateTime(transaction.modified_date)}
               </span>
             </td>
@@ -164,7 +164,7 @@ const AssetManage = (props: AssetManageProps) => {
       setTransactionDetails(
         <tr>
           <td
-            className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500"
+            className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500"
             colSpan={4}
           >
             <h5>No Transactions Found</h5>
@@ -179,23 +179,23 @@ const AssetManage = (props: AssetManageProps) => {
       setServiceDetails(
         services?.results.map((service: AssetService) => (
           <tr key={`service_id_${service.id}`}>
-            <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
-              <span className="font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-secondary-500">
+              <span className="font-medium text-secondary-900">
                 {dayjs(service.serviced_on).format("DD MMM YYYY")}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
-              <span className="whitespace-break-spaces break-words font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500">
+              <span className="whitespace-break-spaces break-words font-medium text-secondary-900">
                 {service.note || "--"}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
-              <span className="font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500">
+              <span className="font-medium text-secondary-900">
                 {formatDate(service.created_date)}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
-              <span className="flex justify-center font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500">
+              <span className="flex justify-center font-medium text-secondary-900">
                 {service.edits?.length > 1 ? (
                   <RelativeDateUserMention
                     actionDate={service.edits?.[0]?.edited_on}
@@ -241,7 +241,7 @@ const AssetManage = (props: AssetManageProps) => {
       setServiceDetails(
         <tr>
           <td
-            className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500"
+            className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500"
             colSpan={4}
           >
             <h5>No Service Logs Found</h5>
@@ -271,9 +271,9 @@ const AssetManage = (props: AssetManageProps) => {
       <div className="flex grow-0 flex-col md:w-[200px]">
         <div className="flex-start flex items-center">
           <div className="w-8">
-            <CareIcon icon={item.icon} className="fill-gray-700 text-lg" />
+            <CareIcon icon={item.icon} className="fill-secondary-700 text-lg" />
           </div>
-          <div className="break-words text-gray-700">{item.label}</div>
+          <div className="break-words text-secondary-700">{item.label}</div>
         </div>
         <div
           className="ml-8 grow-0 break-words text-lg font-semibold"
@@ -358,12 +358,12 @@ const AssetManage = (props: AssetManageProps) => {
                   <div className="tooltip tooltip-bottom">
                     <CareIcon
                       icon={assetClassProp.icon}
-                      className="fill-gray-700 text-3xl"
+                      className="fill-secondary-700 text-3xl"
                     />
                     <span className="tooltip-text">{assetClassProp.name}</span>
                   </div>
                 </div>
-                <div className="mb-2 w-full text-gray-700 sm:hidden">
+                <div className="mb-2 w-full text-secondary-700 sm:hidden">
                   {asset?.description}
                 </div>
                 <div className="flex flex-wrap gap-2">
@@ -397,7 +397,7 @@ const AssetManage = (props: AssetManageProps) => {
                   )}
                 </div>
               </div>
-              <div className="mt-3 hidden text-gray-700 sm:block">
+              <div className="mt-3 hidden text-secondary-700 sm:block">
                 {asset?.description}
               </div>
             </div>
@@ -468,7 +468,7 @@ const AssetManage = (props: AssetManageProps) => {
               )}
             </div>
           </div>
-          <div className="flex shrink-0 flex-col justify-between gap-2 border-gray-300 p-6 md:border-l md:p-8">
+          <div className="flex shrink-0 flex-col justify-between gap-2 border-secondary-300 p-6 md:border-l md:p-8">
             <div>
               <div className="mb-5 text-lg font-bold">Service Details</div>
               <div className="flex flex-col gap-6">
@@ -489,7 +489,7 @@ const AssetManage = (props: AssetManageProps) => {
               </div>
             </div>
 
-            <div className="flex flex-col justify-end break-words text-sm text-gray-600">
+            <div className="flex flex-col justify-end break-words text-sm text-secondary-600">
               {asset?.created_date && (
                 <RecordMeta prefix={t("created")} time={asset?.created_date} />
               )}
@@ -522,27 +522,27 @@ const AssetManage = (props: AssetManageProps) => {
         className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg"
         id="service-history"
       >
-        <table className="min-w-full divide-y divide-gray-200">
+        <table className="min-w-full divide-y divide-secondary-200">
           <thead>
             <tr>
-              <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Serviced on
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Note
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Created on
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Last Updated
               </th>
-              <th className="relative right-10 bg-gray-50 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 relative right-10 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Edit
               </th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-gray-200 bg-white">
+          <tbody className="divide-y divide-secondary-200 bg-white">
             {servicesDetails}
           </tbody>
         </table>
@@ -552,24 +552,24 @@ const AssetManage = (props: AssetManageProps) => {
         className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg"
         id="transaction-history"
       >
-        <table className="min-w-full divide-y divide-gray-200">
+        <table className="min-w-full divide-y divide-secondary-200">
           <thead>
             <tr>
-              <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Moved from
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Moved to
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Moved By
               </th>
-              <th className="relative right-5 bg-gray-50 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 relative right-5 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Moved On
               </th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-gray-200 bg-white">
+          <tbody className="divide-y divide-secondary-200 bg-white">
             {transactionDetails}
           </tbody>
         </table>
diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx
index 87bf561d471..196a902b450 100644
--- a/src/Components/Assets/AssetServiceEditModal.tsx
+++ b/src/Components/Assets/AssetServiceEditModal.tsx
@@ -67,7 +67,7 @@ export const AssetServiceEditModal = (props: {
       >
         <div>
           <div className="mb-4">
-            <p className="text-md mt-1 text-gray-500">
+            <p className="text-md mt-1 text-secondary-500">
               {t("update_record_for_asset")}
               <strong> {props.asset?.name}</strong>
             </p>
@@ -81,21 +81,21 @@ export const AssetServiceEditModal = (props: {
                   onClick={() => {
                     setEditRecord(edit);
                   }}
-                  className="my-2 flex cursor-pointer justify-between rounded-lg border border-gray-300 p-4 py-2 transition-colors duration-200 hover:bg-gray-100"
+                  className="my-2 flex cursor-pointer justify-between rounded-lg border border-secondary-300 p-4 py-2 transition-colors duration-200 hover:bg-secondary-100"
                 >
                   <div className="grow">
-                    <p className="text-sm font-medium text-gray-500">
+                    <p className="text-sm font-medium text-secondary-500">
                       {isLast ? "Created" : "Edited"} On
                     </p>
-                    <p className="text-sm text-gray-900">
+                    <p className="text-sm text-secondary-900">
                       {formatDateTime(edit.edited_on)}
                     </p>
                   </div>
                   <div className="grow">
-                    <p className="text-sm font-medium text-gray-500">
+                    <p className="text-sm font-medium text-secondary-500">
                       {isLast ? "Created" : "Edited"} By
                     </p>
-                    <p className="text-sm text-gray-900">
+                    <p className="text-sm text-secondary-900">
                       {edit.edited_by.username}
                     </p>
                   </div>
@@ -109,42 +109,45 @@ export const AssetServiceEditModal = (props: {
               );
             })}
           {editRecord && (
-            <div className="mb-4 rounded-lg border border-gray-300 p-4 py-2">
+            <div className="mb-4 rounded-lg border border-secondary-300 p-4 py-2">
               <div className="my-2 flex justify-between">
                 <div className="grow">
-                  <p className="text-sm font-medium text-gray-500">
+                  <p className="text-sm font-medium text-secondary-500">
                     {t("edited_on")}
                   </p>
-                  <p className="text-gray-900">
+                  <p className="text-secondary-900">
                     {formatDateTime(editRecord.edited_on)}
                   </p>
                 </div>
                 <div className="grow">
-                  <p className="text-sm font-medium text-gray-500">
+                  <p className="text-sm font-medium text-secondary-500">
                     {t("edited_by")}
                   </p>
-                  <p className="text-gray-900">
+                  <p className="text-secondary-900">
                     {editRecord.edited_by.username}
                   </p>
                 </div>
               </div>
               <div className="mt-4 flex flex-col justify-between">
                 <div className="grow">
-                  <p className="text-sm font-medium text-gray-500">
+                  <p className="text-sm font-medium text-secondary-500">
                     {t("serviced_on")}
                   </p>
                   <p
-                    className="text-gray-900"
+                    className="text-secondary-900"
                     id="edit-history-asset-servicedon"
                   >
                     {formatDate(editRecord.serviced_on)}
                   </p>
                 </div>
                 <div className="mt-4 grow">
-                  <p className="text-sm font-medium text-gray-500">
+                  <p className="text-sm font-medium text-secondary-500">
                     {t("notes")}
                   </p>
-                  <p className="text-gray-900" id="edit-history-asset-note">
+                  <p
+                    className="text-secondary-900"
+                    id="edit-history-asset-note"
+                  >
                     {editRecord.note || "-"}
                   </p>
                 </div>
@@ -175,7 +178,7 @@ export const AssetServiceEditModal = (props: {
     >
       <div>
         <div className="mb-4">
-          <p className="text-md mt-1 text-gray-500">
+          <p className="text-md mt-1 text-secondary-500">
             {t("update_record_for_asset")}
             <strong> {props.asset?.name}</strong>
           </p>
diff --git a/src/Components/Assets/AssetWarrantyCard.tsx b/src/Components/Assets/AssetWarrantyCard.tsx
index 860fb5ab7af..cde8dfc256d 100644
--- a/src/Components/Assets/AssetWarrantyCard.tsx
+++ b/src/Components/Assets/AssetWarrantyCard.tsx
@@ -36,7 +36,7 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
         <div className="flex h-full w-full flex-col gap-4 md:border-r xl:w-auto  xl:border-r-0">
           {Object.keys(details).map((key) => (
             <div className="">
-              <div className="mb-1 text-xs uppercase italic tracking-widest text-gray-200">
+              <div className="mb-1 text-xs uppercase italic tracking-widest text-secondary-200">
                 {key}
               </div>
               <div className="flex items-center gap-2 font-semibold">
@@ -65,7 +65,7 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
         <div className="mb-2 hidden h-px w-full bg-white/40 xl:block" />
         <div className="shrink-0">
           <div>
-            <div className="mb-1 text-xs uppercase italic tracking-widest text-gray-200">
+            <div className="mb-1 text-xs uppercase italic tracking-widest text-secondary-200">
               Customer Support Details
             </div>
             <div className="font-semibold">{asset.support_name || "--"}</div>
@@ -78,7 +78,9 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
               <div className="flex items-center">
                 {item[1] && (
                   <>
-                    <div className="w-16 italic text-gray-200">{item[0]} :</div>
+                    <div className="w-16 italic text-secondary-200">
+                      {item[0]} :
+                    </div>
                     <a
                       href={
                         (item[0] === "Email" ? "mailto:" : "tel:") + item[1]
diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
index f6f83e7030f..adf8dd61a8e 100644
--- a/src/Components/Assets/AssetsList.tsx
+++ b/src/Components/Assets/AssetsList.tsx
@@ -281,7 +281,7 @@ const AssetsList = () => {
   } else {
     manageAssets = (
       <div className="col-span-3 w-full rounded-lg bg-white p-2 py-8 pt-4 text-center">
-        <p className="text-2xl font-bold text-gray-600">No Assets Found</p>
+        <p className="text-2xl font-bold text-secondary-600">No Assets Found</p>
       </div>
     );
   }
diff --git a/src/Components/Auth/Login.tsx b/src/Components/Auth/Login.tsx
index a74969fbfa4..68fdf2a6b67 100644
--- a/src/Components/Auth/Login.tsx
+++ b/src/Components/Auth/Login.tsx
@@ -193,13 +193,13 @@ export const Login = (props: { forgot?: boolean }) => {
               <div className="py-6">
                 <ReactMarkdown
                   rehypePlugins={[rehypeRaw]}
-                  className="max-w-xl text-gray-400"
+                  className="max-w-xl text-secondary-400"
                 >
                   {custom_description || t("goal")}
                 </ReactMarkdown>
               </div>
             ) : (
-              <div className="max-w-xl py-6 pl-1 text-base font-semibold text-gray-400 md:text-lg lg:text-xl">
+              <div className="max-w-xl py-6 pl-1 text-base font-semibold text-secondary-400 md:text-lg lg:text-xl">
                 {t("goal")}
               </div>
             )}
@@ -236,7 +236,7 @@ export const Login = (props: { forgot?: boolean }) => {
               href={coronasafe_url}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-gray-500"
+              className="text-secondary-500"
             >
               {t("footer_body")}
             </a>
@@ -265,7 +265,7 @@ export const Login = (props: { forgot?: boolean }) => {
                     className="h-14 rounded-lg py-3"
                     alt="state logo"
                   />
-                  <div className="mx-4 h-8 w-px rounded-full bg-gray-600" />
+                  <div className="mx-4 h-8 w-px rounded-full bg-secondary-600" />
                 </>
               )}
               <img
diff --git a/src/Components/Auth/ResetPassword.tsx b/src/Components/Auth/ResetPassword.tsx
index 325a53b9c80..12a7b51ff67 100644
--- a/src/Components/Auth/ResetPassword.tsx
+++ b/src/Components/Auth/ResetPassword.tsx
@@ -124,7 +124,7 @@ export const ResetPassword = (props: any) => {
                 onBlur={() => setPasswordInputInFocus(false)}
               />
               {passwordInputInFocus && (
-                <div className="text-small mb-2 pl-2 text-gray-500">
+                <div className="text-small mb-2 pl-2 text-secondary-500">
                   {validateRule(
                     form.password?.length >= 8,
                     "Password should be atleast 8 characters long",
diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
index 64b37587cb9..fdb1ccbc9f9 100644
--- a/src/Components/CameraFeed/CameraFeed.tsx
+++ b/src/Components/CameraFeed/CameraFeed.tsx
@@ -143,7 +143,7 @@ export default function CameraFeed(props: Props) {
           {player.status === "offline" && (
             <NoFeedAvailable
               message="Offline"
-              className="text-gray-500"
+              className="text-secondary-500"
               icon="l-exclamation-triangle"
               streamUrl={streamUrl}
               asset={props.asset}
diff --git a/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx b/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx
index e2931a816bc..e091491e88f 100644
--- a/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx
+++ b/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx
@@ -40,10 +40,10 @@ const LiveMonitoringFilters = (props: Props) => {
           leaveTo="opacity-0 translate-y-1"
         >
           <Popover.Panel className="absolute z-30 mt-1 w-80 -translate-x-1/3 px-4 sm:px-0 md:w-96 md:-translate-x-1/2 lg:max-w-3xl">
-            <div className="rounded-lg shadow-lg ring-1 ring-gray-400">
-              <div className="rounded-t-lg bg-gray-100 px-6 py-4">
+            <div className="rounded-lg shadow-lg ring-1 ring-secondary-400">
+              <div className="rounded-t-lg bg-secondary-100 px-6 py-4">
                 <div className="flow-root rounded-md">
-                  <span className="block text-sm text-gray-800">
+                  <span className="block text-sm text-secondary-800">
                     <span className="font-bold ">{props.totalCount}</span>{" "}
                     Camera(s) present
                   </span>
diff --git a/src/Components/CameraFeed/NoFeedAvailable.tsx b/src/Components/CameraFeed/NoFeedAvailable.tsx
index 81f70ff5d87..1c05296fad1 100644
--- a/src/Components/CameraFeed/NoFeedAvailable.tsx
+++ b/src/Components/CameraFeed/NoFeedAvailable.tsx
@@ -28,7 +28,7 @@ export default function NoFeedAvailable(props: Props) {
     >
       <CareIcon icon={props.icon} className="text-2xl" />
       <span className="text-xs font-bold">{props.message}</span>
-      <span className="hidden px-10 font-mono text-xs text-gray-500 md:block">
+      <span className="hidden px-10 font-mono text-xs text-secondary-500 md:block">
         {redactedURL}
       </span>
       <div className="mt-4 flex items-center gap-2">
diff --git a/src/Components/Common/BloodPressureFormField.tsx b/src/Components/Common/BloodPressureFormField.tsx
index 95dbad02f62..53c4adf2194 100644
--- a/src/Components/Common/BloodPressureFormField.tsx
+++ b/src/Components/Common/BloodPressureFormField.tsx
@@ -65,7 +65,7 @@ export default function BloodPressureFormField(props: Props) {
             },
           ]}
         />
-        <span className="px-2 text-lg font-medium text-gray-400">/</span>
+        <span className="px-2 text-lg font-medium text-secondary-400">/</span>
         <RangeAutocompleteFormField
           name="diastolic"
           placeholder="Diastolic"
diff --git a/src/Components/Common/Breadcrumbs.tsx b/src/Components/Common/Breadcrumbs.tsx
index 307f4b4b045..bb5419bbe10 100644
--- a/src/Components/Common/Breadcrumbs.tsx
+++ b/src/Components/Common/Breadcrumbs.tsx
@@ -54,7 +54,10 @@ export default function Breadcrumbs(props: any) {
         <ol className="flex flex-wrap items-center space-x-1">
           <li>
             <div>
-              <Link href="/" className="text-gray-500 hover:text-gray-700">
+              <Link
+                href="/"
+                className="text-secondary-500 hover:text-secondary-700"
+              >
                 <CareIcon icon="l-estate" className="mr-1 text-lg" />
                 <span className="sr-only">Home</span>
               </Link>
@@ -64,7 +67,7 @@ export default function Breadcrumbs(props: any) {
             <li>
               <div className="flex cursor-pointer items-center">
                 <svg
-                  className="h-5 w-5 shrink-0 text-gray-400"
+                  className="h-5 w-5 shrink-0 text-secondary-400"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="currentColor"
                   viewBox="0 0 20 20"
@@ -74,7 +77,7 @@ export default function Breadcrumbs(props: any) {
                 </svg>
                 <span
                   onClick={() => setShowFullPath(true)}
-                  className="ml-1 mt-0.5 inline-flex items-center rounded-full bg-gray-500 px-2.5 py-1 text-xs font-medium hover:bg-gray-700"
+                  className="ml-1 mt-0.5 inline-flex items-center rounded-full bg-secondary-500 px-2.5 py-1 text-xs font-medium hover:bg-secondary-700"
                 >
                   <svg
                     className="mx-0.25 h-1.5 w-1.5 text-white"
@@ -107,13 +110,13 @@ export default function Breadcrumbs(props: any) {
                 <li
                   key={crumb.name}
                   className={classNames(
-                    "cursor-pointer text-sm font-medium text-gray-500 hover:text-gray-700",
+                    "cursor-pointer text-sm font-medium text-secondary-500 hover:text-secondary-700",
                     crumb.style,
                   )}
                 >
                   <div className="flex items-center">
                     <svg
-                      className="h-5 w-5 shrink-0 text-gray-400"
+                      className="h-5 w-5 shrink-0 text-secondary-400"
                       xmlns="http://www.w3.org/2000/svg"
                       fill="currentColor"
                       viewBox="0 0 20 20"
@@ -123,7 +126,7 @@ export default function Breadcrumbs(props: any) {
                     </svg>
                     <Link
                       href={crumb.uri}
-                      className="ml-1 block text-gray-500 hover:text-gray-700"
+                      className="ml-1 block text-secondary-500 hover:text-secondary-700"
                     >
                       {crumb.name.match(/^\w{8}-(\w{4}-){3}\w{12}$/) ? (
                         <div>
diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
index c68ba74a90d..2e9f99de9bc 100644
--- a/src/Components/Common/DateInputV2.tsx
+++ b/src/Components/Common/DateInputV2.tsx
@@ -263,7 +263,7 @@ const DateInputV2: React.FC<Props> = ({
                 <div className="absolute right-0 top-1/2 -translate-y-1/2 p-2">
                   <CareIcon
                     icon="l-calendar-alt"
-                    className="text-lg text-gray-600"
+                    className="text-lg text-secondary-600"
                   />
                 </div>
               </Popover.Button>
@@ -287,7 +287,7 @@ const DateInputV2: React.FC<Props> = ({
                     <input
                       id="date-input"
                       autoFocus
-                      className="cui-input-base bg-gray-50"
+                      className="cui-input-base bg-secondary-50"
                       value={
                         displayValue.replace(
                           /^(\d{2})(\d{0,2})(\d{0,4}).*/,
@@ -316,7 +316,7 @@ const DateInputV2: React.FC<Props> = ({
                               datePickerHeaderDate.getMonth() - 1,
                             )
                           }
-                          className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-gray-300"
+                          className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
                           onClick={decrement}
                         >
                           <CareIcon icon="l-angle-left-b" className="text-lg" />
@@ -326,14 +326,14 @@ const DateInputV2: React.FC<Props> = ({
                           {type === "date" && (
                             <div
                               onClick={showMonthPicker}
-                              className="cursor-pointer rounded px-3 py-1 text-center font-medium text-black hover:bg-gray-300"
+                              className="cursor-pointer rounded px-3 py-1 text-center font-medium text-black hover:bg-secondary-300"
                             >
                               {dayjs(datePickerHeaderDate).format("MMMM")}
                             </div>
                           )}
                           <div
                             onClick={showYearPicker}
-                            className="cursor-pointer rounded px-3 py-1 font-medium text-black hover:bg-gray-300"
+                            className="cursor-pointer rounded px-3 py-1 font-medium text-black hover:bg-secondary-300"
                           >
                             <p className="text-center">
                               {type == "year"
@@ -350,7 +350,7 @@ const DateInputV2: React.FC<Props> = ({
                                 year.getFullYear()) ||
                             !isDateWithinConstraints(getLastDay())
                           }
-                          className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-gray-300"
+                          className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
                           onClick={increment}
                         >
                           <CareIcon
@@ -369,7 +369,7 @@ const DateInputV2: React.FC<Props> = ({
                                 id={`day-${i}`}
                                 className="aspect-square w-[14.26%]"
                               >
-                                <div className="text-center text-sm font-medium text-gray-800">
+                                <div className="text-center text-sm font-medium text-secondary-800">
                                   {day}
                                 </div>
                               </div>
@@ -397,11 +397,11 @@ const DateInputV2: React.FC<Props> = ({
                                     "bg-primary-500 font-bold text-white";
                                 } else {
                                   conditionalClasses =
-                                    "hover:bg-gray-300 cursor-pointer";
+                                    "hover:bg-secondary-300 cursor-pointer";
                                 }
                               } else {
                                 conditionalClasses =
-                                  "!cursor-not-allowed !text-gray-400";
+                                  "!cursor-not-allowed !text-secondary-400";
                               }
                               return (
                                 <div
@@ -433,7 +433,7 @@ const DateInputV2: React.FC<Props> = ({
                                   "w-1/4 cursor-pointer rounded-lg px-2 py-4 text-center text-sm font-semibold",
                                   value && isSelectedMonth(i)
                                     ? "bg-primary-500 text-white"
-                                    : "text-gray-700 hover:bg-gray-300",
+                                    : "text-secondary-700 hover:bg-secondary-300",
                                 )}
                                 onClick={setMonthValue(i)}
                               >
@@ -462,7 +462,7 @@ const DateInputV2: React.FC<Props> = ({
                                     "w-1/4 cursor-pointer rounded-lg px-2 py-4 text-center text-sm font-semibold",
                                     value && isSelectedYear(y)
                                       ? "bg-primary-500 text-white"
-                                      : "text-gray-700 hover:bg-gray-300",
+                                      : "text-secondary-700 hover:bg-secondary-300",
                                   )}
                                   onClick={setYearValue(y)}
                                 >
diff --git a/src/Components/Common/Dialog.tsx b/src/Components/Common/Dialog.tsx
index ed52920fb13..68f6d0900b9 100644
--- a/src/Components/Common/Dialog.tsx
+++ b/src/Components/Common/Dialog.tsx
@@ -59,11 +59,11 @@ const DialogModal = (props: DialogProps) => {
                 >
                   <Dialog.Title
                     as="h4"
-                    className="flex w-full flex-col text-lg font-medium leading-6 text-gray-900"
+                    className="flex w-full flex-col text-lg font-medium leading-6 text-secondary-900"
                   >
                     <div className="w-full">
                       <h4>{title}</h4>
-                      <p className="mt-2 text-sm text-gray-600">
+                      <p className="mt-2 text-sm text-secondary-600">
                         {description}
                       </p>
                     </div>
diff --git a/src/Components/Common/ExcelFIleDragAndDrop.tsx b/src/Components/Common/ExcelFIleDragAndDrop.tsx
index 750d4785279..e7e3f0e71d2 100644
--- a/src/Components/Common/ExcelFIleDragAndDrop.tsx
+++ b/src/Components/Common/ExcelFIleDragAndDrop.tsx
@@ -144,7 +144,7 @@ export default function ExcelFileDragAndDrop({
         onDrop={onDrop}
         onClick={() => !selectedFile && fileInputRef.current?.click()}
         className={`mb-8 mt-5 flex flex-1 flex-col items-center justify-center rounded-lg border-[3px] border-dashed px-3 py-6 ${
-          dragProps.dragOver ? "border-primary-500" : "border-gray-500"
+          dragProps.dragOver ? "border-primary-500" : "border-secondary-500"
         } ${dragProps.fileDropError !== "" ? "border-red-500" : ""}`}
       >
         <svg
@@ -153,14 +153,18 @@ export default function ExcelFileDragAndDrop({
           viewBox="0 0 24 24"
           aria-hidden="true"
           className={`h-12 w-12 ${dragProps.dragOver && "text-primary-500"} ${
-            dragProps.fileDropError !== "" ? "text-red-500" : "text-gray-600"
+            dragProps.fileDropError !== ""
+              ? "text-red-500"
+              : "text-secondary-600"
           }`}
         >
           <path d="M12.71,11.29a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-2,2a1,1,0,0,0,1.42,1.42l.29-.3V17a1,1,0,0,0,2,0V14.41l.29.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42ZM20,8.94a1.31,1.31,0,0,0-.06-.27l0-.09a1.07,1.07,0,0,0-.19-.28h0l-6-6h0a1.07,1.07,0,0,0-.28-.19l-.1,0A1.1,1.1,0,0,0,13.06,2H7A3,3,0,0,0,4,5V19a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V9S20,9,20,8.94ZM14,5.41,16.59,8H15a1,1,0,0,1-1-1ZM18,19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V5A1,1,0,0,1,7,4h5V7a3,3,0,0,0,3,3h3Z" />
         </svg>
         <p
           className={`text-sm ${dragProps.dragOver && "text-primary-500"} ${
-            dragProps.fileDropError !== "" ? "text-red-500" : "text-gray-700"
+            dragProps.fileDropError !== ""
+              ? "text-red-500"
+              : "text-secondary-700"
           } text-center`}
         >
           {dragProps.fileDropError !== "" && dragProps.fileDropError}
@@ -181,7 +185,7 @@ export default function ExcelFileDragAndDrop({
         />
         {selectedFile && (
           <div className="flex pt-2">
-            <p className="text-sm text-gray-700">
+            <p className="text-sm text-secondary-700">
               {selectedFile.name} - {(selectedFile.size / 1024).toFixed(2)} KB
             </p>
             <span
@@ -203,7 +207,7 @@ export default function ExcelFileDragAndDrop({
         {selectedFile ? (
           <>
             <span
-              className="focus:ring-blue mx-auto mt-4 max-w-xs cursor-pointer items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:bg-gray-50 active:text-primary-800"
+              className="focus:ring-blue active:bg-secondary-50 mx-auto mt-4 max-w-xs cursor-pointer items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:text-primary-800"
               onClick={() => setPreview(true)}
             >
               <CareIcon
@@ -216,7 +220,7 @@ export default function ExcelFileDragAndDrop({
           </>
         ) : (
           <a
-            className="focus:ring-blue mx-auto mt-4 max-w-xs items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:bg-gray-50 active:text-primary-800"
+            className="focus:ring-blue active:bg-secondary-50 mx-auto mt-4 max-w-xs items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:text-primary-800"
             href={sampleLink}
             target="_blank"
             download
diff --git a/src/Components/Common/ExcelViewer.tsx b/src/Components/Common/ExcelViewer.tsx
index 2d649ca42b2..643b411a9b0 100644
--- a/src/Components/Common/ExcelViewer.tsx
+++ b/src/Components/Common/ExcelViewer.tsx
@@ -68,7 +68,7 @@ const ExcelViewer = ({
     >
       <>
         <div className="mb-2 flex flex-col items-center justify-between md:flex-row">
-          <p className="text-md font-semibold text-gray-700">
+          <p className="text-md font-semibold text-secondary-700">
             {selectedFile.name}
           </p>
           <div className="flex gap-4">
@@ -87,11 +87,11 @@ const ExcelViewer = ({
           </div>
         </div>
         <div className="flex flex-1 flex-col justify-center">
-          <div className="flex w-full justify-center overflow-scroll rounded-lg border border-gray-200">
+          <div className="flex w-full justify-center overflow-scroll rounded-lg border border-secondary-200">
             {fileData && fileData[0] ? (
               <div className="overflow-x-auto">
-                <table className="w-full table-auto border-collapse rounded-lg border border-gray-300 bg-white shadow-md">
-                  <thead className="sticky top-0 bg-gray-100">
+                <table className="w-full table-auto border-collapse rounded-lg border border-secondary-300 bg-white shadow-md">
+                  <thead className="sticky top-0 bg-secondary-100">
                     <tr>
                       {showCheckbox && (
                         <th className="w-5 px-4 py-2">
@@ -133,7 +133,7 @@ const ExcelViewer = ({
                           <tr
                             key={currentRowIndex}
                             className={`
-                            ${rowIndex % 2 === 0 ? "bg-gray-50" : "bg-white"}
+                            ${rowIndex % 2 === 0 ? "bg-secondary-50" : "bg-white"}
                           `}
                           >
                             {showCheckbox && (
@@ -218,12 +218,12 @@ const ExcelViewer = ({
                 </table>
               </div>
             ) : (
-              <div className="text-gray-500">No data found</div>
+              <div className="text-secondary-500">No data found</div>
             )}
           </div>
           {fileData && fileData.length > 5 && (
             <div className="flex w-full flex-wrap items-center justify-between">
-              <p className="my-6 text-gray-600 md:w-auto">
+              <p className="my-6 text-secondary-600 md:w-auto">
                 Showing {currentPage * rowsPerPage - rowsPerPage + 1} to{" "}
                 {currentPage * rowsPerPage > fileData.length
                   ? fileData.length
@@ -242,7 +242,7 @@ const ExcelViewer = ({
                 />
               )}
               <select
-                className="my-4 ml-2 h-9 w-[4.5rem] rounded-md border border-primary-400 py-0 pl-2 pr-4 text-gray-600"
+                className="my-4 ml-2 h-9 w-[4.5rem] rounded-md border border-primary-400 py-0 pl-2 pr-4 text-secondary-600"
                 value={rowsPerPage}
                 onChange={(e) => {
                   setRowsPerPage(+e.target.value);
diff --git a/src/Components/Common/FilePreviewDialog.tsx b/src/Components/Common/FilePreviewDialog.tsx
index 3f55621e8c7..fc4345cc321 100644
--- a/src/Components/Common/FilePreviewDialog.tsx
+++ b/src/Components/Common/FilePreviewDialog.tsx
@@ -105,7 +105,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
       {fileUrl ? (
         <>
           <div className="mb-2 flex flex-col items-center justify-between md:flex-row">
-            <p className="text-md font-semibold text-gray-700">
+            <p className="text-md font-semibold text-secondary-700">
               {file_state.name}.{file_state.extension}
             </p>
             <div className="flex gap-4">
@@ -125,7 +125,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
             </div>
           </div>
           <div className="flex flex-1 items-center justify-center">
-            <div className="flex h-[75vh] w-full items-center justify-center overflow-scroll rounded-lg border border-gray-200">
+            <div className="flex h-[75vh] w-full items-center justify-center overflow-scroll rounded-lg border border-secondary-200">
               {file_state.isImage ? (
                 <img
                   src={fileUrl}
@@ -154,7 +154,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                 <div className="flex h-full w-full flex-col items-center justify-center">
                   <CareIcon
                     icon="l-file"
-                    className="mb-4 text-5xl text-gray-600"
+                    className="mb-4 text-5xl text-secondary-600"
                   />
                   Can't preview this file. Try downloading it.
                 </div>
diff --git a/src/Components/Common/GLocationPicker.tsx b/src/Components/Common/GLocationPicker.tsx
index f71583c2322..bfe95735127 100644
--- a/src/Components/Common/GLocationPicker.tsx
+++ b/src/Components/Common/GLocationPicker.tsx
@@ -222,7 +222,7 @@ const Map: React.FC<MapProps> = ({
             >
               <CareIcon
                 icon="l-times-circle"
-                className="text-2xl text-gray-800"
+                className="text-2xl text-secondary-800"
               />
             </div>
           </Popover.Button>
@@ -240,7 +240,7 @@ const Map: React.FC<MapProps> = ({
           >
             <CareIcon
               icon="l-user-location"
-              className="text-2xl text-gray-800"
+              className="text-2xl text-secondary-800"
             />
           </div>
         )}
diff --git a/src/Components/Common/HeadedTabs.tsx b/src/Components/Common/HeadedTabs.tsx
index 38765431d94..33e8c96a239 100644
--- a/src/Components/Common/HeadedTabs.tsx
+++ b/src/Components/Common/HeadedTabs.tsx
@@ -20,7 +20,7 @@ export default function HeadedTabs(props: headedTabsProps) {
         <select
           id="tabs"
           name="tabs"
-          className="block w-full rounded-md border-gray-300 focus:border-primary-500 focus:ring-primary-500"
+          className="block w-full rounded-md border-secondary-300 focus:border-primary-500 focus:ring-primary-500"
           defaultValue={tabs[0].value}
           onChange={(e) => {
             handleChange(
@@ -34,7 +34,7 @@ export default function HeadedTabs(props: headedTabsProps) {
         </select>
       </div>
       <div className="hidden sm:block">
-        <div className="border-b border-gray-200">
+        <div className="border-b border-secondary-200">
           <nav
             className="-mb-px flex items-center justify-center"
             aria-label="Tabs"
@@ -46,7 +46,7 @@ export default function HeadedTabs(props: headedTabsProps) {
                 className={`${
                   tab.value === currentTabState
                     ? "border-primary-500 text-primary-600"
-                    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                    : "border-transparent text-secondary-500 hover:border-secondary-300 hover:text-secondary-700"
                 } w-1/4 cursor-pointer border-b-2 px-1 py-4 text-center text-sm font-medium`}
                 onClick={() => {
                   handleChange(tab.value);
diff --git a/src/Components/Common/LanguageSelectorLogin.tsx b/src/Components/Common/LanguageSelectorLogin.tsx
index 1f4e8593d2a..1fc4cf4ac77 100644
--- a/src/Components/Common/LanguageSelectorLogin.tsx
+++ b/src/Components/Common/LanguageSelectorLogin.tsx
@@ -18,7 +18,7 @@ export const LanguageSelectorLogin = () => {
   };
 
   return (
-    <div className="mt-8 flex flex-col items-center text-sm text-gray-800">
+    <div className="mt-8 flex flex-col items-center text-sm text-secondary-800">
       {t("available_in")}
       <br />
       <div className="inline-flex flex-wrap gap-3">
diff --git a/src/Components/Common/PageTitle.tsx b/src/Components/Common/PageTitle.tsx
index 990dc7b72cc..3af4c873872 100644
--- a/src/Components/Common/PageTitle.tsx
+++ b/src/Components/Common/PageTitle.tsx
@@ -70,7 +70,7 @@ export default function PageTitle({
             >
               <CareIcon
                 icon="l-angle-left"
-                className="border-box mr-1 rounded-md text-5xl hover:bg-gray-200"
+                className="border-box mr-1 rounded-md text-5xl hover:bg-secondary-200"
               />{" "}
             </button>
           )}
diff --git a/src/Components/Common/Sidebar/Sidebar.tsx b/src/Components/Common/Sidebar/Sidebar.tsx
index abd158b2da7..9c26de9a051 100644
--- a/src/Components/Common/Sidebar/Sidebar.tsx
+++ b/src/Components/Common/Sidebar/Sidebar.tsx
@@ -223,7 +223,7 @@ interface ToggleShrinkProps {
 
 const ToggleShrink = ({ shrinked, toggle }: ToggleShrinkProps) => (
   <div
-    className={`flex h-10 w-10 cursor-pointer items-center justify-center self-end rounded bg-primary-800 text-gray-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100 ${
+    className={`flex h-10 w-10 cursor-pointer items-center justify-center self-end rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100 ${
       shrinked ? "mx-auto" : "mr-4"
     } transition-all duration-200 ease-in-out`}
     onClick={toggle}
diff --git a/src/Components/Common/Sidebar/SidebarUserCard.tsx b/src/Components/Common/Sidebar/SidebarUserCard.tsx
index 02170f453d7..69678f676d4 100644
--- a/src/Components/Common/Sidebar/SidebarUserCard.tsx
+++ b/src/Components/Common/Sidebar/SidebarUserCard.tsx
@@ -21,7 +21,7 @@ const SidebarUserCard = ({ shrinked }: { shrinked: boolean }) => {
       <div className="flex cursor-pointer justify-center" onClick={signOut}>
         <CareIcon
           icon="l-sign-out-alt"
-          className={`text-2xl text-gray-400 ${
+          className={`text-2xl text-secondary-400 ${
             shrinked ? "visible" : "hidden"
           }`}
         />
@@ -46,9 +46,9 @@ const SidebarUserCard = ({ shrinked }: { shrinked: boolean }) => {
         >
           <CareIcon
             icon="l-sign-out-alt"
-            className={`${shrinked ? "text-xl" : "mr-1"} text-gray-400`}
+            className={`${shrinked ? "text-xl" : "mr-1"} text-secondary-400`}
           />
-          <p className="text-gray-400 text-opacity-80">{t("sign_out")}</p>
+          <p className="text-secondary-400 text-opacity-80">{t("sign_out")}</p>
         </div>
       </div>
     </div>
diff --git a/src/Components/Common/SlideOver.res b/src/Components/Common/SlideOver.res
index dbcacbe1bad..75f1c963c6e 100644
--- a/src/Components/Common/SlideOver.res
+++ b/src/Components/Common/SlideOver.res
@@ -13,7 +13,7 @@ let make = (~show, ~setShow, ~children) =>
           leaveFrom="opacity-100"
           leaveTo="opacity-0">
           <div
-            className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+            className="absolute inset-0 bg-secondary-500 bg-opacity-75 transition-opacity"
             onClick={_ => setShow(false)}
           />
         </Transition>
diff --git a/src/Components/Common/Steps.tsx b/src/Components/Common/Steps.tsx
index e0b1e03af3f..31c5145835f 100644
--- a/src/Components/Common/Steps.tsx
+++ b/src/Components/Common/Steps.tsx
@@ -13,7 +13,7 @@ export default function Steps(props: { steps: Step[] }) {
     <nav aria-label="Progress">
       <ol
         role="list"
-        className="divide-y divide-gray-300 rounded-md border border-gray-300 md:flex md:divide-y-0"
+        className="divide-y divide-secondary-300 rounded-md border border-secondary-300 md:flex md:divide-y-0"
       >
         {props.steps.map((step, stepIdx) => (
           <li key={step.name} className="relative md:flex md:flex-1">
@@ -34,7 +34,7 @@ export default function Steps(props: { steps: Step[] }) {
                       aria-hidden="true"
                     />
                   </span>
-                  <span className="ml-4 text-sm font-medium text-gray-900">
+                  <span className="ml-4 text-sm font-medium text-secondary-900">
                     {step.name}
                   </span>
                 </span>
@@ -66,12 +66,12 @@ export default function Steps(props: { steps: Step[] }) {
                 }`}
               >
                 <span className="flex items-center px-6 py-4 text-sm font-medium">
-                  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-gray-300 group-hover:border-gray-400">
-                    <span className="text-gray-500 group-hover:text-gray-900">
+                  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-secondary-300 group-hover:border-secondary-400">
+                    <span className="text-secondary-500 group-hover:text-secondary-900">
                       {step.id}
                     </span>
                   </span>
-                  <span className="ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900">
+                  <span className="ml-4 text-sm font-medium text-secondary-500 group-hover:text-secondary-900">
                     {step.name}
                   </span>
                 </span>
@@ -85,7 +85,7 @@ export default function Steps(props: { steps: Step[] }) {
                   aria-hidden="true"
                 >
                   <svg
-                    className="h-full w-full text-gray-300"
+                    className="h-full w-full text-secondary-300"
                     viewBox="0 0 22 80"
                     fill="none"
                     preserveAspectRatio="none"
diff --git a/src/Components/Common/Uptime.tsx b/src/Components/Common/Uptime.tsx
index 9e3ba09c7fc..6883d0f3871 100644
--- a/src/Components/Common/Uptime.tsx
+++ b/src/Components/Common/Uptime.tsx
@@ -8,14 +8,14 @@ import { PaginatedResponse, QueryRoute } from "../../Utils/request/types";
 
 const STATUS_COLORS = {
   Operational: "bg-green-500",
-  "Not Monitored": "bg-gray-400",
+  "Not Monitored": "bg-secondary-400",
   Down: "bg-red-500",
   "Under Maintenance": "bg-blue-500",
 };
 
 const STATUS_COLORS_TEXT = {
   Operational: "text-green-500",
-  "Not Monitored": "text-gray-400",
+  "Not Monitored": "text-secondary-400",
   Down: "text-red-500",
   "Under Maintenance": "text-blue-500",
 };
@@ -47,12 +47,12 @@ function UptimeInfo({
   let totalMinutes = 0;
 
   return (
-    <div className="absolute z-50 w-full rounded-lg shadow-lg ring-1 ring-gray-400">
+    <div className="absolute z-50 w-full rounded-lg shadow-lg ring-1 ring-secondary-400">
       <div className="rounded-lg bg-white px-6 py-4">
         <div className="flow-root rounded-md">
-          <div className="block text-center text-sm text-gray-800">
+          <div className="block text-center text-sm text-secondary-800">
             <span className="font-bold ">{date}</span>
-            <div className="my-2 border-t border-gray-200"></div>
+            <div className="my-2 border-t border-secondary-200"></div>
             {incidents.length === 0 ? (
               <>
                 <span>No status for the day</span>
@@ -119,7 +119,7 @@ function UptimeInfo({
                     );
                   })}
                 </div>
-                <div className="my-2 border-t border-gray-200"></div>
+                <div className="my-2 border-t border-secondary-200"></div>
                 <div className="mt-1 flex justify-between">
                   <span className="font-bold">Total downtime</span>
                   <span>
@@ -372,7 +372,7 @@ export default function Uptime(
             {props.header}
             <div>
               <div className="mt-2 overflow-x-clip px-5">
-                <div className="mb-1 mt-2 flex justify-center text-xs text-gray-700 opacity-70">
+                <div className="mb-1 mt-2 flex justify-center text-xs text-secondary-700 opacity-70">
                   {getUptimePercent(numDays)}% uptime
                 </div>
                 <div
@@ -393,21 +393,21 @@ export default function Uptime(
                           <div
                             className={`h-[11px] w-3 rounded-t-sm ${
                               hoveredDay === index
-                                ? "bg-gray-700"
+                                ? "bg-secondary-700"
                                 : dayStatus[0]
                             }`}
                           ></div>
                           <div
                             className={`h-[11px] w-3 ${
                               hoveredDay === index
-                                ? "bg-gray-700"
+                                ? "bg-secondary-700"
                                 : dayStatus[1]
                             }`}
                           ></div>
                           <div
                             className={`h-[11px] w-3 rounded-b-sm ${
                               hoveredDay === index
-                                ? "bg-gray-700"
+                                ? "bg-secondary-700"
                                 : dayStatus[2]
                             }`}
                           ></div>
@@ -425,7 +425,7 @@ export default function Uptime(
                   })}
                 </div>
                 <div
-                  className={`flex text-xs text-gray-700 opacity-70 ${
+                  className={`flex text-xs text-secondary-700 opacity-70 ${
                     hoveredDay == -1 && "mt-2"
                   }`}
                 >
diff --git a/src/Components/Common/UserAutocompleteFormField.tsx b/src/Components/Common/UserAutocompleteFormField.tsx
index 9e94c5e4e68..c7694b74e4e 100644
--- a/src/Components/Common/UserAutocompleteFormField.tsx
+++ b/src/Components/Common/UserAutocompleteFormField.tsx
@@ -48,7 +48,7 @@ export default function UserAutocompleteFormField(props: Props) {
       <div className="mr-6 mt-[2px]">
         <svg
           className={`h-3 w-3 ${
-            isUserOnline(option) ? "text-green-500" : "text-gray-400"
+            isUserOnline(option) ? "text-green-500" : "text-secondary-400"
           }`}
           fill="currentColor"
           viewBox="0 0 8 8"
diff --git a/src/Components/Common/UserDetails.tsx b/src/Components/Common/UserDetails.tsx
index 16df560f07f..2e4355f98bb 100644
--- a/src/Components/Common/UserDetails.tsx
+++ b/src/Components/Common/UserDetails.tsx
@@ -7,7 +7,7 @@ function UserDetails(props: {
 }) {
   return (
     <div className="mt-2" id={props.id}>
-      <div className="font-light leading-relaxed text-gray-900">
+      <div className="font-light leading-relaxed text-secondary-900">
         {props.title}:
       </div>
       {props.children}
diff --git a/src/Components/Common/components/ButtonV2.tsx b/src/Components/Common/components/ButtonV2.tsx
index 3bc5a41e799..2c9579873b1 100644
--- a/src/Components/Common/components/ButtonV2.tsx
+++ b/src/Components/Common/components/ButtonV2.tsx
@@ -102,7 +102,7 @@ const ButtonV2 = ({
 }: ButtonProps) => {
   const className = classNames(
     props.className,
-    "inline-flex h-min cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-500",
+    "inline-flex h-min cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500",
     `button-size-${size}`,
     `button-shape-${circle ? "circle" : "square"}`,
     ghost ? `button-${variant}-ghost` : `button-${variant}-default`,
diff --git a/src/Components/Common/components/ContactLink.tsx b/src/Components/Common/components/ContactLink.tsx
index 762558f5bb2..ff13433cc3b 100644
--- a/src/Components/Common/components/ContactLink.tsx
+++ b/src/Components/Common/components/ContactLink.tsx
@@ -13,7 +13,7 @@ export default function ContactLink(props: ContactLinkProps) {
       >
         <CareIcon
           icon={props.tel ? "l-outgoing-call" : "l-envelope-alt"}
-          className="h-5 fill-gray-700"
+          className="h-5 fill-secondary-700"
         />
         {props.tel ? props.tel : props.mailto}
       </a>
diff --git a/src/Components/Common/components/Menu.tsx b/src/Components/Common/components/Menu.tsx
index 1caac9edc12..a6f66ff9d2f 100644
--- a/src/Components/Common/components/Menu.tsx
+++ b/src/Components/Common/components/Menu.tsx
@@ -34,7 +34,7 @@ export default function DropdownMenu({
       <Menu as="div" className="relative inline-block w-full text-left">
         <Menu.Button
           disabled={props.disabled}
-          className={`button-size-${size} button-${variant}-default  button-shape-square flex w-full cursor-pointer items-center justify-center gap-2 font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-500 lg:justify-between ${props.className}`}
+          className={`button-size-${size} button-${variant}-default  button-shape-square flex w-full cursor-pointer items-center justify-center gap-2 font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500 lg:justify-between ${props.className}`}
         >
           <div
             className={classNames(
diff --git a/src/Components/Common/components/SkeletonLoading.res b/src/Components/Common/components/SkeletonLoading.res
index 46ae08071f6..71f4f11df91 100644
--- a/src/Components/Common/components/SkeletonLoading.res
+++ b/src/Components/Common/components/SkeletonLoading.res
@@ -33,7 +33,7 @@ let userCard = () =>
     <div className="skeleton-body-wrapper px-2 lg:px-0">
       <div className="skeleton-placeholder__card px-5 py-6 bg-white rounded-lg shadow">
         <div className="flex items-center">
-          <div className="w-14 h-14 bg-gray-100 rounded-full mr-4 skeleton-animate" />
+          <div className="w-14 h-14 bg-secondary-100 rounded-full mr-4 skeleton-animate" />
           <div className="flex-1">
             <div className="skeleton-placeholder__line-sm w-2/6 skeleton-animate" />
             <div className="skeleton-placeholder__line-sm mt-4 w-3/6 skeleton-animate" />
@@ -57,7 +57,7 @@ let profileCard = () =>
   <div className="skeleton-body-container w-full pb-4 mx-auto">
     <div className="skeleton-body-wrapper max-w-sm mt-8 px-3 lg:px-0">
       <div className="flex items-center">
-        <div className="w-14 h-14 bg-gray-100 rounded-full mr-4 skeleton-animate" />
+        <div className="w-14 h-14 bg-secondary-100 rounded-full mr-4 skeleton-animate" />
         <div className="flex-1">
           <div className="skeleton-placeholder__line-sm w-3/6 skeleton-animate" />
           <div className="skeleton-placeholder__line-sm mt-4 skeleton-animate" />
diff --git a/src/Components/Common/components/Switch.tsx b/src/Components/Common/components/Switch.tsx
index 2253e95d155..7be7490f7b1 100644
--- a/src/Components/Common/components/Switch.tsx
+++ b/src/Components/Common/components/Switch.tsx
@@ -29,7 +29,7 @@ export default function SwitchV2<T>(props: SwitchProps<T>) {
           const additionalClassNames = selected
             ? (props.optionClassName && props.optionClassName(option)) ||
               "bg-primary-500 hover:bg-primary-600 text-white border-primary-500 focus:ring-primary-500 focus:border-primary-500"
-            : "bg-gray-50 hover:bg-gray-200 border-gray-400 focus:ring-primary-500 focus:border-primary-500";
+            : "bg-secondary-50 hover:bg-secondary-200 border-secondary-400 focus:ring-primary-500 focus:border-primary-500";
 
           return (
             <li
diff --git a/src/Components/Common/components/Table.tsx b/src/Components/Common/components/Table.tsx
index cd2b481fb43..ef872d511c8 100644
--- a/src/Components/Common/components/Table.tsx
+++ b/src/Components/Common/components/Table.tsx
@@ -51,7 +51,7 @@ export default function Table(props: {
                 );
               }
               return (
-                <div className="flex min-w-[24px] items-center justify-center py-[14px] text-center text-sm font-bold text-gray-900">
+                <div className="flex min-w-[24px] items-center justify-center py-[14px] text-center text-sm font-bold text-secondary-900">
                   <>{item}</>
                 </div>
               );
diff --git a/src/Components/Common/prescription-builder/InvestigationBuilder.tsx b/src/Components/Common/prescription-builder/InvestigationBuilder.tsx
index 6de2a83f1cb..ef99a7f1acc 100644
--- a/src/Components/Common/prescription-builder/InvestigationBuilder.tsx
+++ b/src/Components/Common/prescription-builder/InvestigationBuilder.tsx
@@ -4,6 +4,7 @@ import { PrescriptionMultiDropdown } from "./PrescriptionMultiselect";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import request from "../../../Utils/request/request";
 import routes from "../../../Redux/api";
+import { humanizeStrings } from "../../../Utils/utils";
 
 export type InvestigationType = {
   type?: string[];
@@ -86,9 +87,9 @@ export default function InvestigationBuilder(
     return (
       data?.results.map(
         (investigation) =>
-          `${investigation.name} -- ${investigation.groups
-            .map((group) => ` ( ${group.name} ) `)
-            .join(", ")}`,
+          `${investigation.name} -- ${humanizeStrings(
+            investigation.groups.map((group) => ` ( ${group.name} ) `),
+          )}`,
       ) ?? []
     );
   };
@@ -125,16 +126,16 @@ export default function InvestigationBuilder(
           <div
             key={i}
             className={`border-2 ${
-              activeIdx === i ? "border-primary-500" : "border-gray-500"
-            } mb-2 border-spacing-2 rounded-md border-dashed p-3 text-sm text-gray-600`}
+              activeIdx === i ? "border-primary-500" : "border-secondary-500"
+            } mb-2 border-spacing-2 rounded-md border-dashed p-3 text-sm text-secondary-600`}
           >
             <div className="mb-2 flex flex-wrap items-center gap-2 md:flex-row md:gap-4">
-              <h4 className="text-base font-medium text-gray-700">
+              <h4 className="text-base font-medium text-secondary-700">
                 Investigation No. {i + 1}
               </h4>
               <button
                 type="button"
-                className="flex h-full items-center justify-center gap-1.5 rounded-md bg-red-500 px-3 py-1 text-sm text-gray-100 transition hover:bg-red-600"
+                className="flex h-full items-center justify-center gap-1.5 rounded-md bg-red-500 px-3 py-1 text-sm text-secondary-100 transition hover:bg-red-600"
                 onClick={() =>
                   setInvestigations(
                     investigations.filter((investigation, index) => i != index),
@@ -210,7 +211,7 @@ export default function InvestigationBuilder(
                       Time<span className="text-danger-500">{" *"}</span>
                       <input
                         type="datetime-local"
-                        className="block w-[calc(100%-5px)] rounded border border-gray-400 bg-gray-100 px-4 py-2 text-sm hover:bg-gray-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
+                        className="block w-[calc(100%-5px)] rounded border border-secondary-400 bg-secondary-100 px-4 py-2 text-sm hover:bg-secondary-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
                         value={investigation.time || ""}
                         onChange={(e) => {
                           setItem(
@@ -257,7 +258,7 @@ export default function InvestigationBuilder(
         onClick={() => {
           setInvestigations([...investigations, { repetitive: false }]);
         }}
-        className="mt-4 block w-full bg-gray-200 px-4 py-2 text-left text-sm font-bold leading-5 text-gray-700 shadow-sm hover:bg-gray-300 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-none"
+        className="mt-4 block w-full bg-secondary-200 px-4 py-2 text-left text-sm font-bold leading-5 text-secondary-700 shadow-sm hover:bg-secondary-300 hover:text-secondary-900 focus:bg-secondary-100 focus:text-secondary-900 focus:outline-none"
       >
         + Add Investigation
       </button>
diff --git a/src/Components/Common/prescription-builder/PrescriptionDropdown.tsx b/src/Components/Common/prescription-builder/PrescriptionDropdown.tsx
index dbfa0749ef1..6d122d00a5a 100644
--- a/src/Components/Common/prescription-builder/PrescriptionDropdown.tsx
+++ b/src/Components/Common/prescription-builder/PrescriptionDropdown.tsx
@@ -62,7 +62,7 @@ export function PrescriptionDropdown(props: {
                 id="frequency-interval"
                 type="button"
                 key={i}
-                className="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-none"
+                className="block w-full px-4 py-2 text-left text-sm leading-5 text-secondary-700 hover:bg-secondary-100 hover:text-secondary-900 focus:bg-secondary-100 focus:text-secondary-900 focus:outline-none"
                 onClick={() => {
                   setValue(option);
                   setOpen(false);
diff --git a/src/Components/Common/prescription-builder/PrescriptionMultiselect.tsx b/src/Components/Common/prescription-builder/PrescriptionMultiselect.tsx
index 79ae3356ee4..4f744bcbae7 100644
--- a/src/Components/Common/prescription-builder/PrescriptionMultiselect.tsx
+++ b/src/Components/Common/prescription-builder/PrescriptionMultiselect.tsx
@@ -84,10 +84,10 @@ export function PrescriptionMultiDropdown(props: {
                 id="investigation-group"
                 key={i}
                 className={classNames(
-                  "block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:text-gray-900 focus:text-gray-900 focus:outline-none",
+                  "block w-full px-4 py-2 text-left text-sm leading-5 text-secondary-700 hover:text-secondary-900 focus:text-secondary-900 focus:outline-none",
                   selectedValues.includes(option)
                     ? "bg-primary-100 hover:bg-primary-200"
-                    : "hover:bg-gray-100 focus:bg-gray-100",
+                    : "hover:bg-secondary-100 focus:bg-secondary-100",
                 )}
                 onClick={() => {
                   setSelectedValues(
diff --git a/src/Components/Common/prescription-builder/ProcedureBuilder.tsx b/src/Components/Common/prescription-builder/ProcedureBuilder.tsx
index 5eca95354bf..fe7ec3cda3c 100644
--- a/src/Components/Common/prescription-builder/ProcedureBuilder.tsx
+++ b/src/Components/Common/prescription-builder/ProcedureBuilder.tsx
@@ -41,18 +41,18 @@ export default function ProcedureBuilder(props: Props<ProcedureType>) {
           <div
             key={i}
             className={`border-2 ${
-              activeIdx === i ? "border-primary-500" : "border-gray-500"
-            } mb-2 border-spacing-2 rounded-md border-dashed p-3 text-sm text-gray-600`}
+              activeIdx === i ? "border-primary-500" : "border-secondary-500"
+            } mb-2 border-spacing-2 rounded-md border-dashed p-3 text-sm text-secondary-600`}
           >
             <div className="flex flex-col gap-2 md:flex-row">
               <div className="flex w-full flex-1 flex-col gap-2">
                 <div className="flex flex-wrap items-center gap-2 md:flex-row md:gap-4">
-                  <h4 className="text-base font-medium text-gray-700">
+                  <h4 className="text-base font-medium text-secondary-700">
                     Procedure No. {i + 1}
                   </h4>
                   <button
                     type="button"
-                    className="flex h-full items-center justify-center gap-2 rounded-md bg-red-500 px-3 py-1 text-sm text-gray-100 transition hover:bg-red-600"
+                    className="flex h-full items-center justify-center gap-2 rounded-md bg-red-500 px-3 py-1 text-sm text-secondary-100 transition hover:bg-red-600"
                     onClick={() =>
                       setProcedures(
                         procedures.filter((procedure, index) => i != index),
@@ -69,7 +69,7 @@ export default function ProcedureBuilder(props: Props<ProcedureType>) {
                   <input
                     id="procedure-name"
                     type="text"
-                    className="mt-1 block w-full rounded border border-gray-400 bg-gray-100 px-4 py-2 text-sm hover:bg-gray-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
+                    className="mt-1 block w-full rounded border border-secondary-400 bg-secondary-100 px-4 py-2 text-sm hover:bg-secondary-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
                     placeholder="Procedure"
                     maxLength={100}
                     value={procedure.procedure || ""}
@@ -138,7 +138,7 @@ export default function ProcedureBuilder(props: Props<ProcedureType>) {
                       <input
                         id="procedure-time"
                         type="datetime-local"
-                        className="block w-[calc(100%-5px)] rounded border border-gray-400 bg-gray-100 px-4 py-2 text-sm hover:bg-gray-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
+                        className="block w-[calc(100%-5px)] rounded border border-secondary-400 bg-secondary-100 px-4 py-2 text-sm hover:bg-secondary-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
                         value={procedure.time || ""}
                         onFocus={() => setActiveIdx(i)}
                         onBlur={() => setActiveIdx(null)}
@@ -160,7 +160,7 @@ export default function ProcedureBuilder(props: Props<ProcedureType>) {
                   <div className="mb-1">Notes</div>
                   <input
                     type="text"
-                    className="block w-full rounded border border-gray-400 bg-gray-100 px-4 py-2 text-sm hover:bg-gray-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
+                    className="block w-full rounded border border-secondary-400 bg-secondary-100 px-4 py-2 text-sm hover:bg-secondary-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
                     placeholder="Notes"
                     value={procedure.notes || ""}
                     onFocus={() => setActiveIdx(i)}
@@ -186,7 +186,7 @@ export default function ProcedureBuilder(props: Props<ProcedureType>) {
         onClick={() => {
           setProcedures([...procedures, { repetitive: false }]);
         }}
-        className="mt-4 block w-full bg-gray-200 px-4 py-2 text-left text-sm font-bold leading-5 text-gray-700 shadow-sm hover:bg-gray-300 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-none"
+        className="mt-4 block w-full bg-secondary-200 px-4 py-2 text-left text-sm font-bold leading-5 text-secondary-700 shadow-sm hover:bg-secondary-300 hover:text-secondary-900 focus:bg-secondary-100 focus:text-secondary-900 focus:outline-none"
       >
         + Add Procedures
       </button>
diff --git a/src/Components/CriticalCareRecording/CriticalCare__Index.res b/src/Components/CriticalCareRecording/CriticalCare__Index.res
index 56bc5623264..0290728fd82 100644
--- a/src/Components/CriticalCareRecording/CriticalCare__Index.res
+++ b/src/Components/CriticalCareRecording/CriticalCare__Index.res
@@ -11,17 +11,20 @@ let renderLine = (title, value) => {
 let renderIndicators = (title, value, isMin, isMax, minText, maxText) => {
   let indicator = if isMax {
     <span className="inline-block bg-red-200 rounded-full px-2 mx-3 my-1 text-xs py-1 text-red-800">
-      <CareIcon icon="l-exclamation-triangle" className="mr-2" /> {str(maxText)}
+      <CareIcon icon="l-exclamation-triangle" className="mr-2" />
+      {str(maxText)}
     </span>
   } else if isMin {
     <span
       className="inline-block bg-yellow-200 rounded-full px-2 mx-3 my-1 text-xs py-1 text-yellow-800">
-      <CareIcon icon="l-exclamation-triangle" className="mr-2" /> {str(minText)}
+      <CareIcon icon="l-exclamation-triangle" className="mr-2" />
+      {str(minText)}
     </span>
   } else {
     <span
       className="inline-block bg-green-200 rounded-full px-2 mx-3 my-1 text-xs py-1 text-green-800">
-      <CareIcon icon="l-check-circle" className="mr-2" /> {str("Normal")}
+      <CareIcon icon="l-check-circle" className="mr-2" />
+      {str("Normal")}
     </span>
   }
 
@@ -109,25 +112,25 @@ let make = (
     </div>
     <div>
       <div
-        className="bg-white px-2 md:px-6 py-5 border-b border-gray-200 sm:px-6 max-w-5xl mx-auto border mt-4 shadow rounded-lg">
+        className="bg-white px-2 md:px-6 py-5 border-b border-secondary-200 sm:px-6 max-w-5xl mx-auto border mt-4 shadow rounded-lg">
         <h1 className="text-4xl sm:text-5xl"> {str("Consultation Update")} </h1>
         <div>
           <CriticalCare__PageTitle title="General" />
           <DailyRound__General others title renderOptionalDescription />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Neurological Monitoring" />
           <DailyRound__NeurologicalMonitoring
             neurologicalMonitoring title renderLine renderOptionalDescription renderOptionalInt
           />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Medicines" />
           <DailyRound__Medicines prescriptions={medicine} />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Arterial Blood Gas Analysis" />
           <DailyRound__ABG
@@ -136,19 +139,19 @@ let make = (
             renderOptionalFloatWithIndicators
           />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Blood Sugar" />
           <DailyRound__BloodSugar
             bloodSugar renderOptionalIntWithIndicators renderOptionalFloat renderLine
           />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Dialysis" />
           <DailyRound__Dialysis dialysis renderOptionalInt />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Vitals" />
           <DailyRound__HemodynamicParameters
@@ -163,17 +166,17 @@ let make = (
             renderOptionalInt
           />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="I/O Balance" />
           <DailyRound__IOBalance ioBalance title renderOptionalDescription />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Nursing Care" />
           <DailyRound__NursingCare nursingCare renderLine />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Pressure Sore" />
           <CriticalCare__PressureSoreEditor
@@ -184,7 +187,7 @@ let make = (
             consultationId={consultationId}
           />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Respiratory Support" />
           <DailyRound__VentilatorParameters
@@ -195,12 +198,12 @@ let make = (
             renderLine
           />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Others" />
           <DailyRound__Others others renderOptionalIntWithIndicators renderOptionalBool />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
       </div>
     </div>
   </div>
diff --git a/src/Components/CriticalCareRecording/DailyRound__Medicines.res b/src/Components/CriticalCareRecording/DailyRound__Medicines.res
index 4ecca39a4f5..ce143c24d29 100644
--- a/src/Components/CriticalCareRecording/DailyRound__Medicines.res
+++ b/src/Components/CriticalCareRecording/DailyRound__Medicines.res
@@ -8,20 +8,20 @@ let make = (~prescriptions) => {
       : <div className="flex flex-col">
           <div className="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
             <div
-              className="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
+              className="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-secondary-200">
               <table className="min-w-full">
                 <thead>
                   <tr>
                     <th
-                      className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                      className="px-6 py-3 border-b border-secondary-200 bg-secondary-50 text-left text-xs leading-4 font-medium text-secondary-500 uppercase tracking-wider">
                       {str("Medicine")}
                     </th>
                     <th
-                      className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                      className="px-6 py-3 border-b border-secondary-200 bg-secondary-50 text-left text-xs leading-4 font-medium text-secondary-500 uppercase tracking-wider">
                       {str("Dosage")}
                     </th>
                     <th
-                      className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                      className="px-6 py-3 border-b border-secondary-200 bg-secondary-50 text-left text-xs leading-4 font-medium text-secondary-500 uppercase tracking-wider">
                       {str("Days")}
                     </th>
                   </tr>
@@ -29,13 +29,15 @@ let make = (~prescriptions) => {
                 <tbody> {Js.Array.mapi((p, index) => {
                     <tr className="bg-white" key={string_of_int(index)}>
                       <td
-                        className="px-6 py-4 whitespace-nowrap text-sm leading-5 font-medium text-gray-900">
+                        className="px-6 py-4 whitespace-nowrap text-sm leading-5 font-medium text-secondary-900">
                         {str(Prescription__Prescription.medicine(p))}
                       </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-gray-500">
+                      <td
+                        className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-secondary-500">
                         {str(Prescription__Prescription.dosage(p))}
                       </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-gray-500">
+                      <td
+                        className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-secondary-500">
                         {str(string_of_int(Prescription__Prescription.days(p)))}
                       </td>
                     </tr>
diff --git a/src/Components/CriticalCareRecording/HemodynamicParameters/CriticalCare__HemodynamicParametersEditor.res b/src/Components/CriticalCareRecording/HemodynamicParameters/CriticalCare__HemodynamicParametersEditor.res
index 829df2aa078..47cc040440e 100644
--- a/src/Components/CriticalCareRecording/HemodynamicParameters/CriticalCare__HemodynamicParametersEditor.res
+++ b/src/Components/CriticalCareRecording/HemodynamicParameters/CriticalCare__HemodynamicParametersEditor.res
@@ -53,7 +53,7 @@ let reducer = (state, action) => {
   switch action {
   | SetPain(pain) => {
       ...state,
-      pain: pain,
+      pain,
       dirty: true,
     }
   | SetSystolic(systolic) => {
@@ -85,10 +85,10 @@ let reducer = (state, action) => {
       resp: Some(resp),
       dirty: true,
     }
-  | SetRhythm(rhythm) => {...state, rhythm: rhythm, dirty: true}
+  | SetRhythm(rhythm) => {...state, rhythm, dirty: true}
   | SetRhythmDetails(rhythmDetails) => {
       ...state,
-      rhythmDetails: rhythmDetails,
+      rhythmDetails,
       dirty: true,
     }
   | SetSaving => {...state, saving: true}
@@ -143,7 +143,11 @@ let makePayload = state => {
     Js.Dict.set(payload, "bp", Js.Json.object_(makeBpPayload(systolic, diastolic)))
   | (_, _) => ()
   }
-  Js.Dict.set(payload, "pain_scale_enhanced", Js.Json.objectArray(Js.Array.map(makePainField, state.pain)))
+  Js.Dict.set(
+    payload,
+    "pain_scale_enhanced",
+    Js.Json.objectArray(Js.Array.map(makePainField, state.pain)),
+  )
   DictUtils.setOptionalNumber("pulse", state.pulse, payload)
   DictUtils.setOptionalNumber("ventilator_spo2", state.spo2, payload)
   DictUtils.setOptionalFloat(
@@ -256,11 +260,11 @@ let make = (~hemodynamicParameter, ~updateCB, ~id, ~consultationId) => {
           hasError={ValidationUtils.isInputInRangeInt(0, 100, state.spo2)}
         />
       </div>
-      <div className="border-b border-b-gray-500 w-full my-10" />
+      <div className="border-b border-b-secondary-500 w-full my-10" />
       <Slider
         title={"Temperature"}
         titleNeighbour={<div
-          className="flex items-center ml-1 border border-gray-400 rounded px-4 h-10 cursor-pointer hover:bg-gray-200"
+          className="flex items-center ml-1 border border-secondary-400 rounded px-4 h-10 cursor-pointer hover:bg-secondary-200"
           onClick={_ => ToggleTemperatureUnit->send}>
           <span className="text-blue-700"> {state.tempInCelcius ? "C"->str : "F"->str} </span>
         </div>}
@@ -291,19 +295,19 @@ let make = (~hemodynamicParameter, ~updateCB, ~id, ~consultationId) => {
       <div className="w-full">
         <div className="mx-2">
           <h4> {str("Pain")} </h4>
-          <p>{str("Mark region and intensity of pain")}</p>
+          <p> {str("Mark region and intensity of pain")} </p>
         </div>
       </div>
       <CriticalCare__PainEditor
         previewMode={false}
         painParameter={state.pain}
         updateCB={data => {
-          send(SetPain(data));
+          send(SetPain(data))
         }}
         id={id}
         consultationId={consultationId}
       />
-      <div className="border-b border-b-gray-500 w-full mt-10" />
+      <div className="border-b border-b-secondary-500 w-full mt-10" />
       <Slider
         title={"Pulse (bpm)"}
         start={"0"}
@@ -337,7 +341,7 @@ let make = (~hemodynamicParameter, ~updateCB, ~id, ~consultationId) => {
         </label>
         <textarea
           id="description"
-          className="block w-full border-gray-500 border-2 rounded px-2 py-1 focus:outline-green-500 focus:outline-offset-0 focus:outline-1 focus:border-green-500"
+          className="block w-full border-secondary-500 border-2 rounded px-2 py-1 focus:outline-green-500 focus:outline-offset-0 focus:outline-1 focus:border-green-500"
           rows=3
           value={state.rhythmDetails}
           onChange={e => send(SetRhythmDetails(ReactEvent.Form.target(e)["value"]))}
diff --git a/src/Components/CriticalCareRecording/HemodynamicParameters/DailyRound__HemodynamicParameters.res b/src/Components/CriticalCareRecording/HemodynamicParameters/DailyRound__HemodynamicParameters.res
index 0c285cd9714..94f68240720 100644
--- a/src/Components/CriticalCareRecording/HemodynamicParameters/DailyRound__HemodynamicParameters.res
+++ b/src/Components/CriticalCareRecording/HemodynamicParameters/DailyRound__HemodynamicParameters.res
@@ -17,7 +17,7 @@ let make = (
     <div>
       {switch HemodynamicParameters.bp(hemodynamicParameter) {
       | Some(data) =>
-        <div className="px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+        <div className="px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
           {title("Blood Pressure: ")}
           {renderIntWithIndicators("Systolic", data.systolic, 100, 140, "Low", "High")}
           {renderIntWithIndicators("Diastolic", data.diastolic, 50, 90, "Low", "High")}
@@ -53,12 +53,12 @@ let make = (
     )}
     <h3 className="mt-4"> {str("Pain Scale")} </h3>
     <CriticalCare__PainEditor
-        previewMode={true}
-        painParameter={HemodynamicParameters.pain(hemodynamicParameter)}
-        updateCB={_ => ()}
-        id={""}
-        consultationId={""}
-      />
+      previewMode={true}
+      painParameter={HemodynamicParameters.pain(hemodynamicParameter)}
+      updateCB={_ => ()}
+      id={""}
+      consultationId={""}
+    />
     {renderLine(
       "Rhythm",
       HemodynamicParameters.rhythmToString(HemodynamicParameters.rhythm(hemodynamicParameter)),
diff --git a/src/Components/CriticalCareRecording/IOBalance/DailyRound__IOBalance.res b/src/Components/CriticalCareRecording/IOBalance/DailyRound__IOBalance.res
index 97d1001fc61..17f6f3c34dd 100644
--- a/src/Components/CriticalCareRecording/IOBalance/DailyRound__IOBalance.res
+++ b/src/Components/CriticalCareRecording/IOBalance/DailyRound__IOBalance.res
@@ -7,81 +7,73 @@ let make = (~ioBalance, ~title, ~renderOptionalDescription) => {
     <div>
       {title("Infusions")}
       <table
-        className="text-left px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+        className="text-left px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
         <tr>
           <th className="text-left border p-2 w-1/2"> {str("Name")} </th>
           <th className="text-left border p-2 w-1/2"> {str("Quantity")} </th>
         </tr>
-        {Js.Array.map(
-          item =>
-            <tr>
-              <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
-              <td className="text-left border p-2 w-1/2">
-                {React.float(IOBalance.quantity(item))}
-              </td>
-            </tr>,
-          IOBalance.infusions(ioBalance),
-        )->React.array}
+        {Js.Array.map(item =>
+          <tr>
+            <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
+            <td className="text-left border p-2 w-1/2">
+              {React.float(IOBalance.quantity(item))}
+            </td>
+          </tr>
+        , IOBalance.infusions(ioBalance))->React.array}
       </table>
     </div>
     <div>
       {title("IV Fluid")}
       <table
-        className="text-left px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+        className="text-left px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
         <tr>
           <th className="text-left border p-2 w-1/2"> {str("Name")} </th>
           <th className="text-left border p-2 w-1/2"> {str("Quantity")} </th>
         </tr>
-        {Js.Array.map(
-          item =>
-            <tr>
-              <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
-              <td className="text-left border p-2 w-1/2">
-                {React.float(IOBalance.quantity(item))}
-              </td>
-            </tr>,
-          IOBalance.ivFluid(ioBalance),
-        )->React.array}
+        {Js.Array.map(item =>
+          <tr>
+            <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
+            <td className="text-left border p-2 w-1/2">
+              {React.float(IOBalance.quantity(item))}
+            </td>
+          </tr>
+        , IOBalance.ivFluid(ioBalance))->React.array}
       </table>
     </div>
     <div>
       {title("Feed")}
       <table
-        className="text-left px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+        className="text-left px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
         <tr>
           <th className="text-left border p-2 w-1/2"> {str("Name")} </th>
           <th className="text-left border p-2 w-1/2"> {str("Quantity")} </th>
         </tr>
-        {Js.Array.map(
-          item =>
-            <tr>
-              <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
-              <td className="text-left border p-2 w-1/2">
-                {React.float(IOBalance.quantity(item))}
-              </td>
-            </tr>,
-          IOBalance.feed(ioBalance),
-        )->React.array}
+        {Js.Array.map(item =>
+          <tr>
+            <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
+            <td className="text-left border p-2 w-1/2">
+              {React.float(IOBalance.quantity(item))}
+            </td>
+          </tr>
+        , IOBalance.feed(ioBalance))->React.array}
       </table>
     </div>
     <div>
       {title("Output")}
       <table
-        className="text-left px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+        className="text-left px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
         <tr>
           <th className="text-left border p-2 w-1/2"> {str("Name")} </th>
           <th className="text-left border p-2 w-1/2"> {str("Quantity")} </th>
         </tr>
-        {Js.Array.map(
-          item =>
-            <tr>
-              <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
-              <td className="text-left border p-2 w-1/2">
-                {React.float(IOBalance.quantity(item))}
-              </td>
-            </tr>,
-          IOBalance.output(ioBalance),
-        )->React.array}
+        {Js.Array.map(item =>
+          <tr>
+            <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
+            <td className="text-left border p-2 w-1/2">
+              {React.float(IOBalance.quantity(item))}
+            </td>
+          </tr>
+        , IOBalance.output(ioBalance))->React.array}
       </table>
     </div>
     {renderOptionalDescription(
diff --git a/src/Components/CriticalCareRecording/IOBalance/IOBalance__Summary.res b/src/Components/CriticalCareRecording/IOBalance/IOBalance__Summary.res
index 9c59996964b..b858c19f61a 100644
--- a/src/Components/CriticalCareRecording/IOBalance/IOBalance__Summary.res
+++ b/src/Components/CriticalCareRecording/IOBalance/IOBalance__Summary.res
@@ -3,7 +3,7 @@ let str = React.string
 @react.component
 let make = (~leftMain, ~rightMain, ~rightSub, ~noBorder=false) => {
   <div className={"flex justify-between items-center " ++ (noBorder ? "" : "border-b-4")}>
-    <div className="text-xl font-bold text-gray-800 pt-2"> {str(leftMain)} </div>
+    <div className="text-xl font-bold text-secondary-800 pt-2"> {str(leftMain)} </div>
     <div className="flex items-center text-primary-500">
       <div className="text-sm font-bold pt-3"> {str(rightSub)} </div>
       <div className="text-4xl font-bold ml-2"> {str(rightMain)} </div>
diff --git a/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitPicker.res b/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitPicker.res
index 780e5abd751..448b74cf726 100644
--- a/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitPicker.res
+++ b/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitPicker.res
@@ -27,7 +27,7 @@ let renderSelectables = (selections, updateCB) =>
       type_="button"
       key={index |> string_of_int}
       onClick={_ => updateCB(selection)}
-      className="w-full block px-4 py-2 text-sm leading-5 text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900">
+      className="w-full block px-4 py-2 text-sm leading-5 text-left text-secondary-700 hover:bg-secondary-100 hover:text-secondary-900 focus:outline-none focus:bg-secondary-100 focus:text-secondary-900">
       {selection |> str}
     </button>
   )
@@ -76,9 +76,12 @@ let make = (~id, ~value, ~updateCB, ~placeholder, ~selectables) => {
       id
       value
       autoComplete="off"
-      onClick={e => {ReactEvent.Mouse.stopPropagation(e);setShowDropdown(_ => !showDropdown)}}
+      onClick={e => {
+        ReactEvent.Mouse.stopPropagation(e)
+        setShowDropdown(_ => !showDropdown)
+      }}
       onChange={e => updateCB(ReactEvent.Form.target(e)["value"])}
-      className="appearance-none h-10 mt-1 block w-full border border-gray-400 rounded py-2 px-4 text-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:bg-white focus:ring-primary-500"
+      className="appearance-none h-10 mt-1 block w-full border border-secondary-400 rounded py-2 px-4 text-sm bg-secondary-100 hover:bg-secondary-200 focus:outline-none focus:bg-white focus:ring-primary-500"
       placeholder
       required=true
     />
diff --git a/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitSection.res b/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitSection.res
index be062f539a4..73d07909555 100644
--- a/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitSection.res
+++ b/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitSection.res
@@ -34,7 +34,7 @@ let showUnit = (name, item, params, index, send) => {
     <div className="m-1 rounded-md shadow-sm w-1/6">
       <input
         id={"value" ++ index->string_of_int}
-        className="appearance-none h-10 mt-1 block w-full border border-gray-400 rounded py-2 px-4 text-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:bg-white focus:ring-primary-500"
+        className="appearance-none h-10 mt-1 block w-full border border-secondary-400 rounded py-2 px-4 text-sm bg-secondary-100 hover:bg-secondary-200 focus:outline-none focus:bg-white focus:ring-primary-500"
         placeholder="Value"
         onChange={e =>
           UpdateValue(ReactEvent.Form.target(e)["value"]->Js.Float.fromString, index)->send}
@@ -46,7 +46,7 @@ let showUnit = (name, item, params, index, send) => {
     </div>
     <div
       onClick={_ => index->DeleteUnit->send}
-      className="appearance-none h-10 mt-1 block border border-gray-400 rounded py-2 px-4 text-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:bg-white focus:border-gray-600 text-gray-600 font-bold">
+      className="appearance-none h-10 mt-1 block border border-secondary-400 rounded py-2 px-4 text-sm bg-secondary-100 hover:bg-secondary-200 focus:outline-none focus:bg-white focus:border-secondary-600 text-secondary-600 font-bold">
       {"x"->str}
     </div>
   </div>
@@ -60,17 +60,17 @@ let make = (~name, ~items, ~collection, ~updateCB) => {
     collection,
   )
   <div className="px-2 py-5 sm:px-4 max-w-5xl  mt-4">
-    <h3 className={name === "" ? "hidden" : "text-lg leading-6 font-medium text-gray-900"}>
+    <h3 className={name === "" ? "hidden" : "text-lg leading-6 font-medium text-secondary-900"}>
       {name->str}
     </h3>
     <div className="flex justify-between mt-4">
       <div className="m-1 rounded-md shadow-sm w-8/12">
-        <label htmlFor="Field" className="block text-sm font-medium leading-5 text-gray-700">
+        <label htmlFor="Field" className="block text-sm font-medium leading-5 text-secondary-700">
           {"Field"->str}
         </label>
       </div>
       <div className="m-1 rounded-md shadow-sm w-3/12">
-        <label htmlFor="Value" className="block text-sm font-medium leading-5 text-gray-700">
+        <label htmlFor="Value" className="block text-sm font-medium leading-5 text-secondary-700">
           {"Value (ml)"->str}
         </label>
       </div>
@@ -79,11 +79,11 @@ let make = (~name, ~items, ~collection, ~updateCB) => {
       (item, index) => showUnit(name, item, selectables, index, send),
       items,
     )->React.array}
-    <div className={"m-1 rounded-md shadow-sm bg-gray-200"}>
+    <div className={"m-1 rounded-md shadow-sm bg-secondary-200"}>
       <button
         type_="button"
         onClick={_ => AddUnit->send}
-        className="w-full font-bold block px-4 py-2 text-sm leading-5 text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900">
+        className="w-full font-bold block px-4 py-2 text-sm leading-5 text-left text-secondary-700 hover:bg-secondary-100 hover:text-secondary-900 focus:outline-none focus:bg-secondary-100 focus:text-secondary-900">
         {"+ Add a field"->str}
       </button>
     </div>
diff --git a/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Description.res b/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Description.res
index a2e12214329..0123f5088d6 100644
--- a/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Description.res
+++ b/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Description.res
@@ -11,7 +11,7 @@ let make = (~name, ~text, ~onChange, ~label=name) => {
     <label htmlFor={name} className="block mt-2"> {str(label)} </label>
     <textarea
       id={name}
-      className="block w-full border-gray-500 border-2 rounded px-2 py-1 mt-2"
+      className="block w-full border-secondary-500 border-2 rounded px-2 py-1 mt-2"
       rows=3
       value={text}
       onChange={handleOnChange(onChange)}
diff --git a/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__NeurologicalMonitoringEditor.res b/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__NeurologicalMonitoringEditor.res
index dfe0e5cc3dc..83f935cd65f 100644
--- a/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__NeurologicalMonitoringEditor.res
+++ b/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__NeurologicalMonitoringEditor.res
@@ -479,7 +479,7 @@ let make = (~updateCB, ~neurologicalMonitoring, ~id, ~consultationId) => {
         ~name="consciousness_level",
       )}
       {ReactUtils.nullIf(renderPupil(state, send), state.inPronePosition)}
-      <div className="my-15 w-full h-1 bg-gray-300" />
+      <div className="my-15 w-full h-1 bg-secondary-300" />
       <div className="my-10">
         <div className="text-3xl font-bold"> {str("Glasgow Coma Scale")} </div>
         <div className="mt-4">
@@ -541,7 +541,7 @@ let make = (~updateCB, ~neurologicalMonitoring, ~id, ~consultationId) => {
           </div>
         </div>
       </div>
-      <div className="my-15 w-full h-1 bg-gray-300" />
+      <div className="my-15 w-full h-1 bg-secondary-300" />
       <div className="my-10">
         <div className="text-3xl font-bold"> {str("Limb Response")} </div>
         <div>
@@ -568,7 +568,7 @@ let make = (~updateCB, ~neurologicalMonitoring, ~id, ~consultationId) => {
           )}
         </div>
       </div>
-      <div className="my-15 w-full h-1 bg-gray-300" />
+      <div className="my-15 w-full h-1 bg-secondary-300" />
       <button
         disabled={state.saving || !state.dirty}
         className="btn btn-primary btn-large w-full"
diff --git a/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Switch.res b/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Switch.res
index eb6569fedb3..e5d1c8ff727 100644
--- a/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Switch.res
+++ b/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Switch.res
@@ -3,10 +3,10 @@ let str = React.string
 @react.component
 let make = (~checked, ~onChange) => {
   <div
-    className="flex flex-row font-semibold leading-relaxed items-center justify-between px-4 py-2 border rounded border-gray-500">
+    className="flex flex-row font-semibold leading-relaxed items-center justify-between px-4 py-2 border rounded border-secondary-500">
     <div> {str("The patient is on prone position")} </div>
     <div>
-      <div className="relative" onClick={_ => onChange(!checked)} >
+      <div className="relative" onClick={_ => onChange(!checked)}>
         <input
           type_="checkbox"
           id="toggle"
@@ -16,13 +16,13 @@ let make = (~checked, ~onChange) => {
         />
         <div
           className={"block w-14 h-8 rounded-full " ++ (
-            checked ? "bg-green-300" : "bg-gray-400"
+            checked ? "bg-green-300" : "bg-secondary-400"
           )}
         />
         <div
           className="transition duration-150 ease-in-out dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full checked:bg-green-300"
         />
-      </div> 
+      </div>
     </div>
   </div>
 }
diff --git a/src/Components/CriticalCareRecording/NeurologicalMonitoring/DailyRound__NeurologicalMonitoring.res b/src/Components/CriticalCareRecording/NeurologicalMonitoring/DailyRound__NeurologicalMonitoring.res
index 7dd295ecb51..74b6147de59 100644
--- a/src/Components/CriticalCareRecording/NeurologicalMonitoring/DailyRound__NeurologicalMonitoring.res
+++ b/src/Components/CriticalCareRecording/NeurologicalMonitoring/DailyRound__NeurologicalMonitoring.res
@@ -17,7 +17,7 @@ let make = (
       ),
     )}
     <div className="flex md:flex-row flex-col mt-2">
-      <div className="px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+      <div className="px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
         {title("Left Pupil")}
         {renderOptionalInt("Size", NeurologicalMonitoring.leftPupilSize(neurologicalMonitoring))}
         {renderOptionalDescription(
@@ -35,7 +35,7 @@ let make = (
           NeurologicalMonitoring.leftPupilLightReactionDetails(neurologicalMonitoring),
         )}
       </div>
-      <div className="px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+      <div className="px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
         {title("Right Pupil")}
         {renderOptionalInt("Size", NeurologicalMonitoring.rightPupilSize(neurologicalMonitoring))}
         {renderOptionalDescription(
@@ -73,7 +73,8 @@ let make = (
     <div>
       {title("Limb Response")}
       <div className="flex md:flex-no-wrap flex-wrap">
-        <div className="border md:w-1/2 w-full p-6 text-center bg-gray-100 hover:bg-gray-300">
+        <div
+          className="border md:w-1/2 w-full p-6 text-center bg-secondary-100 hover:bg-secondary-300">
           {renderLine(
             "Upper Left",
             NeurologicalMonitoring.limpResponseToString(
@@ -81,7 +82,8 @@ let make = (
             ),
           )}
         </div>
-        <div className="border md:w-1/2 w-full p-6 text-center bg-gray-100 hover:bg-gray-300">
+        <div
+          className="border md:w-1/2 w-full p-6 text-center bg-secondary-100 hover:bg-secondary-300">
           {renderLine(
             "Upper Right",
             NeurologicalMonitoring.limpResponseToString(
@@ -91,7 +93,8 @@ let make = (
         </div>
       </div>
       <div className="flex md:flex-no-wrap flex-wrap">
-        <div className="border md:w-1/2 w-full p-6 text-center bg-gray-100 hover:bg-gray-300">
+        <div
+          className="border md:w-1/2 w-full p-6 text-center bg-secondary-100 hover:bg-secondary-300">
           {renderLine(
             "Lower Left",
             NeurologicalMonitoring.limpResponseToString(
@@ -99,7 +102,8 @@ let make = (
             ),
           )}
         </div>
-        <div className="border md:w-1/2 w-full p-6 text-center bg-gray-100 hover:bg-gray-300">
+        <div
+          className="border md:w-1/2 w-full p-6 text-center bg-secondary-100 hover:bg-secondary-300">
           {renderLine(
             "Lower Right",
             NeurologicalMonitoring.limpResponseToString(
diff --git a/src/Components/CriticalCareRecording/NursingCare/CriticalCare__NursingCareEditor.res b/src/Components/CriticalCareRecording/NursingCare/CriticalCare__NursingCareEditor.res
index f6dc3f5ab73..d24d60a4614 100644
--- a/src/Components/CriticalCareRecording/NursingCare/CriticalCare__NursingCareEditor.res
+++ b/src/Components/CriticalCareRecording/NursingCare/CriticalCare__NursingCareEditor.res
@@ -124,7 +124,7 @@ let make = (~nursingCare, ~updateCB, ~id, ~consultationId) => {
           | Some(s) =>
             <div id={"text-area" ++ string_of_int(index)} className="px-6">
               <textarea
-                className="appearance-none mt-2 block w-full text-gray-800 border border-gray-400 rounded py-2 px-4 text-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:bg-white focus:ring-primary-500"
+                className="appearance-none mt-2 block w-full text-secondary-800 border border-secondary-400 rounded py-2 px-4 text-sm bg-secondary-100 hover:bg-secondary-200 focus:outline-none focus:bg-white focus:ring-primary-500"
                 value={NursingCare.description(s)}
                 onChange={handleOnChange(send, s)}
               />
diff --git a/src/Components/CriticalCareRecording/Others/DailyRound__General.res b/src/Components/CriticalCareRecording/Others/DailyRound__General.res
index 22c5051083e..138eb7d2241 100644
--- a/src/Components/CriticalCareRecording/Others/DailyRound__General.res
+++ b/src/Components/CriticalCareRecording/Others/DailyRound__General.res
@@ -41,7 +41,7 @@ let make = (~others, ~renderOptionalDescription, ~title) => {
     <div className="flex flex-wrap max-w-full">
       {switch additionalSymptoms {
       | Some(symptomsArray) => Js.Array.map(id => {
-          <div className="rounded-full px-4 py-2 bg-gray-400 m-1 text-sm">
+          <div className="rounded-full px-4 py-2 bg-secondary-400 m-1 text-sm">
             {str(symptoms[id - 1])}
           </div>
         }, symptomsArray)->React.array
diff --git a/src/Components/CriticalCareRecording/Pain/CriticalCare__PainEditor.res b/src/Components/CriticalCareRecording/Pain/CriticalCare__PainEditor.res
index da041231265..1401d465558 100644
--- a/src/Components/CriticalCareRecording/Pain/CriticalCare__PainEditor.res
+++ b/src/Components/CriticalCareRecording/Pain/CriticalCare__PainEditor.res
@@ -105,7 +105,7 @@ let reducer = (state, action) => {
   | ClearSaving => {...state, saving: false}
   | Update(parts) => {
       ...state,
-      parts: parts,
+      parts,
     }
   | SetPreviewMode => {...state, previewMode: true}
   | ClearPreviewMode => {...state, previewMode: false}
@@ -151,7 +151,7 @@ let initialState = (psp, previewMode) => {
     selectedRegion: Pain.Other,
     saving: false,
     dirty: false,
-    previewMode: previewMode,
+    previewMode,
   }
 }
 
@@ -160,7 +160,7 @@ let selectedClass = (part: option<Pain.part>) => {
   | Some(p) =>
     let score = p.scale
     if score <= 0 {
-      "text-gray-400 hover:bg-red-400 tooltip"
+      "text-secondary-400 hover:bg-red-400 tooltip"
     } else if score <= 3 {
       "text-red-200 hover:bg-red-400 tooltip"
     } else if score <= 6 {
@@ -172,7 +172,7 @@ let selectedClass = (part: option<Pain.part>) => {
     } else {
       "text-red-700 hover:bg-red-800 tooltip"
     }
-  | None => "text-gray-400 hover:text-red-200 tooltip"
+  | None => "text-secondary-400 hover:text-red-200 tooltip"
   }
 }
 // UI for each Label
@@ -181,7 +181,7 @@ let selectedLabelClass = (part: option<Pain.part>) => {
   | Some(p) =>
     let score = p.scale
     if score <= 0 {
-      "bg-gray-300 text-black hover:bg-gray-400"
+      "bg-secondary-300 text-black hover:bg-secondary-400"
     } else if score <= 3 {
       "bg-red-200 text-red-700 hover:bg-red-400"
     } else if score <= 6 {
@@ -193,7 +193,7 @@ let selectedLabelClass = (part: option<Pain.part>) => {
     } else {
       "bg-red-700 text-white hover:bg-red-200"
     }
-  | None => "bg-gray-300 text-black hover:bg-red-200"
+  | None => "bg-secondary-300 text-black hover:bg-red-200"
   }
 }
 
@@ -366,7 +366,8 @@ let make = (~painParameter, ~updateCB, ~id, ~consultationId, ~previewMode) => {
               // Toggle
 
               //Toggle Button
-              <div className="transition duration-150 ease-in-out mr-3 text-gray-700 font-medium">
+              <div
+                className="transition duration-150 ease-in-out mr-3 text-secondary-700 font-medium">
                 {str(state.previewMode ? "Preview Mode" : "Edit Mode")}
               </div>
               <div className="relative">
@@ -378,7 +379,7 @@ let make = (~painParameter, ~updateCB, ~id, ~consultationId, ~previewMode) => {
                 />
                 <div
                   className={"block w-14 h-8 rounded-full " ++ (
-                    state.previewMode ? "bg-green-300" : "bg-gray-400"
+                    state.previewMode ? "bg-green-300" : "bg-secondary-400"
                   )}
                 />
                 <div
diff --git a/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res b/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
index 3ee3a2d8d2a..7ad8377bd95 100644
--- a/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
+++ b/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
@@ -153,12 +153,12 @@ let make = (
                             )}
                           </div>
                         </div>
-                        <div className="text-sm text-gray-700"> {str("Pain Scale")} </div>
+                        <div className="text-sm text-secondary-700"> {str("Pain Scale")} </div>
                       </div>
                     </div>
                     {state.description !== ""
                       ? <div className="mt-4">
-                          <label className="block text-sm text-gray-700 text-left">
+                          <label className="block text-sm text-secondary-700 text-left">
                             {str("Description")}
                           </label>
                           <div className="text-black"> {str(state.description)} </div>
@@ -169,7 +169,7 @@ let make = (
           </div>
         </div>
         <div
-          className="bg-gray-50 px-4 py-3 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-2">
+          className="bg-secondary-50 px-4 py-3 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-2">
           <div className="flex flex-col-reverse sm:flex-row-reverse w-full gap-2">
             {!previewMode
               ? <button
@@ -189,7 +189,7 @@ let make = (
             <button
               type_="button"
               onClick={hideModal}
-              className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+              className="mt-3 inline-flex w-full justify-center rounded-md border border-secondary-300 bg-white px-4 py-2 text-base font-medium text-secondary-700 shadow-sm hover:bg-secondary-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
               {str(!previewMode ? "Cancel" : "Close")}
             </button>
           </div>
diff --git a/src/Components/CriticalCareRecording/Pain/DailyRound__Pain.res b/src/Components/CriticalCareRecording/Pain/DailyRound__Pain.res
index 2b3923f89d6..4695cafcbf1 100644
--- a/src/Components/CriticalCareRecording/Pain/DailyRound__Pain.res
+++ b/src/Components/CriticalCareRecording/Pain/DailyRound__Pain.res
@@ -3,9 +3,11 @@ open CriticalCare__Types
 
 @react.component
 let make = (~painParameter) => {
-  <table className="text-left px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+  <table
+    className="text-left px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
     <tr>
-      <th className="text-left border p-2 w-1/2"> {str("Part")} </th> <th> {str("Scale")} </th>
+      <th className="text-left border p-2 w-1/2"> {str("Part")} </th>
+      <th> {str("Scale")} </th>
     </tr>
     {Js.Array.map(pain => {
       <tr>
diff --git a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreEditor.res b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreEditor.res
index de3062edeb0..c6e7bffdb14 100644
--- a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreEditor.res
+++ b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreEditor.res
@@ -74,20 +74,20 @@ let reducer = (state, action) => {
   | AddSelectedPart(region) => {
       ...state,
       parts: Js.Array.concat(
-        Js.Array.filter(p => PressureSore.region(p) !== region, state.parts), 
+        Js.Array.filter(p => PressureSore.region(p) !== region, state.parts),
         [
           Belt.Option.getWithDefault(
-            Js.Array.find(p => PressureSore.region(p) === region, state.parts), 
-            PressureSore.makeDefault(region)
-          )
-        ]
+            Js.Array.find(p => PressureSore.region(p) === region, state.parts),
+            PressureSore.makeDefault(region),
+          ),
+        ],
       ),
       dirty: true,
     }
   | UpdateSelectedPart(part) => {
       ...state,
       parts: Js.Array.concat(
-        Js.Array.filter((item: PressureSore.part) => item.region != part.region, state.parts), 
+        Js.Array.filter((item: PressureSore.part) => item.region != part.region, state.parts),
         [part],
       ),
       dirty: true,
@@ -109,7 +109,7 @@ let reducer = (state, action) => {
   | ClearSaving => {...state, saving: false}
   | Update(parts) => {
       ...state,
-      parts: parts,
+      parts,
     }
   | SetPreviewMode => {...state, previewMode: true}
   | ClearPreviewMode => {...state, previewMode: false}
@@ -122,8 +122,16 @@ let makeField = p => {
   Js.Dict.set(payload, "scale", Js.Json.number(float_of_int(PressureSore.scale(p))))
   Js.Dict.set(payload, "width", Js.Json.number(p.width))
   Js.Dict.set(payload, "length", Js.Json.number(p.length))
-  Js.Dict.set(payload, "tissue_type", Js.Json.string(PressureSore.tissueTypeToString(p.tissue_type)))
-  Js.Dict.set(payload, "exudate_amount", Js.Json.string(PressureSore.extrudateAmountToString(p.exudate_amount)))
+  Js.Dict.set(
+    payload,
+    "tissue_type",
+    Js.Json.string(PressureSore.tissueTypeToString(p.tissue_type)),
+  )
+  Js.Dict.set(
+    payload,
+    "exudate_amount",
+    Js.Json.string(PressureSore.extrudateAmountToString(p.exudate_amount)),
+  )
   Js.Dict.set(payload, "description", Js.Json.string(p.description))
   payload
 }
@@ -159,35 +167,49 @@ let initialState = (psp, previewMode) => {
     selectedRegion: PressureSore.Other,
     saving: false,
     dirty: false,
-    previewMode: previewMode,
+    previewMode,
   }
 }
 
 let selectedClass = (part: option<PressureSore.part>) => {
   switch part {
   | Some(p) =>
-    let score =  PressureSore.calculatePushScore(p.length, p.width, p.exudate_amount, p.tissue_type) 
-    if score <= 0.0 { "text-gray-400 hover:bg-red-400 tooltip" } 
-    else if score <= 3.0 { "text-red-200 hover:bg-red-400 tooltip" }
-    else if score <= 6.0 { "text-red-400 hover:bg-red-500 tooltip" }
-    else if score <= 10.0 { "text-red-500 hover:bg-red-600 tooltip" }
-    else if score <= 15.0 { "text-red-600 hover:bg-red-700 tooltip" }
-    else { "text-red-700 hover:bg-red-800 tooltip" }
-  | None => "text-gray-400 hover:text-red-200 tooltip"
+    let score = PressureSore.calculatePushScore(p.length, p.width, p.exudate_amount, p.tissue_type)
+    if score <= 0.0 {
+      "text-secondary-400 hover:bg-red-400 tooltip"
+    } else if score <= 3.0 {
+      "text-red-200 hover:bg-red-400 tooltip"
+    } else if score <= 6.0 {
+      "text-red-400 hover:bg-red-500 tooltip"
+    } else if score <= 10.0 {
+      "text-red-500 hover:bg-red-600 tooltip"
+    } else if score <= 15.0 {
+      "text-red-600 hover:bg-red-700 tooltip"
+    } else {
+      "text-red-700 hover:bg-red-800 tooltip"
+    }
+  | None => "text-secondary-400 hover:text-red-200 tooltip"
   }
 }
 // UI for each Label
 let selectedLabelClass = (part: option<PressureSore.part>) => {
   switch part {
   | Some(p) =>
-    let score =  PressureSore.calculatePushScore(p.length, p.width, p.exudate_amount, p.tissue_type) 
-    if score <= 0.0 { "bg-gray-300 text-black hover:bg-gray-400" }
-    else if score <= 3.0 { "bg-red-200 text-red-700 hover:bg-red-400" }
-    else if score <= 6.0 { "bg-red-400 text-white hover:bg-red-500" }
-    else if score <= 10.0 { "bg-red-500 text-white hover:bg-red-600" }
-    else if score <= 15.0 { "bg-red-600 text-white hover:bg-red-700" }
-    else { "bg-red-700 text-white hover:bg-red-200" }
-  | None => "bg-gray-300 text-black hover:bg-red-200"
+    let score = PressureSore.calculatePushScore(p.length, p.width, p.exudate_amount, p.tissue_type)
+    if score <= 0.0 {
+      "bg-secondary-300 text-black hover:bg-secondary-400"
+    } else if score <= 3.0 {
+      "bg-red-200 text-red-700 hover:bg-red-400"
+    } else if score <= 6.0 {
+      "bg-red-400 text-white hover:bg-red-500"
+    } else if score <= 10.0 {
+      "bg-red-500 text-white hover:bg-red-600"
+    } else if score <= 15.0 {
+      "bg-red-600 text-white hover:bg-red-700"
+    } else {
+      "bg-red-700 text-white hover:bg-red-200"
+    }
+  | None => "bg-secondary-300 text-black hover:bg-red-200"
   }
 }
 
@@ -229,8 +251,9 @@ let getIntoView = (region: string, isPart: bool) => {
 }
 
 let renderBody = (state, send, title, partPaths, substr) => {
-  
-  let show = state.selectedRegion !== PressureSore.Other && partPaths->Belt.Array.some(p => PressureSore.regionForPath(p) === state.selectedRegion)
+  let show =
+    state.selectedRegion !== PressureSore.Other &&
+      partPaths->Belt.Array.some(p => PressureSore.regionForPath(p) === state.selectedRegion)
 
   let inputModal = React.useRef(Js.Nullable.null)
   let isMouseOverInputModal = %raw(`
@@ -260,30 +283,35 @@ let renderBody = (state, send, title, partPaths, substr) => {
             className={"p-1 col-auto text-sm rounded m-1 cursor-pointer " ++
             selectedLabelClass(selectedPart)}
             id={PressureSore.regionToString(regionType)}
-            onClick={_ => getIntoView(PressureSore.regionToString(regionType), false)}
-          >
+            onClick={_ => getIntoView(PressureSore.regionToString(regionType), false)}>
             <div className="flex justify-between">
               <div className="border-white px-1">
                 {str(
                   Js.String.sliceToEnd(
                     ~from=substr,
-                    PressureSore.regionToString(regionType) ++ (pushScoreValue(selectedPart) === "0" ? "" : " : " ++ pushScoreValue(selectedPart)),
+                    PressureSore.regionToString(regionType) ++ (
+                      pushScoreValue(selectedPart) === "0"
+                        ? ""
+                        : " : " ++ pushScoreValue(selectedPart)
+                    ),
                   ),
                 )}
               </div>
-              {state.previewMode ? React.null :  <div>
-              {switch selectedPart {
-              | Some(p) =>
-                <CareIcon
-                  icon="l-times"
-                  className="border-l-2 p-1 text-lg"
-                  onClick={state.previewMode
-                    ? _ => getIntoView(PressureSore.regionToString(regionType), false)
-                    : _ => send(RemoveFromSelectedParts(p))}
-                />
-              | None => React.null
-              }}
-              </div>}
+              {state.previewMode
+                ? React.null
+                : <div>
+                    {switch selectedPart {
+                    | Some(p) =>
+                      <CareIcon
+                        icon="l-times"
+                        className="border-l-2 p-1 text-lg"
+                        onClick={state.previewMode
+                          ? _ => getIntoView(PressureSore.regionToString(regionType), false)
+                          : _ => send(RemoveFromSelectedParts(p))}
+                      />
+                    | None => React.null
+                    }}
+                  </div>}
             </div>
           </div>
         }, partPaths)->React.array}
@@ -297,17 +325,18 @@ let renderBody = (state, send, title, partPaths, substr) => {
           modalRef={ReactDOM.Ref.domRef(inputModal)}
           hideModal={_ => send(SetSelectedRegion(PressureSore.Other))}
           position={state.modalPosition}
-          part={
-            Belt.Option.getWithDefault(
-              Js.Array.find(p => PressureSore.region(p) === state.selectedRegion, state.parts), 
-              PressureSore.makeDefault(state.selectedRegion)
-            )
-          }
+          part={Belt.Option.getWithDefault(
+            Js.Array.find(p => PressureSore.region(p) === state.selectedRegion, state.parts),
+            PressureSore.makeDefault(state.selectedRegion),
+          )}
           updatePart={part => send(UpdateSelectedPart(part))}
           previewMode={state.previewMode}
         />
       </div>
-      <svg className="h-screen py-4 cursor-pointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 344.7 932.661">
+      <svg
+        className="h-screen py-4 cursor-pointer"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 344.7 932.661">
         {Js.Array.mapi((part, renderIndex) => {
           let regionType = PressureSore.regionForPath(part)
           let selectedPart = Js.Array.find(p => PressureSore.region(p) === regionType, state.parts)
@@ -319,9 +348,13 @@ let renderBody = (state, send, title, partPaths, substr) => {
             fill="currentColor"
             id={"part" ++ PressureSore.regionToString(regionType)}
             onClick={e => {
-              send(ShowInputModal(part.region, {"x": e->ReactEvent.Mouse.clientX, "y": e->ReactEvent.Mouse.clientY}))
-            }}
-          >
+              send(
+                ShowInputModal(
+                  part.region,
+                  {"x": e->ReactEvent.Mouse.clientX, "y": e->ReactEvent.Mouse.clientY},
+                ),
+              )
+            }}>
             <title className=""> {str(PressureSore.regionToString(regionType))} </title>
           </path>
         }, partPaths)->React.array}
@@ -348,7 +381,8 @@ let make = (~pressureSoreParameter, ~updateCB, ~id, ~consultationId, ~previewMod
               // Toggle
 
               //Toggle Button
-              <div className="transition duration-150 ease-in-out mr-3 text-gray-700 font-medium">
+              <div
+                className="transition duration-150 ease-in-out mr-3 text-secondary-700 font-medium">
                 {str(state.previewMode ? "Preview Mode" : "Edit Mode")}
               </div>
               <div className="relative">
@@ -360,7 +394,7 @@ let make = (~pressureSoreParameter, ~updateCB, ~id, ~consultationId, ~previewMod
                 />
                 <div
                   className={"block w-14 h-8 rounded-full " ++ (
-                    state.previewMode ? "bg-green-300" : "bg-gray-400"
+                    state.previewMode ? "bg-green-300" : "bg-secondary-400"
                   )}
                 />
                 <div
diff --git a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
index 9df26e6510d..b35a6af7bd3 100644
--- a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
+++ b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
@@ -39,7 +39,7 @@ let make = (
 
   let handleSubmit = e => {
     let region = PressureSore.regionToString(state.region)
-    if (state.length === 0.0 && state.width === 0.0) {
+    if state.length === 0.0 && state.width === 0.0 {
       hideModal(e)
     } else if (
       (state.length > 0.0 && state.width == 0.0) || (state.length == 0.0 && state.width > 0.0)
@@ -198,31 +198,33 @@ let make = (
                           <div className="text-black font-bold text-xl">
                             {str(state.width->Belt.Float.toString)}
                           </div>
-                          <div className="text-sm text-gray-700"> {str("Width")} </div>
+                          <div className="text-sm text-secondary-700"> {str("Width")} </div>
                         </div>
                         <div className="flex flex-col items-center text-center">
                           <div className="text-black font-bold text-xl">
                             {str(state.length->Belt.Float.toString)}
                           </div>
-                          <div className="text-sm text-gray-700"> {str("Length")} </div>
+                          <div className="text-sm text-secondary-700"> {str("Length")} </div>
                         </div>
                         <div className="flex flex-col items-center text-center">
                           <div className="text-black font-bold text-xl">
                             {str(state.exudate_amount->PressureSore.encodeExudateAmount)}
                           </div>
-                          <div className="text-sm text-gray-700"> {str("Exudate Amount")} </div>
+                          <div className="text-sm text-secondary-700">
+                            {str("Exudate Amount")}
+                          </div>
                         </div>
                         <div className="flex flex-col items-center text-center">
                           <div className="text-black font-bold text-xl">
                             {str(state.tissue_type->PressureSore.encodeTissueType)}
                           </div>
-                          <div className="text-sm text-gray-700"> {str("Tissue Type")} </div>
+                          <div className="text-sm text-secondary-700"> {str("Tissue Type")} </div>
                         </div>
                       </div>
                     </div>
                     {state.description !== ""
                       ? <div className="mt-4">
-                          <label className="block text-sm text-gray-700 text-left">
+                          <label className="block text-sm text-secondary-700 text-left">
                             {str("Description")}
                           </label>
                           <div className="text-black"> {str(state.description)} </div>
@@ -233,7 +235,7 @@ let make = (
           </div>
         </div>
         <div
-          className="bg-gray-50 px-4 py-3 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-2">
+          className="bg-secondary-50 px-4 py-3 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-2">
           <div className="flex gap-2 w-full justify-center sm:justify-start items-center">
             <span> {str("Push Score: ")} </span>
             <span className="text-black"> {str(pushScore->Belt.Float.toString)} </span>
@@ -250,7 +252,7 @@ let make = (
             <button
               type_="button"
               onClick={hideModal}
-              className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+              className="mt-3 inline-flex w-full justify-center rounded-md border border-secondary-300 bg-white px-4 py-2 text-base font-medium text-secondary-700 shadow-sm hover:bg-secondary-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
               {str(!previewMode ? "Cancel" : "Close")}
             </button>
           </div>
diff --git a/src/Components/CriticalCareRecording/PressureSore/DailyRound__PressureSore.res b/src/Components/CriticalCareRecording/PressureSore/DailyRound__PressureSore.res
index 997e5447e70..cd24b26d37e 100644
--- a/src/Components/CriticalCareRecording/PressureSore/DailyRound__PressureSore.res
+++ b/src/Components/CriticalCareRecording/PressureSore/DailyRound__PressureSore.res
@@ -3,9 +3,11 @@ open CriticalCare__Types
 
 @react.component
 let make = (~pressureSoreParameter) => {
-  <table className="text-left px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+  <table
+    className="text-left px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
     <tr>
-      <th className="text-left border p-2 w-1/2"> {str("Part")} </th> <th> {str("Push Score")} </th>
+      <th className="text-left border p-2 w-1/2"> {str("Part")} </th>
+      <th> {str("Push Score")} </th>
     </tr>
     {Js.Array.map(pressure => {
       <tr>
diff --git a/src/Components/CriticalCareRecording/Recording/CriticalCare__Recording.res b/src/Components/CriticalCareRecording/Recording/CriticalCare__Recording.res
index 5ff736f5664..a3729277e12 100644
--- a/src/Components/CriticalCareRecording/Recording/CriticalCare__Recording.res
+++ b/src/Components/CriticalCareRecording/Recording/CriticalCare__Recording.res
@@ -72,19 +72,19 @@ let editorToggle = (editorName, state, send) => {
       <CareIcon
         icon="l-user-nurse"
         className={`text-xl mr-4 ${Belt.Option.isNone(editorUpdated)
-            ? "text-gray-400"
+            ? "text-secondary-400"
             : "text-green-500"}`}
       />
       <div
         className={`font-semibold text-xl  ${Belt.Option.isNone(editorUpdated)
-            ? "text-gray-800"
+            ? "text-secondary-800"
             : "text-green-500"}`}>
         {str(editorNameToString(editorName))}
       </div>
     </div>
     <div>
       {Belt.Option.isNone(editorUpdated)
-        ? <CareIcon icon="l-check-circle" className="text-3xl text-gray-300" />
+        ? <CareIcon icon="l-check-circle" className="text-3xl text-secondary-300" />
         : <CareIcon icon="l-check-circle" className="text-3xl text-green-500" />}
     </div>
   </div>
@@ -151,7 +151,7 @@ let make = (~id, ~facilityId, ~patientId, ~consultationId, ~dailyRound) => {
             {str("Back")}
           </button>
           <div
-            className="bg-white px-2 md:px-6 py-5 border-b border-gray-200 sm:px-6 max-w-5xl mx-auto border mt-4 shadow rounded-lg">
+            className="bg-white px-2 md:px-6 py-5 border-b border-secondary-200 sm:px-6 max-w-5xl mx-auto border mt-4 shadow rounded-lg">
             {switch editor {
             | NeurologicalMonitoringEditor =>
               <CriticalCare__NeurologicalMonitoringEditor
@@ -235,7 +235,7 @@ let make = (~id, ~facilityId, ~patientId, ~consultationId, ~dailyRound) => {
         </div>
       | None =>
         <div
-          className="bg-white px-2 md:px-6 py-5 border-b border-gray-200 sm:px-6 max-w-5xl mx-auto border mt-4 shadow rounded-lg">
+          className="bg-white px-2 md:px-6 py-5 border-b border-secondary-200 sm:px-6 max-w-5xl mx-auto border mt-4 shadow rounded-lg">
           <h2> {str("Record Updates")} </h2>
           <div>
             {basicEditor(~facilityId, ~patientId, ~consultationId, ~id)}
diff --git a/src/Components/CriticalCareRecording/components/CriticalCare__Dropdown.res b/src/Components/CriticalCareRecording/components/CriticalCare__Dropdown.res
index a0196a9baa9..76908972723 100644
--- a/src/Components/CriticalCareRecording/components/CriticalCare__Dropdown.res
+++ b/src/Components/CriticalCareRecording/components/CriticalCare__Dropdown.res
@@ -27,7 +27,7 @@ let renderSelectables = (selections, updateCB) =>
       type_="button"
       key={index |> string_of_int}
       onClick={_ => updateCB(selection)}
-      className="w-full block px-4 py-2 text-sm leading-5 text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900">
+      className="w-full block px-4 py-2 text-sm leading-5 text-left text-secondary-700 hover:bg-secondary-100 hover:text-secondary-900 focus:outline-none focus:bg-secondary-100 focus:text-secondary-900">
       {selection |> str}
     </button>
   )
@@ -77,7 +77,10 @@ let make = (~id, ~value, ~updateCB, ~placeholder, ~selectables, ~label="", ~disa
       id
       value
       autoComplete="off"
-      onClick={e => {ReactEvent.Mouse.stopPropagation(e); setShowDropdown(_ => !showDropdown)}}
+      onClick={e => {
+        ReactEvent.Mouse.stopPropagation(e)
+        setShowDropdown(_ => !showDropdown)
+      }}
       onChange={e => updateCB(ReactEvent.Form.target(e)["value"])}
       className="cui-input-base appearance-none h-10 mt-1 block py-2 px-4"
       disabled
diff --git a/src/Components/CriticalCareRecording/components/CriticalCare__Home.res b/src/Components/CriticalCareRecording/components/CriticalCare__Home.res
index 13bfa2f9cfb..35f543f4c16 100644
--- a/src/Components/CriticalCareRecording/components/CriticalCare__Home.res
+++ b/src/Components/CriticalCareRecording/components/CriticalCare__Home.res
@@ -236,7 +236,7 @@
 //                 //<CriticalCare__RadioButton options={reaction_options} ishorizontal=true/>
 //             </div>
 //         </div>
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 //         <div>
 //             <div className="text-3xl font-bold">{str("Glasgow Coma Scale")}</div>
 //             <div>
@@ -257,7 +257,7 @@
 //             </div>
 //         </div>
 
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 
 //         <div>
 //             <div className="text-3xl font-bold">{str("Limb Response")}</div>
@@ -272,13 +272,13 @@
 //             </div>
 //         </div>
 
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 
 //         <div>
 //             <CriticalCare__DoubleRangeSlider />
 //         </div>
 
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 
 //          <div>
 //             <div className="text-3xl font-bold">{str("Ventillator Parameters")}</div>
@@ -291,14 +291,14 @@
 //             <CriticalCare__NumberInput labels={ventilator_parameters} />
 //         </div>
 
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 
 //          <div>
 //             <div className="text-3xl font-bold">{str("Infusions")}</div>
 //             <CriticalCare__NumberInput labels={infusion_parameters} />
 //         </div>
 
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 
 //          <div>
 //             <div className="text-3xl font-bold">{str("Feed")}</div>
@@ -309,7 +309,7 @@
 //             </div>
 //         </div>
 
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 
 //          <div>
 //             <div className="text-3xl font-bold">{str("Output")}</div>
@@ -324,3 +324,4 @@
 
 //     </div>
 // }
+
diff --git a/src/Components/CriticalCareRecording/components/CriticalCare__NumberInput.res b/src/Components/CriticalCareRecording/components/CriticalCare__NumberInput.res
index 445d0874066..d133348e4d6 100644
--- a/src/Components/CriticalCareRecording/components/CriticalCare__NumberInput.res
+++ b/src/Components/CriticalCareRecording/components/CriticalCare__NumberInput.res
@@ -2,17 +2,21 @@ let str = React.string
 
 @react.component
 let make = (~labels) => {
-    <div>
-        {labels|>Array.map((x) => {
-            <div className="grid grid-cols-2 my-4">
-                <div>
-                    {str(x)}
-                </div>
-                <div>
-                    <input className="w-84 border-2 rounded border-gray-400 p-1" type_="number" name={x} id={x} />
-                </div>
-            </div>
-        })
-        |> React.array }
-    </div>
+  <div>
+    {labels
+    |> Array.map(x => {
+      <div className="grid grid-cols-2 my-4">
+        <div> {str(x)} </div>
+        <div>
+          <input
+            className="w-84 border-2 rounded border-secondary-400 p-1"
+            type_="number"
+            name={x}
+            id={x}
+          />
+        </div>
+      </div>
+    })
+    |> React.array}
+  </div>
 }
diff --git a/src/Components/CriticalCareRecording/components/PressureSore.js b/src/Components/CriticalCareRecording/components/PressureSore.js
index 1aa32607546..b03dbf4de19 100644
--- a/src/Components/CriticalCareRecording/components/PressureSore.js
+++ b/src/Components/CriticalCareRecording/components/PressureSore.js
@@ -203,7 +203,7 @@ export default function PressureSore() {
               className={
                 selected === renderIndex
                   ? "text-blue-500"
-                  : "text-gray-300  hover:text-blue-400"
+                  : "text-secondary-300  hover:text-blue-400"
               }
               fill="currentColor"
               onClick={(_) => setSelected(renderIndex)}
diff --git a/src/Components/DeathReport/DeathReport.tsx b/src/Components/DeathReport/DeathReport.tsx
index e25a59c8732..6ed8652d22d 100644
--- a/src/Components/DeathReport/DeathReport.tsx
+++ b/src/Components/DeathReport/DeathReport.tsx
@@ -6,7 +6,11 @@ import TextFormField from "../Form/FormFields/TextFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import DateFormField from "../Form/FormFields/DateFormField";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
-import { formatDateTime, patientAgeInYears } from "../../Utils/utils";
+import {
+  formatDateTime,
+  humanizeStrings,
+  patientAgeInYears,
+} from "../../Utils/utils";
 import Page from "../Common/components/Page";
 import Form from "../Form/Form";
 import { useTranslation } from "react-i18next";
@@ -89,8 +93,9 @@ export default function PrintDeathReport(props: { id: string }) {
       patientData.medical_history &&
       patientData.medical_history.length
     ) {
-      const medHis = patientData.medical_history;
-      return medHis.map((item: any) => item.disease).join(", ");
+      return humanizeStrings(
+        patientData.medical_history.map((item: any) => item.disease),
+      );
     } else {
       return "None";
     }
diff --git a/src/Components/Diagnosis/ConditionVerificationStatusMenu.tsx b/src/Components/Diagnosis/ConditionVerificationStatusMenu.tsx
index 4f3b102acc9..71f6e2888a0 100644
--- a/src/Components/Diagnosis/ConditionVerificationStatusMenu.tsx
+++ b/src/Components/Diagnosis/ConditionVerificationStatusMenu.tsx
@@ -30,7 +30,8 @@ export default function ConditionVerificationStatusMenu<
       className={classNames(
         props.className,
         props.value && StatusStyle[props.value].colors,
-        props.value && "border !border-gray-400 bg-white hover:bg-gray-300",
+        props.value &&
+          "border !border-secondary-400 bg-white hover:bg-secondary-300",
       )}
       id="condition-verification-status-menu"
       title={props.value ? t(props.value) : props.placeholder ?? t("add_as")}
@@ -49,7 +50,9 @@ export default function ConditionVerificationStatusMenu<
                 icon="l-coronavirus"
                 className={classNames(
                   "hidden text-lg transition-all duration-200 ease-in-out group-hover:rotate-90 group-hover:text-inherit md:block",
-                  props.value === status ? "text-inherit-500" : "text-gray-500",
+                  props.value === status
+                    ? "text-inherit-500"
+                    : "text-secondary-500",
                 )}
               />
             }
@@ -65,7 +68,7 @@ export default function ConditionVerificationStatusMenu<
                   : ""}
                 {t(status)}
               </span>
-              <span className="hidden text-xs text-gray-600 md:block">
+              <span className="hidden text-xs text-secondary-600 md:block">
                 {t(`help_${status}`)}
               </span>
             </div>
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx
index b2bab809813..0391748c929 100644
--- a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx
+++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx
@@ -21,7 +21,7 @@ interface CreateDiagnosesProps {
 export const CreateDiagnosesBuilder = (props: CreateDiagnosesProps) => {
   return (
     <div className={props.className}>
-      <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
+      <div className="flex w-full flex-col items-start rounded-lg border border-secondary-400">
         <ul className="flex w-full flex-col gap-2 p-4">
           {props.value.map((diagnosis, index) => (
             <li key={index} id={`diagnosis-entry-${index}`}>
@@ -45,7 +45,7 @@ export const CreateDiagnosesBuilder = (props: CreateDiagnosesProps) => {
 
         {props.value.length === 0 && <NoDiagnosisAdded />}
 
-        <div className="w-full rounded-b-lg bg-gray-200 px-4 pt-4">
+        <div className="w-full rounded-b-lg bg-secondary-200 px-4 pt-4">
           <AddICD11Diagnosis
             disallowed={props.value.map(
               (obj) => obj.diagnosis_object as ICD11DiagnosisModel,
@@ -85,7 +85,7 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
   const [diagnoses, setDiagnoses] = useState(props.value);
   return (
     <div className={props.className}>
-      <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
+      <div className="flex w-full flex-col items-start rounded-lg border border-secondary-400">
         <ul className="flex w-full flex-col gap-2 p-4">
           {diagnoses.map((diagnosis, index) => (
             <li key={index} id={`diagnosis-entry-${index}`}>
@@ -108,7 +108,7 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
 
         {diagnoses.length === 0 && <NoDiagnosisAdded />}
 
-        <div className="w-full rounded-b-lg bg-gray-200 px-4 pt-4">
+        <div className="w-full rounded-b-lg bg-secondary-200 px-4 pt-4">
           <AddICD11Diagnosis
             disallowed={diagnoses.map(
               (obj) => obj.diagnosis_object as ICD11DiagnosisModel,
@@ -188,7 +188,7 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
 
 const NoDiagnosisAdded = () => {
   return (
-    <div className="flex w-full justify-center gap-2 pb-8 text-center text-gray-500">
+    <div className="flex w-full justify-center gap-2 pb-8 text-center text-secondary-500">
       Atleast one diagnosis must be added
     </div>
   );
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx
index d431890cd17..bbe9ff31b9a 100644
--- a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx
+++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx
@@ -79,8 +79,8 @@ export default function ConsultationDiagnosisEntry(props: Props) {
             object.is_principal
               ? "font-semibold text-primary-500"
               : "font-normal",
-            !isActive && "text-gray-500 line-through",
-            !object.diagnosis_object?.label && "italic text-gray-500",
+            !isActive && "text-secondary-500 line-through",
+            !object.diagnosis_object?.label && "italic text-secondary-500",
           )}
         >
           {object.diagnosis_object?.label ||
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx
index 657451e4538..768b5eac019 100644
--- a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx
+++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx
@@ -25,7 +25,7 @@ const PrincipalDiagnosisSelect = <T extends Option>(props: Props<T>) => {
 
   return (
     <div className={props.className}>
-      <div className="rounded-lg border border-gray-400 bg-gray-200 p-4">
+      <div className="rounded-lg border border-secondary-400 bg-secondary-200 p-4">
         <SelectFormField
           id="principal-diagnosis-select"
           name="principal_diagnosis"
@@ -50,12 +50,12 @@ const PrincipalDiagnosisSelect = <T extends Option>(props: Props<T>) => {
         />
         {diagnosis &&
           (diagnosis.chapter ? (
-            <span className="mt-3 flex w-full flex-wrap justify-center gap-x-1 px-2 text-center text-gray-900">
+            <span className="mt-3 flex w-full flex-wrap justify-center gap-x-1 px-2 text-center text-secondary-900">
               <p>This encounter will be categorised under:</p>
               <p className="font-bold">{diagnosis.chapter}</p>
             </span>
           ) : (
-            <span className="mt-3 flex w-full flex-wrap justify-center gap-x-1 px-2 text-center italic text-gray-700">
+            <span className="mt-3 flex w-full flex-wrap justify-center gap-x-1 px-2 text-center italic text-secondary-700">
               This encounter will not be categorised under any chapter as the
               diagnosis does not fall under a chapter.
             </span>
diff --git a/src/Components/Diagnosis/DiagnosesListAccordion.tsx b/src/Components/Diagnosis/DiagnosesListAccordion.tsx
index ec641d720b5..88222da0570 100644
--- a/src/Components/Diagnosis/DiagnosesListAccordion.tsx
+++ b/src/Components/Diagnosis/DiagnosesListAccordion.tsx
@@ -39,7 +39,7 @@ export default function DiagnosesListAccordion(props: Props) {
       <div className="flex justify-between">
         {!isVisible && (
           <ButtonV2
-            className="text-md w-full p-0 font-semibold text-black hover:bg-gray-200"
+            className="text-md w-full p-0 font-semibold text-black hover:bg-secondary-200"
             ghost
             onClick={() => {
               setIsVisible((prev) => !prev);
@@ -55,7 +55,7 @@ export default function DiagnosesListAccordion(props: Props) {
           isVisible ? "overflow-visible" : "h-0 overflow-hidden"
         }`}
       >
-        <h3 className="my-2 text-lg font-semibold leading-relaxed text-gray-900">
+        <h3 className="my-2 text-lg font-semibold leading-relaxed text-secondary-900">
           Diagnoses
         </h3>
         <div
@@ -70,7 +70,7 @@ export default function DiagnosesListAccordion(props: Props) {
           )}
         </div>
         <ButtonV2
-          className="text-md w-full rounded-lg p-0 text-gray-600 hover:bg-gray-200"
+          className="text-md w-full rounded-lg p-0 text-secondary-600 hover:bg-secondary-200"
           ghost
           onClick={() => {
             setIsVisible(false);
@@ -98,7 +98,8 @@ const DiagnosesOfStatus = ({ diagnoses }: Props) => {
           <li key={diagnosis.id} className="flex items-center gap-2">
             <span
               className={classNames(
-                !diagnosis.diagnosis_object?.label && "italic text-gray-500",
+                !diagnosis.diagnosis_object?.label &&
+                  "italic text-secondary-500",
               )}
             >
               {diagnosis.diagnosis_object?.label ||
diff --git a/src/Components/ExternalResult/ResultItem.tsx b/src/Components/ExternalResult/ResultItem.tsx
index 88f906a220c..44f40e3248d 100644
--- a/src/Components/ExternalResult/ResultItem.tsx
+++ b/src/Components/ExternalResult/ResultItem.tsx
@@ -76,18 +76,18 @@ export default function ResultItem(props: any) {
           </button>
         </div>
         <div className="mt-4 overflow-hidden bg-white shadow sm:rounded-lg">
-          <div className="border-b border-gray-200 px-4 py-5 sm:px-6">
-            <h3 className="text-lg font-medium leading-6 text-gray-900">
+          <div className="border-b border-secondary-200 px-4 py-5 sm:px-6">
+            <h3 className="text-lg font-medium leading-6 text-secondary-900">
               <span id="external-patient-name">{resultItemData.name}</span> -{" "}
               <span>{resultItemData.age}</span>{" "}
               <span>{resultItemData.age_in}</span> |{" "}
               <span>{resultItemData.result}</span>
             </h3>
-            <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
+            <p className="mt-1 max-w-2xl text-sm leading-5 text-secondary-500">
               {t("srf_id")}: {resultItemData.srf_id}
             </p>
             <p
-              className="mt-1 max-w-2xl text-sm leading-5 text-gray-500"
+              className="mt-1 max-w-2xl text-sm leading-5 text-secondary-500"
               id="patient-external-id"
             >
               {t("care_external_results_id")}: {resultItemData.id}
@@ -101,18 +101,18 @@ export default function ResultItem(props: any) {
           <div className="px-4 py-5 sm:p-0">
             <dl>
               <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("gender")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.gender}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("address")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.address}
 
                   {resultItemData.ward_object && (
@@ -128,84 +128,84 @@ export default function ResultItem(props: any) {
                   )}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("mobile_number")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.mobile_number}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   Repeat?
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.is_repeat ? t("yes") : t("no")}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("patient_status")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.patient_status}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("sample_type")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.sample_type}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("test_type")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.test_type}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("sample_collection_date")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.sample_collection_date || "-"}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("result_date")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.result_date || "-"}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("result")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.result}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("source")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.source}
                 </dd>
               </div>
 
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("patient_category")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.patient_category}
                 </dd>
               </div>
diff --git a/src/Components/ExternalResult/ResultList.tsx b/src/Components/ExternalResult/ResultList.tsx
index 0759b47d73a..404d558d117 100644
--- a/src/Components/ExternalResult/ResultList.tsx
+++ b/src/Components/ExternalResult/ResultList.tsx
@@ -114,12 +114,12 @@ export default function ResultList() {
       value && (
         <span
           key={`${key}-${value.id}`}
-          className="inline-flex h-full items-center rounded-full border bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-600"
+          className="inline-flex h-full items-center rounded-full border bg-white px-3 py-1 text-xs font-medium leading-4 text-secondary-600"
         >
           {`${key}: ${value.name}`}
           <CareIcon
             icon="l-times"
-            className="ml-2 cursor-pointer rounded-full text-base hover:bg-gray-500"
+            className="ml-2 cursor-pointer rounded-full text-base hover:bg-secondary-500"
             onClick={() =>
               paramKey === "local_bodies"
                 ? removeLSGFilter(paramKey, value.id)
@@ -141,25 +141,25 @@ export default function ResultList() {
         <tr key={`usr_${result.id}`} className="bg-white">
           <td
             onClick={() => navigate(resultUrl)}
-            className="text-md whitespace-nowrap px-6 py-4 leading-5 text-gray-900"
+            className="text-md whitespace-nowrap px-6 py-4 leading-5 text-secondary-900"
           >
             <div className="flex">
               <a
                 href="#"
                 className="group inline-flex space-x-2 text-sm leading-5"
               >
-                <p className="text-gray-800 transition duration-150 ease-in-out group-hover:text-gray-900">
+                <p className="text-secondary-800 transition duration-150 ease-in-out group-hover:text-secondary-900">
                   {`${result.name}`} - {result.age} {result.age_in}
                 </p>
               </a>
             </div>
           </td>
-          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
-            <span className="font-medium text-gray-900">
+          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-secondary-500">
+            <span className="font-medium text-secondary-900">
               {result.test_type}
             </span>
           </td>
-          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
+          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-secondary-500">
             <span className="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium capitalize leading-4 text-blue-800">
               {result.result}
             </span>
@@ -169,10 +169,10 @@ export default function ResultList() {
               </span>
             ) : null}
           </td>
-          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-800">
+          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-secondary-800">
             {result.result_date || "-"}
           </td>
-          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
+          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-secondary-500">
             <ButtonV2
               variant="primary"
               disabled={
@@ -209,7 +209,7 @@ export default function ResultList() {
       <tr className="bg-white">
         <td colSpan={5}>
           <div className="w-full rounded-lg bg-white p-3">
-            <div className="mt-4 flex w-full  justify-center text-2xl font-bold text-gray-600">
+            <div className="mt-4 flex w-full  justify-center text-2xl font-bold text-secondary-600">
               No Results Found
             </div>
           </div>
@@ -331,27 +331,27 @@ export default function ResultList() {
           className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-t-lg"
           id="external-result-table"
         >
-          <table className="min-w-full divide-y divide-gray-200">
+          <table className="min-w-full divide-y divide-secondary-200">
             <thead>
               <tr>
-                <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+                <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                   Name
                 </th>
-                <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+                <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                   Test Type
                 </th>
-                <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wide text-gray-500">
+                <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wide text-secondary-500">
                   Status
                 </th>
-                <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+                <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                   Result Date
                 </th>
-                <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+                <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                   Create Patient
                 </th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-200 bg-white">
+            <tbody className="divide-y divide-secondary-200 bg-white">
               {manageResults}
             </tbody>
           </table>
diff --git a/src/Components/ExternalResult/ResultUpdate.tsx b/src/Components/ExternalResult/ResultUpdate.tsx
index 27e198a4ee0..09dc41aaca7 100644
--- a/src/Components/ExternalResult/ResultUpdate.tsx
+++ b/src/Components/ExternalResult/ResultUpdate.tsx
@@ -216,14 +216,14 @@ export default function UpdateResult(props: any) {
         backUrl={`/external_results/${id}`}
       >
         <div className="md:p-4">
-          <div className="border-b border-gray-200 px-4 py-5 sm:px-6">
-            <h3 className="text-lg font-medium leading-6 text-gray-900">
+          <div className="border-b border-secondary-200 px-4 py-5 sm:px-6">
+            <h3 className="text-lg font-medium leading-6 text-secondary-900">
               {state.form.name} - {state.form.age} {state.form.age_in}
             </h3>
-            <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
+            <p className="mt-1 max-w-2xl text-sm leading-5 text-secondary-500">
               SRF ID: {state.form.srf_id}
             </p>
-            <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
+            <p className="mt-1 max-w-2xl text-sm leading-5 text-secondary-500">
               Care external results ID: {id}
             </p>
           </div>
diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
index d7a30534b9d..6867857c5c6 100644
--- a/src/Components/Facility/AssetCreate.tsx
+++ b/src/Components/Facility/AssetCreate.tsx
@@ -382,18 +382,18 @@ const AssetCreate = (props: AssetProps) => {
       <Page
         title={assetId ? t("update_asset") : t("create_new_asset")}
         crumbsReplacements={{
-          assets: { style: "text-gray-200 pointer-events-none" },
+          assets: { style: "text-secondary-200 pointer-events-none" },
           [assetId || "????"]: { name },
         }}
         backUrl={`/facility/${facilityId}`}
       >
         <section className="text-center">
           <h1 className="flex flex-col items-center py-10 text-6xl">
-            <div className="flex h-40 w-40 items-center justify-center rounded-full bg-gray-200 p-5">
+            <div className="flex h-40 w-40 items-center justify-center rounded-full bg-secondary-200 p-5">
               <CareIcon icon="l-map-marker" className="text-green-600" />
             </div>
           </h1>
-          <p className="text-gray-600">
+          <p className="text-secondary-600">
             {t("you_need_at_least_a_location_to_create_an_assest")}
           </p>
           <button
@@ -447,10 +447,10 @@ const AssetCreate = (props: AssetProps) => {
         ref={section.ref as LegacyRef<HTMLDivElement>}
       >
         <CareIcon icon={section.icon} className="mr-3 text-lg" />
-        <label className="text-lg font-bold text-gray-900">
+        <label className="text-lg font-bold text-secondary-900">
           {sectionTitle}
         </label>
-        <hr className="ml-6 flex-1 border border-gray-400" />
+        <hr className="ml-6 flex-1 border border-secondary-400" />
       </div>
     );
   };
@@ -464,7 +464,7 @@ const AssetCreate = (props: AssetProps) => {
           [facilityId]: {
             name: locationsQuery.data?.results[0].facility?.name,
           },
-          assets: { style: "text-gray-200 pointer-events-none" },
+          assets: { style: "text-secondary-200 pointer-events-none" },
           [assetId || "????"]: { name },
         }}
         backUrl={
@@ -671,7 +671,7 @@ const AssetCreate = (props: AssetProps) => {
                         />
                       </div>
                       <div
-                        className="ml-1 mt-1 flex h-10 cursor-pointer items-center justify-self-end rounded border border-gray-400 px-4 hover:bg-gray-200"
+                        className="ml-1 mt-1 flex h-10 cursor-pointer items-center justify-self-end rounded border border-secondary-400 px-4 hover:bg-secondary-200"
                         onClick={() => setIsScannerActive(true)}
                       >
                         <CareIcon
diff --git a/src/Components/Facility/BedCapacity.tsx b/src/Components/Facility/BedCapacity.tsx
index 75d52c809df..ff0ec111496 100644
--- a/src/Components/Facility/BedCapacity.tsx
+++ b/src/Components/Facility/BedCapacity.tsx
@@ -209,7 +209,7 @@ export const BedCapacity = (props: BedCapacityProps) => {
           <div role="status">
             <svg
               aria-hidden="true"
-              className="mr-2 h-8 w-8 animate-spin fill-primary text-gray-200 dark:text-gray-600"
+              className="mr-2 h-8 w-8 animate-spin fill-primary text-secondary-200 dark:text-secondary-600"
               viewBox="0 0 100 101"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
diff --git a/src/Components/Facility/BedManagement.tsx b/src/Components/Facility/BedManagement.tsx
index 10624675b5e..b46323b74bb 100644
--- a/src/Components/Facility/BedManagement.tsx
+++ b/src/Components/Facility/BedManagement.tsx
@@ -192,7 +192,7 @@ export const BedManagement = (props: BedManagementProps) => {
     ));
   } else if (data?.results.length === 0) {
     BedList = (
-      <p className="flex w-full justify-center bg-white p-5 text-center text-2xl font-bold text-gray-500">
+      <p className="flex w-full justify-center bg-white p-5 text-center text-2xl font-bold text-secondary-500">
         No beds available in this location
       </p>
     );
diff --git a/src/Components/Facility/BedTypeCard.tsx b/src/Components/Facility/BedTypeCard.tsx
index f2af4bd7a1c..560b4265e24 100644
--- a/src/Components/Facility/BedTypeCard.tsx
+++ b/src/Components/Facility/BedTypeCard.tsx
@@ -79,7 +79,7 @@ export const BedTypeCard: React.FC<BedTypeCardProps> = ({
         <div className="text-md font-medium not-italic leading-[normal] text-[#453C52]">
           {label}
         </div>
-        <span className="flex items-center justify-center rounded py-0 text-sm text-gray-500">
+        <span className="flex items-center justify-center rounded py-0 text-sm text-secondary-500">
           {usedPercent}%
         </span>
       </header>
@@ -87,7 +87,7 @@ export const BedTypeCard: React.FC<BedTypeCardProps> = ({
         {used} / {total}
       </div>
       <div className="mt-3 flex flex-col items-stretch justify-center rounded-md">
-        <div className="flex h-3 w-full rounded-md bg-gray-300">
+        <div className="flex h-3 w-full rounded-md bg-secondary-300">
           <div
             className="flex h-3 shrink-0 flex-col rounded-md bg-blue-600"
             style={{ width: `${usedPercent}%` }}
@@ -100,10 +100,10 @@ export const BedTypeCard: React.FC<BedTypeCardProps> = ({
         </div>
         {facilityId ? (
           <div className="mt-3 flex w-full flex-col items-start justify-between gap-5 sm:flex-row">
-            <div className="mt-4 text-xs italic text-gray-500">
+            <div className="mt-4 text-xs italic text-secondary-500">
               {lastUpdated && (
                 <RecordMeta
-                  className="py-0 text-xs font-normal text-gray-600"
+                  className="py-0 text-xs font-normal text-secondary-600"
                   prefix={"Last updated;"}
                   time={lastUpdated}
                 />
@@ -117,7 +117,7 @@ export const BedTypeCard: React.FC<BedTypeCardProps> = ({
                   setOpen(true);
                 }}
                 authorizeFor={NonReadOnlyUsers}
-                className="tooltip bg-opacity/20 flex aspect-square h-7 w-7 flex-col items-center justify-center rounded bg-gray-300 px-4 py-0"
+                className="tooltip bg-opacity/20 flex aspect-square h-7 w-7 flex-col items-center justify-center rounded bg-secondary-300 px-4 py-0"
                 variant="secondary"
                 ghost
               >
diff --git a/src/Components/Facility/CentralNursingStation.tsx b/src/Components/Facility/CentralNursingStation.tsx
index 2f31b619776..4f30a76bc3b 100644
--- a/src/Components/Facility/CentralNursingStation.tsx
+++ b/src/Components/Facility/CentralNursingStation.tsx
@@ -96,10 +96,10 @@ export default function CentralNursingStation({ facilityId }: Props) {
               leaveTo="opacity-0 translate-y-1"
             >
               <Popover.Panel className="absolute z-30 mt-1 w-80 -translate-x-1/3 px-4 sm:px-0 md:w-96 md:-translate-x-1/2 lg:max-w-3xl">
-                <div className="rounded-lg shadow-lg ring-1 ring-gray-400">
-                  <div className="rounded-t-lg bg-gray-100 px-6 py-4">
+                <div className="rounded-lg shadow-lg ring-1 ring-secondary-400">
+                  <div className="rounded-t-lg bg-secondary-100 px-6 py-4">
                     <div className="flow-root rounded-md">
-                      <span className="block text-sm text-gray-800">
+                      <span className="block text-sm text-secondary-800">
                         <span className="font-bold ">{totalCount}</span> Vitals
                         Monitor present
                       </span>
diff --git a/src/Components/Facility/ConsultationCard.tsx b/src/Components/Facility/ConsultationCard.tsx
index dd74f67f7e7..e5bf28dd803 100644
--- a/src/Components/Facility/ConsultationCard.tsx
+++ b/src/Components/Facility/ConsultationCard.tsx
@@ -144,7 +144,7 @@ export const ConsultationCard = (props: ConsultationProps) => {
         </div>
         <div className="mt-8 flex flex-col">
           {
-            <div className="flex flex-col items-center text-sm text-gray-700 md:flex-row">
+            <div className="flex flex-col items-center text-sm text-secondary-700 md:flex-row">
               <div className=" font-medium text-black">Created : </div>
               <div className=" ml-1 text-black">
                 <RelativeDateUserMention
@@ -155,9 +155,9 @@ export const ConsultationCard = (props: ConsultationProps) => {
               </div>
             </div>
           }
-          <div className="flex flex-col items-center text-sm text-gray-700 md:flex-row">
+          <div className="flex flex-col items-center text-sm text-secondary-700 md:flex-row">
             <div className=" font-medium text-black">Last Modified : </div>
-            <div className=" ml-1 text-gray-700">
+            <div className=" ml-1 text-secondary-700">
               <RelativeDateUserMention
                 tooltipPosition="right"
                 actionDate={itemData.modified_date}
@@ -169,7 +169,7 @@ export const ConsultationCard = (props: ConsultationProps) => {
         <div className="mt-4 flex w-full flex-col justify-between gap-1 md:flex-row">
           <ButtonV2
             id="view_consulation_updates"
-            className="h-auto whitespace-pre-wrap border border-gray-500 bg-white text-black hover:bg-gray-300"
+            className="h-auto whitespace-pre-wrap border border-secondary-500 bg-white text-black hover:bg-secondary-300"
             onClick={() =>
               navigate(
                 `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}`,
@@ -179,7 +179,7 @@ export const ConsultationCard = (props: ConsultationProps) => {
             View Consultation / Consultation Updates
           </ButtonV2>
           <ButtonV2
-            className="h-auto whitespace-pre-wrap border border-gray-500 bg-white text-black hover:bg-gray-300"
+            className="h-auto whitespace-pre-wrap border border-secondary-500 bg-white text-black hover:bg-secondary-300"
             onClick={() =>
               navigate(
                 `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}/files/`,
@@ -190,7 +190,7 @@ export const ConsultationCard = (props: ConsultationProps) => {
           </ButtonV2>
           {isLastConsultation && (
             <ButtonV2
-              className="h-auto whitespace-pre-wrap border border-gray-500 bg-white text-black hover:bg-gray-300"
+              className="h-auto whitespace-pre-wrap border border-secondary-500 bg-white text-black hover:bg-secondary-300"
               onClick={() => {
                 if (itemData.admitted && !itemData.current_bed) {
                   Notification.Error({
diff --git a/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx
index 378f16eb7ed..5d447b79687 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx
@@ -187,7 +187,9 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
                         icon="l-save"
                         className={classNames(
                           "text-lg",
-                          hasMoved ? "text-gray-200" : "text-gray-500",
+                          hasMoved
+                            ? "text-secondary-200"
+                            : "text-secondary-500",
                         )}
                       />
                     </ButtonV2>
diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
index 7a4080f53dd..22194b410b7 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -195,7 +195,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                 }`}
               >
                 <div className="px-4 py-5 sm:p-6" id="discharge-information">
-                  <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                  <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                     Discharge Information
                   </h3>
                   <div className="mt-2 grid gap-4">
@@ -247,7 +247,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                             prescription_type="DISCHARGE"
                           />
                         </div>
-                        <hr className="my-2 border border-gray-300"></hr>
+                        <hr className="my-2 border border-secondary-300"></hr>
                         <div className="overflow-x-auto overflow-y-hidden">
                           <PrescriptionsTable
                             is_prn
@@ -319,7 +319,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             {props.consultationData.history_of_present_illness && (
               <div className="overflow-hidden rounded-lg bg-white shadow">
                 <div className="px-4 py-5 sm:p-6" id="history-presentillness">
-                  <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                  <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                     History of Present Illness
                   </h3>
                   <div className="mt-2">
@@ -335,7 +335,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             {props.consultationData.examination_details && (
               <div className="overflow-hidden rounded-lg bg-white shadow">
                 <div className="px-4 py-5 sm:p-6" id="examination-details">
-                  <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                  <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                     Examination details and Clinical conditions:{" "}
                   </h3>
                   <div className="mt-2">
@@ -350,7 +350,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             {props.consultationData.treatment_plan && (
               <div className="overflow-hidden rounded-lg bg-white shadow">
                 <div className="px-4 py-5 sm:p-6" id="treatment-summary">
-                  <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                  <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                     Treatment Summary
                   </h3>
                   <div className="mt-2">
@@ -365,7 +365,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             {props.consultationData.consultation_notes && (
               <div className="overflow-hidden rounded-lg bg-white shadow">
                 <div className="px-4 py-5 sm:p-6" id="general-instructions">
-                  <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                  <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                     General Instructions
                   </h3>
                   <div className="mt-2">
@@ -382,7 +382,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
               props.consultationData.special_instruction) && (
               <div className="overflow-hidden rounded-lg bg-white shadow">
                 <div className="px-4 py-5 sm:p-6" id="consultation-notes">
-                  <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                  <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                     Notes
                   </h3>
                   <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -414,24 +414,24 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             props.consultationData.procedure.length > 0 && (
               <div className="my-4 rounded-lg bg-white p-4 shadow">
                 <div className="overflow-x-auto" id="consultation-procedure">
-                  <table className="min-w-full divide-y divide-gray-200">
+                  <table className="min-w-full divide-y divide-secondary-200">
                     <thead>
                       <tr>
-                        <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-gray-600">
+                        <th className="bg-secondary-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-secondary-600">
                           Procedure
                         </th>
-                        <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-gray-600">
+                        <th className="bg-secondary-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-secondary-600">
                           Notes
                         </th>
-                        <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-gray-600">
+                        <th className="bg-secondary-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-secondary-600">
                           Repetitive
                         </th>
-                        <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-gray-600">
+                        <th className="bg-secondary-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-secondary-600">
                           Time / Frequency
                         </th>
                       </tr>
                     </thead>
-                    <tbody className="divide-y divide-gray-200 bg-white">
+                    <tbody className="divide-y divide-secondary-200 bg-white">
                       {props.consultationData.procedure?.map(
                         (procedure, index) => (
                           <tr key={index}>
@@ -460,7 +460,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
           {props.consultationData.intubation_start_date && (
             <div className="mt-4 overflow-hidden rounded-lg bg-white shadow">
               <div className="px-4 py-5 sm:p-6">
-                <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                   Date/Size/LL:{" "}
                 </h3>
                 <div className="mt-2 grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -501,7 +501,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
           {props.consultationData.lines?.length > 0 && (
             <div className="mt-4 overflow-hidden rounded-lg bg-white shadow">
               <div className="px-4 py-5 sm:p-6">
-                <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                   Lines and Catheters
                 </h3>
                 <div className="mt-2 grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -536,7 +536,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div className="col-span-1 mt-4 overflow-hidden rounded-lg bg-white shadow">
               <div className="px-4 py-5 sm:p-6">
-                <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                   Body Details
                 </h3>
                 <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -588,7 +588,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
               isAntenatal(props.patientData.last_menstruation_start_date)) ||
               isPostPartum(props.patientData.date_of_delivery)) && (
               <div className="mt-4 rounded-lg bg-white px-4 py-5 shadow sm:p-6">
-                <h3 className="mb-4 text-lg font-semibold leading-relaxed text-gray-900">
+                <h3 className="mb-4 text-lg font-semibold leading-relaxed text-secondary-900">
                   Perinatal Status
                 </h3>
 
diff --git a/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx b/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx
index fd45e3695d0..cf997dca4b3 100644
--- a/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx
+++ b/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx
@@ -18,8 +18,8 @@ export default function EventsList() {
         <>
           <div className="mt-4 flex w-full flex-col gap-4">
             <div className="flex max-h-[85vh] flex-col gap-4 overflow-y-auto overflow-x-hidden px-3">
-              <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
-                <span className="flex justify-center rounded-lg bg-white p-3 text-gray-700  ">
+              <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
+                <span className="flex justify-center rounded-lg bg-white p-3 text-secondary-700  ">
                   {t("no_consultation_updates")}
                 </span>
               </PaginatedList.WhenEmpty>
@@ -54,7 +54,7 @@ export default function EventsList() {
                       if (entries.length === 0) {
                         return (
                           <div className="flex w-full flex-col items-center gap-2 md:flex-row">
-                            <span className="text-xs uppercase text-gray-700">
+                            <span className="text-xs uppercase text-secondary-700">
                               {t("no_changes")}
                             </span>
                           </div>
diff --git a/src/Components/Facility/ConsultationDetails/Events/GenericEvent.tsx b/src/Components/Facility/ConsultationDetails/Events/GenericEvent.tsx
index 543336987b2..414b86fecbe 100644
--- a/src/Components/Facility/ConsultationDetails/Events/GenericEvent.tsx
+++ b/src/Components/Facility/ConsultationDetails/Events/GenericEvent.tsx
@@ -66,10 +66,10 @@ const formatValue = (value: unknown, key?: string): ReactNode => {
 
     return entries.map(([key, value]) => (
       <div className="flex flex-col items-center gap-2 md:flex-row">
-        <span className="text-xs uppercase text-gray-700">
+        <span className="text-xs uppercase text-secondary-700">
           {key.replaceAll(/_/g, " ")}
         </span>
-        <span className="text-sm font-semibold capitalize text-gray-700">
+        <span className="text-sm font-semibold capitalize text-secondary-700">
           {formatValue(value, key)}
         </span>
       </div>
@@ -81,13 +81,13 @@ const formatValue = (value: unknown, key?: string): ReactNode => {
 
 export default function GenericEvent(props: IProps) {
   return (
-    <div className="flex w-full flex-col gap-4 rounded-lg border border-gray-400 p-4 @container">
+    <div className="flex w-full flex-col gap-4 rounded-lg border border-secondary-400 p-4 @container">
       {Object.entries(props.values).map(([key, value]) => (
         <div className="flex w-full flex-col items-start gap-2">
-          <span className="text-xs uppercase text-gray-700">
+          <span className="text-xs uppercase text-secondary-700">
             {key.replaceAll(/_/g, " ")}
           </span>
-          <span className="break-all text-sm font-semibold text-gray-700">
+          <span className="break-all text-sm font-semibold text-secondary-700">
             {formatValue(value, key)}
           </span>
         </div>
diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index e46db70189a..0b0d2c01a50 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -11,7 +11,11 @@ import { lazy, useCallback, useState } from "react";
 import DoctorVideoSlideover from "../DoctorVideoSlideover";
 import { make as Link } from "../../Common/components/Link.bs";
 import { PatientModel } from "../../Patient/models";
-import { formatDateTime, relativeTime } from "../../../Utils/utils";
+import {
+  formatDateTime,
+  humanizeStrings,
+  relativeTime,
+} from "../../../Utils/utils";
 
 import { navigate, useQueryParams } from "raviger";
 import { useDispatch } from "react-redux";
@@ -93,8 +97,9 @@ export const ConsultationDetails = (props: any) => {
 
   const getPatientComorbidities = (patientData: any) => {
     if (patientData?.medical_history?.length) {
-      const medHis = patientData.medical_history;
-      return medHis.map((item: any) => item.disease).join(", ");
+      return humanizeStrings(
+        patientData.medical_history.map((item: any) => item.disease),
+      );
     } else {
       return "None";
     }
@@ -113,15 +118,6 @@ export const ConsultationDetails = (props: any) => {
             ...res.data,
             symptoms_text: "",
           };
-          // if (res.data.symptoms?.length) {
-          //   const symptoms = res.data.symptoms
-          //     .filter((symptom: number) => symptom !== 9)
-          //     .map((symptom: number) => {
-          //       const option = symptomChoices.find((i) => i.id === symptom);
-          //       return option ? option.text.toLowerCase() : symptom;
-          //     });
-          //   data.symptoms_text = symptoms.join(", ");
-          // }
           if (facilityId != data.facility || patientId != data.patient) {
             navigate(
               `/facility/${data.facility}/patient/${data.patient}/consultation/${data?.id}`,
@@ -209,7 +205,7 @@ export const ConsultationDetails = (props: any) => {
   }
 
   const tabButtonClasses = (selected: boolean) =>
-    `capitalize min-w-max-content cursor-pointer border-transparent text-gray-700 hover:text-gray-700 hover:border-gray-300 font-bold whitespace-nowrap ${
+    `capitalize min-w-max-content cursor-pointer border-transparent text-secondary-700 hover:text-secondary-700 hover:border-secondary-300 font-bold whitespace-nowrap ${
       selected === true ? "border-primary-500 text-primary-600 border-b-2" : ""
     }`;
 
@@ -302,7 +298,7 @@ export const ConsultationDetails = (props: any) => {
 
             <div className="flex flex-col justify-between px-4 md:flex-row">
               {consultationData.admitted_to && (
-                <div className="mt-2 rounded-lg border bg-gray-100 p-2 md:mt-0">
+                <div className="mt-2 rounded-lg border bg-secondary-100 p-2 md:mt-0">
                   <div className="border-b-2 py-1">
                     Patient
                     {consultationData.discharge_date
@@ -332,9 +328,9 @@ export const ConsultationDetails = (props: any) => {
               )}
             </div>
             <div className="flex flex-col justify-between gap-2 px-4 py-1 md:flex-row">
-              <div className="font-base flex flex-col text-xs leading-relaxed text-gray-700">
+              <div className="font-base flex flex-col text-xs leading-relaxed text-secondary-700">
                 <div className="flex">
-                  <span className="text-gray-900">Created: </span>&nbsp;
+                  <span className="text-secondary-900">Created: </span>&nbsp;
                   <RelativeDateUserMention
                     actionDate={consultationData.created_date}
                     user={consultationData.created_by}
@@ -343,9 +339,10 @@ export const ConsultationDetails = (props: any) => {
                   />
                 </div>
               </div>
-              <div className="font-base flex flex-col text-xs leading-relaxed text-gray-700 md:text-right">
+              <div className="font-base flex flex-col text-xs leading-relaxed text-secondary-700 md:text-right">
                 <div className="flex">
-                  <span className="text-gray-900">Last Modified: </span>&nbsp;
+                  <span className="text-secondary-900">Last Modified: </span>
+                  &nbsp;
                   <RelativeDateUserMention
                     actionDate={consultationData.modified_date}
                     user={consultationData.last_edited_by}
@@ -366,7 +363,7 @@ export const ConsultationDetails = (props: any) => {
             </div>
           </div>
         )}
-        <div className="mt-4 w-full border-b-2 border-gray-200">
+        <div className="mt-4 w-full border-b-2 border-secondary-200">
           <div className="overflow-x-auto sm:flex sm:items-baseline">
             <div className="mt-4 sm:mt-0">
               <nav
diff --git a/src/Components/Facility/ConsultationDoctorNotes/index.tsx b/src/Components/Facility/ConsultationDoctorNotes/index.tsx
index 522ad168b86..180f838e8eb 100644
--- a/src/Components/Facility/ConsultationDoctorNotes/index.tsx
+++ b/src/Components/Facility/ConsultationDoctorNotes/index.tsx
@@ -120,16 +120,16 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
       }}
       backUrl={`/facility/${facilityId}/patient/${patientId}`}
     >
-      <div className="relative mx-3 my-2 flex grow flex-col overflow-hidden rounded-lg border border-gray-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
-        <div className="absolute inset-x-0 top-0 flex bg-gray-200 text-sm shadow-md">
+      <div className="relative mx-3 my-2 flex grow flex-col overflow-hidden rounded-lg border border-secondary-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
+        <div className="absolute inset-x-0 top-0 flex bg-secondary-200 text-sm shadow-md">
           {Object.values(PATIENT_NOTES_THREADS).map((current) => (
             <button
               key={current}
               className={classNames(
                 "flex flex-1 justify-center border-b-2 py-2",
                 thread === current
-                  ? "border-primary-500 font-bold text-gray-800"
-                  : "border-gray-300 text-gray-800",
+                  ? "border-primary-500 font-bold text-secondary-800"
+                  : "border-secondary-300 text-secondary-800",
               )}
               onClick={() => setThread(current)}
             >
diff --git a/src/Components/Facility/ConsultationForm.tsx b/src/Components/Facility/ConsultationForm.tsx
index 436f8f19e04..a94f496cfca 100644
--- a/src/Components/Facility/ConsultationForm.tsx
+++ b/src/Components/Facility/ConsultationForm.tsx
@@ -819,11 +819,11 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
         ref={section.ref as LegacyRef<HTMLDivElement>}
       >
         <CareIcon icon={section.iconClass} className="mr-3 text-xl" />
-        <label className="text-lg font-bold text-gray-900">
+        <label className="text-lg font-bold text-secondary-900">
           {sectionTitle}
           {required && <span className="text-danger-500">{" *"}</span>}
         </label>
-        <hr className="ml-6 flex-1 border border-gray-400" />
+        <hr className="ml-6 flex-1 border border-secondary-400" />
       </div>
     );
   };
@@ -1101,7 +1101,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                         placeholder="Weight"
                         trailingPadding=" "
                         trailing={
-                          <p className="absolute right-10 whitespace-nowrap text-sm text-gray-700">
+                          <p className="absolute right-10 whitespace-nowrap text-sm text-secondary-700">
                             Weight (kg)
                           </p>
                         }
@@ -1114,7 +1114,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                         placeholder="Height"
                         trailingPadding=" "
                         trailing={
-                          <p className="absolute right-10 whitespace-nowrap text-sm text-gray-700">
+                          <p className="absolute right-10 whitespace-nowrap text-sm text-secondary-700">
                             Height (cm)
                           </p>
                         }
@@ -1315,7 +1315,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                 <div className="flex flex-col gap-4 pb-4">
                   <div className="flex flex-col">
                     {sectionTitle("Diagnosis", true)}
-                    <p className="-mt-4 space-x-1 text-sm text-gray-700">
+                    <p className="-mt-4 space-x-1 text-sm text-secondary-700">
                       <span>Diagnoses as per ICD-11 recommended by WHO</span>
                     </p>
                   </div>
diff --git a/src/Components/Facility/Consultations/BedActivityTimeline.tsx b/src/Components/Facility/Consultations/BedActivityTimeline.tsx
index 679913e34fd..c660296918a 100644
--- a/src/Components/Facility/Consultations/BedActivityTimeline.tsx
+++ b/src/Components/Facility/Consultations/BedActivityTimeline.tsx
@@ -144,7 +144,7 @@ const BedTimelineAsset = ({
       {newlyLinkedAssets.length === 0 &&
         existingAssets.length === 0 &&
         unlinkedAssets.length === 0 && (
-          <p className="text-gray-500">No assets linked</p>
+          <p className="text-secondary-500">No assets linked</p>
         )}
       {newlyLinkedAssets.length > 0 &&
         newlyLinkedAssets.map((newAsset) => (
@@ -162,7 +162,7 @@ const BedTimelineAsset = ({
         ))}
       {unlinkedAssets.length > 0 &&
         unlinkedAssets.map((unlinkedAsset) => (
-          <div key={unlinkedAsset.id} className="flex gap-1 text-gray-500">
+          <div key={unlinkedAsset.id} className="flex gap-1 text-secondary-500">
             <CareIcon icon="l-minus-circle" />
             <span className="line-through">{unlinkedAsset.name}</span>
           </div>
@@ -181,7 +181,7 @@ const BedTimelineNodeTitle = (props: {
   return (
     <TimelineNodeTitle event={event}>
       <div className="flex w-full justify-between gap-2">
-        <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600 md:w-2/3">
+        <p className="flex-auto py-0.5 text-xs leading-5 text-secondary-600 md:w-2/3">
           {titleSuffix}
         </p>
         <div className="md:w-fit">
@@ -204,7 +204,7 @@ const BedTitleSuffix = ({
     <div className="flex flex-col">
       <div className="flex gap-x-2">
         <span>{formatDateTime(bed.start_date).split(";")[0]}</span>
-        <span className="text-gray-500">-</span>
+        <span className="text-secondary-500">-</span>
         <span>{formatDateTime(bed.start_date).split(";")[1]}</span>
       </div>
       <p>
@@ -233,11 +233,11 @@ const BedActivityIButtonPopover = ({
   bed?: CurrentBed;
 }) => {
   return (
-    <Popover className="relative text-sm text-gray-500 md:text-base">
+    <Popover className="relative text-sm text-secondary-500 md:text-base">
       <Popover.Button>
         <CareIcon
           icon="l-info-circle"
-          className="cursor-pointer text-gray-500 hover:text-gray-600"
+          className="cursor-pointer text-secondary-500 hover:text-secondary-600"
         />
       </Popover.Button>
       <Transition
@@ -249,8 +249,8 @@ const BedActivityIButtonPopover = ({
         leaveFrom="opacity-100 translate-y-0"
         leaveTo="opacity-0 translate-y-1"
       >
-        <Popover.Panel className="absolute z-10 -ml-20 mt-2 w-48 -translate-x-1/2 rounded-lg border border-gray-200 bg-gray-100 p-2 shadow">
-          <p className="text-xs text-gray-600">
+        <Popover.Panel className="absolute z-10 -ml-20 mt-2 w-48 -translate-x-1/2 rounded-lg border border-secondary-200 bg-secondary-100 p-2 shadow">
+          <p className="text-xs text-secondary-600">
             updated {relativeTime(bed?.start_date)}
           </p>
         </Popover.Panel>
diff --git a/src/Components/Facility/Consultations/Beds.tsx b/src/Components/Facility/Consultations/Beds.tsx
index c86e32cc560..2e5842680d9 100644
--- a/src/Components/Facility/Consultations/Beds.tsx
+++ b/src/Components/Facility/Consultations/Beds.tsx
@@ -251,8 +251,8 @@ const Beds = (props: BedsProps) => {
             loading={loading}
           />
         ) : (
-          <div className="flex w-full justify-center border-2 border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
-            <span className="flex justify-center rounded-lg bg-white p-3 text-gray-700">
+          <div className="flex w-full justify-center border-2 border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
+            <span className="flex justify-center rounded-lg bg-white p-3 text-secondary-700">
               No beds allocated yet
             </span>
           </div>
diff --git a/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx b/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx
index 03a2c7088e5..ae18e85e0d8 100644
--- a/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx
+++ b/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx
@@ -16,7 +16,7 @@ const DefaultLogUpdateCard = ({ round, ...props }: Props) => {
 
   return (
     <div
-      className="flex w-full flex-col gap-4 rounded-lg border border-gray-400 p-4 @container"
+      className="flex w-full flex-col gap-4 rounded-lg border border-secondary-400 p-4 @container"
       id="dailyround-entry"
     >
       <LogUpdateCardAttribute
diff --git a/src/Components/Facility/Consultations/DailyRounds/LoadingCard.tsx b/src/Components/Facility/Consultations/DailyRounds/LoadingCard.tsx
index 5633a51c2fc..c7139f6bb63 100644
--- a/src/Components/Facility/Consultations/DailyRounds/LoadingCard.tsx
+++ b/src/Components/Facility/Consultations/DailyRounds/LoadingCard.tsx
@@ -1,11 +1,11 @@
 export default function LoadingLogUpdateCard() {
   return (
     <div className="flex w-full animate-pulse flex-col gap-4 rounded-lg border border-green-300 bg-white p-4 shadow shadow-primary-500/20">
-      <div className="h-4 w-full rounded-lg bg-gray-400" />
+      <div className="h-4 w-full rounded-lg bg-secondary-400" />
       <div className="flex flex-col gap-2">
-        <div className="h-4 w-full rounded-lg bg-gray-400 pr-8" />
-        <div className="h-4 w-full rounded-lg bg-gray-400 pr-16" />
-        <div className="h-4 w-full rounded-lg bg-gray-400 pr-12" />
+        <div className="h-4 w-full rounded-lg bg-secondary-400 pr-8" />
+        <div className="h-4 w-full rounded-lg bg-secondary-400 pr-16" />
+        <div className="h-4 w-full rounded-lg bg-secondary-400 pr-12" />
       </div>
     </div>
   );
diff --git a/src/Components/Facility/Consultations/DailyRounds/LogUpdateCardAttribute.tsx b/src/Components/Facility/Consultations/DailyRounds/LogUpdateCardAttribute.tsx
index e147b2ec3a4..a071bc9eef7 100644
--- a/src/Components/Facility/Consultations/DailyRounds/LogUpdateCardAttribute.tsx
+++ b/src/Components/Facility/Consultations/DailyRounds/LogUpdateCardAttribute.tsx
@@ -44,7 +44,7 @@ const LogUpdateCardAttribute = <T extends keyof DailyRoundsModel>({
       return (
         <div className="flex flex-col items-center gap-2 md:flex-row">
           <AttributeLabel attributeKey={attributeKey} />
-          <span className="text-sm font-semibold text-gray-700">
+          <span className="text-sm font-semibold text-secondary-700">
             {(attributeValue as BloodPressure).systolic}/
             {(attributeValue as BloodPressure).diastolic} mmHg
           </span>
@@ -55,7 +55,7 @@ const LogUpdateCardAttribute = <T extends keyof DailyRoundsModel>({
       return (
         <div className="flex flex-col gap-2 md:flex-row">
           <AttributeLabel attributeKey={attributeKey} />
-          <span className="flex flex-wrap gap-x-2 gap-y-1 text-sm text-gray-700">
+          <span className="flex flex-wrap gap-x-2 gap-y-1 text-sm text-secondary-700">
             {(attributeValue as DailyRoundsOutput[]).map((output) => (
               <span className="font-semibold" key={output.name}>
                 {output.name}: {output.quantity}
@@ -69,7 +69,7 @@ const LogUpdateCardAttribute = <T extends keyof DailyRoundsModel>({
       return (
         <div className="flex flex-col items-center gap-2 md:flex-row">
           <AttributeLabel attributeKey={attributeKey} />
-          <span className="text-sm font-semibold text-gray-700">
+          <span className="text-sm font-semibold text-secondary-700">
             {t(attributeValue)}
           </span>
         </div>
@@ -79,7 +79,7 @@ const LogUpdateCardAttribute = <T extends keyof DailyRoundsModel>({
       return (
         <div className="flex flex-col items-center gap-2 md:flex-row">
           <AttributeLabel attributeKey={attributeKey} />
-          <span className="text-sm font-semibold text-gray-700">
+          <span className="text-sm font-semibold text-secondary-700">
             {typeof attributeValue === "object"
               ? JSON.stringify(attributeValue)
               : attributeValue}
@@ -93,7 +93,7 @@ export default LogUpdateCardAttribute;
 
 const AttributeLabel = (props: { attributeKey: string }) => {
   return (
-    <span className="text-xs uppercase text-gray-700">
+    <span className="text-xs uppercase text-secondary-700">
       {props.attributeKey.replaceAll("_", " ")}
     </span>
   );
diff --git a/src/Components/Facility/Consultations/DailyRounds/VirtualNursingAssistantLogUpdateCard.tsx b/src/Components/Facility/Consultations/DailyRounds/VirtualNursingAssistantLogUpdateCard.tsx
index 2b2c752c83f..01c45d996ae 100644
--- a/src/Components/Facility/Consultations/DailyRounds/VirtualNursingAssistantLogUpdateCard.tsx
+++ b/src/Components/Facility/Consultations/DailyRounds/VirtualNursingAssistantLogUpdateCard.tsx
@@ -67,7 +67,7 @@ const VirtualNursingAssistantLogUpdateCard = (props: Props) => {
             />
           ))
         ) : (
-          <span className="text-sm italic text-gray-600">
+          <span className="text-sm italic text-secondary-600">
             {t("no_log_update_delta")}
           </span>
         )}
diff --git a/src/Components/Facility/Consultations/DailyRoundsFilter.tsx b/src/Components/Facility/Consultations/DailyRoundsFilter.tsx
index 829c085a840..be643845d8b 100644
--- a/src/Components/Facility/Consultations/DailyRoundsFilter.tsx
+++ b/src/Components/Facility/Consultations/DailyRoundsFilter.tsx
@@ -59,10 +59,10 @@ export default function DailyRoundsFilter(props: Props) {
           leaveTo="opacity-0 translate-y-1"
         >
           <Popover.Panel className="absolute right-0 z-30 mt-1 w-80 px-4 sm:px-0 md:w-96 lg:max-w-3xl">
-            <div className="rounded-lg shadow-lg ring-1 ring-gray-400">
-              <div className="rounded-t-lg bg-gray-100 px-6 py-4">
+            <div className="rounded-lg shadow-lg ring-1 ring-secondary-400">
+              <div className="rounded-t-lg bg-secondary-100 px-6 py-4">
                 <div className="flow-root rounded-md">
-                  <span className="block text-sm text-gray-800">
+                  <span className="block text-sm text-secondary-800">
                     {t("filter_by")}
                   </span>
                 </div>
diff --git a/src/Components/Facility/Consultations/DailyRoundsList.tsx b/src/Components/Facility/Consultations/DailyRoundsList.tsx
index fcea928620d..216b92410d2 100644
--- a/src/Components/Facility/Consultations/DailyRoundsList.tsx
+++ b/src/Components/Facility/Consultations/DailyRoundsList.tsx
@@ -44,8 +44,8 @@ export default function DailyRoundsList({ consultation }: Props) {
 
           <div className="flex max-h-screen min-h-full w-full flex-col gap-4">
             <div className="flex flex-col gap-4 overflow-y-auto overflow-x-hidden px-3">
-              <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
-                <span className="flex justify-center rounded-lg bg-white p-3 text-gray-700  ">
+              <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
+                <span className="flex justify-center rounded-lg bg-white p-3 text-secondary-700  ">
                   {t("no_consultation_updates")}
                 </span>
               </PaginatedList.WhenEmpty>
diff --git a/src/Components/Facility/Consultations/Feed.tsx b/src/Components/Facility/Consultations/Feed.tsx
index bae950c6e15..317e9d768c7 100644
--- a/src/Components/Facility/Consultations/Feed.tsx
+++ b/src/Components/Facility/Consultations/Feed.tsx
@@ -444,7 +444,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId }) => {
                   getCameraStatus({});
                 }}
                 className={classNames(
-                  "block border border-gray-500 px-4 py-2 first:rounded-l last:rounded-r",
+                  "block border border-secondary-500 px-4 py-2 first:rounded-l last:rounded-r",
                   currentPreset === preset
                     ? "border-primary-500 bg-primary-500 text-white"
                     : "bg-transparent",
@@ -579,7 +579,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId }) => {
         </div>
         {streamStatus === StreamStatus.Playing &&
           calculateVideoLiveDelay() > 3 && (
-            <div className="absolute left-8 top-8 z-10 flex items-center gap-2 rounded-3xl bg-red-400 px-3 py-1.5 text-xs font-semibold text-gray-100">
+            <div className="absolute left-8 top-8 z-10 flex items-center gap-2 rounded-3xl bg-red-400 px-3 py-1.5 text-xs font-semibold text-secondary-100">
               <CareIcon icon="l-wifi-slash" className="h-4 w-4" />
               <span>Slow Network Detected</span>
             </div>
@@ -656,7 +656,7 @@ export const FeedCameraPTZHelpButton = (props: { cameraPTZ: CameraPTZ[] }) => {
   return (
     <button
       key="option.action"
-      className="tooltip rounded text-2xl text-gray-600"
+      className="tooltip rounded text-2xl text-secondary-600"
     >
       <CareIcon icon="l-question-circle" />
 
@@ -673,7 +673,7 @@ export const FeedCameraPTZHelpButton = (props: { cameraPTZ: CameraPTZ[] }) => {
                   const keyElement = (
                     <div
                       key={index}
-                      className="rounded-md border border-gray-500 p-1.5 font-mono shadow-md"
+                      className="rounded-md border border-secondary-500 p-1.5 font-mono shadow-md"
                     >
                       {isArrowKey ? (
                         <CareIcon icon={option.icon as IconName} />
diff --git a/src/Components/Facility/Consultations/LiveFeed.tsx b/src/Components/Facility/Consultations/LiveFeed.tsx
index a2d4eb9ee99..5a2dd118aa7 100644
--- a/src/Components/Facility/Consultations/LiveFeed.tsx
+++ b/src/Components/Facility/Consultations/LiveFeed.tsx
@@ -418,7 +418,7 @@ const LiveFeed = (props: any) => {
 
               {streamStatus === StreamStatus.Playing &&
                 calculateVideoLiveDelay() > 3 && (
-                  <div className="absolute left-8 top-12 z-10 flex items-center gap-2 rounded-3xl bg-red-400 px-3 py-1.5 text-xs font-semibold text-gray-100">
+                  <div className="absolute left-8 top-12 z-10 flex items-center gap-2 rounded-3xl bg-red-400 px-3 py-1.5 text-xs font-semibold text-secondary-100">
                     <CareIcon icon="l-wifi-slash" className="h-4 w-4" />
                     <span>Slow Network Detected</span>
                   </div>
@@ -512,7 +512,7 @@ const LiveFeed = (props: any) => {
           <div className="mx-4 flex max-w-sm flex-col">
             <nav className="flex flex-wrap">
               <button
-                className={`flex-1 p-4  text-center font-bold  text-gray-700 hover:text-gray-800  ${
+                className={`flex-1 p-4  text-center font-bold  text-secondary-700 hover:text-secondary-800  ${
                   showDefaultPresets
                     ? "border-b-2 border-primary-500 text-primary-600"
                     : ""
@@ -524,7 +524,7 @@ const LiveFeed = (props: any) => {
                 Default Presets
               </button>
               <button
-                className={`flex-1 p-4  text-center font-bold  text-gray-700 hover:text-gray-800  ${
+                className={`flex-1 p-4  text-center font-bold  text-secondary-700 hover:text-secondary-800  ${
                   !showDefaultPresets
                     ? "border-b-2 border-primary-500 text-primary-600"
                     : ""
@@ -612,7 +612,7 @@ const LiveFeed = (props: any) => {
               {showDefaultPresets ? (
                 <div className="flex flex-row gap-1">
                   <button
-                    className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
+                    className="flex-1 p-4  text-center font-bold  text-secondary-700 hover:bg-secondary-300 hover:text-secondary-800"
                     disabled={presetsPage < 10}
                     onClick={() => {
                       setPresetsPage(presetsPage - 10);
@@ -621,7 +621,7 @@ const LiveFeed = (props: any) => {
                     <CareIcon icon="l-arrow-left" className="text-2xl" />
                   </button>
                   <button
-                    className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
+                    className="flex-1 p-4  text-center font-bold  text-secondary-700 hover:bg-secondary-300 hover:text-secondary-800"
                     disabled={presetsPage >= presets?.length}
                     onClick={() => {
                       setPresetsPage(presetsPage + 10);
@@ -633,7 +633,7 @@ const LiveFeed = (props: any) => {
               ) : (
                 <div className="flex flex-row gap-1">
                   <button
-                    className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
+                    className="flex-1 p-4  text-center font-bold  text-secondary-700 hover:bg-secondary-300 hover:text-secondary-800"
                     disabled={page.offset === 0}
                     onClick={() => {
                       handlePagination(page.offset - page.limit);
@@ -642,7 +642,7 @@ const LiveFeed = (props: any) => {
                     <CareIcon icon="l-arrow-left" className="text-2xl" />
                   </button>
                   <button
-                    className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
+                    className="flex-1 p-4  text-center font-bold  text-secondary-700 hover:bg-secondary-300 hover:text-secondary-800"
                     disabled={page.offset + page.limit >= page.count}
                     onClick={() => {
                       handlePagination(page.offset + page.limit);
diff --git a/src/Components/Facility/Consultations/Mews.tsx b/src/Components/Facility/Consultations/Mews.tsx
index 4925d2ae998..9773e9ce7a8 100644
--- a/src/Components/Facility/Consultations/Mews.tsx
+++ b/src/Components/Facility/Consultations/Mews.tsx
@@ -1,5 +1,5 @@
 import { DailyRoundsModel } from "../../Patient/models";
-import { formatDateTime } from "../../../Utils/utils";
+import { formatDateTime, humanizeStrings } from "../../../Utils/utils";
 
 const getRespScore = (value?: number) => {
   if (typeof value !== "number") return;
@@ -60,7 +60,7 @@ const getLOCRange = (value?: DailyRoundsModel["consciousness_level"]) => {
 };
 
 const getBorderColor = (score: number) => {
-  if (score === undefined) return "border-gray-700";
+  if (score === undefined) return "border-secondary-700";
   if (score <= 2) return "border-primary-500";
   if (score <= 3) return "border-yellow-300";
   if (score <= 5) return "border-warning-600";
@@ -76,9 +76,13 @@ export const Mews = ({ dailyRound }: { dailyRound: DailyRoundsModel }) => {
             <div className="border-grey-400 flex h-7 w-7 items-center justify-center rounded-full border-2">
               <span className="text-sm font-semibold">-</span>
             </div>
-            <span className="mt-1 text-xs font-medium text-gray-700">MEWS</span>
+            <span className="mt-1 text-xs font-medium text-secondary-700">
+              MEWS
+            </span>
             <div className="tooltip-text tooltip-bottom w-48 -translate-x-1/2 translate-y-3 whitespace-pre-wrap text-xs font-medium lg:w-64">
-              <span className="font-bold">{(data as string[]).join(", ")}</span>{" "}
+              <span className="font-bold">
+                {humanizeStrings(data as string[])}
+              </span>{" "}
               data is missing from the last log update.
               <br /> Last Updated: {formatDateTime(dailyRound.modified_date)}
             </div>
@@ -97,7 +101,9 @@ export const Mews = ({ dailyRound }: { dailyRound: DailyRoundsModel }) => {
             >
               <span className="text-sm font-semibold">{data}</span>
             </div>
-            <span className="mt-1 text-xs font-medium text-gray-700">MEWS</span>
+            <span className="mt-1 text-xs font-medium text-secondary-700">
+              MEWS
+            </span>
             <div className="tooltip-text tooltip-bottom w-48 -translate-x-1/2 translate-y-3 whitespace-pre-wrap text-xs font-medium lg:w-64">
               <p>
                 Resp. Rate: <span className="font-bold">{dailyRound.resp}</span>
diff --git a/src/Components/Facility/Consultations/NeurologicalTables.tsx b/src/Components/Facility/Consultations/NeurologicalTables.tsx
index c144c87e74e..51d977ad32d 100644
--- a/src/Components/Facility/Consultations/NeurologicalTables.tsx
+++ b/src/Components/Facility/Consultations/NeurologicalTables.tsx
@@ -17,15 +17,15 @@ const DataTable = (props: any) => {
   return (
     <div>
       <div className="text-xl font-semibold">{title}</div>
-      <div className="w-max-content mb-4 flex max-w-full flex-row divide-y divide-gray-200 overflow-hidden shadow sm:rounded-lg">
+      <div className="w-max-content mb-4 flex max-w-full flex-row divide-y divide-secondary-200 overflow-hidden shadow sm:rounded-lg">
         <div className="flex flex-col justify-between">
-          <div className="bg-gray-50 px-2 py-6 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-700">
+          <div className="bg-secondary-50 px-2 py-6 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-700">
             Time
           </div>
-          <div className="bg-gray-50 px-2 py-5 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-700">
+          <div className="bg-secondary-50 px-2 py-5 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-700">
             Left
           </div>
-          <div className="bg-gray-50 px-2 py-5 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-700">
+          <div className="bg-secondary-50 px-2 py-5 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-700">
             Right
           </div>
         </div>
@@ -34,15 +34,15 @@ const DataTable = (props: any) => {
             return (
               <div
                 key={`${title}_${i}`}
-                className="flex flex-col divide-x divide-gray-200"
+                className="flex flex-col divide-x divide-secondary-200"
               >
-                <div className="w-20 bg-gray-50 px-2 py-3 text-center text-xs font-medium leading-4 text-gray-900">
+                <div className="bg-secondary-50 w-20 px-2 py-3 text-center text-xs font-medium leading-4 text-secondary-900">
                   {x.date}
                 </div>
-                <div className="whitespace-nowrap bg-white px-2 py-4 text-center text-sm leading-5 text-gray-900">
+                <div className="whitespace-nowrap bg-white px-2 py-4 text-center text-sm leading-5 text-secondary-900">
                   {x.left}
                 </div>
-                <div className="whitespace-nowrap bg-white px-2 py-4 text-center text-sm leading-5 text-gray-900">
+                <div className="whitespace-nowrap bg-white px-2 py-4 text-center text-sm leading-5 text-secondary-900">
                   {x.right}
                 </div>
               </div>
@@ -65,19 +65,19 @@ const DataDescription = (props: any) => {
         {data.length ? (
           data.map((x: any, i: any) => (
             <div key={`${title}_${i}`} className="mb-2">
-              <div className="text-sm font-bold text-gray-800">{`- ${x.date}`}</div>
-              <div className="pl-2 text-gray-800">
+              <div className="text-sm font-bold text-secondary-800">{`- ${x.date}`}</div>
+              <div className="pl-2 text-secondary-800">
                 <span className="font-semibold">Left: </span>
                 {x.left}
               </div>
-              <div className="pl-2 text-gray-800">
+              <div className="pl-2 text-secondary-800">
                 <span className="font-semibold">Right: </span>
                 {x.right}
               </div>
             </div>
           ))
         ) : (
-          <div className="text-center text-sm font-semibold text-gray-700">
+          <div className="text-center text-sm font-semibold text-secondary-700">
             No Data Available!
           </div>
         )}
@@ -289,17 +289,17 @@ export const NeurologicalTable = (props: any) => {
     <div className="mt-2">
       <div className="mb-6">
         <div className="text-xl font-semibold">Level Of Consciousness</div>
-        <div className="w-max-content my-4 flex max-w-full flex-row divide-y divide-gray-200 overflow-hidden shadow sm:rounded-lg">
+        <div className="w-max-content my-4 flex max-w-full flex-row divide-y divide-secondary-200 overflow-hidden shadow sm:rounded-lg">
           <div className="flex flex-row overflow-x-auto">
             {locData.map((x: any, i: any) => (
               <div
                 key={`loc_${i}`}
-                className="min-w-max-content flex  flex-col  divide-x divide-gray-200"
+                className="min-w-max-content flex  flex-col  divide-x divide-secondary-200"
               >
-                <div className="border-r bg-gray-50 px-2 py-3 text-center text-xs font-medium leading-4 text-gray-700">
+                <div className="bg-secondary-50 border-r px-2 py-3 text-center text-xs font-medium leading-4 text-secondary-700">
                   {x.date}
                 </div>
-                <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-gray-700">
+                <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-secondary-700">
                   {x.loc}
                 </div>
               </div>
@@ -315,11 +315,11 @@ export const NeurologicalTable = (props: any) => {
               locDescription.map((x: any, i: any) => (
                 <div key={`loc_desc_${i}`} className="mb-2">
                   <div className="text-sm font-semibold">{`- ${x.date}`}</div>
-                  <div className="pl-2 text-gray-800">{x.loc}</div>
+                  <div className="pl-2 text-secondary-800">{x.loc}</div>
                 </div>
               ))
             ) : (
-              <div className="text-center text-sm font-semibold text-gray-800">
+              <div className="text-center text-sm font-semibold text-secondary-800">
                 No Data Available!
               </div>
             )}
@@ -348,21 +348,21 @@ export const NeurologicalTable = (props: any) => {
       <div className="mt-4">
         <div className="text-xl font-semibold">Glasgow Coma Scale</div>
         <div className="mb-6 mt-2">
-          <div className="w-max-content mb-4 flex max-w-full flex-row divide-y divide-gray-200 overflow-hidden shadow sm:rounded-lg">
+          <div className="w-max-content mb-4 flex max-w-full flex-row divide-y divide-secondary-200 overflow-hidden shadow sm:rounded-lg">
             <div className="flex flex-col ">
-              <div className="bg-gray-50 px-2 py-7 text-center text-sm font-medium uppercase leading-4 tracking-wider text-gray-700">
+              <div className="bg-secondary-50 px-2 py-7 text-center text-sm font-medium uppercase leading-4 tracking-wider text-secondary-700">
                 Time
               </div>
-              <div className="bg-gray-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-gray-700">
+              <div className="bg-secondary-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-secondary-700">
                 Eye
               </div>
-              <div className="bg-gray-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-gray-700">
+              <div className="bg-secondary-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-secondary-700">
                 Verbal
               </div>
-              <div className="bg-gray-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-gray-700">
+              <div className="bg-secondary-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-secondary-700">
                 Motor
               </div>
-              <div className="bg-gray-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-gray-700">
+              <div className="bg-secondary-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-secondary-700">
                 Total
               </div>
             </div>
@@ -371,21 +371,21 @@ export const NeurologicalTable = (props: any) => {
                 return (
                   <div
                     key={`glascow_${i}`}
-                    className="flex flex-col divide-x divide-gray-200"
+                    className="flex flex-col divide-x divide-secondary-200"
                   >
-                    <div className="w-20 bg-gray-50 px-2 py-3 text-center text-xs font-medium leading-4 text-gray-800">
+                    <div className="bg-secondary-50 w-20 px-2 py-3 text-center text-xs font-medium leading-4 text-secondary-800">
                       {x.date}
                     </div>
-                    <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-gray-800">
+                    <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-secondary-800">
                       {x.eye}
                     </div>
-                    <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-gray-800">
+                    <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-secondary-800">
                       {x.verbal}
                     </div>
-                    <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-gray-800">
+                    <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-secondary-800">
                       {x.motor}
                     </div>
-                    <div className="whitespace-nowrap border-t-2 border-gray-500 bg-white px-6 py-4 text-center text-sm font-semibold leading-5 text-gray-800">
+                    <div className="whitespace-nowrap border-t-2 border-secondary-500 bg-white px-6 py-4 text-center text-sm font-semibold leading-5 text-secondary-800">
                       {x.total}
                     </div>
                   </div>
@@ -405,7 +405,7 @@ export const NeurologicalTable = (props: any) => {
                 {EYE_OPEN_SCALE.map((x: any) => (
                   <div
                     key={`eye_${x.value}`}
-                    className="pl-2 leading-relaxed text-gray-800"
+                    className="pl-2 leading-relaxed text-secondary-800"
                   >
                     <span className="text-sm font-semibold">{x.value}</span> -{" "}
                     {x.text}
@@ -419,7 +419,7 @@ export const NeurologicalTable = (props: any) => {
                 {VERBAL_RESPONSE_SCALE.map((x: any) => (
                   <div
                     key={`verbal_${x.value}`}
-                    className="pl-2 leading-relaxed text-gray-800"
+                    className="pl-2 leading-relaxed text-secondary-800"
                   >
                     <span className="text-sm font-semibold">{x.value}</span> -{" "}
                     {x.text}
@@ -433,7 +433,7 @@ export const NeurologicalTable = (props: any) => {
                 {MOTOR_RESPONSE_SCALE.map((x: any) => (
                   <div
                     key={`motor_${x.value}`}
-                    className="pl-2 leading-relaxed text-gray-800"
+                    className="pl-2 leading-relaxed text-secondary-800"
                   >
                     <span className="text-sm font-semibold">{x.value}</span> -{" "}
                     {x.text}
diff --git a/src/Components/Facility/Consultations/NursingPlot.tsx b/src/Components/Facility/Consultations/NursingPlot.tsx
index 5f798e7ea16..24e3109e078 100644
--- a/src/Components/Facility/Consultations/NursingPlot.tsx
+++ b/src/Components/Facility/Consultations/NursingPlot.tsx
@@ -81,7 +81,7 @@ export const NursingPlot = (props: any) => {
           <div className="flex flex-row overflow-x-scroll">
             {areFieldsEmpty() && (
               <div className="mt-1 w-full rounded-lg border bg-white p-4 shadow">
-                <div className="flex items-center justify-center text-2xl font-bold text-gray-500">
+                <div className="flex items-center justify-center text-2xl font-bold text-secondary-500">
                   No data available
                 </div>
               </div>
@@ -91,7 +91,7 @@ export const NursingPlot = (props: any) => {
                 filterEmpty(f) && (
                   <div key={f.desc} className="m-2 w-3/4">
                     <div className="sticky top-0 z-10  rounded pt-2">
-                      <div className="mx-2 flex items-center justify-between rounded border bg-gray-200 p-4">
+                      <div className="mx-2 flex items-center justify-between rounded border bg-secondary-200 p-4">
                         <h3 className="flex h-8 items-center text-sm">
                           {f.desc}
                         </h3>
diff --git a/src/Components/Facility/Consultations/NutritionPlots.tsx b/src/Components/Facility/Consultations/NutritionPlots.tsx
index 87799d5eafb..2dd3621dc24 100644
--- a/src/Components/Facility/Consultations/NutritionPlots.tsx
+++ b/src/Components/Facility/Consultations/NutritionPlots.tsx
@@ -175,9 +175,9 @@ export const NutritionPlots = (props: any) => {
 
   return (
     <div>
-      <section className="my-4 h-full space-y-2 rounded-lg bg-white p-4 text-gray-100 shadow">
+      <section className="my-4 h-full space-y-2 rounded-lg bg-white p-4 text-secondary-100 shadow">
         <div
-          className="flex justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-gray-900"
+          className="flex justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-secondary-900"
           onClick={() => setShowIO(!showIO)}
         >
           <div> IO Balance Plots</div>
@@ -217,9 +217,9 @@ export const NutritionPlots = (props: any) => {
           </div>
         </div>
       </section>
-      <section className="my-4 h-full space-y-2 rounded-lg bg-white p-4 text-gray-100 shadow">
+      <section className="my-4 h-full space-y-2 rounded-lg bg-white p-4 text-secondary-100 shadow">
         <div
-          className="flex justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-gray-900"
+          className="flex justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-secondary-900"
           onClick={() => setShowIntake(!showIntake)}
         >
           <div>Intake</div>
@@ -245,7 +245,7 @@ export const NutritionPlots = (props: any) => {
               yData={Object.values(infusionsData)}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4 text-gray-900">
+          <div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
             <h3 className="text-lg">Infusions:</h3>
             <div className="h-72 overflow-y-auto pb-2">
               {Object.entries(results).map((obj: any) => {
@@ -273,7 +273,7 @@ export const NutritionPlots = (props: any) => {
               yData={Object.values(IVFluidsData)}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4 text-gray-900">
+          <div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
             <h3 className="text-lg">IV Fluids:</h3>
             <div className="h-72 overflow-y-auto pb-2">
               {Object.entries(results).map((obj: any) => {
@@ -301,7 +301,7 @@ export const NutritionPlots = (props: any) => {
               yData={Object.values(FeedsData)}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4 text-gray-900">
+          <div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
             <h3 className="text-lg">Feeds:</h3>
             <div className="h-72 overflow-y-auto pb-2">
               {Object.entries(results).map((obj: any) => {
@@ -324,9 +324,9 @@ export const NutritionPlots = (props: any) => {
           </div>
         </div>
       </section>
-      <section className="my-4 h-full space-y-2 rounded-lg bg-white p-4 text-gray-100 shadow">
+      <section className="my-4 h-full space-y-2 rounded-lg bg-white p-4 text-secondary-100 shadow">
         <div
-          className="flex justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-gray-900"
+          className="flex justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-secondary-900"
           onClick={() => setShowOutput(!showOutput)}
         >
           <div> Output</div>
@@ -356,7 +356,7 @@ export const NutritionPlots = (props: any) => {
               yData={Object.values(OutputData)}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4 text-gray-900">
+          <div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
             <h3 className="text-lg">Output:</h3>
             <div className="h-72 overflow-y-auto pb-2">
               {Object.entries(results).map((obj: any) => {
diff --git a/src/Components/Facility/Consultations/PainDiagrams.tsx b/src/Components/Facility/Consultations/PainDiagrams.tsx
index 4ac6ba1f21b..45f63284c42 100644
--- a/src/Components/Facility/Consultations/PainDiagrams.tsx
+++ b/src/Components/Facility/Consultations/PainDiagrams.tsx
@@ -79,7 +79,7 @@ export const PainDiagrams = (props: any) => {
         <div className="p-2">Choose Date and Time</div>
         <select
           title="date"
-          className="relative rounded border-gray-200 bg-white py-2 pl-3 pr-8 text-slate-600 shadow outline-none focus:border-gray-300  focus:outline-none focus:ring-1 focus:ring-gray-300"
+          className="relative rounded border-secondary-200 bg-white py-2 pl-3 pr-8 text-slate-600 shadow outline-none focus:border-secondary-300  focus:outline-none focus:ring-1 focus:ring-secondary-300"
           onChange={(e) => {
             setSelectedDateData(results, e.target.value);
           }}
@@ -97,7 +97,7 @@ export const PainDiagrams = (props: any) => {
       <div>
         <select
           title="date"
-          className="border-2 border-gray-400 py-2 pl-3 pr-8"
+          className="border-2 border-secondary-400 py-2 pl-3 pr-8"
           disabled={true}
         >
           <option>No Data Found</option>
diff --git a/src/Components/Facility/Consultations/PressureSoreDiagrams.tsx b/src/Components/Facility/Consultations/PressureSoreDiagrams.tsx
index f478f3f3df1..ba533be0616 100644
--- a/src/Components/Facility/Consultations/PressureSoreDiagrams.tsx
+++ b/src/Components/Facility/Consultations/PressureSoreDiagrams.tsx
@@ -89,7 +89,7 @@ export const PressureSoreDiagrams = (props: any) => {
         <div className="p-2">Choose Date and Time</div>
         <select
           title="date"
-          className="relative rounded border-gray-200 bg-white py-2 pl-3 pr-8 text-slate-600 shadow outline-none focus:border-gray-300  focus:outline-none focus:ring-1 focus:ring-gray-300"
+          className="relative rounded border-secondary-200 bg-white py-2 pl-3 pr-8 text-slate-600 shadow outline-none focus:border-secondary-300  focus:outline-none focus:ring-1 focus:ring-secondary-300"
           onChange={(e) => {
             setSelectedDateData(results, e.target.value);
           }}
@@ -107,7 +107,7 @@ export const PressureSoreDiagrams = (props: any) => {
       <div>
         <select
           title="date"
-          className="border-2 border-gray-400 py-2 pl-3 pr-8"
+          className="border-2 border-secondary-400 py-2 pl-3 pr-8"
           disabled={true}
         >
           <option>No Data Found</option>
diff --git a/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx b/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx
index fb600333d25..b84647c2d7a 100644
--- a/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx
+++ b/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx
@@ -215,7 +215,7 @@ export const PrimaryParametersPlot = ({
                       <div className="relative pb-8">
                         {rhythmIdx !== obj[1].length ? (
                           <span
-                            className="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200"
+                            className="absolute left-4 top-4 -ml-px h-full w-0.5 bg-secondary-200"
                             aria-hidden="true"
                           />
                         ) : null}
@@ -258,7 +258,7 @@ export const PrimaryParametersPlot = ({
                                 <span>{rhythmDetails.rhythm_detail}</span>
                               </p>
                             </div>
-                            <div className="whitespace-nowrap text-right text-sm text-gray-500">
+                            <div className="whitespace-nowrap text-right text-sm text-secondary-500">
                               <p>
                                 {rhythmDetails.time}, {obj[0]}
                               </p>
diff --git a/src/Components/Facility/Consultations/components/BinaryChronologicalChart.tsx b/src/Components/Facility/Consultations/components/BinaryChronologicalChart.tsx
index af8469bd18d..79d1d4c0af1 100644
--- a/src/Components/Facility/Consultations/components/BinaryChronologicalChart.tsx
+++ b/src/Components/Facility/Consultations/components/BinaryChronologicalChart.tsx
@@ -22,7 +22,7 @@ export default function BinaryChronologicalChart(props: {
             <li key={i}>
               <div className="relative pb-8">
                 <span
-                  className="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200"
+                  className="absolute left-4 top-4 -ml-px h-full w-0.5 bg-secondary-200"
                   aria-hidden="true"
                 />
                 <div className="relative flex space-x-3">
@@ -52,7 +52,7 @@ export default function BinaryChronologicalChart(props: {
                         <span>{entry.notes}</span>
                       </p>
                     </div>
-                    <div className="whitespace-nowrap text-right text-sm text-gray-500">
+                    <div className="whitespace-nowrap text-right text-sm text-secondary-500">
                       <p>{formatDateTime(entry.timestamp)}</p>
                     </div>
                   </div>
diff --git a/src/Components/Facility/CoverImageEditModal.tsx b/src/Components/Facility/CoverImageEditModal.tsx
index 3761a9dc140..cbf976aafe4 100644
--- a/src/Components/Facility/CoverImageEditModal.tsx
+++ b/src/Components/Facility/CoverImageEditModal.tsx
@@ -195,7 +195,7 @@ const CoverImageEditModal = ({
                     className="h-full w-full object-cover"
                   />
                 </div>
-                <p className="text-center font-medium text-gray-700">
+                <p className="text-center font-medium text-secondary-700">
                   {commonHint}
                 </p>
               </>
@@ -209,7 +209,7 @@ const CoverImageEditModal = ({
                 } ${
                   dragProps.fileDropError !== ""
                     ? "border-red-500"
-                    : "border-gray-500"
+                    : "border-secondary-500"
                 }`}
               >
                 <svg
@@ -222,7 +222,7 @@ const CoverImageEditModal = ({
                   } ${
                     dragProps.fileDropError !== ""
                       ? "text-red-500"
-                      : "text-gray-600"
+                      : "text-secondary-600"
                   }`}
                 >
                   <path d="M28 8H12a4 4 0 0 0-4 4v20m32-12v8m0 0v8a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4v-4m32-4-3.172-3.172a4 4 0 0 0-5.656 0L28 28M8 32l9.172-9.172a4 4 0 0 1 5.656 0L28 28m0 0 4 4m4-24h8m-4-4v8m-12 4h.02" />
@@ -233,14 +233,14 @@ const CoverImageEditModal = ({
                   } ${
                     dragProps.fileDropError !== ""
                       ? "text-red-500"
-                      : "text-gray-700"
+                      : "text-secondary-700"
                   } text-center`}
                 >
                   {dragProps.fileDropError !== ""
                     ? dragProps.fileDropError
                     : `${t("drag_drop_image_to_upload")}`}
                 </p>
-                <p className="mt-4 text-center font-medium text-gray-700">
+                <p className="mt-4 text-center font-medium text-secondary-700">
                   {t("no_cover_photo_uploaded_for_this_facility")}. {commonHint}
                 </p>
               </div>
diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
index 0ed17210bf8..a85439bfa55 100644
--- a/src/Components/Facility/DischargeModal.tsx
+++ b/src/Components/Facility/DischargeModal.tsx
@@ -386,7 +386,7 @@ const DischargeModal = ({
       )}
 
       <div className="py-4">
-        <span className="text-gray-700">
+        <span className="text-secondary-700">
           {t("encounter_duration_confirmation")}{" "}
           <strong>{encounterDuration}</strong>.
         </span>
diff --git a/src/Components/Facility/DischargeSummaryModal.tsx b/src/Components/Facility/DischargeSummaryModal.tsx
index a14d2354801..01020b25ad3 100644
--- a/src/Components/Facility/DischargeSummaryModal.tsx
+++ b/src/Components/Facility/DischargeSummaryModal.tsx
@@ -146,7 +146,7 @@ export default function DischargeSummaryModal(props: Props) {
     >
       <div className="flex flex-col">
         <div className="mb-6 flex flex-col gap-1">
-          <span className="text-sm text-gray-800">
+          <span className="text-sm text-secondary-800">
             {t("email_discharge_summary_description")}
           </span>
           <span className="text-sm text-warning-600">
diff --git a/src/Components/Facility/DischargedPatientsList.tsx b/src/Components/Facility/DischargedPatientsList.tsx
index 6878613d4cd..e1f18d778e4 100644
--- a/src/Components/Facility/DischargedPatientsList.tsx
+++ b/src/Components/Facility/DischargedPatientsList.tsx
@@ -15,7 +15,7 @@ import {
 } from "../../Common/constants";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
-import { formatPatientAge } from "../../Utils/utils";
+import { formatPatientAge, humanizeStrings } from "../../Utils/utils";
 import { useTranslation } from "react-i18next";
 import SwitchTabs from "../Common/components/SwitchTabs";
 import SortDropdownMenu from "../Common/SortDropdown";
@@ -360,7 +360,7 @@ const DischargedPatientsList = ({
               value(
                 DIAGNOSES_FILTER_LABELS[key],
                 key,
-                getDiagnosisFilterValue(key).join(", "),
+                humanizeStrings(getDiagnosisFilterValue(key)),
               ),
             ),
             badge("Declared Status", "is_declared_positive"),
@@ -402,7 +402,7 @@ const DischargedPatientsList = ({
       >
         {() => (
           <div className="flex flex-col gap-4">
-            <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
+            <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
               <span>{t("discharged_patients_empty")}</span>
             </PaginatedList.WhenEmpty>
 
@@ -442,19 +442,22 @@ export default DischargedPatientsList;
 const PatientListItem = ({ patient }: { patient: PatientModel }) => {
   return (
     <div className="flex rounded-lg border bg-white p-5 shadow hover:ring-1 hover:ring-primary-400">
-      <div className="flex rounded border border-gray-300 bg-gray-50 p-6">
-        <CareIcon icon="l-user-injured" className="text-3xl text-gray-800" />
+      <div className="bg-secondary-50 flex rounded border border-secondary-300 p-6">
+        <CareIcon
+          icon="l-user-injured"
+          className="text-3xl text-secondary-800"
+        />
       </div>
       <div className="ml-5 flex flex-col">
         <h2 className="text-lg font-bold capitalize text-black">
           {patient.name}
         </h2>
-        <span className="text-sm font-medium text-gray-800">
+        <span className="text-sm font-medium text-secondary-800">
           {GENDER_TYPES.find((g) => g.id === patient.gender)?.text} -{" "}
           {formatPatientAge(patient)}
         </span>
         {patient.last_consultation?.patient_no && (
-          <span className="text-sm font-medium text-gray-800">
+          <span className="text-sm font-medium text-secondary-800">
             {patient.last_consultation?.suggestion === "A"
               ? "IP No: "
               : "OP No: "}
@@ -463,7 +466,7 @@ const PatientListItem = ({ patient }: { patient: PatientModel }) => {
         )}
         <div className="flex-1" />
         <RecordMeta
-          className="text-end text-xs text-gray-600"
+          className="text-end text-xs text-secondary-600"
           prefix="last updated"
           time={patient.modified_date}
         />
diff --git a/src/Components/Facility/DoctorNote.tsx b/src/Components/Facility/DoctorNote.tsx
index b70ccfdf516..91c361cc82e 100644
--- a/src/Components/Facility/DoctorNote.tsx
+++ b/src/Components/Facility/DoctorNote.tsx
@@ -42,7 +42,7 @@ const DoctorNote = (props: DoctorNoteProps) => {
           ))}
         </InfiniteScroll>
       ) : (
-        <div className="mt-2 flex h-full items-center justify-center text-2xl font-bold text-gray-500">
+        <div className="mt-2 flex h-full items-center justify-center text-2xl font-bold text-secondary-500">
           No Notes Found
         </div>
       )}
diff --git a/src/Components/Facility/DoctorVideoSlideover.tsx b/src/Components/Facility/DoctorVideoSlideover.tsx
index 140de6985c1..aacf441be6f 100644
--- a/src/Components/Facility/DoctorVideoSlideover.tsx
+++ b/src/Components/Facility/DoctorVideoSlideover.tsx
@@ -73,7 +73,7 @@ export default function DoctorVideoSlideover(props: {
       dialogClass="md:w-[450px]"
     >
       {/* Title and close button */}
-      <p className="-mt-3 pb-4 text-sm text-gray-600">
+      <p className="-mt-3 pb-4 text-sm text-secondary-600">
         Select a doctor to connect via video
       </p>
       <div className="flex justify-center" id="doctor-connect-filter-tabs">
@@ -130,12 +130,12 @@ const UserGroupList = (props: {
           <span className="whitespace-nowrap text-lg font-bold">
             {UserGroups[props.group]}
           </span>
-          <div className="mx-6 h-1 w-full bg-gray-300" />
+          <div className="mx-6 h-1 w-full bg-secondary-300" />
         </div>
       )}
 
       {!users.length && (
-        <span className="flex w-full justify-center py-2 font-bold text-gray-500">
+        <span className="flex w-full justify-center py-2 font-bold text-secondary-500">
           No users in this category
         </span>
       )}
@@ -233,8 +233,8 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
       className={classNames(
         "group cursor-default select-none rounded-xl p-3",
         user.alt_phone_number
-          ? "cursor-pointer border border-gray-400 transition hover:border-green-500 hover:bg-green-50"
-          : "pointer-events-none cursor-not-allowed bg-gray-400",
+          ? "cursor-pointer border border-secondary-400 transition hover:border-green-500 hover:bg-green-50"
+          : "pointer-events-none cursor-not-allowed bg-secondary-400",
       )}
     >
       <a className="flex" onClick={connectOnWhatsApp}>
@@ -245,12 +245,12 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
             Number(new Date()) - Number(new Date(user.last_login)) < 60000 ? (
               <CareIcon icon={icon} className="text-xl text-green-600" />
             ) : (
-              <CareIcon icon={icon} className="text-2xl text-gray-600" />
+              <CareIcon icon={icon} className="text-2xl text-secondary-600" />
             )
           }
         </div>
         <div className="ml-4 flex flex-auto flex-col gap-1">
-          <div className="flex justify-between gap-2 text-sm text-gray-700">
+          <div className="flex justify-between gap-2 text-sm text-secondary-700">
             <span>
               <strong>
                 {user.first_name} {user.last_name}
@@ -262,12 +262,12 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
             />
           </div>
           {!!user.skills.length && (
-            <div className="mt-1 text-sm leading-5 text-gray-900">
+            <div className="mt-1 text-sm leading-5 text-secondary-900">
               <div className="flex flex-wrap gap-2">
                 {user.skills?.map((skill: SkillObjectModel) => (
                   <span
                     key={skill.id}
-                    className="flex items-center gap-2 rounded-full border-gray-300 bg-gray-200 px-3 text-xs text-gray-900"
+                    className="flex items-center gap-2 rounded-full border-secondary-300 bg-secondary-200 px-3 text-xs text-secondary-900"
                   >
                     <p className="py-1.5">{skill.name}</p>
                   </span>
@@ -275,7 +275,7 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
               </div>
             </div>
           )}
-          <div className="flex justify-between gap-2 text-sm text-gray-500">
+          <div className="flex justify-between gap-2 text-sm text-secondary-500">
             <div className="flex items-center gap-1">
               <a
                 role="button"
@@ -296,7 +296,7 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
               </a>
               <span>{user.alt_phone_number}</span>
             </div>
-            <div className="text-sm text-gray-500">
+            <div className="text-sm text-secondary-500">
               {user.last_login && <span>{relativeTime(user.last_login)}</span>}
             </div>
           </div>
diff --git a/src/Components/Facility/DuplicatePatientDialog.tsx b/src/Components/Facility/DuplicatePatientDialog.tsx
index 56101cc9ccb..7450d9fd8f1 100644
--- a/src/Components/Facility/DuplicatePatientDialog.tsx
+++ b/src/Components/Facility/DuplicatePatientDialog.tsx
@@ -10,7 +10,7 @@ interface Props {
   isNew: boolean;
 }
 
-const tdClass = "border border-gray-400 p-2 text-left";
+const tdClass = "border border-secondary-400 p-2 text-left";
 
 const DuplicatePatientDialog = (props: Props) => {
   const { patientList, handleOk, handleCancel, isNew } = props;
@@ -32,7 +32,7 @@ const DuplicatePatientDialog = (props: Props) => {
           </p>
         </div>
         <div>
-          <div className="max-h-[200px] overflow-auto rounded border border-y-gray-400">
+          <div className="max-h-[200px] overflow-auto rounded border border-y-secondary-400">
             <table className="relative w-full border-collapse">
               <thead>
                 <tr className="border-separate">
diff --git a/src/Components/Facility/FacilityBedCapacity.tsx b/src/Components/Facility/FacilityBedCapacity.tsx
index a02165b94a5..e2a24b3fab3 100644
--- a/src/Components/Facility/FacilityBedCapacity.tsx
+++ b/src/Components/Facility/FacilityBedCapacity.tsx
@@ -21,7 +21,7 @@ export const FacilityBedCapacity = (props: any) => {
   let capacityList: any = null;
   if (!capacityQuery.data || !capacityQuery.data.results.length) {
     capacityList = (
-      <h5 className="mt-4 flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-gray-500 shadow">
+      <h5 className="mt-4 flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-secondary-500 shadow">
         No Bed Types Found
       </h5>
     );
diff --git a/src/Components/Facility/FacilityCard.tsx b/src/Components/Facility/FacilityCard.tsx
index 89a4128f7e0..12a7d9d31c6 100644
--- a/src/Components/Facility/FacilityCard.tsx
+++ b/src/Components/Facility/FacilityCard.tsx
@@ -52,7 +52,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
           <div className="h-full w-full grow">
             <Link
               href={`/facility/${facility.id}`}
-              className="group relative z-0 flex w-full min-w-[15%] items-center justify-center self-stretch bg-gray-300 min-[425px]:hidden"
+              className="group relative z-0 flex w-full min-w-[15%] items-center justify-center self-stretch bg-secondary-300 min-[425px]:hidden"
             >
               {(facility.read_cover_image_url && (
                 <img
@@ -63,7 +63,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
               )) || (
                 <CareIcon
                   icon="l-hospital"
-                  className="block text-7xl text-gray-500"
+                  className="block text-7xl text-secondary-500"
                 />
               )}
             </Link>
@@ -73,7 +73,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                 <div className="flex gap-5">
                   <Link
                     href={`/facility/${facility.id}`}
-                    className="group relative z-0 hidden h-[150px] min-h-[150px] w-[150px] min-w-[150px] items-center justify-center self-stretch rounded-md bg-gray-300 min-[425px]:flex"
+                    className="group relative z-0 hidden h-[150px] min-h-[150px] w-[150px] min-w-[150px] items-center justify-center self-stretch rounded-md bg-secondary-300 min-[425px]:flex"
                   >
                     {(facility.read_cover_image_url && (
                       <img
@@ -84,7 +84,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                     )) || (
                       <CareIcon
                         icon="l-hospital"
-                        className="block text-5xl text-gray-500"
+                        className="block text-5xl text-secondary-500"
                       />
                     )}
                   </Link>
@@ -168,7 +168,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                   </div>
                 </div>
               </div>
-              <div className="flex flex-wrap border-t bg-gray-50 px-2 py-1 md:px-3">
+              <div className="bg-secondary-50 flex flex-wrap border-t px-2 py-1 md:px-3">
                 {/* <div className="flex justify-between py-2"> */}
                 <div className="flex w-full flex-wrap justify-between gap-2 py-2">
                   <div className="flex flex-wrap gap-2">
@@ -196,7 +196,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                         className={`text-sm font-semibold ${
                           facility.patient_count / facility.bed_count > 0.85
                             ? "text-white"
-                            : "text-gray-700"
+                            : "text-secondary-700"
                         }`}
                       >
                         Occupancy: {facility.patient_count} /{" "}
diff --git a/src/Components/Facility/FacilityCreate.tsx b/src/Components/Facility/FacilityCreate.tsx
index 383a0646958..3bd0821e25e 100644
--- a/src/Components/Facility/FacilityCreate.tsx
+++ b/src/Components/Facility/FacilityCreate.tsx
@@ -532,7 +532,7 @@ export const FacilityCreate = (props: FacilityProps) => {
 
   if (!capacityData || !capacityData.length) {
     capacityList = (
-      <h5 className="mt-4 flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-gray-500 shadow">
+      <h5 className="mt-4 flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-secondary-500 shadow">
         {t("no_bed_types_found")}
       </h5>
     );
@@ -596,7 +596,7 @@ export const FacilityCreate = (props: FacilityProps) => {
   let doctorList: any = null;
   if (!doctorData || !doctorData.length) {
     doctorList = (
-      <h5 className="flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-gray-500 shadow">
+      <h5 className="flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-secondary-500 shadow">
         {t("no_staff")}
       </h5>
     );
@@ -1001,5 +1001,5 @@ export const FacilityCreate = (props: FacilityProps) => {
 };
 
 const FieldUnit = ({ unit }: { unit: string }) => {
-  return <p className="absolute right-10 text-xs text-gray-700">{unit}</p>;
+  return <p className="absolute right-10 text-xs text-secondary-700">{unit}</p>;
 };
diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index f18ea584b44..f53fa43efa8 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -107,7 +107,7 @@ export const FacilityHome = (props: any) => {
   const editCoverImageTooltip = hasPermissionToEditCoverImage && (
     <div
       id="facility-coverimage"
-      className="absolute right-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center rounded-t-lg bg-black text-sm text-gray-300 opacity-0 transition-opacity hover:opacity-60 md:h-[88px]"
+      className="absolute right-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center rounded-t-lg bg-black text-sm text-secondary-300 opacity-0 transition-opacity hover:opacity-60 md:h-[88px]"
     >
       <CareIcon icon="l-pen" className="text-lg" />
       <span className="mt-2">{`${hasCoverImage ? "Edit" : "Upload"}`}</span>
@@ -157,7 +157,7 @@ export const FacilityHome = (props: any) => {
       {hasCoverImage ? (
         <div
           className={
-            "group relative h-48 w-full text-clip rounded-t bg-gray-200 opacity-100 transition-all duration-200 ease-in-out md:h-0 md:opacity-0"
+            "group relative h-48 w-full text-clip rounded-t bg-secondary-200 opacity-100 transition-all duration-200 ease-in-out md:h-0 md:opacity-0"
           }
         >
           <CoverImage />
@@ -165,7 +165,7 @@ export const FacilityHome = (props: any) => {
         </div>
       ) : (
         <div
-          className={`group relative z-0 flex w-full shrink-0 items-center justify-center self-stretch bg-gray-300 md:hidden ${
+          className={`group relative z-0 flex w-full shrink-0 items-center justify-center self-stretch bg-secondary-300 md:hidden ${
             hasPermissionToEditCoverImage && "cursor-pointer"
           }`}
           onClick={() =>
@@ -174,7 +174,7 @@ export const FacilityHome = (props: any) => {
         >
           <CareIcon
             icon="l-hospital"
-            className="block p-10 text-4xl text-gray-500"
+            className="block p-10 text-4xl text-secondary-500"
             aria-hidden="true"
           />
           {editCoverImageTooltip}
@@ -200,9 +200,9 @@ export const FacilityHome = (props: any) => {
                   {hasCoverImage ? (
                     <CoverImage />
                   ) : (
-                    <div className="flex h-80 w-[88px] items-center justify-center rounded-lg bg-gray-200 font-medium text-gray-700 lg:h-80 lg:w-80">
+                    <div className="flex h-80 w-[88px] items-center justify-center rounded-lg bg-secondary-200 font-medium text-secondary-700 lg:h-80 lg:w-80">
                       <svg
-                        className="h-8 w-8 fill-current text-gray-500"
+                        className="h-8 w-8 fill-current text-secondary-500"
                         viewBox="0 0 40 32"
                         xmlns="http://www.w3.org/2000/svg"
                       >
@@ -220,7 +220,7 @@ export const FacilityHome = (props: any) => {
                       </h1>
                       {facilityData?.modified_date && (
                         <RecordMeta
-                          className="mt-1 text-sm text-gray-700"
+                          className="mt-1 text-sm text-secondary-700"
                           prefix={t("updated")}
                           time={facilityData?.modified_date}
                         />
@@ -536,7 +536,7 @@ const LiveMonitoringButton = () => {
         leaveTo="opacity-0 translate-y-1"
       >
         <Popover.Panel className="absolute z-30 mt-1 w-full px-4 sm:px-0 md:w-96 lg:max-w-3xl lg:translate-x-[-168px]">
-          <div className="rounded-lg shadow-lg ring-1 ring-gray-400">
+          <div className="rounded-lg shadow-lg ring-1 ring-secondary-400">
             <div className="relative flex flex-col gap-4 rounded-b-lg bg-white p-6">
               <div>
                 <FieldLabel htmlFor="location" className="text-sm">
diff --git a/src/Components/Facility/FacilityHomeTriage.tsx b/src/Components/Facility/FacilityHomeTriage.tsx
index 7a9b464676a..67d7563846d 100644
--- a/src/Components/Facility/FacilityHomeTriage.tsx
+++ b/src/Components/Facility/FacilityHomeTriage.tsx
@@ -85,7 +85,7 @@ export const FacilityHomeTriage = (props: any) => {
           {stats.length === 0 && (
             <>
               <hr />
-              <div className="mt-3 flex min-w-[1000px] items-center justify-center rounded-sm border border-[#D2D6DC] p-4 text-xl font-bold text-gray-600">
+              <div className="mt-3 flex min-w-[1000px] items-center justify-center rounded-sm border border-[#D2D6DC] p-4 text-xl font-bold text-secondary-600">
                 No Data Found
               </div>
             </>
diff --git a/src/Components/Facility/FacilityStaffList.tsx b/src/Components/Facility/FacilityStaffList.tsx
index 1069b51672e..ae3c5fb0662 100644
--- a/src/Components/Facility/FacilityStaffList.tsx
+++ b/src/Components/Facility/FacilityStaffList.tsx
@@ -35,7 +35,7 @@ export const FacilityStaffList = (props: any) => {
   let doctorList: any = null;
   if (!doctorQuery.data || !doctorQuery.data.results.length) {
     doctorList = (
-      <h5 className="flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-gray-500 shadow">
+      <h5 className="flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-secondary-500 shadow">
         {t("no_staff")}
       </h5>
     );
diff --git a/src/Components/Facility/FacilityUsers.tsx b/src/Components/Facility/FacilityUsers.tsx
index 31ceb6e1937..cefa3630f33 100644
--- a/src/Components/Facility/FacilityUsers.tsx
+++ b/src/Components/Facility/FacilityUsers.tsx
@@ -151,13 +151,15 @@ export default function FacilityUsers(props: any) {
                       {user.username}
                     </div>
                   )}
-                  <div className="min-width-50 shrink-0 text-sm text-gray-600">
+                  <div className="min-width-50 shrink-0 text-sm text-secondary-600">
                     Last Online:{" "}
                     <span
                       aria-label="Online"
                       className={
                         "inline-block h-2 w-2 shrink-0 rounded-full " +
-                        (isUserOnline(user) ? "bg-primary-400" : "bg-gray-300")
+                        (isUserOnline(user)
+                          ? "bg-primary-400"
+                          : "bg-secondary-300")
                       }
                     ></span>
                     <span className="pl-2">
@@ -183,10 +185,10 @@ export default function FacilityUsers(props: any) {
                 </div>
                 <div className="flex justify-between">
                   {user.phone_number && (
-                    <div className="mt-2 border-t bg-gray-50 px-6 py-2">
+                    <div className="bg-secondary-50 mt-2 border-t px-6 py-2">
                       <div className="flex justify-between py-4">
                         <div>
-                          <div className="leading-relaxed text-gray-500">
+                          <div className="leading-relaxed text-secondary-500">
                             Phone:
                           </div>
                           <a
diff --git a/src/Components/Facility/HospitalList.tsx b/src/Components/Facility/HospitalList.tsx
index 47545c3cdc5..63a76e5998a 100644
--- a/src/Components/Facility/HospitalList.tsx
+++ b/src/Components/Facility/HospitalList.tsx
@@ -130,14 +130,14 @@ export const HospitalList = () => {
   } else if (permittedData.results && permittedData.results.length === 0) {
     manageFacilities = hasFiltersApplied(qParams) ? (
       <div className="w-full rounded-lg bg-white p-3">
-        <div className="mt-4 flex w-full  justify-center text-2xl font-bold text-gray-600">
+        <div className="mt-4 flex w-full  justify-center text-2xl font-bold text-secondary-600">
           {t("no_facilities")}
         </div>
       </div>
     ) : (
       <div>
         <div
-          className="border-grey-500 mt-4 cursor-pointer whitespace-nowrap rounded-md border bg-white p-16 text-center text-sm font-semibold shadow hover:bg-gray-300"
+          className="border-grey-500 mt-4 cursor-pointer whitespace-nowrap rounded-md border bg-white p-16 text-center text-sm font-semibold shadow hover:bg-secondary-300"
           onClick={() => navigate("/facility/create")}
         >
           <CareIcon icon="l-plus" className="text-3xl" />
diff --git a/src/Components/Facility/InventoryList.tsx b/src/Components/Facility/InventoryList.tsx
index 24c415c20b1..fe7e846630d 100644
--- a/src/Components/Facility/InventoryList.tsx
+++ b/src/Components/Facility/InventoryList.tsx
@@ -45,7 +45,7 @@ export default function InventoryList(props: any) {
         id={`${inventoryItem.item_object?.name.replaceAll(" ", "-")}`}
         key={inventoryItem.id}
         className={classNames(
-          "cursor-pointer hover:bg-gray-200",
+          "cursor-pointer hover:bg-secondary-200",
           inventoryItem.is_low ? "bg-red-100" : "bg-white",
         )}
         onClick={() =>
@@ -54,9 +54,9 @@ export default function InventoryList(props: any) {
           )
         }
       >
-        <td className="border-b border-gray-200 p-5 text-sm">
+        <td className="border-b border-secondary-200 p-5 text-sm">
           <div className="flex items-center">
-            <p className="whitespace-nowrap text-gray-900">
+            <p className="whitespace-nowrap text-secondary-900">
               {inventoryItem.item_object?.name}
               {inventoryItem.is_low && (
                 <span className="badge badge-danger ml-2">Low Stock</span>
@@ -64,8 +64,8 @@ export default function InventoryList(props: any) {
             </p>
           </div>
         </td>
-        <td className="border-b border-gray-200 p-5 text-sm">
-          <p className="whitespace-nowrap lowercase text-gray-900">
+        <td className="border-b border-secondary-200 p-5 text-sm">
+          <p className="whitespace-nowrap lowercase text-secondary-900">
             {inventoryItem.quantity}{" "}
             {inventoryItem.item_object?.default_unit?.name}
           </p>
@@ -75,8 +75,11 @@ export default function InventoryList(props: any) {
   } else if (inventoryData?.results && inventoryData.results.length === 0) {
     inventoryList = (
       <tr className="bg-white">
-        <td colSpan={3} className="border-b border-gray-200 p-5 text-center">
-          <p className="whitespace-nowrap text-gray-500">
+        <td
+          colSpan={3}
+          className="border-b border-secondary-200 p-5 text-center"
+        >
+          <p className="whitespace-nowrap text-secondary-500">
             No inventory available
           </p>
         </td>
@@ -94,10 +97,10 @@ export default function InventoryList(props: any) {
             <table className="min-w-full overflow-hidden rounded-lg leading-normal shadow">
               <thead>
                 <tr>
-                  <th className="border-b-2 border-gray-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Name
                   </th>
-                  <th className="border-b-2 border-gray-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Stock
                   </th>
                 </tr>
diff --git a/src/Components/Facility/InventoryLog.tsx b/src/Components/Facility/InventoryLog.tsx
index 3e2bbe11c97..ab731a38751 100644
--- a/src/Components/Facility/InventoryLog.tsx
+++ b/src/Components/Facility/InventoryLog.tsx
@@ -81,17 +81,17 @@ export default function InventoryLog(props: any) {
   if (data?.results.length) {
     inventoryList = data.results.map((inventoryItem: any, index) => (
       <tr id={`row-${index}`} key={inventoryItem.id} className="bg-white">
-        <td className="border-b border-gray-200 p-5 text-sm hover:bg-gray-100">
+        <td className="border-b border-secondary-200 p-5 text-sm hover:bg-secondary-100">
           <div className="flex items-center">
             <div className="ml-3">
-              <p className="whitespace-nowrap text-gray-900">
+              <p className="whitespace-nowrap text-secondary-900">
                 {formatDateTime(inventoryItem.created_date)}
               </p>
             </div>
           </div>
         </td>
-        <td className="border-b border-gray-200 p-5 text-sm hover:bg-gray-100">
-          <p className="whitespace-nowrap lowercase text-gray-900">
+        <td className="border-b border-secondary-200 p-5 text-sm hover:bg-secondary-100">
+          <p className="whitespace-nowrap lowercase text-secondary-900">
             {inventoryItem.quantity_in_default_unit}{" "}
             {inventoryItem.item_object?.default_unit?.name}
             {inventoryItem.probable_accident && (
@@ -102,8 +102,8 @@ export default function InventoryLog(props: any) {
             )}
           </p>
         </td>
-        <td className="border-b border-gray-200 p-5 text-sm hover:bg-gray-100">
-          <p className="whitespace-nowrap lowercase text-gray-900">
+        <td className="border-b border-secondary-200 p-5 text-sm hover:bg-secondary-100">
+          <p className="whitespace-nowrap lowercase text-secondary-900">
             {inventoryItem.is_incoming ? (
               <span className="ml-2 text-primary-600">Added Stock</span>
             ) : (
@@ -170,8 +170,11 @@ export default function InventoryLog(props: any) {
   } else if (data?.results && data.results.length === 0) {
     inventoryList = (
       <tr className="bg-white">
-        <td colSpan={3} className="border-b border-gray-200 p-5 text-center">
-          <p className="whitespace-nowrap text-gray-500">
+        <td
+          colSpan={3}
+          className="border-b border-secondary-200 p-5 text-center"
+        >
+          <p className="whitespace-nowrap text-secondary-500">
             No log for this inventory available
           </p>
         </td>
@@ -189,16 +192,16 @@ export default function InventoryLog(props: any) {
             <table className="min-w-full overflow-x-clip rounded-lg leading-normal shadow">
               <thead>
                 <tr>
-                  <th className="border-b-2 border-gray-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Created On
                   </th>
-                  <th className="border-b-2 border-gray-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Quantity
                   </th>
-                  <th className="border-b-2 border-gray-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Status
                   </th>
-                  <th className="border-b-2 border-gray-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Actions
                   </th>
                 </tr>
diff --git a/src/Components/Facility/Investigations/InvestigationSuggestions.tsx b/src/Components/Facility/Investigations/InvestigationSuggestions.tsx
index 08779e78117..52416cc1e4a 100644
--- a/src/Components/Facility/Investigations/InvestigationSuggestions.tsx
+++ b/src/Components/Facility/Investigations/InvestigationSuggestions.tsx
@@ -35,7 +35,7 @@ export default function ViewInvestigationSuggestions(props: {
     <div className="mt-5" id="investigation-suggestions">
       <h3>{t("investigations_suggested")}</h3>
       <table className="mt-3 hidden w-full rounded-xl bg-white shadow md:table">
-        <thead className="bg-gray-200 text-left">
+        <thead className="bg-secondary-200 text-left">
           <tr>
             <th className="p-4">{t("investigations")}</th>
             <th className="p-4">{t("to_be_conducted")}</th>
@@ -48,7 +48,7 @@ export default function ViewInvestigationSuggestions(props: {
             investigations.investigation.map((investigation, index) => {
               let nextFurthestInvestigation: any = undefined;
               return (
-                <tr key={index} className="border-b border-b-gray-200">
+                <tr key={index} className="border-b border-b-secondary-200">
                   <td className="p-4">
                     <ul className="ml-4 list-decimal">
                       {investigation.type?.map((type, index) => {
diff --git a/src/Components/Facility/Investigations/InvestigationTable.tsx b/src/Components/Facility/Investigations/InvestigationTable.tsx
index 4e1b9d1a194..cb21e9d5b80 100644
--- a/src/Components/Facility/Investigations/InvestigationTable.tsx
+++ b/src/Components/Facility/Investigations/InvestigationTable.tsx
@@ -9,15 +9,15 @@ const TestRow = ({ data, i, onChange, showForm, value, isChanged }: any) => {
   return (
     <tr
       className={classNames(
-        i % 2 == 0 ? "bg-gray-50" : "bg-white",
+        i % 2 == 0 ? "bg-secondary-50" : "bg-white",
         isChanged && "!bg-primary-300",
       )}
       x-description="Even row"
     >
-      <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900">
+      <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-secondary-900">
         {data?.investigation_object?.name || "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {showForm ? (
           data?.investigation_object?.investigation_type === "Choice" ? (
             <SelectFormField
@@ -45,16 +45,16 @@ const TestRow = ({ data, i, onChange, showForm, value, isChanged }: any) => {
           value || "---"
         )}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.investigation_object.unit || "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.investigation_object.min_value || "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.investigation_object.max_value || "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.investigation_object.ideal_value || "---"}
       </td>
     </tr>
@@ -127,15 +127,15 @@ export const InvestigationTable = ({
       />
       <br />
       <div id="section-to-print">
-        <div className="overflow-x-scroll border-b border-gray-200 shadow sm:rounded-lg">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
+        <div className="overflow-x-scroll border-b border-secondary-200 shadow sm:rounded-lg">
+          <table className="min-w-full divide-y divide-secondary-200">
+            <thead className="bg-secondary-50">
               <tr>
                 {["Name", "Value", "Unit", "Min", "Max", "Ideal"].map(
                   (heading) => (
                     <th
                       scope="col"
-                      className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-800"
+                      className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-800"
                     >
                       {heading}
                     </th>
@@ -177,7 +177,9 @@ export const InvestigationTable = ({
                   );
                 })
               ) : (
-                <tr className="text-center text-gray-500">No tests taken</tr>
+                <tr className="text-center text-secondary-500">
+                  No tests taken
+                </tr>
               )}
             </tbody>
           </table>
diff --git a/src/Components/Facility/Investigations/Reports/ReportTable.tsx b/src/Components/Facility/Investigations/Reports/ReportTable.tsx
index af08688eda4..3a56db28e36 100644
--- a/src/Components/Facility/Investigations/Reports/ReportTable.tsx
+++ b/src/Components/Facility/Investigations/Reports/ReportTable.tsx
@@ -7,8 +7,8 @@ import { FC } from "react";
 
 const ReportRow = ({ data, name, min, max }: any) => {
   return (
-    <tr className="bg-white even:bg-gray-50">
-      <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900">
+    <tr className="even:bg-secondary-50 bg-white">
+      <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-secondary-900">
         {name}
       </td>
       {data.map((d: any) => {
@@ -38,10 +38,10 @@ const ReportRow = ({ data, name, min, max }: any) => {
           </td>
         );
       })}
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {min}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {max}
       </td>
     </tr>
@@ -78,7 +78,9 @@ const ReportTable: FC<ReportTableProps> = ({
       )}
 
       <div className=" my-4 p-4" id="section-to-print">
-        {title && <h1 className="text-xl font-bold text-gray-800">{title}</h1>}
+        {title && (
+          <h1 className="text-xl font-bold text-secondary-800">{title}</h1>
+        )}
         <br />
         {patientDetails && (
           <div className="flex flex-col gap-1 p-1">
@@ -102,13 +104,13 @@ const ReportTable: FC<ReportTableProps> = ({
           </span>
         </div>
         <br />
-        <div className="overflow-x-scroll border-b border-gray-200 shadow sm:rounded-lg">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
+        <div className="overflow-x-scroll border-b border-secondary-200 shadow sm:rounded-lg">
+          <table className="min-w-full divide-y divide-secondary-200">
+            <thead className="bg-secondary-50">
               <tr>
                 <th
                   scope="col"
-                  className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-800"
+                  className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-800"
                 >
                   Name
                 </th>
@@ -131,13 +133,13 @@ const ReportTable: FC<ReportTableProps> = ({
                 ))}
                 <th
                   scope="col"
-                  className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-800"
+                  className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-800"
                 >
                   Min
                 </th>
                 <th
                   scope="col"
-                  className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-800"
+                  className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-800"
                 >
                   Max
                 </th>
@@ -157,7 +159,9 @@ const ReportTable: FC<ReportTableProps> = ({
                   );
                 })
               ) : (
-                <tr className="text-center text-gray-500">No tests taken</tr>
+                <tr className="text-center text-secondary-500">
+                  No tests taken
+                </tr>
               )}
             </tbody>
           </table>
diff --git a/src/Components/Facility/Investigations/Table.tsx b/src/Components/Facility/Investigations/Table.tsx
index 78554d45553..e2a1a9395fc 100644
--- a/src/Components/Facility/Investigations/Table.tsx
+++ b/src/Components/Facility/Investigations/Table.tsx
@@ -6,11 +6,11 @@ import { useState } from "react";
 
 const TestRow = ({ data, value, onChange, i }: any) => {
   return (
-    <tr className={i % 2 == 0 ? "bg-gray-50" : "bg-white"}>
-      <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900">
+    <tr className={i % 2 == 0 ? "bg-secondary-50" : "bg-white"}>
+      <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-secondary-900">
         {data.name}
       </td>
-      <td className="min-w-[200px] whitespace-nowrap px-6 py-4 text-right text-sm text-gray-700">
+      <td className="min-w-[200px] whitespace-nowrap px-6 py-4 text-right text-sm text-secondary-700">
         {data.investigation_type === "Choice" ? (
           <SelectFormField
             name={data.name}
@@ -31,16 +31,16 @@ const TestRow = ({ data, value, onChange, i }: any) => {
           />
         )}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.unit || "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.min_value ?? "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.max_value ?? "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.ideal_value || "---"}
       </td>
     </tr>
@@ -76,15 +76,15 @@ export const TestTable = ({ title, data, state, dispatch }: any) => {
         onChange={(e) => setSearchFilter(e.value)}
       />
       <br />
-      <div className="overflow-x-scroll border-b border-gray-200 shadow sm:overflow-x-visible sm:rounded-lg">
-        <table className="block min-w-full divide-y divide-gray-200 overflow-scroll">
-          <thead className="bg-gray-50">
+      <div className="overflow-x-scroll border-b border-secondary-200 shadow sm:overflow-x-visible sm:rounded-lg">
+        <table className="block min-w-full divide-y divide-secondary-200 overflow-scroll">
+          <thead className="bg-secondary-50">
             <tr>
               {["Name", "Value", "Unit", "Min", "Max", "Ideal"].map(
                 (heading) => (
                   <th
                     scope="col"
-                    className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-800"
+                    className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-800"
                   >
                     {heading}
                   </th>
@@ -118,7 +118,7 @@ export const TestTable = ({ title, data, state, dispatch }: any) => {
                 );
               })
             ) : (
-              <tr className="text-center text-gray-500">No tests taken</tr>
+              <tr className="text-center text-secondary-500">No tests taken</tr>
             )}
           </tbody>
         </table>
diff --git a/src/Components/Facility/Investigations/ViewInvestigations.tsx b/src/Components/Facility/Investigations/ViewInvestigations.tsx
index 58297489329..192a63cbbdf 100644
--- a/src/Components/Facility/Investigations/ViewInvestigations.tsx
+++ b/src/Components/Facility/Investigations/ViewInvestigations.tsx
@@ -37,7 +37,7 @@ export default function ViewInvestigations(props: {
         <div className="mt-4 space-y-2 ">
           {investigations.length > 0 && (
             <div>
-              <h4 className="-mb-14 text-gray-700">{t("summary")}</h4>
+              <h4 className="-mb-14 text-secondary-700">{t("summary")}</h4>
               <ReportTable
                 investigationData={investigations}
                 hidePrint={true}
@@ -45,7 +45,7 @@ export default function ViewInvestigations(props: {
             </div>
           )}
           {investigationSessions.length === 0 && (
-            <div className="text-semibold mt-5 h-full rounded-lg bg-white py-4 text-center text-lg text-gray-500 shadow">
+            <div className="text-semibold mt-5 h-full rounded-lg bg-white py-4 text-center text-lg text-secondary-500 shadow">
               {t("no_investigation")}
             </div>
           )}
@@ -53,7 +53,7 @@ export default function ViewInvestigations(props: {
             return (
               <div
                 key={investigationSession.session_external_id}
-                className="flex cursor-pointer items-center justify-between rounded-lg border bg-white p-4 shadow hover:bg-gray-200"
+                className="flex cursor-pointer items-center justify-between rounded-lg border bg-white p-4 shadow hover:bg-secondary-200"
               >
                 <div>
                   {formatDateTime(investigationSession.session_created_date)}
diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
index 6eecdb28afe..abf4a056695 100644
--- a/src/Components/Facility/LocationManagement.tsx
+++ b/src/Components/Facility/LocationManagement.tsx
@@ -105,7 +105,7 @@ export default function LocationManagement({ facilityId }: Props) {
             </ButtonV2>
           </div>
           <div className="w-full @container">
-            <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
+            <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
               <span>No locations available</span>
             </PaginatedList.WhenEmpty>
 
@@ -225,7 +225,7 @@ const Location = ({
   setShowDeletePopup,
   facilityId,
 }: LocationProps) => (
-  <div className="flex h-full w-full flex-col rounded border border-gray-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
+  <div className="flex h-full w-full flex-col rounded border border-secondary-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
     <div className="flex-1">
       <div className="flex w-full items-start justify-between gap-2">
         <div className="flex items-end gap-3">
@@ -243,16 +243,16 @@ const Location = ({
         </div>
       </div>
       <p
-        className="mt-3 break-all text-sm font-medium text-gray-700"
+        className="mt-3 break-all text-sm font-medium text-secondary-700"
         id="view-location-description"
       >
         {description || "-"}
       </p>
-      <p className="mt-3 text-sm font-semibold text-gray-700">
+      <p className="mt-3 text-sm font-semibold text-secondary-700">
         Middleware Address:
       </p>
       <p
-        className="mt-1 break-all font-mono text-sm font-bold text-gray-700"
+        className="mt-1 break-all font-mono text-sm font-bold text-secondary-700"
         id="view-location-middleware"
       >
         {middleware_address || "-"}
@@ -261,7 +261,7 @@ const Location = ({
         route={routes.listFacilityAssetLocationAvailability}
         params={{ external_id: id, facility_external_id: facilityId }}
         header={
-          <p className="mt-3 text-sm font-semibold text-gray-700">
+          <p className="mt-3 text-sm font-semibold text-secondary-700">
             Middleware Uptime
           </p>
         }
@@ -312,7 +312,7 @@ const Location = ({
       </div>
     </div>
 
-    <div className="mt-3 flex items-center justify-between gap-4 text-sm font-medium text-gray-700">
+    <div className="mt-3 flex items-center justify-between gap-4 text-sm font-medium text-secondary-700">
       <RecordMeta time={created_date} prefix="Created:" />
       <RecordMeta time={modified_date} prefix="Modified:" />
     </div>
diff --git a/src/Components/Facility/MinQuantityList.tsx b/src/Components/Facility/MinQuantityList.tsx
index b3aeb9232e5..528f03cbac7 100644
--- a/src/Components/Facility/MinQuantityList.tsx
+++ b/src/Components/Facility/MinQuantityList.tsx
@@ -47,15 +47,15 @@ export default function MinQuantityList(props: any) {
   if (minimumQuantityData?.results.length) {
     inventoryList = minimumQuantityData.results.map((inventoryItem: any) => (
       <tr key={inventoryItem.id} className="bg-white">
-        <td className="cursor-pointer border-b border-gray-200 p-5 hover:bg-gray-200 sm:cursor-default sm:text-sm sm:hover:bg-white">
+        <td className="cursor-pointer border-b border-secondary-200 p-5 hover:bg-secondary-200 sm:cursor-default sm:text-sm sm:hover:bg-white">
           <div className="hidden flex-col sm:flex">
-            <p className="whitespace-nowrap font-normal text-gray-900">
+            <p className="whitespace-nowrap font-normal text-secondary-900">
               {inventoryItem.item_object?.name}
             </p>
           </div>
           <ButtonV2
             ghost={true}
-            className="w-full hover:bg-gray-200 sm:hidden"
+            className="w-full hover:bg-secondary-200 sm:hidden"
             onClick={() => {
               setSelectedItem({
                 id: inventoryItem.id,
@@ -66,16 +66,16 @@ export default function MinQuantityList(props: any) {
           >
             <div className="flex w-full items-center justify-between sm:hidden">
               <div className="flex flex-col text-start">
-                <p className="whitespace-nowrap font-semibold text-gray-900">
+                <p className="whitespace-nowrap font-semibold text-secondary-900">
                   {inventoryItem.item_object?.name}
                 </p>
-                <p className="mt-1 whitespace-nowrap text-sm text-gray-900">
+                <p className="mt-1 whitespace-nowrap text-sm text-secondary-900">
                   {"Min Quantity: "}
                   {inventoryItem.min_quantity}{" "}
                   {inventoryItem.item_object?.default_unit?.name}
                 </p>
               </div>
-              <div className="text-gray-600">
+              <div className="text-secondary-600">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
@@ -94,8 +94,8 @@ export default function MinQuantityList(props: any) {
             </div>
           </ButtonV2>
         </td>
-        <td className="hidden w-full justify-between border-b border-gray-200 p-5 text-sm sm:flex">
-          <p className="mt-2 whitespace-nowrap lowercase text-gray-900">
+        <td className="hidden w-full justify-between border-b border-secondary-200 p-5 text-sm sm:flex">
+          <p className="mt-2 whitespace-nowrap lowercase text-secondary-900">
             {inventoryItem.min_quantity}{" "}
             {inventoryItem.item_object?.default_unit?.name}
           </p>
@@ -123,9 +123,9 @@ export default function MinQuantityList(props: any) {
       <tr className="bg-white">
         <td
           colSpan={3}
-          className="pxf-5 border-b border-gray-200 py-5 text-center"
+          className="pxf-5 border-b border-secondary-200 py-5 text-center"
         >
-          <p className="whitespace-nowrap text-gray-500">
+          <p className="whitespace-nowrap text-secondary-500">
             No item with minimum quantity set
           </p>
         </td>
@@ -143,19 +143,19 @@ export default function MinQuantityList(props: any) {
             <table className="min-w-full overflow-hidden rounded-lg leading-normal shadow">
               <thead>
                 <tr>
-                  <th className="border-b-2 border-gray-200 bg-primary-500 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-500 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Item
                   </th>
-                  <th className="border-b-2 border-gray-200 bg-primary-500 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-500 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Minimum Quantity
                   </th>
-                  <th className="border-b-2 border-gray-200 bg-primary-500 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white"></th>
+                  <th className="border-b-2 border-secondary-200 bg-primary-500 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white"></th>
                 </tr>
               </thead>
               <tbody>{inventoryList}</tbody>
             </table>
           </div>
-          <div className="rounded-lg bg-gray-100 shadow-sm sm:hidden">
+          <div className="rounded-lg bg-secondary-100 shadow-sm sm:hidden">
             <table className="min-w-full overflow-hidden rounded-lg leading-normal shadow">
               {inventoryList}
             </table>
diff --git a/src/Components/Facility/MinQuantityRequiredModal.tsx b/src/Components/Facility/MinQuantityRequiredModal.tsx
index 43e8a98c5b7..0fbfbeee9a4 100644
--- a/src/Components/Facility/MinQuantityRequiredModal.tsx
+++ b/src/Components/Facility/MinQuantityRequiredModal.tsx
@@ -103,7 +103,7 @@ export const MinQuantityRequiredModal = (props: any) => {
           <div role="status">
             <svg
               aria-hidden="true"
-              className="mr-2 h-8 w-8 animate-spin fill-primary text-gray-200 dark:text-gray-600"
+              className="mr-2 h-8 w-8 animate-spin fill-primary text-secondary-200 dark:text-secondary-600"
               viewBox="0 0 100 101"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
@@ -124,7 +124,7 @@ export const MinQuantityRequiredModal = (props: any) => {
         <div>
           {" "}
           <div className="mb-4">
-            <p className="mt-1 text-sm text-gray-500">
+            <p className="mt-1 text-sm text-secondary-500">
               Set the minimum quantity for{" "}
               <strong>{minimumQuantityItemData?.item_object.name}</strong> in{" "}
               <strong> {facilityObject?.name}</strong>
diff --git a/src/Components/Facility/PatientNoteCard.tsx b/src/Components/Facility/PatientNoteCard.tsx
index 5ea41cfb046..7f00700ff47 100644
--- a/src/Components/Facility/PatientNoteCard.tsx
+++ b/src/Components/Facility/PatientNoteCard.tsx
@@ -70,24 +70,24 @@ const PatientNoteCard = ({
       {" "}
       <div
         className={classNames(
-          "mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-3 text-gray-800",
+          "mt-4 flex w-full flex-col rounded-lg border border-secondary-300 bg-white p-3 text-secondary-800",
           note.user_type === "RemoteSpecialist" && "border-primary-400",
         )}
       >
         <div className="flex justify-between">
           <div>
             <div>
-              <span className="text-sm font-semibold text-gray-700">
+              <span className="text-sm font-semibold text-secondary-700">
                 {note.created_by_object?.first_name || "Unknown"}{" "}
                 {note.created_by_object?.last_name}
               </span>
               {note.user_type && (
-                <span className="pl-2 text-sm text-gray-700">
+                <span className="pl-2 text-sm text-secondary-700">
                   {`(${USER_TYPES_MAP[note.user_type]})`}
                 </span>
               )}
             </div>
-            <div className="text-xs text-gray-600">
+            <div className="text-xs text-secondary-600">
               <div className="tooltip inline">
                 <span className="tooltip-text tooltip-bottom">
                   {formatDateTime(note.created_date)}
@@ -103,7 +103,7 @@ const PatientNoteCard = ({
               ) && (
                 <div className="flex">
                   <div
-                    className="cursor-pointer text-xs text-gray-600"
+                    className="cursor-pointer text-xs text-secondary-600"
                     onClick={() => {
                       fetchEditHistory();
                       setShowEditHistory(true);
@@ -144,7 +144,7 @@ const PatientNoteCard = ({
               <div className="flex flex-col">
                 <textarea
                   rows={2}
-                  className="h-20 w-full resize-none rounded-lg border border-gray-300 p-2"
+                  className="h-20 w-full resize-none rounded-lg border border-secondary-300 p-2"
                   value={noteField}
                   onChange={(e) => setNoteField(e.target.value)}
                 ></textarea>
@@ -173,7 +173,7 @@ const PatientNoteCard = ({
                 </div>
               </div>
             ) : (
-              <div className="text-sm text-gray-700">{noteField}</div>
+              <div className="text-sm text-secondary-700">{noteField}</div>
             )}
           </div>
         }
@@ -186,7 +186,7 @@ const PatientNoteCard = ({
         >
           <div>
             <div className="mb-4">
-              <p className="text-md mt-1 text-gray-500">
+              <p className="text-md mt-1 text-secondary-500">
                 Edit History for note
                 <strong> {note.id}</strong>
               </p>
@@ -202,21 +202,23 @@ const PatientNoteCard = ({
                 return (
                   <div
                     key={index}
-                    className="my-2 flex flex-col justify-between rounded-lg border border-gray-300 p-4 py-2 transition-colors duration-200 hover:bg-gray-100"
+                    className="my-2 flex flex-col justify-between rounded-lg border border-secondary-300 p-4 py-2 transition-colors duration-200 hover:bg-secondary-100"
                   >
                     <div className="flex">
                       <div className="grow">
-                        <p className="text-sm font-medium text-gray-500">
+                        <p className="text-sm font-medium text-secondary-500">
                           {isLast ? "Created" : "Edited"} On
                         </p>
-                        <p className="text-sm text-gray-900">
+                        <p className="text-sm text-secondary-900">
                           {formatDateTime(edit.edited_date)}
                         </p>
                       </div>
                     </div>
                     <div className="mt-2 grow">
-                      <p className="text-sm font-medium text-gray-500">Note</p>
-                      <p className="text-sm text-gray-900">{edit.note}</p>
+                      <p className="text-sm font-medium text-secondary-500">
+                        Note
+                      </p>
+                      <p className="text-sm text-secondary-900">{edit.note}</p>
                     </div>
                   </div>
                 );
diff --git a/src/Components/Facility/PatientNotesSlideover.tsx b/src/Components/Facility/PatientNotesSlideover.tsx
index e2da270e532..6c8931ce249 100644
--- a/src/Components/Facility/PatientNotesSlideover.tsx
+++ b/src/Components/Facility/PatientNotesSlideover.tsx
@@ -130,7 +130,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
     <div className="flex gap-1">
       {show && (
         <Link
-          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-gray-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
+          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
           href={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/notes`}
         >
           <CareIcon
@@ -142,7 +142,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
       <div
         id="expand_doctor_notes"
         className={classNames(
-          "flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-gray-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100",
+          "flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100",
           show && "rotate-180",
         )}
         onClick={() => setShow(!show)}
@@ -153,7 +153,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
         />
       </div>
       <div
-        className="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-gray-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
+        className="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
         onClick={() => setShowPatientNotesPopup(false)}
       >
         <CareIcon
diff --git a/src/Components/Facility/StaffCapacity.tsx b/src/Components/Facility/StaffCapacity.tsx
index 9f5eeeb18ac..fc54dfcbb2d 100644
--- a/src/Components/Facility/StaffCapacity.tsx
+++ b/src/Components/Facility/StaffCapacity.tsx
@@ -157,7 +157,7 @@ export const StaffCapacity = (props: DoctorCapacityProps) => {
           <div role="status">
             <svg
               aria-hidden="true"
-              className="mr-2 h-8 w-8 animate-spin fill-primary text-gray-200 dark:text-gray-600"
+              className="mr-2 h-8 w-8 animate-spin fill-primary text-secondary-200 dark:text-secondary-600"
               viewBox="0 0 100 101"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
diff --git a/src/Components/Facility/TreatmentSummary.tsx b/src/Components/Facility/TreatmentSummary.tsx
index a83cb64ec66..79d28662e01 100644
--- a/src/Components/Facility/TreatmentSummary.tsx
+++ b/src/Components/Facility/TreatmentSummary.tsx
@@ -56,9 +56,9 @@ const TreatmentSummary = (props: any) => {
 
           <div className="text-right font-bold">{formatDate(date)}</div>
 
-          <div className="mb-5 mt-2 border border-gray-800">
-            <div className="grid border-b-2 border-gray-800 sm:grid-cols-2 print:grid-cols-3 print:md:grid-cols-3">
-              <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
+          <div className="mb-5 mt-2 border border-secondary-800">
+            <div className="grid border-b-2 border-secondary-800 sm:grid-cols-2 print:grid-cols-3 print:md:grid-cols-3">
+              <div className="col-span-1 border-b-2 border-secondary-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
                 <b>Name :</b> {patientData?.name ?? ""}
               </div>
               <div className="col-span-1 px-3 py-2">
@@ -66,13 +66,13 @@ const TreatmentSummary = (props: any) => {
               </div>
             </div>
 
-            <div className="grid border-b-2 border-gray-800 sm:grid-cols-2 print:grid-cols-3 print:md:grid-cols-3">
+            <div className="grid border-b-2 border-secondary-800 sm:grid-cols-2 print:grid-cols-3 print:md:grid-cols-3">
               <div className="col-span-1 grid sm:grid-cols-2 print:grid-cols-2 ">
-                <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
+                <div className="col-span-1 border-b-2 border-secondary-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
                   <b>Age :</b>{" "}
                   {patientData ? formatPatientAge(patientData, true) : ""}
                 </div>
-                <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
+                <div className="col-span-1 border-b-2 border-secondary-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
                   <b>OP :</b> {consultationData?.patient_no ?? ""}
                 </div>
               </div>
@@ -91,8 +91,8 @@ const TreatmentSummary = (props: any) => {
               </div>
             </div>
 
-            <div className="grid border-b-2 border-gray-800 sm:grid-cols-2 print:grid-cols-3 print:md:grid-cols-3">
-              <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
+            <div className="grid border-b-2 border-secondary-800 sm:grid-cols-2 print:grid-cols-3 print:md:grid-cols-3">
+              <div className="col-span-1 border-b-2 border-secondary-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
                 <b>Gender : </b>
                 {GENDER_TYPES.find((i) => i.id === patientData?.gender)?.text}
               </div>
@@ -108,14 +108,14 @@ const TreatmentSummary = (props: any) => {
               </div>
             </div>
 
-            <div className="border-b-2 border-gray-800 px-5 py-2">
+            <div className="border-b-2 border-secondary-800 px-5 py-2">
               <b>Comorbidities :</b>
               <div className="mx-0 sm:mx-5 print:mx-5">
-                <table className="w-full border-collapse border border-gray-800">
+                <table className="w-full border-collapse border border-secondary-800">
                   <thead>
                     <tr>
-                      <th className="border border-gray-800">Disease</th>
-                      <th className="border border-gray-800">Details</th>
+                      <th className="border border-secondary-800">Disease</th>
+                      <th className="border border-secondary-800">Details</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -125,10 +125,10 @@ const TreatmentSummary = (props: any) => {
                         (obj: any, index: number) => {
                           return (
                             <tr key={index}>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {obj["disease"]}
                               </td>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {obj["details"] ? obj["details"] : "---"}
                               </td>
                             </tr>
@@ -137,10 +137,10 @@ const TreatmentSummary = (props: any) => {
                       )
                     ) : (
                       <tr>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
                       </tr>
@@ -150,7 +150,7 @@ const TreatmentSummary = (props: any) => {
               </div>
             </div>
 
-            <div className="border-b-2 border-gray-800 px-5 py-2">
+            <div className="border-b-2 border-secondary-800 px-5 py-2">
               <b>Diagnosis :</b>
               <div className="mx-5">
                 <div>
@@ -177,7 +177,7 @@ const TreatmentSummary = (props: any) => {
               </div>
             </div>
 
-            <div className="border-b-2 border-gray-800 px-5 py-2">
+            <div className="border-b-2 border-secondary-800 px-5 py-2">
               <b>General Instructions :</b>
               {patientData?.last_consultation?.consultation_notes ? (
                 <div className="mx-5">
@@ -188,29 +188,29 @@ const TreatmentSummary = (props: any) => {
               )}
             </div>
 
-            <div className="border-b-2 border-gray-800 px-5 py-2">
+            <div className="border-b-2 border-secondary-800 px-5 py-2">
               <b>Relevant investigations :</b>
 
               <div className="mx-0 overflow-x-auto sm:mx-5 print:mx-5">
-                <table className="w-full border-collapse border border-gray-800">
+                <table className="w-full border-collapse border border-secondary-800">
                   <thead>
                     <tr>
-                      <th className="border border-gray-800 text-center">
+                      <th className="border border-secondary-800 text-center">
                         Date
                       </th>
-                      <th className="border border-gray-800 text-center">
+                      <th className="border border-secondary-800 text-center">
                         Name
                       </th>
-                      <th className="border border-gray-800 text-center">
+                      <th className="border border-secondary-800 text-center">
                         Result
                       </th>
-                      <th className="border border-gray-800 text-center">
+                      <th className="border border-secondary-800 text-center">
                         Ideal value
                       </th>
-                      <th className="border border-gray-800 text-center">
+                      <th className="border border-secondary-800 text-center">
                         values range
                       </th>
-                      <th className="border border-gray-800 text-center">
+                      <th className="border border-secondary-800 text-center">
                         unit
                       </th>
                     </tr>
@@ -222,28 +222,28 @@ const TreatmentSummary = (props: any) => {
                         (value: any, index: number) => {
                           return (
                             <tr key={index}>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {formatDate(
                                   value["session_object"][
                                     "session_created_date"
                                   ],
                                 )}
                               </td>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {value["investigation_object"]["name"]}
                               </td>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {value["notes"] || value["value"]}
                               </td>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {value["investigation_object"]["ideal_value"] ||
                                   "-"}
                               </td>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {value["investigation_object"]["min_value"]} -{" "}
                                 {value["investigation_object"]["max_value"]}
                               </td>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {value["investigation_object"]["unit"] || "-"}
                               </td>
                             </tr>
@@ -252,22 +252,22 @@ const TreatmentSummary = (props: any) => {
                       )
                     ) : (
                       <tr>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
                       </tr>
@@ -277,7 +277,7 @@ const TreatmentSummary = (props: any) => {
               </div>
             </div>
 
-            <div className="border-b-2 border-gray-800 px-5 py-2">
+            <div className="border-b-2 border-secondary-800 px-5 py-2">
               <b>Treatment :</b>
               {consultationData?.treatment_plan ? (
                 <p className="ml-4">{consultationData.treatment_plan}</p>
@@ -287,40 +287,42 @@ const TreatmentSummary = (props: any) => {
               <b className="mb-2">Treatment summary/Treament Plan :</b>
 
               <div className="mx-0 overflow-x-auto sm:mx-5 print:mx-5">
-                <table className="w-full border-collapse border border-gray-800">
+                <table className="w-full border-collapse border border-secondary-800">
                   <thead>
                     <tr>
-                      <th className="border border-gray-800">Date</th>
-                      <th className="border border-gray-800">Spo2</th>
-                      <th className="border border-gray-800">Temperature</th>
+                      <th className="border border-secondary-800">Date</th>
+                      <th className="border border-secondary-800">Spo2</th>
+                      <th className="border border-secondary-800">
+                        Temperature
+                      </th>
                     </tr>
                   </thead>
 
                   <tbody>
                     {consultationData?.last_daily_round ? (
                       <tr>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           {formatDateTime(
                             consultationData.last_daily_round.modified_date,
                           )}
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           {consultationData.last_daily_round.ventilator_spo2 ||
                             "-"}
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           {consultationData.last_daily_round.temperature || "-"}
                         </td>
                       </tr>
                     ) : (
                       <tr>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
                       </tr>
diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
index b9caa512137..4fd9346065d 100644
--- a/src/Components/Form/AutoCompleteAsync.tsx
+++ b/src/Components/Form/AutoCompleteAsync.tsx
@@ -118,7 +118,7 @@ const AutoCompleteAsync = (props: Props) => {
                     <div className="tooltip" id="clear-button">
                       <CareIcon
                         icon="l-times-circle"
-                        className="mb-[-5px] h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
+                        className="mb-[-5px] h-4 w-4 text-secondary-800 transition-colors duration-200 ease-in-out hover:text-secondary-500"
                         onClick={(e) => {
                           e.preventDefault();
                           onChange(null);
@@ -144,7 +144,7 @@ const AutoCompleteAsync = (props: Props) => {
           <DropdownTransition>
             <Combobox.Options className="cui-dropdown-base absolute top-12 z-10 text-sm">
               {data?.length === 0 ? (
-                <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
+                <div className="relative cursor-default select-none px-4 py-2 text-secondary-700">
                   {query !== ""
                     ? "Nothing found."
                     : "Start typing to search..."}
@@ -161,7 +161,7 @@ const AutoCompleteAsync = (props: Props) => {
                         <div className="flex items-center gap-2">
                           {optionLabel(item)}
                           {optionLabelChip(item) && (
-                            <div className="mt-1 h-fit max-w-fit rounded-full border border-secondary-400 bg-secondary-100 px-2 text-center text-xs text-gray-900 sm:mt-0">
+                            <div className="mt-1 h-fit max-w-fit rounded-full border border-secondary-400 bg-secondary-100 px-2 text-center text-xs text-secondary-900 sm:mt-0">
                               {optionLabelChip(item)}
                             </div>
                           )}
diff --git a/src/Components/Form/FormFields/Autocomplete.tsx b/src/Components/Form/FormFields/Autocomplete.tsx
index 67b1224cddf..2fbfeacfda4 100644
--- a/src/Components/Form/FormFields/Autocomplete.tsx
+++ b/src/Components/Form/FormFields/Autocomplete.tsx
@@ -167,14 +167,14 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
             />
             {!props.disabled && (
               <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
-                <div className="absolute right-0 top-1 mr-2 flex h-full items-center gap-1 pb-2 text-lg text-gray-900">
+                <div className="absolute right-0 top-1 mr-2 flex h-full items-center gap-1 pb-2 text-lg text-secondary-900">
                   <span>{value?.icon}</span>
 
                   {value && !props.isLoading && !props.required && (
                     <div className="tooltip" id="clear-button">
                       <CareIcon
                         icon="l-times-circle"
-                        className="h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
+                        className="h-4 w-4 text-secondary-800 transition-colors duration-200 ease-in-out hover:text-secondary-500"
                         onClick={(e) => {
                           e.preventDefault();
                           props.onChange(undefined);
@@ -199,7 +199,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
           <DropdownTransition>
             <Combobox.Options className="cui-dropdown-base absolute z-10 mt-0.5 origin-top-right">
               {filteredOptions.length === 0 && (
-                <div className="p-2 text-sm text-gray-500">
+                <div className="p-2 text-sm text-secondary-500">
                   No options found
                 </div>
               )}
@@ -222,10 +222,10 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
                           className={classNames(
                             "text-sm font-normal",
                             option.disabled
-                              ? "text-gray-700"
+                              ? "text-secondary-700"
                               : active
                                 ? "text-primary-200"
-                                : "text-gray-700",
+                                : "text-secondary-700",
                           )}
                         >
                           {option.description}
diff --git a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
index 7857e96889d..6341d2eb231 100644
--- a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
+++ b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
@@ -135,7 +135,7 @@ export const AutocompleteMutliSelect = <T, V>(
                 ref={comboButtonRef}
                 className="absolute inset-y-0 right-0 flex items-center pr-2"
               >
-                <div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-gray-900">
+                <div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-secondary-900">
                   {props.isLoading ? (
                     <CareIcon icon="l-spinner" className="animate-spin" />
                   ) : (
@@ -205,10 +205,10 @@ export const AutocompleteMutliSelect = <T, V>(
                               className={classNames(
                                 "text-sm font-normal",
                                 option.disabled
-                                  ? "text-gray-700"
+                                  ? "text-secondary-700"
                                   : active
                                     ? "text-primary-200"
-                                    : "text-gray-700",
+                                    : "text-secondary-700",
                               )}
                             >
                               {option.description}
diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx
index d3e77aabf52..a6829af9ae4 100644
--- a/src/Components/Form/FormFields/FormField.tsx
+++ b/src/Components/Form/FormFields/FormField.tsx
@@ -16,7 +16,7 @@ export const FieldLabel = (props: LabelProps) => {
     <label
       id={props.id}
       className={classNames(
-        "block text-base font-normal text-gray-900",
+        "block text-base font-normal text-secondary-900",
         !props.noPadding && "mb-2",
         props.className,
       )}
diff --git a/src/Components/Form/FormFields/Month.tsx b/src/Components/Form/FormFields/Month.tsx
index dc04ac913c1..c1075ff8fbf 100644
--- a/src/Components/Form/FormFields/Month.tsx
+++ b/src/Components/Form/FormFields/Month.tsx
@@ -60,7 +60,7 @@ const MonthFormField = (props: Props) => {
         onChange={(event) => setYear(parseInt(event.value))}
       />
       {props.suffix && (
-        <span className="text-gray-600">{props.suffix(field.value)}</span>
+        <span className="text-secondary-600">{props.suffix(field.value)}</span>
       )}
     </FormField>
   );
diff --git a/src/Components/Form/FormFields/NumericWithUnitsFormField.tsx b/src/Components/Form/FormFields/NumericWithUnitsFormField.tsx
index e4cf79c2080..e595e1d697a 100644
--- a/src/Components/Form/FormFields/NumericWithUnitsFormField.tsx
+++ b/src/Components/Form/FormFields/NumericWithUnitsFormField.tsx
@@ -44,7 +44,7 @@ export default function NumericWithUnitsFormField(props: Props) {
           <select
             id={field.name + "_units"}
             name={field.name + "_units"}
-            className="cui-input-base h-full border-0 bg-transparent pl-2 pr-7 text-gray-700 focus:ring-2 focus:ring-inset"
+            className="cui-input-base h-full border-0 bg-transparent pl-2 pr-7 text-secondary-700 focus:ring-2 focus:ring-inset"
             value={unitValue}
             onChange={(e) =>
               field.handleChange(numValue + " " + e.target.value)
diff --git a/src/Components/Form/FormFields/OtpFormField.tsx b/src/Components/Form/FormFields/OtpFormField.tsx
index 33b2754e17b..4446a7032f1 100644
--- a/src/Components/Form/FormFields/OtpFormField.tsx
+++ b/src/Components/Form/FormFields/OtpFormField.tsx
@@ -19,7 +19,7 @@ const OtpFormField = ({ length = 6, ...props }: TextAreaFormFieldProps) => {
           <input
             key={i}
             ref={(element) => (inputs.current[i] = element)}
-            className="form-control m-2 h-10 w-10 rounded border border-gray-600 text-center"
+            className="form-control m-2 h-10 w-10 rounded border border-secondary-600 text-center"
             maxLength={1}
             value={props.value[i]}
             onChange={(e) => {
diff --git a/src/Components/Form/FormFields/PhoneNumberFormField.tsx b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
index c580a15e409..58ad7acd90b 100644
--- a/src/Components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
@@ -160,7 +160,7 @@ const PhoneNumberTypesHelp = (props: { types: PhoneNumberType[] }) => {
   const { t } = useTranslation();
 
   return (
-    <div className="tooltip mt-1 pr-1 text-gray-500">
+    <div className="tooltip mt-1 pr-1 text-secondary-500">
       <CareIcon icon="l-question-circle" className="text-lg" />
       <div className="tooltip-text tooltip-bottom w-64 -translate-x-full whitespace-pre-wrap text-sm">
         Supports only{" "}
@@ -204,7 +204,7 @@ const CountryCodesList = ({
   const [searchValue, setSearchValue] = useState<string>("");
 
   return (
-    <div className="absolute z-10 w-full rounded-md border border-gray-300 bg-white shadow-lg transition-all duration-300">
+    <div className="absolute z-10 w-full rounded-md border border-secondary-300 bg-white shadow-lg transition-all duration-300">
       <div className="relative m-2">
         <CareIcon
           icon="l-search"
@@ -213,7 +213,7 @@ const CountryCodesList = ({
         <input
           type="search"
           placeholder="Search"
-          className="w-full border-b border-gray-400 p-2 pl-10 focus:outline-none focus:ring-0"
+          className="w-full border-b border-secondary-400 p-2 pl-10 focus:outline-none focus:ring-0"
           value={searchValue}
           onChange={(e) => setSearchValue(e.target.value)}
         />
@@ -243,7 +243,7 @@ const CountryCodesList = ({
             >
               <span>{flag}</span>
               <span>{name}</span>
-              <span className="text-gray-600">
+              <span className="text-secondary-600">
                 {" "}
                 ({conditionPhoneCode(code)})
               </span>
@@ -259,7 +259,7 @@ const CountryCodesList = ({
         >
           <span>📞</span>
           <span>Support</span>
-          <span className="text-gray-600"> (1800)</span>
+          <span className="text-secondary-600"> (1800)</span>
         </li>
         <li
           key={"other"}
@@ -271,7 +271,7 @@ const CountryCodesList = ({
         >
           <span>🌍</span>
           <span>Other</span>
-          <span className="text-gray-600"> (+)</span>
+          <span className="text-secondary-600"> (+)</span>
         </li>
       </ul>
     </div>
diff --git a/src/Components/Form/FormFields/RadioFormField.tsx b/src/Components/Form/FormFields/RadioFormField.tsx
index e7f79e14849..e3c97640f34 100644
--- a/src/Components/Form/FormFields/RadioFormField.tsx
+++ b/src/Components/Form/FormFields/RadioFormField.tsx
@@ -17,7 +17,7 @@ const RadioFormField = <T,>(props: Props<T>) => {
         {props.unselectLabel && (
           <div className="flex items-center gap-2">
             <input
-              className="h-4 w-4 rounded-full border-gray-600 text-primary-600 focus:ring-2 focus:ring-primary-500"
+              className="h-4 w-4 rounded-full border-secondary-600 text-primary-600 focus:ring-2 focus:ring-primary-500"
               type="radio"
               id="none"
               name={props.name}
@@ -34,7 +34,7 @@ const RadioFormField = <T,>(props: Props<T>) => {
           return (
             <div className="flex items-center gap-2">
               <input
-                className="h-4 w-4 rounded-full border-gray-600 text-primary-600 focus:ring-2 focus:ring-primary-500"
+                className="h-4 w-4 rounded-full border-secondary-600 text-primary-600 focus:ring-2 focus:ring-primary-500"
                 type="radio"
                 id={optionId}
                 name={props.name}
diff --git a/src/Components/Form/MultiSelectMenuV2.tsx b/src/Components/Form/MultiSelectMenuV2.tsx
index 419664f98e9..ac180a88fca 100644
--- a/src/Components/Form/MultiSelectMenuV2.tsx
+++ b/src/Components/Form/MultiSelectMenuV2.tsx
@@ -49,7 +49,7 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
       disabled: props.optionDisabled?.(option),
       isSelected: props.value?.includes(value as any) ?? false,
       displayChip: (
-        <div className="rounded-full border border-secondary-400 bg-secondary-100 px-2 text-xs text-gray-900">
+        <div className="rounded-full border border-secondary-400 bg-secondary-100 px-2 text-xs text-secondary-900">
           {selectedLabel}
         </div>
       ),
@@ -100,7 +100,7 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
                 >
                   <div className="relative z-0 flex w-full items-center">
                     <div className="relative flex flex-1 items-center pr-4 focus:z-10">
-                      <p className="ml-2.5 text-sm font-normal text-gray-600">
+                      <p className="ml-2.5 text-sm font-normal text-secondary-600">
                         <Placeholder />
                       </p>
 
@@ -126,7 +126,7 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
                     </div>
                     <CareIcon
                       icon="l-angle-down"
-                      className="-mb-0.5 text-lg text-gray-900"
+                      className="-mb-0.5 text-lg text-secondary-900"
                     />
                   </div>
                 </Listbox.Button>
@@ -158,10 +158,10 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
                               className={classNames(
                                 "text-sm font-normal",
                                 option.disabled
-                                  ? "text-gray-700"
+                                  ? "text-secondary-700"
                                   : active
                                     ? "text-primary-200"
-                                    : "text-gray-700",
+                                    : "text-secondary-700",
                               )}
                             >
                               {option.description}
@@ -193,7 +193,7 @@ export const MultiSelectOptionChip = ({
   onRemove,
 }: MultiSelectOptionChipProps) => {
   return (
-    <span className="flex items-center gap-2 rounded-full border-gray-300 bg-gray-200 px-3 text-xs text-gray-700">
+    <span className="flex items-center gap-2 rounded-full border-secondary-300 bg-secondary-200 px-3 text-xs text-secondary-700">
       <p className="py-1">{label}</p>
       {onRemove && (
         <p
@@ -225,8 +225,8 @@ export const dropdownOptionClassNames = ({
     "group/option relative w-full cursor-default select-none p-4 text-sm transition-colors duration-75 ease-in-out",
     !disabled && active && "bg-primary-500 text-white",
     !disabled && !active && selected && "text-primary-500",
-    !disabled && !active && !selected && "text-gray-900",
-    disabled && "cursor-not-allowed text-gray-800",
+    !disabled && !active && !selected && "text-secondary-900",
+    disabled && "cursor-not-allowed text-secondary-800",
     selected ? "font-semibold" : "font-normal",
   );
 };
diff --git a/src/Components/Form/SearchInput.tsx b/src/Components/Form/SearchInput.tsx
index 2d146837ebf..fce9fbd517d 100644
--- a/src/Components/Form/SearchInput.tsx
+++ b/src/Components/Form/SearchInput.tsx
@@ -52,8 +52,8 @@ const SearchInput = ({
       "⌘K"
     ) : (
       <div className="flex gap-1 font-medium">
-        <span className="text-gray-400">Ctrl</span>
-        <span className="text-gray-500">K</span>
+        <span className="text-secondary-400">Ctrl</span>
+        <span className="text-secondary-500">K</span>
       </div>
     ));
 
@@ -73,14 +73,14 @@ const SearchInput = ({
       className={className}
       leading={
         props.leading || (
-          <CareIcon icon="l-search-alt" className="text-gray-600" />
+          <CareIcon icon="l-search-alt" className="text-secondary-600" />
         )
       }
       trailing={
         props.trailing ||
         (!props.secondary && (
           <div className="absolute inset-y-0 right-0 hidden py-1.5 pr-1.5 md:flex">
-            <kbd className="inline-flex items-center rounded border border-gray-200 bg-white px-2 font-sans text-sm font-medium text-gray-500 focus:opacity-0">
+            <kbd className="inline-flex items-center rounded border border-secondary-200 bg-white px-2 font-sans text-sm font-medium text-secondary-500 focus:opacity-0">
               {shortcutKeyIcon}
             </kbd>
           </div>
@@ -88,7 +88,7 @@ const SearchInput = ({
       }
       trailingFocused={
         <div className="absolute inset-y-0 right-0 hidden gap-1 py-1.5 pr-1.5 md:flex">
-          <kbd className="inline-flex items-center rounded border border-gray-200 bg-white px-2 font-sans text-sm font-medium text-gray-500">
+          <kbd className="inline-flex items-center rounded border border-secondary-200 bg-white px-2 font-sans text-sm font-medium text-secondary-500">
             Esc
           </kbd>
         </div>
diff --git a/src/Components/Form/SelectMenuV2.tsx b/src/Components/Form/SelectMenuV2.tsx
index 4483c92fe4c..b3abedfbdd1 100644
--- a/src/Components/Form/SelectMenuV2.tsx
+++ b/src/Components/Form/SelectMenuV2.tsx
@@ -65,7 +65,9 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
     valueOptions?.length > 0 ? props.placeholder ?? "Select" : "No options";
   const defaultOption = {
     label: placeholder,
-    selectedLabel: <p className="font-normal text-gray-600">{placeholder}</p>,
+    selectedLabel: (
+      <p className="font-normal text-secondary-600">{placeholder}</p>
+    ),
     description: undefined,
     icon: undefined,
     value: undefined,
@@ -101,7 +103,7 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
                 <div className="relative z-0 flex w-full items-center">
                   <div className="relative flex flex-1 items-center focus:z-10">
                     {props.showIconWhenSelected && value?.icon && (
-                      <div className="ml-2 text-sm text-gray-700">
+                      <div className="ml-2 text-sm text-secondary-700">
                         {value.icon}
                       </div>
                     )}
@@ -112,7 +114,7 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
                   {showChevronIcon && (
                     <CareIcon
                       icon="l-angle-down"
-                      className="-mb-0.5 text-lg text-gray-900"
+                      className="-mb-0.5 text-lg text-secondary-900"
                     />
                   )}
                 </div>
@@ -151,10 +153,10 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
                                 className={classNames(
                                   "text-sm font-normal",
                                   option.disabled
-                                    ? "text-gray-700"
+                                    ? "text-secondary-700"
                                     : active
                                       ? "text-primary-200"
-                                      : "text-gray-700",
+                                      : "text-secondary-700",
                                 )}
                               >
                                 {option.description}
diff --git a/src/Components/HCX/ClaimDetailCard.tsx b/src/Components/HCX/ClaimDetailCard.tsx
index cc1947396c4..ee6671cc90a 100644
--- a/src/Components/HCX/ClaimDetailCard.tsx
+++ b/src/Components/HCX/ClaimDetailCard.tsx
@@ -17,11 +17,11 @@ export default function ClaimDetailCard({ claim }: IProps) {
     <div className="px-6 lg:px-8">
       <div className="sm:flex sm:items-center">
         <div className="sm:flex-auto">
-          <h1 className="text-xl font-semibold text-gray-700">
+          <h1 className="text-xl font-semibold text-secondary-700">
             #{claim.id?.slice(0, 5)}
           </h1>
 
-          <p className="mt-2 text-sm text-gray-700">
+          <p className="mt-2 text-sm text-secondary-700">
             Created on{" "}
             <time dateTime="2022-08-01">
               {formatDateTime(claim.created_date ?? "")}
@@ -49,37 +49,37 @@ export default function ClaimDetailCard({ claim }: IProps) {
       </div>
       <div className="mt-6 grid grid-cols-2 gap-4">
         <div className="text-center">
-          <h2 className="text-lg font-bold text-gray-800">
+          <h2 className="text-lg font-bold text-secondary-800">
             {claim.policy_object?.policy_id || "NA"}
           </h2>
-          <p className="text-sm text-gray-500">Policy ID</p>
+          <p className="text-sm text-secondary-500">Policy ID</p>
         </div>
         <div className="text-center">
-          <h2 className="text-lg font-bold text-gray-800">
+          <h2 className="text-lg font-bold text-secondary-800">
             {claim.policy_object?.subscriber_id || "NA"}
           </h2>
-          <p className="text-sm text-gray-500">Subscriber ID</p>
+          <p className="text-sm text-secondary-500">Subscriber ID</p>
         </div>
         <div className="text-center">
-          <h2 className="text-lg font-bold text-gray-800">
+          <h2 className="text-lg font-bold text-secondary-800">
             {claim.policy_object?.insurer_id || "NA"}
           </h2>
-          <p className="text-sm text-gray-500">Insurer ID</p>
+          <p className="text-sm text-secondary-500">Insurer ID</p>
         </div>
         <div className="text-center">
-          <h2 className="text-lg font-bold text-gray-800">
+          <h2 className="text-lg font-bold text-secondary-800">
             {claim.policy_object?.insurer_name || "NA"}
           </h2>
-          <p className="text-sm text-gray-500">Insurer Name</p>
+          <p className="text-sm text-secondary-500">Insurer Name</p>
         </div>
       </div>
       <div className="-mx-6 mt-8 flow-root sm:mx-0">
-        <table className="min-w-full divide-y divide-gray-300">
+        <table className="min-w-full divide-y divide-secondary-300">
           <thead>
             <tr>
               <th
                 scope="col"
-                className="py-3.5 pl-6 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"
+                className="py-3.5 pl-6 pr-3 text-left text-sm font-semibold text-secondary-900 sm:pl-0"
               >
                 Items
               </th>
@@ -87,7 +87,7 @@ export default function ClaimDetailCard({ claim }: IProps) {
               <th></th>
               <th
                 scope="col"
-                className="py-3.5 pl-3 pr-6 text-right text-sm font-semibold text-gray-900 sm:pr-0"
+                className="py-3.5 pl-3 pr-6 text-right text-sm font-semibold text-secondary-900 sm:pr-0"
               >
                 Price
               </th>
@@ -95,14 +95,16 @@ export default function ClaimDetailCard({ claim }: IProps) {
           </thead>
           <tbody>
             {claim.items?.map((item) => (
-              <tr key={item.id} className="border-b border-gray-200">
+              <tr key={item.id} className="border-b border-secondary-200">
                 <td className="py-4 pl-6 pr-3 text-sm sm:pl-0">
-                  <div className="font-medium text-gray-900">{item.name}</div>
-                  <div className="mt-0.5 text-gray-500">{item.id}</div>
+                  <div className="font-medium text-secondary-900">
+                    {item.name}
+                  </div>
+                  <div className="mt-0.5 text-secondary-500">{item.id}</div>
                 </td>
                 <td></td>
                 <td></td>
-                <td className="py-4 pl-3 pr-6 text-right text-sm text-gray-500 sm:pr-0">
+                <td className="py-4 pl-3 pr-6 text-right text-sm text-secondary-500 sm:pr-0">
                   {formatCurrency(item.price)}
                 </td>
               </tr>
@@ -113,17 +115,17 @@ export default function ClaimDetailCard({ claim }: IProps) {
               <th
                 scope="row"
                 colSpan={3}
-                className="hidden pl-6 pr-3 pt-6 text-right text-sm font-normal text-gray-500 sm:table-cell sm:pl-0"
+                className="hidden pl-6 pr-3 pt-6 text-right text-sm font-normal text-secondary-500 sm:table-cell sm:pl-0"
               >
                 Total Claim Amount
               </th>
               <th
                 scope="row"
-                className="pl-6 pr-3 pt-6 text-left text-sm font-normal text-gray-500 sm:hidden"
+                className="pl-6 pr-3 pt-6 text-left text-sm font-normal text-secondary-500 sm:hidden"
               >
                 Total Claim Amount
               </th>
-              <td className="pl-3 pr-6 pt-6 text-right text-sm text-gray-500 sm:pr-0">
+              <td className="pl-3 pr-6 pt-6 text-right text-sm text-secondary-500 sm:pr-0">
                 {claim.total_claim_amount &&
                   formatCurrency(claim.total_claim_amount)}
               </td>
@@ -133,17 +135,17 @@ export default function ClaimDetailCard({ claim }: IProps) {
               <th
                 scope="row"
                 colSpan={3}
-                className="hidden pl-6 pr-3 pt-4 text-right text-sm font-semibold text-gray-900 sm:table-cell sm:pl-0"
+                className="hidden pl-6 pr-3 pt-4 text-right text-sm font-semibold text-secondary-900 sm:table-cell sm:pl-0"
               >
                 Total Amount Approved
               </th>
               <th
                 scope="row"
-                className="pl-6 pr-3 pt-4 text-left text-sm font-semibold text-gray-900 sm:hidden"
+                className="pl-6 pr-3 pt-4 text-left text-sm font-semibold text-secondary-900 sm:hidden"
               >
                 Total Amount Approved
               </th>
-              <td className="pl-3 pr-6 pt-4 text-right text-sm font-semibold text-gray-900 sm:pr-0">
+              <td className="pl-3 pr-6 pt-4 text-right text-sm font-semibold text-secondary-900 sm:pr-0">
                 {claim.total_amount_approved
                   ? formatCurrency(claim.total_amount_approved)
                   : "NA"}
diff --git a/src/Components/HCX/ClaimsItemsBuilder.tsx b/src/Components/HCX/ClaimsItemsBuilder.tsx
index c65d7f84c5c..73ca2305030 100644
--- a/src/Components/HCX/ClaimsItemsBuilder.tsx
+++ b/src/Components/HCX/ClaimsItemsBuilder.tsx
@@ -55,7 +55,7 @@ export default function ClaimsItemsBuilder(props: Props) {
           return (
             <div
               key={index}
-              className="rounded-lg border-2 border-dashed border-gray-200 p-4"
+              className="rounded-lg border-2 border-dashed border-secondary-200 p-4"
             >
               <div className="flex items-center justify-between">
                 <FieldLabel className="my-auto !font-bold">
@@ -94,7 +94,7 @@ export default function ClaimsItemsBuilder(props: Props) {
                     <PMJAYProcedurePackageAutocomplete
                       required
                       className="flex-[7]"
-                      labelClassName="text-sm text-gray-700"
+                      labelClassName="text-sm text-secondary-700"
                       label="Procedure"
                       name="hbp"
                       value={obj}
diff --git a/src/Components/HCX/CreateClaimCard.tsx b/src/Components/HCX/CreateClaimCard.tsx
index 1066ae449ae..2ce866d261d 100644
--- a/src/Components/HCX/CreateClaimCard.tsx
+++ b/src/Components/HCX/CreateClaimCard.tsx
@@ -184,7 +184,7 @@ export default function CreateClaimCard({
         <span
           className={classNames(
             policy ? "opacity-0" : "opacity-100",
-            "text-gray-700 transition-opacity duration-300 ease-in-out",
+            "text-secondary-700 transition-opacity duration-300 ease-in-out",
           )}
         >
           Select a policy to add items
diff --git a/src/Components/HCX/InsuranceDetailsBuilder.tsx b/src/Components/HCX/InsuranceDetailsBuilder.tsx
index f75fa387a5f..1e401410ff0 100644
--- a/src/Components/HCX/InsuranceDetailsBuilder.tsx
+++ b/src/Components/HCX/InsuranceDetailsBuilder.tsx
@@ -57,7 +57,7 @@ export default function InsuranceDetailsBuilder(props: Props) {
     <FormField field={field}>
       <ul className="flex flex-col gap-3">
         {props.value?.length === 0 && (
-          <span className="py-16 text-center text-gray-500">
+          <span className="py-16 text-center text-secondary-500">
             No insurance details added
           </span>
         )}
@@ -100,7 +100,7 @@ const InsuranceDetailEditCard = ({
       : undefined;
 
   return (
-    <div className="rounded-lg border-2 border-dashed border-gray-200 p-4">
+    <div className="rounded-lg border-2 border-dashed border-secondary-200 p-4">
       <div className="flex items-center justify-between">
         <FieldLabel className="my-auto !font-bold">Policy</FieldLabel>
         <ButtonV2 variant="danger" type="button" ghost onClick={handleRemove}>
diff --git a/src/Components/Medicine/AdministerMedicine.tsx b/src/Components/Medicine/AdministerMedicine.tsx
index 51bd2cf2617..0fcf7864a8a 100644
--- a/src/Components/Medicine/AdministerMedicine.tsx
+++ b/src/Components/Medicine/AdministerMedicine.tsx
@@ -43,7 +43,7 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
       }
       title={t("administer_medicine")}
       description={
-        <div className="text-sm font-semibold leading-relaxed text-gray-600">
+        <div className="text-sm font-semibold leading-relaxed text-secondary-600">
           <CareIcon icon="l-history-alt" className="pr-1" /> Last administered
           <span className="whitespace-nowrap pl-2">
             <CareIcon icon="l-clock" />{" "}
diff --git a/src/Components/Medicine/ManagePrescriptions.tsx b/src/Components/Medicine/ManagePrescriptions.tsx
index f581f3e2121..fd335ce19fb 100644
--- a/src/Components/Medicine/ManagePrescriptions.tsx
+++ b/src/Components/Medicine/ManagePrescriptions.tsx
@@ -15,7 +15,7 @@ export default function ManagePrescriptions() {
         className="mx-auto flex w-full max-w-4xl flex-col gap-10 rounded bg-white p-6 transition-all sm:rounded-xl sm:p-12"
         id="medicine-preview"
       >
-        <div className="flex flex-col gap-10 divide-y-2 divide-dashed divide-gray-600">
+        <div className="flex flex-col gap-10 divide-y-2 divide-dashed divide-secondary-600">
           <div>
             <h3 className="mb-4 text-lg font-semibold">
               {t("prescription_medications")}
diff --git a/src/Components/Medicine/MedibaseAutocompleteFormField.tsx b/src/Components/Medicine/MedibaseAutocompleteFormField.tsx
index 71a01b23298..55361d20258 100644
--- a/src/Components/Medicine/MedibaseAutocompleteFormField.tsx
+++ b/src/Components/Medicine/MedibaseAutocompleteFormField.tsx
@@ -91,10 +91,10 @@ const OptionDescription = ({ medicine }: { medicine: MedibaseMedicine }) => {
 const OptionChip = (props: { name?: string; value: string }) => {
   return (
     <div className="mt-1 flex h-fit max-w-fit gap-1 whitespace-nowrap rounded-full border border-secondary-400 bg-secondary-100 px-2 text-center text-xs uppercase sm:mt-0">
-      <span className="font-normal text-gray-800">
+      <span className="font-normal text-secondary-800">
         {props.name && props.name + ":"}
       </span>
-      <span className="font-medium text-gray-900">{props.value}</span>
+      <span className="font-medium text-secondary-900">{props.value}</span>
     </div>
   );
 };
diff --git a/src/Components/Medicine/MedicineAdministration.tsx b/src/Components/Medicine/MedicineAdministration.tsx
index 650f720caa0..7a8fb663704 100644
--- a/src/Components/Medicine/MedicineAdministration.tsx
+++ b/src/Components/Medicine/MedicineAdministration.tsx
@@ -111,7 +111,7 @@ export default function MedicineAdministration(props: Props) {
           readonly
           selected={shouldAdminister[index]}
         >
-          <div className="mt-4 flex w-full max-w-sm flex-col gap-2 border-t-2 border-dashed border-gray-500 py-2 pt-4 md:ml-4 md:mt-0 md:border-l-2 md:border-t-0 md:pl-4 md:pt-0">
+          <div className="mt-4 flex w-full max-w-sm flex-col gap-2 border-t-2 border-dashed border-secondary-500 py-2 pt-4 md:ml-4 md:mt-0 md:border-l-2 md:border-t-0 md:pl-4 md:pt-0">
             <CheckBoxFormField
               name="should_administer"
               label={t("select_for_administration")}
@@ -125,7 +125,7 @@ export default function MedicineAdministration(props: Props) {
               }
               errorClassName="hidden"
             />
-            <div className="text-sm font-semibold leading-relaxed text-gray-600">
+            <div className="text-sm font-semibold leading-relaxed text-secondary-600">
               <CareIcon icon="l-history-alt" className="pr-1" />{" "}
               {t("last_administered")}
               <span className="pl-1">
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx
index 0949189d96d..81e92e32a58 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx
@@ -47,7 +47,7 @@ export default function AdministrationEventCell({
           className="w-full md:max-w-4xl"
           show={showTimeline}
         >
-          <div className="mt-6 text-sm font-medium text-gray-700">
+          <div className="mt-6 text-sm font-medium text-secondary-700">
             Administrations on{" "}
             <span className="text-black">
               {formatDateTime(start, "DD/MM/YYYY")}
@@ -87,7 +87,9 @@ export default function AdministrationEventCell({
 
   // Check if cell belongs to after prescription.created_date
   if (dayjs(start).isAfter(prescription.created_date)) {
-    return <CareIcon icon="l-minus-circle" className="text-xl text-gray-400" />;
+    return (
+      <CareIcon icon="l-minus-circle" className="text-xl text-secondary-400" />
+    );
   }
 
   // Check if cell belongs to a discontinued prescription
@@ -105,7 +107,7 @@ export default function AdministrationEventCell({
             "text-xl",
             dayjs(prescription.discontinued_date).isBetween(start, end)
               ? "text-danger-700"
-              : "text-gray-400",
+              : "text-secondary-400",
           )}
         />
         <span className="tooltip-text tooltip-top -translate-x-1/2 text-xs">
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventSeperator.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventSeperator.tsx
index a83fa38bd9c..fdaa48cfea2 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventSeperator.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventSeperator.tsx
@@ -4,7 +4,7 @@ export default function AdministrationEventSeperator({ date }: { date: Date }) {
   // Show date if it's 00:00
   if (date.getHours() === 0) {
     return (
-      <div className="mx-auto flex h-[58px] w-10 flex-col items-center justify-center bg-gray-50 text-center text-xs font-bold text-gray-600 transition-all duration-200 ease-in-out group-hover:bg-primary-500 group-hover:text-white">
+      <div className="bg-secondary-50 mx-auto flex h-[58px] w-10 flex-col items-center justify-center text-center text-xs font-bold text-secondary-600 transition-all duration-200 ease-in-out group-hover:bg-primary-500 group-hover:text-white">
         <span className="-rotate-90 uppercase duration-500 ease-in-out">
           <p> {formatDateTime(date, "DD/MM")}</p>
         </span>
@@ -13,7 +13,7 @@ export default function AdministrationEventSeperator({ date }: { date: Date }) {
   }
 
   return (
-    <div className="mx-auto flex h-[58px] flex-col items-center justify-center text-center text-xs font-bold text-gray-500 transition-all duration-200 ease-in-out">
+    <div className="mx-auto flex h-[58px] flex-col items-center justify-center text-center text-xs font-bold text-secondary-500 transition-all duration-200 ease-in-out">
       <span className="font-bold duration-500 ease-in-out">
         {/* <p>{formatDateTime(date, "HH")}</p> */}
       </span>
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx
index 49a071b744b..f7dbacd5780 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx
@@ -24,9 +24,9 @@ export default function MedicineAdministrationTable({
   return (
     <div className="overflow-x-auto">
       <table className="w-full whitespace-nowrap">
-        <thead className="sticky top-0 z-10 bg-gray-50 text-xs font-medium text-black">
+        <thead className="bg-secondary-50 sticky top-0 z-10 text-xs font-medium text-black">
           <tr>
-            <th className="sticky left-0 z-20 bg-gray-50 py-3 pl-4 text-left">
+            <th className="bg-secondary-50 sticky left-0 z-20 py-3 pl-4 text-left">
               <div className="flex justify-between gap-2">
                 <span className="text-sm">{t("medicine")}</span>
                 <span className="hidden px-2 text-center text-xs leading-none lg:block">
@@ -63,8 +63,8 @@ export default function MedicineAdministrationTable({
                   className={classNames(
                     "leading-none",
                     start.getHours() === 0
-                      ? "text-base font-bold text-gray-800"
-                      : "text-sm font-semibold text-gray-700",
+                      ? "text-base font-bold text-secondary-800"
+                      : "text-sm font-semibold text-secondary-700",
                   )}
                 >
                   {formatDateTime(
@@ -96,7 +96,7 @@ export default function MedicineAdministrationTable({
           </tr>
         </thead>
 
-        <tbody className="divide-y divide-gray-200">
+        <tbody className="divide-y divide-secondary-200">
           {prescriptions.map((obj, index) => (
             <MedicineAdministrationTableRow
               key={obj.id}
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
index 13f5191f429..cc851b47d24 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
@@ -173,12 +173,12 @@ export default function MedicineAdministrationTableRow({
       <tr
         className={classNames(
           "group transition-all duration-200 ease-in-out",
-          loading ? "bg-gray-300" : "bg-white hover:bg-primary-100",
+          loading ? "bg-secondary-300" : "bg-white hover:bg-primary-100",
         )}
         id={props.id}
       >
         <td
-          className="bg-gray-white sticky left-0 z-10 cursor-pointer bg-white py-3 pl-4 text-left transition-all duration-200 ease-in-out group-hover:bg-primary-100"
+          className="bg-secondary-white sticky left-0 z-10 cursor-pointer bg-white py-3 pl-4 text-left transition-all duration-200 ease-in-out group-hover:bg-primary-100"
           onClick={() => setShowDetails(true)}
         >
           <div className="flex flex-col gap-1 lg:flex-row lg:justify-between lg:gap-2">
@@ -186,7 +186,9 @@ export default function MedicineAdministrationTableRow({
               <span
                 className={classNames(
                   "text-sm font-semibold",
-                  prescription.discontinued ? "text-gray-700" : "text-gray-900",
+                  prescription.discontinued
+                    ? "text-secondary-700"
+                    : "text-secondary-900",
                 )}
               >
                 {prescription.medicine_object?.name ??
@@ -194,7 +196,7 @@ export default function MedicineAdministrationTableRow({
               </span>
 
               {prescription.discontinued && (
-                <span className="hidden rounded-full border border-gray-500 bg-gray-200 px-1.5 text-xs font-medium text-gray-700 lg:block">
+                <span className="hidden rounded-full border border-secondary-500 bg-secondary-200 px-1.5 text-xs font-medium text-secondary-700 lg:block">
                   {t("discontinued")}
                 </span>
               )}
@@ -206,7 +208,7 @@ export default function MedicineAdministrationTableRow({
               )}
             </div>
 
-            <div className="flex gap-1 text-xs font-semibold text-gray-900 lg:flex-col lg:px-2 lg:text-center">
+            <div className="flex gap-1 text-xs font-semibold text-secondary-900 lg:flex-col lg:px-2 lg:text-center">
               {prescription.dosage_type !== "TITRATED" ? (
                 <p>{prescription.base_dosage}</p>
               ) : (
@@ -237,7 +239,7 @@ export default function MedicineAdministrationTableRow({
               {!data?.results ? (
                 <CareIcon
                   icon="l-spinner"
-                  className="animate-spin text-lg text-gray-500"
+                  className="animate-spin text-lg text-secondary-500"
                 />
               ) : (
                 <AdministrationEventCell
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
index 29431fefdf9..b7cfce38757 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
@@ -152,7 +152,7 @@ const MedicineAdministrationSheet = ({ readonly, is_prn }: Props) => {
           <ButtonV2
             id="discontinued-medicine"
             variant="secondary"
-            className="group sticky left-0 w-full rounded-b-lg rounded-t-none bg-gray-100"
+            className="group sticky left-0 w-full rounded-b-lg rounded-t-none bg-secondary-100"
             disabled={loading || discontinuedPrescriptions.loading}
             onClick={() => setShowDiscontinued(!showDiscontinued)}
           >
@@ -178,7 +178,7 @@ export default MedicineAdministrationSheet;
 
 const NoPrescriptions = ({ prn }: { prn: boolean }) => {
   return (
-    <div className="my-16 flex w-full flex-col items-center justify-center gap-4 text-gray-500">
+    <div className="my-16 flex w-full flex-col items-center justify-center gap-4 text-secondary-500">
       <CareIcon icon="l-tablets" className="text-5xl" />
       <h3 className="text-lg font-medium">
         {prn
diff --git a/src/Components/Medicine/MedicinePrescriptionSummary.tsx b/src/Components/Medicine/MedicinePrescriptionSummary.tsx
index b77acc090c4..7e0ea3ee244 100644
--- a/src/Components/Medicine/MedicinePrescriptionSummary.tsx
+++ b/src/Components/Medicine/MedicinePrescriptionSummary.tsx
@@ -6,6 +6,7 @@ import { lazy } from "react";
 import Timeline, { TimelineNode } from "../../CAREUI/display/Timeline";
 import { MedibaseMedicine, Prescription } from "../Medicine/models";
 import { useTranslation } from "react-i18next";
+import { humanizeStrings } from "../../Utils/utils";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -57,13 +58,13 @@ export const MedicinePrescriptionSummary = ({
 
   return (
     <div className="pt-6">
-      <p className="text-xl font-bold text-gray-700">{t("summary")}</p>
+      <p className="text-xl font-bold text-secondary-700">{t("summary")}</p>
       <div className="flex flex-col gap-2 pt-4">
         {medicinesList && medicinesList.length > 0 ? (
           medicinesList?.map((med: MedibaseMedicine) => (
             <div
               key={med.id}
-              className="flex cursor-pointer items-center justify-between rounded-lg border bg-white p-4 shadow hover:bg-gray-200"
+              className="flex cursor-pointer items-center justify-between rounded-lg border bg-white p-4 shadow hover:bg-secondary-200"
             >
               <div>{med.name}</div>
               <button
@@ -82,7 +83,7 @@ export const MedicinePrescriptionSummary = ({
           ))
         ) : (
           <div className="rounded-lg border shadow">
-            <div className="my-16 flex w-full flex-col items-center justify-center gap-4 text-gray-500">
+            <div className="my-16 flex w-full flex-col items-center justify-center gap-4 text-secondary-500">
               <h3 className="text-lg font-medium">{"No Medicine Summary"}</h3>
             </div>
           </div>
@@ -310,7 +311,7 @@ export default function ConsultationMedicineLogs({
 
       // If there are changes, add them to the changes array
       if (changesForPrescription.length > 0 && !prevPrescription.discontinued) {
-        const message = `Changes: ${changesForPrescription.join(", ")}`;
+        const message = `Changes: ${humanizeStrings(changesForPrescription)}`;
         changes.push({
           prescriptionId: currentPrescription.id,
           changeMessage: message,
diff --git a/src/Components/Medicine/PrescriptionBuilder.tsx b/src/Components/Medicine/PrescriptionBuilder.tsx
index b480df07b23..a65f9dd9a62 100644
--- a/src/Components/Medicine/PrescriptionBuilder.tsx
+++ b/src/Components/Medicine/PrescriptionBuilder.tsx
@@ -98,7 +98,7 @@ export default function PrescriptionBuilder({
           type="button"
           onClick={() => setShowCreate(true)}
           variant="secondary"
-          className="mt-4 w-full bg-gray-200 text-gray-700 hover:bg-gray-300 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
+          className="mt-4 w-full bg-secondary-200 text-secondary-700 hover:bg-secondary-300 hover:text-secondary-900 focus:bg-secondary-100 focus:text-secondary-900"
           disabled={disabled}
         >
           <div
diff --git a/src/Components/Medicine/PrescriptionDetailCard.tsx b/src/Components/Medicine/PrescriptionDetailCard.tsx
index b28b6504167..ab710b829b0 100644
--- a/src/Components/Medicine/PrescriptionDetailCard.tsx
+++ b/src/Components/Medicine/PrescriptionDetailCard.tsx
@@ -36,9 +36,9 @@ export default function PrescriptionDetailCard({
         "flex flex-col rounded border-2 p-3 transition-all duration-200 ease-in-out md:flex-row",
         props.selected
           ? "border-primary-500"
-          : "border-spacing-2 border-dashed border-gray-500",
-        prescription.discontinued && "bg-gray-200 opacity-80",
-        collapsible && "cursor-pointer hover:border-gray-900",
+          : "border-spacing-2 border-dashed border-secondary-500",
+        prescription.discontinued && "bg-secondary-200 opacity-80",
+        collapsible && "cursor-pointer hover:border-secondary-900",
       )}
     >
       <div
@@ -55,7 +55,7 @@ export default function PrescriptionDetailCard({
               <h3
                 className={classNames(
                   "text-lg font-bold transition-all duration-200 ease-in-out",
-                  props.selected ? "text-black" : "text-gray-700",
+                  props.selected ? "text-black" : "text-secondary-700",
                 )}
               >
                 {isCollapsed ? (
@@ -75,7 +75,7 @@ export default function PrescriptionDetailCard({
                 )}
               </h3>
               {prescription.discontinued && (
-                <span className="rounded-full bg-gray-700 px-2 py-1 text-xs font-semibold uppercase text-white">
+                <span className="rounded-full bg-secondary-700 px-2 py-1 text-xs font-semibold uppercase text-white">
                   {t("discontinued")}
                 </span>
               )}
@@ -232,7 +232,7 @@ export default function PrescriptionDetailCard({
             )}
           </div>
         )}
-        <div className="flex flex-col gap-1 text-xs text-gray-600 md:mt-3 md:flex-row md:items-center">
+        <div className="flex flex-col gap-1 text-xs text-secondary-600 md:mt-3 md:flex-row md:items-center">
           <span className="flex gap-1 font-medium">
             Prescribed
             <RecordMeta
@@ -263,12 +263,14 @@ const Detail = (props: {
   const { t } = useTranslation();
   return (
     <div className={classNames("flex flex-col gap-1", props.className)}>
-      <label className="text-sm font-medium text-gray-600">{props.label}</label>
+      <label className="text-sm font-medium text-secondary-600">
+        {props.label}
+      </label>
       <div className="cui-input-base w-full">
         {props.children ? (
           <span className="font-medium">{props.children}</span>
         ) : (
-          <span className="whitespace-nowrap text-xs font-medium text-gray-500">
+          <span className="whitespace-nowrap text-xs font-medium text-secondary-500">
             {t("not_specified")}
           </span>
         )}
diff --git a/src/Components/Medicine/PrescriptionsTable.tsx b/src/Components/Medicine/PrescriptionsTable.tsx
index f842ccc654b..8feaa0b151f 100644
--- a/src/Components/Medicine/PrescriptionsTable.tsx
+++ b/src/Components/Medicine/PrescriptionsTable.tsx
@@ -69,11 +69,11 @@ export default function PrescriptionsTable({
         </DialogModal>
       )}
       <div className="mb-2 flex flex-wrap items-center justify-between">
-        <div className="flex items-center font-semibold leading-relaxed text-gray-900">
+        <div className="flex items-center font-semibold leading-relaxed text-secondary-900">
           <span className="mr-3 text-lg">
             {is_prn ? "PRN Prescriptions" : "Prescriptions"}
           </span>
-          <div className="text-gray-600">
+          <div className="text-secondary-600">
             <CareIcon icon="l-history-alt" className="pr-2" />
             <span className="text-xs">
               {lastModified && formatDateTime(lastModified)}
@@ -83,7 +83,7 @@ export default function PrescriptionsTable({
       </div>
       <div className="flex flex-col">
         <div className="-my-2 overflow-x-auto py-2 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
-          <div className="inline-block min-w-full overflow-hidden border-b border-gray-200 align-middle shadow sm:rounded-lg">
+          <div className="inline-block min-w-full overflow-hidden border-b border-secondary-200 align-middle shadow sm:rounded-lg">
             <ResponsiveMedicineTable
               onClick={setDetailedViewFor}
               maxWidthColumn={0}
@@ -115,7 +115,7 @@ export default function PrescriptionsTable({
               fieldsToDisplay={[2, 3]}
             />
             {data?.results.length === 0 && (
-              <div className="text-semibold flex items-center justify-center py-2 text-gray-600">
+              <div className="text-semibold flex items-center justify-center py-2 text-secondary-600">
                 {t("no_data_found")}
               </div>
             )}
diff --git a/src/Components/Medicine/ResponsiveMedicineTables.tsx b/src/Components/Medicine/ResponsiveMedicineTables.tsx
index 74623365a1c..073511618f1 100644
--- a/src/Components/Medicine/ResponsiveMedicineTables.tsx
+++ b/src/Components/Medicine/ResponsiveMedicineTables.tsx
@@ -37,13 +37,13 @@ export default function ResponsiveMedicineTable(props: {
             <tr>
               {props.theads.map((item) => {
                 return (
-                  <th className="whitespace-nowrap border-b border-gray-200 bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-800">
+                  <th className="bg-secondary-50 whitespace-nowrap border-b border-secondary-200 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-800">
                     {item}
                   </th>
                 );
               })}
               {props.actions && (
-                <th className="border-b border-gray-200 bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-800">
+                <th className="bg-secondary-50 border-b border-secondary-200 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-800">
                   {props.actionLabel || ""}
                 </th>
               )}
@@ -54,7 +54,7 @@ export default function ResponsiveMedicineTable(props: {
               <tr
                 className={classNames(
                   "bg-white",
-                  props.onClick && "cursor-pointer hover:bg-gray-200",
+                  props.onClick && "cursor-pointer hover:bg-secondary-200",
                 )}
                 key={index}
                 onClick={() => props.onClick && props.onClick(med)}
@@ -65,14 +65,14 @@ export default function ResponsiveMedicineTable(props: {
                     idx === props.maxWidthColumn
                   ) {
                     return (
-                      <td className="w-full px-6 py-4 text-sm font-medium leading-5 text-gray-900">
+                      <td className="w-full px-6 py-4 text-sm font-medium leading-5 text-secondary-900">
                         {med[key]}
                       </td>
                     );
                   }
 
                   return (
-                    <td className="px-6 py-4 text-sm leading-5 text-gray-900">
+                    <td className="px-6 py-4 text-sm leading-5 text-secondary-900">
                       {med[key]}
                     </td>
                   );
@@ -110,11 +110,11 @@ export default function ResponsiveMedicineTable(props: {
               className={
                 props.list.length - 1 === index
                   ? "bg-white p-5 "
-                  : "border-b border-b-gray-400 bg-white p-5"
+                  : "border-b border-b-secondary-400 bg-white p-5"
               }
               key={index}
             >
-              <div className="mt-3 flex w-full flex-col border-t border-t-gray-400">
+              <div className="mt-3 flex w-full flex-col border-t border-t-secondary-400">
                 <div className="mt-3 grid w-full grid-cols-2 gap-3">
                   {props.objectKeys.map((key, i) => {
                     if (i !== 0 && i !== props.objectKeys.length - 1)
diff --git a/src/Components/Notifications/NoticeBoard.tsx b/src/Components/Notifications/NoticeBoard.tsx
index 7835f8576b7..db285eb9d6a 100644
--- a/src/Components/Notifications/NoticeBoard.tsx
+++ b/src/Components/Notifications/NoticeBoard.tsx
@@ -24,13 +24,13 @@ export const NoticeBoard = () => {
           >
             <div className="px-6 py-4">
               <div className="text-justify text-lg">{item.message}</div>
-              <div className="text-md my-2 text-gray-700">
+              <div className="text-md my-2 text-secondary-700">
                 {`${item.caused_by.first_name} ${item.caused_by.last_name}`} -{" "}
                 <span className="font-bold text-primary-700">
                   {item.caused_by.user_type}
                 </span>
               </div>
-              <div className="text-xs text-gray-900">
+              <div className="text-xs text-secondary-900">
                 {t("on")}: {formatDateTime(item.created_date)}
               </div>
             </div>
@@ -42,8 +42,8 @@ export const NoticeBoard = () => {
     notices = (
       <div className=" m-auto flex max-w-xs items-center ">
         <div className="my-36">
-          <CareIcon icon="l-bell-slash" className="h-auto text-gray-500" />
-          <div className=" m-auto mt-6 text-2xl text-gray-500">
+          <CareIcon icon="l-bell-slash" className="h-auto text-secondary-500" />
+          <div className=" m-auto mt-6 text-2xl text-secondary-500">
             No Notice Available
           </div>
         </div>
diff --git a/src/Components/Notifications/NotificationsList.tsx b/src/Components/Notifications/NotificationsList.tsx
index c9e6720e6ad..2de3ae7922c 100644
--- a/src/Components/Notifications/NotificationsList.tsx
+++ b/src/Components/Notifications/NotificationsList.tsx
@@ -95,8 +95,8 @@ const NotificationTile = ({
         setShowNotifications(false);
       }}
       className={classNames(
-        "relative cursor-pointer rounded px-4 py-5 transition duration-200 ease-in-out hover:bg-gray-200 focus:bg-gray-200 md:rounded-lg lg:px-8",
-        result.read_at && "text-gray-500",
+        "relative cursor-pointer rounded px-4 py-5 transition duration-200 ease-in-out hover:bg-secondary-200 focus:bg-secondary-200 md:rounded-lg lg:px-8",
+        result.read_at && "text-secondary-500",
       )}
     >
       <div className="flex justify-between">
@@ -416,7 +416,7 @@ export default function NotificationsList({
   } else if (data && data.length === 0) {
     manageResults = (
       <div className="flex justify-center px-4 pt-3 lg:px-8">
-        <h5 className="text-xl font-bold text-gray-600">
+        <h5 className="text-xl font-bold text-secondary-600">
           {t("no_results_found")}
         </h5>
       </div>
diff --git a/src/Components/Patient/DailyRounds.tsx b/src/Components/Patient/DailyRounds.tsx
index 97ee038362b..89367c6eb37 100644
--- a/src/Components/Patient/DailyRounds.tsx
+++ b/src/Components/Patient/DailyRounds.tsx
@@ -707,7 +707,7 @@ export const DailyRounds = (props: any) => {
 
           {state.form.rounds_type === "DOCTORS_LOG" && (
             <>
-              <div className="flex flex-col gap-10 divide-y-2 divide-dashed divide-gray-600 border-t-2 border-dashed border-gray-600 pt-6 md:col-span-2">
+              <div className="flex flex-col gap-10 divide-y-2 divide-dashed divide-secondary-600 border-t-2 border-dashed border-secondary-600 pt-6 md:col-span-2">
                 <div>
                   <h3 className="mb-4 mt-8 text-lg font-semibold">
                     {t("diagnosis")}
@@ -716,7 +716,7 @@ export const DailyRounds = (props: any) => {
                   {diagnoses ? (
                     <EditDiagnosesBuilder value={diagnoses} />
                   ) : (
-                    <div className="flex animate-pulse justify-center py-4 text-center font-medium text-gray-800">
+                    <div className="flex animate-pulse justify-center py-4 text-center font-medium text-secondary-800">
                       Fetching existing diagnosis of patient...
                     </div>
                   )}
diff --git a/src/Components/Patient/FileUpload.tsx b/src/Components/Patient/FileUpload.tsx
index 6f63a697229..d8f865d3fef 100644
--- a/src/Components/Patient/FileUpload.tsx
+++ b/src/Components/Patient/FileUpload.tsx
@@ -858,7 +858,7 @@ export const FileUpload = (props: FileUploadProps) => {
 
                     <CareIcon
                       icon="l-music"
-                      className="text-6xl text-gray-500"
+                      className="text-6xl text-secondary-500"
                     />
                   </div>
                 ) : (
@@ -880,7 +880,7 @@ export const FileUpload = (props: FileUploadProps) => {
 
                     <CareIcon
                       icon={getIconClassName(item?.extension)}
-                      className="text-6xl text-gray-500"
+                      className="text-6xl text-secondary-500"
                     />
                   </div>
                 )}
@@ -1596,7 +1596,7 @@ export const FileUpload = (props: FileUploadProps) => {
                             <label
                               className={classNames(
                                 consultation?.discharge_date
-                                  ? "cursor-not-allowed bg-gray-200 text-gray-500"
+                                  ? "cursor-not-allowed bg-secondary-200 text-secondary-500"
                                   : "button-primary-default cursor-pointer transition-all duration-200 ease-in-out",
                                 "button-size-default button-shape-square inline-flex h-min w-full items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1",
                               )}
@@ -1646,7 +1646,7 @@ export const FileUpload = (props: FileUploadProps) => {
                     </div>
                   )}
                   {file && (
-                    <div className="mt-2 flex items-center justify-between rounded bg-gray-200 px-4 py-2">
+                    <div className="mt-2 flex items-center justify-between rounded bg-secondary-200 px-4 py-2">
                       {file?.name}
                       <button
                         onClick={() => {
@@ -1684,7 +1684,7 @@ export const FileUpload = (props: FileUploadProps) => {
               )
             ) : (
               <div className="mt-4 rounded-lg border bg-white p-4 shadow">
-                <div className="text-md flex items-center justify-center font-bold text-gray-500">
+                <div className="text-md flex items-center justify-center font-bold text-secondary-500">
                   {"No Unarchived File in the Current Page"}
                 </div>
               </div>
@@ -1709,7 +1709,7 @@ export const FileUpload = (props: FileUploadProps) => {
               )
             ) : (
               <div className="mt-4 rounded-lg border bg-white p-4 shadow">
-                <div className="text-md flex items-center justify-center font-bold text-gray-500">
+                <div className="text-md flex items-center justify-center font-bold text-secondary-500">
                   {"No Archived File in the Current Page"}
                 </div>
               </div>
@@ -1735,7 +1735,7 @@ export const FileUpload = (props: FileUploadProps) => {
                 )
               ) : (
                 <div className="mt-4 rounded-lg border bg-white p-4 shadow">
-                  <div className="text-md flex items-center justify-center font-bold text-gray-500">
+                  <div className="text-md flex items-center justify-center font-bold text-secondary-500">
                     {"No discharge summary files in the current Page"}
                   </div>
                 </div>
diff --git a/src/Components/Patient/InsuranceDetails.tsx b/src/Components/Patient/InsuranceDetails.tsx
index dc8df8ff8a9..41f1da11e89 100644
--- a/src/Components/Patient/InsuranceDetails.tsx
+++ b/src/Components/Patient/InsuranceDetails.tsx
@@ -44,7 +44,7 @@ export const InsuranceDetails = (props: IProps) => {
       {loading ? (
         <Loading />
       ) : insuranceDetials?.count === 0 ? (
-        <div className="mt-5 flex w-full items-center justify-center text-xl font-bold text-gray-500">
+        <div className="mt-5 flex w-full items-center justify-center text-xl font-bold text-secondary-500">
           No Insurance Details Available
         </div>
       ) : (
diff --git a/src/Components/Patient/InsuranceDetailsCard.tsx b/src/Components/Patient/InsuranceDetailsCard.tsx
index b0840db8de6..2d5113d5718 100644
--- a/src/Components/Patient/InsuranceDetailsCard.tsx
+++ b/src/Components/Patient/InsuranceDetailsCard.tsx
@@ -13,7 +13,7 @@ export const InsuranceDetialsCard = (props: InsuranceDetails) => {
   return (
     <div className="w-full">
       <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
-        <div className="border-b border-dashed pb-2 text-xl font-bold text-gray-900">
+        <div className="border-b border-dashed pb-2 text-xl font-bold text-secondary-900">
           Policy Details
         </div>
         {data ? (
@@ -60,7 +60,7 @@ export const InsuranceDetialsCard = (props: InsuranceDetails) => {
                         `/facility/${data.patient_object?.facility_object?.id}/patient/${data.patient_object?.id}/insurance`,
                       );
                     }}
-                    className="h-auto whitespace-pre-wrap border border-gray-500 bg-white text-black hover:bg-gray-300"
+                    className="h-auto whitespace-pre-wrap border border-secondary-500 bg-white text-black hover:bg-secondary-300"
                   >
                     View All Details
                   </ButtonV2>
@@ -69,7 +69,7 @@ export const InsuranceDetialsCard = (props: InsuranceDetails) => {
             )}
           </div>
         ) : (
-          <div className="flex w-full items-center justify-center text-xl font-bold text-gray-500">
+          <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
             No Insurance Details Available
           </div>
         )}
diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 9ddcb4b379c..dbd263463d0 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -33,6 +33,7 @@ import SortDropdownMenu from "../Common/SortDropdown";
 import SwitchTabs from "../Common/components/SwitchTabs";
 import {
   formatPatientAge,
+  humanizeStrings,
   isAntenatal,
   parsePhoneNumber,
 } from "../../Utils/utils.js";
@@ -471,11 +472,11 @@ export const PatientManager = () => {
             </span>
           </div>
           <div className="flex flex-col items-start gap-4 md:flex-row">
-            <div className="h-20 w-full min-w-20 rounded-lg border border-gray-300 bg-gray-50 md:w-20">
+            <div className="bg-secondary-50 h-20 w-full min-w-20 rounded-lg border border-secondary-300 md:w-20">
               {patient?.last_consultation?.current_bed &&
               patient?.last_consultation?.discharge_date === null ? (
                 <div className="tooltip flex h-full flex-col items-center justify-center">
-                  <span className="w-full truncate px-1 text-center text-sm text-gray-900">
+                  <span className="w-full truncate px-1 text-center text-sm text-secondary-900">
                     {
                       patient?.last_consultation?.current_bed?.bed_object
                         ?.location_object?.name
@@ -498,7 +499,7 @@ export const PatientManager = () => {
                   <div className="tooltip">
                     <CareIcon
                       icon="l-estate"
-                      className="text-3xl text-gray-500"
+                      className="text-3xl text-secondary-500"
                     />
                     <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-sm font-medium">
                       Domiciliary Care
@@ -509,7 +510,7 @@ export const PatientManager = () => {
                 <div className="flex min-h-20 items-center justify-center">
                   <CareIcon
                     icon="l-user-injured"
-                    className="text-3xl text-gray-500"
+                    className="text-3xl text-secondary-500"
                   />
                 </div>
               )}
@@ -521,14 +522,14 @@ export const PatientManager = () => {
                   id="patient-name-list"
                 >
                   <span className="text-xl capitalize">{patient.name}</span>
-                  <span className="font-bold text-gray-700">
+                  <span className="font-bold text-secondary-700">
                     {formatPatientAge(patient, true)}
                   </span>
                 </div>
               </div>
 
               {patient.action && patient.action != 10 && (
-                <span className="text-sm font-semibold text-gray-700">
+                <span className="text-sm font-semibold text-secondary-700">
                   {
                     TELEMEDICINE_ACTIONS.find((i) => i.id === patient.action)
                       ?.desc
@@ -539,13 +540,15 @@ export const PatientManager = () => {
               {patient.facility_object && (
                 <div className="mb-2">
                   <div className="flex flex-wrap items-center">
-                    <p className="mr-2 text-sm font-medium text-gray-700">
+                    <p className="mr-2 text-sm font-medium text-secondary-700">
                       {patient.facility_object.name}
                     </p>
                     <RecordMeta
-                      className="text-sm text-gray-900"
+                      className="text-sm text-secondary-900"
                       prefix={
-                        <span className="text-gray-600">{t("updated")}</span>
+                        <span className="text-secondary-600">
+                          {t("updated")}
+                        </span>
                       }
                       time={patient.modified_date}
                     />
@@ -712,7 +715,9 @@ export const PatientManager = () => {
   } else if (data && data.count === 0) {
     managePatients = (
       <div className="col-span-3 w-full rounded-lg bg-white p-2 py-8 pt-4 text-center">
-        <p className="text-2xl font-bold text-gray-600">No Patients Found</p>
+        <p className="text-2xl font-bold text-secondary-600">
+          No Patients Found
+        </p>
       </div>
     );
   }
@@ -1027,7 +1032,7 @@ export const PatientManager = () => {
               value(
                 DIAGNOSES_FILTER_LABELS[key],
                 key,
-                getDiagnosisFilterValue(key).join(", "),
+                humanizeStrings(getDiagnosisFilterValue(key)),
               ),
             ),
             badge("Declared Status", "is_declared_positive"),
diff --git a/src/Components/Patient/PatientConsentRecordBlock.tsx b/src/Components/Patient/PatientConsentRecordBlock.tsx
index 4998ded0acf..5b25f5b27be 100644
--- a/src/Components/Patient/PatientConsentRecordBlock.tsx
+++ b/src/Components/Patient/PatientConsentRecordBlock.tsx
@@ -114,18 +114,18 @@ export default function PatientConsentRecordBlockGroup(props: {
       {files?.map((file: FileUploadModel, i: number) => (
         <div
           key={i}
-          className={`flex flex-col justify-between gap-2 rounded-lg border border-gray-300 xl:flex-row xl:items-center ${showArchive ? "text-gray-600" : "bg-white"}  px-4 py-2 transition-all hover:bg-gray-100`}
+          className={`flex flex-col justify-between gap-2 rounded-lg border border-secondary-300 xl:flex-row xl:items-center ${showArchive ? "text-secondary-600" : "bg-white"}  px-4 py-2 transition-all hover:bg-secondary-100`}
         >
           <div className="flex items-center gap-4 ">
             <div>
-              <CareIcon icon="l-file" className="text-5xl text-gray-600" />
+              <CareIcon icon="l-file" className="text-5xl text-secondary-600" />
             </div>
             <div className="min-w-[40%] break-all">
               <div className="">
                 {file.name}
                 {file.extension} {file.is_archived && "(Archived)"}
               </div>
-              <div className="text-xs text-gray-700">
+              <div className="text-xs text-secondary-700">
                 {dayjs(
                   file.is_archived ? file.archived_datetime : file.created_date,
                 ).format("DD MMM YYYY, hh:mm A")}{" "}
diff --git a/src/Components/Patient/PatientConsentRecords.tsx b/src/Components/Patient/PatientConsentRecords.tsx
index d850179c6d0..7faf6702196 100644
--- a/src/Components/Patient/PatientConsentRecords.tsx
+++ b/src/Components/Patient/PatientConsentRecords.tsx
@@ -282,7 +282,7 @@ export default function PatientConsentRecords(props: {
             (r) =>
               files?.results.filter((f) => f.associating_id === r.id).length,
           ).length === 0 ? (
-            <div className="flex h-32 items-center justify-center text-gray-500">
+            <div className="flex h-32 items-center justify-center text-secondary-500">
               No consent records found
             </div>
           ) : (
diff --git a/src/Components/Patient/PatientHome.tsx b/src/Components/Patient/PatientHome.tsx
index 53a6a8215aa..1bee5a3b245 100644
--- a/src/Components/Patient/PatientHome.tsx
+++ b/src/Components/Patient/PatientHome.tsx
@@ -426,7 +426,7 @@ export const PatientHome = (props: any) => {
                     <div>
                       <a
                         href={`tel:${patientData.phone_number}`}
-                        className="text-sm font-medium text-black hover:text-gray-500"
+                        className="text-sm font-medium text-black hover:text-secondary-500"
                       >
                         {patientData.phone_number || "-"}
                       </a>
@@ -447,11 +447,11 @@ export const PatientHome = (props: any) => {
                   <div className="text-sm font-semibold leading-5 text-zinc-400">
                     Emergency Contact
                   </div>
-                  <div className="mt-1 text-sm leading-5 text-gray-900">
+                  <div className="mt-1 text-sm leading-5 text-secondary-900">
                     <div>
                       <a
                         href={`tel:${patientData.emergency_phone_number}`}
-                        className="text-sm font-medium text-black hover:text-gray-500"
+                        className="text-sm font-medium text-black hover:text-secondary-500"
                       >
                         {patientData.emergency_phone_number || "-"}
                       </a>
@@ -555,7 +555,7 @@ export const PatientHome = (props: any) => {
                       className={
                         "mb-6 inline-flex w-full items-center justify-center rounded-md border p-3 text-xs font-semibold leading-4 shadow-sm lg:mt-0 " +
                         (dayjs().isBefore(patientData.review_time)
-                          ? " bg-gray-100"
+                          ? " bg-secondary-100"
                           : " bg-red-600/5 p-1 text-sm font-normal text-red-600")
                       }
                     >
@@ -571,23 +571,23 @@ export const PatientHome = (props: any) => {
                 <div className="mb-6 rounded-sm bg-white p-2 text-center shadow">
                   <div className="flex justify-between">
                     <div className="w-1/2 border-r-2">
-                      <div className="text-sm font-normal leading-5 text-gray-500">
+                      <div className="text-sm font-normal leading-5 text-secondary-500">
                         Status
                       </div>
-                      <div className="mt-1 text-xl font-semibold leading-5 text-gray-900">
+                      <div className="mt-1 text-xl font-semibold leading-5 text-secondary-900">
                         {patientData.is_active ? "LIVE" : "DISCHARGED"}
                       </div>
                     </div>
                     <div className="w-1/2">
-                      <div className="text-sm font-normal leading-5 text-gray-500">
+                      <div className="text-sm font-normal leading-5 text-secondary-500">
                         Last Discharged Reason
                       </div>
-                      <div className="mt-1 text-xl font-semibold leading-5 text-gray-900">
+                      <div className="mt-1 text-xl font-semibold leading-5 text-secondary-900">
                         {patientData.is_active ? (
                           "-"
                         ) : !patientData.last_consultation
                             ?.new_discharge_reason ? (
-                          <span className="text-gray-800">
+                          <span className="text-secondary-800">
                             {patientData?.last_consultation?.suggestion === "OP"
                               ? "OP file closed"
                               : "UNKNOWN"}
@@ -611,10 +611,10 @@ export const PatientHome = (props: any) => {
                 </div>
                 <div className="mt-2 flex justify-between rounded-sm bg-white p-2 px-4 text-center shadow">
                   <div className="w-1/2 border-r-2 pb-1 pr-2">
-                    <div className="text-sm font-normal leading-5 text-gray-500">
+                    <div className="text-sm font-normal leading-5 text-secondary-500">
                       Created
                     </div>
-                    <div className="mt-1 whitespace-normal text-sm font-semibold leading-5 text-gray-900">
+                    <div className="mt-1 whitespace-normal text-sm font-semibold leading-5 text-secondary-900">
                       <div className="flex justify-center text-sm font-semibold">
                         <RelativeDateUserMention
                           actionDate={patientData.created_date}
@@ -624,10 +624,10 @@ export const PatientHome = (props: any) => {
                     </div>
                   </div>
                   <div className="w-1/2 pb-1 pl-2">
-                    <div className="text-sm font-normal leading-5 text-gray-500">
+                    <div className="text-sm font-normal leading-5 text-secondary-500">
                       Last Edited
                     </div>
-                    <div className="mt-1 whitespace-normal text-sm leading-5 text-gray-900">
+                    <div className="mt-1 whitespace-normal text-sm leading-5 text-secondary-900">
                       <div className="flex justify-center whitespace-normal text-sm font-semibold">
                         <RelativeDateUserMention
                           actionDate={patientData.modified_date}
@@ -649,7 +649,7 @@ export const PatientHome = (props: any) => {
                       name="death_report"
                       onClick={() => navigate(`/death_report/${id}`)}
                     >
-                      <CareIcon icon="l-file-download" className="mr-2" />
+                      <CareIcon icon="l-file-download" className="text-lg" />
                       Death Report
                     </ButtonV2>
                   </div>
@@ -706,9 +706,9 @@ export const PatientHome = (props: any) => {
             </div>
           </div>
         </section>
-        <section className=" mt-7 h-full space-y-2 rounded-lg bg-white p-4 text-gray-100 shadow">
+        <section className=" mt-7 h-full space-y-2 rounded-lg bg-white p-4 text-secondary-100 shadow">
           <div
-            className="flex cursor-pointer justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-gray-900"
+            className="flex cursor-pointer justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-secondary-900"
             onClick={() => {
               setShowShifts(!showShifts);
               setIsShiftClicked(true);
@@ -755,7 +755,7 @@ export const PatientHome = (props: any) => {
                                 icon="l-truck"
                                 className="mr-2 text-lg"
                               />
-                              <dd className="text-sm font-bold leading-5 text-gray-900">
+                              <dd className="text-sm font-bold leading-5 text-secondary-900">
                                 {shift.status}
                               </dd>
                             </dt>
@@ -769,7 +769,7 @@ export const PatientHome = (props: any) => {
                                 icon="l-plane-fly"
                                 className="mr-2 text-lg"
                               />
-                              <dd className="text-sm font-bold leading-5 text-gray-900">
+                              <dd className="text-sm font-bold leading-5 text-secondary-900">
                                 {(shift.origin_facility_object || {})?.name}
                               </dd>
                             </dt>
@@ -783,7 +783,7 @@ export const PatientHome = (props: any) => {
                                 icon="l-user-check"
                                 className="mr-2 text-lg"
                               />
-                              <dd className="text-sm font-bold leading-5 text-gray-900">
+                              <dd className="text-sm font-bold leading-5 text-secondary-900">
                                 {
                                   (
                                     shift.shifting_approving_facility_object ||
@@ -802,7 +802,7 @@ export const PatientHome = (props: any) => {
                                 icon="l-plane-arrival"
                                 className="mr-2 text-lg"
                               />
-                              <dd className="text-sm font-bold leading-5 text-gray-900">
+                              <dd className="text-sm font-bold leading-5 text-secondary-900">
                                 {(shift.assigned_facility_object || {})?.name ||
                                   "Yet to be decided"}
                               </dd>
@@ -817,7 +817,7 @@ export const PatientHome = (props: any) => {
                                 (dayjs()
                                   .subtract(2, "hours")
                                   .isBefore(shift.modified_date)
-                                  ? "text-gray-900"
+                                  ? "text-secondary-900"
                                   : "rounded p-1 font-normal text-red-600")
                               }
                             >
@@ -835,7 +835,7 @@ export const PatientHome = (props: any) => {
 
                       <div className="mt-2 flex">
                         <ButtonV2
-                          className="mr-2 w-full bg-white hover:bg-gray-100"
+                          className="mr-2 w-full bg-white hover:bg-secondary-100"
                           variant="secondary"
                           onClick={() =>
                             navigate(`/shifting/${shift.external_id}`)
@@ -885,7 +885,7 @@ export const PatientHome = (props: any) => {
                 </div>
               ))
             ) : (
-              <div className=" text-center text-gray-500">
+              <div className=" text-center text-secondary-500">
                 {isShiftDataLoading ? "Loading..." : "No Shifting Records!"}
               </div>
             )}
@@ -898,7 +898,7 @@ export const PatientHome = (props: any) => {
         >
           <div className="w-full">
             <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
-              <div className="border-b border-dashed pb-2 text-xl font-bold text-gray-900">
+              <div className="border-b border-dashed pb-2 text-xl font-bold text-secondary-900">
                 Location
               </div>
               <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
@@ -960,7 +960,7 @@ export const PatientHome = (props: any) => {
           </div>
           <div className="w-full">
             <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
-              <div className="border-b border-dashed pb-2 text-xl font-bold text-gray-900">
+              <div className="border-b border-dashed pb-2 text-xl font-bold text-secondary-900">
                 Medical
               </div>
               {!patientData.present_health &&
@@ -970,7 +970,7 @@ export const PatientHome = (props: any) => {
                 !patientData.medical_history?.some(
                   (history) => history.disease !== "NO",
                 ) && (
-                  <div className="flex w-full items-center justify-center text-xl font-bold text-gray-500">
+                  <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
                     No Medical History Available
                   </div>
                 )}
@@ -1045,7 +1045,7 @@ export const PatientHome = (props: any) => {
                   "w-full rounded-lg border",
                   isPatientEligibleForNewConsultation(patientData)
                     ? "cursor-pointer border-green-700 hover:bg-primary-400"
-                    : "border-gray-700 text-gray-700 hover:cursor-not-allowed",
+                    : "border-secondary-700 text-secondary-700 hover:cursor-not-allowed",
                 )}
                 onClick={() =>
                   isPatientEligibleForNewConsultation(patientData) &&
@@ -1058,7 +1058,7 @@ export const PatientHome = (props: any) => {
                   className={classNames(
                     "h-full space-y-2 rounded-lg bg-white p-4 shadow",
                     isPatientEligibleForNewConsultation(patientData) &&
-                      "hover:bg-gray-200",
+                      "hover:bg-secondary-200",
                   )}
                 >
                   <div
@@ -1087,7 +1087,7 @@ export const PatientHome = (props: any) => {
                 className="w-full"
                 onClick={() => navigate(`/patient/${id}/investigation_reports`)}
               >
-                <div className="h-full space-y-2 rounded-lg border border-green-700 bg-white p-4 shadow hover:cursor-pointer hover:bg-gray-200">
+                <div className="h-full space-y-2 rounded-lg border border-green-700 bg-white p-4 shadow hover:cursor-pointer hover:bg-secondary-200">
                   <div className="text-center text-green-700">
                     <span>
                       <CareIcon icon="l-file-search-alt" className="text-5xl" />
@@ -1108,7 +1108,7 @@ export const PatientHome = (props: any) => {
                   )
                 }
               >
-                <div className="h-full space-y-2 rounded-lg border border-green-700 bg-white p-4 shadow hover:cursor-pointer hover:bg-gray-200">
+                <div className="h-full space-y-2 rounded-lg border border-green-700 bg-white p-4 shadow hover:cursor-pointer hover:bg-secondary-200">
                   <div className="text-center text-green-700">
                     <span>
                       <CareIcon icon="l-file-upload" className="text-5xl" />
@@ -1132,14 +1132,14 @@ export const PatientHome = (props: any) => {
                 <div
                   className={`h-full space-y-2 rounded-lg border bg-white p-4 shadow ${
                     isPatientInactive(patientData, facilityId)
-                      ? " border-gray-700 hover:cursor-not-allowed"
-                      : " border-green-700 hover:cursor-pointer hover:bg-gray-200"
+                      ? " border-secondary-700 hover:cursor-not-allowed"
+                      : " border-green-700 hover:cursor-pointer hover:bg-secondary-200"
                   } `}
                 >
                   <div
                     className={`${
                       isPatientInactive(patientData, facilityId)
-                        ? "text-gray-700"
+                        ? "text-secondary-700"
                         : "text-green-700"
                     }  text-center `}
                   >
@@ -1152,7 +1152,7 @@ export const PatientHome = (props: any) => {
                     <p
                       className={`${
                         isPatientInactive(patientData, facilityId) &&
-                        "text-gray-700"
+                        "text-secondary-700"
                       }  text-center text-sm font-medium`}
                     >
                       Shift Patient
@@ -1174,14 +1174,14 @@ export const PatientHome = (props: any) => {
                   className={classNames(
                     "h-full space-y-2 rounded-lg border bg-white p-4 shadow",
                     isPatientInactive(patientData, facilityId)
-                      ? " border-gray-700 hover:cursor-not-allowed"
-                      : " border-green-700 hover:cursor-pointer hover:bg-gray-200",
+                      ? " border-secondary-700 hover:cursor-not-allowed"
+                      : " border-green-700 hover:cursor-pointer hover:bg-secondary-200",
                   )}
                 >
                   <div
                     className={`${
                       isPatientInactive(patientData, facilityId)
-                        ? " text-gray-700 "
+                        ? " text-secondary-700 "
                         : " text-green-700 "
                     } text-center  `}
                   >
@@ -1193,7 +1193,7 @@ export const PatientHome = (props: any) => {
                     <p
                       className={`${
                         isPatientInactive(patientData, facilityId) &&
-                        " text-gray-700 "
+                        " text-secondary-700 "
                       } text-center text-sm font-medium`}
                     >
                       Request Sample Test
@@ -1209,7 +1209,7 @@ export const PatientHome = (props: any) => {
                   )
                 }
               >
-                <div className="h-full space-y-2 rounded-lg border border-green-700 bg-white p-4 shadow hover:cursor-pointer hover:bg-gray-200">
+                <div className="h-full space-y-2 rounded-lg border border-green-700 bg-white p-4 shadow hover:cursor-pointer hover:bg-secondary-200">
                   <div className="text-center text-green-700">
                     <span>
                       <CareIcon icon="l-clipboard-notes" className="text-5xl" />
@@ -1234,15 +1234,15 @@ export const PatientHome = (props: any) => {
                   className={classNames(
                     "h-full space-y-2 rounded-lg border bg-white p-4 shadow",
                     isPatientInactive(patientData, facilityId)
-                      ? "border-gray-700 hover:cursor-not-allowed"
-                      : "border-green-700 hover:cursor-pointer hover:bg-gray-200",
+                      ? "border-secondary-700 hover:cursor-not-allowed"
+                      : "border-green-700 hover:cursor-pointer hover:bg-secondary-200",
                   )}
                 >
                   <div
                     className={classNames(
                       "text-center",
                       isPatientInactive(patientData, facilityId)
-                        ? "text-gray-700"
+                        ? "text-secondary-700"
                         : "text-green-700",
                     )}
                   >
@@ -1255,7 +1255,7 @@ export const PatientHome = (props: any) => {
                       className={classNames(
                         "text-center text-sm font-medium",
                         isPatientInactive(patientData, facilityId)
-                          ? "text-gray-700"
+                          ? "text-secondary-700"
                           : "text-black",
                       )}
                     >
@@ -1268,7 +1268,7 @@ export const PatientHome = (props: any) => {
           </div>
           <div className="mx-2 w-full lg:hidden">
             <div className="h-full space-y-2 rounded-lg bg-white p-4 shadow">
-              <div className="space-y-2 border-b border-dashed text-left text-lg font-semibold text-gray-900">
+              <div className="space-y-2 border-b border-dashed text-left text-lg font-semibold text-secondary-900">
                 <div>
                   <ButtonV2
                     className="w-full"
@@ -1426,7 +1426,7 @@ export const PatientHome = (props: any) => {
               </PaginatedList.WhenLoading>
               <PaginatedList.WhenEmpty className="py-2">
                 <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
-                  <div className="flex w-full items-center justify-center text-xl font-bold text-gray-500">
+                  <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
                     No Consultation History Available
                   </div>
                 </div>
@@ -1466,7 +1466,7 @@ export const PatientHome = (props: any) => {
               </PaginatedList.WhenLoading>
               <PaginatedList.WhenEmpty className="py-2">
                 <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
-                  <div className="flex w-full items-center justify-center text-xl font-bold text-gray-500">
+                  <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
                     No Sample Test History Available
                   </div>
                 </div>
diff --git a/src/Components/Patient/PatientInfoCard.tsx b/src/Components/Patient/PatientInfoCard.tsx
index d3ad76bf661..66545447e7a 100644
--- a/src/Components/Patient/PatientInfoCard.tsx
+++ b/src/Components/Patient/PatientInfoCard.tsx
@@ -19,6 +19,7 @@ import {
   formatDate,
   formatDateTime,
   formatPatientAge,
+  humanizeStrings,
 } from "../../Utils/utils.js";
 import ABHAProfileModal from "../ABDM/ABHAProfileModal.js";
 import LinkABHANumberModal from "../ABDM/LinkABHANumberModal.js";
@@ -45,16 +46,8 @@ import { AuthorizedForConsultationRelatedActions } from "../../CAREUI/misc/Autho
 const formatSkills = (arr: SkillModel[]) => {
   const skills = arr.map((skill) => skill.skill_object.name);
 
-  if (skills.length === 1) {
-    return skills[0];
-  }
-
-  if (skills.length === 2) {
-    return `${skills[0]} and ${skills[1]}`;
-  }
-
-  if (skills.length === 3) {
-    return `${skills[0]}, ${skills[1]} and ${skills[2]}`;
+  if (skills.length <= 3) {
+    return humanizeStrings(skills);
   }
 
   return `${skills[0]}, ${skills[1]} and ${skills.length - 2} other skills...`;
@@ -218,12 +211,12 @@ export default function PatientInfoCard(props: {
           <div className="flex justify-evenly lg:justify-normal">
             <div className="flex flex-col items-start lg:items-center">
               <div
-                className={`w-24 min-w-20 bg-gray-200 ${categoryClass}-profile h-24`}
+                className={`w-24 min-w-20 bg-secondary-200 ${categoryClass}-profile h-24`}
               >
                 {consultation?.current_bed &&
                 consultation?.discharge_date === null ? (
                   <div className="tooltip flex h-full flex-col items-center justify-center">
-                    <p className="w-full truncate px-2 text-center text-sm text-gray-900">
+                    <p className="w-full truncate px-2 text-center text-sm text-secondary-900">
                       {
                         consultation?.current_bed?.bed_object?.location_object
                           ?.name
@@ -246,7 +239,7 @@ export default function PatientInfoCard(props: {
                   <div className="flex h-full items-center justify-center">
                     <CareIcon
                       icon="l-user-injured"
-                      className="text-3xl text-gray-500"
+                      className="text-3xl text-secondary-500"
                     />
                   </div>
                 )}
@@ -274,7 +267,7 @@ export default function PatientInfoCard(props: {
                 id="patient-name-consultation"
               >
                 {patient.name}
-                <div className="ml-3 mr-2 mt-[6px] text-sm font-semibold text-gray-600">
+                <div className="ml-3 mr-2 mt-[6px] text-sm font-semibold text-secondary-600">
                   {formatPatientAge(patient, true)} • {patient.gender}
                 </div>
                 <div className="mr-3 flex flex-col items-center">
@@ -319,13 +312,13 @@ export default function PatientInfoCard(props: {
                 id="patient-name-consultation"
               >
                 {patient.name}
-                <div className="ml-3 mr-2 mt-[6px] text-sm font-semibold text-gray-600">
+                <div className="ml-3 mr-2 mt-[6px] text-sm font-semibold text-secondary-600">
                   {formatPatientAge(patient, true)} • {patient.gender}
                 </div>
               </div>
               <div className="flex flex-wrap items-center gap-2 text-sm sm:flex-row">
                 <div
-                  className="flex w-full flex-wrap items-center justify-center gap-2 text-sm text-gray-900 sm:flex-row sm:text-sm md:pr-10 lg:justify-normal"
+                  className="flex w-full flex-wrap items-center justify-center gap-2 text-sm text-secondary-900 sm:flex-row sm:text-sm md:pr-10 lg:justify-normal"
                   id="patient-consultationbadges"
                 >
                   {consultation?.patient_no && (
@@ -339,7 +332,7 @@ export default function PatientInfoCard(props: {
                   )}
                   {patient.action && patient.action != 10 && (
                     <div>
-                      <div className="inline-flex w-full items-center justify-start rounded border border-gray-500 bg-blue-100 p-1 px-3 text-xs font-semibold leading-4">
+                      <div className="inline-flex w-full items-center justify-start rounded border border-secondary-500 bg-blue-100 p-1 px-3 text-xs font-semibold leading-4">
                         <span className="font-semibold text-indigo-800">
                           {" "}
                           {
@@ -353,7 +346,7 @@ export default function PatientInfoCard(props: {
                   )}
                   <div>
                     {patient.blood_group && (
-                      <div className="inline-flex w-full items-center justify-start rounded border border-gray-500 bg-gray-100 p-1 px-2 text-xs font-semibold leading-4">
+                      <div className="inline-flex w-full items-center justify-start rounded border border-secondary-500 bg-secondary-100 p-1 px-2 text-xs font-semibold leading-4">
                         Blood Group: {patient.blood_group}
                       </div>
                     )}
@@ -364,9 +357,9 @@ export default function PatientInfoCard(props: {
                       <div>
                         <div
                           className={
-                            "inline-flex w-full items-center justify-center rounded border border-gray-500 p-1 text-xs font-semibold leading-4 " +
+                            "inline-flex w-full items-center justify-center rounded border border-secondary-500 p-1 text-xs font-semibold leading-4 " +
                             (dayjs().isBefore(patient.review_time)
-                              ? " bg-gray-100 "
+                              ? " bg-secondary-100 "
                               : " bg-red-400 text-white")
                           }
                         >
@@ -393,10 +386,10 @@ export default function PatientInfoCard(props: {
                   {consultation?.suggestion === "DC" && (
                     <div>
                       <div>
-                        <div className="inline-flex w-full items-center justify-start rounded border border-gray-500 bg-gray-100 p-1 px-3 text-xs font-semibold leading-4">
+                        <div className="inline-flex w-full items-center justify-start rounded border border-secondary-500 bg-secondary-100 p-1 px-3 text-xs font-semibold leading-4">
                           <CareIcon
                             icon="l-estate"
-                            className="mr-1 text-base text-gray-700"
+                            className="mr-1 text-base text-secondary-700"
                           />
                           <span>Domiciliary Care</span>
                         </div>
@@ -423,7 +416,7 @@ export default function PatientInfoCard(props: {
                       <div className="flex flex-col items-center gap-2 text-sm">
                         <div
                           key={"patient_stat_" + i}
-                          className="flex items-center justify-center rounded border border-gray-500 bg-gray-100 p-1 px-3 text-xs font-semibold leading-4"
+                          className="flex items-center justify-center rounded border border-secondary-500 bg-secondary-100 p-1 px-3 text-xs font-semibold leading-4"
                         >
                           {stat[0]} : {stat[1]}
                         </div>
@@ -462,7 +455,7 @@ export default function PatientInfoCard(props: {
                       </div>
                     </div>
                   ) : (
-                    <div className="flex items-center justify-center rounded border border-gray-500 bg-gray-100 p-1 px-3 text-xs font-semibold leading-4">
+                    <div className="flex items-center justify-center rounded border border-secondary-500 bg-secondary-100 p-1 px-3 text-xs font-semibold leading-4">
                       <span className="flex">
                         {consultation?.encounter_date && (
                           <div>
@@ -526,7 +519,7 @@ export default function PatientInfoCard(props: {
                       className="fill-current text-xl text-green-500"
                     />
                     <br className="md:hidden" />
-                    <span className="tooltip text-xs text-gray-800">
+                    <span className="tooltip text-xs text-secondary-800">
                       {!!skillsQuery.data?.results?.length &&
                         formatSkills(skillsQuery.data?.results)}
                       {(skillsQuery.data?.results?.length || 0) > 3 && (
@@ -563,7 +556,7 @@ export default function PatientInfoCard(props: {
                   </span>
                 </div>
               </div>
-              <span className="mt-1 text-xs font-medium text-gray-700">
+              <span className="mt-1 text-xs font-medium text-secondary-700">
                 IP Day No
               </span>
             </div>
@@ -575,12 +568,12 @@ export default function PatientInfoCard(props: {
           )}
           {!!consultation?.discharge_date && (
             <div className="flex min-w-max flex-col items-center justify-center">
-              <div className="text-sm font-normal leading-5 text-gray-500">
+              <div className="text-sm font-normal leading-5 text-secondary-500">
                 Discharge Reason
               </div>
-              <div className="mt-[6px] text-xl font-semibold leading-5 text-gray-900">
+              <div className="mt-[6px] text-xl font-semibold leading-5 text-secondary-900">
                 {!consultation?.new_discharge_reason ? (
-                  <span className="text-gray-800">
+                  <span className="text-secondary-800">
                     {consultation.suggestion === "OP"
                       ? "OP file closed"
                       : "UNKNOWN"}
@@ -928,7 +921,7 @@ export default function PatientInfoCard(props: {
                     <div
                       className={`dropdown-item-primary pointer-events-auto ${
                         consultation?.discharge_date &&
-                        "text-gray-500 accent-gray-500 hover:bg-white"
+                        "text-secondary-500 accent-secondary-500 hover:bg-white"
                       } m-2 flex cursor-pointer items-center justify-start gap-2 rounded border-0 p-2 text-sm font-normal transition-all duration-200 ease-in-out`}
                       onClick={() => {
                         if (!consultation?.discharge_date) {
@@ -942,7 +935,7 @@ export default function PatientInfoCard(props: {
                           icon="l-hospital"
                           className={`text-lg ${
                             consultation?.discharge_date
-                              ? "text-gray-500"
+                              ? "text-secondary-500"
                               : "text-primary-500"
                           }`}
                         />
@@ -966,7 +959,7 @@ export default function PatientInfoCard(props: {
                       switchMedicoLegalCase(checked);
                     }}
                     className={classNames(
-                      medicoLegalCase ? "bg-primary" : "bg-gray-200",
+                      medicoLegalCase ? "bg-primary" : "bg-secondary-200",
                       "relative inline-flex h-4 w-8 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ",
                     )}
                   >
@@ -979,7 +972,7 @@ export default function PatientInfoCard(props: {
                     />
                   </Switch>
                   <Switch.Label as="span" className="ml-3 text-sm">
-                    <span className="font-medium text-gray-900">
+                    <span className="font-medium text-secondary-900">
                       Medico-Legal Case
                     </span>{" "}
                   </Switch.Label>
diff --git a/src/Components/Patient/PatientNotes.tsx b/src/Components/Patient/PatientNotes.tsx
index 520486620bf..36d97e3d7d7 100644
--- a/src/Components/Patient/PatientNotes.tsx
+++ b/src/Components/Patient/PatientNotes.tsx
@@ -103,16 +103,16 @@ const PatientNotes = (props: PatientNotesProps) => {
       }}
       backUrl={`/facility/${facilityId}/patient/${patientId}`}
     >
-      <div className="relative mx-3 my-2 flex grow flex-col rounded-lg border border-gray-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
-        <div className="absolute inset-x-0 top-0 flex bg-gray-200 text-sm shadow-md">
+      <div className="relative mx-3 my-2 flex grow flex-col rounded-lg border border-secondary-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
+        <div className="absolute inset-x-0 top-0 flex bg-secondary-200 text-sm shadow-md">
           {Object.values(PATIENT_NOTES_THREADS).map((current) => (
             <button
               key={current}
               className={classNames(
                 "flex flex-1 justify-center border-b-2 py-2",
                 thread === current
-                  ? "border-primary-500 font-bold text-gray-800"
-                  : "border-gray-300 text-gray-800",
+                  ? "border-primary-500 font-bold text-secondary-800"
+                  : "border-secondary-300 text-secondary-800",
               )}
               onClick={() => setThread(current)}
             >
diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
index 7d219514267..71f2c899462 100644
--- a/src/Components/Patient/PatientRegister.tsx
+++ b/src/Components/Patient/PatientRegister.tsx
@@ -1136,7 +1136,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                   if (!formField) setFormField(field);
                   return (
                     <>
-                      <div className="mb-2 overflow-visible rounded border border-gray-200 p-4">
+                      <div className="mb-2 overflow-visible rounded border border-secondary-200 p-4">
                         <ButtonV2
                           id="import-externalresult-button"
                           className="flex items-center gap-2"
@@ -1157,7 +1157,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                         </ButtonV2>
                       </div>
                       {enable_abdm && (
-                        <div className="mb-8 overflow-visible rounded border border-gray-200 p-4">
+                        <div className="mb-8 overflow-visible rounded border border-secondary-200 p-4">
                           <h1 className="mb-4 text-left text-xl font-bold text-purple-500">
                             ABHA Details
                           </h1>
@@ -1214,7 +1214,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                     error=""
                                   />
                                 ) : (
-                                  <div className="mt-4 text-sm text-gray-500">
+                                  <div className="mt-4 text-sm text-secondary-500">
                                     No Abha Address Associated with this ABHA
                                     Number
                                   </div>
@@ -1224,7 +1224,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                           )}
                         </div>
                       )}
-                      <div className="mb-8 overflow-visible rounded border border-gray-200 p-4">
+                      <div className="mb-8 overflow-visible rounded border border-secondary-200 p-4">
                         <h1 className="mb-4 text-left text-xl font-bold text-purple-500">
                           Personal Details
                         </h1>
@@ -1347,7 +1347,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                       errorClassName="hidden"
                                       trailingPadding="pr-4"
                                       trailing={
-                                        <p className="absolute right-10 space-x-1 whitespace-nowrap text-xs text-gray-700 sm:text-sm">
+                                        <p className="absolute right-10 space-x-1 whitespace-nowrap text-xs text-secondary-700 sm:text-sm">
                                           {field("age").value !== "" && (
                                             <>
                                               <span className="hidden sm:inline md:hidden lg:inline">
@@ -1727,7 +1727,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                           )}
                         </div>
                       </div>
-                      <div className="mb-8 rounded border border-gray-200 p-4">
+                      <div className="mb-8 rounded border border-secondary-200 p-4">
                         <AccordionV2
                           className="mt-2 shadow-none md:mt-0 lg:mt-0"
                           expandIcon={
@@ -1918,7 +1918,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                           </div>
                         </div>
                       </div>
-                      <div className="flex w-full flex-col gap-4 rounded border border-gray-200 bg-white p-4">
+                      <div className="flex w-full flex-col gap-4 rounded border border-secondary-200 bg-white p-4">
                         <div className="flex w-full flex-col items-center justify-between gap-4 sm:flex-row">
                           <h1 className="text-left text-xl font-bold text-purple-500">
                             Insurance Details
diff --git a/src/Components/Patient/SampleDetails.tsx b/src/Components/Patient/SampleDetails.tsx
index a3d3df95c21..91fd2d4a122 100644
--- a/src/Components/Patient/SampleDetails.tsx
+++ b/src/Components/Patient/SampleDetails.tsx
@@ -409,7 +409,7 @@ export const SampleDetails = ({ id }: DetailRoute) => {
                 <span className="font-semibold leading-relaxed">
                   Countries travelled:{" "}
                 </span>
-                {sampleDetails.patient_travel_history.join(", ")}
+                {sampleDetails.patient_travel_history}
               </div>
             )}
           {sampleDetails?.sample_type && (
diff --git a/src/Components/Patient/SamplePreview.tsx b/src/Components/Patient/SamplePreview.tsx
index a01453e1ed5..479b426c3f2 100644
--- a/src/Components/Patient/SamplePreview.tsx
+++ b/src/Components/Patient/SamplePreview.tsx
@@ -1,4 +1,4 @@
-import { classNames, formatDateTime } from "../../Utils/utils";
+import { classNames, formatDateTime, humanizeStrings } from "../../Utils/utils";
 
 import { lazy } from "react";
 
@@ -25,18 +25,18 @@ interface ISampleReportSectionProps {
 function SampleReportSection({ title, fields }: ISampleReportSectionProps) {
   return (
     <>
-      <div className="flex justify-center border border-b-0 border-gray-800 bg-gray-700 py-2 font-medium text-white">
+      <div className="flex justify-center border border-b-0 border-secondary-800 bg-secondary-700 py-2 font-medium text-white">
         <h6 className="text-lg">{title}</h6>
       </div>
-      <div className="grid grid-cols-2 border-b border-gray-800">
+      <div className="grid grid-cols-2 border-b border-secondary-800">
         {fields.map((field, i) => (
           <div
             className={classNames(
-              "flex border-b border-gray-800",
+              "flex border-b border-secondary-800",
               i % 2 === 0 && "border-x",
             )}
           >
-            <div className="w-[65%] border-r border-gray-800 py-2">
+            <div className="w-[65%] border-r border-secondary-800 py-2">
               <p className="mr-2.5 pl-1 pr-2 text-right font-semibold">
                 {field.title}
               </p>
@@ -79,7 +79,7 @@ export default function SampleReport(props: ISamplePreviewProps) {
         </div>
         <div className="block h-screen" id="section-to-print">
           <div className="flex flex-col">
-            <div className="flex items-center justify-between border border-gray-800">
+            <div className="flex items-center justify-between border border-secondary-800">
               <div className="flex justify-start p-2"></div>
               <div className="flex justify-end">
                 <div className="p-2">
@@ -91,30 +91,30 @@ export default function SampleReport(props: ISamplePreviewProps) {
                 </div>
               </div>
             </div>
-            <div className="flex justify-start border border-t-0 border-gray-800">
+            <div className="flex justify-start border border-t-0 border-secondary-800">
               <div className="w-full p-5 py-2 text-black">
                 <p className="text-lg font-bold">
                   ICMR Specimen Referral Data for COVID-19 (SARS-CoV2)
                 </p>
               </div>
             </div>
-            <div className="flex justify-center border border-t-0 border-gray-800 py-2">
+            <div className="flex justify-center border border-t-0 border-secondary-800 py-2">
               <h6 className="text-lg font-semibold text-danger-500">
                 FOR INTERNAL USE ONLY
               </h6>
             </div>
             <div className="flex flex-col">
-              <div className="flex justify-center border border-b-0 border-gray-800 bg-black py-2 font-medium text-white">
+              <div className="flex justify-center border border-b-0 border-secondary-800 bg-black py-2 font-medium text-white">
                 <h6 className="text-lg">Sample Id : {sampleId}</h6>
               </div>
-              <div className="flex justify-center border border-b-0 border-gray-800 bg-black py-2 font-medium text-white">
+              <div className="flex justify-center border border-b-0 border-secondary-800 bg-black py-2 font-medium text-white">
                 <h6 className="text-lg">Patient Id : {id}</h6>
               </div>
               <div
                 className="border-4 border-black"
                 style={{ border: "solid 5px black" }}
               >
-                <div className="flex justify-center border border-b-0 border-gray-800 bg-gray-900 py-2 font-medium text-white">
+                <div className="flex justify-center border border-b-0 border-secondary-800 bg-secondary-900 py-2 font-medium text-white">
                   <h6 className="text-lg">SECTION A - MANDATORY FIELDS</h6>
                 </div>
                 <SampleReportSection
@@ -216,7 +216,7 @@ export default function SampleReport(props: ISamplePreviewProps) {
                   ]}
                 />
 
-                <div className="flex justify-center border border-b-0 border-gray-800 bg-gray-900 py-2 font-medium text-white">
+                <div className="flex justify-center border border-b-0 border-secondary-800 bg-secondary-900 py-2 font-medium text-white">
                   <h6 className="text-lg">
                     SECTION B - OTHER FIELDS TO BE UPDATED
                   </h6>
@@ -331,7 +331,8 @@ export default function SampleReport(props: ISamplePreviewProps) {
                     {
                       title: "Symptoms",
                       value:
-                        sampleData?.medical_conditions?.symptoms?.join(", "),
+                        sampleData?.medical_conditions?.symptoms &&
+                        humanizeStrings(sampleData.medical_conditions.symptoms),
                     },
                     { title: "First Symptom", value: "............." },
                     {
diff --git a/src/Components/Patient/SampleTestCard.tsx b/src/Components/Patient/SampleTestCard.tsx
index efcc68bb06a..e36d4b52121 100644
--- a/src/Components/Patient/SampleTestCard.tsx
+++ b/src/Components/Patient/SampleTestCard.tsx
@@ -141,13 +141,13 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
       <div className="m-2 mt-4 flex flex-col justify-between md:flex-row lg:gap-4">
         <div className="flex flex-col justify-between gap-4 md:flex-row">
           <div>
-            <div className="mb-2 text-sm text-gray-700">
+            <div className="mb-2 text-sm text-secondary-700">
               <span className="font-medium text-black">Date of Sample:</span>{" "}
               {itemData.date_of_sample
                 ? formatDateTime(itemData.date_of_sample)
                 : "Not Available"}
             </div>
-            <div className="text-sm text-gray-700">
+            <div className="text-sm text-secondary-700">
               <span className="font-medium text-black">Date of Result:</span>{" "}
               {itemData.date_of_result
                 ? formatDateTime(itemData.date_of_result)
@@ -156,7 +156,7 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
           </div>
         </div>
         <div className="flex flex-col gap-2">
-          <div className="flex flex-col flex-nowrap items-center justify-end text-sm text-gray-700 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-center">
+          <div className="flex flex-col flex-nowrap items-center justify-end text-sm text-secondary-700 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-center">
             <div className=" font-medium text-black">Created: </div>
 
             <RelativeDateUserMention
@@ -165,7 +165,7 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
               tooltipPosition="left"
             />
           </div>
-          <div className="flex flex-col items-center justify-end text-sm text-gray-700 md:flex-col md:items-start lg:flex-row lg:items-center">
+          <div className="flex flex-col items-center justify-end text-sm text-secondary-700 md:flex-col md:items-start lg:flex-row lg:items-center">
             <div className=" font-medium text-black">Last Modified: </div>
             <RelativeDateUserMention
               actionDate={itemData.modified_date}
@@ -182,21 +182,21 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
               e.stopPropagation();
               handleApproval(4, itemData);
             }}
-            className="border border-gray-500 bg-white text-black hover:bg-gray-300"
+            className="border border-secondary-500 bg-white text-black hover:bg-secondary-300"
           >
             Send to Collection Centre
           </ButtonV2>
         )}
         <ButtonV2
           onClick={() => showUpdateStatus(itemData)}
-          className="border border-gray-500 bg-white text-black hover:bg-gray-300"
+          className="border border-secondary-500 bg-white text-black hover:bg-secondary-300"
           authorizeFor={NonReadOnlyUsers}
         >
           Update Sample Test Status
         </ButtonV2>
         <ButtonV2
           onClick={(_e) => navigate(`/sample/${itemData.id}`)}
-          className="border border-gray-500 bg-white text-black hover:bg-gray-300"
+          className="border border-secondary-500 bg-white text-black hover:bg-secondary-300"
         >
           Sample Report
         </ButtonV2>
diff --git a/src/Components/Patient/SampleViewAdmin.tsx b/src/Components/Patient/SampleViewAdmin.tsx
index d9f471874fa..1369c9725e0 100644
--- a/src/Components/Patient/SampleViewAdmin.tsx
+++ b/src/Components/Patient/SampleViewAdmin.tsx
@@ -243,15 +243,15 @@ export default function SampleViewAdmin() {
               </div>
 
               <div className="mt-4">
-                <div className="text-sm font-bold text-gray-600">
-                  <span className="text-gray-800">Date of Sample:</span>{" "}
+                <div className="text-sm font-bold text-secondary-600">
+                  <span className="text-secondary-800">Date of Sample:</span>{" "}
                   {item.date_of_sample
                     ? formatDateTime(item.date_of_sample)
                     : "Not Available"}
                 </div>
 
-                <div className="text-sm font-bold text-gray-600">
-                  <span className="text-gray-800">Date of Result:</span>{" "}
+                <div className="text-sm font-bold text-secondary-600">
+                  <span className="text-secondary-800">Date of Result:</span>{" "}
                   {item.date_of_result
                     ? formatDateTime(item.date_of_result)
                     : "Not Available"}
@@ -263,7 +263,7 @@ export default function SampleViewAdmin() {
                   <div className="mt-2">
                     <button
                       onClick={() => showUpdateStatus(item)}
-                      className="w-full rounded border border-gray-400 bg-primary-500 px-4 py-2 text-center text-sm font-semibold text-white shadow hover:bg-primary-700"
+                      className="w-full rounded border border-secondary-400 bg-primary-500 px-4 py-2 text-center text-sm font-semibold text-white shadow hover:bg-primary-700"
                     >
                       UPDATE SAMPLE TEST STATUS
                     </button>
@@ -272,7 +272,7 @@ export default function SampleViewAdmin() {
 
                 <button
                   onClick={() => navigate(`/sample/${item.id}`)}
-                  className="mt-2 w-full rounded border border-gray-400 bg-white px-4 py-2 text-center text-sm font-semibold text-gray-800 shadow hover:bg-gray-400"
+                  className="mt-2 w-full rounded border border-secondary-400 bg-white px-4 py-2 text-center text-sm font-semibold text-secondary-800 shadow hover:bg-secondary-400"
                 >
                   Sample Details
                 </button>
@@ -300,7 +300,7 @@ export default function SampleViewAdmin() {
   } else if (sampeleData?.count === 0) {
     manageSamples = (
       <div className="w-full rounded-lg bg-white p-3">
-        <div className="mt-4 flex w-full  justify-center text-2xl font-bold text-gray-600">
+        <div className="mt-4 flex w-full  justify-center text-2xl font-bold text-secondary-600">
           No Sample Tests Found
         </div>
       </div>
diff --git a/src/Components/Patient/UpdateStatusDialog.tsx b/src/Components/Patient/UpdateStatusDialog.tsx
index 8fca8815248..98c72073437 100644
--- a/src/Components/Patient/UpdateStatusDialog.tsx
+++ b/src/Components/Patient/UpdateStatusDialog.tsx
@@ -214,7 +214,7 @@ const UpdateStatusDialog = (props: Props) => {
               <LinearProgressWithLabel value={uploadPercent} />
             ) : (
               <div className="mb-4 mt-3 flex flex-wrap justify-between gap-2">
-                <label className="button-size-default button-shape-square button-primary-default inline-flex h-min max-w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-500">
+                <label className="button-size-default button-shape-square button-primary-default inline-flex h-min max-w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500">
                   <CareIcon icon="l-file-upload-alt" className="text-lg" />
                   <span className="max-w-full truncate">
                     {file ? file.name : t("choose_file")}
diff --git a/src/Components/Patient/Waveform.tsx b/src/Components/Patient/Waveform.tsx
index 52885b62a51..d567739a3d2 100644
--- a/src/Components/Patient/Waveform.tsx
+++ b/src/Components/Patient/Waveform.tsx
@@ -105,7 +105,7 @@ export default function Waveform(props: {
 
   return (
     <div className="relative w-full">
-      <div className="absolute left-5 top-0 text-xs text-gray-400">
+      <div className="absolute left-5 top-0 text-xs text-secondary-400">
         {props.title}
       </div>
       <LinePlot
@@ -126,7 +126,7 @@ export default function Waveform(props: {
       />
       <div className="absolute bottom-0 right-5 w-full md:w-[70%]">
         {props.metrics && (
-          <div className="flex flex-row flex-wrap justify-end gap-2 text-xs text-gray-400">
+          <div className="flex flex-row flex-wrap justify-end gap-2 text-xs text-secondary-400">
             <div>Lowest: {Math.min(...queueData.slice(0, viewable))}</div>
             <div>Highest: {Math.max(...queueData.slice(0, viewable))}</div>
             <div>Stream Length: {data.length}</div>
diff --git a/src/Components/Resource/CommentSection.tsx b/src/Components/Resource/CommentSection.tsx
index 5b9929ed19f..de4a4208e83 100644
--- a/src/Components/Resource/CommentSection.tsx
+++ b/src/Components/Resource/CommentSection.tsx
@@ -57,7 +57,7 @@ const CommentSection = (props: { id: string }) => {
           </div>
           <div className="w-full">
             <div>
-              <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
+              <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
                 <span>No comments available</span>
               </PaginatedList.WhenEmpty>
               <PaginatedList.WhenLoading>
@@ -84,20 +84,20 @@ export const Comment = ({
   created_by_object,
   modified_date,
 }: IComment) => (
-  <div className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800">
+  <div className="mt-4 flex w-full flex-col rounded-lg border border-secondary-300 bg-white p-4 text-secondary-800">
     <div className="flex  w-full ">
       <p className="text-justify">{comment}</p>
     </div>
     <div className="mt-3">
-      <span className="text-xs text-gray-500">
+      <span className="text-xs text-secondary-500">
         {formatDateTime(modified_date) || "-"}
       </span>
     </div>
-    <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
+    <div className=" mr-auto flex items-center rounded-md border bg-secondary-100 py-1 pl-2 pr-3">
       <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
         {created_by_object?.first_name?.charAt(0) || "U"}
       </div>
-      <span className="pl-2 text-sm text-gray-700">
+      <span className="pl-2 text-sm text-secondary-700">
         {created_by_object?.first_name || "Unknown"}{" "}
         {created_by_object?.last_name}
       </span>
diff --git a/src/Components/Resource/ListView.tsx b/src/Components/Resource/ListView.tsx
index 680015b16f2..128e17c2c46 100644
--- a/src/Components/Resource/ListView.tsx
+++ b/src/Components/Resource/ListView.tsx
@@ -45,7 +45,7 @@ export default function ListView() {
   const showResourceCardList = (data: any) => {
     if (data && !data.length) {
       return (
-        <div className="mt-64 flex flex-1 justify-center text-gray-600">
+        <div className="mt-64 flex flex-1 justify-center text-secondary-600">
           No requests to show.
         </div>
       );
@@ -75,10 +75,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title="Resource status"
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-truck" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {resource.status}
                     </dd>
                   </dt>
@@ -86,10 +86,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title=" Origin facility"
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-plane-departure" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {(resource.origin_facility_object || {}).name}
                     </dd>
                   </dt>
@@ -97,10 +97,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title="Resource approving facility"
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-user-check" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {(resource.approving_facility_object || {}).name}
                     </dd>
                   </dt>
@@ -108,11 +108,11 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title=" Assigned facility"
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-plane-arrival" className="m-2" />
 
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {(resource.assigned_facility_object || {}).name ||
                         "Yet to be decided"}
                     </dd>
@@ -127,7 +127,7 @@ export default function ListView() {
                       (dayjs()
                         .subtract(2, "hours")
                         .isBefore(resource.modified_date)
-                        ? "text-gray-900"
+                        ? "text-secondary-900"
                         : "rounded bg-red-400 p-1 text-white")
                     }
                   >
diff --git a/src/Components/Resource/ResourceBoard.tsx b/src/Components/Resource/ResourceBoard.tsx
index de0b573d9bb..352942aff83 100644
--- a/src/Components/Resource/ResourceBoard.tsx
+++ b/src/Components/Resource/ResourceBoard.tsx
@@ -66,10 +66,10 @@ const ResourceCard = ({ resource }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title=" Origin facility"
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-plane-departure" className="mr-2 text-xl" />
-                  <dd className="text-sm font-bold leading-5 text-gray-900">
+                  <dd className="text-sm font-bold leading-5 text-secondary-900">
                     {(resource.origin_facility_object || {}).name}
                   </dd>
                 </dt>
@@ -77,10 +77,10 @@ const ResourceCard = ({ resource }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title="Resource approving facility"
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-user-check" className="mr-2 text-xl" />
-                  <dd className="text-sm font-bold leading-5 text-gray-900">
+                  <dd className="text-sm font-bold leading-5 text-secondary-900">
                     {(resource.approving_facility_object || {}).name}
                   </dd>
                 </dt>
@@ -89,11 +89,11 @@ const ResourceCard = ({ resource }: any) => {
                 <div className="sm:col-span-1">
                   <dt
                     title=" Assigned facility"
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-plane-arrival" className="mr-2 text-xl" />
 
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {(resource.assigned_facility_object || {}).name ||
                         "Yet to be decided"}
                     </dd>
@@ -108,7 +108,7 @@ const ResourceCard = ({ resource }: any) => {
                     (dayjs()
                       .subtract(2, "hours")
                       .isBefore(resource.modified_date)
-                      ? "text-gray-900"
+                      ? "text-secondary-900"
                       : "rounded bg-red-400 p-1 text-white")
                   }
                 >
@@ -122,10 +122,10 @@ const ResourceCard = ({ resource }: any) => {
                 <div className="sm:col-span-1">
                   <dt
                     title="Assigned to"
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-user" className="mr-2 text-xl" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {resource.assigned_to_object.first_name}{" "}
                       {resource.assigned_to_object.last_name} -{" "}
                       {resource.assigned_to_object.user_type}
@@ -233,11 +233,11 @@ export default function ResourceBoard({
     <div
       ref={drop}
       className={classNames(
-        "e mr-2 h-full w-full  shrink-0 overflow-y-auto rounded-md bg-gray-200 pb-4 @lg:w-1/2 @3xl:w-1/3 @7xl:w-1/4",
+        "e mr-2 h-full w-full  shrink-0 overflow-y-auto rounded-md bg-secondary-200 pb-4 @lg:w-1/2 @3xl:w-1/3 @7xl:w-1/4",
         isOver && "cursor-move",
       )}
     >
-      <div className="sticky top-0 rounded bg-gray-200 pt-2">
+      <div className="sticky top-0 rounded bg-secondary-200 pt-2">
         <div className="mx-2 flex items-center justify-between rounded bg-white p-4 shadow">
           <h3 className="flex h-8 items-center text-xs">
             {renderBoardTitle(board)}{" "}
@@ -259,13 +259,13 @@ export default function ResourceBoard({
       <div className="mt-2 flex flex-col pb-2 text-sm">
         {isLoading.board ? (
           <div className="m-1">
-            <div className="mx-auto w-full max-w-sm rounded-md border border-gray-300 bg-white p-4 shadow">
+            <div className="mx-auto w-full max-w-sm rounded-md border border-secondary-300 bg-white p-4 shadow">
               <div className="flex animate-pulse space-x-4 ">
                 <div className="flex-1 space-y-4 py-1">
-                  <div className="h-4 w-3/4 rounded bg-gray-400"></div>
+                  <div className="h-4 w-3/4 rounded bg-secondary-400"></div>
                   <div className="space-y-2">
-                    <div className="h-4 rounded bg-gray-400"></div>
-                    <div className="h-4 w-5/6 rounded bg-gray-400"></div>
+                    <div className="h-4 rounded bg-secondary-400"></div>
+                    <div className="h-4 w-5/6 rounded bg-secondary-400"></div>
                   </div>
                 </div>
               </div>
@@ -280,13 +280,13 @@ export default function ResourceBoard({
           data &&
           data?.results.length < (data?.count || 0) &&
           (isLoading.more ? (
-            <div className="mx-auto my-4 rounded-md bg-gray-100 p-2 px-4 hover:bg-white">
+            <div className="mx-auto my-4 rounded-md bg-secondary-100 p-2 px-4 hover:bg-white">
               Loading
             </div>
           ) : (
             <button
               onClick={(_) => handlePagination()}
-              className="mx-auto my-4 rounded-md bg-gray-100 p-2 px-4 hover:bg-white"
+              className="mx-auto my-4 rounded-md bg-secondary-100 p-2 px-4 hover:bg-white"
             >
               More...
             </button>
diff --git a/src/Components/Resource/ResourceDetails.tsx b/src/Components/Resource/ResourceDetails.tsx
index 9e1f805b115..c719556d561 100644
--- a/src/Components/Resource/ResourceDetails.tsx
+++ b/src/Components/Resource/ResourceDetails.tsx
@@ -357,7 +357,7 @@ export default function ResourceDetails(props: { id: string }) {
               <div className="text-sm font-medium leading-5 text-black">
                 Created
               </div>
-              <div className="mt-1 text-sm leading-5 text-gray-900">
+              <div className="mt-1 text-sm leading-5 text-secondary-900">
                 <div className="text-sm">
                   {data?.created_by_object?.first_name}{" "}
                   {data?.created_by_object?.last_name}
@@ -371,7 +371,7 @@ export default function ResourceDetails(props: { id: string }) {
               <div className="text-sm font-medium leading-5 text-black">
                 Last Edited
               </div>
-              <div className="mt-1 text-sm leading-5 text-gray-900">
+              <div className="mt-1 text-sm leading-5 text-secondary-900">
                 <div className="text-sm">
                   {data?.last_edited_by_object?.first_name}{" "}
                   {data?.last_edited_by_object?.last_name}
diff --git a/src/Components/Scribe/Scribe.tsx b/src/Components/Scribe/Scribe.tsx
index e29b825124f..16b9056a795 100644
--- a/src/Components/Scribe/Scribe.tsx
+++ b/src/Components/Scribe/Scribe.tsx
@@ -410,7 +410,7 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
           <button
             onClick={handleStartRecordingClick}
             disabled={isRecording}
-            className="flex items-center justify-center rounded-full border border-black px-2 py-2 font-bold hover:border-red-500 hover:bg-gray-200 hover:text-red-500"
+            className="flex items-center justify-center rounded-full border border-black px-2 py-2 font-bold hover:border-red-500 hover:bg-secondary-200 hover:text-red-500"
           >
             <CareIcon
               icon="l-microphone"
@@ -425,7 +425,7 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
             disabled={!isRecording}
             onMouseEnter={() => setIsHoveringCancelRecord(true)}
             onMouseLeave={() => setIsHoveringCancelRecord(false)}
-            className="flex animate-pulse items-center justify-center rounded-full border border-red-500 bg-red-100 px-2 py-2 font-bold text-red-500 hover:border-black hover:bg-gray-200 hover:text-black"
+            className="flex animate-pulse items-center justify-center rounded-full border border-red-500 bg-red-100 px-2 py-2 font-bold text-red-500 hover:border-black hover:bg-secondary-200 hover:text-black"
           >
             {isHoveringCancelRecord ? (
               <CareIcon
@@ -490,9 +490,9 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
               &#8203;
             </span>
 
-            <div className="inline-block max-h-[75vh] w-full max-w-md overflow-hidden overflow-y-auto rounded-2xl border-2 border-gray-300 bg-white p-6 text-left align-middle shadow-xl transition-all">
+            <div className="inline-block max-h-[75vh] w-full max-w-md overflow-hidden overflow-y-auto rounded-2xl border-2 border-secondary-300 bg-white p-6 text-left align-middle shadow-xl transition-all">
               <div className="flex justify-between">
-                <h3 className="text-lg font-medium leading-6 text-gray-900">
+                <h3 className="text-lg font-medium leading-6 text-secondary-900">
                   Voice AutoFill
                 </h3>
 
@@ -516,7 +516,7 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
                 stage === "final-review" ||
                 stage === "recording-review") && (
                 <div className="flex flex-col justify-center gap-4 rounded-md p-2">
-                  <p className="text-sm font-semibold text-gray-600">
+                  <p className="text-sm font-semibold text-secondary-600">
                     Recorded Audio
                   </p>
                   {audioBlobs.length > 0 &&
@@ -541,15 +541,15 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
               {(stage === "review" || stage === "final-review") && (
                 <div className="my-2 w-full">
                   <div className="flex justify-between">
-                    <p className="mb-2 text-sm font-semibold text-gray-600">
+                    <p className="mb-2 text-sm font-semibold text-secondary-600">
                       Transcript
                     </p>
-                    <p className="mb-2 text-sm italic text-gray-500">
+                    <p className="mb-2 text-sm italic text-secondary-500">
                       (Edit if needed)
                     </p>
                   </div>
                   <textarea
-                    className="h-32 w-full rounded-md border border-gray-300 p-2 font-mono text-sm"
+                    className="h-32 w-full rounded-md border border-secondary-300 p-2 font-mono text-sm"
                     value={updatedTranscript}
                     onChange={handleEditChange}
                   />
@@ -569,7 +569,7 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
                     Regenerate Transcript
                   </ButtonV2>
                   {stage === "review" && (
-                    <p className="animate-pulse text-sm text-gray-500">
+                    <p className="animate-pulse text-sm text-secondary-500">
                       {getStageMessage(stage)}
                     </p>
                   )}
@@ -581,10 +581,10 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
                   {!isGPTProcessing &&
                     Object.keys(formFields ?? {}).length > 0 && (
                       <div className="mt-4">
-                        <p className="mb-2 text-sm font-semibold text-gray-600">
+                        <p className="mb-2 text-sm font-semibold text-secondary-600">
                           Form Data
                         </p>
-                        <div className="max-h-80 divide-y divide-gray-300 overflow-scroll rounded-lg border border-gray-300 text-sm">
+                        <div className="max-h-80 divide-y divide-secondary-300 overflow-scroll rounded-lg border border-secondary-300 text-sm">
                           {Object.keys(formFields ?? {})
                             .filter((field) => formFields?.[field])
                             .map((field) => {
@@ -596,10 +596,10 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
                                   key={field}
                                   className="flex flex-col bg-white px-3 py-1"
                                 >
-                                  <p className="mb-1 font-bold text-gray-600">
+                                  <p className="mb-1 font-bold text-secondary-600">
                                     {fieldDetails?.friendlyName}
                                   </p>
-                                  <p className="text-gray-800">
+                                  <p className="text-secondary-800">
                                     {processFormField(
                                       fieldDetails,
                                       formFields,
@@ -613,7 +613,7 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
                       </div>
                     )}
                   {stage === "final-review" && (
-                    <p className="mt-2 text-sm text-gray-600">
+                    <p className="mt-2 text-sm text-secondary-600">
                       {getStageMessage(stage)}
                     </p>
                   )}
@@ -634,7 +634,7 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
                   </p>
                 ))}
                 {!(stage === "review" || stage === "final-review") && (
-                  <p className="animate-pulse text-sm text-gray-500">
+                  <p className="animate-pulse text-sm text-secondary-500">
                     {getStageMessage(stage)}
                   </p>
                 )}
diff --git a/src/Components/Shifting/CommentsSection.tsx b/src/Components/Shifting/CommentsSection.tsx
index 767ab402265..58b39f10a58 100644
--- a/src/Components/Shifting/CommentsSection.tsx
+++ b/src/Components/Shifting/CommentsSection.tsx
@@ -49,7 +49,7 @@ const CommentSection = (props: CommentSectionProps) => {
             value={commentBox}
             minLength={3}
             placeholder={t("type_your_comment")}
-            className="mt-4 rounded-lg border border-gray-500 p-4 focus:ring-primary-500"
+            className="mt-4 rounded-lg border border-secondary-500 p-4 focus:ring-primary-500"
             onChange={(e) => setCommentBox(e.target.value)}
           />
           <div className="flex w-full justify-end">
@@ -92,21 +92,21 @@ export const Comment = ({
   return (
     <div
       key={id}
-      className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800"
+      className="mt-4 flex w-full flex-col rounded-lg border border-secondary-300 bg-white p-4 text-secondary-800"
     >
       <div className="flex  w-full ">
         <p className="text-justify">{comment}</p>
       </div>
       <div className="mt-3">
-        <span className="text-xs text-gray-500">
+        <span className="text-xs text-secondary-500">
           {modified_date ? formatDateTime(modified_date) : "-"}
         </span>
       </div>
-      <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
+      <div className=" mr-auto flex items-center rounded-md border bg-secondary-100 py-1 pl-2 pr-3">
         <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
           {created_by_object?.first_name?.charAt(0) || t("unknown")}
         </div>
-        <span className="pl-2 text-sm text-gray-700">
+        <span className="pl-2 text-sm text-secondary-700">
           {created_by_object?.first_name || t("unknown")}{" "}
           {created_by_object?.last_name}
         </span>
diff --git a/src/Components/Shifting/Commons.tsx b/src/Components/Shifting/Commons.tsx
index 284b6e4ce5a..f8da252e23a 100644
--- a/src/Components/Shifting/Commons.tsx
+++ b/src/Components/Shifting/Commons.tsx
@@ -73,7 +73,7 @@ export const formatFilter = (params: any) => {
 export const badge = (key: string, value: any) => {
   return (
     value && (
-      <span className="inline-flex items-center rounded-full border bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-600">
+      <span className="inline-flex items-center rounded-full border bg-white px-3 py-1 text-xs font-medium leading-4 text-secondary-600">
         {key}
         {": "}
         {value}
diff --git a/src/Components/Shifting/ListView.tsx b/src/Components/Shifting/ListView.tsx
index ffffa3f2baf..cfffcef7377 100644
--- a/src/Components/Shifting/ListView.tsx
+++ b/src/Components/Shifting/ListView.tsx
@@ -69,7 +69,7 @@ export default function ListView() {
   const showShiftingCardList = (data: any) => {
     if (data && !data.length) {
       return (
-        <div className="mt-64 flex flex-1 justify-center text-gray-600">
+        <div className="mt-64 flex flex-1 justify-center text-secondary-600">
           {t("no_patients_to_show")}
         </div>
       );
@@ -97,10 +97,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("shifting_status")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-truck" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {shift.status}
                     </dd>
                   </dt>
@@ -108,10 +108,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("phone_number")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-mobile-android" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {shift.patient_object.phone_number || ""}
                     </dd>
                   </dt>
@@ -119,10 +119,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("origin_facility")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-plane-departure" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {(shift.origin_facility_object || {}).name}
                     </dd>
                   </dt>
@@ -131,10 +131,10 @@ export default function ListView() {
                   <div className="sm:col-span-1">
                     <dt
                       title={t("shifting_approving_facility")}
-                      className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                      className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                     >
                       <CareIcon icon="l-user-check" className="mr-2" />
-                      <dd className="text-sm font-bold leading-5 text-gray-900">
+                      <dd className="text-sm font-bold leading-5 text-secondary-900">
                         {(shift.shifting_approving_facility_object || {}).name}
                       </dd>
                     </dt>
@@ -143,11 +143,11 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("assigned_facility")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-plane-arrival" className="m-2" />
 
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {shift.assigned_facility_external ||
                         shift.assigned_facility_object?.name ||
                         t("yet_to_be_decided")}
@@ -163,7 +163,7 @@ export default function ListView() {
                       (dayjs()
                         .subtract(2, "hours")
                         .isBefore(shift.modified_date)
-                        ? "text-gray-900"
+                        ? "text-secondary-900"
                         : "rounded bg-red-400 p-1 text-white")
                     }
                   >
@@ -177,10 +177,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("patient_address")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-home" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {shift.patient_object.address || "--"}
                     </dd>
                   </dt>
diff --git a/src/Components/Shifting/ShiftDetails.tsx b/src/Components/Shifting/ShiftDetails.tsx
index 457f110c271..f4f70d0cced 100644
--- a/src/Components/Shifting/ShiftDetails.tsx
+++ b/src/Components/Shifting/ShiftDetails.tsx
@@ -468,7 +468,7 @@ export default function ShiftDetails(props: { id: string }) {
           <div className="mt-20 flex justify-center text-center">
             {t("auto_generated_for_care")}
           </div>
-          <div className="font-xs font-gray-600 text-center font-mono">
+          <div className="font-xs font-secondary-600 text-center font-mono">
             {window.location.origin}/shifting/{data.id}
           </div>
         </div>
@@ -773,10 +773,10 @@ export default function ShiftDetails(props: { id: string }) {
 
               <div className="mt-2 grid rounded-lg bg-white p-2 px-4 text-center shadow lg:grid-cols-2">
                 <div className="border-b-2 pb-2 lg:border-b-0 lg:border-r-2 lg:pb-0">
-                  <div className="text-sm font-medium leading-5 text-gray-500">
+                  <div className="text-sm font-medium leading-5 text-secondary-500">
                     {t("created")}
                   </div>
-                  <div className="mt-1 whitespace-pre text-sm leading-5 text-gray-900">
+                  <div className="mt-1 whitespace-pre text-sm leading-5 text-secondary-900">
                     <RecordMeta
                       time={data?.created_date}
                       user={data?.created_by_object}
@@ -786,10 +786,10 @@ export default function ShiftDetails(props: { id: string }) {
                   </div>
                 </div>
                 <div className="mt-2 lg:mt-0">
-                  <div className="text-sm font-medium leading-5 text-gray-500">
+                  <div className="text-sm font-medium leading-5 text-secondary-500">
                     {t("last_edited")}
                   </div>
-                  <div className="mt-1 whitespace-pre text-sm leading-5 text-gray-900">
+                  <div className="mt-1 whitespace-pre text-sm leading-5 text-secondary-900">
                     <RecordMeta
                       time={data?.modified_date}
                       user={data?.last_edited_by_object}
diff --git a/src/Components/Shifting/ShiftingBoard.tsx b/src/Components/Shifting/ShiftingBoard.tsx
index 84a4ac419d3..3a72cfca3a0 100644
--- a/src/Components/Shifting/ShiftingBoard.tsx
+++ b/src/Components/Shifting/ShiftingBoard.tsx
@@ -90,10 +90,10 @@ const ShiftCard = ({ shift, filter }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title={t("phone_number")}
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-mobile-android" className="mr-2 text-xl" />
-                  <dd className="break-normal text-sm font-bold leading-5 text-gray-900">
+                  <dd className="break-normal text-sm font-bold leading-5 text-secondary-900">
                     {shift.patient_object.phone_number || ""}
                   </dd>
                 </dt>
@@ -101,10 +101,10 @@ const ShiftCard = ({ shift, filter }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title={t("origin_facility")}
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-plane-departure" className="mr-2 text-xl" />
-                  <dd className="break-normal text-sm font-bold leading-5 text-gray-900">
+                  <dd className="break-normal text-sm font-bold leading-5 text-secondary-900">
                     {(shift.origin_facility_object || {}).name}
                   </dd>
                 </dt>
@@ -113,10 +113,10 @@ const ShiftCard = ({ shift, filter }: any) => {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("shifting_approving_facility")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-user-check" className="mr-2 text-xl" />
-                    <dd className="break-normal text-sm font-bold leading-5 text-gray-900">
+                    <dd className="break-normal text-sm font-bold leading-5 text-secondary-900">
                       {(shift.shifting_approving_facility_object || {}).name}
                     </dd>
                   </dt>
@@ -125,11 +125,11 @@ const ShiftCard = ({ shift, filter }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title={t("assigned_facility")}
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-plane-arrival" className="mr-2 text-xl" />
 
-                  <dd className="break-normal text-sm font-bold leading-5 text-gray-900">
+                  <dd className="break-normal text-sm font-bold leading-5 text-secondary-900">
                     {shift.assigned_facility_external ||
                       shift.assigned_facility_object?.name ||
                       t("yet_to_be_decided")}
@@ -143,7 +143,7 @@ const ShiftCard = ({ shift, filter }: any) => {
                   className={
                     "flex items-center text-sm font-medium leading-5 " +
                     (dayjs().subtract(2, "hours").isBefore(shift.modified_date)
-                      ? "text-gray-900"
+                      ? "text-secondary-900"
                       : "rounded bg-red-400 p-1 text-white")
                   }
                 >
@@ -157,10 +157,10 @@ const ShiftCard = ({ shift, filter }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title={t("patient_address")}
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-home" className="mr-2 text-xl" />
-                  <dd className="break-normal text-sm font-bold leading-5 text-gray-900">
+                  <dd className="break-normal text-sm font-bold leading-5 text-secondary-900">
                     {shift.patient_object.address || "--"}
                   </dd>
                 </dt>
@@ -170,10 +170,10 @@ const ShiftCard = ({ shift, filter }: any) => {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("assigned_to")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-user" className="mr-2 text-xl" />
-                    <dd className="break-normal text-sm font-bold leading-5 text-gray-900">
+                    <dd className="break-normal text-sm font-bold leading-5 text-secondary-900">
                       {shift.assigned_to_object.first_name}{" "}
                       {shift.assigned_to_object.last_name} -{" "}
                       {shift.assigned_to_object.user_type}
@@ -185,10 +185,10 @@ const ShiftCard = ({ shift, filter }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title={t("patient_state")}
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-map-marker" className="mr-2 text-xl" />
-                  <dd className="text-sm font-bold leading-5 text-gray-900">
+                  <dd className="text-sm font-bold leading-5 text-secondary-900">
                     {shift.patient_object.state_object.name || "--"}
                   </dd>
                 </dt>
@@ -344,12 +344,12 @@ export default function ShiftingBoard({
     <div
       ref={drop}
       className={classNames(
-        "mr-2 h-full w-full flex-shrink-0 rounded-md bg-gray-200 pb-4 md:w-1/2 lg:w-1/3 xl:w-1/4",
+        "mr-2 h-full w-full flex-shrink-0 rounded-md bg-secondary-200 pb-4 md:w-1/2 lg:w-1/3 xl:w-1/4",
         isOver && "cursor-move",
       )}
       style={{ minHeight: `${containerHeight + 100}px` }}
     >
-      <div className="sticky top-0 z-10 rounded bg-gray-200 pt-2">
+      <div className="sticky top-0 z-10 rounded bg-secondary-200 pt-2">
         <div className="mx-2 flex items-center justify-between rounded bg-white p-4 shadow">
           <h3 className="flex h-8 items-center text-xs">
             {title || board}{" "}
@@ -376,13 +376,13 @@ export default function ShiftingBoard({
             )}
         {isLoading ? (
           <div className="m-1">
-            <div className="mx-auto w-full max-w-sm rounded-md border border-gray-300 bg-white p-4 shadow">
+            <div className="mx-auto w-full max-w-sm rounded-md border border-secondary-300 bg-white p-4 shadow">
               <div className="flex animate-pulse space-x-4 ">
                 <div className="flex-1 space-y-4 py-1">
-                  <div className="h-4 w-3/4 rounded bg-gray-400"></div>
+                  <div className="h-4 w-3/4 rounded bg-secondary-400"></div>
                   <div className="space-y-2">
-                    <div className="h-4 rounded bg-gray-400"></div>
-                    <div className="h-4 w-5/6 rounded bg-gray-400"></div>
+                    <div className="h-4 rounded bg-secondary-400"></div>
+                    <div className="h-4 w-5/6 rounded bg-secondary-400"></div>
                   </div>
                 </div>
               </div>
diff --git a/src/Components/Symptoms/SymptomsBuilder.tsx b/src/Components/Symptoms/SymptomsBuilder.tsx
index b4a11cf6999..8a904f6b441 100644
--- a/src/Components/Symptoms/SymptomsBuilder.tsx
+++ b/src/Components/Symptoms/SymptomsBuilder.tsx
@@ -24,7 +24,7 @@ export const CreateSymptomsBuilder = (props: {
   onChange: (value: Writable<EncounterSymptom>[]) => void;
 }) => {
   return (
-    <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
+    <div className="flex w-full flex-col items-start rounded-lg border border-secondary-400">
       <ul className="flex w-full flex-col gap-2 p-4">
         {props.value.map((obj, index, arr) => {
           const handleUpdate = (event: FieldChangeEvent<unknown>) => {
@@ -40,7 +40,7 @@ export const CreateSymptomsBuilder = (props: {
             <li
               key={index}
               id={`symptom-${index}`}
-              className="border-b-2 border-dashed border-gray-400 py-4 last:border-b-0 last:pb-0 md:border-b-0 md:py-2"
+              className="border-b-2 border-dashed border-secondary-400 py-4 last:border-b-0 last:pb-0 md:border-b-0 md:py-2"
             >
               <SymptomEntry
                 value={obj}
@@ -53,12 +53,12 @@ export const CreateSymptomsBuilder = (props: {
       </ul>
 
       {props.value.length === 0 && (
-        <div className="flex w-full justify-center gap-2 pb-8 text-center font-medium text-gray-700">
+        <div className="flex w-full justify-center gap-2 pb-8 text-center font-medium text-secondary-700">
           No symptoms added
         </div>
       )}
 
-      <div className="w-full rounded-b-lg border-t-2 border-dashed border-gray-400 bg-gray-100 p-4">
+      <div className="w-full rounded-b-lg border-t-2 border-dashed border-secondary-400 bg-secondary-100 p-4">
         <AddSymptom
           existing={props.value}
           onAdd={(objects) => props.onChange([...props.value, ...objects])}
@@ -82,7 +82,7 @@ export const EncounterSymptomsBuilder = (props: {
 
   if (!data) {
     return (
-      <div className="flex w-full animate-pulse justify-center gap-2 rounded-lg bg-gray-200 py-8 text-center font-medium text-gray-700">
+      <div className="flex w-full animate-pulse justify-center gap-2 rounded-lg bg-secondary-200 py-8 text-center font-medium text-secondary-700">
         <CareIcon icon="l-spinner-alt" className="animate-spin text-lg" />
         <span>Fetching symptom records...</span>
       </div>
@@ -97,7 +97,7 @@ export const EncounterSymptomsBuilder = (props: {
   }
 
   return (
-    <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
+    <div className="flex w-full flex-col items-start rounded-lg border border-secondary-400">
       <ul
         className={classNames(
           "flex w-full flex-col p-4",
@@ -133,7 +133,7 @@ export const EncounterSymptomsBuilder = (props: {
           return (
             <li
               key={symptom.id}
-              className="border-b-2 border-dashed border-gray-400 py-4 last:border-b-0 last:pb-0 md:border-b-0 md:py-2"
+              className="border-b-2 border-dashed border-secondary-400 py-4 last:border-b-0 last:pb-0 md:border-b-0 md:py-2"
             >
               <SymptomEntry
                 value={symptom}
@@ -147,12 +147,12 @@ export const EncounterSymptomsBuilder = (props: {
       </ul>
 
       {items.length === 0 && (
-        <div className="flex w-full justify-center gap-2 pb-8 text-center font-medium text-gray-700">
+        <div className="flex w-full justify-center gap-2 pb-8 text-center font-medium text-secondary-700">
           Patient is Asymptomatic
         </div>
       )}
 
-      <div className="w-full rounded-b-lg border-t-2 border-dashed border-gray-400 bg-gray-100 p-4">
+      <div className="w-full rounded-b-lg border-t-2 border-dashed border-secondary-400 bg-secondary-100 p-4">
         <AddSymptom
           existing={data.results}
           consultationId={consultationId}
@@ -202,7 +202,7 @@ const SymptomEntry = (props: {
         <div
           className={classNames(
             "cui-input-base w-full font-medium",
-            disabled && "bg-gray-200",
+            disabled && "bg-secondary-200",
           )}
         >
           <span
@@ -381,7 +381,7 @@ export const SymptomText = (props: {
       <span className="font-normal">Other: </span>
       <span
         className={classNames(
-          !props.value.other_symptom?.trim() && "italic text-gray-700",
+          !props.value.other_symptom?.trim() && "italic text-secondary-700",
         )}
       >
         {props.value.other_symptom || "Not specified"}
diff --git a/src/Components/Symptoms/SymptomsCard.tsx b/src/Components/Symptoms/SymptomsCard.tsx
index 7dbf920a7b6..04c33d4440c 100644
--- a/src/Components/Symptoms/SymptomsCard.tsx
+++ b/src/Components/Symptoms/SymptomsCard.tsx
@@ -18,7 +18,7 @@ const EncounterSymptomsCard = () => {
 
   if (!data) {
     return (
-      <div className="flex w-full animate-pulse justify-center gap-2 rounded-lg bg-gray-200 py-8 text-center font-medium text-gray-700">
+      <div className="flex w-full animate-pulse justify-center gap-2 rounded-lg bg-secondary-200 py-8 text-center font-medium text-secondary-700">
         <CareIcon icon="l-spinner-alt" className="animate-spin text-lg" />
         <span>Fetching symptom records...</span>
       </div>
@@ -29,11 +29,11 @@ const EncounterSymptomsCard = () => {
 
   return (
     <div id="encounter-symptoms">
-      <h3 className="mb-2 text-lg font-semibold leading-relaxed text-gray-900">
+      <h3 className="mb-2 text-lg font-semibold leading-relaxed text-secondary-900">
         Symptoms
       </h3>
 
-      <div className="grid gap-4 divide-y-2 divide-dashed divide-gray-400 md:grid-cols-2 md:divide-x-2 md:divide-y-0">
+      <div className="grid gap-4 divide-y-2 divide-dashed divide-secondary-400 md:grid-cols-2 md:divide-x-2 md:divide-y-0">
         <SymptomsSection title="Active" symptoms={records["in-progress"]} />
         <div className="pt-4 md:pl-6 md:pt-0">
           <SymptomsSection title="Cured" symptoms={records["completed"]} />
@@ -49,7 +49,7 @@ const SymptomsSection = (props: {
 }) => {
   return (
     <div>
-      <h4 className="text-base font-semibold leading-relaxed text-gray-900">
+      <h4 className="text-base font-semibold leading-relaxed text-secondary-900">
         {props.title}
       </h4>
       <ul className="flex list-disc flex-col px-4">
@@ -58,7 +58,7 @@ const SymptomsSection = (props: {
             <div>
               <SymptomText value={record} />
               <br />
-              <span className="flex text-sm text-gray-800">
+              <span className="flex text-sm text-secondary-800">
                 <span className="flex gap-1">
                   Onset <RecordMeta time={record.onset_date} />
                 </span>
@@ -73,7 +73,7 @@ const SymptomsSection = (props: {
         ))}
       </ul>
       {!props.symptoms.length && (
-        <div className="flex h-full w-full gap-2 font-medium text-gray-700">
+        <div className="flex h-full w-full gap-2 font-medium text-secondary-700">
           No symptoms
         </div>
       )}
diff --git a/src/Components/Users/ConfirmHomeFacilityUpdateDialog.tsx b/src/Components/Users/ConfirmHomeFacilityUpdateDialog.tsx
index df21d01ecdd..56c046be4f8 100644
--- a/src/Components/Users/ConfirmHomeFacilityUpdateDialog.tsx
+++ b/src/Components/Users/ConfirmHomeFacilityUpdateDialog.tsx
@@ -34,7 +34,7 @@ const ConfirmHomeFacilityUpdateDialog = (props: ConfirmDialogProps) => {
       disabled={disable}
       variant="danger"
     >
-      <div className="flex leading-relaxed text-gray-800">
+      <div className="flex leading-relaxed text-secondary-800">
         <div>
           Are you sure you want to replace{" "}
           <strong>{previousFacilityName}</strong> with{" "}
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index ddcad2d0cd2..06835bef93d 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -204,7 +204,7 @@ export default function ManageUsers() {
                       {user.username}
                     </div>
                   )}
-                  <div className="min-width-50 shrink-0 text-sm text-gray-600">
+                  <div className="min-width-50 shrink-0 text-sm text-secondary-600">
                     {user.last_login && cur_online ? (
                       <span>
                         {" "}
@@ -221,7 +221,7 @@ export default function ManageUsers() {
                           aria-label="Online"
                           className={classNames(
                             "inline-block h-2 w-2 shrink-0 rounded-full",
-                            cur_online ? "bg-primary-400" : "bg-gray-300",
+                            cur_online ? "bg-primary-400" : "bg-secondary-300",
                           )}
                         ></span>
                         <span className="pl-2">
@@ -288,7 +288,7 @@ export default function ManageUsers() {
                               {user.doctor_qualification}
                             </span>
                           ) : (
-                            <span className="text-gray-600">Unknown</span>
+                            <span className="text-secondary-600">Unknown</span>
                           )}
                         </UserDetails>
                       </div>
@@ -304,7 +304,7 @@ export default function ManageUsers() {
                               years
                             </span>
                           ) : (
-                            <span className="text-gray-600">Unknown</span>
+                            <span className="text-secondary-600">Unknown</span>
                           )}
                         </UserDetails>
                       </div>
@@ -318,7 +318,7 @@ export default function ManageUsers() {
                               {user.doctor_medical_council_registration}
                             </span>
                           ) : (
-                            <span className="text-gray-600">Unknown</span>
+                            <span className="text-secondary-600">Unknown</span>
                           )}
                         </UserDetails>
                       </div>
@@ -374,7 +374,7 @@ export default function ManageUsers() {
                         {user.weekly_working_hours} hours
                       </span>
                     ) : (
-                      <span className="text-gray-600">-</span>
+                      <span className="text-secondary-600">-</span>
                     )}
                   </UserDetails>
                 </div>
@@ -448,7 +448,7 @@ export default function ManageUsers() {
     manageUsers = (
       <div>
         <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
-          <div className="flex w-full items-center justify-center text-xl font-bold text-gray-500">
+          <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
             No Users Found
           </div>
         </div>
@@ -755,7 +755,7 @@ export function UserFacilities(props: { user: any }) {
           {t("add")}
         </ButtonV2>
       </div>
-      <hr className="my-2 border-gray-300" />
+      <hr className="my-2 border-secondary-300" />
 
       {isLoading || userFacilitiesLoading ? (
         <div className="flex items-center justify-center">
@@ -766,7 +766,7 @@ export function UserFacilities(props: { user: any }) {
           {/* Home Facility section */}
           {user?.home_facility_object && (
             <div className="py-2" id="home-facility">
-              <div className="relative rounded p-2 transition hover:bg-gray-200 focus:bg-gray-200 md:rounded-lg">
+              <div className="relative rounded p-2 transition hover:bg-secondary-200 focus:bg-secondary-200 md:rounded-lg">
                 <div className="flex items-center justify-between">
                   <span>{user?.home_facility_object?.name}</span>
                   <span
@@ -820,7 +820,7 @@ export function UserFacilities(props: { user: any }) {
                         id={`facility_${i}`}
                         key={`facility_${i}`}
                         className={classNames(
-                          "relative rounded p-2 transition hover:bg-gray-200 focus:bg-gray-200 md:rounded-lg",
+                          "relative rounded p-2 transition hover:bg-secondary-200 focus:bg-secondary-200 md:rounded-lg",
                         )}
                       >
                         <div className="flex items-center justify-between">
diff --git a/src/Components/Users/ProfileComponents.tsx b/src/Components/Users/ProfileComponents.tsx
index f6fd4297f66..b58a602bde9 100644
--- a/src/Components/Users/ProfileComponents.tsx
+++ b/src/Components/Users/ProfileComponents.tsx
@@ -3,11 +3,15 @@ export const LabelValueCard = (props: { children: React.ReactNode }) => (
 );
 
 export const ProfileLabel = (props: { text: string }) => (
-  <dt className="text-sm font-medium leading-5 text-gray-800">{props.text}</dt>
+  <dt className="text-sm font-medium leading-5 text-secondary-800">
+    {props.text}
+  </dt>
 );
 
 export const ProfileValue = (props: { text: string }) => (
-  <dd className="mt-1 text-sm leading-5 text-gray-900">{props.text || "-"}</dd>
+  <dd className="mt-1 text-sm leading-5 text-secondary-900">
+    {props.text || "-"}
+  </dd>
 );
 
 export const ValueBadge = (props: { text: string }) => (
diff --git a/src/Components/Users/SkillsSlideOverComponents.tsx b/src/Components/Users/SkillsSlideOverComponents.tsx
index 9225cacfed8..6b16a26196a 100644
--- a/src/Components/Users/SkillsSlideOverComponents.tsx
+++ b/src/Components/Users/SkillsSlideOverComponents.tsx
@@ -38,7 +38,7 @@ export const SkillsArray = ({
         <div
           key={`facility_${i}`}
           className={classNames(
-            "relative cursor-pointer rounded px-4 py-5 transition duration-200 ease-in-out hover:bg-gray-200 focus:bg-gray-200 md:rounded-lg lg:px-8",
+            "relative cursor-pointer rounded px-4 py-5 transition duration-200 ease-in-out hover:bg-secondary-200 focus:bg-secondary-200 md:rounded-lg lg:px-8",
           )}
         >
           <div className="flex justify-between">
diff --git a/src/Components/Users/UnlinkFacilityDialog.tsx b/src/Components/Users/UnlinkFacilityDialog.tsx
index 6b1a3850ddd..0af300ed942 100644
--- a/src/Components/Users/UnlinkFacilityDialog.tsx
+++ b/src/Components/Users/UnlinkFacilityDialog.tsx
@@ -33,7 +33,7 @@ const UnlinkFacilityDialog = (props: ConfirmDialogProps) => {
       disabled={disable}
       variant="danger"
     >
-      <div className="flex leading-relaxed text-gray-800">
+      <div className="flex leading-relaxed text-secondary-800">
         <div>
           Are you sure you want to{" "}
           {isHomeFacility ? "clear the home facility" : "unlink the facility"}{" "}
diff --git a/src/Components/Users/UserAdd.tsx b/src/Components/Users/UserAdd.tsx
index bb8b1ea158d..182174f0304 100644
--- a/src/Components/Users/UserAdd.tsx
+++ b/src/Components/Users/UserAdd.tsx
@@ -605,7 +605,7 @@ export const UserAdd = (props: UserProps) => {
       options={
         <Link
           href="https://school.coronasafe.network/targets/12953"
-          className="inline-block rounded border border-gray-600 bg-gray-50 px-4 py-2 text-gray-600 transition hover:bg-gray-100"
+          className="bg-secondary-50 inline-block rounded border border-secondary-600 px-4 py-2 text-secondary-600 transition hover:bg-secondary-100"
           target="_blank"
         >
           <CareIcon icon="l-question-circle" className="text-lg" /> &nbsp;Need
@@ -725,7 +725,7 @@ export const UserAdd = (props: UserProps) => {
                 }}
               />
               {usernameInputInFocus && (
-                <div className="text-small pl-2 text-gray-500">
+                <div className="text-small pl-2 text-secondary-500">
                   <div>
                     {usernameExists !== userExistsEnums.idle && (
                       <>
@@ -815,7 +815,7 @@ export const UserAdd = (props: UserProps) => {
                 onBlur={() => setPasswordInputInFocus(false)}
               />
               {passwordInputInFocus && (
-                <div className="text-small pl-2 text-gray-500">
+                <div className="text-small pl-2 text-secondary-500">
                   {validateRule(
                     state.form.password?.length >= 8,
                     "Password should be atleast 8 characters long",
diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx
index 50dbc5890c2..8a456be9bcd 100644
--- a/src/Components/Users/UserProfile.tsx
+++ b/src/Components/Users/UserProfile.tsx
@@ -456,10 +456,10 @@ export default function UserProfile() {
         <div className="lg:grid lg:grid-cols-3 lg:gap-6">
           <div className="lg:col-span-1">
             <div className="px-4 sm:px-0">
-              <h3 className="text-lg font-medium leading-6 text-gray-900">
+              <h3 className="text-lg font-medium leading-6 text-secondary-900">
                 Personal Information
               </h3>
-              <p className="my-1 text-sm leading-5 text-gray-600">
+              <p className="my-1 text-sm leading-5 text-secondary-600">
                 Local Body, District and State are Non Editable Settings.
               </p>
               <div className="flex flex-col gap-2">
@@ -488,7 +488,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Username
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.username || "-"}
                     </dd>
                   </div>
@@ -499,7 +499,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Contact No
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.phone_number || "-"}
                     </dd>
                   </div>
@@ -511,7 +511,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Whatsapp No
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.alt_phone_number || "-"}
                     </dd>
                   </div>
@@ -522,7 +522,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Email address
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.email || "-"}
                     </dd>
                   </div>
@@ -533,7 +533,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       First Name
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.first_name || "-"}
                     </dd>
                   </div>
@@ -544,7 +544,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Last Name
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.last_name || "-"}
                     </dd>
                   </div>
@@ -555,7 +555,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Date of Birth
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.date_of_birth
                         ? formatDate(userData?.date_of_birth)
                         : "-"}
@@ -577,7 +577,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Gender
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.gender || "-"}
                     </dd>
                   </div>
@@ -585,7 +585,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Local Body
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.local_body_object?.name || "-"}
                     </dd>
                   </div>
@@ -593,7 +593,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       District
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.district_object?.name || "-"}
                     </dd>
                   </div>
@@ -601,7 +601,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       State
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.state_object?.name || "-"}
                     </dd>
                   </div>
@@ -609,7 +609,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Skills
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       <div
                         className="flex flex-wrap gap-2"
                         id="already-linked-skills"
@@ -617,7 +617,7 @@ export default function UserProfile() {
                         {skillsView?.results?.length
                           ? skillsView.results?.map((skill: SkillModel) => {
                               return (
-                                <span className="flex items-center gap-2 rounded-full border-gray-300 bg-gray-200 px-3 text-xs text-gray-700">
+                                <span className="flex items-center gap-2 rounded-full border-secondary-300 bg-secondary-200 px-3 text-xs text-secondary-700">
                                   <p className="py-1.5">
                                     {skill.skill_object.name}
                                   </p>
@@ -635,7 +635,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Average weekly working hours
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.weekly_working_hours ?? "-"}
                     </dd>
                   </div>
@@ -646,7 +646,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Video Connect Link
                     </dt>
-                    <dd className="mt-1 break-words text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 break-words text-sm leading-5 text-secondary-900">
                       {userData?.video_connect_link ? (
                         <a
                           className="text-blue-500"
@@ -770,7 +770,7 @@ export default function UserProfile() {
                         />
                       </div>
                     </div>
-                    <div className="bg-gray-50 px-4 py-3 text-right sm:px-6">
+                    <div className="bg-secondary-50 px-4 py-3 text-right sm:px-6">
                       <Submit onClick={handleSubmit} label="Update" />
                     </div>
                   </div>
@@ -809,7 +809,7 @@ export default function UserProfile() {
                             }}
                             required
                           />
-                          <div className="text-small mb-2 hidden pl-2 text-gray-500 peer-focus-within:block">
+                          <div className="text-small mb-2 hidden pl-2 text-secondary-500 peer-focus-within:block">
                             {validateRule(
                               changePasswordForm.new_password_1?.length >= 8,
                               "Password should be atleast 8 characters long",
@@ -845,7 +845,7 @@ export default function UserProfile() {
                             }}
                           />
                           {changePasswordForm.new_password_2.length > 0 && (
-                            <div className="text-small mb-2 hidden pl-2 text-gray-500 peer-focus-within:block">
+                            <div className="text-small mb-2 hidden pl-2 text-secondary-500 peer-focus-within:block">
                               {validateRule(
                                 changePasswordForm.new_password_1 ===
                                   changePasswordForm.new_password_2,
@@ -856,7 +856,7 @@ export default function UserProfile() {
                         </div>
                       </div>
                     </div>
-                    <div className="bg-gray-50 px-4 py-3 text-right sm:px-6">
+                    <div className="bg-secondary-50 px-4 py-3 text-right sm:px-6">
                       <Submit
                         onClick={changePassword}
                         label="Change Password"
@@ -872,10 +872,10 @@ export default function UserProfile() {
         <div className="mb-8 mt-6 md:grid md:grid-cols-3 md:gap-6">
           <div className="md:col-span-1">
             <div className="px-4 sm:px-0">
-              <h3 className="text-lg font-medium leading-6 text-gray-900">
+              <h3 className="text-lg font-medium leading-6 text-secondary-900">
                 Language Selection
               </h3>
-              <p className="mt-1 text-sm leading-5 text-gray-600">
+              <p className="mt-1 text-sm leading-5 text-secondary-600">
                 Set your local language
               </p>
             </div>
@@ -887,10 +887,10 @@ export default function UserProfile() {
         <div className="mb-8 mt-6 md:grid md:grid-cols-3 md:gap-6">
           <div className="md:col-span-1">
             <div className="px-4 sm:px-0">
-              <h3 className="text-lg font-medium leading-6 text-gray-900">
+              <h3 className="text-lg font-medium leading-6 text-secondary-900">
                 Software Update
               </h3>
-              <p className="mt-1 text-sm leading-5 text-gray-600">
+              <p className="mt-1 text-sm leading-5 text-secondary-600">
                 Check for an available update
               </p>
             </div>
diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 61c62f80c70..e763f859d3e 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -87,7 +87,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
               <span className="flex-1 text-sm font-bold text-orange-500">
                 Mean
               </span>
-              <span className="flex-1 text-xl font-bold text-gray-300">
+              <span className="flex-1 text-xl font-bold text-secondary-300">
                 {bpWithinMaxPersistence ? data.bp?.map.value ?? "--" : "--"}
               </span>
             </div>
diff --git a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
index fbca718bf1b..c57daf8f324 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
@@ -20,7 +20,7 @@ const VitalsMonitorAssetPopover = ({
       <Popover.Button>
         <CareIcon
           icon="l-info-circle"
-          className="cursor-pointer text-sm text-gray-500 hover:text-white md:text-base"
+          className="cursor-pointer text-sm text-secondary-500 hover:text-white md:text-base"
         />
       </Popover.Button>
       <Transition
@@ -49,13 +49,13 @@ const VitalsMonitorAssetPopover = ({
             </div>
             <div className="flex flex-col gap-1">
               <p className="text-sm md:text-base">Middleware Hostname:</p>
-              <p className="break-words text-gray-600">
+              <p className="break-words text-secondary-600">
                 {asset?.resolved_middleware?.hostname}
               </p>
             </div>
             <div className="flex flex-col gap-1">
               <p className="text-sm md:text-base">Local IP Address:</p>
-              <p className="break-words text-gray-600">
+              <p className="break-words text-secondary-600">
                 {asset?.meta?.local_ip_address}
               </p>
             </div>
diff --git a/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx b/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
index a9598f16965..6692327798e 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
@@ -8,7 +8,7 @@ interface IVitalsMonitorFooterProps {
 const VitalsMonitorFooter = ({ asset }: IVitalsMonitorFooterProps) => {
   return (
     <div className="flex w-full items-center gap-2 text-xs tracking-wide md:text-sm">
-      <p className="text-gray-500 ">{asset?.name}</p>
+      <p className="text-secondary-500 ">{asset?.name}</p>
       <VitalsMonitorAssetPopover asset={asset} />
     </div>
   );
diff --git a/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
index d5341e4b8a6..7f839da04d7 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
@@ -21,13 +21,13 @@ const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => {
             {patient?.name}
           </Link>
         ) : (
-          <span className="flex items-center gap-1 text-gray-500">
+          <span className="flex items-center gap-1 text-secondary-500">
             <CareIcon icon="l-ban" />
             No Patient
           </span>
         )}
         {patient && (
-          <span className="text-xs font-bold text-gray-400 md:text-sm">
+          <span className="text-xs font-bold text-secondary-400 md:text-sm">
             {`${formatPatientAge(patient)}; `}
             {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
           </span>
@@ -36,7 +36,7 @@ const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => {
       <div className="flex flex-col items-end gap-2 text-xs md:flex-row md:items-center md:text-sm">
         {bed && (
           <Link
-            className="flex flex-col items-end gap-2 text-gray-500 md:flex-row md:items-center"
+            className="flex flex-col items-end gap-2 text-secondary-500 md:flex-row md:items-center"
             href={`/facility/${bed.location_object!.facility!.id}/location/${bed!.location_object!.id}/beds`}
           >
             <span className="flex items-center gap-1 hover:text-white">
diff --git a/src/Routers/AppRouter.tsx b/src/Routers/AppRouter.tsx
index 04f9223e654..bba3bd04899 100644
--- a/src/Routers/AppRouter.tsx
+++ b/src/Routers/AppRouter.tsx
@@ -107,7 +107,7 @@ export default function AppRouter() {
 
   return (
     <SidebarShrinkContext.Provider value={{ shrinked, setShrinked }}>
-      <div className="absolute inset-0 flex h-screen overflow-hidden bg-gray-100 print:overflow-visible">
+      <div className="absolute inset-0 flex h-screen overflow-hidden bg-secondary-100 print:overflow-visible">
         <>
           <div className="block md:hidden">
             <MobileSidebar open={sidebarOpen} setOpen={setSidebarOpen} />{" "}
@@ -121,7 +121,7 @@ export default function AppRouter() {
           <div className="relative z-10 flex h-16 shrink-0 bg-white shadow md:hidden">
             <button
               onClick={() => setSidebarOpen(true)}
-              className="border-r border-gray-200 px-4 text-gray-500 focus:bg-gray-100 focus:text-gray-600 focus:outline-none md:hidden"
+              className="border-r border-secondary-200 px-4 text-secondary-500 focus:bg-secondary-100 focus:text-secondary-600 focus:outline-none md:hidden"
               aria-label="Open sidebar"
             >
               <svg
diff --git a/src/Utils/AutoSave.tsx b/src/Utils/AutoSave.tsx
index 163585ed966..fa29b2690d3 100644
--- a/src/Utils/AutoSave.tsx
+++ b/src/Utils/AutoSave.tsx
@@ -127,7 +127,7 @@ export function DraftSection(props: {
         <div className="my-2 flex flex-wrap justify-end">
           {drafts?.length > 0 && (
             <div className="mx-1 flex items-center">
-              <p className="text-gray-500">
+              <p className="text-secondary-500">
                 Last saved draft:{" "}
                 {relativeTime(
                   draftStarted
diff --git a/src/Utils/VoiceRecorder.tsx b/src/Utils/VoiceRecorder.tsx
index cd38d29773f..6336df5cb01 100644
--- a/src/Utils/VoiceRecorder.tsx
+++ b/src/Utils/VoiceRecorder.tsx
@@ -48,7 +48,7 @@ export const VoiceRecorder = (props: any) => {
         {isRecording ? (
           <>
             <div className="flex space-x-2">
-              <div className="bg-gray-100 p-2 text-primary-700">
+              <div className="bg-secondary-100 p-2 text-primary-700">
                 <CareIcon
                   icon="l-record-audio"
                   className="mr-2 animate-pulse"
diff --git a/src/Utils/useFileManager.tsx b/src/Utils/useFileManager.tsx
index d45ddc28f06..145c63800a8 100644
--- a/src/Utils/useFileManager.tsx
+++ b/src/Utils/useFileManager.tsx
@@ -277,7 +277,7 @@ export default function useFileManager(
         className="md:w-[700px]"
         onClose={() => setArchiveDialogueOpen(null)}
       >
-        <div className="mb-8 text-xs text-gray-700">
+        <div className="mb-8 text-xs text-secondary-700">
           <CareIcon icon="l-archive" className="mr-2" />
           This file has been archived and cannot be unarchived.
         </div>
@@ -322,7 +322,7 @@ export default function useFileManager(
                 />
               </div>
               <div>
-                <div className="text-xs uppercase text-gray-700">
+                <div className="text-xs uppercase text-secondary-700">
                   {item.label}
                 </div>
                 <div className="break-words text-base">{item.content}</div>
diff --git a/src/style/CAREUI.css b/src/style/CAREUI.css
index eec8694bf03..048b9289007 100644
--- a/src/style/CAREUI.css
+++ b/src/style/CAREUI.css
@@ -18,11 +18,11 @@
 }
 
 .cui-input-base {
-    @apply text-sm block w-full py-3 px-4 text-black placeholder:text-gray-600 bg-white disabled:bg-gray-200 border border-gray-400 focus:border-primary-400 ring-0 focus:ring-1 ring-primary-400 outline-none focus:outline-none shadow-none rounded transition-colors duration-300 !important
+    @apply text-sm block w-full py-3 px-4 text-black placeholder:text-secondary-600 bg-white disabled:bg-secondary-200 border border-secondary-400 focus:border-primary-400 ring-0 focus:ring-1 ring-primary-400 outline-none focus:outline-none shadow-none rounded transition-colors duration-300 !important
 }
 
 .cui-dropdown-base {
-    @apply z-40 w-full rounded-b-md xl:rounded-b-lg shadow-lg overflow-auto max-h-96 bg-gray-100 divide-y divide-gray-300 ring-1 ring-gray-400 focus:outline-none
+    @apply z-40 w-full rounded-b-md xl:rounded-b-lg shadow-lg overflow-auto max-h-96 bg-secondary-100 divide-y divide-secondary-300 ring-1 ring-secondary-400 focus:outline-none
 }
 
 .cui-card {
diff --git a/src/style/index.css b/src/style/index.css
index b05417bf912..c30a893f8ac 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -41,7 +41,7 @@ html {
 body {
     font-family: "Inter", sans-serif;
     color: #453c52;
-    @apply font-sans text-gray-900 w-full h-full antialiased;
+    @apply font-sans text-secondary-900 w-full h-full antialiased;
 }
 
 h1,
@@ -127,27 +127,27 @@ button:focus {
 /* Button Styles */
 
 .btn-default {
-    @apply border text-gray-800;
+    @apply border text-secondary-800;
 }
 
 .btn-default:hover {
-    @apply bg-gray-100 text-gray-600;
+    @apply bg-secondary-100 text-secondary-600;
 }
 
 .btn-default:focus {
-    @apply bg-gray-400 text-gray-700;
+    @apply bg-secondary-400 text-secondary-700;
 }
 
 .btn-subtle {
-    @apply bg-gray-200 text-gray-800;
+    @apply bg-secondary-200 text-secondary-800;
 }
 
 .btn-subtle:hover {
-    @apply bg-gray-300 text-gray-900;
+    @apply bg-secondary-300 text-secondary-900;
 }
 
 .btn-subtle:focus {
-    @apply bg-gray-400 text-gray-900;
+    @apply bg-secondary-400 text-secondary-900;
 }
 
 .btn-primary-ghost {
@@ -211,12 +211,12 @@ button:focus {
 }
 
 .secondary-button {
-    @apply text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-6 py-2.5 mr-2 mb-2 transition-all ease-in-out duration-200 !important;
+    @apply text-secondary-900 bg-white border border-secondary-300 focus:outline-none hover:bg-secondary-100 focus:ring-4 focus:ring-secondary-200 font-medium rounded-lg text-sm px-6 py-2.5 mr-2 mb-2 transition-all ease-in-out duration-200 !important;
 }
 
 button:disabled,
 .disabled {
-    @apply cursor-not-allowed bg-gray-300 text-gray-500 shadow-none border-transparent;
+    @apply cursor-not-allowed bg-secondary-300 text-secondary-500 shadow-none border-transparent;
     background-image: none;
 }
 
@@ -224,7 +224,7 @@ button:disabled:hover,
 .disabled:hover,
 button:disabled:focus,
 .disabled:focus {
-    @apply bg-gray-300 text-gray-500 border-transparent shadow-none;
+    @apply bg-secondary-300 text-secondary-500 border-transparent shadow-none;
     background-image: none;
 }
 
@@ -268,7 +268,7 @@ button:disabled:focus,
 }
 
 .radio-label span:first-child {
-    @apply relative rounded-full align-middle border border-gray-500 bg-white mr-3;
+    @apply relative rounded-full align-middle border border-secondary-500 bg-white mr-3;
     width: 1.125rem;
     height: 1.125rem;
     transform: scale(1);
@@ -322,7 +322,7 @@ button:disabled:focus,
 }
 
 .checkbox__label span:first-child {
-    @apply relative rounded align-middle border border-gray-500 bg-white w-4 h-4 mr-3;
+    @apply relative rounded align-middle border border-secondary-500 bg-white w-4 h-4 mr-3;
     transform: scale(1);
     transition: all 0.2s ease;
 }
@@ -375,25 +375,25 @@ button:disabled:focus,
 }
 
 label {
-    @apply block text-gray-700 text-sm font-medium;
+    @apply block text-secondary-700 text-sm font-medium;
 }
 
 input {
-    @apply border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 transition-colors duration-300 !important;
+    @apply border-secondary-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 transition-colors duration-300 !important;
 }
 
 input:disabled,
 .disabled {
-    @apply cursor-not-allowed bg-gray-200 border-gray-400 text-gray-700;
+    @apply cursor-not-allowed bg-secondary-200 border-secondary-400 text-secondary-700;
 }
 
 textarea {
-    @apply border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 transition-colors duration-300;
+    @apply border-secondary-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 transition-colors duration-300;
 }
 
 button:disabled,
 .disabled {
-    @apply cursor-not-allowed bg-gray-300 text-gray-500 shadow-none border-transparent;
+    @apply cursor-not-allowed bg-secondary-300 text-secondary-500 shadow-none border-transparent;
     background-image: none;
 }
 
@@ -401,17 +401,17 @@ button:disabled,
 /* Styling skeleton loading */
 
 .skeleton-placeholder__line-sm {
-    @apply rounded-full bg-gray-100;
+    @apply rounded-full bg-secondary-100;
     height: 0.625rem;
 }
 
 .skeleton-placeholder__line-md {
-    @apply rounded-full bg-gray-100;
+    @apply rounded-full bg-secondary-100;
     height: 1rem;
 }
 
 .skeleton-placeholder__image {
-    @apply mt-5 h-48 rounded-lg bg-gray-100;
+    @apply mt-5 h-48 rounded-lg bg-secondary-100;
 }
 
 .skeleton-animate {
diff --git a/tailwind.config.js b/tailwind.config.js
index e856f0e178b..43e2412b93c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -43,7 +43,7 @@ module.exports = {
           800: "#03543F",
           900: "#014737",
         },
-        secondary: gray, // equivalent to our custom gray, but will become equivalent to tailwind's gray in tailwind v3.2
+        secondary: gray,
         danger: colors.red,
         warning: colors.amber,
         alert: colors.violet,