diff --git a/frontend/web-app/src/Components/NavBar.tsx b/frontend/web-app/src/Components/NavBar.tsx
index 23dda15..f9ab28f 100644
--- a/frontend/web-app/src/Components/NavBar.tsx
+++ b/frontend/web-app/src/Components/NavBar.tsx
@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react'
 import { Link, Outlet, useLocation } from 'react-router-dom';
 import '../Styles/custom/navBar.css'
+import sproutlyLogo from '../Images/sproutly-logo.svg';
+import sproutlyText from '../Images/sproutly-text.svg';
 
 function NavBar() {
 
@@ -26,7 +28,10 @@ function NavBar() {
 	return (
 		<>
 			<div className='navbar'>
-				<div>Sproutly</div>
+				<div>
+					<img className='sproutly-logo' src={sproutlyLogo} alt='error img'/>
+					<img className='sproutly-text' src={sproutlyText} alt='error img'/>
+				</div>
 				<div className='navbar-link-container'>
 					{pageArray.map((page, index)=>{
 						return <Link key={index} className={`navbar-link${location.pathname===page.path? ' text-white': ''}`} to={page.path}>{page.name}</Link>
diff --git a/frontend/web-app/src/Styles/custom/navBar.css b/frontend/web-app/src/Styles/custom/navBar.css
index 338bc6e..d771967 100644
--- a/frontend/web-app/src/Styles/custom/navBar.css
+++ b/frontend/web-app/src/Styles/custom/navBar.css
@@ -39,4 +39,8 @@
     padding-right: 26px;
     border-radius: 15px;
     border-color: #E6F2D7;
+}
+
+.sproutly-text{
+    padding-left: 11px;
 }
\ No newline at end of file