diff --git a/src/App.css b/src/App.css
index 7d2eee1..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,25 +0,0 @@
-.App {
-}
-.search-window {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition:
-        background-color 0.3s,
-        color 0.3s;
-    padding: 0px 10px;
-}
-
-.light {
-    background-color: #f5f5f5;
-    color: #333;
-}
-
-.dark {
-    background-color: #333;
-    color: #f5f5f5;
-}
-
-.AppBar {
-    height: 60px;
-}
diff --git a/src/App.js b/src/App.js
index 6c49fed..d8b31d2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,134 +1,18 @@
 import * as React from 'react';
-import {
-    styled,
-    alpha,
-    ThemeProvider,
-    createTheme,
-} from '@mui/material/styles';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import AccountCircle from '@mui/icons-material/AccountCircle';
-import Switch from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormGroup from '@mui/material/FormGroup';
-import MenuItem from '@mui/material/MenuItem';
-import Menu from '@mui/material/Menu';
-import MailIcon from '@mui/icons-material/Mail';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import MoreIcon from '@mui/icons-material/MoreVert';
-import Container from '@mui/material/Container';
-import SettingsIcon from '@mui/icons-material/Settings';
-import Avatar from '@mui/material/Avatar';
-import AdbIcon from '@mui/icons-material/Adb';
-import InputBase from '@mui/material/InputBase';
-import SearchIcon from '@mui/icons-material/Search';
-import CssBaseline from '@mui/material/CssBaseline';
-import Divider from '@mui/material/Divider';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-import Paper from '@mui/material/Paper';
-import Fab from '@mui/material/Fab';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListSubheader from '@mui/material/ListSubheader';
-import useScrollTrigger from '@mui/material/useScrollTrigger';
-import Rating from '@mui/material/Rating';
-import Slide from '@mui/material/Slide';
-import Library from './components/Library/Library';
-import logo from './logo.svg';
-import './App.css';
-import SideNav from './components/SideNav/SideNav';
-import BookSearch from './components/BookSearch/BookSearch';
-import Setting from './components/SettingIcon/Setting';
-import Dropdown from './components/Dropdown/Dropdown';
-import useMediaQuery from '@mui/material/useMediaQuery';
-
-const label = { inputProps: { 'aria-label': 'Color switch demo' } };
-
-const lightTheme = createTheme({
-    palette: {
-        mode: 'light',
-        primary: {
-            main: '#1976d2',
-        },
-        secondary: {
-            main: '#f50057',
-        },
-    },
-});
-
-const darkTheme = createTheme({
-    palette: {
-        mode: 'dark',
-        primary: {
-            main: '#90caf9',
-        },
-        secondary: {
-            main: '#f48fb1',
-        },
-    },
-});
+import Home from './pages/Home/Home';
+import { Route, Routes } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+import Login from './pages/Login/Login';
+import Profile from './pages/Profile/Profile';
 
 export default function App() {
-    const [isDarkMode, setIsDarkMode] = React.useState(false);
-
-    const [filter, setFilter] = React.useState('');
-
-    const handleToggleDarkMode = () => {
-        setIsDarkMode(!isDarkMode);
-    };
-
-    const matches = useMediaQuery('(max-width:700px)');
-
     return (
-        <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
-            <CssBaseline />
-            <div className='App'>
-                <Box sx={{ flexGrow: 1 }}>
-                    <AppBar className='AppBar' position='fixed'>
-                        <Toolbar>
-                            <SideNav
-                                setfilter={setFilter}
-                                sx={{ margin: '0px' }}
-                            />
-                            <Typography
-                                variant={`${matches ? 'h7' : 'h5'}`}
-                                component='div'
-                                sx={{ flexGrow: 1, letterSpacing: '0.009em' }}
-                            >
-                                CodeBooker
-                            </Typography>
-
-                            <BookSearch
-                                matches={matches}
-                                filter={filter}
-                                setFilter={setFilter}
-                                isDarkMode={isDarkMode}
-                            />
-                            <NotificationsIcon size='small' />
-                            <Switch
-                                sx={{ marginLeft: '0.5rem' }}
-                                size='small'
-                                {...label}
-                                inputProps={{ 'aria-label': 'controlled' }}
-                                checked={isDarkMode}
-                                onChange={handleToggleDarkMode}
-                            />
-                            {/* <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" /> */}
-                            <Dropdown />
-                            {/* <SettingsIcon style={{marginLeft:20}} /> */}
-                            {/* <Setting /> */}
-                        </Toolbar>
-                    </AppBar>
-                </Box>
-                <Library filter={filter} />
-            </div>
-        </ThemeProvider>
+        <Router>
+            <Routes>
+                <Route path='/' element={<Home />} />
+                <Route path='/login' element={<Login />} />
+                <Route path='/profile/:uid' element={<Profile />} />
+            </Routes>
+        </Router>
     );
 }
diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx
deleted file mode 100644
index 6ed986e..0000000
--- a/src/components/Login/Login.jsx
+++ /dev/null
@@ -1 +0,0 @@
-import * as React from 'react';
diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css
new file mode 100644
index 0000000..fde9cb7
--- /dev/null
+++ b/src/pages/Home/Home.css
@@ -0,0 +1,23 @@
+.search-window {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition:
+        background-color 0.3s,
+        color 0.3s;
+    padding: 0px 10px;
+}
+
+.light {
+    background-color: #f5f5f5;
+    color: #333;
+}
+
+.dark {
+    background-color: #333;
+    color: #f5f5f5;
+}
+
+.AppBar {
+    height: 60px;
+}
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
new file mode 100644
index 0000000..40bddf7
--- /dev/null
+++ b/src/pages/Home/Home.jsx
@@ -0,0 +1,102 @@
+import React from 'react';
+
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Switch from '@mui/material/Switch';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import CssBaseline from '@mui/material/CssBaseline';
+import Library from '../../components/Library/Library';
+import SideNav from '../../components/SideNav/SideNav';
+import BookSearch from '../../components/BookSearch/BookSearch';
+import Dropdown from '../../components/Dropdown/Dropdown';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+import './Home.css';
+
+const label = { inputProps: { 'aria-label': 'Color switch demo' } };
+
+const lightTheme = createTheme({
+    palette: {
+        mode: 'light',
+        primary: {
+            main: '#1976d2',
+        },
+        secondary: {
+            main: '#f50057',
+        },
+    },
+});
+
+const darkTheme = createTheme({
+    palette: {
+        mode: 'dark',
+        primary: {
+            main: '#90caf9',
+        },
+        secondary: {
+            main: '#f48fb1',
+        },
+    },
+});
+
+function Home() {
+    const [isDarkMode, setIsDarkMode] = React.useState(false);
+
+    const [filter, setFilter] = React.useState('');
+
+    const handleToggleDarkMode = () => {
+        setIsDarkMode(!isDarkMode);
+    };
+
+    const matches = useMediaQuery('(max-width:700px)');
+    return (
+        <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
+            <CssBaseline />
+            <div className='App'>
+                <Box sx={{ flexGrow: 1 }}>
+                    <AppBar className='AppBar' position='fixed'>
+                        <Toolbar>
+                            <SideNav
+                                setfilter={setFilter}
+                                sx={{ margin: '0px' }}
+                            />
+                            <Typography
+                                variant={`${matches ? 'h7' : 'h5'}`}
+                                component='div'
+                                sx={{ flexGrow: 1, letterSpacing: '0.009em' }}
+                            >
+                                CodeBooker
+                            </Typography>
+
+                            <BookSearch
+                                matches={matches}
+                                filter={filter}
+                                setFilter={setFilter}
+                                isDarkMode={isDarkMode}
+                            />
+                            <NotificationsIcon size='small' />
+                            <Switch
+                                sx={{ marginLeft: '0.5rem' }}
+                                size='small'
+                                {...label}
+                                inputProps={{ 'aria-label': 'controlled' }}
+                                checked={isDarkMode}
+                                onChange={handleToggleDarkMode}
+                            />
+                            {/* <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" /> */}
+                            <Dropdown />
+                            {/* <SettingsIcon style={{marginLeft:20}} /> */}
+                            {/* <Setting /> */}
+                        </Toolbar>
+                    </AppBar>
+                </Box>
+                <Library filter={filter} />
+            </div>
+        </ThemeProvider>
+    );
+}
+
+export default Home;
diff --git a/src/components/Login/Login.css b/src/pages/Login/Login.css
similarity index 100%
rename from src/components/Login/Login.css
rename to src/pages/Login/Login.css
diff --git a/src/pages/Login/Login.jsx b/src/pages/Login/Login.jsx
new file mode 100644
index 0000000..cd85a1e
--- /dev/null
+++ b/src/pages/Login/Login.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Login() {
+    return <div>Login</div>;
+}
+
+export default Login;
diff --git a/src/pages/Profile/Profile.css b/src/pages/Profile/Profile.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Profile/Profile.jsx b/src/pages/Profile/Profile.jsx
new file mode 100644
index 0000000..517a277
--- /dev/null
+++ b/src/pages/Profile/Profile.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { useParams } from 'react-router';
+
+function Profile() {
+    const { uid } = useParams();
+    return <div>{uid}</div>;
+}
+
+export default Profile;