diff --git a/src/components/shared/NavBar.tsx b/src/components/shared/NavBar.tsx
index 6c6096f..1aeb74b 100644
--- a/src/components/shared/NavBar.tsx
+++ b/src/components/shared/NavBar.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import styles from "css/shared/NavBar.module.css";
-import personLogo from "../assets/img/person_logo.png";
-import fintechLogo from "../assets/img/fintech_logo.png";
+import personLogo from "/person_logo.png";
+import fintechLogo from "/fintech_logo.png";
 import { useWindowSize } from "@uidotdev/usehooks";
 import { useClickAway } from "@uidotdev/usehooks";
 import NavBarMobile from "./NavBarMobile.tsx";
diff --git a/src/components/shared/NavBarMobile.tsx b/src/components/shared/NavBarMobile.tsx
index c9bd3a9..a62f665 100644
--- a/src/components/shared/NavBarMobile.tsx
+++ b/src/components/shared/NavBarMobile.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Link } from "react-router-dom";
 import styles from "css/shared/NavBarMobile.module.css"; // Import CSS module
-import personLogo from "../assets/img/person_logo.png";
-import fintechLogo from "../assets/img/fintech_logo.png";
-import closeSymbol from "../assets/img/material-symbols_close.png";
+import personLogo from "/person_logo.png";
+import fintechLogo from "/fintech_logo.png";
+import closeSymbol from "/material-symbols_close.png";
 
-function Navbar(): JSX.Element {
+function NavBarMobile() {
   const [showSideBar, setShowSideBar] = useState(false);
 
   const toggleSideBar = () => {
@@ -99,4 +99,4 @@ function Navbar(): JSX.Element {
   );
 }
 
-export default Navbar;
+export default NavBarMobile;
diff --git a/src/routes/App.tsx b/src/routes/App.tsx
index 4f61d4c..d91c3cb 100644
--- a/src/routes/App.tsx
+++ b/src/routes/App.tsx
@@ -3,11 +3,19 @@ import { useWindowSize } from "@uidotdev/usehooks";
 import MobileLoginContainer from "components/authentication/MobileLoginContainer.tsx";
 import WebLoginContainer from "components/authentication/WebLoginContainer.tsx";
 import { BREAKPOINTS } from "components/constants.tsx";
+import NavBar from "components/shared/NavBar.tsx";
 
 
 const App = () => {
     const size = useWindowSize();
-    return size.width && size.width <= BREAKPOINTS.MD ? <MobileLoginContainer/> : <WebLoginContainer/>;
+    return (
+      <>
+          <NavBar/>
+          {
+              size.width && size.width <= BREAKPOINTS.MD ? <MobileLoginContainer/> : <WebLoginContainer/>
+          }
+      </>
+    );
 };
 
 export default App
\ No newline at end of file