diff --git a/src/hooks/useComputeBacklinks.hook.ts b/src/hooks/useComputeBacklinks.hook.ts
index bb4c5a8..8ed324a 100644
--- a/src/hooks/useComputeBacklinks.hook.ts
+++ b/src/hooks/useComputeBacklinks.hook.ts
@@ -29,6 +29,7 @@ export const useComputeBacklinks = () => {
       if (!isMarkdown(file.path) || !file.sha) {
         continue
       }
+
       const fileBacklinkId = data.generateId(DataType.BacklinkNote, file.sha)
       const fileBacklink = await data.get<DataType.BacklinkNote, BacklinkNote>(
         fileBacklinkId
@@ -36,7 +37,11 @@ export const useComputeBacklinks = () => {
       if (fileBacklink) {
         continue
       }
-      backlinks.set(file.sha, [])
+
+      if (!backlinks.has(file.sha)) {
+        backlinks.set(file.sha, [])
+      }
+
       const { getContent } = useFile(file.sha, false)
       const note = await getContent()
 
@@ -64,6 +69,7 @@ export const useComputeBacklinks = () => {
         }
 
         const previousBacklinks = backlinks.get(backlinkFile.sha) ?? []
+
         if (previousBacklinks.find((bl) => bl.sha === file.sha)) {
           continue
         }
diff --git a/src/modules/card/components/FlipCard.vue b/src/modules/card/components/FlipCard.vue
new file mode 100644
index 0000000..1c43d7a
--- /dev/null
+++ b/src/modules/card/components/FlipCard.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="flip-card" :class="{ flipped }" @click="flip">
+    <div class="flip-card-inner">
+      <div class="flip-card-front flip-card-content" v-html="card.front"></div>
+      <div class="flip-card-back flip-card-content">
+        <div class="back" v-html="card.back"></div>
+        <hr />
+        <div class="references" v-html="card.references"></div>
+        <hr />
+        <div class="buttons is-centered">
+          <div class="button is-danger" @click.stop="action">failed</div>
+          <div class="button is-success" @click.stop="action">got it</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue'
+import { Card } from '../models/Card'
+
+export default defineComponent({
+  name: 'FlipCard',
+  props: {
+    card: { type: Object as PropType<Card>, required: true }
+  },
+  setup() {
+    const flipped = ref(false)
+
+    const flip = () => (flipped.value = !flipped.value)
+    const action = () => {
+      console.log('action')
+    }
+
+    return { flip, flipped, action }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.flip-card {
+  display: flex;
+  background-color: transparent;
+  padding: 0 1rem;
+  margin: auto;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  .flip-card-inner {
+    flex: 1;
+    position: relative;
+    transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.4s;
+    transform-style: preserve-3d;
+    border-radius: 1rem;
+  }
+
+  &.flipped .flip-card-inner {
+    transform: rotateY(180deg);
+  }
+
+  .flip-card-front,
+  .flip-card-back {
+    position: absolute;
+    backface-visibility: hidden;
+  }
+
+  .flip-card-content {
+    width: 100%;
+    background-color: #ebebeb;
+    color: var(--font-color);
+    padding: 1rem;
+    border-radius: 1rem;
+  }
+
+  .flip-card-back {
+    transform: rotateY(180deg);
+  }
+}
+</style>
diff --git a/src/modules/card/hooks/useSpacedRepetitionCards.ts b/src/modules/card/hooks/useSpacedRepetitionCards.ts
index ed70fda..0775b65 100644
--- a/src/modules/card/hooks/useSpacedRepetitionCards.ts
+++ b/src/modules/card/hooks/useSpacedRepetitionCards.ts
@@ -19,10 +19,12 @@ export const useSpacedRepetitionCards = () => {
 
   const cards = asyncComputed(async () => {
     const cards: Card[] = []
+
     for (const cardFile of cardFiles.value) {
       if (!cardFile.sha) {
         continue
       }
+
       const { getRawContent } = useFile(cardFile.sha, false)
       const content = await getRawContent()
 
@@ -35,6 +37,7 @@ export const useSpacedRepetitionCards = () => {
         references: renderString(references)
       })
     }
+
     return cards
   }, [])
 
diff --git a/src/views/SpacedRepetitionCard.vue b/src/views/SpacedRepetitionCard.vue
index ca806ce..c022944 100644
--- a/src/views/SpacedRepetitionCard.vue
+++ b/src/views/SpacedRepetitionCard.vue
@@ -6,38 +6,23 @@
       :repo="repo"
       :with-content="false"
     >
-      <div
-        v-for="(card, i) in cards"
-        :key="i"
-        class="flip-card"
-        :class="{ flipped }"
-        @click="flip"
-      >
-        <div class="flip-card-inner">
-          <div
-            class="flip-card-front flip-card-content"
-            v-html="card.front"
-          ></div>
-          <div class="flip-card-back flip-card-content">
-            <div class="back" v-html="card.back"></div>
-            <hr />
-            <div class="references" v-html="card.references"></div>
-          </div>
-        </div>
-      </div>
+      <flip-card v-if="firstCard" :card="firstCard" />
+      <section v-else>No cards to review!</section>
     </flux-note>
   </div>
 </template>
 
 <script lang="ts">
 import { useSpacedRepetitionCards } from '@/modules/card/hooks/useSpacedRepetitionCards'
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent } from 'vue'
 import FluxNote from '@/components/FluxNote.vue'
+import FlipCard from '@/modules/card/components/FlipCard.vue'
 
 export default defineComponent({
   name: 'SpacedRepetitionCard',
   components: {
-    FluxNote
+    FluxNote,
+    FlipCard
   },
   props: {
     user: { type: String, required: true },
@@ -45,14 +30,13 @@ export default defineComponent({
   },
   setup() {
     const { cards } = useSpacedRepetitionCards()
-    const flipped = ref(false)
-
-    const flip = () => (flipped.value = !flipped.value)
+    const firstCard = computed(() => {
+      const [firstCard] = cards.value
+      return firstCard
+    })
 
     return {
-      cards,
-      flipped,
-      flip
+      firstCard
     }
   }
 })
@@ -62,46 +46,5 @@ export default defineComponent({
 .spaced-repetition-card {
   display: flex;
   flex: 1;
-
-  .flip-card {
-    display: flex;
-    background-color: transparent;
-    padding: 0 1rem;
-    margin: auto;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  .flip-card-inner {
-    flex: 1;
-    position: relative;
-    transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.4s;
-    transform-style: preserve-3d;
-    border-radius: 1rem;
-  }
-
-  .flip-card.flipped .flip-card-inner {
-    transform: rotateY(180deg);
-  }
-
-  .flip-card-front,
-  .flip-card-back {
-    position: absolute;
-    backface-visibility: hidden;
-  }
-
-  .flip-card-content {
-    width: 100%;
-    background-color: #ebebeb;
-    color: var(--font-color);
-    padding: 1rem;
-    border-radius: 1rem;
-  }
-
-  .flip-card-back {
-    transform: rotateY(180deg);
-  }
 }
 </style>