diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..d15692f
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,150 @@
+
+/* Import Google Font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+    --primary-color: #4F46E5;
+    --secondary-color: #10B981;
+    --light-bg: #F3F4F6;
+    --light-surface: #FFFFFF;
+    --light-text: #111827;
+    --dark-bg: #1F2937;
+    --dark-surface: #374151;
+    --dark-text: #F9FAFB;
+    --border-radius: 0.5rem;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body.light-mode {
+    background-color: var(--light-bg);
+    color: var(--light-text);
+}
+
+body.dark-mode {
+    background-color: var(--dark-bg);
+    color: var(--dark-text);
+}
+
+.surface {
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.light-mode .surface {
+    background-color: var(--light-surface);
+    color: var(--light-text);
+    border: 1px solid #E5E7EB;
+}
+
+.dark-mode .surface {
+    background-color: var(--dark-surface);
+    color: var(--dark-text);
+    border: 1px solid #4B5563;
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+.btn-primary:hover {
+    opacity: 0.9;
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.form-check-input:checked {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.sidebar {
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 280px;
+    padding-top: 56px; /* Navbar height */
+}
+
+.light-mode .sidebar {
+     background-color: var(--light-surface);
+}
+
+.dark-mode .sidebar {
+     background-color: var(--dark-surface);
+}
+
+
+.main-content {
+    margin-left: 280px;
+    padding-top: 72px; /* Navbar height + padding */
+    transition: margin-left 0.3s;
+}
+
+.sidebar.collapsed {
+    width: 0;
+    overflow: hidden;
+}
+
+.main-content.expanded {
+    margin-left: 0;
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        width: 280px; /* Fixed width for the overlay sidebar */
+        position: fixed; /* Ensure it overlays content */
+        top: 0;
+        left: 0;
+        height: 100vh;
+        z-index: 1040; /* Above most content, below modals */
+        transform: translateX(0); /* Default to visible, then hide if collapsed */
+        transition: transform 0.3s ease-in-out; /* Smooth transition */
+        padding-top: 56px; /* Navbar height */
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Optional shadow */
+    }
+    .sidebar.collapsed { /* When the collapsed class is present, hide the sidebar */
+        transform: translateX(-280px);
+    }
+    /* On small screens, main-content should always be full width */
+    .main-content {
+        margin-left: 0;
+    }
+}
+
+.navbar-brand svg {
+    height: 2rem;
+}
+
+.nav-link {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    border-radius: var(--border-radius);
+    margin-bottom: 0.25rem;
+}
+
+.light-mode .nav-link {
+    color: #374151;
+}
+.dark-mode .nav-link {
+    color: #D1D5DB;
+}
+
+.light-mode .nav-link:hover, .light-mode .nav-link.active {
+    background-color: #E0E7FF;
+    color: var(--primary-color);
+}
+.dark-mode .nav-link:hover, .dark-mode .nav-link.active {
+    background-color: #4338CA;
+    color: white;
+}
+
+.nav-link svg {
+    width: 1.25rem;
+    height: 1.25rem;
+}
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..181cfcd
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const themeToggle = document.getElementById('theme-toggle');
+    const sidebarToggle = document.getElementById('sidebar-toggle');
+    const sidebar = document.querySelector('.sidebar');
+    const mainContent = document.querySelector('.main-content');
+    const currentTheme = localStorage.getItem('theme');
+
+    if (currentTheme) {
+        document.body.classList.add(currentTheme);
+        if (currentTheme === 'dark-mode') {
+            themeToggle.checked = true;
+        }
+    }
+
+    themeToggle.addEventListener('change', function () {
+        if (this.checked) {
+            document.body.classList.remove('light-mode');
+            document.body.classList.add('dark-mode');
+            localStorage.setItem('theme', 'dark-mode');
+        } else {
+            document.body.classList.remove('dark-mode');
+            document.body.classList.add('light-mode');
+            localStorage.setItem('theme', 'light-mode');
+        }
+    });
+
+    sidebarToggle.addEventListener('click', function () {
+        sidebar.classList.toggle('collapsed');
+        mainContent.classList.toggle('expanded');
+    });
+});
diff --git a/index.php b/index.php
index 7205f3d..67255b8 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,83 @@
-<?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
-
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
-?>
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Productivity Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css">
 </head>
 <body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+
+    <!-- Sidebar -->
+    <div class="sidebar border-end p-3">
+        <h5 class="navbar-brand d-flex align-items-center mb-4" href="#">
+            <svg width="118" height="30" viewBox="0 0 118 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.382 10.596c-.33.091-.62.242-.872.455a3.315 3.315 0 0 0-.851.83c-.198.353-.324.758-.378 1.213a4.42 4.42 0 0 0-.08 1.687c.027.538.135.985.324 1.34.19.354.453.647.79.88.337.232.731.393 1.182.482.45.09.94.136 1.47.136.631 0 1.21-.068 1.739-.205.528-.136.983-.34 1.365-.614.382-.273.673-.591.873-.955.2-.364.309-.75.327-1.159.018-.41-.02-.796-.11-1.159a2.59 2.59 0 0 0-.346-.932c-.173-.296-.4-.546-.673-.75a3.033 3.033 0 0 0-.91-.546c-.355-.136-.742-.205-1.16-.205-.437 0-.852.068-1.247.205Zm4.516 3.91c0 .447-.047.84-.142 1.182-.095.34-.247.62-.455.83a2.03 2.03 0 0 1-.743.545c-.31.137-.665.205-1.066.205-.4 0-.756-.068-1.066-.205-.31-.136-.569-.341-.779-.614a2.53 2.53 0 0 1-.482-1.023c-.105-.398-.158-.853-.158-1.364s.053-.966.158-1.364c.105-.397.282-.738.534-.991.252-.25.562-.431.93-.545.368-.114.78-.17 1.235-.17.454 0 .866.056 1.234.17.368.113.678.294.93.545.252.253.433.594.546.991.113.398.17.853.17 1.364Zm5.44-.955c-.21.273-.474.492-.792.659-.318.167-.673.25-1.065.25-.41 0-.776-.083-1.097-.25a2.122 2.122 0 0 1-.809-.66c-.22-.306-.37-.66-.45-1.06a3.52 3.52 0 0 1-.12-1.296c0-.485.04-.932.12-1.34.08-.409.23-.765.45-1.068.22-.303.504-.545.852-.728.348-.181.75-.272 1.198-.272.537 0 .992.113 1.365.34.373.228.664.538.873.932.21.394.314.864.314 1.41 0 .227-.01.44-.03.636-.02.197-.05.38-.09.546h-3.413c.062.41.21.75.443.99.233.243.534.364.902.364.28 0 .54-.057.78-.17.24-.114.42-.25.546-.409l.614.636Zm-1.467-2.182c-.173-.205-.383-.341-.628-.409-.245-.068-.505-.102-.78-.102-.348 0-.64.083-.872.25-.233.167-.4.398-.5.693h2.78c-.018-.243-.07-.463-.158-.66-.088-.196-.214-.363-.374-.5Z" fill="#1E293B"></path><path d="M25.433 7.15c.427 0 .832.03 1.215.09.383.062.729.152 1.038.273.31.12.57.265.78.432.21.166.398.348.563.545l-.955.91c-.136-.166-.296-.317-.482-.454-.186-.137-.41-.25-.673-.341a3.43 3.43 0 0 0-.902-.136c-.282 0-.546.015-.792.045-.246.03-.455.076-.628.137a.89.89 0 0 0-.41.295c-.09.137-.135.31-.135.523s.045.394.135.523c.09.128.225.234.402.318l1.319.545c.348.152.659.326.932.523.273.197.5.432.682.705.182.272.31.59.387.955.076.363.113.765.113 1.205s-.053.84-.158 1.182c-.105.34-.282.628-.534.863-.252.235-.58.402-.984.5-.403.098-.895.148-1.474.148-.52 0-1.002-.045-1.446-.136a4.25 4.25 0 0 1-1.226-.409c-.357-.167-.659-.387-.903-.66l.873-1.022c.205.227.455.42.75.58.295.16.62.272.975.34.355.068.686.102.992.102.327 0 .62-.015.872-.045.252-.03.46-.076.62-.136.16-.06.29-.144.387-.25.096-.106.144-.242.144-.409 0-.152-.048-.296-.144-.432-.096-.136-.234-.25-.415-.34l-1.32-.546c-.636-.273-.954-.66-.954-1.159s.113-.91.34-1.228c.228-.318.529-.568.903-.75.374-.182.78-.273 1.217-.273Z" fill="#4F46E5"></path><path d="M37.608 17.581c-.537.136-1.03.205-1.479.205-.537 0-1.03-.068-1.478-.205-.448-.136-.833-.34-1.155-.613-.322-.273-.562-.614-.72-.991l1.17-.489c.129.284.32.522.576.716.255.193.56.33.911.409.352.079.71.118 1.076.118.366 0 .72-.04.1.066-.08.356-.178.65-.333.88-.155.23-.364.408-.627.534.273-.126.492-.304.659-.534a2.203 2.203 0 0 0 .424-.955c.076-.398.114-.853.114-1.364s-.038-.966-.114-1.364c-.076-.397-.214-.738-.415-.99-.2-.253-.464-.432-.792-.546a3.29 3.29 0 0 0-1.097-.17c-.75 0-1.395.136-1.935.409s-.954.674-1.248 1.205c-.294.53-.44 1.151-.44 1.863s.146 1.326.44 1.83c.294.504.71 893 1.248 1.159.538.265 1.183.398 1.935.398.373 0 .742-.057 1.107-.17.365-.114.67-.284.914-.512l-.682-.943Z" fill="#1E293B"></path><path d="M47.24 10.706c.712 0 1.36.148 1.944.443.584.296 1.055.705 1.413 1.228.358.522.537 1.125.537 1.807 0 .681-.18 1.284-.537 1.806-.358.523-1.83 1.023-1.413 1.228-.584.204-1.232.307-1.944.307-.712 0-1.36-.103-1.944-.307-.584-.205-1.055-.705-1.413-1.228-.358-.522-.537-1.125-.537-1.806 0-.682.18-1.285.537-1.807.358-.523.83-1.023 1.413-1.228.584-.295 1.232-.443 1.944-.443Zm-2.83 5.375c.205.42.482.75.833 1.022.35.273.75.409 1.198.409.448 0 .85-.136 1.198-.409.35-.272.627-.602.833-1.022.205-.42.307-.902.307-1.443s-.102-1.023-.307-1.443c-.206-.42-.483-.75-.833-1.023-.349-.272-.75-.409-1.198-.409-.448 0-.849.137-1.198.41-.35.272-.627.602-.833 1.022-.205.42-.307.902-.307 1.443s.102 1.023.307 1.443Z" fill="#1E293B"></path><path d="M57.96 7.49c-.21.273-.474.492-.792.659-.318.167-.673.25-1.065.25-.41 0-.776-.083-1.097-.25a2.122 2.122 0 0 1-.809-.66c-.22-.306-.37-.66-.45-1.06a3.52 3.52 0 0 1-.12-1.296c0-.485.04-.932.12-1.34.08-.409.23-.765.45-1.068.22-.303.504-.545.852-.728.348-.181.75-.272 1.198-.272.537 0 .992.113 1.365.34.373.228.664.538.873.932.21.394.314.864.314 1.41 0 .227-.01.44-.03.636-.02.197-.05.38-.09.546h-3.413c.062.41.21.75.443.99.233.243.534.364.902.364.28 0 .54-.057.78-.17.24-.114.42-.25.546-.409l.614.636Zm-1.467-2.182c-.173-.205-.383-.341-.628-.409-.245-.068-.505-.102-.78-.102-.348 0-.64.083-.872.25-.233.167-.4.398-.5.693h2.78c-.018-.243-.07-.463-.158-.66-.088-.196-.214-.363-.374-.5Z" fill="#1E293B"></path><path d="M63.79 17.808V7.32h1.34v.636c.21-.242.46-.447.75-.614.29-.166.608-.25 1.002-.25.437 0 .84.083 1.206.25.365.167.667.387.902.66.234.272.402.59.503.954.1.364.15.766.15 1.205v5.653h-1.34v-5.466c0-.492-.06-.91-.18-1.25-.12-.34-.31-.606-.57-.796-.26-.19-.58-.284-.96-.284-.336 0-.64.083-.902.25-.26.167-.48.398-.65.693v6.853h-1.34Z" fill="#1E293B"></path><path d="M80.015 13.91c0-.53.088-.997.261-1.402a2.33 2.33 0 0 1 .72-1.011c.32-.262.7-.443 1.137-.546.438-.102.899-.153 1.383-.153.485 0 .946.05 1.383.153.437.103.82.284 1.148.546.328.261.59.602.787 1.011.196.405.294.872.294 1.402 0 .53-.098.997-.294 1.402a2.41 2.41 0 0 1-.787 1.011c-.328.262-.711.443-1.148.546-.437.102-.898.153-1.383.153-.484 0-.945-.05-1.383-.153a3.02 3.02 0 0 1-1.137-.546c-.32-.261-.58-.602-.72-1.011a3.01 3.01 0 0 1-.26-1.402Zm1.306 0c0 .386.06.72.18.99.12.273.29.493.512.66.222.167.48.273.774.318.293.046.594.068.902.068.308 0 .607-.022.9-.068.293-.045.551-.151.774-.318.222-.167.39-.387.512-.66.12-.27.18-.603.18-.99s-.06-.72-.18-.99a1.23 1.23 0 0 0-.512-.66c-.223-.167-.48-.273-.774-.318-.293-.046-.592-.068-.9-.068-.308 0-.61.022-.902.068-.293.045-.552.151-.774.318a1.23 1.23 0 0 0-.512.66c-.12.27-.18.603-.18.99Z" fill="#1E293B"></path><path d="M96.096 17.808V7.32h1.34v.636c.21-.242.46-.447.75-.614.29-.166.607-.25 1.001-.25.438 0 .84.083 1.206.25.365.167.667.387.902.66.234.272.402.59.503.954.1.364.15.766.15 1.205v5.653h-1.34v-5.466c0-.492-.06-.91-.18-1.25-.12-.34-.31-.606-.57-.796-.26-.19-.58-.284-.96-.284-.337 0-.64.083-.902.25-.26.167-.48.398-.65.693v6.853h-1.34Z" fill="#1E293B"></path><path d="M110.16 20.365c-1.144.33-2.31.496-3.498.496-1.125 0-2.2-.166-3.225-.496-1.025-.33-1.896-.82-2.613-1.467-.718-.648-1.26-1.467-1.627-2.46-.368-1-.552-2.12-.552-3.37 0-1.25.184-2.37.552-3.37.367-.993.91-1.812 1.627-2.46.717-.647 1.588-1.137 2.613-1.467C104.437.36 105.512.2 106.637.2c1.188 0 2.354.166 3.498.496 1.144.33 2.02.82 2.625 1.467.605.647 1.055 1.466 1.35 2.46.295.992.443 2.112.443 3.37s-.148 2.378-.443 3.37c-.295.994-.745 1.813-1.35 2.46-.605.647-1.481 1.137-2.625 1.467Zm-6.096-2.193c.806.495 1.7.743 2.681.743.982 0 1.876-.248 2.682-.743.806-.495 1.436-1.182 1.89-2.06.455-.877.682-1.89.682-3.033s-.227-2.156-.682-3.033c-.454-.878-1.084-1.565-1.89-2.06-.806-.495-1.7-.743-2.682-.743-.981 0-1.875.248-2.681.743-.806.495-1.437 1.182-1.89 2.06-.454.877-.682 1.89-.682 3.033s.228 2.156.682 3.033c.453.878 1.084 1.565 1.89 2.06Z" fill="#1E293B"></path></svg>
+        </h5>
+        <ul class="nav flex-column">
+            <li class="nav-item">
+                <a class="nav-link active" href="#">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd" /></svg>
+                    Dashboard
+                </a>
+            </li>
+            <li class="nav-item"><hr class="my-2"></li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">
+                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
+                        <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
+                    </svg>
+                    Tasks
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
+                    </svg>
+                    Calendar
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">
+                   <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
+                    </svg>
+                    Reports
+                </a>
+            </li>
+        </ul>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
+
+    <!-- Main Content -->
+    <div class="main-content p-4">
+        <!-- Header -->
+        <nav class="navbar navbar-expand-lg surface rounded mb-4">
+            <div class="container-fluid">
+                 <button class="navbar-toggler" type="button" id="sidebar-toggle">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                 <h4 class="m-0">Dashboard</h4>
+                <div class="d-flex align-items-center ms-auto">
+                    <div class="form-check form-switch me-3">
+                        <input class="form-check-input" type="checkbox" role="switch" id="theme-toggle">
+                        <label class="form-check-label" for="theme-toggle">Dark Mode</label>
+                    </div>
+                    <button class="btn btn-primary">Add New Task</button>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Welcome Section -->
+        <div class="surface rounded p-5 text-center">
+            <h1>Welcome Back!</h1>
+            <p class="lead">This is your personal productivity dashboard. Let's get things done.</p>
+        </div>
+
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="assets/js/main.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file