diff --git a/libs/components/Dashboard/Settings/Forms/DatabaseForm.vue b/libs/components/Dashboard/Settings/Forms/DatabaseForm.vue
new file mode 100644
index 0000000000..9cd43be710
--- /dev/null
+++ b/libs/components/Dashboard/Settings/Forms/DatabaseForm.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <form>
+    <main class="border-b border-gray-900/10">
+      <!-- Settings forms -->
+      <div class="divide-y divide-gray-900/10">
+        <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
+          <div>
+            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
+              MySQL
+            </h2>
+            <p class="mt-1 text-sm leading-6 text-gray-600">
+              Update your MySQL driver settings.
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
+              <div class="sm:col-span-3">
+                <label
+                  for="mysql-host"
+                  class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+                >Host</label>
+                <div class="mt-2">
+                  <input
+                    id="mysql-host"
+                    type="text"
+                    name="name"
+                    value="stacks"
+                    class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
+                  >
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label
+                  for="mysql-port"
+                  class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+                >Port</label>
+                <div class="mt-2">
+                  <input
+                    id="mysql-port"
+                    type="text"
+                    name="name"
+                    value="3306"
+                    class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
+                  >
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label
+                  for="mysql-username"
+                  class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+                >Username</label>
+                <div class="mt-2">
+                  <input
+                    id="mysql-username"
+                    type="text"
+                    value="root"
+                    class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
+                  >
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label
+                  for="mysql-password"
+                  class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+                >Password</label>
+                <div class="mt-2">
+                  <input
+                    id="mysql-password"
+                    type="text"
+                    name="last-name"
+                    autocomplete="family-name"
+                    class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
+                  >
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <label
+                  for="mysql-password"
+                  class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+                >Database</label>
+                <div class="mt-2">
+                  <input
+                    id="mysql-password"
+                    type="text"
+                    name="last-name"
+                    autocomplete="family-name"
+                    class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
+          <div>
+            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
+              SQLite
+            </h2>
+            <p class="mt-1 text-sm leading-6 text-gray-600">
+              Update your SQLite driver settings.
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
+              <div class="sm:col-span-3">
+                <label
+                  for="sqlite-host"
+                  class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+                >Host</label>
+                <div class="mt-2">
+                  <input
+                    id="sqlite-host"
+                    type="text"
+                    name="name"
+                    value="127.0.0.1"
+                    class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
+                  >
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label
+                  for="sqlite-prefix"
+                  class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+                >Prefix</label>
+                <div class="mt-2">
+                  <input
+                    id="sqlite-prefix"
+                    type="text"
+                    name="name"
+                    value="sqlite"
+                    class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
+                  >
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <label
+                  for="mysql-password"
+                  class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+                >Database</label>
+                <div class="mt-2">
+                  <input
+                    id="mysql-password"
+                    type="text"
+                    name="last-name"
+                    autocomplete="family-name"
+                    value="stacks"
+                    class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <div class="mt-6 flex items-center justify-end gap-x-6">
+      <button type="button" class="text-sm font-semibold leading-6 text-gray-900">
+        Cancel
+      </button>
+      <Button
+        type="submit"
+        class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+      >
+        Save
+      </Button>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/libs/components/Dashboard/Settings/SettingsFormManager.vue b/libs/components/Dashboard/Settings/SettingsFormManager.vue
index 2965094405..2e9e13b384 100644
--- a/libs/components/Dashboard/Settings/SettingsFormManager.vue
+++ b/libs/components/Dashboard/Settings/SettingsFormManager.vue
@@ -5,6 +5,7 @@ import AppForm from './Forms/AppForm.vue'
 import CacheForm from './Forms/CacheForm.vue'
 import CliForm from './Forms/CLIForm.vue'
 import CloudForm from './Forms/CloudForm.vue'
+import DatabaseForm from './Forms/DatabaseForm.vue'
 
 const props = defineProps({
   name: String,
@@ -120,6 +121,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
         <template v-else-if="name === 'cache'"><CacheForm /></template>
         <template v-else-if="name === 'cli'"><CliForm /></template>
         <template v-else-if="name === 'cloud'"><CloudForm /></template>
+        <template v-else-if="name === 'database'"><DatabaseForm /></template>
         <template v-else>
           <div class="text-center">
             <div class="i-heroicons-cog-8-tooth text-gray-400 w-12 h-12 dark:text-gray-200 transition-all duration-150 ease-in-out" />
diff --git a/libs/components/Dashboard/SettingsSidebar.vue b/libs/components/Dashboard/SettingsSidebar.vue
index 632bf268d8..2b14d5c692 100644
--- a/libs/components/Dashboard/SettingsSidebar.vue
+++ b/libs/components/Dashboard/SettingsSidebar.vue
@@ -71,7 +71,7 @@
         <li>
           <RouterLink to="database" class="sidebar-links group flex items-center justify-between">
             <div class="flex items-center gap-x-2">
-              <div class="i-heroicons-square-3-stack-3d text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
+              <div class="i-heroicons-circle-stack text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
               Database
             </div>
             <div class="i-heroicons-chevron-right text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out self-end" />
diff --git a/resources/views/dashboard/settings/database.vue b/resources/views/dashboard/settings/database.vue
deleted file mode 100644
index 60748afa68..0000000000
--- a/resources/views/dashboard/settings/database.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  <main>
-    <SettingsHeader />
-
-    <!-- Settings forms -->
-    <div class="divide-y divide-white/5">
-      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
-        <div>
-          <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
-            MySQL
-          </h2>
-          <p class="mt-1 text-sm leading-6 text-gray-600">
-            Update your MySQL driver settings.
-          </p>
-        </div>
-
-        <form class="md:col-span-2">
-          <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
-            <div class="sm:col-span-3">
-              <label
-                for="mysql-host"
-                class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
-              >Host</label>
-              <div class="mt-2">
-                <input
-                  id="mysql-host"
-                  type="text"
-                  name="name"
-                  value="stacks"
-                  class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
-                >
-              </div>
-            </div>
-
-            <div class="sm:col-span-3">
-              <label
-                for="mysql-port"
-                class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
-              >Port</label>
-              <div class="mt-2">
-                <input
-                  id="mysql-port"
-                  type="text"
-                  name="name"
-                  value="3306"
-                  class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
-                >
-              </div>
-            </div>
-
-            <div class="sm:col-span-3">
-              <label
-                for="mysql-username"
-                class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
-              >Username</label>
-              <div class="mt-2">
-                <input
-                  id="mysql-username"
-                  type="text"
-                  value="root"
-                  class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
-                >
-              </div>
-            </div>
-
-            <div class="sm:col-span-3">
-              <label
-                for="mysql-password"
-                class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
-              >Password</label>
-              <div class="mt-2">
-                <input
-                  id="mysql-password"
-                  type="text"
-                  name="last-name"
-                  autocomplete="family-name"
-                  class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
-                >
-              </div>
-            </div>
-
-            <div class="sm:col-span-full">
-              <label
-                for="mysql-password"
-                class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
-              >Database</label>
-              <div class="mt-2">
-                <input
-                  id="mysql-password"
-                  type="text"
-                  name="last-name"
-                  autocomplete="family-name"
-                  class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
-                >
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-
-      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
-        <div>
-          <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
-            SQLite
-          </h2>
-          <p class="mt-1 text-sm leading-6 text-gray-600">
-            Update your SQLite driver settings.
-          </p>
-        </div>
-
-        <form class="md:col-span-2">
-          <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
-            <div class="sm:col-span-3">
-              <label
-                for="sqlite-host"
-                class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
-              >Host</label>
-              <div class="mt-2">
-                <input
-                  id="sqlite-host"
-                  type="text"
-                  name="name"
-                  value="127.0.0.1"
-                  class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
-                >
-              </div>
-            </div>
-
-            <div class="sm:col-span-3">
-              <label
-                for="sqlite-prefix"
-                class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
-              >Prefix</label>
-              <div class="mt-2">
-                <input
-                  id="sqlite-prefix"
-                  type="text"
-                  name="name"
-                  value="sqlite"
-                  class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
-                >
-              </div>
-            </div>
-
-            <div class="sm:col-span-full">
-              <label
-                for="mysql-password"
-                class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
-              >Database</label>
-              <div class="mt-2">
-                <input
-                  id="mysql-password"
-                  type="text"
-                  name="last-name"
-                  autocomplete="family-name"
-                  value="stacks"
-                  class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
-                >
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  </main>
-</template>
diff --git a/storage/framework/types/components.d.ts b/storage/framework/types/components.d.ts
index 16bb3f13ea..e5cb1fbb42 100644
--- a/storage/framework/types/components.d.ts
+++ b/storage/framework/types/components.d.ts
@@ -23,6 +23,7 @@ declare module 'vue' {
     ComingSoon: typeof import('./../../../libs/components/Marketing/ComingSoon.vue')['default']
     Container: typeof import('./../../../libs/components/Container.vue')['default']
     Counter: typeof import('./../../../libs/components/Buttons/Counter.vue')['default']
+    DatabaseForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/DatabaseForm.vue')['default']
     DeploymentHistory: typeof import('./../../../libs/components/Dashboard/Deployments/DeploymentHistory.vue')['default']
     DeploymentList: typeof import('./../../../libs/components/Dashboard/Deployments/DeploymentList.vue')['default']
     DeployScript: typeof import('./../../../libs/components/Dashboard/Deployments/DeployScript.vue')['default']
diff --git a/storage/framework/types/dashboard-router.d.ts b/storage/framework/types/dashboard-router.d.ts
index b2ddb3df91..e302cb81de 100644
--- a/storage/framework/types/dashboard-router.d.ts
+++ b/storage/framework/types/dashboard-router.d.ts
@@ -42,7 +42,6 @@ declare module 'vue-router/auto-routes' {
     '/requests/': RouteRecordInfo<'/requests/', '/requests', Record<never, never>, Record<never, never>>,
     '/settings/[name]': RouteRecordInfo<'/settings/[name]', '/settings/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
     '/settings/billing': RouteRecordInfo<'/settings/billing', '/settings/billing', Record<never, never>, Record<never, never>>,
-    '/settings/database': RouteRecordInfo<'/settings/database', '/settings/database', Record<never, never>, Record<never, never>>,
     '/settings/mail': RouteRecordInfo<'/settings/mail', '/settings/mail', Record<never, never>, Record<never, never>>,
     '/settings/queue': RouteRecordInfo<'/settings/queue', '/settings/queue', Record<never, never>, Record<never, never>>,
     '/settings/services': RouteRecordInfo<'/settings/services', '/settings/services', Record<never, never>, Record<never, never>>,