diff --git a/apps/onelauncher/frontend/src/components/base/Button.tsx b/apps/onelauncher/frontend/src/components/base/Button.tsx
index 45c0de83..3dc34d8e 100644
--- a/apps/onelauncher/frontend/src/components/base/Button.tsx
+++ b/apps/onelauncher/frontend/src/components/base/Button.tsx
@@ -41,6 +41,7 @@ export type ButtonProps = AriaButtonProps & RefAttributes<HTMLButtonElement> & {
 	color?: ButtonVariants['color'];
 	size?: ButtonVariants['size'];
 	className?: string;
+	isDisabled?: boolean;
 };
 
 function Button({
@@ -52,6 +53,7 @@ function Button({
 	return (
 		<AriaButton
 			className={buttonVariants({ color, size, className })}
+			isDisabled={props.isDisabled}
 			{...props}
 		/>
 	);
diff --git a/apps/onelauncher/frontend/src/routes/onboarding/index.tsx b/apps/onelauncher/frontend/src/routes/onboarding/index.tsx
new file mode 100644
index 00000000..baed4aff
--- /dev/null
+++ b/apps/onelauncher/frontend/src/routes/onboarding/index.tsx
@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/onboarding/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div className="grid grid-cols-2 h-full w-full flex-col items-center justify-center gap-x-16">
+      <h1 className="text-6xl">
+        Welcome to
+        {' '}
+        <span className="underline underline-8 underline-brand">OneLauncher</span>
+      </h1>
+
+      <h3>A powerful yet easy to use launcher for Minecraft.</h3>
+    </div>
+  )
+}
diff --git a/apps/onelauncher/frontend/src/routes/onboarding/route.tsx b/apps/onelauncher/frontend/src/routes/onboarding/route.tsx
new file mode 100644
index 00000000..67e71de1
--- /dev/null
+++ b/apps/onelauncher/frontend/src/routes/onboarding/route.tsx
@@ -0,0 +1,62 @@
+import Button from '@/components/base/Button'
+import { createFileRoute, Outlet, useNavigate, useRouterState } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/onboarding')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const navigate = useNavigate()
+  const routerState = useRouterState()
+  
+  const steps = [
+    '/onboarding/',
+  ]
+  
+  const currentPath = routerState.location.pathname
+  const currentStepIndex = steps.findIndex(path => currentPath === path || currentPath.startsWith(path))
+  
+  const progressPercentage = steps.length > 1 
+    ? ((currentStepIndex + 1) / steps.length) * 100 
+    : (currentStepIndex === 0 ? 100 : 0)
+  
+  const handleBack = () => {
+    if (currentStepIndex > 0) {
+      navigate({ to: steps[currentStepIndex - 1] })
+    }
+  }
+  
+  const handleNext = () => {
+    if (currentStepIndex < steps.length - 1) {
+      navigate({ to: steps[currentStepIndex + 1] })
+    } else {
+      // if completed navigate to main
+      navigate({ to: '/app' })
+    }
+  }
+  
+  return (
+    // remind me 2 hours! i'll fix this
+    <div className="w-full flex flex-col items-center h-screen">
+      <div className="h-0.5 w-full">
+        <div
+          className="h-full rounded-lg bg-brand transition-all"
+          style={{
+            width: `${progressPercentage}%`,
+          }}
+        />
+      </div>
+
+      <div className="flex-1 max-w-280 w-full flex flex-col gap-y-4 p-8">
+        <Outlet />
+      </div>
+
+      <div className="w-full max-w-280 p-8">
+        <div className="w-1/3 flex flex-row items-stretch gap-x-8 [&>*]:w-full ml-auto">
+          <Button onClick={handleBack} isDisabled={currentStepIndex === 0}>Back</Button>
+          <Button onClick={handleNext}>{currentStepIndex === steps.length - 1 ? 'Finish' : 'Next'}</Button>
+        </div>
+      </div>
+    </div>
+  )
+}