diff --git a/package-lock.json b/package-lock.json
index c06f777..2fa22e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,10 @@
       "name": "p4-skill-exchange",
       "version": "0.0.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
+        "@fortawesome/free-regular-svg-icons": "^6.6.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "axios": "^1.7.2",
         "classnames": "^2.5.1",
         "firebase": "^10.12.4",
@@ -1371,6 +1375,59 @@
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.1.tgz",
       "integrity": "sha512-jmEnr/pk0yVkA7mIlHNnxCi+wWzOFUg0WyIotgkKAb2u1J7fAeDBcVNSTjTihbAYNusCLQdW5s9IJ5qwnEufcQ=="
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@grpc/grpc-js": {
       "version": "1.9.15",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz",
@@ -5090,7 +5147,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5652,7 +5708,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -5754,8 +5809,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-refresh": {
       "version": "0.14.2",
diff --git a/package.json b/package.json
index 93cdb2d..e3bec86 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "axios": "^1.7.2",
     "classnames": "^2.5.1",
     "firebase": "^10.12.4",
diff --git a/src/components/CategoryDropdown/CategoryDropdown.tsx b/src/components/CategoryDropdown/CategoryDropdown.tsx
index 7367bff..8928c80 100644
--- a/src/components/CategoryDropdown/CategoryDropdown.tsx
+++ b/src/components/CategoryDropdown/CategoryDropdown.tsx
@@ -1,91 +1,113 @@
-import { useState } from "react";
-import { Link } from "react-router-dom";
-import "@/src/styles/index.scss";
-import DropdownIcon from "../../styles/assets/icons/icons8-dropdown-50.png";
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import '@/src/styles/index.scss'
+import DropdownIcon from '../../styles/assets/icons/icons8-dropdown-50.png'
 
 interface CategoryDropdownProps {
-  onSelectCategory: (category: string) => void;
+  onSelectCategory: (category: string) => void
 }
 
 const CategoryDropdown: React.FC<CategoryDropdownProps> = ({
-  onSelectCategory,
+  onSelectCategory
 }) => {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
 
   const toggleMenu = () => {
-    setIsMenuOpen(!isMenuOpen);
-  };
+    setIsMenuOpen(!isMenuOpen)
+  }
 
   const closeMenu = () => {
-    setIsMenuOpen(false);
-  };
+    setIsMenuOpen(false)
+  }
 
   const handleCategoryClick = (category: string) => {
-    setSelectedCategory(category);
-    onSelectCategory(category);
-    closeMenu();
-  };
+    setSelectedCategory(category)
+    onSelectCategory(category)
+    closeMenu()
+  }
+
+  const handleShowAll = () => {
+    setSelectedCategory(null)
+    onSelectCategory(null)
+    setIsMenuOpen(false)
+  }
 
   return (
     <div className="relative">
-      <button onClick={toggleMenu} className="flex items-center space-x-2">
-        <h2 className="text-xl font-bold mb-2">Categories</h2>
-        <img 
-          src={DropdownIcon} 
-          alt="Dropdown Icon" 
-          className="w-4 h-4 mt-1"
-        />
-      </button>
-      {isMenuOpen && (
-        <div className="absolute mt-2 w-56 bg-white shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5">
-          <Link
-            to="#"
-            className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-            onClick={() => handleCategoryClick("Development")}
-          >
-            Development
-          </Link>
-          <Link
-            to="#"
-            className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-            onClick={() => handleCategoryClick("Design")}
-          >
-            Design
-          </Link>
-          <Link
-            to="#"
-            className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-            onClick={() => handleCategoryClick("Research")}
-          >
-            Research
-          </Link>
-          <Link
-            to="#"
-            className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-            onClick={() => handleCategoryClick("Mobile Development")}
-          >
-            Mobile Development
-          </Link>
-          <Link
-            to="#"
-            className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-            onClick={() => handleCategoryClick("Tutoring")}
-          >
-            Tutoring
-          </Link>
-        </div>
-      )}
-      {/* Display the selected category as a bubble tag */}
-      {selectedCategory && (
-        <div className="mt-2">
-          <span className="bg-gray-500 text-white px-3 py-1 rounded-full text-sm">
-            {selectedCategory}
-          </span>
-        </div>
-      )}
+      <h2 className="text-xl font-bold mb-2">Search by categories</h2>
+      <div className=" inline-block rounded overflow-auto">
+        <button
+          onClick={toggleMenu}
+          className="w-96 bg-white border border-black rounded border-b-4 border-black border-2 border-r-4 shadow px-4 py-2 text-left focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        >
+          <div className="flex justify-between">
+            {selectedCategory || 'Select '}
+            <img
+              src={DropdownIcon}
+              alt="Dropdown Icon"
+              className="w-4 h-4 mt-1"
+            />
+          </div>
+        </button>
+        {isMenuOpen && (
+          <div className="ml-2 mt-2 w-56 bg-white shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto z-100">
+            <Link
+              to="#"
+              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+              onClick={handleShowAll}
+            >
+              Show All
+            </Link>
+            <Link
+              to="#"
+              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+              onClick={() => handleCategoryClick('Development')}
+            >
+              Development
+            </Link>
+            <Link
+              to="#"
+              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+              onClick={() => handleCategoryClick('Design')}
+            >
+              Design
+            </Link>
+            <Link
+              to="#"
+              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+              onClick={() => handleCategoryClick('Research')}
+            >
+              Research
+            </Link>
+            <Link
+              to="#"
+              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+              onClick={() => handleCategoryClick('Mobile Development')}
+            >
+              Mobile Development
+            </Link>
+            <Link
+              to="#"
+              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+              onClick={() => handleCategoryClick('Tutoring')}
+            >
+              Tutoring
+            </Link>
+          </div>
+        )}
+        {/* Display the selected category as a bubble tag */}
+        {selectedCategory && (
+          <div className="mt-2 flex">
+            <span className="bg-yellow-300 text-black px-3 py-1 rounded-full text-sm">
+              {selectedCategory}
+            </span>
+          </div>
+        )}
+      </div>
+    
     </div>
-  );
-};
+  )
+}
 
-export default CategoryDropdown;
+export default CategoryDropdown
diff --git a/src/components/JobCard/JobCard.scss b/src/components/JobCard/JobCard.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/JobCard/JobCard.tsx b/src/components/JobCard/JobCard.tsx
index 4dfe68f..a6f5b44 100644
--- a/src/components/JobCard/JobCard.tsx
+++ b/src/components/JobCard/JobCard.tsx
@@ -1,11 +1,18 @@
 import { Link } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHeart as faHeartSolid } from '@fortawesome/free-solid-svg-icons'
+import { faHeart as faHeartRegular } from '@fortawesome/free-regular-svg-icons'
+import { getAllTasks } from '@/src/utils/Firebase'
+
+import { useState } from 'react'
 
 type Job = {
-  id: number,
+  id: number
   title: string
   description: string
   imageUrl: string
-  job_tags: string[]
+  jobSkills: string[]
+  categories: string[]
 }
 
 type JobCardProps = {
@@ -13,50 +20,76 @@ type JobCardProps = {
 }
 
 const JobCard = ({ job }: JobCardProps) => {
+  console.log(JSON.stringify(job))
+  const { jobSkills, categories, description, title } = job
+
+  const [likeProject, setLikeProject] = useState(false)
+
+  const handleUnLike = () => {
+    setLikeProject(false)
+  }
+
+  const handleLike = () => {
+    setLikeProject(true)
+  }
 
   return (
-    <Link to={`/marketplace/${job.id}`}>
-      <div className="max-w-sm rounded overflow-hidden shadow-lg bg-white">
+    //  <Link to={`/marketplace/${job.id}`}>
+    <div className="flex-grow p-4 pb-8  rounded overflow-hidden border-b-8 border-black border-4 border-r-8 shadow-lg bg-white">
+      <div className="flex items-center justify-between px-2 pb-4">
+        <h3 className="text-base font-bold ">{title}</h3>
+        {likeProject ? (
+          <div className="bg-yellow-300 rounded-full p-2 flex justify-center items-center">
+            <FontAwesomeIcon
+              className="h-6 w-6 bg-yellow-300"
+              icon={faHeartSolid}
+              onClick={handleUnLike}
+            />
+          </div>
+        ) : (
+          <div className="bg-yellow-300 rounded-full p-2 flex justify-center items-center">
+            <FontAwesomeIcon
+              className="h-6 w-6 "
+              icon={faHeartRegular}
+              onClick={handleLike}
+            />
+          </div>
+        )}
+      </div>
+      <Link to={`/marketplace/${job.id}`}>
         <img
           className="w-full"
-          src="https://via.placeholder.com/400x200"
+          src="https://via.placeholder.com/250x150"
           alt="Sunset in the mountains"
         />
-        <div className="px-6 py-4">
-          <div className="font-bold text-xl mb-2">The Coldest Sunset</div>
-          <p className="text-gray-700 text-base">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
-            quia, nulla! Maiores et perferendis eaque, exercitationem praesentium
-            nihil.
-          </p>
-        </div>
-        <button
-          className="border border-neutral-300 rounded-lg py-1.5 px-10 my-2 bg-blue-800 hover:bg-blue-600 text-white ml-6"
-        >
-          Apply
-        </button>
-        <div className="px-6 pt-4 pb-2">
-          {job.job_tags?.map((job_tag: string) => (
-            <span
-              key={job_tag}
-              className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
-            >
-              {job_tag}
-            </span>
-          ))}
-
-          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
-            #photography
-          </span>
-          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
-            #travel
-          </span>
-          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
-            #winter
-          </span>
+        <div className="py-4">
+          <p className="text-gray-700 text-base">{description}</p>
         </div>
+      </Link>
+      {/* <button className="border border-neutral-300 rounded-lg py-1.5 px-10 my-2 bg-blue-800 hover:bg-blue-600 text-white ml-6">
+        Apply
+      </button> */}
+      <div className=" flex justify-start items-center mb-4 ">
+        {categories.map((category: string) => (
+          <span className="inline-block bg-yellow-300 rounded-full px-4 py-2">
+         {category}
+        </span>))}
+      </div>
+      <hr className=" h-0.5 border-t-0 bg-gray-200 " />
+      <div className=" py-3">
+        <p className="text-gray-700 text-base font-medium">SKILLS & TOOLS</p>
       </div>
-    </Link>
+
+      {jobSkills?.map((job_tag: string) => (
+        <span
+          key={job_tag}
+          className="inline-block bg-blue-500 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
+        >
+          {job_tag}
+        </span>
+      ))}
+    </div>
+    // </Link>
   )
 }
 
diff --git a/src/pages/MarketPlacePage/MarketPlace.tsx b/src/pages/MarketPlacePage/MarketPlace.tsx
index 6ab4b08..bb70bd5 100644
--- a/src/pages/MarketPlacePage/MarketPlace.tsx
+++ b/src/pages/MarketPlacePage/MarketPlace.tsx
@@ -12,32 +12,11 @@ interface Job {
 }
 
 const MarketPlace = () => {
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
 
-  const onSelectCategory = (category: string) => {
-    setSelectedCategory(category)
-  }
-
-  // Filter jobs based on selectedCategory
-  const filteredJobs = selectedCategory
-    ? projectData.jobs.filter((job: Job) => job.category === selectedCategory)
-    : projectData.jobs
 
   return (
     <div className="mx-auto p-4 w-full">
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <div className="bg-gray-100 p-6 col-span-1 ">
-          <CategoryDropdown onSelectCategory={onSelectCategory} />
-        </div>
-        <div className="bg-white p-6 col-span-3">
-          <h2 className="text-xl font-bold mb-2">Market Place</h2>
-          <div className="w-full flex sm:items-center flex-wrap gap-5">
-            {filteredJobs.map((job: Job) => (
-              <JobCard key={job.id} job={job} flag={false} />
-            ))}
-          </div>
-        </div>
-      </div>
+       Go to "SkillShare Page" to start
     </div>
   )
 }
diff --git a/src/pages/SkillSharePage/index.scss b/src/pages/SkillSharePage/index.scss
index 0aa0c95..f145a77 100644
--- a/src/pages/SkillSharePage/index.scss
+++ b/src/pages/SkillSharePage/index.scss
@@ -14,10 +14,12 @@
 
     &__buttons {
       display: flex;
-      border-radius: 12px;
+      border-radius: 7px;
       background: #FFFFFF;
       color: #6B6B6B;
-      border: 2px solid #000;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom: 3px solid #000;
       overflow: hidden;
 
       button {
@@ -58,5 +60,20 @@
         letter-spacing: -0.22px;
       }
     }
+
+    &-cards {
+      display: grid;
+      grid-template-columns: auto auto auto;
+      
+ // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px; 
+    }
+
+    &-cardcontainer {
+      display: flex;
+      gap: 30px;
+      flex-wrap: wrap;
+    
+    }
   }
 }
\ No newline at end of file
diff --git a/src/pages/SkillSharePage/index.tsx b/src/pages/SkillSharePage/index.tsx
index 59e67d5..0f2a3b9 100644
--- a/src/pages/SkillSharePage/index.tsx
+++ b/src/pages/SkillSharePage/index.tsx
@@ -1,46 +1,94 @@
-import { useState } from "react";
-import "./index.scss";
-
-import SearchCard from "@/src/components/Search/Search";
-import CreateProjectCard from "./components/CreateProjectCard/CreateProjectCard";
+import { useEffect, useState } from 'react'
+import './index.scss'
+import CategoryDropdown from '@/src/components/CategoryDropdown/CategoryDropdown'
+import SearchCard from '@/src/components/Search/Search'
+import CreateProjectCard from './components/CreateProjectCard/CreateProjectCard'
+//import projectData from '../../data/dummy_data_extended.json'
+import JobCard from '@/src/components/JobCard/JobCard'
+import { getAllTasks } from '@/src/utils/Firebase'
 
 function SkillShare() {
-  const [tabStatus, setTabStatus] = useState("seeker")
+  const [tabStatus, setTabStatus] = useState('provider')
+  const [projectData, setProjectData] = useState<{ id: string }[]>([])
+
+
+  async function fetchAllTasks() {
+    try {
+      console.log('getAllTasks...')
+      const tasks = await getAllTasks()
+      setProjectData(tasks);
+      return tasks;
+    } catch (error) {
+      console.error('Error fetching tasks:', error)
+    }
+  }
+
+  
+
+  useEffect(() => {
+   fetchAllTasks();
+    
+    // setProjectData(tasks);
+  }, [])
+
+  console.log(JSON.stringify(projectData)+ "!!!.>>");
+
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
+
+  const onSelectCategory = (category: string) => {
+    category !== 'Show All'
+      ? setSelectedCategory(category)
+      : setSelectedCategory(null)
+  }
+
+  // Filter jobs based on selectedCategory
+  const filteredJobs = selectedCategory
+    ? projectData.filter(
+        (job: Job) =>
+          job.categories.include(selectedCategory)
+      )
+    : projectData
 
   return (
     <div className="c_skillshare">
       <div className="c_skillshare-header">
         <div className="c_skillshare-header__buttons">
-          <button 
-            className={tabStatus == "provider" ? 'provider-active' : ''}
-            onClick={() => setTabStatus("provider")}
+          <button
+            className={tabStatus == 'provider' ? 'provider-active' : ''}
+            onClick={() => setTabStatus('provider')}
           >
             As a Skill Provider
           </button>
-          <button 
-            className={tabStatus == "seeker" ? 'seeker-active' : ''}
-            onClick={() => setTabStatus("seeker")}
-           >
+          <button
+            className={tabStatus == 'seeker' ? 'seeker-active' : ''}
+            onClick={() => setTabStatus('seeker')}
+          >
             As a Talent Seeker
-            
-           </button>
+          </button>
         </div>
       </div>
-      <div className="c_skillshare-search">
+      {/* <div className="c_skillshare-search">
         <SearchCard name="search" handleSearchChange={() => {}} />
+      </div> */}
+      <div className="col-span-1 ">
+        <CategoryDropdown onSelectCategory={onSelectCategory} />
       </div>
       <div className="c_skillshare-projects">
-        <div className="c_skillshare-projects__title">
-          <h2>My Projects</h2>
-        </div>
+        <div className="c_skillshare-projects__title"></div>
         <div className="c_skillshare-projects-cards">
-          { tabStatus == "seeker" &&  
-            <CreateProjectCard />
-          }
+          {tabStatus == 'seeker' && <CreateProjectCard />}
+          <div className="bg-white  col-span-3">
+            <h2 className="text-xl font-bold mb-4">Projects you might like</h2>
+            <div className="c_skillshare-projects-cardcontainer">
+              {filteredJobs.map((job: Job) => (
+                <JobCard key={job.id} job={job} flag={false} />
+              ))}
+            </div>
+          </div>
         </div>
       </div>
     </div>
   )
 }
 
-export default SkillShare
\ No newline at end of file
+export default SkillShare
diff --git a/src/utils/Firebase.tsx b/src/utils/Firebase.tsx
index e2fe371..9608e74 100644
--- a/src/utils/Firebase.tsx
+++ b/src/utils/Firebase.tsx
@@ -26,6 +26,8 @@ const firebaseConfig = {
   measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID
 }
 
+
+
 // Initialize Firebase
 const app = initializeApp(firebaseConfig)