diff --git a/nginx/vue/src/components/home/Watching.vue b/nginx/vue/src/components/home/Watching.vue
index f670b53..f344812 100644
--- a/nginx/vue/src/components/home/Watching.vue
+++ b/nginx/vue/src/components/home/Watching.vue
@@ -1,7 +1,7 @@
 <script setup>
 import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
 
-const arr = [
+const data = [
     {
         type: "Substack",
         name: "By Ellie",
@@ -59,7 +59,7 @@ const arr = [
     <div class="flex-col center-content">
         <h2>Consumption</h2>
         <div class="scroll fill">
-            <OptionalLinkTable :data="arr" />
+            <OptionalLinkTable :data="data" />
         </div>
     </div>
 </template>
diff --git a/nginx/vue/src/components/quick/OptionalLinkTable.vue b/nginx/vue/src/components/quick/OptionalLinkTable.vue
new file mode 100644
index 0000000..0c25bf5
--- /dev/null
+++ b/nginx/vue/src/components/quick/OptionalLinkTable.vue
@@ -0,0 +1,27 @@
+<script setup>
+// Array will have the form
+// [ {type: string, name: string, link?: string}]
+
+const props = defineProps({
+    data: {
+        type: Array,
+        required: true,
+    },
+});
+
+const keys = ["type", "name", "link"];
+</script>
+
+<template>
+    <table>
+        <tbody>
+            <tr v-for="item in data" :key="item.id">
+                <th>{{ item.type }}</th>
+                <td v-if="item.link">
+                    <a :href="item.link">{{ item.name }}</a>
+                </td>
+                <td v-else>{{ item.name }}</td>
+            </tr>
+        </tbody>
+    </table>
+</template>