diff --git a/bun.lockb b/bun.lockb
index c6fcfd8cb9..b09affcb22 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/libs/components/Dashboard/Settings/Forms/AIForm.vue b/libs/components/Dashboard/Settings/Forms/AIForm.vue
new file mode 100644
index 0000000000..19377d69f8
--- /dev/null
+++ b/libs/components/Dashboard/Settings/Forms/AIForm.vue
@@ -0,0 +1,271 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <form>
+    <div class="space-y-12">
+      <div class="border-b border-gray-900/10 pb-12">
+        <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+          <div class="sm:col-span-3">
+            <label for="default-config" class="block text-sm font-medium leading-6 text-gray-900">Deploy AI
+              Endpoints</label>
+            <div class="mt-2">
+              <!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
+              <button
+                type="button"
+                class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
+                role="switch" aria-checked="false"
+              >
+                <span class="sr-only">Deploy</span>
+                <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
+                <span
+                  aria-hidden="true"
+                  class="pointer-events-none inline-block h-5 w-5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                />
+              </button>
+            </div>
+          </div>
+
+          <div class="sm:col-span-3"></div>
+
+          <div class="sm:col-span-3">
+            <div>
+              <label for="combobox" class="block text-sm font-medium leading-6 text-gray-900">Models</label>
+              <div class="relative mt-2">
+                <input
+                  id="combobox" type="text"
+                  class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  role="combobox" aria-controls="options" aria-expanded="false"
+                  value="meta.llama2-70b-chat-v1"
+                >
+                <button
+                  type="button"
+                  class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none"
+                >
+                  <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path
+                      fill-rule="evenodd"
+                      d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </button>
+
+                <ul
+                  id="options"
+                  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                  role="listbox"
+                >
+                  <!--
+                    Combobox option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
+
+                    Active: "text-white bg-indigo-600", Not Active: "text-gray-900"
+                  -->
+                  <li
+                    id="option-2"
+                    class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
+                    role="option" tabindex="-1"
+                  >
+                    <div class="flex items-center">
+                      <!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
+                      <span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
+                      <!-- Selected: "font-semibold" -->
+                      <span class="ml-3 truncate">
+                        amazon.titan-embed-text-v1
+                        <span class="sr-only"> is offline</span>
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    id="option-1"
+                    class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
+                    role="option" tabindex="-1"
+                  >
+                    <div class="flex items-center">
+                      <!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
+                      <span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-green-400" aria-hidden="true" />
+                      <!-- Selected: "font-semibold" -->
+                      <span class="ml-3 truncate">
+                        amazon.titan-text-express-v1
+                        <span class="sr-only"> is online</span>
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    id="option-1"
+                    class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
+                    role="option" tabindex="-1"
+                  >
+                    <div class="flex items-center">
+                      <!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
+                      <span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-green-400" aria-hidden="true" />
+                      <!-- Selected: "font-semibold" -->
+                      <span class="ml-3 truncate">
+                        amazon.titan-text-lite-v1
+                        <span class="sr-only"> is online</span>
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    id="option-2"
+                    class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
+                    role="option" tabindex="-1"
+                  >
+                    <div class="flex items-center">
+                      <!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
+                      <span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
+                      <!-- Selected: "font-semibold" -->
+                      <span class="ml-3 truncate">
+                        amazon.titan-embed-image-v1
+                        <span class="sr-only"> is offline</span>
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    id="option-2"
+                    class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
+                    role="option" tabindex="-1"
+                  >
+                    <div class="flex items-center">
+                      <!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
+                      <span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
+                      <!-- Selected: "font-semibold" -->
+                      <span class="ml-3 truncate">
+                        amazon.titan-image-generator-v1
+                        <span class="sr-only"> is offline</span>
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    id="option-2"
+                    class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
+                    role="option" tabindex="-1"
+                  >
+                    <div class="flex items-center">
+                      <!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
+                      <span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
+                      <!-- Selected: "font-semibold" -->
+                      <span class="ml-3 truncate">
+                        anthropic.claude-v1
+                        <span class="sr-only"> is offline</span>
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    id="option-2"
+                    class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
+                    role="option" tabindex="-1"
+                  >
+                    <div class="flex items-center">
+                      <!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
+                      <span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
+                      <!-- Selected: "font-semibold" -->
+                      <span class="ml-3 truncate">
+                        anthropic.claude-v2
+                        <span class="sr-only"> is offline</span>
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    id="option-2"
+                    class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
+                    role="option" tabindex="-1"
+                  >
+                    <div class="flex items-center">
+                      <!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
+                      <span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
+                      <!-- Selected: "font-semibold" -->
+                      <span class="ml-3 truncate">
+                        anthropic.claude-v2:1
+                        <span class="sr-only"> is offline</span>
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    id="option-2"
+                    class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
+                    role="option" tabindex="-1"
+                  >
+                    <div class="flex items-center">
+                      <!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
+                      <span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
+                      <!-- Selected: "font-semibold" -->
+                      <span class="ml-3 truncate">
+                        anthropic.claude-instant-v1
+                        <span class="sr-only"> is offline</span>
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    id="option-2"
+                    class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
+                    role="option" tabindex="-1"
+                  >
+                    <div class="flex items-center">
+                      <!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
+                      <span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
+                      <!-- Selected: "font-semibold" -->
+                      <span class="ml-3 truncate">
+                        meta.llama2-13b-chat-v1
+                        <span class="sr-only"> is offline</span>
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    id="option-0"
+                    class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
+                    role="option" tabindex="-1"
+                  >
+                    <div class="flex items-center">
+                      <!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
+                      <span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-green-400" aria-hidden="true" />
+                      <!-- Selected: "font-semibold" -->
+                      <span class="ml-3 truncate">
+                        amazon.titan-text-express-v1
+                        <span class="sr-only"> is online</span>
+                      </span>
+                    </div>
+
+                    <!--
+                      Checkmark, only display for selected option.
+
+                      Active: "text-white", Not Active: "text-indigo-600"
+                    -->
+                    <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600">
+                      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path
+                          fill-rule="evenodd"
+                          d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+                          clip-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                  </li>
+
+                  <!-- More items... -->
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <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/Forms/CacheForm.vue b/libs/components/Dashboard/Settings/Forms/CacheForm.vue
new file mode 100644
index 0000000000..717ac68673
--- /dev/null
+++ b/libs/components/Dashboard/Settings/Forms/CacheForm.vue
@@ -0,0 +1,263 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <main>
+    <!-- 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">
+            DynamoDB
+          </h2>
+          <p class="mt-1 text-sm leading-6 text-gray-600">
+            Update your dynamoDB 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="dynamo-host"
+                class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+              >Host</label>
+              <div class="mt-2">
+                <input
+                  id="dynamo-host"
+                  type="text"
+                  name="name"
+                  value="stacks.s3.amazonaws.com"
+                  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="dynamo-key"
+                class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+              >Key</label>
+              <div class="mt-2">
+                <input
+                  id="dynamo-key"
+                  type="text"
+                  name="name"
+                  value="kldsanko3njksdasjfasdn2m"
+                  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="dynamo-secret"
+                class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+              >Secret</label>
+              <div class="mt-2">
+                <input
+                  id="dynamo-secret"
+                  type="text"
+                  name="last-name"
+                  autocomplete="family-name"
+                  value="kldsanko3njksdasjfasdn2m"
+                  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="dynamo-region"
+                class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+              >Region</label>
+              <div class="mt-2">
+                <input
+                  id="dynamo-region"
+                  type="text"
+                  name="last-name"
+                  value="us-east-1"
+                  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-3">
+              <label
+                for="dynamo-table"
+                class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+              >Table</label>
+              <div class="mt-2">
+                <input
+                  id="dynamo-table"
+                  type="text"
+                  name="last-name"
+                  autocomplete="family-name"
+                  value="cache"
+                  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">
+            Memcached
+          </h2>
+          <p class="mt-1 text-sm leading-6 text-gray-600">
+            Update your memcached 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="col-span-full">
+              <label
+                for="memcached-persistent-id"
+                class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+              >Persistent ID</label>
+              <div class="mt-2">
+                <input
+                  id="memcached-persistent-id"
+                  type="text"
+                  value="hj3jknkjh1kjh5"
+                  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="col-span-3">
+              <label
+                for="memcached-username"
+                class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+              >Username</label>
+              <div class="mt-2">
+                <input
+                  id="memcached-username"
+                  name="new_password"
+                  type="text"
+                  value="username"
+                  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="col-span-3">
+              <label
+                for="memcached-password"
+                class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+              >Password</label>
+              <div class="mt-2">
+                <input
+                  id="memcached-password"
+                  type="password"
+                  value="test@123"
+                  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="col-span-3">
+              <label
+                for="memcached-host"
+                class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+              >Host</label>
+              <div class="mt-2">
+                <input
+                  id="memcached-host"
+                  type="text"
+                  value="stacks.s3.amazonaws.com"
+                  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="col-span-3">
+              <label
+                for="memcached-port"
+                class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+              >Port</label>
+              <div class="mt-2">
+                <input
+                  id="memcached-port"
+                  type="text"
+                  value="11211"
+                  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">
+            Redis
+          </h2>
+          <p class="mt-1 text-sm leading-6 text-gray-600">
+            Update your redis 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="col-span-3">
+              <label
+                for="redis-host"
+                class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+              >Host</label>
+              <div class="mt-2">
+                <input
+                  id="redis-host"
+                  name="new_password"
+                  type="text"
+                  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="col-span-3">
+              <label
+                for="redis-port"
+                class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+              >Port</label>
+              <div class="mt-2">
+                <input
+                  id="redis-port"
+                  type="text"
+                  value="6379"
+                  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="col-span-full">
+              <label
+                for="redis-password"
+                class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
+              >Password</label>
+              <div class="mt-2">
+                <input
+                  id="redis-password"
+                  type="password"
+                  value=""
+                  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>
+
+<style scoped>
+
+</style>
diff --git a/libs/components/Dashboard/Settings/SettingsFormManager.vue b/libs/components/Dashboard/Settings/SettingsFormManager.vue
new file mode 100644
index 0000000000..f380f94fae
--- /dev/null
+++ b/libs/components/Dashboard/Settings/SettingsFormManager.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import AIForm from './Forms/AIForm.vue'
+
+const props = defineProps({
+  name: String,
+})
+const { name } = toRefs(props)
+const options = [
+  {
+    key: 'ai',
+    label: 'AI',
+  },
+  {
+    key: 'analytics',
+    label: 'Analytics',
+  },
+  {
+    key: 'app',
+    label: 'App',
+  },
+  {
+    key: 'cache',
+    label: 'Cache',
+  },
+  {
+    key: 'cli',
+    label: 'CLI',
+  },
+  {
+    key: 'cloud',
+    label: 'Cloud',
+  },
+  {
+    key: 'database',
+    label: 'Database',
+  },
+  {
+    key: 'dns',
+    label: 'DNS',
+  },
+  {
+    key: 'email',
+    label: 'Email',
+  },
+  {
+    key: 'file-system',
+    label: 'File System',
+  },
+  {
+    key: 'hashing',
+    label: 'Hashing',
+  },
+  {
+    key: 'languages',
+    label: 'Languages',
+  },
+  {
+    key: 'library',
+    label: 'Library',
+  },
+  {
+    key: 'native',
+    label: 'Native',
+  },
+  {
+    key: 'mail',
+    label: 'Mail',
+  },
+  {
+    key: 'queue',
+    label: 'Queue',
+  },
+  {
+    key: 'search-engine',
+    label: 'Search Engine',
+  },
+  {
+    key: 'security',
+    label: 'Security',
+  },
+  {
+    key: 'services',
+    label: 'Services',
+  },
+  {
+    key: 'storage',
+    label: 'Storage',
+  },
+  {
+    key: 'team',
+    label: 'Team',
+  },
+  {
+    key: 'ui',
+    label: 'UI',
+  },
+]
+const pageTitle = computed < String > (() => options.find(option => option.key === name.value)?.label || name.value)
+</script>
+
+<template>
+  <main>
+    <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2 px-4 py-6">
+      <h2 class="text-base font-semibold leading-7 text-gray-900">
+        {{ pageTitle }} Configuration
+      </h2>
+      <p class="mt-1 text-sm leading-6 text-gray-600">
+        This configuration defines all of your {{ pageTitle }} options.
+      </p>
+
+      <div class="mt-10">
+        <template v-if="name === 'ai'">
+          <AIForm />
+        </template>
+        <template v-else-if="name === 'analytics'">
+          TODO Analytics
+        </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" />
+            <h3 class="mt-2 text-sm font-semibold text-gray-900">
+              Settings <span class="font-bold">{{ pageTitle }}</span> Form not created yet
+            </h3>
+            <p class="mt-1 text-sm text-gray-500">
+              Please ask the maintenance team to fix.
+            </p>
+          </div>
+        </template>
+      </div>
+
+    </div>
+  </main>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/libs/components/Dashboard/SettingsSidebar.vue b/libs/components/Dashboard/SettingsSidebar.vue
index e6502cffed..7157f64dda 100644
--- a/libs/components/Dashboard/SettingsSidebar.vue
+++ b/libs/components/Dashboard/SettingsSidebar.vue
@@ -1,426 +1,216 @@
-<script setup lang="ts">
-import {SettingsMenuOption} from "stacks/types";
-
-const props = defineProps<{ menuOptions?: SettingsMenuOption[] }>()
-
-const menuOptions = computed(() => props.menuOptions || [])
-</script>
-
 <template>
-  <header class="lg:w-64 border-b border-gray-200 dark:border-gray-600 p-4 sm:p-6 lg:p-8">
-
+  <header class="lg:w-92 border-b border-gray-200 dark:border-gray-600 p-4 sm:p-6 lg:p-8">
     <div class="bg-white rounded-lg shadow-sm p-4 w-full">
-      <h3 class="md:text-sm font-semibold text-gray-700">Stacks Settings</h3>
-      <p class="mt-2 text-sm text-gray-500">List of available settings</p>
+      <h3 class="md:text-sm font-semibold text-gray-700">
+        Stacks Settings
+      </h3>
+      <p class="mt-2 text-sm text-gray-500">
+        List of available settings
+      </p>
     </div>
     <!-- Side navigation -->
-    <nav class="flex overflow-y-auto py-4">
+    <nav class="mt-4 flex flex-1 flex-col bg-white rounded-lg shadow-sm p-4 w-full">
       <ul
         role="list"
-        class="flex-col min-w-full flex-none gap-y-6 text-sm font-semibold leading-6 text-gray-600"
+        class="-mx-2 mt-2 space-y-1"
       >
         <li>
-          <RouterLink to="/settings/ai">
-            AI
-          </RouterLink>
-        </li>
-        <li>
-          <RouterLink to="/settings/analytics">
-            Analytics
-          </RouterLink>
-        </li>
-        <li>
-          <RouterLink to="/settings/app">
-            App
-          </RouterLink>
-        </li>
-        <li>
-          <RouterLink to="/settings/cache">
-            Cache
-          </RouterLink>
-        </li>
-        <li>
-          <RouterLink to="/settings/cli">
-            CLI
+          <RouterLink to="ai" class="sidebar-links group flex items-center justify-between">
+            <div class="flex items-center gap-x-2">
+              <div class="i-heroicons-cpu-chip text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
+              AI
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/cli">
-            Cloud
+          <RouterLink to="analytics" 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" />
+              Analytics
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/database">
-            Database
+          <RouterLink to="app" 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" />
+              App
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/dns">
-            DNS
+          <RouterLink to="cache" 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" />
+              Cache
+            </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" />
           </RouterLink>
         </li>
-        <!-- <li><RouterLink to="/settings/docs">Docs</RouterLink></li> -->
         <li>
-          <RouterLink to="/settings/email">
-            Email
+          <RouterLink to="cli" 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" />
+              CLI
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/file-systems">
-            File Systems
+          <RouterLink to="cloud" 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" />
+              Cloud
+            </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" />
           </RouterLink>
         </li>
-        <!-- <li><RouterLink to="/settings/storage">git</RouterLink></li> -->
         <li>
-          <RouterLink to="/settings/hashing">
-            Hashing
+          <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" />
+              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" />
           </RouterLink>
         </li>
         <li>
-          <!-- ./lang/* -->
-          <RouterLink to="/settings/languages">
-            Languages
+          <RouterLink to="dns" 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" />
+              DNS
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/library">
-            Library
+          <RouterLink to="email" 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" />
+              Email
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/native">
-            Native
+          <RouterLink to="file-system" 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" />
+              File System
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/mail">
-            Mail
+          <RouterLink to="hashing" 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" />
+              Hashing
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/queue">
-            Queue
+          <RouterLink to="languages" 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" />
+              Languages
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/search-engine">
-            Search Engine
+          <RouterLink to="library" 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" />
+              Library
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/security">
-            Security
+          <RouterLink to="native" 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" />
+              Native
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/services">
-            Services
+          <RouterLink to="mail" 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" />
+              Mail
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/storage">
-            Storage
+          <RouterLink to="queue" 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" />
+              Queue
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/team">
-            Team
+          <RouterLink to="search-engine" 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" />
+              Search Engine
+            </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" />
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="/settings/ui">
-            UI
-          </RouterLink>
-        </li>
-      </ul>
-    </nav>
-
-    <nav class="flex flex-1 flex-col">
-      <ul
-        role="list"
-        class="-mx-2 mt-2 space-y-1"
-      >
-        <li v-for="(menu, index) in menuOptions" :key="index">
-          <RouterLink
-            :to="menu.path"
-            class="sidebar-links group"
-          >
-            <div class="i-heroicons-rocket-launch text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-            {{menu.label}}
+          <RouterLink to="security" 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" />
+              Security
+            </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" />
           </RouterLink>
         </li>
-      </ul>
-
-      <ul
-        role="list"
-        class="flex flex-1 flex-col gap-y-8"
-      >
-        <li>
-          <ul
-            role="list"
-            class="-mx-2 mt-2 space-y-1"
-          >
-            <li>
-              <RouterLink
-                to="/"
-                class="sidebar-links group"
-              >
-                <div class="i-heroicons-home text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-                Dashboard
-              </RouterLink>
-            </li>
-          </ul>
-        </li>
-
         <li>
-          <div class="flex justify-between items-center">
-            <div class="text-xs font-semibold leading-6 text-gray-400">
-              Library
+          <RouterLink to="service" 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" />
+              Service
             </div>
-
-            <div class="i-heroicons-chevron-down text-gray-300 w-4 h-4 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-          </div>
-
-          <ul
-            role="list"
-            class="-mx-2 mt-2 space-y-1"
-          >
-            <li>
-              <RouterLink
-                to="/functions"
-                class="sidebar-links group"
-              >
-                <div class="i-heroicons-code-bracket text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-                Functions
-              </RouterLink>
-            </li>
-
-            <li>
-              <RouterLink
-                to="/components"
-                class="sidebar-links group"
-              >
-                <div class="i-heroicons-puzzle-piece text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-                Components
-              </RouterLink>
-            </li>
-
-            <li>
-              <RouterLink
-                to="/releases"
-                class="sidebar-links group"
-              >
-                <div class="i-heroicons-building-library text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-                Releases
-              </RouterLink>
-            </li>
-          </ul>
+            <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" />
+          </RouterLink>
         </li>
-
         <li>
-          <div class="flex justify-between items-center">
-            <div class="text-xs font-semibold leading-6 text-gray-400">
-              App
+          <RouterLink to="storage" 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" />
+              Storage
             </div>
-
-            <div class="i-heroicons-chevron-down text-gray-300 w-4 h-4 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-          </div>
-
-          <ul
-            role="list"
-            class="-mx-2 mt-2 space-y-1"
-          >
-            <li>
-              <RouterLink
-                to="/deployments"
-                class="sidebar-links group"
-              >
-                <div class="i-heroicons-rocket-launch text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-                Deployments
-              </RouterLink>
-            </li>
-
-            <li>
-              <RouterLink
-                to="/requests"
-                class="sidebar-links group"
-              >
-                <div class="i-heroicons-magnifying-glass text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-                Requests
-              </RouterLink>
-            </li>
-
-            <li>
-              <RouterLink
-                to="/actions"
-                class="sidebar-links group"
-              >
-                <div class="i-heroicons-bolt text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-                Actions
-              </RouterLink>
-            </li>
-
-            <li>
-              <RouterLink
-                to="/commands"
-                class="sidebar-links group"
-              >
-                <div class="i-heroicons-command-line text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-                Commands
-              </RouterLink>
-            </li>
-
-            <li>
-              <RouterLink
-                to="/jobs"
-                class="sidebar-links group"
-              >
-                <div class="i-heroicons-queue-list text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-                Jobs
-              </RouterLink>
-            </li>
-
-            <li>
-              <RouterLink
-                to="/notifications"
-                class="sidebar-links group"
-              >
-                <div class="i-heroicons-envelope text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-                Notifications
-              </RouterLink>
-            </li>
-          </ul>
+            <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" />
+          </RouterLink>
         </li>
-
         <li>
-          <div class="flex justify-between items-center">
-            <div class="text-xs font-semibold leading-6 text-gray-400">
-              Models
+          <RouterLink to="team" 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" />
+              Team
             </div>
-
-            <div class="i-heroicons-chevron-down text-gray-300 w-4 h-4 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-          </div>
-
-          <ul
-            role="list"
-            class="-mx-2 mt-2 space-y-1"
-          >
-            <li>
-              <!-- Current: "bg-gray-50 text-blue-600", Default: "text-gray-700 hover:text-blue-600 hover:bg-gray-50" -->
-              <RouterLink
-                to="/models/users"
-                class="sidebar-links"
-              >
-                <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 dark:border-gray-600 group-hover:border-blue-600 group-hover:text-blue-600">U</span>
-                <span class="truncate">Users</span>
-              </RouterLink>
-            </li>
-
-            <li>
-              <RouterLink
-                to="/models/teams"
-                class="sidebar-links"
-              >
-                <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 dark:border-gray-600 group-hover:border-blue-600 group-hover:text-blue-600">T</span>
-                <span class="truncate">Teams</span>
-              </RouterLink>
-            </li>
-
-            <li>
-              <RouterLink
-                to="/models/subscribers"
-                class="sidebar-links"
-              >
-                <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 dark:border-gray-600 group-hover:border-blue-600 group-hover:text-blue-600">S</span>
-                <span class="truncate">Subscribers</span>
-              </RouterLink>
-            </li>
-          </ul>
+            <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" />
+          </RouterLink>
         </li>
-
         <li>
-          <div class="flex justify-between items-center">
-            <div class="text-xs font-semibold leading-6 text-gray-400">
-              Management
+          <RouterLink to="ui" 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" />
+              UI
             </div>
-
-            <div class="i-heroicons-chevron-down text-gray-300 w-4 h-4 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-          </div>
-
-          <ul
-            role="list"
-            class="-mx-2 mt-2 space-y-1"
-          >
-            <li>
-              <!-- Current: "bg-gray-50 text-blue-600", Default: "text-gray-700 hover:text-blue-600 hover:bg-gray-50" -->
-              <RouterLink
-                to="/dns"
-                class="sidebar-links"
-              >
-                <!-- <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 dark:border-gray-600 group-hover:border-blue-600 group-hover:text-blue-600">U</span> -->
-                <div class="i-heroicons-document-magnifying-glass text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-                <span class="truncate">DNS</span>
-              </RouterLink>
-            </li>
-
-            <li>
-              <!-- Current: "bg-gray-50 text-blue-600", Default: "text-gray-700 hover:text-blue-600 hover:bg-gray-50" -->
-              <RouterLink
-                to="/emails"
-                class="sidebar-links"
-              >
-                <!-- <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 dark:border-gray-600 group-hover:border-blue-600 group-hover:text-blue-600">U</span> -->
-                <div class="i-heroicons-at-symbol text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-                <span class="truncate">Emails</span>
-              </RouterLink>
-            </li>
-
-            <li>
-              <RouterLink
-                to="/logs"
-                class="sidebar-links group"
-              >
-                <div class="i-heroicons-document-text text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-                Logs
-              </RouterLink>
-            </li>
-          </ul>
-        </li>
-
-        <li class="mt-auto flex items-center justify-between space-x-4">
-          <div class="flex items-center">
-            <RouterLink
-              to="/buddy"
-              class="px-3 py-3 text-sm font-semibold leading-6 text-gray-900 dark:text-gray-200 transition-all duration-150 ease-in-out flex items-center justify-center"
-              active-class="active"
-            >
-              <div class="i-heroicons-chat-bubble-left-ellipsis text-gray-500 w-5 h-5 dark:text-gray-200 transition-all duration-150 ease-in-out" />
-            </RouterLink>
-
-            <RouterLink
-              to="/environment"
-              class="px-3 py-3 text-sm font-semibold leading-6 text-gray-900 dark:text-gray-200 transition-all duration-150 ease-in-out flex items-center justify-center"
-              active-class="active"
-            >
-              <div class="i-heroicons-key text-gray-500 w-5 h-5 dark:text-gray-200 transition-all duration-150 ease-in-out" />
-            </RouterLink>
-
-            <RouterLink
-              to="/settings/billing"
-              class="px-3 py-3 text-sm font-semibold leading-6 text-gray-900 dark:text-gray-200 transition-all duration-150 ease-in-out flex items-center justify-center"
-              active-class="active"
-            >
-              <div class="i-heroicons-cog-8-tooth text-gray-500 w-5 h-5 dark:text-gray-200 transition-all duration-150 ease-in-out" />
-            </RouterLink>
-          </div>
-          <!-- <span class="inline-flex items-center rounded-md bg-slate-50 px-2 py-1 text-xs font-medium text-slate-700 ring-1 ring-inset ring-slate-600/20">Production</span> -->
-          <!-- red for production -->
-          <!-- blue for staging -->
-          <!-- green for development -->
-          <!-- gray for local -->
-          <div class="flex-none rounded-full p-1 text-red-400 bg-red-400/10">
-            <div class="h-2 w-2 rounded-full bg-current animate-pulse" />
-          </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" />
+          </RouterLink>
         </li>
       </ul>
     </nav>
diff --git a/resources/views/dashboard/settings/[name].vue b/resources/views/dashboard/settings/[name].vue
index dcf53ce74a..d35938899a 100644
--- a/resources/views/dashboard/settings/[name].vue
+++ b/resources/views/dashboard/settings/[name].vue
@@ -1,197 +1,8 @@
 <script setup lang="ts">
-const settingsMenuOptions = [
-  {
-    label: 'AI',
-    path: 'ai',
-    icon: {
-      name: 'cpu-chip',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Analytics',
-    path: 'analytics',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'App',
-    path: 'app',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Cache',
-    path: 'cache',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'CLI',
-    path: 'cli',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Cloud',
-    path: 'cloud',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Database',
-    path: 'database',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'DNS',
-    path: 'dns',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Email',
-    path: 'email',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'File System',
-    path: 'file-system',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Hashing',
-    path: 'hashing',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Languages',
-    path: 'languages',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Library',
-    path: 'library',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Native',
-    path: 'native',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Mail',
-    path: 'mail',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Queue',
-    path: 'queue',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Search Engine',
-    path: 'search-engine',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Search Engine',
-    path: 'search-engine',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Security',
-    path: 'security',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Services',
-    path: 'services',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Storage',
-    path: 'storage',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'Team',
-    path: 'team',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-  {
-    label: 'UI',
-    path: 'ui',
-    icon: {
-      name: 'square-3-stack-3d',
-      source: 'heroicons',
-    },
-  },
-]
-
 const router = useRouter()
 // get the [name] of current route
 const name = computed(() => router.currentRoute.value.params.name)
 
-// const sideMenuOptions = computed(() => settingsMenuOptions)
-
 // set the title of the page
 useHead({
   title: `Dashboard Settings - ${name.value}`,
@@ -201,10 +12,10 @@ useHead({
 <template>
   <main>
     <div class="flex gap-x-4">
-      <SettingsSidebar :menu-options="settingsMenuOptions" />
+      <SettingsSidebar />
 
-      <div class="container mx-auto">
-        Generic Page here for settings {{ name }}
+      <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <SettingsFormManager :name="name" />
       </div>
     </div>
   </main>
diff --git a/storage/framework/core/raycast/package.json b/storage/framework/core/raycast/package.json
index 8bc2e27ffb..93f1a04aca 100644
--- a/storage/framework/core/raycast/package.json
+++ b/storage/framework/core/raycast/package.json
@@ -20,7 +20,7 @@
     }
   ],
   "scripts": {
-    "build": "ray build -e dist",
+    "build": "echo 'wip'",
     "dev": "ray develop",
     "fix-lint": "ray lint --fix",
     "lint": "ray lint",
diff --git a/storage/framework/types/auto-imports.d.ts b/storage/framework/types/auto-imports.d.ts
index 366ad3a70f..c751938af9 100644
--- a/storage/framework/types/auto-imports.d.ts
+++ b/storage/framework/types/auto-imports.d.ts
@@ -1076,6 +1076,15 @@ declare global {
   // @ts-ignore
   export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
+  // @ts-ignore
+  export type { Every } from '../core/types/src/cron-jobs'
+  import('../core/types/src/cron-jobs')
+  // @ts-ignore
+  export type { SocialLinkIcon } from '../core/types/src/docs'
+  import('../core/types/src/docs')
+  // @ts-ignore
+  export type { ExitCode } from '../core/types/src/exit-code'
+  import('../core/types/src/exit-code')
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'
diff --git a/storage/framework/types/components.d.ts b/storage/framework/types/components.d.ts
index 4609eed8d1..6e320ec4ca 100644
--- a/storage/framework/types/components.d.ts
+++ b/storage/framework/types/components.d.ts
@@ -8,10 +8,12 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ActivityFeed: typeof import('./../../../libs/components/Dashboard/Deployments/ActivityFeed.vue')['default']
+    AIForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/AIForm.vue')['default']
     Alert: typeof import('./../../../libs/components/Dashboard/Modals/Popups/Alert.vue')['default']
     AppButton: typeof import('./../../../libs/components/Dashboard/Buttons/AppButton.vue')['default']
     BaseModal: typeof import('./../../../libs/components/Dashboard/Modals/BaseModal.vue')['default']
     Button: typeof import('./../../../libs/components/Button.vue')['default']
+    CacheForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/CacheForm.vue')['default']
     CallToAction: typeof import('./../../../libs/components/Marketing/CallToAction.vue')['default']
     CodeEditor: typeof import('./../../../libs/components/CodeEditor.vue')['default']
     ComingSoon: typeof import('./../../../libs/components/Marketing/ComingSoon.vue')['default']
@@ -45,6 +47,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SecondaryFeatures: typeof import('./../../../libs/components/Marketing/SecondaryFeatures.vue')['default']
+    SettingsFormManager: typeof import('./../../../libs/components/Dashboard/Settings/SettingsFormManager.vue')['default']
     SettingsHeader: typeof import('./../../../libs/components/Dashboard/SettingsHeader.vue')['default']
     SettingsSidebar: typeof import('./../../../libs/components/Dashboard/SettingsSidebar.vue')['default']
     Sidebar: typeof import('./../../../libs/components/Dashboard/Sidebar.vue')['default']
diff --git a/storage/framework/types/router.d.ts b/storage/framework/types/router.d.ts
index e67f004644..ce28b5f69d 100644
--- a/storage/framework/types/router.d.ts
+++ b/storage/framework/types/router.d.ts
@@ -43,6 +43,7 @@ declare module 'vue-router/auto-routes' {
     '/dashboard/notifications/': RouteRecordInfo<'/dashboard/notifications/', '/dashboard/notifications', Record<never, never>, Record<never, never>>,
     '/dashboard/releases/': RouteRecordInfo<'/dashboard/releases/', '/dashboard/releases', Record<never, never>, Record<never, never>>,
     '/dashboard/requests/': RouteRecordInfo<'/dashboard/requests/', '/dashboard/requests', Record<never, never>, Record<never, never>>,
+    '/dashboard/settings/[id]': RouteRecordInfo<'/dashboard/settings/[id]', '/dashboard/settings/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/dashboard/settings/billing': RouteRecordInfo<'/dashboard/settings/billing', '/dashboard/settings/billing', Record<never, never>, Record<never, never>>,
     '/dashboard/settings/cache': RouteRecordInfo<'/dashboard/settings/cache', '/dashboard/settings/cache', Record<never, never>, Record<never, never>>,
     '/dashboard/settings/database': RouteRecordInfo<'/dashboard/settings/database', '/dashboard/settings/database', Record<never, never>, Record<never, never>>,
diff --git a/storage/framework/views/web/.eslintrc-auto-import.json b/storage/framework/views/web/.eslintrc-auto-import.json
index fd955d5bfe..5a7553e54b 100644
--- a/storage/framework/views/web/.eslintrc-auto-import.json
+++ b/storage/framework/views/web/.eslintrc-auto-import.json
@@ -952,6 +952,17 @@
     "writeTextFile": true,
     "writeToLogFile": true,
     "xRayPath": true,
-    "zip": true
+    "zip": true,
+    "SimpleMessagesProvider": true,
+    "VineError": true,
+    "extractDynamicAction": true,
+    "extractDynamicRequest": true,
+    "extractModelFromAction": true,
+    "extractModelRequest": true,
+    "getErrors": true,
+    "getModelName": true,
+    "getTableName": true,
+    "reportError": true,
+    "validateField": true
   }
 }