diff --git a/webapp/src/components/AddUser.js b/webapp/src/components/AddUser.js
index 3c2bb574..0b8e69aa 100644
--- a/webapp/src/components/AddUser.js
+++ b/webapp/src/components/AddUser.js
@@ -33,58 +33,60 @@ const AddUser = () => {
   };
 
   return (
-<Container component="main" maxWidth="xxl"
-            sx={{
-                marginTop: 4,
-                borderRadius: '10px',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: '100vh', 
-                width: '100%'
-            }}>
-      <Typography component="h1" variant="h5" align="center" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
-        REGÍSTRATE
-      </Typography>
-      <TextField
-        name="username"
-        margin="normal"
-        fullWidth
-        label="Usuario"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-        sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF'}}
-      />
-      <TextField
-        name="email"
-        margin="normal"
-        fullWidth
-        label="Email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF'}}
-      />
-      <TextField
-        name="password"
-        margin="normal"
-        fullWidth
-        label="Contraseña"
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF' }}
-      />
+      <Container component="main" maxWidth="xl"
+                 sx={{
+                     marginTop: 4,
+                     borderRadius: '10px',
+                     display: 'flex',
+                     flexDirection: 'column',
+                     justifyContent: 'center',
+                     alignItems: 'center',
+                 }}>
+          <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
+              <Typography component="h1" variant="h5" align="center" sx={{marginBottom: 2, fontWeight: 'bold'}}>
+                  REGÍSTRATE
+              </Typography>
+              <TextField
+                  name="username"
+                  margin="normal"
+                  fullWidth
+                  label="Usuario"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  sx={{ marginBottom: 4, backgroundColor: '#FFFFFF'}}
+              />
+              <TextField
+                  name="email"
+                  margin="normal"
+                  fullWidth
+                  label="Email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  sx={{ marginBottom: 4, backgroundColor: '#FFFFFF'}}
+              />
+              <TextField
+                  name="password"
+                  margin="normal"
+                  fullWidth
+                  label="Contraseña"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  sx={{ marginBottom: 4, backgroundColor: '#FFFFFF'}}
+              />
 
-      <Button variant="contained" color="primary" sx={{marginTop: 4,marginBottom: 4, backgroundColor: '#FCF5B8',  color: '#413C3C',  fontWeight: 'bold' }} onClick={addUser}>
-        REGÍSTRATE
-      </Button>
-      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message={snackbarMessage} />
-      {error && (
-        <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
-      )}
-    </Container>
-  );
+              <Button variant="contained" color="primary" sx={{marginTop: 4,marginBottom: 4, backgroundColor: '#FCF5B8',  color: '#413C3C',  fontWeight: 'bold' }} onClick={addUser}>
+                  REGÍSTRATE
+              </Button>
+              <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar}
+                        message={snackbarMessage}/>
+              {error && (
+                  <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')}
+                            message={`Error: ${error}`}/>
+              )}
+          </div>
+      </Container>
+);
 };
 
 export default AddUser;
diff --git a/webapp/src/components/GameConfiguration.js b/webapp/src/components/GameConfiguration.js
index b9619e6b..31dc2dd5 100644
--- a/webapp/src/components/GameConfiguration.js
+++ b/webapp/src/components/GameConfiguration.js
@@ -55,60 +55,63 @@ const GameConfiguration = () => {
     return (
         <Container component="main" maxWidth="xl"
                    sx={{
-                       marginTop: 10,
+                       marginTop: 25,
                        borderRadius: '10px',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}>
-            <Typography component="h1" variant="h5" align="center" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
-                Configuración de la partida
-            </Typography>
-            <TextField
-                name="questions"
-                margin="normal"
-                fullWidth
-                label="Número de preguntas"
-                onChange={handleChangeQuestions}
-                value={valueQuestion}
-                type="number"
-                step="1"
-                sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF'}}
+            <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
+                <Typography component="h1" variant="h5" align="center" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
+                    Personaliza tu partida
+                </Typography>
+                <TextField
+                    name="questions"
+                    margin="normal"
+                    fullWidth
+                    label="Número de preguntas"
+                    onChange={handleChangeQuestions}
+                    value={valueQuestion}
+                    type="number"
+                    step="1"
+                    sx={{ marginBottom: 4, marginTop: 3, backgroundColor: '#FFFFFF'}}
 
-                inputProps={{
-                    inputMode: 'numeric',
-                    pattern: '[0-9]*',
-                    min: 1,
-                    max: 30,
-                }}
-            />
-            <TextField
-                name="time"
-                margin="normal"
-                fullWidth
-                label="Tiempo disponible por pregunta"
-                onChange={handleChangeTime}
-                value={valueTime}
-                type="number"
-                step="1"
-                sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF'}}
-                inputProps={{
-                    inputMode: 'numeric',
-                    min: 10,
-                    max: 60,
-                }}
-            />
-            <Button variant="contained" color="primary" sx={{marginTop: 4,marginBottom: 4, backgroundColor: '#FCF5B8',  color: '#413C3C',  fontWeight: 'bold'}}
-                onClick={configureAndStart}>
-                JUGAR
-            </Button>
-            <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message={snackbarMessage} />
-            {error && (
-                <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
-            )}
+                    inputProps={{
+                        inputMode: 'numeric',
+                        pattern: '[0-9]*',
+                        min: 1,
+                        max: 30,
+                    }}
+                />
+                <TextField
+                    name="time"
+                    margin="normal"
+                    fullWidth
+                    label="Tiempo disponible por pregunta"
+                    onChange={handleChangeTime}
+                    value={valueTime}
+                    type="number"
+                    step="1"
+                    sx={{ marginBottom: 4, marginTop: 3 , backgroundColor: '#FFFFFF'}}
+                    inputProps={{
+                        inputMode: 'numeric',
+                        min: 10,
+                        max: 60,
+                    }}
+                />
+                <Button variant="contained" color="primary" color="primary" sx={{marginTop: 4,marginBottom: 4, backgroundColor: '#FCF5B8',  color: '#413C3C',  fontWeight: 'bold'}} onClick={configureAndStart}>
+                    JUGAR
+                </Button>
+                <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar}
+                          message={snackbarMessage}/>
+                {error && (
+                    <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')}
+                              message={`Error: ${error}`}/>
+                )}
+            </div>
         </Container>
-    );
+);
 };
 
 export default GameConfiguration;
diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
index 571456c5..21214930 100644
--- a/webapp/src/components/Login.js
+++ b/webapp/src/components/Login.js
@@ -55,52 +55,50 @@ const Login = () => {
   };
 
   return (
-    <Container component="main" maxWidth="xxl"
-            sx={{
-                marginTop: 4,
-                borderRadius: '10px',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: '100vh', 
-                width: '100% '
-            }}>
-      {loginSuccess ? (
-        null
-      
-      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
-          <Typography component="h1" variant="h5" align="center" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
-            INICIA SESIÓN
-          </Typography>
-          <TextField
-            margin="normal"
-            fullWidth
-            label="Usuario"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF'}}
-          />
-          <TextField
-            margin="normal"
-            fullWidth
-            label="Contraseña"
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF'}}
-          />
-          <Button variant="contained" color="primary" sx={{marginTop: 4,marginBottom: 4, backgroundColor: '#FCF5B8',  color: '#413C3C',  fontWeight: 'bold' }} onClick={loginUser}>
-            ENTRA
-          </Button>
-          <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Inicio de sesión correcto" />
-          {error && (
-            <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
+      <Container component="main" maxWidth="xl"
+                 sx={{
+                     marginTop: 4,
+                     borderRadius: '10px',
+                     display: 'flex',
+                     flexDirection: 'column',
+                     justifyContent: 'center',
+                     alignItems: 'center',
+                 }}>
+          {loginSuccess ? (
+              null
+
+          ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+                  <Typography component="h1" variant="h5" align="center" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
+                      Inicia sesión
+                  </Typography>
+                  <TextField
+                      margin="normal"
+                      fullWidth
+                      label="Usuario"
+                      value={username}
+                      onChange={(e) => setUsername(e.target.value)}
+                      sx={{ marginBottom: 4, backgroundColor: '#FFFFFF'}}
+                  />
+                  <TextField
+                      margin="normal"
+                      fullWidth
+                      label="Contraseña"
+                      type="password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      sx={{ marginBottom: 4, backgroundColor: '#FFFFFF'}}
+                  />
+                  <Button variant="contained" color="primary" sx={{marginTop: 4,marginBottom: 4, backgroundColor: '#FCF5B8',  color: '#413C3C',  fontWeight: 'bold' }} onClick={loginUser}>
+                      Entra
+                  </Button>
+                  <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Inicio de sesión correcto" />
+                  {error && (
+                      <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
+                  )}
+              </div>
           )}
-        </div>
-        )}
-        
+
       </Container>
   );
 };
diff --git a/webapp/src/components/fragments/NavigationBar.js b/webapp/src/components/fragments/NavigationBar.js
index d2ff705a..7501f2db 100644
--- a/webapp/src/components/fragments/NavigationBar.js
+++ b/webapp/src/components/fragments/NavigationBar.js
@@ -1,9 +1,10 @@
 // src/components/NavigationBar.js
 import React, { useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { AppBar, Button, Grid } from '@mui/material';
+import { AppBar, Toolbar, IconButton, Menu, MenuItem, Grid, Button, Hidden} from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
 import { useUser } from '../UserContext';
+import MenuIcon from '@mui/icons-material/Menu';
 
 const NavigationBar = () => {
 
@@ -15,6 +16,16 @@ const NavigationBar = () => {
 
     const isHiddenRoute = location.pathname === '/' || location.pathname === '/App' || location.pathname === '/Game';
 
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+
+    const handleMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
 
     const showHome = () => {
         if (usernameGlobal === 'admin') {
@@ -51,44 +62,63 @@ const NavigationBar = () => {
     }
 
     return (
-    <AppBar position="fixed" sx={{ backgroundColor: '#9A77B0' }}>
-        <Grid container justifyContent="space-between">
-            {/* Columna izquierda */}
-            <Grid item>
-                <Tooltip title="Inicio">
-                <Button variant="contained" color="inherit" style={{ background: 'white', border: 'none', padding: 0, marginRight: '10px', marginLeft: '10px'}} onClick={showHome}>
-                    <img src={require('./images/home.png')} style={{ width: '50px', height: '50px' }} alt="Imagen home"/>
-                </Button>
-                </Tooltip>
-                <Tooltip title="Histórico">
-                <Button variant="contained" color="inherit" style={{ background: 'white', border: 'none', padding: 0, marginRight: '10px' }} onClick={showGameHistory}>
-                    <img src={require('./images/iconHistory.jpeg')} style={{ width: '50px', height: '50px' }} alt="Imagen historico"/>
-                </Button>
-                </Tooltip>
-                
-                <Tooltip title="Ranking">
-                <Button variant="contained" color="inherit" style={{ background: '#9A77B0', border: 'none', padding: 0, marginRight: '10px' }} onClick={showRanking}>
-                    <img src={require('../images/iconRanking.png')} style={{ width: '50px', height: '50px' }} alt="Imagen ranking"/>
-                </Button>
-                </Tooltip>
-                
-            </Grid>
-            {/* Columna derecha */}
-            <Grid item>
-                <Tooltip title="Cerrar sesión">
-                <Button variant="contained" color="inherit" style={{ background: '#9A77B0', border: 'none', padding: 0, marginRight: '10px' }} onClick={showLogout}>
-                    <img src={require('./images/logout.png')} style={{ width: '50px', height: '50px' }} alt="Imagen logout"/>
-                </Button>
-                </Tooltip>
-
-                <Tooltip title="Perfil">
-                <Button variant="contained" color="inherit" style={{ background: '#9A77B0', border: 'none', padding: 0, width: '50px', marginRight: '10px' }} onClick={showPerfil}>
-                    <img src={require('./images/iconUser.png')} style={{ width: '50px', height: '50px' }} alt="Imagen usuario"/>
-                </Button>
-                </Tooltip>
-            </Grid>
-        </Grid>
-    </AppBar>
+        <AppBar position="fixed" sx={{ backgroundColor: '#9A77B0' }}>
+            <Toolbar>
+                <IconButton
+                    size="large"
+                    edge="start"
+                    color="inherit"
+                    aria-label="menu"
+                    onClick={handleMenu}
+                    sx={{ mr: 2, display: { sm: 'none' } }}
+                >
+                    <MenuIcon />
+                </IconButton>
+                <Menu
+                    anchorEl={anchorEl}
+                    open={open}
+                    onClose={handleClose}
+                    onClick={handleClose}
+                >
+                    <MenuItem onClick={showHome}>Inicio</MenuItem>
+                    <MenuItem onClick={showGameHistory}>Historial de Juegos</MenuItem>
+                    <MenuItem onClick={showRanking}>Ranking</MenuItem>
+                    <MenuItem>Perfil</MenuItem>
+                    <MenuItem onClick={showLogout}>Cerrar Sesión</MenuItem>
+                </Menu>
+                <Hidden smDown>
+                <Grid container justifyContent="flex-start">
+                  <Tooltip title="Inicio">
+                    <Button variant="contained" color="inherit" style={{ background: '#9A77B0', border: 'none', padding: 0, marginRight: '10px' }} onClick={showHome}>
+                        <img src={require('../images/home.png')} style={{ width: '50px', height: '50px' }} alt="Imagen home"/>
+                    </Button>
+                  </Tooltip>
+                  <Tooltip title="Histórico">
+                    <Button variant="contained" color="inherit" style={{ background: '#9A77B0', border: 'none', padding: 0, marginRight: '10px' }} onClick={showGameHistory}>
+                        <img src={require('../images/iconHistory.png')} style={{ width: '50px', height: '50px' }} alt="Imagen historico"/>
+                    </Button>
+                  </Tooltip>
+                  <Tooltip title="Ranking">
+                    <Button variant="contained" color="inherit" style={{ background: '#9A77B0', border: 'none', padding: 0, marginRight: '10px' }} onClick={showRanking}>
+                        <img src={require('../images/iconRanking.png')} style={{ width: '50px', height: '50px' }} alt="Imagen ranking"/>
+                    </Button>
+                  </Tooltip>
+                </Grid>
+                <Grid container justifyContent="flex-end">
+                  <Tooltip title="Cerrar sesión">
+                    <Button variant="contained" color="inherit" style={{ background: '#9A77B0', border: 'none', padding: 0, width: '50px', marginRight: '10px' }}>
+                        <img src={require('../images/iconUser.png')} style={{ width: '50px', height: '50px' }} alt="Imagen usuario"/>
+                    </Button>
+                  </Tooltip>
+                  <Tooltip title="Cerrar sesión">
+                    <Button variant="contained" color="inherit" style={{ background: '#9A77B0', border: 'none', padding: 0, marginRight: '10px' }} onClick={showLogout}>
+                        <img src={require('../images/logout.png')} style={{ width: '50px', height: '50px' }} alt="Imagen logout"/>
+                    </Button>
+                  </Tooltip>
+                </Grid>
+                </Hidden>
+            </Toolbar>
+        </AppBar>
     );
 };
 
diff --git a/webapp/src/components/fragments/NavigationBar_Game.js b/webapp/src/components/fragments/NavigationBar_Game.js
index 07317052..977b7303 100644
--- a/webapp/src/components/fragments/NavigationBar_Game.js
+++ b/webapp/src/components/fragments/NavigationBar_Game.js
@@ -1,20 +1,30 @@
 import React, {useCallback, useState} from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { AppBar, Button, Grid } from '@mui/material';
-import { useUser } from '../UserContext';
+import { AppBar, Toolbar, IconButton, Menu, MenuItem, Grid, Button, Hidden} from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
 import axios from 'axios';
 
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 const NavigationBar_Game = () => {
 
     const [error, setError] = useState('');
-    const { usernameGlobal, setUsernameGlobal } = useUser();
     const navigate = useNavigate();
 
     const location = useLocation();
 
     const isHiddenRoute = location.pathname !== '/Game' ;
 
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+
+    const handleMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
 
     const showHome = useCallback(async () => {
         try {
@@ -32,14 +42,33 @@ const NavigationBar_Game = () => {
 
     return (
         <AppBar position="fixed" sx={{ backgroundColor: '#9A77B0' }}>
-            <Grid container justifyContent="space-between">
-                {/* Columna izquierda */}
-                <Grid item>
-                    <Button variant="contained" color="inherit" style={{ background: '#9A77B0', border: 'none', padding: 0, marginRight: '10px', marginLeft: '10px'}} onClick={showHome}>
-                        <img src={require('../images/home.png')} style={{ width: '50px', height: '50px' }} alt="Imagen home"/>
-                    </Button>
-                </Grid>
-            </Grid>
+            <Toolbar>
+                <IconButton
+                    size="large"
+                    edge="start"
+                    color="inherit"
+                    aria-label="menu"
+                    onClick={handleMenu}
+                    sx={{ mr: 2, display: { sm: 'none' } }}
+                >
+                    <MenuIcon />
+                </IconButton>
+                <Menu
+                    anchorEl={anchorEl}
+                    open={open}
+                    onClose={handleClose}
+                    onClick={handleClose}
+                >
+                    <MenuItem onClick={showHome}>Inicio</MenuItem>
+                </Menu>
+                <Hidden smDown>
+                    <Grid container justifyContent="flex-start">
+                        <Button variant="contained" color="inherit" style={{ background: '#9A77B0', border: 'none', padding: 0, marginRight: '10px' }} onClick={showHome}>
+                            <img src={require('../images/home.png')} style={{ width: '50px', height: '50px' }} alt="Imagen home"/>
+                        </Button>
+                    </Grid>
+                </Hidden>
+            </Toolbar>
         </AppBar>
     );
 };