diff --git a/__snapshots__/prs-header--author-loading.png b/__snapshots__/prs-header--author-loading.png
new file mode 100644
index 0000000..50536cd
Binary files /dev/null and b/__snapshots__/prs-header--author-loading.png differ
diff --git a/__snapshots__/prs-header--loading.png b/__snapshots__/prs-header--loading.png
new file mode 100644
index 0000000..13c5a82
Binary files /dev/null and b/__snapshots__/prs-header--loading.png differ
diff --git a/__snapshots__/prs-header--long-and-no-spaces.png b/__snapshots__/prs-header--long-and-no-spaces.png
new file mode 100644
index 0000000..a80c11c
Binary files /dev/null and b/__snapshots__/prs-header--long-and-no-spaces.png differ
diff --git a/__snapshots__/prs-header--long-details.png b/__snapshots__/prs-header--long-details.png
new file mode 100644
index 0000000..1fb5dbc
Binary files /dev/null and b/__snapshots__/prs-header--long-details.png differ
diff --git a/__snapshots__/prs-header--short-details.png b/__snapshots__/prs-header--short-details.png
new file mode 100644
index 0000000..786109c
Binary files /dev/null and b/__snapshots__/prs-header--short-details.png differ
diff --git a/__snapshots__/prs-header.test.js.snap b/__snapshots__/prs-header.test.js.snap
new file mode 100644
index 0000000..68eea12
--- /dev/null
+++ b/__snapshots__/prs-header.test.js.snap
@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PRs/Header Author Loading smoke-test 1`] = `
+<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4 px-3">
+  <div class="text-lg text-base-content mb-2">
+    short title
+  </div>
+  <div class="pt-1">
+    <button class="btn btn-success btn-sm mr-3 align-middle">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           viewbox="0 0 18 18"
+           class="h-5 w-5 pt-1 flex-none fill-success-content"
+      >
+        <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
+        </path>
+      </svg>
+      Open
+    </button>
+    <div class="inline mr-3 align-middle">
+      opened 3 months ago
+    </div>
+    <div class="inline align-middle">
+      <div class="skeleton h-3 pb-2 w-20 inline-block">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`PRs/Header Long Details smoke-test 1`] = `
+<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4 px-3">
+  <div class="text-lg text-base-content mb-2">
+    rather long title that goes on and on and on and on and on and on...
+  </div>
+  <div class="pt-1">
+    <button class="btn btn-success btn-sm mr-3 align-middle">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           viewbox="0 0 18 18"
+           class="h-5 w-5 pt-1 flex-none fill-success-content"
+      >
+        <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
+        </path>
+      </svg>
+      Open
+    </button>
+    <div class="inline mr-3 align-middle">
+      opened a minute ago
+    </div>
+    <div class="inline align-middle">
+      DanConwayDev
+    </div>
+  </div>
+</div>
+`;
+
+exports[`PRs/Header Long and No Spaces smoke-test 1`] = `
+<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4 px-3">
+  <div class="text-lg text-base-content mb-2">
+    LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameL...
+  </div>
+  <div class="pt-1">
+    <button class="btn btn-success btn-sm mr-3 align-middle">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           viewbox="0 0 18 18"
+           class="h-5 w-5 pt-1 flex-none fill-success-content"
+      >
+        <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
+        </path>
+      </svg>
+      Open
+    </button>
+    <div class="inline mr-3 align-middle">
+      opened 3 months ago
+    </div>
+    <div class="inline align-middle">
+      DanConwayDev
+    </div>
+  </div>
+</div>
+`;
+
+exports[`PRs/Header Short Details smoke-test 1`] = `
+<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4 px-3">
+  <div class="text-lg text-base-content mb-2">
+    short title
+  </div>
+  <div class="pt-1">
+    <button class="btn btn-success btn-sm mr-3 align-middle">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           viewbox="0 0 18 18"
+           class="h-5 w-5 pt-1 flex-none fill-success-content"
+      >
+        <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
+        </path>
+      </svg>
+      Open
+    </button>
+    <div class="inline mr-3 align-middle">
+      opened 7 days ago
+    </div>
+    <div class="inline align-middle">
+      DanConwayDev
+    </div>
+  </div>
+</div>
+`;
+
+exports[`PRs/Header loading smoke-test 1`] = `
+<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4 px-3">
+  <div>
+    <div class="h-7 w-60 pt-1 skeleton">
+    </div>
+    <div class>
+      <div class="h-8 w-20 mt-3 skeleton align-middle inline-block">
+      </div>
+      <div class="h-3 w-28 ml-3 mt-5 align-middle skeleton inline-block">
+      </div>
+      <div class="h-3 w-28 ml-3 mt-5 align-middle skeleton inline-block">
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__snapshots__/prs-list-item.test.js.snap b/__snapshots__/prs-list-item.test.js.snap
index 31ed730..acbed6b 100644
--- a/__snapshots__/prs-list-item.test.js.snap
+++ b/__snapshots__/prs-list-item.test.js.snap
@@ -9,7 +9,9 @@ exports[`PRs/List/Item Author Loading smoke-test 1`] = `
     <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
     </path>
   </svg>
-  <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+  <a href="/repo//pr/"
+     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+  >
     <div class="text-sm text-base-content">
       short title
     </div>
@@ -32,7 +34,7 @@ exports[`PRs/List/Item Author Loading smoke-test 1`] = `
         </div>
       </li>
     </ul>
-  </div>
+  </a>
 </li>
 `;
 
@@ -45,7 +47,9 @@ exports[`PRs/List/Item Long Details smoke-test 1`] = `
     <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
     </path>
   </svg>
-  <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+  <a href="/repo//pr/"
+     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+  >
     <div class="text-sm text-base-content">
       rather long title that goes on and on and on and on and on and on...
     </div>
@@ -57,7 +61,7 @@ exports[`PRs/List/Item Long Details smoke-test 1`] = `
         DanConwayDev
       </li>
     </ul>
-  </div>
+  </a>
 </li>
 `;
 
@@ -70,7 +74,9 @@ exports[`PRs/List/Item Long and No Spaces smoke-test 1`] = `
     <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
     </path>
   </svg>
-  <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+  <a href="/repo//pr/"
+     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+  >
     <div class="text-sm text-base-content">
       LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameL...
     </div>
@@ -92,7 +98,7 @@ exports[`PRs/List/Item Long and No Spaces smoke-test 1`] = `
         DanConwayDev
       </li>
     </ul>
-  </div>
+  </a>
 </li>
 `;
 
@@ -105,7 +111,9 @@ exports[`PRs/List/Item Short Details smoke-test 1`] = `
     <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
     </path>
   </svg>
-  <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+  <a href="/repo//pr/"
+     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+  >
     <div class="text-sm text-base-content">
       short title
     </div>
@@ -127,7 +135,7 @@ exports[`PRs/List/Item Short Details smoke-test 1`] = `
         DanConwayDev
       </li>
     </ul>
-  </div>
+  </a>
 </li>
 `;
 
@@ -135,11 +143,13 @@ exports[`PRs/List/Item loading smoke-test 1`] = `
 <li class="flex p-2 pt-4 ">
   <div class="h-5 w-5 pt-1 flex-none skeleton">
   </div>
-  <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+  <a href="/repo//pr/"
+     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+  >
     <div class="h-5 w-60 pt-1 flex-none skeleton">
     </div>
     <div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
     </div>
-  </div>
+  </a>
 </li>
 `;
diff --git a/__snapshots__/prs-list-list.test.js.snap b/__snapshots__/prs-list-list.test.js.snap
index b2f2ab3..dc4dd9a 100644
--- a/__snapshots__/prs-list-list.test.js.snap
+++ b/__snapshots__/prs-list-list.test.js.snap
@@ -16,7 +16,9 @@ exports[`PRs/List/List Default smoke-test 1`] = `
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
-      <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+      <a href="/repo//pr/"
+         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+      >
         <div class="text-sm text-base-content">
           short title
         </div>
@@ -38,7 +40,7 @@ exports[`PRs/List/List Default smoke-test 1`] = `
             DanConwayDev
           </li>
         </ul>
-      </div>
+      </a>
     </li>
     <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
       <svg xmlns="http://www.w3.org/2000/svg"
@@ -48,7 +50,9 @@ exports[`PRs/List/List Default smoke-test 1`] = `
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
-      <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+      <a href="/repo//pr/"
+         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+      >
         <div class="text-sm text-base-content">
           rather long title that goes on and on and on and on and on and on...
         </div>
@@ -60,7 +64,7 @@ exports[`PRs/List/List Default smoke-test 1`] = `
             DanConwayDev
           </li>
         </ul>
-      </div>
+      </a>
     </li>
     <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
       <svg xmlns="http://www.w3.org/2000/svg"
@@ -70,7 +74,9 @@ exports[`PRs/List/List Default smoke-test 1`] = `
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
-      <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+      <a href="/repo//pr/"
+         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+      >
         <div class="text-sm text-base-content">
           LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameL...
         </div>
@@ -92,7 +98,7 @@ exports[`PRs/List/List Default smoke-test 1`] = `
             DanConwayDev
           </li>
         </ul>
-      </div>
+      </a>
     </li>
   </ul>
 </div>
@@ -124,32 +130,38 @@ exports[`PRs/List/List Loading smoke-test 1`] = `
     <li class="flex p-2 pt-4 ">
       <div class="h-5 w-5 pt-1 flex-none skeleton">
       </div>
-      <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+      <a href="/repo//pr/"
+         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+      >
         <div class="h-5 w-60 pt-1 flex-none skeleton">
         </div>
         <div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
         </div>
-      </div>
+      </a>
     </li>
     <li class="flex p-2 pt-4 ">
       <div class="h-5 w-5 pt-1 flex-none skeleton">
       </div>
-      <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+      <a href="/repo//pr/"
+         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+      >
         <div class="h-5 w-60 pt-1 flex-none skeleton">
         </div>
         <div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
         </div>
-      </div>
+      </a>
     </li>
     <li class="flex p-2 pt-4 ">
       <div class="h-5 w-5 pt-1 flex-none skeleton">
       </div>
-      <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+      <a href="/repo//pr/"
+         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+      >
         <div class="h-5 w-60 pt-1 flex-none skeleton">
         </div>
         <div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
         </div>
-      </div>
+      </a>
     </li>
   </ul>
 </div>
@@ -166,7 +178,9 @@ exports[`PRs/List/List No Title smoke-test 1`] = `
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
-      <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+      <a href="/repo//pr/"
+         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+      >
         <div class="text-sm text-base-content">
           short title
         </div>
@@ -188,7 +202,7 @@ exports[`PRs/List/List No Title smoke-test 1`] = `
             DanConwayDev
           </li>
         </ul>
-      </div>
+      </a>
     </li>
     <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
       <svg xmlns="http://www.w3.org/2000/svg"
@@ -198,7 +212,9 @@ exports[`PRs/List/List No Title smoke-test 1`] = `
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
-      <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+      <a href="/repo//pr/"
+         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+      >
         <div class="text-sm text-base-content">
           rather long title that goes on and on and on and on and on and on...
         </div>
@@ -210,7 +226,7 @@ exports[`PRs/List/List No Title smoke-test 1`] = `
             DanConwayDev
           </li>
         </ul>
-      </div>
+      </a>
     </li>
   </ul>
 </div>
@@ -232,7 +248,9 @@ exports[`PRs/List/List Partially Loaded smoke-test 1`] = `
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
-      <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+      <a href="/repo//pr/"
+         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+      >
         <div class="text-sm text-base-content">
           short title
         </div>
@@ -254,7 +272,7 @@ exports[`PRs/List/List Partially Loaded smoke-test 1`] = `
             DanConwayDev
           </li>
         </ul>
-      </div>
+      </a>
     </li>
     <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
       <svg xmlns="http://www.w3.org/2000/svg"
@@ -264,7 +282,9 @@ exports[`PRs/List/List Partially Loaded smoke-test 1`] = `
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
-      <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+      <a href="/repo//pr/"
+         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+      >
         <div class="text-sm text-base-content">
           rather long title that goes on and on and on and on and on and on...
         </div>
@@ -276,17 +296,19 @@ exports[`PRs/List/List Partially Loaded smoke-test 1`] = `
             DanConwayDev
           </li>
         </ul>
-      </div>
+      </a>
     </li>
     <li class="flex p-2 pt-4 ">
       <div class="h-5 w-5 pt-1 flex-none skeleton">
       </div>
-      <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+      <a href="/repo//pr/"
+         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+      >
         <div class="h-5 w-60 pt-1 flex-none skeleton">
         </div>
         <div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
         </div>
-      </div>
+      </a>
     </li>
   </ul>
 </div>
diff --git a/src/lib/components/prs/PRHeader.stories.svelte b/src/lib/components/prs/PRHeader.stories.svelte
new file mode 100644
index 0000000..b9617f6
--- /dev/null
+++ b/src/lib/components/prs/PRHeader.stories.svelte
@@ -0,0 +1,26 @@
+<script lang="ts" context="module">
+    import type { Meta } from "@storybook/svelte";
+    import PRHeader from "./PRHeader.svelte";
+    import { Story, Template } from "@storybook/addon-svelte-csf";
+    import { PRsListItemArgsVectors as vectors } from "./vectors";
+
+    export const meta: Meta<PRHeader> = {
+        title: "PRs/Header",
+        component: PRHeader,
+        tags: ["autodocs"],
+    };
+</script>
+
+<Template let:args>
+    <PRHeader {...args} />
+</Template>
+
+<Story name="Short Details" args={vectors.Short} />
+
+<Story name="Long Details" args={vectors.Long} />
+
+<Story name="Long and No Spaces" args={vectors.LongNoSpaces} />
+
+<Story name="Author Loading" args={vectors.AuthorLoading} />
+
+<Story name="loading" args={{ loading: true }} />
diff --git a/src/lib/components/prs/PRHeader.svelte b/src/lib/components/prs/PRHeader.svelte
new file mode 100644
index 0000000..716d77d
--- /dev/null
+++ b/src/lib/components/prs/PRHeader.svelte
@@ -0,0 +1,73 @@
+<script lang="ts" context="module">
+</script>
+
+<script lang="ts">
+    import dayjs from "dayjs";
+    import relativeTime from "dayjs/plugin/relativeTime";
+    import { summary_defaults } from "./type";
+    import { getName } from "../users/type";
+
+    dayjs.extend(relativeTime);
+    export let { title, id, repo_id, comments, author, created_at, loading } =
+        summary_defaults;
+    let short_title: string;
+    let created_at_ago: string;
+    let author_name = "";
+    $: {
+        author_name = getName(author);
+    }
+    $: {
+        if (title.length > 70) short_title = title.slice(0, 65) + "...";
+        else if (title.length == 0) short_title = "Untitled";
+        else short_title = title;
+        created_at_ago = created_at ? dayjs(created_at * 1000).fromNow() : "";
+    }
+</script>
+
+<div
+    class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4 px-3"
+>
+    {#if loading}
+        <div>
+            <div class="h-7 w-60 pt-1 skeleton"></div>
+            <div class="">
+                <div
+                    class="h-8 w-20 mt-3 skeleton align-middle inline-block"
+                ></div>
+                <div
+                    class="h-3 w-28 ml-3 mt-5 align-middle skeleton inline-block"
+                ></div>
+                <div
+                    class="h-3 w-28 ml-3 mt-5 align-middle skeleton inline-block"
+                ></div>
+            </div>
+        </div>
+    {:else}
+        <div class="text-lg text-base-content mb-2">
+            {short_title}
+        </div>
+        <div class="pt-1">
+            <button class="btn btn-success btn-sm mr-3 align-middle">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 18 18"
+                    class="h-5 w-5 pt-1 flex-none fill-success-content"
+                    ><path
+                        d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0"
+                    />
+                </svg>
+                Open
+            </button>
+            <div class="inline mr-3 align-middle">
+                opened {created_at_ago}
+            </div>
+            <div class="inline align-middle">
+                {#if author.loading}
+                    <div class="skeleton h-3 pb-2 w-20 inline-block"></div>
+                {:else}
+                    {author_name}
+                {/if}
+            </div>
+        </div>
+    {/if}
+</div>
diff --git a/src/lib/components/prs/PRsListItem.svelte b/src/lib/components/prs/PRsListItem.svelte
index bbcbb91..74489f0 100644
--- a/src/lib/components/prs/PRsListItem.svelte
+++ b/src/lib/components/prs/PRsListItem.svelte
@@ -4,11 +4,12 @@
 <script lang="ts">
     import dayjs from "dayjs";
     import relativeTime from "dayjs/plugin/relativeTime";
-    import { defaults } from "./type";
+    import { summary_defaults } from "./type";
     import { getName } from "../users/type";
 
     dayjs.extend(relativeTime);
-    export let { title, id, comments, author, created_at, loading } = defaults;
+    export let { title, id, repo_id, comments, author, created_at, loading } =
+        summary_defaults;
     let short_title: string;
     let created_at_ago: string;
     let author_name = "";
@@ -52,7 +53,10 @@
                     d="M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1m9.5 14a2.25 2.25 0 1 1 0-4.5a2.25 2.25 0 0 1 0 4.5M2.5 3.25a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0M3.25 12a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m9.5 0a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5M14 7.5a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0m0-4.25a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0"
                 /></svg
             > -->
-    <div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
+    <a
+        href="/repo/{repo_id}/pr/{id}"
+        class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+    >
         {#if loading}
             <div class="h-5 w-60 pt-1 flex-none skeleton"></div>
             <div class="h-3 w-40 mt-3 mb-1 flex-none skeleton"></div>
@@ -90,7 +94,7 @@
                 </li>
             </ul>
         {/if}
-    </div>
+    </a>
     <!-- <div class="flex-none text-xs pt-0 hidden md:block">
         <div class="align-middle">
             {#if loading}
diff --git a/src/lib/components/prs/type.ts b/src/lib/components/prs/type.ts
index 71a890e..52ef402 100644
--- a/src/lib/components/prs/type.ts
+++ b/src/lib/components/prs/type.ts
@@ -3,6 +3,7 @@ import { defaults as user_defaults } from "../users/type";
 
 export interface PRSummary {
     title: string;
+    repo_id: string;
     id: string;
     comments: number;
     author: User;
@@ -10,8 +11,9 @@ export interface PRSummary {
     loading: boolean;
 }
 
-export const defaults: PRSummary = {
+export const summary_defaults: PRSummary = {
     title: "",
+    repo_id: "",
     id: "",
     comments: 0,
     author: { ...user_defaults },
diff --git a/src/lib/stores/PR.ts b/src/lib/stores/PR.ts
new file mode 100644
index 0000000..979083d
--- /dev/null
+++ b/src/lib/stores/PR.ts
@@ -0,0 +1,86 @@
+import type { NDKEvent } from "@nostr-dev-kit/ndk";
+import { writable, type Unsubscriber, type Writable } from "svelte/store"
+import { ndk } from "./ndk";
+import type { Repo } from "$lib/components/repo/type";
+import { defaults } from "$lib/components/repo/type";
+import type { User } from "$lib/components/users/type";
+import { ensureUser, users } from "./users";
+import { summary_defaults, type PRSummary } from "$lib/components/prs/type";
+
+let pr_kind: number = 318;
+
+export let selected_pr_summary: Writable<PRSummary> = writable({ ...summary_defaults });
+
+let selected_repo_id: string = "";
+let selected_pr_id: string = "";
+let pr_summary_author_unsubsriber: Unsubscriber | undefined;
+
+export let ensurePRSummary = (repo_id: string, pr_id: string) => {
+    if (selected_pr_id == pr_id) return;
+    if (pr_id == "") return selected_pr_summary.set({
+        ...summary_defaults,
+    });
+
+    selected_repo_id = repo_id;
+    selected_pr_id = pr_id;
+
+    selected_pr_summary.update(summary => {
+        return {
+            ...summary,
+            id: pr_id,
+            repo_id: repo_id,
+            loading: true,
+        };
+    });
+    if (pr_summary_author_unsubsriber) pr_summary_author_unsubsriber();
+    pr_summary_author_unsubsriber = undefined;
+
+
+    let sub = ndk.subscribe({
+        ids: [pr_id],
+        limit: 1,
+    });
+
+    sub.on("event", (event: NDKEvent) => {
+        try {
+            if (event.kind == pr_kind
+                && event.getMatchingTags("r").find(t => t[1] === `r-${repo_id}`)
+                && event.id == pr_id
+            ) {
+
+                selected_pr_summary.update(summary => {
+                    return {
+                        ...summary,
+                        title: event.tagValue("name") || "",
+                        created_at: event.created_at,
+                        comments: 0,
+                        author: {
+                            hexpubkey: event.pubkey,
+                            loading: true,
+                            npub: "",
+                        },
+                        loading: false,
+                    };
+                });
+
+
+                pr_summary_author_unsubsriber = ensureUser(event.pubkey).subscribe((u: User) => {
+                    selected_pr_summary.update(summary => {
+                        return {
+                            ...summary,
+                            author: event.pubkey == u.hexpubkey ? u : summary.author,
+                        };
+                    });
+                });
+            }
+        } catch { }
+    });
+    sub.on("eose", () => {
+        selected_pr_summary.update(summary => {
+            return {
+                ...summary,
+                loading: false,
+            };
+        });
+    });
+}
diff --git a/src/lib/stores/PRs.ts b/src/lib/stores/PRs.ts
index a3be9c8..eb0f338 100644
--- a/src/lib/stores/PRs.ts
+++ b/src/lib/stores/PRs.ts
@@ -2,7 +2,7 @@ import type { NDKEvent } from "@nostr-dev-kit/ndk";
 import { writable, type Unsubscriber, type Writable } from "svelte/store"
 import { ndk } from "./ndk";
 import type { Repo } from "$lib/components/repo/type";
-import { defaults } from "$lib/components/prs/type";
+import { summary_defaults } from "$lib/components/prs/type";
 import type { User } from "$lib/components/users/type";
 import { ensureUser, users } from "./users";
 import type { PRSummaries, PRSummary } from "$lib/components/prs/type";
@@ -56,8 +56,9 @@ export let ensurePRSummaries = (repo_id: string) => {
                         summaries: [
                             ...prs.summaries,
                             {
-                                ...defaults,
+                                ...summary_defaults,
                                 id: event.id,
+                                repo_id: repo_id,
                                 title: event.tagValue("name") || "",
                                 created_at: event.created_at,
                                 comments: 0,
diff --git a/src/routes/repo/[repo_id]/pr/[pr_id]/+page.svelte b/src/routes/repo/[repo_id]/pr/[pr_id]/+page.svelte
new file mode 100644
index 0000000..85cd85c
--- /dev/null
+++ b/src/routes/repo/[repo_id]/pr/[pr_id]/+page.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { ensureSelectedRepo, selected_repo } from "$lib/stores/repo";
+    import { ensurePRSummary, selected_pr_summary } from "$lib/stores/PR";
+    import PrHeader from "$lib/components/prs/PRHeader.svelte";
+    import RepoHeader from "$lib/components/repo/RepoHeader.svelte";
+
+    export let data: {
+        repo_id: string;
+        pr_id: string;
+    };
+
+    let repo_id = data.repo_id;
+    let pr_id = data.pr_id;
+
+    ensureSelectedRepo(repo_id);
+    ensurePRSummary(repo_id, pr_id);
+</script>
+
+<RepoHeader {...$selected_repo} />
+<PrHeader {...$selected_pr_summary} />
+
+<div class="flex">
+    <div class="w-2/3 mx-2">
+        <div>placeholder for PR summary</div>
+        <div>placeholder for all related events</div>
+    </div>
+    <div class="w-1/3 mx-2 prose">
+        <div>placeholder for status, tags, contributors</div>
+    </div>
+</div>
diff --git a/src/routes/repo/[repo_id]/pr/[pr_id]/+page.ts b/src/routes/repo/[repo_id]/pr/[pr_id]/+page.ts
new file mode 100644
index 0000000..8d224e0
--- /dev/null
+++ b/src/routes/repo/[repo_id]/pr/[pr_id]/+page.ts
@@ -0,0 +1,6 @@
+export const load = ({ params }) => {
+    return {
+        repo_id: params.repo_id,
+        pr_id: params.pr_id,
+    }
+}