From 6b83774995d9592c37c86dbe5ffbf6bbcd6bf49c Mon Sep 17 00:00:00 2001
From: Recep BATTAL <recep.buss@gmail..com>
Date: Sun, 21 Jul 2024 02:18:45 +0300
Subject: [PATCH] last-back&profile-merge

---
 apigateway/Dockerfile                         |   1 -
 apigateway/apigateway/settings.py             |   3 +-
 apigateway/requirements.txt                   |   2 +
 apigateway/src/middleware.py                  |   8 +
 apigateway/src/views.py                       |  20 +-
 authservice/Dockerfile                        |   1 +
 authservice/src/views.py                      |  95 ++--
 bucketservice/Dockerfile                      |   1 +
 bucketservice/bucketservice/settings.py       |   2 +-
 .../Ekran_Resmi_2024-07-20_OS_5.56.23.png     | Bin 0 -> 4966 bytes
 bucketservice/src/views.py                    |   2 +-
 docker-compose.yml                            |  22 +-
 friendservice/Dockerfile                      |   1 +
 friendservice/friendservice/settings.py       |   2 +-
 friendservice/srcs/repository.py              |   1 +
 friendservice/srcs/service.py                 |   2 +
 frontend/Dockerfile                           |  13 +
 frontend/add.txt                              |  11 -
 frontend/index.html                           |   6 +-
 frontend/nginx.conf                           |  60 ++-
 ...024-03-07 03.44.57.png => Mighty-Pong.png} | Bin
 frontend/src/Routes.js                        |  14 +
 frontend/src/components/AoaComponent.js       |  15 +
 frontend/src/components/AuthComponent.js      |  14 +
 frontend/src/contants/contants.js             |  61 +--
 frontend/src/routes/ai/Ai.js                  |  37 ++
 frontend/src/routes/ai/ai.html                | 280 ++++++------
 frontend/src/routes/aoa/Aoa.js                |   4 +
 frontend/src/routes/aoa/aoa.html              |  13 +
 frontend/src/routes/auth/Auth.js              |  18 +
 frontend/src/routes/auth/auth.html            |  22 +
 frontend/src/routes/edit/Edit.js              |  13 +-
 frontend/src/routes/edit/edit.html            |  10 +-
 .../routes/friendrequests/Friendrequests.js   | 210 ++++-----
 frontend/src/routes/friends/Friends.js        | 181 ++++----
 frontend/src/routes/game/Game.js              |  41 +-
 frontend/src/routes/homepage/HomePage.js      |  14 -
 frontend/src/routes/localgame/Localgame.js    |  42 +-
 frontend/src/routes/localgame/localgame.html  |   3 +-
 .../routes/localtournament/Localtournament.js | 373 ++++++++--------
 .../localtournament/localtournament.html      |   7 +-
 frontend/src/routes/login/Login.js            |   2 +-
 frontend/src/routes/login/login.html          |  13 +
 .../src/routes/otherprofile/Otherprofile.js   | 132 +++---
 .../src/routes/otherprofile/otherprofile.html | 388 ++++++++---------
 frontend/src/routes/profile/Profile.js        |  77 ++--
 frontend/src/routes/profile/profile.html      | 407 +++++++++---------
 frontend/src/routes/quickplay/quickplay.html  |   3 +-
 frontend/src/routes/register/register.html    |   5 +-
 frontend/src/routes/tournament/Tournament.js  |  55 ---
 .../src/routes/tournament/tournament.html     |  15 -
 frontend/src/routes/users/Users.js            | 150 +++----
 frontend/src/utils/navTo.js                   |   3 +-
 frontend/src/utils/utils.js                   |  21 +-
 gameplayservice/Dockerfile                    |   2 +
 gameplayservice/gameplayservice/consumers.py  |  38 +-
 gameplayservice/gameplayservice/settings.py   |   8 +-
 gameservice/Dockerfile                        |   1 +
 gameservice/src/serializers.py                |   1 +
 gameservice/src/service.py                    | 104 +++--
 gameservice/src/views.py                      |  12 +-
 statusservice/Dockerfile                      |   4 +-
 statusservice/statusservice/consumers.py      |   1 +
 statusservice/statusservice/settings.py       |   8 +-
 usermanagement/src/interfaces/repository.py   |   2 +-
 usermanagement/src/interfaces/service.py      |   6 +-
 usermanagement/src/repository.py              |   5 +-
 usermanagement/src/serializers.py             |   8 +-
 usermanagement/src/service.py                 |  73 +++-
 usermanagement/src/utils.py                   |   2 -
 usermanagement/src/views.py                   |  38 +-
 71 files changed, 1812 insertions(+), 1397 deletions(-)
 create mode 100644 bucketservice/media/images/Ekran_Resmi_2024-07-20_OS_5.56.23.png
 create mode 100644 frontend/Dockerfile
 delete mode 100644 frontend/add.txt
 rename frontend/public/images/{Ekran Resmi 2024-03-07 03.44.57.png => Mighty-Pong.png} (100%)
 create mode 100644 frontend/src/components/AoaComponent.js
 create mode 100644 frontend/src/components/AuthComponent.js
 create mode 100644 frontend/src/routes/aoa/Aoa.js
 create mode 100644 frontend/src/routes/aoa/aoa.html
 create mode 100644 frontend/src/routes/auth/Auth.js
 create mode 100644 frontend/src/routes/auth/auth.html
 delete mode 100644 frontend/src/routes/tournament/Tournament.js
 delete mode 100644 frontend/src/routes/tournament/tournament.html

diff --git a/apigateway/Dockerfile b/apigateway/Dockerfile
index 89420d4..1d3180c 100644
--- a/apigateway/Dockerfile
+++ b/apigateway/Dockerfile
@@ -8,6 +8,5 @@ RUN pip3 install --upgrade pip
 
 RUN pip3 install -r requirements.txt
 
-EXPOSE 8000
 
 CMD ["python3", "manage.py", "runserver", "0.0.0.0:8000"]
diff --git a/apigateway/apigateway/settings.py b/apigateway/apigateway/settings.py
index 74e0f2a..9b08866 100644
--- a/apigateway/apigateway/settings.py
+++ b/apigateway/apigateway/settings.py
@@ -26,7 +26,7 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = os.environ.get('DEBUG')
 
-ALLOWED_HOSTS = ['35.242.209.3', 'localhost', '127.0.0.1', '0.0.0.0', 'apigateway', 'usermanagement', 'authservice', 'gameservice', 'friendservice', 'statusservice', 'gameplayservice']
+ALLOWED_HOSTS = ['35.242.209.3', 'localhost', '127.0.0.1', '0.0.0.0', 'apigateway', 'usermanagement', 'authservice', 'gameservice', 'friendservice', 'statusservice', 'gameplayservice', '[::1]']
 
 
 # Application definition
@@ -39,6 +39,7 @@
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'rest_framework',
 ]
 
 MIDDLEWARE = [
diff --git a/apigateway/requirements.txt b/apigateway/requirements.txt
index 38a53dc..ce13035 100644
--- a/apigateway/requirements.txt
+++ b/apigateway/requirements.txt
@@ -1,3 +1,5 @@
+django
+django-core
 djangorestframework
 django-cors-headers
 requests
diff --git a/apigateway/src/middleware.py b/apigateway/src/middleware.py
index c8b586d..619e5d2 100644
--- a/apigateway/src/middleware.py
+++ b/apigateway/src/middleware.py
@@ -1,7 +1,10 @@
+import logging
+
 import requests
 from django.conf import settings
 from django.http import JsonResponse
 
+
 class JWTAuthenticationMiddleware:
     def __init__(self, get_response):
         self.get_response = get_response
@@ -12,9 +15,14 @@ def __call__(self, request):
         return response
 
     def process_view(self, request, view_func, view_args, view_kwargs):
+        if request.path.startswith('/api'):
+            request.path = request.path[4:]
         if request.path in self.paths_to_exclude:
             return None
 
+        if request.path.startswith('/user/email_verify'):
+            return None
+
         token = request.headers.get('Authorization')
         if not token:
             return JsonResponse({'error': 'Missing token'}, status=401)
diff --git a/apigateway/src/views.py b/apigateway/src/views.py
index 9bda469..cc50871 100644
--- a/apigateway/src/views.py
+++ b/apigateway/src/views.py
@@ -1,3 +1,5 @@
+import logging
+
 import requests
 from django.conf import settings
 from django.http import HttpResponseRedirect
@@ -10,6 +12,9 @@ class APIGatewayView(APIView):
 
     def operations(self, request, path):
         headers = dict(request.headers)
+        if request.path.startswith('/user/email_verify'):
+            headers['Content-Type'] = 'application/json'
+            return pass_request_to_destination_service(request, path, headers)
         if not (settings.EXCLUDED_ROUTES and request.path in settings.EXCLUDED_ROUTES):
             headers['id'] = str(request.user_id)
         return pass_request_to_destination_service(request, path, headers)
@@ -40,13 +45,26 @@ def pass_request_to_destination_service(request, path, headers):
     if params:
         full_url += f"?{params.urlencode()}"
     method = request.method.lower()
-    response = requests.request(method, full_url, headers=headers, json=request.data)
+    try:
+        response = requests.request(method, full_url, headers=headers, json=request.data)
+    except requests.exceptions.RequestException as e:
+        logging.error(f"Error in request: {e}")
+        return Response({'error': 'Internal server error'}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
 
     if path.startswith('auth/') and response.status_code == 200 or response.status_code == 207:
         json_response = response.json()
         if 'redirect_url' in json_response:
             return HttpResponseRedirect(json_response['redirect_url'])
 
+    if path.startswith('user/email_verify') and response.status_code == 200:
+        try:
+            json_response = response.json()
+            if 'redirect_url' in json_response:
+                return HttpResponseRedirect(json_response['redirect_url'])
+        except Exception as e:
+            logging.error(f"Error in request: {e}")
+            return Response({'error': 'Internal server error'}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
+
     if response.headers.get('content-type') == 'application/json':
         return Response(response.json(), status=response.status_code)
     return Response(response.content, status=response.status_code)
diff --git a/authservice/Dockerfile b/authservice/Dockerfile
index 05ba701..334e0cd 100644
--- a/authservice/Dockerfile
+++ b/authservice/Dockerfile
@@ -8,4 +8,5 @@ RUN pip3 install --upgrade pip
 
 RUN pip3 install -r requirements.txt
 
+
 CMD [ "python3", "manage.py", "runserver", "0.0.0.0:8001"]
diff --git a/authservice/src/views.py b/authservice/src/views.py
index 0a8c8fe..b5e2393 100644
--- a/authservice/src/views.py
+++ b/authservice/src/views.py
@@ -1,4 +1,5 @@
 import jwt
+import uuid
 import requests
 from datetime import datetime, timedelta, timezone
 from rest_framework import viewsets
@@ -9,26 +10,25 @@
 import logging
 
 
-def generate_access_token(user_id):
+def generate_access_token(user_id, jti):
     payload = {
         'user_id': user_id,
+        'jti': jti,  # unique identifier for the token pair.
         'exp': datetime.now(tz=timezone.utc) + timedelta(minutes=1),
         'iat': datetime.now(tz=timezone.utc)
     }
     access_token = jwt.encode(payload, settings.SECRET_KEY, algorithm='HS256')
-    iat_seconds = payload['iat'].timestamp()
-    logging.error("------------------------------->>>>>>>>> %s", iat_seconds)
-    return access_token, iat_seconds
+    return access_token
 
 
-def generate_refresh_token(user_id, exp, iat, access_token_iat):
+def generate_refresh_token(user_id, exp, iat, jti):
     if exp is None:
         exp = datetime.now(tz=timezone.utc) + timedelta(days=7)
     if iat is None:
         iat = datetime.now(tz=timezone.utc)
     payload = {
         'user_id': user_id,
-        'acces_token_iat': access_token_iat,
+        'jti': jti,
         'exp': exp,
         'iat': iat,
     }
@@ -39,15 +39,37 @@ def generate_refresh_token(user_id, exp, iat, access_token_iat):
 
 class AuthHandler(viewsets.ViewSet):
     SECRET_KEY = settings.SECRET_KEY
-    verification_options = {"require": ["exp", "iat"], "verify_exp": True, "verify_iat": True, "verify_signature": True}
+    verification_options = {
+        "require": ["exp", "iat", "jti"],
+        "verify_exp": True,
+        "verify_iat": True,
+        "verify_signature": True
+    }
+
+    def _decode_token(self, token, verify_exp=True):
+        try:
+            options = self.verification_options.copy()
+            options['verify_exp'] = verify_exp
+            return jwt.decode(token, self.SECRET_KEY, algorithms=['HS256'], options=options), None
+        except jwt.ExpiredSignatureError as e:
+            return None, 'Token has expired'
+        except jwt.InvalidTokenError as e:
+            return None, 'Invalid token'
+        except Exception as e:
+            logging.error("Unexpected error decoding token: %s", str(e))
+            return None, 'Error decoding token'
+
+    def _error_response(self, message, status_code=status.HTTP_400_BAD_REQUEST):
+        return Response({'error': message}, status=status_code)
 
     def generate_tokens(self, request):
         req = GenerateTokenSerializer(data=request.query_params)
         if not req.is_valid():
             return Response(req.errors, status=400)
         user_id = req.validated_data['user_id']
-        access_token, acss_iat = generate_access_token(user_id)
-        refresh_token = generate_refresh_token(user_id, None, None, acss_iat)
+        jti = str(uuid.uuid4())
+        access_token = generate_access_token(user_id, jti)
+        refresh_token = generate_refresh_token(user_id, None, None, jti)
         return Response({
             'access_token': access_token,
             'refresh_token': refresh_token
@@ -71,39 +93,33 @@ def validate_token(self, request):
     def refresh_token(self, request):
         access_token = request.headers.get('Authorization')
         if not access_token:
-            return Response({'error': 'Token is required'}, status=status.HTTP_400_BAD_REQUEST)
+            return self._error_response('Access token is required', status.HTTP_401_UNAUTHORIZED)
+
         req = RefreshTokenSerializer(data=request.data)
         if not req.is_valid():
             return Response(req.errors, status=status.HTTP_400_BAD_REQUEST)
+
         refresh_token = req.validated_data['refresh_token']
+        decoded_access_token, access_error = self._decode_token(access_token.split(' ')[1], verify_exp=False)
+        decoded_refresh_token, refresh_error = self._decode_token(refresh_token, verify_exp=True)
 
-        try:
-            decoded_access_token = jwt.decode(access_token.split(' ')[1], self.SECRET_KEY, algorithms=['HS256'], options={'verify_exp': False})
-        except jwt.ExpiredSignatureError:
-            try:
-                accs_iat = decoded_access_token['iat']
-                refresh_token = refresh_token.split(' ')[1]
-                decoded_token = jwt.decode(refresh_token, self.SECRET_KEY, algorithms=['HS256'], options=self.verification_options)
-                refresh_accs_iat = decoded_token['acces_token_iat']
-                if accs_iat != refresh_accs_iat:
-                    return Response({'error': 'Access token and refresh token do not match'}, status=status.HTTP_400_BAD_REQUEST)
-                user_id = decoded_token['user_id']
-                new_access_token, access_iat = generate_access_token(user_id)
-                new_refresh_token = generate_refresh_token(user_id, decoded_token['exp'], decoded_token['iat'], access_iat)
-                return Response({
-                    'access_token': new_access_token,
-                    'refresh_token': new_refresh_token
-                }, status=status.HTTP_200_OK)
-            except jwt.ExpiredSignatureError:
-                return Response({'error': 'Token has expired'}, status=status.HTTP_401_UNAUTHORIZED)
-            except jwt.InvalidTokenError:
-                return Response({'error': 'Invalid token'}, status=status.HTTP_401_UNAUTHORIZED)
-            except Exception as e:
-                return Response({'error': str(e)}, status=status.HTTP_400_BAD_REQUEST)
-        except jwt.InvalidTokenError:
-            return Response({'error': 'Invalids token'}, status=status.HTTP_401_UNAUTHORIZED)
-        except Exception as e:
-            return Response({'error': str(e)}, status=status.HTTP_400_BAD_REQUEST)
+        if access_error:
+            return self._error_response(access_error, status.HTTP_401_UNAUTHORIZED)
+        if refresh_error:
+            return self._error_response(refresh_error, status.HTTP_401_UNAUTHORIZED)
+
+        if decoded_access_token['jti'] != decoded_refresh_token['jti']:
+            return self._error_response('Access token and refresh token do not match')
+
+        user_id = decoded_refresh_token['user_id']
+        jti = str(uuid.uuid4())  # Generate a new jti for the new token pair
+        new_access_token = generate_access_token(user_id, jti)
+        new_refresh_token = generate_refresh_token(user_id, None, None, jti)
+
+        return Response({
+            'access_token': new_access_token,
+            'refresh_token': new_refresh_token
+        }, status=status.HTTP_200_OK)
 
     def intra_oauth(self, request):
         return Response({'url': settings.INTRA_REDIRECT_URL}, status=status.HTTP_200_OK)
@@ -129,9 +145,10 @@ def intra_oauth_callback(self, request):
             return Response(user_creation_response.json(), status=user_creation_response.status_code)
 
         response_data = user_creation_response.json().get('data')
+        jti = str(uuid.uuid4())
         user_id = response_data[0].get('id')
-        token, access_iat = generate_access_token(user_id)
-        refresh_token = generate_refresh_token(user_id, None, None, access_iat)
+        token = generate_access_token(user_id, jti)
+        refresh_token = generate_refresh_token(user_id, None, None, jti)
 
         # 207 status code is for username already exist.
         # Redirect to frontend for update username. Otherwise, redirect to homepage
diff --git a/bucketservice/Dockerfile b/bucketservice/Dockerfile
index 5fa3009..f627c74 100644
--- a/bucketservice/Dockerfile
+++ b/bucketservice/Dockerfile
@@ -16,6 +16,7 @@ COPY start.sh /app/start.sh
 
 RUN chmod +x /app/start.sh
 
+
 ENTRYPOINT ["sh", "./start.sh"]
 
 CMD ["python3", "manage.py", "runserver", "0.0.0.0:8014"]
diff --git a/bucketservice/bucketservice/settings.py b/bucketservice/bucketservice/settings.py
index 69c49d4..bbd905b 100644
--- a/bucketservice/bucketservice/settings.py
+++ b/bucketservice/bucketservice/settings.py
@@ -26,7 +26,7 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = os.environ.get('DEBUG')
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['*']
 
 SERVICE_ROUTES = {
     '/auth': 'http://authservice:8001',
diff --git a/bucketservice/media/images/Ekran_Resmi_2024-07-20_OS_5.56.23.png b/bucketservice/media/images/Ekran_Resmi_2024-07-20_OS_5.56.23.png
new file mode 100644
index 0000000000000000000000000000000000000000..60050606a6956dc4e1be99204731c85631a592e0
GIT binary patch
literal 4966
zcmeHJXH-+`(%u1-B!Ykf(v37hB%w=ULJNY?BP}RR5tIM{LVyGbBE3ipO{t22Vxxmd
z5fPPklq%9eq=_PgrUWU%4eIAP-@U)?&%4%n*P1=EXXcq_zw^%CYe$(F8FE8Kpa1}H
z<Bsc_vGfK@M!-8+SK$tlH2^?|h*+!%4vU4Ec#$26ZUg{09+jNRX^tNdjOeI6k{Ony
zle_n_AqtcmCJ_x2*O!qF4%>s(GvO0e(G0n$dyJzcGA>%q(m<yv#Il4ty0#7$8iLv_
z==Q+($O2gPORpcfwzl`xYHz#N`mDcK$GJctTi>H${EFq?AU4xPX)SbQVn#~)a~?ME
z^B^D=6k4AgZRP3t26!B`TFl(k5TOrp8xo2Fw>IlUlABY#KtU=d?c=!W9dbUmCy*A0
z<=KFN__el=0#V6VxCtbPHSBerJksf=_93Ketny@OTEjQH>%su<pJH*+oIn}-XD5CN
zr4#Ky;Axk<WfJBk|9bN*=<3xa&+Fn)=+q%!UV^BaEf=r@BmTT~4c~sVZnDGd!$%J<
zbM#1G8lPU6nWvW1i!EQZts&?VVXvQMPUztT{RV{<Y{$I&$grG1Oxe9=qmqOpw%3w&
zltt!3rcQ*uJ($)Ei83o}%aXvn7<j2vambkOsAtG(S7#U`rIl{MNLGY6o>DSYsX#yo
z)rS$d5BnAd@-}2b8m>d&g0jY0c0^mfZihcgULz74^FM!#c^N9Z!i`_Hg?-1@=~cLp
z5@E`EJx86&0-i;xr{gp7^61Sxkjz+|Sz}C0h`C?XmkIO5jSY|F^VT=Bt!=`zZeDYp
zFn3C8iHf~p2jfr<Vz1(&L)fw-wd;-#9A7xQ$QGq!XwqPpQ%Uczi>Wf&&1K<a;R9Uv
z@!9aCo!nn@jrV(3F8P=c0IG(DkN4*yHhh5HIlj0qT-GuiP-_LMz@CJpanJn*tHH+t
zG2GeQUprSqkR_nF=K?gg^Sod^UFpajQ84aS16P3{HW=uOj=bg0LplPMyEH;jCE~Lj
zelI{CLgm2|qiUKw@KD!LK^ib=2RsGpM=?U-FfflPOeB{xT_+_0GYM5b5GcnV9WkDx
zCb#!>uzmv9q3{&!X%lsGPDYSO4z^SIlNy!pbNHODe<$zPooifDO2WMnbUOvwq1G@f
z5B{6rju6VIUKI!Yszv={5B8_~-NTLRQ^#yd!~#I^Fu)Z1DN=qsQYq0+S`cSg#s?`A
zdZ_P`urpV9TIWfkXr!2L)RmW`N@`r}6OoIJ`gTc5Xa6|hsO%_kZ}+2pZ=;bh)xp#C
zTo<3&%Ufa#Fuj~DP4_NPO1_i`^oz{8&zjC6XBB4wCT925I}-(-wpHM>BJh2cyp_;O
zfxeKLhUM`!PbnJOmWLd_Qr|p|{3dy2M}TU8_9p)(Dgf9@%r;OuP_^eJc$$MRC)Nbp
zZ>Wi@GNKs>$++xMjM8ebl#H(ms*0$J>DPUFLJSs{RDQfyTH8!gKD9j7{G^L)rW8iH
z_B0-^ivM!vMvknxP2QROOD2pE>#V_pD#>n!yJejc2$MaNm`S50%#sZ>{K7FvZZ1Ar
zE?=I0UG;kN_4v<f-Uq!aP{#gImuoNQuX!(9i0E^l<W6aFqwk@M(4|By)NNh%s28e*
zsv|RE)MwP=i6d{s-rOcuJ2$!rI2U#e-uE_jO^Cj4ZHj$}c0qa{T;_V5717yBe4z#>
zAxZlfVk8~W`=r9Q-u9lNF0Jf$cQ6Im9?w2pZ+bDln4)KBWccX}RRfdtEFvH+;KrtJ
z^c((O{>|&j_>B8!vzB!GbdH#$7TY`=y6tyz<&gvyVU92+XWHHvk@AmymbuCG-FI#1
zYsYk*TBpW>`lyJxh?qtd87w*|+$0KD8z#~kJsSS(mm5CrRzC14_RYzQPdu|dixziI
zTx-J0s_hNjoAYYtHN0$xFp5i1D$BG*vqeZlU5&1koIa<-P!?Bzq;XP3LDf~+&%sE=
zDZ}XoS!rHne}z(MWU1U^=dvm?uH3;IdiaRdC7XbfvWgR>*7iM)>du9(Z58lR_p$(I
zY$>EfzMNQ6O^kU&7@Qh#e_ZRxIpo_9nf=Tt8mwpDV(P6IGHZ8Ra*{a{v7z<ihGkMM
zrTwL^N;{(F_!;I?-BVv(@*2CpKAgFC$@u%!?AXour!A|&yLx20?zY~o|3J^rROov=
zvV2dpQL&X2Wm7Zc>f`70Y+YleMnWxKC|*F~oWyxdEn4PQ+byiEpl!OX&C@xh$LXG}
zr(1W8SkA-dWk#B7wO46t{HtQj)%w0SM>>46=10|Lh#SP3d&}$TtDYN|zP<V`yqUhK
zz1G712fHSS8)VGZ#_k(j!=6>@W>sDAy}&}ZT{kKFj_&>t|B!t<d?H{6#ttMOz~ppy
z=5{{mY_@l_N7|pVuOE{b+f{#5s)Wy!Z$@&igx-Jll9Zojmx7n+<ba%)xt{sC?rY99
z&N!+em)Kt6M_N;3)RyVn)1*>Zig=9{)AXkIS^Hsxs)y>hV|NElWPZ<ik@uN8C)2K#
zAjbSJn2cvMaN;y@Ww}KT^vT%Crb!<81M)rcOWhA2#+V`QPv3{U9eleu{c5`At)XK?
z`>-YjRxfo&a)Nny#_EgHxtoRBM+2ErND+!ACC=f3DqdxU5HQx@C88;1HCv!)RX=Pu
zCp)*x7Di?#N6t4FPieO>TZ-BxS{GZavQ(wPyxm}1XlS_i%f4#9>LH5uWaAX$6@K#m
zWF<c@RApCO)PvjTHv`p8l#d+@fuR_Mh9$kMm-O)ZB)M1a^3s_yBt)0Nu`Yph`s`7w
z^QD2F{)^4NufD{!_GKV40tvzILXvmgN)AijDCd2YP*alMT~4(kzL)I1EgqB8XcbeF
zl7^5!uTr9RWqO2=OYm(8P^7@~;eM59g0Eq<>1x-~=KRY#*F2Nr1oL65v6>6(D{1rL
z?^g<_Hr2i#Do@ycxO?bhUPc}wzbYU8eRK)S;EC=T$oK1|6%AAfR-P$mGM@x_`{h5*
zJDIoM*IYn;_q^YvdhA^jQWVi!)#vtJe^7czx|m)>dhb^1%a}rVhdi-a)?HS#;i@bc
zUb0sp&n%OIhcYTfNyUSktA=CoK0aad&ZH8T2Ln+<R!_f77fqgfr>z|5GF(_!<Fe9+
zxs6$>UG(eFxU8-*r#f7D58|Gr&duoP4`k^48O(HSo)TC5nvxefnms%E1)F}=eSaKk
z*gMQOch#vSt5WQ)c%fUk^}h1mm5{+n29Z(QEE(_Z{q2(2_r~c|O!KMuzN}7U>6G-e
z!z!-vVG>>{bG$wEKE-Ior)~POhwO4|+auL>=FJ$C&)AjzRn>O|bNGE5aIv~il*N9T
zsk;>|w^D72X=jmZ`OU?KerP}I;>+hqbyNO@cYLhpU(JB}jNgN+JvU|7r#{%cB`=Q{
zJ@H>LY7$>PH}dX<-|C9(d&D#CHM?o-Z2fD)jCdCbQ7!jxR~g#Yled=k`XBJOxFwDD
z?d)I#F5dWBiD3U=EN|?3D;@1BMiobE@oP{StF0f|5e*1~^Jg}Sme*4(G>QW@r5559
z>L1p#7t0h2kk8ci_|<&OT(2ogtV(R2-!&2+@L=P?is$^nsrz#s@>yB*_Vti0v-KXP
zYjfoTGLOIxXn2~`SS$|2A?|TW10XZA2Q|3?k-Qe1YV+geG~J0U&L;52L5aTi7pEXP
zswjB^U;f@8sS`+1a1aWmAY*y~7W8h|eB!)p+a-#4$1#Is8Ri|m#a=LQg%db018w|t
zCVX5W?_z=<KoyL0y?l4fMDhJ>%1XeEK1`nO(Qh~CGvBqBzpV(%DR^)OW^F-=J_rkh
z-)+lb{q05*EOCyfP63BlHW=Uli2yrT7KkNUAkp8p0Z0yD|KVo?fU87+<5!LmOK-0P
zmTY5wYWAcEfRlB%hb6RZw%^$s+3dgV5mpS)#ba?emd0Q7A`sju&Sa_$@>l@N0r5C)
zMF9XonQZ~#%%m4s^?QltmQ>4Af1oasNpO1y@&y8%M)KIM1E6UrmPsN|?O`;Mn>z(X
z!$|(fK(Xv?H$oEjBZcaUk+eKz0>hHM2rzZH8eB<I3krk5&|VIXC^LP7UvSnPM$(x|
z^*|vIK0ZEhA5}Qn%L$>3L?RJNDhL%7MOKC)#n+u`Pg8WKNc}AGe|7W;l#5<O4=R!D
z4%@D4e}U{x#YjqS6a8L4pOZi%{>9`@`L!+91`*p4gfd(S@w+w)ir)63Oo%jso25RH
z#OfJ~LrX<n1^pxcKO%oI{zRUp5WKKt5(`Mx`m5=`z<&?^JMagk)!!&p{vYMvBEOJm
z#P-hr)`_2O{^4cySqq9r{5~@+=rR0-yR2grBkCKQvoveSek?NUD#wy-%@Ve6sUd_I
zmTti5>zdO*vu}0z02mj$?gHW(kGAx4E)DmY>>Cb6{&OB2U}=tfFAjP!rGpW63(-0-
zX}g7-lG+o`N4<k|jz1s8+WRF3y_f-l6M|k`eaSoo3he{29RP*$gfmXF?JQ>J&|}-V
zA3BuJ!DY({4&&g`;;*oP2tD1+3x)_?k#j5FqeK&j@$OOjX3}pfW4D0%hv1(U{Z~_j
yW{vdLR%9b!$C~FC+w;u$XPW<cAOA<cDCoJdqnGV2g+;Tb8o(Vh(l64p3;7rEJ~9jd

literal 0
HcmV?d00001

diff --git a/bucketservice/src/views.py b/bucketservice/src/views.py
index 86117a2..edf47da 100644
--- a/bucketservice/src/views.py
+++ b/bucketservice/src/views.py
@@ -25,7 +25,7 @@ def create(self, request, *args, **kwargs):
         except requests.exceptions.RequestException as e:
             return Response({'error': 'Internal server error'}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
         if response.status_code != 200:
-            return Response({'error': 'Unauthorized'}, status=status.HTTP_401_UNAUTHORIZED)
+            return Response({'error': response.json()['error']}, status=status.HTTP_401_UNAUTHORIZED)
         serializer = ImageSerializer(data=request.data)
         if not serializer.is_valid():
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
diff --git a/docker-compose.yml b/docker-compose.yml
index 3bc9f12..c0444e3 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,12 +3,17 @@ version: '3.8'
 services:
   frontend:
     container_name: frontend
-    image: nginx
+    build: ./frontend
+    depends_on:
+      - apigateway
+      - bucketservice
+      - gameplayservice
+      - statusservice
     volumes:
       - ./frontend:/usr/share/nginx/html
       - ./frontend/nginx.conf:/etc/nginx/nginx.conf
     ports:
-      - "808:80"
+      - "443:443"
 
   apigateway:
     container_name: apigateway
@@ -40,6 +45,8 @@ services:
       - FRONTEND_URL=${FRONTEND_URL}
     volumes:
       - ./authservice:/app
+    ports:
+        - "8001:8001"
 
   bucketservice:
     container_name: bucketservice
@@ -132,6 +139,8 @@ services:
       - EMAIL_HOST_PASSWORD=${MailService_EMAIL_HOST_PASSWORD}
     volumes:
       - ./mailservice:/app
+    ports:
+      - "8005:8005"
 
   statusservice:
     container_name: statusservice
@@ -232,12 +241,3 @@ services:
     ports:
       - "5435:${BucketService_DB_PORT}"
 
-
-
-
-
-  
-
-
-
-
diff --git a/friendservice/Dockerfile b/friendservice/Dockerfile
index 7781f6c..75bb814 100644
--- a/friendservice/Dockerfile
+++ b/friendservice/Dockerfile
@@ -16,6 +16,7 @@ COPY start.sh /app/start.sh
 
 RUN chmod +x /app/start.sh
 
+
 ENTRYPOINT ["sh", "./start.sh"]
 
 CMD ["python3", "manage.py", "runserver", "0.0.0.0:8012"]
diff --git a/friendservice/friendservice/settings.py b/friendservice/friendservice/settings.py
index 20124a0..e90daf4 100644
--- a/friendservice/friendservice/settings.py
+++ b/friendservice/friendservice/settings.py
@@ -26,7 +26,7 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = os.environ.get('DEBUG')
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['*']
 
 
 # Application definition
diff --git a/friendservice/srcs/repository.py b/friendservice/srcs/repository.py
index 81baf43..fd76891 100644
--- a/friendservice/srcs/repository.py
+++ b/friendservice/srcs/repository.py
@@ -99,6 +99,7 @@ def get_all_request(self, user_id):
             res = Friends.objects.filter(receiver_id=user_id, state=0, deleted_at=None).all().values('sender_id')
         except:
             return ""
+        res = res.order_by('-created_at')
         return res
 
     def set_state(self, sender_id, receiver_id, state):
diff --git a/friendservice/srcs/service.py b/friendservice/srcs/service.py
index 7fb5e13..f056644 100644
--- a/friendservice/srcs/service.py
+++ b/friendservice/srcs/service.py
@@ -5,6 +5,7 @@
 from .serializers import FriendsSerializer, FriendReqListSerializer
 from .utils import BaseResponse
 
+
 class IFriendsService(ABC):
     @abstractmethod
     def add_friend(self, sender_id, receiver_id) -> BaseResponse:
@@ -30,6 +31,7 @@ def get_requests(self, user_id, page, limit) -> BaseResponse:
     def get_friends(self, user_id, page, limit) -> BaseResponse:
         pass
 
+
 class FriendsService(IFriendsService):
     def __init__(self, repository: IFriendsRepository):
         self.repository = repository
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..7af4ea3
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,13 @@
+FROM nginx:alpine
+
+RUN apk update && \
+    apk add --no-cache openssl
+
+
+RUN mkdir -p /etc/ssl/private/ && mkdir -p /etc/ssl/certs/ && \
+   openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
+   -keyout /etc/ssl/private/nginx.key \
+   -out /etc/ssl/certs/nginx.crt \
+   -subj "/C=TR/ST=Kocaeli/L=Kocaeli/O=Ecole42/OU=transcendence/CN=127.0.0.1:443"
+
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/frontend/add.txt b/frontend/add.txt
deleted file mode 100644
index 1b1bc55..0000000
--- a/frontend/add.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-serializer.py
-
-
-register->phone
-2fa->email, twofa_code
-login->forget email(?)
-
-register.js -> /authservice/src/views.py
-register formundan alınan kullanıcı bilgileri bu sayfaya gidiyor olabilir.
-bunu kontrol edebilmek için uzantıdaki dosyaya yorum satırında bir kod ekledim.
-eğer doğru bir şekilde formdan alınan veriler backende gelirse konsola yazdırıyors
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 0c59d44..d0f9073 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -33,12 +33,16 @@
             transform: translateX(-50%);
         }
         body, html {
+            /* background-image: url('public/images/Mighty-Pong.png'); */
+            /* background-size: 75%;
+            background-repeat: no-repeat;
+            background-position: center; */
             height: 100%;
             margin: 0;
             display: flex;
             flex-direction: column;
             background-color: #e2e8f0;
-
+            z-index: -1;
         }
         nav {
             width: 100%;
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
index 6aac9ad..42429a4 100644
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -1,14 +1,39 @@
+#user nginx;
+worker_processes auto;
+
+#error_log  /var/log/nginx/error.log notice;
+pid        /var/run/nginx.pid;
+
 events {
-    worker_connections  1024;
+    worker_connections 1024;
 }
 
 http {
-    include /etc/nginx/mime.types;
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+    sendfile        on;
+    #tcp_nopush     on;
+
+    keepalive_timeout 65;
 
+    gzip  on;
+
+    include /etc/nginx/conf.d/*.conf;
 
     server {
-        listen       80;
-        server_name  localhost;
+        listen 443 ssl;
+        listen [::]:443 ssl;
+
+        server_name localhost 127.0.0.1;
+
+        ssl_certificate /etc/ssl/certs/nginx.crt;
+        ssl_certificate_key /etc/ssl/private/nginx.key;
 
         location / {
             root   /usr/share/nginx/html;
@@ -16,11 +41,36 @@ http {
             try_files $uri $uri/ /index.html;
         }
 
+        location /api/ {
+            proxy_pass http://apigateway:8000/;
+        }
+
+        location /bucket/ {
+            proxy_pass http://bucketservice:8014;
+        }
+
+        location /ws/game/ {
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+
+            proxy_pass http://gameplayservice:8011;
+        }
+
+        location /ws/status/ {
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+
+            proxy_pass http://statusservice:8020;
+        }
 
         error_page   500 502 503 504  /50x.html;
 
         location = /50x.html {
             root   /usr/share/nginx/html;
         }
-    }    
+    }
 }
diff --git a/frontend/public/images/Ekran Resmi 2024-03-07 03.44.57.png b/frontend/public/images/Mighty-Pong.png
similarity index 100%
rename from frontend/public/images/Ekran Resmi 2024-03-07 03.44.57.png
rename to frontend/public/images/Mighty-Pong.png
diff --git a/frontend/src/Routes.js b/frontend/src/Routes.js
index baeee95..7da9e37 100644
--- a/frontend/src/Routes.js
+++ b/frontend/src/Routes.js
@@ -19,8 +19,16 @@ import ForgotpasswordComponent from "./components/ForgotpasswordComponent.js"
 import ResetpasswordComponent from "./components/ResetpasswordComponent.js"
 import ChangepasswordComponent from "./components/ChangepasswordComponent.js"
 import ConflictusernameComponent from "./components/ConflictusernameComponent.js"
+import AoaComponent from "./components/AoaComponent.js"
+import AuthComponent from "./components/AuthComponent.js"
 
 export const routes = [
+    {
+        path:"/404",
+        htmlPath: "./src/routes/aoa/aoa.html",
+        js: "/src/routes/aoa/Aoa.js",
+        component: AoaComponent,
+    },
     {
         path:"/",
         htmlPath: "./src/routes/homepage/homepage.html",
@@ -146,5 +154,11 @@ export const routes = [
         htmlPath: "./src/routes/conflictusername/conflictusername.html",
         js: "/src/routes/conflictusername/Conflictusername.js",
         component: ConflictusernameComponent,
+    },
+    {
+        path:"/auth",
+        htmlPath: "./src/routes/auth/auth.html",
+        js: "/src/routes/auth/Auth.js",
+        component: AuthComponent,
     }
 ]
diff --git a/frontend/src/components/AoaComponent.js b/frontend/src/components/AoaComponent.js
new file mode 100644
index 0000000..11b4387
--- /dev/null
+++ b/frontend/src/components/AoaComponent.js
@@ -0,0 +1,15 @@
+class AoaComponent {
+    constructor(path) {
+        this.path = path;
+    }
+    async render() {
+        return fetch(this.path)
+            .then(res => {
+                if (!res.ok)
+                    throw new Error("couldn't fetch route");
+                return res.text();
+            })
+    }
+}
+
+export default AoaComponent;
diff --git a/frontend/src/components/AuthComponent.js b/frontend/src/components/AuthComponent.js
new file mode 100644
index 0000000..fdbb79c
--- /dev/null
+++ b/frontend/src/components/AuthComponent.js
@@ -0,0 +1,14 @@
+class AuthComponent {
+    constructor(path) {
+        this.path = path;
+    }
+    async render() {
+        return fetch(this.path)
+            .then(res => {
+                if (!res.ok)
+                    throw new Error("couldn't fetch route");
+                return res.text();
+            })
+    }
+}
+export default AuthComponent;
diff --git a/frontend/src/contants/contants.js b/frontend/src/contants/contants.js
index 8f3f7fc..62fbfe5 100644
--- a/frontend/src/contants/contants.js
+++ b/frontend/src/contants/contants.js
@@ -1,28 +1,33 @@
-export const changeUrlBase = "http://localhost:8000/user/pwd/update";
-export const changeUsernameUrl = "http://127.0.0.1:8000/user/username";
-export const userDetailUrl = "http://127.0.0.1:8000/user/details";
-export const updateUserUrl = "http://127.0.0.1:8000/user/update";
-export const pictureUrl = "http://localhost:8014/bucket/image/serve";
-export const avatarUpdateUrl = "http://localhost:8014/bucket/image";
-export const forgotpasswordUrl = "http://127.0.0.1:8000/user/pwd/forgot";
-export const userGetByIdUrl = "http://127.0.0.1:8000/user/get/id";
-export const requestsList = "http://127.0.0.1:8000/friends/request";
-export const acceptUrl = "http://127.0.0.1:8000/friends/accept";
-export const rejectUrl = "http://127.0.0.1:8000/friends/reject";
-export const friendList = "http://127.0.0.1:8000/friends/list";
-export const friendDelete = "http://127.0.0.1:8000/friends/delete";
-export const singleUserDetailUrl = "http://127.0.0.1:8000/user/get/id";
-export const gameDetailUrl = "http://127.0.0.1:8000/game/list";
-export const joinUrl = "http://127.0.0.1:8000/game/join";
-export const matchHistoryUrl = "http://127.0.0.1:8000/game/history";
-export const gameCreateUrl = "http://127.0.0.1:8000/game/room";
-export const registerUrl = "http://localhost:8000/user/register";
-export const loginUrl = "http://127.0.0.1:8000/user/login";
-export const IntraOAuthUrl = "http://127.0.0.1:8000/auth/intra"
-export const resetUrlBase = "http://localhost:8004/user/pwd/change";
-export const url = "http://127.0.0.1:8000/user/2fa";
-export const twofaUrl = "http://127.0.0.1:8000/user/2fa";
-export const searchUrl = "http://127.0.0.1:8000/user/search";
-export const friendAdd = "http://127.0.0.1:8000/friends/add";
-export const ValidateAccessToken = "http://127.0.0.1:8000/auth/token/validate";
-export const ValidateRefreshToken = "http://127.0.0.1:8000/auth/token/refresh";
+const BASE_DOMAIN = "127.0.0.1:443";
+const BASE_URL = "https://" + BASE_DOMAIN;
+export const changeUrlBase = BASE_URL + "/api/user/pwd/update";
+export const changeUsernameUrl = BASE_URL + "/api/user/username";
+export const userDetailUrl = BASE_URL + "/api/user/details";
+export const updateUserUrl = BASE_URL + "/api/user/update";
+export const pictureUrl = BASE_URL + "/bucket/image/serve";
+export const avatarUpdateUrl = BASE_URL + "/bucket/image";
+export const forgotpasswordUrl = BASE_URL + "/api/user/pwd/forgot";
+export const userGetByIdUrl = BASE_URL + "/api/user/get/id";
+export const requestsList = BASE_URL + "/api/friends/request";
+export const acceptUrl = BASE_URL + "/api/friends/accept";
+export const rejectUrl = BASE_URL + "/api/friends/reject";
+export const friendList = BASE_URL + "/api/friends/list";
+export const friendDelete = BASE_URL + "/api/friends/delete";
+export const singleUserDetailUrl = BASE_URL + "/api/user/get/id";
+export const gameDetailUrl = BASE_URL + "/api/game/list";
+export const joinUrl = BASE_URL + "/api/game/join";
+export const matchHistoryUrl = BASE_URL + "/api/game/history";
+export const gameCreateUrl = BASE_URL + "/api/game/room";
+export const registerUrl = BASE_URL + "/api/user/register";
+export const loginUrl = BASE_URL + "/api/user/login";
+export const IntraOAuthUrl = BASE_URL + "/api/auth/intra"
+export const resetUrlBase = BASE_URL + "/api/user/pwd/change";
+export const url = BASE_URL + "/api/user/2fa";
+export const twofaUrl = BASE_URL + "/api/user/2fa";
+export const searchUrl = BASE_URL + "/api/user/search";
+export const friendAdd = BASE_URL + "/api/friends/add";
+export const ValidateAccessToken = BASE_URL + "/api/auth/token/validate";
+export const ValidateRefreshToken = BASE_URL + "/api/auth/token/refresh";
+
+export const GamePlaySocketUrl = "wss://"+BASE_DOMAIN+"/ws/game/";
+export const StatusServiceSocketUrl = "wss://"+BASE_DOMAIN+"/ws/status/";
diff --git a/frontend/src/routes/ai/Ai.js b/frontend/src/routes/ai/Ai.js
index 13e7258..f0646b2 100644
--- a/frontend/src/routes/ai/Ai.js
+++ b/frontend/src/routes/ai/Ai.js
@@ -167,6 +167,43 @@ export async function fetchAi() {
             }
         });
 
+        function finishGame() {
+            gameRunning = false;
+            startButton.style.display = 'block';
+            alert("VS AI is aborted!");
+        }
+
+        // Listen for navigation events
+        const originalPushState = history.pushState;
+        const originalReplaceState = history.replaceState;
+
+        history.pushState = function () {
+            if (gameRunning) {
+                finishGame();
+            }
+            return originalPushState.apply(history, arguments);
+        };
+
+        history.replaceState = function () {
+            if (gameRunning) {
+                finishGame();
+            }
+            return originalReplaceState.apply(history, arguments);
+        };
+
+        window.addEventListener('popstate', () => {
+            if (gameRunning) {
+                finishGame();
+            }
+        });
+
+        function navigateTo(url) {
+            if (gameRunning) {
+                finishGame();
+            }
+            originalNavigateTo(url);
+        }
+
         draw();
     }
 }
diff --git a/frontend/src/routes/ai/ai.html b/frontend/src/routes/ai/ai.html
index 05192b9..8ad6480 100644
--- a/frontend/src/routes/ai/ai.html
+++ b/frontend/src/routes/ai/ai.html
@@ -1,142 +1,140 @@
-
 <style>
-  body {
-      margin: 0;
-      padding: 0;
-      background-color: #e2e8f0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100vh;
-      font-family: Arial, sans-serif;
-      position: relative;
-  }
-  #gameCanvas {
-      border: 2px solid #fff;
-  }
-  #scoreBoard {
-      position: absolute;
-      top: 365px;
-      font-size: 24px;
-      font-weight: bold;
-      color: #000000;
-  }
-  #startButton {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-  }
-
-  .btn-23,
-  .btn-23 *,
-  .btn-23 :after,
-  .btn-23 :before,
-  .btn-23:after,
-  .btn-23:before {
-      border: 0 solid;
-      box-sizing: border-box;
-  }
-
-  .btn-23 {
-      -webkit-tap-highlight-color: transparent;
-      -webkit-appearance: button;
-      background-color: #000;
-      background-image: none;
-      color: #fff;
-      cursor: pointer;
-      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-      Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
-      Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-      font-size: 100%;
-      font-weight: 900;
-      line-height: 1.5;
-      margin: 0;
-      -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
-      padding: 0;
-      text-transform: uppercase;
-  }
-
-  .btn-23:disabled {
-      cursor: default;
-  }
-
-  .btn-23:-moz-focusring {
-      outline: auto;
-  }
-
-  .btn-23 svg {
-      display: block;
-      vertical-align: middle;
-  }
-
-  .btn-23 [hidden] {
-      display: none;
-  }
-
-  .btn-23 {
-      border-radius: 99rem;
-      border-width: 2px;
-      overflow: hidden;
-      padding: 0.8rem 3rem;
-      position: relative;
-  }
-
-  .btn-23 span {
-      display: grid;
-      inset: 0;
-      place-items: center;
-      position: absolute;
-      transition: opacity 0.2s ease;
-  }
-
-  .btn-23 .marquee {
-      --spacing: 5em;
-      --start: 0em;
-      --end: 5em;
-      -webkit-animation: marquee 1s linear infinite;
-      animation: marquee 1s linear infinite;
-      -webkit-animation-play-state: paused;
-      animation-play-state: paused;
-      opacity: 0;
-      position: relative;
-      text-shadow: #fff var(--spacing) 0, #fff calc(var(--spacing) * -1) 0,
-      #fff calc(var(--spacing) * -2) 0;
-  }
-
-  .btn-23:hover .marquee {
-      -webkit-animation-play-state: running;
-      animation-play-state: running;
-      opacity: 1;
-  }
-
-  .btn-23:hover .text {
-      opacity: 0;
-  }
-
-  @-webkit-keyframes marquee {
-      0% {
-          transform: translateX(var(--start));
-      }
-
-      to {
-          transform: translateX(var(--end));
-      }
-  }
-
-  @keyframes marquee {
-      0% {
-          transform: translateX(var(--start));
-      }
-
-      to {
-          transform: translateX(var(--end));
-      }
-  }
-</style>
-<div id="scoreBoard">Player 1: 0 | AI: 0</div>
-<canvas id="gameCanvas" width="800" height="400"></canvas>
-<button id="startButton" class="btn-23">
-    <span class="text">Start</span>
-    <span aria-hidden="true" class="marquee">Start</span>
-</button>
+    body {
+        margin: 0;
+        padding: 0;
+        background-color: #e2e8f0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        font-family: Arial, sans-serif;
+        position: relative;
+    }
+    #gameCanvas {
+        border: 2px solid #000000;
+    }
+    #scoreBoard {
+        position: absolute;
+        top: 365px;
+        font-size: 24px;
+        font-weight: bold;
+        color: #000000;
+    }
+    #startButton {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    .btn-23,
+    .btn-23 *,
+    .btn-23 :after,
+    .btn-23 :before,
+    .btn-23:after,
+    .btn-23:before {
+        border: 0 solid;
+        box-sizing: border-box;
+    }
+
+    .btn-23 {
+        -webkit-tap-highlight-color: transparent;
+        -webkit-appearance: button;
+        background-color: #000;
+        background-image: none;
+        color: #fff;
+        cursor: pointer;
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+        Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
+        Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+        font-size: 100%;
+        font-weight: 900;
+        line-height: 1.5;
+        margin: 0;
+        -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
+        padding: 0;
+        text-transform: uppercase;
+    }
+
+    .btn-23:disabled {
+        cursor: default;
+    }
+
+    .btn-23:-moz-focusring {
+        outline: auto;
+    }
+
+    .btn-23 svg {
+        display: block;
+        vertical-align: middle;
+    }
+
+    .btn-23 [hidden] {
+        display: none;
+    }
+
+    .btn-23 {
+        border-radius: 99rem;
+        border-width: 2px;
+        overflow: hidden;
+        padding: 0.8rem 3rem;
+        position: relative;
+    }
+
+    .btn-23 span {
+        display: grid;
+        inset: 0;
+        place-items: center;
+        position: absolute;
+        transition: opacity 0.2s ease;
+    }
+
+    .btn-23 .marquee {
+        --spacing: 5em;
+        --start: 0em;
+        --end: 5em;
+        -webkit-animation: marquee 1s linear infinite;
+        animation: marquee 1s linear infinite;
+        -webkit-animation-play-state: paused;
+        animation-play-state: paused;
+        opacity: 0;
+        position: relative;
+        text-shadow: #fff var(--spacing) 0, #fff calc(var(--spacing) * -1) 0,
+        #fff calc(var(--spacing) * -2) 0;
+    }
+
+    .btn-23:hover .marquee {
+        -webkit-animation-play-state: running;
+        animation-play-state: running;
+        opacity: 1;
+    }
+
+    .btn-23:hover .text {
+        opacity: 0;
+    }
+
+    @-webkit-keyframes marquee {
+        0% {
+            transform: translateX(var(--start));
+        }
+
+        to {
+            transform: translateX(var(--end));
+        }
+    }
+
+    @keyframes marquee {
+        0% {
+            transform: translateX(var(--start));
+        }
+
+        to {
+            transform: translateX(var(--end));
+        }
+    }
+  </style>
+  <div id="scoreBoard">Player 1: 0 | AI: 0</div>
+  <canvas id="gameCanvas" width="800" height="400"></canvas>
+  <button id="startButton" class="btn-23">
+      <span class="text">Start</span>
+      <span aria-hidden="true" class="marquee">Start</span>
+  </button>
diff --git a/frontend/src/routes/aoa/Aoa.js b/frontend/src/routes/aoa/Aoa.js
new file mode 100644
index 0000000..9f1e1de
--- /dev/null
+++ b/frontend/src/routes/aoa/Aoa.js
@@ -0,0 +1,4 @@
+
+export async function fetchAoa() {
+	document.getElementById("nav-bar").style.display = "none";
+}
diff --git a/frontend/src/routes/aoa/aoa.html b/frontend/src/routes/aoa/aoa.html
new file mode 100644
index 0000000..badf025
--- /dev/null
+++ b/frontend/src/routes/aoa/aoa.html
@@ -0,0 +1,13 @@
+<!-- write me a 404 found page -->
+<style>
+	body {
+		background-image: none;
+	  }
+
+</style>
+<div>
+	  <h1>404 Not Found</h1>
+  <p>Sorry, the page you are looking for does not exist.</p>
+  <!-- go to home button  -->
+  <a href="/" class="btn btn-primary">Go to Home</a>
+</div>
diff --git a/frontend/src/routes/auth/Auth.js b/frontend/src/routes/auth/Auth.js
new file mode 100644
index 0000000..3b18246
--- /dev/null
+++ b/frontend/src/routes/auth/Auth.js
@@ -0,0 +1,18 @@
+import { navigateTo } from "../../utils/navTo.js";
+
+export async function fetchAuth() {
+    console.log("fetchAuth");
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const access_token = urlParams.get("access_token");
+    const refresh_token = urlParams.get("refresh_token");
+
+    if (access_token && refresh_token) {
+        localStorage.setItem("access_token", access_token);
+        localStorage.setItem("refresh_token", refresh_token);
+        navigateTo("/");
+    } else {
+        console.log("No access token found");
+        navigateTo("/login");
+    }
+}
diff --git a/frontend/src/routes/auth/auth.html b/frontend/src/routes/auth/auth.html
new file mode 100644
index 0000000..f91320d
--- /dev/null
+++ b/frontend/src/routes/auth/auth.html
@@ -0,0 +1,22 @@
+<!-- birazdan yonlendirileceksiniz yaziisi koy sytyle da yap -->
+<style>
+	body {
+		background-image: none;
+	}
+</style>
+<div class="container">
+	<div class="row">
+		<div class="col-md-6 col-md-offset-3">
+			<div class="auth-form">
+				<div class="auth-form-header">
+					<h1 class="auth-form-title">Birazdan yönlendirileceksiniz</h1>
+				</div>
+				<div class="auth-form-body">
+					<div class="auth-form-body-text">
+						<p>Lütfen bekleyin...</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
diff --git a/frontend/src/routes/edit/Edit.js b/frontend/src/routes/edit/Edit.js
index a066c58..92e1b5c 100644
--- a/frontend/src/routes/edit/Edit.js
+++ b/frontend/src/routes/edit/Edit.js
@@ -24,7 +24,7 @@ export async function fetchEdit() {
         }
 
         const data = await response.json();
-        const user = data[0].data[0];
+        const user = data.data[0];
 
         document.getElementById("profile-pic").src = pictureUrl + "?id=" + user.id;
 
@@ -35,6 +35,7 @@ export async function fetchEdit() {
         document.querySelector("input[name='user-name']").value = user.username;
         document.querySelector("input[name='last-name']").value = user.last_name;
         document.querySelector("input[name='phone']").value = user.phone;
+        document.querySelector("input[name='email']").value = user.email;
 
         document.getElementById("save-button").addEventListener("click", async () => {
             const access_token = localStorage.getItem("access_token");
@@ -42,6 +43,7 @@ export async function fetchEdit() {
             const firstName = document.querySelector("input[name='first-name']").value;
             const lastName = document.querySelector("input[name='last-name']").value;
             const phone = document.querySelector("input[name='phone']").value;
+            const email = document.querySelector("input[name='email']").value;
             const fields_warning = document.getElementById('fields-warning');
 
             let body = {
@@ -49,7 +51,7 @@ export async function fetchEdit() {
                 last_name: lastName,
                 phone: phone,
                 username: userName,
-                email: user.email,
+                email: email,
             };
 
             try {
@@ -66,6 +68,11 @@ export async function fetchEdit() {
                     const errorData = await response.json();
                     throw errorData;
                 }
+                if (response.status === 207) {
+                    alert("Email updated successfully, please verify your email");
+                    document.getElementById("logout-button").click();
+                    return;
+                }
                 alert("Profile updated successfully");
                 navigateTo("/profile");
 
@@ -80,6 +87,8 @@ export async function fetchEdit() {
                         insertIntoElement('fields-warning', "First name error: " + err.first_name);
                     } else if (err.last_name) {
                         insertIntoElement('fields-warning', "Last name error: " + err.last_name);
+                    } else if (err.email) {
+                        insertIntoElement('fields-warning', "Email error: " + err.email);
                     } else {
                         insertIntoElement('fields-warning', "Error: internal server error");
                         console.log(err);
diff --git a/frontend/src/routes/edit/edit.html b/frontend/src/routes/edit/edit.html
index e879afd..57444f9 100644
--- a/frontend/src/routes/edit/edit.html
+++ b/frontend/src/routes/edit/edit.html
@@ -26,7 +26,7 @@
 				<div class="card">
 					<div class="card-body">
 						<div class="d-flex flex-column align-items-center text-center">
-							<img id="profile-pic" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Admin" class="rounded-circle" width="150">
+							<img id="profile-pic" src="" alt="Admin" class="rounded-circle" width="150">
 							<div class="mt-3">
 								<h4 id="full-name">John Doe</h4>
 								<h6 id="user-name">user-name</h6>
@@ -70,6 +70,14 @@ <h6 class="mb-0">Phone</h6>
 								<input type="text" name="phone" class="form-control" value="(239) 816-9029">
 							</div>
 						</div>
+						<div class="row mb-3">
+							<div class="col-sm-3">
+								<h6 class="mb-0">Email</h6>
+							</div>
+							<div class="col-sm-9 text-secondary">
+								<input type="email" name="email" class="form-control" value="email">
+							</div>
+						</div>
 						<div class="row mb-3">
 							<div class="col-sm-3">
 								<h6 class="mb-0">Avatar</h6>
diff --git a/frontend/src/routes/friendrequests/Friendrequests.js b/frontend/src/routes/friendrequests/Friendrequests.js
index bc6db1b..6ac6850 100644
--- a/frontend/src/routes/friendrequests/Friendrequests.js
+++ b/frontend/src/routes/friendrequests/Friendrequests.js
@@ -3,6 +3,7 @@ import { goPagination } from "../../utils/utils.js";
 import { userGetByIdUrl, userDetailUrl, requestsList, acceptUrl, rejectUrl } from "../../contants/contants.js";
 
 let currentPage = 1; // Current page
+let total_pages = 1;
 
 export async function fetchFriendrequests() {
     const access_token = localStorage.getItem("access_token");
@@ -22,7 +23,7 @@ export async function fetchFriendrequests() {
         throw new Error(errorData.error);
     }
     const data = await response_user.json();
-    const user = data[0].data[0];
+    const user = data.data[0];
 
     const response = await fetch(requestsList + "?page=" + currentPage + "&limit=5" , {
         method: "GET",
@@ -39,115 +40,120 @@ export async function fetchFriendrequests() {
 
     const requests_res = await response.json();
     const requests = requests_res.data
-    let pagination = requests_res.pagination;
-    let totalPages = pagination.total_pages;
-
+    let paginate_data = requests_res.pagination;
+    if (paginate_data) {
+        total_pages = paginate_data.total_pages;
+    }
 
     console.log(requests);
     const tbody = document.querySelector(".table tbody");
     tbody.innerHTML = "";
     let sender = {};
-    requests.forEach((request, index) => {
-
-        fetch(userGetByIdUrl + "?id=" + request.id, {
-            method: "GET",
-            headers: {
-                "Content-Type": "application/json",
-                "Authorization": `Bearer ${access_token}`,
-            }
-        }).then((response) => {
-                if (!response.ok) {
-                    throw new Error("Failed to get user");
-                }
-                return response.json();
-            }).then((data) => {
-                let sender = data.data[0];
-
-                const row = document.createElement("tr");
-
-                const th = document.createElement("th");
-                th.scope = "row";
-                th.innerText = index + 1;
-                row.appendChild(th);
-
-                const sender_td = document.createElement("td");
-                sender_td.innerText = sender.username; // Adjust based on actual user object
-                row.appendChild(sender_td);
-
-                const full_name = document.createElement("td");
-                full_name.innerText = sender.first_name + " " + sender.last_name; // Adjust based on actual user object
-                row.appendChild(full_name);
-
-                      //add two buttons accept and reject button to each row
-        const td = document.createElement("td");
-        const acceptButton = document.createElement("button");
-        acceptButton.id = "accept-button";
-        acceptButton.innerText = "Accept";
-        acceptButton.className = "btn btn-primary";
-        td.appendChild(acceptButton);
-
-        const rejectButton = document.createElement("button");
-        rejectButton.id = "reject-button";
-        rejectButton.innerText = "Reject";
-        rejectButton.className = "btn btn-danger";
-        td.appendChild(rejectButton);
-
-        row.appendChild(td);
-
-        tbody.appendChild(row);
-
-        acceptButton.addEventListener("click", async () => {
-            try {
-                const response = await fetch(acceptUrl, {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json",
-                        "Authorization": `Bearer ${access_token}`,
-                    },
-                    body: JSON.stringify({
-                        "receiver_id": request.id,
-                    })
-                });
+    if (requests)
+    {
 
-                if (!response.ok) {
-                    const error = await response.json();
-                    throw new Error(error.error);
+        requests.forEach((request, index) => {
+
+            fetch(userGetByIdUrl + "?id=" + request.id, {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${access_token}`,
                 }
-                navigateTo("/friendrequests");
-            } catch (error) {
-                alert(error.message);
-            }
-        });
-
-        rejectButton.addEventListener("click", async () => {
-            try {
-                const response = await fetch(rejectUrl, {
-                    method: "DELETE",
-                    headers: {
-                        "Content-Type": "application/json",
-                        "Authorization": `Bearer ${access_token}`,
-                    },
-                    body: JSON.stringify({
-                        "receiver_id": request.id,
-                    })
-                });
+            }).then((response) => {
+                    if (!response.ok) {
+                        throw new Error("Failed to get user");
+                    }
+                    return response.json();
+                }).then((data) => {
+                    let sender = data.data[0];
+
+                    const row = document.createElement("tr");
+
+                    const th = document.createElement("th");
+                    th.scope = "row";
+                    th.innerText = index + 1;
+                    row.appendChild(th);
+
+                    const sender_td = document.createElement("td");
+                    sender_td.innerText = sender.username; // Adjust based on actual user object
+                    row.appendChild(sender_td);
+
+                    const full_name = document.createElement("td");
+                    full_name.innerText = sender.first_name + " " + sender.last_name; // Adjust based on actual user object
+                    row.appendChild(full_name);
+
+                          //add two buttons accept and reject button to each row
+            const td = document.createElement("td");
+            const acceptButton = document.createElement("button");
+            acceptButton.id = "accept-button";
+            acceptButton.innerText = "Accept";
+            acceptButton.className = "btn btn-primary";
+            td.appendChild(acceptButton);
+
+            const rejectButton = document.createElement("button");
+            rejectButton.id = "reject-button";
+            rejectButton.innerText = "Reject";
+            rejectButton.className = "btn btn-danger";
+            td.appendChild(rejectButton);
+
+            row.appendChild(td);
+
+            tbody.appendChild(row);
+
+            acceptButton.addEventListener("click", async () => {
+                try {
+                    const response = await fetch(acceptUrl, {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                            "Authorization": `Bearer ${access_token}`,
+                        },
+                        body: JSON.stringify({
+                            "receiver_id": request.id,
+                        })
+                    });
+
+                    if (!response.ok) {
+                        const error = await response.json();
+                        throw new Error(error.error);
+                    }
+                    navigateTo("/friendrequests");
+                } catch (error) {
+                    alert(error.message);
+                }
+            });
 
-                if (!response.ok) {
-                    const error = await response.json();
-                    throw new Error(error.error);
+            rejectButton.addEventListener("click", async () => {
+                try {
+                    const response = await fetch(rejectUrl, {
+                        method: "DELETE",
+                        headers: {
+                            "Content-Type": "application/json",
+                            "Authorization": `Bearer ${access_token}`,
+                        },
+                        body: JSON.stringify({
+                            "receiver_id": request.id,
+                        })
+                    });
+
+                    if (!response.ok) {
+                        const error = await response.json();
+                        throw new Error(error.error);
+                    }
+                    navigateTo("/friendrequests");
+                } catch (error) {
+                    alert(error.message);
                 }
-                navigateTo("/friendrequests");
-            } catch (error) {
-                alert(error.message);
-            }
-        });
-
-            }).catch((error) => {
-                console.error(error);
             });
-    });
-    goPagination(totalPages, currentPage, async (newPage) => {
-        currentPage = newPage;
-        fetchFriendrequests();
-    }, "pagination-container");
+
+                }).catch((error) => {
+                    console.error(error);
+                });
+            });
+            goPagination(total_pages, currentPage, async (newPage) => {
+                currentPage = newPage;
+                fetchFriendrequests();
+            }, "pagination-container");
+    }
 }
diff --git a/frontend/src/routes/friends/Friends.js b/frontend/src/routes/friends/Friends.js
index a541c07..dfa80d6 100644
--- a/frontend/src/routes/friends/Friends.js
+++ b/frontend/src/routes/friends/Friends.js
@@ -3,29 +3,17 @@ import { userStatuses } from "../../utils/utils.js";
 import { goPagination } from "../../utils/utils.js";
 import { friendList, friendDelete, userDetailUrl, singleUserDetailUrl, pictureUrl } from "../../contants/contants.js";
 
-let currentPage = 1; // Current page
+let currentPage = 1;
+let total_pages = 1;
+
 export async function fetchFriends() {
 
     const access_token = localStorage.getItem("access_token");
     if (!access_token) {
         console.log("No access token found");
         navigateTo("/login");
+        return;
     } else {
-        const response_user = await fetch(userDetailUrl, {
-            method: "GET",
-            headers: {
-                "Content-Type": "application/json",
-                "Authorization": `Bearer ${access_token}`,
-            }
-        });
-        if (!response_user.ok) {
-            const errorData = await response_user.json();
-            throw new Error(errorData.error);
-        }
-        const data_user = await response_user.json();
-        const currentUser = data_user[0].data[0];
-        const currentUserId = currentUser.id;
-
         const response = await fetch(friendList + "?page=" + currentPage + "&limit=5", {
             method: "GET",
             headers: {
@@ -35,97 +23,102 @@ export async function fetchFriends() {
         });
         const data = await response.json();
 
-        const users = data.data;
-        const pagination = data.pagination;
-        const totalPages = pagination.total_pages;
 
+        const users = data.data;
+        const paginate_data = data.pagination;
+        if (paginate_data) {
+            total_pages = paginate_data.total_pages;
+        }
 
         const tableBody = document.querySelector('.widget-26 tbody');
         tableBody.innerHTML = ''; // Clear previous content
-        users.forEach(user => {
-            let user_res = {};
-            fetch(singleUserDetailUrl + "?id=" + user.id, {
-                method: "GET",
-                headers: {
-                    "Content-Type": "application/json",
-                    "Authorization": `Bearer ${access_token}`,
-                }
-            }).then(response => {
-                if (!response.ok) {
-                    throw new Error("Failed to fetch user details");
-                }
-                return response.json();
-            }).then(data => {
-                user_res = data.data[0];
-
-            const userElement = document.createElement('tr');
-            let image = pictureUrl + "?id=" + user.id;
-            const user_status = userStatuses.includes(user.id) ? true : false;
-            userElement.innerHTML = `
-                <td>
-                    <div class="widget-26-job-emp-img">
-                        <img src="${image}" alt="User Image" />
-                    </div>
-                </td>
-                <td>
-                    <div class="widget-26-job-title">
-                        <a data-nav href="/otherprofile?id=${user_res.id}">${user_res.username}</a>
-                        <p class="m-0"><a data-nav href="#" class="employer-name">${user_res.first_name} ${user_res.last_name}</a></p>
-                    </div>
-                </td>
-                <td>
-                    <div class="widget-26-job-info">
-                        <p class="type m-0">Email: ${user_res.email}</p>
-                        <p class="text-muted m-0">Phone: <span class="location">${user_res.phone}</span></p>
-                    </div>
-                </td>
-                <td>
-                    <div class="widget-26-job-salary">ID: ${user_res.id}</div>
-                </td>
-                <td>
-                <div class="widget-26-job-category ${user_status === false ?  'bg-soft-danger' : 'bg-soft-success' }">
-                        <i class="indicator ${user_status === false ?  ' bg-danger' : 'bg-success' }"></i>
-                        <span>${user_status === true ? 'Online' : 'Offline' }</span>
-                    </div>
-                </td>
-                <td>
-                    <div class="widget-26-job-starred">
-                        <button id="delete-friend-button-${user_res.id}">Delete Friend</button>
-                    </div>
-                </td>
-            `;
 
-            tableBody.appendChild(userElement);
-            document.getElementById(`delete-friend-button-${user_res.id}`).addEventListener("click", function(event) {
-                event.preventDefault();
-                fetch(friendDelete,{
-                    method: 'DELETE',
+        if (users) {
+            users.forEach(user => {
+                let user_res = {};
+                fetch(singleUserDetailUrl + "?id=" + user.id, {
+                    method: "GET",
                     headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${access_token}`
-                    },
-                    body: JSON.stringify({
-                        receiver_id: user_res.id
-                    })
+                        "Content-Type": "application/json",
+                        "Authorization": `Bearer ${access_token}`,
+                    }
                 }).then(response => {
                     if (!response.ok) {
-                        return response.json().then(error => {
-                            throw new Error(error.error);
-                        });
+                        throw new Error("Failed to fetch user details");
                     }
                     return response.json();
                 }).then(data => {
-                    navigateTo("/friends");
-                }).catch(error => {
-                    alert(error.message);
+                    user_res = data.data[0];
+
+                const userElement = document.createElement('tr');
+                let image = pictureUrl + "?id=" + user.id;
+                const user_status = userStatuses.includes(user.id) ? true : false;
+                userElement.innerHTML = `
+                    <td>
+                        <div class="widget-26-job-emp-img">
+                            <img src="${image}" alt="User Image" />
+                        </div>
+                    </td>
+                    <td>
+                        <div class="widget-26-job-title">
+                            <a data-nav href="/otherprofile?id=${user_res.id}">${user_res.username}</a>
+                            <p class="m-0"><a data-nav href="#" class="employer-name">${user_res.first_name} ${user_res.last_name}</a></p>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="widget-26-job-info">
+                            <p class="type m-0">Email: ${user_res.email}</p>
+                            <p class="text-muted m-0">Phone: <span class="location">${user_res.phone}</span></p>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="widget-26-job-salary">ID: ${user_res.id}</div>
+                    </td>
+                    <td>
+                    <div class="widget-26-job-category ${user_status === false ?  'bg-soft-danger' : 'bg-soft-success' }">
+                            <i class="indicator ${user_status === false ?  ' bg-danger' : 'bg-success' }"></i>
+                            <span>${user_status === true ? 'Online' : 'Offline' }</span>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="widget-26-job-starred">
+                            <button id="delete-friend-button-${user_res.id}">Delete Friend</button>
+                        </div>
+                    </td>
+                `;
+
+                tableBody.appendChild(userElement);
+                document.getElementById(`delete-friend-button-${user_res.id}`).addEventListener("click", function(event) {
+                    event.preventDefault();
+                    fetch(friendDelete,{
+                        method: 'DELETE',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Authorization': `Bearer ${access_token}`
+                        },
+                        body: JSON.stringify({
+                            receiver_id: user_res.id
+                        })
+                    }).then(response => {
+                        if (!response.ok) {
+                            return response.json().then(error => {
+                                throw new Error(error.error);
+                            });
+                        }
+                        return response.json();
+                    }).then(data => {
+                        navigateTo("/friends");
+                    }).catch(error => {
+                        alert(error.message);
+                    });
                 });
             });
-        });
-        });
-        goPagination(totalPages, currentPage, async (newPage) => {
-            currentPage = newPage;
-            fetchFriends();
-        }, "pagination-container");
+            });
+            goPagination(total_pages, currentPage, async (newPage) => {
+                currentPage = newPage;
+                fetchFriends();
+            }, "pagination-container");
+        }
     }
 }
 
diff --git a/frontend/src/routes/game/Game.js b/frontend/src/routes/game/Game.js
index 9d60544..4f8aa47 100644
--- a/frontend/src/routes/game/Game.js
+++ b/frontend/src/routes/game/Game.js
@@ -1,5 +1,5 @@
 import { navigateTo } from "../../utils/navTo.js";
-const userDetailUrl = "http://127.0.0.1:8000/user/details";
+import { userDetailUrl, GamePlaySocketUrl } from "../../contants/contants.js";
 
 export let ws;
 
@@ -25,7 +25,7 @@ export async function fetchGame() {
   }
 
   const data = await response.json();
-  const user = data[0].data[0];
+  const user = data[0];
 
   if (!game_id)
   {
@@ -33,10 +33,11 @@ export async function fetchGame() {
     return;
   }
 
-  var connection = "ws://127.0.0.1:8011/ws/game/" + "?room=" + game_id + "?token=" + access_token;
+  var connection = GamePlaySocketUrl + "?room=" + game_id + "?token=" + access_token;
   ws = new WebSocket(connection);
 
 
+
   ws.onopen = () => {
     console.log("Connected to server");
   }
@@ -49,10 +50,11 @@ export async function fetchGame() {
     ctx.fillRect(paddRight.positionX, paddRight.positionY, paddRight.sizeX, paddRight.sizeY);
 
     ctx.font = '30px Arial';
-    ctx.fillText(paddRight.score, 50, 50);
-    ctx.fillText(paddLeft.score, canvas.width - 50, 50);
-    ctx.fillText(paddLeftUsername, canvas.width - 150, 50);
-    ctx.fillText(paddRightUsername, 75, 50);
+    ctx.fillText(paddRight.score, 150, 50);
+    ctx.fillText(paddRightUsername, 320, 50);
+
+    ctx.fillText(paddLeft.score, canvas.width - 180, 50);
+    ctx.fillText(paddLeftUsername, canvas.width - 420, 50);
   }
 
   function drawBall(ball) {
@@ -66,31 +68,6 @@ export async function fetchGame() {
   ws.onmessage = (message) => {
     let items = JSON.parse(message.data);
 
-    /*
-    if (items.message === "game_over") {
-      const requestBody = JSON.stringify(items);
-      const requestHeaders = {
-        "Content-Type": "application/json",
-        "Authorization": `Bearer ${access_token}`
-      };
-      fetch("http://localhost:8000/game/save", {
-        method: "POST",
-        headers: requestHeaders,
-        body: requestBody,
-      }).then((response) => {
-        console.log("Sunucudan gelen yanıt:", response);
-        if (!response.ok) {
-          throw new Error("Error saving game");
-        }
-        return response.json();
-      }).then((data) => {
-        console.log("Sunucudan gelen veri:", data);
-      }).catch((error) => {
-        console.log(error);
-      });
-      navigateTo("/");
-    }*/
-
     console.log(items);
 
     if (items.message === "game_over" && items.winner) {
diff --git a/frontend/src/routes/homepage/HomePage.js b/frontend/src/routes/homepage/HomePage.js
index 2726abb..292bf13 100644
--- a/frontend/src/routes/homepage/HomePage.js
+++ b/frontend/src/routes/homepage/HomePage.js
@@ -12,17 +12,3 @@ export async function fetchHomePage() {
     }
 }
 
-export async function fetchAuth() {
-    const urlParams = new URLSearchParams(window.location.search);
-    const access_token = urlParams.get("access_token");
-    const refresh_token = urlParams.get("refresh_token");
-
-    if (access_token && refresh_token) {
-        localStorage.setItem("access_token", access_token);
-        localStorage.setItem("refresh_token", refresh_token);
-        navigateTo("/");
-    } else {
-        console.log("No access token found");
-        navigateTo("/login");
-    }
-}
diff --git a/frontend/src/routes/localgame/Localgame.js b/frontend/src/routes/localgame/Localgame.js
index e9074a7..aa67bcf 100644
--- a/frontend/src/routes/localgame/Localgame.js
+++ b/frontend/src/routes/localgame/Localgame.js
@@ -1,4 +1,12 @@
-import { navigateTo } from "../../utils/navTo.js";
+import { navigateTo as originalNavigateTo } from "../../utils/navTo.js";
+
+// Override navigateTo function to detect navigation changes
+function navigateTo(url) {
+    if (gameRunning) {
+        finishGame();
+    }
+    originalNavigateTo(url);
+}
 
 export async function fetchLocalgame() {
     const access_token = localStorage.getItem("access_token");
@@ -159,6 +167,36 @@ export async function fetchLocalgame() {
             }
         });
 
+        function finishGame() {
+            gameRunning = false;
+            startButton.style.display = 'block';
+            alert("Local Game is aborted!");
+        }
+
+        // Listen for navigation events
+        const originalPushState = history.pushState;
+        const originalReplaceState = history.replaceState;
+
+        history.pushState = function () {
+            if (gameRunning) {
+                finishGame();
+            }
+            return originalPushState.apply(history, arguments);
+        };
+
+        history.replaceState = function () {
+            if (gameRunning) {
+                finishGame();
+            }
+            return originalReplaceState.apply(history, arguments);
+        };
+
+        window.addEventListener('popstate', () => {
+            if (gameRunning) {
+                finishGame();
+            }
+        });
+
         draw();
     }
-  }
+}
diff --git a/frontend/src/routes/localgame/localgame.html b/frontend/src/routes/localgame/localgame.html
index bc7e3cc..cd4efef 100644
--- a/frontend/src/routes/localgame/localgame.html
+++ b/frontend/src/routes/localgame/localgame.html
@@ -1,4 +1,3 @@
-
 <style>
     body {
         margin: 0;
@@ -12,7 +11,7 @@
         position: relative;
     }
     #gameCanvas {
-        border: 2px solid #fff;
+        border: 2px solid #000000;
     }
     #scoreBoard {
         position: absolute;
diff --git a/frontend/src/routes/localtournament/Localtournament.js b/frontend/src/routes/localtournament/Localtournament.js
index 4f865c8..4e9c7cf 100644
--- a/frontend/src/routes/localtournament/Localtournament.js
+++ b/frontend/src/routes/localtournament/Localtournament.js
@@ -1,192 +1,229 @@
-import { navigateTo } from "../../utils/navTo.js";
+import { navigateTo as originalNavigateTo } from "../../utils/navTo.js";
+
+// Override navigateTo function to detect navigation changes
+function navigateTo(url) {
+    if (gameState.inProgress) {
+        finishGame();
+    }
+    originalNavigateTo(url);
+}
 
 export async function fetchLocaltournament() {
     const access_token = localStorage.getItem("access_token");
     if (!access_token) {
         console.log("No access token found");
         navigateTo("/login");
-        } else {
-            const canvas = document.getElementById('gameCanvas');
-            const ctx = canvas.getContext('2d');
-            const scoreBoard = document.getElementById('scoreBoard');
-            const tournamentInfo = document.getElementById('tournamentInfo');
-
-            let players = [];
-            let currentMatch = 0;
-            let matchWinners = [];
-            let finalMatchParticipants = [];
-            let gameState = {
+    } else {
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const scoreBoard = document.getElementById('scoreBoard');
+        const tournamentInfo = document.getElementById('tournamentInfo');
+
+        scoreBoard.style.color = 'black';
+        tournamentInfo.style.color = 'black';
+
+        let players = [];
+        let currentMatch = 0;
+        let matchWinners = [];
+        let finalMatchParticipants = [];
+        let gameState = {
+            paddle1: { y: 150, score: 0 },
+            paddle2: { y: 150, score: 0 },
+            ball: { x: 400, y: 200, dx: 5, dy: 5 },
+            inProgress: false
+        };
+        document.getElementById('start-tournement').addEventListener('click', () => {
+            players = [
+                document.getElementById('player1').value,
+                document.getElementById('player2').value,
+                document.getElementById('player3').value,
+                document.getElementById('player4').value
+            ];
+            if (players.some(p => !p)) {
+                alert("Please enter aliases for all players!");
+                return;
+            }
+            currentMatch = 0;
+            matchWinners = [];
+            tournamentInfo.innerHTML = `Tournament started!<br>
+                                        Match 1: ${players[0]} vs ${players[1]}<br>
+                                        Match 2: ${players[2]} vs ${players[3]}`;
+            startMatch();
+        });
+
+        function startMatch() {
+            gameState = {
                 paddle1: { y: 150, score: 0 },
                 paddle2: { y: 150, score: 0 },
                 ball: { x: 400, y: 200, dx: 5, dy: 5 },
-                inProgress: false
+                inProgress: true
             };
-            document.getElementById('start-tournement').addEventListener('click', () => {
-                players = [
-                    document.getElementById('player1').value,
-                    document.getElementById('player2').value,
-                    document.getElementById('player3').value,
-                    document.getElementById('player4').value
-                ];
-                if (players.some(p => !p)) {
-                    alert("Please enter aliases for all players!");
-                    return;
-                }
-                currentMatch = 0;
-                matchWinners = [];
-                tournamentInfo.innerHTML = `Tournament started!<br>
-                                            Match 1: ${players[0]} vs ${players[1]}<br>
-                                            Match 2: ${players[2]} vs ${players[3]}`;
-                startMatch();
-            });
-
-            function startMatch() {
-                gameState = {
-                    paddle1: { y: 150, score: 0 },
-                    paddle2: { y: 150, score: 0 },
-                    ball: { x: 400, y: 200, dx: 5, dy: 5 },
-                    inProgress: true
-                };
-                scoreBoard.innerHTML = `${players[currentMatch * 2]} 0 - 0 ${players[currentMatch * 2 + 1]}`;
-                requestAnimationFrame(gameLoop);
-            }
+            scoreBoard.innerHTML = `${players[currentMatch * 2]} 0 - 0 ${players[currentMatch * 2 + 1]}`;
+            requestAnimationFrame(gameLoop);
+        }
 
-            function startFinalMatch(){
-                gameState = {
-                    paddle1: { y: 150, score: 0 },
-                    paddle2: { y: 150, score: 0 },
-                    ball: { x: 400, y: 200, dx: 5, dy: 5 },
-                    inProgress: true
-                };
+        function startFinalMatch() {
+            gameState = {
+                paddle1: { y: 150, score: 0 },
+                paddle2: { y: 150, score: 0 },
+                ball: { x: 400, y: 200, dx: 5, dy: 5 },
+                inProgress: true
+            };
+            requestAnimationFrame(gameLoop);
+        }
+
+        function gameLoop() {
+            update();
+            draw();
+            if (gameState.inProgress) {
                 requestAnimationFrame(gameLoop);
             }
+        }
 
-            function gameLoop() {
-                update();
-                draw();
-                if (gameState.inProgress) {
-                    requestAnimationFrame(gameLoop);
-                }
+        function update() {
+            // Paddle movement
+            if (keys.ArrowUp && gameState.paddle2.y > 0) gameState.paddle2.y -= 5;
+            if (keys.ArrowDown && gameState.paddle2.y < canvas.height - 100) gameState.paddle2.y += 5;
+            if (keys.w && gameState.paddle1.y > 0) gameState.paddle1.y -= 5;
+            if (keys.s && gameState.paddle1.y < canvas.height - 100) gameState.paddle1.y += 5;
+
+            // Ball movement
+            gameState.ball.x += gameState.ball.dx;
+            gameState.ball.y += gameState.ball.dy;
+
+            // Ball collision with top and bottom walls
+            if (gameState.ball.y <= 0 || gameState.ball.y >= canvas.height) {
+                gameState.ball.dy *= -1;
             }
 
-            function update() {
-                // Paddle movement
-                if (keys.ArrowUp && gameState.paddle2.y > 0) gameState.paddle2.y -= 5;
-                if (keys.ArrowDown && gameState.paddle2.y < canvas.height - 100) gameState.paddle2.y += 5;
-                if (keys.w && gameState.paddle1.y > 0) gameState.paddle1.y -= 5;
-                if (keys.s && gameState.paddle1.y < canvas.height - 100) gameState.paddle1.y += 5;
-            
-                // Ball movement
-                gameState.ball.x += gameState.ball.dx;
-                gameState.ball.y += gameState.ball.dy;
-            
-                // Ball collision with top and bottom walls
-                if (gameState.ball.y <= 0 || gameState.ball.y >= canvas.height) {
-                    gameState.ball.dy *= -1;
-                }
-            
-                // Ball collision with paddles
-                if (
-                    (gameState.ball.x <= 15 && gameState.ball.y >= gameState.paddle1.y && gameState.ball.y <= gameState.paddle1.y + 100) ||
-                    (gameState.ball.x >= canvas.width - 15 && gameState.ball.y >= gameState.paddle2.y && gameState.ball.y <= gameState.paddle2.y + 100)
-                ) {
-                    gameState.ball.dx *= -1;
-            
-                    // Move ball away from the paddle to prevent sticking
-                    if (gameState.ball.x <= 15) {
-                        gameState.ball.x = 15 + 10; // 15 is paddle width, 10 is ball radius
-                    } else {
-                        gameState.ball.x = canvas.width - 15 - 10;
-                    }
-                }
-            
-                // Ball out of bounds (left or right side)
-                if (gameState.ball.x <= 0) {
-                    gameState.paddle2.score++;
-                    resetBall();
-                } else if (gameState.ball.x >= canvas.width) {
-                    gameState.paddle1.score++;
-                    resetBall();
-                }
-            
-                // Update scoreboard
-                if (currentMatch != 2) {
-                    scoreBoard.innerHTML = `${players[currentMatch * 2]} ${gameState.paddle1.score} - ${gameState.paddle2.score} ${players[currentMatch * 2 + 1]}`;
+            // Ball collision with paddles
+            if (
+                (gameState.ball.x <= 15 && gameState.ball.y >= gameState.paddle1.y && gameState.ball.y <= gameState.paddle1.y + 100) ||
+                (gameState.ball.x >= canvas.width - 15 && gameState.ball.y >= gameState.paddle2.y && gameState.ball.y <= gameState.paddle2.y + 100)
+            ) {
+                gameState.ball.dx *= -1;
+
+                // Move ball away from the paddle to prevent sticking
+                if (gameState.ball.x <= 15) {
+                    gameState.ball.x = 15 + 10; // 15 is paddle width, 10 is ball radius
                 } else {
-                    scoreBoard.innerHTML = `${finalMatchParticipants[0]} ${gameState.paddle1.score} - ${gameState.paddle2.score} ${finalMatchParticipants[1]}`;
+                    gameState.ball.x = canvas.width - 15 - 10;
                 }
-            
-                // Check if match is over
-                if (gameState.paddle1.score === 5 || gameState.paddle2.score === 5) {
-                    endMatch();
-                }
-            }            
-
-            function draw() {
-                // Clear canvas
-                ctx.fillStyle = '#000';
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-            
-                // Draw paddles
-                ctx.fillStyle = '#fff';
-                ctx.fillRect(0, gameState.paddle1.y, 15, 100);
-                ctx.fillRect(canvas.width - 15, gameState.paddle2.y, 15, 100);
-            
-                // Draw ball
-                ctx.beginPath();
-                ctx.arc(gameState.ball.x, gameState.ball.y, 10, 0, Math.PI * 2);
-                ctx.fill();
-            
-                // Draw center line (net)
-                drawNet();
             }
-            
-            function drawNet() {
-                ctx.setLineDash([15, 5]);
-                ctx.strokeStyle = '#fff';
-                ctx.beginPath();
-                ctx.moveTo(canvas.width / 2, 0);
-                ctx.lineTo(canvas.width / 2, canvas.height);
-                ctx.stroke();
-                ctx.setLineDash([]); // Clear the dashed setting
-            }            
-
-            function resetBall() {
-                gameState.ball.x = canvas.width / 2;
-                gameState.ball.y = canvas.height / 2;
-                gameState.ball.dx = (Math.random() > 0.5 ? 1 : -1) * 5;
-                gameState.ball.dy = (Math.random() > 0.5 ? 1 : -1) * 5;
+
+            // Ball out of bounds (left or right side)
+            if (gameState.ball.x <= 0) {
+                gameState.paddle2.score++;
+                resetBall();
+            } else if (gameState.ball.x >= canvas.width) {
+                gameState.paddle1.score++;
+                resetBall();
             }
 
-            function endMatch() {
-                gameState.inProgress = false;
-                var winner;
-                if (currentMatch != 2)
-                {
-                    winner = gameState.paddle1.score > gameState.paddle2.score ? players[currentMatch * 2] : players[currentMatch * 2 + 1];
-                    matchWinners.push(winner);
-                }
-                else
-                {
-                    winner = gameState.paddle1.score > gameState.paddle2.score ? finalMatchParticipants[0] : finalMatchParticipants[1];
-                    matchWinners.push(winner);
-                }
-                currentMatch++;
-                console.log("current match is", currentMatch);
-                if (currentMatch === 1) {
-                    tournamentInfo.innerHTML += `<br>${winner} wins!<br>Next match: ${players[2]} vs ${players[3]}`;
-                    setTimeout(startMatch, 3000);
-                } else if (currentMatch === 2) {
-                    finalMatchParticipants = [...matchWinners];
-                    tournamentInfo.innerHTML += `<br>${winner} wins!<br>Final match: ${finalMatchParticipants[0]} vs ${finalMatchParticipants[1]}`;
-                    setTimeout(startFinalMatch, 3000);
-                } else if (currentMatch === 3) { // Check if final match is completed
-                    tournamentInfo.innerHTML += `<br>${matchWinners[2]} wins the tournament!`;
-                }
+            // Update scoreboard
+            if (currentMatch != 2) {
+                scoreBoard.innerHTML = `${players[currentMatch * 2]} ${gameState.paddle1.score} - ${gameState.paddle2.score} ${players[currentMatch * 2 + 1]}`;
+            } else {
+                scoreBoard.innerHTML = `${finalMatchParticipants[0]} ${gameState.paddle1.score} - ${gameState.paddle2.score} ${finalMatchParticipants[1]}`;
+            }
+
+            // Check if match is over
+            if (gameState.paddle1.score === 5 || gameState.paddle2.score === 5) {
+                endMatch();
             }
-            // Keyboard input
-            let keys = {};
-            document.addEventListener('keydown', (e) => { keys[e.key] = true; });
-            document.addEventListener('keyup', (e) => { keys[e.key] = false; });
         }
+
+        function draw() {
+            // Clear canvas
+            ctx.fillStyle = '#000';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Draw paddles
+            ctx.fillStyle = '#fff';
+            ctx.fillRect(0, gameState.paddle1.y, 15, 100);
+            ctx.fillRect(canvas.width - 15, gameState.paddle2.y, 15, 100);
+
+            // Draw ball
+            ctx.beginPath();
+            ctx.arc(gameState.ball.x, gameState.ball.y, 10, 0, Math.PI * 2);
+            ctx.fill();
+
+            // Draw center line (net)
+            drawNet();
+        }
+
+        function drawNet() {
+            ctx.setLineDash([15, 5]);
+            ctx.strokeStyle = '#fff';
+            ctx.beginPath();
+            ctx.moveTo(canvas.width / 2, 0);
+            ctx.lineTo(canvas.width / 2, canvas.height);
+            ctx.stroke();
+            ctx.setLineDash([]); // Clear the dashed setting
+        }
+
+        function resetBall() {
+            gameState.ball.x = canvas.width / 2;
+            gameState.ball.y = canvas.height / 2;
+            gameState.ball.dx = (Math.random() > 0.5 ? 1 : -1) * 5;
+            gameState.ball.dy = (Math.random() > 0.5 ? 1 : -1) * 5;
+        }
+
+        function endMatch() {
+            gameState.inProgress = false;
+            var winner;
+            if (currentMatch != 2) {
+                winner = gameState.paddle1.score > gameState.paddle2.score ? players[currentMatch * 2] : players[currentMatch * 2 + 1];
+                matchWinners.push(winner);
+            } else {
+                winner = gameState.paddle1.score > gameState.paddle2.score ? finalMatchParticipants[0] : finalMatchParticipants[1];
+                matchWinners.push(winner);
+            }
+            currentMatch++;
+            if (currentMatch === 1) {
+                tournamentInfo.innerHTML += `<br>${winner} wins!<br>Next match: ${players[2]} vs ${players[3]}`;
+                setTimeout(startMatch, 3000);
+            } else if (currentMatch === 2) {
+                finalMatchParticipants = [...matchWinners];
+                tournamentInfo.innerHTML += `<br>${winner} wins!<br>Final match: ${finalMatchParticipants[0]} vs ${finalMatchParticipants[1]}`;
+                setTimeout(startFinalMatch, 3000);
+            } else if (currentMatch === 3) { // Check if final match is completed
+                tournamentInfo.innerHTML += `<br>${matchWinners[2]} wins the tournament!`;
+            }
+        }
+
+        function finishGame() {
+            gameState.inProgress = false;
+            alert("Local Tournament is aborted!");
+        }
+
+        // Keyboard input
+        let keys = {};
+        document.addEventListener('keydown', (e) => { keys[e.key] = true; });
+        document.addEventListener('keyup', (e) => { keys[e.key] = false; });
+
+        // Listen for navigation events
+        const originalPushState = history.pushState;
+        const originalReplaceState = history.replaceState;
+
+        history.pushState = function () {
+            if (gameState.inProgress) {
+                finishGame();
+            }
+            return originalPushState.apply(history, arguments);
+        };
+
+        history.replaceState = function () {
+            if (gameState.inProgress) {
+                finishGame();
+            }
+            return originalReplaceState.apply(history, arguments);
+        };
+
+        window.addEventListener('popstate', () => {
+            if (gameState.inProgress) {
+                finishGame();
+            }
+        });
     }
+}
diff --git a/frontend/src/routes/localtournament/localtournament.html b/frontend/src/routes/localtournament/localtournament.html
index 5c7993c..3a1ba5b 100644
--- a/frontend/src/routes/localtournament/localtournament.html
+++ b/frontend/src/routes/localtournament/localtournament.html
@@ -9,8 +9,7 @@
         margin: 0;
     }
     #gameCanvas {
-        border: 2px solid #000;
-        background-color: #000;
+        border: 2px solid #000000;
     }
     #scoreBoard {
         font-size: 24px;
@@ -18,12 +17,14 @@
         position: absolute;
         font-weight: bold;
         top: 365px;
+        color: #000000;
     }
     #tournamentInfo {
         font-size: 18px;
         margin: 1px 0;
         position: absolute;
-        top: 925px;
+        top: 950px;
+        color: #000000;
     }
     #playerForm {
         display: flex;
diff --git a/frontend/src/routes/login/Login.js b/frontend/src/routes/login/Login.js
index ab425ea..204cd0b 100644
--- a/frontend/src/routes/login/Login.js
+++ b/frontend/src/routes/login/Login.js
@@ -3,7 +3,7 @@ import  { navigateTo } from "../../utils/navTo.js";
 import { loginUrl, IntraOAuthUrl } from "../../contants/contants.js";
 
 export async function fetchLogin() {
-
+document.getElementById("nav-bar").style.display = "none";
 document.getElementById('login-form').addEventListener("submit", async (e) => {
     e.preventDefault();
     const email = document.getElementById("email").value;
diff --git a/frontend/src/routes/login/login.html b/frontend/src/routes/login/login.html
index 01a7303..a4e4a26 100644
--- a/frontend/src/routes/login/login.html
+++ b/frontend/src/routes/login/login.html
@@ -1,3 +1,16 @@
+<style>
+    body, html {
+            background-image: none;
+    }
+    .navbar {
+        display: none;
+    }
+
+
+
+</style>
+
+
 <div class="container vh-100 d-flex justify-content-center align-items-center">
     <div class="row">
         <div class="col-lg-6">
diff --git a/frontend/src/routes/otherprofile/Otherprofile.js b/frontend/src/routes/otherprofile/Otherprofile.js
index a181940..1f740e0 100644
--- a/frontend/src/routes/otherprofile/Otherprofile.js
+++ b/frontend/src/routes/otherprofile/Otherprofile.js
@@ -1,113 +1,119 @@
-
-
 import { navigateTo } from "../../utils/navTo.js";
-import { goPagination } from "../../utils/utils.js";
+import { userStatuses, goPagination } from "../../utils/utils.js";
 import { userGetByIdUrl, matchHistoryUrl, pictureUrl } from "../../contants/contants.js";
+const access_token = localStorage.getItem("access_token");
 
 let currentPage = 1; // Current page
 
-const access_token = localStorage.getItem("access_token");
+
 export async function fetchOtherprofile() {
     if (!access_token) {
         navigateTo("/login");
         return;
     }
+    try {
         console.log("Fetching user details");
         const urlParams = new URLSearchParams(window.location.search);
         const id = urlParams.get('id');
-        const res = await fetch(userGetByIdUrl + "?id=" + id, {
+        const user_status = userStatuses.includes(id) ? true : false;
+        const userResponse = await fetch(userGetByIdUrl + "?id=" + id, {
             method: "GET",
             headers: {
                 "Content-Type": "application/json",
                 "Authorization": `Bearer ${access_token}`,
             }
         });
-        if (!res.ok) {
-            const errorData = await res.json();
+        if (!userResponse.ok) {
+            const errorData = await userResponse.json();
             throw new Error(errorData.error);
         }
-        const data_res = await res.json();
-        const user = data_res.data[0];
-        console.log("User Data:", user);
+        const userData = await userResponse.json();
+        const user = userData.data[0];
+        console.log(user);
+
+        document.getElementById("profile-pic").src = pictureUrl + "?id=" + user.id;
         document.getElementById("full-name").textContent = `${user.first_name} ${user.last_name}`;
         document.getElementById("user-name").textContent = user.username;
         document.getElementById("profile-first-name").textContent = user.first_name;
         document.getElementById("profile-last-name").textContent = user.last_name;
         document.getElementById("phone").textContent = user.phone;
+        document.getElementById("profile-status").textContent = user_status ? "Online" : "Offline";
 
 
-
-            console.log("Fetching match history");
-            const response = await fetch(matchHistoryUrl + `?username=${user.username}&page=${currentPage}&limit=3`, {
-                method: "GET",
-                headers: {
-                    "Content-Type": "application/json",
-                    "Authorization": `Bearer ${access_token}`,
-                }
-            });
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.error);
+        console.log("Fetching match history");
+        const matchResponse = await fetch(`${matchHistoryUrl}?username=${user.username}&page=${currentPage}&limit=3`, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${access_token}`,
             }
-            const data = await response.json();
-            let matches = data.data;
-            let pagination = data.pagination;
-            let totalPages = pagination.total_pages;
-            let stats = data.stats;
-
-
-            const matchTableBody = document.querySelector("#match-history-table tbody");
-            matchTableBody.innerHTML = "";
+        });
+        if (!matchResponse.ok) {
+            const errorData = await matchResponse.json();
+            throw new Error(errorData.error);
+        }
+        const matchData = await matchResponse.json();
+        const matches = matchData.data;
+        const stats = matchData.stats;
+        const paginate_data = matchData.pagination;
+        const totalPages = paginate_data.total_pages;
 
         document.getElementById("profile-pic").src = pictureUrl + "?id=" + user.id;
-        document.getElementById('total-matches').textContent = stats.total_games;
+        document.getElementById('total-games').textContent = stats.total_games;
         document.getElementById('win-count').textContent = stats.win_count;
         document.getElementById('lose-count').textContent = stats.lose_count;
 
-         matches.forEach(match => {
+        const matchTableBody = document.querySelector("#match-history-table tbody");
+        matchTableBody.innerHTML = "";
+
+
+
+
+        // Render match rows
 
+         matches.forEach(match => {
             const date = new Date(match.date).toLocaleString();
             const row = document.createElement("tr");
             row.innerHTML = `
-                <tr>
-                    <td>
-                        <h6 class="h5 mb-0 text-black">${date}</h6>
-                        <hr>
-                        <div class="row">
-                            <div class="col-md-4 col-lg-4 mb-4 mb-lg-0">
-                                <div class="text-center text-lg-left">
-                                    <div class="d-block d-lg-flex align-items-center">
-                                        <div class="text">
-                                            <h3 class="h5 mb-0 text-black">${match.player1}</h3>
-                                        </div>
+                <td>
+                    <h6 class="h5 mb-0 text-black">${date}</h6>
+                    <hr>
+                    <div class="row">
+                        <div class="col-md-4 col-lg-4 mb-4 mb-lg-0">
+                            <div class="text-center text-lg-left">
+                                <div class="d-block d-lg-flex align-items-center">
+                                    <div class="text">
+                                        <h3 class="h5 mb-0 text-black">${match.player1}</h3>
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-md-4 col-lg-4 text-center mb-4 mb-lg-0">
-                                <div class="d-inline-block">
-                                    <div class="bg-black py-2 px-4 mb-2 text-white d-inline-block rounded">
-                                        <span class="h5">${match.player1_score}:${match.player2_score}</span>
-                                    </div>
+                        </div>
+                        <div class="col-md-4 col-lg-4 text-center mb-4 mb-lg-0">
+                            <div class="d-inline-block">
+                                <div class="bg-black py-2 px-4 mb-2 text-white d-inline-block rounded">
+                                    <span class="h5">${match.player1_score}:${match.player2_score}</span>
                                 </div>
                             </div>
-                            <div class="col-md-4 col-lg-4 mb-4 mb-lg-0">
-                                <div class="text-center text-lg-right">
-                                    <div class="d-block d-lg-flex align-items-center">
-                                        <div class="text">
-                                            <h3 class="h5 mb-0 text-black">${match.player2}</h3>
-                                        </div>
+                        </div>
+                        <div class="col-md-4 col-lg-4 mb-4 mb-lg-0">
+                            <div class="text-center text-lg-right">
+                                <div class="d-block d-lg-flex align-items-center">
+                                    <div class="text">
+                                        <h3 class="h5 mb-0 text-black">${match.player2}</h3>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </td>
-                </tr>
+                    </div>
+                </td>
             `;
             matchTableBody.appendChild(row);
-            goPagination(totalPages, currentPage, async (newPage) => {
-                currentPage = newPage;
-                fetchOtherprofile();
-            }, "pagination-container");
-        });
+        })
+        goPagination(totalPages, currentPage, async (newPage) => {
+            currentPage = newPage;
+            fetchOtherprofile();
+        }, "pagination-container");
+    } catch (err) {
+        console.log(err);
+    }
 }
-
diff --git a/frontend/src/routes/otherprofile/otherprofile.html b/frontend/src/routes/otherprofile/otherprofile.html
index ce5869b..57e7ede 100644
--- a/frontend/src/routes/otherprofile/otherprofile.html
+++ b/frontend/src/routes/otherprofile/otherprofile.html
@@ -1,194 +1,194 @@
-<style>
-    body{
-
-        color: #1a202c;
-        text-align: left;
-        background-color: #e2e8f0;
-    }
-    .main-body {
-        padding: 15px;
-    }
-    .card {
-        box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
-    }
-    .card {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        min-width: 0;
-        word-wrap: break-word;
-        background-color: #fff;
-        background-clip: border-box;
-        border: 0 solid rgba(0,0,0,.125);
-        border-radius: .25rem;
-    }
-    .card-body {
-        flex: 1 1 auto;
-        min-height: 1px;
-        padding: 1rem;
-    }
-    .gutters-sm {
-        margin-right: -8px;
-        margin-left: -8px;
-    }
-    .gutters-sm>.col, .gutters-sm>[class*=col-] {
-        padding-right: 8px;
-        padding-left: 8px;
-    }
-    .mb-3, .my-3 {
-        margin-bottom: 1rem!important;
-    }
-    .bg-gray-300 {
-        background-color: #e2e8f0;
-    }
-    .h-100 {
-        height: 100%!important;
-    }
-    .shadow-none {
-        box-shadow: none!important;
-    }
-    match-entry {
-        display: flex;
-        flex-wrap: wrap;
-        margin-top: 20px;
-    }
-    .match-entry {
-        /* ortaya yasla */
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        gap: 10px;
-        background-color: #f8f9fa;
-        border-radius: 10px;
-        border: 1px solid #e9ecef;
-        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-        text-align: center;
-        padding: 10px;
-        margin: 10px;
-        margin-top: 10px;
-        margin-bottom: 10px;
-    }
-</style>
-<div class="container">
-    <div class="main-body">
-        <div class="row gutters-sm">
-            <div class="col-md-4 mb-3">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="d-flex flex-column align-items-center text-center">
-                            <img id="profile-pic" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Admin" class="rounded-circle" width="150">
-                            <div class="mt-3">
-                                <h4 id="full-name">John Doe</h4>
-                                <h6 id="user-name">Dosafd</h6>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="card mt-3">
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
-                            <h6 class="mb-0" style="font-weight: bold; font-size: 1.2em;">Match History</h6>
-                        </li>
-                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
-                            <div class="site-block-tab nav-pills" id="pills-tab" role="tablist">
-                                <div class="tab-content" id="pills-tabContent">
-                                  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
-
-                                    <div class="row align-items-center">
-                                      <div class="col-md-12">
-
-
-
-                                        <div class="row bg-white align-items-center ml-4 mr-0 py-4 match-entry">
-                                            <table id="match-history-table">
-                                                <thead>
-                                                    <tr>
-                                                        <!--  -->
-                                                    </tr>
-                                                </thead>
-                                                <tbody>
-                                                    <!-- match history -->
-                                                </tbody>
-                                            </table>
-                                        </div>
-
-                                        <ul class="pagination" id="pagination-container">
-                                            <!-- pagination -->
-                                        </ul>
-                                      </div>
-
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="col-md-8">
-                <div class="card mb-3">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-sm-3">
-                                <h6 class="mb-0">Status</h6>
-                            </div>
-                            <div class="col-sm-9 text-secondary" id="profile-status">
-                                Offline
-                            </div>
-                        </div>
-                        <hr>
-                        <div class="row">
-                            <div class="col-sm-3">
-                                <h6 class="mb-0">First Name</h6>
-                            </div>
-                            <div class="col-sm-9 text-secondary" id="profile-first-name">
-                                Kenneth
-                            </div>
-                        </div>
-                        <hr>
-                        <div class="row">
-                            <div class="col-sm-3">
-                                <h6 class="mb-0">Last Name</h6>
-                            </div>
-                            <div class="col-sm-9 text-secondary" id="profile-last-name">
-                                Valdez
-                            </div>
-                        </div>
-                        <hr>
-                        <div class="row">
-                            <div class="col-sm-3">
-                                <h6 class="mb-0">Phone</h6>
-                            </div>
-                            <div class="col-sm-9 text-secondary" id="phone">
-                                2398169029
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-                <div class="row gutters-sm">
-                    <div class="col-sm-6 mb-3">
-                        <div class="card h-100">
-                            <div class="card-body">
-                                <h6 class="d-flex align-items-center mb-3"><i class="material-icons text-info mr-2"></i>Stats</h6>
-                                <small>Total Matches</small>
-                                    <div>
-                                        <span id = "total-matches" class="text-secondary">0</span>
-                                    </div>
-                                <!--<div class="progress mb-3" style="height: 5px">
-                                    <div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
-                                </div>-->
-                                <small>Win Number</small>
-                                    <div>
-                                        <span id = "win-count" class="text-secondary">0</span>
-                                    </div>
-                                <small>Lose Number</small>
-                                    <div>
-                                        <span id = "lose-count" class="text-secondary">0</span>
-                                    </div>
-                            </div>
-                        </div>
-                    </div>
-
+<style>
+    body{
+
+        color: #1a202c;
+        text-align: left;
+        background-color: #e2e8f0;
+    }
+    .main-body {
+        padding: 15px;
+    }
+    .card {
+        box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
+    }
+    .card {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        word-wrap: break-word;
+        background-color: #fff;
+        background-clip: border-box;
+        border: 0 solid rgba(0,0,0,.125);
+        border-radius: .25rem;
+    }
+    .card-body {
+        flex: 1 1 auto;
+        min-height: 1px;
+        padding: 1rem;
+    }
+    .gutters-sm {
+        margin-right: -8px;
+        margin-left: -8px;
+    }
+    .gutters-sm>.col, .gutters-sm>[class*=col-] {
+        padding-right: 8px;
+        padding-left: 8px;
+    }
+    .mb-3, .my-3 {
+        margin-bottom: 1rem!important;
+    }
+    .bg-gray-300 {
+        background-color: #e2e8f0;
+    }
+    .h-100 {
+        height: 100%!important;
+    }
+    .shadow-none {
+        box-shadow: none!important;
+    }
+    match-entry {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 20px;
+    }
+    .match-entry {
+        /* ortaya yasla */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        gap: 10px;
+        background-color: #f8f9fa;
+        border-radius: 10px;
+        border: 1px solid #e9ecef;
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+        text-align: center;
+        padding: 10px;
+        margin: 10px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+</style>
+<div class="container">
+    <div class="main-body">
+        <div class="row gutters-sm">
+            <div class="col-md-4 mb-3">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="d-flex flex-column align-items-center text-center">
+                            <img id="profile-pic" src="" alt="Admin" class="rounded-circle" width="150">
+                            <div class="mt-3">
+                                <h4 id="full-name">John Doe</h4>
+                                <h6 id="user-name">Dosafd</h6>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="card mt-3">
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                            <h6 class="mb-0" style="font-weight: bold; font-size: 1.2em;">Match History</h6>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                            <div class="site-block-tab nav-pills" id="pills-tab" role="tablist">
+
+                                <div class="tab-content" id="pills-tabContent">
+                                  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
+
+                                    <div class="row align-items-center">
+                                      <div class="col-md-12">
+
+
+
+                                        <div class="row bg-white align-items-center ml-4 mr-0 py-4 match-entry">
+                                            <table id="match-history-table">
+                                                <thead>
+                                                    <tr>
+                                                        <!--  -->
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <!-- match history -->
+                                                </tbody>
+                                            </table>
+                                        </div>
+
+                                        <ul class="pagination" id="pagination-container">
+                                            <!-- pagination -->
+                                        </ul>
+                                      </div>
+
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="col-md-8">
+                <div class="card mb-3">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-sm-3">
+                                <h6 class="mb-0">Status</h6>
+                            </div>
+                            <div class="col-sm-9 text-secondary" id="profile-status">
+                                Offline
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+                            <div class="col-sm-3">
+                                <h6 class="mb-0">First Name</h6>
+                            </div>
+                            <div class="col-sm-9 text-secondary" id="profile-first-name">
+                                Kenneth
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+                            <div class="col-sm-3">
+                                <h6 class="mb-0">Last Name</h6>
+                            </div>
+                            <div class="col-sm-9 text-secondary" id="profile-last-name">
+                                Valdez
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+                            <div class="col-sm-3">
+                                <h6 class="mb-0">Phone</h6>
+                            </div>
+                            <div class="col-sm-9 text-secondary" id="phone">
+                                2398169029
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row gutters-sm">
+                    <div class="col-sm-6 mb-3">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <h6 class="d-flex align-items-center mb-3"><i class="material-icons text-info mr-2"></i>Stats</h6>
+                                <small>Total Matches</small>
+                                    <div>
+                                        <span id = "total-games" class="text-secondary">0</span>
+                                    </div>
+                                <!--<div class="progress mb-3" style="height: 5px">
+                                    <div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                                </div>-->
+                                <small>Win Number</small>
+                                    <div>
+                                        <span id = "win-count" class="text-secondary">0</span>
+                                    </div>
+                                <small>Lose Number</small>
+                                    <div>
+                                        <span id = "lose-count" class="text-secondary">0</span>
+                                    </div>
+                            </div>
+                        </div>
+                    </div>
+
diff --git a/frontend/src/routes/profile/Profile.js b/frontend/src/routes/profile/Profile.js
index 62603df..a2eb4c3 100644
--- a/frontend/src/routes/profile/Profile.js
+++ b/frontend/src/routes/profile/Profile.js
@@ -1,11 +1,16 @@
 import { navigateTo } from "../../utils/navTo.js";
-import { goPagination, CheckAuth, RefreshToken} from "../../utils/utils.js";
+import { goPagination } from "../../utils/utils.js";
 import { userDetailUrl, matchHistoryUrl, pictureUrl } from "../../contants/contants.js";
 
 let currentPage = 1; // Current page
-
+let total_pages = 1;
 export async function fetchProfile() {
-
+    const access_token = localStorage.getItem("access_token");
+    if (!access_token) {
+        navigateTo("/login");
+        return;
+    } else {
+        try {
         console.log("Fetching user details");
         const response_user = await fetch(userDetailUrl, {
             method: "GET",
@@ -20,7 +25,7 @@ export async function fetchProfile() {
         }
 
         const data_user = await response_user.json();
-        const user = data_user[0].data[0];
+        const user = data_user.data[0];
         console.log("User Data:", user);
 
         document.getElementById("full-name").textContent = `${user.first_name} ${user.last_name}`;
@@ -28,45 +33,50 @@ export async function fetchProfile() {
         document.getElementById("profile-first-name").textContent = user.first_name;
         document.getElementById("profile-last-name").textContent = user.last_name;
         document.getElementById("phone").textContent = user.phone;
+        document.getElementById("email").textContent = user.email;
 
         if (localStorage.getItem("status")) {
             document.getElementById("profile-status").textContent = localStorage.getItem("status");
         }
 
         console.log("Fetching match history");
-        const response = await fetch(`${matchHistoryUrl}?username=${user.username}&page=${currentPage}&limit=3`, {
+        const matchResponse = await fetch(`${matchHistoryUrl}?username=${user.username}&page=${currentPage}&limit=3`, {
             method: "GET",
             headers: {
                 "Content-Type": "application/json",
                 "Authorization": `Bearer ${access_token}`,
             }
         });
-        if (!response.ok) {
-            const errorData = await response.json();
+        if (!matchResponse.ok) {
+            const errorData = await matchResponse.json();
             throw new Error(errorData.error);
         }
-        const data = await response.json();
-        let matches = data.data;
-        let pagination = data.pagination;
-        let totalPages = pagination.total_pages;
-        let stats = data.stats;
+        const matchData = await matchResponse.json();
+        const matches = matchData.data;
+        const stats = matchData.stats;
+        const paginate_data = matchData.pagination;
+
+        if (paginate_data) {
+            total_pages = paginate_data.total_pages;
+        }
 
+        if (stats) {
+            document.getElementById('total-games').textContent = stats.total_games;
+            document.getElementById('win-count').textContent = stats.win_count;
+            document.getElementById('lose-count').textContent = stats.lose_count;
+        }
 
         document.getElementById("profile-pic").src = pictureUrl + "?id=" + user.id;
-        document.getElementById('total-games').textContent = stats.total_games;
-        document.getElementById('win-count').textContent = stats.win_count;
-        document.getElementById('lose-count').textContent = stats.lose_count;
-
         const matchTableBody = document.querySelector("#match-history-table tbody");
         matchTableBody.innerHTML = "";
 
 
-        matches.forEach(match => {
-
-            const date = new Date(match.date).toLocaleString();
-            const row = document.createElement("tr");
-            row.innerHTML = `
-                <tr>
+        if (matches) {
+            matches.forEach(match => {
+            if (match) {
+                const date = new Date(match.date).toLocaleString();
+                const row = document.createElement("tr");
+                row.innerHTML = `
                     <td>
                         <h6 class="h5 mb-0 text-black">${date}</h6>
                         <hr>
@@ -98,12 +108,19 @@ export async function fetchProfile() {
                             </div>
                         </div>
                     </td>
-                </tr>
-            `;
-            matchTableBody.appendChild(row);
-        });
-    goPagination(totalPages, currentPage, async (newPage) => {
-        currentPage = newPage;
-        fetchProfile();
-    }, "pagination-container");
+                `;
+                matchTableBody.appendChild(row);
+            }
+            goPagination(total_pages, currentPage, async (newPage) => {
+                currentPage = newPage;
+                fetchProfile();
+            }, "pagination-container");
+        })}
+
+          } catch (error) {
+            console.error(error);
+
+          }
+    }
 }
+
diff --git a/frontend/src/routes/profile/profile.html b/frontend/src/routes/profile/profile.html
index 373f8ef..5358f33 100644
--- a/frontend/src/routes/profile/profile.html
+++ b/frontend/src/routes/profile/profile.html
@@ -1,199 +1,208 @@
-<style>
-    body{
-
-        color: #1a202c;
-        text-align: left;
-        background-color: #e2e8f0;
-    }
-    .main-body {
-        padding: 15px;
-    }
-    .card {
-        box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
-    }
-    .card {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        min-width: 0;
-        word-wrap: break-word;
-        background-color: #fff;
-        background-clip: border-box;
-        border: 0 solid rgba(0,0,0,.125);
-        border-radius: .25rem;
-    }
-    .card-body {
-        flex: 1 1 auto;
-        min-height: 1px;
-        padding: 1rem;
-    }
-    .gutters-sm {
-        margin-right: -8px;
-        margin-left: -8px;
-    }
-    .gutters-sm>.col, .gutters-sm>[class*=col-] {
-        padding-right: 8px;
-        padding-left: 8px;
-    }
-    .mb-3, .my-3 {
-        margin-bottom: 1rem!important;
-    }
-    .bg-gray-300 {
-        background-color: #e2e8f0;
-    }
-    .h-100 {
-        height: 100%!important;
-    }
-    .shadow-none {
-        box-shadow: none!important;
-    }
-    match-entry {
-        display: flex;
-        flex-wrap: wrap;
-        margin-top: 20px;
-    }
-    .match-entry {
-        /* ortaya yasla */
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        gap: 10px;
-        background-color: #f8f9fa;
-        border-radius: 10px;
-        border: 1px solid #e9ecef;
-        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-        text-align: center;
-        padding: 10px;
-        margin: 10px;
-        margin-top: 10px;
-        margin-bottom: 10px;
-    }
-</style>
-<div class="container">
-    <div class="main-body">
-        <div class="row gutters-sm">
-            <div class="col-md-4 mb-3">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="d-flex flex-column align-items-center text-center">
-                            <img id="profile-pic" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Admin" class="rounded-circle" width="150">
-                            <div class="mt-3">
-                                <h4 id="full-name">John Doe</h4>
-                                <h6 id="user-name">Dosafd</h6>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="card mt-3">
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
-                            <h6 class="mb-0" style="font-weight: bold; font-size: 1.2em;">Match History</h6>
-                        </li>
-                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
-                            <div class="site-block-tab nav-pills" id="pills-tab" role="tablist">
-                                <div class="tab-content" id="pills-tabContent">
-                                  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
-
-                                    <div class="row align-items-center">
-                                      <div class="col-md-12">
-
-
-
-                                        <div class="row bg-white align-items-center ml-4 mr-0 py-4 match-entry">
-                                            <table id="match-history-table">
-                                                <thead>
-                                                    <tr>
-                                                        <!--  -->
-                                                    </tr>
-                                                </thead>
-                                                <tbody>
-                                                    <!-- match history -->
-                                                </tbody>
-                                            </table>
-                                        </div>
-
-                                        <ul class="pagination" id="pagination-container">
-                                            <!-- pagination -->
-                                        </ul>
-                                      </div>
-
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="col-md-8">
-                <div class="card mb-3">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-sm-3">
-                                <h6 class="mb-0">Status</h6>
-                            </div>
-                            <div class="col-sm-9 text-secondary" id="profile-status">
-                                Offline
-                            </div>
-                        </div>
-                        <hr>
-                        <div class="row">
-                            <div class="col-sm-3">
-                                <h6 class="mb-0">First Name</h6>
-                            </div>
-                            <div class="col-sm-9 text-secondary" id="profile-first-name">
-                                Kenneth
-                            </div>
-                        </div>
-                        <hr>
-                        <div class="row">
-                            <div class="col-sm-3">
-                                <h6 class="mb-0">Last Name</h6>
-                            </div>
-                            <div class="col-sm-9 text-secondary" id="profile-last-name">
-                                Valdez
-                            </div>
-                        </div>
-                        <hr>
-                        <div class="row">
-                            <div class="col-sm-3">
-                                <h6 class="mb-0">Phone</h6>
-                            </div>
-                            <div class="col-sm-9 text-secondary" id="phone">
-                                2398169029
-                            </div>
-                        </div>
-                        <hr>
-                        <div class="row">
-                            <div class="col-sm-12">
-                                <a href="/edit" data-nav class="btn btn-primary btn-sm follow">Edit</a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="row gutters-sm">
-                    <div class="col-sm-6 mb-3">
-                        <div class="card h-100">
-                            <div class="card-body">
-                                <h6 class="d-flex align-items-center mb-3"><i class="material-icons text-info mr-2"></i>Stats</h6>
-                                <small>Total Matches</small>
-                                    <div>
-                                        <span id = "total-games" class="text-secondary">0</span>
-                                    </div>
-                                <!--<div class="progress mb-3" style="height: 5px">
-                                    <div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
-                                </div>-->
-                                <small>Win Number</small>
-                                    <div>
-                                        <span id = "win-count" class="text-secondary">0</span>
-                                    </div>
-                                <small>Lose Number</small>
-                                    <div>
-                                        <span id = "lose-count" class="text-secondary">0</span>
-                                    </div>
-                            </div>
-                        </div>
-                    </div>
-
+<style>
+    body{
+
+        color: #1a202c;
+        text-align: left;
+        background-color: #e2e8f0;
+    }
+    .main-body {
+        padding: 15px;
+    }
+    .card {
+        box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
+    }
+    .card {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        word-wrap: break-word;
+        background-color: #fff;
+        background-clip: border-box;
+        border: 0 solid rgba(0,0,0,.125);
+        border-radius: .25rem;
+    }
+    .card-body {
+        flex: 1 1 auto;
+        min-height: 1px;
+        padding: 1rem;
+    }
+    .gutters-sm {
+        margin-right: -8px;
+        margin-left: -8px;
+    }
+    .gutters-sm>.col, .gutters-sm>[class*=col-] {
+        padding-right: 8px;
+        padding-left: 8px;
+    }
+    .mb-3, .my-3 {
+        margin-bottom: 1rem!important;
+    }
+    .bg-gray-300 {
+        background-color: #e2e8f0;
+    }
+    .h-100 {
+        height: 100%!important;
+    }
+    .shadow-none {
+        box-shadow: none!important;
+    }
+    match-entry {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 20px;
+    }
+    .match-entry {
+        /* ortaya yasla */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        gap: 10px;
+        background-color: #f8f9fa;
+        border-radius: 10px;
+        border: 1px solid #e9ecef;
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+        text-align: center;
+        padding: 10px;
+        margin: 10px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+</style>
+<div class="container">
+    <div class="main-body">
+        <div class="row gutters-sm">
+            <div class="col-md-4 mb-3">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="d-flex flex-column align-items-center text-center">
+                            <img id="profile-pic" src="" alt="Admin" class="rounded-circle" width="150">
+                            <div class="mt-3">
+                                <h4 id="full-name">John Doe</h4>
+                                <h6 id="user-name">Dosafd</h6>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="card mt-3">
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                            <h6 class="mb-0" style="font-weight: bold; font-size: 1.2em;">Match History</h6>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                            <div class="site-block-tab nav-pills" id="pills-tab" role="tablist">
+                                <div class="tab-content" id="pills-tabContent">
+                                  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
+
+                                    <div class="row align-items-center">
+                                      <div class="col-md-12">
+
+
+
+                                        <div class="row bg-white align-items-center ml-4 mr-0 py-4 match-entry">
+                                            <table id="match-history-table">
+                                                <thead>
+                                                    <tr>
+                                                        <!--  -->
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <!-- match history -->
+                                                </tbody>
+                                            </table>
+                                        </div>
+
+                                        <ul class="pagination" id="pagination-container">
+                                            <!-- pagination -->
+                                        </ul>
+                                      </div>
+
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="col-md-8">
+                <div class="card mb-3">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-sm-3">
+                                <h6 class="mb-0">Status</h6>
+                            </div>
+                            <div class="col-sm-9 text-secondary" id="profile-status">
+                                Offline
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+                            <div class="col-sm-3">
+                                <h6 class="mb-0">First Name</h6>
+                            </div>
+                            <div class="col-sm-9 text-secondary" id="profile-first-name">
+                                Kenneth
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+                            <div class="col-sm-3">
+                                <h6 class="mb-0">Last Name</h6>
+                            </div>
+                            <div class="col-sm-9 text-secondary" id="profile-last-name">
+                                Valdez
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+                            <div class="col-sm-3">
+                                <h6 class="mb-0">Phone</h6>
+                            </div>
+                            <div class="col-sm-9 text-secondary" id="phone">
+                                2398169029
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+                            <div class="col-sm-3">
+                                <h6 class="mb-0">Email</h6>
+                            </div>
+                            <div class="col-sm-9 text-secondary" id="email">
+                                placeholder@gmail.com
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+                            <div class="col-sm-12">
+                                <a href="/edit" data-nav class="btn btn-primary btn-sm follow">Edit</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row gutters-sm">
+                    <div class="col-sm-6 mb-3">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <h6 class="d-flex align-items-center mb-3"><i class="material-icons text-info mr-2"></i>Stats</h6>
+                                <small>Total Matches</small>
+                                    <div>
+                                        <span id = "total-games" class="text-secondary">0</span>
+                                    </div>
+                                <!--<div class="progress mb-3" style="height: 5px">
+                                    <div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                                </div>-->
+                                <small>Win Number</small>
+                                    <div>
+                                        <span id = "win-count" class="text-secondary">0</span>
+                                    </div>
+                                <small>Lose Number</small>
+                                    <div>
+                                        <span id = "lose-count" class="text-secondary">0</span>
+                                    </div>
+                            </div>
+                        </div>
+                    </div>
+
diff --git a/frontend/src/routes/quickplay/quickplay.html b/frontend/src/routes/quickplay/quickplay.html
index bea9f46..90fd739 100644
--- a/frontend/src/routes/quickplay/quickplay.html
+++ b/frontend/src/routes/quickplay/quickplay.html
@@ -12,7 +12,7 @@
     html, body {
         height: 100%;
         background-color: #152733;
-        overflow: hidden;
+        overflow: auto;
     }
 
     .form-holder {
@@ -108,7 +108,6 @@
                         <h3>Create Game</h3>
                         <p>Enter the Username below to join a game.</p>
                         <form class="requires-validation" novalidate action="/join">
-
                             <div class="col-md-12">
                                 <input class="form-control" type="text" name="user5" placeholder="Enter Username" required>
                                 <div class="valid-feedback">Enter User!</div>
diff --git a/frontend/src/routes/register/register.html b/frontend/src/routes/register/register.html
index 164933b..f52b42d 100644
--- a/frontend/src/routes/register/register.html
+++ b/frontend/src/routes/register/register.html
@@ -1,4 +1,7 @@
 <style>
+    body, html {
+            background-image: none !important;
+    }
     .register-container {
         display: flex;
         justify-content: center;
@@ -53,7 +56,7 @@ <h2 class="text-center mb-3">Register</h2>
           </div>
           <div class="col-sm-4 text-center">
             <h2 > Welcome to ft_transcendance a.k.a Mighty Pong</h2>
-                <img src="/public/images/Ekran Resmi 2024-03-07 03.44.57.png" alt="Image" class="img-fluid rounded">
+                <img src="public/images/Mighty-Pong.png" alt="Image" class="img-fluid rounded">
           </div>
         </div>
       </div>
diff --git a/frontend/src/routes/tournament/Tournament.js b/frontend/src/routes/tournament/Tournament.js
deleted file mode 100644
index 47f4cde..0000000
--- a/frontend/src/routes/tournament/Tournament.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { navigateTo } from "../../utils/navTo.js";
-import { wsInstance } from "../../sockets/BaseSocket.js";
-
-var queryparams = new URLSearchParams(window.location.search);
-if (queryparams.size != 2) {
-    navigateTo('/');
-}
-
-var tournament = queryparams.get('name');
-var username = queryparams.get('user');
-
-if (!tournament || !username) {
-    navigateTo('/');
-}
-
-console.log(tournament, username);
-wsInstance.connect('ws://localhost:8009/ws/tournament/' + tournament + '/' + '?user=' + username);
-
-// var ws;
-// function openWebSocket() {
-//     ws.onopen = () => {
-//         console.log('connected');
-//     }
-//     ws.onmessage = (e) => {
-//         console.log(e.data);
-//     }
-//     ws.onclose = () => {
-//         console.log('disconnected');
-//     }
-//     ws.onerror = (e) => {
-//         console.log(e);
-//     }
-// }
-// // Only open the WebSocket connection if it's not already open
-// if (!ws || ws.readyState !== WebSocket.OPEN) {
-//     openWebSocket();
-// }
-
-document.getElementById('invite').addEventListener('submit', function(event) {
-    event.preventDefault();
-    var username = document.getElementById('username').value;
-    console.log(username);
-    var data = {
-        "type": "adduser",
-        "username": username
-    }
-    ws.send(JSON.stringify(data));
-});
-
-document.getElementById('start').addEventListener('click', function(event) {
-    var data = {
-        "type": "start"
-    }
-    ws.send(JSON.stringify(data));
-});
\ No newline at end of file
diff --git a/frontend/src/routes/tournament/tournament.html b/frontend/src/routes/tournament/tournament.html
deleted file mode 100644
index bc5e424..0000000
--- a/frontend/src/routes/tournament/tournament.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="row align-items-center vh-100">
-    <div class="col-6 mx-auto">
-        <form class="mb-4 block" id="invite">
-            <div class="mb-3">
-                <label for="username" class="form-label">Invite users</label>
-                <input type="text" class="form-control" id="username" name="username" required>
-                <div id="usernameHelp" class="form-text"></div>
-            </div>
-            <button type="submit" class="btn btn-primary">Submit</button>
-        </form>
-    </div>
-    <div class="container d-flex align-items-center justify-content-center text-center">
-        <button type="button" class="btn btn-primary" name="start" id="start">start</button>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/src/routes/users/Users.js b/frontend/src/routes/users/Users.js
index 58ae16c..2554561 100644
--- a/frontend/src/routes/users/Users.js
+++ b/frontend/src/routes/users/Users.js
@@ -1,9 +1,10 @@
 import { navigateTo } from "../../utils/navTo.js";
 import { userStatuses } from "../../utils/utils.js";
 import { goPagination } from "../../utils/utils.js";
-import { searchUrl, friendAdd, userDetailUrl, pictureUrl } from "../../contants/contants.js;
+import { searchUrl, friendAdd, userDetailUrl, pictureUrl } from "../../contants/contants.js";
 
 let currentPage = 1; // Current page
+let total_pages = 1;
 
 export async function fetchUsers() {
 
@@ -24,7 +25,7 @@ export async function fetchUsers() {
             throw new Error(errorData.error);
         }
         const data = await response.json();
-        const currentUser = data[0].data[0];
+        const currentUser = data.data[0];
         const currentUserId = currentUser.id;
         document.getElementById('search-form').addEventListener("submit", function(event) {
             event.preventDefault();
@@ -40,85 +41,88 @@ export async function fetchUsers() {
                 }
             });
             const data = await response.json();
-            const users = data[0].data;
-            const totalPages = data[0].pagination.total_pages;
+            const users = data.data;
+
+            let paginate_data = data.pagination;
+            if (paginate_data) {
+                total_pages = paginate_data.total_pages;
+            }
 
             const tableBody = document.querySelector('.widget-26 tbody');
             tableBody.innerHTML = ''; // Clear previous content
-            users.forEach(user => {
-                const userElement = document.createElement('tr');
-                let image = pictureUrl + "?id=" + user.id;
-                const user_status = userStatuses.includes(user.id) ? true : false;
-                console.log(user_status);
-                console.log(userStatuses);
-                console.log(user.id);
-                userElement.innerHTML = `
-                    <td>
-                        <div class="widget-26-job-emp-img">
-                            <img src="${image}" alt="User Image" />
-                        </div>
-                    </td>
-                    <td>
-                        <div class="widget-26-job-title">
-                            <a data-nav href="/otherprofile?id=${user.id}">${user.username}</a>
-                            <p class="m-0"><a data-nav href="#" class="employer-name">${user.first_name} ${user.last_name}</a></p>
-                        </div>
-                    </td>
-                    <td>
-                        <div class="widget-26-job-info">
-                            <p class="type m-0">Email: ${user.email}</p>
-                            <p class="text-muted m-0">Phone: <span class="location">${user.phone}</span></p>
-                        </div>
-                    </td>
-                    <td>
-                    <div class="widget-26-job-category ${user_status === false ?  'bg-soft-danger' : 'bg-soft-success' }">
-                            <i class="indicator ${user_status === false ?  ' bg-danger' : 'bg-success' }"></i>
-                            <span>${user_status === true ? 'Online' : 'Offline' }</span>
-                        </div>
-                    </td>
-                    <td>
-                        <div class="widget-26-job-starred">
-                            <button id="add-friend-button-${user.id}">Add Friend</button>
-                        </div>
-                    </td>
-                `;
-                tableBody.appendChild(userElement);
-                document.getElementById(`add-friend-button-${user.id}`).addEventListener("click", function(event) {
-                    event.preventDefault();
-                    fetch(friendAdd,{
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'Authorization': `Bearer ${access_token}`
-                        },
-                        body: JSON.stringify({
-                            receiver_id: user.id
-                        })
-                    }).then(response => {
-                        if (!response.ok) {
-                            return response.json().then(error => {
-                                // If the error message is "Cannot add yourself as a friend", throw an error
-                                    throw new Error(error.error);
-                            });
-                        }
-                        return response.json();
-                    }).then(data => {
-                        navigateTo("/users");
-                    }).catch(error => {
-                        // If an error was thrown, display an alert with the error message
-                        alert(error.message);
+            if (users) {
+                users.forEach(user => {
+                    const userElement = document.createElement('tr');
+                    let image = pictureUrl + "?id=" + user.id;
+                    const user_status = userStatuses.includes(user.id) ? true : false;
+                    userElement.innerHTML = `
+                        <td>
+                            <div class="widget-26-job-emp-img">
+                                <img src="${image}" alt="User Image" />
+                            </div>
+                        </td>
+                        <td>
+                            <div class="widget-26-job-title">
+                                <a data-nav href="/otherprofile?id=${user.id}">${user.username}</a>
+                                <p class="m-0"><a data-nav href="#" class="employer-name">${user.first_name} ${user.last_name}</a></p>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="widget-26-job-info">
+                                <p class="type m-0">Email: ${user.email}</p>
+                                <p class="text-muted m-0">Phone: <span class="location">${user.phone}</span></p>
+                            </div>
+                        </td>
+                        <td>
+                        <div class="widget-26-job-category ${user_status === false ?  'bg-soft-danger' : 'bg-soft-success' }">
+                                <i class="indicator ${user_status === false ?  ' bg-danger' : 'bg-success' }"></i>
+                                <span>${user_status === true ? 'Online' : 'Offline' }</span>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="widget-26-job-starred">
+                                <button id="add-friend-button-${user.id}">Add Friend</button>
+                            </div>
+                        </td>
+                    `;
+                    tableBody.appendChild(userElement);
+                    document.getElementById(`add-friend-button-${user.id}`).addEventListener("click", function(event) {
+                        event.preventDefault();
+                        fetch(friendAdd,{
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': `Bearer ${access_token}`
+                            },
+                            body: JSON.stringify({
+                                receiver_id: user.id
+                            })
+                        }).then(response => {
+                            if (!response.ok) {
+                                return response.json().then(error => {
+                                    // If the error message is "Cannot add yourself as a friend", throw an error
+                                        throw new Error(error.error);
+                                });
+                            }
+                            return response.json();
+                        }).then(data => {
+                            navigateTo("/users");
+                        }).catch(error => {
+                            // If an error was thrown, display an alert with the error message
+                            alert(error.message);
+                        });
                     });
+                    goPagination(total_pages, currentPage, async (newPage) => {
+                        currentPage = newPage;
+                        fetchUsers();
+                    }, "pagination-container");
                 });
-            });
+            }
         });
-        goPagination(totalPages, currentPage, async (newPage) => {
-            currentPage = newPage;
-            fetchUsers();
-        }, "pagination-container");
-    }
-}
 
+    }
 
 
+}
 
 
diff --git a/frontend/src/utils/navTo.js b/frontend/src/utils/navTo.js
index c409ae0..fae2cd3 100644
--- a/frontend/src/utils/navTo.js
+++ b/frontend/src/utils/navTo.js
@@ -26,6 +26,7 @@ const route = {
     "/reset-password": "fetchResetpassword",
     "/change-password": "fetchChangepassword",
     "/uname": "fetchConflictusername",
+    "/404": "fetchAoa",
     // add more routes here.
 };
 
@@ -42,6 +43,7 @@ export const router = async () => {
             route: routes[0],
             isMatch: true
         }
+        document.getElementById("nav-bar").style.display = "none";
     }
 
     await onlineStatus();
@@ -55,7 +57,6 @@ export const router = async () => {
         if (routeFunction && module[routeFunction]) {
             module[routeFunction]();
         }
-        await onlineStatus().catch(err => console.error("WebSocket connection error:", err));
     } catch (err) {
         console.log("Error while render/routing component:", err);
     }
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index d2d792a..e1359c1 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -1,4 +1,4 @@
-import{ ValidateAccessToken, ValidateRefreshToken, userDetailUrl } from "../contants/contants.js";
+import{ ValidateAccessToken, ValidateRefreshToken, userDetailUrl, StatusServiceSocketUrl } from "../contants/contants.js";
 
 export const insertIntoElement = (elementId, element) => {
     const el = document.getElementById(elementId);
@@ -28,10 +28,11 @@ export const toggleHidden = (elementId) => {
 }
 
 export let socket = null;
-export let userStatuses = {};
+export let userStatuses = [];
 
 export async function onlineStatus() {
-    let userId = CheckAuth();
+    let userId = await CheckAuth();
+    console.log('User ID: ', userId);
     if (!userId) {
         return;
     }
@@ -43,7 +44,7 @@ export async function onlineStatus() {
         socket.send(JSON.stringify({ type: 'getOnlineUsers' }));
         return;
     }
-    socket = new WebSocket(`ws://localhost:8020/ws/status/?user_id=${userId}`);
+    socket = new WebSocket(StatusServiceSocketUrl + "?user_id=" + userId);
     socket.onopen = function (event) {
         console.log('Connected to WebSocket');
         localStorage.setItem('status', 'Online');
@@ -67,7 +68,7 @@ export async function onlineStatus() {
     });
     window.addEventListener('online', function () {
         if (socket.readyState === WebSocket.CLOSED) {
-            socket = new WebSocket(`ws://localhost:8020/ws/status/?user_id=${userId}`);
+            socket = new WebSocket(StatusServiceSocketUrl + "?user_id=" + userId);
         }
     });
     window.addEventListener('offline', function () {
@@ -144,13 +145,14 @@ export async function CheckAuth() {
         return false;
     }
     const data = await auth_response.json();
-    if (data.user_id) {
+    if (data && data.user_id) {
         return data.user_id;
     }
     localStorage.removeItem("access_token");
     localStorage.removeItem("refresh_token");
     return false;
 }
+
 export async function RefreshToken() {
     const refresh_token = localStorage.getItem("refresh_token");
     const access_token = localStorage.getItem("access_token");
@@ -180,5 +182,10 @@ export async function RefreshToken() {
     }
     localStorage.setItem("access_token", data.access_token);
     localStorage.setItem("refresh_token", data.refresh_token);
-    return refresh_response.data.user_id;
+
+    if (data && data.user_id) {
+        return data.user_id;
+    } else {
+        return false;
+    }
 }
diff --git a/gameplayservice/Dockerfile b/gameplayservice/Dockerfile
index 2bd4a9a..22abab5 100644
--- a/gameplayservice/Dockerfile
+++ b/gameplayservice/Dockerfile
@@ -12,4 +12,6 @@ RUN pip3 install --upgrade pip
 
 RUN pip3 install -r requirements.txt
 
+EXPOSE 8011
+
 CMD ["python3", "manage.py", "runserver", "0.0.0.0:8011"]
diff --git a/gameplayservice/gameplayservice/consumers.py b/gameplayservice/gameplayservice/consumers.py
index 4ce67f1..33ba81a 100644
--- a/gameplayservice/gameplayservice/consumers.py
+++ b/gameplayservice/gameplayservice/consumers.py
@@ -29,6 +29,7 @@
 CheckGame_URL = "http://apigateway:8000/game/check"
 GameUpdate_URL = "http://apigateway:8000/game/update"
 
+
 class Pong(AsyncWebsocketConsumer):
 
     def __init__(self, *args, **kwargs):
@@ -128,6 +129,9 @@ def init_game(self, room_id):
         rooms[room_id]['padd_right']['info']['score'] = 0
         rooms[room_id]['game_status'] = 1
         rooms[room_id]['user_count'] = 2
+        tmp = rooms[room_id]['padd_left']
+        rooms[room_id]['padd_left'] = rooms[room_id]['padd_right']
+        rooms[room_id]['padd_right'] = tmp
 
     async def pong_message(self, event):
         if event['message'] == 'game_over':
@@ -241,10 +245,10 @@ def reset_game(self, room_id):
         else:
             rooms[room_id]['ball']['speedY'] = 10
             rooms[room_id]['ball']['dir'] = True
-        rooms[room_id]['padd_left']['info']['positionX'] = 60
-        rooms[room_id]['padd_left']['info']['positionY'] = canvas_height / 2 - 100
-        rooms[room_id]['padd_right']['info']['positionX'] = canvas_width - 100
-        rooms[room_id]['padd_right']['info']['positionY'] = canvas_height / 2 - 100
+        #rooms[room_id]['padd_left']['info']['positionX'] = 60
+        #rooms[room_id]['padd_left']['info']['positionY'] = canvas_height / 2 - 100
+        #rooms[room_id]['padd_right']['info']['positionX'] = canvas_width - 100
+        #rooms[room_id]['padd_right']['info']['positionY'] = canvas_height / 2 - 100
 
     def BallCollision(self, room_id):
         if ((rooms[room_id]['ball']['positionX'] +
@@ -308,15 +312,25 @@ async def disconnect(self, close_code):
 
     async def receive(self, text_data=None, bytes_data=None):
         room_id = self.room_id
+        #if text_data == 'w':
+        #    if self.channel_name in rooms[room_id]['padd_left']['player']:
+        #        rooms[room_id]['padd_left']['info']['positionY'] -= rooms[room_id]['padd_left']['info']['speed']
+        #    elif self.channel_name in rooms[room_id]['padd_right']['player']:
+        #        rooms[room_id]['padd_right']['info']['positionY'] -= rooms[room_id]['padd_right']['info']['speed']
+        #elif text_data == 's':
+        #    if self.channel_name in rooms[room_id]['padd_left']['player']:
+        #        rooms[room_id]['padd_left']['info']['positionY'] += rooms[room_id]['padd_left']['info']['speed']
+        #    elif self.channel_name in rooms[room_id]['padd_right']['player']:
+        #        rooms[room_id]['padd_right']['info']['positionY'] += rooms[room_id]['padd_right']['info']['speed']
         if text_data == 'w':
-            if self.channel_name in rooms[room_id]['padd_left']['player']:
+            if self.username == rooms[room_id]['padd_left']['username']:
                 rooms[room_id]['padd_left']['info']['positionY'] -= rooms[room_id]['padd_left']['info']['speed']
-            elif self.channel_name in rooms[room_id]['padd_right']['player']:
+            elif self.username == rooms[room_id]['padd_right']['username']:
                 rooms[room_id]['padd_right']['info']['positionY'] -= rooms[room_id]['padd_right']['info']['speed']
         elif text_data == 's':
-            if self.channel_name in rooms[room_id]['padd_left']['player']:
+            if self.username == rooms[room_id]['padd_left']['username']:
                 rooms[room_id]['padd_left']['info']['positionY'] += rooms[room_id]['padd_left']['info']['speed']
-            elif self.channel_name in rooms[room_id]['padd_right']['player']:
+            elif self.username == rooms[room_id]['padd_right']['username']:
                 rooms[room_id]['padd_right']['info']['positionY'] += rooms[room_id]['padd_right']['info']['speed']
         self.paddleCollision(room_id)
 
@@ -351,8 +365,8 @@ async def game_loop(self, room_id):
                     body = {
                         'game_id': int(self.room_id),
                         'status': 2,
-                        'player1_score': int(rooms[room_id]['padd_left']['info']['score']),
-                        'player2_score': int(rooms[room_id]['padd_right']['info']['score']),
+                        'player1_score': int(rooms[room_id]['padd_right']['info']['score']),
+                        'player2_score': int(rooms[room_id]['padd_left']['info']['score']),
                     }
                     logging.error("------------+++++++++ line: 352, body: %s", body)
                     response = requests.put(
@@ -390,8 +404,8 @@ async def game_loop(self, room_id):
                 body = {
                     'game_id': int(self.room_id),
                     'status': 2,
-                    'player1_score': int(rooms[room_id]['padd_left']['info']['score']),
-                    'player2_score': int(rooms[room_id]['padd_right']['info']['score']),
+                    'player1_score': int(rooms[room_id]['padd_right']['info']['score']),
+                    'player2_score': int(rooms[room_id]['padd_left']['info']['score']),
                 }
                 response = requests.put(
                     GameUpdate_URL,
diff --git a/gameplayservice/gameplayservice/settings.py b/gameplayservice/gameplayservice/settings.py
index 8bce2ac..e0de2a5 100644
--- a/gameplayservice/gameplayservice/settings.py
+++ b/gameplayservice/gameplayservice/settings.py
@@ -26,13 +26,14 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = os.environ.get('DEBUG')
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['localhost', '127.0.0.1', '[::1]']
 
 
 # Application definition
 
 INSTALLED_APPS = [
     'daphne',
+    'corsheaders',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -43,6 +44,7 @@
 ]
 
 MIDDLEWARE = [
+    'corsheaders.middleware.CorsMiddleware',
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
@@ -52,6 +54,10 @@
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
 
+CORS_ORIGIN_ALLOW_ALL = True
+CORS_ALLOW_CREDENTIALS = True
+CORS_ALLOW_ALL_HEADERS = True
+
 ROOT_URLCONF = 'gameplayservice.urls'
 
 TEMPLATES = [
diff --git a/gameservice/Dockerfile b/gameservice/Dockerfile
index aba2f59..20d1c8e 100644
--- a/gameservice/Dockerfile
+++ b/gameservice/Dockerfile
@@ -16,6 +16,7 @@ COPY start.sh /app/start.sh
 
 RUN chmod +x /app/start.sh
 
+
 ENTRYPOINT ["sh", "./start.sh"]
 
 # CMD ["gunicorn", "--capture-output", "--bind", "0.0.0.0:8010", "gameservice.wsgi", "--workers=3"]
diff --git a/gameservice/src/serializers.py b/gameservice/src/serializers.py
index 7d2e76b..d216244 100644
--- a/gameservice/src/serializers.py
+++ b/gameservice/src/serializers.py
@@ -21,6 +21,7 @@ class UpdateGameSerializer(serializers.Serializer):
     player1_score = serializers.IntegerField(required=True)
     player2_score = serializers.IntegerField(required=True)
 
+
 class PaginationSerializer(serializers.Serializer):
     page = serializers.IntegerField(required=False, default=1, min_value=1, max_value=500)
     limit = serializers.IntegerField(required=False, default=10, min_value=1, max_value=500)
diff --git a/gameservice/src/service.py b/gameservice/src/service.py
index ba4f20a..4c54524 100644
--- a/gameservice/src/service.py
+++ b/gameservice/src/service.py
@@ -103,7 +103,6 @@ def join_room(self, room_id, user_id) -> BaseResponse:
         return BaseResponse(False, 'Room joined successfully', res).res()
 
     def update_game(self, request) -> BaseResponse:
-        logging.error("--------++++++++++++ request %s", request)
         game = Game.objects.get(id=request['game_id'])
         game.player1_score = request['player1_score']
         game.player2_score = request['player2_score']
@@ -132,7 +131,6 @@ def update_game(self, request) -> BaseResponse:
         other_game1 = Game.objects.filter(room=room, status=0).first()
         other_game2 = Game.objects.filter(room=room, status=3).first()
         other_game = other_game1 or other_game2
-        logging.error("---------->>>>>> other_game %s", other_game)
         
         if game.player1_score > game.player2_score:
             new_game = Game.objects.create(room=room, status=0, player1=game.player1)
@@ -155,21 +153,28 @@ def update_game(self, request) -> BaseResponse:
         return BaseResponse(False, 'Game updated successfully', res).res()
 
     def list_invite(self, user_id, page, limit) -> BaseResponse:
-        games = Game.objects.filter(player1=user_id, status=0) | Game.objects.filter(player2=user_id, status=0)
+        games = Game.objects.filter(player1=user_id, status=0)
+        games2 = Game.objects.filter(player2=user_id, status=0)
+        games = games | games2
+        games = games.order_by('-created_at')
         paginator = Paginator(games, limit)
         try:
             games = paginator.page(page)
-        except EmptyPage:
-            return BaseResponse(False, 'There is no data in this page', None).res()
+        except Exception as e:
+            if e is EmptyPage:
+                return BaseResponse(False, 'No invites found', None).res()
+            return BaseResponse(True, str(e), None).res()
         if not games:
-            return BaseResponse(False, 'Invite list is empty', None).res()
+            return BaseResponse(False, 'No invites found', None).res()
         resp = []
         for game in games:
             room = Room.objects.get(id=game.room_id)
             players = Player.objects.filter(room=room)
             player1 = players[0].user_id
+            if player1 == user_id:
+                player1 = players[1].user_id
             try:
-                response = requests.get(f"{SERVICE_ROUTES['/user']}/user/get/id?id={player1}", headers={'Authorization': f'Bearer {user_id}'})
+                response = requests.get(f"{SERVICE_ROUTES['/user']}/user/get/id?id={player1}")
             except Exception as e:
                 return BaseResponse(True, str(e), None).res()
             if response.status_code != 200:
@@ -197,9 +202,21 @@ def list_history(self, username, page, limit) -> BaseResponse:
             return BaseResponse(True, response.json()['error'], None).res()
         res = response.json()
         user = res['data'][0]
+        owner_id = user['id']
 
         games = Game.objects.filter(status=2).filter(player1=user['id'])
         games2 = Game.objects.filter(status=2).filter(player2=user['id'])
+        games = games | games2
+        games = games.order_by('-updated_at')
+        paginator = Paginator(games, limit)
+        try:
+            games = paginator.page(page)
+        except Exception as e:
+            if e is EmptyPage:
+                return BaseResponse(False, 'No games found', None).res()
+            return BaseResponse(True, str(e), None).res()
+        if not games:
+            return BaseResponse(False, 'No games found', None).res()
         resp = []
         win_count = 0
         lose_count = 0
@@ -207,6 +224,8 @@ def list_history(self, username, page, limit) -> BaseResponse:
             room = Room.objects.get(id=game.room_id)
             players = Player.objects.filter(room=room)
             player2 = players[1].user_id
+            if player2 == owner_id:
+                player2 = players[0].user_id
             if player2 != "Cancelled":
                 try:
                     response = requests.get(f"{SERVICE_ROUTES['/user']}/user/get/id?id={player2}")
@@ -224,51 +243,28 @@ def list_history(self, username, page, limit) -> BaseResponse:
                 user = {
                     "username": "Cancelled"
                 }
-            resp.append({
+            if players[0].user_id == owner_id:
+                resp.append({
                     "player1": username,
                     "player2": user['username'],
                     "player1_score": game.player1_score,
                     "player2_score": game.player2_score,
                     "date": game.updated_at,
                 })
-        for game in games2:
-            room = Room.objects.get(id=game.room_id)
-            players = Player.objects.filter(room=room)
-            player1 = players[0].user_id
-            if player1 != "Cancelled":
-                try:
-                    response = requests.get(f"{SERVICE_ROUTES['/user']}/user/get/id?id={player1}")
-                except Exception as e:
-                    return BaseResponse(True, str(e), None).res()
-                if response.status_code != 200:
-                    return BaseResponse(True, response.json()['error'], None).res()
-                res = response.json()
-                user = res['data'][0]
-                if game.player2_score > game.player1_score:
-                    win_count += 1
-                else:
-                    lose_count += 1
             else:
-                user = {
-                    "username": "Cancelled"
-                }
-            resp.append({
-                "player1": user['username'],
-                "player2": username,
-                "player1_score": game.player1_score,
-                "player2_score": game.player2_score,
-                "date": game.updated_at,
+                resp.append({
+                    "player1":  user['username'],
+                    "player2": username,
+                    "player1_score": game.player1_score,
+                    "player2_score": game.player2_score,
+                    "date": game.updated_at,
                 })
-        stats = {
-            "total_games": len(resp),
-            "win_count": win_count,
-            "lose_count": lose_count,
-        }
+        stats = self.games_stats(owner_id)
         paginate_data = {
             "current_page": page,
             "page_size": limit,
-            "total_pages": int(len(resp) / limit) + 1,
-            "total_records": len(resp)
+            "total_pages": paginator.num_pages,
+            "total_records": paginator.count
         }
         return BaseResponse(False, 'List of games', resp, paginate_data, stats).res()
 
@@ -281,4 +277,28 @@ def check_game(self, user_id, game_id) -> BaseResponse:
             return BaseResponse(True, 'Game not found', None).res()
         if game.player1 == user_id or game.player2 == user_id:
             return BaseResponse(False, 'Game found', None).res()
-        return BaseResponse(True, 'You are not part of this game', None).res()
\ No newline at end of file
+        return BaseResponse(True, 'You are not part of this game', None).res()
+
+    def games_stats(self, user_id):
+        game = Game.objects.filter(status=2).filter(player1=user_id)
+        game2 = Game.objects.filter(status=2).filter(player2=user_id)
+        game = game | game2
+        win_count = 0
+        lose_count = 0
+        for g in game:
+            if g.player1 == user_id:
+                if g.player1_score > g.player2_score:
+                    win_count += 1
+                else:
+                    lose_count += 1
+            else:
+                if g.player2_score > g.player1_score:
+                    win_count += 1
+                else:
+                    lose_count += 1
+        stats = {
+            "total_games": game.count(),
+            "win_count": win_count,
+            "lose_count": lose_count,
+        }
+        return stats
diff --git a/gameservice/src/views.py b/gameservice/src/views.py
index 7d47854..c4220b4 100644
--- a/gameservice/src/views.py
+++ b/gameservice/src/views.py
@@ -43,7 +43,11 @@ def list_invite(self, request):
         user_id = request.headers.get('id')
         if not user_id:
             return Response({'error': 'User id is required'}, status=400)
-        res, err = self.service.list_invite(user_id, req.validated_data['page'], req.validated_data['limit'])
+        res, err = self.service.list_invite(
+            user_id,
+            req.validated_data['page'],
+            req.validated_data['limit'],
+        )
         if err:
             return Response(res, status=500)
         return Response(res, status=200)
@@ -64,7 +68,11 @@ def list_history(self, request):
         username = request.query_params.get('username')
         if not username:
             return Response({'error': 'username is required'}, status=400)
-        res, err = self.service.list_history(username, req.validated_data['page'], req.validated_data['limit'])
+        res, err = self.service.list_history(
+            username,
+            req.validated_data['page'],
+            req.validated_data['limit'],
+        )
         if err:
             return Response(res, status=500)
         return Response(res, status=200)
diff --git a/statusservice/Dockerfile b/statusservice/Dockerfile
index f537108..13093ac 100644
--- a/statusservice/Dockerfile
+++ b/statusservice/Dockerfile
@@ -12,6 +12,4 @@ RUN pip3 install --upgrade pip
 
 RUN pip3 install -r requirements.txt
 
-RUN python3 manage.py makemigrations
-
-CMD ["python3", "manage.py", "runserver", "0.0.0.0:8020"]
+CMD ["daphne", "statusservice.asgi:application", "-b", "0.0.0.0", "-p", "8020"]
diff --git a/statusservice/statusservice/consumers.py b/statusservice/statusservice/consumers.py
index 9d9d070..2ec3c60 100644
--- a/statusservice/statusservice/consumers.py
+++ b/statusservice/statusservice/consumers.py
@@ -1,5 +1,6 @@
 from channels.generic.websocket import AsyncWebsocketConsumer
 import json
+import logging
 
 
 class Online(AsyncWebsocketConsumer):
diff --git a/statusservice/statusservice/settings.py b/statusservice/statusservice/settings.py
index af51d48..a8ef727 100644
--- a/statusservice/statusservice/settings.py
+++ b/statusservice/statusservice/settings.py
@@ -26,13 +26,14 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = os.environ.get('DEBUG')
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['localhost', '127.0.0.1', '[::1]', '*']
 
 
 # Application definition
 
 INSTALLED_APPS = [
     'daphne',
+    'corsheaders',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -43,6 +44,7 @@
 ]
 
 MIDDLEWARE = [
+    'corsheaders.middleware.CorsMiddleware',
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
@@ -52,6 +54,10 @@
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
 
+CORS_ORIGIN_ALLOW_ALL = True
+CORS_ALLOW_CREDENTIALS = True
+CORS_ALLOW_ALL_HEADERS = True
+
 ROOT_URLCONF = 'statusservice.urls'
 
 TEMPLATES = [
diff --git a/usermanagement/src/interfaces/repository.py b/usermanagement/src/interfaces/repository.py
index deb5b57..08f0eca 100644
--- a/usermanagement/src/interfaces/repository.py
+++ b/usermanagement/src/interfaces/repository.py
@@ -41,7 +41,7 @@ def list(self) -> list:
         pass
 
     @abstractmethod
-    def search(self, key: str) -> list:
+    def search(self, key, id) -> list:
         pass
 
     @abstractmethod
diff --git a/usermanagement/src/interfaces/service.py b/usermanagement/src/interfaces/service.py
index b85c27c..1946a30 100644
--- a/usermanagement/src/interfaces/service.py
+++ b/usermanagement/src/interfaces/service.py
@@ -6,7 +6,7 @@
 class IUserManagementService(ABC):
 
     @abstractmethod
-    def get(self, id: int):
+    def get(self, id):
         pass
 
     @abstractmethod
@@ -14,7 +14,7 @@ def register(self, user: UserManagement) -> BaseResponse:
         pass
 
     @abstractmethod
-    def update(self, user: dict) -> BaseResponse:
+    def update(self, user, id) -> BaseResponse:
         pass
 
     @abstractmethod
@@ -50,7 +50,7 @@ def forgot_password(self, email) -> BaseResponse:
         pass
 
     @abstractmethod
-    def change_password(self, req: UserManagement) -> BaseResponse:
+    def change_password(self, req, id) -> BaseResponse:
         pass
     
     @abstractmethod
diff --git a/usermanagement/src/repository.py b/usermanagement/src/repository.py
index b5c87ff..d966712 100644
--- a/usermanagement/src/repository.py
+++ b/usermanagement/src/repository.py
@@ -63,9 +63,10 @@ def update(self, user: UserManagement) -> UserManagement:
     def list(self) -> list:
         return UserManagement.objects.all()
 
-    def search(self, key: str) -> list:
+    def search(self, key, id) -> list:
         try:
-            model = UserManagement.objects.filter(first_name__contains=key).all()
+            model = UserManagement.objects.filter(first_name__contains=key).all() | UserManagement.objects.filter(last_name__contains=key).all() | UserManagement.objects.filter(username__contains=key).all()
+            model = model.exclude(id=id)
             return model
         except Exception as e:
             return None
diff --git a/usermanagement/src/serializers.py b/usermanagement/src/serializers.py
index 298a8b0..7979019 100644
--- a/usermanagement/src/serializers.py
+++ b/usermanagement/src/serializers.py
@@ -19,13 +19,13 @@ def bind(self, validated_data):
 
 
 class PaginationSerializer(serializers.Serializer):
-    page = serializers.IntegerField(required=False, default=1, min_value=1, max_value=500)
-    limit = serializers.IntegerField(required=False, default=10, min_value=1, max_value=500)
+    page = serializers.IntegerField(required=False, default=1, min_value=1)
+    limit = serializers.IntegerField(required=False, default=10, min_value=1)
 
 
 class SearchUserToPaginationSerializer(serializers.Serializer):
-    page = serializers.IntegerField(required=False, default=1, min_value=1, max_value=500)
-    limit = serializers.IntegerField(required=False, default=10, min_value=1, max_value=500)
+    page = serializers.IntegerField(required=False, default=1, min_value=1)
+    limit = serializers.IntegerField(required=False, default=10, min_value=1)
     key = serializers.CharField(required=True, min_length=1, max_length=100)
 
 
diff --git a/usermanagement/src/service.py b/usermanagement/src/service.py
index e833797..c5287da 100644
--- a/usermanagement/src/service.py
+++ b/usermanagement/src/service.py
@@ -6,7 +6,7 @@
 from .publisher import PublisherBase
 from .serializers import ManagementSerializer
 from .models import UserManagement, OAuthUser
-from usermanagement.settings import SERVICE_ROUTES
+from usermanagement.settings import SERVICE_ROUTES, FRONTEND_URL
 from django.core.paginator import Paginator, EmptyPage
 from django.db import transaction
 from .interfaces.service import IUserManagementService
@@ -21,14 +21,14 @@ def __init__(self, repository: IUserManagementRepository, oauth_repository: IOAu
         self.repository = repository
         self.oauth_repository = oauth_repository
 
-    def get(self, id: int) -> BaseResponse:
+    def get(self, id) -> BaseResponse:
         user = self.repository.get(id)
         if not user:
             return BaseResponse(True, "User not found", None).res()
         res = ManagementSerializer().response([user])
         return BaseResponse(False, "User found", res).res()
 
-    def update(self, user: UserManagement, id) -> BaseResponse:
+    def update(self, user, id) -> BaseResponse:
         data = self.repository.get_by_id(id)
         if not data:
             return BaseResponse(True, "User not found", None).res()
@@ -40,14 +40,56 @@ def update(self, user: UserManagement, id) -> BaseResponse:
             new_user = self.repository.get_by_phone(user.phone)
             if new_user:
                 return BaseResponse(True, "Phone already exists", None).res()
+        if data.email != user.email:
+            if data.oauth_users > 0:
+                return BaseResponse(True, "You logged in with oauth provider. You can't change your email", None).res()
+            new_user = self.repository.get_by_email(user.email)
+            if new_user:
+                return BaseResponse(True, "Email already exists", None).res()
+        old_mail = data.email
         data.first_name = user.first_name
         data.last_name = user.last_name
         data.username = user.username
         data.phone = user.phone
-        new_user = self.repository.update(data)
-        if not new_user:
+        data.email = user.email
+        new_users = self.repository.update(data)
+        if not new_users:
             return BaseResponse(True, "User update failed", None).res()
-        res = ManagementSerializer().response([new_user])
+        if old_mail != new_users.email:
+            new_users.email_verified = False
+            new_users.email_verify_token = None
+            encoded_token = urlsafe_base64_encode(
+                force_bytes(
+                    make_hash_value(
+                        new_users,
+                        now().timestamp(),
+                    )
+                )
+            )
+            new_users.email_verify_token = encoded_token
+
+            uid = urlsafe_base64_encode(force_bytes(new_users.email))
+            verify_url = reverse(
+                'email_verify',
+                kwargs={'uidb64': uid, 'token': encoded_token},
+            )
+
+            verify_url = f"{FRONTEND_URL}/api{verify_url}"
+            message = {
+                'subject': 'Transcendence Email Verification',
+                'body': {'email': new_users.email, 'verify_url': verify_url},
+                'type': 'email_verify'
+            }
+            publisher = PublisherBase('mail-service')
+            err = publisher.publish_message(message)
+            if err is not True:
+                return BaseResponse(True, "Email verification mail sending failed, but user updated successfully.", None).res()
+            publisher.close_connection()
+            new_user = self.repository.update(new_users)
+
+        res = ManagementSerializer().response([new_users])
+        if old_mail != new_users.email:
+            return BaseResponse(False, "User updated successfully. Email verification mail sent to your email", res).res()
         return BaseResponse(False, "User updated successfully", res).res()
 
     def list(self, page, limit) -> BaseResponse:
@@ -99,15 +141,17 @@ def update_username(self, username, id) -> BaseResponse:
             return BaseResponse(True, "Username update failed", None).res()
         return BaseResponse(False, "Username updated successfully", None).res()
 
-    def search(self, key, page, limit) -> BaseResponse:
-        users = self.repository.search(key)
+    def search(self, key, page, limit, id) -> BaseResponse:
+        users = self.repository.search(key, id)
         if not users:
-            return BaseResponse(True, "No users found", None).res()
+            return BaseResponse(False, "No users found", None).res()
         paginator = Paginator(users, limit)
         try:
             pagineted_users = paginator.page(page)
-        except EmptyPage:
-            return BaseResponse(True, "There is no data on this page", None).res()
+        except Exception as e:
+            if e is EmptyPage:
+                return BaseResponse(False, "There is no data on this page", None).res()
+            return BaseResponse(True, "Failed to get users", None).res()
 
         if not pagineted_users:
             return BaseResponse(False, "No users found", None).res()
@@ -121,7 +165,7 @@ def search(self, key, page, limit) -> BaseResponse:
         }
         return BaseResponse(False, "Users found", res, paginate_data).res()
 
-    def delete(self, id: int)-> BaseResponse:
+    def delete(self, id: int) -> BaseResponse:
         user = self.repository.get(id)
         if not user:
             return BaseResponse(True, "User not found", None).res()
@@ -167,7 +211,8 @@ def register(self, user: UserManagement) -> BaseResponse:
             'email_verify',
             kwargs={'uidb64': uid, 'token': encoded_token},
         )
-        verify_url = f"${SERVICE_ROUTES['/auth']}{verify_url}"
+
+        verify_url = f"{FRONTEND_URL}/api{verify_url}"
         message = {
             'subject': 'Transcendence Email Verification',
             'body': {'email': user.email, 'verify_url': verify_url},
@@ -258,7 +303,7 @@ def forgot_password(self, email) -> BaseResponse:
         if not res:
             return BaseResponse(True, "Unknow error. Please try again later!", None).res()
 
-        reset_url = f"${SERVICE_ROUTES['/auth']}{reset_path}"
+        reset_url = f"{FRONTEND_URL}/api{reset_path}"
         message = {
             'subject': 'Transcendence Password Reset Email',
             'body': {'email': email, 'reset_url': reset_url},
diff --git a/usermanagement/src/utils.py b/usermanagement/src/utils.py
index 4c7e481..1e920e6 100644
--- a/usermanagement/src/utils.py
+++ b/usermanagement/src/utils.py
@@ -35,8 +35,6 @@ def check_token_validity(token):
     timestamp = decoded_token.split("-")[-1]
     if not timestamp:
         return "Invalid token format"
-    if now().timestamp() - float(timestamp) > 21600:  # 6 hours in seconds
-        return "Token expired"
     return None
 
 
diff --git a/usermanagement/src/views.py b/usermanagement/src/views.py
index ed3bf30..d6d273e 100644
--- a/usermanagement/src/views.py
+++ b/usermanagement/src/views.py
@@ -1,8 +1,7 @@
 from rest_framework.response import Response
 from rest_framework import viewsets
 import logging
-import usermanagement.settings
-from django.http import HttpResponseRedirect
+from django.conf import settings
 from .service import UserManagementService
 from .repository import UserManagementRepository, OAuthUserRepository
 from .serializers import RegisterSerializer, OauthCreateSerializer, ResetPasswordSerializer
@@ -21,7 +20,9 @@ def get_user(self, request):
         user_id = request.headers.get('id')
         if not user_id:
             return Response({'error': 'User id is required'}, status=400)
-        res = self.service.get(user_id)
+        res, err = self.service.get(user_id)
+        if err:
+            return Response(res, status=500)
         return Response(res, status=200)
 
     def get_user_by_username(self, request):
@@ -53,7 +54,11 @@ def update_user(self, request):
         if not id:
             return Response({'error': 'Id is required'}, status=400)
         user = req.bind(req.validated_data)
-        res = self.service.update(user, id)
+        res, err = self.service.update(user, id)
+        if err:
+            return Response(res, status=500)
+        if res.get('message') == 'User updated successfully. Email verification mail sent to your email':
+            return Response(res, status=207)
         return Response(res, status=200)
 
     def update_username(self, request):
@@ -80,7 +85,17 @@ def search_user(self, request):
         req = SearchUserToPaginationSerializer(data=request.query_params)
         if not req.is_valid():
             return Response(req.errors, status=400)
-        res = self.service.search(req.validated_data['key'], req.validated_data['page'], req.validated_data['limit'])
+        id = request.headers.get('id')
+        if not id:
+            return Response({'error': 'Id is required'}, status=400)
+        res, err = self.service.search(
+            req.validated_data['key'],
+            req.validated_data['page'],
+            req.validated_data['limit'],
+            id,
+        )
+        if err:
+            return Response(res, status=500)
         return Response(res, status=200)
 
     def delete_user(self, request):
@@ -167,16 +182,25 @@ def redirect_reset_password(self, request, uidb64=None, token=None):
         res, err = self.service.redirect_reset_password(uidb64, token)
         if err:
             return Response(res, status=500)
-        return HttpResponseRedirect(usermanagement.settings.FRONTEND_URL + '/reset-password?uidb64=' + uidb64 + '&token=' + token)
+        redirect_url = f"{settings.FRONTEND_URL}/reset-password?uidb64={uidb64}&token={token}"
+        resp = {
+            "redirect_url": redirect_url,
+        }
+        return Response(resp, status=200)
 
     def email_verify(self, request, uidb64=None, token=None):
         if not uidb64 or not token:
             return Response({'error': 'invalid url'}, status=400)
         res, err = self.service.email_verify(request, uidb64, token)
         if err:
+            logging.error("Email verification failed %s", res)
             return Response(res, status=500)
         logging.info('Email verified successfully')
-        return HttpResponseRedirect(usermanagement.settings.FRONTEND_URL + '/login')
+        redirect_url = f"{settings.FRONTEND_URL}/login"
+        resp = {
+            "redirect_url": redirect_url,
+        }
+        return Response(resp, status=200, content_type='application/json', headers={'Access-Control-Allow-Origin': '*'})
 
     def oauth_user_create(self, request):
         req = OauthCreateSerializer(data=request.data)