diff --git a/app/locales/message-en.json b/app/locales/message-en.json
index d31d615..29a7e97 100644
--- a/app/locales/message-en.json
+++ b/app/locales/message-en.json
@@ -45,5 +45,28 @@
         "repo": "Forgejo Repository"
       }
     }
+  },
+  "setupWizard": {
+    "prompts": {
+      "platformQuestion": "What platform are you using?",
+      "hackedQuestion": "Is your Wii U hacked?"
+    },
+    "botName": "Spacebot:",
+    "platformStage": {
+      "titlePart1": "Select how you intend to connect to the ",
+      "titlePart2": "network",
+      "cemuTitle": "Cemu",
+      "cemuDesc": "Emulator",
+      "wiiuTitle": "Wii U",
+      "wiiuDesc": "Original Hardware"
+    },
+    "methodStage": {
+      "titlePart1": "Choose Connection ",
+      "titlePart2": "Method",
+      "ssslTitle": "SSSL",
+      "ssslDesc": "Hackless",
+      "aromaTitle": "Aroma",
+      "aromaDesc": "Hacked"
+    }
   }
 }
\ No newline at end of file
diff --git a/app/pages/docs/connect/index.vue b/app/pages/docs/connect/index.vue
new file mode 100644
index 0000000..2d0cccf
--- /dev/null
+++ b/app/pages/docs/connect/index.vue
@@ -0,0 +1,360 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const { t } = useLocale()
+
+const currentStage = ref<'bot1' | 'buttons' | 'bot2' | 'hackedOptions'>('bot1')
+const displayedText = ref('')
+const fullText1 = t.value.setupWizard?.prompts?.platformQuestion || ''
+const fullText2 = t.value.setupWizard?.prompts?.hackedQuestion || ''
+
+const runTypewriter = (text: string, callback: () => void) => {
+  displayedText.value = ''
+  let index = 0
+  const interval = setInterval(() => {
+    if (index < text.length) {
+      displayedText.value += text[index]
+      index++
+    } else {
+      clearInterval(interval)
+      setTimeout(callback, 1200)
+    }
+  }, 50)
+}
+
+onMounted(() => {
+  runTypewriter(fullText1, () => {
+    currentStage.value = 'buttons'
+  })
+})
+
+const selectPlatform = (platform: 'cemu' | 'wiiu') => {
+  if (platform === 'cemu') {
+    navigateTo('/docs/connect/cemu')
+  } else {
+    currentStage.value = 'bot2'
+    runTypewriter(fullText2, () => {
+      currentStage.value = 'hackedOptions'
+    })
+  }
+}
+
+const selectHackedMethod = (method: 'sssl' | 'aroma') => {
+  navigateTo(`/docs/connect/wiiu/${method}`)
+}
+</script>
+
+<template>
+  <div class="fullscreen-setup-container">
+    <Transition
+      name="fade"
+      mode="out-in"
+    >
+      <div
+        v-if="currentStage === 'bot1' || currentStage === 'bot2'"
+        class="intro-wrapper"
+      >
+        <div class="cli-row">
+          <div class="Spacebot-box">
+            <span class="eye">o</span>
+            <span class="nose">■</span>
+            <span class="eye">o</span>
+          </div>
+          <div class="speech-content">
+            <div class="bot-name">
+              {{ t.setupWizard?.botName }}
+            </div>
+            <p class="bot-text">
+              {{ displayedText }}<span class="cursor">▮</span>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else-if="currentStage === 'buttons'"
+        class="selection-wrapper"
+      >
+        <div class="text-wrapper text-center">
+          <h1 class="archivo-black title">
+            {{ t.setupWizard?.platformStage?.titlePart1 }}<span class="text-wiiu-blue">{{ t.setupWizard?.platformStage?.titlePart2 }}</span>.
+          </h1>
+        </div>
+
+        <div class="buttons-container">
+          <button
+            class="choice-card"
+            @click="selectPlatform('cemu')"
+          >
+            <span class="archivo-black card-title">{{ t.setupWizard?.platformStage?.cemuTitle }}</span>
+            <span class="card-desc">{{ t.setupWizard?.platformStage?.cemuDesc }}</span>
+          </button>
+
+          <button
+            class="choice-card active-card"
+            @click="selectPlatform('wiiu')"
+          >
+            <span class="archivo-black card-title text-wiiu-blue">{{ t.setupWizard?.platformStage?.wiiuTitle }}</span>
+            <span class="card-desc">{{ t.setupWizard?.platformStage?.wiiuDesc }}</span>
+          </button>
+        </div>
+      </div>
+
+      <div
+        v-else-if="currentStage === 'hackedOptions'"
+        class="selection-wrapper"
+      >
+        <div class="text-wrapper text-center">
+          <h1 class="archivo-black title">
+            {{ t.setupWizard?.methodStage?.titlePart1 }}<span class="text-wiiu-blue">{{ t.setupWizard?.methodStage?.titlePart2 }}</span>.
+          </h1>
+        </div>
+
+        <div class="buttons-container">
+          <button
+            class="choice-card"
+            @click="selectHackedMethod('sssl')"
+          >
+            <span class="archivo-black card-title">{{ t.setupWizard?.methodStage?.ssslTitle }}</span>
+            <span class="card-desc">{{ t.setupWizard?.methodStage?.ssslDesc }}</span>
+          </button>
+
+          <button
+            class="choice-card active-card"
+            @click="selectHackedMethod('aroma')"
+          >
+            <span class="archivo-black card-title text-wiiu-blue">{{ t.setupWizard?.methodStage?.aromaTitle }}</span>
+            <span class="card-desc">{{ t.setupWizard?.methodStage?.aromaDesc }}</span>
+          </button>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
+
+.archivo-black {
+  font-family: "Archivo Black", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.text-wiiu-blue {
+  color: #00aeef;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.fullscreen-setup-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  min-height: 100dvh;
+  width: 100vw;
+  background-color: #1d1e1f;
+  color: #ffffff;
+  overflow-y: auto;
+  padding: 1.5rem;
+  box-sizing: border-box;
+}
+
+.intro-wrapper {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  width: 100%;
+  max-width: 600px;
+}
+
+.cli-row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 1.5rem;
+}
+
+.Spacebot-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 2.5px solid rgba(255, 255, 255, 0.85);
+  border-radius: 10px;
+  width: 80px;
+  height: 56px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.Spacebot-box .eye {
+  font-size: 1.25rem;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1;
+}
+
+.Spacebot-box .nose {
+  font-size: 1rem;
+  color: #00aeef;
+  line-height: 1;
+}
+
+.speech-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bot-name {
+  color: #4df0ff;
+  font-weight: 700;
+  font-size: 1.35rem;
+  margin-bottom: 0.25rem;
+}
+
+.bot-text {
+  font-size: 1.25rem;
+  color: #e2e8f0;
+  margin: 0;
+  word-break: break-word;
+}
+
+.cursor {
+  color: #4df0ff;
+  margin-left: 4px;
+  animation: blink 0.7s infinite;
+}
+
+.selection-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 1000px;
+}
+
+.title {
+  font-size: 2.25rem;
+  line-height: 1.2;
+  margin-bottom: 1.5rem;
+  letter-spacing: -0.02em;
+}
+
+.subtext {
+  font-size: 1rem;
+  line-height: 1.5;
+  opacity: 0.85;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.buttons-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  width: 100%;
+}
+
+.choice-card {
+  background: rgba(38, 38, 44, 0.7);
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  border-radius: 1rem;
+  padding: 1.75rem 1.25rem;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.choice-card:active {
+  transform: scale(0.98);
+}
+
+.active-card {
+  border-color: #00aeef;
+}
+
+.card-title {
+  font-size: 1.85rem;
+  color: #ffffff;
+}
+
+.card-desc {
+  font-size: 0.95rem;
+  opacity: 0.6;
+  text-align: center;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.35s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@media (min-width: 768px) {
+  .cli-row {
+    flex-direction: row;
+    text-align: left;
+    gap: 2rem;
+  }
+
+  .speech-content {
+    align-items: flex-start;
+  }
+
+  .Spacebot-box {
+    width: 90px;
+    height: 64px;
+  }
+
+  .Spacebot-box .eye { font-size: 1.5rem; }
+  .Spacebot-box .nose { font-size: 1.15rem; }
+  .bot-name { font-size: 1.75rem; }
+  .bot-text { font-size: 1.75rem; white-space: nowrap; }
+
+  .title {
+    font-size: 4rem;
+  }
+
+  .buttons-container {
+    flex-direction: row;
+    width: 85%;
+    gap: 2rem;
+  }
+
+  .choice-card {
+    padding: 2.5rem;
+    flex: 1;
+  }
+
+  .choice-card:hover {
+    transform: translateY(-4px);
+    border-color: rgba(255, 255, 255, 0.3);
+    background: rgba(45, 45, 52, 0.9);
+  }
+
+  .active-card:hover {
+    border-color: #33c4ff;
+  }
+
+  .card-title { font-size: 2.5rem; }
+  .card-desc { font-size: 1rem; }
+}
+</style>