diff --git a/package-lock.json b/package-lock.json
index 21cb0afa0..e14cd816e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "19.0.0-rc-8b08e99e-20240713",
-        "react-dom": "19.0.0-rc-8b08e99e-20240713"
+        "react-dom": "19.0.0-rc-8b08e99e-20240713",
+        "react-router-dom": "^6.25.1"
       },
       "devDependencies": {
         "@types/react": "^18.3.3",
@@ -988,6 +989,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.18.0.tgz",
+      "integrity": "sha512-L3jkqmqoSVBVKHfpGZmLrex0lxR5SucGA0sUfFzGctehw+S/ggL9L/0NnC5mw6P8HUWpFZ3nQw3cRApjjWx9Sw==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.18.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz",
@@ -3803,6 +3812,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router-dom": {
+      "version": "6.25.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.25.1.tgz",
+      "integrity": "sha512-0tUDpbFvk35iv+N89dWNrJp+afLgd+y4VtorJZuOCXK0kkCWjEvb3vTJM++SYvMEpbVwXKf3FjeVveVEb6JpDQ==",
+      "dependencies": {
+        "@remix-run/router": "1.18.0",
+        "react-router": "6.25.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom/node_modules/react-router": {
+      "version": "6.25.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz",
+      "integrity": "sha512-u8ELFr5Z6g02nUtpPAggP73Jigj1mRePSwhS/2nkTrlPU5yEkH1vYzWNyvSnSzeeE2DNqWdH+P8OhIh9wuXhTw==",
+      "dependencies": {
+        "@remix-run/router": "1.18.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
diff --git a/package.json b/package.json
index 98faea3e4..052a5d8b4 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "19.0.0-rc-8b08e99e-20240713",
-    "react-dom": "19.0.0-rc-8b08e99e-20240713"
+    "react-dom": "19.0.0-rc-8b08e99e-20240713",
+    "react-router-dom": "^6.25.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
diff --git a/src/App.jsx b/src/App.jsx
deleted file mode 100644
index b1d9af3ca..000000000
--- a/src/App.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-const App = () => {
-  return (
-    <div>Hello World</div>
-  )
-}
-
-export default App
\ No newline at end of file
diff --git a/src/layouts/rootLayout/RootLayout.css b/src/layouts/rootLayout/RootLayout.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/layouts/rootLayout/RootLayout.jsx b/src/layouts/rootLayout/RootLayout.jsx
new file mode 100644
index 000000000..8368cacae
--- /dev/null
+++ b/src/layouts/rootLayout/RootLayout.jsx
@@ -0,0 +1,8 @@
+import './RootLayout.css';
+export const RootLayout = () => {
+  return (
+    <div className="rootLayout">
+      <header></header>
+    </div>
+  );
+};
diff --git a/src/main.jsx b/src/main.jsx
index 54b39dd1d..16ace597f 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './routes/router.jsx';
+import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <RouterProvider router={router} />
+  </React.StrictMode>
+);
diff --git a/src/pages/chatpage/ChatPage.css b/src/pages/chatpage/ChatPage.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/chatpage/ChatPage.tsx b/src/pages/chatpage/ChatPage.tsx
new file mode 100644
index 000000000..bffdd16fd
--- /dev/null
+++ b/src/pages/chatpage/ChatPage.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import './ChatPage.css'
+
+export const ChatPage = () => {
+  return (
+    <div>ChatPage</div>
+  )
+}
diff --git a/src/pages/dashboard/DashboardPage.css b/src/pages/dashboard/DashboardPage.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/dashboard/DashboardPage.jsx b/src/pages/dashboard/DashboardPage.jsx
new file mode 100644
index 000000000..d5868e83a
--- /dev/null
+++ b/src/pages/dashboard/DashboardPage.jsx
@@ -0,0 +1,5 @@
+import './DashboardPage.css';
+
+export const DashboardPage = () => {
+  return <div>DashboardPage</div>;
+};
diff --git a/src/pages/homepage/HomePage.css b/src/pages/homepage/HomePage.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/homepage/HomePage.jsx b/src/pages/homepage/HomePage.jsx
new file mode 100644
index 000000000..dbb431c2b
--- /dev/null
+++ b/src/pages/homepage/HomePage.jsx
@@ -0,0 +1,4 @@
+import './HomePage.css';
+export const HomePage = () => {
+  return <div>HomePage</div>;
+};
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
new file mode 100644
index 000000000..fc491d625
--- /dev/null
+++ b/src/pages/index.jsx
@@ -0,0 +1,5 @@
+export { HomePage } from './homepage/HomePage';
+export { SignInPage } from './signInPage/SignInPage';
+export { ChatPage } from './chatpage/ChatPage';
+export { DashboardPage } from './dashboard/DashboardPage';
+export { SignUpPage } from './signUpPage/SignUpPage';
diff --git a/src/pages/signInPage/SignInPage.css b/src/pages/signInPage/SignInPage.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/signInPage/SignInPage.jsx b/src/pages/signInPage/SignInPage.jsx
new file mode 100644
index 000000000..5e10958ff
--- /dev/null
+++ b/src/pages/signInPage/SignInPage.jsx
@@ -0,0 +1,5 @@
+import './SignInPage.css';
+
+export const SignInPage = () => {
+  return <div>SignInPage</div>;
+};
diff --git a/src/pages/signUpPage/SignUpPage.css b/src/pages/signUpPage/SignUpPage.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/signUpPage/SignUpPage.jsx b/src/pages/signUpPage/SignUpPage.jsx
new file mode 100644
index 000000000..ade2e5d7f
--- /dev/null
+++ b/src/pages/signUpPage/SignUpPage.jsx
@@ -0,0 +1,5 @@
+import './SignUpPage.css';
+
+export const SignUpPage = () => {
+  return <div>SignUpPage</div>;
+};
diff --git a/src/routes/router.jsx b/src/routes/router.jsx
new file mode 100644
index 000000000..e6b9089a3
--- /dev/null
+++ b/src/routes/router.jsx
@@ -0,0 +1,23 @@
+import { createBrowserRouter } from 'react-router-dom';
+import { ChatPage, DashboardPage, HomePage } from '../pages';
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <HomePage />,
+  },
+  {
+    path: '/dashboard',
+    children: [
+      { index: true, element: <DashboardPage /> },
+      {
+        path: '/dashboard/chats/:id',
+        element: <ChatPage />,
+      },
+    ],
+  },
+  {
+    path: '/',
+    element: <HomePage />,
+  },
+]);