diff --git a/knockoutwhistweb/app/assets/stylesheets/dark-mode.less b/knockoutwhistweb/app/assets/stylesheets/dark-mode.less
index 02d2efa..c34aab1 100644
--- a/knockoutwhistweb/app/assets/stylesheets/dark-mode.less
+++ b/knockoutwhistweb/app/assets/stylesheets/dark-mode.less
@@ -3,7 +3,7 @@
     --background-image: url('/assets/images/background.png') !important;
     --color: #f8f9fa !important; /* Light text on dark bg */
     --highlightscolor: rgba(131, 131, 131, 0.75) !important;
-
+    --background-color: #192734;
     /* Bootstrap variable overrides for dark mode */
     --bs-body-color: var(--color);
     --bs-link-color: #66b2ff;
diff --git a/knockoutwhistweb/app/assets/stylesheets/light-mode.less b/knockoutwhistweb/app/assets/stylesheets/light-mode.less
index 5975dcc..3054bc2 100644
--- a/knockoutwhistweb/app/assets/stylesheets/light-mode.less
+++ b/knockoutwhistweb/app/assets/stylesheets/light-mode.less
@@ -2,4 +2,5 @@
   --background-image: url('/assets/images/img.png');
   --color: black;
   --highlightscolor: rgba(0, 0, 0, 0.75);
+  --background-color: rgba(228, 232, 237, 1);
 }
diff --git a/knockoutwhistweb/app/assets/stylesheets/main.less b/knockoutwhistweb/app/assets/stylesheets/main.less
index d41bf29..8daeda1 100644
--- a/knockoutwhistweb/app/assets/stylesheets/main.less
+++ b/knockoutwhistweb/app/assets/stylesheets/main.less
@@ -14,7 +14,7 @@
   --bs-border-color: rgba(0, 0, 0, 0.125) !important;
   --bs-heading-color: var(--color) !important;
 }
-
+@background-color: var(--background-color);
 @highlightcolor: var(--highlightscolor);
 @background-image: var(--background-image);
 @color: var(--color);
@@ -29,6 +29,10 @@
     background-repeat: no-repeat;
     background-attachment: fixed;
 }
+.lobby-background {
+    background-color: @background-color;
+
+}
 
 .navbar-header{
     text-align:center;
diff --git a/knockoutwhistweb/app/views/ingame/ingame.scala.html b/knockoutwhistweb/app/views/ingame/ingame.scala.html
index db56c27..ba204cb 100644
--- a/knockoutwhistweb/app/views/ingame/ingame.scala.html
+++ b/knockoutwhistweb/app/views/ingame/ingame.scala.html
@@ -3,6 +3,7 @@
 @(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
 
 @main("Ingame") {
+<main class="game-field-background vh-100">
     <div class="py-5 ms-4 me-4">
 
         <div class="row ms-4 me-4">
@@ -67,4 +68,5 @@
             </div>
         </div>
     </div>
+</main>
 }
diff --git a/knockoutwhistweb/app/views/lobby/lobby.scala.html b/knockoutwhistweb/app/views/lobby/lobby.scala.html
index 46eabb6..a8832e9 100644
--- a/knockoutwhistweb/app/views/lobby/lobby.scala.html
+++ b/knockoutwhistweb/app/views/lobby/lobby.scala.html
@@ -1,82 +1,73 @@
 @(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
 
 @main("Lobby") {
-<div class="container">
-    <div class="row">
-        <div class="col">
-            <div class="p-3 fs-1 d-flex align-items-center">
-                <div class="text-center" style="flex-grow: 1;">
-                    Lobby-Name: @gamelobby.name
+<main class="lobby-background vh-100">
+    <div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
+        <div class="row">
+            <div class="col">
+                <div class="p-3 fs-1 d-flex align-items-center">
+                    <div class="text-center" style="flex-grow: 1;">
+                        Lobby-Name: @gamelobby.name
+                    </div>
+                    <form action="@(routes.IngameController.leaveGame(gamelobby.id))">
+                        <button type="submit" class="btn btn-danger ms-auto">Exit</button>
+                    </form>
                 </div>
-                <form action="@(routes.IngameController.leaveGame(gamelobby.id))">
-                    <button type="submit" class="btn btn-danger ms-auto">Exit</button>
-                </form>
             </div>
         </div>
-    </div>
-    <div class="row">
-        <div class="col">
-            <div class="p-3 text-center fs-4">Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
+        <div class="row">
+            <div class="col">
+                <div class="p-3 text-center fs-4">Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
+            </div>
         </div>
-    </div>
-    <div class="row justify-content-center">
-
-        @if((gamelobby.getUserSession(user.get.id).host)) {
-            @for(playersession <- gamelobby.getPlayers.values) {
-                <div class="col-auto">
-                    <div class="card" style="width: 18rem;">
+        <div class="row justify-content-center align-items-center flex-grow-1">
+            @if((gamelobby.getUserSession(user.get.id).host)) {
+                @for(playersession <- gamelobby.getPlayers.values) {
+                    <div class="col-auto my-auto">
+                        <div class="card" style="width: 18rem;">
+                            <img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
+                            <div class="card-body">
+                                @if(playersession.id == user.get.id) {
+                                    <h5 class="card-title">@playersession.name (You)</h5>
+    @*                                <p class="card-text">Your text could be here!</p>*@
+                                    <a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
+                                } else {
+                                    <h5 class="card-title">@playersession.name</h5>
+    @*                                <p class="card-text">Your text could be here!</p>*@
+                                    <form action="@(routes.IngameController.kickPlayer(gamelobby.id, playersession.id))" method="post">
+                                        <button type="submit" class="btn btn-danger">Remove</button>
+                                    </form>
+                                }
+                            </div>
+                        </div>
+                    </div>
+                }
+                <div class="col-12 text-center mb-5">
+                    <a href="@(routes.IngameController.startGame(gamelobby.id))" class="btn btn-success">Start Game</a>
+                </div>
+            } else {
+                @for(playersession <- gamelobby.getPlayers.values) {
+                    <div class="col-auto my-auto"> <div class="card" style="width: 18rem;">
                         <img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
                         <div class="card-body">
                             @if(playersession.id == user.get.id) {
-                                <h5 class="card-title">@playersession.name (You)</h5>
-@*                                <p class="card-text">Your text could be here!</p>*@
-                                <a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
+                            <h5 class="card-title">@playersession.name (You)</h5>
                             } else {
-                                <h5 class="card-title">@playersession.name</h5>
-@*                                <p class="card-text">Your text could be here!</p>*@
-                                <form action="@(routes.IngameController.kickPlayer(gamelobby.id, playersession.id))" method="post">
-                                    <button type="submit" class="btn btn-danger">Remove</button>
-                                </form>
+                            <h5 class="card-title">@playersession.name</h5>
                             }
                         </div>
-                    </div>
-                </div>
-            }
-            <div class="row">
-                <div class="col text-center mt-3">
-                    <a href="@(routes.IngameController.startGame(gamelobby.id))" class="btn btn-success">Start Game</a>
-                </div>
-            </div>
-        } else {
-            @for(playersession <- gamelobby.getPlayers.values) {
-            <div class="col-auto">
-                <div class="card" style="width: 18rem;">
-                    <img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
-                    <div class="card-body">
-                        @if(playersession.id == user.get.id) {
-                        <h5 class="card-title">@playersession.name (You)</h5>
-                        } else {
-                        <h5 class="card-title">@playersession.name</h5>
-                        }
-                    </div>
-                </div>
-            </div>
-            }
-            <div class="row">
-                <div class="col mt-3">
-                    <p class="text-center fs-4">Waiting for the host to start the game...</p>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col mt-1">
-                    <div class="text-center">
-                        <div class="spinner-border" role="status">
-                            <span class="visually-hidden">Loading...</span>
                         </div>
                     </div>
+                }
+
+                <div class="col-12 text-center mt-3">
+                    <p class="fs-4">Waiting for the host to start the game...</p>
+                    <div class="spinner-border mt-1" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
                 </div>
-            </div>
-        }
+            }
+        </div>
     </div>
-</div>
+</main>
 }
\ No newline at end of file
diff --git a/knockoutwhistweb/app/views/main.scala.html b/knockoutwhistweb/app/views/main.scala.html
index daccc3a..12d9c2c 100644
--- a/knockoutwhistweb/app/views/main.scala.html
+++ b/knockoutwhistweb/app/views/main.scala.html
@@ -18,15 +18,10 @@
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     </head>
 
-    <body class="d-flex flex-column min-vh-100 game-field-background">
-        <main>
+    <body class="d-flex flex-column min-vh-100">
             @* And here's where we render the `Html` object containing
              * the page content. *@
             @content
-        </main>
-
-        <footer class="footer">
-        </footer>
 
         <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
diff --git a/knockoutwhistweb/app/views/mainmenu/creategame.scala.html b/knockoutwhistweb/app/views/mainmenu/creategame.scala.html
index 1e5905c..4872ddc 100644
--- a/knockoutwhistweb/app/views/mainmenu/creategame.scala.html
+++ b/knockoutwhistweb/app/views/mainmenu/creategame.scala.html
@@ -2,31 +2,33 @@
 
 @main("Create Game") {
 @navbar(user)
-<form action="@routes.MainMenuController.createGame()" method="post" class="game-field-background">
-    <div class="w-50 mx-auto">
-        <div class="mt-3">
-            <label for="lobbyname" class="form-label">Lobby-Name</label>
-            <input type="text" class="form-control" id="lobbyname" name="lobbyname" placeholder="Lobby 1" required>
-        </div>
-        <div class="form-check form-switch mt-3">
-            <input class="form-check-input" type="checkbox" id="visibilityswitch" disabled>
-            <label class="form-check-label" for="visibilityswitch">public/private</label>
-        </div>
+<main class="lobby-background flex-grow-1">
+    <form action="@routes.MainMenuController.createGame()" method="post">
+        <div class="w-50 mx-auto">
             <div class="mt-3">
-                <label for="playeramount" class="form-label">Playeramount:</label>
-                <input type="range" class="form-range text-body" min="2" max="7" value="2" id="playeramount" name="playeramount">
-                <div class="d-flex justify-content-between">
-                    <span>2</span>
-                    <span>3</span>
-                    <span>4</span>
-                    <span>5</span>
-                    <span>6</span>
-                    <span>7</span>
-                </div>
+                <label for="lobbyname" class="form-label">Lobby-Name</label>
+                <input type="text" class="form-control" id="lobbyname" name="lobbyname" placeholder="Lobby 1" required>
+            </div>
+            <div class="form-check form-switch mt-3">
+                <input class="form-check-input" type="checkbox" id="visibilityswitch" disabled>
+                <label class="form-check-label" for="visibilityswitch">public/private</label>
+            </div>
+                <div class="mt-3">
+                    <label for="playeramount" class="form-label">Playeramount:</label>
+                    <input type="range" class="form-range text-body" min="2" max="7" value="2" id="playeramount" name="playeramount">
+                    <div class="d-flex justify-content-between">
+                        <span>2</span>
+                        <span>3</span>
+                        <span>4</span>
+                        <span>5</span>
+                        <span>6</span>
+                        <span>7</span>
+                    </div>
+                </div>
+            <div class="mt-3 text-center">
+                <button type="submit" class="btn btn-success">Create Game</button>
             </div>
-        <div class="mt-3 text-center">
-            <button type="submit" class="btn btn-success">Create Game</button>
         </div>
-    </div>
-</form>
+    </form>
+</main>
 }
\ No newline at end of file