diff --git a/package-lock.json b/package-lock.json
index f2c07b9..a19ea54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@types/node": "^16.18.126",
         "@types/react-dom": "^19.1.5",
         "dayjs": "^1.11.13",
+        "history": "^5.3.0",
         "react": "^19.1.0",
         "react-datepicker": "^8.3.0",
         "react-dom": "^19.1.0",
@@ -8944,6 +8945,15 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
diff --git a/src/App.tsx b/src/App.tsx
index b98f85f..1b8982f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,26 +3,30 @@ import "./App.scss";
 import { Link, Route, BrowserRouter as Router, Routes } from "react-router";
 import PhotoOfTheDay from "./Components/photoOfTheDay/photoOfTheDay";
 import ProfilePage from "./pages/Profile/ProfilePage";
+import NavBar from "./Components/AddNavBar/NavBar";
 
 function App() {
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<PhotoOfTheDay />} />
-        <Route path="/profile" element={<ProfilePage />} />
-        <Route
-          path="*"
-          element={
-            <div>
-              Sorry, that page does not exist, try these:
+    <div>
+      <Router>
+        <NavBar />
+        <Routes>
+          <Route path="/" element={<PhotoOfTheDay />} />
+          <Route path="/profile" element={<ProfilePage />} />
+          <Route
+            path="*"
+            element={
               <div>
-                <Link to="/profile">Profile Page</Link>
+                Sorry, that page does not exist, try these:
+                <div>
+                  <Link to="/profile">Profile Page</Link>
+                </div>
               </div>
-            </div>
-          }
-        />
-      </Routes>
-    </Router>
+            }
+          />
+        </Routes>
+      </Router>
+    </div>
   );
 }
 
diff --git a/src/Components/AddNavBar/Images/astronautcartoon.png b/src/Components/AddNavBar/Images/astronautcartoon.png
new file mode 100644
index 0000000..d170750
Binary files /dev/null and b/src/Components/AddNavBar/Images/astronautcartoon.png differ
diff --git a/src/Components/AddNavBar/Images/cartoon earth.png b/src/Components/AddNavBar/Images/cartoon earth.png
new file mode 100644
index 0000000..4ff19f2
Binary files /dev/null and b/src/Components/AddNavBar/Images/cartoon earth.png differ
diff --git a/src/Components/AddNavBar/NavBar.scss b/src/Components/AddNavBar/NavBar.scss
new file mode 100644
index 0000000..3fb0d28
--- /dev/null
+++ b/src/Components/AddNavBar/NavBar.scss
@@ -0,0 +1,60 @@
+@import "../../Styles/GlobalStyles.scss";
+
+ body {
+    background-color: $blueBackground;
+    font-family: $PublicSans;
+ }
+
+.navBarContainer {
+    display: flex;
+    background: $blueBackground;
+    justify-content: space-between;
+
+}
+
+.homeButton  {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.profilePageButton {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  
+}
+
+#astroButton {
+    width: 5vw;
+    min-width: 50px;
+
+}
+
+#earthButton {
+    width: 5vw;
+    min-width: 50px;
+    
+}
+
+a {
+    margin: 15px 10px 10px 10px;
+    color: $orangeBackground;
+    padding: 2.5px 20px;
+    border: solid 2px $orangeBackground;
+    text-decoration: none;
+    border-radius: 25px;
+}
+
+
+
+a:hover {
+    
+    color: $whiteFontColor;
+    box-shadow: 0px 0px 3px 3px $greyBackground;
+}
+
+a:active {
+     box-shadow: none;
+     color: $orangeBackground;
+}
diff --git a/src/Components/AddNavBar/NavBar.spec.tsx b/src/Components/AddNavBar/NavBar.spec.tsx
new file mode 100644
index 0000000..11ebb15
--- /dev/null
+++ b/src/Components/AddNavBar/NavBar.spec.tsx
@@ -0,0 +1,18 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import NavBar from "./NavBar";
+import { BrowserRouter } from "react-router";
+
+describe(NavBar, () => {
+  it("Should change current location to profile when link is clicked", () => {
+    render(
+      <BrowserRouter>
+        <NavBar />
+      </BrowserRouter>,
+    );
+    const linkProfile = screen.getByText("Profile");
+    userEvent.click(linkProfile);
+  });
+});
diff --git a/src/Components/AddNavBar/NavBar.tsx b/src/Components/AddNavBar/NavBar.tsx
new file mode 100644
index 0000000..82779dd
--- /dev/null
+++ b/src/Components/AddNavBar/NavBar.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import "./NavBar.scss";
+import { Link } from "react-router";
+import imageAstro from "./Images/astronautcartoon.png";
+import imageEarth from "./Images/cartoon earth.png";
+
+export default function NavBar() {
+  return (
+    <div>
+      <header className="navBarHeader">
+        <nav className="navBarContainer">
+          <div>
+            <Link to="/" className="homeButton" id="homeLink">
+              <img src={imageEarth} alt="imageEarth" id="earthButton" />
+              Home
+            </Link>
+          </div>
+          <div>
+            <Link to="/profile" className="profilePageButton" id="profileLink">
+              <img
+                src={imageAstro}
+                alt="cartoon astronaut illustration"
+                id="astroButton"
+              />
+              Profile
+            </Link>
+          </div>
+        </nav>
+      </header>
+    </div>
+  );
+}
diff --git a/src/custom.d.ts b/src/custom.d.ts
new file mode 100644
index 0000000..66b2456
--- /dev/null
+++ b/src/custom.d.ts
@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const value: string;
+  export default value;
+}
diff --git a/tsconfig.json b/tsconfig.json
index a273b0c..ba5ff3c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,6 +21,6 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "src",
   ]
 }