diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 3cc880ac..fd1409f5 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -18,6 +18,7 @@
         "bootstrap": "^5.3.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.3",
         "react-scripts": "5.0.1",
         "web-vitals": "^3.5.1"
       },
@@ -5025,6 +5026,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -22111,6 +22120,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 664864bd..e557eb4e 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -13,6 +13,7 @@
     "bootstrap": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^3.5.1"
   },
@@ -54,4 +55,4 @@
     "serve": "^14.2.1",
     "start-server-and-test": "^2.0.3"
   }
-}
+}
\ No newline at end of file
diff --git a/webapp/src/App.js b/webapp/src/App.js
index d932005b..59ab4626 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -4,7 +4,10 @@ import Login from './components/Login';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
+import { BrowserRouter as Router, Route, Routes, Link, Navigate } from 'react-router-dom';
+import HomeScreen from './components/HomeScreen';
+import Game from './components/Game';
+
 
 function App() {
   const [showLogin, setShowLogin] = useState(true);
@@ -12,13 +15,29 @@ function App() {
   const handleToggleView = () => {
     setShowLogin(!showLogin);
   };
+  const [isAuthenticated, setAuthenticated] = useState(false);
+
+  const handleLogin = () => {
+    // Lógica para autenticar al usuario (por ejemplo, verificar credenciales)
+    setAuthenticated(true);
+  };
 
   return (
+    
     <Container component="main" maxWidth="xs">
-      <CssBaseline />
       <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        Welcome to the 2024 edition of the Software Architecture course
+      Saber y Ganar
       </Typography>
+      <Routes>
+        <Route path="/adduser" element={<AddUser />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/" element={<Login />} />
+        <Route path="/home" isAuthenticated={isAuthenticated} element={<HomeScreen />} />
+        <Route path="/game" isAuthenticated={isAuthenticated} element={<Game />} />
+      </Routes>
+    
+      {/* <CssBaseline />
+      
       {showLogin ? <Login /> : <AddUser />}
       <Typography component="div" align="center" sx={{ marginTop: 2 }}>
         {showLogin ? (
@@ -30,9 +49,14 @@ function App() {
             Already have an account? Login here.
           </Link>
         )}
-      </Typography>
+      </Typography> */}
     </Container>
   );
+
 }
 
-export default App;
+/* function PrivateRoute({ isAuthenticated, ...props }) {
+  return isAuthenticated ? <Route {...props} /> : <Navigate to="/login" />;
+} */
+
+export default App;
\ No newline at end of file
diff --git a/webapp/src/components/AddUser.js b/webapp/src/components/AddUser.js
index 00d522a2..3251d677 100644
--- a/webapp/src/components/AddUser.js
+++ b/webapp/src/components/AddUser.js
@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import { Link } from "react-router-dom";
 
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
@@ -49,12 +50,17 @@ const AddUser = () => {
       <Button variant="contained" color="primary" onClick={addUser}>
         Add User
       </Button>
+      
       <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
       {error && (
         <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
       )}
+      <br></br>
+      <Link to="/login">
+            Already have an account? Login here.
+      </Link>
     </Container>
   );
 };
 
-export default AddUser;
+export default AddUser;
\ No newline at end of file
diff --git a/webapp/src/components/HomeScreen.js b/webapp/src/components/HomeScreen.js
new file mode 100644
index 00000000..b48a2054
--- /dev/null
+++ b/webapp/src/components/HomeScreen.js
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Container} from '@mui/material';
+import Game from './Game';
+const HomeScreen = () => {
+    const [juegoIniciado, setJuegoIniciado] = useState(false);
+
+    const handleStartButtonClick = () => {
+        setJuegoIniciado(true);
+    };
+    return (
+        <Container component="main">
+        <div>
+             {juegoIniciado ? (
+            // Muestra otro componente o contenido cuando el juego está iniciado
+            <Game />
+          ) : (
+            // Muestra el contenido inicial con el botón "Jugar"
+            <div>
+              <button onClick={handleStartButtonClick}>Jugar</button>
+              <br></br>
+              <button>Ver historial</button>
+            </div>
+          )}
+        </div>
+        </Container>
+      )
+};
+
+export default HomeScreen;
+  
\ No newline at end of file
diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
index 0ad6268e..06804794 100644
--- a/webapp/src/components/Login.js
+++ b/webapp/src/components/Login.js
@@ -2,6 +2,8 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import HomeScreen from './HomeScreen';
+import { Link } from "react-router-dom";
 
 const Login = () => {
   const [username, setUsername] = useState('');
@@ -37,12 +39,7 @@ const Login = () => {
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
       {loginSuccess ? (
         <div>
-          <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
-            Hello {username}!
-          </Typography>
-          <Typography component="p" variant="body1" sx={{ textAlign: 'center', marginTop: 2 }}>
-            Your account was created on {new Date(createdAt).toLocaleDateString()}.
-          </Typography>
+          <HomeScreen/>
         </div>
       ) : (
         <div>
@@ -67,14 +64,21 @@ const Login = () => {
           <Button variant="contained" color="primary" onClick={loginUser}>
             Login
           </Button>
+          
           <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
           {error && (
             <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
           )}
+          <br></br>
+          <Link to="/adduser">
+            Don't have an account? Register here.
+          </Link>
+          
+   
         </div>
       )}
     </Container>
   );
 };
 
-export default Login;
+export default Login;
\ No newline at end of file
diff --git a/webapp/src/index.js b/webapp/src/index.js
index bd72ce49..bf6590a7 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -8,9 +8,11 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  <Router>
+
     <App />
-  </React.StrictMode>
+
+  </Router>
 );
 
 // If you want to start measuring performance in your app, pass a function