From ed2761e03e2e34cf595faad465241ea7bb47bc35 Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Sat, 5 Oct 2024 05:23:49 -0700
Subject: [PATCH] dashboard UI cosmetic updates

---
 packages/dashboard/src/app.css                |  11 ++
 .../app/instances/[instanceId]/+layout.svelte | 172 ++++++++++--------
 .../app/instances/[instanceId]/+page.svelte   |   7 +-
 .../app/instances/[instanceId]/Code.svelte    |  94 +++++-----
 .../app/instances/[instanceId]/Ftpx.svelte    |  63 -------
 .../app/instances/[instanceId]/Toggle.svelte  |  35 ++++
 .../[instanceId]/admin-sync/+page.svelte      |  36 ++++
 .../+page.svelte}                             |  61 ++++---
 .../instances/[instanceId]/dev/+page.svelte   |  39 ++++
 .../+page.svelte}                             |  92 +++++-----
 .../instances/[instanceId]/ftp/+page.svelte   |  58 ++++++
 .../[instanceId]/logs/LoggingInner.svelte     |   6 +-
 .../+page.svelte}                             |  52 +++---
 .../[instanceId]/secrets/+page.svelte         |   1 +
 .../[instanceId]/secrets/Form.svelte          |  30 +--
 .../[instanceId]/secrets/List.svelte          |  23 +--
 .../[instanceId]/secrets/SecretsInner.svelte  |  56 ++----
 .../[instanceId]/settings/+page.svelte        |  15 +-
 .../[instanceId]/settings/AdminSync.svelte    |  49 -----
 .../[instanceId]/settings/DevMode.svelte      |  47 -----
 .../[instanceId]/settings/Maintenance.svelte  |  78 --------
 .../+page.svelte}                             |  56 +++---
 .../VersionPicker.svelte                      |   8 +-
 .../src/routes/dashboard/InstanceList.svelte  |   5 +-
 packages/dashboard/tailwind.config.cjs        |   8 +-
 25 files changed, 512 insertions(+), 590 deletions(-)
 delete mode 100644 packages/dashboard/src/routes/app/instances/[instanceId]/Ftpx.svelte
 create mode 100644 packages/dashboard/src/routes/app/instances/[instanceId]/Toggle.svelte
 create mode 100644 packages/dashboard/src/routes/app/instances/[instanceId]/admin-sync/+page.svelte
 rename packages/dashboard/src/routes/app/instances/[instanceId]/{settings/DeleteInstance.svelte => delete/+page.svelte} (67%)
 create mode 100644 packages/dashboard/src/routes/app/instances/[instanceId]/dev/+page.svelte
 rename packages/dashboard/src/routes/app/instances/[instanceId]/{settings/CustomDomain.svelte => domain/+page.svelte} (60%)
 create mode 100644 packages/dashboard/src/routes/app/instances/[instanceId]/ftp/+page.svelte
 rename packages/dashboard/src/routes/app/instances/[instanceId]/{settings/RenameInstance.svelte => rename/+page.svelte} (69%)
 delete mode 100644 packages/dashboard/src/routes/app/instances/[instanceId]/settings/AdminSync.svelte
 delete mode 100644 packages/dashboard/src/routes/app/instances/[instanceId]/settings/DevMode.svelte
 delete mode 100644 packages/dashboard/src/routes/app/instances/[instanceId]/settings/Maintenance.svelte
 rename packages/dashboard/src/routes/app/instances/[instanceId]/{settings/VersionChange/VersionChange.svelte => version/+page.svelte} (68%)
 rename packages/dashboard/src/routes/app/instances/[instanceId]/{settings/VersionChange => version}/VersionPicker.svelte (88%)

diff --git a/packages/dashboard/src/app.css b/packages/dashboard/src/app.css
index b5c61c95..f390fb05 100644
--- a/packages/dashboard/src/app.css
+++ b/packages/dashboard/src/app.css
@@ -1,3 +1,14 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.prose :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  @apply mb-1 mt-1;
+}
+.prose :where(code):not(:where([class~='not-prose'] *)) {
+  @apply bg-transparent;
+}
+
+.prose :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  @apply mt-0 mb-0;
+}
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/+layout.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/+layout.svelte
index 79813308..1a91f0fd 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/+layout.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/+layout.svelte
@@ -1,10 +1,13 @@
-<script>
+<script lang="ts">
   import { page } from '$app/stores'
   import AlertBar from '$components/AlertBar.svelte'
   import { INSTANCE_ADMIN_URL } from '$src/env'
   import { globalInstancesStore } from '$util/stores'
   import { assert } from 'pockethost/common'
   import { instance } from './store'
+  import { client } from '$src/pocketbase-client'
+  import { InstanceId } from 'pockethost/common'
+  import Toggle from './Toggle.svelte'
 
   let isReady = false
   $: {
@@ -17,7 +20,23 @@
     isReady = !!_instance
   }
 
-  $: ({ status, version, id } = $instance || {})
+  $: ({ id } = $instance || {})
+
+  const { updateInstance } = client()
+
+  const handleMaintenanceChange = (id: InstanceId) => (isChecked: boolean) => {
+    const maintenance = !isChecked
+
+    // Update the database with the new value
+    updateInstance({ id, fields: { maintenance } })
+      .then(() => 'saved')
+      .catch((error) => {
+        error.data.message || error.message
+      })
+  }
+
+  $: isActive = (path: string) => $page.url.pathname.endsWith(path)
+  $: activeClass = (path: string) => (isActive(path) ? 'text-primary' : '')
 </script>
 
 <svelte:head>
@@ -27,93 +46,100 @@
 </svelte:head>
 
 {#if isReady}
-  <div
-    class="flex md:flex-row flex-col items-center justify-between mb-6 gap-4"
-  >
+  <div class="flex flex-row items-center justify-between mb-6 gap-4">
     <div>
       <h2
-        class="text-4xl md:text-left text-center text-base-content font-bold capitalize mb-3 break-words"
+        class="text-4xl md:text-left text-center text-base-content font-bold mb-3 break-words"
       >
-        {$instance.subdomain}
+        {$instance.subdomain}<span class="text-xs text-gray-400"
+          >.pockethost.io</span
+        >
+        <span class="text-xs text-gray-400">v{$instance.version}</span>
       </h2>
-
-      <div class="flex flex-wrap md:justify-start justify-center gap-2">
-        <div class="badge badge-accent badge-outline">
-          Status: &nbsp;<span class="capitalize">{status}</span>
-        </div>
-
-        <div class="badge badge-accent badge-outline">Version: {version}</div>
-      </div>
     </div>
 
-    <a
-      href={INSTANCE_ADMIN_URL($instance)}
-      rel="noreferrer"
-      target="_blank"
-      class="btn btn-primary"
-    >
-      <img
-        src="/images/pocketbase-logo.svg"
-        alt="PocketBase Logo"
-        class="w-6"
+    <div>
+      <Toggle
+        title="Power"
+        checked={!$instance.maintenance}
+        onChange={handleMaintenanceChange($instance.id)}
       />
-      Admin
-    </a>
+    </div>
   </div>
 
   {#if $instance.maintenance}
     <AlertBar
-      message="This instance is in Maintenance Mode and will not respond to requests"
+      message="This instance is turned off and will not respond to requests"
       type="warning"
     />
   {/if}
 
-  <div role="tablist" class="tabs tabs-bordered gap-4 mb-4 p-4">
-    <a
-      role="tab"
-      class="tab h-auto md:h-8 flex gap-2 font-bold {$page.url.pathname.endsWith(
-        id,
-      )
-        ? `tab-active`
-        : ``}"
-      href="/app/instances/{id}"
-      ><i class="fa-light fa-sparkles"></i> Overview</a
-    >
-    <a
-      role="tab"
-      class="tab h-auto md:h-8 flex gap-2 font-bold {$page.url.pathname.endsWith(
-        `logs`,
-      )
-        ? `tab-active`
-        : ``}"
-      href="/app/instances/{id}/logs"
-      ><i class="fa-light fa-terminal"></i> Logs</a
-    >
-    <a
-      role="tab"
-      class="tab h-auto md:h-8 flex gap-2 font-bold {$page.url.pathname.endsWith(
-        `secrets`,
-      )
-        ? `tab-active`
-        : ``}"
-      href="/app/instances/{id}/secrets"
-      ><i class="fa-light fa-shield"></i> Secrets</a
-    >
-    <a
-      role="tab"
-      class="tab h-auto md:h-8 flex gap-2 font-bold {$page.url.pathname.endsWith(
-        `settings`,
-      )
-        ? `tab-active`
-        : ``}"
-      href="/app/instances/{id}/settings"
-      ><i class="fa-light fa-gear"></i> Settings</a
-    >
-  </div>
+  <div class="flex gap-4">
+    <div class="w-48">
+      <ul>
+        <li>
+          <a href={`/app/instances/${id}`} class={activeClass(id)}>Overview</a>
+        </li>
+        <li>
+          <a
+            href={`/app/instances/${id}/secrets`}
+            class={activeClass(`secrets`)}>Secrets</a
+          >
+        </li>
+        <li>
+          <a href={`/app/instances/${id}/logs`} class={activeClass(`logs`)}
+            >Logs</a
+          >
+        </li>
+        <li>
+          <a href={`/app/instances/${id}/ftp`} class={activeClass(`ftp`)}
+            >FTP Access</a
+          >
+        </li>
+        <li>
+          <a
+            href={INSTANCE_ADMIN_URL($instance)}
+            rel="noreferrer"
+            target="_blank"
+          >
+            <img
+              src="/images/pocketbase-logo.svg"
+              alt="PocketBase Logo"
+              class="w-6 inline-block"
+            />
+            Admin
+            <i class="fa-solid fa-external-link-alt text-xs"></i>
+          </a>
+        </li>
+      </ul>
+      <div class="divider"></div>
+      <div class="mt-2 mb-2">
+        <i class="fa-solid fa-siren-on text-error"></i>
+        <span class=" font-bold text-error">Danger Zone</span>
+        <i class="fa-solid fa-siren-on text-error"></i>
+      </div>
+      <ul>
+        <li><a href={`/app/instances/${id}/version`}>Change Version</a></li>
+        <li><a href={`/app/instances/${id}/domain`}>Custom Domain</a></li>
+        <li><a href={`/app/instances/${id}/admin-sync`}>Admin Sync</a></li>
+        <li><a href={`/app/instances/${id}/dev`}>Dev Mode</a></li>
+        <li><a href={`/app/instances/${id}/rename`}>Rename</a></li>
+        <li>
+          <a href={`/app/instances/${id}/delete`} class="btn btn-error btn-xs"
+            >Delete</a
+          >
+        </li>
+      </ul>
+    </div>
 
-  {#key $page.url.pathname}
-    <slot />
-  {/key}
+    <div class="w-full">
+      {#key $page.url.pathname}
+        <article class="prose">
+          <slot />
+        </article>
+      {/key}
+    </div>
+  </div>
 {:else}
   <div>Instance not found</div>
 {/if}
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/+page.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/+page.svelte
index d9711bbe..ddd593ce 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/+page.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { assertExists } from 'pockethost/common'
   import Code from './Code.svelte'
-  import Ftp from './Ftpx.svelte'
+  import Ftp from './ftp/+page.svelte'
   import { instance } from './store'
 
   $: ({ status, version, id } = $instance)
@@ -10,7 +10,4 @@
   const { subdomain } = $instance
 </script>
 
-<div class="grid lg:grid-cols-2 grid-cols-1 gap-4 mb-4">
-  <Code />
-  <Ftp />
-</div>
+<Code />
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/Code.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/Code.svelte
index 04293726..122ec432 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/Code.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/Code.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
   import CodeSample from '$components/CodeSample.svelte'
-  import Card from '$components/cards/Card.svelte'
-  import CardHeader from '$components/cards/CardHeader.svelte'
   import { DISCORD_URL, INSTANCE_URL } from '$src/env'
   import { instance } from './store'
 
@@ -19,56 +17,54 @@
 });`
 </script>
 
-<Card>
-  <CardHeader>Getting Started</CardHeader>
+<h2>Overview</h2>
 
-  <div class="mb-4">
-    <p>Your PocketBase URL is</p>
-    <CodeSample code={url} />
-  </div>
+<div class="mb-4">
+  <p>Your PocketBase URL is</p>
+  <CodeSample code={url} />
+</div>
 
-  <div class="mb-4">
-    <p>Installing PocketBase</p>
-    <CodeSample code={installSnippet} />
-  </div>
+<div class="mb-4">
+  <p>Installing PocketBase</p>
+  <CodeSample code={installSnippet} />
+</div>
 
-  <div class="mb-4">
-    <p>Connecting to Your Instance</p>
-    {#if $instance.cname}
-      {#if $instance.cname_active}
-        <div class="text-accent">Notice: You are in Custom Domain mode</div>
-      {:else}
-        <div class="text-error">
-          Notice: You are in Custom Domain mode but it is not active and will
-          not work. Go find <a href={DISCORD_URL} target="_blank" class="link"
-            >@noaxis on Discord</a
-          > to get set up.
-        </div>
-      {/if}
+<div class="mb-4">
+  <p>Connecting to Your Instance</p>
+  {#if $instance.cname}
+    {#if $instance.cname_active}
+      <div class="text-accent">Notice: You are in Custom Domain mode</div>
+    {:else}
+      <div class="text-error">
+        Notice: You are in Custom Domain mode but it is not active and will not
+        work. Go find <a href={DISCORD_URL} target="_blank" class="link"
+          >@noaxis on Discord</a
+        > to get set up.
+      </div>
     {/if}
-    <CodeSample code={connectionSnippet} />
-  </div>
+  {/if}
+  <CodeSample code={connectionSnippet} />
+</div>
 
-  <div class="mb-4">
-    <p>Making Your First Query</p>
-    <CodeSample code={firstQuerySnippet} />
-  </div>
+<div class="mb-4">
+  <p>Making Your First Query</p>
+  <CodeSample code={firstQuerySnippet} />
+</div>
 
-  <p>Additional Resources:</p>
-  <ul class="list-disc pl-4">
-    <li>
-      <a
-        href={`https://pocketbase.io/docs/api-records/`}
-        target="_blank"
-        class="link">PocketBase Web APIs</a
-      >
-    </li>
-    <li>
-      <a
-        href="https://www.npmjs.com/package/pocketbase"
-        target="_blank"
-        class="link">PocketBase NPM Package</a
-      >
-    </li>
-  </ul>
-</Card>
+<p>Additional Resources:</p>
+<ul class="list-disc pl-4">
+  <li>
+    <a
+      href={`https://pocketbase.io/docs/api-records/`}
+      target="_blank"
+      class="link">PocketBase Web APIs</a
+    >
+  </li>
+  <li>
+    <a
+      href="https://www.npmjs.com/package/pocketbase"
+      target="_blank"
+      class="link">PocketBase NPM Package</a
+    >
+  </li>
+</ul>
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/Ftpx.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/Ftpx.svelte
deleted file mode 100644
index c26b506d..00000000
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/Ftpx.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-  import CodeSample from '$components/CodeSample.svelte'
-  import Card from '$components/cards/Card.svelte'
-  import CardHeader from '$components/cards/CardHeader.svelte'
-  import { DOCS_URL, FTP_URL } from '$src/env'
-  import { client } from '$src/pocketbase-client'
-  import { bash } from 'svelte-highlight/languages'
-
-  const { user } = client()
-  const { email } = user() || {}
-
-  // This will hide the component if the email was not found
-  if (!email) {
-    throw new Error(`Email expected here`)
-  }
-  const ftpUrl = FTP_URL(email)
-</script>
-
-<Card>
-  <CardHeader documentation={DOCS_URL(`/usage/ftp`)}>FTP Access</CardHeader>
-
-  <p class="mb-8">
-    Securely access your instance files via FTPS. Use your PocketHost account
-    login and password.
-  </p>
-
-  <p>Bash:</p>
-
-  <div class="mb-12">
-    <CodeSample code={`ftp ${ftpUrl}`} language={bash} />
-  </div>
-
-  <table class="table">
-    <thead>
-      <tr>
-        <th class="border-b-2 border-neutral">Directory</th>
-        <th class="border-b-2 border-neutral">Description</th>
-      </tr>
-    </thead>
-
-    <tbody>
-      <tr>
-        <th>pb_data</th>
-        <td
-          >The PocketBase data directory, including upload storage and database
-          backups</td
-        >
-      </tr>
-      <tr>
-        <th>pb_public</th>
-        <td>Public files, such as a web frontend</td>
-      </tr>
-      <tr>
-        <th>pb_migrations</th>
-        <td>The PocketBase migrations directory</td>
-      </tr>
-      <tr>
-        <th>pb_hooks</th>
-        <td>The PocketBase JS hooks directory</td>
-      </tr>
-    </tbody>
-  </table>
-</Card>
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/Toggle.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/Toggle.svelte
new file mode 100644
index 00000000..340f782a
--- /dev/null
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/Toggle.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  export let checked = false
+  export let title = ''
+  export let onClass = 'success'
+  export let offClass = 'red-500'
+  export let onText = 'on'
+  export let offText = 'off'
+  export let onChange = (isChecked: boolean) => {}
+
+  const handleChange = (e: Event) => {
+    const target = e.target as HTMLInputElement
+    const isChecked = target.checked
+    e.preventDefault()
+    onChange(isChecked)
+  }
+</script>
+
+<div class="form-control w-fit">
+  <label class="label cursor-pointer">
+    <span class="label-text mr-2"
+      >{title} is
+      <span class="text-{checked ? onClass : offClass}"
+        >{checked ? onText : offText}</span
+      ></span
+    >
+    <input
+      type="checkbox"
+      class="toggle bg-{checked ? onClass : offClass} hover:bg-{checked
+        ? onClass
+        : offClass}"
+      {checked}
+      on:change={handleChange}
+    />
+  </label>
+</div>
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/admin-sync/+page.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/admin-sync/+page.svelte
new file mode 100644
index 00000000..63040345
--- /dev/null
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/admin-sync/+page.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Card from '$components/cards/Card.svelte'
+  import CardHeader from '$components/cards/CardHeader.svelte'
+  import { DOCS_URL } from '$src/env'
+  import { client } from '$src/pocketbase-client'
+  import { instance } from '../store'
+  import ErrorMessage from '../settings/ErrorMessage.svelte'
+  import Toggle from '../Toggle.svelte'
+
+  const { updateInstance } = client()
+
+  $: ({ id, syncAdmin } = $instance)
+
+  let errorMessage = ''
+
+  const handleChange = (isChecked: boolean) => {
+    // Update the database with the new value
+    updateInstance({ id, fields: { syncAdmin: isChecked } })
+      .then(() => 'saved')
+      .catch((error) => {
+        errorMessage = error.data.message || error.message
+      })
+  }
+</script>
+
+<CardHeader documentation={DOCS_URL(`/usage/admin-sync`)}>
+  Admin Sync
+</CardHeader>
+
+<p class="mb-8">
+  Your instance will have an admin login that matches your pockethost.io login.
+</p>
+
+<ErrorMessage message={errorMessage} />
+
+<Toggle title="Admin Sync" checked={!!syncAdmin} onChange={handleChange} />
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/DeleteInstance.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/delete/+page.svelte
similarity index 67%
rename from packages/dashboard/src/routes/app/instances/[instanceId]/settings/DeleteInstance.svelte
rename to packages/dashboard/src/routes/app/instances/[instanceId]/delete/+page.svelte
index 53db71f2..006e8beb 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/DeleteInstance.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/delete/+page.svelte
@@ -6,7 +6,8 @@
   import { client } from '$src/pocketbase-client'
   import { globalInstancesStore } from '$util/stores'
   import { instance } from '../store'
-  import ErrorMessage from './ErrorMessage.svelte'
+  import ErrorMessage from '../settings/ErrorMessage.svelte'
+  import AlertBar from '$src/components/AlertBar.svelte'
 
   $: ({ id, maintenance, version } = $instance)
 
@@ -63,37 +64,41 @@
   }
 </script>
 
-<Card>
-  <CardHeader documentation={DOCS_URL(`/usage/delete`)}>
-    Delete Instance
-  </CardHeader>
+<CardHeader documentation={DOCS_URL(`/usage/delete`)}>
+  Delete Instance
+</CardHeader>
 
-  <div class="mb-8">
-    Deleting your instance will immediately and permanently delete your
-    instance:
-    <ul class="ml-10 text-error">
-      <li>Your subdomain</li>
-      <li><pre>pb_data/*</pre></li>
-      <li><pre>pb_public/*</pre></li>
-      <li><pre>pb_migrations/*</pre></li>
-      <li><pre>pb_static/*</pre></li>
-    </ul>
-    If you are storing files on S3, you must delete them separately.
-  </div>
+{#if !maintenance}
+  <AlertBar
+    message="Instance must be powered off before deleting."
+    type="error"
+  />
+{/if}
 
-  <ErrorMessage message={errorMessage} />
+<div class="mb-8">
+  Deleting your instance will immediately and permanently delete your instance:
+  <ul class="ml-10 text-error">
+    <li>Your subdomain</li>
+    <li><pre>pb_data/*</pre></li>
+    <li><pre>pb_public/*</pre></li>
+    <li><pre>pb_migrations/*</pre></li>
+    <li><pre>pb_static/*</pre></li>
+  </ul>
+  If you are storing files on S3, you must delete them separately.
+</div>
 
-  <form
-    class="flex change-version-form-container-query gap-4"
-    on:submit={handleSave}
+<ErrorMessage message={errorMessage} />
+
+<form
+  class="flex change-version-form-container-query gap-4"
+  on:submit={handleSave}
+>
+  <button
+    type="submit"
+    class="btn btn-error"
+    disabled={!maintenance || isButtonDisabled}>Delete Instance</button
   >
-    <button
-      type="submit"
-      class="btn btn-error"
-      disabled={!maintenance || isButtonDisabled}>Delete Instance</button
-    >
-  </form>
-</Card>
+</form>
 
 <style>
   .change-version-form-container-query {
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/dev/+page.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/dev/+page.svelte
new file mode 100644
index 00000000..50742776
--- /dev/null
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/dev/+page.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import Card from '$components/cards/Card.svelte'
+  import CardHeader from '$components/cards/CardHeader.svelte'
+  import { DOCS_URL } from '$src/env'
+  import { client } from '$src/pocketbase-client'
+  import { instance } from '../store'
+  import ErrorMessage from '../settings/ErrorMessage.svelte'
+  import Toggle from '../Toggle.svelte'
+
+  const { updateInstance } = client()
+
+  $: ({ id, dev } = $instance)
+
+  let errorMessage = ''
+
+  const handleChange = (isChecked: boolean) => {
+    updateInstance({ id, fields: { dev: isChecked } })
+      .then(() => 'saved')
+      .catch((error) => {
+        errorMessage = error.data.message || error.message
+      })
+  }
+</script>
+
+<CardHeader documentation={DOCS_URL(`/usage/dev-mode`)}>Dev Mode</CardHeader>
+
+<p class="mb-8">
+  Starting with PocketBase v0.20.1, your instance will show debugging output in
+  the instance logs. Performance is degraded while Dev Mode is active.
+</p>
+
+<ErrorMessage message={errorMessage} />
+
+<Toggle
+  title="Dev Mode"
+  onChange={handleChange}
+  checked={!!dev}
+  onClass="warning"
+/>
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/CustomDomain.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/domain/+page.svelte
similarity index 60%
rename from packages/dashboard/src/routes/app/instances/[instanceId]/settings/CustomDomain.svelte
rename to packages/dashboard/src/routes/app/instances/[instanceId]/domain/+page.svelte
index cb94d531..4ad92bd6 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/CustomDomain.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/domain/+page.svelte
@@ -31,7 +31,9 @@
     /^(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,24}$/
 
   $: {
-    isButtonDisabled = !!formCname.trim() && !regex.test(formCname)
+    isButtonDisabled =
+      (!!formCname.trim() && !regex.test(formCname)) ||
+      (!formCname.trim() && !cname.trim())
   }
   const onRename = (e: Event) => {
     e.preventDefault()
@@ -76,54 +78,52 @@
   }
 </script>
 
-<Card>
-  <CardHeader documentation={DOCS_URL(`/usage/custom-domain`)}>
-    Custom Domain (CNAME)
-  </CardHeader>
+<CardHeader documentation={DOCS_URL(`/usage/custom-domain`)}>
+  Custom Domain (CNAME)
+</CardHeader>
 
-  <div class="mb-8">
-    Use a custom domain (CNAME) with your PocketHost instance.
-  </div>
-  {#if formCname && regex.test(formCname.trim())}
-    <div class="mb-8">Go to your DNS provider and add a CNAME entry.</div>
-    <div class="mb-4">
-      <CodeSample
-        code={`${formCname} CNAME ${INSTANCE_BARE_HOST($instance)}`}
-        language={dns}
-      />
-    </div>
-  {/if}
-
-  <AlertBar message={successMessage} type="success" />
-  <AlertBar message={errorMessage} type="error" />
-
-  {#if cname}
-    {#if !cname_active}
-      <AlertBar
-        message={`Your custom domain name is pending. Go find <a class='btn btn-primary' target='_blank' href="https://discord.com/channels/1128192380500193370/1189948945967882250">@noaxis on Discord</a> to complete setup.`}
-        type="warning"
-      />
-    {:else}
-      <AlertBar message={`Your custom domain name is active.`} type="success" />
-    {/if}
-  {/if}
-
-  <form
-    class="flex rename-instance-form-container-query gap-4"
-    on:submit={onRename}
-  >
-    <input
-      title="Only valid domain name patterns are allowed"
-      type="text"
-      bind:value={formCname}
-      class="input input-bordered w-full"
+<div class="mb-8">
+  Use a custom domain (CNAME) with your PocketHost instance.
+</div>
+{#if formCname && regex.test(formCname.trim())}
+  <div class="mb-8">Go to your DNS provider and add a CNAME entry.</div>
+  <div class="mb-4">
+    <CodeSample
+      code={`${formCname} CNAME ${INSTANCE_BARE_HOST($instance)}`}
+      language={dns}
     />
+  </div>
+{/if}
 
-    <button type="submit" class="btn btn-error" disabled={isButtonDisabled}
-      >Update Custom Domain</button
-    >
-  </form>
-</Card>
+<AlertBar message={successMessage} type="success" />
+<AlertBar message={errorMessage} type="error" />
+
+{#if cname}
+  {#if !cname_active}
+    <AlertBar
+      message={`Your custom domain name is pending. Go find <a class='btn btn-primary' target='_blank' href="https://discord.com/channels/1128192380500193370/1189948945967882250">@noaxis on Discord</a> to complete setup.`}
+      type="warning"
+    />
+  {:else}
+    <AlertBar message={`Your custom domain name is active.`} type="success" />
+  {/if}
+{/if}
+
+<form
+  class="flex rename-instance-form-container-query gap-4"
+  on:submit={onRename}
+>
+  <input
+    title="Only valid domain name patterns are allowed"
+    type="text"
+    bind:value={formCname}
+    class="input input-bordered w-full"
+  />
+
+  <button type="submit" class="btn btn-error" disabled={isButtonDisabled}
+    >Update Custom Domain</button
+  >
+</form>
 
 <style>
   .rename-instance-form-container-query {
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/ftp/+page.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/ftp/+page.svelte
new file mode 100644
index 00000000..294348eb
--- /dev/null
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/ftp/+page.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import CodeSample from '$components/CodeSample.svelte'
+  import Card from '$components/cards/Card.svelte'
+  import CardHeader from '$components/cards/CardHeader.svelte'
+  import { DOCS_URL, FTP_URL } from '$src/env'
+  import { client } from '$src/pocketbase-client'
+  import { bash } from 'svelte-highlight/languages'
+
+  const { user } = client()
+  const { email } = user() || {}
+
+  // This will hide the component if the email was not found
+  if (!email) {
+    throw new Error(`Email expected here`)
+  }
+  const ftpUrl = FTP_URL(email)
+</script>
+
+<h2>FTP Access</h2>
+<div class="mb-8">
+  Securely access your instance files via FTPS. Use your PocketHost account
+  login and password.
+</div>
+
+<div class="mb-12">
+  <CodeSample code={`ftp ${ftpUrl}`} language={bash} />
+</div>
+
+<table class="table">
+  <thead>
+    <tr>
+      <th class="border-b-2 border-neutral">Directory</th>
+      <th class="border-b-2 border-neutral">Description</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <th>pb_data</th>
+      <td
+        >The PocketBase data directory, including upload storage and database
+        backups</td
+      >
+    </tr>
+    <tr>
+      <th>pb_public</th>
+      <td>Public files, such as a web frontend</td>
+    </tr>
+    <tr>
+      <th>pb_migrations</th>
+      <td>The PocketBase migrations directory</td>
+    </tr>
+    <tr>
+      <th>pb_hooks</th>
+      <td>The PocketBase JS hooks directory</td>
+    </tr>
+  </tbody>
+</table>
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/logs/LoggingInner.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/logs/LoggingInner.svelte
index 9718963d..8ab8d9e8 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/logs/LoggingInner.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/logs/LoggingInner.svelte
@@ -82,10 +82,12 @@
   })
 </script>
 
-<p class="mb-4">
+<h2>Logs</h2>
+
+<div class="mb-4">
   Instance logs appear here in realtime, including <code>console.log</code> from
   JavaScript hooks.
-</p>
+</div>
 
 <dialog id="loggingFullscreenModal" class="modal backdrop-blur">
   <div class="modal-box max-w-[90vw] h-[90vh]">
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/RenameInstance.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/rename/+page.svelte
similarity index 69%
rename from packages/dashboard/src/routes/app/instances/[instanceId]/settings/RenameInstance.svelte
rename to packages/dashboard/src/routes/app/instances/[instanceId]/rename/+page.svelte
index c1971e7d..2acf741c 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/RenameInstance.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/rename/+page.svelte
@@ -56,37 +56,35 @@
   }
 </script>
 
-<Card>
-  <CardHeader documentation={DOCS_URL(`/usage/rename-instance`)}>
-    Rename Instance
-  </CardHeader>
+<CardHeader documentation={DOCS_URL(`/usage/rename-instance`)}>
+  Rename Instance
+</CardHeader>
 
-  <p class="mb-8">
-    Renaming your instance will cause it to become <strong class="text-error"
-      >inaccessible</strong
-    > by the old instance name. You also may not be able to change it back if someone
-    else choose it.
-  </p>
+<p class="mb-8">
+  Renaming your instance will cause it to become <strong class="text-error"
+    >inaccessible</strong
+  > by the old instance name. You also may not be able to change it back if someone
+  else choose it.
+</p>
 
-  <AlertBar message={errorMessage} type="error" />
+<AlertBar message={errorMessage} type="error" />
 
-  <form
-    class="flex rename-instance-form-container-query gap-4"
-    on:submit={onRename}
+<form
+  class="flex rename-instance-form-container-query gap-4"
+  on:submit={onRename}
+>
+  <input
+    title="Only letters and dashes are allowed"
+    required
+    type="text"
+    bind:value={formSubdomain}
+    class="input input-bordered w-full"
+  />
+
+  <button type="submit" class="btn btn-error" disabled={isButtonDisabled}
+    >Rename Instance</button
   >
-    <input
-      title="Only letters and dashes are allowed"
-      required
-      type="text"
-      bind:value={formSubdomain}
-      class="input input-bordered w-full"
-    />
-
-    <button type="submit" class="btn btn-error" disabled={isButtonDisabled}
-      >Rename Instance</button
-    >
-  </form>
-</Card>
+</form>
 
 <style>
   .rename-instance-form-container-query {
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/+page.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/+page.svelte
index a33f3d47..ced86a04 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/+page.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/+page.svelte
@@ -13,4 +13,5 @@
   <title>{subdomain} secrets - PocketHost</title>
 </svelte:head>
 
+<h2>Secrets</h2>
 <SecretsInner />
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/Form.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/Form.svelte
index 91adb3b7..90eebbfe 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/Form.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/Form.svelte
@@ -79,34 +79,33 @@
 </script>
 
 <div class="mb-8">
-  <h4 class="flex items-center font-bold h-9 text-lg mb-3">
-    Add an Environment Variable
-  </h4>
+  {#if successfulSave}
+    <AlertBar
+      message="Your new environment variable has been saved."
+      type="success"
+    />
+  {/if}
+
+  <AlertBar message={errorMessage} type="error" />
 
   <form on:submit={handleSubmit} class="mb-4">
     <div class="grid grid-cols-2 gap-4 mb-4">
       <div>
-        <label class="label" for="secret-key">
-          <span class="label-text">Key</span>
-        </label>
-
         <input
           id="secret-key"
           type="text"
           bind:value={secretKey}
+          placeholder="KEY"
           class="input input-bordered w-full max-w-xs"
         />
       </div>
 
       <div>
-        <label class="label" for="secret-value">
-          <span class="label-text">Value</span>
-        </label>
-
         <input
           id="secret-value"
           type="text"
           bind:value={secretValue}
+          placeholder="VALUE"
           class="input input-bordered w-full max-w-xs"
         />
       </div>
@@ -125,13 +124,4 @@
       >
     </div>
   </form>
-
-  {#if successfulSave}
-    <AlertBar
-      message="Your new environment variable has been saved."
-      type="success"
-    />
-  {/if}
-
-  <AlertBar message={errorMessage} type="error" />
 </div>
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/List.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/List.svelte
index e38cca47..a39831d6 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/List.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/List.svelte
@@ -6,8 +6,6 @@
   import { reduce } from '@s-libs/micro-dash'
   import { logger, UpdateInstancePayload } from 'pockethost'
 
-  let showSecretKeys = false
-
   const handleDelete = (name: string) => async (e: Event) => {
     e.preventDefault()
     logger().debug(`Deleting ${name}`)
@@ -29,21 +27,6 @@
   }
 </script>
 
-<div class="flex items-center justify-between mb-3 h-9">
-  <h4 class="font-bold text-lg">Current Environment Variables</h4>
-
-  <div class="form-control">
-    <label class="label cursor-pointer">
-      <span class="label-text text-accent mr-2">Show Secrets</span>
-      <input
-        type="checkbox"
-        class="toggle toggle-sm"
-        bind:checked={showSecretKeys}
-      />
-    </label>
-  </div>
-</div>
-
 <table class="table">
   <thead>
     <tr>
@@ -58,10 +41,8 @@
       <tr transition:fade>
         <th>{item.name}</th>
         <td
-          >{showSecretKeys
-            ? item.value
-            : item.value.slice(0, 2) +
-              item.value.slice(2).replaceAll(/./g, '*')}</td
+          >{item.value.slice(0, 2) +
+            item.value.slice(2).replaceAll(/./g, '*')}</td
         >
         <td class="text-right">
           <button
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/SecretsInner.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/SecretsInner.svelte
index 401ad049..2c4357e4 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/SecretsInner.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/secrets/SecretsInner.svelte
@@ -6,8 +6,6 @@
   import List from './List.svelte'
   import { items } from './stores'
 
-  // TODO: Hot Reload is causing an infinite loop in the network tab for some reason. Wasn't able to figure out why
-
   $: {
     const { id, secrets } = $instance
     items.clear()
@@ -17,24 +15,27 @@
     })
   }
 
-  // Keep track of which tab the user has selected
-  let activeTab = 0
-
-  // Toggle between the tabs on click
-  const handleTabChange = (id: number) => {
-    activeTab = id
-  }
+  $: code =
+    `// pb_hooks/env-test.pb.js\n\n` +
+    ($items.length > 0
+      ? $items
+          .map(
+            ({ name, value }) =>
+              `const ${name} = process.env.${name}\nconsole.log("${name}: ", ${name})`,
+          )
+          .join('\n')
+      : `const YOUR_KEY = process.env.YOUR_KEY`)
 </script>
 
-<p class="mb-4">
+<div class="mb-4">
   These secrets are forwarded to your <code>pocketbase</code> as environment
   variables, which are also accessible from any <code>pb_hooks</code> you have created.
-</p>
+</div>
 
 <!-- If the user has any secrets, render them in a code block -->
 {#if $items.length > 0}
   <div class="mb-8">
-    <CodeSample code={`const YOUR_KEY = process.env.YOUR_KEY`} />
+    <CodeSample {code} />
   </div>
 {/if}
 
@@ -45,32 +46,5 @@
   </div>
 {/if}
 
-<div class="tabs mb-4 border-b-[1px] border-neutral">
-  <button
-    on:click={() => handleTabChange(0)}
-    type="button"
-    class="tab border-b-2 {activeTab === 0
-      ? 'tab-active font-bold border-base-content'
-      : 'border-neutral'}"
-    ><i class="fa-regular fa-plus mr-2"></i> Add New</button
-  >
-
-  <button
-    on:click={() => handleTabChange(1)}
-    type="button"
-    class="tab border-b-2 {activeTab === 1
-      ? 'tab-active font-bold border-base-content'
-      : 'border-neutral'}"
-    ><i class="fa-regular fa-list mr-2"></i> Current List</button
-  >
-</div>
-
-<div>
-  {#if activeTab === 0}
-    <Form />
-  {/if}
-
-  {#if activeTab === 1}
-    <List />
-  {/if}
-</div>
+<List />
+<Form />
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/+page.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/settings/+page.svelte
index 9068c606..53403d1d 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/+page.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/settings/+page.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
   import { assertExists } from 'pockethost/common'
   import { instance } from '../store'
-  import AdminSync from './AdminSync.svelte'
-  import CustomDomain from './CustomDomain.svelte'
+  import AdminSync from '../admin-sync/+page.svelte'
+  import CustomDomain from '../domain/+page.svelte'
   import DangerZoneTitle from './DangerZoneTitle.svelte'
-  import DeleteInstance from './DeleteInstance.svelte'
-  import DevMode from './DevMode.svelte'
-  import Maintenance from './Maintenance.svelte'
-  import RenameInstance from './RenameInstance.svelte'
-  import VersionChange from './VersionChange/VersionChange.svelte'
+  import DeleteInstance from '../delete/+page.svelte'
+  import DevMode from '../dev/+page.svelte'
+  import RenameInstance from '../rename/+page.svelte'
+  import VersionChange from '../version/+page.svelte'
 
   $: ({ status, version, id } = $instance)
 
@@ -25,8 +24,6 @@
 <div class="grid lg:grid-cols-3 gap-4 mb-4">
   <RenameInstance />
 
-  <Maintenance />
-
   <VersionChange />
 
   <AdminSync />
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/AdminSync.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/settings/AdminSync.svelte
deleted file mode 100644
index 05b6f9ab..00000000
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/AdminSync.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-  import Card from '$components/cards/Card.svelte'
-  import CardHeader from '$components/cards/CardHeader.svelte'
-  import { DOCS_URL } from '$src/env'
-  import { client } from '$src/pocketbase-client'
-  import { instance } from '../store'
-  import ErrorMessage from './ErrorMessage.svelte'
-
-  const { updateInstance } = client()
-
-  $: ({ id, syncAdmin } = $instance)
-
-  let errorMessage = ''
-
-  const handleChange = (e: Event) => {
-    const target = e.target as HTMLInputElement
-    const isChecked = target.checked
-
-    // Update the database with the new value
-    updateInstance({ id, fields: { syncAdmin: isChecked } })
-      .then(() => 'saved')
-      .catch((error) => {
-        errorMessage = error.data.message || error.message
-      })
-  }
-</script>
-
-<Card>
-  <CardHeader documentation={DOCS_URL(`/usage/admin-sync`)}>
-    Admin Sync
-  </CardHeader>
-
-  <p class="mb-8">
-    Your instance will have an admin login that matches your pockethost.io
-    login.
-  </p>
-
-  <ErrorMessage message={errorMessage} />
-
-  <label class="label cursor-pointer justify-center gap-4">
-    <span class="label-text">Admin Sync</span>
-    <input
-      type="checkbox"
-      class="toggle toggle-warning"
-      checked={!!syncAdmin}
-      on:change={handleChange}
-    />
-  </label>
-</Card>
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/DevMode.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/settings/DevMode.svelte
deleted file mode 100644
index d57ffd0f..00000000
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/DevMode.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts">
-  import Card from '$components/cards/Card.svelte'
-  import CardHeader from '$components/cards/CardHeader.svelte'
-  import { DOCS_URL } from '$src/env'
-  import { client } from '$src/pocketbase-client'
-  import { instance } from '../store'
-  import ErrorMessage from './ErrorMessage.svelte'
-
-  const { updateInstance } = client()
-
-  $: ({ id, dev } = $instance)
-
-  let errorMessage = ''
-
-  const handleChange = (e: Event) => {
-    const target = e.target as HTMLInputElement
-    const isChecked = target.checked
-
-    // Update the database with the new value
-    updateInstance({ id, fields: { dev: isChecked } })
-      .then(() => 'saved')
-      .catch((error) => {
-        errorMessage = error.data.message || error.message
-      })
-  }
-</script>
-
-<Card>
-  <CardHeader documentation={DOCS_URL(`/usage/dev-mode`)}>Dev Mode</CardHeader>
-
-  <p class="mb-8">
-    Starting with PocketBase v0.20.1, your instance will show debugging output
-    in the instance logs. Performance is degraded while Dev Mode is active.
-  </p>
-
-  <ErrorMessage message={errorMessage} />
-
-  <label class="label cursor-pointer justify-center gap-4">
-    <span class="label-text">Dev Mode</span>
-    <input
-      type="checkbox"
-      class="toggle toggle-warning"
-      checked={!!dev}
-      on:change={handleChange}
-    />
-  </label>
-</Card>
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/Maintenance.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/settings/Maintenance.svelte
deleted file mode 100644
index 2fdb0c6b..00000000
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/Maintenance.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-  import Card from '$components/cards/Card.svelte'
-  import CardHeader from '$components/cards/CardHeader.svelte'
-  import { DOCS_URL } from '$src/env'
-  import { client } from '$src/pocketbase-client'
-  import { userStore } from '$util/stores'
-  import { instance } from '../store'
-  import ErrorMessage from './ErrorMessage.svelte'
-
-  const { updateInstance } = client()
-
-  let errorMessage = ''
-
-  $: ({ id, maintenance, notifyMaintenanceMode } = $instance)
-
-  const handleMaintenanceChange = (e: Event) => {
-    const target = e.target as HTMLInputElement
-    const maintenance = target.checked
-
-    // Update the database with the new value
-    updateInstance({ id, fields: { maintenance } })
-      .then(() => 'saved')
-      .catch((error) => {
-        error.data.message || error.message
-      })
-  }
-
-  const handleNotifyMaintenanceChange = (e: Event) => {
-    const target = e.target as HTMLInputElement
-    const notifyMaintenanceMode = target.checked
-
-    // Update the database with the new value
-    updateInstance({ id, fields: { notifyMaintenanceMode } })
-      .then(() => 'saved')
-      .catch((error) => {
-        error.data.message || error.message
-      })
-  }
-</script>
-
-<Card>
-  <CardHeader documentation={DOCS_URL(`/usage/maintenance`)}>
-    Maintenance Mode
-  </CardHeader>
-
-  <p class="mb-8">
-    Your PocketHost instance will not be accessible while in maintenance mode.
-    Use this when you are upgrading, downgrading, or backing up your data.
-  </p>
-
-  <ErrorMessage message={errorMessage} />
-
-  <label class="label cursor-pointer justify-center gap-4">
-    <span class="label-text">Maintenance Mode</span>
-    <input
-      type="checkbox"
-      class="toggle toggle-warning"
-      checked={!!maintenance}
-      on:change={handleMaintenanceChange}
-    />
-  </label>
-
-  <label class="label cursor-pointer justify-center gap-4">
-    <span class="label-text">Email on Maintenance Mode</span>
-    <input
-      type="checkbox"
-      class="toggle toggle-success"
-      checked={!!notifyMaintenanceMode}
-      on:change={handleNotifyMaintenanceChange}
-    />
-  </label>
-  {#if !$userStore?.notifyMaintenanceMode}
-    <div class="text-error">
-      Warning: Maintenance Mode is globally deactivated. This setting will have
-      no effect. See account settings.
-    </div>
-  {/if}
-</Card>
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/VersionChange/VersionChange.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/version/+page.svelte
similarity index 68%
rename from packages/dashboard/src/routes/app/instances/[instanceId]/settings/VersionChange/VersionChange.svelte
rename to packages/dashboard/src/routes/app/instances/[instanceId]/version/+page.svelte
index 22a569f1..1b210d67 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/VersionChange/VersionChange.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/version/+page.svelte
@@ -3,7 +3,7 @@
   import CardHeader from '$components/cards/CardHeader.svelte'
   import { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase-client'
-  import { instance } from '../../store'
+  import { instance } from '../store'
   import VersionPicker from './VersionPicker.svelte'
   import AlertBar from '$components/AlertBar.svelte'
 
@@ -58,35 +58,39 @@
   }
 </script>
 
-<Card>
-  <CardHeader documentation={DOCS_URL(`/usage/upgrading`)}>
-    Version Change
-  </CardHeader>
+<CardHeader documentation={DOCS_URL(`/usage/upgrading`)}>
+  Version Change
+</CardHeader>
 
-  <p class="mb-8">
-    Changing your version can only be done when the instance is in maintenance
-    mode. We recommend you <strong>do a full backup</strong> before making a
-    change. We support
-    <a href="https://github.com/pocketbase/pocketbase/releases" class="link"
-      >every release</a
-    > of PocketBase.
-  </p>
+{#if !maintenance}
+  <AlertBar
+    message="Your instance must be powered off to change the version."
+    type="error"
+  />
+{/if}
 
-  <AlertBar message={errorMessage} type="error" />
+<div class="mb-8">
+  We recommend you <strong>do a full backup</strong>
+  before making a change. We support the latest patch of
+  <a href="https://github.com/pocketbase/pocketbase/releases" class="link"
+    >every minor release</a
+  > of PocketBase.
+</div>
 
-  <form
-    class="flex change-version-form-container-query gap-4"
-    on:submit={handleSave}
+<AlertBar message={errorMessage} type="error" />
+
+<form
+  class="flex change-version-form-container-query gap-4"
+  on:submit={handleSave}
+>
+  <VersionPicker bind:selectedVersion />
+
+  <button
+    type="submit"
+    class="btn btn-error"
+    disabled={!maintenance || isButtonDisabled}>Change Version</button
   >
-    <VersionPicker bind:selectedVersion disabled={!maintenance} />
-
-    <button
-      type="submit"
-      class="btn btn-error"
-      disabled={!maintenance || isButtonDisabled}>Change Version</button
-    >
-  </form>
-</Card>
+</form>
 
 <style>
   .change-version-form-container-query {
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/VersionChange/VersionPicker.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/version/VersionPicker.svelte
similarity index 88%
rename from packages/dashboard/src/routes/app/instances/[instanceId]/settings/VersionChange/VersionPicker.svelte
rename to packages/dashboard/src/routes/app/instances/[instanceId]/version/VersionPicker.svelte
index 1daa4962..6a0a5c2f 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/VersionChange/VersionPicker.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/version/VersionPicker.svelte
@@ -10,8 +10,12 @@
 
   // Function to fetch versions - replace with your actual fetch logic
   async function fetchVersions(): Promise<string[]> {
-    const { versions } = await client().client.send(`/api/versions`, {})
-    return versions
+    const { versions } = await client().client.send<{ versions: string[] }>(
+      `/api/versions`,
+      {},
+    )
+
+    return versions.filter((v) => v.endsWith('*'))
   }
 
   onMount(() => {
diff --git a/packages/dashboard/src/routes/dashboard/InstanceList.svelte b/packages/dashboard/src/routes/dashboard/InstanceList.svelte
index ff35931a..a369761b 100644
--- a/packages/dashboard/src/routes/dashboard/InstanceList.svelte
+++ b/packages/dashboard/src/routes/dashboard/InstanceList.svelte
@@ -34,7 +34,7 @@
           <input
             type="checkbox"
             class="toggle {instance.maintenance
-              ? 'toggle-error'
+              ? 'bg-red-500 hover:bg-red-500'
               : 'toggle-success'}"
             checked={!instance.maintenance}
             on:change={handleMaintenanceChange(instance.id)}
@@ -42,8 +42,7 @@
         </div>
       </div>
 
-      <div class="flex flex-wrap gap-2"></div>
-      <div class="card-actions">
+      <div class="card-actions flex justify-between mt-5">
         <a href={`/app/instances/${instance.id}`} class="btn btn-primary">
           <i class="fa-regular fa-circle-info"></i>
           <span>Details</span>
diff --git a/packages/dashboard/tailwind.config.cjs b/packages/dashboard/tailwind.config.cjs
index 6cec8e7c..2a03e2bf 100644
--- a/packages/dashboard/tailwind.config.cjs
+++ b/packages/dashboard/tailwind.config.cjs
@@ -1,7 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{svelte,js,ts,md}'],
-  safelist: [`lg:pl-72`, `toggle-error`, `toggle-success`],
+  safelist: [
+    'lg:pl-72',
+    {
+      pattern: /(toggle|text|bg)-(error|success|warning|red-500)/,
+      variants: ['responsive', 'hover'],
+    },
+  ],
   theme: {
     extend: {
       animation: {