diff --git a/backend/src/app.py b/backend/src/app.py
index 247ba5f..c11cf37 100644
--- a/backend/src/app.py
+++ b/backend/src/app.py
@@ -9,7 +9,7 @@ from .state import State
 from .connect import get_connection
 from .room import Room
 from .song import Song, init_db, get_song_by_title_artist, add_song_in_db, get_song_by_uuid
-from .song_fetch import lastfm_query_search, yt_get_audio_url, yt_search_song
+from .song_fetch import query_search, yt_get_audio_url, yt_search_song
 from .qrcode_gen import generate_qr
 
 
@@ -182,7 +182,8 @@ def add_song():
     if (query := request.args.get("query")) is None:
         return error("Missing query")
 
-    info = lastfm_query_search(query)
+    if (info := query_search(query)) is None:
+        return error("Search failed")
 
     if (song := get_song_by_title_artist(info.title, info.artist)) is None:
         ## song not found, downolad from YT
diff --git a/backend/src/song_fetch.py b/backend/src/song_fetch.py
index ec15485..665e2c9 100644
--- a/backend/src/song_fetch.py
+++ b/backend/src/song_fetch.py
@@ -51,7 +51,23 @@ def _lastfm_getinfo(name: str, artist: str) -> tuple[str, list[str]]:  # ( image
     )
 
 
-def lastfm_query_search(query: str) -> SongInfo:
+def _yt_search(query: str) -> tuple[str, str]:
+    ydl_opts = {
+        "format": "bestaudio",
+        "default_search": "ytsearch1",
+        "outtmpl": "%(title)s.%(ext)s",
+        "skip_download": True,
+    }
+
+    with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+        info = ydl.extract_info(query, download=False)
+
+    first = info["entries"][0]
+
+    return first["track"], first["artists"][0]
+
+
+def query_search(query: str) -> SongInfo | None:
     name, artist = _lastfm_search(query)
 
     img_id, tags = _lastfm_getinfo(name, artist)
diff --git a/frontend/src/lib/components/RoomList.svelte b/frontend/src/lib/components/RoomList.svelte
new file mode 100644
index 0000000..75c411f
--- /dev/null
+++ b/frontend/src/lib/components/RoomList.svelte
@@ -0,0 +1,17 @@
+<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/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 3e7cfc2..7f0da53 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,8 +1,24 @@
 <script lang="ts">
+    import RoomList from "$lib/components/RoomList.svelte"
 </script>
 
-<div class="flex h-full w-full items-center justify-center p-4">
-    <div class="">
+<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>
+        <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 />
+        </div>
+        <div class="fixed bottom-0 right-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>
 </div>
diff --git a/frontend/static/smerdoradar.gif b/frontend/static/smerdoradar.gif
new file mode 100644
index 0000000..eacb878
Binary files /dev/null and b/frontend/static/smerdoradar.gif differ