diff --git a/src/components/sections/landing/HeroSection.astro b/src/components/sections/landing/HeroSection.astro
index b5b1978..61b4e25 100644
--- a/src/components/sections/landing/HeroSection.astro
+++ b/src/components/sections/landing/HeroSection.astro
@@ -4,9 +4,7 @@ import { Image } from "astro:assets";
 import heroImage from "../../../images/hero-image.avif";
 import PrimaryCTA from "../../ui/buttons/PrimaryCTA.astro";
 import SecondaryCTA from "../../ui/buttons/SecondaryCTA.astro";
-import Avatar from "../../ui/avatars/Avatar.astro";
-import FullStar from "../../ui/stars/FullStar.astro";
-import HalfStar from "../../ui/stars/HalfStar.astro";
+import ReviewComponent from "../../ui/blocks/ReviewComponent.astro";
 
 // Define props from Astro
 const {
@@ -18,7 +16,7 @@ const {
   secondaryBtnURL,
   withReview,
   avatars,
-  starCount = 0,
+  starCount,
   rating,
   reviews
 } = Astro.props;
@@ -71,52 +69,10 @@ interface Props {
 
     <!-- Review Section: This section presents avatars, review ratings and the number of reviews -->
     { withReview ? (
-    <div class="mt-6 lg:mt-10">
-      <div class="py-5">
-        <div class="text-center sm:flex sm:items-center sm:text-start">
-          <div class="flex-shrink-0 pb-5 sm:flex sm:pb-0 sm:pe-5">
-            <!-- Avatar Group -->
-            <div class="flex justify-center -space-x-3">
-              { avatars?.map(src => <Avatar src={src} alt="Avatar Description" />) }
-              <span
-                class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-zinc-800 ring-2 ring-white dark:bg-zinc-900 dark:ring-zinc-800"
-              >
-                <span
-                  class="text-xs font-medium uppercase leading-none text-white"
-                  >7k+</span>
-              </span>
-            </div>
-          </div>
-          <div
-            class="mx-auto h-px w-32 border-t border-neutral-400 dark:border-neutral-500 sm:mx-0 sm:h-8 sm:w-auto sm:border-s sm:border-t-0"
-          >
-          </div>
-          <!-- Review Ratings --> 
-          <div class="flex flex-col items-center sm:items-start">
-            <div class="flex items-baseline space-x-1 pt-5 sm:ps-5 sm:pt-0">
-              <div class="flex space-x-1">
-                <!-- Your star ratings -->
-                {
-                    Array(starCount).fill(0).map((_, i) => <FullStar key={i} />)
-                }
-                <!-- Adding additional half-star -->
-                <HalfStar />
-              </div>
-              <p class="text-neutral-800 dark:text-neutral-200">
-                <Fragment set:html={rating} />
-              </p>
-            </div>
-            <div class="text-sm text-neutral-800 dark:text-neutral-200 sm:ps-5">
-              <p>
-                <Fragment set:html={reviews} />
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div> ) : "" }
-  </div>
+    <ReviewComponent avatars={avatars} starCount={starCount} rating={rating} reviews={reviews} />
+    ) : "" }
 
+  </div>
   <!-- Hero Image Section -->
   <div class="flex w-full">
     <div class="top-12 overflow-hidden">
diff --git a/src/components/ui/blocks/ReviewComponent.astro b/src/components/ui/blocks/ReviewComponent.astro
new file mode 100644
index 0000000..0791cf8
--- /dev/null
+++ b/src/components/ui/blocks/ReviewComponent.astro
@@ -0,0 +1,61 @@
+---
+import Avatar from "../../ui/avatars/Avatar.astro";
+import FullStar from "../../ui/stars/FullStar.astro";
+import HalfStar from "../../ui/stars/HalfStar.astro";
+
+const { avatars, starCount = 0, rating, reviews } = Astro.props;
+
+interface Props {
+  avatars?: Array<string>;
+  starCount?: number;
+  rating?: string;
+  reviews?: string;
+}
+---
+
+<div class="mt-6 lg:mt-10">
+  <div class="py-5">
+    <div class="text-center sm:flex sm:items-center sm:text-start">
+      <div class="flex-shrink-0 pb-5 sm:flex sm:pb-0 sm:pe-5">
+        <!-- Avatar Group -->
+        <div class="flex justify-center -space-x-3">
+          {avatars?.map((src) => <Avatar src={src} alt="Avatar Description" />)}
+          <span
+            class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-zinc-800 ring-2 ring-white dark:bg-zinc-900 dark:ring-zinc-800"
+          >
+            <span class="text-xs font-medium uppercase leading-none text-white"
+              >7k+</span
+            >
+          </span>
+        </div>
+      </div>
+      <div
+        class="mx-auto h-px w-32 border-t border-neutral-400 dark:border-neutral-500 sm:mx-0 sm:h-8 sm:w-auto sm:border-s sm:border-t-0"
+      >
+      </div>
+      <!-- Review Ratings -->
+      <div class="flex flex-col items-center sm:items-start">
+        <div class="flex items-baseline space-x-1 pt-5 sm:ps-5 sm:pt-0">
+          <div class="flex space-x-1">
+            <!-- Your star ratings -->
+            {
+              Array(starCount)
+                .fill(0)
+                .map((_, i) => <FullStar key={i} />)
+            }
+            <!-- Adding additional half-star -->
+            <HalfStar />
+          </div>
+          <p class="text-neutral-800 dark:text-neutral-200">
+            <Fragment set:html={rating} />
+          </p>
+        </div>
+        <div class="text-sm text-neutral-800 dark:text-neutral-200 sm:ps-5">
+          <p>
+            <Fragment set:html={reviews} />
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>