diff --git a/svelte/src/admin_panel/Router.svelte b/svelte/src/admin_panel/Router.svelte
index e6fd500..bb2fa39 100644
--- a/svelte/src/admin_panel/Router.svelte
+++ b/svelte/src/admin_panel/Router.svelte
@@ -5,6 +5,7 @@ import IpBans from "./IPBans.svelte"
 import Home from "./Home.svelte"
 import { onMount } from "svelte";
 import BlockFiles from "./BlockFiles.svelte";
+import Subscriptions from "./Subscriptions.svelte";
 
 let page = ""
 
@@ -62,6 +63,13 @@ onMount(() => {
 			<i class="icon">remove_circle</i>
 			IP bans
 		</a>
+		<a class="button"
+			href="/admin/subscriptions"
+			class:button_highlight={page === "subscriptions"}
+			on:click|preventDefault={() => {navigate("subscriptions", "Subscriptions")}}>
+			<i class="icon">receipt_long</i>
+			Subscriptions
+		</a>
 		<a class="button" href="/admin/globals">
 			<i class="icon">edit</i>
 			Update global settings
@@ -69,14 +77,16 @@ onMount(() => {
 	</div>
 
 	{#if page === "status"}
-	<Home></Home>
+		<Home></Home>
 	{:else if page === "block_files"}
-	<BlockFiles></BlockFiles>
+		<BlockFiles></BlockFiles>
 	{:else if page === "abuse_reports"}
-	<AbuseReports></AbuseReports>
+		<AbuseReports></AbuseReports>
 	{:else if page === "abuse_reporters"}
-	<AbuseReporters></AbuseReporters>
+		<AbuseReporters></AbuseReporters>
 	{:else if page === "ip_bans"}
-	<IpBans></IpBans>
+		<IpBans></IpBans>
+	{:else if page === "subscriptions"}
+		<Subscriptions></Subscriptions>
 	{/if}
 </div>
diff --git a/svelte/src/admin_panel/Subscriptions.svelte b/svelte/src/admin_panel/Subscriptions.svelte
new file mode 100644
index 0000000..bc9619b
--- /dev/null
+++ b/svelte/src/admin_panel/Subscriptions.svelte
@@ -0,0 +1,70 @@
+<script>
+import { onMount } from "svelte";
+
+import Form from "./../util/Form.svelte";
+
+let credit_form = {
+	name: "give_credit",
+	fields: [
+		{
+			name: "user_id",
+			label: "User ID",
+			type: "text",
+			default_value: "",
+		}, {
+			name: "user_name",
+			label: "User name",
+			type: "text",
+			default_value: "",
+		}, {
+			name: "user_email",
+			label: "User e-mail",
+			type: "text",
+			default_value: "",
+		}, {
+			name: "credit",
+			label: "Credit",
+			type: "number",
+			default_value: 0,
+		},
+	],
+	submit_label: `<i class="icon">send</i> Submit`,
+	on_submit: async fields => {
+		const form = new FormData()
+		if (fields.user_id !== "") {
+			form.append("user_by", "id")
+			form.append("id", fields.user_id)
+		} else if (fields.user_name !== "") {
+			form.append("user_by", "name")
+			form.append("name", fields.user_name)
+		} else if (fields.user_email !== "") {
+			form.append("user_by", "email")
+			form.append("email", fields.user_email)
+		}
+		form.append("credit", fields.credit*1e6)
+
+		const resp = await fetch(
+			window.api_endpoint+"/admin/give_credit",
+			{ method: "POST", body: form }
+		);
+		if(resp.status >= 400) {
+			return {error_json: await resp.json()}
+		}
+
+		return {success: true, message: "Success: Granted user "+fields.credit+" credits"}
+	},
+}
+</script>
+
+<div>
+	<div class="limit_width">
+		<h2>Give user credit</h2>
+		<p>
+			This adds credit to a user's account. You only need to enter one of
+			the user id, username or email.
+		</p>
+		<div class="highlight_dark">
+			<Form config={credit_form}></Form>
+		</div>
+	</div>
+</div>
diff --git a/svelte/src/user_home/Home.svelte b/svelte/src/user_home/Home.svelte
index 41c1a2c..ee5ea02 100644
--- a/svelte/src/user_home/Home.svelte
+++ b/svelte/src/user_home/Home.svelte
@@ -79,9 +79,7 @@ let update_graphs = (minutes, interval, live) => {
 }
 
 let direct_link_bandwidth_used = 0
-let direct_link_percent = 0
 let storage_space_used = 0
-let storage_percent = 0
 let load_direct_bw = () => {
 	let today = new Date()
 	let start = new Date()
@@ -98,9 +96,7 @@ let load_direct_bw = () => {
 	}).then(resp => {
 		let total = resp.amounts.reduce((accum, val) => accum += val, 0);
 		direct_link_bandwidth_used = total
-		direct_link_percent = total / window.user.subscription.direct_linking_bandwidth
 		storage_space_used = window.user.storage_space_used
-		storage_percent = window.user.storage_space_used / window.user.subscription.storage_space
 	}).catch(e => {
 		console.error("Error requesting time series: " + e);
 	})
@@ -148,8 +144,17 @@ onDestroy(() => {
 			</li>
 		</ul>
 
-		<StorageProgressBar used={storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
-		<HotlinkProgressBar used={direct_link_bandwidth_used} total={window.user.subscription.direct_linking_bandwidth}></HotlinkProgressBar>
+		{#if window.user.subscription.storage_space === -1}
+			Storage space used: {formatDataVolume(storage_space_used, 3)}<br/>
+		{:else}
+			<StorageProgressBar used={storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
+		{/if}
+
+		{#if window.user.subscription.storage_space === -1}
+			Hotlink bandwidth used in the last 30 days: {formatDataVolume(direct_link_bandwidth_used, 3)}<br/>
+		{:else}
+			<HotlinkProgressBar used={direct_link_bandwidth_used} total={window.user.subscription.direct_linking_bandwidth}></HotlinkProgressBar>
+		{/if}
 
 		<h3>Exports</h3>
 		<div style="text-align: center;">
diff --git a/svelte/src/user_home/Router.svelte b/svelte/src/user_home/Router.svelte
index 7ce3a71..2ccb073 100644
--- a/svelte/src/user_home/Router.svelte
+++ b/svelte/src/user_home/Router.svelte
@@ -3,6 +3,7 @@ import { onMount } from "svelte";
 import Home from "./Home.svelte";
 import AccountSettings from "./AccountSettings.svelte";
 import APIKeys from "./APIKeys.svelte";
+import Transactions from "./Transactions.svelte";
 
 let page = ""
 
@@ -14,21 +15,28 @@ let navigate = (path, title) => {
 	)
 }
 
-onMount(() => {
+let get_page = () => {
 	let newpage = window.location.pathname.substring(window.location.pathname.lastIndexOf("/")+1)
 	if (newpage === "user") {
-		newpage = ""
+		newpage = "home"
 	}
+
 	page = newpage
+}
+
+onMount(() => {
+	get_page()
 })
 </script>
 
+<svelte:window on:popstate={get_page} />
+
 <div>
 	<div class="tab_bar">
 		<a class="button"
 			href="/user"
-			class:button_highlight={page === ""}
-			on:click|preventDefault={() => {navigate("", "My home")}}>
+			class:button_highlight={page === "home"}
+			on:click|preventDefault={() => {navigate("home", "My home")}}>
 			<i class="icon">home</i>
 			My home
 		</a>
@@ -46,16 +54,24 @@ onMount(() => {
 			<i class="icon">vpn_key</i>
 			API keys
 		</a>
+		{#if window.user.balance_micro_eur !== 0}
+			<a class="button"
+				href="/user/transactions"
+				class:button_highlight={page === "transactions"}
+				on:click|preventDefault={() => {navigate("transactions", "Transactions")}}>
+				<i class="icon">receipt_long</i>
+				Transactions
+			</a>
+		{/if}
 	</div>
 
-	{#if page === ""}
-	<Home></Home>
+	{#if page === "home"}
+		<Home></Home>
 	{:else if page === "settings"}
-	<AccountSettings></AccountSettings>
+		<AccountSettings></AccountSettings>
 	{:else if page === "api_keys"}
-	<APIKeys></APIKeys>
+		<APIKeys></APIKeys>
+	{:else if page === "transactions"}
+		<Transactions></Transactions>
 	{/if}
 </div>
-
-<style>
-</style>
diff --git a/svelte/src/user_home/Transactions.svelte b/svelte/src/user_home/Transactions.svelte
new file mode 100644
index 0000000..abfd884
--- /dev/null
+++ b/svelte/src/user_home/Transactions.svelte
@@ -0,0 +1,220 @@
+<script>
+import { onMount } from "svelte";
+import { formatDataVolume, formatDate, formatEuros } from "../util/Formatting.svelte";
+import Spinner from "../util/Spinner.svelte";
+
+let loading = false
+let months = []
+
+const load_transactions = async () => {
+	loading = true
+	try {
+		// We keep fetching history until there is no history left
+		let now = new Date()
+		while (true) {
+			const resp = await fetch(
+				window.api_endpoint+"/user/transactions/" +
+					now.getFullYear()+"-"+("00"+(now.getMonth()+1)).slice(-2),
+			)
+			if(resp.status >= 400) {
+				let json = await resp.json()
+				if (json.value === "authentication_failed") {
+					window.location = "/login"
+					return
+				} else {
+					throw new Error(json.message)
+				}
+			}
+
+			let month = {
+				rows: await resp.json(),
+				month: now.getFullYear()+"-"+("00"+(now.getMonth()+1)).slice(-2),
+				total_subscription_charge: 0,
+				total_storage_charge: 0,
+				total_bandwidth_charge: 0,
+				total_deposited: 0,
+				total_deducted: 0,
+			}
+
+			if (month.rows.length === 0) {
+				break
+			}
+
+			month.rows.forEach(row => {
+				row.time = new Date(row.time)
+				month.total_deposited += row.deposit_amount
+				month.total_subscription_charge += row.subscription_charge
+				month.total_storage_charge += row.storage_charge
+				month.total_bandwidth_charge += row.bandwidth_charge
+				month.total_deducted += row.subscription_charge + row.storage_charge + row.bandwidth_charge
+			})
+			months.push(month)
+			months = months
+
+			// Fetch the previous month
+			now.setMonth(now.getMonth()-1)
+		}
+	} catch (err) {
+		alert(err)
+	} finally {
+		loading = false
+	}
+};
+
+let result = ""
+let result_success = false
+
+const update_subscription = async name => {
+	loading = true
+
+	const form = new FormData()
+	form.append("subscription", name)
+	try {
+		const resp = await fetch(
+			window.api_endpoint+"/user/subscription",
+			{ method: "PUT", body: form },
+		)
+		if(resp.status >= 400) {
+			let json = await resp.json()
+			throw json.message
+		}
+
+		result_success = true
+		result = "Subscription updated"
+
+		setTimeout(() => {location.reload()}, 2000)
+	} catch (err) {
+		result_success = false
+		result = "Failed to update subscription: "+err
+		loading = false
+	}
+}
+
+onMount(() => {
+	load_transactions()
+})
+</script>
+
+<div>
+	{#if loading}
+		<div class="spinner_container">
+			<Spinner />
+		</div>
+	{/if}
+	<div class="limit_width">
+		<h2>Manage subscription</h2>
+		<p>
+			Current account balance: {formatEuros(window.user.balance_micro_eur, 4)}
+		</p>
+
+		{#if result !== ""}
+			<div class:highlight_green={result_success} class:highlight_red={!result_success}>
+				{result}
+			</div>
+		{/if}
+
+		<div class="highlight_dark">
+			{#if window.user.subscription.id !== "prepaid"}
+				Prepaid subscription is not active.<br/>
+				<button on:click={() => {update_subscription("prepaid")}}>
+					<i class="icon">attach_money</i>
+					Enable prepaid subscription
+				</button>
+			{:else}
+				Prepaid subscription is active.<br/>
+				Deactivating your subscription may cause your files to expire
+				sooner than expected!<br/>
+				<button on:click={() => {update_subscription("none")}}>
+					<i class="icon">money_off</i>
+					Disable prepaid subscription
+				</button>
+			{/if}
+		</div>
+		<p>
+			When your prepaid subscription is active you will be charged:
+		</p>
+		<ul>
+			<li>
+				€4 per TB per month for storage. The amount is charged per day
+				and divided by the average number of days in a month (30.4375).
+				So if you have exactly 1 TB on your account you will be charged
+				€0.131416838 per day.
+			</li>
+			<li>
+				€2 per TB of bandwidth, charged every day based on the usage of
+				the previous day
+			</li>
+			<li>
+				€2 per month for the subscription itself, because prepaid has
+				the same perks as the Pro subscription (No advertisements, no
+				bandwidth limit, video player, etc)
+			</li>
+		</ul>
+
+		<h2>Transaction log</h2>
+		<p>
+			Here is a log of all transactions on your account balance.
+		</p>
+
+		{#each months as month}
+			<h3>{month.month}</h3>
+			<ul>
+				<li>Subscription charge: {formatEuros(month.total_subscription_charge, 4)}</li>
+				<li>Storage charge: {formatEuros(month.total_storage_charge, 4)}</li>
+				<li>Bandwidth charge: {formatEuros(month.total_bandwidth_charge, 4)}</li>
+				<li>Total charge: {formatEuros(month.total_deducted, 4)}</li>
+				<li>Deposited: {formatEuros(month.total_deposited, 4)}</li>
+			</ul>
+
+			<div class="table_scroll">
+				<table style="text-align: left;">
+					<thead>
+						<tr>
+							<td>Time</td>
+							<td>Balance</td>
+							<td>Subscription</td>
+							<td colspan="2">Storage</td>
+							<td colspan="2">Bandwidth</td>
+							<td>Deposited</td>
+						</tr>
+						<tr>
+							<td></td>
+							<td></td>
+							<td>Charged</td>
+							<td>Charged</td>
+							<td>Used</td>
+							<td>Charged</td>
+							<td>Used</td>
+							<td></td>
+						</tr>
+					</thead>
+					<tbody>
+						{#each month.rows as row}
+							<tr>
+								<td>{formatDate(row.time, true, true, false)}</td>
+								<td>{formatEuros(row.new_balance, 4)}</td>
+								<td>{formatEuros(row.subscription_charge, 4)}</td>
+								<td>{formatEuros(row.storage_charge, 4)}</td>
+								<td>{formatDataVolume(row.storage_used, 3)}</td>
+								<td>{formatEuros(row.bandwidth_charge, 4)}</td>
+								<td>{formatDataVolume(row.bandwidth_used, 3)}</td>
+								<td>{formatEuros(row.deposit_amount, 4)}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+.spinner_container {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	height: 100px;
+	width: 100px;
+	z-index: 1000;
+}
+</style>
diff --git a/svelte/src/util/Formatting.svelte b/svelte/src/util/Formatting.svelte
index 7feafea..9088382 100644
--- a/svelte/src/util/Formatting.svelte
+++ b/svelte/src/util/Formatting.svelte
@@ -15,17 +15,17 @@ export const formatThousands = (x) => {
 
 export const formatDataVolume = (amt, precision) => {
 	if (precision < 3) { precision = 3; }
-	if (amt >= 1e18) {
+	if (amt >= 1e18-1e15) {
 		return (amt/1e18).toPrecision(precision) + " EB";
-	}else if (amt >= 1e15) {
+	}else if (amt >= 1e15-1e12) {
 		return (amt/1e15).toPrecision(precision) + " PB";
-	}else if (amt >= 1e12) {
+	}else if (amt >= 1e12-1e9) {
 		return (amt/1e12).toPrecision(precision) + " TB";
-	} else if (amt >= 1e9) {
+	} else if (amt >= 1e9-1e6) {
 		return (amt/1e9).toPrecision(precision) + " GB";
-	} else if (amt >= 1e6) {
+	} else if (amt >= 1e6-1e3) {
 		return (amt/1e6).toPrecision(precision) + " MB";
-	} else if (amt >= 1e3) {
+	} else if (amt >= 1e3-1) {
 		return (amt/1e3).toPrecision(precision) + " kB";
 	}
 	return amt + " B"
@@ -58,4 +58,8 @@ export const formatDate = (date, hours, minutes, seconds) => {
 	if (seconds) { dateStr += ":"+("00"+date.getMinutes()).slice(-2) }
 	return dateStr
 }
+
+export const formatEuros = (amt, precision) => {
+	return "€ "+ (amt / 1000000).toFixed(precision)
+}
 </script>
diff --git a/webcontroller/web_controller.go b/webcontroller/web_controller.go
index dc69a66..e7becd6 100644
--- a/webcontroller/web_controller.go
+++ b/webcontroller/web_controller.go
@@ -175,8 +175,10 @@ func New(
 
 		// User account settings
 		{GET, "user" /*                       */, wc.serveTemplate("user_home", handlerOpts{Auth: true})},
+		{GET, "user/home" /*                  */, wc.serveTemplate("user_home", handlerOpts{Auth: true})},
 		{GET, "user/settings" /*              */, wc.serveTemplate("user_home", handlerOpts{Auth: true})},
 		{GET, "user/api_keys" /*              */, wc.serveTemplate("user_home", handlerOpts{Auth: true})},
+		{GET, "user/transactions" /*          */, wc.serveTemplate("user_home", handlerOpts{Auth: true})},
 		{GET, "user/confirm_email" /*         */, wc.serveEmailConfirm},
 		{GET, "user/password_reset_confirm" /**/, wc.serveForm(wc.passwordResetConfirmForm, handlerOpts{NoEmbed: true})},
 		{PST, "user/password_reset_confirm" /**/, wc.serveForm(wc.passwordResetConfirmForm, handlerOpts{NoEmbed: true})},
@@ -194,6 +196,7 @@ func New(
 		{GET, "admin/abuse_reporters" /**/, wc.serveTemplate("admin", handlerOpts{Auth: true})},
 		{GET, "admin/abuse_reports" /*  */, wc.serveTemplate("admin", handlerOpts{Auth: true})},
 		{GET, "admin/ip_bans" /*        */, wc.serveTemplate("admin", handlerOpts{Auth: true})},
+		{GET, "admin/subscriptions" /*  */, wc.serveTemplate("admin", handlerOpts{Auth: true})},
 		{GET, "admin/globals" /*        */, wc.serveForm(wc.adminGlobalsForm, handlerOpts{Auth: true})},
 		{PST, "admin/globals" /*        */, wc.serveForm(wc.adminGlobalsForm, handlerOpts{Auth: true})},