diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte
index f75a6afc..d66c3031 100644
--- a/materialious/src/lib/Thumbnail.svelte
+++ b/materialious/src/lib/Thumbnail.svelte
@@ -33,11 +33,7 @@
 </script>
 
 <article class="no-padding transparent" style="width: 100%;">
-	<a
-		class="wave"
-		style="width: 100%;height: 155px; overflow: hidden;"
-		href={`/watch/${video.videoId}`}
-	>
+	<a class="wave" style="width: 100%; overflow: hidden;" href={`/watch/${video.videoId}`}>
 		{#if loading}
 			<progress class="circle"></progress>
 		{:else if loaded}
diff --git a/materialious/src/lib/VideoList.svelte b/materialious/src/lib/VideoList.svelte
new file mode 100644
index 00000000..ed8b774f
--- /dev/null
+++ b/materialious/src/lib/VideoList.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { get } from 'svelte/store';
+	import { activePage } from '../store';
+	import type { Video, VideoBase } from './Api/model';
+	import PageLoading from './PageLoading.svelte';
+	import Thumbnail from './Thumbnail.svelte';
+
+	export let videos: VideoBase[] | Video[] | Notification[] = [];
+</script>
+
+<h2>{get(activePage)}</h2>
+
+<div class="divider"></div>
+
+{#if videos.length > 0}
+	<div class="page right active">
+		<div class="space"></div>
+		<div class="grid">
+			{#each videos as video}
+				<div class="s12 m6 l2">
+					<Thumbnail {video} />
+				</div>
+			{/each}
+		</div>
+	</div>
+{:else}
+	<PageLoading />
+{/if}
+
+<style>
+	h2 {
+		color: var(--secondary-text);
+		padding: 0.2em;
+		text-transform: capitalize;
+		display: flex;
+		justify-content: center;
+	}
+</style>
diff --git a/materialious/src/routes/+page.svelte b/materialious/src/routes/+page.svelte
index 4460a0b5..999922cf 100644
--- a/materialious/src/routes/+page.svelte
+++ b/materialious/src/routes/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import PageLoading from '$lib/PageLoading.svelte';
-	import Thumbnail from '$lib/Thumbnail.svelte';
+	import VideoList from '$lib/VideoList.svelte';
 	import { activePage } from '../store.js';
 
 	export let data;
@@ -8,17 +7,4 @@
 	activePage.set('home');
 </script>
 
-{#if data}
-	<div class="page right active">
-		<div class="space"></div>
-		<div class="grid">
-			{#each data.popular as video}
-				<div class="s12 m6 l2">
-					<Thumbnail {video} />
-				</div>
-			{/each}
-		</div>
-	</div>
-{:else}
-	<PageLoading />
-{/if}
+<VideoList videos={data.popular} />
diff --git a/materialious/src/routes/history/+page.svelte b/materialious/src/routes/history/+page.svelte
index 977967d0..b0536f3a 100644
--- a/materialious/src/routes/history/+page.svelte
+++ b/materialious/src/routes/history/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { getHistory, getVideo } from '$lib/Api';
 	import type { VideoPlay } from '$lib/Api/model';
-	import PageLoading from '$lib/PageLoading.svelte';
-	import Thumbnail from '$lib/Thumbnail.svelte';
+	import VideoList from '$lib/VideoList.svelte';
 	import { onMount } from 'svelte';
 	import { activePage } from '../../store';
 
@@ -26,17 +25,4 @@
 	});
 </script>
 
-{#if loaded}
-	<div class="page right active">
-		<div class="space"></div>
-		<div class="grid">
-			{#each history as video}
-				<div class="s12 m6 l2">
-					<Thumbnail {video} />
-				</div>
-			{/each}
-		</div>
-	</div>
-{:else}
-	<PageLoading />
-{/if}
+<VideoList videos={history} />
diff --git a/materialious/src/routes/search/[slug]/+page.svelte b/materialious/src/routes/search/[slug]/+page.svelte
index d0102917..cd9ac70c 100644
--- a/materialious/src/routes/search/[slug]/+page.svelte
+++ b/materialious/src/routes/search/[slug]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import PageLoading from '$lib/PageLoading.svelte';
-	import Thumbnail from '$lib/Thumbnail.svelte';
+	import VideoList from '$lib/VideoList.svelte';
 	import { activePage } from '../../../store';
 
 	export let data;
@@ -8,17 +7,4 @@
 	activePage.set(null);
 </script>
 
-{#if data}
-	<div class="page right active">
-		<div class="space"></div>
-		<div class="grid">
-			{#each data.search as video}
-				<div class="s12 m6 l2">
-					<Thumbnail {video} />
-				</div>
-			{/each}
-		</div>
-	</div>
-{:else}
-	<PageLoading />
-{/if}
+<VideoList videos={data.search} />
diff --git a/materialious/src/routes/subscriptions/+page.svelte b/materialious/src/routes/subscriptions/+page.svelte
index 3c81b752..78fd4ef4 100644
--- a/materialious/src/routes/subscriptions/+page.svelte
+++ b/materialious/src/routes/subscriptions/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import PageLoading from '$lib/PageLoading.svelte';
-	import Thumbnail from '$lib/Thumbnail.svelte';
+	import VideoList from '$lib/VideoList.svelte';
 	import { activePage } from '../../store.js';
 
 	export let data;
@@ -8,17 +7,4 @@
 	activePage.set('subscriptions');
 </script>
 
-{#if data}
-	<div class="page right active">
-		<div class="space"></div>
-		<div class="grid">
-			{#each [...data.feed.notifications, ...data.feed.videos] as video}
-				<div class="s12 m6 l2">
-					<Thumbnail {video} />
-				</div>
-			{/each}
-		</div>
-	</div>
-{:else}
-	<PageLoading />
-{/if}
+<VideoList videos={[...data.feed.videos, ...data.feed.notifications]} />
diff --git a/materialious/src/routes/trending/+page.svelte b/materialious/src/routes/trending/+page.svelte
index db5467c9..6bc28178 100644
--- a/materialious/src/routes/trending/+page.svelte
+++ b/materialious/src/routes/trending/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import PageLoading from '$lib/PageLoading.svelte';
-	import Thumbnail from '$lib/Thumbnail.svelte';
+	import VideoList from '$lib/VideoList.svelte';
 	import { activePage } from '../../store.js';
 
 	export let data;
@@ -8,17 +7,4 @@
 	activePage.set('trending');
 </script>
 
-{#if data}
-	<div class="page right active">
-		<div class="space"></div>
-		<div class="grid">
-			{#each data.trending as video}
-				<div class="s12 m6 l2">
-					<Thumbnail {video} />
-				</div>
-			{/each}
-		</div>
-	</div>
-{:else}
-	<PageLoading />
-{/if}
+<VideoList videos={data.trending} />