diff --git a/resources/js/views/Article.vue b/resources/js/views/Article.vue
index 65ecce5..faeaf06 100644
--- a/resources/js/views/Article.vue
+++ b/resources/js/views/Article.vue
@@ -101,7 +101,8 @@ const handleLoad = async () => {
                 ).format("yyyy/MM/dd HH:mm:ss");
 
                 backgroundImageUrl.value = mediaGetVariantUrl(
-                    article.value.hero
+                    article.value.hero,
+                    "medium"
                 );
                 applicationStore.setDynamicTitle(article.value.title);
             } else {
diff --git a/resources/js/views/Event.vue b/resources/js/views/Event.vue
index 38220f2..1801503 100644
--- a/resources/js/views/Event.vue
+++ b/resources/js/views/Event.vue
@@ -3,7 +3,10 @@
         <div
             class="workshop-image"
             :style="{
-                backgroundImage: `url('${mediaGetVariantUrl(event.hero)}')`,
+                backgroundImage: `url('${mediaGetVariantUrl(
+                    event.hero,
+                    'medium'
+                )}')`,
             }"></div>
         <SMContainer>
             <SMContainer class="workshop-page">