diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
index 229cd8b..6eaee8f 100644
--- a/gatewayservice/gateway-service.js
+++ b/gatewayservice/gateway-service.js
@@ -130,14 +130,12 @@ app.get('/rankings/:filter', async (req, res) => {
 
 app.get('/ranking/user', async (req, res) => {
   const username = req.query.username;
-  const category = req.query.category;
 
   try {
     // Forward the request to the user service
     const result = await axios.get(`${userServiceUrl}/ranking/user`, {
       params: {
-        username: username,
-        category: category
+        username: username
       }
     });
 
diff --git a/gatewayservice/gateway-service.test.js b/gatewayservice/gateway-service.test.js
index 9a1ba0c..4ba0838 100644
--- a/gatewayservice/gateway-service.test.js
+++ b/gatewayservice/gateway-service.test.js
@@ -90,7 +90,6 @@ describe('Gateway Service', () => {
     } else if (url.endsWith('/ranking/user')) {
       return Promise.resolve({data:{
         username: data.params.username,
-        category: data.params.category,
         points: 5,
         questions: 7,
         correct: 5,
@@ -290,13 +289,11 @@ it('should forward get Foods request to question service', async () => {
       .get('/ranking/user')
       .query({
           username: "username",
-          category: "category"
         })
 
     // Verify response body
     expect(response.body).toEqual({
       username: "username",
-      category: "category",
       points: 5,
       questions: 7,
       correct: 5,
diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js
index a8989c6..0d63028 100644
--- a/users/userservice/user-service.js
+++ b/users/userservice/user-service.js
@@ -57,7 +57,6 @@ app.get('/rankings/:filter', async (req, res) => {
 // Get the ranking info for a specified category and user
 app.get('/ranking/user', async (req, res) => {
   const username = req.query.username;
-  const category = req.query.category;
 
   try {
     // Fetch the user with the specified username
@@ -68,17 +67,7 @@ app.get('/ranking/user', async (req, res) => {
       return res.status(400).json("Error: User not found");
     }
 
-    // Extract ranking info for the specified category
-    const rankingInfo = {
-      username: user.username,
-      category,
-      points: user.ranking[category].points,
-      questions: user.ranking[category].questions,
-      correct: user.ranking[category].correct,
-      wrong: user.ranking[category].wrong
-    };
-
-    res.status(200).json(rankingInfo);
+    res.status(200).json(user);
   } catch (error) {
     res.status(400).json({ error: error.message });
   }
diff --git a/webapp/src/components/ranking/profile_img.webp b/webapp/public/profile_img.webp
similarity index 100%
rename from webapp/src/components/ranking/profile_img.webp
rename to webapp/public/profile_img.webp
diff --git a/webapp/src/App.jsx b/webapp/src/App.jsx
index 93dbea8..922ca25 100644
--- a/webapp/src/App.jsx
+++ b/webapp/src/App.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import {BrowserRouter, Routes, Route} from 'react-router-dom'
-import AddUser from './components/AddUser';
+import AddUser from './components/auth/AddUser';
 import Navbar from './components/Navbar';
-import Login from './components/Login';
+import Login from './components/auth/Login';
 import RankingsLayout from './components/ranking/RankingLayout';
-import Game from './components/Game';
+import Game from './components/game/Game';
 import MainPage from './components/MainPage';
 import Squads from './components/Squads';
-import UserProfile from './components/UserProfile';
+import UserProfile from './components/user/UserProfile';
 
 
 function App() {
diff --git a/webapp/src/components/MainPage.jsx b/webapp/src/components/MainPage.jsx
index 7db41a5..bf95513 100644
--- a/webapp/src/components/MainPage.jsx
+++ b/webapp/src/components/MainPage.jsx
@@ -21,11 +21,11 @@ const MainPage = () => {
         , [logged]);
 
     return (
-        <div className="flex flex-col items-center justify-center text-center bg-[#2E2F82]" style={{height: "92.9vh"}}>
+        <div className="flex flex-col items-center justify-center text-center bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900" style={{height: "92.9vh"}}>
             {logged ?
                 <div>
                     
-                    <h1 className="text-6xl font-bold text-white mb-8 text-white">Welcome back, {auth.username}!</h1>
+                    <h1 className="text-6xl font-bold mb-8 text-white">Welcome back, {auth.username}!</h1>
                     
                     
                     <div className="flex flex-col items-center justify-center">
@@ -48,7 +48,7 @@ const MainPage = () => {
                     </div>
                 </div> :
                 <div>
-                    <h1 className="text-6xl font-bold text-white mb-8 text-white">Welcome to WIQ, Please log in to play!</h1>
+                    <h1 className="text-6xl font-bold 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
diff --git a/webapp/src/components/Squads.jsx b/webapp/src/components/Squads.jsx
index b6d5354..849be82 100644
--- a/webapp/src/components/Squads.jsx
+++ b/webapp/src/components/Squads.jsx
@@ -3,8 +3,8 @@ import React from 'react';
 function Squads() {
     return (
         <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>
+            <h1 className="text-6xl font-bold mb-8 text-white">Squads</h1>
+            <h2 className="text-4xl font-body mb-8 text-white">Coming soon...</h2>
         </div>
     );
 }
diff --git a/webapp/src/components/UserProfile.jsx b/webapp/src/components/UserProfile.jsx
deleted file mode 100644
index 97776cb..0000000
--- a/webapp/src/components/UserProfile.jsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useEffect, useState, useCallback  } from "react";
-import axios from "axios";
-import useAuthUser from "react-auth-kit/hooks/useAuthUser";
-import userAvatar from "./ranking/profile_img.webp";
-
-const UserProfile = () => {
-    const auth = useAuthUser();
-    const [category, setCategory] = useState('global');
-    const [questions, setQuestions] = useState(0);
-    const [right, setRight] = useState(0);
-    const [wrong, setWrong] = useState(0);
-
-    const apiEndpoint =  process.env.REACT_APP_API_ENDPOINT ||'http://localhost:8000';
-
-
-    const handleCategoryChange = useCallback(async (newCategory) => {
-        try {
-            const result = await axios.get(`${apiEndpoint}/ranking/user`, {
-                params: {
-                  username: auth.username,
-                  category: newCategory
-                }
-              });
-
-            setQuestions(result.data.questions);
-            setRight(result.data.correct);
-            setWrong(result.data.wrong);
-            setCategory(newCategory);
-        } catch (error) {
-            console.error('Error fetching question:', error);
-        }
-    }, [apiEndpoint, auth.username]);
-
-    useEffect(() => {
-        handleCategoryChange(category);
-    }, [handleCategoryChange, category]);
-
-
-    return (
-        <div className="user-profile">
-                <div className="user-details">
-                <div className="user-info">
-                    <img src={userAvatar} alt="User Avatar" className="user-avatar" style={{ width: "300px", height: "300px" }} />
-                    <h2 className="md:p-4 py-3 px-0 font-bold text-gray-600 hover:text-gray-900">Username: {auth.username}</h2>
-
-                    <p>Email: {auth.email}</p>
-                    <p>Joined: {new Date(auth.createdAt).toLocaleDateString()}</p>
-
-
-                    {/* Buttons to change category */}
-                <div className="category-buttons" style={{ display: 'flex', justifyContent: 'center', marginTop: '10px' }}>
-                    <button style={{ marginRight: '8px', color: 'white', backgroundColor: 'purple', border: 'none', borderRadius: '20px', padding: '10px 20px', cursor: 'pointer' }} onClick={() => handleCategoryChange('global')}>Global</button>
-                    <button style={{ marginRight: '8px', color: 'white', backgroundColor: 'purple', border: 'none', borderRadius: '20px', padding: '10px 20px', cursor: 'pointer' }} onClick={() => handleCategoryChange('flags')}>Flags</button>
-                    <button style={{ marginRight: '8px', color: 'white', backgroundColor: 'purple', border: 'none', borderRadius: '20px', padding: '10px 20px', cursor: 'pointer' }} onClick={() => handleCategoryChange('cities')}>Cities</button>
-                    <button style={{ marginRight: '8px', color: 'white', backgroundColor: 'purple', border: 'none', borderRadius: '20px', padding: '10px 20px', cursor: 'pointer' }} onClick={() => handleCategoryChange('monuments')}>Monuments</button>
-                    <button style={{ marginRight: '8px', color: 'white', backgroundColor: 'purple', border: 'none', borderRadius: '20px', padding: '10px 20px', cursor: 'pointer' }} onClick={() => handleCategoryChange('tourist_attractions')}>Tourist Attractions</button>
-                    <button style={{ color: 'white', backgroundColor: 'purple', border: 'none', borderRadius: '20px', padding: '10px 20px', cursor: 'pointer' }} onClick={() => handleCategoryChange('foods')}>Foods</button>
-                </div>
-
-                <div className="ranking" style={{ textAlign: 'center' }}>
-                    <h3 style={{ marginBottom: '10px', color: 'purple' }}>{category} Ranking</h3>
-                    <div style={{ backgroundColor: '#f4f4f4', padding: '10px', borderRadius: '8px', display: 'inline-block' }}>
-                        <p style={{ marginBottom: '5px' }}>Total Answered Questions: {questions}</p>
-                        <p style={{ marginBottom: '5px', color: 'green' }}>Right Answers: {right}</p>
-                        <p style={{ marginBottom: '5px', color: 'red' }}>Wrong Answers: {wrong}</p>
-                    </div>  
-                </div>
-
-                </div>
-            </div> 
-        </div >
-    );
-};
-
-export default UserProfile;
diff --git a/webapp/src/components/UserProfile.test.js b/webapp/src/components/UserProfile.test.js
deleted file mode 100644
index 4215e00..0000000
--- a/webapp/src/components/UserProfile.test.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import { render, waitFor, fireEvent } from '@testing-library/react';
-import UserProfile from './UserProfile';
-import axios from 'axios';
-import useAuthUser from 'react-auth-kit/hooks/useAuthUser';
-
-jest.mock('axios');
-jest.mock('react-auth-kit/hooks/useAuthUser', () => jest.fn());
-
-describe('UserProfile', () => {
-    beforeEach(() => {
-      useAuthUser.mockReturnValue({
-        username: 'testUser',
-        email: 'test@example.com',
-        createdAt: '2024-01-01T00:00:00Z',
-      });
-    });
-
-    it('renders user details', async () => {
-        axios.get.mockResolvedValueOnce({
-          data: {
-            questions: 10,
-            correct: 7,
-            wrong: 3,
-          },
-        });
-    
-        const { getByText } = render(<UserProfile />);
-    
-        await waitFor(() => {
-          expect(getByText('Username: testUser')).toBeInTheDocument();
-          expect(getByText('Email: test@example.com')).toBeInTheDocument();
-          expect(getByText('Joined: 1/1/2024')).toBeInTheDocument();
-          expect(getByText('Total Answered Questions: 10')).toBeInTheDocument();
-          expect(getByText('Right Answers: 7')).toBeInTheDocument();
-          expect(getByText('Wrong Answers: 3')).toBeInTheDocument();
-        });
-      });
-
-      it('changes category when category button is clicked', async () => {
-        axios.get.mockResolvedValueOnce({
-          data: {
-            questions: 5,
-            correct: 3,
-            wrong: 2,
-          },
-        });
-    
-        const { getByText } = render(<UserProfile />);
-    
-        fireEvent.click(getByText('Flags'));
-    
-        await waitFor(() => {
-          expect(getByText('Total Answered Questions: 5')).toBeInTheDocument();
-          expect(getByText('Right Answers: 3')).toBeInTheDocument();
-          expect(getByText('Wrong Answers: 2')).toBeInTheDocument();
-        });
-      });
-    });
\ No newline at end of file
diff --git a/webapp/src/components/AddUser.jsx b/webapp/src/components/auth/AddUser.jsx
similarity index 96%
rename from webapp/src/components/AddUser.jsx
rename to webapp/src/components/auth/AddUser.jsx
index 1e0bb31..2c9be4c 100644
--- a/webapp/src/components/AddUser.jsx
+++ b/webapp/src/components/auth/AddUser.jsx
@@ -40,7 +40,7 @@ const AddUser = () => {
   };
 
   return (
-    <div className="content-center justify-center bg-[#2E2F82] " style={{ height: "92.9vh" }}>
+    <div className="content-center justify-center bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900" 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
diff --git a/webapp/src/components/AddUser.test.js b/webapp/src/components/auth/AddUser.test.js
similarity index 100%
rename from webapp/src/components/AddUser.test.js
rename to webapp/src/components/auth/AddUser.test.js
diff --git a/webapp/src/components/Login.jsx b/webapp/src/components/auth/Login.jsx
similarity index 96%
rename from webapp/src/components/Login.jsx
rename to webapp/src/components/auth/Login.jsx
index b960b5f..e4156a2 100644
--- a/webapp/src/components/Login.jsx
+++ b/webapp/src/components/auth/Login.jsx
@@ -62,7 +62,7 @@ const Login = () => {
   };
 
   return (
-    <div className="content-center justify-center bg-[#2E2F82] " style={{ height: "92.9vh" }}>
+    <div className="content-center justify-center bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900" 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
diff --git a/webapp/src/components/Login.test.js b/webapp/src/components/auth/Login.test.js
similarity index 100%
rename from webapp/src/components/Login.test.js
rename to webapp/src/components/auth/Login.test.js
diff --git a/webapp/src/components/Game.jsx b/webapp/src/components/game/Game.jsx
similarity index 93%
rename from webapp/src/components/Game.jsx
rename to webapp/src/components/game/Game.jsx
index 9367d5b..a2e49e7 100644
--- a/webapp/src/components/Game.jsx
+++ b/webapp/src/components/game/Game.jsx
@@ -35,7 +35,20 @@ const Game = () => {
     }, [isAuthenticated, navigate]);
 
     return (
-        <div className="bg-[#4c2185]" style={{ height: "92.9vh" }}>
+        <div class="area">
+            <ul class="circles">
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+				<li></li>
+			</ul>
+        <div className="bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900" style={{ height: "92.9vh" }}>
             {isAuthenticated() ? (flagGameStarted || cityGameStarted || monumentGameStarted
                 || touristAttractionGameStarted || foodGameStarted) ? (
                 <div className="flex justify-center content-center pt-10 h-auto">
@@ -73,6 +86,7 @@ const Game = () => {
                 </div>
             ) : ""}
         </div>
+        </div>
     )
 };
 
diff --git a/webapp/src/components/Game.test.js b/webapp/src/components/game/Game.test.js
similarity index 100%
rename from webapp/src/components/Game.test.js
rename to webapp/src/components/game/Game.test.js
diff --git a/webapp/src/components/ImgGameReport.jsx b/webapp/src/components/game/ImgGameReport.jsx
similarity index 100%
rename from webapp/src/components/ImgGameReport.jsx
rename to webapp/src/components/game/ImgGameReport.jsx
diff --git a/webapp/src/components/Question.jsx b/webapp/src/components/game/Question.jsx
similarity index 95%
rename from webapp/src/components/Question.jsx
rename to webapp/src/components/game/Question.jsx
index 896e674..a7da832 100644
--- a/webapp/src/components/Question.jsx
+++ b/webapp/src/components/game/Question.jsx
@@ -118,7 +118,7 @@ const Question = (props) => {
 
     return (
         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="bg-slate-100 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>
@@ -138,8 +138,8 @@ const Question = (props) => {
                     </div>
                     <div className="grid grid-cols-2 mt-10 item">
                         {questions[currentQuestion].images.map(image => (
-                            <button className="transition-transform transform-gpu hover:scale-105 rounded-xl mx-8 my-8 max-h-52 max-w-80">
-                                <img src={image} alt='Loading ...' className="rounded-lg object-contain shadow-md"
+                            <button className="flex flex-auto transition-transform transform-gpu hover:scale-105 rounded-xl mx-8 my-8">
+                                <img src={image} alt='Loading ...' className="rounded-lg object-contain max-w-48 max-h-36"
                                     onClick={async () => await answerQuestion(image, questions[currentQuestion].question)}
                                     onLoad={() => setRenderedImages(renderedImages => renderedImages + 1)}></img>
                             </button>
diff --git a/webapp/src/components/Question.test.js b/webapp/src/components/game/Question.test.js
similarity index 100%
rename from webapp/src/components/Question.test.js
rename to webapp/src/components/game/Question.test.js
diff --git a/webapp/src/components/ranking/RankingLayout.jsx b/webapp/src/components/ranking/RankingLayout.jsx
index f675fe5..1a2f2e4 100644
--- a/webapp/src/components/ranking/RankingLayout.jsx
+++ b/webapp/src/components/ranking/RankingLayout.jsx
@@ -10,7 +10,7 @@ const RankingsLayout = () => {
     }
 
     return (
-        <div className="flex flex-col bg-[#4c2185]" style={{height: "92.9vh"}}>
+        <div className="flex flex-col bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900" 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>
diff --git a/webapp/src/components/user/UserProfile.jsx b/webapp/src/components/user/UserProfile.jsx
new file mode 100644
index 0000000..7a15341
--- /dev/null
+++ b/webapp/src/components/user/UserProfile.jsx
@@ -0,0 +1,185 @@
+import React, { useEffect, useState, useCallback } from "react";
+import axios from "axios";
+import useAuthUser from "react-auth-kit/hooks/useAuthUser";
+
+const UserProfile = () => {
+  const auth = useAuthUser();
+  const [user, setUser] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const apiEndpoint =
+    process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000";
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const res = await axios.get(`${apiEndpoint}/ranking/user`, {
+          params: {
+            username: auth.username,
+          },
+        });
+        setUser(res.data);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [user]);
+
+  return isLoading ? (
+    <div class="area">
+      <ul class="circles">
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+      <div
+        class="flex flex-col bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900"
+        style={{ height: "92.9vh" }}
+      ></div>
+    </div>
+  ) : (
+    <div class="area">
+      <ul class="circles">
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+      <div
+        class="flex flex-col bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900"
+        style={{ height: "92.9vh" }}
+      >
+        <div className="items-center text-center text-gray-100 px-16 pb-8">
+          <h2 className="my-8 text-2xl font-bold text-white md:text-4xl">
+            {user.username}
+          </h2>
+          <p>Email: {user.email}</p>
+          <p>Joined: {new Date(auth.createdAt).toLocaleDateString()}</p>
+        </div>
+
+        <div class="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3">
+          <div class="relative overflow-hidden rounded-lg border bg-white p-2">
+            <div class="flex h-[180px] flex-col justify-between rounded-md p-6">
+              <div class="space-y-2">
+                <h3 class="font-bold">Global</h3>
+                <p class="text-sm text-muted-foreground">
+                  Total questions: {user.ranking.global.questions}
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  Correct questions: {user.ranking.global.correct}
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  Wrong questions: {user.ranking.global.wrong}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="relative overflow-hidden rounded-lg border bg-white p-2">
+            <div class="flex h-[180px] flex-col justify-between rounded-md p-6">
+              <div class="space-y-2">
+                <h3 class="font-bold">Flags</h3>
+                <p class="text-sm text-muted-foreground">
+                  Total questions: {user.ranking.flags.questions}
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  Correct questions: {user.ranking.flags.correct}
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  Wrong questions: {user.ranking.flags.wrong}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="relative overflow-hidden rounded-lg border bg-white p-2">
+            <div class="flex h-[180px] flex-col justify-between rounded-md p-6">
+              <div class="space-y-2">
+                <h3 class="font-bold">Cities</h3>
+                <p class="text-sm text-muted-foreground">
+                  Total questions: {user.ranking.cities.questions}
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  Correct questions: {user.ranking.cities.correct}
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  Wrong questions: {user.ranking.cities.wrong}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="relative overflow-hidden rounded-lg border bg-white p-2">
+            <div class="flex h-[180px] flex-col justify-between rounded-md p-6">
+              <div class="space-y-2">
+                <h3 class="font-bold">Food</h3>
+                <p class="text-sm text-muted-foreground">
+                  Total questions: {user.ranking.foods.questions}
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  Correct questions: {user.ranking.foods.correct}
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  Wrong questions: {user.ranking.foods.wrong}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="relative overflow-hidden rounded-lg border bg-white p-2">
+            <div class="flex h-[180px] flex-col justify-between rounded-md p-6">
+              <div class="space-y-2">
+                <h3 class="font-bold">Attractions</h3>
+                <p class="text-sm text-muted-foreground">
+                  Total questions: {user.ranking.tourist_attractions.questions}
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  Correct questions: {user.ranking.tourist_attractions.correct}
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  Wrong questions: {user.ranking.tourist_attractions.wrong}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="relative overflow-hidden rounded-lg border bg-white p-2">
+            <div class="flex h-[180px] flex-col justify-between rounded-md p-6">
+              <div class="space-y-2">
+                <h3 class="font-bold">Monuments</h3>
+                <p class="text-sm text-muted-foreground">
+                  Total questions: {user.ranking.monuments.questions}
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  Correct questions: {user.ranking.monuments.correct}
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  Wrong questions: {user.ranking.monuments.wrong}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserProfile;
diff --git a/webapp/src/components/user/UserProfile.test.js b/webapp/src/components/user/UserProfile.test.js
new file mode 100644
index 0000000..2d84870
--- /dev/null
+++ b/webapp/src/components/user/UserProfile.test.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import UserProfile from './UserProfile';
+import axios from 'axios';
+import useAuthUser from 'react-auth-kit/hooks/useAuthUser';
+
+jest.mock('axios');
+jest.mock('react-auth-kit/hooks/useAuthUser', () => jest.fn());
+
+describe('UserProfile', () => {
+    beforeEach(() => {
+      useAuthUser.mockReturnValue({
+        username: 'testUser',
+        email: 'test@example.com',
+        createdAt: '2024-01-01T00:00:00Z',
+      });
+    });
+
+    it('renders user details', async () => {
+        axios.get.mockResolvedValueOnce({
+          data: {
+            username: 'testUser',
+            email: 'test@example.com',
+            ranking: {
+              global: {
+                questions: 10,
+                correct: 7,
+                wrong: 3,
+              },
+              cities: {
+                questions: 0,
+                correct: 0,
+                wrong: 0,
+              },
+              flags: {
+                questions: 0,
+                correct: 0,
+                wrong: 0,
+              },
+              monuments: {
+                questions: 0,
+                correct: 0,
+                wrong: 0,
+              },
+              tourist_attractions: {
+                questions: 0,
+                correct: 0,
+                wrong: 0,
+              },
+              foods: {
+                questions: 0,
+                correct: 0,
+                wrong: 0,
+              },
+            }
+          },
+        });
+    
+        const { getByText } = render(<UserProfile />);
+    
+        await waitFor(() => {
+          expect(getByText('testUser')).toBeInTheDocument();
+          expect(getByText('Email: test@example.com')).toBeInTheDocument();
+          expect(getByText('Joined: 1/1/2024')).toBeInTheDocument();
+          expect(getByText('Global')).toBeInTheDocument();
+          expect(getByText('Total questions: 10')).toBeInTheDocument();
+          expect(getByText('Correct questions: 7')).toBeInTheDocument();
+          expect(getByText('Wrong questions: 3')).toBeInTheDocument();
+        });
+      });
+    });
\ No newline at end of file
diff --git a/webapp/src/index.css b/webapp/src/index.css
index 17df0e7..b514b61 100644
--- a/webapp/src/index.css
+++ b/webapp/src/index.css
@@ -15,3 +15,167 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+/*Start Animations*/
+@-webkit-keyframes animatetop {
+	from {
+		top: -300px;
+		opacity: 0;
+	}
+	to {
+		top: 0;
+		opacity: 1;
+	}
+}
+@keyframes animatetop {
+	from {
+		top: -300px;
+		opacity: 0;
+	}
+	to {
+		top: 0;
+		opacity: 1;
+	}
+}
+@-webkit-keyframes zoomIn {
+	0% {
+		opacity: 0;
+		-webkit-transform: scale3d(0.3, 0.3, 0.3);
+		transform: scale3d(0.3, 0.3, 0.3);
+	}
+	50% {
+		opacity: 1;
+	}
+}
+@keyframes zoomIn {
+	0% {
+		opacity: 0;
+		-webkit-transform: scale3d(0.3, 0.3, 0.3);
+		transform: scale3d(0.3, 0.3, 0.3);
+	}
+	50% {
+		opacity: 1;
+	}
+}
+/*End Animations*/
+/*
+-- Start BackGround Animation 
+*/
+.area {
+	width: 100%;
+	height: 92.9vh;
+	position: absolute;
+	z-index: -1;
+}
+
+.circles {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 96%;
+	overflow: hidden;
+}
+
+.circles li {
+	position: absolute;
+	display: block;
+	list-style: none;
+	width: 20px;
+	height: 20px;
+	background: rgba(255, 255, 255, 0.2);
+	animation: animate 25s linear infinite;
+	bottom: -150px;
+}
+
+.circles li:nth-child(1) {
+	left: 25%;
+	width: 80px;
+	height: 80px;
+	animation-delay: 0s;
+}
+
+.circles li:nth-child(2) {
+	left: 10%;
+	width: 20px;
+	height: 20px;
+	animation-delay: 2s;
+	animation-duration: 12s;
+}
+
+.circles li:nth-child(3) {
+	left: 70%;
+	width: 20px;
+	height: 20px;
+	animation-delay: 4s;
+}
+
+.circles li:nth-child(4) {
+	left: 40%;
+	width: 60px;
+	height: 60px;
+	animation-delay: 0s;
+	animation-duration: 18s;
+}
+
+.circles li:nth-child(5) {
+	left: 65%;
+	width: 20px;
+	height: 20px;
+	animation-delay: 0s;
+}
+
+.circles li:nth-child(6) {
+	left: 75%;
+	width: 110px;
+	height: 110px;
+	animation-delay: 3s;
+}
+
+.circles li:nth-child(7) {
+	left: 35%;
+	width: 150px;
+	height: 150px;
+	animation-delay: 7s;
+}
+
+.circles li:nth-child(8) {
+	left: 50%;
+	width: 25px;
+	height: 25px;
+	animation-delay: 15s;
+	animation-duration: 45s;
+}
+
+.circles li:nth-child(9) {
+	left: 20%;
+	width: 15px;
+	height: 15px;
+	animation-delay: 2s;
+	animation-duration: 35s;
+}
+
+.circles li:nth-child(10) {
+	left: 85%;
+	width: 150px;
+	height: 150px;
+	animation-delay: 0s;
+	animation-duration: 11s;
+}
+
+@keyframes animate {
+	0% {
+		transform: translateY(0) rotate(0deg);
+		opacity: 1;
+		border-radius: 0;
+	}
+
+	100% {
+		transform: translateY(-1000px) rotate(720deg);
+		opacity: 0;
+		border-radius: 50%;
+	}
+}
+/*
+-- End BackGround Animation 
+*/