diff --git a/frontend/src/app.css b/frontend/src/app.css
index 9f0c24a..cb4fb29 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
 @import 'tailwindcss';
 
 @keyframes spin-slower {
@@ -14,6 +15,20 @@
     animation: spin-slower 15s linear infinite;
 }
 
+html,
+body {
+    @apply bg-light-pine-base dark:bg-dark-pine-base;
+    /* or use your color class here */
+    height: 100%;
+    margin: 0;
+}
+
+.lilita-one-regular {
+    font-family: "Lilita One", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
 @theme {
     --color-dark-pine-base: hsl(249deg, 22%, 12%);
     --color-dark-pine-surface: hsl(247deg, 23%, 15%);
diff --git a/frontend/src/lib/components/Room.svelte b/frontend/src/lib/components/Room.svelte
deleted file mode 100644
index db8048f..0000000
--- a/frontend/src/lib/components/Room.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-    import { type Room } from "$lib/types"
-    let { room }: { room: Room } = $props()
-</script>
-
-<div class="room flex flex-col items-start gap-2 rounded-lg bg-white p-6 shadow-md">
-    <h2 class="flex items-center gap-2 text-xl font-semibold">
-        {room.name}
-        {#if room.private}
-            <span class="text-gray-500">🔒</span>
-        {/if}
-    </h2>
-    <!-- <span class="text-sm text-gray-600"> -->
-    <!-- {participants} participant{participants === 1 ? "" : "s"} -->
-    <!-- </span> -->
-</div>
diff --git a/frontend/src/lib/components/RoomComponent.svelte b/frontend/src/lib/components/RoomComponent.svelte
new file mode 100644
index 0000000..e98e000
--- /dev/null
+++ b/frontend/src/lib/components/RoomComponent.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { type Room } from "$lib/types"
+    let { room }: { room: Room } = $props()
+</script>
+
+<button
+    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"
+>
+    <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">64m</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>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index e885df9..e4c699e 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -4,6 +4,6 @@
     let { children } = $props()
 </script>
 
-<div class="min-h-screen w-full bg-light-pine-base px-6 text-light-pine-text sm:px-20 md:px-40 lg:px-80 dark:bg-dark-pine-base dark:text-dark-pine-text">
+<div class="min-h-screen w-full bg-light-pine-base px-0 text-light-pine-text sm:px-20 md:px-40 lg:px-80 dark:bg-dark-pine-base dark:text-dark-pine-text">
     {@render children()}
 </div>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 75d43d8..319ce8d 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,10 +1,40 @@
 <script lang="ts">
-    import RoomComponent from "$lib/components/Room.svelte"
+    import RoomComponent from "$lib/components/RoomComponent.svelte"
     import { parseRoom, type Room } from "$lib/types"
+    import { Plus } from "@lucide/svelte"
 
     let room: Room = { id: "asd", coords: [0.123, 0.456], name: "scatolame party", private: true, range: 124 }
 </script>
 
+<div class="flex flex-col items-center gap-2">
+    <div class="flex flex-row items-center gap-4 py-4">
+        <img src="icon_small.png" class="h-12 w-12" alt="chillbox icon" />
+        <span class="lilita-one-regular text-6xl font-bold">ChillBox</span>
+    </div>
+
+    <img src="/smerdo_radar_bonus.gif" alt="radar" class="h-64 w-64" />
+    <span class="animate-pulse text-sm italic">Scanning for rooms near you...</span>
+
+    <button class="fixed right-4 bottom-4 flex flex-row gap-1 rounded-xl bg-light-pine-blue p-2 text-dark-pine-text sm:right-20 md:right-40 lg:right-80 dark:bg-dark-pine-blue">
+        <span> New Room </span>
+        <Plus />
+    </button>
+
+    <div class="flex flex-col gap-2">
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+    </div>
+</div>
 <!-- <div class="h-full w-full flex-row justify-center p-4"> -->
 <!--     <div class="relative min-h-screen justify-center justify-items-center"> -->
 <!--         <h1>Scan your nearby rooms</h1> -->
diff --git a/frontend/static/CHILLBOX.svg b/frontend/static/CHILLBOX.svg
new file mode 100644
index 0000000..8133a23
--- /dev/null
+++ b/frontend/static/CHILLBOX.svg
@@ -0,0 +1,3 @@
+<svg width="374" height="70" viewBox="0 0 374 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.0373 0.935995C34.7093 0.935995 38.8053 1.608 42.3253 2.952C45.9093 4.232 47.7013 5.992 47.7013 8.232C47.7013 10.472 46.8373 13.256 45.1093 16.584C43.4453 19.848 42.0373 21.48 40.8853 21.48C40.5653 21.48 40.1813 21.32 39.7333 21C39.3493 20.616 38.3893 20.232 36.8533 19.848C35.3813 19.4 34.1013 19.176 33.0133 19.176C29.3013 19.176 26.2933 20.488 23.9893 23.112C21.7493 25.736 20.6293 29.768 20.6293 35.208C20.6293 40.584 21.7813 44.584 24.0853 47.208C26.4533 49.832 29.4293 51.144 33.0133 51.144C34.4853 51.144 36.1173 50.952 37.9093 50.568C39.7653 50.12 41.0773 49.512 41.8453 48.744C41.9733 48.616 42.2293 48.552 42.6133 48.552C42.9973 48.552 43.7013 49.288 44.7253 50.76C45.8133 52.168 46.8053 54.056 47.7013 56.424C48.5973 58.728 49.0453 60.52 49.0453 61.8C49.0453 64.296 47.1253 66.28 43.2853 67.752C39.4453 69.224 34.9013 69.96 29.6533 69.96C21.2053 69.96 14.2613 66.984 8.82125 61.032C3.38125 55.08 0.66125 46.696 0.66125 35.88C0.66125 25 3.44525 16.456 9.01325 10.248C14.6453 4.04 21.6533 0.935995 30.0373 0.935995ZM99.1138 67.64C99.1138 68.5467 96.4204 69 91.0338 69C85.6471 69 82.9538 68.5467 82.9538 67.64V49.24H71.7538V67.64C71.7538 68.5467 69.0604 69 63.6738 69C58.2871 69 55.5938 68.5467 55.5938 67.64V14.6C55.5938 13.48 58.2871 12.92 63.6738 12.92C69.0604 12.92 71.7538 13.48 71.7538 14.6V33.4H82.9538V14.76C82.9538 14.0133 84.2871 13.48 86.9538 13.16C88.3404 13.0533 89.7004 13 91.0338 13L95.1138 13.16C97.7804 13.48 99.1138 14.0133 99.1138 14.76V67.64ZM112.358 55.24V26.76H106.678C105.771 26.76 105.131 25.6133 104.758 23.32C104.598 22.2 104.518 21.0533 104.518 19.88C104.518 18.7067 104.598 17.56 104.758 16.44C105.131 14.1467 105.771 13 106.678 13H133.558C134.465 13 135.078 14.1467 135.398 16.44C135.611 17.56 135.718 18.7067 135.718 19.88C135.718 21.0533 135.611 22.2 135.398 23.32C135.078 25.6133 134.465 26.76 133.558 26.76H128.198V55.24H133.798C134.705 55.24 135.345 56.3867 135.718 58.68C135.931 59.8 136.038 60.9467 136.038 62.12C136.038 63.2933 135.931 64.44 135.718 65.56C135.345 67.8533 134.705 69 133.798 69H106.838C105.931 69 105.318 67.8533 104.998 65.56C104.785 64.44 104.678 63.2933 104.678 62.12C104.678 60.9467 104.785 59.8 104.998 58.68C105.318 56.3867 105.931 55.24 106.838 55.24H112.358ZM140.575 64.28V14.52C140.575 13.4 143.268 12.84 148.655 12.84C154.095 12.84 156.815 13.4 156.815 14.52V53.72H169.135C170.095 53.72 170.762 54.9733 171.135 57.48C171.295 58.7067 171.375 59.96 171.375 61.24C171.375 62.52 171.295 63.8267 171.135 65.16C170.708 67.72 170.015 69 169.055 69H144.415C143.242 69 142.308 68.52 141.615 67.56C140.922 66.6 140.575 65.5067 140.575 64.28ZM175.341 64.28V14.52C175.341 13.4 178.034 12.84 183.421 12.84C188.861 12.84 191.581 13.4 191.581 14.52V53.72H203.901C204.861 53.72 205.527 54.9733 205.901 57.48C206.061 58.7067 206.141 59.96 206.141 61.24C206.141 62.52 206.061 63.8267 205.901 65.16C205.474 67.72 204.781 69 203.821 69H179.181C178.007 69 177.074 68.52 176.381 67.56C175.687 66.6 175.341 65.5067 175.341 64.28ZM258.842 19.176C258.842 25.832 255.962 30.888 250.202 34.344C253.338 35.496 255.962 37.48 258.074 40.296C260.186 43.112 261.242 47.112 261.242 52.296C261.242 57.416 259.322 61.48 255.482 64.488C251.706 67.496 246.266 69 239.162 69H216.506C215.418 69 214.522 68.648 213.818 67.944C213.114 67.176 212.762 66.184 212.762 64.968V3.528C212.762 2.824 212.858 2.376 213.05 2.184C213.306 1.928 213.786 1.8 214.49 1.8H236.378C251.354 1.8 258.842 7.592 258.842 19.176ZM231.194 17.352V29.928H231.674C237.818 29.928 240.89 27.88 240.89 23.784C240.89 21.544 240.282 19.912 239.066 18.888C237.914 17.864 235.962 17.352 233.21 17.352H231.194ZM231.194 41.256V53.736H232.922C235.674 53.736 237.69 53.224 238.97 52.2C240.25 51.176 240.89 49.544 240.89 47.304C240.89 45.064 240.282 43.496 239.066 42.6C237.914 41.704 235.962 41.256 233.21 41.256H231.194ZM291.666 69.8C284.2 69.8 278.093 67.3467 273.346 62.44C268.653 57.5333 266.306 50.3867 266.306 41C266.306 31.56 268.68 24.4133 273.426 19.56C278.226 14.7067 284.386 12.28 291.906 12.28C299.48 12.28 305.586 14.68 310.226 19.48C314.866 24.2267 317.186 31.4533 317.186 41.16C317.186 50.8133 314.813 58.0133 310.066 62.76C305.32 67.4533 299.186 69.8 291.666 69.8ZM291.746 27.64C289.186 27.64 287.026 28.8133 285.266 31.16C283.56 33.5067 282.706 36.8133 282.706 41.08C282.706 45.2933 283.533 48.5467 285.186 50.84C286.84 53.08 289 54.2 291.666 54.2C294.386 54.2 296.573 53.0533 298.226 50.76C299.933 48.4667 300.786 45.1867 300.786 40.92C300.786 36.6533 299.906 33.3733 298.146 31.08C296.44 28.7867 294.306 27.64 291.746 27.64ZM353.289 15.16C353.929 13.56 357.263 12.76 363.289 12.76C364.836 12.76 366.729 12.8933 368.969 13.16C371.263 13.3733 372.409 13.5867 372.409 13.8L358.809 41.48L372.889 67.96C373.049 68.2267 371.903 68.4933 369.449 68.76C366.996 68.9733 364.916 69.08 363.209 69.08C356.436 69.08 352.729 68.1733 352.089 66.36L346.089 51.08L340.649 66.84C340.116 68.3333 336.703 69.08 330.409 69.08C328.863 69.08 326.943 68.9733 324.649 68.76C322.356 68.5467 321.316 68.2533 321.529 67.88L334.009 40.2L321.049 13.8C320.889 13.5333 321.983 13.2933 324.329 13.08C326.729 12.8133 328.756 12.68 330.409 12.68C337.129 12.68 340.809 13.64 341.449 15.56L346.969 29L353.289 15.16Z" fill="white"/>
+</svg>
diff --git a/frontend/static/icon_small.png b/frontend/static/icon_small.png
new file mode 100644
index 0000000..f518ac7
Binary files /dev/null and b/frontend/static/icon_small.png differ