diff --git a/src/app/videos/page.tsx b/src/app/videos/page.tsx
index 57b62ac..98a363c 100644
--- a/src/app/videos/page.tsx
+++ b/src/app/videos/page.tsx
@@ -1,48 +1,65 @@
 "use client"
 
+import { useState, useMemo } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
-import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { useState } from 'react';
-import { Search } from 'lucide-react';
-import Input from '@/components/form/Input';
+import { Play, X } from "lucide-react";
+
+interface Video {
+  id: string;
+  title: string;
+  description: string;
+  thumbnail: string;
+  videoUrl: string;
+  cuisine: string;
+  chef: string;
+  duration: string;
+}
+
+const videos: Video[] = [
+  {
+    id: "1",    title: "Luxurious Night Skincare Routine",    description: "Learn the perfect evening skincare regimen for deep hydration and overnight repair.",    thumbnail: "http://img.b2bpic.net/free-photo/woman-applying-moisturizer-her-beauty-routine_23-2150166464.jpg",    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ElephantsDream.mp4",    cuisine: "Skincare Tutorial",    chef: "Dr. Sarah Chen",    duration: "12:45"
+  },
+  {
+    id: "2",    title: "Anti-Aging Serum Application Guide",    description: "Master the technique for maximum anti-aging benefits with our premium serum.",    thumbnail: "http://img.b2bpic.net/free-photo/make-up-concept-with-pink-nail-polish_23-2149030370.jpg",    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/BigBuckBunny.mp4",    cuisine: "Product Guide",    chef: "Elena Rodriguez",    duration: "8:30"
+  },
+  {
+    id: "3",    title: "Hydration Secrets for Dry Skin",    description: "Discover professional techniques to combat dryness and achieve radiant skin.",    thumbnail: "http://img.b2bpic.net/free-photo/flat-lay-hands-holding-body-care-product-wooden-background_23-2148241876.jpg",    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ForBiggerBlazes.mp4",    cuisine: "Skincare Tutorial",    chef: "Dr. James Wilson",    duration: "15:20"
+  },
+  {
+    id: "4",    title: "Natural Ingredients Deep Dive",    description: "Explore the science behind our carefully selected natural ingredients.",    thumbnail: "http://img.b2bpic.net/free-photo/product-branding-packaging_23-2150965833.jpg",    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ForBiggerJoyrides.mp4",    cuisine: "Educational",    chef: "Dr. Lisa Martinez",    duration: "18:10"
+  },
+  {
+    id: "5",    title: "Minimalist Skincare Routine",    description: "Less is more: build an effective skincare routine with just essentials.",    thumbnail: "http://img.b2bpic.net/free-photo/model-career-kit-still-life-flat-lay_23-2150218023.jpg",    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ForBiggerEscapes.mp4",    cuisine: "Skincare Tutorial",    chef: "Emma Thompson",    duration: "10:15"
+  },
+  {
+    id: "6",    title: "Acne Treatment Protocol",    description: "Professional advice on treating acne-prone skin with our product line.",    thumbnail: "http://img.b2bpic.net/free-photo/close-perfection-closeup-peaceful-relaxed-redhead-happy-woman-closed-eyes-pure-delighted-smile-sh_1258-139766.jpg",    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ElephantsDream.mp4",    cuisine: "Product Guide",    chef: "Dr. Michael Lee",    duration: "14:05"
+  },
+  {
+    id: "7",    title: "Sensitive Skin Solutions",    description: "Gentle approaches to care for sensitive and reactive skin types.",    thumbnail: "http://img.b2bpic.net/free-photo/young-beautiful-woman-having-online-meeting_23-2149116347.jpg",    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/BigBuckBunny.mp4",    cuisine: "Skincare Tutorial",    chef: "Dr. Sophie Brown",    duration: "11:40"
+  },
+  {
+    id: "8",    title: "Seasonal Skincare Adjustments",    description: "How to adapt your skincare routine for different seasons and climates.",    thumbnail: "http://img.b2bpic.net/free-photo/young-women-polishing-nails-bed_23-2147770248.jpg",    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ForBiggerBlazes.mp4",    cuisine: "Educational",    chef: "Dr. Amanda White",    duration: "16:25"
+  }
+];
 
 export default function VideosPage() {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedCategory, setSelectedCategory] = useState('all');
+  const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
+  const [cuisineFilter, setCuisineFilter] = useState<string>("All");
+  const [chefFilter, setChefFilter] = useState<string>("All");
 
-  const allVideos = [
-    {
-      id: "1",      category: "French Cuisine",      title: "Classic French Techniques",      excerpt: "Learn the essential knife skills and techniques used by professional chefs in French cuisine. Master julienne, brunoise, and chiffonade cuts.",      imageSrc: "http://img.b2bpic.net/free-photo/chef-preparing-dish_23-2148241892.jpg",      imageAlt: "Chef preparing French dish",      authorName: "Chef Marie Dubois",      authorAvatar: "http://img.b2bpic.net/free-photo/woman-smiles-toothily-keeps-palms-pressed-together-looks-away-joyfully-wears-casual-t-shirt-isolated-beige-copy-space-away-positive-emotions-concept_273609-56517.jpg",      date: "Jan 20, 2025"
-    },
-    {
-      id: "2",      category: "Mediterranean",      title: "Mediterranean Summer Salad",      excerpt: "Discover how to prepare fresh, vibrant Mediterranean dishes with seasonal ingredients. Fresh vegetables, feta, and olive oil combinations.",      imageSrc: "http://img.b2bpic.net/free-photo/food-photography-salad_23-2148241893.jpg",      imageAlt: "Mediterranean salad",      authorName: "Chef Antonio Rivera",      authorAvatar: "http://img.b2bpic.net/free-photo/young-beautiful-woman-having-online-meeting_23-2149116347.jpg",      date: "Jan 18, 2025"
-    },
-    {
-      id: "3",      category: "Baking",      title: "Artisan Bread Making",      excerpt: "Master the art of baking traditional sourdough bread with proper fermentation techniques. Create perfect crusts and fluffy interiors.",      imageSrc: "http://img.b2bpic.net/free-photo/baking-bread_23-2148241894.jpg",      imageAlt: "Artisan bread",      authorName: "Chef Sophie Laurent",      authorAvatar: "http://img.b2bpic.net/free-photo/young-women-polishing-nails-bed_23-2147770248.jpg",      date: "Jan 15, 2025"
-    },
-    {
-      id: "4",      category: "Asian Cuisine",      title: "Wok Mastery for Beginners",      excerpt: "Learn the fundamentals of wok cooking including proper heat management and ingredient timing for authentic Asian flavors.",      imageSrc: "http://img.b2bpic.net/free-photo/cooking-asian-food_23-2148241895.jpg",      imageAlt: "Asian wok cooking",      authorName: "Chef Lin Chen",      authorAvatar: "http://img.b2bpic.net/free-photo/close-perfection-closeup-peaceful-relaxed-redhead-happy-woman-closed-eyes-pure-delighted-smile-sh_1258-139766.jpg",      date: "Jan 12, 2025"
-    },
-    {
-      id: "5",      category: "Desserts",      title: "Chocolate Tempering Secrets",      excerpt: "Unlock the secrets of professional chocolate tempering for glossy, smooth finishes on your desserts and confections.",      imageSrc: "http://img.b2bpic.net/free-photo/chocolate-dessert_23-2148241896.jpg",      imageAlt: "Chocolate tempering",      authorName: "Chef Laurent Petit",      authorAvatar: "http://img.b2bpic.net/free-photo/woman-smiles-toothily-keeps-palms-pressed-together-looks-away-joyfully-wears-casual-t-shirt-isolated-beige-copy-space-away-positive-emotions-concept_273609-56517.jpg",      date: "Jan 10, 2025"
-    },
-    {
-      id: "6",      category: "French Cuisine",      title: "Perfect Béarnaise Sauce",      excerpt: "Create the classic French béarnaise sauce from scratch with proper emulsification techniques and flavor balancing.",      imageSrc: "http://img.b2bpic.net/free-photo/sauce-preparation_23-2148241897.jpg",      imageAlt: "Béarnaise sauce",      authorName: "Chef Marie Dubois",      authorAvatar: "http://img.b2bpic.net/free-photo/woman-smiles-toothily-keeps-palms-pressed-together-looks-away-joyfully-wears-casual-t-shirt-isolated-beige-copy-space-away-positive-emotions-concept_273609-56517.jpg",      date: "Jan 8, 2025"
-    }
-  ];
+  const cuisines = ["All", ...Array.from(new Set(videos.map(v => v.cuisine)))];
+  const chefs = ["All", ...Array.from(new Set(videos.map(v => v.chef)))];
 
-  const categories = ['all', 'French Cuisine', 'Mediterranean', 'Baking', 'Asian Cuisine', 'Desserts'];
-
-  const filteredVideos = allVideos.filter(video => {
-    const matchesSearch = video.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                         video.excerpt.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                         video.authorName.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesCategory = selectedCategory === 'all' || video.category === selectedCategory;
-    return matchesSearch && matchesCategory;
-  });
+  const filteredVideos = useMemo(() => {
+    return videos.filter(video => {
+      const cuisineMatch = cuisineFilter === "All" || video.cuisine === cuisineFilter;
+      const chefMatch = chefFilter === "All" || video.chef === chefFilter;
+      return cuisineMatch && chefMatch;
+    });
+  }, [cuisineFilter, chefFilter]);
 
   return (
     <ThemeProvider
@@ -60,11 +77,12 @@ export default function VideosPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "#about" },
-            { name: "Products", id: "#products" },
-            { name: "Features", id: "#features" },
-            { name: "Contact", id: "#contact" }
+            { name: "About", id: "about" },
+            { name: "Products", id: "products" },
+            { name: "Features", id: "features" },
+            { name: "Reviews", id: "testimonials" },
+            { name: "Videos", id: "videos" },
+            { name: "Contact", id: "contact" }
           ]}
           button={{ text: "Shop Now", href: "/" }}
           brandName="Lumière Skin"
@@ -72,72 +90,150 @@ export default function VideosPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroOverlay
-          title="Cooking Videos & Tutorials"
-          description="Explore our collection of culinary expertise from world-class chefs. Learn techniques, recipes, and cooking secrets."
-          tag="Video Gallery"
-          textPosition="center"
-          showDimOverlay={true}
+        <HeroLogoBillboard
+          logoText="Skincare Videos"
+          description="Expert tutorials, product guides, and educational content to help you master your skincare routine."
           buttons={[
-            { text: "Browse Videos", href: "#videos" }
+            { text: "Back to Home", href: "/" },
+            { text: "Shop Collection", href: "/" }
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/chef-preparing-dish_23-2148241892.jpg"
-          imageAlt="Professional chef cooking"
+          background={{ variant: "sparkles-gradient" }}
+          imageSrc="http://img.b2bpic.net/free-photo/woman-applying-moisturizer-her-beauty-routine_23-2150166464.jpg"
+          imageAlt="Video Gallery"
+          mediaAnimation="slide-up"
+          frameStyle="card"
+          buttonAnimation="blur-reveal"
         />
       </div>
 
-      <div id="filters" data-section="filters" className="relative py-20 px-4">
-        <div className="max-w-4xl mx-auto">
-          <div className="mb-8">
-            <h2 className="text-3xl font-bold mb-4">Search & Filter Videos</h2>
-            <div className="flex flex-col gap-4">
-              <div className="flex gap-2">
-                <Search className="w-5 h-5 opacity-50 self-center" />
-                <Input
-                  value={searchQuery}
-                  onChange={setSearchQuery}
-                  placeholder="Search by title, chef name, or topic..."
-                  type="text"
-                />
+      <div id="videos" data-section="videos" className="py-20">
+        <div className="w-full max-w-7xl mx-auto px-6">
+          {/* Filters */}
+          <div className="mb-12">
+            <div className="grid md:grid-cols-2 gap-8">
+              <div>
+                <h3 className="text-lg font-semibold mb-4">Filter by Category</h3>
+                <div className="flex flex-wrap gap-2">
+                  {cuisines.map(cuisine => (
+                    <button
+                      key={cuisine}
+                      onClick={() => setCuisineFilter(cuisine)}
+                      className={`px-4 py-2 rounded-lg transition-all ${
+                        cuisineFilter === cuisine
+                          ? "bg-gradient-to-r from-pink-500 to-rose-500 text-white"
+                          : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                      }`}
+                    >
+                      {cuisine}
+                    </button>
+                  ))}
+                </div>
               </div>
-              <div className="flex flex-wrap gap-2">
-                {categories.map(category => (
-                  <button
-                    key={category}
-                    onClick={() => setSelectedCategory(category)}
-                    className={`px-4 py-2 rounded-full transition ${
-                      selectedCategory === category
-                        ? 'bg-primary-cta text-white'
-                        : 'bg-secondary-cta/30 hover:bg-secondary-cta/50'
-                    }`}
-                  >
-                    {category.charAt(0).toUpperCase() + category.slice(1)}
-                  </button>
-                ))}
+              <div>
+                <h3 className="text-lg font-semibold mb-4">Filter by Expert</h3>
+                <div className="flex flex-wrap gap-2">
+                  {chefs.map(chef => (
+                    <button
+                      key={chef}
+                      onClick={() => setChefFilter(chef)}
+                      className={`px-4 py-2 rounded-lg transition-all ${
+                        chefFilter === chef
+                          ? "bg-gradient-to-r from-pink-500 to-rose-500 text-white"
+                          : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                      }`}
+                    >
+                      {chef}
+                    </button>
+                  ))}
+                </div>
               </div>
-              <p className="text-sm opacity-75">Found {filteredVideos.length} video{filteredVideos.length !== 1 ? 's' : ''}</p>
             </div>
           </div>
+
+          {/* Video Grid */}
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+            {filteredVideos.map(video => (
+              <div
+                key={video.id}
+                className="group cursor-pointer rounded-xl overflow-hidden bg-white shadow-lg hover:shadow-xl transition-shadow"
+                onClick={() => setSelectedVideo(video)}
+              >
+                <div className="relative aspect-video bg-gray-900 overflow-hidden">
+                  <img
+                    src={video.thumbnail}
+                    alt={video.title}
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                  />
+                  <div className="absolute inset-0 bg-black/40 flex items-center justify-center group-hover:bg-black/50 transition-colors">
+                    <Play className="w-16 h-16 text-white fill-white" />
+                  </div>
+                  <div className="absolute top-2 right-2 bg-black/70 px-3 py-1 rounded text-white text-sm">
+                    {video.duration}
+                  </div>
+                </div>
+                <div className="p-4">
+                  <h3 className="font-semibold text-gray-900 mb-2 line-clamp-2 group-hover:text-pink-600 transition-colors">
+                    {video.title}
+                  </h3>
+                  <p className="text-sm text-gray-600 mb-3 line-clamp-2">{video.description}</p>
+                  <div className="flex flex-wrap gap-2 mb-3">
+                    <span className="text-xs bg-pink-100 text-pink-700 px-2 py-1 rounded">
+                      {video.cuisine}
+                    </span>
+                    <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">
+                      {video.chef}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {filteredVideos.length === 0 && (
+            <div className="text-center py-12">
+              <p className="text-gray-600 text-lg">No videos found with the selected filters.</p>
+            </div>
+          )}
         </div>
       </div>
 
-      <div id="videos" data-section="videos">
-        {filteredVideos.length > 0 ? (
-          <BlogCardThree
-            blogs={filteredVideos}
-            title="Featured Cooking Videos"
-            description="Watch expert chefs share their culinary techniques and recipes in our video gallery."
-            animationType="slide-up"
-            textboxLayout="default"
-            useInvertedBackground={false}
-            tag="Videos"
-          />
-        ) : (
-          <div className="py-20 text-center">
-            <p className="text-xl opacity-75">No videos found matching your search. Try different keywords or categories.</p>
+      {/* Video Player Modal */}
+      {selectedVideo && (
+        <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl overflow-hidden max-w-4xl w-full">
+            <div className="flex justify-between items-center p-6 border-b">
+              <h2 className="text-xl font-semibold">{selectedVideo.title}</h2>
+              <button
+                onClick={() => setSelectedVideo(null)}
+                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+            <div className="aspect-video bg-black">
+              <video
+                src={selectedVideo.videoUrl}
+                controls
+                autoPlay
+                className="w-full h-full"
+              />
+            </div>
+            <div className="p-6">
+              <p className="text-gray-700 mb-4">{selectedVideo.description}</p>
+              <div className="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <p className="text-gray-600 font-medium">Category</p>
+                  <p className="text-gray-900">{selectedVideo.cuisine}</p>
+                </div>
+                <div>
+                  <p className="text-gray-600 font-medium">Expert</p>
+                  <p className="text-gray-900">{selectedVideo.chef}</p>
+                </div>
+              </div>
+            </div>
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
       <div id="footer" data-section="footer">
         <FooterBaseCard
@@ -145,24 +241,24 @@ export default function VideosPage() {
           columns={[
             {
               title: "Shop",              items: [
-                { label: "All Products", href: "/#products" },
-                { label: "Skincare Routine", href: "/#products" },
-                { label: "Collections", href: "/#products" },
-                { label: "Gift Sets", href: "/#products" }
+                { label: "All Products", href: "/" },
+                { label: "Skincare Routine", href: "/" },
+                { label: "Collections", href: "/" },
+                { label: "Gift Sets", href: "/" }
               ]
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "/#about" },
-                { label: "Our Story", href: "/#about" },
+                { label: "About Us", href: "/" },
+                { label: "Our Story", href: "/" },
                 { label: "Sustainability", href: "#" },
                 { label: "Careers", href: "#" }
               ]
             },
             {
               title: "Support",              items: [
-                { label: "Contact Us", href: "/#contact" },
-                { label: "FAQ", href: "/#faq" },
+                { label: "Contact Us", href: "/" },
+                { label: "FAQ", href: "/" },
                 { label: "Shipping Info", href: "#" },
                 { label: "Returns", href: "#" }
               ]