diff --git a/src/pages/index.vue b/src/pages/index.vue
index 70a2e1c..7b28590 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -11,6 +11,25 @@
       @click="createGame">
       Create Game
     </v-btn>
+    <v-sheet class="mt-6 d-flex justify-center" color="transparent" height="3.5rem">
+      <v-text-field
+        v-model="lobbyId"
+        placeholder="Lobby ID"
+        rounded
+        style="margin-right: 1rem; height: 3.5rem"
+        variant="outlined"
+        width="9rem" />
+      <v-btn
+        :disabled="!lobbyId"
+        color="yellow"
+        height="3.5rem"
+        rounded
+        variant="tonal"
+        width="10rem"
+        @click="joinGame">
+        Join Game
+      </v-btn>
+    </v-sheet>
   </v-sheet>
 </template>
 
@@ -18,13 +37,23 @@
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
+const lobbyId = ref('')
 
 const createGame = () => {
-  // Request to Server for new Game Lobby ID
+  // TODO Request to Server for new Game Lobby ID
   // This also starts a WebSocket and redirects to /create/[id]
   const id = 0xffffff
   router.push(`/create/${id}`)
 }
+
+const joinGame = () => {
+  // TODO Check if lobby exists
+  // if exists redirect to lobby
+  // if not, show info
+  if (lobbyId.value) {
+    router.push(`/create/${lobbyId.value}`)
+  }
+}
 </script>
 
 <style lang="scss" scoped>