diff --git a/src/main/java/de/hdm_stuttgart/battlearena/Controller/ButtonTransitionScale.java b/src/main/java/de/hdm_stuttgart/battlearena/Controller/ButtonTransitionScale.java
deleted file mode 100644
index 69488707186e2c7b78296c2f28dac52742dd6269..0000000000000000000000000000000000000000
--- a/src/main/java/de/hdm_stuttgart/battlearena/Controller/ButtonTransitionScale.java
+++ /dev/null
@@ -1,27 +0,0 @@
-package de.hdm_stuttgart.battlearena.Controller;
-
-import javafx.animation.ScaleTransition;
-import javafx.scene.control.Button;
-import javafx.scene.control.skin.ButtonSkin;
-import javafx.util.Duration;
-
-public class ButtonTransitionScale extends ButtonSkin {
-    public ButtonTransitionScale(Button button) {
-        super(button);
-//        set transition for mouse hovering over button
-        final ScaleTransition fadeIn = new ScaleTransition(Duration.millis(150));
-        fadeIn.setNode(button);
-        fadeIn.setByX(0.1);
-        fadeIn.setByY(0.1);
-        button.setOnMouseEntered(e -> fadeIn.playFromStart());
-
-//        set transition for mouse exiting buttonButtonTransitionScale
-        final ScaleTransition fadeOut = new ScaleTransition(Duration.millis(150));
-        fadeOut.setNode(button);
-        fadeOut.setByX(-0.1);
-        fadeOut.setByY(-0.1);
-        button.setOnMouseExited(e -> fadeOut.playFromStart());
-
-        button.setScaleX(1.0);
-    }
-}
diff --git a/src/main/java/de/hdm_stuttgart/battlearena/Controller/LocalCreateController.java b/src/main/java/de/hdm_stuttgart/battlearena/Controller/LocalCreateController.java
index 22fbd1dfd5492e14dd1cdca722428791d22bd8ee..12f6d654caa5d116dbb0d6be8fcf8b03d25747f8 100644
--- a/src/main/java/de/hdm_stuttgart/battlearena/Controller/LocalCreateController.java
+++ b/src/main/java/de/hdm_stuttgart/battlearena/Controller/LocalCreateController.java
@@ -1,8 +1,12 @@
 package de.hdm_stuttgart.battlearena.Controller;
 
 import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
 import javafx.scene.layout.VBox;
 
+import java.io.IOException;
+import java.util.Objects;
+
 public class LocalCreateController {
     @FXML public VBox parent;
     private final SceneLoader sceneLoader = new SceneLoader();
@@ -11,4 +15,9 @@ public class LocalCreateController {
         parent.getChildren().clear();
         parent.getChildren().add(sceneLoader.loadScene("Play"));
     }
+
+    public void skinSelectionScene() {
+        parent.getChildren().clear();
+        parent.getChildren().add(sceneLoader.loadScene("SkinSelection"));
+    }
 }
diff --git a/src/main/java/de/hdm_stuttgart/battlearena/Controller/SkinSelectionController.java b/src/main/java/de/hdm_stuttgart/battlearena/Controller/SkinSelectionController.java
new file mode 100644
index 0000000000000000000000000000000000000000..531d6229fdfc5b15342a14f662977cecff1d4f2e
--- /dev/null
+++ b/src/main/java/de/hdm_stuttgart/battlearena/Controller/SkinSelectionController.java
@@ -0,0 +1,44 @@
+package de.hdm_stuttgart.battlearena.Controller;
+
+import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
+import javafx.fxml.Initializable;
+import javafx.scene.control.ToggleButton;
+import javafx.scene.control.ToggleGroup;
+import javafx.scene.layout.VBox;
+
+import java.io.IOException;
+import java.net.URL;
+import java.util.Objects;
+import java.util.ResourceBundle;
+
+public class SkinSelectionController implements Initializable {
+    @FXML public VBox parent;
+    @FXML public ToggleGroup selectionButton;
+
+    @Override
+    public void initialize(URL url, ResourceBundle resourceBundle) {
+        selectionButton.selectedToggleProperty().addListener((observableValue, oldToggle, newToggle) -> {
+            if (selectionButton.getSelectedToggle() != null) {
+                ToggleButton selected = (ToggleButton) selectionButton.getSelectedToggle();
+                String value = selected.getText();
+                System.out.println(value);
+            }
+        });
+
+    }
+
+    public void gameScene() {
+        try {
+            MusicPlayerSingleton.getInstance().getMediaPlayer().dispose();
+            parent.getScene().setRoot(FXMLLoader.load(Objects.requireNonNull(getClass().getResource("/fxml/GameScene.fxml"))));
+        } catch (IOException e) {
+            throw new RuntimeException();
+        }
+    }
+
+    public void back() {
+        parent.getChildren().clear();
+        parent.getChildren().add(new SceneLoader().loadScene("LocalCreate"));
+    }
+}
diff --git a/src/main/java/de/hdm_stuttgart/battlearena/Controller/ToggleButtonTransition.java b/src/main/java/de/hdm_stuttgart/battlearena/Controller/ToggleButtonTransition.java
new file mode 100644
index 0000000000000000000000000000000000000000..3755975898a8e6a12760d08ac0d15fcf7d258c8f
--- /dev/null
+++ b/src/main/java/de/hdm_stuttgart/battlearena/Controller/ToggleButtonTransition.java
@@ -0,0 +1,43 @@
+package de.hdm_stuttgart.battlearena.Controller;
+
+import javafx.animation.FadeTransition;
+import javafx.scene.control.ToggleButton;
+import javafx.scene.control.skin.ToggleButtonSkin;
+import javafx.util.Duration;
+
+public class ToggleButtonTransition extends ToggleButtonSkin {
+    private final FadeTransition fadeIn;
+    private final FadeTransition fadeOut;
+
+    public ToggleButtonTransition(ToggleButton toggleButton) {
+        super(toggleButton);
+
+        fadeIn = new FadeTransition(Duration.millis(150));
+        fadeIn.setNode(toggleButton);
+        fadeIn.setToValue(1);
+
+        fadeOut = new FadeTransition(Duration.millis(150));
+        fadeOut.setNode(toggleButton);
+        fadeOut.setToValue(0.5);
+
+//        toggleButton.setOnMouseEntered(e -> fadeIn.playFromStart());
+//        toggleButton.setOnMouseExited(e -> fadeOut.playFromStart());
+        toggleButton.selectedProperty().addListener((observable, oldValue, newValue) -> {
+            if (newValue) {
+                fadeIn.playFromStart();
+                fadeOut.setToValue(0.5); // Set fadeOut back to the default value
+            } else {
+                fadeOut.playFromStart();
+                toggleButton.setOpacity(0.5);
+            }
+        });
+
+        // Set the initial opacity based on the initial selected state
+        toggleButton.setOpacity(toggleButton.isSelected() ? 1.0 : 0.5);
+    }
+}
+
+
+
+
+
diff --git a/src/main/resources/fxml/LocalCreate.fxml b/src/main/resources/fxml/LocalCreate.fxml
index f17002a13fbdf10adfd5d59e4621b0f7825c0c89..46cca9f8e1e83c60b4a7c8cbc9753d9083bee1a0 100644
--- a/src/main/resources/fxml/LocalCreate.fxml
+++ b/src/main/resources/fxml/LocalCreate.fxml
@@ -90,7 +90,7 @@
             <RadioButton mnemonicParsing="false" selected="true" text="No" toggleGroup="$group3" />
          </children>
       </HBox>
-      <Button mnemonicParsing="false" text="Start" />
+      <Button mnemonicParsing="false" onAction="#skinSelectionScene" text="Start" />
       <Button mnemonicParsing="false" onAction="#playScene" text="Back">
          <VBox.margin>
             <Insets bottom="50.0" />
diff --git a/src/main/resources/fxml/SkinSelection.fxml b/src/main/resources/fxml/SkinSelection.fxml
new file mode 100644
index 0000000000000000000000000000000000000000..97773771860f208bdfa49f51c5219c0e89e16ef3
--- /dev/null
+++ b/src/main/resources/fxml/SkinSelection.fxml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.ToggleButton?>
+<?import javafx.scene.control.ToggleGroup?>
+<?import javafx.scene.image.Image?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.VBox?>
+
+<VBox fx:id="parent" alignment="CENTER" prefHeight="400.0" prefWidth="600.0" spacing="20.0" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.hdm_stuttgart.battlearena.Controller.SkinSelectionController">
+   <children>
+      <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="40.0">
+         <children>
+            <ToggleButton contentDisplay="TOP" mnemonicParsing="false" text="Elias">
+               <graphic>
+                  <ImageView fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
+                     <image>
+                        <Image url="@../textures/images/elias.png" />
+                     </image>
+                  </ImageView>
+               </graphic>
+               <toggleGroup>
+                  <ToggleGroup fx:id="selectionButton" />
+               </toggleGroup>
+            </ToggleButton>
+            <ToggleButton contentDisplay="TOP" mnemonicParsing="false" text="Erzan" toggleGroup="$selectionButton">
+               <graphic>
+                  <ImageView fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
+                     <image>
+                        <Image url="@../textures/images/erzan.png" />
+                     </image>
+                  </ImageView>
+               </graphic>
+            </ToggleButton>
+            <ToggleButton contentDisplay="TOP" mnemonicParsing="false" text="Martin" toggleGroup="$selectionButton">
+               <graphic>
+                  <ImageView fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
+                     <image>
+                        <Image url="@../textures/images/martin.png" />
+                     </image>
+                  </ImageView>
+               </graphic>
+            </ToggleButton>
+         </children>
+      </HBox>
+      <Button mnemonicParsing="false" onAction="#gameScene" text="Start" />
+      <Button mnemonicParsing="false" onAction="#back" text="Back" />
+   </children>
+</VBox>
diff --git a/src/main/resources/styles/style.css b/src/main/resources/styles/style.css
index 4841857be68584111ca0e31c4d4b02f1dbd1eb9d..68bfa9b829e650c85248259b0406292b19a3a120 100644
--- a/src/main/resources/styles/style.css
+++ b/src/main/resources/styles/style.css
@@ -15,6 +15,11 @@
     -fx-background-size: cover;
 }
 
+#gameScene {
+    -fx-background-image: url("../textures/images/testBackground.png");
+    -fx-background-size: cover;
+}
+
 #gameTitle {
     -fx-font-size: 100;
 }
@@ -22,7 +27,7 @@
 .button {
     -fx-text-fill: -fx-brown;
     -fx-background-color: none;
-    -fx-skin: "de.hdm_stuttgart.battlearena.Controller.ButtonTransitionScale"
+    -fx-skin: "de.hdm_stuttgart.battlearena.Controller.ButtonTransition";
 }
 
 .accordion {
@@ -58,3 +63,8 @@
     -fx-pref-width: 0.4em;
     -fx-background-color: -fx-brown;
 }
+
+.toggle-button {
+    -fx-skin: "de.hdm_stuttgart.battlearena.Controller.ToggleButtonTransition";
+    -fx-background-color: none;
+}
diff --git a/src/main/resources/textures/images/elias.png b/src/main/resources/textures/images/elias.png
new file mode 100644
index 0000000000000000000000000000000000000000..92a45fea76f21bc5eadeef287d5126c8a1278ef7
Binary files /dev/null and b/src/main/resources/textures/images/elias.png differ
diff --git a/src/main/resources/textures/images/erzan.png b/src/main/resources/textures/images/erzan.png
new file mode 100644
index 0000000000000000000000000000000000000000..2101d8665fa6cfe21d1eb1d94a4da796034f71c9
Binary files /dev/null and b/src/main/resources/textures/images/erzan.png differ
diff --git a/src/main/resources/textures/images/martin.png b/src/main/resources/textures/images/martin.png
new file mode 100644
index 0000000000000000000000000000000000000000..fdaa4de0ea064ae8da30cc1a1e97799db9cb20aa
Binary files /dev/null and b/src/main/resources/textures/images/martin.png differ