diff --git a/src/components/ControlPanel.astro b/src/components/ControlPanel.astro
new file mode 100644
index 0000000..a62bb1f
--- /dev/null
+++ b/src/components/ControlPanel.astro
@@ -0,0 +1,411 @@
+---
+import TuiSlider from "./TuiSlider.astro";
+import TuiSegment from "./TuiSegment.astro";
+import TuiToggle from "./TuiToggle.astro";
+import TuiButton from "./TuiButton.astro";
+---
+
+<footer id="tui-controls" class="control-panel">
+    <div class="control-panel-content">
+        <!-- Sliders Section -->
+        <div class="panel-section sliders-section">
+            <div class="section-header">ADJUSTMENTS</div>
+            <div class="sliders-grid">
+                <TuiSlider
+                    id="exposure"
+                    label="EXP"
+                    min={0}
+                    max={3}
+                    step={0.01}
+                    value={1.0}
+                    title="Exposure / Brightness"
+                    description="Adjusts the overall brightness level of the input image before processing."
+                />
+                <TuiSlider
+                    id="contrast"
+                    label="CON"
+                    min={0}
+                    max={3}
+                    step={0.01}
+                    value={1.0}
+                    title="Contrast"
+                    description="Increases or decreases the difference between light and dark areas."
+                />
+                <TuiSlider
+                    id="saturation"
+                    label="SAT"
+                    min={0}
+                    max={3}
+                    step={0.01}
+                    value={1.2}
+                    title="Saturation"
+                    description="Controls color intensity. Higher values make colors more vibrant in Color Mode."
+                />
+                <TuiSlider
+                    id="gamma"
+                    label="GAM"
+                    min={0}
+                    max={3}
+                    step={0.01}
+                    value={1.0}
+                    title="Gamma Correction"
+                    description="Non-linear brightness adjustment. useful for correcting washed-out or too dark images."
+                />
+                <TuiSlider
+                    id="overlayStrength"
+                    label="OVL"
+                    min={0}
+                    max={1}
+                    step={0.01}
+                    value={0.3}
+                    title="Overlay Blend Strength"
+                    description="Blends the original image over the ASCII output. 0 is pure ASCII, 1 is original image."
+                />
+                <TuiSlider
+                    id="resolution"
+                    label="RES"
+                    min={0.1}
+                    max={2}
+                    step={0.01}
+                    value={1.0}
+                    title="Resolution Scale"
+                    description="Adjusts the density of characters. Higher values give more detail but may reduce performance."
+                />
+                <TuiSlider
+                    id="dither"
+                    label="DTH"
+                    min={0}
+                    max={1}
+                    step={0.01}
+                    value={0}
+                    title="Dither Strength"
+                    description="Applies ordered dithering to simulate shading. Useful for low-contrast areas."
+                />
+            </div>
+        </div>
+
+        <div class="panel-divider-v"></div>
+
+        <!-- Toggles & Segments Section -->
+        <div class="panel-section effects-section">
+            <div class="sub-section">
+                <div class="section-header">EFFECTS</div>
+                <div class="toggles-row">
+                    <TuiToggle
+                        id="toggle-color"
+                        label="CLR"
+                        title="Color Output (HTML)"
+                        description="Toggles between monochrome text and colored HTML spans."
+                    />
+
+                    <TuiToggle
+                        id="toggle-denoise"
+                        label="DNZ"
+                        title="Denoise Pre-processing"
+                        description="Applies a bilateral filter to reduce image noise while preserving edges."
+                    />
+                </div>
+            </div>
+
+            <div class="sub-section">
+                <div class="section-header">OUTPUT</div>
+                <div class="segments-col">
+                    <TuiSegment
+                        id="segment-invert"
+                        label="INV"
+                        options={["AUTO", "ON", "OFF"]}
+                        value="AUTO"
+                        title="Invert Colors"
+                        description="Inverts brightness mapping. AUTO detects dark/light mode."
+                    />
+                    <TuiSegment
+                        id="segment-edge"
+                        label="EDG"
+                        options={["OFF", "SPL", "SOB", "CNY"]}
+                        value="OFF"
+                        title="Edge Detection Mode"
+                        description="Algorithm used to detect edges. SPL: Simple, SOB: Sobel, CNY: Canny."
+                    />
+                    <TuiSegment
+                        id="segment-charset"
+                        label="SET"
+                        options={["STD", "EXT", "BLK", "MIN", "DOT", "SHP"]}
+                        value="STD"
+                        title="Character Set"
+                        description="The set of characters used for mapping brightness levels."
+                    />
+                </div>
+            </div>
+        </div>
+
+        <div class="panel-divider-v"></div>
+
+        <!-- Right Column: Actions & Export -->
+        <div class="panel-section actions-section">
+            <div class="sub-section">
+                <div class="section-header">ACTIONS</div>
+                <div class="actions-grid">
+                    <TuiButton
+                        id="btn-reset"
+                        label="RESET"
+                        shortcut="R"
+                        title="Reset to Auto-detected Settings"
+                        description="Resets all sliders and toggles to their default values."
+                    />
+
+                    <TuiButton
+                        id="btn-next"
+                        label="NEXT"
+                        shortcut="N"
+                        variant="primary"
+                        title="Load Next Image"
+                        description="Discards current image and loads a new one from the queue."
+                    />
+
+                    <div
+                        class="queue-display"
+                        data-tooltip-title="Buffered Images"
+                        data-tooltip-desc="Number of images pre-loaded in background queue."
+                    >
+                        <span class="queue-label">Q:</span>
+                        <span id="val-queue" class="queue-value">0</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="panel-divider-h"></div>
+
+            <div class="sub-section">
+                <div class="section-header">IMPORT / EXPORT</div>
+                <div class="actions-grid">
+                    <!-- Hidden File Input -->
+                    <input
+                        type="file"
+                        id="file-upload"
+                        accept="image/*"
+                        style="display: none;"
+                    />
+                    <TuiButton
+                        id="btn-import"
+                        label="IMP"
+                        title="Import Image"
+                        description="Upload your own image from your device."
+                    />
+                    <TuiButton
+                        id="btn-save-png"
+                        label="PNG"
+                        title="Save as Image"
+                        description="Download high-res PNG capture of the current view."
+                    />
+                    <TuiButton
+                        id="btn-copy-text"
+                        label="TXT"
+                        title="Save as Text"
+                        description="Download raw ASCII text file."
+                    />
+                    <TuiButton
+                        id="btn-copy-html"
+                        label="HTML"
+                        title="Save as HTML"
+                        description="Download colored HTML file."
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Keyboard shortcuts hint -->
+    <div class="shortcuts-hint">
+        <span><kbd>N</kbd> Next</span>
+        <span><kbd>R</kbd> Reset</span>
+        <span><kbd>I</kbd> Invert</span>
+        <span><kbd>C</kbd> Color</span>
+        <span><kbd>D</kbd> Dither</span>
+        <span><kbd>E</kbd> Edges</span>
+        <span><kbd>S</kbd> Charset</span>
+    </div>
+</footer>
+
+<style>
+    /* Main Container matching Sidebar visual style */
+    .control-panel {
+        flex-shrink: 0;
+        background: #000; /* Matching Sidebar */
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        padding: 2rem 3rem; /* Matching Sidebar padding style */
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+        z-index: 20;
+        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5); /* Inverted shadow */
+        position: relative;
+    }
+
+    .control-panel-content {
+        display: flex;
+        justify-content: space-between;
+        gap: 2rem;
+        flex-wrap: nowrap; /* Prevent wrapping on large screens */
+        align-items: stretch;
+    }
+
+    /* Sections */
+    .panel-section {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .sliders-section {
+        flex: 2;
+        min-width: 300px;
+    }
+
+    .effects-section {
+        flex: 1;
+        min-width: 200px;
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+        justify-content: flex-start;
+    }
+
+    .actions-section {
+        flex: 1;
+        min-width: 200px;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    /* Sub-sections */
+    .sub-section {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    /* Headers */
+    .section-header {
+        font-size: 0.75rem; /* Matched to sidebar subtitle size approx */
+        font-weight: 700;
+        opacity: 0.5;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: rgba(255, 255, 255, 0.5);
+        font-family: var(--font-mono);
+        margin-bottom: 0.5rem;
+    }
+
+    /* Grids & Rows */
+    .sliders-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        gap: 1rem 1.5rem; /* More airy gap */
+    }
+
+    .toggles-row {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+
+    .segments-col {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .actions-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+        gap: 0.75rem;
+    }
+
+    /* Dividers */
+    .panel-divider-v {
+        width: 1px;
+        background: rgba(255, 255, 255, 0.1);
+        align-self: stretch;
+        margin: 0 0.5rem;
+    }
+
+    .panel-divider-h {
+        height: 1px;
+        width: 100%;
+        background: rgba(255, 255, 255, 0.1);
+        margin: 0.5rem 0;
+    }
+
+    /* Queue Display */
+    .queue-display {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        font-size: 11px;
+        color: rgba(255, 255, 255, 0.4);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 4px;
+        height: 32px; /* Match button height */
+        font-family: var(--font-mono);
+    }
+
+    .queue-value {
+        color: #fff;
+    }
+
+    /* Shortcuts Hint */
+    .shortcuts-hint {
+        display: flex;
+        justify-content: center;
+        gap: 1.5rem;
+        font-size: 0.7rem;
+        color: rgba(255, 255, 255, 0.3);
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+        padding-top: 1rem;
+        margin-top: 0.5rem;
+        font-family: var(--font-mono);
+        flex-wrap: wrap;
+    }
+
+    .shortcuts-hint span {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .shortcuts-hint kbd {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-size: 10px;
+        color: #fff;
+    }
+
+    /* Responsive Design */
+    @media (max-width: 1200px) {
+        .control-panel {
+            padding: 1.5rem;
+        }
+
+        .control-panel-content {
+            flex-wrap: wrap;
+        }
+
+        .panel-divider-v {
+            display: none;
+        }
+
+        .sliders-section,
+        .effects-section,
+        .actions-section {
+            flex: 1 1 100%; /* Stack on smaller screens */
+        }
+
+        .sliders-grid {
+            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+        }
+    }
+</style>
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
new file mode 100644
index 0000000..5dbf406
--- /dev/null
+++ b/src/components/Sidebar.astro
@@ -0,0 +1,242 @@
+---
+
+---
+
+<aside class="sidebar">
+    <div class="sidebar-content">
+        <div class="brand-group">
+            <a href="/" class="brand-link">
+                <h1 class="brand-title">SYNTAXBULLET</h1>
+            </a>
+            <div class="brand-subtitle">
+                FULL STACK ENGINEER
+                <span class="muted">//</span>
+                CREATIVE TECHNOLOGIST
+            </div>
+        </div>
+
+        <p class="brand-bio">
+            Crafting high-performance digital experiences at the intersection of
+            code, art, and artificial intelligence.
+        </p>
+
+        <div class="sidebar-actions">
+            <a href="/projects" class="sidebar-link">
+                <span class="icon">⚡</span> PROJECTS
+            </a>
+            <a href="/blog" class="sidebar-link">
+                <span class="icon">📝</span> BLOG
+            </a>
+            <a href="mailto:contact@syntaxbullet.me" class="sidebar-link">
+                <span class="icon">✉️</span> CONTACT
+            </a>
+        </div>
+
+        <div class="sidebar-social">
+            <a
+                href="https://github.com/syntaxbullet"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="GitHub"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    ><path
+                        d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
+                    ></path><path d="M9 18c-4.51 2-5-2.64-5-2.64"></path></svg
+                >
+            </a>
+            <a
+                href="https://linkedin.com/in/syntaxbullet"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="LinkedIn"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    ><path
+                        d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
+                    ></path><rect width="4" height="12" x="2" y="9"
+                    ></rect><circle cx="4" cy="4" r="2"></circle></svg
+                >
+            </a>
+            <a
+                href="https://twitter.com/syntaxbullet"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Twitter"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    ><path
+                        d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
+                    ></path></svg
+                >
+            </a>
+        </div>
+    </div>
+</aside>
+
+<style>
+    .sidebar {
+        width: 25%;
+        min-width: 320px;
+        max-width: 480px;
+        border-right: 1px solid rgba(255, 255, 255, 0.1);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background: #000;
+        position: relative;
+        z-index: 10;
+        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
+    }
+
+    .sidebar-content {
+        padding: 4rem 3rem;
+        display: flex;
+        flex-direction: column;
+        gap: 2.5rem;
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .brand-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .brand-title {
+        font-size: 2.5rem;
+        font-weight: 900;
+        margin: 0;
+        line-height: 1;
+        letter-spacing: -1px;
+        color: #fff;
+        word-break: break-word; /* Prevent overflow */
+        max-width: 100%;
+    }
+
+    .brand-link {
+        text-decoration: none;
+        color: inherit;
+    }
+
+    .brand-subtitle {
+        font-size: 0.75rem;
+        color: rgba(255, 255, 255, 0.5);
+        font-family: var(--font-mono);
+        letter-spacing: 1px;
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .muted {
+        color: rgba(255, 255, 255, 0.2);
+    }
+
+    .brand-bio {
+        font-size: 1rem;
+        line-height: 1.6;
+        color: rgba(255, 255, 255, 0.8);
+        max-width: 400px;
+    }
+
+    .sidebar-actions {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        align-items: flex-start;
+    }
+
+    .sidebar-link {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        color: rgba(255, 255, 255, 0.6);
+        text-decoration: none;
+        font-family: var(--font-mono);
+        font-size: 0.9rem;
+        padding: 4px 0;
+        transition: all 0.2s;
+    }
+
+    .sidebar-link:hover {
+        color: var(--text-color);
+        transform: translateX(4px);
+    }
+
+    .sidebar-link .icon {
+        width: 20px;
+        display: inline-block;
+        text-align: center;
+    }
+
+    .sidebar-social {
+        display: flex;
+        gap: 1.5rem;
+        margin-top: 1rem;
+        padding-top: 1.5rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .sidebar-social a {
+        color: rgba(255, 255, 255, 0.4);
+        transition: color 0.2s;
+    }
+
+    .sidebar-social a:hover {
+        color: #fff;
+    }
+
+    /* Responsive */
+    @media (max-width: 1024px) {
+        .sidebar {
+            width: 100%;
+            max-width: none;
+            min-width: 0;
+            border-right: none;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            padding: 3rem 0; /* Increased padding */
+        }
+
+        .sidebar-content {
+            padding: 1rem 3rem; /* Increased horizontal padding */
+            align-items: center;
+            text-align: center;
+        }
+
+        .brand-subtitle,
+        .sidebar-actions {
+            justify-content: center;
+            align-items: center;
+        }
+    }
+</style>
diff --git a/src/components/TuiButton.astro b/src/components/TuiButton.astro
index ed97f1e..4cc5c01 100644
--- a/src/components/TuiButton.astro
+++ b/src/components/TuiButton.astro
@@ -33,67 +33,70 @@ const {
     .tui-button {
         display: inline-flex;
         align-items: center;
-        gap: 4px;
-        background: none;
-        border: 1px solid rgba(255, 103, 0, 0.4);
-        color: var(--text-color);
+        gap: 6px;
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: rgba(255, 255, 255, 0.7);
         font-family: inherit;
         font-size: 11px;
-        padding: 3px 10px;
+        padding: 4px 10px;
         cursor: pointer;
-        opacity: 0.8;
-        transition: all 0.15s;
+        transition: all 0.2s;
         user-select: none;
+        border-radius: 2px;
     }
 
     .tui-button:hover {
-        opacity: 1;
-        border-color: var(--text-color);
-        background: rgba(255, 103, 0, 0.1);
+        color: #fff;
+        border-color: rgba(255, 255, 255, 0.3);
+        background: rgba(255, 255, 255, 0.08);
+        transform: translateY(-1px);
     }
 
     .tui-button:active {
-        background: rgba(255, 103, 0, 0.2);
+        background: rgba(255, 255, 255, 0.12);
+        transform: translateY(0);
     }
 
     .tui-button--primary {
-        border-color: var(--text-color);
-        background: rgba(255, 103, 0, 0.1);
+        background: rgba(255, 255, 255, 0.1);
+        border-color: rgba(255, 255, 255, 0.2);
+        color: #fff;
     }
 
     .tui-button--primary:hover {
-        background: var(--text-color);
-        color: #000;
+        background: rgba(255, 255, 255, 0.2);
+        border-color: rgba(255, 255, 255, 0.4);
     }
 
     .tui-button--subtle {
         border-color: transparent;
+        background: transparent;
         opacity: 0.6;
     }
 
     .tui-button--subtle:hover {
-        border-color: rgba(255, 103, 0, 0.3);
+        border-color: rgba(255, 255, 255, 0.1);
+        background: rgba(255, 255, 255, 0.05);
         opacity: 1;
     }
 
     .tui-button-shortcut {
         font-size: 9px;
-        opacity: 0.6;
-        padding: 0 3px;
-        border: 1px solid currentColor;
-        line-height: 1.2;
-        border-radius: 2px;
+        opacity: 0.5;
+        padding: 1px 4px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        line-height: 1;
+        border-radius: 3px;
     }
 
     .tui-button:hover .tui-button-shortcut {
-        opacity: 1;
-    }
-
-    .tui-button--primary:hover .tui-button-shortcut {
-        border-color: #000;
+        opacity: 0.8;
+        border-color: rgba(255, 255, 255, 0.4);
     }
 
     .tui-button-label {
-        font-weight: bold;
+        font-weight: 500;
+        letter-spacing: 0.5px;
     }
 </style>
diff --git a/src/components/TuiSegment.astro b/src/components/TuiSegment.astro
index c4757bd..f87c5bb 100644
--- a/src/components/TuiSegment.astro
+++ b/src/components/TuiSegment.astro
@@ -47,33 +47,37 @@ const {
     .tui-segment {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 12px;
         font-size: 11px;
         user-select: none;
     }
 
     .tui-segment-label {
         min-width: 3ch;
-        font-weight: bold;
+        font-weight: 700;
+        font-family: var(--font-mono);
+        color: rgba(255, 255, 255, 0.4);
         opacity: 0.7;
     }
 
     .tui-segment-options {
         display: flex;
-        border: 1px solid rgba(255, 103, 0, 0.3);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        background: rgba(255, 255, 255, 0.02);
+        border-radius: 2px;
+        overflow: hidden;
     }
 
     .tui-segment-option {
-        background: none;
+        background: transparent;
         border: none;
-        border-right: 1px solid rgba(255, 103, 0, 0.2);
-        color: var(--text-color);
+        border-right: 1px solid rgba(255, 255, 255, 0.05);
+        color: rgba(255, 255, 255, 0.5);
         font-family: inherit;
         font-size: inherit;
-        padding: 2px 8px;
+        padding: 4px 10px;
         cursor: pointer;
-        opacity: 0.5;
-        transition: all 0.15s;
+        transition: all 0.2s;
         min-width: 3ch;
         text-align: center;
     }
@@ -83,24 +87,24 @@ const {
     }
 
     .tui-segment-option:hover {
-        opacity: 0.8;
-        background: rgba(255, 103, 0, 0.1);
+        color: #fff;
+        background: rgba(255, 255, 255, 0.05);
     }
 
     .tui-segment-option.active {
-        background: var(--text-color);
-        color: #000;
-        opacity: 1;
-        font-weight: bold;
+        background: rgba(255, 255, 255, 0.15);
+        color: #fff;
+        font-weight: 600;
     }
 
     /* Hover the whole group */
     .tui-segment:hover .tui-segment-label {
         opacity: 1;
+        color: rgba(255, 255, 255, 0.8);
     }
 
     .tui-segment:hover .tui-segment-options {
-        border-color: var(--text-color);
+        border-color: rgba(255, 255, 255, 0.2);
     }
 </style>
 
diff --git a/src/components/TuiSlider.astro b/src/components/TuiSlider.astro
index f403ff6..e593816 100644
--- a/src/components/TuiSlider.astro
+++ b/src/components/TuiSlider.astro
@@ -63,15 +63,19 @@ const segments = 12;
     .tui-slider {
         display: flex;
         align-items: center;
-        gap: 6px;
+        gap: 8px;
         font-size: 11px;
         user-select: none;
+        color: rgba(255, 255, 255, 0.6);
     }
 
     .tui-slider-label {
         min-width: 3ch;
-        font-weight: bold;
-        opacity: 0.7;
+        font-weight: 700;
+        opacity: 0.5;
+        font-family: var(--font-mono);
+        color: rgba(255, 255, 255, 0.4);
+        transition: opacity 0.2s;
     }
 
     .tui-slider-track-wrapper {
@@ -89,22 +93,24 @@ const segments = 12;
 
     .tui-slider-track {
         display: flex;
-        letter-spacing: -1px;
-        font-family: monospace;
+        letter-spacing: 2px;
+        font-family: var(--font-mono);
+        font-size: 10px;
     }
 
     .tui-slider-segment {
         transition: color 0.1s;
-        color: rgba(255, 103, 0, 0.25);
+        color: rgba(255, 255, 255, 0.1);
     }
 
     .tui-slider-segment.filled {
-        color: var(--text-color);
+        color: rgba(255, 255, 255, 0.6);
     }
 
     .tui-slider-segment.thumb {
         color: #fff;
-        text-shadow: 0 0 4px var(--text-color);
+        text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+        scale: 1.2;
     }
 
     .tui-slider-input {
@@ -120,23 +126,26 @@ const segments = 12;
     }
 
     .tui-slider-value {
-        min-width: 3ch;
+        min-width: 4ch;
         text-align: right;
-        font-weight: bold;
-        opacity: 0.9;
+        font-weight: 400;
+        opacity: 0.8;
+        font-family: var(--font-mono);
+        color: rgba(255, 255, 255, 0.8);
     }
 
     /* Hover effect */
     .tui-slider:hover .tui-slider-label {
         opacity: 1;
+        color: #fff;
     }
 
     .tui-slider:hover .tui-slider-segment {
-        color: rgba(255, 103, 0, 0.4);
+        color: rgba(255, 255, 255, 0.2);
     }
 
     .tui-slider:hover .tui-slider-segment.filled {
-        color: var(--text-color);
+        color: rgba(255, 255, 255, 0.8);
     }
 
     .tui-slider:hover .tui-slider-segment.thumb {
diff --git a/src/components/TuiToggle.astro b/src/components/TuiToggle.astro
index fc8c977..df23841 100644
--- a/src/components/TuiToggle.astro
+++ b/src/components/TuiToggle.astro
@@ -32,35 +32,36 @@ const {
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        background: none;
-        border: 1px solid rgba(255, 103, 0, 0.3);
-        color: var(--text-color);
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: rgba(255, 255, 255, 0.5);
         font-family: inherit;
         font-size: 11px;
-        padding: 2px 8px;
+        padding: 4px 12px;
         cursor: pointer;
-        opacity: 0.5;
-        transition: all 0.15s;
+        transition: all 0.2s;
         user-select: none;
         min-width: 3ch;
         text-align: center;
+        border-radius: 2px;
     }
 
     .tui-toggle:hover {
-        opacity: 0.8;
-        background: rgba(255, 103, 0, 0.1);
+        color: #fff;
+        border-color: rgba(255, 255, 255, 0.3);
+        background: rgba(255, 255, 255, 0.08);
     }
 
     .tui-toggle.active {
-        background: var(--text-color);
-        color: #000;
-        opacity: 1;
-        font-weight: bold;
-        border-color: var(--text-color);
+        background: rgba(255, 255, 255, 0.15);
+        color: #fff;
+        border-color: rgba(255, 255, 255, 0.4);
+        box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
     }
 
     .tui-toggle-label {
-        font-weight: bold;
+        font-weight: 600;
+        letter-spacing: 0.5px;
     }
 </style>
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 47ff7c1..616328b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,4 @@
 ---
-import Navbar from '../components/Navbar.astro';
-
 interface Props {
 	title: string;
 	showScroll?: boolean;
@@ -15,29 +13,28 @@ const { title, showScroll = false } = Astro.props;
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<link rel="preconnect" href="https://fonts.googleapis.com">
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link
 			href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap"
-			rel="stylesheet">
+			rel="stylesheet"
+		/>
 		<title>{title}</title>
 
-        <style is:global>
-            @import "../styles/global.css";
-        </style>
+		<style is:global>
+			@import "../styles/global.css";
+		</style>
 
-        <style define:vars={{ overflow: showScroll ? 'auto' : 'hidden' }}>
-            body {
-                overflow: var(--overflow);
-                height: 100vh;
-                width: 100vw;
-                padding-top: 24px;
-                box-sizing: border-box;
-            }
-        </style>
+		<style define:vars={{ overflow: showScroll ? "auto" : "hidden" }}>
+			body {
+				overflow: var(--overflow);
+				height: 100vh;
+				width: 100vw;
+				box-sizing: border-box;
+			}
+		</style>
 	</head>
 	<body>
-		<Navbar />
 		<slot />
 	</body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cbc456f..1eae8c1 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,115 +1,13 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import TuiSlider from "../components/TuiSlider.astro";
-import TuiSegment from "../components/TuiSegment.astro";
-import TuiToggle from "../components/TuiToggle.astro";
-import TuiButton from "../components/TuiButton.astro";
+import Sidebar from "../components/Sidebar.astro";
 import Tooltip from "../components/Tooltip.astro";
+import ControlPanel from "../components/ControlPanel.astro";
 ---
 
 <Layout title="Syntaxbullet - Digital Wizard">
     <div class="split-layout">
-        <!-- LEFT SIDEBAR: Content -->
-        <aside class="sidebar">
-            <div class="sidebar-content">
-                <div class="brand-group">
-                    <h1 class="brand-title">SYNTAXBULLET</h1>
-                    <div class="brand-subtitle">
-                        FULL STACK ENGINEER
-                        <span class="muted">//</span>
-                        CREATIVE TECHNOLOGIST
-                    </div>
-                </div>
-
-                <p class="brand-bio">
-                    Crafting high-performance digital experiences at the
-                    intersection of code, art, and artificial intelligence.
-                </p>
-
-                <div class="sidebar-actions">
-                    <a href="/projects" class="sidebar-link">
-                        <span class="icon">⚡</span> PROJECTS
-                    </a>
-                    <a href="/blog" class="sidebar-link">
-                        <span class="icon">📝</span> BLOG
-                    </a>
-                    <a
-                        href="mailto:contact@syntaxbullet.me"
-                        class="sidebar-link"
-                    >
-                        <span class="icon">✉️</span> CONTACT
-                    </a>
-                </div>
-
-                <div class="sidebar-social">
-                    <a
-                        href="https://github.com/syntaxbullet"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        aria-label="GitHub"
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="20"
-                            height="20"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            ><path
-                                d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
-                            ></path><path d="M9 18c-4.51 2-5-2.64-5-2.64"
-                            ></path></svg
-                        >
-                    </a>
-                    <a
-                        href="https://linkedin.com/in/syntaxbullet"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        aria-label="LinkedIn"
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="20"
-                            height="20"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            ><path
-                                d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
-                            ></path><rect width="4" height="12" x="2" y="9"
-                            ></rect><circle cx="4" cy="4" r="2"></circle></svg
-                        >
-                    </a>
-                    <a
-                        href="https://twitter.com/syntaxbullet"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        aria-label="Twitter"
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="20"
-                            height="20"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            ><path
-                                d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
-                            ></path></svg
-                        >
-                    </a>
-                </div>
-            </div>
-        </aside>
+        <Sidebar />
 
         <!-- RIGHT MAIN: ASCII & Controls -->
         <main class="ascii-workspace hero-wrapper">
@@ -120,235 +18,7 @@ import Tooltip from "../components/Tooltip.astro";
                 <canvas id="ascii-canvas"></canvas>
             </div>
 
-            <footer class="controls-footer">
-                <div id="tui-controls">
-                    <!-- Sliders Section -->
-                    <div class="control-panel-section sliders-section">
-                        <div class="section-header">ADJUSTMENTS</div>
-                        <div class="sliders-grid">
-                            <TuiSlider
-                                id="exposure"
-                                label="EXP"
-                                min={0}
-                                max={3}
-                                step={0.01}
-                                value={1.0}
-                                title="Exposure / Brightness"
-                                description="Adjusts the overall brightness level of the input image before processing."
-                            />
-                            <TuiSlider
-                                id="contrast"
-                                label="CON"
-                                min={0}
-                                max={3}
-                                step={0.01}
-                                value={1.0}
-                                title="Contrast"
-                                description="Increases or decreases the difference between light and dark areas."
-                            />
-                            <TuiSlider
-                                id="saturation"
-                                label="SAT"
-                                min={0}
-                                max={3}
-                                step={0.01}
-                                value={1.2}
-                                title="Saturation"
-                                description="Controls color intensity. Higher values make colors more vibrant in Color Mode."
-                            />
-                            <TuiSlider
-                                id="gamma"
-                                label="GAM"
-                                min={0}
-                                max={3}
-                                step={0.01}
-                                value={1.0}
-                                title="Gamma Correction"
-                                description="Non-linear brightness adjustment. useful for correcting washed-out or too dark images."
-                            />
-                            <TuiSlider
-                                id="overlayStrength"
-                                label="OVL"
-                                min={0}
-                                max={1}
-                                step={0.01}
-                                value={0.3}
-                                title="Overlay Blend Strength"
-                                description="Blends the original image over the ASCII output. 0 is pure ASCII, 1 is original image."
-                            />
-                            <TuiSlider
-                                id="resolution"
-                                label="RES"
-                                min={0.1}
-                                max={2}
-                                step={0.01}
-                                value={1.0}
-                                title="Resolution Scale"
-                                description="Adjusts the density of characters. Higher values give more detail but may reduce performance."
-                            />
-                            <TuiSlider
-                                id="dither"
-                                label="DTH"
-                                min={0}
-                                max={1}
-                                step={0.01}
-                                value={0}
-                                title="Dither Strength"
-                                description="Applies ordered dithering to simulate shading. Useful for low-contrast areas."
-                            />
-                        </div>
-                    </div>
-
-                    <!-- Divider -->
-                    <div class="control-panel-divider"></div>
-
-                    <!-- Toggles & Segments Section -->
-                    <div class="control-panel-section toggles-section">
-                        <div class="section-header">EFFECTS</div>
-                        <div class="toggles-row">
-                            <TuiToggle
-                                id="toggle-color"
-                                label="CLR"
-                                title="Color Output (HTML)"
-                                description="Toggles between monochrome text and colored HTML spans."
-                            />
-
-                            <TuiToggle
-                                id="toggle-denoise"
-                                label="DNZ"
-                                title="Denoise Pre-processing"
-                                description="Applies a bilateral filter to reduce image noise while preserving edges."
-                            />
-                        </div>
-
-                        <div class="section-header" style="margin-top: 8px;">
-                            OUTPUT
-                        </div>
-                        <div class="segments-row">
-                            <TuiSegment
-                                id="segment-invert"
-                                label="INV"
-                                options={["AUTO", "ON", "OFF"]}
-                                value="AUTO"
-                                title="Invert Colors"
-                                description="Inverts brightness mapping. AUTO detects dark/light mode."
-                            />
-                            <TuiSegment
-                                id="segment-edge"
-                                label="EDG"
-                                options={["OFF", "SPL", "SOB", "CNY"]}
-                                value="OFF"
-                                title="Edge Detection Mode"
-                                description="Algorithm used to detect edges. SPL: Simple, SOB: Sobel, CNY: Canny."
-                            />
-                            <TuiSegment
-                                id="segment-charset"
-                                label="SET"
-                                options={[
-                                    "STD",
-                                    "EXT",
-                                    "BLK",
-                                    "MIN",
-                                    "DOT",
-                                    "SHP",
-                                ]}
-                                value="STD"
-                                title="Character Set"
-                                description="The set of characters used for mapping brightness levels."
-                            />
-                        </div>
-                    </div>
-
-                    <!-- Divider -->
-                    <div class="control-panel-divider"></div>
-
-                    <!-- Right Column: Actions & Export -->
-                    <div class="control-col-right">
-                        <div class="control-panel-section actions-section">
-                            <div class="section-header">ACTIONS</div>
-                            <div class="actions-row">
-                                <TuiButton
-                                    id="btn-reset"
-                                    label="RESET"
-                                    shortcut="R"
-                                    title="Reset to Auto-detected Settings"
-                                    description="Resets all sliders and toggles to their default values."
-                                />
-
-                                <TuiButton
-                                    id="btn-next"
-                                    label="NEXT"
-                                    shortcut="N"
-                                    variant="primary"
-                                    title="Load Next Image"
-                                    description="Discards current image and loads a new one from the queue."
-                                />
-                                <div
-                                    class="queue-display"
-                                    data-tooltip-title="Buffered Images"
-                                    data-tooltip-desc="Number of images pre-loaded in background queue."
-                                >
-                                    <span class="queue-label">Q:</span>
-                                    <span id="val-queue" class="queue-value"
-                                        >0</span
-                                    >
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Horizontal Divider for inside column -->
-                        <div class="control-panel-divider-h"></div>
-
-                        <div class="control-panel-section export-section">
-                            <div class="section-header">IMPORT / EXPORT</div>
-                            <div class="actions-row">
-                                <!-- Hidden File Input -->
-                                <input
-                                    type="file"
-                                    id="file-upload"
-                                    accept="image/*"
-                                    style="display: none;"
-                                />
-                                <TuiButton
-                                    id="btn-import"
-                                    label="IMP"
-                                    title="Import Image"
-                                    description="Upload your own image from your device."
-                                />
-                                <TuiButton
-                                    id="btn-save-png"
-                                    label="PNG"
-                                    title="Save as Image"
-                                    description="Download high-res PNG capture of the current view."
-                                />
-                                <TuiButton
-                                    id="btn-copy-text"
-                                    label="TXT"
-                                    title="Save as Text"
-                                    description="Download raw ASCII text file."
-                                />
-                                <TuiButton
-                                    id="btn-copy-html"
-                                    label="HTML"
-                                    title="Save as HTML"
-                                    description="Download colored HTML file."
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Keyboard shortcuts hint -->
-                <div class="shortcuts-hint">
-                    <span><kbd>N</kbd> Next</span>
-                    <span><kbd>R</kbd> Reset</span>
-                    <span><kbd>I</kbd> Invert</span>
-                    <span><kbd>C</kbd> Color</span>
-                    <span><kbd>D</kbd> Dither</span>
-                    <span><kbd>E</kbd> Edges</span>
-                    <span><kbd>S</kbd> Charset</span>
-                </div>
-            </footer>
+            <ControlPanel />
         </main>
     </div>
 
@@ -462,127 +132,8 @@ import Tooltip from "../components/Tooltip.astro";
         background: var(--bg-color);
     }
 
-    /* Sidebar (Left 25%) */
-    .sidebar {
-        width: 25%;
-        min-width: 320px;
-        max-width: 480px;
-        border-right: 1px solid rgba(255, 255, 255, 0.1);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        background: #000;
-        position: relative;
-        z-index: 10;
-        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
-    }
-
-    .sidebar-content {
-        padding: 4rem 3rem;
-        display: flex;
-        flex-direction: column;
-        gap: 2.5rem;
-    }
-
-    .brand-group {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-
-    .brand-title {
-        font-size: 2.5rem;
-        font-weight: 900;
-        margin: 0;
-        line-height: 1;
-        letter-spacing: -1px;
-        color: #fff;
-    }
-
-    .brand-subtitle {
-        font-size: 0.75rem;
-        color: rgba(255, 255, 255, 0.5);
-        font-family: var(--font-mono);
-        letter-spacing: 1px;
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-
-    .muted {
-        color: rgba(255, 255, 255, 0.2);
-    }
-
-    .brand-bio {
-        font-size: 1rem;
-        line-height: 1.6;
-        color: rgba(255, 255, 255, 0.8);
-        max-width: 400px;
-    }
-
-    .sidebar-actions {
-        display: flex;
-        flex-direction: column;
-        gap: 0.75rem;
-        align-items: flex-start;
-    }
-
-    .sidebar-link {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        color: rgba(255, 255, 255, 0.6);
-        text-decoration: none;
-        font-family: var(--font-mono);
-        font-size: 0.9rem;
-        padding: 4px 0;
-        transition: all 0.2s;
-    }
-
-    .sidebar-link:hover {
-        color: var(--text-color);
-        transform: translateX(4px);
-    }
-
-    .sidebar-link .icon {
-        width: 20px;
-        display: inline-block;
-        text-align: center;
-    }
-
-    .control-panel-divider-h {
-        height: 1px;
-        width: 100%;
-        margin: 32px 0;
-        background: linear-gradient(
-            to right,
-            transparent 0%,
-            rgba(255, 255, 255, 0.1) 20%,
-            rgba(255, 255, 255, 0.3) 50%,
-            rgba(255, 255, 255, 0.1) 80%,
-            transparent 100%
-        );
-    }
-
-    .sidebar-social {
-        display: flex;
-        gap: 1.5rem;
-        margin-top: 1rem;
-        padding-top: 1.5rem;
-        border-top: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .sidebar-social a {
-        color: rgba(255, 255, 255, 0.4);
-        transition: color 0.2s;
-    }
-
-    .sidebar-social a:hover {
-        color: #fff;
-    }
-
     /* Workspace (Right 75%) */
+
     .ascii-workspace {
         flex-grow: 1;
         height: 100vh;
@@ -636,92 +187,6 @@ import Tooltip from "../components/Tooltip.astro";
         border-radius: 4px;
     }
 
-    /* Controls Footer */
-    .controls-footer {
-        flex-shrink: 0;
-        background: rgba(0, 0, 0, 0.85);
-        border-top: 1px solid rgba(255, 255, 255, 0.1);
-        padding: 1rem 2rem;
-        backdrop-filter: blur(10px);
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        z-index: 20;
-    }
-
-    #tui-controls {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 0;
-        background: none;
-        box-shadow: none;
-        border: none;
-    }
-
-    .control-panel-section {
-        padding: 0 20px;
-    }
-
-    .control-panel-divider {
-        background: rgba(255, 255, 255, 0.1);
-    }
-
-    .section-header {
-        font-size: 10px;
-        font-weight: 800;
-        opacity: 0.6;
-        letter-spacing: 2px;
-        margin-bottom: 8px;
-        text-transform: uppercase;
-        color: var(--text-color);
-    }
-
-    .sliders-grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 8px 16px;
-    }
-
-    .toggles-row,
-    .segments-row,
-    .actions-row {
-        display: flex;
-        gap: 8px;
-        flex-wrap: wrap;
-    }
-
-    .queue-display {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        font-size: 11px;
-        opacity: 0.6;
-        padding: 0 8px;
-        border-left: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    .shortcuts-hint {
-        display: flex;
-        justify-content: center;
-        gap: 16px;
-        font-size: 10px;
-        opacity: 0.4;
-    }
-
-    .shortcuts-hint span {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-    }
-
-    .shortcuts-hint kbd {
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        padding: 2px 4px;
-        border-radius: 3px;
-        font-size: 9px;
-    }
-
     /* Responsive */
     @media (max-width: 1024px) {
         .split-layout {
@@ -729,27 +194,6 @@ import Tooltip from "../components/Tooltip.astro";
             overflow-y: auto;
         }
 
-        .sidebar {
-            width: 100%;
-            max-width: none;
-            min-width: 0;
-            border-right: none;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            padding: 2rem 0;
-        }
-
-        .sidebar-content {
-            padding: 1rem 2rem;
-            align-items: center;
-            text-align: center;
-        }
-
-        .brand-subtitle,
-        .sidebar-actions {
-            justify-content: center;
-            align-items: center;
-        }
-
         .ascii-workspace {
             height: 80vh; /* Give space for scroll */
         }