diff --git a/API/Services/GameManager/GameManager.cs b/API/Services/GameManager/GameManager.cs
index 168517e..291c4e3 100644
--- a/API/Services/GameManager/GameManager.cs
+++ b/API/Services/GameManager/GameManager.cs
@@ -66,7 +66,7 @@ public class GameManager(IGameRepository gameRepository, IHubContext<GameHubSock
         if (player == null)
             return;
 
-        if(game.CurrentTurn != player.PlayerTag) 
+        if(game.CurrentTurn != player.PlayerTag || game.State != GameState.Running) 
             return;
 
         if(game.State != GameState.Running) return;
diff --git a/GUI/src/components/CreateOrJoinMenu.vue b/GUI/src/components/CreateOrJoinMenu.vue
new file mode 100644
index 0000000..37e2fae
--- /dev/null
+++ b/GUI/src/components/CreateOrJoinMenu.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineEmits(['createGame', 'joinGame']);
+</script>
+
+<template>
+  <v-container class="d-flex align-center justify-center fill-height">
+    <v-sheet class="text-centered pa-2 w-50" rounded>
+      <h1 class="text-center mb-5">Wähle aus</h1>
+      <h3 class="text-center">
+        Entweder erstellst du ein neues Spiel, oder du trittst einem bestehenden Spiel bei
+      </h3>
+      <v-divider class="mb-5 mt-5"></v-divider>
+      <div class="d-flex align-center justify-space-evenly ma-4 w-100">
+        <v-btn color="red" @click="$router.push('/')" rounded="xl"> Abbrechen </v-btn>
+        <v-btn color="green" @click="$emit('createGame')" rounded="xl"> Erstellen </v-btn>
+        <v-btn color="primary" @click="$emit('joinGame')" rounded="xl"> Beitreten </v-btn>
+      </div>
+    </v-sheet>
+  </v-container>
+</template>
+
+<style scoped></style>
diff --git a/GUI/src/components/GameCreationMenu.vue b/GUI/src/components/GameCreationMenu.vue
index b3d9996..667d5c5 100644
--- a/GUI/src/components/GameCreationMenu.vue
+++ b/GUI/src/components/GameCreationMenu.vue
@@ -15,58 +15,57 @@ function gameFieldPreset(x: number, y: number) {
 </script>
 
 <template>
-  <v-sheet width="100%" class="text-centered pa-2 w-75" rounded>
-    <h1 class="text-center">Spiel Erstellen</h1>
-    <v-divider class="mb-4"></v-divider>
-    <v-row>
-      <v-col cols="12" md="6">
-        <h2 class="settingsCat">Spieler</h2>
-        <v-text-field
-          v-model="settingsProp.playerName1"
-          label="Name vom Spieler 1"
-          required
-        ></v-text-field>
-        <v-text-field v-if="settingsProp.playerName2 != null"
-          v-model="settingsProp.playerName2"
-          label="Name vom Spieler 2"
-          required
-        ></v-text-field>
-      </v-col>
-      <v-col cols="12" md="6">
-        <h2 class="settingsCat">Spielfeld</h2>
-        <v-chip-group>
-          <v-chip text="Klein" @click="gameFieldPreset(4, 5)"></v-chip>
-          <v-chip text="Standard" @click="gameFieldPreset(7, 6)"></v-chip>
-          <v-chip text="Groß" @click="gameFieldPreset(12, 10)"></v-chip>
-        </v-chip-group>
-        <Slider
-          v-model="settingsProp.fieldSize.x"
-          label="Breite"
-          :min="4"
-          :max="16"
-          :step="1"
-          :width="70"
-        />
+  <v-container class="d-flex align-center justify-center fill-height">
+    <v-sheet width="100%" class="text-centered pa-2 w-75" rounded>
+      <h1 class="text-center">Spiel Erstellen</h1>
+      <v-divider class="mb-4"></v-divider>
+      <v-row>
+        <v-col cols="12" md="6">
+          <h2 class="settingsCat">Spieler</h2>
+          <v-text-field
+            v-model="settingsProp.playerName1"
+            label="Name vom Spieler 1"
+            required
+          ></v-text-field>
+          <v-text-field
+            v-if="settingsProp.playerName2 != null"
+            v-model="settingsProp.playerName2"
+            label="Name vom Spieler 2"
+            required
+          ></v-text-field>
+        </v-col>
+        <v-col cols="12" md="6">
+          <h2 class="settingsCat">Spielfeld</h2>
+          <v-chip-group>
+            <v-chip text="Klein" @click="gameFieldPreset(4, 5)"></v-chip>
+            <v-chip text="Standard" @click="gameFieldPreset(7, 6)"></v-chip>
+            <v-chip text="Groß" @click="gameFieldPreset(12, 10)"></v-chip>
+          </v-chip-group>
+          <Slider
+            v-model="settingsProp.fieldSize.x"
+            label="Breite"
+            :min="4"
+            :max="16"
+            :step="1"
+            :width="70"
+          />
 
-        <Slider
-          v-model="settingsProp.fieldSize.y"
-          label="Höhe"
-          :min="4"
-          :max="16"
-          :step="1"
-          :width="70"
-        />
-      </v-col>
-    </v-row>
-    <div class="d-flex align-center justify-space-evenly ma-4 w-100">
-      <v-btn color="red" @click="$router.push('/')" rounded="xl">
-        Abbrechen
-      </v-btn>
-      <v-btn color="primary" @click="$emit('createGame')" rounded="xl">
-        Spiel Starten
-      </v-btn>
-    </div>
-  </v-sheet>
+          <Slider
+            v-model="settingsProp.fieldSize.y"
+            label="Höhe"
+            :min="4"
+            :max="16"
+            :step="1"
+            :width="70"
+          />
+        </v-col>
+      </v-row>
+      <div class="d-flex align-center justify-space-evenly ma-4 w-100">
+        <v-btn color="red" @click="$router.push('/')" rounded="xl"> Abbrechen </v-btn>
+        <v-btn color="primary" @click="$emit('createGame')" rounded="xl"> Spiel Starten </v-btn>
+      </div>
+    </v-sheet>
+  </v-container>
 </template>
 
 <style scoped>
diff --git a/GUI/src/components/GameEndedMenu.vue b/GUI/src/components/GameEndedMenu.vue
index 5d68136..f4d7486 100644
--- a/GUI/src/components/GameEndedMenu.vue
+++ b/GUI/src/components/GameEndedMenu.vue
@@ -1,43 +1,41 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { GameEnded } from '@/scripts/logic/signalR/GameConnection'
+import { computed } from 'vue';
+import type { GameEnded } from '@/scripts/logic/signalR/GameConnection';
 
-defineEmits(["restartGame"]);
+defineEmits(['restartGame']);
 
-const props = defineProps<{ gameEndedInformation: GameEnded | null }>()
+const props = defineProps<{ gameEndedInformation: GameEnded | null }>();
 
 const message = computed(() => {
-    switch (props.gameEndedInformation?.method) {
-        case "PlayerDisconnected":
-            return `Bei dem Spieler ${props.gameEndedInformation.player?.name} ist die Verbindung abgebrochen :(`
-        case "Draw":
-            return "Das Spielfeld ist voll und es ist ein Unentschieden"
-        case "Win":
-            return `${props.gameEndedInformation.player?.name} hat gewonnen!`
-        default:
-            return ""
-    }
-})
+  switch (props.gameEndedInformation?.method) {
+    case 'PlayerDisconnected':
+      return `Bei dem Spieler ${props.gameEndedInformation.player?.name} ist die Verbindung abgebrochen :(`;
+    case 'Draw':
+      return 'Das Spielfeld ist voll und es ist ein Unentschieden';
+    case 'Win':
+      return `${props.gameEndedInformation.player?.name} hat gewonnen!`;
+    default:
+      return '';
+  }
+});
 </script>
 
 <template>
+  <v-container class="d-flex align-center justify-center fill-height">
     <v-sheet class="text-centered pa-2 w-50" rounded>
-        <h1 class="text-center">{{ message}}</h1>
-        <h3 class="text-center">Spiele erneut oder beende das Spiel</h3>
-        <v-divider class="mb-4"></v-divider>
-        <div class="d-flex align-center justify-space-evenly ma-4 w-100">
-            <v-btn color="red" @click="$router.push('/')" rounded="xl">
-                Abbrechen
-            </v-btn>
-            <v-btn color="primary" @click="$emit('restartGame')" rounded="xl">
-                Spiel Neustarten
-            </v-btn>
-        </div>
+      <h1 class="text-center mb-5">{{ message }}</h1>
+      <h3 class="text-center">Spiele erneut oder beende das Spiel</h3>
+      <v-divider class="mb-5 mt-5"></v-divider>
+      <div class="d-flex align-center justify-space-evenly ma-4 w-100">
+        <v-btn color="red" @click="$router.push('/')" rounded="xl"> Abbrechen </v-btn>
+        <v-btn color="primary" @click="$emit('restartGame')" rounded="xl"> Spiel Neustarten </v-btn>
+      </div>
     </v-sheet>
+  </v-container>
 </template>
 
 <style scoped>
 .settingsCat {
-    margin-top: 5px;
+  margin-top: 5px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/GUI/src/routes/LocalMode.vue b/GUI/src/routes/LocalMode.vue
index f25d338..3b88874 100644
--- a/GUI/src/routes/LocalMode.vue
+++ b/GUI/src/routes/LocalMode.vue
@@ -49,22 +49,17 @@ async function restart() {
 </script>
 
 <template>
-  <v-container
-    class="d-flex align-center justify-center fill-height"
+  <GameCreationMenu
+    v-model:settings="settings"
+    @create-game="startGame()"
     v-if="currentState === CurrentState.CreatingGame"
-  >
-    <GameCreationMenu v-model:settings="settings" @create-game="startGame()" />
-  </v-container>
+  />
 
-  <v-container
-    class="d-flex align-center justify-center fill-height"
+  <GameEndedMenu
+    :game-ended-information="gameEndedInformation"
+    @restart-game="restart"
     v-else-if="currentState === CurrentState.EndScreen"
-  >
-    <GameEndedMenu
-      :game-ended-information="gameEndedInformation"
-      @restart-game="restart"
-    ></GameEndedMenu>
-  </v-container>
+  ></GameEndedMenu>
 
   <div id="game" v-else>
     <div class="game-content">
diff --git a/GUI/src/routes/OnlineMode.vue b/GUI/src/routes/OnlineMode.vue
index eec16c3..ebf3c6a 100644
--- a/GUI/src/routes/OnlineMode.vue
+++ b/GUI/src/routes/OnlineMode.vue
@@ -1,9 +1,37 @@
 <script setup lang="ts">
+import CreateOrJoinMenu from '@/components/CreateOrJoinMenu.vue';
+import type { GameSettings } from '@/scripts/interfaces/GameSettings';
+import { ref } from 'vue';
+
+enum CurrentState {
+  CreateOrJoinSelection,
+  CreatingGame,
+  JoiningGame,
+  WaitingForOpponent,
+  Game,
+  EndScreen,
+}
+
+let settings = ref<GameSettings>({
+  playerName1: 'Spieler 1',
+  fieldSize: { x: 7, y: 6 },
+});
+
+var currentState = ref<CurrentState>(CurrentState.CreateOrJoinSelection);
 </script>
 
 <template>
-    <h1>Online Modus</h1>
+  <CreateOrJoinMenu
+    v-if="currentState === CurrentState.CreateOrJoinSelection"
+    @createGame="currentState = CurrentState.CreatingGame"
+    @joinGame="currentState = CurrentState.JoiningGame"
+  />
+
+  <GameCreationMenu
+    v-model:settings="settings"
+    @create-game="console.log('create game')"
+    v-if="currentState === CurrentState.CreatingGame"
+  />
 </template>
 
-<style scoped>
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/GUI/src/scripts/logic/localMode/LocalGame.ts b/GUI/src/scripts/logic/localMode/LocalGame.ts
index 33a379c..6923333 100644
--- a/GUI/src/scripts/logic/localMode/LocalGame.ts
+++ b/GUI/src/scripts/logic/localMode/LocalGame.ts
@@ -8,7 +8,7 @@ import GameConnection, {
 class LocalGame {
   public player1: GameConnection;
   public player2: GameConnection;
-  public currentDescription: string = 'Warte auf Spielaufbau...';
+  public currentDescription: string = 'Warte auf Spielaufbau ...';
   private gameId: string = '';
 
   public gameState: GameInformationDto | undefined;
diff --git a/GUI/src/scripts/logic/onlineMode/OnlineGame.ts b/GUI/src/scripts/logic/onlineMode/OnlineGame.ts
new file mode 100644
index 0000000..8231f4e
--- /dev/null
+++ b/GUI/src/scripts/logic/onlineMode/OnlineGame.ts
@@ -0,0 +1,16 @@
+import type { GameSettings } from "@/scripts/interfaces/GameSettings";
+import GameConnection, { type GameEnded, type GameInformationDto } from "../signalR/GameConnection";
+
+class LocalGame {
+  public player: GameConnection;
+  public currentDescription: string = 'Warte auf Spielaufbau ...';
+  private gameId: string = '';
+
+  public gameState: GameInformationDto | undefined;
+  public onGameStateChanged?: (gameState: GameInformationDto | undefined) => void;
+  public onGameEnded?: (gameEndedInfo: GameEnded) => void;
+
+  constructor(settings: GameSettings) {
+    this.player = new GameConnection();
+  }
+}