diff --git a/leaky-ships/pages/dev/index.tsx b/leaky-ships/pages/dev/index.tsx
index f06d805..f2fc778 100644
--- a/leaky-ships/pages/dev/index.tsx
+++ b/leaky-ships/pages/dev/index.tsx
@@ -1,4 +1,5 @@
-import { faCompass } from '@fortawesome/pro-solid-svg-icons'
+import { faPlus, faUserPlus } from '@fortawesome/pro-solid-svg-icons'
+import { faEye, faLeftLong } from '@fortawesome/pro-regular-svg-icons'
 import { faCirclePlay } from '@fortawesome/pro-thin-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState } from 'react'
@@ -8,32 +9,41 @@ export default function Home() {
     return (
         <div id='box'>
             <button id='navExpand'>
-                <FontAwesomeIcon icon={faCompass} />
+                <img src='/assets/burger-menu.png' alt='Burger Menu' />
             </button>
-            <div className='flex-row'>
-                <div id='shield'>
-                    <div id='width'>
-                        <h1>Leaky</h1>
-                        <h1>Ships</h1>
-                    </div>
+            <div id='shield'>
+                <div id='width'>
+                    <h1>Leaky</h1>
+                    <h1>Ships</h1>
                 </div>
             </div>
-            <div className='beforeStartBox'>
-                {!heWantsToPlay ?
-                    <>
-                        <div id='videoWrapper'>
-                            <FontAwesomeIcon icon={faCirclePlay} />
-                        </div>
-                        <button id='startButton' onClick={() => setHeWantsToPlay(true)}>START</button>
-                    </> :
-                    <div id='startBox'>
-                        <div>
-                            <button className='optionButton'>Raum erstellen</button>
-                            <button className='optionButton'>Raum beitreten</button>
-                            <button className='optionButton'>Zuschauen</button>
-                        </div>
-                    </div>}
-            </div>
+            {!heWantsToPlay ?
+                <>
+                    <div id='videoWrapper' >
+                        <FontAwesomeIcon icon={faCirclePlay} />
+                    </div>
+                    <button id='startButton' onClick={() => setHeWantsToPlay(true)}>START</button>
+                </> :
+                <div id='startBox'>
+                    <button id='back' onClick={() => setHeWantsToPlay(false)}>
+                        <FontAwesomeIcon icon={faLeftLong} />
+                    </button>
+                    <div>
+                        <button className='optionButton'>
+                            Raum erstellen
+                            <FontAwesomeIcon icon={faPlus} />
+                        </button>
+                        <button className='optionButton'>
+                            Raum beitreten
+                            <FontAwesomeIcon icon={faUserPlus} />
+                        </button>
+                        <button className='optionButton'>
+                            Zuschauen
+                            <FontAwesomeIcon icon={faEye} />
+                        </button>
+                    </div>
+                </div>}
+            {/* </div> */}
         </div >
     )
 }
diff --git a/leaky-ships/styles/App.scss b/leaky-ships/styles/App.scss
index f16d035..82a730e 100644
--- a/leaky-ships/styles/App.scss
+++ b/leaky-ships/styles/App.scss
@@ -12,6 +12,7 @@ body {
 * {
   padding: 0;
   margin: 0;
+  box-sizing: border-box;
 }
 
 .App {
diff --git a/leaky-ships/styles/homepage.scss b/leaky-ships/styles/homepage.scss
index ea23ed5..81a5c18 100644
--- a/leaky-ships/styles/homepage.scss
+++ b/leaky-ships/styles/homepage.scss
@@ -1,196 +1,225 @@
 @use './mixins/display' as *;
+@use './mixins/effects' as *;
 @use './mixins/CP_Font' as *;
+@import './mixins/variables';
+
+
+@import url('https://fonts.googleapis.com/css2?family=Farro:wght@300;400;500;700&display=swap');
 
 #box {
-    border: 2px solid black;
     min-height: 100vh;
     background-color: #282c34;
+    @include flex-col;
+    align-items: center;
+    justify-content: space-around;
 
     #navExpand {
+        @include flex;
+        align-items: center;
+        justify-content: center;
         position: absolute;
         top: 64px;
         left: 64px;
         width: 96px;
         height: 96px;
-        background-color: black;
+        background-color: $grayish;
         border-radius: 8px;
-        border: none;
+        box-shadow: 0 0 2px 2px #0008 inset;
 
-        svg {
-            height: 50%;
-            width: 50%;
-            color: white;
+        img {
+            height: 80%;
+            width: 80%;
         }
     }
 
-    .flex-row {
+    #shield {
         @include flex-row;
         justify-content: center;
+        height: 250px;
+        width: 700px;
+        background-image: url("/assets/shield.png");
+        background-repeat: no-repeat;
+        background-size: contain;
 
-        #shield {
-            @include flex-row;
-            justify-content: center;
-            height: 250px;
-            width: 700px;
-            margin: 5%;
-            background-image: url("/assets/shield.png");
-            background-repeat: no-repeat;
-            background-size: contain;
+        #width {
+            @include flex-col;
+            justify-content: space-between;
+
+            h1 {
+                @include CP_Font;
+                margin: 3%;
+                width: 100%;
+                text-align: center;
+                font-size: 5.8em;
+                letter-spacing: 6px;
+
+                &:first-child {
+                    border-top: 5px solid black;
+                }
+
+                &:last-child {
+                    border-bottom: 5px solid black;
+                }
+            }
+        }
+
+        @media (max-width: 2000px) {
+            height: 200px;
+            width: 560px;
 
             #width {
-                @include flex-col;
-                justify-content: space-between;
 
                 h1 {
-                    @include CP_Font;
-                    margin: 3%;
-                    width: 100%;
-                    text-align: center;
-                    font-size: 5.8em;
-                    letter-spacing: 6px;
+                    font-size: 4.5em;
+                    letter-spacing: 4px;
 
                     &:first-child {
-                        border-top: 5px solid black;
+                        border-top: 4px solid black;
                     }
 
                     &:last-child {
-                        border-bottom: 5px solid black;
+                        border-bottom: 4px solid black;
                     }
                 }
             }
+        }
 
-            @media (max-width: 1000px) {
-                height: 200px;
-                width: 560px;
+        @media (max-width: 800px) {
+            height: 160px;
+            width: 450px;
 
-                #width {
+            #width {
 
-                    h1 {
-                        font-size: 4.5em;
-                        letter-spacing: 4px;
+                h1 {
+                    font-size: 3.6em;
+                    letter-spacing: 3px;
 
-                        &:first-child {
-                            border-top: 4px solid black;
-                        }
+                    &:first-child {
+                        border-top: 3px solid black;
+                    }
 
-                        &:last-child {
-                            border-bottom: 4px solid black;
-                        }
+                    &:last-child {
+                        border-bottom: 3px solid black;
                     }
                 }
             }
+        }
 
-            @media (max-width: 800px) {
-                height: 160px;
-                width: 450px;
+        @media (max-width: 600px) {
+            height: 100px;
+            width: 280px;
 
-                #width {
+            #width {
 
-                    h1 {
-                        font-size: 3.6em;
-                        letter-spacing: 3px;
+                h1 {
+                    font-size: 2.4em;
+                    letter-spacing: 2px;
 
-                        &:first-child {
-                            border-top: 3px solid black;
-                        }
-
-                        &:last-child {
-                            border-bottom: 3px solid black;
-                        }
+                    &:first-child {
+                        border-top: 2px solid black;
                     }
-                }
-            }
 
-            @media (max-width: 600px) {
-                height: 100px;
-                width: 280px;
-
-                #width {
-
-                    h1 {
-                        font-size: 2.4em;
-                        letter-spacing: 2px;
-
-                        &:first-child {
-                            border-top: 2px solid black;
-                        }
-
-                        &:last-child {
-                            border-bottom: 2px solid black;
-                        }
+                    &:last-child {
+                        border-bottom: 2px solid black;
                     }
                 }
             }
         }
     }
 
-    .beforeStartBox {
+    #videoWrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 350px;
+        width: 700px;
+        background-color: #2227;
+        border: 4px solid black;
+        border-radius: 8px;
+
+        svg {
+            font-size: 6em;
+            color: #231f20;
+
+            path {
+                stroke: black;
+                stroke-width: 2px;
+                stroke-linejoin: round;
+            }
+        }
+    }
+
+    #startButton {
+        font-family: 'Farro', sans-serif;
+        font-weight: bold;
+        font-size: 3em;
+        color: black;
+        background-color: $warn;
+        border: none;
+        border-radius: 8px;
+        padding: calc(2rem + 8px) 6rem 2rem 6rem;
+    }
+
+    #startBox {
         display: flex;
         flex-direction: column;
         align-items: center;
-        justify-content: space-evenly;
-        height: 100%;
-        width: 100%;
+        background-color: $grayish;
+        box-shadow: 0 0 2px 2px #fffb inset, 0 0 2px 2px #fff2;
+        border: 4px solid black;
+        padding: 3rem;
+        border-radius: 8px;
+        min-width: 60vw;
+        gap: 2rem;
 
-        #videoWrapper {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 225px;
-            width: 525px;
-            background-color: #2227;
-            border: 2px solid black;
-            border-radius: 8px;
-
-            svg {
-                font-size: 4em;
-                color: #231f20;
-
-                path {
-                    stroke: black;
-                    stroke-width: 2px;
-                    stroke-linejoin: round;
-                }
-            }
-        }
-
-        #startButton {
-            font-size: 2.5em;
-            color: white;
-            background-color: black;
+        #back {
+            font-size: 3em;
+            color: $grayish;
+            align-self: flex-start;
+            background-color: #000C;
             border: none;
             border-radius: 8px;
-            padding: 2rem 6rem;
+            padding: 0 .5rem;
+            margin-top: -1.5rem;
+            width: 10rem;
+            box-shadow: 0 0 2px 2px #fff6 inset;
+            border: 2px solid #000C;
         }
 
-        #startBox {
+        div {
             display: flex;
             flex-direction: column;
             align-items: center;
-            background-color: #B1B2B5CC;
-            border: 3px solid black;
-            padding: 3rem;
-            border-radius: 8px;
-            min-width: 60vw;
+            gap: 3rem;
 
-            div {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                gap: 3rem;
+            .optionButton {
+                position: relative;
+                font-size: 2.5em;
+                color: $grayish;
+                background-color: #000C;
+                border: none;
+                border-radius: 8px;
+                padding: 1rem calc(4rem + 48px) 1rem 4rem;
+                width: 100%;
+                box-shadow: 0 0 2px 2px #fff6 inset;
+                border: 2px solid #000C;
 
-                .optionButton {
-                    font-size: 2em;
-                    color: #B1B2B5CC;
-                    background-color: #000C;
-                    border: none;
-                    border-radius: 8px;
-                    padding: 1rem 4rem;
-                    width: 100%;
+                &:last-child {
+                    margin-top: 2rem;
                 }
 
+                svg {
+                    position: absolute;
+                    font-size: 2em;
+                    top: 0;
+                    bottom: 0;
+                    width: 48px;
+                    right: 24px;
+                }
             }
 
         }
+
     }
 }
\ No newline at end of file
diff --git a/leaky-ships/styles/mixins/variables.scss b/leaky-ships/styles/mixins/variables.scss
index ce82152..a29f8c6 100644
--- a/leaky-ships/styles/mixins/variables.scss
+++ b/leaky-ships/styles/mixins/variables.scss
@@ -1 +1,3 @@
-$theme: #282c34;
\ No newline at end of file
+$theme: #282c34;
+$grayish: #B1B2B5CC;
+$warn: #fabd04;
\ No newline at end of file