diff --git a/src/gui/components/MobileBoot.module.css b/src/gui/components/MobileBoot.module.css
index a76ec208..8dc24b2e 100644
--- a/src/gui/components/MobileBoot.module.css
+++ b/src/gui/components/MobileBoot.module.css
@@ -1,7 +1,10 @@
 .mainContainer {
-    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 100vw;
     height: 100vh;
+    position: relative;
 }
 
 .backgroundImage {
@@ -10,22 +13,90 @@
     object-fit: cover;
     width: 100%;
     height: 100%;
+    z-index: -1;
 }
 
 .startBtn {
-    position: absolute;
-    display: 5rem;
+    display: flex;
     justify-content: center;
     align-items: center;
-    left: 50%;
-    bottom: 5rem;
-    transform: translateX(-50%);
 
     background: white;
     color: #bf6cff;
-    padding: 5vh 10vh;
-    border-radius: 1rem;
+    padding: 15px 30px;
+    border-radius: 10px;
     font-weight: bold;
-    font-size: 5vh;
-    box-shadow: 0 0.6vh 0rem #bf6cff;
-}
\ No newline at end of file
+    font-size: 1.5rem;
+    box-shadow: 0 4px 0 #bf6cff;
+    cursor: pointer;
+    border: none;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border: 1px solid rgb(92, 144, 255);
+    border-radius: 10px;
+    background-color: #111111d7;
+    width: 50%;
+    max-width: 600px;
+    height: 50%;
+    min-height: 300px;
+    text-align: center;
+}
+
+.titleText {
+    font-size: 1.5rem;
+    color: #ffffff;
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+}
+
+.playersReady {
+    font-size: 1.2rem;
+    color: #ffffff;
+    margin-bottom: 10px;
+}
+
+.infoText {
+    opacity: 0.6;
+    font-size: 1rem;
+    color: #ffffff;
+    margin-top: 12px;
+}
+
+.bottomSection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+@media (max-width: 768px) {
+    .container {
+        width: 80%;
+        height: 60%;
+    }
+
+    .startBtn {
+        font-size: 1.2rem;
+        padding: 12px 24px;
+    }
+
+    .titleText {
+        font-size: 1.5rem;
+    }
+
+    .playersReady {
+        font-size: 1rem;
+        margin-bottom: 0px;
+    }
+
+    .infoText {
+        font-size: 0.9rem;
+    }
+}
diff --git a/src/gui/components/MobileBoot.tsx b/src/gui/components/MobileBoot.tsx
index b1fba25d..98ecd286 100644
--- a/src/gui/components/MobileBoot.tsx
+++ b/src/gui/components/MobileBoot.tsx
@@ -1,16 +1,31 @@
-import { FunctionComponent, useCallback } from 'react';
+import { FunctionComponent, useCallback, useState } from 'react';
 import backgroundImage from '../../assets/img/start-background.png';
 import { useClient } from '../hooks/use-client';
 import { useCredentials } from '../hooks/use-credentials';
 import { useDatabase } from '../hooks/use-database';
 import { useSocket } from '../hooks/use-socket';
-import bootstyles from './MobileBoot.module.css';
+import styles from './MobileBoot.module.css';
+
+interface PlayersReadyProps {
+    readyPlayers: number;
+}
+
+const PlayersReady: FunctionComponent<PlayersReadyProps> = ({
+    readyPlayers,
+}) => {
+    return (
+        <div className={styles.playersReady}>
+            {readyPlayers} / 4 players ready
+        </div>
+    );
+};
 
 export const MobileBoot: FunctionComponent = () => {
     const socket = useSocket();
     const { peerId } = useCredentials();
     const client = useClient();
     const db = useDatabase();
+    const [readyPlayers, setReadyPlayers] = useState(0);
 
     const onStartClick = useCallback(() => {
         if (!socket) {
@@ -37,10 +52,20 @@ export const MobileBoot: FunctionComponent = () => {
     }, [client, db.peerNames, peerId, socket]);
 
     return (
-        <div className={bootstyles.mainContainer}>
-            <img src={backgroundImage} className={bootstyles.backgroundImage} />
-            <div className={bootstyles.startBtn} onClick={onStartClick}>
-                Start
+        <div className={styles.mainContainer}>
+            <img src={backgroundImage} className={styles.backgroundImage} />
+            <div className={styles.container}>
+                <div className={styles.titleText}>
+                    Playerchain Space Shooter
+                </div>
+                <PlayersReady readyPlayers={readyPlayers} />
+                <div className={styles.startBtn} onClick={onStartClick}>
+                    Start Game
+                </div>
+                <div className={styles.infoText}>
+                    Two players required to start. For the best experience, wait
+                    for four!
+                </div>
             </div>
         </div>
     );