diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index f65583e..c161108 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -2779,6 +2779,10 @@ select {
   fill: #fff;
 }
 
+.group:hover .group-hover\:fill-primary-500 {
+  fill: #035b71;
+}
+
 .group:hover .group-hover\:text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -2794,6 +2798,11 @@ select {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.group:hover .group-hover\:text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgb(3 91 113 / var(--tw-text-opacity));
+}
+
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
diff --git a/src/components/Navigation/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue
index 66e6b7e..cfc9d8b 100644
--- a/src/components/Navigation/Aside/Aside.vue
+++ b/src/components/Navigation/Aside/Aside.vue
@@ -136,6 +136,4 @@ const closeSideBar = () => menu.toggleSidebar()
             </div>
         </div>
     </div>
-</template>
-
-@/utils/text@/utils/texts
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/src/components/Navigation/Aside/AsideMenuMultiple.vue b/src/components/Navigation/Aside/AsideMenuMultiple.vue
index 6d1ef10..45f5c60 100644
--- a/src/components/Navigation/Aside/AsideMenuMultiple.vue
+++ b/src/components/Navigation/Aside/AsideMenuMultiple.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import type { MenuItemModel } from '@/types/menu'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import { useMenuStore } from '@/stores/menu'
-import { DotOutline } from '@/utils/icons'
+import { IconDotOutline } from '@/utils/icons'
 import AsideMenuSingle from '@/components/Navigation/Aside/AsideMenuSingle.vue'
 const menu = useMenuStore()
 
@@ -36,11 +36,17 @@ const isMenuSelected = computed(() => {
         <Disclosure :defaultOpen="item.expanded" as="dev">
             <!-- Nested item with children -->
             <DisclosureButton @click="menu.toggleSidebarMenu(item.path, !item.expanded)"
-                :class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', isMenuSelected ? 'text-primary-500' : 'text-gray-600', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
-                <embed :src="isChildren ? DotOutline : item.icon"
-                    :class="[isMenuSelected ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', isChildren ? '' : 'mr-2', 'flex-shrink-0 w-6 h-6']"
-                    type="image/svg+xml" />
-                <span class="flex-1">{{ item.name }}</span>
+                :class="[(isMenuSelected || item.expanded || isChildren) ? 'bg-primary-100 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', isMenuSelected ? 'text-primary-500' : 'text-gray-600', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
+                <component v-if="isChildren" :is="IconDotOutline"
+                    :class="[(isMenuSelected || item.expanded) ? ' fill-primary-500' : 'text-aside group-hover:fill-primary-500', 'mr-2 flex-shrink-0 h-6 w-6']"
+                    aria-hidden="true" />
+                <component v-else :is="item.icon"
+                    :class="[(isMenuSelected || item.expanded || isChildren || selected) ? ' fill-primary-500' : 'text-aside group-hover:fill-primary-500', 'mr-2 flex-shrink-0 h-6 w-6']"
+                    aria-hidden="true" />
+                <span
+                    :class="[(isMenuSelected || item.expanded || selected) ? 'text-primary-500' : 'group-hover:text-primary-500', 'flex-1']">
+                    {{ item.name }}
+                </span>
 
                 <svg :class="[isMenuSelected ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', item.expanded ? '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">
@@ -71,4 +77,4 @@ const isMenuSelected = computed(() => {
 
         </Disclosure>
     </div>
-</template>@/utils/menu
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/src/components/Navigation/Aside/AsideMenuSingle.vue b/src/components/Navigation/Aside/AsideMenuSingle.vue
index 5cedd6c..9606dd1 100644
--- a/src/components/Navigation/Aside/AsideMenuSingle.vue
+++ b/src/components/Navigation/Aside/AsideMenuSingle.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { MenuItemModel } from '@/types/menu'
+import { IconDotOutline } from '@/utils/icons';
 
 defineProps({
     item: {
@@ -22,22 +23,12 @@ defineProps({
         <RouterLink :to="item.path"
             :class="[selected ? 'aside-single-item-active' : 'aside-single-item-inactive', isChildren ? 'mt-1' : 'mt-0']">
 
-            <svg v-if="isChildren"
-                :class="[selected ? 'aside-single-item-icon stroke-white' : 'aside-single-item-icon-inactive']" width="16"
-                height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-                <g id="DotOutline">
-                    <path id="Vector" opacity="0.2"
-                        d="M9.5 8C9.5 8.29667 9.41203 8.58668 9.24721 8.83336C9.08238 9.08003 8.84812 9.27229 8.57403 9.38582C8.29994 9.49935 7.99834 9.52906 7.70737 9.47118C7.41639 9.4133 7.14912 9.27044 6.93934 9.06066C6.72956 8.85088 6.5867 8.58361 6.52882 8.29264C6.47094 8.00166 6.50065 7.70006 6.61418 7.42597C6.72771 7.15189 6.91997 6.91762 7.16665 6.7528C7.41332 6.58797 7.70333 6.5 8 6.5C8.39783 6.5 8.77936 6.65804 9.06066 6.93934C9.34197 7.22064 9.5 7.60218 9.5 8Z"
-                        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>
-
-            <embed v-else :src="item.icon" type="image/svg+xml"
-                :class="[selected ? 'text-white fill-white' : 'text-aside group-hover:text-white group-hover:fill-white', 'mr-2 flex-shrink-0 h-6 w-6']">
+            <IconDotOutline v-if="isChildren"
+                :class="['w-6 h-6', selected ? 'aside-single-item-icon stroke-white' : 'aside-single-item-icon-inactive']" />
 
+            <component :is="item.icon"
+                :class="[selected ? 'text-white fill-white' : 'text-aside group-hover:text-white group-hover:fill-white', 'mr-2 flex-shrink-0 h-6 w-6']"
+                aria-hidden="true" />
             {{ item.name }}
         </RouterLink>
     </div>