diff --git a/src/app/layout.js b/src/app/layout.js
index b2653d0..780cb2c 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -17,7 +17,7 @@ export default function RootLayout({ children }) {
     <html lang="en">
       <body className={urbanist.className}>
         <Navigation />
-        <div className="w-full flex flex-col items-center justify-center">
+        <div className="w-full flex flex-col items-center justify-center mt-16 md:mt-[8vh]">
           {children}
         </div>
         <Footer />
diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
index 3252523..aa5dba0 100644
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -1,5 +1,88 @@
+"use client";
+import Navbar from "react-bootstrap/Navbar";
+import blueLogo from "../../public/assets/blueLogo.svg";
+import Link from "next/link";
+import Image from "next/image";
+import { navigation } from "../data/navigation";
+import Nav from "react-bootstrap/Nav";
+import { useState } from "react";
+import { NavDropdown } from "react-bootstrap";
+import { FaBars } from "react-icons/fa";
+
 const Navigation = () => {
-  return <div>Navigation</div>;
+  const [selected, setSelected] = useState("");
+
+  return (
+    <Navbar
+      collapseOnSelect
+      expand="md"
+      fixed="top"
+      className="w-full h-16 md:h-[8vh] flex pb-10 font-playfair !bg-white justify-between items-center"
+    >
+      <Navbar.Brand className="p-0 h-full">
+        <Link
+          onClick={() => setSelected("")}
+          href="/"
+          className="items-center flex ml-3 h-full"
+        >
+          <Image src={blueLogo} className="h-full" />
+        </Link>
+      </Navbar.Brand>
+      <Navbar.Toggle
+        className="list-unstyled !text-transparent border-0"
+        aria-controls="basic-navbar-nav"
+      >
+        <FaBars className="text-ewb-blue-200 text-xl" />
+      </Navbar.Toggle>
+      <Navbar.Collapse className="items-center md:justify-end justify-center">
+        <Nav className="mb-2 no-underline text-lg flex items-center gap-2 mr-4">
+          {navigation.map((item, index) => (
+            <div key={index}>
+              {item.sub.length > 0 ? (
+                <NavDropdown
+                  onClick={() => setSelected(item.name)}
+                  className="[&>*]:!border-0 [&>*]:!p-0 [&>*]:!m-0 [&>*]:!bg-transparent"
+                  title={
+                    <span
+                      className={`hover:cursor-pointer rounded-full mb-0 py-1 px-4 no-underline !text-black text-lg whitespace-nowrap !font-normal hover:!text-blue-600 duration-300 ${
+                        selected === item.name &&
+                        "!bg-ewb-blue-200 rounded-full text-white hover:!text-white"
+                      }`}
+                    >
+                      {item.name}
+                    </span>
+                  }
+                >
+                  {item.sub.map((country, index) => (
+                    <NavDropdown.Item
+                      key={index}
+                      className="text-white hover:!bg-ewb-green !bg-ewb-blue-200 first:!mt-5"
+                      href={"/projects" + country.link}
+                    >
+                      {country.name}
+                    </NavDropdown.Item>
+                  ))}
+                </NavDropdown>
+              ) : (
+                <Nav.Link
+                  as={Link}
+                  key={index}
+                  href={item.link}
+                  onClick={() => setSelected(item.name)}
+                  className={`hover:cursor-pointer rounded-full mb-0 py-0 px-4 no-underline !text-black text-lg whitespace-nowrap !font-normal hover:!text-blue-600 duration-300 ${
+                    selected === item.name &&
+                    "!bg-ewb-blue-200 rounded-full text-white hover:!text-white"
+                  }`}
+                >
+                  {item.name}
+                </Nav.Link>
+              )}
+            </div>
+          ))}
+        </Nav>
+      </Navbar.Collapse>
+    </Navbar>
+  );
 };
 
 export default Navigation;
diff --git a/src/data/navigation.js b/src/data/navigation.js
index ac8fbcc..6f4313f 100644
--- a/src/data/navigation.js
+++ b/src/data/navigation.js
@@ -1,31 +1,31 @@
 export const navigation = [
   {
     name: "ABOUT",
-    link: "about",
+    link: "/about",
     sub: [],
   },
   {
     name: "PROJECTS",
-    link: "projects",
+    link: "/projects",
     sub: [
-      { name: "Costa Rica", link: "costa-rica" },
-      { name: "Tanzania", link: "tanzania" },
+      { name: "Costa Rica", link: "/costa-rica" },
+      { name: "Tanzania", link: "/tanzania" },
       {
         name: "Water Quality and Filtration",
-        link: "water-quality-and-filtration",
+        link: "/water-quality-and-filtration",
       },
-      { name: "Robotics", link: "robotics" },
-      { name: "Air Quality System", link: "air-quality-system" },
+      { name: "Robotics", link: "/robotics" },
+      { name: "Air Quality System", link: "/air-quality-system" },
     ],
   },
   {
     name: "EVENTS",
-    link: "events",
+    link: "/events",
     sub: [],
   },
   {
     name: "BOARD",
-    link: "board",
+    link: "/board",
     sub: [],
   },
 ];
