diff --git a/layouts/default.vue b/layouts/default.vue
index afda7b4..2f6bc93 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -49,6 +49,6 @@
 <script setup>
 const colorMode = useColorMode();
 function switchColorMode () {
-    colorMode.value = colorMode.value === "dark" ? "light" : "dark";
+    colorMode.preference = colorMode.preference === "dark" ? "light" : "dark";
 }
 </script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 83245f4..e07aaa7 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -14,4 +14,9 @@ export default defineNuxtConfig({
   css: ["@/assets/main.scss"],
   ssr: false,
   modules: ["@nuxt/ui", "@nuxtjs/color-mode", "@vueuse/nuxt"],
+  colorMode: {
+    preference: "system", // default value of $colorMode.preference
+    fallback: "light", // fallback value if not system preference found
+    classSuffix: "",
+  },
 });
diff --git a/pages/Receive.vue b/pages/Receive.vue
index 6500099..d9d4b36 100644
--- a/pages/Receive.vue
+++ b/pages/Receive.vue
@@ -19,7 +19,7 @@
               <span class="w-8 h-1 rounded-full bg-gray-100 dark:bg-gray-700" />
             </template></UBreadcrumb>
           <br />
-          <h1 class="text-3xl text-bold reem-kufi dark:text-white text-black/70">sender</h1>
+          <h1 class="text-3xl text-bold reem-kufi dark:text-white text-black/70">Receiver</h1>
           <p class="reem-kufi text-gray-500">I'm {{ characterName }}</p>
           <UDivider class="my-4" />
           <UInput color="white" variant="outline" type="text" v-model="sender" placeholder="Sender" />
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 552aee7..0899872 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
 
 export default <Partial<Config>>{
+  darkMode: "class",
   theme: {
     extend: {
       colors: {