diff --git a/src/App.vue b/src/App.vue
index ef402a4..a63bb36 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,14 +12,22 @@
 					className="absolute -bottom-8 left-20 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"
 					:style="{ backgroundColor: '#71BEDB' }"></div>
 			</div>
-			<Header />
-			<Hero />
+			<Header @onStart="handleNavigateAuth" />
+			<Hero @onStart="handleNavigateAuth" />
 		</div>
 	</div>
 </template>
-<script setup>
+<script setup lang="ts">
 import Header from './components/Header.vue';
 import Hero from './components/Hero.vue';
+
+const handleNavigateAuth = () => {
+	if ((window as any)?.shellNavigate) {
+		(window as any).shellNavigate("/auth");
+		return;
+	}
+}
+
 </script>
 <style>
 @import "tailwindcss";
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 0fccbaf..f6c7cfd 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -15,7 +15,7 @@
 					class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-0 text-slate-900 bg-primary text-primary-foreground hover:bg-primary/90 h-8 gap-1 px-3 has-[>svg]:px-3"
 					:style="{
 						background: 'linear-gradient(120deg, #71bedb 30%, #f4f468)', boxShadow: '0 0 20px rgba(113, 190, 219, 0.5)'
-					}">
+					}" @click="$emit('onStart')">
 					<User class="w-4 h-4 mr-2" />
 					Começar Agora
 				</Button>
@@ -25,4 +25,7 @@
 </template>
 <script setup>
 import { Play, User } from 'lucide-vue-next';
+
+const emit = defineEmits(['onStart']);
+
 </script>
\ No newline at end of file
diff --git a/src/components/Hero.vue b/src/components/Hero.vue
index 45792ff..20cf4e7 100644
--- a/src/components/Hero.vue
+++ b/src/components/Hero.vue
@@ -34,7 +34,7 @@
 					class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive relative border-0 text-lg px-8 py-3 text-slate-900 bg-primary text-primary-foreground hover:bg-primary/90"
 					:style="{
 						background: 'linear-gradient(120deg, #71bedb 30%, #f4f468)', boxShadow: '0 0 30px rgba(113, 190, 219, 0.6)',
-					}">
+					}" @click="emit('onStart')">
 					<Play class="w-5 h-5 mr-2 fill-current" />
 					Começar a Assistir
 				</button>
@@ -80,4 +80,6 @@
 <script setup lang="ts">
 import { Play, Sparkles } from 'lucide-vue-next';
 
+const emit = defineEmits(['onStart']);
+
 </script>
\ No newline at end of file