diff --git a/packages/ui/src/components/footer/footer.ts b/packages/ui/src/components/footer/footer.ts
deleted file mode 100644
index 6bcd58ff7..000000000
--- a/packages/ui/src/components/footer/footer.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface AcvFooterSlots {
-  /**
-   * The default slot content (for buttons by design)
-   */
-  default: void
-  /**
-   * Used to pass a custom side content (text or link by design)
-   */
-  side: void
-}
diff --git a/packages/ui/src/components/footer/footer.vue b/packages/ui/src/components/footer/footer.vue
index 5fa0a316a..00ad68464 100644
--- a/packages/ui/src/components/footer/footer.vue
+++ b/packages/ui/src/components/footer/footer.vue
@@ -1,17 +1,17 @@
 <script lang="ts" setup>
-  import type { AcvFooterSlots } from './footer.ts';
   import AcvDivider from '../divider/divider.vue';
 
   defineOptions({ name: 'AcvFooter' });
-  defineSlots<AcvFooterSlots>();
 </script>
 
 <template>
   <div class="acv-footer">
     <AcvDivider />
-    <div class="acv-footer-content">
+    <div class="content">
+      <!-- @slot Used to pass a custom side content (text or link by design) -->
       <slot name="side" />
       <div class="actions">
+        <!-- @slot The default slot content (for buttons by design) -->
         <slot />
       </div>
     </div>
@@ -20,12 +20,12 @@
 
 <style scoped>
 .acv-footer {
-  --acv-divider-v-margin: 0;
+  --_acv-divider-v-margin: 0;
   display: flex;
   flex-direction: column;
 }
 
-.acv-footer-content {
+.content {
   display: flex;
   align-items: center;
   gap: var(--acv-spacing-regular);
diff --git a/packages/ui/src/components/footer/public.ts b/packages/ui/src/components/footer/public.ts
index 0e75c7ba2..211e73e43 100644
--- a/packages/ui/src/components/footer/public.ts
+++ b/packages/ui/src/components/footer/public.ts
@@ -1,2 +1 @@
-export * from './footer.ts';
 export { default as AcvFooter } from './footer.vue';
diff --git a/packages/ui/src/components/menu-item/menuItem.css b/packages/ui/src/components/menu-item/menuItem.css
deleted file mode 100644
index 12a6bb2c7..000000000
--- a/packages/ui/src/components/menu-item/menuItem.css
+++ /dev/null
@@ -1,13 +0,0 @@
-@layer tokens {
-  :root {
-    --acv-menu-item-color: var(--acv-color-white);
-    --acv-menu-item-hover-bg: var(--acv-color-white);
-    --acv-menu-item-hover-color: var(--acv-color-black);
-    --acv-menu-item-height: 64px;
-    --acv-menu-item-gap: var(--acv-spacing-regular, 16px);
-    --acv-menu-item-padding-block: var(--acv-spacing-small);
-    --acv-menu-item-padding-inline-start: var(--acv-spacing-regular);
-    --acv-menu-item-padding-inline-end: var(--acv-spacing-regular);
-    --acv-menu-item-indent: 16px;
-  }
-}
diff --git a/packages/ui/src/components/menu-item/menuItem.spec.ts b/packages/ui/src/components/menu-item/menuItem.spec.ts
index f4e79c2a8..ccaab0dde 100644
--- a/packages/ui/src/components/menu-item/menuItem.spec.ts
+++ b/packages/ui/src/components/menu-item/menuItem.spec.ts
@@ -50,7 +50,7 @@ describe('test MenuItem component', () => {
       "<li data-v-1716f12c="" class="acv-menu-item" role="menuitem" tabindex="0" style="--1716f12c-indent: -24px; --1716f12c-clampSize: 0;">
         <!--v-if-->
         <!--v-if-->
-        <div data-v-1716f12c="" class="acv-text acv-text--body-24 acv-text--ellipsis"></div>
+        <div data-v-1716f12c="" class="text ellipsis"></div>
         <!--v-if-->
       </li>"
     `);
diff --git a/packages/ui/src/components/menu-item/menuItem.vue b/packages/ui/src/components/menu-item/menuItem.vue
index 86048a9a5..e09ee970f 100644
--- a/packages/ui/src/components/menu-item/menuItem.vue
+++ b/packages/ui/src/components/menu-item/menuItem.vue
@@ -11,8 +11,6 @@
   import { computed, getCurrentInstance, inject, ref, toValue } from 'vue';
   import { MENU_KEY } from '../menu/menu.ts';
 
-  import './menuItem.css';
-
   const props = withDefaults(defineProps<AcvMenuItemProps>(), {
     iconSize: 'md'
   });
@@ -74,7 +72,7 @@
         </div>
         <div
           v-else
-          class="acv-text--ellipsis"
+          class="ellipsis"
         >
           <slot />
         </div>
@@ -107,23 +105,23 @@
       </template>
       <span
         v-if="slots.title || slots.subtitle"
-        class="acv-text--ellipsis"
+        class="ellipsis"
       >
         <span
           v-if="slots.title"
-          class="acv-menu-item__title acv-text acv-text--body-24 acv-text--ellipsis"
+          class="title ellipsis"
         >
           <slot name="title" />
         </span>
         <span
           v-if="$slots.subtitle"
-          class="acv-menu-item__subtitle acv-text--caption acv-text--ellipsis acv-text--color-fixed-light"
+          class="subtitle text-caption ellipsis"
         >
           <slot name="subtitle" />
         </span>
       </span>
       <div
-        class="acv-text acv-text--body-24 acv-text--ellipsis"
+        class="text ellipsis"
         :class="{ clamp }"
       >
         <slot />
@@ -143,39 +141,77 @@
   .acv-menu-item {
     --acv-menu-item-indent: v-bind(indent);
     --acv-menu-item-clamp: v-bind(clampSize);
+    --acv-menu-item-height: 64px;
     align-items: center;
-    color: var(--acv-menu-item-color);
+    color: var(--_acv-menu-item-color);
     cursor: pointer;
     display: flex;
     font-size: var(--acv-font-size-caption);
     font-weight: var(--acv-font-weight-strong);
-    gap: var(--acv-menu-item-gap);
+    gap: var(--_acv-menu-item-gap);
     grid-template-columns: auto 1fr;
     letter-spacing: .3px;
     line-height: 24px;
     min-height: var(--acv-menu-item-height);
-    padding-block:var(--acv-spacing-small, 8px) ;
-    padding-inline: var(--acv-menu-item-padding-inline-start) var(--acv-menu-item-padding-inline-end, 16px);
+    padding-block:var(--acv-spacing-small) ;
+    padding-inline: var(--_acv-menu-item-padding-start) var(--_acv-menu-item-padding-end);
     position: relative;
     transition: transform .5s ease;
     overflow: visible;
-    justify-content: var(--acv-menu-item-justify-content, start);
+    justify-content: var(--acv-menu-item-justify-content);
 
     &.selected,
     &:hover.selected,
     &:active {
-      background-color: var(--acv-menu-item-selected-bg);
-      color: var(--acv-menu-item-selected-color);
+      background-color: var(--_acv-menu-item-selected-bg);
+      color: var(--_acv-menu-item-selected-color);
     }
 
     &.disabled {
       pointer-events: none;
-      color: hsl(from var(--acv-menu-item-color) h s calc(l - 30));
+      color: var(--acv-color-status-neutral-secondary);
     }
 
     &:hover {
-      color: var(--acv-menu-item-hover-color);
-      background-color: var(--acv-menu-item-hover-bg);
+      color: var(--_acv-menu-item-hover-color);
+      background-color: var(--_acv-menu-item-hover-bg);
+    }
+
+    .title {
+      margin: 0;
+      font-size: var(--acv-font-size-accent);
+      line-height: var(--acv-font-line-height-regular);
+      font-weight: var(--acv-font-weight-regular);
+    }
+
+    .ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+      max-width: 100%;
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    .subtitle {
+      text-align: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .text-caption {
+      font-size: var(--acv-font-size-caption);
+      font-weight: var(--acv-font-weight-regular);
+      line-height: var(--acv-font-line-height-x-small);
+    }
+
+    .text {
+      margin: 0;
+      font-size: var(--acv-font-size-accent);
+      line-height: var(--acv-font-line-height-regular);
+      font-weight: var(--acv-font-weight-regular);
     }
 
     .clamp {
@@ -193,7 +229,7 @@
       margin-left: auto;
     }
 
-    &:deep(.acv-icon) {
+    .icon {
       min-width: 16px;
     }
   }
diff --git a/packages/ui/src/components/menu/menu.css b/packages/ui/src/components/menu/menu.css
deleted file mode 100644
index 857881baa..000000000
--- a/packages/ui/src/components/menu/menu.css
+++ /dev/null
@@ -1,12 +0,0 @@
-@layer tokens {
-  :root {
-    --acv-menu-color: var(--acv-menu-color-primary);
-    --acv-menu-color-primary: hsl(215deg 100% 15%);
-    --acv-menu-color-secondary: hsl(213deg 100% 45%);
-    --acv-menu-color-text-active: var(--acv-color-white);
-    --acv-menu-color-text-light: var(--acv-color-white-70);
-    --acv-menu-color-text: var(--acv-color-white);
-    --acv-menu-bg-color: var(--acv-color-nav-primary);
-    --acv-menu-gap: var(--acv-spacing-regular);
-  }
-}
diff --git a/packages/ui/src/components/menu/menu.spec.ts b/packages/ui/src/components/menu/menu.spec.ts
index 69e97037e..f7b8722ef 100644
--- a/packages/ui/src/components/menu/menu.spec.ts
+++ b/packages/ui/src/components/menu/menu.spec.ts
@@ -52,8 +52,11 @@ describe('test Menu component', () => {
   it('renders', () => {
     const wrapper = mount(Menu);
     expect(wrapper.html()).toMatchInlineSnapshot(`
-      "<nav data-v-5dcaf39a="" class="acv-menu primary">
-        <menu data-v-5dcaf39a="" class="menubar acv-scrollbar" role="menubar"></menu>
+      "<nav data-v-5dcaf39a="" class="acv-menu acv-menu_type_primary">
+        <!-- @slot Left side slot content. Usually for icon -->
+        <menu data-v-5dcaf39a="" class="menubar acv-scrollbar" role="menubar">
+          <!-- @slot Default slot content. Usually for text -->
+        </menu>
         <!--v-if-->
         <!--v-if-->
       </nav>"
diff --git a/packages/ui/src/components/menu/menu.ts b/packages/ui/src/components/menu/menu.ts
index fdca6fce2..77725b8f0 100644
--- a/packages/ui/src/components/menu/menu.ts
+++ b/packages/ui/src/components/menu/menu.ts
@@ -92,10 +92,4 @@ export interface AcvMenuInjection {
 
 const MENU_KEY = Symbol('MENU_KEY') as InjectionKey<AcvMenuInjection>;
 
-export interface AcvMenuSlots {
-  prepend?: () => any
-  append?: () => any
-  default: () => any
-}
-
 export { MENU_KEY };
diff --git a/packages/ui/src/components/menu/menu.vue b/packages/ui/src/components/menu/menu.vue
index 08d3ebea7..0cdfdd1a1 100644
--- a/packages/ui/src/components/menu/menu.vue
+++ b/packages/ui/src/components/menu/menu.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
   import type { Ref } from 'vue';
-  import type { AcvMenuEvents, AcvMenuProps, AcvMenuSlots } from './menu.ts';
+  import type { AcvMenuEvents, AcvMenuProps } from './menu.ts';
   import AcvButton from '@/components/button/button.vue';
   import { useLevel } from '@/components/menu-item/useLevel.ts';
   import { useNested } from '@/components/menu-item/useNested.ts';
   import { IconChevronLeft16, IconChevronRight16 } from '@acronis-platform/icons/chevron';
-  import { computed, provide, ref, toRefs } from 'vue';
+  import { provide, ref, toRefs } from 'vue';
   import { MENU_KEY } from './menu.ts';
 
-  import './menu.css';
-
   /**
    * User interface element that provides a set of links or buttons
    * to navigate through different sections or pages of a website or application.
@@ -23,7 +21,6 @@
     type: 'primary',
   });
   const emit = defineEmits<AcvMenuEvents>();
-  const slots = defineSlots<AcvMenuSlots>();
   const menuRef = ref<HTMLElement | null>(null);
   const menuBarRef = ref<HTMLElement | null>(null);
   const isOverflow = ref(false);
@@ -52,30 +49,28 @@
       behavior: 'smooth',
     });
   }
-
-  const menuClasses = computed(() => {
-    return {
-      [`${props.type}`]: props.type,
-      [`is-${props.background}`]: props.background,
-      [`is-borderBottom`]: props.hideBottomBorder || props.hideBorders,
-      [`hide-borders`]: props.hideBorders,
-      collapsed: props.collapse,
-    };
-  });
 </script>
 
 <template>
   <nav
     ref="menuRef"
     class="acv-menu"
-    :class="menuClasses"
+    :class="{
+      [`acv-menu_type_${props.type}`]: true,
+      [`acv-menu_background_${props.background}`]: props.background,
+      'acv-menu_border-bottom': props.hideBottomBorder || props.hideBorders,
+      'acv-menu_hide-borders': props.hideBorders,
+      'acv-menu_collapsed': props.collapse,
+    }"
   >
+    <!-- @slot Left side slot content. Usually for icon -->
     <slot name="prepend" />
     <menu
       ref="menuBarRef"
       class="menubar acv-scrollbar"
       role="menubar"
     >
+      <!-- @slot Default slot content. Usually for text -->
       <slot />
     </menu>
     <div
@@ -97,9 +92,10 @@
       </AcvButton>
     </div>
     <menu
-      v-if="slots.append"
+      v-if="$slots.append"
       class="append"
     >
+      <!-- @slot Right side slot content. Usually for icon -->
       <slot name="append" />
     </menu>
   </nav>
@@ -107,11 +103,18 @@
 
 <style scoped>
 .acv-menu {
+  --_acv-menu-color: var(--acv-menu-color-primary);
+  --_acv-menu-bg-color: var(--acv-color-nav-primary);
+  --_acv-menu-color-text: var(--acv-color-white);
+  --_acv-menu-gap: var(--acv-spacing-regular);
+  --_acv-menu-item-gap: var(--acv-spacing-regular);
+  --_acv-menu-item-padding-start: var(--acv-spacing-regular);
+  --_acv-menu-item-padding-end: var(--acv-spacing-regular);
   display: grid;
   width: 256px;
   flex-shrink: 0;
-  background: var(--acv-menu-bg-color);
-  color: var(--acv-color-white);
+  background: var(--_acv-menu-bg-color);
+  color: var(--_acv-menu-color);
   justify-content: start;
 
   .menubar {
@@ -135,22 +138,24 @@
     margin-top: auto;
   }
 
-  &.primary {
-    --acv-menu-item-active-bg: var(--acv-color-nav-active-primary);
-    --acv-menu-item-active-color: var(--acv-color-nav-label-primary);
-    --acv-menu-item-color: var(--acv-color-nav-label-secondary);
-    --acv-menu-item-hover-bg: var(--acv-color-nav-hover-primary);
-    --acv-menu-item-hover-color: var(--acv-color-nav-label-secondary);
-    --acv-menu-item-selected-bg: var(--acv-color-nav-active-primary);
-    --acv-menu-item-selected-color: var(--acv-color-nav-label-primary);
-    --acv-menu-item-padding-inline-start: var(--acv-menu-item-indent);
+  &.acv-menu_type_primary {
+    --_acv-menu-item-color: var(--acv-color-nav-label-secondary);
+    --_acv-menu-item-active-bg: var(--acv-color-nav-active-primary);
+    --_acv-menu-item-active-color: var(--acv-color-nav-label-primary);
+    --_acv-menu-item-hover-bg: var(--acv-color-nav-hover-primary);
+    --_acv-menu-item-hover-color: var(--acv-color-nav-label-secondary);
+    --_acv-menu-item-selected-bg: var(--acv-color-nav-active-primary);
+    --_acv-menu-item-selected-color: var(--acv-color-nav-label-primary);
+    --acv-icon-size: var(--acv-icon-size-medium);
     grid-template-columns: 256px;
     grid-template-rows: auto;
+    color: var(--acv-color-nav-label-secondary);
+    background-color: var(--_acv-menu-bg-color);
 
     &.collapsed {
       --acv-menu-item-gap: 0;
       --acv-menu-item-justify-content: center;
-      gap: 0;
+      gap: var(--_acv-menu-item-gap);
 
       &, .menubar {
         width: 64px;
@@ -163,22 +168,19 @@
     &:deep(.acv-menu-item) {
       padding-inline-start: var(--acv-menu-item-indent)
     }
-
-    &:deep(.acv-icon) {
-      --acv-icon-size: var(--acv-icon-size-medium);
-    }
   }
 
-  &.secondary {
-    --acv-menu-item-color: var(--acv-color-nav-primary);
-    --acv-menu-item-border-color: var(--acv-color-brand-primary);
-    --acv-menu-item-active-color: var(--acv-color-nav-primary);
-    --acv-menu-item-hover-bg: transparent;
-    --acv-menu-item-selected-color: var(--acv-color-nav-primary);
-    --acv-menu-item-padding-inline-start: var(--acv-spacing-zero);
-    --acv-menu-item-padding-inline-end: var(--acv-spacing-zero);
-    --acv-menu-gap: var(--acv-spacing-large);
-    --acv-menu-item-gap: var(--acv-spacing-small);
+  &.acv-menu_type_secondary {
+    --_acv-menu-item-color: var(--acv-color-black);
+    --_acv-menu-item-border-color: var(--acv-color-brand-primary);
+    --_acv-menu-item-active-color: var(--acv-color-nav-primary);
+    --_acv-menu-item-hover-bg: transparent;
+    --_acv-menu-item-hover-color: var(--acv-color-black);
+    --_acv-menu-item-selected-color: var(--acv-color-nav-primary);
+    --_acv-menu-item-padding-start: var(--acv-spacing-zero);
+    --_acv-menu-item-padding-end: var(--acv-spacing-zero);
+    --_acv-menu-gap: var(--acv-spacing-large);
+    --_acv-menu-item-gap: var(--acv-spacing-small);
     width: auto;
     height: auto;
     background-color: transparent;
@@ -189,28 +191,30 @@
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: var(--acv-menu-gap, 16px);
+      gap: var(--_acv-menu-gap);
       overflow: visible;
     }
 
     &:deep(.acv-menu-item:hover:before) {
+      --acv-menu-item-selected-bg: var(--acv-color-primary-lightest, hsl(215deg 68% 46% / 0.05));
       z-index: var(--acv-z-index-negative);
       content: '';
       width: calc(100% + 16px);
       left:-8px;
       height: 32px;
-      background-color: var(--acv-color-nav-hover-secondary, hsl(215deg 68% 46% / 0.1));
+      background-color: var(--acv-menu-item-selected-bg);
       border-radius: 4px;
       position: absolute;
     }
 
     &:deep(.acv-menu-item:active:before) {
+      --acv-menu-item-selected-bg: var(--acv-menu-item-active-color);
       z-index: var(--acv-z-index-negative);
       content: '';
       width: calc(100% + 16px);
       left:-8px;
       height: 32px;
-      background-color: var(--acv-color-nav-active-secondary, hsl(215deg 68% 46% / 0.2));
+      background-color: var(--acv-menu-item-selected-bg);
       border-radius: 4px;
       position: absolute;
     }
@@ -242,17 +246,17 @@
     }
   }
 
-  &.tertiary {
-    --acv-menu-bg-color: var(--acv-color-white);
-    --acv-menu-color-text: var(--acv-color-red);
-    --acv-menu-item-color: var(--acv-color-link-primary);
-    --acv-menu-item-selected-bg: var(--acv-color-primary-lightest, hsl(215deg 68% 46% / 0.05));
-    --acv-menu-item-selected-color: var(--acv-color-text-primary, hsl(215deg 30% 20%));
+  &.acv-menu_type_tertiary {
+    --_acv-menu-item-color: var(--acv-color-link-primary);
+    --_acv-menu-bg-color: var(--acv-color-white);
+    --_acv-menu-color-text: var(--acv-color-black);
+    --_acv-menu-item-selected-bg: var(--acv-color-primary-lightest);
+    --_acv-menu-item-selected-color: var(--acv-color-text-primary);
     grid-template-rows: auto;
     grid-template-columns: 256px;
 
     &:deep(.acv-menu-item) {
-      border-bottom: 1px solid var(--acv-color-form-disabled-primary, hsl(215deg 68% 46% / 0.1));
+      border-bottom: 1px solid var(--acv-color-form-disabled-primary);
       width: 100%;
     }
   }