diff --git a/.changes/optimize-dark.md b/.changes/optimize-dark.md
new file mode 100644
index 0000000..c194108
--- /dev/null
+++ b/.changes/optimize-dark.md
@@ -0,0 +1,5 @@
+---
+"algohub": patch:feat
+---
+
+Optimize dark mode selector for tailwindcss.
diff --git a/src/App.vue b/src/App.vue
index 82151fe..c59e50b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@ themeStore.init();
 </script>
 
 <template>
-    <main class="w-full h-screen">
+    <main class="w-full h-screen bg-zinc-200 dark:bg-zinc-950">
         <Toast />
         <RouterView />
     </main>
diff --git a/src/assets/base.css b/src/assets/base.css
index 1db5b21..2edeb18 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,8 +1,5 @@
 :root {
   font-family: Cascadia Mono, Consolas, Helvetica, Arial, sans-serif;
-  /* font-size: 16px; */
-  /* line-height: 24px; */
-  /* font-weight: 400; */
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
diff --git a/src/views/signup.vue b/src/views/signup.vue
index e501554..20af9d8 100644
--- a/src/views/signup.vue
+++ b/src/views/signup.vue
@@ -13,7 +13,7 @@ const router = useRouter();
 const themeStore = useThemeStore();
 const accountStore = useAccountStore();
 
-const activeStep = ref("3");
+const activeStep = ref("1");
 const isShowAvatarCutter = ref<boolean>(false);
 const avatarString = ref<string>('');
 const croppedAvatar = ref<string>('');
@@ -281,7 +281,7 @@ const onComplete = async ({ valid, states }: { valid: boolean, states: CompleteF
 
 <template>
   <div class="flex flex-col justify-center items-center h-screen">
-    <div class="flex flex-col container h-full m-10">
+    <div class="flex flex-col container m-auto items-center justify-center h-full">
       <div class="flex flex-row justify-between mb-4 w-full">
         <Button @click="router.go(-1)" icon="pi pi-arrow-left" label="Back" plain outlined></Button>
         <Button @click="themeStore.toggle" :icon="`pi pi-${themeStore.dark ? 'moon' : 'sun'}`" plain text></Button>
@@ -332,7 +332,7 @@ const onComplete = async ({ valid, states }: { valid: boolean, states: CompleteF
                       $form.terms.error.message }}</Message>
                   </div>
                   <p>Already have an account? <a @click="router.push('/login')" class="underline">Login</a></p>
-                  <Button type="submit" label="Activate" class="w-full" :loading="inProgress" secondary></Button>
+                  <Button type="submit" label="Register" class="w-full" :loading="inProgress" secondary></Button>
                 </Form>
               </template>
             </Card>
@@ -434,7 +434,7 @@ const onComplete = async ({ valid, states }: { valid: boolean, states: CompleteF
                       $form.major.error.message }}</Message>
                   </div>
                   <p>Activate your account later? <a @click="router.push('/')" class="underline">Stay inactive</a></p>
-                  <Button type="submit" label="Save" class="w-full" :disabled="inProgress" secondary></Button>
+                  <Button type="submit" label="Activate" class="w-full" :disabled="inProgress" secondary></Button>
                 </Form>
               </template>
             </Card>
diff --git a/tailwind.config.js b/tailwind.config.js
index 3080739..b891f3f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{html,js,ts,vue}"],
+  darkMode: 'selector',
   theme: {
     extend: {},
   },