diff --git a/frontend/src/components/common/Login.jsx b/frontend/src/components/common/Login.jsx
index 5efae6e..e7d3383 100644
--- a/frontend/src/components/common/Login.jsx
+++ b/frontend/src/components/common/Login.jsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom';
-import Navbar from 'react-bootstrap/Navbar';
-import { Container, Nav } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
@@ -9,6 +8,7 @@ import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import axiosInstance from './AxiosInstance';
+import PublicNavBar from './PublicNavBar';
 
 const Login = () => {
    const navigate = useNavigate()
@@ -97,21 +97,7 @@ const Login = () => {
    return (
       <>
 
-         <Navbar expand="lg" className="bg-body-tertiary premium-navbar">
-            <Container fluid>
-               <Navbar.Brand>
-                 <span className="brand-premium"><span className="brand-premium-L">L</span>earnhub</span>
-               </Navbar.Brand>
-               <Navbar.Toggle aria-controls="navbarScroll" />
-               <Navbar.Collapse id="navbarScroll">
-                  <Nav className="ms-auto premium-nav-links">
-                     <Link className="premium-btn" to={'/'}>Home</Link>
-                     <Link className="premium-btn" to={'/login'}>Login</Link>
-                     <Link className="premium-btn" to={'/register'}>Register</Link>
-                  </Nav>
-               </Navbar.Collapse>
-            </Container>
-         </Navbar>
+         <PublicNavBar />
 
          <div className='first-container premium-bg'>
             <Container component="main" className="premium-login-container">
diff --git a/frontend/src/components/common/PublicNavBar.jsx b/frontend/src/components/common/PublicNavBar.jsx
new file mode 100644
index 0000000..d0e5717
--- /dev/null
+++ b/frontend/src/components/common/PublicNavBar.jsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom';
+import Navbar from 'react-bootstrap/Navbar';
+import { Container, Nav } from 'react-bootstrap';
+
+const PublicNavBar = () => {
+   return (
+      <Navbar expand="lg" className="landing-nav-wrapper">
+         <Container fluid className="landing-nav">
+            <Navbar.Brand href="/" className="landing-brand">
+               <span className="landing-brand-mark">L</span>
+               <span>
+                  <strong>LearnHub</strong>
+                  <small>Skills that move with you</small>
+               </span>
+            </Navbar.Brand>
+            <Navbar.Toggle aria-controls="publicNavbarScroll" />
+            <Navbar.Collapse id="publicNavbarScroll">
+               <Nav className="landing-nav-actions ms-auto">
+                  <NavLink className="nav-text-link" to={'/'}>Home</NavLink>
+                  <NavLink className="nav-text-link" to={'/login'}>Login</NavLink>
+                  <NavLink className="nav-text-link" to={'/register'}>Register</NavLink>
+               </Nav>
+            </Navbar.Collapse>
+         </Container>
+      </Navbar>
+   )
+}
+
+export default PublicNavBar
\ No newline at end of file
diff --git a/frontend/src/components/common/Register.jsx b/frontend/src/components/common/Register.jsx
index c6b224a..91fc8f3 100644
--- a/frontend/src/components/common/Register.jsx
+++ b/frontend/src/components/common/Register.jsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom';
-import Navbar from 'react-bootstrap/Navbar';
-import { Container, Nav } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
@@ -9,6 +8,7 @@ import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import axiosInstance from './AxiosInstance';
+import PublicNavBar from './PublicNavBar';
 import Dropdown from 'react-bootstrap/Dropdown';
 
 
@@ -77,21 +77,7 @@ const Register = () => {
    return (
       <>
 
-         <Navbar expand="lg" className="bg-body-tertiary premium-navbar">
-            <Container fluid>
-               <Navbar.Brand>
-                 <span className="brand-premium"><span className="brand-premium-L">L</span>earnhub</span>
-               </Navbar.Brand>
-               <Navbar.Toggle aria-controls="navbarScroll" />
-               <Navbar.Collapse id="navbarScroll">
-                  <Nav className="ms-auto premium-nav-links">
-                     <Link className="premium-btn" to={'/'}>Home</Link>
-                     <Link className="premium-btn" to={'/login'}>Login</Link>
-                     <Link className="premium-btn" to={'/register'}>Register</Link>
-                  </Nav>
-               </Navbar.Collapse>
-            </Container>
-         </Navbar>
+         <PublicNavBar />
          <div className="first-container premium-bg">
             <Container component="main" className="premium-login-container">
                <Box className="premium-login-box">