diff --git a/client/src/components/modules/ModuleTeaser.vue b/client/src/components/modules/ModuleTeaser.vue
index 868e47d2..4b4a04d3 100644
--- a/client/src/components/modules/ModuleTeaser.vue
+++ b/client/src/components/modules/ModuleTeaser.vue
@@ -1,6 +1,6 @@
 <template>
   <router-link :to="moduleLink" tag="div" class="module-teaser">
-    <img :src="'https://picsum.photos/300/150?random='+id" alt="" class="module-teaser__image">
+    <img :src="heroImage" alt="" class="module-teaser__image">
     <div class="module-teaser__body">
       <h3 class="module-teaser__meta-title">{{metaTitle}}</h3>
       <h3 class="module-teaser__title">{{title}}</h3>
@@ -11,7 +11,7 @@
 
 <script>
   export default {
-    props: ['metaTitle', 'title', 'teaser', 'id', 'slug'],
+    props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage'],
 
     computed: {
       moduleLink() {
diff --git a/client/src/graphql/gql/fragments/moduleParts.gql b/client/src/graphql/gql/fragments/moduleParts.gql
index 6dbb929e..8afb905a 100644
--- a/client/src/graphql/gql/fragments/moduleParts.gql
+++ b/client/src/graphql/gql/fragments/moduleParts.gql
@@ -4,4 +4,5 @@ fragment ModuleParts on ModuleNode {
   metaTitle
   teaser
   slug
+  heroImage
 }
diff --git a/server/books/schema/queries.py b/server/books/schema/queries.py
index 08e5634d..f5981551 100644
--- a/server/books/schema/queries.py
+++ b/server/books/schema/queries.py
@@ -70,7 +70,7 @@ class ModuleNode(DjangoObjectType):
     class Meta:
         model = Module
         only_fields = [
-            'slug', 'title', 'meta_title', 'teaser', 'intro', 'objective_groups', 'assignments'
+            'slug', 'title', 'meta_title', 'teaser', 'intro', 'objective_groups', 'assignments', 'hero_image'
         ]
         filter_fields = {
             'slug': ['exact', 'icontains', 'in'],