diff --git a/src/lib/components/PublicationCard.svelte b/src/lib/components/PublicationCard.svelte
new file mode 100644
index 0000000..e4ccfd2
--- /dev/null
+++ b/src/lib/components/PublicationCard.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { PublicationNode } from "$lib/utils";
+    import { createQuery } from "@tanstack/svelte-query";
+
+  let { publication, showEmpty = false }: { publication: PublicationNode, showEmpty?: boolean } = $props();
+
+  const countQuery = createQuery(() => ({
+    queryKey: ["publication", publication.uri],
+    queryFn: async () => {
+      const constellationUrl = new URL("https://constellation.microcosm.blue/links/all");
+      constellationUrl.searchParams.set("target", publication.uri);
+      const response = await fetch(constellationUrl, {
+        headers: {
+          "Accept": "application/json"
+        }
+      });
+
+
+      const json = await response.json() as { links: Record<string, any> };
+      return json;
+    },
+    staleTime: 30 * 60 * 1000,
+    select: (data) => {
+      const documents = Number(data.links["site.standard.document"]?.[".site"]?.records) || 0; 
+      const subscribers = Number(data.links["site.standard.graph.subscription"]?.[".publication"]?.records) || 0;
+      return { documents, subscribers }
+    }
+  }));
+</script>
+
+{#if countQuery.isFetching}
+  <p>Fetching...</p>
+{:else if countQuery.isSuccess}
+  {#if countQuery.data.documents > 0 || showEmpty}
+  <li class="flex flex-col gap-4 border p-4">
+    <a href={publication.value.url} class="w-fit">{publication.value.name}</a>
+    <a href={`https://pdsls.dev/${publication.uri}`} target="_blank" class="w-fit border">Go to Record</a>
+    <div class="flex gap-4">
+      <p>{countQuery.data.documents} Documents</p>
+      <p>{countQuery.data.subscribers} Subscribers</p>
+    </div>
+  </li>
+  {/if}
+{/if}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index af287a3..5b8767d 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -27,6 +27,11 @@ export type PublicationNode = Node & { value: {
   url: string;
   name: string;
   description: string;
+  icon?: string;
+  preferences?: {
+    showInDiscover?: boolean;
+    hideProfile?: boolean;
+  }
 }}
 
 export type DocumentNode = Node & { value: {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8073db2..3d8d4df 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+    import PublicationCard from '$lib/components/PublicationCard.svelte';
   import type { PublicationNode } from '$lib/utils';
-  import { createInfiniteQuery, createQuery } from '@tanstack/svelte-query';
+  import { createInfiniteQuery } from '@tanstack/svelte-query';
 
   let { data } = $props();
   let { atclient, user } = data;
@@ -43,9 +44,14 @@
   }));
 
   let currentPage = $derived(publicationsQuery.data?.slice(page*20, (page*20) + 20));
+  let showEmpty = $state(true);
 </script>
 
 <menu>
+  <label for="showEmpty">
+    <input name="showEmpty" type="checkbox" bind:checked={showEmpty}>
+    Show empty publication
+  </label>
   <button 
     onclick={() => { 
       if (page > 0) {
@@ -71,13 +77,13 @@
     </button>
   {/if}
 </menu>
+
 {#if publicationsQuery.isFetching}
   <p>Fetching...</p>
 {:else if publicationsQuery.isError}
   <p>Error</p>
 {:else}
   {#each currentPage as publication (publication.uri)}
-    <a href={publication.value.url}>{publication.value.url}</a>
+    <PublicationCard {publication} {showEmpty} />
   {/each}
 {/if}
-