diff --git a/package-lock.json b/package-lock.json
index e24c56e..a961618 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,11 +9,11 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.2.1",
-        "@fortawesome/free-brands-svg-icons": "^6.2.1",
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-brands-svg-icons": "^6.7.2",
         "@fortawesome/free-regular-svg-icons": "^6.2.1",
         "@fortawesome/free-solid-svg-icons": "^6.2.1",
-        "@fortawesome/react-fontawesome": "^0.2.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "@headlessui/react": "^1.7.2",
         "@mapbox/rehype-prism": "^0.8.0",
         "@mdx-js/loader": "^2.3.0",
@@ -85,29 +85,47 @@
       }
     },
     "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
-      "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
-      "hasInstallScript": true,
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "license": "MIT",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.2.1"
+        "@fortawesome/fontawesome-common-types": "6.7.2"
       },
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/fontawesome-svg-core/node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/free-brands-svg-icons": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.2.1.tgz",
-      "integrity": "sha512-L8l4MfdHPmZlJ72PvzdfwOwbwcCAL0vx48tJRnI6u1PJXh+j2f3yDoKyQgO3qjEsgD5Fr2tQV/cPP8F/k6aUig==",
-      "hasInstallScript": true,
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q==",
+      "license": "(CC-BY-4.0 AND MIT)",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.2.1"
+        "@fortawesome/fontawesome-common-types": "6.7.2"
       },
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/free-brands-svg-icons/node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/free-regular-svg-icons": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz",
@@ -133,9 +151,10 @@
       }
     },
     "node_modules/@fortawesome/react-fontawesome": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
-      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "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==",
+      "license": "MIT",
       "dependencies": {
         "prop-types": "^15.8.1"
       },
diff --git a/package.json b/package.json
index 6552e20..3b0700b 100644
--- a/package.json
+++ b/package.json
@@ -12,11 +12,11 @@
   "license": "ISC",
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-brands-svg-icons": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@headlessui/react": "^1.7.2",
     "@mapbox/rehype-prism": "^0.8.0",
     "@mdx-js/loader": "^2.3.0",
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index 910d199..0b34969 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import clsx from 'clsx'
+import Link from 'next/link';
+import clsx from 'clsx';
 
 function ChevronRightIcon(props) {
   return (
@@ -11,57 +11,81 @@ function ChevronRightIcon(props) {
         strokeLinejoin="round"
       />
     </svg>
-  )
+  );
 }
+
 export function Card({ as: Component = 'div', className, children }) {
   return (
     <Component
       className={clsx(className, 'group relative flex flex-col items-start')}
+      style={{
+        padding: '1rem',
+        margin: '0.5rem 0',
+      }}
     >
       {children}
     </Component>
-  )
+  );
 }
 
 Card.Link = function CardLink({ children, ...props }) {
   return (
     <>
-      <div className="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-100 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/80 sm:-inset-x-6 sm:rounded-2xl" />
+      <div
+        className="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-100 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/80 sm:-inset-x-6 sm:rounded-2xl"
+        style={{
+          marginTop: '0.5rem',
+        }}
+      />
       <Link {...props}>
         <span className="absolute -inset-y-6 -inset-x-4 sm:-inset-x-6 sm:rounded-2xl" />
         <span className="relative z-10">{children}</span>
       </Link>
     </>
-  )
-}
+  );
+};
 
 Card.Title = function CardTitle({ as: Component = 'h2', href, children }) {
   return (
-    <Component className="text-lg font-semibold font-mono tracking-tight text-zinc-800 dark:text-zinc-100">
+    <Component
+      className="text-lg font-semibold font-mono tracking-tight text-zinc-800 dark:text-zinc-100"
+      style={{
+        marginBottom: '0.5rem',
+      }}
+    >
       {href ? <Card.Link href={href}>{children}</Card.Link> : children}
     </Component>
-  )
-}
+  );
+};
 
 Card.Description = function CardDescription({ children }) {
   return (
-    <p className="relative z-10 mt-2 text-sm font-mono text-zinc-600 dark:text-zinc-400">
+    <p
+      className="relative z-10 mt-2 text-sm font-mono text-zinc-600 dark:text-zinc-400"
+      style={{
+        marginTop: '0.75rem',
+        lineHeight: '1.6',
+      }}
+    >
       {children}
     </p>
-  )
-}
+  );
+};
 
 Card.Cta = function CardCta({ children }) {
   return (
     <div
       aria-hidden="true"
       className="relative font-mono z-10 mt-4 flex items-center text-sm font-semibold text-[#00843D] dark:text-yellow-400"
+      style={{
+        marginTop: '1rem',
+      }}
     >
       {children}
       <ChevronRightIcon className="ml-1 h-4 w-4 stroke-current" />
     </div>
-  )
-}
+  );
+};
 
 Card.Eyebrow = function CardEyebrow({
   as: Component = 'p',
@@ -77,6 +101,9 @@ Card.Eyebrow = function CardEyebrow({
         'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500',
         decorate && 'pl-3.5'
       )}
+      style={{
+        marginBottom: '0.75rem',
+      }}
       {...props}
     >
       {decorate && (
@@ -89,5 +116,5 @@ Card.Eyebrow = function CardEyebrow({
       )}
       {children}
     </Component>
-  )
-}
+  );
+};
diff --git a/src/components/ContainerPattern.jsx b/src/components/ContainerPattern.jsx
index 03e0d63..f44b45a 100644
--- a/src/components/ContainerPattern.jsx
+++ b/src/components/ContainerPattern.jsx
@@ -1,12 +1,28 @@
-import clsx from 'clsx'
-
+import clsx from 'clsx';
 const styles = {
-  xs: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-4 lg:px-2',
-  sm: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-4 lg:max-w-4xl lg:px-12',
-  md: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-4 lg:max-w-6xl lg:px-8',
-  lg: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-4 lg:max-w-7xl lg:px-8',
-}
+  xs: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-6 lg:px-4',
+  sm: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-6 lg:max-w-4xl lg:px-14',
+  md: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-6 lg:max-w-6xl lg:px-10',
+  lg: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-6 lg:max-w-7xl lg:px-10',
+};
 
+// Updated ContainerPattern component
 export function ContainerPattern({ size = 'sm', className, ...props }) {
-  return <div className={clsx(styles[size], className)} {...props} />
+  return (
+    <div className={clsx(styles[size], className)} {...props} />
+  );
+}
+
+// Example usage for "Active Projects" button with custom styling
+export function ActiveProjectsButton() {
+  return (
+    <ContainerPattern
+      size="sm"
+      className="custom-active-projects"
+    >
+      <button className="btn-active-projects">
+        Active Projects
+      </button>
+    </ContainerPattern>
+  );
 }
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index a036da7..0565b1b 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,9 +1,9 @@
 import Link from 'next/link'
-
 import { Container } from '@/components/Container'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
-import { faDiscord, faGithub, faGitlab, faTwitter } from '@fortawesome/free-brands-svg-icons'
+import { faDiscord, faGithub, faGitlab } from '@fortawesome/free-brands-svg-icons'
+import { faXTwitter } from '@fortawesome/free-brands-svg-icons' // Import faXTwitter
 
 function NavLink({ href, children }) {
   return (
@@ -33,20 +33,20 @@ export function Footer() {
                 &copy; 2016-2023 AOSSIE. All rights reserved.
               </p>
               <div className="flex gap-6">
-                <Link aria-label="Contact by Mail" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:aossie.oss@gmail.com'>
-                  <FontAwesomeIcon icon={faEnvelope} size='xl' />
+                <Link aria-label="Contact by Mail" className="text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition" href="mailto:aossie.oss@gmail.com">
+                  <FontAwesomeIcon icon={faEnvelope} size="xl" />
                 </Link>
-                <Link aria-label="Follow on GitLab" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://gitlab.com/aossie'>
-                  <FontAwesomeIcon icon={faGitlab} size='xl' />
+                <Link aria-label="Follow on GitLab" className="text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition" href="https://gitlab.com/aossie">
+                  <FontAwesomeIcon icon={faGitlab} size="xl" />
                 </Link>
-                <Link aria-label="Follow on GitHub" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org'>
-                  <FontAwesomeIcon icon={faGithub} size='xl' />
+                <Link aria-label="Follow on GitHub" className="text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition" href="https://github.com/AOSSIE-Org">
+                  <FontAwesomeIcon icon={faGithub} size="xl" />
                 </Link>
-                <Link aria-label="Join on Discord" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.com/invite/6mFZ2S846n'>
-                  <FontAwesomeIcon icon={faDiscord} size='xl' />
+                <Link aria-label="Join on Discord" className="text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition" href="https://discord.com/invite/6mFZ2S846n">
+                  <FontAwesomeIcon icon={faDiscord} size="xl" />
                 </Link>
-                <Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
-                  <FontAwesomeIcon icon={faTwitter} size='xl' />
+                <Link aria-label="Follow on X" className="text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition" href="https://x.com/aossie_org">
+                  <FontAwesomeIcon icon={faXTwitter} size="xl" /> {/* Use faXTwitter here */}
                 </Link>
               </div>
             </div>
diff --git a/src/components/SectionHeading.jsx b/src/components/SectionHeading.jsx
index 7a61600..e8a8ced 100644
--- a/src/components/SectionHeading.jsx
+++ b/src/components/SectionHeading.jsx
@@ -1,4 +1,4 @@
-import clsx from 'clsx'
+import clsx from 'clsx';
 
 export function SectionHeading({ number, children, className, ...props }) {
   return (
@@ -7,14 +7,25 @@ export function SectionHeading({ number, children, className, ...props }) {
         className,
         'inline-flex items-center rounded-full py-1 px-4 text-[#00843D] dark:text-yellow-400 ring-1 ring-inset ring-[#00843D] dark:ring-yellow-400'
       )}
+      style={{
+        marginBottom: '1rem', // Adds spacing below the heading for better layout flow
+        paddingLeft: '1.25rem', // Slight adjustment for better content alignment
+        paddingRight: '1.25rem',
+      }}
       {...props}
     >
-      <span className="font-mono text-base font-semibold" aria-hidden="true">
+      <span
+        className="font-mono text-base font-semibold"
+        aria-hidden="true"
+        style={{
+          marginRight: '0.75rem', // Space between number and content
+        }}
+      >
+        {number}
       </span>
-      {/* <span className="ml-3 h-3.5 w-px bg-blue-600/20 dark:bg-white" /> */}
       <span className="ml-3 text-base font-semibold font-mono tracking-tighter">
         {children}
       </span>
     </h2>
-  )
+  );
 }
diff --git a/src/helper/projects.js b/src/helper/projects.js
index 6d8689a..407baf1 100644
--- a/src/helper/projects.js
+++ b/src/helper/projects.js
@@ -5,8 +5,6 @@ import SSSLogo from '@/images/SSS.png'
 import ResonateLogo from '@/images/Resonate.png'
 import PictoPy from '@/images/Pictopy.png'
 
-
-
 // data
 const projects = [
   {
@@ -53,21 +51,21 @@ const projects = [
   {
     name: 'OpenChat',
     description:
-      'a decentralised platform for secure and private messaging and file sharing built on top of blockchain',
+      'A decentralised platform for secure and private messaging and file sharing built on top of blockchain',
     link: { href: '#', label: 'OpenChat' },
     logo: DefaultLogo,
   },
   {
     name: 'Resonate',
     description:
-      'With the rising popularity of social voice platforms such as Clubhouse, it is high time for an Open Source alternative. A platform like this would not only enhance credibility within the open-source community but also attract more users and foster growth.  ',
+      'With the rising popularity of social voice platforms such as Clubhouse, it is high time for an Open Source alternative. A platform like this would not only enhance credibility within the open-source community but also attract more users and foster growth.',
     link: { href: 'https://github.com/AOSSIE-Org/Resonate', label: 'Resonate' },
     logo: ResonateLogo,
   },
   {
     name: 'Social Street Smart',
     description:
-      'With the adevent of Internet, the problems faced by the people have also grown. These include abusive languages.',
+      'With the advent of the Internet, the problems faced by the people have also grown. These include abusive languages.',
     link: {
       href: 'https://github.com/AOSSIE-Org/Social-Street-Smart',
       label: 'Social-Street-Smart',
@@ -76,5 +74,4 @@ const projects = [
   },
 ]
 
-
 export default projects
diff --git a/src/pages/apply.jsx b/src/pages/apply.jsx
index 3bbddf4..e097b57 100644
--- a/src/pages/apply.jsx
+++ b/src/pages/apply.jsx
@@ -1,7 +1,6 @@
 import Head from 'next/head'
 import Image from 'next/image'
 import Link from 'next/link'
-
 import { Container } from '@/components/Container'
 import { TimelineElement } from '@/components/TimelineElement'
 import GSoC from '@/images/logo.svg'
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 2193d69..eed0658 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -2,7 +2,6 @@ import Head from 'next/head'
 import Link from 'next/link'
 import Image from 'next/image'
 import { useState, useEffect } from 'react'
-
 import { Container } from '@/components/Container'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
diff --git a/src/pages/projects.jsx b/src/pages/projects.jsx
index 7156fbc..f8fa525 100644
--- a/src/pages/projects.jsx
+++ b/src/pages/projects.jsx
@@ -1,10 +1,10 @@
-import Image from 'next/image'
-import Head from 'next/head'
+import Image from 'next/image';
+import Head from 'next/head';
 
-import { Container } from '@/components/Container'
-import { SectionHeading } from '@/components/SectionHeading'
-import { Card } from '@/components/Card'
-import projects from '@/helper/projects'
+import { Container } from '@/components/Container';
+import { SectionHeading } from '@/components/SectionHeading';
+import { Card } from '@/components/Card';
+import projects from '@/helper/projects';
 
 function LinkIcon(props) {
   return (
@@ -14,44 +14,48 @@ function LinkIcon(props) {
         fill="currentColor"
       />
     </svg>
-  )
+  );
 }
 
 export default function Projects() {
   return (
     <>
       <Head>
-        <title>
-          Projects
-        </title>
-        <meta
-          name="description"
-          content="About AOSSIE's Projects"
-        />
+        <title>Projects</title>
+        <meta name="description" content="About AOSSIE's Projects" />
       </Head>
-      <Container className="mt-20 mb-28">
-        <div className="mt-5">
-          <p className='text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7'>Our Projects, where we showcase our tech wizardry and code-slinging skills! <br></br> Our portfolio is a treasure trove of open-source gems, featuring projects in a variety of languages and areas. Take a peek and see how we&apos;re making a difference with our technical spells.</p>
+      <Container className="mt-10 mb-20 sm:mt-16 lg:mt-20">
+        <div className="mt-5 sm:mt-8">
+          <p className="text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7">
+            Our Projects, where we showcase our tech wizardry and code-slinging skills! <br />
+            Our portfolio is a treasure trove of open-source gems, featuring projects in a variety of languages and areas.
+            Take a peek and see how we&apos;re making a difference with our technical spells.
+          </p>
         </div>
-        <div className='mt-16'>
-          {/* <h1 className="text-4xl font-mono font-extrabold tracking-tighter text-zinc-800 dark:text-zinc-100">
-            Active Projects
-          </h1> */}
+        <div className="mt-12 sm:mt-16">
           <SectionHeading>Active Projects</SectionHeading>
-          <p className='text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7 mt-3'>The following projects are currently actively maintained and mentors are available!</p>
-          <ul role="list" className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3 mt-12 mb-16">
+          <p className="text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7 mt-3">
+            The following projects are currently actively maintained and mentors are available!
+          </p>
+          <ul
+            role="list"
+            className="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2 lg:grid-cols-3 mt-10 mb-16"
+          >
             {projects.map((project) => (
               <Card as="li" key={project.name}>
                 <div className="relative z-10 flex h-20 w-20 items-center justify-center rounded-lg bg-white shadow-md shadow-zinc-800/20 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-white/10 dark:shadow-white/10">
                   <Image
                     src={project.logo}
                     alt="Project Logo"
-                    className='p-2'
+                    className="p-2"
                     unoptimized
                   />
                 </div>
                 <h2 className="mt-6 text-2xl font-semibold font-mono text-zinc-800 dark:text-zinc-100">
-                  <Card.Link href={project.link.href}>{project.name}</Card.Link>
+                  {/* Add cursor-pointer to the Card.Link */}
+                  <Card.Link href={project.link.href} className="cursor-pointer">
+                    {project.name}
+                  </Card.Link>
                 </h2>
                 <Card.Description>{project.description}</Card.Description>
                 <p className="relative z-10 mt-6 flex text-md font-semibold font-mono text-zinc-600 transition group-hover:text-[#00843D] dark:group-hover:text-yellow-400 dark:text-zinc-200">
@@ -61,35 +65,8 @@ export default function Projects() {
               </Card>
             ))}
           </ul>
-
-          {/* <h1 className="text-4xl font-mono font-extrabold tracking-tighter text-zinc-800 dark:text-zinc-100">
-            InActive Projects
-          </h1> */}
-          {/* <SectionHeading>Past Projects</SectionHeading>
-          <p className='text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7 mt-3'>The following projects are currently inactive. If you are brave and independent, you are welcome and even encouraged to contribute to these projects as well. However, help from mentors will be significantly reduced.</p>
-          <ul role="list" className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3 mt-12 mb-16">
-            {projects.map((project) => (
-              <Card as="li" key={project.name}>
-                <div className="relative z-10 flex h-20 w-20 items-center justify-center rounded-lg bg-white shadow-md shadow-zinc-800/20 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-white/10 dark:shadow-white/10">
-                  <Image
-                    src={project.logo}
-                    alt="Project Logo"
-                    unoptimized
-                  />
-                </div>
-                <h2 className="mt-6 text-2xl font-semibold font-mono text-zinc-800 dark:text-zinc-100">
-                  <Card.Link href={project.link.href}>{project.name}</Card.Link>
-                </h2>
-                <Card.Description>{project.description}</Card.Description>
-                <p className="relative z-10 mt-6 flex text-md font-semibold font-mono text-zinc-600 transition group-hover:text-[#00843D] dark:group-hover:text-yellow-400 dark:text-zinc-200">
-                  <LinkIcon className="h-6 w-6 flex-none scale-110" />
-                  <span className="ml-2">{project.link.label}</span>
-                </p>
-              </Card>
-            ))}
-          </ul> */}
         </div>
       </Container>
     </>
-    )
+  );
 }