diff --git a/lib/music_library_web/components/record_components.ex b/lib/music_library_web/components/record_components.ex
index a3f25038..c17d30ca 100644
--- a/lib/music_library_web/components/record_components.ex
+++ b/lib/music_library_web/components/record_components.ex
@@ -82,6 +82,16 @@ defmodule MusicLibraryWeb.RecordComponents do
       id="records"
       phx-update="stream"
     >
+      <li
+        id="no-records-list"
+        class="hidden rounded-lg bg-zinc-50 p-8 text-center only:block dark:bg-zinc-800"
+      >
+        <.icon name="hero-musical-note" class="mx-auto mb-4 size-12 text-zinc-400" />
+        <p class="text-zinc-600 dark:text-zinc-400">
+          {gettext("No records yet")}
+        </p>
+      </li>
+
       <li
         :for={{id, record} <- @records}
         phx-click={JS.navigate(@record_show_path.(record))}
@@ -255,6 +265,16 @@ defmodule MusicLibraryWeb.RecordComponents do
             "mt-4 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4 md:grid-cols-6 xl:grid-cols-8"
         ]}
       >
+        <li
+          id={"no-records-#{@id}"}
+          class="col-span-full hidden rounded-lg bg-zinc-50 p-8 text-center only:block dark:bg-zinc-800"
+        >
+          <.icon name="hero-musical-note" class="mx-auto mb-4 size-12 text-zinc-400" />
+          <p class="text-zinc-600 dark:text-zinc-400">
+            {gettext("No records yet")}
+          </p>
+        </li>
+
         <li :for={{id, record} <- @records} id={id} class="relative">
           <div
             class="group relative cursor-pointer"
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index d4ddb784..9cb28a71 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -2314,3 +2314,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Add a new record"
 msgstr ""
+
+#: lib/music_library_web/components/record_components.ex
+#, elixir-autogen, elixir-format
+msgid "No records yet"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index 46a3766e..8368d1df 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -2314,3 +2314,8 @@ msgstr ""
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Add a new record"
 msgstr ""
+
+#: lib/music_library_web/components/record_components.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "No records yet"
+msgstr ""