diff --git a/src/components/NavBar.css b/src/components/NavBar.css
deleted file mode 100644
index c64ea06..0000000
--- a/src/components/NavBar.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.login-button {
-	border-radius: 8px;
-	border: 1px solid #000;
-	background: #ff7647;
-	box-shadow:
-		2px 2px 0px 0px #000,
-		3px 4px 9.2px 0px rgba(222, 222, 222, 0.48) inset;
-
-	display: flex;
-	padding: 8px 16px;
-	justify-content: center;
-	align-items: center;
-	gap: 10px;
-}
-
-.navbar {
-	background-image: url(../assets/images/image.png);
-}
-
-.navitem {
-	@media screen and (max-width: 1185px) {
-		display: none;
-	}
-}
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
deleted file mode 100644
index d385e85..0000000
--- a/src/components/NavBar.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useState, useEffect } from 'react';
-import './NavBar.css';
-import NavElement from './shared/typography/NavElement';
-import NavButton from './shared/typography/NavButton';
-import Navigation from '../config/Navigation';
-import menuIcon from '../assets/images/menu.png';
-import unionIcon from '../assets/images/Union.png';
-
-function NavBar() {
-	const { navItems } = Navigation;
-	const [isMobile, setIsMobile] = useState(false);
-	const [isNavOpen, setIsNavOpen] = useState(false);
-	const [menuIconSrc, setMenuIconSrc] = useState(menuIcon);
-
-	useEffect(() => {
-		const handleResize = () => {
-			setIsMobile(window.innerWidth < 1185);
-		};
-		window.addEventListener('resize', handleResize);
-		handleResize();
-		return () => window.removeEventListener('resize', handleResize);
-	}, []);
-
-	const toggleNav = () => {
-		if (isMobile) {
-			setIsNavOpen(!isNavOpen);
-			setMenuIconSrc(isNavOpen ? menuIcon : unionIcon);
-		}
-	};
-
-	return (
-		<>
-			<div
-				className={`navbar flex justify-between items-center opacity-53 bg-hard-light bg-center bg-cover  h-[73.8px] overflow-hidden`}>
-				<div className='ml-[56.6px]'>Logo</div>
-				<div className={`navitem md:flex`}>
-					{navItems.map((item, index) => (
-						<NavElement key={index} className='mx-[55px]'>
-							{item.name}
-						</NavElement>
-					))}
-				</div>
-				<div className='flex'>
-					{isMobile ? (
-						<NavButton className={`mr-[56.6px] hamburger-icon`} onClick={toggleNav}>
-							<img src={menuIconSrc} alt='Menu' />
-						</NavButton>
-					) : (
-						<div className='login-button mr-[56.6px]'>Login</div>
-					)}
-				</div>
-			</div>
-			<div className='w-full' style={{ height: '1px', backgroundColor: 'black' }}></div>
-			{isMobile && isNavOpen && (
-				<div className='navMobile flex flex-col justify-center bg-[#252525] items-center gap-[41px] h-[376px] text-white'>
-					{navItems.map((item, index) => (
-						<NavElement key={index} className='mx-[55px]'>
-							{item.name}
-						</NavElement>
-					))}
-				</div>
-			)}
-		</>
-	);
-}
-
-export default NavBar;
diff --git a/src/components/shared/NavBar.jsx b/src/components/shared/NavBar.jsx
new file mode 100644
index 0000000..995df97
--- /dev/null
+++ b/src/components/shared/NavBar.jsx
@@ -0,0 +1,84 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import Text from './typography/Text';
+import Navigation from '../../config/Navigation';
+import menuIcon from '../../assets/images/menu.png';
+import unionIcon from '../../assets/images/Union.png';
+import image from '../../assets/images/image.png';
+
+function NavBar() {
+	const { navItems } = Navigation;
+	const [isMobile, setIsMobile] = useState(false);
+	const [isNavOpen, setIsNavOpen] = useState(false);
+	const [menuIconSrc, setMenuIconSrc] = useState(menuIcon);
+
+	useEffect(() => {
+		const handleResize = () => {
+			setIsMobile(window.innerWidth < 1185);
+		};
+		window.addEventListener('resize', handleResize);
+		handleResize();
+		return () => window.removeEventListener('resize', handleResize);
+	}, []);
+
+	const toggleNav = () => {
+		if (isMobile) {
+			setIsNavOpen(!isNavOpen);
+			setMenuIconSrc(isNavOpen ? menuIcon : unionIcon);
+		}
+	};
+
+	return (
+		<div>
+			<div
+				className='navbar flex justify-between items-center opacity-53 bg-hard-light bg-center bg-cover h-[73.8px] overflow-hidden'
+				style={{ backgroundImage: `url(${image})` }}>
+				<div className='ml-[56.6px]'>Logo</div>
+				<div className={`navitem md:flex`}>
+					<div
+						style={{
+							display: isMobile ? 'none' : 'flex',
+						}}>
+						{navItems.map((item, index) => (
+							<Link to={item.link} key={index}>
+								<Text variant='nav' className='mx-[55px]'>
+									{item.name}
+								</Text>
+							</Link>
+						))}
+					</div>
+				</div>
+				<div className='flex'>
+					{isMobile ? (
+						<Text as='button' className={`mr-[56.6px] hamburger-icon`} onClick={toggleNav} variant='navButton'>
+							<img src={menuIconSrc} alt='Menu' />
+						</Text>
+					) : (
+						<Text
+							variant='navButton'
+							className='login-button mr-[56.6px] rounded-[8px] border border-black border-solid bg-[#ff7647] flex px-[12px] py-[16px] justify-center items-center gap-[10px] '
+							style={{
+								boxShadow: '2px 2px 0px 0px #000, 3px 4px 9.2px 0px rgba(222, 222, 222, 0.48) inset',
+							}}>
+							Login
+						</Text>
+					)}
+				</div>
+			</div>
+			<div className='w-full' style={{ height: '1px', backgroundColor: 'black' }}></div>
+			{isMobile && isNavOpen && (
+				<div className='navMobile flex flex-col justify-center bg-[#252525] items-center gap-[41px] h-[376px] text-white'>
+					{navItems.map((item, index) => (
+						<Link to={item.link} key={index}>
+							<Text variant='nav' className='mx-[55px]'>
+								{item.name}
+							</Text>
+						</Link>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default NavBar;
diff --git a/src/components/shared/typography/NavButton.jsx b/src/components/shared/typography/NavButton.jsx
deleted file mode 100644
index b4007ba..0000000
--- a/src/components/shared/typography/NavButton.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils';
-
-const NavVariants = cva(['font-syne', 'text-left', 'leading-5.3', 'font-semibold'], {
-	variants: {
-		variant: {
-			nav1: ['text-lg', 'leading-5.3', 'font-semibold'],
-		},
-	},
-	defaultVariants: ['text-lg'],
-});
-
-export default function NavButton({ variant = 'nav1', className, children, ...props }) {
-	return (
-		<p className={cn(NavVariants({ variant, className }))} {...props}>
-			{children}
-		</p>
-	);
-}
diff --git a/src/components/shared/typography/NavElement.jsx b/src/components/shared/typography/NavElement.jsx
deleted file mode 100644
index 9b55144..0000000
--- a/src/components/shared/typography/NavElement.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils';
-
-const NavVariants = cva(['font-syne', 'text-left', 'leading-6', 'font-bold'], {
-	variants: {
-		variant: {
-			navbutton1: ['text-xl', 'leading-6', 'font-bold'],
-		},
-	},
-	defaultVariants: ['text-xl'],
-});
-
-export default function NavElement({ variant = 'navbutton1', className, children, ...props }) {
-	return (
-		<p className={cn(NavVariants({ variant, className }))} {...props}>
-			{children}
-		</p>
-	);
-}
diff --git a/src/pages/playground.jsx b/src/pages/playground.jsx
index 8ce3f98..14583a7 100644
--- a/src/pages/playground.jsx
+++ b/src/pages/playground.jsx
@@ -1,4 +1,4 @@
-import NavBar from '../components/NavBar';
+import NavBar from '../components/shared/NavBar';
 export default function Playground() {
 	return (
 		<>