diff --git a/ZeroSpace/ZeroSpace.Web/Pages/PlanetaryMasteryItemIndex.razor b/ZeroSpace/ZeroSpace.Web/Pages/PlanetaryMasteryItemIndex.razor
new file mode 100644
index 0000000..f9aa82f
--- /dev/null
+++ b/ZeroSpace/ZeroSpace.Web/Pages/PlanetaryMasteryItemIndex.razor
@@ -0,0 +1,35 @@
+@page "/planetary-mastery-items"
+
+<PageTitle>Planetary Mastery Items</PageTitle>
+
+<div class="section-header d-flex align-items-center mb-4">
+    <h1 class="mb-0">Planetary Mastery Items</h1>
+    <span class="badge badge-mastery ms-3">@PlanetaryMasteryItems.All.Count Items</span>
+    <div class="ms-3 flex-grow-1 border-bottom opacity-25"></div>
+</div>
+
+<div class="pmi-grid">
+    @foreach (var item in PlanetaryMasteryItems.All.OrderBy(i => i.Name))
+    {
+        <article class="zs-glass-card pmi-card">
+            @if (item.ImageFileName is not null)
+            {
+                <img class="pmi-icon" src="images/planetary-mastery-items/@Uri.EscapeDataString(item.ImageFileName)" alt="@item.Name" loading="lazy" />
+            }
+            else
+            {
+                <div class="pmi-icon pmi-icon-placeholder" aria-hidden="true">✦</div>
+            }
+            <div class="pmi-body">
+                <h2 class="pmi-name">@item.Name</h2>
+                <ol class="pmi-levels">
+                    @for (var tier = 0; tier < item.Levels.Count; tier++)
+                    {
+                        var tierLabel = (tier + 1).ToString("D2");
+                        <li class="pmi-level"><span class="pmi-tier">@tierLabel</span><span>@item.Levels[tier]</span></li>
+                    }
+                </ol>
+            </div>
+        </article>
+    }
+</div>