diff --git a/apps/oneclient/frontend/src/components/Navbar.tsx b/apps/oneclient/frontend/src/components/Navbar.tsx
index 505ad7a7..74913b2c 100644
--- a/apps/oneclient/frontend/src/components/Navbar.tsx
+++ b/apps/oneclient/frontend/src/components/Navbar.tsx
@@ -20,7 +20,7 @@ export function Navbar() {
 
 			<div className="flex flex-1 items-center justify-center pointer-events-none gap-6">
 				<NavbarLink to="/app">Home</NavbarLink>
-				<NavbarLink to="/app/test">Clusters</NavbarLink>
+				<NavbarLink to="/app/clusters">Clusters</NavbarLink>
 				<NavbarLink to="/">Accounts</NavbarLink>
 			</div>
 
diff --git a/apps/oneclient/frontend/src/routes/app/test.tsx b/apps/oneclient/frontend/src/routes/app/clusters/index.tsx
similarity index 54%
rename from apps/oneclient/frontend/src/routes/app/test.tsx
rename to apps/oneclient/frontend/src/routes/app/clusters/index.tsx
index 9f1b1495..08b49803 100644
--- a/apps/oneclient/frontend/src/routes/app/test.tsx
+++ b/apps/oneclient/frontend/src/routes/app/clusters/index.tsx
@@ -1,9 +1,9 @@
 import { createFileRoute } from '@tanstack/react-router';
 
-export const Route = createFileRoute('/app/test')({
+export const Route = createFileRoute('/app/clusters/')({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	return <div>Hello "/app/test"!</div>;
+	return <div>Hello "/app/clusters/"!</div>;
 }
diff --git a/apps/oneclient/frontend/src/routes/app/clusters/route.tsx b/apps/oneclient/frontend/src/routes/app/clusters/route.tsx
new file mode 100644
index 00000000..66b2e11f
--- /dev/null
+++ b/apps/oneclient/frontend/src/routes/app/clusters/route.tsx
@@ -0,0 +1,57 @@
+import { AnimatedOutlet, AnimatedOutletProvider } from '@onelauncher/common/components';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/app/clusters')({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return (
+		<div className="flex w-full h-full">
+			<BackgroundGradients />
+
+			<AnimatedOutletProvider>
+				<AnimatedOutlet
+					enter={{
+						initial: {
+							bottom: '-100%',
+							opacity: 0,
+						},
+						animate: {
+							bottom: 0,
+							opacity: 1,
+						},
+					}}
+					exit={{
+						initial: {
+							bottom: 0,
+							opacity: 1,
+						},
+						animate: {
+							bottom: '-100%',
+							opacity: 0,
+						},
+					}}
+					from={Route.id}
+				/>
+			</AnimatedOutletProvider>
+		</div>
+	);
+}
+
+function BackgroundGradients() {
+	return (
+		<div className="relative">
+			<div style={{
+				background: 'rgba(0, 0, 0, 0.80)',
+			}}
+			>
+			</div>
+			<div style={{
+				background: 'linear-gradient(180deg, rgba(17, 23, 28, 0.00) 0%, #11171C 60.1%)',
+			}}
+			>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/oneclient/frontend/src/routes/app/index.tsx b/apps/oneclient/frontend/src/routes/app/index.tsx
index bce289b7..6d36a199 100644
--- a/apps/oneclient/frontend/src/routes/app/index.tsx
+++ b/apps/oneclient/frontend/src/routes/app/index.tsx
@@ -15,36 +15,43 @@ export const Route = createFileRoute('/app/')({
 	component: RouteComponent,
 });
 
+const clusters = [
+	{
+		mc_version: '1.8.9',
+	},
+	undefined,
+	{
+		mc_version: '1.21.4',
+	},
+];
+
 function RouteComponent() {
-	const { data: clusters } = useCommandSuspense<Array<ClusterModel | undefined>>(
-		'getClusters',
-		async () => {
-			await new Promise(resolve => setTimeout(resolve, 3000)); // Simulate loading delay
-			return bindings.core.getClusters();
-		},
-		{
-			select: ((data: Array<ClusterModel>) => {
-				const sorted = data.sort((a, b) => {
-					if (a.last_played && b.last_played)
-						return new Date(b.last_played).getTime() - new Date(a.last_played).getTime();
-					else if (a.last_played)
-						return -1; // a has last_played, b does not
-					else if (b.last_played)
-						return 1; // b has last_played, a does not
+	// const { data: clusters } = useCommandSuspense<Array<ClusterModel | undefined>>(
+	// 	'getClusters',
+	// 	bindings.core.getClusters,
+	// 	{
+	// 		select: ((data: Array<ClusterModel>) => {
+	// 			const sorted = data.sort((a, b) => {
+	// 				if (a.last_played && b.last_played)
+	// 					return new Date(b.last_played).getTime() - new Date(a.last_played).getTime();
+	// 				else if (a.last_played)
+	// 					return -1; // a has last_played, b does not
+	// 				else if (b.last_played)
+	// 					return 1; // b has last_played, a does not
 
-					const aVersion = a.mc_version.replaceAll('.', '');
-					const bVersion = b.mc_version.replaceAll('.', '');
-					return Number.parseInt(bVersion) - Number.parseInt(aVersion);
-				});
+	// 				const aVersion = a.mc_version.replaceAll('.', '');
+	// 				const bVersion = b.mc_version.replaceAll('.', '');
+	// 				return Number.parseInt(bVersion) - Number.parseInt(aVersion);
+	// 			});
 
-				return [
-					sorted[0],
-					sorted[1],
-					undefined,
-				];
-			}) as (data: Array<ClusterModel | undefined>) => Array<ClusterModel | undefined>,
-		},
-	);
+	// 			return [
+	// 				sorted[0],
+	// 				sorted[1],
+	// 				undefined,
+	// 			];
+	// 		}) as (data: Array<ClusterModel | undefined>) => Array<ClusterModel | undefined>,
+	// 	},
+	// );
 
 	return (
 		<div className="flex h-full w-full flex-col justify-center">
diff --git a/apps/oneclient/frontend/src/routes/app/route.tsx b/apps/oneclient/frontend/src/routes/app/route.tsx
index e4cf6791..269c75ad 100644
--- a/apps/oneclient/frontend/src/routes/app/route.tsx
+++ b/apps/oneclient/frontend/src/routes/app/route.tsx
@@ -1,7 +1,7 @@
 import { LoaderSuspense, Navbar } from '@/components';
 import { GameBackground } from '@/components/GameBackground';
 import { AnimatedOutlet } from '@onelauncher/common/components';
-import { createFileRoute, Outlet } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/app')({
 	component: RouteComponent,
@@ -16,19 +16,18 @@ function RouteComponent() {
 				<Background />
 
 				<div className="h-full w-full pb-12">
-					{/* <AnimatedOutlet
+					<AnimatedOutlet
 						enter={{
-							initial: { opacity: 1, left: '-100%' },
-							animate: { opacity: 1, left: 0 },
+							initial: { opacity: 0 },
+							animate: { opacity: 1 },
 						}}
 						exit={{
-							initial: { opacity: 1, left: 0 },
-							animate: { opacity: 1, left: '150%' },
+							initial: { opacity: 1 },
+							animate: { opacity: 0 },
 						}}
 						from={Route.id}
 						transition={{ duration: 0.3, bounce: 0.1, power: 0.2, type: 'spring' }}
-					/> */}
-					<Outlet />
+					/>
 				</div>
 			</div>
 		</LoaderSuspense>
diff --git a/packages/web_common/src/theme.css b/packages/web_common/src/theme.css
index 74ee89cc..f0be6864 100644
--- a/packages/web_common/src/theme.css
+++ b/packages/web_common/src/theme.css
@@ -83,6 +83,7 @@
 * {
 	user-select: none !important;
 	-webkit-user-select: none !important;
+	-webkit-user-drag: none !important;
 	cursor: default !important;
 }