diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..0e4c8ea
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Build SekiPOS (F5)",
+            "type": "node",
+            "request": "launch",
+            "preLaunchTask": "build-sekipos"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 0000000..4125580
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,15 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build-sekipos",
+            "type": "shell",
+            "command": "docker build -t sekipos:latest .",
+            "group": "build",
+            "presentation": {
+                "reveal": "always",
+                "panel": "new"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/static/cookieStuff.js b/static/cookieStuff.js
new file mode 100644
index 0000000..fba1cb0
--- /dev/null
+++ b/static/cookieStuff.js
@@ -0,0 +1,17 @@
+function setCookie(name, value, days = 365) {
+    const d = new Date();
+    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
+    let expires = "expires=" + d.toUTCString();
+    document.cookie = name + "=" + value + ";" + expires + ";path=/;SameSite=Lax";
+}
+
+function getCookie(name) {
+    let nameEQ = name + "=";
+    let ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+}
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..ec23bb9
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,255 @@
+    :root {
+        --bg: #ebedef;
+        --card-bg: #ffffff;
+        --text-main: #2e3338;
+        --text-muted: #4f5660;
+        --border: #e3e5e8;
+        --navbar-bg: #ffffff;
+        --input-bg: #e3e5e8;
+        --table-head: #f2f3f5;
+        --accent: #5865f2;
+        --accent-hover: #4752c4;
+        --danger: #ed4245;
+    }
+
+    [data-theme="dark"] {
+        --bg: #36393f;
+        --card-bg: #2f3136;
+        --text-main: #dcddde;
+        --text-muted: #b9bbbe;
+        --border: #202225;
+        --navbar-bg: #202225;
+        --input-bg: #202225;
+        --table-head: #292b2f;
+    }
+
+    body {
+        background: var(--bg);
+        color: var(--text-main);
+        font-family: "gg sans", "Segoe UI", sans-serif;
+        transition: background 0.2s, color 0.2s;
+    }
+
+    /* ── Navbar ── */
+    .navbar {
+        background: var(--navbar-bg) !important;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .navbar-brand {
+        color: var(--text-main) !important;
+        font-weight: 700;
+    }
+
+    .nav-link,
+    .dropdown-item {
+        color: var(--text-main) !important;
+    }
+
+    .dropdown-menu {
+        background: var(--card-bg);
+        border: 1px solid var(--border);
+    }
+
+    .dropdown-item:hover {
+        background: var(--input-bg);
+    }
+
+    .dropdown-item.text-danger {
+        color: var(--danger) !important;
+    }
+
+    /* ── Cards ── */
+    .discord-card {
+        background: var(--card-bg);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    }
+
+    /* ── Inputs ── */
+    .form-control,
+    .form-control:focus {
+        background: var(--input-bg);
+        color: var(--text-main);
+        border: none;
+        box-shadow: none;
+    }
+
+    .form-control:focus {
+        outline: 2px solid var(--accent);
+    }
+
+    .form-control::placeholder {
+        color: var(--text-muted);
+    }
+
+    /* ── Buttons ── */
+    .btn-accent {
+        background: var(--accent);
+        color: #fff;
+        border: none;
+    }
+
+    .btn-accent:hover {
+        background: var(--accent-hover);
+        color: #fff;
+    }
+
+    .btn-danger-discord {
+        background: var(--danger);
+        color: #fff;
+        border: none;
+    }
+
+    .btn-danger-discord:hover {
+        background: #c23235;
+        color: #fff;
+    }
+
+    /* ── Price tag ── */
+    .price-tag {
+        font-size: 2.8rem;
+        /* Slightly larger for the wider card */
+        font-weight: 800;
+        color: var(--accent);
+        /* Optional: uses your accent color for better visibility */
+    }
+
+    /* ── Table ── */
+    .table {
+        color: var(--text-main);
+        --bs-table-color: var(--text-main);
+        --bs-table-bg: transparent;
+        --bs-table-border-color: var(--border);
+    }
+
+    /* -- Checkbox Size Fix -- */
+    #select-all {
+        transform: scale(1.3);
+        margin-top: 2px;
+    }
+
+    [data-theme="dark"] .table {
+        --bs-table-color: var(--text-main);
+        color: var(--text-main);
+    }
+
+    .table thead th {
+        background: var(--table-head);
+        color: var(--text-muted);
+        font-size: 0.72rem;
+        text-transform: uppercase;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .table tbody td {
+        border-bottom: 1px solid var(--border);
+        vertical-align: middle;
+    }
+
+    /* ── Bulk bar ── */
+    .bulk-bar {
+        background: var(--accent);
+        color: #fff;
+        border-radius: 8px;
+    }
+
+    .bulk-bar .form-control {
+        width: 110px;
+        background: rgba(0, 0, 0, 0.2) !important;
+        color: #fff !important;
+        border: 1px solid rgba(255, 255, 255, 0.25) !important;
+    }
+
+    .bulk-bar .form-control::placeholder {
+        color: rgba(255, 255, 255, 0.6);
+    }
+
+    /* ── New-product prompt ── */
+    .new-product-prompt {
+        background: var(--accent);
+        color: #fff;
+        border-radius: 8px;
+    }
+
+    /* ── Product image ── */
+    #display-img {
+        width: 100%;
+        /* Allows it to fill the new width */
+        max-width: 250px;
+        /* Increased from 160px */
+        height: auto;
+        max-height: 250px;
+        /* Increased from 160px */
+        object-fit: contain;
+    }
+
+    /* ── Checkbox ── */
+    input[type="checkbox"] {
+        cursor: pointer;
+    }
+
+    /* ── Mobile: hide barcode column ── */
+    @media (max-width: 576px) {
+        .col-barcode {
+            display: none;
+        }
+
+        .btn-edit-sm,
+        .btn-del-sm {
+            padding: 4px 7px;
+            font-size: 0.75rem;
+        }
+    }
+
+    .modal-content {
+        background: var(--card-bg);
+        color: var(--text-main);
+        border: 1px solid var(--border);
+    }
+
+    .modal-header,
+    .modal-footer {
+        border-color: var(--border);
+    }
+
+    .btn-close {
+        /* Makes the X button visible in dark mode */
+        filter: var(--bs-theme-placeholder, invert(0.7) grayscale(100%) brightness(200%));
+    }
+
+    [data-theme="dark"] .btn-close {
+        filter: invert(1) grayscale(100%) brightness(200%);
+    }
+
+    /* Add this inside your <style> tag */
+    [data-theme="dark"] .text-muted {
+        color: var(--text-muted) !important;
+    }
+
+    [data-theme="dark"] .modal-body .text-muted {
+        color: #f6f6f7 !important;
+    }
+
+    .btn-close {
+        filter: none;
+    }
+
+    [data-theme="dark"] .btn-close {
+        filter: invert(1) grayscale(100%) brightness(200%);
+    }
+
+    .form-select {
+        background-color: var(--input-bg) !important;
+        color: var(--text-main) !important;
+        border: none !important;
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
+        background-repeat: no-repeat !important;
+        background-position: right 0.75rem center !important;
+        background-size: 16px 12px !important;
+    }
+
+    [data-theme="dark"] .form-select {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dcddde' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
+    }
\ No newline at end of file
diff --git a/static/themeStuff.js b/static/themeStuff.js
new file mode 100644
index 0000000..08e41d4
--- /dev/null
+++ b/static/themeStuff.js
@@ -0,0 +1,39 @@
+function applyTheme(t) {
+    document.documentElement.setAttribute('data-theme', t);
+    localStorage.setItem('theme', t);
+    
+    const isDark = (t === 'dark');
+    const themeIcon = document.getElementById('theme-icon');
+    const themeLabel = document.getElementById('theme-label');
+
+    if (themeIcon) {
+        themeIcon.className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2';
+    }
+    if (themeLabel) {
+        themeLabel.innerText = isDark ? 'Modo Claro' : 'Modo Oscuro';
+    }
+}
+
+function toggleTheme() {
+    const current = document.documentElement.getAttribute('data-theme');
+    applyTheme(current === 'dark' ? 'light' : 'dark');
+}
+
+function initTheme() {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+        applyTheme(savedTheme);
+    } else {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        applyTheme(prefersDark ? 'dark' : 'light');
+    }
+}
+
+// Listen for system theme changes only if the user hasn't set a manual override
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+    if (!localStorage.getItem('theme')) {
+        applyTheme(e.matches ? 'dark' : 'light');
+    }
+});
+
+initTheme();
\ No newline at end of file
diff --git a/templates/checkout.html b/templates/checkout.html
index 20c865a..cb86152 100644
--- a/templates/checkout.html
+++ b/templates/checkout.html
@@ -121,7 +121,8 @@
 
         .form-control::placeholder {
             color: var(--text-muted) !important;
-            opacity: 1; /* Forces Firefox to respect the color */
+            opacity: 1;
+            /* Forces Firefox to respect the color */
         }
 
         #grand-total {
@@ -191,24 +192,32 @@
 
         /* ── Thermal Printer Styles (80mm) ── */
         @media print {
+
             /* Kill all animations instantly so the printer doesn't photograph a mid-fade background */
-            *, *::before, *::after {
+            *,
+            *::before,
+            *::after {
                 transition: none !important;
                 animation: none !important;
             }
 
             /* Force true white background */
-            html, body { 
-                background: #ffffff !important; 
+            html,
+            body {
+                background: #ffffff !important;
                 color: #000000 !important;
-                margin: 0 !important; 
-                padding: 0 !important; 
+                margin: 0 !important;
+                padding: 0 !important;
                 -webkit-print-color-adjust: exact !important;
                 print-color-adjust: exact !important;
             }
-            
-            .navbar, .container-fluid, .modal { display: none !important; } 
-            
+
+            .navbar,
+            .container-fluid,
+            .modal {
+                display: none !important;
+            }
+
             #receipt-print-zone {
                 display: block !important;
                 width: 80mm;
@@ -224,18 +233,41 @@
                 background: transparent !important;
                 color: #000000 !important;
                 opacity: 1 !important;
-                font-weight: 800 !important; 
+                font-weight: 800 !important;
                 text-shadow: none !important;
                 box-shadow: none !important;
             }
-            
-            @page { margin: 0; } 
-            
-            .receipt-header { text-align: center; margin-bottom: 10px; }
-            .receipt-table { width: 100%; margin-bottom: 10px; }
-            .receipt-table th { text-align: left; border-bottom: 1px dashed #000 !important; padding-bottom: 3px; }
-            .receipt-table td { padding: 3px 0; vertical-align: top; }
-            .receipt-total-row { border-top: 1px dashed #000 !important; font-weight: 800 !important; font-size: 14px; }
+
+            @page {
+                margin: 0;
+            }
+
+            .receipt-header {
+                text-align: center;
+                margin-bottom: 10px;
+            }
+
+            .receipt-table {
+                width: 100%;
+                margin-bottom: 10px;
+            }
+
+            .receipt-table th {
+                text-align: left;
+                border-bottom: 1px dashed #000 !important;
+                padding-bottom: 3px;
+            }
+
+            .receipt-table td {
+                padding: 3px 0;
+                vertical-align: top;
+            }
+
+            .receipt-total-row {
+                border-top: 1px dashed #000 !important;
+                font-weight: 800 !important;
+                font-size: 14px;
+            }
         }
 
         /* ── Dropdown Select Fix ── */
@@ -259,7 +291,9 @@
 </head>
 
 <body>
-<div class="modal fade" id="customProductModal" tabindex="-1" data-bs-backdrop="static">
+    {% with active_page='checkout' %}{% include 'navbar.html' %}{% endwith %}
+
+    <div class="modal fade" id="customProductModal" tabindex="-1" data-bs-backdrop="static">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
@@ -269,13 +303,13 @@
                 <div class="modal-body">
                     <div class="mb-3">
                         <label class="form-label text-muted small mb-1">Descripción</label>
-                        <input type="text" id="custom-name" class="form-control" placeholder="Ej: Varios, Bolsa, etc." 
+                        <input type="text" id="custom-name" class="form-control" placeholder="Ej: Varios, Bolsa, etc."
                             onkeydown="if(event.key === 'Enter') document.getElementById('custom-price').focus()">
                     </div>
                     <div class="row g-2">
                         <div class="col-8">
                             <label class="form-label text-muted small mb-1">Precio Unitario</label>
-                            <input type="number" id="custom-price" class="form-control" placeholder="Ej: 1500" 
+                            <input type="number" id="custom-price" class="form-control" placeholder="Ej: 1500"
                                 onkeydown="if(event.key === 'Enter') addCustomProduct()">
                         </div>
                         <div class="col-4">
@@ -301,7 +335,7 @@
             <div style="font-size: 11px; font-weight: bold;">Ticket Nº <span id="receipt-ticket-id"></span></div>
             <div id="receipt-date" style="font-size: 11px;"></div>
         </div>
-        
+
         <table class="receipt-table">
             <thead>
                 <tr>
@@ -311,14 +345,14 @@
                 </tr>
             </thead>
             <tbody id="receipt-items-print">
-                </tbody>
+            </tbody>
         </table>
-        
+
         <div class="receipt-total-row d-flex justify-content-between pt-2">
             <span>TOTAL:</span>
             <span id="receipt-total-print"></span>
         </div>
-        
+
         <div style="text-align: center; margin-top: 20px; font-size: 10px;">
             ¡Gracias por su compra!
         </div>
@@ -375,18 +409,23 @@
         <div class="modal-dialog modal-dialog-centered modal-sm">
             <div class="modal-content">
                 <div class="modal-header border-0 pb-0">
-                    <h5 class="modal-title w-100 text-center text-muted text-uppercase" style="font-size: 0.8rem;">Total a Pagar</h5>
-                    <button type="button" class="btn-close position-absolute end-0 top-0 m-3" data-bs-dismiss="modal"></button>
+                    <h5 class="modal-title w-100 text-center text-muted text-uppercase" style="font-size: 0.8rem;">Total
+                        a Pagar</h5>
+                    <button type="button" class="btn-close position-absolute end-0 top-0 m-3"
+                        data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body text-center pt-1 pb-4">
-                    <h1 id="payment-modal-total" class="mb-4" style="color: var(--accent); font-weight: 800; font-size: 3rem;">$0</h1>
-                    
+                    <h1 id="payment-modal-total" class="mb-4"
+                        style="color: var(--accent); font-weight: 800; font-size: 3rem;">$0</h1>
+
                     <div class="d-grid gap-3 px-3">
                         <button class="btn btn-lg btn-success py-3" onclick="openVueltoModal()">
-                            <i class="bi bi-cash-coin me-2" style="font-size: 1.5rem; vertical-align: middle;"></i> Efectivo
+                            <i class="bi bi-cash-coin me-2" style="font-size: 1.5rem; vertical-align: middle;"></i>
+                            Efectivo
                         </button>
                         <button class="btn btn-lg btn-secondary py-3" onclick="executeCheckout('tarjeta')">
-                            <i class="bi bi-credit-card me-2" style="font-size: 1.5rem; vertical-align: middle;"></i> Tarjeta (Pronto)
+                            <i class="bi bi-credit-card me-2" style="font-size: 1.5rem; vertical-align: middle;"></i>
+                            Tarjeta (Pronto)
                         </button>
                     </div>
                 </div>
@@ -397,30 +436,34 @@
         <div class="modal-dialog modal-dialog-centered modal-sm">
             <div class="modal-content">
                 <div class="modal-header border-0 pb-0">
-                    <h5 class="modal-title w-100 text-center text-muted text-uppercase" style="font-size: 0.8rem;">Pago en Efectivo</h5>
-                    <button type="button" class="btn-close position-absolute end-0 top-0 m-3" data-bs-dismiss="modal"></button>
+                    <h5 class="modal-title w-100 text-center text-muted text-uppercase" style="font-size: 0.8rem;">Pago
+                        en Efectivo</h5>
+                    <button type="button" class="btn-close position-absolute end-0 top-0 m-3"
+                        data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body text-center pt-1 pb-4">
                     <div class="mb-3">
                         <span class="text-muted small">Total a Pagar:</span><br>
                         <span id="vuelto-total-display" class="fs-4 fw-bold" style="color: var(--text-main);">$0</span>
                     </div>
-                    
+
                     <div class="mb-3 text-start">
                         <label class="text-muted small mb-1">Monto Recibido</label>
-                        <input type="number" id="monto-recibido" class="form-control form-control-lg text-center fw-bold fs-4" 
-                            placeholder="$0" onkeyup="calculateVuelto()" onchange="calculateVuelto()"
+                        <input type="number" id="monto-recibido"
+                            class="form-control form-control-lg text-center fw-bold fs-4" placeholder="$0"
+                            onkeyup="calculateVuelto()" onchange="calculateVuelto()"
                             onkeydown="if(event.key === 'Enter' && !document.getElementById('btn-confirm-vuelto').disabled) executeCheckout('efectivo')">
                     </div>
-                    
+
                     <div class="d-flex justify-content-center gap-2 mb-3" id="vuelto-quick-buttons"></div>
-                    
+
                     <div class="p-3 mb-3" style="background: var(--input-bg); border-radius: 8px;">
                         <span class="text-muted small text-uppercase fw-bold">Vuelto a Entregar</span><br>
                         <span id="vuelto-amount" class="fs-1 fw-bold text-muted">$0</span>
                     </div>
-                    
-                    <button id="btn-confirm-vuelto" class="btn btn-success w-100 py-3 fw-bold" onclick="executeCheckout('efectivo')" disabled>
+
+                    <button id="btn-confirm-vuelto" class="btn btn-success w-100 py-3 fw-bold"
+                        onclick="executeCheckout('efectivo')" disabled>
                         Confirmar Venta
                     </button>
                 </div>
@@ -436,8 +479,9 @@
                 <div class="modal-body text-center pt-0 pb-4">
                     <i class="bi bi-question-circle text-warning mb-3" style="font-size: 3rem;"></i>
                     <h4 class="mb-2">Producto No Registrado</h4>
-                    <p class="text-muted px-3 small">El código <strong id="not-found-barcode" style="color: var(--text-main);"></strong> no existe en la base de datos.</p>
-                    
+                    <p class="text-muted px-3 small">El código <strong id="not-found-barcode"
+                            style="color: var(--text-main);"></strong> no existe en la base de datos.</p>
+
                     <div class="d-flex flex-column gap-2 px-3 mt-4">
                         <button class="btn btn-accent w-100 py-2" onclick="goToInventory()">
                             <i class="bi bi-database-add me-2"></i>Registrar en Inventario
@@ -450,48 +494,6 @@
             </div>
         </div>
     </div>
-    <nav class="navbar navbar-expand-md sticky-top px-3 mb-3">
-        <span class="navbar-brand">SekiPOS <small class="text-muted fw-normal"
-                style="font-size:0.65rem;">Caja</small></span>
-
-        <div class="ms-3 gap-2 d-flex">
-            <a href="/" class="btn btn-outline-primary btn-sm">
-                <i class="bi bi-box-seam me-1"></i>Inventario
-            </a>
-            <a href="/sales" class="btn btn-outline-primary btn-sm">
-                <i class="bi bi-receipt me-1"></i>Ventas
-            </a>
-            <a href="/dicom" class="btn btn-outline-danger btn-sm">
-                <i class="bi bi-journal-x me-1"></i>Dicom
-            </a>
-        </div>
-
-        <div class="ms-auto">
-            <div class="dropdown">
-                <button class="btn btn-accent dropdown-toggle" type="button" data-bs-toggle="dropdown"
-                    aria-expanded="false">
-                    <i class="bi bi-person-circle me-1"></i>
-                    <span class="d-none d-sm-inline">{{ user.username }}</span>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end shadow">
-                    <li>
-                        <button class="dropdown-item" onclick="toggleTheme()">
-                            <i class="bi bi-moon-stars me-2" id="theme-icon"></i>
-                            <span id="theme-label">Modo Oscuro</span>
-                        </button>
-                    </li>
-                    <li>
-                        <hr class="dropdown-divider" style="border-color: var(--border);">
-                    </li>
-                    <li>
-                        <a class="dropdown-item text-danger" href="/logout">
-                            <i class="bi bi-box-arrow-right me-2"></i>Salir
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
 
     <div class="container-fluid">
         <div class="row g-3">
@@ -500,17 +502,20 @@
                     <h4><i class="bi bi-cart3"></i> Carrito</h4>
                     <div class="position-relative mb-4">
                         <div class="input-group">
-                            <span class="input-group-text border-0 position-absolute" style="background: transparent; z-index: 10;">
+                            <span class="input-group-text border-0 position-absolute"
+                                style="background: transparent; z-index: 10;">
                                 <i class="bi bi-search text-muted"></i>
                             </span>
-                            <input type="text" id="manual-search" class="form-control ps-5 py-2 rounded" 
-                                placeholder="Buscar producto por nombre o código..." autocomplete="off" onkeyup="filterSearch()">
-                            <button class="btn btn-accent px-3" type="button" onclick="openCustomProductModal()" title="Agregar manual">
+                            <input type="text" id="manual-search" class="form-control ps-5 py-2 rounded"
+                                placeholder="Buscar producto por nombre o código..." autocomplete="off"
+                                onkeyup="filterSearch()">
+                            <button class="btn btn-accent px-3" type="button" onclick="openCustomProductModal()"
+                                title="Agregar manual">
                                 <i class="bi bi-plus-lg"></i> <span class="d-none d-sm-inline ms-1">Manual</span>
                             </button>
                         </div>
-                        <div id="search-results" class="dropdown-menu w-100 shadow-sm mt-1" 
-                             style="display: none; position: absolute; top: 100%; left: 0; z-index: 1000; max-height: 300px; overflow-y: auto;">
+                        <div id="search-results" class="dropdown-menu w-100 shadow-sm mt-1"
+                            style="display: none; position: absolute; top: 100%; left: 0; z-index: 1000; max-height: 300px; overflow-y: auto;">
                         </div>
                     </div>
                     <table class="table mt-3" id="cart-table">
@@ -585,7 +590,7 @@
             socket.on('scan_error', (data) => {
                 missingProductData = data;
                 document.getElementById('not-found-barcode').innerText = data.barcode;
-                
+
                 const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('notFoundModal'));
                 modal.show();
             });
@@ -598,18 +603,18 @@
 
             function openTempProduct() {
                 bootstrap.Modal.getInstance(document.getElementById('notFoundModal')).hide();
-                
+
                 // Save the actual scanned barcode so it prints on the receipt instead of "MANUAL-XXX"
                 tempBarcode = missingProductData.barcode;
-                
+
                 // Pre-fill the name if the OpenFoodFacts API managed to find it
                 document.getElementById('custom-name').value = missingProductData.name || '';
                 document.getElementById('custom-price').value = '';
                 document.getElementById('custom-unit').value = 'unit';
-                
+
                 const customModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('customProductModal'));
                 customModal.show();
-                
+
                 // Auto-focus the price if we already have a name, otherwise focus the name
                 setTimeout(() => {
                     if (missingProductData.name) document.getElementById('custom-price').focus();
@@ -659,11 +664,11 @@
                     `;
                     tbody.appendChild(row);
                 });
-                
+
                 document.getElementById('grand-total').innerText = clp.format(total);
-                
+
                 // This will actually run now
-                saveCart(); 
+                saveCart();
             }
 
             function clearCart() {
@@ -680,11 +685,11 @@
 
             function processSale() {
                 if (cart.length === 0) return;
-                
+
                 // Calculate total and show the payment modal
                 const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
                 document.getElementById('payment-modal-total').innerText = clp.format(total);
-                
+
                 const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('paymentModal'));
                 modal.show();
             }
@@ -706,25 +711,25 @@
                         // Safely hide whichever modal was open
                         const pModal = bootstrap.Modal.getInstance(document.getElementById('paymentModal'));
                         if (pModal) pModal.hide();
-                        
+
                         const vModal = bootstrap.Modal.getInstance(document.getElementById('vueltoModal'));
                         if (vModal) vModal.hide();
 
                         // Pass the new sale_id from the result to the printer
                         const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
                         printReceipt(total, result.sale_id);
-                        
+
                         // Show the success checkmark
                         const successModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('successModal'));
                         successModal.show();
-                        
+
                         // Nuke the cart and auto-save the empty state
                         cart = [];
                         renderCart();
-                        
+
                         // Auto-hide the success modal after 2 seconds so you don't have to click it
                         setTimeout(() => successModal.hide(), 2000);
-                        
+
                     } else {
                         alert("Error en la venta: " + (result.error || "Error desconocido"));
                     }
@@ -737,10 +742,10 @@
             function confirmWeight() {
                 const weightInput = document.getElementById('weight-input');
                 const weightGrams = parseInt(weightInput.value, 10);
-                
+
                 if (weightGrams > 0) {
-                    const weightKg = weightGrams / 1000; 
-                    
+                    const weightKg = weightGrams / 1000;
+
                     if (editingCartIndex !== null) {
                         // We are editing an existing row
                         cart[editingCartIndex].qty = weightKg;
@@ -750,7 +755,7 @@
                         // We are adding a new scan/search
                         addToCart(pendingProduct, weightKg);
                     }
-                    
+
                     bootstrap.Modal.getInstance(document.getElementById('weightModal')).hide();
                     weightInput.value = '';
                     editingCartIndex = null; // Clear the tracker
@@ -797,51 +802,32 @@
                 editingCartIndex = index;
                 const item = cart[index];
                 const weightInput = document.getElementById('weight-input');
-                
+
                 // Convert current kg back to grams for the input
-                weightInput.value = Math.round(item.qty * 1000); 
-                
+                weightInput.value = Math.round(item.qty * 1000);
+
                 const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('weightModal'));
                 modal.show();
-                
+
                 // Auto-focus and highlight the existing number so you can just type over it
-                setTimeout(() => { 
-                    weightInput.focus(); 
-                    weightInput.select(); 
+                setTimeout(() => {
+                    weightInput.focus();
+                    weightInput.select();
                 }, 500);
             }
 
-            function applyTheme(t) {
-                document.documentElement.setAttribute('data-theme', t);
-                const isDark = t === 'dark';
-                const themeIcon = document.getElementById('theme-icon');
-                const themeLabel = document.getElementById('theme-label');
-
-                if (themeIcon) themeIcon.className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2';
-                if (themeLabel) themeLabel.innerText = isDark ? 'Modo Claro' : 'Modo Oscuro';
-
-                localStorage.setItem('theme', t);
-            }
-
-            function toggleTheme() {
-                const current = document.documentElement.getAttribute('data-theme');
-                const next = current === 'dark' ? 'light' : 'dark';
-                applyTheme(next);
-            }
-
-
             // 1. Load all products from Python into a JavaScript array safely
             const allProducts = [
                 {% for p in products %}
-                {
-                    barcode: {{ p[0] | tojson }},
-                    name: {{ p[1] | tojson }},
-                    price: {{ p[2] | int }},
-                    image: {{ p[3] | tojson }},
-                    stock: {{ p[4] | int }},
-                    unit: {{ p[5] | tojson }}
-                },
-                {% endfor %}
+            {
+                barcode: { { p[0] | tojson } },
+                name: { { p[1] | tojson } },
+                price: { { p[2] | int } },
+                image: { { p[3] | tojson } },
+                stock: { { p[4] | int } },
+                unit: { { p[5] | tojson } }
+            },
+            {% endfor %}
             ];
 
             // 2. Extracted this into a helper so both Scanner and Search can use it
@@ -856,13 +842,13 @@
                 if (actualUnit === 'kg') {
                     pendingProduct = product;
                     pendingProduct.unit = 'kg'; // Force it to match the cart's expected format
-                    
+
                     const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('weightModal'));
                     modal.show();
                     setTimeout(() => document.getElementById('weight-input').focus(), 500);
                 } else {
                     // Ensure unit products also get the standardized key
-                    product.unit = 'unit'; 
+                    product.unit = 'unit';
                     addToCart(product, 1);
                 }
             }
@@ -876,14 +862,14 @@
             function filterSearch() {
                 const query = document.getElementById('manual-search').value.toLowerCase().trim();
                 const resultsBox = document.getElementById('search-results');
-                
+
                 if (query.length < 2) {
                     resultsBox.style.display = 'none';
                     return;
                 }
 
                 // Find matches by name or barcode
-                const matches = allProducts.filter(p => 
+                const matches = allProducts.filter(p =>
                     p.name.toLowerCase().includes(query) || p.barcode.includes(query)
                 ).slice(0, 10); // Limit to 10 results so it doesn't lag out
 
@@ -904,7 +890,7 @@
                         </a>
                     `).join('');
                 }
-                
+
                 resultsBox.style.display = 'block';
             }
 
@@ -913,7 +899,7 @@
                 if (product) {
                     handleProductScan(product);
                 }
-                
+
                 // Clean up UI after selection
                 const searchInput = document.getElementById('manual-search');
                 searchInput.value = '';
@@ -922,7 +908,7 @@
             }
 
             // Close the search dropdown if user clicks outside of it
-            document.addEventListener('click', function(e) {
+            document.addEventListener('click', function (e) {
                 const searchArea = document.getElementById('manual-search');
                 const resultsBox = document.getElementById('search-results');
                 if (e.target !== searchArea && !resultsBox.contains(e.target)) {
@@ -934,7 +920,7 @@
             document.getElementById('weightModal').addEventListener('hidden.bs.modal', function () {
                 document.getElementById('weight-input').value = '';
                 pendingProduct = null;
-                editingCartIndex = null; 
+                editingCartIndex = null;
             });
 
             function calculateSubtotal(price, qty) {
@@ -953,7 +939,7 @@
                     try {
                         cart = JSON.parse(saved);
                         renderCart();
-                    } catch(e) {
+                    } catch (e) {
                         console.error("Error cargando el carrito", e);
                         cart = [];
                     }
@@ -963,17 +949,17 @@
             function removeItem(idx) {
                 itemIndexToRemove = idx;
                 // Look up the name safely from the array
-                document.getElementById('removeItemName').innerText = cart[idx].name; 
-                
+                document.getElementById('removeItemName').innerText = cart[idx].name;
+
                 // getOrCreateInstance prevents UI-breaking ghost backdrops
                 const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('removeConfirmModal'));
                 modal.show();
             }
 
-        function printReceipt(total, saleId) {
+            function printReceipt(total, saleId) {
                 const tbody = document.getElementById('receipt-items-print');
                 tbody.innerHTML = '';
-                
+
                 cart.forEach(item => {
                     const qtyStr = item.unit === 'kg' ? item.qty.toFixed(3) : item.qty;
                     tbody.innerHTML += `
@@ -984,11 +970,11 @@
                         </tr>
                     `;
                 });
-                
+
                 document.getElementById('receipt-ticket-id').innerText = saleId || "N/A";
                 document.getElementById('receipt-total-print').innerText = clp.format(total);
                 document.getElementById('receipt-date').innerText = new Date().toLocaleString('es-CL');
-                
+
                 // No hacks, just print
                 window.print();
             }
@@ -1001,7 +987,7 @@
                 document.getElementById('custom-name').value = '';
                 document.getElementById('custom-price').value = '';
                 document.getElementById('custom-unit').value = 'unit';
-                
+
                 const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('customProductModal'));
                 modal.show();
                 setTimeout(() => document.getElementById('custom-name').focus(), 500);
@@ -1011,28 +997,28 @@
                 const nameInput = document.getElementById('custom-name').value.trim();
                 const priceInput = parseInt(document.getElementById('custom-price').value, 10);
                 const unitInput = document.getElementById('custom-unit').value;
-                
+
                 if (!nameInput || isNaN(priceInput) || priceInput <= 0) {
                     alert("Por favor ingresa un nombre y un precio válido.");
                     return;
                 }
-                
+
                 // Use the scanned barcode if it exists, otherwise generate a fake one
                 const finalBarcode = tempBarcode ? tempBarcode : `MANUAL-${Date.now().toString().slice(-6)}`;
-                
+
                 const customProduct = {
                     barcode: finalBarcode,
-                    name: `* ${nameInput}`, 
+                    name: `* ${nameInput}`,
                     price: priceInput,
                     image: '',
-                    stock: 0, 
+                    stock: 0,
                     unit: unitInput
                 };
-                
+
                 if (unitInput === 'kg') {
                     pendingProduct = customProduct;
                     bootstrap.Modal.getInstance(document.getElementById('customProductModal')).hide();
-                    
+
                     const weightModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('weightModal'));
                     weightModal.show();
                     setTimeout(() => document.getElementById('weight-input').focus(), 500);
@@ -1040,7 +1026,7 @@
                     addToCart(customProduct, 1);
                     bootstrap.Modal.getInstance(document.getElementById('customProductModal')).hide();
                 }
-                
+
                 tempBarcode = null; // Reset it after adding
             }
 
@@ -1057,10 +1043,10 @@
             function openVueltoModal() {
                 // Hide the main payment selection modal
                 bootstrap.Modal.getInstance(document.getElementById('paymentModal')).hide();
-                
+
                 const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
                 document.getElementById('vuelto-total-display').innerText = clp.format(total);
-                
+
                 const input = document.getElementById('monto-recibido');
                 input.value = '';
                 document.getElementById('vuelto-amount').innerText = '$0';
@@ -1070,7 +1056,7 @@
                 // Generate smart quick-buttons (Exacto, 5k, 10k, 20k)
                 const quickBox = document.getElementById('vuelto-quick-buttons');
                 quickBox.innerHTML = `<button class="btn btn-sm btn-outline-secondary fw-bold" onclick="setMonto(${total})">Exacto</button>`;
-                
+
                 [5000, 10000, 20000].forEach(bill => {
                     if (bill > total && (bill - total) <= 20000) {
                         quickBox.innerHTML += `<button class="btn btn-sm btn-outline-secondary fw-bold" onclick="setMonto(${bill})">${clp.format(bill)}</button>`;
@@ -1079,7 +1065,7 @@
 
                 const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('vueltoModal'));
                 modal.show();
-                
+
                 // Auto-focus input so you can start typing immediately
                 setTimeout(() => input.focus(), 500);
             }
@@ -1107,27 +1093,12 @@
                 }
             }
 
-            // Initialize on load
-            (function initTheme() {
-                const savedTheme = localStorage.getItem('theme');
-                if (savedTheme) {
-                    applyTheme(savedTheme);
-                } else {
-                    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                    applyTheme(prefersDark ? 'dark' : 'light');
-                }
-            })();
-            
-            // Listen for OS theme changes in real-time
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-                if (!localStorage.getItem('theme')) {
-                    applyTheme(e.matches ? 'dark' : 'light');
-                }
-            });
-
             loadCart();
         </script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+        <script src="./static/cookieStuff.js"></script>
+        <script src="./static/themeStuff.js"></script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/templates/dicom.html b/templates/dicom.html
index 80a140b..7008728 100644
--- a/templates/dicom.html
+++ b/templates/dicom.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="es" data-theme="light">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,78 +10,134 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
     <style>
         :root {
-            --bg: #ebedef; --card-bg: #ffffff; --text-main: #2e3338;
-            --text-muted: #4f5660; --border: #e3e5e8; --navbar-bg: #ffffff;
-            --accent: #5865f2; --input-bg: #e3e5e8; --danger: #ed4245;
+            --bg: #ebedef;
+            --card-bg: #ffffff;
+            --text-main: #2e3338;
+            --text-muted: #4f5660;
+            --border: #e3e5e8;
+            --navbar-bg: #ffffff;
+            --accent: #5865f2;
+            --input-bg: #e3e5e8;
+            --danger: #ed4245;
         }
+
         [data-theme="dark"] {
-            --bg: #36393f; --card-bg: #2f3136; --text-main: #dcddde;
-            --text-muted: #b9bbbe; --border: #202225; --navbar-bg: #202225;
+            --bg: #36393f;
+            --card-bg: #2f3136;
+            --text-main: #dcddde;
+            --text-muted: #b9bbbe;
+            --border: #202225;
+            --navbar-bg: #202225;
             --input-bg: #202225;
         }
-        
-        body { background: var(--bg); color: var(--text-main); font-family: "gg sans", "Segoe UI", sans-serif; transition: background 0.2s; }
-        .navbar { background: var(--navbar-bg) !important; border-bottom: 1px solid var(--border); }
-        .navbar-brand { color: var(--text-main) !important; font-weight: 700; }
-        
-        .discord-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
-        
-        .form-control, .form-control:focus { background-color: var(--input-bg) !important; color: var(--text-main) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
-        .form-control:focus { border-color: var(--accent) !important; }
-        .form-control::placeholder { color: var(--text-muted) !important; opacity: 1; }
-        
-        .table { color: var(--text-main) !important; --bs-table-bg: transparent; --bs-table-border-color: var(--border); }
-        .table thead th { background: var(--bg); color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; border-bottom: 1px solid var(--border); }
-        .table td { border-bottom: 1px solid var(--border); vertical-align: middle; }
-        
-        .btn-accent { background: var(--accent); color: #fff; border: none; }
-        .dropdown-menu { background: var(--card-bg); border: 1px solid var(--border); }
-        .dropdown-item { color: var(--text-main) !important; }
-        .dropdown-item:hover { background: var(--input-bg); }
-        
-        [data-theme="dark"] .table { --bs-table-color: var(--text-main); color: var(--text-main) !important; }
-        [data-theme="dark"] .table thead th { background: #292b2f; color: var(--text-muted); }
-        [data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
+
+        body {
+            background: var(--bg);
+            color: var(--text-main);
+            font-family: "gg sans", "Segoe UI", sans-serif;
+            transition: background 0.2s;
+        }
+
+        .navbar {
+            background: var(--navbar-bg) !important;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .navbar-brand {
+            color: var(--text-main) !important;
+            font-weight: 700;
+        }
+
+        .discord-card {
+            background: var(--card-bg);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .form-control,
+        .form-control:focus {
+            background-color: var(--input-bg) !important;
+            color: var(--text-main) !important;
+            border: 1px solid var(--border) !important;
+            box-shadow: none !important;
+        }
+
+        .form-control:focus {
+            border-color: var(--accent) !important;
+        }
+
+        .form-control::placeholder {
+            color: var(--text-muted) !important;
+            opacity: 1;
+        }
+
+        .table {
+            color: var(--text-main) !important;
+            --bs-table-bg: transparent;
+            --bs-table-border-color: var(--border);
+        }
+
+        .table thead th {
+            background: var(--bg);
+            color: var(--text-muted);
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .table td {
+            border-bottom: 1px solid var(--border);
+            vertical-align: middle;
+        }
+
+        .btn-accent {
+            background: var(--accent);
+            color: #fff;
+            border: none;
+        }
+
+        .dropdown-menu {
+            background: var(--card-bg);
+            border: 1px solid var(--border);
+        }
+
+        .dropdown-item {
+            color: var(--text-main) !important;
+        }
+
+        .dropdown-item:hover {
+            background: var(--input-bg);
+        }
+
+        [data-theme="dark"] .table {
+            --bs-table-color: var(--text-main);
+            color: var(--text-main) !important;
+        }
+
+        [data-theme="dark"] .table thead th {
+            background: #292b2f;
+            color: var(--text-muted);
+        }
+
+        [data-theme="dark"] .text-muted {
+            color: var(--text-muted) !important;
+        }
     </style>
 </head>
-<body>
-    <nav class="navbar navbar-expand-md sticky-top px-3 mb-3">
-        <span class="navbar-brand">SekiPOS <small class="text-danger fw-bold ms-1" style="font-size:0.75rem;"><i class="bi bi-journal-x"></i> Dicom</small></span>
-        
-        <div class="ms-3 gap-2 d-flex">
-            <a href="/" class="btn btn-outline-primary btn-sm"><i class="bi bi-box-seam me-1"></i>Inventario</a>
-            <a href="/checkout" class="btn btn-outline-primary btn-sm"><i class="bi bi-cart-fill me-1"></i>Caja</a>
-            <a href="/sales" class="btn btn-outline-primary btn-sm"><i class="bi bi-receipt me-1"></i>Ventas</a>
-        </div>
 
-        <div class="ms-auto">
-            <div class="dropdown">
-                <button class="btn btn-accent dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                    <i class="bi bi-person-circle me-1"></i>
-                    <span class="d-none d-sm-inline">{{ user.username }}</span>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end shadow">
-                    <li>
-                        <button class="dropdown-item" onclick="toggleTheme()">
-                            <i class="bi bi-moon-stars me-2" id="theme-icon"></i>
-                            <span id="theme-label">Modo Oscuro</span>
-                        </button>
-                    </li>
-                    <li><hr class="dropdown-divider" style="border-color: var(--border);"></li>
-                    <li><a class="dropdown-item text-danger" href="/logout"><i class="bi bi-box-arrow-right me-2"></i>Salir</a></li>
-                </ul>
-            </div>
-        </div>
-    </nav>
+<body>
+    {% with active_page='dicom' %}{% include 'navbar.html' %}{% endwith %}
 
     <div class="container-fluid px-3">
         <div class="row g-3">
-            
+
             <div class="col-md-4">
                 <div class="discord-card p-3 mb-3">
                     <div class="d-flex justify-content-between align-items-center mb-3">
                         <h5 class="mb-0 fw-bold">Registrar Movimiento</h5>
-                        <button class="btn btn-sm btn-outline-secondary" onclick="clearDicomForm()" title="Limpiar Formulario">
+                        <button class="btn btn-sm btn-outline-secondary" onclick="clearDicomForm()"
+                            title="Limpiar Formulario">
                             <i class="bi bi-eraser"></i> Nuevo
                         </button>
                     </div>
@@ -94,9 +151,10 @@
                     </div>
                     <div class="mb-4">
                         <label class="small text-muted mb-1">Nota (Opcional)</label>
-                        <input type="text" id="dicom-notes" class="form-control" placeholder="Ej: Pan y bebida" onkeydown="if(event.key === 'Enter') submitDicom('add')">
+                        <input type="text" id="dicom-notes" class="form-control" placeholder="Ej: Pan y bebida"
+                            onkeydown="if(event.key === 'Enter') submitDicom('add')">
                     </div>
-                    
+
                     <div class="d-flex flex-column gap-2">
                         <button class="btn btn-danger py-2 fw-bold" onclick="submitDicom('add')">
                             <i class="bi bi-cart-plus me-1"></i> Fiar (Sumar Deuda)
@@ -110,9 +168,10 @@
 
             <div class="col-md-8">
                 <div class="discord-card p-3">
-                    
+
                     <div class="position-relative mb-3">
-                        <input type="text" id="dicom-search" class="form-control ps-5" placeholder="Buscar cliente por nombre..." onkeyup="filterDicom()">
+                        <input type="text" id="dicom-search" class="form-control ps-5"
+                            placeholder="Buscar cliente por nombre..." onkeyup="filterDicom()">
                         <i class="bi bi-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
                     </div>
 
@@ -135,10 +194,12 @@
                                     <td class="text-muted small">{{ d[3] }}</td>
                                     <td class="text-muted small">{{ d[4] }}</td>
                                     <td class="text-end">
-                                        <button class="btn btn-sm btn-outline-secondary" onclick="selectClient('{{ d[1] }}')" title="Seleccionar">
+                                        <button class="btn btn-sm btn-outline-secondary"
+                                            onclick="selectClient('{{ d[1] }}')" title="Seleccionar">
                                             <i class="bi bi-pencil"></i>
                                         </button>
-                                        <button class="btn btn-sm btn-outline-danger ms-1" onclick="forgiveDebt({{ d[0] }}, '{{ d[1] }}')" title="Eliminar Registro">
+                                        <button class="btn btn-sm btn-outline-danger ms-1"
+                                            onclick="forgiveDebt({{ d[0] }}, '{{ d[1] }}')" title="Eliminar Registro">
                                             <i class="bi bi-trash"></i>
                                         </button>
                                     </td>
@@ -149,26 +210,26 @@
                     </div>
                 </div>
             </div>
-            
+
         </div>
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         const clp = new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP', minimumFractionDigits: 0 });
-        
+
         // Smart color formatting for the debt column
         document.querySelectorAll('.price-cell').forEach(td => {
             const val = parseFloat(td.getAttribute('data-value'));
             td.innerText = clp.format(val);
-            
+
             // Reversing the logic: Negative is debt (red), Positive is credit (green)
             if (val < 0) {
-                td.classList.add('text-danger'); 
+                td.classList.add('text-danger');
             } else if (val > 0) {
-                td.classList.add('text-success'); 
+                td.classList.add('text-success');
             } else {
-                td.classList.add('text-muted'); 
+                td.classList.add('text-muted');
             }
         });
 
@@ -224,44 +285,13 @@
 
         async function forgiveDebt(id, name) {
             if (!confirm(`¿Estás seguro de que quieres eliminar completamente a ${name} del registro?`)) return;
-            
+
             const res = await fetch(`/api/dicom/${id}`, { method: 'DELETE' });
             if (res.ok) window.location.reload();
         }
-
-        /* ── Theme Management ── */
-        function applyTheme(t) {
-            document.documentElement.setAttribute('data-theme', t);
-            const isDark = t === 'dark';
-            const themeIcon = document.getElementById('theme-icon');
-            const themeLabel = document.getElementById('theme-label');
-            
-            if (themeIcon) themeIcon.className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2';
-            if (themeLabel) themeLabel.innerText = isDark ? 'Modo Claro' : 'Modo Oscuro';
-            
-            localStorage.setItem('theme', t);
-        }
-
-        function toggleTheme() {
-            const current = document.documentElement.getAttribute('data-theme');
-            applyTheme(current === 'dark' ? 'light' : 'dark');
-        }
-
-        (function initTheme() {
-            const savedTheme = localStorage.getItem('theme');
-            if (savedTheme) {
-                applyTheme(savedTheme);
-            } else {
-                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                applyTheme(prefersDark ? 'dark' : 'light');
-            }
-        })();
-
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (!localStorage.getItem('theme')) {
-                applyTheme(e.matches ? 'dark' : 'light');
-            }
-        });
     </script>
+    <script src="./static/cookieStuff.js"></script>
+    <script src="./static/themeStuff.js"></script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 5dabef3..121957b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,312 +10,11 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
     <script src="https://unpkg.com/html5-qrcode"></script>
-    <style>
-        :root {
-            --bg: #ebedef;
-            --card-bg: #ffffff;
-            --text-main: #2e3338;
-            --text-muted: #4f5660;
-            --border: #e3e5e8;
-            --navbar-bg: #ffffff;
-            --input-bg: #e3e5e8;
-            --table-head: #f2f3f5;
-            --accent: #5865f2;
-            --accent-hover: #4752c4;
-            --danger: #ed4245;
-        }
-
-        [data-theme="dark"] {
-            --bg: #36393f;
-            --card-bg: #2f3136;
-            --text-main: #dcddde;
-            --text-muted: #b9bbbe;
-            --border: #202225;
-            --navbar-bg: #202225;
-            --input-bg: #202225;
-            --table-head: #292b2f;
-        }
-
-        body {
-            background: var(--bg);
-            color: var(--text-main);
-            font-family: "gg sans", "Segoe UI", sans-serif;
-            transition: background 0.2s, color 0.2s;
-        }
-
-        /* ── Navbar ── */
-        .navbar {
-            background: var(--navbar-bg) !important;
-            border-bottom: 1px solid var(--border);
-        }
-
-        .navbar-brand {
-            color: var(--text-main) !important;
-            font-weight: 700;
-        }
-
-        .nav-link,
-        .dropdown-item {
-            color: var(--text-main) !important;
-        }
-
-        .dropdown-menu {
-            background: var(--card-bg);
-            border: 1px solid var(--border);
-        }
-
-        .dropdown-item:hover {
-            background: var(--input-bg);
-        }
-
-        .dropdown-item.text-danger {
-            color: var(--danger) !important;
-        }
-
-        /* ── Cards ── */
-        .discord-card {
-            background: var(--card-bg);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        }
-
-        /* ── Inputs ── */
-        .form-control,
-        .form-control:focus {
-            background: var(--input-bg);
-            color: var(--text-main);
-            border: none;
-            box-shadow: none;
-        }
-
-        .form-control:focus {
-            outline: 2px solid var(--accent);
-        }
-
-        .form-control::placeholder {
-            color: var(--text-muted);
-        }
-
-        /* ── Buttons ── */
-        .btn-accent {
-            background: var(--accent);
-            color: #fff;
-            border: none;
-        }
-
-        .btn-accent:hover {
-            background: var(--accent-hover);
-            color: #fff;
-        }
-
-        .btn-danger-discord {
-            background: var(--danger);
-            color: #fff;
-            border: none;
-        }
-
-        .btn-danger-discord:hover {
-            background: #c23235;
-            color: #fff;
-        }
-
-        /* ── Price tag ── */
-        .price-tag {
-            font-size: 2.8rem;
-            /* Slightly larger for the wider card */
-            font-weight: 800;
-            color: var(--accent);
-            /* Optional: uses your accent color for better visibility */
-        }
-
-        /* ── Table ── */
-        .table {
-            color: var(--text-main);
-            --bs-table-color: var(--text-main);
-            --bs-table-bg: transparent;
-            --bs-table-border-color: var(--border);
-        }
-
-        /* -- Checkbox Size Fix -- */
-        #select-all {
-            transform: scale(1.3);
-            margin-top: 2px;
-        }
-
-        [data-theme="dark"] .table {
-            --bs-table-color: var(--text-main);
-            color: var(--text-main);
-        }
-
-        .table thead th {
-            background: var(--table-head);
-            color: var(--text-muted);
-            font-size: 0.72rem;
-            text-transform: uppercase;
-            border-bottom: 1px solid var(--border);
-        }
-
-        .table tbody td {
-            border-bottom: 1px solid var(--border);
-            vertical-align: middle;
-        }
-
-        /* ── Bulk bar ── */
-        .bulk-bar {
-            background: var(--accent);
-            color: #fff;
-            border-radius: 8px;
-        }
-
-        .bulk-bar .form-control {
-            width: 110px;
-            background: rgba(0, 0, 0, 0.2) !important;
-            color: #fff !important;
-            border: 1px solid rgba(255, 255, 255, 0.25) !important;
-        }
-
-        .bulk-bar .form-control::placeholder {
-            color: rgba(255, 255, 255, 0.6);
-        }
-
-        /* ── New-product prompt ── */
-        .new-product-prompt {
-            background: var(--accent);
-            color: #fff;
-            border-radius: 8px;
-        }
-
-        /* ── Product image ── */
-        #display-img {
-            width: 100%;
-            /* Allows it to fill the new width */
-            max-width: 250px;
-            /* Increased from 160px */
-            height: auto;
-            max-height: 250px;
-            /* Increased from 160px */
-            object-fit: contain;
-        }
-
-        /* ── Checkbox ── */
-        input[type="checkbox"] {
-            cursor: pointer;
-        }
-
-        /* ── Mobile: hide barcode column ── */
-        @media (max-width: 576px) {
-            .col-barcode {
-                display: none;
-            }
-
-            .btn-edit-sm,
-            .btn-del-sm {
-                padding: 4px 7px;
-                font-size: 0.75rem;
-            }
-        }
-
-        .modal-content {
-            background: var(--card-bg);
-            color: var(--text-main);
-            border: 1px solid var(--border);
-        }
-
-        .modal-header,
-        .modal-footer {
-            border-color: var(--border);
-        }
-
-        .btn-close {
-            /* Makes the X button visible in dark mode */
-            filter: var(--bs-theme-placeholder, invert(0.7) grayscale(100%) brightness(200%));
-        }
-
-        [data-theme="dark"] .btn-close {
-            filter: invert(1) grayscale(100%) brightness(200%);
-        }
-
-        /* Add this inside your <style> tag */
-        [data-theme="dark"] .text-muted {
-            color: var(--text-muted) !important;
-        }
-
-        [data-theme="dark"] .modal-body .text-muted {
-            color: #f6f6f7 !important;
-        }
-
-        .btn-close {
-            filter: none;
-        }
-
-        [data-theme="dark"] .btn-close {
-            filter: invert(1) grayscale(100%) brightness(200%);
-        }
-
-        /* Fix for the missing dropdown arrow */
-        .form-select {
-            background-color: var(--input-bg) !important;
-            color: var(--text-main) !important;
-            border: none !important;
-            /* This ensures the arrow icon is still rendered over the custom background */
-            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
-            background-repeat: no-repeat !important;
-            background-position: right 0.75rem center !important;
-            background-size: 16px 12px !important;
-        }
-
-        [data-theme="dark"] .form-select {
-            /* Lighter arrow for dark mode */
-            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dcddde' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
-        }
-    </style>
+    <link rel="stylesheet" href="./static/style.css">
 </head>
 
 <body>
-
-    <!-- ════════════════════════ NAVBAR ════════════════════════ -->
-    <nav class="navbar navbar-expand-md sticky-top px-3 mb-3">
-        <span class="navbar-brand">SekiPOS <small class="text-muted fw-normal"
-                style="font-size:0.65rem;">v1.6</small></span>
-        <div class="ms-3 gap-2 d-flex">
-            <a href="/checkout" class="btn btn-outline-primary btn-sm">
-                <i class="bi bi-cart-fill me-1"></i>Caja
-            </a>
-            <a href="/sales" class="btn btn-outline-primary btn-sm">
-                <i class="bi bi-receipt me-1"></i>Ventas
-            </a>
-            <a href="/dicom" class="btn btn-outline-danger btn-sm">
-                <i class="bi bi-journal-x me-1"></i>Dicom
-            </a>
-        </div>
-        <!-- Always-visible dropdown on the right -->
-        <div class="ms-auto">
-            <div class="dropdown">
-                <button class="btn btn-accent dropdown-toggle" type="button" data-bs-toggle="dropdown"
-                    aria-expanded="false">
-                    <i class="bi bi-person-circle me-1"></i>
-                    <span class="d-none d-sm-inline">{{ user.username }}</span>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end">
-                    <li>
-                        <button class="dropdown-item" onclick="toggleTheme()">
-                            <i class="bi bi-moon-stars me-2" id="theme-icon"></i>
-                            <span id="theme-label">Modo Oscuro</span>
-                        </button>
-                    </li>
-                    <li>
-                        <hr class="dropdown-divider" style="border-color: var(--border);">
-                    </li>
-                    <li>
-                        <a class="dropdown-item text-danger" href="/logout">
-                            <i class="bi bi-box-arrow-right me-2"></i>Salir
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
+    {% with active_page='inventory' %}{% include 'navbar.html' %}{% endwith %}
 
     <!-- ════════════════════════ MAIN ════════════════════════ -->
     <div class="container-fluid px-3">
@@ -453,9 +152,10 @@
                                     <td class="name-cell">{{ p[1] }}</td>
                                     <td>
                                         {% if p[5] == 'kg' %}
-                                            <span class="text-muted d-inline-block text-center" style="width: 45px;">-</span>
+                                        <span class="text-muted d-inline-block text-center"
+                                            style="width: 45px;">-</span>
                                         {% else %}
-                                            {{ p[4] | int }} <small class="text-muted">Uni</small>
+                                        {{ p[4] | int }} <small class="text-muted">Uni</small>
                                         {% endif %}
                                     </td>
                                     <td class="price-cell" data-value="{{ p[2] }}"></td>
@@ -597,20 +297,6 @@
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        /* ── Theme ── */
-        function applyTheme(t) {
-            document.documentElement.setAttribute('data-theme', t);
-            const isDark = t === 'dark';
-            document.getElementById('theme-icon').className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2';
-            document.getElementById('theme-label').innerText = isDark ? 'Modo Claro' : 'Modo Oscuro';
-        }
-        function toggleTheme() {
-            const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
-            localStorage.setItem('theme', next);
-            applyTheme(next);
-        }
-        applyTheme(localStorage.getItem('theme') || 'light');
-
         /* ── Socket.IO ── */
         const socket = io();
         const clp = new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP', minimumFractionDigits: 0 });
@@ -1109,73 +795,11 @@
             }
         }
 
-        /* ── Theme Management ── */
-
-        // Helper to set a cookie
-        function setCookie(name, value, days = 365) {
-            const d = new Date();
-            d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
-            let expires = "expires=" + d.toUTCString();
-            document.cookie = name + "=" + value + ";" + expires + ";path=/;SameSite=Lax";
-        }
-
-        // Helper to get a cookie
-        function getCookie(name) {
-            let nameEQ = name + "=";
-            let ca = document.cookie.split(';');
-            for (let i = 0; i < ca.length; i++) {
-                let c = ca[i];
-                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
-                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
-            }
-            return null;
-        }
-
-        // A single, clean theme manager
-        function applyTheme(t) {
-            document.documentElement.setAttribute('data-theme', t);
-            const isDark = t === 'dark';
-
-            // Update UI elements if they exist
-            const themeIcon = document.getElementById('theme-icon');
-            const themeLabel = document.getElementById('theme-label');
-            if (themeIcon) themeIcon.className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2';
-            if (themeLabel) themeLabel.innerText = isDark ? 'Modo Claro' : 'Modo Oscuro';
-
-            // Save to localStorage (much more reliable than cookies for this)
-            localStorage.setItem('theme', t);
-        }
-
-        function toggleTheme() {
-            const current = document.documentElement.getAttribute('data-theme');
-            const next = current === 'dark' ? 'light' : 'dark';
-            applyTheme(next);
-        }
-
-        // Run this immediately on load
-        (function initTheme() {
-            const savedTheme = localStorage.getItem('theme');
-            if (savedTheme) {
-                applyTheme(savedTheme);
-            } else {
-                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                applyTheme(prefersDark ? 'dark' : 'light');
-            }
-        })();
-
-        // Listen for OS theme changes in real-time if no cookie is set
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (!getCookie('theme')) {
-                applyTheme(e.matches ? 'dark' : 'light');
-            }
-        });
-
-
         // Function to toggle stock state
         function toggleStockInput() {
             const unitSelect = document.getElementById('form-unit-type');
             const stockInput = document.getElementById('form-stock');
-            
+
             if (unitSelect.value === 'kg') {
                 stockInput.classList.add('d-none'); // Poof.
                 stockInput.disabled = true;         // Prevent form submission errors
@@ -1189,8 +813,9 @@
         // Listen for manual dropdown changes
         document.getElementById('form-unit-type').addEventListener('change', toggleStockInput);
 
-        initTheme();
     </script>
+    <script src="./static/cookieStuff.js"></script>
+    <script src="./static/themeStuff.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/templates/navbar.html b/templates/navbar.html
new file mode 100644
index 0000000..8971264
--- /dev/null
+++ b/templates/navbar.html
@@ -0,0 +1,56 @@
+<nav class="navbar navbar-expand-md sticky-top px-3 mb-3">
+    <span class="navbar-brand">
+        SekiPOS
+        {% if active_page == 'checkout' %}
+        <small class="text-muted fw-normal" style="font-size:0.65rem;">v1.6</small>
+        {% elif active_page == 'sales' %}
+        <small class="text-muted fw-normal" style="font-size:0.65rem;">v1.6</small>
+        {% elif active_page == 'dicom' %}
+        <small class="text-muted fw-normal" style="font-size:0.65rem;">v1.6</small>
+        {% else %}
+        <small class="text-muted fw-normal" style="font-size:0.65rem;">v1.6</small>
+        {% endif %}
+    </span>
+
+    <div class="ms-3 gap-2 d-flex">
+        <a href="/" class="btn btn-sm {{ 'btn-primary' if active_page == 'inventory' else 'btn-outline-primary' }}">
+            <i class="bi bi-box-seam me-1"></i>Inventario
+        </a>
+        <a href="/checkout"
+            class="btn btn-sm {{ 'btn-primary' if active_page == 'checkout' else 'btn-outline-primary' }}">
+            <i class="bi bi-cart-fill me-1"></i>Caja
+        </a>
+        <a href="/sales" class="btn btn-sm {{ 'btn-primary' if active_page == 'sales' else 'btn-outline-primary' }}">
+            <i class="bi bi-receipt me-1"></i>Ventas
+        </a>
+        <a href="/dicom" class="btn btn-sm {{ 'btn-danger' if active_page == 'dicom' else 'btn-outline-danger' }}">
+            <i class="bi bi-journal-x me-1"></i>Dicom
+        </a>
+    </div>
+
+    <div class="ms-auto">
+        <div class="dropdown">
+            <button class="btn btn-accent dropdown-toggle" type="button" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                <i class="bi bi-person-circle me-1"></i>
+                <span class="d-none d-sm-inline">{{ user.username }}</span>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end shadow">
+                <li>
+                    <button class="dropdown-item" onclick="toggleTheme()">
+                        <i class="bi bi-moon-stars me-2" id="theme-icon"></i>
+                        <span id="theme-label">Modo Oscuro</span>
+                    </button>
+                </li>
+                <li>
+                    <hr class="dropdown-divider" style="border-color: var(--border);">
+                </li>
+                <li>
+                    <a class="dropdown-item text-danger" href="/logout">
+                        <i class="bi bi-box-arrow-right me-2"></i>Salir
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/templates/sales.html b/templates/sales.html
index 3a6726f..023d157 100644
--- a/templates/sales.html
+++ b/templates/sales.html
@@ -1,6 +1,6 @@
-
 <!DOCTYPE html>
 <html lang="es" data-theme="light">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,21 +11,60 @@
     <style>
         /* Reusing your standard theme colors */
         :root {
-            --bg: #ebedef; --card-bg: #ffffff; --text-main: #2e3338;
-            --text-muted: #4f5660; --border: #e3e5e8; --navbar-bg: #ffffff;
-            --accent: #5865f2; --accent-hover: #4752c4; --input-bg: #e3e5e8;
+            --bg: #ebedef;
+            --card-bg: #ffffff;
+            --text-main: #2e3338;
+            --text-muted: #4f5660;
+            --border: #e3e5e8;
+            --navbar-bg: #ffffff;
+            --accent: #5865f2;
+            --accent-hover: #4752c4;
+            --input-bg: #e3e5e8;
         }
+
         [data-theme="dark"] {
-            --bg: #36393f; --card-bg: #2f3136; --text-main: #dcddde;
-            --text-muted: #b9bbbe; --border: #202225; --navbar-bg: #202225;
+            --bg: #36393f;
+            --card-bg: #2f3136;
+            --text-main: #dcddde;
+            --text-muted: #b9bbbe;
+            --border: #202225;
+            --navbar-bg: #202225;
             --input-bg: #202225;
         }
-        body { background: var(--bg); color: var(--text-main); font-family: "gg sans", sans-serif; min-height: 100vh; }
-        .navbar { background: var(--navbar-bg) !important; border-bottom: 1px solid var(--border); }
-        .navbar-brand, .nav-link, .dropdown-item { color: var(--text-main) !important; }
-        .dropdown-menu { background: var(--card-bg); border: 1px solid var(--border); }
-        .dropdown-item:hover { background: var(--input-bg); }
-        .discord-card, .modal-content { background: var(--card-bg) !important; border: 1px solid var(--border); border-radius: 8px; }
+
+        body {
+            background: var(--bg);
+            color: var(--text-main);
+            font-family: "gg sans", sans-serif;
+            min-height: 100vh;
+        }
+
+        .navbar {
+            background: var(--navbar-bg) !important;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .navbar-brand,
+        .nav-link,
+        .dropdown-item {
+            color: var(--text-main) !important;
+        }
+
+        .dropdown-menu {
+            background: var(--card-bg);
+            border: 1px solid var(--border);
+        }
+
+        .dropdown-item:hover {
+            background: var(--input-bg);
+        }
+
+        .discord-card,
+        .modal-content {
+            background: var(--card-bg) !important;
+            border: 1px solid var(--border);
+            border-radius: 8px;
+        }
 
         .navbar-brand {
             color: var(--text-main) !important;
@@ -33,63 +72,70 @@
         }
 
         /* --- Tables --- */
-        .table { 
-            --bs-table-bg: transparent; 
-            --bs-table-color: var(--text-main); /* This forces Bootstrap to obey */
-            --bs-table-border-color: var(--border); 
+        .table {
+            --bs-table-bg: transparent;
+            --bs-table-color: var(--text-main);
+            /* This forces Bootstrap to obey */
+            --bs-table-border-color: var(--border);
             --bs-table-hover-color: var(--text-main);
             --bs-table-hover-bg: var(--input-bg);
-            color: var(--text-main) !important; 
+            color: var(--text-main) !important;
         }
-        .table thead th { 
-            background: var(--bg); 
-            color: var(--text-muted); 
-            font-size: 0.75rem; 
-            text-transform: uppercase; 
-            border-bottom: 1px solid var(--border); 
+
+        .table thead th {
+            background: var(--bg);
+            color: var(--text-muted);
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            border-bottom: 1px solid var(--border);
         }
-        .table td, .table th { 
-            border-bottom: 1px solid var(--border); 
-            vertical-align: middle; 
-            color: var(--text-main); 
+
+        .table td,
+        .table th {
+            border-bottom: 1px solid var(--border);
+            vertical-align: middle;
+            color: var(--text-main);
         }
-        
+
         /* --- Buttons --- */
-        .btn-accent { background: var(--accent); color: #fff; border: none; }
-        .btn-accent:hover { background: var(--accent-hover); color: #fff; }
-        
+        .btn-accent {
+            background: var(--accent);
+            color: #fff;
+            border: none;
+        }
+
+        .btn-accent:hover {
+            background: var(--accent-hover);
+            color: #fff;
+        }
+
         /* --- Dark Mode Overrides --- */
-        [data-theme="dark"] .modal-content, 
-        [data-theme="dark"] .modal-body { color: var(--text-main); }
-        [data-theme="dark"] .table { --bs-table-hover-bg: rgba(255, 255, 255, 0.05); }
-        [data-theme="dark"] .table thead th { background: #292b2f; color: var(--text-muted); }
-        [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
-        [data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
+        [data-theme="dark"] .modal-content,
+        [data-theme="dark"] .modal-body {
+            color: var(--text-main);
+        }
+
+        [data-theme="dark"] .table {
+            --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
+        }
+
+        [data-theme="dark"] .table thead th {
+            background: #292b2f;
+            color: var(--text-muted);
+        }
+
+        [data-theme="dark"] .btn-close {
+            filter: invert(1) grayscale(100%) brightness(200%);
+        }
+
+        [data-theme="dark"] .text-muted {
+            color: var(--text-muted) !important;
+        }
     </style>
 </head>
+
 <body>
-    <nav class="navbar navbar-expand-md sticky-top px-3 mb-3">
-        <span class="navbar-brand">SekiPOS <small class="text-muted fw-normal" style="font-size:0.65rem;">Ventas</small></span>
-        <div class="ms-3 gap-2 d-flex">
-            <a href="/" class="btn btn-outline-primary btn-sm"><i class="bi bi-box-seam me-1"></i>Inventario</a>
-            <a href="/checkout" class="btn btn-outline-primary btn-sm"><i class="bi bi-cart-fill me-1"></i>Caja</a>
-            <a href="/dicom" class="btn btn-outline-danger btn-sm">
-                <i class="bi bi-journal-x me-1"></i>Dicom
-            </a>
-        </div>
-        <div class="ms-auto">
-            <div class="dropdown">
-                <button class="btn btn-accent dropdown-toggle" type="button" data-bs-toggle="dropdown">
-                    <i class="bi bi-person-circle me-1"></i> <span class="d-none d-sm-inline">{{ user.username }}</span>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end shadow">
-                    <li><button class="dropdown-item" onclick="toggleTheme()"><i class="bi bi-moon-stars me-2" id="theme-icon"></i><span id="theme-label">Modo Oscuro</span></button></li>
-                    <li><hr class="dropdown-divider" style="border-color: var(--border);"></li>
-                    <li><a class="dropdown-item text-danger" href="/logout"><i class="bi bi-box-arrow-right me-2"></i>Salir</a></li>
-                </ul>
-            </div>
-        </div>
-    </nav>
+    {% with active_page='sales' %}{% include 'navbar.html' %}{% endwith %}
 
     <div class="container-fluid px-3">
 
@@ -99,19 +145,24 @@
                     <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">
                         {% if selected_date %}Día Seleccionado{% else %}Ventas de Hoy{% endif %}
                     </h6>
-                    <h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;" data-value="{{ stats.daily }}"></h2>
+                    <h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;"
+                        data-value="{{ stats.daily }}"></h2>
                 </div>
             </div>
             <div class="col-12 col-md-4">
                 <div class="discord-card p-3 shadow-sm text-center">
-                    <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Últimos 7 Días</h6>
-                    <h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;" data-value="{{ stats.week }}"></h2>
+                    <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Últimos 7
+                        Días</h6>
+                    <h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;"
+                        data-value="{{ stats.week }}"></h2>
                 </div>
             </div>
             <div class="col-12 col-md-4">
                 <div class="discord-card p-3 shadow-sm text-center">
-                    <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Este Mes</h6>
-                    <h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;" data-value="{{ stats.month }}"></h2>
+                    <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Este Mes
+                    </h6>
+                    <h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;"
+                        data-value="{{ stats.month }}"></h2>
                 </div>
             </div>
         </div>
@@ -120,12 +171,14 @@
             <div class="d-flex justify-content-between align-items-center mb-3">
                 <h4 class="mb-0"><i class="bi bi-receipt-cutoff me-2"></i>Historial</h4>
                 <div class="d-flex align-items-center gap-2">
-                    <label for="date-filter" class="form-label mb-0 text-muted small d-none d-sm-block">Filtrar Día:</label>
-                    <input type="date" id="date-filter" class="form-control form-control-sm" 
-                           style="background: var(--input-bg); color: var(--text-main); border-color: var(--border);"
-                           value="{{ selected_date or '' }}" onchange="filterByDate(this.value)">
+                    <label for="date-filter" class="form-label mb-0 text-muted small d-none d-sm-block">Filtrar
+                        Día:</label>
+                    <input type="date" id="date-filter" class="form-control form-control-sm"
+                        style="background: var(--input-bg); color: var(--text-main); border-color: var(--border);"
+                        value="{{ selected_date or '' }}" onchange="filterByDate(this.value)">
                     {% if selected_date %}
-                    <a href="/sales" class="btn btn-sm btn-outline-secondary" title="Limpiar filtro"><i class="bi bi-x-lg"></i></a>
+                    <a href="/sales" class="btn btn-sm btn-outline-secondary" title="Limpiar filtro"><i
+                            class="bi bi-x-lg"></i></a>
                     {% endif %}
                 </div>
             </div>
@@ -148,7 +201,8 @@
                             <td class="text-capitalize">{{ s[3] }}</td>
                             <td class="price-cell fw-bold" data-value="{{ s[2] }}"></td>
                             <td>
-                                <button class="btn btn-sm btn-outline-secondary" onclick="viewSale({{ s[0] }}, '{{ s[1] }}', {{ s[2] }})">
+                                <button class="btn btn-sm btn-outline-secondary"
+                                    onclick="viewSale({{ s[0] }}, '{{ s[1] }}', {{ s[2] }})">
                                     <i class="bi bi-eye"></i> Ver Detalle
                                 </button>
                             </td>
@@ -164,7 +218,8 @@
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title">Detalle de Venta <span id="modal-ticket-id" class="text-muted small"></span></h5>
+                    <h5 class="modal-title">Detalle de Venta <span id="modal-ticket-id" class="text-muted small"></span>
+                    </h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body">
@@ -178,7 +233,7 @@
                             </tr>
                         </thead>
                         <tbody id="receipt-items">
-                            </tbody>
+                        </tbody>
                         <tfoot>
                             <tr>
                                 <th colspan="2" class="text-end">TOTAL:</th>
@@ -188,7 +243,7 @@
                     </table>
                 </div>
                 <div class="modal-body">
-                    </div>
+                </div>
                 <div class="modal-footer d-flex justify-content-between border-0 pt-0">
                     <button class="btn btn-outline-danger btn-sm" id="btn-reverse-sale">
                         <i class="bi bi-arrow-counterclockwise me-1"></i>Anular Venta
@@ -208,8 +263,9 @@
                 <div class="modal-body text-center pt-0 pb-4">
                     <i class="bi bi-exclamation-triangle-fill text-danger mb-3" style="font-size: 3rem;"></i>
                     <h4 class="mb-3">¿Anular Venta #<span id="reverse-modal-id"></span>?</h4>
-                    <p class="text-muted small px-3">Los productos regresarán automáticamente al inventario y el ticket será eliminado permanentemente.</p>
-                    
+                    <p class="text-muted small px-3">Los productos regresarán automáticamente al inventario y el ticket
+                        será eliminado permanentemente.</p>
+
                     <div class="d-flex gap-2 justify-content-center mt-4 px-3">
                         <button class="btn btn-secondary w-50" data-bs-dismiss="modal">Cancelar</button>
                         <button class="btn btn-danger w-50" onclick="executeReverseSale()">Sí, Anular</button>
@@ -228,9 +284,9 @@
         document.querySelectorAll('.utc-date').forEach(el => {
             const date = new Date(el.innerText + " UTC");
             if (!isNaN(date)) {
-                el.innerText = date.toLocaleString('es-CL', { 
-                    year: 'numeric', month: '2-digit', day: '2-digit', 
-                    hour: '2-digit', minute:'2-digit' 
+                el.innerText = date.toLocaleString('es-CL', {
+                    year: 'numeric', month: '2-digit', day: '2-digit',
+                    hour: '2-digit', minute: '2-digit'
                 });
             }
         });
@@ -243,13 +299,13 @@
         async function viewSale(id, rawDate, total) {
             document.getElementById('modal-ticket-id').innerText = `#${id}`;
             document.getElementById('modal-total').innerText = clp.format(total);
-            
+
             const localDate = new Date(rawDate + " UTC").toLocaleString('es-CL');
             document.getElementById('modal-date').innerText = localDate !== "Invalid Date" ? localDate : rawDate;
 
             const tbody = document.getElementById('receipt-items');
             tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">Cargando...</td></tr>';
-            
+
             // Attach the ID to the delete button
             document.getElementById('btn-reverse-sale').setAttribute('onclick', `reverseSale(${id})`);
 
@@ -259,7 +315,7 @@
             try {
                 const res = await fetch(`/api/sale/${id}`);
                 const items = await res.json();
-                
+
                 tbody.innerHTML = items.map(item => `
                     <tr>
                         <td>
@@ -286,10 +342,10 @@
         function reverseSale(id) {
             saleToReverse = id;
             document.getElementById('reverse-modal-id').innerText = id;
-            
+
             // Hide the receipt modal so we don't have overlapping popups
             bootstrap.Modal.getInstance(document.getElementById('receiptModal')).hide();
-            
+
             // Show the new confirmation modal
             const confirmModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('reverseConfirmModal'));
             confirmModal.show();
@@ -297,10 +353,10 @@
 
         async function executeReverseSale() {
             if (!saleToReverse) return;
-            
+
             try {
                 const res = await fetch(`/api/sale/${saleToReverse}`, { method: 'DELETE' });
-                
+
                 if (res.ok) {
                     window.location.reload(); // Refresh the dashboard
                 } else {
@@ -311,26 +367,10 @@
                 console.error(err);
                 alert("Error de conexión con el servidor.");
             }
-        }       
-
-        /* Theme Management */
-        function applyTheme(t) {
-            document.documentElement.setAttribute('data-theme', t);
-            const isDark = t === 'dark';
-            const icon = document.getElementById('theme-icon');
-            const label = document.getElementById('theme-label');
-            if (icon) icon.className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2';
-            if (label) label.innerText = isDark ? 'Modo Claro' : 'Modo Oscuro';
-            localStorage.setItem('theme', t);
         }
-
-        function toggleTheme() {
-            applyTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
-        }
-
-        (function initTheme() {
-            applyTheme(localStorage.getItem('theme') || 'light');
-        })();
     </script>
+    <script src="./static/cookieStuff.js"></script>
+    <script src="./static/themeStuff.js"></script>
 </body>
+
 </html>
\ No newline at end of file