diff --git a/ads.php b/ads.php
index 70c205b..f5f533c 100644
--- a/ads.php
+++ b/ads.php
@@ -9,7 +9,6 @@ $ads = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
 // Get current outlet (default to 1 if not specified)
 $outlet_id = isset($_GET['outlet_id']) ? (int)$_GET['outlet_id'] : 1;
-$debug = isset($_GET['debug']) ? true : false;
 
 // Fetch company settings for branding
 $stmt = $pdo->query("SELECT * FROM company_settings LIMIT 1");
@@ -21,7 +20,7 @@ $companyName = $company['company_name'] ?? 'Foody';
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Now Serving & Ads - <?= htmlspecialchars($companyName) ?></title>
+    <title>Now Serving & Promo - <?= htmlspecialchars($companyName) ?></title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -33,304 +32,218 @@ $companyName = $company['company_name'] ?? 'Foody';
             --ready-color: #198754;
             --preparing-color: #0dcaf0;
             --bg-dark: #121212;
+            --card-bg: #1a1a1a;
         }
         body { 
             font-family: 'Inter', sans-serif; 
             background-color: var(--bg-dark); 
             color: white;
             overflow: hidden;
-            height: 100vh !important;
-            width: 100vw !important;
+            height: 100vh;
+            width: 100vw;
             margin: 0;
             padding: 0;
         }
         .main-container {
             display: flex;
-            height: 100vh !important;
-            width: 100vw !important;
-            transition: all 0.5s ease;
+            height: 100vh;
+            width: 100vw;
+            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
-            border: <?= $debug ? '10px solid orange' : 'none' ?>;
             box-sizing: border-box;
         }
         .serving-board {
             flex: 0 0 35%;
-            background-color: #1a1a1a;
+            background-color: var(--card-bg);
             border-right: 2px solid #333;
             display: flex;
             flex-direction: column;
-            padding: 2rem;
-            transition: all 0.5s ease;
+            padding: 2.5rem;
+            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
             z-index: 20;
             overflow: hidden;
         }
-        .ads-slider {
+        .promo-slider-container {
             flex: 1;
             position: relative;
-            background-color: <?= $debug ? '#222' : '#000' ?>;
+            background-color: #000;
             overflow: hidden;
-            height: 100vh !important;
+            height: 100vh;
             z-index: 10;
-            border: <?= $debug ? '10px solid lime' : 'none' ?>;
             box-sizing: border-box;
+            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
         }
         
-        #adCarousel, .carousel-inner {
+        #promoCarousel, .carousel-inner, .carousel-item {
             height: 100% !important;
             width: 100% !important;
             position: relative;
             margin: 0 !important;
             padding: 0 !important;
-        }
-        
-        .carousel-item {
-            height: 100% !important;
-            width: 100% !important;
-            background-color: <?= $debug ? '#440044' : '#000' ?>;
-        }
-
-        .carousel-item.active {
-            display: block !important; /* Ensure active item is visible */
-        }
-        
-        .carousel-item img {
-            display: block !important;
-            width: 100% !important;
-            height: 100% !important;
-            max-width: none !important;
-            max-height: none !important;
-            object-fit: contain !important;
-            opacity: 1 !important;
-            visibility: visible !important;
-            border: <?= $debug ? '8px solid cyan' : 'none' ?>;
             box-sizing: border-box;
-            background-color: <?= $debug ? 'deeppink' : 'transparent' ?>;
-            position: relative;
-            z-index: 50;
         }
         
-        /* Fullscreen Ads Class */
-        .fullscreen-ads .serving-board { 
+        .promo-image-element {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background-color: #000;
+        }
+        
+        /* Fullscreen Promo View */
+        .fullscreen-promo .serving-board { 
             flex: 0 0 0% !important;
             width: 0 !important;
             padding: 0 !important;
             margin: 0 !important;
             border: none !important;
-            overflow: hidden !important;
             opacity: 0 !important;
-        }
-        .fullscreen-ads .ads-slider { flex: 0 0 100% !important; width: 100% !important; }
-
-        /* Debug styling */
-        .debug-panel {
-            position: absolute;
-            top: 20px;
-            left: 20px;
-            background: rgba(255,0,0,0.95);
-            color: white;
-            padding: 15px;
-            font-family: monospace;
-            font-size: 14px;
-            z-index: 999999;
-            border-radius: 8px;
-            max-width: 500px;
-            box-shadow: 0 0 20px rgba(0,0,0,0.5);
-        }
-        #on-screen-console {
-            position: absolute;
-            bottom: 20px;
-            left: 20px;
-            width: 550px;
-            max-height: 400px;
-            background: rgba(0,0,0,0.95);
-            color: #0f0;
-            font-size: 13px;
-            padding: 15px;
-            overflow-y: auto;
-            z-index: 999999;
-            border: 3px solid #0f0;
-            display: <?= $debug ? 'block' : 'none' ?>;
-        }
-        .debug-marker {
-            position: absolute;
-            top: 40px;
-            right: 40px;
-            font-size: 4rem;
-            font-weight: 900;
-            color: #fff;
-            z-index: 1000;
-            background: rgba(0,0,0,0.7);
-            padding: 20px;
             pointer-events: none;
-            border: 4px solid white;
         }
+        .fullscreen-promo .promo-slider-container { 
+            flex: 0 0 100% !important; 
+            width: 100% !important; 
+        }
+
+        /* Order Status Styling */
+        .board-header { margin-bottom: 2.5rem; }
+        .board-title { font-weight: 800; font-size: 2.5rem; margin-bottom: 0.5rem; }
+        .section-title { font-weight: 700; font-size: 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 10px; }
+        .order-grid { display: flex; flex-wrap: wrap; gap: 12px; }
+        .order-number { 
+            font-size: 2.5rem; 
+            font-weight: 800; 
+            padding: 12px 24px; 
+            border-radius: 12px; 
+            min-width: 100px; 
+            text-align: center;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+            animation: fadeIn 0.3s ease-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: scale(0.9); }
+            to { opacity: 1; transform: scale(1); }
+        }
+        .empty-msg { font-style: italic; color: #555; }
     </style>
 </head>
 <body class="split-view">
 
-<?php if ($debug): ?>
-<div class="debug-panel">
-    <strong>STRICT DEBUG PANEL</strong><br>
-    Ads Found: <?= count($ads) ?><br>
-    Viewport: <span id="vp-info">?</span><br>
-    <hr>
-    <div class="d-flex flex-wrap gap-1">
-        <button onclick="checkAllImages()" class="btn btn-warning btn-sm">FORCE DIMENSION CHECK</button>
-        <button onclick="location.href='?'" class="btn btn-light btn-sm">Exit Debug</button>
-        <button onclick="location.reload()" class="btn btn-info btn-sm">Reload</button>
-    </div>
-</div>
-<div id="on-screen-console"></div>
-<?php endif; ?>
-
 <div class="main-container" id="main-view">
     <div class="serving-board">
         <div class="board-header">
             <h1 class="board-title">Order Status</h1>
-            <p class="text-muted"><?= htmlspecialchars($companyName) ?> #<?= $outlet_id ?></p>
+            <p class="text-muted"><?= htmlspecialchars($companyName) ?> • Outlet #<?= $outlet_id ?></p>
         </div>
+        
         <div class="mb-5">
-            <h2 class="section-title text-success"><i class="bi bi-bell-fill"></i> Ready</h2>
-            <div id="ready-orders" class="order-grid"><div class="empty-msg">...</div></div>
+            <h2 class="section-title text-success"><i class="bi bi-check-circle-fill"></i> Ready</h2>
+            <div id="ready-orders" class="order-grid"><div class="empty-msg">Waiting for orders...</div></div>
         </div>
+        
         <div>
-            <h2 class="section-title text-info"><i class="bi bi-hourglass-split"></i> Preparing</h2>
-            <div id="preparing-orders" class="order-grid"><div class="empty-msg">...</div></div>
+            <h2 class="section-title text-info"><i class="bi bi-clock-history"></i> Preparing</h2>
+            <div id="preparing-orders" class="order-grid"><div class="empty-msg">No active orders</div></div>
+        </div>
+        
+        <div class="mt-auto pt-4 border-top border-dark text-center text-muted">
+            <h3 id="clock" class="mb-0 fw-bold"></h3>
         </div>
-        <div class="mt-auto pt-4 border-top border-dark text-center text-muted"><small id="clock"></small></div>
     </div>
 
-    <div class="ads-slider">
+    <div class="promo-slider-container">
         <?php if (!empty($ads)): ?>
-            <div id="adCarousel" class="carousel slide" data-bs-ride="carousel">
+            <div id="promoCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="8000">
                 <div class="carousel-inner">
                     <?php foreach ($ads as $index => $ad): ?>
-                        <div class="carousel-item <?= $index === 0 ? 'active' : '' ?>" data-index="<?= $index ?>">
-                            <?php if ($debug): ?>
-                                <div class="debug-marker">SLIDE <?= $index ?></div>
-                            <?php endif; ?>
-                            <img src="<?= htmlspecialchars($ad['image_path']) ?>?v=<?= time() ?>" 
-                                 class="ad-image"
-                                 onload="imgLog(<?= $index ?>, this, 'OK')"
-                                 onerror="imgLog(<?= $index ?>, this, 'FAIL')">
+                        <div class="carousel-item <?= $index === 0 ? 'active' : '' ?>">
+                            <img src="<?= htmlspecialchars($ad['image_path']) ?>" 
+                                 class="promo-image-element" 
+                                 alt="Promotion">
                         </div>
                     <?php endforeach; ?>
                 </div>
             </div>
         <?php else: ?>
-            <div class="h-100 d-flex align-items-center justify-content-center">No Ads Found</div>
+            <div class="h-100 d-flex align-items-center justify-content-center text-muted">
+                <div class="text-center">
+                    <i class="bi bi-image-fill display-1 opacity-25"></i>
+                    <p class="mt-3">No active promotions</p>
+                </div>
+            </div>
         <?php endif; ?>
     </div>
 </div>
 
-<button id="toggle-view" class="btn btn-dark btn-sm rounded-circle shadow" style="position:fixed; bottom:20px; right:20px; z-index:10000; opacity:0.5;">
-    <i class="bi bi-fullscreen"></i>
+<button id="toggle-view" class="btn btn-dark btn-lg rounded-circle shadow" style="position:fixed; bottom:30px; right:30px; z-index:10000; opacity:0.6; width:60px; height:60px; display:flex; align-items:center; justify-content:center;">
+    <i class="bi bi-arrows-fullscreen"></i>
 </button>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 <script>
-function imgLog(idx, el, status) {
-    if (status === 'OK') {
-        // Log immediately
-        console.log(`IMG ${idx}: LOADED (${el.naturalWidth}x${el.naturalHeight})`);
-        
-        // Log again after a delay to catch rendered dimensions
-        setTimeout(() => {
-            console.log(`IMG ${idx} RENDERED SIZE: ${el.clientWidth}x${el.clientHeight}`);
-            if (el.clientWidth === 0 || el.clientHeight === 0) {
-                console.error(`CRITICAL: IMG ${idx} has ZERO rendered dimensions!`);
-            }
-        }, 1000);
-    } else {
-        console.error(`IMG ${idx}: FAILED TO LOAD - check path: ${el.src}`);
-        el.src = 'https://via.placeholder.com/1920x1080/cc0000/FFFFFF?text=ERROR+LOADING+IMAGE+'+idx;
-    }
-}
-
-function checkAllImages() {
-    console.log('--- MANUAL DIMENSION CHECK ---');
-    document.querySelectorAll('.ad-image').forEach((img, idx) => {
-        const parent = img.closest('.carousel-item');
-        const isActive = parent.classList.contains('active');
-        console.log(`[${idx}] Active: ${isActive} | Natural: ${img.naturalWidth}x${img.naturalHeight} | Rendered: ${img.clientWidth}x${img.clientHeight}`);
-    });
-}
-
-function toggleTest() {
-    document.body.classList.toggle('fullscreen-ads');
-    console.log('View Toggled');
-}
-
-// Debugging logic
-<?php if ($debug): ?>
-(function() {
-    const consoleDiv = document.getElementById('on-screen-console');
-    const originalLog = console.log;
-    const originalError = console.error;
-    
-    function logToScreen(msg, color = '#0f0') {
-        const div = document.createElement('div');
-        div.style.marginBottom = '4px';
-        div.style.color = color;
-        div.textContent = '[' + new Date().toLocaleTimeString() + '] ' + msg;
-        consoleDiv.appendChild(div);
-        consoleDiv.scrollTop = consoleDiv.scrollHeight;
-    }
-    
-    console.log = function() {
-        originalLog.apply(console, arguments);
-        logToScreen(Array.from(arguments).join(' '), '#0f0');
-    };
-    console.error = function() {
-        originalError.apply(console, arguments);
-        logToScreen(Array.from(arguments).join(' '), '#f55');
-    };
-
-    window.addEventListener('load', () => {
-        document.getElementById('vp-info').textContent = window.innerWidth + 'x' + window.innerHeight;
-        console.log('Window Load Complete');
-        const slider = document.querySelector('.ads-slider');
-        console.log('Slider Container Viewport Size: ' + slider.clientWidth + 'x' + slider.clientHeight);
-        
-        // Auto check after 2 seconds
-        setTimeout(checkAllImages, 2000);
-    });
-})();
-<?php endif; ?>
-
 document.addEventListener('DOMContentLoaded', function() {
-    const el = document.querySelector('#adCarousel');
+    // Initialize Carousel
+    const el = document.querySelector('#promoCarousel');
     if (el) {
-        new bootstrap.Carousel(el, { interval: 5000, ride: 'carousel', pause: false });
-        console.log('Bootstrap Carousel Initialized');
+        new bootstrap.Carousel(el, { 
+            interval: 8000, 
+            ride: 'carousel', 
+            pause: false 
+        });
     }
+
+    // Toggle View Functionality
+    const toggleBtn = document.getElementById('toggle-view');
+    const mainView = document.getElementById('main-view');
+    const toggleIcon = toggleBtn.querySelector('i');
+
+    toggleBtn.addEventListener('click', () => {
+        document.body.classList.toggle('fullscreen-promo');
+        if (document.body.classList.contains('fullscreen-promo')) {
+            toggleIcon.className = 'bi bi-fullscreen-exit';
+        } else {
+            toggleIcon.className = 'bi bi-arrows-fullscreen';
+        }
+    });
+
+    // Fetch Orders Logic
+    async function fetchOrders() {
+        try {
+            const res = await fetch('api/kitchen.php?outlet_id=<?= $outlet_id ?>');
+            if (!res.ok) throw new Error('API Error');
+            const orders = await res.json();
+            
+            const rContainer = document.getElementById('ready-orders');
+            const pContainer = document.getElementById('preparing-orders');
+            
+            const ready = orders.filter(o => o.status === 'ready');
+            const prep = orders.filter(o => o.status === 'preparing');
+            
+            rContainer.innerHTML = ready.length ? ready.map(o => 
+                `<div class="order-number" style="background:var(--ready-color); color:white;">${o.id}</div>`
+            ).join('') : '<div class="empty-msg">Waiting for orders...</div>';
+            
+            pContainer.innerHTML = prep.length ? prep.map(o => 
+                `<div class="order-number" style="background:var(--preparing-color); color:black;">${o.id}</div>`
+            ).join('') : '<div class="empty-msg">No active orders</div>';
+            
+        } catch(e) {
+            console.error('Fetch Orders Failed:', e);
+        }
+    }
+
+    setInterval(fetchOrders, 5000);
+    fetchOrders();
+
+    // Clock Logic
+    setInterval(() => {
+        const clock = document.getElementById('clock');
+        if (clock) {
+            clock.textContent = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+        }
+    }, 1000);
 });
-
-document.getElementById('toggle-view').addEventListener('click', toggleTest);
-
-// Orders polling
-async function fetchOrders() {
-    try {
-        const res = await fetch('api/kitchen.php?outlet_id=<?= $outlet_id ?>');
-        if (!res.ok) throw new Error('API Error');
-        const orders = await res.json();
-        const r = document.getElementById('ready-orders');
-        const p = document.getElementById('preparing-orders');
-        const ready = orders.filter(o => o.status === 'ready');
-        const prep = orders.filter(o => o.status === 'preparing');
-        r.innerHTML = ready.length ? ready.map(o => `<div class="order-number order-ready" style="background:#198754; color:white; padding:10px; margin:5px; border-radius:5px; display:inline-block; font-size:2rem; font-weight:bold;">${o.id}</div>`).join('') : '<div class="text-muted">No orders ready</div>';
-        p.innerHTML = prep.length ? prep.map(o => `<div class="order-number order-preparing" style="background:#0dcaf0; color:black; padding:10px; margin:5px; border-radius:5px; display:inline-block; font-size:2rem; font-weight:bold;">${o.id}</div>`).join('') : '<div class="text-muted">No orders preparing</div>';
-    } catch(e) {
-        if (typeof console.error === 'function') console.error('Fetch Orders Failed: ' + e.message);
-    }
-}
-setInterval(fetchOrders, 5000);
-fetchOrders();
-
-setInterval(() => {
-    const clock = document.getElementById('clock');
-    if (clock) clock.textContent = new Date().toLocaleTimeString();
-}, 1000);
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
