diff --git a/src/modules/chat/components/ChatComponent.vue b/src/modules/chat/components/ChatComponent.vue
index 10aa158..189ddd3 100644
--- a/src/modules/chat/components/ChatComponent.vue
+++ b/src/modules/chat/components/ChatComponent.vue
@@ -13,7 +13,7 @@
             Disconnected
           </Badge>
           <!-- Total unread count -->
-          <Badge v-if="totalUnreadCount > 0" class="bg-blue-500 text-white text-xs">
+          <Badge v-if="totalUnreadCount > 0" variant="secondary" class="text-xs">
             {{ totalUnreadCount }} unread
           </Badge>
         </div>
@@ -91,7 +91,7 @@
               </div>
               <!-- Unread message indicator -->
               <div v-if="getUnreadCount(peer.pubkey) > 0" class="flex-shrink-0">
-                <Badge class="bg-blue-500 text-white h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
+                <Badge variant="default" class="h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
                   {{ getUnreadCount(peer.pubkey) > 99 ? '99+' : getUnreadCount(peer.pubkey) }}
                 </Badge>
               </div>
@@ -133,7 +133,7 @@
             Disconnected
           </Badge>
           <!-- Unread count for current peer -->
-          <Badge v-if="selectedPeer && getUnreadCount(selectedPeer.pubkey) > 0" class="bg-blue-500 text-white text-xs">
+          <Badge v-if="selectedPeer && getUnreadCount(selectedPeer.pubkey) > 0" variant="secondary" class="text-xs">
             {{ getUnreadCount(selectedPeer.pubkey) }} unread
           </Badge>
         </div>
@@ -198,7 +198,7 @@
             Disconnected
           </Badge>
           <!-- Total unread count -->
-          <Badge v-if="totalUnreadCount > 0" class="bg-blue-500 text-white text-xs">
+          <Badge v-if="totalUnreadCount > 0" variant="secondary" class="text-xs">
             {{ totalUnreadCount }} unread
           </Badge>
         </div>
@@ -278,7 +278,7 @@
                 </div>
                 <!-- Unread message indicator -->
                 <div v-if="getUnreadCount(peer.pubkey) > 0" class="flex-shrink-0">
-                  <Badge class="bg-blue-500 text-white h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
+                  <Badge variant="default" class="h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
                     {{ getUnreadCount(peer.pubkey) > 99 ? '99+' : getUnreadCount(peer.pubkey) }}
                   </Badge>
                 </div>
diff --git a/src/modules/chat/views/ChatPage.vue b/src/modules/chat/views/ChatPage.vue
index bfee968..210a5c1 100644
--- a/src/modules/chat/views/ChatPage.vue
+++ b/src/modules/chat/views/ChatPage.vue
@@ -1,57 +1,9 @@
 <template>
-  <div class="h-full w-full p-8">
-    <div class="text-center">
-      <h1 class="text-2xl font-bold mb-4">Chat Module</h1>
-      <p class="text-muted-foreground mb-4">Status: {{ debugInfo.status }}</p>
-      
-      <div v-if="!debugInfo.isAuthenticated" class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4">
-        <p><strong>Authentication Required:</strong> Please log in to use chat</p>
-      </div>
-      
-      <div v-else-if="!debugInfo.hasNostrKeys" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
-        <p><strong>Nostr Keys Missing:</strong> Your account needs Nostr keys configured</p>
-        <p class="text-sm mt-2">Key status: {{ debugInfo.keyStatus.message }}</p>
-      </div>
-      
-      <div v-else-if="!debugInfo.isConnected" class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
-        <p><strong>Connecting to Nostr relays...</strong></p>
-      </div>
-      
-      <div v-else class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
-        <p><strong>Ready!</strong> Chat should work now</p>
-        <ChatComponent />
-      </div>
-      
-      <details class="mt-8 text-left">
-        <summary class="cursor-pointer font-semibold">Debug Info</summary>
-        <pre class="mt-4 p-4 bg-gray-100 rounded text-xs overflow-auto">{{ JSON.stringify(debugInfo, null, 2) }}</pre>
-      </details>
-    </div>
+  <div class="h-[calc(100vh-3.5rem)] lg:h-[calc(100vh-4rem)] xl:h-[calc(100vh-5rem)] w-full">
+    <ChatComponent />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import ChatComponent from '../components/ChatComponent.vue'
-import { nostrChat } from '@/composables/useNostrChat'
-import { useAuth } from '@/composables/useAuth'
-
-const auth = useAuth()
-
-const debugInfo = computed(() => {
-  const keyStatus = nostrChat.getNostrKeyStatus()
-  
-  return {
-    status: nostrChat.isConnected.value ? 'Connected' : 'Disconnected',
-    isAuthenticated: auth.isAuthenticated.value,
-    hasNostrKeys: nostrChat.hasNostrKeys.value,
-    isConnected: nostrChat.isConnected.value,
-    keyStatus,
-    peerCount: nostrChat.peers.value.length,
-    totalUnread: nostrChat.totalUnreadCount.value,
-    currentUser: nostrChat.currentUser.value?.pubkey ? {
-      pubkey: nostrChat.currentUser.value.pubkey.slice(0, 16) + '...'
-    } : null
-  }
-})
 </script>
\ No newline at end of file