diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index de8f1b692..26de2c5be 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,13 +1,14 @@
 {
-  "name": "frontend",
-  "version": "0.0.0",
+  "name": "owasp-nest-frontend",
+  "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
-      "version": "0.0.0",
+      "name": "owasp-nest-frontend",
+      "version": "0.0.1",
       "dependencies": {
+        "lucide-react": "^0.454.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       },
@@ -2725,6 +2726,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.454.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.454.0.tgz",
+      "integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 10ed4b510..7b24af132 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^0.454.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0bf01ee73..ff98bb71e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,7 +1,9 @@
+import Footer from "./components/Footer";
+
 function App() {
   return (
     <>
-      <h1 className="text-3xl font-bold underline">Hello from new OWASP Nest frontend!</h1>
+      <Footer/>
     </>
   );
 }
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
new file mode 100644
index 000000000..d3798a4bc
--- /dev/null
+++ b/frontend/src/components/Footer.tsx
@@ -0,0 +1,41 @@
+import { footerSections } from '../utils/constants';
+import { Section } from '../utils/constants';
+
+export default function Footer() {
+  return (
+    <footer className="border-t bg-slate-200 dark:bg-slate-800">
+      <div className="container px-4 py-4 md:py-8 text-slate-800 dark:text-slate-200">
+        <div className="grid gap-8 sm:grid-cols-2 md:grid-cols-4">
+          {footerSections.map((section: Section) => (
+            <div key={section.title} className="space-y-4">
+              <h3 className="text-lg font-semibold">{section.title}</h3>
+              <ul className="space-y-2 text-sm">
+                {section.links.map((link, index) => (
+                  <li key={index}>
+                    {link.isSpan ? (
+                      <span className="text-slate-600 dark:text-slate-400">{link.text}</span>
+                    ) : (
+                      <a
+                        className="text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100"
+                        href={link.href}
+                      >
+                        {link.text}
+                      </a>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="border-t pt-8">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:ml-[52%]">
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              © 2024 OWASP Nest. All rights reserved.
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
new file mode 100644
index 000000000..ca248371b
--- /dev/null
+++ b/frontend/src/utils/constants.ts
@@ -0,0 +1,45 @@
+export interface Link {
+    text: string;
+    href: string;
+    isSpan?: boolean;
+  }
+
+  export interface Section {
+    title: string;
+    links: Link[];
+  }
+
+  export const footerSections: Section[] = [
+    {
+      title: 'About OWASP',
+      links: [
+        { text: 'Our Mission', href: '#' },
+        { text: 'Team', href: '#' },
+        { text: 'Careers', href: '#' },
+      ],
+    },
+    {
+      title: 'Resources',
+      links: [
+        { text: 'Contribute', href: 'https://nest.owasp.dev/projects/contribute/' },
+        { text: 'Projects', href: 'https://nest.owasp.dev/projects/' },
+        { text: 'Chapters', href: 'https://nest.owasp.dev/chapters/' },
+      ],
+    },
+    {
+      title: 'Community',
+      links: [
+        { text: 'Committees', href: 'https://nest.owasp.dev/committees/' },
+        { text: 'Events', href: '#' },
+        { text: 'Forum', href: '#' },
+      ],
+    },
+    {
+      title: 'Contact',
+      links: [
+        { text: 'Locations', href: '#', isSpan: true },
+        { text: 'Support', href: '#' },
+        { text: 'Contact Us', href: 'https://owasp.org/contact/' },
+      ],
+    },
+  ];