diff --git a/Transcendence/srcs/frontend/src/index.css b/Transcendence/srcs/frontend/src/index.css
index 789dc92..5ce3ece 100644
--- a/Transcendence/srcs/frontend/src/index.css
+++ b/Transcendence/srcs/frontend/src/index.css
@@ -43,8 +43,13 @@ body {
 
 .container-1 {
 	display: flex;
+	justify-content: center;
+	align-items: center;
+
 	width: 100%;
 	margin: 5px;
+	position: relative;
+	min-height: 200px;
 }
 
 /* ///////////////////////////////////////////////////////// */
@@ -75,17 +80,55 @@ body {
     color: black;
 }
 
+/* ///////////////////////////////////////////////////////// */
 .button-trans {
+/* SIZE */
 	position: absolute;
 	left: 50%;
 	transform: translateX(-50%);
+
+	width: 500px;
+	height: 200px;
+
+/* TEXT */
+	font-family: "Roboto";
+	font-size: 62px;
+    letter-spacing: -10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+/* Background */
+	background-image: url("./assets/background.png");
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: 150%;
+/* Borders */
+	border-radius: 20px;
+	border-radius: 20px;
+	border: 5px solid transparent; /* keep space for the shadow */
+	background-clip: padding-box;
+	/* metallic effect */
+	box-shadow:
+		0 0 0 5px #c0c0c0 inset,          /* inner shine */
+		0 0 0 2px rgba(255,255,255,0.3) inset; /* subtle highlight */
+	
+/* OTHER */
+	cursor: pointer;
+	transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
+
 .button-trans:hover {
-
+  transform: translateX(-50%) scale(1.02);
+  box-shadow:
+    0 0 20px 5px #fff inset,
+    0 0 20px 5px rgba(255,255,255,0.3) inset;
 }
 
+/* ///////////////////////////////////////////////////////// */
 .button-test {
 	margin-right: auto;
+	margin-left: 20px;
 }
 
 /* ///////////////////////////////////////////////////////// */
diff --git a/Transcendence/srcs/frontend/src/index.html b/Transcendence/srcs/frontend/src/index.html
index 5273c3e..b01b60c 100644
--- a/Transcendence/srcs/frontend/src/index.html
+++ b/Transcendence/srcs/frontend/src/index.html
@@ -7,9 +7,8 @@
 
 	<div id="header-1" class="container-1" 
 		style="">
-		<div id="button-test" class="button-1 button-test">place-1</div>
-		<div id="button-trans" class="button-1 button-trans">place-2</div>
-		<div></div>
+		<div id="button-test" class="button-1 button-test multicolor" onclick="window.location.href = 'test/index.html';">TEST</div>
+		<div id="button-trans" class="button-trans multicolor">TRANSCENDENCE</div>
 	</div>
 
 	<img id="wiskas" style="margin: auto; display: block;" src="webcat/web_cat_img/wiskas-the-third.jpg">
@@ -29,9 +28,9 @@
 	</section>
 
 	<section style="display: flex;">
-		<button style="margin-left: 50px;" class="button1" onclick="window.location.href = 'webcat/biblio.html';">
+		<button style="margin-right: 50px;" class="button-1 multicolor" onclick="window.location.href = 'webcat/biblio.html';">
 			Latest News</button><br>
-		<button style="margin-left: 50px;" class="button1" onclick="window.location.href = 'webcat/staff/staff.html';">
+		<button style="margin-left: 50px;" class="button-1 multicolor" onclick="window.location.href = 'webcat/staff/staff.html';">
 			meet the staff</button><br>
 	</section>
 
diff --git a/Transcendence/srcs/frontend/src/index.js b/Transcendence/srcs/frontend/src/index.js
index 277bf92..95a6506 100644
--- a/Transcendence/srcs/frontend/src/index.js
+++ b/Transcendence/srcs/frontend/src/index.js
@@ -1,4 +1,5 @@
 import { updateElement } from "./test/tools.js";
+import { colorizeText } from "./tools.js";
 
 // //////////////////////////////////////////]
 let div2 = document.createElement('div')
@@ -15,12 +16,7 @@ button2.textContent = 'tetris'
 button2.addEventListener('click', () => {
 	window.location.href = './tetris/tetris.html';
 })
-let button3 = document.createElement('button')
-div2.append(button3)
-button3.textContent = 'transcendance'
-button3.addEventListener('click', () => {
-	window.location.href = './trans/index2.html';
-})
+
 let button4 = document.createElement('button')
 div2.append(button4)
 button4.textContent = 'test'
@@ -29,3 +25,30 @@ button4.addEventListener('click', () => {
 })
 let img = document.getElementById('wiskas');
 img.before(div2)
+
+// apply multicolor to .multicolor
+colorizeText();
+
+
+/* ///////////////////////////////////////////////////////// */
+// make transcendence button move via: .button-trans
+function updateButtonTranscendence(move) {
+
+	const btn = document.querySelector('.button-trans');
+	btn.addEventListener('mousemove', e => {
+		const rect = btn.getBoundingClientRect();
+		const x = ((e.clientX - rect.left) / rect.width - 0.5) * move;
+		const y = ((e.clientY - rect.top) / rect.height - 0.5) * move;
+		btn.style.backgroundPosition = `calc(50% + ${x}px) calc(50% + ${y}px)`;
+	});
+
+	btn.addEventListener('mouseleave', () => {
+		btn.style.backgroundPosition = 'center';
+	});
+
+	btn.addEventListener('click', () => {
+		window.location.href = './trans/index2.html';
+	});
+}
+/* ///////////////////////////////////////////////////////// */
+updateButtonTranscendence(100);
\ No newline at end of file
diff --git a/Transcendence/srcs/frontend/src/tools.js b/Transcendence/srcs/frontend/src/tools.js
new file mode 100644
index 0000000..55ea037
--- /dev/null
+++ b/Transcendence/srcs/frontend/src/tools.js
@@ -0,0 +1,32 @@
+// render in color the text of all .multicolor
+export function colorizeText() {
+    
+	const elements = document.querySelectorAll(".multicolor");
+
+	const colorizeText = (el) => {
+		const text = el.textContent;
+		el.innerHTML = "";
+
+		const baseHue = Math.random() * 360;
+
+		// 🎲 random step = makes rainbow "scrambled"
+		const step = (Math.random() * 60) + 10; // 10 → 70
+
+		// 🎲 random direction (left or right rainbow)
+		const direction = Math.random() < 0.5 ? 1 : -1;
+
+		[...text].forEach((char, i) => {
+			const span = document.createElement("span");
+			span.textContent = char;
+
+			const hue = baseHue + (i * step * direction);
+
+			span.style.color = `hsl(${hue}, 90%, 60%)`;
+
+			span.style.textShadow = `1px 1px 0 rgba(0,0,0,0.3)`;
+
+			el.appendChild(span);
+		});
+	};
+	elements.forEach(colorizeText);
+}
diff --git a/Transcendence/srcs/frontend/src/trans/index2.html b/Transcendence/srcs/frontend/src/trans/index2.html
index 73b9fa4..89b0dc6 100644
--- a/Transcendence/srcs/frontend/src/trans/index2.html
+++ b/Transcendence/srcs/frontend/src/trans/index2.html
@@ -5,6 +5,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>Transcendence</title>
 		<link rel="stylesheet" href="index.css" />
+		<link rel="stylesheet" href="style.css" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
@@ -29,6 +30,12 @@
 			onclick="window.location.href='../wiscat/wiscat.html'">Wiscat</button>
 		</nav>
 		
+		<div class="container-gamelinks">
+			<button class="game-button link-game" onclick="window.location.href='../game2/game.html';">Skkrrribl.io</button>
+			<button class="game-button link-tetris" onclick="window.location.href='../tetris/tetris.html';">Tetris</button>
+			<button class="game-button link-wiscat" onclick="window.location.href='../wiscat/wiscat.html';">Wiscat</button>
+		</div>
 		<script type="module" src="app.js"></script>
+		<script type="module" src="script.js"></script>
 	</body>
 	</html>
diff --git a/Transcendence/srcs/frontend/src/trans/script.js b/Transcendence/srcs/frontend/src/trans/script.js
new file mode 100644
index 0000000..2654561
--- /dev/null
+++ b/Transcendence/srcs/frontend/src/trans/script.js
@@ -0,0 +1,57 @@
+const container = document.querySelector('.container-gamelinks');
+const buttons = document.querySelectorAll('.game-button');
+
+function initButtons() {
+  const rect = container.getBoundingClientRect();
+
+  buttons.forEach(btn => {
+    // Ensure size is known
+    const bw = btn.offsetWidth;
+    const bh = btn.offsetHeight;
+
+    // Random start position INSIDE container
+    btn.x = Math.random() * (rect.width - bw);
+    btn.y = Math.random() * (rect.height - bh);
+
+    // Better velocity (avoid super slow)
+    btn.vx = (Math.random() * 2 + 1) * (Math.random() < 0.5 ? -1 : 1);
+    btn.vy = (Math.random() * 2 + 1) * (Math.random() < 0.5 ? -1 : 1);
+
+    btn.style.left = btn.x + 'px';
+    btn.style.top = btn.y + 'px';
+  });
+}
+
+function animateButtons() {
+  const rect = container.getBoundingClientRect();
+
+  buttons.forEach(btn => {
+    btn.x += btn.vx;
+    btn.y += btn.vy;
+
+    const bw = btn.offsetWidth;
+    const bh = btn.offsetHeight;
+
+    // Bounce inside container
+    if (btn.x <= 0 || btn.x + bw >= rect.width) {
+      btn.vx *= -1;
+      btn.x = Math.max(0, Math.min(btn.x, rect.width - bw)); // clamp
+    }
+
+    if (btn.y <= 0 || btn.y + bh >= rect.height) {
+      btn.vy *= -1;
+      btn.y = Math.max(0, Math.min(btn.y, rect.height - bh)); // clamp
+    }
+
+    btn.style.left = btn.x + 'px';
+    btn.style.top = btn.y + 'px';
+  });
+
+  requestAnimationFrame(animateButtons);
+}
+
+// 🔥 IMPORTANT: wait for layout to be ready
+window.addEventListener('load', () => {
+  initButtons();
+  animateButtons();
+});
\ No newline at end of file
diff --git a/Transcendence/srcs/frontend/src/trans/style.css b/Transcendence/srcs/frontend/src/trans/style.css
new file mode 100644
index 0000000..327e642
--- /dev/null
+++ b/Transcendence/srcs/frontend/src/trans/style.css
@@ -0,0 +1,51 @@
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+}
+
+.link-button {
+
+}
+
+.link-game {
+
+}
+
+.link-tetris {
+
+}
+
+.link-wiscat {
+
+}
+
+.container-gamelinks {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.game-button {
+  position: absolute;   /* allow movement */
+  padding: 15px 30px;
+  font-size: 20px;
+  font-family: "Roboto";
+  border-radius: 15px;
+  border: 4px solid #c0c0c0; 
+  background-color: #111;
+  color: white;
+  cursor: pointer;
+
+  /* metallic shine effect */
+  box-shadow: inset 0 0 8px rgba(255,255,255,0.4), 0 0 5px rgba(255,255,255,0.2);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.game-button:hover {
+  transform: scale(1.1);
+  box-shadow: inset 0 0 12px rgba(255,255,255,0.5), 0 0 8px rgba(255,255,255,0.3);
+}
\ No newline at end of file