diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte
index 531e93e..cef71ba 100644
--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/svelte/src/file_viewer/FileViewer.svelte
@@ -714,7 +714,7 @@ const keyboard_event = evt => {
 	vertical-align: middle;
 	transition: left 0.5s, right 0.5s;
 	overflow: auto;
-	box-shadow: inset 2px 2px 10px 2px var(--shadow_color);
+	box-shadow: inset 2px 2px 10px var(--shadow_color);
 	border-radius: 16px;
 }
 .file_preview_container.toolbar_visible { left: 8em; }
diff --git a/svelte/src/file_viewer/viewers/Abuse.svelte b/svelte/src/file_viewer/viewers/Abuse.svelte
index 328fa0b..746b30d 100644
--- a/svelte/src/file_viewer/viewers/Abuse.svelte
+++ b/svelte/src/file_viewer/viewers/Abuse.svelte
@@ -1,4 +1,6 @@
 <script>
+import TextBlock from "./TextBlock.svelte"
+
 export const set_file = f => file = f
 let file = {
 	id: "",
@@ -9,7 +11,7 @@ let file = {
 </script>
 
 <br/>
-<div class="container">
+<TextBlock>
 	<h1>Unavailable for legal reasons</h1>
 	<p>
 		This file has received an abuse report and was taken down.
@@ -17,14 +19,4 @@ let file = {
 	<p>
 		Type of abuse: {file.abuse_type}. Reporter: {file.abuse_reporter_name}.
 	</p>
-</div>
-
-<style>
-.container {
-	display: inline-block;
-	max-width: 100%;
-	background-color: rgba(0, 0, 0, 0.3);
-	border-radius: 16px;
-	padding: 8px;
-}
-</style>
+</TextBlock>
diff --git a/svelte/src/file_viewer/viewers/File.svelte b/svelte/src/file_viewer/viewers/File.svelte
index 3c0b3e0..0bb3798 100644
--- a/svelte/src/file_viewer/viewers/File.svelte
+++ b/svelte/src/file_viewer/viewers/File.svelte
@@ -1,6 +1,7 @@
 <script>
 import { createEventDispatcher } from "svelte";
 import LargeFileMessage from "./LargeFileMessage.svelte";
+import TextBlock from "./TextBlock.svelte";
 let dispatch = createEventDispatcher()
 
 export const set_file = f => file = f
@@ -16,7 +17,7 @@ let file = {
 
 <h1>You are viewing a file on pixeldrain</h1>
 <img src={file.icon_href} alt="File icon" class="icon">
-<div class="description">
+<TextBlock>
 	Name: {file.name}<br/>
 	Type: {file.mime_type}<br/>
 	No preview is available for this file type. Download to view it locally.
@@ -25,7 +26,7 @@ let file = {
 		<i class="icon">save</i>
 		<span>Download</span>
 	</button>
-</div>
+</TextBlock>
 <br/><br/>
 <LargeFileMessage file={file}></LargeFileMessage>
 
@@ -34,14 +35,4 @@ let file = {
 	display: inline-block;
 	vertical-align: middle;
 }
-.description {
-	display: inline-block;
-	text-align: left;
-	padding-left: 8px;
-	vertical-align: middle;
-	max-width: 600px;
-	background-color: rgba(0, 0, 0, 0.3);
-	border-radius: 16px;
-	padding: 8px;
-}
 </style>
diff --git a/svelte/src/file_viewer/viewers/LargeFileMessage.svelte b/svelte/src/file_viewer/viewers/LargeFileMessage.svelte
index fd04d7f..f50f886 100644
--- a/svelte/src/file_viewer/viewers/LargeFileMessage.svelte
+++ b/svelte/src/file_viewer/viewers/LargeFileMessage.svelte
@@ -1,5 +1,6 @@
 <script>
 import { formatDuration } from "../../util/Formatting.svelte";
+import TextBlock from "./TextBlock.svelte";
 
 export let file = {
 	id: "",
@@ -11,7 +12,7 @@ export let file = {
 
 {#if file.show_ads && file.size > 1e8}
 	<!-- If the file is larger than 100 MB we show a warning about the transfer speed -->
-	<div class="description">
+	<TextBlock width="650px">
 		Your download speed is currently limited to 4 MiB/s. Downloading this
 		file for free will take at least
 		{formatDuration((file.size/4194304)*1000)} (under ideal conditions).
@@ -20,17 +21,5 @@ export let file = {
 			upgrade to Pro
 		</a>
 		to download at the fastest speed available.
-	</div>
+	</TextBlock>
 {/if}
-
-<style>
-.description {
-	display: inline-block;
-	text-align: center;
-	vertical-align: middle;
-	max-width: 700px;
-	background-color: rgba(0, 0, 0, 0.3);
-	border-radius: 16px;
-	padding: 8px;
-}
-</style>
diff --git a/svelte/src/file_viewer/viewers/RateLimit.svelte b/svelte/src/file_viewer/viewers/RateLimit.svelte
index 286f5c1..538343f 100644
--- a/svelte/src/file_viewer/viewers/RateLimit.svelte
+++ b/svelte/src/file_viewer/viewers/RateLimit.svelte
@@ -1,6 +1,7 @@
 <script>
 import { createEventDispatcher } from "svelte";
 import LargeFileMessage from "./LargeFileMessage.svelte";
+import TextBlock from "./TextBlock.svelte";
 let dispatch = createEventDispatcher()
 
 export const set_file = f => file = f
@@ -10,7 +11,7 @@ let file = {
 }
 </script>
 
-<div class="container">
+<TextBlock width="800px">
 	<h1>
 		<i class="icon">file_download_off</i>
 		Hotlink protection enabled
@@ -54,24 +55,11 @@ let file = {
 			<i class="icon">upgrade</i> Support Pixeldrain on Patreon
 		</a>
 	</div>
-</div>
+</TextBlock>
 <br/><br/>
 <LargeFileMessage file={file}></LargeFileMessage>
 
 <style>
-.container {
-	position: relative;
-	display: inline-block;
-	width: 800px;
-	max-width: 100%;
-	text-align: center;
-	background-color: rgba(0, 0, 0, 0.2);
-	border-radius: 16px;
-	text-align: left;
-	padding: 10px;
-	border-radius: 16px;
-}
-
 .file_thumbnail {
 	display: inline-block;
 	vertical-align: top;
diff --git a/svelte/src/file_viewer/viewers/TextBlock.svelte b/svelte/src/file_viewer/viewers/TextBlock.svelte
new file mode 100644
index 0000000..13ef4f4
--- /dev/null
+++ b/svelte/src/file_viewer/viewers/TextBlock.svelte
@@ -0,0 +1,20 @@
+<script>
+export let width = "800px"
+</script>
+
+<div class="block" style="max-width: {width};">
+	<slot></slot>
+</div>
+
+<style>
+.block {
+	display: inline-block;
+	text-align: left;
+	padding-left: 8px;
+	vertical-align: middle;
+
+	background-color: rgba(0, 0, 0, 0.5);
+	border-radius: 16px;
+	padding: 8px;
+}
+</style>
diff --git a/svelte/src/file_viewer/viewers/Torrent.svelte b/svelte/src/file_viewer/viewers/Torrent.svelte
index 64299a2..6a969fb 100644
--- a/svelte/src/file_viewer/viewers/Torrent.svelte
+++ b/svelte/src/file_viewer/viewers/Torrent.svelte
@@ -3,6 +3,7 @@ import { createEventDispatcher } from "svelte";
 import Magnet from "../../icons/Magnet.svelte";
 import { formatDate } from "../../util/Formatting.svelte"
 import { copy_text } from "../../util/Util.svelte";
+import TextBlock from "./TextBlock.svelte";
 import TorrentItem from "./TorrentItem.svelte"
 
 let dispatch = createEventDispatcher()
@@ -79,7 +80,7 @@ const copy_magnet = () => {
 
 <h1>{file.name}</h1>
 <img src={file.icon_href} alt="File icon" class="icon">
-<div class="description" style="max-width: 650px">
+<TextBlock width="650px">
 	{#if status === "finished"}
 		Created by: {torrent.created_by}<br/>
 		Comment: {torrent.comment}<br/>
@@ -119,14 +120,15 @@ const copy_magnet = () => {
 		<i class="icon">download</i>
 		<span>Download torrent file</span>
 	</button>
-</div>
+</TextBlock>
+
 {#if status === "finished"}
 	<br/>
 	<br/>
-	<div class="description">
+	<TextBlock width="1000px">
 		<h2>Files in this torrent</h2>
 		<TorrentItem item={torrent.files} />
-	</div>
+	</TextBlock>
 {/if}
 
 <style>
@@ -134,14 +136,4 @@ const copy_magnet = () => {
 	display: inline-block;
 	vertical-align: middle;
 }
-.description {
-	display: inline-block;
-	text-align: left;
-	padding-left: 8px;
-	vertical-align: middle;
-
-	background-color: rgba(0, 0, 0, 0.3);
-	border-radius: 16px;
-	padding: 8px;
-}
 </style>
diff --git a/svelte/src/file_viewer/viewers/Video.svelte b/svelte/src/file_viewer/viewers/Video.svelte
index fd74bce..3125785 100644
--- a/svelte/src/file_viewer/viewers/Video.svelte
+++ b/svelte/src/file_viewer/viewers/Video.svelte
@@ -1,6 +1,7 @@
 <script>
 import { onMount,  createEventDispatcher, tick } from "svelte";
 import LargeFileMessage from "./LargeFileMessage.svelte";
+import TextBlock from "./TextBlock.svelte";
 let dispatch = createEventDispatcher()
 
 let file = {
@@ -74,9 +75,9 @@ let download = () => { dispatch("download", {}) }
 			</video>
 		{/if}
 	{:else}
-		<h1>This is a video file on pixeldrain</h1>
+		<h1>{file.name}</h1>
 		<img src={file.icon_href} alt="Video icon" style="display: inline-block; vertical-align: top;">
-		<div class="description">
+		<TextBlock width="600px">
 			The online video player on pixeldrain is only available when the
 			uploader of the file or the viewer pays for the bandwidth usage. You
 			can still download the video and watch it locally on your computer.
@@ -87,7 +88,7 @@ let download = () => { dispatch("download", {}) }
 			<button on:click={download}>
 				<i class="icon">save</i> Download
 			</button>
-		</div>
+		</TextBlock>
 		<br/><br/>
 		<LargeFileMessage file={file}></LargeFileMessage>
 	{/if}
@@ -110,11 +111,4 @@ let download = () => { dispatch("download", {}) }
 	top: 50%;
 	transform: translateY(-50%);
 }
-.description {
-	display: inline-block;
-	text-align: justify;
-	padding-left: 8px;
-	vertical-align: middle;
-	max-width: 550px;
-}
 </style>
diff --git a/svelte/src/user_home/AccountSettings.svelte b/svelte/src/user_home/AccountSettings.svelte
index 1788963..26dd801 100644
--- a/svelte/src/user_home/AccountSettings.svelte
+++ b/svelte/src/user_home/AccountSettings.svelte
@@ -246,7 +246,7 @@ onMount(() => {
 		theme preference of the person viewing the file. Set to 'None' to let
 		the viewer choose their own theme.
 	</p>
-	<ThemePicker on:theme_change={e => theme = e.detail}></ThemePicker>
+	<ThemePicker theme={theme} on:theme_change={e => theme = e.detail}></ThemePicker>
 
 	<h3>Header image</h3>
 	<p>