diff --git a/css/style.css b/css/style.css
index 36ff7c3..6fb7664 100644
--- a/css/style.css
+++ b/css/style.css
@@ -37,11 +37,36 @@ body{
 	color: #fff;
 }
 
-.form-radio{
-	margin-top: 0.5em;
+.tree-type{ grid-area: tree-type}
+
+.input-type{ grid-area: input-type}
+
+.change-button{grid-area: change-button}
+
+
+.grid-container {
+	display: grid;
+	grid-template-areas:
+	'tree-type tree-type change-button'
+	'input-type input-type change-button';
+	gap: 10px;
+	background-color: #98c1d5;
+	padding:0.5em 0.5em;
+	margin-top:0.5em;
+	margin-bottom: 0.5em;
+	margin-right: 0.5em;
+	border: 2px solid black;
+	border-radius: 3px;
 
 }
 
+.button-container {
+	grid-column: 2; /* Platziert die Button-Container in der zweiten Spalte */
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
 .form-animation{
 	display: flex;
 	align-items: flex-start;
@@ -112,11 +137,8 @@ button{
 	font-size: 25px;
 }
 
-#treeInputInsert {
-	padding:10px 15px;
-	background-color: #98c1d5;
-	border: 2px solid black;
-	border-radius: 3px;
+#changeType {
+	margin-left: 0; /* Reset left margin to align with the radio groups */
 }
 
 canvas {
diff --git a/index.html b/index.html
index efbce6a..68f85b4 100644
--- a/index.html
+++ b/index.html
@@ -1,87 +1,86 @@
 <!DOCTYPE html>
 <html lang="de">
-<head>
-    <meta charset="utf-8">
-    <title>B-Baum-Animation</title>
-    <link rel="stylesheet" href="css/style.css">
-</head>
-<body>
-<header class="main-header">
-    <span id="btreeInformation">
-        Eine Weiterentwicklung des B-Baum-Zeichners der TH Köln <br>
-        V.05-2022
-    </span>
-    <h1>B-Baum-Animation</h1>
-</header>
-<div class="form" id="firstRowInput">
-    <div>
-        <div class="form-inputs">
-            <button type="button" id="submitInsert">Zufälligen Wert Einfügen</button>
-            <button type="button" id="submitDelete">Zufälligen Wert Löschen</button>
-            <button type="button" id="animationPause">||</button>
-            <button type="button" id="submitUndo">Rückgängig</button>
-            <button type="button" id="submitReset">Baum löschen</button>
-            <button type="button" id="helpButton">Weitere Informationen</button>
+    <head>
+        <meta charset="utf-8">
+        <title>B-Baum-Animation</title>
+        <link rel="stylesheet" href="css/style.css">
+    </head>
+    <body>
+        <header class="main-header">
+            <span id="btreeInformation">
+                Eine Weiterentwicklung des B-Baum-Zeichners der TH Köln <br>
+                V.05-2022
+            </span>
+            <h1>B-Baum-Animation</h1>
+        </header>
+        <div class="form" id="firstRowInput">
+            <div>
+                <div class="form-inputs">
+                    <button type="button" id="submitInsert">Zufälligen Wert Einfügen</button>
+                    <button type="button" id="submitDelete">Zufälligen Wert Löschen</button>
+                    <button type="button" id="animationPause">||</button>
+                    <button type="button" id="submitUndo">Rückgängig</button>
+                    <button type="button" id="submitReset">Baum löschen</button>
+                    <button type="button" id="helpButton">Weitere Informationen</button>
+                </div>
+                    <form class="grid-container">
+                         <div class="tree-type">
+                            <label style="font-weight: bold">Typ des Baumes:</label>
+                            <input type="radio" id="treeType1" checked="checked" value="1" name="treeType">
+                            <label for="treeType1">1</label>
+                            <input type="radio" id="treeType2" value="2" name="treeType">
+                            <label for="treeType2">2</label>
+                            <input type="radio" id="treeType3" value="3" name="treeType">
+                            <label for="treeType3">3</label>
+                            <input type="radio" id="treeType4" value="4" name="treeType">
+                            <label for="treeType4">4</label>
+                            <input type="radio" id="treeType5" value="5" name="treeType">
+                            <label for="treeType5">5</label>
+                        </div>
+                        <div class="input-type">
+                            <label style="font-weight: bold">Eingabewerte:</label>
+                            <input type="radio" id="inputTypeNumbers" checked="checked" value="number" name="inputType">
+                            <label for="inputTypeNumbers">Zahlen</label>
+                            <input type="radio" id="inputTypeLetters" value="letter" name="inputType">
+                            <label for="inputTypeLetters">Buchstaben</label>
+                        </div>
+                        <div class="change-button">
+                            <button type="button" id="changeType">Ändern</button>
+                        </div>
+                    </form>
+            </div>
+            <div class="form-animation">
+                <div id="sliderDiv">
+                    <label id="animationsgeschwindigkeit" for="animationCheckbox">Animation: an</label>
+                    <input type="checkbox" class="checkbox" id="animationCheckbox" checked>
+                    <label for="animationsgeschwindigkeitslider"></label>
+                    <input class="slider" type="range" min="1" max="13" value="7" step="2" id="animationsgeschwindigkeitslider">
+                </div>
+            </div>
         </div>
-        <form class="form-radio">
-            <label for="treeInputInsert"></label>
-            <label style="font-weight: bold">Typ des Baumes:</label>
-            <input type="radio" id="treeType1" checked="checked" value="1" name="treeType">
-            <label for="treeType1">1</label>
-            <input type="radio" id="treeType2" value="2" name="treeType">
-            <label for="treeType2">2</label>
-            <input type="radio" id="treeType3" value="3" name="treeType">
-            <label for="treeType3">3</label>
-            <input type="radio" id="treeType4" value="4" name="treeType">
-            <label for="treeType4">4</label>
-            <input type="radio" id="treeType5" value="5" name="treeType">
-            <label for="treeType5">5</label><br>
-            <label style="font-weight: bold">Eingabewerte:</label>
-            <input type="radio" id="inputTypeNumbers" checked="checked" value="number" name="inputType">
-            <label for="inputTypeNumbers">Zahlen</label>
-            <input type="radio" id="inputTypeLetters" value="letter" name="inputType">
-            <label for="inputTypeLetters">Buchstaben</label>
-            <button type="button" id="changeType" style="margin-left: 10px">Ändern</button>
-        </form>
-    </div>
-    <div class="form-animation">
-
-        <div id="sliderDiv">
-
-                <input type="checkbox" class="checkbox" id="animationCheckbox" checked>
-                <label id="animationsgeschwindigkeit" for="animationCheckbox">Animation: an</label>
-
-                <input class="slider" type="range" min="1" max="13" value="7" step="2" id="animationsgeschwindigkeitslider">
-        </div>
-
-    </div>
-
-</div>
-
-<canvas id="canvaswindow"></canvas>
-<script src="js/btree.js"></script>
-<script src="js/canvas.js"></script>
-<table>
-    <tr><td>
-        <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
-            <img alt="Creative Commons License" style="border-width:0; height: 100px" src="logos/licence-logo.png" />
-        </a><br>
-        This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
-    </td>
-    <td>
-        <img src="logos/EILD-Logo.png" alt="EILD-Logo"/>
-    </td>
-    <td>
-        <img src="logos/eBusiness-Logo.png" alt="eBusiness-Logo" />
-    </td>
-    <td>
-        <img src="logos/HSD-Logo.jpeg" alt="HSD-Logo"/>
-    </td>
-    <td>
-        <img src="logos/DH-NRW-Logos.png" alt="DH-NRW-Logo" style="float:right" />
-    </td>
-    </tr>
-
-</table>
-</body>
-</html>
\ No newline at end of file
+        <canvas id="canvaswindow"></canvas>
+        <script src="js/btree.js"></script>
+        <script src="js/canvas.js"></script>
+        <table>
+            <tr><td>
+                <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
+                    <img alt="Creative Commons License" style="border-width:0; height: 100px" src="logos/licence-logo.png" />
+                </a><br>
+                This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
+            </td>
+            <td>
+                <img src="logos/EILD-Logo.png" alt="EILD-Logo"/>
+            </td>
+            <td>
+                <img src="logos/eBusiness-Logo.png" alt="eBusiness-Logo" />
+            </td>
+            <td>
+                <img src="logos/HSD-Logo.jpeg" alt="HSD-Logo"/>
+            </td>
+            <td>
+                <img src="logos/DH-NRW-Logos.png" alt="DH-NRW-Logo" style="float:right" />
+            </td>
+            </tr>
+        </table>
+    </body>
+</html>
