diff --git a/lib/music_library_web/components/core_components.ex b/lib/music_library_web/components/core_components.ex
index 7c67f050..014b237a 100644
--- a/lib/music_library_web/components/core_components.ex
+++ b/lib/music_library_web/components/core_components.ex
@@ -582,7 +582,7 @@ defmodule MusicLibraryWeb.CoreComponents do
     <div class="mt-4 md:mt-16">
       <.link
         navigate={@navigate}
-        class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
+        class="text-sm font-semibold leading-6 text-zinc-900 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"
       >
         <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
         <%= render_slot(@inner_block) %>
diff --git a/lib/music_library_web/live/record_live/import_component.ex b/lib/music_library_web/live/record_live/import_component.ex
index cf501010..f63207bd 100644
--- a/lib/music_library_web/live/record_live/import_component.ex
+++ b/lib/music_library_web/live/record_live/import_component.ex
@@ -112,7 +112,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
                 JS.push("import", value: %{id: @release_group.id, format: format}, page_loading: true)
               }
             >
-              <%= Records.Record.format_short_label(format) %>
+              <%= Records.Record.format_long_label(format) %>
             </.link>
           </.focus_wrap>
         </div>
diff --git a/lib/music_library_web/live/record_live/show.html.heex b/lib/music_library_web/live/record_live/show.html.heex
index a2f571db..0aae07f5 100644
--- a/lib/music_library_web/live/record_live/show.html.heex
+++ b/lib/music_library_web/live/record_live/show.html.heex
@@ -1,69 +1,93 @@
-<.header>
-  <.link
-    :for={artist <- @record.artists}
-    class=" hover:text-gray-500"
-    patch={~p"/records?query=mbid:#{artist.musicbrainz_id}"}
-  >
-    <%= artist.name %>
+<nav class="flex justify-end gap-x-4">
+  <.link patch={~p"/records/#{@record}/show/edit"} phx-click={JS.push_focus()}>
+    <.button>
+      <%= gettext("Edit") %>
+    </.button>
   </.link>
-  <:subtitle>
-    <%= @record.title %>
-  </:subtitle>
-  <:actions>
-    <.link patch={~p"/records/#{@record}/show/edit"} phx-click={JS.push_focus()}>
-      <.button>
-        <%= gettext("Edit") %>
-      </.button>
-    </.link>
-    <.link
-      phx-click={JS.push("delete", value: %{id: @record.id})}
-      data-confirm={gettext("Are you sure?")}
-    >
-      <.button class="!bg-red-900 hover:!bg-red-700">
-        <%= gettext("Delete") %>
-      </.button>
-    </.link>
-  </:actions>
-</.header>
+  <.link
+    phx-click={JS.push("delete", value: %{id: @record.id})}
+    data-confirm={gettext("Are you sure?")}
+  >
+    <.button class="!bg-red-900 hover:!bg-red-700 dark:text-white">
+      <%= gettext("Delete") %>
+    </.button>
+  </.link>
+</nav>
 
-<div class="md:columns-2 mt-4">
-  <div class="relative block md:inline-block drop-shadow">
+<div class="md:columns-2 mt-4 px-4">
+  <div class="drop-shadow">
     <img
       class="w-full rounded-lg shadow"
       src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash || ""}"}
       alt={@record.title}
     />
-    <span class="absolute right-2 bottom-1 block text-white drop-shadow-md">
-      <%= Records.Record.format_short_label(@record.format) %>
-    </span>
   </div>
 
-  <.list>
-    <:item title={gettext("Type")}>
-      <span class="inline-flex items-center mr-2 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
-        <%= @record.type %>
-      </span>
-    </:item>
-    <:item title={gettext("Musicbrainz ID")}>
-      <a href={musicbrainz_url(@record)}>
-        <code><%= @record.musicbrainz_id %></code>
-      </a>
-    </:item>
-    <:item title={gettext("Release")}>
-      <%= Records.Record.format_release(@record.release) %>
-    </:item>
-    <:item title={gettext("Genres")}>
-      <span
-        :for={genre <- @record.genres}
-        class="inline-flex items-center mr-2 mb-2 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+  <div class="mt-4 md:mt-0">
+    <h1 class="text-base font-medium leading-6 text-zinc-700">
+      <.link
+        :for={artist <- @record.artists}
+        class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
+        patch={~p"/records?query=mbid:#{artist.musicbrainz_id}"}
       >
-        <%= genre %>
-      </span>
-    </:item>
-    <:item title={gettext("Purchased at")}><%= @record.purchased_at %></:item>
-    <:item title={gettext("Inserted at")}><%= @record.inserted_at %></:item>
-    <:item title={gettext("Updated at")}><%= @record.updated_at %></:item>
-  </.list>
+        <%= artist.name %>
+      </.link>
+    </h1>
+    <h2 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
+      <%= @record.title %>
+    </h2>
+    <p class="mt-1 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+      <%= Records.Record.format_release(@record.release) %> · <%= Records.Record.format_long_label(
+        @record.format
+      ) %> · <%= Records.Record.type_long_label(@record.type) %>
+    </p>
+  </div>
+  <div>
+    <dl class="mt-4 divide-y divide-gray-100 dark:divide-slate-300/30">
+      <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          <%= gettext("Genres") %>
+        </dt>
+        <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
+          <%= Enum.join(@record.genres, ", ") %>
+        </dd>
+      </div>
+      <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          <%= gettext("MusicBrainz ID") %>
+        </dt>
+        <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
+          <a href={musicbrainz_url(@record)}>
+            <code><%= @record.musicbrainz_id %></code>
+          </a>
+        </dd>
+      </div>
+      <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          <%= gettext("Purchased on") %>
+        </dt>
+        <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
+          <%= @record.purchased_at %>
+        </dd>
+      </div>
+      <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          <%= gettext("Inserted at") %>
+        </dt>
+        <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
+          <%= @record.inserted_at %>
+        </dd>
+      </div>
+      <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          <%= gettext("Updated at") %>
+        </dt>
+        <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
+          <%= @record.updated_at %>
+        </dd>
+      </div>
+    </dl>
+  </div>
 </div>
 
 <div class="mt-8">
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index e5955801..91392cdc 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -123,7 +123,6 @@ msgid "No cover selected"
 msgstr ""
 
 #: lib/music_library_web/live/record_live/form_component.ex:50
-#: lib/music_library_web/live/record_live/show.html.heex:63
 #, elixir-autogen, elixir-format
 msgid "Purchased at"
 msgstr ""
@@ -135,7 +134,6 @@ msgid "Record updated successfully"
 msgstr ""
 
 #: lib/music_library_web/live/record_live/form_component.ex:45
-#: lib/music_library_web/live/record_live/show.html.heex:52
 #: lib/music_library_web/live/wishlist_live/show.html.heex:52
 #, elixir-autogen, elixir-format
 msgid "Release"
@@ -152,7 +150,6 @@ msgid "Saving..."
 msgstr ""
 
 #: lib/music_library_web/live/record_live/form_component.ex:33
-#: lib/music_library_web/live/record_live/show.html.heex:42
 #: lib/music_library_web/live/wishlist_live/show.html.heex:42
 #, elixir-autogen, elixir-format
 msgid "Type"
@@ -174,7 +171,7 @@ msgid "Search for records"
 msgstr ""
 
 #: lib/music_library_web/live/record_live/index.html.heex:166
-#: lib/music_library_web/live/record_live/show.html.heex:20
+#: lib/music_library_web/live/record_live/show.html.heex:9
 #: lib/music_library_web/live/wishlist_live/index.html.heex:176
 #: lib/music_library_web/live/wishlist_live/show.html.heex:20
 #, elixir-autogen, elixir-format
@@ -182,7 +179,7 @@ msgid "Are you sure?"
 msgstr ""
 
 #: lib/music_library_web/live/record_live/index.html.heex:168
-#: lib/music_library_web/live/record_live/show.html.heex:23
+#: lib/music_library_web/live/record_live/show.html.heex:12
 #: lib/music_library_web/live/wishlist_live/index.html.heex:178
 #: lib/music_library_web/live/wishlist_live/show.html.heex:23
 #, elixir-autogen, elixir-format
@@ -192,7 +189,7 @@ msgstr ""
 #: lib/music_library_web/live/record_live/index.ex:54
 #: lib/music_library_web/live/record_live/index.html.heex:157
 #: lib/music_library_web/live/record_live/show.ex:50
-#: lib/music_library_web/live/record_live/show.html.heex:15
+#: lib/music_library_web/live/record_live/show.html.heex:4
 #: lib/music_library_web/live/wishlist_live/index.ex:55
 #: lib/music_library_web/live/wishlist_live/index.html.heex:157
 #: lib/music_library_web/live/wishlist_live/show.ex:50
@@ -266,30 +263,29 @@ msgstr ""
 msgid "View on MusicBrainz"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:71
+#: lib/music_library_web/live/record_live/show.html.heex:95
 #, elixir-autogen, elixir-format
 msgid "Back to records"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:55
+#: lib/music_library_web/live/record_live/show.html.heex:49
 #: lib/music_library_web/live/wishlist_live/show.html.heex:55
 #, elixir-autogen, elixir-format
 msgid "Genres"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:64
+#: lib/music_library_web/live/record_live/show.html.heex:75
 #: lib/music_library_web/live/wishlist_live/show.html.heex:63
 #, elixir-autogen, elixir-format
 msgid "Inserted at"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:47
 #: lib/music_library_web/live/wishlist_live/show.html.heex:47
 #, elixir-autogen, elixir-format
 msgid "Musicbrainz ID"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:65
+#: lib/music_library_web/live/record_live/show.html.heex:83
 #: lib/music_library_web/live/wishlist_live/show.html.heex:64
 #, elixir-autogen, elixir-format
 msgid "Updated at"
@@ -345,3 +341,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Types"
 msgstr ""
+
+#: lib/music_library_web/live/record_live/show.html.heex:57
+#, elixir-autogen, elixir-format
+msgid "MusicBrainz ID"
+msgstr ""
+
+#: lib/music_library_web/live/record_live/show.html.heex:67
+#, elixir-autogen, elixir-format
+msgid "Purchased on"
+msgstr ""
diff --git a/test/music_library_web/live/record_show_test.exs b/test/music_library_web/live/record_show_test.exs
index e3ca18e6..685d4aa7 100644
--- a/test/music_library_web/live/record_show_test.exs
+++ b/test/music_library_web/live/record_show_test.exs
@@ -33,7 +33,7 @@ defmodule MusicLibraryWeb.RecordShowTest do
 
       assert html =~ escape(record.title)
       assert html =~ to_string(record.release)
-      assert html =~ Record.format_short_label(record.format)
+      assert html =~ Record.format_long_label(record.format)
       assert html =~ record.release
       assert html =~ ~p"/covers/#{record.id}?vsn=#{record.cover_hash}"
       assert html =~ Phoenix.HTML.Safe.to_iodata(record.purchased_at)