diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index aad8c49..ea9e8f7 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -331,7 +331,7 @@ onUnmounted(() => {
 
         <!-- Chat Container Window -->
         <div
-            class="flex h-[calc(100vh-14rem)] max-h-[740px] min-h-[520px] flex-col overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-2xs dark:border-gray-800 dark:bg-gray-900"
+            class="flex h-[calc(100vh-14rem)] max-h-[740px] min-h-[520px] flex-col overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-2xs dark:border-gray-800 dark:bg-gray-900/90"
         >
             <!-- Messages Stream -->
             <div
@@ -342,7 +342,7 @@ onUnmounted(() => {
                 <!-- Empty State -->
                 <div
                     v-if="messages.length === 0"
-                    class="flex h-full flex-col items-center justify-center p-8 text-center text-slate-400"
+                    class="flex h-full flex-col items-center justify-center p-8 text-center text-slate-400 dark:text-gray-500"
                 >
                     <p
                         class="text-sm font-semibold text-slate-600 dark:text-gray-400"
@@ -363,7 +363,7 @@ onUnmounted(() => {
                         class="sticky top-0 z-10 my-2 flex justify-center"
                     >
                         <span
-                            class="rounded-full bg-slate-100 px-3 py-0.5 text-[10px] font-medium text-slate-600 shadow-2xs dark:bg-gray-800 dark:text-gray-300"
+                            class="rounded-full bg-slate-100/90 px-3 py-0.5 text-[10px] font-medium text-slate-600 shadow-2xs backdrop-blur-xs dark:bg-gray-800/90 dark:text-gray-300"
                         >
                             {{ formatDateDivider(msg.created_at) }}
                         </span>
@@ -375,8 +375,8 @@ onUnmounted(() => {
                         :class="
                             currentUser &&
                             Number(currentUser.id) === Number(msg.user.id)
-                                ? 'bg-indigo-50/50 hover:bg-indigo-50/80 dark:bg-indigo-950/25 dark:hover:bg-indigo-950/40'
-                                : 'hover:bg-slate-50/60 dark:hover:bg-gray-800/30'
+                                ? 'bg-indigo-50/60 hover:bg-indigo-50/90 dark:bg-indigo-950/30 dark:hover:bg-indigo-950/45'
+                                : 'hover:bg-slate-50/60 dark:hover:bg-gray-800/35'
                         "
                     >
                         <!-- User Avatar -->
@@ -387,7 +387,7 @@ onUnmounted(() => {
                                 currentUser &&
                                 Number(currentUser.id) === Number(msg.user.id)
                                     ? 'bg-indigo-600 text-white dark:bg-indigo-500'
-                                    : 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950/60 dark:text-indigo-300'
+                                    : 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950/70 dark:text-indigo-300'
                             "
                         >
                             <img
@@ -422,7 +422,7 @@ onUnmounted(() => {
                                             Number(currentUser.id) ===
                                                 Number(msg.user.id)
                                         "
-                                        class="py-0.2 rounded-md bg-indigo-100 px-1.5 text-[9px] font-bold text-indigo-700 dark:bg-indigo-900/60 dark:text-indigo-300"
+                                        class="rounded-md bg-indigo-100 px-1.5 py-0.5 text-[9px] font-bold text-indigo-700 dark:bg-indigo-900/70 dark:text-indigo-200"
                                     >
                                         You
                                     </span>
@@ -454,7 +454,7 @@ onUnmounted(() => {
                                                     Number(msg.user.id))
                                         "
                                         @click="deleteMessage(msg.id)"
-                                        class="cursor-pointer rounded-md p-1 text-slate-400 opacity-100 transition hover:bg-rose-50 hover:text-rose-600 sm:opacity-0 sm:group-hover:opacity-100 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
+                                        class="cursor-pointer rounded-md p-1 text-slate-400 opacity-100 transition hover:bg-rose-50 hover:text-rose-600 sm:opacity-0 sm:group-hover:opacity-100 dark:text-gray-500 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
                                         title="Delete message"
                                     >
                                         <Trash2 class="h-3 w-3" />
@@ -485,7 +485,7 @@ onUnmounted(() => {
                 v-if="showScrollButton"
                 type="button"
                 @click="scrollToBottom(true)"
-                class="absolute right-8 bottom-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-slate-900 text-white shadow-md transition hover:bg-slate-800 active:scale-95 dark:bg-gray-100 dark:text-gray-900"
+                class="absolute right-8 bottom-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-slate-900 text-white shadow-md transition hover:bg-slate-800 active:scale-95 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
                 title="Scroll to bottom"
             >
                 <ArrowDown class="h-4 w-4" />
@@ -508,11 +508,11 @@ onUnmounted(() => {
                             :disabled="isSending || cooldownSeconds > 0"
                             placeholder="Type a message..."
                             maxlength="280"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50/70 px-4 py-2.5 text-xs text-slate-800 placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:outline-none disabled:opacity-60 sm:text-sm dark:border-gray-800 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400"
+                            class="dark:border-gray-750 w-full rounded-xl border border-slate-200 bg-slate-50/70 px-4 py-2.5 text-xs text-slate-800 placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:outline-none disabled:opacity-60 sm:text-sm dark:border-gray-700/80 dark:bg-gray-800/80 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
                         />
                         <span
                             v-if="inputContent.length > 200"
-                            class="absolute top-1/2 right-3.5 -translate-y-1/2 text-[10px] font-medium text-slate-400"
+                            class="absolute top-1/2 right-3.5 -translate-y-1/2 text-[10px] font-medium text-slate-400 dark:text-gray-500"
                         >
                             {{ 280 - inputContent.length }}
                         </span>
@@ -549,7 +549,9 @@ onUnmounted(() => {
                     <div
                         class="flex items-center gap-2 text-slate-600 dark:text-gray-400"
                     >
-                        <Lock class="h-3.5 w-3.5 shrink-0 text-slate-400" />
+                        <Lock
+                            class="h-3.5 w-3.5 shrink-0 text-slate-400 dark:text-gray-500"
+                        />
                         <span>{{
                             restrictionReason || 'Posting is restricted'
                         }}</span>
@@ -558,7 +560,7 @@ onUnmounted(() => {
                     <Link
                         v-if="!currentUser"
                         href="/login"
-                        class="inline-flex items-center gap-1 font-semibold text-indigo-600 hover:text-indigo-700 dark:text-indigo-400"
+                        class="inline-flex items-center gap-1 font-semibold text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
                     >
                         <LogIn class="h-3.5 w-3.5" />
                         <span>Sign in</span>