diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index f6777ba..e744864 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -45,6 +45,7 @@ function getComponents() {
     { text: 'Carousel', link: 'components/carousel/carousel.md' },
     { text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
     { text: 'Progress', link: 'components/progress/progress.md' },
+    { text: 'Rating', link: 'components/rating/rating.md' },
     { text: 'Spinner', link: '/components/spinner/spinner.md' },
     { text: 'Tabs', link: '/components/tabs/tabs.md' },
     { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
@@ -55,7 +56,6 @@ function getComponents() {
 
     { text: '- Footer', link: 'components/footer/footer.md' },
     { text: '- Pagination', link: 'components/pagination/pagination.md' },
-    { text: '- Rating', link: 'components/rating/rating.md' },
     { text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
     { text: '- Table', link: 'components/table/table.md' },
     { text: '- Timeline', link: 'components/timeline/timeline.md' },
diff --git a/docs/components/rating/examples/RatingCountExample.vue b/docs/components/rating/examples/RatingCountExample.vue
index 91d051e..08cc1b9 100644
--- a/docs/components/rating/examples/RatingCountExample.vue
+++ b/docs/components/rating/examples/RatingCountExample.vue
@@ -1,15 +1,14 @@
 <template>
   <div class="vp-raw flex flex-col">
     <Rating
-    rating=1
-    scale=1
-    review-text="73 reviews"
-    review-link="#"
+      :rating="1"
+      :scale="1"
+      review-text="73 reviews"
+      review-link="#"
     >
       <template #besideText>
         <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
       </template>
-      
     </Rating>
   </div>
 </template>
diff --git a/docs/components/rating/examples/RatingExample.vue b/docs/components/rating/examples/RatingExample.vue
index 7eab3d4..cb1626d 100644
--- a/docs/components/rating/examples/RatingExample.vue
+++ b/docs/components/rating/examples/RatingExample.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Rating rating=4></Rating>
+    <Rating :rating="4" />
   </div>
 </template>
 <script setup>
diff --git a/docs/components/rating/examples/RatingStarSizesExample.vue b/docs/components/rating/examples/RatingStarSizesExample.vue
index 1121ee7..800c7e0 100644
--- a/docs/components/rating/examples/RatingStarSizesExample.vue
+++ b/docs/components/rating/examples/RatingStarSizesExample.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="vp-raw flex flex-col gap-5">
     <!-- Small -->
-    <Rating size="sm" rating=4 ></Rating>
+    <Rating size="sm" :rating="4" />
     <!-- Medium -->
-    <Rating size="md" rating=4></Rating>
+    <Rating size="md" :rating="4" />
     <!-- Large -->
-    <Rating size="lg" rating=4></Rating>
+    <Rating size="lg" :rating="4" />
   </div>
 </template>
 <script setup>
diff --git a/docs/components/rating/examples/RatingWithTextExample.vue b/docs/components/rating/examples/RatingWithTextExample.vue
index 3636cbe..aa7230c 100644
--- a/docs/components/rating/examples/RatingWithTextExample.vue
+++ b/docs/components/rating/examples/RatingWithTextExample.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Rating rating=4>
+    <Rating :rating="4">
       <template #besideText>
           <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
         </template>
diff --git a/docs/components/rating/rating.md b/docs/components/rating/rating.md
index 12f83d4..9c3136f 100644
--- a/docs/components/rating/rating.md
+++ b/docs/components/rating/rating.md
@@ -13,7 +13,7 @@ Use this simple example of a star rating component for showing review results.
 import { Rating } from 'flowbite-vue'
 </script>
 <template>
-  <Rating rating=4></Rating>
+    <Rating :rating="4" />
 </template>
 ```
 
@@ -26,7 +26,7 @@ If you also want to show a text near the stars you can use this example as a ref
 import { Rating } from 'flowbite-vue'
 </script>
 <template>
-  <Rating rating=4>
+    <Rating :rating="4">
       <template #besideText>
           <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
         </template>
@@ -43,16 +43,15 @@ Aggregate more results by using this example to show the amount of reviews and t
 import { Rating } from 'flowbite-vue'
 </script>
 <template>
-  <Rating
-    rating=1
-    scale=1
-    review-text="73 reviews"
-    review-link="#"
+    <Rating
+      :rating="1"
+      :scale="1"
+      review-text="73 reviews"
+      review-link="#"
     >
       <template #besideText>
         <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
       </template>
-      
     </Rating>
 </template>
 ```
@@ -67,11 +66,11 @@ import { Rating } from 'flowbite-vue'
 </script>
 <template>
     <!-- Small -->
-    <Rating size="sm" rating=4 ></Rating>
+    <Rating size="sm" :rating="4" />
     <!-- Medium -->
-    <Rating size="md" rating=4></Rating>
+    <Rating size="md" :rating="4" />
     <!-- Large -->
-    <Rating size="lg" rating=4></Rating>
+    <Rating size="lg" :rating="4" />
 </template>
 ```
 
diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
index c702f33..c6ece2f 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -1,30 +1,41 @@
 <template>
   <div class="flex items-center">
     <!-- valid stars -->
-    <svg v-for="valid_star_index in valid_star_number" :key="valid_star_index" 
-    class="text-yellow-400" 
-    :class="sizeClasses" 
-    fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+    <svg
+      v-for="valid_star_index in valid_star_number"
+      :key="valid_star_index"
+      class="text-yellow-400"
+      :class="sizeClasses"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
     </svg>
-    
     <!-- invalid stars -->
-    <svg v-for="invalid_star_index in invalid_star_number" :key="invalid_star_index" 
-    class="text-gray-300 dark:text-gray-500" 
-    :class="sizeClasses" 
-    fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+    <svg
+      v-for="invalid_star_index in invalid_star_number"
+      :key="invalid_star_index"
+      class="text-gray-300 dark:text-gray-500"
+      :class="sizeClasses"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
     </svg>
-    
     <!-- text -->
     <slot name="besideText"></slot>
-    
     <!-- review link -->
     <template v-if="(reviewText && reviewLink)">
       <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400"></span>
-      <a :href="reviewLink" class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white">{{ reviewText }}</a>
+      <a
+        :href="reviewLink"
+        class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"
+      >
+        {{ reviewText }}
+      </a>
     </template>
-
   </div>
 </template>
 
@@ -36,7 +47,7 @@ import type { RatingSize } from './types'
 
 const props = defineProps({
   size: {
-    type: String as PropType<RatingSize>, // 'sm' | 'md' | 'lg'
+    type: String as PropType<RatingSize>,
     default: 'sm',
   },
   rating: {
@@ -49,12 +60,12 @@ const props = defineProps({
   },
   reviewText: {
     type: String,
-    default: ""
+    default: '',
   },
   reviewLink: {
     type: String,
-    default: ""
-  }
+    default: '',
+  },
 })
 
 const valid_star_number = computed(() => {
diff --git a/src/components/Rating/composables/useRatingClasses.ts b/src/components/Rating/composables/useRatingClasses.ts
index c90bd28..c25c8f4 100644
--- a/src/components/Rating/composables/useRatingClasses.ts
+++ b/src/components/Rating/composables/useRatingClasses.ts
@@ -6,7 +6,7 @@ import type { RatingSize } from '../types'
 const ratingSizeClasses: Record<RatingSize, string> = {
   sm: 'w-5 h-5',
   md: 'w-7 h-7',
-  lg: 'w-10 h-10'
+  lg: 'w-10 h-10',
 }
 
 export type UseRatingClassesProps = {
@@ -17,15 +17,12 @@ export function useRatingClasses(props: UseRatingClassesProps):{
   sizeClasses: Ref<string>
 }{
   const sizeClasses = computed(() => {
-    let sizeClass = ''
-    sizeClass = ratingSizeClasses[props.size.value]
     return classNames(
-      sizeClass
+        ratingSizeClasses[props.size.value] ?? '',
     )
   })
 
-
   return {
-    sizeClasses
+    sizeClasses,
   }
-}
\ No newline at end of file
+}