diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index cb0ec54..9d80e98 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -1,132 +1,39 @@
 "use client";
 
-import { useState, useMemo } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Search, MapPin, DollarSign, Briefcase, ChevronLeft, ChevronRight, X } from "lucide-react";
+import { useState } from "react";
 
 const navItems = [
-  { name: "Search Jobs", id: "/search" },
-  { name: "Post a Job", id: "post-job" },
-  { name: "Admin", id: "admin-login" },
-  { name: "Browse", id: "browse" },
-  { name: "Contact", id: "contact" },
+  { name: "Dashboard", id: "/" },
+  { name: "Browse Jobs", id: "/search" },
+  { name: "My Applications", id: "/applications" },
+  { name: "Settings", id: "#settings" },
 ];
 
 const footerColumns = [
   {
     title: "Product",    items: [
-      { label: "Search Jobs", href: "/search" },
-      { label: "Post a Job", href: "/post-job" },
-      { label: "Browse by Province", href: "#provinces" },
+      { label: "Browse Jobs", href: "/search" },
+      { label: "Companies", href: "#" },
       { label: "For Employers", href: "#" },
     ],
   },
   {
     title: "Company",    items: [
-      { label: "About Jobee", href: "#about" },
-      { label: "Careers", href: "#" },
-      { label: "Contact Us", href: "#contact" },
+      { label: "About", href: "#" },
       { label: "Blog", href: "#" },
-    ],
-  },
-  {
-    title: "Resources",    items: [
-      { label: "Privacy Policy", href: "#" },
-      { label: "Terms of Service", href: "#" },
-      { label: "FAQ", href: "#" },
-      { label: "Support", href: "#" },
+      { label: "Contact", href: "#" },
     ],
   },
 ];
 
-interface Job {
-  id: string;
-  title: string;
-  company: string;
-  location: string;
-  province: string;
-  salary: string;
-  type: string;
-  category: string;
-  description: string;
-  posted: string;
-}
-
-const mockJobs: Job[] = [
-  {
-    id: "1",    title: "Senior Software Engineer",    company: "TechFlow Solutions",    location: "Amsterdam",    province: "North Holland",    salary: "€80,000 - €120,000",    type: "Full-time",    category: "Technology",    description: "We are looking for an experienced software engineer to join our growing team.",    posted: "2 days ago"},
-  {
-    id: "2",    title: "UX/UI Designer",    company: "Creative Studio",    location: "Rotterdam",    province: "South Holland",    salary: "€50,000 - €75,000",    type: "Full-time",    category: "Design",    description: "Join our design team to create beautiful and intuitive user experiences.",    posted: "1 day ago"},
-  {
-    id: "3",    title: "Marketing Manager",    company: "Global Marketing Inc",    location: "Utrecht",    province: "Utrecht",    salary: "€60,000 - €85,000",    type: "Full-time",    category: "Marketing",    description: "Lead our marketing initiatives and strategy for European markets.",    posted: "3 days ago"},
-  {
-    id: "4",    title: "Data Analyst",    company: "DataViz Corp",    location: "Amsterdam",    province: "North Holland",    salary: "€55,000 - €80,000",    type: "Full-time",    category: "Technology",    description: "Analyze complex datasets and create actionable insights for stakeholders.",    posted: "1 week ago"},
-  {
-    id: "5",    title: "Sales Representative",    company: "SalesForce Pro",    location: "Groningen",    province: "Groningen",    salary: "€45,000 - €65,000",    type: "Full-time",    category: "Sales",    description: "Build relationships with clients and close deals in the B2B tech sector.",    posted: "4 days ago"},
-  {
-    id: "6",    title: "Product Manager",    company: "Innovation Labs",    location: "Amsterdam",    province: "North Holland",    salary: "€75,000 - €110,000",    type: "Full-time",    category: "Technology",    description: "Define product strategy and lead cross-functional teams.",    posted: "5 days ago"},
-  {
-    id: "7",    title: "HR Specialist",    company: "People First",    location: "The Hague",    province: "South Holland",    salary: "€40,000 - €60,000",    type: "Part-time",    category: "Human Resources",    description: "Support recruitment, onboarding, and employee development.",    posted: "6 days ago"},
-  {
-    id: "8",    title: "Backend Developer",    company: "Cloud Systems",    location: "Amsterdam",    province: "North Holland",    salary: "€70,000 - €100,000",    type: "Full-time",    category: "Technology",    description: "Develop scalable backend systems and APIs using modern technologies.",    posted: "2 weeks ago"},
-  {
-    id: "9",    title: "Content Writer",    company: "Content Creators",    location: "Utrecht",    province: "Utrecht",    salary: "€35,000 - €50,000",    type: "Full-time",    category: "Marketing",    description: "Create engaging content for blogs, social media, and marketing campaigns.",    posted: "3 days ago"},
-  {
-    id: "10",    title: "DevOps Engineer",    company: "Infrastructure Pro",    location: "Amsterdam",    province: "North Holland",    salary: "€65,000 - €95,000",    type: "Full-time",    category: "Technology",    description: "Maintain and optimize cloud infrastructure and CI/CD pipelines.",    posted: "1 week ago"},
-  {
-    id: "11",    title: "Financial Analyst",    company: "Finance Solutions",    location: "Amsterdam",    province: "North Holland",    salary: "€55,000 - €80,000",    type: "Full-time",    category: "Finance",    description: "Analyze financial data and provide insights for investment decisions.",    posted: "4 days ago"},
-  {
-    id: "12",    title: "Customer Support Manager",    company: "Support Hub",    location: "Leiden",    province: "South Holland",    salary: "€45,000 - €65,000",    type: "Full-time",    category: "Customer Service",    description: "Lead and manage customer support team to ensure excellent service quality.",    posted: "5 days ago"},
-];
-
-const provinces = [
-  "North Holland",  "South Holland",  "Utrecht",  "Groningen",  "The Hague",  "Friesland",  "Drenthe",  "Flevoland",  "Overijssel",  "Gelderland",  "Limburg",  "North Brabant"];
-
-const categories = ["Technology", "Design", "Marketing", "Sales", "Human Resources", "Finance", "Customer Service"];
-const jobTypes = ["Full-time", "Part-time", "Contract", "Freelance"];
-
 export default function SearchPage() {
   const [searchQuery, setSearchQuery] = useState("");
-  const [selectedProvinces, setSelectedProvinces] = useState<string[]>([]);
-  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
-  const [selectedTypes, setSelectedTypes] = useState<string[]>([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 6;
 
-  const filteredJobs = useMemo(() => {
-    return mockJobs.filter((job) => {
-      const matchesQuery =
-        searchQuery === "" ||
-        job.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        job.company.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        job.description.toLowerCase().includes(searchQuery.toLowerCase());
-
-      const matchesProvince =
-        selectedProvinces.length === 0 || selectedProvinces.includes(job.province);
-
-      const matchesCategory =
-        selectedCategories.length === 0 || selectedCategories.includes(job.category);
-
-      const matchesType = selectedTypes.length === 0 || selectedTypes.includes(job.type);
-
-      return matchesQuery && matchesProvince && matchesCategory && matchesType;
-    });
-  }, [searchQuery, selectedProvinces, selectedCategories, selectedTypes]);
-
-  const totalPages = Math.ceil(filteredJobs.length / itemsPerPage);
-  const paginatedJobs = filteredJobs.slice(
-    (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage
-  );
-
-  const toggleFilter = (value: string, setter: Function, state: string[]) => {
-    if (state.includes(value)) {
-      setter(state.filter((item) => item !== value));
-    } else {
-      setter([...state, value]);
-    }
+  const handleSearch = (callback: () => void) => {
+    callback();
   };
 
   return (
@@ -134,255 +41,62 @@ export default function SearchPage() {
       defaultButtonVariant="text-stagger"
       defaultTextAnimation="reveal-blur"
       borderRadius="pill"
-      contentWidth="smallMedium"
-      sizing="mediumLargeSizeLargeTitles"
+      contentWidth="medium"
+      sizing="medium"
       background="circleGradient"
-      cardStyle="gradient-radial"
-      primaryButtonStyle="double-inset"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           brandName="Jobee"
           navItems={navItems}
           button={{
-            text: "Post a Job",            href: "/post-job"}}
+            text: "Sign In",            onClick: () => console.log("sign-in"),
+          }}
         />
       </div>
 
-      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900 pt-20 pb-16">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          {/* Search Header */}
-          <div className="mb-12">
-            <h1 className="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white mb-4">
-              Find Your Dream Job
-            </h1>
-            <p className="text-lg text-slate-600 dark:text-slate-300 mb-8">
-              Browse thousands of opportunities across all Dutch provinces
-            </p>
-
-            {/* Search Bar */}
-            <div className="relative">
-              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
+      <div id="search" data-section="search" className="py-20">
+        <div className="container mx-auto px-4">
+          <h1 className="text-4xl font-bold mb-4 text-center">Find Your Dream Job</h1>
+          <p className="text-lg text-gray-600 text-center mb-8">Search across all job listings in the Netherlands</p>
+          
+          <div className="max-w-2xl mx-auto mb-12">
+            <div className="flex gap-4">
               <input
                 type="text"
-                placeholder="Search by job title, company, or keyword..."
+                placeholder="Search jobs..."
                 value={searchQuery}
-                onChange={(e) => {
-                  setSearchQuery(e.target.value);
-                  setCurrentPage(1);
-                }}
-                className="w-full pl-12 pr-4 py-3 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
               />
+              <button
+                onClick={() => handleSearch(() => console.log("Searching for:", searchQuery))}
+                className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+              >
+                Search
+              </button>
             </div>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
-            {/* Filters Sidebar */}
-            <div className="lg:col-span-1">
-              <div className="sticky top-24 space-y-6 bg-white dark:bg-slate-800 p-6 rounded-lg border border-slate-200 dark:border-slate-700">
-                <div>
-                  <h3 className="font-semibold text-slate-900 dark:text-white mb-3 text-sm uppercase tracking-wide">
-                    Provinces
-                  </h3>
-                  <div className="space-y-2 max-h-64 overflow-y-auto">
-                    {provinces.map((province) => (
-                      <label key={province} className="flex items-center gap-2 cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={selectedProvinces.includes(province)}
-                          onChange={() =>
-                            toggleFilter(province, setSelectedProvinces, selectedProvinces)
-                          }
-                          className="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-2 focus:ring-blue-500"
-                        />
-                        <span className="text-sm text-slate-700 dark:text-slate-300">
-                          {province}
-                        </span>
-                      </label>
-                    ))}
-                  </div>
-                </div>
-
-                <div className="border-t border-slate-200 dark:border-slate-700 pt-4">
-                  <h3 className="font-semibold text-slate-900 dark:text-white mb-3 text-sm uppercase tracking-wide">
-                    Category
-                  </h3>
-                  <div className="space-y-2">
-                    {categories.map((category) => (
-                      <label key={category} className="flex items-center gap-2 cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={selectedCategories.includes(category)}
-                          onChange={() =>
-                            toggleFilter(category, setSelectedCategories, selectedCategories)
-                          }
-                          className="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-2 focus:ring-blue-500"
-                        />
-                        <span className="text-sm text-slate-700 dark:text-slate-300">
-                          {category}
-                        </span>
-                      </label>
-                    ))}
-                  </div>
-                </div>
-
-                <div className="border-t border-slate-200 dark:border-slate-700 pt-4">
-                  <h3 className="font-semibold text-slate-900 dark:text-white mb-3 text-sm uppercase tracking-wide">
-                    Job Type
-                  </h3>
-                  <div className="space-y-2">
-                    {jobTypes.map((type) => (
-                      <label key={type} className="flex items-center gap-2 cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={selectedTypes.includes(type)}
-                          onChange={() => toggleFilter(type, setSelectedTypes, selectedTypes)}
-                          className="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-2 focus:ring-blue-500"
-                        />
-                        <span className="text-sm text-slate-700 dark:text-slate-300">
-                          {type}
-                        </span>
-                      </label>
-                    ))}
-                  </div>
-                </div>
-
-                {/* Clear Filters */}
-                {(selectedProvinces.length > 0 ||
-                  selectedCategories.length > 0 ||
-                  selectedTypes.length > 0) && (
-                  <button
-                    onClick={() => {
-                      setSelectedProvinces([]);
-                      setSelectedCategories([]);
-                      setSelectedTypes([]);
-                      setCurrentPage(1);
-                    }}
-                    className="w-full py-2 px-3 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-lg text-sm font-medium hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors"
-                  >
-                    Clear Filters
-                  </button>
-                )}
-              </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="p-6 bg-white rounded-lg shadow-md border border-gray-200">
+              <h3 className="text-xl font-semibold mb-2">Senior Software Engineer</h3>
+              <p className="text-gray-600 mb-4">Amsterdam, Netherlands · Full-time</p>
+              <p className="text-sm text-gray-500">Posted 2 days ago</p>
             </div>
-
-            {/* Job Listings */}
-            <div className="lg:col-span-3">
-              {/* Results Count */}
-              <div className="mb-6 flex items-center justify-between">
-                <p className="text-sm text-slate-600 dark:text-slate-400">
-                  Showing {paginatedJobs.length > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0} to{" "}
-                  {Math.min(currentPage * itemsPerPage, filteredJobs.length)} of{" "}
-                  <span className="font-semibold text-slate-900 dark:text-white">
-                    {filteredJobs.length}
-                  </span>{" "}
-                  jobs
-                </p>
-              </div>
-
-              {/* Job Cards Grid */}
-              {paginatedJobs.length > 0 ? (
-                <div className="grid gap-4 mb-8">
-                  {paginatedJobs.map((job) => (
-                    <div
-                      key={job.id}
-                      className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6 hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-300 cursor-pointer group"
-                    >
-                      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
-                        <div className="flex-1">
-                          <div className="flex items-start gap-3 mb-3">
-                            <div className="flex-1">
-                              <h3 className="text-lg font-semibold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
-                                {job.title}
-                              </h3>
-                              <p className="text-sm text-slate-600 dark:text-slate-400 mt-1">
-                                {job.company}
-                              </p>
-                            </div>
-                            <span className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs font-medium rounded-full whitespace-nowrap">
-                              {job.type}
-                            </span>
-                          </div>
-
-                          <p className="text-sm text-slate-600 dark:text-slate-400 mb-4 line-clamp-2">
-                            {job.description}
-                          </p>
-
-                          <div className="flex flex-wrap gap-3 text-sm">
-                            <div className="flex items-center gap-1 text-slate-600 dark:text-slate-400">
-                              <MapPin className="w-4 h-4" />
-                              <span>{job.location}</span>
-                            </div>
-                            <div className="flex items-center gap-1 text-slate-600 dark:text-slate-400">
-                              <DollarSign className="w-4 h-4" />
-                              <span>{job.salary}</span>
-                            </div>
-                            <div className="flex items-center gap-1 text-slate-600 dark:text-slate-400">
-                              <Briefcase className="w-4 h-4" />
-                              <span>{job.category}</span>
-                            </div>
-                          </div>
-                        </div>
-
-                        <div className="text-right text-xs text-slate-500 dark:text-slate-500 whitespace-nowrap">
-                          <p>{job.posted}</p>
-                          <button className="mt-2 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
-                            Apply
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <div className="text-center py-12">
-                  <p className="text-slate-600 dark:text-slate-400 mb-2">
-                    No jobs found matching your criteria.
-                  </p>
-                  <p className="text-sm text-slate-500 dark:text-slate-500">
-                    Try adjusting your filters or search query.
-                  </p>
-                </div>
-              )}
-
-              {/* Pagination */}
-              {totalPages > 1 && (
-                <div className="flex items-center justify-center gap-2">
-                  <button
-                    onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-                    disabled={currentPage === 1}
-                    className="p-2 rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                  >
-                    <ChevronLeft className="w-5 h-5" />
-                  </button>
-
-                  <div className="flex items-center gap-1">
-                    {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-colors ${
-                          currentPage === page
-                            ? "bg-blue-600 text-white"
-                            : "border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700"
-                        }`}
-                      >
-                        {page}
-                      </button>
-                    ))}
-                  </div>
-
-                  <button
-                    onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
-                    disabled={currentPage === totalPages}
-                    className="p-2 rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                  >
-                    <ChevronRight className="w-5 h-5" />
-                  </button>
-                </div>
-              )}
+            <div className="p-6 bg-white rounded-lg shadow-md border border-gray-200">
+              <h3 className="text-xl font-semibold mb-2">Product Manager</h3>
+              <p className="text-gray-600 mb-4">Rotterdam, Netherlands · Full-time</p>
+              <p className="text-sm text-gray-500">Posted 5 days ago</p>
+            </div>
+            <div className="p-6 bg-white rounded-lg shadow-md border border-gray-200">
+              <h3 className="text-xl font-semibold mb-2">UX Designer</h3>
+              <p className="text-gray-600 mb-4">Utrecht, Netherlands · Full-time</p>
+              <p className="text-sm text-gray-500">Posted 1 week ago</p>
             </div>
           </div>
         </div>
@@ -391,7 +105,7 @@ export default function SearchPage() {
       <div id="footer" data-section="footer">
         <FooterBase
           logoText="Jobee"
-          copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
+          copyrightText="© 2025 Jobee"
           columns={footerColumns}
         />
       </div>