diff --git a/app/templates/contacts-existing.html b/app/templates/contacts-existing.html
index 7efdcbd..4590e9a 100644
--- a/app/templates/contacts-existing.html
+++ b/app/templates/contacts-existing.html
@@ -2,20 +2,8 @@
 
 {% block title %}Existing Contacts - mc-webui{% endblock %}
 
-{% block navbar_content %}
-<span class="navbar-brand mb-0 h1">
-    <i class="bi bi-person-lines-fill"></i> Existing Contacts
-    <span class="badge counter-badge counter-ok rounded-pill" id="contactsCounter" style="display: none;">0 / 350</span>
-</span>
-<div class="d-flex align-items-center gap-2">
-    <button class="btn btn-outline-light btn-sm" id="refreshExistingBtn" title="Refresh">
-        <i class="bi bi-arrow-clockwise"></i>
-    </button>
-</div>
-{% endblock %}
-
 {% block page_content %}
-<div id="existingPageContent">
+<div id="existingPageContent" class="p-3">
     <!-- Back Buttons -->
     <div class="back-buttons">
         <button class="btn btn-outline-secondary" onclick="navigateTo('/contacts/manage');">
diff --git a/app/templates/contacts-manage.html b/app/templates/contacts-manage.html
index b1a0007..44a0abc 100644
--- a/app/templates/contacts-manage.html
+++ b/app/templates/contacts-manage.html
@@ -2,19 +2,8 @@
 
 {% block title %}Contact Management Settings - mc-webui{% endblock %}
 
-{% block navbar_content %}
-<span class="navbar-brand mb-0 h1">
-    <i class="bi bi-person-check"></i> Contact Management
-</span>
-<div class="d-flex align-items-center gap-2">
-    <button class="btn btn-outline-light btn-sm" onclick="navigateTo('/');" title="Home">
-        <i class="bi bi-house"></i>
-    </button>
-</div>
-{% endblock %}
-
 {% block page_content %}
-<div id="managePageContent">
+<div id="managePageContent" class="p-3">
     <!-- Page Header -->
     <div class="mb-4">
         <h2 class="mb-1">
diff --git a/app/templates/contacts-pending.html b/app/templates/contacts-pending.html
index dfca6c0..2af0cd6 100644
--- a/app/templates/contacts-pending.html
+++ b/app/templates/contacts-pending.html
@@ -2,20 +2,8 @@
 
 {% block title %}Pending Contacts - mc-webui{% endblock %}
 
-{% block navbar_content %}
-<span class="navbar-brand mb-0 h1">
-    <i class="bi bi-hourglass-split"></i> Pending Contacts
-    <span class="badge bg-light text-dark rounded-pill" id="pendingCountBadge" style="display: none;">0</span>
-</span>
-<div class="d-flex align-items-center gap-2">
-    <button class="btn btn-outline-light btn-sm" id="refreshPendingBtn" title="Refresh">
-        <i class="bi bi-arrow-clockwise"></i>
-    </button>
-</div>
-{% endblock %}
-
 {% block page_content %}
-<div id="pendingPageContent">
+<div id="pendingPageContent" class="p-3">
     <!-- Back Buttons -->
     <div class="back-buttons">
         <button class="btn btn-outline-secondary" onclick="navigateTo('/contacts/manage');">
diff --git a/app/templates/contacts_base.html b/app/templates/contacts_base.html
index 0060b49..3514668 100644
--- a/app/templates/contacts_base.html
+++ b/app/templates/contacts_base.html
@@ -358,27 +358,11 @@
     {% block extra_head %}{% endblock %}
 </head>
 <body>
-    <!-- Navbar -->
-    <nav class="navbar navbar-dark bg-primary">
-        <div class="container-fluid">
-            {% block navbar_content %}
-            <span class="navbar-brand mb-0 h1">
-                <i class="bi bi-person-check"></i> Contact Management
-            </span>
-            <div class="d-flex align-items-center gap-2">
-                <button class="btn btn-outline-light btn-sm" onclick="navigateTo('/');" title="Home">
-                    <i class="bi bi-house"></i>
-                </button>
-            </div>
-            {% endblock %}
-        </div>
-    </nav>
-
     <!-- Main Content -->
     <main>
-        <div class="container-fluid px-3 py-4">
-            <div class="row">
-                <div class="col-12 col-lg-8 mx-auto">
+        <div class="container-fluid p-0">
+            <div class="row g-0">
+                <div class="col-12">
                     {% block page_content %}
                     <!-- Content will be provided by child templates -->
                     {% endblock %}
diff --git a/app/templates/dm.html b/app/templates/dm.html
index 8ad39c1..0ae3018 100644
--- a/app/templates/dm.html
+++ b/app/templates/dm.html
@@ -60,29 +60,18 @@
     </style>
 </head>
 <body>
-    <!-- Navbar for DM page -->
-    <nav class="navbar navbar-dark bg-success">
-        <div class="container-fluid">
-            <div class="d-flex align-items-center gap-2">
-                <a href="/" class="btn btn-outline-light btn-sm" title="Back to Channels">
-                    <i class="bi bi-arrow-left"></i>
-                </a>
-                <span class="navbar-brand mb-0 h1">
-                    <i class="bi bi-envelope"></i> DM
-                </span>
-            </div>
-            <div class="d-flex align-items-center gap-2">
-                <select id="dmConversationSelector" class="form-select form-select-sm" style="width: auto; min-width: 120px;" title="Select conversation">
-                    <option value="">Select chat...</option>
-                    <!-- Conversations loaded dynamically via JavaScript -->
-                </select>
-            </div>
-        </div>
-    </nav>
-
     <!-- Main Content -->
     <main>
-        <div class="container-fluid d-flex flex-column" style="height: 100%;">
+        <div class="container-fluid d-flex flex-column" style="height: 100vh;">
+            <!-- Conversation Selector Bar -->
+            <div class="row border-bottom bg-light">
+                <div class="col-12 p-2">
+                    <select id="dmConversationSelector" class="form-select" title="Select conversation">
+                        <option value="">Select chat...</option>
+                        <!-- Conversations loaded dynamically via JavaScript -->
+                    </select>
+                </div>
+            </div>
             <!-- Messages Container -->
             <div class="row flex-grow-1 overflow-hidden" style="min-height: 0;">
                 <div class="col-12" style="height: 100%;">
diff --git a/app/templates/index.html b/app/templates/index.html
index 76f98dd..56da1b9 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -122,7 +122,9 @@
         <div class="modal-content">
             <div class="modal-header bg-success text-white">
                 <h5 class="modal-title"><i class="bi bi-envelope"></i> Direct Messages</h5>
-                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">
+                    <i class="bi bi-x-lg"></i> Close
+                </button>
             </div>
             <div class="modal-body p-0">
                 <iframe id="dmFrame" src="/dm" style="width: 100%; height: 100%; border: none;"></iframe>
@@ -137,7 +139,9 @@
         <div class="modal-content">
             <div class="modal-header bg-primary text-white">
                 <h5 class="modal-title"><i class="bi bi-person-check"></i> Contact Management</h5>
-                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">
+                    <i class="bi bi-x-lg"></i> Close
+                </button>
             </div>
             <div class="modal-body p-0">
                 <iframe id="contactsFrame" src="/contacts/manage" style="width: 100%; height: 100%; border: none;"></iframe>
