diff --git a/src/lib/components/settings/server-settings.svelte b/src/lib/components/settings/server-settings.svelte
new file mode 100644
index 0000000..73d4ac9
--- /dev/null
+++ b/src/lib/components/settings/server-settings.svelte
@@ -0,0 +1,9 @@
+<div class="form-control">
+	<h1 class="text-xl bold text-primary mb-4">Server Settings</h1>
+
+    <label class="block text-secondary font-bold mb-2" for="url"> Headscale URL </label>
+	<input class="input input-bordered w-full max-w-xs" type="url" placeholder="https://hs.yourdomain.com.au" />
+    <label for="url" class="label">
+        <span class="label-text-alt">URL for your headscale server instance (does not need populating if it's on the same subdomain)</span>
+        </label>
+</div>
\ No newline at end of file
diff --git a/src/routes/settings.html/+page.svelte b/src/routes/settings.html/+page.svelte
index b9a96d8..b864d1a 100644
--- a/src/routes/settings.html/+page.svelte
+++ b/src/routes/settings.html/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { appSettings, persistentAppSettings } from '$lib/state.svelte';
+	import ServerSettings from '$lib/components/settings/server-settings.svelte';
+import { appSettings, persistentAppSettings } from '$lib/state.svelte';
 	import Svelecte from 'svelecte';
 
 	appSettings.navbarTitle = 'Settings';
@@ -7,6 +8,7 @@
 </script>
 
 <div class="max-w-96">
+	<ServerSettings></ServerSettings>
 	<h1 class="mb-4 text-primary">Application Theme</h1>
 	<Svelecte name="daisyUITheme" options={['hsui', 'light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate', 'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden', 'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black', 'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade', 'night', 'coffee', 'winter', 'dim', 'nord', 'sunset']} bind:value={persistentAppSettings.daisyUITheme} />
 </div>