diff --git a/apps/ui/templates/room.html b/apps/ui/templates/room.html
index acaebd5..92eaf40 100644
--- a/apps/ui/templates/room.html
+++ b/apps/ui/templates/room.html
@@ -62,49 +62,37 @@
         .devices-grid {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
-            gap: 12px;
+            gap: 16px;
+            margin-bottom: 20px;
         }
 
-        @media (max-width: 600px) {
-            body {
-                padding: 0;
-                overflow-x: hidden;
-            }
-            .container {
-                max-width: 100vw;
-                padding: 0;
-            }
-            .devices-grid {
-                grid-template-columns: repeat(2, 1fr);
-                gap: 8px;
-                width: 100%;
-                margin: 0;
-            }
-            .device-card {
-                width: 100%;
-                margin: 0;
-            }
-        }
-        @media (min-width: 900px) {
+        @media (min-width: 600px) {
             .devices-grid {
                 grid-template-columns: repeat(3, 1fr);
             }
         }
 
+        @media (min-width: 900px) {
+            .devices-grid {
+                grid-template-columns: repeat(4, 1fr);
+            }
+        }
+
         .device-card {
             background: rgba(255, 255, 255, 0.95);
             border-radius: 12px;
             padding: 16px;
+            text-align: center;
             cursor: pointer;
             transition: all 0.2s ease;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            min-height: 120px;
+            min-height: 110px;
             display: flex;
             flex-direction: column;
+            align-items: center;
+            justify-content: center;
             text-decoration: none;
             color: inherit;
-            width: 100%;
-            margin: 0;
         }
 
         .device-card:hover {