diff --git a/dashboard/static/css/dashboard.css b/dashboard/static/css/dashboard.css
new file mode 100644
index 0000000..4958490
--- /dev/null
+++ b/dashboard/static/css/dashboard.css
@@ -0,0 +1,63 @@
+.dashboard-container {
+    padding: 20px;
+    background-color: #f5f5f5;
+}
+
+.dashboard-header {
+    margin-bottom: 20px;
+}
+
+.dashboard-stats {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.stat-block {
+    background: white;
+    border-radius: 8px;
+    padding: 20px;
+    text-align: center;
+    flex: 1;
+    margin: 0 10px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.stat-block h4 {
+    margin-bottom: 10px;
+    font-size: 16px;
+    color: #333;
+}
+
+.stat-block p {
+    font-size: 24px;
+    color: #333;
+}
+
+.dashboard-section {
+    background: white;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.dashboard-section h4 {
+    margin-bottom: 10px;
+    font-size: 18px;
+    color: #333;
+}
+
+#popularItems {
+    list-style: none;
+    padding: 0;
+}
+
+#popularItems li {
+    margin-bottom: 5px;
+}
+
+.chart-container {
+    position: relative;
+    height: 600px;
+}
diff --git a/dashboard/static/js/dashboard-chart.js b/dashboard/static/js/dashboard-chart.js
index 0d46665..7dc7b19 100644
--- a/dashboard/static/js/dashboard-chart.js
+++ b/dashboard/static/js/dashboard-chart.js
@@ -1,10 +1,9 @@
-
 // Dummy data for demonstration purposes
 const totalOrders = 100;
 const acceptedOrders = 90;
 const rejectedOrders = 10;
 const totalRevenue = 5000.00;
-const popularItems = ['TUNA SAN', 'BERRY GRAPEFUL', 'PEANUT BUTTER COCONUT OATMEAL']; // Dummy popular items
+
 const monthlyRevenueData = {
     labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
     datasets: [{
@@ -22,14 +21,6 @@ document.getElementById('acceptedOrders').innerText = acceptedOrders;
 document.getElementById('rejectedOrders').innerText = rejectedOrders;
 document.getElementById('totalRevenue').innerText = totalRevenue.toFixed(2);
 
-// Populate popular items
-const popularItemsList = document.getElementById('popularItems');
-popularItems.forEach(item => {
-    const li = document.createElement('li');
-    li.textContent = item;
-    popularItemsList.appendChild(li);
-});
-
 // Render revenue chart
 const ctx = document.getElementById('revenueChart').getContext('2d');
 const revenueChart = new Chart(ctx, {
diff --git a/dashboard/templates/dashboard.html b/dashboard/templates/dashboard.html
index 6c8ae02..b8a12a2 100644
--- a/dashboard/templates/dashboard.html
+++ b/dashboard/templates/dashboard.html
@@ -3,57 +3,64 @@
 {% load static %}
 
 {% block content %}
-  <div class="container">
-    <div class="section">
-      <h4 style="color: black;">Total Orders</h4>
-      <p>
-        Total number of orders: <span id="totalOrders">0</span>
-      </p>
+<div class="container" style="padding: 20px; background-color: #f5f5f5;">
+    <div class="section" style="margin-bottom: 20px;">
+        <h1 style="font-size: 24px; color: #333;">Dashboard</h1>
+        <p style="color: #555;">Hi, Admin. Welcome back!</p>
     </div>
 
-    <div class="section">
-      <h4>Total Accepted Orders</h4>
-      <p>
-        Total number of accepted orders: <span id="acceptedOrders">0</span>
-      </p>
+    <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
+        <div
+            style="background: white; border-radius: 8px; padding: 20px; text-align: center; flex: 1; margin: 0 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
+            <h4 style="margin-bottom: 10px; font-size: 16px; color: #333;">Total Orders</h4>
+            <p style="font-size: 24px; color: #333;"><span id="totalOrders">0</span></p>
+        </div>
+        <div
+            style="background: white; border-radius: 8px; padding: 20px; text-align: center; flex: 1; margin: 0 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
+            <h4 style="margin-bottom: 10px; font-size: 16px; color: #333;">Total Accepted</h4>
+            <p style="font-size: 24px; color: #333;"><span id="acceptedOrders">0</span></p>
+        </div>
+        <div
+            style="background: white; border-radius: 8px; padding: 20px; text-align: center; flex: 1; margin: 0 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
+            <h4 style="margin-bottom: 10px; font-size: 16px; color: #333;">Total Rejected</h4>
+            <p style="font-size: 24px; color: #333;"><span id="rejectedOrders">0</span></p>
+        </div>
+        <div
+            style="background: white; border-radius: 8px; padding: 20px; text-align: center; flex: 1; margin: 0 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
+            <h4 style="margin-bottom: 10px; font-size: 16px; color: #333;">Total Revenue</h4>
+            <p style="font-size: 24px; color: #333;">RM <span id="totalRevenue">0.00</span></p>
+        </div>
     </div>
 
-    <div class="section">
-      <h4>Total Rejected Orders</h4>
-      <p>
-        Total number of rejected orders: <span id="rejectedOrders">0</span>
-      </p>
+    <div class="section"
+        style="background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
+        <h4 style="margin-bottom: 10px; font-size: 18px; color: #333;">Popular Menu Items</h4>
+        <ul id="popularItems" style="list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px;">
+            <li
+                style="flex: 1 1 calc(33.333% - 10px); background: #f9f9f9; border-radius: 8px; padding: 10px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
+                TUNA SAN</li>
+            <li
+                style="flex: 1 1 calc(33.333% - 10px); background: #f9f9f9; border-radius: 8px; padding: 10px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
+                BERRY GRAPEFUL</li>
+            <li
+                style="flex: 1 1 calc(33.333% - 10px); background: #f9f9f9; border-radius: 8px; padding: 10px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
+                PEANUT BUTTER COCONUT OATMEAL</li>
+        </ul>
     </div>
 
-    <div class="section">
-      <h4>Total Revenue</h4>
-      <p>
-        Total revenue: RM
-        <span id="totalRevenue">0.00</span>
-      </p>
+    <!-- Revenue Chart Section -->
+    <div class="section"
+        style="background: white; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
+        <h4 style="margin-bottom: 10px; font-size: 18px; color: #333;">Revenue Chart (Monthly)</h4>
+        <div class="chart-container">
+            <canvas id="revenueChart"></canvas>
+        </div>
     </div>
-
-    <div class="section">
-      <h4>Popular Menu Items</h4>
-      <ul id="popularItems">
-        <!-- Populate with popular menu items -->
-        <li>TUNA SAN</li>
-        <li>BERRY GRAPEFUL</li>
-        <li>EANUT BUTTER COCONUT OATMEAL</li>
-        <!-- Add more items here -->
-      </ul>
-    </div>
-    <div class="section">
-      <h4>Revenue Chart (Monthly)</h4>
-      <div class="chart-container">
-        <canvas id="revenueChart"></canvas>
-      </div>
-    </div>
-  </div>
+    <!-- End Revenue Chart Section -->
+</div>
 {% endblock %}
 
 {% block script %}
-
 <script src="{% static 'js/chart.js' %}"></script>
 <script src="{% static 'js/dashboard-chart.js' %}"></script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/static/assets/css/dashboard.css b/static/assets/css/dashboard.css
index 136d254..8f8f093 100644
--- a/static/assets/css/dashboard.css
+++ b/static/assets/css/dashboard.css
@@ -3,47 +3,29 @@ body {
     margin: 0;
     padding: 0;
     color: black;
-    background-color: #fff; /* Set background color to white */
-  }
-  header {
-    background-color: #333; /* Dark gray background for the header */
+    background-color: #fff;
+    /* Set background color to white */
+}
+
+header {
+    background-color: #333;
+    /* Dark gray background for the header */
     color: #fff;
     padding: 20px;
     text-align: center;
-  }
-  .container {
+}
+
+.container {
     margin: 100px;
-  }
-  .section {
+}
+
+.section {
     margin-bottom: 40px;
-    background-color: #f2f2f2; 
+    background-color: #f2f2f2;
     padding: 10px;
-  }
-  
-  .chart-container {
+}
+
+.chart-container {
     width: 80%;
     margin: auto;
-  }
-  canvas {
-    display: block;
-    margin: auto;
-  }
-
-  /* h4 {
-    border-bottom: 1px solid black;
-    padding-bottom: 10px;
-  }
-  table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-  th,
-  td {
-    padding: 8px;
-    text-align: left;
-    
-  }
-  th {
-    background-color: black;
-    color: white; 
-  } */
\ No newline at end of file
+}