diff --git a/AGENTS.md b/AGENTS.md
index a46c3a5f76..bbc4f02e48 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -13,8 +13,16 @@ This is an Nx monorepo for an e-commerce platform built with Medusa.js. The proj
   - `medusa-be`: Medusa.js v2 backend
   - `medusa-demo`: Next.js demo frontend (reference implementation)
   - `medusa-fe`: Next.js frontend (reference implementation)
+  - `herbatika`: Next.js 16 storefront app
 - **libs/**: Shared libraries
   - `ui`: Component library built with Zag.js and Tailwind CSS
+  - `storefront-data`: TanStack Query + Medusa storefront data layer
+
+### Subtree Guidance
+- When touching `apps/herbatika`, read `apps/herbatika/AGENTS.md` before editing.
+  It overrides the root frontend-demo server assumption with Herbatika's
+  `http://localhost:3001` runtime and routes work through the `libs/ui/skills`
+  and `libs/storefront-data/skills` workflows.
 
 ### Key Technologies
 - **Monorepo**: Nx
@@ -83,6 +91,7 @@ This project includes MCP (Model Context Protocol) servers configuration to enha
 ### Important: Development Server Assumptions
 **NEVER ask to run `pnpm dev` or check if the dev server is running!**
 - Always assume the development server is already running on http://localhost:3000 (for frontend-demo)
+- Exception: `apps/herbatika` uses `http://localhost:3001`; follow `apps/herbatika/AGENTS.md` for Herbatika work.
 - This saves time and avoids unnecessary communication
 - If you need to interact with the running application, use MCP tools (especially puppeteer-mcp)
 
diff --git a/apps/herbatika/AGENTS.md b/apps/herbatika/AGENTS.md
index 61aa8fc44a..255c7a3e51 100644
--- a/apps/herbatika/AGENTS.md
+++ b/apps/herbatika/AGENTS.md
@@ -1,31 +1,55 @@
-# Repository Guidelines
+# Herbatika App Guidelines
 
 ## Scope & Precedence
 - This file applies to `apps/herbatika`.
-- In this monorepo, the closest `AGENTS.md` wins (app/lib-level rules override broader ones).
-- If work touches `libs/ui` or `libs/storefront-data`, follow their local `AGENTS.md` as source of truth.
+- Root `AGENTS.md` still applies unless this file overrides it.
+- If work starts from the repo root and touches Herbatika, read this file before editing `apps/herbatika`.
+- If work touches `libs/ui` or `libs/storefront-data`, follow their local `AGENTS.md` as the source of truth for library code.
+- Keep app-specific behavior in this app; promote behavior into a library only when the shared package has a real API/platform gap.
 
 ## Project Context
 - Stack: Next.js 16 e-shop (App Router), React 19, Tailwind v4 tokenized styling.
 - Main app code: `src/app`, `src/components`, `src/lib`, `src/styles/tokens`, `public`.
+- Shared packages consumed by the app: `@techsio/ui-kit` and `@techsio/storefront-data`.
 - Design references: `local/screens/figma-2/`.
+- You may read `local/` reference material, but do not edit ignored local workspace files unless the user explicitly asks.
 - Generated outputs must not be edited directly: `.next/`, `dist/`, `storybook-static/`.
 
+## Skill Routing
+- For app UI work that consumes `@techsio/ui-kit`, read `libs/ui/skills/ui-kit-workflow-orchestrator/SKILL.md` first.
+  - App usage normally routes to `component-usage-ux`, the exact component `*-usage` skill, `framework-consumer-integration`, `app-token-overrides`, and `app-ui-kit-audit`.
+  - Library authoring routes through `libs/ui/AGENTS.md` and the library authoring/token/storybook skills instead.
+- For storefront data work involving `@techsio/storefront-data`, read `libs/storefront-data/skills/use-storefront-data-skills/SKILL.md` first.
+  - Pick the smallest relevant follow-up skill: setup, migration, catalog/product reads, auth, cart/checkout, SSR/query boundaries, cache/pagination, or release audit.
+- Load only the relevant skill files for the task. Do not duplicate their full instructions in this app-level file.
+
 ## UI & Token Guardrails
 - Use internal UI primitives/components first (`@techsio/ui-kit`), not native controls in app code.
   - Avoid raw `<button>`, `<input>`, `<select>`, `<textarea>`, `<img>`, inline SVG icons in app code unless there is a documented exception.
+- For Next.js links/images, prefer the UI-kit component with `next/link` or `next/image` adapter support when that component exposes it.
 - Use token-based utility classes, not raw Tailwind palette/spacing values.
   - Prefer: `p-200 mt-300 gap-150 text-success bg-danger`
   - Avoid: `p-4 mt-8 gap-4 bg-red-600 text-green-300`
+- Put Herbatika visual differences in `src/styles/tokens/**`; avoid JSX `className` overrides that duplicate UI-kit component props/tokens.
+- `src/styles/tokens/index.css` owns Tailwind, UI-kit token imports, Herbatika semantic/layout/spacing/typography tokens, and component token overrides.
 - Run guardrails before handing off:
   - `pnpm validate:token-usage`
   - `pnpm validate:ui-primitives`
   - or `pnpm validate:guardrails`
 
+## Storefront Data Guardrails
+- Herbatika composes the shared data layer in `src/lib/storefront/storefront.ts` and adjacent `storefront-definition*` files.
+- Prefer the preset surface from `@techsio/storefront-data`: shared hooks, flows, query keys, query options, cache policy, and SSR helpers.
+- Keep app-local code thin: SDK instance, field defaults, localized text, toasts, analytics, form DTOs, address adapters, and Herbatika-specific read models can stay here.
+- Move repeated backend communication, query key construction, cache sync, mutation invalidation, or reusable Medusa behavior into `libs/storefront-data`.
+- Use explicit package subpath imports. Do not import from package roots or `dist/`.
+- Keep server-only and client-only boundaries explicit; use `server-only` and `getServerQueryClient` for Server Component/SSR data paths.
+
 ## Build, Run, and Validation
-- `pnpm dev` runs the app on `http://localhost:3001`.
-- `pnpm build` builds production output.
-- `pnpm start` serves the production build.
+- From `apps/herbatika`, `pnpm dev` runs the app on `http://localhost:3001`.
+- From the repo root, prefer `pnpm -C apps/herbatika <script>` for app scripts.
+- Do not use the root frontend-demo `localhost:3000` assumption for this app.
+- `pnpm build` builds production output; `pnpm start` serves the production build.
 - Temporary rule: do not run Biome commands in this app until stability issue is resolved.
 
 ## Testing Workflow
diff --git a/apps/herbatika/src/app/reviews/product/[token]/page.tsx b/apps/herbatika/src/app/reviews/product/[token]/page.tsx
new file mode 100644
index 0000000000..0584bf053b
--- /dev/null
+++ b/apps/herbatika/src/app/reviews/product/[token]/page.tsx
@@ -0,0 +1,34 @@
+import { ProductReviewTokenPage } from "@/components/reviews/product-review-token-page";
+
+type ProductReviewTokenRouteProps = {
+  params: Promise<{
+    token: string;
+  }>;
+  searchParams: Promise<{
+    product_id?: string | string[];
+  }>;
+};
+
+const resolveSearchParam = (value?: string | string[]) =>
+  Array.isArray(value) ? value[0] : value;
+
+export const metadata = {
+  title: "Napísať recenziu | Herbatica",
+};
+
+export default async function ProductReviewTokenRoute({
+  params,
+  searchParams,
+}: ProductReviewTokenRouteProps) {
+  const [{ token }, resolvedSearchParams] = await Promise.all([
+    params,
+    searchParams,
+  ]);
+
+  return (
+    <ProductReviewTokenPage
+      productId={resolveSearchParam(resolvedSearchParams.product_id)}
+      token={token}
+    />
+  );
+}
diff --git a/apps/herbatika/src/components/product-detail.tsx b/apps/herbatika/src/components/product-detail.tsx
index f7977758c7..91157b540b 100644
--- a/apps/herbatika/src/components/product-detail.tsx
+++ b/apps/herbatika/src/components/product-detail.tsx
@@ -1,32 +1,65 @@
-"use client"
-
-import { Button } from "@techsio/ui-kit/atoms/button"
-import { LinkButton } from "@techsio/ui-kit/atoms/link-button"
-import { StatusText } from "@techsio/ui-kit/atoms/status-text"
-import NextLink from "next/link"
-import { useEffect } from "react"
-import { HerbatikaBreadcrumb } from "@/components/herbatika-breadcrumb"
-import type { ProductDetailProps } from "@/components/product-detail/product-detail.types"
-import { ProductDetailHero } from "@/components/product-detail/sections/product-detail-hero"
-import { ProductDetailMetrics } from "@/components/product-detail/sections/product-detail-metrics"
-import { ProductDetailOffers } from "@/components/product-detail/sections/product-detail-offers"
-import { ProductDetailRelated } from "@/components/product-detail/sections/product-detail-related"
-import { ProductDetailSkeleton } from "@/components/product-detail/sections/product-detail-skeleton"
-import { ProductDetailTabs } from "@/components/product-detail/sections/product-detail-tabs"
-import { useProductDetailController } from "@/components/product-detail/use-product-detail-controller"
-import { RecentlyVisitedProductsSection } from "@/components/recently-visited-products-section"
-import { runDetachedPromise } from "@/lib/storefront/detached-promise"
+"use client";
+
+import { Button } from "@techsio/ui-kit/atoms/button";
+import { LinkButton } from "@techsio/ui-kit/atoms/link-button";
+import { StatusText } from "@techsio/ui-kit/atoms/status-text";
+import NextLink from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import { HerbatikaBreadcrumb } from "@/components/herbatika-breadcrumb";
+import type { ProductDetailProps } from "@/components/product-detail/product-detail.types";
+import { ProductDetailHero } from "@/components/product-detail/sections/product-detail-hero";
+import { ProductDetailMetrics } from "@/components/product-detail/sections/product-detail-metrics";
+import { ProductDetailOffers } from "@/components/product-detail/sections/product-detail-offers";
+import { ProductDetailRelated } from "@/components/product-detail/sections/product-detail-related";
+import {
+  PRODUCT_DETAIL_REVIEWS_SECTION_ID,
+  PRODUCT_DETAIL_REVIEWS_TAB_VALUE,
+} from "@/components/product-detail/sections/product-detail-review-utils";
+import { ProductDetailSkeleton } from "@/components/product-detail/sections/product-detail-skeleton";
+import { ProductDetailTabs } from "@/components/product-detail/sections/product-detail-tabs";
+import { useProductDetailController } from "@/components/product-detail/use-product-detail-controller";
+import { RecentlyVisitedProductsSection } from "@/components/recently-visited-products-section";
+import { runDetachedPromise } from "@/lib/storefront/detached-promise";
 
 export function ProductDetail({ handle }: ProductDetailProps) {
-  const controller = useProductDetailController({ handle })
+  const controller = useProductDetailController({ handle });
+  const [activeInfoSection, setActiveInfoSection] = useState(
+    controller.defaultInfoSectionValue,
+  );
+
+  useEffect(() => {
+    setActiveInfoSection(controller.defaultInfoSectionValue);
+  }, [controller.defaultInfoSectionValue, controller.product?.id]);
 
   useEffect(() => {
     if (window.location.hash) {
-      return
+      return;
+    }
+
+    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
+  }, [handle]);
+
+  useEffect(() => {
+    if (window.location.hash !== `#${PRODUCT_DETAIL_REVIEWS_SECTION_ID}`) {
+      return;
     }
 
-    window.scrollTo({ top: 0, left: 0, behavior: "auto" })
-  }, [])
+    setActiveInfoSection(PRODUCT_DETAIL_REVIEWS_TAB_VALUE);
+  }, [controller.product?.id]);
+
+  const handleShowAllReviews = useCallback(() => {
+    setActiveInfoSection(PRODUCT_DETAIL_REVIEWS_TAB_VALUE);
+    window.history.replaceState(
+      null,
+      "",
+      `#${PRODUCT_DETAIL_REVIEWS_SECTION_ID}`,
+    );
+    window.requestAnimationFrame(() => {
+      document
+        .getElementById(PRODUCT_DETAIL_REVIEWS_SECTION_ID)
+        ?.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+  }, []);
 
   return (
     <main className="mx-auto flex w-full max-w-max-w flex-col gap-product-detail-page-gap p-product-detail-page font-rubik 2xl:p-product-detail-page-lg">
@@ -43,7 +76,7 @@ export function ProductDetail({ handle }: ProductDetailProps) {
           </StatusText>
           <Button
             onClick={() => {
-              runDetachedPromise(controller.productQuery.query.refetch())
+              runDetachedPromise(controller.productQuery.query.refetch());
             }}
             variant="secondary"
           >
@@ -52,10 +85,10 @@ export function ProductDetail({ handle }: ProductDetailProps) {
         </section>
       ) : null}
 
-      {controller.isBootstrappingRegion ||
-      controller.productQuery.isLoading ||
-      controller.productQuery.error ||
-      controller.product ? null : (
+      {!controller.isBootstrappingRegion &&
+      !controller.productQuery.isLoading &&
+      !controller.productQuery.error &&
+      !controller.product ? (
         <section className="space-y-400 rounded-xl border border-border-secondary bg-surface p-600">
           <StatusText showIcon status="error">
             Produkt sa nepodarilo nájsť.
@@ -64,13 +97,12 @@ export function ProductDetail({ handle }: ProductDetailProps) {
             Späť na domovskú stránku
           </LinkButton>
         </section>
-      )}
+      ) : null}
 
-      {!(
-        controller.isBootstrappingRegion ||
-        controller.productQuery.isLoading ||
-        controller.productQuery.error
-      ) && controller.product ? (
+      {!controller.isBootstrappingRegion &&
+      !controller.productQuery.isLoading &&
+      !controller.productQuery.error &&
+      controller.product ? (
         <>
           <ProductDetailHero
             canAddToCart={controller.canAddToCart}
@@ -79,9 +111,9 @@ export function ProductDetail({ handle }: ProductDetailProps) {
             displayOriginalLabel={controller.displayOriginalLabel}
             freeShippingThresholdLabel={controller.freeShippingThresholdLabel}
             galleryItems={controller.galleryItems}
+            mediaFacts={controller.mediaFacts}
             isAdding={controller.isMainProductAdding}
             maxQuantity={controller.maxQuantity}
-            mediaFacts={controller.mediaFacts}
             offerState={controller.offerState}
             onAddToCart={controller.handleAddMainProductToCart}
             onQuantityChange={controller.handleQuantityChange}
@@ -110,10 +142,16 @@ export function ProductDetail({ handle }: ProductDetailProps) {
             ) : null}
           </ProductDetailHero>
 
-          <ProductDetailMetrics />
+          <ProductDetailMetrics
+            onShowAllReviews={handleShowAllReviews}
+            productId={controller.product.id}
+          />
 
           <ProductDetailTabs
+            activeSectionValue={activeInfoSection}
             defaultSectionValue={controller.defaultInfoSectionValue}
+            onSectionValueChange={setActiveInfoSection}
+            productId={controller.product.id}
             sections={controller.productContentSections}
           />
         </>
@@ -135,5 +173,5 @@ export function ProductDetail({ handle }: ProductDetailProps) {
         </>
       ) : null}
     </main>
-  )
+  );
 }
diff --git a/apps/herbatika/src/components/product-detail/sections/product-detail-metrics.tsx b/apps/herbatika/src/components/product-detail/sections/product-detail-metrics.tsx
index 9ab5f6b312..9d89bdaab7 100644
--- a/apps/herbatika/src/components/product-detail/sections/product-detail-metrics.tsx
+++ b/apps/herbatika/src/components/product-detail/sections/product-detail-metrics.tsx
@@ -1,9 +1,78 @@
-"use client"
+"use client";
 
-import { ReviewsSection } from "@/components/reviews/reviews-section"
+import { ReviewSkeleton } from "@/components/loading/review-skeleton";
+import {
+  formatReviewScore,
+  PRODUCT_DETAIL_REVIEWS_SECTION_ID,
+  toReviewItem,
+} from "@/components/product-detail/sections/product-detail-review-utils";
+import { ReviewsSection } from "@/components/reviews/reviews-section";
+import {
+  PRODUCT_REVIEWS_PAGE_SIZE,
+  useProductReviews,
+} from "@/lib/storefront/reviews";
+
+type ProductDetailMetricsProps = {
+  onShowAllReviews?: () => void;
+  productId?: string | null;
+};
+
+const PRODUCT_REVIEW_TEASER_LIMIT = 4;
+
+function ProductDetailMetricsSkeleton() {
+  return (
+    <section className="space-y-500 pt-750">
+      <div className="grid grid-cols-1 gap-500 md:grid-cols-2 xl:grid-cols-4">
+        {Array.from({ length: PRODUCT_REVIEW_TEASER_LIMIT }, (_, index) => (
+          <ReviewSkeleton key={`product-review-teaser-skeleton-${index + 1}`} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export function ProductDetailMetrics({
+  onShowAllReviews,
+  productId,
+}: ProductDetailMetricsProps) {
+  const reviewsQuery = useProductReviews({
+    enabled: Boolean(productId),
+    limit: PRODUCT_REVIEWS_PAGE_SIZE,
+    offset: 0,
+    productId: productId ?? undefined,
+  });
+  const reviews = reviewsQuery.reviews
+    .slice(0, PRODUCT_REVIEW_TEASER_LIMIT)
+    .map(toReviewItem);
+
+  if (!productId) {
+    return null;
+  }
+
+  if (reviewsQuery.isLoading && reviews.length === 0) {
+    return <ProductDetailMetricsSkeleton />;
+  }
+
+  if (reviews.length === 0) {
+    return null;
+  }
 
-export function ProductDetailMetrics() {
   return (
-    <ReviewsSection sectionClassName="space-y-500 pt-750" variant="product" />
-  )
+    <ReviewsSection
+      linkHref={`#${PRODUCT_DETAIL_REVIEWS_SECTION_ID}`}
+      onLinkClick={(event) => {
+        if (!onShowAllReviews) {
+          return;
+        }
+
+        event.preventDefault();
+        onShowAllReviews();
+      }}
+      ratingValue={reviewsQuery.summary.average_rating}
+      reviews={reviews}
+      scoreLabel={formatReviewScore(reviewsQuery.summary.average_rating)}
+      sectionClassName="space-y-500 pt-750"
+      variant="product"
+    />
+  );
 }
diff --git a/apps/herbatika/src/components/product-detail/sections/product-detail-review-dialog.tsx b/apps/herbatika/src/components/product-detail/sections/product-detail-review-dialog.tsx
new file mode 100644
index 0000000000..6527d2c362
--- /dev/null
+++ b/apps/herbatika/src/components/product-detail/sections/product-detail-review-dialog.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import { Button } from "@techsio/ui-kit/atoms/button";
+import { LinkButton } from "@techsio/ui-kit/atoms/link-button";
+import { StatusText } from "@techsio/ui-kit/atoms/status-text";
+import { Dialog } from "@techsio/ui-kit/molecules/dialog";
+import NextLink from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import { buildAuthRouteHref } from "@/components/auth/auth-helpers";
+import { PRODUCT_DETAIL_REVIEWS_SECTION_ID } from "@/components/product-detail/sections/product-detail-review-utils";
+import {
+  ProductReviewForm,
+  type ProductReviewFormSubmitValues,
+} from "@/components/reviews/product-review-form";
+import { resolveProductReviewSubmitErrorMessage } from "@/components/reviews/product-review-errors";
+import { useAuth } from "@/lib/storefront/auth";
+import { useCreateProductReview } from "@/lib/storefront/reviews";
+
+type ProductReviewCreateDialogProps = {
+  productId: string;
+  triggerLabel?: string;
+};
+
+const REVIEW_FORM_ID = "product-detail-create-review-form";
+
+export function ProductReviewCreateDialog({
+  productId,
+  triggerLabel = "Napísať recenziu",
+}: ProductReviewCreateDialogProps) {
+  const authQuery = useAuth();
+  const pathname = usePathname();
+  const [formResetKey, setFormResetKey] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const loginHref = buildAuthRouteHref(
+    "/auth/login",
+    `${pathname}#${PRODUCT_DETAIL_REVIEWS_SECTION_ID}`,
+  );
+  const createReviewMutation = useCreateProductReview({
+    onError: (error) => {
+      setSubmitError(resolveProductReviewSubmitErrorMessage(error));
+    },
+    onSuccess: () => {
+      setFormResetKey((current) => current + 1);
+      setIsSubmitted(true);
+      setSubmitError(null);
+    },
+  });
+  const isBusy = createReviewMutation.isPending;
+  const isAuthenticated = authQuery.isAuthenticated;
+
+  const handleOpenChange = ({ open }: { open: boolean }) => {
+    setIsOpen(open);
+
+    if (!open) {
+      setFormResetKey((current) => current + 1);
+      setIsSubmitted(false);
+      setSubmitError(null);
+    }
+  };
+
+  const handleSubmit = ({
+    content,
+    rating,
+    title,
+  }: ProductReviewFormSubmitValues) => {
+    setSubmitError(null);
+
+    createReviewMutation.mutate({
+      content,
+      product_id: productId,
+      rating,
+      title,
+    });
+  };
+
+  const renderContent = () => {
+    if (authQuery.isLoading) {
+      return (
+        <StatusText showIcon status="default">
+          Overujem prihlásenie.
+        </StatusText>
+      );
+    }
+
+    if (!isAuthenticated) {
+      return (
+        <StatusText showIcon status="warning">
+          Na napísanie recenzie sa prosím prihláste.
+        </StatusText>
+      );
+    }
+
+    if (isSubmitted) {
+      return (
+        <StatusText showIcon status="success">
+          Ďakujeme za recenziu. Po schválení sa zobrazí pri produkte.
+        </StatusText>
+      );
+    }
+
+    return (
+      <ProductReviewForm
+        disabled={isBusy}
+        formId={REVIEW_FORM_ID}
+        onSubmit={handleSubmit}
+        resetKey={formResetKey}
+        submitError={submitError}
+      />
+    );
+  };
+
+  const renderActions = () => {
+    if (!isAuthenticated && !authQuery.isLoading) {
+      return (
+        <>
+          <Button
+            onClick={() => setIsOpen(false)}
+            size="sm"
+            theme="outlined"
+            variant="secondary"
+          >
+            Zavrieť
+          </Button>
+          <LinkButton
+            as={NextLink}
+            href={loginHref}
+            size="sm"
+            variant="primary"
+          >
+            Prihlásiť sa
+          </LinkButton>
+        </>
+      );
+    }
+
+    if (isSubmitted) {
+      return (
+        <Button onClick={() => setIsOpen(false)} size="sm" variant="primary">
+          Zavrieť
+        </Button>
+      );
+    }
+
+    return (
+      <>
+        <Button
+          disabled={isBusy}
+          onClick={() => setIsOpen(false)}
+          size="sm"
+          theme="outlined"
+          type="button"
+          variant="secondary"
+        >
+          Zrušiť
+        </Button>
+        <Button
+          disabled={!isAuthenticated || authQuery.isLoading || isBusy}
+          form={REVIEW_FORM_ID}
+          isLoading={isBusy}
+          size="sm"
+          type="submit"
+          variant="primary"
+        >
+          Odoslať recenziu
+        </Button>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Button
+        onClick={() => setIsOpen(true)}
+        size="sm"
+        type="button"
+        variant="primary"
+      >
+        {triggerLabel}
+      </Button>
+      <Dialog
+        actions={renderActions()}
+        className="shadow-md"
+        customTrigger
+        description="Recenzia sa zobrazí po schválení."
+        onOpenChange={handleOpenChange}
+        open={isOpen}
+        size="md"
+        title="Napísať recenziu"
+      >
+        {renderContent()}
+      </Dialog>
+    </>
+  );
+}
diff --git a/apps/herbatika/src/components/product-detail/sections/product-detail-review-utils.ts b/apps/herbatika/src/components/product-detail/sections/product-detail-review-utils.ts
new file mode 100644
index 0000000000..187ceaed4d
--- /dev/null
+++ b/apps/herbatika/src/components/product-detail/sections/product-detail-review-utils.ts
@@ -0,0 +1,48 @@
+import type { ReviewItem } from "@/components/reviews/reviews.types";
+import type { ProductReview } from "@/lib/storefront/reviews";
+
+export const PRODUCT_DETAIL_REVIEWS_SECTION_ID = "product-detail-reviews";
+export const PRODUCT_DETAIL_REVIEWS_TAB_VALUE = "reviews";
+
+export const formatReviewScore = (value: number) =>
+  value.toLocaleString("sk-SK", {
+    maximumFractionDigits: 1,
+    minimumFractionDigits: 1,
+  });
+
+export const formatReviewCount = (count: number) =>
+  count.toLocaleString("sk-SK");
+
+const formatReviewDate = (value?: string) => {
+  if (!value) {
+    return "";
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+
+  return new Intl.DateTimeFormat("sk-SK", {
+    day: "numeric",
+    month: "numeric",
+    year: "numeric",
+  }).format(date);
+};
+
+const resolveReviewAuthor = (review: ProductReview) => {
+  const firstName = review.customer?.first_name?.trim();
+  const lastName = review.customer?.last_name?.trim();
+  const author = [firstName, lastName].filter(Boolean).join(" ");
+
+  return author || "Anonymne";
+};
+
+export const toReviewItem = (review: ProductReview): ReviewItem => ({
+  author: resolveReviewAuthor(review),
+  dateLabel: formatReviewDate(review.created_at),
+  id: review.id,
+  message: review.content,
+  rating: review.rating,
+  title: review.title,
+});
diff --git a/apps/herbatika/src/components/product-detail/sections/product-detail-reviews.tsx b/apps/herbatika/src/components/product-detail/sections/product-detail-reviews.tsx
new file mode 100644
index 0000000000..24f44d7cc2
--- /dev/null
+++ b/apps/herbatika/src/components/product-detail/sections/product-detail-reviews.tsx
@@ -0,0 +1,291 @@
+"use client";
+
+import { Button } from "@techsio/ui-kit/atoms/button";
+import { Rating } from "@techsio/ui-kit/atoms/rating";
+import { Skeleton } from "@techsio/ui-kit/atoms/skeleton";
+import { StatusText } from "@techsio/ui-kit/atoms/status-text";
+import { Pagination } from "@techsio/ui-kit/molecules/pagination";
+import NextLink from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+import { createParser, createSerializer, useQueryState } from "nuqs";
+import { useCallback, useEffect } from "react";
+import {
+  formatReviewCount,
+  formatReviewScore,
+  PRODUCT_DETAIL_REVIEWS_SECTION_ID,
+  toReviewItem,
+} from "@/components/product-detail/sections/product-detail-review-utils";
+import { ProductReviewCreateDialog } from "@/components/product-detail/sections/product-detail-review-dialog";
+import { FractionalRating } from "@/components/reviews/fractional-rating";
+import type { ReviewItem } from "@/components/reviews/reviews.types";
+import {
+  PRODUCT_REVIEWS_PAGE_SIZE,
+  useProductReviews,
+} from "@/lib/storefront/reviews";
+
+type ProductDetailReviewsProps = {
+  productId?: string | null;
+};
+
+const REVIEW_PAGE_PARAM = "reviews_page";
+
+const resolveReviewInitial = (author: string) =>
+  author.trim().charAt(0).toUpperCase() || "A";
+
+const reviewPageParser = createParser({
+  parse: (value) => {
+    const page = Number(value);
+    return Number.isInteger(page) && page > 0 ? page : null;
+  },
+  serialize: String,
+}).withDefault(1);
+
+const serializeReviewPage = createSerializer({
+  [REVIEW_PAGE_PARAM]: reviewPageParser,
+});
+
+function ProductDetailReviewsSkeleton() {
+  return (
+    <div className="space-y-500" aria-busy="true" aria-label="Načítavam recenzie">
+      <section className="space-y-350">
+        <div className="flex flex-col gap-250 md:flex-row md:items-center md:justify-between">
+          <div className="space-y-150">
+            <Skeleton.Text noOfLines={1} size="lg" />
+            <Skeleton.Text noOfLines={1} size="sm" />
+          </div>
+          <Skeleton.Rectangle className="h-900 w-full max-w-950" />
+        </div>
+      </section>
+
+      <div className="space-y-300">
+        {Array.from({ length: 3 }, (_, index) => (
+          <article
+            className="rounded-md border border-border-secondary bg-highlight p-400"
+            key={`product-review-list-skeleton-${index + 1}`}
+          >
+            <div className="flex gap-300">
+              <Skeleton.Circle className="size-14 shrink-0" />
+              <div className="min-w-0 flex-1 space-y-250">
+                <Skeleton.Text noOfLines={2} size="sm" />
+                <Skeleton.Text noOfLines={3} size="sm" />
+              </div>
+            </div>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ProductDetailReviewsHeader({
+  averageRating,
+  productId,
+  totalCount,
+}: {
+  averageRating: number;
+  productId: string;
+  totalCount: number;
+}) {
+  return (
+    <header className="flex flex-col gap-350 lg:items-start lg:justify-between">
+      <div className="space-y-100">
+        <div className="flex flex-wrap items-center gap-300">
+          <h2 className="text-3xl leading-tight font-semibold text-fg-primary">
+            Hodnotenie produktu{" "}
+            <span className="whitespace-nowrap">
+              - <span className="text-primary">{formatReviewScore(averageRating)}</span>
+            </span>
+          </h2>
+          <FractionalRating
+            label={`Priemerné hodnotenie produktu ${formatReviewScore(averageRating)} z 5`}
+            value={averageRating}
+          />
+        </div>
+        <p className="text-sm leading-relaxed text-fg-secondary">
+          Na základe {formatReviewCount(totalCount)} hodnotení
+        </p>
+      </div>
+
+      <ProductReviewCreateDialog productId={productId} />
+    </header>
+  );
+}
+
+function ProductReviewListItem({ review }: { review: ReviewItem }) {
+  return (
+    <article className="not-last:border-b border-border-secondary p-400">
+      <div className="flex gap-300">
+        <div className="flex size-36 shrink-0 items-center justify-center rounded-full bg-base">
+          <span className="text-2xl leading-none font-normal text-fg-secondary">
+            {resolveReviewInitial(review.author)}
+          </span>
+        </div>
+
+        <div className="min-w-0 flex-1 space-y-250">
+          <header className="flex flex-col gap-150 sm:flex-row sm:items-start sm:justify-between">
+            <div className="min-w-0 space-y-100">
+              <p className="truncate text-md leading-tight font-semibold text-fg-primary">
+                {review.author}
+              </p>
+              <Rating
+                className="pointer-events-none"
+                readOnly
+                size="sm"
+                value={review.rating}
+              />
+            </div>
+
+            {review.dateLabel ? (
+              <p className="shrink-0 text-sm leading-tight text-fg-placeholder">
+                {review.dateLabel}
+              </p>
+            ) : null}
+          </header>
+
+          <div className="space-y-150">
+            <p className="text-md leading-relaxed text-fg-secondary">
+              {review.message}
+            </p>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+export function ProductDetailReviews({ productId }: ProductDetailReviewsProps) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [currentPage, setCurrentPage] = useQueryState(
+    REVIEW_PAGE_PARAM,
+    reviewPageParser,
+  );
+  const getReviewPageUrl = useCallback(
+    ({ page }: { page: number }) => {
+      const query = searchParams.toString();
+      const baseHref = query ? `${pathname}?${query}` : pathname;
+      const href = serializeReviewPage(baseHref, {
+        reviews_page: page <= 1 ? null : page,
+      });
+      return `${href}#${PRODUCT_DETAIL_REVIEWS_SECTION_ID}`;
+    },
+    [pathname, searchParams],
+  );
+
+  const reviewsQuery = useProductReviews({
+    productId: productId ?? undefined,
+    limit: PRODUCT_REVIEWS_PAGE_SIZE,
+    page: currentPage,
+    enabled: Boolean(productId),
+  });
+  const reviews = reviewsQuery.reviews;
+  const totalCount = reviewsQuery.totalCount;
+  const averageRating = reviewsQuery.summary.average_rating;
+  const reviewItems = reviews.map(toReviewItem);
+  const isInitialLoading = reviewsQuery.isLoading && reviews.length === 0;
+  const isEmpty = reviewsQuery.isSuccess && totalCount === 0;
+  const isPageOutOfRange =
+    reviewsQuery.isSuccess &&
+    reviewsQuery.totalPages > 0 &&
+    currentPage > reviewsQuery.totalPages;
+  const shouldShowPagination = reviewsQuery.totalPages > 1;
+
+  useEffect(() => {
+    if (!isPageOutOfRange) {
+      return;
+    }
+
+    void setCurrentPage(reviewsQuery.totalPages, { history: "replace" });
+  }, [isPageOutOfRange, reviewsQuery.totalPages, setCurrentPage]);
+
+  if (!productId) {
+    return (
+      <StatusText showIcon status="warning">
+        Recenzie produktu nie sú momentálne dostupné.
+      </StatusText>
+    );
+  }
+
+  if (isInitialLoading) {
+    return <ProductDetailReviewsSkeleton />;
+  }
+
+  if (isPageOutOfRange) {
+    return <ProductDetailReviewsSkeleton />;
+  }
+
+  if (reviewsQuery.error && reviews.length === 0) {
+    return (
+      <div className="space-y-300">
+        <StatusText showIcon status="error">
+          Recenzie sa nepodarilo načítať.
+        </StatusText>
+        <Button
+          onClick={() => {
+            void reviewsQuery.query.refetch();
+          }}
+          size="sm"
+          variant="secondary"
+        >
+          Skúsiť znova
+        </Button>
+      </div>
+    );
+  }
+
+  if (isEmpty) {
+    return (
+      <div className="rounded-xs border border-border-secondary bg-highlight p-500">
+        <p className="text-lg font-semibold text-fg-primary">
+          Tento produkt zatiaľ nemá recenzie.
+        </p>
+        <p className="mt-150 text-md leading-relaxed text-fg-secondary">
+          Po prvých overených hodnoteniach sa zobrazia priamo v tejto sekcii.
+        </p>
+        <div className="mt-300">
+          <ProductReviewCreateDialog
+            productId={productId}
+            triggerLabel="Napísať prvú recenziu"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-500">
+      <ProductDetailReviewsHeader
+        averageRating={averageRating}
+        productId={productId}
+        totalCount={totalCount}
+      />
+
+      {reviewsQuery.isFetching && reviews.length > 0 ? (
+        <StatusText showIcon status="default">
+          Aktualizujem recenzie
+        </StatusText>
+      ) : null}
+
+      <div className="space-y-300">
+        {reviewItems.map((review) => (
+          <ProductReviewListItem key={review.id} review={review} />
+        ))}
+      </div>
+
+      {shouldShowPagination ? (
+        <div className="flex justify-end">
+          <Pagination
+            count={totalCount}
+            getPageUrl={getReviewPageUrl}
+            linkAs={NextLink}
+            page={currentPage}
+            pageSize={PRODUCT_REVIEWS_PAGE_SIZE}
+            size="sm"
+            variant="outlined"
+            siblingCount={0}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsx b/apps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsx
index e0c99d2dd5..cb70dc798b 100644
--- a/apps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsx
+++ b/apps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsx
@@ -1,22 +1,57 @@
-"use client"
+"use client";
 
-import { Accordion } from "@techsio/ui-kit/molecules/accordion"
-import { Tabs } from "@techsio/ui-kit/molecules/tabs"
-import type { ProductDetailContentSection } from "@/components/product-detail/product-detail.types"
-import { ProductDetailHtmlContent } from "@/components/product-detail/product-detail-html-content"
+import { Accordion } from "@techsio/ui-kit/molecules/accordion";
+import { Tabs } from "@techsio/ui-kit/molecules/tabs";
+import { Suspense } from "react";
+import { ProductDetailHtmlContent } from "@/components/product-detail/product-detail-html-content";
+import type { ProductDetailContentSection } from "@/components/product-detail/product-detail.types";
+import {
+  PRODUCT_DETAIL_REVIEWS_SECTION_ID,
+  PRODUCT_DETAIL_REVIEWS_TAB_VALUE,
+} from "@/components/product-detail/sections/product-detail-review-utils";
+import { ProductDetailReviews } from "@/components/product-detail/sections/product-detail-reviews";
 
 type ProductDetailTabsProps = {
-  defaultSectionValue: string
-  sections: ProductDetailContentSection[]
+  activeSectionValue: string;
+  defaultSectionValue: string;
+  onSectionValueChange: (value: string) => void;
+  productId?: string | null;
+  sections: ProductDetailContentSection[];
+};
+
+function ProductDetailReviewsSlot({
+  productId,
+}: {
+  productId?: string | null;
+}) {
+  return (
+    <Suspense fallback={null}>
+      <ProductDetailReviews productId={productId} />
+    </Suspense>
+  );
 }
 
 export function ProductDetailTabs({
+  activeSectionValue,
   defaultSectionValue,
+  onSectionValueChange,
+  productId,
   sections,
 }: ProductDetailTabsProps) {
+  const tabSections = productId
+    ? [
+        ...sections,
+        {
+          key: PRODUCT_DETAIL_REVIEWS_TAB_VALUE,
+          title: "Hodnotenie",
+          html: "",
+        },
+      ]
+    : sections;
+
   return (
-    <section>
-      <h2 className="mb-400 font-semibold text-3xl text-fg-primary">
+    <section id={productId ? PRODUCT_DETAIL_REVIEWS_SECTION_ID : undefined}>
+      <h2 className="mb-400 text-3xl font-semibold text-fg-primary">
         Informácie o produkte
       </h2>
 
@@ -25,11 +60,13 @@ export function ProductDetailTabs({
           defaultValue={defaultSectionValue}
           fitted
           justify="start"
+          onValueChange={onSectionValueChange}
           size="md"
+          value={activeSectionValue}
           variant="line"
         >
           <Tabs.List className="mb-200">
-            {sections.map((section) => (
+            {tabSections.map((section) => (
               <Tabs.Trigger
                 className="h-full bg-tabs-trigger-bg font-normal data-[selected]:font-medium"
                 key={section.key}
@@ -41,39 +78,57 @@ export function ProductDetailTabs({
             <Tabs.Indicator className="origin-center scale-x-75" />
           </Tabs.List>
 
-          {sections.map((section) => (
+          {tabSections.map((section) => (
             <Tabs.Content
               className="bg-surface px-800 py-400"
               key={section.key}
               value={section.key}
             >
-              <ProductDetailHtmlContent
-                fallback="Obsah sekcie bude čoskoro doplnený."
-                html={section.html}
-              />
+              {section.key === PRODUCT_DETAIL_REVIEWS_TAB_VALUE ? (
+                <ProductDetailReviewsSlot productId={productId} />
+              ) : (
+                <ProductDetailHtmlContent
+                  fallback="Obsah sekcie bude čoskoro doplnený."
+                  html={section.html}
+                />
+              )}
             </Tabs.Content>
           ))}
         </Tabs>
       </div>
 
       <div className="lg:hidden">
-        <Accordion size="sm" variant="default">
-          {sections.map((section) => (
+        <Accordion
+          onChange={(value) => {
+            const nextValue = value[0];
+            if (nextValue) {
+              onSectionValueChange(nextValue);
+            }
+          }}
+          size="sm"
+          value={[activeSectionValue]}
+          variant="default"
+        >
+          {tabSections.map((section) => (
             <Accordion.Item key={section.key} value={section.key}>
               <Accordion.Header>
                 <Accordion.Title>{section.title}</Accordion.Title>
                 <Accordion.Indicator />
               </Accordion.Header>
               <Accordion.Content>
-                <ProductDetailHtmlContent
-                  fallback="Obsah sekcie bude čoskoro doplnený."
-                  html={section.html}
-                />
+                {section.key === PRODUCT_DETAIL_REVIEWS_TAB_VALUE ? (
+                  <ProductDetailReviewsSlot productId={productId} />
+                ) : (
+                  <ProductDetailHtmlContent
+                    fallback="Obsah sekcie bude čoskoro doplnený."
+                    html={section.html}
+                  />
+                )}
               </Accordion.Content>
             </Accordion.Item>
           ))}
         </Accordion>
       </div>
     </section>
-  )
+  );
 }
diff --git a/apps/herbatika/src/components/reviews/fractional-rating.tsx b/apps/herbatika/src/components/reviews/fractional-rating.tsx
new file mode 100644
index 0000000000..2cfff9281e
--- /dev/null
+++ b/apps/herbatika/src/components/reviews/fractional-rating.tsx
@@ -0,0 +1,57 @@
+import { Icon } from "@techsio/ui-kit/atoms/icon";
+import type { CSSProperties } from "react";
+
+type FractionalRatingProps = {
+  label?: string;
+  value: number;
+};
+
+const STAR_COUNT = 5;
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+export function FractionalRating({
+  label,
+  value,
+}: FractionalRatingProps) {
+  const normalizedValue = Number.isFinite(value)
+    ? clamp(value, 0, STAR_COUNT)
+    : 0;
+
+  return (
+    <span
+      aria-label={label ?? `${normalizedValue.toFixed(1)} z ${STAR_COUNT}`}
+      className="inline-flex items-center relative gap-rating-lg text-rating-lg pointer-events-none"
+      role="img"
+    >
+      {Array.from({ length: STAR_COUNT }, (_, index) => {
+        const fill = clamp(normalizedValue - index, 0, 1);
+        const style = {
+          "--star-fill": `${fill * 100}%`,
+        } as CSSProperties;
+
+        return (
+          <span className="relative inline-grid shrink-0" key={`star-${index + 1}`}>
+            <Icon
+              className="text-rating-fg-base"
+              icon="token-icon-rating"
+              size="current"
+            />
+            <span
+              aria-hidden="true"
+              className="rating-star-fill pointer-events-none absolute inset-y-0 start-0 overflow-hidden"
+              style={style}
+            >
+              <Icon
+                className="text-rating-fg-active absolute"
+                icon="token-icon-rating"
+                size="current"
+              />
+            </span>
+          </span>
+        );
+      })}
+    </span>
+  );
+}
diff --git a/apps/herbatika/src/components/reviews/product-review-errors.ts b/apps/herbatika/src/components/reviews/product-review-errors.ts
new file mode 100644
index 0000000000..4476506709
--- /dev/null
+++ b/apps/herbatika/src/components/reviews/product-review-errors.ts
@@ -0,0 +1,73 @@
+const REVIEW_TITLE_MAX_LENGTH = 200;
+const GENERIC_REVIEW_SUBMIT_ERROR =
+  "Recenziu sa nepodarilo odoslať. Skúste to prosím znova.";
+
+const hasErrorShape = (
+  error: unknown,
+): error is { message?: unknown; status?: unknown; statusText?: unknown } =>
+  Boolean(error && typeof error === "object");
+
+export const buildProductReviewTitle = (content: string) =>
+  content.trim().slice(0, REVIEW_TITLE_MAX_LENGTH);
+
+export const resolveProductReviewSubmitErrorMessage = (error: unknown) => {
+  const message =
+    typeof error === "string"
+      ? error
+      : hasErrorShape(error) && typeof error.message === "string"
+        ? error.message
+        : "";
+  const status =
+    hasErrorShape(error) && typeof error.status === "number"
+      ? error.status
+      : undefined;
+  const normalizedMessage = message.toLowerCase();
+
+  if (!message && status === undefined) {
+    return GENERIC_REVIEW_SUBMIT_ERROR;
+  }
+
+  if (normalizedMessage.includes("token has already been used")) {
+    return "Tento odkaz na hodnotenie už bol použitý.";
+  }
+
+  if (normalizedMessage.includes("token has expired")) {
+    return "Tento odkaz na hodnotenie už expiroval.";
+  }
+
+  if (normalizedMessage.includes("token does not match")) {
+    return "Tento odkaz nepatrí k vybranému produktu.";
+  }
+
+  if (normalizedMessage.includes("token was not found")) {
+    return "Tento odkaz na hodnotenie nie je platný.";
+  }
+
+  if (
+    status === 409 ||
+    normalizedMessage.includes("already") ||
+    normalizedMessage.includes("duplicate") ||
+    normalizedMessage.includes("exist") ||
+    normalizedMessage.includes("reviewed")
+  ) {
+    return "Tento produkt ste už hodnotili.";
+  }
+
+  if (status === 401) {
+    return "Pre odoslanie recenzie sa prosím prihláste.";
+  }
+
+  if (status === 403) {
+    return "Recenziu pre tento produkt momentálne nemôžete odoslať.";
+  }
+
+  if (status === 400 || status === 422) {
+    return message || "Skontrolujte prosím hodnotenie a text recenzie.";
+  }
+
+  if (status && status >= 500) {
+    return GENERIC_REVIEW_SUBMIT_ERROR;
+  }
+
+  return message || GENERIC_REVIEW_SUBMIT_ERROR;
+};
diff --git a/apps/herbatika/src/components/reviews/product-review-form.tsx b/apps/herbatika/src/components/reviews/product-review-form.tsx
new file mode 100644
index 0000000000..e8f9a782a1
--- /dev/null
+++ b/apps/herbatika/src/components/reviews/product-review-form.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { Rating } from "@techsio/ui-kit/atoms/rating";
+import { StatusText } from "@techsio/ui-kit/atoms/status-text";
+import { FormTextarea } from "@techsio/ui-kit/molecules/form-textarea";
+import { type FormEvent, useEffect, useState } from "react";
+import { buildProductReviewTitle } from "@/components/reviews/product-review-errors";
+
+export type ProductReviewFormSubmitValues = {
+  content: string;
+  rating: number;
+  title: string;
+};
+
+type ProductReviewFormValues = {
+  content: string;
+  rating: number | null;
+};
+
+type ProductReviewFormErrors = Partial<Record<keyof ProductReviewFormValues, string>>;
+
+type ProductReviewFormProps = {
+  disabled?: boolean;
+  formId: string;
+  resetKey?: number;
+  submitError?: string | null;
+  onSubmit: (values: ProductReviewFormSubmitValues) => void;
+};
+
+const REVIEW_CONTENT_MIN_LENGTH = 4;
+const defaultValues: ProductReviewFormValues = {
+  content: "",
+  rating: null,
+};
+
+const validateReviewForm = (values: ProductReviewFormValues) => {
+  const errors: ProductReviewFormErrors = {};
+
+  if (
+    typeof values.rating !== "number" ||
+    !Number.isInteger(values.rating) ||
+    values.rating < 1 ||
+    values.rating > 5
+  ) {
+    errors.rating = "Vyberte hodnotenie od 1 do 5 hviezdičiek.";
+  }
+
+  if (values.content.trim().length < REVIEW_CONTENT_MIN_LENGTH) {
+    errors.content = `Napíšte aspoň ${REVIEW_CONTENT_MIN_LENGTH} znakov.`;
+  }
+
+  return errors;
+};
+
+export function ProductReviewForm({
+  disabled = false,
+  formId,
+  resetKey,
+  submitError,
+  onSubmit,
+}: ProductReviewFormProps) {
+  const [errors, setErrors] = useState<ProductReviewFormErrors>({});
+  const [values, setValues] = useState<ProductReviewFormValues>(defaultValues);
+
+  useEffect(() => {
+    setErrors({});
+    setValues(defaultValues);
+  }, [resetKey]);
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const nextErrors = validateReviewForm(values);
+    setErrors(nextErrors);
+
+    if (Object.keys(nextErrors).length > 0) {
+      return;
+    }
+
+    const content = values.content.trim();
+    const rating = values.rating;
+
+    if (typeof rating !== "number") {
+      return;
+    }
+
+    onSubmit({
+      content,
+      rating,
+      title: buildProductReviewTitle(content),
+    });
+  };
+
+  return (
+    <form className="space-y-300" id={formId} noValidate onSubmit={handleSubmit}>
+      {submitError ? (
+        <StatusText showIcon status="error">
+          {submitError}
+        </StatusText>
+      ) : null}
+
+      <div className="flex flex-col gap-form-field-gap">
+        <Rating
+          allowHalf={false}
+          disabled={disabled}
+          id={`${formId}-rating`}
+          labelText="Hodnotenie"
+          name="rating"
+          onChange={(rating) => {
+            setValues((current) => ({
+              ...current,
+              rating: rating > 0 ? rating : null,
+            }));
+            setErrors((current) => ({ ...current, rating: undefined }));
+          }}
+          size="lg"
+          value={values.rating ?? undefined}
+        />
+        {errors.rating ? (
+          <StatusText showIcon status="error">
+            {errors.rating}
+          </StatusText>
+        ) : null}
+      </div>
+
+      <FormTextarea
+        disabled={disabled}
+        helpText={
+          errors.content ?? `Minimálne ${REVIEW_CONTENT_MIN_LENGTH} znakov.`
+        }
+        id={`${formId}-content`}
+        label="Recenzia"
+        maxLength={1000}
+        onChange={(event) => {
+          setValues((current) => ({
+            ...current,
+            content: event.target.value,
+          }));
+          setErrors((current) => ({ ...current, content: undefined }));
+        }}
+        required
+        resize="y"
+        rows={5}
+        validateStatus={errors.content ? "error" : "default"}
+        value={values.content}
+      />
+    </form>
+  );
+}
diff --git a/apps/herbatika/src/components/reviews/product-review-token-page.tsx b/apps/herbatika/src/components/reviews/product-review-token-page.tsx
new file mode 100644
index 0000000000..d75479a6d3
--- /dev/null
+++ b/apps/herbatika/src/components/reviews/product-review-token-page.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { Button } from "@techsio/ui-kit/atoms/button";
+import { LinkButton } from "@techsio/ui-kit/atoms/link-button";
+import { StatusText } from "@techsio/ui-kit/atoms/status-text";
+import NextLink from "next/link";
+import { useMemo, useState } from "react";
+import {
+  ProductReviewForm,
+  type ProductReviewFormSubmitValues,
+} from "@/components/reviews/product-review-form";
+import { resolveProductReviewSubmitErrorMessage } from "@/components/reviews/product-review-errors";
+import {
+  type ProductReviewTokenProductStatus,
+  resolveProductStatusMessage,
+} from "@/components/reviews/product-review-token-status";
+import { useCreateProductReview } from "@/lib/storefront/reviews";
+import { useProducts } from "@/lib/storefront/products";
+
+type ProductReviewTokenPageProps = {
+  productId?: string;
+  token: string;
+};
+
+const REVIEW_TOKEN_FORM_ID = "product-review-token-form";
+const REVIEW_TOKEN_PRODUCT_FIELDS = "id,title,handle";
+
+export function ProductReviewTokenPage({
+  productId,
+  token,
+}: ProductReviewTokenPageProps) {
+  const normalizedProductId = productId?.trim() ?? "";
+  const [formResetKey, setFormResetKey] = useState(0);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const productQuery = useProducts({
+    page: 1,
+    limit: 1,
+    id: normalizedProductId || undefined,
+    fields: REVIEW_TOKEN_PRODUCT_FIELDS,
+    enabled: Boolean(normalizedProductId),
+  });
+  const product = productQuery.products[0] ?? null;
+  const productHref = product?.handle ? `/p/${product.handle}` : null;
+  const backHref = productHref ?? "/";
+  const backLabel = productHref ? "Späť na produkt" : "Späť do obchodu";
+  const createReviewMutation = useCreateProductReview({
+    onError: (error) => {
+      setSubmitError(resolveProductReviewSubmitErrorMessage(error));
+    },
+    onSuccess: () => {
+      setFormResetKey((current) => current + 1);
+      setIsSubmitted(true);
+      setSubmitError(null);
+    },
+  });
+  const isBusy = createReviewMutation.isPending;
+  const productStatus = useMemo<ProductReviewTokenProductStatus>(() => {
+    if (!normalizedProductId) {
+      return "missing-product-id";
+    }
+
+    if (productQuery.isLoading) {
+      return "loading";
+    }
+
+    if (productQuery.error) {
+      return "error";
+    }
+
+    if (!product) {
+      return "not-found";
+    }
+
+    return "ready";
+  }, [
+    normalizedProductId,
+    product,
+    productQuery.error,
+    productQuery.isLoading,
+  ]);
+  const productStatusMessage = resolveProductStatusMessage(productStatus);
+
+  const handleSubmit = ({
+    content,
+    rating,
+    title,
+  }: ProductReviewFormSubmitValues) => {
+    if (!normalizedProductId) {
+      setSubmitError("Odkaz na hodnotenie neobsahuje produkt.");
+      return;
+    }
+
+    setSubmitError(null);
+
+    createReviewMutation.mutate({
+      content,
+      product_id: normalizedProductId,
+      rating,
+      review_token: token,
+      title,
+    });
+  };
+
+  return (
+    <main className="mx-auto flex w-full max-w-max-w flex-col gap-500 p-product-detail-page font-rubik 2xl:p-product-detail-page-lg">
+      <section className="mx-auto flex w-full max-w-3xl flex-col gap-400 rounded-sm border border-border-secondary bg-surface p-500 shadow-sm sm:p-600">
+        <header className="space-y-150">
+          <p className="font-semibold text-fg-secondary text-sm">
+            Hodnotenie nákupu
+          </p>
+          <h1 className="font-bold text-2xl text-fg-primary">
+            Napísať recenziu
+          </h1>
+          <p className="text-fg-secondary text-sm">
+            Recenzia sa zobrazí po schválení.
+          </p>
+        </header>
+
+        {productStatus === "missing-product-id" ? (
+          <StatusText showIcon status="error">
+            Odkaz na hodnotenie neobsahuje produkt.
+          </StatusText>
+        ) : null}
+
+        {productStatusMessage ? (
+          <StatusText showIcon status={productStatusMessage.status}>
+            {productStatusMessage.text}
+          </StatusText>
+        ) : null}
+
+        {product ? (
+          <div className="space-y-100 border-border-secondary border-y py-300">
+            <p className="text-fg-secondary text-sm">Hodnotený produkt</p>
+            {productHref ? (
+              <NextLink
+                className="font-semibold text-fg-primary underline underline-offset-2"
+                href={productHref}
+              >
+                {product.title}
+              </NextLink>
+            ) : (
+              <p className="font-semibold text-fg-primary">{product.title}</p>
+            )}
+          </div>
+        ) : null}
+
+        {isSubmitted ? (
+          <div className="space-y-300">
+            <StatusText showIcon status="success">
+              Ďakujeme za recenziu. Po schválení sa zobrazí pri produkte.
+            </StatusText>
+            <LinkButton as={NextLink} href={backHref} variant="primary" size="md">
+              {backLabel}
+            </LinkButton>
+          </div>
+        ) : null}
+
+        {!isSubmitted && normalizedProductId ? (
+          <>
+            <ProductReviewForm
+              disabled={isBusy}
+              formId={REVIEW_TOKEN_FORM_ID}
+              onSubmit={handleSubmit}
+              resetKey={formResetKey}
+              submitError={submitError}
+            />
+            <div className="flex flex-col gap-200 sm:flex-row sm:items-center">
+              <Button
+                disabled={isBusy}
+                form={REVIEW_TOKEN_FORM_ID}
+                isLoading={isBusy}
+                type="submit"
+                variant="primary"
+              >
+                Odoslať recenziu
+              </Button>
+              <LinkButton
+                as={NextLink}
+                href={backHref}
+                theme="outlined"
+                variant="secondary"
+                size="md"
+              >
+                {backLabel}
+              </LinkButton>
+            </div>
+          </>
+        ) : null}
+      </section>
+    </main>
+  );
+}
diff --git a/apps/herbatika/src/components/reviews/product-review-token-status.ts b/apps/herbatika/src/components/reviews/product-review-token-status.ts
new file mode 100644
index 0000000000..46abc5fcbf
--- /dev/null
+++ b/apps/herbatika/src/components/reviews/product-review-token-status.ts
@@ -0,0 +1,27 @@
+export type ProductReviewTokenProductStatus =
+  | "missing-product-id"
+  | "loading"
+  | "error"
+  | "not-found"
+  | "ready";
+
+export const resolveProductStatusMessage = (
+  status: ProductReviewTokenProductStatus,
+) => {
+  switch (status) {
+    case "loading":
+      return { status: "default" as const, text: "Načítavam produkt." };
+    case "error":
+      return {
+        status: "warning" as const,
+        text: "Produkt sa nepodarilo načítať. Recenziu môžete odoslať aj tak.",
+      };
+    case "not-found":
+      return {
+        status: "warning" as const,
+        text: "Produkt sa nepodarilo nájsť. Skontrolujte prosím odkaz z emailu.",
+      };
+    default:
+      return null;
+  }
+};
diff --git a/apps/herbatika/src/components/reviews/reviews-section.tsx b/apps/herbatika/src/components/reviews/reviews-section.tsx
index 32f393ec1d..c3229b7561 100644
--- a/apps/herbatika/src/components/reviews/reviews-section.tsx
+++ b/apps/herbatika/src/components/reviews/reviews-section.tsx
@@ -1,38 +1,42 @@
-"use client"
-
-import { Icon } from "@techsio/ui-kit/atoms/icon"
-import { Rating } from "@techsio/ui-kit/atoms/rating"
-import type { StaticImageData } from "next/image"
-import NextImage from "next/image"
-import NextLink from "next/link"
-import { ReviewTrustBadges } from "@/components/reviews/review-trust-badges"
+"use client";
+
+import { Icon } from "@techsio/ui-kit/atoms/icon";
+import { Rating } from "@techsio/ui-kit/atoms/rating";
+import type { StaticImageData } from "next/image";
+import NextImage from "next/image";
+import NextLink from "next/link";
+import type { MouseEvent } from "react";
+import { FractionalRating } from "@/components/reviews/fractional-rating";
+import { ReviewTrustBadges } from "@/components/reviews/review-trust-badges";
 import {
   PRODUCT_REVIEWS,
   REVIEW_VERIFIED_CUSTOMER_BADGE,
-} from "@/components/reviews/reviews.data"
+} from "@/components/reviews/reviews.data";
 import type {
   ReviewItem,
   ReviewTrustSource,
-} from "@/components/reviews/reviews.types"
+} from "@/components/reviews/reviews.types";
 
-type ReviewsVariant = "product" | "homepage"
+type ReviewsVariant = "product" | "homepage";
 
 type ReviewsSectionProps = {
-  sectionClassName?: string
-  variant?: ReviewsVariant
-  linkHref?: string | null
-  linkLabel?: string | null
-  headingText?: string
-  scoreLabel?: string | null
-  ratingValue?: number
-  reviews?: readonly ReviewItem[]
-  trustSources?: readonly ReviewTrustSource[]
-  sourceBadge?: StaticImageData
-}
+  sectionClassName?: string;
+  variant?: ReviewsVariant;
+  linkHref?: string | null;
+  linkLabel?: string | null;
+  onLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  headingText?: string;
+  scoreLabel?: string | null;
+  summaryText?: string | null;
+  ratingValue?: number;
+  reviews?: readonly ReviewItem[];
+  trustSources?: readonly ReviewTrustSource[];
+  sourceBadge?: StaticImageData;
+};
 
 function resolveReviewInitial(author: string): string {
-  const trimmed = author.trim()
-  return trimmed.charAt(0).toUpperCase() || "A"
+  const trimmed = author.trim();
+  return trimmed.charAt(0).toUpperCase() || "A";
 }
 
 function ReviewCard({
@@ -40,11 +44,12 @@ function ReviewCard({
   sourceBadge,
   variant,
 }: {
-  review: ReviewItem
-  sourceBadge: StaticImageData
-  variant: ReviewsVariant
+  review: ReviewItem;
+  sourceBadge: StaticImageData;
+  variant: ReviewsVariant;
 }) {
-  const isHomepage = variant === "homepage"
+  const isHomepage = variant === "homepage";
+  const shouldShowVerifiedPurchase = !isHomepage && review.verifiedPurchase;
 
   return (
     <article className="flex h-full flex-col gap-350 rounded-md border border-border-secondary bg-highlight p-350 font-roboto shadow-md">
@@ -59,7 +64,7 @@ function ReviewCard({
           </div>
         ) : (
           <div className="flex h-800 w-800 flex-shrink-0 items-center justify-center rounded-full bg-surface">
-            <span className="font-normal text-3xl text-fg-secondary leading-none">
+            <span className="text-3xl leading-none font-normal text-fg-secondary">
               {resolveReviewInitial(review.author)}
             </span>
           </div>
@@ -73,40 +78,34 @@ function ReviewCard({
               size="md"
               value={review.rating}
             />
-            <p className="text-fg-placeholder text-xs leading-tight">
+            <p className="text-xs leading-tight text-fg-placeholder">
               {review.dateLabel}
             </p>
           </div>
 
-          <p className="truncate font-semibold text-fg-primary text-md leading-tight">
+          <p className="truncate text-md leading-tight font-semibold text-fg-primary">
             {review.author}
           </p>
         </div>
       </header>
 
       <div className="flex flex-1 flex-col gap-250">
-        {review.title ? (
-          <p className="flex items-center gap-150 text-fg-secondary text-md leading-relaxed">
-            <Icon className="text-primary" icon="token-icon-plus" size="md" />
-            <span className="truncate">{review.title}</span>
-          </p>
-        ) : null}
 
-        <p className="line-clamp-3 text-fg-secondary text-md leading-relaxed">
+        <p className="line-clamp-3 text-md leading-relaxed text-fg-secondary">
           {review.message}
         </p>
       </div>
 
-      {review.verifiedPurchase ? (
+      {shouldShowVerifiedPurchase ? (
         <div className="mt-auto flex items-center gap-150 text-primary">
           <Icon icon="token-icon-check" size="lg" />
-          <span className="font-medium text-sm leading-relaxed">
+          <span className="text-sm leading-relaxed font-medium">
             Overený nákup
           </span>
         </div>
       ) : null}
     </article>
-  )
+  );
 }
 
 export function ReviewsSection({
@@ -114,39 +113,56 @@ export function ReviewsSection({
   variant = "product",
   linkHref,
   linkLabel,
+  onLinkClick,
   headingText,
-  scoreLabel = "5,0",
+  scoreLabel,
+  summaryText,
   ratingValue = 5,
   reviews = PRODUCT_REVIEWS,
   trustSources,
   sourceBadge = REVIEW_VERIFIED_CUSTOMER_BADGE,
 }: ReviewsSectionProps) {
-  const isHomepage = variant === "homepage"
+  const isHomepage = variant === "homepage";
   const resolvedHeadingText =
-    headingText ?? (isHomepage ? "Overené zákazníkmi" : "Hodnotenia produktu")
-  const resolvedLinkHref = linkHref ?? (isHomepage ? null : "#reviews")
+    headingText ?? (isHomepage ? "Overené zákazníkmi" : "Hodnotenia produktu");
+  const defaultLinkHref = isHomepage ? null : "#reviews";
+  const defaultLinkLabel = isHomepage ? null : "Všetky hodnotenia";
+  const resolvedLinkHref =
+    linkHref === undefined ? defaultLinkHref : linkHref;
   const resolvedLinkLabel =
-    linkLabel ?? (isHomepage ? null : "Všetky hodnotenia")
-  const shouldShowLink = Boolean(resolvedLinkHref && resolvedLinkLabel)
+    linkLabel === undefined ? defaultLinkLabel : linkLabel;
+  const shouldShowLink = Boolean(resolvedLinkHref && resolvedLinkLabel);
+  const formattedRatingLabel = ratingValue.toLocaleString("sk-SK", {
+    maximumFractionDigits: 1,
+    minimumFractionDigits: 1,
+  });
+  const resolvedScoreLabel =
+    scoreLabel === undefined ? formattedRatingLabel : scoreLabel;
+  const ratingAriaLabel = resolvedScoreLabel ?? formattedRatingLabel;
 
   return (
     <section className={sectionClassName}>
       <header className="flex flex-col gap-350 lg:flex-row lg:items-center lg:justify-between">
         <div className="flex flex-wrap items-center gap-300">
-          <h2 className="font-semibold text-3xl text-fg-primary leading-tight">
-            {resolvedHeadingText}
-            {scoreLabel ? (
-              <>
-                {" "}
-                - <span className="text-primary">{scoreLabel}</span>
-              </>
+          <div>
+            <h2 className="text-3xl leading-tight font-semibold text-fg-primary">
+              {resolvedHeadingText}
+              {resolvedScoreLabel ? (
+                <>
+                  {" "}
+                  - <span className="text-primary">{resolvedScoreLabel}</span>
+                </>
+              ) : null}
+            </h2>
+            {summaryText ? (
+              <p className="mt-100 text-sm leading-relaxed text-fg-secondary">
+                {summaryText}
+              </p>
             ) : null}
-          </h2>
+          </div>
           {isHomepage ? null : (
-            <Rating
-              className="pointer-events-none"
-              readOnly
-              size="lg"
+            <FractionalRating
+              label={`Priemerné hodnotenie produktu ${ratingAriaLabel} z 5`}
               value={ratingValue}
             />
           )}
@@ -158,8 +174,9 @@ export function ReviewsSection({
 
         {shouldShowLink && resolvedLinkHref && resolvedLinkLabel ? (
           <NextLink
-            className="inline-flex items-center gap-50 font-verdana text-fg-strong text-sm leading-relaxed underline decoration-1 underline-offset-2 hover:text-fg-primary"
+            className="inline-flex items-center gap-50 font-verdana text-sm leading-relaxed text-fg-strong underline decoration-1 underline-offset-2 hover:text-fg-primary"
             href={resolvedLinkHref}
+            onClick={onLinkClick}
           >
             {resolvedLinkLabel}
             <Icon icon="token-icon-chevron-right" size="md" />
@@ -178,5 +195,5 @@ export function ReviewsSection({
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/apps/herbatika/src/lib/storefront/review-query-config.ts b/apps/herbatika/src/lib/storefront/review-query-config.ts
new file mode 100644
index 0000000000..95f91bfc5a
--- /dev/null
+++ b/apps/herbatika/src/lib/storefront/review-query-config.ts
@@ -0,0 +1 @@
+export const PRODUCT_REVIEWS_PAGE_SIZE = 10;
diff --git a/apps/herbatika/src/lib/storefront/reviews.ts b/apps/herbatika/src/lib/storefront/reviews.ts
new file mode 100644
index 0000000000..9a2918d7df
--- /dev/null
+++ b/apps/herbatika/src/lib/storefront/reviews.ts
@@ -0,0 +1,20 @@
+"use client";
+
+import type { MedusaProductReviewListInput } from "@techsio/storefront-data/reviews/medusa-service";
+import type { ReviewBase } from "@techsio/storefront-data/reviews/types";
+import { PRODUCT_REVIEWS_PAGE_SIZE } from "./review-query-config";
+import { storefront } from "./storefront";
+
+const reviewHooks = storefront.hooks.reviews;
+
+export type ProductReview = ReviewBase;
+export type ProductReviewListInput = MedusaProductReviewListInput;
+
+export { PRODUCT_REVIEWS_PAGE_SIZE };
+
+export const useProductReviews = reviewHooks.useProductReviews;
+export const useSuspenseProductReviews =
+  reviewHooks.useSuspenseProductReviews;
+export const usePrefetchProductReviews =
+  reviewHooks.usePrefetchProductReviews;
+export const useCreateProductReview = reviewHooks.useCreateProductReview;
diff --git a/apps/herbatika/src/lib/storefront/ssr/context.ts b/apps/herbatika/src/lib/storefront/ssr/context.ts
index a4c08b77f5..c17aa777f7 100644
--- a/apps/herbatika/src/lib/storefront/ssr/context.ts
+++ b/apps/herbatika/src/lib/storefront/ssr/context.ts
@@ -1,69 +1,80 @@
-import "server-only"
+import "server-only";
 
-import type { QueryClient } from "@tanstack/react-query"
-import { getServerQueryClient } from "@techsio/storefront-data/server/get-query-client"
-import type { RegionInfo } from "@techsio/storefront-data/shared/region"
-import { cookies } from "next/headers"
-import {
-  REGION_COUNTRY_CODE_STORAGE_KEY,
-  REGION_STORAGE_KEY,
-  resolveRegionInfoFromCookieValues,
-} from "../region-preferences"
-import { REGION_LIST_FIELDS, REGION_LIST_LIMIT } from "../region-query-config"
-import { resolveRegionByIdOrDefault, toRegionInfo } from "../region-selection"
+import type { RegionInfo } from "@techsio/storefront-data/shared/region";
+import { getServerQueryClient } from "@techsio/storefront-data/server/get-query-client";
+import type { QueryClient } from "@tanstack/react-query";
+import { cookies } from "next/headers";
 import {
   fetchServerProduct,
   fetchServerRegions,
+  prefetchServerProductReviews,
   prefetchServerProducts,
-} from "../storefront-server"
+} from "../storefront-server";
+import {
+  REGION_COUNTRY_CODE_STORAGE_KEY,
+  REGION_STORAGE_KEY,
+  resolveRegionInfoFromCookieValues,
+} from "../region-preferences";
+import { REGION_LIST_FIELDS, REGION_LIST_LIMIT } from "../region-query-config";
+import { resolveRegionByIdOrDefault, toRegionInfo } from "../region-selection";
 import type {
   ProductDetailParams,
+  ProductReviewListParams,
   ProductListParams,
   RegionListParams,
-} from "./types"
+} from "./types";
 
 const resolveCookieRegionPreference = async (): Promise<RegionInfo | null> => {
-  const cookieStore = await cookies()
+  const cookieStore = await cookies();
 
   return resolveRegionInfoFromCookieValues(
     cookieStore.get(REGION_STORAGE_KEY)?.value,
-    cookieStore.get(REGION_COUNTRY_CODE_STORAGE_KEY)?.value
-  )
-}
+    cookieStore.get(REGION_COUNTRY_CODE_STORAGE_KEY)?.value,
+  );
+};
 
 export const getRegionServerContext = async () => {
-  const queryClient = getServerQueryClient()
-  const cookieRegionPreference = await resolveCookieRegionPreference()
+  const queryClient = getServerQueryClient();
+  const cookieRegionPreference = await resolveCookieRegionPreference();
 
   const listParams: RegionListParams = {
     fields: REGION_LIST_FIELDS,
     limit: REGION_LIST_LIMIT,
-  }
+  };
 
-  const regionListResponse = await fetchServerRegions(queryClient, listParams)
+  const regionListResponse = await fetchServerRegions(queryClient, listParams);
 
   const resolvedRegionRecord = resolveRegionByIdOrDefault(
     regionListResponse.regions,
-    cookieRegionPreference?.region_id
-  )
+    cookieRegionPreference?.region_id,
+  );
   const region = resolvedRegionRecord
     ? toRegionInfo(resolvedRegionRecord)
-    : cookieRegionPreference
+    : cookieRegionPreference;
 
   return {
     queryClient,
     region,
-  }
-}
+  };
+};
 
 export const prefetchProductList = async (
   queryClient: QueryClient,
-  listParams: ProductListParams
+  listParams: ProductListParams,
 ) => {
-  await prefetchServerProducts(queryClient, listParams)
-}
+  await prefetchServerProducts(queryClient, listParams);
+};
 
 export const prefetchProductDetail = async (
   queryClient: QueryClient,
-  detailParams: ProductDetailParams
-) => fetchServerProduct(queryClient, detailParams)
+  detailParams: ProductDetailParams,
+) => {
+  return fetchServerProduct(queryClient, detailParams);
+};
+
+export const prefetchProductReviews = async (
+  queryClient: QueryClient,
+  listParams: ProductReviewListParams,
+) => {
+  await prefetchServerProductReviews(queryClient, listParams);
+};
diff --git a/apps/herbatika/src/lib/storefront/ssr/prefetch-product.ts b/apps/herbatika/src/lib/storefront/ssr/prefetch-product.ts
index c2afaf492b..60e02a6bcd 100644
--- a/apps/herbatika/src/lib/storefront/ssr/prefetch-product.ts
+++ b/apps/herbatika/src/lib/storefront/ssr/prefetch-product.ts
@@ -1,24 +1,26 @@
-import "server-only"
+import "server-only";
 
-import { dehydrate } from "@tanstack/react-query"
-import { resolveRelatedCategoryIds } from "../category-tree"
+import { dehydrate } from "@tanstack/react-query";
+import { resolveRelatedCategoryIds } from "../category-tree";
 import {
   buildProductListParams,
   PRODUCT_CARD_FIELDS,
   PRODUCT_DETAIL_FIELDS,
-} from "../product-query-config"
-import { PDP_RELATED_PRODUCTS_LIMIT } from "./constants"
+} from "../product-query-config";
+import { PDP_RELATED_PRODUCTS_LIMIT } from "./constants";
 import {
   getRegionServerContext,
   prefetchProductDetail,
   prefetchProductList,
-} from "./context"
-import type { ProductDetailParams } from "./types"
+  prefetchProductReviews,
+} from "./context";
+import type { ProductDetailParams } from "./types";
+import { PRODUCT_REVIEWS_PAGE_SIZE } from "../review-query-config";
 
 export const prefetchProductDetailPageStorefrontData = async (
-  handle: string
+  handle: string,
 ) => {
-  const { queryClient, region } = await getRegionServerContext()
+  const { queryClient, region } = await getRegionServerContext();
 
   if (region) {
     const detailParams: ProductDetailParams = {
@@ -26,10 +28,18 @@ export const prefetchProductDetailPageStorefrontData = async (
       fields: PRODUCT_DETAIL_FIELDS,
       region_id: region.region_id,
       country_code: region.country_code,
-    }
+    };
+
+    const product = await prefetchProductDetail(queryClient, detailParams);
+    const relatedCategoryIds = resolveRelatedCategoryIds(product);
 
-    const product = await prefetchProductDetail(queryClient, detailParams)
-    const relatedCategoryIds = resolveRelatedCategoryIds(product)
+    if (product?.id) {
+      await prefetchProductReviews(queryClient, {
+        productId: product.id,
+        limit: PRODUCT_REVIEWS_PAGE_SIZE,
+        offset: 0,
+      });
+    }
 
     if (relatedCategoryIds.length > 0 && product?.id) {
       const relatedProductsListParams = buildProductListParams({
@@ -40,14 +50,14 @@ export const prefetchProductDetailPageStorefrontData = async (
         fields: PRODUCT_CARD_FIELDS,
         region_id: region.region_id,
         country_code: region.country_code,
-      })
+      });
 
-      await prefetchProductList(queryClient, relatedProductsListParams)
+      await prefetchProductList(queryClient, relatedProductsListParams);
     }
   }
 
   return {
     region,
     dehydratedState: dehydrate(queryClient),
-  }
-}
+  };
+};
diff --git a/apps/herbatika/src/lib/storefront/ssr/types.ts b/apps/herbatika/src/lib/storefront/ssr/types.ts
index 857f9fbab4..b872d4074b 100644
--- a/apps/herbatika/src/lib/storefront/ssr/types.ts
+++ b/apps/herbatika/src/lib/storefront/ssr/types.ts
@@ -1,43 +1,44 @@
-import type { FindParams, HttpTypes } from "@medusajs/types"
-import type { buildCatalogProductsParams } from "../catalog-query-state"
+import type { FindParams, HttpTypes } from "@medusajs/types";
+import type { MedusaProductReviewListInput } from "@techsio/storefront-data/reviews/medusa-service";
+import type { buildCatalogProductsParams } from "../catalog-query-state";
 
 export type RegionListParams = HttpTypes.StoreRegionFilters & {
-  fields?: string
-  limit?: number
-  offset?: number
-}
+  fields?: string;
+  limit?: number;
+  offset?: number;
+};
 
-export type CategoryListParams = FindParams &
-  HttpTypes.StoreProductCategoryListParams
-export type ProductListParams = HttpTypes.StoreProductListParams
-export type CatalogListParams = ReturnType<typeof buildCatalogProductsParams>
+export type CategoryListParams = FindParams & HttpTypes.StoreProductCategoryListParams;
+export type ProductListParams = HttpTypes.StoreProductListParams;
+export type CatalogListParams = ReturnType<typeof buildCatalogProductsParams>;
+export type ProductReviewListParams = MedusaProductReviewListInput;
 
 export type ProductDetailParams = {
-  handle: string
-  region_id?: string
-  country_code?: string
-  province?: string
-  cart_id?: string
-  locale?: string
-  fields?: string
-}
+  handle: string;
+  region_id?: string;
+  country_code?: string;
+  province?: string;
+  cart_id?: string;
+  locale?: string;
+  fields?: string;
+};
 
-type QueryParamPrimitive = string | number | boolean
+type QueryParamPrimitive = string | number | boolean;
 export type QueryParamValue =
   | QueryParamPrimitive
   | null
   | undefined
   | QueryParamPrimitive[]
   | null[]
-  | undefined[]
+  | undefined[];
 
-export type QueryInput = Record<string, QueryParamValue>
+export type QueryInput = Record<string, QueryParamValue>;
 
 export type CatalogStoreResponse = {
-  products?: HttpTypes.StoreProduct[]
-  count?: number
-  page?: number
-  limit?: number
-  totalPages?: number
-  facets?: unknown
-}
+  products?: HttpTypes.StoreProduct[];
+  count?: number;
+  page?: number;
+  limit?: number;
+  totalPages?: number;
+  facets?: unknown;
+};
diff --git a/apps/herbatika/src/lib/storefront/storefront-config.ts b/apps/herbatika/src/lib/storefront/storefront-config.ts
index 50e9f99db3..0817bc974d 100644
--- a/apps/herbatika/src/lib/storefront/storefront-config.ts
+++ b/apps/herbatika/src/lib/storefront/storefront-config.ts
@@ -1,57 +1,59 @@
-import type { HttpTypes } from "@medusajs/types"
-import { createAuthQueryKeys } from "@techsio/storefront-data/auth/query-keys"
-import type { MedusaCartServiceConfig } from "@techsio/storefront-data/cart/medusa-service"
-import { createCartQueryKeys } from "@techsio/storefront-data/cart/query-keys"
+import type { HttpTypes } from "@medusajs/types";
+import { createAuthQueryKeys } from "@techsio/storefront-data/auth/query-keys";
+import type { MedusaCartServiceConfig } from "@techsio/storefront-data/cart/medusa-service";
+import { createCartQueryKeys } from "@techsio/storefront-data/cart/query-keys";
 import type {
   MedusaCatalogListInput,
   MedusaCatalogServiceConfig,
-} from "@techsio/storefront-data/catalog/medusa-service"
-import { createCatalogQueryKeys } from "@techsio/storefront-data/catalog/query-keys"
+} from "@techsio/storefront-data/catalog/medusa-service";
+import { createCatalogQueryKeys } from "@techsio/storefront-data/catalog/query-keys";
 import type {
   MedusaCategoryDetailInput,
   MedusaCategoryListInput,
   MedusaCategoryServiceConfig,
-} from "@techsio/storefront-data/categories/medusa-service"
-import { createCategoryQueryKeys } from "@techsio/storefront-data/categories/query-keys"
-import type { MedusaCheckoutServiceConfig } from "@techsio/storefront-data/checkout/medusa-service"
-import { createCheckoutQueryKeys } from "@techsio/storefront-data/checkout/query-keys"
-import type { MedusaCustomerListInput } from "@techsio/storefront-data/customers/medusa-service"
-import { createCustomerQueryKeys } from "@techsio/storefront-data/customers/query-keys"
+} from "@techsio/storefront-data/categories/medusa-service";
+import { createCategoryQueryKeys } from "@techsio/storefront-data/categories/query-keys";
+import type { MedusaCheckoutServiceConfig } from "@techsio/storefront-data/checkout/medusa-service";
+import { createCheckoutQueryKeys } from "@techsio/storefront-data/checkout/query-keys";
+import type { MedusaCustomerListInput } from "@techsio/storefront-data/customers/medusa-service";
+import { createCustomerQueryKeys } from "@techsio/storefront-data/customers/query-keys";
 import type {
   MedusaOrderDetailInput,
   MedusaOrderListInput,
   MedusaOrderServiceConfig,
-} from "@techsio/storefront-data/orders/medusa-service"
-import { createOrderQueryKeys } from "@techsio/storefront-data/orders/query-keys"
-import type {
-  MedusaProductListDetailKeyInput,
-  MedusaProductListListKeyInput,
-} from "@techsio/storefront-data/product-lists/medusa-service"
-import { createProductListQueryKeys } from "@techsio/storefront-data/product-lists/query-keys"
+} from "@techsio/storefront-data/orders/medusa-service";
+import { createOrderQueryKeys } from "@techsio/storefront-data/orders/query-keys";
 import type {
   MedusaProductDetailInput,
   MedusaProductListInput,
   MedusaProductServiceConfig,
-} from "@techsio/storefront-data/products/medusa-service"
-import { createProductQueryKeys } from "@techsio/storefront-data/products/query-keys"
+} from "@techsio/storefront-data/products/medusa-service";
+import { createProductQueryKeys } from "@techsio/storefront-data/products/query-keys";
+import type {
+  MedusaProductListDetailKeyInput,
+  MedusaProductListListKeyInput,
+} from "@techsio/storefront-data/product-lists/medusa-service";
+import { createProductListQueryKeys } from "@techsio/storefront-data/product-lists/query-keys";
 import type {
   MedusaRegionDetailInput,
   MedusaRegionListInput,
-} from "@techsio/storefront-data/regions/medusa-service"
-import { createRegionQueryKeys } from "@techsio/storefront-data/regions/query-keys"
-import { buildHerbatikaPaymentSessionData } from "./payment-session"
+} from "@techsio/storefront-data/regions/medusa-service";
+import { createRegionQueryKeys } from "@techsio/storefront-data/regions/query-keys";
+import type { MedusaProductReviewListInput } from "@techsio/storefront-data/reviews/medusa-service";
+import { createProductReviewQueryKeys } from "@techsio/storefront-data/reviews/query-keys";
+import { buildHerbatikaPaymentSessionData } from "./payment-session";
 import {
   PRODUCT_CARD_FIELDS,
   PRODUCT_DETAIL_FIELDS,
-} from "./product-query-config"
-import { STOREFRONT_QUERY_KEY_NAMESPACE } from "./query-keys"
+} from "./product-query-config";
+import { STOREFRONT_QUERY_KEY_NAMESPACE } from "./query-keys";
 
 export const CATEGORY_FIELDS =
-  "id,name,handle,parent_category_id,rank,is_active,category_children"
+  "id,name,handle,parent_category_id,rank,is_active,category_children";
 
-export const CATALOG_DEFAULT_LIMIT = 24
-export const CATALOG_DEFAULT_SORT = "recommended"
-export const ORDER_DEFAULT_SORT = "-created_at"
+export const CATALOG_DEFAULT_LIMIT = 24;
+export const CATALOG_DEFAULT_SORT = "recommended";
+export const ORDER_DEFAULT_SORT = "-created_at";
 
 export const CART_FIELDS = [
   "id",
@@ -97,7 +99,7 @@ export const CART_FIELDS = [
   "shipping_methods.*",
   "shipping_methods.tax_lines.*",
   "shipping_methods.adjustments.*",
-].join(",")
+].join(",");
 
 export const ORDER_LIST_FIELDS = [
   "id",
@@ -112,7 +114,7 @@ export const ORDER_LIST_FIELDS = [
   "item_total",
   "items.id",
   "items.quantity",
-].join(",")
+].join(",");
 
 export const ORDER_DETAIL_FIELDS = [
   "id",
@@ -148,17 +150,17 @@ export const ORDER_DETAIL_FIELDS = [
   "payment_collections.*",
   "*items",
   "items.tax_lines.*",
-].join(",")
+].join(",");
 
 export const storefrontQueryKeys = {
   auth: createAuthQueryKeys(STOREFRONT_QUERY_KEY_NAMESPACE),
   cart: createCartQueryKeys(STOREFRONT_QUERY_KEY_NAMESPACE),
   checkout: createCheckoutQueryKeys(STOREFRONT_QUERY_KEY_NAMESPACE),
   customers: createCustomerQueryKeys<MedusaCustomerListInput>(
-    STOREFRONT_QUERY_KEY_NAMESPACE
+    STOREFRONT_QUERY_KEY_NAMESPACE,
   ),
   orders: createOrderQueryKeys<MedusaOrderListInput, MedusaOrderDetailInput>(
-    STOREFRONT_QUERY_KEY_NAMESPACE
+    STOREFRONT_QUERY_KEY_NAMESPACE,
   ),
   products: createProductQueryKeys<
     MedusaProductListInput,
@@ -168,6 +170,9 @@ export const storefrontQueryKeys = {
     MedusaProductListListKeyInput,
     MedusaProductListDetailKeyInput
   >(STOREFRONT_QUERY_KEY_NAMESPACE),
+  reviews: createProductReviewQueryKeys<MedusaProductReviewListInput>(
+    STOREFRONT_QUERY_KEY_NAMESPACE,
+  ),
   regions: createRegionQueryKeys<
     MedusaRegionListInput,
     MedusaRegionDetailInput
@@ -177,9 +182,9 @@ export const storefrontQueryKeys = {
     MedusaCategoryDetailInput
   >(STOREFRONT_QUERY_KEY_NAMESPACE),
   catalog: createCatalogQueryKeys<MedusaCatalogListInput>(
-    STOREFRONT_QUERY_KEY_NAMESPACE
+    STOREFRONT_QUERY_KEY_NAMESPACE,
   ),
-}
+};
 
 export const storefrontProductServiceConfig: MedusaProductServiceConfig<
   HttpTypes.StoreProduct,
@@ -188,7 +193,7 @@ export const storefrontProductServiceConfig: MedusaProductServiceConfig<
 > = {
   defaultListFields: PRODUCT_CARD_FIELDS,
   defaultDetailFields: PRODUCT_DETAIL_FIELDS,
-}
+};
 
 export const storefrontCategoryServiceConfig: MedusaCategoryServiceConfig<
   HttpTypes.StoreProductCategory,
@@ -197,7 +202,7 @@ export const storefrontCategoryServiceConfig: MedusaCategoryServiceConfig<
 > = {
   defaultListFields: CATEGORY_FIELDS,
   defaultDetailFields: CATEGORY_FIELDS,
-}
+};
 
 export const storefrontCatalogServiceConfig: MedusaCatalogServiceConfig<
   HttpTypes.StoreProduct,
@@ -206,20 +211,20 @@ export const storefrontCatalogServiceConfig: MedusaCatalogServiceConfig<
 > = {
   defaultLimit: CATALOG_DEFAULT_LIMIT,
   defaultSort: CATALOG_DEFAULT_SORT,
-}
+};
 
 export const storefrontOrderServiceConfig: MedusaOrderServiceConfig = {
   defaultListFields: ORDER_LIST_FIELDS,
   defaultDetailFields: ORDER_DETAIL_FIELDS,
   defaultOrder: ORDER_DEFAULT_SORT,
   returnNullOnNotFound: true,
-}
+};
 
 export const storefrontCartServiceConfig: MedusaCartServiceConfig = {
   cartFields: CART_FIELDS,
-}
+};
 
 export const storefrontCheckoutServiceConfig: MedusaCheckoutServiceConfig = {
   cartFields: CART_FIELDS,
   buildPaymentSessionData: buildHerbatikaPaymentSessionData,
-}
+};
diff --git a/apps/herbatika/src/lib/storefront/storefront-core-definition.ts b/apps/herbatika/src/lib/storefront/storefront-core-definition.ts
index f8ccfb2f6e..e53f2f312b 100644
--- a/apps/herbatika/src/lib/storefront/storefront-core-definition.ts
+++ b/apps/herbatika/src/lib/storefront/storefront-core-definition.ts
@@ -38,6 +38,9 @@ export const storefrontCoreDefinition = {
   productLists: {
     queryKeys: storefrontQueryKeys.productLists,
   },
+  reviews: {
+    queryKeys: storefrontQueryKeys.reviews,
+  },
   orders: {
     serviceConfig: storefrontOrderServiceConfig,
     hooks: {
diff --git a/apps/herbatika/src/lib/storefront/storefront-server.ts b/apps/herbatika/src/lib/storefront/storefront-server.ts
index 952b7c065b..5a68e2969a 100644
--- a/apps/herbatika/src/lib/storefront/storefront-server.ts
+++ b/apps/herbatika/src/lib/storefront/storefront-server.ts
@@ -1,26 +1,34 @@
-import "server-only"
+import "server-only";
 
-import type { HttpTypes } from "@medusajs/types"
-import type { QueryClient } from "@tanstack/react-query"
-import type { CatalogFacets } from "@techsio/storefront-data/catalog/types"
+import type { HttpTypes } from "@medusajs/types";
+import type { QueryClient } from "@tanstack/react-query";
+import type { MedusaCatalogListInput } from "@techsio/storefront-data/catalog/medusa-service";
+import type { CatalogFacets } from "@techsio/storefront-data/catalog/types";
 import type {
   MedusaCategoryDetailInput,
   MedusaCategoryListInput,
-} from "@techsio/storefront-data/categories/medusa-service"
-import { createMedusaStorefrontServerReadPreset } from "@techsio/storefront-data/medusa/server-read"
+} from "@techsio/storefront-data/categories/medusa-service";
+import {
+  createMedusaStorefrontServerReadPreset,
+} from "@techsio/storefront-data/medusa/server-read";
 import type {
   MedusaProductDetailInput,
   MedusaProductListInput,
-} from "@techsio/storefront-data/products/medusa-service"
-import { storefrontSdk } from "./sdk"
+} from "@techsio/storefront-data/products/medusa-service";
+import type {
+  MedusaRegionDetailInput,
+  MedusaRegionListInput,
+} from "@techsio/storefront-data/regions/medusa-service";
+import type { MedusaProductReviewListInput } from "@techsio/storefront-data/reviews/medusa-service";
+import { storefrontSdk } from "./sdk";
+import { storefrontCoreDefinition } from "./storefront-core-definition";
 import type {
-  CatalogListParams,
   CategoryListParams,
+  CatalogListParams,
   ProductDetailParams,
   ProductListParams,
   RegionListParams,
-} from "./ssr/types"
-import { storefrontCoreDefinition } from "./storefront-core-definition"
+} from "./ssr/types";
 
 const storefrontServerRead = createMedusaStorefrontServerReadPreset<
   HttpTypes.StoreProduct,
@@ -35,20 +43,23 @@ const storefrontServerRead = createMedusaStorefrontServerReadPreset<
   products: {
     serviceConfig: storefrontCoreDefinition.products.serviceConfig,
     hooks: {
-      buildListParams: storefrontCoreDefinition.products.hooks
-        .buildListParams as (
-        input: MedusaProductListInput
-      ) => ProductListParams,
-      buildDetailParams: storefrontCoreDefinition.products.hooks
-        .buildDetailParams as (
-        input: MedusaProductDetailInput
-      ) => ProductDetailParams,
+      buildListParams:
+        storefrontCoreDefinition.products.hooks.buildListParams as (
+          input: MedusaProductListInput,
+        ) => ProductListParams,
+      buildDetailParams:
+        storefrontCoreDefinition.products.hooks.buildDetailParams as (
+          input: MedusaProductDetailInput,
+        ) => ProductDetailParams,
     },
     queryKeys: storefrontCoreDefinition.queryKeys.products,
   },
   productLists: {
     queryKeys: storefrontCoreDefinition.productLists.queryKeys,
   },
+  reviews: {
+    queryKeys: storefrontCoreDefinition.reviews.queryKeys,
+  },
   orders: {
     serviceConfig: storefrontCoreDefinition.orders.serviceConfig,
     hooks: storefrontCoreDefinition.orders.hooks,
@@ -60,14 +71,14 @@ const storefrontServerRead = createMedusaStorefrontServerReadPreset<
   categories: {
     serviceConfig: storefrontCoreDefinition.categories.serviceConfig,
     hooks: {
-      buildListParams: storefrontCoreDefinition.categories.hooks
-        .buildListParams as (
-        input: MedusaCategoryListInput
-      ) => CategoryListParams,
-      buildDetailParams: storefrontCoreDefinition.categories.hooks
-        .buildDetailParams as (
-        input: MedusaCategoryDetailInput
-      ) => MedusaCategoryDetailInput,
+      buildListParams:
+        storefrontCoreDefinition.categories.hooks.buildListParams as (
+          input: MedusaCategoryListInput,
+        ) => CategoryListParams,
+      buildDetailParams:
+        storefrontCoreDefinition.categories.hooks.buildDetailParams as (
+          input: MedusaCategoryDetailInput,
+        ) => MedusaCategoryDetailInput,
     },
     queryKeys: storefrontCoreDefinition.queryKeys.categories,
   },
@@ -75,52 +86,62 @@ const storefrontServerRead = createMedusaStorefrontServerReadPreset<
     serviceConfig: storefrontCoreDefinition.catalog.serviceConfig,
     queryKeys: storefrontCoreDefinition.queryKeys.catalog,
   },
-})
+});
 
 export const fetchServerRegions = (
   queryClient: QueryClient,
-  listParams: RegionListParams
+  listParams: RegionListParams,
 ) =>
   queryClient.fetchQuery(
-    storefrontServerRead.queries.regions.getListQueryOptions(listParams)
-  )
+    storefrontServerRead.queries.regions.getListQueryOptions(listParams),
+  );
 
 export const prefetchServerProducts = (
   queryClient: QueryClient,
-  listParams: ProductListParams
+  listParams: ProductListParams,
 ) =>
   queryClient.prefetchQuery(
-    storefrontServerRead.queries.products.getListQueryOptions(listParams)
-  )
+    storefrontServerRead.queries.products.getListQueryOptions(listParams),
+  );
 
 export const fetchServerProducts = (
   queryClient: QueryClient,
-  listParams: ProductListParams
+  listParams: ProductListParams,
 ) =>
   queryClient.fetchQuery(
-    storefrontServerRead.queries.products.getListQueryOptions(listParams)
-  )
+    storefrontServerRead.queries.products.getListQueryOptions(listParams),
+  );
 
 export const fetchServerProduct = (
   queryClient: QueryClient,
-  detailParams: ProductDetailParams
+  detailParams: ProductDetailParams,
 ) =>
   queryClient.fetchQuery(
-    storefrontServerRead.queries.products.getDetailQueryOptions(detailParams)
-  )
+    storefrontServerRead.queries.products.getDetailQueryOptions(detailParams),
+  );
+
+export const prefetchServerProductReviews = (
+  queryClient: QueryClient,
+  listParams: MedusaProductReviewListInput,
+) =>
+  queryClient.prefetchQuery(
+    storefrontServerRead.queries.reviews.getProductReviewsQueryOptions(
+      listParams,
+    ),
+  );
 
 export const fetchServerCategories = (
   queryClient: QueryClient,
-  listParams: CategoryListParams
+  listParams: CategoryListParams,
 ) =>
   queryClient.fetchQuery(
-    storefrontServerRead.queries.categories.getListQueryOptions(listParams)
-  )
+    storefrontServerRead.queries.categories.getListQueryOptions(listParams),
+  );
 
 export const prefetchServerCatalogProducts = (
   queryClient: QueryClient,
-  listParams: CatalogListParams
+  listParams: CatalogListParams,
 ) =>
   queryClient.prefetchQuery(
-    storefrontServerRead.queries.catalog.getListQueryOptions(listParams)
-  )
+    storefrontServerRead.queries.catalog.getListQueryOptions(listParams),
+  );
diff --git a/apps/herbatika/src/lib/storefront/storefront.ts b/apps/herbatika/src/lib/storefront/storefront.ts
index a07cb39813..406103165e 100644
--- a/apps/herbatika/src/lib/storefront/storefront.ts
+++ b/apps/herbatika/src/lib/storefront/storefront.ts
@@ -34,6 +34,9 @@ export const storefront = createMedusaStorefrontPreset<
   productLists: {
     queryKeys: storefrontDefinition.productLists.queryKeys,
   },
+  reviews: {
+    queryKeys: storefrontDefinition.reviews.queryKeys,
+  },
   orders: {
     serviceConfig: storefrontDefinition.orders.serviceConfig,
     queryKeys: storefrontDefinition.queryKeys.orders,
diff --git a/apps/herbatika/src/styles/tokens/_herbatika-semantic.css b/apps/herbatika/src/styles/tokens/_herbatika-semantic.css
index 653b1db03b..3fa2abd701 100644
--- a/apps/herbatika/src/styles/tokens/_herbatika-semantic.css
+++ b/apps/herbatika/src/styles/tokens/_herbatika-semantic.css
@@ -26,6 +26,7 @@
   --color-herbatika-fg-tertiary: oklch(0.5517 0.0138 285.94);
   --color-herbatika-tip: oklch(0.8056 0.0919 45.13);
   --color-herbatika-new: oklch(0.7978 0.0954 121.56);
+  --color-herbatika-slate: var(--color-slate-300);
 
   /* Brand semantics */
   --color-primary: var(--color-herbatika-primary);
diff --git a/apps/herbatika/src/styles/tokens/components/atoms/_herbatika-rating.css b/apps/herbatika/src/styles/tokens/components/atoms/_herbatika-rating.css
index 5cc1025439..707a777f10 100644
--- a/apps/herbatika/src/styles/tokens/components/atoms/_herbatika-rating.css
+++ b/apps/herbatika/src/styles/tokens/components/atoms/_herbatika-rating.css
@@ -4,4 +4,10 @@
 
   --text-rating-md: var(--text-icon-sm);
   --text-rating-lg: var(--text-icon-md);
+
+  --color-rating-fg-base: var(--color-herbatika-slate);
+}
+
+@utility rating-star-fill {
+  inline-size: var(--star-fill);
 }
diff --git a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-accordion.css b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-accordion.css
index d1320e8ee0..7b10dc4a00 100644
--- a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-accordion.css
+++ b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-accordion.css
@@ -14,7 +14,7 @@
   --font-weight-accordion-title: var(--font-weight-header-nav);
   --text-accordion-title-md: var(--text-md);
   --padding-accordion-content-md: 0;
-  --padding-accordion-icon: var(--spacing-350);
+  --padding-accordion-icon-right: var(--spacing-350);
 }
 
 :where([data-herbatika-mobile-menu-accordion])
diff --git a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-breadcrumb.css b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-breadcrumb.css
index 7cf95a7c4e..76d43ba2ca 100644
--- a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-breadcrumb.css
+++ b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-breadcrumb.css
@@ -1,16 +1,15 @@
 @theme static {
   --color-breadcrumb-bg: var(--color-base);
-  --color-breadcrumb-item-fg: var(--color-fg-accent);
-  --color-breadcrumb-link-fg: var(--color-fg-accent);
-  --color-breadcrumb-list-fg: var(--color-fg-accent);
-  --color-breadcrumb-separator-fg: var(--color-fg-accent);
-  --color-breadcrumb-current-link-fg: var(--color-fg-accent);
+  --color-breadcrumb-item: var(--color-fg-accent);
+  --color-breadcrumb-item-current: var(--color-fg-accent);
+  --color-breadcrumb-item-hover: var(--color-fg-accent);
+  --color-breadcrumb-separator: var(--color-fg-accent);
 
   --text-breadcrumb-icon-md: var(--text-icon-sm);
   --text-breadcrumb-md: var(--text-xs);
   --text-breadcrumb-separator-icon-md: var(--text-icon-sm);
 
-  --gap-breadcrumb-link-md: var(--spacing-200);
-  --gap-breadcrumb-list-md: var(--spacing-200);
-  --gap-breadcrumb-separator-md: var(--spacing-250);
+  --spacing-breadcrumb-link-md: var(--spacing-200);
+  --spacing-breadcrumb-md: var(--spacing-200);
+  --spacing-breadcrumb-separator-md: var(--spacing-250);
 }
diff --git a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-carousel.css b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-carousel.css
index 3a4e441abf..d5c1d5f84a 100644
--- a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-carousel.css
+++ b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-carousel.css
@@ -1,7 +1,7 @@
 @theme static {
-  --color-carousel-trigger-bg: white;
+  --color-carousel-trigger-bg-base: white;
   --color-carousel-trigger-bg-hover: var(--color-surface);
-  --color-carousel-trigger-fg: var(--color-primary);
+  --color-carousel-trigger-fg-base: var(--color-primary);
   --color-carousel-trigger-fg-hover: var(--color-primary);
   --color-carousel-trigger-fg-active: white;
   --color-carousel-control-bg: color-mix(
@@ -9,22 +9,22 @@
     var(--color-surface) 88%,
     transparent
   );
-  --color-carousel-indicator-bg: color-mix(
+  --color-carousel-indicator-bg-base: color-mix(
     in srgb,
     var(--color-border-primary) 100%,
     transparent
   );
   --color-carousel-indicator-bg-active: var(--color-primary);
-  --color-carousel-indicator-border: transparent;
+  --color-carousel-indicator-border-base: transparent;
   --color-carousel-indicator-border-active: transparent;
 
   --padding-carousel-control: var(--spacing-200);
-  --gap-carousel-control: var(--spacing-150);
+  --spacing-carousel-control: var(--spacing-150);
   --padding-carousel-trigger: 0 0;
-  --gap-carousel-indicator: var(--spacing-150);
+  --spacing-carousel-indicator: var(--spacing-150);
   --width-carousel-indicator: var(--spacing-200);
 
-  --text-carousel-trigger-size: var(--text-2xl);
+  --text-carousel-trigger: var(--text-2xl);
   --radius-carousel: var(--radius-md);
   --radius-carousel-indicator: 999px;
   --shadow-carousel-trigger: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
diff --git a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-dialog.css b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-dialog.css
index ad61d61f57..b0a765bc01 100644
--- a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-dialog.css
+++ b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-dialog.css
@@ -1,10 +1,10 @@
 :where([data-herbatika-mobile-menu-dialog-root]) {
   --herbatika-mobile-menu-top: var(--height-header-mobile);
-  --color-dialog-backdrop-bg: transparent;
+  --color-dialog-backdrop-bg-modal: transparent;
   --color-dialog-content-bg: var(--color-primary);
   --color-dialog-content-border: transparent;
   --padding-dialog-content: 0;
-  --gap-dialog-content: 0;
+  --spacing-dialog-content: 0;
   --border-width-dialog: 0;
   --shadow-dialog-content: none;
 }
diff --git a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-product-card.css b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-product-card.css
index b414c57d85..27a13a6d53 100644
--- a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-product-card.css
+++ b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-product-card.css
@@ -1,11 +1,12 @@
 @theme static {
-  --color-product-card-button-cart-bg: var(--color-primary);
+  --color-product-card-button-cart-bg-base: var(--color-primary);
   --color-product-card-button-cart-bg-hover: var(--color-primary-hover);
   --color-product-card-button-cart-fg: var(--color-fg-reverse);
 
   --spacing-product-card-padding: var(--spacing-500);
   --spacing-product-card-col-layout: var(--spacing-450);
-  --spacing-product-card-box: var(--spacing-100);
+  --spacing-product-card-actions: var(--spacing-100);
+  --spacing-product-card-badges: var(--spacing-100);
 
   --text-product-card-name-size: var(--text-lg);
   --text-product-card-price-size: var(--text-xl);
diff --git a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-radio-card.css b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-radio-card.css
index 6c51308ac1..f3bdb669dd 100644
--- a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-radio-card.css
+++ b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-radio-card.css
@@ -1,12 +1,12 @@
 @theme static {
-  --gap-radio-card-root-sm: var(--spacing-150);
-  --gap-radio-card-item-control-sm: var(--spacing-200);
+  --spacing-radio-card-stack-sm: var(--spacing-150);
+  --spacing-radio-card-item-control-sm: var(--spacing-200);
 
-  --padding-radio-card-item-addon-sm: var(--spacing-500);
+  --padding-radio-card-addon-sm: var(--spacing-500);
   --padding-radio-card-item-control-sm: var(--spacing-400);
-  --spacing-radio-card-indicator-mark-sm: 0.75rem;
+  --size-radio-card-indicator-mark-sm: 0.75rem;
 
-  --gap-radio-card-item-control-md: var(--spacing-500);
+  --spacing-radio-card-item-control-md: var(--spacing-500);
   --padding-radio-card-item-control-md: var(--spacing-400);
 
   --text-radio-card-item-sm: var(--text-sm);
diff --git a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-radio-group.css b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-radio-group.css
index 16a63d98e1..a775c0e489 100644
--- a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-radio-group.css
+++ b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-radio-group.css
@@ -1,11 +1,10 @@
 @theme inline {
-  --color-radio-group-item-control-bg-hover: var(--color-highlight);
-  --color-radio-group-item-control-border-hover: var(--color-border-primary);
-  --color-radio-group-item-control-border-subtle-checked: var(--color-primary);
-  --color-radio-group-item-control-border-hover: var(--color-border-primary);
+  --color-radio-group-item-bg-hover: var(--color-highlight);
+  --color-radio-group-item-border-hover: var(--color-border-primary);
+  --color-radio-group-item-border-subtle-checked: var(--color-primary);
 
-  --gap-radio-group-items-horizontal-sm: var(--spacing-500);
+  --spacing-radio-group-stack-horizontal-sm: var(--spacing-500);
 
-  --spacing-radio-group-control-sm: 0.875rem;
-  --spacing-radio-group-indicator-sm: 0.75rem;
+  --size-radio-group-control-sm: 0.875rem;
+  --size-radio-group-indicator-sm: 0.75rem;
 }
diff --git a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-search-form.css b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-search-form.css
index 29c766e615..223fdbb0d4 100644
--- a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-search-form.css
+++ b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-search-form.css
@@ -1,10 +1,10 @@
 @theme static {
   --radius-search-form-md: 0.625rem;
-  --padding-search-form-clear-button: var(--spacing-200);
+  --spacing-search-form-clear-button: var(--spacing-200);
 
   --color-form-control-bg: var(--color-surface);
   --color-form-control-border: var(--color-border-secondary);
   --color-form-control-border-hover: var(--color-border-primary);
   --color-form-control-border-focus: var(--color-primary);
-  --color-form-control-placeholder: var(--color-fg-placeholder);
+  --color-form-control-fg-placeholder: var(--color-fg-placeholder);
 }
diff --git a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-select.css b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-select.css
index b7e69e1489..8edbabcc09 100644
--- a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-select.css
+++ b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-select.css
@@ -1,5 +1,5 @@
 @theme static {
-  --gap-select-root: var(--spacing-100);
+  --spacing-select: var(--spacing-100);
   --radius-select: var(--radius-xs);
   --radius-select-lg: var(--radius-xs);
   --radius-select-md: var(--radius-xs);
@@ -15,6 +15,6 @@
   --color-select-item-bg-selected: oklch(
     from var(--color-highlight) calc(l - 0.03) c h
   );
-  --color-select-item-selected-fg: var(--color-primary);
+  --color-select-item-fg-selected: var(--color-primary);
   --color-select-indicator: var(--color-primary);
 }
diff --git a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-steps.css b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-steps.css
index 613cd278c0..0b7803f750 100644
--- a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-steps.css
+++ b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-steps.css
@@ -4,7 +4,7 @@
   --color-steps-indicator-border: transparent;
   --color-steps-indicator-border-hover: transparent;
   --color-steps-progress-bg: var(--color-red-600);
-  --spacing-steps-indicator-sm: var(--spacing-700);
+  --size-steps-indicator-sm: var(--spacing-700);
 
   --color-steps-chevron: oklch(0.7668 0 0);
 }
diff --git a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-tabs.css b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-tabs.css
index 9d15a9a1fd..ce343bc31b 100644
--- a/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-tabs.css
+++ b/apps/herbatika/src/styles/tokens/components/molecules/_herbatika-tabs.css
@@ -1,8 +1,8 @@
 @theme static {
   --color-tabs-bg: var(--color-base);
   --color-tabs-trigger-bg: var(--color-surface);
-  --color-tabs-border: var(--color-surface);
-  --color-tabs-trigger-fg: oklch(0.5213 0.0343 223.45);
+  --color-tabs-border-base: var(--color-surface);
+  --color-tabs-trigger-fg-base: oklch(0.5213 0.0343 223.45);
   --text-tabs-trigger-md: var(--text-lg);
   --padding-tabs-trigger-md: var(--spacing-500) var(--spacing-200);
   --color-product-list-tabs-border: var(--color-base);
diff --git a/libs/storefront-data/package.json b/libs/storefront-data/package.json
index 43649e901d..b31b6708bd 100644
--- a/libs/storefront-data/package.json
+++ b/libs/storefront-data/package.json
@@ -258,6 +258,26 @@
       "types": "./dist/src/product-lists/utils.d.ts",
       "import": "./dist/product-lists/utils.js"
     },
+    "./reviews/hooks": {
+      "types": "./dist/src/reviews/hooks.d.ts",
+      "import": "./dist/reviews/hooks.js"
+    },
+    "./reviews/medusa-service": {
+      "types": "./dist/src/reviews/medusa-service.d.ts",
+      "import": "./dist/reviews/medusa-service.js"
+    },
+    "./reviews/query-keys": {
+      "types": "./dist/src/reviews/query-keys.d.ts",
+      "import": "./dist/reviews/query-keys.js"
+    },
+    "./reviews/query-options": {
+      "types": "./dist/src/reviews/query-options.d.ts",
+      "import": "./dist/reviews/query-options.js"
+    },
+    "./reviews/types": {
+      "types": "./dist/src/reviews/types.d.ts",
+      "import": "./dist/reviews/types.js"
+    },
     "./regions/hooks": {
       "types": "./dist/src/regions/hooks.d.ts",
       "import": "./dist/regions/hooks.js"
diff --git a/libs/storefront-data/src/medusa/foundation.ts b/libs/storefront-data/src/medusa/foundation.ts
index 8d7e8a5915..139cfb5f7e 100644
--- a/libs/storefront-data/src/medusa/foundation.ts
+++ b/libs/storefront-data/src/medusa/foundation.ts
@@ -13,6 +13,11 @@ import { createCategoryQueryKeys } from "../categories/query-keys"
 import type { CategoryQueryKeys } from "../categories/types"
 import { createCheckoutQueryKeys } from "../checkout/query-keys"
 import type { CheckoutQueryKeys } from "../checkout/types"
+import type {
+  MedusaProductReviewListInput,
+} from "../reviews/medusa-service"
+import { createProductReviewQueryKeys } from "../reviews/query-keys"
+import type { ProductReviewQueryKeys } from "../reviews/types"
 import type {
   MedusaCollectionDetailInput,
   MedusaCollectionListInput,
@@ -70,6 +75,7 @@ export type MedusaStorefrontQueryKeys = {
     MedusaCollectionDetailInput
   >
   catalog: CatalogQueryKeys<MedusaCatalogListInput>
+  reviews: ProductReviewQueryKeys<MedusaProductReviewListInput>
 }
 
 export type MedusaStorefrontFoundationConfig = {
@@ -109,6 +115,9 @@ export function createMedusaStorefrontQueryKeys(
       MedusaCollectionDetailInput
     >(namespace),
     catalog: createCatalogQueryKeys<MedusaCatalogListInput>(namespace),
+    reviews: createProductReviewQueryKeys<MedusaProductReviewListInput>(
+      namespace
+    ),
   }
 }
 
diff --git a/libs/storefront-data/src/medusa/preset.ts b/libs/storefront-data/src/medusa/preset.ts
index ac2855fd40..dc2d6c7342 100644
--- a/libs/storefront-data/src/medusa/preset.ts
+++ b/libs/storefront-data/src/medusa/preset.ts
@@ -13,6 +13,7 @@ import {
   type MedusaUpdateCustomerData,
 } from "../auth/medusa-service"
 import type { AuthQueryKeys, AuthService } from "../auth/types"
+import type { ActiveCartQueryKeyMatcher } from "../shared/cart-cache-sync"
 import {
   type CartHooks,
   type CreateCartHooksConfig,
@@ -110,6 +111,18 @@ import type {
   MedusaOrderServiceConfig,
 } from "../orders/medusa-service"
 import type { OrderQueryKeys, OrderService } from "../orders/types"
+import {
+  type CreateProductHooksConfig,
+  createProductHooks,
+  type ProductHooks,
+} from "../products/hooks"
+import type {
+  createMedusaProductService,
+  MedusaProductDetailInput,
+  MedusaProductListInput,
+  MedusaProductServiceConfig,
+} from "../products/medusa-service"
+import type { ProductQueryKeys } from "../products/types"
 import {
   type CreateProductListHooksConfig,
   createProductListHooks,
@@ -131,17 +144,19 @@ import type {
   ProductListService,
 } from "../product-lists/types"
 import {
-  type CreateProductHooksConfig,
-  createProductHooks,
-  type ProductHooks,
-} from "../products/hooks"
+  type CreateProductReviewHooksConfig,
+  createProductReviewHooks,
+  type ProductReviewHooks,
+} from "../reviews/hooks"
 import type {
-  createMedusaProductService,
-  MedusaProductDetailInput,
-  MedusaProductListInput,
-  MedusaProductServiceConfig,
-} from "../products/medusa-service"
-import type { ProductQueryKeys } from "../products/types"
+  MedusaProductReviewListInput,
+  MedusaProductReviewServiceConfig,
+} from "../reviews/medusa-service"
+import type {
+  ProductReviewQueryKeys,
+  ProductReviewService,
+  ReviewBase,
+} from "../reviews/types"
 import {
   type CreateRegionHooksConfig,
   createRegionHooks,
@@ -154,7 +169,6 @@ import type {
 } from "../regions/medusa-service"
 import type { RegionQueryKeys } from "../regions/types"
 import type { CacheConfig } from "../shared/cache-config"
-import type { ActiveCartQueryKeyMatcher } from "../shared/cart-cache-sync"
 import type { QueryNamespace } from "../shared/query-keys"
 import { createMedusaCartFlow } from "./cart-flow"
 import { createMedusaCheckoutFlow } from "./checkout-flow"
@@ -261,6 +275,14 @@ type MedusaProductListHooksConfig = Omit<
   "cartQueryKeys" | "cartStorage" | "isActiveCartQueryKey"
 >
 
+type MedusaProductReviewHooksConfig = OmitFactoryConfig<
+  CreateProductReviewHooksConfig<
+    ReviewBase,
+    MedusaProductReviewListInput,
+    MedusaProductReviewListInput
+  >
+>
+
 type MedusaOrderHooksConfig = OmitFactoryConfig<
   CreateOrderHooksConfig<
     HttpTypes.StoreOrder,
@@ -285,6 +307,11 @@ type MedusaProductListService = ProductListService<
   MedusaProductListDetailInput
 >
 
+type MedusaProductReviewService = ProductReviewService<
+  ReviewBase,
+  MedusaProductReviewListInput
+>
+
 type MedusaCustomerAddressUpdateHookInput = MedusaCustomerAddressUpdateInput & {
   addressId?: string
 }
@@ -445,6 +472,12 @@ type CreateMedusaStorefrontPresetConfigBase<
       MedusaProductListDetailKeyInput
     >
   }
+  reviews?: {
+    service?: MedusaProductReviewService
+    serviceConfig?: MedusaProductReviewServiceConfig<ReviewBase>
+    hooks?: MedusaProductReviewHooksConfig
+    queryKeys?: ProductReviewQueryKeys<MedusaProductReviewListInput>
+  }
   orders?: {
     service?: MedusaOrderService
     serviceConfig?: MedusaOrderServiceConfig
@@ -530,6 +563,7 @@ type MedusaStorefrontServices<
     >
   >
   productLists: MedusaProductListService
+  reviews: MedusaProductReviewService
   orders: MedusaOrderService
   customers: MedusaCustomerService
   regions: ReturnType<typeof createMedusaRegionService>
@@ -609,6 +643,11 @@ type MedusaStorefrontHooks<
     MedusaProductListListHookInput,
     MedusaProductListDetailHookInput
   >
+  reviews: ProductReviewHooks<
+    ReviewBase,
+    MedusaProductReviewListInput,
+    MedusaProductReviewListInput
+  >
   orders: OrderHooks<
     HttpTypes.StoreOrder,
     MedusaOrderListHookInput,
@@ -707,7 +746,8 @@ const createDefaultCatalogFacets = (): CatalogFacets => ({
 export const createMedusaStorefrontQueryKeys =
   createMedusaStorefrontQueryKeysFromFoundation
 
-export type MedusaStorefrontQueryKeys = MedusaStorefrontQueryKeysFromFoundation
+export type MedusaStorefrontQueryKeys =
+  MedusaStorefrontQueryKeysFromFoundation
 
 /**
  * Create a complete Medusa storefront data preset with shared namespace/cache config.
@@ -750,11 +790,8 @@ export function createMedusaStorefrontPreset<
   TCustomerAddressCreateInput,
   TCustomerAddressUpdateInput
 > {
-  const {
-    namespace,
-    cacheConfig: resolvedCacheConfig,
-    defaultQueryKeys,
-  } = resolveMedusaStorefrontFoundation(config)
+  const { namespace, cacheConfig: resolvedCacheConfig, defaultQueryKeys } =
+    resolveMedusaStorefrontFoundation(config)
 
   const resolveQueryKeys = () => ({
     auth: config.auth?.queryKeys ?? defaultQueryKeys.auth,
@@ -763,6 +800,7 @@ export function createMedusaStorefrontPreset<
     products: config.products?.queryKeys ?? defaultQueryKeys.products,
     productLists:
       config.productLists?.queryKeys ?? defaultQueryKeys.productLists,
+    reviews: config.reviews?.queryKeys ?? defaultQueryKeys.reviews,
     orders: config.orders?.queryKeys ?? defaultQueryKeys.orders,
     customers: config.customers?.queryKeys ?? defaultQueryKeys.customers,
     regions: config.regions?.queryKeys ?? defaultQueryKeys.regions,
@@ -793,6 +831,12 @@ export function createMedusaStorefrontPreset<
       hooks: config.productLists?.hooks,
       queryKeys: queryKeys.productLists,
     },
+    reviews: {
+      service: config.reviews?.service,
+      serviceConfig: config.reviews?.serviceConfig,
+      hooks: config.reviews?.hooks,
+      queryKeys: queryKeys.reviews,
+    },
     orders: {
       service: config.orders?.service,
       serviceConfig: config.orders?.serviceConfig,
@@ -831,6 +875,7 @@ export function createMedusaStorefrontPreset<
     ),
     products: serverRead.services.products,
     productLists: serverRead.services.productLists,
+    reviews: serverRead.services.reviews,
     orders: serverRead.services.orders,
     customers:
       config.customers?.service ?? createMedusaCustomerService(config.sdk),
@@ -874,7 +919,8 @@ export function createMedusaStorefrontPreset<
       ],
     }
   }
-  const resolvedAuthInvalidateOnAuthChange = resolveAuthInvalidateOnAuthChange()
+  const resolvedAuthInvalidateOnAuthChange =
+    resolveAuthInvalidateOnAuthChange()
 
   // Safe: non-default facet shapes must provide catalog.fallbackFacets via
   // CreateMedusaStorefrontPresetConfig, so the default fallback is only used
@@ -962,6 +1008,17 @@ export function createMedusaStorefrontPreset<
       cartStorage: cartHookOverrides?.cartStorage,
       isActiveCartQueryKey: resolvedCheckoutActiveCartQueryKey,
     }),
+    reviews: createProductReviewHooks<
+      ReviewBase,
+      MedusaProductReviewListInput,
+      MedusaProductReviewListInput
+    >({
+      ...(config.reviews?.hooks ?? {}),
+      service: services.reviews,
+      queryKeys: queryKeys.reviews,
+      queryKeyNamespace: namespace,
+      cacheConfig: resolvedCacheConfig,
+    }),
     orders: createOrderHooks<
       HttpTypes.StoreOrder,
       MedusaOrderListHookInput,
diff --git a/libs/storefront-data/src/medusa/server-read.ts b/libs/storefront-data/src/medusa/server-read.ts
index 787ef6613d..d4089ec552 100644
--- a/libs/storefront-data/src/medusa/server-read.ts
+++ b/libs/storefront-data/src/medusa/server-read.ts
@@ -1,41 +1,49 @@
 import type Medusa from "@medusajs/js-sdk"
 import type { HttpTypes } from "@medusajs/types"
-import type { CreateCatalogHooksConfig } from "../catalog/hooks"
+import type {
+  CreateCatalogHooksConfig,
+} from "../catalog/hooks"
+import {
+  createCatalogQueryOptionsFactory,
+  type CatalogQueryOptionsFactory,
+} from "../catalog/query-options"
 import {
   createMedusaCatalogService,
   type MedusaCatalogListInput,
   type MedusaCatalogServiceConfig,
 } from "../catalog/medusa-service"
-import {
-  type CatalogQueryOptionsFactory,
-  createCatalogQueryOptionsFactory,
-} from "../catalog/query-options"
 import type { CatalogFacets, CatalogQueryKeys } from "../catalog/types"
 import type { CreateCategoryHooksConfig } from "../categories/hooks"
+import {
+  createCategoryQueryOptionsFactory,
+  type CategoryQueryOptionsFactory,
+} from "../categories/query-options"
 import {
   createMedusaCategoryService,
   type MedusaCategoryDetailInput,
   type MedusaCategoryListInput,
   type MedusaCategoryServiceConfig,
 } from "../categories/medusa-service"
-import {
-  type CategoryQueryOptionsFactory,
-  createCategoryQueryOptionsFactory,
-} from "../categories/query-options"
 import type { CategoryQueryKeys } from "../categories/types"
 import type { CreateCollectionHooksConfig } from "../collections/hooks"
+import {
+  createCollectionQueryOptionsFactory,
+  type CollectionQueryOptionsFactory,
+} from "../collections/query-options"
 import {
   createMedusaCollectionService,
   type MedusaCollectionDetailInput,
   type MedusaCollectionListInput,
   type MedusaCollectionServiceConfig,
 } from "../collections/medusa-service"
-import {
-  type CollectionQueryOptionsFactory,
-  createCollectionQueryOptionsFactory,
-} from "../collections/query-options"
 import type { CollectionQueryKeys } from "../collections/types"
-import type { CreateOrderHooksConfig } from "../orders/hooks"
+import type {
+  CreateOrderHooksConfig,
+} from "../orders/hooks"
+import {
+  createOrderQueryOptionsFactory,
+  type OrderQueryOptionsFactory,
+} from "../orders/query-options"
 import {
   createMedusaOrderService,
   type MedusaOrderDetailHookInput,
@@ -44,10 +52,6 @@ import {
   type MedusaOrderListInput,
   type MedusaOrderServiceConfig,
 } from "../orders/medusa-service"
-import {
-  createOrderQueryOptionsFactory,
-  type OrderQueryOptionsFactory,
-} from "../orders/query-options"
 import type { OrderQueryKeys, OrderService } from "../orders/types"
 import {
   createMedusaProductListService,
@@ -70,28 +74,45 @@ import type {
   ProductListQueryKeys,
   ProductListService,
 } from "../product-lists/types"
-import type { CreateProductHooksConfig } from "../products/hooks"
+import {
+  createMedusaProductReviewService,
+  type MedusaProductReviewListInput,
+  type MedusaProductReviewServiceConfig,
+} from "../reviews/medusa-service"
+import {
+  type CreateProductReviewQueryOptionsFactoryConfig,
+  createProductReviewQueryOptionsFactory,
+  type ProductReviewQueryOptionsFactory,
+} from "../reviews/query-options"
+import type {
+  ProductReviewQueryKeys,
+  ProductReviewService,
+  ReviewBase,
+} from "../reviews/types"
+import type {
+  CreateProductHooksConfig,
+} from "../products/hooks"
+import {
+  createProductQueryOptionsFactory,
+  type ProductQueryOptionsFactory,
+} from "../products/query-options"
 import {
   createMedusaProductService,
   type MedusaProductDetailInput,
   type MedusaProductListInput,
   type MedusaProductServiceConfig,
 } from "../products/medusa-service"
-import {
-  createProductQueryOptionsFactory,
-  type ProductQueryOptionsFactory,
-} from "../products/query-options"
 import type { ProductQueryKeys } from "../products/types"
 import type { CreateRegionHooksConfig } from "../regions/hooks"
+import {
+  createRegionQueryOptionsFactory,
+  type RegionQueryOptionsFactory,
+} from "../regions/query-options"
 import {
   createMedusaRegionService,
   type MedusaRegionDetailInput,
   type MedusaRegionListInput,
 } from "../regions/medusa-service"
-import {
-  createRegionQueryOptionsFactory,
-  type RegionQueryOptionsFactory,
-} from "../regions/query-options"
 import type { RegionQueryKeys } from "../regions/types"
 import type { CacheConfig } from "../shared/cache-config"
 import type { QueryNamespace } from "../shared/query-keys"
@@ -152,6 +173,17 @@ type MedusaProductListServerReadHooksConfig = Pick<
   | "defaultPageSize"
 >
 
+type MedusaProductReviewServerReadHooksConfig = Pick<
+  OmitFactoryConfig<
+    CreateProductReviewQueryOptionsFactoryConfig<
+      ReviewBase,
+      MedusaProductReviewListInput,
+      MedusaProductReviewListInput
+    >
+  >,
+  "buildListParams" | "defaultPageSize"
+>
+
 type MedusaRegionServerReadHooksConfig = Pick<
   OmitFactoryConfig<
     CreateRegionHooksConfig<
@@ -225,6 +257,7 @@ type MedusaStorefrontReadQueryKeys = {
     MedusaCollectionDetailInput
   >
   catalog: CatalogQueryKeys<MedusaCatalogListInput>
+  reviews: ProductReviewQueryKeys<MedusaProductReviewListInput>
 }
 
 type MedusaOrderReadService = OrderService<
@@ -241,6 +274,11 @@ type MedusaProductListReadService = ProductListService<
   MedusaProductListDetailInput
 >
 
+type MedusaProductReviewReadService = ProductReviewService<
+  ReviewBase,
+  MedusaProductReviewListInput
+>
+
 export type CreateMedusaStorefrontServerReadPresetConfig<
   TProduct = HttpTypes.StoreProduct,
   TCategory = HttpTypes.StoreProductCategory,
@@ -319,6 +357,12 @@ export type CreateMedusaStorefrontServerReadPresetConfig<
     hooks?: MedusaCatalogServerReadHooksConfig<TCatalogProduct, TCatalogFacets>
     queryKeys?: CatalogQueryKeys<MedusaCatalogListInput>
   }
+  reviews?: {
+    service?: MedusaProductReviewReadService
+    serviceConfig?: MedusaProductReviewServiceConfig<ReviewBase>
+    hooks?: MedusaProductReviewServerReadHooksConfig
+    queryKeys?: ProductReviewQueryKeys<MedusaProductReviewListInput>
+  }
 }
 
 type MedusaStorefrontReadServices<
@@ -359,6 +403,7 @@ type MedusaStorefrontReadServices<
       TCatalogFacets
     >
   >
+  reviews: MedusaProductReviewReadService
 }
 
 type MedusaStorefrontReadQueries<
@@ -403,6 +448,10 @@ type MedusaStorefrontReadQueries<
     MedusaCatalogListInput,
     TCatalogFacets
   >
+  reviews: ProductReviewQueryOptionsFactory<
+    ReviewBase,
+    MedusaProductReviewListInput
+  >
 }
 
 export type MedusaStorefrontServerReadPresetResult<
@@ -434,12 +483,12 @@ export type MedusaStorefrontServerReadPresetResult<
 export const createMedusaStorefrontQueryKeys =
   createMedusaStorefrontQueryKeysFromFoundation
 
-function createMedusaStorefrontServerReadQueryKeys<
-  TProduct,
-  TCategory,
-  TCollection,
-  TCatalogProduct,
-  TCatalogFacets,
+export function createMedusaStorefrontServerReadPreset<
+  TProduct = HttpTypes.StoreProduct,
+  TCategory = HttpTypes.StoreProductCategory,
+  TCollection = HttpTypes.StoreCollection,
+  TCatalogProduct = HttpTypes.StoreProduct,
+  TCatalogFacets = CatalogFacets,
 >(
   config: CreateMedusaStorefrontServerReadPresetConfig<
     TProduct,
@@ -447,10 +496,18 @@ function createMedusaStorefrontServerReadQueryKeys<
     TCollection,
     TCatalogProduct,
     TCatalogFacets
-  >,
-  defaultQueryKeys: MedusaStorefrontReadQueryKeys
-): MedusaStorefrontReadQueryKeys {
-  return {
+  >
+): MedusaStorefrontServerReadPresetResult<
+  TProduct,
+  TCategory,
+  TCollection,
+  TCatalogProduct,
+  TCatalogFacets
+> {
+  const { namespace, cacheConfig, defaultQueryKeys } =
+    resolveMedusaStorefrontFoundation(config)
+
+  const queryKeys: MedusaStorefrontReadQueryKeys = {
     products: config.products?.queryKeys ?? defaultQueryKeys.products,
     productLists:
       config.productLists?.queryKeys ?? defaultQueryKeys.productLists,
@@ -459,31 +516,16 @@ function createMedusaStorefrontServerReadQueryKeys<
     categories: config.categories?.queryKeys ?? defaultQueryKeys.categories,
     collections: config.collections?.queryKeys ?? defaultQueryKeys.collections,
     catalog: config.catalog?.queryKeys ?? defaultQueryKeys.catalog,
+    reviews: config.reviews?.queryKeys ?? defaultQueryKeys.reviews,
   }
-}
 
-function createMedusaStorefrontServerReadServices<
-  TProduct,
-  TCategory,
-  TCollection,
-  TCatalogProduct,
-  TCatalogFacets,
->(
-  config: CreateMedusaStorefrontServerReadPresetConfig<
+  const services: MedusaStorefrontReadServices<
     TProduct,
     TCategory,
     TCollection,
     TCatalogProduct,
     TCatalogFacets
-  >
-): MedusaStorefrontReadServices<
-  TProduct,
-  TCategory,
-  TCollection,
-  TCatalogProduct,
-  TCatalogFacets
-> {
-  return {
+  > = {
     products: createMedusaProductService<
       TProduct,
       MedusaProductListInput,
@@ -514,38 +556,10 @@ function createMedusaStorefrontServerReadServices<
       MedusaCatalogListInput,
       TCatalogFacets
     >(config.sdk, config.catalog?.serviceConfig),
+    reviews:
+      config.reviews?.service ??
+      createMedusaProductReviewService(config.sdk, config.reviews?.serviceConfig),
   }
-}
-
-export function createMedusaStorefrontServerReadPreset<
-  TProduct = HttpTypes.StoreProduct,
-  TCategory = HttpTypes.StoreProductCategory,
-  TCollection = HttpTypes.StoreCollection,
-  TCatalogProduct = HttpTypes.StoreProduct,
-  TCatalogFacets = CatalogFacets,
->(
-  config: CreateMedusaStorefrontServerReadPresetConfig<
-    TProduct,
-    TCategory,
-    TCollection,
-    TCatalogProduct,
-    TCatalogFacets
-  >
-): MedusaStorefrontServerReadPresetResult<
-  TProduct,
-  TCategory,
-  TCollection,
-  TCatalogProduct,
-  TCatalogFacets
-> {
-  const { namespace, cacheConfig, defaultQueryKeys } =
-    resolveMedusaStorefrontFoundation(config)
-
-  const queryKeys = createMedusaStorefrontServerReadQueryKeys(
-    config,
-    defaultQueryKeys
-  )
-  const services = createMedusaStorefrontServerReadServices(config)
 
   const queries: MedusaStorefrontReadQueries<
     TProduct,
@@ -603,6 +617,13 @@ export function createMedusaStorefrontServerReadPreset<
       cacheConfig,
       ...(config.catalog?.hooks ?? {}),
     }),
+    reviews: createProductReviewQueryOptionsFactory({
+      service: services.reviews,
+      queryKeys: queryKeys.reviews,
+      queryKeyNamespace: namespace,
+      cacheConfig,
+      ...(config.reviews?.hooks ?? {}),
+    }),
   }
 
   return {
diff --git a/libs/storefront-data/src/reviews/hooks.ts b/libs/storefront-data/src/reviews/hooks.ts
new file mode 100644
index 0000000000..caf4719abf
--- /dev/null
+++ b/libs/storefront-data/src/reviews/hooks.ts
@@ -0,0 +1,283 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query"
+import {
+  type CacheConfig,
+  type CacheStrategy,
+  createCacheConfig,
+  getPrefetchCacheOptions,
+} from "../shared/cache-config"
+import { toErrorMessage } from "../shared/error-utils"
+import type {
+  ReadQueryOptions,
+  SuspenseQueryOptions,
+} from "../shared/hook-types"
+import type { PrefetchSkipMode } from "../shared/prefetch"
+import { shouldSkipPrefetch } from "../shared/prefetch"
+import { resolvePagination } from "../shared/pagination"
+import type { QueryNamespace } from "../shared/query-keys"
+import { useDelayedPrefetchController } from "../shared/use-delayed-prefetch-controller"
+import { createDefaultListParams } from "./input-utils"
+import { createProductReviewQueryOptionsFactory } from "./query-options"
+import { createProductReviewQueryKeys } from "./query-keys"
+import type {
+  CreateProductReviewInput,
+  ProductReviewListInputBase,
+  ProductReviewListResponse,
+  ProductReviewMutationOptions,
+  ProductReviewQueryKeys,
+  ProductReviewService,
+  ReviewSummary,
+  UseCreateProductReviewResult,
+  UseProductReviewsResult,
+  UseSuspenseProductReviewsResult,
+} from "./types"
+
+type ProductReviewPrefetchHookOptions = {
+  cacheStrategy?: CacheStrategy
+  defaultDelay?: number
+  skipIfCached?: boolean
+  skipMode?: PrefetchSkipMode
+}
+
+export type CreateProductReviewHooksConfig<
+  TReview,
+  TListInput extends ProductReviewListInputBase,
+  TListParams,
+  TCreateInput extends CreateProductReviewInput = CreateProductReviewInput,
+> = {
+  service: ProductReviewService<TReview, TListParams, TCreateInput>
+  buildListParams?: (input: TListInput) => TListParams
+  queryKeys?: ProductReviewQueryKeys<TListParams>
+  queryKeyNamespace?: QueryNamespace
+  cacheConfig?: CacheConfig
+  defaultPageSize?: number
+}
+
+const emptySummary: ReviewSummary = {
+  average_rating: 0,
+  count: 0,
+}
+
+export function createProductReviewHooks<
+  TReview,
+  TListInput extends ProductReviewListInputBase,
+  TListParams,
+  TCreateInput extends CreateProductReviewInput = CreateProductReviewInput,
+>({
+  service,
+  buildListParams,
+  queryKeys,
+  queryKeyNamespace = "storefront-data",
+  cacheConfig,
+  defaultPageSize = 20,
+}: CreateProductReviewHooksConfig<
+  TReview,
+  TListInput,
+  TListParams,
+  TCreateInput
+>) {
+  const resolvedCacheConfig = cacheConfig ?? createCacheConfig()
+  const resolvedQueryKeys =
+    queryKeys ?? createProductReviewQueryKeys<TListParams>(queryKeyNamespace)
+  const buildList =
+    buildListParams ??
+    ((input: TListInput) =>
+      createDefaultListParams(input, defaultPageSize) as TListParams)
+  const { getProductReviewsQueryOptions } =
+    createProductReviewQueryOptionsFactory({
+      service,
+      buildListParams: buildList,
+      queryKeys: resolvedQueryKeys,
+      cacheConfig: resolvedCacheConfig,
+      defaultPageSize,
+    })
+
+  const resolveListState = (
+    input: TListInput,
+    params: TListParams,
+    data?: ProductReviewListResponse<TReview>
+  ) => {
+    const limitFromParams = (params as { limit?: number }).limit
+    const offsetFromParams = (params as { offset?: number }).offset
+    const pagination = resolvePagination(
+      {
+        page: input.page,
+        limit: limitFromParams ?? input.limit,
+        offset: offsetFromParams,
+      },
+      defaultPageSize
+    )
+    const totalCount = data?.count ?? 0
+    const totalPages = pagination.limit
+      ? Math.ceil(totalCount / pagination.limit)
+      : 0
+
+    return {
+      currentPage: pagination.page,
+      hasNextPage: pagination.page < totalPages,
+      hasPrevPage: pagination.page > 1,
+      reviews: data?.reviews ?? [],
+      summary: data?.summary ?? emptySummary,
+      totalCount,
+      totalPages,
+    }
+  }
+
+  function useProductReviews(
+    input: TListInput,
+    options?: {
+      queryOptions?: ReadQueryOptions<ProductReviewListResponse<TReview>>
+    }
+  ): UseProductReviewsResult<TReview> {
+    const enabled = input.enabled ?? Boolean(input.productId)
+    const listParams = buildList(input)
+    const query = useQuery({
+      ...getProductReviewsQueryOptions(input, {
+        queryOptions: options?.queryOptions,
+      }),
+      enabled,
+    })
+
+    return {
+      ...resolveListState(input, listParams, query.data),
+      isLoading: query.isLoading,
+      isFetching: query.isFetching,
+      isSuccess: query.isSuccess,
+      error: toErrorMessage(query.error),
+      query,
+    }
+  }
+
+  function useSuspenseProductReviews(
+    input: TListInput,
+    options?: {
+      queryOptions?: SuspenseQueryOptions<ProductReviewListResponse<TReview>>
+    }
+  ): UseSuspenseProductReviewsResult<TReview> {
+    const listParams = buildList(input)
+    const query = useSuspenseQuery({
+      ...getProductReviewsQueryOptions(input, {
+        queryOptions: options?.queryOptions as ReadQueryOptions<
+          ProductReviewListResponse<TReview>
+        >,
+      }),
+    })
+
+    return {
+      ...resolveListState(input, listParams, query.data),
+      isLoading: false,
+      isFetching: query.isFetching,
+      isSuccess: true,
+      error: null,
+      query,
+    }
+  }
+
+  function usePrefetchProductReviews(
+    options?: ProductReviewPrefetchHookOptions
+  ) {
+    const queryClient = useQueryClient()
+    const { schedulePrefetch, cancelPrefetch } = useDelayedPrefetchController()
+    const cacheStrategy = options?.cacheStrategy ?? "semiStatic"
+    const defaultDelay = options?.defaultDelay ?? 500
+    const skipIfCached = options?.skipIfCached ?? true
+    const skipMode = options?.skipMode ?? "fresh"
+    const prefetchCacheOptions = getPrefetchCacheOptions(
+      resolvedCacheConfig,
+      cacheStrategy
+    )
+
+    const prefetchProductReviews = async (input: TListInput) => {
+      if (!input.productId) {
+        return
+      }
+
+      const listParams = buildList(input)
+      const queryKey = resolvedQueryKeys.productList(listParams)
+
+      if (
+        shouldSkipPrefetch({
+          queryClient,
+          queryKey,
+          cacheOptions: prefetchCacheOptions,
+          skipIfCached,
+          skipMode,
+        })
+      ) {
+        return
+      }
+
+      await queryClient.prefetchQuery({
+        queryKey,
+        queryFn: ({ signal }) => service.listProductReviews(listParams, signal),
+        ...prefetchCacheOptions,
+      })
+    }
+
+    const delayedPrefetch = (
+      input: TListInput,
+      delay = defaultDelay,
+      prefetchId?: string
+    ) => {
+      const listParams = buildList(input)
+      const queryKey = resolvedQueryKeys.productList(listParams)
+      const id = prefetchId ?? JSON.stringify(queryKey)
+      return schedulePrefetch(
+        () => prefetchProductReviews(input),
+        id,
+        delay
+      )
+    }
+
+    return {
+      cancelPrefetch,
+      delayedPrefetch,
+      prefetchProductReviews,
+    }
+  }
+
+  function useCreateProductReview<TContext = unknown>(
+    options?: ProductReviewMutationOptions<TReview, TCreateInput, TContext>
+  ): UseCreateProductReviewResult<TReview, TCreateInput, TContext> {
+    const queryClient = useQueryClient()
+
+    return useMutation<TReview, unknown, TCreateInput, TContext>({
+      mutationFn: service.createProductReview,
+      onMutate: options?.onMutate,
+      onError: options?.onError,
+      onSuccess: (data, variables, context) => {
+        queryClient.invalidateQueries({
+          queryKey: resolvedQueryKeys.all(),
+        })
+        options?.onSuccess?.(data, variables, context)
+      },
+      onSettled: options?.onSettled,
+    })
+  }
+
+  return {
+    getProductReviewsQueryOptions,
+    useProductReviews,
+    useSuspenseProductReviews,
+    usePrefetchProductReviews,
+    useCreateProductReview,
+  }
+}
+
+export type ProductReviewHooks<
+  TReview,
+  TListInput extends ProductReviewListInputBase,
+  TListParams,
+  TCreateInput extends CreateProductReviewInput = CreateProductReviewInput,
+> = ReturnType<
+  typeof createProductReviewHooks<
+    TReview,
+    TListInput,
+    TListParams,
+    TCreateInput
+  >
+>
diff --git a/libs/storefront-data/src/reviews/input-utils.ts b/libs/storefront-data/src/reviews/input-utils.ts
new file mode 100644
index 0000000000..251a7822e5
--- /dev/null
+++ b/libs/storefront-data/src/reviews/input-utils.ts
@@ -0,0 +1,39 @@
+import { compactRecord } from "../shared/object-utils"
+import { resolvePagination } from "../shared/pagination"
+import type { ProductReviewListInputBase } from "./types"
+
+export const stripListInput = <TInput extends ProductReviewListInputBase>(
+  input: TInput
+) => {
+  const { enabled: _enabled, page: _page, ...params } = input
+
+  return params
+}
+
+export const createDefaultListParams = <
+  TInput extends ProductReviewListInputBase,
+>(
+  input: TInput,
+  defaultPageSize: number
+) => {
+  const params = stripListInput(input) as Record<string, unknown>
+
+  if (typeof input.page !== "number") {
+    return compactRecord(params)
+  }
+
+  const pagination = resolvePagination(
+    {
+      page: input.page,
+      limit: input.limit,
+      offset: input.offset,
+    },
+    defaultPageSize
+  )
+
+  return compactRecord({
+    ...params,
+    limit: pagination.limit,
+    offset: pagination.offset,
+  })
+}
diff --git a/libs/storefront-data/src/reviews/medusa-service.ts b/libs/storefront-data/src/reviews/medusa-service.ts
new file mode 100644
index 0000000000..b4df8e122f
--- /dev/null
+++ b/libs/storefront-data/src/reviews/medusa-service.ts
@@ -0,0 +1,150 @@
+import type Medusa from "@medusajs/js-sdk"
+import type {
+  CreateProductReviewInput,
+  ProductReviewListResponse,
+  ProductReviewService,
+  ReviewBase,
+} from "./types"
+
+type StoreProductReviewsQuery = {
+  limit?: number
+  offset?: number
+}
+
+export type MedusaProductReviewListInput = StoreProductReviewsQuery & {
+  productId?: string
+  page?: number
+  enabled?: boolean
+}
+
+export type MedusaCreateProductReviewInput = CreateProductReviewInput
+
+type StoreProductReviewsResponse<TReview> = ProductReviewListResponse<TReview>
+
+type StoreCreateProductReviewResponse<TReview> = {
+  review: TReview
+}
+
+const REVIEW_SUMMARY_REPAIR_LIMIT = 100
+
+export type MedusaProductReviewServiceConfig<TReview> = {
+  listPath?: string
+  transformReview?: (review: ReviewBase) => TReview
+}
+
+const stripListInput = (
+  input: MedusaProductReviewListInput
+): StoreProductReviewsQuery => {
+  const {
+    enabled: _enabled,
+    page: _page,
+    productId: _productId,
+    ...query
+  } = input
+
+  return query
+}
+
+const calculateReviewSummary = (reviews: ReviewBase[]) => {
+  if (!reviews.length) {
+    return {
+      average_rating: 0,
+      count: 0,
+    }
+  }
+
+  const ratingSum = reviews.reduce((sum, review) => sum + review.rating, 0)
+
+  return {
+    average_rating: Number((ratingSum / reviews.length).toFixed(1)),
+    count: reviews.length,
+  }
+}
+
+const hasCompleteReviewSet = (response: StoreProductReviewsResponse<ReviewBase>) =>
+  response.count === response.reviews.length
+
+const hasInconsistentSummary = (
+  response: StoreProductReviewsResponse<ReviewBase>
+) => response.summary.count !== response.count
+
+export function createMedusaProductReviewService<
+  TReview = ReviewBase,
+>(
+  sdk: Medusa,
+  config?: MedusaProductReviewServiceConfig<TReview>
+): ProductReviewService<TReview, MedusaProductReviewListInput> {
+  const { listPath = "/store/products", transformReview } = config ?? {}
+  const mapReview =
+    transformReview ?? ((review) => review as unknown as TReview)
+
+  return {
+    async listProductReviews(
+      params: MedusaProductReviewListInput,
+      signal?: AbortSignal
+    ): Promise<ProductReviewListResponse<TReview>> {
+      if (!params.productId) {
+        return {
+          count: 0,
+          limit: params.limit ?? 0,
+          offset: params.offset ?? 0,
+          reviews: [],
+          summary: {
+            average_rating: 0,
+            count: 0,
+          },
+        }
+      }
+
+      const query = stripListInput(params)
+      const response = await sdk.client.fetch<
+        StoreProductReviewsResponse<ReviewBase>
+      >(`${listPath}/${params.productId}/reviews`, {
+        query,
+        signal,
+      })
+      let summary = response.summary
+
+      if (hasCompleteReviewSet(response)) {
+        summary = calculateReviewSummary(response.reviews)
+      } else if (
+        hasInconsistentSummary(response) &&
+        response.count <= REVIEW_SUMMARY_REPAIR_LIMIT
+      ) {
+        const summaryResponse = await sdk.client.fetch<
+          StoreProductReviewsResponse<ReviewBase>
+        >(`${listPath}/${params.productId}/reviews`, {
+          query: {
+            ...query,
+            limit: response.count,
+            offset: 0,
+          },
+          signal,
+        })
+
+        if (hasCompleteReviewSet(summaryResponse)) {
+          summary = calculateReviewSummary(summaryResponse.reviews)
+        }
+      }
+
+      return {
+        ...response,
+        reviews: response.reviews.map(mapReview),
+        summary,
+      }
+    },
+
+    async createProductReview(
+      input: MedusaCreateProductReviewInput
+    ): Promise<TReview> {
+      const response = await sdk.client.fetch<
+        StoreCreateProductReviewResponse<ReviewBase>
+      >("/store/reviews", {
+        method: "POST",
+        body: input,
+      })
+
+      return mapReview(response.review)
+    },
+  }
+}
diff --git a/libs/storefront-data/src/reviews/query-keys.ts b/libs/storefront-data/src/reviews/query-keys.ts
new file mode 100644
index 0000000000..5f0324293e
--- /dev/null
+++ b/libs/storefront-data/src/reviews/query-keys.ts
@@ -0,0 +1,18 @@
+import type { QueryNamespace } from "../shared/query-keys"
+import { createQueryKey, normalizeQueryKeyPart } from "../shared/query-keys"
+import type { ProductReviewQueryKeys } from "./types"
+
+export function createProductReviewQueryKeys<TListParams>(
+  namespace: QueryNamespace
+): ProductReviewQueryKeys<TListParams> {
+  return {
+    all: () => createQueryKey(namespace, "reviews"),
+    productList: (params) =>
+      createQueryKey(
+        namespace,
+        "reviews",
+        "product",
+        normalizeQueryKeyPart(params, { omitKeys: ["enabled"] })
+      ),
+  }
+}
diff --git a/libs/storefront-data/src/reviews/query-options.ts b/libs/storefront-data/src/reviews/query-options.ts
new file mode 100644
index 0000000000..a4ef0b4137
--- /dev/null
+++ b/libs/storefront-data/src/reviews/query-options.ts
@@ -0,0 +1,88 @@
+import type { CacheConfig, CacheStrategy } from "../shared/cache-config"
+import { createCacheConfig } from "../shared/cache-config"
+import type {
+  QueryFactoryOptions,
+  ReadQueryOptions,
+} from "../shared/hook-types"
+import type { QueryNamespace } from "../shared/query-keys"
+import { createDefaultListParams } from "./input-utils"
+import { createProductReviewQueryKeys } from "./query-keys"
+import type {
+  ProductReviewListInputBase,
+  ProductReviewListResponse,
+  ProductReviewQueryKeys,
+  ProductReviewService,
+} from "./types"
+
+type ProductReviewListService<TReview, TListParams> = Pick<
+  ProductReviewService<TReview, TListParams>,
+  "listProductReviews"
+>
+
+export type CreateProductReviewQueryOptionsFactoryConfig<
+  TReview,
+  TListInput extends ProductReviewListInputBase,
+  TListParams,
+> = {
+  service: ProductReviewListService<TReview, TListParams>
+  buildListParams?: (input: TListInput) => TListParams
+  queryKeys?: ProductReviewQueryKeys<TListParams>
+  queryKeyNamespace?: QueryNamespace
+  cacheConfig?: CacheConfig
+  defaultPageSize?: number
+}
+
+export type ProductReviewQueryOptionsFactory<
+  TReview,
+  TListInput extends ProductReviewListInputBase,
+> = {
+  getProductReviewsQueryOptions: (
+    input: TListInput,
+    options?: {
+      queryOptions?: ReadQueryOptions<ProductReviewListResponse<TReview>>
+      cacheStrategy?: CacheStrategy
+    }
+  ) => QueryFactoryOptions<ProductReviewListResponse<TReview>>
+}
+
+export function createProductReviewQueryOptionsFactory<
+  TReview,
+  TListInput extends ProductReviewListInputBase,
+  TListParams,
+>({
+  service,
+  buildListParams,
+  queryKeys,
+  queryKeyNamespace = "storefront-data",
+  cacheConfig,
+  defaultPageSize = 20,
+}: CreateProductReviewQueryOptionsFactoryConfig<
+  TReview,
+  TListInput,
+  TListParams
+>): ProductReviewQueryOptionsFactory<TReview, TListInput> {
+  const resolvedCacheConfig = cacheConfig ?? createCacheConfig()
+  const resolvedQueryKeys =
+    queryKeys ?? createProductReviewQueryKeys<TListParams>(queryKeyNamespace)
+  const buildList =
+    buildListParams ??
+    ((input: TListInput) =>
+      createDefaultListParams(input, defaultPageSize) as TListParams)
+
+  return {
+    getProductReviewsQueryOptions: (
+      input,
+      options
+    ): QueryFactoryOptions<ProductReviewListResponse<TReview>> => {
+      const listParams = buildList(input)
+      const cacheStrategy = options?.cacheStrategy ?? "semiStatic"
+
+      return {
+        queryKey: resolvedQueryKeys.productList(listParams),
+        queryFn: ({ signal }) => service.listProductReviews(listParams, signal),
+        ...resolvedCacheConfig[cacheStrategy],
+        ...(options?.queryOptions ?? {}),
+      }
+    },
+  }
+}
diff --git a/libs/storefront-data/src/reviews/types.ts b/libs/storefront-data/src/reviews/types.ts
new file mode 100644
index 0000000000..79d2228246
--- /dev/null
+++ b/libs/storefront-data/src/reviews/types.ts
@@ -0,0 +1,105 @@
+import type { UseMutationResult } from "@tanstack/react-query"
+import type {
+  QueryResult,
+  ReadResultBase,
+  SuspenseQueryResult,
+  SuspenseResultBase,
+} from "../shared/hook-result-types"
+import type { MutationOptions } from "../shared/hook-types"
+import type { QueryKey } from "../shared/query-keys"
+
+export type ReviewCustomerBase = {
+  first_name?: null | string
+  last_name?: null | string
+}
+
+export type ReviewBase = {
+  content: string
+  created_at?: string
+  customer?: null | ReviewCustomerBase
+  id: string
+  rating: number
+  title: string
+}
+
+export type ReviewSummary = {
+  average_rating: number
+  count: number
+}
+
+export type ProductReviewListInputBase = {
+  productId?: string
+  limit?: number
+  offset?: number
+  page?: number
+  enabled?: boolean
+}
+
+export type ProductReviewListResponse<TReview> = {
+  count: number
+  limit: number
+  offset: number
+  reviews: TReview[]
+  summary: ReviewSummary
+}
+
+export type CreateProductReviewInput = {
+  content: string
+  product_id: string
+  rating: number
+  review_token?: string
+  title: string
+}
+
+export type ProductReviewService<
+  TReview,
+  TListParams,
+  TCreateInput extends CreateProductReviewInput = CreateProductReviewInput,
+> = {
+  listProductReviews: (
+    params: TListParams,
+    signal?: AbortSignal
+  ) => Promise<ProductReviewListResponse<TReview>>
+  createProductReview: (input: TCreateInput) => Promise<TReview>
+}
+
+export type ProductReviewQueryKeys<TListParams> = {
+  all: () => QueryKey
+  productList: (params: TListParams) => QueryKey
+}
+
+export type UseProductReviewsResult<TReview> = ReadResultBase<
+  QueryResult<ProductReviewListResponse<TReview>>
+> & {
+  currentPage: number
+  hasNextPage: boolean
+  hasPrevPage: boolean
+  reviews: TReview[]
+  summary: ReviewSummary
+  totalCount: number
+  totalPages: number
+}
+
+export type UseSuspenseProductReviewsResult<TReview> = SuspenseResultBase<
+  SuspenseQueryResult<ProductReviewListResponse<TReview>>
+> & {
+  currentPage: number
+  hasNextPage: boolean
+  hasPrevPage: boolean
+  reviews: TReview[]
+  summary: ReviewSummary
+  totalCount: number
+  totalPages: number
+}
+
+export type ProductReviewMutationOptions<
+  TReview,
+  TCreateInput extends CreateProductReviewInput,
+  TContext = unknown,
+> = MutationOptions<TReview, TCreateInput, TContext>
+
+export type UseCreateProductReviewResult<
+  TReview,
+  TCreateInput extends CreateProductReviewInput,
+  TContext = unknown,
+> = UseMutationResult<TReview, unknown, TCreateInput, TContext>
diff --git a/libs/storefront-data/src/shared/use-delayed-prefetch-controller.ts b/libs/storefront-data/src/shared/use-delayed-prefetch-controller.ts
index e6f45c1ca6..8f08b169bc 100644
--- a/libs/storefront-data/src/shared/use-delayed-prefetch-controller.ts
+++ b/libs/storefront-data/src/shared/use-delayed-prefetch-controller.ts
@@ -16,7 +16,7 @@ export const useDelayedPrefetchController = () => {
   }, [])
 
   const schedulePrefetch = (
-    execute: () => void,
+    execute: () => void | Promise<unknown>,
     prefetchId: string,
     delay: number
   ) => {
@@ -26,8 +26,8 @@ export const useDelayedPrefetchController = () => {
     }
 
     const timeoutId = setTimeout(() => {
-      execute()
       timeoutsRef.current.delete(prefetchId)
+      void Promise.resolve().then(execute).catch(() => undefined)
     }, delay)
 
     timeoutsRef.current.set(prefetchId, timeoutId)
diff --git a/libs/storefront-data/tests/reviews.medusa-service.test.ts b/libs/storefront-data/tests/reviews.medusa-service.test.ts
new file mode 100644
index 0000000000..0a6280b908
--- /dev/null
+++ b/libs/storefront-data/tests/reviews.medusa-service.test.ts
@@ -0,0 +1,114 @@
+import type Medusa from "@medusajs/js-sdk"
+import { createMedusaProductReviewService } from "../src/reviews/medusa-service"
+import type { ReviewBase } from "../src/reviews/types"
+
+const createReview = (rating: number, index: number): ReviewBase => ({
+  content: `Review ${index}`,
+  id: `review_${index}`,
+  rating,
+  title: "Review",
+})
+
+const createReviewResponse = ({
+  limit,
+  offset = 0,
+  ratings,
+  totalCount = ratings.length,
+}: {
+  limit: number
+  offset?: number
+  ratings: number[]
+  totalCount?: number
+}) => ({
+  count: totalCount,
+  limit,
+  offset,
+  reviews: ratings.map(createReview),
+  summary: {
+    average_rating: 5,
+    count: 1,
+  },
+})
+
+const createSdkMock = () => {
+  const fetch = vi.fn()
+
+  return {
+    fetch,
+    sdk: {
+      client: {
+        fetch,
+      },
+    } as unknown as Medusa,
+  }
+}
+
+describe("createMedusaProductReviewService", () => {
+  it("repairs inconsistent summary from a complete review response", async () => {
+    const { fetch, sdk } = createSdkMock()
+    fetch.mockResolvedValueOnce(
+      createReviewResponse({
+        limit: 10,
+        ratings: [5, 5, 5, 2, 5, 5, 5, 5, 5],
+      })
+    )
+    const service = createMedusaProductReviewService(sdk)
+
+    const result = await service.listProductReviews({
+      productId: "prod_1",
+      limit: 10,
+      offset: 0,
+    })
+
+    expect(fetch).toHaveBeenCalledTimes(1)
+    expect(result.summary).toEqual({
+      average_rating: 4.7,
+      count: 9,
+    })
+  })
+
+  it("fetches a bounded full review set to repair paginated summary", async () => {
+    const { fetch, sdk } = createSdkMock()
+    fetch
+      .mockResolvedValueOnce(
+        createReviewResponse({
+          limit: 3,
+          ratings: [5, 5, 5],
+          totalCount: 9,
+        })
+      )
+      .mockResolvedValueOnce(
+        createReviewResponse({
+          limit: 9,
+          ratings: [5, 5, 5, 2, 5, 5, 5, 5, 5],
+        })
+      )
+    const service = createMedusaProductReviewService(sdk)
+
+    const result = await service.listProductReviews({
+      productId: "prod_1",
+      limit: 3,
+      offset: 0,
+    })
+
+    expect(fetch).toHaveBeenNthCalledWith(1, "/store/products/prod_1/reviews", {
+      query: {
+        limit: 3,
+        offset: 0,
+      },
+      signal: undefined,
+    })
+    expect(fetch).toHaveBeenNthCalledWith(2, "/store/products/prod_1/reviews", {
+      query: {
+        limit: 9,
+        offset: 0,
+      },
+      signal: undefined,
+    })
+    expect(result.reviews).toHaveLength(3)
+    expect(result.summary).toEqual({
+      average_rating: 4.7,
+      count: 9,
+    })
+  })
+})