diff --git a/css/style.css b/css/style.css
index e6e427f..88aeed7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -78,7 +78,21 @@ body {
 .gate-btn.output-btn { border-color: #ff8833; }
 .gate-btn.output-btn:hover { border-color: #ffaa55; }
 
-.separator { width: 1px; height: 24px; background: #2a2a3a; margin: 0 6px; }
+.separator { width: 1px; height: 32px; background: #2a2a3a; margin: 0 6px; }
+
+.create-component-btn {
+    padding: 4px 10px;
+    background: #1a1a2e;
+    border: 1px solid #9900ff;
+    border-radius: 6px;
+    color: #9900ff;
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: 600;
+    transition: all 0.15s;
+    user-select: none;
+}
+.create-component-btn:hover { background: #252540; border-color: #cc66ff; color: #cc66ff; }
 .toolbar-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
 
 .action-btn {
@@ -102,49 +116,54 @@ body {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 1px;
-    height: 56px;
-    justify-content: flex-start;
+    gap: 2px;
+    padding: 4px 0;
 }
 
 .section-label {
     font-size: 8px;
-    color: #666;
+    color: #555;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    padding: 1px 6px;
-    height: 10px;
-    line-height: 10px;
+    padding: 0 2px;
+    line-height: 1;
+}
+
+.section-buttons {
+    display: flex;
+    gap: 3px;
+    align-items: center;
+    flex-wrap: nowrap;
 }
 
 .toolbar-section .gate-btn {
-    padding: 3px 8px;
-    font-size: 10px;
-    height: 20px;
-    display: flex;
-    align-items: center;
+    padding: 4px 10px;
+    font-size: 11px;
 }
 
 .toolbar-section #saved-components {
     display: flex;
-    gap: 2px;
+    gap: 3px;
+    align-items: center;
 }
 
 .toolbar-section .component-btn {
-    padding: 4px 8px;
-    font-size: 10px;
+    padding: 4px 10px;
+    font-size: 11px;
     background: #1a1a2e;
     border: 1px solid #2a2a3a;
-    border-radius: 4px;
+    border-radius: 6px;
     color: #9900ff;
     cursor: pointer;
+    font-weight: 600;
     transition: all 0.15s;
 }
 
 .toolbar-section .component-btn:hover {
     border-color: #9900ff;
     color: #cc66ff;
+    background: #252540;
 }
 
 /* ==================== Canvas ==================== */
diff --git a/index.html b/index.html
index e66ce42..8a8ceab 100644
--- a/index.html
+++ b/index.html
@@ -13,9 +13,11 @@
         <!-- I/O Section -->
         <div class="toolbar-section">
             <div class="section-label">I/O</div>
-            <button class="gate-btn input-btn" data-gate="INPUT">INPUT</button>
-            <button class="gate-btn clock-btn" data-gate="CLOCK">CLOCK</button>
-            <button class="gate-btn output-btn" data-gate="OUTPUT">OUTPUT</button>
+            <div class="section-buttons">
+                <button class="gate-btn input-btn" data-gate="INPUT">INPUT</button>
+                <button class="gate-btn clock-btn" data-gate="CLOCK">CLOCK</button>
+                <button class="gate-btn output-btn" data-gate="OUTPUT">OUTPUT</button>
+            </div>
         </div>
 
         <div class="separator"></div>
@@ -23,12 +25,14 @@
         <!-- Gates Section -->
         <div class="toolbar-section">
             <div class="section-label">Gates</div>
-            <button class="gate-btn" data-gate="AND">AND</button>
-            <button class="gate-btn" data-gate="OR">OR</button>
-            <button class="gate-btn" data-gate="NOT">NOT</button>
-            <button class="gate-btn" data-gate="NAND">NAND</button>
-            <button class="gate-btn" data-gate="NOR">NOR</button>
-            <button class="gate-btn" data-gate="XOR">XOR</button>
+            <div class="section-buttons">
+                <button class="gate-btn" data-gate="AND">AND</button>
+                <button class="gate-btn" data-gate="OR">OR</button>
+                <button class="gate-btn" data-gate="NOT">NOT</button>
+                <button class="gate-btn" data-gate="NAND">NAND</button>
+                <button class="gate-btn" data-gate="NOR">NOR</button>
+                <button class="gate-btn" data-gate="XOR">XOR</button>
+            </div>
         </div>
 
         <div class="separator"></div>
@@ -36,8 +40,10 @@
         <!-- Components Section -->
         <div class="toolbar-section" id="components-section">
             <div class="section-label">Components</div>
-            <button class="gate-btn create-component-btn" id="create-component-btn" title="Create custom component">✚ Create</button>
-            <div id="saved-components"></div>
+            <div class="section-buttons">
+                <button class="create-component-btn" id="create-component-btn" title="Create custom component">✚ Create</button>
+                <div id="saved-components"></div>
+            </div>
         </div>
 
         <div class="separator"></div>
diff --git a/js/components.js b/js/components.js
index c38c000..b6863d5 100644
--- a/js/components.js
+++ b/js/components.js
@@ -283,6 +283,10 @@ export function updateComponentButtons() {
         btn.dataset.componentId = comp.id;
         btn.textContent = comp.name;
         btn.title = `${comp.inputCount} input(s), ${comp.outputCount} output(s)`;
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            state.placingGate = `COMPONENT:${comp.id}`;
+        });
         container.appendChild(btn);
     });
 }
diff --git a/js/events.js b/js/events.js
index 58adeb5..a7e3a8f 100644
--- a/js/events.js
+++ b/js/events.js
@@ -71,8 +71,9 @@ export function initEvents() {
                 const componentId = state.placingGate.substring(10);
                 const component = state.customComponents?.[componentId];
                 if (component) {
-                    w = getComponentWidth({ component });
-                    h = getComponentHeight({ component });
+                    const fakeGate = { type: state.placingGate, component };
+                    w = getComponentWidth(fakeGate);
+                    h = getComponentHeight(fakeGate);
                 }
             }
 
@@ -348,14 +349,6 @@ export function initEvents() {
         }
     });
 
-    // Event delegation for saved component buttons
-    document.addEventListener('click', e => {
-        if (e.target.classList.contains('component-btn')) {
-            const componentId = e.target.dataset.componentId;
-            state.placingGate = `COMPONENT:${componentId}`;
-        }
-    });
-
-    // Update component buttons initially and when customComponents changes
+    // Update component buttons initially
     updateComponentButtons();
 }