diff --git a/.eslintrc.json b/.eslintrc.json
index 74b2c9c..29b9fe9 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,13 +1,14 @@
 {
   "extends": [
+    "prettier",
     "next/core-web-vitals",
     "next/typescript",
     "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
-    "prettier",
     "plugin:@next/next/recommended"
   ],
-  "plugins": ["prettier", "eslint-plugin-import"],
+  "plugins": ["prettier", "eslint-plugin-import", "@typescript-eslint"],
   "rules": {
     "lines-between-class-members": [
       "error",
@@ -31,7 +32,9 @@
     "react/no-unescaped-entities": "error",
     "react/react-in-jsx-scope": "off",
     "react/prop-types": [2, { "ignore": ["className", "position"] }],
-    "import/no-deprecated": "warn"
+    "import/no-deprecated": "warn",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
   },
   "env": {
     "browser": true,
diff --git a/.prettierrc b/.prettierrc
index 276e2c8..bada979 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,6 @@
 {
   "semi": true,
   "singleQuote": true,
-  "jsxSingleQuote": true
-}
\ No newline at end of file
+  "jsxSingleQuote": true,
+  "printWidth": 120
+}
diff --git a/next.config.mjs b/next.config.mjs
index c05102f..8dae4f2 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -7,6 +7,10 @@ const nextConfig = {
             protocol: 'https',
             hostname: '**.amazonaws.com',
           },
+          {
+            protocol: 'http',
+            hostname: 'localhost',
+          },
         ],
         unoptimized: true,
     },
diff --git a/package.json b/package.json
index 0f849e8..46747e3 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",
@@ -43,6 +44,8 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/parser": "^8.8.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.13",
     "eslint-config-prettier": "^9.1.0",
diff --git a/src/app/(static)/about-us/page.tsx b/src/app/(static)/about-us/page.tsx
index 70c5def..f229def 100644
--- a/src/app/(static)/about-us/page.tsx
+++ b/src/app/(static)/about-us/page.tsx
@@ -17,13 +17,10 @@ export default function AboutUsPage() {
           Welcome to the World of Mozimo Magic
         </div>
         <div className='w-full text-s-normal text-justify p-12'>
-          Indulge in the Luxurious. Immerse in the Captivating. Savor the Fresh.
-          At Mozimo, we curate a chocolate experience that transports you to a
-          world of opulence, captivates your senses with mesmerizing aromas and
-          visuals, and delights your taste buds with the vibrant flavors of
-          freshly crafted chocolates. Join us on a journey of pure luxury,
-          captivating moments, and a fresh perspective on the art of
-          chocolate-making.
+          Indulge in the Luxurious. Immerse in the Captivating. Savor the Fresh. At Mozimo, we curate a chocolate
+          experience that transports you to a world of opulence, captivates your senses with mesmerizing aromas and
+          visuals, and delights your taste buds with the vibrant flavors of freshly crafted chocolates. Join us on a
+          journey of pure luxury, captivating moments, and a fresh perspective on the art of chocolate-making.
         </div>
         <div className='w-full'>
           <AnimatedImage
@@ -39,25 +36,16 @@ export default function AboutUsPage() {
       <section className='flex flex-col md:flex-row items-center'>
         {/* Left Column - Image */}
         <div className='w-full md:w-1/2'>
-          <AnimatedImage
-            src={prAmPic}
-            alt='Left Side Image'
-            className='w-full h-auto'
-            sizes='100vw'
-          />
+          <AnimatedImage src={prAmPic} alt='Left Side Image' className='w-full h-auto' sizes='100vw' />
         </div>
         {/* Right Column - Text with Header */}
         <div className='w-full md:w-1/2'>
           <div className='m-8 space-y-10'>
-            <p className='text-s-title font-normal text-justify font-montera'>
-              Our Founders Priyanka and Amritanshu
-            </p>
+            <p className='text-s-title font-normal text-justify font-montera'>Our Founders Priyanka and Amritanshu</p>
             <p className='text-s-normal text-justify'>
-              are the proud founders of Mozimo, a bean-to-bar chocolate shop
-              that celebrates the rich and distinctive flavors of single origin
-              cocoa beans. Their journey with Mozimo has been a passionate
-              pursuit of creating exceptional chocolate that tantalizes the
-              taste buds and tells the unique story of each cocoa bean&apos;s
+              are the proud founders of Mozimo, a bean-to-bar chocolate shop that celebrates the rich and distinctive
+              flavors of single origin cocoa beans. Their journey with Mozimo has been a passionate pursuit of creating
+              exceptional chocolate that tantalizes the taste buds and tells the unique story of each cocoa bean&apos;s
               origin.
             </p>
           </div>
@@ -66,90 +54,53 @@ export default function AboutUsPage() {
       <section className='flex flex-col md:flex-row items-center'>
         <div className='w-full md:w-1/2'>
           <div className='m-8 space-y-10'>
-            <h2 className='text-s-title font-normal text-justify font-montera'>
-              Capturing the essence of
-            </h2>
-            <h3 className='text-s-headline font-normal text-justify font-samantha'>
-              Italian Chocolate
-            </h3>
+            <h2 className='text-s-title font-normal text-justify font-montera'>Capturing the essence of</h2>
+            <h3 className='text-s-headline font-normal text-justify font-samantha'>Italian Chocolate</h3>
             <p className='text-s-normal text-justify'>
-              With over 15 years of hospitality experience, these avid travelers
-              scoured the globe for the finest cocoa beans and techniques. Deep
-              in remote cocoa farms, they cultivated relationships with farmers
-              committed to sustainability. Carefully selecting beans, they honor
-              each harvest&apos;s stories. In their cozy workshop, they roast,
-              crack, and refine beans with modern techniques, capturing their
-              essence in every Mozimo chocolate bar.
+              With over 15 years of hospitality experience, these avid travelers scoured the globe for the finest cocoa
+              beans and techniques. Deep in remote cocoa farms, they cultivated relationships with farmers committed to
+              sustainability. Carefully selecting beans, they honor each harvest&apos;s stories. In their cozy workshop,
+              they roast, crack, and refine beans with modern techniques, capturing their essence in every Mozimo
+              chocolate bar.
             </p>
           </div>
         </div>
         <div className='w-full md:w-1/2'>
-          <AnimatedImage
-            src={dryingPic}
-            alt='Beans Drying'
-            className='w-full h-auto'
-            sizes='100vw'
-          />
+          <AnimatedImage src={dryingPic} alt='Beans Drying' className='w-full h-auto' sizes='100vw' />
         </div>
       </section>
       {/* Fourth Three-Column Layout (Collections) */}
       <section className='flex flex-col md:flex-row items-center'>
         <div className='w-full md:w-1/2'>
-          <AnimatedImage
-            src={chefPic}
-            alt='Beans Drying'
-            className='w-full h-auto'
-            sizes='100vw'
-          />
+          <AnimatedImage src={chefPic} alt='Beans Drying' className='w-full h-auto' sizes='100vw' />
         </div>
         <div className='w-full md:w-1/2'>
-          <AnimatedImage
-            src={barkPic}
-            alt='Beans Drying'
-            className='w-full h-auto'
-            loading='lazy'
-            sizes='100vw'
-          />
+          <AnimatedImage src={barkPic} alt='Beans Drying' className='w-full h-auto' loading='lazy' sizes='100vw' />
         </div>
       </section>
       <section className='flex flex-col md:flex-col items-center'>
         <div className='flex w-full text-s-normal text-justify p-12'>
-          Under the mentorship of the master chocolatier Gabriele Rinaudo,
-          Priyanka and Amritanshu dedicated themselves to mastering the
-          intricate art of chocolate making. With unwavering determination and a
-          thirst for knowledge, they immersed themselves in the world of cocoa,
-          learning the nuances of sourcing the finest ingredients and perfecting
-          the delicate techniques that transform raw beans into exquisite
-          chocolate creations.
+          Under the mentorship of the master chocolatier Gabriele Rinaudo, Priyanka and Amritanshu dedicated themselves
+          to mastering the intricate art of chocolate making. With unwavering determination and a thirst for knowledge,
+          they immersed themselves in the world of cocoa, learning the nuances of sourcing the finest ingredients and
+          perfecting the delicate techniques that transform raw beans into exquisite chocolate creations.
         </div>
         <div className='flex w-full text-s-normal text-justify p-12'>
-          In addition to their training under Gabriele Rinaudo, they embarked on
-          a transformative journey to Italy to further enrich their
-          understanding of the art of chocolate making. This immersive
-          experience in Italy not only broadened their knowledge but also
-          deepened their appreciation for the timeless artistry and dedication
-          that define the world of chocolate making.
+          In addition to their training under Gabriele Rinaudo, they embarked on a transformative journey to Italy to
+          further enrich their understanding of the art of chocolate making. This immersive experience in Italy not only
+          broadened their knowledge but also deepened their appreciation for the timeless artistry and dedication that
+          define the world of chocolate making.
         </div>
         <div className='flex w-full'>
-          <AnimatedImage
-            src={italyPic}
-            alt='Training'
-            className='w-full h-auto'
-            loading='lazy'
-            sizes='100vw'
-          />
+          <AnimatedImage src={italyPic} alt='Training' className='w-full h-auto' loading='lazy' sizes='100vw' />
         </div>
         <div className='flex w-full text-s-normal text-justify p-12'>
-          Passionate about chocolate as a medium for creativity and exploration,
-          they view it not just as a confection but as a canvas for artistic
-          expression. Constantly seeking inspiration, they push the boundaries
-          of chocolate-making, committed to crafting sensory experiences that
-          delight the taste buds, eyes, and soul. Proud to be part of the global
-          craft chocolate revolution, they aim to inspire others while
-          championing cocoa diversity and sustainability. Back in the workshop,
-          cacao beans are roasted, cracked, and refined with modern techniques,
-          crafting each bar of Mozimo chocolate into a masterpiece, capturing
-          the essence of its origins.
+          Passionate about chocolate as a medium for creativity and exploration, they view it not just as a confection
+          but as a canvas for artistic expression. Constantly seeking inspiration, they push the boundaries of
+          chocolate-making, committed to crafting sensory experiences that delight the taste buds, eyes, and soul. Proud
+          to be part of the global craft chocolate revolution, they aim to inspire others while championing cocoa
+          diversity and sustainability. Back in the workshop, cacao beans are roasted, cracked, and refined with modern
+          techniques, crafting each bar of Mozimo chocolate into a masterpiece, capturing the essence of its origins.
         </div>
       </section>
     </div>
diff --git a/src/app/(static)/festival/page.tsx b/src/app/(static)/festival/page.tsx
index bb05501..91254b7 100644
--- a/src/app/(static)/festival/page.tsx
+++ b/src/app/(static)/festival/page.tsx
@@ -30,56 +30,36 @@ export default function FestivalPage() {
           </a>
         </div>
         <AnimatedText finishClass='delay-300'>
-          <h2 className='text-s-headline font-normal text-justify font-samantha p-12'>
-            Sweet Moments with Mozimo
-          </h2>
+          <h2 className='text-s-headline font-normal text-justify font-samantha p-12'>Sweet Moments with Mozimo</h2>
         </AnimatedText>
         <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
           <div className='w-full text-s-normal text-justify pb-12'>
-            “Transforming cacao beans sourced straight from the pod into rich,
-            velvety smooth chocolate is pure magic. This is why we take great
-            pride in being called the &apos;Alchemists of the Chocolate
-            World&apos;.”
+            “Transforming cacao beans sourced straight from the pod into rich, velvety smooth chocolate is pure magic.
+            This is why we take great pride in being called the &apos;Alchemists of the Chocolate World&apos;.”
           </div>
         </AnimatedText>
       </section>
       <section className='flex flex-col md:flex-row items-center'>
         {/* Left Column - Image */}
         <div className='w-full md:w-1/2'>
-          <AnimatedImage
-            src={redPralineBoxPic}
-            alt='Left Side Image'
-            className='w-full h-auto'
-            sizes='100vw'
-          />
+          <AnimatedImage src={redPralineBoxPic} alt='Left Side Image' className='w-full h-auto' sizes='100vw' />
         </div>
         {/* Right Column - Text with Header */}
         <div className='w-full md:w-1/2'>
           <div className='m-8 space-y-10'>
-            <AnimatedText
-              startClass='translate-y-8'
-              finishClass='translate-y-0'
-            >
+            <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
               <p className='text-s-normal text-justify'>
-                Our journey at Mozimo has been a passionate pursuit of creating
-                exceptional chocolate that tantalizes the taste buds and tells
-                the unique story of each cocoa bean&apos;s origin. We traversed
-                the globe to search for the finest beans, equipment, and
-                techniques. We ventured deep into remote cocoa farms to select
-                the best beans as we cherished the stories and traditions behind
-                every harvest.
+                Our journey at Mozimo has been a passionate pursuit of creating exceptional chocolate that tantalizes
+                the taste buds and tells the unique story of each cocoa bean&apos;s origin. We traversed the globe to
+                search for the finest beans, equipment, and techniques. We ventured deep into remote cocoa farms to
+                select the best beans as we cherished the stories and traditions behind every harvest.
               </p>
             </AnimatedText>
-            <AnimatedText
-              startClass='translate-y-8'
-              finishClass='translate-y-0'
-            >
+            <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
               <p className='text-s-normal text-justify'>
-                Beholding our vision, we started the meticulous process of
-                crafting rich, exquisite, delectable chocolates, ultimately
-                perfecting the art. As we continue our journey at Mozimo, we are
-                proud to be a part of the global craft chocolate revolution
-                celebrating the diversity of cocoa.
+                Beholding our vision, we started the meticulous process of crafting rich, exquisite, delectable
+                chocolates, ultimately perfecting the art. As we continue our journey at Mozimo, we are proud to be a
+                part of the global craft chocolate revolution celebrating the diversity of cocoa.
               </p>
             </AnimatedText>
           </div>
@@ -89,62 +69,36 @@ export default function FestivalPage() {
         <div className='w-full md:w-1/2'>
           <div className='m-8 space-y-5'>
             <AnimatedText finishClass='delay-300'>
-              <p className='text-s-normal font-justify uppercase'>
-                Aritsan Craftmanship
-              </p>
+              <p className='text-s-normal font-justify uppercase'>Aritsan Craftmanship</p>
             </AnimatedText>
-            <AnimatedText
-              startClass='translate-y-8'
-              finishClass='translate-y-0'
-            >
+            <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
               <p className='text-s-normal text-justify pb-12'>
-                We are an atelier crafting chocolate from the finest
-                single-source beans. Our commitment to the art of making
-                chocolate ensures that each piece epitomizes supreme taste &
-                quality.
+                We are an atelier crafting chocolate from the finest single-source beans. Our commitment to the art of
+                making chocolate ensures that each piece epitomizes supreme taste & quality.
               </p>
             </AnimatedText>
             <AnimatedText finishClass='delay-300'>
-              <p className='text-s-normal font-justify uppercase'>
-                Ethics and Sustainability
-              </p>
+              <p className='text-s-normal font-justify uppercase'>Ethics and Sustainability</p>
             </AnimatedText>
-            <AnimatedText
-              startClass='translate-y-8'
-              finishClass='translate-y-0'
-            >
+            <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
               <p className='text-s-normal text-justify pb-12'>
-                We are committed to sustainability and being ethical in all that
-                we do. From selecting ingredients from remote farmers to our
-                production practices, we prioritize sustainability and ethical
-                practices.
+                We are committed to sustainability and being ethical in all that we do. From selecting ingredients from
+                remote farmers to our production practices, we prioritize sustainability and ethical practices.
               </p>
             </AnimatedText>
             <AnimatedText finishClass='delay-300'>
-              <p className='text-s-normal font-justify uppercase'>
-                Commitment to Excellence
-              </p>
+              <p className='text-s-normal font-justify uppercase'>Commitment to Excellence</p>
             </AnimatedText>
-            <AnimatedText
-              startClass='translate-y-8'
-              finishClass='translate-y-0'
-            >
+            <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
               <p className='text-s-normal text-justify'>
-                We are inspired to create the best-quality chocolate in our
-                pursuit of excellence. This involves refining ingredients,
-                updating processes, and continuously striving to become the best
-                in the game.
+                We are inspired to create the best-quality chocolate in our pursuit of excellence. This involves
+                refining ingredients, updating processes, and continuously striving to become the best in the game.
               </p>
             </AnimatedText>
           </div>
         </div>
         <div className='w-full md:w-1/2'>
-          <AnimatedImage
-            src={bluePralineBoxOpenPic}
-            alt='Beans Drying'
-            className='w-full h-auto'
-            sizes='100vw'
-          />
+          <AnimatedImage src={bluePralineBoxOpenPic} alt='Beans Drying' className='w-full h-auto' sizes='100vw' />
         </div>
       </section>
       {/* Fourth Three-Column Layout (Collections) */}
@@ -152,78 +106,53 @@ export default function FestivalPage() {
         <AnimatedText finishClass='delay-300'>
           <div className='font-normal text-center p-12'>
             <span className='text-s-headline font-montera'>Specimens of</span>{' '}
-            <span className='text-s-headline font-samantha'>
-              Exquisite Craftsmanship
-            </span>
+            <span className='text-s-headline font-samantha'>Exquisite Craftsmanship</span>
           </div>
         </AnimatedText>
         <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
           <div className='text-s-normal text-justify pb-12'>
-            Every creation of Mozimo&apos;s chocolate is a specimen of
-            craftsmanship of the highest quality by the finest chocolatiers.
+            Every creation of Mozimo&apos;s chocolate is a specimen of craftsmanship of the highest quality by the
+            finest chocolatiers.
           </div>
         </AnimatedText>
       </section>
       <section className='flex flex-col md:flex-row items-center'>
         <div className='w-full md:w-1/2'>
-          <AnimatedImage
-            src={bluePralineBoxTwoPic}
-            alt='Beans Drying'
-            className='w-full h-auto'
-            sizes='100vw'
-          />
+          <AnimatedImage src={bluePralineBoxTwoPic} alt='Beans Drying' className='w-full h-auto' sizes='100vw' />
         </div>
         <div className='w-full md:w-1/2'>
-          <AnimatedImage
-            src={goldPralineBoxPic}
-            alt='Beans Drying'
-            className='w-full h-auto'
-            sizes='100vw'
-          />
+          <AnimatedImage src={goldPralineBoxPic} alt='Beans Drying' className='w-full h-auto' sizes='100vw' />
         </div>
       </section>
       <section className='flex flex-col items-center'>
         <AnimatedText finishClass='delay-300'>
           <p className='font-normal text-center p-12'>
-            <span className='text-s-headline font-montera'>
-              Immerse yourself in the
-            </span>{' '}
-            <span className='text-s-headline font-samantha'>
-              Italian Chocolate Experience
-            </span>
+            <span className='text-s-headline font-montera'>Immerse yourself in the</span>{' '}
+            <span className='text-s-headline font-samantha'>Italian Chocolate Experience</span>
           </p>
         </AnimatedText>
         <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
           <p className='text-s-normal text-center pb-12'>
-            Indulge in the authentic artistry of the Cioccolaterias of Italy
-            with handcrafted artisanal chocolates by Mozimo.
+            Indulge in the authentic artistry of the Cioccolaterias of Italy with handcrafted artisanal chocolates by
+            Mozimo.
           </p>
         </AnimatedText>
-        <AnimatedImage
-          src={redBarkBoxPic}
-          alt='Training'
-          className='w-full h-auto'
-        />
+        <AnimatedImage src={redBarkBoxPic} alt='Training' className='w-full h-auto' />
         <AnimatedText finishClass='delay-300'>
-          <p className='text-s-headline text-center font-montera p-12'>
-            Experience the art of gifting this Diwali
+          <p className='text-s-headline text-center font-montera p-12'>Experience the art of gifting this Diwali</p>
+        </AnimatedText>
+        <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
+          <p className='text-s-normal text-center pb-12'>
+            It’s time to celebrate the joy of togetherness, love, and the luxury of Mozimo’s chocolates. This Diwali,
+            let’s embrace the sweetness of life with our exquisite single-origin handcrafted chocolates, crafted to
+            elevate your festive moments.
           </p>
         </AnimatedText>
         <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
           <p className='text-s-normal text-center pb-12'>
-            It’s time to celebrate the joy of togetherness, love, and the luxury
-            of Mozimo’s chocolates. This Diwali, let’s embrace the sweetness of
-            life with our exquisite single-origin handcrafted chocolates,
-            crafted to elevate your festive moments.
-          </p>
-        </AnimatedText>
-        <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
-          <p className='text-s-normal text-center pb-12'>
-            Let our handcrafted chocolates be a part of your Diwali rituals.
-            Whether you’re enjoying them during family gatherings, using them as
-            a centerpiece for your celebrations, or gifting them to friends or
-            colleagues, they are sure to bring warmth and sweetness to every
-            moment.
+            Let our handcrafted chocolates be a part of your Diwali rituals. Whether you’re enjoying them during family
+            gatherings, using them as a centerpiece for your celebrations, or gifting them to friends or colleagues,
+            they are sure to bring warmth and sweetness to every moment.
           </p>
         </AnimatedText>
       </section>
diff --git a/src/app/(static)/page.tsx b/src/app/(static)/page.tsx
index bad1bab..4203104 100644
--- a/src/app/(static)/page.tsx
+++ b/src/app/(static)/page.tsx
@@ -19,26 +19,19 @@ export default function HomePage() {
         <div className='w-full md:w-1/2 md:h-auto'>
           <div className='m-8 space-y-10'>
             <AnimatedText finishClass='delay-300'>
-              <h2 className='text-s-title font-normal text-justify font-montera'>
-                Brand Story
-              </h2>
+              <h2 className='text-s-title font-normal text-justify font-montera'>Brand Story</h2>
             </AnimatedText>
-            <AnimatedText
-              startClass='translate-y-8'
-              finishClass='translate-y-0'
-            >
+            <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
               <p className='text-s-normal text-justify'>
-                Mozimo&apos;s journey is a passionate pursuit of crafting
-                exceptional chocolate that celebrates the origin of each cocoa
-                bean.
+                Mozimo&apos;s journey is a passionate pursuit of crafting exceptional chocolate that celebrates the
+                origin of each cocoa bean.
               </p>
               <p className='text-s-normal text-justify'>
-                We meticulously roast, crack, winnow, and refine beans in-house,
-                using modern techniques to highlight their natural flavors.
+                We meticulously roast, crack, winnow, and refine beans in-house, using modern techniques to highlight
+                their natural flavors.
               </p>
               <p className='text-s-normal text-justify'>
-                Each chocolate is a masterpiece, capturing the essence of cocoa
-                in its purest form.
+                Each chocolate is a masterpiece, capturing the essence of cocoa in its purest form.
               </p>
             </AnimatedText>
           </div>
@@ -68,23 +61,14 @@ export default function HomePage() {
         <div className='w-full md:w-1/2'>
           <div className='m-8 space-y-10'>
             <AnimatedText finishClass='delay-300'>
-              <h2 className='text-s-title font-normal text-justify font-montera'>
-                Discover the delicate art of our
-              </h2>
-              <h3 className='text-s-title font-normal text-justify font-samantha'>
-                Chocolate Tempering
-              </h3>
+              <h2 className='text-s-title font-normal text-justify font-montera'>Discover the delicate art of our</h2>
+              <h3 className='text-s-title font-normal text-justify font-samantha'>Chocolate Tempering</h3>
             </AnimatedText>
-            <AnimatedText
-              startClass='translate-y-8'
-              finishClass='translate-y-0'
-            >
+            <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
               <p className='text-s-normal text-justify'>
-                Crafted to perfection Mozimo delivers a sublime sensory
-                experience with every bite. Experience the epitome of indulgence
-                with our perfectly tempered chocolate: velvety smooth,
-                exquisitely rich, and artfully balanced. Each bite offers a
-                symphony of nuanced cocoa flavors, melting luxuriously!
+                Crafted to perfection Mozimo delivers a sublime sensory experience with every bite. Experience the
+                epitome of indulgence with our perfectly tempered chocolate: velvety smooth, exquisitely rich, and
+                artfully balanced. Each bite offers a symphony of nuanced cocoa flavors, melting luxuriously!
               </p>
             </AnimatedText>
           </div>
diff --git a/src/app/(static)/privacy-policy/page.tsx b/src/app/(static)/privacy-policy/page.tsx
index 8c8d92f..b968d25 100644
--- a/src/app/(static)/privacy-policy/page.tsx
+++ b/src/app/(static)/privacy-policy/page.tsx
@@ -3,190 +3,158 @@ export default function TermsPage() {
     <div className='p-8'>
       <h1 className='text-4xl font-bold'>Privacy Policy</h1>
       <p className='mt-4 text-base'>
-        Mozimo.in recognizes the importance of maintaining your privacy. We
-        value your privacy and appreciate your trust in us. This Policy
-        describes how we treat user information we collect on
-        http://www.mozimo.in and other offline sources. This Privacy Policy
-        applies to current and former visitors to our website and to our online
-        customers. By visiting and/or using our website, you agree to this
-        Privacy Policy.
+        Mozimo.in recognizes the importance of maintaining your privacy. We value your privacy and appreciate your trust
+        in us. This Policy describes how we treat user information we collect on http://www.mozimo.in and other offline
+        sources. This Privacy Policy applies to current and former visitors to our website and to our online customers.
+        By visiting and/or using our website, you agree to this Privacy Policy.
       </p>
       <p className='mt-4 text-base font-bold'>Information We Collect</p>
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Contact Information:</span> We may collect
-        your name, email, mobile number, phone number, street, city, state,
-        pincode, country, and IP address.
+        <span className='font-bold'>Contact Information:</span> We may collect your name, email, mobile number, phone
+        number, street, city, state, pincode, country, and IP address.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Payment and Billing Information:</span> We
-        may collect your billing name, billing address, and payment method when
-        you make a purchase. We NEVER collect your credit card number, credit
-        card expiry date, or other credit card details on our website. Credit
-        card information will be processed by our secure online payment partner.
+        <span className='font-bold'>Payment and Billing Information:</span> We may collect your billing name, billing
+        address, and payment method when you make a purchase. We NEVER collect your credit card number, credit card
+        expiry date, or other credit card details on our website. Credit card information will be processed by our
+        secure online payment partner.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Information You Post:</span> We collect
-        information you post in a public space on our website or on a
-        third-party social media site related to Mozimo.in.
+        <span className='font-bold'>Information You Post:</span> We collect information you post in a public space on
+        our website or on a third-party social media site related to Mozimo.in.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Demographic Information:</span> We may
-        collect demographic information about you, including products you like,
-        products you intend to purchase, and products you buy. This may be
-        collected through surveys or other means.
+        <span className='font-bold'>Demographic Information:</span> We may collect demographic information about you,
+        including products you like, products you intend to purchase, and products you buy. This may be collected
+        through surveys or other means.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Other Information:</span> We may collect
-        information about your IP address, the browser you&apos;re using, the
-        website you came from, duration of time spent on our website, pages
-        accessed, or the website you visit when you leave us. We might also
-        collect information about your mobile device or the version of the
-        operating system you are using. How We Collect Information
+        <span className='font-bold'>Other Information:</span> We may collect information about your IP address, the
+        browser you&apos;re using, the website you came from, duration of time spent on our website, pages accessed, or
+        the website you visit when you leave us. We might also collect information about your mobile device or the
+        version of the operating system you are using. How We Collect Information
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Direct Collection:</span> We collect
-        information directly from you when you register on our website, make
-        purchases, post comments or queries, or contact us via phone or email.
+        <span className='font-bold'>Direct Collection:</span> We collect information directly from you when you register
+        on our website, make purchases, post comments or queries, or contact us via phone or email.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Passive Collection:</span> We use tracking
-        tools like Google Analytics, cookies, and web beacons to collect
-        information about your usage of our website.
+        <span className='font-bold'>Passive Collection:</span> We use tracking tools like Google Analytics, cookies, and
+        web beacons to collect information about your usage of our website.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Third-Party Sources:</span> We may receive
-        information from third parties, such as social media sites if you use
-        integrated social media features on our website.
+        <span className='font-bold'>Third-Party Sources:</span> We may receive information from third parties, such as
+        social media sites if you use integrated social media features on our website.
       </p>
 
       <p className='mt-4 text-lg font-bold'>Use of Your Personal Information</p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Contact You:</span> We may use your
-        information to contact you for purchase confirmations or promotional
-        purposes.
+        <span className='font-bold'>Contact You:</span> We may use your information to contact you for purchase
+        confirmations or promotional purposes.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Respond to Requests:</span> We may use your
-        information to confirm purchases or respond to queries.
+        <span className='font-bold'>Respond to Requests:</span> We may use your information to confirm purchases or
+        respond to queries.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Improve Products and Services:</span> We may
-        use your information to customize your experience and improve our
-        offerings.
+        <span className='font-bold'>Improve Products and Services:</span> We may use your information to customize your
+        experience and improve our offerings.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Site Trends and Customer Interests:</span>{' '}
-        We may analyze your information to enhance our website and products.
+        <span className='font-bold'>Site Trends and Customer Interests:</span> We may analyze your information to
+        enhance our website and products.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Security:</span> We may use your information
-        to protect our company, customers, or website.
+        <span className='font-bold'>Security:</span> We may use your information to protect our company, customers, or
+        website.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Marketing:</span> We may send information
-        about special promotions, offers, new features, or products. If you make
-        a purchase, you may be enrolled in our newsletter.
+        <span className='font-bold'>Marketing:</span> We may send information about special promotions, offers, new
+        features, or products. If you make a purchase, you may be enrolled in our newsletter.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Transactional Communications:</span> We may
-        send you emails or SMS regarding your account or purchases.
+        <span className='font-bold'>Transactional Communications:</span> We may send you emails or SMS regarding your
+        account or purchases.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Legal Compliance:</span> We use information
-        as otherwise permitted by law.
+        <span className='font-bold'>Legal Compliance:</span> We use information as otherwise permitted by law.
       </p>
 
       <p className='mt-4 text-base'>
         <span className='font-bold'>Cookies and Web Beacons</span>
-        Like many websites, Mozimo.in uses &apos;cookies&apos; to store
-        information about visitors&apos; preferences and pages visited. This
-        helps us customize your experience based on browser type and other
-        information.
+        Like many websites, Mozimo.in uses &apos;cookies&apos; to store information about visitors&apos; preferences and
+        pages visited. This helps us customize your experience based on browser type and other information.
       </p>
 
-      <p className='mt-4 text-lg font-bold'>
-        Sharing of Information with Third Parties
+      <p className='mt-4 text-lg font-bold'>Sharing of Information with Third Parties</p>
+
+      <p className='mt-4 text-base'>
+        <span className='font-bold'>Service Providers:</span> We share information with third parties who perform
+        services on our behalf, such as payment processors, delivery services, or transactional message processors. Some
+        vendors may be located outside of India.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Service Providers:</span> We share
-        information with third parties who perform services on our behalf, such
-        as payment processors, delivery services, or transactional message
-        processors. Some vendors may be located outside of India.
+        <span className='font-bold'>Legal Compliance:</span> We may share information to comply with legal obligations
+        or protect ourselves, such as in response to court orders or government requests.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Legal Compliance:</span> We may share
-        information to comply with legal obligations or protect ourselves, such
-        as in response to court orders or government requests.
+        <span className='font-bold'>Business Transfers:</span> If our business is sold or transferred, customer
+        information may be part of the transaction.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Business Transfers:</span> If our business
-        is sold or transferred, customer information may be part of the
-        transaction.
+        <span className='font-bold'>Other Sharing:</span> We may share information for reasons not described in this
+        policy, with prior notice to you.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Other Sharing:</span> We may share
-        information for reasons not described in this policy, with prior notice
-        to you.
+        <span className='font-bold'>Email Opt-Out:</span>&nbsp; You can opt out of receiving our marketing emails by
+        emailing <a href='info@mozimo.in' />. Please allow up to ten days for processing. Even if you opt out of
+        marketing emails, we will continue to send transactional messages related to your purchases.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Email Opt-Out:</span>&nbsp; You can opt out
-        of receiving our marketing emails by emailing{' '}
-        <a href='info@mozimo.in' />. Please allow up to ten days for processing.
-        Even if you opt out of marketing emails, we will continue to send
-        transactional messages related to your purchases.
+        <span className='font-bold'>Third-Party Sites</span> We do not offer third-party products or services on our
+        website.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Third-Party Sites</span> We do not offer
-        third-party products or services on our website.
+        <span className='font-bold'>Grievance Officer</span> In accordance with the Information Technology Act 2000 and
+        associated rules, the Grievance Officer&apos;s contact details are as follows: Chaman Lal +91 70874 99904
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Grievance Officer</span> In accordance with
-        the Information Technology Act 2000 and associated rules, the Grievance
-        Officer&apos;s contact details are as follows: Chaman Lal +91 70874
-        99904
+        <span className='font-bold'>Email: info@mozimo.in</span>&nbsp; For questions about this Policy or other privacy
+        concerns, you can also email us at info@mozimo.in.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Email: info@mozimo.in</span>&nbsp; For
-        questions about this Policy or other privacy concerns, you can also
-        email us at info@mozimo.in.
+        <span className='font-bold'>Updates to This Policy</span>&nbsp; This Privacy Policy was last updated on
+        05.09.24. We may change our privacy practices from time to time and will notify you of any material changes as
+        required by law. Updated policies will be posted on our website. Please check our site periodically for updates.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Updates to This Policy</span>&nbsp; This
-        Privacy Policy was last updated on 05.09.24. We may change our privacy
-        practices from time to time and will notify you of any material changes
-        as required by law. Updated policies will be posted on our website.
-        Please check our site periodically for updates.
-      </p>
-
-      <p className='mt-4 text-base'>
-        <span className='font-bold'>Jurisdiction</span>&nbsp; By visiting our
-        website, any disputes over privacy are subject to this Policy and the
-        website&apos;s terms of use. Disputes arising under this Policy shall be
-        governed by the laws of India.
+        <span className='font-bold'>Jurisdiction</span>&nbsp; By visiting our website, any disputes over privacy are
+        subject to this Policy and the website&apos;s terms of use. Disputes arising under this Policy shall be governed
+        by the laws of India.
       </p>
     </div>
   );
diff --git a/src/app/(static)/terms/page.tsx b/src/app/(static)/terms/page.tsx
index fc1eb38..d647456 100644
--- a/src/app/(static)/terms/page.tsx
+++ b/src/app/(static)/terms/page.tsx
@@ -3,142 +3,104 @@ export default function TermsPage() {
     <div className='p-8'>
       <h1 className='text-4xl font-bold'>Terms and Conditions</h1>
       <p className='mt-4 text-lg'>
-        PLEASE READ THIS TERMS OF SERVICE AGREEMENT CAREFULLY. BY USING THIS
-        WEBSITE OR ORDERING PRODUCTS FROM THIS WEBSITE, YOU AGREE TO BE BOUND BY
-        ALL OF THE TERMS AND CONDITIONS OF THIS AGREEMENT.
+        PLEASE READ THIS TERMS OF SERVICE AGREEMENT CAREFULLY. BY USING THIS WEBSITE OR ORDERING PRODUCTS FROM THIS
+        WEBSITE, YOU AGREE TO BE BOUND BY ALL OF THE TERMS AND CONDITIONS OF THIS AGREEMENT.
       </p>
       <p className='mt-4 text-base'>
-        This Terms of Service Agreement (the &quot;Agreement&quot;) governs your
-        use of this website, Mozimo.in (the &quot;Website&quot;), and
-        Mozimo&apos;s offer of products for purchase on this Website. This
-        Agreement includes and incorporates by reference the policies and
-        guidelines referenced below. Mozimo reserves the right to change or
-        revise the terms and conditions of this Agreement at any time by posting
-        any changes or a revised Agreement on this Website. Mozimo will notify
-        you of changes or revisions by indicating the date on the top of this
-        Agreement. The revised Agreement will be effective immediately after it
-        is posted on this Website. Your use of the Website following any changes
-        or a revised Agreement will constitute your acceptance of those changes
-        or revisions. Mozimo encourages you to review this Agreement whenever
-        you visit the Website to ensure you understand the terms and conditions
-        governing its use. This Agreement does not alter any terms or conditions
-        of any other written agreement you may have with Mozimo for other
-        products or services. If you do not agree to this Agreement (including
-        any referenced policies or guidelines), please immediately discontinue
-        your use of the Website. To print this Agreement, click the print button
-        on your browser toolbar.
+        This Terms of Service Agreement (the &quot;Agreement&quot;) governs your use of this website, Mozimo.in (the
+        &quot;Website&quot;), and Mozimo&apos;s offer of products for purchase on this Website. This Agreement includes
+        and incorporates by reference the policies and guidelines referenced below. Mozimo reserves the right to change
+        or revise the terms and conditions of this Agreement at any time by posting any changes or a revised Agreement
+        on this Website. Mozimo will notify you of changes or revisions by indicating the date on the top of this
+        Agreement. The revised Agreement will be effective immediately after it is posted on this Website. Your use of
+        the Website following any changes or a revised Agreement will constitute your acceptance of those changes or
+        revisions. Mozimo encourages you to review this Agreement whenever you visit the Website to ensure you
+        understand the terms and conditions governing its use. This Agreement does not alter any terms or conditions of
+        any other written agreement you may have with Mozimo for other products or services. If you do not agree to this
+        Agreement (including any referenced policies or guidelines), please immediately discontinue your use of the
+        Website. To print this Agreement, click the print button on your browser toolbar.
       </p>
       <p className='mt-4 text-base'>
-        Understanding Expiry and Best Before Dates: Our products are carefully
-        crafted and may be shipped in conditions to preserve their quality. The
-        shelf life printed on the packaging refers to the product’s life when
-        shipped. Upon arrival at our local stores, products may be defrosted,
-        and the expiry date of defrosted products will be indicated on the label
-        sticker on each box. Please refer to this expiry date when purchasing
-        products.
+        Understanding Expiry and Best Before Dates: Our products are carefully crafted and may be shipped in conditions
+        to preserve their quality. The shelf life printed on the packaging refers to the product’s life when shipped.
+        Upon arrival at our local stores, products may be defrosted, and the expiry date of defrosted products will be
+        indicated on the label sticker on each box. Please refer to this expiry date when purchasing products.
       </p>
       <p className='mt-4 text-lg'>I. PRODUCTS</p>
       <p className='mt-4 text-base'>
-        Terms of Offer: This Website offers certain products (the
-        &quot;Products&quot;) for sale. By placing an order through this
-        Website, you agree to the terms set forth in this Agreement. Customer
-        Solicitation: Unless you inform our representatives otherwise, you agree
-        to continue receiving emails and call solicitations from Mozimo and its
-        designated teams. Opt-Out Procedure: To opt out of future solicitations,
-        you can: Use the opt-out link found in any email solicitation. Send your
-        email address to info@moizmo.in. Proprietary Rights: Mozimo has
-        proprietary rights and trade secrets in the distribution of its
-        Products. You may not copy, reproduce, resell, or redistribute any
-        Product manufactured or distributed by Mozimo. Mozimo also owns all
-        trademarks and trade dress, including the layout of this webpage. Goods
-        and Service Tax (GST): If you purchase Products, you will be responsible
-        for any applicable taxes.
+        Terms of Offer: This Website offers certain products (the &quot;Products&quot;) for sale. By placing an order
+        through this Website, you agree to the terms set forth in this Agreement. Customer Solicitation: Unless you
+        inform our representatives otherwise, you agree to continue receiving emails and call solicitations from Mozimo
+        and its designated teams. Opt-Out Procedure: To opt out of future solicitations, you can: Use the opt-out link
+        found in any email solicitation. Send your email address to info@moizmo.in. Proprietary Rights: Mozimo has
+        proprietary rights and trade secrets in the distribution of its Products. You may not copy, reproduce, resell,
+        or redistribute any Product manufactured or distributed by Mozimo. Mozimo also owns all trademarks and trade
+        dress, including the layout of this webpage. Goods and Service Tax (GST): If you purchase Products, you will be
+        responsible for any applicable taxes.
       </p>
       <p className='mt-4 text-lg'>II. WEBSITE</p>
       <p className='mt-4 text-base'>
-        Content; Intellectual Property; Third-Party Links: This Website provides
-        information and marketing materials, some of which may be gathered from
-        other sources. Content created by Mozimo is protected by intellectual
-        property laws. Unauthorized use may violate copyright or trademark laws.
-        You use the content for personal, non-commercial purposes. Links to
-        third-party websites are provided for convenience only, and Mozimo does
-        not endorse or assume responsibility for their content. Use of Website:
-        You will use the Website legally and responsibly, and will not interfere
-        with others&apos; use, engage in spam, or disrupt other users. License:
-        You are granted a limited, non-exclusive, non-transferable right to use
-        the Website content for personal, non-commercial use. Unauthorized
-        copying or distribution is prohibited. Posting: By posting content on
-        the Website, you grant Mozimo a perpetual, worldwide, non-exclusive,
-        royalty-free license to use and distribute that content. Mozimo is not
-        responsible for user-generated content or interactions between users.
-        Your Consent: By registering with us, you consent to the collection,
-        processing, storing, handling, and disclosure of your information as
-        detailed in our privacy policy, which complies with Indian data
-        protection laws. Alerts: We may contact you via email or phone to inform
-        you about new products and offerings. User Communications:
-        Communications sent to us may be retained to process inquiries and
-        improve our services.
+        Content; Intellectual Property; Third-Party Links: This Website provides information and marketing materials,
+        some of which may be gathered from other sources. Content created by Mozimo is protected by intellectual
+        property laws. Unauthorized use may violate copyright or trademark laws. You use the content for personal,
+        non-commercial purposes. Links to third-party websites are provided for convenience only, and Mozimo does not
+        endorse or assume responsibility for their content. Use of Website: You will use the Website legally and
+        responsibly, and will not interfere with others&apos; use, engage in spam, or disrupt other users. License: You
+        are granted a limited, non-exclusive, non-transferable right to use the Website content for personal,
+        non-commercial use. Unauthorized copying or distribution is prohibited. Posting: By posting content on the
+        Website, you grant Mozimo a perpetual, worldwide, non-exclusive, royalty-free license to use and distribute that
+        content. Mozimo is not responsible for user-generated content or interactions between users. Your Consent: By
+        registering with us, you consent to the collection, processing, storing, handling, and disclosure of your
+        information as detailed in our privacy policy, which complies with Indian data protection laws. Alerts: We may
+        contact you via email or phone to inform you about new products and offerings. User Communications:
+        Communications sent to us may be retained to process inquiries and improve our services.
       </p>
       <p className='mt-4 text-lg'>III. DISCLAIMER OF WARRANTIES</p>
       <p className='mt-4 text-base normal-case'>
-        Your use of the website and products is at your own risk. The website
-        and products are offered on an &quot;as is&quot; and &quot;as
-        available&quot; basis. Mozimo disclaims all warranties, express or
-        implied, including implied warranties of merchantability, fitness for a
-        particular purpose, and non-infringement.
+        Your use of the website and products is at your own risk. The website and products are offered on an &quot;as
+        is&quot; and &quot;as available&quot; basis. Mozimo disclaims all warranties, express or implied, including
+        implied warranties of merchantability, fitness for a particular purpose, and non-infringement.
       </p>
       <p className='mt-4 text-lg'>IV. LIMITATION OF LIABILITY</p>
       <p className='mt-4 text-base'>
-        Mozimo’s liability is limited to the amount you paid for products
-        purchased through the website. Mozimo will not be liable for any direct,
-        indirect, incidental, special, or consequential damages.
+        Mozimo’s liability is limited to the amount you paid for products purchased through the website. Mozimo will not
+        be liable for any direct, indirect, incidental, special, or consequential damages.
       </p>
       <p className='mt-4 text-lg uppercase'>V. INDEMNIFICATION</p>
       <p className='mt-4 text-base'>
-        You agree to indemnify and hold harmless Mozimo, its contractors,
-        agents, and affiliates from any claims, damages, costs, or expenses
-        arising out of your breach of this Agreement or use of the Website or
-        Products. Mozimo may participate in the defense of any third-party
-        claims at its own expense.
+        You agree to indemnify and hold harmless Mozimo, its contractors, agents, and affiliates from any claims,
+        damages, costs, or expenses arising out of your breach of this Agreement or use of the Website or Products.
+        Mozimo may participate in the defense of any third-party claims at its own expense.
       </p>
       <p className='mt-4 text-lg'>VI. PRIVACY</p>
       <p className='mt-4 text-base'>
-        Mozimo is committed to protecting user privacy. Refer to our privacy
-        policy for details on how we handle your data.
+        Mozimo is committed to protecting user privacy. Refer to our privacy policy for details on how we handle your
+        data.
       </p>
       <p className='mt-4 text-lg'>VII. AGREEMENT TO BE BOUND</p>
       <p className='mt-4 text-base'>
-        By using this Website or ordering Products, you acknowledge that you
-        have read and agree to this Agreement and all terms and conditions on
-        this Website.
+        By using this Website or ordering Products, you acknowledge that you have read and agree to this Agreement and
+        all terms and conditions on this Website.
       </p>
       <p className='mt-4 text-lg'>VIII. GENERAL</p>
       <p className='mt-4 text-base'>
-        Force Majeure: Mozimo will not be liable for any delays or interruptions
-        caused by events beyond its control, such as natural disasters or acts
-        of war.
+        Force Majeure: Mozimo will not be liable for any delays or interruptions caused by events beyond its control,
+        such as natural disasters or acts of war.
       </p>
       <p className='mt-4 text-base'>
-        Cessation of Operation: Mozimo may cease operation of the Website and
-        distribution of Products at its discretion. Entire Agreement: This
-        Agreement constitutes the entire agreement between you and Mozimo and
-        supersedes any prior agreements. Effect of Waiver: Failure to enforce
-        any provision of this Agreement does not constitute a waiver. If any
-        provision is found invalid, the remaining provisions will remain in
-        effect. Governing Law; Jurisdiction: This Agreement is governed by the
-        laws of Maharashtra, India. Disputes will be resolved in courts located
-        in Maharashtra. Statute of Limitation: Claims must be filed within one
-        year of the cause of action or be barred. Waiver of Class Action Rights:
-        You waive any right to join claims with others in a class action. Claims
-        must be asserted individually. Termination: Mozimo may terminate your
-        access to the Website if you breach this Agreement, and may cancel any
-        outstanding orders. Domestic Use: Mozimo makes no representation that
-        the Website or Products are appropriate for use outside India. Users
-        outside India are responsible for compliance with local laws.
-        Assignment: You may not assign your rights under this Agreement. Mozimo
-        may assign its rights and obligations without notice. By using this
-        website or ordering products from this website, you agree to be bound by
-        all of the terms and conditions of this agreement.
+        Cessation of Operation: Mozimo may cease operation of the Website and distribution of Products at its
+        discretion. Entire Agreement: This Agreement constitutes the entire agreement between you and Mozimo and
+        supersedes any prior agreements. Effect of Waiver: Failure to enforce any provision of this Agreement does not
+        constitute a waiver. If any provision is found invalid, the remaining provisions will remain in effect.
+        Governing Law; Jurisdiction: This Agreement is governed by the laws of Maharashtra, India. Disputes will be
+        resolved in courts located in Maharashtra. Statute of Limitation: Claims must be filed within one year of the
+        cause of action or be barred. Waiver of Class Action Rights: You waive any right to join claims with others in a
+        class action. Claims must be asserted individually. Termination: Mozimo may terminate your access to the Website
+        if you breach this Agreement, and may cancel any outstanding orders. Domestic Use: Mozimo makes no
+        representation that the Website or Products are appropriate for use outside India. Users outside India are
+        responsible for compliance with local laws. Assignment: You may not assign your rights under this Agreement.
+        Mozimo may assign its rights and obligations without notice. By using this website or ordering products from
+        this website, you agree to be bound by all of the terms and conditions of this agreement.
       </p>
     </div>
   );
diff --git a/src/app/(storefront)/cart/page.tsx b/src/app/(storefront)/cart/page.tsx
new file mode 100644
index 0000000..56ae175
--- /dev/null
+++ b/src/app/(storefront)/cart/page.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { Minus, Plus, Trash2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { useCart } from '@/providers/cart';
+
+export default function MyCartComponent() {
+  const { cart, updateQuantity, removeItem } = useCart();
+
+  return (
+    <div className='container mx-auto px-4 py-8'>
+      <h1 className='text-3xl font-bold mb-8'>My Cart</h1>
+      <div className='grid gap-8 md:grid-cols-3'>
+        <div className='md:col-span-2'>
+          {cart?.items?.map((item) => (
+            <Card key={item.id} className='mb-4'>
+              <CardContent className='p-4'>
+                <div className='flex items-center'>
+                  {/* <img
+                    src={item.image}
+                    alt={item.name}
+                    className="w-20 h-20 object-cover rounded mr-4"
+                  /> */}
+                  <div className='flex-grow'>
+                    <h3 className='font-semibold'>
+                      {item.product_title} ({item.variant_title})
+                    </h3>
+                    <p className='text-sm text-gray-600'>${item.unit_price}</p>
+                  </div>
+                  <div className='flex items-center'>
+                    <Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity - 1)}>
+                      <Minus className='h-4 w-4' />
+                    </Button>
+                    <span className='mx-2 min-w-[2ch] text-center'>{item.quantity}</span>
+                    <Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity + 1)}>
+                      <Plus className='h-4 w-4' />
+                    </Button>
+                  </div>
+                  <Button variant='ghost' size='icon' className='ml-4' onClick={() => removeItem(item.id)}>
+                    <Trash2 className='h-4 w-4' />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+        <div>
+          <Card>
+            <CardHeader>
+              <CardTitle>Order Summary</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className='space-y-1'>
+                <div className='flex justify-between'>
+                  <span>Subtotal</span>
+                  <span>${cart?.subtotal}</span>
+                </div>
+                <div className='flex justify-between'>
+                  <span>Tax</span>
+                  <span>${cart?.tax_total}</span>
+                </div>
+              </div>
+            </CardContent>
+            <Separator />
+            <CardFooter className='justify-between'>
+              <span className='font-semibold'>Total</span>
+              <span className='font-semibold'>${cart?.total}</span>
+            </CardFooter>
+          </Card>
+          <Button className='w-full mt-4' size='lg'>
+            Proceed to Checkout
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(storefront)/cart/page.tsx.exclude b/src/app/(storefront)/cart/page.tsx.exclude
deleted file mode 100644
index a3d4985..0000000
--- a/src/app/(storefront)/cart/page.tsx.exclude
+++ /dev/null
@@ -1,87 +0,0 @@
-'use client';
-
-import { useCart, useUpdateLineItem, useDeleteLineItem } from 'medusa-react';
-import { useRouter } from 'next/navigation';
-
-export default function CartPage() {
-  const { cart } = useCart();
-  const router = useRouter();
-
-  // Ensure cart is loaded
-  if (!cart?.id) {
-    return <p>Loading cart...</p>;
-  }
-
-  // Hook for updating a cart line item
-  const {
-    mutate: updateLineItem,
-    isLoading: isUpdating,
-    error: updateError,
-  } = useUpdateLineItem(cart.id);
-  // Hook for deleting a cart line item
-  const {
-    mutate: deleteLineItem,
-    isLoading: isDeleting,
-    error: deleteError,
-  } = useDeleteLineItem(cart?.id);
-
-  if (!cart) return <p>Loading cart...</p>;
-
-  const handleUpdateItem = (lineId: string, quantity: number) => {
-    updateLineItem(
-      { lineId, quantity },
-      {
-        onSuccess: () => {
-          // Optionally refetch cart or show a success message
-        },
-      },
-    );
-  };
-
-  const handleRemoveItem = (lineId: string) => {
-    deleteLineItem(
-      { lineId },
-      {
-        onSuccess: () => {
-          // Optionally refetch cart or show a success message
-        },
-      },
-    );
-  };
-
-  const proceedToCheckout = () => {
-    router.push('/checkout');
-  };
-
-  return (
-    <div>
-      <h1>Your Cart</h1>
-      {cart.items?.length ? (
-        cart.items.map((item) => (
-          <div key={item.id}>
-            <h2>{item.title}</h2>
-            <p>Quantity: {item.quantity}</p>
-            <button
-              onClick={() => handleUpdateItem(item.id, item.quantity + 1)}
-              disabled={isUpdating}
-            >
-              Increase Quantity
-            </button>
-            <button
-              onClick={() => handleRemoveItem(item.id)}
-              disabled={isDeleting}
-            >
-              Remove
-            </button>
-            {updateError && <p>Error updating item: {updateError.message}</p>}
-            {deleteError && <p>Error removing item: {deleteError.message}</p>}
-          </div>
-        ))
-      ) : (
-        <p>Your cart is empty.</p>
-      )}
-      <p>Total: {cart.total ? `$${(cart.total / 100).toFixed(2)}` : '$0.00'}</p>
-      <button onClick={proceedToCheckout}>Proceed to Checkout</button>
-    </div>
-  );
-}
diff --git a/src/app/(storefront)/layout.tsx b/src/app/(storefront)/layout.tsx
index 35b5de1..dff5b4e 100644
--- a/src/app/(storefront)/layout.tsx
+++ b/src/app/(storefront)/layout.tsx
@@ -2,9 +2,11 @@ import '../globals.css';
 
 import { ReactNode } from 'react';
 
-import { Providers } from '@/app/providers';
 import { Footer } from '@/components/footer';
 import { Navbar } from '@/components/navbar';
+import { CartProvider } from '@/providers/cart';
+import { CustomerProvider } from '@/providers/customer';
+import { RegionProvider } from '@/providers/region';
 
 interface RootLayoutProps {
   children: ReactNode;
@@ -15,7 +17,11 @@ export default function RootLayout({ children }: RootLayoutProps) {
     <html lang='en'>
       <body>
         <Navbar />
-        <Providers>{children}</Providers>
+        <RegionProvider>
+          <CustomerProvider>
+            <CartProvider>{children}</CartProvider>
+          </CustomerProvider>
+        </RegionProvider>
         <Footer />
       </body>
     </html>
diff --git a/src/app/(storefront)/login/page.tsx b/src/app/(storefront)/login/page.tsx
index 305e280..4572a3b 100644
--- a/src/app/(storefront)/login/page.tsx
+++ b/src/app/(storefront)/login/page.tsx
@@ -4,20 +4,15 @@ import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useCustomer } from '@/providers/customer';
 
 export default function AuthPageComponent() {
   const router = useRouter();
+  const { register, login } = useCustomer();
 
   const [loading, setLoading] = useState(false);
   const [activeTab, setActiveTab] = useState('login');
@@ -34,53 +29,12 @@ export default function AuthPageComponent() {
     }
     setLoading(true);
 
-    // obtain JWT token
-    const { token } = await fetch(
-      `http://localhost:9000/auth/customer/emailpass`,
-      {
-        credentials: 'include',
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-publishable-api-key': process.env
-            .NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
-        },
-        body: JSON.stringify({
-          email,
-          password,
-        }),
-      },
-    ).then((res) => res.json());
-
-    if (!token) {
-      return;
-    }
-
-    // create customer
-    const { customer } = await fetch(
-      `http://localhost:9000/store/customers/me`,
-      {
-        credentials: 'include',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-          'x-publishable-api-key': process.env
-            .NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
-        },
-      },
-    ).then((res) => res.json());
-
-    console.log(token, customer);
-    // Save the token and customer to localStorage
-    localStorage.setItem('token', token);
-    localStorage.setItem('user', customer);
+    login(email, password);
     setLoading(false);
     router.push('/products');
   };
 
-  const handleSubmitRegister = async (
-    event: React.FormEvent<HTMLFormElement>,
-  ) => {
+  const handleSubmitRegister = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     // Handle form submission here
 
@@ -88,50 +42,8 @@ export default function AuthPageComponent() {
       return;
     }
     setLoading(true);
+    register(firstName, lastName, email, password);
 
-    // obtain JWT token
-    const { token } = await fetch(
-      `http://localhost:9000/auth/customer/emailpass/register`,
-      {
-        credentials: 'include',
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-publishable-api-key': process.env
-            .NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
-        },
-        body: JSON.stringify({
-          email,
-          password,
-        }),
-      },
-    ).then((res) => res.json());
-
-    if (!token) {
-      return;
-    }
-
-    // create customer
-    const { customer } = await fetch(`http://localhost:9000/store/customers`, {
-      credentials: 'include',
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${token}`,
-        'x-publishable-api-key': process.env
-          .NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
-      },
-      body: JSON.stringify({
-        first_name: firstName,
-        last_name: lastName,
-        email,
-      }),
-    }).then((res) => res.json());
-
-    console.log(token, customer);
-    // Save the token and customer to localStorage
-    localStorage.setItem('token', token);
-    localStorage.setItem('user', customer);
     setLoading(false);
     router.push('/products');
   };
@@ -144,12 +56,8 @@ export default function AuthPageComponent() {
     <div className='min-h-screen flex items-center justify-center bg-gray-100 px-4 py-12 sm:px-6 lg:px-8'>
       <Card className='w-full max-w-md'>
         <CardHeader className='space-y-1'>
-          <CardTitle className='text-2xl font-bold'>
-            Welcome to Our E-commerce Store
-          </CardTitle>
-          <CardDescription>
-            Login or create an account to start shopping
-          </CardDescription>
+          <CardTitle className='text-2xl font-bold'>Welcome to Our E-commerce Store</CardTitle>
+          <CardDescription>Login or create an account to start shopping</CardDescription>
         </CardHeader>
         <CardContent>
           <Tabs value={activeTab} onValueChange={setActiveTab}>
@@ -236,16 +144,12 @@ export default function AuthPageComponent() {
         <CardFooter className='flex flex-wrap items-center justify-between gap-2'>
           <div className='text-sm text-muted-foreground'>
             <span className='mr-1 hidden sm:inline-block'>
-              {activeTab === 'login'
-                ? "Don't have an account?"
-                : 'Already have an account?'}
+              {activeTab === 'login' ? "Don't have an account?" : 'Already have an account?'}
             </span>
             <Button
               variant='link'
               className='p-0'
-              onClick={() =>
-                setActiveTab(activeTab === 'login' ? 'register' : 'login')
-              }
+              onClick={() => setActiveTab(activeTab === 'login' ? 'register' : 'login')}
             >
               {activeTab === 'login' ? 'Sign up' : 'Log in'}
             </Button>
diff --git a/src/app/(storefront)/products/[handle]/ProductDetails.tsx b/src/app/(storefront)/products/[handle]/ProductDetails.tsx
index d7d79f9..b397f20 100644
--- a/src/app/(storefront)/products/[handle]/ProductDetails.tsx
+++ b/src/app/(storefront)/products/[handle]/ProductDetails.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { HttpTypes } from '@medusajs/types';
 import { ChevronLeft, ChevronRight, ShoppingCart, Star } from 'lucide-react';
 import Image from 'next/image';
 import { FC, useEffect, useState } from 'react';
@@ -8,7 +9,8 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { Product, ProductVariant } from '@/lib/product-interface';
+import { useCart } from '@/providers/cart';
+import { useRegion } from '@/providers/region';
 
 interface ProductDetailsProps {
   handle: string;
@@ -17,59 +19,56 @@ interface ProductDetailsProps {
 const ProductDetails: FC<ProductDetailsProps> = ({ handle }) => {
   const [quantity, setQuantity] = useState(1);
   const [currentImage, setCurrentImage] = useState(0);
-  const [product, setProduct] = useState<Product | null>();
-  const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(
-    null,
-  );
+  const [product, setProduct] = useState<HttpTypes.StoreProduct | null>();
+  const [selectedVariant, setSelectedVariant] = useState<HttpTypes.StoreProductVariant | null>(null);
 
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<unknown>(null);
 
+  const { region } = useRegion();
+  const { cart, addToCart } = useCart();
+
   const nextImage = () => {
-    if (product) {
+    if (product && product.images) {
       setCurrentImage((currentImage + 1) % product.images.length);
     }
   };
 
   const prevImage = () => {
-    if (product) {
-      setCurrentImage(
-        (currentImage - 1 + product.images.length) % product.images.length,
-      );
+    if (product && product.images) {
+      setCurrentImage((currentImage - 1 + product.images.length) % product.images.length);
     }
   };
 
   useEffect(() => {
+    if (!region || !cart) {
+      return;
+    }
     const fetchProduct = async () => {
       try {
         const params = new URLSearchParams({
           handle: handle,
           fields: `*variants.calculated_price`,
-          region_id: 'reg_01J9412Z2W1GV785DV2E4X6NSE',
+          region_id: region?.id as string,
         });
-        const products: Product[] = await fetch(
-          `http://localhost:9000/store/products?${params}`,
+        const products: HttpTypes.StoreProduct[] = await fetch(
+          `${process.env.NEXT_PUBLIC_BASE_URL}/store/products?${params}`,
           {
             credentials: 'include',
             headers: {
               'Content-Type': 'application/json',
-              'x-publishable-api-key':
-                process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY ||
-                'pk_6c28ea35a3372ba52adabcd91a000151e139de469fd340743cc0d20fe3b9df97',
+              'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
             },
           },
         )
           .then((res) => res.json())
           .then((data) => data.products);
-        console.log(products);
 
-        const product = products[0];
-        console.log(product);
-        if (!product) {
-          setProduct(null);
+        if (products && products.length) {
+          setProduct(products[0]);
+          setSelectedVariant(products[0].variants?.[0] || null);
         } else {
-          setProduct(product);
-          setSelectedVariant(product.variants[0]);
+          setProduct(null);
         }
       } catch (err: unknown) {
         setError(err);
@@ -77,16 +76,14 @@ const ProductDetails: FC<ProductDetailsProps> = ({ handle }) => {
         setIsLoading(false);
       }
     };
-
     fetchProduct();
-  }, [handle]);
+  }, [handle, region, cart]);
 
-  if (isLoading) {
-    return <div>Loading...</div>;
+  if (!region || isLoading) {
+    return <div>Loading...</div>; // Or a skeleton/loading component
   }
-
   if (error) {
-    console.log(error);
+    console.log('Something went wrong error: ', error);
     return <div>Something went wrong</div>;
   }
 
@@ -95,13 +92,13 @@ const ProductDetails: FC<ProductDetailsProps> = ({ handle }) => {
   }
 
   return (
-    <div className='container mx-auto px-4 py-8'>
+    <div className='container mx-auto px-4 py-8 pt-28'>
       <div className='grid md:grid-cols-2 gap-8'>
         <div className='relative'>
           <Image
             width={200}
             height={192}
-            src={product.images[currentImage].url}
+            src={product.images?.[currentImage].url as string}
             alt={`${product.title} image ${currentImage + 1}`}
             className='w-full h-auto rounded-lg shadow-lg'
           />
@@ -124,12 +121,10 @@ const ProductDetails: FC<ProductDetailsProps> = ({ handle }) => {
             <span className='sr-only'>Next image</span>
           </Button>
           <div className='flex justify-center mt-4 space-x-2'>
-            {product.images.map((_, index) => (
+            {product.images?.map((_, index) => (
               <div
                 key={index}
-                className={`w-3 h-3 rounded-full ${
-                  index === currentImage ? 'bg-primary' : 'bg-gray-300'
-                }`}
+                className={`w-3 h-3 rounded-full ${index === currentImage ? 'bg-primary' : 'bg-gray-300'}`}
               />
             ))}
           </div>
@@ -144,9 +139,7 @@ const ProductDetails: FC<ProductDetailsProps> = ({ handle }) => {
             </div>
             <span className='ml-2 text-sm text-gray-600'>(128 reviews)</span>
           </div>
-          <p className='text-2xl font-bold mb-4'>
-            ${selectedVariant?.calculated_price?.toFixed(2)}
-          </p>
+          <p className='text-2xl font-bold mb-4'>${selectedVariant?.calculated_price?.calculated_amount?.toFixed(2)}</p>
           <p className='text-gray-600 mb-6'>{product.description}</p>
 
           <div className='mb-6'>
@@ -154,17 +147,14 @@ const ProductDetails: FC<ProductDetailsProps> = ({ handle }) => {
             <RadioGroup
               defaultValue={selectedVariant?.id}
               onValueChange={(value) =>
-                setSelectedVariant(
-                  product.variants.find((v) => v.id === value) ||
-                    product.variants[0],
-                )
+                setSelectedVariant(product.variants?.find((v) => v.id === value) || product.variants?.[0] || null)
               }
             >
-              {product.variants.map((variant) => (
+              {product.variants?.map((variant) => (
                 <div key={variant.id} className='flex items-center space-x-2'>
                   <RadioGroupItem value={variant.id} id={variant.id} />
                   <Label htmlFor={variant.id}>
-                    {variant.title} - ${variant?.calculated_price?.toFixed(2)}
+                    {variant.title} - ${variant.calculated_price?.calculated_amount?.toFixed(2)}
                   </Label>
                 </div>
               ))}
@@ -172,23 +162,15 @@ const ProductDetails: FC<ProductDetailsProps> = ({ handle }) => {
           </div>
 
           <div className='flex items-center mb-6'>
-            <Button
-              variant='outline'
-              size='sm'
-              onClick={() => setQuantity(Math.max(1, quantity - 1))}
-            >
+            <Button variant='outline' size='sm' onClick={() => setQuantity(Math.max(1, quantity - 1))}>
               -
             </Button>
             <span className='mx-4'>{quantity}</span>
-            <Button
-              variant='outline'
-              size='sm'
-              onClick={() => setQuantity(quantity + 1)}
-            >
+            <Button variant='outline' size='sm' onClick={() => setQuantity(quantity + 1)}>
               +
             </Button>
           </div>
-          <Button className='w-full md:w-auto'>
+          <Button className='w-full md:w-auto' onClick={() => addToCart(selectedVariant?.id as string, quantity)}>
             <ShoppingCart className='mr-2 h-4 w-4' /> Add to Cart
           </Button>
         </div>
@@ -220,10 +202,8 @@ const ProductDetails: FC<ProductDetailsProps> = ({ handle }) => {
                   <span className='ml-2 text-sm font-medium'>John Doe</span>
                 </div>
                 <p className='text-gray-600'>
-                  This chocolate is absolutely divine! The rich flavor and
-                  smooth texture make it a perfect treat for any chocolate
-                  lover. I especially love the 85% cocoa variant for its intense
-                  flavor.
+                  This chocolate is absolutely divine! The rich flavor and smooth texture make it a perfect treat for
+                  any chocolate lover. I especially love the 85% cocoa variant for its intense flavor.
                 </p>
               </CardContent>
             </Card>
@@ -240,14 +220,12 @@ const ProductDetails: FC<ProductDetailsProps> = ({ handle }) => {
                 <Image
                   width={200}
                   height={192}
-                  src={product.images[0].url}
+                  src={product.images?.[0].url as string}
                   alt={`Related product ${i + 1}`}
                   className='w-full h-48 object-cover mb-4 rounded'
                 />
                 <h3 className='font-bold mb-2'>Milk Chocolate Truffles</h3>
-                <p className='text-gray-600 mb-2'>
-                  Smooth, creamy milk chocolate truffles
-                </p>
+                <p className='text-gray-600 mb-2'>Smooth, creamy milk chocolate truffles</p>
                 <p className='font-bold'>$9.99</p>
               </CardContent>
             </Card>
diff --git a/src/app/(storefront)/products/[handle]/page.tsx b/src/app/(storefront)/products/[handle]/page.tsx
index 1c42a9a..78796eb 100644
--- a/src/app/(storefront)/products/[handle]/page.tsx
+++ b/src/app/(storefront)/products/[handle]/page.tsx
@@ -1,3 +1,4 @@
+import { HttpTypes } from '@medusajs/types';
 import { FC } from 'react';
 
 import ProductDetails from './ProductDetails';
@@ -7,24 +8,15 @@ interface ProductPageProps {
     handle: string;
   };
 }
-interface Product {
-  handle: string;
-}
-
 export async function generateStaticParams() {
   // Fetch the list of products
-  const products: Product[] = await fetch(
-    `http://localhost:9000/store/products`,
-    {
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json',
-        'x-publishable-api-key':
-          process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY ||
-          'pk_6c28ea35a3372ba52adabcd91a000151e139de469fd340743cc0d20fe3b9df97',
-      },
+  const products: HttpTypes.StoreProduct[] = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/store/products`, {
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
     },
-  )
+  })
     .then((res) => res.json())
     .then((data) => data.products);
 
diff --git a/src/app/(storefront)/products/page.tsx b/src/app/(storefront)/products/page.tsx
index 0f3fe34..738812e 100644
--- a/src/app/(storefront)/products/page.tsx
+++ b/src/app/(storefront)/products/page.tsx
@@ -15,16 +15,15 @@ export default function ProductsPage() {
       return;
     }
     const params = new URLSearchParams({
-      fields: `*variants.calculated_price`,
-      region_id: 'reg_01J9412Z2W1GV785DV2E4X6NSE',
+      // fields: `*variants.calculated_price`,
+      fields: `*variants.prices.*`,
+      region_id: 'reg_01J988N552JQQZAJ7QJ3Y873QD',
     });
-    fetch(`http://localhost:9000/store/products?${params}`, {
+    fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/store/products?${params}`, {
       credentials: 'include',
       headers: {
         'Content-Type': 'application/json',
-        'x-publishable-api-key':
-          process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY ||
-          'pk_6c28ea35a3372ba52adabcd91a000151e139de469fd340743cc0d20fe3b9df97',
+        'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
       },
     })
       .then((res) => res.json())
@@ -43,7 +42,7 @@ export default function ProductsPage() {
           <Link key={product.id} href={`/products/${product.handle}`}>
             <div className='border border-gray-200 p-4 rounded-lg shadow-lg'>
               <Image
-                src={product.thumbnail as string}
+                src={product.images?.[0].url as string}
                 alt={product.title as string}
                 width={300}
                 height={300}
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
deleted file mode 100644
index 2d2729c..0000000
--- a/src/app/providers.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// src/app/providers.tsx
-'use client';
-
-import { QueryClient } from '@tanstack/react-query';
-import { CartProvider, MedusaProvider } from 'medusa-react';
-import { ReactNode, useState } from 'react';
-
-interface ProvidersProps {
-  children: ReactNode;
-}
-
-export function Providers({ children }: ProvidersProps) {
-  const [queryClient] = useState(() => new QueryClient());
-
-  return (
-    <MedusaProvider
-      baseUrl='http://localhost:9000' // Replace with your Medusa backend URL
-      queryClientProviderProps={{ client: queryClient }}
-      publishableApiKey='pk_6c28ea35a3372ba52adabcd91a000151e139de469fd340743cc0d20fe3b9df97'
-    >
-      <CartProvider>{children}</CartProvider>
-    </MedusaProvider>
-  );
-}
diff --git a/src/components/PillButton.tsx b/src/components/PillButton.tsx
index 185ad33..8f5031c 100644
--- a/src/components/PillButton.tsx
+++ b/src/components/PillButton.tsx
@@ -11,18 +11,9 @@ type PillButtonProps = {
   onClick?: () => void; // onClick is optional
 };
 
-export function PillButton({
-  text,
-  className = '',
-  onClick,
-  ...props
-}: PillButtonProps) {
+export function PillButton({ text, className = '', onClick, ...props }: PillButtonProps) {
   return (
-    <button
-      onClick={onClick}
-      className={`${styles.pillButton} ${className}`}
-      {...props}
-    >
+    <button onClick={onClick} className={`${styles.pillButton} ${className}`} {...props}>
       {text}
       <span className={styles.arrow}>→</span>
     </button>
diff --git a/src/components/animated-image.tsx b/src/components/animated-image.tsx
index 9c5c9b6..90d5f98 100644
--- a/src/components/animated-image.tsx
+++ b/src/components/animated-image.tsx
@@ -15,25 +15,13 @@ interface AnimatedImageProps {
   [key: string]: any;
 }
 
-export function AnimatedImage({
-  src,
-  alt,
-  className = '',
-  threshold,
-  ...props
-}: AnimatedImageProps) {
+export function AnimatedImage({ src, alt, className = '', threshold, ...props }: AnimatedImageProps) {
   const [ref, isVisible] = useInView({
     threshold: threshold ?? 0.1,
     triggerOnce: true,
   });
 
   return (
-    <Image
-      ref={ref}
-      src={src}
-      alt={alt}
-      className={`zoom ${isVisible ? 'post' : 'pre'} ${className}`}
-      {...props}
-    />
+    <Image ref={ref} src={src} alt={alt} className={`zoom ${isVisible ? 'post' : 'pre'} ${className}`} {...props} />
   );
 }
diff --git a/src/components/animated-text.tsx b/src/components/animated-text.tsx
index 87a87e6..8223805 100644
--- a/src/components/animated-text.tsx
+++ b/src/components/animated-text.tsx
@@ -11,13 +11,7 @@ interface AnimatedTextProps {
   threshold?: number;
 }
 
-export function AnimatedText({
-  children,
-  className = '',
-  startClass,
-  finishClass,
-  threshold,
-}: AnimatedTextProps) {
+export function AnimatedText({ children, className = '', startClass, finishClass, threshold }: AnimatedTextProps) {
   const [ref, isVisible] = useInView({
     threshold: threshold ?? 0.1,
     triggerOnce: true,
diff --git a/src/components/auth-page.tsx b/src/components/auth-page.tsx
index be3a9e5..3faff91 100644
--- a/src/components/auth-page.tsx
+++ b/src/components/auth-page.tsx
@@ -3,14 +3,7 @@
 import React, { useState } from 'react';
 
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -28,12 +21,8 @@ export function AuthPageComponent() {
     <div className='min-h-screen flex items-center justify-center bg-gray-100 px-4 py-12 sm:px-6 lg:px-8'>
       <Card className='w-full max-w-md'>
         <CardHeader className='space-y-1'>
-          <CardTitle className='text-2xl font-bold'>
-            Welcome to the Mozimo Store
-          </CardTitle>
-          <CardDescription>
-            Login or create an account to start shopping
-          </CardDescription>
+          <CardTitle className='text-2xl font-bold'>Welcome to the Mozimo Store</CardTitle>
+          <CardDescription>Login or create an account to start shopping</CardDescription>
         </CardHeader>
         <CardContent>
           <Tabs value={activeTab} onValueChange={setActiveTab}>
@@ -45,12 +34,7 @@ export function AuthPageComponent() {
               <form onSubmit={handleSubmit} className='space-y-4'>
                 <div className='space-y-2'>
                   <Label htmlFor='login-email'>Email</Label>
-                  <Input
-                    id='login-email'
-                    type='email'
-                    placeholder='m@example.com'
-                    required
-                  />
+                  <Input id='login-email' type='email' placeholder='m@example.com' required />
                 </div>
                 <div className='space-y-2'>
                   <Label htmlFor='login-password'>Password</Label>
@@ -65,21 +49,11 @@ export function AuthPageComponent() {
               <form onSubmit={handleSubmit} className='space-y-4'>
                 <div className='space-y-2'>
                   <Label htmlFor='register-name'>Name</Label>
-                  <Input
-                    id='register-name'
-                    type='text'
-                    placeholder='John Doe'
-                    required
-                  />
+                  <Input id='register-name' type='text' placeholder='John Doe' required />
                 </div>
                 <div className='space-y-2'>
                   <Label htmlFor='register-email'>Email</Label>
-                  <Input
-                    id='register-email'
-                    type='email'
-                    placeholder='m@example.com'
-                    required
-                  />
+                  <Input id='register-email' type='email' placeholder='m@example.com' required />
                 </div>
                 <div className='space-y-2'>
                   <Label htmlFor='register-password'>Password</Label>
@@ -95,16 +69,12 @@ export function AuthPageComponent() {
         <CardFooter className='flex flex-wrap items-center justify-between gap-2'>
           <div className='text-sm text-muted-foreground'>
             <span className='mr-1 hidden sm:inline-block'>
-              {activeTab === 'login'
-                ? "Don't have an account?"
-                : 'Already have an account?'}
+              {activeTab === 'login' ? "Don't have an account?" : 'Already have an account?'}
             </span>
             <Button
               variant='link'
               className='p-0'
-              onClick={() =>
-                setActiveTab(activeTab === 'login' ? 'register' : 'login')
-              }
+              onClick={() => setActiveTab(activeTab === 'login' ? 'register' : 'login')}
             >
               {activeTab === 'login' ? 'Sign up' : 'Log in'}
             </Button>
diff --git a/src/components/category-slider.tsx b/src/components/category-slider.tsx
index fdef6cb..ddc72d6 100644
--- a/src/components/category-slider.tsx
+++ b/src/components/category-slider.tsx
@@ -30,11 +30,7 @@ export function ChocolateCategories() {
             startClass={startClass}
             finishClass={finishClass}
           >
-            <Image
-              className={styles.productImage}
-              alt={category.name}
-              src={category.image}
-            />
+            <Image className={styles.productImage} alt={category.name} src={category.image} width={100} height={100} />
             <span>{category.name}</span>
           </AnimatedLi>
         ))}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 3f6ad00..96cfe7f 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,11 +1,5 @@
 import Image from 'next/image';
-import {
-  FaFacebook,
-  FaInstagram,
-  FaLinkedin,
-  FaPhoneAlt,
-  FaYoutube,
-} from 'react-icons/fa';
+import { FaFacebook, FaInstagram, FaLinkedin, FaPhoneAlt, FaYoutube } from 'react-icons/fa';
 import { FaMapLocationDot } from 'react-icons/fa6';
 
 import logoPic from '/public/images/logo-puce-red.svg';
@@ -15,16 +9,8 @@ export function Footer() {
     <footer className='bg-[#f8f6f5] flex flex-col md:flex-row py-12 border-t-2 border-black max-w-7xl mx-auto gap-8 px-4'>
       {/* First Column: Logo and Description */}
       <div className='space-y-4 flex flex-col basis-1/4 flex-shrink'>
-        <Image
-          src={logoPic}
-          alt='Mozimo Logo'
-          width={100}
-          height={100}
-          className='h-full logo'
-        />
-        <p className='text-sm'>
-          India&apos;s Premier European style bean-to-bar chocolate experience.
-        </p>
+        <Image src={logoPic} alt='Mozimo Logo' width={100} height={100} className='h-full logo' />
+        <p className='text-sm'>India&apos;s Premier European style bean-to-bar chocolate experience.</p>
       </div>
 
       {/* Second Column: Contact Information */}
@@ -45,18 +31,12 @@ export function Footer() {
         <h3 className='font-semibold'>Know more</h3>
         <ul className='space-y-2'>
           <li>
-            <a
-              href='/privacy-policy'
-              className='text-sm text-brown-600 hover:underline'
-            >
+            <a href='/privacy-policy' className='text-sm text-brown-600 hover:underline'>
               Privacy Policy
             </a>
           </li>
           <li>
-            <a
-              href='/refund-policy'
-              className='text-sm text-brown-600 hover:underline'
-            >
+            <a href='/refund-policy' className='text-sm text-brown-600 hover:underline'>
               Refund & Return Policy
             </a>
           </li>
@@ -66,10 +46,7 @@ export function Footer() {
             </a>
           </li>
           <li>
-            <a
-              href='/shipping'
-              className='text-sm text-brown-600 hover:underline'
-            >
+            <a href='/shipping' className='text-sm text-brown-600 hover:underline'>
               Shipping Policy
             </a>
           </li>
@@ -85,40 +62,25 @@ export function Footer() {
             </a>
           </li>
           <li>
-            <a
-              href='/locate'
-              className='text-sm text-brown-600 hover:underline'
-            >
+            <a href='/locate' className='text-sm text-brown-600 hover:underline'>
               Locate our Store
             </a>
           </li>
           <li>
-            <a
-              href='/bulk-ordering'
-              className='text-sm text-brown-600 hover:underline'
-            >
+            <a href='/bulk-ordering' className='text-sm text-brown-600 hover:underline'>
               Bulk Ordering
             </a>
           </li>
         </ul>
         <h3 className='font-semibold'>Find Us On</h3>
         <div className='flex space-x-4'>
-          <a
-            href='https://facebook.com'
-            className='text-brown-600 hover:text-brown-800'
-          >
+          <a href='https://facebook.com' className='text-brown-600 hover:text-brown-800'>
             <FaFacebook />
           </a>
-          <a
-            href='https://instagram.com'
-            className='text-brown-600 hover:text-brown-800'
-          >
+          <a href='https://instagram.com' className='text-brown-600 hover:text-brown-800'>
             <FaInstagram />
           </a>
-          <a
-            href='https://youtube.com'
-            className='text-brown-600 hover:text-brown-800'
-          >
+          <a href='https://youtube.com' className='text-brown-600 hover:text-brown-800'>
             <FaYoutube />
           </a>
           <a href='https://linkedin.com' className=''>
diff --git a/src/components/homepage-video.tsx b/src/components/homepage-video.tsx
index d6d727a..21ba6ed 100644
--- a/src/components/homepage-video.tsx
+++ b/src/components/homepage-video.tsx
@@ -1,14 +1,6 @@
 export function HomepageVideo() {
   return (
-    <video
-      width='1080'
-      height='1920'
-      controls
-      preload='auto'
-      loop
-      autoPlay
-      muted
-    >
+    <video width='1080' height='1920' controls preload='auto' loop autoPlay muted>
       <source src='/videos/homepage-video.mp4' type='video/mp4' />
       Your browser does not support the video tag.
     </video>
diff --git a/src/components/my-cart.tsx b/src/components/my-cart.tsx
new file mode 100644
index 0000000..ca4a721
--- /dev/null
+++ b/src/components/my-cart.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import { Minus, Plus, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+
+interface CartItem {
+  id: number;
+  name: string;
+  price: number;
+  quantity: number;
+  image: string;
+}
+
+export function MyCart() {
+  const [cartItems, setCartItems] = useState<CartItem[]>([
+    { id: 1, name: 'Vintage T-Shirt', price: 29.99, quantity: 2, image: '/placeholder.svg?height=100&width=100' },
+    { id: 2, name: 'Denim Jeans', price: 59.99, quantity: 1, image: '/placeholder.svg?height=100&width=100' },
+    { id: 3, name: 'Sneakers', price: 89.99, quantity: 1, image: '/placeholder.svg?height=100&width=100' },
+  ]);
+
+  const updateQuantity = (id: number, newQuantity: number) => {
+    setCartItems((items) =>
+      items.map((item) => (item.id === id ? { ...item, quantity: Math.max(0, newQuantity) } : item)),
+    );
+  };
+
+  const removeItem = (id: number) => {
+    setCartItems((items) => items.filter((item) => item.id !== id));
+  };
+
+  const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
+  const tax = subtotal * 0.1; // Assuming 10% tax
+  const total = subtotal + tax;
+
+  return (
+    <div className='container mx-auto px-4 py-8'>
+      <h1 className='text-3xl font-bold mb-8'>My Cart</h1>
+      <div className='grid gap-8 md:grid-cols-3'>
+        <div className='md:col-span-2'>
+          {cartItems.map((item) => (
+            <Card key={item.id} className='mb-4'>
+              <CardContent className='p-4'>
+                <div className='flex items-center'>
+                  <img src={item.image} alt={item.name} className='w-20 h-20 object-cover rounded mr-4' />
+                  <div className='flex-grow'>
+                    <h3 className='font-semibold'>{item.name}</h3>
+                    <p className='text-sm text-gray-600'>${item.price.toFixed(2)}</p>
+                  </div>
+                  <div className='flex items-center'>
+                    <Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity - 1)}>
+                      <Minus className='h-4 w-4' />
+                    </Button>
+                    <span className='mx-2 min-w-[2ch] text-center'>{item.quantity}</span>
+                    <Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity + 1)}>
+                      <Plus className='h-4 w-4' />
+                    </Button>
+                  </div>
+                  <Button variant='ghost' size='icon' className='ml-4' onClick={() => removeItem(item.id)}>
+                    <Trash2 className='h-4 w-4' />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+        <div>
+          <Card>
+            <CardHeader>
+              <CardTitle>Order Summary</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className='space-y-1'>
+                <div className='flex justify-between'>
+                  <span>Subtotal</span>
+                  <span>${subtotal.toFixed(2)}</span>
+                </div>
+                <div className='flex justify-between'>
+                  <span>Tax</span>
+                  <span>${tax.toFixed(2)}</span>
+                </div>
+              </div>
+            </CardContent>
+            <Separator />
+            <CardFooter className='justify-between'>
+              <span className='font-semibold'>Total</span>
+              <span className='font-semibold'>${total.toFixed(2)}</span>
+            </CardFooter>
+          </Card>
+          <Button className='w-full mt-4' size='lg'>
+            Proceed to Checkout
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 0aef59b..50f0328 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -43,9 +43,7 @@ export function Navbar() {
 
   //Hack for now
   const navClasses = `${styles.navBar} ${
-    navBarStyle === 'scrolledUp'
-      ? styles.navBarScrolledUp
-      : styles.navBarScrolledUp
+    navBarStyle === 'scrolledUp' ? styles.navBarScrolledUp : styles.navBarScrolledUp
   }`;
 
   function toggleMenu() {
@@ -96,7 +94,7 @@ export function Navbar() {
           <button aria-label='Profile'>
             <FiUser size={20} />
           </button>
-          <a aria-label='Shopping Cart' href='/products'>
+          <a aria-label='Shopping Cart' href='/cart'>
             <HiShoppingBag size={20} />
           </a>
         </div>
diff --git a/src/components/product-list.tsx b/src/components/product-list.tsx
index b2da88f..e49d043 100644
--- a/src/components/product-list.tsx
+++ b/src/components/product-list.tsx
@@ -4,22 +4,10 @@ import { SearchIcon, SlidersHorizontal } from 'lucide-react';
 import { useState } from 'react';
 
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Slider } from '@/components/ui/slider';
 
 // Mock product data
@@ -44,17 +32,14 @@ export function ProductListComponent() {
 
   const handleCategoryChange = (category: string) => {
     setSelectedCategories((prev) =>
-      prev.includes(category)
-        ? prev.filter((c) => c !== category)
-        : [...prev, category],
+      prev.includes(category) ? prev.filter((c) => c !== category) : [...prev, category],
     );
   };
 
   const filteredProducts = products
     .filter(
       (product) =>
-        (selectedCategories.length === 0 ||
-          selectedCategories.includes(product.category)) &&
+        (selectedCategories.length === 0 || selectedCategories.includes(product.category)) &&
         product.price >= priceRange[0] &&
         product.price <= priceRange[1] &&
         product.name.toLowerCase().includes(searchQuery.toLowerCase()),
@@ -94,13 +79,7 @@ export function ProductListComponent() {
               </div>
               <div>
                 <h3 className='text-lg font-semibold mb-2'>Price Range</h3>
-                <Slider
-                  min={0}
-                  max={1000}
-                  step={10}
-                  value={priceRange}
-                  onValueChange={setPriceRange}
-                />
+                <Slider min={0} max={1000} step={10} value={priceRange} onValueChange={setPriceRange} />
                 <div className='flex justify-between mt-2'>
                   <span>${priceRange[0]}</span>
                   <span>${priceRange[1]}</span>
diff --git a/src/components/product-page.tsx b/src/components/product-page.tsx
index 36016fa..6b63911 100644
--- a/src/components/product-page.tsx
+++ b/src/components/product-page.tsx
@@ -41,18 +41,14 @@ export function ProductPageComponent() {
 
   const [quantity, setQuantity] = useState(1);
   const [currentImage, setCurrentImage] = useState(0);
-  const [selectedVariant, setSelectedVariant] = useState<Variant>(
-    product.variants[0],
-  );
+  const [selectedVariant, setSelectedVariant] = useState<Variant>(product.variants[0]);
 
   const nextImage = () => {
     setCurrentImage((currentImage + 1) % product.images.length);
   };
 
   const prevImage = () => {
-    setCurrentImage(
-      (currentImage - 1 + product.images.length) % product.images.length,
-    );
+    setCurrentImage((currentImage - 1 + product.images.length) % product.images.length);
   };
 
   return (
@@ -86,9 +82,7 @@ export function ProductPageComponent() {
             {product.images.map((_, index) => (
               <div
                 key={index}
-                className={`w-3 h-3 rounded-full ${
-                  index === currentImage ? 'bg-primary' : 'bg-gray-300'
-                }`}
+                className={`w-3 h-3 rounded-full ${index === currentImage ? 'bg-primary' : 'bg-gray-300'}`}
               />
             ))}
           </div>
@@ -103,9 +97,7 @@ export function ProductPageComponent() {
             </div>
             <span className='ml-2 text-sm text-gray-600'>(128 reviews)</span>
           </div>
-          <p className='text-2xl font-bold mb-4'>
-            ${selectedVariant.price.toFixed(2)}
-          </p>
+          <p className='text-2xl font-bold mb-4'>${selectedVariant.price.toFixed(2)}</p>
           <p className='text-gray-600 mb-6'>{product.description}</p>
 
           <div className='mb-6'>
@@ -113,10 +105,7 @@ export function ProductPageComponent() {
             <RadioGroup
               defaultValue={selectedVariant.id}
               onValueChange={(value) =>
-                setSelectedVariant(
-                  product.variants.find((v) => v.id === value) ||
-                    product.variants[0],
-                )
+                setSelectedVariant(product.variants.find((v) => v.id === value) || product.variants[0])
               }
             >
               {product.variants.map((variant) => (
@@ -131,19 +120,11 @@ export function ProductPageComponent() {
           </div>
 
           <div className='flex items-center mb-6'>
-            <Button
-              variant='outline'
-              size='sm'
-              onClick={() => setQuantity(Math.max(1, quantity - 1))}
-            >
+            <Button variant='outline' size='sm' onClick={() => setQuantity(Math.max(1, quantity - 1))}>
               -
             </Button>
             <span className='mx-4'>{quantity}</span>
-            <Button
-              variant='outline'
-              size='sm'
-              onClick={() => setQuantity(quantity + 1)}
-            >
+            <Button variant='outline' size='sm' onClick={() => setQuantity(quantity + 1)}>
               +
             </Button>
           </div>
@@ -179,10 +160,8 @@ export function ProductPageComponent() {
                   <span className='ml-2 text-sm font-medium'>John Doe</span>
                 </div>
                 <p className='text-gray-600'>
-                  This chocolate is absolutely divine! The rich flavor and
-                  smooth texture make it a perfect treat for any chocolate
-                  lover. I especially love the 85% cocoa variant for its intense
-                  flavor.
+                  This chocolate is absolutely divine! The rich flavor and smooth texture make it a perfect treat for
+                  any chocolate lover. I especially love the 85% cocoa variant for its intense flavor.
                 </p>
               </CardContent>
             </Card>
@@ -202,9 +181,7 @@ export function ProductPageComponent() {
                   className='w-full h-48 object-cover mb-4 rounded'
                 />
                 <h3 className='font-bold mb-2'>Milk Chocolate Truffles</h3>
-                <p className='text-gray-600 mb-2'>
-                  Smooth, creamy milk chocolate truffles
-                </p>
+                <p className='text-gray-600 mb-2'>Smooth, creamy milk chocolate truffles</p>
                 <p className='font-bold'>$9.99</p>
               </CardContent>
             </Card>
diff --git a/src/components/spotlight.tsx b/src/components/spotlight.tsx
index 0c44d54..50a346d 100644
--- a/src/components/spotlight.tsx
+++ b/src/components/spotlight.tsx
@@ -18,13 +18,7 @@ export function Spotlight() {
       {logos.map((logo, index) => (
         <div key={index} className='flex flex-col items-center'>
           <div className='w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center'>
-            <Image
-              src={logo.src}
-              alt={logo.alt}
-              width={80}
-              height={80}
-              className='w-full h-auto object-contain'
-            />
+            <Image src={logo.src} alt={logo.alt} width={80} height={80} className='w-full h-auto object-contain' />
           </div>
         </div>
       ))}
diff --git a/src/components/swiper.tsx b/src/components/swiper.tsx
index 2354dad..32ab02d 100644
--- a/src/components/swiper.tsx
+++ b/src/components/swiper.tsx
@@ -35,13 +35,7 @@ export function HeroSwiper() {
     >
       {slides.map((slide) => (
         <SwiperSlide key={slide.name}>
-          <Image
-            src={slide.image}
-            alt={slide.name}
-            width={1760}
-            height={1000}
-            className='w-full h-auto'
-          />
+          <Image src={slide.image} alt={slide.name} width={1760} height={1000} className='w-full h-auto' />
         </SwiperSlide>
       ))}
     </Swiper>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 35a75ae..d4ab2ab 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -9,14 +9,10 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },
@@ -43,13 +39,7 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
   },
 );
 Button.displayName = 'Button';
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index d26087e..43e8549 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -2,82 +2,42 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      'rounded-xl border bg-card text-card-foreground shadow',
-      className,
-    )}
-    {...props}
-  />
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('rounded-xl border bg-card text-card-foreground shadow', className)} {...props} />
 ));
 Card.displayName = 'Card';
 
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex flex-col space-y-1.5 p-6', className)}
-    {...props}
-  />
-));
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  ),
+);
 CardHeader.displayName = 'CardHeader';
 
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn('font-semibold leading-none tracking-tight', className)}
-    {...props}
-  />
-));
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props} />
+  ),
+);
 CardTitle.displayName = 'CardTitle';
 
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-));
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  ),
+);
 CardDescription.displayName = 'CardDescription';
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-));
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />,
+);
 CardContent.displayName = 'CardContent';
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex items-center p-6 pt-0', className)}
-    {...props}
-  />
-));
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  ),
+);
 CardFooter.displayName = 'CardFooter';
 
-export {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-};
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 59137da..d7d5dda 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -18,9 +18,7 @@ const Checkbox = React.forwardRef<
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator
-      className={cn('flex items-center justify-center text-current')}
-    >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
       <CheckIcon className='h-4 w-4' />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 28a28a2..7de8ae9 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -3,24 +3,21 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
 Input.displayName = 'Input';
 
 export { Input };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 9575458..638c4e8 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -6,20 +6,13 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
-const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-);
+const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
 
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
index 0fdc799..3c8270a 100644
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -10,13 +10,7 @@ const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn('grid gap-2', className)}
-      {...props}
-      ref={ref}
-    />
-  );
+  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index f95be74..7a4fff6 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,11 +1,6 @@
 'use client';
 
-import {
-  CaretSortIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from '@radix-ui/react-icons';
+import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as React from 'react';
 
@@ -43,10 +38,7 @@ const SelectScrollUpButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className,
-    )}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
     <ChevronUpIcon />
@@ -60,17 +52,13 @@ const SelectScrollDownButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className,
-    )}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
     <ChevronDownIcon />
   </SelectPrimitive.ScrollDownButton>
 ));
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -108,11 +96,7 @@ const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
-    {...props}
-  />
+  <SelectPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', className)} {...props} />
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
@@ -142,11 +126,7 @@ const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
+  <SelectPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..ae2f143
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index aaa6a59..1ebf362 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -11,10 +11,7 @@ const Slider = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
-    className={cn(
-      'relative flex w-full touch-none select-none items-center',
-      className,
-    )}
+    className={cn('relative flex w-full touch-none select-none items-center', className)}
     {...props}
   >
     <SliderPrimitive.Track className='relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20'>
diff --git a/src/hooks/shared-intersection-observer.tsx b/src/hooks/shared-intersection-observer.tsx
index 7adc148..1baeed4 100644
--- a/src/hooks/shared-intersection-observer.tsx
+++ b/src/hooks/shared-intersection-observer.tsx
@@ -10,10 +10,7 @@ class IntersectionObserverManager {
   constructor(options: IntersectionObserverInit) {
     this.callbacks = new Map();
 
-    this.observer = new IntersectionObserver(
-      this.handleIntersect.bind(this),
-      options,
-    );
+    this.observer = new IntersectionObserver(this.handleIntersect.bind(this), options);
   }
 
   private handleIntersect(entries: IntersectionObserverEntry[]) {
diff --git a/src/hooks/useInView.tsx b/src/hooks/useInView.tsx
index 920dd52..e4036d8 100644
--- a/src/hooks/useInView.tsx
+++ b/src/hooks/useInView.tsx
@@ -8,9 +8,7 @@ interface UseInViewOptions extends IntersectionObserverInit {
   triggerOnce?: boolean;
 }
 
-const useInView = (
-  options: UseInViewOptions,
-): [RefObject<HTMLImageElement>, boolean] => {
+const useInView = (options: UseInViewOptions): [RefObject<HTMLImageElement>, boolean] => {
   const [isInView, setIsInView] = useState<boolean>(false);
   const elementRef = useRef<HTMLImageElement>(null);
   const observerManager = useSharedIntersectionObserver(options);
@@ -18,9 +16,7 @@ const useInView = (
     const element = elementRef.current;
     if (!element) return;
 
-    const prefersReducedMotion = window.matchMedia(
-      '(prefers-reduced-motion: reduce)',
-    );
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
     if (prefersReducedMotion.matches) {
       setIsInView(true);
       if (options.triggerOnce) {
diff --git a/src/hooks/useInViewsingle.tsx b/src/hooks/useInViewsingle.tsx
index 4464050..082c0b8 100644
--- a/src/hooks/useInViewsingle.tsx
+++ b/src/hooks/useInViewsingle.tsx
@@ -19,18 +19,14 @@ const useInView = (
       : Array.isArray(threshold) && threshold.every((t) => t >= 0 && t <= 1);
 
   if (!isValidThreshold) {
-    console.warn(
-      'Invalid threshold value passed to useInView. It should be between 0 and 1.',
-    );
+    console.warn('Invalid threshold value passed to useInView. It should be between 0 and 1.');
   }
 
   useEffect(() => {
     const element = ref.current;
     if (!element) return;
 
-    const prefersReducedMotion = window.matchMedia(
-      '(prefers-reduced-motion: reduce)',
-    );
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
     if (prefersReducedMotion.matches) {
       setIsVisible(true);
       return;
diff --git a/src/lib/instagram.ts b/src/lib/instagram.ts
index c9774a1..d7639fb 100644
--- a/src/lib/instagram.ts
+++ b/src/lib/instagram.ts
@@ -17,9 +17,7 @@ export async function fetchInstagramPosts(): Promise<InstagramPost[]> {
   const data = await res.json();
 
   if (data?.data) {
-    return data.data
-      .filter((post: InstagramPost) => post.media_type === 'IMAGE')
-      .slice(0, 5);
+    return data.data.filter((post: InstagramPost) => post.media_type === 'IMAGE').slice(0, 5);
   }
 
   return [];
diff --git a/src/lib/product-interface.tsx b/src/lib/product-interface.tsx
deleted file mode 100644
index 18231ca..0000000
--- a/src/lib/product-interface.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-export interface Product {
-  id: string;
-  title: string;
-  subtitle: string | null;
-  description: string | null;
-  handle: string;
-  is_giftcard: boolean;
-  discountable: boolean;
-  thumbnail: string;
-  collection_id: string | null;
-  type_id: string;
-  weight: number | null;
-  length: number | null;
-  height: number | null;
-  width: number | null;
-  hs_code: string | null;
-  origin_country: string | null;
-  mid_code: string | null;
-  material: string | null;
-  created_at: string;
-  updated_at: string;
-  type: ProductType;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  collection: any | null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  options: any[];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  tags: any[];
-  images: ProductImage[];
-  variants: ProductVariant[];
-}
-
-export interface ProductType {
-  id: string;
-  value: string;
-  metadata: {
-    tax_id: string;
-    discount_limit: number;
-  };
-  created_at: string;
-  updated_at: string;
-  deleted_at: string | null;
-}
-
-export interface ProductImage {
-  id: string;
-  url: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  metadata: any | null;
-  created_at: string;
-  updated_at: string;
-  deleted_at: string | null;
-}
-
-export interface ProductVariant {
-  id: string;
-  title: string;
-  sku: string | null;
-  barcode: string | null;
-  ean: string | null;
-  upc: string | null;
-  allow_backorder: boolean;
-  manage_inventory: boolean;
-  hs_code: string | null;
-  origin_country: string | null;
-  mid_code: string | null;
-  material: string | null;
-  weight: number | null;
-  length: number | null;
-  height: number | null;
-  width: number | null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  metadata: any | null;
-  variant_rank: number;
-  product_id: string;
-  created_at: string;
-  updated_at: string;
-  deleted_at: string | null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  options: any[];
-  calculated_price: number | null;
-}
diff --git a/src/providers/cart.tsx b/src/providers/cart.tsx
new file mode 100644
index 0000000..b4b1847
--- /dev/null
+++ b/src/providers/cart.tsx
@@ -0,0 +1,164 @@
+'use client'; // include with Next.js 13+
+
+import { HttpTypes } from '@medusajs/types';
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+import { useRegion } from './region';
+
+type CartContextType = {
+  cart?: HttpTypes.StoreCart;
+  setCart: React.Dispatch<React.SetStateAction<HttpTypes.StoreCart | undefined>>;
+  addToCart: (variant_id: string, quantity: number) => void;
+  updateQuantity: (item_id: string, quantity: number) => void;
+  removeItem: (item_id: string) => void;
+  refreshCart: () => void;
+};
+
+const CartContext = createContext<CartContextType | null>(null);
+
+type CartProviderProps = {
+  children: React.ReactNode;
+};
+
+export const CartProvider = ({ children }: CartProviderProps) => {
+  const [cart, setCart] = useState<HttpTypes.StoreCart>();
+  const { region } = useRegion();
+
+  useEffect(() => {
+    if (cart || !region) {
+      return;
+    }
+
+    const cartId = localStorage.getItem('cart_id');
+    if (!cartId) {
+      // create a cart
+      fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/store/carts`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          region_id: region.id,
+        }),
+      })
+        .then((res) => res.json())
+        .then(({ cart: dataCart }) => {
+          localStorage.setItem('cart_id', dataCart.id);
+          setCart(dataCart);
+        });
+    } else {
+      // retrieve cart
+      fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/store/carts/${cartId}`, {
+        credentials: 'include',
+        headers: {
+          'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
+        },
+      })
+        .then((res) => res.json())
+        .then(({ cart: dataCart }) => {
+          setCart(dataCart);
+        });
+    }
+  }, [cart, region]);
+
+  const refreshCart = () => {
+    localStorage.removeItem('cart_id');
+    setCart(undefined);
+  };
+
+  function addToCart(variant_id: string, quantity: number = 1) {
+    if (!cart) {
+      return;
+    }
+
+    fetch(`http://localhost:9000/store/carts/${cart.id}/line-items`, {
+      credentials: 'include',
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
+      },
+      body: JSON.stringify({
+        variant_id,
+        quantity: quantity,
+      }),
+    })
+      .then((res) => res.json())
+      .then(({ cart }) => {
+        // use cart
+        console.log('Product added to cart: ', cart);
+        setCart(cart);
+      });
+  }
+
+  function updateQuantity(item_id: string, quantity: number) {
+    if (!cart) {
+      return;
+    }
+
+    fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/store/carts/${cart.id}/line-items/${item_id}`, {
+      credentials: 'include',
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
+      },
+      body: JSON.stringify({
+        quantity,
+      }),
+    })
+      .then((res) => res.json())
+      .then(({ cart }) => {
+        // use cart
+        console.log('Quantity in cart updated: ', cart);
+        setCart(cart);
+      });
+  }
+
+  function removeItem(item_id: string) {
+    if (!cart) {
+      return;
+    }
+
+    fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/store/carts/${cart.id}/line-items/${item_id}`, {
+      credentials: 'include',
+      headers: {
+        'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
+      },
+      method: 'DELETE',
+    })
+      .then((res) => res.json())
+      .then(({ parent: cart }) => {
+        // use cart
+        console.log('Item removed from cart: ', cart);
+        setCart(cart);
+      });
+  }
+
+  return (
+    <CartContext.Provider
+      value={{
+        cart,
+        setCart,
+        addToCart,
+        updateQuantity,
+        removeItem,
+        refreshCart,
+      }}
+    >
+      {children}
+    </CartContext.Provider>
+  );
+};
+
+export const useCart = () => {
+  const context = useContext(CartContext);
+
+  if (!context) {
+    throw new Error('useCart must be used within a CartProvider');
+  }
+
+  return context;
+};
diff --git a/src/providers/customer.tsx b/src/providers/customer.tsx
new file mode 100644
index 0000000..6628c70
--- /dev/null
+++ b/src/providers/customer.tsx
@@ -0,0 +1,245 @@
+'use client'; // include with Next.js 13+
+
+import { HttpTypes } from '@medusajs/types';
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type CustomerContextType = {
+  customer: HttpTypes.StoreCustomer | undefined;
+  register: (firstName: string, lastName: string, email: string, password: string) => Promise<void>;
+  login: (email: string, password: string) => Promise<void>;
+  logout: () => void;
+};
+
+const CustomerContext = createContext<CustomerContextType | null>(null);
+
+type CustomerProviderProps = {
+  children: React.ReactNode;
+};
+
+export const CustomerProvider = ({ children }: CustomerProviderProps) => {
+  const [customer, setCustomer] = useState<HttpTypes.StoreCustomer | undefined>();
+  const [jwt, setJwt] = useState<string | null>();
+
+  useEffect(() => {
+    const storedToken = localStorage.getItem('jwt');
+    const storedCustomer = localStorage.getItem('user');
+
+    console.log('Stored customer: ', storedCustomer);
+    if (storedToken) {
+      setJwt(storedToken);
+    }
+
+    if (storedCustomer) {
+      setCustomer(JSON.parse(storedCustomer));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (customer) {
+      localStorage.setItem('user', JSON.stringify(customer));
+      console.log('User set to: ', customer);
+    } else {
+      localStorage.removeItem('user');
+      console.log('User removed');
+    }
+  }, [customer]);
+
+  useEffect(() => {
+    if (jwt) {
+      localStorage.setItem('jwt', jwt);
+      console.log('Jwt set to: ', jwt);
+    } else {
+      localStorage.removeItem('jwt');
+      console.log('Jwt removed');
+    }
+  }, [jwt]);
+
+  const login = async (email: string, password: string) => {
+    try {
+      // Handle form submission here
+      if (!email) {
+        throw new Error('Please enter email id');
+      }
+
+      if (!password) {
+        throw new Error('Please enter password');
+      }
+
+      // obtain JWT token
+      await getJwt(email, password);
+
+      // get customer
+      await getCustomer();
+
+      console.log('Logged in');
+    } catch (error) {
+      console.error('Login error:', error);
+      // Optionally, handle error (e.g., show error message to user)
+      throw error; // Re-throw to allow caller to handle it
+    }
+  };
+  const register = async (firstName: string, lastName: string, email: string, password: string) => {
+    try {
+      // Handle form submission here
+      if (!firstName) {
+        throw new Error('Please enter first name');
+      }
+
+      if (!lastName) {
+        throw new Error('Please enter last name');
+      }
+
+      if (!email) {
+        throw new Error('Please enter email id');
+      }
+
+      if (!password) {
+        throw new Error('Please enter password');
+      }
+
+      // obtain JWT token
+      await registerEmail(email, password);
+
+      // get customer
+      await createCustomer(firstName, lastName, email);
+
+      console.log('Logged in');
+    } catch (error) {
+      console.error('Login error:', error);
+      // Optionally, handle error (e.g., show error message to user)
+      throw error; // Re-throw to allow caller to handle it
+    }
+  };
+  const logout = async () => {
+    try {
+      setJwt(null);
+      setCustomer(undefined);
+    } catch (error) {
+      console.error('Login error:', error);
+      // Optionally, handle error (e.g., show error message to user)
+      throw error; // Re-throw to allow caller to handle it
+    }
+  };
+  const getJwt = async (email: string, password: string) => {
+    try {
+      const { token } = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/auth/customer/emailpass`, {
+        credentials: 'include',
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
+        },
+        body: JSON.stringify({
+          email,
+          password,
+        }),
+      }).then((res) => res.json());
+
+      if (!token) {
+        throw new Error('Unable to retrieve token');
+      }
+      setJwt(token);
+    } catch (error) {
+      console.error('Login error in getJwt: ', error);
+      // Optionally, handle error (e.g., show error message to user)
+      throw error; // Re-throw to allow caller to handle it
+    }
+  };
+  const registerEmail = async (email: string, password: string) => {
+    try {
+      const { token } = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/auth/customer/emailpass/register`, {
+        credentials: 'include',
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
+        },
+        body: JSON.stringify({
+          email,
+          password,
+        }),
+      }).then((res) => res.json());
+
+      if (!token) {
+        throw new Error('Unable to retrieve token');
+      }
+      setJwt(token);
+    } catch (error) {
+      console.error('Register error in registerEmail: ', error);
+      // Optionally, handle error (e.g., show error message to user)
+      throw error; // Re-throw to allow caller to handle it
+    }
+  };
+  const getCustomer = async () => {
+    try {
+      if (!jwt || customer) {
+        return;
+      }
+      // get customer
+      const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/store/customers/me`, {
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${jwt}`,
+          'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
+        },
+      }).then((res) => res.json());
+
+      setCustomer(response.customer);
+    } catch (error) {
+      console.error('Login error:', error);
+      // Optionally, handle error (e.g., show error message to user)
+      throw error; // Re-throw to allow caller to handle it
+    }
+  };
+  const createCustomer = async (firstName: string, lastName: string, email: string) => {
+    try {
+      if (!jwt) {
+        return;
+      }
+      // create customer
+      const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/store/customers`, {
+        credentials: 'include',
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${jwt}`,
+          'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
+        },
+        body: JSON.stringify({
+          first_name: firstName,
+          last_name: lastName,
+          email,
+        }),
+      }).then((res) => res.json());
+
+      setCustomer(response.customer);
+    } catch (error) {
+      console.error('Login error:', error);
+      // Optionally, handle error (e.g., show error message to user)
+      throw error; // Re-throw to allow caller to handle it
+    }
+  };
+  return (
+    <CustomerContext.Provider
+      value={{
+        customer,
+        register,
+        login,
+        logout,
+      }}
+    >
+      {children}
+    </CustomerContext.Provider>
+  );
+};
+
+export const useCustomer = () => {
+  const context = useContext(CustomerContext);
+
+  if (!context) {
+    throw new Error('useCustomer must be used within a CustomerProvider');
+  }
+
+  return context;
+};
diff --git a/src/providers/region.tsx b/src/providers/region.tsx
new file mode 100644
index 0000000..c9eea37
--- /dev/null
+++ b/src/providers/region.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import { HttpTypes } from '@medusajs/types';
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type RegionContextType = {
+  region?: HttpTypes.StoreRegion;
+  setRegion: React.Dispatch<React.SetStateAction<HttpTypes.StoreRegion | undefined>>;
+};
+
+const RegionContext = createContext<RegionContextType | null>(null);
+
+type RegionProviderProps = {
+  children: React.ReactNode;
+};
+
+export const RegionProvider = ({ children }: RegionProviderProps) => {
+  const [region, setRegion] = useState<HttpTypes.StoreRegion>();
+
+  useEffect(() => {
+    if (region) {
+      // set its ID in the local storage in
+      // case it changed
+      localStorage.setItem('region_id', region.id);
+      return;
+    }
+
+    const regionId = localStorage.getItem('region_id');
+    if (!regionId) {
+      // retrieve regions and select the first one
+      fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/store/regions`, {
+        credentials: 'include',
+        headers: {
+          'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
+        },
+      })
+        .then((res) => res.json())
+        .then(({ regions }) => {
+          setRegion(regions[0]);
+        });
+    } else {
+      // retrieve selected region
+      fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/store/regions/${regionId}`, {
+        credentials: 'include',
+        headers: {
+          'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
+        },
+      })
+        .then((res) => res.json())
+        .then(({ region: dataRegion }) => {
+          setRegion(dataRegion);
+        });
+    }
+  }, [region]);
+
+  return (
+    <RegionContext.Provider
+      value={{
+        region,
+        setRegion,
+      }}
+    >
+      {children}
+    </RegionContext.Provider>
+  );
+};
+
+export const useRegion = () => {
+  const context = useContext(RegionContext);
+
+  if (!context) {
+    throw new Error('useRegion must be used within a RegionProvider');
+  }
+
+  return context;
+};