diff --git a/app/lib/judgeme.ts b/app/lib/judgeme.ts
index ecddf938..87721e3a 100644
--- a/app/lib/judgeme.ts
+++ b/app/lib/judgeme.ts
@@ -30,7 +30,9 @@ type JudgemeReviewType = {
   }[];
 };
 
-type JudgemeReviewsData = {
+export type JudgemeReviewsData = {
+  rating: number;
+  reviewNumber: number;
   reviews: JudgemeReviewType[];
 };
 
diff --git a/app/sections/judgeme-reviews/review-form.tsx b/app/sections/judgeme-reviews/review-form.tsx
index a904dc50..e1df6367 100644
--- a/app/sections/judgeme-reviews/review-form.tsx
+++ b/app/sections/judgeme-reviews/review-form.tsx
@@ -1,12 +1,18 @@
 import { useFetcher, useLoaderData } from "@remix-run/react";
+import clsx from "clsx";
 import { FormEvent, useEffect, useRef, useState } from "react";
 import Button from "~/components/button";
 import { IconStar, IconStarFilled } from "~/components/icons";
+import { JudgemeReviewsData } from "~/lib/judgeme";
 import { StarRating } from "~/modules/star-rating";
 import { ProductLoaderType } from "~/routes/($locale).products.$productHandle";
 
-export function ReviewForm() {
-  const { product, judgemeReviews } = useLoaderData<ProductLoaderType>();
+export function ReviewForm({
+  judgemeReviews,
+}: {
+  judgemeReviews: JudgemeReviewsData;
+}) {
+  const { product } = useLoaderData<ProductLoaderType>();
   const [rating, setRating] = useState(0);
   const [hover, setHover] = useState(0);
   const [isFormVisible, setIsFormVisible] = useState(false);
@@ -39,150 +45,208 @@ export function ReviewForm() {
   };
 
   return (
-    <div className="lg:w-1/3 md:w-2/5 w-full flex flex-col gap-5">
-      <div className="flex flex-col items-start gap-4 bg-line/30 p-6">
-        <p className="uppercase font-bold text-lg mb-1.5">
-          product reviews ({judgemeReviews.reviewNumber})
-        </p>
-        <div className="flex justify-start items-center gap-3">
-          <h4 className="font-medium">{judgemeReviews.rating.toFixed(1)}</h4>
-          <StarRating rating={judgemeReviews.rating} />
-        </div>
-        <Button
-          onClick={() => setIsFormVisible(true)} // Show form
-          disabled={isFormVisible || isPopupVisible}
-          variant={"outline"}
+    <div
+      className={clsx(
+        "w-full flex flex-col gap-5",
+        judgemeReviews.reviews.length !== 0 && "lg:w-1/3 md:w-2/5"
+      )}
+    >
+      {judgemeReviews.reviews.length !== 0 || !isFormVisible ? (
+        <div
+          className={clsx(
+            "flex flex-col gap-4 bg-line/30 p-6",
+            judgemeReviews.reviews.length === 0 ? "items-center" : "items-start"
+          )}
         >
-          WRITE A REVIEW
-        </Button>
-      </div>
-      {isFormVisible && (
-        <div className="bg-line/30 p-6 flex flex-col gap-4">
-          <div className="flex flex-col gap-3">
-            <span className="text-base font-bold">Rating</span>
-            <div className="flex items-center">
-              {[...Array(5)].map((_, index) => {
-                const ratingValue = index + 1;
-                return (
-                  <div
-                    key={index}
-                    onClick={() => handleRatingClick(ratingValue)}
-                    onMouseEnter={() => setHover(ratingValue)}
-                    onMouseLeave={() => setHover(0)}
-                    aria-label={`Rate ${ratingValue} out of 5 stars`}
-                    role="button"
-                  >
-                    {ratingValue <= (hover || rating) ? (
-                      <IconStarFilled />
-                    ) : (
-                      <IconStar />
-                    )}
-                  </div>
-                );
-              })}
-              <span className="text-gray-600 ml-3">{rating} out of 5</span>
-            </div>
+          <p className="uppercase font-bold text-lg mb-1.5">
+            product reviews ({judgemeReviews.reviewNumber})
+          </p>
+          <div className="flex justify-start items-center gap-3">
+            {judgemeReviews && judgemeReviews.rating ? (
+              <>
+                <h4 className="font-medium">
+                  {judgemeReviews.rating.toFixed(1)}
+                </h4>
+                <div className="flex gap-0.5">
+                  <StarRating rating={judgemeReviews.rating} />
+                </div>
+              </>
+            ) : (
+              <p>
+                We'd love to hear from you. Provide a review for this product.
+              </p>
+            )}
           </div>
-          {/* Review Form */}
-          <fetcher.Form
-            onSubmit={handleSubmit}
-            ref={formRef}
-            method="POST"
-            encType="multipart/form-data"
+          <Button
+            onClick={() => setIsFormVisible(true)} // Show form
+            disabled={isFormVisible || isPopupVisible}
+            variant={"outline"}
           >
-            <input type="hidden" name="rating" value={rating} />
-            <input type="hidden" name="id" value={internalId} />
-            <div className="mb-4">
-              <label
-                htmlFor="name"
-                className="block text-gray-700 font-bold mb-2"
-              >
-                Your name
-              </label>
-              <input
-                required
-                type="text"
-                id="name"
-                name="name"
-                className="w-full border px-3 py-3 border-line/30 outline-none focus-visible:border-line"
-              />
-            </div>
-            <div className="mb-4">
-              <label
-                htmlFor="email"
-                className="block text-gray-700 font-bold mb-2"
-              >
-                Your email
-              </label>
-              <input
-                type="email"
-                id="email"
-                name="email"
-                required
-                className="w-full border px-3 py-3 border-line/30 outline-none focus-visible:border-line"
-              />
-            </div>
-            <div className="mb-4">
-              <label
-                htmlFor="title"
-                className="block text-gray-700 font-bold mb-2"
-              >
-                Review title
-              </label>
-              <input
-                type="text"
-                id="title"
-                name="title"
-                required
-                className="w-full border px-3 py-3 border-line/30 outline-none focus-visible:border-line"
-              />
-            </div>
-            <div className="mb-4">
-              <label
-                htmlFor="body"
-                className="block text-gray-700 font-bold mb-2"
-              >
-                Your review
-              </label>
-              <textarea
-                id="body"
-                name="body"
-                className="w-full border px-3 py-3 border-line/30 outline-none focus-visible:border-line"
-                rows={4}
-              ></textarea>
-            </div>
-            {message && (
-              <div className="bg-red-100 border-l-4 border-red-500 text-red-700 py-1 px-2 mb-6 flex gap-1 w-fit">
-                <p className="font-semibold">ERROR:</p>
-                <p>{message}</p>
-              </div>
+            WRITE A REVIEW
+          </Button>
+        </div>
+      ) : null}
+      {isFormVisible && (
+        <div
+          className={clsx(
+            "bg-line/30 p-6 w-full",
+            judgemeReviews.reviews.length === 0 && "flex justify-center"
+          )}
+        >
+          <div
+            className={clsx(
+              "w-full flex flex-col gap-4",
+              judgemeReviews.reviews.length === 0 && "lg:w-1/3 md:w-2/5"
             )}
-            <div className="flex gap-3 justify-end">
-              <Button
-                onClick={() => setIsFormVisible(false)}
-                variant={"outline"}
-                className="!border-none bg-background"
-              >
-                Close
-              </Button>
-              <Button
-                type="submit"
-                loading={fetcher.state === "submitting"}
-                disabled={!submitable}
+          >
+            <div className="flex flex-col gap-6">
+              <span
+                className={clsx(
+                  "font-heading font-semibold text-xl uppercase",
+                  judgemeReviews.reviews.length === 0 && "text-center"
+                )}
               >
-                Submit Review
-              </Button>
+                WRITE YOUR REVIEW
+              </span>
+              <div className="flex flex-col gap-3">
+                <span className="text-base font-bold">Rating</span>
+                <div className="flex items-center pr-1">
+                  {[...Array(5)].map((_, index) => {
+                    const ratingValue = index + 1;
+                    return (
+                      <div
+                        key={index}
+                        onClick={() => handleRatingClick(ratingValue)}
+                        onMouseEnter={() => setHover(ratingValue)}
+                        onMouseLeave={() => setHover(0)}
+                        aria-label={`Rate ${ratingValue} out of 5 stars`}
+                        role="button"
+                      >
+                        {ratingValue <= (hover || rating) ? (
+                          <IconStarFilled />
+                        ) : (
+                          <IconStar />
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
             </div>
-          </fetcher.Form>
+            {/* Review Form */}
+            <fetcher.Form
+              onSubmit={handleSubmit}
+              ref={formRef}
+              method="POST"
+              encType="multipart/form-data"
+            >
+              <input type="hidden" name="rating" value={rating} />
+              <input type="hidden" name="id" value={internalId} />
+              <div className="mb-4">
+                <label
+                  htmlFor="name"
+                  className="block text-gray-700 font-bold mb-2"
+                >
+                  Your name
+                </label>
+                <input
+                  required
+                  type="text"
+                  id="name"
+                  name="name"
+                  className="w-full border px-3 py-3 border-line outline-none focus-visible:border-line"
+                />
+              </div>
+              <div className="mb-4">
+                <label
+                  htmlFor="email"
+                  className="block text-gray-700 font-bold mb-2"
+                >
+                  Your email
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  required
+                  className="w-full border px-3 py-3 border-line outline-none focus-visible:border-line"
+                />
+              </div>
+              <div className="mb-4">
+                <label
+                  htmlFor="title"
+                  className="block text-gray-700 font-bold mb-2"
+                >
+                  Review title
+                </label>
+                <input
+                  type="text"
+                  id="title"
+                  name="title"
+                  required
+                  className="w-full border px-3 py-3 border-line outline-none focus-visible:border-line"
+                />
+              </div>
+              <div className="mb-4">
+                <label
+                  htmlFor="body"
+                  className="block text-gray-700 font-bold mb-2"
+                >
+                  Your review
+                </label>
+                <textarea
+                  id="body"
+                  name="body"
+                  className="w-full border px-3 py-3 border-line outline-none focus-visible:border-line"
+                  rows={4}
+                ></textarea>
+              </div>
+              {message && (
+                <div className="bg-red-100 border-l-4 border-red-500 text-red-700 py-1 px-2 mb-6 flex gap-1 w-fit">
+                  <p className="font-semibold">ERROR:</p>
+                  <p>{message}</p>
+                </div>
+              )}
+              <div className="flex gap-3 justify-end">
+                <Button
+                  onClick={() => setIsFormVisible(false)}
+                  variant={"outline"}
+                  className="!border-none bg-background"
+                >
+                  Close
+                </Button>
+                <Button
+                  type="submit"
+                  loading={fetcher.state === "submitting"}
+                  disabled={!submitable}
+                >
+                  Submit Review
+                </Button>
+              </div>
+            </fetcher.Form>
+          </div>
         </div>
       )}
       {isPopupVisible && (
-        <div className="flex flex-col gap-6 p-6 bg-line/30" role="alert">
+        <div
+          className={clsx(
+            "flex flex-col gap-6 p-6 bg-line/30",
+            judgemeReviews.reviews.length === 0 && "items-center"
+          )}
+          role="alert"
+        >
           <p className="font-bold leading-normal text-lg">REVIEW SUBMITTED</p>
           <p className="font-normal leading-normal text-base">
             Thanks for leaving your review!
           </p>
-          <div className="flex justify-end items-center">
+          <div
+            className={clsx(
+              "flex items-center",
+              judgemeReviews.reviews.length === 0
+                ? "justify-center"
+                : "justify-end"
+            )}
+          >
             <Button
               onClick={() => {
                 setIsPopupVisible(false);
diff --git a/app/sections/judgeme-reviews/review-index.tsx b/app/sections/judgeme-reviews/review-index.tsx
index 18160fdf..9db7e78e 100644
--- a/app/sections/judgeme-reviews/review-index.tsx
+++ b/app/sections/judgeme-reviews/review-index.tsx
@@ -2,15 +2,19 @@ import { HydrogenComponentSchema } from "@weaverse/hydrogen";
 import { forwardRef } from "react";
 import ReviewForm from "./review-form";
 import { ReviewList } from "./review-list";
+import { useLoaderData } from "@remix-run/react";
+import { ProductLoaderType } from "~/routes/($locale).products.$productHandle";
 
 type ReviewIndexProps = {};
 const ReviewIndex = forwardRef<HTMLDivElement, ReviewIndexProps>((props, ref) => {
   let { ...rest } = props;
-  
+  const { judgemeReviews } = useLoaderData<ProductLoaderType>();
   return (
     <div ref={ref} {...rest} className="flex flex-col md:flex-row md:gap-10 gap-5">
-      <ReviewForm/>
-      <ReviewList/>
+      <ReviewForm judgemeReviews={judgemeReviews}/>
+      {judgemeReviews.reviews.length > 0 && (
+        <ReviewList judgemeReviews={judgemeReviews}/>
+      )}
     </div>
   );
 });
diff --git a/app/sections/judgeme-reviews/review-list.tsx b/app/sections/judgeme-reviews/review-list.tsx
index ceef026c..8e6efd1a 100644
--- a/app/sections/judgeme-reviews/review-list.tsx
+++ b/app/sections/judgeme-reviews/review-list.tsx
@@ -1,12 +1,11 @@
-import { useLoaderData } from "@remix-run/react";
 import { useState } from "react";
+import { JudgemeReviewsData } from "~/lib/judgeme";
 import { StarRating } from "~/modules/star-rating";
-import { ProductLoaderType } from "~/routes/($locale).products.$productHandle";
 
 const reviewPerPage = 5;
 
-export function ReviewList() {
-  const { judgemeReviews } = useLoaderData<ProductLoaderType>();
+export function ReviewList({judgemeReviews}: {judgemeReviews: JudgemeReviewsData}) {
+  
   const pageNumber = Math.ceil(judgemeReviews.reviews.length / reviewPerPage);
   const [page, setPage] = useState(0);
 
@@ -19,19 +18,6 @@ export function ReviewList() {
     return date.toLocaleDateString("en-GB");
   };
 
-  if (judgemeReviews.reviews.length === 0) {
-    return (
-      <div className="md:w-2/3 w-full py-6 flex flex-col gap-6">
-        <div className="flex flex-col gap-6">
-          <span className="font-bold text-lg uppercase">
-            Reviews (0)
-          </span>
-          <div>There are no reviews for this product yet</div>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="lg:w-2/3 md:w-3/5 w-full py-6 flex flex-col gap-6">
       {/* User Reviews */}
@@ -43,11 +29,8 @@ export function ReviewList() {
           <>
             <div key={index} className="flex gap-4 flex-col md:flex-row">
               <div className="flex flex-col gap-4 md:w-1/4 w-full">
-                <div className="flex items-center">
+                <div className="flex items-center gap-0.5">
                   <StarRating rating={review.rating} />
-                  <span className="ml-1 text-sm text-gray-600">
-                    {review.rating.toFixed(1)}
-                  </span>
                 </div>
                 <div className="flex flex-col">
                   <p className="font-semibold">{review.reviewer.name}</p>