diff --git a/backend/src/app.py b/backend/src/app.py
index 0fc9f9d..aa9d4ee 100644
--- a/backend/src/app.py
+++ b/backend/src/app.py
@@ -73,7 +73,7 @@ def on_leave(data):
 @app.get("/api/join")
 def join():
     room_id = request.args.get("room")
-    code = request.args.get("code")
+    code = request.args.get("pin")
 
     if room_id is None:
         return error("Missing room id")
@@ -81,8 +81,11 @@ def join():
     if (room := state.rooms.get(int(room_id))) is None:
         return error("Invalid room")
 
-    if room.pin is not None and room.pin != code:
-        return error("Invalid code")
+    if room.pin is not None:
+        if code is None:
+            return error("Missing code")
+        if int(room.pin) != int(code):
+            return error("Invalid code")
 
     distance = distance_between_coords(
         lhs=room.coord,
diff --git a/frontend/src/lib/components/RoomComponent.svelte b/frontend/src/lib/components/RoomComponent.svelte
index 4e742db..0192683 100644
--- a/frontend/src/lib/components/RoomComponent.svelte
+++ b/frontend/src/lib/components/RoomComponent.svelte
@@ -1,19 +1,45 @@
 <script lang="ts">
     import { type Room } from "$lib/types"
     let { room }: { room: Room } = $props()
+    let showPinModal: boolean = $state(false)
+    let pin: number = $state()
 </script>
 
-<a
-    class="flex w-82 cursor-pointer flex-row items-center rounded-md border border-dark-pine-muted bg-light-pine-overlay p-3 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
-    href="/room/{room.id}"
+<div
+    class="flex gap-2 w-82 cursor-pointer flex-col rounded-md border border-dark-pine-muted bg-light-pine-overlay p-3 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
 >
-    <div class="flex flex-row">
-        {room.name}
-        {room.private ? "🔒" : ""}
-    </div>
-    <div class="grow"></div>
-    <div class="flex flex-row items-center gap-2">
-        <div class="font-mono">{Math.round(room.distance)}m</div>
-        <div class="rounded bg-light-pine-blue px-2 py-0.5 text-dark-pine-text dark:bg-dark-pine-blue">Join</div>
-    </div>
-</a>
+    <button
+        class="flex flex-row items-center"
+        onclick={() => {
+            if (!room.private) {
+                window.location.href = "/room/" + room.id
+                return
+            }
+            showPinModal = !showPinModal
+        }}
+    >
+        <div class="flex flex-row">
+            {room.name}
+            {room.private ? "🔒" : ""}
+        </div>
+        <div class="grow"></div>
+        <div class="flex flex-row items-center gap-2">
+            <div class="font-mono">{Math.round(room.distance)}m</div>
+            <div class="rounded bg-light-pine-blue px-2 py-0.5 text-dark-pine-text dark:bg-dark-pine-blue">Join</div>
+        </div>
+    </button>
+    {#if showPinModal}
+        <input
+            placeholder="PIN (requied)"
+            class="p-2 text-xl rounded-md border-dark-pine-muted bg-light-pine-overlay dark:bg-dark-pine-base hover:dark:bg-light-pine-base/20 duration-100 outline-none focus:ring-2"
+            type="number"
+            bind:value={pin}
+        />
+        <button
+            onclick={() => {
+                window.location.href = `/room/${room.id}?pin=${pin}`
+            }}
+            class="p-2 text-xl rounded-md border-dark-pine-muted bg-light-pine-overlay dark:bg-dark-pine-base hover:dark:bg-light-pine-base/20 duration-100 outline-none focus:ring-2">JOIN</button
+        >
+    {/if}
+</div>