diff --git a/resources/js/Jetstream/ActionSection.vue b/resources/js/Jetstream/ActionSection.vue
index 5b6fc48..3aaf0b4 100644
--- a/resources/js/Jetstream/ActionSection.vue
+++ b/resources/js/Jetstream/ActionSection.vue
@@ -14,7 +14,7 @@ import JetSectionTitle from './SectionTitle.vue';
         </JetSectionTitle>
 
         <div class="mt-5 md:mt-0 md:col-span-2">
-            <div class="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-lg">
+            <div class="px-4 py-5 sm:p-6 bg-white dark:bg-gray-700 shadow sm:rounded-lg">
                 <slot name="content" />
             </div>
         </div>
diff --git a/resources/js/Jetstream/AuthenticationCard.vue b/resources/js/Jetstream/AuthenticationCard.vue
index 59f3713..a56ee70 100644
--- a/resources/js/Jetstream/AuthenticationCard.vue
+++ b/resources/js/Jetstream/AuthenticationCard.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
+    <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">
         <div>
             <slot name="logo" />
         </div>
 
-        <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+        <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-700 shadow-md overflow-hidden sm:rounded-lg">
             <slot />
         </div>
     </div>
diff --git a/resources/js/Jetstream/Button.vue b/resources/js/Jetstream/Button.vue
index 1599c23..4016831 100644
--- a/resources/js/Jetstream/Button.vue
+++ b/resources/js/Jetstream/Button.vue
@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-    <button :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition">
+    <button :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-900 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition">
         <slot />
     </button>
 </template>
diff --git a/resources/js/Jetstream/Checkbox.vue b/resources/js/Jetstream/Checkbox.vue
index 1fbc8c7..e161ab2 100644
--- a/resources/js/Jetstream/Checkbox.vue
+++ b/resources/js/Jetstream/Checkbox.vue
@@ -31,6 +31,6 @@ const proxyChecked = computed({
         v-model="proxyChecked"
         type="checkbox"
         :value="value"
-        class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+        class="rounded border-gray-300 dark:border-gray-800 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
     >
 </template>
diff --git a/resources/js/Jetstream/DialogModal.vue b/resources/js/Jetstream/DialogModal.vue
index 80ebb3d..e25aa4e 100644
--- a/resources/js/Jetstream/DialogModal.vue
+++ b/resources/js/Jetstream/DialogModal.vue
@@ -40,7 +40,7 @@ const close = () => {
             </div>
         </div>
 
-        <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
+        <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 dark:bg-gray-800 text-right">
             <slot name="footer" />
         </div>
     </Modal>
diff --git a/resources/js/Jetstream/FormSection.vue b/resources/js/Jetstream/FormSection.vue
index 543097f..bb36ddd 100644
--- a/resources/js/Jetstream/FormSection.vue
+++ b/resources/js/Jetstream/FormSection.vue
@@ -21,7 +21,7 @@ const hasActions = computed(() => !! useSlots().actions);
         <div class="mt-5 md:mt-0 md:col-span-2">
             <form @submit.prevent="$emit('submitted')">
                 <div
-                    class="px-4 py-5 bg-white sm:p-6 shadow"
+                    class="px-4 py-5 bg-white dark:bg-gray-700 dark:text-gray-200 sm:p-6 shadow"
                     :class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'"
                 >
                     <div class="grid grid-cols-6 gap-6">
@@ -29,7 +29,7 @@ const hasActions = computed(() => !! useSlots().actions);
                     </div>
                 </div>
 
-                <div v-if="hasActions" class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
+                <div v-if="hasActions" class="flex items-center justify-end px-4 py-3 bg-gray-50 dark:bg-gray-800 dark:text-gray-100 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
                     <slot name="actions" />
                 </div>
             </form>
diff --git a/resources/js/Jetstream/Input.vue b/resources/js/Jetstream/Input.vue
index 84a0f9c..129aa9d 100644
--- a/resources/js/Jetstream/Input.vue
+++ b/resources/js/Jetstream/Input.vue
@@ -21,7 +21,7 @@ defineExpose({ focus: () => input.value.focus() });
 <template>
     <input
         ref="input"
-        class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
+        class="dark:bg-transparent border-gray-300 dark:border-gray-800 dark:text-gray-100 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
         :value="modelValue"
         @input="$emit('update:modelValue', $event.target.value)"
     >
diff --git a/resources/js/Jetstream/Label.vue b/resources/js/Jetstream/Label.vue
index 9967f17..421c216 100644
--- a/resources/js/Jetstream/Label.vue
+++ b/resources/js/Jetstream/Label.vue
@@ -5,7 +5,7 @@ defineProps({
 </script>
 
 <template>
-    <label class="block font-medium text-sm text-gray-700">
+    <label class="block font-medium text-sm text-gray-700 dark:text-gray-100">
         <span v-if="value">{{ value }}</span>
         <span v-else><slot /></span>
     </label>
diff --git a/resources/js/Jetstream/Modal.vue b/resources/js/Jetstream/Modal.vue
index 6d80c56..e11409c 100644
--- a/resources/js/Jetstream/Modal.vue
+++ b/resources/js/Jetstream/Modal.vue
@@ -69,7 +69,7 @@ const maxWidthClass = computed(() => {
                     leave-to-class="opacity-0"
                 >
                     <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
-                        <div class="absolute inset-0 bg-gray-500 opacity-75" />
+                        <div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75" />
                     </div>
                 </transition>
 
@@ -81,7 +81,7 @@ const maxWidthClass = computed(() => {
                     leave-from-class="opacity-100 translate-y-0 sm:scale-100"
                     leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 >
-                    <div v-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
+                    <div v-show="show" class="mb-6 bg-white dark:bg-gray-700 dark:text-gray-200 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
                         <slot v-if="show" />
                     </div>
                 </transition>
diff --git a/resources/js/Jetstream/SecondaryButton.vue b/resources/js/Jetstream/SecondaryButton.vue
index 371f097..d4d702e 100644
--- a/resources/js/Jetstream/SecondaryButton.vue
+++ b/resources/js/Jetstream/SecondaryButton.vue
@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-    <button :type="type" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 disabled:opacity-25 transition">
+    <button :type="type" class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-200 uppercase tracking-widest shadow-sm hover:text-gray-500 dark:hover:text-white focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 dark:active:bg-gray-800 disabled:opacity-25 transition">
         <slot />
     </button>
 </template>
diff --git a/resources/js/Jetstream/SectionTitle.vue b/resources/js/Jetstream/SectionTitle.vue
index 273116e..ddd749d 100644
--- a/resources/js/Jetstream/SectionTitle.vue
+++ b/resources/js/Jetstream/SectionTitle.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="md:col-span-1 flex justify-between">
         <div class="px-4 sm:px-0">
-            <h3 class="text-lg font-medium text-gray-900">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                 <slot name="title" />
             </h3>
 
-            <p class="mt-1 text-sm text-gray-600">
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
                 <slot name="description" />
             </p>
         </div>
diff --git a/resources/js/Pages/Auth/ConfirmPassword.vue b/resources/js/Pages/Auth/ConfirmPassword.vue
index c7e4911..7f32875 100644
--- a/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -33,7 +33,7 @@ const submit = () => {
             <JetAuthenticationCardLogo />
         </template>
 
-        <div class="mb-4 text-sm text-gray-600">
+        <div class="mb-4 text-sm text-gray-600 dark:text-gray-200">
             This is a secure area of the application. Please confirm your password before continuing.
         </div>
 
diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index d8ee1f0..e2e271b 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -28,7 +28,7 @@ const submit = () => {
             <JetAuthenticationCardLogo />
         </template>
 
-        <div class="mb-4 text-sm text-gray-600">
+        <div class="mb-4 text-sm text-gray-600 dark:text-gray-200">
             Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.
         </div>
 
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 844b468..ce1f133 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -71,12 +71,12 @@ const submit = () => {
             <div class="block mt-4">
                 <label class="flex items-center">
                     <JetCheckbox v-model:checked="form.remember" name="remember" />
-                    <span class="ml-2 text-sm text-gray-600">Remember me</span>
+                    <span class="ml-2 text-sm text-gray-600 dark:text-gray-100">Remember me</span>
                 </label>
             </div>
 
             <div class="flex items-center justify-end mt-4">
-                <Link v-if="canResetPassword" :href="route('password.request')" class="underline text-sm text-gray-600 hover:text-gray-900">
+                <Link v-if="canResetPassword" :href="route('password.request')" class="underline text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50">
                     Forgot your password?
                 </Link>
 
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index 72a225b..c847482 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -107,7 +107,7 @@ const submit = () => {
             </div>
 
             <div class="flex items-center justify-end mt-4">
-                <Link :href="route('login')" class="underline text-sm text-gray-600 hover:text-gray-900">
+                <Link :href="route('login')" class="underline text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50">
                     Already registered?
                 </Link>
 
diff --git a/resources/js/Pages/Auth/TwoFactorChallenge.vue b/resources/js/Pages/Auth/TwoFactorChallenge.vue
index 8563be6..bb22052 100644
--- a/resources/js/Pages/Auth/TwoFactorChallenge.vue
+++ b/resources/js/Pages/Auth/TwoFactorChallenge.vue
@@ -45,7 +45,7 @@ const submit = () => {
             <JetAuthenticationCardLogo />
         </template>
 
-        <div class="mb-4 text-sm text-gray-600">
+        <div class="mb-4 text-sm text-gray-600 dark:text-gray-300">
             <template v-if="! recovery">
                 Please confirm access to your account by entering the authentication code provided by your authenticator application.
             </template>
@@ -85,7 +85,7 @@ const submit = () => {
             </div>
 
             <div class="flex items-center justify-end mt-4">
-                <button type="button" class="text-sm text-gray-600 hover:text-gray-900 underline cursor-pointer" @click.prevent="toggleRecovery">
+                <button type="button" class="text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 underline cursor-pointer" @click.prevent="toggleRecovery">
                     <template v-if="! recovery">
                         Use a recovery code
                     </template>
diff --git a/resources/js/Pages/Auth/VerifyEmail.vue b/resources/js/Pages/Auth/VerifyEmail.vue
index 0e04153..0de6814 100644
--- a/resources/js/Pages/Auth/VerifyEmail.vue
+++ b/resources/js/Pages/Auth/VerifyEmail.vue
@@ -26,7 +26,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
             <JetAuthenticationCardLogo />
         </template>
 
-        <div class="mb-4 text-sm text-gray-600">
+        <div class="mb-4 text-sm text-gray-600 dark:text-gray-300">
             Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.
         </div>
 
@@ -43,7 +43,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
                 <div>
                     <Link
                         :href="route('profile.show')"
-                        class="underline text-sm text-gray-600 hover:text-gray-900"
+                        class="underline text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900"
                     >
                         Edit Profile</Link>
 
@@ -51,7 +51,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
                         :href="route('logout')"
                         method="post"
                         as="button"
-                        class="underline text-sm text-gray-600 hover:text-gray-900 ml-2"
+                        class="underline text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 ml-2"
                     >
                         Log Out
                     </Link>
diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
index 4e8af91..8031b2d 100644
--- a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
+++ b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -48,7 +48,7 @@ const closeModal = () => {
         </template>
 
         <template #content>
-            <div class="max-w-xl text-sm text-gray-600">
+            <div class="max-w-xl text-sm text-gray-600 dark:text-gray-200">
                 Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.
             </div>
 
diff --git a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
index 76bc31e..867e63c 100644
--- a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
+++ b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
@@ -53,7 +53,7 @@ const closeModal = () => {
         </template>
 
         <template #content>
-            <div class="max-w-xl text-sm text-gray-600">
+            <div class="max-w-xl text-sm text-gray-600 dark:text-gray-200">
                 If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.
             </div>
 
@@ -69,7 +69,7 @@ const closeModal = () => {
                             stroke-width="2"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
-                            class="w-8 h-8 text-gray-500"
+                            class="w-8 h-8 text-gray-500 dark:text-gray-50"
                         >
                             <path d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                         </svg>
@@ -83,7 +83,7 @@ const closeModal = () => {
                             fill="none"
                             stroke-linecap="round"
                             stroke-linejoin="round"
-                            class="w-8 h-8 text-gray-500"
+                            class="w-8 h-8 text-gray-500 dark:text-gray-50"
                         >
                             <path d="M0 0h24v24H0z" stroke="none" /><rect
                                 x="7"
@@ -96,12 +96,12 @@ const closeModal = () => {
                     </div>
 
                     <div class="ml-3">
-                        <div class="text-sm text-gray-600">
+                        <div class="text-sm text-gray-600 dark:text-gray-100">
                             {{ session.agent.platform ? session.agent.platform : 'Unknown' }} - {{ session.agent.browser ? session.agent.browser : 'Unknown' }}
                         </div>
 
                         <div>
-                            <div class="text-xs text-gray-500">
+                            <div class="text-xs text-gray-500 dark:text-gray-50">
                                 {{ session.ip_address }},
 
                                 <span v-if="session.is_current_device" class="text-green-500 font-semibold">This device</span>
diff --git a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
index 6839819..a9209bd 100644
--- a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
+++ b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
@@ -115,19 +115,19 @@ const disableTwoFactorAuthentication = () => {
         </template>
 
         <template #content>
-            <h3 v-if="twoFactorEnabled && ! confirming" class="text-lg font-medium text-gray-900">
+            <h3 v-if="twoFactorEnabled && ! confirming" class="text-lg font-medium text-gray-900 dark:text-gray-100">
                 You have enabled two factor authentication.
             </h3>
 
-            <h3 v-else-if="twoFactorEnabled && confirming" class="text-lg font-medium text-gray-900">
+            <h3 v-else-if="twoFactorEnabled && confirming" class="text-lg font-medium text-gray-900 dark:text-gray-100">
                 Finish enabling two factor authentication.
             </h3>
 
-            <h3 v-else class="text-lg font-medium text-gray-900">
+            <h3 v-else class="text-lg font-medium text-gray-900 dark:text-gray-100">
                 You have not enabled two factor authentication.
             </h3>
 
-            <div class="mt-3 max-w-xl text-sm text-gray-600">
+            <div class="mt-3 max-w-xl text-sm text-gray-600 dark:text-gray-200">
                 <p>
                     When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.
                 </p>
@@ -135,7 +135,7 @@ const disableTwoFactorAuthentication = () => {
 
             <div v-if="twoFactorEnabled">
                 <div v-if="qrCode">
-                    <div class="mt-4 max-w-xl text-sm text-gray-600">
+                    <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-200">
                         <p v-if="confirming" class="font-semibold">
                             To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.
                         </p>
@@ -147,7 +147,7 @@ const disableTwoFactorAuthentication = () => {
 
                     <div class="mt-4" v-html="qrCode" />
 
-                    <div class="mt-4 max-w-xl text-sm text-gray-600" v-if="setupKey">
+                    <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-200" v-if="setupKey">
                         <p class="font-semibold">
                             Setup Key: <span v-html="setupKey"></span>
                         </p>
@@ -173,7 +173,7 @@ const disableTwoFactorAuthentication = () => {
                 </div>
 
                 <div v-if="recoveryCodes.length > 0 && ! confirming">
-                    <div class="mt-4 max-w-xl text-sm text-gray-600">
+                    <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-200">
                         <p class="font-semibold">
                             Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.
                         </p>
diff --git a/resources/js/Pages/Profile/Show.vue b/resources/js/Pages/Profile/Show.vue
index fae17ea..c593213 100644
--- a/resources/js/Pages/Profile/Show.vue
+++ b/resources/js/Pages/Profile/Show.vue
@@ -1,5 +1,5 @@
 <script setup>
-import AppLayout from '@/Layouts/AppLayout.vue';
+import DashboardLayout from '@/Layouts/DashboardLayout.vue';
 import DeleteUserForm from '@/Pages/Profile/Partials/DeleteUserForm.vue';
 import JetSectionBorder from '@/Jetstream/SectionBorder.vue';
 import LogoutOtherBrowserSessionsForm from '@/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue';
@@ -14,13 +14,7 @@ defineProps({
 </script>
 
 <template>
-    <AppLayout title="Profile">
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
-                Profile
-            </h2>
-        </template>
-
+    <DashboardLayout title="Profile">
         <div>
             <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
                 <div v-if="$page.props.jetstream.canUpdateProfileInformation">
@@ -53,5 +47,5 @@ defineProps({
                 </template>
             </div>
         </div>
-    </AppLayout>
+    </DashboardLayout>
 </template>