diff --git a/src/components/home/BeforeAfterGallery.tsx b/src/components/home/BeforeAfterGallery.tsx
index d8ce9bf..babf390 100644
--- a/src/components/home/BeforeAfterGallery.tsx
+++ b/src/components/home/BeforeAfterGallery.tsx
@@ -1,67 +1,43 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { useState } from "react";
+import { useState, useRef } from "react";
 
 const results = [
   {
     id: 1,
     name: "Facial Skin Transformation",
-    beforeImg: "https://images.unsplash.com/photo-1559351283-d7fd36c8a4c0?w=600&h=750&fit=crop&q=80",
-    afterImg: "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=600&h=750&fit=crop&q=80",
-    description: "After 6 weeks with Manoon Anti-age Serum",
+    beforeImg: "https://images.unsplash.com/photo-1559351283-d7fd36c8a4c0?w=600&h=600&fit=crop&q=80",
+    afterImg: "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=600&h=600&fit=crop&q=80",
+    timeline: "4-6 Weeks",
     rating: 5,
-    reviewCount: 847,
-  },
-  {
-    id: 2,
-    name: "Skin Radiance Journey",
-    beforeImg: "https://images.unsplash.com/photo-1594824476967-48c8b964273f?w=600&h=750&fit=crop&q=80",
-    afterImg: "https://images.unsplash.com/photo-1618944847829-3c1a3d1b7b7c?w=600&h=750&fit=crop&q=80",
-    description: "After 8 weeks with Manoon Morning Glow",
-    rating: 5,
-    reviewCount: 623,
-  },
-  {
-    id: 3,
-    name: "Overall Skin Health",
-    beforeImg: "https://images.unsplash.com/photo-1552693673-1bf958298b77?w=600&h=750&fit=crop&q=80",
-    afterImg: "https://images.unsplash.com/photo-1596755389378-c31d21fd1273?w=600&h=750&fit=crop&q=80",
-    description: "After 4 weeks with Manoon Hair Elixir",
-    rating: 5,
-    reviewCount: 412,
+    reviewCount: 2847,
   },
 ];
 
-function StarRating({ rating, count }: { rating: number; count: number }) {
-  return (
-    <div className="flex items-center gap-2">
-      <div className="flex gap-0.5">
-        {[1, 2, 3, 4, 5].map((star) => (
-          <svg
-            key={star}
-            className={`w-4 h-4 ${star <= rating ? "fill-gold text-gold" : "fill-gray-300 text-gray-300"}`}
-            viewBox="0 0 24 24"
-          >
-            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-          </svg>
-        ))}
-      </div>
-      <span className="text-sm text-[#666666]">({count} reviews)</span>
-    </div>
-  );
-}
-
 export default function BeforeAfterGallery() {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [showBefore, setShowBefore] = useState(false);
-  const activeResult = results[activeIndex];
+  const [sliderPosition, setSliderPosition] = useState(50);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = ((e.clientX - rect.left) / rect.width) * 100;
+    setSliderPosition(Math.max(0, Math.min(100, x)));
+  };
+
+  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = ((e.touches[0].clientX - rect.left) / rect.width) * 100;
+    setSliderPosition(Math.max(0, Math.min(100, x)));
+  };
 
   return (
     <section className="py-24 bg-[#faf9f7]">
       <div className="container mx-auto px-4">
         <motion.div
-          className="text-center mb-16"
+          className="text-center mb-12"
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -73,153 +49,119 @@ export default function BeforeAfterGallery() {
           <h2 className="text-3xl md:text-4xl font-medium mb-4">
             See the Transformation
           </h2>
-          <p className="text-[#666666] max-w-xl mx-auto">
-            Real customers, real results. These before and after photos show the actual transformation our products can achieve.
-          </p>
         </motion.div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center max-w-6xl mx-auto">
-          {/* Before/After Image */}
+        <div className="max-w-4xl mx-auto">
+          {/* Before/After Slider */}
           <motion.div
-            className="relative"
-            initial={{ opacity: 0, x: -30 }}
-            whileInView={{ opacity: 1, x: 0 }}
+            ref={containerRef}
+            className="relative aspect-[4/3] rounded-2xl overflow-hidden shadow-2xl cursor-ew-resize select-none"
+            onMouseMove={handleMouseMove}
+            onTouchMove={handleTouchMove}
+            initial={{ opacity: 0, scale: 0.98 }}
+            whileInView={{ opacity: 1, scale: 1 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6 }}
           >
-            {/* Image Container */}
-            <div className="relative aspect-[4/5] rounded-2xl overflow-hidden shadow-2xl">
-              <img
-                src={showBefore ? activeResult.beforeImg : activeResult.afterImg}
-                alt={showBefore ? `${activeResult.name} - Before` : `${activeResult.name} - After`}
-                className="w-full h-full object-cover"
-              />
-              
-              {/* Gradient overlay */}
-              <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
-              
-              {/* Before/After Label */}
-              <div className="absolute top-4 left-4">
-                <div className="bg-black/70 backdrop-blur-sm text-white px-4 py-2 rounded-full text-sm font-medium">
-                  {showBefore ? "BEFORE" : "AFTER"}
-                </div>
-              </div>
+            {/* After Image (full width, underneath) */}
+            <img
+              src={results[0].afterImg}
+              alt="After - Smooth skin"
+              className="absolute inset-0 w-full h-full object-cover"
+            />
 
-              {/* Results badge */}
-              {!showBefore && (
-                <div className="absolute top-4 right-4">
-                  <div className="bg-white/90 backdrop-blur-sm text-black px-4 py-2 rounded-full text-sm font-medium flex items-center gap-2">
-                    <svg className="w-4 h-4 fill-green-600" viewBox="0 0 24 24">
-                      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
-                    </svg>
-                    Verified Result
-                  </div>
-                </div>
-              )}
+            {/* Before Image (clipped) */}
+            <div
+              className="absolute inset-0 overflow-hidden"
+              style={{ width: `${sliderPosition}%` }}
+            >
+              <img
+                src={results[0].beforeImg}
+                alt="Before - Wrinkled skin"
+                className="absolute inset-0 h-full object-cover"
+                style={{ width: `${100 / (sliderPosition / 100)}%`, maxWidth: 'none' }}
+              />
             </div>
 
-            {/* Before/After Toggle */}
-            <div className="flex justify-center mt-6">
-              <div className="inline-flex items-center bg-white rounded-full p-1 shadow-lg">
-                <button
-                  onClick={() => setShowBefore(true)}
-                  className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-300 ${
-                    showBefore
-                      ? "bg-black text-white"
-                      : "text-[#666666] hover:text-black"
-                  }`}
-                >
-                  Before
-                </button>
-                <button
-                  onClick={() => setShowBefore(false)}
-                  className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-300 ${
-                    !showBefore
-                      ? "bg-black text-white"
-                      : "text-[#666666] hover:text-black"
-                  }`}
-                >
-                  After
-                </button>
+            {/* Slider Handle */}
+            <div
+              className="absolute top-0 bottom-0 w-1 bg-white shadow-lg cursor-ew-resize"
+              style={{ left: `${sliderPosition}%`, transform: 'translateX(-50%)' }}
+            >
+              {/* Handle Circle */}
+              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center">
+                <svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
+                </svg>
               </div>
             </div>
+
+            {/* Before Label */}
+            <div className="absolute top-4 left-4 bg-black/70 text-white px-4 py-2 rounded-full text-sm font-medium backdrop-blur-sm">
+              BEFORE
+            </div>
+
+            {/* After Label */}
+            <div className="absolute top-4 right-4 bg-black/70 text-white px-4 py-2 rounded-full text-sm font-medium backdrop-blur-sm">
+              AFTER
+            </div>
           </motion.div>
 
-          {/* Info Panel */}
+          {/* Timeline and Rating */}
           <motion.div
-            initial={{ opacity: 0, x: 30 }}
-            whileInView={{ opacity: 1, x: 0 }}
+            className="flex items-center justify-center gap-8 mt-8"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
-            transition={{ duration: 0.6 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
           >
-            {/* Thumbnails */}
-            <div className="flex gap-4 mb-8">
-              {results.map((result, index) => (
-                <button
-                  key={result.id}
-                  onClick={() => {
-                    setActiveIndex(index);
-                    setShowBefore(false);
-                  }}
-                  className={`relative w-20 h-20 rounded-xl overflow-hidden transition-all duration-300 ${
-                    activeIndex === index
-                      ? "ring-2 ring-black ring-offset-2"
-                      : "opacity-60 hover:opacity-100"
-                  }`}
-                >
-                  <img
-                    src={result.afterImg}
-                    alt={result.name}
-                    className="w-full h-full object-cover"
-                  />
-                </button>
-              ))}
+            <div className="flex items-center gap-2">
+              <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span className="text-sm font-medium">{results[0].timeline}</span>
             </div>
 
-            {/* Result Info */}
-            <h3 className="text-2xl font-medium mb-3">
-              {activeResult.name}
-            </h3>
-            <p className="text-[#666666] mb-4">
-              {activeResult.description}
-            </p>
-            <div className="mb-8">
-              <StarRating rating={activeResult.rating} count={activeResult.reviewCount} />
+            <div className="flex items-center gap-2">
+              <div className="flex">
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <svg key={star} className="w-5 h-5 fill-gold text-gold" viewBox="0 0 24 24">
+                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                  </svg>
+                ))}
+              </div>
+              <span className="text-sm text-[#666666]">({results[0].reviewCount.toLocaleString()} reviews)</span>
             </div>
+          </motion.div>
 
-            {/* Benefits */}
-            <div className="space-y-3 mb-8">
-              {[
-                "Visible improvement in skin texture",
-                "Reduced appearance of fine lines",
-                "Improved skin hydration and radiance",
-              ].map((benefit, index) => (
-                <div key={index} className="flex items-center gap-3">
-                  <div className="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
-                    <svg className="w-3.5 h-3.5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
-                    </svg>
-                  </div>
-                  <span className="text-sm text-[#444444]">{benefit}</span>
-                </div>
-              ))}
-            </div>
+          {/* Verified Results Badge */}
+          <motion.div
+            className="flex items-center justify-center gap-2 mt-4"
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6, delay: 0.3 }}
+          >
+            <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+            <span className="text-sm text-green-700 font-medium">Verified Results</span>
+          </motion.div>
 
-            {/* CTA */}
-            <div className="flex flex-wrap gap-4">
-              <a
-                href="/products"
-                className="inline-block bg-black text-white px-8 py-4 text-sm uppercase tracking-[0.1em] font-medium hover:bg-[#333333] transition-colors"
-              >
-                Shop Now
-              </a>
-              <a
-                href="/reviews"
-                className="inline-block border-2 border-black text-black px-8 py-4 text-sm uppercase tracking-[0.1em] font-medium hover:bg-black hover:text-white transition-colors"
-              >
-                Read All Reviews
-              </a>
-            </div>
+          {/* CTA */}
+          <motion.div
+            className="text-center mt-10"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6, delay: 0.4 }}
+          >
+            <a
+              href="/products"
+              className="inline-block px-10 py-4 bg-black text-white text-[13px] uppercase tracking-[0.15em] font-semibold hover:bg-[#333] transition-colors"
+            >
+              Start Your Transformation
+            </a>
           </motion.div>
         </div>
       </div>