diff --git a/leaky-ships/components/BurgerMenu.tsx b/leaky-ships/components/BurgerMenu.tsx
index eebcfa3..315441c 100644
--- a/leaky-ships/components/BurgerMenu.tsx
+++ b/leaky-ships/components/BurgerMenu.tsx
@@ -1,9 +1,19 @@
+import classNames from "classnames"
 import React from "react"
 
-function BurgerMenu({ onClick }: { onClick?: () => void }) {
+function BurgerMenu({
+  onClick,
+  blur,
+}: {
+  onClick?: () => void
+  blur?: boolean
+}) {
   return (
     <button
-      className="absolute top-4 left-4 flex h-16 w-16 items-center justify-center rounded-lg border-b-2 border-shield-gray bg-grayish shadow-lg duration-100 active:border-t-2 active:border-b-0 md:top-6 md:left-6 md:h-20  md:w-20 md:rounded-xl md:border-b-4 md:active:border-t-4 lg:top-8 lg:left-8 xl:top-12 xl:left-12 xl:h-24 xl:w-24"
+      className={classNames(
+        "absolute top-4 left-4 flex h-16 w-16 items-center justify-center rounded-lg border-b-2 border-shield-gray bg-grayish shadow-lg duration-100 active:border-t-2 active:border-b-0 md:top-6 md:left-6 md:h-20  md:w-20 md:rounded-xl md:border-b-4 md:active:border-t-4 lg:top-8 lg:left-8 xl:top-12 xl:left-12 xl:h-24 xl:w-24",
+        { "blur-sm": blur }
+      )}
       onClick={() => onClick && setTimeout(onClick, 200)}
     >
       <img
diff --git a/leaky-ships/components/Lobby/LobbyFrame.tsx b/leaky-ships/components/Lobby/LobbyFrame.tsx
index 932fc59..de412ae 100644
--- a/leaky-ships/components/Lobby/LobbyFrame.tsx
+++ b/leaky-ships/components/Lobby/LobbyFrame.tsx
@@ -1,12 +1,10 @@
-import { useEffect, useState } from "react"
-import Settings from "./SettingsFrame/Settings"
+import { Fragment, useEffect, useState } from "react"
 import Icon from "./Icon"
 import Player from "./Player"
 
-function LobbyFrame() {
-  const [settings, setSettings] = useState(false)
+function LobbyFrame({ openSettings }: { openSettings: () => void }) {
   const [enemy, setEnemy] = useState(false)
-  const [dots, setDots] = useState(0)
+  const [dots, setDots] = useState(1)
 
   useEffect(() => {
     if (enemy) return
@@ -21,7 +19,7 @@ function LobbyFrame() {
         <h1 className="font-farro text-5xl font-medium">
           Game-PIN: <span className="underline">3169</span>
         </h1>
-        <Icon src="gear.png" onClick={() => setSettings(true)}>
+        <Icon src="gear.png" onClick={openSettings}>
           Settings
         </Icon>
       </div>
@@ -41,17 +39,19 @@ function LobbyFrame() {
         {enemy ? (
           <Player src="player_red.png" text="Spieler 2" />
         ) : (
-          <p className="font-farro m-12 w-64 text-center text-5xl font-medium">
+          <p className="font-farro w-96 text-center text-5xl font-medium">
             Warte auf Spieler 2 {Array.from(Array(dots), () => ".").join("")}
+            {Array.from(Array(3 - dots), (_, i) => (
+              <Fragment key={i}>&nbsp;</Fragment>
+            ))}
           </p>
         )}
       </div>
       <div className="flex items-center justify-center border-t-2 border-slate-900">
-        <button className="font-farro m-8 rounded-xl bg-amber-400 px-12 py-4 text-5xl font-medium">
+        <button className="font-farro m-4 rounded-xl border-b-4 border-orange-400 bg-warn px-12 py-4 text-5xl font-medium duration-100 active:border-t-4 active:border-b-0">
           START
         </button>
       </div>
-      {settings ? <Settings closeSettings={() => setSettings(false)} /> : <></>}
     </div>
   )
 }
diff --git a/leaky-ships/components/Lobby/Player.tsx b/leaky-ships/components/Lobby/Player.tsx
index 1e4e0dd..6cef80b 100644
--- a/leaky-ships/components/Lobby/Player.tsx
+++ b/leaky-ships/components/Lobby/Player.tsx
@@ -14,16 +14,16 @@ function Player({
   edit?: boolean
 }) {
   return (
-    <div className="m-4 flex flex-col items-center">
+    <div className="flex w-96 flex-col items-center gap-16 py-8">
       <p
         className={classNames(
-          "font-farro my-8 text-5xl",
+          "font-farro text-5xl",
           primary ? "font-semibold" : "font-normal"
         )}
       >
         {text}
       </p>
-      <div className="relative m-8">
+      <div className="relative">
         <img className="pixelart w-64" src={"/assets/" + src} alt={src} />
         {edit ? (
           <button className="absolute top-4 right-4  h-14 w-14 rounded-lg border-2 border-dashed border-warn bg-gray-800 bg-opacity-90">
diff --git a/leaky-ships/components/Lobby/SettingsFrame/Setting.tsx b/leaky-ships/components/Lobby/SettingsFrame/Setting.tsx
index 8cb5b6b..b3756e2 100644
--- a/leaky-ships/components/Lobby/SettingsFrame/Setting.tsx
+++ b/leaky-ships/components/Lobby/SettingsFrame/Setting.tsx
@@ -15,25 +15,20 @@ function Setting({
   }
 }) {
   return (
-    <>
-      <label
-        htmlFor={key}
-        className="col-span-2 my-4 select-none text-8xl text-white drop-shadow-md"
-      >
+    <label className="flex items-center justify-between" htmlFor={key}>
+      <span className="col-span-2 w-96 select-none text-5xl text-white drop-shadow-md">
         {key}
-      </label>
-      <label
-        htmlFor={key}
-        className={state ? "rounded-full bg-gray-300 px-2 transition-all" : ""}
-      >
-        <FontAwesomeIcon
-          className={classNames(
-            "w-24 drop-shadow-md",
-            state ? "text-blue-500" : "text-gray-700"
-          )}
-          icon={state ? faToggleLargeOn : faToggleLargeOff}
-        />
-      </label>
+      </span>
+      <FontAwesomeIcon
+        className={classNames(
+          "text-md mx-auto w-24 rounded-full px-4 drop-shadow-md transition-all",
+          state ? "text-blue-500" : "text-gray-800",
+          {
+            "bg-gray-300 ": state,
+          }
+        )}
+        icon={state ? faToggleLargeOn : faToggleLargeOff}
+      />
       <input
         className="bg-none"
         checked={state}
@@ -42,7 +37,7 @@ function Setting({
         onChange={onClick}
         hidden={true}
       />
-    </>
+    </label>
   )
 }
 
diff --git a/leaky-ships/components/Lobby/SettingsFrame/Settings.tsx b/leaky-ships/components/Lobby/SettingsFrame/Settings.tsx
index c9ccc30..ae1c9fe 100644
--- a/leaky-ships/components/Lobby/SettingsFrame/Settings.tsx
+++ b/leaky-ships/components/Lobby/SettingsFrame/Settings.tsx
@@ -14,37 +14,43 @@ const settingOptionsInit: { [key: string]: boolean } = {
 function Settings({ closeSettings }: { closeSettings: () => void }) {
   const [settingOptions, setSettingOptions] = useState(settingOptionsInit)
   return (
-    <div className="absolute inset-0 flex flex-col justify-center bg-black bg-opacity-40">
-      <div className="relative mx-16 flex flex-col rounded-3xl border-4 border-zinc-700 bg-zinc-400 p-8">
-        <h1 className="font-farro text-center text-6xl font-semibold text-white shadow-black drop-shadow-lg">
-          Settings
-        </h1>
-        <button
-          className="absolute top-6 right-6  h-14 w-14 "
-          onClick={closeSettings}
-        >
-          <FontAwesomeIcon
-            className="h-full w-full text-gray-700 drop-shadow-md"
-            icon={faXmark}
-          />
-        </button>
-        <div className="relative m-8 rounded-xl bg-zinc-500 pt-16">
-          <button
-            className="absolute top-8 right-12  h-14 w-14"
-            onClick={() => setSettingOptions(settingOptionsInit)}
-          >
-            <FontAwesomeIcon
-              className="h-full w-full text-gray-700 drop-shadow-md"
-              icon={faRotateLeft}
-            />
-          </button>
-          <div className="mr-32 grid grid-cols-3 items-center justify-items-start gap-4 p-8">
-            {Object.keys(settingOptions).map((key) => {
-              const state = settingOptions[key]
-              const onClick = () =>
-                setSettingOptions((e) => ({ ...e, [key]: !e[key] }))
-              return <Setting key={key} props={{ key, state, onClick }} />
-            })}
+    <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/40">
+      <div className="w-full max-w-screen-lg">
+        <div className="mx-16 flex flex-col rounded-3xl border-4 border-slate-800 bg-zinc-500 p-8">
+          <div className="flex items-center justify-center">
+            <h1 className="font-farro ml-auto pl-14 text-center text-6xl font-semibold text-white shadow-black drop-shadow-lg">
+              Settings
+            </h1>
+            <button
+              className="top-6 right-6 ml-auto h-14  w-14"
+              onClick={closeSettings}
+            >
+              <FontAwesomeIcon
+                className="h-full w-full text-gray-800 drop-shadow-md"
+                icon={faXmark}
+              />
+            </button>
+          </div>
+          <div className="mt-8 rounded-xl bg-zinc-600 p-8">
+            <div className="flex items-center justify-end">
+              <button
+                className="top-8 right-12  h-14 w-14"
+                onClick={() => setSettingOptions(settingOptionsInit)}
+              >
+                <FontAwesomeIcon
+                  className="h-full w-full text-gray-800 drop-shadow-md"
+                  icon={faRotateLeft}
+                />
+              </button>
+            </div>
+            <div className="flex flex-col gap-8">
+              {Object.keys(settingOptions).map((key) => {
+                const state = settingOptions[key]
+                const onClick = () =>
+                  setSettingOptions((e) => ({ ...e, [key]: !e[key] }))
+                return <Setting key={key} props={{ key, state, onClick }} />
+              })}
+            </div>
           </div>
         </div>
       </div>
diff --git a/leaky-ships/components/Logo.tsx b/leaky-ships/components/Logo.tsx
index abc9a1f..c7e5f5e 100644
--- a/leaky-ships/components/Logo.tsx
+++ b/leaky-ships/components/Logo.tsx
@@ -1,35 +1,52 @@
 import classNames from "classnames"
 import React from "react"
 
-function Logo() {
+function Logo({ small }: { small?: boolean }) {
   return (
     <div className="relative flex flex-col items-center rounded-sm border-x-4 border-y-2 border-shield-gray bg-shield-lightgray md:border-x-8 md:border-y-4">
-      <h1 className="font-checkpoint mx-16 my-2 flex flex-col gap-2 border-y-2 border-slate-700 text-center text-2xl leading-tight tracking-widest sm:mx-24 sm:my-3 sm:gap-3 sm:border-y-[3px] sm:text-4xl md:mx-36 md:my-4 md:gap-4 md:border-y-4 md:text-5xl xl:gap-6 xl:py-2 xl:text-6xl">
+      <h1
+        className={classNames(
+          "font-checkpoint mx-16 my-2 flex flex-col gap-2 border-y-2 border-slate-700 text-center text-2xl leading-tight tracking-widest sm:mx-24 sm:my-3 sm:gap-3 sm:border-y-[3px] sm:text-4xl md:mx-36 md:my-4 md:gap-4 md:border-y-4 md:text-5xl",
+          { "xl:gap-6 xl:py-2 xl:text-6xl": !small }
+        )}
+      >
         <span>Leaky</span>
         <span>Ships</span>
       </h1>
-      <Screws />
+      <Screws small={small} />
     </div>
   )
 }
 
-function Screws() {
+function Screws({ small }: { small?: boolean }) {
   return (
     <>
       <Screw
-        orientation="top-1 left-1 sm:top-2 sm:left-2 xl:top-4 xl:left-4"
+        small={small}
+        orientation={classNames("top-1 left-1 sm:top-2 sm:left-2", {
+          "xl:top-4 xl:left-4": !small,
+        })}
         rotation="rotate-[135deg]"
       />
       <Screw
-        orientation="top-1 right-1 sm:top-2 sm:right-2 xl:top-4 xl:right-4"
+        small={small}
+        orientation={classNames("top-1 right-1 sm:top-2 sm:right-2", {
+          "xl:top-4 xl:right-4": !small,
+        })}
         rotation="rotate-[5deg]"
       />
       <Screw
-        orientation="bottom-1 right-1 sm:bottom-2 sm:right-2 xl:bottom-4 xl:right-4"
+        small={small}
+        orientation={classNames("bottom-1 right-1 sm:bottom-2 sm:right-2", {
+          "xl:bottom-4 xl:right-4": !small,
+        })}
         rotation="rotate-[150deg]"
       />
       <Screw
-        orientation="bottom-1 left-1 sm:bottom-2 sm:left-2 xl:bottom-4 xl:left-4"
+        small={small}
+        orientation={classNames("bottom-1 left-1 sm:bottom-2 sm:left-2", {
+          "xl:bottom-4 xl:left-4": !small,
+        })}
         rotation="rotate-[20deg]"
       />
     </>
@@ -39,20 +56,24 @@ function Screws() {
 function Screw({
   orientation,
   rotation,
+  small,
 }: {
   orientation: string
   rotation: string
+  small?: boolean
 }) {
   return (
     <div
       className={classNames(
-        "absolute flex h-3 w-3 flex-col items-center justify-center rounded-full border-[1px] border-neutral-700 bg-neutral-400 sm:h-5 sm:w-5 sm:border-2 md:h-6 md:w-6 xl:h-8 xl:w-8",
+        "absolute flex h-3 w-3 flex-col items-center justify-center rounded-full border-[1px] border-neutral-700 bg-neutral-400 sm:h-5 sm:w-5 sm:border-2 md:h-6 md:w-6",
+        { "xl:h-8 xl:w-8": !small },
         orientation
       )}
     >
       <hr
         className={classNames(
-          "color w-full border-neutral-500 sm:border-t-2 xl:border-t-4",
+          "color w-full border-neutral-500 sm:border-t-2",
+          { "xl:border-t-4": !small },
           rotation
         )}
       />
diff --git a/leaky-ships/pages/dev/index.tsx b/leaky-ships/pages/dev/index.tsx
index f0457d2..30359fb 100644
--- a/leaky-ships/pages/dev/index.tsx
+++ b/leaky-ships/pages/dev/index.tsx
@@ -23,7 +23,7 @@ export default function Home() {
               />
             </div>
             <button
-              className="font-farro rounded-lg border-b-4 border-orange-400 bg-warn px-12 pt-5 pb-4 text-2xl font-bold duration-100 active:border-t-4 active:border-b-0  sm:rounded-xl sm:border-b-[6px] sm:px-14 sm:pt-6 sm:pb-5 sm:text-3xl sm:active:border-t-[6px] md:rounded-2xl md:border-b-8 md:px-20 md:pt-7 md:pb-6 md:text-4xl md:active:border-t-8 xl:px-24 xl:pt-10 xl:pb-8 xl:text-5xl"
+              className="font-farro rounded-lg border-b-4 border-orange-400 bg-warn px-12 pt-5 pb-4 text-2xl font-bold duration-100 active:border-t-4 active:border-b-0 sm:rounded-xl sm:border-b-[6px] sm:px-14 sm:pt-6 sm:pb-5 sm:text-3xl sm:active:border-t-[6px] md:rounded-2xl md:border-b-8 md:px-20 md:pt-7 md:pb-6 md:text-4xl md:active:border-t-8 xl:px-24 xl:pt-10 xl:pb-8 xl:text-5xl"
               onClick={() => setTimeout(() => setHeWantsToPlay(true), 200)}
             >
               START
diff --git a/leaky-ships/pages/dev/lobby.tsx b/leaky-ships/pages/dev/lobby.tsx
index d072b6c..8e50896 100644
--- a/leaky-ships/pages/dev/lobby.tsx
+++ b/leaky-ships/pages/dev/lobby.tsx
@@ -2,19 +2,31 @@ import Head from "next/head"
 import Logo from "../../components/Logo"
 import LobbyFrame from "../../components/Lobby/LobbyFrame"
 import BurgerMenu from "../../components/BurgerMenu"
+import { useState } from "react"
+import Settings from "../../components/Lobby/SettingsFrame/Settings"
+import classNames from "classnames"
 
 export default function Home() {
+  const [settings, setSettings] = useState(false)
   return (
-    <div id="box">
+    <div className="h-full bg-theme">
       <Head>
         <title>Create Next App</title>
         <meta name="description" content="Generated by create next app" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Logo />
-      <BurgerMenu />
-      <LobbyFrame />
+      <div
+        className={classNames(
+          "mx-auto flex h-full max-w-screen-2xl flex-col items-center justify-evenly",
+          { "blur-sm": settings }
+        )}
+      >
+        <Logo small={true} />
+        <LobbyFrame openSettings={() => setSettings(true)} />
+      </div>
+      <BurgerMenu blur={settings} />
+      {settings ? <Settings closeSettings={() => setSettings(false)} /> : <></>}
     </div>
   )
 }