diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 145590c..23af27c 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -705,6 +705,139 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
+/* NavBar */
+
+.menu-item {
+  display: block;
+  width: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-align: left;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.menu-item-active {
+  display: block;
+  width: 100%;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-align: left;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.container-menu-item {
+  position: absolute;
+  right: 0px;
+  z-index: 10;
+  margin-top: 0.5rem;
+  width: 12rem;
+  transform-origin: top right;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
+  --tw-ring-opacity: 0.05;
+}
+
+.container-menu-item:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.container-menu-profile {
+  display: block;
+  flex-shrink: 0;
+  border-bottom-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(249 250 251 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+/* Aside */
+
+.aside-single-item-active {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-radius: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.aside-single-item-inactive {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-radius: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 600;
+  color: rgb(46 53 54 / var(--tw-text-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.group:hover .aside-single-item-inactive {
+  background-color: rgb(205 222 227 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.aside-single-item-icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.aside-single-item-icon-inactive {
+  height: 1.5rem;
+  width: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(46 53 54 / var(--tw-text-opacity));
+}
+
+.group:hover .aside-single-item-icon-inactive {
+  stroke: #fff;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1128,10 +1261,6 @@ select {
   width: 10rem;
 }
 
-.w-48 {
-  width: 12rem;
-}
-
 .w-5 {
   width: 1.25rem;
 }
@@ -1524,11 +1653,6 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-gray-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(249 250 251 / var(--tw-border-opacity));
-}
-
 .border-transparent {
   border-color: transparent;
 }
@@ -1833,10 +1957,6 @@ select {
   padding-left: 2.75rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -2039,11 +2159,6 @@ select {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -2238,10 +2353,6 @@ select {
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
 
-.ring-transparent {
-  --tw-ring-color: transparent;
-}
-
 .ring-opacity-5 {
   --tw-ring-opacity: 0.05;
 }
@@ -2446,10 +2557,6 @@ select {
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
 
-.focus\:border-transparent:focus {
-  border-color: transparent;
-}
-
 .focus\:border-vtd-primary-300:focus {
   --tw-border-opacity: 1;
   border-color: rgb(104 157 170 / var(--tw-border-opacity));
@@ -2554,16 +2661,6 @@ select {
   background-color: rgb(53 124 141 / var(--tw-bg-opacity));
 }
 
-.group:hover .group-hover\:bg-primary-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(205 222 227 / var(--tw-bg-opacity));
-}
-
-.group:hover .group-hover\:bg-primary-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
-}
-
 .group:hover .group-hover\:fill-gray-500 {
   fill: #6b7280;
 }
@@ -2572,10 +2669,6 @@ select {
   fill: #fff;
 }
 
-.group:hover .group-hover\:stroke-white {
-  stroke: #fff;
-}
-
 .group:hover .group-hover\:text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -2936,10 +3029,6 @@ select {
     bottom: 0px;
   }
 
-  .md\:ml-0 {
-    margin-left: 0px;
-  }
-
   .md\:ml-6 {
     margin-left: 1.5rem;
   }
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index 5ee29ef..c41025a 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -3,7 +3,36 @@
 @tailwind utilities;
 
 @layer components {
-  .btn {
-    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
-  }
+    /* NavBar */
+    .menu-item {
+        @apply w-full text-left block px-4 py-3 text-base text-gray-800;
+    }
+    .menu-item-active {
+        @apply bg-gray-100 w-full text-left block px-4 py-3 text-base text-gray-800;
+    }
+    .container-menu-item {
+        @apply absolute right-0 z-10 w-48 mt-2 overflow-hidden origin-top-right bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
+    }
+    .container-menu-profile {
+        @apply flex-shrink-0 block px-4 py-2 border-b bg-primary-500 border-gray-50;
+    }
+    /* Aside */
+    .aside-single-item {
+        @apply w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl;
+    }
+    .aside-single-item-active {
+        @apply aside-single-item bg-primary-500 text-white font-bold;
+    }
+    .aside-single-item-inactive {
+        @apply aside-single-item font-semibold text-aside group-hover:bg-primary-100 text-gray-600 group-hover:text-white group-hover:bg-primary-500;
+    }
+    .aside-single-item-icon{
+        @apply h-6 w-6;
+    }
+    .aside-single-item-icon-active{
+        @apply aside-single-item-icon stroke-white;
+    }
+    .aside-single-item-icon-inactive{
+        @apply aside-single-item-icon text-aside group-hover:stroke-white;
+    }
 }
diff --git a/src/components/Navigation/Aside/AsideMenuMultiple.vue b/src/components/Navigation/Aside/AsideMenuMultiple.vue
index 4df3a2f..d8f0af4 100644
--- a/src/components/Navigation/Aside/AsideMenuMultiple.vue
+++ b/src/components/Navigation/Aside/AsideMenuMultiple.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineProps, onMounted } from 'vue'
+import { computed } from 'vue'
 import type { MenuItemModel } from '@/utils/interfaces'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import { useMenuStore } from '@/stores/menu'
diff --git a/src/components/Navigation/Aside/AsideMenuSingle.vue b/src/components/Navigation/Aside/AsideMenuSingle.vue
index 13bc2aa..f7b5d44 100644
--- a/src/components/Navigation/Aside/AsideMenuSingle.vue
+++ b/src/components/Navigation/Aside/AsideMenuSingle.vue
@@ -20,10 +20,11 @@ defineProps({
 <template>
     <div class="group">
         <RouterLink :to="item.path"
-            :class="[selected ? 'bg-primary-500 text-white font-bold' : 'font-semibold text-aside group-hover:bg-primary-100 text-gray-600 group-hover:text-white group-hover:bg-primary-500', 'w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl', isChildren ? 'mt-1' : 'mt-0']">
+            :class="[selected ? 'aside-single-item-active' : 'aside-single-item-inactive', isChildren ? 'mt-1' : 'mt-0']">
 
-            <svg v-if="isChildren" :class="[selected ? 'stroke-white' : 'text-aside group-hover:stroke-white', 'h-6 w-6']"
-                width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+            <svg v-if="isChildren"
+                :class="[selected ? 'aside-single-item-icon stroke-white' : 'aside-single-item-icon-inactive']" width="16"
+                height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                 <g id="DotOutline">
                     <path id="Vector" opacity="0.2"
                         d="M9.5 8C9.5 8.29667 9.41203 8.58668 9.24721 8.83336C9.08238 9.08003 8.84812 9.27229 8.57403 9.38582C8.29994 9.49935 7.99834 9.52906 7.70737 9.47118C7.41639 9.4133 7.14912 9.27044 6.93934 9.06066C6.72956 8.85088 6.5867 8.58361 6.52882 8.29264C6.47094 8.00166 6.50065 7.70006 6.61418 7.42597C6.72771 7.15189 6.91997 6.91762 7.16665 6.7528C7.41332 6.58797 7.70333 6.5 8 6.5C8.39783 6.5 8.77936 6.65804 9.06066 6.93934C9.34197 7.22064 9.5 7.60218 9.5 8Z"
diff --git a/src/components/Navigation/Header.vue b/src/components/Navigation/Header.vue
index d9c5e84..9277c78 100644
--- a/src/components/Navigation/Header.vue
+++ b/src/components/Navigation/Header.vue
@@ -52,30 +52,7 @@ const showDialogLogout = () => {
             <img class="w-auto h-11" :src="IconApp" alt="PLN" />
         </div>
         <div class="flex justify-end w-full px-4">
-            <!-- <div class="flex flex-1">
-                <div class="flex w-full md:ml-0">
-                    <button @click="command.showCommandPalettes"
-                        class="relative w-full text-gray-400 border-0 border-transparent rounded-xl hover:text-primary-500 ring-0 ring-transparent focus:border-transparent focus:border-0 focus:ring-0">
-                        <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
-                            <MagnifyingGlassIcon class="w-5 h-5" aria-hidden="true" />
-                            <span class="hidden ml-2 sm:text-sm md:block">Cari menu...</span>
-                        </div>
-                    </button>
-                    <img :src="Icon" alt="pln" class="md:hidden">
-                </div>
-            </div> -->
-
             <div class="flex items-center ml-4 md:ml-6">
-                <!-- <button type="button"
-                    class="p-1 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
-                    <span class="sr-only">FAQ</span>
-                    <QuestionMarkCircleIcon class="w-6 h-6" aria-hidden="true" />
-                </button>
-                <button type="button"
-                    class="p-1 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
-                    <span class="sr-only">Manual Book</span>
-                    <BookOpenIcon class="w-6 h-6" aria-hidden="true" />
-                </button -->
                 <button @click="command.showCommandPalettes" type="button"
                     class="flex flex-row items-center md:w-[300px] p-2 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
                     <span class="sr-only">Search</span>
@@ -101,13 +78,11 @@ const showDialogLogout = () => {
                         leave-active-class="transition duration-75 ease-in"
                         leave-from-class="transform scale-100 opacity-100" leave-to-class="transform scale-95 opacity-0">
 
-                        <MenuItems
-                            class="absolute right-0 z-10 w-48 mt-2 overflow-hidden origin-top-right bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                            <div class="flex-shrink-0 block px-4 py-2 border-b bg-primary-500 border-gray-50 group">
+                        <MenuItems class="container-menu-item">
+                            <div class="container-menu-profile group">
                                 <div class="flex items-center">
                                     <div>
-                                        <!-- <img class="inline-block rounded-full h-9 w-9" :src="user.user_image" alt="" /> -->
-                                        <PictureInitial class-name="nline-block" size-class="w-9 h-9"
+                                        <PictureInitial class-name="inline-block" size-class="w-9 h-9"
                                             background-class="bg-secondary-100"
                                             font-class="text-xs font-normal font-semibold text-primary-500"
                                             :name="user.user_name" />
@@ -123,8 +98,7 @@ const showDialogLogout = () => {
                                 </div>
                             </div>
                             <MenuItem v-slot="{ active }">
-                            <button @click="showDialogLogout"
-                                :class="[active ? 'bg-gray-100' : '', 'w-full text-left block px-4 py-3 text-base text-gray-800']">
+                            <button @click="showDialogLogout" :class="[active ? 'menu-item-active' : 'menu-item']">
                                 Log out
                             </button>
                             </MenuItem>