diff --git a/docs/components/rating/examples/RatingCountExample.vue b/docs/components/rating/examples/RatingCountExample.vue
new file mode 100644
index 0000000..91d051e
--- /dev/null
+++ b/docs/components/rating/examples/RatingCountExample.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <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>
+  </div>
+</template>
+<script setup>
+import { Rating } from '../../../../src/index'
+</script>
diff --git a/docs/components/rating/examples/RatingExample.vue b/docs/components/rating/examples/RatingExample.vue
index 7da2976..7eab3d4 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>
+    <Rating rating=4></Rating>
   </div>
 </template>
 <script setup>
diff --git a/docs/components/rating/examples/RatingStarSizesExample.vue b/docs/components/rating/examples/RatingStarSizesExample.vue
new file mode 100644
index 0000000..1121ee7
--- /dev/null
+++ b/docs/components/rating/examples/RatingStarSizesExample.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="vp-raw flex flex-col gap-5">
+    <!-- Small -->
+    <Rating size="sm" rating=4 ></Rating>
+    <!-- Medium -->
+    <Rating size="md" rating=4></Rating>
+    <!-- Large -->
+    <Rating size="lg" rating=4></Rating>
+  </div>
+</template>
+<script setup>
+import { Rating } from '../../../../src/index'
+</script>
diff --git a/docs/components/rating/examples/RatingWithTextExample.vue b/docs/components/rating/examples/RatingWithTextExample.vue
new file mode 100644
index 0000000..3636cbe
--- /dev/null
+++ b/docs/components/rating/examples/RatingWithTextExample.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <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>
+    </Rating>
+  </div>
+</template>
+<script setup>
+import { Rating } from '../../../../src/index'
+</script>
diff --git a/docs/components/rating/rating.md b/docs/components/rating/rating.md
index 98b3a4c..12f83d4 100644
--- a/docs/components/rating/rating.md
+++ b/docs/components/rating/rating.md
@@ -1,15 +1,78 @@
 <script setup>
 import RatingExample from './examples/RatingExample.vue'
+import RatingWithTextExample from './examples/RatingWithTextExample.vue'
+import RatingCountExample from './examples/RatingCountExample.vue'
+import RatingStarSizesExample from './examples/RatingStarSizesExample.vue'
 </script>
 # Vue Rating Component - Flowbite
 
+## Default rating
+Use this simple example of a star rating component for showing review results.
 ```vue
 <script setup>
 import { Rating } from 'flowbite-vue'
 </script>
 <template>
-  <Rating></Rating>
+  <Rating rating=4></Rating>
 </template>
 ```
 
 <RatingExample />
+
+## Rating with text
+If you also want to show a text near the stars you can use this example as a reference.
+```vue
+<script setup>
+import { Rating } from 'flowbite-vue'
+</script>
+<template>
+  <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>
+    </Rating>
+</template>
+```
+
+<RatingWithTextExample />
+
+## Rating count
+Aggregate more results by using this example to show the amount of reviews and the average score.
+```vue
+<script setup>
+import { Rating } from 'flowbite-vue'
+</script>
+<template>
+  <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>
+```
+
+<RatingCountExample />
+
+## Star sizes
+Check out the different sizing options for the star review component from small, medium, and large.
+```vue
+<script setup>
+import { Rating } from 'flowbite-vue'
+</script>
+<template>
+    <!-- Small -->
+    <Rating size="sm" rating=4 ></Rating>
+    <!-- Medium -->
+    <Rating size="md" rating=4></Rating>
+    <!-- Large -->
+    <Rating size="lg" rating=4></Rating>
+</template>
+```
+
+<RatingStarSizesExample />
diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
index be45f18..c702f33 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -1,21 +1,70 @@
 <template>
   <div class="flex items-center">
-    <svg class="w-5 h-5 text-yellow-400" 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>
-    <svg class="w-5 h-5 text-yellow-400" 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>
-    <svg class="w-5 h-5 text-yellow-400" 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>
-    <svg class="w-5 h-5 text-yellow-400" 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>
-    <svg class="w-5 h-5 text-gray-300 dark:text-gray-500" 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>
+    <!-- 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>
+    
+    <!-- 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>
+    
+    <!-- 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>
+    </template>
+
   </div>
 </template>
+
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
 import type { PropType } from 'vue'
+import { useRatingClasses } from './composables/useRatingClasses'
+import type { RatingSize } from './types'
 
 const props = defineProps({
   size: {
-    type: String, // 'sm' | 'md' | 'lg'
+    type: String as PropType<RatingSize>, // 'sm' | 'md' | 'lg'
     default: 'sm',
   },
+  rating: {
+    type: Number,
+    default: 3,
+  },
+  scale: {
+    type: Number,
+    default: 5,
+  },
+  reviewText: {
+    type: String,
+    default: ""
+  },
+  reviewLink: {
+    type: String,
+    default: ""
+  }
 })
 
+const valid_star_number = computed(() => {
+  return Math.floor(props.rating)
+})
+
+const invalid_star_number = computed(() => {
+  return props.scale - valid_star_number.value
+})
+
+const { sizeClasses } = useRatingClasses(toRefs(props))
+
 </script>
diff --git a/src/components/Rating/composables/useRatingClasses.ts b/src/components/Rating/composables/useRatingClasses.ts
new file mode 100644
index 0000000..c90bd28
--- /dev/null
+++ b/src/components/Rating/composables/useRatingClasses.ts
@@ -0,0 +1,31 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import classNames from 'classnames'
+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'
+}
+
+export type UseRatingClassesProps = {
+  size: Ref<RatingSize>
+}
+
+export function useRatingClasses(props: UseRatingClassesProps):{
+  sizeClasses: Ref<string>
+}{
+  const sizeClasses = computed(() => {
+    let sizeClass = ''
+    sizeClass = ratingSizeClasses[props.size.value]
+    return classNames(
+      sizeClass
+    )
+  })
+
+
+  return {
+    sizeClasses
+  }
+}
\ No newline at end of file
diff --git a/src/components/Rating/types.ts b/src/components/Rating/types.ts
new file mode 100644
index 0000000..f6f279e
--- /dev/null
+++ b/src/components/Rating/types.ts
@@ -0,0 +1 @@
+export type RatingSize = 'sm' | 'md' | 'lg'
\ No newline at end of file