diff --git a/index.html b/index.html
index e6c4b13..ff59b20 100644
--- a/index.html
+++ b/index.html
@@ -119,6 +119,13 @@
             flex-direction: column;
             background-color: var(--bg-editor);
             border-right: 2px solid #333;
+            transition: width 0.3s ease, transform 0.3s ease;
+        }
+
+        #editor-container.collapsed {
+            width: 0;
+            transform: translateX(-100%);
+            border-right: none;
         }
 
         #editor {
@@ -136,6 +143,11 @@
             align-items: center;
             justify-content: center;
             overflow: hidden;
+            transition: width 0.3s ease;
+        }
+
+        #preview-container.full-width {
+            width: 100%;
         }
 
         canvas {
@@ -286,6 +298,11 @@
                     <path d="M6 6h12v12H6z" />
                 </svg>
             </button>
+            <button class="icon-btn" id="toggleEditorBtn" title="Toggle Code Editor" onclick="toggleEditorLayout()">
+                <svg viewBox="0 0 24 24">
+                    <path d="M4 4h16v16H4V4zm2 2v12h12V6H6zm2 2h4v8H8V8z" />
+                </svg>
+            </button>
         </div>
         <div class="header-right">
             <button class="icon-btn" title="Share Code" onclick="shareCode()">
@@ -469,6 +486,29 @@
                 });
         }
 
+        function toggleEditorLayout() {
+            const editorContainer = document.getElementById('editor-container');
+            const previewContainer = document.getElementById('preview-container');
+            const toggleBtn = document.getElementById('toggleEditorBtn');
+
+            editorContainer.classList.toggle('collapsed');
+            previewContainer.classList.toggle('full-width');
+
+            // Toggle icon/title
+            if (editorContainer.classList.contains('collapsed')) {
+                toggleBtn.title = "Show Code Editor";
+                toggleBtn.innerHTML = `<svg viewBox="0 0 24 24"><path d="M4 4h16v16H4V4zm2 2v12h12V6H6zm10 2h-4v8h4V8z" /></svg>`;
+            } else {
+                toggleBtn.title = "Hide Code Editor";
+                toggleBtn.innerHTML = `<svg viewBox="0 0 24 24"><path d="M4 4h16v16H4V4zm2 2v12h12V6H6zm2 2h4v8H8V8z" /></svg>`;
+            }
+
+            // Trigger resize after transition
+            setTimeout(() => {
+                window.dispatchEvent(new Event('resize'));
+            }, 300);
+        }
+
         function toggleEditor() {
             runCurrentCode();
         }