diff --git a/app/[lang]/projects/page.tsx b/app/[lang]/projects/page.tsx
index 1b448cf5..8d3efb0a 100644
--- a/app/[lang]/projects/page.tsx
+++ b/app/[lang]/projects/page.tsx
@@ -1,8 +1,9 @@
 import { Suspense } from "react"
 import { Metadata } from "next"
 
+import { AppContent } from "@/components/ui/app-content"
+import { Label } from "@/components/ui/label"
 import { Divider } from "@/components/divider"
-import { PageHeader } from "@/components/page-header"
 import ProjectFiltersBar from "@/components/project/project-filters-bar"
 import { ProjectList } from "@/components/project/project-list"
 import { ProjectResultBar } from "@/components/project/project-result-bar"
@@ -19,22 +20,24 @@ export default async function ProjectsPage({ params: { lang } }: any) {
 
   return (
     <Divider.Section>
-      <PageHeader
-        title={t("title")}
-        subtitle={t("subtitle")}
-        showDivider={false}
-      >
+      <div className="bg-cover-gradient">
+        <AppContent className="flex flex-col gap-4 py-10">
+          <Label.PageTitle label={t("title")} />
+          <h6 className="font-sans text-base font-normal text-tuatara-950 md:text-[18px] md:leading-[27px] md:max-w-[700px]">
+            {t("subtitle")}
+          </h6>
+        </AppContent>
+      </div>
+
+      <AppContent className="flex flex-col gap-10 py-10">
         <Suspense fallback={<div>Loading...</div>}>
-          <ProjectFiltersBar lang={lang} />
+          <div className="flex flex-col gap-4">
+            <ProjectFiltersBar lang={lang} />
+            <ProjectResultBar lang={lang} />
+          </div>
         </Suspense>
-      </PageHeader>
-
-      <div className="w-full bg-white pb-28">
-        <div className="container flex flex-col py-8 gap-14">
-          <ProjectResultBar lang={lang} />
-          <ProjectList lang={lang} />
-        </div>
-      </div>
+        <ProjectList lang={lang} />
+      </AppContent>
     </Divider.Section>
   )
 }
diff --git a/app/i18n/locales/en/common.json b/app/i18n/locales/en/common.json
index ee75f4b4..d3811396 100644
--- a/app/i18n/locales/en/common.json
+++ b/app/i18n/locales/en/common.json
@@ -88,8 +88,9 @@
   "connectWithUsOnPlatform": "Connect with us on {{platform}}",
   "addResource": "Add a resource",
   "notCurrentlyActive": "Not Currently Active",
+  "inactive": "Inactive",
   "joinOurDiscord": "Join our discord",
   "prevBrandImage": "Previous branding",
   "editThisPage": "Edit this page",
   "contents": "Contents"
-}
\ No newline at end of file
+}
diff --git a/app/i18n/locales/en/projects-page.json b/app/i18n/locales/en/projects-page.json
index a69f3232..3bb03676 100644
--- a/app/i18n/locales/en/projects-page.json
+++ b/app/i18n/locales/en/projects-page.json
@@ -1,4 +1,4 @@
 {
-  "title": "Explore the library",
-  "subtitle": "PSE supports projects working on theoretical cryptography research, protocol development, open source tooling, experimental applications, and more."
-}
\ No newline at end of file
+  "title": "Explore our Project Library",
+  "subtitle": "Everything PSE works on is public and open source. All of our projects, whether research or development, are resources you can learn from and build with."
+}
diff --git a/components/project/project-card.tsx b/components/project/project-card.tsx
index 1533af9e..f66d2735 100644
--- a/components/project/project-card.tsx
+++ b/components/project/project-card.tsx
@@ -28,12 +28,23 @@ const TagsIconMapping: Record<string, any> = {
   research: <Icons.readme height={12} width={12} />,
 }
 
+const tagCardVariants = cva(
+  "text-xs font-sans text-tuatara-950 rounded-[3px] py-[2px] px-[6px]",
+  {
+    variants: {
+      variant: {
+        primary: "bg-[#D8FEA8]",
+        secondary: "bg-[#C2E8F5]",
+      },
+    },
+  }
+)
 const projectCardVariants = cva(
-  "flex cursor-pointer flex-col overflow-hidden rounded-lg transition duration-150 ease-in hover:scale-105",
+  "flex cursor-pointer flex-col overflow-hidden rounded-lg transition duration-200 ease-in border border-transparent hover:border-anakiwa-500",
   {
     variants: {
       showLinks: {
-        true: "min-h-[450px]",
+        true: "min-h-[280px]",
         false: "min-h-[200px]",
       },
       border: {
@@ -54,20 +65,21 @@ export default function ProjectCard({
   const { t } = useTranslation(lang, "common")
   const router = useRouter()
 
-  const { id, image, links, name, tags, imageAlt, projectStatus } = project
+  const { id, image, links, name, tags, imageAlt, projectStatus, cardTags } =
+    project ?? {}
 
   const projectNotActive = projectStatus !== "active"
   const { content: projectContent } = getProjectById(id, lang)
 
   return (
-    <div
-      className={cn(projectCardVariants({ showLinks, border, className }))}
-      onClick={() => {
-        router.push(`/projects/${id}`)
-      }}
-    >
+    <div className={cn(projectCardVariants({ showLinks, border, className }))}>
       {showBanner && (
-        <div className="relative flex flex-col border-b border-black/10">
+        <div
+          className="relative flex flex-col border-b border-black/10"
+          onClick={() => {
+            router.push(`/projects/${id}`)
+          }}
+        >
           <Image
             src={`/project-banners/${image ? image : "fallback.webp"}`}
             alt={`${name} banner`}
@@ -82,34 +94,52 @@ export default function ProjectCard({
           )}
         </div>
       )}
-      <div className="flex flex-col justify-between h-full p-4 bg-white rounded-b-lg">
+      <div className="flex flex-col justify-between h-full gap-8 p-4 bg-white rounded-b-lg">
         <div className="flex flex-col justify-start gap-2">
-          <h1 className="text-xl font-bold text-black">{name}</h1>
+          <h1 className="text-2xl font-bold leading-7 text-black">{name}</h1>
           {projectContent?.tldr && (
-            <div className="flex flex-col gap-4 h-28">
-              <p className="text-slate-900/80">{projectContent?.tldr}</p>
+            <div className="flex flex-col h-24 gap-4">
+              <p className="text-slate-900/80 line-clamp-4">
+                {projectContent?.tldr}
+              </p>
             </div>
           )}
         </div>
-        <div className="flex justify-between mt-auto">
-          {showLinks && (
-            <div className="flex items-center justify-start gap-3">
-              {Object.entries(links ?? {})?.map(([website, url], index) => {
-                return (
-                  <ProjectLink
-                    key={index}
-                    url={url}
-                    website={website as ProjectLinkWebsite}
-                  />
-                )
-              })}
-            </div>
-          )}
+        <div className="flex flex-col gap-2">
           {projectNotActive && (
-            <span className="ml-auto text-sm font-medium italic leading-[21px] text-tuatara-400">
-              {t("notCurrentlyActive")}
+            <span className="text-sm font-medium italic leading-[21px] text-tuatara-400">
+              {t("inactive")}
             </span>
           )}
+          <div className="flex justify-between ">
+            {showLinks && (
+              <div className="flex items-center justify-start gap-3">
+                {Object.entries(links ?? {})?.map(([website, url], index) => {
+                  return (
+                    <ProjectLink
+                      key={index}
+                      url={url}
+                      website={website as ProjectLinkWebsite}
+                    />
+                  )
+                })}
+              </div>
+            )}
+            {cardTags && (
+              <div className="flex items-center gap-1">
+                {cardTags?.primary && (
+                  <div className={tagCardVariants({ variant: "primary" })}>
+                    {cardTags?.primary}
+                  </div>
+                )}
+                {cardTags?.secondary && (
+                  <div className={tagCardVariants({ variant: "secondary" })}>
+                    {cardTags?.secondary}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/project/project-filters-bar.tsx b/components/project/project-filters-bar.tsx
index bf1afba5..ff23f84b 100644
--- a/components/project/project-filters-bar.tsx
+++ b/components/project/project-filters-bar.tsx
@@ -127,6 +127,9 @@ export default function ProjectFiltersBar({ lang }: LangProps["params"]) {
   const searchParams = useSearchParams()
   const [searchQuery, setSearchQuery] = useState("")
   const [filterCount, setFilterCount] = useState(0)
+  const [activeItem, setActiveItem] = useState<string | null>(
+    ProjectSections?.[0]
+  )
 
   const { filters, toggleFilter, queryString, activeFilters, onFilterProject } =
     useProjectFiltersState((state) => state)
@@ -296,40 +299,62 @@ export default function ProjectFiltersBar({ lang }: LangProps["params"]) {
           </FilterWrapper>
         </div>
       </Modal>
-      <div className="flex flex-col gap-6">
-        <div className="grid items-center justify-between grid-cols-1 gap-3 md:grid-cols-5 md:gap-12">
-          <div className="col-span-1 grid grid-cols-[1fr_auto] gap-2 md:col-span-3 md:gap-3">
-            <Input
-              onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                setSearchQuery(e?.target?.value)
-              }
-              value={searchQuery}
-              placeholder={t("searchProjectPlaceholder")}
-            />
-            <div className="flex items-center gap-3">
-              <Badge value={filterCount}>
-                <Button
-                  onClick={() => setShowModal(true)}
-                  variant="white"
-                  className={cn({
-                    "border-2 border-anakiwa-950": filterCount > 0,
-                  })}
+      <div className="flex flex-col gap-4">
+        <nav className="container px-4 mx-auto">
+          <ul className="flex space-x-6">
+            {ProjectSections.map((key) => {
+              return (
+                <div
+                  key={key}
+                  className={cn(
+                    "relative block px-2 py-1 text-sm font-medium uppercase transition-colors cursor-pointer hover:text-primary",
+                    activeItem === key
+                      ? "text-sky-400 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-sky-400"
+                      : ""
+                  )}
+                  onClick={() => setActiveItem(key)}
                 >
-                  <div className="flex items-center gap-2">
-                    <Image src={FiltersIcon} alt="filter icon" />
-                    <span className="hidden md:block">{t("filters")}</span>
-                  </div>
-                </Button>
-              </Badge>
-              <button
-                disabled={!hasActiveFilters}
-                onClick={clearAllFilters}
-                className="hidden bg-transparent cursor-pointer opacity-85 text-primary hover:opacity-100 disabled:pointer-events-none disabled:opacity-50 md:block"
-              >
-                <div className="flex items-center gap-2 border-b-2 border-black">
-                  <span className="text-sm font-medium">{t("clearAll")}</span>
+                  {key}
                 </div>
-              </button>
+              )
+            })}
+          </ul>
+        </nav>
+        <div className="flex flex-col gap-6">
+          <div className="grid items-center justify-between grid-cols-1 gap-3 md:grid-cols-5 md:gap-12">
+            <div className="col-span-1 grid grid-cols-[1fr_auto] gap-2 md:col-span-3 md:gap-3">
+              <Input
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  setSearchQuery(e?.target?.value)
+                }
+                value={searchQuery}
+                placeholder={t("searchProjectPlaceholder")}
+              />
+              <div className="flex items-center gap-3">
+                <Badge value={filterCount}>
+                  <Button
+                    onClick={() => setShowModal(true)}
+                    variant="white"
+                    className={cn({
+                      "border-2 border-anakiwa-950": filterCount > 0,
+                    })}
+                  >
+                    <div className="flex items-center gap-2">
+                      <Image src={FiltersIcon} alt="filter icon" />
+                      <span className="hidden md:block">{t("filters")}</span>
+                    </div>
+                  </Button>
+                </Badge>
+                <button
+                  disabled={!hasActiveFilters}
+                  onClick={clearAllFilters}
+                  className="hidden bg-transparent cursor-pointer opacity-85 text-primary hover:opacity-100 disabled:pointer-events-none disabled:opacity-50 md:block"
+                >
+                  <div className="flex items-center gap-2 border-b-2 border-black">
+                    <span className="text-sm font-medium">{t("clearAll")}</span>
+                  </div>
+                </button>
+              </div>
             </div>
           </div>
         </div>
diff --git a/components/project/project-link.tsx b/components/project/project-link.tsx
index be9243e1..1d65f7a3 100644
--- a/components/project/project-link.tsx
+++ b/components/project/project-link.tsx
@@ -24,6 +24,7 @@ export function ProjectLink({ website, url }: ProjectLinkProps) {
       }}
       target="_blank"
       rel="noopener noreferrer"
+      className="text-lg"
     >
       {icon}
     </a>
diff --git a/components/project/project-links.tsx b/components/project/project-links.tsx
index e42547f5..b55a1238 100644
--- a/components/project/project-links.tsx
+++ b/components/project/project-links.tsx
@@ -3,9 +3,23 @@ import { RiTelegramLine as TelegramIcon } from "react-icons/ri"
 import { Icons } from "../icons"
 
 export const ProjectLinkIconMap: Record<string, any> = {
-  github: <Icons.gitHub size={16} />,
-  website: <Icons.globe />,
-  twitter: <Icons.twitter size={18} />,
-  telegram: <TelegramIcon size={16} />,
-  discord: <Icons.discord size={16} />,
+  github: (
+    <Icons.gitHub size={18} className="duration-200 hover:text-anakiwa-500" />
+  ),
+  website: (
+    <Icons.globe
+      width={22}
+      height={22}
+      className="duration-200 hover:text-anakiwa-500"
+    />
+  ),
+  twitter: (
+    <Icons.twitter size={22} className="duration-200 hover:text-anakiwa-500" />
+  ),
+  telegram: (
+    <TelegramIcon size={22} className="duration-200 hover:text-anakiwa-500" />
+  ),
+  discord: (
+    <Icons.discord size={20} className="duration-200 hover:text-anakiwa-500" />
+  ),
 }
diff --git a/components/project/project-list.tsx b/components/project/project-list.tsx
index 284860e7..3167ffdc 100644
--- a/components/project/project-list.tsx
+++ b/components/project/project-list.tsx
@@ -9,6 +9,7 @@ import { cva } from "class-variance-authority"
 import { LangProps } from "@/types/common"
 import {
   ProjectSection,
+  ProjectSectionDescriptionMapping,
   ProjectSectionLabelMapping,
   ProjectSections,
 } from "@/lib/types"
@@ -114,9 +115,9 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
   if (noItems) return <NoResults lang={lang} />
 
   return (
-    <div className="relative grid grid-cols-1 items-start justify-between gap-8 md:grid-cols-[1fr_200px] md:gap-10">
-      <div className="flex flex-col gap-10 md:gap-20">
-        {ProjectSections.map((section) => {
+    <div className="relative grid items-start justify-between grid-cols-1">
+      <div className="flex flex-col">
+        {ProjectSections.map((section, index) => {
           const sectionProjects =
             projects.filter(
               (project) =>
@@ -127,9 +128,13 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
 
           const sectionTitle =
             ProjectSectionLabelMapping[section as ProjectSection]
+          const sectionDescription =
+            ProjectSectionDescriptionMapping[section as ProjectSection]
 
           if (!hasProjectsForSection) return null
 
+          const showTitle = ["archived"].includes(section)
+
           return (
             <div
               key={section}
@@ -140,13 +145,19 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
               <div
                 className={cn(
                   "flex w-full flex-col",
-                  hasProjectsForSection ? "gap-6 md:gap-10" : "gap-2"
+                  hasProjectsForSection ? "gap-6 md:gap-10" : "gap-2",
+                  showTitle ? "pt-[120px]" : index > 0 ? "pt-10" : ""
                 )}
               >
-                <div className="overflow-hidden">
-                  <h3 className={cn(sectionTitleClass())}>{sectionTitle}</h3>
-                </div>
-                <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3 3xl:grid-cols-4">
+                {showTitle && (
+                  <div className="flex flex-col gap-6 overflow-hidden">
+                    <h3 className={cn(sectionTitleClass())}>{sectionTitle}</h3>
+                    <span className="font-sans text-base italic text-tuatara-950">
+                      {sectionDescription}
+                    </span>
+                  </div>
+                )}
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-x-6 md:gap-y-10 lg:grid-cols-4">
                   {sectionProjects.map((project) => (
                     <ProjectCard
                       key={project?.id}
@@ -164,10 +175,7 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
         })}
       </div>
 
-      <div
-        id="sidebar"
-        className="sticky hidden p-8 top-20 bg-white/30 md:block"
-      >
+      <div id="sidebar" className="sticky hidden p-8 top-20 bg-white/30">
         <div className="flex flex-col gap-4">
           <h6 className="text-lg font-bold font-display text-tuatara-700">
             {t("onThisPage")}
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 39c278da..61d2e266 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const inputVariants = cva(
-  "py-2 px-4 text-anakiwa-950 transition-colors duration-100 animate border-[1.5px] rounded-md focus:ring-0 border-tuatara-200 focus-visible:border-2 focus-visible:border-tuatara-950 bg-zinc-50 focus-visible:ring-0 focus-visible:none focus-visible:outline-none placeholder-anakiwa-950/50",
+  "py-2 px-4 text-anakiwa-950 transition-colors duration-100 animate border-[1.5px] rounded-md focus:ring-0 border-tuatara-200 focus-visible:border-2 focus-visible:border-tuatara-950 bg-zinc-50 focus-visible:ring-0 focus-visible:none focus-visible:outline-none placeholder-anakiwa-950",
   {
     variants: {
       size: {
diff --git a/lib/types.ts b/lib/types.ts
index 08d87ac2..01d56132 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -24,6 +24,15 @@ export const ProjectSectionLabelMapping: Record<ProjectSection, string> = {
   collaboration: "Collaborations",
   archived: "Archived",
 }
+
+export const ProjectSectionDescriptionMapping: Record<ProjectSection, string> =
+  {
+    pse: "",
+    grant: "",
+    collaboration: "",
+    archived:
+      "The projects in our archive are not currently being worked on by PSE, but we encourage everyone to check out their findings and continue experimentation!",
+  }
 export const ProjectStatusLabelMapping: Record<ProjectStatus, string> = {
   active: "Active",
   inactive: "Not Currently Active",
@@ -97,4 +106,8 @@ export interface ProjectInterface {
   projectStatus: ProjectStatus
   tags?: ProjectTags
   extraLinks?: ActionLinkType
+  cardTags: {
+    primary?: string
+    secondary?: string
+  }
 }