diff --git a/frontend/src/lib/components/Room.svelte b/frontend/src/lib/components/Room.svelte
new file mode 100644
index 0000000..db8048f
--- /dev/null
+++ b/frontend/src/lib/components/Room.svelte
@@ -0,0 +1,16 @@
+<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/RoomList.svelte b/frontend/src/lib/components/RoomList.svelte
deleted file mode 100644
index 75c411f..0000000
--- a/frontend/src/lib/components/RoomList.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-    let name = "dio nastro";
-    let participants = 12;
-    let locked = true;
-</script>
-
-<div class="room bg-white rounded-lg shadow-md p-6 flex flex-col gap-2 items-start">
-    <h2 class="text-xl font-semibold flex items-center gap-2">
-        {name}
-        {#if locked}
-            <span class="text-gray-500">🔒</span>
-        {/if}
-    </h2>
-    <span class="text-gray-600 text-sm">
-        {participants} participant{participants === 1 ? '' : 's'}
-    </span>
-</div>
\ No newline at end of file
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 7de4960..0c2e8f5 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -10,12 +10,12 @@ const SongSchema = z.object({
 })
 export type Song = z.infer<typeof SongSchema>
 
-export const parseSong = async function (song: any): Promise<Song> {
+export const parseSong = async function(song: any): Promise<Song> {
     let resp = await SongSchema.parseAsync(song)
     return resp
 }
 
-export const createEmptySong = function (): Song {
+export const createEmptySong = function(): Song {
     return {
         uuid: "-1",
         title: "",
@@ -31,11 +31,25 @@ const SuggestionSchema = SongSchema.extend({
 })
 export type Suggestion = z.infer<typeof SuggestionSchema>
 
-export const parseSuggestion = async function (sugg: any): Promise<Suggestion> {
+export const parseSuggestion = async function(sugg: any): Promise<Suggestion> {
     let resp = await SuggestionSchema.parseAsync(sugg)
     return resp
 }
 
+const RoomSchema = z.object({
+    id: z.string(),
+    name: z.string(),
+    private: z.boolean(),
+    coords: z.tuple([z.number(), z.number()]),
+    range: z.number().int()
+})
+export type Room = z.infer<typeof RoomSchema>
+
+export const parseRoom = async function(room: any): Promise<Room> {
+    let resp = await RoomSchema.parseAsync(room)
+    return resp
+}
+
 export type FetchError = {
     code: number
     message: string
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 7f0da53..e5c870a 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
-    import RoomList from "$lib/components/RoomList.svelte"
+    import RoomComponent from "$lib/components/Room.svelte"
+    import { parseRoom, type Room } from "$lib/types"
+
+    let room: Room = { id: "asd", coords: [0.123, 0.456], name: "scatolame party", private: true, range: 124 }
 </script>
 
 <div class="h-full w-full flex-row justify-center p-4">
@@ -7,17 +10,17 @@
         <h1>Scan your nearby rooms</h1>
         <img src="/smerdoradar.gif" alt="radar" class="h-64 w-64" />
         <div class="max-h-50 w-full overflow-y-auto">
-            <RoomList />
-            <RoomList />
-            <RoomList />
-            <RoomList />
-            <RoomList />
-            <RoomList />
-            <RoomList />
-            <RoomList />
-            <RoomList />
+            <RoomComponent {room} />
+            <RoomComponent {room} />
+            <RoomComponent {room} />
+            <RoomComponent {room} />
+            <RoomComponent {room} />
+            <RoomComponent {room} />
+            <RoomComponent {room} />
+            <RoomComponent {room} />
+            <RoomComponent {room} />
         </div>
-        <div class="fixed bottom-0 right-0">
+        <div class="fixed right-0 bottom-0">
             <button class="mt-4 justify-end rounded bg-blue-500 px-6 py-2 text-white transition-colors hover:bg-blue-600 active:bg-blue-700"> + </button>
         </div>
     </div>