diff --git a/static/js/api.js b/assets/js/api.js
similarity index 100%
rename from static/js/api.js
rename to assets/js/api.js
diff --git a/static/js/app.js b/assets/js/app.js
similarity index 100%
rename from static/js/app.js
rename to assets/js/app.js
diff --git a/static/js/chat.js b/assets/js/chat.js
similarity index 100%
rename from static/js/chat.js
rename to assets/js/chat.js
diff --git a/static/js/ui-controls.js b/assets/js/ui-controls.js
similarity index 100%
rename from static/js/ui-controls.js
rename to assets/js/ui-controls.js
diff --git a/static/js/video-player.js b/assets/js/video-player.js
similarity index 100%
rename from static/js/video-player.js
rename to assets/js/video-player.js
diff --git a/static/css/layout.css b/static/css/layout.css
index 4fdd66d..0a46bd6 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -1,22 +1,29 @@
 /* Layout styles - Main structural elements */
 
 /* =================================================================
-   THEATER CONTAINER - Main layout wrapper
+   THEATER - Main layout wrapper using CSS Grid
    ================================================================= */
 
-.theater-container {
-    display: flex;
+.theater {
+    display: grid;
+    grid-template-columns: 1fr 350px;
+    grid-template-areas: 'video chat';
     height: 100vh;
     position: relative;
     transition: all var(--transition-slow);
 }
 
+.theater.collapsed {
+    grid-template-columns: 1fr 0px;
+    grid-template-areas: 'video video';
+}
+
 /* =================================================================
-   VIDEO SECTION - Left side containing video player
+   THEATER VIDEO SECTION - Left side containing video player
    ================================================================= */
 
-.video-section {
-    flex: 1;
+.theater__video-section {
+    grid-area: video;
     background: #000;
     position: relative;
     display: flex;
@@ -24,11 +31,6 @@
     transition: all var(--transition-slow);
 }
 
-.video-section.expanded {
-    flex: 1;
-    width: 100%;
-}
-
 /* =================================================================
    VIDEO WRAPPER - Contains the video element
    ================================================================= */
@@ -41,24 +43,23 @@
 }
 
 /* =================================================================
-   CHAT SECTION - Right side chat panel
+   THEATER CHAT SECTION - Right side chat panel
    ================================================================= */
 
-.chat-section {
-    width: 350px;
+.theater__chat-section {
+    grid-area: chat;
     background: var(--bg-dark);
     color: var(--text-primary);
     display: flex;
     flex-direction: column;
     box-shadow: var(--shadow-dodgers-lg);
-    transition: transform var(--transition-slow);
+    transition: all var(--transition-slow);
     position: relative;
     border-left: 1px solid var(--border-color);
+    overflow: hidden;
 }
 
-.chat-section.collapsed {
-    transform: translateX(100%);
-    position: absolute;
-    right: 0;
-    height: 100%;
+.theater__chat-section.collapsed {
+    opacity: 0;
+    pointer-events: none;
 }