diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 81547c6014387f22da5fb791b245e71b4870c732..8355d0ba8dbdfd37b0ca7816d7af56fc606b2b06 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -222,6 +222,7 @@ export interface IRatingProps {
   size?: TSize;
   gap?: string;
   theme?: TThemeColor;
+  offTheme?: TThemeColor;
   darknessTheme?: TDarkness;
 }
 
diff --git a/src/components/Rating/Rating.stories.ts b/src/components/Rating/Rating.stories.ts
index 320ab6793056b81b98501b4fc89ddb02f6f9814c..825fe69893d1061b7fb83c04a307779ca9659229 100644
--- a/src/components/Rating/Rating.stories.ts
+++ b/src/components/Rating/Rating.stories.ts
@@ -38,6 +38,26 @@ const meta: Meta = {
         'black',
       ],
     },
+    offTheme: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
   },
   args: {},
 } satisfies Meta<typeof Rating>;
@@ -53,6 +73,8 @@ export const Simple: Story = {
 export const Small: Story = {
   args: {
     size: 'small',
+    theme: 'yellow',
+    offTheme: 'black',
   },
 };
 
diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
index b202f461213fbf72d427c1c1af32d4d494f1c96c..453a9d288aa02074d9b91ac7dffea6350dce9747 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -16,10 +16,12 @@ const props = withDefaults(defineProps<IRatingProps>(), {
 const value = defineModel({
   default: 0,
 }) as Ref<number>;
+
 const onHoverIndex = ref();
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
-const themeColorOnHover = computed(() => convertThemeToColor(props.theme, '200'));
+const offColor = computed(() => (props.offTheme ? convertThemeToColor(props.offTheme, props.darknessTheme) : null));
+const themeColorOnHover = computed(() => convertThemeToColor(props.offTheme ?? props.theme, '200'));
 const iconSize = computed(() => {
   const size = props.size;
   if (size === 'normal') return '20px';
@@ -43,7 +45,7 @@ const onActiveClick = (index: number) => {
         <component
           class="icon absoluteIcon"
           :is="iconsSet['Star']"
-          :color="themeColor"
+          :color="offColor ?? themeColor"
           @pointerenter="onHoverIndex = index"
           @pointerleave="onHoverIndex = null"
           :size="iconSize"