diff --git a/connect-chat-app/src/App.tsx b/connect-chat-app/src/App.tsx
index a53698a..b6b541d 100644
--- a/connect-chat-app/src/App.tsx
+++ b/connect-chat-app/src/App.tsx
@@ -1,24 +1,14 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import HomePage from './pages/HomePage';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Routes>
+        <Route path='/' element={<HomePage/>}/>
+      </Routes>
     </div>
   );
 }
diff --git a/connect-chat-app/src/components/Login.tsx b/connect-chat-app/src/components/Login.tsx
new file mode 100644
index 0000000..ff80b6f
--- /dev/null
+++ b/connect-chat-app/src/components/Login.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Login = () : JSX.Element => {
+  return (
+    <div>Login</div>
+  )
+}
+
+export default Login
\ No newline at end of file
diff --git a/connect-chat-app/src/components/SignUp.tsx b/connect-chat-app/src/components/SignUp.tsx
new file mode 100644
index 0000000..61e93de
--- /dev/null
+++ b/connect-chat-app/src/components/SignUp.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SignUp = () : JSX.Element => {
+  return (
+    <div>SignUp</div>
+  )
+}
+
+export default SignUp
\ No newline at end of file
diff --git a/connect-chat-app/src/index.tsx b/connect-chat-app/src/index.tsx
index 032464f..ea8129f 100644
--- a/connect-chat-app/src/index.tsx
+++ b/connect-chat-app/src/index.tsx
@@ -2,15 +2,20 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+import reportWebVitals from './reportWebVitals';  
+
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
+  <BrowserRouter>
+  
+  
   <React.StrictMode>
     <App />
   </React.StrictMode>
+  </BrowserRouter>
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/connect-chat-app/src/pages/HomePage.tsx b/connect-chat-app/src/pages/HomePage.tsx
new file mode 100644
index 0000000..a082c29
--- /dev/null
+++ b/connect-chat-app/src/pages/HomePage.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const HomePage = () => {
+  return (
+    <div>HomePage</div>
+  )
+}
+
+export default HomePage
\ No newline at end of file
diff --git a/connect-chat-app/src/pages/LoginPage.tsx b/connect-chat-app/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..9bb4d36
--- /dev/null
+++ b/connect-chat-app/src/pages/LoginPage.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const LoginPage = () => {
+  return (
+    <div>LoginPage</div>
+  )
+}
+
+export default LoginPage
\ No newline at end of file
diff --git a/connect-chat-app/src/pages/SignUpPage.tsx b/connect-chat-app/src/pages/SignUpPage.tsx
new file mode 100644
index 0000000..9c368cc
--- /dev/null
+++ b/connect-chat-app/src/pages/SignUpPage.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SignUpPage = () => {
+  return (
+    <div>SignUpPage</div>
+  )
+}
+
+export default SignUpPage
\ No newline at end of file