diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 00000000..90308884
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,5 @@
+{
+  "enabledPlugins": {
+    "frontend-design@claude-plugins-official": true
+  }
+}
diff --git a/resources/css/components/pace-loader.css b/resources/css/components/pace-loader.css
index 0ec870df..f71274ff 100644
--- a/resources/css/components/pace-loader.css
+++ b/resources/css/components/pace-loader.css
@@ -11,7 +11,7 @@
 }
 
 .pace .pace-progress {
-  background: #3f39ad;
+  background: var(--color-primary-600);
   position: fixed;
   z-index: 2000;
   top: 0;
@@ -26,7 +26,7 @@
   right: 0px;
   width: 100px;
   height: 100%;
-  box-shadow: 0 0 10px #5851d8, 0 0 5px #5851d8;
+  box-shadow: 0 0 10px var(--color-primary-500), 0 0 5px var(--color-primary-500);
   opacity: 1;
   transform: rotate(3deg) translate(0px, -4px);
 }
@@ -40,8 +40,8 @@
   width: 14px;
   height: 14px;
   border: solid 2px transparent;
-  border-top-color: #5851d8;
-  border-left-color: #5851d8;
+  border-top-color: var(--color-primary-500);
+  border-left-color: var(--color-primary-500);
   border-radius: 10px;
   animation: pace-spinner 400ms linear infinite;
 }
diff --git a/resources/css/invoiceshelf.css b/resources/css/invoiceshelf.css
index eb8a2b27..2a39ef7a 100644
--- a/resources/css/invoiceshelf.css
+++ b/resources/css/invoiceshelf.css
@@ -4,7 +4,6 @@
 @import "./components/pace-loader.css";
 @import "./components/v-tooltips.css";
 
-@plugin "@tailwindcss/forms";
 @plugin "@tailwindcss/typography";
 @plugin "tailwind-scrollbar";
 
@@ -25,6 +24,36 @@
   --color-primary-900: var(--color-primary-900);
   --color-primary-950: var(--color-primary-950);
   --color-black: #040405;
+
+  /* Semantic theme tokens */
+  --color-surface: var(--color-surface);
+  --color-surface-secondary: var(--color-surface-secondary);
+  --color-surface-tertiary: var(--color-surface-tertiary);
+  --color-surface-muted: var(--color-surface-muted);
+  --color-heading: var(--color-heading);
+  --color-body: var(--color-body);
+  --color-muted: var(--color-muted);
+  --color-subtle: var(--color-subtle);
+  --color-line-light: var(--color-line-light);
+  --color-line-default: var(--color-line-default);
+  --color-line-strong: var(--color-line-strong);
+  --color-hover: var(--color-hover);
+  --color-hover-strong: var(--color-hover-strong);
+
+  /* Status badge text */
+  --color-status-yellow: var(--color-status-yellow);
+  --color-status-green: var(--color-status-green);
+  --color-status-blue: var(--color-status-blue);
+  --color-status-red: var(--color-status-red);
+  --color-status-purple: var(--color-status-purple);
+
+  /* Alert colors */
+  --color-alert-warning-bg: var(--color-alert-warning-bg);
+  --color-alert-warning-text: var(--color-alert-warning-text);
+  --color-alert-error-bg: var(--color-alert-error-bg);
+  --color-alert-error-text: var(--color-alert-error-text);
+  --color-alert-success-bg: var(--color-alert-success-bg);
+  --color-alert-success-text: var(--color-alert-success-text);
 }
 
 @theme {
@@ -84,9 +113,101 @@
     src: url("$fonts/Poppins-SemiBold.ttf") format("truetype");
 }
 
+/* Form base styles (replaces @tailwindcss/forms) */
+@layer base {
+[type='text'],
+[type='email'],
+[type='url'],
+[type='password'],
+[type='number'],
+[type='date'],
+[type='datetime-local'],
+[type='month'],
+[type='search'],
+[type='tel'],
+[type='time'],
+[type='week'],
+[multiple],
+textarea,
+select {
+    @apply appearance-none bg-surface border border-line-default rounded-lg px-3 py-2 text-sm leading-6 text-heading;
+}
+
+[type='text']:focus,
+[type='email']:focus,
+[type='url']:focus,
+[type='password']:focus,
+[type='number']:focus,
+[type='date']:focus,
+[type='datetime-local']:focus,
+[type='month']:focus,
+[type='search']:focus,
+[type='tel']:focus,
+[type='time']:focus,
+[type='week']:focus,
+[multiple]:focus,
+textarea:focus,
+select:focus {
+    @apply outline-2 outline-transparent outline-offset-2 border-primary-500 ring-1 ring-primary-500;
+}
+
+select {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    @apply bg-no-repeat pr-10;
+    background-position: right 0.5rem center;
+    background-size: 1.5em 1.5em;
+}
+
+[type='checkbox'],
+[type='radio'] {
+    @apply appearance-none p-0 text-primary-500 bg-surface border border-line-strong inline-block align-middle select-none shrink-0 h-4 w-4;
+    background-origin: border-box;
+    print-color-adjust: exact;
+}
+
+[type='checkbox'] {
+    @apply rounded;
+}
+
+[type='radio'] {
+    @apply rounded-full;
+}
+
+[type='checkbox']:focus,
+[type='radio']:focus {
+    @apply outline-2 outline-transparent outline-offset-2;
+    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-500);
+}
+
+[type='checkbox']:checked,
+[type='radio']:checked {
+    @apply border-transparent bg-current bg-center bg-no-repeat;
+    background-size: 100% 100%;
+}
+
+[type='checkbox']:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type='radio']:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type='checkbox']:indeterminate {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+    @apply border-transparent bg-current bg-center bg-no-repeat;
+    background-size: 100% 100%;
+}
+
+::placeholder {
+    @apply text-subtle opacity-100;
+}
+} /* end @layer base */
+
 body {
     min-height: 100vh;
     min-height: -webkit-fill-available;
+    color: var(--color-heading);
 }
 
 html {
diff --git a/resources/css/themes.css b/resources/css/themes.css
index e911544e..9313cab8 100644
--- a/resources/css/themes.css
+++ b/resources/css/themes.css
@@ -10,4 +10,86 @@
     --color-primary-800: rgb(27, 3, 211);
     --color-primary-900: rgb(25, 5, 173);
     --color-primary-950: rgb(9, 0, 118);
+
+    /* Surfaces */
+    --color-surface: rgb(255, 255, 255);
+    --color-surface-secondary: rgb(249, 250, 251);
+    --color-surface-tertiary: rgb(243, 244, 246);
+    --color-surface-muted: rgb(229, 231, 235);
+
+    /* Text */
+    --color-heading: rgb(17, 24, 39);
+    --color-body: rgb(55, 65, 81);
+    --color-muted: rgb(107, 114, 128);
+    --color-subtle: rgb(156, 163, 175);
+
+    /* Borders */
+    --color-line-light: rgb(229, 231, 235);
+    --color-line-default: rgb(209, 213, 219);
+    --color-line-strong: rgb(185, 193, 204);
+
+    /* Hover */
+    --color-hover: rgb(249, 250, 251);
+    --color-hover-strong: rgb(243, 244, 246);
+
+    /* Status badge text */
+    --color-status-yellow: rgb(113, 63, 18);
+    --color-status-green: rgb(20, 83, 45);
+    --color-status-blue: rgb(30, 58, 138);
+    --color-status-red: rgb(127, 29, 29);
+    --color-status-purple: rgb(107, 33, 168);
+
+    /* Alert backgrounds & text */
+    --color-alert-warning-bg: rgb(254, 252, 232);
+    --color-alert-warning-text: rgb(133, 77, 14);
+    --color-alert-error-bg: rgb(254, 242, 242);
+    --color-alert-error-text: rgb(153, 27, 27);
+    --color-alert-success-bg: rgb(240, 253, 244);
+    --color-alert-success-text: rgb(22, 101, 52);
+}
+
+[data-theme="dark"] {
+    /* Surfaces — layered depth: tertiary (body) < secondary < surface (cards) */
+    --color-surface: rgb(30, 41, 59);
+    --color-surface-secondary: rgb(23, 33, 50);
+    --color-surface-tertiary: rgb(10, 18, 32);
+    --color-surface-muted: rgb(51, 65, 85);
+
+    /* Text */
+    --color-heading: rgb(241, 245, 249);
+    --color-body: rgb(203, 213, 225);
+    --color-muted: rgb(148, 163, 184);
+    --color-subtle: rgb(100, 116, 139);
+
+    /* Borders — brighter for visibility */
+    --color-line-light: rgb(51, 65, 85);
+    --color-line-default: rgb(80, 95, 115);
+    --color-line-strong: rgb(130, 145, 165);
+
+    /* Hover */
+    --color-hover: rgb(40, 52, 72);
+    --color-hover-strong: rgb(51, 65, 85);
+
+    /* Status badge text */
+    --color-status-yellow: rgb(253, 224, 71);
+    --color-status-green: rgb(134, 239, 172);
+    --color-status-blue: rgb(147, 197, 253);
+    --color-status-red: rgb(252, 165, 165);
+    --color-status-purple: rgb(216, 180, 254);
+
+    /* Alert backgrounds & text */
+    --color-alert-warning-bg: rgba(113, 63, 18, 0.2);
+    --color-alert-warning-text: rgb(253, 224, 71);
+    --color-alert-error-bg: rgba(127, 29, 29, 0.2);
+    --color-alert-error-text: rgb(252, 165, 165);
+    --color-alert-success-bg: rgba(20, 83, 45, 0.2);
+    --color-alert-success-text: rgb(134, 239, 172);
+
+    /* Primary adjustments for dark mode */
+    --color-primary-50: rgba(167, 170, 255, 0.15);
+    --color-primary-100: rgba(167, 170, 255, 0.25);
+    --color-primary-400: rgb(167, 170, 255);
+    --color-primary-500: rgb(140, 140, 255);
+    --color-primary-600: rgb(167, 170, 255);
+    --color-primary-700: rgb(190, 192, 255);
 }
diff --git a/resources/scripts/admin/components/CopyInputField.vue b/resources/scripts/admin/components/CopyInputField.vue
index 1227b63f..7e9512db 100644
--- a/resources/scripts/admin/components/CopyInputField.vue
+++ b/resources/scripts/admin/components/CopyInputField.vue
@@ -6,7 +6,7 @@
       px-4
       py-2
       rounded-lg
-      bg-gray-300/40
+      bg-surface-muted/40
       whitespace-nowrap
       flex-col
       mt-1
@@ -18,7 +18,7 @@
         pr-10
         text-sm
         font-medium
-        text-black
+        text-heading
         truncate
         select-all select-color
       "
diff --git a/resources/scripts/admin/components/SelectNotePopup.vue b/resources/scripts/admin/components/SelectNotePopup.vue
index a435e358..0cf7ed39 100644
--- a/resources/scripts/admin/components/SelectNotePopup.vue
+++ b/resources/scripts/admin/components/SelectNotePopup.vue
@@ -53,13 +53,13 @@
               ring-1 ring-black/5
             "
           >
-            <div class="relative grid bg-white">
+            <div class="relative grid bg-surface">
               <div class="relative p-4">
                 <BaseInput
                   v-model="textSearch"
                   :placeholder="$t('general.search')"
                   type="text"
-                  class="text-black"
+                  class="text-heading"
                 >
                 </BaseInput>
               </div>
@@ -75,9 +75,9 @@
                   class="
                     px-6
                     py-4
-                    border-b border-gray-200 border-solid
+                    border-b border-line-default border-solid
                     cursor-pointer
-                    hover:bg-gray-100 hover:cursor-pointer
+                    hover:bg-surface-tertiary hover:cursor-pointer
                     last:border-b-0
                   "
                   @click="selectNote(index, close)"
@@ -89,7 +89,7 @@
                         text-base
                         font-semibold
                         leading-tight
-                        text-gray-700
+                        text-body
                         cursor-pointer
                       "
                     >
@@ -98,8 +98,8 @@
                   </div>
                 </div>
               </div>
-              <div v-else class="flex justify-center p-5 text-gray-400">
-                <label class="text-base text-gray-500">
+              <div v-else class="flex justify-center p-5 text-subtle">
+                <label class="text-base text-muted">
                   {{ $t('general.no_note_found') }}
                 </label>
               </div>
@@ -115,7 +115,7 @@
                 w-full
                 px-2
                 py-3
-                bg-gray-200
+                bg-surface-muted
                 border-none
                 outline-hidden
               "
diff --git a/resources/scripts/admin/components/charts/LineChart.vue b/resources/scripts/admin/components/charts/LineChart.vue
index 800af781..0b6026f6 100644
--- a/resources/scripts/admin/components/charts/LineChart.vue
+++ b/resources/scripts/admin/components/charts/LineChart.vue
@@ -62,9 +62,23 @@ watchEffect(() => {
 
 onMounted(() => {
   let context = graph.value.getContext('2d')
+  const style = getComputedStyle(document.documentElement)
+  const gridColor = style.getPropertyValue('--color-line-light').trim() || 'rgba(0,0,0,0.1)'
+  const tickColor = style.getPropertyValue('--color-muted').trim() || '#6b7280'
+
   let options = reactive({
     responsive: true,
     maintainAspectRatio: false,
+    scales: {
+      x: {
+        grid: { color: gridColor },
+        ticks: { color: tickColor },
+      },
+      y: {
+        grid: { color: gridColor },
+        ticks: { color: tickColor },
+      },
+    },
     plugins: {
       tooltip: {
         enabled: true,
@@ -91,16 +105,16 @@ onMounted(() => {
         fill: false,
         tension: 0.3,
         backgroundColor: 'rgba(230, 254, 249)',
-        borderColor: '#040405',
+        borderColor: tickColor,
         borderCapStyle: 'butt',
         borderDash: [],
         borderDashOffset: 0.0,
         borderJoinStyle: 'miter',
-        pointBorderColor: '#040405',
-        pointBackgroundColor: '#fff',
+        pointBorderColor: tickColor,
+        pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
         pointBorderWidth: 1,
         pointHoverRadius: 5,
-        pointHoverBackgroundColor: '#040405',
+        pointHoverBackgroundColor: tickColor,
         pointHoverBorderColor: 'rgba(220,220,220,1)',
         pointHoverBorderWidth: 2,
         pointRadius: 4,
@@ -118,7 +132,7 @@ onMounted(() => {
         borderDashOffset: 0.0,
         borderJoinStyle: 'miter',
         pointBorderColor: 'rgb(2, 201, 156)',
-        pointBackgroundColor: '#fff',
+        pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
         pointBorderWidth: 1,
         pointHoverRadius: 5,
         pointHoverBackgroundColor: 'rgb(2, 201, 156)',
@@ -139,7 +153,7 @@ onMounted(() => {
         borderDashOffset: 0.0,
         borderJoinStyle: 'miter',
         pointBorderColor: 'rgb(255,0,0)',
-        pointBackgroundColor: '#fff',
+        pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
         pointBorderWidth: 1,
         pointHoverRadius: 5,
         pointHoverBackgroundColor: 'rgb(255,0,0)',
@@ -160,7 +174,7 @@ onMounted(() => {
         borderDashOffset: 0.0,
         borderJoinStyle: 'miter',
         pointBorderColor: 'rgba(88, 81, 216, 1)',
-        pointBackgroundColor: '#fff',
+        pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
         pointBorderWidth: 1,
         pointHoverRadius: 5,
         pointHoverBackgroundColor: 'rgba(88, 81, 216, 1)',
diff --git a/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue b/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
index a2bbd0f1..9b059f90 100644
--- a/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
+++ b/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
@@ -3,7 +3,7 @@
     <h6 class="font-medium text-lg text-left">
       {{ $t('settings.exchange_rate.title') }}
     </h6>
-    <p class="mt-2 text-sm leading-snug text-gray-500" style="max-width: 680px">
+    <p class="mt-2 text-sm leading-snug text-muted" style="max-width: 680px">
       {{
         $t('settings.exchange_rate.description', {
           currency: companyStore.selectedCompanyCurrency.name,
@@ -34,12 +34,12 @@
               @input="v.exchange_rate.$touch()"
             >
               <template #right>
-                <span class="text-gray-500 sm:text-sm">
+                <span class="text-muted sm:text-sm">
                   {{ companyStore.selectedCompanyCurrency.code }}
                 </span>
               </template>
             </BaseInput>
-            <span class="text-gray-400 text-xs mt-2 font-light">
+            <span class="text-subtle text-xs mt-2 font-light">
               {{
                 $t('settings.exchange_rate.exchange_help_text', {
                   currency: c.code,
diff --git a/resources/scripts/admin/components/dropdowns/AdminCompanyIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/AdminCompanyIndexDropdown.vue
index f5f72ede..1afadbed 100644
--- a/resources/scripts/admin/components/dropdowns/AdminCompanyIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/AdminCompanyIndexDropdown.vue
@@ -1,14 +1,14 @@
 <template>
   <BaseDropdown>
     <template #activator>
-      <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <router-link :to="`/admin/administration/companies/${row.id}/edit`">
       <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/AdminUserIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/AdminUserIndexDropdown.vue
index d212a176..ffcfc8b1 100644
--- a/resources/scripts/admin/components/dropdowns/AdminUserIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/AdminUserIndexDropdown.vue
@@ -1,14 +1,14 @@
 <template>
   <BaseDropdown>
     <template #activator>
-      <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <router-link :to="`/admin/administration/users/${row.id}/edit`">
       <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -20,7 +20,7 @@
     >
       <BaseIcon
         name="ArrowRightEndOnRectangleIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('administration.users.impersonate') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
index 61721269..bdd76d0b 100644
--- a/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseDropdown>
     <template #activator>
-      <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <!-- edit customField  -->
@@ -11,7 +11,7 @@
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -23,7 +23,7 @@
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
index e9cc7611..baade448 100644
--- a/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
@@ -4,7 +4,7 @@
       <BaseButton v-if="route.name === 'customers.view'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <!-- Edit Customer  -->
@@ -15,7 +15,7 @@
       <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -32,7 +32,7 @@
       <BaseDropdownItem>
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -45,7 +45,7 @@
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
index ea68e6e4..6ee39ab2 100644
--- a/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
@@ -4,7 +4,7 @@
       <BaseButton v-if="route.name === 'estimates.view'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="text-white" />
       </BaseButton>
-      <BaseIcon v-else class="text-gray-500" name="EllipsisHorizontalIcon" />
+      <BaseIcon v-else class="text-muted" name="EllipsisHorizontalIcon" />
     </template>
 
     <!-- Copy PDF url  -->
@@ -14,7 +14,7 @@
     >
       <BaseIcon
         name="LinkIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.copy_pdf_url') }}
     </BaseDropdownItem>
@@ -27,7 +27,7 @@
       <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -40,7 +40,7 @@
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
@@ -56,7 +56,7 @@
       <BaseDropdownItem>
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -69,7 +69,7 @@
     >
       <BaseIcon
         name="DocumentTextIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('estimates.clone_estimate') }}
     </BaseDropdownItem>
@@ -81,7 +81,7 @@
     >
       <BaseIcon
         name="DocumentTextIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('estimates.convert_to_invoice') }}
     </BaseDropdownItem>
@@ -97,7 +97,7 @@
     >
       <BaseIcon
         name="CheckCircleIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('estimates.mark_as_sent') }}
     </BaseDropdownItem>
@@ -113,7 +113,7 @@
     >
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('estimates.send_estimate') }}
     </BaseDropdownItem>
@@ -122,7 +122,7 @@
     <BaseDropdownItem v-if="canResendEstimate(row)" @click="sendEstimate(row)">
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('estimates.resend_estimate') }}
     </BaseDropdownItem>
@@ -137,7 +137,7 @@
     >
       <BaseIcon
         name="CheckCircleIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('estimates.mark_as_accepted') }}
     </BaseDropdownItem>
@@ -152,7 +152,7 @@
     >
       <BaseIcon
         name="XCircleIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('estimates.mark_as_rejected') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
index c6d6d43f..d24887f9 100644
--- a/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
@@ -7,7 +7,7 @@
       >
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <!-- edit expenseCategory  -->
@@ -17,7 +17,7 @@
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -29,7 +29,7 @@
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
index 74ea564a..ef65ffa7 100644
--- a/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
@@ -4,7 +4,7 @@
       <BaseButton v-if="route.name === 'expenses.view'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <!-- edit expense  -->
@@ -15,7 +15,7 @@
       <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -28,7 +28,7 @@
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
index cab20230..0db6d0fb 100755
--- a/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
@@ -4,7 +4,7 @@
       <BaseButton v-if="route.name === 'invoices.view'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <!-- Edit Invoice  -->
@@ -15,7 +15,7 @@
       <BaseDropdownItem v-show="row.allow_edit">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -25,7 +25,7 @@
     <BaseDropdownItem v-if="route.name === 'invoices.view'" @click="copyPdfUrl">
       <BaseIcon
         name="LinkIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.copy_pdf_url') }}
     </BaseDropdownItem>
@@ -41,7 +41,7 @@
       <BaseDropdownItem>
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -51,7 +51,7 @@
     <BaseDropdownItem v-if="canSendInvoice(row)" @click="sendInvoice(row)">
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('invoices.send_invoice') }}
     </BaseDropdownItem>
@@ -60,7 +60,7 @@
     <BaseDropdownItem v-if="canReSendInvoice(row)" @click="sendInvoice(row)">
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('invoices.resend_invoice') }}
     </BaseDropdownItem>
@@ -72,7 +72,7 @@
       >
         <BaseIcon
           name="CreditCardIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('invoices.record_payment') }}
       </BaseDropdownItem>
@@ -82,7 +82,7 @@
     <BaseDropdownItem v-if="canSendInvoice(row)" @click="onMarkAsSent(row.id)">
       <BaseIcon
         name="CheckCircleIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('invoices.mark_as_sent') }}
     </BaseDropdownItem>
@@ -94,7 +94,7 @@
     >
       <BaseIcon
         name="DocumentTextIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('invoices.clone_invoice') }}
     </BaseDropdownItem>
@@ -106,7 +106,7 @@
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
index c048e79c..0abc691b 100644
--- a/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
@@ -4,7 +4,7 @@
       <BaseButton v-if="route.name === 'items.view'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <!-- edit item  -->
@@ -15,7 +15,7 @@
       <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -28,7 +28,7 @@
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/MemberIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/MemberIndexDropdown.vue
index dccc996e..e02838ee 100644
--- a/resources/scripts/admin/components/dropdowns/MemberIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/MemberIndexDropdown.vue
@@ -4,7 +4,7 @@
       <BaseButton v-if="route.name === 'members.view'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <!-- edit user  -->
@@ -12,7 +12,7 @@
       <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -22,7 +22,7 @@
     <BaseDropdownItem @click="removeUser(row.id)">
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
index 651b253a..bb51920e 100644
--- a/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
@@ -4,7 +4,7 @@
       <BaseButton v-if="route.name === 'notes.view'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <!-- edit note  -->
@@ -14,7 +14,7 @@
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -26,7 +26,7 @@
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
index f256875e..540ae5c8 100644
--- a/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
@@ -4,7 +4,7 @@
       <BaseButton v-if="route.name === 'payments.view'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <!-- Copy pdf url  -->
@@ -18,7 +18,7 @@
     >
       <BaseIcon
         name="LinkIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.copy_pdf_url') }}
     </BaseDropdown-item>
@@ -31,7 +31,7 @@
       <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -48,7 +48,7 @@
       <BaseDropdownItem>
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -65,7 +65,7 @@
     >
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('payments.send_payment') }}
     </BaseDropdownItem>
@@ -77,7 +77,7 @@
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
index 5402ca2f..1e308ad9 100644
--- a/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
@@ -4,14 +4,14 @@
       <BaseButton v-if="route.name === 'paymentModes.view'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <!-- edit paymentMode  -->
     <BaseDropdownItem @click="editPaymentMode(row.id)">
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -20,7 +20,7 @@
     <BaseDropdownItem @click="removePaymentMode(row.id)">
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
index 6da6db96..2aaf52df 100644
--- a/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
@@ -7,7 +7,7 @@
       >
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <!-- Edit Recurring Invoice  -->
@@ -18,7 +18,7 @@
       <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -35,7 +35,7 @@
       <BaseDropdownItem>
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -48,7 +48,7 @@
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
index 865fcdb9..e54fbd9e 100644
--- a/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
@@ -4,7 +4,7 @@
       <BaseButton v-if="route.name === 'roles.view'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <!-- edit role  -->
@@ -14,7 +14,7 @@
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -26,7 +26,7 @@
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
index 96cc8133..ba8c1654 100644
--- a/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
@@ -4,7 +4,7 @@
       <BaseButton v-if="route.name === 'tax-types.view'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
     </template>
 
     <!-- edit tax-type  -->
@@ -14,7 +14,7 @@
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -26,7 +26,7 @@
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
index f0d971c1..4f0b42c5 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
@@ -1,5 +1,5 @@
 <template>
-  <tr class="box-border bg-white border border-gray-200 border-solid rounded-b">
+  <tr class="box-border bg-surface border-b border-line-light">
     <td colspan="5" class="p-0 text-left align-top">
       <table class="w-full">
         <colgroup>
@@ -17,7 +17,7 @@
             <td class="px-5 py-4 text-left align-top">
               <div class="flex justify-start">
                 <div
-                  class="flex items-center justify-center w-5 h-5 mt-2 mr-2 text-gray-300 cursor-move  handle"
+                  class="flex items-center justify-center w-5 h-5 mt-2 mr-2 text-subtle cursor-move  handle"
                 >
                   <DragIcon />
                 </div>
@@ -96,7 +96,7 @@
 
                           <BaseIcon
                             name="ChevronDownIcon"
-                            class="w-4 h-4 ml-1 text-gray-500"
+                            class="w-4 h-4 ml-1 text-muted"
                           />
                         </span>
                       </BaseButton>
@@ -129,7 +129,7 @@
                 <div class="flex items-center justify-center w-6 h-10 mx-2">
                   <BaseIcon
                     v-if="showRemoveButton"
-                    class="h-5 text-gray-700 cursor-pointer"
+                    class="h-5 text-body cursor-pointer"
                     name="TrashIcon"
                     @click="store.removeItem(index)"
                   />
@@ -143,7 +143,7 @@
               <BaseContentPlaceholders v-if="loading">
                 <BaseContentPlaceholdersText
                   :lines="1"
-                  class="w-24 h-8 border border-gray-200 rounded-md"
+                  class="w-24 h-8 border border-line-light rounded-md"
                 />
               </BaseContentPlaceholders>
 
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
index 1d262f55..3613e1ee 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
@@ -42,7 +42,7 @@
         <template v-if="userStore.hasAbilities(ability)" #action>
           <button
             type="button"
-            class="flex items-center justify-center w-full px-2 py-2 bg-gray-200 border-none outline-hidden cursor-pointer "
+            class="flex items-center justify-center w-full px-2 py-2 bg-surface-muted border-none outline-hidden cursor-pointer "
             @click="openTaxModal"
           >
             <BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
@@ -65,7 +65,7 @@
       <BaseIcon
         v-if="taxes.length && index !== taxes.length - 1"
         name="TrashIcon"
-        class="h-5 text-gray-700 cursor-pointer"
+        class="h-5 text-body cursor-pointer"
         @click="removeTax(index)"
       />
     </div>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
index 8fe0d3cf..40d38244 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
@@ -1,4 +1,5 @@
 <template>
+  <div class="rounded-xl border border-line-light shadow overflow-hidden bg-surface">
   <!-- Tax Included -->
   <div
     v-if="companyStore.selectedCompanySettings.tax_included === 'YES'"
@@ -9,10 +10,10 @@
       w-full
       px-6
       text-base
-      border border-b-0 border-gray-200 border-solid
+      border-b border-line-light
       cursor-pointer
       text-primary-400
-      bg-white
+      bg-surface
     "
   >
     <BaseSwitchSection
@@ -33,7 +34,7 @@
       />
       <col style="width: 15%; min-width: 120px" />
     </colgroup>
-    <thead class="bg-white border border-gray-200 border-solid">
+    <thead class="bg-surface-secondary border-b border-line-light">
       <tr>
         <th
           class="
@@ -43,8 +44,8 @@
             not-italic
             font-medium
             leading-5
-            text-left text-gray-700
-            border-t border-b border-gray-200 border-solid
+            text-left text-body
+            
           "
         >
           <BaseContentPlaceholders v-if="isLoading">
@@ -62,8 +63,8 @@
             not-italic
             font-medium
             leading-5
-            text-right text-gray-700
-            border-t border-b border-gray-200 border-solid
+            text-right text-body
+            
           "
         >
           <BaseContentPlaceholders v-if="isLoading">
@@ -81,8 +82,8 @@
             not-italic
             font-medium
             leading-5
-            text-left text-gray-700
-            border-t border-b border-gray-200 border-solid
+            text-left text-body
+            
           "
         >
           <BaseContentPlaceholders v-if="isLoading">
@@ -101,8 +102,8 @@
             not-italic
             font-medium
             leading-5
-            text-left text-gray-700
-            border-t border-b border-gray-200 border-solid
+            text-left text-body
+            
           "
         >
           <BaseContentPlaceholders v-if="isLoading">
@@ -120,8 +121,8 @@
             not-italic
             font-medium
             leading-5
-            text-right text-gray-700
-            border-t border-b border-gray-200 border-solid
+            text-right text-body
+            
           "
         >
           <BaseContentPlaceholders v-if="isLoading">
@@ -164,7 +165,7 @@
       px-6
       py-3
       text-base
-      border border-t-0 border-gray-200 border-solid
+      border-t border-line-light
       cursor-pointer
       text-primary-400
       hover:bg-primary-100
@@ -174,6 +175,7 @@
     <BaseIcon name="PlusCircleIcon" class="mr-2" />
     {{ $t('general.add_new_item') }}
   </div>
+  </div><!-- end rounded wrapper -->
 </template>
 
 <script setup>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
index abdce0bf..4f002adf 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
@@ -5,7 +5,7 @@
     >
       <SelectNotePopup :type="type" @select="onSelectNote" />
     </div>
-    <label class="text-gray-800 font-medium mb-4 text-sm">
+    <label class="text-heading font-medium mb-4 text-sm">
       {{ $t('invoices.notes') }}
     </label>
     <BaseCustomInput
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
index cb26a32c..f8dcf578 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
@@ -4,9 +4,9 @@
       px-5
       py-4
       mt-6
-      bg-white
-      border border-gray-200 border-solid
-      rounded
+      bg-surface
+      border border-line-light border-solid
+      rounded-xl shadow
       md:min-w-[390px]
       min-w-[300px]
       lg:mt-7
@@ -18,7 +18,7 @@
       </BaseContentPlaceholders>
       <label
         v-else
-        class="text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class="text-sm font-semibold leading-5 text-subtle uppercase"
       >
         {{ $t('estimates.sub_total') }}
       </label>
@@ -29,7 +29,7 @@
 
       <label
         v-else
-        class="flex items-center justify-center m-0 text-lg text-black uppercase "
+        class="flex items-center justify-center m-0 text-lg text-heading uppercase "
       >
         <BaseFormatMoney
           :amount="store.getSubTotal"
@@ -59,7 +59,7 @@
       </BaseContentPlaceholders>
       <label
         v-else-if="store[storeProp].tax_per_item === 'YES'"
-        class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase"
+        class="m-0 text-sm font-semibold leading-5 text-muted uppercase"
       >
         <template v-if="tax.calculation_type === 'percentage'">
           {{ tax.name }} - {{ tax.percent }}%
@@ -75,7 +75,7 @@
 
       <label
         v-else-if="store[storeProp].tax_per_item === 'YES'"
-        class="flex items-center justify-center m-0 text-lg text-black uppercase "
+        class="flex items-center justify-center m-0 text-lg text-heading uppercase "
       >
         <BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
       </label>
@@ -93,14 +93,14 @@
       </BaseContentPlaceholders>
       <label
         v-else
-        class="text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class="text-sm font-semibold leading-5 text-subtle uppercase"
       >
         {{ $t('estimates.discount') }}
       </label>
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText
           :lines="1"
-          class="w-24 h-8 border border-gray-200 rounded-md"
+          class="w-24 h-8 border border-line-light rounded-md"
         />
       </BaseContentPlaceholders>
       <div v-else class="flex" style="width: 140px" role="group">
@@ -129,7 +129,7 @@
 
                 <BaseIcon
                   name="ChevronDownIcon"
-                  class="w-4 h-4 ml-1 text-gray-500"
+                  class="w-4 h-4 ml-1 text-muted"
                 />
               </span>
             </BaseButton>
@@ -198,14 +198,14 @@
     </div>
 
     <div
-      class="flex items-center justify-between w-full pt-2 mt-5 border-t border-gray-200 border-solid "
+      class="flex items-center justify-between w-full pt-2 mt-5 border-t border-line-light border-solid "
     >
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
       <label
         v-else
-        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class="m-0 text-sm font-semibold leading-5 text-subtle uppercase"
         >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
       >
 
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
index 585b764c..49a35db4 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="flex items-center justify-between w-full mt-2 text-sm">
-    <label v-if="tax.calculation_type === 'percentage'" class="font-semibold leading-5 text-gray-500 uppercase">
+    <label v-if="tax.calculation_type === 'percentage'" class="font-semibold leading-5 text-muted uppercase">
       {{ tax.name }} ({{ tax.percent }} %)
     </label>
-    <label v-else class="font-semibold leading-5 text-gray-500 uppercase">
+    <label v-else class="font-semibold leading-5 text-muted uppercase">
       {{ tax.name }} (<BaseFormatMoney :amount="tax.fixed_amount" :currency="currency" />)
     </label>
-    <label class="flex items-center justify-center text-lg text-black">
+    <label class="flex items-center justify-center text-lg text-heading">
       <BaseFormatMoney :amount="tax.amount" :currency="currency" />
 
       <BaseIcon
diff --git a/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue b/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue
index ff620b76..dc1c8b7d 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue
@@ -28,12 +28,12 @@
       @input="v.exchange_rate.$touch()"
     >
       <template #right>
-        <span class="text-gray-500 sm:text-sm">
+        <span class="text-muted sm:text-sm">
           {{ companyCurrency.code }}
         </span>
       </template>
     </BaseInput>
-    <span class="text-gray-400 text-xs mt-2 font-light">
+    <span class="text-subtle text-xs mt-2 font-light">
       {{
         $t('settings.exchange_rate.exchange_help_text', {
           currency: selectedCurrency.code,
diff --git a/resources/scripts/admin/components/estimate-invoice-common/NetTotal.vue b/resources/scripts/admin/components/estimate-invoice-common/NetTotal.vue
index af3ab5c0..175f3d88 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/NetTotal.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/NetTotal.vue
@@ -8,7 +8,7 @@
     </BaseContentPlaceholders>
     <label
       v-else
-      class="text-sm font-semibold leading-5 text-gray-500 uppercase"
+      class="text-sm font-semibold leading-5 text-muted uppercase"
     >
       {{ $t('estimates.net_total') }}
     </label>
@@ -19,7 +19,7 @@
 
     <label
       v-else
-      class="flex items-center justify-center m-0 text-lg text-black uppercase "
+      class="flex items-center justify-center m-0 text-lg text-heading uppercase "
     >
       <BaseFormatMoney
         :amount="store.getNetTotal"
diff --git a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue b/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
index 0ff1d604..632253b5 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
@@ -44,13 +44,13 @@
             >
               <!-- Tax Search Input  -->
 
-              <div class="relative bg-white">
+              <div class="relative bg-surface">
                 <div class="relative p-4">
                   <BaseInput
                     v-model="textSearch"
                     :placeholder="$t('general.search')"
                     type="text"
-                    class="text-black"
+                    class="text-heading"
                   >
                   </BaseInput>
                 </div>
@@ -64,14 +64,14 @@
                     overflow-auto
                     list
                     max-h-36
-                    border-t border-gray-200
+                    border-t border-line-default
                   "
                 >
                   <div
                     v-for="(taxType, index) in filteredTaxType"
                     :key="index"
                     :class="{
-                      'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none':
+                      'bg-surface-tertiary cursor-not-allowed opacity-50 pointer-events-none':
                         taxes.find((val) => {
                           return val.tax_type_id === taxType.id
                         }),
@@ -80,9 +80,9 @@
                     class="
                       px-6
                       py-4
-                      border-b border-gray-200 border-solid
+                      border-b border-line-default border-solid
                       cursor-pointer
-                      hover:bg-gray-100 hover:cursor-pointer
+                      hover:bg-surface-tertiary hover:cursor-pointer
                       last:border-b-0
                     "
                     @click="selectTaxType(taxType, close)"
@@ -94,7 +94,7 @@
                           text-base
                           font-semibold
                           leading-tight
-                          text-gray-700
+                          text-body
                           cursor-pointer
                         "
                       >
@@ -106,7 +106,7 @@
                           m-0
                           text-base
                           font-semibold
-                          text-gray-700
+                          text-body
                           cursor-pointer
                         "
                       >
@@ -121,8 +121,8 @@
                   </div>
                 </div>
 
-                <div v-else class="flex justify-center p-5 text-gray-400">
-                  <label class="text-base text-gray-500 cursor-pointer">
+                <div v-else class="flex justify-center p-5 text-subtle">
+                  <label class="text-base text-muted cursor-pointer">
                     {{ $t('general.no_tax_found') }}
                   </label>
                 </div>
@@ -140,7 +140,7 @@
                   h-10
                   px-2
                   py-3
-                  bg-gray-200
+                  bg-surface-muted
                   border-none
                   outline-hidden
                 "
diff --git a/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue b/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
index c85f2916..3b48ab74 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <label class="flex text-gray-800 font-medium text-sm mb-2">
+    <label class="flex text-heading font-medium text-sm mb-2">
       {{ $t('general.select_template') }}
       <span class="text-sm text-red-500"> *</span>
     </label>
     <BaseButton
       type="button"
-      class="flex justify-center w-full text-sm lg:w-auto hover:bg-gray-200"
+      class="flex justify-center w-full text-sm lg:w-auto hover:bg-surface-muted"
       variant="gray"
       @click="openTemplateModal"
     >
diff --git a/resources/scripts/admin/components/modal-components/BackupModal.vue b/resources/scripts/admin/components/modal-components/BackupModal.vue
index 2ef922ce..28e92773 100644
--- a/resources/scripts/admin/components/modal-components/BackupModal.vue
+++ b/resources/scripts/admin/components/modal-components/BackupModal.vue
@@ -5,7 +5,7 @@
         {{ modalStore.title }}
         <BaseIcon
           name="XMarkIcon"
-          class="w-6 h-6 text-gray-500 cursor-pointer"
+          class="w-6 h-6 text-muted cursor-pointer"
           @click="onCancel"
         />
       </div>
@@ -58,7 +58,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
       >
         <BaseButton
           class="mr-3"
diff --git a/resources/scripts/admin/components/modal-components/CategoryModal.vue b/resources/scripts/admin/components/modal-components/CategoryModal.vue
index 6b6bc5e6..5134deb9 100644
--- a/resources/scripts/admin/components/modal-components/CategoryModal.vue
+++ b/resources/scripts/admin/components/modal-components/CategoryModal.vue
@@ -5,7 +5,7 @@
         {{ modalStore.title }}
         <BaseIcon
           name="XMarkIcon"
-          class="w-6 h-6 text-gray-500 cursor-pointer"
+          class="w-6 h-6 text-muted cursor-pointer"
           @click="closeCategoryModal"
         />
       </div>
@@ -53,7 +53,7 @@
           flex
           justify-end
           p-4
-          border-t border-gray-200 border-solid
+          border-t border-line-default border-solid
         "
       >
         <BaseButton
diff --git a/resources/scripts/admin/components/modal-components/CompanyModal.vue b/resources/scripts/admin/components/modal-components/CompanyModal.vue
index 9346f160..0b1f9003 100644
--- a/resources/scripts/admin/components/modal-components/CompanyModal.vue
+++ b/resources/scripts/admin/components/modal-components/CompanyModal.vue
@@ -6,7 +6,7 @@
 
         <BaseIcon
           name="XMarkIcon"
-          class="w-6 h-6 text-gray-500 cursor-pointer"
+          class="w-6 h-6 text-muted cursor-pointer"
           @click="closeCompanyModal"
         />
       </div>
@@ -98,7 +98,7 @@
         </BaseInputGrid>
       </div>
 
-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-t border-gray-200">
+      <div class="z-0 flex justify-end p-4 bg-surface-secondary border-t border-line-default">
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
diff --git a/resources/scripts/admin/components/modal-components/CustomerModal.vue b/resources/scripts/admin/components/modal-components/CustomerModal.vue
index ec034045..38530adf 100644
--- a/resources/scripts/admin/components/modal-components/CustomerModal.vue
+++ b/resources/scripts/admin/components/modal-components/CustomerModal.vue
@@ -10,7 +10,7 @@
 
         <BaseIcon
           name="XMarkIcon"
-          class="h-6 w-6 text-gray-500 cursor-pointer"
+          class="h-6 w-6 text-muted cursor-pointer"
           @click="closeCustomerModal"
         />
       </div>
@@ -131,7 +131,7 @@
           <BaseTab :title="$t('customers.portal_access')">
             <BaseInputGrid class="col-span-5 lg:col-span-4">
               <div class="md:col-span-2">
-                <p class="text-sm text-gray-500">
+                <p class="text-sm text-muted">
                   {{ $t('customers.portal_access_text') }}
                 </p>
 
@@ -168,7 +168,7 @@
                   <template #right>
                     <BaseIcon
                       :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                      class="mr-1 text-gray-500 cursor-pointer"
+                      class="mr-1 text-muted cursor-pointer"
                       @click="isShowPassword = !isShowPassword"
                     />
                   </template>
@@ -194,7 +194,7 @@
                   <template #right>
                     <BaseIcon
                       :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                      class="mr-1 text-gray-500 cursor-pointer"
+                      class="mr-1 text-muted cursor-pointer"
                       @click="isShowConfirmPassword = !isShowConfirmPassword"
                     />
                   </template>
@@ -423,7 +423,7 @@
       </div>
 
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
       >
         <BaseButton
           class="mr-3 text-sm"
diff --git a/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue b/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
index 5d6939b7..2df776f3 100644
--- a/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
+++ b/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
@@ -6,7 +6,7 @@
           {{ modalStore.title }}
         </h6>
         <p
-          class="mt-2 text-sm leading-snug text-gray-500"
+          class="mt-2 text-sm leading-snug text-muted"
           style="max-width: 680px"
         >
           {{
@@ -38,7 +38,7 @@
         </BaseInputGroup>
       </div>
 
-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-t border-gray-200">
+      <div class="z-0 flex justify-end p-4 bg-surface-secondary border-t border-line-default">
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
diff --git a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
index 48276bb7..87d3647c 100644
--- a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
+++ b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
@@ -10,7 +10,7 @@
 
         <BaseIcon
           name="XMarkIcon"
-          class="w-6 h-6 text-gray-500 cursor-pointer"
+          class="w-6 h-6 text-muted cursor-pointer"
           @click="closeExchangeRateModal"
         />
       </div>
@@ -151,7 +151,7 @@
         />
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
       >
         <BaseButton
           class="mr-3"
diff --git a/resources/scripts/admin/components/modal-components/FileDiskModal.vue b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
index af9d01ee..45d89595 100644
--- a/resources/scripts/admin/components/modal-components/FileDiskModal.vue
+++ b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
@@ -5,7 +5,7 @@
         {{ modalStore.title }}
         <BaseIcon
           name="XMarkIcon"
-          class="h-6 w-6 text-gray-500 cursor-pointer"
+          class="h-6 w-6 text-muted cursor-pointer"
           @click="closeDiskModal"
         />
       </div>
@@ -21,7 +21,7 @@
       >
         <template #default="slotProps">
           <div
-            class="z-0 flex justify-end p-4 border-t border-solid border-gray-200"
+            class="z-0 flex justify-end p-4 border-t border-solid border-line-default"
           >
             <BaseButton
               class="mr-3 text-sm"
diff --git a/resources/scripts/admin/components/modal-components/InviteMemberModal.vue b/resources/scripts/admin/components/modal-components/InviteMemberModal.vue
index 0e2ccb26..9c51e7c0 100644
--- a/resources/scripts/admin/components/modal-components/InviteMemberModal.vue
+++ b/resources/scripts/admin/components/modal-components/InviteMemberModal.vue
@@ -5,7 +5,7 @@
         {{ $t('members.invite_member') }}
         <BaseIcon
           name="XMarkIcon"
-          class="w-6 h-6 text-gray-500 cursor-pointer"
+          class="w-6 h-6 text-muted cursor-pointer"
           @click="$emit('close')"
         />
       </div>
@@ -42,7 +42,7 @@
         </BaseInputGroup>
       </div>
 
-      <div class="flex justify-end p-4 border-t border-gray-200">
+      <div class="flex justify-end p-4 border-t border-line-default">
         <BaseButton
           variant="primary-outline"
           class="mr-3"
diff --git a/resources/scripts/admin/components/modal-components/ItemModal.vue b/resources/scripts/admin/components/modal-components/ItemModal.vue
index 73cdb5b6..01fb6e10 100644
--- a/resources/scripts/admin/components/modal-components/ItemModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemModal.vue
@@ -5,7 +5,7 @@
         {{ modalStore.title }}
         <BaseIcon
           name="XMarkIcon"
-          class="h-6 w-6 text-gray-500 cursor-pointer"
+          class="h-6 w-6 text-muted cursor-pointer"
           @click="closeItemModal"
         />
       </div>
@@ -90,7 +90,7 @@
           </BaseInputGrid>
         </div>
         <div
-          class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+          class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
         >
           <BaseButton
             class="mr-3"
diff --git a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
index 5c79195f..83a2ec5b 100644
--- a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
@@ -8,7 +8,7 @@
         {{ modalStore.title }}
         <BaseIcon
           name="XMarkIcon"
-          class="w-6 h-6 text-gray-500 cursor-pointer"
+          class="w-6 h-6 text-muted cursor-pointer"
           @click="closeItemUnitModal"
         />
       </div>
@@ -37,7 +37,7 @@
           flex
           justify-end
           p-4
-          border-t border-gray-200 border-solid
+          border-t border-line-default border-solid
         "
       >
         <BaseButton
diff --git a/resources/scripts/admin/components/modal-components/MailTestModal.vue b/resources/scripts/admin/components/modal-components/MailTestModal.vue
index fcbe37ae..b0cf1cf7 100644
--- a/resources/scripts/admin/components/modal-components/MailTestModal.vue
+++ b/resources/scripts/admin/components/modal-components/MailTestModal.vue
@@ -5,7 +5,7 @@
         {{ modalStore.title }}
         <BaseIcon
           name="XMarkIcon"
-          class="w-6 h-6 text-gray-500 cursor-pointer"
+          class="w-6 h-6 text-muted cursor-pointer"
           @click="closeTestModal"
         />
       </div>
@@ -63,7 +63,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
       >
         <BaseButton
           variant="primary-outline"
diff --git a/resources/scripts/admin/components/modal-components/NoteModal.vue b/resources/scripts/admin/components/modal-components/NoteModal.vue
index 39c1f49c..5b1fe591 100644
--- a/resources/scripts/admin/components/modal-components/NoteModal.vue
+++ b/resources/scripts/admin/components/modal-components/NoteModal.vue
@@ -5,7 +5,7 @@
         {{ modalStore.title }}
         <BaseIcon
           name="XMarkIcon"
-          class="h-6 w-6 text-gray-500 cursor-pointer"
+          class="h-6 w-6 text-muted cursor-pointer"
           @click="closeNoteModal"
         />
       </div>
@@ -75,7 +75,7 @@ _          />
           justify-end
           px-4
           py-4
-          border-t border-solid border-gray-200
+          border-t border-solid border-line-default
         "
       >
         <BaseButton
diff --git a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
index d9cdf2ed..5526a638 100644
--- a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
+++ b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
@@ -5,7 +5,7 @@
         {{ modalStore.title }}
         <BaseIcon
           name="XMarkIcon"
-          class="w-6 h-6 text-gray-500 cursor-pointer"
+          class="w-6 h-6 text-muted cursor-pointer"
           @click="closePaymentModeModal"
         />
       </div>
@@ -30,7 +30,7 @@
       </div>
 
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
       >
         <BaseButton
           variant="primary-outline"
diff --git a/resources/scripts/admin/components/modal-components/RolesModal.vue b/resources/scripts/admin/components/modal-components/RolesModal.vue
index 02e6723c..26817290 100644
--- a/resources/scripts/admin/components/modal-components/RolesModal.vue
+++ b/resources/scripts/admin/components/modal-components/RolesModal.vue
@@ -6,7 +6,7 @@
 
         <BaseIcon
           name="XMarkIcon"
-          class="w-6 h-6 text-gray-500 cursor-pointer"
+          class="w-6 h-6 text-muted cursor-pointer"
           @click="closeRolesModal"
         />
       </div>
@@ -36,7 +36,7 @@
             text-sm
             not-italic
             font-medium
-            text-gray-800
+            text-heading
             px-4
             md:px-8
             py-1.5
@@ -50,7 +50,7 @@
             text-sm
             not-italic
             font-medium
-            text-gray-300
+            text-subtle
             px-4
             md:px-8
             py-1.5
@@ -72,7 +72,7 @@
         </div>
       </div>
 
-      <div class="border-t border-gray-200 py-3">
+      <div class="border-t border-line-default py-3">
         <div
           class="
             grid grid-cols-1
@@ -89,7 +89,7 @@
             :key="gIndex"
             class="flex flex-col space-y-1"
           >
-            <p class="text-sm text-gray-500 border-b border-gray-200 pb-1 mb-2">
+            <p class="text-sm text-muted border-b border-line-default pb-1 mb-2">
               {{ gIndex }}
             </p>
             <div
@@ -122,7 +122,7 @@
           flex
           justify-end
           p-4
-          border-t border-solid border-gray-200
+          border-t border-solid border-line-default
         "
       >
         <BaseButton
diff --git a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
index a9675dc3..df0aba62 100644
--- a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
@@ -5,7 +5,7 @@
         {{ modalTitle }}
         <BaseIcon
           name="XMarkIcon"
-          class="h-6 w-6 text-gray-500 cursor-pointer"
+          class="h-6 w-6 text-muted cursor-pointer"
           @click="closeModal"
         />
       </div>
@@ -26,7 +26,7 @@
             relative
             flex flex-col
             m-2
-            border border-gray-200 border-solid
+            border border-line-default border-solid
             cursor-pointer
             hover:border-primary-300
           "
@@ -46,11 +46,11 @@
           />
           <span
             :class="[
-              'w-full p-1 bg-gray-200 text-sm text-center absolute bottom-0 left-0',
+              'w-full p-1 bg-surface-muted text-sm text-center absolute bottom-0 left-0',
               {
                 'text-primary-500 bg-primary-100':
                   selectedTemplate === template.name,
-                'text-gray-600': selectedTemplate != template.name,
+                'text-body': selectedTemplate != template.name,
               },
             ]"
           >
@@ -70,7 +70,7 @@
       </div>
     </div>
 
-    <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
+    <div class="z-0 flex justify-end p-4 border-t border-line-default border-solid">
       <BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
         {{ $t('general.cancel') }}
       </BaseButton>
diff --git a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
index 36ea3bfe..e0400da9 100644
--- a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
@@ -9,7 +9,7 @@
         {{ modalStore.title }}
         <BaseIcon
           name="XMarkIcon"
-          class="h-6 w-6 text-gray-500 cursor-pointer"
+          class="h-6 w-6 text-muted cursor-pointer"
           @click="closeSendEstimateModal"
         />
       </div>
@@ -87,7 +87,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
       >
         <BaseButton
           class="mr-3"
@@ -112,7 +112,7 @@
       </div>
     </form>
     <div v-else>
-      <div class="my-6 mx-4 border border-gray-200 relative">
+      <div class="my-6 mx-4 border border-line-default relative">
         <BaseButton
           class="absolute top-4 right-4"
           :disabled="isLoading"
@@ -131,7 +131,7 @@
       </div>
 
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
       >
         <BaseButton
           class="mr-3"
diff --git a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
index 00606097..79b9f27a 100644
--- a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
@@ -9,7 +9,7 @@
         {{ modalTitle }}
         <BaseIcon
           name="XMarkIcon"
-          class="w-6 h-6 text-gray-500 cursor-pointer"
+          class="w-6 h-6 text-muted cursor-pointer"
           @click="closeSendInvoiceModal"
         />
       </div>
@@ -90,7 +90,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
       >
         <BaseButton
           class="mr-3"
@@ -120,7 +120,7 @@
       </div>
     </form>
     <div v-else>
-      <div class="my-6 mx-4 border border-gray-200 relative">
+      <div class="my-6 mx-4 border border-line-default relative">
         <BaseButton
           class="absolute top-4 right-4"
           :disabled="isLoading"
@@ -139,7 +139,7 @@
         ></iframe>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
       >
         <BaseButton
           class="mr-3"
diff --git a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
index 5c2bb5d5..1a1d81d0 100644
--- a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
@@ -9,7 +9,7 @@
         {{ modalTitle }}
         <BaseIcon
           name="XMarkIcon"
-          class="w-6 h-6 text-gray-500 cursor-pointer"
+          class="w-6 h-6 text-muted cursor-pointer"
           @click="closeSendPaymentModal"
         />
       </div>
@@ -90,7 +90,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
       >
         <BaseButton
           class="mr-3"
@@ -120,7 +120,7 @@
       </div>
     </form>
     <div v-else>
-      <div class="my-6 mx-4 border border-gray-200 relative">
+      <div class="my-6 mx-4 border border-line-default relative">
         <BaseButton
           class="absolute top-4 right-4"
           :disabled="isLoading"
@@ -139,7 +139,7 @@
         ></iframe>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
       >
         <BaseButton
           class="mr-3"
diff --git a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
index a2819007..4888ff9a 100644
--- a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
@@ -8,7 +8,7 @@
         {{ modalStore.title }}
         <BaseIcon
           name="XMarkIcon"
-          class="h-6 w-6 text-gray-500 cursor-pointer"
+          class="h-6 w-6 text-muted cursor-pointer"
           @click="closeTaxTypeModal"
         />
       </div>
@@ -106,7 +106,7 @@
           flex
           justify-end
           p-4
-          border-t border-solid border-gray-200
+          border-t border-solid border-line-default
         "
       >
         <BaseButton
diff --git a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
index b657123c..be98a14c 100644
--- a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
@@ -5,13 +5,13 @@
         <div class="flex flex-col">
           {{ modalStore.title }}
 
-          <p class="text-sm text-gray-500 mt-1">
+          <p class="text-sm text-muted mt-1">
             {{ modalStore.content }}
           </p>
         </div>
         <BaseIcon
           name="XMarkIcon"
-          class="h-6 w-6 text-gray-500 cursor-pointer"
+          class="h-6 w-6 text-muted cursor-pointer"
           @click="closeModal"
         />
       </div>
@@ -88,7 +88,7 @@
       </div>
 
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
       >
         <BaseButton
           class="mr-3 text-sm"
diff --git a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue b/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
index abd530da..3cb8d76a 100644
--- a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
+++ b/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
@@ -6,7 +6,7 @@
 
         <BaseIcon
           name="XMarkIcon"
-          class="w-6 h-6 text-gray-500 cursor-pointer"
+          class="w-6 h-6 text-muted cursor-pointer"
           @click="closeCustomFieldModal"
         />
       </div>
@@ -123,7 +123,7 @@
                   class="ml-1 cursor-pointer"
                   :class="
                     customFieldStore.currentCustomField.in_use
-                      ? 'text-gray-300'
+                      ? 'text-subtle'
                       : 'text-red-300'
                   "
                   @click="removeOption(index)"
@@ -179,7 +179,7 @@
           flex
           justify-end
           p-4
-          border-t border-solid border-gray-200
+          border-t border-solid border-line-default
         "
       >
         <BaseButton
diff --git a/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue b/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
index 3b288f31..0f329827 100644
--- a/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
@@ -153,7 +153,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-heading box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>
diff --git a/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue b/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
index 75da1b9a..94bc577c 100644
--- a/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
@@ -132,7 +132,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-heading box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>
diff --git a/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue b/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
index 48cf0813..a33462c4 100644
--- a/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
@@ -63,7 +63,7 @@
         </div>
 
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-heading box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>
diff --git a/resources/scripts/admin/components/modal-components/disks/S3CompatDisk.vue b/resources/scripts/admin/components/modal-components/disks/S3CompatDisk.vue
index 499a963f..b2a2970b 100644
--- a/resources/scripts/admin/components/modal-components/disks/S3CompatDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/S3CompatDisk.vue
@@ -152,7 +152,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-heading box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>
diff --git a/resources/scripts/admin/components/modal-components/disks/S3Disk.vue b/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
index 775a06a8..3b0c0241 100644
--- a/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
@@ -134,7 +134,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-heading box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>
diff --git a/resources/scripts/admin/layouts/LayoutLogin.vue b/resources/scripts/admin/layouts/LayoutLogin.vue
index 9f56655f..850dd3c3 100644
--- a/resources/scripts/admin/layouts/LayoutLogin.vue
+++ b/resources/scripts/admin/layouts/LayoutLogin.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100">
+  <div class="grid h-screen grid-cols-12 overflow-y-hidden bg-surface-tertiary">
     <NotificationRoot />
 
     <div
@@ -12,7 +12,7 @@
         col-span-12
         p-4
         mx-auto
-        text-gray-900
+        text-heading
         md:p-8 md:col-span-6
         lg:col-span-4
         flex-2
@@ -41,7 +41,7 @@
             not-italic
             font-medium
             leading-relaxed
-            text-left text-gray-400
+            text-left text-subtle
             md:pt-40
           "
         >
diff --git a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
index cfb3b2e6..de9e7cb5 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
@@ -47,16 +47,16 @@
         overflow-visible
         text-sm
         ease-linear
-        bg-white
+        bg-surface
         border-0
         rounded
         cursor-pointer
         md:hidden md:ml-0
-        hover:bg-gray-100
+        hover:bg-hover-strong
       "
       @click.prevent="onToggle"
     >
-      <BaseIcon name="Bars3Icon" class="!w-6 !h-6 text-gray-500" />
+      <BaseIcon name="Bars3Icon" class="!w-6 !h-6 text-muted" />
     </div>
 
     <ul class="flex float-right h-8 m-0 list-none md:h-9">
@@ -81,7 +81,7 @@
                 md:h-9 md:w-9
               "
             >
-              <BaseIcon name="PlusIcon" class="w-5 h-5 text-gray-600" />
+              <BaseIcon name="PlusIcon" class="w-5 h-5 text-body" />
             </div>
           </template>
 
@@ -91,7 +91,7 @@
             >
               <BaseIcon
                 name="DocumentTextIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
                 aria-hidden="true"
               />
               {{ $t('invoices.new_invoice') }}
@@ -103,7 +103,7 @@
             >
               <BaseIcon
                 name="DocumentIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
                 aria-hidden="true"
               />
               {{ $t('estimates.new_estimate') }}
@@ -116,7 +116,7 @@
             >
               <BaseIcon
                 name="UserIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
                 aria-hidden="true"
               />
               {{ $t('customers.new_customer') }}
@@ -148,11 +148,30 @@
             />
           </template>
 
+          <!-- Theme Toggle -->
+          <div class="px-3 py-2">
+            <div class="flex items-center justify-between rounded-lg bg-surface-secondary p-1">
+              <button
+                v-for="opt in themeOptions"
+                :key="opt.value"
+                :class="[
+                  'flex items-center justify-center rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors',
+                  currentTheme === opt.value
+                    ? 'bg-surface text-heading shadow-sm'
+                    : 'text-muted hover:text-body',
+                ]"
+                @click.stop="setTheme(opt.value)"
+              >
+                <BaseIcon :name="opt.icon" class="w-3.5 h-3.5" />
+              </button>
+            </div>
+          </div>
+
           <router-link to="/admin/user-settings">
             <BaseDropdownItem>
               <BaseIcon
                 name="CogIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
                 aria-hidden="true"
               />
               {{ $t('navigation.settings') }}
@@ -162,7 +181,7 @@
           <BaseDropdownItem @click="logout">
             <BaseIcon
               name="ArrowRightOnRectangleIcon"
-              class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+              class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
               aria-hidden="true"
             />
             {{ $t('navigation.logout') }}
@@ -176,7 +195,7 @@
 <script setup>
 import { useAuthStore } from '@/scripts/admin/stores/auth'
 import { useRouter } from 'vue-router'
-import { computed } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
 
@@ -228,4 +247,35 @@ async function logout() {
 function onToggle() {
   globalStore.setSidebarVisibility(true)
 }
+
+const themeOptions = [
+  { value: 'light', icon: 'SunIcon' },
+  { value: 'dark', icon: 'MoonIcon' },
+  { value: 'system', icon: 'ComputerDesktopIcon' },
+]
+
+const currentTheme = ref(localStorage.getItem('theme') || 'system')
+
+function applyTheme(theme) {
+  if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.setAttribute('data-theme', 'dark')
+  } else {
+    document.documentElement.removeAttribute('data-theme')
+  }
+}
+
+function setTheme(theme) {
+  currentTheme.value = theme
+  localStorage.setItem('theme', theme)
+  applyTheme(theme)
+}
+
+onMounted(() => {
+  applyTheme(currentTheme.value)
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (currentTheme.value === 'system') {
+      applyTheme('system')
+    }
+  })
+})
 </script>
diff --git a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
index 18bd7507..55c200e6 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
@@ -27,7 +27,7 @@
         leave-from="translate-x-0"
         leave-to="-translate-x-full"
       >
-        <div class="relative flex flex-col flex-1 w-full max-w-xs bg-white">
+        <div class="relative flex flex-col flex-1 w-full max-w-xs bg-surface">
           <TransitionChild
             as="template"
             enter="ease-in-out duration-300"
@@ -78,7 +78,7 @@
             >
               <div
                 v-if="menu[0] && menu[0].group_label"
-                class="px-4 mt-6 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider"
+                class="px-4 mt-6 mb-2 text-xs font-semibold text-subtle uppercase tracking-wider"
               >
                 {{ $t(menu[0].group_label) }}
               </div>
@@ -89,7 +89,7 @@
                 :class="[
                   hasActiveUrl(item.link)
                     ? 'text-primary-600 bg-primary-50 font-semibold'
-                    : 'text-gray-600 hover:bg-gray-50',
+                    : 'text-body hover:bg-hover',
                   'cursor-pointer mx-3 px-3 py-2.5 flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
                 ]"
                 @click="globalStore.setSidebarVisibility(false)"
@@ -99,7 +99,7 @@
                   :class="[
                     hasActiveUrl(item.link)
                       ? 'text-primary-500'
-                      : 'text-gray-400',
+                      : 'text-subtle',
                     'mr-3 shrink-0 h-5 w-5',
                   ]"
                   @click="globalStore.setSidebarVisibility(false)"
@@ -124,8 +124,8 @@
       h-screen
       pb-32
       overflow-y-auto
-      bg-white
-      border-r border-gray-200 border-solid
+      bg-surface
+      border-r border-line-default border-solid
       xl:w-64
       md:fixed md:flex md:flex-col md:inset-y-0
       pt-16
@@ -138,7 +138,7 @@
     >
       <div
         v-if="menu[0] && menu[0].group_label"
-        class="px-6 mt-6 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider"
+        class="px-6 mt-6 mb-2 text-xs font-semibold text-subtle uppercase tracking-wider"
       >
         {{ $t(menu[0].group_label) }}
       </div>
@@ -149,7 +149,7 @@
         :class="[
           hasActiveUrl(item.link)
             ? 'text-primary-600 bg-primary-50 font-semibold'
-            : 'text-gray-600 hover:bg-gray-50',
+            : 'text-body hover:bg-hover',
           'cursor-pointer mx-3 px-3 py-2.5 group flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
         ]"
       >
@@ -158,7 +158,7 @@
           :class="[
             hasActiveUrl(item.link)
               ? 'text-primary-500'
-              : 'text-gray-400 group-hover:text-gray-600',
+              : 'text-subtle group-hover:text-body',
             'mr-3 shrink-0 h-5 w-5',
           ]"
         />
diff --git a/resources/scripts/admin/views/NoCompanyView.vue b/resources/scripts/admin/views/NoCompanyView.vue
index 34093395..9dfb2aed 100644
--- a/resources/scripts/admin/views/NoCompanyView.vue
+++ b/resources/scripts/admin/views/NoCompanyView.vue
@@ -4,12 +4,12 @@
       <div class="text-center mb-8">
         <BaseIcon
           name="BuildingOfficeIcon"
-          class="w-16 h-16 mx-auto text-gray-300 mb-4"
+          class="w-16 h-16 mx-auto text-subtle mb-4"
         />
-        <h1 class="text-2xl font-semibold text-gray-900">
+        <h1 class="text-2xl font-semibold text-heading">
           {{ $t('general.welcome') }}, {{ userStore.currentUser.name }}
         </h1>
-        <p class="mt-2 text-sm text-gray-500">
+        <p class="mt-2 text-sm text-muted">
           {{ $t('general.no_company_description') }}
         </p>
       </div>
@@ -17,7 +17,7 @@
       <!-- Pending Invitations -->
       <div v-if="invitationStore.pendingInvitations.length > 0">
         <h2
-          class="text-sm font-semibold uppercase tracking-wide text-gray-400 mb-3"
+          class="text-sm font-semibold uppercase tracking-wide text-subtle mb-3"
         >
           {{ $t('members.pending_invitations') }}
         </h2>
@@ -25,13 +25,13 @@
           <div
             v-for="invitation in invitationStore.pendingInvitations"
             :key="invitation.id"
-            class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"
+            class="flex items-center justify-between p-4 bg-surface rounded-lg border border-line-default"
           >
             <div>
-              <p class="font-medium text-gray-900">
+              <p class="font-medium text-heading">
                 {{ invitation.company?.name }}
               </p>
-              <p class="text-sm text-gray-500">
+              <p class="text-sm text-muted">
                 {{ invitation.role?.title }} &middot;
                 {{ $t('members.invited_by') }}:
                 {{ invitation.invited_by?.name }}
diff --git a/resources/scripts/admin/views/SampleTable.vue b/resources/scripts/admin/views/SampleTable.vue
index 58f48f5b..60c031ad 100644
--- a/resources/scripts/admin/views/SampleTable.vue
+++ b/resources/scripts/admin/views/SampleTable.vue
@@ -41,13 +41,13 @@
         <base-dropdown width-class="w-48" margin-class="mt-1">
           <template #activator>
             <div class="flex items-center justify-center">
-              <EllipsisHorizontalIcon class="w-6 h-6 text-gray-600" />
+              <EllipsisHorizontalIcon class="w-6 h-6 text-body" />
             </div>
           </template>
 
           <base-dropdown-item>
             <document-text-icon
-              class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+              class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
               aria-hidden="true"
             />
             New Invoice
@@ -55,7 +55,7 @@
 
           <base-dropdown-item>
             <document-icon
-              class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+              class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
               aria-hidden="true"
             />
             New Estimate
@@ -63,7 +63,7 @@
 
           <base-dropdown-item>
             <user-icon
-              class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+              class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
               aria-hidden="true"
             />
             New Customer
@@ -111,7 +111,7 @@ export default {
           key: 'name',
           label: 'Name',
           thClass: 'extra',
-          tdClass: 'font-medium text-gray-900',
+          tdClass: 'font-medium text-heading',
         },
         { key: 'age', label: 'Age' },
         { key: 'image', label: 'Image' },
@@ -131,7 +131,7 @@ export default {
           key: 'name',
           label: 'Name',
           thClass: 'extra',
-          tdClass: 'font-medium text-gray-900',
+          tdClass: 'font-medium text-heading',
         },
         { key: 'price', label: 'Price' },
         { key: 'created_at', label: 'Created At' },
diff --git a/resources/scripts/admin/views/administration/AdminDashboard.vue b/resources/scripts/admin/views/administration/AdminDashboard.vue
index cdf29b5b..1841be54 100644
--- a/resources/scripts/admin/views/administration/AdminDashboard.vue
+++ b/resources/scripts/admin/views/administration/AdminDashboard.vue
@@ -19,11 +19,11 @@
       <BaseCard>
         <template #header>
           <div class="flex items-center">
-            <BaseIcon name="ServerIcon" class="w-5 h-5 mr-2 text-gray-400" />
-            <span class="font-medium text-gray-700">{{ $t('general.app_version') }}</span>
+            <BaseIcon name="ServerIcon" class="w-5 h-5 mr-2 text-subtle" />
+            <span class="font-medium text-body">{{ $t('general.app_version') }}</span>
           </div>
         </template>
-        <p class="text-2xl font-semibold text-gray-900">
+        <p class="text-2xl font-semibold text-heading">
           {{ data.app_version }}
         </p>
       </BaseCard>
@@ -32,11 +32,11 @@
       <BaseCard>
         <template #header>
           <div class="flex items-center">
-            <BaseIcon name="CodeBracketIcon" class="w-5 h-5 mr-2 text-gray-400" />
-            <span class="font-medium text-gray-700">PHP</span>
+            <BaseIcon name="CodeBracketIcon" class="w-5 h-5 mr-2 text-subtle" />
+            <span class="font-medium text-body">PHP</span>
           </div>
         </template>
-        <p class="text-2xl font-semibold text-gray-900">
+        <p class="text-2xl font-semibold text-heading">
           {{ data.php_version }}
         </p>
       </BaseCard>
@@ -45,14 +45,14 @@
       <BaseCard>
         <template #header>
           <div class="flex items-center">
-            <BaseIcon name="CircleStackIcon" class="w-5 h-5 mr-2 text-gray-400" />
-            <span class="font-medium text-gray-700">{{ $t('general.database') }}</span>
+            <BaseIcon name="CircleStackIcon" class="w-5 h-5 mr-2 text-subtle" />
+            <span class="font-medium text-body">{{ $t('general.database') }}</span>
           </div>
         </template>
-        <p class="text-2xl font-semibold text-gray-900">
+        <p class="text-2xl font-semibold text-heading">
           {{ data.database?.driver?.toUpperCase() }}
         </p>
-        <p class="text-sm text-gray-500 mt-1">
+        <p class="text-sm text-muted mt-1">
           {{ data.database?.version }}
         </p>
       </BaseCard>
@@ -61,11 +61,11 @@
       <BaseCard>
         <template #header>
           <div class="flex items-center">
-            <BaseIcon name="BuildingOfficeIcon" class="w-5 h-5 mr-2 text-gray-400" />
-            <span class="font-medium text-gray-700">{{ $t('navigation.companies') }}</span>
+            <BaseIcon name="BuildingOfficeIcon" class="w-5 h-5 mr-2 text-subtle" />
+            <span class="font-medium text-body">{{ $t('navigation.companies') }}</span>
           </div>
         </template>
-        <p class="text-2xl font-semibold text-gray-900">
+        <p class="text-2xl font-semibold text-heading">
           {{ data.counts?.companies }}
         </p>
       </BaseCard>
@@ -74,11 +74,11 @@
       <BaseCard>
         <template #header>
           <div class="flex items-center">
-            <BaseIcon name="UsersIcon" class="w-5 h-5 mr-2 text-gray-400" />
-            <span class="font-medium text-gray-700">{{ $t('navigation.all_users') }}</span>
+            <BaseIcon name="UsersIcon" class="w-5 h-5 mr-2 text-subtle" />
+            <span class="font-medium text-body">{{ $t('navigation.all_users') }}</span>
           </div>
         </template>
-        <p class="text-2xl font-semibold text-gray-900">
+        <p class="text-2xl font-semibold text-heading">
           {{ data.counts?.users }}
         </p>
       </BaseCard>
diff --git a/resources/scripts/admin/views/administration/companies/Edit.vue b/resources/scripts/admin/views/administration/companies/Edit.vue
index ef929083..9b1f726e 100644
--- a/resources/scripts/admin/views/administration/companies/Edit.vue
+++ b/resources/scripts/admin/views/administration/companies/Edit.vue
@@ -65,7 +65,7 @@
 
         <BaseDivider class="my-6" />
 
-        <h3 class="text-lg font-medium text-gray-900 mb-4">
+        <h3 class="text-lg font-medium text-heading mb-4">
           {{ $t('administration.companies.address') }}
         </h3>
 
diff --git a/resources/scripts/admin/views/administration/companies/Index.vue b/resources/scripts/admin/views/administration/companies/Index.vue
index 5e99a81d..78de8150 100644
--- a/resources/scripts/admin/views/administration/companies/Index.vue
+++ b/resources/scripts/admin/views/administration/companies/Index.vue
@@ -46,7 +46,7 @@
       :title="$t('administration.companies.no_companies')"
       :description="$t('administration.companies.list_description')"
     >
-      <BaseIcon name="BuildingOfficeIcon" class="mt-5 mb-4 h-16 w-16 text-gray-300" />
+      <BaseIcon name="BuildingOfficeIcon" class="mt-5 mb-4 h-16 w-16 text-subtle" />
     </BaseEmptyPlaceholder>
 
     <div v-show="!showEmptyScreen" class="relative table-container">
@@ -70,12 +70,12 @@
 
         <template #cell-owner="{ row }">
           <span v-if="row.data.owner">{{ row.data.owner.name }}</span>
-          <span v-else class="text-gray-400">-</span>
+          <span v-else class="text-subtle">-</span>
         </template>
 
         <template #cell-owner_email="{ row }">
           <span v-if="row.data.owner">{{ row.data.owner.email }}</span>
-          <span v-else class="text-gray-400">-</span>
+          <span v-else class="text-subtle">-</span>
         </template>
 
         <template #cell-actions="{ row }">
@@ -113,7 +113,7 @@ const companyTableColumns = computed(() => {
       key: 'name',
       label: t('administration.companies.company_name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'owner',
diff --git a/resources/scripts/admin/views/administration/settings/SettingsIndex.vue b/resources/scripts/admin/views/administration/settings/SettingsIndex.vue
index 3c38a374..7fdb6f96 100644
--- a/resources/scripts/admin/views/administration/settings/SettingsIndex.vue
+++ b/resources/scripts/admin/views/administration/settings/SettingsIndex.vue
@@ -24,7 +24,7 @@
       />
     </div>
 
-    <div class="flex">
+    <div class="flex gap-8">
       <div class="hidden mt-1 xl:block min-w-[240px]">
         <BaseList>
           <BaseListItem
diff --git a/resources/scripts/admin/views/administration/users/Edit.vue b/resources/scripts/admin/views/administration/users/Edit.vue
index 99e1504e..2750255b 100644
--- a/resources/scripts/admin/views/administration/users/Edit.vue
+++ b/resources/scripts/admin/views/administration/users/Edit.vue
@@ -61,7 +61,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
 
-        <div v-if="userData" class="mt-6 text-sm text-gray-500">
+        <div v-if="userData" class="mt-6 text-sm text-muted">
           <p>
             <strong>{{ $t('administration.users.role') }}:</strong>
             {{ userData.role }}
diff --git a/resources/scripts/admin/views/administration/users/Index.vue b/resources/scripts/admin/views/administration/users/Index.vue
index 66d8fea4..878c1b7e 100644
--- a/resources/scripts/admin/views/administration/users/Index.vue
+++ b/resources/scripts/admin/views/administration/users/Index.vue
@@ -66,7 +66,7 @@
     >
       <BaseIcon
         name="UsersIcon"
-        class="mt-5 mb-4 h-16 w-16 text-gray-300"
+        class="mt-5 mb-4 h-16 w-16 text-subtle"
       />
     </BaseEmptyPlaceholder>
 
@@ -107,18 +107,18 @@
             <span
               v-for="company in row.data.companies.slice(0, 3)"
               :key="company.id"
-              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700"
+              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface-tertiary text-body"
             >
               {{ company.name }}
             </span>
             <span
               v-if="row.data.companies.length > 3"
-              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-500"
+              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface-tertiary text-muted"
             >
               +{{ row.data.companies.length - 3 }}
             </span>
           </div>
-          <span v-else class="text-gray-400">-</span>
+          <span v-else class="text-subtle">-</span>
         </template>
 
         <template #cell-actions="{ row }">
@@ -158,7 +158,7 @@ const userTableColumns = computed(() => {
       key: 'name',
       label: t('users.name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'email',
@@ -232,7 +232,7 @@ function getRoleBadgeClass(role) {
     case 'admin':
       return 'bg-blue-100 text-blue-800'
     default:
-      return 'bg-gray-100 text-gray-800'
+      return 'bg-surface-tertiary text-heading'
   }
 }
 
diff --git a/resources/scripts/admin/views/auth/ForgotPassword.vue b/resources/scripts/admin/views/auth/ForgotPassword.vue
index 1c23f38b..9ddc54b1 100644
--- a/resources/scripts/admin/views/auth/ForgotPassword.vue
+++ b/resources/scripts/admin/views/auth/ForgotPassword.vue
@@ -32,7 +32,7 @@
     <div class="mt-4 mb-4 text-sm">
       <router-link
         to="/login"
-        class="text-sm text-primary-400 hover:text-gray-700"
+        class="text-sm text-primary-400 hover:text-body"
       >
         {{ $t('general.back_to_login') }}
       </router-link>
diff --git a/resources/scripts/admin/views/auth/Login.vue b/resources/scripts/admin/views/auth/Login.vue
index d5d7ed27..d1c40a4a 100644
--- a/resources/scripts/admin/views/auth/Login.vue
+++ b/resources/scripts/admin/views/auth/Login.vue
@@ -32,7 +32,7 @@
         <template #right>
           <BaseIcon
             :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-            class="mr-1 text-gray-500 cursor-pointer"
+            class="mr-1 text-muted cursor-pointer"
             @click="isShowPassword = !isShowPassword"
           />
         </template>
@@ -43,7 +43,7 @@
       <div class="mb-4">
         <router-link
           to="forgot-password"
-          class="text-sm text-primary-400 hover:text-gray-700"
+          class="text-sm text-primary-400 hover:text-body"
         >
           {{ $t('login.forgot_password') }}
         </router-link>
diff --git a/resources/scripts/admin/views/auth/RegisterWithInvitation.vue b/resources/scripts/admin/views/auth/RegisterWithInvitation.vue
index 80d42568..15326fbd 100644
--- a/resources/scripts/admin/views/auth/RegisterWithInvitation.vue
+++ b/resources/scripts/admin/views/auth/RegisterWithInvitation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center justify-center min-h-screen bg-gray-50">
+  <div class="flex items-center justify-center min-h-screen bg-surface-secondary">
     <div class="w-full max-w-md p-8">
       <!-- Logo -->
       <div class="mb-8 text-center">
@@ -16,7 +16,7 @@
 
       <!-- Loading -->
       <div v-if="isLoading" class="text-center">
-        <p class="text-gray-500">Loading invitation details...</p>
+        <p class="text-muted">Loading invitation details...</p>
       </div>
 
       <!-- Invalid/Expired -->
@@ -25,10 +25,10 @@
           name="ExclamationCircleIcon"
           class="w-16 h-16 mx-auto text-red-400 mb-4"
         />
-        <h1 class="text-xl font-semibold text-gray-900 mb-2">
+        <h1 class="text-xl font-semibold text-heading mb-2">
           Invalid Invitation
         </h1>
-        <p class="text-gray-500">{{ error }}</p>
+        <p class="text-muted">{{ error }}</p>
         <router-link to="/login" class="text-primary-500 mt-4 inline-block">
           Go to Login
         </router-link>
@@ -37,10 +37,10 @@
       <!-- Registration Form -->
       <div v-else>
         <div class="text-center mb-6">
-          <h1 class="text-2xl font-semibold text-gray-900">
+          <h1 class="text-2xl font-semibold text-heading">
             Create Your Account
           </h1>
-          <p class="text-gray-500 mt-2">
+          <p class="text-muted mt-2">
             You've been invited to join
             <strong>{{ invitationDetails.company_name }}</strong> as
             <strong>{{ invitationDetails.role_name }}</strong>
@@ -112,7 +112,7 @@
         </BaseCard>
 
         <div class="text-center mt-4">
-          <router-link to="/login" class="text-sm text-gray-500 hover:text-primary-500">
+          <router-link to="/login" class="text-sm text-muted hover:text-primary-500">
             Already have an account? Log in
           </router-link>
         </div>
diff --git a/resources/scripts/admin/views/customers/Create.vue b/resources/scripts/admin/views/customers/Create.vue
index d83ec9c8..8f4b06e5 100644
--- a/resources/scripts/admin/views/customers/Create.vue
+++ b/resources/scripts/admin/views/customers/Create.vue
@@ -184,7 +184,7 @@
 
           <BaseInputGrid class="col-span-5 lg:col-span-4">
             <div class="md:col-span-2">
-              <p class="text-sm text-gray-500">
+              <p class="text-sm text-muted">
                 {{ $t('customers.portal_access_text') }}
               </p>
 
@@ -224,7 +224,7 @@
                 <template #right>
                   <BaseIcon
                     :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                    class="mr-1 text-gray-500 cursor-pointer"
+                    class="mr-1 text-muted cursor-pointer"
                     @click="isShowPassword = !isShowPassword"
                   />
                 </template>
@@ -251,7 +251,7 @@
                 <template #right>
                   <BaseIcon
                     :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                    class="mr-1 text-gray-500 cursor-pointer"
+                    class="mr-1 text-muted cursor-pointer"
                     @click="isShowConfirmPassword = !isShowConfirmPassword"
                   />
                 </template>
diff --git a/resources/scripts/admin/views/customers/Index.vue b/resources/scripts/admin/views/customers/Index.vue
index 83864fa6..902ef71e 100644
--- a/resources/scripts/admin/views/customers/Index.vue
+++ b/resources/scripts/admin/views/customers/Index.vue
@@ -113,7 +113,7 @@
             </span>
           </template>
           <BaseDropdownItem @click="removeMultipleCustomers">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -158,7 +158,7 @@
             <BaseText
               :text="row.data.contact_name ? row.data.contact_name : ''"
               tag="span"
-              class="text-xs text-gray-400"
+              class="text-xs text-subtle"
             />
           </router-link>
         </template>
@@ -247,13 +247,13 @@ const customerColumns = computed(() => {
       key: 'status',
       thClass: 'extra w-10 pr-0',
       sortable: false,
-      tdClass: 'font-medium text-gray-900 pr-0',
+      tdClass: 'font-medium text-heading pr-0',
     },
     {
       key: 'name',
       label: t('customers.name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     { key: 'phone', label: t('customers.phone') },
     { key: 'due_amount', label: t('customers.amount_due') },
diff --git a/resources/scripts/admin/views/customers/View.vue b/resources/scripts/admin/views/customers/View.vue
index 205ebf28..e9a935fb 100644
--- a/resources/scripts/admin/views/customers/View.vue
+++ b/resources/scripts/admin/views/customers/View.vue
@@ -35,7 +35,7 @@
             :to="`/admin/estimates/create?customer=${$route.params.id}`"
           >
             <BaseDropdownItem class="">
-              <BaseIcon name="DocumentIcon" class="mr-3 text-gray-600" />
+              <BaseIcon name="DocumentIcon" class="mr-3 text-body" />
               {{ $t('estimates.new_estimate') }}
             </BaseDropdownItem>
           </router-link>
@@ -45,7 +45,7 @@
             :to="`/admin/invoices/create?customer=${$route.params.id}`"
           >
             <BaseDropdownItem>
-              <BaseIcon name="DocumentTextIcon" class="mr-3 text-gray-600" />
+              <BaseIcon name="DocumentTextIcon" class="mr-3 text-body" />
               {{ $t('invoices.new_invoice') }}
             </BaseDropdownItem>
           </router-link>
@@ -55,7 +55,7 @@
             :to="`/admin/payments/create?customer=${$route.params.id}`"
           >
             <BaseDropdownItem>
-              <BaseIcon name="CreditCardIcon" class="mr-3 text-gray-600" />
+              <BaseIcon name="CreditCardIcon" class="mr-3 text-body" />
               {{ $t('payments.new_payment') }}
             </BaseDropdownItem>
           </router-link>
@@ -65,7 +65,7 @@
             :to="`/admin/expenses/create?customer=${$route.params.id}`"
           >
             <BaseDropdownItem>
-              <BaseIcon name="CalculatorIcon" class="mr-3 text-gray-600" />
+              <BaseIcon name="CalculatorIcon" class="mr-3 text-body" />
               {{ $t('expenses.new_expense') }}
             </BaseDropdownItem>
           </router-link>
diff --git a/resources/scripts/admin/views/customers/partials/CustomerInfo.vue b/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
index 75fcdbe0..5a294096 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-gray-200">
+  <div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-line-default">
     <!-- Basic Info -->
     <BaseHeading>
       {{ $t('customers.basic_info') }}
@@ -92,12 +92,12 @@
       >
         <p
           v-if="field.type === 'Switch'"
-          class="text-sm font-bold leading-5 text-black non-italic"
+          class="text-sm font-bold leading-5 text-heading non-italic"
         >
           <span v-if="field.default_answer === 1"> {{ $t('general.yes') }} </span>
           <span v-else> {{ $t('general.no') }} </span>
         </p>
-        <p v-else class="text-sm font-bold leading-5 text-black non-italic">
+        <p v-else class="text-sm font-bold leading-5 text-heading non-italic">
           {{ field.default_answer }}
         </p>
       </BaseDescriptionListItem>
diff --git a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
index 1ed1a73e..84cbc913 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
@@ -9,7 +9,7 @@
       pt-16
       pb-[6.6rem]
       ml-56
-      bg-white
+      bg-surface
       xl:ml-64
       w-88
       xl:block
@@ -23,7 +23,7 @@
         px-4
         pt-8
         pb-2
-        border border-gray-200 border-solid
+        border border-line-default border-solid
         height-full
       "
     >
@@ -35,7 +35,7 @@
         variant="gray"
         @input="onSearch()"
       >
-        <BaseIcon name="MagnifyingGlassIcon" class="text-gray-500" />
+        <BaseIcon name="MagnifyingGlassIcon" class="text-muted" />
       </BaseInput>
 
       <div class="flex mb-6 ml-3" role="group" aria-label="First group">
@@ -58,7 +58,7 @@
               pb-2
               mb-2
               text-sm
-              border-b border-gray-200 border-solid
+              border-b border-line-default border-solid
             "
           >
             {{ $t('general.sort_by') }}
@@ -111,7 +111,7 @@
       class="
         h-full
         overflow-y-scroll
-        border-l border-gray-200 border-solid
+        border-l border-line-default border-solid
         sidebar
         base-scroll
       "
@@ -122,9 +122,9 @@
           :id="'customer-' + customer.id"
           :to="`/admin/customers/${customer.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
             {
-              'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
+              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
                 hasActiveUrl(customer.id),
             },
           ]"
@@ -139,7 +139,7 @@
                 not-italic
                 font-normal
                 leading-5
-                text-black
+                text-heading
                 capitalize
                 truncate
               "
@@ -154,7 +154,7 @@
                 not-italic
                 font-medium
                 leading-5
-                text-gray-600
+                text-body
               "
             />
           </div>
@@ -173,7 +173,7 @@
       </div>
       <p
         v-if="!customerList?.length && !isFetching"
-        class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+        class="flex justify-center px-4 mt-5 text-sm text-body"
       >
         {{ $t('customers.no_matching_customers') }}
       </p>
diff --git a/resources/scripts/admin/views/dashboard/DashboardChart.vue b/resources/scripts/admin/views/dashboard/DashboardChart.vue
index 9867a82b..d30159b8 100644
--- a/resources/scripts/admin/views/dashboard/DashboardChart.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardChart.vue
@@ -2,7 +2,7 @@
   <div>
     <div
       v-if="dashboardStore.isDashboardDataLoaded"
-      class="grid grid-cols-10 mt-8 bg-white rounded-xl shadow-sm border border-gray-100"
+      class="grid grid-cols-10 mt-8 bg-surface rounded-xl shadow border border-line-light"
     >
       <!-- Chart -->
       <div
@@ -50,7 +50,7 @@
           grid grid-cols-3
           col-span-10
           text-center
-          border-t border-l border-gray-200 border-solid
+          border-t border-l border-line-default border-solid
           lg:border-t-0 lg:text-right lg:col-span-3
           xl:col-span-2
           lg:grid-cols-1
@@ -116,7 +116,7 @@
           class="
             col-span-3
             p-6
-            border-t border-gray-200 border-solid
+            border-t border-line-default border-solid
             lg:col-span-1
           "
         >
diff --git a/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue b/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue
index a537ecf1..04e4fd73 100644
--- a/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseContentPlaceholders
-    class="grid grid-cols-10 mt-8 bg-white rounded shadow"
+    class="grid grid-cols-10 mt-8 bg-surface rounded shadow"
   >
     <!-- Chart -->
     <div
@@ -27,7 +27,7 @@
         grid grid-cols-3
         col-span-10
         text-center
-        border-t border-l border-gray-200 border-solid
+        border-t border-l border-line-default border-solid
         lg:border-t-0 lg:text-right lg:col-span-3
         xl:col-span-2
         lg:grid-cols-1
@@ -76,7 +76,7 @@
           justify-center
           col-span-3
           p-6
-          border-t border-gray-200 border-solid
+          border-t border-line-default border-solid
           lg:justify-end lg:items-end lg:col-span-1
         "
       >
diff --git a/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue b/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
index 04d10b7d..89da715d 100644
--- a/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
@@ -6,10 +6,10 @@
       flex
       justify-between
       p-5
-      bg-white
+      bg-surface
       rounded-xl
-      shadow-sm
-      border border-gray-100
+      shadow
+      border border-line-light
       hover:shadow-md
       transition-shadow
       xl:p-6
@@ -19,10 +19,10 @@
     :to="route"
   >
     <div>
-      <span class="text-2xl font-bold leading-tight text-gray-900 xl:text-3xl">
+      <span class="text-2xl font-bold leading-tight text-heading xl:text-3xl">
         <slot />
       </span>
-      <span class="block mt-1 text-sm font-medium leading-tight text-gray-500 xl:text-base">
+      <span class="block mt-1 text-sm font-medium leading-tight text-muted xl:text-base">
         {{ label }}
       </span>
     </div>
diff --git a/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue b/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue
index a114818d..e5a99893 100644
--- a/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseContentPlaceholders
     :rounded="true"
-    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
+    class="relative flex justify-between w-full p-3 bg-surface rounded shadow lg:col-span-3 xl:p-4"
   >
     <div>
       <BaseContentPlaceholdersText
diff --git a/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue b/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue
index 90ad7a11..9a7ee56c 100644
--- a/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue
@@ -7,7 +7,7 @@
       justify-between
       w-full
       p-3
-      bg-white
+      bg-surface
       rounded
       shadow
       lg:col-span-2
diff --git a/resources/scripts/admin/views/dashboard/DashboardTable.vue b/resources/scripts/admin/views/dashboard/DashboardTable.vue
index f1d0c1ec..5a95a4a4 100644
--- a/resources/scripts/admin/views/dashboard/DashboardTable.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardTable.vue
@@ -7,7 +7,7 @@
         class="due-invoices"
       >
         <div class="relative z-10 flex items-center justify-between mb-3">
-          <h6 class="mb-0 text-lg font-semibold leading-normal text-gray-900">
+          <h6 class="mb-0 text-lg font-semibold leading-normal text-heading">
             {{ $t('dashboard.recent_invoices_card.title') }}
           </h6>
 
@@ -57,7 +57,7 @@
         class="recent-estimates"
       >
         <div class="relative z-10 flex items-center justify-between mb-3">
-          <h6 class="mb-0 text-lg font-semibold leading-normal text-gray-900">
+          <h6 class="mb-0 text-lg font-semibold leading-normal text-heading">
             {{ $t('dashboard.recent_estimate_card.title') }}
           </h6>
 
diff --git a/resources/scripts/admin/views/estimates/Index.vue b/resources/scripts/admin/views/estimates/Index.vue
index 60919823..daa9e9a5 100644
--- a/resources/scripts/admin/views/estimates/Index.vue
+++ b/resources/scripts/admin/views/estimates/Index.vue
@@ -129,7 +129,7 @@
           h-10
           mt-5
           list-none
-          border-b-2 border-gray-200 border-solid
+          border-b-2 border-line-default border-solid
         "
       >
         <!-- Tabs -->
@@ -163,7 +163,7 @@
           </template>
 
           <BaseDropdownItem @click="removeMultipleEstimates">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -298,13 +298,13 @@ const estimateColumns = computed(() => {
       key: 'checkbox',
       thClass: 'extra w-10 pr-0',
       sortable: false,
-      tdClass: 'font-medium text-gray-900 pr-0',
+      tdClass: 'font-medium text-heading pr-0',
     },
     {
       key: 'estimate_date',
       label: t('estimates.date'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-500',
+      tdClass: 'font-medium text-muted',
     },
     { key: 'estimate_number', label: t('estimates.number', 2) },
     { key: 'name', label: t('estimates.customer') },
@@ -312,7 +312,7 @@ const estimateColumns = computed(() => {
     {
       key: 'total',
       label: t('estimates.total'),
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'actions',
diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue
index 5d05d781..0fce06fa 100644
--- a/resources/scripts/admin/views/estimates/View.vue
+++ b/resources/scripts/admin/views/estimates/View.vue
@@ -46,7 +46,7 @@
         pt-16
         pb-[6.4rem]
         ml-56
-        bg-white
+        bg-surface
         xl:ml-64
         w-88
         xl:block
@@ -60,7 +60,7 @@
           px-4
           pt-8
           pb-2
-          border border-gray-200 border-solid
+          border border-line-default border-solid
           height-full
         "
       >
@@ -73,7 +73,7 @@
             @input="onSearched()"
           >
             <template #right>
-              <BaseIcon name="MagnifyingGlassIcon" class="text-gray-400" />
+              <BaseIcon name="MagnifyingGlassIcon" class="text-subtle" />
             </template>
           </BaseInput>
         </div>
@@ -98,7 +98,7 @@
                 pb-2
                 mb-1 mb-2
                 text-sm
-                border-b border-gray-200 border-solid
+                border-b border-line-default border-solid
               "
             >
               {{ $t('general.sort_by') }}
@@ -159,7 +159,7 @@
         class="
           h-full
           overflow-y-scroll
-          border-l border-gray-200 border-solid
+          border-l border-line-default border-solid
           base-scroll
         "
       >
@@ -169,9 +169,9 @@
             :id="'estimate-' + estimate.id"
             :to="`/admin/estimates/${estimate.id}/view`"
             :class="[
-              'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-l-transparent',
+              'flex justify-between side-estimate p-4 cursor-pointer hover:bg-hover-strong items-center border-l-4 border-l-transparent',
               {
-                'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
+                'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
                   hasActiveUrl(estimate.id),
               },
             ]"
@@ -187,7 +187,7 @@
                   not-italic
                   font-normal
                   leading-5
-                  text-black
+                  text-heading
                   capitalize
                   truncate
                 "
@@ -201,7 +201,7 @@
                   not-italic
                   font-medium
                   leading-5
-                  text-gray-600
+                  text-body
                 "
               >
                 {{ estimate.estimate_number }}
@@ -226,7 +226,7 @@
                   not-italic
                   font-semibold
                   leading-8
-                  text-right text-gray-900
+                  text-right text-heading
                 "
               />
 
@@ -236,7 +236,7 @@
                   not-italic
                   font-normal
                   leading-5
-                  text-right text-gray-600
+                  text-right text-body
                   est-date
                 "
               >
@@ -250,7 +250,7 @@
         </div>
         <p
           v-if="!estimateList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-body"
         >
           {{ $t('estimates.no_matching_estimates') }}
         </p>
@@ -267,7 +267,7 @@
           flex-1
           border border-gray-400 border-solid
           rounded-md
-          bg-white
+          bg-surface
           frame-style
         "
       />
diff --git a/resources/scripts/admin/views/expenses/Index.vue b/resources/scripts/admin/views/expenses/Index.vue
index 2dc1b4f1..56150361 100644
--- a/resources/scripts/admin/views/expenses/Index.vue
+++ b/resources/scripts/admin/views/expenses/Index.vue
@@ -135,7 +135,7 @@
             v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
             @click="removeMultipleExpenses"
           >
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-body" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -275,7 +275,7 @@ const expenseColumns = computed(() => {
     {
       key: 'status',
       thClass: 'extra w-10',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
       placeholderClass: 'w-10',
       sortable: false,
     },
@@ -283,13 +283,13 @@ const expenseColumns = computed(() => {
       key: 'expense_date',
       label: t('expenses.date'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'expense_number',
       label: t('expenses.expense_number'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'name',
diff --git a/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue b/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
index 09ad9112..11c489d5 100644
--- a/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
+++ b/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
@@ -7,7 +7,7 @@
       <div class="mb-6">
         <div
           v-if="phpSupportInfo"
-          class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200  lg:gap-24 sm:gap-4"
+          class="grid grid-flow-row grid-cols-3 p-3 border border-line-default  lg:gap-24 sm:gap-4"
         >
           <div class="col-span-2 text-sm">
             {{
@@ -32,7 +32,7 @@
           <div
             v-for="(requirement, index) in requirements"
             :key="index"
-            class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200  lg:gap-24 sm:gap-4"
+            class="grid grid-flow-row grid-cols-3 p-3 border border-line-default  lg:gap-24 sm:gap-4"
           >
             <div class="col-span-2 text-sm">
               {{ index }}
diff --git a/resources/scripts/admin/views/installation/Step2PermissionCheck.vue b/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
index f73303fb..3cb9deb3 100644
--- a/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
+++ b/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
@@ -12,7 +12,7 @@
           grid grid-flow-row grid-cols-3
           lg:gap-24
           sm:gap-4
-          border border-gray-200
+          border border-line-default
         "
       >
         <BaseContentPlaceholdersText :lines="1" class="col-span-4 p-3" />
@@ -29,7 +29,7 @@
       <div
         v-for="(permission, index) in permissions"
         :key="index"
-        class="border border-gray-200"
+        class="border border-line-default"
       >
         <div class="grid grid-flow-row grid-cols-3 lg:gap-24 sm:gap-4">
           <div class="col-span-2 p-3">
diff --git a/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue b/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
index 1c442078..8e02e8d3 100644
--- a/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
+++ b/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
@@ -2,7 +2,7 @@
   <BaseWizardStep
     :title="$t('wizard.database.database')"
     :description="$t('wizard.database.desc')"
-    step-container="w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded md:w-full"
+    step-container="w-full p-8 mb-8 bg-surface border border-line-default border-solid rounded md:w-full"
   >
     <component
       :is="databaseData.database_connection"
diff --git a/resources/scripts/admin/views/installation/Step4VerifyDomain.vue b/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
index f1146bb3..8785b4e4 100644
--- a/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
+++ b/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
@@ -18,16 +18,16 @@
       </BaseInputGroup>
     </div>
 
-    <p class="mt-4 mb-0 text-sm text-gray-600">{{ $t('wizard.verify_domain.notes.notes') }}</p>
-    <ul class="w-full text-gray-600 list-disc list-inside">
+    <p class="mt-4 mb-0 text-sm text-body">{{ $t('wizard.verify_domain.notes.notes') }}</p>
+    <ul class="w-full text-body list-disc list-inside">
       <li class="text-sm leading-8">
         {{ $t('wizard.verify_domain.notes.not_contain') }}
-        <b class="inline-block px-1 bg-gray-100 rounded-xs">https://</b> {{ $t('wizard.verify_domain.notes.or') }}
-        <b class="inline-block px-1 bg-gray-100 rounded-xs">http</b> {{ $t('wizard.verify_domain.notes.in_front') }}
+        <b class="inline-block px-1 bg-surface-tertiary rounded-xs">https://</b> {{ $t('wizard.verify_domain.notes.or') }}
+        <b class="inline-block px-1 bg-surface-tertiary rounded-xs">http</b> {{ $t('wizard.verify_domain.notes.in_front') }}
       </li>
       <li class="text-sm leading-8">
         {{ $t('wizard.verify_domain.notes.if_you') }}
-        <b class="inline-block px-1 bg-gray-100">localhost:8080</b>
+        <b class="inline-block px-1 bg-surface-tertiary">localhost:8080</b>
       </li>
     </ul>
 
diff --git a/resources/scripts/admin/views/installation/Step6AccountSettings.vue b/resources/scripts/admin/views/installation/Step6AccountSettings.vue
index ae60f065..d8ba86fa 100644
--- a/resources/scripts/admin/views/installation/Step6AccountSettings.vue
+++ b/resources/scripts/admin/views/installation/Step6AccountSettings.vue
@@ -70,7 +70,7 @@
             <template #right>
               <BaseIcon
                 :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                class="mr-1 text-gray-500 cursor-pointer"
+                class="mr-1 text-muted cursor-pointer"
                 @click="isShowPassword = !isShowPassword"
               />
             </template>
@@ -95,7 +95,7 @@
             <template #right>
               <BaseIcon
                 :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                class="mr-1 text-gray-500 cursor-pointer"
+                class="mr-1 text-muted cursor-pointer"
                 @click="isShowConfirmPassword = !isShowConfirmPassword"
               />
             </template>
diff --git a/resources/scripts/admin/views/installation/Step7CompanyInfo.vue b/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
index 26e40b6e..57f207d7 100644
--- a/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
+++ b/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
@@ -2,7 +2,7 @@
   <BaseWizardStep
     :title="$t('wizard.company_info')"
     :description="$t('wizard.company_info_desc')"
-    step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
+    step-container="bg-surface border border-line-default border-solid mb-8 md:w-full p-8 rounded w-full"
   >
     <form action="" @submit.prevent="next">
       <div class="grid grid-cols-1 mb-4 md:grid-cols-2 md:mb-6">
diff --git a/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue b/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
index 37d7f775..73334a54 100644
--- a/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
+++ b/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
@@ -2,7 +2,7 @@
   <BaseWizardStep
     :title="$t('wizard.preferences')"
     :description="$t('wizard.preferences_desc')"
-    step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
+    step-container="bg-surface border border-line-default border-solid mb-8 md:w-full p-8 rounded w-full"
   >
     <form action="" @submit.prevent="next">
       <div>
diff --git a/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue
index f84a8ce8..10038124 100644
--- a/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue
+++ b/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue
@@ -63,7 +63,7 @@
           <template #right>
             <BaseIcon
               :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-gray-500 cursor-pointer"
+              class="mr-1 text-muted cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
           </template>
diff --git a/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue
index a2ff3af3..c64d7df6 100644
--- a/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue
+++ b/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue
@@ -161,7 +161,7 @@
           <template #right>
             <BaseIcon
               :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-gray-500 cursor-pointer"
+              class="mr-1 text-muted cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
           </template>
diff --git a/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue
index e18bdc5e..fc9c58ac 100644
--- a/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue
+++ b/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue
@@ -68,7 +68,7 @@
           <template #right>
             <BaseIcon
               :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-gray-500 cursor-pointer"
+              class="mr-1 text-muted cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
           </template>
diff --git a/resources/scripts/admin/views/invoices/Index.vue b/resources/scripts/admin/views/invoices/Index.vue
index 8be47245..05855409 100644
--- a/resources/scripts/admin/views/invoices/Index.vue
+++ b/resources/scripts/admin/views/invoices/Index.vue
@@ -126,7 +126,7 @@
           h-10
           mt-5
           list-none
-          border-b-2 border-gray-200 border-solid
+          border-b-2 border-line-default border-solid
         "
       >
         <!-- Tabs -->
@@ -161,7 +161,7 @@
           </template>
 
           <BaseDropdownItem @click="removeMultipleInvoices">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -341,7 +341,7 @@ const invoiceColumns = computed(() => {
     {
       key: 'checkbox',
       thClass: 'extra w-10',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
       placeholderClass: 'w-10',
       sortable: false,
     },
@@ -361,7 +361,7 @@ const invoiceColumns = computed(() => {
     {
       key: 'total',
       label: t('invoices.total'),
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
 
     {
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index 34ea6fc8..50a7f354 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -295,7 +295,7 @@ onSearched = debounce(onSearched, 500)
         pt-16
         pb-[6.4rem]
         ml-56
-        bg-white
+        bg-surface
         xl:ml-64
         w-88
         xl:block
@@ -309,7 +309,7 @@ onSearched = debounce(onSearched, 500)
           px-4
           pt-8
           pb-2
-          border border-gray-200 border-solid
+          border border-line-default border-solid
           height-full
         "
       >
@@ -322,7 +322,7 @@ onSearched = debounce(onSearched, 500)
             @input="onSearched()"
           >
             <template #right>
-              <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
+              <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
             </template>
           </BaseInput>
         </div>
@@ -341,7 +341,7 @@ onSearched = debounce(onSearched, 500)
                 pb-2
                 mb-1 mb-2
                 text-sm
-                border-b border-gray-200 border-solid
+                border-b border-line-default border-solid
               "
             >
               {{ $t('general.sort_by') }}
@@ -402,7 +402,7 @@ onSearched = debounce(onSearched, 500)
         class="
           h-full
           overflow-y-scroll
-          border-l border-gray-200 border-solid
+          border-l border-line-default border-solid
           base-scroll
         "
       >
@@ -412,9 +412,9 @@ onSearched = debounce(onSearched, 500)
             :id="'invoice-' + invoice.id"
             :to="`/admin/invoices/${invoice.id}/view`"
             :class="[
-              'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-l-transparent',
+              'flex justify-between side-invoice p-4 cursor-pointer hover:bg-hover-strong items-center border-l-4 border-l-transparent',
               {
-                'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
+                'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
                   hasActiveUrl(invoice.id),
               },
             ]"
@@ -430,7 +430,7 @@ onSearched = debounce(onSearched, 500)
                   not-italic
                   font-normal
                   leading-5
-                  text-black
+                  text-heading
                   capitalize
                   truncate
                 "
@@ -444,7 +444,7 @@ onSearched = debounce(onSearched, 500)
                   not-italic
                   font-medium
                   leading-5
-                  text-gray-600
+                  text-body
                 "
               >
                 {{ invoice.invoice_number }}
@@ -465,7 +465,7 @@ onSearched = debounce(onSearched, 500)
                   not-italic
                   font-semibold
                   leading-8
-                  text-right text-gray-900
+                  text-right text-heading
                   block
                 "
                 :amount="invoice.total"
@@ -477,7 +477,7 @@ onSearched = debounce(onSearched, 500)
                   not-italic
                   font-normal
                   leading-5
-                  text-right text-gray-600
+                  text-right text-body
                   est-date
                 "
               >
@@ -491,7 +491,7 @@ onSearched = debounce(onSearched, 500)
         </div>
         <p
           v-if="!invoiceList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-body"
         >
           {{ $t('invoices.no_matching_invoices') }}
         </p>
@@ -507,7 +507,7 @@ onSearched = debounce(onSearched, 500)
         class="
           flex-1
           border border-gray-400 border-solid
-          bg-white
+          bg-surface
           rounded-md
           frame-style
         "
diff --git a/resources/scripts/admin/views/items/Index.vue b/resources/scripts/admin/views/items/Index.vue
index ce9596db..1550fbc6 100644
--- a/resources/scripts/admin/views/items/Index.vue
+++ b/resources/scripts/admin/views/items/Index.vue
@@ -97,7 +97,7 @@
           items-center
           justify-end
           h-5
-          border-gray-200 border-solid
+          border-line-default border-solid
         "
       >
         <BaseDropdown v-if="itemStore.selectedItems.length">
@@ -117,7 +117,7 @@
             </span>
           </template>
           <BaseDropdownItem @click="removeMultipleItems">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -237,7 +237,7 @@ const itemColumns = computed(() => {
     {
       key: 'status',
       thClass: 'extra w-10',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
       placeholderClass: 'w-10',
       sortable: false,
     },
@@ -245,7 +245,7 @@ const itemColumns = computed(() => {
       key: 'name',
       label: t('items.name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     { key: 'unit_name', label: t('items.unit') },
     { key: 'price', label: t('items.price') },
diff --git a/resources/scripts/admin/views/members/Index.vue b/resources/scripts/admin/views/members/Index.vue
index 96d288bc..9e0b0329 100644
--- a/resources/scripts/admin/views/members/Index.vue
+++ b/resources/scripts/admin/views/members/Index.vue
@@ -102,7 +102,7 @@
           items-center
           justify-end
           h-5
-          border-gray-200 border-solid
+          border-line-default border-solid
         "
       >
         <BaseDropdown v-if="usersStore.selectedUsers.length">
@@ -122,7 +122,7 @@
             </span>
           </template>
           <BaseDropdownItem @click="removeMultipleUsers">
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-body" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -191,21 +191,21 @@
       v-if="userStore.currentUser.is_owner && usersStore.pendingInvitations.length > 0"
       class="mt-8"
     >
-      <h3 class="text-lg font-medium text-gray-900 mb-4">
+      <h3 class="text-lg font-medium text-heading mb-4">
         {{ $t('members.pending_invitations') }}
       </h3>
       <BaseCard>
-        <div class="divide-y divide-gray-200">
+        <div class="divide-y divide-line-default">
           <div
             v-for="invitation in usersStore.pendingInvitations"
             :key="invitation.id"
             class="flex items-center justify-between px-6 py-4"
           >
             <div>
-              <p class="text-sm font-medium text-gray-900">
+              <p class="text-sm font-medium text-heading">
                 {{ invitation.email }}
               </p>
-              <p class="text-sm text-gray-500">
+              <p class="text-sm text-muted">
                 {{ invitation.role?.title }} &middot;
                 {{ $t('members.invited_by') }}: {{ invitation.invited_by?.name }}
               </p>
@@ -269,14 +269,14 @@ const userTableColumns = computed(() => {
     {
       key: 'status',
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
       sortable: false,
     },
     {
       key: 'name',
       label: t('members.name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     { key: 'email', label: 'Email' },
     {
diff --git a/resources/scripts/admin/views/modules/Index.vue b/resources/scripts/admin/views/modules/Index.vue
index b9222ebf..16f4b8c0 100644
--- a/resources/scripts/admin/views/modules/Index.vue
+++ b/resources/scripts/admin/views/modules/Index.vue
@@ -53,7 +53,7 @@
           </div>
         </div>
         <div v-else class="mt-24">
-          <label class="flex items-center justify-center text-gray-500">
+          <label class="flex items-center justify-center text-muted">
             {{ $t('modules.no_modules_installed') }}
           </label>
         </div>
@@ -61,10 +61,10 @@
     </div>
 
     <BaseCard v-else class="mt-6">
-      <h6 class="text-gray-900 text-lg font-medium">
+      <h6 class="text-heading text-lg font-medium">
         {{ $t('modules.connect_installation') }}
       </h6>
-      <p class="mt-1 text-sm text-gray-500">
+      <p class="mt-1 text-sm text-muted">
         {{
           $t('modules.api_token_description', {
             url: globalStore.config.base_url.replace(/^http:\/\//, ''),
diff --git a/resources/scripts/admin/views/modules/View.vue b/resources/scripts/admin/views/modules/View.vue
index 51b95923..a88df3b3 100644
--- a/resources/scripts/admin/views/modules/View.vue
+++ b/resources/scripts/admin/views/modules/View.vue
@@ -1,6 +1,6 @@
 <template>
   <ModulePlaceholder v-if="isFetchingInitialData" />
-  <BasePage v-else class="bg-white">
+  <BasePage v-else class="bg-surface">
     <BasePageHeader :title="moduleData.name">
       <BaseBreadcrumb>
         <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
@@ -30,7 +30,7 @@
               <button
                 v-if="thumbnail && videoUrl"
                 :class="[
-                  'relative  md:h-24 lg:h-36 rounded hover:bg-gray-50',
+                  'relative  md:h-24 lg:h-36 rounded hover:bg-hover',
                   {
                     'outline-hidden ring-3 ring-offset-1 ring-primary-500':
                       displayVideo,
@@ -64,7 +64,7 @@
                 id="tabs-1-tab-1"
                 :key="ssIndx"
                 :class="[
-                  'relative  md:h-24 lg:h-36 rounded hover:bg-gray-50',
+                  'relative  md:h-24 lg:h-36 rounded hover:bg-hover',
                   {
                     'outline-hidden ring-3 ring-offset-1 ring-primary-500':
                       displayImage === screenshot.url,
@@ -108,7 +108,7 @@
 
           <div
             v-else
-            class="aspect-w-4 aspect-h-3 rounded-lg bg-gray-100 overflow-hidden"
+            class="aspect-w-4 aspect-h-3 rounded-lg bg-surface-tertiary overflow-hidden"
           >
             <img
               :src="displayImage"
@@ -146,7 +146,7 @@
                 text-2xl
                 font-extrabold
                 tracking-tight
-                text-gray-900
+                text-heading
                 sm:text-3xl
               "
             >
@@ -159,7 +159,7 @@
 
             <p
               v-if="moduleData.latest_module_version"
-              class="text-sm text-gray-500 mt-2"
+              class="text-sm text-muted mt-2"
             >
               {{ $t('modules.version') }}
               {{ moduleVersion }} ({{ $t('modules.last_updated') }}
@@ -170,7 +170,7 @@
 
         <!-- Module Description  -->
         <div
-          class="prose prose-sm max-w-none text-gray-500 text-sm my-10"
+          class="prose prose-sm max-w-none text-muted text-sm my-10"
           v-html="moduleData.long_description"
         />
 
@@ -178,7 +178,7 @@
         <div v-if="!moduleData.purchased">
           <RadioGroup v-model="selectedPlan">
             <RadioGroupLabel class="sr-only"> Pricing plans </RadioGroupLabel>
-            <div class="relative bg-white rounded-md -space-y-px">
+            <div class="relative bg-surface rounded-md -space-y-px">
               <RadioGroupOption
                 v-for="(size, sizeIdx) in modulePrice"
                 :key="size.name"
@@ -194,7 +194,7 @@
                       : '',
                     checked
                       ? 'bg-primary-50 border-primary-200 z-10'
-                      : 'border-gray-200',
+                      : 'border-line-default',
                     'relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-2 focus:outline-hidden',
                   ]"
                 >
@@ -203,18 +203,18 @@
                       :class="[
                         checked
                           ? 'bg-primary-600 border-transparent'
-                          : 'bg-white border-gray-300',
+                          : 'bg-surface border-line-strong',
                         active ? 'ring-2 ring-offset-2 ring-primary-500' : '',
                         'h-4 w-4 rounded-full border flex items-center justify-center',
                       ]"
                       aria-hidden="true"
                     >
-                      <span class="rounded-full bg-white w-1.5 h-1.5" />
+                      <span class="rounded-full bg-surface w-1.5 h-1.5" />
                     </span>
                     <RadioGroupLabel
                       as="span"
                       :class="[
-                        checked ? 'text-primary-900' : 'text-gray-900',
+                        checked ? 'text-primary-900' : 'text-heading',
                         'ml-3 font-medium',
                       ]"
                     >
@@ -226,7 +226,7 @@
                   >
                     <span
                       :class="[
-                        checked ? 'text-primary-900' : 'text-gray-900',
+                        checked ? 'text-primary-900' : 'text-heading',
                         'font-medium',
                       ]"
                     >
@@ -328,18 +328,18 @@
         <div class="mt-10"></div>
 
         <!-- HighLights  -->
-        <div class="border-t border-gray-200 mt-10 pt-10">
-          <h3 class="text-sm font-medium text-gray-900">
+        <div class="border-t border-line-default mt-10 pt-10">
+          <h3 class="text-sm font-medium text-heading">
             {{ $t('modules.what_you_get') }}
           </h3>
-          <div class="mt-4 prose prose-sm max-w-none text-gray-500">
+          <div class="mt-4 prose prose-sm max-w-none text-muted">
             <div
-              class="prose prose-sm max-w-none text-gray-500 text-sm"
+              class="prose prose-sm max-w-none text-muted text-sm"
               v-html="moduleData.highlights"
             />
           </div>
         </div>
-        <div class="border-t border-gray-200 mt-10 pt-10">
+        <div class="border-t border-line-default mt-10 pt-10">
           <div
             v-for="(link, key) in moduleData.links"
             :key="key"
@@ -352,7 +352,7 @@
           </div>
         </div>
         <!-- Installation Steps  -->
-        <div v-if="isInstalling" class="border-t border-gray-200 mt-10 pt-10">
+        <div v-if="isInstalling" class="border-t border-line-default mt-10 pt-10">
           <ul class="w-full p-0 list-none">
             <li
               v-for="step in installationSteps"
@@ -362,7 +362,7 @@
                 justify-between
                 w-full
                 py-3
-                border-b border-gray-200 border-solid
+                border-b border-line-default border-solid
                 last:border-b-0
               "
             >
@@ -370,7 +370,7 @@
                 {{ $t(step.translationKey) }}
               </p>
               <div class="flex flex-row items-center">
-                <span v-if="step.time" class="mr-3 text-xs text-gray-500">
+                <span v-if="step.time" class="mr-3 text-xs text-muted">
                   {{ step.time }}
                 </span>
                 <span
@@ -386,8 +386,8 @@
         </div>
 
         <!-- Social Share  -->
-        <!-- <div class="border-t border-gray-200 mt-10 pt-10">
-          <h3 class="text-sm font-medium text-gray-900">Share</h3>
+        <!-- <div class="border-t border-line-default mt-10 pt-10">
+          <h3 class="text-sm font-medium text-heading">Share</h3>
           <ul role="list" class="flex items-center space-x-6 mt-4">
             <li>
               <a
@@ -398,8 +398,8 @@
                   justify-center
                   w-6
                   h-6
-                  text-gray-400
-                  hover:text-gray-500
+                  text-subtle
+                  hover:text-muted
                 "
               >
                 <span class="sr-only">Share on Facebook</span>
@@ -426,8 +426,8 @@
                   justify-center
                   w-6
                   h-6
-                  text-gray-400
-                  hover:text-gray-500
+                  text-subtle
+                  hover:text-muted
                 "
               >
                 <span class="sr-only">Share on Instagram</span>
@@ -454,8 +454,8 @@
                   justify-center
                   w-6
                   h-6
-                  text-gray-400
-                  hover:text-gray-500
+                  text-subtle
+                  hover:text-muted
                 "
               >
                 <span class="sr-only">Share on Twitter</span>
@@ -485,13 +485,13 @@
         "
       >
         <TabGroup as="div">
-          <TabList class="-mb-px flex space-x-8 border-b border-gray-200">
+          <TabList class="-mb-px flex space-x-8 border-b border-line-default">
             <Tab v-slot="{ selected }" as="template">
               <button
                 :class="[
                   selected
                     ? 'border-primary-600 text-primary-600'
-                    : 'border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300',
+                    : 'border-transparent text-body hover:text-heading hover:border-line-strong',
                   'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
                 ]"
               >
@@ -503,7 +503,7 @@
                 :class="[
                   selected
                     ? 'border-primary-600 text-primary-600'
-                    : 'border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300',
+                    : 'border-transparent text-body hover:text-heading hover:border-line-strong',
                   'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
                 ]"
               >
@@ -515,7 +515,7 @@
                 :class="[
                   selected
                     ? 'border-primary-600 text-primary-600'
-                    : 'border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300',
+                    : 'border-transparent text-body hover:text-heading hover:border-line-strong',
                   'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
                 ]"
               >
@@ -531,7 +531,7 @@
                 <div
                   v-for="(review, reviewIdx) in moduleData.reviews"
                   :key="reviewIdx"
-                  class="flex text-sm text-gray-500 space-x-4"
+                  class="flex text-sm text-muted space-x-4"
                 >
                   <div class="flex-none py-10">
                     <span
@@ -542,7 +542,7 @@
                         h-12
                         w-12
                         rounded-full
-                        bg-gray-500
+                        bg-surface-secondary0
                       "
                     >
                       <span
@@ -559,11 +559,11 @@
                   </div>
                   <div
                     :class="[
-                      reviewIdx === 0 ? '' : 'border-t border-gray-200',
+                      reviewIdx === 0 ? '' : 'border-t border-line-default',
                       'py-10',
                     ]"
                   >
-                    <h3 class="font-medium text-gray-900">
+                    <h3 class="font-medium text-heading">
                       {{ review.customer.name }}
                     </h3>
                     <p>
@@ -575,28 +575,28 @@
                     </div>
 
                     <div
-                      class="mt-4 prose prose-sm max-w-none text-gray-500"
+                      class="mt-4 prose prose-sm max-w-none text-muted"
                       v-html="review.feedback"
                     />
                   </div>
                 </div>
               </div>
               <div v-else class="flex w-full items-center justify-center">
-                <p class="text-gray-500 mt-10 text-sm">
+                <p class="text-muted mt-10 text-sm">
                   {{ $t('modules.no_reviews_found') }}
                 </p>
               </div>
             </TabPanel>
 
             <!-- FAQs  -->
-            <TabPanel as="dl" class="text-sm text-gray-500">
+            <TabPanel as="dl" class="text-sm text-muted">
               <h3 class="sr-only">Frequently Asked Questions</h3>
 
               <template v-for="faq in moduleData.faq" :key="faq.question">
-                <dt class="mt-10 font-medium text-gray-900">
+                <dt class="mt-10 font-medium text-heading">
                   {{ faq.question }}
                 </dt>
-                <dd class="mt-2 prose prose-sm max-w-none text-gray-500">
+                <dd class="mt-2 prose prose-sm max-w-none text-muted">
                   <p>{{ faq.answer }}</p>
                 </dd>
               </template>
@@ -607,7 +607,7 @@
               <h3 class="sr-only">License</h3>
 
               <div
-                class="prose prose-sm max-w-none text-gray-500"
+                class="prose prose-sm max-w-none text-muted"
                 v-html="moduleData.license"
               />
             </TabPanel>
@@ -622,7 +622,7 @@
       class="mt-24 sm:mt-32 lg:max-w-none"
     >
       <div class="flex items-center justify-between space-x-4">
-        <h2 class="text-lg font-medium text-gray-900">
+        <h2 class="text-lg font-medium text-heading">
           {{ $t('modules.other_modules') }}
         </h2>
         <a
@@ -955,7 +955,7 @@ function statusClass(step) {
 
   switch (status) {
     case 'pending':
-      return 'text-primary-800 bg-gray-200'
+      return 'text-primary-800 bg-surface-muted'
     case 'finished':
       return 'text-teal-500 bg-teal-100'
     case 'running':
diff --git a/resources/scripts/admin/views/modules/partials/ModuleCard.vue b/resources/scripts/admin/views/modules/partials/ModuleCard.vue
index 4f7c0113..d4134e15 100644
--- a/resources/scripts/admin/views/modules/partials/ModuleCard.vue
+++ b/resources/scripts/admin/views/modules/partials/ModuleCard.vue
@@ -3,7 +3,7 @@
     class="
       relative
       shadow-md
-      border-2 border-gray-200/60
+      border-2 border-line-default/60
       rounded-lg
       cursor-pointer
       overflow-hidden
@@ -55,7 +55,7 @@
       :src="data.cover"
       alt="cover"
     />
-    <div class="px-6 py-5 flex flex-col bg-gray-50 flex-1 justify-between">
+    <div class="px-6 py-5 flex flex-col bg-surface-secondary flex-1 justify-between">
       <span
         class="
           text-lg
@@ -85,7 +85,7 @@
       </div>
       <base-text
         :text="data.short_description"
-        class="pt-4 text-gray-500 h-16 line-clamp-2"
+        class="pt-4 text-muted h-16 line-clamp-2"
       >
       </base-text>
       <div
diff --git a/resources/scripts/admin/views/modules/partials/ModuleCardPlaceholder.vue b/resources/scripts/admin/views/modules/partials/ModuleCardPlaceholder.vue
index fb664cde..e500594e 100644
--- a/resources/scripts/admin/views/modules/partials/ModuleCardPlaceholder.vue
+++ b/resources/scripts/admin/views/modules/partials/ModuleCardPlaceholder.vue
@@ -3,7 +3,7 @@
     <div
       class="
         shadow-md
-        border-2 border-gray-200/60
+        border-2 border-line-default/60
         rounded-lg
         cursor-pointer
         overflow-hidden
@@ -11,7 +11,7 @@
       "
     >
       <BaseContentPlaceholdersBox class="h-48 lg:h-64 md:h-48 w-full" rounded />
-      <div class="px-6 py-5 flex flex-col bg-gray-50 flex-1 justify-between">
+      <div class="px-6 py-5 flex flex-col bg-surface-secondary flex-1 justify-between">
         <BaseContentPlaceholdersText class="w-32 h-8" :lines="1" rounded />
         <div class="flex items-center mt-2">
           <BaseContentPlaceholdersBox
diff --git a/resources/scripts/admin/views/modules/partials/ModulePlaceholder.vue b/resources/scripts/admin/views/modules/partials/ModulePlaceholder.vue
index b5f6c934..7bf138ea 100644
--- a/resources/scripts/admin/views/modules/partials/ModulePlaceholder.vue
+++ b/resources/scripts/admin/views/modules/partials/ModulePlaceholder.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseContentPlaceholders rounded>
-    <BasePage class="bg-white">
+    <BasePage class="bg-surface">
 
       <!-- Breadcrumb-->
       <BaseContentPlaceholdersText class="mt-4 h-8 w-40" :lines="1"/>
@@ -70,7 +70,7 @@
           <div class="mt-10"></div>
 
           <!-- HightLight  -->
-          <div class="border-t border-gray-200 mt-10 pt-10">
+          <div class="border-t border-line-default mt-10 pt-10">
             <div>
               <BaseContentPlaceholdersText class="w-24 h-6" :lines="1" />
               <BaseContentPlaceholdersText
@@ -81,7 +81,7 @@
           </div>
 
           <!-- Social Share  -->
-          <div class="border-t border-gray-200 mt-10 pt-10">
+          <div class="border-t border-line-default mt-10 pt-10">
             <BaseContentPlaceholdersText class="h-6 w-24" :lines="1" />
             <BaseContentPlaceholdersText class="h-10 w-32 mt-4" :lines="1" />
           </div>
diff --git a/resources/scripts/admin/views/modules/partials/RecentModuleCard.vue b/resources/scripts/admin/views/modules/partials/RecentModuleCard.vue
index e735270b..dcd88651 100644
--- a/resources/scripts/admin/views/modules/partials/RecentModuleCard.vue
+++ b/resources/scripts/admin/views/modules/partials/RecentModuleCard.vue
@@ -1,7 +1,7 @@
 <template>
   <router-link class="relative group" :to="`/admin/modules/${data.slug}`">
     <div class="relative group">
-      <div class="aspect-w-4 aspect-h-3 rounded-lg overflow-hidden bg-gray-100">
+      <div class="aspect-w-4 aspect-h-3 rounded-lg overflow-hidden bg-surface-tertiary">
         <img :src="data.cover" class="object-center object-cover" />
         <div
           class="flex items-end opacity-0 p-4 group-hover:opacity-100"
@@ -32,7 +32,7 @@
           justify-between
           text-base
           font-medium
-          text-gray-900
+          text-heading
           space-x-8
           cursor-pointer
         "
diff --git a/resources/scripts/admin/views/payments/Create.vue b/resources/scripts/admin/views/payments/Create.vue
index 61dc35ce..55c4de15 100644
--- a/resources/scripts/admin/views/payments/Create.vue
+++ b/resources/scripts/admin/views/payments/Create.vue
@@ -215,7 +215,7 @@
             <SelectNotePopup type="Payment" @select="onSelectNote" />
           </div>
 
-          <label class="mb-4 text-sm font-medium text-gray-800">
+          <label class="mb-4 text-sm font-medium text-heading">
             {{ $t('estimates.notes') }}
           </label>
 
diff --git a/resources/scripts/admin/views/payments/Index.vue b/resources/scripts/admin/views/payments/Index.vue
index 5ff72c7c..2006ab1a 100644
--- a/resources/scripts/admin/views/payments/Index.vue
+++ b/resources/scripts/admin/views/payments/Index.vue
@@ -116,7 +116,7 @@
             </span>
           </template>
           <BaseDropdownItem @click="removeMultiplePayments">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -246,7 +246,7 @@ const paymentColumns = computed(() => {
       key: 'payment_date',
       label: t('payments.date'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     { key: 'payment_number', label: t('payments.payment_number') },
     { key: 'name', label: t('payments.customer') },
diff --git a/resources/scripts/admin/views/payments/View.vue b/resources/scripts/admin/views/payments/View.vue
index 9fcc87ef..34313d99 100644
--- a/resources/scripts/admin/views/payments/View.vue
+++ b/resources/scripts/admin/views/payments/View.vue
@@ -31,7 +31,7 @@
         pt-16
         pb-[6rem]
         ml-56
-        bg-white
+        bg-surface
         xl:ml-64
         w-88
         xl:block
@@ -45,7 +45,7 @@
           px-4
           pt-8
           pb-6
-          border border-gray-200 border-solid
+          border border-line-default border-solid
         "
       >
         <BaseInput
@@ -76,7 +76,7 @@
                 pb-2
                 mb-2
                 text-sm
-                border-b border-gray-200 border-solid
+                border-b border-line-default border-solid
               "
             >
               {{ $t('general.sort_by') }}
@@ -139,7 +139,7 @@
 
       <div
         ref="paymentListSection"
-        class="h-full overflow-y-scroll border-l border-gray-200 border-solid"
+        class="h-full overflow-y-scroll border-l border-line-default border-solid"
       >
         <div v-for="(payment, index) in paymentList" :key="index">
           <router-link
@@ -147,9 +147,9 @@
             :id="'payment-' + payment.id"
             :to="`/admin/payments/${payment.id}/view`"
             :class="[
-              'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
+              'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
               {
-                'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
+                'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
                   hasActiveUrl(payment.id),
               },
             ]"
@@ -165,7 +165,7 @@
                   not-italic
                   font-normal
                   leading-5
-                  text-black
+                  text-heading
                   capitalize
                   truncate
                 "
@@ -178,7 +178,7 @@
                   not-italic
                   font-medium
                   leading-5
-                  text-gray-500
+                  text-muted
                   capitalize
                 "
               >
@@ -192,7 +192,7 @@
                   not-italic
                   font-medium
                   leading-5
-                  text-gray-500
+                  text-muted
                   capitalize
                 "
               >
@@ -209,13 +209,13 @@
                   not-italic
                   font-semibold
                   leading-8
-                  text-right text-gray-900
+                  text-right text-heading
                 "
                 :amount="payment?.amount"
                 :currency="payment.customer?.currency"
               />
 
-              <div class="text-sm text-right text-gray-500 non-italic">
+              <div class="text-sm text-right text-muted non-italic">
                 {{ payment.formatted_payment_date }}
               </div>
             </div>
@@ -226,7 +226,7 @@
         </div>
         <p
           v-if="!paymentList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-body"
         >
           {{ $t('payments.no_matching_payments') }}
         </p>
diff --git a/resources/scripts/admin/views/recurring-invoices/Index.vue b/resources/scripts/admin/views/recurring-invoices/Index.vue
index 395101e3..2c1e707e 100644
--- a/resources/scripts/admin/views/recurring-invoices/Index.vue
+++ b/resources/scripts/admin/views/recurring-invoices/Index.vue
@@ -120,7 +120,7 @@
           h-10
           mt-5
           list-none
-          border-b-2 border-gray-200 border-solid
+          border-b-2 border-line-default border-solid
         "
       >
         <!-- Tabs -->
@@ -155,7 +155,7 @@
           </template>
 
           <BaseDropdownItem @click="removeMultipleRecurringInvoices()">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -212,7 +212,7 @@
                   : ''
               "
               tag="span"
-              class="text-xs text-gray-400"
+              class="text-xs text-subtle"
             />
           </router-link>
         </template>
@@ -306,7 +306,7 @@ const invoiceColumns = computed(() => {
     {
       key: 'checkbox',
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'starts_at',
diff --git a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
index d21c556d..bf95f706 100644
--- a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
+++ b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
@@ -16,11 +16,11 @@
       </div>
 
       <div class="ml-2">
-        <p class="p-0 mb-1 leading-snug text-left text-black">
+        <p class="p-0 mb-1 leading-snug text-left text-heading">
           {{ $t('recurring_invoices.send_automatically') }}
         </p>
         <p
-          class="p-0 m-0 text-xs leading-tight text-left text-gray-500"
+          class="p-0 m-0 text-xs leading-tight text-left text-muted"
           style="max-width: 480px"
         >
           {{ $t('recurring_invoices.send_automatically_desc') }}
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/Invoices.vue b/resources/scripts/admin/views/recurring-invoices/partials/Invoices.vue
index fa997aa3..e56ee1a8 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/Invoices.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/Invoices.vue
@@ -73,7 +73,7 @@ const invoiceColumns = computed(() => {
       key: 'invoice_date',
       label: t('invoices.date'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     { key: 'invoice_number', label: t('invoices.invoice') },
     { key: 'customer.name', label: t('invoices.customer') },
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
index 638101f9..4eb8e759 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
@@ -148,7 +148,7 @@ onSearched = debounce(onSearched, 500)
       pt-16
       pb-[6.4rem]
       ml-56
-      bg-white
+      bg-surface
       xl:ml-64
       w-88
       xl:block
@@ -162,7 +162,7 @@ onSearched = debounce(onSearched, 500)
         px-4
         pt-8
         pb-2
-        border border-gray-200 border-solid
+        border border-line-default border-solid
         height-full
       "
     >
@@ -175,7 +175,7 @@ onSearched = debounce(onSearched, 500)
           @input="onSearched()"
         >
           <template #right>
-            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
+            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
           </template>
         </BaseInput>
       </div>
@@ -194,7 +194,7 @@ onSearched = debounce(onSearched, 500)
               pb-2
               mb-1 mb-2
               text-sm
-              border-b border-gray-200 border-solid
+              border-b border-line-default border-solid
             "
           >
             {{ $t('general.sort_by') }}
@@ -241,7 +241,7 @@ onSearched = debounce(onSearched, 500)
       class="
         h-full
         overflow-y-scroll
-        border-l border-gray-200 border-solid
+        border-l border-line-default border-solid
         base-scroll
       "
     >
@@ -251,9 +251,9 @@ onSearched = debounce(onSearched, 500)
           :id="'recurring-invoice-' + invoice.id"
           :to="`/admin/recurring-invoices/${invoice.id}/view`"
           :class="[
-            'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-l-transparent',
+            'flex justify-between side-invoice p-4 cursor-pointer hover:bg-hover-strong items-center border-l-4 border-l-transparent',
             {
-              'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
+              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
                 hasActiveUrl(invoice.id),
             },
           ]"
@@ -269,7 +269,7 @@ onSearched = debounce(onSearched, 500)
                 not-italic
                 font-normal
                 leading-5
-                text-black
+                text-heading
                 capitalize
                 truncate
               "
@@ -283,7 +283,7 @@ onSearched = debounce(onSearched, 500)
                 not-italic
                 font-medium
                 leading-5
-                text-gray-600
+                text-body
               "
             >
               {{ invoice.invoice_number }}
@@ -305,7 +305,7 @@ onSearched = debounce(onSearched, 500)
                 not-italic
                 font-semibold
                 leading-8
-                text-right text-gray-900
+                text-right text-heading
               "
               :amount="invoice.total"
               :currency="invoice.customer.currency"
@@ -317,7 +317,7 @@ onSearched = debounce(onSearched, 500)
                 not-italic
                 font-normal
                 leading-5
-                text-right text-gray-600
+                text-right text-body
                 est-date
               "
             >
@@ -331,7 +331,7 @@ onSearched = debounce(onSearched, 500)
       </div>
       <p
         v-if="!invoiceList?.length && !isLoading"
-        class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+        class="flex justify-center px-4 mt-5 text-sm text-body"
       >
         {{ $t('invoices.no_matching_invoices') }}
       </p>
diff --git a/resources/scripts/admin/views/reports/ExpensesReport.vue b/resources/scripts/admin/views/reports/ExpensesReport.vue
index 85836669..b6915c32 100644
--- a/resources/scripts/admin/views/reports/ExpensesReport.vue
+++ b/resources/scripts/admin/views/reports/ExpensesReport.vue
@@ -55,7 +55,7 @@
           hidden
           w-full
           h-screen
-          border-gray-100 border-solid
+          border-line-light border-solid
           rounded
           md:flex
         "
diff --git a/resources/scripts/admin/views/reports/ProfitLossReport.vue b/resources/scripts/admin/views/reports/ProfitLossReport.vue
index d2ed6df1..91449421 100644
--- a/resources/scripts/admin/views/reports/ProfitLossReport.vue
+++ b/resources/scripts/admin/views/reports/ProfitLossReport.vue
@@ -55,7 +55,7 @@
           hidden
           w-full
           h-screen
-          border-gray-100 border-solid
+          border-line-light border-solid
           rounded
           md:flex
         "
diff --git a/resources/scripts/admin/views/reports/SalesReports.vue b/resources/scripts/admin/views/reports/SalesReports.vue
index 4fed5772..3d53543a 100644
--- a/resources/scripts/admin/views/reports/SalesReports.vue
+++ b/resources/scripts/admin/views/reports/SalesReports.vue
@@ -68,7 +68,7 @@
           hidden
           w-full
           h-screen
-          border-gray-100 border-solid
+          border-line-light border-solid
           rounded
           md:flex
         "
diff --git a/resources/scripts/admin/views/reports/TaxReport.vue b/resources/scripts/admin/views/reports/TaxReport.vue
index d6f53941..461a547b 100644
--- a/resources/scripts/admin/views/reports/TaxReport.vue
+++ b/resources/scripts/admin/views/reports/TaxReport.vue
@@ -54,7 +54,7 @@
           hidden
           w-full
           h-screen
-          border-gray-100 border-solid
+          border-line-light border-solid
           rounded
           md:flex
         "
diff --git a/resources/scripts/admin/views/settings/BackupSetting.vue b/resources/scripts/admin/views/settings/BackupSetting.vue
index 9cc3d56f..625e1932 100644
--- a/resources/scripts/admin/views/settings/BackupSetting.vue
+++ b/resources/scripts/admin/views/settings/BackupSetting.vue
@@ -47,18 +47,18 @@
         <BaseDropdown>
           <template #activator>
             <div class="inline-block">
-              <BaseIcon name="EllipsisHorizontalIcon" class="text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
             </div>
           </template>
 
           <BaseDropdownItem @click="onDownloadBckup(row.data)">
-            <BaseIcon name="CloudArrowDownIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="CloudArrowDownIcon" class="mr-3 text-body" />
 
             {{ $t('general.download') }}
           </BaseDropdownItem>
 
           <BaseDropdownItem @click="onRemoveBackup(row.data)">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -95,17 +95,17 @@ const backupColumns = computed(() => {
       key: 'path',
       label: t('settings.backup.path'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'created_at',
       label: t('settings.backup.created_at'),
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'size',
       label: t('settings.backup.size'),
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'actions',
diff --git a/resources/scripts/admin/views/settings/CompanyInfoSettings.vue b/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
index d712aae9..a5c0d442 100644
--- a/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
+++ b/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
@@ -110,10 +110,10 @@
 
       <div v-if="companyStore.companies.length !== 1" class="py-5">
         <BaseDivider class="my-4" />
-        <h3 class="text-lg leading-6 font-medium text-gray-900">
+        <h3 class="text-lg leading-6 font-medium text-heading">
           {{ $t('settings.company_info.delete_company') }}
         </h3>
-        <div class="mt-2 max-w-xl text-sm text-gray-500">
+        <div class="mt-2 max-w-xl text-sm text-muted">
           <p>
             {{ $t('settings.company_info.delete_company_description') }}
           </p>
diff --git a/resources/scripts/admin/views/settings/CompanyMailConfigSetting.vue b/resources/scripts/admin/views/settings/CompanyMailConfigSetting.vue
index c739478d..4f943bdd 100644
--- a/resources/scripts/admin/views/settings/CompanyMailConfigSetting.vue
+++ b/resources/scripts/admin/views/settings/CompanyMailConfigSetting.vue
@@ -35,7 +35,7 @@
       </component>
     </div>
 
-    <div v-if="!useCustomMailConfig" class="mt-4 p-4 rounded-md bg-gray-50 text-sm text-gray-500">
+    <div v-if="!useCustomMailConfig" class="mt-4 p-4 rounded-md bg-surface-secondary text-sm text-muted">
       {{ $t('settings.mail.using_global_mail_config') }}
     </div>
   </BaseSettingCard>
diff --git a/resources/scripts/admin/views/settings/CustomFieldsSetting.vue b/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
index 016d37f9..39c5705c 100644
--- a/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
+++ b/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
@@ -27,7 +27,7 @@
     >
       <template #cell-name="{ row }">
         {{ row.data.name }}
-        <span class="text-xs text-gray-500"> ({{ row.data.slug }})</span>
+        <span class="text-xs text-muted"> ({{ row.data.slug }})</span>
       </template>
 
       <template #cell-model_type="{ row }">
@@ -96,7 +96,7 @@ const customFieldsColumns = computed(() => {
       key: 'name',
       label: t('settings.custom_fields.name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'model_type',
diff --git a/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue b/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
index 7aaa7132..f72a4f44 100644
--- a/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
+++ b/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
@@ -8,7 +8,7 @@
             {{ $t('settings.menu_title.exchange_rate') }}
           </h6>
           <p
-            class="mt-2 text-sm leading-snug text-left text-gray-500"
+            class="mt-2 text-sm leading-snug text-left text-muted"
             style="max-width: 680px"
           >
             {{ $t('settings.exchange_rate.providers_description') }}
@@ -49,17 +49,17 @@
         <BaseDropdown>
           <template #activator>
             <div class="inline-block">
-              <EllipsisHorizontalIcon class="w-5 text-gray-500" />
+              <EllipsisHorizontalIcon class="w-5 text-muted" />
             </div>
           </template>
 
           <BaseDropdownItem @click="editExchangeRate(row.data.id)">
-            <PencilIcon class="h-5 mr-3 text-gray-600" />
+            <PencilIcon class="h-5 mr-3 text-body" />
             {{ $t('general.edit') }}
           </BaseDropdownItem>
 
           <BaseDropdownItem @click="removeExchangeRate(row.data.id)">
-            <TrashIcon class="h-5 mr-3 text-gray-600" />
+            <TrashIcon class="h-5 mr-3 text-body" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -104,19 +104,19 @@ const drivers = computed(() => {
       key: 'driver',
       label: t('settings.exchange_rate.driver'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'key',
       label: t('settings.exchange_rate.key'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'active',
       label: t('settings.exchange_rate.active'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'actions',
diff --git a/resources/scripts/admin/views/settings/ExpenseCategorySetting.vue b/resources/scripts/admin/views/settings/ExpenseCategorySetting.vue
index c0db9d01..4d5accc5 100644
--- a/resources/scripts/admin/views/settings/ExpenseCategorySetting.vue
+++ b/resources/scripts/admin/views/settings/ExpenseCategorySetting.vue
@@ -65,13 +65,13 @@ const ExpenseCategoryColumns = computed(() => {
       key: 'name',
       label: t('settings.expense_category.category_name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'description',
       label: t('settings.expense_category.category_description'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
 
     {
diff --git a/resources/scripts/admin/views/settings/FileDiskSetting.vue b/resources/scripts/admin/views/settings/FileDiskSetting.vue
index abe106d1..eeed11ac 100644
--- a/resources/scripts/admin/views/settings/FileDiskSetting.vue
+++ b/resources/scripts/admin/views/settings/FileDiskSetting.vue
@@ -39,7 +39,7 @@
         <BaseDropdown v-if="isNotSystemDisk(row.data)">
           <template #activator>
             <div class="inline-block">
-              <BaseIcon name="EllipsisHorizontalIcon" class="text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
             </div>
           </template>
 
@@ -56,7 +56,7 @@
             v-if="row.data.type !== 'SYSTEM'"
             @click="openEditDiskModal(row.data)"
           >
-            <BaseIcon name="PencilIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="PencilIcon" class="mr-3 text-body" />
 
             {{ $t('general.edit') }}
           </BaseDropdownItem>
@@ -65,7 +65,7 @@
             v-if="row.data.type !== 'SYSTEM' && !row.data.set_as_default"
             @click="removeDisk(row.data.id)"
           >
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -109,26 +109,26 @@ const fileDiskColumns = computed(() => {
       key: 'name',
       label: t('settings.disk.disk_name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'driver',
       label: t('settings.disk.filesystem_driver'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'type',
       label: t('settings.disk.disk_type'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
 
     {
       key: 'set_as_default',
       label: t('settings.disk.is_default'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'actions',
diff --git a/resources/scripts/admin/views/settings/NotesSetting.vue b/resources/scripts/admin/views/settings/NotesSetting.vue
index 4b4c934d..1e0806b6 100644
--- a/resources/scripts/admin/views/settings/NotesSetting.vue
+++ b/resources/scripts/admin/views/settings/NotesSetting.vue
@@ -66,13 +66,13 @@ const notesColumns = computed(() => {
       key: 'name',
       label: t('settings.customization.notes.name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900 flex gap-1 items-center',
+      tdClass: 'font-medium text-heading flex gap-1 items-center',
     },
     {
       key: 'type',
       label: t('settings.customization.notes.type'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
 
     {
diff --git a/resources/scripts/admin/views/settings/NotificationsSetting.vue b/resources/scripts/admin/views/settings/NotificationsSetting.vue
index f863af28..4463acae 100644
--- a/resources/scripts/admin/views/settings/NotificationsSetting.vue
+++ b/resources/scripts/admin/views/settings/NotificationsSetting.vue
@@ -44,7 +44,7 @@
 
     <BaseDivider class="mt-6 mb-2" />
 
-    <ul class="divide-y divide-gray-200">
+    <ul class="divide-y divide-line-default">
       <BaseSwitchSection
         v-model="invoiceViewedField"
         :title="$t('settings.notification.invoice_viewed')"
diff --git a/resources/scripts/admin/views/settings/PaymentsModeSetting.vue b/resources/scripts/admin/views/settings/PaymentsModeSetting.vue
index e1f2b000..86f26c8a 100644
--- a/resources/scripts/admin/views/settings/PaymentsModeSetting.vue
+++ b/resources/scripts/admin/views/settings/PaymentsModeSetting.vue
@@ -58,7 +58,7 @@ const paymentColumns = computed(() => {
       key: 'name',
       label: t('settings.payment_modes.mode_name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'actions',
diff --git a/resources/scripts/admin/views/settings/RolesSettings.vue b/resources/scripts/admin/views/settings/RolesSettings.vue
index ef049f43..2f0a21da 100644
--- a/resources/scripts/admin/views/settings/RolesSettings.vue
+++ b/resources/scripts/admin/views/settings/RolesSettings.vue
@@ -64,12 +64,12 @@ const roleColumns = computed(() => {
       key: 'name',
       label: t('settings.roles.role_name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'created_at',
       label: t('settings.roles.added_on'),
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
 
     {
diff --git a/resources/scripts/admin/views/settings/SettingsIndex.vue b/resources/scripts/admin/views/settings/SettingsIndex.vue
index 42728de7..5bf54673 100644
--- a/resources/scripts/admin/views/settings/SettingsIndex.vue
+++ b/resources/scripts/admin/views/settings/SettingsIndex.vue
@@ -24,7 +24,7 @@
       />
     </div>
 
-    <div class="flex">
+    <div class="flex gap-8">
       <div class="hidden mt-1 xl:block min-w-[240px]">
         <BaseList>
           <BaseListItem
diff --git a/resources/scripts/admin/views/settings/TaxTypesSetting.vue b/resources/scripts/admin/views/settings/TaxTypesSetting.vue
index 740dfe5b..100f4882 100644
--- a/resources/scripts/admin/views/settings/TaxTypesSetting.vue
+++ b/resources/scripts/admin/views/settings/TaxTypesSetting.vue
@@ -102,19 +102,19 @@ const taxTypeColumns = computed(() => {
       key: 'name',
       label: t('settings.tax_types.tax_name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'calculation_type',
       label: t('settings.tax_types.calculation_type'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'amount',
       label: t('settings.tax_types.amount'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'actions',
diff --git a/resources/scripts/admin/views/settings/UpdateAppSetting.vue b/resources/scripts/admin/views/settings/UpdateAppSetting.vue
index 2723ae7f..d572fb77 100644
--- a/resources/scripts/admin/views/settings/UpdateAppSetting.vue
+++ b/resources/scripts/admin/views/settings/UpdateAppSetting.vue
@@ -8,7 +8,7 @@
         {{ $t('settings.update_app.current_version') }}
       </label>
 
-      <div class="w-full border-b-2 border-gray-100 border-solid pb-4">
+      <div class="w-full border-b-2 border-line-light border-solid pb-4">
         <div
           class="
           box-border
@@ -16,9 +16,9 @@
           w-auto
           p-3
           my-2
-          text-sm text-gray-600
-          bg-gray-200
-          border border-gray-200 border-solid
+          text-sm text-body
+          bg-surface-muted
+          border border-line-default border-solid
           rounded-md
           version
         "
@@ -81,9 +81,9 @@
             w-auto
             p-3
             my-2
-            text-sm text-gray-600
-            bg-gray-200
-            border border-gray-200 border-solid
+            text-sm text-body
+            bg-surface-muted
+            border border-line-default border-solid
             rounded-md
             version
           "
@@ -98,7 +98,7 @@
             mb-2
             text-sm
             leading-snug
-            text-gray-500
+            text-muted
             update-description
           "
           style="white-space: pre-wrap; max-width: 480px"
@@ -113,7 +113,7 @@
             mb-8
             text-sm
             leading-snug
-            text-gray-500
+            text-muted
             update-changelog
           "
           style="white-space: pre-wrap; max-width: 480px"
@@ -125,11 +125,11 @@
           {{ $t('settings.update_app.requirements') }}
         </label>
 
-        <table class="w-1/2 mt-2 border-2 border-gray-200 BaseTable-fixed">
+        <table class="w-1/2 mt-2 border-2 border-line-default BaseTable-fixed">
           <tr
             v-for="(ext, i) in requiredExtentions"
             :key="i"
-            class="p-2 border-2 border-gray-200"
+            class="p-2 border-2 border-line-default"
           >
             <td width="70%" class="p-2 text-sm truncate">
               {{ i }}
@@ -170,7 +170,7 @@
             {{ $t('settings.update_app.update_progress') }}
           </h6>
           <p
-            class="mb-8 text-sm leading-snug text-gray-500"
+            class="mb-8 text-sm leading-snug text-muted"
             style="max-width: 480px"
           >
             {{ $t('settings.update_app.progress_text') }}
@@ -189,13 +189,13 @@
             justify-between
             w-full
             py-3
-            border-b border-gray-200 border-solid
+            border-b border-line-default border-solid
             last:border-b-0
           "
         >
           <p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
           <div class="flex flex-row items-center">
-            <span v-if="step.time" class="mr-3 text-xs text-gray-500">
+            <span v-if="step.time" class="mr-3 text-xs text-muted">
               {{ step.time }}
             </span>
             <span
@@ -329,7 +329,7 @@ function statusClass(step) {
 
   switch (status) {
     case 'pending':
-      return 'text-primary-800 bg-gray-200'
+      return 'text-primary-800 bg-surface-muted'
     case 'finished':
       return 'text-teal-500 bg-teal-100'
     case 'running':
diff --git a/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue b/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
index 938cc1f2..12e4ff94 100644
--- a/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
+++ b/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
@@ -1,8 +1,8 @@
 <template>
-  <h6 class="text-gray-900 text-lg font-medium">
+  <h6 class="text-heading text-lg font-medium">
     {{ $t(`settings.customization.${type}s.${type}_number_format`) }}
   </h6>
-  <p class="mt-1 text-sm text-gray-500">
+  <p class="mt-1 text-sm text-muted">
     {{
       $t(`settings.customization.${type}s.${type}_number_format_description`)
     }}
@@ -27,8 +27,8 @@
               not-italic
               font-medium
               leading-5
-              text-left text-gray-700
-              border-t border-b border-gray-200 border-solid
+              text-left text-body
+              border-t border-b border-line-default border-solid
             "
           ></th>
           <th
@@ -39,8 +39,8 @@
               not-italic
               font-medium
               leading-5
-              text-left text-gray-700
-              border-t border-b border-gray-200 border-solid
+              text-left text-body
+              border-t border-b border-line-default border-solid
             "
           >
             {{ $t('settings.customization.component') }}
@@ -53,8 +53,8 @@
               not-italic
               font-medium
               leading-5
-              text-left text-gray-700
-              border-t border-b border-gray-200 border-solid
+              text-left text-body
+              border-t border-b border-line-default border-solid
             "
           >
             {{ $t('settings.customization.Parameter') }}
@@ -67,15 +67,15 @@
               not-italic
               font-medium
               leading-5
-              text-left text-gray-700
-              border-t border-b border-gray-200 border-solid
+              text-left text-body
+              border-t border-b border-line-default border-solid
             "
           ></th>
         </tr>
       </thead>
       <draggable
         v-model="selectedFields"
-        class="divide-y divide-gray-200"
+        class="divide-y divide-line-default"
         item-key="id"
         tag="tbody"
         handle=".handle"
@@ -83,7 +83,7 @@
       >
         <template #item="{ element }">
           <tr class="relative">
-            <td class="text-gray-300 cursor-move handle align-middle">
+            <td class="text-subtle cursor-move handle align-middle">
               <DragIcon />
             </td>
             <td class="px-5 py-4">
@@ -93,7 +93,7 @@
                   text-sm
                   not-italic
                   font-medium
-                  text-primary-800
+                  text-primary-500
                   whitespace-nowrap
                   mr-2
                   min-w-[200px]
@@ -102,7 +102,7 @@
                 {{ element.label }}
               </label>
 
-              <p class="text-xs text-gray-500 mt-1">
+              <p class="text-xs text-muted mt-1">
                 {{ element.description }}
               </p>
             </td>
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue
index 978cdc37..96f2b25f 100644
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue
@@ -15,7 +15,7 @@
 
   <BaseDivider class="mt-6 mb-2" />
 
-  <ul class="divide-y divide-gray-200">
+  <ul class="divide-y divide-line-default">
     <BaseSwitchSection
       v-model="sendAsAttachmentField"
       :title="$t('settings.customization.estimates.estimate_email_attachment')"
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
index d972d4ee..3ecc62ab 100644
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
@@ -1,8 +1,8 @@
 <template>
-  <h6 class="text-gray-900 text-lg font-medium">
+  <h6 class="text-heading text-lg font-medium">
     {{ $t('settings.customization.estimates.convert_estimate_options') }}
   </h6>
-  <p class="mt-1 text-sm text-gray-500">
+  <p class="mt-1 text-sm text-muted">
     {{ $t('settings.customization.estimates.convert_estimate_description') }}
   </p>
 
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
index dc75dbde..2f4bd4cb 100644
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
@@ -1,9 +1,9 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <h6 class="text-heading text-lg font-medium">
       {{ $t('settings.customization.estimates.default_formats') }}
     </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
+    <p class="mt-1 text-sm text-muted mb-2">
       {{ $t('settings.customization.estimates.default_formats_description') }}
     </p>
 
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
index f8a0591a..b5dcac8b 100644
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
@@ -1,9 +1,9 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <h6 class="text-heading text-lg font-medium">
       {{ $t('settings.customization.estimates.expiry_date') }}
     </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
+    <p class="mt-1 text-sm text-muted mb-2">
       {{ $t('settings.customization.estimates.expiry_date_description') }}
     </p>
 
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue
index 28b6cefc..780fb9a5 100644
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue
@@ -15,7 +15,7 @@
 
   <BaseDivider class="mt-6 mb-2" />
 
-  <ul class="divide-y divide-gray-200">
+  <ul class="divide-y divide-line-default">
     <BaseSwitchSection
       v-model="sendAsAttachmentField"
       :title="$t('settings.customization.invoices.invoice_email_attachment')"
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
index ac0ad5b0..70c33d48 100644
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
@@ -1,9 +1,9 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <h6 class="text-heading text-lg font-medium">
       {{ $t('settings.customization.invoices.default_formats') }}
     </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
+    <p class="mt-1 text-sm text-muted mb-2">
       {{ $t('settings.customization.invoices.default_formats_description') }}
     </p>
 
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
index f994fa15..a12d5bba 100644
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
@@ -1,9 +1,9 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <h6 class="text-heading text-lg font-medium">
       {{ $t('settings.customization.invoices.due_date') }}
     </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
+    <p class="mt-1 text-sm text-muted mb-2">
       {{ $t('settings.customization.invoices.due_date_description') }}
     </p>
 
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
index 4aa42db6..9389d3f0 100644
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
@@ -1,8 +1,8 @@
 <template>
-  <h6 class="text-gray-900 text-lg font-medium">
+  <h6 class="text-heading text-lg font-medium">
     {{ $t('settings.customization.invoices.retrospective_edits') }}
   </h6>
-  <p class="mt-1 text-sm text-gray-500">
+  <p class="mt-1 text-sm text-muted">
     {{ $t('settings.customization.invoices.retrospective_edits_description') }}
   </p>
 
diff --git a/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue b/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue
index 73ff180b..d386e3e7 100644
--- a/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue
+++ b/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue
@@ -15,14 +15,14 @@
       <BaseDropdown>
         <template #activator>
           <div class="inline-block">
-            <BaseIcon name="EllipsisHorizontalIcon" class="text-gray-500" />
+            <BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
           </div>
         </template>
 
         <BaseDropdownItem @click="editItemUnit(row)">
           <BaseIcon
             name="PencilIcon"
-            class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+            class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
           />
 
           {{ $t('general.edit') }}
@@ -30,7 +30,7 @@
         <BaseDropdownItem @click="removeItemUnit(row)">
           <BaseIcon
             name="TrashIcon"
-            class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+            class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
           />
           {{ $t('general.delete') }}
         </BaseDropdownItem>
@@ -60,7 +60,7 @@ const columns = computed(() => {
       key: 'name',
       label: t('settings.customization.items.unit_name'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     {
       key: 'actions',
diff --git a/resources/scripts/admin/views/settings/customization/payments/PaymentsTab.vue b/resources/scripts/admin/views/settings/customization/payments/PaymentsTab.vue
index 8552124f..5da762d9 100644
--- a/resources/scripts/admin/views/settings/customization/payments/PaymentsTab.vue
+++ b/resources/scripts/admin/views/settings/customization/payments/PaymentsTab.vue
@@ -7,7 +7,7 @@
 
   <BaseDivider class="mt-6 mb-2" />
 
-  <ul class="divide-y divide-gray-200">
+  <ul class="divide-y divide-line-default">
     <BaseSwitchSection
       v-model="sendAsAttachmentField"
       :title="$t('settings.customization.payments.payment_email_attachment')"
diff --git a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
index eb98f587..dd65d76b 100644
--- a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
@@ -1,9 +1,9 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <h6 class="text-heading text-lg font-medium">
       {{ $t('settings.customization.payments.default_formats') }}
     </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
+    <p class="mt-1 text-sm text-muted mb-2">
       {{ $t('settings.customization.payments.default_formats_description') }}
     </p>
 
diff --git a/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
index 18a86af9..e606231c 100644
--- a/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
@@ -60,7 +60,7 @@
           <template #right>
             <BaseIcon
               :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-gray-500 cursor-pointer"
+              class="mr-1 text-muted cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
           </template>
diff --git a/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
index 098d5e3a..2c8fc30f 100644
--- a/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
@@ -155,7 +155,7 @@
           <template #right>
             <BaseIcon
               :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-gray-500 cursor-pointer"
+              class="mr-1 text-muted cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
           </template>
diff --git a/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
index 49ab5501..15ae7ea9 100644
--- a/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
@@ -64,7 +64,7 @@
           <template #right>
             <BaseIcon
               :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-gray-500 cursor-pointer"
+              class="mr-1 text-muted cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
           </template>
diff --git a/resources/scripts/components/CompanySwitcher.vue b/resources/scripts/components/CompanySwitcher.vue
index 9c0b1ce0..2881ad62 100644
--- a/resources/scripts/components/CompanySwitcher.vue
+++ b/resources/scripts/components/CompanySwitcher.vue
@@ -45,7 +45,7 @@
     >
       <div
         v-if="isShow"
-        class="absolute right-0 mt-2 bg-white rounded-md shadow-lg"
+        class="absolute right-0 mt-2 bg-surface rounded-md shadow-lg"
       >
         <div
           class="
@@ -60,9 +60,9 @@
           <!-- Administration Mode -->
           <div v-if="userStore.currentUser?.is_super_admin">
             <div
-              class="p-2 px-3 rounded-md cursor-pointer hover:bg-gray-100 hover:text-primary-500"
+              class="p-2 px-3 rounded-md cursor-pointer hover:bg-hover-strong hover:text-primary-500"
               :class="{
-                'bg-gray-100 text-primary-500': companyStore.isAdminMode,
+                'bg-surface-tertiary text-primary-500': companyStore.isAdminMode,
               }"
               @click="enterAdminMode"
             >
@@ -77,7 +77,7 @@
                 </div>
               </div>
             </div>
-            <div class="border-t border-gray-100 my-1"></div>
+            <div class="border-t border-line-light my-1"></div>
           </div>
 
           <label
@@ -86,7 +86,7 @@
               py-2
               text-xs
               font-semibold
-              text-gray-400
+              text-subtle
               mb-0.5
               block
               uppercase
@@ -104,10 +104,10 @@
               p-2
               px-3
               mt-4
-              text-base text-gray-400
+              text-base text-subtle
             "
           >
-            <BaseIcon name="ExclamationCircleIcon" class="h-5 text-gray-400" />
+            <BaseIcon name="ExclamationCircleIcon" class="h-5 text-subtle" />
             {{ $t('company_switcher.no_results_found') }}
           </div>
           <div v-else>
@@ -120,10 +120,10 @@
                   px-3
                   rounded-md
                   cursor-pointer
-                  hover:bg-gray-100 hover:text-primary-500
+                  hover:bg-hover-strong hover:text-primary-500
                 "
                 :class="{
-                  'bg-gray-100 text-primary-500':
+                  'bg-surface-tertiary text-primary-500':
                     companyStore.selectedCompany && companyStore.selectedCompany.id === company.id,
                 }"
                 @click="changeCompany(company)"
@@ -138,7 +138,7 @@
                       overflow-hidden
                       text-base
                       font-semibold
-                      bg-gray-200
+                      bg-surface-muted
                       rounded-md
                       w-9
                       h-9
@@ -166,12 +166,12 @@
         <!-- Pending Invitations -->
         <div
           v-if="invitationStore.pendingInvitations.length > 0"
-          class="border-t border-gray-100 p-2"
+          class="border-t border-line-light p-2"
         >
           <label
             class="
               block px-1 pt-1 pb-2 text-xs font-semibold
-              leading-tight text-gray-400 uppercase
+              leading-tight text-subtle uppercase
             "
           >
             {{ $t('members.pending_invitations') }}
@@ -186,14 +186,14 @@
                 class="
                   flex items-center justify-center mr-3
                   overflow-hidden text-xs font-semibold
-                  bg-gray-200 rounded-md w-9 h-9 shrink-0 text-gray-400
+                  bg-surface-muted rounded-md w-9 h-9 shrink-0 text-subtle
                 "
               >
                 {{ initGenerator(invitation.company?.name || '?') }}
               </span>
               <div class="flex flex-col min-w-0">
-                <span class="text-sm text-gray-700 truncate">{{ invitation.company?.name }}</span>
-                <span class="text-xs text-gray-400">{{ invitation.role?.title }}</span>
+                <span class="text-sm text-body truncate">{{ invitation.company?.name }}</span>
+                <span class="text-xs text-subtle">{{ invitation.role?.title }}</span>
               </div>
             </div>
             <div class="flex space-x-1 pl-12">
@@ -204,7 +204,7 @@
                 {{ $t('general.accept') }}
               </button>
               <button
-                class="text-xs px-2 py-1 rounded bg-gray-200 text-gray-600 hover:bg-gray-300"
+                class="text-xs px-2 py-1 rounded bg-surface-muted text-body hover:bg-hover-strong"
                 @click.stop="declineInvitation(invitation.token)"
               >
                 {{ $t('general.decline') }}
@@ -221,7 +221,7 @@
             justify-center
             p-4
             pl-3
-            border-t-2 border-gray-100
+            border-t-2 border-line-light
             cursor-pointer
             text-primary-400
             hover:text-primary-500
diff --git a/resources/scripts/components/GlobalSearchBar.vue b/resources/scripts/components/GlobalSearchBar.vue
index 015d49be..dbcfbfa2 100644
--- a/resources/scripts/components/GlobalSearchBar.vue
+++ b/resources/scripts/components/GlobalSearchBar.vue
@@ -9,7 +9,7 @@
         @input="onSearch"
       >
         <template #left>
-          <BaseIcon name="MagnifyingGlassIcon" class="text-gray-400" />
+          <BaseIcon name="MagnifyingGlassIcon" class="text-subtle" />
         </template>
         <template #right>
           <SpinnerIcon v-if="isSearching" class="h-5 text-primary-500" />
@@ -32,7 +32,7 @@
           scrollbar-thumb-gray-300
           scrollbar-track-gray-100
           overflow-y-auto
-          bg-white
+          bg-surface
           rounded-md
           mt-2
           shadow-lg
@@ -51,24 +51,24 @@
             flex
             items-center
             justify-center
-            text-gray-400 text-base
+            text-subtle text-base
             flex-col
             mt-4
           "
         >
-          <BaseIcon name="ExclamationCircleIcon" class="text-gray-400" />
+          <BaseIcon name="ExclamationCircleIcon" class="text-subtle" />
 
           {{ $t('global_search.no_results_found') }}
         </div>
         <div v-else>
           <div v-if="usersStore.customerList.length > 0">
-            <label class="text-sm text-gray-400 mb-0.5 block px-2 uppercase">
+            <label class="text-sm text-subtle mb-0.5 block px-2 uppercase">
               {{ $t('global_search.customers') }}
             </label>
             <div
               v-for="(customer, index) in usersStore.customerList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
+              class="p-2 hover:bg-hover-strong cursor-pointer rounded-md"
             >
               <router-link
                 :to="{ path: `/admin/customers/${customer.id}/view` }"
@@ -84,7 +84,7 @@
                     mr-3
                     text-base
                     font-semibold
-                    bg-gray-200
+                    bg-surface-muted
                     rounded-full
                     text-primary-500
                   "
@@ -95,11 +95,11 @@
                   <span class="text-sm">{{ customer.name }}</span>
                   <span
                     v-if="customer.contact_name"
-                    class="text-xs text-gray-400"
+                    class="text-xs text-subtle"
                   >
                     {{ customer.contact_name }}
                   </span>
-                  <span v-else class="text-xs text-gray-400">{{
+                  <span v-else class="text-xs text-subtle">{{
                     customer.email
                   }}</span>
                 </div>
@@ -109,14 +109,14 @@
 
           <div v-if="usersStore.userList.length > 0" class="mt-2">
             <label
-              class="text-sm text-gray-400 mb-2 block px-2 mb-0.5 uppercase"
+              class="text-sm text-subtle mb-2 block px-2 mb-0.5 uppercase"
             >
               {{ $t('global_search.users') }}
             </label>
             <div
               v-for="(user, index) in usersStore.userList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
+              class="p-2 hover:bg-hover-strong cursor-pointer rounded-md"
             >
               <router-link
                 :to="{ path: `/admin/members/${user.id}/edit` }"
@@ -132,7 +132,7 @@
                     mr-3
                     text-base
                     font-semibold
-                    bg-gray-200
+                    bg-surface-muted
                     rounded-full
                     text-primary-500
                   "
@@ -141,7 +141,7 @@
                 </span>
                 <div class="flex flex-col">
                   <span class="text-sm">{{ user.name }}</span>
-                  <span class="text-xs text-gray-400">{{ user.email }}</span>
+                  <span class="text-xs text-subtle">{{ user.email }}</span>
                 </div>
               </router-link>
             </div>
diff --git a/resources/scripts/components/InvoiceInformationCard.vue b/resources/scripts/components/InvoiceInformationCard.vue
index 53219252..17c7436a 100644
--- a/resources/scripts/components/InvoiceInformationCard.vue
+++ b/resources/scripts/components/InvoiceInformationCard.vue
@@ -1,33 +1,33 @@
 <template>
-  <div class="bg-white shadow overflow-hidden rounded-lg mt-6">
+  <div class="bg-surface shadow overflow-hidden rounded-lg mt-6">
     <div class="px-4 py-5 sm:px-6">
-      <h3 class="text-lg leading-6 font-medium text-gray-900">
+      <h3 class="text-lg leading-6 font-medium text-heading">
         {{ $t('invoices.invoice_information') }}
       </h3>
     </div>
-    <div v-if="invoice" class="border-t border-gray-200 px-4 py-5 sm:p-0">
-      <dl class="sm:divide-y sm:divide-gray-200">
+    <div v-if="invoice" class="border-t border-line-default px-4 py-5 sm:p-0">
+      <dl class="sm:divide-y sm:divide-line-default">
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500">
+          <dt class="text-sm font-medium text-muted">
             {{ $t('general.from') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-heading sm:mt-0 sm:col-span-2">
             {{ invoice.company.name }}
           </dd>
         </div>
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500">
+          <dt class="text-sm font-medium text-muted">
             {{ $t('general.to') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-heading sm:mt-0 sm:col-span-2">
             {{ invoice.customer.name }}
           </dd>
         </div>
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500 capitalize">
+          <dt class="text-sm font-medium text-muted capitalize">
             {{ $t('invoices.paid_status').toLowerCase() }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-heading sm:mt-0 sm:col-span-2">
             <BaseInvoiceStatusBadge
               :status="invoice.paid_status"
               class="px-3 py-1"
@@ -37,10 +37,10 @@
           </dd>
         </div>
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500">
+          <dt class="text-sm font-medium text-muted">
             {{ $t('invoices.total') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-heading sm:mt-0 sm:col-span-2">
             <BaseFormatMoney
               :currency="invoice.currency"
               :amount="invoice.total"
@@ -51,10 +51,10 @@
           v-if="invoice.formatted_notes"
           class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
         >
-          <dt class="text-sm font-medium text-gray-500">
+          <dt class="text-sm font-medium text-muted">
             {{ $t('invoices.notes') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-heading sm:mt-0 sm:col-span-2">
             <span v-html="invoice.formatted_notes"></span>
           </dd>
         </div>
diff --git a/resources/scripts/components/InvoicePublicPage.vue b/resources/scripts/components/InvoicePublicPage.vue
index 6cb0b772..b350026c 100644
--- a/resources/scripts/components/InvoicePublicPage.vue
+++ b/resources/scripts/components/InvoicePublicPage.vue
@@ -61,7 +61,7 @@ I
 
       <div
         v-if="!customerLogo"
-        class="flex items-center justify-center mt-4 text-gray-500 font-normal"
+        class="flex items-center justify-center mt-4 text-muted font-normal"
       >
         Powered by
         <a href="https://invoiceshelf.com" target="_blank">
diff --git a/resources/scripts/components/base-select/BaseMultiselect.vue b/resources/scripts/components/base-select/BaseMultiselect.vue
index 6b173ef3..3e4ee669 100755
--- a/resources/scripts/components/base-select/BaseMultiselect.vue
+++ b/resources/scripts/components/base-select/BaseMultiselect.vue
@@ -437,9 +437,9 @@ export default {
       required: false,
       default: () => ({
         container:
-          'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 rounded-md bg-white text-sm leading-snug outline-hidden max-h-10',
+          'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-line-default rounded-md bg-surface text-sm leading-snug outline-hidden max-h-10',
         containerDisabled:
-          'cursor-default bg-gray-200/50 !text-gray-400',
+          'cursor-default bg-surface-muted/50 !text-subtle',
         containerOpen: '',
         containerOpenTop: '',
         containerActive: 'ring-1 ring-primary-400 border-primary-400',
@@ -451,10 +451,10 @@ export default {
         multipleLabel:
           'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
         search:
-          'w-full absolute inset-0 outline-hidden appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5',
+          'w-full absolute inset-0 outline-hidden appearance-none box-border border-0 text-sm font-sans bg-surface rounded-md pl-3.5',
         tags: 'grow shrink flex flex-wrap mt-1 pl-2',
         tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap',
-        tagDisabled: 'pr-2 !bg-gray-400 text-white',
+        tagDisabled: 'pr-2 !bg-subtle text-white',
         tagRemove:
           'flex items-center justify-center p-1 mx-0.5 rounded-xs hover:bg-black/10 group',
         tagRemoveIcon:
@@ -464,7 +464,7 @@ export default {
           'absolute inset-0 border-0 focus:outline-hidden !shadow-none !focus:shadow-none appearance-none p-0 text-sm font-sans box-border w-full',
         tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
         placeholder:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 text-sm',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-subtle text-sm',
         caret:
           'bg-multiselect-caret bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform',
         caretOpen: 'rotate-180 pointer-events-auto',
@@ -475,7 +475,7 @@ export default {
         spinner:
           'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0',
         dropdown:
-          'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 border border-gray-300 mt-1 overflow-y-auto z-50 bg-white flex flex-col rounded-md',
+          'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 border border-line-strong mt-1 overflow-y-auto z-50 bg-surface flex flex-col rounded-md',
         dropdownTop:
           '-translate-y-full -top-2 bottom-auto flex-col-reverse rounded-md',
         dropdownBottom: 'translate-y-full',
@@ -484,25 +484,25 @@ export default {
         optionsTop: 'flex-col-reverse',
         group: 'p-0 m-0',
         groupLabel:
-          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
+          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-surface-muted cursor-default leading-normal',
         groupLabelPointable: 'cursor-pointer',
-        groupLabelPointed: 'bg-gray-300 text-gray-700',
+        groupLabelPointed: 'bg-surface-muted text-body',
         groupLabelSelected: 'bg-primary-600 text-white',
-        groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
+        groupLabelDisabled: 'bg-surface-tertiary text-subtle cursor-not-allowed',
         groupLabelSelectedPointed: 'bg-primary-600 text-white opacity-90',
         groupLabelSelectedDisabled:
           'text-primary-100 bg-primary-600/50 cursor-not-allowed',
         groupOptions: 'p-0 m-0',
         option:
           'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3',
-        optionPointed: 'text-gray-800 bg-gray-100',
+        optionPointed: 'text-heading bg-surface-tertiary',
         optionSelected: 'text-white bg-primary-500',
-        optionDisabled: 'text-gray-300 cursor-not-allowed',
+        optionDisabled: 'text-subtle cursor-not-allowed',
         optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
         optionSelectedDisabled:
           'text-primary-100 bg-primary-500/50 cursor-not-allowed',
-        noOptions: 'py-2 px-3 text-gray-600 bg-white',
-        noResults: 'py-2 px-3 text-gray-600 bg-white',
+        noOptions: 'py-2 px-3 text-muted bg-surface',
+        noResults: 'py-2 px-3 text-muted bg-surface',
         fakeInput:
           'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-hidden text-transparent',
         spacer: 'h-9 py-px box-content',
diff --git a/resources/scripts/components/base/BaseBadge.vue b/resources/scripts/components/base/BaseBadge.vue
index 228bc566..a75c2d1a 100644
--- a/resources/scripts/components/base/BaseBadge.vue
+++ b/resources/scripts/components/base/BaseBadge.vue
@@ -5,7 +5,7 @@
       py-1
       text-sm
       font-normal
-      text-center text-green-800
+      text-center text-status-green
       uppercase
       bg-success
     "
diff --git a/resources/scripts/components/base/BaseBreadcrumb.vue b/resources/scripts/components/base/BaseBreadcrumb.vue
index 07afcf02..d28ef414 100644
--- a/resources/scripts/components/base/BaseBreadcrumb.vue
+++ b/resources/scripts/components/base/BaseBreadcrumb.vue
@@ -1,6 +1,6 @@
 <template>
   <nav>
-    <ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset">
+    <ol class="flex flex-wrap py-4 text-heading rounded list-reset">
       <slot />
     </ol>
   </nav>
diff --git a/resources/scripts/components/base/BaseBreadcrumbItem.vue b/resources/scripts/components/base/BaseBreadcrumbItem.vue
index b19ab0cc..323bfb44 100644
--- a/resources/scripts/components/base/BaseBreadcrumbItem.vue
+++ b/resources/scripts/components/base/BaseBreadcrumbItem.vue
@@ -7,7 +7,7 @@
         text-sm
         font-medium
         leading-5
-        text-gray-900
+        text-heading
         outline-hidden
         focus:ring-2 focus:ring-offset-2 focus:ring-primary-400
       "
diff --git a/resources/scripts/components/base/BaseButton.vue b/resources/scripts/components/base/BaseButton.vue
index 38a45d72..ce1756f3 100644
--- a/resources/scripts/components/base/BaseButton.vue
+++ b/resources/scripts/components/base/BaseButton.vue
@@ -54,11 +54,11 @@ const props = defineProps({
 
 const sizeClass = computed(() => {
   return {
-    'px-2.5 py-1.5 text-xs leading-4 rounded': props.size === 'xs',
-    'px-3 py-2 text-sm leading-4 rounded-md': props.size == 'sm',
-    'px-4 py-2 text-sm leading-5 rounded-md': props.size === 'md',
-    'px-4 py-2 text-base leading-6 rounded-md': props.size === 'lg',
-    'px-6 py-3 text-base leading-6 rounded-md': props.size === 'xl',
+    'px-2.5 py-1.5 text-xs leading-4 rounded-lg': props.size === 'xs',
+    'px-3 py-2 text-sm leading-4 rounded-lg': props.size == 'sm',
+    'px-4 py-2 text-sm leading-5 rounded-lg': props.size === 'md',
+    'px-4 py-2 text-base leading-6 rounded-lg': props.size === 'lg',
+    'px-6 py-3 text-base leading-6 rounded-lg': props.size === 'xl',
   }
 })
 
@@ -87,11 +87,11 @@ const variantClass = computed(() => {
       props.variant === 'secondary',
     'border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-200 shadow-inner focus:ring-primary-500':
       props.variant == 'primary-outline',
-    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0':
+    'border-line-default text-body bg-surface hover:bg-hover focus:ring-primary-500 focus:ring-offset-0':
       props.variant == 'white',
     'border-transparent shadow-xs text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
       props.variant === 'danger',
-    'border-transparent bg-gray-200 border hover:bg-gray-200/60 focus:ring-gray-500 focus:ring-offset-0':
+    'border-transparent bg-surface-muted border hover:bg-surface-muted/60 focus:ring-gray-500 focus:ring-offset-0':
       props.variant === 'gray',
   }
 })
@@ -112,8 +112,8 @@ const iconVariantClass = computed(() => {
   return {
     'text-white': props.variant === 'primary',
     'text-primary-700': props.variant === 'secondary',
-    'text-gray-700': props.variant === 'white',
-    'text-gray-400': props.variant === 'gray',
+    'text-body': props.variant === 'white',
+    'text-subtle': props.variant === 'gray',
   }
 })
 
diff --git a/resources/scripts/components/base/BaseCard.vue b/resources/scripts/components/base/BaseCard.vue
index c4ef52d3..5776eb49 100644
--- a/resources/scripts/components/base/BaseCard.vue
+++ b/resources/scripts/components/base/BaseCard.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="bg-white rounded-xl shadow-sm border border-gray-100">
+  <div class="bg-surface rounded-xl shadow border border-line-light">
     <div
       v-if="hasHeaderSlot"
-      class="px-5 py-4 text-black border-b border-gray-100 border-solid"
+      class="px-5 py-4 text-heading border-b border-line-light border-solid"
     >
       <slot name="header" />
     </div>
@@ -11,7 +11,7 @@
     </div>
     <div
       v-if="hasFooterSlot"
-      class="px-5 py-4 border-t border-gray-100 border-solid sm:px-6"
+      class="px-5 py-4 border-t border-line-light border-solid sm:px-6"
     >
       <slot name="footer" />
     </div>
diff --git a/resources/scripts/components/base/BaseCheckbox.vue b/resources/scripts/components/base/BaseCheckbox.vue
index c5e1d4d7..5e9cf914 100644
--- a/resources/scripts/components/base/BaseCheckbox.vue
+++ b/resources/scripts/components/base/BaseCheckbox.vue
@@ -15,12 +15,12 @@
         v-if="label"
         :for="id"
         :class="`font-medium ${
-          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600'
+          disabled ? 'text-subtle cursor-not-allowed' : 'text-body'
         } cursor-pointer `"
       >
         {{ label }}
       </label>
-      <p v-if="description" class="text-gray-500">{{ description }}</p>
+      <p v-if="description" class="text-muted">{{ description }}</p>
     </div>
   </div>
 </template>
@@ -51,7 +51,7 @@ const props = defineProps({
   },
   checkboxClass: {
     type: String,
-    default: 'w-4 h-4 border-gray-300 rounded cursor-pointer',
+    default: 'w-4 h-4 border-line-strong rounded cursor-pointer',
   },
   setInitialValue: {
     type: Boolean,
@@ -75,7 +75,7 @@ const checked = computed({
 
 const disabledClass = computed(() => {
   if (props.disabled) {
-    return 'text-gray-300 cursor-not-allowed'
+    return 'text-subtle cursor-not-allowed'
   }
 
   return 'text-primary-600 focus:ring-primary-500'
diff --git a/resources/scripts/components/base/BaseContentPlaceholders.vue b/resources/scripts/components/base/BaseContentPlaceholders.vue
index 57543abd..47f91461 100644
--- a/resources/scripts/components/base/BaseContentPlaceholders.vue
+++ b/resources/scripts/components/base/BaseContentPlaceholders.vue
@@ -55,7 +55,7 @@ const classObject = computed(() => {
   position: relative;
   overflow: hidden;
   min-height: 15px;
-  background: #eee;
+  background: var(--color-surface-muted);
 
   .base-content-placeholders-is-rounded & {
     border-radius: 6px;
@@ -72,7 +72,7 @@ const classObject = computed(() => {
     width: 100vw;
     max-width: 1000px;
     height: 100%;
-    background: linear-gradient(to right, transparent 0%, #e1e1e1 15%, transparent 30%);
+    background: linear-gradient(to right, transparent 0%, var(--color-hover-strong) 15%, transparent 30%);
     animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
   }
 }
@@ -87,7 +87,7 @@ const classObject = computed(() => {
 .base-content-placeholders-heading__title {
   width: 85%;
   margin-bottom: 10px;
-  background: #ccc;
+  background: var(--color-surface-muted);
   position: relative;
   overflow: hidden;
   min-height: 15px;
@@ -107,7 +107,7 @@ const classObject = computed(() => {
     width: 100vw;
     max-width: 1000px;
     height: 100%;
-    background: linear-gradient(to right, transparent 0%, #e1e1e1 15%, transparent 30%);
+    background: linear-gradient(to right, transparent 0%, var(--color-hover-strong) 15%, transparent 30%);
     animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
   }
 }
@@ -117,7 +117,7 @@ const classObject = computed(() => {
   position: relative;
   overflow: hidden;
   min-height: 15px;
-  background: #eee;
+  background: var(--color-surface-muted);
 
   .base-content-placeholders-is-rounded & {
     border-radius: 6px;
@@ -134,7 +134,7 @@ const classObject = computed(() => {
     width: 100vw;
     max-width: 1000px;
     height: 100%;
-    background: linear-gradient(to right, transparent 0%, #e1e1e1 15%, transparent 30%);
+    background: linear-gradient(to right, transparent 0%, var(--color-hover-strong) 15%, transparent 30%);
     animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
   }
 }
@@ -151,7 +151,7 @@ const classObject = computed(() => {
   position: relative;
   overflow: hidden;
   min-height: 15px;
-  background: #eee;
+  background: var(--color-surface-muted);
 
   .base-content-placeholders-is-rounded & {
     border-radius: 6px;
@@ -168,7 +168,7 @@ const classObject = computed(() => {
     width: 100vw;
     max-width: 1000px;
     height: 100%;
-    background: linear-gradient(to right, transparent 0%, #e1e1e1 15%, transparent 30%);
+    background: linear-gradient(to right, transparent 0%, var(--color-hover-strong) 15%, transparent 30%);
     animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
   }
 
@@ -190,7 +190,7 @@ const classObject = computed(() => {
   position: relative;
   overflow: hidden;
   min-height: 15px;
-  background: #eee;
+  background: var(--color-surface-muted);
 
   .base-content-placeholders-is-animated &::before {
     content: '';
@@ -200,7 +200,7 @@ const classObject = computed(() => {
     width: 100vw;
     max-width: 1000px;
     height: 100%;
-    background: linear-gradient(to right, transparent 0%, #e1e1e1 15%, transparent 30%);
+    background: linear-gradient(to right, transparent 0%, var(--color-hover-strong) 15%, transparent 30%);
     animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
   }
 }
diff --git a/resources/scripts/components/base/BaseCustomInput.vue b/resources/scripts/components/base/BaseCustomInput.vue
index ca911e3a..84316e55 100644
--- a/resources/scripts/components/base/BaseCustomInput.vue
+++ b/resources/scripts/components/base/BaseCustomInput.vue
@@ -27,7 +27,7 @@
 
         <div class="flex p-2">
           <ul v-for="(type, index) in fieldList" :key="index" class="list-none">
-            <li class="mb-1 ml-2 text-xs font-semibold text-gray-500 uppercase">
+            <li class="mb-1 ml-2 text-xs font-semibold text-muted uppercase">
               {{ type.label }}
             </li>
 
@@ -39,7 +39,7 @@
                 text-sm
                 font-normal
                 cursor-pointer
-                hover:bg-gray-100
+                hover:bg-hover-strong
                 rounded
                 ml-1
                 py-0.5
@@ -49,7 +49,7 @@
               <div class="flex pl-1">
                 <BaseIcon
                   name="ChevronDoubleRightIcon"
-                  class="h-3 mt-1 mr-2 text-gray-400"
+                  class="h-3 mt-1 mr-2 text-subtle"
                 />
 
                 {{ field.label }}
diff --git a/resources/scripts/components/base/BaseCustomerAddressDisplay.vue b/resources/scripts/components/base/BaseCustomerAddressDisplay.vue
index fa2a880d..cb34f710 100644
--- a/resources/scripts/components/base/BaseCustomerAddressDisplay.vue
+++ b/resources/scripts/components/base/BaseCustomerAddressDisplay.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="address"
-    class="text-sm font-bold leading-5 text-black non-italic space-y-1"
+    class="text-sm font-bold leading-5 text-heading non-italic space-y-1"
   >
     <p v-if="address?.address_street_1">{{ address?.address_street_1 }},</p>
 
diff --git a/resources/scripts/components/base/BaseCustomerSelectPopup.vue b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
index 9557f882..4fe37052 100644
--- a/resources/scripts/components/base/BaseCustomerSelectPopup.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
@@ -16,8 +16,8 @@
       class="
         flex flex-col
         p-4
-        bg-white
-        border border-gray-200 border-solid
+        bg-surface
+        border border-line-default border-solid
         min-h-[170px]
         rounded-md
       "
@@ -26,7 +26,7 @@
       <div class="flex relative justify-between mb-2">
         <BaseText
           :text="selectedCustomer.name"
-          class="flex-1 text-base font-medium text-left text-gray-900"
+          class="flex-1 text-base font-medium text-left text-heading"
         />
         <div class="flex">
           <a
@@ -43,7 +43,7 @@
             "
             @click.stop="editCustomer"
           >
-            <BaseIcon name="PencilIcon" class="text-gray-500 h-4 w-4 mr-1" />
+            <BaseIcon name="PencilIcon" class="text-muted h-4 w-4 mr-1" />
 
             {{ $t('general.edit') }}
           </a>
@@ -61,7 +61,7 @@
             "
             @click="resetSelectedCustomer"
           >
-            <BaseIcon name="XCircleIcon" class="text-gray-500 h-4 w-4 mr-1" />
+            <BaseIcon name="XCircleIcon" class="text-muted h-4 w-4 mr-1" />
             {{ $t('general.deselect') }}
           </a>
         </div>
@@ -73,7 +73,7 @@
               mb-1
               text-sm
               font-medium
-              text-left text-gray-400
+              text-left text-subtle
               uppercase
               whitespace-nowrap
             "
@@ -123,7 +123,7 @@
               mb-1
               text-sm
               font-medium
-              text-left text-gray-400
+              text-left text-subtle
               uppercase
               whitespace-nowrap
             "
@@ -187,8 +187,8 @@
             px-0
             p-0
             py-16
-            bg-white
-            border border-gray-200 border-solid
+            bg-surface
+            border border-line-default border-solid
             rounded-md
             min-h-[170px]
           "
@@ -203,14 +203,14 @@
               p-2
               mr-5
               text-sm text-white
-              bg-gray-200
+              bg-surface-muted
               rounded-full
               font-base
             "
           />
 
           <div class="mt-1">
-            <label class="text-lg font-medium text-gray-900">
+            <label class="text-lg font-medium text-heading">
               {{ $t('customers.new_customer') }}
               <span class="text-red-500"> * </span>
             </label>
@@ -244,7 +244,7 @@
               rounded-md
               shadow-lg
               ring-1 ring-black/5
-              bg-white
+              bg-surface
             "
           >
             <div class="relative">
@@ -263,7 +263,7 @@
                   flex flex-col
                   overflow-auto
                   list
-                  border-t border-gray-200
+                  border-t border-line-default
                 "
               >
                 <li
@@ -274,10 +274,10 @@
                     flex
                     px-6
                     py-2
-                    border-b border-gray-200 border-solid
+                    border-b border-line-default border-solid
                     cursor-pointer
-                    hover:cursor-pointer hover:bg-gray-100
-                    focus:outline-hidden focus:bg-gray-100
+                    hover:cursor-pointer hover:bg-hover-strong
+                    focus:outline-hidden focus:bg-surface-tertiary
                     last:border-b-0
                   "
                   @click="selectNewCustomer(customer.id, close)"
@@ -295,7 +295,7 @@
                       font-semibold
                       leading-9
                       text-white
-                      bg-gray-300
+                      bg-surface-muted
                       rounded-full
                       avatar
                     "
@@ -322,7 +322,7 @@
                         m-0
                         text-sm
                         font-medium
-                        text-gray-400
+                        text-subtle
                         cursor-pointer
                       "
                     />
@@ -330,9 +330,9 @@
                 </li>
                 <div
                   v-if="customerStore.customers.length === 0"
-                  class="flex justify-center p-5 text-gray-400"
+                  class="flex justify-center p-5 text-subtle"
                 >
-                  <label class="text-base text-gray-500 cursor-pointer">
+                  <label class="text-base text-muted cursor-pointer">
                     {{ $t('customers.no_customers_found') }}
                   </label>
                 </div>
@@ -350,10 +350,10 @@
                 w-full
                 px-2
                 py-3
-                bg-gray-200
+                bg-surface-muted
                 border-none
                 outline-hidden
-                focus:bg-gray-300
+                focus:bg-surface-muted
               "
               @click="openCustomerModal"
             >
diff --git a/resources/scripts/components/base/BaseDatePicker.vue b/resources/scripts/components/base/BaseDatePicker.vue
index c29bdd9e..1605f19b 100644
--- a/resources/scripts/components/base/BaseDatePicker.vue
+++ b/resources/scripts/components/base/BaseDatePicker.vue
@@ -21,7 +21,7 @@
         text-sm
         not-italic
         font-black
-        text-gray-400
+        text-subtle
         cursor-pointer
       "
       @click="onClickDp"
@@ -121,7 +121,7 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'font-base pl-8 py-2 outline-hidden focus:ring-primary-400 focus:outline-hidden focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
+      'font-base pl-8 py-2 outline-hidden focus:ring-primary-400 focus:outline-hidden focus:border-primary-400 block w-full sm:text-sm border-line-default rounded-md text-heading',
   },
   time24hr: {
     type: Boolean,
@@ -282,7 +282,7 @@ const inputInvalidClass = computed(() => {
 
 const inputDisabledClass = computed(() => {
   if (props.disabled) {
-    return 'border border-solid rounded-md outline-hidden input-field box-border-2 base-date-picker-input placeholder-gray-400 bg-gray-200 text-gray-600 border-gray-200'
+    return 'border border-solid rounded-md outline-hidden input-field box-border-2 base-date-picker-input placeholder-gray-400 bg-surface-muted text-body border-line-default'
   }
 
   return ''
diff --git a/resources/scripts/components/base/BaseDescriptionListItem.vue b/resources/scripts/components/base/BaseDescriptionListItem.vue
index 6140fc4b..76496a29 100644
--- a/resources/scripts/components/base/BaseDescriptionListItem.vue
+++ b/resources/scripts/components/base/BaseDescriptionListItem.vue
@@ -10,7 +10,7 @@
         {{ label }}
       </BaseLabel>
 
-      <p class="text-sm font-bold leading-5 text-black non-italic">
+      <p class="text-sm font-bold leading-5 text-heading non-italic">
         {{ value }}
 
         <slot />
diff --git a/resources/scripts/components/base/BaseDialog.vue b/resources/scripts/components/base/BaseDialog.vue
index e65ca5d0..5d56fb88 100644
--- a/resources/scripts/components/base/BaseDialog.vue
+++ b/resources/scripts/components/base/BaseDialog.vue
@@ -30,7 +30,7 @@
           leave-to="opacity-0"
         >
           <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-gray-500/75"
+            class="fixed inset-0 transition-opacity bg-surface-secondary0/75"
           />
         </TransitionChild>
 
@@ -59,7 +59,7 @@
               text-left
               align-bottom
               transition-all
-              bg-white
+              bg-surface
               rounded-lg
               shadow-xl
               sm:my-8 sm:align-middle sm:w-full sm:p-6
@@ -76,35 +76,35 @@
                   w-12
                   h-12
                   mx-auto
-                  bg-green-100
+                  bg-alert-success-bg
                   rounded-full
                 "
                 :class="{
-                  'bg-green-100': dialogStore.variant === 'primary',
-                  'bg-red-100': dialogStore.variant === 'danger',
+                  'bg-alert-success-bg': dialogStore.variant === 'primary',
+                  'bg-alert-error-bg': dialogStore.variant === 'danger',
                 }"
               >
                 <BaseIcon
                   v-if="dialogStore.variant === 'primary'"
                   name="CheckIcon"
-                  class="w-6 h-6 text-green-600"
+                  class="w-6 h-6 text-alert-success-text"
                 />
                 <BaseIcon
                   v-else
                   name="ExclamationIcon"
-                  class="w-6 h-6 text-red-600"
+                  class="w-6 h-6 text-alert-error-text"
                   aria-hidden="true"
                 />
               </div>
               <div class="mt-3 text-center sm:mt-5">
                 <DialogTitle
                   as="h3"
-                  class="text-lg font-medium leading-6 text-gray-900"
+                  class="text-lg font-medium leading-6 text-heading"
                 >
                   {{ dialogStore.title }}
                 </DialogTitle>
                 <div class="mt-2">
-                  <p class="text-sm text-gray-500">
+                  <p class="text-sm text-muted">
                     {{ dialogStore.message }}
                   </p>
                 </div>
diff --git a/resources/scripts/components/base/BaseDivider.vue b/resources/scripts/components/base/BaseDivider.vue
index 327cfe0e..6a529918 100644
--- a/resources/scripts/components/base/BaseDivider.vue
+++ b/resources/scripts/components/base/BaseDivider.vue
@@ -1,3 +1,3 @@
 <template>
-  <hr class="w-full text-gray-300" />
+  <hr class="w-full text-subtle" />
 </template>
diff --git a/resources/scripts/components/base/BaseDropdown.vue b/resources/scripts/components/base/BaseDropdown.vue
index 69f9ea84..94281fa6 100644
--- a/resources/scripts/components/base/BaseDropdown.vue
+++ b/resources/scripts/components/base/BaseDropdown.vue
@@ -69,7 +69,7 @@ const props = defineProps({
 })
 
 const containerClasses = computed(() => {
-  const baseClass = `origin-top-right rounded-md shadow-lg bg-white ring-1 ring-black/5 divide-y divide-gray-100 focus:outline-hidden`
+  const baseClass = `origin-top-right rounded-md shadow-lg bg-surface ring-1 ring-black/5 divide-y divide-line-light focus:outline-hidden`
   return `${baseClass} ${props.containerClass}`
 })
 
diff --git a/resources/scripts/components/base/BaseDropdownItem.vue b/resources/scripts/components/base/BaseDropdownItem.vue
index 7336a47a..c93d1202 100644
--- a/resources/scripts/components/base/BaseDropdownItem.vue
+++ b/resources/scripts/components/base/BaseDropdownItem.vue
@@ -3,7 +3,7 @@
     <a
       href="#"
       :class="[
-        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+        active ? 'bg-hover-strong text-heading' : 'text-body',
         'group flex items-center px-4 py-2 text-sm font-normal whitespace-normal',
       ]"
     >
diff --git a/resources/scripts/components/base/BaseEmptyPlaceholder.vue b/resources/scripts/components/base/BaseEmptyPlaceholder.vue
index c89265d6..a888ebf6 100644
--- a/resources/scripts/components/base/BaseEmptyPlaceholder.vue
+++ b/resources/scripts/components/base/BaseEmptyPlaceholder.vue
@@ -7,7 +7,7 @@
       <label class="font-medium">{{ title }}</label>
     </div>
     <div class="mt-2">
-      <label class="text-gray-500">
+      <label class="text-muted">
         {{ description }}
       </label>
     </div>
diff --git a/resources/scripts/components/base/BaseErrorAlert.vue b/resources/scripts/components/base/BaseErrorAlert.vue
index c80a5849..2bebfa26 100644
--- a/resources/scripts/components/base/BaseErrorAlert.vue
+++ b/resources/scripts/components/base/BaseErrorAlert.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="rounded-md bg-red-50 p-4">
+  <div class="rounded-md bg-alert-error-bg p-4">
     <div class="flex">
       <div class="shrink-0">
-        <XCircleIcon class="h-5 w-5 text-red-400" aria-hidden="true" />
+        <XCircleIcon class="h-5 w-5 text-alert-error-text" aria-hidden="true" />
       </div>
       <div class="ml-3">
-        <h3 class="text-sm font-medium text-red-800">
+        <h3 class="text-sm font-medium text-alert-error-text">
           {{ errorTitle }}
         </h3>
-        <div class="mt-2 text-sm text-red-700">
+        <div class="mt-2 text-sm text-alert-error-text">
           <ul role="list" class="list-disc pl-5 space-y-1">
             <li v-for="(error, key) in errors" :key="key">
               {{ error }}
diff --git a/resources/scripts/components/base/BaseEstimateStatusBadge.vue b/resources/scripts/components/base/BaseEstimateStatusBadge.vue
index 203a9517..c9ac54a7 100644
--- a/resources/scripts/components/base/BaseEstimateStatusBadge.vue
+++ b/resources/scripts/components/base/BaseEstimateStatusBadge.vue
@@ -18,19 +18,19 @@ const props = defineProps({
 const badgeColorClasses = computed(() => {
   switch (props.status) {
     case 'DRAFT':
-      return 'bg-yellow-300/25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center '
+      return 'bg-yellow-300/25 px-2  py-1 text-sm  text-status-yellow uppercase font-normal text-center '
     case 'SENT':
-      return ' bg-yellow-500/25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center '
+      return ' bg-yellow-500/25 px-2 py-1 text-sm  text-status-yellow uppercase font-normal text-center '
     case 'VIEWED':
-      return 'bg-blue-400/25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+      return 'bg-blue-400/25 px-2  py-1 text-sm  text-status-blue uppercase font-normal text-center'
     case 'EXPIRED':
-      return 'bg-red-300/25 px-2 py-1 text-sm  text-red-800 uppercase font-normal text-center'
+      return 'bg-red-300/25 px-2 py-1 text-sm  text-status-red uppercase font-normal text-center'
     case 'ACCEPTED':
-      return 'bg-green-400/25 px-2 py-1 text-sm  text-green-800 uppercase font-normal text-center'
+      return 'bg-green-400/25 px-2 py-1 text-sm  text-status-green uppercase font-normal text-center'
     case 'REJECTED':
-      return 'bg-purple-300/25 px-2 py-1 text-sm  text-purple-800 uppercase font-normal text-center'
+      return 'bg-purple-300/25 px-2 py-1 text-sm  text-status-purple uppercase font-normal text-center'
     default:
-      return 'bg-gray-500/25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
+      return 'bg-surface-secondary0/25 px-2 py-1 text-sm  text-heading uppercase font-normal text-center'
   }
 })
 </script>
diff --git a/resources/scripts/components/base/BaseFileUploader.vue b/resources/scripts/components/base/BaseFileUploader.vue
index 8e0c0385..794faaa4 100644
--- a/resources/scripts/components/base/BaseFileUploader.vue
+++ b/resources/scripts/components/base/BaseFileUploader.vue
@@ -11,15 +11,15 @@
       rounded-md
       cursor-pointer
       avatar-upload
-      border-gray-300
+      border-line-strong
       transition-all
       duration-300
       ease-in-out
       isolate
-      hover:border-gray-300
+      hover:border-line-strong
       group
       min-h-[100px]
-      bg-gray-50
+      bg-surface-secondary
     "
     :class="avatar ? 'w-32 h-32' : 'w-full'"
   >
@@ -48,7 +48,7 @@
 
       <a
         href="#"
-        class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group"
+        class="absolute z-30 bg-surface rounded-full -bottom-3 -right-3 group"
         @click.prevent.stop="onBrowse"
       >
         <BaseIcon
@@ -68,9 +68,9 @@
     <div v-else-if="!localFiles.length" class="flex flex-col items-center">
       <BaseIcon
         name="CloudArrowUpIcon"
-        class="h-6 mb-2 text-xl leading-6 text-gray-400"
+        class="h-6 mb-2 text-xl leading-6 text-subtle"
       />
-      <p class="text-xs leading-4 text-center text-gray-400">
+      <p class="text-xs leading-4 text-center text-subtle">
         {{ $t('general.file_upload.drag_a_file') }}
         <a
           class="
@@ -87,14 +87,14 @@
         </a>
         {{ $t('general.file_upload.to_choose') }}
       </p>
-      <p class="text-xs leading-4 text-center text-gray-400 mt-2">
+      <p class="text-xs leading-4 text-center text-subtle mt-2">
         {{ recommendedText }}
       </p>
     </div>
 
     <div
       v-else-if="localFiles.length && avatar && !multiple"
-      class="flex w-full h-full border border-gray-200 rounded justify-center items-center"
+      class="flex w-full h-full border border-line-default rounded justify-center items-center"
     >
       <img
         v-if="localFiles[0].image"
@@ -110,7 +110,7 @@
           flex
           justify-center
           items-center
-          text-gray-400
+          text-subtle
           flex-col
           space-y-2
           px-2
@@ -137,7 +137,7 @@
         <p
           v-if="localFiles[0].name"
           class="
-            text-gray-600
+            text-body
             font-medium
             text-sm
             truncate
@@ -160,18 +160,18 @@
           justify-center
           w-8
           h-8
-          bg-white
-          border border-gray-200
+          bg-surface
+          border border-line-default
           rounded-full
           shadow-md
           -bottom-3
           -right-3
           group
-          hover:border-gray-300
+          hover:border-line-strong
         "
         @click.prevent.stop="onAvatarRemove(localFiles[0])"
       >
-        <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-black" />
+        <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-heading" />
       </a>
     </div>
 
@@ -188,8 +188,8 @@
           block
           p-2
           m-2
-          bg-white
-          border border-gray-200
+          bg-surface
+          border border-line-default
           rounded
           hover:border-gray-500
           relative
@@ -211,7 +211,7 @@
             flex
             justify-center
             items-center
-            text-gray-400
+            text-subtle
             flex-col
             space-y-2
             px-2
@@ -238,7 +238,7 @@
           <p
             v-if="localFile.name"
             class="
-              text-gray-600
+              text-body
               font-medium
               text-sm
               truncate
@@ -261,18 +261,18 @@
             justify-center
             w-8
             h-8
-            bg-white
-            border border-gray-200
+            bg-surface
+            border border-line-default
             rounded-full
             shadow-md
             -bottom-3
             -right-3
             group
-            hover:border-gray-300
+            hover:border-line-strong
           "
           @click.prevent.stop="onFileRemove(index)"
         >
-          <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-black" />
+          <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-heading" />
         </span>
       </a>
     </div>
@@ -286,8 +286,8 @@
           block
           p-2
           m-2
-          bg-white
-          border border-gray-200
+          bg-surface
+          border border-line-default
           rounded
           hover:border-gray-500
           relative
@@ -309,7 +309,7 @@
             flex
             justify-center
             items-center
-            text-gray-400
+            text-subtle
             flex-col
             space-y-2
             px-2
@@ -336,7 +336,7 @@
           <p
             v-if="localFile.name"
             class="
-              text-gray-600
+              text-body
               font-medium
               text-sm
               truncate
@@ -359,18 +359,18 @@
             justify-center
             w-8
             h-8
-            bg-white
-            border border-gray-200
+            bg-surface
+            border border-line-default
             rounded-full
             shadow-md
             -bottom-3
             -right-3
             group
-            hover:border-gray-300
+            hover:border-line-strong
           "
           @click.prevent.stop="onFileRemove(index)"
         >
-          <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-black" />
+          <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-heading" />
         </span>
       </a>
     </div>
diff --git a/resources/scripts/components/base/BaseFilterWrapper.vue b/resources/scripts/components/base/BaseFilterWrapper.vue
index 5db8358c..8a805c1c 100644
--- a/resources/scripts/components/base/BaseFilterWrapper.vue
+++ b/resources/scripts/components/base/BaseFilterWrapper.vue
@@ -7,7 +7,7 @@
     leave-from-class="opacity-100"
     leave-to-class="opacity-0"
   >
-    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded">
+    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-surface-muted rounded">
       <slot name="filter-header" />
 
       <label
@@ -15,9 +15,9 @@
           absolute
           text-sm
           leading-snug
-          text-gray-900
+          text-heading
           cursor-pointer
-          hover:text-gray-700
+          hover:text-body
           top-2.5
           right-3.5
         "
diff --git a/resources/scripts/components/base/BaseHeading.vue b/resources/scripts/components/base/BaseHeading.vue
index 821a8ffa..ebf15d19 100644
--- a/resources/scripts/components/base/BaseHeading.vue
+++ b/resources/scripts/components/base/BaseHeading.vue
@@ -18,8 +18,8 @@ const props = defineProps({
 
 const typeClass = computed(() => {
   return {
-    'text-gray-900 text-lg font-medium': props.type === 'heading-title',
-    'text-gray-500 uppercase text-base': props.type === 'section-title',
+    'text-heading text-lg font-medium': props.type === 'heading-title',
+    'text-muted uppercase text-base': props.type === 'section-title',
   }
 })
 </script>
diff --git a/resources/scripts/components/base/BaseInfoAlert.vue b/resources/scripts/components/base/BaseInfoAlert.vue
index 6a0391d7..5d8933f2 100644
--- a/resources/scripts/components/base/BaseInfoAlert.vue
+++ b/resources/scripts/components/base/BaseInfoAlert.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="rounded-md bg-yellow-50 p-4 relative">
+  <div class="rounded-md bg-alert-warning-bg p-4 relative">
     <BaseIcon
       name="XMarkIcon"
-      class="h-5 w-5 text-yellow-500 absolute right-4 cursor-pointer"
+      class="h-5 w-5 text-alert-warning-text absolute right-4 cursor-pointer"
       @click="$emit('hide')"
     />
     <div class="flex flex-col">
@@ -10,15 +10,15 @@
         <div class="shrink-0">
           <BaseIcon
             name="ExclamationIcon"
-            class="h-5 w-5 text-yellow-400"
+            class="h-5 w-5 text-alert-warning-text"
             aria-hidden="true"
           />
         </div>
         <div class="ml-3">
-          <h3 class="text-sm font-medium text-yellow-800">
+          <h3 class="text-sm font-medium text-alert-warning-text">
             {{ title }}
           </h3>
-          <div class="mt-2 text-sm text-yellow-700">
+          <div class="mt-2 text-sm text-alert-warning-text">
             <ul role="list" class="list-disc pl-5 space-y-1">
               <li v-for="(list, key) in lists" :key="key">
                 {{ list }}
@@ -34,14 +34,14 @@
             :key="i"
             type="button"
             class="
-              bg-yellow-50
+              bg-alert-warning-bg
               px-2
               py-1.5
               rounded-md
               text-sm
               font-medium
-              text-yellow-800
-              hover:bg-yellow-100
+              text-alert-warning-text
+              hover:bg-alert-warning-bg
               focus:outline-hidden
               focus:ring-2
               focus:ring-offset-2
diff --git a/resources/scripts/components/base/BaseInput.vue b/resources/scripts/components/base/BaseInput.vue
index fb32fd96..86b0ea45 100644
--- a/resources/scripts/components/base/BaseInput.vue
+++ b/resources/scripts/components/base/BaseInput.vue
@@ -60,10 +60,10 @@
         inline-flex
         items-center
         px-3
-        text-gray-500
-        border border-r-0 border-gray-200
+        text-muted
+        border border-r-0 border-line-default
         rounded-l-md
-        bg-gray-50
+        bg-surface-secondary
         sm:text-sm
       "
     >
@@ -82,7 +82,7 @@
         pointer-events-none
       "
     >
-      <span class="text-gray-500 sm:text-sm">
+      <span class="text-muted sm:text-sm">
         {{ inlineAddon }}
       </span>
     </div>
@@ -199,15 +199,15 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
+      'font-base block w-full sm:text-sm border-line-default rounded-md text-heading',
   },
   iconLeftClass: {
     type: String,
-    default: 'h-5 w-5 text-gray-400',
+    default: 'h-5 w-5 text-subtle',
   },
   iconRightClass: {
     type: String,
-    default: 'h-5 w-5 text-gray-400',
+    default: 'h-5 w-5 text-subtle',
   },
   modelModifiers: {
     default: () => ({}),
@@ -258,7 +258,7 @@ const inputInvalidClass = computed(() => {
 
 const inputDisabledClass = computed(() => {
   if (props.disabled) {
-    return `border-gray-100 bg-gray-100 !text-gray-400 ring-gray-200 focus:ring-gray-200 focus:border-gray-100`
+    return `border-line-light bg-surface-tertiary !text-subtle ring-surface-muted focus:ring-surface-muted focus:border-line-light`
   }
 
   return ''
diff --git a/resources/scripts/components/base/BaseInputGroup.vue b/resources/scripts/components/base/BaseInputGroup.vue
index 31d83fb9..850b763a 100644
--- a/resources/scripts/components/base/BaseInputGroup.vue
+++ b/resources/scripts/components/base/BaseInputGroup.vue
@@ -12,7 +12,7 @@
         not-italic
         items-center
         font-medium
-        text-gray-800
+        text-heading
         whitespace-nowrap
         justify-between
       "
@@ -26,12 +26,12 @@
         v-if="tooltip"
         v-tooltip="{ content: tooltip }"
         name="InformationCircleIcon"
-        class="h-4 text-gray-400 cursor-pointer hover:text-gray-600"
+        class="h-4 text-subtle cursor-pointer hover:text-body"
       />
     </label>
     <div :class="inputContainerClasses">
       <slot></slot>
-      <span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light">
+      <span v-if="helpText" class="text-muted text-xs mt-1 font-light">
         {{ helpText }}
       </span>
       <span v-if="error" class="block mt-0.5 text-sm text-red-500">
diff --git a/resources/scripts/components/base/BaseInvoiceStatusBadge.vue b/resources/scripts/components/base/BaseInvoiceStatusBadge.vue
index 14840c40..08b6d32b 100644
--- a/resources/scripts/components/base/BaseInvoiceStatusBadge.vue
+++ b/resources/scripts/components/base/BaseInvoiceStatusBadge.vue
@@ -20,25 +20,25 @@ export default {
     const badgeColorClasses = computed(() => {
       switch (props.status) {
         case 'DRAFT':
-          return 'bg-yellow-300/25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center'
+          return 'bg-yellow-300/25 px-2  py-1 text-sm  text-status-yellow uppercase font-normal text-center'
         case 'SENT':
-          return ' bg-yellow-500/25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center '
+          return ' bg-yellow-500/25 px-2 py-1 text-sm  text-status-yellow uppercase font-normal text-center '
         case 'VIEWED':
-          return 'bg-blue-400/25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400/25 px-2  py-1 text-sm  text-status-blue uppercase font-normal text-center'
         case 'COMPLETED':
-          return 'bg-green-500/25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center'
+          return 'bg-green-500/25 px-2  py-1 text-sm  text-status-green uppercase font-normal text-center'
         case 'DUE':
-          return 'bg-yellow-500/25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
+          return 'bg-yellow-500/25 px-2  py-1 text-sm  text-status-yellow uppercase font-normal text-center'
         case 'OVERDUE':
-          return 'bg-red-300/50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center'
+          return 'bg-red-300/50 px-2  py-1 text-sm  text-status-red uppercase font-normal text-center'
         case 'UNPAID':
-          return 'bg-yellow-500/25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
+          return 'bg-yellow-500/25 px-2 py-1 text-sm  text-status-yellow uppercase font-normal text-center'
         case 'PARTIALLY_PAID':
-          return 'bg-blue-400/25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400/25 px-2  py-1 text-sm  text-status-blue uppercase font-normal text-center'
         case 'PAID':
-          return 'bg-green-500/25 px-2 py-1 text-sm  text-green-900 uppercase font-normal text-center'
+          return 'bg-green-500/25 px-2 py-1 text-sm  text-status-green uppercase font-normal text-center'
         default:
-          return 'bg-gray-500/25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
+          return 'bg-surface-secondary0/25 px-2 py-1 text-sm  text-heading uppercase font-normal text-center'
       }
     })
     return { badgeColorClasses }
diff --git a/resources/scripts/components/base/BaseItemSelect.vue b/resources/scripts/components/base/BaseItemSelect.vue
index df1aa583..74ab4a15 100644
--- a/resources/scripts/components/base/BaseItemSelect.vue
+++ b/resources/scripts/components/base/BaseItemSelect.vue
@@ -9,15 +9,15 @@
         items-center
         h-10
         pl-2
-        bg-gray-200
-        border border-gray-200 border-solid
+        bg-surface-muted
+        border border-line-default border-solid
         rounded
       "
     >
       {{ item.name }}
 
       <span
-        class="absolute text-gray-400 cursor-pointer top-[8px] right-[10px]"
+        class="absolute text-subtle cursor-pointer top-[8px] right-[10px]"
         @click="deselectItem(index)"
       >
         <BaseIcon name="XCircleIcon" />
diff --git a/resources/scripts/components/base/BaseModal.vue b/resources/scripts/components/base/BaseModal.vue
index 2d0c85d2..4ec0aad6 100644
--- a/resources/scripts/components/base/BaseModal.vue
+++ b/resources/scripts/components/base/BaseModal.vue
@@ -51,7 +51,7 @@
             <div
               :class="`inline-block
               align-middle
-              bg-white
+              bg-surface
               rounded-lg
               text-left
               overflow-hidden
@@ -73,8 +73,8 @@
                   py-4
                   text-lg
                   font-medium
-                  text-black
-                  border-b border-gray-200 border-solid
+                  text-heading
+                  border-b border-line-default border-solid
                 "
               >
                 <slot name="header" />
diff --git a/resources/scripts/components/base/BaseMoney.vue b/resources/scripts/components/base/BaseMoney.vue
index bdc4f89e..acec5313 100644
--- a/resources/scripts/components/base/BaseMoney.vue
+++ b/resources/scripts/components/base/BaseMoney.vue
@@ -39,7 +39,7 @@ const props = defineProps({
   inputClass: {
     type: String,
     default:
-      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
+      'font-base block w-full sm:text-sm border-line-default rounded-md text-heading',
   },
   disabled: {
     type: Boolean,
diff --git a/resources/scripts/components/base/BaseNewBadge.vue b/resources/scripts/components/base/BaseNewBadge.vue
index 47f3b38e..a5d55164 100644
--- a/resources/scripts/components/base/BaseNewBadge.vue
+++ b/resources/scripts/components/base/BaseNewBadge.vue
@@ -1,7 +1,7 @@
 <template>
   <span
     :class="[
-      sucess ? 'bg-green-100 text-green-700 ' : 'bg-red-100 text-red-700',
+      sucess ? 'bg-green-500/25 text-status-green ' : 'bg-red-500/25 text-status-red',
       'px-2 py-1 text-sm font-normal text-center uppercase',
     ]"
   >
diff --git a/resources/scripts/components/base/BasePageHeader.vue b/resources/scripts/components/base/BasePageHeader.vue
index b85b5389..15718eaf 100644
--- a/resources/scripts/components/base/BasePageHeader.vue
+++ b/resources/scripts/components/base/BasePageHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-wrap justify-between">
     <div>
-      <h3 class="text-2xl font-bold text-left text-black">
+      <h3 class="text-2xl font-bold text-left text-heading">
         {{ title }}
       </h3>
       <slot />
diff --git a/resources/scripts/components/base/BasePaidStatusBadge.vue b/resources/scripts/components/base/BasePaidStatusBadge.vue
index 67012a31..c70ca34a 100644
--- a/resources/scripts/components/base/BasePaidStatusBadge.vue
+++ b/resources/scripts/components/base/BasePaidStatusBadge.vue
@@ -26,13 +26,13 @@ export default {
         case 'PAID':
           return 'bg-primary-300/25 text-primary-800 uppercase font-normal text-center'
         case 'UNPAID':
-          return ' bg-yellow-500/25 text-yellow-900 uppercase font-normal text-center '
+          return ' bg-yellow-500/25 text-status-yellow uppercase font-normal text-center '
         case 'PARTIALLY_PAID':
-          return 'bg-blue-400/25 text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400/25 text-status-blue uppercase font-normal text-center'
         case 'OVERDUE':
-          return 'bg-red-300/50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center'
+          return 'bg-red-300/50 px-2  py-1 text-sm  text-status-red uppercase font-normal text-center'
         default:
-          return 'bg-gray-500/25 text-gray-900 uppercase font-normal text-center'
+          return 'bg-surface-secondary0/25 text-heading uppercase font-normal text-center'
       }
     })
     return { badgeColorClasses }
diff --git a/resources/scripts/components/base/BaseRadio.vue b/resources/scripts/components/base/BaseRadio.vue
index 8a719673..602fd3fd 100644
--- a/resources/scripts/components/base/BaseRadio.vue
+++ b/resources/scripts/components/base/BaseRadio.vue
@@ -66,11 +66,11 @@ const props = defineProps({
   },
   checkedStateClass: {
     type: String,
-    default: 'bg-primary-600',
+    default: 'bg-primary-500',
   },
   unCheckedStateClass: {
     type: String,
-    default: 'bg-white ',
+    default: 'bg-surface ',
   },
   optionGroupActiveStateClass: {
     type: String,
@@ -78,11 +78,11 @@ const props = defineProps({
   },
   checkedStateLabelClass: {
     type: String,
-    default: 'text-primary-900 ',
+    default: 'text-primary-500 ',
   },
   unCheckedStateLabelClass: {
     type: String,
-    default: 'text-gray-900',
+    default: 'text-heading',
   },
   optionGroupClass: {
     type: String,
diff --git a/resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue b/resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue
index 29fc698c..822ded96 100644
--- a/resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue
+++ b/resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue
@@ -20,13 +20,13 @@ export default {
     const badgeColorClasses = computed(() => {
       switch (props.status) {
         case 'COMPLETED':
-          return 'bg-green-500/25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center'
+          return 'bg-green-500/25 px-2  py-1 text-sm  text-status-green uppercase font-normal text-center'
         case 'ON_HOLD':
-          return 'bg-yellow-500/25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
+          return 'bg-yellow-500/25 px-2  py-1 text-sm  text-status-yellow uppercase font-normal text-center'
         case 'ACTIVE':
-          return 'bg-blue-400/25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400/25 px-2  py-1 text-sm  text-status-blue uppercase font-normal text-center'
         default:
-          return 'bg-gray-500/25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
+          return 'bg-surface-secondary0/25 px-2 py-1 text-sm  text-heading uppercase font-normal text-center'
       }
     })
     return { badgeColorClasses }
diff --git a/resources/scripts/components/base/BaseSelectAction.vue b/resources/scripts/components/base/BaseSelectAction.vue
index 5fc53ca2..2c9adcd1 100644
--- a/resources/scripts/components/base/BaseSelectAction.vue
+++ b/resources/scripts/components/base/BaseSelectAction.vue
@@ -8,7 +8,7 @@
       px-6
       py-2
       text-sm
-      bg-gray-200
+      bg-surface-muted
       cursor-pointer
       text-primary-400
     "
diff --git a/resources/scripts/components/base/BaseSelectInput.vue b/resources/scripts/components/base/BaseSelectInput.vue
index 700d27f0..9e9a25b0 100644
--- a/resources/scripts/components/base/BaseSelectInput.vue
+++ b/resources/scripts/components/base/BaseSelectInput.vue
@@ -12,7 +12,7 @@
   >
     <ListboxLabel
       v-if="label"
-      class="block text-sm not-italic font-medium text-gray-800 mb-0.5"
+      class="block text-sm not-italic font-medium text-heading mb-0.5"
     >
       {{ label }}
     </ListboxLabel>
@@ -27,8 +27,8 @@
           pl-3
           pr-10
           text-left
-          bg-white
-          border border-gray-200
+          bg-surface
+          border border-line-default
           rounded-md
           shadow-xs
           cursor-default
@@ -42,10 +42,10 @@
         <span v-if="getValue(selectedValue)" class="block truncate">
           {{ getValue(selectedValue) }}
         </span>
-        <span v-else-if="placeholder" class="block text-gray-400 truncate">
+        <span v-else-if="placeholder" class="block text-subtle truncate">
           {{ placeholder }}
         </span>
-        <span v-else class="block text-gray-400 truncate">
+        <span v-else class="block text-subtle truncate">
           Please select an option
         </span>
 
@@ -62,7 +62,7 @@
         >
           <BaseIcon
             name="SelectorIcon"
-            class="text-gray-400"
+            class="text-subtle"
             aria-hidden="true"
           />
         </span>
@@ -82,7 +82,7 @@
             mt-1
             overflow-auto
             text-base
-            bg-white
+            bg-surface
             rounded-md
             shadow-lg
             max-h-60
@@ -100,7 +100,7 @@
           >
             <li
               :class="[
-                active ? 'text-white bg-primary-600' : 'text-gray-900',
+                active ? 'text-white bg-primary-600' : 'text-heading',
                 'cursor-default select-none relative py-2 pl-3 pr-9',
               ]"
             >
diff --git a/resources/scripts/components/base/BaseSettingCard.vue b/resources/scripts/components/base/BaseSettingCard.vue
index 99db2897..2af8c7cf 100644
--- a/resources/scripts/components/base/BaseSettingCard.vue
+++ b/resources/scripts/components/base/BaseSettingCard.vue
@@ -11,7 +11,7 @@
             mt-2
             text-sm
             leading-snug
-            text-left text-gray-500
+            text-left text-muted
             max-w-[680px]
           "
         >
diff --git a/resources/scripts/components/base/BaseSwitch.vue b/resources/scripts/components/base/BaseSwitch.vue
index b08b106d..aab73dee 100644
--- a/resources/scripts/components/base/BaseSwitch.vue
+++ b/resources/scripts/components/base/BaseSwitch.vue
@@ -7,7 +7,7 @@
 
       <Switch
         v-model="enabled"
-        :class="enabled ? 'bg-primary-500' : 'bg-gray-300'"
+        :class="enabled ? 'bg-primary-500' : 'bg-surface-muted'"
         class="
           relative
           inline-flex
diff --git a/resources/scripts/components/base/BaseSwitchSection.vue b/resources/scripts/components/base/BaseSwitchSection.vue
index e858a957..3201bddd 100644
--- a/resources/scripts/components/base/BaseSwitchSection.vue
+++ b/resources/scripts/components/base/BaseSwitchSection.vue
@@ -5,12 +5,12 @@
     <div class="flex flex-col">
       <SwitchLabel
         as="p"
-        class="p-0 mb-1 text-sm leading-snug text-black font-medium"
+        class="p-0 mb-1 text-sm leading-snug text-heading font-medium"
         passive
       >
         {{ title }}
       </SwitchLabel>
-      <SwitchDescription class="text-sm text-gray-500">
+      <SwitchDescription class="text-sm text-muted">
         {{ description }}
       </SwitchDescription>
     </div>
@@ -18,7 +18,7 @@
       :disabled="disabled"
       :model-value="modelValue"
       :class="[
-        modelValue ? 'bg-primary-500' : 'bg-gray-200',
+        modelValue ? 'bg-primary-500' : 'bg-surface-muted',
         'ml-4 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
       ]"
       @update:modelValue="onUpdate"
diff --git a/resources/scripts/components/base/BaseTabGroup.vue b/resources/scripts/components/base/BaseTabGroup.vue
index 96b0fa1b..16b91bbd 100644
--- a/resources/scripts/components/base/BaseTabGroup.vue
+++ b/resources/scripts/components/base/BaseTabGroup.vue
@@ -3,7 +3,7 @@
     <TabGroup :default-index="defaultIndex" @change="onChange">
       <TabList
         :class="[
-          'flex border-b border-gray-200',
+          'flex border-b border-line-default',
           'relative overflow-x-auto overflow-y-hidden',
           'lg:pb-0 lg:ml-0',
         ]"
@@ -18,8 +18,8 @@
             :class="[
               'px-8 py-2 text-sm leading-5 font-medium flex items-center relative border-b-2 mt-4 focus:outline-hidden whitespace-nowrap',
               selected
-                ? ' border-primary-400 text-black font-medium'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+                ? ' border-primary-400 text-heading font-medium'
+                : 'border-transparent text-muted hover:text-body hover:border-line-strong',
             ]"
           >
             {{ tab.title }}
diff --git a/resources/scripts/components/base/BaseTextarea.vue b/resources/scripts/components/base/BaseTextarea.vue
index 4ae0f94f..6e835796 100644
--- a/resources/scripts/components/base/BaseTextarea.vue
+++ b/resources/scripts/components/base/BaseTextarea.vue
@@ -45,7 +45,7 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 border-solid rounded outline-hidden',
+      'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-heading placeholder-subtle bg-surface border border-line-default border-solid rounded outline-hidden',
   },
   autosize: {
     type: Boolean,
diff --git a/resources/scripts/components/base/BaseTimePicker.vue b/resources/scripts/components/base/BaseTimePicker.vue
index e048c41f..0a52f85f 100644
--- a/resources/scripts/components/base/BaseTimePicker.vue
+++ b/resources/scripts/components/base/BaseTimePicker.vue
@@ -21,7 +21,7 @@
         text-sm
         not-italic
         font-black
-        text-gray-400
+        text-subtle
         cursor-pointer
       "
       viewBox="0 0 20 20"
@@ -86,7 +86,7 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'font-base pl-8 py-2 outline-hidden focus:ring-primary-400 focus:outline-hidden focus:border-primary-400 block w-full sm:text-sm border-gray-300 rounded-md text-black',
+      'font-base pl-8 py-2 outline-hidden focus:ring-primary-400 focus:outline-hidden focus:border-primary-400 block w-full sm:text-sm border-line-strong rounded-md text-heading',
   },
 })
 
@@ -130,7 +130,7 @@ const inputInvalidClass = computed(() => {
 
 const inputDisabledClass = computed(() => {
   if (props.disabled) {
-    return 'border border-solid rounded-md outline-hidden input-field box-border-2 base-date-picker-input placeholder-gray-400 bg-gray-300 text-gray-600 border-gray-300'
+    return 'border border-solid rounded-md outline-hidden input-field box-border-2 base-date-picker-input placeholder-subtle bg-surface-muted text-body border-line-strong'
   }
 
   return ''
diff --git a/resources/scripts/components/base/BaseWizardNavigation.vue b/resources/scripts/components/base/BaseWizardNavigation.vue
index cc99830a..e33289af 100644
--- a/resources/scripts/components/base/BaseWizardNavigation.vue
+++ b/resources/scripts/components/base/BaseWizardNavigation.vue
@@ -3,7 +3,7 @@
     :class="containerClass"
     class="
       relative
-      after:bg-gray-200
+      after:bg-surface-muted
       after:absolute
       after:transform
       after:top-1/2
@@ -62,7 +62,7 @@ export default {
     },
     nextStepClass: {
       type: String,
-      default: 'border-gray-200 bg-white',
+      default: 'border-line-default bg-surface',
     },
     previousStepClass: {
       type: String,
diff --git a/resources/scripts/components/base/BaseWizardStep.vue b/resources/scripts/components/base/BaseWizardStep.vue
index 57e41da2..00de8cb4 100644
--- a/resources/scripts/components/base/BaseWizardStep.vue
+++ b/resources/scripts/components/base/BaseWizardStep.vue
@@ -25,16 +25,16 @@ const props = defineProps({
   stepContainerClass: {
     type: String,
     default:
-      'w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded',
+      'w-full p-8 mb-8 bg-surface border border-line-default border-solid rounded',
   },
   stepTitleClass: {
     type: String,
-    default: 'text-2xl not-italic font-semibold leading-7 text-black',
+    default: 'text-2xl not-italic font-semibold leading-7 text-heading',
   },
   stepDescriptionClass: {
     type: String,
     default:
-      'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-gray-500 lg:w-7/12 md:w-7/12 sm:w-7/12',
+      'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-muted lg:w-7/12 md:w-7/12 sm:w-7/12',
   },
 })
 </script>
diff --git a/resources/scripts/components/base/base-editor/BaseEditor.vue b/resources/scripts/components/base/base-editor/BaseEditor.vue
index 199a449a..856ae75d 100644
--- a/resources/scripts/components/base/base-editor/BaseEditor.vue
+++ b/resources/scripts/components/base/base-editor/BaseEditor.vue
@@ -8,16 +8,16 @@
   </BaseContentPlaceholders>
   <div
     v-else
-    class="box-border w-full text-sm leading-8 text-left bg-white border border-gray-200 rounded-md min-h-[200px] overflow-hidden"
+    class="box-border w-full text-sm leading-8 text-left bg-surface border border-line-default rounded-md min-h-[200px] overflow-hidden"
   >
     <div v-if="editor" class="editor-content">
-      <div class="flex justify-end p-2 border-b border-gray-200 md:hidden">
+      <div class="flex justify-end p-2 border-b border-line-default md:hidden">
         <BaseDropdown width-class="w-48">
           <template #activator>
             <div
-              class="flex items-center justify-center w-6 h-6 ml-2 text-sm text-black bg-white rounded-xs md:h-9 md:w-9"
+              class="flex items-center justify-center w-6 h-6 ml-2 text-sm text-heading bg-surface rounded-xs md:h-9 md:w-9"
             >
-              <EllipsisVerticalIcon class="w-6 h-6 text-gray-600" />
+              <EllipsisVerticalIcon class="w-6 h-6 text-body" />
             </div>
           </template>
           <div class="flex flex-wrap space-x-1">
@@ -25,36 +25,36 @@
               v-for="button in editorButtons"
               type="button"
               :key="button.name"
-              class="p-1 rounded hover:bg-gray-100"
+              class="p-1 rounded hover:bg-surface-tertiary"
               @click="button.action"
             >
               <component
                 :is="button.icon"
                 v-if="button.icon"
-                class="w-4 h-4 text-gray-700 fill-gray-700"
+                class="w-4 h-4 text-body fill-current text-body"
               />
-              <span v-else-if="button.text" class="px-1 text-sm font-medium text-gray-600">
+              <span v-else-if="button.text" class="px-1 text-sm font-medium text-body">
                 {{ button.text }}
               </span>
             </button>
           </div>
         </BaseDropdown>
       </div>
-      <div class="hidden p-2 border-b border-gray-200 md:flex">
+      <div class="hidden p-2 border-b border-line-default md:flex">
         <div class="flex flex-wrap space-x-1">
           <button
               v-for="button in editorButtons"
               type="button"
               :key="button.name"
-              class="p-1 rounded hover:bg-gray-100"
+              class="p-1 rounded hover:bg-surface-tertiary"
               @click="button.action"
             >
               <component
                 :is="button.icon"
                 v-if="button.icon"
-                class="w-4 h-4 text-gray-700 fill-gray-700"
+                class="w-4 h-4 text-body fill-current text-body"
               />
-              <span v-else-if="button.text" class="px-1 text-sm font-medium text-gray-600">
+              <span v-else-if="button.text" class="px-1 text-sm font-medium text-body">
                 {{ button.text }}
               </span>
             </button>
@@ -209,7 +209,7 @@ export default {
 
   blockquote {
     padding-left: 1rem;
-    border-left: 2px solid rgba(13, 13, 13, 0.1);
+    border-left: 2px solid var(--color-line-default);
   }
 
   code {
diff --git a/resources/scripts/components/base/base-table/BaseTable.vue b/resources/scripts/components/base/base-table/BaseTable.vue
index a6a67f47..bda401da 100644
--- a/resources/scripts/components/base/base-table/BaseTable.vue
+++ b/resources/scripts/components/base/base-table/BaseTable.vue
@@ -6,9 +6,9 @@
           class="
             relative
             overflow-hidden
-            bg-white
-            border border-gray-100
-            shadow-sm
+            bg-surface
+            border border-line-light
+            shadow
             rounded-xl
           "
         >
@@ -22,7 +22,7 @@
                   :class="[
                     getThClass(column),
                     {
-                      'text-bold text-black': sort.fieldName === column.key,
+                      'text-bold text-heading': sort.fieldName === column.key,
                     },
                   ]"
                   @click="changeSorting(column)"
@@ -51,7 +51,7 @@
               <tr
                 v-for="placeRow in placeholderCount"
                 :key="placeRow"
-                :class="placeRow % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
+                :class="placeRow % 2 === 0 ? 'bg-surface' : 'bg-surface-secondary'"
               >
                 <td
                   v-for="column in columns"
@@ -75,7 +75,7 @@
               <tr
                 v-for="(row, index) in sortedRows"
                 :key="row.data?.id ?? index"
-                :class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
+                :class="index % 2 === 0 ? 'bg-surface' : 'bg-surface-secondary'"
               >
                 <td
                   v-for="column in columns"
@@ -114,7 +114,7 @@
               !loading && !isLoading && sortedRows && sortedRows.length === 0
             "
             class="
-              text-center text-gray-500
+              text-center text-muted
               pb-2
               flex
               h-[160px]
@@ -125,7 +125,7 @@
           >
             <BaseIcon
               name="ExclamationCircleIcon"
-              class="w-6 h-6 text-gray-400"
+              class="w-6 h-6 text-subtle"
             />
 
             <span class="block mt-1">{{ $t('general.no_data_found') }}</span>
@@ -163,9 +163,9 @@ const props = defineProps({
   sortOrder: { type: String, default: '' },
   tableClass: {
     type: String,
-    default: 'min-w-full divide-y divide-gray-200',
+    default: 'min-w-full divide-y divide-line-default',
   },
-  theadClass: { type: String, default: 'bg-gray-50' },
+  theadClass: { type: String, default: 'bg-surface-secondary' },
   tbodyClass: { type: String, default: '' },
   noResultsMessage: {
     type: String,
@@ -236,7 +236,7 @@ function getColumn(columnName) {
 
 function getThClass(column) {
   let classes =
-    'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'
+    'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider'
 
   if (column.defaultThClass) {
     classes = column.defaultThClass
@@ -256,7 +256,7 @@ function getThClass(column) {
 }
 
 function getTdClass(column) {
-  let classes = 'px-6 py-4 text-sm text-gray-500 whitespace-nowrap'
+  let classes = 'px-6 py-4 text-sm text-muted whitespace-nowrap'
 
   if (column.defaultTdClass) {
     classes = column.defaultTdClass
diff --git a/resources/scripts/components/base/base-table/BaseTablePagination.vue b/resources/scripts/components/base/base-table/BaseTablePagination.vue
index 0a7d4419..1710e3d2 100644
--- a/resources/scripts/components/base/base-table/BaseTablePagination.vue
+++ b/resources/scripts/components/base/base-table/BaseTablePagination.vue
@@ -7,8 +7,8 @@
       justify-between
       px-4
       py-3
-      bg-white
-      border-t border-gray-200
+      bg-surface
+      border-t border-line-default
       sm:px-6
     "
   >
@@ -16,7 +16,7 @@
       <a
         href="#"
         :class="{
-          'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400':
+          'disabled cursor-normal pointer-events-none !bg-surface-tertiary !text-subtle':
             pagination.currentPage === 1,
         }"
         class="
@@ -27,11 +27,11 @@
           py-2
           text-sm
           font-medium
-          text-gray-700
-          bg-white
-          border border-gray-200
+          text-body
+          bg-surface
+          border border-line-default
           rounded-md
-          hover:bg-gray-50
+          hover:bg-hover
         "
         @click="pageClicked(pagination.currentPage - 1)"
       >
@@ -40,7 +40,7 @@
       <a
         href="#"
         :class="{
-          'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400':
+          'disabled cursor-default pointer-events-none !bg-surface-tertiary !text-subtle':
             pagination.currentPage === pagination.totalPages,
         }"
         class="
@@ -52,11 +52,11 @@
           ml-3
           text-sm
           font-medium
-          text-gray-700
-          bg-white
-          border border-gray-200
+          text-body
+          bg-surface
+          border border-line-default
           rounded-md
-          hover:bg-gray-50
+          hover:bg-hover
         "
         @click="pageClicked(pagination.currentPage + 1)"
       >
@@ -65,7 +65,7 @@
     </div>
     <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
       <div>
-        <p class="text-sm text-gray-700">
+        <p class="text-sm text-body">
           {{ $t('general.pagination.showing') }}
           {{ ' ' }}
           <span
@@ -113,7 +113,7 @@
           <a
             href="#"
             :class="{
-              'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400':
+              'disabled cursor-normal pointer-events-none !bg-surface-tertiary !text-subtle':
                 pagination.currentPage === 1,
             }"
             class="
@@ -124,11 +124,11 @@
               py-2
               text-sm
               font-medium
-              text-gray-500
-              bg-white
-              border border-gray-200
+              text-muted
+              bg-surface
+              border border-line-default
               rounded-l-lg
-              hover:bg-gray-50
+              hover:bg-hover
             "
             @click="pageClicked(pagination.currentPage - 1)"
           >
@@ -142,7 +142,7 @@
             :class="{
               'z-10 bg-primary-500 border-primary-500 text-white':
                 isActive(1),
-              'bg-white border-gray-200 text-gray-500 hover:bg-gray-50':
+              'bg-surface border-line-default text-muted hover:bg-hover':
                 !isActive(1),
             }"
             class="
@@ -170,9 +170,9 @@
               py-2
               text-sm
               font-medium
-              text-gray-700
-              bg-white
-              border border-gray-200
+              text-body
+              bg-surface
+              border border-line-default
             "
           >
             ...
@@ -184,7 +184,7 @@
             :class="{
               'z-10 bg-primary-500 border-primary-500 text-white':
                 isActive(page),
-              'bg-white border-gray-200 text-gray-500 hover:bg-gray-50':
+              'bg-surface border-line-default text-muted hover:bg-hover':
                 !isActive(page),
               disabled: page === '...',
             }"
@@ -214,9 +214,9 @@
               py-2
               text-sm
               font-medium
-              text-gray-700
-              bg-white
-              border border-gray-200
+              text-body
+              bg-surface
+              border border-line-default
             "
           >
             ...
@@ -228,7 +228,7 @@
             :class="{
               'z-10 bg-primary-500 border-primary-500 text-white':
                 isActive(pagination.totalPages),
-              'bg-white border-gray-200 text-gray-500 hover:bg-gray-50':
+              'bg-surface border-line-default text-muted hover:bg-hover':
                 !isActive(pagination.totalPages),
             }"
             class="
@@ -255,14 +255,14 @@
               py-2
               text-sm
               font-medium
-              text-gray-500
-              bg-white
-              border border-gray-200
+              text-muted
+              bg-surface
+              border border-line-default
               rounded-r-lg
-              hover:bg-gray-50
+              hover:bg-hover
             "
             :class="{
-              'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400':
+              'disabled cursor-default pointer-events-none !bg-surface-tertiary !text-subtle':
                 pagination.currentPage === pagination.totalPages,
             }"
             @click="pageClicked(pagination.currentPage + 1)"
diff --git a/resources/scripts/components/list/BaseListItem.vue b/resources/scripts/components/list/BaseListItem.vue
index dcd252d0..9624c069 100644
--- a/resources/scripts/components/list/BaseListItem.vue
+++ b/resources/scripts/components/list/BaseListItem.vue
@@ -34,7 +34,7 @@ export default {
     })
     let containerClass = computed(() => {
       if (props.active) return `${defaultClass} text-primary-600 bg-primary-50 font-semibold`
-      else return `${defaultClass} text-gray-600 hover:bg-gray-50 hover:text-gray-900`
+      else return `${defaultClass} text-body hover:bg-hover hover:text-heading`
     })
     return {
       hasIconSlot,
diff --git a/resources/scripts/components/notifications/NotificationItem.vue b/resources/scripts/components/notifications/NotificationItem.vue
index 2cf03de5..21a58615 100644
--- a/resources/scripts/components/notifications/NotificationItem.vue
+++ b/resources/scripts/components/notifications/NotificationItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="success || info ? 'bg-white' : 'bg-red-50'"
+    :class="success || info ? 'bg-surface' : 'bg-alert-error-bg'"
     class="
       max-w-sm
       mb-3
@@ -21,7 +21,7 @@
           <div class="shrink-0">
             <svg
               v-if="success"
-              class="w-6 h-6 text-green-400"
+              class="w-6 h-6 text-alert-success-text"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -35,7 +35,7 @@
             </svg>
             <svg
               v-if="info"
-              class="w-6 h-6 text-blue-400"
+              class="w-6 h-6 text-status-blue"
               fill="currentColor"
               viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg"
@@ -48,7 +48,7 @@
             </svg>
             <svg
               v-if="error"
-              class="w-6 h-6 text-red-400"
+              class="w-6 h-6 text-alert-error-text"
               fill="currentColor"
               viewBox="0 0 24 24"
             >
@@ -62,7 +62,7 @@
           <div class="flex-1 w-0 ml-3 text-left">
             <p
               :class="`text-sm leading-5 font-medium ${
-                success || info ? 'text-gray-900' : 'text-red-800'
+                success || info ? 'text-heading' : 'text-alert-error-text'
               }`"
             >
               {{
@@ -75,7 +75,7 @@
             </p>
             <p
               :class="`mt-1 text-sm leading-5 ${
-                success || info ? 'text-gray-500' : 'text-red-700'
+                success || info ? 'text-muted' : 'text-alert-error-text'
               }`"
             >
               {{
@@ -91,8 +91,8 @@
             <button
               :class="
                 success || info
-                  ? ' text-gray-400 focus:text-gray-500'
-                  : 'text-red-400 focus:text-red-500'
+                  ? ' text-subtle focus:text-muted'
+                  : 'text-alert-error-text focus:text-alert-error-text'
               "
               class="
                 inline-flex
diff --git a/resources/scripts/customer/layouts/LayoutLogin.vue b/resources/scripts/customer/layouts/LayoutLogin.vue
index 5ff1ae34..2a31f5d3 100644
--- a/resources/scripts/customer/layouts/LayoutLogin.vue
+++ b/resources/scripts/customer/layouts/LayoutLogin.vue
@@ -2,7 +2,7 @@
   <div
     class="
       min-h-screen
-      bg-gray-200
+      bg-surface-muted
       flex flex-col
       justify-center
       py-12
@@ -25,7 +25,7 @@
     </div>
 
     <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
-      <div class="bg-white py-8 px-4 shadow rounded-lg sm:px-10">
+      <div class="bg-surface py-8 px-4 shadow rounded-lg sm:px-10">
         <router-view />
       </div>
     </div>
diff --git a/resources/scripts/customer/layouts/partials/TheSiteFooter.vue b/resources/scripts/customer/layouts/partials/TheSiteFooter.vue
index 91ab8115..75196e31 100644
--- a/resources/scripts/customer/layouts/partials/TheSiteFooter.vue
+++ b/resources/scripts/customer/layouts/partials/TheSiteFooter.vue
@@ -12,15 +12,15 @@
       pr-8
       text-sm
       font-normal
-      text-gray-700
-      bg-white
+      text-body
+      bg-surface
     "
   >
     Powered by
     <a
       href="http://bytefury.com/"
       target="_blank"
-      class="pl-1 font-normal text-gray-900"
+      class="pl-1 font-normal text-heading"
       >Bytefury
     </a>
   </footer>
diff --git a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue b/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
index 47717d75..5d92a8fe 100644
--- a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
@@ -2,7 +2,7 @@
   <Disclosure
     v-slot="{ open }"
     as="nav"
-    class="bg-white shadow-xs fixed top-0 left-0 z-20 w-full"
+    class="bg-surface shadow-xs fixed top-0 left-0 z-20 w-full"
   >
     <div class="mx-auto px-8">
       <div class="flex justify-between h-16 w-full">
@@ -34,7 +34,7 @@
               :class="[
                 hasActiveUrl(item.link)
                   ? 'border-primary-500 text-primary-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+                  : 'border-transparent text-muted hover:text-body hover:border-line-strong',
                 'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
               ]"
             >
@@ -46,11 +46,11 @@
           <button
             type="button"
             class="
-              bg-white
+              bg-surface
               p-1
               rounded-full
-              text-gray-400
-              hover:text-gray-500
+              text-subtle
+              hover:text-muted
               focus:outline-hidden
               focus:ring-2
               focus:ring-offset-2
@@ -65,7 +65,7 @@
               <template #activator>
                 <MenuButton
                   class="
-                    bg-white
+                    bg-surface
                     flex
                     text-sm
                     rounded-full
@@ -85,7 +85,7 @@
               <router-link :to="{ name: 'customer.profile' }">
                 <BaseDropdownItem>
                   <CogIcon
-                    class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                    class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
                     aria-hidden="true"
                   />
                   {{ $t('navigation.settings') }}
@@ -94,7 +94,7 @@
 
               <BaseDropdownItem @click="logout">
                 <ArrowRightOnRectangleIcon
-                  class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                  class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
                   aria-hidden="true"
                 />
                 {{ $t('navigation.logout') }}
@@ -106,14 +106,14 @@
           <!-- Mobile menu button -->
           <DisclosureButton
             class="
-              bg-white
+              bg-surface
               inline-flex
               items-center
               justify-center
               p-2
               rounded-md
-              text-gray-400
-              hover:text-gray-500 hover:bg-gray-100
+              text-subtle
+              hover:text-muted hover:bg-hover-strong
               focus:outline-hidden
               focus:ring-2
               focus:ring-offset-2
@@ -137,23 +137,23 @@
           :class="[
             hasActiveUrl(item.link)
               ? 'bg-primary-50 border-primary-500 text-primary-700'
-              : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
+              : 'border-transparent text-body hover:bg-hover hover:border-line-strong hover:text-heading',
             'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
           ]"
           :aria-current="item.current ? 'page' : undefined"
           >{{ $t(item.title) }}
         </router-link>
       </div>
-      <div class="pt-4 pb-3 border-t border-gray-200">
+      <div class="pt-4 pb-3 border-t border-line-default">
         <div class="flex items-center px-4">
           <div class="shrink-0">
             <img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
           </div>
           <div class="ml-3">
-            <div class="text-base font-medium text-gray-800">
+            <div class="text-base font-medium text-heading">
               {{ globalStore.currentUser.title }}
             </div>
-            <div class="text-sm font-medium text-gray-500">
+            <div class="text-sm font-medium text-muted">
               {{ globalStore.currentUser.email }}
             </div>
           </div>
@@ -161,12 +161,12 @@
             type="button"
             class="
               ml-auto
-              bg-white
+              bg-surface
               shrink-0
               p-1
               rounded-full
-              text-gray-400
-              hover:text-gray-500
+              text-subtle
+              hover:text-muted
               focus:outline-hidden
               focus:ring-2
               focus:ring-offset-2
@@ -182,7 +182,7 @@
             :class="[
               hasActiveUrl(item.link)
                 ? 'bg-primary-50 border-primary-500 text-primary-700'
-                : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
+                : 'border-transparent text-body hover:bg-hover hover:border-line-strong hover:text-heading',
               'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
             ]"
             >{{ $t(item.title) }}</router-link
diff --git a/resources/scripts/customer/views/BaseCheckon.vue b/resources/scripts/customer/views/BaseCheckon.vue
index db49b44e..a45bc224 100644
--- a/resources/scripts/customer/views/BaseCheckon.vue
+++ b/resources/scripts/customer/views/BaseCheckon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-10 w-20 bg-gray-100">
+  <div class="h-10 w-20 bg-surface-tertiary">
     <slot></slot>
   </div>
 </template>
diff --git a/resources/scripts/customer/views/auth/ForgotPassword.vue b/resources/scripts/customer/views/auth/ForgotPassword.vue
index e4ff913e..2de36f5e 100644
--- a/resources/scripts/customer/views/auth/ForgotPassword.vue
+++ b/resources/scripts/customer/views/auth/ForgotPassword.vue
@@ -31,7 +31,7 @@
     <div class="mt-4 mb-4 text-sm">
       <router-link
         to="login"
-        class="text-sm text-primary-400 hover:text-gray-700"
+        class="text-sm text-primary-400 hover:text-body"
       >
         {{ $t('general.back_to_login') }}
       </router-link>
diff --git a/resources/scripts/customer/views/auth/Login.vue b/resources/scripts/customer/views/auth/Login.vue
index 2c1fe2d5..55cba735 100644
--- a/resources/scripts/customer/views/auth/Login.vue
+++ b/resources/scripts/customer/views/auth/Login.vue
@@ -39,7 +39,7 @@
         <template #right>
           <BaseIcon
             :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-            class="mr-1 text-gray-500 cursor-pointer"
+            class="mr-1 text-muted cursor-pointer"
             @click="isShowPassword = !isShowPassword"
           />
         </template>
@@ -48,7 +48,7 @@
     <div class="flex items-center justify-between">
       <router-link
         :to="{ name: 'customer.forgot-password' }"
-        class="text-sm text-primary-600 hover:text-gray-500"
+        class="text-sm text-primary-600 hover:text-muted"
       >
         {{ $t('login.forgot_password') }}
       </router-link>
diff --git a/resources/scripts/customer/views/auth/ResetPassword.vue b/resources/scripts/customer/views/auth/ResetPassword.vue
index 780c36c2..dd1ca3be 100644
--- a/resources/scripts/customer/views/auth/ResetPassword.vue
+++ b/resources/scripts/customer/views/auth/ResetPassword.vue
@@ -31,7 +31,7 @@
         <template #right>
           <BaseIcon
             :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-            class="mr-1 text-gray-500 cursor-pointer"
+            class="mr-1 text-muted cursor-pointer"
             @click="isShowPassword = !isShowPassword"
           />
         </template>
diff --git a/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue b/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue
index a5827484..75574bce 100644
--- a/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue
@@ -6,10 +6,10 @@
       flex
       justify-between
       p-3
-      bg-white
+      bg-surface
       rounded
       shadow
-      hover:bg-gray-50
+      hover:bg-hover
       xl:p-4
       lg:col-span-2
     "
@@ -17,10 +17,10 @@
     :to="route"
   >
     <div>
-      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
+      <span class="text-xl font-semibold leading-tight text-heading xl:text-3xl">
         <slot />
       </span>
-      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
+      <span class="block mt-1 text-sm leading-tight text-muted xl:text-lg">
         {{ label }}
       </span>
     </div>
diff --git a/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue b/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue
index a114818d..e5a99893 100644
--- a/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseContentPlaceholders
     :rounded="true"
-    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
+    class="relative flex justify-between w-full p-3 bg-surface rounded shadow lg:col-span-3 xl:p-4"
   >
     <div>
       <BaseContentPlaceholdersText
diff --git a/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue b/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
index 90ad7a11..9a7ee56c 100644
--- a/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
@@ -7,7 +7,7 @@
       justify-between
       w-full
       p-3
-      bg-white
+      bg-surface
       rounded
       shadow
       lg:col-span-2
diff --git a/resources/scripts/customer/views/estimates/Index.vue b/resources/scripts/customer/views/estimates/Index.vue
index f8bb8304..10b53b56 100644
--- a/resources/scripts/customer/views/estimates/Index.vue
+++ b/resources/scripts/customer/views/estimates/Index.vue
@@ -50,8 +50,8 @@
         class="px-3 mt-2"
       >
         <BaseInput v-model="filters.estimate_number">
-          <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
-          <BaseIcon name="HashtagIcon" class="h-5 mr-3 text-gray-600" />
+          <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
+          <BaseIcon name="HashtagIcon" class="h-5 mr-3 text-body" />
         </BaseInput>
       </BaseInputGroup>
 
@@ -119,11 +119,11 @@
         <template #cell-actions="{ row }">
           <BaseDropdown>
             <template #activator>
-              <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
             </template>
             <router-link :to="`estimates/${row.data.id}/view`">
               <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
+                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-body" />
                 {{ $t('general.view') }}
               </BaseDropdownItem>
             </router-link>
@@ -182,7 +182,7 @@ const estimateColumns = computed(() => {
       key: 'estimate_date',
       label: t('estimates.date'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     { key: 'estimate_number', label: t('estimates.number', 2) },
     { key: 'status', label: t('estimates.status') },
diff --git a/resources/scripts/customer/views/estimates/View.vue b/resources/scripts/customer/views/estimates/View.vue
index 17b9ad86..68096f61 100644
--- a/resources/scripts/customer/views/estimates/View.vue
+++ b/resources/scripts/customer/views/estimates/View.vue
@@ -25,7 +25,7 @@
 
     <!-- Sidebar -->
     <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-surface w-88 xl:block"
     >
       <div
         class="
@@ -35,7 +35,7 @@
           px-4
           pt-8
           pb-6
-          border border-gray-200 border-solid
+          border border-line-default border-solid
         "
       >
         <BaseInput
@@ -46,7 +46,7 @@
           @input="onSearch"
         >
           <template #right>
-            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
+            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
           </template>
         </BaseInput>
 
@@ -69,7 +69,7 @@
                 pb-2
                 mb-2
                 text-sm
-                border-b border-gray-200 border-solid
+                border-b border-line-default border-solid
               "
             >
               {{ $t('general.sort_by') }}
@@ -136,7 +136,7 @@
           h-full
           pb-32
           overflow-y-scroll
-          border-l border-gray-200 border-solid
+          border-l border-line-default border-solid
           sw-scroll
         "
       >
@@ -146,9 +146,9 @@
           :key="index"
           :to="`/${globalStore.companySlug}/customer/estimates/${estimate.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
             {
-              'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
+              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
                 hasActiveUrl(estimate.id),
             },
           ]"
@@ -162,7 +162,7 @@
                 not-italic
                 font-medium
                 leading-5
-                text-gray-500
+                text-muted
                 capitalize
               "
             >
@@ -182,13 +182,13 @@
                 not-italic
                 font-semibold
                 leading-8
-                text-right text-gray-900
+                text-right text-heading
                 block
               "
               :amount="estimate.total"
               :currency="estimate.currency"
             />
-            <div class="text-sm text-right text-gray-500 non-italic">
+            <div class="text-sm text-right text-muted non-italic">
               {{ estimate.formatted_estimate_date }}
             </div>
           </div>
@@ -196,7 +196,7 @@
 
         <p
           v-if="!estimateStore.estimates.length"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-body"
         >
           {{ $t('estimates.no_matching_estimates') }}
         </p>
diff --git a/resources/scripts/customer/views/invoices/Index.vue b/resources/scripts/customer/views/invoices/Index.vue
index 1a4e28b8..21251e68 100644
--- a/resources/scripts/customer/views/invoices/Index.vue
+++ b/resources/scripts/customer/views/invoices/Index.vue
@@ -45,8 +45,8 @@
         class="px-3 mt-2"
       >
         <BaseInput v-model="filters.invoice_number">
-          <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
-          <BaseIcon name="HashtagIcon" class="h-5 ml-3 text-gray-600" />
+          <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
+          <BaseIcon name="HashtagIcon" class="h-5 ml-3 text-body" />
         </BaseInput>
       </BaseInputGroup>
 
@@ -126,11 +126,11 @@
         <template #cell-actions="{ row }">
           <BaseDropdown>
             <template #activator>
-              <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
             </template>
             <router-link :to="`invoices/${row.data.id}/view`">
               <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
+                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-body" />
                 {{ $t('general.view') }}
               </BaseDropdownItem>
             </router-link>
@@ -191,7 +191,7 @@ const itemColumns = computed(() => {
       key: 'invoice_date',
       label: t('invoices.date'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     { key: 'invoice_number', label: t('invoices.number') },
 
diff --git a/resources/scripts/customer/views/invoices/View.vue b/resources/scripts/customer/views/invoices/View.vue
index 985a1242..9833e523 100644
--- a/resources/scripts/customer/views/invoices/View.vue
+++ b/resources/scripts/customer/views/invoices/View.vue
@@ -31,7 +31,7 @@
 
     <!-- Sidebar -->
     <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-surface w-88 xl:block"
     >
       <div
         class="
@@ -41,7 +41,7 @@
           px-4
           pt-8
           pb-6
-          border border-gray-200 border-solid
+          border border-line-default border-solid
         "
       >
         <BaseInput
@@ -52,7 +52,7 @@
           @input="onSearch"
         >
           <template #right>
-            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
+            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
           </template>
         </BaseInput>
 
@@ -75,7 +75,7 @@
                 pb-2
                 mb-2
                 text-sm
-                border-b border-gray-200 border-solid
+                border-b border-line-default border-solid
               "
             >
               {{ $t('general.sort_by') }}
@@ -142,7 +142,7 @@
           h-full
           pb-32
           overflow-y-scroll
-          border-l border-gray-200 border-solid
+          border-l border-line-default border-solid
           sw-scroll
         "
       >
@@ -152,9 +152,9 @@
           :key="index"
           :to="`/${globalStore.companySlug}/customer/invoices/${invoice.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
             {
-              'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
+              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
                 hasActiveUrl(invoice.id),
             },
           ]"
@@ -167,7 +167,7 @@
                 not-italic
                 font-medium
                 leading-5
-                text-gray-500
+                text-muted
                 capitalize
                 text-md
               "
@@ -187,14 +187,14 @@
                 not-italic
                 font-semibold
                 leading-8
-                text-right text-gray-900
+                text-right text-heading
                 block
               "
               :amount="invoice.total"
               :currency="invoice.currency"
             />
 
-            <div class="text-sm text-right text-gray-500 non-italic">
+            <div class="text-sm text-right text-muted non-italic">
               {{ invoice.formatted_invoice_date }}
             </div>
           </div>
@@ -202,7 +202,7 @@
 
         <p
           v-if="!invoiceStore.invoices.length"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-body"
         >
           {{ $t('invoices.no_matching_invoices') }}
         </p>
diff --git a/resources/scripts/customer/views/payments/Index.vue b/resources/scripts/customer/views/payments/Index.vue
index 921f91a5..e2463505 100644
--- a/resources/scripts/customer/views/payments/Index.vue
+++ b/resources/scripts/customer/views/payments/Index.vue
@@ -113,11 +113,11 @@
         <template #cell-actions="{ row }">
           <BaseDropdown>
             <template #activator>
-              <BaseIcon name="EllipsisHorizontalIcon" class="w-5 text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="w-5 text-muted" />
             </template>
             <router-link :to="`payments/${row.data.id}/view`">
               <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
+                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-body" />
                 {{ $t('general.view') }}
               </BaseDropdownItem>
             </router-link>
@@ -176,7 +176,7 @@ const paymentColumns = computed(() => {
       key: 'payment_date',
       label: t('payments.date'),
       thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
     },
     { key: 'payment_number', label: t('payments.payment_number') },
     { key: 'payment_mode', label: t('payments.payment_mode') },
diff --git a/resources/scripts/customer/views/payments/View.vue b/resources/scripts/customer/views/payments/View.vue
index b07cf770..dd5bc8d4 100644
--- a/resources/scripts/customer/views/payments/View.vue
+++ b/resources/scripts/customer/views/payments/View.vue
@@ -19,7 +19,7 @@
 
     <!-- Sidebar -->
     <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-surface w-88 xl:block"
     >
       <div
         class="
@@ -29,7 +29,7 @@
           px-4
           pt-8
           pb-6
-          border border-gray-200 border-solid
+          border border-line-default border-solid
         "
       >
         <BaseInput
@@ -40,7 +40,7 @@
           @input="onSearch"
         >
           <template #right>
-            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
+            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
           </template>
         </BaseInput>
 
@@ -63,7 +63,7 @@
                 pb-2
                 mb-2
                 text-sm
-                border-b border-gray-200 border-solid
+                border-b border-line-default border-solid
               "
             >
               {{ $t('general.sort_by') }}
@@ -130,7 +130,7 @@
           h-full
           pb-32
           overflow-y-scroll
-          border-l border-gray-200 border-solid
+          border-l border-line-default border-solid
           sw-scroll
         "
       >
@@ -140,9 +140,9 @@
           :key="index"
           :to="`/${globalStore.companySlug}/customer/payments/${payment.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
             {
-              'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
+              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
                 hasActiveUrl(payment.id),
             },
           ]"
@@ -156,7 +156,7 @@
                 not-italic
                 font-medium
                 leading-5
-                text-gray-500
+                text-muted
                 capitalize
               "
             >
@@ -172,14 +172,14 @@
                 not-italic
                 font-semibold
                 leading-8
-                text-right text-gray-900
+                text-right text-heading
                 block
               "
               :amount="payment.amount"
               :currency="payment.currency"
             />
 
-            <div class="text-sm text-right text-gray-500 non-italic">
+            <div class="text-sm text-right text-muted non-italic">
               {{ payment.formatted_payment_date }}
             </div>
           </div>
@@ -187,7 +187,7 @@
 
         <p
           v-if="!paymentStore.payments.length"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-body"
         >
           {{ $t('payments.no_matching_payments') }}
         </p>
diff --git a/resources/scripts/customer/views/settings/AddressInformation.vue b/resources/scripts/customer/views/settings/AddressInformation.vue
index 13ff4a4f..206014bc 100644
--- a/resources/scripts/customer/views/settings/AddressInformation.vue
+++ b/resources/scripts/customer/views/settings/AddressInformation.vue
@@ -6,7 +6,7 @@
           {{ $t('settings.menu_title.address_information') }}
         </h6>
         <p
-          class="mt-2 text-sm leading-snug text-left text-gray-500"
+          class="mt-2 text-sm leading-snug text-left text-muted"
           style="max-width: 680px"
         >
           {{ $t('settings.address_information.section_description') }}
diff --git a/resources/scripts/customer/views/settings/CustomerSettings.vue b/resources/scripts/customer/views/settings/CustomerSettings.vue
index c452df7c..754f16b2 100644
--- a/resources/scripts/customer/views/settings/CustomerSettings.vue
+++ b/resources/scripts/customer/views/settings/CustomerSettings.vue
@@ -6,7 +6,7 @@
           {{ $t('settings.account_settings.account_settings') }}
         </h6>
         <p
-          class="mt-2 text-sm leading-snug text-left text-gray-500"
+          class="mt-2 text-sm leading-snug text-left text-muted"
           style="max-width: 680px"
         >
           {{ $t('settings.account_settings.section_description') }}
@@ -73,7 +73,7 @@
             <template #right>
               <BaseIcon
                 :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                class="mr-1 text-gray-500 cursor-pointer"
+                class="mr-1 text-muted cursor-pointer"
                 @click="isShowPassword = !isShowPassword"
               />
             </template>
@@ -96,7 +96,7 @@
             <template #right>
               <BaseIcon
                 :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                class="mr-1 text-gray-500 cursor-pointer"
+                class="mr-1 text-muted cursor-pointer"
                 @click="isShowConfirmPassword = !isShowConfirmPassword"
               />
             </template>
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index aaee5c79..5306a30a 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -22,10 +22,19 @@
     @endforeach
 
     @vite('resources/scripts/main.js')
+
+    <script>
+        (function() {
+            var theme = localStorage.getItem('theme') || 'system';
+            if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.setAttribute('data-theme', 'dark');
+            }
+        })();
+    </script>
 </head>
 
 <body
-    class="h-full overflow-hidden bg-gray-100 font-base
+    class="h-full overflow-hidden bg-surface-tertiary font-base
     @if(isset($current_theme)) theme-{{ $current_theme }} @else theme-{{get_app_setting('admin_portal_theme') ?? 'invoiceshelf'}} @endif ">
 
     <!-- Module Scripts -->