diff --git a/tank-frontend/public/CCCBFont.woff b/tank-frontend/public/CCCBFont.woff
new file mode 100644
index 0000000..04b40af
Binary files /dev/null and b/tank-frontend/public/CCCBFont.woff differ
diff --git a/tank-frontend/src/PlayerInfo.css b/tank-frontend/src/PlayerInfo.css
index 720171a..c3a8623 100644
--- a/tank-frontend/src/PlayerInfo.css
+++ b/tank-frontend/src/PlayerInfo.css
@@ -1,9 +1,4 @@
-.PlayerInfo {
-    border: 2px solid rgb(76, 76, 76);
-    border-radius: 4px;
-}
-
-.Elems {
+    .Elems {
     padding: 8px 8px;
     margin: 8px 8px;
 }
diff --git a/tank-frontend/src/PlayerInfo.tsx b/tank-frontend/src/PlayerInfo.tsx
index 518b5b1..a2f1f5b 100644
--- a/tank-frontend/src/PlayerInfo.tsx
+++ b/tank-frontend/src/PlayerInfo.tsx
@@ -4,12 +4,10 @@ import {PlayerResponse, getPlayer} from './serverCalls';
 import {Guid} from "./Guid.ts";
 import Column from "./components/Column.tsx";
 import Row from "./components/Row.tsx";
-import Button from "./components/Button.tsx";
 
-export default function PlayerInfo({playerId, logout, reset}: {
+export default function PlayerInfo({playerId, logout}: {
     playerId: Guid,
-    logout: () => void,
-    reset: () => void
+    logout: () => void
 }) {
     const [player, setPlayer] = useState<PlayerResponse | null>();
 
@@ -28,12 +26,9 @@ export default function PlayerInfo({playerId, logout, reset}: {
     }, [playerId]);
 
     return <Column className='PlayerInfo'>
-        <Row>
-            <h3 className='grow'>
-                {player ? `Playing as "${player?.name}"` : 'loading...'}
-            </h3>
-            <Button className='PlayerInfo-Reset' onClick={() => reset()} text='x'/>
-        </Row>
+        <h3>
+            {player ? `Playing as "${player?.name}"` : 'loading...'}
+        </h3>
         <Row>
             <p className='Elems'> kills: </p>
             <p className='Elems'>{player?.scores.kills}</p>
diff --git a/tank-frontend/src/components/Column.css b/tank-frontend/src/components/Column.css
index c19f81c..791c0ae 100644
--- a/tank-frontend/src/components/Column.css
+++ b/tank-frontend/src/components/Column.css
@@ -4,4 +4,5 @@
     flex: auto;
     max-height: 100%;
     align-items: stretch;
+    gap: 8px;
 }
diff --git a/tank-frontend/src/components/Row.css b/tank-frontend/src/components/Row.css
index 45e17f2..b26cc11 100644
--- a/tank-frontend/src/components/Row.css
+++ b/tank-frontend/src/components/Row.css
@@ -4,4 +4,5 @@
     flex: auto;
     max-width: 100%;
     align-items: stretch;
+    gap: 8px;
 }
diff --git a/tank-frontend/src/index.css b/tank-frontend/src/index.css
index ab5bd76..5830fc5 100644
--- a/tank-frontend/src/index.css
+++ b/tank-frontend/src/index.css
@@ -21,10 +21,22 @@ body {
     display: flex;
     flex-direction: row;
     align-items: center;
-    width: 100vw;
-    height: 100vh;
+    width: 95vw;
+    height: 95vh;
 }
 
 .grow {
     flex-grow: 1;
 }
+
+@font-face {
+    font-family: 'CCCBFont';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/public/CCCBFont.woff') format('woff');
+}
+
+* {
+    font-family: CCCBFont, monospace;
+}
diff --git a/tank-frontend/src/index.tsx b/tank-frontend/src/index.tsx
index d9a7c05..1b45f4a 100644
--- a/tank-frontend/src/index.tsx
+++ b/tank-frontend/src/index.tsx
@@ -10,6 +10,7 @@ import {NameId, postPlayer} from './serverCalls.tsx';
 import Column from "./components/Column.tsx";
 import Row from "./components/Row.tsx";
 import Scoreboard from "./Scoreboard.tsx";
+import Button from "./components/Button.tsx";
 
 const getNewNameId = () => ({
     id: crypto.randomUUID(),
@@ -30,12 +31,16 @@ function App() {
     }, [nameId, isLoggedIn])();
 
     return <Column className='grow'>
-        <h1>Tanks!</h1>
-        {nameId.name === '' && <JoinForm setNameId={setNameId} clientId={nameId.id}/>}
+        <Row>
+            <h1 className='grow'>Tanks!</h1>
+            {nameId.name !== '' &&
+                <Button className='PlayerInfo-Reset' onClick={() => setNameId(getNewNameId)} text='x'/>}
+        </Row>
         <ClientScreen logout={logout}/>
+        {nameId.name === '' && <JoinForm setNameId={setNameId} clientId={nameId.id}/>}
         {isLoggedIn && <Row>
             <Controls playerId={nameId.id} logout={logout}/>
-            <PlayerInfo playerId={nameId.id} logout={logout} reset={() => setNameId(getNewNameId)}/>
+            <PlayerInfo playerId={nameId.id} logout={logout}/>
             <Scoreboard/>
         </Row>
         }