diff --git a/.playground/pages/index.vue b/.playground/pages/index.vue
index ed9253d..ec77dcb 100644
--- a/.playground/pages/index.vue
+++ b/.playground/pages/index.vue
@@ -1,11 +1,5 @@
 <script lang="ts" setup>
 const message = useMessage();
-
-const count = ref(1)
-
-const info = () => {
-  message.info(`message ${count.value++}`);
-}
 </script>
 
 <template>
@@ -36,11 +30,23 @@ const info = () => {
       </div>
       <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg">
         <div class="p-4 border-b border-neutral-200 dark:border-neutral-700">
-          <button class="bg-indigo-400 text-white border border-indigo-400 px-2 py-0.5 rounded-lg"
-            @click="info">info</button>
+          <div class="flex items-center gap-2">
+            <button class="bg-indigo-400 text-white text-sm border border-indigo-400 px-2.5 py-1 rounded-lg"
+              @click="message.info('message info', 10000)">Info 10s</button>
+            <button class="bg-indigo-400 text-white text-sm border border-indigo-400 px-2.5 py-1 rounded-lg"
+              @click="message.success('message success')">Success</button>
+            <button class="bg-indigo-400 text-white text-sm border border-indigo-400 px-2.5 py-1 rounded-lg"
+              @click="message.warning('message warning')">Warning</button>
+            <button class="bg-indigo-400 text-white text-sm border border-indigo-400 px-2.5 py-1 rounded-lg"
+              @click="message.error('message error')">Error</button>
+          </div>
         </div>
         <div class="p-4">
-          <Shiki class="text-sm" lang="ts" :code="`const message = useMessage();\n\nmessage.info('Hello Rayine');`" />
+          <Shiki class="text-sm" lang="ts" :code="`const message = useMessage();\n
+message.info('message info', 10000);
+message.success('message success');
+message.warning('message warning');
+message.error('message error');`" />
         </div>
       </div>
 
diff --git a/components/overlays/Message.vue b/components/overlays/Message.vue
index ccbbd21..9ebcc39 100644
--- a/components/overlays/Message.vue
+++ b/components/overlays/Message.vue
@@ -21,10 +21,6 @@ onMounted(() => {
 
 <template>
   <div class="message" :class="{
-    '!text-blue-500 !border-blue-400 !bg-blue-50': message.type === 'info',
-    '!text-emerald-500 !border-emerald-400 !bg-emerald-50': message.type === 'success',
-    '!text-orange-500 !border-orange-400 !bg-orange-50': message.type === 'warning',
-    '!text-rose-500 !border-rose-400 !bg-rose-50': message.type === 'error',
     [message.type]: message.type
   }">
     <IconCircleSuccess v-if="message.type === 'success'" class="text-xl" />
@@ -46,17 +42,21 @@ onMounted(() => {
 
 .message.info {
   box-shadow: 0 4px 12px rgba(59, 130, 246, .2);
+  @apply !text-blue-500 !border-blue-400 !bg-blue-50 dark:!text-blue-300 dark:!border-blue-600 dark:!bg-blue-900;
 }
 
 .message.success {
   box-shadow: 0 4px 12px rgba(16, 185, 129, .2);
+  @apply !text-emerald-500 !border-emerald-400 !bg-emerald-50 dark:!text-emerald-300 dark:!border-emerald-600 dark:!bg-emerald-900;
 }
 
 .message.warning {
   box-shadow: 0 4px 12px rgba(249, 115, 22, .2);
+  @apply !text-orange-500 !border-orange-400 !bg-orange-50 dark:!text-orange-300 dark:!border-orange-600 dark:!bg-orange-900;
 }
 
 .message.error {
   box-shadow: 0 4px 12px rgba(244, 63, 94, .2);
+  @apply !text-rose-500 !border-rose-400 !bg-rose-50 dark:!text-rose-300 dark:!border-rose-600 dark:!bg-rose-900;
 }
 </style>