diff --git a/webapp/src/components/AddUser.jsx b/webapp/src/components/AddUser.jsx
index 3b0ef7b..1e0bb31 100644
--- a/webapp/src/components/AddUser.jsx
+++ b/webapp/src/components/AddUser.jsx
@@ -40,63 +40,66 @@ const AddUser = () => {
   };
 
   return (
-    
-    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
-      <Typography component="h1" variant="h5">
-        Register
-      </Typography>
-      <TextField
-        name="username"
-        margin="normal"
-        fullWidth
-        label="Username"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-      />
-      <TextField
-        name="email"
-        type='email'
-        margin="normal"
-        fullWidth
-        label="Email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-      />
-      <TextField
-        name="password"
-        margin="normal"
-        fullWidth
-        label="Password"
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      <TextField
-        name="cpassword"
+    <div className="content-center justify-center bg-[#2E2F82] " style={{ height: "92.9vh" }}>
+      <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }} className='bg-white rounded-xl content-center justify-center'>
+        <h1 className='py-5 text-4xl font-bold text-[#111827]'>
+          Register
+        </h1>
+        <TextField
+          name="username"
+          margin="normal"
+          fullWidth
+          label="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <TextField
+          name="email"
+          type='email'
+          margin="normal"
+          fullWidth
+          label="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <TextField
+          name="password"
+          margin="normal"
+          fullWidth
+          label="Password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <TextField
+          name="cpassword"
 
-        margin="normal"
-        fullWidth
-        label="Confirm Password"
-        type="password"
-        value={cpassword}
-        onChange={(e) => setcPassword(e.target.value)}
-      />
-      <Button variant="contained" color="primary" onClick={addUser}>
-        Register
-      </Button>
-      <Typography component="div" align="center" sx={{ marginTop: 2 }}>
+          margin="normal"
+          fullWidth
+          label="Confirm Password"
+          type="password"
+          value={cpassword}
+          onChange={(e) => setcPassword(e.target.value)}
+        />
+        <div className='py-5 content-center justify-center'>
+          <Button variant="contained" color="primary" className="flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={addUser}>
+            Register
+          </Button>
+        </div>
+        <Typography component="div" align="center" sx={{ marginTop: 2, marginBottom: 3 }}>
           <Link to="/login">Already have an account? Log in here.</Link>
         </Typography>
 
-      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
-      {
-        error && (
-          <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
-        )
-      }
-    </Container>
+        <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
+        {
+          error && (
+            <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
+          )
+        }
+      </Container>
+    </div>
+
 
-    
   );
 };
 
diff --git a/webapp/src/components/Game.jsx b/webapp/src/components/Game.jsx
index fed60c3..9367d5b 100644
--- a/webapp/src/components/Game.jsx
+++ b/webapp/src/components/Game.jsx
@@ -35,41 +35,43 @@ const Game = () => {
     }, [isAuthenticated, navigate]);
 
     return (
-        <div>
-            {isAuthenticated()? (flagGameStarted || cityGameStarted || monumentGameStarted
-                 || touristAttractionGameStarted || foodGameStarted) ?(
-                <div>
-                    {flagGameStarted && <Question type="imgs" category="flags"/>}
-                    {cityGameStarted && <Question type="imgs" category="cities"/>}
-                    {monumentGameStarted && <Question type="imgs" category="monuments"/>}
-                    {touristAttractionGameStarted && <Question type="imgs" category="tourist_attractions"/>}
-                    {foodGameStarted && <Question type="imgs" category="foods"/>}
+        <div className="bg-[#4c2185]" style={{ height: "92.9vh" }}>
+            {isAuthenticated() ? (flagGameStarted || cityGameStarted || monumentGameStarted
+                || touristAttractionGameStarted || foodGameStarted) ? (
+                <div className="flex justify-center content-center pt-10 h-auto">
+                    {flagGameStarted && <Question type="imgs" category="flags" />}
+                    {cityGameStarted && <Question type="imgs" category="cities" />}
+                    {monumentGameStarted && <Question type="imgs" category="monuments" />}
+                    {touristAttractionGameStarted && <Question type="imgs" category="tourist_attractions" />}
+                    {foodGameStarted && <Question type="imgs" category="foods" />}
                 </div>
             ) : (
-                <div className="flex flex-col items-center justify-center mt-16">
-                    <h1 className="text-6xl font-bold text-zinc-700">{auth.username}, Let's Play! Guess the...</h1>
-                    <button onClick={startFlagsGame} className="mt-10 border border-blue-500 text-blue-500 font-bold text-2xl py-2 px-4 rounded-full 
+                <div className="flex flex-col items-center justify-center">
+                    <h1 className="text-6xl font-bold text-center text-white pt-5">{auth.username}, Let's Play! Guess the...</h1>
+                    <div className="grid grid-cols-1 p-7 gap-5">
+                        <button onClick={startFlagsGame} className="w-auto flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 
                         transition-transform transform-gpu hover:scale-105">
-                    Flag
-                    </button>
-                    <button onClick={startCitiesGame} className="mt-10 border border-blue-500 text-blue-500 font-bold text-2xl py-2 px-4 rounded-full 
+                            Flag
+                        </button>
+                        <button onClick={startCitiesGame} className="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10
                         transition-transform transform-gpu hover:scale-105">
-                    City
-                    </button>
-                    <button onClick={startMonumentsGame} className="mt-10 border border-blue-500 text-blue-500 font-bold text-2xl py-2 px-4 rounded-full 
+                            City
+                        </button>
+                        <button onClick={startMonumentsGame} className="w-auto flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10  
                         transition-transform transform-gpu hover:scale-105">
-                    Monument
-                    </button>
-                    <button onClick={startTouristAttractionsGame} className="mt-10 border border-blue-500 text-blue-500 font-bold text-2xl py-2 px-4 rounded-full 
+                            Monument
+                        </button>
+                        <button onClick={startTouristAttractionsGame} className="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10
                         transition-transform transform-gpu hover:scale-105">
-                    Tourist attraction
-                    </button>
-                    <button onClick={startFoodsGame} className="mt-10 border border-blue-500 text-blue-500 font-bold text-2xl py-2 px-4 rounded-full 
+                            Tourist attraction
+                        </button>
+                        <button onClick={startFoodsGame} className="w-auto flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10  
                         transition-transform transform-gpu hover:scale-105">
-                    Food
-                    </button>
+                            Food
+                        </button>
+                    </div>
                 </div>
-            ):""}
+            ) : ""}
         </div>
     )
 };
diff --git a/webapp/src/components/ImgGameReport.jsx b/webapp/src/components/ImgGameReport.jsx
index b18c968..eeb6abc 100644
--- a/webapp/src/components/ImgGameReport.jsx
+++ b/webapp/src/components/ImgGameReport.jsx
@@ -22,7 +22,7 @@ const ImgGameReport = (props) => {
                             <div class="rounded-md shadow">
                                 <a href=""
                                     onClick={props.restartGame}
-                                    class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
+                                    class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg">
                                     Restart Game
                                 </a>
                             </div>
@@ -32,7 +32,7 @@ const ImgGameReport = (props) => {
                             <div class="mt-3 sm:mt-0 sm:ml-3">
                                 <a href=""
                                     onClick={loadRankings}
-                                    class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
+                                    class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg">
                                     See Rankings
                                 </a>
                             </div>
@@ -45,7 +45,7 @@ const ImgGameReport = (props) => {
 
                 {answers.map((answer) => {
                     return (
-                        <div class="flex flex-col rounded-2xl w-80 bg-[#ffffff] shadow-xl" key={answer.associate}>
+                        <div class="flex flex-col rounded-2xl bg-[#ffffff] shadow-xl" key={answer.associate}>
                             <figure class="flex justify-center items-center rounded-2xl">
                                 <img src={answer.associate} alt="Card Preview" class="rounded-t-2xl"></img>
                             </figure>
diff --git a/webapp/src/components/Login.jsx b/webapp/src/components/Login.jsx
index 3428c3c..b960b5f 100644
--- a/webapp/src/components/Login.jsx
+++ b/webapp/src/components/Login.jsx
@@ -11,7 +11,7 @@ const Login = () => {
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const signIn = useSignIn();
-   const navigate = useNavigate();
+  const navigate = useNavigate();
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
@@ -34,7 +34,7 @@ const Login = () => {
             }
           })) { // Only if you are using refreshToken feature
             // Redirect or do-something
-             navigate('/');
+            navigate('/');
             //window.location.href = '/';
           } else {
             //Throw error
@@ -62,42 +62,45 @@ const Login = () => {
   };
 
   return (
+    <div className="content-center justify-center bg-[#2E2F82] " style={{ height: "92.9vh" }}>
+      <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }} className='bg-white rounded-xl content-center justify-center'>
+        <h1 className='py-5 text-4xl font-bold text-[#111827]'>
+          Access WIQ
+        </h1>
+        <TextField
+          name="username"
+          margin="normal"
+          fullWidth
+          label="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <TextField
 
-    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
-      <Typography component="h1" variant="h5">
-        Log in to WIQ
-      </Typography>
-      <TextField
-        name="username"
-        margin="normal"
-        fullWidth
-        label="Username"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-      />
-      <TextField
-        name="password"
-        margin="normal"
-        fullWidth
-        label="Password"
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      <Button variant="contained" color="primary" onClick={loginUser}>
-        Log In
-      </Button>
-      <Typography component="div" align="center" sx={{ marginTop: 2 }}>
-        <Link to="/register">New around here? Create account.</Link>
-      </Typography>
+          name="password"
+          margin="normal"
+          fullWidth
+          label="Password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <div className='py-5 content-center justify-center'>
+          <Button variant="contained" className="flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={loginUser}>
+            Log In
+          </Button>
+        </div>
+        <Typography component="div" align="center" sx={{ marginTop: 2, marginBottom: 3 }}>
+          <Link to="/register">New around here? Create account.</Link>
+        </Typography>
 
 
-      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
-      {error && (
-        <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
-      )}
-    </Container>
-
+        <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
+        {error && (
+          <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
+        )}
+      </Container>
+    </div>
   );
 };
 
diff --git a/webapp/src/components/MainPage.jsx b/webapp/src/components/MainPage.jsx
index e4ea156..7db41a5 100644
--- a/webapp/src/components/MainPage.jsx
+++ b/webapp/src/components/MainPage.jsx
@@ -10,31 +10,50 @@ const MainPage = () => {
     const auth = useAuthUser();
     const navigate = useNavigate();
     useEffect(() => {
-        
-        if(isAuthenticated()===false) {
+
+        if (isAuthenticated() === false) {
             logged = false;
-        }else{
+        } else {
             logged = true;
-        }  
-               
+        }
+
     }
-    , [logged]);
+        , [logged]);
 
     return (
-        <div className="flex flex-col items-center justify-center mt-16">
+        <div className="flex flex-col items-center justify-center text-center bg-[#2E2F82]" style={{height: "92.9vh"}}>
             {logged ?
                 <div>
-                <h1 className="text-6xl font-bold text-zinc-700">Welcome back, {auth.username}!</h1>
-                <hr className=" my-8"/>
-                <button className="px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-bold rounded-full transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={() => navigate("/play")}>
-                    Start Playing
-                </button>
-            </div>:
+                    
+                    <h1 className="text-6xl font-bold text-white mb-8 text-white">Welcome back, {auth.username}!</h1>
+                    
+                    
+                    <div className="flex flex-col items-center justify-center">
+
+                        <div className="basis-1 flex flex-col items-center justify-center">
+                        <button className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg " onClick={() => navigate("/play")}>
+                            Start Playing
+                        </button>
+                        </div>
+                        <div className="flex flex-row mt-5 " >
+                            <button className=" flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={() => navigate("/squads")}>
+                                Squads
+                            </button>
+                            <div className="mx-1"/>
+                            
+                            <button className=" flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={() => navigate("/userProfile")}>
+                                My stats
+                            </button>
+                        </div>
+                    </div>
+                </div> :
                 <div>
-                    <h1 className="text-6xl font-bold text-zinc-700">Welcome to WIQ, Please log in to play!</h1>
-                    <button className="px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-bold rounded-full transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={() => navigate("/register")}>
+                    <h1 className="text-6xl font-bold text-white mb-8 text-white">Welcome to WIQ, Please log in to play!</h1>
+                    <div className="basis-1 flex flex-col items-center justify-center">
+                    <button className=" flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={() => navigate("/register")}>
                         Create account
                     </button>
+                    </div>
                 </div>
             }
         </div >
diff --git a/webapp/src/components/Navbar.jsx b/webapp/src/components/Navbar.jsx
index e46f916..b32d636 100644
--- a/webapp/src/components/Navbar.jsx
+++ b/webapp/src/components/Navbar.jsx
@@ -15,10 +15,10 @@ function Navbar() {
 
         <nav class="bg-white border-gray-200 dark:bg-gray-900">
             <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-                <a class="flex items-center space-x-3 rtl:space-x-reverse">
+                <div class="flex items-center space-x-3 rtl:space-x-reverse transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg">
                     <img src="/WIQProvFondo.png" class="h-8" alt="WIQ Logo"></img>
-                    <Link to="/" class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">WIQ</Link>
-                </a>
+                    <Link to="/" class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white ">WIQ</Link>
+                </div>
                 <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
                     {isAuthenticated() ? <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" onClick={() => Logout()}>Log out</button> : <Link to="/login" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" >Log In</Link>}
                     <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
@@ -31,16 +31,16 @@ function Navbar() {
                 <div class="hidden w-full md:block md:w-auto" id="navbar-default">
                     <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
                         <li>
-                            <Link to="/play" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Play</Link>
+                            <Link to="/play" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" aria-current="page">Play</Link>
                         </li>
                         <li>
                             <Link to="/squads" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Squads</Link>
                         </li>
                         <li>
-                            <Link to="/ranking" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Rankings</Link>
+                            <Link to="/rankings" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Rankings</Link>
                         </li>
                         {isAuthenticated() ? (
-                            <li><Link class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700" to="/userprofile">UserProfile</Link></li>
+                            <li><Link class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700" to="/userprofile">My Profile</Link></li>
                         ):"" }
 
                     </ul>
diff --git a/webapp/src/components/Navbar.test.js b/webapp/src/components/Navbar.test.js
index 0e80380..b94af19 100644
--- a/webapp/src/components/Navbar.test.js
+++ b/webapp/src/components/Navbar.test.js
@@ -26,7 +26,7 @@ describe('Navbar', () => {
     expect(getByText('WIQ')).toBeInTheDocument();
     expect(getByText('Play')).toBeInTheDocument();
     expect(getByText('Rankings')).toBeInTheDocument();
-    expect(getByText('UserProfile')).toBeInTheDocument();
+    expect(getByText('My Profile')).toBeInTheDocument();
     expect(getByText('Log out')).toBeInTheDocument();
   });
 
diff --git a/webapp/src/components/Question.jsx b/webapp/src/components/Question.jsx
index 697b85c..896e674 100644
--- a/webapp/src/components/Question.jsx
+++ b/webapp/src/components/Question.jsx
@@ -117,19 +117,19 @@ const Question = (props) => {
 
 
     return (
-        finished ? <ImgGameReport score={score} answers={answers} restartGame={restartGame} /> :
-        <div className="bg-slate-50 shadow-lg rounded-md p-4 mx-auto max-w-2xl mt-16">
+        finished ? <div className="bg-white"><ImgGameReport score={score} answers={answers} restartGame={restartGame}  /></div> :
+        <div className="bg-slate-50 shadow-lg rounded-md p-4 mx-auto max-w-2xl ">
             <div className="absolute bottom-0 left-0 p-2 bg-gray-200 rounded-md">
                 Score: {score}
             </div>
             {loading ? (
                 <>
-                    <h1 className="font-bold text-2xl text-gray-800 pl-8"><div class="flex justify-center items-center h-screen">
+                    <h1 className="font-bold text-2xl text-gray-800 pl-8"><div class="flex justify-center items-center h-fit">
                         <div class="rounded-full h-20 w-20 bg-violet-800 animate-ping"></div>
                     </div></h1>
                 </>
             ) :  (
-                <>
+                <div>
                     <h1 className="font-bold text-3xl text-gray-800 pl-8">{questions[currentQuestion].question}</h1>
                     <div class="relative h-5 rounded-full overflow-hidden bg-gray-300 mt-20 mx-10">
                         <div class="absolute top-0 bottom-0 left-0 rounded-full bg-gradient-to-r from-pink-500 to-purple-500"
@@ -145,7 +145,7 @@ const Question = (props) => {
                             </button>
                         ))}
                     </div>
-                </>
+                </div>
             )}
         </div>
     )
diff --git a/webapp/src/components/Squads.jsx b/webapp/src/components/Squads.jsx
index 119e713..b6d5354 100644
--- a/webapp/src/components/Squads.jsx
+++ b/webapp/src/components/Squads.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 
 function Squads() {
     return (
-        <div class="mt=6">
-            <h1>Squads</h1>
-            <h2>Coming soon...</h2>
+        <div class="content-align text-center justify-center bg-[#4c2185]" style={{height: "92.9vh"}}>
+            <h1 className="text-6xl font-bold text-white mb-8 text-white">Squads</h1>
+            <h2 className="text-4xl font-body text-white mb-8 text-white">Coming soon...</h2>
         </div>
     );
 }
diff --git a/webapp/src/components/ranking/RankingLayout.jsx b/webapp/src/components/ranking/RankingLayout.jsx
index 50ffece..f675fe5 100644
--- a/webapp/src/components/ranking/RankingLayout.jsx
+++ b/webapp/src/components/ranking/RankingLayout.jsx
@@ -6,49 +6,49 @@ const RankingsLayout = () => {
     
     const handleFilterClick = (filter) => {
         setFilter(filter);
+      
     }
 
     return (
-        <div className="flex h-screen">
-            <div id="sidebar" className="md:flex flex-col w-48 bg-[#504185]">
-                <div className="flex items-center justify-center h-16 bg-[#322653]">
-                    <span className="text-xl font-bold text-white">Rankings</span>
+        <div className="flex flex-col bg-[#4c2185]" style={{height: "92.9vh"}}>
+            <div id="sidebar" className="sm:flex flex-col w-auto bg-[#4c2185]">
+                <div className="flex items-center justify-center h-16 bg-[#4c2185]">
+                    <span className="text-4xl font-bold text-white">Rankings</span>
                 </div>
-                <div id="categories" className="flex flex-col flex-1 overflow-y-auto">
-                    <nav className="flex-1 px-2 py-4 bg-gradient-to-b
-                        from-[#3a2f60] from-10% to-[#504185] to-60%">
-                        <button className="flex items-center px-4 py-2 text-gray-100 rounded-lg hover:bg-[#73689b]"
+                <div id="categories" className=" align-center content-center bg-[#4c2185]">
+                    <nav className="grid grid-cols-3 gap-3 lg:grid-cols-6 px-2 py-4 bg-[#4c2185]">
+                        <button className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg"
                             onClick={() => handleFilterClick('global')}>
                             Global
                         </button>
-                        <button className="flex items-center px-4 py-2 text-gray-100 rounded-lg hover:bg-[#73689b]"
+                        <button className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg"
                             onClick={() => handleFilterClick('flags')}>
                             Flags
                         </button>
-                        <button className="flex items-center px-4 py-2 text-gray-100 rounded-lg hover:bg-[#73689b]"
+                        <button className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg"
                             onClick={() => handleFilterClick('cities')}>
                             Cities
                         </button>
-                        <button className="flex items-center px-4 py-2 text-gray-100 rounded-lg hover:bg-[#73689b]"
+                        <button className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg"
                             onClick={() => handleFilterClick('monuments')}>
                             Monuments
                         </button>
-                        <button className="flex items-center px-4 py-2 text-gray-100 rounded-lg hover:bg-[#73689b]"
+                        <button className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg"
                             onClick={() => handleFilterClick('foods')}>
                             Foods
                         </button>
-                        <button className="flex items-center px-4 py-2 text-gray-100 rounded-lg hover:bg-[#73689b]"
+                        <button className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg"
                             onClick={() => handleFilterClick('tourist_attractions')}>
                             Attractions
                         </button>
                     </nav>
                 </div>
             </div>
-
-            <div className="flex flex-col flex-1 overflow-y-auto">
-                <div className="flex items-center px-4 h-16">
-                    <h1 className="text-4xl font-bold uppercase text-[#4d3b7f]">{filter}</h1>
+            <div className="content-center align-center px-4 py-3 bg-[#4c2185]">
+                    <h1 className="text-4xl text-center font-bold uppercase text-white">{filter==='tourist_attractions'?'Attractions':filter} Ranking</h1>
                 </div>
+            <div className="flex flex-col flex-1 overflow-y-auto bg-[#4c2185]">
+
                 <div className="p-4" id="table">
                     <RankingsTable filter={filter} />
                 </div>
diff --git a/webapp/src/components/ranking/RankingTable.jsx b/webapp/src/components/ranking/RankingTable.jsx
index 93169bb..0b6a1f9 100644
--- a/webapp/src/components/ranking/RankingTable.jsx
+++ b/webapp/src/components/ranking/RankingTable.jsx
@@ -1,60 +1,96 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 
-const apiEndpoint =  process.env.REACT_APP_API_ENDPOINT ||'http://localhost:8000';
+const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
 const RankingsTable = ({ filter }) => {
-    const [users, setUsers] = useState([]);
-
-    useEffect(() => {
-        const fetchData = async () => {
-          try {
-            const response = await axios.get(`${apiEndpoint}/rankings/${filter}`);
-            setUsers(response.data);
-          } catch (error) {
-            console.error('Error fetching data:', error);
-          }
-        };
-
-        fetchData();
-      }, [filter]);
-
-    return (
-        <div data-testid='ranking-table' className="flex flex-col">
-          <div className="overflow-x-auto sm:mx-6 lg:mx-8">
-            <div className="py-2 inline-block min-w-full sm:px-6 lg:px-8">
-              <div className="overflow-hidden">
-                <table className="min-w-full">
-                  <thead className="border-b">
-                    <tr>
-                      <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left"></th>
-                      <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">User</th>
-                      <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">Points</th>
-                      <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">Questions</th>
-                      <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">Correct</th>
-                      <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">Wrong</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    { 
-                      users.map(user => (
-                        <tr className="border-b">
-                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{user.position}</td>
-                          <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{user.name}</td>
-                          <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{user.points}</td>
-                          <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{user.questions}</td>
-                          <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{user.correct}</td>
-                          <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{user.wrong}</td>
-                        </tr>
-                      ))
-                    }
-                  </tbody>
-                </table>
-              </div>
-            </div>
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axios.get(`${apiEndpoint}/rankings/${filter}`);
+        setUsers(response.data);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    fetchData();
+  }, [filter]);
+
+  return (
+    <div data-testid='ranking-table' className="flex flex-col ">
+      <div className="overflow-x-auto sm:mx-6 lg:mx-8">
+        <div className="py-2 inline-block min-w-full sm:px-6 lg:px-8">
+          <div className="overflow-hidden rounded-md">
+            <table className="min-w-full">
+              <thead className="border-b bg-[#322653]">
+                <tr>
+                  <th scope="col" className="text-sm font-medium text-white px-6 py-4 text-left"></th>
+                  <th scope="col" className="text-sm font-medium text-white px-6 py-4 text-left">User</th>
+                  <th scope="col" className="text-sm font-medium text-white px-6 py-4 text-left">Points</th>
+                  <th scope="col" className="text-sm font-medium text-white px-6 py-4 text-left">Questions</th>
+                  <th scope="col" className="text-sm font-medium text-white px-6 py-4 text-left">Correct</th>
+                  <th scope="col" className="text-sm font-medium text-white px-6 py-4 text-left">Wrong</th>
+                </tr>
+              </thead>
+              <tbody>
+                {
+                  users.map(user => (
+                    user.position === 1 ? <tr className="border-b  bg-amber-500">
+                      <td className="px-6 py-4 whitespace-nowrap text-lg font-bold text-white">{user.position}</td>
+                      <td className="text-lg text-white  font-bold px-6 py-4 whitespace-nowrap">{user.name}</td>
+                      <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.points}</td>
+                      <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.questions}</td>
+                      <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.correct}</td>
+                      <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.wrong}</td>
+                    </tr> :
+                      user.position === 2 ? <tr className="border-b  bg-[#b0bec5]">
+                        <td className="px-6 py-4 whitespace-nowrap text-lg font-bold text-white">{user.position}</td>
+                        <td className="text-lg text-white font-bold  px-6 py-4 whitespace-nowrap">{user.name}</td>
+                        <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.points}</td>
+                        <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.questions}</td>
+                        <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.correct}</td>
+                        <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.wrong}</td>
+                      </tr> :
+                        user.position === 3 ? <tr className="border-b  bg-amber-800">
+                          <td className="px-6 py-4 whitespace-nowrap text-lg font-bold text-white">{user.position}</td>
+                          <td className="text-lg text-white font-bold px-6 py-4 whitespace-nowrap">{user.name}</td>
+                          <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.points}</td>
+                          <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.questions}</td>
+                          <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.correct}</td>
+                          <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.wrong}</td>
+                        </tr> :
+                          user.position % 2 === 0 ?
+                            <tr className="border-b  bg-indigo-600">
+                              <td className="px-6 py-4 whitespace-nowrap text-base font-bold text-white">{user.position}</td>
+                              <td className="text-m text-white  px-6 py-4 whitespace-nowrap">{user.name}</td>
+                              <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.points}</td>
+                              <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.questions}</td>
+                              <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.correct}</td>
+                              <td className="text-sm text-white  px-6 py-4 whitespace-nowrap">{user.wrong}</td>
+                            </tr>
+                            :
+                            <tr className="border-b bg-indigo-100">
+                              <td className="px-6 py-4 whitespace-nowrap text-base font-medium text-indigo-700 ">{user.position}</td>
+                              <td className="text-m text-indigo-700  font-light px-6 py-4 whitespace-nowrap">{user.name}</td>
+                              <td className="text-sm text-indigo-700  font-light px-6 py-4 whitespace-nowrap">{user.points}</td>
+                              <td className="text-sm text-indigo-700  font-light px-6 py-4 whitespace-nowrap">{user.questions}</td>
+                              <td className="text-sm text-indigo-700  font-light px-6 py-4 whitespace-nowrap">{user.correct}</td>
+                              <td className="text-sm text-indigo-700  font-light px-6 py-4 whitespace-nowrap">{user.wrong}</td>
+                            </tr>
+
+
+                  ))
+                }
+              </tbody>
+            </table>
           </div>
         </div>
-    )
+      </div>
+    </div>
+  )
 }
 
 export default RankingsTable;
\ No newline at end of file