diff --git a/leaky-ships/pages/dev/lobby.tsx b/leaky-ships/pages/dev/lobby.tsx
index cd672e4..f9e3d41 100644
--- a/leaky-ships/pages/dev/lobby.tsx
+++ b/leaky-ships/pages/dev/lobby.tsx
@@ -12,7 +12,7 @@ export default function Home() {
     if (enemy) return
     const interval = setInterval(() => setDots((e) => (e % 3) + 1), 1000)
     return () => clearInterval(interval)
-  })
+  }, [])
 
   return (
     <div id="box">
@@ -31,7 +31,7 @@ export default function Home() {
       </button>
       <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">
+          <h1 className="font-checkpoint my-4 mx-32 border-y-4 border-slate-700 text-center text-6xl leading-tight tracking-widest">
             Leaky
             <br />
             Ships
@@ -41,7 +41,7 @@ export default function Home() {
       <div className="mx-32 flex flex-col self-stretch rounded-3xl bg-gray-400">
         <div className="flex items-center justify-between border-b-2 border-slate-900">
           <Icon src="speech_bubble.png" text="Chat" />
-          <h1 className="farro text-5xl font-medium">
+          <h1 className="font-farro text-5xl font-medium">
             Game-PIN: <span className="underline">3169</span>
           </h1>
           <Icon src="gear.png" text="Settings" />
@@ -54,7 +54,7 @@ export default function Home() {
             edit={true}
           />
           <p
-            className="farro m-4 text-6xl font-semibold"
+            className="font-farro m-4 text-6xl font-semibold"
             onClick={() => setEnemy((e) => !e)}
           >
             VS
@@ -62,13 +62,13 @@ export default function Home() {
           {enemy ? (
             <Player src="player_red.png" text="Spieler 2" />
           ) : (
-            <p className="farro m-12 w-64 text-center text-5xl font-medium">
+            <p className="font-farro m-12 w-64 text-center text-5xl font-medium">
               Warte auf Spieler 2 {Array.from(Array(dots), () => ".").join("")}
             </p>
           )}
         </div>
         <div className="flex items-center justify-center border-t-2 border-slate-900">
-          <button className="farro m-8 rounded-xl bg-amber-400 px-12 py-4 text-5xl font-medium">
+          <button className="font-farro m-8 rounded-xl bg-amber-400 px-12 py-4 text-5xl font-medium">
             START
           </button>
         </div>
@@ -104,7 +104,7 @@ function Player({
     <div className="m-4 flex flex-col items-center">
       <p
         className={classNames(
-          "farro my-8 text-5xl",
+          "font-farro my-8 text-5xl",
           primary ? "font-semibold" : "font-normal"
         )}
       >
diff --git a/leaky-ships/styles/globals.css b/leaky-ships/styles/globals.css
index 1583aa5..cd7766b 100644
--- a/leaky-ships/styles/globals.css
+++ b/leaky-ships/styles/globals.css
@@ -14,10 +14,10 @@
   image-rendering: crisp-edges;
 }
 
-.farro {
+.font-farro {
   font-family: "Farro", sans-serif;
 }
 
-.CP_Font {
+.font-checkpoint {
   font-family: "CP_Font", sans-serif;
 }