diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 2946dec..ec83151 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { useState, useMemo } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Search, MapPin, DollarSign, Briefcase, X, ChevronLeft, ChevronRight } from "lucide-react";
+import { Sparkles, Mail } from "lucide-react";
 
 const navItems = [
   { name: "Search Jobs", id: "search" },
@@ -41,81 +42,7 @@ const footerColumns = [
   },
 ];
 
-interface Job {
-  id: string;
-  title: string;
-  company: string;
-  location: string;
-  salary: string;
-  jobType: string;
-  category: string;
-  description: string;
-  postedDate: string;
-}
-
-const allJobs: Job[] = [
-  {
-    id: "1",    title: "Senior Software Engineer",    company: "TechCorp Amsterdam",    location: "Amsterdam, North Holland",    salary: "€80,000 - €120,000",    jobType: "Full-time",    category: "Technology",    description: "We're looking for an experienced software engineer to join our growing team.",    postedDate: "2 days ago"},
-  {
-    id: "2",    title: "UX/UI Designer",    company: "DesignStudio Rotterdam",    location: "Rotterdam, South Holland",    salary: "€50,000 - €75,000",    jobType: "Full-time",    category: "Design",    description: "Join our creative team to design beautiful user experiences for web and mobile.",    postedDate: "1 day ago"},
-  {
-    id: "3",    title: "Data Scientist",    company: "DataFlow Utrecht",    location: "Utrecht, Utrecht",    salary: "€70,000 - €110,000",    jobType: "Full-time",    category: "Data & Analytics",    description: "Help us build predictive models and analyze large datasets to drive business insights.",    postedDate: "3 days ago"},
-  {
-    id: "4",    title: "Product Manager",    company: "InnovateCo The Hague",    location: "The Hague, South Holland",    salary: "€60,000 - €95,000",    jobType: "Full-time",    category: "Product",    description: "Lead product strategy and development for our flagship platform.",    postedDate: "5 days ago"},
-  {
-    id: "5",    title: "Marketing Manager",    company: "BrandBoost Groningen",    location: "Groningen, Groningen",    salary: "€45,000 - €70,000",    jobType: "Full-time",    category: "Marketing",    description: "Develop and execute marketing strategies to grow our brand presence.",    postedDate: "1 week ago"},
-  {
-    id: "6",    title: "Backend Developer",    company: "CodeLabs Eindhoven",    location: "Eindhoven, North Brabant",    salary: "€65,000 - €100,000",    jobType: "Full-time",    category: "Technology",    description: "Build scalable backend systems for millions of users worldwide.",    postedDate: "3 days ago"},
-  {
-    id: "7",    title: "HR Specialist",    company: "PeopleFirst Maastricht",    location: "Maastricht, Limburg",    salary: "€40,000 - €60,000",    jobType: "Full-time",    category: "Human Resources",    description: "Support our HR team in recruiting and developing top talent.",    postedDate: "4 days ago"},
-  {
-    id: "8",    title: "Sales Executive",    company: "SalesForce Arnhem",    location: "Arnhem, Gelderland",    salary: "€35,000 - €55,000",    jobType: "Full-time",    category: "Sales",    description: "Generate leads and close deals for our innovative B2B solutions.",    postedDate: "2 days ago"},
-  {
-    id: "9",    title: "DevOps Engineer",    company: "CloudNine Amsterdam",    location: "Amsterdam, North Holland",    salary: "€75,000 - €115,000",    jobType: "Full-time",    category: "Technology",    description: "Manage cloud infrastructure and CI/CD pipelines for our platform.",    postedDate: "1 day ago"},
-  {
-    id: "10",    title: "Content Writer",    company: "ContentHub Haarlem",    location: "Haarlem, North Holland",    salary: "€35,000 - €50,000",    jobType: "Part-time",    category: "Content",    description: "Create engaging content for our blog and social media channels.",    postedDate: "2 days ago"},
-  {
-    id: "11",    title: "Financial Analyst",    company: "FinanceCore Amsterdam",    location: "Amsterdam, North Holland",    salary: "€55,000 - €85,000",    jobType: "Full-time",    category: "Finance",    description: "Analyze financial data and provide insights for strategic decision-making.",    postedDate: "6 days ago"},
-  {
-    id: "12",    title: "Frontend Developer",    company: "WebStudio Rotterdam",    location: "Rotterdam, South Holland",    salary: "€60,000 - €95,000",    jobType: "Full-time",    category: "Technology",    description: "Build beautiful, responsive web applications using modern technologies.",    postedDate: "5 days ago"},
-];
-
-const JOBS_PER_PAGE = 6;
-
 export default function SearchPage() {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-  const [selectedJobType, setSelectedJobType] = useState<string | null>(null);
-  const [selectedLocation, setSelectedLocation] = useState<string | null>(null);
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const categories = ["Technology", "Design", "Data & Analytics", "Product", "Marketing", "Finance", "Sales", "Content", "Human Resources"];
-  const jobTypes = ["Full-time", "Part-time", "Contract", "Remote"];
-  const locations = [
-    "Amsterdam, North Holland",    "Rotterdam, South Holland",    "Utrecht, Utrecht",    "The Hague, South Holland",    "Groningen, Groningen",    "Eindhoven, North Brabant",    "Maastricht, Limburg",    "Arnhem, Gelderland",    "Haarlem, North Holland"];
-
-  const filteredJobs = useMemo(() => {
-    return allJobs.filter((job) => {
-      const matchesSearch = searchQuery === "" || job.title.toLowerCase().includes(searchQuery.toLowerCase()) || job.company.toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesCategory = selectedCategory === null || job.category === selectedCategory;
-      const matchesJobType = selectedJobType === null || job.jobType === selectedJobType;
-      const matchesLocation = selectedLocation === null || job.location === selectedLocation;
-
-      return matchesSearch && matchesCategory && matchesJobType && matchesLocation;
-    });
-  }, [searchQuery, selectedCategory, selectedJobType, selectedLocation]);
-
-  const totalPages = Math.ceil(filteredJobs.length / JOBS_PER_PAGE);
-  const paginatedJobs = filteredJobs.slice((currentPage - 1) * JOBS_PER_PAGE, currentPage * JOBS_PER_PAGE);
-
-  const handleClearFilters = () => {
-    setSearchQuery("");
-    setSelectedCategory(null);
-    setSelectedJobType(null);
-    setSelectedLocation(null);
-    setCurrentPage(1);
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -138,217 +65,54 @@ export default function SearchPage() {
         />
       </div>
 
-      <div className="min-h-screen bg-gradient-to-br from-background to-card py-16 px-4">
-        <div className="max-w-6xl mx-auto">
-          {/* Search Header */}
-          <div className="mb-12">
-            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Find Your Perfect Job</h1>
-            <p className="text-foreground/70 text-lg mb-8">Search across thousands of opportunities in the Netherlands</p>
+      <div id="features" data-section="features">
+        <FeatureCardEight
+          title="Search & Browse Jobs Across the Netherlands"
+          description="Explore our comprehensive job search experience with advanced filters, diverse listings, and tailored opportunities for every career stage."
+          tag="Advanced Search"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          features={[
+            {
+              id: 1,
+              title: "Filter by Province",              description:
+                "Search jobs from all 12 Dutch provinces including Amsterdam, Rotterdam, Utrecht, and beyond. Find opportunities near you or explore remote positions nationwide.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=4",              imageAlt: "Province filter interface"},
+            {
+              id: 2,
+              title: "Refine by Category",              description:
+                "Browse across multiple industries: Technology, Healthcare, Finance, Engineering, Marketing, Sales, and more. Find roles that match your expertise and interests.",              imageSrc:
+                "http://img.b2bpic.net/free-vector/professional-bookkeeping-postcard-template_23-2149341358.jpg?_wi=2",              imageAlt: "Job category options"},
+            {
+              id: 3,
+              title: "Salary & Experience Level",              description:
+                "Filter by salary range, job type (full-time, part-time, contract), and experience level (entry-level, mid-career, senior) to find the perfect match for your career goals.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804568.jpg?_wi=3",              imageAlt: "Salary and level filters"},
+          ]}
+          buttons={[
+            {
+              text: "Start Your Search",              href: "/search"},
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
 
-            {/* Search Bar */}
-            <div className="relative mb-8">
-              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-primary-cta w-5 h-5" />
-              <input
-                type="text"
-                placeholder="Search job title or company..."
-                value={searchQuery}
-                onChange={(e) => {
-                  setSearchQuery(e.target.value);
-                  setCurrentPage(1);
-                }}
-                className="w-full pl-12 pr-4 py-3 rounded-lg border border-accent/20 bg-card text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta focus:ring-2 focus:ring-primary-cta/20 transition"
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
-            {/* Filters Sidebar */}
-            <div className="lg:col-span-1">
-              <div className="bg-card rounded-lg p-6 border border-accent/10 sticky top-24">
-                <div className="flex justify-between items-center mb-6">
-                  <h3 className="text-lg font-semibold text-foreground">Filters</h3>
-                  {(selectedCategory || selectedJobType || selectedLocation) && (
-                    <button
-                      onClick={handleClearFilters}
-                      className="text-sm text-primary-cta hover:text-primary-cta/80 transition"
-                    >
-                      Clear
-                    </button>
-                  )}
-                </div>
-
-                {/* Category Filter */}
-                <div className="mb-8">
-                  <h4 className="text-sm font-semibold text-foreground mb-3 flex items-center gap-2">
-                    <Briefcase className="w-4 h-4" />
-                    Category
-                  </h4>
-                  <div className="space-y-2">
-                    {categories.map((cat) => (
-                      <label key={cat} className="flex items-center gap-3 cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={selectedCategory === cat}
-                          onChange={(e) => {
-                            setSelectedCategory(e.target.checked ? cat : null);
-                            setCurrentPage(1);
-                          }}
-                          className="w-4 h-4 rounded border-accent/20 text-primary-cta focus:ring-primary-cta/20 cursor-pointer"
-                        />
-                        <span className="text-sm text-foreground/70">{cat}</span>
-                      </label>
-                    ))}
-                  </div>
-                </div>
-
-                {/* Job Type Filter */}
-                <div className="mb-8">
-                  <h4 className="text-sm font-semibold text-foreground mb-3">Job Type</h4>
-                  <div className="space-y-2">
-                    {jobTypes.map((type) => (
-                      <label key={type} className="flex items-center gap-3 cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={selectedJobType === type}
-                          onChange={(e) => {
-                            setSelectedJobType(e.target.checked ? type : null);
-                            setCurrentPage(1);
-                          }}
-                          className="w-4 h-4 rounded border-accent/20 text-primary-cta focus:ring-primary-cta/20 cursor-pointer"
-                        />
-                        <span className="text-sm text-foreground/70">{type}</span>
-                      </label>
-                    ))}
-                  </div>
-                </div>
-
-                {/* Location Filter */}
-                <div>
-                  <h4 className="text-sm font-semibold text-foreground mb-3 flex items-center gap-2">
-                    <MapPin className="w-4 h-4" />
-                    Location
-                  </h4>
-                  <div className="space-y-2">
-                    {locations.map((loc) => (
-                      <label key={loc} className="flex items-center gap-3 cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={selectedLocation === loc}
-                          onChange={(e) => {
-                            setSelectedLocation(e.target.checked ? loc : null);
-                            setCurrentPage(1);
-                          }}
-                          className="w-4 h-4 rounded border-accent/20 text-primary-cta focus:ring-primary-cta/20 cursor-pointer"
-                        />
-                        <span className="text-sm text-foreground/70">{loc}</span>
-                      </label>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Job Listings */}
-            <div className="lg:col-span-3">
-              {/* Results Info */}
-              <div className="mb-6 flex justify-between items-center">
-                <p className="text-sm text-foreground/70">
-                  Showing {paginatedJobs.length > 0 ? (currentPage - 1) * JOBS_PER_PAGE + 1 : 0}-{Math.min(currentPage * JOBS_PER_PAGE, filteredJobs.length)} of {filteredJobs.length} jobs
-                </p>
-              </div>
-
-              {/* Job Cards */}
-              {paginatedJobs.length > 0 ? (
-                <div className="space-y-4 mb-8">
-                  {paginatedJobs.map((job) => (
-                    <div key={job.id} className="bg-card rounded-lg border border-accent/10 p-6 hover:border-primary-cta/30 transition cursor-pointer">
-                      <div className="flex justify-between items-start mb-3">
-                        <div className="flex-1">
-                          <h3 className="text-xl font-semibold text-foreground mb-1">{job.title}</h3>
-                          <p className="text-sm text-foreground/70">{job.company}</p>
-                        </div>
-                        <span className="px-3 py-1 bg-primary-cta/10 text-primary-cta text-xs font-semibold rounded-full">{job.category}</span>
-                      </div>
-
-                      <p className="text-foreground/70 text-sm mb-4">{job.description}</p>
-
-                      <div className="flex flex-wrap gap-6 mb-4">
-                        <div className="flex items-center gap-2">
-                          <MapPin className="w-4 h-4 text-accent" />
-                          <span className="text-sm text-foreground/70">{job.location}</span>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <DollarSign className="w-4 h-4 text-accent" />
-                          <span className="text-sm text-foreground/70">{job.salary}</span>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <Briefcase className="w-4 h-4 text-accent" />
-                          <span className="text-sm text-foreground/70">{job.jobType}</span>
-                        </div>
-                      </div>
-
-                      <div className="flex justify-between items-center">
-                        <span className="text-xs text-foreground/50">{job.postedDate}</span>
-                        <button className="px-4 py-2 bg-primary-cta text-white rounded-lg hover:bg-primary-cta/90 transition text-sm font-medium">
-                          Apply Now
-                        </button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <div className="bg-card rounded-lg border border-accent/10 p-12 text-center">
-                  <Search className="w-12 h-12 text-foreground/30 mx-auto mb-4" />
-                  <h3 className="text-lg font-semibold text-foreground mb-2">No jobs found</h3>
-                  <p className="text-foreground/70 mb-4">Try adjusting your search filters or search terms</p>
-                  <button
-                    onClick={handleClearFilters}
-                    className="px-4 py-2 bg-primary-cta text-white rounded-lg hover:bg-primary-cta/90 transition text-sm font-medium"
-                  >
-                    Clear Filters
-                  </button>
-                </div>
-              )}
-
-              {/* Pagination */}
-              {totalPages > 1 && (
-                <div className="flex justify-center items-center gap-2 mt-12">
-                  <button
-                    onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-                    disabled={currentPage === 1}
-                    className="p-2 rounded-lg border border-accent/20 text-foreground hover:bg-card disabled:opacity-50 disabled:cursor-not-allowed transition"
-                  >
-                    <ChevronLeft className="w-5 h-5" />
-                  </button>
-
-                  <div className="flex items-center gap-2">
-                    {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
-                      <button
-                        key={page}
-                        onClick={() => setCurrentPage(page)}
-                        className={`w-10 h-10 rounded-lg font-medium transition ${
-                          currentPage === page
-                            ? "bg-primary-cta text-white"
-                            : "border border-accent/20 text-foreground hover:bg-card"
-                        }`}
-                      >
-                        {page}
-                      </button>
-                    ))}
-                  </div>
-
-                  <button
-                    onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
-                    disabled={currentPage === totalPages}
-                    className="p-2 rounded-lg border border-accent/20 text-foreground hover:bg-card disabled:opacity-50 disabled:cursor-not-allowed transition"
-                  >
-                    <ChevronRight className="w-5 h-5" />
-                  </button>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Save Your Search"
+          title="Get Personalized Job Recommendations"
+          description="Create an account and set up job alerts. We'll notify you about new positions matching your criteria so you never miss an opportunity."
+          tagIcon={Mail}
+          tagAnimation="slide-up"
+          background={{
+            variant: "animated-grid"}}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email to get started"
+          buttonText="Create Alert"
+          termsText="Your preferences are private and secure. Manage your alerts anytime."
+        />
       </div>
 
       <div id="footer" data-section="footer">