diff --git a/components/product/Gallery.tsx b/components/product/Gallery.tsx
index a7f4b32..c74b2c5 100644
--- a/components/product/Gallery.tsx
+++ b/components/product/Gallery.tsx
@@ -74,20 +74,6 @@ export default function GallerySlider(props: Props) {
               ))}
             </Slider>
 
-            <Slider.PrevButton
-              class="no-animation absolute left-2 top-1/2 btn btn-circle btn-outline disabled:invisible"
-              disabled
-            >
-              <Icon id="chevron-right" class="rotate-180" />
-            </Slider.PrevButton>
-
-            <Slider.NextButton
-              class="no-animation absolute right-2 top-1/2 btn btn-circle btn-outline disabled:invisible"
-              disabled={images.length < 2}
-            >
-              <Icon id="chevron-right" />
-            </Slider.NextButton>
-
             <div class="absolute top-2 right-2 bg-base-100 rounded-full">
               <label class="btn btn-ghost hidden sm:inline-flex" for={zoomId}>
                 <Icon id="pan_zoom" />
@@ -96,16 +82,22 @@ export default function GallerySlider(props: Props) {
           </div>
         </div>
 
+
         {/* Dots */}
         <div class={clx(
-          "col-start-1 col-span-1 mobile:flex mobile:justify-center",
+          "col-start-1 col-span-1 mobile:flex mobile:justify-center flex flex-col desktop:gap-10 desktop:items-center",
         )}>
+
+          <Slider.PrevButton class="mobile:hidden no-animation btn btn-circle hover:bg-transparent hover:border-[#8F2AED] border border-[#8F2AED]">
+            <Icon id="arrow-top" stroke="#8F2AED" width={20} height={12} />
+          </Slider.PrevButton>
+
           <ul
             class={clx(
               "carousel carousel-center",
-              "carousel-vertical mobile:carousel-horizontal",
-              "gap-2",
-              "max-w-full",
+              "desktop:carousel-vertical",
+              "gap-2 desktop:gap-10",
+              "max-w-full items-center mobile:justify-center",
               "overflow-x-auto",
               "overflow-y-auto",
             )}
@@ -119,7 +111,7 @@ export default function GallerySlider(props: Props) {
                       <Slider.Dot index={index}>
                         <Image
                           style={{ aspectRatio: "1 / 1" }}
-                          class="group-disabled:border-base-400 border rounded object-cover w-full h-full"
+                          class="group-disabled:border-primary border-2 border-[#F5F5F5] rounded object-cover w-full h-full"
                           width={64}
                           height={64}
                           src={img.url!}
@@ -140,6 +132,9 @@ export default function GallerySlider(props: Props) {
               </li>
             ))}
           </ul>
+          <Slider.NextButton class="mobile:hidden no-animation btn btn-circle hover:bg-transparent hover:border-[#8F2AED] border border-[#8F2AED]">
+            <Icon id="arrow-bottom" stroke="#8F2AED" width={20} height={12} />
+          </Slider.NextButton>
         </div>
 
         <Slider.JS rootId={id} />
diff --git a/components/product/ProductInfo.tsx b/components/product/ProductInfo.tsx
index b58027a..71e3f0c 100644
--- a/components/product/ProductInfo.tsx
+++ b/components/product/ProductInfo.tsx
@@ -89,7 +89,7 @@ function ProductInfo({ page, itemsShare }: Props) {
           <span class={clx("text-xs text-[#252429]")}>
             REF: {productID}
           </span>
-          <ReviewRating reviewCount={aggregateRating?.reviewCount} ratingValue={aggregateRating?.ratingValue} />
+          <ReviewRating reviewCount={aggregateRating?.reviewCount ?? 0} ratingValue={aggregateRating?.ratingValue ?? 0} />
         </div>
 
 
diff --git a/components/product/ProductReview/ReviewForm.tsx b/components/product/ProductReview/ReviewForm.tsx
index 8a60ad5..ed8acef 100644
--- a/components/product/ProductReview/ReviewForm.tsx
+++ b/components/product/ProductReview/ReviewForm.tsx
@@ -1,11 +1,16 @@
 
+import { useDevice } from "@deco/deco/hooks";
 import { AppContext } from "../../../apps/deco/wake.ts";
+import { clx } from "../../../sdk/clx.ts";
 import { useComponent } from "../../../sections/Component.tsx";
+import ReviewRating from "../ReviewRating.tsx";
 
 interface ReviewFormProps {
     productVariantId: number;
     state?: string;
     message?: string;
+    ratingValue?: number;
+    reviewCount?: number;
 }
 
 export const action = async (
@@ -19,6 +24,7 @@ export const action = async (
 
     try {
         const formData = await req.formData();
+        // deno-lint-ignore no-explicit-any
         await (ctx as any).invoke.wake.actions.review.create({
             email,
             name: givenName,
@@ -32,29 +38,58 @@ export const action = async (
     }
 };
 
-export default function ReviewForm({ productVariantId, state, message }: ReviewFormProps) {
-    console.log(state, message)
+export default function ReviewForm({ productVariantId, state, message, reviewCount, ratingValue }: ReviewFormProps) {
+    const device = useDevice()
 
     if (state && message) {
         return (
-          <h2 class="text-xl leading-6 text-base-content font-bold">
-            {message}
-          </h2>
+            <h2 class="text-xl leading-6 text-base-content font-bold">
+                {message}
+            </h2>
         );
-      }
+    }
     return (
-        <form
-            hx-post={useComponent(import.meta.url, { productVariantId, state, message })}
-        >
-            <input type="text" id="review" name="review" required class="border border-black rounded-[5px]" />
-            <div className="rating">
-                <input type="radio" name="stars" value="1" className="mask mask-star-2 bg-orange-400" />
-                <input type="radio" name="stars" value="2" className="mask mask-star-2 bg-orange-400" defaultChecked />
-                <input type="radio" name="stars" value="3" className="mask mask-star-2 bg-orange-400" />
-                <input type="radio" name="stars" value="4" className="mask mask-star-2 bg-orange-400" />
-                <input type="radio" name="stars" value="5" className="mask mask-star-2 bg-orange-400" />
-            </div>
-            <button>Enviar</button>
-        </form>
+        <div class="grid grid-cols-1 gap-[26px] desktop:w-[29.24%] w-full">
+            {device === "desktop" && (
+                <>
+                    <div class="flex flex-col gap-4">
+                        <h3 class="font-bold text-black text-2xl">Avaliações de Clientes</h3>
+                        <ReviewRating reviewCount={reviewCount ?? 0} ratingValue={ratingValue ?? 0} typeTwo={true} size={32} />
+                    </div>
+                    <hr />
+                </>
+            )}
+            <form
+                hx-post={useComponent(import.meta.url, { productVariantId, state, message })}
+                class="flex flex-col gap-[26px]"
+            >
+                <div class="flex flex-col gap-4">
+                    <span class="font-bold text-black text-xl">Adicionar avaliação</span>
+                    <div class="flex flex-col gap-2">
+                        <div className="rating">
+                            <input type="radio" name="stars" value="1" className="mask mask-star-2 bg-primary h-4 w-4 mobile:h-6 mobile:w-6" />
+                            <input type="radio" name="stars" value="2" className="mask mask-star-2 bg-primary h-4 w-4 mobile:h-6 mobile:w-6" />
+                            <input type="radio" name="stars" value="3" className="mask mask-star-2 bg-primary h-4 w-4 mobile:h-6 mobile:w-6" defaultChecked />
+                            <input type="radio" name="stars" value="4" className="mask mask-star-2 bg-primary h-4 w-4 mobile:h-6 mobile:w-6" />
+                            <input type="radio" name="stars" value="5" className="mask mask-star-2 bg-primary h-4 w-4 mobile:h-6 mobile:w-6" />
+                        </div>
+                        <span class="text-xs text-[#373737]">Avalie o produto de 1 a 5 estrelas</span>
+                    </div>
+                </div>
+                <textarea
+                    type="text"
+                    id="review"
+                    name="review"
+                    required
+                    class={clx(
+                        "border border-black rounded-[5px] resize-none h-[89px] w-full",
+                        "!rounded-sm !border !border-[#DCDCDC] outline-none p-[14px]"
+                    )}
+                    placeholder="Comente aqui sua experiência"
+                    maxlength={300}
+                />
+                <button class="btn btn-primary text-black text-sm font-bold rounded-[5px]">Enviar Avaliação</button>
+            </form>
+        </div>
     );
 }
\ No newline at end of file
diff --git a/components/product/ProductReview/Reviews.tsx b/components/product/ProductReview/Reviews.tsx
new file mode 100644
index 0000000..8570eb4
--- /dev/null
+++ b/components/product/ProductReview/Reviews.tsx
@@ -0,0 +1,44 @@
+
+import { AggregateRating, Review } from "apps/commerce/types.ts";
+import ReviewRating from "../ReviewRating.tsx";
+import convertDate from "./convertDate.ts";
+import { useDevice } from "@deco/deco/hooks";
+import { clx } from "../../../sdk/clx.ts";
+
+interface ReviewsProps {
+    reviews?: Review[]
+    aggregateRating?: AggregateRating
+}
+
+export default function Reviews({ reviews, aggregateRating }: ReviewsProps) {
+    const device = useDevice()
+    return (
+        <div class={clx(
+            "desktop:max-h-[71.2%] w-full desktop:overflow-y-auto flex-1 snap-y custom-scrollbar desktop:pr-4",
+            "mobile:flex mobile:flex-col mobile:gap-[26px]"
+        )}>
+            {device === "mobile" && (
+                <>
+                    <div class="flex flex-col gap-4">
+                        <h3 class="font-bold text-black text-2xl">Avaliações de Clientes</h3>
+                        <ReviewRating reviewCount={aggregateRating?.reviewCount ?? 0} ratingValue={aggregateRating?.ratingValue ?? 0} typeTwo={true} size={20} />
+                    </div>
+                    <hr />
+                </>
+            )}
+            <ul class="space-y-6 w-full mobile:max-h-[382px] overflow-y-auto snap-y custom-scrollbar mobile:pr-2">
+                {reviews?.map(review => (
+                    <li class="flex flex-col gap-4 mobile:gap-6 w-full snap-start">
+                        <div class="flex flex-col gap-4">
+                            <ReviewRating reviewCount={0} ratingValue={review.reviewRating?.ratingValue ?? 0} size={16.67} />
+                            <span class="font-bold text-black">{review.author![0].name}</span>
+                            <p class="text-sm text-black">{review.reviewBody}</p>
+                            <span class="text-xs text-[#999999]">{review.datePublished && convertDate(review.datePublished)}</span>
+                        </div>
+                        <hr />
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/product/ProductReview/convertDate.ts b/components/product/ProductReview/convertDate.ts
new file mode 100644
index 0000000..d9d7021
--- /dev/null
+++ b/components/product/ProductReview/convertDate.ts
@@ -0,0 +1,12 @@
+export default function convertDate(isoDate: string) {
+    const date = new Date(isoDate);
+    
+    const options: Intl.DateTimeFormatOptions = { 
+        day: "numeric", 
+        month: "long", 
+        year: "numeric" 
+      };
+      
+    const formattedDate = new Intl.DateTimeFormat("pt-BR", options).format(date);
+    return formattedDate
+}
\ No newline at end of file
diff --git a/components/product/ReviewRating.tsx b/components/product/ReviewRating.tsx
index ffb8022..5154167 100644
--- a/components/product/ReviewRating.tsx
+++ b/components/product/ReviewRating.tsx
@@ -1,21 +1,34 @@
+import { clx } from "../../sdk/clx.ts";
 import Icon from "../ui/Icon.tsx";
 
 interface ReviewRatingProps {
-    ratingValue?: number;
-    reviewCount?: number;
+    ratingValue: number;
+    reviewCount: number;
+    typeTwo?: boolean;
+    size?: number;
 }
 
-export default function ReviewRating({ ratingValue = 0, reviewCount }: ReviewRatingProps) {
+export default function ReviewRating({ ratingValue = 0, reviewCount, typeTwo, size }: ReviewRatingProps) {
     return (
-        <div class="flex gap-1">
+        <div class={clx(
+            "flex  items-center",
+            typeTwo ? "gap-[10px]" : "gap-1"
+        )}>
             <div class="flex gap-[3px]">
                 {Array.from({ length: 5 }).map((_, index) => {
                     const id = index + 1 <= ratingValue ? "starFull" : "star";
-                    return (<Icon key={index} id={id} width={11} height={12}/>)
+                    return (<Icon key={index} id={id} width={size ?? 11} height={size ?? 12} />)
                 })}
             </div>
-            {reviewCount && (
-                <span class="text-[11px] text-black">({reviewCount})</span>
+            {reviewCount > 0 && (
+                typeTwo
+                    ? (
+                        <span class="text-sm text-black whitespace-nowrap flex gap-[10px]">
+                            <strong class="text-[28px] font-bold text-black">{ratingValue}</strong> (Média de {reviewCount} avaliações)
+                        </span>
+                    )
+                    : (<span class="text-[11px] text-black">({reviewCount})</span>)
+
             )}
         </div>
 
diff --git a/components/product/Tabs/TabsDesktop.tsx b/components/product/Tabs/TabsDesktop.tsx
index 9d27686..30ae0ee 100644
--- a/components/product/Tabs/TabsDesktop.tsx
+++ b/components/product/Tabs/TabsDesktop.tsx
@@ -10,7 +10,7 @@ export default function TabsDesktop({ productInformations }: TabsDesktopProps) {
     const quantityTabs = productInformations.length;
 
     return (
-        <div role="tablist" class="tabs tabs-bordered !w-full mx-auto !max-w-[82.36%]  justify-items-stretch">
+        <div role="tablist" class="tabs tabs-bordered !w-full mx-auto !max-w-full justify-items-stretch">
             {
                 productInformations?.map(item => (
                     <>
diff --git a/components/product/Tabs/index.tsx b/components/product/Tabs/index.tsx
index de91613..6c6b0bc 100644
--- a/components/product/Tabs/index.tsx
+++ b/components/product/Tabs/index.tsx
@@ -2,7 +2,6 @@ import { ProductDetailsPage } from "apps/commerce/types.ts";
 import { useDevice, useScript } from "@deco/deco/hooks";
 import TabsDesktop from "./TabsDesktop.tsx";
 import TabsMobile from "./TabsMobile.tsx";
-import ReviewForm from "../ProductReview/ReviewForm.tsx";
 
 interface TabsProps {
     page: ProductDetailsPage
@@ -41,7 +40,7 @@ const onLoad = () => {
 export default function Tabs({ page }: TabsProps) {
     const product = page.product
     const requiredContent = ['Descrição', 'Dados Técnicos']
-    const productInformations: any[] = product.additionalProperty?.filter(
+    const productInformations = product.additionalProperty?.filter(
         item => item.name && item.value && requiredContent.includes(item.name)
     ).sort((a, b) => {
         if (a.name === 'Descrição') return -1;
@@ -53,12 +52,6 @@ export default function Tabs({ page }: TabsProps) {
 
     if (productInformations?.length === 0) return null
 
-    // productInformations.push({
-    //     "@type": "PropertyValue",
-    //     name: "OUTRAS INFORMAÇÕES",
-    //     value: <ReviewForm productVariantId={Number(product.productID)}/>
-    // })
-
     const device = useDevice();
 
     return (
diff --git a/components/shipping/Results.tsx b/components/shipping/Results.tsx
index 347199f..9c9c9a4 100644
--- a/components/shipping/Results.tsx
+++ b/components/shipping/Results.tsx
@@ -15,6 +15,7 @@ function formatShippingEstimate(estimate: number): string {
 export async function action(props: Props, req: Request, ctx: AppContext) {
   const form = await req.formData();
   try {
+    // deno-lint-ignore no-explicit-any
     const result = await (ctx as any).invoke.wake.actions.shippingSimulation({
       ...props.items[0],
       cep: `${form.get("postalCode") ?? ""}`,
diff --git a/sections/Product/ProductDetails.tsx b/sections/Product/ProductDetails.tsx
index 0c9c59f..60ac432 100644
--- a/sections/Product/ProductDetails.tsx
+++ b/sections/Product/ProductDetails.tsx
@@ -9,6 +9,7 @@ import Tabs from "../../components/product/Tabs/index.tsx";
 import { ProductShelfComponent } from "../../sections/Product/ProductShelf.tsx";
 import { type Section as SectionType } from "@deco/deco/blocks";
 import ReviewForm from "../../components/product/ProductReview/ReviewForm.tsx";
+import Reviews from "../../components/product/ProductReview/Reviews.tsx";
 
 export interface Props {
   /** @title Integration */
@@ -18,7 +19,6 @@ export interface Props {
 }
 
 export default function ProductDetails(props: Props) {
-
   if (!props.page) {
     return (
       <div class="w-full flex justify-center items-center py-28">
@@ -32,13 +32,15 @@ export default function ProductDetails(props: Props) {
     );
   }
 
+  const { productID, aggregateRating, review } = props?.page?.product
+  console.log(review)
+  console.log(aggregateRating)
+
   return (
     <>
       <Section.Container class="mobile:mt-[60px]">
         <Breadcrumb itemListElement={props.page.breadcrumbList.itemListElement} />
-
-        <div
-          class={clx(
+        <div class={clx(
             "flex gap-5",
             "mobile:flex-col w-full"
           )}
@@ -50,10 +52,23 @@ export default function ProductDetails(props: Props) {
             <ProductInfo {...props} />
           </div>
         </div>
-        <div class="w-full desktop:max-w-[calc(100%_-_254px)]">
+        <div class="w-full desktop:max-w-[calc(100%_-_8.33%)] mx-auto">
           <Tabs page={props.page} />
         </div>
       </Section.Container>
+      <Section.Container class="bg-[#F5F5F5] desktop:!h-[507px] !py-12">
+        <div class={clx(
+          "flex gap-20 mobile:gap-[26px] items-center w-full desktop:max-w-[calc(100%_-_8.33%)] h-full mx-auto",
+          "mobile:flex-col-reverse"
+        )}>
+          <ReviewForm 
+            productVariantId={Number(productID)}
+            reviewCount={aggregateRating?.reviewCount}
+            ratingValue={aggregateRating?.ratingValue} 
+          />
+          <Reviews reviews={review} aggregateRating={aggregateRating}/>
+        </div>
+      </Section.Container>
       <props.productShelf.Component {...props.productShelf.props} />
     </>
   );
diff --git a/static/sprites.svg b/static/sprites.svg
index cf255c9..2b49bcc 100644
--- a/static/sprites.svg
+++ b/static/sprites.svg
@@ -51,5 +51,7 @@
 	<symbol id="remove" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="20" height="20" rx="10" fill="#F9F9F9"/><path d="M9.23077 10.749H5.4C5.17909 10.749 5 10.5699 5 10.349V9.65098C5 9.43006 5.17909 9.25098 5.4 9.25098H9.23077L10.7692 9.25103L14.6 9.25098C14.8209 9.25098 15 9.43007 15 9.65098V10.349C15 10.5699 14.8209 10.749 14.6 10.749H10.7692H9.23077Z" fill="#999999"/></symbol>
 	<symbol id="closeCart" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2L2 14" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 2L14 14" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 	<symbol id="cart" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.19623 0C2.34853 0 1.53556 0.336744 0.936153 0.936153C0.336744 1.53556 0 2.34853 0 3.19623C0 4.04392 0.336744 4.85689 0.936153 5.4563C1.53556 6.05571 2.34853 6.39245 3.19623 6.39245H10.2918L12.8552 16.6651L22.4311 67.7088C22.5682 68.4413 22.9569 69.1028 23.53 69.579C24.1032 70.0552 24.8246 70.3163 25.5698 70.317H31.9623C28.5715 70.317 25.3196 71.6639 22.922 74.0616C20.5243 76.4592 19.1774 79.7111 19.1774 83.1019C19.1774 86.4926 20.5243 89.7445 22.922 92.1421C25.3196 94.5398 28.5715 95.8868 31.9623 95.8868C35.353 95.8868 38.6049 94.5398 41.0025 92.1421C43.4002 89.7445 44.7472 86.4926 44.7472 83.1019C44.7472 79.7111 43.4002 76.4592 41.0025 74.0616C38.6049 71.6639 35.353 70.317 31.9623 70.317H76.7094C73.3186 70.317 70.0667 71.6639 67.6691 74.0616C65.2715 76.4592 63.9245 79.7111 63.9245 83.1019C63.9245 86.4926 65.2715 89.7445 67.6691 92.1421C70.0667 94.5398 73.3186 95.8868 76.7094 95.8868C80.1002 95.8868 83.3521 94.5398 85.7497 92.1421C88.1473 89.7445 89.4943 86.4926 89.4943 83.1019C89.4943 79.7111 88.1473 76.4592 85.7497 74.0616C83.3521 71.6639 80.1002 70.317 76.7094 70.317H83.1019C83.847 70.3163 84.5685 70.0552 85.1416 69.579C85.7147 69.1028 86.1034 68.4413 86.2405 67.7088L95.8292 16.5692C95.9156 16.1079 95.8993 15.6333 95.7815 15.179C95.6637 14.7247 95.4473 14.3019 95.1477 13.9407C94.8481 13.5794 94.4727 13.2886 94.048 13.0889C93.6233 12.8891 93.1598 12.7853 92.6905 12.7849H18.4742L15.8852 2.42274C15.7127 1.73097 15.3138 1.11675 14.7521 0.677758C14.1903 0.238762 13.4979 0.000196961 12.7849 0H3.19623ZM28.2227 63.9245L19.8294 19.1774H88.8423L80.449 63.9245H28.2227ZM38.3547 83.1019C38.3547 84.7972 37.6812 86.4232 36.4824 87.622C35.2836 88.8208 33.6576 89.4943 31.9623 89.4943C30.2669 89.4943 28.6409 88.8208 27.4421 87.622C26.2433 86.4232 25.5698 84.7972 25.5698 83.1019C25.5698 81.4065 26.2433 79.7805 27.4421 78.5817C28.6409 77.3829 30.2669 76.7094 31.9623 76.7094C33.6576 76.7094 35.2836 77.3829 36.4824 78.5817C37.6812 79.7805 38.3547 81.4065 38.3547 83.1019ZM83.1019 83.1019C83.1019 84.7972 82.4284 86.4232 81.2295 87.622C80.0307 88.8208 78.4048 89.4943 76.7094 89.4943C75.014 89.4943 73.3881 88.8208 72.1893 87.622C70.9904 86.4232 70.317 84.7972 70.317 83.1019C70.317 81.4065 70.9904 79.7805 72.1893 78.5817C73.3881 77.3829 75.014 76.7094 76.7094 76.7094C78.4048 76.7094 80.0307 77.3829 81.2295 78.5817C82.4284 79.7805 83.1019 81.4065 83.1019 83.1019Z" fill="#A3E3FF"/></symbol>
+	<symbol id="arrow-top"  viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.44238 10.2065L10.0005 1.64844L18.5586 10.2065" stroke="#8F2AED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+	<svg  id="arrow-bottom" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.44238 1.64893L10.0005 10.207L18.5586 1.64893" stroke="#8F2AED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
 </svg>
 
diff --git a/static/tailwind.css b/static/tailwind.css
index 3000021..5bdd214 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -839,11 +839,6 @@ html {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-.carousel-vertical {
-  flex-direction: column;
-  overflow-y: scroll;
-  scroll-snap-type: y mandatory;
-}
 .carousel-item {
   box-sizing: content-box;
   display: flex;
@@ -3748,9 +3743,6 @@ details.collapse summary::-webkit-details-marker {
 .left-10 {
   left: 2.5rem;
 }
-.left-2 {
-  left: 0.5rem;
-}
 .left-4 {
   left: 1rem;
 }
@@ -4176,6 +4168,9 @@ details.collapse summary::-webkit-details-marker {
 .h-32 {
   height: 8rem;
 }
+.h-4 {
+  height: 1rem;
+}
 .h-5 {
   height: 1.25rem;
 }
@@ -4251,6 +4246,9 @@ details.collapse summary::-webkit-details-marker {
 .h-\[88px\] {
   height: 88px;
 }
+.h-\[89px\] {
+  height: 89px;
+}
 .h-\[var\(--categoryCardCircle-size\)\] {
   height: var(--categoryCardCircle-size);
 }
@@ -4370,6 +4368,9 @@ details.collapse summary::-webkit-details-marker {
 .w-12 {
   width: 3rem;
 }
+.w-4 {
+  width: 1rem;
+}
 .w-4\/5 {
   width: 80%;
 }
@@ -4528,8 +4529,8 @@ details.collapse summary::-webkit-details-marker {
 .min-w-\[4px\] {
   min-width: 4px;
 }
-.\!max-w-\[82\.36\%\] {
-  max-width: 82.36% !important;
+.\!max-w-full {
+  max-width: 100% !important;
 }
 .max-w-10 {
   max-width: 2.5rem;
@@ -4723,6 +4724,15 @@ details.collapse summary::-webkit-details-marker {
 .cursor-pointer {
   cursor: pointer;
 }
+.resize-none {
+  resize: none;
+}
+.snap-y {
+  scroll-snap-type: y var(--tw-scroll-snap-strictness);
+}
+.snap-start {
+  scroll-snap-align: start;
+}
 .list-inside {
   list-style-position: inside;
 }
@@ -4846,6 +4856,9 @@ details.collapse summary::-webkit-details-marker {
 .gap-2\.5 {
   gap: 0.625rem;
 }
+.gap-20 {
+  gap: 5rem;
+}
 .gap-3 {
   gap: 0.75rem;
 }
@@ -4882,6 +4895,9 @@ details.collapse summary::-webkit-details-marker {
 .gap-\[22px\] {
   gap: 22px;
 }
+.gap-\[26px\] {
+  gap: 26px;
+}
 .gap-\[2px\] {
   gap: 2px;
 }
@@ -4940,6 +4956,11 @@ details.collapse summary::-webkit-details-marker {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
 .space-y-\[10px\] > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(10px * calc(1 - var(--tw-space-y-reverse)));
@@ -5004,6 +5025,9 @@ details.collapse summary::-webkit-details-marker {
 .break-words {
   overflow-wrap: break-word;
 }
+.\!rounded-sm {
+  border-radius: 0.125rem !important;
+}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -5084,6 +5108,9 @@ details.collapse summary::-webkit-details-marker {
 .rounded-bl-none {
   border-bottom-left-radius: 0px;
 }
+.\!border {
+  border-width: 1px !important;
+}
 .border {
   border-width: 1px;
 }
@@ -5133,6 +5160,10 @@ details.collapse summary::-webkit-details-marker {
 .border-none {
   border-style: none;
 }
+.\!border-\[\#DCDCDC\] {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(220 220 220 / var(--tw-border-opacity)) !important;
+}
 .border-\[\#363B4B\] {
   --tw-border-opacity: 1;
   border-color: rgb(54 59 75 / var(--tw-border-opacity));
@@ -5302,10 +5333,6 @@ details.collapse summary::-webkit-details-marker {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-nc,oklch(var(--nc)/var(--tw-bg-opacity)));
 }
-.bg-orange-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
-}
 .bg-primary {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
@@ -5402,6 +5429,9 @@ details.collapse summary::-webkit-details-marker {
 .p-8 {
   padding: 2rem;
 }
+.p-\[14px\] {
+  padding: 14px;
+}
 .p-\[2px\] {
   padding: 2px;
 }
@@ -5411,6 +5441,10 @@ details.collapse summary::-webkit-details-marker {
 .p-\[6\.5px\] {
   padding: 6.5px;
 }
+.\!py-12 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+}
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -5920,6 +5954,10 @@ details.collapse summary::-webkit-details-marker {
   --tw-text-opacity: 1;
   color: rgb(54 59 75 / var(--tw-text-opacity));
 }
+.text-\[\#373737\] {
+  --tw-text-opacity: 1;
+  color: rgb(55 55 55 / var(--tw-text-opacity));
+}
 .text-\[\#667781\] {
   --tw-text-opacity: 1;
   color: rgb(102 119 129 / var(--tw-text-opacity));
@@ -6225,6 +6263,21 @@ details.collapse summary::-webkit-details-marker {
   width: calc(min(82.39583vw, calc(96rem - 254px)) / var(--quantity-tabs)) !important;
 }
 
+.custom-scrollbar::-webkit-scrollbar {
+  width: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: #DBB9F9;
+  border-radius: 20px;
+  border: 1px solid #E7E7E7;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background-color: #E7E7E7;
+  border-radius: 20px;
+}
+
 .invalid\:input-error:invalid {
   --tw-border-opacity: 1;
   border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
@@ -6378,6 +6431,15 @@ details.collapse summary::-webkit-details-marker {
   }
 }
 
+@media (min-width: 1026px) {
+
+  .desktop\:carousel-vertical {
+    flex-direction: column;
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
+  }
+}
+
 .marker\:text-\[\#BD87ED\] *::marker {
   color: rgb(189 135 237 );
 }
@@ -6753,6 +6815,11 @@ details.collapse summary::-webkit-details-marker {
   opacity: 1;
 }
 
+.group:disabled .group-disabled\:border-primary {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
+}
+
 .group:disabled .group-disabled\:bg-\[\#0D1717\] {
   --tw-bg-opacity: 1;
   background-color: rgb(13 23 23 / var(--tw-bg-opacity));
@@ -6940,6 +7007,10 @@ details.collapse summary::-webkit-details-marker {
     height: 1.25rem;
   }
 
+  .mobile\:h-6 {
+    height: 1.5rem;
+  }
+
   .mobile\:h-8 {
     height: 2rem;
   }
@@ -6968,6 +7039,10 @@ details.collapse summary::-webkit-details-marker {
     max-height: 27px;
   }
 
+  .mobile\:max-h-\[382px\] {
+    max-height: 382px;
+  }
+
   .mobile\:max-h-\[596px\] {
     max-height: 596px;
   }
@@ -6988,6 +7063,10 @@ details.collapse summary::-webkit-details-marker {
     width: 1.25rem;
   }
 
+  .mobile\:w-6 {
+    width: 1.5rem;
+  }
+
   .mobile\:w-8 {
     width: 2rem;
   }
@@ -7089,6 +7168,10 @@ details.collapse summary::-webkit-details-marker {
     flex-direction: column;
   }
 
+  .mobile\:flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+
   .mobile\:justify-center {
     justify-content: center;
   }
@@ -7125,6 +7208,10 @@ details.collapse summary::-webkit-details-marker {
     gap: 25px;
   }
 
+  .mobile\:gap-\[26px\] {
+    gap: 26px;
+  }
+
   .mobile\:gap-\[4\.26vw\] {
     gap: 4.26vw;
   }
@@ -7397,10 +7484,18 @@ details.collapse summary::-webkit-details-marker {
     display: none;
   }
 
+  .desktop\:\!h-\[507px\] {
+    height: 507px !important;
+  }
+
   .desktop\:h-16 {
     height: 4rem;
   }
 
+  .desktop\:max-h-\[71\.2\%\] {
+    max-height: 71.2%;
+  }
+
   .desktop\:max-h-\[var\(--bannerSlider-heigh\)\] {
     max-height: var(--bannerSlider-heigh);
   }
@@ -7413,6 +7508,10 @@ details.collapse summary::-webkit-details-marker {
     width: 4rem;
   }
 
+  .desktop\:w-\[29\.24\%\] {
+    width: 29.24%;
+  }
+
   .desktop\:w-\[45\.13vw\] {
     width: 45.13vw;
   }
@@ -7442,8 +7541,8 @@ details.collapse summary::-webkit-details-marker {
     max-width: calc((100% + 60px) * 0.69027);
   }
 
-  .desktop\:max-w-\[calc\(100\%_-_254px\)\] {
-    max-width: calc(100% - 254px);
+  .desktop\:max-w-\[calc\(100\%_-_8\.33\%\)\] {
+    max-width: calc(100% - 8.33%);
   }
 
   .desktop\:max-w-\[var\(--bannerSlider-width\)\] {
@@ -7458,6 +7557,10 @@ details.collapse summary::-webkit-details-marker {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .desktop\:items-center {
+    align-items: center;
+  }
+
   .desktop\:justify-center {
     justify-content: center;
   }
@@ -7466,6 +7569,10 @@ details.collapse summary::-webkit-details-marker {
     justify-content: space-between !important;
   }
 
+  .desktop\:gap-10 {
+    gap: 2.5rem;
+  }
+
   .desktop\:gap-2 {
     gap: 0.5rem;
   }
@@ -7486,6 +7593,10 @@ details.collapse summary::-webkit-details-marker {
     gap: 6.59vw;
   }
 
+  .desktop\:overflow-y-auto {
+    overflow-y: auto;
+  }
+
   .desktop\:rounded {
     border-radius: 0.25rem;
   }
@@ -7502,6 +7613,10 @@ details.collapse summary::-webkit-details-marker {
     padding-left: 60px;
   }
 
+  .desktop\:pr-4 {
+    padding-right: 1rem;
+  }
+
   .desktop\:text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;
diff --git a/tailwind.css b/tailwind.css
index 6ffa0f1..1f9cfe3 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -151,4 +151,19 @@
 
 .tab-width {
   width: calc(min(82.39583vw, calc(96rem - 254px)) / var(--quantity-tabs)) !important;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: #DBB9F9;
+  border-radius: 20px;
+  border: 1px solid #E7E7E7;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background-color: #E7E7E7;
+  border-radius: 20px;
 }
\ No newline at end of file