diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 840ed84..b59307a 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -1,315 +1,376 @@
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&family=Ribeye&family=UnifrakturCook:wght@700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Henny+Penny&family=Ribeye&family=UnifrakturCook:wght@700&display=swap");
 @import "tailwindcss";
 @import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--font-sans: var(--font-geist-sans);
+	--font-mono: var(--font-geist-mono);
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar: var(--sidebar);
+	--color-chart-5: var(--chart-5);
+	--color-chart-4: var(--chart-4);
+	--color-chart-3: var(--chart-3);
+	--color-chart-2: var(--chart-2);
+	--color-chart-1: var(--chart-1);
+	--color-ring: var(--ring);
+	--color-input: var(--input);
+	--color-border: var(--border);
+	--color-destructive: var(--destructive);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-accent: var(--accent);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-muted: var(--muted);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-secondary: var(--secondary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-primary: var(--primary);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-popover: var(--popover);
+	--color-card-foreground: var(--card-foreground);
+	--color-card: var(--card);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
 }
 
 :root {
-  --radius: 1rem;
-  --background: rgb(250,250,250);
-  --foreground: rgb(20,28,28);
-  --card: rgb(248,248,248);
-  --card-foreground: rgb(25,30,30);
-  --popover: rgb(248,248,248);
-  --popover-foreground: rgb(25,30,30);
-  --primary: rgb(0,190,190);
-  --primary-foreground: rgb(15,10,20);
-  --secondary: rgb(160,120,255);
-  --secondary-foreground: rgb(25,30,30);
-  --muted: rgb(220,225,235);
-  --muted-foreground: rgb(110,130,150);
-  --accent: rgb(240,60,200);
-  --accent-foreground: rgb(25,30,30);
-  --destructive: rgb(220,70,60);
-  --destructive-foreground: rgb(250,250,250);
-  --border: rgb(215,218,225);
-  --input: rgb(215,218,225);
-  --ring: rgb(0,190,190);
-  --glow-cyan: rgb(0,190,190);
-  --glow-purple: rgb(160,120,255);
-  --glow-magenta: rgb(240,60,200);
-  --gradient-primary: linear-gradient(135deg,rgb(75, 252, 252) ,rgb(0,170,170), rgb(180,90,255));
-  --gradient-secondary: linear-gradient(135deg, rgb(198, 144, 242),rgb(180,90,255), rgb(255,40,180));
-  --gradient-accent: linear-gradient(90deg, rgb(0,170,170), rgb(255,40,180));
-  --shadow-glow: 0 0 40px rgb(0,190,190,0.4);
-  --shadow-glow-purple: 0 0 40px rgb(160,120,255,0.4);
-  --shadow-glow-magenta: 0 0 40px rgb(240,60,200,0.4);
+	--radius: 1rem;
+	--background: rgb(250, 250, 250);
+	--foreground: rgb(20, 28, 28);
+	--card: rgb(248, 248, 248);
+	--card-foreground: rgb(25, 30, 30);
+	--popover: rgb(248, 248, 248);
+	--popover-foreground: rgb(25, 30, 30);
+	--primary: rgb(0, 190, 190);
+	--primary-foreground: rgb(15, 10, 20);
+	--secondary: rgb(160, 120, 255);
+	--secondary-foreground: rgb(25, 30, 30);
+	--muted: rgb(220, 225, 235);
+	--muted-foreground: rgb(110, 130, 150);
+	--accent: rgb(240, 60, 200);
+	--accent-foreground: rgb(25, 30, 30);
+	--destructive: rgb(220, 70, 60);
+	--destructive-foreground: rgb(250, 250, 250);
+	--border: rgb(215, 218, 225);
+	--input: rgb(215, 218, 225);
+	--ring: rgb(0, 190, 190);
+	--glow-cyan: rgb(0, 190, 190);
+	--glow-purple: rgb(160, 120, 255);
+	--glow-magenta: rgb(240, 60, 200);
+	--gradient-primary: linear-gradient(
+		135deg,
+		rgb(75, 252, 252),
+		rgb(0, 170, 170),
+		rgb(180, 90, 255)
+	);
+	--gradient-secondary: linear-gradient(
+		135deg,
+		rgb(198, 144, 242),
+		rgb(180, 90, 255),
+		rgb(255, 40, 180)
+	);
+	--gradient-accent: linear-gradient(
+		90deg,
+		rgb(0, 170, 170),
+		rgb(255, 40, 180)
+	);
+	--shadow-glow: 0 0 40px rgb(0, 190, 190, 0.4);
+	--shadow-glow-purple: 0 0 40px rgb(160, 120, 255, 0.4);
+	--shadow-glow-magenta: 0 0 40px rgb(240, 60, 200, 0.4);
 }
 
 .dark {
-  --background: rgb(8,8,12);
-  --foreground: rgb(235,255,255);
-  --card: rgb(12,12,16);
-  --card-foreground: rgb(235,255,255);
-  --popover: rgb(14,14,18);
-  --popover-foreground: rgb(235,255,255);
-  --primary: rgb(0,170,170);
-  --primary-foreground: rgb(8,8,12);
-  --secondary: rgb(180,90,255);
-  --secondary-foreground: rgb(235,255,255);
-  --muted: rgb(28,28,38);
-  --muted-foreground: rgb(150,180,200);
-  --accent: rgb(255,40,180);
-  --accent-foreground: rgb(235,255,255);
-  --destructive: rgb(200,50,45);
-  --destructive-foreground: rgb(250,250,250);
-  --border: linear-gradient(135deg,rgb(255, 43, 220) ,rgb(0,170,170), rgb(119, 5, 212));
-  --input: rgb(25,25,35);
-  --ring: rgb(0,170,170);
-  --glow-cyan: rgb(0,170,170);
-  --glow-purple: rgb(180,90,255);
-  --glow-magenta: rgb(255,40,180);
-  --gradient-primary: linear-gradient(135deg, hsl(180 100% 50%), hsl(280 100% 60%));
-  --gradient-secondary: linear-gradient(135deg, hsl(280 100% 60%), hsl(320 100% 50%));
-  --gradient-accent: linear-gradient(90deg, hsl(180 100% 50%), hsl(320 100% 50%));
-  /* --gradient-primary: linear-gradient(135deg,rgb(75, 252, 252) ,rgb(0, 195, 255),rgb(144, 67, 156), rgb(55, 3, 61));
+	--background: rgb(8, 8, 12);
+	--foreground: rgb(235, 255, 255);
+	--card: rgb(12, 12, 16);
+	--card-foreground: rgb(235, 255, 255);
+	--popover: rgb(14, 14, 18);
+	--popover-foreground: rgb(235, 255, 255);
+	--primary: rgb(0, 170, 170);
+	--primary-foreground: rgb(8, 8, 12);
+	--secondary: rgb(180, 90, 255);
+	--secondary-foreground: rgb(235, 255, 255);
+	--muted: rgb(28, 28, 38);
+	--muted-foreground: rgb(150, 180, 200);
+	--accent: rgb(255, 40, 180);
+	--accent-foreground: rgb(235, 255, 255);
+	--destructive: rgb(200, 50, 45);
+	--destructive-foreground: rgb(250, 250, 250);
+	--border: linear-gradient(
+		135deg,
+		rgb(255, 43, 220),
+		rgb(0, 170, 170),
+		rgb(119, 5, 212)
+	);
+	--input: rgb(25, 25, 35);
+	--ring: rgb(0, 170, 170);
+	--glow-cyan: rgb(0, 170, 170);
+	--glow-purple: rgb(180, 90, 255);
+	--glow-magenta: rgb(255, 40, 180);
+	--gradient-primary: linear-gradient(
+		135deg,
+		hsl(180 100% 50%),
+		hsl(280 100% 60%)
+	);
+	--gradient-secondary: linear-gradient(
+		135deg,
+		hsl(280 100% 60%),
+		hsl(320 100% 50%)
+	);
+	--gradient-accent: linear-gradient(
+		90deg,
+		hsl(180 100% 50%),
+		hsl(320 100% 50%)
+	);
+	/* --gradient-primary: linear-gradient(135deg,rgb(75, 252, 252) ,rgb(0, 195, 255),rgb(144, 67, 156), rgb(55, 3, 61));
   --gradient-secondary: linear-gradient(135deg, rgb(198, 144, 242),rgb(180,90,255), rgb(255,40,180));
   --gradient-accent: linear-gradient(90deg, rgb(0,170,170), rgb(255,40,180)); */
-  --shadow-glow: 0 0 40px rgb(0,170,170,0.4);
-  --shadow-glow-purple: 0 0 40px rgb(180,90,255,0.4);
-  --shadow-glow-magenta: 0 0 40px rgb(255,40,180,0.4);
+	--shadow-glow: 0 0 40px rgb(0, 170, 170, 0.4);
+	--shadow-glow-purple: 0 0 40px rgb(180, 90, 255, 0.4);
+	--shadow-glow-magenta: 0 0 40px rgb(255, 40, 180, 0.4);
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50 ;
-  }
-  body {
-    @apply bg-background text-foreground w-full  flex flex-col justify-center items-center;
-  }
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground w-full  flex flex-col justify-center items-center;
+	}
 }
-.body{
-  @apply w-full flex flex-col justify-center items-center max-w-[1360px];
+.body {
+	@apply w-full flex flex-col justify-center items-center max-w-[1360px];
 }
 .cancelButton {
-  @apply h-[30px] w-[100px] rounded-sm bg-[#0B0B0E] hover:bg-[#0B0B0E] border-[#f8b141] border-[1px] text-primary hover:text-red-400 hover:cursor-not-allowed;
-  font-family: "ribeye";
+	@apply h-[30px] w-[100px] rounded-sm bg-[#0B0B0E] hover:bg-[#0B0B0E] border-[#f8b141] border-[1px] text-primary hover:text-red-400 hover:cursor-not-allowed;
+	font-family: "ribeye";
 }
-.body{
-  @appy flex justify-between items-center h-[70px] py-2 px-4 shadow-sm shadow-primary/40;
+.body {
+	@appy flex justify-between items-center h-[70px] py-2 px-4 shadow-sm shadow-primary/40;
 }
-.navbar{
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 70px;
-  padding: 0.8rem 0.3rem;
-  width: 100%;
-  @apply shadow-sm shadow-primary/40;
+.navbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 70px;
+	padding: 0.8rem 0.3rem;
+	width: 100%;
+	@apply shadow-sm shadow-primary/40;
 }
 .connect_btn * {
-  font-family: "ribeye" !important;
+	font-family: "ribeye" !important;
 }
 
 .connect_btn button,
 .connect_btn [role="button"] {
-  padding: 6px 10px !important;
-  background: var(--primary) !important;
-  color: white !important;
-  border-radius: 8px !important;
-  min-height: auto !important;
-  height: auto !important;
+	padding: 6px 10px !important;
+	background: var(--primary) !important;
+	color: white !important;
+	border-radius: 8px !important;
+	min-height: auto !important;
+	height: auto !important;
 }
 
-.hero{
-  height: 80dvh;
-  display:flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background-image: 
-    linear-gradient(
-      to bottom, 
-      rgba(78, 4, 4, 0.38) 0%,
-      rgba(12, 6, 6, 0.91) 50%,
-      rgba(0, 0, 0, 0.7) 100%
-    ),
-    url('/background3.jpeg');
-  width: 100%;
-}
-.hero button{
-  width: 130px;
-  height: 35px;
-  border: 12px solid var(--gradient-primary);
-  border-radius: 10px;
-  background: var(--secondary);
-  font-family: "Ribeye";
-  @apply text-nowrap hover:scale-105 text-lg transition-all transform duration-300;
-}
-.ribeye{
-  font-family: "Ribeye";
+.hero {
+	height: 80dvh;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	background-image: linear-gradient(
+			to bottom,
+			rgba(78, 4, 4, 0.38) 0%,
+			rgba(12, 6, 6, 0.91) 50%,
+			rgba(0, 0, 0, 0.7) 100%
+		),
+		url("/background3.jpeg");
+	width: 100%;
+}
+.hero button {
+	width: 130px;
+	height: 35px;
+	border: 12px solid var(--gradient-primary);
+	border-radius: 10px;
+	background: var(--secondary);
+	font-family: "Ribeye";
+	@apply text-nowrap hover:scale-105 text-lg transition-all transform duration-300;
+}
+.ribeye {
+	font-family: "Ribeye";
 }
 .glass {
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--gradient-primary);
+	background: rgba(255, 255, 255, 0.05);
+	backdrop-filter: blur(10px);
+	border: 1px solid var(--gradient-primary);
 }
 
-.hero_bold{
-  font-family: "Orbitron", cursive;
-    font-style: normal;
-    font-weight: 800;
+.hero_bold {
+	font-family: "Orbitron", cursive;
+	font-style: normal;
+	font-weight: 800;
 }
 .text-gradient {
-    background: var(--gradient-primary);
-    -webkit-text-fill-color: transparent;
-    -webkit-background-clip: text;
-    background-clip: text;
+	background: var(--gradient-primary);
+	-webkit-text-fill-color: transparent;
+	-webkit-background-clip: text;
+	background-clip: text;
 }
 .pong_hero {
-  @apply w-full min-h-[300px] min-h-[220px] flex justify-center items-center;
-  background-image: linear-gradient(
-      rgba(0, 0, 0, 0.5) 60%,
-      rgba(16, 16, 17, 0.802) 80%
-    ),
-    url("/background3.jpeg");
+	@apply w-full min-h-[300px] min-h-[220px] flex justify-center items-center;
+	background-image: linear-gradient(
+			rgba(0, 0, 0, 0.5) 60%,
+			rgba(16, 16, 17, 0.802) 80%
+		),
+		url("/background3.jpeg");
 }
 .pong_hero > section {
-  @apply flex flex-wrap md:flex-row justify-around items-center gap-3 py-4 px-2 w-full md:px-12;
+	@apply flex flex-wrap md:flex-row justify-around items-center gap-3 py-4 px-2 w-full md:px-12;
 }
 .pong_hero > section > article {
-  @apply flex flex-col justify-center items-center h-[90px] sm:h-[120px] sm:text-[1rem] text-primary w-[50%] sm:w-[22%] 
+	@apply flex flex-col justify-center items-center h-[90px] sm:h-[120px] sm:text-[1rem] text-primary w-[50%] sm:w-[22%] 
   transform transition-all duration-300 max-w-[160px] sm:max-w-[350px] bg-[#0B0B0E] md:max-w-[450px] rounded-sm sm:px-5
   group-hover:scale-[1.2] text-center;
-  border: 1px solid #ffc05b;
-  cursor: pointer;
-  font-family: "ribeye";
+	border: 1px solid #ffc05b;
+	cursor: pointer;
+	font-family: "ribeye";
 }
 .boostpack {
-  @apply flex flex-col sm:flex-col rounded-lg border-primary border-[2px] mx-5 py-2 px-5 mt-3;
+	@apply flex flex-col sm:flex-col rounded-lg border-primary border-[2px] mx-5 py-2 px-5 mt-3;
 }
 .boostpack > div {
-  @apply flex flex-col sm:flex-row justify-between items-center gap-3 py-3;
+	@apply flex flex-col sm:flex-row justify-between items-center gap-3 py-3;
 }
 .boostpack > div > article {
-  @apply flex flex-col items-start justify-between rounded-sm p-2 w-full h-[100px];
-  border: 1px solid #f8b141;
-  cursor: pointer;
-  & h5 {
-    @apply text-[1.3rem] text-amber-400 text-nowrap;
-    font-family: "ribeye";
-  }
-  & p {
-    @apply text-xs lg:text-[0.9rem] text-start;
-  }
-  & span {
-    @apply text-2xl font-thin;
-  }
-  & h6 {
-    @appply font-thin text-sm;
-  }
+	@apply flex flex-col items-start justify-between rounded-sm p-2 w-full h-[100px];
+	border: 1px solid #f8b141;
+	cursor: pointer;
+	& h5 {
+		@apply text-[1.3rem] text-amber-400 text-nowrap;
+		font-family: "ribeye";
+	}
+	& p {
+		@apply text-xs lg:text-[0.9rem] text-start;
+	}
+	& span {
+		@apply text-2xl font-thin;
+	}
+	& h6 {
+		@appply font-thin text-sm;
+	}
 }
 .boostpack > nav {
-  @apply flex justify-between items-center pt-2 pb-3;
+	@apply flex justify-between items-center pt-2 pb-3;
 }
 .boostpack > nav > h5 {
-  @apply capitalize text-amber-400 text-2xl;
-  font-family: "ribeye";
+	@apply capitalize text-amber-400 text-2xl;
+	font-family: "ribeye";
 }
 .livegames {
-  @apply min-h-[350px] flex w-full max-h-[450px] p-2 overflow-y-auto flex-col border-[2px] border-primary rounded-lg
+	@apply min-h-[350px] flex w-full max-h-[400px] p-2 overflow-y-auto flex-col border-[2px] border-primary rounded-lg
   sm:max-w-[450px] lg:max-w-[550px] w-full;
 }
 .livegames > header {
-  @apply text-amber-400 text-3xl font-bold text-start rounded p-2 text-nowrap;
-  font-family: "ribeye";
+	@apply text-amber-400 text-3xl font-bold text-start rounded p-2 text-nowrap;
+	font-family: "ribeye";
 }
-.livegames > :nth-child(2), .leadersBoard > :nth-child(2):has(> *:nth-child(3)){
-  @apply flex flex-grow text-center justify-center items-center overflow-y-auto rounded-b-lg p-2;
-  border: 1px solid #f8b141;
+.livegames > :nth-child(2),
+.leadersBoard > :nth-child(2):has(> *:nth-child(3)) {
+	@apply flex flex-grow text-center justify-center items-center overflow-y-auto rounded-b-lg p-2;
+	border: 1px solid #f8b141;
 }
- 
-.howToPlay> div {
-  @apply flex flex-grow p-2 overflow-y-auto rounded-b-lg;
-  border: 1px solid #f8b141;
+
+.howToPlay > div {
+	@apply flex flex-grow p-2 overflow-y-auto rounded-b-lg;
+	border: 1px solid #f8b141;
 }
 .leadersBoard {
-  @apply min-h-[350px] flex w-full max-h-[450px] p-2 flex-col border-[2px] border-primary rounded-lg
+	@apply min-h-[350px] flex w-full max-h-[400px] p-2 flex-col border-[2px] border-primary rounded-lg
   sm:max-w-[350px] lg:max-w-[400px];
 }
 .leadersBoard > header {
-  @apply text-amber-400 lg:text-xl text-xl font-bold text-start rounded p-2 text-nowrap;
-  font-family: "ribeye";
+	@apply text-amber-400 lg:text-xl text-xl font-bold text-start rounded p-2 text-nowrap;
+	font-family: "ribeye";
 }
 .leadersBoard :is(li) {
-  @apply list-none flex items-center gap-2 px-2 my-[2px] py-1 border-[#00FBFA] border-[2px] rounded-[5px] w-full;
-  border: 1px solid #f8b141;
+	@apply list-none flex items-center gap-2 px-2 my-[2px] py-1 border-[#00FBFA] border-[2px] rounded-[5px] w-full;
+	border: 1px solid #f8b141;
 }
 .leadersBoard :is(div) {
-  @apply flex flex-col justify-start items-start rounded-b-lg w-full;
-    border: 1px solid #f8b141;
+	@apply flex flex-col justify-start items-start rounded-b-lg w-full;
+	border: 1px solid #f8b141;
 }
-.leadersBoard :is(li){
-  @apply list-none flex items-start justify-end w-full;
+.leadersBoard :is(li) {
+	@apply list-none flex items-start justify-end w-full;
 }
 .leadersBoard :is(li) :is(p) {
-  @apply flex items-center gap-2 w-full text-[1rem] ;
-    font-family: "ribeye";
+	@apply flex items-center gap-2 w-full text-[1rem];
+	font-family: "ribeye";
 }
-.leadersBoard > div > li{
-  @apply flex justify-between gap-[60px];
+.leadersBoard > div > li {
+	@apply flex justify-between gap-[60px];
 }
 
 .howToPlay {
-  @apply min-h-[350px] flex w-full max-h-[450px] p-2 overflow-y-auto flex-col border-[2px] border-primary rounded-lg
+	@apply min-h-[350px] flex w-full max-h-[400px] p-2 overflow-y-auto flex-col border-[2px] border-primary rounded-lg
   sm:max-w-[350px] lg:max-w-[400px] w-full;
 }
 .howToPlay > header {
-  @apply text-amber-400 text-2xl font-bold text-start rounded p-2 text-nowrap;
-  font-family: "ribeye";
+	@apply text-amber-400 text-2xl font-bold text-start rounded p-2 text-nowrap;
+	font-family: "ribeye";
 }
 .howToPlay > div {
-  @apply flex flex-col gap-2;
+	@apply flex flex-col gap-2;
 }
-.howToPlay> div> p{
-  @apply text-start rounded w-full p-1;
-    border: 1px solid #f8b141;
-    font-family: "ribeye";
+.howToPlay > div > p {
+	@apply text-start rounded w-full p-1;
+	border: 1px solid #f8b141;
+	font-family: "ribeye";
 }
 .bottomCard {
-  @apply flex flex-col md:flex-row gap-2 py-2 px-4 justify-between items-center w-full;
+	@apply flex flex-col md:flex-row gap-2 py-2 px-4 justify-between items-center w-full;
 }
 .bottomCard > aside {
-  @apply flex flex-col md:flex-row w-full md:gap-2 sm:max-w-[65%];
-}
\ No newline at end of file
+	@apply flex flex-col md:flex-row w-full md:gap-2 sm:max-w-[65%];
+}
+
+* {
+	scrollbar-width: thin;
+	scrollbar-color: #d7d4d4 transparent;
+}
+
+::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: #b0b0b0;
+	border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: rgb(150, 206, 244);
+}
+
+::-webkit-scrollbar-button {
+	display: none;
+	width: 0;
+	height: 0;
+	background: transparent;
+}
diff --git a/frontend/next.config.ts b/frontend/next.config.ts
index 28826a7..ca9fd82 100644
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -1,6 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+	turbopack: {},
 	webpack(config) {
 		// Ignore any .mjs test files in thread-stream
 		config.module.rules.push({
diff --git a/frontend/package.json b/frontend/package.json
index ca03c06..a7a2de1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build --webpack",
     "start": "next start",
     "lint": "eslint"