diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 29badfe..f06e9c9 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -1,28 +1,27 @@
 <script lang="ts">
-	import type { PageData } from './$types';
-	import { notifications } from '$lib/components/toasts/notifications';
-	import Visualization from '$lib/components/Visualization.svelte';
+  import { goto } from '$app/navigation'
+  import Visualization from '$lib/components/Visualization.svelte'
+  import { socket } from '$lib/stores'
+  import { onMount } from 'svelte'
 
-	interface Props {
-		data: PageData;
-	}
-
-	let { data }: Props = $props();
+  onMount(() => {
+    socket.subscribe(isConnected => {
+      if (isConnected) {
+        goto('/controller')
+      }
+    })
+  })
 </script>
 
 <div class="hero bg-base-100 h-screen">
-	<div class="card md:card-side bg-base-200 shadow-2xl flex justify-center items-center">
-        <div class="w-64 h-64">
-            <Visualization sky={false} orbit panel={false} ground={false}/>
-        </div>
-		<div class="card-body w-80">
-			<h2 class="card-title text-center text-2xl">Welcome to {data.app_name}</h2>
-			<p class="py-6 text-center"></p>
-			<a
-				class="btn btn-primary"
-				href="/controller"
-				onclick={() => notifications.success('You did it!', 1000)}>Begin</a
-			>
-		</div>
-	</div>
+  <div class="card md:card-side bg-base-200 shadow-2xl flex justify-center items-center">
+    <div class="w-64 h-64">
+      <Visualization sky={false} orbit panel={false} ground={false} />
+    </div>
+    <div class="card-body w-80">
+      <h2 class="card-title text-center text-2xl">Begin you journey</h2>
+      <p class="py-6 text-center"></p>
+      <a class="btn btn-primary" href={$socket ? '/controller' : '/connection'}> Add Robot Dog </a>
+    </div>
+  </div>
 </div>