diff --git a/resources/js/Components/ApplicationLogo.vue b/resources/js/Components/ApplicationLogo.vue
index b8a554d0..bc90424a 100644
--- a/resources/js/Components/ApplicationLogo.vue
+++ b/resources/js/Components/ApplicationLogo.vue
@@ -2,7 +2,7 @@
     <svg viewBox="0 0 317 48" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
             d="M74.09 30.04V13h-4.14v21H82.1v-3.96h-8.01zM95.379 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM106.628 21.58V19h-3.87v15h3.87v-7.17c0-3.15 2.55-4.05 4.56-3.81V18.7c-1.89 0-3.78.84-4.56 2.88zM124.295 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM141.544 19l-3.66 10.5-3.63-10.5h-4.26l5.7 15h4.41l5.7-15h-4.26zM150.354 28.09h11.31c.09-.51.15-1.02.15-1.59 0-4.41-3.15-7.92-7.59-7.92-4.71 0-7.92 3.45-7.92 7.92s3.18 7.92 8.22 7.92c2.88 0 5.13-1.17 6.54-3.21l-3.12-1.8c-.66.87-1.86 1.5-3.36 1.5-2.04 0-3.69-.84-4.23-2.82zm-.06-3c.45-1.92 1.86-3.03 3.93-3.03 1.62 0 3.24.87 3.72 3.03h-7.65zM164.516 34h3.87V12.1h-3.87V34zM185.248 34.36c3.69 0 6.9-2.01 6.9-6.3V13h-2.1v15.06c0 3.03-2.07 4.26-4.8 4.26-2.19 0-3.93-.78-4.62-2.61l-1.77 1.05c1.05 2.43 3.57 3.6 6.39 3.6zM203.124 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM221.224 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM225.176 22.93c0-1.62 1.59-2.37 3.15-2.37 1.44 0 2.97.57 3.6 2.1l1.65-.96c-.87-1.86-2.79-3.06-5.25-3.06-3 0-5.13 1.89-5.13 4.29 0 5.52 8.76 3.39 8.76 7.11 0 1.77-1.68 2.4-3.45 2.4-2.01 0-3.57-.99-4.11-2.52l-1.68.99c.75 1.92 2.79 3.45 5.79 3.45 3.21 0 5.43-1.77 5.43-4.32 0-5.52-8.76-3.39-8.76-7.11zM244.603 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM249.883 21.49V19h-1.98v15h1.98v-8.34c0-3.72 2.34-4.98 4.74-4.98v-1.92c-1.92 0-3.69.63-4.74 2.73zM263.358 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM286.848 19v2.94c-1.26-2.01-3.39-3.3-6.06-3.3-4.23 0-7.74 3.42-7.74 7.86s3.51 7.86 7.74 7.86c2.67 0 4.8-1.29 6.06-3.3V34h1.98V19h-1.98zm-5.91 13.44c-3.33 0-5.91-2.61-5.91-5.94 0-3.33 2.58-5.94 5.91-5.94s5.91 2.61 5.91 5.94c0 3.33-2.58 5.94-5.91 5.94zM309.01 18.64c-1.92 0-3.75.87-4.86 2.73-.84-1.74-2.46-2.73-4.56-2.73-1.8 0-3.42.72-4.59 2.55V19h-1.98v15H295v-8.31c0-3.72 2.16-5.13 4.32-5.13 2.13 0 3.51 1.41 3.51 4.08V34h1.98v-8.31c0-3.72 1.86-5.13 4.17-5.13 2.13 0 3.66 1.41 3.66 4.08V34h1.98v-9.36c0-3.75-2.31-6-5.61-6z"
-            class="fill-black dark:fill-white" />
+            class="fill-white" />
         <path
             d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z"
             fill="#6875F5" />
diff --git a/resources/js/Components/AuthenticationCard.vue b/resources/js/Components/AuthenticationCard.vue
index ee11110f..80c8a3d4 100644
--- a/resources/js/Components/AuthenticationCard.vue
+++ b/resources/js/Components/AuthenticationCard.vue
@@ -1,12 +1,12 @@
 <template>
     <div
-        class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
+        class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-card-background">
         <div>
             <slot name="logo" />
         </div>
 
         <div
-            class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
+            class="w-full sm:max-w-md mt-6 px-6 py-4 bg-card-background shadow-md overflow-hidden sm:rounded-lg">
             <slot />
         </div>
     </div>
diff --git a/resources/js/Components/Checkbox.vue b/resources/js/Components/Checkbox.vue
index e5ffd9a7..e2d0bda0 100644
--- a/resources/js/Components/Checkbox.vue
+++ b/resources/js/Components/Checkbox.vue
@@ -30,5 +30,5 @@ const proxyChecked = computed({
         v-model="proxyChecked"
         type="checkbox"
         :value="value"
-        class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" />
+        class="rounded bg-input-background border-input-border text-indigo-600 shadow-sm focus:ring-indigo-500" />
 </template>
diff --git a/resources/js/Components/ConfirmationModal.vue b/resources/js/Components/ConfirmationModal.vue
index abea8f8f..e5f730db 100644
--- a/resources/js/Components/ConfirmationModal.vue
+++ b/resources/js/Components/ConfirmationModal.vue
@@ -29,12 +29,12 @@ const close = () => {
         :max-width="maxWidth"
         :closeable="closeable"
         @close="close">
-        <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-card-background px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
             <div class="sm:flex sm:items-start">
                 <div
                     class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                     <svg
-                        class="h-6 w-6 text-red-600 dark:text-red-400"
+                        class="h-6 w-6 text-red-400"
                         xmlns="http://www.w3.org/2000/svg"
                         fill="none"
                         viewBox="0 0 24 24"
@@ -60,7 +60,7 @@ const close = () => {
         </div>
 
         <div
-            class="flex flex-row justify-end px-6 py-4 bg-gray-100 dark:bg-gray-800 text-end">
+            class="flex flex-row justify-end px-6 py-4 bg-card-background text-end">
             <slot name="footer" />
         </div>
     </Modal>
diff --git a/resources/js/Components/DangerButton.vue b/resources/js/Components/DangerButton.vue
index af1283bd..e2c756ac 100644
--- a/resources/js/Components/DangerButton.vue
+++ b/resources/js/Components/DangerButton.vue
@@ -14,7 +14,7 @@ Modal.vue
 <template>
     <button
         :type="type"
-        class="inline-flex items-center justify-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
+        class="inline-flex items-center justify-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150">
         <slot />
     </button>
 </template>
diff --git a/resources/js/Components/DialogModal.vue b/resources/js/Components/DialogModal.vue
index 0d2468fe..94b37f37 100644
--- a/resources/js/Components/DialogModal.vue
+++ b/resources/js/Components/DialogModal.vue
@@ -40,7 +40,7 @@ const close = () => {
         </div>
 
         <div
-            class="flex flex-row justify-end px-6 py-4 bg-gray-100 dark:bg-gray-800 text-end">
+            class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-end">
             <slot name="footer" />
         </div>
     </Modal>
diff --git a/resources/js/Components/InputError.vue b/resources/js/Components/InputError.vue
index 5d225358..2c9b669c 100644
--- a/resources/js/Components/InputError.vue
+++ b/resources/js/Components/InputError.vue
@@ -6,7 +6,7 @@ defineProps({
 
 <template>
     <div v-show="message">
-        <p class="text-sm text-red-600 dark:text-red-400">
+        <p class="text-sm text-red-400">
             {{ message }}
         </p>
     </div>
diff --git a/resources/js/Components/Modal.vue b/resources/js/Components/Modal.vue
index 1cc933ba..7ff0c973 100644
--- a/resources/js/Components/Modal.vue
+++ b/resources/js/Components/Modal.vue
@@ -78,7 +78,7 @@ const maxWidthClass = computed(() => {
                         class="fixed inset-0 transform transition-all"
                         @click="close">
                         <div
-                            class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75" />
+                            class="absolute inset-0 bg-card-background opacity-75" />
                     </div>
                 </transition>
 
@@ -91,7 +91,7 @@ const maxWidthClass = computed(() => {
                     leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                     <div
                         v-show="show"
-                        class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto"
+                        class="mb-6 bg-card-background rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto"
                         :class="maxWidthClass">
                         <slot v-if="show" />
                     </div>
diff --git a/resources/js/Components/NavLink.vue b/resources/js/Components/NavLink.vue
index 5f0a9ece..afb8aee4 100644
--- a/resources/js/Components/NavLink.vue
+++ b/resources/js/Components/NavLink.vue
@@ -9,8 +9,8 @@ const props = defineProps<{
 
 const classes = computed(() => {
     return props.active
-        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
-        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out';
+        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
+        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out';
 });
 </script>
 
diff --git a/resources/js/Components/PrimaryButton.vue b/resources/js/Components/PrimaryButton.vue
index 8bbff2b9..d03b2adc 100644
--- a/resources/js/Components/PrimaryButton.vue
+++ b/resources/js/Components/PrimaryButton.vue
@@ -14,7 +14,7 @@ withDefaults(
 <template>
     <button
         :type="type"
-        class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
+        class="inline-flex items-center px-4 py-2 bg-white/90 border border-transparent rounded-md font-semibold text-xs text-black uppercase tracking-widest hover:bg-white focus:bg-white active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
         <slot />
     </button>
 </template>
diff --git a/resources/js/Components/ResponsiveNavLink.vue b/resources/js/Components/ResponsiveNavLink.vue
index 2db6027f..780b96cc 100644
--- a/resources/js/Components/ResponsiveNavLink.vue
+++ b/resources/js/Components/ResponsiveNavLink.vue
@@ -10,8 +10,8 @@ const props = defineProps<{
 
 const classes = computed(() => {
     return props.active
-        ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
-        : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-muted hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out';
+        ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 text-start text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
+        : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-muted hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out';
 });
 </script>
 
diff --git a/resources/js/Components/SecondaryButton.vue b/resources/js/Components/SecondaryButton.vue
index 8f61fb22..9259349e 100644
--- a/resources/js/Components/SecondaryButton.vue
+++ b/resources/js/Components/SecondaryButton.vue
@@ -14,7 +14,7 @@ withDefaults(
 <template>
     <button
         :type="type"
-        class="inline-flex items-center px-4 py-2 bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover rounded-md font-semibold text-xs text-white uppercase tracking-widest shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150">
+        class="inline-flex items-center px-4 py-2 bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover rounded-md font-semibold text-xs text-white uppercase tracking-widest shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150">
         <slot />
     </button>
 </template>
diff --git a/resources/js/Components/UserSettingsIcon.vue b/resources/js/Components/UserSettingsIcon.vue
index 5f64d59c..586c2b0d 100644
--- a/resources/js/Components/UserSettingsIcon.vue
+++ b/resources/js/Components/UserSettingsIcon.vue
@@ -40,7 +40,7 @@ const logout = () => {
                 <span v-else class="inline-flex rounded-md">
                     <button
                         type="button"
-                        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none focus:bg-gray-50 dark:focus:bg-gray-700 active:bg-gray-50 dark:active:bg-gray-700 transition ease-in-out duration-150">
+                        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition ease-in-out duration-150">
                         {{ page.props.auth.user.name }}
 
                         <svg
@@ -75,7 +75,7 @@ const logout = () => {
                     API Tokens
                 </DropdownLink>
 
-                <div class="border-t border-gray-200 dark:border-gray-600" />
+                <div class="border-t border-card-border" />
 
                 <!-- Authentication -->
                 <form @submit.prevent="logout">
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index ff319201..e102764a 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -25,7 +25,7 @@ defineProps({
 <template>
     <div class="flex flex-wrap bg-default-background text-muted">
         <div
-            class="flex-shrink-0 h-screen fixed w-[250px] px-1.5 py-4 flex flex-col justify-between">
+            class="flex-shrink-0 h-screen fixed w-[250px] xl:w-[300px] px-2.5 xl:px-4 py-4 flex flex-col justify-between">
             <div>
                 <div class="border-b border-default-background-seperator pb-2">
                     <OrganizationSwitcher></OrganizationSwitcher>
@@ -93,7 +93,7 @@ defineProps({
                 <UserSettingsIcon></UserSettingsIcon>
             </ul>
         </div>
-        <div class="flex-1 ml-[250px]">
+        <div class="flex-1 ml-[250px] xl:ml-[300px]">
             <Head :title="title" />
 
             <Banner />
diff --git a/resources/js/Pages/API/Index.vue b/resources/js/Pages/API/Index.vue
index 48d22ff9..54e357dd 100644
--- a/resources/js/Pages/API/Index.vue
+++ b/resources/js/Pages/API/Index.vue
@@ -14,7 +14,7 @@ defineProps<{
     <AppLayout title="API Tokens">
         <template #header>
             <h2
-                class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+                class="font-semibold text-xl text-white leading-tight">
                 API Tokens
             </h2>
         </template>
diff --git a/resources/js/Pages/API/Partials/ApiTokenManager.vue b/resources/js/Pages/API/Partials/ApiTokenManager.vue
index 1efa13f2..2dd0bac7 100644
--- a/resources/js/Pages/API/Partials/ApiTokenManager.vue
+++ b/resources/js/Pages/API/Partials/ApiTokenManager.vue
@@ -173,7 +173,7 @@ const deleteApiToken = () => {
                                 v-for="token in tokens"
                                 :key="token.id"
                                 class="flex items-center justify-between">
-                                <div class="break-all dark:text-white">
+                                <div class="break-all text-white">
                                     {{ token.name }}
                                 </div>
 
@@ -218,7 +218,7 @@ const deleteApiToken = () => {
 
                 <div
                     v-if="page.props.jetstream.flash.token"
-                    class="mt-4 bg-gray-100 dark:bg-gray-900 px-4 py-2 rounded font-mono text-sm text-gray-500 break-all">
+                    class="mt-4 bg-card-backgroundpx-4 py-2 rounded font-mono text-sm text-gray-500 break-all">
                     {{ page.props.jetstream.flash.token }}
                 </div>
             </template>
diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index 6cdb1151..ef298f0d 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -36,7 +36,7 @@ const submit = () => {
 
         <div
             v-if="status"
-            class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
+            class="mb-4 font-medium text-sm text-green-400">
             {{ status }}
         </div>
 
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 875bddfe..3cfd2784 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -40,7 +40,7 @@ const submit = () => {
 
         <div
             v-if="status"
-            class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
+            class="mb-4 font-medium text-sm text-green-400">
             {{ status }}
         </div>
 
@@ -81,7 +81,7 @@ const submit = () => {
                 <Link
                     v-if="canResetPassword"
                     :href="route('password.request')"
-                    class="underline text-sm text-muted hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
+                    class="underline text-sm text-muted hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                     Forgot your password?
                 </Link>
 
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index 0db0ba46..31fc664d 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -108,14 +108,14 @@ const page = usePage<{
                             <a
                                 target="_blank"
                                 :href="route('terms.show')"
-                                class="underline text-sm text-muted hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+                                class="underline text-sm text-muted hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                                 >Terms of Service</a
                             >
                             and
                             <a
                                 target="_blank"
                                 :href="route('policy.show')"
-                                class="underline text-sm text-muted hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+                                class="underline text-sm text-muted hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                                 >Privacy Policy</a
                             >
                         </div>
@@ -127,7 +127,7 @@ const page = usePage<{
             <div class="flex items-center justify-end mt-4">
                 <Link
                     :href="route('login')"
-                    class="underline text-sm text-muted hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
+                    class="underline text-sm text-muted hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                     Already registered?
                 </Link>
 
diff --git a/resources/js/Pages/Auth/VerifyEmail.vue b/resources/js/Pages/Auth/VerifyEmail.vue
index 96bcdc20..45ca9ce6 100644
--- a/resources/js/Pages/Auth/VerifyEmail.vue
+++ b/resources/js/Pages/Auth/VerifyEmail.vue
@@ -36,7 +36,7 @@ const verificationLinkSent = computed(
 
         <div
             v-if="verificationLinkSent"
-            class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
+            class="mb-4 font-medium text-sm text-green-400">
             A new verification link has been sent to the email address you
             provided in your profile settings.
         </div>
@@ -52,7 +52,7 @@ const verificationLinkSent = computed(
                 <div>
                     <Link
                         :href="route('profile.show')"
-                        class="underline text-sm text-muted hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
+                        class="underline text-sm text-muted hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                         Edit Profile</Link
                     >
 
@@ -60,7 +60,7 @@ const verificationLinkSent = computed(
                         :href="route('logout')"
                         method="post"
                         as="button"
-                        class="underline text-sm text-muted hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 ms-2">
+                        class="underline text-sm text-muted hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 ms-2">
                         Log Out
                     </Link>
                 </div>
diff --git a/resources/js/Pages/PrivacyPolicy.vue b/resources/js/Pages/PrivacyPolicy.vue
index dbdac341..1f949db8 100644
--- a/resources/js/Pages/PrivacyPolicy.vue
+++ b/resources/js/Pages/PrivacyPolicy.vue
@@ -10,15 +10,15 @@ defineProps({
 <template>
     <Head title="Privacy Policy" />
 
-    <div class="font-sans text-gray-900 dark:text-gray-100 antialiased">
-        <div class="pt-4 bg-gray-100 dark:bg-gray-900">
+    <div class="font-sans text-gray-100 antialiased">
+        <div class="pt-4 bg-gray-900">
             <div class="min-h-screen flex flex-col items-center pt-6 sm:pt-0">
                 <div>
                     <AuthenticationCardLogo />
                 </div>
 
                 <div
-                    class="w-full sm:max-w-2xl mt-6 p-6 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg prose dark:prose-invert"
+                    class="w-full sm:max-w-2xl mt-6 p-6 bg-gray-800 shadow-md overflow-hidden sm:rounded-lg prose dark:prose-invert"
                     v-html="policy" />
             </div>
         </div>
diff --git a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
index 0d1ffac5..db242c98 100644
--- a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
+++ b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
@@ -127,13 +127,13 @@ const disableTwoFactorAuthentication = () => {
         <template #content>
             <h3
                 v-if="twoFactorEnabled && !confirming"
-                class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                class="text-lg font-medium text-gray-100">
                 You have enabled two factor authentication.
             </h3>
 
             <h3
                 v-else-if="twoFactorEnabled && confirming"
-                class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                class="text-lg font-medium text-gray-100">
                 Finish enabling two factor authentication.
             </h3>
 
@@ -210,7 +210,7 @@ const disableTwoFactorAuthentication = () => {
                     </div>
 
                     <div
-                        class="grid gap-1 max-w-xl mt-4 px-4 py-4 font-mono text-sm bg-gray-100 dark:bg-gray-900 dark:text-gray-100 rounded-lg">
+                        class="grid gap-1 max-w-xl mt-4 px-4 py-4 font-mono text-sm bg-gray-100 text-gray-100 rounded-lg">
                         <div v-for="code in recoveryCodes" :key="code">
                             {{ code }}
                         </div>
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
index e882b862..bb0e1e02 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -177,14 +177,14 @@ const page = usePage<{
                         page.props.jetstream.hasEmailVerification &&
                         user.email_verified_at === null
                     ">
-                    <p class="text-sm mt-2 dark:text-white">
+                    <p class="text-sm mt-2 text-white">
                         Your email address is unverified.
 
                         <Link
                             :href="route('verification.send')"
                             method="post"
                             as="button"
-                            class="underline text-sm text-muted hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+                            class="underline text-sm text-muted hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
                             @click.prevent="sendEmailVerification">
                             Click here to re-send the verification email.
                         </Link>
@@ -192,7 +192,7 @@ const page = usePage<{
 
                     <div
                         v-show="verificationLinkSent"
-                        class="mt-2 font-medium text-sm text-green-600 dark:text-green-400">
+                        class="mt-2 font-medium text-sm text-green-400">
                         A new verification link has been sent to your email
                         address.
                     </div>
diff --git a/resources/js/Pages/Profile/Show.vue b/resources/js/Pages/Profile/Show.vue
index 76762c9a..a213dad3 100644
--- a/resources/js/Pages/Profile/Show.vue
+++ b/resources/js/Pages/Profile/Show.vue
@@ -32,7 +32,7 @@ const page = usePage<{
     <AppLayout title="Profile">
         <template #header>
             <h2
-                class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+                class="font-semibold text-xl text-white leading-tight">
                 Profile
             </h2>
         </template>
diff --git a/resources/js/Pages/Teams/Create.vue b/resources/js/Pages/Teams/Create.vue
index bc92928d..a6127db6 100644
--- a/resources/js/Pages/Teams/Create.vue
+++ b/resources/js/Pages/Teams/Create.vue
@@ -7,7 +7,7 @@ import CreateTeamForm from '@/Pages/Teams/Partials/CreateTeamForm.vue';
     <AppLayout title="Create Team">
         <template #header>
             <h2
-                class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+                class="font-semibold text-xl text-white leading-tight">
                 Create Team
             </h2>
         </template>
diff --git a/resources/js/Pages/Teams/Partials/CreateTeamForm.vue b/resources/js/Pages/Teams/Partials/CreateTeamForm.vue
index 9c79556e..91d58b9a 100644
--- a/resources/js/Pages/Teams/Partials/CreateTeamForm.vue
+++ b/resources/js/Pages/Teams/Partials/CreateTeamForm.vue
@@ -43,10 +43,10 @@ const page = usePage<{
                         :alt="page.props.auth.user.name" />
 
                     <div class="ms-4 leading-tight">
-                        <div class="text-gray-900 dark:text-white">
+                        <div class="text-white">
                             {{ page.props.auth.user.name }}
                         </div>
-                        <div class="text-sm text-gray-700 dark:text-gray-300">
+                        <div class="text-sm text-muted">
                             {{ page.props.auth.user.email }}
                         </div>
                     </div>
diff --git a/resources/js/Pages/Teams/Partials/TeamMemberManager.vue b/resources/js/Pages/Teams/Partials/TeamMemberManager.vue
index 4ad53c44..dff06326 100644
--- a/resources/js/Pages/Teams/Partials/TeamMemberManager.vue
+++ b/resources/js/Pages/Teams/Partials/TeamMemberManager.vue
@@ -167,14 +167,14 @@ const displayableRole = (role: string) => {
                             class="mt-2" />
 
                         <div
-                            class="relative z-0 mt-1 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer">
+                            class="relative z-0 mt-1 border border-card-border rounded-lg cursor-pointer">
                             <button
                                 v-for="(role, i) in availableRoles"
                                 :key="role.key"
                                 type="button"
-                                class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-600"
+                                class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
                                 :class="{
-                                    'border-t border-gray-200 dark:border-gray-700 focus:border-none rounded-t-none':
+                                    'border-t border-card-border focus:border-none rounded-t-none':
                                         i > 0,
                                     'rounded-b-none':
                                         i !=
@@ -190,7 +190,7 @@ const displayableRole = (role: string) => {
                                     <!-- Role Name -->
                                     <div class="flex items-center">
                                         <div
-                                            class="text-sm text-muted"
+                                            class="text-sm text-white"
                                             :class="{
                                                 'font-semibold':
                                                     addTeamMemberForm.role ==
@@ -310,7 +310,7 @@ const displayableRole = (role: string) => {
                                     class="w-8 h-8 rounded-full object-cover"
                                     :src="user.profile_photo_url"
                                     :alt="user.name" />
-                                <div class="ms-4 dark:text-white">
+                                <div class="ms-4 text-whites">
                                     {{ user.name }}
                                 </div>
                             </div>
@@ -366,14 +366,14 @@ const displayableRole = (role: string) => {
             <template #content>
                 <div v-if="managingRoleFor">
                     <div
-                        class="relative z-0 mt-1 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer">
+                        class="relative z-0 mt-1 border border-card-border rounded-lg cursor-pointer">
                         <button
                             v-for="(role, i) in availableRoles"
                             :key="role.key"
                             type="button"
-                            class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-600"
+                            class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
                             :class="{
-                                'border-t border-gray-200 dark:border-gray-700 focus:border-none rounded-t-none':
+                                'border-t border-card-border focus:border-none rounded-t-none':
                                     i > 0,
                                 'rounded-b-none':
                                     i !==
diff --git a/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue b/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
index ba008cdb..f021589b 100644
--- a/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
+++ b/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
@@ -46,10 +46,10 @@ const updateTeamName = () => {
                         :alt="team.owner.name" />
 
                     <div class="ms-4 leading-tight">
-                        <div class="text-gray-900 dark:text-white">
+                        <div class="text-white">
                             {{ team.owner.name }}
                         </div>
-                        <div class="text-gray-700 dark:text-gray-300 text-sm">
+                        <div class="text-muted text-sm">
                             {{ team.owner.email }}
                         </div>
                     </div>
diff --git a/resources/js/Pages/Teams/Show.vue b/resources/js/Pages/Teams/Show.vue
index cafd3319..cbca621a 100644
--- a/resources/js/Pages/Teams/Show.vue
+++ b/resources/js/Pages/Teams/Show.vue
@@ -18,7 +18,7 @@ defineProps<{
     <AppLayout title="Team Settings">
         <template #header>
             <h2
-                class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+                class="font-semibold text-xl text-white leading-tight">
                 Team Settings
             </h2>
         </template>
diff --git a/resources/js/Pages/TermsOfService.vue b/resources/js/Pages/TermsOfService.vue
index 2bdc68cc..45ad655d 100644
--- a/resources/js/Pages/TermsOfService.vue
+++ b/resources/js/Pages/TermsOfService.vue
@@ -10,15 +10,15 @@ defineProps({
 <template>
     <Head title="Terms of Service" />
 
-    <div class="font-sans text-gray-900 dark:text-gray-100 antialiased">
-        <div class="pt-4 bg-gray-100 dark:bg-gray-900">
+    <div class="font-sans text-gray-100 antialiased">
+        <div class="pt-4 bg-gray-900">
             <div class="min-h-screen flex flex-col items-center pt-6 sm:pt-0">
                 <div>
                     <AuthenticationCardLogo />
                 </div>
 
                 <div
-                    class="w-full sm:max-w-2xl mt-6 p-6 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg prose dark:prose-invert"
+                    class="w-full sm:max-w-2xl mt-6 p-6 bg-gray-800 shadow-md overflow-hidden sm:rounded-lg prose dark:prose-invert"
                     v-html="terms" />
             </div>
         </div>