diff --git a/app/src/games/game.ts b/app/src/games/game.ts
index d005848..14017fb 100644
--- a/app/src/games/game.ts
+++ b/app/src/games/game.ts
@@ -3,10 +3,10 @@ import { Player } from 'src/players/player';
 export class Game {
   gameId: string;
   gameCode: string;
-  players: Set<Player>;
+  players: Player[];
   constructor(gameId: string, gameCode: string, player: Player) {
     this.gameId = gameId;
     this.gameCode = gameCode;
-    this.players = new Set([player]);
+    this.players = [player];
   }
 }
diff --git a/web/src/App.scss b/web/src/App.scss
index 5992e9f..26c60db 100644
--- a/web/src/App.scss
+++ b/web/src/App.scss
@@ -1,3 +1,9 @@
 @use "node_modules/@picocss/pico/scss/pico" with (
     $theme-color: "pumpkin"
 );
+
+#root, #app {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+}
diff --git a/web/src/App.tsx b/web/src/App.tsx
index f02aa60..cdcaab0 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -8,7 +8,7 @@ export interface AppProps {
 
 const App = (props: AppProps) => {
   return (
-    <div className="app">
+    <div id="app">
       <LandingPage {...props} />
     </div>
   );
diff --git a/web/src/pages/landing/LandingPage.scss b/web/src/pages/landing/LandingPage.scss
index 57843bb..ff0c9c7 100644
--- a/web/src/pages/landing/LandingPage.scss
+++ b/web/src/pages/landing/LandingPage.scss
@@ -1,29 +1,40 @@
-body {
+.landing-page {
+    height: 100%;
+    width: 100%;
+    padding: 2%;
     margin: 0 auto;
     text-align: center;
+
     background: linear-gradient(-45deg, #03444a, #00a8a8, #f1bc52, #ff8f4b);
     background-size: 400% 400%;
     animation: gradient 15s ease infinite;
     height: 100vh;
-}
-@keyframes gradient {
-    0% {
-      background-position: 0% 50%;
+
+    @keyframes gradient {
+        0% {
+            background-position: 0% 50%;
+        }
+        50% {
+            background-position: 100% 50%;
+        }
+        100% {
+            background-position: 0% 50%;
+        }
     }
-    50% {
-      background-position: 100% 50%;
+
+    .landing-page-body {
+        margin: auto;
+        width: 20%;
+        min-width: 300px;
     }
-    100% {
-      background-position: 0% 50%;
+
+    > div {
+        padding: 2%;
+    }
+
+    button {
+        font-size: 1rem;
+        width: 70%;
+        margin-bottom: var(--pico-spacing)
     }
-  }
-div {
-    padding: 2%;
-}
-button {
-    font-size: 1rem;
-}
-#body-format {
-    margin: auto;
-    max-width: 20%;
 }
diff --git a/web/src/pages/landing/LandingPage.tsx b/web/src/pages/landing/LandingPage.tsx
index 3530f2b..2b7abd5 100644
--- a/web/src/pages/landing/LandingPage.tsx
+++ b/web/src/pages/landing/LandingPage.tsx
@@ -25,12 +25,12 @@ const LandingPage = (props: LandingPageProps) => {
     (joinLobbyPayload.lobbyId = event.target.value);
 
   return (
-    <React.Fragment>
-      <div className="landing-page-title" id="landing-page-title">
+    <div className="landing-page">
+      <div>
         <h1>Trains And Roads</h1>
       </div>
-      <div id="body-format">
-        <div className="user-name-input" id="user-name-input">
+      <div className="landing-page-body">
+        <div>
           <input
             placeholder="Enter username"
             onChange={registerUsername}
@@ -39,21 +39,20 @@ const LandingPage = (props: LandingPageProps) => {
             Create Lobby
           </button>
         </div>
-        <div className="join-lobby" id="join-lobby">
+        <div>
           <input
-            className="lobby-id-input"
             placeholder="Enter Lobby Id"
             onChange={registerLobbyId}
           ></input>
           <button
-            className="join-lobby-button secondary"
+            className="secondary"
             onClick={() => handleJoinLobby(socket, joinLobbyPayload)}
           >
             Join Lobby
           </button>
         </div>
       </div>
-    </React.Fragment>
+    </div>
   );
 };
 export default LandingPage;