diff --git a/chat-page/style.css b/chat-page/style.css
index d45d9e3..604f436 100644
--- a/chat-page/style.css
+++ b/chat-page/style.css
@@ -42,6 +42,7 @@ body {
     position: sticky;
     top: 0;
     z-index: 100;
+    flex-shrink: 0; /* Prevent header from shrinking */
 }
 
 .chat-header, .input-area {
diff --git a/dashboard-page/index.html b/dashboard-page/index.html
new file mode 100644
index 0000000..c0e46f5
--- /dev/null
+++ b/dashboard-page/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard</title>
+    <link rel="stylesheet" href="styles/main.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+</head>
+<body>
+    <!-- Floating circles background -->
+    <ul class="floating-circles">
+        <li></li><li></li><li></li><li></li><li></li>
+        <li></li><li></li><li></li><li></li><li></li>
+    </ul>
+    
+    <!-- Sidebar -->
+    <aside class="sidebar">
+        <div class="sidebar-header">
+            <h2 class="logo">Dashboard</h2>
+            <!-- Hamburger button for mobile -->
+            <button class="hamburger-btn mobile-only">
+                <i class="bi bi-x-lg"></i>
+            </button>
+        </div>
+        <nav class="sidebar-nav">
+            <a href="#" class="nav-item active"><i class="bi bi-house-door-fill"></i> Overview</a>
+            <a href="#" class="nav-item"><i class="bi bi-bar-chart-fill"></i> Analytics</a>
+            <a href="#" class="nav-item"><i class="bi bi-gear-fill"></i> Settings</a>
+        </nav>
+        <div class="sidebar-footer">
+            <a href="../login-page/index.html" class="nav-item logout-btn">
+                <i class="bi bi-box-arrow-left"></i> Logout
+            </a>
+        </div>
+    </aside>
+    
+    <!-- Main Content -->
+    <main class="main-content">
+        <section class="greeting-section">
+            <div class="greeting-card">
+                <!-- Kolom kiri: Profil -->
+                <div class="profile-column">
+                    <div class="profile-pic">
+                        <img src="https://via.placeholder.com/100" alt="Profile Picture">
+                    </div>
+                    <div class="user-info">
+                        <h2>Selamat Datang, John Doe</h2>
+                        <p>john.doe@example.com</p>
+                    </div>
+                </div>
+                
+                <!-- Kolom kanan: Waktu dan Ikon -->
+                <div class="actions-column">
+                    <div class="datetime-small">
+                        <div id="date"></div>
+                        <div id="time"></div>
+                    </div>
+                    <div class="icons-container">
+                        <button class="icon-btn">
+                            <i class="bi bi-question-circle"></i>
+                        </button>
+                        <button class="icon-btn">
+                            <i class="bi bi-bell"></i>
+                        </button>
+                        <button class="icon-btn">
+                            <i class="bi bi-person-circle"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <script src="scripts/main.js"></script>
+</body>
+</html>
diff --git a/dashboard-page/scripts/main.js b/dashboard-page/scripts/main.js
new file mode 100644
index 0000000..316e16e
--- /dev/null
+++ b/dashboard-page/scripts/main.js
@@ -0,0 +1,81 @@
+console.log("Dashboard script loaded");
+
+// Inisialisasi fungsi dasar
+document.addEventListener('DOMContentLoaded', () => {
+    const sidebar = document.querySelector('.sidebar');
+    const menuBtn = document.querySelector('.main-header .hamburger-btn');
+    const closeBtn = document.querySelector('.sidebar .hamburger-btn');
+    
+    // Toggle sidebar visibility
+    function toggleSidebar() {
+        sidebar.classList.toggle('active');
+        document.body.classList.toggle('sidebar-active');
+    }
+    
+    // Event listeners for hamburger buttons
+    if (menuBtn) {
+        menuBtn.addEventListener('click', toggleSidebar);
+    }
+    
+    if (closeBtn) {
+        closeBtn.addEventListener('click', toggleSidebar);
+    }
+    
+    // Close sidebar when clicking outside
+    document.addEventListener('click', (e) => {
+        if (window.innerWidth > 768) return;
+        if (sidebar.classList.contains('active') && 
+            !sidebar.contains(e.target) && 
+            !menuBtn.contains(e.target)) {
+            toggleSidebar();
+        }
+    });
+    
+    // Handle sidebar on mobile
+    if (window.innerWidth <= 768) {
+        sidebar.classList.add('collapsed');
+    }
+    
+    // Event listener untuk tombol logout
+    const logoutBtn = document.querySelector('.logout-btn');
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            // Simulasi logout
+            alert('Anda telah logout');
+            // Redirect ke halaman login
+            window.location.href = this.getAttribute('href');
+        });
+    }
+    
+    // Update date and time in real-time
+    function updateDateTime() {
+        const now = new Date();
+        
+        // Format date
+        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+        const dateString = now.toLocaleDateString('id-ID', options);
+        
+        // Format time
+        const hours = now.getHours().toString().padStart(2, '0');
+        const minutes = now.getMinutes().toString().padStart(2, '0');
+        const seconds = now.getSeconds().toString().padStart(2, '0');
+        const timeString = `${hours}:${minutes}:${seconds}`;
+        
+        // Update DOM
+        document.getElementById('date').textContent = dateString;
+        document.getElementById('time').textContent = timeString;
+    }
+    
+    // Initial call
+    updateDateTime();
+    
+    // Update every second
+    setInterval(updateDateTime, 1000);
+});
+
+// Fungsi untuk toggle sidebar
+function toggleSidebar() {
+    const sidebar = document.querySelector('.sidebar');
+    sidebar.classList.toggle('collapsed');
+}
diff --git a/dashboard-page/styles/main.css b/dashboard-page/styles/main.css
new file mode 100644
index 0000000..a42e863
--- /dev/null
+++ b/dashboard-page/styles/main.css
@@ -0,0 +1,421 @@
+/* Floating circles background for frosted glass effect */
+.floating-circles {
+    position: fixed;
+    top: 0;
+    left极: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: -1;
+}
+
+.floating-circles li {
+    position: absolute;
+    display: block;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(72, 202, 228, 0.15);
+    border-radius: 50%;
+    animation: float 25s linear infinite;
+    bottom: -150px;
+    z-index: -1;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0) rotate(0deg);
+        opacity: 0.7;
+    }
+    100% {
+        transform: translateY(-1000px) rotate(720deg);
+        opacity: 0;
+    }
+}
+
+/* Configure floating circles */
+.floating-circles li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
+.floating-circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
+.floating-circles li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
+.floating-circles li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
+.floating-circles li:nth-child(5) { left: 65%; width: 20px; height: 20极x; animation-delay: 0s; }
+.floating-circles li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
+.floating-circles li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
+.floating-circles li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
+.floating-circles li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
+.floating-circles li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }
+
+/* Reset CSS */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Color Variables */
+:root {
+    --dark-blue: #03045e;
+    --blue: #023e8a;
+    --light-blue: #0077b6;
+    --accent-blue: #0096c7;
+    --bright-blue: #48cae4;
+    --pale-blue: #ade8f4;
+    --white: #ffffff;
+    --light-gray: #f5f5f5;
+    --text-dark: #333333;
+}
+
+body {
+    display: flex;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #0077b6, #023e8a);
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+/* Sidebar dan main content sebagai anak langsung body */
+.sidebar {
+    width: 250px;
+    height: 100vh;
+    background: var(--white); 
+    color: var(--dark-blue); 
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.3s ease;
+    z-index: 100;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow-y: auto;
+    background: rgba(255, 255, 255, 0.2); 
+    backdrop-filter: blur(20px); 
+}
+
+/* Sidebar Styles */
+.sidebar {
+    width: 250px;
+    background: var(--white);
+    color: var(--dark-blue);
+    display: flex;
+    flex-direction: column;
+    transition: width 0.3s ease, transform 0.3s ease;
+    z-index: 100;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.sidebar-header {
+    padding: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--dark-blue);
+}
+
+.sidebar-nav {
+    flex: 1;
+    padding: 20px 0;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 20px;
+    color: var(--dark-blue);
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+.nav-item i {
+    margin-right: 10px;
+    font-size: 1.2rem;
+}
+
+.nav-item.active {
+    background: var(--pale-blue);
+    color: var(--dark-blue);
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.nav-item:hover:not(.active) {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: var(--white);
+}
+
+.sidebar-footer {
+    padding: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.logout-btn {
+    color: var(--dark-blue);
+    font-weight: bold;
+}
+
+.logout-btn:hover {
+    color: var(--blue);
+}
+
+/* Main Content Styles */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    background: transparent;
+    backdrop-filter: none;
+}
+
+.greeting-section {
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start; /* Pindahkan ke atas */
+}
+
+.greeting-card {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    width: 95%;
+    max-width: 1000px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.profile-column {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.profile-pic {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 3px solid white;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.profile-pic img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.user-info h2 {
+    font-size: 1.8rem;
+    color: white;
+    margin-bottom: 5px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.user-info p {
+    font-size: 1.1rem;
+    color: var(--pale-blue);
+}
+
+.actions-column {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 15px;
+}
+
+.datetime-small {
+    text-align: right;
+}
+
+#date {
+    font-size: 0.9rem;
+    color: white;
+    margin-bottom: 5px;
+}
+
+#time {
+    font-size: 1.2rem;
+    color: white;
+    font-weight: bold;
+}
+
+.icons-container {
+    display: flex;
+    gap: 10px;
+}
+
+.icon-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background 0.3s ease;
+    color: white;
+    font-size: 1.2rem;
+}
+
+.icon-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+/* Card Grid Styles */
+.card-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    width: 100%;
+}
+
+.card {
+    flex: 1 1 300px;
+    background: var(--white);
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+}
+
+.card i {
+    font-size: 2.5rem;
+    color: #0096c7;
+    margin-bottom: 15px;
+}
+
+.card h3 {
+    font-size: 1.2rem;
+    color: #023e8a;
+    margin-bottom: 10px;
+}
+
+.card .card-value {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #03045e;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
+}
+
+.placeholder-card {
+    background-color: var(--white);
+    border-radius: 10px;
+    padding: 30px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    text-align: center;
+}
+
+.placeholder-card p {
+    font-size: 1.2rem;
+    color: var(--light-blue);
+}
+
+/* Hamburger button styles */
+.hamburger-btn {
+    background: none;
+    border: none;
+    color: var(--dark-blue);
+    font-size: 1.5rem;
+    cursor: pointer;
+    display: none;
+}
+
+.mobile-only {
+    display: none;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .mobile-only {
+        display: block;
+    }
+    
+    .hamburger-btn {
+        display: block;
+        position: absolute;
+        right: 20px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 101;
+    }
+    
+    .sidebar .hamburger-btn {
+        right: 15px;
+        top: 20px;
+        color: var(--dark-blue);
+    }
+    
+    .sidebar {
+        position: fixed;
+        height: 100%;
+        transform: translate极(-100%);
+        transition: transform 0.3s ease;
+    }
+    
+    .sidebar.active {
+        transform: translateX(0);
+    }
+    
+    .logo span, .nav-item span {
+        display: none;
+    }
+    
+    .nav-item {
+        justify-content: center;
+        padding: 15px;
+    }
+    
+    .nav-item i {
+        margin-right: 0;
+        font-size: 1.5rem;
+    }
+    
+    .logout-btn span {
+        display: none;
+    }
+    
+    .greeting-card {
+        flex-direction: column;
+        gap: 20px;
+    }
+    
+    .actions-column {
+        align-items: center;
+        width: 100%;
+    }
+    
+    .datetime-small {
+        text-align: center;
+        width: 100%;
+    }
+    
+    .icons-container {
+        justify-content: center;
+        width: 100%;
+    }
+}
