diff --git a/Makefile b/Makefile
index 23c7b68..f6021f9 100644
--- a/Makefile
+++ b/Makefile
@@ -21,4 +21,4 @@ deploy: build
 	firebase deploy --only hosting
 
 clean:
-	rm -rf node_modules .next out
\ No newline at end of file
+	rm -rf node_modules .next out
diff --git a/package-lock.json b/package-lock.json
index 934493f..4a4e65b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3781,12 +3781,12 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.15.0.tgz",
-      "integrity": "sha512-wWyJDlAatxk30ZJer+GeCWS209sA42X+N5jU2jy6oHTp7ufw8uzUTVFBX9+wTfAlhiJXGS0Bq7X6efruWjuK9Q==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.16.0.tgz",
+      "integrity": "sha512-6hp5CwvTPlN2A31g5dxnwAX0orzM7pmCRDLnZSX772mv8WDqICwFjowHuPs04Mc8deIld1+ejhtaMn5vp6b+1w==",
       "license": "MIT",
       "dependencies": {
-        "follow-redirects": "^1.15.11",
+        "follow-redirects": "^1.16.0",
         "form-data": "^4.0.5",
         "proxy-from-env": "^2.1.0"
       }
@@ -5167,9 +5167,9 @@
       "license": "ISC"
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
-      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
       "funding": [
         {
           "type": "individual",
@@ -6800,9 +6800,9 @@
       }
     },
     "node_modules/mongoose": {
-      "version": "8.19.1",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.19.1.tgz",
-      "integrity": "sha512-oB7hGQJn4f8aebqE7mhE54EReb5cxVgpCxQCQj0K/cK3q4J3Tg08nFP6sM52nJ4Hlm8jsDnhVYpqIITZUAhckQ==",
+      "version": "8.23.1",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.23.1.tgz",
+      "integrity": "sha512-gHSPD8qEwRmiXapK17hEnFWZdcFENMegHTcw5XIIg2+7R8eXQvdwSiMpD/A2oG8tKzFLLHyRXd8/eaDPAVwZgQ==",
       "license": "MIT",
       "dependencies": {
         "bson": "^6.10.4",
@@ -7338,9 +7338,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.9",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.9.tgz",
-      "integrity": "sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw==",
+      "version": "8.5.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.14.tgz",
+      "integrity": "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==",
       "funding": [
         {
           "type": "opencollective",
diff --git a/public/amrabed.webp b/public/amrabed.webp
new file mode 100644
index 0000000..af835e7
Binary files /dev/null and b/public/amrabed.webp differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 42738f6..20f76cf 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -64,7 +64,7 @@ div {
 
 /* Section */
 .section {
-  @apply min-h-[100vh] w-full flex flex-col overflow-x-hidden content-evenly items-center justify-evenly shadow-sm overflow-hidden;
+  @apply h-fit w-full flex flex-col overflow-x-hidden content-start items-center justify-start shadow-sm overflow-hidden;
 }
 
 .section-heading {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c422cdf..78c14c5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,92 +1,62 @@
-import dynamic from "next/dynamic";
-import Image from "next/image";
+"use client";
+
+import { useEffect, useState } from "react";
 
 import { Banner } from "@/components/banner";
 import { MainHeader } from "@/components/header";
-import { Section } from "@/components/section";
-import certificates from "@/data/certifications";
-import degrees from "@/data/degrees";
-import skills from "@/data/skills";
-import type { Certification, Degree, Skill } from "@/types";
-import "@/types";
+import Intro from "@/components/sections/hero";
+import { AboutSection } from "@/components/sections/about";
+import { CertificationsSection } from "@/components/sections/certifications";
+import { EducationSection } from "@/components/sections/education";
+import { ExperienceSection } from "@/components/sections/experience";
+import { ProjectsSection } from "@/components/sections/projects";
+import { SkillsSection } from "@/components/sections/skills";
+import { UnifiedFilterBar } from "@/components/unified-filter-bar";
+
+const Home = () => {
+  const [showFilter, setShowFilter] = useState(false);
 
-const Intro = dynamic(() => import("@/components/intro"));
+  useEffect(() => {
+    const handleScroll = () => {
+      const skillsSection = document.getElementById("skills");
+      const experienceSection = document.getElementById("experience");
 
-const Skills = () => (
-  <Section id="skills" title="Technical Skills">
-    {Object.values(skills).map((skill: Skill) => (
-      <div
-        className="transition-all duration-700 section-item md:py-5 w-[120px] md:w-[150px]"
-        key={skill.name}
-      >
-        <p className="md:text-4xl text-2xl">{skill.icon}</p>
-        <p>{skill.name}</p>
-      </div>
-    ))}
-  </Section>
-);
+      if (skillsSection && experienceSection) {
+        const skillsTop = skillsSection.offsetTop;
+        const experienceBottom =
+          experienceSection.offsetTop + experienceSection.offsetHeight;
 
-const Certifications = () => (
-  <Section id="certifications" title="Certifications">
-    {certificates.map((certificate: Certification) => (
-      <div className="transition-all duration-700" key={certificate.title}>
-        <a href={certificate.link} target="_blank" rel="noopener noreferrer">
-          <div className="section-item p-3">
-            <Image
-              src={certificate.badge}
-              alt={`Badge for ${certificate.title}`}
-              width={150}
-              height={150}
-            />
-            <p className="md:text-xl text-foreground">{certificate.title}</p>
-            <p className="text-primary">{certificate.organization.name}</p>
-            <p className="text-secondary">{certificate.date}</p>
-          </div>
-        </a>
-      </div>
-    ))}
-  </Section>
-);
+        // Show filter bar when between skills top and experience bottom
+        // Adjusted to hide when reaching the About section
+        setShowFilter(
+          window.scrollY > skillsTop - 200 &&
+          window.scrollY + window.innerHeight < experienceBottom + 100,
+        );
+      }
+    };
 
-const Degrees = () => (
-  <Section id="degrees" title="Education">
-    {degrees.map((degree: Degree) => (
-      <div className="transition-all duration-700 gap-6" key={degree.title}>
-        <a
-          href={degree.university.url}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <div className="section-item p-3">
-            <Image
-              src={degree.university.logo ?? ""}
-              alt={`${degree.university.name} logo`}
-              height={150}
-              width={150}
-            />
-            <p className="text-xl md:text-2xl text-foreground">
-              {degree.title}
-            </p>
-            <p className="dark:text-primary-dark text-primary">
-              {degree.university.name}
-            </p>
-            <p className="text-secondary">{degree.duration}</p>
-          </div>
-        </a>
-      </div>
-    ))}
-  </Section>
-);
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
 
-const Home = () => (
-  <>
-    <Banner />
-    <MainHeader />
-    <Intro />
-    <Skills />
-    <Certifications />
-    <Degrees />
-  </>
-);
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Banner />
+      <MainHeader />
+      <Intro />
+      <main className="flex-grow">
+        <div className="space-y-0">
+          <SkillsSection />
+          <CertificationsSection />
+          <ProjectsSection />
+          <ExperienceSection />
+          <EducationSection />
+          <AboutSection />
+        </div>
+      </main>
+      {showFilter && <UnifiedFilterBar />}
+    </div>
+  );
+};
 
 export default Home;
diff --git a/src/app/positions/layout.tsx b/src/app/positions/layout.tsx
deleted file mode 100644
index 8c2f1fa..0000000
--- a/src/app/positions/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Amr Abed - Positions",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return children;
-}
diff --git a/src/app/positions/page.tsx b/src/app/positions/page.tsx
deleted file mode 100644
index 4bb5abf..0000000
--- a/src/app/positions/page.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client";
-
-import { Section } from "@/components/section";
-import React, { useMemo } from "react";
-
-import { useFilter } from "@/contexts/filter";
-import { useSearch } from "@/contexts/search";
-import positions from "@/data/positions";
-import { filterByQuery, filterBySelection } from "@/filter";
-
-import { EmptyState } from "@/components/empty-state";
-
-import { FilterBase } from "../../components/filter-base";
-import Timeline from "./timeline";
-
-const Page = () => {
-  const { debouncedQuery } = useSearch();
-  const { selected } = useFilter();
-
-  const filteredPositions = useMemo(() => {
-    const lowercaseQuery = debouncedQuery.toLowerCase();
-    const roleSet = new Set((selected["roles"] || []).map((s) => s.toLowerCase()));
-    const toolSet = new Set((selected["tools"] || []).map((s) => s.toLowerCase()));
-    const skillSet = new Set((selected["skills"] || []).map((s) => s.toLowerCase()));
-
-    return positions.filter(
-      (position) =>
-        filterByQuery(position, lowercaseQuery) &&
-        filterBySelection(position.tags, skillSet) &&
-        filterBySelection(position.roles, roleSet) &&
-        filterBySelection(position.skills, toolSet),
-    );
-  }, [debouncedQuery, selected]);
-
-  return (
-    <FilterBase
-      title="Positions"
-      placeholder="Search by title, role, skill, or tool"
-    >
-      <Section id="experience" title="">
-        {filteredPositions.length > 0 ? (
-          <div className="flex text-center items-center content-center justify-center mt-[50px]">
-            <Timeline positions={filteredPositions} />
-          </div>
-        ) : (
-          <EmptyState />
-        )}
-      </Section>
-    </FilterBase>
-  );
-};
-
-export default Page;
diff --git a/src/app/projects/layout.tsx b/src/app/projects/layout.tsx
deleted file mode 100644
index 33e848d..0000000
--- a/src/app/projects/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Amr Abed - Projects",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return children;
-}
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
deleted file mode 100644
index 136aa65..0000000
--- a/src/app/projects/page.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-"use client";
-
-import { Section } from "@/components/section";
-import React, { useMemo } from "react";
-
-import { useFilter } from "@/contexts/filter";
-import { useSearch } from "@/contexts/search";
-import projects from "@/data/projects";
-import { filterByQuery, filterBySelection } from "@/filter";
-import type { Project } from "@/types";
-
-import { EmptyState } from "@/components/empty-state";
-
-import { FilterBase } from "../../components/filter-base";
-import ProjectView from "./project";
-
-const Page = () => {
-  const { debouncedQuery } = useSearch();
-  const { selected } = useFilter();
-
-  const filteredProjects = useMemo(() => {
-    const lowercaseQuery = debouncedQuery.toLowerCase();
-    const roleSet = new Set((selected["roles"] || []).map((s) => s.toLowerCase()));
-    const toolSet = new Set((selected["tools"] || []).map((s) => s.toLowerCase()));
-    const skillSet = new Set((selected["skills"] || []).map((s) => s.toLowerCase()));
-
-    return projects
-      .filter(
-        (project) =>
-          filterByQuery(project, lowercaseQuery) &&
-          filterBySelection(project.roles, roleSet) &&
-          filterBySelection(project.tags, skillSet) &&
-          filterBySelection(project.tools, toolSet),
-      )
-      .sort(
-        (project1, project2) =>
-          project1.group - project2.group ||
-          new Date(project2.date).getFullYear() -
-            new Date(project1.date).getFullYear(),
-      );
-  }, [debouncedQuery, selected]);
-
-  return (
-    <FilterBase
-      title="Projects"
-      placeholder="Search by name, role, skill, or tool"
-    >
-      <Section id="projects" title="">
-        {filteredProjects.length > 0 ? (
-          <div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 pt-[50px] gap-5">
-            {filteredProjects.map((project: Project) => (
-              <ProjectView key={project.id} project={project} />
-            ))}
-          </div>
-        ) : (
-          <EmptyState />
-        )}
-      </Section>
-    </FilterBase>
-  );
-};
-
-export default Page;
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index 239e06f..5fd3a03 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -17,18 +17,6 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
       changeFrequency: "yearly",
       priority: 1,
     },
-    {
-      url: "https://amrabed.com/projects",
-      lastModified: new Date(),
-      changeFrequency: "yearly",
-      priority: 0.8,
-    },
-    {
-      url: "https://amrabed.com/positions",
-      lastModified: new Date(),
-      changeFrequency: "yearly",
-      priority: 0.5,
-    },
   ];
 
   try {
diff --git a/src/components/filter-base.tsx b/src/components/filter-base.tsx
deleted file mode 100644
index 60ce3cf..0000000
--- a/src/components/filter-base.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { ReactNode, Fragment } from "react";
-
-import { Selections, Filter } from "@/components/filter";
-import { PageHeader } from "@/components/header";
-import { useFilter } from "@/contexts/filter";
-import { useSearch } from "@/contexts/search";
-import areas from "@/data/areas";
-import roles from "@/data/roles";
-import skills from "@/data/skills";
-
-interface FilterBaseProps {
-  title: string;
-  placeholder: string;
-  children: ReactNode;
-}
-
-export const FilterBase = ({
-  title,
-  placeholder,
-  children,
-}: FilterBaseProps) => {
-  const { query, setQuery } = useSearch();
-  const { selected, setSelected } = useFilter();
-
-  const selectedRoles = selected["roles"] || [];
-  const selectedTools = selected["tools"] || [];
-  const selectedSkills = selected["skills"] || [];
-
-  return (
-    <Fragment>
-      <PageHeader
-        title={title}
-        query={query}
-        setQuery={setQuery}
-        placeholder={placeholder}
-      >
-        <Filter>
-          <Selections
-            label="Roles"
-            values={Object.values(roles).map((role) => role.name)}
-            selected={selectedRoles}
-            setSelected={(values) => setSelected("roles", values as string[])}
-          />
-          <Selections
-            label="Tools"
-            values={Object.values(skills).map((skill) => skill.name)}
-            selected={selectedTools}
-            setSelected={(values) => setSelected("tools", values as string[])}
-          />
-          <Selections
-            label="Skills"
-            values={Object.values(areas).map((area) => area.name)}
-            selected={selectedSkills}
-            setSelected={(values) => setSelected("skills", values as string[])}
-          />
-        </Filter>
-      </PageHeader>
-      {children}
-    </Fragment>
-  );
-};
diff --git a/src/components/filter.tsx b/src/components/filter.tsx
index e8a9e93..59aa1df 100644
--- a/src/components/filter.tsx
+++ b/src/components/filter.tsx
@@ -17,7 +17,7 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 const checkbox = tv({
   slots: {
-    base: "border-none bg-default-100 hover:bg-default-200",
+    base: "border-none bg-default-100 hover:bg-default-200 dark:bg-slate-700/50 dark:hover:bg-slate-700",
     content: "text-foreground-500 hover:text-foreground",
   },
   variants: {
@@ -70,21 +70,28 @@ export const Selections = ({
   setSelected,
 }: {
   label: string;
-  values: string[];
+  values: { id: string; name: string; icon?: ReactNode }[];
   selected: string[];
   setSelected: (values: string[]) => void;
 }) => (
   <div className="flex flex-row gap-1 w-full">
     <CheckboxGroup
-      className="gap-4"
+      className="gap-4 w-full"
       value={selected}
       onChange={(values) => setSelected(values as string[])}
     >
-      <Label className="text-sm font-medium text-slate-500">{label}</Label>
+      <Label className="text-sm font-medium text-slate-500 uppercase tracking-wider">
+        {label}
+      </Label>
       <div className="flex flex-wrap gap-2 flex-row">
-        {values.map((value) => (
-          <Selection key={value} value={value.toLowerCase()}>
-            {value}
+        {values.map((v) => (
+          <Selection key={v.id} value={v.id}>
+            <div className="flex items-center gap-2">
+              {v.icon && (
+                <span className="size-4 flex items-center">{v.icon}</span>
+              )}
+              {v.name}
+            </div>
           </Selection>
         ))}
       </div>
@@ -92,7 +99,13 @@ export const Selections = ({
   </div>
 );
 
-export const Filter = ({ children }: { children: ReactNode }) => (
+export const Filter = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => (
   <Popover>
     <Button
       id="filter-trigger"
@@ -100,15 +113,16 @@ export const Filter = ({ children }: { children: ReactNode }) => (
       isIconOnly
       aria-label="Open filters"
       aria-haspopup="dialog"
+      className={className}
     >
       <AdjustmentsHorizontalIcon className="size-6" />
     </Button>
     <Popover.Content
       offset={10}
       placement="bottom"
-      className="dark:bg-slate-800"
+      className="dark:bg-slate-800 rounded-3xl"
     >
-      <Popover.Dialog className="flex flex-col w-[500px] p-4 gap-6">
+      <Popover.Dialog className="flex flex-col w-[90vw] max-w-[500px] p-6 gap-8">
         {children}
       </Popover.Dialog>
     </Popover.Content>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 0587c42..4b9735d 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,53 +1,91 @@
 "use client";
 
-import Link from "next/link";
-
-import { ReactNode, useState } from "react";
-
-import { ChevronLeftIcon } from "@heroicons/react/24/outline";
-import { Separator } from "@heroui/react";
-
-import { Searchbar, SearchIcon } from "./search";
+import { useEffect, useState } from "react";
 
 export const sections = [
-  {
-    name: "skills",
-    link: "#skills",
-  },
-  {
-    name: "certifications",
-    link: "#certifications",
-  },
-  {
-    name: "degrees",
-    link: "#degrees",
-  },
+  { name: "Skills", link: "#skills" },
+  { name: "Certifications", link: "#certifications" },
+  { name: "Projects", link: "#projects" },
+  { name: "Experience", link: "#experience" },
+  { name: "Education", link: "#degrees" },
+  { name: "About", link: "#about" },
 ];
 
-export const pages = [
-  {
-    name: "projects",
-    link: "./projects",
-  },
-  {
-    name: "positions",
-    link: "./positions",
-  },
-];
-
-const Title = () => (
-  <Link href="#" className="text-lg font-semibold">
+const Title = ({ onClick }: { onClick: (e: React.MouseEvent) => void }) => (
+  <button
+    onClick={onClick}
+    className="text-lg font-semibold cursor-pointer hover:text-primary transition-colors"
+  >
     Amr Abed
-  </Link>
+  </button>
 );
 
 export const MainHeader = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [activeSection, setActiveSection] = useState("");
+
+  useEffect(() => {
+    const observerOptions = {
+      root: null,
+      rootMargin: "-30% 0px -60% 0px",
+      threshold: 0,
+    };
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (entry.target.id === "home") {
+            setActiveSection("");
+          } else {
+            setActiveSection(entry.target.id);
+          }
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(
+      observerCallback,
+      observerOptions,
+    );
+
+    sections.forEach((section) => {
+      const element = document.getElementById(section.link.substring(1));
+      if (element) observer.observe(element);
+    });
+
+    const home = document.getElementById("home");
+    if (home) observer.observe(home);
+
+    return () => observer.disconnect();
+  }, []);
+
+  const handleScroll = (e: React.MouseEvent, link: string) => {
+    e.preventDefault();
+    const targetId = link.substring(1);
+    const element = document.getElementById(targetId);
+    if (element) {
+      window.scrollTo({
+        top: element.offsetTop - 100, // Adjusted offset for better centering
+        behavior: "smooth",
+      });
+      setIsMenuOpen(false);
+    }
+  };
+
+  const handleScrollToTop = (e: React.MouseEvent) => {
+    e.preventDefault();
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+    setIsMenuOpen(false);
+    setActiveSection("");
+  };
 
   return (
-    <nav className="sticky top-0 z-40 w-full bg-background/70 backdrop-blur-lg pt-10 px-6">
+    <nav className="sticky top-0 z-40 w-full bg-background/70 backdrop-blur-lg pt-10 px-6 border-b border-divider h-26">
       <header className="max-w-7xl mx-auto flex h-16 items-center justify-between">
-        <Title />
+        <Title onClick={handleScrollToTop} />
 
         <div className="sm:hidden">
           <button
@@ -75,35 +113,26 @@ export const MainHeader = () => {
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={2}
-                  d="M4 6h16M4 12h16M4 18h16"
+                  d="M19 9l-7 7-7-7"
                 />
               )}
             </svg>
           </button>
         </div>
 
-        <ul className="hidden sm:flex items-center gap-4">
+        <ul className="hidden sm:flex items-center gap-6">
           {sections.map((section) => (
             <li key={section.name}>
-              <Link
-                className="hover:text-primary transition-colors"
+              <a
+                className={`text-sm font-medium transition-colors hover:text-primary ${activeSection === section.link.substring(1)
+                  ? "text-primary"
+                  : "text-foreground-500"
+                  }`}
                 href={section.link}
+                onClick={(e) => handleScroll(e, section.link)}
               >
                 {section.name}
-              </Link>
-            </li>
-          ))}
-          <li key="separator">
-            <Separator orientation="vertical" className="h-10 mx-2" />
-          </li>
-          {pages.map((page) => (
-            <li key={page.name}>
-              <Link
-                className="hover:text-primary transition-colors"
-                href={page.link}
-              >
-                {page.name}
-              </Link>
+              </a>
             </li>
           ))}
         </ul>
@@ -112,32 +141,21 @@ export const MainHeader = () => {
       {isMenuOpen && (
         <div
           id="mobile-menu"
-          className="sm:hidden pb-6 transition-all duration-300"
+          className="sm:hidden pb-6 transition-all duration-300 bg-background/95 backdrop-blur-lg border-b border-divider"
         >
           <ul className="flex flex-col gap-4">
             {sections.map((section) => (
               <li key={section.name}>
-                <Link
-                  className="block text-lg py-2 hover:text-primary transition-colors"
+                <a
+                  className={`block text-lg py-2 transition-colors hover:text-primary ${activeSection === section.link.substring(1)
+                    ? "text-primary"
+                    : "text-foreground-500"
+                    }`}
                   href={section.link}
-                  onClick={() => setIsMenuOpen(false)}
+                  onClick={(e) => handleScroll(e, section.link)}
                 >
                   {section.name}
-                </Link>
-              </li>
-            ))}
-            <li key="separator">
-              <Separator />
-            </li>
-            {pages.map((page) => (
-              <li key={page.name}>
-                <Link
-                  className="block text-lg py-2 hover:text-primary transition-colors"
-                  href={page.link}
-                  onClick={() => setIsMenuOpen(false)}
-                >
-                  {page.name}
-                </Link>
+                </a>
               </li>
             ))}
           </ul>
@@ -146,45 +164,3 @@ export const MainHeader = () => {
     </nav>
   );
 };
-
-export const PageHeader = ({
-  title,
-  query,
-  setQuery,
-  placeholder,
-  children,
-}: {
-  title: string;
-  query: string;
-  setQuery: (query: string) => void;
-  placeholder: string;
-  children: ReactNode;
-}) => (
-  <div className="w-full p-5 backdrop-filter backdrop-blur-lg shadow-sm shadow-gray-300 dark:shadow-gray-800 fixed z-10 transition-all duration-500">
-    <div className="max-w-7xl mx-auto flex flex-row justify-between w-full">
-      <div className="flex flex-row gap-1 p-1">
-        <Link href="/">
-          <ChevronLeftIcon className="size-8 text-xl text-primary" />
-        </Link>
-        <h1 className="text-xl p-1">{title}</h1>
-      </div>
-      <div className="hidden sm:flex w-1/2 lg:w-1/3">
-        <Searchbar
-          placeholder={placeholder}
-          query={query}
-          setQuery={setQuery}
-        />
-      </div>
-      <div className="flex flex-row">
-        <div className="flex sm:hidden">
-          <SearchIcon
-            placeholder={placeholder}
-            query={query}
-            setQuery={setQuery}
-          />
-        </div>
-        {children}
-      </div>
-    </div>
-  </div>
-);
diff --git a/src/app/projects/project.tsx b/src/components/project.tsx
similarity index 95%
rename from src/app/projects/project.tsx
rename to src/components/project.tsx
index a65a2b8..24e3f46 100644
--- a/src/app/projects/project.tsx
+++ b/src/components/project.tsx
@@ -47,10 +47,12 @@ const IconLink = ({
 );
 
 const Links = ({ links }: { links: ProjectLinks }) => {
+  const githubLink = links.github ? `https://github.com/${links.github}` : null;
+
   return (
     <div className="flex flex-row gap-4">
-      {links.github && (
-        <IconLink href={links.github} title="GitHub">
+      {githubLink && (
+        <IconLink href={githubLink} title="GitHub">
           <FaGithub className="size-5" />
         </IconLink>
       )}
diff --git a/src/components/search.tsx b/src/components/search.tsx
index 602c08a..ed5ef2d 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -7,10 +7,12 @@ export const Searchbar = ({
   placeholder,
   query,
   setQuery,
+  className,
 }: {
   placeholder: string;
   query: string;
   setQuery: (query: string) => void;
+  className?: string;
 }) => {
   const inputId = useId();
   return (
@@ -20,7 +22,7 @@ export const Searchbar = ({
       </label>
       <input
         id={inputId}
-        className="peer border-none rounded-lg bg-white dark:bg-slate-800 border border-gray-200 py-[9px] pl-10 pr-10 text-sm outline-none w-full"
+        className={`peer border-none bg-white dark:bg-slate-800 border border-gray-200 py-[9px] pl-10 pr-10 text-sm outline-none w-full ${className}`}
         placeholder={placeholder}
         value={query}
         onChange={(e) => setQuery(e.target.value)}
diff --git a/src/components/section.tsx b/src/components/section.tsx
index db664ff..debc4f3 100644
--- a/src/components/section.tsx
+++ b/src/components/section.tsx
@@ -53,8 +53,10 @@ export const Section = ({
   }, [isVisible]);
 
   return (
-    <section id={id} className="section" ref={dataRef}>
-      <h2 className="section-heading">{title}</h2>
+    <section id={id} className="section scroll-mt-48" ref={dataRef}>
+      <div className="flex items-center gap-4 mb-8">
+        <h2 className="section-heading mb-0">{title}</h2>
+      </div>
       <div className="pop-down-child section-body" ref={itemRef}>
         {children}
       </div>
diff --git a/src/components/sections/about.tsx b/src/components/sections/about.tsx
new file mode 100644
index 0000000..91c1e1e
--- /dev/null
+++ b/src/components/sections/about.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { Section } from "../section";
+
+export const AboutSection = () => {
+  return (
+    <Section id="about" title="About">
+      <div className="max-w-4xl mx-auto text-lg leading-relaxed text-slate-600 dark:text-slate-400 space-y-4 pb-20">
+        <p>
+          I am a passionate software engineer, researcher, and educator with a
+          focus on Artificial Intelligence (AI), Machine Learning, Cloud Computing, and Mobile Development.
+          With a background in Computer Engineering and years of experience in
+          both academia and industry, I strive to build impactful solutions that
+          bridge the gap between complex research and practical application.
+        </p>
+        <p>
+          My work spans across various domains, including developing scalable
+          cloud architectures, implementing advanced machine learning solutions,
+          and creating intuitive mobile experiences. I am a strong advocate for
+          agile methodologies and continuous learning, always seeking to stay at
+          the forefront of technological advancements.
+        </p>
+        <p>
+          When I&apos;m not coding or researching, I enjoy sharing my knowledge
+          through blogging and mentoring, helping the next generation of
+          engineers grow and succeed in the ever-evolving tech landscape.
+        </p>
+      </div>
+    </Section>
+  );
+};
diff --git a/src/components/sections/certifications.tsx b/src/components/sections/certifications.tsx
new file mode 100644
index 0000000..7b30c20
--- /dev/null
+++ b/src/components/sections/certifications.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import Image from "next/image";
+
+import { useMemo } from "react";
+
+import { useFilter } from "@/contexts/filter";
+import { useSearch } from "@/contexts/search";
+import certificationsData from "@/data/certifications";
+import { filterByQuery, filterByArea } from "@/filter";
+
+import { EmptyState } from "../empty-state";
+import { Section } from "../section";
+
+export const CertificationsSection = () => {
+  const { debouncedQuery } = useSearch();
+  const { selected } = useFilter();
+
+  const filteredCerts = useMemo(() => {
+    const lowercaseQuery = debouncedQuery.toLowerCase();
+    const selectedAreas = new Set(selected["areas"] || []);
+    const selectedSkills = new Set(selected["skills"] || []);
+
+    return certificationsData.filter((cert) => {
+      const matchesQuery = filterByQuery(cert, lowercaseQuery);
+      const matchesArea = filterByArea(cert.areas || [], selectedAreas);
+      const matchesSkill =
+        selectedSkills.size === 0 ||
+        (cert.skills || []).some((s) => selectedSkills.has(s.toLowerCase()));
+      return matchesQuery && matchesArea && matchesSkill;
+    });
+  }, [debouncedQuery, selected]);
+
+  return (
+    <Section id="certifications" title="Certifications">
+      <div className="section-body">
+        {filteredCerts.length > 0 ? (
+          filteredCerts.map((certificate) => (
+            <div
+              className="transition-all duration-700"
+              key={certificate.title}
+            >
+              <a
+                href={certificate.link}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div className="section-item p-3">
+                  <Image
+                    src={certificate.badge}
+                    alt={`Badge for ${certificate.title}`}
+                    width={150}
+                    height={150}
+                  />
+                  <p className="md:text-xl text-foreground">
+                    {certificate.title}
+                  </p>
+                  <p className="text-primary">
+                    {certificate.organization.name}
+                  </p>
+                  <p className="text-secondary">{certificate.date}</p>
+                </div>
+              </a>
+            </div>
+          ))
+        ) : (
+          <EmptyState />
+        )}
+      </div>
+    </Section>
+  );
+};
diff --git a/src/components/sections/education.tsx b/src/components/sections/education.tsx
new file mode 100644
index 0000000..34c6ee1
--- /dev/null
+++ b/src/components/sections/education.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import Image from "next/image";
+
+import degreesData from "@/data/degrees";
+
+import { Section } from "../section";
+
+export const EducationSection = () => {
+  return (
+    <Section id="degrees" title="Education">
+      {degreesData.map((degree) => (
+        <div className="transition-all duration-700 gap-6" key={degree.title}>
+          <a
+            href={degree.university.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <div className="section-item p-3">
+              <Image
+                src={degree.university.logo ?? ""}
+                alt={`${degree.university.name} logo`}
+                height={150}
+                width={150}
+              />
+              <p className="text-xl md:text-2xl text-foreground">
+                {degree.title}
+              </p>
+              <p className="dark:text-primary-dark text-primary">
+                {degree.university.name}
+              </p>
+              <p className="text-secondary">{degree.duration}</p>
+            </div>
+          </a>
+        </div>
+      ))}
+    </Section>
+  );
+};
diff --git a/src/components/sections/experience.tsx b/src/components/sections/experience.tsx
new file mode 100644
index 0000000..6e1cd87
--- /dev/null
+++ b/src/components/sections/experience.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useMemo } from "react";
+
+import Timeline from "@/components/timeline";
+import { useFilter } from "@/contexts/filter";
+import { useSearch } from "@/contexts/search";
+import positionsData from "@/data/positions";
+import { filterByQuery, filterByArea } from "@/filter";
+
+import { EmptyState } from "../empty-state";
+import { Section } from "../section";
+
+export const ExperienceSection = () => {
+  const { debouncedQuery } = useSearch();
+  const { selected } = useFilter();
+
+  const filteredPositions = useMemo(() => {
+    const lowercaseQuery = debouncedQuery.toLowerCase();
+    const selectedAreas = new Set(selected["areas"] || []);
+    const selectedRoles = new Set(selected["roles"] || []);
+    const selectedSkills = new Set(selected["skills"] || []);
+
+    return positionsData.filter((position) => {
+      const matchesQuery = filterByQuery(position, lowercaseQuery);
+      const matchesArea = filterByArea(position.tags, selectedAreas);
+      const matchesRole =
+        selectedRoles.size === 0 ||
+        position.roles.some((r) => selectedRoles.has(r.toLowerCase()));
+      const matchesSkill =
+        selectedSkills.size === 0 ||
+        position.skills.some((s) => selectedSkills.has(s.toLowerCase()));
+      return matchesQuery && matchesArea && matchesRole && matchesSkill;
+    });
+  }, [debouncedQuery, selected]);
+
+  return (
+    <Section id="experience" title="Experience">
+      {filteredPositions.length > 0 ? (
+        <div className="w-full mt-8 px-4 md:px-10">
+          <Timeline positions={filteredPositions} />
+        </div>
+      ) : (
+        <EmptyState />
+      )}
+    </Section>
+  );
+};
diff --git a/src/components/intro.tsx b/src/components/sections/hero.tsx
similarity index 74%
rename from src/components/intro.tsx
rename to src/components/sections/hero.tsx
index 152a18b..8f6e2ef 100644
--- a/src/components/intro.tsx
+++ b/src/components/sections/hero.tsx
@@ -6,7 +6,8 @@ import React, { useEffect, useRef, useState } from "react";
 import { TypeAnimation } from "react-type-animation";
 
 const Intro = () => {
-  const [isHome, setIsHome] = useState(false);
+  const [isHome, setIsHome] = useState(true);
+  const [mounted, setMounted] = useState(false);
 
   const homeRef = useRef<HTMLElement>(null);
   const introRef = useRef<HTMLDivElement>(null);
@@ -14,6 +15,7 @@ const Intro = () => {
 
   // Intersection observer animation on scroll
   useEffect(() => {
+    setMounted(true);
     const getScreenWidth = () =>
       window.innerWidth ||
       document.documentElement.clientWidth ||
@@ -43,11 +45,11 @@ const Intro = () => {
     <section id="home" ref={homeRef} className="w-full">
       <div className="min-h-[100vh] w-full overflow-x-hidden px-[20px] md:px-[50px] lg:px-[100px] xl:px-[200px] 2xl:px-[400px] flex flex-col md:flex-row content-center items-center justify-between shadow-zinc-300 dark:shadow-zinc-700 shadow-sm">
         <div
-          className={`${isHome ? "translate-x-0 opacity-100" : "translate-x-[-500px] opacity-0"} transition-all duration-700 w-[300px] h-[300px] md:w-[400px] md:h-[400px] relative m-auto md:m-0 mt-[40px] md:mt-0 order-last md:order-first`}
+          className={`${isHome ? "translate-x-0 opacity-100" : "translate-x-[-500px] opacity-0"} transition-all duration-700 w-[300px] h-[300px] md:w-[400px] md:h-[400px] relative m-auto md:m-0 mt-[40px] md:mt-0 order-last md:order-last`}
           ref={profileRef}
         >
           <Image
-            src="/amr.webp"
+            src="/amrabed.webp"
             alt="Amr Abed"
             fill
             className="rounded-full object-cover"
@@ -56,28 +58,32 @@ const Intro = () => {
         </div>
 
         <div
-          className={`${isHome ? "translate-x-0 opacity-100" : "translate-x-[500px] opacity-0"} transition-all duration-700 order-first md:order-last`}
+          className={`${isHome ? "translate-x-0 opacity-100" : "translate-x-[500px] opacity-0"} transition-all duration-700 order-first md:order-first`}
           ref={introRef}
         >
           <p className="text-2xl md:text-4xl py-2 font-sans text-center text-nowrap">
             I&apos;m
             <span className="text-primary">
               {" a"}
-              <TypeAnimation
-                sequence={[
-                  "n Engineer",
-                  2000,
-                  " Researcher",
-                  2000,
-                  " Teacher",
-                  2000,
-                  " Creator",
-                  2000,
-                ]}
-                wrapper="span"
-                speed={10}
-                repeat={Infinity}
-              />
+              {!mounted ? (
+                "n Engineer"
+              ) : (
+                <TypeAnimation
+                  sequence={[
+                    "n Engineer",
+                    2000,
+                    " Researcher",
+                    2000,
+                    " Teacher",
+                    2000,
+                    " Creator",
+                    2000,
+                  ]}
+                  wrapper="span"
+                  speed={10}
+                  repeat={Infinity}
+                />
+              )}
             </span>
           </p>
         </div>
diff --git a/src/components/sections/projects.tsx b/src/components/sections/projects.tsx
new file mode 100644
index 0000000..b9e9f8f
--- /dev/null
+++ b/src/components/sections/projects.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useMemo } from "react";
+
+import ProjectView from "@/components/project";
+import { useFilter } from "@/contexts/filter";
+import { useSearch } from "@/contexts/search";
+import projectsData from "@/data/projects";
+import { filterByQuery, filterByArea } from "@/filter";
+
+import { EmptyState } from "../empty-state";
+import { Section } from "../section";
+
+export const ProjectsSection = () => {
+  const { debouncedQuery } = useSearch();
+  const { selected } = useFilter();
+
+  const filteredProjects = useMemo(() => {
+    const lowercaseQuery = debouncedQuery.toLowerCase();
+    const selectedAreas = new Set(selected["areas"] || []);
+    const selectedRoles = new Set(selected["roles"] || []);
+    const selectedSkills = new Set(selected["skills"] || []);
+
+    return projectsData
+      .filter((project) => {
+        const matchesQuery = filterByQuery(project, lowercaseQuery);
+        const matchesArea = filterByArea(project.tags, selectedAreas);
+        const matchesRole =
+          selectedRoles.size === 0 ||
+          project.roles.some((r) => selectedRoles.has(r.toLowerCase()));
+        const matchesSkill =
+          selectedSkills.size === 0 ||
+          project.tools.some((t) => selectedSkills.has(t.toLowerCase()));
+        return matchesQuery && matchesArea && matchesRole && matchesSkill;
+      })
+      .sort((a, b) => {
+        if (a.group !== b.group) return a.group - b.group;
+        return new Date(b.date).getTime() - new Date(a.date).getTime();
+      });
+  }, [debouncedQuery, selected]);
+
+  return (
+    <Section id="projects" title="Projects">
+      {filteredProjects.length > 0 ? (
+        <div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-6 w-full px-4 md:px-10">
+          {filteredProjects.map((project) => (
+            <ProjectView key={project.id} project={project} />
+          ))}
+        </div>
+      ) : (
+        <EmptyState />
+      )}
+    </Section>
+  );
+};
diff --git a/src/components/sections/skills.tsx b/src/components/sections/skills.tsx
new file mode 100644
index 0000000..bd8b3c9
--- /dev/null
+++ b/src/components/sections/skills.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { useMemo } from "react";
+
+import { useFilter } from "@/contexts/filter";
+import { useSearch } from "@/contexts/search";
+import areaSkills from "@/data/areaSkills";
+import skillsData from "@/data/skills";
+
+import { EmptyState } from "../empty-state";
+import { Section } from "../section";
+
+export const SkillsSection = () => {
+  const { debouncedQuery } = useSearch();
+  const { selected } = useFilter();
+
+  const filteredSkills = useMemo(() => {
+    const lowercaseQuery = debouncedQuery.toLowerCase();
+
+    // Determine which skills are matching the area filter
+    const selectedAreas = selected["areas"] || [];
+    const areaMatchingSkills = new Set<string>();
+    if (selectedAreas.length === 0) {
+      Object.keys(skillsData).forEach((s) => areaMatchingSkills.add(s));
+    } else {
+      selectedAreas.forEach((area) => {
+        areaSkills[area]?.forEach((skill) => areaMatchingSkills.add(skill));
+      });
+    }
+
+    return Object.entries(skillsData).filter(([key, skill]) => {
+      const matchesQuery =
+        !lowercaseQuery || skill.name.toLowerCase().includes(lowercaseQuery);
+      const matchesArea = areaMatchingSkills.has(key);
+      return matchesQuery && matchesArea;
+    });
+  }, [debouncedQuery, selected]);
+
+  return (
+    <Section id="skills" title="Technical Skills">
+      <div className="section-body">
+        {filteredSkills.length > 0 ? (
+          filteredSkills.map(([, skill]) => (
+            <div
+              className="transition-all duration-700 section-item md:py-5 w-[120px] md:w-[150px]"
+              key={skill.name}
+            >
+              <p className="md:text-4xl text-2xl">{skill.icon}</p>
+              <p>{skill.name}</p>
+            </div>
+          ))
+        ) : (
+          <EmptyState />
+        )}
+      </div>
+    </Section>
+  );
+};
diff --git a/src/app/positions/timeline.tsx b/src/components/timeline.tsx
similarity index 100%
rename from src/app/positions/timeline.tsx
rename to src/components/timeline.tsx
diff --git a/src/components/unified-filter-bar.tsx b/src/components/unified-filter-bar.tsx
new file mode 100644
index 0000000..de41b28
--- /dev/null
+++ b/src/components/unified-filter-bar.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { Button } from "@heroui/react";
+
+import { useFilter } from "@/contexts/filter";
+import { useSearch } from "@/contexts/search";
+import areas from "@/data/areas";
+import roles from "@/data/roles";
+import skills from "@/data/skills";
+
+import { Filter, Selections } from "./filter";
+import { Searchbar } from "./search";
+
+export const UnifiedFilterBar = () => {
+  const { query, setQuery } = useSearch();
+  const { selected, setSelected, clearAll } = useFilter();
+
+  const hasFilters =
+    query !== "" || Object.values(selected).some((v) => v.length > 0);
+
+  const handleClearAll = () => {
+    setQuery("");
+    clearAll();
+  };
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 w-full bg-background/90 backdrop-blur-md border-t border-divider py-3 px-4 sm:px-6 shadow-[0_-10px_50px_-15px_rgba(0,0,0,0.3)] transition-all duration-500">
+      <div className="max-w-7xl mx-auto flex items-center justify-center">
+        <div className="flex-grow max-w-2xl flex items-center">
+          <Searchbar
+            placeholder="Search everything..."
+            query={query}
+            setQuery={setQuery}
+            className="rounded-l-2xl rounded-r-none border-r-0"
+          />
+          <Filter className="rounded-l-none rounded-r-2xl border-l-0 bg-white dark:bg-slate-800 h-[38px] min-w-[48px] hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors border-zinc-200 dark:border-zinc-700">
+            <Selections
+              label="Areas"
+              values={Object.values(areas).map((a) => ({
+                id: a.name.toLowerCase(),
+                name: a.name,
+                icon: a.icon,
+              }))}
+              selected={selected["areas"] || []}
+              setSelected={(vals) => setSelected("areas", vals)}
+            />
+            <Selections
+              label="Skills"
+              values={Object.values(skills).map((s) => ({
+                id: s.name.toLowerCase(),
+                name: s.name,
+                icon: s.icon,
+              }))}
+              selected={selected["skills"] || []}
+              setSelected={(vals) => setSelected("skills", vals)}
+            />
+            <Selections
+              label="Roles"
+              values={Object.values(roles).map((r) => ({
+                id: r.name.toLowerCase(),
+                name: r.name,
+              }))}
+              selected={selected["roles"] || []}
+              setSelected={(vals) => setSelected("roles", vals)}
+            />
+          </Filter>
+        </div>
+
+        {hasFilters && (
+          <div className="ml-2 flex items-center">
+            <Button
+              variant="danger-soft"
+              size="sm"
+              onPress={handleClearAll}
+              className="font-medium flex gap-1 items-center rounded-full px-4"
+            >
+              <XMarkIcon className="size-4" />
+              <span>Clear</span>
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/upArrow.tsx b/src/components/upArrow.tsx
index 082ab1d..f2d0c60 100644
--- a/src/components/upArrow.tsx
+++ b/src/components/upArrow.tsx
@@ -1,10 +1,11 @@
 "use client";
 
+import { motion, AnimatePresence } from "framer-motion";
+
 import { useEffect, useState } from "react";
 
 import { ChevronUpIcon } from "@heroicons/react/24/outline";
 import { Button, Tooltip } from "@heroui/react";
-import { motion, AnimatePresence } from "framer-motion";
 
 const ScrollToTopButton = () => {
   const [isVisible, setIsVisible] = useState(false);
diff --git a/src/contexts/filter.tsx b/src/contexts/filter.tsx
index df3af75..c0b50ed 100644
--- a/src/contexts/filter.tsx
+++ b/src/contexts/filter.tsx
@@ -54,19 +54,19 @@ const FilterContent = ({ children }: { children: ReactNode }) => {
     setSelectedState({});
   }, []);
 
-  const update = useCallback(
-    (p: URLSearchParams, s: Record<string, string[]>) => {
-      Array.from(p.keys()).forEach((k) => {
-        if (k !== "query") p.delete(k);
+  const updateUrl = useCallback(
+    (params: URLSearchParams, s: Record<string, string[]>) => {
+      Array.from(params.keys()).forEach((k) => {
+        if (k !== "query") params.delete(k);
       });
       Object.entries(s).forEach(([k, v]) => {
-        if (v?.length) p.set(k, v.join(","));
+        if (v?.length) params.set(k, v.join(","));
       });
     },
     [],
   );
 
-  useUrlSync(selected, update);
+  useUrlSync(selected, updateUrl);
 
   const contextValue = useMemo(
     () => ({ selected, setSelected, clearAll }),
diff --git a/src/contexts/search.tsx b/src/contexts/search.tsx
index 6be9e1f..4ecbe85 100644
--- a/src/contexts/search.tsx
+++ b/src/contexts/search.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useSearchParams } from "next/navigation";
+import { useDebounce } from "use-debounce";
 
 import {
   ReactNode,
@@ -10,7 +11,6 @@ import {
   useMemo,
   useCallback,
 } from "react";
-import { useDebounce } from "use-debounce";
 
 import { withSuspense } from "./suspense";
 import { useUrlSync } from "./sync";
diff --git a/src/data/areaSkills.ts b/src/data/areaSkills.ts
new file mode 100644
index 0000000..a2dc0ba
--- /dev/null
+++ b/src/data/areaSkills.ts
@@ -0,0 +1,21 @@
+const areaSkills: Record<string, string[]> = {
+  cloud: ["aws", "google cloud", "docker", "kubernetes", "firebase"],
+  "machine learning": ["python", "tensorflow", "scikit-learn", "mlflow"],
+  programming: [
+    "python",
+    "kotlin",
+    "java",
+    "c++",
+    "swift",
+    "javascript",
+    "typescript",
+    "bash",
+  ],
+  mobile: ["firebase", "android", "kotlin", "swift", "flutter"],
+  devops: ["docker", "kubernetes", "bash"],
+  database: ["firebase"],
+  web: ["javascript", "typescript"],
+  security: [],
+};
+
+export default areaSkills;
diff --git a/src/data/certifications.tsx b/src/data/certifications.tsx
index 7ae60bd..aa8301f 100644
--- a/src/data/certifications.tsx
+++ b/src/data/certifications.tsx
@@ -10,6 +10,8 @@ const certifications: Certification[] = [
     badge: "/aws-genai-prof.png",
     link: "https://www.credly.com/badges/ec8af76c-b6f0-40d7-94c2-7df06820af50",
     date: "March 2026",
+    skills: ["python", "aws", "tensorflow", "mlflow"],
+    areas: ["machine learning", "cloud"],
   },
   {
     title: "AWS Certified Machine Learning - Specialty",
@@ -20,6 +22,8 @@ const certifications: Certification[] = [
     badge: "/aws-mls.webp",
     link: "https://www.credly.com/badges/8ea3bcee-014b-42df-bc37-3e49d1e4166e/public_url",
     date: "June 2024",
+    skills: ["python", "aws", "tensorflow", "scikit-learn", "mlflow"],
+    areas: ["machine learning", "cloud"],
   },
   {
     title: "AWS Certified Solutions Architect",
@@ -30,6 +34,8 @@ const certifications: Certification[] = [
     badge: "/aws-saa.webp",
     link: "https://www.youracclaim.com/badges/2d566076-370f-4b1b-8103-ed467325228d",
     date: "October 2020",
+    skills: ["aws", "docker", "kubernetes"],
+    areas: ["cloud", "devops"],
   },
   {
     title: "Certified Scrum Master",
@@ -40,6 +46,8 @@ const certifications: Certification[] = [
     badge: "/csm.webp",
     link: "https://bcert.me/swmyzzefi",
     date: "June 2020",
+    skills: [],
+    areas: ["devops"],
   },
   {
     title: "Certified Scrum Product Owner",
@@ -50,6 +58,8 @@ const certifications: Certification[] = [
     badge: "/cspo.webp",
     link: "https://bcert.me/spcxpsler",
     date: "June 2020",
+    skills: [],
+    areas: ["devops"],
   },
 ];
 
diff --git a/src/filter.tsx b/src/filter.tsx
index 374b962..475095f 100644
--- a/src/filter.tsx
+++ b/src/filter.tsx
@@ -1,4 +1,4 @@
-import type { Position, Project } from "@/types";
+import type { Position, Project, Certification, Degree } from "@/types";
 
 /**
  * Checks if any of the values match the query (case-insensitive).
@@ -8,32 +8,82 @@ export const match = (values: string[], lowercaseQuery: string) => {
   return values.some((value) => value.toLowerCase().includes(lowercaseQuery));
 };
 
+const filterProjectByQuery = (project: Project, lowercaseQuery: string) => {
+  return (
+    project.name.toLowerCase().includes(lowercaseQuery) ||
+    project.description.toLowerCase().includes(lowercaseQuery) ||
+    match(project.roles || [], lowercaseQuery) ||
+    match(project.tools || [], lowercaseQuery) ||
+    match(project.tags || [], lowercaseQuery)
+  );
+};
+
+const filterCertificationByQuery = (
+  cert: Certification,
+  lowercaseQuery: string,
+) => {
+  return (
+    cert.title.toLowerCase().includes(lowercaseQuery) ||
+    cert.organization.name.toLowerCase().includes(lowercaseQuery) ||
+    (cert.skills && match(cert.skills, lowercaseQuery)) ||
+    (cert.areas && match(cert.areas, lowercaseQuery))
+  );
+};
+
+const filterPositionByQuery = (pos: Position, lowercaseQuery: string) => {
+  return (
+    pos.title.toLowerCase().includes(lowercaseQuery) ||
+    pos.organization.name.toLowerCase().includes(lowercaseQuery) ||
+    match(pos.roles || [], lowercaseQuery) ||
+    match(pos.skills || [], lowercaseQuery) ||
+    match(pos.tags || [], lowercaseQuery) ||
+    match(pos.tasks || [], lowercaseQuery)
+  );
+};
+
+const filterDegreeByQuery = (degree: Degree, lowercaseQuery: string) => {
+  return (
+    degree.title.toLowerCase().includes(lowercaseQuery) ||
+    degree.university.name.toLowerCase().includes(lowercaseQuery)
+  );
+};
+
 /**
- * Filters a project or position by a query string.
+ * Filters a project, position, certification or degree by a query string.
  * Optimizes performance by lowercasing the query once.
  */
 export const filterByQuery = (
-  item: Project | Position,
+  item: Project | Position | Certification | Degree,
   lowercaseQuery: string,
 ) => {
   if (!lowercaseQuery) return true;
-  const name = (item as Project).name || (item as Position).title;
-  const roles = item.roles || [];
-  const tools = (item as Project).tools || (item as Position).skills || [];
-  const tags = item.tags || [];
 
-  return (
-    name.toLowerCase().includes(lowercaseQuery) ||
-    match(roles, lowercaseQuery) ||
-    match(tools, lowercaseQuery) ||
-    match(tags, lowercaseQuery)
-  );
+  if ("name" in item) return filterProjectByQuery(item, lowercaseQuery);
+
+  if ("title" in item) {
+    if ("university" in item)
+      return filterDegreeByQuery(item, lowercaseQuery);
+    if ("badge" in item)
+      return filterCertificationByQuery(item, lowercaseQuery);
+    return filterPositionByQuery(item, lowercaseQuery);
+  }
+
+  return false;
 };
 
 /**
  * Filters values based on a set of selections.
  * Expects selectionSet to be a Set of lowercase strings.
  */
-export const filterBySelection = (values: string[], selectionSet: Set<string>) =>
+export const filterBySelection = (
+  values: string[],
+  selectionSet: Set<string>,
+) =>
   selectionSet.size === 0 ||
   values.some((value) => selectionSet.has(value.toLowerCase()));
+
+/**
+ * Specifically for area filtering, which applies to Projects, Positions, and Certifications.
+ */
+export const filterByArea = (areas: string[], selectionSet: Set<string>) =>
+  filterBySelection(areas, selectionSet);
diff --git a/src/types.ts b/src/types.ts
index 13b2021..0c24181 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -65,6 +65,8 @@ export interface Certification {
   badge: string;
   link: string;
   date: string;
+  skills?: string[];
+  areas?: string[];
 }
 
 export interface Duration {