diff --git a/packages/web/app/app.vue b/packages/web/app/app.vue
index c3601bd..4e90570 100644
--- a/packages/web/app/app.vue
+++ b/packages/web/app/app.vue
@@ -15,7 +15,7 @@ useServerSeoMeta({
   description: 'Detect duplicate GitHub issues, areas of concern and more across related repositories',
 })
 
-const { data: repos } = useRepos()
+const { data: repos } = useFetchRepos()
 </script>
 
 <template>
diff --git a/packages/web/app/components/ClusterView.vue b/packages/web/app/components/ClusterView.vue
new file mode 100644
index 0000000..5c50044
--- /dev/null
+++ b/packages/web/app/components/ClusterView.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+    import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+    interface ClusterViewProps {
+        cluster: IssueMetadata;
+    }
+
+    const { cluster } = defineProps<ClusterViewProps>()
+</script>
+
+<template >
+    <div class="border-solid border-2 border-gray-700 rounded-md p-2" >
+        {{ cluster }}
+    </div>
+</template>
diff --git a/packages/web/app/components/ClusterViewJunction.vue b/packages/web/app/components/ClusterViewJunction.vue
new file mode 100644
index 0000000..4a0d383
--- /dev/null
+++ b/packages/web/app/components/ClusterViewJunction.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { AsyncDataRequestStatus } from '#app'
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+interface ClusterViewJunctionProps {
+    clusters: IssueMetadata[];
+    status: AsyncDataRequestStatus;
+}
+
+const { selectedView } = useToggleViewState()
+
+const { clusters, status } = defineProps<ClusterViewJunctionProps>()
+</script>
+
+<template>
+    <template v-if="status === 'idle' || status === 'pending'">
+      <GitHubIssueSkeleton />
+    </template>
+
+    <template v-else-if="!clusters.length">
+      <NoClustersView />
+    </template>
+
+    <template v-else>
+        <template v-if="selectedView === 'PaperStack'">
+            <PaperStackClusterItem :clusters="clusters" />
+        </template>
+
+        <template v-if="selectedView === 'GridCell'" >
+            <GridCellClusterItem :clusters="clusters" />            
+        </template>
+
+        <template v-if="selectedView === 'ColumnCell'">
+            <ColumnCellClusterItem :clusters="clusters" />
+        </template>
+    </template>
+</template>
+ 
\ No newline at end of file
diff --git a/packages/web/app/components/CommandConsole.vue b/packages/web/app/components/CommandConsole.vue
new file mode 100644
index 0000000..72f5932
--- /dev/null
+++ b/packages/web/app/components/CommandConsole.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { AsyncDataRequestStatus } from '#app'
+import type { RepoMetadata } from '~~/shared/models/github-metadata'
+
+interface CommandConsoleProps {
+  allowedRepos: RepoMetadata[];
+  status: AsyncDataRequestStatus;
+  selectedRepo: string;
+}
+
+const OWNER_REPO = 'owner-repo'
+const REFRESH_DATA = 'refresh data'
+const PICK_A_REPOSITORY = 'pick a repository to cluster issues'
+
+const { allowedRepos, status, selectedRepo } = defineProps<CommandConsoleProps>()
+
+const refresh = defineModel<() => Promise<void>>('refresh', {
+    required: true
+})
+
+function navigateToRepo(event: Event) {
+  const [owner, repo] = (event.target as HTMLSelectElement).value.split('/') as [string, string]
+  return navigateTo({
+    name: OWNER_REPO,
+    params: { owner, repo },
+  })
+}
+</script>
+
+<template>
+    <section class="w-full flex gap-2 justify-between justify-center items-center border-solid border border-gray-700 p-2 rounded-md">
+
+    <form class="flex gap-2  items-center" @submit.prevent="() => refresh()" >
+      <div class="flex gap-2 items-center">
+        <h2 class="text-base my-3 font-normal">
+          {{ selectedRepo }}
+        </h2>
+        <button
+          class="rounded-full w-7 h-7 flex items-center justify-center border-solid border border-gray-700 bg-transparent color-gray-400 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors flex-shrink-0"
+          :class="{ 'animate-spin opacity-50 pointer-events-none': status === 'pending' || status === 'idle' }"
+          type="submit"
+        >
+          <span
+            size="medium"
+            class="text-gray-400 flex-shrink-0 i-tabler-refresh inline-block w-4 h-4"
+          />
+          <span class="sr-only">{{ REFRESH_DATA }}</span>
+        </button>
+      </div>
+      <label class="w-full text-xs border-solid border border-gray-600 rounded-md flex flex-row items-center relative">
+        <span class="sr-only">{{ PICK_A_REPOSITORY }}</span>
+        <select
+          :value="selectedRepo"
+          class="pl-8 bg-shark-500 rounded-md pr-2 py-2 color-white border-0 w-full appearance-none"
+          @change="navigateToRepo"
+        >
+          <option
+            v-for="repo in allowedRepos.filter((repo: RepoMetadata) => repo.issuesIndexed > 0)"
+            :key="repo.repo"
+            :selected="repo.repo === selectedRepo"
+          >
+            {{ repo.repo }}
+          </option>
+        </select>
+        <span
+          class="absolute ml-2 text-gray-400 flex-shrink-0 i-tabler-search inline-block w-5 h-5"
+        />
+      </label>
+    </form>
+
+    <ViewToggle />
+  </section>
+</template>
diff --git a/packages/web/app/components/DuplicatesView.vue b/packages/web/app/components/DuplicatesView.vue
new file mode 100644
index 0000000..2dfc7e3
--- /dev/null
+++ b/packages/web/app/components/DuplicatesView.vue
@@ -0,0 +1,70 @@
+
+<script setup lang="ts">
+import type { AsyncDataRequestStatus } from '#app'
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+interface DuplicatesrViewProps {
+    duplicates: IssueMetadata[];
+    status: AsyncDataRequestStatus;
+}
+
+const LOADING_DUPLICATES = 'loading duplicates'
+const POSSIBLE_DUPLICATE = 'possible duplicate'
+
+const { duplicates, status } = defineProps<DuplicatesrViewProps>()
+
+const showDuplicates = ref(false)
+
+const typedDuplicates = computed<IssueMetadata[]>(() => {
+    return showDuplicates ? duplicates.value?.map(cluster => cluster) : []}
+)
+</script>
+
+<template >
+    <div
+      v-if="status !== 'success' && status !== 'error'"
+      class="mt-6 rounded-md border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors flex items-center gap-2 justify-center pointer-events-none animate-pulse"
+    >
+      <span
+        size="medium"
+        class="text-gray-400 flex-shrink-0 i-tabler-refresh inline-block w-4 h-4 animate-spin"
+      />
+      {{ LOADING_DUPLICATES }}
+    </div>
+
+    <button
+          v-else-if="!showDuplicates && duplicates.length"
+          class="mt-6 rounded-md border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors flex items-center gap-2 justify-center w-full"
+          type="button"
+          @click="showDuplicates = true"
+      >
+          show {{ duplicates?.length }} possible duplicates
+      </button>  
+  <template v-if="showDuplicates">
+      <section
+        v-for="(cluster, i) of typedDuplicates"
+        class="flex flex-col gap-4 md:rounded-md md:border-solid md:border md:border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 flex-wrap border-b-solid"
+      >
+        <h2 class="my-4 font-bold text-2xl flex items-baseline">
+          <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
+          <span>{{ i + 1 }}</span>
+          <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
+            <span class="i-tabler-wash-dryclean-off inline-block w-4 h-4"></span>
+            {{ POSSIBLE_DUPLICATE }}
+          </span>
+        </h2>
+        <GitHubIssue
+          v-for="(issue, j) of cluster"
+          :key="j"
+          :url="issue.url"
+          :title="issue.title"
+          :owner="issue.owner"
+          :repository="issue.repository"
+          :number="issue.number"
+          :avg-similarity="issue.score"
+          :labels="issue.labels"
+          :updated_at="issue.updated_at"
+        />
+      </section>
+  </template>
+</template>
diff --git a/packages/web/app/components/GitHubIssue.vue b/packages/web/app/components/GitHubIssue.vue
index c4c32e8..f707421 100644
--- a/packages/web/app/components/GitHubIssue.vue
+++ b/packages/web/app/components/GitHubIssue.vue
@@ -39,9 +39,9 @@ function labelColors(color: string) {
 </script>
 
 <template>
-  <article class="flex flex-row gap-2 leading-tightest">
-    <span class="flex-shrink-0 inline-block w-5 h-5 i-tabler-circle-dot text-green-500" />
-    <div class="flex flex-row gap-2 flex-wrap md:flex-nowrap md:pb-6 flex-grow">
+  <article class="border-solid border border-gray-600 rounded-md max-w-full overflow-hidden flex flex-row gap-2 leading-tightest ">
+    <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500" />
+    <div class="flex flex-col flex-wrap md:flex-nowrap md:pb-2 flex-grow">
       <NuxtLink
         class="line-clamp-1 flex-grow text-sm md:text-base lg:flex-grow-0 no-underline color-current hover:underline"
         :href="url"
@@ -50,7 +50,7 @@ function labelColors(color: string) {
         {{ title?.trim() }}
       </NuxtLink>
       <div
-        class="text-xs relative md:absolute md:mt-6 text-gray-400 mb-1"
+        class=" text-xs relative md:mt-1 text-gray-400 mb-1 break-words"
       >
         <NuxtLink
           v-if="owner && repository"
@@ -97,6 +97,7 @@ function labelColors(color: string) {
         </span>
       </div>
     </div>
+  
   </article>
 </template>
 
diff --git a/packages/web/app/components/GitHubIssueSketon.vue b/packages/web/app/components/GitHubIssueSketon.vue
new file mode 100644
index 0000000..e259902
--- /dev/null
+++ b/packages/web/app/components/GitHubIssueSketon.vue
@@ -0,0 +1,17 @@
+<template >
+    <section
+    v-for="i in 7"
+    :key="i"
+    :style="{ '--section-index': i }"
+    class="flex flex-col gap-4 md:rounded-md md:border-solid border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid animate-pulse"
+    >
+    <h2 class="flex items-center my-4 font-bold text-2xl">
+        <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
+        <span class="inline-block rounded-md h-5 bg-gray-500 w-5" />
+    </h2>
+    <GitHubIssueLoading
+        v-for="s in Math.round(Math.random() * 3) + 1"
+        :key="s"
+    />
+    </section>
+</template>
diff --git a/packages/web/app/components/NoClustersView.vue b/packages/web/app/components/NoClustersView.vue
new file mode 100644
index 0000000..7775e62
--- /dev/null
+++ b/packages/web/app/components/NoClustersView.vue
@@ -0,0 +1,21 @@
+
+<script setup lang="ts">
+    const NO_CLUSTERS = 'no clusters could be identified'
+
+</script>
+
+<template >
+      <section
+        class="flex flex-col gap-4 md:rounded-md md:border-solid border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
+      >
+        <h2 class="flex items-center my-4 font-bold text-2xl">
+          <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
+        </h2>
+        <p class="flex flex-row gap-2 leading-tightest">
+          <span
+            class="flex-shrink-0 text-gray-400 i-tabler-alert-triangle inline-block w-5 h-5"
+          />
+          {{ NO_CLUSTERS }}
+        </p>
+      </section>
+</template>
diff --git a/packages/web/app/components/RepoViewLayout.vue b/packages/web/app/components/RepoViewLayout.vue
new file mode 100644
index 0000000..017dfc9
--- /dev/null
+++ b/packages/web/app/components/RepoViewLayout.vue
@@ -0,0 +1,8 @@
+<!-- TODO: Probably no longer necessary -->
+<template>
+    <slot name="console"></slot> 
+
+    <slot name="duplicates"></slot> 
+
+    <slot name="clusters" ></slot> 
+</template>
diff --git a/packages/web/app/components/ViewToggle.vue b/packages/web/app/components/ViewToggle.vue
new file mode 100644
index 0000000..e0e7906
--- /dev/null
+++ b/packages/web/app/components/ViewToggle.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+
+const { selectedView, toggleViewState, } = useToggleViewState()
+
+</script>
+
+<template>
+    <section class="flex gap-2 items-center p-2 border-solid border border-gray-700 rounded-sm bg-slate-700">
+        <button
+            class="rounded-sm p-0.5 text-md border-solid border bg-slate-950 color-gray-400 transition-colors"
+            :class="[
+                selectedView === 'PaperStack'
+                ? 'border-cyan-400  color-cyan-400 bg-cyan-700 '
+                : 'border-cyan-200 hover:color-cyan-200 hover:bg-cyan-500'
+            ]"
+            type="button"
+            value="PaperStack"
+            @click="toggleViewState($event)"
+            aria-label="PaperStack"
+        >
+            <SvgPaperStack />
+        </button>
+
+        <button
+            class="rounded-sm p-0.5 text-md border-solid border bg-slate-950 color-gray-400 transition-colors"
+            :class="[
+                selectedView === 'GridCell'
+                ? 'border-red-400 color-red-400 bg-red-700'
+                : 'border-red-200 hover:color-red-200 hover:bg-red-500'
+            ]"
+            type="button"
+            value="GridCell"
+            @click="toggleViewState($event)"
+            aria-label="GridCell"
+        >
+            <SvgGridCell />
+        </button>
+
+        <button
+            class="rounded-sm p-0.5 text-md border-solid border border-gray-700 bg-slate-950 color-gray-400 transition-colors"
+            :class="[
+                selectedView === 'ColumnCell'
+                ? 'border-green-400 color-green-400 bg-green-700'
+                : 'border-green-200 hover:color-green-200 hover:bg-green-500'
+            ]"
+            type="button"
+            value="ColumnCell"
+            @click="toggleViewState($event)"
+            aria-label="ColumnCell"
+        >
+            <SvgColumnCell />
+        </button>
+  </section>
+</template>
diff --git a/packages/web/app/components/column-cell/ClusterItem.vue b/packages/web/app/components/column-cell/ClusterItem.vue
new file mode 100644
index 0000000..42f6355
--- /dev/null
+++ b/packages/web/app/components/column-cell/ClusterItem.vue
@@ -0,0 +1,69 @@
+
+<script setup lang="ts">
+    import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+    interface ClusterViewProps {
+        clusters: IssueMetadata[];
+    }
+
+    const { clusters } = defineProps<ClusterViewProps>()
+
+    const openState = reactive<Record<string, boolean>>({})
+
+    onMounted(async () => {
+        if ('startViewTransition' in document) {
+            let finishTransition: () => void
+            const promise = new Promise<void>((resolve) => {
+            finishTransition = resolve
+            })
+            watch(() => clusters, () => document.startViewTransition(() => promise), { flush: 'pre' })
+            watch(() => clusters, () => nextTick(finishTransition), { flush: 'post' })
+        }
+    })
+</script>
+
+<template >
+    <div class="grid grid-cols-4 gap-4" >
+        <section
+        v-for="(cluster, c) of clusters"
+        :key="c"
+        :style="{ '--section-index': c }"
+        class=" overflow-hidden flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
+        >
+            <h2 class=" my-4 font-bold text-2xl flex items-baseline">
+                <span class="text-gray-500 inline-block mr-1 font-normal">#</span>{{ c + 1 }}
+                <span class="ml-2 font-normal text-lg color-gray-300">&mdash; {{ cluster.title }}</span>
+                <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
+                <span class="i-tabler:copy inline-block w-4 h-4"></span>
+                cluster
+                </span>
+            </h2>
+            <GitHubIssue
+                v-for="(issue, i) of openState[c] !== true ? cluster.issues?.slice(0, 5) : cluster.issues"
+                :key="i"
+                :url="issue.url"
+                :title="issue.title"
+                :owner="issue.owner"
+                :repository="issue.repository"
+                :number="issue.number"
+                :avg-similarity="issue.avgSimilarity"
+                :labels="issue.labels"
+                :updated_at="issue.updated_at"
+            />
+            <button
+                v-if="cluster.issues?.length > 5 && openState[c] !== true"
+                class="rounded-md text-sm border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+                type="button"
+                @click="openState[c] = !openState[c]"
+            >
+                show {{ cluster.issues?.length - 5 }} more
+            </button>
+        </section>
+    </div>
+</template>
+
+<style scoped>
+section:first-of-type {
+  view-transition-name: var(--section-index);
+}
+</style>
diff --git a/packages/web/app/components/grid-cell/ClusterItem.vue b/packages/web/app/components/grid-cell/ClusterItem.vue
new file mode 100644
index 0000000..e896b7d
--- /dev/null
+++ b/packages/web/app/components/grid-cell/ClusterItem.vue
@@ -0,0 +1,52 @@
+
+<script setup lang="ts">
+    import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+    interface ClusterViewProps {
+        clusters: IssueMetadata[];
+    }
+
+    const { clusters } = defineProps<ClusterViewProps>()
+
+    const openState = reactive<Record<string, boolean>>({})
+</script>
+
+<template >
+    <div class="grid grid-cols-4 gap-4" >
+        <section
+        v-for="(cluster, c) of clusters"
+        :key="c"
+        :style="{ '--section-index': c }"
+        class=" overflow-hidden flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
+        >
+            <h2 class=" my-4 font-bold text-2xl flex items-baseline">
+                <span class="text-gray-500 inline-block mr-1 font-normal">#</span>{{ c + 1 }}
+                <span class="ml-2 font-normal text-lg color-gray-300">&mdash; {{ cluster.title }}</span>
+                <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
+                <span class="i-tabler:copy inline-block w-4 h-4"></span>
+                cluster
+                </span>
+            </h2>
+            <GitHubIssue
+                v-for="(issue, i) of openState[c] !== true ? cluster.issues?.slice(0, 5) : cluster.issues"
+                :key="i"
+                :url="issue.url"
+                :title="issue.title"
+                :owner="issue.owner"
+                :repository="issue.repository"
+                :number="issue.number"
+                :avg-similarity="issue.avgSimilarity"
+                :labels="issue.labels"
+                :updated_at="issue.updated_at"
+            />
+            <button
+                v-if="cluster.issues?.length > 5 && openState[c] !== true"
+                class="rounded-md text-sm border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+                type="button"
+                @click="openState[c] = !openState[c]"
+            >
+                show {{ cluster.issues?.length - 5 }} more
+            </button>
+        </section>
+    </div>
+</template>
diff --git a/packages/web/app/components/paper-stack/ClusterItem.vue b/packages/web/app/components/paper-stack/ClusterItem.vue
new file mode 100644
index 0000000..778a4ce
--- /dev/null
+++ b/packages/web/app/components/paper-stack/ClusterItem.vue
@@ -0,0 +1,76 @@
+
+<script setup lang="ts">
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+interface ClusterItemProps {
+    clusters: IssueMetadata[];
+}
+
+const { clusters } = defineProps<ClusterItemProps>()
+
+const openState = reactive<Record<string, boolean>>({})
+
+const zIndex = ['z-8', 'z-6', 'z-4']
+</script>
+
+<template >
+    <div class="grid grid-cols-4 gap-4 pt-4">
+        <section 
+            v-for="(cluster, index) of clusters" 
+            :key="index"
+            :style="{ '--section-index': index }"   
+            class="flex flex-col "
+        >
+            <PaperStackClusterSummary :clusterIndex="index" :clusterTitle="cluster.title" />
+
+            <div 
+                v-for="(issue, idx) of cluster.issues?.slice(0, 3)"
+                class="h-20 p-2 p-r-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis -mt-2"
+                :class="zIndex[idx]"
+            >
+                <PaperStackGithubIssue
+                    class="github-issues relative"
+                    :key="idx"
+                    :url="issue.url"
+                    :title="issue.title"
+                    :owner="issue.owner"
+                    :repository="issue.repository"
+                    :number="issue.number"
+                    :avg-similarity="issue.avgSimilarity"
+                    :labels="issue.labels"
+                    :updated_at="issue.updated_at"
+                />
+            </div>
+
+            <div 
+                class="h-10 p-2 border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis -mt-2 z-2"
+            >
+                <!-- TODO: Remove open state logic -->
+                <PaperStackShowMoreIssues :clusterIndex="index" :clusterLength="cluster.issues?.length || 0" v-model:openState="openState" />
+            </div>
+        </section>
+    </div>
+</template>
+
+<!-- TODO: Improve naive gradient approach -->
+ <!-- .github-issues {
+  mask-image: linear-gradient(to right, black 80%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
+} -->
+<style scoped>
+.github-issues  {
+  position: relative; 
+  overflow: hidden;    
+}
+
+.github-issues::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5rem;         
+  height: 100%;        
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), #6b7280); 
+  pointer-events: none; 
+}  
+</style>
diff --git a/packages/web/app/components/paper-stack/ClusterSummary.vue b/packages/web/app/components/paper-stack/ClusterSummary.vue
new file mode 100644
index 0000000..2a1c8f9
--- /dev/null
+++ b/packages/web/app/components/paper-stack/ClusterSummary.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+    interface ClusterSummaryProps {
+        clusterIndex: number;
+        clusterTitle: string;
+    }
+
+    const CLUSTER_ICON = 'cluster'
+    const CLUSTER_SUMMARY = 'Cluster Summary'
+
+    const { clusterIndex, clusterTitle } = defineProps<ClusterSummaryProps>()
+</script>
+
+<template >
+    <div class="h-40 md:p-2 md:border-3 md:border-solid border-gray-600 md:rounded-md bg-shark-500 relative z-10">
+        <div class="flex justify-between items-baseline gap-1">
+            <div class="font-bold text-2xl flex items-baseline">
+                <h2 class="text-gray-500 inline-block mr-1 font-normal">#</h2>{{ clusterIndex + 1 }}
+            </div>
+
+            <div>
+                <h1 class="text-lg text-gray-300 inline-block font-bold">{{ CLUSTER_SUMMARY }}</h1>
+            </div>
+
+            <div>
+                <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
+                    <span class="i-tabler:copy inline-block w-4 h-4" />
+                    {{ CLUSTER_ICON}}
+                </span>
+            </div>
+        </div>
+            
+        <h1>
+            <span class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ clusterTitle }}</span>
+        </h1>
+    </div>
+</template>
diff --git a/packages/web/app/components/paper-stack/GithubIssue.vue b/packages/web/app/components/paper-stack/GithubIssue.vue
new file mode 100644
index 0000000..3e064bb
--- /dev/null
+++ b/packages/web/app/components/paper-stack/GithubIssue.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+    interface GithubIssueProps {
+        url: string;
+        title: string;
+        owner: string;
+        repository: string;
+        number: number;
+        avgSimilarity: number;
+        labels: Array<string | { name: string, color?: string }>;
+        updated_at: string;
+    }
+
+    const UPDATED = 'updated'
+    const PERCENT_SIMILAR = '% similar'
+
+    const { url, title, owner, repository, number, avgSimilarity, labels, updated_at } = defineProps<GithubIssueProps>()
+</script>
+
+<template>
+  <article class="max-w-full overflow-hidden flex flex-row gap-1 ">
+    <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500 mt-1" />
+
+    <div class="flex flex-col flex-wrap md:flex-nowrap flex-grow">
+      <NuxtLink
+        class="line-clamp-1 flex-grow text-sm md:text-base lg:flex-grow-0 no-underline color-current hover:underline"
+        :href="url"
+        target="_blank"
+      >
+        {{ title?.trim() }}
+      </NuxtLink>
+
+      <div
+        class="text-xs relative text-gray-400 mb-1 break-words"
+      >
+        <NuxtLink
+          v-if="owner && repository"
+          class="no-underline hover:underline color-current"
+          :to="{
+            name: 'owner-repo',
+            params: {
+              owner: owner,
+              repo: repository,
+            },
+          }"
+        >
+          {{ owner }}/{{ repository }}
+        </NuxtLink>
+
+        &middot;
+        {{ UPDATED }}
+
+        <NuxtTime
+          :datetime="updated_at"
+          relative
+        />
+
+        &middot;
+
+        <NuxtLink
+          class="no-underline hover:underline color-current"
+          :to="owner && repository ? {
+            name: 'owner-repo-issue',
+            params: {
+              owner: owner,
+              repo: repository,
+              issue: number,
+            },
+          } : ''"
+        >
+          {{ Math.floor(avgSimilarity * 100) }}{{ PERCENT_SIMILAR }}
+        </NuxtLink>
+      </div>
+
+      <div class="flex flex-row gap-1 items-baseline flex-wrap md:flex-nowrap">
+        <span
+          v-for="(label, j) of labels"
+          :key="j"
+          class="label rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 text-xs inline-block leading-tight"
+          :style="labelColors(typeof label === 'string' ? '000000' : label.color || '000000')"
+        >
+          {{ typeof label === 'string' ? label : label.name }}
+        </span>
+      </div>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.label {
+  --lightness-threshold: 0.6;
+  --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
+  --lightness-switch: max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));
+  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+  background: rgba(var(--label-r), var(--label-g), var(--label-b), 0.18);
+  color: hsl(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%));
+  border-color: rgba(var(--label-r), var(--label-g), var(--label-b), 0.7);
+}
+</style>
diff --git a/packages/web/app/components/paper-stack/ShowMoreIssues.vue b/packages/web/app/components/paper-stack/ShowMoreIssues.vue
new file mode 100644
index 0000000..2e99558
--- /dev/null
+++ b/packages/web/app/components/paper-stack/ShowMoreIssues.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+    interface ShowMoreIssuesProps {
+        clusterIndex: number;
+        clusterLength: number;
+    }
+
+    const { clusterIndex, clusterLength } = defineProps<ShowMoreIssuesProps>()
+
+    // TODO: Modify this to be open the cluster view
+    const openState = defineModel<Record<string, boolean>>('openState', {
+        required: true
+    })
+
+    const NO_MORE_ISSUES = 'No More Issues...'
+</script>
+
+<template >
+    <div class="grid grid-cols-4 gap-4" >
+        <!-- TODO: Needs to launch the popover/route/whatever to the ClusterView -->
+        <button
+            v-if="clusterLength > 3 && openState[clusterIndex] !== true"
+            class=" text-sm bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+            type="button"
+        >
+            show {{ clusterLength - 3 }} more issues...
+        </button>
+        <!-- TODO: Improve the alternate state for the show more button -->
+        <div v-else>{{ NO_MORE_ISSUES}}</div>
+    </div>
+</template>
diff --git a/packages/web/app/components/svg/ColumnCell.vue b/packages/web/app/components/svg/ColumnCell.vue
new file mode 100644
index 0000000..8b1e025
--- /dev/null
+++ b/packages/web/app/components/svg/ColumnCell.vue
@@ -0,0 +1,9 @@
+    <script lang="ts">
+    export default {
+      name: 'MaterialSymbolsViewColumnRounded'
+    }
+    </script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 19q-.425 0-.712-.288T3 18V6q0-.425.288-.712T4 5h3.325q.425 0 .713.288T8.325 6v12q0 .425-.287.713T7.325 19H4Zm6.325 0q-.425 0-.712-.288T9.324 18V6q0-.425.288-.712T10.325 5h3.325q.425 0 .713.288T14.65 6v12q0 .425-.288.713T13.65 19h-3.325Zm6.325 0q-.425 0-.712-.288T15.65 18V6q0-.425.288-.712T16.65 5h3.325q.425 0 .713.288t.287.712v12q0 .425-.288.713t-.712.287H16.65Z"></path></svg>
+</template>
diff --git a/packages/web/app/components/svg/GridCell.vue b/packages/web/app/components/svg/GridCell.vue
new file mode 100644
index 0000000..4e72b04
--- /dev/null
+++ b/packages/web/app/components/svg/GridCell.vue
@@ -0,0 +1,9 @@
+  <script lang="ts">
+  export default {
+    name: 'BiGrid3x3GapFill'
+  }
+  </script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z"></path></svg>
+</template>
diff --git a/packages/web/app/components/svg/PaperStack.vue b/packages/web/app/components/svg/PaperStack.vue
new file mode 100644
index 0000000..5cdeccc
--- /dev/null
+++ b/packages/web/app/components/svg/PaperStack.vue
@@ -0,0 +1,9 @@
+  <script lang="ts">
+  export default {
+    name: 'GisLayers'
+  }
+  </script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 100 100"><!-- Icon from Font-GIS by Jean-Marc Viglino - https://github.com/Viglino/font-gis/blob/main/LICENSE-CC-BY.md --><path fill="currentColor" d="M28.135 10.357a3.5 3.5 0 0 0-2.668 1.235L.832 40.607a3.5 3.5 0 0 0 2.67 5.766l93-.064a3.5 3.5 0 0 0 2.666-5.766L74.59 11.592a3.5 3.5 0 0 0-2.668-1.235zM89.91 51.313l-9.178.007l8.211 9.67l-77.875.053l8.22-9.682l-9.188.008L.832 62.283a3.5 3.5 0 0 0 2.67 5.766l93-.065a3.5 3.5 0 0 0 2.666-5.765zm0 21.593l-9.178.008l8.211 9.67l-77.875.053l8.22-9.682l-9.188.008L.832 83.877a3.5 3.5 0 0 0 2.67 5.766l93-.065a3.5 3.5 0 0 0 2.666-5.766z" color="currentColor"></path></svg>
+</template>
diff --git a/packages/web/app/composables/fetch-clusters.ts b/packages/web/app/composables/fetch-clusters.ts
new file mode 100644
index 0000000..586f6e1
--- /dev/null
+++ b/packages/web/app/composables/fetch-clusters.ts
@@ -0,0 +1,9 @@
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+export function useFetchClusters(selectedRepo: Ref<string>) {
+  return useFetch<IssueMetadata[]>(() => `/api/clusters/${selectedRepo.value}`, {
+    key: 'clusters',
+    baseURL: useRuntimeConfig().public.remote,
+    default: () => [],
+  })
+}
diff --git a/packages/web/app/composables/fetch-duplicates.ts b/packages/web/app/composables/fetch-duplicates.ts
new file mode 100644
index 0000000..1a02ea0
--- /dev/null
+++ b/packages/web/app/composables/fetch-duplicates.ts
@@ -0,0 +1,9 @@
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+export function useFetchDuplicates(selectedRepo: Ref<string>) {
+  return useFetch<IssueMetadata[]>(() => `/api/duplicates/${selectedRepo.value}`, {
+    key: 'duplicates',
+    baseURL: useRuntimeConfig().public.remote,
+    default: () => [],
+  })
+}
diff --git a/packages/web/app/composables/fetch-repos.ts b/packages/web/app/composables/fetch-repos.ts
new file mode 100644
index 0000000..1c40910
--- /dev/null
+++ b/packages/web/app/composables/fetch-repos.ts
@@ -0,0 +1,10 @@
+import type { RepoMetadata } from '~~/shared/models/github-metadata'
+
+export function useFetchRepos() {
+  return useFetch<RepoMetadata[]>('/api/repos', {
+    key: 'repos',
+    baseURL: useRuntimeConfig().public.remote,
+    getCachedData: (key, nuxtApp) => nuxtApp.payload.data[key] || nuxtApp.static.data[key],
+    default: () => [],
+  })
+}
diff --git a/packages/web/app/composables/repos.ts b/packages/web/app/composables/repos.ts
deleted file mode 100644
index fd37261..0000000
--- a/packages/web/app/composables/repos.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function useRepos() {
-  return useFetch('/api/repos', {
-    baseURL: useRuntimeConfig().public.remote,
-    getCachedData: (key, nuxtApp) => nuxtApp.payload.data[key] || nuxtApp.static.data[key],
-    default: () => [],
-  })
-}
diff --git a/packages/web/app/composables/selected-repo.ts b/packages/web/app/composables/selected-repo.ts
new file mode 100644
index 0000000..d1a7a19
--- /dev/null
+++ b/packages/web/app/composables/selected-repo.ts
@@ -0,0 +1,8 @@
+const DEFAULT_REPO = 'nuxt/nuxt'
+
+const selectedRepo = ref<string>(DEFAULT_REPO)
+
+export function useSelectedRepo(owner: string, repo: string) {
+  selectedRepo.value = owner && repo ? `${owner}/${repo}` : DEFAULT_REPO
+  return selectedRepo
+}
diff --git a/packages/web/app/composables/toggle-view.ts b/packages/web/app/composables/toggle-view.ts
new file mode 100644
index 0000000..0d0ef55
--- /dev/null
+++ b/packages/web/app/composables/toggle-view.ts
@@ -0,0 +1,19 @@
+export type ViewToggleState =
+  'PaperStack' |
+  'GridCell' |
+  'ColumnCell'
+
+const selectedView = ref<ViewToggleState>('PaperStack')
+
+export function useToggleViewState() {
+  const toggleViewState = (event: PointerEvent) => {
+    event.preventDefault()
+    const button = event.currentTarget as HTMLButtonElement
+    selectedView.value = button.value as ViewToggleState
+  }
+
+  return {
+    selectedView,
+    toggleViewState,
+  }
+}
diff --git a/packages/web/app/pages/[owner]/[repo]/index.vue b/packages/web/app/pages/[owner]/[repo]/index.vue
index 45cd73d..65e9f25 100644
--- a/packages/web/app/pages/[owner]/[repo]/index.vue
+++ b/packages/web/app/pages/[owner]/[repo]/index.vue
@@ -1,206 +1,46 @@
 <script setup lang="ts">
-const route = useRoute('owner-repo')
+const OWNER_REPO = 'owner-repo'
+
+const route = useRoute(OWNER_REPO)
 
 useSeoMeta({
   title: () => `Issue clusters - ${route.params.owner}/${route.params.repo}`
 })
 
-const { data: allowedRepos } = useRepos()
+const { data: allowedRepos } = useFetchRepos()
 
-const selectedRepo = computed(() => route.params.owner && route.params.repo ? `${route.params.owner}/${route.params.repo}` as 'nuxt/nuxt' : 'nuxt/nuxt')
+const selectedRepo = useSelectedRepo(route.params.owner, route.params.repo)
 
-const { data: clusters, refresh, status } = useFetch(() => `/api/clusters/${selectedRepo.value}`, {
-  baseURL: useRuntimeConfig().public.remote,
-  default: () => [],
-})
+const { data: clusters, refresh, status } = useFetchClusters(selectedRepo)
 
-const showDuplicates = ref(false)
-const { data: duplicates, status: duplicateStatus } = useFetch(() => `/api/duplicates/${selectedRepo.value}`, {
-  baseURL: useRuntimeConfig().public.remote,
-  default: () => [],
-})
+const { data: duplicates, status: duplicatesStatus } = useFetchDuplicates(selectedRepo)
 
-onMounted(async () => {
-  if ('startViewTransition' in document) {
-    let finishTransition: () => void
-    const promise = new Promise<void>((resolve) => {
-      finishTransition = resolve
-    })
-    watch(clusters, () => document.startViewTransition(() => promise), { flush: 'pre' })
-    watch(clusters, () => nextTick(finishTransition), { flush: 'post' })
-  }
-})
-
-function navigateToRepo(event: Event) {
-  const [owner, repo] = (event.target as HTMLSelectElement).value.split('/') as [string, string]
-  return navigateTo({
-    name: 'owner-repo',
-    params: { owner, repo },
-  })
-}
-
-const openState = reactive<Record<string, boolean>>({})
+const refreshClusters = () => refresh()
 </script>
 
 <template>
-  <div>
-    <form @submit.prevent="() => refresh()">
-      <div class="flex gap-2 items-center">
-        <h2 class="text-base my-3 font-normal">
-          {{ selectedRepo }}
-        </h2>
-        <button
-          class="rounded-full w-7 h-7 flex items-center justify-center border-solid border border-gray-700 bg-transparent color-gray-400 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors flex-shrink-0"
-          :class="{ 'animate-spin opacity-50 pointer-events-none': status === 'pending' || status === 'idle' }"
-          type="submit"
-        >
-          <span
-            size="medium"
-            class="text-gray-400 flex-shrink-0 i-tabler-refresh inline-block w-4 h-4"
-          />
-          <span class="sr-only">refresh data</span>
-        </button>
-      </div>
-      <label class="w-full text-xs border-solid border border-gray-600 rounded-md flex flex-row items-center relative">
-        <span class="sr-only">pick a repository to cluster issues</span>
-        <select
-          :value="selectedRepo"
-          class="pl-8 bg-shark-500 rounded-md pr-2 py-2 color-white border-0 w-full appearance-none"
-          @change="navigateToRepo"
-        >
-          <option
-            v-for="repo in allowedRepos.filter((repo) => repo.issuesIndexed > 0)"
-            :key="repo.repo"
-            :selected="repo.repo === selectedRepo"
-          >
-            {{ repo.repo }}
-          </option>
-        </select>
-        <span
-          class="absolute ml-2 text-gray-400 flex-shrink-0 i-tabler-search inline-block w-5 h-5"
-        />
-      </label>
-    </form>
-    <div
-      v-if="duplicateStatus !== 'success' && duplicateStatus !== 'error'"
-      class="mt-6 rounded-md border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors flex items-center gap-2 justify-center pointer-events-none animate-pulse"
-    >
-      <span
-        size="medium"
-        class="text-gray-400 flex-shrink-0 i-tabler-refresh inline-block w-4 h-4 animate-spin"
+  <RepoViewLayout>
+    <template #console>
+      <CommandConsole 
+        :allowedRepos="allowedRepos" 
+        :status="status" 
+        :selectedRepo="selectedRepo" 
+        v-model:refresh="refreshClusters"
       />
-      loading duplicates
-    </div>
-    <button
-      v-else-if="!showDuplicates && duplicates.length"
-      class="mt-6 rounded-md border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors flex items-center gap-2 justify-center w-full"
-      type="button"
-      @click="showDuplicates = true"
-    >
-      show {{ duplicates?.length }} possible duplicates
-    </button>
-    <template v-if="showDuplicates">
-      <section
-        v-for="(cluster, i) of showDuplicates ? duplicates : []"
-        class="flex flex-col gap-4 md:rounded-md md:border-solid md:border md:border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 flex-wrap border-b-solid"
-      >
-        <h2 class="my-4 font-bold text-2xl flex items-baseline">
-          <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
-          <span>{{ i + 1 }}</span>
-          <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
-            <span class="i-tabler-wash-dryclean-off inline-block w-4 h-4"></span>
-            possible duplicate
-          </span>
-        </h2>
-        <GitHubIssue
-          v-for="(issue, j) of cluster"
-          :key="j"
-          :url="issue.url"
-          :title="issue.title"
-          :owner="issue.owner"
-          :repository="issue.repository"
-          :number="issue.number"
-          :avg-similarity="issue.score"
-          :labels="issue.labels"
-          :updated_at="issue.updated_at"
-        />
-      </section>
-
     </template>
-    <template v-if="status === 'idle' || status === 'pending'">
-      <section
-        v-for="i in 7"
-        :key="i"
-        :style="{ '--section-index': i }"
-        class="flex flex-col gap-4 md:rounded-md md:border-solid border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid animate-pulse"
-      >
-        <h2 class="flex items-center my-4 font-bold text-2xl">
-          <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
-          <span class="inline-block rounded-md h-5 bg-gray-500 w-5" />
-        </h2>
-        <GitHubIssueLoading
-          v-for="s in Math.round(Math.random() * 3) + 1"
-          :key="s"
-        />
-      </section>
-    </template>
-    <template v-else-if="!clusters.length">
-      <section
-        class="flex flex-col gap-4 md:rounded-md md:border-solid border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
-      >
-        <h2 class="flex items-center my-4 font-bold text-2xl">
-          <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
-        </h2>
-        <p class="flex flex-row gap-2 leading-tightest">
-          <span
-            class="flex-shrink-0 text-gray-400 i-tabler-alert-triangle inline-block w-5 h-5"
-          />
-          no clusters could be identified
-        </p>
-      </section>
+
+    <template #duplicates>
+      <DuplicatesView 
+        :duplicates="duplicates" 
+        :status="duplicatesStatus" 
+      />
     </template>
-    <template v-else>
-      <section
-        v-for="(cluster, c) of clusters"
-        :key="c"
-        :style="{ '--section-index': c }"
-        class="flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
-      >
-        <h2 class="my-4 font-bold text-2xl flex items-baseline">
-          <span class="text-gray-500 inline-block mr-1 font-normal">#</span>{{ c + 1 }}
-          <span class="ml-2 font-normal text-lg color-gray-300">&mdash; {{ cluster.title }}</span>
-          <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
-            <span class="i-tabler:copy inline-block w-4 h-4"></span>
-            cluster
-          </span>
-        </h2>
-        <GitHubIssue
-          v-for="(issue, i) of openState[c] !== true ? cluster.issues.slice(0, 5) : cluster.issues"
-          :key="i"
-          :url="issue.url"
-          :title="issue.title"
-          :owner="issue.owner"
-          :repository="issue.repository"
-          :number="issue.number"
-          :avg-similarity="issue.avgSimilarity"
-          :labels="issue.labels"
-          :updated_at="issue.updated_at"
-        />
-        <button
-          v-if="cluster.issues.length > 5 && openState[c] !== true"
-          class="rounded-md text-sm border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
-          type="button"
-          @click="openState[c] = !openState[c]"
-        >
-          show {{ cluster.issues.length - 5 }} more
-        </button>
-      </section>
+
+    <template #clusters >
+      <ClusterViewJunction 
+        :clusters="clusters" 
+        :status="status" 
+      />
     </template>
-  </div>
+  </RepoViewLayout>
 </template>
-
-<style scoped>
-section:first-of-type {
-  view-transition-name: var(--section-index);
-}
-</style>
diff --git a/packages/web/app/pages/index.vue b/packages/web/app/pages/index.vue
index 79004b9..8df87ae 100644
--- a/packages/web/app/pages/index.vue
+++ b/packages/web/app/pages/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const config = useRuntimeConfig()
 
-const { data: allowedRepos, refresh } = useRepos()
+const { data: allowedRepos, refresh } = useFetchRepos()
 
 const installationURL = `https://github.com/apps/${config.public.github.appSlug}/installations/new`
 
diff --git a/packages/web/app/utils/label-colors.ts b/packages/web/app/utils/label-colors.ts
new file mode 100644
index 0000000..c95b490
--- /dev/null
+++ b/packages/web/app/utils/label-colors.ts
@@ -0,0 +1,16 @@
+import hexRgb from 'hex-rgb'
+import rgbToHSL from 'rgb-to-hsl'
+
+export function labelColors(color: string) {
+  const value = hexRgb(color)
+  const [hue, saturation, lightness] = rgbToHSL(value.red, value.green, value.blue)
+
+  return {
+    '--label-r': Math.round(value.red),
+    '--label-g': Math.round(value.green),
+    '--label-b': Math.round(value.blue),
+    '--label-h': Math.round(hue),
+    '--label-s': Math.round(Number.parseInt(saturation)),
+    '--label-l': Math.round(Number.parseInt(lightness)),
+  }
+}
diff --git a/packages/web/server/api/clusters/[owner]/[repo].get.ts b/packages/web/server/api/clusters/[owner]/[repo].get.ts
index fa7cd90..bbec079 100644
--- a/packages/web/server/api/clusters/[owner]/[repo].get.ts
+++ b/packages/web/server/api/clusters/[owner]/[repo].get.ts
@@ -1,6 +1,7 @@
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
 import { defineCachedCorsEventHandler } from '~~/server/utils/cached-cors'
 import { clusterEmbeddings, generateClusterName } from '~~/server/utils/cluster'
-import { getStoredEmbeddingsForRepo, type IssueMetadata } from '~~/server/utils/embeddings'
+import { getStoredEmbeddingsForRepo } from '~~/server/utils/embeddings'
 
 export default defineCachedCorsEventHandler(async (event) => {
   const { owner, repo } = getRouterParams(event)
diff --git a/packages/web/server/api/duplicates/[owner]/[repo].get.ts b/packages/web/server/api/duplicates/[owner]/[repo].get.ts
index ec99d92..4f0ea84 100644
--- a/packages/web/server/api/duplicates/[owner]/[repo].get.ts
+++ b/packages/web/server/api/duplicates/[owner]/[repo].get.ts
@@ -1,6 +1,7 @@
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
 import { defineCachedCorsEventHandler } from '~~/server/utils/cached-cors'
 import { findDuplicates } from '~~/server/utils/cluster'
-import { getStoredEmbeddingsForRepo, type IssueMetadata } from '~~/server/utils/embeddings'
+import { getStoredEmbeddingsForRepo } from '~~/server/utils/embeddings'
 
 export default defineCachedCorsEventHandler(async (event) => {
   const { owner, repo } = getRouterParams(event)
diff --git a/packages/web/server/api/similarity/[owner]/[repo]/[number].get.ts b/packages/web/server/api/similarity/[owner]/[repo]/[number].get.ts
index 501d64c..14321d8 100644
--- a/packages/web/server/api/similarity/[owner]/[repo]/[number].get.ts
+++ b/packages/web/server/api/similarity/[owner]/[repo]/[number].get.ts
@@ -1,4 +1,4 @@
-import type { IssueMetadata } from '~~/server/utils/embeddings'
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
 import { defineCachedCorsEventHandler } from '~~/server/utils/cached-cors'
 import { storageKeyForIssue } from '~~/server/utils/embeddings'
 
diff --git a/packages/web/server/utils/embeddings.ts b/packages/web/server/utils/embeddings.ts
index cc53a63..8b7b4bb 100644
--- a/packages/web/server/utils/embeddings.ts
+++ b/packages/web/server/utils/embeddings.ts
@@ -109,17 +109,6 @@ export async function indexIssue(issue: Issue | RestIssue, repository: { owner:
   return embeddings
 }
 
-export interface IssueMetadata {
-  owner: string
-  repository: string
-  number: number
-  title: string
-  url: string
-  updated_at: string
-  labels: string[]
-  [key: string]: string | number | boolean | string[]
-}
-
 export interface StoredEmbeddings {
   mtime: number
   hash: string
diff --git a/packages/web/shared/models/github-metadata.ts b/packages/web/shared/models/github-metadata.ts
new file mode 100644
index 0000000..b360d6e
--- /dev/null
+++ b/packages/web/shared/models/github-metadata.ts
@@ -0,0 +1,17 @@
+export interface RepoMetadata {
+  repo: string
+  issuesIndexed: number
+  indexed: boolean
+}
+
+export interface IssueMetadata {
+  url: string
+  title: string
+  owner: string
+  repository: string
+  updated_at: string
+  number: number
+  score: number
+  labels: string[]
+  [key: string]: string | number | boolean | string[]
+}