diff --git a/lib/pinchflat_web/controllers/media/media_item_controller.ex b/lib/pinchflat_web/controllers/media/media_item_controller.ex
new file mode 100644
index 0000000..3db81d4
--- /dev/null
+++ b/lib/pinchflat_web/controllers/media/media_item_controller.ex
@@ -0,0 +1,11 @@
+defmodule PinchflatWeb.Media.MediaItemController do
+  use PinchflatWeb, :controller
+
+  alias Pinchflat.Media
+
+  def show(conn, %{"id" => id}) do
+    media_item = Media.get_media_item!(id)
+
+    render(conn, :show, media_item: media_item)
+  end
+end
diff --git a/lib/pinchflat_web/controllers/media/media_item_html.ex b/lib/pinchflat_web/controllers/media/media_item_html.ex
new file mode 100644
index 0000000..d0c0667
--- /dev/null
+++ b/lib/pinchflat_web/controllers/media/media_item_html.ex
@@ -0,0 +1,5 @@
+defmodule PinchflatWeb.Media.MediaItemHTML do
+  use PinchflatWeb, :html
+
+  embed_templates "media_item_html/*"
+end
diff --git a/lib/pinchflat_web/controllers/media/media_item_html/show.html.heex b/lib/pinchflat_web/controllers/media/media_item_html/show.html.heex
new file mode 100644
index 0000000..ac65a28
--- /dev/null
+++ b/lib/pinchflat_web/controllers/media/media_item_html/show.html.heex
@@ -0,0 +1,18 @@
+<div class="mb-6 flex gap-3 flex-row items-center justify-between">
+  <div class="flex gap-3 items-center">
+    <.link :if={@conn.params["source_id"]} navigate={~p"/sources/#{@media_item.source_id}"}>
+      <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
+    </.link>
+    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
+      Media Item #<%= @media_item.id %>
+    </h2>
+  </div>
+</div>
+<div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
+  <div class="max-w-full overflow-x-auto">
+    <div class="flex flex-col gap-10 dark:text-white">
+      <h3 class="font-bold text-xl">Attributes</h3>
+      <.list_items_from_map map={Map.from_struct(@media_item)} />
+    </div>
+  </div>
+</div>
diff --git a/lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex b/lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex
index 63a5b6e..97332cf 100644
--- a/lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex
+++ b/lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex
@@ -41,7 +41,10 @@
             <%= String.slice(media_item.title, 0..50) %>...
           </:col>
           <:col :let={media_item} label="" class="flex place-content-evenly">
-            <.link navigate={~p"/media/#{media_item.id}"} class="hover:text-secondary duration-200 ease-in-out mx-0.5">
+            <.link
+              navigate={~p"/sources/#{@source.id}/media/#{media_item.id}"}
+              class="hover:text-secondary duration-200 ease-in-out mx-0.5"
+            >
               <.icon name="hero-eye" />
             </.link>
           </:col>
@@ -57,7 +60,10 @@
             <%= String.slice(media_item.title, 0..50) %>...
           </:col>
           <:col :let={media_item} label="" class="flex place-content-evenly">
-            <.link navigate={~p"/media/#{media_item.id}"} class="hover:text-secondary duration-200 ease-in-out mx-0.5">
+            <.link
+              navigate={~p"/sources/#{@source.id}/media/#{media_item.id}"}
+              class="hover:text-secondary duration-200 ease-in-out mx-0.5"
+            >
               <.icon name="hero-eye" />
             </.link>
           </:col>
diff --git a/lib/pinchflat_web/router.ex b/lib/pinchflat_web/router.ex
index 3610003..55f177a 100644
--- a/lib/pinchflat_web/router.ex
+++ b/lib/pinchflat_web/router.ex
@@ -20,7 +20,11 @@ defmodule PinchflatWeb.Router do
     get "/", PageController, :home
 
     resources "/media_profiles", MediaProfiles.MediaProfileController
-    resources "/sources", MediaSources.SourceController
+    resources "/media", Media.MediaItemController, only: [:show]
+
+    resources "/sources", MediaSources.SourceController do
+      resources "/media", Media.MediaItemController, only: [:show]
+    end
   end
 
   # Other scopes may use custom stacks.
diff --git a/test/pinchflat_web/controllers/media_item_controller_test.exs b/test/pinchflat_web/controllers/media_item_controller_test.exs
new file mode 100644
index 0000000..eb0eab2
--- /dev/null
+++ b/test/pinchflat_web/controllers/media_item_controller_test.exs
@@ -0,0 +1,19 @@
+defmodule PinchflatWeb.MediaItemControllerTest do
+  use PinchflatWeb.ConnCase
+
+  import Pinchflat.MediaFixtures
+
+  describe "show media" do
+    setup [:create_media_item]
+
+    test "renders the page", %{conn: conn, media_item: media_item} do
+      conn = get(conn, ~p"/media/#{media_item}")
+      assert html_response(conn, 200) =~ "Media Item ##{media_item.id}"
+    end
+  end
+
+  defp create_media_item(_) do
+    media_item = media_item_fixture()
+    %{media_item: media_item}
+  end
+end