diff --git a/assets/components/actors/actor.vue b/assets/components/actors/actor.vue
index 07daa773..5a7d2161 100644
--- a/assets/components/actors/actor.vue
+++ b/assets/components/actors/actor.vue
@@ -283,10 +283,19 @@
 			</div>
 
 			<div class="actor-content">
-				<Photos
+				<Scroll
 					v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
-					:actor="actor"
-				/>
+					class="scroll-light"
+				>
+					<Photos :actor="actor" />
+
+					<template v-slot:expanded>
+						<Photos
+							class="expanded"
+							:actor="actor"
+						/>
+					</template>
+				</Scroll>
 
 				<FilterBar
 					:fetch-releases="fetchActor"
@@ -307,10 +316,11 @@
 </template>
 
 <script>
-import Photos from './photos.vue';
 import Pagination from '../pagination/pagination.vue';
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
+import Photos from './photos.vue';
+import Scroll from '../scroll/scroll.vue';
 import Gender from './gender.vue';
 import Social from './social.vue';
 
@@ -348,6 +358,7 @@ export default {
 		FilterBar,
 		Pagination,
 		Photos,
+		Scroll,
 		Releases,
 		Gender,
 		Social,
@@ -637,9 +648,62 @@ export default {
     display: none;
 }
 
-.expand,
-.collapse-header {
+.expand {
     display: none;
+    justify-content: center;
+    align-items: center;
+    padding: .5rem .25rem;
+    font-weight: bold;
+    font-size: .9rem;
+    cursor: pointer;
+
+    .icon {
+        fill: $shadow;
+    }
+
+    &:hover {
+        background: $shadow-hint;
+
+        .icon {
+            fill: $shadow-strong;
+        }
+    }
+}
+
+.expand-sidebar:hover {
+    background: $shadow-hint;
+}
+
+.expand-header {
+    display: none;
+
+    &:hover {
+        background: $shadow-hint;
+    }
+}
+
+.collapse-header {
+	display: none;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    background: $profile;
+
+    .icon {
+        width: 100%;
+        fill: $highlight;
+        padding: .5rem 0;
+    }
+
+    &:hover .icon {
+        background: $highlight-hint;
+        fill: $text-contrast;
+    }
+}
+
+.scroll {
+	border-bottom: solid 1px var(--shadow-hint);
 }
 
 @media(max-width: $breakpoint4) {
diff --git a/assets/components/actors/photos.vue b/assets/components/actors/photos.vue
index df23291d..9eaa7139 100644
--- a/assets/components/actors/photos.vue
+++ b/assets/components/actors/photos.vue
@@ -5,17 +5,17 @@
 		:class="{
 			avatar: !!actor.avatar,
 			empty: actor.photos.length === 0,
-			wide: actor.photos.length > 2
 		}"
 	>
 		<a
-			v-if="actor.avatar"
+			v-show="actor.avatar"
 			:href="`/media/${actor.avatar.path}`"
 			target="_blank"
 			rel="noopener noreferrer"
 			class="avatar-link photo-link"
 		>
 			<img
+				:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
 				:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
 				:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
 				:title="actor.avatar.copyright && `© ${actor.avatar.copyright}`"
@@ -32,9 +32,10 @@
 			class="photo-link"
 		>
 			<img
+				:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
 				:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
 				:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
-				:title="photo.copyright && `© ${photo.copyright}`"
+				:title="`© ${photo.copyright || photo.entity.name}`"
 				class="photo"
 			>
 		</a>
@@ -63,15 +64,29 @@ export default {
 @import 'theme';
 
 .photos {
-	width: 100%;
     display: flex;
 	box-sizing: border-box;
-	padding: 1rem;
-	border-bottom: solid 1px var(--darken-hint);
+	padding: .5rem 1rem;
     font-size: 0;
 	overflow-x: scroll;
+	scroll-behavior: smooth;
 	scrollbar-width: none;
 
+	&.expanded {
+		display: grid;
+		grid-gap: .5rem;
+		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+
+		.photo-link {
+			margin: 0;
+		}
+
+		.photo {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
 	&.empty {
 		display: none;
 	}
@@ -86,14 +101,18 @@ export default {
 }
 
 .photo-link {
-	height: 16rem;
-	flex-shrink: 0;
 	margin: 0 .5rem 0 0;
 }
 
 .photo {
-    height: 100%;
+	width: 10rem;
+    height: 15rem;
     box-shadow: 0 0 3px $shadow-weak;
+	object-fit: cover;
+}
+
+.expand {
+	border-bottom: solid 1px var(--darken-hint);
 }
 
 @media(max-width: $breakpoint3) {
@@ -105,6 +124,16 @@ export default {
 		.avatar-link {
 			display: inline-block;
 		}
+
+		&.expanded {
+			grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+		}
+    }
+}
+
+@media(max-width: $breakpoint0) {
+	.photos.expanded {
+		grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     }
 }
 </style>
diff --git a/assets/components/entities/children.vue b/assets/components/entities/children.vue
new file mode 100644
index 00000000..07efe26c
--- /dev/null
+++ b/assets/components/entities/children.vue
@@ -0,0 +1,56 @@
+<template>
+	<div class="children">
+		<EntityTile
+			v-for="child in entity.children"
+			:key="`child-${child.id}`"
+			:entity="child"
+		/>
+	</div>
+</template>
+
+<script>
+import EntityTile from './tile.vue';
+
+export default {
+	components: {
+		EntityTile,
+	},
+	props: {
+		entity: {
+			type: Object,
+			default: null,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.children {
+	display: flex;
+	box-sizing: border-box;
+	padding: 1rem;
+	border-bottom: solid 1px var(--darken-hint);
+	overflow-x: auto;
+	scroll-behavior: smooth;
+	scrollbar-width: none;
+
+	.tile {
+		width: 15rem;
+		margin: 0 1rem 0 0;
+	}
+
+	&.expanded {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+		grid-gap: 1rem;
+
+		.tile {
+			width: 100%;
+		}
+	}
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+</style>
diff --git a/assets/components/entities/entity.vue b/assets/components/entities/entity.vue
index ea752bfe..31bdb59c 100644
--- a/assets/components/entities/entity.vue
+++ b/assets/components/entities/entity.vue
@@ -47,73 +47,20 @@
 			</router-link>
 		</div>
 
-		<div class="content-inner">
-			<div
-				v-if="entity.children.length > 0"
-				class="children-container"
-			>
-				<div
-					v-if="expanded"
-					class="expand noselect"
-					@click="expanded = !expanded"
-				>
-					<Icon
-						v-show="expanded"
-						icon="arrow-up3"
+		<div
+			ref="content"
+			class="content-inner"
+		>
+			<Scroll class="scroll-dark">
+				<Children :entity="entity" />
+
+				<template v-slot:expanded>
+					<Children
+						class="expanded"
+						:entity="entity"
 					/>
-
-					<Icon
-						v-show="!expanded"
-						icon="arrow-down3"
-					/>
-				</div>
-
-				<div
-					class="scroll-container"
-					:class="{ expanded }"
-				>
-					<div
-						class="scroll scroll-left noselect"
-						:class="{ 'scroll-start': scrollAtStart }"
-						@click="scroll('left')"
-					><Icon icon="arrow-left3" /></div>
-
-					<div
-						ref="children"
-						class="children"
-						:class="{ expanded }"
-						@scroll="updateScroll"
-					>
-						<EntityTile
-							v-for="child in entity.children"
-							:key="`child-${child.id}`"
-							:entity="child"
-						/>
-					</div>
-
-					<div
-						class="scroll scroll-right noselect"
-						:class="{ 'scroll-end': scrollAtEnd }"
-						@click="scroll('right')"
-					><Icon icon="arrow-right3" /></div>
-				</div>
-
-				<div
-					v-if="scrollable || expanded"
-					class="expand noselect"
-					@click="expanded = !expanded"
-				>
-					<Icon
-						v-show="expanded"
-						icon="arrow-up3"
-					/>
-
-					<Icon
-						v-show="!expanded"
-						icon="arrow-down3"
-					/>
-				</div>
-			</div>
+				</template>
+			</Scroll>
 
 			<FilterBar
 				:fetch-releases="fetchEntity"
@@ -123,15 +70,25 @@
 
 			<div class="releases">
 				<Releases :releases="entity.releases" />
+
+				<Pagination
+					:items-total="totalCount"
+					:items-per-page="limit"
+					class="pagination-top"
+				/>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-import EntityTile from './tile.vue';
+import Vue from 'vue';
+
 import FilterBar from '../header/filter-bar.vue';
+import Pagination from '../pagination/pagination.vue';
 import Releases from '../releases/releases.vue';
+import Children from './children.vue';
+import Scroll from '../scroll/scroll.vue';
 
 async function fetchEntity() {
 	const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
@@ -146,68 +103,41 @@ async function fetchEntity() {
 	this.totalCount = totalCount;
 
 	this.pageTitle = entity.name;
-}
 
-function updateScroll() {
-	this.scrollable = this.$refs.children.scrollWidth > this.$refs.children.clientWidth;
-	this.scrollAtStart = this.$refs.children.scrollLeft === 0;
-	this.scrollAtEnd = this.$refs.children.scrollWidth - this.$refs.children.clientWidth === this.$refs.children.scrollLeft;
-}
-
-function scroll(direction) {
-	if (direction === 'right') {
-		this.$refs.children.scrollLeft = this.$refs.children.scrollLeft + this.$refs.children.clientWidth - 100;
-	}
-
-	if (direction === 'left') {
-		this.$refs.children.scrollLeft = this.$refs.children.scrollLeft - this.$refs.children.clientWidth + 100;
-	}
+	Vue.nextTick(() => {
+		this.$refs.content.scrollTop = 0;
+	});
 }
 
 async function mounted() {
 	await this.fetchEntity();
-
-	this.updateScroll();
-	window.addEventListener('resize', this.updateScroll);
-}
-
-function beforeDestroy() {
-	window.removeEventListener('resize', this.updateScroll);
 }
 
 async function route() {
 	await this.fetchEntity();
-
-	this.expanded = false;
-	this.updateScroll();
 }
 
 export default {
 	components: {
-		EntityTile,
 		FilterBar,
+		Pagination,
+		Children,
 		Releases,
+		Scroll,
 	},
 	data() {
 		return {
 			entity: null,
 			totalCount: null,
-			limit: 10,
-			expanded: false,
-			scrollable: true,
-			scrollAtStart: true,
-			scrollAtEnd: false,
+			limit: 20,
 		};
 	},
 	watch: {
 		$route: route,
 	},
 	mounted,
-	beforeDestroy,
 	methods: {
 		fetchEntity,
-		updateScroll,
-		scroll,
 	},
 };
 </script>
@@ -250,117 +180,4 @@ export default {
 .logo-parent {
 	object-position: 100% 50%;
 }
-
-.children-container {
-	background: var(--profile);
-}
-
-.children {
-	display: flex;
-	box-sizing: border-box;
-	padding: 1rem;
-	border-bottom: solid 1px var(--darken-hint);
-	overflow-x: auto;
-	scroll-behavior: smooth;
-	scrollbar-width: none;
-
-	.tile {
-		width: 15rem;
-		margin: 0 1rem 0 0;
-	}
-
-	&.expanded {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-		grid-gap: 1rem;
-
-		.tile {
-			width: 100%;
-		}
-	}
-
-	&::-webkit-scrollbar {
-		display: none;
-	}
-}
-
-.expand {
-	.icon {
-		fill: var(--lighten);
-	}
-
-	&:hover {
-		background: var(--lighten-hint);
-
-		.icon {
-			fill: var(--text-light);
-		}
-	}
-}
-
-.scroll-container {
-	position: relative;
-	padding: 0 1rem 0 0;
-
-	&.expanded {
-		padding: 0;
-
-		.scroll {
-			display: none;
-		}
-	}
-}
-
-.scroll {
-	height: 100%;
-	display: flex;
-	align-items: center;
-	box-sizing: border-box;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-
-	&.scroll-start ,
-	&.scroll-end {
-		/* use over v-show so button stays visible while still hovered */
-		display: none;
-
-		.icon {
-			fill: var(--lighten-weak);
-		}
-	}
-
-	.icon {
-		fill: var(--lighten);
-	}
-
-	&:hover {
-		display: flex;
-		cursor: pointer;
-
-		&:not(.scroll-start):not(.scroll-end) {
-			.icon {
-				fill: var(--text-light);
-			}
-		}
-	}
-}
-
-.scroll-left {
-	left: 0;
-	padding: 1rem 2rem 1rem 1rem;
-	background: linear-gradient(to right, var(--profile) 50%, transparent);
-}
-
-.scroll-right {
-	right: 0;
-	padding: 1rem 1rem 1rem 2rem;
-	background: linear-gradient(to left, var(--profile) 50%, transparent);
-}
-
-@media(max-width: $breakpoint) {
-	.scroll {
-		display: none;
-	}
-}
 </style>
diff --git a/assets/components/expand/expand.vue b/assets/components/expand/expand.vue
new file mode 100644
index 00000000..c721561d
--- /dev/null
+++ b/assets/components/expand/expand.vue
@@ -0,0 +1,63 @@
+<template>
+	<div>
+		<div
+			v-show="expanded"
+			class="expand expanded"
+			@click="$emit('expand', false)"
+		><Icon icon="arrow-up3" /></div>
+
+		<div
+			v-show="!expanded"
+			class="expand"
+			@click="$emit('expand', true)"
+		><Icon icon="arrow-down3" /></div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		expanded: {
+			type: Boolean,
+			default: false,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.expand {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: .5rem;
+
+	.icon {
+		fill: var(--shadow);
+	}
+
+	&:hover {
+		cursor: pointer;
+		background: var(--shadow-hint);
+
+		.icon {
+			fill: var(--text);
+		}
+	}
+}
+
+.expand-dark {
+	.icon {
+		fill: var(--lighten);
+	}
+
+	&:hover {
+		background: var(--lighten-hint);
+
+		.icon {
+			fill: var(--text-light);
+		}
+	}
+}
+</style>
diff --git a/assets/components/header/filter-bar.vue b/assets/components/header/filter-bar.vue
index 95bc821c..6c70cfdd 100644
--- a/assets/components/header/filter-bar.vue
+++ b/assets/components/header/filter-bar.vue
@@ -20,11 +20,6 @@
 			>New</router-link>
 		</span>
 
-		<Pagination
-			:items-total="itemsTotal"
-			:items-per-page="itemsPerPage"
-		/>
-
 		<span class="tags">
 			<Filters
 				class="filters-block"
@@ -50,7 +45,6 @@
 <script>
 import { mapState } from 'vuex';
 import Filters from './filters.vue';
-import Pagination from '../pagination/pagination.vue';
 
 function filter(state) {
 	return state.ui.filter;
@@ -85,7 +79,6 @@ async function setBatch(newBatch) {
 export default {
 	components: {
 		Filters,
-		Pagination,
 	},
 	props: {
 		fetchReleases: {
@@ -141,7 +134,6 @@ export default {
 .sort {
     display: flex;
     align-items: center;
-	margin: 0 0 -1px 0;
 }
 
 .filters-block {
@@ -160,6 +152,7 @@ export default {
     display: inline-block;
     padding: .75rem 1rem 1rem 1rem;
     border: none;
+	position: relative;
     font-size: .8rem;
     font-weight: bold;
     text-decoration: none;
@@ -175,6 +168,17 @@ export default {
         color: var(--primary);
 		background: var(--background-soft);
 		border-color: var(--crease);
+
+		&::after {
+			/* hide grey border for tab effect, negative margin shows grey crease on mobile */
+			content: '';
+			width: 100%;
+			height: 2px;
+			background: var(--background-soft);
+			position: absolute;
+			left: 0;
+			bottom: -1px;
+		}
     }
 }
 
diff --git a/assets/components/header/filters.vue b/assets/components/header/filters.vue
index b0a78a6c..ce32bb00 100644
--- a/assets/components/header/filters.vue
+++ b/assets/components/header/filters.vue
@@ -1,17 +1,17 @@
 <template>
 	<v-popover class="filters-container">
 		<div class="filters">
-			<Icon icon="filter" />
-
 			<div
 				v-if="selectedTags.length > 0"
 				class="applied"
-			>{{ selectedTags.join(', ') }}</div>
+			>{{ selectedTags.length }} selected</div>
 
 			<div
 				v-else
 				class="applied empty"
 			>Filter by tags</div>
+
+			<Icon icon="filter" />
 		</div>
 
 		<div slot="popover">
@@ -22,7 +22,7 @@
 					class="tag"
 					:class="{ selected: selectedTags.includes(tag) }"
 				>
-					<router-link :to="{ params: { tags: getNewRange(tag) } }">
+					<router-link :to="{ query: { ...getNewRange(tag) } }">
 						<Icon
 							icon="checkmark"
 							class="include"
@@ -30,7 +30,7 @@
 					</router-link>
 
 					<router-link
-						:to="{ params: { tags: selectedTags.length === 1 && selectedTags.includes(tag) ? 'all' : tag } }"
+						:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag) ? null : { tags: tag }) } }"
 						class="name"
 					>{{ tag }}</router-link>
 				</li>
@@ -55,18 +55,18 @@ const tags = [
 
 function getNewRange(tag) {
 	if (this.selectedTags.includes(tag)) {
-		if (this.selectedTags.length === 1) {
-			return 'all';
+		if (this.selectedTags.length > 1) {
+			return { tags: this.selectedTags.filter(selectedTag => selectedTag !== tag).join(',') };
 		}
 
-		return this.selectedTags.filter(selectedTag => selectedTag !== tag).join('+');
+		return {};
 	}
 
-	return this.selectedTags.concat(tag).join('+');
+	return { tags: this.selectedTags.concat(tag).join(',') };
 }
 
 function selectedTags() {
-	return this.$route.params.tags.split('+').filter(selectedTag => selectedTag !== 'all');
+	return this.$route.query.tags ? this.$route.query.tags.split(',') : [];
 }
 
 export default {
@@ -108,14 +108,13 @@ export default {
 }
 
 .applied {
-	width: 12rem;
-	background: var(--background);
-	padding: .5rem;
-	border: solid 1px var(--shadow-hint);
+	flex-grow: 1;
+	padding: .75rem .5rem;
 	font-size: 1rem;
 	white-space: nowrap;
-	overflow-x: hidden;
+	overflow: hidden;
 	text-overflow: ellipsis;
+	text-align: right;
 
 	&.empty {
 		color: var(--shadow);
diff --git a/assets/components/home/home.vue b/assets/components/home/home.vue
index 7542c068..f883eebc 100644
--- a/assets/components/home/home.vue
+++ b/assets/components/home/home.vue
@@ -1,11 +1,15 @@
 <template>
 	<div class="content">
-		<div class="content-inner">
+		<div
+			ref="content"
+			class="content-inner"
+		>
 			<FilterBar
 				:fetch-releases="fetchReleases"
 				:is-home="true"
 				:items-total="totalCount"
 				:items-per-page="limit"
+				:content="$refs.content"
 			/>
 
 			<Releases :releases="releases" />
@@ -34,6 +38,8 @@ async function fetchReleases() {
 
 	this.totalCount = totalCount;
 	this.releases = releases;
+
+	this.$refs.content.scrollTop = 0;
 }
 
 async function route() {
@@ -57,7 +63,7 @@ export default {
 			releases: [],
 			networks: [],
 			pageTitle: null,
-			limit: 15,
+			limit: 20,
 			totalCount: 0,
 			from: null,
 		};
diff --git a/assets/components/pagination/pagination.vue b/assets/components/pagination/pagination.vue
index 3f0ae235..4a3df810 100644
--- a/assets/components/pagination/pagination.vue
+++ b/assets/components/pagination/pagination.vue
@@ -89,7 +89,6 @@ export default {
 
 <style lang="scss" scoped>
 .pagination {
-	width: 100%;
 	display: flex;
 	justify-content: center;
 }
@@ -99,7 +98,7 @@ export default {
 }
 
 .pagination-bottom {
-	margin: 1rem 0 0 0;
+	margin: .5rem 0 1rem 0;
 }
 
 .pagination-button {
diff --git a/assets/components/scroll/scroll.vue b/assets/components/scroll/scroll.vue
new file mode 100644
index 00000000..e0e1b45f
--- /dev/null
+++ b/assets/components/scroll/scroll.vue
@@ -0,0 +1,236 @@
+<template>
+	<div class="scroll">
+		<Expand
+			v-if="expanded"
+			:expanded="expanded"
+			class="expand-dark"
+			@expand="(state) => expanded = state"
+		/>
+
+		<Expand
+			v-if="expanded"
+			:expanded="expanded"
+			class="expand-light"
+			@expand="(state) => expanded = state"
+		/>
+
+		<div
+			v-show="enabled && !expanded"
+			class="scroll-button scroll-left noselect"
+			:class="{ 'scroll-start': scrollAtStart }"
+			@click="scroll('left')"
+		><Icon icon="arrow-left3" /></div>
+
+		<slot v-if="!expanded" />
+
+		<slot
+			v-if="expanded"
+			name="expanded"
+		/>
+
+		<div
+			v-show="enabled && !expanded"
+			class="scroll-button scroll-right noselect"
+			:class="{ 'scroll-end': scrollAtEnd }"
+			@click="scroll('right')"
+		><Icon icon="arrow-right3" /></div>
+
+		<Expand
+			v-if="expandable && scrollable"
+			:expanded="expanded"
+			class="expand-dark"
+			@expand="(state) => expanded = state"
+		/>
+
+		<Expand
+			v-if="expandable && scrollable"
+			:expanded="expanded"
+			class="expand-light"
+			@expand="(state) => expanded = state"
+		/>
+	</div>
+</template>
+
+<script>
+import Expand from '../expand/expand.vue';
+
+function updateScroll() {
+	this.scrollable = this.target.scrollWidth > this.target.clientWidth;
+	this.scrollAtStart = this.target.scrollLeft === 0;
+	this.scrollAtEnd = this.target.scrollWidth - this.target.clientWidth === this.target.scrollLeft;
+}
+
+function scroll(direction) {
+	if (direction === 'right') {
+		this.target.scrollLeft = this.target.scrollLeft + this.target.clientWidth - 100;
+	}
+
+	if (direction === 'left') {
+		this.target.scrollLeft = this.target.scrollLeft - this.target.clientWidth + 100;
+	}
+}
+
+function mounted() {
+	this.target = this.$slots.default[0].elm;
+
+	this.target.addEventListener('scroll', () => {
+		this.updateScroll();
+	});
+
+	window.addEventListener('resize', this.updateScroll);
+	this.updateScroll();
+}
+
+function beforeDestroy() {
+	this.target.removeEventListener('scroll', this.updateScroll);
+	window.removeEventListener('resize', this.updateScroll);
+}
+
+export default {
+	components: {
+		Expand,
+	},
+	props: {
+		enabled: {
+			type: Boolean,
+			default: true,
+		},
+		expandable: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	data() {
+		return {
+			target: null,
+			scrollable: true,
+			scrollAtStart: true,
+			scrollAtEnd: false,
+			expanded: false,
+		};
+	},
+	mounted,
+	beforeDestroy,
+	methods: {
+		scroll,
+		updateScroll,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.scroll {
+	background: var(--profile);
+	position: relative;
+	padding: 0 1rem 0 0;
+
+	&.expanded {
+		padding: 0;
+
+		.scroll {
+			display: none;
+		}
+	}
+}
+
+.scroll-light {
+	background: var(--background-dim);
+
+	.scroll-button {
+		.icon {
+			fill: var(--darken);
+		}
+
+		&.scroll-start .icon,
+		&.scroll-end .icon {
+			fill: var(--darken-weak);
+		}
+
+		&:hover:not(.scroll-start):not(.scroll-end) .icon {
+			fill: var(--text-dark);
+		}
+	}
+
+	.scroll-left {
+		background: linear-gradient(to right, var(--background-dim) 50%, transparent);
+	}
+
+	.scroll-right {
+		background: linear-gradient(to left, var(--background-dim) 50%, transparent);
+	}
+
+	.expand-dark {
+		display: none;
+	}
+}
+
+.scroll-dark {
+	background: var(--profile);
+
+	.scroll-button {
+		.icon {
+			fill: var(--lighten);
+		}
+
+		&.scroll-start .icon,
+		&.scroll-end .icon {
+			fill: var(--darken-weak);
+		}
+
+		&:hover:not(.scroll-start):not(.scroll-end) .icon {
+			fill: var(--text-light);
+		}
+	}
+
+	.scroll-left {
+		background: linear-gradient(to right, var(--profile) 50%, transparent);
+	}
+
+	.scroll-right {
+		background: linear-gradient(to left, var(--profile) 50%, transparent);
+	}
+
+	.expand-light {
+		display: none;
+	}
+}
+
+.scroll-button {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+
+	&.scroll-start,
+	&.scroll-end {
+		/* use over v-show so button stays visible while still hovered */
+		display: none;
+	}
+
+	&:hover {
+		display: flex;
+		cursor: pointer;
+	}
+}
+
+.scroll-left {
+	left: 0;
+	padding: 1rem 2rem 1rem 1rem;
+}
+
+.scroll-right {
+	right: 0;
+	padding: 1rem 1rem 1rem 2rem;
+}
+
+@media(max-width: $breakpoint) {
+	.scroll-button {
+		display: none;
+	}
+}
+</style>
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 6519319b..a88a99c1 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -37,56 +37,3 @@ body {
         fill: $primary;
     }
 }
-
-.expand {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: .5rem .25rem;
-    font-weight: bold;
-    font-size: .9rem;
-    cursor: pointer;
-
-    .icon {
-        fill: $shadow;
-    }
-
-    &:hover {
-        background: $shadow-hint;
-
-        .icon {
-            fill: $shadow-strong;
-        }
-    }
-}
-
-.expand-sidebar:hover {
-    background: $shadow-hint;
-}
-
-.expand-header {
-    display: none;
-
-    &:hover {
-        background: $shadow-hint;
-    }
-}
-
-.collapse-header {
-    width: 100%;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    background: $profile;
-
-    .icon {
-        width: 100%;
-        fill: $highlight;
-        padding: .5rem 0;
-    }
-
-    &:hover .icon {
-        background: $highlight-hint;
-        fill: $text-contrast;
-    }
-}
diff --git a/assets/js/curate.js b/assets/js/curate.js
index cfd6fdae..d7b52c21 100644
--- a/assets/js/curate.js
+++ b/assets/js/curate.js
@@ -31,8 +31,8 @@ function curateActor(actor, release) {
 
 	if (actor.profiles && actor.profiles.length > 0) {
 		const photos = actor.profiles
-			.map(profile => profile.avatar)
-			.filter(avatar => avatar && (!curatedActor.avatar || avatar.hash !== curatedActor.avatar.hash));
+			.map(profile => ({ entity: profile.entity, ...profile.avatar }))
+			.filter(avatar => avatar.id && (!curatedActor.avatar || avatar.hash !== curatedActor.avatar.hash));
 
 		const descriptions = actor.profiles.reduce((acc, profile) => ({
 			...acc,
diff --git a/assets/js/router.js b/assets/js/router.js
index b789b56a..5052d4c1 100644
--- a/assets/js/router.js
+++ b/assets/js/router.js
@@ -33,13 +33,12 @@ const routes = [
 			name: 'updates',
 			params: {
 				range: 'latest',
-				tags: 'all',
 				pageNumber: 1,
 			},
 		},
 	},
 	{
-		path: '/updates/:tags/:range/:pageNumber',
+		path: '/updates/:range/:pageNumber',
 		component: Home,
 		name: 'updates',
 	},
@@ -61,13 +60,12 @@ const routes = [
 			params: {
 				...from.params,
 				range: 'latest',
-				tags: 'all',
 				pageNumber: 1,
 			},
 		}),
 	},
 	{
-		path: '/actor/:actorId/:actorSlug/:tags/:range/:pageNumber',
+		path: '/actor/:actorId/:actorSlug/:range/:pageNumber',
 		component: Actor,
 		name: 'actorRange',
 	},
@@ -79,13 +77,12 @@ const routes = [
 			params: {
 				...from.params,
 				range: 'latest',
-				tags: 'all',
 				pageNumber: 1,
 			},
 		}),
 	},
 	{
-		path: '/channel/:entitySlug/:tags/:range/:pageNumber',
+		path: '/channel/:entitySlug/:range/:pageNumber',
 		component: Entity,
 		name: 'channel',
 	},
@@ -96,13 +93,12 @@ const routes = [
 			params: {
 				...from.params,
 				range: 'latest',
-				tags: 'all',
 				pageNumber: 1,
 			},
 		}),
 	},
 	{
-		path: '/network/:entitySlug/:tags/:range/:pageNumber',
+		path: '/network/:entitySlug/:range/:pageNumber',
 		component: Entity,
 		name: 'network',
 	},
@@ -113,12 +109,11 @@ const routes = [
 			params: {
 				...from.params,
 				range: 'latest',
-				tags: 'all',
 			},
 		}),
 	},
 	{
-		path: '/tag/:tagSlug/:tags/:range',
+		path: '/tag/:tagSlug:range',
 		component: Tag,
 		name: 'tag',
 	},