diff --git a/app/templates/base.html b/app/templates/base.html
index ca6a654..5ed8e1d 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -63,17 +63,6 @@
                     <i class="bi bi-broadcast-pin" style="font-size: 1.5rem;"></i>
                     <span>Manage Channels</span>
                 </button>
-                <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" onclick="navigateTo('/dm');">
-                    <i class="bi bi-envelope" style="font-size: 1.5rem;"></i>
-                    <div class="d-flex flex-grow-1 justify-content-between align-items-center">
-                        <span>Direct Messages</span>
-                        <span id="dmMenuBadge" class="badge bg-success rounded-pill" style="display: none;">0</span>
-                    </div>
-                </button>
-                <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" onclick="navigateTo('/contacts/manage');">
-                    <i class="bi bi-person-check" style="font-size: 1.5rem;"></i>
-                    <span>Contact Management</span>
-                </button>
                 <div class="list-group-item">
                     <div class="d-flex align-items-center gap-3 mb-2">
                         <i class="bi bi-calendar3" style="font-size: 1.5rem;"></i>
diff --git a/app/templates/index.html b/app/templates/index.html
index ec8fce8..76f98dd 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -106,15 +106,45 @@
     </div>
 </div>
 
-<!-- TEST: Floating Action Buttons (fixed position, no layout impact) -->
+<!-- Floating Action Buttons -->
 <div class="fab-container">
-    <button class="fab fab-dm" onclick="navigateTo('/dm');" title="Test: Direct Messages">
+    <button class="fab fab-dm" data-bs-toggle="modal" data-bs-target="#dmModal" title="Direct Messages">
         <i class="bi bi-envelope-fill"></i>
     </button>
-    <button class="fab fab-contacts" onclick="navigateTo('/contacts/manage');" title="Test: Contact Management">
+    <button class="fab fab-contacts" data-bs-toggle="modal" data-bs-target="#contactsModal" title="Contact Management">
         <i class="bi bi-person-fill"></i>
     </button>
 </div>
+
+<!-- DM Modal (Full Screen) -->
+<div class="modal fade" id="dmModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-fullscreen">
+        <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>
+            </div>
+            <div class="modal-body p-0">
+                <iframe id="dmFrame" src="/dm" style="width: 100%; height: 100%; border: none;"></iframe>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Contact Management Modal (Full Screen) -->
+<div class="modal fade" id="contactsModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-fullscreen">
+        <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>
+            </div>
+            <div class="modal-body p-0">
+                <iframe id="contactsFrame" src="/contacts/manage" style="width: 100%; height: 100%; border: none;"></iframe>
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}
@@ -123,5 +153,29 @@
     window.MC_CONFIG = {
         deviceName: "{{ device_name }}"
     };
+
+    // Reload iframe content when modals are opened to ensure fresh data
+    document.addEventListener('DOMContentLoaded', function() {
+        const dmModal = document.getElementById('dmModal');
+        const contactsModal = document.getElementById('contactsModal');
+
+        if (dmModal) {
+            dmModal.addEventListener('show.bs.modal', function () {
+                const dmFrame = document.getElementById('dmFrame');
+                if (dmFrame) {
+                    dmFrame.src = dmFrame.src;
+                }
+            });
+        }
+
+        if (contactsModal) {
+            contactsModal.addEventListener('show.bs.modal', function () {
+                const contactsFrame = document.getElementById('contactsFrame');
+                if (contactsFrame) {
+                    contactsFrame.src = contactsFrame.src;
+                }
+            });
+        }
+    });
 </script>
 {% endblock %}