diff --git a/app/static/css/style.css b/app/static/css/style.css
index 9091009..3ffe7ac 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -581,26 +581,65 @@ main {
 }
 
 /* =============================================================================
-   TEST: Floating Navigation Buttons
+   TEST: Floating Action Buttons (FAB)
    ============================================================================= */
 
-.floating-test-buttons {
-    position: sticky;
-    top: 0;
-    z-index: 999;
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(10px);
-    padding: 0.5rem;
+.fab-container {
+    position: fixed;
+    right: 16px;
+    top: 80px;
+    z-index: 900; /* Lower than offcanvas (1045) but higher than content */
     display: flex;
-    gap: 0.5rem;
-    justify-content: center;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    flex-direction: column;
+    gap: 12px;
 }
 
-.floating-test-buttons .btn {
-    min-width: 100px;
-    font-weight: 500;
+.fab {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.fab:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+}
+
+.fab:active {
+    transform: scale(0.95);
+}
+
+.fab-dm {
+    background: linear-gradient(135deg, #198754 0%, #157347 100%);
+    color: white;
+}
+
+.fab-contacts {
+    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
+    color: white;
+}
+
+/* Mobile optimization */
+@media (max-width: 768px) {
+    .fab-container {
+        right: 12px;
+        top: 70px;
+        gap: 10px;
+    }
+
+    .fab {
+        width: 48px;
+        height: 48px;
+        font-size: 1.25rem;
+    }
 }
 
 /* =============================================================================
diff --git a/app/templates/index.html b/app/templates/index.html
index 44d35d0..ec8fce8 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -44,16 +44,6 @@
 {% endblock %}
 
 {% block content %}
-<!-- TEST: Floating navigation buttons (bypass offcanvas menu) -->
-<div class="floating-test-buttons">
-    <button class="btn btn-sm btn-success" onclick="navigateTo('/dm');" title="Test: Direct Messages">
-        <i class="bi bi-envelope"></i> DM
-    </button>
-    <button class="btn btn-sm btn-primary" onclick="navigateTo('/contacts/manage');" title="Test: Contact Management">
-        <i class="bi bi-person-check"></i> Contacts
-    </button>
-</div>
-
 <div class="container-fluid d-flex flex-column" style="height: 100%;">
     <!-- Messages Container -->
     <div class="row flex-grow-1 overflow-hidden" style="min-height: 0;">
@@ -115,6 +105,16 @@
         </div>
     </div>
 </div>
+
+<!-- TEST: Floating Action Buttons (fixed position, no layout impact) -->
+<div class="fab-container">
+    <button class="fab fab-dm" onclick="navigateTo('/dm');" title="Test: Direct Messages">
+        <i class="bi bi-envelope-fill"></i>
+    </button>
+    <button class="fab fab-contacts" onclick="navigateTo('/contacts/manage');" title="Test: Contact Management">
+        <i class="bi bi-person-fill"></i>
+    </button>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}