diff --git a/frontend/package.json b/frontend/package.json
index f794b8d09..a2152ebe9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.71",
+    "frappe-ui": "^0.1.94",
     "gemoji": "^8.1.0",
     "lodash": "^4.17.21",
     "mime": "^4.0.1",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 61e774c9a..03d619ab1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,7 +9,7 @@
 <script setup>
 import { Dialogs } from '@/utils/dialogs'
 import { sessionStore as session } from '@/stores/session'
-import { Toasts } from 'frappe-ui'
+import { Toasts, setConfig } from 'frappe-ui'
 import { computed, defineAsyncComponent } from 'vue'
 
 const MobileLayout = defineAsyncComponent(() =>
@@ -25,4 +25,6 @@ const Layout = computed(() => {
     return DesktopLayout
   }
 })
+
+setConfig('timezone', window.timezone)
 </script>
diff --git a/frontend/src/assets/Inter/Inter-Black.woff b/frontend/src/assets/Inter/Inter-Black.woff
deleted file mode 100644
index c7737ed3d..000000000
Binary files a/frontend/src/assets/Inter/Inter-Black.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-Black.woff2 b/frontend/src/assets/Inter/Inter-Black.woff2
deleted file mode 100644
index b16b995be..000000000
Binary files a/frontend/src/assets/Inter/Inter-Black.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-BlackItalic.woff b/frontend/src/assets/Inter/Inter-BlackItalic.woff
deleted file mode 100644
index b5f144764..000000000
Binary files a/frontend/src/assets/Inter/Inter-BlackItalic.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-BlackItalic.woff2 b/frontend/src/assets/Inter/Inter-BlackItalic.woff2
deleted file mode 100644
index a3f1b70cd..000000000
Binary files a/frontend/src/assets/Inter/Inter-BlackItalic.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-Bold.woff b/frontend/src/assets/Inter/Inter-Bold.woff
deleted file mode 100644
index e38455587..000000000
Binary files a/frontend/src/assets/Inter/Inter-Bold.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-Bold.woff2 b/frontend/src/assets/Inter/Inter-Bold.woff2
deleted file mode 100644
index 835dd4977..000000000
Binary files a/frontend/src/assets/Inter/Inter-Bold.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-BoldItalic.woff b/frontend/src/assets/Inter/Inter-BoldItalic.woff
deleted file mode 100644
index ffac3f59b..000000000
Binary files a/frontend/src/assets/Inter/Inter-BoldItalic.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-BoldItalic.woff2 b/frontend/src/assets/Inter/Inter-BoldItalic.woff2
deleted file mode 100644
index 1a41a14ff..000000000
Binary files a/frontend/src/assets/Inter/Inter-BoldItalic.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-ExtraBold.woff b/frontend/src/assets/Inter/Inter-ExtraBold.woff
deleted file mode 100644
index 885ac94fb..000000000
Binary files a/frontend/src/assets/Inter/Inter-ExtraBold.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-ExtraBold.woff2 b/frontend/src/assets/Inter/Inter-ExtraBold.woff2
deleted file mode 100644
index ae956b150..000000000
Binary files a/frontend/src/assets/Inter/Inter-ExtraBold.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff b/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff
deleted file mode 100644
index d6cf86233..000000000
Binary files a/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff2 b/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff2
deleted file mode 100644
index 86578995d..000000000
Binary files a/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-ExtraLight.woff b/frontend/src/assets/Inter/Inter-ExtraLight.woff
deleted file mode 100644
index ff7691932..000000000
Binary files a/frontend/src/assets/Inter/Inter-ExtraLight.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-ExtraLight.woff2 b/frontend/src/assets/Inter/Inter-ExtraLight.woff2
deleted file mode 100644
index 694b2df9f..000000000
Binary files a/frontend/src/assets/Inter/Inter-ExtraLight.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff b/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff
deleted file mode 100644
index c6ed13a4f..000000000
Binary files a/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff2 b/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff2
deleted file mode 100644
index 9a7bd1109..000000000
Binary files a/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-Italic.woff b/frontend/src/assets/Inter/Inter-Italic.woff
deleted file mode 100644
index 4fdb59dc2..000000000
Binary files a/frontend/src/assets/Inter/Inter-Italic.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-Italic.woff2 b/frontend/src/assets/Inter/Inter-Italic.woff2
deleted file mode 100644
index deca637d8..000000000
Binary files a/frontend/src/assets/Inter/Inter-Italic.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-Light.woff b/frontend/src/assets/Inter/Inter-Light.woff
deleted file mode 100644
index 42850acc0..000000000
Binary files a/frontend/src/assets/Inter/Inter-Light.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-Light.woff2 b/frontend/src/assets/Inter/Inter-Light.woff2
deleted file mode 100644
index 65a7daddd..000000000
Binary files a/frontend/src/assets/Inter/Inter-Light.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-LightItalic.woff b/frontend/src/assets/Inter/Inter-LightItalic.woff
deleted file mode 100644
index c4ed9a94f..000000000
Binary files a/frontend/src/assets/Inter/Inter-LightItalic.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-LightItalic.woff2 b/frontend/src/assets/Inter/Inter-LightItalic.woff2
deleted file mode 100644
index 555fc5595..000000000
Binary files a/frontend/src/assets/Inter/Inter-LightItalic.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-Medium.woff b/frontend/src/assets/Inter/Inter-Medium.woff
deleted file mode 100644
index 495faef7f..000000000
Binary files a/frontend/src/assets/Inter/Inter-Medium.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-Medium.woff2 b/frontend/src/assets/Inter/Inter-Medium.woff2
deleted file mode 100644
index 871ce4ce5..000000000
Binary files a/frontend/src/assets/Inter/Inter-Medium.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-MediumItalic.woff b/frontend/src/assets/Inter/Inter-MediumItalic.woff
deleted file mode 100644
index 389c7a2bf..000000000
Binary files a/frontend/src/assets/Inter/Inter-MediumItalic.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-MediumItalic.woff2 b/frontend/src/assets/Inter/Inter-MediumItalic.woff2
deleted file mode 100644
index aa8057992..000000000
Binary files a/frontend/src/assets/Inter/Inter-MediumItalic.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-Regular.woff b/frontend/src/assets/Inter/Inter-Regular.woff
deleted file mode 100644
index fa7715d12..000000000
Binary files a/frontend/src/assets/Inter/Inter-Regular.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-Regular.woff2 b/frontend/src/assets/Inter/Inter-Regular.woff2
deleted file mode 100644
index b52dd0a0b..000000000
Binary files a/frontend/src/assets/Inter/Inter-Regular.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-SemiBold.woff b/frontend/src/assets/Inter/Inter-SemiBold.woff
deleted file mode 100644
index 18d7749f5..000000000
Binary files a/frontend/src/assets/Inter/Inter-SemiBold.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-SemiBold.woff2 b/frontend/src/assets/Inter/Inter-SemiBold.woff2
deleted file mode 100644
index ece5204a1..000000000
Binary files a/frontend/src/assets/Inter/Inter-SemiBold.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff b/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff
deleted file mode 100644
index 8ee64396a..000000000
Binary files a/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff2 b/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff2
deleted file mode 100644
index b32c0ba3b..000000000
Binary files a/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-Thin.woff b/frontend/src/assets/Inter/Inter-Thin.woff
deleted file mode 100644
index 1a22286f6..000000000
Binary files a/frontend/src/assets/Inter/Inter-Thin.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-Thin.woff2 b/frontend/src/assets/Inter/Inter-Thin.woff2
deleted file mode 100644
index c56bc7ca6..000000000
Binary files a/frontend/src/assets/Inter/Inter-Thin.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-ThinItalic.woff b/frontend/src/assets/Inter/Inter-ThinItalic.woff
deleted file mode 100644
index d8ec8373a..000000000
Binary files a/frontend/src/assets/Inter/Inter-ThinItalic.woff and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-ThinItalic.woff2 b/frontend/src/assets/Inter/Inter-ThinItalic.woff2
deleted file mode 100644
index eca5608c0..000000000
Binary files a/frontend/src/assets/Inter/Inter-ThinItalic.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-italic.var.woff2 b/frontend/src/assets/Inter/Inter-italic.var.woff2
deleted file mode 100644
index 1f5d92611..000000000
Binary files a/frontend/src/assets/Inter/Inter-italic.var.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter-roman.var.woff2 b/frontend/src/assets/Inter/Inter-roman.var.woff2
deleted file mode 100644
index 05621d8d1..000000000
Binary files a/frontend/src/assets/Inter/Inter-roman.var.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/Inter.var.woff2 b/frontend/src/assets/Inter/Inter.var.woff2
deleted file mode 100644
index 46bb51539..000000000
Binary files a/frontend/src/assets/Inter/Inter.var.woff2 and /dev/null differ
diff --git a/frontend/src/assets/Inter/inter.css b/frontend/src/assets/Inter/inter.css
deleted file mode 100644
index 3ca1bbf65..000000000
--- a/frontend/src/assets/Inter/inter.css
+++ /dev/null
@@ -1,152 +0,0 @@
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-Thin.woff2?v=3.12") format("woff2"),
-       url("Inter-Thin.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-ThinItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-ThinItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLight.woff2?v=3.12") format("woff2"),
-       url("Inter-ExtraLight.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLightItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-ExtraLightItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-Light.woff2?v=3.12") format("woff2"),
-       url("Inter-Light.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-LightItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-LightItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("Inter-Regular.woff2?v=3.12") format("woff2"),
-       url("Inter-Regular.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url("Inter-Italic.woff2?v=3.12") format("woff2"),
-       url("Inter-Italic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-Medium.woff2?v=3.12") format("woff2"),
-       url("Inter-Medium.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-MediumItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-MediumItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("Inter-SemiBold.woff2?v=3.12") format("woff2"),
-       url("Inter-SemiBold.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 600;
-  font-display: swap;
-  src: url("Inter-SemiBoldItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-SemiBoldItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("Inter-Bold.woff2?v=3.12") format("woff2"),
-       url("Inter-Bold.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url("Inter-BoldItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-BoldItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBold.woff2?v=3.12") format("woff2"),
-       url("Inter-ExtraBold.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBoldItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-ExtraBoldItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url("Inter-Black.woff2?v=3.12") format("woff2"),
-       url("Inter-Black.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 900;
-  font-display: swap;
-  src: url("Inter-BlackItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-BlackItalic.woff?v=3.12") format("woff");
-}
diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index c3623dc10..6ac91af27 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -16,7 +16,7 @@
   >
     <div
       v-if="all_activities?.loading"
-      class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <LoadingIndicator class="h-6 w-6" />
       <span>{{ __('Loading...') }}</span>
@@ -54,9 +54,9 @@
               :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
             >
               <div
-                class="z-10 flex h-8 w-7 items-center justify-center bg-white"
+                class="z-10 flex h-8 w-7 items-center justify-center bg-surface-white"
               >
-                <CommentIcon class="text-gray-800" />
+                <CommentIcon class="text-ink-gray-8" />
               </div>
             </div>
             <CommentArea class="mb-4" :activity="comment" />
@@ -76,11 +76,11 @@
               :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
             >
               <div
-                class="z-10 flex h-8 w-7 items-center justify-center bg-white text-gray-800"
+                class="z-10 flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
               >
                 <MissedCallIcon
                   v-if="call.status == 'No Answer'"
-                  class="text-red-600"
+                  class="text-ink-red-4"
                 />
                 <DeclinedCallIcon v-else-if="call.status == 'Busy'" />
                 <component
@@ -120,10 +120,10 @@
           :class="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']"
         >
           <div
-            class="z-10 flex h-7 w-7 items-center justify-center bg-white"
+            class="z-10 flex h-7 w-7 items-center justify-center bg-surface-white"
             :class="{
               'mt-2.5': ['communication'].includes(activity.activity_type),
-              'bg-white': ['added', 'removed', 'changed'].includes(
+              'bg-surface-white': ['added', 'removed', 'changed'].includes(
                 activity.activity_type,
               ),
               'h-8': [
@@ -145,7 +145,7 @@
                   activity.activity_type,
                 ) && activity.status == 'No Answer'
               "
-              class="text-red-600"
+              class="text-ink-red-4"
             />
             <DeclinedCallIcon
               v-else-if="
@@ -159,8 +159,8 @@
               :is="activity.icon"
               :class="
                 ['added', 'removed', 'changed'].includes(activity.activity_type)
-                  ? 'text-gray-500'
-                  : 'text-gray-800'
+                  ? 'text-ink-gray-4'
+                  : 'text-ink-gray-8'
               "
             />
           </div>
@@ -185,10 +185,10 @@
         >
           <div class="flex items-center justify-stretch gap-2 text-base">
             <div
-              class="inline-flex items-center flex-wrap gap-1.5 text-gray-800 font-medium"
+              class="inline-flex items-center flex-wrap gap-1.5 text-ink-gray-8 font-medium"
             >
               <span class="font-medium">{{ activity.owner_name }}</span>
-              <span class="text-gray-600">{{ __(activity.data.type) }}</span>
+              <span class="text-ink-gray-5">{{ __(activity.data.type) }}</span>
               <a
                 v-if="activity.data.file_url"
                 :href="activity.data.file_url"
@@ -205,7 +205,7 @@
             </div>
             <div class="ml-auto whitespace-nowrap">
               <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
-                <div class="text-sm text-gray-600">
+                <div class="text-sm text-ink-gray-5">
                   {{ __(timeAgo(activity.creation)) }}
                 </div>
               </Tooltip>
@@ -225,7 +225,7 @@
           <div class="flex items-center justify-stretch gap-2 text-base">
             <div
               v-if="activity.other_versions"
-              class="inline-flex flex-wrap gap-1.5 text-gray-800 font-medium"
+              class="inline-flex flex-wrap gap-1.5 text-ink-gray-8 font-medium"
             >
               <span>{{ activity.show_others ? __('Hide') : __('Show') }}</span>
               <span> +{{ activity.other_versions.length + 1 }} </span>
@@ -243,22 +243,22 @@
             </div>
             <div
               v-else
-              class="inline-flex items-center flex-wrap gap-1 text-gray-600"
+              class="inline-flex items-center flex-wrap gap-1 text-ink-gray-5"
             >
-              <span class="font-medium text-gray-800">
+              <span class="font-medium text-ink-gray-8">
                 {{ activity.owner_name }}
               </span>
               <span v-if="activity.type">{{ __(activity.type) }}</span>
               <span
                 v-if="activity.data.field_label"
-                class="max-w-xs truncate font-medium text-gray-800"
+                class="max-w-xs truncate font-medium text-ink-gray-8"
               >
                 {{ __(activity.data.field_label) }}
               </span>
               <span v-if="activity.value">{{ __(activity.value) }}</span>
               <span
                 v-if="activity.data.old_value"
-                class="max-w-xs font-medium text-gray-800"
+                class="max-w-xs font-medium text-ink-gray-8"
               >
                 <div
                   class="flex items-center gap-1"
@@ -274,7 +274,7 @@
               <span v-if="activity.to">{{ __('to') }}</span>
               <span
                 v-if="activity.data.value"
-                class="max-w-xs font-medium text-gray-800"
+                class="max-w-xs font-medium text-ink-gray-8"
               >
                 <div
                   class="flex items-center gap-1"
@@ -291,7 +291,7 @@
 
             <div class="ml-auto whitespace-nowrap">
               <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
-                <div class="text-sm text-gray-600">
+                <div class="text-sm text-ink-gray-5">
                   {{ __(timeAgo(activity.creation)) }}
                 </div>
               </Tooltip>
@@ -305,23 +305,23 @@
               v-for="activity in [activity, ...activity.other_versions]"
               class="flex items-start justify-stretch gap-2 py-1.5 text-base"
             >
-              <div class="inline-flex flex-wrap gap-1 text-gray-600">
+              <div class="inline-flex flex-wrap gap-1 text-ink-gray-5">
                 <span
                   v-if="activity.data.field_label"
-                  class="max-w-xs truncate text-gray-600"
+                  class="max-w-xs truncate text-ink-gray-5"
                 >
                   {{ __(activity.data.field_label) }}
                 </span>
                 <FeatherIcon
                   name="arrow-right"
-                  class="mx-1 h-4 w-4 text-gray-600"
+                  class="mx-1 h-4 w-4 text-ink-gray-5"
                 />
                 <span v-if="activity.type">
                   {{ startCase(__(activity.type)) }}
                 </span>
                 <span
                   v-if="activity.data.old_value"
-                  class="max-w-xs font-medium text-gray-800"
+                  class="max-w-xs font-medium text-ink-gray-8"
                 >
                   <div
                     class="flex items-center gap-1"
@@ -337,7 +337,7 @@
                 <span v-if="activity.to">{{ __('to') }}</span>
                 <span
                   v-if="activity.data.value"
-                  class="max-w-xs font-medium text-gray-800"
+                  class="max-w-xs font-medium text-ink-gray-8"
                 >
                   <div
                     class="flex items-center gap-1"
@@ -356,7 +356,7 @@
                 <Tooltip
                   :text="dateFormat(activity.creation, dateTooltipFormat)"
                 >
-                  <div class="text-sm text-gray-600">
+                  <div class="text-sm text-ink-gray-5">
                     {{ __(timeAgo(activity.creation)) }}
                   </div>
                 </Tooltip>
@@ -368,7 +368,7 @@
     </div>
     <div
       v-else
-      class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <component :is="emptyTextIcon" class="h-10 w-10" />
       <span>{{ __(emptyText) }}</span>
@@ -758,7 +758,7 @@ const emptyTextIcon = computed(() => {
   } else if (title.value == 'WhatsApp') {
     icon = WhatsAppIcon
   }
-  return h(icon, { class: 'text-gray-500' })
+  return h(icon, { class: 'text-ink-gray-4' })
 })
 
 function timelineIcon(activity_type, is_lead) {
diff --git a/frontend/src/components/Activities/ActivityHeader.vue b/frontend/src/components/Activities/ActivityHeader.vue
index 4e39db036..d5f901bdf 100644
--- a/frontend/src/components/Activities/ActivityHeader.vue
+++ b/frontend/src/components/Activities/ActivityHeader.vue
@@ -2,7 +2,7 @@
   <div
     class="mx-4 my-3 flex items-center justify-between text-lg font-medium sm:mx-10 sm:mb-4 sm:mt-8"
   >
-    <div class="flex h-8 items-center text-xl font-semibold text-gray-800">
+    <div class="flex h-8 items-center text-xl font-semibold text-ink-gray-8">
       {{ __(title) }}
     </div>
     <Button
diff --git a/frontend/src/components/Activities/AttachmentArea.vue b/frontend/src/components/Activities/AttachmentArea.vue
index c792c265d..318d3d4c9 100644
--- a/frontend/src/components/Activities/AttachmentArea.vue
+++ b/frontend/src/components/Activities/AttachmentArea.vue
@@ -7,7 +7,7 @@
       >
         <div class="flex gap-2 truncate">
           <div
-            class="size-11 bg-white rounded overflow-hidden flex-shrink-0 flex justify-center items-center"
+            class="size-11 bg-surface-white rounded overflow-hidden flex-shrink-0 flex justify-center items-center"
             :class="{ border: !isImage(attachment.file_type) }"
           >
             <img
@@ -18,22 +18,22 @@
             />
             <component
               v-else
-              class="size-4"
+              class="size-4 text-ink-gray-7"
               :is="fileIcon(attachment.file_type)"
             />
           </div>
           <div class="flex flex-col justify-center gap-1 truncate">
-            <div class="text-base text-gray-800 truncate">
+            <div class="text-base text-ink-gray-8 truncate">
               {{ attachment.file_name }}
             </div>
-            <div class="mb-1 text-sm text-gray-600">
+            <div class="mb-1 text-sm text-ink-gray-5">
               {{ convertSize(attachment.file_size) }}
             </div>
           </div>
         </div>
         <div class="flex flex-col items-end gap-2 flex-shrink-0">
           <Tooltip :text="dateFormat(attachment.creation, dateTooltipFormat)">
-            <div class="text-sm text-gray-600">
+            <div class="text-sm text-ink-gray-5">
               {{ __(timeAgo(attachment.creation)) }}
             </div>
           </Tooltip>
@@ -51,7 +51,7 @@
               >
                 <FeatherIcon
                   :name="attachment.is_private ? 'lock' : 'unlock'"
-                  class="size-3 text-gray-700"
+                  class="size-3 text-ink-gray-7"
                 />
               </Button>
             </Tooltip>
@@ -60,7 +60,7 @@
                 class="!size-5"
                 @click.stop="() => deleteAttachment(attachment.name)"
               >
-                <FeatherIcon name="trash-2" class="size-3 text-gray-700" />
+                <FeatherIcon name="trash-2" class="size-3 text-ink-gray-7" />
               </Button>
             </Tooltip>
           </div>
diff --git a/frontend/src/components/Activities/AudioPlayer.vue b/frontend/src/components/Activities/AudioPlayer.vue
index 40723bb70..30ae16c78 100644
--- a/frontend/src/components/Activities/AudioPlayer.vue
+++ b/frontend/src/components/Activities/AudioPlayer.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="w-full text-sm text-gray-600">
+  <div class="w-full text-sm text-ink-gray-5">
     <div class="flex items-center gap-2">
       <Button variant="ghost" @click="playPause">
         <template #icon>
-          <PlayIcon v-if="isPaused" class="size-4 text-gray-600" />
-          <PauseIcon v-else class="size-4 text-gray-600" />
+          <PlayIcon v-if="isPaused" class="size-4 text-ink-gray-5" />
+          <PauseIcon v-else class="size-4 text-ink-gray-5" />
         </template>
       </Button>
       <div class="flex gap-2 items-center justify-between flex-1">
         <input
-          class="w-full slider !h-[0.5] bg-gray-200 [&::-webkit-slider-thumb]:shadow [&::-webkit-slider-thumb:hover]:outline [&::-webkit-slider-thumb:hover]:outline-[0.5px]"
+          class="w-full slider !h-[0.5] bg-surface-gray-3 [&::-webkit-slider-thumb]:shadow [&::-webkit-slider-thumb:hover]:outline [&::-webkit-slider-thumb:hover]:outline-[0.5px]"
           :style="{
             background: `linear-gradient(to right, #171717 ${progress}%, #ededed ${progress}%)`,
           }"
diff --git a/frontend/src/components/Activities/CallArea.vue b/frontend/src/components/Activities/CallArea.vue
index c320ba988..5977084b9 100644
--- a/frontend/src/components/Activities/CallArea.vue
+++ b/frontend/src/components/Activities/CallArea.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
-      <div class="inline-flex items-center flex-wrap gap-1 text-gray-600">
+      <div class="inline-flex items-center flex-wrap gap-1 text-ink-gray-5">
         <Avatar
           :image="activity.caller.image"
           :label="activity.caller.label"
           size="md"
         />
-        <span class="font-medium text-gray-800 ml-1">
+        <span class="font-medium text-ink-gray-8 ml-1">
           {{ activity.caller.label }}
         </span>
         <span>{{
@@ -18,14 +18,14 @@
       </div>
       <div class="ml-auto whitespace-nowrap">
         <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
-          <div class="text-sm text-gray-600">
+          <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(activity.creation)) }}
           </div>
         </Tooltip>
       </div>
     </div>
     <div
-      class="flex flex-col gap-2 border border-gray-200 rounded-md bg-white px-3 py-2.5"
+      class="flex flex-col gap-2 border border-gray-200 rounded-md bg-surface-white px-3 py-2.5 text-ink-gray-9"
     >
       <div class="flex items-center justify-between">
         <div class="inline-flex gap-2 items-center text-base font-medium">
diff --git a/frontend/src/components/Activities/CommentArea.vue b/frontend/src/components/Activities/CommentArea.vue
index 0adb51ed1..a082cb0aa 100644
--- a/frontend/src/components/Activities/CommentArea.vue
+++ b/frontend/src/components/Activities/CommentArea.vue
@@ -1,26 +1,26 @@
 <template>
   <div :id="activity.name">
     <div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
-      <div class="inline-flex items-center flex-wrap gap-1 text-gray-600">
+      <div class="inline-flex items-center flex-wrap gap-1 text-ink-gray-5">
         <UserAvatar class="mr-1" :user="activity.owner" size="md" />
-        <span class="font-medium text-gray-800">
+        <span class="font-medium text-ink-gray-8">
           {{ activity.owner_name }}
         </span>
         <span>{{ __('added a') }}</span>
-        <span class="max-w-xs truncate font-medium text-gray-800">
+        <span class="max-w-xs truncate font-medium text-ink-gray-8">
           {{ __('comment') }}
         </span>
       </div>
       <div class="ml-auto whitespace-nowrap">
         <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
-          <div class="text-sm text-gray-600">
+          <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(activity.creation)) }}
           </div>
         </Tooltip>
       </div>
     </div>
     <div
-      class="cursor-pointer rounded bg-gray-50 px-3 py-[7.5px] text-base leading-6 transition-all duration-300 ease-in-out"
+      class="cursor-pointer rounded bg-surface-gray-1 px-3 py-[7.5px] text-base leading-6 transition-all duration-300 ease-in-out"
     >
       <div class="prose-f" v-html="activity.content" />
       <div v-if="activity.attachments.length" class="mt-2 flex flex-wrap gap-2">
diff --git a/frontend/src/components/Activities/EmailArea.vue b/frontend/src/components/Activities/EmailArea.vue
index 33e11f16b..3528cbee6 100644
--- a/frontend/src/components/Activities/EmailArea.vue
+++ b/frontend/src/components/Activities/EmailArea.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="cursor-pointer flex flex-col rounded-md shadow bg-white px-3 py-1.5 text-base transition-all duration-300 ease-in-out"
+    class="cursor-pointer flex flex-col rounded-md shadow bg-surface-white px-3 py-1.5 text-base transition-all duration-300 ease-in-out"
   >
-    <div class="-mb-0.5 flex items-center justify-between gap-2 truncate">
+    <div class="-mb-0.5 flex items-center justify-between gap-2 truncate text-ink-gray-9">
       <div class="flex items-center gap-2 truncate">
         <span>{{ activity.data.sender_full_name }}</span>
-        <span class="sm:flex hidden text-sm text-gray-600">
+        <span class="sm:flex hidden text-sm text-ink-gray-5">
           {{ '<' + activity.data.sender + '>' }}
         </span>
         <Badge
@@ -23,7 +23,7 @@
           :theme="status.color"
         />
         <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
-          <div class="text-sm text-gray-600">
+          <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(activity.creation)) }}
           </div>
         </Tooltip>
@@ -32,7 +32,7 @@
             <div>
               <Button
                 variant="ghost"
-                class="text-gray-700"
+                class="text-ink-gray-7"
                 @click="reply(activity.data)"
               >
                 <template #icon>
@@ -45,7 +45,7 @@
             <div>
               <Button
                 variant="ghost"
-                class="text-gray-700"
+                class="text-ink-gray-7"
                 @click="reply(activity.data, true)"
               >
                 <template #icon>
@@ -57,18 +57,18 @@
         </div>
       </div>
     </div>
-    <div class="flex flex-col gap-1 text-base leading-5 text-gray-800">
+    <div class="flex flex-col gap-1 text-base leading-5 text-ink-gray-8">
       <div>{{ activity.data.subject }}</div>
       <div>
-        <span class="mr-1 text-gray-600"> {{ __('To') }}: </span>
+        <span class="mr-1 text-ink-gray-5"> {{ __('To') }}: </span>
         <span>{{ activity.data.recipients }}</span>
         <span v-if="activity.data.cc">, </span>
-        <span v-if="activity.data.cc" class="mr-1 text-gray-600">
+        <span v-if="activity.data.cc" class="mr-1 text-ink-gray-5">
           {{ __('CC') }}:
         </span>
         <span v-if="activity.data.cc">{{ activity.data.cc }}</span>
         <span v-if="activity.data.bcc">, </span>
-        <span v-if="activity.data.bcc" class="mr-1 text-gray-600">
+        <span v-if="activity.data.bcc" class="mr-1 text-ink-gray-5">
           {{ __('BCC') }}:
         </span>
         <span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
diff --git a/frontend/src/components/Activities/NoteArea.vue b/frontend/src/components/Activities/NoteArea.vue
index d93169770..6cebb48f2 100644
--- a/frontend/src/components/Activities/NoteArea.vue
+++ b/frontend/src/components/Activities/NoteArea.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="activity group flex h-48 cursor-pointer flex-col justify-between gap-2 rounded-md bg-gray-50 px-4 py-3 hover:bg-gray-100"
+    class="activity group flex h-48 cursor-pointer flex-col justify-between gap-2 rounded-md bg-gray-50 px-4 py-3 hover:bg-surface-gray-2"
   >
     <div class="flex items-center justify-between">
       <div class="truncate text-lg font-medium">
@@ -20,7 +20,7 @@
         <Button
           icon="more-horizontal"
           variant="ghosted"
-          class="!h-6 !w-6 hover:bg-gray-100"
+          class="!h-6 !w-6 hover:bg-surface-gray-2"
         />
       </Dropdown>
     </div>
@@ -28,21 +28,21 @@
       v-if="note.content"
       :content="note.content"
       :editable="false"
-      editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+      editor-class="!prose-sm max-w-none !text-sm text-ink-gray-5 focus:outline-none"
       class="flex-1 overflow-hidden"
     />
     <div class="mt-1 flex items-center justify-between gap-2">
       <div class="flex items-center gap-2 truncate">
         <UserAvatar :user="note.owner" size="xs" />
         <div
-          class="truncate text-sm text-gray-800"
+          class="truncate text-sm text-ink-gray-8"
           :title="getUser(note.owner).full_name"
         >
           {{ getUser(note.owner).full_name }}
         </div>
       </div>
       <Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
-        <div class="truncate text-sm text-gray-700">
+        <div class="truncate text-sm text-ink-gray-7">
           {{ __(timeAgo(note.modified)) }}
         </div>
       </Tooltip>
diff --git a/frontend/src/components/Activities/ToDoArea.vue b/frontend/src/components/Activities/ToDoArea.vue
index 2d489d30e..1104bfc3c 100644
--- a/frontend/src/components/Activities/ToDoArea.vue
+++ b/frontend/src/components/Activities/ToDoArea.vue
@@ -2,20 +2,20 @@
   <div v-if="todos.length">
     <div v-for="(todo, i) in todos" :key="todo.name">
       <div
-        class="activity flex cursor-pointer gap-6 rounded p-2.5 duration-300 ease-in-out hover:bg-gray-50"
+        class="activity flex cursor-pointer gap-6 rounded p-2.5 duration-300 ease-in-out hover:bg-gray-1"
         @click="modalRef.showToDo(todo)"
       >
         <div class="flex flex-1 flex-col gap-1.5 text-base truncate">
-          <div class="font-medium text-gray-900 truncate">
+          <div class="font-medium text-ink-gray-9 truncate">
             {{ todo.custom_title }}
           </div>
-          <div class="flex gap-1.5 text-gray-800">
+          <div class="flex gap-1.5 text-ink-gray-8">
             <div class="flex items-center gap-1.5">
               <UserAvatar :user="todo.allocated_to" size="xs" />
               {{ getUser(todo.allocated_to).full_name }}
             </div>
             <div v-if="todo.date" class="flex items-center justify-center">
-              <DotIcon class="h-2.5 w-2.5 text-gray-600" :radius="2" />
+              <DotIcon class="h-2.5 w-2.5 text-ink-gray-5" :radius="2" />
             </div>
             <div v-if="todo.date">
               <Tooltip
@@ -28,7 +28,7 @@
               </Tooltip>
             </div>
             <div class="flex items-center justify-center">
-              <DotIcon class="h-2.5 w-2.5 text-gray-600" :radius="2" />
+              <DotIcon class="h-2.5 w-2.5 text-ink-gray-5" :radius="2" />
             </div>
             <div class="flex gap-2">
               <ToDoPriorityIcon class="!h-2 !w-2" :priority="todo.priority" />
@@ -42,7 +42,7 @@
             @click.stop
           >
             <Tooltip :text="__('Change Status')">
-              <Button variant="ghosted" class="hover:bg-gray-300">
+              <Button variant="ghosted" class="hover:bg-surface-gray-4">
                 <ToDoStatusIcon :status="todo.status" />
               </Button>
             </Tooltip>
@@ -76,7 +76,7 @@
             <Button
               icon="more-horizontal"
               variant="ghosted"
-              class="hover:bg-gray-300"
+              class="hover:bg-surface-gray-4 text-ink-gray-9"
             />
           </Dropdown>
         </div>
diff --git a/frontend/src/components/Activities/WhatsAppArea.vue b/frontend/src/components/Activities/WhatsAppArea.vue
index ac93d2dc9..51386cbbc 100644
--- a/frontend/src/components/Activities/WhatsAppArea.vue
+++ b/frontend/src/components/Activities/WhatsAppArea.vue
@@ -8,12 +8,12 @@
     >
       <div
         :id="whatsapp.name"
-        class="group/message relative max-w-[90%] rounded-md bg-gray-50 p-1.5 pl-2 text-base shadow-sm"
+        class="group/message relative max-w-[90%] rounded-md bg-surface-gray-1 text-ink-gray-9 p-1.5 pl-2 text-base shadow-sm"
       >
         <div
           v-if="whatsapp.is_reply"
           @click="() => scrollToMessage(whatsapp.reply_to)"
-          class="mb-1 cursor-pointer rounded border-0 border-l-4 bg-gray-200 p-2 text-gray-600"
+          class="mb-1 cursor-pointer rounded border-0 border-l-4 bg-surface-gray-3 p-2 text-ink-gray-5"
           :class="whatsapp.reply_to_type == 'Incoming' ? 'border-green-500' : 'border-blue-400'"
         >
           <div
@@ -27,25 +27,25 @@
               {{ whatsapp.header }}
             </div>
             <div v-html="formatWhatsAppMessage(whatsapp.reply_message)" />
-            <div v-if="whatsapp.footer" class="text-xs text-gray-600">
+            <div v-if="whatsapp.footer" class="text-xs text-ink-gray-5">
               {{ whatsapp.footer }}
             </div>
           </div>
         </div>
         <div class="flex gap-2 justify-between">
           <div
-            class="absolute -right-0.5 -top-0.5 flex cursor-pointer gap-1 rounded-full bg-white pb-2 pl-2 pr-1.5 pt-1.5 opacity-0 group-hover/message:opacity-100"
+            class="absolute -right-0.5 -top-0.5 flex cursor-pointer gap-1 rounded-full bg-surface-white pb-2 pl-2 pr-1.5 pt-1.5 opacity-0 group-hover/message:opacity-100"
             :style="{
               background:
                 'radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(238, 130, 238, 0) 100%)',
             }"
           >
             <Dropdown :options="messageOptions(whatsapp)">
-              <FeatherIcon name="chevron-down" class="size-4 text-gray-600" />
+              <FeatherIcon name="chevron-down" class="size-4 text-ink-gray-5" />
             </Dropdown>
           </div>
           <div
-            class="absolute -bottom-5 flex gap-1 rounded-full border bg-white p-1 pb-[3px] shadow-sm"
+            class="absolute -bottom-5 flex gap-1 rounded-full border bg-surface-white p-1 pb-[3px] shadow-sm"
             v-if="whatsapp.reaction"
           >
             <div class="flex size-4 items-center justify-center">
@@ -57,7 +57,7 @@
               {{ whatsapp.header }}
             </div>
             <div v-html="formatWhatsAppMessage(whatsapp.template)" />
-            <div v-if="whatsapp.footer" class="text-xs text-gray-600">
+            <div v-if="whatsapp.footer" class="text-xs text-ink-gray-5">
               {{ whatsapp.footer }}
             </div>
           </div>
@@ -76,10 +76,10 @@
           </div>
           <div v-else-if="whatsapp.content_type == 'document'" class="flex items-center gap-2">
             <DocumentIcon
-              class="size-10 cursor-pointer rounded-md text-gray-500"
+              class="size-10 cursor-pointer rounded-md text-ink-gray-4"
               @click="() => openFileInAnotherTab(whatsapp.attach)"
             />
-            <div class="text-gray-600">Document</div>
+            <div class="text-ink-gray-5">Document</div>
           </div>
           <div v-else-if="whatsapp.content_type == 'audio'" class="flex items-center gap-2">
             <audio :src="whatsapp.attach" controls class="cursor-pointer" />
@@ -92,7 +92,7 @@
               v-html="formatWhatsAppMessage(whatsapp.message)"
             />
           </div>
-          <div class="-mb-1 flex shrink-0 items-end gap-1 text-gray-600">
+          <div class="-mb-1 flex shrink-0 items-end gap-1 text-ink-gray-5">
             <Tooltip :text="dateFormat(whatsapp.creation, 'ddd, MMM D, YYYY')">
               <div class="text-2xs">
                 {{ dateFormat(whatsapp.creation, 'hh:mm a') }}
@@ -117,7 +117,7 @@
           @update:modelValue="() => reactOnMessage(whatsapp.name, emoji)"
         >
           <Button @click="() => (reaction = true) && togglePopover()" class="rounded-full !size-6 mt-0.5">
-            <ReactIcon class="text-gray-400" />
+            <ReactIcon class="text-ink-gray-3" />
           </Button>
         </IconPicker>
       </div>
diff --git a/frontend/src/components/Activities/WhatsAppBox.vue b/frontend/src/components/Activities/WhatsAppBox.vue
index aae94ca40..d244ef68a 100644
--- a/frontend/src/components/Activities/WhatsAppBox.vue
+++ b/frontend/src/components/Activities/WhatsAppBox.vue
@@ -4,7 +4,7 @@
     class="flex items-center justify-around gap-2 px-3 pt-2 sm:px-10"
   >
     <div
-      class="mb-1 ml-13 flex-1 cursor-pointer rounded border-0 border-l-4 border-green-500 bg-gray-100 p-2 text-base text-gray-600"
+      class="mb-1 ml-13 flex-1 cursor-pointer rounded border-0 border-l-4 border-green-500 bg-surface-gray-2 p-2 text-base text-ink-gray-5"
       :class="reply.type == 'Incoming' ? 'border-green-500' : 'border-blue-400'"
     >
       <div
@@ -26,7 +26,7 @@
             <Dropdown :options="uploadOptions(openFileSelector)">
               <FeatherIcon
                 name="plus"
-                class="size-4.5 cursor-pointer text-gray-600"
+                class="size-4.5 cursor-pointer text-ink-gray-5"
               />
             </Dropdown>
           </div>
@@ -45,7 +45,7 @@
       >
         <SmileIcon
           @click="togglePopover"
-          class="flex size-4.5 cursor-pointer rounded-sm text-xl leading-none text-gray-500"
+          class="flex size-4.5 cursor-pointer rounded-sm text-xl leading-none text-ink-gray-4"
         />
       </IconPicker>
     </div>
diff --git a/frontend/src/components/Apps.vue b/frontend/src/components/Apps.vue
index 15beeac50..0d7553e26 100644
--- a/frontend/src/components/Apps.vue
+++ b/frontend/src/components/Apps.vue
@@ -3,8 +3,8 @@
     <template #target="{ togglePopover }">
       <button
         :class="[
-          active ? 'bg-gray-100' : 'text-gray-800',
-          'group w-full flex h-7 items-center justify-between rounded px-2 text-base hover:bg-gray-100',
+          active ? 'bg-surface-gray-3' : 'text-ink-gray-6',
+          'group w-full flex h-7 items-center justify-between rounded px-2 text-base hover:bg-surface-gray-2',
         ]"
         @click.prevent="togglePopover()"
       >
@@ -14,18 +14,18 @@
             {{ __('Apps') }}
           </span>
         </div>
-        <FeatherIcon name="chevron-right" class="size-4 text-gray-600" />
+        <FeatherIcon name="chevron-right" class="size-4 text-ink-gray-5" />
       </button>
     </template>
     <template #body>
-      <div class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-white shadow-xl">
+      <div class="grid grid-cols-3 justify-between mx-3 p-2 min-w-40 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
         <div v-for="app in apps.data" :key="app.name">
           <a
             :href="app.route"
-            class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-1 hover:bg-gray-100"
+            class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-1 hover:bg-surface-gray-2"
           >
             <img class="size-8" :src="app.logo" />
-            <div class="text-sm text-gray-700" @click="app.onClick">
+            <div class="text-sm text-ink-gray-7" @click="app.onClick">
               {{ app.title }}
             </div>
           </a>
diff --git a/frontend/src/components/CallUI.vue b/frontend/src/components/CallUI.vue
index 568a946f9..9aec76822 100644
--- a/frontend/src/components/CallUI.vue
+++ b/frontend/src/components/CallUI.vue
@@ -2,7 +2,7 @@
   <div v-show="showCallPopup" v-bind="$attrs">
     <div
       ref="callPopup"
-      class="fixed z-20 flex w-60 cursor-move select-none flex-col rounded-lg bg-gray-900 p-4 text-gray-300 shadow-2xl"
+      class="fixed z-20 flex w-60 cursor-move select-none flex-col rounded-lg bg-surface-gray-7 p-4 text-ink-gray-2 shadow-2xl"
       :style="style"
     >
       <div class="flex flex-row-reverse items-center gap-1">
@@ -19,7 +19,7 @@
           <div class="text-xl font-medium">
             {{ contact.full_name }}
           </div>
-          <div class="text-sm text-gray-600">{{ contact.mobile_no }}</div>
+          <div class="text-sm text-ink-gray-5">{{ contact.mobile_no }}</div>
         </div>
         <CountUpTimer ref="counterUp">
           <div v-if="onCall" class="my-1 text-base">
@@ -46,7 +46,7 @@
         </Button> -->
           <Button class="rounded-full">
             <template #icon>
-              <NoteIcon class="h-4 w-4 cursor-pointer rounded-full text-gray-900" @click="showNoteModal = true" />
+              <NoteIcon class="h-4 w-4 cursor-pointer rounded-full text-ink-gray-9" @click="showNoteModal = true" />
             </template>
           </Button>
           <Button class="rounded-full bg-red-600 hover:bg-red-700">
@@ -101,7 +101,7 @@
   </div>
   <div
     v-show="showSmallCallWindow"
-    class="ml-2 flex cursor-pointer select-none items-center justify-between gap-3 rounded-lg bg-gray-900 px-2 py-[7px] text-base text-gray-300"
+    class="ml-2 flex cursor-pointer select-none items-center justify-between gap-3 rounded-lg bg-surface-gray-7 px-2 py-[7px] text-base text-ink-gray-2"
     @click="toggleCallWindow"
     v-bind="$attrs"
   >
diff --git a/frontend/src/components/ColumnSettings.vue b/frontend/src/components/ColumnSettings.vue
index b3deb507d..90e89cc79 100644
--- a/frontend/src/components/ColumnSettings.vue
+++ b/frontend/src/components/ColumnSettings.vue
@@ -11,7 +11,7 @@
       </Button>
     </template>
     <template #body="{ close }">
-      <div class="my-2 rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl">
+      <div class="my-2 p-1.5 min-w-40 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
         <div v-if="!edit">
           <Draggable
             :list="columns"
@@ -22,7 +22,7 @@
           >
             <template #item="{ element }">
               <div
-                class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-gray-800 hover:bg-gray-100"
+                class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-ink-gray-8 hover:bg-surface-gray-2"
               >
                 <div class="flex items-center gap-2">
                   <DragIcon class="h-3.5" />
@@ -39,11 +39,11 @@
               </div>
             </template>
           </Draggable>
-          <div class="mt-1.5 flex flex-col gap-1 border-t pt-1.5">
+          <div class="mt-1.5 flex flex-col gap-1 border-t border-outline-gray-modals pt-1.5">
             <Autocomplete value="" :options="fields" @change="(e) => addColumn(e)">
               <template #target="{ togglePopover }">
                 <Button
-                  class="w-full !justify-start !text-gray-600"
+                  class="w-full !justify-start !text-ink-gray-5"
                   variant="ghost"
                   @click="togglePopover()"
                   :label="__('Add Column')"
@@ -56,7 +56,7 @@
             </Autocomplete>
             <Button
               v-if="columnsUpdated"
-              class="w-full !justify-start !text-gray-600"
+              class="w-full !justify-start !text-ink-gray-5"
               variant="ghost"
               @click="reset(close)"
               :label="__('Reset Changes')"
@@ -67,7 +67,7 @@
             </Button>
             <Button
               v-if="!is_default"
-              class="w-full !justify-start !text-gray-600"
+              class="w-full !justify-start !text-ink-gray-5"
               variant="ghost"
               @click="resetToDefault(close)"
               :label="__('Reset to Default')"
@@ -79,7 +79,7 @@
           </div>
         </div>
         <div v-else>
-          <div class="flex flex-col items-center justify-between gap-2 rounded px-2 py-1.5 text-base text-gray-800">
+          <div class="flex flex-col items-center justify-between gap-2 rounded px-2 py-1.5 text-base text-ink-gray-8">
             <div class="flex flex-col items-center gap-3">
               <FormControl
                 type="text"
@@ -178,15 +178,15 @@ const fields = computed(() => {
   if (!allFields) return []
 
   return allFields.filter((field) => {
-    return !columns.value.find((column) => column.key === field.value)
+    return !columns.value.find((column) => column.key === field.fieldname)
   })
 })
 
 function addColumn(c) {
   let _column = {
     label: c.label,
-    type: c.type,
-    key: c.value,
+    type: c.feildtype,
+    key: c.fieldname,
     width: '10rem',
   }
   columns.value.push(_column)
diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index 8010d504c..157582565 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -4,7 +4,7 @@
       <Button
         ref="sendEmailRef"
         variant="ghost"
-        :class="[showEmailBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
+        :class="[showEmailBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '']"
         :label="__('Reply')"
         @click="toggleEmailBox()"
       >
@@ -15,7 +15,7 @@
       <Button
         variant="ghost"
         :label="__('Comment')"
-        :class="[showCommentBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
+        :class="[showCommentBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '']"
         @click="toggleCommentBox()"
       >
         <template #prefix>
diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
new file mode 100644
index 000000000..d92224344
--- /dev/null
+++ b/frontend/src/components/Controls/Grid.vue
@@ -0,0 +1,268 @@
+<template>
+    <div class="flex flex-col text-base">
+      <div v-if="label" class="mb-1.5 text-sm text-ink-gray-5">{{ label }}</div>
+  
+      <div class="rounded border border-gray-100">
+        <!-- Header -->
+        <div
+          class="grid items-center rounded-t-sm bg-surface-gray-2 text-ink-gray-5"
+          :style="{ gridTemplateColumns: gridTemplateColumns }"
+        >
+          <div class="inline-flex items-center justify-center border-r p-2">
+            <Checkbox
+              class="cursor-pointer duration-300"
+              :modelValue="allRowsSelected"
+              @click.stop="toggleSelectAllRows($event.target.checked)"
+            />
+          </div>
+          <div class="inline-flex items-center justify-center border-r py-2 px-1">
+            No.
+          </div>
+          <div
+            class="inline-flex items-center border-r p-2"
+            v-for="field in gridFields"
+            :key="field.fieldname"
+          >
+            {{ field.label }}
+          </div>
+          <div class="p-2" />
+        </div>
+        <!-- Rows -->
+        <template v-if="rows.length">
+          <Draggable class="w-full" v-model="rows" group="rows" item-key="name">
+            <template #item="{ element: row, index }">
+              <div
+                class="grid-row grid cursor-pointer items-center border-b border-gray-100 bg-surface-white last:rounded-b last:border-b-0"
+                :style="{ gridTemplateColumns: gridTemplateColumns }"
+              >
+                <div
+                  class="inline-flex h-full items-center justify-center border-r p-2"
+                >
+                  <Checkbox
+                    class="cursor-pointer duration-300"
+                    :modelValue="selectedRows.has(row.name)"
+                    @click.stop="toggleSelectRow(row)"
+                  />
+                </div>
+                <div
+                  class="flex h-full items-center justify-center border-r p-2 text-sm text-ink-gray-8"
+                >
+                  {{ index + 1 }}
+                </div>
+                <div
+                  class="border-r border-gray-100 h-full"
+                  v-for="field in gridFields"
+                  :key="field.fieldname"
+                >
+                  <Link
+                    v-if="field.fieldtype === 'Link'"
+                    class="text-sm text-ink-gray-8"
+                    :value="row[field.fieldname]"
+                    :doctype="field.options"
+                    :placeholder="row.placeholder"
+                    @change="
+                      (data: String) =>
+                        field.onChange && field.onChange(data, index)
+                    "
+                  />
+                  <div
+                    v-else-if="field.fieldtype === 'Check'"
+                    class="flex h-full justify-center items-center"
+                  >
+                    <Checkbox
+                      class="cursor-pointer duration-300"
+                      v-model="row[field.fieldname]"
+                      @change="
+                        (e: Event) =>
+                          field.onChange &&
+                          field.onChange(
+                            (e.target as HTMLInputElement).checked,
+                            index,
+                          )
+                      "
+                    />
+                  </div>
+                  <FormControl
+                    v-else
+                    class="text-sm text-ink-gray-8"
+                    v-model="row[field.fieldname]"
+                    :type="field.fieldtype.toLowerCase()"
+                    :options="field.options"
+                    variant="outline"
+                    size="md"
+                    @change="
+                      (e: Event) =>
+                        field.onChange &&
+                        field.onChange(
+                          (e.target as HTMLInputElement).value,
+                          index,
+                        )
+                    "
+                  />
+                </div>
+                <div class="edit-row">
+                  <Button
+                    class="flex w-full items-center justify-center rounded"
+                    @click="showRowList[index] = true"
+                  >
+                    <FeatherIcon
+                      name="edit-2"
+                      class="h-3.5 w-3.5 text-ink-gray-7"
+                    />
+                  </Button>
+                </div>
+                <Dialog
+                  v-model="showRowList[index]"
+                  :options="{ title: `Editing Row ${index + 1}` }"
+                >
+                  <template #body-content>
+                    <div v-for="field in fields" :key="field.fieldname">
+                      {{ field.label }}: {{ row[field.fieldname] }}
+                    </div>
+                  </template>
+                </Dialog>
+              </div>
+            </template>
+          </Draggable>
+        </template>
+  
+        <div
+          v-else
+          class="flex flex-col items-center rounded p-5 text-sm text-ink-gray-5"
+        >
+          No Data
+        </div>
+      </div>
+  
+      <div class="mt-2 flex flex-row gap-2">
+        <Button
+          v-if="showDeleteBtn"
+          label="Delete"
+          variant="solid"
+          theme="red"
+          @click="deleteRows"
+        />
+        <Button label="Add Row" @click="addRow" />
+      </div>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import Link from '@/components/Controls/Link.vue'
+  import { GridColumn, GridRow } from '@/types/controls'
+  import { getRandom } from '@/utils'
+  import { Dialog, FormControl, Checkbox } from 'frappe-ui'
+  import Draggable from 'vuedraggable'
+  import { ref, reactive, computed, PropType } from 'vue'
+  
+  const props = defineProps<{
+    label?: string
+    gridFields: GridColumn[]
+    fields: GridColumn[]
+  }>()
+  
+  const rows = defineModel({
+    type: Array as PropType<GridRow[]>,
+    default: () => [],
+  })
+  const showRowList = ref(new Array(rows.value.length).fill(false))
+  const selectedRows = reactive(new Set<string>())
+  
+  const gridTemplateColumns = computed(() => {
+    // for the checkbox & sr no. columns
+    let columns = '0.5fr 0.5fr'
+    columns +=
+      ' ' +
+      props.gridFields.map((col) => `minmax(0, ${col.width || 2}fr)`).join(' ')
+    // for the edit button column
+    columns += ' 0.5fr'
+  
+    return columns
+  })
+  
+  const allRowsSelected = computed(() => {
+    if (!rows.value.length) return false
+    return rows.value.length === selectedRows.size
+  })
+  
+  const showDeleteBtn = computed(() => selectedRows.size > 0)
+  
+  const toggleSelectAllRows = (iSelected: boolean) => {
+    if (iSelected) {
+      rows.value.forEach((row: GridRow) => selectedRows.add(row.name))
+    } else {
+      selectedRows.clear()
+    }
+  }
+  
+  const toggleSelectRow = (row: GridRow) => {
+    if (selectedRows.has(row.name)) {
+      selectedRows.delete(row.name)
+    } else {
+      selectedRows.add(row.name)
+    }
+  }
+  
+  const addRow = () => {
+    const newRow = {} as GridRow
+    props.gridFields.forEach((field) => {
+      if (field.fieldtype === 'Check') newRow[field.fieldname] = false
+      else newRow[field.fieldname] = ''
+    })
+    newRow.name = getRandom(10)
+    showRowList.value.push(false)
+    newRow['__islocal'] = true
+    rows.value.push(newRow)
+  }
+  
+  const deleteRows = () => {
+    rows.value = rows.value.filter((row) => !selectedRows.has(row.name))
+    showRowList.value.pop()
+    selectedRows.clear()
+  }
+  </script>
+  
+  <style scoped>
+  /* For Input fields */
+  :deep(.grid-row input:not([type='checkbox'])) {
+    border: none;
+    border-radius: 0;
+    height: 38px;
+  }
+  
+  :deep(.grid-row input:focus, .grid-row input:hover) {
+    box-shadow: none;
+  }
+  
+  :deep(.grid-row input:focus-within) {
+    border: 1px solid #d1d8dd;
+  }
+  
+  /* For select field */
+  :deep(.grid-row select) {
+    border: none;
+    border-radius: 0;
+    height: 38px;
+  }
+  
+  /* For Autocomplete */
+  :deep(.grid-row button) {
+    border: none;
+    border-radius: 0;
+    background-color: white;
+    height: 38px;
+  }
+  
+  :deep(.grid-row .edit-row button) {
+    border-bottom-right-radius: 7px;
+  }
+  
+  :deep(.grid-row button:focus, .grid-row button:hover) {
+    box-shadow: none;
+    background-color: white;
+  }
+  
+  :deep(.grid-row button:focus-within) {
+    border: 1px solid #d1d8dd;
+  }
+  </style>
\ No newline at end of file
diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 5f3d9e87b..2d363aebd 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -161,7 +161,7 @@ const labelClasses = computed(() => {
       sm: 'text-xs',
       md: 'text-base',
     }[attrs.size || 'sm'],
-    'text-gray-600',
+    'text-ink-gray-5',
   ]
 })
 </script>
diff --git a/frontend/src/components/Controls/MultiValueInput.vue b/frontend/src/components/Controls/MultiValueInput.vue
index d2f385ee9..58d00dd0c 100644
--- a/frontend/src/components/Controls/MultiValueInput.vue
+++ b/frontend/src/components/Controls/MultiValueInput.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="flex flex-wrap gap-1 min-h-20 p-1.5 cursor-text rounded h-7 text-base border border-gray-300 bg-white hover:border-gray-400 focus:border-gray-500 focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors w-full"
+      class="group flex flex-wrap gap-1 min-h-20 p-1.5 cursor-text rounded h-7 text-base bg-surface-gray-2 hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors w-full"
       @click="setFocus"
     >
       <Button
@@ -11,7 +11,7 @@
         :label="value"
         theme="gray"
         variant="subtle"
-        class="rounded"
+        class="rounded bg-surface-gray-3 group-hover:bg-surface-gray-4 focus-visible:ring-outline-gray-4"
         @keydown.delete.capture.stop="removeLastValue"
       >
         <template #suffix>
@@ -23,9 +23,9 @@
         </template>
       </Button>
       <div class="flex-1">
-        <TextInput
+        <Input
           ref="search"
-          class="w-full border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
+          class="w-full border-none h-7 text-base bg-surface-gray-2 group-hover:bg-surface-gray-3 focus:border-none focus:!shadow-none focus-visible:!ring-0 transition-colors"
           type="text"
           v-model="query"
           placeholder="example@email.com"
@@ -113,7 +113,7 @@ const removeLastValue = () => {
 }
 
 function setFocus() {
-  search.value.el.focus()
+  search.value.focus()
 }
 
 defineExpose({ setFocus })
diff --git a/frontend/src/components/Controls/MultiselectInput.vue b/frontend/src/components/Controls/MultiselectInput.vue
index fd4af4f55..48d306935 100644
--- a/frontend/src/components/Controls/MultiselectInput.vue
+++ b/frontend/src/components/Controls/MultiselectInput.vue
@@ -21,7 +21,7 @@
             <template #target="{ togglePopover }">
               <ComboboxInput
                 ref="search"
-                class="search-input form-input w-full border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
+                class="search-input form-input w-full border-none bg-surface-white hover:bg-surface-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
                 type="text"
                 :value="query"
                 @change="
@@ -37,21 +37,23 @@
             </template>
             <template #body="{ isOpen }">
               <div v-show="isOpen">
-                <div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
-                  <ComboboxOptions class="my-1 max-h-[12rem] overflow-y-auto px-1.5" static>
+                <div
+                  class="mt-1 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+                >
+                  <ComboboxOptions class="p-1.5 max-h-[12rem] overflow-y-auto" static>
                     <ComboboxOption v-for="option in options" :key="option.value" :value="option" v-slot="{ active }">
                       <li
                         :class="[
                           'flex cursor-pointer items-center rounded px-2 py-1 text-base',
-                          { 'bg-gray-100': active },
+                          { 'bg-surface-gray-3': active },
                         ]"
                       >
                         <UserAvatar class="mr-2" :user="option.value" size="lg" />
-                        <div class="flex flex-col gap-1 p-1 text-gray-800">
+                        <div class="flex flex-col gap-1 p-1 text-ink-gray-8">
                           <div class="text-base font-medium">
                             {{ option.label }}
                           </div>
-                          <div class="text-sm text-gray-600">
+                          <div class="text-sm text-ink-gray-5">
                             {{ option.value }}
                           </div>
                         </div>
diff --git a/frontend/src/components/DropdownItem.vue b/frontend/src/components/DropdownItem.vue
index f292d902b..8f2ed2da6 100644
--- a/frontend/src/components/DropdownItem.vue
+++ b/frontend/src/components/DropdownItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="group flex w-full items-center justify-between rounded bg-transparent p-1 pl-2 text-base text-gray-800 transition-colors hover:bg-gray-200 active:bg-gray-300"
+    class="group flex w-full items-center justify-between rounded bg-transparent p-1 pl-2 text-base text-ink-gray-8 transition-colors hover:bg-surface-gray-3 active:bg-surface-gray-4"
   >
     <div class="flex flex-1 items-center justify-between gap-7">
       <div v-show="!editMode">{{ option.value }}</div>
@@ -20,7 +20,7 @@
           variant="ghost"
           :label="__('Save')"
           size="sm"
-          class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
+          class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
           @click="saveOption"
         />
         <Tooltip text="Set As Primary" v-if="!isNew && !option.selected">
@@ -28,7 +28,7 @@
             <Button
               variant="ghost"
               size="sm"
-              class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
+              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
               @click="option.onClick"
             >
               <SuccessIcon />
@@ -40,7 +40,7 @@
             <Button
               variant="ghost"
               size="sm"
-              class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
+              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
               @click="toggleEditMode"
             >
               <EditIcon />
@@ -53,7 +53,7 @@
               variant="ghost"
               icon="x"
               size="sm"
-              class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
+              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
               @click="() => option.onDelete(option, isNew)"
             />
           </div>
@@ -61,7 +61,7 @@
       </div>
     </div>
     <div v-if="option.selected">
-      <FeatherIcon name="check" class="text-primary-500 h-4 w-6" size="sm" />
+      <FeatherIcon name="check" class="text-ink-gray-5 h-4 w-6" size="sm" />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/EmailEditor.vue b/frontend/src/components/EmailEditor.vue
index da9e0b7a0..6601d214e 100644
--- a/frontend/src/components/EmailEditor.vue
+++ b/frontend/src/components/EmailEditor.vue
@@ -19,7 +19,7 @@
     <template #top>
       <div class="flex flex-col gap-3">
         <div class="sm:mx-10 mx-4 flex items-center gap-2 border-t pt-2.5">
-          <span class="text-xs text-gray-500">{{ __('TO') }}:</span>
+          <span class="text-xs text-ink-gray-4">{{ __('TO') }}:</span>
           <MultiselectInput
             class="flex-1"
             v-model="toEmails"
@@ -34,7 +34,9 @@
               variant="ghost"
               @click="toggleCC()"
               :class="[
-                cc ? '!bg-gray-300 hover:bg-gray-200' : '!text-gray-500',
+                cc
+                  ? '!bg-surface-gray-4 hover:bg-surface-gray-3'
+                  : '!text-ink-gray-4',
               ]"
             />
             <Button
@@ -42,13 +44,15 @@
               variant="ghost"
               @click="toggleBCC()"
               :class="[
-                bcc ? '!bg-gray-300 hover:bg-gray-200' : '!text-gray-500',
+                bcc
+                  ? '!bg-surface-gray-4 hover:bg-surface-gray-3'
+                  : '!text-ink-gray-4',
               ]"
             />
           </div>
         </div>
         <div v-if="cc" class="sm:mx-10 mx-4 flex items-center gap-2">
-          <span class="text-xs text-gray-500">{{ __('CC') }}:</span>
+          <span class="text-xs text-ink-gray-4">{{ __('CC') }}:</span>
           <MultiselectInput
             ref="ccInput"
             class="flex-1"
@@ -60,7 +64,7 @@
           />
         </div>
         <div v-if="bcc" class="sm:mx-10 mx-4 flex items-center gap-2">
-          <span class="text-xs text-gray-500">{{ __('BCC') }}:</span>
+          <span class="text-xs text-ink-gray-4">{{ __('BCC') }}:</span>
           <MultiselectInput
             ref="bccInput"
             class="flex-1"
@@ -72,9 +76,9 @@
           />
         </div>
         <div class="sm:mx-10 mx-4 flex items-center gap-2 pb-2.5">
-          <span class="text-xs text-gray-500">{{ __('SUBJECT') }}:</span>
-          <TextInput
-            class="flex-1 border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
+          <span class="text-xs text-ink-gray-4">{{ __('SUBJECT') }}:</span>
+          <input
+            class="flex-1 border-none text-ink-gray-9 text-base bg-surface-white hover:bg-surface-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
             v-model="subject"
           />
         </div>
diff --git a/frontend/src/components/Fields.vue b/frontend/src/components/Fields.vue
index 2eba0a773..747b3b90d 100644
--- a/frontend/src/components/Fields.vue
+++ b/frontend/src/components/Fields.vue
@@ -3,7 +3,7 @@
     <div
       v-for="section in sections"
       :key="section.label"
-      class="section first:border-t-0 first:pt-0"
+      class="section first:border-t-0 border-outline-gray-modals first:pt-0"
       :class="section.hideBorder ? '' : 'border-t pt-4'"
     >
       <div
@@ -33,7 +33,7 @@
           >
             <div
               v-if="field.type != 'Check'"
-              class="mb-2 text-sm text-gray-600"
+              class="mb-2 text-sm text-ink-gray-5"
             >
               {{ __(field.label) }}
               <span
@@ -77,7 +77,7 @@
                 :disabled="Boolean(field.read_only)"
               />
               <label
-                class="text-sm text-gray-600"
+                class="text-sm text-ink-gray-5"
                 @click="data[field.name] = !data[field.name]"
               >
                 {{ __(field.label) }}
diff --git a/frontend/src/components/FilesUploader/FilesUploader.vue b/frontend/src/components/FilesUploader/FilesUploader.vue
index c5fa957ca..2daff30e9 100644
--- a/frontend/src/components/FilesUploader/FilesUploader.vue
+++ b/frontend/src/components/FilesUploader/FilesUploader.vue
@@ -169,7 +169,7 @@ function uploadViaWebLink() {
       title: __('Error'),
       title: __('Please enter a valid URL'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return
   }
diff --git a/frontend/src/components/FilesUploader/FilesUploaderArea.vue b/frontend/src/components/FilesUploader/FilesUploaderArea.vue
index 367b860eb..f7724f1d1 100644
--- a/frontend/src/components/FilesUploader/FilesUploaderArea.vue
+++ b/frontend/src/components/FilesUploader/FilesUploaderArea.vue
@@ -13,14 +13,14 @@
   </div>
   <div v-else>
     <div
-      class="flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed min-h-64 text-gray-600"
+      class="flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed min-h-64 text-ink-gray-5"
       @dragover.prevent="dragover"
       @dragleave.prevent="dragleave"
       @drop.prevent="dropfiles"
       v-show="files.length === 0"
     >
       <div v-if="!isDragging" class="flex flex-col gap-3">
-        <div class="text-center text-gray-600">
+        <div class="text-center text-ink-gray-5">
           {{ __('Drag and drop files here or upload from') }}
         </div>
         <div
@@ -75,8 +75,8 @@
             />
             <component v-else class="size-4" :is="fileIcon(file.type)" />
           </div>
-          <div class="flex flex-col gap-1 text-sm text-gray-600 truncate">
-            <div class="text-base text-gray-800 truncate">
+          <div class="flex flex-col gap-1 text-sm text-ink-gray-5 truncate">
+            <div class="text-base text-ink-gray-8 truncate">
               {{ file.name }}
             </div>
             <div class="mb-1">
@@ -85,7 +85,7 @@
             <FormControl
               v-model="file.private"
               type="checkbox"
-              class="[&>label]:text-sm [&>label]:text-gray-600"
+              class="[&>label]:text-sm [&>label]:text-ink-gray-5"
               :label="__('Private')"
             />
             <ErrorMessage
diff --git a/frontend/src/components/Filter.vue b/frontend/src/components/Filter.vue
index cc890ee79..ca0e3468b 100644
--- a/frontend/src/components/Filter.vue
+++ b/frontend/src/components/Filter.vue
@@ -9,7 +9,7 @@
           <template #prefix><FilterIcon class="h-4" /></template>
           <template v-if="filters?.size" #suffix>
             <div
-              class="flex h-5 w-5 items-center justify-center rounded bg-gray-900 pt-[1px] text-2xs font-medium text-white"
+              class="flex h-5 w-5 items-center justify-center rounded-[5px] bg-surface-white pt-px text-xs font-medium text-ink-gray-8 shadow-sm"
             >
               {{ filters.size }}
             </div>
@@ -27,7 +27,9 @@
       </div>
     </template>
     <template #body="{ close }">
-      <div class="my-2 rounded-lg border border-gray-100 bg-white shadow-xl">
+      <div
+        class="my-2 min-w-40 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+      >
         <div class="min-w-72 p-2 sm:min-w-[400px]">
           <div
             v-if="filters?.size"
@@ -38,7 +40,7 @@
           >
             <div v-if="isMobileView" class="flex flex-col gap-2">
               <div class="-mb-2 flex w-full items-center justify-between">
-                <div class="text-base text-gray-600">
+                <div class="text-base text-ink-gray-5">
                   {{ i == 0 ? __('Where') : __('And') }}
                 </div>
                 <Button
@@ -76,7 +78,7 @@
             </div>
             <div v-else class="flex items-center justify-between gap-2">
               <div class="flex items-center gap-2">
-                <div class="w-13 pl-2 text-end text-base text-gray-600">
+                <div class="w-13 pl-2 text-end text-base text-ink-gray-5">
                   {{ i == 0 ? __('Where') : __('And') }}
                 </div>
                 <div id="fieldname" class="!min-w-[140px]">
@@ -117,7 +119,7 @@
           </div>
           <div
             v-else
-            class="mb-3 flex h-7 items-center px-3 text-sm text-gray-600"
+            class="mb-3 flex h-7 items-center px-3 text-sm text-ink-gray-5"
           >
             {{ __('Empty - Choose a field to filter by') }}
           </div>
@@ -130,7 +132,7 @@
             >
               <template #target="{ togglePopover }">
                 <Button
-                  class="!text-gray-600"
+                  class="!text-ink-gray-5"
                   variant="ghost"
                   @click="togglePopover()"
                   :label="__('Add Filter')"
@@ -143,7 +145,7 @@
             </Autocomplete>
             <Button
               v-if="filters?.size"
-              class="!text-gray-600"
+              class="!text-ink-gray-5"
               variant="ghost"
               :label="__('Clear all Filter')"
               @click="clearfilter(close)"
diff --git a/frontend/src/components/IconPicker.vue b/frontend/src/components/IconPicker.vue
index 2abedd098..8322acaa9 100644
--- a/frontend/src/components/IconPicker.vue
+++ b/frontend/src/components/IconPicker.vue
@@ -8,10 +8,10 @@
     <template #body="{ togglePopover }">
       <div
         v-if="reaction"
-        class="flex items-center justify-center gap-2 rounded-full bg-white px-2 py-1 shadow-sm"
+        class="px-2 py-1 flex items-center justify-center gap-2 rounded-full bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
       >
         <div
-          class="size-5 cursor-pointer rounded-full bg-white text-xl"
+          class="size-5 cursor-pointer rounded-full bg-surface-transparent text-xl"
           v-for="r in reactionEmojis"
           :key="r"
           @click="() => (emoji = r) && togglePopover()"
@@ -26,9 +26,12 @@
           @click.stop="() => (reaction = false)"
         />
       </div>
-      <div v-else class="my-3 max-w-max transform bg-white px-4 sm:px-0">
+      <div
+        v-else
+        class="my-3 max-w-max transform bg-surface-white px-4 sm:px-0"
+      >
         <div
-          class="relative max-h-96 overflow-y-auto rounded-lg pb-3 shadow-2xl ring-1 ring-black ring-opacity-5"
+          class="relative max-h-96 pb-3 overflow-y-auto min-w-40 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
         >
           <div class="flex gap-2 px-3 pb-1 pt-3">
             <div class="flex-1">
@@ -43,12 +46,14 @@
           </div>
           <div class="w-96"></div>
           <div class="px-3" v-for="(emojis, group) in emojiGroups" :key="group">
-            <div class="sticky top-0 bg-white pb-2 pt-3 text-sm text-gray-700">
+            <div
+              class="sticky top-0 bg-surface-modal pb-2 pt-3 text-sm text-ink-gray-7"
+            >
               {{ group }}
             </div>
             <div class="grid w-96 grid-cols-12 place-items-center">
               <button
-                class="h-8 w-8 rounded-md p-1 text-2xl hover:bg-gray-100 focus:outline-none focus:ring focus:ring-blue-200"
+                class="h-8 w-8 rounded-md p-1 text-2xl hover:bg-surface-gray-2 focus:outline-none focus:ring focus:ring-blue-200"
                 v-for="_emoji in emojis"
                 :key="_emoji.description"
                 @click="() => (emoji = _emoji.emoji) && togglePopover()"
diff --git a/frontend/src/components/Icons/BillingIcon.vue b/frontend/src/components/Icons/BillingIcon.vue
new file mode 100644
index 000000000..77a999581
--- /dev/null
+++ b/frontend/src/components/Icons/BillingIcon.vue
@@ -0,0 +1,16 @@
+<template>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.00516 3.89776C2.05637 3.3935 2.48223 3 3 3H13C13.5523 3 14 3.44772 14 4V5.38867H2V4C2 3.96548 2.00175 3.93137 2.00516 3.89776ZM1 6.38867V5.38867V4C1 3.93096 1.0035 3.86275 1.01033 3.79551C1.11275 2.787 1.96447 2 3 2H13C14.1046 2 15 2.89543 15 4V5.38867V6.38867V12C15 13.1046 14.1046 14 13 14H3C1.89543 14 1 13.1046 1 12V6.38867ZM14 6.38867V12C14 12.5523 13.5523 13 13 13H3C2.44772 13 2 12.5523 2 12V6.38867H14Z"
+        fill="currentColor"
+      />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/Icons/FilterIcon.vue b/frontend/src/components/Icons/FilterIcon.vue
index 002168e06..1ee7895e0 100644
--- a/frontend/src/components/Icons/FilterIcon.vue
+++ b/frontend/src/components/Icons/FilterIcon.vue
@@ -1,31 +1,16 @@
 <template>
   <svg
     width="16"
-    height="17"
-    viewBox="0 0 16 17"
+    height="16"
+    viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M2 4.5H14"
-      stroke="currentColor"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M4 8.5H12"
-      stroke="currentColor"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M6.5 12.5H9.5"
-      stroke="currentColor"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2 4.16675C1.72386 4.16675 1.5 4.39061 1.5 4.66675C1.5 4.94289 1.72386 5.16675 2 5.16675H14C14.2761 5.16675 14.5 4.94289 14.5 4.66675C14.5 4.39061 14.2761 4.16675 14 4.16675H2ZM3.49996 7.99761C3.49996 7.72147 3.72382 7.49761 3.99996 7.49761H12C12.2761 7.49761 12.5 7.72147 12.5 7.99761C12.5 8.27375 12.2761 8.49761 12 8.49761H3.99996C3.72382 8.49761 3.49996 8.27375 3.49996 7.99761ZM5.9 11.3289C5.9 11.0527 6.12386 10.8289 6.4 10.8289H9.6C9.87614 10.8289 10.1 11.0527 10.1 11.3289C10.1 11.605 9.87614 11.8289 9.6 11.8289H6.4C6.12386 11.8289 5.9 11.605 5.9 11.3289Z"
+      fill="currentColor"
     />
   </svg>
-</template>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/Icons/PlansIcon.vue b/frontend/src/components/Icons/PlansIcon.vue
new file mode 100644
index 000000000..b1f5c3b20
--- /dev/null
+++ b/frontend/src/components/Icons/PlansIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.1787 14.1967C9.57127 14.3936 8.92306 14.5 8.25 14.5C4.79822 14.5 2 11.7018 2 8.25C2 5.85176 3.35077 3.76901 5.33301 2.72104V10.4262L4.25346 9.34664C4.05819 9.15138 3.74161 9.15138 3.54635 9.34664C3.35109 9.5419 3.35109 9.85849 3.54635 10.0537L5.47968 11.9871C5.67494 12.1823 5.99153 12.1823 6.18679 11.9871L8.12012 10.0537C8.31538 9.85849 8.31538 9.5419 8.12012 9.34664C7.92486 9.15138 7.60828 9.15138 7.41302 9.34664L6.33301 10.4267V2.41357C6.33301 2.37572 6.3288 2.33886 6.32083 2.30341C6.92842 2.10644 7.57678 2 8.25 2C11.7018 2 14.5 4.79822 14.5 8.25C14.5 10.6484 13.149 12.7313 11.1665 13.7792V6.07358L12.2465 7.15359C12.4418 7.34885 12.7584 7.34885 12.9536 7.15359C13.1489 6.95832 13.1489 6.64174 12.9536 6.44648L11.0203 4.51315C10.9512 4.44411 10.867 4.39948 10.7784 4.37926C10.7417 4.37089 10.7042 4.3667 10.6667 4.3667H10.6665C10.5239 4.3667 10.3952 4.42643 10.3041 4.52226L8.37985 6.44648C8.18458 6.64174 8.18458 6.95832 8.37985 7.15359C8.57511 7.34885 8.89169 7.34885 9.08695 7.15359L10.1665 6.07403V14.0863C10.1665 14.1242 10.1707 14.1612 10.1787 14.1967ZM8.25 15.5C12.2541 15.5 15.5 12.2541 15.5 8.25C15.5 4.24594 12.2541 1 8.25 1C4.24594 1 1 4.24594 1 8.25C1 12.2541 4.24594 15.5 8.25 15.5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/Icons/SortIcon.vue b/frontend/src/components/Icons/SortIcon.vue
index 3a3730ead..7b9a1da73 100644
--- a/frontend/src/components/Icons/SortIcon.vue
+++ b/frontend/src/components/Icons/SortIcon.vue
@@ -1,45 +1,16 @@
 <template>
   <svg
     width="16"
-    height="17"
-    viewBox="0 0 16 17"
+    height="16"
+    viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M1.75 3.75H10.75"
-      stroke="currentColor"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M1.75 7.75H7.75"
-      stroke="currentColor"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M1.75 11.75H5.75"
-      stroke="currentColor"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M14.25 8.25L12.25 6.25L10.25 8.25"
-      stroke="currentColor"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M12.25 12.25L12.25 6.25"
-      stroke="currentColor"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.5 3.5C5.5 3.22386 5.27614 3 5 3C4.72386 3 4.5 3.22386 4.5 3.5V11.2931L2.87846 9.67159C2.68319 9.47633 2.36661 9.47633 2.17135 9.67159C1.97609 9.86686 1.97609 10.1834 2.17135 10.3787L4.64622 12.8536C4.75097 12.9583 4.89063 13.0069 5.02774 12.9992C5.15903 12.9921 5.27684 12.9342 5.36195 12.845L7.8282 10.3787C8.02347 10.1834 8.02347 9.86686 7.8282 9.67159C7.63294 9.47633 7.31636 9.47633 7.1211 9.67159L5.5 11.2927V3.5ZM11.3698 3.16295C11.2784 3.06282 11.1468 3 11.0005 3C10.9947 3 10.989 3.0001 10.9832 3.00029C10.8608 3.00432 10.7396 3.05304 10.6462 3.14647L8.17135 5.62134C7.97609 5.8166 7.97609 6.13319 8.17135 6.32845C8.36661 6.52371 8.68319 6.52371 8.87846 6.32845L10.5005 4.70641V12.5C10.5005 12.7761 10.7243 13 11.0005 13C11.2766 13 11.5005 12.7761 11.5005 12.5V4.70784L13.1211 6.32845C13.3164 6.52371 13.6329 6.52371 13.8282 6.32845C14.0235 6.13319 14.0235 5.8166 13.8282 5.62134L11.3698 3.16295Z"
+      fill="currentColor"
     />
   </svg>
-</template>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/Icons/ToDoPriorityIcon.vue b/frontend/src/components/Icons/ToDoPriorityIcon.vue
index a05a4d0d9..20158c4eb 100644
--- a/frontend/src/components/Icons/ToDoPriorityIcon.vue
+++ b/frontend/src/components/Icons/ToDoPriorityIcon.vue
@@ -6,7 +6,7 @@
         ({
           'bg-red-500': priority === 'High',
           'bg-yellow-500': priority === 'Medium',
-          'bg-gray-300': priority === 'Low',
+          'bg-surface-gray-4': priority === 'Low',
         },
         $attrs.class)
       "
diff --git a/frontend/src/components/Icons/ToDoStatusIcon.vue b/frontend/src/components/Icons/ToDoStatusIcon.vue
index 09679240a..1e287da68 100644
--- a/frontend/src/components/Icons/ToDoStatusIcon.vue
+++ b/frontend/src/components/Icons/ToDoStatusIcon.vue
@@ -5,7 +5,7 @@
     height="16"
     viewBox="0 0 16 16"
     fill="none"
-    class="text-gray-700"
+    class="text-ink-gray-7"
     :aria-label="status"
   >
     <path
diff --git a/frontend/src/components/Icons/UnpinIcon.vue b/frontend/src/components/Icons/UnpinIcon.vue
index 31ac47214..b282f76ba 100644
--- a/frontend/src/components/Icons/UnpinIcon.vue
+++ b/frontend/src/components/Icons/UnpinIcon.vue
@@ -19,7 +19,7 @@
       rx="1"
       transform="rotate(-45 0.792893 0)"
       fill="currentColor"
-      stroke="white"
+      class="stroke stroke-ink-white"
     />
   </svg>
 </template>
diff --git a/frontend/src/components/Kanban/KanbanSettings.vue b/frontend/src/components/Kanban/KanbanSettings.vue
index 43d2c5f73..5fa204cae 100644
--- a/frontend/src/components/Kanban/KanbanSettings.vue
+++ b/frontend/src/components/Kanban/KanbanSettings.vue
@@ -11,7 +11,9 @@
   <Dialog v-model="showDialog" :options="{ title: __('Kanban Settings') }">
     <template #body-content>
       <div>
-        <div class="text-base text-gray-800 mb-2">{{ __('Column Field') }}</div>
+        <div class="text-base text-ink-gray-8 mb-2">
+          {{ __('Column Field') }}
+        </div>
         <Autocomplete
           v-if="columnFields"
           value=""
@@ -21,13 +23,12 @@
           <template #target="{ togglePopover }">
             <Button
               class="w-full !justify-start"
-              variant="subtle"
               @click="togglePopover()"
               :label="columnField.label"
             />
           </template>
         </Autocomplete>
-        <div class="text-base text-gray-800 mb-2 mt-4">
+        <div class="text-base text-ink-gray-8 mb-2 mt-4">
           {{ __('Title Field') }}
         </div>
         <Autocomplete
@@ -39,7 +40,6 @@
           <template #target="{ togglePopover }">
             <Button
               class="w-full !justify-start"
-              variant="subtle"
               @click="togglePopover()"
               :label="titleField.label"
             />
@@ -47,7 +47,9 @@
         </Autocomplete>
       </div>
       <div class="mt-4">
-        <div class="text-base text-gray-800 mb-2">{{ __('Fields Order') }}</div>
+        <div class="text-base text-ink-gray-8 mb-2">
+          {{ __('Fields Order') }}
+        </div>
         <Draggable
           :list="allFields"
           @end="reorder"
@@ -57,7 +59,7 @@
         >
           <template #item="{ element: field }">
             <div
-              class="px-1 py-0.5 border rounded text-base text-gray-800 flex items-center justify-between gap-2"
+              class="px-1 py-0.5 border border-outline-gray-modals rounded text-base text-ink-gray-8 flex items-center justify-between gap-2"
             >
               <div class="flex items-center gap-2">
                 <DragVerticalIcon class="h-3.5 cursor-grab" />
@@ -78,7 +80,6 @@
           <template #target="{ togglePopover }">
             <Button
               class="w-full mt-2"
-              variant="outline"
               @click="togglePopover()"
               :label="__('Add Field')"
             >
@@ -90,7 +91,7 @@
           <template #item-label="{ option }">
             <div class="flex flex-col gap-1">
               <div>{{ option.label }}</div>
-              <div class="text-gray-500 text-sm">
+              <div class="text-ink-gray-4 text-sm">
                 {{ `${option.fieldname} - ${option.fieldtype}` }}
               </div>
             </div>
diff --git a/frontend/src/components/Kanban/KanbanView.vue b/frontend/src/components/Kanban/KanbanView.vue
index 22cdb13b3..627d8892d 100644
--- a/frontend/src/components/Kanban/KanbanView.vue
+++ b/frontend/src/components/Kanban/KanbanView.vue
@@ -11,13 +11,13 @@
       <template #item="{ element: column }">
         <div
           v-if="!column.column.delete"
-          class="flex flex-col gap-2.5 min-w-72 w-72 hover:bg-gray-100 rounded-lg p-2.5"
+          class="flex flex-col gap-2.5 min-w-72 w-72 hover:bg-surface-gray-2 rounded-lg p-2.5"
         >
           <div class="flex gap-2 items-center group justify-between">
             <div class="flex items-center text-base">
               <NestedPopover>
                 <template #target>
-                  <Button variant="ghost" size="sm" class="hover:!bg-gray-100">
+                  <Button variant="ghost" size="sm" class="hover:!bg-surface-gray-2">
                     <IndicatorIcon
                       :class="colorClasses(column.column.color, true)"
                     />
@@ -25,7 +25,7 @@
                 </template>
                 <template #body="{ close }">
                   <div
-                    class="flex flex-col gap-3 px-3 py-2.5 rounded-lg border border-gray-100 bg-white shadow-xl"
+                    class="flex flex-col gap-3 px-3 py-2.5 min-w-40 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
                   >
                     <div class="flex gap-1">
                       <Button
@@ -48,7 +48,7 @@
                   </div>
                 </template>
               </NestedPopover>
-              <div>{{ column.column.name }}</div>
+              <div class="text-ink-gray-9">{{ column.column.name }}</div>
             </div>
             <div class="flex">
               <Dropdown :options="actions(column)">
@@ -80,7 +80,7 @@
               <template #item="{ element: fields }">
                 <component
                   :is="options.getRoute ? 'router-link' : 'div'"
-                  class="pt-3 px-3.5 pb-2.5 rounded-lg border bg-white text-base flex flex-col"
+                  class="pt-3 px-3.5 pb-2.5 rounded-lg border bg-surface-white text-base flex flex-col text-ink-gray-9"
                   :data-name="fields.name"
                   v-bind="{
                     to: options.getRoute ? options.getRoute(fields) : undefined,
@@ -97,7 +97,7 @@
                       <div v-if="fields[titleField]">
                         {{ fields[titleField] }}
                       </div>
-                      <div class="text-gray-500" v-else>
+                      <div class="text-ink-gray-4" v-else>
                         {{ __('No Title') }}
                       </div>
                     </div>
@@ -265,7 +265,7 @@ function updateColumn(d) {
 function colorClasses(color, onlyIcon = false) {
   let textColor = `!text-${color}-600`
   if (color == 'black') {
-    textColor = '!text-gray-900'
+    textColor = '!text-ink-gray-9'
   } else if (['gray', 'green'].includes(color)) {
     textColor = `!text-${color}-700`
   }
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 8f808f19a..c813fc898 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -24,7 +24,7 @@
             />
             <div
               v-else-if="unreadNotificationsCount"
-              class="absolute -left-1.5 top-1 z-20 h-[5px] w-[5px] translate-x-6 translate-y-1 rounded-full bg-gray-800 ring-1 ring-white"
+              class="absolute -left-1.5 top-1 z-20 h-[5px] w-[5px] translate-x-6 translate-y-1 rounded-full bg-surface-gray-6 ring-1 ring-white"
             />
           </template>
         </SidebarLink>
@@ -42,7 +42,7 @@
           <template #header="{ opened, hide, toggle }">
             <div
               v-if="!hide"
-              class="flex cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
+              class="flex cursor-pointer gap-1.5 px-1 text-base font-medium text-ink-gray-5 transition-all duration-300 ease-in-out"
               :class="
                 isSidebarCollapsed
                   ? 'ml-0 h-0 overflow-hidden opacity-0'
@@ -52,7 +52,7 @@
             >
               <FeatherIcon
                 name="chevron-right"
-                class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
+                class="h-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
                 :class="{ 'rotate-90': opened }"
               />
               <span>{{ __(view.name) }}</span>
@@ -81,7 +81,7 @@
         <template #icon>
           <span class="grid h-4.5 w-4.5 flex-shrink-0 place-items-center">
             <CollapseSidebar
-              class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
+              class="h-4.5 w-4.5 text-ink-gray-7 duration-300 ease-in-out"
               :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
             />
           </span>
diff --git a/frontend/src/components/Layouts/DesktopLayout.vue b/frontend/src/components/Layouts/DesktopLayout.vue
index c45bbc2bf..f244b6ff0 100644
--- a/frontend/src/components/Layouts/DesktopLayout.vue
+++ b/frontend/src/components/Layouts/DesktopLayout.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="flex h-screen w-screen">
-    <div class="h-full border-r bg-gray-50">
+    <div class="h-full border-r bg-surface-menu-bar">
       <AppSidebar />
     </div>
-    <div class="flex-1 flex flex-col h-full overflow-auto">
+    <div class="flex-1 flex flex-col h-full overflow-auto bg-surface-white">
       <AppHeader />
       <slot />
     </div>
diff --git a/frontend/src/components/Layouts/MobileLayout.vue b/frontend/src/components/Layouts/MobileLayout.vue
index 7214c8f3c..8d3d2dbf5 100644
--- a/frontend/src/components/Layouts/MobileLayout.vue
+++ b/frontend/src/components/Layouts/MobileLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-screen w-screen">
     <MobileSidebar />
-    <div class="flex h-full flex-1 flex-col overflow-auto">
+    <div class="flex h-full flex-1 flex-col overflow-auto bg-surface-white">
       <MobileAppHeader />
       <slot />
     </div>
diff --git a/frontend/src/components/ListBulkActions.vue b/frontend/src/components/ListBulkActions.vue
index 1667cf6b7..643f5d0fb 100644
--- a/frontend/src/components/ListBulkActions.vue
+++ b/frontend/src/components/ListBulkActions.vue
@@ -76,7 +76,7 @@ function convertToOpportunity(selections, unselectAll) {
               createToast({
                 title: __('Converted successfully'),
                 icon: 'check',
-                iconClasses: 'text-green-600',
+                iconClasses: 'text-ink-green-3',
               })
               list.value.reload()
               unselectAll()
@@ -109,7 +109,7 @@ function deleteValues(selections, unselectAll) {
             createToast({
               title: __('Deleted successfully'),
               icon: 'check',
-              iconClasses: 'text-green-600',
+              iconClasses: 'text-ink-green-3',
             })
             unselectAll()
             list.value.reload()
@@ -151,7 +151,7 @@ function clearAssignemnts(selections, unselectAll) {
             createToast({
               title: __('Assignment cleared successfully'),
               icon: 'check',
-              iconClasses: 'text-green-600',
+              iconClasses: 'text-ink-green-3',
             })
             reload(unselectAll)
             close()
diff --git a/frontend/src/components/ListViews/CallLogsListView.vue b/frontend/src/components/ListViews/CallLogsListView.vue
index afbd02cff..c93f686c6 100644
--- a/frontend/src/components/ListViews/CallLogsListView.vue
+++ b/frontend/src/components/ListViews/CallLogsListView.vue
@@ -78,7 +78,7 @@
               />
             </div>
             <div v-else-if="column.type === 'Check'">
-              <FormControl type="checkbox" :modelValue="item" :disabled="true" class="text-gray-900" />
+              <FormControl type="checkbox" :modelValue="item" :disabled="true" class="text-ink-gray-9" />
             </div>
             <div v-else-if="column.key === '_liked_by'">
               <Button
diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index bfa5e695b..ebb0ecba3 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -91,7 +91,7 @@
                 type="checkbox"
                 :modelValue="item"
                 :disabled="true"
-                class="text-gray-900"
+                class="text-ink-gray-9"
               />
             </div>
             <div v-else-if="column.key === '_liked_by'">
diff --git a/frontend/src/components/ListViews/CustomersListView.vue b/frontend/src/components/ListViews/CustomersListView.vue
index 01c1fbcf7..75b790519 100644
--- a/frontend/src/components/ListViews/CustomersListView.vue
+++ b/frontend/src/components/ListViews/CustomersListView.vue
@@ -60,7 +60,7 @@
               </Tooltip>
             </div>
             <div v-else-if="column.type === 'Check'">
-              <FormControl type="checkbox" :modelValue="item" :disabled="true" class="text-gray-900" />
+              <FormControl type="checkbox" :modelValue="item" :disabled="true" class="text-ink-gray-9" />
             </div>
             <div v-else-if="column.key === '_liked_by'">
               <Button
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index 23bca810e..228bd0a23 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -72,7 +72,7 @@
               />
             </div>
             <div v-else-if="column.type === 'Check'">
-              <FormControl type="checkbox" :modelValue="item" :disabled="true" class="text-gray-900" />
+              <FormControl type="checkbox" :modelValue="item" :disabled="true" class="text-ink-gray-9" />
             </div>
             <div v-else-if="column.key === '_liked_by'">
               <Button
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index bd02cabe2..eeddb7724 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -159,7 +159,7 @@
               type="checkbox"
               :modelValue="item"
               :disabled="true"
-              class="text-gray-900"
+              class="text-ink-gray-9"
             />
           </div>
           <div
diff --git a/frontend/src/components/ListViews/ListRows.vue b/frontend/src/components/ListViews/ListRows.vue
index 0d9195ee6..4c41799ea 100644
--- a/frontend/src/components/ListViews/ListRows.vue
+++ b/frontend/src/components/ListViews/ListRows.vue
@@ -2,11 +2,11 @@
   <div class="mx-3 mt-2 h-full overflow-y-auto sm:mx-5" v-if="showGroupedRows">
     <div v-for="group in reactivieRows" :key="group.group">
       <ListGroupHeader :group="group">
-        <div class="my-2 flex items-center gap-2 text-base font-medium text-gray-800">
+        <div class="my-2 flex items-center gap-2 text-base font-medium text-ink-gray-8">
           <div>{{ __(group.label) }} -</div>
           <div class="flex items-center gap-1">
             <component v-if="group.icon" :is="group.icon" />
-            <div v-if="group.group == ' '" class="text-gray-500">
+            <div v-if="group.group == ' '" class="text-ink-gray-4">
               {{ __('Empty') }}
             </div>
             <div v-else>{{ group.group }}</div>
diff --git a/frontend/src/components/ListViews/OpportunitiesListView.vue b/frontend/src/components/ListViews/OpportunitiesListView.vue
index 63ab046e2..dbe2d4dfc 100644
--- a/frontend/src/components/ListViews/OpportunitiesListView.vue
+++ b/frontend/src/components/ListViews/OpportunitiesListView.vue
@@ -122,7 +122,7 @@
             />
           </div>
           <div v-else-if="column.type === 'Check'">
-            <FormControl type="checkbox" :modelValue="item" :disabled="true" class="text-gray-900" />
+            <FormControl type="checkbox" :modelValue="item" :disabled="true" class="text-ink-gray-9" />
           </div>
           <div
             v-else
diff --git a/frontend/src/components/ListViews/ToDosListView.vue b/frontend/src/components/ListViews/ToDosListView.vue
index 179453c6f..71ad5989c 100644
--- a/frontend/src/components/ListViews/ToDosListView.vue
+++ b/frontend/src/components/ListViews/ToDosListView.vue
@@ -83,7 +83,7 @@
               class="truncate text-base h-4 [&>p]:truncate"
             />
             <div v-else-if="column.type === 'Check'">
-              <FormControl type="checkbox" :modelValue="item" :disabled="true" class="text-gray-900" />
+              <FormControl type="checkbox" :modelValue="item" :disabled="true" class="text-ink-gray-9" />
             </div>
             <div v-else-if="column.key === '_liked_by'">
               <Button
diff --git a/frontend/src/components/Mobile/MobileAppHeader.vue b/frontend/src/components/Mobile/MobileAppHeader.vue
index b13202d98..de564def9 100644
--- a/frontend/src/components/Mobile/MobileAppHeader.vue
+++ b/frontend/src/components/Mobile/MobileAppHeader.vue
@@ -6,7 +6,7 @@
         variant="ghosted"
         @click="sidebarOpened = !sidebarOpened"
       >
-        <MenuIcon class="h-4" />
+        <MenuIcon class="h-4 text-ink-gray-9" />
       </Button>
     </div>
     <div id="app-header" class="flex-1" />
diff --git a/frontend/src/components/Mobile/MobileSidebar.vue b/frontend/src/components/Mobile/MobileSidebar.vue
index 8b37483d1..afea39d12 100644
--- a/frontend/src/components/Mobile/MobileSidebar.vue
+++ b/frontend/src/components/Mobile/MobileSidebar.vue
@@ -41,12 +41,12 @@
                 <template #header="{ opened, hide, toggle }">
                   <div
                     v-if="!hide"
-                    class="ml-2 mt-4 flex h-7 w-auto cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 opacity-100 transition-all duration-300 ease-in-out"
+                    class="ml-2 mt-4 flex h-7 w-auto cursor-pointer gap-1.5 px-1 text-base font-medium text-ink-gray-5 opacity-100 transition-all duration-300 ease-in-out"
                     @click="toggle()"
                   >
                     <FeatherIcon
                       name="chevron-right"
-                      class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
+                      class="h-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
                       :class="{ 'rotate-90': opened }"
                     />
                     <span>{{ __(view.name) }}</span>
diff --git a/frontend/src/components/Modals/AddressModal.vue b/frontend/src/components/Modals/AddressModal.vue
index 8a253e5b0..14f305399 100644
--- a/frontend/src/components/Modals/AddressModal.vue
+++ b/frontend/src/components/Modals/AddressModal.vue
@@ -1,10 +1,10 @@
 <template>
   <Dialog v-model="show" :options="dialogOptions">
     <template #body>
-      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+      <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
         <div class="mb-5 flex items-center justify-between">
           <div>
-            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+            <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __(dialogOptions.title) || __('Untitled') }}
             </h3>
           </div>
diff --git a/frontend/src/components/Modals/AssignmentModal.vue b/frontend/src/components/Modals/AssignmentModal.vue
index e77507b9f..875391fa3 100644
--- a/frontend/src/components/Modals/AssignmentModal.vue
+++ b/frontend/src/components/Modals/AssignmentModal.vue
@@ -40,7 +40,7 @@
         </template>
         <template #item-label="{ option }">
           <Tooltip :text="option.value">
-            <div class="cursor-pointer">
+            <div class="cursor-pointer text-ink-gray-9">
               {{ getUser(option.value).full_name }}
             </div>
           </Tooltip>
@@ -55,7 +55,6 @@
           <Button
             :label="getUser(assignee.name).full_name"
             theme="gray"
-            variant="outline"
           >
             <template #prefix>
               <UserAvatar :user="assignee.name" size="sm" />
diff --git a/frontend/src/components/Modals/CallLogModal.vue b/frontend/src/components/Modals/CallLogModal.vue
index d2d34c014..048abe1a5 100644
--- a/frontend/src/components/Modals/CallLogModal.vue
+++ b/frontend/src/components/Modals/CallLogModal.vue
@@ -2,14 +2,14 @@
   <Dialog v-model="show">
     <template #body-title>
       <div class="flex items-center gap-3">
-        <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+        <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
           {{ __('Call Details') }}
         </h3>
       </div>
     </template>
     <template #body-content>
       <div class="flex flex-col gap-3.5">
-        <div v-for="field in detailFields" :key="field.name" class="flex gap-2 text-base text-gray-800">
+        <div v-for="field in detailFields" :key="field.name" class="flex gap-2 text-base text-ink-gray-8">
           <div class="grid size-7 place-content-center">
             <component :is="field.icon" />
           </div>
@@ -19,7 +19,7 @@
               <div class="ml-1 flex flex-col gap-1">
                 {{ field.value.caller.label }}
               </div>
-              <FeatherIcon name="arrow-right" class="mx-1 h-4 w-4 text-gray-600" />
+              <FeatherIcon name="arrow-right" class="mx-1 h-4 w-4 text-ink-gray-5" />
               <Avatar :image="field.value.receiver.image" :label="field.value.receiver.label" size="sm" />
               <div class="ml-1 flex flex-col gap-1">
                 {{ field.value.receiver.label }}
@@ -32,7 +32,7 @@
               <audio class="audio-control w-full" controls :src="field.value"></audio>
             </div>
             <div
-              class="w-full cursor-pointer rounded border px-2 pt-1.5 text-base text-gray-700"
+              class="w-full cursor-pointer rounded border px-2 pt-1.5 text-base text-ink-gray-7"
               v-else-if="field.name == 'note'"
               @click="() => (showNoteModal = true)"
             >
@@ -50,7 +50,7 @@
             </div>
             <div v-if="field.link">
               <ArrowUpRightIcon
-                class="h-4 w-4 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
+                class="h-4 w-4 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
                 @click="() => field.link()"
               />
             </div>
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index b84bc90b5..1f999fc1f 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -1,10 +1,10 @@
 <template>
   <Dialog v-model="show" :options="dialogOptions">
     <template #body>
-      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+      <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
         <div class="mb-5 flex items-center justify-between">
           <div>
-            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+            <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __(dialogOptions.title) || __('Untitled') }}
             </h3>
           </div>
@@ -27,7 +27,7 @@
             <div
               v-for="field in detailFields"
               :key="field.name"
-              class="flex h-7 items-center gap-2 text-base text-gray-800"
+              class="flex h-7 items-center gap-2 text-base text-ink-gray-8"
             >
               <div class="grid w-7 place-content-center">
                 <component :is="field.icon" />
@@ -41,13 +41,13 @@
                     <Button
                       variant="ghost"
                       :label="contact.data[field.name]"
-                      class="dropdown-button w-full justify-between truncate hover:bg-white"
+                      class="dropdown-button w-full justify-between truncate hover:bg-surface-white"
                     >
                       <div class="truncate">{{ contact.data[field.name] }}</div>
                       <template #suffix>
                         <FeatherIcon
                           :name="open ? 'chevron-up' : 'chevron-down'"
-                          class="h-4 text-gray-600"
+                          class="h-4 text-ink-gray-5"
                         />
                       </template>
                     </Button>
diff --git a/frontend/src/components/Modals/CustomerModal.vue b/frontend/src/components/Modals/CustomerModal.vue
index c05f2f361..8c7e36cc6 100644
--- a/frontend/src/components/Modals/CustomerModal.vue
+++ b/frontend/src/components/Modals/CustomerModal.vue
@@ -1,10 +1,10 @@
 <template>
   <Dialog v-model="show" :options="dialogOptions">
     <template #body>
-      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+      <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
         <div class="mb-5 flex items-center justify-between">
           <div>
-            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+            <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __(dialogOptions.title) || __('Untitled') }}
             </h3>
           </div>
@@ -24,7 +24,7 @@
         </div>
         <div>
           <div v-if="detailMode" class="flex flex-col gap-3.5">
-            <div class="flex h-7 items-center gap-2 text-base text-gray-800" v-for="field in fields" :key="field.name">
+            <div class="flex h-7 items-center gap-2 text-base text-ink-gray-8" v-for="field in fields" :key="field.name">
               <div class="grid w-7 place-content-center">
                 <component :is="field.icon" />
               </div>
diff --git a/frontend/src/components/Modals/EditValueModal.vue b/frontend/src/components/Modals/EditValueModal.vue
index 2be61cbc6..21c46c3bb 100644
--- a/frontend/src/components/Modals/EditValueModal.vue
+++ b/frontend/src/components/Modals/EditValueModal.vue
@@ -2,7 +2,7 @@
   <Dialog v-model="show" :options="{ title: __('Bulk Edit') }">
     <template #body-content>
       <div class="mb-4">
-        <div class="mb-1.5 text-sm text-gray-600">{{ __('Field') }}</div>
+        <div class="mb-1.5 text-sm text-ink-gray-5">{{ __('Field') }}</div>
         <Autocomplete
           :value="field.label"
           :options="fields.data"
@@ -11,7 +11,7 @@
         />
       </div>
       <div>
-        <div class="mb-1.5 text-sm text-gray-600">{{ __('Value') }}</div>
+        <div class="mb-1.5 text-sm text-ink-gray-5">{{ __('Value') }}</div>
         <component
           :is="getValueComponent(field)"
           :value="newValue"
@@ -158,7 +158,7 @@ function getValueComponent(f) {
     return h(TextEditor, {
       variant: 'outline',
       editorClass:
-        '!prose-sm overflow-auto min-h-[80px] max-h-80 py-1.5 px-2 rounded border border-gray-300 bg-white hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors',
+        '!prose-sm overflow-auto min-h-[80px] max-h-80 py-1.5 px-2 rounded border border-gray-300 bg-surface-white hover:border-gray-400 hover:shadow-sm focus:bg-surface-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-ink-gray-8 transition-colors',
       bubbleMenu: true,
       content: newValue.value,
     })
diff --git a/frontend/src/components/Modals/EmailTemplateModal.vue b/frontend/src/components/Modals/EmailTemplateModal.vue
index 55fdbde93..b0521d4eb 100644
--- a/frontend/src/components/Modals/EmailTemplateModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateModal.vue
@@ -17,60 +17,49 @@
       <div class="flex flex-col gap-4">
         <div class="flex sm:flex-row flex-col gap-4">
           <div class="flex-1">
-            <div class="mb-1.5 text-sm text-gray-600">
-              {{ __('Name') }}
-              <span class="text-red-500">*</span>
-            </div>
-            <TextInput
+            <FormControl
               ref="nameRef"
-              variant="outline"
               v-model="_emailTemplate.name"
               :placeholder="__('Payment Reminder')"
+              :label="__('Name')"
+              :required="true"
             />
           </div>
           <div class="flex-1">
-            <div class="mb-1.5 text-sm text-gray-600">{{ __('Doctype') }}</div>
-            <Select
-              variant="outline"
+            <FormControl
+              type="select"
               v-model="_emailTemplate.reference_doctype"
+              :label="__('Doctype')"
               :options="['Opportunity', 'Lead']"
               :placeholder="__('Opportunity')"
             />
           </div>
         </div>
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">
-            {{ __('Subject') }}
-            <span class="text-red-500">*</span>
-          </div>
-          <TextInput
+          <FormControl
             ref="subjectRef"
-            variant="outline"
             v-model="_emailTemplate.subject"
+            :label="__('Subject')"
             :placeholder="__('Payment Reminder from Frappé - (#{{ name }})')"
+            :required="true"
           />
         </div>
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">
-            {{ __('Content Type') }}
-          </div>
-          <Select
-            variant="outline"
+          <FormControl
+            type="select"
             v-model="_emailTemplate.content_type"
+            :label="__('Content Type')"
             default="Rich Text"
             :options="['Rich Text', 'HTML']"
             :placeholder="__('Rich Text')"
           />
         </div>
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">
-            {{ __('Content') }}
-            <span class="text-red-500">*</span>
-          </div>
           <FormControl
             v-if="_emailTemplate.content_type === 'HTML'"
             type="textarea"
-            variant="outline"
+            :label="__('Content')"
+            :required="true"
             ref="content"
             :rows="10"
             v-model="_emailTemplate.response_html"
@@ -80,20 +69,24 @@
               )
             "
           />
-          <TextEditor
-            v-else
-            variant="outline"
-            ref="content"
-            editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-gray-300 bg-white hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors"
-            :bubbleMenu="true"
-            :content="_emailTemplate.response"
-            @change="(val) => (_emailTemplate.response = val)"
-            :placeholder="
-              __(
-                'Dear {{ lead_name }}, \n\nThis is a reminder for the payment of {{ grand_total }}. \n\nThanks, \nFrappé',
-              )
-            "
-          />
+          <div v-else>
+            <div class="mb-1.5 text-xs text-ink-gray-5">
+              {{ __('Content') }}
+              <span class="text-ink-red-3">*</span>
+            </div>
+            <TextEditor
+              ref="content"
+              editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors"
+              :bubbleMenu="true"
+              :content="_emailTemplate.response"
+              @change="(val) => (_emailTemplate.response = val)"
+              :placeholder="
+                __(
+                  'Dear {{ lead_name }}, \n\nThis is a reminder for the payment of {{ grand_total }}. \n\nThanks, \nFrappé',
+                )
+              "
+            />
+          </div>
         </div>
         <div>
           <Checkbox v-model="_emailTemplate.enabled" :label="__('Enabled')" />
@@ -106,7 +99,7 @@
 
 <script setup>
 import { capture } from '@/telemetry'
-import { Checkbox, Select, TextEditor, call } from 'frappe-ui'
+import { Checkbox, TextEditor, call } from 'frappe-ui'
 import { ref, nextTick, watch } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/Modals/EmailTemplateSelectorModal.vue b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
index fb4148804..a4fd820b6 100644
--- a/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
@@ -11,7 +11,7 @@
         :placeholder="__('Payment Reminder')"
       >
         <template #prefix>
-          <FeatherIcon name="search" class="h-4 w-4 text-gray-500" />
+          <FeatherIcon name="search" class="h-4 w-4 text-ink-gray-4" />
         </template>
       </TextInput>
       <div
@@ -21,34 +21,34 @@
         <div
           v-for="template in filteredTemplates"
           :key="template.name"
-          class="flex h-56 cursor-pointer flex-col gap-2 rounded-lg border p-3 hover:bg-gray-100"
+          class="flex h-56 cursor-pointer flex-col gap-2 rounded-lg border p-3 hover:bg-surface-gray-2"
           @click="emit('apply', template)"
         >
           <div class="border-b pb-2 text-base font-semibold">
             {{ template.name }}
           </div>
-          <div v-if="template.subject" class="text-sm text-gray-600">
+          <div v-if="template.subject" class="text-sm text-ink-gray-5">
             {{ __('Subject: {0}', [template.subject]) }}
           </div>
           <TextEditor
             v-if="template.use_html && template.response_html"
             :content="template.response_html"
             :editable="false"
-            editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+            editor-class="!prose-sm max-w-none !text-sm text-ink-gray-5 focus:outline-none"
             class="flex-1 overflow-hidden"
           />
           <TextEditor
             v-else-if="template.response"
             :content="template.response"
             :editable="false"
-            editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+            editor-class="!prose-sm max-w-none !text-sm text-ink-gray-5 focus:outline-none"
             class="flex-1 overflow-hidden"
           />
         </div>
       </div>
       <div v-else class="mt-2">
         <div class="flex h-56 flex-col items-center justify-center">
-          <div class="text-lg text-gray-500">
+          <div class="text-lg text-ink-gray-4">
             {{ __('No templates found') }}
           </div>
           <Button
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index 0c9cab973..f2dbf6a1a 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -1,10 +1,10 @@
 <template>
   <Dialog v-model="show" :options="{ size: '3xl' }">
     <template #body>
-      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+      <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
         <div class="mb-5 flex items-center justify-between">
           <div>
-            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+            <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __('Create Lead') }}
             </h3>
           </div>
diff --git a/frontend/src/components/Modals/NoteModal.vue b/frontend/src/components/Modals/NoteModal.vue
index 014921cd5..e370704e7 100644
--- a/frontend/src/components/Modals/NoteModal.vue
+++ b/frontend/src/components/Modals/NoteModal.vue
@@ -14,12 +14,11 @@
   >
     <template #body-title>
       <div class="flex items-center gap-3">
-        <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+        <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
           {{ editMode ? __('Edit Note') : __('Create Note') }}
         </h3>
         <Button
           v-if="_note?.reference_docname"
-          variant="outline"
           size="sm"
           :label="_note.reference_doctype == 'Opportunity' ? __('Open Opportunity') : __('Open Lead')"
           @click="redirect()"
@@ -33,15 +32,19 @@
     <template #body-content>
       <div class="flex flex-col gap-4">
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">{{ __('Title') }}</div>
-          <TextInput ref="title" variant="outline" v-model="_note.title" :placeholder="__('Call with John Doe')" />
+          <FormControl
+            ref="title"
+            :label="__('Title')"
+            v-model="_note.title"
+            :placeholder="__('Call with John Doe')"
+          />
         </div>
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">{{ __('Content') }}</div>
+          <div class="mb-1.5 text-xs text-ink-gray-5">{{ __('Content') }}</div>
           <TextEditor
             variant="outline"
             ref="content"
-            editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-gray-300 bg-white hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors"
+            editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors"
             :bubbleMenu="true"
             :content="_note.content"
             @change="(val) => (_note.content = val)"
diff --git a/frontend/src/components/Modals/OpportunityModal.vue b/frontend/src/components/Modals/OpportunityModal.vue
index df70dea47..57a9a8c98 100644
--- a/frontend/src/components/Modals/OpportunityModal.vue
+++ b/frontend/src/components/Modals/OpportunityModal.vue
@@ -1,10 +1,10 @@
 <template>
   <Dialog v-model="show" :options="{ size: '3xl' }">
     <template #body>
-      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+      <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
         <div class="mb-5 flex items-center justify-between">
           <div>
-            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+            <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __('Create Opportunity') }}
             </h3>
           </div>
@@ -19,11 +19,11 @@
         </div>
         <div>
           <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
-            <div class="flex items-center gap-3 text-sm text-gray-600">
+            <div class="flex items-center gap-3 text-sm text-ink-gray-5">
               <div>{{ __('Choose Existing Customer') }}</div>
               <Switch v-model="chooseExistingCustomer" />
             </div>
-            <div class="flex items-center gap-3 text-sm text-gray-600">
+            <div class="flex items-center gap-3 text-sm text-ink-gray-5">
               <div>{{ __('Choose Existing Contact') }}</div>
               <Switch v-model="chooseExistingContact" />
             </div>
diff --git a/frontend/src/components/Modals/QuickEntryModal.vue b/frontend/src/components/Modals/QuickEntryModal.vue
index 08cc778eb..c90ff2aac 100644
--- a/frontend/src/components/Modals/QuickEntryModal.vue
+++ b/frontend/src/components/Modals/QuickEntryModal.vue
@@ -1,7 +1,7 @@
 <template>
   <Dialog v-model="show" :options="{ size: '3xl' }">
     <template #body-title>
-      <h3 class="flex items-center gap-2 text-2xl font-semibold leading-6 text-gray-900">
+      <h3 class="flex items-center gap-2 text-2xl font-semibold leading-6 text-ink-gray-9">
         <div>{{ __('Edit Quick Entry Layout') }}</div>
         <Badge v-if="dirty" :label="__('Not Saved')" variant="subtle" theme="orange" />
       </h3>
diff --git a/frontend/src/components/Modals/ToDoModal.vue b/frontend/src/components/Modals/ToDoModal.vue
index c2dd1728b..277fb85b0 100644
--- a/frontend/src/components/Modals/ToDoModal.vue
+++ b/frontend/src/components/Modals/ToDoModal.vue
@@ -14,12 +14,11 @@
   >
     <template #body-title>
       <div class="flex items-center gap-3">
-        <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+        <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
           {{ editMode ? __('Edit ToDo') : __('Create ToDo') }}
         </h3>
         <Button
           v-if="todo?.reference_name"
-          variant="outline"
           size="sm"
           :label="
             todo.reference_type == 'Opportunity'
@@ -37,22 +36,21 @@
     <template #body-content>
       <div class="flex flex-col gap-4">
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">{{ __('Title') }}</div>
-          <TextInput
-            ref="custom_title"
-            variant="outline"
-            v-model="_todo.custom_title"
+          <FormControl
+            ref="title"
+            :label="__('Title')"
+            v-model="_task.title"
             :placeholder="__('Call with John Doe')"
           />
         </div>
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">
+          <div class="mb-1.5 text-xs text-ink-gray-5">
             {{ __('Description') }}
           </div>
           <TextEditor
             variant="outline"
             ref="description"
-            editor-class="!prose-sm overflow-auto min-h-[80px] max-h-80 py-1.5 px-2 rounded border border-gray-300 bg-white hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors"
+            editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors"
             :bubbleMenu="true"
             :content="_todo.description"
             @change="(val) => (_todo.description = val)"
diff --git a/frontend/src/components/Modals/ViewModal.vue b/frontend/src/components/Modals/ViewModal.vue
index c2d525abc..5d858f9f8 100644
--- a/frontend/src/components/Modals/ViewModal.vue
+++ b/frontend/src/components/Modals/ViewModal.vue
@@ -13,22 +13,20 @@
     }"
   >
     <template #body-content>
-      <div class="mb-1.5 block text-base text-gray-600">
+      <div class="mb-1.5 block text-base text-ink-gray-5">
         {{ __('View Name') }}
       </div>
       <div class="flex gap-2">
         <IconPicker v-model="view.icon" v-slot="{ togglePopover }">
           <Button
-            variant="outline"
             size="md"
             class="flex size-8 text-2xl leading-none"
             :label="view.icon"
             @click="togglePopover"
           />
         </IconPicker>
-        <TextInput
+        <FormControl
           class="flex-1"
-          variant="outline"
           size="md"
           type="text"
           :placeholder="__('My Open Opportunities')"
@@ -41,7 +39,7 @@
 
 <script setup>
 import IconPicker from '@/components/IconPicker.vue'
-import { call, TextInput } from 'frappe-ui'
+import { call } from 'frappe-ui'
 import { ref, watch, nextTick } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/Modals/WhatsappTemplateSelectorModal.vue b/frontend/src/components/Modals/WhatsappTemplateSelectorModal.vue
index f292d895b..b8e39d1f9 100644
--- a/frontend/src/components/Modals/WhatsappTemplateSelectorModal.vue
+++ b/frontend/src/components/Modals/WhatsappTemplateSelectorModal.vue
@@ -11,7 +11,7 @@
         :placeholder="__('Welcome Message')"
       >
         <template #prefix>
-          <FeatherIcon name="search" class="h-4 w-4 text-gray-500" />
+          <FeatherIcon name="search" class="h-4 w-4 text-ink-gray-4" />
         </template>
       </TextInput>
       <div
@@ -21,7 +21,7 @@
         <div
           v-for="template in filteredTemplates"
           :key="template.name"
-          class="flex h-56 cursor-pointer flex-col gap-2 rounded-lg border p-3 hover:bg-gray-100"
+          class="flex h-56 cursor-pointer flex-col gap-2 rounded-lg border p-3 hover:bg-surface-gray-2"
           @click="emit('send', template.name)"
         >
           <div class="border-b pb-2 text-base font-semibold">
@@ -31,14 +31,14 @@
             v-if="template.template"
             :content="template.template"
             :editable="false"
-            editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+            editor-class="!prose-sm max-w-none !text-sm text-ink-gray-5 focus:outline-none"
             class="flex-1 overflow-hidden"
           />
         </div>
       </div>
       <div v-else class="mt-2">
         <div class="flex h-56 flex-col items-center justify-center">
-          <div class="text-lg text-gray-500">
+          <div class="text-lg text-ink-gray-4">
             {{ __('No templates found') }}
           </div>
           <Button
diff --git a/frontend/src/components/MultipleAvatar.vue b/frontend/src/components/MultipleAvatar.vue
index d25670e3b..892e33145 100644
--- a/frontend/src/components/MultipleAvatar.vue
+++ b/frontend/src/components/MultipleAvatar.vue
@@ -3,7 +3,7 @@
     v-if="avatars?.length"
     class="mr-1.5 flex cursor-pointer items-center"
     :class="[
-      avatars?.length > 1 ? 'flex-row-reverse' : 'truncate [&>div]:truncate',
+      avatars?.length > 1 ? 'flex-row-reverse' : 'truncate [>div]:truncate',
     ]"
   >
     <Tooltip v-if="avatars?.length == 1" :text="avatars[0].name">
@@ -24,7 +24,7 @@
       :key="avatar.name"
     >
       <Avatar
-        class="user-avatar -mr-1.5 transform ring-2 ring-white transition hover:z-10 hover:scale-110"
+        class="user-avatar -mr-1.5 transform ring-2 ring-outline-white transition hover:z-10 hover:scale-110"
         shape="circle"
         :image="avatar.image"
         :label="avatar.label"
diff --git a/frontend/src/components/Notifications.vue b/frontend/src/components/Notifications.vue
index b9b31c561..1e9c222a9 100644
--- a/frontend/src/components/Notifications.vue
+++ b/frontend/src/components/Notifications.vue
@@ -2,7 +2,7 @@
   <div
     v-if="visible"
     ref="target"
-    class="absolute z-20 h-screen bg-white transition-all duration-300 ease-in-out"
+    class="absolute z-20 h-screen bg-surface-white transition-all duration-300 ease-in-out"
     :style="{
       'box-shadow': '8px 0px 8px rgba(0, 0, 0, 0.1)',
       'max-width': '350px',
@@ -10,9 +10,9 @@
       left: 'calc(100% + 1px)',
     }"
   >
-    <div class="flex h-screen flex-col">
+    <div class="flex h-screen flex-col text-ink-gray-9">
       <div
-        class="z-20 flex items-center justify-between border-b bg-white px-5 py-2.5"
+        class="z-20 flex items-center justify-between border-b bg-surface-white px-5 py-2.5"
       >
         <div class="text-base font-medium">{{ __('Notifications') }}</div>
         <div class="flex gap-1">
@@ -38,37 +38,37 @@
       </div>
       <div
         v-if="notifications.data?.length"
-        class="divide-y overflow-auto text-base"
+        class="divide-y divide-outline-gray-modals overflow-auto text-base"
       >
         <RouterLink
           v-for="n in notifications.data"
           :key="n.comment"
           :to="getRoute(n)"
-          class="flex cursor-pointer items-start gap-2.5 px-4 py-2.5 hover:bg-gray-100"
+          class="flex cursor-pointer items-start gap-2.5 px-4 py-2.5 hover:bg-surface-gray-2"
           @click="markAsRead(n.comment || n.notification_type_doc)"
         >
           <div class="mt-1 flex items-center gap-2.5">
             <div
               class="size-[5px] rounded-full"
-              :class="[n.read ? 'bg-transparent' : 'bg-gray-900']"
+              :class="[n.read ? 'bg-transparent' : 'bg-surface-gray-7']"
             />
             <WhatsAppIcon v-if="n.type == 'WhatsApp'" class="size-7" />
             <UserAvatar v-else :user="n.from_user.name" size="lg" />
           </div>
           <div>
             <div v-if="n.notification_text" v-html="n.notification_text" />
-            <div v-else class="mb-2 space-x-1 leading-5 text-gray-600">
-              <span class="font-medium text-gray-900">
+            <div v-else class="mb-2 space-x-1 leading-5 text-ink-gray-5">
+              <span class="font-medium text-ink-gray-9">
                 {{ n.from_user.full_name }}
               </span>
               <span>
                 {{ __('mentioned you in {0}', [n.reference_doctype]) }}
               </span>
-              <span class="font-medium text-gray-900">
+              <span class="font-medium text-ink-gray-9">
                 {{ n.reference_name }}
               </span>
             </div>
-            <div class="text-sm text-gray-600">
+            <div class="text-sm text-ink-gray-5">
               {{ __(timeAgo(n.creation)) }}
             </div>
           </div>
@@ -78,8 +78,8 @@
         v-else
         class="flex flex-1 flex-col items-center justify-center gap-2"
       >
-        <NotificationsIcon class="h-20 w-20 text-gray-300" />
-        <div class="text-lg font-medium text-gray-500">
+        <NotificationsIcon class="h-20 w-20 text-ink-gray-2" />
+        <div class="text-lg font-medium text-ink-gray-4">
           {{ __('No new notifications') }}
         </div>
       </div>
diff --git a/frontend/src/components/QuickEntryLayoutBuilder.vue b/frontend/src/components/QuickEntryLayoutBuilder.vue
index 617ce7fea..8b3208818 100644
--- a/frontend/src/components/QuickEntryLayoutBuilder.vue
+++ b/frontend/src/components/QuickEntryLayoutBuilder.vue
@@ -2,14 +2,14 @@
   <div>
     <Draggable :list="sections" item-key="label" class="flex flex-col gap-5.5">
       <template #item="{ element: section }">
-        <div class="flex flex-col gap-1.5 p-2.5 bg-gray-50 rounded">
+        <div class="flex flex-col gap-1.5 p-2.5 bg-surface-gray-2 rounded">
           <div class="flex items-center justify-between">
             <div
-              class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-medium leading-4"
+              class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-medium leading-4 text-ink-gray-9"
             >
               <div
                 v-if="!section.editingLabel"
-                :class="section.hideLabel ? 'text-gray-400' : ''"
+                :class="{ 'text-ink-gray-3': section.hideLabel }"
               >
                 {{ __(section.label) || __('Untitled') }}
               </div>
@@ -48,7 +48,7 @@
           >
             <template #item="{ element: field }">
               <div
-                class="px-2.5 py-2 border rounded text-base bg-white text-gray-800 flex items-center leading-4 justify-between gap-2"
+                class="px-2.5 py-2 border border-outline-gray-2 rounded text-base bg-surface-modal text-ink-gray-8 flex items-center leading-4 justify-between gap-2"
               >
                 <div class="flex items-center gap-2">
                   <DragVerticalIcon class="h-3.5 cursor-grab" />
@@ -74,7 +74,7 @@
             <template #target="{ togglePopover }">
               <div class="gap-2 w-full">
                 <Button
-                  class="w-full !h-8 !border-gray-200 hover:!border-gray-300"
+                  class="w-full !h-8 !bg-surface-modal"
                   variant="outline"
                   @click="togglePopover()"
                   :label="__('Add Field')"
@@ -86,9 +86,9 @@
               </div>
             </template>
             <template #item-label="{ option }">
-              <div class="flex flex-col gap-1">
+              <div class="flex flex-col gap-1 text-ink-gray-9">
                 <div>{{ option.label }}</div>
-                <div class="text-gray-500 text-sm">
+                <div class="text-ink-gray-4 text-sm">
                   {{ `${option.fieldname} - ${option.fieldtype}` }}
                 </div>
               </div>
diff --git a/frontend/src/components/QuickFilterField.vue b/frontend/src/components/QuickFilterField.vue
index ac65a2f06..b2135e72d 100644
--- a/frontend/src/components/QuickFilterField.vue
+++ b/frontend/src/components/QuickFilterField.vue
@@ -31,7 +31,7 @@
     @change="(v) => updateFilter(filter, v)"
     :placeholder="filter.label"
   />
-  <TextInput
+  <FormControl
     v-else
     v-model="filter.value"
     type="text"
@@ -41,7 +41,7 @@
 </template>
 <script setup>
 import Link from '@/components/Controls/Link.vue'
-import { TextInput, FormControl, DatePicker, DateTimePicker } from 'frappe-ui'
+import { FormControl, DatePicker, DateTimePicker } from 'frappe-ui'
 import { useDebounceFn } from '@vueuse/core'
 
 const props = defineProps({
diff --git a/frontend/src/components/Resizer.vue b/frontend/src/components/Resizer.vue
index 8365cdebf..2e4e3b482 100644
--- a/frontend/src/components/Resizer.vue
+++ b/frontend/src/components/Resizer.vue
@@ -2,7 +2,7 @@
   <div class="relative" :style="{ width: `${sidebarWidth}px` }">
     <slot v-bind="{ sidebarResizing, sidebarWidth }" />
     <div
-      class="absolute z-10 h-full w-1 cursor-col-resize bg-gray-300 opacity-0 transition-opacity hover:opacity-100"
+      class="absolute z-10 h-full w-1 cursor-col-resize bg-surface-gray-4 opacity-0 transition-opacity hover:opacity-100"
       :class="{
         'opacity-100': sidebarResizing,
         'left-0': side == 'right',
diff --git a/frontend/src/components/SLASection.vue b/frontend/src/components/SLASection.vue
index 4c728b8a7..081066ec9 100644
--- a/frontend/src/components/SLASection.vue
+++ b/frontend/src/components/SLASection.vue
@@ -5,7 +5,7 @@
       :key="s.label"
       class="flex items-center gap-2 text-base leading-5"
     >
-      <div class="sm:w-[106px] w-36 text-sm text-gray-600">
+      <div class="sm:w-[106px] w-36 text-sm text-ink-gray-5">
         {{ __(s.label) }}
       </div>
       <div class="grid min-h-[28px] items-center">
@@ -112,6 +112,6 @@ let slaSection = computed(() => {
 <style scoped>
 :deep(.form-control button) {
   border-color: transparent;
-  background: white;
+  background: transparent;
 }
 </style>
diff --git a/frontend/src/components/Section.vue b/frontend/src/components/Section.vue
index c2b8da0dc..2062e184f 100644
--- a/frontend/src/components/Section.vue
+++ b/frontend/src/components/Section.vue
@@ -1,13 +1,13 @@
 <template>
   <slot name="header" v-bind="{ opened, hide, open, close, toggle }">
-    <div v-if="!hide" class="flex items-center justify-between">
+    <div v-if="!hide" class="column-header h-8 flex items-center justify-between">
       <div
-        class="flex h-7 max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5"
+        class="flex h-7 text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5"
         @click="toggle()"
       >
         <FeatherIcon
           name="chevron-right"
-          class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
+          class="h-4 transition-all duration-300 ease-in-out"
           :class="{ 'rotate-90': opened }"
         />
         {{ __(label) || __('Untitled') }}
diff --git a/frontend/src/components/SectionFields.vue b/frontend/src/components/SectionFields.vue
index 501ea1ffa..34278a27d 100644
--- a/frontend/src/components/SectionFields.vue
+++ b/frontend/src/components/SectionFields.vue
@@ -7,7 +7,7 @@
       class="section-field flex items-center gap-2 px-3 leading-5 first:mt-3"
     >
       <Tooltip :text="__(field.label)" :hoverDelay="1">
-        <div class="w-[35%] min-w-20 shrink-0 truncate text-sm text-gray-600">
+        <div class="w-[35%] min-w-20 shrink-0 truncate text-sm text-ink-gray-5">
           <span>{{ __(field.label) }}</span>
           <span class="text-red-500">{{ field.reqd ? ' *' : '' }}</span>
         </div>
@@ -16,7 +16,7 @@
         <div class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base">
           <div
             v-if="field.read_only && !['checkbox', 'dropdown'].includes(field.type)"
-            class="flex h-7 cursor-pointer items-center px-2 py-1 text-gray-600"
+            class="flex h-7 cursor-pointer items-center px-2 py-1 text-ink-gray-5"
           >
             <Tooltip :text="__(field.tooltip)">
               <div>{{ data[field.name] }}</div>
@@ -27,21 +27,21 @@
               <template #target="{ open }">
                 <Button
                   :label="data[field.name]"
-                  class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
+                  class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-surface-gray-2 px-2 py-1.5 text-base text-ink-gray-8 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-surface-gray-3 focus:border-gray-500 focus:bg-surface-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
                 >
                   <div v-if="data[field.name]" class="truncate">
                     {{ data[field.name] }}
                   </div>
-                  <div v-else class="text-base leading-5 text-gray-500 truncate">
+                  <div v-else class="text-base leading-5 text-ink-gray-4 truncate">
                     {{ field.placeholder }}
                   </div>
                   <template #suffix>
-                    <FeatherIcon :name="open ? 'chevron-up' : 'chevron-down'" class="h-4 text-gray-600" />
+                    <FeatherIcon :name="open ? 'chevron-up' : 'chevron-down'" class="h-4 text-ink-gray-5" />
                   </template>
                 </Button>
               </template>
               <template #body>
-                <div class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl">
+                <div class="my-2 p-1.5 min-w-40 space-y-1.5 divide-y divide-outline-gray-1 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
                   <div>
                     <DropdownItem
                       v-if="field.options?.length"
@@ -50,7 +50,7 @@
                       :option="option"
                     />
                     <div v-else>
-                      <div class="p-1.5 px-7 text-base text-gray-500">
+                      <div class="p-1.5 px-7 text-base text-ink-gray-4">
                         {{ __('No {0} Available', [field.label]) }}
                       </div>
                     </div>
@@ -83,7 +83,7 @@
             v-else-if="['email', 'number', 'date', 'password', 'textarea'].includes(field.type)"
             class="form-control"
             :class="{
-              '[&_input]:text-gray-500': field.type === 'date' && !data[field.name],
+              '[&_input]:text-ink-gray-4': field.type === 'date' && !data[field.name],
             }"
             :type="field.type"
             :value="data[field.name]"
@@ -144,16 +144,18 @@
             @change.stop="emit('update', field.name, $event.target.value)"
           />
         </div>
-        <ArrowUpRightIcon
-          v-if="field.type === 'link' && field.link && data[field.name]"
-          class="h-4 w-4 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
-          @click="field.link(data[field.name])"
-        />
-        <EditIcon
-          v-if="field.type === 'link' && field.edit && data[field.name]"
-          class="size-3.5 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
-          @click="field.edit(data[field.name])"
-        />
+        <div class="ml-1">
+          <ArrowUpRightIcon
+            v-if="field.type === 'link' && field.link && data[field.name]"
+            class="h-4 w-4 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
+            @click.stop="field.link(data[field.name])"
+          />
+          <EditIcon
+            v-if="field.type === 'link' && field.edit && data[field.name]"
+            class="size-3.5 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
+            @click.stop="field.edit(data[field.name])"
+          />
+        </div>
       </div>
     </div>
   </FadedScrollableDiv>
@@ -240,7 +242,7 @@ function evaluate(code, context = {}) {
 :deep(.form-control button),
 .dropdown-button {
   border-color: transparent;
-  background: white;
+  background: transparent;
 }
 
 :deep(.form-control button) {
diff --git a/frontend/src/components/Settings/ProfileImageEditor.vue b/frontend/src/components/Settings/ProfileImageEditor.vue
index e2febbc70..002a1eae6 100644
--- a/frontend/src/components/Settings/ProfileImageEditor.vue
+++ b/frontend/src/components/Settings/ProfileImageEditor.vue
@@ -4,10 +4,10 @@
       <div class="flex flex-col items-center">
         <button class="group relative rounded-full border-2" @click="openFileSelector">
           <div
-            class="absolute inset-0 grid place-items-center rounded-full bg-gray-400/20 text-base text-gray-600 transition-opacity"
+            class="absolute inset-0 grid place-items-center rounded-full bg-gray-400/20 text-base text-ink-gray-5 transition-opacity"
             :class="[uploading ? 'opacity-100' : 'opacity-0 group-hover:opacity-100', 'drop-shadow-sm']"
           >
-            <span class="inline-block rounded-md bg-gray-900/60 px-2 py-1 text-white">
+            <span class="inline-block rounded-md bg-surface-gray-7/60 px-2 py-1 text-white">
               {{ uploading ? `Uploading ${progress}%` : profile.user_image ? 'Change Image' : 'Upload Image' }}
             </span>
           </div>
@@ -17,7 +17,7 @@
             :src="profile.user_image"
             alt="Profile Photo"
           />
-          <div v-else class="h-64 w-64 rounded-full bg-gray-100"></div>
+          <div v-else class="h-64 w-64 rounded-full bg-surface-gray-2"></div>
         </button>
         <ErrorMessage class="mt-4" :message="error" />
         <div class="mt-4 flex items-center gap-4">
diff --git a/frontend/src/components/Settings/ProfileSettings.vue b/frontend/src/components/Settings/ProfileSettings.vue
index 0d02acf2e..52b41ec97 100644
--- a/frontend/src/components/Settings/ProfileSettings.vue
+++ b/frontend/src/components/Settings/ProfileSettings.vue
@@ -3,8 +3,8 @@
     <div class="flex items-center gap-4">
       <Avatar class="!size-16" :image="profile.user_image" :label="profile.full_name" />
       <div class="flex flex-col gap-1">
-        <span class="text-2xl font-semibold">{{ profile.full_name }}</span>
-        <span class="text-base text-gray-700">{{ profile.email }}</span>
+        <span class="text-2xl font-semibold text-ink-gray-9">{{ profile.full_name }}</span>
+        <span class="text-base text-ink-gray-7">{{ profile.email }}</span>
       </div>
     </div>
     <Button :label="__('Edit profile')" @click="showProfileModal = true" />
diff --git a/frontend/src/components/Settings/SettingsModal.vue b/frontend/src/components/Settings/SettingsModal.vue
index 4082db29c..71d221676 100644
--- a/frontend/src/components/Settings/SettingsModal.vue
+++ b/frontend/src/components/Settings/SettingsModal.vue
@@ -9,7 +9,7 @@
           <div v-for="tab in tabs">
             <div
               v-if="!tab.hideLabel"
-              class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
+              class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-ink-gray-5 transition-all duration-300 ease-in-out"
             >
               <span>{{ __(tab.label) }}</span>
             </div>
@@ -21,8 +21,8 @@
                 class="w-full"
                 :class="
                   activeTab?.label == i.label
-                    ? 'bg-white shadow-sm'
-                    : 'hover:bg-gray-100'
+                    ? 'bg-surface-white shadow-sm'
+                    : 'hover:bg-surface-gray-2'
                 "
                 @click="activeTab = i"
               />
diff --git a/frontend/src/components/Settings/SettingsPage.vue b/frontend/src/components/Settings/SettingsPage.vue
index 2f1704f48..fec56c76b 100644
--- a/frontend/src/components/Settings/SettingsPage.vue
+++ b/frontend/src/components/Settings/SettingsPage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex h-full flex-col gap-8">
-    <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
+    <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 text-ink-gray-9">
       <div>{{ title || __(doctype) }}</div>
       <Badge
         v-if="data.isDirty"
@@ -82,7 +82,7 @@ const data = createDocumentResource({
         title: __('Success'),
         text: __(props.successMessage),
         icon: 'check',
-        iconClasses: 'text-green-600',
+        iconClasses: 'text-ink-green-3',
       })
     },
     onError: (err) => {
@@ -90,7 +90,7 @@ const data = createDocumentResource({
         title: __('Error'),
         text: err.message + ': ' + err.messages[0],
         icon: 'x',
-        iconClasses: 'text-red-600',
+        iconClasses: 'text-ink-red-4',
       })
     },
   },
diff --git a/frontend/src/components/Settings/SidePanelLayoutBuilder.vue b/frontend/src/components/Settings/SidePanelLayoutBuilder.vue
index d7dad93b3..285d09b74 100644
--- a/frontend/src/components/Settings/SidePanelLayoutBuilder.vue
+++ b/frontend/src/components/Settings/SidePanelLayoutBuilder.vue
@@ -4,15 +4,15 @@
       <template #item="{ element: section }">
         <div class="flex flex-col gap-3">
           <div
-            class="flex items-center justify-between rounded px-2.5 py-2 bg-gray-50"
+            class="flex items-center justify-between rounded px-2.5 py-2 bg-gray-2"
           >
             <div
-              class="flex max-w-fit cursor-pointer items-center gap-2 text-base leading-4"
+              class="flex max-w-fit cursor-pointer items-center gap-2 text-base leading-4 text-ink-gray-9"
               @click="section.opened = !section.opened"
             >
               <FeatherIcon
                 name="chevron-right"
-                class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
+                class="h-4 transition-all duration-300 ease-in-out"
                 :class="{ 'rotate-90': section.opened }"
               />
               <div v-if="!section.editingLabel">
@@ -62,7 +62,7 @@
             >
               <template #item="{ element: field }">
                 <div
-                  class="px-2.5 py-2 border rounded text-base leading-4 text-gray-800 flex items-center justify-between gap-2"
+                  class="px-2.5 py-2 border border-outline-gray-modals rounded text-base leading-4 text-ink-gray-8 flex items-center justify-between gap-2"
                 >
                   <div class="flex items-center gap-2">
                     <DragVerticalIcon class="h-3.5 cursor-grab" />
@@ -87,7 +87,7 @@
             >
               <template #target="{ togglePopover }">
                 <Button
-                  class="w-full h-8 mt-1.5 !border-gray-200 hover:!border-gray-300"
+                  class="w-full h-8 mt-1.5 !border-outline-gray-modals hover:!border-outline-gray-2"
                   variant="outline"
                   @click="togglePopover()"
                   :label="__('Add Field')"
@@ -98,9 +98,9 @@
                 </Button>
               </template>
               <template #item-label="{ option }">
-                <div class="flex flex-col gap-1">
+                <div class="flex flex-col gap-1 text-ink-gray-9">
                   <div>{{ option.label }}</div>
-                  <div class="text-gray-500 text-sm">
+                  <div class="text-ink-gray-4 text-sm">
                     {{ `${option.fieldname} - ${option.fieldtype}` }}
                   </div>
                 </div>
@@ -108,9 +108,9 @@
             </Autocomplete>
             <div
               v-else
-              class="flex justify-center items-center border rounded border-dashed p-3"
+              class="flex justify-center items-center border rounded border-dashed border-outline-gray-modals p-3"
             >
-              <div class="text-sm text-gray-500">
+              <div class="text-sm text-ink-gray-4">
                 {{ __('This section is not editable') }}
               </div>
             </div>
diff --git a/frontend/src/components/Settings/SidePanelModal.vue b/frontend/src/components/Settings/SidePanelModal.vue
index 3adf222da..6effb2783 100644
--- a/frontend/src/components/Settings/SidePanelModal.vue
+++ b/frontend/src/components/Settings/SidePanelModal.vue
@@ -2,7 +2,7 @@
   <Dialog v-model="show" :options="{ size: '3xl' }">
     <template #body-title>
       <h3
-        class="flex items-center gap-2 text-2xl font-semibold leading-6 text-gray-900"
+        class="flex items-center gap-2 text-2xl font-semibold leading-6 text-ink-gray-9"
       >
         <div>{{ __('Edit Field Layout') }}</div>
         <Badge
@@ -53,7 +53,7 @@
           </div>
           <div
             v-else
-            class="flex flex-1 justify-center items-center text-gray-600 bg-gray-50 rounded border border-gray-50"
+            class="flex flex-1 justify-center items-center text-ink-gray-5 bg-surface-gray-2 rounded"
           >
             {{ __('Toggle on for preview') }}
           </div>
diff --git a/frontend/src/components/SidebarLink.vue b/frontend/src/components/SidebarLink.vue
index ec168517d..696b84afe 100644
--- a/frontend/src/components/SidebarLink.vue
+++ b/frontend/src/components/SidebarLink.vue
@@ -1,7 +1,7 @@
 <template>
   <button
-    class="flex h-7 cursor-pointer items-center rounded text-gray-700 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-gray-400"
-    :class="isActive ? 'bg-white shadow-sm' : 'hover:bg-gray-100'"
+    class="flex h-7 cursor-pointer items-center rounded text-ink-gray-7 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-gray-400"
+    :class="isActive ? 'bg-surface-selected shadow-sm' : 'hover:bg-surface-gray-2'"
     @click="handleClick"
   >
     <div
@@ -15,9 +15,9 @@
               <FeatherIcon
                 v-if="typeof icon == 'string'"
                 :name="icon"
-                class="size-4 text-gray-700"
+                class="size-4 text-ink-gray-7"
               />
-              <component v-else :is="icon" class="size-4 text-gray-700" />
+              <component v-else :is="icon" class="size-4 text-ink-gray-7" />
             </span>
           </slot>
         </Tooltip>
@@ -55,7 +55,7 @@ const route = useRoute()
 
 const props = defineProps({
   icon: {
-    type: [Object, String],
+    type: [Object, String, Function],
   },
   label: {
     type: String,
diff --git a/frontend/src/components/SortBy.vue b/frontend/src/components/SortBy.vue
index af679cb66..f1743495c 100644
--- a/frontend/src/components/SortBy.vue
+++ b/frontend/src/components/SortBy.vue
@@ -26,7 +26,7 @@
         <template v-if="!hideLabel" #prefix><SortIcon class="h-4" /></template>
         <template v-if="sortValues?.size" #suffix>
           <div
-            class="flex h-5 w-5 items-center justify-center rounded bg-gray-900 pt-[1px] text-2xs font-medium text-white"
+            class="flex h-5 w-5 items-center justify-center rounded-[5px] bg-surface-white pt-px text-xs font-medium text-ink-gray-8 shadow-sm"
           >
             {{ sortValues.size }}
           </div>
@@ -51,20 +51,22 @@
             <SortIcon class="h-4" />
           </template>
           <template v-if="sortValues?.size" #suffix>
-            <FeatherIcon :name="open ? 'chevron-up' : 'chevron-down'" class="h-4 text-gray-600" />
+            <FeatherIcon :name="open ? 'chevron-up' : 'chevron-down'" class="h-4 text-ink-gray-5" />
           </template>
         </Button>
       </div>
     </template>
     <template #body="{ close }">
-      <div class="my-2 rounded-lg border border-gray-100 bg-white shadow-xl">
+      <div
+        class="my-2 min-w-40 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+      >
         <div class="min-w-60 p-2">
           <div v-if="sortValues?.size" id="sort-list" class="mb-3 flex flex-col gap-2">
             <div v-for="(sort, i) in sortValues" :key="sort.fieldname" class="flex items-center gap-1">
               <div class="handle flex h-7 w-7 items-center justify-center">
-                <DragIcon class="h-4 w-4 cursor-grab text-gray-600" />
+                <DragIcon class="h-4 w-4 cursor-grab text-ink-gray-5" />
               </div>
-              <div class="flex">
+              <div class="flex flex-1 [&>_div]:w-full">
                 <Button
                   size="md"
                   class="rounded-r-none border-r"
@@ -79,7 +81,6 @@
                   <DesendingIcon v-else class="h-4" />
                 </Button>
                 <Autocomplete
-                  class="!w-32"
                   :value="sort.fieldname"
                   :options="sortOptions.data"
                   @change="(e) => updateSort(e, i)"
@@ -87,13 +88,13 @@
                 >
                   <template #target="{ togglePopover, selectedValue, displayValue }">
                     <Button
-                      class="flex w-full items-center justify-between rounded-l-none !text-gray-600"
+                      class="flex w-full items-center justify-between rounded-l-none !text-ink-gray-5"
                       size="md"
                       @click="togglePopover()"
                     >
                       {{ displayValue(selectedValue) }}
                       <template #suffix>
-                        <FeatherIcon name="chevron-down" class="h-4 text-gray-600" />
+                        <FeatherIcon name="chevron-down" class="h-4 text-ink-gray-5" />
                       </template>
                     </Button>
                   </template>
@@ -102,13 +103,13 @@
               <Button variant="ghost" icon="x" @click="removeSort(i)" />
             </div>
           </div>
-          <div v-else class="mb-3 flex h-7 items-center px-3 text-sm text-gray-600">
+          <div v-else class="mb-3 flex h-7 items-center px-3 text-sm text-ink-gray-5">
             {{ __('Empty - Choose a field to sort by') }}
           </div>
           <div class="flex items-center justify-between gap-2">
             <Autocomplete :options="options" value="" :placeholder="__('First Name')" @change="(e) => setSort(e)">
               <template #target="{ togglePopover }">
-                <Button class="!text-gray-600" variant="ghost" @click="togglePopover()" :label="__('Add Sort')">
+                <Button class="!text-ink-gray-5" variant="ghost" @click="togglePopover()" :label="__('Add Sort')">
                   <template #prefix>
                     <FeatherIcon name="plus" class="h-4" />
                   </template>
@@ -117,7 +118,7 @@
             </Autocomplete>
             <Button
               v-if="sortValues?.size"
-              class="!text-gray-600"
+              class="!text-ink-gray-5"
               variant="ghost"
               :label="__('Clear Sort')"
               @click="clearSort(close)"
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index 66588acdb..85e2343c6 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -3,17 +3,17 @@
     <template v-slot="{ open }">
       <button
         class="flex h-12 items-center rounded-md py-2 duration-300 ease-in-out"
-        :class="isCollapsed ? 'w-auto px-0' : open ? 'w-52 bg-white px-2 shadow-sm' : 'w-52 px-2 hover:bg-gray-200'"
+        :class="isCollapsed ? 'w-auto px-0' : open ? 'w-52 bg-surface-white px-2 shadow-sm' : 'w-52 px-2 hover:bg-surface-gray-3'"
       >
         <CRMLogo class="size-8 flex-shrink-0 rounded" />
         <div
           class="flex flex-1 flex-col text-left duration-300 ease-in-out"
           :class="isCollapsed ? 'ml-0 w-0 overflow-hidden opacity-0' : 'ml-2 w-auto opacity-100'"
         >
-          <div class="text-base font-medium leading-none text-gray-900">
+          <div class="text-base font-medium leading-none text-ink-gray-9">
             {{ __('Next CRM') }}
           </div>
-          <div class="mt-1 text-sm leading-none text-gray-700">
+          <div class="mt-1 text-sm leading-none text-ink-gray-7">
             {{ user.full_name }}
           </div>
         </div>
@@ -21,7 +21,7 @@
           class="duration-300 ease-in-out"
           :class="isCollapsed ? 'ml-0 w-0 overflow-hidden opacity-0' : 'ml-2 w-auto opacity-100'"
         >
-          <FeatherIcon name="chevron-down" class="size-4 text-gray-600" aria-hidden="true" />
+          <FeatherIcon name="chevron-down" class="size-4 text-ink-gray-5" aria-hidden="true" />
         </div>
       </button>
     </template>
@@ -36,7 +36,8 @@ import Apps from '@/components/Apps.vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
 import { Dropdown } from 'frappe-ui'
-import { computed, ref, markRaw } from 'vue'
+import { useStorage } from '@vueuse/core'
+import { computed, ref, markRaw, onMounted } from 'vue'
 
 const props = defineProps({
   isCollapsed: {
@@ -51,6 +52,7 @@ const { getUser } = usersStore()
 const user = computed(() => getUser() || {})
 
 const showSettingsModal = ref(false)
+const theme = useStorage('theme', 'light')
 
 let dropdownOptions = ref([
   {
@@ -76,6 +78,11 @@ let dropdownOptions = ref([
     group: 'Others',
     hideLabel: true,
     items: [
+      {
+        icon: computed(() => (theme.value === 'dark' ? 'sun' : 'moon')),
+        label: computed(() => __('Toggle theme')),
+        onClick: toggleTheme,
+      },
       {
         icon: 'settings',
         label: computed(() => __('Settings')),
@@ -89,4 +96,15 @@ let dropdownOptions = ref([
     ],
   },
 ])
+
+function toggleTheme() {
+  const currentTheme = document.documentElement.getAttribute('data-theme')
+  theme.value = currentTheme === 'dark' ? 'light' : 'dark'
+  document.documentElement.setAttribute('data-theme', theme.value)
+}
+onMounted(() => {
+  if (['light', 'dark'].includes(theme.value)) {
+    document.documentElement.setAttribute('data-theme', theme.value)
+  }
+})
 </script>
diff --git a/frontend/src/components/ViewBreadcrumbs.vue b/frontend/src/components/ViewBreadcrumbs.vue
index 43a33285c..c05a5ed1f 100644
--- a/frontend/src/components/ViewBreadcrumbs.vue
+++ b/frontend/src/components/ViewBreadcrumbs.vue
@@ -2,11 +2,11 @@
   <div class="flex items-center">
     <router-link
       :to="{ name: routeName }"
-      class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700"
+      class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-ink-gray-5 hover:text-ink-gray-7"
     >
       {{ __(routeName) }}
     </router-link>
-    <span class="mx-0.5 text-base text-gray-500" aria-hidden="true"> / </span>
+    <span class="mx-0.5 text-base text-ink-gray-4" aria-hidden="true"> / </span>
     <Dropdown v-if="viewControls" :options="viewControls.viewsDropdownOptions">
       <template #default="{ open }">
         <Button
@@ -20,28 +20,26 @@
           <template #suffix>
             <FeatherIcon
               :name="open ? 'chevron-up' : 'chevron-down'"
-              class="h-4 text-gray-800"
+              class="h-4 text-ink-gray-8"
             />
           </template>
         </Button>
       </template>
       <template #item="{ item, active }">
         <button
-          :class="[
-            active ? 'bg-gray-100' : 'text-gray-800',
-            'group flex gap-4 h-7 w-full justify-between items-center rounded px-2 text-base',
-          ]"
+          class="group flex text-ink-gray-6 gap-4 h-7 w-full justify-between items-center rounded px-2 text-base"
+          :class="{ 'bg-surface-gray-3': active }"
           @click="item.onClick"
         >
           <div class="flex items-center">
             <FeatherIcon
               v-if="item.icon && typeof item.icon === 'string'"
               :name="item.icon"
-              class="mr-2 h-4 w-4 flex-shrink-0 text-gray-700"
+              class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-7"
               aria-hidden="true"
             />
             <component
-              class="mr-2 h-4 w-4 flex-shrink-0 text-gray-700"
+              class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-7"
               v-else-if="item.icon"
               :is="item.icon"
             />
@@ -70,7 +68,7 @@
             <FeatherIcon
               v-if="isCurrentView(item)"
               name="check"
-              class="size-4 text-gray-700"
+              class="size-4 text-ink-gray-7"
             />
           </div>
         </button>
diff --git a/frontend/src/components/frappe-ui/Autocomplete.vue b/frontend/src/components/frappe-ui/Autocomplete.vue
index bd15422de..4481c94b8 100644
--- a/frontend/src/components/frappe-ui/Autocomplete.vue
+++ b/frontend/src/components/frappe-ui/Autocomplete.vue
@@ -14,31 +14,40 @@
         >
           <div class="w-full">
             <button
-              class="flex w-full items-center justify-between focus:outline-none"
+              class="flex h-7 w-full items-center justify-between gap-2 rounded bg-surface-gray-2 px-2 py-1 transition-colors hover:bg-surface-gray-3 border border-transparent focus:border-outline-gray-4 focus:outline-none focus:ring-2 focus:ring-outline-gray-3"
               :class="inputClasses"
               @click="() => togglePopover()"
             >
               <div class="flex items-center">
                 <slot name="prefix" />
-                <span class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5" v-if="selectedValue">
+                <span
+                  class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
+                  v-if="selectedValue"
+                >
                   {{ displayValue(selectedValue) }}
                 </span>
-                <span class="text-base leading-5 text-gray-500" v-else>
+                <span class="text-base leading-5 text-ink-gray-4" v-else>
                   {{ placeholder || '' }}
                 </span>
               </div>
-              <FeatherIcon name="chevron-down" class="h-4 w-4 text-gray-600" aria-hidden="true" />
+              <FeatherIcon
+                name="chevron-down"
+                class="h-4 w-4 text-ink-gray-5"
+                aria-hidden="true"
+              />
             </button>
           </div>
         </slot>
       </template>
       <template #body="{ isOpen }">
         <div v-show="isOpen">
-          <div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
-            <div class="relative px-1.5 pt-0.5">
+          <div
+            class="relative mt-1 rounded-lg bg-surface-modal text-base shadow-2xl"
+          >
+            <div class="relative px-1.5 pt-1.5">
               <ComboboxInput
                 ref="search"
-                class="form-input w-full"
+                class="form-input w-full focus:bg-surface-gray-3 hover:bg-surface-gray-4 text-ink-gray-8"
                 type="text"
                 @change="
                   (e) => {
@@ -53,12 +62,23 @@
                 class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
                 @click="selectedValue = null"
               >
-                <FeatherIcon name="x" class="w-4" />
+                <FeatherIcon name="x" class="w-4 text-ink-gray-8" />
               </button>
             </div>
-            <ComboboxOptions class="my-1 max-h-[12rem] overflow-y-auto px-1.5" static>
-              <div class="mt-1.5" v-for="group in groups" :key="group.key" v-show="group.items.length > 0">
-                <div v-if="group.group && !group.hideLabel" class="px-2.5 py-1.5 text-sm font-medium text-gray-500">
+            <ComboboxOptions
+              class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
+              static
+            >
+              <div
+                class="mt-1.5"
+                v-for="group in groups"
+                :key="group.key"
+                v-show="group.items.length > 0"
+              >
+                <div
+                  v-if="group.group && !group.hideLabel"
+                  class="truncate bg-surface-modal px-2.5 py-1.5 text-sm font-medium text-ink-gray-5"
+                >
                   {{ group.group }}
                 </div>
                 <ComboboxOption
@@ -68,20 +88,42 @@
                   :value="option"
                   v-slot="{ active, selected }"
                 >
-                  <li :class="['flex items-center rounded px-2.5 py-1.5 text-base', { 'bg-gray-100': active }]">
-                    <slot name="item-prefix" v-bind="{ active, selected, option }" />
-                    <slot name="item-label" v-bind="{ active, selected, option }">
-                      {{ option.label }}
+                  <li
+                    :class="[
+                      'flex cursor-pointer items-center rounded px-2.5 py-1.5 text-base',
+                      { 'bg-surface-gray-3': active },
+                    ]"
+                  >
+                    <slot
+                      name="item-prefix"
+                      v-bind="{ active, selected, option }"
+                    />
+                    <slot
+                      name="item-label"
+                      v-bind="{ active, selected, option }"
+                    >
+                      <div class="flex-1 truncate text-ink-gray-7">
+                        {{ option.label }}
+                      </div>
                     </slot>
                   </li>
                 </ComboboxOption>
               </div>
-              <li v-if="groups.length == 0" class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-gray-600">
+              <li
+                v-if="groups.length == 0"
+                class="my-1.5 rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
+              >
                 No results found
               </li>
             </ComboboxOptions>
-            <div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
-              <slot name="footer" v-bind="{ value: search?.el._value, close }"></slot>
+            <div
+              v-if="slots.footer"
+              class="border-t border-outline-gray-modals p-1.5"
+            >
+              <slot
+                name="footer"
+                v-bind="{ value: search?.el._value, close }"
+              ></slot>
             </div>
           </div>
         </div>
@@ -91,7 +133,12 @@
 </template>
 
 <script setup>
-import { Combobox, ComboboxInput, ComboboxOptions, ComboboxOption } from '@headlessui/vue'
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+} from '@headlessui/vue'
 import { Popover, Button, FeatherIcon } from 'frappe-ui'
 import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'
 
@@ -156,7 +203,9 @@ function close() {
 const groups = computed(() => {
   if (!props.options || props.options.length == 0) return []
 
-  let groups = props.options[0]?.group ? props.options : [{ group: '', items: props.options }]
+  let groups = props.options[0]?.group
+    ? props.options
+    : [{ group: '', items: props.options }]
 
   return groups
     .map((group, i) => {
@@ -176,7 +225,9 @@ function filterOptions(options) {
   }
   return options.filter((option) => {
     let searchTexts = [option.label, option.value]
-    return searchTexts.some((text) => (text || '').toString().toLowerCase().includes(query.value.toLowerCase()))
+    return searchTexts.some((text) =>
+      (text || '').toString().toLowerCase().includes(query.value.toLowerCase()),
+    )
   })
 }
 
@@ -202,7 +253,7 @@ watch(showOptions, (val) => {
 })
 
 const textColor = computed(() => {
-  return props.disabled ? 'text-gray-600' : 'text-gray-800'
+  return props.disabled ? 'text-ink-gray-5' : 'text-ink-gray-8'
 })
 
 const inputClasses = computed(() => {
@@ -223,17 +274,25 @@ const inputClasses = computed(() => {
   let variant = props.disabled ? 'disabled' : props.variant
   let variantClasses = {
     subtle:
-      'border border-gray-100 bg-gray-100 placeholder-gray-500 hover:border-gray-200 hover:bg-gray-200 focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
+      'border border-gray-100 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
     outline:
-      'border border-gray-300 bg-white placeholder-gray-500 hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
+      'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
     disabled: [
-      'border bg-gray-50 placeholder-gray-400',
-      props.variant === 'outline' ? 'border-gray-300' : 'border-transparent',
+      'border bg-surface-menu-bar placeholder-ink-gray-3',
+      props.variant === 'outline'
+        ? 'border-outline-gray-2'
+        : 'border-transparent',
     ],
   }[variant]
 
-  return [sizeClasses, paddingClasses, variantClasses, textColor.value, 'transition-colors w-full']
+  return [
+    sizeClasses,
+    paddingClasses,
+    variantClasses,
+    textColor.value,
+    'transition-colors w-full',
+  ]
 })
 
 defineExpose({ query })
-</script>
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/frappe-ui/Dropdown.vue b/frontend/src/components/frappe-ui/Dropdown.vue
index b18224f69..b2317b33b 100644
--- a/frontend/src/components/frappe-ui/Dropdown.vue
+++ b/frontend/src/components/frappe-ui/Dropdown.vue
@@ -16,14 +16,14 @@
 
       <template #body>
         <div
-          class="rounded-lg bg-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+          class="mt-2 min-w-40 divide-y divide-outline-gray-modals rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
           :class="{
             'mt-2': ['bottom', 'left', 'right'].includes(placement),
             'ml-2': placement == 'right-start',
           }"
         >
           <MenuItems
-            class="min-w-40 divide-y divide-gray-100"
+            class="min-w-40 divide-y divide-outline-gray-modals"
             :class="{
               'left-0 origin-top-left': placement == 'left',
               'right-0 origin-top-right': placement == 'right',
@@ -34,7 +34,7 @@
             <div v-for="group in groups" :key="group.key" class="p-1.5">
               <div
                 v-if="group.group && !group.hideLabel"
-                class="flex h-7 items-center px-2 text-sm font-medium text-gray-500"
+                class="flex h-7 items-center px-2 text-sm font-medium text-ink-gray-4"
               >
                 {{ group.group }}
               </div>
@@ -52,7 +52,7 @@
                   <button
                     v-else
                     :class="[
-                      active ? 'bg-gray-100' : 'text-gray-800',
+                      active ? 'bg-surface-gray-3' : 'text-ink-gray-6',
                       'group flex h-7 w-full items-center rounded px-2 text-base',
                     ]"
                     @click="item.onClick"
@@ -60,15 +60,15 @@
                     <FeatherIcon
                       v-if="item.icon && typeof item.icon === 'string'"
                       :name="item.icon"
-                      class="mr-2 h-4 w-4 flex-shrink-0 text-gray-700"
+                      class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-7"
                       aria-hidden="true"
                     />
                     <component
-                      class="mr-2 h-4 w-4 flex-shrink-0 text-gray-700"
+                      class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-7"
                       v-else-if="item.icon"
                       :is="item.icon"
                     />
-                    <span class="whitespace-nowrap">
+                    <span class="whitespace-nowrap text-ink-gray-7">
                       {{ item.label }}
                     </span>
                   </button>
diff --git a/frontend/src/components/frappe-ui/Popover.vue b/frontend/src/components/frappe-ui/Popover.vue
index d5f1743a1..783dcccb0 100644
--- a/frontend/src/components/frappe-ui/Popover.vue
+++ b/frontend/src/components/frappe-ui/Popover.vue
@@ -23,7 +23,7 @@
         <transition v-bind="popupTransition">
           <div v-show="isOpen">
             <slot name="body" v-bind="{ togglePopover, updatePosition, open, close, isOpen }">
-              <div class="rounded-lg border border-gray-100 bg-white shadow-xl">
+              <div class="rounded-lg border border-gray-100 bg-surface-white shadow-xl">
                 <slot
                   name="body-main"
                   v-bind="{
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e2fc4dd51..a25abc97d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,7 @@
-@import './assets/Inter/inter.css';
-@import 'frappe-ui/src/style.css';
+@import 'frappe-ui/src/fonts/Inter/inter.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 @layer components {
 	.prose-f {
diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index 2ef3ace45..7a8f4a313 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -44,7 +44,7 @@
     class="flex h-full items-center justify-center"
   >
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <PhoneIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Logs')]) }}</span>
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 3bae3ee83..0bc2483e1 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -64,7 +64,7 @@
                     </div>
                   </component>
                 </div>
-                <div class="flex flex-col gap-2 truncate">
+                <div class="flex flex-col gap-2 truncate text-ink-gray-9">
                   <div class="truncate text-2xl font-medium">
                     <span v-if="contact.data.salutation">
                       {{ contact.data.salutation + '. ' }}
@@ -73,7 +73,7 @@
                   </div>
                   <div
                     v-if="contact.data.company_name"
-                    class="flex items-center gap-1.5 text-base text-gray-800"
+                    class="flex items-center gap-1.5 text-base text-ink-gray-8"
                   >
                     <Avatar
                       size="xs"
@@ -150,17 +150,17 @@
         </div>
       </div>
     </Resizer>
-    <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
-      <template #tab="{ tab, selected }">
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
+      <template #tab-item="{ tab, selected }">
         <button
-          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-          :class="{ 'text-gray-900': selected }"
+          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-gray-400 hover:text-ink-gray-9"
+          :class="{ 'text-ink-gray-9': selected }"
         >
           <component v-if="tab.icon" :is="tab.icon" class="h-5" />
           {{ __(tab.label) }}
           <Badge
-            class="group-hover:bg-gray-900"
-            :class="[selected ? 'bg-gray-900' : 'bg-gray-600']"
+            class="group-hover:bg-surface-gray-7"
+            :class="[selected ? 'bg-surface-gray-7' : 'bg-gray-600']"
             variant="solid"
             theme="gray"
             size="sm"
@@ -169,7 +169,7 @@
           </Badge>
         </button>
       </template>
-      <template #default="{ tab }">
+      <template #tab-panel="{ tab }">
         <OpportunitiesListView
           v-if="tab.label === 'Opportunities' && rows.length"
           class="mt-4"
@@ -179,7 +179,7 @@
         />
         <div
           v-if="!rows.length"
-          class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
+          class="grid flex-1 place-items-center text-xl font-medium text-ink-gray-4"
         >
           <div class="flex flex-col items-center justify-center space-y-3">
             <component :is="tab.icon" class="!h-10 !w-10" />
@@ -348,7 +348,7 @@ async function deleteContact() {
               title: __('Error'),
               text: errorMessage,
               icon: 'x',
-              iconClasses: 'text-red-600',
+              iconClasses: 'text-ink-red-4',
             });
           }
         },
@@ -547,7 +547,7 @@ async function setAsPrimary(field, value) {
     createToast({
       title: 'Contact updated',
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -564,7 +564,7 @@ async function createNew(field, value) {
     createToast({
       title: 'Contact updated',
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -581,7 +581,7 @@ async function editOption(doctype, name, fieldname, value) {
     createToast({
       title: 'Contact updated',
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -595,7 +595,7 @@ async function deleteOption(doctype, name) {
   createToast({
     title: 'Contact updated',
     icon: 'check',
-    iconClasses: 'text-green-600',
+    iconClasses: 'text-ink-green-3',
   })
 }
 
@@ -609,7 +609,7 @@ async function updateField(fieldname, value) {
   createToast({
     title: 'Contact updated',
     icon: 'check',
-    iconClasses: 'text-green-600',
+    iconClasses: 'text-ink-green-3',
   })
 
   contact.reload()
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 949adfd15..7f97d1e73 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -50,7 +50,7 @@
     class="flex h-full items-center justify-center"
   >
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <ContactsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Contacts')]) }}</span>
diff --git a/frontend/src/pages/Customer.vue b/frontend/src/pages/Customer.vue
index 4727925e0..6b5345f29 100644
--- a/frontend/src/pages/Customer.vue
+++ b/frontend/src/pages/Customer.vue
@@ -70,7 +70,7 @@
                   </div>
                   <div
                     v-if="customer.doc.website"
-                    class="flex items-center gap-1.5 text-base text-gray-800"
+                    class="flex items-center gap-1.5 text-base text-ink-gray-8"
                   >
                     <WebsiteIcon class="size-4" />
                     <span>{{ website(customer.doc.website) }}</span>
@@ -135,11 +135,11 @@
         </div>
       </div>
     </Resizer>
-    <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
-      <template #tab="{ tab, selected }">
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
+      <template #tab-item="{ tab, selected }">
         <button
-          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-          :class="{ 'text-gray-900': selected }"
+          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-gray-400 hover:text-ink-gray-9"
+          :class="{ 'text-ink-gray-9': selected }"
         >
           <component v-if="tab.icon" :is="tab.icon" class="h-5" />
           {{ __(tab.label) }}
@@ -154,7 +154,7 @@
           </Badge>
         </button>
       </template>
-      <template #default="{ tab }">
+      <template #tab-panel="{ tab }">
         <OpportunitiesListView
           class="mt-4"
           v-if="tab.label === 'Opportunities' && rows.length"
@@ -171,7 +171,7 @@
         />
         <div
           v-if="!rows.length"
-          class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
+          class="grid flex-1 place-items-center text-xl font-medium text-ink-gray-4"
         >
           <div class="flex flex-col items-center justify-center space-y-3">
             <component :is="tab.icon" class="!h-10 !w-10" />
@@ -269,7 +269,7 @@ async function updateField(fieldname, value) {
   createToast({
     title: __('Customer updated'),
     icon: 'check',
-    iconClasses: 'text-green-600',
+    iconClasses: 'text-ink-green-3',
   })
 }
 
@@ -354,7 +354,7 @@ async function deleteCustomer() {
               title: __('Error'),
               text: errorMessage,
               icon: 'x',
-              iconClasses: 'text-red-600',
+              iconClasses: 'text-ink-red-4',
             });
           }
         },
@@ -372,7 +372,7 @@ function openWebsite() {
     createToast({
       title: __('Website not found'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
   else window.open(customer.doc.website, '_blank')
 }
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index bf0ad717b..5aafc85af 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -51,7 +51,7 @@
     class="flex h-full items-center justify-center"
   >
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <Email2Icon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Email Templates')]) }}</span>
diff --git a/frontend/src/pages/InvalidPage.vue b/frontend/src/pages/InvalidPage.vue
index cd1a780cf..875cec2d4 100644
--- a/frontend/src/pages/InvalidPage.vue
+++ b/frontend/src/pages/InvalidPage.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="grid h-full place-items-center px-4 py-20 text-center text-lg text-gray-600"
+    class="grid h-full place-items-center px-4 py-20 text-center text-lg text-ink-gray-5"
   >
     <div class="space-y-2">
       <div>Invalid page or not permitted to access</div>
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 405eedb6d..4454608a7 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -22,7 +22,7 @@
             :class="getLeadStatus(lead.data.status).colorClass"
           >
             <template #prefix>
-              <IndicatorIcon />
+              <IndicatorIcon :class="getLeadStatus(lead.data.status).color" />
             </template>
             <template #suffix>
               <FeatherIcon
@@ -41,19 +41,21 @@
     </template>
   </LayoutHeader>
   <div v-if="lead?.data" class="flex h-full overflow-hidden">
-    <Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
-      <Activities
-        ref="activities"
-        doctype="Lead"
-        :tabs="tabs"
-        v-model:reload="reload"
-        v-model:tabIndex="tabIndex"
-        v-model="lead"
-      />
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
+      <template #tab-panel>
+        <Activities
+          ref="activities"
+          doctype="Lead"
+          :tabs="tabs"
+          v-model:reload="reload"
+          v-model:tabIndex="tabIndex"
+          v-model="lead"
+        />
+      </template>
     </Tabs>
     <Resizer class="flex flex-col justify-between border-l" side="right">
       <div
-        class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-medium"
+        class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-medium text-ink-gray-9"
         @click="copyToClipboard(lead.data.name)"
       >
         {{ __(lead.data.name) }}
@@ -108,7 +110,7 @@
             </div>
             <div class="flex flex-col gap-2.5 truncate">
               <Tooltip :text="lead.data.lead_name || __('Set first name')">
-                <div class="truncate text-2xl font-medium">
+                <div class="truncate text-2xl font-medium text-ink-gray-9">
                   {{ lead.data.lead_name || __('Untitled') }}
                 </div>
               </Tooltip>
@@ -221,7 +223,7 @@
     }"
   >
     <template #body-content>
-      <div class="mb-4 flex items-center gap-2 text-gray-600">
+      <div class="mb-4 flex items-center gap-2 text-ink-gray-5">
         <CustomersIcon class="h-4 w-4" />
         <label class="block text-base">{{ __('Customer') }}</label>
       </div>
@@ -248,7 +250,7 @@
         </div>
       </div>
 
-      <div class="mb-4 mt-6 flex items-center gap-2 text-gray-600">
+      <div class="mb-4 mt-6 flex items-center gap-2 text-ink-gray-5">
         <ContactsIcon class="h-4 w-4" />
         <label class="block text-base">{{ __('Contact') }}</label>
       </div>
@@ -423,7 +425,7 @@ function updateLead(fieldname, value, callback) {
       createToast({
         title: __('Lead updated'),
         icon: 'check',
-        iconClasses: 'text-green-600',
+        iconClasses: 'text-ink-green-3',
       })
       callback?.()
     },
@@ -432,7 +434,7 @@ function updateLead(fieldname, value, callback) {
         title: __('Error updating lead'),
         text: __(err.messages?.[0]),
         icon: 'x',
-        iconClasses: 'text-red-600',
+        iconClasses: 'text-ink-red-4',
       })
     },
   })
@@ -445,7 +447,7 @@ function validateRequired(fieldname, value) {
       title: __('Error Updating Lead'),
       text: __('{0} is a required field', [meta[fieldname].label]),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return true
   }
@@ -589,7 +591,7 @@ async function convertToOpportunity(updated) {
       title: __('Error'),
       text: __('Please select an existing contact'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return
   }
@@ -599,7 +601,7 @@ async function convertToOpportunity(updated) {
       title: __('Error'),
       text: __('Please select an existing customer'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return
   }
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 5622cce7a..6369e81b4 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -119,7 +119,7 @@
         >
           {{ getRow(itemName, titleField).label }}
         </div>
-        <div class="text-gray-500" v-else>{{ __('No Title') }}</div>
+        <div class="text-ink-gray-4" v-else>{{ __('No Title') }}</div>
       </div>
     </template>
     <template #fields="{ fieldName, itemName }">
@@ -198,7 +198,7 @@
     </template>
     <template #actions="{ itemName }">
       <div class="flex gap-2 items-center justify-between">
-        <div class="text-gray-600 flex items-center gap-1.5">
+        <div class="text-ink-gray-5 flex items-center gap-1.5">
           <EmailAtIcon class="h-4 w-4" />
           <span v-if="getRow(itemName, '_email_count').label">
             {{ getRow(itemName, '_email_count').label }}
@@ -252,7 +252,7 @@
   />
   <div v-else-if="leads.data" class="flex h-full items-center justify-center">
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <LeadsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Leads')]) }}</span>
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index 4b69f562b..9b90f8e73 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -112,14 +112,14 @@
       <template #tab="{ tab, selected }">
         <button
           v-if="tab.name == 'Opportunities'"
-          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-          :class="{ 'text-gray-900': selected }"
+          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-gray-400 hover:text-ink-gray-9"
+          :class="{ 'text-ink-gray-9': selected }"
         >
           <component v-if="tab.icon" :is="tab.icon" class="h-5" />
           {{ __(tab.label) }}
           <Badge
-            class="group-hover:bg-gray-900"
-            :class="[selected ? 'bg-gray-900' : 'bg-gray-600']"
+            class="group-hover:bg-surface-gray-7"
+            :class="[selected ? 'bg-surface-gray-7' : 'bg-gray-600']"
             variant="solid"
             theme="gray"
             size="sm"
@@ -162,7 +162,7 @@
         />
         <div
           v-if="tab.label === 'Opportunities' && !rows.length"
-          class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
+          class="grid flex-1 place-items-center text-xl font-medium text-ink-gray-4"
         >
           <div class="flex flex-col items-center justify-center space-y-3">
             <component :is="tab.icon" class="!h-10 !w-10" />
@@ -322,7 +322,7 @@ async function deleteContact() {
               title: __('Error'),
               text: errorMessage,
               icon: 'x',
-              iconClasses: 'text-red-600',
+              iconClasses: 'text-ink-red-4',
             });
           }
         },
@@ -527,7 +527,7 @@ async function setAsPrimary(field, value) {
     createToast({
       title: 'Contact updated',
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -544,7 +544,7 @@ async function createNew(field, value) {
     createToast({
       title: 'Contact updated',
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -561,7 +561,7 @@ async function editOption(doctype, name, fieldname, value) {
     createToast({
       title: 'Contact updated',
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -575,7 +575,7 @@ async function deleteOption(doctype, name) {
   createToast({
     title: 'Contact updated',
     icon: 'check',
-    iconClasses: 'text-green-600',
+    iconClasses: 'text-ink-green-3',
   })
 }
 
@@ -589,7 +589,7 @@ async function updateField(fieldname, value) {
   createToast({
     title: 'Contact updated',
     icon: 'check',
-    iconClasses: 'text-green-600',
+    iconClasses: 'text-ink-green-3',
   })
 
   contact.reload()
diff --git a/frontend/src/pages/MobileCustomer.vue b/frontend/src/pages/MobileCustomer.vue
index e9695ecc7..d91b53801 100644
--- a/frontend/src/pages/MobileCustomer.vue
+++ b/frontend/src/pages/MobileCustomer.vue
@@ -94,14 +94,14 @@
       <template #tab="{ tab, selected }">
         <button
           v-if="tab.name !== 'Details'"
-          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-          :class="{ 'text-gray-900': selected }"
+          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-gray-400 hover:text-ink-gray-9"
+          :class="{ 'text-ink-gray-9': selected }"
         >
           <component v-if="tab.icon" :is="tab.icon" class="h-5" />
           {{ __(tab.label) }}
           <Badge
-            class="group-hover:bg-gray-900"
-            :class="[selected ? 'bg-gray-900' : 'bg-gray-600']"
+            class="group-hover:bg-surface-gray-7"
+            :class="[selected ? 'bg-surface-gray-7' : 'bg-gray-600']"
             variant="solid"
             theme="gray"
             size="sm"
@@ -151,7 +151,7 @@
         />
         <div
           v-if="!rows.length && tab.name !== 'Details'"
-          class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
+          class="grid flex-1 place-items-center text-xl font-medium text-ink-gray-4"
         >
           <div class="flex flex-col items-center justify-center space-y-3">
             <component :is="tab.icon" class="!h-10 !w-10" />
@@ -231,7 +231,7 @@ async function updateField(fieldname, value) {
   createToast({
     title: __('Customer updated'),
     icon: 'check',
-    iconClasses: 'text-green-600',
+    iconClasses: 'text-ink-green-3',
   })
 }
 
@@ -316,7 +316,7 @@ async function deleteCustomer() {
               title: __('Error'),
               text: errorMessage,
               icon: 'x',
-              iconClasses: 'text-red-600',
+              iconClasses: 'text-ink-red-4',
             });
           }
         },
@@ -330,7 +330,7 @@ function openWebsite() {
     createToast({
       title: __('Website not found'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
   else window.open(customer.doc.website, '_blank')
 }
diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
index 2a9905ae1..c525efa86 100644
--- a/frontend/src/pages/MobileLead.vue
+++ b/frontend/src/pages/MobileLead.vue
@@ -118,7 +118,7 @@
     }"
   >
     <template #body-content>
-      <div class="mb-4 flex items-center gap-2 text-gray-600">
+      <div class="mb-4 flex items-center gap-2 text-ink-gray-5">
         <CustomersIcon class="h-4 w-4" />
         <label class="block text-base">{{ __('Customer') }}</label>
       </div>
@@ -145,7 +145,7 @@
         </div>
       </div>
 
-      <div class="mb-4 mt-6 flex items-center gap-2 text-gray-600">
+      <div class="mb-4 mt-6 flex items-center gap-2 text-ink-gray-5">
         <ContactsIcon class="h-4 w-4" />
         <label class="block text-base">{{ __('Contact') }}</label>
       </div>
@@ -285,7 +285,7 @@ function updateLead(fieldname, value, callback) {
       createToast({
         title: __('Lead updated'),
         icon: 'check',
-        iconClasses: 'text-green-600',
+        iconClasses: 'text-ink-green-3',
       })
       callback?.()
     },
@@ -294,7 +294,7 @@ function updateLead(fieldname, value, callback) {
         title: __('Error updating lead'),
         text: __(err.messages?.[0]),
         icon: 'x',
-        iconClasses: 'text-red-600',
+        iconClasses: 'text-ink-red-4',
       })
     },
   })
@@ -307,7 +307,7 @@ function validateRequired(fieldname, value) {
       title: __('Error Updating Lead'),
       text: __('{0} is a required field', [meta[fieldname].label]),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return true
   }
@@ -443,7 +443,7 @@ async function convertToOpportunity(updated) {
       title: __('Error'),
       text: __('Please select an existing contact'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return
   }
@@ -453,7 +453,7 @@ async function convertToOpportunity(updated) {
       title: __('Error'),
       text: __('Please select an existing customer'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return
   }
diff --git a/frontend/src/pages/MobileNotification.vue b/frontend/src/pages/MobileNotification.vue
index ee7669b38..7421a15cd 100644
--- a/frontend/src/pages/MobileNotification.vue
+++ b/frontend/src/pages/MobileNotification.vue
@@ -31,39 +31,39 @@
         v-for="n in notifications.data"
         :key="n.comment"
         :to="getRoute(n)"
-        class="flex cursor-pointer items-start gap-3 px-2.5 py-3 hover:bg-gray-100"
+        class="flex cursor-pointer items-start gap-3 px-2.5 py-3 hover:bg-surface-gray-2"
         @click="mark_doc_as_read(n.comment || n.notification_type_doc)"
       >
         <div class="mt-1 flex items-center gap-2.5">
           <div
             class="size-[5px] rounded-full"
-            :class="[n.read ? 'bg-transparent' : 'bg-gray-900']"
+            :class="[n.read ? 'bg-transparent' : 'bg-surface-gray-7']"
           />
           <WhatsAppIcon v-if="n.type == 'WhatsApp'" class="size-7" />
           <UserAvatar v-else :user="n.from_user.name" size="lg" />
         </div>
         <div>
           <div v-if="n.notification_text" v-html="n.notification_text" />
-          <div v-else class="mb-2 space-x-1 leading-5 text-gray-600">
-            <span class="font-medium text-gray-900">
+          <div v-else class="mb-2 space-x-1 leading-5 text-ink-gray-5">
+            <span class="font-medium text-ink-gray-9">
               {{ n.from_user.full_name }}
             </span>
             <span>
               {{ __('mentioned you in {0}', [n.reference_doctype]) }}
             </span>
-            <span class="font-medium text-gray-900">
+            <span class="font-medium text-ink-gray-9">
               {{ n.reference_name }}
             </span>
           </div>
-          <div class="text-sm text-gray-600">
+          <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(n.creation)) }}
           </div>
         </div>
       </RouterLink>
     </div>
     <div v-else class="flex flex-1 flex-col items-center justify-center gap-2">
-      <NotificationsIcon class="h-20 w-20 text-gray-300" />
-      <div class="text-lg font-medium text-gray-500">
+      <NotificationsIcon class="h-20 w-20 text-ink-gray-2" />
+      <div class="text-lg font-medium text-ink-gray-4">
         {{ __('No new notifications') }}
       </div>
     </div>
diff --git a/frontend/src/pages/MobileOpportunity.vue b/frontend/src/pages/MobileOpportunity.vue
index 59a52b631..018a9d8b7 100644
--- a/frontend/src/pages/MobileOpportunity.vue
+++ b/frontend/src/pages/MobileOpportunity.vue
@@ -110,7 +110,7 @@
                     v-if="
                       opportunityContacts?.loading && opportunityContacts?.data?.length == 0
                     "
-                    class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-gray-500"
+                    class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
                   >
                     <LoadingIndicator class="h-4 w-4" />
                     <span>{{ __('Loading...') }}</span>
@@ -127,7 +127,7 @@
                       <Section :is-opened="contact.opened">
                         <template #header="{ opened, toggle }">
                           <div
-                            class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-gray-700"
+                            class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
                           >
                             <div
                               class="flex h-7 items-center gap-2 truncate"
@@ -153,7 +153,7 @@
                               <Dropdown :options="contactOptions(contact.name)">
                                 <Button
                                   icon="more-horizontal"
-                                  class="text-gray-600"
+                                  class="text-ink-gray-5"
                                   variant="ghost"
                                 />
                               </Dropdown>
@@ -171,7 +171,7 @@
                               <Button variant="ghost" @click="toggle()">
                                 <FeatherIcon
                                   name="chevron-right"
-                                  class="h-4 w-4 text-gray-900 transition-all duration-300 ease-in-out"
+                                  class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
                                   :class="{ 'rotate-90': opened }"
                                 />
                               </Button>
@@ -179,7 +179,7 @@
                           </div>
                         </template>
                         <div
-                          class="flex flex-col gap-1.5 text-base text-gray-800"
+                          class="flex flex-col gap-1.5 text-base text-ink-gray-8"
                         >
                           <div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
                             <Email2Icon class="h-4 w-4" />
@@ -199,7 +199,7 @@
                   </div>
                   <div
                     v-else
-                    class="flex h-20 items-center justify-center text-base text-gray-600"
+                    class="flex h-20 items-center justify-center text-base text-ink-gray-5"
                   >
                     {{ __('No contacts added') }}
                   </div>
@@ -375,7 +375,7 @@ function updateOpportunity(fieldname, value, callback) {
       createToast({
         title: __('Opportunity updated'),
         icon: 'check',
-        iconClasses: 'text-green-600',
+        iconClasses: 'text-ink-green-3',
       })
       callback?.()
     },
@@ -384,7 +384,7 @@ function updateOpportunity(fieldname, value, callback) {
         title: __('Error updating opportunity'),
         text: __(err.messages?.[0]),
         icon: 'x',
-        iconClasses: 'text-red-600',
+        iconClasses: 'text-ink-red-4',
       })
     },
   })
@@ -397,7 +397,7 @@ function validateRequired(fieldname, value) {
       title: __('Error Updating Opportunity'),
       text: __('{0} is a required field', [meta[fieldname].label]),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return true
   }
@@ -546,7 +546,7 @@ async function addContact(contact) {
     createToast({
       title: __('Contact added'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -561,7 +561,7 @@ async function removeContact(contact) {
     createToast({
       title: __('Contact removed'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -576,7 +576,7 @@ async function setPrimaryContact(contact) {
     createToast({
       title: __('Primary contact set'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
diff --git a/frontend/src/pages/Notes.vue b/frontend/src/pages/Notes.vue
index 80e33c91f..5301dcbea 100644
--- a/frontend/src/pages/Notes.vue
+++ b/frontend/src/pages/Notes.vue
@@ -47,7 +47,7 @@
             <Button
               icon="more-horizontal"
               variant="ghosted"
-              class="hover:bg-white"
+              class="hover:bg-surface-white"
             />
           </Dropdown>
         </div>
@@ -55,18 +55,18 @@
           v-if="note.content"
           :content="note.content"
           :editable="false"
-          editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+          editor-class="!prose-sm max-w-none !text-sm text-ink-gray-5 focus:outline-none"
           class="flex-1 overflow-hidden"
         />
         <div class="mt-2 flex items-center justify-between gap-2">
           <div class="flex items-center gap-2">
             <UserAvatar :user="note.owner" size="xs" />
-            <div class="text-sm text-gray-800">
+            <div class="text-sm text-ink-gray-8">
               {{ getUser(note.owner).full_name }}
             </div>
           </div>
           <Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
-            <div class="text-sm text-gray-700">
+            <div class="text-sm text-ink-gray-7">
               {{ __(timeAgo(note.modified)) }}
             </div>
           </Tooltip>
@@ -86,7 +86,7 @@
   />
   <div v-else class="flex h-full items-center justify-center">
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <NoteIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Notes')]) }}</span>
diff --git a/frontend/src/pages/Opportunities.vue b/frontend/src/pages/Opportunities.vue
index 0caeca8a5..a702b75fd 100644
--- a/frontend/src/pages/Opportunities.vue
+++ b/frontend/src/pages/Opportunities.vue
@@ -103,7 +103,7 @@
         >
           {{ getRow(itemName, titleField).label }}
         </div>
-        <div class="text-gray-500" v-else>{{ __('No Title') }}</div>
+        <div class="text-ink-gray-4" v-else>{{ __('No Title') }}</div>
       </div>
     </template>
 
@@ -172,7 +172,7 @@
 
     <template #actions="{ itemName }">
       <div class="flex gap-2 items-center justify-between">
-        <div class="text-gray-600 flex items-center gap-1.5">
+        <div class="text-ink-gray-5 flex items-center gap-1.5">
           <EmailAtIcon class="h-4 w-4" />
           <span v-if="getRow(itemName, '_email_count').label">
             {{ getRow(itemName, '_email_count').label }}
@@ -226,7 +226,7 @@
   />
   <div v-else-if="opportunities.data" class="flex h-full items-center justify-center">
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <OpportunitiesIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Opportunities')]) }}</span>
diff --git a/frontend/src/pages/Opportunity.vue b/frontend/src/pages/Opportunity.vue
index 827273324..a28587e10 100644
--- a/frontend/src/pages/Opportunity.vue
+++ b/frontend/src/pages/Opportunity.vue
@@ -36,19 +36,21 @@
     </template>
   </LayoutHeader>
   <div v-if="opportunity.data" class="flex h-full overflow-hidden">
-    <Tabs v-model="tabIndex" :tabs="tabs">
-      <Activities
-        ref="activities"
-        doctype="Opportunity"
-        :tabs="tabs"
-        v-model:reload="reload"
-        v-model:tabIndex="tabIndex"
-        v-model="opportunity"
-      />
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
+      <template #tab-panel>
+        <Activities
+          ref="activities"
+          doctype="Opportunity"
+          :tabs="tabs"
+          v-model:reload="reload"
+          v-model:tabIndex="tabIndex"
+          v-model="opportunity"
+        />
+      </template>
     </Tabs>
     <Resizer side="right" class="flex flex-col justify-between border-l">
       <div
-        class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-medium"
+        class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-medium text-ink-gray-9"
         @click="copyToClipboard(opportunity.data.name)"
       >
         {{ __(opportunity.data.name) }}
@@ -64,7 +66,7 @@
             />
           </div>
         </Tooltip>
-        <div class="flex flex-col gap-2.5 truncate">
+        <div class="flex flex-col gap-2.5 truncat text-ink-gray-9">
           <Tooltip :text="customer.data?.name || __('Set an customer')">
             <div class="truncate text-2xl font-medium">
               {{ customer.data?.name || __('Untitled') }}
@@ -175,7 +177,7 @@
                   v-if="
                     opportunityContacts?.loading && opportunityContacts?.data?.length == 0
                   "
-                  class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-gray-500"
+                  class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
                 >
                   <LoadingIndicator class="h-4 w-4" />
                   <span>{{ __('Loading...') }}</span>
@@ -192,7 +194,7 @@
                     <Section :is-opened="contact.opened">
                       <template #header="{ opened, toggle }">
                         <div
-                          class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-gray-700"
+                          class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
                         >
                           <div
                             class="flex h-7 items-center gap-2 truncate"
@@ -218,7 +220,7 @@
                             <Dropdown :options="contactOptions(contact)">
                               <Button
                                 icon="more-horizontal"
-                                class="text-gray-600"
+                                class="text-ink-gray-5"
                                 variant="ghost"
                               />
                             </Dropdown>
@@ -236,7 +238,7 @@
                             <Button variant="ghost" @click="toggle()">
                               <FeatherIcon
                                 name="chevron-right"
-                                class="h-4 w-4 text-gray-900 transition-all duration-300 ease-in-out"
+                                class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
                                 :class="{ 'rotate-90': opened }"
                               />
                             </Button>
@@ -244,7 +246,7 @@
                         </div>
                       </template>
                       <div
-                        class="flex flex-col gap-1.5 text-base text-gray-800"
+                        class="flex flex-col gap-1.5 text-base text-ink-gray-8"
                       >
                         <div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
                           <Email2Icon class="h-4 w-4" />
@@ -264,7 +266,7 @@
                 </div>
                 <div
                   v-else
-                  class="flex h-20 items-center justify-center text-base text-gray-600"
+                  class="flex h-20 items-center justify-center text-base text-ink-gray-5"
                 >
                   {{ __('No contacts added') }}
                 </div>
@@ -435,7 +437,7 @@ onMounted(() => {
     createToast({
       title: __('Customer created successfully'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   })
 
@@ -477,7 +479,7 @@ function updateOpportunity(fieldname, value, callback) {
       createToast({
         title: __('Opportunity updated'),
         icon: 'check',
-        iconClasses: 'text-green-600',
+        iconClasses: 'text-ink-green-3',
       })
       callback?.()
     },
@@ -486,7 +488,7 @@ function updateOpportunity(fieldname, value, callback) {
         title: __('Error updating opportunity'),
         text: __(err.messages?.[0]),
         icon: 'x',
-        iconClasses: 'text-red-600',
+        iconClasses: 'text-ink-red-4',
       })
     },
   })
@@ -499,7 +501,7 @@ function validateRequired(fieldname, value) {
       title: __('Error Updating Opportunity'),
       text: __('{0} is a required field', [meta[fieldname].label]),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return true
   }
@@ -648,7 +650,7 @@ async function addContact(contact) {
     createToast({
       title: __('Contact added'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -663,7 +665,7 @@ async function removeContact(contact) {
     createToast({
       title: __('Contact removed'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -678,7 +680,7 @@ async function setPrimaryContact(contact) {
     createToast({
       title: __('Primary contact set'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
diff --git a/frontend/src/pages/ToDos.vue b/frontend/src/pages/ToDos.vue
index fd024f392..6b7ac73f7 100644
--- a/frontend/src/pages/ToDos.vue
+++ b/frontend/src/pages/ToDos.vue
@@ -65,7 +65,7 @@
         >
           {{ getRow(itemName, titleField).label }}
         </div>
-        <div class="text-gray-500" v-else>{{ __('No Title') }}</div>
+        <div class="text-ink-gray-4" v-else>{{ __('No Title') }}</div>
       </div>
     </template>
     <template #fields="{ fieldName, itemName }">
@@ -175,7 +175,7 @@
   />
   <div v-else-if="todos.data" class="flex h-full items-center justify-center">
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <Email2Icon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('ToDos')]) }}</span>
diff --git a/frontend/src/types/control.ts b/frontend/src/types/control.ts
new file mode 100644
index 000000000..a03489d2b
--- /dev/null
+++ b/frontend/src/types/control.ts
@@ -0,0 +1,49 @@
+export type FieldTypes =
+  | 'Data'
+  | 'Int'
+  | 'Float'
+  | 'Currency'
+  | 'Check'
+  | 'Text'
+  | 'Small Text'
+  | 'Long Text'
+  | 'Code'
+  | 'Text Editor'
+  | 'Date'
+  | 'Datetime'
+  | 'Time'
+  | 'HTML'
+  | 'Image'
+  | 'Attach'
+  | 'Select'
+  | 'Read Only'
+  | 'Section Break'
+  | 'Column Break'
+  | 'Table'
+  | 'Button'
+  | 'Link'
+  | 'Dynamic Link'
+  | 'Password'
+  | 'Signature'
+  | 'Color'
+  | 'Barcode'
+  | 'Geolocation'
+  | 'Duration'
+  | 'Percent'
+  | 'Rating'
+  | 'Icon'
+
+// Grid / Child Table
+export interface GridColumn {
+  label: string
+  fieldname: string
+  fieldtype: FieldTypes
+  options?: string | string[]
+  width?: number
+  onChange?: (value: string, index: number) => void
+}
+
+export interface GridRow {
+  name: string
+  [fieldname: string]: string | number | boolean
+}
\ No newline at end of file
diff --git a/frontend/src/utils/dialogs.jsx b/frontend/src/utils/dialogs.jsx
index 11836e22d..07cbf1832 100644
--- a/frontend/src/utils/dialogs.jsx
+++ b/frontend/src/utils/dialogs.jsx
@@ -16,7 +16,7 @@ export let Dialogs = {
           'body-content': () => {
             return [
               dialog.message && (
-                <p class="text-p-base text-gray-700">{dialog.message}</p>
+                <p class="text-p-base text-ink-gray-7">{dialog.message}</p>
               ),
               dialog.html && (
                 <div v-html={dialog.html} />
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 0e0ac64f1..6bcb1a3e6 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -291,3 +291,12 @@ export function isImage(extention) {
     extention.toLowerCase(),
   )
 }
+
+export function getRandom(len) {
+  let text = ''
+  const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
+  Array.from({ length: len }).forEach(() => {
+    text += possible.charAt(Math.floor(Math.random() * possible.length))
+  })
+  return text
+}
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index da6bf60a8..def9e9edc 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  presets: [require('frappe-ui/src/utils/tailwind.config')],
+  presets: [require('frappe-ui/src/tailwind/preset')],
   content: [
     './index.html',
     './src/**/*.{vue,js,ts,jsx,tsx}',
diff --git a/next_crm/api/comment.py b/next_crm/api/comment.py
index b917b645c..37fee3ded 100644
--- a/next_crm/api/comment.py
+++ b/next_crm/api/comment.py
@@ -32,10 +32,10 @@ def notify_mentions(doc):
             else reference_doc.customer or reference_doc.lead_name or None
         )
         notification_text = f"""
-            <div class="mb-2 leading-5 text-gray-600">
-                <span class="font-medium text-gray-900">{ owner }</span>
+            <div class="mb-2 leading-5 text-ink-gray-5">
+                <span class="font-medium text-ink-gray-9">{ owner }</span>
                 <span>{ _('mentioned you in {0}').format(doctype) }</span>
-                <span class="font-medium text-gray-900">{ name }</span>
+                <span class="font-medium text-ink-gray-9">{ name }</span>
             </div>
         """
         notify_user(
diff --git a/next_crm/api/todo.py b/next_crm/api/todo.py
index a4d1276d2..90eef563e 100644
--- a/next_crm/api/todo.py
+++ b/next_crm/api/todo.py
@@ -88,21 +88,21 @@ def get_notification_text(owner, doc, reference_doc, is_cancelled=False):
 
         if is_cancelled:
             return f"""
-				<div class="mb-2 leading-5 text-gray-600">
+				<div class="mb-2 leading-5 text-ink-gray-5">
 					<span>{ _('Your assignment on {0} {1} has been removed by {2}').format(
 						doctype,
-						f'<span class="font-medium text-gray-900">{ name }</span>',
-						f'<span class="font-medium text-gray-900">{ owner }</span>'
+						f'<span class="font-medium text-ink-gray-9">{ name }</span>',
+						f'<span class="font-medium text-ink-gray-9">{ owner }</span>'
 					) }</span>
 				</div>
 			"""
 
         return f"""
-			<div class="mb-2 leading-5 text-gray-600">
-				<span class="font-medium text-gray-900">{ owner }</span>
+			<div class="mb-2 leading-5 text-ink-gray-5">
+				<span class="font-medium text-ink-gray-9">{ owner }</span>
 				<span>{ _('assigned a {0} {1} to you').format(
 					doctype,
-					f'<span class="font-medium text-gray-900">{ name }</span>'
+					f'<span class="font-medium text-ink-gray-9">{ name }</span>'
 				) }</span>
 			</div>
 		"""
@@ -110,18 +110,18 @@ def get_notification_text(owner, doc, reference_doc, is_cancelled=False):
     if doctype == "ToDo":
         if is_cancelled:
             return f"""
-				<div class="mb-2 leading-5 text-gray-600">
+				<div class="mb-2 leading-5 text-ink-gray-5">
 					<span>{ _('Your assignment on ToDo {0} has been removed by {1}').format(
-						f'<span class="font-medium text-gray-900">{ reference_doc.title }</span>',
-						f'<span class="font-medium text-gray-900">{ owner }</span>'
+						f'<span class="font-medium text-ink-gray-9">{ reference_doc.title }</span>',
+						f'<span class="font-medium text-ink-gray-9">{ owner }</span>'
 					) }</span>
 				</div>
 			"""
         return f"""
-			<div class="mb-2 leading-5 text-gray-600">
-				<span class="font-medium text-gray-900">{ owner }</span>
+			<div class="mb-2 leading-5 text-ink-gray-5">
+				<span class="font-medium text-ink-gray-9">{ owner }</span>
 				<span>{ _('assigned a new ToDo {0} to you').format(
-					f'<span class="font-medium text-gray-900">{ reference_doc.title }</span>'
+					f'<span class="font-medium text-ink-gray-9">{ reference_doc.title }</span>'
 				) }</span>
 			</div>
 		"""
diff --git a/next_crm/api/whatsapp.py b/next_crm/api/whatsapp.py
index 1f4e0e344..c70df7229 100644
--- a/next_crm/api/whatsapp.py
+++ b/next_crm/api/whatsapp.py
@@ -32,10 +32,10 @@ def notify_agent(doc):
         if doctype.startswith("CRM "):
             doctype = doctype[4:].lower()
         notification_text = f"""
-            <div class="mb-2 leading-5 text-gray-600">
-                <span class="font-medium text-gray-900">{ _('You') }</span>
+            <div class="mb-2 leading-5 text-ink-gray-5">
+                <span class="font-medium text-ink-gray-9">{ _('You') }</span>
                 <span>{ _('received a whatsapp message in {0}').format(doctype) }</span>
-                <span class="font-medium text-gray-900">{ doc.reference_name }</span>
+                <span class="font-medium text-ink-gray-9">{ doc.reference_name }</span>
             </div>
         """
         assigned_users = get_assigned_users(doc.reference_doctype, doc.reference_name)
diff --git a/yarn.lock b/yarn.lock
index dbd4e56ca..56a49793d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2388,10 +2388,10 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-frappe-ui@^0.1.71:
-  version "0.1.95"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.95.tgz#8ba3f0415d5ecfea2385d0beec786ac17f3790c0"
-  integrity sha512-FcyWV92Q3+b4u40akc0P/EqP5aoDtr57ohVszREi+KY+HRzjn/+CGSv8UA5zDiMMnAuerLw3znfnzXMrn4wf9Q==
+frappe-ui@^0.1.94:
+  version "0.1.109"
+  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.109.tgz#4de34c6927c9f870240e5b8eaef9239cb33e9bb2"
+  integrity sha512-jrB3wX2fUvWlVCzFWzP6PDmn43xEHu4hiDhNSgfn0zJe8wD78XH3GFEoWwNbEsykw9QIZvNlpDV0oYGtfS+yvQ==
   dependencies:
     "@headlessui/vue" "^1.7.14"
     "@popperjs/core" "^2.11.2"
@@ -3938,6 +3938,7 @@ sourcemap-codec@^1.4.8:
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
 "string-width-cjs@npm:string-width@^4.2.0":
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4031,6 +4032,7 @@ stringify-object@^3.3.0:
     is-regexp "^1.0.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==