From 4fb8f443b8d43b62fa903be2a3c67c203a00a26b Mon Sep 17 00:00:00 2001
From: ilia <ilia@ilias-MacBook-Pro.local>
Date: Mon, 9 Feb 2026 11:19:43 +0100
Subject: [PATCH 1/8] feat: Added a Welcome page dispalyed after animation

modify LoginForm and register form with a toggle button to switch from each other
/login and /signup no more exist and has been replaced with /welcom

srcs/nginx/src/App.tsx
srcs/nginx/src/components/molecules/Halo.tsx
srcs/nginx/src/components/organisms/LoginForm.tsx
srcs/nginx/src/components/organisms/RegisterForm.tsx
srcs/nginx/src/pages/AnimationPage.tsx
---
 srcs/nginx/src/App.tsx                        | 11 ++++--
 srcs/nginx/src/components/molecules/Halo.tsx  | 37 +++++++++++++++++++
 .../src/components/organisms/LoginForm.tsx    | 16 ++++----
 .../src/components/organisms/RegisterForm.tsx | 11 ++----
 srcs/nginx/src/pages/AnimationPage.tsx        |  2 +-
 5 files changed, 57 insertions(+), 20 deletions(-)
 create mode 100644 srcs/nginx/src/components/molecules/Halo.tsx

diff --git a/srcs/nginx/src/App.tsx b/srcs/nginx/src/App.tsx
index cadd17cc..30489fe7 100644
--- a/srcs/nginx/src/App.tsx
+++ b/srcs/nginx/src/App.tsx
@@ -3,6 +3,7 @@ import { ProfilePage } from './pages/ProfilePage';
 import { LoginPage } from './pages/LoginRegisterPage';
 import { useAuth } from './providers/AuthProvider';
 import { AnimationPage } from './pages/AnimationPage';
+import { WelcomePage } from './pages/WelcomePage';
 
 const GuestRoute = ({ children }: { children: React.ReactNode }) => {
   const { user, isLoggedIn } = useAuth();
@@ -25,21 +26,23 @@ export const App = () => {
       <Routes>
         <Route path="/" element={<AnimationPage />}></Route>
         <Route
-          path="/signup"
+          // path="/signup"
+          path="/welcome"
           element={
             <GuestRoute>
-              <LoginPage isRegister={true} />
+              {/* <LoginPage isRegister={true} /> */}
+              <WelcomePage />
             </GuestRoute>
           }
         />
-        <Route
+        {/* <Route
           path="/login"
           element={
             <GuestRoute>
               <LoginPage isRegister={false} />
             </GuestRoute>
           }
-        />
+        /> */}
         <Route path="/me" element={<MeRedirect />}></Route>
         <Route path="/profile/:username" element={<ProfilePage />}></Route>
       </Routes>
diff --git a/srcs/nginx/src/components/molecules/Halo.tsx b/srcs/nginx/src/components/molecules/Halo.tsx
new file mode 100644
index 00000000..e604de9f
--- /dev/null
+++ b/srcs/nginx/src/components/molecules/Halo.tsx
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { RegisterForm } from '../organisms/RegisterForm';
+import { LoginForm } from '../organisms/LoginForm';
+import Circle from '../atoms/Circle';
+import { useTranslation } from 'react-i18next';
+
+interface HaloProps {
+  isRegister: boolean;
+  className?: string;
+  size?: number;
+}
+
+const Halo = ({ className = '', size = 120, isRegister, onToggleForm }: HaloProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const { t } = useTranslation();
+  const title = isRegister ? t('auth.signup') : t('auth.login');
+  return (
+    <div
+      className={`relative ${className}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Circle size={50} className="cursor-pointer">
+        {!isHovered ? (
+          <span className="text-2xl font-bold">PLAY</span>
+        ) : isRegister ? (
+          <RegisterForm onToggleForm={onToggleForm} />
+        ) : (
+          <LoginForm onToggleForm={onToggleForm} />
+        )}
+      </Circle>
+    </div>
+  );
+};
+
+export default Halo;
diff --git a/srcs/nginx/src/components/organisms/LoginForm.tsx b/srcs/nginx/src/components/organisms/LoginForm.tsx
index 3662d951..ed730ecc 100644
--- a/srcs/nginx/src/components/organisms/LoginForm.tsx
+++ b/srcs/nginx/src/components/organisms/LoginForm.tsx
@@ -79,7 +79,7 @@ async function loginAction(prevState: LoginState | null, formData: FormData) {
   }
 }
 
-export const LoginForm = () => {
+export const LoginForm = ({ onToggleForm }: { onToggleForm?: () => void }) => {
   const { t } = useTranslation();
   const [state, formAction, isPending] = useActionState(loginAction, null);
   const navigate = useNavigate();
@@ -88,10 +88,12 @@ export const LoginForm = () => {
     if (state?.success && state.fields?.username) {
       const username = state.fields.username;
       login({ username: username, avatarUrl: null });
-      navigate(`/profile/${username}`, { replace: true });
+      // navigate(`/profile/${username}`, { replace: true });
+      navigate(`/welcome`, { replace: true });
     }
     if (user?.username) {
-      navigate(`/profile/${user.username}`, { replace: true });
+      // navigate(`/profile/${username}`, { replace: true });
+      navigate(`/welcome`, { replace: true });
     }
   }, [state?.success, state?.fields?.username, user, navigate, login]);
   return (
@@ -119,11 +121,9 @@ export const LoginForm = () => {
 
       <div className="text-xs text-gray-500 mt-5">
         {t('auth.noAccount')}{' '}
-        <span>
-          <Link className="hover:text-blue-400" to={`/signup`}>
-            {t('auth.signup')}
-          </Link>
-        </span>
+        <button type="button" onClick={onToggleForm} className="hover:text-blue-400 underline">
+          {t('auth.signup')}
+        </button>
       </div>
     </form>
   );
diff --git a/srcs/nginx/src/components/organisms/RegisterForm.tsx b/srcs/nginx/src/components/organisms/RegisterForm.tsx
index b3ce5f1b..55dc27ce 100644
--- a/srcs/nginx/src/components/organisms/RegisterForm.tsx
+++ b/srcs/nginx/src/components/organisms/RegisterForm.tsx
@@ -112,8 +112,7 @@ async function signupAction(prevState: SignupState | null, formData: FormData) {
     return nextState;
   }
 }
-
-export const RegisterForm = () => {
+export const RegisterForm = ({ onToggleForm }: { onToggleForm?: () => void }) => {
   const { t } = useTranslation();
   const [state, formAction, isPending] = useActionState(signupAction, null);
   const navigate = useNavigate();
@@ -167,11 +166,9 @@ export const RegisterForm = () => {
 
       <div className="text-xs text-gray-500 mt-5">
         {t('auth.hasAccount')}{' '}
-        <span>
-          <Link className="hover:text-blue-400" to={`/login`}>
-            {t('auth.login')}
-          </Link>
-        </span>
+        <button type="button" onClick={onToggleForm} className="hover:text-blue-400 underline">
+          {t('auth.login')}
+        </button>
       </div>
     </form>
   );
diff --git a/srcs/nginx/src/pages/AnimationPage.tsx b/srcs/nginx/src/pages/AnimationPage.tsx
index 552749dc..e1af8bbc 100644
--- a/srcs/nginx/src/pages/AnimationPage.tsx
+++ b/srcs/nginx/src/pages/AnimationPage.tsx
@@ -20,7 +20,7 @@ export const AnimationPage = ({ className = '' }: AnimationPageProps) => {
 
   useEffect(() => {
     if (animDone) {
-      navigate(`/login`);
+      navigate(`/welcome`);
     }
   }, [animDone, user]);
 

From 57cb9d209c917efa56c2c75a047330c9c6870920 Mon Sep 17 00:00:00 2001
From: ilia <ilia@ilias-MacBook-Pro.local>
Date: Mon, 9 Feb 2026 11:23:26 +0100
Subject: [PATCH 2/8] fix: add the actual WelcomePage.tsx

---
 srcs/nginx/src/pages/WelcomePage.tsx | 41 ++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 srcs/nginx/src/pages/WelcomePage.tsx

diff --git a/srcs/nginx/src/pages/WelcomePage.tsx b/srcs/nginx/src/pages/WelcomePage.tsx
new file mode 100644
index 00000000..37f4c622
--- /dev/null
+++ b/srcs/nginx/src/pages/WelcomePage.tsx
@@ -0,0 +1,41 @@
+import { NavBar } from '../components/molecules/NavBar'; // Adjust path based on your folder structure
+import Halo from '../components/molecules/Halo';
+import { Link } from 'react-router-dom';
+import Background from '../components/atoms/Background';
+import { useTranslation } from 'react-i18next';
+import { RegisterForm } from '../components/organisms/RegisterForm';
+import { LoginForm } from '../components/organisms/LoginForm';
+import { useState } from 'react';
+
+const colors = {
+  start: '#00ff9f',
+  end: '#0088ff',
+};
+
+interface LoginRegisterPageProps {
+  isRegister: boolean;
+}
+
+export const WelcomePage = () => {
+  const { t } = useTranslation();
+  const [isRegister, setIsRegister] = useState(false);
+  const title = isRegister ? t('auth.signup') : t('auth.login');
+  return (
+    <div className={`w-full h-full relative`}>
+      <Background
+        grainIntensity={4}
+        baseFrequency={0.28}
+        colorStart={colors.start}
+        colorEnd={colors.end}
+      >
+        <NavBar />
+        <Halo
+          size={200}
+          isRegister={isRegister}
+          onToggleForm={() => setIsRegister(!isRegister)}
+          className="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+        />
+      </Background>
+    </div>
+  );
+};

From afede970029123cf041420c4415d6efb5194d8e8 Mon Sep 17 00:00:00 2001
From: ilia <ilia@ilias-MacBook-Pro.local>
Date: Mon, 9 Feb 2026 11:53:11 +0100
Subject: [PATCH 3/8] fix: Added onToggleForm in HaloProps

---
 srcs/nginx/src/components/molecules/Halo.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/srcs/nginx/src/components/molecules/Halo.tsx b/srcs/nginx/src/components/molecules/Halo.tsx
index e604de9f..1dfa031b 100644
--- a/srcs/nginx/src/components/molecules/Halo.tsx
+++ b/srcs/nginx/src/components/molecules/Halo.tsx
@@ -8,6 +8,7 @@ interface HaloProps {
   isRegister: boolean;
   className?: string;
   size?: number;
+  onToggleForm: () => void; // Add this line
 }
 
 const Halo = ({ className = '', size = 120, isRegister, onToggleForm }: HaloProps) => {

From 49337b25354190bef5f2e3e8628919f40792cfdc Mon Sep 17 00:00:00 2001
From: ilia <ilia@ilias-MacBook-Pro.local>
Date: Mon, 9 Feb 2026 12:24:31 +0100
Subject: [PATCH 4/8] fix: redirect to welcomePage after login. Display 3 links
 if logged

---
 srcs/nginx/src/App.tsx                        | 15 +---
 .../src/components/organisms/RegisterForm.tsx |  6 +-
 srcs/nginx/src/locales/en/common.json         |  5 ++
 srcs/nginx/src/locales/fr/common.json         |  5 ++
 srcs/nginx/src/locales/tf/common.json         |  5 ++
 srcs/nginx/src/pages/WelcomePage.tsx          | 75 +++++++++++++++++--
 6 files changed, 90 insertions(+), 21 deletions(-)

diff --git a/srcs/nginx/src/App.tsx b/srcs/nginx/src/App.tsx
index 30489fe7..3cd51a76 100644
--- a/srcs/nginx/src/App.tsx
+++ b/srcs/nginx/src/App.tsx
@@ -8,7 +8,8 @@ import { WelcomePage } from './pages/WelcomePage';
 const GuestRoute = ({ children }: { children: React.ReactNode }) => {
   const { user, isLoggedIn } = useAuth();
   if (user && isLoggedIn) {
-    return <Navigate to={`/profile/${user.username}`} replace />;
+    return <Navigate to={`/welcome`} replace />;
+    // return <Navigate to={`/profile/${user.username}`} replace />;
   }
   return children;
 };
@@ -25,16 +26,8 @@ export const App = () => {
     <main className="h-screen bd-slate-950 text-slate-100">
       <Routes>
         <Route path="/" element={<AnimationPage />}></Route>
-        <Route
-          // path="/signup"
-          path="/welcome"
-          element={
-            <GuestRoute>
-              {/* <LoginPage isRegister={true} /> */}
-              <WelcomePage />
-            </GuestRoute>
-          }
-        />
+
+        <Route path="/welcome" element={<WelcomePage />} />
         {/* <Route
           path="/login"
           element={
diff --git a/srcs/nginx/src/components/organisms/RegisterForm.tsx b/srcs/nginx/src/components/organisms/RegisterForm.tsx
index 55dc27ce..b9d9a2f8 100644
--- a/srcs/nginx/src/components/organisms/RegisterForm.tsx
+++ b/srcs/nginx/src/components/organisms/RegisterForm.tsx
@@ -120,7 +120,8 @@ export const RegisterForm = ({ onToggleForm }: { onToggleForm?: () => void }) =>
 
   useEffect(() => {
     if (user && isLoggedIn) {
-      navigate(`/profile/${user.username}`);
+      // navigate(`/profile/${user.username}`);
+      navigate(`/welcome`);
     }
   }, [user, isLoggedIn]);
 
@@ -128,7 +129,8 @@ export const RegisterForm = ({ onToggleForm }: { onToggleForm?: () => void }) =>
     if (state?.success && state.fields?.username) {
       const username = state.fields?.username;
       login({ username: username, avatarUrl: null });
-      navigate(`/profile/${username}`);
+      // navigate(`/profile/${username}`);
+      navigate(`/welcome`);
     }
   }, [state?.success, state?.fields?.username, navigate]);
 
diff --git a/srcs/nginx/src/locales/en/common.json b/srcs/nginx/src/locales/en/common.json
index e5f2d079..359b9857 100644
--- a/srcs/nginx/src/locales/en/common.json
+++ b/srcs/nginx/src/locales/en/common.json
@@ -66,5 +66,10 @@
     "copyright": "© 2026 . All rights reserved.",
     "privacyPolicy": "Privacy Policy",
     "termsOfService": "Terms of Service"
+  },
+  "game": {
+    "playWithAI": "Play with AI",
+    "playWithFriends": "Play with Friends",
+    "tournament": "Tournament"
   }
 }
diff --git a/srcs/nginx/src/locales/fr/common.json b/srcs/nginx/src/locales/fr/common.json
index c2f69834..94be04e3 100644
--- a/srcs/nginx/src/locales/fr/common.json
+++ b/srcs/nginx/src/locales/fr/common.json
@@ -66,5 +66,10 @@
     "copyright": "© 2026 Tous droits réservés.",
     "privacyPolicy": "Politique de confidentialité",
     "termsOfService": "Conditions d'utilisation"
+  },
+  "game": {
+    "playWithAI": "Joue avec un ROBOT (no friends?)",
+    "playWithFriends": "Joue avec ton copaing",
+    "tournament": "Defi tes potes en tournois"
   }
 }
diff --git a/srcs/nginx/src/locales/tf/common.json b/srcs/nginx/src/locales/tf/common.json
index ff94361f..c019d41f 100644
--- a/srcs/nginx/src/locales/tf/common.json
+++ b/srcs/nginx/src/locales/tf/common.json
@@ -66,5 +66,10 @@
     "copyright": "© 2026 – C'est à nous.",
     "privacyPolicy": "La loi du milieu (on balance rien, t'es en sécurité)",
     "termsOfService": "Les règles du jeu (lis ça, sinon t’es un rigolo)"
+  },
+  "game": {
+    "playWithAI": "No friends? Joue avec un ROBOT",
+    "playWithFriends": "Joue avec ton copaing",
+    "tournament": "Defi tes potes en tournois"
   }
 }
diff --git a/srcs/nginx/src/pages/WelcomePage.tsx b/srcs/nginx/src/pages/WelcomePage.tsx
index 37f4c622..ce6d2899 100644
--- a/srcs/nginx/src/pages/WelcomePage.tsx
+++ b/srcs/nginx/src/pages/WelcomePage.tsx
@@ -6,6 +6,8 @@ import { useTranslation } from 'react-i18next';
 import { RegisterForm } from '../components/organisms/RegisterForm';
 import { LoginForm } from '../components/organisms/LoginForm';
 import { useState } from 'react';
+import Circle from '../components/atoms/Circle';
+import { useAuth } from '../providers/AuthProvider';
 
 const colors = {
   start: '#00ff9f',
@@ -15,11 +17,11 @@ const colors = {
 interface LoginRegisterPageProps {
   isRegister: boolean;
 }
-
 export const WelcomePage = () => {
   const { t } = useTranslation();
   const [isRegister, setIsRegister] = useState(false);
-  const title = isRegister ? t('auth.signup') : t('auth.login');
+  const { user, isLoggedIn } = useAuth();
+
   return (
     <div className={`w-full h-full relative`}>
       <Background
@@ -29,13 +31,70 @@ export const WelcomePage = () => {
         colorEnd={colors.end}
       >
         <NavBar />
-        <Halo
-          size={200}
-          isRegister={isRegister}
-          onToggleForm={() => setIsRegister(!isRegister)}
-          className="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-        />
+        {/* Not logged in - show login/register */}
+        {!isLoggedIn && (
+          <Halo
+            size={200}
+            isRegister={isRegister}
+            onToggleForm={() => setIsRegister(!isRegister)}
+            className="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          />
+        )}
+        {/* Logged in - show 3 game options */}
+        {isLoggedIn && (
+          <div className="flex gap-8 items-center justify-center h-full">
+            <Link to="/game/pong-ai">
+              <Circle
+                size={30}
+                className="cursor-pointer hover:scale-110 transition-transform !relative !transform-none"
+              >
+                <span className="text-xl font-bold">{t('game.playWithAI')}</span>
+              </Circle>
+            </Link>
+
+            <Link to="/game/create-session">
+              <Circle
+                size={30}
+                className="cursor-pointer hover:scale-110 transition-transform !relative !transform-none"
+              >
+                <span className="text-xl font-bold">{t('game.playWithFriends')}</span>
+              </Circle>
+            </Link>
+
+            <Link to="/game/tournament">
+              <Circle
+                size={30}
+                className="cursor-pointer hover:scale-110 transition-transform !relative !transform-none"
+              >
+                <span className="text-xl font-bold">{t('game.tournament')}</span>
+              </Circle>
+            </Link>
+          </div>
+        )}
       </Background>
     </div>
   );
 };
+// export const WelcomePage = () => {
+//   const { t } = useTranslation();
+//   const [isRegister, setIsRegister] = useState(false);
+//   const title = isRegister ? t('auth.signup') : t('auth.login');
+//   return (
+//     <div className={`w-full h-full relative`}>
+//       <Background
+//         grainIntensity={4}
+//         baseFrequency={0.28}
+//         colorStart={colors.start}
+//         colorEnd={colors.end}
+//       >
+//         <NavBar />
+//         <Halo
+//           size={200}
+//           isRegister={isRegister}
+//           onToggleForm={() => setIsRegister(!isRegister)}
+//           className="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+//         />
+//       </Background>
+//     </div>
+//   );
+// };

From 6200ccbeb389a3734a32a34717afc7dd03c49383 Mon Sep 17 00:00:00 2001
From: ilia <ilia@ilias-MacBook-Pro.local>
Date: Mon, 9 Feb 2026 17:04:47 +0100
Subject: [PATCH 5/8] fix: Add padding between forms and Halo. toggle form
 visibility

---
 srcs/nginx/src/components/molecules/Halo.tsx | 88 +++++++++++++++++---
 srcs/nginx/src/pages/WelcomePage.tsx         |  2 +-
 2 files changed, 76 insertions(+), 14 deletions(-)

diff --git a/srcs/nginx/src/components/molecules/Halo.tsx b/srcs/nginx/src/components/molecules/Halo.tsx
index 1dfa031b..f22dfc5c 100644
--- a/srcs/nginx/src/components/molecules/Halo.tsx
+++ b/srcs/nginx/src/components/molecules/Halo.tsx
@@ -10,29 +10,91 @@ interface HaloProps {
   size?: number;
   onToggleForm: () => void; // Add this line
 }
-
-const Halo = ({ className = '', size = 120, isRegister, onToggleForm }: HaloProps) => {
+const Halo = ({ className = '', size = 80, isRegister, onToggleForm }: HaloProps) => {
   const [isHovered, setIsHovered] = useState(false);
-
   const { t } = useTranslation();
   const title = isRegister ? t('auth.signup') : t('auth.login');
+
   return (
     <div
-      className={`relative ${className}`}
+      className={`absolute ${className}`}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <Circle size={50} className="cursor-pointer">
-        {!isHovered ? (
-          <span className="text-2xl font-bold">PLAY</span>
-        ) : isRegister ? (
-          <RegisterForm onToggleForm={onToggleForm} />
-        ) : (
-          <LoginForm onToggleForm={onToggleForm} />
-        )}
+      <Circle size={size} className="cursor-pointer">
+        {/* PLAY text */}
+        <span className={`text-2xl font-bold ${isHovered ? 'hidden' : 'block'}`}>PLAY</span>
+
+        {/* Forms */}
+        <div className={isHovered ? 'block p-8' : 'hidden'}>
+          {isRegister ? (
+            <RegisterForm onToggleForm={onToggleForm} />
+          ) : (
+            <LoginForm onToggleForm={onToggleForm} />
+          )}
+        </div>
       </Circle>
     </div>
   );
 };
-
+// const Halo = ({ className = '', size = 120, isRegister, onToggleForm }: HaloProps) => {
+//   const [isHovered, setIsHovered] = useState(false);
+//   const { t } = useTranslation();
+//   const title = isRegister ? t('auth.signup') : t('auth.login');
+//
+//   return (
+//     <div
+//       className={`absolute ${className}`}
+//       onMouseEnter={() => setIsHovered(true)}
+//       onMouseLeave={() => setIsHovered(false)}
+//     >
+//       <Circle size={50} className="cursor-pointer">
+//         {/* PLAY text - hide when hovered */}
+//         <span
+//           className={`text-2xl font-bold transition-opacity ${
+//             isHovered ? 'opacity-0 absolute invisible' : 'opacity-100'
+//           }`}
+//         >
+//           PLAY
+//         </span>
+//
+//         {/* Forms - always rendered, just hidden */}
+//         <div className={`transition-opacity ${
+//           !isHovered ? 'opacity-0 absolute invisible' : 'opacity-100'
+//         }`}>
+//           {isRegister ? (
+//             <RegisterForm onToggleForm={onToggleForm} />
+//           ) : (
+//             <LoginForm onToggleForm={onToggleForm} />
+//           )}
+//         </div>
+//       </Circle>
+//     </div>
+//   );
+// };
 export default Halo;
+// const Halo = ({ className = '', size = 120, isRegister, onToggleForm }: HaloProps) => {
+//   const [isHovered, setIsHovered] = useState(false);
+//
+//   const { t } = useTranslation();
+//   const title = isRegister ? t('auth.signup') : t('auth.login');
+//   return (
+//     <div
+//       className={`relative ${className}`}
+//       onMouseEnter={() => setIsHovered(true)}
+//       onMouseLeave={() => setIsHovered(false)}
+//     >
+//       <Circle size={50} className="cursor-pointer">
+//         {!isHovered ? (
+//           <span className="text-2xl font-bold">PLAY</span>
+//         ) : isRegister ? (
+//           <RegisterForm onToggleForm={onToggleForm} />
+//         ) : (
+//           <LoginForm onToggleForm={onToggleForm} />
+//         )}
+//       </Circle>
+//     </div>
+//   );
+// };
+//
+// export default Halo;
diff --git a/srcs/nginx/src/pages/WelcomePage.tsx b/srcs/nginx/src/pages/WelcomePage.tsx
index ce6d2899..4d028fc2 100644
--- a/srcs/nginx/src/pages/WelcomePage.tsx
+++ b/srcs/nginx/src/pages/WelcomePage.tsx
@@ -34,7 +34,7 @@ export const WelcomePage = () => {
         {/* Not logged in - show login/register */}
         {!isLoggedIn && (
           <Halo
-            size={200}
+            size={50}
             isRegister={isRegister}
             onToggleForm={() => setIsRegister(!isRegister)}
             className="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"

From 49621bda3e9bf705873ea1c18e1ee88de452c868 Mon Sep 17 00:00:00 2001
From: ilia <ilia@ilias-MacBook-Pro.local>
Date: Mon, 9 Feb 2026 17:13:59 +0100
Subject: [PATCH 6/8] fix: Redirect to /welcome if wrong username. Padding
 apply to circle instead of form

---
 srcs/nginx/src/components/molecules/Halo.tsx | 4 ++--
 srcs/nginx/src/hooks/AxiosInterceptor.tsx    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/srcs/nginx/src/components/molecules/Halo.tsx b/srcs/nginx/src/components/molecules/Halo.tsx
index f22dfc5c..630dee33 100644
--- a/srcs/nginx/src/components/molecules/Halo.tsx
+++ b/srcs/nginx/src/components/molecules/Halo.tsx
@@ -21,12 +21,12 @@ const Halo = ({ className = '', size = 80, isRegister, onToggleForm }: HaloProps
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <Circle size={size} className="cursor-pointer">
+      <Circle size={size} className="cursor-pointer p-8">
         {/* PLAY text */}
         <span className={`text-2xl font-bold ${isHovered ? 'hidden' : 'block'}`}>PLAY</span>
 
         {/* Forms */}
-        <div className={isHovered ? 'block p-8' : 'hidden'}>
+        <div className={isHovered ? 'block' : 'hidden'}>
           {isRegister ? (
             <RegisterForm onToggleForm={onToggleForm} />
           ) : (
diff --git a/srcs/nginx/src/hooks/AxiosInterceptor.tsx b/srcs/nginx/src/hooks/AxiosInterceptor.tsx
index ccc327c2..d719261c 100644
--- a/srcs/nginx/src/hooks/AxiosInterceptor.tsx
+++ b/srcs/nginx/src/hooks/AxiosInterceptor.tsx
@@ -12,7 +12,7 @@ export const AxiosInterceptor = ({ children }: { children: React.ReactNode }) =>
       (response) => response,
       (error) => {
         if (error.statusCode === HTTP_STATUS.UNAUTHORIZED) {
-          navigate('/login');
+          navigate('/welcome');
         }
         return Promise.reject(error);
       },

From 63410821836e99e280787c6a57ccd391c3ffc50c Mon Sep 17 00:00:00 2001
From: ilia <ilia@ilias-MacBook-Pro.local>
Date: Mon, 9 Feb 2026 17:44:49 +0100
Subject: [PATCH 7/8] fix: [NGINX]: change size of Halo when hovered, add
 spaceing in halo for error msg

---
 srcs/nginx/src/components/molecules/Halo.tsx | 4 ++--
 srcs/nginx/src/pages/WelcomePage.tsx         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/srcs/nginx/src/components/molecules/Halo.tsx b/srcs/nginx/src/components/molecules/Halo.tsx
index 630dee33..24a9b0b7 100644
--- a/srcs/nginx/src/components/molecules/Halo.tsx
+++ b/srcs/nginx/src/components/molecules/Halo.tsx
@@ -21,12 +21,12 @@ const Halo = ({ className = '', size = 80, isRegister, onToggleForm }: HaloProps
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <Circle size={size} className="cursor-pointer p-8">
+      <Circle size={isHovered ? size : 30} className="cursor-pointer p-8">
         {/* PLAY text */}
         <span className={`text-2xl font-bold ${isHovered ? 'hidden' : 'block'}`}>PLAY</span>
 
         {/* Forms */}
-        <div className={isHovered ? 'block' : 'hidden'}>
+        <div className={`min-h-[100px] ${isHovered ? 'block' : 'hidden'}`}>
           {isRegister ? (
             <RegisterForm onToggleForm={onToggleForm} />
           ) : (
diff --git a/srcs/nginx/src/pages/WelcomePage.tsx b/srcs/nginx/src/pages/WelcomePage.tsx
index 4d028fc2..fc21b615 100644
--- a/srcs/nginx/src/pages/WelcomePage.tsx
+++ b/srcs/nginx/src/pages/WelcomePage.tsx
@@ -34,7 +34,7 @@ export const WelcomePage = () => {
         {/* Not logged in - show login/register */}
         {!isLoggedIn && (
           <Halo
-            size={50}
+            size={80}
             isRegister={isRegister}
             onToggleForm={() => setIsRegister(!isRegister)}
             className="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"

From 8a008eeb2efe6aebf9de95f76320bd325d00a361 Mon Sep 17 00:00:00 2001
From: ilia <ilia@ilias-MacBook-Pro.local>
Date: Wed, 11 Feb 2026 11:24:06 +0100
Subject: [PATCH 8/8] fix: [NGINX] Add CircleButton component, and use it to
 display options

---
 .gitignore                                    |  2 +
 .../src/components/molecules/CircleButton.tsx | 28 +++++++++
 srcs/nginx/src/components/molecules/Halo.tsx  | 60 -------------------
 srcs/nginx/src/pages/WelcomePage.tsx          | 41 +++++--------
 4 files changed, 46 insertions(+), 85 deletions(-)
 create mode 100644 srcs/nginx/src/components/molecules/CircleButton.tsx

diff --git a/.gitignore b/.gitignore
index a67dd8de..10ab35d1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -175,3 +175,5 @@ output.css
 **/src/SmartContract/dump.rdb
 make/scripts/certs/certs
 .venv
+*.ai
+docs/welcomPage.jpg
diff --git a/srcs/nginx/src/components/molecules/CircleButton.tsx b/srcs/nginx/src/components/molecules/CircleButton.tsx
new file mode 100644
index 00000000..90ed8335
--- /dev/null
+++ b/srcs/nginx/src/components/molecules/CircleButton.tsx
@@ -0,0 +1,28 @@
+import { motion } from 'framer-motion';
+
+interface CircleButtonProps {
+  children?: React.ReactNode;
+}
+
+const dropdownStyle = 'shadow-[0_10px_10px_1px_rgba(205,205,205,0.4)] ';
+
+export const CircleButton = ({ children }: CircleButtonProps) => (
+  <motion.div
+    whileHover={{ scale: 1.1, color: '#029c8a' }}
+    whileTap={{ scale: 0.95, color: '#ff0088' }}
+    transition={{ duration: 0.3 }}
+    className={`
+      basis-50
+      h-56 m-10 p-6    
+      aspect-square
+      rounded-full
+      bg-slate-100/80
+      flex items-center justify-center
+      font-quantico border border-cyan-300 
+      text-gray-700
+      ${dropdownStyle}
+                  `}
+  >
+    <p className="text-2xl text-center whitespace-nowrap">{children}</p>
+  </motion.div>
+);
diff --git a/srcs/nginx/src/components/molecules/Halo.tsx b/srcs/nginx/src/components/molecules/Halo.tsx
index 24a9b0b7..73effe05 100644
--- a/srcs/nginx/src/components/molecules/Halo.tsx
+++ b/srcs/nginx/src/components/molecules/Halo.tsx
@@ -37,64 +37,4 @@ const Halo = ({ className = '', size = 80, isRegister, onToggleForm }: HaloProps
     </div>
   );
 };
-// const Halo = ({ className = '', size = 120, isRegister, onToggleForm }: HaloProps) => {
-//   const [isHovered, setIsHovered] = useState(false);
-//   const { t } = useTranslation();
-//   const title = isRegister ? t('auth.signup') : t('auth.login');
-//
-//   return (
-//     <div
-//       className={`absolute ${className}`}
-//       onMouseEnter={() => setIsHovered(true)}
-//       onMouseLeave={() => setIsHovered(false)}
-//     >
-//       <Circle size={50} className="cursor-pointer">
-//         {/* PLAY text - hide when hovered */}
-//         <span
-//           className={`text-2xl font-bold transition-opacity ${
-//             isHovered ? 'opacity-0 absolute invisible' : 'opacity-100'
-//           }`}
-//         >
-//           PLAY
-//         </span>
-//
-//         {/* Forms - always rendered, just hidden */}
-//         <div className={`transition-opacity ${
-//           !isHovered ? 'opacity-0 absolute invisible' : 'opacity-100'
-//         }`}>
-//           {isRegister ? (
-//             <RegisterForm onToggleForm={onToggleForm} />
-//           ) : (
-//             <LoginForm onToggleForm={onToggleForm} />
-//           )}
-//         </div>
-//       </Circle>
-//     </div>
-//   );
-// };
 export default Halo;
-// const Halo = ({ className = '', size = 120, isRegister, onToggleForm }: HaloProps) => {
-//   const [isHovered, setIsHovered] = useState(false);
-//
-//   const { t } = useTranslation();
-//   const title = isRegister ? t('auth.signup') : t('auth.login');
-//   return (
-//     <div
-//       className={`relative ${className}`}
-//       onMouseEnter={() => setIsHovered(true)}
-//       onMouseLeave={() => setIsHovered(false)}
-//     >
-//       <Circle size={50} className="cursor-pointer">
-//         {!isHovered ? (
-//           <span className="text-2xl font-bold">PLAY</span>
-//         ) : isRegister ? (
-//           <RegisterForm onToggleForm={onToggleForm} />
-//         ) : (
-//           <LoginForm onToggleForm={onToggleForm} />
-//         )}
-//       </Circle>
-//     </div>
-//   );
-// };
-//
-// export default Halo;
diff --git a/srcs/nginx/src/pages/WelcomePage.tsx b/srcs/nginx/src/pages/WelcomePage.tsx
index fc21b615..c521afcc 100644
--- a/srcs/nginx/src/pages/WelcomePage.tsx
+++ b/srcs/nginx/src/pages/WelcomePage.tsx
@@ -7,6 +7,7 @@ import { RegisterForm } from '../components/organisms/RegisterForm';
 import { LoginForm } from '../components/organisms/LoginForm';
 import { useState } from 'react';
 import Circle from '../components/atoms/Circle';
+import { CircleButton } from '../components/molecules/CircleButton';
 import { useAuth } from '../providers/AuthProvider';
 
 const colors = {
@@ -22,6 +23,9 @@ export const WelcomePage = () => {
   const [isRegister, setIsRegister] = useState(false);
   const { user, isLoggedIn } = useAuth();
 
+  const ai = t('game.playWithAI');
+  const tournament = t('game.tournament');
+  const friends = t('game.playWithFriends');
   return (
     <div className={`w-full h-full relative`}>
       <Background
@@ -42,33 +46,20 @@ export const WelcomePage = () => {
         )}
         {/* Logged in - show 3 game options */}
         {isLoggedIn && (
-          <div className="flex gap-8 items-center justify-center h-full">
-            <Link to="/game/pong-ai">
-              <Circle
-                size={30}
-                className="cursor-pointer hover:scale-110 transition-transform !relative !transform-none"
-              >
-                <span className="text-xl font-bold">{t('game.playWithAI')}</span>
-              </Circle>
-            </Link>
+          <div className=" flex flex-1 items-center justify-center">
+            <div className="flex flex-col sm:flex-row gap-4">
+              <Link to="/game/pong-ai">
+                <CircleButton>{ai}</CircleButton>
+              </Link>
 
-            <Link to="/game/create-session">
-              <Circle
-                size={30}
-                className="cursor-pointer hover:scale-110 transition-transform !relative !transform-none"
-              >
-                <span className="text-xl font-bold">{t('game.playWithFriends')}</span>
-              </Circle>
-            </Link>
+              <Link to="/game/simple-game">
+                <CircleButton>{friends}</CircleButton>
+              </Link>
 
-            <Link to="/game/tournament">
-              <Circle
-                size={30}
-                className="cursor-pointer hover:scale-110 transition-transform !relative !transform-none"
-              >
-                <span className="text-xl font-bold">{t('game.tournament')}</span>
-              </Circle>
-            </Link>
+              <Link to="/game/tournament">
+                <CircleButton>{tournament}</CircleButton>
+              </Link>
+            </div>
           </div>
         )}
       </Background>