diff --git a/app/(landing)/projects/layout.tsx b/app/(landing)/projects/layout.tsx
new file mode 100644
index 000000000..3a31c0cee
--- /dev/null
+++ b/app/(landing)/projects/layout.tsx
@@ -0,0 +1,12 @@
+import { Metadata } from 'next';
+import { generatePageMetadata } from '@/lib/metadata';
+
+export const metadata: Metadata = generatePageMetadata('projects');
+
+export default function ProjectsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}
diff --git a/app/(landing)/projects/page.tsx b/app/(landing)/projects/page.tsx
index cd2692254..fbdeb8d10 100644
--- a/app/(landing)/projects/page.tsx
+++ b/app/(landing)/projects/page.tsx
@@ -1,18 +1,38 @@
+'use client';
+
 import React from 'react';
-import { Metadata } from 'next';
-import { generatePageMetadata } from '@/lib/metadata';
 import ProjectPageHero from '@/components/Project-Page-Hero';
+import ExploreHeader from '@/components/projects/ExploreHeader';
+
+function ProjectsPage() {
+  const handleSearch = (searchTerm: string) => {
+    console.log('Search:', searchTerm);
+  };
+
+  const handleSort = (sortType: string) => {
+    console.log('Sort:', sortType);
+  };
+
+  const handleStatus = (status: string) => {
+    console.log('Status:', status);
+  };
 
-export const metadata: Metadata = generatePageMetadata('projects');
+  const handleCategory = (category: string) => {
+    console.log('Category:', category);
+  };
 
-const ProjectsPage = () => {
   return (
-    <div className=''>
+    <div>
       <ProjectPageHero />
-      <h1 className='mb-10'>Projects</h1>
-      <div className='flex flex-wrap justify-center gap-8'></div>
+      <ExploreHeader
+        onSearch={handleSearch}
+        onSortChange={handleSort}
+        onStatusChange={handleStatus}
+        onCategoryChange={handleCategory}
+      />
+      <div className='flex flex-wrap justify-center gap-8 p-8'></div>
     </div>
   );
-};
+}
 
 export default ProjectsPage;
diff --git a/components/projects/ExploreHeader.tsx b/components/projects/ExploreHeader.tsx
new file mode 100644
index 000000000..d948816d0
--- /dev/null
+++ b/components/projects/ExploreHeader.tsx
@@ -0,0 +1,194 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Search, ChevronDown } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+import Image from 'next/image';
+
+interface ExploreHeaderProps {
+  onSearch?: (searchTerm: string) => void;
+  onSortChange?: (sortType: string) => void;
+  onStatusChange?: (status: string) => void;
+  onCategoryChange?: (category: string) => void;
+  className?: string;
+}
+
+const ExploreHeader = ({
+  onSearch,
+  onSortChange,
+  onStatusChange,
+  onCategoryChange,
+  className,
+}: ExploreHeaderProps) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedSort, setSelectedSort] = useState('Sort');
+  const [selectedStatus, setSelectedStatus] = useState('Status');
+  const [selectedCategory, setSelectedCategory] = useState('Category');
+
+  const handleSearch = (value: string) => {
+    setSearchTerm(value);
+    if (onSearch) onSearch(value);
+  };
+
+  const handleSort = (sortType: string) => {
+    setSelectedSort(sortType);
+    if (onSortChange) onSortChange(sortType);
+  };
+
+  const handleStatus = (status: string) => {
+    setSelectedStatus(status);
+    if (onStatusChange) onStatusChange(status);
+  };
+
+  const handleCategory = (category: string) => {
+    setSelectedCategory(category);
+    if (onCategoryChange) onCategoryChange(category);
+  };
+
+  const sortOptions = [
+    'Newest First',
+    'Oldest First',
+    'Most Funded',
+    'Least Funded',
+    'Ending Soon',
+    'Recently Started',
+  ];
+  const statusOptions = [
+    'All Status',
+    'Active',
+    'Completed',
+    'Draft',
+    'Under Review',
+    'Validated',
+    'Approved',
+  ];
+  const categoryOptions = [
+    'All Categories',
+    'Technology',
+    'Art & Creative',
+    'Environment',
+    'Education',
+    'Healthcare',
+    'Community',
+    'DeFi',
+    'NFT',
+    'Web3',
+  ];
+
+  return (
+    <div className={cn('w-full bg-black px-4 py-12 text-white', className)}>
+      <div className='mx-auto max-w-7xl'>
+        <div className='mb-12'>
+          <h1 className='font-inter text-center text-4xl font-bold text-white md:text-left md:text-5xl lg:text-6xl'>
+            Explore Boundless Projects
+          </h1>
+        </div>
+
+        <div className='flex flex-col items-start gap-6 lg:flex-row lg:items-center lg:gap-8'>
+          <div className='flex flex-wrap items-center gap-3 lg:gap-4'>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant='outline'
+                  className='min-w-[100px] justify-between rounded-lg border-gray-600 bg-transparent px-4 py-2 text-sm font-medium text-white hover:bg-gray-800 hover:text-white'
+                >
+                  <div className='flex items-center gap-2'>
+                    <Image
+                      src='/sort.svg'
+                      alt='Sort'
+                      width={16}
+                      height={16}
+                      className='h-4 w-4'
+                    />
+                    {selectedSort}
+                  </div>
+                  <ChevronDown className='ml-2 h-4 w-4' />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className='border-gray-700 bg-gray-900 text-white'>
+                {sortOptions.map(option => (
+                  <DropdownMenuItem
+                    key={option}
+                    onClick={() => handleSort(option)}
+                    className='cursor-pointer hover:bg-gray-800'
+                  >
+                    {option}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant='outline'
+                  className='min-w-[100px] justify-between rounded-lg border-gray-600 bg-transparent px-4 py-2 text-sm font-medium text-white hover:bg-gray-800 hover:text-white'
+                >
+                  {selectedStatus}
+                  <ChevronDown className='ml-2 h-4 w-4' />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className='border-gray-700 bg-gray-900 text-white'>
+                {statusOptions.map(option => (
+                  <DropdownMenuItem
+                    key={option}
+                    onClick={() => handleStatus(option)}
+                    className='cursor-pointer hover:bg-gray-800'
+                  >
+                    {option}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant='outline'
+                  className='min-w-[100px] justify-between rounded-lg border-gray-600 bg-transparent px-4 py-2 text-sm font-medium text-white hover:bg-gray-800 hover:text-white'
+                >
+                  {selectedCategory}
+                  <ChevronDown className='ml-2 h-4 w-4' />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className='border-gray-700 bg-gray-900 text-white'>
+                {categoryOptions.map(option => (
+                  <DropdownMenuItem
+                    key={option}
+                    onClick={() => handleCategory(option)}
+                    className='cursor-pointer hover:bg-gray-800'
+                  >
+                    {option}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          <div className='relative ml-auto w-full lg:max-w-md'>
+            <div className='relative'>
+              <Search className='absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform text-gray-400' />
+              <Input
+                type='text'
+                placeholder='Search project or creator...'
+                value={searchTerm}
+                onChange={e => handleSearch(e.target.value)}
+                className='w-full rounded-lg border-gray-600 bg-transparent py-3 pr-4 pl-10 text-base text-white placeholder-gray-400 focus:border-gray-400 focus:ring-1 focus:ring-gray-400'
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ExploreHeader;
diff --git a/public/sort.svg b/public/sort.svg
new file mode 100644
index 000000000..1b813fb38
--- /dev/null
+++ b/public/sort.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.16667 8.33333L15 8.33337M9.16667 11.6667H13.3333M9.16667 15H11.6667M9.16667 5H17.5M4.16667 17.5L4.16667 12.5M4.16667 17.5C3.69985 17.5 2.82769 16.0458 2.5 15.6771M4.16667 17.5C4.63348 17.5 5.50565 16.0458 5.83333 15.6771M4.16667 2.5V7.5M4.16667 2.5C4.63349 2.5 5.50565 3.95418 5.83333 4.32292M4.16667 2.5C3.69985 2.5 2.82769 3.95418 2.5 4.32292" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>