diff --git a/app/src/routes/connection/+page.svelte b/app/src/routes/connection/+page.svelte
new file mode 100644
index 0000000..71cb700
--- /dev/null
+++ b/app/src/routes/connection/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import Connection from './Connection.svelte';
+</script>
+
+<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
+	<Connection />
+</div>
diff --git a/app/src/routes/connection/+page.ts b/app/src/routes/connection/+page.ts
new file mode 100644
index 0000000..edd2443
--- /dev/null
+++ b/app/src/routes/connection/+page.ts
@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+	return {
+		title: 'Connection'
+	};
+}) satisfies PageLoad;
diff --git a/app/src/routes/connection/Connection.svelte b/app/src/routes/connection/Connection.svelte
new file mode 100644
index 0000000..586bd0e
--- /dev/null
+++ b/app/src/routes/connection/Connection.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import SettingsCard from '$lib/components/SettingsCard.svelte';
+	import { WiFi } from '$lib/components/icons';
+	import { location, socket, useFeatureFlags, user } from '$lib/stores';
+
+	const features = useFeatureFlags();
+
+	const update = () => {
+		const ws_token = $features.security ? '?access_token=' + $user.bearer_token : '';
+		const ws = $location ? $location : window.location.host;
+		socket.init(`ws://${ws}/ws/events${ws_token}`);
+	};
+</script>
+
+<SettingsCard collapsible={false}>
+	<WiFi slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+	<span slot="title">Connection</span>
+
+	<div class="flex">
+		<label class="label w-32" for="server">Address:</label>
+		<input class="input" bind:value={$location} />
+	</div>
+
+	<button class="btn btn-primary" on:click={update}>Update</button>
+</SettingsCard>