diff --git a/leaky-ships/pages/dev/lobby.tsx b/leaky-ships/pages/dev/lobby.tsx
index f141898..08d7372 100644
--- a/leaky-ships/pages/dev/lobby.tsx
+++ b/leaky-ships/pages/dev/lobby.tsx
@@ -1,6 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faCaretDown } from "@fortawesome/sharp-solid-svg-icons"
 import classNames from "classnames"
+import Head from "next/head"
 import { useEffect, useState } from "react"
 
 export default function Home() {
@@ -15,13 +16,22 @@ export default function Home() {
 
   return (
     <div id="box">
+      <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>
       <button id="navExpand">
         <img id="burgerMenu" src="/assets/burger-menu.png" alt="Burger Menu" />
       </button>
-      <div id="shield">
-        <div id="width">
-          <h1>Leaky</h1>
-          <h1>Ships</h1>
+      <div className="flex flex-row bg-shield-gray bg-[url('/assets/shield.png')] bg-cover bg-no-repeat">
+        <div className="flex flex-col items-center justify-between">
+          <h1 className="CP_Font my-4 mx-32 border-y-4 border-slate-900 text-center text-6xl leading-tight tracking-widest">
+            Leaky
+            <br />
+            Ships
+          </h1>
         </div>
       </div>
       <div className="mx-32 flex flex-col self-stretch rounded-3xl bg-gray-400">
@@ -33,7 +43,12 @@ export default function Home() {
           <Icon src="gear.png" text="Settings" />
         </div>
         <div className="flex items-center justify-around">
-          <Player src="player_blue.png" text="Spieler 1 (Du)" primary={true} />
+          <Player
+            src="player_blue.png"
+            text="Spieler 1 (Du)"
+            primary={true}
+            edit={true}
+          />
           <p
             className="farro m-4 text-6xl font-semibold"
             onClick={() => setEnemy((e) => !e)}
@@ -41,7 +56,7 @@ export default function Home() {
             VS
           </p>
           {enemy ? (
-            <Player src="player_red.png" text="Spieler 2" primary={false} />
+            <Player src="player_red.png" text="Spieler 2" />
           ) : (
             <p className="farro m-12 w-64 text-center text-5xl font-medium">
               Warte auf Spieler 2 {Array.from(Array(dots), () => ".").join("")}
@@ -60,24 +75,26 @@ export default function Home() {
 
 function Icon({ src, text }: { src: string; text: string }) {
   return (
-    <div className="mx-4 mt-4 flex flex-col items-center">
+    <button className="mx-4 mt-4 flex flex-col items-center border-none">
       <img
         className="pixelart mb-1 box-content w-16 rounded-xl bg-white p-1"
         src={"/assets/" + src}
         alt={src}
       />
       <span className="font-semibold">{text}</span>
-    </div>
+    </button>
   )
 }
 function Player({
   src,
   text,
   primary,
+  edit,
 }: {
   src: string
   text: string
-  primary: boolean
+  primary?: boolean
+  edit?: boolean
 }) {
   return (
     <div className="m-4 flex flex-col items-center">
@@ -91,10 +108,16 @@ function Player({
       </p>
       <div className="relative m-8">
         <img className="pixelart w-64" src={"/assets/" + src} alt={src} />
-        <FontAwesomeIcon
-          className="absolute top-4  right-4 h-14 w-14 rounded-xl bg-gray-800 bg-opacity-90 text-6xl text-amber-400"
-          icon={faCaretDown}
-        />
+        {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">
+            <FontAwesomeIcon
+              className="h-full w-full text-warn"
+              icon={faCaretDown}
+            />
+          </button>
+        ) : (
+          <></>
+        )}
       </div>
     </div>
   )
diff --git a/leaky-ships/styles/globals.css b/leaky-ships/styles/globals.css
index 31f5c41..1583aa5 100644
--- a/leaky-ships/styles/globals.css
+++ b/leaky-ships/styles/globals.css
@@ -3,6 +3,10 @@
 @tailwind utilities;
 
 @import url("https://fonts.googleapis.com/css2?family=Farro:wght@300;400;500;700&display=swap");
+@font-face {
+  font-family: "CP_Font";
+  src: url("/fonts/cpfont_ote/CP Font.otf") format("opentype");
+}
 
 .pixelart {
   image-rendering: pixelated;
@@ -13,3 +17,7 @@
 .farro {
   font-family: "Farro", sans-serif;
 }
+
+.CP_Font {
+  font-family: "CP_Font", sans-serif;
+}
diff --git a/leaky-ships/tailwind.config.js b/leaky-ships/tailwind.config.js
index f8ecd2c..d8e8fa9 100644
--- a/leaky-ships/tailwind.config.js
+++ b/leaky-ships/tailwind.config.js
@@ -1,10 +1,20 @@
 /** @type {import('tailwindcss').Config} */
+const colors = require("tailwindcss/colors")
+
 module.exports = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
+    colors: {
+      ...colors,
+      theme: "#282c34",
+      grayish: "#b1b2b5cc",
+      warn: "#fabd04",
+      "shield-gray": "#616161",
+      "shield-lightgray": "#989898",
+    },
     extend: {},
   },
   plugins: [],
