diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2cd819b..fd3c755 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,22 +1,13 @@
-import { Routes, Route } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 
-import BrowseLayout from './components/BrowseLayout';
-import CategoryPage from './pages/CategoryPage';
-import ChannelPage from './pages/ChannelPage';
-import LoginPage from './pages/LoginPage';
-import SignupPage from './pages/SignupPage';
+import Routes from './routes';
+import './styles/global.css';
 
 function App() {
   return (
-    <Routes>
-      <Route path="/login" element={<LoginPage />} />
-      <Route path="/signup" element={<SignupPage />} />
-      <Route element={<BrowseLayout />}>
-        <Route path="/:channel" element={<ChannelPage />} />
-        <Route path="/category/:category" element={<CategoryPage />} />
-        <Route path="/" element={<h1>Hi</h1>} />
-      </Route>
-    </Routes>
+    <BrowserRouter>
+      <Routes />
+    </BrowserRouter>
   );
 }
 
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 0ff7988..f770324 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,14 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
 
 import App from './App';
-import './styles/global.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <App />
   </React.StrictMode>
 );
diff --git a/client/src/routes/index.tsx b/client/src/routes/index.tsx
new file mode 100644
index 0000000..2c2b620
--- /dev/null
+++ b/client/src/routes/index.tsx
@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { Routes, Route } from 'react-router-dom';
+
+import BrowseLayout from '../components/BrowseLayout';
+import CategoryPage from '../pages/CategoryPage';
+import ChannelPage from '../pages/ChannelPage';
+import LoginPage from '../pages/LoginPage';
+import SignupPage from '../pages/SignupPage';
+
+const Router: FC = () => {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/signup" element={<SignupPage />} />
+      <Route element={<BrowseLayout />}>
+        <Route path="/:channel" element={<ChannelPage />} />
+        <Route path="/category/:category" element={<CategoryPage />} />
+        <Route path="/" element={<h1>Hi</h1>} />
+      </Route>
+    </Routes>
+  );
+};
+
+export default Router;