diff --git a/assets/pasted-20251221-013937-99f2729f.png b/assets/pasted-20251221-013937-99f2729f.png
deleted file mode 100644
index c1544b9..0000000
Binary files a/assets/pasted-20251221-013937-99f2729f.png and /dev/null differ
diff --git a/core/templates/base.html b/core/templates/base.html
index 41ddac5..73538f0 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -15,9 +15,9 @@
   {% endif %}
   {% load static %}
   <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/heroicons@2.1.3/24/outline/index.js"></script>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   {% block head %}{% endblock %}
 </head>
 
diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index e67cace..4f0b3aa 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -5,40 +5,120 @@
 
 {% block content %}
 <style>
+  :root {
+    --ink: #0b0b0c;
+    --paper: #fbfaf7;
+    --line: rgba(11, 11, 12, .08);
+    --shadow: 0 18px 48px rgba(11, 11, 12, .10);
+    --shadow2: 0 10px 26px rgba(11, 11, 12, .10);
+    --radius: 22px;
+    --blue: #2563eb;
+    --blue2: #60a5fa;
+    --ice: #eaf2ff;
+    --ice2: #f6fbff;
+  }
   body {
     font-family: 'Inter', sans-serif;
     color: var(--ink);
     background-color: #f7f9fc;
   }
+  .panel {
+    border-radius: var(--radius);
+    background: white;
+    border: 1px solid var(--line);
+    box-shadow: var(--shadow2);
+  }
+  .chip {
+    border-radius: 999px;
+    border: 1px solid var(--line);
+    background: #f8f9fa;
+  }
 </style>
 
-<div class="header d-flex justify-content-between align-items-center">
-    <div class="d-flex align-items-center">
-        <div class="logo-circle bg-dark text-white">CS</div>
-        <h5 class="fw-bold m-0 ms-2">ComplianceShield</h5>
-        <span class="ms-3 text-muted border-start ps-3">Dashboard</span>
+<div class="flex h-screen bg-gray-100">
+  <!-- Sidebar -->
+  <aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
+    <div class="p-6">
+      <a href="#" class="flex items-center gap-3">
+        <div class="h-10 w-10 rounded-2xl bg-[#0b0b0c] text-white flex items-center justify-center text-sm font-semibold">CS</div>
+        <div class="font-semibold tracking-tight">ComplianceShield</div>
+      </a>
     </div>
-    <div class="search-bar w-50">
-        <input type="text" class="form-control" placeholder="Search projects, documents, alerts...">
+    <div class="flex-1">
+        <p class="px-6 text-xs text-gray-500 uppercase tracking-wider">Menu</p>
+        <nav class="px-4 py-2 space-y-1">
+          <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg">
+            🏠 Dashboard
+          </a>
+          <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
+            📊 Reports
+          </a>
+          <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
+            📅 Calendar
+          </a>
+          <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
+            👥 Teams
+          </a>
+        </nav>
+        <p class="px-6 mt-4 text-xs text-gray-500 uppercase tracking-wider">Projects</p>
+        <nav class="px-4 py-2 space-y-1">
+            <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
+                🟦 Ongoing
+            </a>
+            <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
+                ✅ Completed
+            </a>
+            <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
+                ⏸️ On Hold
+            </a>
+        </nav>
     </div>
-    <div class="d-flex align-items-center">
-        <div class="notification-bell me-3">
-            <i class="fa-regular fa-bell"></i>
+    <div class="p-4">
+        <div class="p-4 bg-gray-100 rounded-lg text-center">
+            <p class="text-sm font-medium">Ready to launch a new project?</p>
+            <p class="text-xs text-gray-600 mt-1">Create a new jobsite and start tracking compliance today.</p>
+            <button class="mt-3 w-full bg-blue-600 text-white py-2 rounded-lg text-sm font-semibold">Add New Project</button>
         </div>
-        <div class="d-flex align-items-center">
-            <div class="avatar me-2"></div>
-            <div>
-                <p class="fw-bold m-0 small">Owner</p>
-                <p class="text-muted m-0 small">Your Account</p>
+    </div>
+    <div class="border-t border-gray-200">
+        <nav class="px-4 py-4 space-y-1">
+            <a href="/admin" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
+                ⚙️ Settings
+            </a>
+            <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
+                🛟 Help Center
+            </a>
+        </nav>
+    </div>
+  </aside>
+
+  <!-- Main content -->
+  <main class="flex-1 p-6 lg:p-10 overflow-y-auto">
+    <div class="max-w-7xl mx-auto">
+        <div class="flex justify-between items-center mb-6">
+            <h1 class="text-2xl font-semibold text-gray-800">ComplianceShield Dashboard</h1>
+            <div class="flex-1 flex justify-center px-8">
+                <div class="relative w-full max-w-lg">
+                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                        <i-o-magnifying-glass class="h-5 w-5 text-gray-500"></i-o-magnifying-glass>
+                    </span>
+                    <input type="text" placeholder="Search..." class="block w-full rounded-md border border-gray-200 bg-gray-50 py-2 pl-10 pr-4 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm">
+                </div>
+            </div>
+            <div class="flex items-center gap-4">
+                <i-o-bell class="h-6 w-6 text-gray-500"></i-o-bell>
+                <div class="flex items-center gap-2">
+                    <div class="h-8 w-8 rounded-full bg-gray-400"></div>
+                    <div>
+                        <p class="font-semibold text-sm">Owner</p>
+                        <p class="text-xs text-gray-500">Your Account Menu</p>
+                    </div>
+                </div>
             </div>
         </div>
-    </div>
-</div>
 
-<div class="p-6 lg:p-10">
-    <div class="max-w-7xl mx-auto">
         <div class="panel p-6 mb-8">
-            <div class="flex justify-content-between align-items-center">
+            <div class="flex justify-between items-center">
                 <div>
                     <h2 class="text-lg font-semibold">Ready to launch a new project?</h2>
                     <p class="text-sm text-gray-500">Create a new jobsite and start tracking compliance today.</p>
@@ -141,7 +221,7 @@
             </div>
         </div>
         <div class="col-span-2">
-             <div class="flex items-center justify-content-between">
+             <div class="flex items-center justify-between">
                 <h2 class="text-xl font-semibold">Daily Activity Log</h2>
                 <div>
                     <button class="chip px-4 py-2 text-sm font-semibold bg-white">Today</button>
@@ -158,7 +238,7 @@
                     <li>Check curing process for foundation concrete.</li>
                     <li>Verify column alignment before pouring.</li>
                 </ul>
-                <div class="flex justify-content-between items-center mt-4 text-sm text-gray-500">
+                <div class="flex justify-between items-center mt-4 text-sm text-gray-500">
                     <span>Sep 17, 2025 — 06:45 PM</span>
                     <span class="flex items-center gap-2"><i-o-photo class="h-5 w-5"></i-o-photo> 2 photos</span>
                 </div>
@@ -173,7 +253,7 @@
                     <li>PPE checklist verified (helmets, vests).</li>
                     <li>Hazards documented with photo proof.</li>
                 </ul>
-                 <div class="flex justify-content-between items-center mt-4 text-sm text-gray-500">
+                 <div class="flex justify-between items-center mt-4 text-sm text-gray-500">
                     <span>Sep 17, 2025 — 08:10 AM</span>
                     <span class="flex items-center gap-2 text-green-600"><i-o-check-circle class="h-5 w-5"></i-o-check-circle> Completed</span>
                 </div>
@@ -183,5 +263,6 @@
       </div>
 
     </div>
+  </main>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/static/css/custom.css b/static/css/custom.css
index 8d6f0a7..10f05e3 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -51,57 +51,4 @@
     }
     .btn:hover { transform: translateY(-1px); box-shadow: 0 18px 48px rgba(11,11,12,.10); }
 
-    .drawer.hidden { display:none; }
-
-.header {
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid var(--line);
-    background: rgba(255,255,255,.78);
-    backdrop-filter: blur(10px);
-}
-
-.logo-circle {
-    width: 36px;
-    height: 36px;
-    font-size: 14px;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-}
-
-.avatar {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background-color: #60a5fa; /* --blue2 */
-}
-
-.search-bar .form-control {
-    border-radius: 20px;
-    padding-left: 2.5rem;
-    border-color: transparent;
-    background-color: #f3f4f6;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: 0.75rem center;
-}
-
-.search-bar .form-control:focus {
-    background-color: white;
-    border-color: var(--blue);
-    box-shadow: none;
-}
-
-.notification-bell {
-    font-size: 1.25rem;
-    color: #6b7280;
-    border: 1px solid var(--line);
-    border-radius: 50%;
-    width: 36px;
-    height: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
+    .drawer.hidden { display:none; }
\ No newline at end of file