diff --git a/backend/resources/views/layouts/app.blade.php b/backend/resources/views/layouts/app.blade.php
index dfc9558..9d98c5e 100644
--- a/backend/resources/views/layouts/app.blade.php
+++ b/backend/resources/views/layouts/app.blade.php
@@ -7,10 +7,9 @@
     <title>@yield('title', 'Admin Panel')</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <style>
         body {
-            background-color: #f8f9fa;
+            background-color: #f1f5f9;
             font-family: 'Poppins', sans-serif;
         }
 
@@ -18,56 +17,64 @@
         .sidebar {
             width: 250px;
             height: 100vh;
-            background-color: #fff;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            background: #fff;
+            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
             position: fixed;
             top: 0;
             left: 0;
-            padding: 20px 0;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
+            transition: all 0.3s ease;
         }
 
         .sidebar .logo {
             text-align: center;
-            margin-bottom: 20px;
+            padding: 20px 0;
+            border-bottom: 1px solid #eee;
         }
 
         .sidebar .logo img {
-            width: 120px;
+            width: 130px;
         }
 
         .sidebar .menu-title {
-            font-size: 12px;
+            font-size: 11px;
             font-weight: 600;
-            padding-left: 20px;
+            padding: 15px 20px 5px;
             color: #6c757d;
-            margin-top: 10px;
-            margin-bottom: 5px;
+            text-transform: uppercase;
+            letter-spacing: .5px;
         }
 
         .sidebar ul {
             list-style: none;
-            padding-left: 0;
+            padding: 0;
             margin: 0;
         }
 
         .sidebar ul li a {
             display: flex;
             align-items: center;
-            padding: 10px 20px;
-            color: #333;
+            padding: 12px 20px;
+            color: #495057;
             text-decoration: none;
             font-weight: 500;
-            transition: all 0.3s;
-            cursor: pointer;
+            font-size: 14px;
+            border-left: 3px solid transparent;
+            transition: all 0.25s ease-in-out;
+        }
+
+        .sidebar ul li a:hover {
+            background-color: #f1f5ff;
+            color: #0d6efd;
+            border-left: 3px solid #0d6efd;
         }
 
-        .sidebar ul li a:hover,
         .sidebar ul li a.active {
             background-color: #eef4ff;
             color: #0d6efd;
+            border-left: 3px solid #0d6efd;
         }
 
         .sidebar ul li a i {
@@ -75,29 +82,37 @@
             margin-right: 10px;
         }
 
-        /* Dropdown submenu */
+        /* Submenu */
         .submenu {
-            padding-left: 40px;
-            display: none;
+            padding-left: 55px;
         }
 
-        .submenu.show {
-            display: block;
+        .submenu a {
+            font-size: 13px;
+            padding: 8px 20px;
+            color: #6c757d;
+        }
+
+        .submenu a:hover {
+            color: #0d6efd;
+            background: transparent;
+            border-left: none;
         }
 
         /* BOTTOM PROFILE */
         .sidebar-bottom {
-            padding: 20px;
-            border-top: 1px solid #eaeaea;
+            padding: 15px 20px;
+            border-top: 1px solid #eee;
+            background: #fafafa;
         }
 
         .sidebar-bottom .logout {
-            color: red;
+            color: #dc3545;
             display: flex;
             align-items: center;
-            text-decoration: none;
             font-weight: 600;
-            cursor: pointer;
+            text-decoration: none;
+            font-size: 14px;
         }
 
         .sidebar-bottom .logout i {
@@ -112,100 +127,122 @@
         }
 
         .sidebar-bottom .profile img {
-            width: 35px;
-            height: 35px;
+            width: 38px;
+            height: 38px;
             border-radius: 50%;
             object-fit: cover;
+            border: 2px solid #ddd;
+        }
+
+        .sidebar-bottom .profile p {
+            margin: 0;
+            font-size: 14px;
+            font-weight: 600;
+            color: #333;
+        }
+
+        .sidebar-bottom .profile small {
+            font-size: 12px;
+            color: #6c757d;
         }
 
         /* MAIN CONTENT */
         .main-content {
             margin-left: 250px;
-            padding: 20px;
+            padding: 25px;
+            min-height: 100vh;
         }
     </style>
 </head>
 
 <body>
 
-    <!-- SIDEBAR -->
-    <div class="sidebar">
-        <div>
-            <!-- LOGO -->
-            <div class="logo">
-                <img src="{{ asset('images/logo.png') }}" alt="Logo">
-            </div>
+<!-- Sidebar -->
+<div id="sidebar" class="sidebar bg-white d-flex flex-column">
 
-            <!-- MENU -->
-            <p class="menu-title">Menu Utama</p>
-            <ul>
-                <!-- Dashboard tetap punya route -->
-                <li>
-                    <a href="{{ route('admin.dashboard') }}"
-                        class="{{ request()->is('admin/dashboard') ? 'active' : '' }}">
-                        <i class="bi bi-house-door"></i> Dasbor
-                    </a>
-                </li>
+    <!-- LOGO -->
+    <div class="sidebar-header text-center py-4">
+        <img src="{{ asset('images/logo.png') }}" alt="Logo" class="img-fluid mb-2" style="max-height: 80px;">
+    </div>
 
-                <!-- Dummy menu -->
-                <li>
-                    <a href="{{ route('admin.kategori.index') }}"
-                        class="{{ request()->is('admin/kategori*') ? 'active' : '' }}">
-                        <i class="bi bi-diagram-3"></i> Kategori
-                    </a>
-                </li>
+    <!-- MENU -->
+    <div class="sidebar-menu flex-grow-1">
+        <p class="menu-title text-muted px-3  mb-2">Menu Utama</p>
+        <ul class="list-unstyled px-2">
+            <li>
+                <a href="{{ route('admin.dashboard') }}"
+                   class="d-flex align-items-center py-2 px-3 {{ request()->is('admin/dashboard') ? 'active' : '' }}">
+                    <i class="bi bi-house-door me-2"></i> Dasbor
+                </a>
+            </li>
+            <li>
+                <a href="{{ route('admin.kategori.index') }}"
+                   class="d-flex align-items-center py-2 px-3 {{ request()->is('admin/kategori*') ? 'active' : '' }}">
+                    <i class="bi bi-diagram-3 me-2"></i> Kategori
+                </a>
+            </li>
+            <li>
+                <a href="{{ route('admin.fitur.index') }}"
+                   class="d-flex align-items-center py-2 px-3 {{ request()->is('admin/fitur*') ? 'active' : '' }}">
+                    <i class="bi bi-grid me-2"></i> Fitur
+                </a>
+            </li>
 
-                <li>
-                    <a href="{{ route('admin.fitur.index') }}"
-                        class="{{ request()->is('admin/fitur*') ? 'active' : '' }}">
-                        <i class="bi bi-diagram-3"></i> Fitur
-                    </a>
-                </li>
+            <!-- Dropdown Templat -->
+            <li>
+                <a href="#templatSubmenu" data-bs-toggle="collapse" aria-expanded="false"
+                   class="d-flex align-items-center py-2 px-3">
+                    <i class="bi bi-card-list me-2"></i> Templat
+                    <i class="bi bi-chevron-down ms-auto"></i>
+                </a>
+                <ul id="templatSubmenu" class="submenu collapse list-unstyled ms-4">
+                    <li><a href="javascript:void(0)" class="d-block py-2">Pernikahan</a></li>
+                    <li><a href="javascript:void(0)" class="d-block py-2">Ulang Tahun</a></li>
+                    <li><a href="javascript:void(0)" class="d-block py-2">Khitan</a></li>
+                </ul>
+            </li>
 
+            <li>
+                <a href="javascript:void(0)" class="d-flex align-items-center py-2 px-3">
+                    <i class="bi bi-people me-2"></i> Pelanggan
+                </a>
+            </li>
+            <li>
+                <a href="{{ route('admin.reviews.index') }}"
+                   class="d-flex align-items-center py-2 px-3 {{ request()->is('admin/ulasan') ? 'active' : '' }}">
+                    <i class="bi bi-chat-dots me-2"></i> Ulasan
+                </a>
+            </li>
+        </ul>
 
-                <!-- Dropdown dummy -->
-                <li>
-                    <a href="#templatSubmenu" data-bs-toggle="collapse" aria-expanded="false">
-                        <i class="bi bi-card-list"></i> Templat
-                        <i class="bi bi-chevron-down ms-auto"></i>
-                    </a>
-                    <ul id="templatSubmenu" class="submenu collapse">
-                        <li><a href="javascript:void(0)">Pernikahan</a></li>
-                        <li><a href="javascript:void(0)">Ulang Tahun</a></li>
-                        <li><a href="javascript:void(0)">Khitan</a></li>
-                    </ul>
-                </li>
+        <!-- MENU AKUN -->
+        <p class="menu-title text-muted px-3 mt-4 mb-2">Akun</p>
+        <ul class="list-unstyled px-2">
+            <li>
+                <a href="{{ route('admin.logout') }}"
+                   onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
+                   class="d-flex align-items-center py-2 px-3 text-danger fw-bold">
+                    <i class="bi bi-box-arrow-right me-2 text-danger"></i> Keluar
+                </a>
+                <form id="logout-form" action="{{ route('admin.logout') }}" method="POST" class="d-none">
+                    @csrf
+                </form>
+            </li>
+        </ul>
+    </div>
 
-                <li><a href="javascript:void(0)"><i class="bi bi-people"></i> Pelanggan</a></li>
-                <li>
-                    <a href="{{ route('admin.reviews.index') }}"
-                        class="{{ request()->is('admin/ulasan') ? 'active' : '' }}">
-                        <i class="bi bi-chat-dots"></i> Ulasan
-                    </a>
-                </li>
-
-            </ul>
-        </div>
-
-        <!-- BOTTOM SIDEBAR -->
-        <div class="sidebar-bottom">
-            <a href="{{ route('admin.logout') }}" class="logout"
-                onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
-                <i class="bi bi-box-arrow-right"></i> Keluar
-            </a>
-            <form id="logout-form" action="{{ route('admin.logout') }}" method="POST" class="d-none">
-                @csrf
-            </form>
-
-            <div class="profile">
-                <img src="{{ asset('default-avatar.png') }}" alt="Admin">
-                <div>
-                    <p class="m-0 fw-bold">{{ auth('admin')->user()->name }}</p>
-                    <small class="text-muted">{{ auth('admin')->user()->email }}</small>
-                </div>
+    <!-- PROFILE BOX DI PALING BAWAH -->
+    <div class="sidebar-bottom border-top p-3">
+        <div class="d-flex align-items-center">
+            <img src="{{ asset('default-avatar.png') }}" alt="Admin" class="rounded-circle me-2"
+                 style="width:40px; height:40px;">
+            <div>
+                <p class="mb-0 fw-semibold">{{ auth('admin')->user()->name }}</p>
+                <small class="text-muted">{{ auth('admin')->user()->email }}</small>
             </div>
         </div>
     </div>
+</div>
 
     <!-- MAIN CONTENT -->
     <div class="main-content">