diff --git a/src/common/interfaces/common.ts b/src/common/interfaces/common.ts
index 6a854a8546c0e1db7c9e8395aa85c5a8349a5106..162338a5b57c3d7da1410be60bcf54c3b96fd6d3 100644
--- a/src/common/interfaces/common.ts
+++ b/src/common/interfaces/common.ts
@@ -25,7 +25,7 @@ export type TDarkness = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 
 export type TThemeColorNoWhite = Exclude<TThemeColor, 'white'>;
 
-export type TSize = 'small' | 'medium' | 'large' | 'huge';
+export type TSize = 'small' | 'normal' | 'large' | 'huge';
 
 export type TTextStyle = 'bold' | 'italic';
 
diff --git a/src/stories/components/Button/Button.stories.ts b/src/stories/components/Button/Button.stories.ts
index 337bc5b1959683a5f5d4316d63398cfb94b239c0..1adc7dc87b095845144817a5e239735acc1eb6f4 100644
--- a/src/stories/components/Button/Button.stories.ts
+++ b/src/stories/components/Button/Button.stories.ts
@@ -15,7 +15,7 @@ const meta: Meta = {
   },
   argTypes: {
     label: { control: 'text' },
-    size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
+    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
     textStyle: { control: 'select', options: ['bold', 'italic'] },
     iconPos: { control: 'select', options: ['left', 'top', 'right', 'bottom'] },
     width: { control: 'text' },
diff --git a/src/stories/components/Button/Button.vue b/src/stories/components/Button/Button.vue
index 45df8f532968ef355a996fd60520ba2e0b81c2e3..18a88d5ee0f88d31b75cd511bab6e475b3f088af 100644
--- a/src/stories/components/Button/Button.vue
+++ b/src/stories/components/Button/Button.vue
@@ -4,7 +4,7 @@ import type { IButtonProps } from '@interfaces/componentsProps';
 import { convertThemeToColor } from '@helpers/common';
 
 const props = withDefaults(defineProps<IButtonProps>(), {
-  size: 'medium',
+  size: 'normal',
   theme: 'white',
   textColor: 'black',
   iconPos: 'left',
diff --git a/src/stories/components/MenuDial/MenuDial.stories.ts b/src/stories/components/MenuDial/MenuDial.stories.ts
index 1fb7c18897b54f40c6f7a28eadfe68a9958371b9..85303066c79dd634fda03a79963d6f43654aadb2 100644
--- a/src/stories/components/MenuDial/MenuDial.stories.ts
+++ b/src/stories/components/MenuDial/MenuDial.stories.ts
@@ -15,7 +15,7 @@ const meta: Meta = {
   },
   argTypes: {
     items: { control: 'object' },
-    size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
+    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
     direction: { control: 'select', options: ['up', 'down', 'left', 'right'] },
     darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
     theme: {
@@ -125,6 +125,6 @@ export const Huge: Story = {
     theme: 'red',
     darknessTheme: 700,
     direction: 'right',
-    size: 'medium',
+    size: 'normal',
   },
 };
diff --git a/src/stories/components/MenuDial/MenuDial.vue b/src/stories/components/MenuDial/MenuDial.vue
index 933d5f10acd814d950c314f15f6411eaf655405b..287b4b3ce156aa2103da8248fff9c310b0d809d8 100644
--- a/src/stories/components/MenuDial/MenuDial.vue
+++ b/src/stories/components/MenuDial/MenuDial.vue
@@ -8,7 +8,7 @@ import { convertWhiteOrBlackToColor } from '@helpers/colors';
 const props = withDefaults(defineProps<IMDProps>(), {
   theme: 'white',
   darknessTheme: 500,
-  size: 'medium',
+  size: 'normal',
   direction: 'right',
 });
 const active = defineModel('active');
diff --git a/src/stories/components/SelectButton/SelectButton.stories.ts b/src/stories/components/SelectButton/SelectButton.stories.ts
index 03c49b65d7883ee633b42c030bc37a55ba4c8e3c..196bfc6d16affcca3c0486071de7d2652d7b0c94 100644
--- a/src/stories/components/SelectButton/SelectButton.stories.ts
+++ b/src/stories/components/SelectButton/SelectButton.stories.ts
@@ -17,7 +17,7 @@ const meta: Meta = {
     options: {
       control: 'object',
     },
-    size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
+    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
     rounded: { control: 'boolean' },
     darknessActiveBackgroundColor: {
       control: 'select',
diff --git a/src/stories/components/SelectButton/SelectButton.vue b/src/stories/components/SelectButton/SelectButton.vue
index 43ba74b88fcf51fd18af44e5e949d8859d088879..31e8bb7ac41fbc5002ac407049f292cd3a527f2b 100644
--- a/src/stories/components/SelectButton/SelectButton.vue
+++ b/src/stories/components/SelectButton/SelectButton.vue
@@ -4,7 +4,7 @@ import type { ISBProps } from '@interfaces/componentsProps';
 import { convertThemeToColor } from '@helpers/common';
 
 const props = withDefaults(defineProps<ISBProps>(), {
-  size: 'medium',
+  size: 'normal',
   activeBackgroundColor: 'sky',
   darknessActiveBackgroundColor: 500,
   darknessBorder: 500,
diff --git a/src/stories/components/Slider/Slider.stories.ts b/src/stories/components/Slider/Slider.stories.ts
index 98211f2625ee0e4d7cf24e51f7ca6bd07cd89363..65ae2e0c5ea755dfb8d31d9b52ee51786c944dc3 100644
--- a/src/stories/components/Slider/Slider.stories.ts
+++ b/src/stories/components/Slider/Slider.stories.ts
@@ -19,7 +19,7 @@ const meta: Meta = {
     min: { control: 'text' },
     max: { control: 'text' },
     step: { control: 'text' },
-    size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
+    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
     orientation: { control: 'select', options: ['horizontal', 'vertical'] },
     isSmooth: { control: 'boolean' },
     darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
@@ -156,7 +156,7 @@ export const Smooth: Story = {
     max: '1000',
     isSmooth: true,
     width: '300',
-    size: 'medium',
+    size: 'normal',
     backgroundColor: 'blue',
     theme: 'black',
   },
diff --git a/src/stories/components/Slider/Slider.vue b/src/stories/components/Slider/Slider.vue
index 5d57dc4665a8ce4d3d7383dde7672fac000329ac..ab11e8be2cc8a20c03a9c568ef5ab64a39601780 100644
--- a/src/stories/components/Slider/Slider.vue
+++ b/src/stories/components/Slider/Slider.vue
@@ -5,7 +5,7 @@ import { convertThemeToColor } from '@helpers/common';
 
 const props = withDefaults(defineProps<ISliderProps>(), {
   width: '100',
-  size: 'medium',
+  size: 'normal',
   theme: 'sky',
   backgroundColor: 'black',
   darknessTheme: 500,
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
index 0fe5c11ae933e77809b58d63ddd8c5708316640f..2a1652b9ac0e279803f40c26ac2eaee2c07b6529 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
@@ -15,7 +15,7 @@ const meta: Meta = {
   },
   argTypes: {
     active: { control: 'boolean' },
-    size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
+    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
     negativeTheme: {
       control: 'select',
       options: [
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.vue b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
index 7be5d7a2c590b7efa22c78de42a236fa33bd5982..b0a0ad8b46af29f017c6cb7b8eb7c4992c787d28 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.vue
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
@@ -4,7 +4,7 @@ import type { ITSProps } from '@interfaces/componentsProps';
 import { convertThemeToColor } from '@helpers/common';
 
 const props = withDefaults(defineProps<ITSProps>(), {
-  size: 'medium',
+  size: 'normal',
   theme: 'sky',
   negativeTheme: 'black',
   darknessTheme: 500,