diff --git a/src/App.vue b/src/App.vue
index 4bcec71..6e654db 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,18 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
 import { NotificationProvider } from '@/components/Notification'
+import { useDialogStore } from '@/stores/dialog'
+import ActionDialog from '@/components/Dialogs/ActionDialog.vue';
+
+const dialog = useDialogStore()
 </script>
 
 <template>
   <NotificationProvider>
+    <ActionDialog :show-cancel-button="dialog.showCancelButton" :dismiss-on-action="dialog.dismissOnAction"
+      :open="dialog.open" :title="dialog.title" :message="dialog.content" :confirm-text="dialog.confirmText"
+      :cancel-text="dialog.cancelText" @on-close="dialog.open = false" @on-confirm="dialog.onConfirm"
+      @on-cancel="dialog.onCancel" :type="dialog.type" />
     <RouterView />
   </NotificationProvider>
 </template>
diff --git a/src/assets/css/base.css b/src/assets/css/base.css
index fe856d0..77615aa 100644
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -1,78 +1,3 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-
 /* Firefox */
 * {
   scrollbar-width: 4px;
@@ -93,4 +18,40 @@ body {
   background-color: var(--secondary);
   border-radius: 14px;
   border: 3px solid var(--primary);
+}
+
+* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
+.no-scroll-bar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.no-scroll-bar::-webkit-scrollbar {
+    display: none;
+}
+
+.scroll-container::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    background-color: #F3F4F6;
+    transition: background-color 0.5s;
+}
+
+.scroll-container::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: #D1D5DB;
+    transition: background-color 0.5s;
+}
+
+.scroll-hidden::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    background-color: transparent;
+    transition: background-color 0.5s;
+}
+
+.scroll-hidden::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: transparent;
+    transition: background-color 0.5s;
 }
\ No newline at end of file
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 7717857..efee022 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -1,39 +1,3 @@
-/* @import './base.css'; */
+@import './base.css';
 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700&display=swap');
-@import './style.css';
-
-
-
-/* #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-} */
-
-/* a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-} */
+@import './style.css';
\ No newline at end of file
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index e2cc16b..8e44cc5 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -980,6 +980,13 @@ select {
   margin-top: 1.5rem;
 }
 
+.line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
 .block {
   display: block;
 }
@@ -1068,6 +1075,10 @@ select {
   height: 74vh;
 }
 
+.h-\[calc\(100\%-64px\)\] {
+  height: calc(100% - 64px);
+}
+
 .h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -1382,6 +1393,10 @@ select {
   align-items: center;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
@@ -1439,6 +1454,12 @@ select {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-x-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0px * var(--tw-space-x-reverse));
+  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1501,6 +1522,10 @@ select {
   border-radius: 0.75rem;
 }
 
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
 .rounded-l-full {
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
@@ -1511,6 +1536,11 @@ select {
   border-bottom-right-radius: 9999px;
 }
 
+.rounded-t-3xl {
+  border-top-left-radius: 1.5rem;
+  border-top-right-radius: 1.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1694,6 +1724,11 @@ select {
   background-color: rgb(204 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-secondary-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 235 239 / var(--tw-bg-opacity));
+}
+
 .bg-transparent {
   background-color: transparent;
 }
@@ -1718,6 +1753,26 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 229 229 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 229 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 204 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 204 0 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-25 {
   --tw-bg-opacity: 0.25;
 }
@@ -1746,6 +1801,18 @@ select {
   fill: #035b71;
 }
 
+.fill-red-600 {
+  fill: #cc0000;
+}
+
+.fill-secondary-600 {
+  fill: #007b8d;
+}
+
+.fill-gray-400 {
+  fill: #9ca3af;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -2134,6 +2201,11 @@ select {
   color: rgb(234 88 12 / var(--tw-text-opacity));
 }
 
+.text-primary-50 {
+  --tw-text-opacity: 1;
+  color: rgb(230 239 241 / var(--tw-text-opacity));
+}
+
 .text-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
@@ -2179,6 +2251,16 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-yellow-700 {
+  --tw-text-opacity: 1;
+  color: rgb(153 153 0 / var(--tw-text-opacity));
+}
+
+.text-secondary-600 {
+  --tw-text-opacity: 1;
+  color: rgb(0 123 141 / var(--tw-text-opacity));
+}
+
 .text-opacity-100 {
   --tw-text-opacity: 1;
 }
@@ -2476,6 +2558,21 @@ select {
   background-color: rgb(2 73 90 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 0 0 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-yellow-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 0 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-primary-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+}
+
 .hover\:text-gray-500:hover {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -2585,6 +2682,11 @@ select {
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(3 91 113 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-opacity-10:focus {
   --tw-ring-opacity: 0.1;
 }
@@ -2623,6 +2725,14 @@ select {
   background-color: rgb(205 222 227 / var(--tw-bg-opacity));
 }
 
+.group:hover .group-hover\:fill-gray-600 {
+  fill: #4b5563;
+}
+
+.group:hover .group-hover\:fill-gray-500 {
+  fill: #6b7280;
+}
+
 .group:hover .group-hover\:text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -2817,6 +2927,10 @@ select {
     max-width: 24rem;
   }
 
+  .sm\:flex-1 {
+    flex: 1 1 0%;
+  }
+
   .sm\:translate-y-0 {
     --tw-translate-y: 0px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2862,10 +2976,28 @@ select {
     align-items: center;
   }
 
+  .sm\:justify-start {
+    justify-content: flex-start;
+  }
+
+  .sm\:justify-between {
+    justify-content: space-between;
+  }
+
   .sm\:gap-3 {
     gap: 0.75rem;
   }
 
+  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 1;
+  }
+
   .sm\:overflow-visible {
     overflow: visible;
   }
@@ -2932,6 +3064,10 @@ select {
     padding-right: 1.5rem;
   }
 
+  .sm\:pb-6 {
+    padding-bottom: 1.5rem;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
@@ -2987,6 +3123,10 @@ select {
     margin-left: 20rem;
   }
 
+  .md\:mr-4 {
+    margin-right: 1rem;
+  }
+
   .md\:mr-6 {
     margin-right: 1.5rem;
   }
@@ -3011,6 +3151,10 @@ select {
     width: 20rem;
   }
 
+  .md\:w-\[300px\] {
+    width: 300px;
+  }
+
   .md\:max-w-\[220px\] {
     max-width: 220px;
   }
@@ -3027,6 +3171,11 @@ select {
     flex-direction: column;
   }
 
+  .md\:bg-primary-500 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+  }
+
   .md\:p-20 {
     padding: 5rem;
   }
diff --git a/src/assets/icons/dot-outline.svg b/src/assets/icons/dot-outline.svg
new file mode 100644
index 0000000..c4ff242
--- /dev/null
+++ b/src/assets/icons/dot-outline.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" 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" fill="#4B5563"/>
+<path id="Vector_2" d="M8 6C7.60444 6 7.21776 6.1173 6.88886 6.33706C6.55996 6.55682 6.30362 6.86918 6.15224 7.23463C6.00087 7.60009 5.96126 8.00222 6.03843 8.39018C6.1156 8.77814 6.30608 9.13451 6.58579 9.41421C6.86549 9.69392 7.22186 9.8844 7.60982 9.96157C7.99778 10.0387 8.39992 9.99913 8.76537 9.84776C9.13082 9.69638 9.44318 9.44004 9.66294 9.11114C9.8827 8.78224 10 8.39556 10 8C10 7.46957 9.78929 6.96086 9.41421 6.58579C9.03914 6.21071 8.53043 6 8 6ZM8 9C7.80222 9 7.60888 8.94135 7.44443 8.83147C7.27998 8.72159 7.15181 8.56541 7.07612 8.38268C7.00043 8.19996 6.98063 7.99889 7.01922 7.80491C7.0578 7.61093 7.15304 7.43275 7.29289 7.29289C7.43275 7.15304 7.61093 7.0578 7.80491 7.01921C7.99889 6.98063 8.19996 7.00043 8.38268 7.07612C8.56541 7.15181 8.72159 7.27998 8.83147 7.44443C8.94135 7.60888 9 7.80222 9 8C9 8.26522 8.89464 8.51957 8.70711 8.70711C8.51957 8.89464 8.26522 9 8 9Z" fill="#4B5563"/>
+</g>
+</svg>
diff --git a/src/assets/icons/lightning-slash.svg b/src/assets/icons/lightning-slash.svg
new file mode 100644
index 0000000..a931b66
--- /dev/null
+++ b/src/assets/icons/lightning-slash.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<g id="LightningSlash">
+<path id="Vector" opacity="0.2" d="M9 22.5L10.5 15L4.5 12.75L15 1.5L13.5 9L19.5 11.25L9 22.5Z" fill="#035B71"/>
+<path id="Vector_2" d="M5.05494 3.24562C4.98908 3.17137 4.90914 3.11094 4.81974 3.06782C4.73035 3.0247 4.63329 2.99975 4.53419 2.99442C4.43508 2.98909 4.3359 3.00348 4.2424 3.03676C4.1489 3.07004 4.06293 3.12155 3.98949 3.1883C3.91604 3.25505 3.85657 3.33571 3.81452 3.42561C3.77248 3.51552 3.74869 3.61287 3.74455 3.71203C3.74041 3.81119 3.75599 3.91019 3.79039 4.00329C3.82479 4.09638 3.87732 4.18172 3.94494 4.25437L7.62463 8.30249L3.95151 12.24C3.86623 12.3299 3.80453 12.4394 3.77194 12.559C3.73935 12.6785 3.73687 12.8042 3.76473 12.9249C3.79258 13.0456 3.84991 13.1576 3.93158 13.2507C4.01325 13.3439 4.11672 13.4153 4.23276 13.4587L9.63557 15.4847L8.26494 22.3528C8.23382 22.5125 8.2555 22.6781 8.3267 22.8244C8.3979 22.9707 8.51477 23.0899 8.65966 23.164C8.80455 23.2381 8.96961 23.263 9.12992 23.2351C9.29024 23.2071 9.43711 23.1278 9.54838 23.0091L15.3478 16.7953L18.9449 20.7516C19.0108 20.8258 19.0908 20.8862 19.1801 20.9294C19.2695 20.9725 19.3666 20.9974 19.4657 21.0028C19.5648 21.0081 19.664 20.9937 19.7575 20.9604C19.851 20.9271 19.937 20.8756 20.0104 20.8089C20.0839 20.7421 20.1433 20.6615 20.1854 20.5716C20.2274 20.4817 20.2512 20.3843 20.2553 20.2851C20.2595 20.186 20.2439 20.087 20.2095 19.9939C20.1751 19.9008 20.1226 19.8154 20.0549 19.7428L5.05494 3.24562ZM10.2534 20.0625L11.2349 15.1519C11.2701 14.9777 11.2422 14.7967 11.1564 14.6412C11.0705 14.4856 10.9323 14.3656 10.7662 14.3025L5.81244 12.4416L8.63619 9.41624L14.3343 15.6844L10.2534 20.0625ZM10.1868 6.65624C10.1148 6.58904 10.0567 6.50829 10.0158 6.41863C9.97502 6.32896 9.95225 6.23213 9.94886 6.13366C9.94546 6.0352 9.9615 5.93702 9.99606 5.84476C10.0306 5.75249 10.083 5.66794 10.1503 5.59593L14.4515 0.987181C14.5628 0.868433 14.7097 0.789097 14.87 0.761147C15.0303 0.733196 15.1953 0.758146 15.3402 0.832232C15.4851 0.906318 15.602 1.02552 15.6732 1.17185C15.7444 1.31818 15.7661 1.4837 15.7349 1.64343L14.3606 8.52187L19.7634 10.5478C19.8786 10.5915 19.9812 10.6629 20.0622 10.7557C20.1433 10.8485 20.2002 10.9598 20.228 11.0798C20.2558 11.1998 20.2536 11.3248 20.2216 11.4438C20.1897 11.5627 20.1289 11.672 20.0446 11.7619L17.954 14.0016C17.8174 14.1429 17.6307 14.225 17.4342 14.2301C17.2377 14.2352 17.047 14.1629 16.9032 14.0289C16.7595 13.8948 16.6741 13.7096 16.6654 13.5132C16.6568 13.3168 16.7257 13.1249 16.8571 12.9787L18.1874 11.5584L13.2374 9.70218C13.0714 9.63906 12.9331 9.51904 12.8472 9.36349C12.7614 9.20794 12.7336 9.02696 12.7687 8.85281L13.7503 3.94218L11.2499 6.62062C11.1826 6.69302 11.1017 6.75139 11.0117 6.79239C10.9218 6.83339 10.8246 6.8562 10.7258 6.85951C10.627 6.86282 10.5285 6.84657 10.436 6.81168C10.3435 6.7768 10.2588 6.72397 10.1868 6.65624Z" fill="#035B71"/>
+</g>
+</svg>
diff --git a/src/assets/icons/monitor.svg b/src/assets/icons/monitor.svg
new file mode 100644
index 0000000..596ab99
--- /dev/null
+++ b/src/assets/icons/monitor.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<g id="Monitor">
+<path id="Vector" opacity="0.2" d="M21 6V16.5C21 16.8978 20.842 17.2794 20.5607 17.5607C20.2794 17.842 19.8978 18 19.5 18H4.5C4.10218 18 3.72064 17.842 3.43934 17.5607C3.15804 17.2794 3 16.8978 3 16.5V6C3 5.60218 3.15804 5.22064 3.43934 4.93934C3.72064 4.65804 4.10218 4.5 4.5 4.5H19.5C19.8978 4.5 20.2794 4.65804 20.5607 4.93934C20.842 5.22064 21 5.60218 21 6Z" fill="#035B71"/>
+<path id="Vector_2" d="M19.5 3.75H4.5C3.90326 3.75 3.33097 3.98705 2.90901 4.40901C2.48705 4.83097 2.25 5.40326 2.25 6V16.5C2.25 17.0967 2.48705 17.669 2.90901 18.091C3.33097 18.5129 3.90326 18.75 4.5 18.75H19.5C20.0967 18.75 20.669 18.5129 21.091 18.091C21.5129 17.669 21.75 17.0967 21.75 16.5V6C21.75 5.40326 21.5129 4.83097 21.091 4.40901C20.669 3.98705 20.0967 3.75 19.5 3.75ZM20.25 16.5C20.25 16.6989 20.171 16.8897 20.0303 17.0303C19.8897 17.171 19.6989 17.25 19.5 17.25H4.5C4.30109 17.25 4.11032 17.171 3.96967 17.0303C3.82902 16.8897 3.75 16.6989 3.75 16.5V6C3.75 5.80109 3.82902 5.61032 3.96967 5.46967C4.11032 5.32902 4.30109 5.25 4.5 5.25H19.5C19.6989 5.25 19.8897 5.32902 20.0303 5.46967C20.171 5.61032 20.25 5.80109 20.25 6V16.5ZM15.75 21C15.75 21.1989 15.671 21.3897 15.5303 21.5303C15.3897 21.671 15.1989 21.75 15 21.75H9C8.80109 21.75 8.61032 21.671 8.46967 21.5303C8.32902 21.3897 8.25 21.1989 8.25 21C8.25 20.8011 8.32902 20.6103 8.46967 20.4697C8.61032 20.329 8.80109 20.25 9 20.25H15C15.1989 20.25 15.3897 20.329 15.5303 20.4697C15.671 20.6103 15.75 20.8011 15.75 21Z" fill="#035B71"/>
+</g>
+</svg>
diff --git a/src/assets/icons/smiley-sad.svg b/src/assets/icons/smiley-sad.svg
new file mode 100644
index 0000000..69df489
--- /dev/null
+++ b/src/assets/icons/smiley-sad.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<g id="SmileySad">
+<path id="Vector" opacity="0.2" d="M21 12C21 13.78 20.4722 15.5201 19.4832 17.0001C18.4943 18.4802 17.0887 19.6337 15.4442 20.3149C13.7996 20.9961 11.99 21.1743 10.2442 20.8271C8.49836 20.4798 6.89472 19.6226 5.63604 18.364C4.37737 17.1053 3.5202 15.5016 3.17294 13.7558C2.82567 12.01 3.0039 10.2004 3.68509 8.55585C4.36628 6.91131 5.51983 5.50571 6.99987 4.51677C8.47991 3.52784 10.22 3 12 3C14.387 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z" fill="#035B71"/>
+<path id="Vector_2" d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM12 20.25C10.3683 20.25 8.77326 19.7661 7.41655 18.8596C6.05984 17.9531 5.00242 16.6646 4.378 15.1571C3.75358 13.6496 3.5902 11.9908 3.90853 10.3905C4.22685 8.79016 5.01259 7.32015 6.16637 6.16637C7.32016 5.01259 8.79017 4.22685 10.3905 3.90852C11.9909 3.59019 13.6497 3.75357 15.1571 4.37799C16.6646 5.00242 17.9531 6.05984 18.8596 7.41655C19.7661 8.77325 20.25 10.3683 20.25 12C20.2475 14.1873 19.3775 16.2843 17.8309 17.8309C16.2843 19.3775 14.1873 20.2475 12 20.25ZM7.5 10.125C7.5 9.9025 7.56598 9.68499 7.6896 9.49998C7.81322 9.31498 7.98892 9.17078 8.19449 9.08564C8.40005 9.00049 8.62625 8.97821 8.84448 9.02162C9.06271 9.06502 9.26317 9.17217 9.4205 9.3295C9.57783 9.48684 9.68498 9.68729 9.72839 9.90552C9.7718 10.1238 9.74952 10.35 9.66437 10.5555C9.57922 10.7611 9.43503 10.9368 9.25002 11.0604C9.06502 11.184 8.84751 11.25 8.625 11.25C8.32664 11.25 8.04049 11.1315 7.82951 10.9205C7.61853 10.7095 7.5 10.4234 7.5 10.125ZM16.5 10.125C16.5 10.3475 16.434 10.565 16.3104 10.75C16.1868 10.935 16.0111 11.0792 15.8055 11.1644C15.6 11.2495 15.3738 11.2718 15.1555 11.2284C14.9373 11.185 14.7368 11.0778 14.5795 10.9205C14.4222 10.7632 14.315 10.5627 14.2716 10.3445C14.2282 10.1262 14.2505 9.90005 14.3356 9.69448C14.4208 9.48891 14.565 9.31321 14.75 9.1896C14.935 9.06598 15.1525 9 15.375 9C15.6734 9 15.9595 9.11853 16.1705 9.3295C16.3815 9.54048 16.5 9.82663 16.5 10.125ZM16.3988 16.125C16.453 16.2104 16.4895 16.3058 16.5059 16.4056C16.5223 16.5054 16.5183 16.6075 16.4943 16.7058C16.4702 16.804 16.4265 16.8964 16.3658 16.9773C16.3052 17.0583 16.2287 17.1261 16.1412 17.1767C16.0536 17.2273 15.9567 17.2597 15.8563 17.2719C15.7558 17.2841 15.654 17.2758 15.5569 17.2477C15.4597 17.2195 15.3693 17.1719 15.291 17.1079C15.2127 17.0438 15.1481 16.9646 15.1013 16.875C14.4009 15.6647 13.3003 15 12 15C10.6997 15 9.59907 15.6656 8.89875 16.875C8.85187 16.9646 8.78734 17.0438 8.70904 17.1079C8.63074 17.1719 8.5403 17.2195 8.44316 17.2477C8.34601 17.2758 8.24417 17.2841 8.14375 17.2719C8.04334 17.2597 7.94643 17.2273 7.85886 17.1767C7.77128 17.1261 7.69485 17.0583 7.63417 16.9773C7.57348 16.8964 7.52979 16.804 7.50573 16.7058C7.48166 16.6075 7.47772 16.5054 7.49413 16.4056C7.51055 16.3058 7.54699 16.2104 7.60125 16.125C8.56594 14.4572 10.1691 13.5 12 13.5C13.8309 13.5 15.4341 14.4563 16.3988 16.125Z" fill="#035B71"/>
+</g>
+</svg>
diff --git a/src/assets/icons/swap.svg b/src/assets/icons/swap.svg
new file mode 100644
index 0000000..40fe3bd
--- /dev/null
+++ b/src/assets/icons/swap.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<g id="Swap">
+<path id="Vector" opacity="0.2" d="M20.25 4.5V14.25C20.25 14.4489 20.171 14.6397 20.0303 14.7803C19.8897 14.921 19.6989 15 19.5 15H15.75V19.5C15.75 19.6989 15.671 19.8897 15.5303 20.0303C15.3897 20.171 15.1989 20.25 15 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V9.75C3.75 9.55109 3.82902 9.36032 3.96967 9.21967C4.11032 9.07902 4.30109 9 4.5 9H8.25V4.5C8.25 4.30109 8.32902 4.11032 8.46967 3.96967C8.61032 3.82902 8.80109 3.75 9 3.75H19.5C19.6989 3.75 19.8897 3.82902 20.0303 3.96967C20.171 4.11032 20.25 4.30109 20.25 4.5Z" fill="#035B71"/>
+<path id="Vector_2" d="M21 4.5V14.25C21 14.6478 20.842 15.0294 20.5607 15.3107C20.2794 15.592 19.8978 15.75 19.5 15.75H9.31031L10.2806 16.7194C10.3503 16.7891 10.4056 16.8718 10.4433 16.9628C10.481 17.0539 10.5004 17.1515 10.5004 17.25C10.5004 17.3485 10.481 17.4461 10.4433 17.5372C10.4056 17.6282 10.3503 17.7109 10.2806 17.7806C10.2109 17.8503 10.1282 17.9056 10.0372 17.9433C9.94613 17.981 9.84855 18.0004 9.75 18.0004C9.65145 18.0004 9.55387 17.981 9.46283 17.9433C9.37178 17.9056 9.28906 17.8503 9.21937 17.7806L6.96937 15.5306C6.89964 15.461 6.84432 15.3783 6.80658 15.2872C6.76884 15.1962 6.74941 15.0986 6.74941 15C6.74941 14.9014 6.76884 14.8038 6.80658 14.7128C6.84432 14.6217 6.89964 14.539 6.96937 14.4694L9.21937 12.2194C9.36011 12.0786 9.55098 11.9996 9.75 11.9996C9.94902 11.9996 10.1399 12.0786 10.2806 12.2194C10.4214 12.3601 10.5004 12.551 10.5004 12.75C10.5004 12.949 10.4214 13.1399 10.2806 13.2806L9.31031 14.25H19.5V4.5H9V5.25C9 5.44891 8.92098 5.63968 8.78033 5.78033C8.63968 5.92098 8.44891 6 8.25 6C8.05109 6 7.86032 5.92098 7.71967 5.78033C7.57902 5.63968 7.5 5.44891 7.5 5.25V4.5C7.5 4.10218 7.65804 3.72064 7.93934 3.43934C8.22064 3.15804 8.60218 3 9 3H19.5C19.8978 3 20.2794 3.15804 20.5607 3.43934C20.842 3.72064 21 4.10218 21 4.5ZM15.75 18C15.5511 18 15.3603 18.079 15.2197 18.2197C15.079 18.3603 15 18.5511 15 18.75V19.5H4.5V9.75H14.6897L13.7194 10.7194C13.5786 10.8601 13.4996 11.051 13.4996 11.25C13.4996 11.449 13.5786 11.6399 13.7194 11.7806C13.8601 11.9214 14.051 12.0004 14.25 12.0004C14.449 12.0004 14.6399 11.9214 14.7806 11.7806L17.0306 9.53063C17.1004 9.46097 17.1557 9.37825 17.1934 9.28721C17.2312 9.19616 17.2506 9.09856 17.2506 9C17.2506 8.90144 17.2312 8.80384 17.1934 8.71279C17.1557 8.62175 17.1004 8.53903 17.0306 8.46937L14.7806 6.21937C14.6399 6.07864 14.449 5.99958 14.25 5.99958C14.051 5.99958 13.8601 6.07864 13.7194 6.21937C13.5786 6.36011 13.4996 6.55098 13.4996 6.75C13.4996 6.94902 13.5786 7.13989 13.7194 7.28063L14.6897 8.25H4.5C4.10218 8.25 3.72064 8.40804 3.43934 8.68934C3.15804 8.97064 3 9.35218 3 9.75V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H15C15.3978 21 15.7794 20.842 16.0607 20.5607C16.342 20.2794 16.5 19.8978 16.5 19.5V18.75C16.5 18.5511 16.421 18.3603 16.2803 18.2197C16.1397 18.079 15.9489 18 15.75 18Z" fill="#035B71"/>
+</g>
+</svg>
diff --git a/src/components/Aside.vue b/src/components/Aside.vue
deleted file mode 100644
index a8cbeb1..0000000
--- a/src/components/Aside.vue
+++ /dev/null
@@ -1,445 +0,0 @@
-<script setup lang="ts">
-import { watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { RouterLink } from 'vue-router'
-import Icon from '@/assets/images/pln-with-text.png';
-import { ref } from 'vue'
-import {
-    Dialog,
-    DialogPanel,
-    Disclosure,
-    DisclosureButton,
-    DisclosurePanel,
-    TransitionChild,
-    TransitionRoot,
-} from '@headlessui/vue'
-
-import {
-    BoltIcon,
-    Cog6ToothIcon,
-    ComputerDesktopIcon,
-    DocumentDuplicateIcon,
-    DocumentTextIcon,
-    FolderArrowDownIcon,
-    FolderOpenIcon,
-    ShieldCheckIcon,
-    XMarkIcon
-} from '@heroicons/vue/24/solid'
-
-const navigation = [
-
-    {
-        name: 'Daftar Transaksi',
-        icon: DocumentDuplicateIcon,
-        href: '/daftar-transaksi',
-        children: [
-            { name: 'Transaksi Aktif Individual', href: '/daftar-transaksi/aktif-bulanan', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Transaksi Aktif PLN Mobile', href: '/daftar-transaksi/aktif-pln-mobile', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Transaksi Aktif Periksa dan Return Order', href: '/daftar-transaksi/periksa-return-order', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Transaksi Aktif TM', href: '/daftar-transaksi/aktif-tm', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Transaksi Aktif Historis', href: '/daftar-transaksi/aktif-historis', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Monitoring Alih Unit', href: '/daftar-transaksi/monitoring-alih-unit', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Monitoring All', href: '/daftar-transaksi/monitoring-all', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Monitoring Tiket', href: '/daftar-transaksi/monitoring-tiket', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Monitoring History', href: '/daftar-transaksi/monitoring-history', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Monitoring Aktif', href: '/daftar-transaksi/monitoring-aktif', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Monitoring Close di CC', href: '/daftar-transaksi/monitoring-close-cc', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Monitoring Log AutoDispatch', href: '/daftar-transaksi/monitoring-log-autodispatch', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Monitoring Yang Perlu Diperhatikan', href: '/daftar-transaksi/monitoring-perlu-diperhatikan', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Monitoring Log Break Regu', href: '/daftar-transaksi/monitoring-log-break-regu', icon: DocumentDuplicateIcon, children: [], },
-            { name: 'Monitoring Log Alih Regu', href: '/daftar-transaksi/monitoring-log-alih-regu', icon: DocumentDuplicateIcon, children: [], },
-        ],
-    },
-    {
-        name: 'Administration',
-        icon: ShieldCheckIcon,
-        href: '/administration',
-        children: [
-            {
-                name: 'Audit Trails',
-                icon: ShieldCheckIcon,
-                href: '/administration/audit-trails',
-                children: [
-                    {
-                        name: 'Log Login',
-                        href: '/administration/audit-trails/log-login',
-                        icon: ShieldCheckIcon,
-                        children: [],
-                    },
-                    {
-                        name: 'Log Activity',
-                        href: '/administration/audit-trails/log-aktivity',
-                        icon: ShieldCheckIcon,
-                        children: [],
-                    },
-                    {
-                        name: 'Log Error',
-                        href: '/administration/audit-trails/log-error',
-                        icon: ShieldCheckIcon,
-                        children: [],
-                    },
-                ],
-            },
-            {
-                name: 'Task Management',
-                icon: ShieldCheckIcon,
-                href: '/administration/task-management',
-                children: [
-                    { name: 'Menu Management', href: '/administration/task-management/menu-management', icon: ShieldCheckIcon, children: [], },
-                    { name: 'System Parameter', href: '/administration/task-management/system-parameter', icon: ShieldCheckIcon, children: [], },
-                    { name: 'User Profile Manager', href: '/administration/task-management/ubah-profile-manager', icon: ShieldCheckIcon, children: [], },
-                    { name: 'Security Projek', href: '/administration/task-management/security-projek', icon: ShieldCheckIcon, children: [], },
-                    { name: 'User Role Manager', href: '/administration/task-management/user-role-manager', icon: ShieldCheckIcon, children: [], },
-                    { name: 'Menu Authorization', href: '/administration/task-management/menu-authorization', icon: ShieldCheckIcon, children: [], },
-                    { name: 'Workflow Designer', href: '/administration/task-management/workflow-designer', icon: ShieldCheckIcon, children: [], },
-                    { name: 'APKT News', href: '/administration/task-management/apkt-news', icon: ShieldCheckIcon, children: [], },
-                ],
-            },
-            {
-                name: 'Master Borderless',
-                icon: ShieldCheckIcon,
-                href: '/administration/master-borderless',
-                children: [
-                    { name: 'Zone Borderless', href: '/administration/master-borderless/zone-borderless', icon: ShieldCheckIcon, children: [], },
-                    { name: 'User Zone Borderless', href: '/administration/master-borderless/user-zone-borderless', icon: ShieldCheckIcon, children: [], },
-                ],
-            },
-        ],
-    },
-    {
-        name: 'Master Yantek',
-        icon: FolderOpenIcon,
-        href: '/master-yantek',
-        children: [
-            { name: 'Unit', href: '/master-yantek/unit', icon: FolderOpenIcon, children: [], },
-            { name: 'Unit Jaringan', href: '/master-yantek/unit-jaringan', icon: FolderOpenIcon, children: [], },
-            { name: 'Unit Pelayanan', href: '/master-yantek/unit-pelayanan', icon: FolderOpenIcon, children: [], },
-            { name: 'Regu Yantek', href: '/master-yantek/regu-yantek', icon: FolderOpenIcon, children: [], },
-            { name: 'Gardu Induk', href: '/master-yantek/gardu-induk', icon: FolderOpenIcon, children: [], },
-            { name: 'Gardu Penyulang TM', href: '/master-yantek/gardu-penyulang-tm', icon: FolderOpenIcon, children: [], },
-            { name: 'Gardu Distribusi', href: '/master-yantek/gardu-distribusi', icon: FolderOpenIcon, children: [], },
-            { name: 'Group Gangguan', href: '/master-yantek/group-gangguan', icon: FolderOpenIcon, children: [], },
-            { name: 'Wilayah Yantek', href: '/master-yantek/wilayah-yantek', icon: FolderOpenIcon, children: [], },
-            { name: 'Material', href: '/master-yantek/material', icon: FolderOpenIcon, children: [], },
-        ],
-    },
-    {
-        name: 'Transaksi',
-        icon: DocumentTextIcon,
-        href: '/transaksi',
-        children: [
-            { name: 'Gangguan dan Keluhan', href: '/transaksi/gangguan-dan-keluhan', icon: DocumentTextIcon, children: [], },
-            { name: 'Gangguan Tegangan Menengah', href: '/transaksi/gangguan-tegangan-menengah', icon: DocumentTextIcon, children: [], },
-            { name: 'Pemadaman Terencana', href: '/transaksi/pemadaman-terencana', icon: DocumentTextIcon, children: [], },
-            { name: 'Aplikasi Off-Line', href: '/transaksi/aplikasi-off-line', icon: DocumentTextIcon, children: [], },
-            { name: 'Penugasan Khusus', href: '/transaksi/penugasan-khusus', icon: DocumentTextIcon, children: [], },
-            { name: 'Mutasi Pengaduan', href: '/transaksi/mutasi-pengaduan', icon: DocumentTextIcon, children: [], },
-        ],
-    },
-    {
-        name: 'Saidi Saifi',
-        icon: ComputerDesktopIcon,
-        href: '/saidi-saifi',
-        children: [
-            {
-                name: 'Monitor Jaringan',
-                icon: ComputerDesktopIcon,
-                href: '/saidi-saifi/monitor-jaringan',
-                children: [
-                    {
-                        name: 'Dashboard Asset',
-                        href: '/saidi-saifi/monitor-jaringan/dashboard-asset',
-                        icon: ComputerDesktopIcon,
-                        children: [],
-                    },
-                    {
-                        name: 'Manuver Topologi Jaringan',
-                        href: '/saidi-saifi/monitor-jaringan/manuver-topologi-jaringan',
-                        icon: ComputerDesktopIcon,
-                        children: [],
-                    },
-                    {
-                        name: 'Pencarian Segment Jaringan',
-                        href: '/saidi-saifi/monitor-jaringan/pencarian-segment-jaringan',
-                        icon: ComputerDesktopIcon,
-                        children: [],
-                    },
-                    {
-                        name: 'Penormalan Manuver Jaringan',
-                        href: '/saidi-saifi/monitor-jaringan/penormalan-manuver-jaringan',
-                        icon: ComputerDesktopIcon,
-                        children: [],
-                    },
-                    {
-                        name: 'Pindah Jaringan',
-                        href: '/saidi-saifi/monitor-jaringan/pindah-jaringan',
-                        icon: ComputerDesktopIcon,
-                        children: [],
-                    },
-                ],
-            },
-            {
-                name: 'Monitoring SCADA',
-                icon: ComputerDesktopIcon,
-                href: '/saidi-saifi/monitor-scada/',
-                children: [
-                    { name: 'Monitoring Mapping Database', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Monitoring Log SCADA', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Mapping Gardu Induk', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Mapping Feeder', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Mapping Zona', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Mapping Lateral', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Mapping Section', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Mapping Segment', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Mapping Sub Lateral', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Mapping Gardu Distribusi', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Mapping Trafo', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Mapping Jurusan', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Monitoring Integrasi ????', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Monitoring Integrasi per No Tiang', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                ],
-            },
-            {
-                name: 'Master Jaringan',
-                icon: ComputerDesktopIcon,
-                href: '/saidi-saifi/master-jaringan/',
-                children: [
-                    { name: 'Master Gardu Induk', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Master Feeder', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Master Zona', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Master Section', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Master Segement', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Master Lateral', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Master Gardu Distribusi', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Master Switch', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                ],
-            },
-            {
-                name: 'Master Perhitungan',
-                icon: ComputerDesktopIcon,
-                href: '/saidi-saifi/master-perhitungan/',
-                children: [
-                    { name: 'Master Asumsi', href: '/saidi-saifi/master-perhitungan/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Master Asumsi Salatiga', href: '/saidi-saifi/master-perhitungan/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Master Faktor Daya & Beban', href: '/saidi-saifi/master-perhitungan/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Data III-09', href: '/saidi-saifi/master-perhitungan/', icon: ComputerDesktopIcon, children: [], },
-                ],
-            },
-            {
-                name: 'Laporan Saidi Saifi',
-                icon: ComputerDesktopIcon,
-                href: '/saidi-saifi/laporan-saidi-saifi/',
-                children: [
-                    { name: 'Laporan Saidi Saifi per Penyulang', href: '/saidi-saifi/laporan-saidi-saifi/', icon: ComputerDesktopIcon, children: [], },
-                ],
-            },
-            {
-                name: 'Pelanggan Prioritas',
-                icon: ComputerDesktopIcon,
-                href: '/saidi-saifi/pelanggan-prioritas/',
-                children: [
-                    { name: 'Daftar Pelanggan Prioritas', href: '/saidi-saifi/pelanggan-prioritas/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Monitoring Pelanggan Prioritas', href: '/saidi-saifi/pelanggan-prioritas/', icon: ComputerDesktopIcon, children: [], },
-                ],
-            },
-            {
-                name: 'Koreksi dan Cleansing',
-                icon: ComputerDesktopIcon,
-                href: '/saidi-saifi/koreksi-dan-cleansing/',
-                children: [
-                    { name: 'Monitoring Koreksi dan Cleansing', href: '/saidi-saifi/koreksi-dan-cleansing/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Koreksi Transaksi Individual', href: '/saidi-saifi/koreksi-dan-cleansing/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Koreksi dan Cleansing TM', href: '/saidi-saifi/koreksi-dan-cleansing/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Koreksi Kode Gangguan dan ANEV', href: '/saidi-saifi/koreksi-dan-cleansing/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Laporan Koreksi dan Cleansing', href: '/saidi-saifi/koreksi-dan-cleansing/', icon: ComputerDesktopIcon, children: [], },
-                    { name: 'Delegasi Koreksi dan Cleansing', href: '/saidi-saifi/koreksi-dan-cleansing/', icon: ComputerDesktopIcon, children: [], },
-                ],
-            },
-        ],
-    },
-    {
-        name: 'Utility',
-        icon: BoltIcon,
-        href: '/utility',
-        children: [
-            { name: 'Piket Obank', href: '/utility/piket-obank', icon: BoltIcon, children: [], },
-        ],
-    },
-    {
-        name: 'EIS',
-        icon: FolderArrowDownIcon,
-        href: '/eis',
-        children: [],
-    },
-    {
-        name: 'Pengaturan',
-        icon: Cog6ToothIcon,
-        href: '/pengaturan',
-        children: [
-            { name: 'Ganti Password', href: '/pengaturan/gantu-password', icon: Cog6ToothIcon, children: [], },
-        ],
-    },
-]
-
-const route = useRoute();
-const menuSelected = ref(route.fullPath);
-
-watch(route, (to, _) => {
-    menuSelected.value = to.fullPath
-});
-
-const isMenu = (name: string) => {
-    return menuSelected.value === name
-}
-
-const props = defineProps({
-    sideBarStatus: Boolean,
-});
-const emits = defineEmits(['onChangeSideBarStatus']);
-const localSideBarStatus = ref(props.sideBarStatus)
-
-function closeSideBar() {
-    localSideBarStatus.value = false;
-    emits('onChangeSideBarStatus', false);
-};
-</script>
-<template>
-    <TransitionRoot as="template" :show="sideBarStatus">
-        <Dialog as="div" class="relative z-40 md:hidden" @close="closeSideBar">
-            <TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0"
-                enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100"
-                leave-to="opacity-0">
-                <div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
-            </TransitionChild>
-
-            <div class="fixed inset-0 z-40 flex">
-                <TransitionChild as="template" enter="transition ease-in-out duration-300 transform"
-                    enter-from="-translate-x-full" enter-to="translate-x-0"
-                    leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0"
-                    leave-to="-translate-x-full">
-                    <DialogPanel class="relative flex flex-col flex-1 w-full max-w-xs pt-5 pb-4 bg-white">
-                        <TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0"
-                            enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100"
-                            leave-to="opacity-0">
-                            <div class="absolute top-0 right-0 pt-2 -mr-12">
-                                <button type="button"
-                                    class="flex items-center justify-center w-10 h-10 ml-1 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
-                                    @click="closeSideBar">
-                                    <span class="sr-only">Close sidebar</span>
-                                    <XMarkIcon class="w-6 h-6 text-white" aria-hidden="true" />
-                                </button>
-                            </div>
-                        </TransitionChild>
-                        <div class="flex items-center flex-shrink-0 px-4">
-                            <img class="w-auto h-16" :src="Icon" alt="PLN" />
-                        </div>
-                        <div class="flex-1 h-0 mt-5 overflow-y-auto">
-                            <nav class="px-2 space-y-1">
-                                <RouterLink v-for="item in navigation" :key="item.name" :to="item.href"
-                                    :class="[isMenu(item.href) ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']">
-                                    <component :is="item.icon"
-                                        :class="[isMenu(item.href) ? 'text-gray-500' : 'text-gray-400 group-hover:text-gray-500', 'mr-4 flex-shrink-0 h-6 w-6']"
-                                        aria-hidden="true" />
-                                    {{ item.name }}
-                                </RouterLink>
-                            </nav>
-                        </div>
-                    </DialogPanel>
-                </TransitionChild>
-                <div class="flex-shrink-0 w-14" aria-hidden="true">
-                    <!-- Dummy element to force sidebar to shrink to fit close icon -->
-                </div>
-            </div>
-        </Dialog>
-    </TransitionRoot>
-    <!-- Static sidebar for desktop -->
-    <div class="z-10 hidden bg-gray-600 md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
-        <!-- Sidebar component, swap this element with another sidebar if you like -->
-        <div class="flex items-center flex-shrink-0 h-16 px-5">
-            <img class="w-auto h-11" :src="Icon" alt="PLN" />
-        </div>
-        <div class="flex flex-col flex-grow bg-gray-600 hover:overflow-y-auto">
-            <div class="flex flex-col flex-grow mt-5 ">
-                <nav class="flex-1 px-2 pb-4 space-y-1">
-                    <template v-for="item in navigation" :key="item.name">
-                        <div v-if="!item.children || item.children.length === 0">
-                            <!-- Single-level item -->
-                            <RouterLink :to="item.href"
-                                :class="[isMenu(item.href) ? 'bg-primary-500 text-white font-medium' : 'text-gray-500 hover:bg-primary-100 hover:text-gray-900', 'group w-full flex items-center pl-2 py-2 text-xs font-medium rounded-md']">
-                                <component :is="item.icon"
-                                    :class="[isMenu(item.href) ? 'text-white' : 'text-gray-500 group-hover:text-gray-900', 'mr-3 flex-shrink-0 h-6 w-6']"
-                                    aria-hidden="true" />
-                                {{ item.name }}
-                            </RouterLink>
-                        </div>
-
-                        <Disclosure v-else
-                            v-bind:default-open="item.children.find((d) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? true : false">
-                            <!-- Nested item with children -->
-                            <template v-slot="{ open }">
-                                <DisclosureButton
-                                    :class="[item.children.find((d) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500 font-medium' : 'text-gray-500 hover:bg-primary-100 hover:text-gray-900', 'group w-full flex items-center pl-2 pr-1 py-2 text-left text-xs font-medium rounded-md focus:outline-none focus:ring-0 focus:ring-indigo-500']">
-                                    <component :is="item.icon"
-                                        :class="[item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500' : 'text-gray-400 group-hover:text-gray-500', 'flex-shrink-0 w-6 h-6 mr-3']"
-                                        aria-hidden="true" />
-                                    <span class="flex-1">{{ item.name }}</span>
-
-                                    <svg :class="[item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', open ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
-                                        width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                                        <path
-                                            d="M4.44002 8.9399C4.72127 8.659 5.10252 8.50122 5.50002 8.50122C5.89752 8.50122 6.27877 8.659 6.56002 8.9399L12 14.3799L17.44 8.9399C17.7244 8.67494 18.1005 8.53069 18.4891 8.53755C18.8777 8.54441 19.2484 8.70183 19.5233 8.97666C19.7981 9.25148 19.9555 9.62225 19.9624 10.0109C19.9692 10.3995 19.825 10.7756 19.56 11.0599L13.06 17.5599C12.7788 17.8408 12.3975 17.9986 12 17.9986C11.6025 17.9986 11.2213 17.8408 10.94 17.5599L4.44002 11.0599C4.15912 10.7787 4.00134 10.3974 4.00134 9.9999C4.00134 9.6024 4.15912 9.22115 4.44002 8.9399Z"
-                                            :fill="item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? '#14A2BA' : '#647375'" />
-                                    </svg>
-                                </DisclosureButton>
-
-                                <DisclosurePanel class="space-y-1">
-                                    <!-- Nested children -->
-                                    <template v-for="subItem in item.children" :key="subItem.name">
-                                        <div v-if="!subItem.children || subItem.children.length === 0">
-                                            <!-- Single-level child -->
-                                            <RouterLink :to="subItem.href"
-                                                :class="[isMenu(subItem.href) ? 'text-white font-medium bg-primary-500' : 'text-gray-500 hover:bg-primary-100 hover:text-gray-900', 'flex items-center w-11/12 py-2 px-2 text-xs font-medium rounded-md group ml-auto']">
-                                                {{ subItem.name }}
-                                            </RouterLink>
-                                        </div>
-                                        <Disclosure v-else
-                                            :default-open="subItem.children.find((d: any) => d.href === menuSelected) ? true : false">
-                                            <!-- Nested child with children -->
-                                            <template v-slot="{ open }">
-                                                <DisclosureButton
-                                                    :class="[subItem.children.find((d: any) => d.href === menuSelected) ? 'text-primary-500 font-medium' : 'text-gray-500 hover:bg-primary-100 hover:text-gray-900', 'group w-11/12 flex items-center px-2 py-2 text-left text-xs font-medium rounded-md focus:outline-none focus:ring-0 focus:ring-indigo-500 ml-auto']">
-
-                                                    <span class="flex-1">{{ subItem.name }}</span>
-
-                                                    <svg :class="[subItem.children.find((d: any) => d.href === menuSelected) ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', open ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
-                                                        width="16" height="16" viewBox="0 0 24 24" fill="none"
-                                                        aria-hidden="true">
-                                                        <path
-                                                            d="M4.44002 8.9399C4.72127 8.659 5.10252 8.50122 5.50002 8.50122C5.89752 8.50122 6.27877 8.659 6.56002 8.9399L12 14.3799L17.44 8.9399C17.7244 8.67494 18.1005 8.53069 18.4891 8.53755C18.8777 8.54441 19.2484 8.70183 19.5233 8.97666C19.7981 9.25148 19.9555 9.62225 19.9624 10.0109C19.9692 10.3995 19.825 10.7756 19.56 11.0599L13.06 17.5599C12.7788 17.8408 12.3975 17.9986 12 17.9986C11.6025 17.9986 11.2213 17.8408 10.94 17.5599L4.44002 11.0599C4.15912 10.7787 4.00134 10.3974 4.00134 9.9999C4.00134 9.6024 4.15912 9.22115 4.44002 8.9399Z"
-                                                            :fill="subItem.children.find((d: any) => d.href === menuSelected) ? '#14A2BA' : '#647375'" />
-                                                    </svg>
-                                                </DisclosureButton>
-                                                <DisclosurePanel class="space-y-1 pl-11">
-                                                    <!-- Nested children of nested child -->
-                                                    <RouterLink v-for="nestedSubItem in subItem.children"
-                                                        :key="nestedSubItem.name" :to="nestedSubItem.href"
-                                                        :class="[isMenu(nestedSubItem.href) ? 'text-white font-medium bg-primary-500' : 'text-gray-500 hover:bg-primary-100 hover:text-gray-900', 'flex items-center w-12/12 py-2 px-2 text-xs font-medium rounded-md group ml-auto']">
-                                                        {{ nestedSubItem.name }}
-                                                    </RouterLink>
-                                                </DisclosurePanel>
-                                            </template>
-
-                                        </Disclosure>
-                                    </template>
-                                </DisclosurePanel>
-                            </template>
-                        </Disclosure>
-
-
-                    </template>
-
-                </nav>
-            </div>
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/AsideWhite.vue b/src/components/Aside/Aside.vue
similarity index 81%
rename from src/components/AsideWhite.vue
rename to src/components/Aside/Aside.vue
index 2411802..9126f70 100644
--- a/src/components/AsideWhite.vue
+++ b/src/components/Aside/Aside.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { RouterLink } from 'vue-router'
-import Icon from '@/assets/images/pln-with-text.png';
 import { ref } from 'vue'
 import {
     Dialog,
@@ -13,52 +12,33 @@ import {
     TransitionChild,
     TransitionRoot,
 } from '@headlessui/vue'
+import { XMarkIcon } from '@heroicons/vue/24/outline'
+import { useMenuStore } from '@/stores/menu'
+import { IconApp } from '@/utils/icons'
+import AsideMenuSingle from './AsideMenuSingle.vue'
+import type { MenuItemModel } from '@/utils/interfaces'
 
-import {
-    BoltIcon,
-    Cog6ToothIcon,
-    ComputerDesktopIcon,
-    DocumentDuplicateIcon,
-    DocumentTextIcon,
-    FolderArrowDownIcon,
-    FolderOpenIcon,
-    ShieldCheckIcon,
-    XMarkIcon
-} from '@heroicons/vue/24/outline'
-import { useMenuStore } from '@/stores/menu';
+const menu = useMenuStore()
+const route = useRoute()
 
-const nav = useMenuStore();
-const navigation = nav.navigation;
-
-const route = useRoute();
-const menuSelected = ref(route.fullPath);
+const navigation = ref<MenuItemModel[]>(menu.navigation)
+const menuSelected = ref(route.fullPath)
 
 watch(route, (to, _) => {
     menuSelected.value = to.fullPath
     closeSideBar()
-});
+})
 
 const isMenu = (name: string) => {
     return menuSelected.value === name
 }
 
-const props = defineProps({
-    sideBarStatus: Boolean,
-});
-const emits = defineEmits(['onChangeSideBarStatus']);
-const localSideBarStatus = ref(props.sideBarStatus)
-
-function closeSideBar() {
-    localSideBarStatus.value = false;
-    emits('onChangeSideBarStatus', false);
-};
+const closeSideBar = () => menu.toggleSidebar()
 
 </script>
 
-<style scoped></style>
-
 <template>
-    <TransitionRoot as="template" :show="sideBarStatus">
+    <TransitionRoot as="template" :show="menu.sidebarOpen">
         <Dialog as="div" class="relative z-40 md:hidden" @close="closeSideBar">
             <TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0"
                 enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100"
@@ -71,7 +51,7 @@ function closeSideBar() {
                     enter-from="-translate-x-full" enter-to="translate-x-0"
                     leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0"
                     leave-to="-translate-x-full">
-                    <DialogPanel class="relative flex flex-col flex-1 w-full max-w-xs pt-5 pb-4 bg-white">
+                    <DialogPanel class="relative flex flex-col flex-1 w-full max-w-xs pt-5 pb-4 bg-primary-50">
                         <TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0"
                             enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100"
                             leave-to="opacity-0">
@@ -86,21 +66,22 @@ function closeSideBar() {
                         </TransitionChild>
                         <div class="flex items-center flex-shrink-0 px-4">
                             <RouterLink to="/">
-                                <img class="w-auto h-16" :src="Icon" alt="PLN" />
+                                <img class="w-auto h-16" :src="IconApp" alt="PLN" />
                             </RouterLink>
                         </div>
                         <div class="flex-1 h-0 mt-5 overflow-y-auto">
                             <nav class="px-2 space-y-1">
                                 <template v-for="item in navigation" :key="item.name">
                                     <div v-if="!item.children || item.children.length === 0">
+                                        <AsideMenuSingle :item="item" :is-menu-selected="isMenu(item.href)" />
                                         <!-- Single-level item -->
-                                        <RouterLink :to="item.href"
+                                        <!-- <RouterLink :to="item.href"
                                             :class="[isMenu(item.href) ? 'bg-primary-500 text-white font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'group w-full flex items-center pl-2 py-2 text-xs rounded-lg']">
                                             <component :is="item.icon"
                                                 :class="[isMenu(item.href) ? 'text-white' : 'text-aside group-hover:text-gray-900', 'mr-3 flex-shrink-0 h-6 w-6']"
                                                 aria-hidden="true" />
                                             {{ item.name }}
-                                        </RouterLink>
+                                        </RouterLink> -->
                                     </div>
 
                                     <Disclosure v-else
@@ -109,9 +90,9 @@ function closeSideBar() {
                                         <template v-slot="{ open }">
                                             <DisclosureButton
                                                 :class="[item.children.find((d) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'group w-full flex items-center pl-2 pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0 focus:ring-indigo-500']">
-                                                <component :is="item.icon"
+                                                <embed :data="item.icon"
                                                     :class="[item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500' : 'text-gray-400 group-hover:text-gray-500', 'flex-shrink-0 w-6 h-6 mr-3']"
-                                                    aria-hidden="true" />
+                                                    type="image/svg+xml" />
                                                 <span class="flex-1">{{ item.name }}</span>
 
                                                 <svg :class="[item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', open ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
@@ -126,12 +107,15 @@ function closeSideBar() {
                                             <DisclosurePanel class="space-y-1">
                                                 <!-- Nested children -->
                                                 <template v-for="subItem in item.children" :key="subItem.name">
-                                                    <div v-if="!subItem.children || subItem.children.length === 0">
+                                                    <div v-if="subItem.children.length === 0">
                                                         <!-- Single-level child -->
-                                                        <RouterLink :to="subItem.href"
+                                                        <!-- <RouterLink :to="subItem.href"
                                                             :class="[isMenu(subItem.href) ? 'text-white font-bold bg-primary-500' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'flex items-center w-11/12 py-2 px-2 text-xs rounded-lg group ml-auto']">
                                                             {{ subItem.name }}
-                                                        </RouterLink>
+                                                        </RouterLink> -->
+                                                        <AsideMenuSingle :item="subItem"
+                                                            :is-menu-selected="isMenu(subItem.href)" :is-children="true" />
+
                                                     </div>
                                                     <Disclosure v-else
                                                         :default-open="subItem.children.find((d: any) => d.href === menuSelected) ? true : false">
@@ -152,11 +136,15 @@ function closeSideBar() {
                                                             </DisclosureButton>
                                                             <DisclosurePanel class="space-y-1 pl-11">
                                                                 <!-- Nested children of nested child -->
-                                                                <RouterLink v-for="nestedSubItem in subItem.children"
+                                                                <!-- <RouterLink v-for="nestedSubItem in subItem.children"
                                                                     :key="nestedSubItem.name" :to="nestedSubItem.href"
                                                                     :class="[isMenu(nestedSubItem.href) ? 'text-white font-bold bg-primary-500' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'flex items-center w-12/12 py-2 px-2 text-xs rounded-lg group ml-auto']">
                                                                     {{ nestedSubItem.name }}
-                                                                </RouterLink>
+                                                                </RouterLink> -->
+                                                                <AsideMenuSingle v-for="nestedSubItem in subItem.children"
+                                                                    :key="nestedSubItem.name" :item="nestedSubItem"
+                                                                    :is-menu-selected="isMenu(nestedSubItem.href)"
+                                                                    :is-children="true" />
                                                             </DisclosurePanel>
                                                         </template>
 
@@ -179,26 +167,20 @@ function closeSideBar() {
         </Dialog>
     </TransitionRoot>
     <!-- Static sidebar for desktop -->
-    <div class="z-10 hidden bg-white md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
+    <div class="z-10 hidden bg-primary-50 md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
         <!-- Sidebar component, swap this element with another sidebar if you like -->
-        <div class="flex items-center flex-shrink-0 h-16 px-5 border-b border-gray-100 border-dashed">
+        <div class="flex items-center flex-shrink-0 h-16 px-5">
             <RouterLink to="/">
-                <img class="w-auto h-11" :src="Icon" alt="PLN" />
+                <img class="w-auto h-11" :src="IconApp" alt="PLN" />
             </RouterLink>
         </div>
         <div class="flex flex-col flex-grow hover:overflow-y-auto">
             <div class="flex flex-col flex-grow mt-5">
                 <nav class="flex-1 px-2 pb-4 space-y-1">
                     <template v-for="item in navigation" :key="item.name">
-                        <div v-if="!item.children || item.children.length === 0">
+                        <div v-if="item.children.length === 0">
                             <!-- Single-level item -->
-                            <RouterLink :to="item.href"
-                                :class="[isMenu(item.href) ? 'bg-primary-500 text-white font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'group w-full flex items-center pl-2 py-2 text-xs rounded-lg']">
-                                <component :is="item.icon"
-                                    :class="[isMenu(item.href) ? 'text-white' : 'text-aside group-hover:text-gray-900', 'mr-3 flex-shrink-0 h-6 w-6']"
-                                    aria-hidden="true" />
-                                {{ item.name }}
-                            </RouterLink>
+                            <AsideMenuSingle :item="item" :is-menu-selected="isMenu(item.href)" />
                         </div>
 
                         <Disclosure v-slot="{ open }" v-else
@@ -206,9 +188,9 @@ function closeSideBar() {
                             <!-- Nested item with children -->
                             <DisclosureButton
                                 :class="[item.children.find((d) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'group w-full flex items-center pl-2 pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0 focus:ring-indigo-500']">
-                                <component :is="item.icon"
-                                    :class="[item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500' : 'text-gray-400 group-hover:text-gray-500', 'flex-shrink-0 w-6 h-6 mr-3']"
-                                    aria-hidden="true" />
+                                <embed :src="item.icon"
+                                    :class="[item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', 'flex-shrink-0 w-6 h-6 mr-3']"
+                                    type="image/svg+xml" />
                                 <span class="flex-1">{{ item.name }}</span>
 
                                 <svg :class="[item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', open ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
@@ -218,10 +200,6 @@ function closeSideBar() {
                                         :fill="item.children.find((d: any) => d.href === menuSelected) || item.children.find((d) => d.children.find((e) => e.href === menuSelected)) ? '#14A2BA' : '#647375'" />
                                 </svg>
                             </DisclosureButton>
-                            <!-- <transition enter-active-class="transition duration-500 transform ease"
-                                    enter-from-class="-translate-y-12 opacity-0" enter-to-class="translate-y-0 opacity-100"
-                                    leave-active-class="duration-300 transform dtransition ease"
-                                    leave-from-class="translate-y-0 opacity-100" leave-to-class="-translate-y-12 opacity-0"> -->
                             <transition enter-active-class="overflow-hidden transition-all duration-300"
                                 enter-from-class="transform scale-95 opacity-0 max-h-0"
                                 enter-to-class="transform scale-300 opacity-300 max-h-[1000px]"
@@ -233,10 +211,8 @@ function closeSideBar() {
                                     <template v-for="(subItem, index) in item.children" :key="subItem.href">
                                         <div v-if="!subItem.children || subItem.children.length === 0">
                                             <!-- Single-level child -->
-                                            <RouterLink :to="subItem.href"
-                                                :class="[isMenu(subItem.href) ? 'text-white font-bold bg-primary-500' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'flex items-center w-11/12 py-2 px-2 text-xs rounded-lg group ml-auto']">
-                                                {{ subItem.name }}
-                                            </RouterLink>
+                                            <AsideMenuSingle :item="subItem" :is-children="true"
+                                                :is-menu-selected="isMenu(subItem.href)" />
                                         </div>
                                         <Disclosure :key="subItem.href + index" v-slot="{ open }" v-else
                                             :default-open="subItem.children.find((d: any) => d.href === menuSelected) ? true : false">
@@ -260,26 +236,17 @@ function closeSideBar() {
                                                 leave-to-class="transform scale-95 opacity-0 max-h-0">
                                                 <DisclosurePanel class="space-y-1 pl-11">
                                                     <!-- Nested children of nested child -->
-                                                    <RouterLink v-for="nestedSubItem in subItem.children"
-                                                        :key="nestedSubItem.href" :to="nestedSubItem.href"
-                                                        :class="[isMenu(nestedSubItem.href) ? 'text-white font-bold bg-primary-500' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'flex items-center w-12/12 py-2 px-2 text-xs rounded-lg group ml-auto']">
-                                                        {{ nestedSubItem.name }}
-                                                    </RouterLink>
+                                                    <AsideMenuSingle v-for="nestedSubItem in subItem.children"
+                                                        :item="nestedSubItem" :is-children="true"
+                                                        :is-menu-selected="isMenu(subItem.href)" />
                                                 </DisclosurePanel>
                                             </transition>
-
-
                                         </Disclosure>
                                     </template>
-
                                 </DisclosurePanel>
                             </transition>
-
                         </Disclosure>
-
-
                     </template>
-
                 </nav>
             </div>
         </div>
diff --git a/src/components/Aside/AsideMenuSingle.vue b/src/components/Aside/AsideMenuSingle.vue
new file mode 100644
index 0000000..1755e41
--- /dev/null
+++ b/src/components/Aside/AsideMenuSingle.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import type { MenuItemModel } from '@/utils/interfaces'
+import { DotOutline } from '@/utils/icons';
+
+defineProps({
+    item: {
+        type: Object as () => MenuItemModel,
+        required: true
+    },
+    isMenuSelected: {
+        type: Boolean,
+        required: true
+    },
+    isChildren: {
+        type: Boolean,
+        default: false
+    }
+})
+</script>
+
+<template>
+    <RouterLink :to="item.href"
+        :class="[isMenuSelected ? 'bg-primary-500 text-white font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'group w-full flex items-center pl-2 py-2 text-xs rounded-lg']">
+        <embed :src="isChildren ? DotOutline : item.icon" type="image/svg+xml"
+            :class="[isMenuSelected ? 'text-white' : 'text-aside group-hover:text-gray-900', 'mr-3 flex-shrink-0 h-6 w-6']">
+        {{ item.name }}
+    </RouterLink>
+</template>
\ No newline at end of file
diff --git a/src/components/Aside/AsideMenuSingleMultiple.vue b/src/components/Aside/AsideMenuSingleMultiple.vue
new file mode 100644
index 0000000..04bd858
--- /dev/null
+++ b/src/components/Aside/AsideMenuSingleMultiple.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import type { MenuItemModel } from '@/utils/interfaces'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+
+defineProps({
+    item: {
+        type: Object as () => MenuItemModel,
+        required: true
+    },
+    isMenuSelected: {
+        type: Boolean,
+        required: true
+    }
+})
+</script>
+
+<template></template>
\ No newline at end of file
diff --git a/src/components/Dialogs/ActionDialog.vue b/src/components/Dialogs/ActionDialog.vue
index 6ef6210..542dd17 100644
--- a/src/components/Dialogs/ActionDialog.vue
+++ b/src/components/Dialogs/ActionDialog.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
+import { useDialogStore } from '@/stores/dialog'
 import {
-    CheckIcon,
-    ExclamationTriangleIcon, InformationCircleIcon, QuestionMarkCircleIcon,
-} from '@heroicons/vue/24/outline'
-import { ref, watch } from 'vue';
+    Dialog,
+    DialogPanel,
+    DialogTitle,
+    TransitionChild,
+    TransitionRoot
+} from '@headlessui/vue'
+import { computed, ref } from 'vue'
 
 const props = defineProps({
     open: Boolean,
@@ -22,40 +25,57 @@ const props = defineProps({
         type: String,
         default: 'normal',
     },
-});
-const emits = defineEmits(['onClose', 'onCancel', 'onConfirm']);
-const open = ref(props.open)
-const title = ref(props.title)
-const message = ref(props.message)
-const cancelText = ref(props.cancelText)
-const confirmText = ref(props.confirmText)
-const type = ref(props.type)
+    dismissOnAction: {
+        type: Boolean,
+        default: true,
+    },
+    showCancelButton: {
+        type: Boolean,
+        default: true,
+    },
+})
 
-function close() {
-    open.value = false;
-    emits('onClose', false);
+const emits = defineEmits(['onClose', 'onCancel', 'onConfirm'])
+const open = ref(computed(() => props.open))
+const title = ref(computed(() => props.title))
+const message = ref(computed(() => props.message))
+const cancelText = ref(computed(() => props.cancelText))
+const confirmText = ref(computed(() => props.confirmText))
+const type = ref(computed(() => props.type))
+const dismissOnAction = ref(computed(() => props.dismissOnAction))
+const showCancelButton = ref(computed(() => props.showCancelButton))
+const dialog = useDialogStore()
+
+const close = () => {
+    dialog.open = false
+    emits('onClose')
 }
 
-function handleOnCancel() {
-    emits('onCancel');
-    close();
+const handleOnCancel = () => {
+    emits('onCancel')
+    if (dismissOnAction) {
+        close()
+    }
 }
 
-function handleOnConfirm() {
-    emits('onConfirm');
-    close();
+const handleOnConfirm = () => {
+    emits('onConfirm')
+    if (props.dismissOnAction) {
+        close()
+    }
 }
 
-watch(() => props.open, (value) => {
-    open.value = value;
-});
+const handleOnClose = () => {
+    if (props.dismissOnAction) {
+        close()
+    }
+}
 
 </script>
 
 <template>
-    <!-- Log Out Dialog -->
     <TransitionRoot as="template" :show="open">
-        <Dialog as="div" class="relative z-20" @close="close">
+        <Dialog as="div" class="relative z-20" @close="handleOnClose">
             <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
                 leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
                 <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
@@ -69,13 +89,18 @@ watch(() => props.open, (value) => {
                         leave-from="opacity-100 translate-y-0 sm:scale-100"
                         leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                         <DialogPanel
-                            :class="[type === 'error' || type === 'warning' ? 'sm:max-w-lg' : 'sm:max-w-sm sm:p-6', 'relative overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full']">
+                            :class="[type === 'error' || type === 'warning' ? 'sm:max-w-lg' : 'sm:max-w-sm sm:p-6', 'relative overflow-hidden text-left transition-all transform bg-white rounded-xl sm:my-8 sm:w-full']">
                             <!-- Body Section -->
                             <div v-if="type === 'error'" class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                                 <div class="sm:flex sm:items-start">
                                     <div
                                         class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
-                                        <ExclamationTriangleIcon class="w-6 h-6 text-red-600" aria-hidden="true" />
+                                        <svg width="26" height="26" viewBox="0 0 26 26" fill="none"
+                                            class="w-6 h-6 text-red-600 fill-red-600">
+                                            <path
+                                                d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9964 9.5533 24.6256 6.24882 22.1884 3.81163C19.7512 1.37445 16.4467 0.00363977 13 0ZM13 24C10.8244 24 8.69767 23.3549 6.88873 22.1462C5.07979 20.9375 3.66989 19.2195 2.83733 17.2095C2.00477 15.1995 1.78693 12.9878 2.21137 10.854C2.63581 8.72022 3.68345 6.7602 5.22183 5.22183C6.76021 3.68345 8.72022 2.6358 10.854 2.21136C12.9878 1.78692 15.1995 2.00476 17.2095 2.83733C19.2195 3.66989 20.9375 5.07979 22.1462 6.88873C23.3549 8.69767 24 10.8244 24 13C23.9967 15.9164 22.8367 18.7123 20.7745 20.7745C18.7123 22.8367 15.9164 23.9967 13 24ZM12 14V7C12 6.73478 12.1054 6.48043 12.2929 6.29289C12.4804 6.10536 12.7348 6 13 6C13.2652 6 13.5196 6.10536 13.7071 6.29289C13.8946 6.48043 14 6.73478 14 7V14C14 14.2652 13.8946 14.5196 13.7071 14.7071C13.5196 14.8946 13.2652 15 13 15C12.7348 15 12.4804 14.8946 12.2929 14.7071C12.1054 14.5196 12 14.2652 12 14ZM14.5 18.5C14.5 18.7967 14.412 19.0867 14.2472 19.3334C14.0824 19.58 13.8481 19.7723 13.574 19.8858C13.2999 19.9993 12.9983 20.0291 12.7074 19.9712C12.4164 19.9133 12.1491 19.7704 11.9393 19.5607C11.7296 19.3509 11.5867 19.0836 11.5288 18.7926C11.471 18.5017 11.5007 18.2001 11.6142 17.926C11.7277 17.6519 11.92 17.4176 12.1667 17.2528C12.4133 17.088 12.7033 17 13 17C13.3978 17 13.7794 17.158 14.0607 17.4393C14.342 17.7206 14.5 18.1022 14.5 18.5Z"
+                                                fill="#CC0000" />
+                                        </svg>
                                     </div>
                                     <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                                         <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">
@@ -92,8 +117,16 @@ watch(() => props.open, (value) => {
                             <div v-else-if="type === 'warning'" class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                                 <div class="sm:flex sm:items-start">
                                     <div
-                                        class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-orange-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
-                                        <QuestionMarkCircleIcon class="w-6 h-6 text-orange-600" aria-hidden="true" />
+                                        class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-yellow-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
+                                        <!-- <QuestionMarkCircleIcon class="w-6 h-6 text-orange-600" aria-hidden="true" /> -->
+                                        <svg width="32" height="32" viewBox="0 0 32 32" class="w-6 h-6 text-yellow-700">
+                                            <path opacity="0.2"
+                                                d="M27 6V11H5V6C5 5.73478 5.10536 5.48043 5.29289 5.29289C5.48043 5.10536 5.73478 5 6 5H26C26.2652 5 26.5196 5.10536 26.7071 5.29289C26.8946 5.48043 27 5.73478 27 6Z"
+                                                fill="#999900" />
+                                            <path
+                                                d="M26 4H23V3C23 2.73478 22.8946 2.48043 22.7071 2.29289C22.5196 2.10536 22.2652 2 22 2C21.7348 2 21.4804 2.10536 21.2929 2.29289C21.1054 2.48043 21 2.73478 21 3V4H11V3C11 2.73478 10.8946 2.48043 10.7071 2.29289C10.5196 2.10536 10.2652 2 10 2C9.73478 2 9.48043 2.10536 9.29289 2.29289C9.10536 2.48043 9 2.73478 9 3V4H6C5.46957 4 4.96086 4.21071 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6V26C4 26.5304 4.21071 27.0391 4.58579 27.4142C4.96086 27.7893 5.46957 28 6 28H26C26.5304 28 27.0391 27.7893 27.4142 27.4142C27.7893 27.0391 28 26.5304 28 26V6C28 5.46957 27.7893 4.96086 27.4142 4.58579C27.0391 4.21071 26.5304 4 26 4ZM9 6V7C9 7.26522 9.10536 7.51957 9.29289 7.70711C9.48043 7.89464 9.73478 8 10 8C10.2652 8 10.5196 7.89464 10.7071 7.70711C10.8946 7.51957 11 7.26522 11 7V6H21V7C21 7.26522 21.1054 7.51957 21.2929 7.70711C21.4804 7.89464 21.7348 8 22 8C22.2652 8 22.5196 7.89464 22.7071 7.70711C22.8946 7.51957 23 7.26522 23 7V6H26V10H6V6H9ZM26 26H6V12H26V26ZM19.7075 16.7075L17.4137 19L19.7075 21.2925C19.8004 21.3854 19.8741 21.4957 19.9244 21.6171C19.9747 21.7385 20.0006 21.8686 20.0006 22C20.0006 22.1314 19.9747 22.2615 19.9244 22.3829C19.8741 22.5043 19.8004 22.6146 19.7075 22.7075C19.6146 22.8004 19.5043 22.8741 19.3829 22.9244C19.2615 22.9747 19.1314 23.0006 19 23.0006C18.8686 23.0006 18.7385 22.9747 18.6171 22.9244C18.4957 22.8741 18.3854 22.8004 18.2925 22.7075L16 20.4137L13.7075 22.7075C13.6146 22.8004 13.5043 22.8741 13.3829 22.9244C13.2615 22.9747 13.1314 23.0006 13 23.0006C12.8686 23.0006 12.7385 22.9747 12.6171 22.9244C12.4957 22.8741 12.3854 22.8004 12.2925 22.7075C12.1996 22.6146 12.1259 22.5043 12.0756 22.3829C12.0253 22.2615 11.9994 22.1314 11.9994 22C11.9994 21.8686 12.0253 21.7385 12.0756 21.6171C12.1259 21.4957 12.1996 21.3854 12.2925 21.2925L14.5863 19L12.2925 16.7075C12.1049 16.5199 11.9994 16.2654 11.9994 16C11.9994 15.7346 12.1049 15.4801 12.2925 15.2925C12.4801 15.1049 12.7346 14.9994 13 14.9994C13.2654 14.9994 13.5199 15.1049 13.7075 15.2925L16 17.5863L18.2925 15.2925C18.3854 15.1996 18.4957 15.1259 18.6171 15.0756C18.7385 15.0253 18.8686 14.9994 19 14.9994C19.1314 14.9994 19.2615 15.0253 19.3829 15.0756C19.5043 15.1259 19.6146 15.1996 19.7075 15.2925C19.8004 15.3854 19.8741 15.4957 19.9244 15.6171C19.9747 15.7385 20.0006 15.8686 20.0006 16C20.0006 16.1314 19.9747 16.2615 19.9244 16.3829C19.8741 16.5043 19.8004 16.6146 19.7075 16.7075Z"
+                                                fill="#999900" />
+                                        </svg>
                                     </div>
                                     <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                                         <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">
@@ -107,24 +140,19 @@ watch(() => props.open, (value) => {
                                     </div>
                                 </div>
                             </div>
-                            <div v-else-if="type === 'info'">
-                                <div class="flex items-center justify-center w-12 h-12 mx-auto bg-blue-100 rounded-full">
-                                    <InformationCircleIcon class="w-6 h-6 text-blue-600" aria-hidden="true" />
-                                </div>
-                                <div class="mt-3 text-center sm:mt-5">
-                                    <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900">
-                                        {{ title }}
-                                    </DialogTitle>
-                                    <div class="mt-2">
-                                        <p class="text-sm text-gray-500">
-                                            {{ message }}
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
                             <div v-else-if="type === 'success'">
-                                <div class="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full">
-                                    <CheckIcon class="w-6 h-6 text-green-600" aria-hidden="true" />
+                                <div
+                                    class="flex items-center justify-center w-12 h-12 mx-auto rounded-full bg-secondary-100">
+                                    <!-- <CheckIcon class="w-6 h-6 text-green-600" aria-hidden="true" /> -->
+                                    <svg width="32" height="32" viewBox="0 0 32 32"
+                                        class="w-6 h-6 text-secondary-600 fill-secondary-600">
+                                        <path opacity="0.2"
+                                            d="M28 16C28 18.3734 27.2962 20.6935 25.9776 22.6668C24.6591 24.6402 22.7849 26.1783 20.5922 27.0866C18.3995 27.9948 15.9867 28.2324 13.6589 27.7694C11.3312 27.3064 9.19295 26.1635 7.51472 24.4853C5.83649 22.8071 4.6936 20.6689 4.23058 18.3411C3.76756 16.0133 4.0052 13.6005 4.91345 11.4078C5.8217 9.21509 7.35977 7.34094 9.33316 6.02236C11.3066 4.70379 13.6266 4 16 4C19.1826 4 22.2348 5.26428 24.4853 7.51472C26.7357 9.76515 28 12.8174 28 16Z"
+                                            fill="#007B8D" />
+                                        <path
+                                            d="M21.7075 12.2925C21.8005 12.3854 21.8742 12.4957 21.9246 12.6171C21.9749 12.7385 22.0008 12.8686 22.0008 13C22.0008 13.1314 21.9749 13.2615 21.9246 13.3829C21.8742 13.5043 21.8005 13.6146 21.7075 13.7075L14.7075 20.7075C14.6146 20.8005 14.5043 20.8742 14.3829 20.9246C14.2615 20.9749 14.1314 21.0008 14 21.0008C13.8686 21.0008 13.7385 20.9749 13.6171 20.9246C13.4957 20.8742 13.3854 20.8005 13.2925 20.7075L10.2925 17.7075C10.1049 17.5199 9.99945 17.2654 9.99945 17C9.99945 16.7346 10.1049 16.4801 10.2925 16.2925C10.4801 16.1049 10.7346 15.9994 11 15.9994C11.2654 15.9994 11.5199 16.1049 11.7075 16.2925L14 18.5863L20.2925 12.2925C20.3854 12.1995 20.4957 12.1258 20.6171 12.0754C20.7385 12.0251 20.8686 11.9992 21 11.9992C21.1314 11.9992 21.2615 12.0251 21.3829 12.0754C21.5043 12.1258 21.6146 12.1995 21.7075 12.2925ZM29 16C29 18.5712 28.2376 21.0846 26.8091 23.2224C25.3807 25.3603 23.3503 27.0265 20.9749 28.0104C18.5995 28.9944 15.9856 29.2518 13.4638 28.7502C10.9421 28.2486 8.6257 27.0105 6.80762 25.1924C4.98953 23.3743 3.75141 21.0579 3.2498 18.5362C2.74819 16.0144 3.00563 13.4006 3.98957 11.0251C4.97351 8.64968 6.63975 6.61935 8.77759 5.1909C10.9154 3.76244 13.4288 3 16 3C19.4467 3.00364 22.7512 4.37445 25.1884 6.81163C27.6256 9.24882 28.9964 12.5533 29 16ZM27 16C27 13.8244 26.3549 11.6977 25.1462 9.88873C23.9375 8.07979 22.2195 6.66989 20.2095 5.83733C18.1995 5.00476 15.9878 4.78692 13.854 5.21136C11.7202 5.6358 9.76021 6.68345 8.22183 8.22183C6.68345 9.7602 5.63581 11.7202 5.21137 13.854C4.78693 15.9878 5.00477 18.1995 5.83733 20.2095C6.66989 22.2195 8.07979 23.9375 9.88873 25.1462C11.6977 26.3549 13.8244 27 16 27C18.9164 26.9967 21.7123 25.8367 23.7745 23.7745C25.8367 21.7123 26.9967 18.9164 27 16Z"
+                                            fill="#007B8D" />
+                                    </svg>
                                 </div>
                                 <div class="mt-3 text-center sm:mt-5">
                                     <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900">
@@ -150,37 +178,33 @@ watch(() => props.open, (value) => {
                                 </div>
                             </div>
                             <!-- Footer Section -->
-                            <div v-if="type === 'error'" class="px-4 py-3 bg-gray-50 sm:flex sm:flex-row-reverse sm:px-6">
+                            <div v-if="type === 'error'"
+                                class="justify-between px-4 pt-2 pb-4 bg-white sm:flex sm:justify-start sm:space-x-4 sm:space-x-reverse sm:flex-row-reverse">
                                 <button type="button"
-                                    class="inline-flex justify-center w-full px-3 py-2 text-sm font-semibold text-white bg-red-600 rounded-md shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
-                                    @click="handleOnConfirm()">{{ confirmText }}</button>
-                                <button type="button"
-                                    class="inline-flex justify-center w-full px-3 py-2 mt-3 text-sm font-semibold text-gray-900 bg-white rounded-md shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                                    class="inline-flex justify-center w-full px-3 py-2 text-sm font-semibold text-white bg-red-600 rounded-md shadow-sm sm:flex-1 hover:bg-red-500 sm:w-auto"
+                                    @click="handleOnConfirm()">
+                                    {{ confirmText }}
+                                </button>
+                                <button v-if="showCancelButton" type="button"
+                                    class="inline-flex justify-center w-full px-3 py-2 mt-3 text-sm font-semibold text-gray-900 bg-white rounded-md shadow-sm sm:flex-1 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
                                     @click="handleOnCancel()" ref="cancelButtonRef">
                                     {{ cancelText }}
                                 </button>
                             </div>
                             <div v-else-if="type === 'warning'"
-                                class="px-4 py-3 bg-gray-50 sm:flex sm:flex-row-reverse sm:px-6">
+                                class="justify-start px-4 pt-2 pb-4 bg-white sm:justify-between sm:space-x-4 sm:space-x-reverse sm:flex sm:flex-row-reverse">
                                 <button type="button"
-                                    class="inline-flex justify-center w-full px-3 py-2 text-sm font-semibold text-white bg-orange-600 rounded-md shadow-sm hover:bg-orange-500 sm:ml-3 sm:w-auto"
+                                    class="inline-flex justify-center w-full px-3 py-2 text-sm font-semibold text-white bg-yellow-600 rounded-md shadow-sm sm:flex-1 hover:bg-yellow-500 sm:w-auto"
                                     @click="handleOnConfirm()">{{ confirmText }}</button>
-                                <button type="button"
-                                    class="inline-flex justify-center w-full px-3 py-2 mt-3 text-sm font-semibold text-gray-900 bg-white rounded-md shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                                <button v-if="showCancelButton" type="button"
+                                    class="inline-flex justify-center w-full px-3 py-2 mt-3 text-sm font-semibold text-gray-900 bg-white rounded-md shadow-sm sm:flex-1 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
                                     @click="handleOnCancel()" ref="cancelButtonRef">
                                     {{ cancelText }}
                                 </button>
                             </div>
-                            <div v-else-if="type === 'info'" class="mt-5 sm:mt-6">
-                                <button type="button"
-                                    class="inline-flex justify-center w-full px-4 py-2 text-base font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm"
-                                    @click="handleOnConfirm()">
-                                    {{ confirmText }}
-                                </button>
-                            </div>
                             <div v-else-if="type === 'success'" class="mt-5 sm:mt-6">
                                 <button type="button"
-                                    class="inline-flex justify-center w-full px-4 py-2 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:text-sm"
+                                    class="inline-flex justify-center w-full px-4 py-2 text-base font-medium border border-transparent rounded-md shadow-sm text-primary-500 bg-primary-50 hover:bg-primary-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 sm:text-sm"
                                     @click="handleOnConfirm()">
                                     {{ confirmText }}
                                 </button>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 4f2867e..fc0c43e 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,13 +1,14 @@
 
 <script setup lang="ts">
-import CommandPalettes from '@/components/CommandPalettes.vue';
-import MessageBox from '@/components/MessageBox.vue';
-import ActionDialog from '@/components/Dialogs/ActionDialog.vue';
-import ChangePasswordDialog from '@/components/Dialogs/ChangePasswordDialog.vue';
-import { useAuthStore } from '@/stores/auth';
-import { useUserStore } from '@/stores/user';
-import { useCommandPalattesStore } from '@/stores/command';
-import { useMessageStore } from '@/stores/message';
+import CommandPalettes from '@/components/CommandPalettes.vue'
+import MessageBox from '@/components/MessageBox.vue'
+import ActionDialog from '@/components/Dialogs/ActionDialog.vue'
+import ChangePasswordDialog from '@/components/Dialogs/ChangePasswordDialog.vue'
+import { useAuthStore } from '@/stores/auth'
+import { useUserStore } from '@/stores/user'
+import { useCommandPalattesStore } from '@/stores/command'
+import { useMessageStore } from '@/stores/message'
+import { useMenuStore } from '@/stores/menu'
 import {
     Menu,
     MenuButton,
@@ -19,74 +20,58 @@ import {
     ChatBubbleOvalLeftEllipsisIcon,
     QuestionMarkCircleIcon,
     Bars3BottomLeftIcon
-} from '@heroicons/vue/24/outline';
-import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid';
-import { onMounted, onUnmounted, ref } from 'vue';
-import PictureInitial from './PictureInitial.vue';
+} from '@heroicons/vue/24/outline'
+import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
+import { onMounted, onUnmounted, ref } from 'vue'
+import PictureInitial from './PictureInitial.vue'
+import Icon from '@/assets/images/pln-with-text.png'
+import { useDialogStore } from '@/stores/dialog'
 
-const authStore = useAuthStore();
-const userStore = useUserStore();
-const messageStore = useMessageStore();
-const commandStore = useCommandPalattesStore();
+const authStore = useAuthStore()
+const userStore = useUserStore()
+const messageStore = useMessageStore()
+const commandStore = useCommandPalattesStore()
+const menu = useMenuStore()
+const dialog = useDialogStore()
 
-const props = defineProps({ sideBarStatus: Boolean });
-const status = ref(props.sideBarStatus);
-const emits = defineEmits(['onChangeSideBarStatus']);
+const openSideBar = () => menu.toggleSidebar()
 
-function openSideBar() {
-    status.value = true;
-    emits('onChangeSideBarStatus', true);
-};
+const dialogChangePassword = ref(false)
 
-const dialogLogout = ref(false);
-const dialogChangePassword = ref(false);
-
-function handleOnDismissDialogChangePassword() {
-    dialogChangePassword.value = false;
+const handleOnDismissDialogChangePassword = () => {
+    dialogChangePassword.value = false
 }
 
-function showDialogChangePassword() {
-    dialogChangePassword.value = true;
+const showDialogChangePassword = () => {
+    dialogChangePassword.value = true
 }
 
-function handleOnDismissDialogLogout() {
-    dialogLogout.value = false;
+const showDialogLogout = () => {
+    dialog.type = 'error'
+    dialog.title = 'Logout dari akun?'
+    dialog.content = 'Apakah Anda sudah yakin akan logout dari akun ini?'
+    dialog.cancelText = 'Batalkan'
+    dialog.confirmText = 'Ya, logout'
+    dialog.showCancelButton = true
+    dialog.onConfirm = () => {
+        window.location.href = '/login'
+    }
+    dialog.open = true
 }
-
-function showDialogLogout() {
-    dialogLogout.value = true;
-}
-
-function handleOnConfirmDialogLogout() {
-    authStore.logout()
-    window.location.href = '/login'
-}
-
-onMounted(() => {
-    // document.addEventListener('keydown', commandStore.onKeyPressed);
-    // document.addEventListener('keyup', commandStore.onKeyUp);
-});
-
-onUnmounted(() => {
-    // document.removeEventListener('keydown', commandStore.onKeyPressed);
-    // document.removeEventListener('keyup', commandStore.onKeyUp);
-});
 </script>
+
+
 <template>
-    <div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-white shadow-lg shadow-gray-50 md:ml-80">
-        <button type="button" class="px-4 text-gray-500 border-gray-200 focus:outline-none focus:ring-0 md:hidden"
-            @click="openSideBar">
+    <div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-primary-50 md:ml-80">
+        <button type="button" class="px-4 text-gray-500 focus:outline-none focus:ring-0 md:hidden" @click="openSideBar">
             <span class="sr-only">Open sidebar</span>
             <Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" />
         </button>
-        <!-- <div class="flex items-center flex-shrink-0 md:hidden">
+        <div class="flex items-center flex-shrink-0 my-auto ml-2 md:hidden">
             <img class="w-auto h-11" :src="Icon" alt="PLN" />
-        </div> -->
-        <!-- <div class="flex items-center flex-shrink-0 hidden my-auto ml-4 md:block">
-            <img class="w-auto h-11" :src="IconWithText" alt="PLN" />
-        </div> -->
+        </div>
         <div class="flex justify-end w-full px-4">
-            <div class="flex flex-1">
+            <!-- <div class="flex flex-1">
                 <div class="flex w-full md:ml-0">
                     <button @click="commandStore.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">
@@ -95,11 +80,12 @@ onUnmounted(() => {
                             <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> -->
 
             <div class="flex items-center ml-4 md:ml-6">
-                <button type="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">FAQ</span>
                     <QuestionMarkCircleIcon class="w-6 h-6" aria-hidden="true" />
@@ -113,16 +99,25 @@ onUnmounted(() => {
                     class="p-1 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
                     <span class="sr-only">Message</span>
                     <ChatBubbleOvalLeftEllipsisIcon class="w-6 h-6" aria-hidden="true" />
+                </button> -->
+                <button @click="commandStore.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>
+                    <MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
+                    <span class="hidden px-3 text-sm font-medium text-gray-500 md:block text-md">Cari menu</span>
                 </button>
 
                 <!-- Profile dropdown -->
-                <Menu as="div" class="relative ml-3">
+                <Menu as="div" class="relative ml-1">
                     <div>
                         <MenuButton
-                            class="flex items-center max-w-xs text-sm bg-white rounded-full focus:outline-none focus:ring-0">
+                            class="flex items-center max-w-xs px-1 py-1 text-sm rounded-full bg-secondary-100 md:bg-primary-500 focus:outline-none focus:ring-0 line-clamp-1">
                             <span class="sr-only">Open user menu</span>
-                            <PictureInitial size-class="w-8 h-8" background-class="bg-gray-100"
-                                font-class="font-bold text-gray-500 text-md" :name="userStore.user_name" />
+                            <PictureInitial size-class="w-8 h-8" background-class="bg-secondary-100"
+                                font-class="text-xs font-bold text-primary-500" :name="userStore.user_name" />
+                            <span class="hidden px-3 text-xs font-medium md:block text-primary-50 line-clamp-1">
+                                {{ userStore.user_name }}
+                            </span>
                         </MenuButton>
                     </div>
                     <transition enter-active-class="transition duration-100 ease-out"
@@ -169,9 +164,6 @@ onUnmounted(() => {
         </div>
     </div>
 
-    <ActionDialog type="error" title="Keluar dari akun?" message="Apakah Anda sudah yakin akan keluar dari akun ini?"
-        cancel-text="Batalkan" confirm-text="Ya, keluar" :open="dialogLogout" @onClose="handleOnDismissDialogLogout"
-        @onConfirm="handleOnConfirmDialogLogout" />
     <ChangePasswordDialog :open="dialogChangePassword" @onClose="handleOnDismissDialogChangePassword" />
     <CommandPalettes :open="commandStore.open" @onClose="commandStore.handleOnDismissCommandPalettes" />
     <MessageBox :open="messageStore.open" @onClose="messageStore.handleOnDismissMessageBox" />
diff --git a/src/components/Menus/MenuProvider.vue b/src/components/Menus/MenuProvider.vue
index 9cd3107..6f314ac 100644
--- a/src/components/Menus/MenuProvider.vue
+++ b/src/components/Menus/MenuProvider.vue
@@ -1,5 +1,6 @@
 <template>
-    <main class="flex-1 px-2 py-2 sm:px-4 md:px-6 sm:py-4 md:py-6">
+    <main
+        class="flex-1 px-2 py-2 overflow-y-auto bg-white md:mr-4 sm:px-4 md:px-6 sm:py-4 md:py-6 rounded-t-3xl no-scroll-bar">
         <div v-if="route.path !== '/home'" class="mx-auto max-w-7xl">
             <h1 class="text-lg font-medium md:text-2xl lg:text-3xl text-dark">{{ currentRouteName }}</h1>
         </div>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 09883ce..01908b9 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -1,16 +1,9 @@
 <script setup lang="ts">
-import Aside from '@/components/AsideWhite.vue'
+import Aside from '@/components/Aside/Aside.vue'
 import Header from '@/components/Header.vue'
-import { ref } from 'vue'
-
-const sideBarStatus = ref(false)
-
-const handleChangeSideBarStatus = (status: boolean) => {
-    sideBarStatus.value = status
-}
 </script>
 
 <template>
-    <Header :sideBarStatus="sideBarStatus" @onChangeSideBarStatus="handleChangeSideBarStatus" />
-    <Aside :sideBarStatus="sideBarStatus" @onChangeSideBarStatus="handleChangeSideBarStatus" />
+    <Header />
+    <Aside />
 </template>
\ No newline at end of file
diff --git a/src/stores/dialog.ts b/src/stores/dialog.ts
new file mode 100644
index 0000000..8207288
--- /dev/null
+++ b/src/stores/dialog.ts
@@ -0,0 +1,49 @@
+
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+
+export const useDialogStore = defineStore('dialog', () => {
+    const onConfirm = ref<Function>()
+    const onCancel = ref<Function>()
+    const confirmText = ref('')
+    const cancelText = ref('')
+    const open = ref(false)
+    const title = ref('')
+    const content = ref('')
+    const type = ref('normal')
+    const showCancelButton = ref(true)
+    const dismissOnAction = ref(true)
+    const timer = ref<any>()
+    watch(open, (value) => {
+        if (!value) {
+            // check if timer is set
+            if (timer.value) {
+                clearTimeout(timer.value)
+            }
+
+            timer.value = setTimeout(() => {
+                onConfirm.value = () => { }
+                onCancel.value = () => { }
+                dismissOnAction.value = true
+                showCancelButton.value = true
+            }, 2000)
+        } else {
+            if (timer.value) {
+                clearTimeout(timer.value)
+            }
+        }
+    })
+
+    return {
+        showCancelButton,
+        dismissOnAction,
+        onConfirm,
+        onCancel,
+        title,
+        content,
+        type,
+        open,
+        confirmText,
+        cancelText,
+    }
+})
\ No newline at end of file
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
index 4faeaee..5fa9dee 100644
--- a/src/stores/menu.ts
+++ b/src/stores/menu.ts
@@ -1,259 +1,471 @@
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import {
-    BoltIcon,
-    Cog6ToothIcon,
-    ComputerDesktopIcon,
-    DocumentDuplicateIcon,
-    DocumentTextIcon,
-    FolderArrowDownIcon,
-    FolderOpenIcon,
-    ShieldCheckIcon,
-} from '@heroicons/vue/24/outline'
 
+import {
+    LightningSlash,
+    Monitor,
+    SmileySad,
+    Swap
+} from '@/utils/icons'
+import type { MenuItemModel } from '@/utils/interfaces'
 
 export const useMenuStore = defineStore('menu', () => {
-    const navigation = [
+    const navigation: MenuItemModel[] = [
         {
-            name: 'Daftar Transaksi',
-            icon: DocumentDuplicateIcon,
-            href: '/daftar-transaksi',
-            children: [
-                { name: 'Transaksi Aktif Individual', href: '/daftar-transaksi/aktif-individual', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Transaksi Aktif PLN Mobile', href: '/daftar-transaksi/aktif-pln-mobile', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Transaksi Aktif Periksa dan Return Order', href: '/daftar-transaksi/periksa-return-order', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Transaksi Aktif TM', href: '/daftar-transaksi/aktif-tm', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Transaksi Aktif Historis', href: '/daftar-transaksi/aktif-historis', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Monitoring Alih Unit', href: '/daftar-transaksi/monitoring-alih-unit', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Monitoring All', href: '/daftar-transaksi/monitoring-all', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Monitoring Tiket', href: '/daftar-transaksi/monitoring-tiket', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Monitoring History', href: '/daftar-transaksi/monitoring-history', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Monitoring Aktif', href: '/daftar-transaksi/monitoring-aktif', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Monitoring Close di CC', href: '/daftar-transaksi/monitoring-close-cc', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Monitoring Log AutoDispatch', href: '/daftar-transaksi/monitoring-log-autodispatch', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Monitoring Yang Perlu Diperhatikan', href: '/daftar-transaksi/monitoring-perlu-diperhatikan', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Monitoring Log Break Regu', href: '/daftar-transaksi/monitoring-log-break-regu', icon: DocumentDuplicateIcon, children: [], },
-                { name: 'Monitoring Log Alih Regu', href: '/daftar-transaksi/monitoring-log-alih-regu', icon: DocumentDuplicateIcon, children: [], },
-            ],
-        },
-        {
-            name: 'Administration',
-            icon: ShieldCheckIcon,
-            href: '/administration',
+            name: 'Gangguan',
+            href: '/gangguan',
+            icon: LightningSlash,
             children: [
                 {
-                    name: 'Audit Trails',
-                    icon: ShieldCheckIcon,
-                    href: '/administration/audit-trails',
+                    name: 'Daftar',
+                    href: '/gangguan/1',
+                    icon: LightningSlash,
                     children: [
                         {
-                            name: 'Log Login',
-                            href: '/administration/audit-trails/log-login',
-                            icon: ShieldCheckIcon,
+                            name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
+                            href: '/gangguan/1/1',
+                            icon: LightningSlash,
                             children: [],
                         },
                         {
-                            name: 'Log Activity',
-                            href: '/administration/audit-trails/log-aktivity',
-                            icon: ShieldCheckIcon,
+                            name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
+                            href: '/gangguan/1/2',
+                            icon: LightningSlash,
                             children: [],
                         },
                         {
-                            name: 'Log Error',
-                            href: '/administration/audit-trails/log-error',
-                            icon: ShieldCheckIcon,
+                            name: 'Daftar Gangguan Response Time',
+                            href: '/gangguan/1/3',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Daftar Gangguan Recovery Time',
+                            href: '/gangguan/1/4',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
+                            href: '/gangguan/1/5',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Daftar Gangguan Berdasarkan Media',
+                            href: '/gangguan/1/6',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Daftar Gangguan Diselesaikan Mobile APKT',
+                            href: '/gangguan/1/7',
+                            icon: LightningSlash,
                             children: [],
                         },
                     ],
                 },
                 {
-                    name: 'Task Management',
-                    icon: ShieldCheckIcon,
-                    href: '/administration/task-management',
+                    name: 'Rekapitulasi',
+                    href: '/gangguan/2',
+                    icon: LightningSlash,
                     children: [
-                        { name: 'Menu Management', href: '/administration/task-management/menu-management', icon: ShieldCheckIcon, children: [], },
-                        { name: 'System Parameter', href: '/administration/task-management/system-parameter', icon: ShieldCheckIcon, children: [], },
-                        { name: 'User Profile Manager', href: '/administration/task-management/ubah-profile-manager', icon: ShieldCheckIcon, children: [], },
-                        { name: 'Security Projek', href: '/administration/task-management/security-projek', icon: ShieldCheckIcon, children: [], },
-                        { name: 'User Role Manager', href: '/administration/task-management/user-role-manager', icon: ShieldCheckIcon, children: [], },
-                        { name: 'Menu Authorization', href: '/administration/task-management/menu-authorization', icon: ShieldCheckIcon, children: [], },
-                        { name: 'Workflow Designer', href: '/administration/task-management/workflow-designer', icon: ShieldCheckIcon, children: [], },
-                        { name: 'APKT News', href: '/administration/task-management/apkt-news', icon: ShieldCheckIcon, children: [], },
-                    ],
-                },
-                {
-                    name: 'Master Borderless',
-                    icon: ShieldCheckIcon,
-                    href: '/administration/master-borderless',
-                    children: [
-                        { name: 'Zone Borderless', href: '/administration/master-borderless/zone-borderless', icon: ShieldCheckIcon, children: [], },
-                        { name: 'User Zone Borderless', href: '/administration/master-borderless/user-zone-borderless', icon: ShieldCheckIcon, children: [], },
+                        {
+                            name: 'Rekapitulasi Gangguan All',
+                            href: '/gangguan/2/1',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
+                            href: '/gangguan/2/2',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Gangguan Per Jenis Gangguan SE 004',
+                            href: '/gangguan/2/3',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Gangguan Per Posko',
+                            href: '/gangguan/2/4',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Gangguan Per Regu',
+                            href: '/gangguan/2/5',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Gangguan Per Tanggal',
+                            href: '/gangguan/2/6',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Gangguan Berdasarkan Media',
+                            href: '/gangguan/2/7',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Gangguan Alih  Posko',
+                            href: '/gangguan/2/8',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Gangguan Per Status',
+                            href: '/gangguan/2/9',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
+                            href: '/gangguan/2/10',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Rating Per Posko',
+                            href: '/gangguan/2/11',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Rating Per Regu',
+                            href: '/gangguan/2/12',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Koreksi Transaksi Individual',
+                            href: '/gangguan/2/13',
+                            icon: LightningSlash,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Cleansing Transaksi TM',
+                            href: '/gangguan/2/14',
+                            icon: LightningSlash,
+                            children: [],
+                        },
                     ],
                 },
             ],
         },
         {
-            name: 'Master Yantek',
-            icon: FolderOpenIcon,
-            href: '/master-yantek',
-            children: [
-                { name: 'Unit', href: '/master-yantek/unit', icon: FolderOpenIcon, children: [], },
-                { name: 'Unit Jaringan', href: '/master-yantek/unit-jaringan', icon: FolderOpenIcon, children: [], },
-                { name: 'Unit Pelayanan', href: '/master-yantek/unit-pelayanan', icon: FolderOpenIcon, children: [], },
-                { name: 'Regu Yantek', href: '/master-yantek/regu-yantek', icon: FolderOpenIcon, children: [], },
-                { name: 'Gardu Induk', href: '/master-yantek/gardu-induk', icon: FolderOpenIcon, children: [], },
-                { name: 'Gardu Penyulang TM', href: '/master-yantek/gardu-penyulang-tm', icon: FolderOpenIcon, children: [], },
-                { name: 'Gardu Distribusi', href: '/master-yantek/gardu-distribusi', icon: FolderOpenIcon, children: [], },
-                { name: 'Group Gangguan', href: '/master-yantek/group-gangguan', icon: FolderOpenIcon, children: [], },
-                { name: 'Wilayah Yantek', href: '/master-yantek/wilayah-yantek', icon: FolderOpenIcon, children: [], },
-                { name: 'Material', href: '/master-yantek/material', icon: FolderOpenIcon, children: [], },
-            ],
-        },
-        {
-            name: 'Transaksi',
-            icon: DocumentTextIcon,
-            href: '/transaksi',
-            children: [
-                { name: 'Gangguan dan Keluhan', href: '/transaksi/gangguan-dan-keluhan', icon: DocumentTextIcon, children: [], },
-                { name: 'Gangguan Tegangan Menengah', href: '/transaksi/gangguan-tegangan-menengah', icon: DocumentTextIcon, children: [], },
-                { name: 'Pemadaman Terencana', href: '/transaksi/pemadaman-terencana', icon: DocumentTextIcon, children: [], },
-                { name: 'Aplikasi Off-Line', href: '/transaksi/aplikasi-off-line', icon: DocumentTextIcon, children: [], },
-                { name: 'Penugasan Khusus', href: '/transaksi/penugasan-khusus', icon: DocumentTextIcon, children: [], },
-                { name: 'Mutasi Pengaduan', href: '/transaksi/mutasi-pengaduan', icon: DocumentTextIcon, children: [], },
-            ],
-        },
-        {
-            name: 'Saidi Saifi',
-            icon: ComputerDesktopIcon,
-            href: '/saidi-saifi',
+            name: 'Keluhan',
+            href: '/keluhan',
+            icon: SmileySad,
             children: [
                 {
-                    name: 'Monitor Jaringan',
-                    icon: ComputerDesktopIcon,
-                    href: '/saidi-saifi/monitor-jaringan',
+                    name: 'Daftar',
+                    icon: SmileySad,
+                    href: '/keluhan/1',
                     children: [
                         {
-                            name: 'Dashboard Asset',
-                            href: '/saidi-saifi/monitor-jaringan/dashboard-asset',
-                            icon: ComputerDesktopIcon,
+                            name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
+                            href: '/keluhan/1/1',
+                            icon: SmileySad,
                             children: [],
                         },
                         {
-                            name: 'Manuver Topologi Jaringan',
-                            href: '/saidi-saifi/monitor-jaringan/manuver-topologi-jaringan',
-                            icon: ComputerDesktopIcon,
+                            name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
+                            href: '/keluhan/1/2',
+                            icon: SmileySad,
                             children: [],
                         },
                         {
-                            name: 'Pencarian Segment Jaringan',
-                            href: '/saidi-saifi/monitor-jaringan/pencarian-segment-jaringan',
-                            icon: ComputerDesktopIcon,
+                            name: 'Daftar Keluhan Response Time',
+                            href: '/keluhan/1/3',
+                            icon: SmileySad,
                             children: [],
                         },
                         {
-                            name: 'Penormalan Manuver Jaringan',
-                            href: '/saidi-saifi/monitor-jaringan/penormalan-manuver-jaringan',
-                            icon: ComputerDesktopIcon,
+                            name: 'Daftar Keluhan Recovery Time',
+                            href: '/keluhan/1/4',
+                            icon: SmileySad,
                             children: [],
                         },
                         {
-                            name: 'Pindah Jaringan',
-                            href: '/saidi-saifi/monitor-jaringan/pindah-jaringan',
-                            icon: ComputerDesktopIcon,
+                            name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
+                            href: '/keluhan/1/5',
+                            icon: SmileySad,
+                            children: [],
+                        },
+                        {
+                            name: 'Daftar Keluhan Berdasarkan Media',
+                            href: '/keluhan/1/6',
+                            icon: SmileySad,
+                            children: [],
+                        },
+                        {
+                            name: 'Daftar Keluhan Selesai di CC123',
+                            href: '/keluhan/1/7',
+                            icon: SmileySad,
                             children: [],
                         },
                     ],
                 },
                 {
-                    name: 'Monitoring SCADA',
-                    icon: ComputerDesktopIcon,
-                    href: '/saidi-saifi/monitor-scada/',
+                    name: 'Rekapitulasi',
+                    icon: SmileySad,
+                    href: '/keluhan/2',
                     children: [
-                        { name: 'Monitoring Mapping Database', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Monitoring Log SCADA', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Mapping Gardu Induk', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Mapping Feeder', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Mapping Zona', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Mapping Lateral', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Mapping Section', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Mapping Segment', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Mapping Sub Lateral', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Mapping Gardu Distribusi', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Mapping Trafo', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Mapping Jurusan', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Monitoring Integrasi ????', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Monitoring Integrasi per No Tiang', href: '/saidi-saifi/monitor-scada/', icon: ComputerDesktopIcon, children: [], },
-                    ],
-                },
-                {
-                    name: 'Master Jaringan',
-                    icon: ComputerDesktopIcon,
-                    href: '/saidi-saifi/master-jaringan/',
-                    children: [
-                        { name: 'Master Gardu Induk', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Master Feeder', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Master Zona', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Master Section', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Master Segement', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Master Lateral', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Master Gardu Distribusi', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Master Switch', href: '/saidi-saifi/master-jaringan/', icon: ComputerDesktopIcon, children: [], },
-                    ],
-                },
-                {
-                    name: 'Master Perhitungan',
-                    icon: ComputerDesktopIcon,
-                    href: '/saidi-saifi/master-perhitungan/',
-                    children: [
-                        { name: 'Master Asumsi', href: '/saidi-saifi/master-perhitungan/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Master Asumsi Salatiga', href: '/saidi-saifi/master-perhitungan/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Master Faktor Daya & Beban', href: '/saidi-saifi/master-perhitungan/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Data III-09', href: '/saidi-saifi/master-perhitungan/', icon: ComputerDesktopIcon, children: [], },
-                    ],
-                },
-                {
-                    name: 'Laporan Saidi Saifi',
-                    icon: ComputerDesktopIcon,
-                    href: '/saidi-saifi/laporan-saidi-saifi/',
-                    children: [
-                        { name: 'Laporan Saidi Saifi per Penyulang', href: '/saidi-saifi/laporan-saidi-saifi/', icon: ComputerDesktopIcon, children: [], },
-                    ],
-                },
-                {
-                    name: 'Pelanggan Prioritas',
-                    icon: ComputerDesktopIcon,
-                    href: '/saidi-saifi/pelanggan-prioritas/',
-                    children: [
-                        { name: 'Daftar Pelanggan Prioritas', href: '/saidi-saifi/pelanggan-prioritas/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Monitoring Pelanggan Prioritas', href: '/saidi-saifi/pelanggan-prioritas/', icon: ComputerDesktopIcon, children: [], },
-                    ],
-                },
-                {
-                    name: 'Koreksi dan Cleansing',
-                    icon: ComputerDesktopIcon,
-                    href: '/saidi-saifi/koreksi-dan-cleansing/',
-                    children: [
-                        { name: 'Monitoring Koreksi dan Cleansing', href: '/saidi-saifi/koreksi-dan-cleansing/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Koreksi Transaksi Individual', href: '/saidi-saifi/koreksi-dan-cleansing/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Koreksi dan Cleansing TM', href: '/saidi-saifi/koreksi-dan-cleansing/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Koreksi Kode Gangguan dan ANEV', href: '/saidi-saifi/koreksi-dan-cleansing/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Laporan Koreksi dan Cleansing', href: '/saidi-saifi/koreksi-dan-cleansing/', icon: ComputerDesktopIcon, children: [], },
-                        { name: 'Delegasi Koreksi dan Cleansing', href: '/saidi-saifi/koreksi-dan-cleansing/', icon: ComputerDesktopIcon, children: [], },
+                        {
+                            name: 'Rekapitulasi Keluhan All',
+                            href: '/keluhan/2/1',
+                            icon: SmileySad,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
+                            href: '/keluhan/2/2',
+                            icon: SmileySad,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
+                            href: '/keluhan/2/3',
+                            icon: SmileySad,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Keluhan Per Tanggal',
+                            href: '/keluhan/2/4',
+                            icon: SmileySad,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Keluhan Per Unit',
+                            href: '/keluhan/2/5',
+                            icon: SmileySad,
+                            children: [],
+                        },
+                        {
+                            name: 'Rekapitulasi Keluhan Berdasarkan Media',
+                            href: '/keluhan/2/6',
+                            icon: SmileySad,
+                            children: [],
+                        },
                     ],
                 },
             ],
         },
         {
-            name: 'Utility',
-            icon: BoltIcon,
-            href: '/utility',
+            name: 'Monalisa',
+            href: '/monalisa',
+            icon: Monitor,
             children: [
-                { name: 'Piket Obank', href: '/utility/piket-obank', icon: BoltIcon, children: [], },
+                {
+                    name: 'Gangguan',
+                    icon: Monitor,
+                    href: '/monalisa/1',
+                    children: [
+                        {
+                            name: 'Rekapitulasi',
+                            href: '/monalisa/1/1',
+                            icon: Monitor,
+                            children: [
+                                {
+                                    name: 'Jumlah Kali  Gangguan',
+                                    href: '/monalisa/1/1/1',
+                                    icon: Monitor,
+                                    children: [],
+                                },
+                                {
+                                    name: 'Recovery Time (RCT) Gangguan',
+                                    href: '/monalisa/1/1/2',
+                                    icon: Monitor,
+                                    children: [],
+                                },
+                                {
+                                    name: 'Response Time (RPT) Gangguan',
+                                    href: '/monalisa/1/1/3',
+                                    icon: Monitor,
+                                    children: [],
+                                },
+                                {
+                                    name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
+                                    href: '/monalisa/1/1/4',
+                                    icon: Monitor,
+                                    children: [],
+                                },
+                                {
+                                    name: 'Rekapitulasi Lapor Ulang Gangguan',
+                                    href: '/monalisa/1/1/5',
+                                    icon: Monitor,
+                                    children: [],
+                                },
+                                {
+                                    name: 'Rekapitulasi ENS Gangguan',
+                                    href: '/monalisa/1/1/6',
+                                    icon: Monitor,
+                                    children: [],
+                                },
+                                {
+                                    name: 'Rekapitulasi Gangguan Belum Selesai',
+                                    href: '/monalisa/1/1/7',
+                                    icon: Monitor,
+                                    children: [],
+                                },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    name: 'Keluhan',
+                    icon: Monitor,
+                    href: '/monalisa/2',
+                    children: [
+                        {
+                            name: 'Rekapitulasi',
+                            href: '/monalisa/2/1',
+                            icon: Monitor,
+                            children: [
+                                {
+                                    name: 'Jumlah Kali  Keluhan',
+                                    href: '/monalisa/2/1/1',
+                                    icon: Monitor,
+                                    children: [],
+                                },
+                                {
+                                    name: 'Recovery Time (RCT) Keluhan',
+                                    href: '/monalisa/2/1/2',
+                                    icon: Monitor,
+                                    children: [],
+                                },
+                                {
+                                    name: 'Response Time (RPT) Keluhan',
+                                    href: '/monalisa/2/1/3',
+                                    icon: Monitor,
+                                    children: [],
+                                },
+                                {
+                                    name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
+                                    href: '/monalisa/2/1/4',
+                                    icon: Monitor,
+                                    children: [],
+                                },
+                                {
+                                    name: 'Rekapitulasi Lapor Ulang Keluhan',
+                                    href: '/monalisa/2/1/5',
+                                    icon: Monitor,
+                                    children: [],
+                                },
+                                {
+                                    name: 'Rekapitulasi Keluhan Belum Selesai',
+                                    href: '/monalisa/2/1/6',
+                                    icon: Monitor,
+                                    children: [],
+                                },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    name: 'Laporan KPI',
+                    icon: Monitor,
+                    href: '/monalisa/3',
+                    children: [
+                        {
+                            name: 'Bulanan',
+                            icon: Monitor,
+                            href: '/monalisa/3/1',
+                            children: [
+                                {
+                                    name: 'Penurunan Jumlah Komplain',
+                                    icon: Monitor,
+                                    href: '/monalisa/3/1/1',
+                                    children: [],
+                                },
+                                {
+                                    name: 'Aging Complaint',
+                                    icon: Monitor,
+                                    href: '/monalisa/3/1/2',
+                                    children: [],
+                                },
+                                {
+                                    name: 'Energy Not Sales (ENS)',
+                                    icon: Monitor,
+                                    href: '/monalisa/3/1/3',
+                                    children: [],
+                                },
+                                {
+                                    name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
+                                    icon: Monitor,
+                                    href: '/monalisa/3/1/4',
+                                    children: [],
+                                },
+                            ],
+                        },
+                        {
+                            name: 'Kumulatif',
+                            icon: Monitor,
+                            href: '/monalisa/3/2',
+                            children: [
+                                {
+                                    name: 'Penurunan Jumlah Komplain',
+                                    icon: Monitor,
+                                    href: '/monalisa/3/2/1',
+                                    children: [],
+                                },
+                                {
+                                    name: 'Aging Complaint',
+                                    icon: Monitor,
+                                    href: '/monalisa/3/2/2',
+                                    children: [],
+                                },
+                                {
+                                    name: 'Energy Not Sales (ENS)',
+                                    icon: Monitor,
+                                    href: '/monalisa/3/2/3',
+                                    children: [],
+                                },
+                                {
+                                    name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
+                                    icon: Monitor,
+                                    href: '/monalisa/3/2/4',
+                                    children: [],
+                                }
+                            ],
+                        }
+                    ],
+                },
+            ],
+        },
+        {
+            name: 'Check In Dan Check Out',
+            href: '/check-in-out',
+            icon: Swap,
+            children: [
+                {
+                    name: 'Laporan Check In /Check Out (CICO)',
+                    href: '/check-in-out/1',
+                    icon: Swap,
+                    children: [
+                        {
+                            name: 'Laporan Check In /Check Out (CICO)',
+                            href: '/check-in-out/1/1',
+                            icon: Swap,
+                            children: [],
+                        },
+                    ],
+                },
             ],
         },
     ]
+    const sidebarOpen = ref(false)
+    const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value)
 
-
-    // expose everything
-    return { navigation }
+    return {
+        navigation,
+        toggleSidebar,
+        sidebarOpen
+    }
 })
\ No newline at end of file
diff --git a/src/utils/icons.ts b/src/utils/icons.ts
new file mode 100644
index 0000000..0cfcad3
--- /dev/null
+++ b/src/utils/icons.ts
@@ -0,0 +1,6 @@
+export { default as LightningSlash } from '@/assets/icons/lightning-slash.svg'
+export { default as SmileySad } from '@/assets/icons/smiley-sad.svg'
+export { default as Monitor } from '@/assets/icons/monitor.svg'
+export { default as Swap } from '@/assets/icons/swap.svg'
+export { default as DotOutline } from '@/assets/icons/dot-outline.svg'
+export { default as IconApp } from '@/assets/images/pln-with-text.png'
\ No newline at end of file
diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
new file mode 100644
index 0000000..d169c44
--- /dev/null
+++ b/src/utils/interfaces.ts
@@ -0,0 +1,8 @@
+interface MenuItemModel {
+    name: string;
+    href: string;
+    icon: any;
+    children: MenuItemModel[];
+}
+
+export type { MenuItemModel }
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 7a4b5d7..a096874 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,6 +1,6 @@
 <template>
   <Navigation />
-  <div class="flex flex-col flex-1 md:pl-80">
+  <div class="flex flex-col flex-1 h-[calc(100%-64px)] overflow-hidden md:pl-80 bg-primary-50">
     <MenuProvider>
       <RouterView />
     </MenuProvider>