diff --git a/assets/script/style.css b/assets/script/style.css
index 4a509b9..6756e09 100644
--- a/assets/script/style.css
+++ b/assets/script/style.css
@@ -1974,8 +1974,8 @@ strong {
     opacity: 0.4;
   }
   .menu {
-    --menu-active-fg: var(--color-neutral-content);
-    --menu-active-bg: var(--color-neutral);
+    --menu-active-fg: var(#e9f2ff);
+    --menu-active-bg: var(#e9f2ff);
     flex-flow: column wrap;
     width: fit-content;
     padding: 0.5rem;
@@ -1989,7 +1989,7 @@ strong {
     position: relative;
   }
   .menu :where(li ul):before {
-    background-color: var(--color-base-content);
+    background-color: var(#e9f2ff);
     opacity: 0.1;
     width: var(--border);
     content: "";
@@ -2066,7 +2066,7 @@ strong {
       li:not(.menu-title, .disabled) > details > summary:not(.menu-title)
     ):not(.menu-active, :active, .btn):focus-visible {
     cursor: pointer;
-    background-color: var(--color-base-content);
+    background-color: var(#e9f2ff);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .menu
@@ -2079,11 +2079,7 @@ strong {
         li:not(.menu-title, .disabled) > :not(ul, details, .menu-title),
         li:not(.menu-title, .disabled) > details > summary:not(.menu-title)
       ):not(.menu-active, :active, .btn):focus-visible {
-      background-color: color-mix(
-        in oklab,
-        var(--color-base-content) 10%,
-        transparent
-      );
+      background-color: color-mix(in oklab, var(#e9f2ff) 10%, transparent);
     }
   }
   .menu
@@ -2096,7 +2092,7 @@ strong {
       li:not(.menu-title, .disabled) > :not(ul, details, .menu-title),
       li:not(.menu-title, .disabled) > details > summary:not(.menu-title)
     ):not(.menu-active, :active, .btn):focus-visible {
-    color: var(--color-base-content);
+    color: var(#e9f2ff);
     --tw-outline-style: none;
     outline-style: none;
   }
@@ -2124,7 +2120,7 @@ strong {
         > summary:not(.menu-title):not(.menu-active, :active, .btn):hover
     ) {
     cursor: pointer;
-    background-color: var(--color-base-content);
+    background-color: var(#e9f2ff);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .menu
@@ -2187,7 +2183,7 @@ strong {
       inset 0 -1px #ffffff03;
   }
   .menu :where(li:empty) {
-    background-color: var(--color-base-content);
+    background-color: var(#e9f2ff);
     opacity: 0.1;
     height: 1px;
     margin: 0.5rem 1rem;
@@ -2197,8 +2193,12 @@ strong {
     flex-shrink: 0;
     align-items: stretch;
     display: flex;
-    position: relative;
+    position: unset;
   }
+  .menu > li:last-child > details > ul {
+    right: 30px;
+  }
+
   .menu :where(li) .badge {
     justify-self: flex-end;
   }
@@ -2220,7 +2220,7 @@ strong {
   .menu :where(li) > :not(ul, .menu-title, details, .btn).menu-active,
   .menu :where(li) > details > summary:active {
     color: var(--menu-active-fg);
-    background-color: var(--menu-active-bg);
+    background-color: var(#e9f2ff);
     background-size: auto, calc(var(--noise) * 100%);
     background-image: none, var(--fx-noise);
   }
@@ -3989,10 +3989,67 @@ strong {
     padding-block: 0.5rem;
     padding-inline-end: 0.5rem;
     position: absolute;
+    max-height: 500px;
+    overflow: auto;
+  }
+  .menu-horizontal li {
+    position: relative;
+  }
+
+  .menu-horizontal li::before {
+    position: absolute;
+    content: "";
+    left: 0;
+    bottom: -18px;
+    width: 100%;
+    height: 30px;
+    display: none;
+  }
+  .menu-horizontal li:hover::before {
+    display: block;
+  }
+
+  .menu-horizontal li:hover {
+    background: #e9f2ff !important;
+  }
+
+  .menu-horizontal li:hover .grow {
+    color: #177bff;
+  }
+
+  .menu-horizontal .grow {
+    font-weight: 500;
+  }
+
+  .menu-horizontal li:hover .iconify {
+    color: #177bff;
+  }
+
+  .menu-horizontal li .submenu {
+    display: none;
+    position: absolute;
+    top: 150%;
+    left: 0;
+    background: #fff;
+    z-index: 999;
+    margin-left: 0;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-height: 500px;
+    overflow: auto;
+  }
+
+  .menu-horizontal li:hover .submenu {
+    display: block;
   }
   .menu-horizontal > li > details > ul:before {
     content: none;
   }
+
+  .menu-horizontal li:hover > details > ul {
+    display: block !important;
+  }
+
   :where(.menu-horizontal > li:not(.menu-title) > details > ul) {
     border-radius: var(--radius-box);
     background-color: var(--color-base-100);
@@ -6233,6 +6290,9 @@ strong {
   .w-84 {
     width: calc(var(--spacing) * 84);
   }
+  .w-100 {
+    width: calc(var(--spacing) * 100);
+  }
   .w-\[3px\] {
     width: 3px;
   }
@@ -10540,6 +10600,10 @@ strong {
     --btn-fg: currentColor;
     outline-color: currentColor;
   }
+  .btn-ghost:hover .text-white {
+    color: #000;
+  }
+
   @media (hover: none) {
     .btn-ghost:hover:not(
         .btn-active,
@@ -11207,7 +11271,7 @@ strong {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 3v18h18m-3-4V9m-5 8V5M8 17v-3'/%3E%3C/svg%3E");
   }
   .lucide--bell {
-    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E");
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E");
   }
   .lucide--bell-dot {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0m.184-18.686A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.74 7.327A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673a9 9 0 0 1-.585-.665'/%3E%3Ccircle cx='18' cy='8' r='3'/%3E%3C/g%3E%3C/svg%3E");
@@ -15123,8 +15187,6 @@ input:-webkit-autofill:active {
   background: var(--layout-topbar-background);
   top: calc(var(--spacing) * 0);
   z-index: 10;
-  max-height: calc(var(--spacing) * 16);
-  min-height: calc(var(--spacing) * 16);
   transition-property: top, margin, border-radius;
   transition-timing-function: var(
     --tw-ease,
@@ -16449,3 +16511,6 @@ html:not([data-theme="material"], [data-theme="material-dark"]) #layout-topbar {
     background-position: 0;
   }
 }
+.bg-menu {
+  background: #004e99;
+}
diff --git a/template/home/home.html b/template/home/home.html
index 6460bab..72af6be 100644
--- a/template/home/home.html
+++ b/template/home/home.html
@@ -34,7 +34,7 @@
             <div class="flex items-start justify-between gap-2 text-sm">
                 <div>
                     <p class="text-base-content/80 font-medium">
-                        Sales
+                        Khách hàng liên hệ
                     </p>
                     <div class="mt-3 flex items-center gap-2">
                         <p class="inline text-2xl font-semibold">
diff --git a/template/other/header.html b/template/other/header.html
index 9eed751..610fa80 100644
--- a/template/other/header.html
+++ b/template/other/header.html
@@ -1,6 +1,6 @@
-<!--  Start: Layout - Sidebar -->
+<!-- Start: Layout - Sidebar -->
 
-<input type="checkbox" id="layout-sidebar-toggle-trigger" class="hidden" aria-label="Toggle layout sidebar" />
+<!-- <input type="checkbox" id="layout-sidebar-toggle-trigger" class="hidden" aria-label="Toggle layout sidebar" />
 <input type="checkbox" id="layout-sidebar-hover-trigger" class="hidden" aria-label="Dense layout sidebar" />
 <div id="layout-sidebar-hover" class="bg-base-300 h-screen w-1"></div>
 
@@ -139,6 +139,524 @@
     </div>
 </div>
 
-<label for="layout-sidebar-toggle-trigger" id="layout-sidebar-backdrop"></label>
+<label for="layout-sidebar-toggle-trigger" id="layout-sidebar-backdrop"></label> -->
 
-<!--  End: Layout - Sidebar -->
\ No newline at end of file
+<!--  End: Layout - Sidebar -->
+
+
+
+
+
+<div role="navigation" aria-label="Navbar" class="" id="layout-topbar">
+    <div class="flex items-center justify-between px-6 py-3 bg-menu">
+        <div class="inline-flex items-center gap-5">
+            <a href="/">
+                <img src="{{ 'logo_new.png' | asset_url }}" class="h-5.5" />
+            </a>
+            <button
+                class="btn btn-outline btn-sm btn-ghost border-base-300 text-base-content/70 hidden h-9 w-100 justify-start gap-2 !text-sm md:flex bg-white"
+                onclick="document.getElementById('topbar-search-modal')?.showModal()">
+                <span class="iconify lucide--search size-4"></span>
+                <span>Tìm Kiếm</span>
+            </button>
+            <button
+                class="btn btn-outline btn-sm btn-square btn-ghost border-base-300 text-base-content/70 flex size-9 md:hidden"
+                aria-label="Search" onclick="document.getElementById('topbar-search-modal')?.showModal()">
+                <span class="iconify lucide--search size-4"></span>
+            </button>
+            <dialog id="topbar-search-modal" class="modal p-0">
+                <div class="modal-box bg-transparent p-0 shadow-none">
+                    <div class="bg-base-100 rounded-box">
+                        <div class="input w-full border-0 !outline-none">
+                            <span class="iconify lucide--search text-base-content/60 size-4.5"></span>
+                            <input type="search" class="grow" placeholder="Tìm kiếm" aria-label="Search" />
+                            <form method="dialog">
+                                <button class="btn btn-xs btn-circle btn-ghost" aria-label="Close">
+                                    <span class="iconify lucide--x text-base-content/80 size-4"></span>
+                                </button>
+                            </form>
+                        </div>
+                        <div class="border-base-300 flex items-center gap-3 border-t px-2 py-2">
+                            <div class="flex items-center gap-0.5">
+                                <div
+                                    class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
+                                    <span class="iconify lucide--arrow-up size-3.5"></span>
+                                </div>
+                                <div
+                                    class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
+                                    <span class="iconify lucide--arrow-down size-3.5"></span>
+                                </div>
+                                <p class="text-base-content/80 ms-1 text-sm">Điều hướng</p>
+                            </div>
+                            <div class="flex items-center gap-0.5 max-sm:hidden">
+                                <div
+                                    class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
+                                    <span class="iconify lucide--undo-2 size-3.5"></span>
+                                </div>
+                                <p class="text-base-content/80 ms-1 text-sm">Quay lại</p>
+                            </div>
+                            <div class="flex items-center gap-0.5">
+                                <div
+                                    class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
+                                    <span class="iconify lucide--corner-down-left size-3.5"></span>
+                                </div>
+                                <p class="text-base-content/80 ms-1 text-sm">Mở</p>
+                            </div>
+                            <div class="ms-auto flex items-center gap-0.5">
+                                <div
+                                    class="border-base-300 bg-base-200 flex h-5 items-center justify-center rounded-sm border px-1 text-sm/none shadow-xs">
+                                    esc
+                                </div>
+                                <p class="text-base-content/80 ms-1 text-sm">Đóng</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-base-100 rounded-box mt-4">
+                        <div class="px-5 py-3">
+                            <p class="text-base-content/80 text-sm font-medium">I'm looking for...</p>
+                            <div class="mt-2 flex flex-wrap gap-1.5">
+                                <div
+                                    class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
+                                    Writer
+                                </div>
+                                <div
+                                    class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
+                                    Editor
+                                </div>
+                                <div
+                                    class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
+                                    Explainer
+                                </div>
+                                <div
+                                    class="border-base-300 hover:bg-base-200 rounded-box flex cursor-pointer items-center gap-1 border border-dashed px-2.5 py-1 text-sm/none">
+                                    <span class="iconify lucide--plus size-3.5"></span>
+                                    Action
+                                </div>
+                            </div>
+                        </div>
+                        <hr class="border-base-300 h-px border-dashed" />
+
+                        <ul class="menu w-full pt-1">
+                            <li class="menu-title">Talk to assistant</li>
+                            <li>
+                                <div class="group">
+                                    <div
+                                        class="from-primary to-primary/80 mask mask-squircle text-primary-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
+                                        R
+                                    </div>
+                                    <p class="grow text-sm">Research Buddy</p>
+                                    <div
+                                        class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
+                                        <span class="iconify lucide--star text-orange-500"></span>
+                                        <div class="flex items-center gap-0.5">
+                                            <div
+                                                class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
+                                                <span class="iconify lucide--corner-down-left size-3.5"></span>
+                                            </div>
+                                            <p class="ms-1 text-sm opacity-80">Select</p>
+                                        </div>
+                                        <span class="iconify lucide--ellipsis-vertical opacity-80"></span>
+                                    </div>
+                                </div>
+                            </li>
+
+                            <li>
+                                <div class="group">
+                                    <div
+                                        class="from-secondary to-secondary/80 mask mask-squircle text-secondary-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
+                                        T
+                                    </div>
+                                    <p class="grow text-sm">Task Planner</p>
+                                    <div
+                                        class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
+                                        <span class="iconify lucide--star text-orange-500"></span>
+                                        <div class="flex items-center gap-0.5">
+                                            <div
+                                                class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
+                                                <span class="iconify lucide--corner-down-left size-3.5"></span>
+                                            </div>
+                                            <p class="ms-1 text-sm opacity-80">Select</p>
+                                        </div>
+                                        <span class="iconify lucide--ellipsis-vertical opacity-80"></span>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="group">
+                                    <div
+                                        class="from-success to-success/80 mask mask-squircle text-success-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
+                                        S
+                                    </div>
+                                    <p class="grow text-sm">Sparking Ideas</p>
+                                    <div
+                                        class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
+                                        <span class="iconify lucide--star text-orange-500"></span>
+                                        <div class="flex items-center gap-0.5">
+                                            <div
+                                                class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
+                                                <span class="iconify lucide--corner-down-left size-3.5"></span>
+                                            </div>
+                                            <p class="ms-1 text-sm opacity-80">Select</p>
+                                        </div>
+                                        <span class="iconify lucide--ellipsis-vertical opacity-80"></span>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="group">
+                                    <div
+                                        class="from-warning to-warning/80 mask mask-squircle text-warning-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
+                                        D
+                                    </div>
+                                    <p class="grow text-sm">Docs Assistant</p>
+                                    <div
+                                        class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
+                                        <span class="iconify lucide--star text-orange-500"></span>
+                                        <div class="flex items-center gap-0.5">
+                                            <div
+                                                class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
+                                                <span class="iconify lucide--corner-down-left size-3.5"></span>
+                                            </div>
+                                            <p class="ms-1 text-sm opacity-80">Select</p>
+                                        </div>
+                                        <span class="iconify lucide--ellipsis-vertical opacity-80"></span>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+
+                        <hr class="border-base-300 h-px border-dashed" />
+
+                        <ul class="menu w-full pt-1">
+                            <li class="menu-title flex flex-row items-center justify-between gap-2">
+                                <span>Tasks Manager</span>
+                                <span>Progress</span>
+                            </li>
+                            <li>
+                                <div>
+                                    <span class="iconify lucide--notebook size-4"></span>
+                                    <p class="grow text-sm">Creating an essay</p>
+                                    <progress class="progress progress-primary h-1 w-30" value="60"
+                                        max="100"></progress>
+                                </div>
+                            </li>
+                            <li>
+                                <div>
+                                    <span class="iconify lucide--message-circle size-4"></span>
+                                    <p class="grow text-sm">Summarizing chat</p>
+                                    <progress class="progress progress-secondary h-1 w-30" value="80"
+                                        max="100"></progress>
+                                </div>
+                            </li>
+                            <li>
+                                <div>
+                                    <span class="iconify lucide--code size-4"></span>
+                                    <p class="grow text-sm">Fixing syntax</p>
+                                    <progress class="progress progress-accent h-1 w-30" value="35" max="100"></progress>
+                                </div>
+                            </li>
+                            <li>
+                                <div>
+                                    <span class="iconify lucide--book-open size-4"></span>
+                                    <p class="grow text-sm">Reading docs</p>
+                                    <progress class="progress progress-info h-1 w-30" value="90" max="100"></progress>
+                                </div>
+                            </li>
+                            <li>
+                                <div>
+                                    <span class="iconify lucide--lightbulb size-4"></span>
+                                    <p class="grow text-sm">Generating ideas</p>
+                                    <progress class="progress progress-warning h-1 w-30" value="50"
+                                        max="100"></progress>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <form method="dialog" class="modal-backdrop">
+                    <button>close</button>
+                </form>
+            </dialog>
+        </div>
+        <div class="inline-flex items-center gap-0.5">
+
+            <div class="dropdown dropdown-bottom sm:dropdown-end dropdown-center">
+                <div tabindex="0" role="button" class="btn btn-circle btn-sm relative" aria-label="Notifications">
+                    <span class="iconify lucide--bell motion-preset-seesaw size-4.5"></span>
+                    <div class="status status-error status-sm absolute end-1 top-1"></div>
+                </div>
+                <div tabindex="0"
+                    class="dropdown-content bg-base-100 rounded-box mt-1 w-84 shadow-md duration-1000 hover:shadow-lg">
+                    <div class="bg-base-200/30 rounded-t-box border-base-200 border-b ps-4 pe-2 pt-3">
+                        <div class="flex items-center justify-between">
+                            <p class="font-medium">Notification</p>
+                            <button class="btn btn-xs btn-circle btn-ghost" aria-label="Close"
+                                onclick="document.activeElement.blur()">
+                                <span class="iconify lucide--x size-4"></span>
+                            </button>
+                        </div>
+                        <div class="-ms-2 mt-2 -mb-px flex items-center justify-between">
+                            <div role="tablist" class="tabs tabs-sm tabs-border">
+                                <div role="tab" class="tab tab-active gap-2 px-3 font-medium">
+                                    <span>All</span>
+                                    <div class="badge badge-sm">4</div>
+                                </div>
+                                <div role="tab" class="tab gap-2 px-3"><span>Team</span></div>
+                                <div role="tab" class="tab gap-2 px-3"><span>AI</span></div>
+                                <div role="tab" class="tab gap-2 px-3"><span>@mention</span></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="hover:bg-base-200/20 relative flex items-start gap-3 p-4 transition-all">
+                        <div class="avatar avatar-online size-12">
+                            <img src="../../assets/images//avatars/2.png"
+                                class="from-primary/80 to-primary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
+                                alt="" />
+                        </div>
+                        <div class="grow">
+                            <p class="text-sm leading-tight">Lena submitted a draft for review.</p>
+                            <p class="text-base-content/60 text-xs">15 min ago</p>
+                            <div class="mt-2 flex items-center gap-2">
+                                <button class="btn btn-sm btn-primary">Approve</button>
+                                <button class="btn btn-sm btn-outline border-base-300">Decline</button>
+                            </div>
+                        </div>
+                        <div class="status status-primary absolute end-4 top-4 size-1.5"></div>
+                    </div>
+                    <hr class="border-base-300 border-dashed" />
+                    <div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
+                        <div class="avatar avatar-offline size-12">
+                            <img src="/images/avatars/4.png"
+                                class="from-secondary/80 to-secondary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
+                                alt="" />
+                        </div>
+                        <div class="grow">
+                            <p class="text-sm leading-tight">Kai mentioned you in a project.</p>
+                            <p class="text-base-content/60 text-xs">22 min ago</p>
+                            <div
+                                class="from-base-200 via-base-200/80 rounded-box mt-2 flex items-center justify-between gap-2 bg-linear-to-r to-transparent py-1 ps-2.5">
+                                <p class="text-sm">Check model inputs?</p>
+                                <button class="btn btn-xs btn-ghost text-xs">
+                                    <span class="iconify lucide--reply size-3.5"></span>
+                                    Reply
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <hr class="border-base-300 border-dashed" />
+                    <div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
+                        <div class="avatar size-12">
+                            <img src="/images/avatars/5.png"
+                                class="mask mask-squircle bg-linear-to-b from-orange-500/80 to-orange-500/60 px-1 pt-1"
+                                alt="" />
+                        </div>
+                        <div class="grow">
+                            <p class="text-sm leading-tight">Your latest results are ready</p>
+                            <div
+                                class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
+                                <p class="text-sm">
+                                    Forecast Report
+                                    <span class="text-base-content/60 text-xs">(12 MB)</span>
+                                </p>
+                                <button class="btn btn-xs btn-square btn-ghost text-xs">
+                                    <span class="iconify lucide--arrow-down-to-line size-4"></span>
+                                </button>
+                            </div>
+                            <div
+                                class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
+                                <p class="text-sm">
+                                    Generated Summary
+                                    <span class="text-base-content/60 text-xs">(354 KB)</span>
+                                </p>
+                                <button class="btn btn-xs btn-square btn-ghost text-xs">
+                                    <span class="iconify lucide--arrow-down-to-line size-4"></span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <hr class="border-base-200" />
+                    <div class="flex items-center justify-between px-2 py-2">
+                        <button class="btn btn-sm btn-soft btn-primary">View All</button>
+                        <div class="flex items-center gap-1">
+                            <button class="btn btn-sm btn-square btn-ghost">
+                                <span class="iconify lucide--check-check size-4"></span>
+                            </button>
+                            <button class="btn btn-sm btn-square btn-ghost">
+                                <span class="iconify lucide--bell-ring size-4"></span>
+                            </button>
+                            <button class="btn btn-sm btn-square btn-ghost">
+                                <span class="iconify lucide--settings size-4"></span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="drawer drawer-end">
+                <input id="topbar-profile-drawer" type="checkbox" class="drawer-toggle" />
+                <div class="drawer-content">
+                    <label for="topbar-profile-drawer" class="btn btn-ghost flex items-center gap-2 px-1.5">
+                        <div class="avatar">
+                            <div class="bg-base-200 mask mask-squircle w-8">
+                                <img src="../../assets/images/avatars/1.png" alt="Avatar" />
+                            </div>
+                        </div>
+                        <div class="text-start">
+                            <p class="text-sm/none text-white">Denish</p>
+                            <p class="text-base-content/50 mt-0.5 text-xs/none text-white">Team</p>
+                        </div>
+                    </label>
+                </div>
+                <div class="drawer-side">
+                    <label for="topbar-profile-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+                    <div class="h-full w-72 p-2 sm:w-84">
+                        <div class="bg-base-100 rounded-box relative flex h-full flex-col pt-4 sm:pt-8">
+                            <label for="topbar-profile-drawer"
+                                class="btn btn-xs btn-circle btn-ghost absolute start-2 top-2" aria-label="Close">
+                                <span class="iconify lucide--x size-4"></span>
+                            </label>
+                            <div class="flex flex-col items-center">
+                                <div class="relative">
+                                    <div
+                                        class="avatar bg-base-200 isolate size-20 cursor-pointer overflow-hidden rounded-full px-1 pt-1 md:size-24">
+                                        <img src="/images/avatars/1.png" alt="User Avatar" />
+                                    </div>
+                                    <div
+                                        class="bg-base-100 absolute end-0 bottom-0 flex items-center justify-center rounded-full p-1.5 shadow-sm">
+                                        <span class="iconify lucide--pencil size-4"></span>
+                                    </div>
+                                </div>
+                                <p class="mt-4 text-lg/none font-medium sm:mt-8">John Doe</p>
+                                <p class="text-base-content/60 mt-1 text-sm">john@company.com</p>
+                                <div class="mt-4 flex items-center gap-2 *:cursor-pointer sm:mt-6">
+                                    <div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
+                                        <img src="/images/avatars/2.png" alt="Team member" />
+                                    </div>
+                                    <div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
+                                        <img src="/images/avatars/3.png" alt="Team member" />
+                                    </div>
+                                    <div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
+                                        <img src="/images/avatars/4.png" alt="Team member" />
+                                    </div>
+                                    <div
+                                        class="bg-base-200 border-base-300 flex size-10 items-center justify-center rounded-full border border-dashed">
+                                        <span class="iconify lucide--plus size-4.5"></span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="border-base-300 mt-4 grow overflow-auto border-t border-dashed px-2 sm:mt-6">
+                                <ul class="menu w-full p-2">
+                                    <li class="menu-title">Account</li>
+                                    <li>
+                                        <a href="#">
+                                            <span class="iconify lucide--user size-4.5"></span>
+                                            <span>View Profile</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#">
+                                            <span class="iconify lucide--users size-4.5"></span>
+                                            <span>Team</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#">
+                                            <span class="iconify lucide--mail-plus size-4.5"></span>
+                                            <span>Invites</span>
+                                            <div class="badge badge-sm">4</div>
+                                        </a>
+                                    </li>
+                                    <li class="menu-title">Platform</li>
+                                    <li>
+                                        <a href="#">
+                                            <span class="iconify lucide--settings size-4.5"></span>
+                                            <span>Settings</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#">
+                                            <span class="iconify lucide--credit-card size-4.5"></span>
+                                            <span>Billing</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#">
+                                            <span class="iconify lucide--help-circle size-4.5"></span>
+                                            <span>Support</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="text-error hover:bg-error/10" href="#">
+                                            <span class="iconify lucide--log-out size-4.5"></span>
+                                            <span>Sign Out</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div
+                                class="rounded-box from-primary to-secondary text-primary-content m-4 mt-auto flex cursor-pointer flex-col items-center justify-center bg-linear-to-br p-4 text-center transition-all hover:opacity-95 sm:p-6">
+                                <div
+                                    class="bg-primary-content/10 border-primary-content/10 flex items-center justify-center rounded-full border p-1.5 sm:p-2.5">
+                                    <span class="iconify lucide--zap size-5 sm:size-6"></span>
+                                </div>
+                                <p
+                                    class="mt-2 font-mono text-[11px] font-medium tracking-wider uppercase opacity-70 sm:mt-4">
+                                    Upgrade your plan
+                                </p>
+                                <p class="mt-1 leading-none font-medium sm:text-lg">
+                                    Save
+                                    <span class="font-semibold underline">30%</span>
+                                    today
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="flex items-center justify-between px-3 gap-3 relative">
+        <ul class="menu menu-horizontal">
+            {% for _category in global.main_menu %}
+            {% assign _type = _category[0] %}
+            {% assign _menuArray = _category[1].menu %}
+            {% if _category[1].enable == 1 %}
+            <li>
+                <div class="flex items-center gap-3">
+                    {% if _type == 'order' %}
+                    <span class="iconify lucide--store tw-tsa"></span>
+                    {% elsif _type == 'product' %}
+                    <span class="iconify lucide--package tw-tsa"></span>
+                    {% elsif _type == 'customer' %}
+                    <span class="iconify lucide--users tw-tsa"></span>
+                    {% elsif _type == 'article' %}
+                    <span class="iconify lucide--newspaper tw-tsa"></span>
+                    {% elsif _type == 'marketing' %}
+                    <span class="iconify lucide--megaphone tw-tsa"></span>
+                    {% elsif _type == 'job' %}
+                    <span class="iconify lucide--briefcase tw-tsa"></span>
+                    {% elsif _type == 'pcbuilder' %}
+                    <span class="iconify lucide--monitor-smartphone tw-tsa"></span>
+                    {% elsif _type == 'payinstall' %}
+                    <span class="iconify lucide--handshake tw-tsa"></span>
+                    {% elsif _type == 'distributor' %}
+                    <span class="iconify lucide--store tw-tsa"></span>
+                    {% elsif _type == 'report' %}
+                    <span class="iconify lucide--pie-chart tw-tsa"></span>
+                    {% elsif _type == 'system' %}
+                    <span class="iconify hugeicons--settings-04 tw-tsa"></span>
+                    {% endif %}
+                    <span class="grow">{{ _category[1].name }}</span>
+                </div>
+                <ul class="p-2 submenu">
+                    {% for _item in _menuArray %}
+                    <li><a href="{{ _item.url }}" style="white-space: nowrap">{{ _item.name }}</a></li>
+                    {% endfor %}
+                </ul>
+            </li>
+            {% endif %}
+            {% endfor %}
+        </ul>
+
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/template/theme.html b/template/theme.html
index cf00159..b2844d6 100644
--- a/template/theme.html
+++ b/template/theme.html
@@ -21,28 +21,23 @@
         }
     </script>
 
-    <link rel="stylesheet" href="{{'style.css' | asset_url}}?v=1.01">
+    <link rel="stylesheet" href="{{'style.css' | asset_url}}?{{ 'now' | date : '%Y-%m-%d.%H.%M.%S' }}">
 
 </head>
 
 <body>
 
     <div class="size-full">
-        <div class="flex">
+
+        <div class="flex h-screen min-w-0 grow flex-col overflow-auto">
 
             {% include "other/header" %}
 
-            <div class="flex h-screen min-w-0 grow flex-col overflow-auto">
-
-                {% include "other/topbar" %}
-
-
-                <div id="layout-content">
-                    {{ page_content }}
-                </div>
+            <div id="layout-content">
+                {{ page_content }}
             </div>
-
         </div>
+
     </div>