diff --git a/frontend/sportsmatch-app/src/assets/logo.png b/frontend/sportsmatch-app/src/assets/logo.png
new file mode 100644
index 00000000..8febf842
Binary files /dev/null and b/frontend/sportsmatch-app/src/assets/logo.png differ
diff --git a/frontend/sportsmatch-app/src/components/Navbar.tsx b/frontend/sportsmatch-app/src/components/Navbar.tsx
index 70ac20fb..a3bffa1b 100644
--- a/frontend/sportsmatch-app/src/components/Navbar.tsx
+++ b/frontend/sportsmatch-app/src/components/Navbar.tsx
@@ -1,13 +1,15 @@
-import { FaMailBulk } from 'react-icons/fa'
+import '../styles/Navbar.css'
 
 function Navbar() {
   return (
-    <nav>
+    <nav className={"nav"}>
       <div className="logo">
-        <FaMailBulk />
-        <span>SportsMingle</span>
+        <a href="/">
+          <img className="logo-png" src="src\assets\logo.png" alt="SportMingle logo" />
+        </a>
       </div>
     </nav>
   )
 }
+
 export default Navbar
diff --git a/frontend/sportsmatch-app/src/styles/Navbar.css b/frontend/sportsmatch-app/src/styles/Navbar.css
new file mode 100644
index 00000000..12ee0a34
--- /dev/null
+++ b/frontend/sportsmatch-app/src/styles/Navbar.css
@@ -0,0 +1,12 @@
+.logo-png{
+  width: 110px;
+  margin-left: 17px;
+  margin-top: 16px;
+}
+
+nav{
+  width: 330px;
+  height: 60px;
+  background: #fff;
+  border-radius: 10px;
+}
\ No newline at end of file