diff --git a/src/client/components/channel-preview.vue b/src/client/components/channel-preview.vue
index e5676e5ae9..41be1c296d 100644
--- a/src/client/components/channel-preview.vue
+++ b/src/client/components/channel-preview.vue
@@ -1,6 +1,6 @@
 <template>
 <MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
-	<div class="banner" v-if="channel.bannerUrl" :style="`background-image: url('${channel.bannerUrl}')`">
+	<div class="banner" :style="bannerStyle">
 		<div class="fade"></div>
 		<div class="name"><Fa :icon="faSatelliteDish"/> {{ channel.name }}</div>
 		<div class="status">
@@ -45,6 +45,16 @@ export default defineComponent({
 		},
 	},
 
+	computed: {
+		bannerStyle() {
+			if (this.channel.bannerUrl) {
+				return { backgroundImage: `url(${this.channel.bannerUrl})` };
+			} else {
+				return { backgroundColor: '#4c5e6d' };
+			}
+		}
+	},
+
 	data() {
 		return {
 			faSatelliteDish, faUsers, faPencilAlt,