diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 10009f6a34c712b52586e2702d82c3fcade83c42..8a491df4f3c8a028729dcafe1050ed49c4fe362f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,16 +1,26 @@
 import { useState } from "react";
-import logo from "./logo.svg";
+import 'antd/dist/antd.css'
 import "./App.css";
 import MainPage from "./components/MainPage";
 import { Routes, Route, Outlet, Link, BrowserRouter } from "react-router-dom";
 import { NavigationBar } from "./components/NavigationBar";
 import { About } from "./components/About";
+import React from "react";
+import { Browse } from "./components/Browse";
+import { Search } from "./components/Search";
 
 function App() {
   return (
     <div className="app">
-      <NavigationBar />
-      <MainPage />
+      <NavigationBar/>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<MainPage/>}></Route>
+          <Route path="/browse" element={<Browse/>}></Route>
+          <Route path="/search" element={<Search/>}></Route>
+          <Route path="/about" element={<About/>}></Route>
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }
diff --git a/frontend/src/components/NavigationBar.tsx b/frontend/src/components/NavigationBar.tsx
index aa9157c13be71539f5bfa5000fa5676f9776e63a..34cc8920e24326dfaf8323fd0041e0f31176f37f 100644
--- a/frontend/src/components/NavigationBar.tsx
+++ b/frontend/src/components/NavigationBar.tsx
@@ -12,7 +12,7 @@ export const NavigationBar = () => {
         <Menu theme="dark" mode="horizontal" defaultSelectedKeys={["2"]}>
           <Image src={logo} width={50}></Image>
 
-          <Menu.Item><Link to= "/">Home</Link></Menu.Item>
+          <Menu.Item>Home</Menu.Item>
           <Menu.Item>Browse</Menu.Item>
           <Menu.Item>Search</Menu.Item>
           <Menu.Item>About</Menu.Item>