diff --git a/src/App.vue b/src/App.vue
index e48e3c752edab69ba8a30efca5a41a107111b169..6b6fa05bbb7ef90665dbbf0c194d59d910e29828 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -109,6 +109,7 @@ import ArrowsVerticalIcon from '@stories/icons/Mono/ArrowsVerticalIcon.vue';
 import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
 import Playground from '@/Playground.vue';
 import ArrowShortDownIcon from '@stories/icons/Mono/ArrowShortDownIcon.vue';
+import StarIcon from '@stories/icons/Mono/StarIcon.vue';
 
 const gentleIcons = {
   Age18Icon,
@@ -212,6 +213,7 @@ const gentleIcons = {
   SaveIcon,
   SearchIcon,
   SettingsIcon,
+  StarIcon,
   SortDownIcon,
   SortHorizontalIcon,
   SortUpIcon,
diff --git a/src/Playground.vue b/src/Playground.vue
index 70a79cdc6e5fa13381e18f309a8af151d4f3e8bf..64a17e42e71b1c1757ef028128f1079829a6cb2b 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -216,7 +216,7 @@ const knob = ref(0);
     show-all-lines
     :columns="tableColumns"
     darknessTextColor="500"
-    :data="tableData"
+    v-model="tableData"
     fontSize="36px"
     theme="black"
     stripedRows
@@ -225,7 +225,7 @@ const knob = ref(0);
     show-all-lines
     :columns="tableColumns"
     darknessTextColor="500"
-    :data="tableData"
+    v-model="tableData"
     fontSize="20px"
     theme="black"
     stripedRows
diff --git a/src/common/constants/icons.ts b/src/common/constants/icons.ts
index 41c5605d90d6a8359dfb517fbc6148dfe8b8a3e4..1b4478448997e6b715fb4bcf395fa61c9a3ec694 100644
--- a/src/common/constants/icons.ts
+++ b/src/common/constants/icons.ts
@@ -109,6 +109,7 @@ import SortUpIcon from '@stories/icons/Mono/SortUpIcon.vue';
 import SortVerticalIcon from '@stories/icons/Mono/SortVerticalIcon.vue';
 import ArrowShortDownIcon from '@stories/icons/Mono/ArrowShortDownIcon.vue';
 import SearchIcon from '@stories/icons/Mono/SearchIcon.vue';
+import StarIcon from '@stories/icons/Mono/StarIcon.vue';
 
 export const iconsSet: Record<string, Component> = {
   Age18: Age18Icon,
@@ -210,12 +211,13 @@ export const iconsSet: Record<string, Component> = {
   Plus: PlusIcon,
   Pointer: PointerIcon,
   Save: SaveIcon,
-  SearchIcon,
+  Search: SearchIcon,
   Settings: SettingsIcon,
-  SortDownIcon,
-  SortHorizontalIcon,
-  SortUpIcon,
-  SortVerticalIcon,
+  Star: StarIcon,
+  SortDown: SortDownIcon,
+  SortHorizontal: SortHorizontalIcon,
+  SortUp: SortUpIcon,
+  SortVertical: SortVerticalIcon,
   Table: TableIcon,
   Trash: TrashIcon,
   Triangle: TriangleIcon,
diff --git a/src/common/interfaces/common.ts b/src/common/interfaces/common.ts
index cb8b4722869060f1ece1258a6894e4e4e50be7a2..cd3723629357a19406b4cae9cd1a10817bd35dc4 100644
--- a/src/common/interfaces/common.ts
+++ b/src/common/interfaces/common.ts
@@ -1,6 +1,6 @@
 import type { iconsSet } from '@/common/constants/icons';
 
-export type TIcons = keyof typeof iconsSet;
+export type TIcon = keyof typeof iconsSet;
 
 export type TThemeColor =
   | 'white'
diff --git a/src/common/interfaces/componentsProp.ts b/src/common/interfaces/componentsProp.ts
index 3b7b90a1a0febd3d52de2597fcfcc7acadd0935d..0b549ea70b274680b69feb16707b92d7e3183a46 100644
--- a/src/common/interfaces/componentsProp.ts
+++ b/src/common/interfaces/componentsProp.ts
@@ -1,4 +1,4 @@
-import type { TDarkness, TIcons, TPosition, TTextStyle, TThemeColor } from '@interfaces/common';
+import type { TDarkness, TIcon, TPosition, TTextStyle, TThemeColor } from '@interfaces/common';
 
 export interface ITableColumn {
   name: string;
@@ -34,8 +34,8 @@ export interface ITreeItem {
   color?: TThemeColor;
   textStyle?: TTextStyle;
   isTriangleToColor?: boolean;
-  iconBefore?: TIcons;
-  iconAfter?: TIcons;
+  iconBefore?: TIcon;
+  iconAfter?: TIcon;
   iconColor?: TThemeColor;
   children?: ITreeItem[];
   darknessColor?: TDarkness;
@@ -66,8 +66,8 @@ export interface ISelectOption {
   value: string;
   label?: string;
   group?: string;
-  iconLeft?: TIcons;
-  iconRight?: TIcons;
+  iconLeft?: TIcon;
+  iconRight?: TIcon;
   iconLeftColor?: TThemeColor;
   iconRightColor?: TThemeColor;
   color?: TThemeColor;
@@ -81,8 +81,8 @@ export interface ISelectGroup {
   nameColor?: TThemeColor;
   background?: TThemeColor;
   items?: ISelectOption[];
-  iconLeft?: TIcons;
-  iconRight?: TIcons;
+  iconLeft?: TIcon;
+  iconRight?: TIcon;
   iconLeftColor?: TThemeColor;
   iconRightColor?: TThemeColor;
 }
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index aa35d26ba6f1de39a9ee239ac87f6595e00dca33..026ef573bc36712d335b93754ad51c0cc0006e8b 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -3,7 +3,7 @@ import type {
   TDarkness,
   TDirection,
   TExpandedPosition,
-  TIcons,
+  TIcon,
   TPosition,
   TSize,
   TTextStyle,
@@ -115,7 +115,7 @@ export interface IDrawerProps {
   darknessTextColor?: TDarkness;
   modal?: boolean;
   dismissible?: boolean;
-  closeIcon?: TIcons;
+  closeIcon?: TIcon;
   headerDivider?: boolean;
   footerDivider?: boolean;
 }
@@ -129,7 +129,7 @@ export interface IModalProps {
   height?: string;
   position?: TExpandedPosition;
   dismissible?: boolean;
-  closeIcon?: TIcons;
+  closeIcon?: TIcon;
   headerDivider?: boolean;
 }
 
@@ -152,7 +152,7 @@ export interface ISelectProps {
   groups?: ISelectGroup[];
   width?: string;
   placeholder?: string;
-  openIcon?: TIcons;
+  openIcon?: TIcon;
   size?: TSize;
   name?: string;
   theme?: TThemeColor;
@@ -195,6 +195,7 @@ export interface IButtonProps {
 
 export interface IRatingProps {
   count?: number;
+  icon?: TIcon;
   theme?: TThemeColor;
   darknessTheme?: TDarkness;
 }
@@ -212,8 +213,8 @@ export interface ITagProps {
   value?: string;
   size?: TSize;
   rounded?: boolean;
-  iconLeft?: TIcons;
-  iconRight?: TIcons;
+  iconLeft?: TIcon;
+  iconRight?: TIcon;
   theme?: TThemeColor;
   background?: TThemeColor;
   border?: TThemeColor;
diff --git a/src/stories/components/Rating/Rating.stories.ts b/src/stories/components/Rating/Rating.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2efc991b7faaafa536d83d445509e21e2f4d91cc
--- /dev/null
+++ b/src/stories/components/Rating/Rating.stories.ts
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Rating from './Rating.vue';
+
+const meta: Meta = {
+  title: 'Components/Rating',
+  component: Rating,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that is used as a rating.',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: 'text' },
+    padding: { control: 'text' },
+    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' },
+    darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+    darknessTextColor: {
+      control: 'select',
+      options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+    },
+    theme: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
+    textColor: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
+  },
+  args: {},
+} satisfies Meta<typeof Rating>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {},
+};
diff --git a/src/stories/components/Rating/Rating.vue b/src/stories/components/Rating/Rating.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a97b83053cde778e2bcc6fe95dd23de13d826936
--- /dev/null
+++ b/src/stories/components/Rating/Rating.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { IRatingProps } from '@interfaces/componentsProps';
+import { ref } from 'vue';
+import { iconsSet } from '@/common/constants/icons';
+
+const props = withDefaults(defineProps<IRatingProps>(), {
+  count: 5,
+});
+
+const value = defineModel();
+const onHoverIndex = ref();
+
+// const textColor = computed(() => {});
+</script>
+
+<template>
+  {{ value }}
+  <ul class="list">
+    <li v-for="index of Array(count).keys()" :key="index" class="item">
+      <component
+        class="icon"
+        :is="iconsSet[icon ?? 'Star']"
+        color="black"
+        @pointerenter="onHoverIndex = index"
+        @pointerleave="onHoverIndex = null"
+      />
+      <Transition>
+        <component
+          class="hoverIcon"
+          v-show="onHoverIndex === index"
+          :is="iconsSet[icon ?? 'Star']"
+          color="gray"
+          @pointerenter="onHoverIndex = index"
+          @pointerleave="onHoverIndex = null"
+          @click="value = index + 1"
+      /></Transition>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.list {
+  display: flex;
+}
+.item {
+  position: relative;
+  cursor: pointer;
+  transition: all 1s ease-in-out;
+}
+.icon {
+  opacity: 1;
+  transition: opacity 0.15s ease-in-out;
+  :hover {
+    opacity: 0;
+  }
+}
+.hoverIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/stories/components/SelectButton/SelectButton.vue b/src/stories/components/SelectButton/SelectButton.vue
index 3d491f3e81abe5a2c7f3ac37fb34ab865bb206d9..1d1f1b61977cc4073ec1c9a5a8498ef83dbab81c 100644
--- a/src/stories/components/SelectButton/SelectButton.vue
+++ b/src/stories/components/SelectButton/SelectButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, type Ref } from 'vue';
 import type { ISBProps } from '@interfaces/componentsProps';
 import { convertThemeToSecondaryColor, convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
 import type { ISBOption } from '@interfaces/componentsProp';
@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<ISBProps>(), {
   darknessActiveBackgroundColor: '500',
 });
 const emit = defineEmits(['onClick']);
-const value = defineModel<never>();
+const value = defineModel() as Ref<string | number | boolean | never>;
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const color = computed(() =>
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.vue b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
index 03cb15a86f13115fb8e00fe1d0bafff84670ea2c..472ff20a92d9373a8f3e5fcdc126abc3794eef96 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.vue
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, type Ref } from 'vue';
 import type { ITSProps } from '@interfaces/componentsProps';
 import { convertThemeToColor } from '@helpers/common';
 
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<ITSProps>(), {
   darknessTheme: '500',
   darknessNegativeTheme: '500',
 });
-const active = defineModel<boolean>();
+const active = defineModel() as Ref<boolean>;
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const inactiveColor = computed(() => convertThemeToColor(props.negativeTheme, props.darknessNegativeTheme));
diff --git a/src/stories/icons/Mono/StarIcon.vue b/src/stories/icons/Mono/StarIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d6a078c4642626363281cd0b0fae8c26a9c56bb
--- /dev/null
+++ b/src/stories/icons/Mono/StarIcon.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg :width="size ?? '40px'" :height="size ?? '40px'" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.1507 2.3649C10.8306 0.713558 13.1694 0.713567 13.8494 2.3649L16.1856 8.0386L21.4255 8.34683C23.2632 8.45493 23.9912 10.7786 22.5437 11.916L18.1816 15.3433L19.9202 20.2694C20.5648 22.0955 18.497 23.6802 16.9012 22.5831L12 19.2135L7.09881 22.5831C5.50303 23.6802 3.43525 22.0955 4.07977 20.2694L5.81838 15.3433L1.45635 11.916C0.0087955 10.7787 0.736801 8.45493 2.57454 8.34683L7.81442 8.0386L10.1507 2.3649ZM12 3.1264L9.18559 9.9614L2.69199 10.3434L8.18164 14.6567L5.96575 20.935L12 16.7865L18.0343 20.935L15.8184 14.6567L21.308 10.3434L14.8144 9.9614L12 3.1264Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>