diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index b310eacb..dace819e 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -10,6 +10,7 @@
 
 <script>
   import TextBlock from '@/components/content-blocks/TextBlock.vue';
+  import ModalText from '@/components/content-blocks/ModalText.vue';
   import Task from '@/components/content-blocks/Task.vue';
   import ImageBlock from '@/components/content-blocks/ImageBlock.vue';
   import StudentEntry from '@/components/content-blocks/StudentEntry.vue';
@@ -19,9 +20,10 @@
 
     components: {
       'text_block': TextBlock,
-      Task,
+      'modal_text': ModalText,
+      'student_entry': StudentEntry,
       'image_block': ImageBlock,
-      'student_entry': StudentEntry
+      Task
     }
   }
 </script>
diff --git a/client/src/components/content-blocks/ModalText.vue b/client/src/components/content-blocks/ModalText.vue
new file mode 100644
index 00000000..443cc968
--- /dev/null
+++ b/client/src/components/content-blocks/ModalText.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <div v-html="value.description"></div>
+    <a :href="value.url">{{value.url}}</a>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['value']
+  }
+</script>