diff --git a/components/JokeBlock.vue b/components/JokeBlock.vue
new file mode 100644
index 0000000..73ea89e
--- /dev/null
+++ b/components/JokeBlock.vue
@@ -0,0 +1,25 @@
+<script>
+export default {
+  data: () => ({
+    joke: '',
+  }),
+  async mounted() {
+    this.joke = await fetch('/api/joke').then((res) => res.json())
+  },
+}
+</script>
+
+<template>
+  <article>
+    <blockquote>
+      <p>{{ joke }}</p>
+    </blockquote>
+  </article>
+</template>
+
+<style scoped>
+blockquote {
+  border-left: 5px solid #ccc;
+  padding: 0.5rem;
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index c3dd9b5..140ec6f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,10 @@
 <template>
-  <FeedbackForm />
+  <main>
+    <FeedbackForm />
+    <JokeBlock />
+  </main>
 </template>
+
 <style>
 * {
   font-family: 'Helvetica', sans-serif;