diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 5b983e2..8ad6202 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -2,7 +2,7 @@
   <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
     <RouterView />
     <Footer />
-    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
+    <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
       [Default Layout]
     </div>
   </main>
diff --git a/src/layouts/home.vue b/src/layouts/home.vue
index 5c6367c..7ff5a06 100644
--- a/src/layouts/home.vue
+++ b/src/layouts/home.vue
@@ -2,7 +2,7 @@
   <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
     <RouterView />
     <Footer />
-    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
+    <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
       [Home Layout]
     </div>
   </main>
diff --git a/src/pages/hi/[name].vue b/src/pages/hi/[name].vue
index 3fdf911..c321dae 100644
--- a/src/pages/hi/[name].vue
+++ b/src/pages/hi/[name].vue
@@ -20,7 +20,7 @@ watchEffect(() => {
       {{ t('intro.hi', { name: props.name }) }}
     </p>
 
-    <p text-sm opacity-50>
+    <p text-sm opacity-75>
       <em>{{ t('intro.dynamic-route') }}</em>
     </p>
 
diff --git a/unocss.config.ts b/unocss.config.ts
index dfd817e..7d409e8 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -11,7 +11,7 @@ import {
 
 export default defineConfig({
   shortcuts: [
-    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+    ['btn', 'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
   ],
   presets: [