diff --git a/package-lock.json b/package-lock.json
index bc934fa..acb3776 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4767,9 +4767,10 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.4",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
       "dev": true,
-      "license": "MIT",
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -4782,8 +4783,9 @@
     },
     "node_modules/prettier-plugin-tailwindcss": {
       "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz",
+      "integrity": "sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=14.21.3"
       },
@@ -6269,8 +6271,8 @@
         "eslint": "^8.54.0",
         "eslint-config-next": "^14.0.4",
         "postcss": "^8.4.31",
-        "prettier": "^3.1.0",
-        "prettier-plugin-tailwindcss": "^0.5.7",
+        "prettier": "^3.2.5",
+        "prettier-plugin-tailwindcss": "^0.5.11",
         "tailwindcss": "^3.3.5",
         "typescript": "^5.1.6"
       }
diff --git a/packages/client/package.json b/packages/client/package.json
index 57a8c66..9b4f732 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -18,9 +18,9 @@
     "next": "^14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "sharp": "^0.33.2",
     "socket.io-client": "^4.7.4",
-    "zod": "^3.22.4",
-    "sharp": "^0.33.2"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/eslint": "^8.44.7",
@@ -33,8 +33,8 @@
     "eslint": "^8.54.0",
     "eslint-config-next": "^14.0.4",
     "postcss": "^8.4.31",
-    "prettier": "^3.1.0",
-    "prettier-plugin-tailwindcss": "^0.5.7",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.1.6"
   },
diff --git a/packages/client/src/app/page.tsx b/packages/client/src/app/page.tsx
index 0a7085a..bc5d9c2 100644
--- a/packages/client/src/app/page.tsx
+++ b/packages/client/src/app/page.tsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
 import background from "../assets/background.png";
 import logo from "../assets/logo.png";
 import { Canvas } from "./canvas";
-import { getRandomUsername } from '@viper-vortex/shared';
+import { getRandomUsername } from "@viper-vortex/shared";
 export default function HomePage() {
   const [serverUrl, setServerUrl] = useState<string>("http://localhost:4000");
   const [username, setUsername] = useState("");
@@ -16,34 +16,36 @@ export default function HomePage() {
     if (process.env.NODE_ENV === "production") {
       setServerUrl("sr.mael.app");
     }
-  }, [])
-
+  }, []);
 
   useEffect(() => {
-    setUsername(getRandomUsername())
-  }, [])
-
+    setUsername(getRandomUsername());
+  }, []);
 
-  if (!api.isConnected) return <Login
-    setServerUrl={setServerUrl}
-    serverUrl={serverUrl}
-    api={api}
-    setUsername={setUsername}
-    username={username}
-  />
+  if (!api.isConnected)
+    return (
+      <Login
+        setServerUrl={setServerUrl}
+        serverUrl={serverUrl}
+        api={api}
+        setUsername={setUsername}
+        username={username}
+      />
+    );
   return (
     <main className="flex h-full select-none flex-col items-center justify-center">
-      <div className="absolute right-0 top-0 bg-white/10 backdrop-blur-md rounded-lg text-white flex flex-col gap-2 p-4 m-4 pointer-events-none">
-        <h2 className="font-bold text-xl">Leaderboard</h2>
-        <div className="flex flex-col gap-2 w-80">
+      <div className="pointer-events-none absolute right-0 top-0 m-4 flex flex-col gap-2 rounded-lg bg-white/10 p-4 text-white backdrop-blur-md">
+        <h2 className="text-xl font-bold">Leaderboard</h2>
+        <div className="flex w-80 flex-col gap-2">
           {api.scores?.map((player) => (
-            <div key={player.name} className="flex justify-between gap-8 text-white/70">
-              <div className="flex justify-between max-w-60">
-                <span className='truncate'>
-                  {player.name}
-                </span>
+            <div
+              key={player.name}
+              className="flex justify-between gap-8 text-white/70"
+            >
+              <div className="flex max-w-60 justify-between">
+                <span className="truncate">{player.name}</span>
               </div>
-              <div className="flex justify-between font-bold max-w-20 truncate">
+              <div className="flex max-w-20 justify-between truncate font-bold">
                 {Math.round(player.score)}
               </div>
             </div>
@@ -63,61 +65,86 @@ function Login(props: {
   setUsername: (username: string) => void;
 }) {
   return (
-    <main className='flex h-full flex-col items-center relative justify-center'>
-      <Image src={background} alt="Viper Vortex" layout="fill" objectFit="cover" className='fixed brightness-50 inset-0' />
+    <main className="relative flex h-full flex-col items-center justify-center">
+      <Image
+        src={background}
+        alt="Viper Vortex"
+        layout="fill"
+        objectFit="cover"
+        className="fixed inset-0 brightness-50"
+      />
       <form
-        className="flex flex-col max-w-80 items-center gap-4 z-10"
+        className="z-10 flex max-w-80 flex-col items-center gap-4"
         onSubmit={(e) => {
           e.preventDefault();
           props.api.connect(props.serverUrl, props.username);
         }}
       >
         <Image className="w-96" src={logo} alt="Viper Vortex"></Image>
-        <h1 className="text-2xl font-bold text-white w-full">
-          Viper Vortex
-        </h1>
+        <h1 className="w-full text-2xl font-bold text-white">Viper Vortex</h1>
         <p className="text-white/70">
-          Collect points by eating food and other players. If your head touches another player, you will explode and die.
+          Collect points by eating food and other players. If your head touches
+          another player, you will explode and die.
         </p>
-        <div className='relative h-14 w-full bg-white/10 backdrop-blur-md rounded-lg text-white'>
+        <div className="relative h-14 w-full rounded-lg bg-white/10 text-white backdrop-blur-md">
           <label
             htmlFor="username"
-            className='absolute top-0 left-0 px-4 py-2 pointer-events-none text-sm text-white/50 transition-all'
-          >Username</label>
+            className="pointer-events-none absolute left-0 top-0 px-4 py-2 text-sm text-white/50 transition-all"
+          >
+            Username
+          </label>
           <input
             required
             id="username"
             value={props.username}
             onChange={(e) => props.setUsername(e.target.value)}
-            className="px-4 pb-2 pt-6 bg-transparent w-full rounded-lg"
+            className="w-full rounded-lg bg-transparent px-4 pb-2 pt-6"
             type="text"
             placeholder="Your username"
           />
         </div>
-        <div className='relative h-14 w-full bg-white/10 backdrop-blur-md rounded-lg text-white'>
+        <div className="relative h-14 w-full rounded-lg bg-white/10 text-white backdrop-blur-md">
           <label
             htmlFor="serverUrl"
-            className='absolute top-0 left-0 px-4 py-2 pointer-events-none text-sm text-white/50 transition-all'
-          >Server</label>
+            className="pointer-events-none absolute left-0 top-0 px-4 py-2 text-sm text-white/50 transition-all"
+          >
+            Server
+          </label>
           <input
             required
             id="serverUrl"
             value={props.serverUrl}
             onChange={(e) => props.setServerUrl(e.target.value)}
-            className="px-4 pb-2 pt-6 bg-transparent w-full rounded-lg"
+            className="w-full rounded-lg bg-transparent px-4 pb-2 pt-6"
             type="text"
             placeholder="Server URL"
           />
         </div>
         <button
           disabled={!props.username || !props.serverUrl}
-          className="bg-white/30 backdrop-blur-md rounded-lg p-4 text-white w-full disabled:text-red-500 disabled:cursor-not-allowed disabled:bg-red-500/10 border-4 border-white/5 transition-all hover:bg-white/20 hover:border-white/20"
+          className="w-full rounded-lg border-4 border-white/5 bg-white/30 p-4 text-white backdrop-blur-md transition-all hover:border-white/20 hover:bg-white/20 disabled:cursor-not-allowed disabled:bg-red-500/10 disabled:text-red-500"
         >
           Play
         </button>
       </form>
-      <a href="https://github.com/pixselve-school/SR-projet" target="_blank" rel="noopener noreferrer" className='text-zinc-500 absolute top-0 right-0 m-8 hover:text-white'>
-        <svg xmlns="http://www.w3.org/2000/svg" className='w-12 h-12' width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"></path></svg>
+      <a
+        href="https://github.com/pixselve-school/SR-projet"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="absolute right-0 top-0 m-8 text-zinc-500 hover:text-white"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-12 w-12"
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="currentColor"
+            d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+          ></path>
+        </svg>
       </a>
     </main>
   );