diff --git a/src/__tests__/types.test.ts b/src/__tests__/types.test.ts
new file mode 100644
index 0000000..4a94919
--- /dev/null
+++ b/src/__tests__/types.test.ts
@@ -0,0 +1,271 @@
+import { describe, it, expect } from "vitest";
+import type { DatabaseConfig, DomainConfig, ServiceMetadata } from "@/types";
+
+describe("DatabaseConfig type", () => {
+  it("should have all required fields", () => {
+    const db: DatabaseConfig = {
+      id: "test-db",
+      alias: "primary",
+      type: "mysql",
+      mode: "shared",
+    };
+
+    expect(db.id).toBe("test-db");
+    expect(db.alias).toBe("primary");
+    expect(db.type).toBe("mysql");
+    expect(db.mode).toBe("shared");
+  });
+
+  it("should support all database types", () => {
+    const types: DatabaseConfig["type"][] = ["mysql", "postgres", "mariadb", "mongodb", "redis"];
+
+    types.forEach((type) => {
+      const db: DatabaseConfig = {
+        id: `test-${type}`,
+        alias: "test",
+        type,
+        mode: "shared",
+      };
+      expect(db.type).toBe(type);
+    });
+  });
+
+  it("should support all connection modes", () => {
+    const modes: DatabaseConfig["mode"][] = ["shared", "create", "existing", "external"];
+
+    modes.forEach((mode) => {
+      const db: DatabaseConfig = {
+        id: `test-${mode}`,
+        alias: "test",
+        type: "mysql",
+        mode,
+      };
+      expect(db.mode).toBe(mode);
+    });
+  });
+
+  it("should support optional fields", () => {
+    const db: DatabaseConfig = {
+      id: "full-config",
+      alias: "analytics",
+      type: "postgres",
+      mode: "external",
+      service: "backend",
+      host: "db.example.com",
+      port: 5432,
+      container: "postgres-container",
+      database_name: "analytics_db",
+      username: "analyst",
+      env_prefix: "ANALYTICS",
+      is_shared: false,
+    };
+
+    expect(db.service).toBe("backend");
+    expect(db.host).toBe("db.example.com");
+    expect(db.port).toBe(5432);
+    expect(db.database_name).toBe("analytics_db");
+    expect(db.env_prefix).toBe("ANALYTICS");
+    expect(db.is_shared).toBe(false);
+  });
+});
+
+describe("DomainConfig type", () => {
+  it("should have all required fields", () => {
+    const domain: DomainConfig = {
+      id: "test-domain",
+      service: "frontend",
+      container_port: 80,
+      domain: "example.com",
+      ssl: {
+        enabled: true,
+        auto_cert: true,
+      },
+    };
+
+    expect(domain.id).toBe("test-domain");
+    expect(domain.service).toBe("frontend");
+    expect(domain.container_port).toBe(80);
+    expect(domain.domain).toBe("example.com");
+    expect(domain.ssl.enabled).toBe(true);
+  });
+
+  it("should support optional fields", () => {
+    const domain: DomainConfig = {
+      id: "api-domain",
+      service: "api",
+      container_port: 8080,
+      domain: "api.example.com",
+      path_prefix: "/v1",
+      strip_prefix: true,
+      ssl: {
+        enabled: true,
+        auto_cert: true,
+      },
+      aliases: ["api-v1.example.com"],
+    };
+
+    expect(domain.path_prefix).toBe("/v1");
+    expect(domain.strip_prefix).toBe(true);
+    expect(domain.aliases).toContain("api-v1.example.com");
+  });
+});
+
+describe("ServiceMetadata with databases", () => {
+  it("should support empty databases array", () => {
+    const metadata: ServiceMetadata = {
+      name: "test-app",
+      type: "web",
+      networking: {
+        expose: true,
+        domain: "test.example.com",
+        container_port: 80,
+        protocol: "http",
+      },
+      ssl: {
+        enabled: true,
+        auto_cert: true,
+      },
+      healthcheck: {
+        path: "/health",
+        interval: "30s",
+      },
+    };
+
+    expect(metadata.databases).toBeUndefined();
+  });
+
+  it("should support single database", () => {
+    const metadata: ServiceMetadata = {
+      name: "test-app",
+      type: "web",
+      networking: {
+        expose: true,
+        domain: "test.example.com",
+        container_port: 80,
+        protocol: "http",
+      },
+      ssl: {
+        enabled: true,
+        auto_cert: true,
+      },
+      healthcheck: {
+        path: "/health",
+        interval: "30s",
+      },
+      databases: [
+        {
+          id: "primary",
+          alias: "primary",
+          type: "mysql",
+          mode: "shared",
+          is_shared: true,
+        },
+      ],
+    };
+
+    expect(metadata.databases).toHaveLength(1);
+    expect(metadata.databases![0].alias).toBe("primary");
+  });
+
+  it("should support multiple databases", () => {
+    const metadata: ServiceMetadata = {
+      name: "complex-app",
+      type: "web",
+      networking: {
+        expose: true,
+        domain: "app.example.com",
+        container_port: 80,
+        protocol: "http",
+      },
+      ssl: {
+        enabled: true,
+        auto_cert: true,
+      },
+      healthcheck: {
+        path: "/health",
+        interval: "30s",
+      },
+      databases: [
+        {
+          id: "primary",
+          alias: "primary",
+          type: "mysql",
+          mode: "shared",
+          is_shared: true,
+        },
+        {
+          id: "cache",
+          alias: "cache",
+          type: "redis",
+          mode: "existing",
+          container: "redis-server",
+        },
+        {
+          id: "analytics",
+          alias: "analytics",
+          type: "postgres",
+          mode: "external",
+          host: "analytics.db.example.com",
+          port: 5432,
+        },
+      ],
+    };
+
+    expect(metadata.databases).toHaveLength(3);
+    expect(metadata.databases![0].type).toBe("mysql");
+    expect(metadata.databases![1].type).toBe("redis");
+    expect(metadata.databases![2].type).toBe("postgres");
+  });
+});
+
+describe("ServiceMetadata with domains", () => {
+  it("should support multiple domains", () => {
+    const metadata: ServiceMetadata = {
+      name: "multi-domain-app",
+      type: "web",
+      networking: {
+        expose: true,
+        domain: "app.example.com",
+        container_port: 80,
+        protocol: "http",
+      },
+      ssl: {
+        enabled: true,
+        auto_cert: true,
+      },
+      healthcheck: {
+        path: "/health",
+        interval: "30s",
+      },
+      domains: [
+        {
+          id: "primary",
+          service: "frontend",
+          container_port: 80,
+          domain: "app.example.com",
+          ssl: { enabled: true, auto_cert: true },
+        },
+        {
+          id: "api",
+          service: "api",
+          container_port: 8080,
+          domain: "api.example.com",
+          path_prefix: "/v1",
+          ssl: { enabled: true, auto_cert: true },
+        },
+        {
+          id: "admin",
+          service: "admin",
+          container_port: 3000,
+          domain: "admin.example.com",
+          ssl: { enabled: true, auto_cert: true },
+        },
+      ],
+    };
+
+    expect(metadata.domains).toHaveLength(3);
+    expect(metadata.domains![0].domain).toBe("app.example.com");
+    expect(metadata.domains![1].domain).toBe("api.example.com");
+    expect(metadata.domains![2].domain).toBe("admin.example.com");
+  });
+});
diff --git a/src/components/DomainFormModal.vue b/src/components/DomainFormModal.vue
new file mode 100644
index 0000000..1bff202
--- /dev/null
+++ b/src/components/DomainFormModal.vue
@@ -0,0 +1,451 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="modal-overlay" @click.self="!loading && emit('cancel')">
+        <div class="domain-form-modal">
+          <div class="modal-header">
+            <h3>{{ domain ? "Edit Domain" : "Add Domain" }}</h3>
+            <button class="close-btn" :disabled="loading" @click="emit('cancel')">
+              <i class="pi pi-times" />
+            </button>
+          </div>
+
+          <form class="modal-body" @submit.prevent="handleSubmit">
+            <div class="form-group">
+              <label>Domain <span class="required">*</span></label>
+              <input v-model="form.domain" type="text" class="form-input" placeholder="api.example.com" required />
+              <span class="hint">The primary domain name</span>
+            </div>
+
+            <div class="form-row">
+              <div class="form-group">
+                <label>Service</label>
+                <select v-model="form.service" class="form-select">
+                  <option value="">Default ({{ deploymentName }})</option>
+                  <option v-for="service in services" :key="service.name" :value="service.name">
+                    {{ service.name }}
+                  </option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <label>Container Port</label>
+                <input
+                  v-model.number="form.container_port"
+                  type="number"
+                  class="form-input"
+                  placeholder="80"
+                  min="1"
+                  max="65535"
+                />
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label>Path Prefix</label>
+              <input v-model="form.path_prefix" type="text" class="form-input" placeholder="/api/v1" />
+              <span class="hint">Optional path prefix (e.g., /api/*)</span>
+            </div>
+
+            <div v-if="form.path_prefix" class="form-group checkbox-group">
+              <label class="checkbox-label">
+                <input v-model="form.strip_prefix" type="checkbox" />
+                <span>Strip prefix before proxying</span>
+              </label>
+              <span class="hint">If enabled, /api/users will be sent to the backend as /users</span>
+            </div>
+
+            <div class="form-section">
+              <h4>SSL Configuration</h4>
+
+              <div class="form-group checkbox-group">
+                <label class="checkbox-label">
+                  <input v-model="form.ssl.enabled" type="checkbox" />
+                  <span>Enable SSL (HTTPS)</span>
+                </label>
+              </div>
+
+              <div v-if="form.ssl.enabled" class="form-group checkbox-group">
+                <label class="checkbox-label">
+                  <input v-model="form.ssl.auto_cert" type="checkbox" />
+                  <span>Auto-request Let's Encrypt certificate</span>
+                </label>
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label>Domain Aliases</label>
+              <div class="aliases-input">
+                <div v-for="(alias, index) in form.aliases" :key="index" class="alias-item">
+                  <input v-model="form.aliases[index]" type="text" class="form-input" placeholder="www.example.com" />
+                  <button type="button" class="remove-btn" @click="removeAlias(index)">
+                    <i class="pi pi-times" />
+                  </button>
+                </div>
+                <button type="button" class="btn btn-sm btn-secondary" @click="addAlias">
+                  <i class="pi pi-plus" />
+                  Add Alias
+                </button>
+              </div>
+              <span class="hint">Additional domain names that should also resolve here</span>
+            </div>
+          </form>
+
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" :disabled="loading" @click="emit('cancel')">Cancel</button>
+            <button type="button" class="btn btn-primary" :disabled="loading || !isValid" @click="handleSubmit">
+              <i v-if="loading" class="pi pi-spin pi-spinner" />
+              {{ domain ? "Update" : "Add Domain" }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import type { DomainConfig, Service } from "@/types";
+
+const props = defineProps<{
+  visible: boolean;
+  domain?: DomainConfig | null;
+  services: Service[];
+  deploymentName: string;
+  loading?: boolean;
+}>();
+
+const emit = defineEmits<{
+  save: [domain: DomainConfig];
+  cancel: [];
+}>();
+
+const form = ref<{
+  domain: string;
+  service: string;
+  container_port: number;
+  path_prefix: string;
+  strip_prefix: boolean;
+  ssl: { enabled: boolean; auto_cert: boolean };
+  aliases: string[];
+}>({
+  domain: "",
+  service: "",
+  container_port: 80,
+  path_prefix: "",
+  strip_prefix: false,
+  ssl: { enabled: false, auto_cert: false },
+  aliases: [],
+});
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      if (props.domain) {
+        form.value = {
+          domain: props.domain.domain || "",
+          service: props.domain.service || "",
+          container_port: props.domain.container_port || 80,
+          path_prefix: props.domain.path_prefix || "",
+          strip_prefix: props.domain.strip_prefix || false,
+          ssl: {
+            enabled: props.domain.ssl?.enabled || false,
+            auto_cert: props.domain.ssl?.auto_cert || false,
+          },
+          aliases: [...(props.domain.aliases || [])],
+        };
+      } else {
+        form.value = {
+          domain: "",
+          service: "",
+          container_port: 80,
+          path_prefix: "",
+          strip_prefix: false,
+          ssl: { enabled: false, auto_cert: false },
+          aliases: [],
+        };
+      }
+    }
+  },
+  { immediate: true },
+);
+
+const isValid = computed(() => {
+  return form.value.domain.trim() !== "";
+});
+
+function addAlias() {
+  form.value.aliases.push("");
+}
+
+function removeAlias(index: number) {
+  form.value.aliases.splice(index, 1);
+}
+
+function handleSubmit() {
+  if (!isValid.value) return;
+
+  const domainData: DomainConfig = {
+    id: props.domain?.id || "",
+    domain: form.value.domain.trim(),
+    service: form.value.service,
+    container_port: form.value.container_port || 80,
+    path_prefix: form.value.path_prefix.trim() || undefined,
+    strip_prefix: form.value.strip_prefix || undefined,
+    ssl: form.value.ssl,
+    aliases: form.value.aliases.filter((a) => a.trim() !== ""),
+  };
+
+  emit("save", domainData);
+}
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.domain-form-modal {
+  background: white;
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xl);
+  width: 520px;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  animation: slideIn 0.2s ease;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-5);
+  border-bottom: 1px solid var(--color-gray-100);
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--color-gray-900);
+}
+
+.close-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: var(--color-gray-500);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  background: var(--color-gray-100);
+  color: var(--color-gray-700);
+}
+
+.modal-body {
+  padding: var(--space-5);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.form-group {
+  margin-bottom: var(--space-4);
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: var(--space-1);
+  font-weight: var(--font-medium);
+  font-size: var(--text-sm);
+  color: var(--color-gray-700);
+}
+
+.required {
+  color: var(--color-danger-500);
+}
+
+.form-input,
+.form-select {
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-md);
+  transition: border-color var(--transition-base);
+}
+
+.form-input:focus,
+.form-select:focus {
+  outline: none;
+  border-color: var(--color-primary-500);
+  box-shadow: 0 0 0 3px var(--color-primary-100);
+}
+
+.hint {
+  display: block;
+  margin-top: var(--space-1);
+  font-size: var(--text-xs);
+  color: var(--color-gray-500);
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-4);
+}
+
+.form-section {
+  margin-top: var(--space-4);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--color-gray-100);
+}
+
+.form-section h4 {
+  margin: 0 0 var(--space-3);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--color-gray-700);
+}
+
+.checkbox-group {
+  margin-bottom: var(--space-2);
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+}
+
+.checkbox-label input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--color-primary-500);
+}
+
+.checkbox-label span {
+  font-weight: normal;
+}
+
+.aliases-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.alias-item {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.alias-item .form-input {
+  flex: 1;
+}
+
+.remove-btn {
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--color-gray-300);
+  background: white;
+  color: var(--color-gray-500);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.remove-btn:hover {
+  background: var(--color-danger-50);
+  border-color: var(--color-danger-300);
+  color: var(--color-danger-600);
+}
+
+.modal-footer {
+  padding: var(--space-4) var(--space-5);
+  border-top: 1px solid var(--color-gray-100);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-3);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-sm);
+  font-weight: var(--font-medium);
+  font-size: var(--text-md);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  border: none;
+}
+
+.btn-sm {
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-sm);
+}
+
+.btn-secondary {
+  background: var(--color-gray-100);
+  color: var(--color-gray-700);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--color-gray-200);
+}
+
+.btn-primary {
+  background: var(--color-primary-500);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--color-primary-600);
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+</style>
diff --git a/src/components/DomainsManager.vue b/src/components/DomainsManager.vue
new file mode 100644
index 0000000..f637912
--- /dev/null
+++ b/src/components/DomainsManager.vue
@@ -0,0 +1,435 @@
+<template>
+  <div class="domains-manager">
+    <div v-if="loading" class="loading-state">
+      <i class="pi pi-spin pi-spinner" />
+      Loading...
+    </div>
+
+    <template v-else>
+      <div class="domains-table">
+        <div v-for="d in domains" :key="d.id" class="domain-row">
+          <div class="domain-info">
+            <a :href="getDomainUrl(d)" target="_blank" class="domain-name">
+              {{ d.domain }}{{ d.path_prefix || "" }}
+              <i class="pi pi-external-link" />
+            </a>
+            <span class="domain-target">
+              <i class="pi pi-arrow-right" />
+              {{ d.service || deploymentName }}:{{ d.container_port || 80 }}
+            </span>
+          </div>
+
+          <div class="domain-status">
+            <span v-if="d.ssl?.enabled" class="status-pill" :class="hasCertificate(d.domain) ? 'success' : 'warning'">
+              <i :class="hasCertificate(d.domain) ? 'pi pi-lock' : 'pi pi-lock-open'" />
+              {{ hasCertificate(d.domain) ? "SSL" : "No cert" }}
+            </span>
+            <span v-if="!proxyConfigured" class="status-pill warning">
+              <i class="pi pi-exclamation-triangle" />
+              No proxy
+            </span>
+          </div>
+
+          <div class="domain-actions">
+            <button
+              v-if="canEdit && !proxyConfigured"
+              class="action-btn primary"
+              title="Setup Proxy"
+              :disabled="settingUpProxy"
+              @click="$emit('setupProxy')"
+            >
+              <i :class="settingUpProxy ? 'pi pi-spin pi-spinner' : 'pi pi-cog'" />
+            </button>
+            <button
+              v-if="canEdit && d.ssl?.enabled && d.ssl?.auto_cert && !hasCertificate(d.domain)"
+              class="action-btn success"
+              title="Request SSL Certificate"
+              :disabled="requestingCerts[d.domain]"
+              @click="requestCertificate(d.domain)"
+            >
+              <i :class="requestingCerts[d.domain] ? 'pi pi-spin pi-spinner' : 'pi pi-shield'" />
+            </button>
+            <button v-if="canEdit" class="action-btn" title="Edit" @click="editDomain(d)">
+              <i class="pi pi-pencil" />
+            </button>
+            <button v-if="canEdit" class="action-btn danger" title="Delete" @click="confirmDeleteDomain(d)">
+              <i class="pi pi-trash" />
+            </button>
+          </div>
+        </div>
+      </div>
+      <button v-if="canEdit" class="add-link" @click="showAddModal = true"><i class="pi pi-plus" /> Add domain</button>
+    </template>
+
+    <DomainFormModal
+      v-if="showAddModal || showEditModal"
+      :visible="showAddModal || showEditModal"
+      :domain="editingDomain"
+      :services="services"
+      :deployment-name="deploymentName"
+      :loading="saving"
+      @save="handleSaveDomain"
+      @cancel="closeModals"
+    />
+
+    <ConfirmModal
+      :visible="showDeleteModal"
+      title="Delete Domain"
+      :message="`Are you sure you want to delete ${deletingDomain?.domain}${deletingDomain?.path_prefix || ''}?`"
+      variant="danger"
+      confirm-text="Delete"
+      :loading="deleting"
+      @confirm="handleDeleteDomain"
+      @cancel="showDeleteModal = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from "vue";
+import type { DomainConfig, Service, ProxyStatus, Certificate } from "@/types";
+import { deploymentsApi, certificatesApi } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+import DomainFormModal from "./DomainFormModal.vue";
+import ConfirmModal from "./ConfirmModal.vue";
+
+const notifications = useNotificationsStore();
+
+const props = defineProps<{
+  deploymentName: string;
+  services: Service[];
+  proxyStatus?: ProxyStatus | null;
+  canEdit?: boolean;
+  settingUpProxy?: boolean;
+}>();
+
+const emit = defineEmits<{
+  updated: [];
+  setupProxy: [];
+}>();
+
+const loading = ref(false);
+const saving = ref(false);
+const deleting = ref(false);
+const domains = ref<DomainConfig[]>([]);
+const requestingCerts = ref<Record<string, boolean>>({});
+
+const showAddModal = ref(false);
+const showEditModal = ref(false);
+const showDeleteModal = ref(false);
+const editingDomain = ref<DomainConfig | null>(null);
+const deletingDomain = ref<DomainConfig | null>(null);
+
+const proxyConfigured = computed(() => props.proxyStatus?.virtual_host_exists ?? false);
+
+const certificates = computed(() => props.proxyStatus?.certificates || []);
+
+function hasCertificate(domain: string): boolean {
+  return certificates.value.some((cert: Certificate) => cert.domain === domain);
+}
+
+onMounted(() => {
+  fetchDomains();
+});
+
+watch(
+  () => props.proxyStatus,
+  () => {
+    fetchDomains();
+  },
+);
+
+async function fetchDomains() {
+  loading.value = true;
+  try {
+    const response = await deploymentsApi.listDomains(props.deploymentName);
+    domains.value = response.data.domains || [];
+  } catch {
+    domains.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function getDomainUrl(domain: DomainConfig): string {
+  const protocol = domain.ssl?.enabled ? "https" : "http";
+  return `${protocol}://${domain.domain}${domain.path_prefix || ""}`;
+}
+
+function editDomain(domain: DomainConfig) {
+  editingDomain.value = { ...domain };
+  showEditModal.value = true;
+}
+
+function confirmDeleteDomain(domain: DomainConfig) {
+  deletingDomain.value = domain;
+  showDeleteModal.value = true;
+}
+
+function closeModals() {
+  showAddModal.value = false;
+  showEditModal.value = false;
+  editingDomain.value = null;
+}
+
+async function handleSaveDomain(domain: DomainConfig) {
+  saving.value = true;
+  try {
+    if (editingDomain.value && editingDomain.value.id) {
+      await deploymentsApi.updateDomain(props.deploymentName, editingDomain.value.id, domain);
+      notifications.success("Domain Updated", `${domain.domain} has been updated`);
+    } else {
+      await deploymentsApi.addDomain(props.deploymentName, domain);
+      notifications.success("Domain Added", `${domain.domain} has been added`);
+    }
+    await fetchDomains();
+    closeModals();
+    emit("updated");
+  } catch (err: any) {
+    const msg = err.response?.data?.error || err.message;
+    notifications.error("Save Failed", msg);
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function handleDeleteDomain() {
+  if (!deletingDomain.value) return;
+  deleting.value = true;
+  try {
+    await deploymentsApi.deleteDomain(props.deploymentName, deletingDomain.value.id);
+    notifications.success("Domain Deleted", `${deletingDomain.value.domain} has been removed`);
+    await fetchDomains();
+    showDeleteModal.value = false;
+    deletingDomain.value = null;
+    emit("updated");
+  } catch (err: any) {
+    const msg = err.response?.data?.error || err.message;
+    notifications.error("Delete Failed", msg);
+  } finally {
+    deleting.value = false;
+  }
+}
+
+async function requestCertificate(domain: string) {
+  requestingCerts.value[domain] = true;
+  try {
+    await certificatesApi.request(domain);
+    notifications.success("Certificate Requested", `SSL certificate for ${domain} has been requested`);
+    emit("updated");
+  } catch (err: any) {
+    const msg = err.response?.data?.error || err.message;
+    notifications.error("Certificate Request Failed", msg);
+  } finally {
+    requestingCerts.value[domain] = false;
+  }
+}
+
+defineExpose({ fetchDomains });
+</script>
+
+<style scoped>
+.domains-manager {
+  font-size: var(--text-sm);
+}
+
+.loading-state {
+  padding: var(--space-2);
+  color: var(--color-gray-500);
+  font-size: var(--text-xs);
+}
+
+.loading-state i {
+  margin-right: var(--space-1);
+}
+
+.empty-state {
+  padding: var(--space-2);
+  color: var(--color-gray-500);
+  font-size: var(--text-xs);
+}
+
+.empty-state p {
+  margin: 0 0 var(--space-1);
+}
+
+.domains-table {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  background: var(--color-gray-200);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.domain-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  background: var(--color-gray-50);
+}
+
+.domain-row:hover {
+  background: white;
+}
+
+.domain-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.domain-name {
+  color: var(--color-primary-600);
+  text-decoration: none;
+  font-weight: var(--font-medium);
+  font-size: var(--text-xs);
+  white-space: nowrap;
+}
+
+.domain-name:hover {
+  text-decoration: underline;
+}
+
+.domain-name i {
+  font-size: 9px;
+  opacity: 0.6;
+  margin-left: 2px;
+}
+
+.domain-target {
+  font-size: var(--text-xs);
+  color: var(--color-gray-400);
+  font-family: var(--font-mono);
+  white-space: nowrap;
+}
+
+.domain-target i {
+  font-size: 8px;
+  margin-right: 2px;
+}
+
+.domain-status {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 1px 5px;
+  font-size: 9px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+.status-pill.success {
+  background: var(--color-success-100);
+  color: var(--color-success-700);
+}
+
+.status-pill.warning {
+  background: var(--color-warning-100);
+  color: var(--color-warning-700);
+}
+
+.status-pill i {
+  font-size: 9px;
+}
+
+.domain-actions {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.action-btn {
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: transparent;
+  color: var(--color-gray-400);
+  cursor: pointer;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+}
+
+.action-btn:hover {
+  background: var(--color-gray-200);
+  color: var(--color-gray-600);
+}
+
+.action-btn.danger:hover {
+  background: var(--color-danger-100);
+  color: var(--color-danger-600);
+}
+
+.action-btn.primary {
+  color: var(--color-primary-500);
+}
+
+.action-btn.primary:hover {
+  background: var(--color-primary-100);
+  color: var(--color-primary-600);
+}
+
+.action-btn.success {
+  color: var(--color-success-500);
+}
+
+.action-btn.success:hover {
+  background: var(--color-success-100);
+  color: var(--color-success-600);
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-link {
+  background: none;
+  border: none;
+  color: var(--color-primary-500);
+  cursor: pointer;
+  font-size: var(--text-xs);
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 0;
+}
+
+.btn-link:hover {
+  color: var(--color-primary-600);
+  text-decoration: underline;
+}
+
+.add-link {
+  background: none;
+  border: none;
+  color: var(--color-gray-400);
+  cursor: pointer;
+  font-size: var(--text-xs);
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: var(--space-1) 0;
+  margin-top: var(--space-1);
+}
+
+.add-link:hover {
+  color: var(--color-primary-500);
+}
+
+.add-link i {
+  font-size: 10px;
+}
+</style>
diff --git a/src/components/NewDeploymentModal.vue b/src/components/NewDeploymentModal.vue
index 2cc10c8..f2dca77 100644
--- a/src/components/NewDeploymentModal.vue
+++ b/src/components/NewDeploymentModal.vue
@@ -109,8 +109,8 @@
             </div>
           </div>
 
-          <!-- Step 1: Basic Info -->
-          <div v-else-if="currentStep === 1" class="step-panel">
+          <!-- Step: Basic Info -->
+          <div v-else-if="currentStepId === 'basics'" class="step-panel">
             <div class="step1-grid">
               <!-- Left: Name & Domain -->
               <div class="step1-left">
@@ -276,13 +276,36 @@
                         <p>Define multiple services, volumes, and networks</p>
                       </div>
                     </div>
-                    <div class="info-item">
-                      <i class="pi pi-cog" />
-                      <div>
-                        <strong>Advanced Options</strong>
-                        <p>Configure environment variables and port mappings</p>
+
+                    <div class="advanced-options-section">
+                      <div class="advanced-options-header">
+                        <i class="pi pi-sliders-h" />
+                        <span>Advanced Options</span>
+                      </div>
+                      <div class="advanced-options-list">
+                        <label class="advanced-option">
+                          <input v-model="advancedOptions.multiDomain" type="checkbox" />
+                          <div class="option-content">
+                            <span class="option-label">
+                              <i class="pi pi-globe" />
+                              Multi-Domain Setup
+                            </span>
+                            <span class="option-desc">Route different domains to different services</span>
+                          </div>
+                        </label>
+                        <label class="advanced-option">
+                          <input v-model="advancedOptions.multiDatabase" type="checkbox" />
+                          <div class="option-content">
+                            <span class="option-label">
+                              <i class="pi pi-database" />
+                              Multi-Database Setup
+                            </span>
+                            <span class="option-desc">Configure multiple database connections</span>
+                          </div>
+                        </label>
                       </div>
                     </div>
+
                     <div class="info-hint">
                       <i class="pi pi-info-circle" />
                       <span>You'll write your compose file in the next step</span>
@@ -429,8 +452,8 @@
             </div>
           </div>
 
-          <!-- Step 2: Database & Storage -->
-          <div v-else-if="currentStep === 2" class="step-panel step2-sections">
+          <!-- Step: Database & Storage -->
+          <div v-else-if="currentStepId === 'database'" class="step-panel step2-sections">
             <!-- Database Section -->
             <div class="collapsible-section">
               <button
@@ -845,6 +868,102 @@
                           </div>
                         </div>
                       </div>
+
+                      <!-- Additional Databases (Multi-Database Mode) -->
+                      <div v-if="advancedOptions.multiDatabase" class="additional-databases-section">
+                        <div class="section-divider">
+                          <span>Additional Databases</span>
+                        </div>
+
+                        <div v-for="(db, index) in additionalDatabases" :key="db.id" class="additional-db-card">
+                          <div class="db-card-header">
+                            <div class="db-alias-input">
+                              <label>Alias</label>
+                              <input v-model="db.alias" type="text" placeholder="cache" class="alias-field" />
+                            </div>
+                            <button class="remove-btn" @click="removeAdditionalDatabase(index)">
+                              <i class="pi pi-times" />
+                            </button>
+                          </div>
+
+                          <div class="db-card-content">
+                            <div class="db-type-row">
+                              <button
+                                v-for="dbType in ['mysql', 'postgres', 'redis', 'mongodb']"
+                                :key="dbType"
+                                class="db-type-btn"
+                                :class="{ selected: db.type === dbType }"
+                                @click="db.type = dbType as any"
+                              >
+                                {{ dbType }}
+                              </button>
+                            </div>
+
+                            <div v-if="db.type !== 'none'" class="db-mode-row">
+                              <button
+                                v-if="infrastructureSettings.database.enabled"
+                                class="mode-btn"
+                                :class="{ selected: db.mode === 'shared' }"
+                                @click="db.mode = 'shared'"
+                              >
+                                <i class="pi pi-share-alt" />
+                                Shared
+                              </button>
+                              <button
+                                class="mode-btn"
+                                :class="{ selected: db.mode === 'existing' }"
+                                @click="db.mode = 'existing'"
+                              >
+                                <i class="pi pi-server" />
+                                Existing
+                              </button>
+                              <button
+                                class="mode-btn"
+                                :class="{ selected: db.mode === 'external' }"
+                                @click="db.mode = 'external'"
+                              >
+                                <i class="pi pi-globe" />
+                                External
+                              </button>
+                            </div>
+
+                            <div v-if="db.mode === 'external' && db.type !== 'none'" class="db-external-config">
+                              <div class="form-row">
+                                <div class="form-field flex-grow">
+                                  <label>Host</label>
+                                  <input v-model="db.externalHost" type="text" placeholder="db.example.com" />
+                                </div>
+                                <div class="form-field port-field">
+                                  <label>Port</label>
+                                  <input v-model="db.externalPort" type="text" placeholder="3306" />
+                                </div>
+                              </div>
+                              <div class="form-row">
+                                <div class="form-field">
+                                  <label>Database</label>
+                                  <input v-model="db.dbName" type="text" placeholder="mydb" />
+                                </div>
+                                <div class="form-field">
+                                  <label>Username</label>
+                                  <input v-model="db.dbUser" type="text" placeholder="user" />
+                                </div>
+                              </div>
+                            </div>
+
+                            <div class="db-env-preview">
+                              <span class="env-prefix"
+                                >Env: {{ (db.envPrefix || db.alias).toUpperCase() }}_HOST,
+                                {{ (db.envPrefix || db.alias).toUpperCase() }}_PORT...</span
+                              >
+                            </div>
+                          </div>
+                        </div>
+
+                        <button class="add-db-btn" @click="addAdditionalDatabase">
+                          <i class="pi pi-plus" />
+                          Add Another Database
+                        </button>
+                      </div>
                     </div>
                   </Transition>
                 </div>
@@ -921,8 +1040,77 @@
             </div>
           </div>
 
-          <!-- Step 3: Configuration -->
-          <div v-else-if="currentStep === 3" class="step-panel">
+          <!-- Step: Domains (Compose Mode Advanced) -->
+          <div v-else-if="currentStepId === 'domains'" class="step-panel domains-step">
+            <div class="domains-step-header">
+              <div class="step-intro">
+                <h3>Configure Domains</h3>
+                <p>Route different domains to different services in your compose stack</p>
+              </div>
+            </div>
+
+            <div class="domains-list-section">
+              <!-- Primary Domain (from Step 1) -->
+              <div class="domain-card primary">
+                <div class="domain-card-header">
+                  <span class="domain-badge primary-badge">Primary Domain</span>
+                </div>
+                <div class="domain-preview">
+                  <i class="pi pi-globe" />
+                  <span>{{ effectiveDomain || "Not configured" }}</span>
+                  <span class="domain-hint">→ {{ form.name }}:{{ form.networking.ports[0]?.containerPort || 80 }}</span>
+                </div>
+              </div>
+
+              <!-- Additional Domains -->
+              <div v-for="(domain, index) in additionalDomains" :key="domain.id" class="domain-card">
+                <div class="domain-card-header">
+                  <span class="domain-badge">Domain {{ index + 2 }}</span>
+                  <button class="remove-btn" @click="removeAdditionalDomain(index)">
+                    <i class="pi pi-times" />
+                  </button>
+                </div>
+
+                <div class="domain-form-grid">
+                  <div class="form-field">
+                    <label>Domain</label>
+                    <input v-model="domain.domain" type="text" placeholder="api.example.com" />
+                  </div>
+
+                  <div class="form-field">
+                    <label>Service Name</label>
+                    <input v-model="domain.service" type="text" placeholder="api" />
+                    <span class="field-hint">Service name from your compose file</span>
+                  </div>
+
+                  <div class="form-field port-field">
+                    <label>Container Port</label>
+                    <input v-model.number="domain.containerPort" type="number" placeholder="80" />
+                  </div>
+
+                  <div class="form-field">
+                    <label>Path Prefix (optional)</label>
+                    <input v-model="domain.pathPrefix" type="text" placeholder="/api" />
+                  </div>
+
+                  <div class="ssl-toggle">
+                    <label class="toggle-label">
+                      <input v-model="domain.ssl.enabled" type="checkbox" />
+                      <span class="toggle-text">Enable SSL</span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+
+              <button class="add-domain-btn" @click="addAdditionalDomain">
+                <i class="pi pi-plus" />
+                Add Another Domain
+              </button>
+            </div>
+          </div>
+
+          <!-- Step: Configuration -->
+          <div v-else-if="currentStepId === 'configure'" class="step-panel">
             <div class="step2-layout">
               <!-- Compose Editor -->
               <div class="compose-section">
@@ -1044,8 +1232,8 @@
             </div>
           </div>
 
-          <!-- Step 4: Review -->
-          <div v-else-if="currentStep === 4" class="step-panel">
+          <!-- Step: Review -->
+          <div v-else-if="currentStepId === 'review'" class="step-panel">
             <div class="review-container">
               <div class="review-card">
                 <div class="review-header">
@@ -1210,6 +1398,7 @@ interface DbContainer {
   image: string;
   type: "mysql" | "postgres" | "mariadb" | "mongodb" | "unknown";
 }
+
 const existingDbContainers = ref<DbContainer[]>([]);
 const loadingDbContainers = ref(false);
 const existingDeployments = ref<string[]>([]);
@@ -1221,6 +1410,83 @@ const showRegistryPassword = ref(false);
 const existingCredentials = ref<RegistryCredential[]>([]);
 const loadingCredentials = ref(false);
 
+const advancedOptions = reactive({
+  multiDomain: false,
+  multiDatabase: false,
+});
+
+interface DomainFormConfig {
+  id: string;
+  domain: string;
+  service: string;
+  containerPort: number;
+  pathPrefix: string;
+  ssl: { enabled: boolean; autoCert: boolean };
+}
+
+interface DatabaseFormConfig {
+  id: string;
+  alias: string;
+  type: "none" | "mysql" | "postgres" | "mariadb" | "mongodb" | "redis";
+  mode: "create" | "existing" | "external" | "shared";
+  service: string;
+  existingContainer: string;
+  externalHost: string;
+  externalPort: string;
+  dbName: string;
+  dbUser: string;
+  dbPassword: string;
+  envPrefix: string;
+}
+
+const createDomainConfig = (id: string): DomainFormConfig => ({
+  id,
+  domain: "",
+  service: "",
+  containerPort: 80,
+  pathPrefix: "",
+  ssl: { enabled: true, autoCert: true },
+});
+
+const createDatabaseConfig = (id: string, alias: string): DatabaseFormConfig => ({
+  id,
+  alias,
+  type: "none",
+  mode: "shared",
+  service: "",
+  existingContainer: "",
+  externalHost: "",
+  externalPort: "",
+  dbName: "",
+  dbUser: "app",
+  dbPassword: "",
+  envPrefix: "",
+});
+
+const additionalDomains = ref<DomainFormConfig[]>([]);
+const additionalDatabases = ref<DatabaseFormConfig[]>([]);
+
+const addAdditionalDomain = () => {
+  const id = `domain-${Date.now()}`;
+  additionalDomains.value.push(createDomainConfig(id));
+};
+
+const removeAdditionalDomain = (index: number) => {
+  additionalDomains.value.splice(index, 1);
+};
+
+const addAdditionalDatabase = () => {
+  const id = `db-${Date.now()}`;
+  const alias = `db${additionalDatabases.value.length + 2}`;
+  const db = createDatabaseConfig(id, alias);
+  db.dbPassword = generatePassword();
+  additionalDatabases.value.push(db);
+};
+
+const removeAdditionalDatabase = (index: number) => {
+  additionalDatabases.value.splice(index, 1);
+};
+
 const easySteps = [
   { id: "basics", label: "Basics" },
   { id: "database", label: "Database" },
@@ -1228,7 +1494,26 @@ const easySteps = [
   { id: "review", label: "Review" },
 ];
 
-const steps = computed(() => easySteps);
+const steps = computed(() => {
+  if (deploymentMode.value === "compose") {
+    const composeSteps = [
+      { id: "basics", label: "Basics" },
+      { id: "database", label: "Database" },
+    ];
+    if (advancedOptions.multiDomain) {
+      composeSteps.push({ id: "domains", label: "Domains" });
+    }
+    composeSteps.push({ id: "configure", label: "Configure" });
+    composeSteps.push({ id: "review", label: "Review" });
+    return composeSteps;
+  }
+  return easySteps;
+});
+
+const currentStepId = computed(() => {
+  if (currentStep.value === 0) return "mode";
+  return steps.value[currentStep.value - 1]?.id || "";
+});
 
 const generatePassword = () => {
   const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
@@ -1944,6 +2229,10 @@ watch(
       showRegistryPassword.value = false;
       existingDbContainers.value = [];
       existingCredentials.value = [];
+      advancedOptions.multiDomain = false;
+      advancedOptions.multiDatabase = false;
+      additionalDomains.value = [];
+      additionalDatabases.value = [];
       errors.name = "";
       errors.composeContent = "";
       selectedQuickApp.value = "";
@@ -2084,7 +2373,56 @@ const handleCreate = async () => {
       }
     }
 
+    if (advancedOptions.multiDatabase && additionalDatabases.value.length > 0) {
+      const databases = additionalDatabases.value
+        .filter((db) => db.type !== "none")
+        .map((db) => ({
+          alias: db.alias,
+          type: db.type,
+          mode: db.mode,
+          service: db.service || undefined,
+          existing_container: db.mode === "existing" ? db.existingContainer : undefined,
+          external_host: db.mode === "external" ? db.externalHost : undefined,
+          external_port: db.mode === "external" && db.externalPort ? parseInt(db.externalPort) : undefined,
+          database_name: db.dbName || undefined,
+          username: db.dbUser || undefined,
+          env_prefix: db.envPrefix || db.alias,
+        }));
+
+      if (databases.length > 0) {
+        payload.databases = databases;
+      }
+    }
+
     if (finalDomain) {
+      const domainsArray = [];
+
+      domainsArray.push({
+        id: "primary",
+        domain: finalDomain,
+        service: form.name,
+        container_port: form.networking.ports[0]?.containerPort || 80,
+        ssl: {
+          enabled: form.ssl.enabled,
+          auto_cert: form.ssl.autoCert,
+        },
+      });
+
+      if (advancedOptions.multiDomain && additionalDomains.value.length > 0) {
+        for (const d of additionalDomains.value) {
+          if (d.domain.trim()) {
+            domainsArray.push({
+              id: d.id,
+              domain: d.domain,
+              service: d.service || form.name,
+              container_port: d.containerPort || 80,
+              path_prefix: d.pathPrefix || undefined,
+              ssl: d.ssl,
+            });
+          }
+        }
+      }
+
       payload.metadata = {
         name: form.name,
         type: "web",
@@ -2102,6 +2440,7 @@ const handleCreate = async () => {
           path: "/health",
           interval: "30s",
         },
+        domains: domainsArray.length > 1 ? domainsArray : undefined,
       };
     }
 
@@ -3777,6 +4116,380 @@ const handleClose = () => {
   color: var(--color-info-700);
 }
 
+/* Advanced Options Section */
+.advanced-options-section {
+  border-top: 1px solid var(--color-gray-200);
+  padding-top: var(--space-4);
+  margin-top: var(--space-2);
+}
+
+.advanced-options-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--color-gray-700);
+  margin-bottom: var(--space-3);
+}
+
+.advanced-options-header i {
+  color: var(--color-gray-400);
+}
+
+.advanced-options-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.advanced-option {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  background: var(--color-gray-50);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.advanced-option:hover {
+  background: var(--color-gray-100);
+}
+
+.advanced-option input[type="checkbox"] {
+  margin-top: 2px;
+}
+
+.advanced-option .option-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.advanced-option .option-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-gray-900);
+}
+
+.advanced-option .option-label i {
+  color: var(--color-gray-500);
+  font-size: var(--text-xs);
+}
+
+.advanced-option .option-desc {
+  font-size: var(--text-xs);
+  color: var(--color-gray-500);
+}
+
+/* Domains Step */
+.domains-step {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.domains-step-header .step-intro h3 {
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--color-gray-900);
+  margin: 0 0 var(--space-1) 0;
+}
+
+.domains-step-header .step-intro p {
+  font-size: var(--text-sm);
+  color: var(--color-gray-500);
+  margin: 0;
+}
+
+.domains-list-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.domain-card {
+  background: white;
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+}
+
+.domain-card.primary {
+  background: var(--color-primary-50);
+  border-color: var(--color-primary-200);
+}
+
+.domain-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+}
+
+.domain-badge {
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--color-gray-600);
+  background: var(--color-gray-100);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+}
+
+.domain-badge.primary-badge {
+  color: var(--color-primary-700);
+  background: var(--color-primary-100);
+}
+
+.domain-preview {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+  color: var(--color-gray-700);
+}
+
+.domain-preview i {
+  color: var(--color-primary-500);
+}
+
+.domain-hint {
+  color: var(--color-gray-400);
+  font-size: var(--text-xs);
+}
+
+.domain-form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+}
+
+.domain-form-grid .form-field:first-child {
+  grid-column: 1 / -1;
+}
+
+.domain-form-grid .ssl-toggle {
+  grid-column: 1 / -1;
+}
+
+.domain-card .remove-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-red-50);
+  color: var(--color-red-500);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.domain-card .remove-btn:hover {
+  background: var(--color-red-100);
+  color: var(--color-red-600);
+}
+
+.add-domain-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-3);
+  background: white;
+  border: 2px dashed var(--color-gray-300);
+  border-radius: var(--radius-lg);
+  color: var(--color-gray-600);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.add-domain-btn:hover {
+  border-color: var(--color-primary-400);
+  color: var(--color-primary-600);
+  background: var(--color-primary-50);
+}
+
+/* Additional Databases Section */
+.additional-databases-section {
+  margin-top: var(--space-4);
+}
+
+.section-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+
+.section-divider::before,
+.section-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--color-gray-200);
+}
+
+.section-divider span {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-gray-500);
+}
+
+.additional-db-card {
+  background: var(--color-gray-50);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  margin-bottom: var(--space-3);
+}
+
+.db-card-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+}
+
+.db-alias-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.db-alias-input label {
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--color-gray-600);
+}
+
+.db-alias-input .alias-field {
+  width: 150px;
+  padding: var(--space-2);
+  font-size: var(--text-sm);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-md);
+}
+
+.db-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.db-type-row {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.db-type-btn {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--color-gray-600);
+  background: white;
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-transform: uppercase;
+}
+
+.db-type-btn:hover {
+  border-color: var(--color-primary-400);
+  color: var(--color-primary-600);
+}
+
+.db-type-btn.selected {
+  background: var(--color-primary-500);
+  border-color: var(--color-primary-500);
+  color: white;
+}
+
+.db-mode-row {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.mode-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--color-gray-600);
+  background: white;
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.mode-btn:hover {
+  border-color: var(--color-primary-400);
+  color: var(--color-primary-600);
+}
+
+.mode-btn.selected {
+  background: var(--color-primary-50);
+  border-color: var(--color-primary-400);
+  color: var(--color-primary-600);
+}
+
+.db-external-config {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  background: white;
+  border-radius: var(--radius-md);
+}
+
+.db-env-preview {
+  padding: var(--space-2);
+  background: var(--color-gray-100);
+  border-radius: var(--radius-sm);
+}
+
+.db-env-preview .env-prefix {
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--color-gray-600);
+}
+
+.add-db-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-3);
+  background: white;
+  border: 2px dashed var(--color-gray-300);
+  border-radius: var(--radius-lg);
+  color: var(--color-gray-600);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.add-db-btn:hover {
+  border-color: var(--color-primary-400);
+  color: var(--color-primary-600);
+  background: var(--color-primary-50);
+}
+
 /* Image Config Card */
 .image-config-card {
   flex: 1;
diff --git a/src/services/api.ts b/src/services/api.ts
index ed9d9bf..5b42335 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -13,6 +13,7 @@ import type {
   BlockedIP,
   ProtectedRoute,
   DeploymentSecurityConfig,
+  DomainConfig,
 } from "@/types";
 
 const apiClient = axios.create({
@@ -127,6 +128,13 @@ export const deploymentsApi = {
   getEnvVars: (name: string) => apiClient.get<{ env_vars: EnvVar[] }>(`/deployments/${name}/env`),
   updateEnvVars: (name: string, envVars: EnvVar[]) => apiClient.put(`/deployments/${name}/env`, { env_vars: envVars }),
   disableSSL: (name: string) => apiClient.post<{ message: string; name: string }>(`/deployments/${name}/ssl/disable`),
+  listDomains: (name: string) => apiClient.get<{ domains: DomainConfig[] }>(`/deployments/${name}/domains`),
+  addDomain: (name: string, domain: Omit<DomainConfig, "id">) =>
+    apiClient.post<{ message: string; domain: DomainConfig }>(`/deployments/${name}/domains`, domain),
+  updateDomain: (name: string, domainId: string, domain: Partial<DomainConfig>) =>
+    apiClient.put<{ message: string; domain: DomainConfig }>(`/deployments/${name}/domains/${domainId}`, domain),
+  deleteDomain: (name: string, domainId: string) =>
+    apiClient.delete<{ message: string }>(`/deployments/${name}/domains/${domainId}`),
 };
 
 export const networksApi = {
diff --git a/src/types/index.ts b/src/types/index.ts
index 36dd7f4..b4039d7 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -28,6 +28,34 @@ export interface ServiceMetadata {
   quick_actions?: QuickAction[];
   security?: DeploymentSecurityConfig;
   credential_id?: string;
+  domains?: DomainConfig[];
+  databases?: DatabaseConfig[];
+}
+
+export interface DatabaseConfig {
+  id: string;
+  alias: string;
+  type: "mysql" | "postgres" | "mariadb" | "mongodb" | "redis";
+  mode: "shared" | "create" | "existing" | "external";
+  service?: string;
+  host?: string;
+  port?: number;
+  container?: string;
+  database_name?: string;
+  username?: string;
+  env_prefix?: string;
+  is_shared?: boolean;
+}
+
+export interface DomainConfig {
+  id: string;
+  service: string;
+  container_port: number;
+  domain: string;
+  path_prefix?: string;
+  strip_prefix?: boolean;
+  ssl: SSLConfig;
+  aliases?: string[];
 }
 
 export interface QuickAction {
@@ -91,10 +119,13 @@ export interface ProxyStatus {
   deployment_name: string;
   exposed: boolean;
   domain?: string;
+  domains?: string[];
+  domains_config?: DomainConfig[];
   virtual_host_exists: boolean;
   ssl_enabled: boolean;
   certificate_exists: boolean;
   certificate?: Certificate;
+  certificates?: Certificate[];
 }
 
 export interface ProxySetupResult {
diff --git a/src/views/DeploymentDetailView.test.ts b/src/views/DeploymentDetailView.test.ts
index 494c74d..2fdb277 100644
--- a/src/views/DeploymentDetailView.test.ts
+++ b/src/views/DeploymentDetailView.test.ts
@@ -418,4 +418,139 @@ describe("DeploymentDetailView", () => {
       expect(wrapper.find(".deployment-detail").exists()).toBe(true);
     });
   });
+
+  describe("Domain management", () => {
+    it("computes hasMultipleDomains as false when no domains", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+      expect((wrapper.vm as any).hasMultipleDomains).toBeFalsy();
+    });
+
+    it("computes hasMultipleDomains as false when one domain", async () => {
+      const { deploymentsApi } = await import("@/services/api");
+      vi.mocked(deploymentsApi.get).mockResolvedValueOnce({
+        data: {
+          deployment: {
+            name: "test-app",
+            status: "running",
+            path: "/deployments/test-app",
+            services: [],
+            created_at: "2024-01-01T00:00:00Z",
+            updated_at: "2024-01-01T00:00:00Z",
+            metadata: {
+              domains: [{ id: "domain-1", domain: "app.example.com" }],
+            },
+          },
+          proxy_status: { exposed: true, domain: "app.example.com" },
+        },
+      } as any);
+
+      const wrapper = mountView();
+      await flushPromises();
+      expect((wrapper.vm as any).hasMultipleDomains).toBe(false);
+    });
+
+    it("computes hasMultipleDomains as true when multiple domains", async () => {
+      const { deploymentsApi } = await import("@/services/api");
+      vi.mocked(deploymentsApi.get).mockResolvedValueOnce({
+        data: {
+          deployment: {
+            name: "test-app",
+            status: "running",
+            path: "/deployments/test-app",
+            services: [],
+            created_at: "2024-01-01T00:00:00Z",
+            updated_at: "2024-01-01T00:00:00Z",
+            metadata: {
+              domains: [
+                { id: "domain-1", domain: "app.example.com" },
+                { id: "domain-2", domain: "api.example.com" },
+              ],
+            },
+          },
+          proxy_status: { exposed: true },
+        },
+      } as any);
+
+      const wrapper = mountView();
+      await flushPromises();
+      expect((wrapper.vm as any).hasMultipleDomains).toBe(true);
+    });
+
+    it("computes singleDomainId from explicit domain", async () => {
+      const { deploymentsApi } = await import("@/services/api");
+      vi.mocked(deploymentsApi.get).mockResolvedValueOnce({
+        data: {
+          deployment: {
+            name: "test-app",
+            status: "running",
+            path: "/deployments/test-app",
+            services: [],
+            created_at: "2024-01-01T00:00:00Z",
+            updated_at: "2024-01-01T00:00:00Z",
+            metadata: {
+              domains: [{ id: "my-domain-id", domain: "app.example.com" }],
+            },
+          },
+          proxy_status: { exposed: true },
+        },
+      } as any);
+
+      const wrapper = mountView();
+      await flushPromises();
+      expect((wrapper.vm as any).singleDomainId).toBe("my-domain-id");
+    });
+
+    it("computes singleDomainId as 'default' for legacy domain", async () => {
+      const { deploymentsApi, proxyApi } = await import("@/services/api");
+      vi.mocked(deploymentsApi.get).mockResolvedValueOnce({
+        data: {
+          deployment: {
+            name: "test-app",
+            status: "running",
+            path: "/deployments/test-app",
+            services: [],
+            created_at: "2024-01-01T00:00:00Z",
+            updated_at: "2024-01-01T00:00:00Z",
+            metadata: {
+              networking: { expose: true, domain: "legacy.example.com" },
+            },
+          },
+          proxy_status: { exposed: true, domain: "legacy.example.com" },
+        },
+      } as any);
+      vi.mocked(proxyApi.getStatus).mockResolvedValueOnce({
+        data: { status: { exposed: true, domain: "legacy.example.com" } },
+      } as any);
+
+      const wrapper = mountView();
+      await flushPromises();
+      expect((wrapper.vm as any).singleDomainId).toBe("default");
+    });
+
+    it("computes singleDomainId as null when no domains", async () => {
+      const { deploymentsApi, proxyApi } = await import("@/services/api");
+      vi.mocked(deploymentsApi.get).mockResolvedValueOnce({
+        data: {
+          deployment: {
+            name: "test-app",
+            status: "running",
+            path: "/deployments/test-app",
+            services: [],
+            created_at: "2024-01-01T00:00:00Z",
+            updated_at: "2024-01-01T00:00:00Z",
+            metadata: {},
+          },
+          proxy_status: { exposed: false },
+        },
+      } as any);
+      vi.mocked(proxyApi.getStatus).mockResolvedValueOnce({
+        data: { status: { exposed: false } },
+      } as any);
+
+      const wrapper = mountView();
+      await flushPromises();
+      expect((wrapper.vm as any).singleDomainId).toBeNull();
+    });
+  });
 });
diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue
index 83eea0c..66c79c3 100644
--- a/src/views/DeploymentDetailView.vue
+++ b/src/views/DeploymentDetailView.vue
@@ -156,12 +156,28 @@
               <div class="card-header">
                 <i class="pi pi-globe" />
                 <h3>Domain & SSL</h3>
-                <button class="btn btn-sm btn-icon" title="Edit Domain Settings" @click="openDomainSettings">
+                <button
+                  v-if="canWrite"
+                  class="btn btn-sm btn-icon"
+                  title="Edit Domain Settings"
+                  @click="openDomainSettings"
+                >
                   <i class="pi pi-pencil" />
                 </button>
               </div>
               <div class="card-body">
-                <template v-if="proxyStatus && proxyStatus.exposed">
+                <template v-if="hasMultipleDomains">
+                  <DomainsManager
+                    :deployment-name="route.params.name as string"
+                    :services="services"
+                    :proxy-status="proxyStatus"
+                    :can-edit="canWrite"
+                    :setting-up-proxy="settingUpProxy"
+                    @updated="fetchProxyStatus"
+                    @setup-proxy="handleSetupProxy"
+                  />
+                </template>
+                <template v-else-if="proxyStatus && proxyStatus.exposed">
                   <div class="info-row">
                     <span class="label">Domain</span>
                     <span class="value domain-link">
@@ -213,6 +229,7 @@
                       v-if="!proxyStatus.virtual_host_exists"
                       class="btn btn-sm btn-primary"
                       :disabled="settingUpProxy"
+                      title="Create nginx virtual host configuration"
                       @click="handleSetupProxy"
                     >
                       <i :class="settingUpProxy ? 'pi pi-spin pi-spinner' : 'pi pi-cog'" />
@@ -222,6 +239,7 @@
                       v-if="proxyStatus.ssl_enabled && !proxyStatus.certificate_exists"
                       class="btn btn-sm btn-success"
                       :disabled="requestingCert"
+                      title="Request Let's Encrypt certificate"
                       @click="handleRequestCertificate"
                     >
                       <i :class="requestingCert ? 'pi pi-spin pi-spinner' : 'pi pi-shield'" />
@@ -231,18 +249,38 @@
                       v-if="proxyStatus.ssl_enabled"
                       class="btn btn-sm btn-warning"
                       :disabled="disablingSSL"
+                      title="Disable SSL and revert to HTTP"
                       @click="handleDisableSSL"
                     >
                       <i :class="disablingSSL ? 'pi pi-spin pi-spinner' : 'pi pi-lock-open'" />
                       Disable SSL
                     </button>
+                    <button
+                      v-if="canWrite"
+                      class="btn btn-sm btn-secondary"
+                      title="Add another domain to this deployment"
+                      @click="showAddDomainModal = true"
+                    >
+                      <i class="pi pi-plus" />
+                      Add Domain
+                    </button>
+                    <button
+                      v-if="canWrite && singleDomainId"
+                      class="btn btn-sm btn-danger"
+                      title="Delete this domain"
+                      :disabled="deletingDomain"
+                      @click="handleDeleteDomain(singleDomainId!)"
+                    >
+                      <i :class="deletingDomain ? 'pi pi-spin pi-spinner' : 'pi pi-trash'" />
+                      Delete
+                    </button>
                   </div>
                 </template>
                 <template v-else>
                   <div class="empty-proxy">
                     <i class="pi pi-globe" />
                     <p>No domain configured</p>
-                    <span class="hint">Configure domain exposure in deployment settings</span>
+                    <span class="hint">Click the edit button to configure domain exposure</span>
                   </div>
                 </template>
               </div>
@@ -286,6 +324,45 @@
                 </div>
               </div>
             </div>
+
+            <div v-if="deployment.metadata?.databases?.length" class="info-card">
+              <div class="card-header">
+                <i class="pi pi-database" />
+                <h3>Databases</h3>
+              </div>
+              <div class="card-body">
+                <div class="databases-list">
+                  <div v-for="db in deployment.metadata.databases" :key="db.id" class="database-item">
+                    <div class="database-header">
+                      <span class="database-alias">{{ db.alias }}</span>
+                      <span class="database-type" :class="db.type">{{ db.type }}</span>
+                    </div>
+                    <div class="database-details">
+                      <div class="detail-row">
+                        <span class="detail-label">Mode</span>
+                        <span class="detail-value">{{ db.mode }}</span>
+                      </div>
+                      <div v-if="db.host" class="detail-row">
+                        <span class="detail-label">Host</span>
+                        <code class="detail-value">{{ db.host }}{{ db.port ? `:${db.port}` : "" }}</code>
+                      </div>
+                      <div v-if="db.database_name" class="detail-row">
+                        <span class="detail-label">Database</span>
+                        <code class="detail-value">{{ db.database_name }}</code>
+                      </div>
+                      <div v-if="db.username" class="detail-row">
+                        <span class="detail-label">User</span>
+                        <code class="detail-value">{{ db.username }}</code>
+                      </div>
+                      <div v-if="db.env_prefix" class="detail-row">
+                        <span class="detail-label">Env Prefix</span>
+                        <code class="detail-value">{{ db.env_prefix }}_*</code>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
 
           <div class="info-card wide">
@@ -1298,6 +1375,15 @@
         </div>
       </div>
     </Teleport>
+
+    <DomainFormModal
+      :visible="showAddDomainModal"
+      :services="services"
+      :deployment-name="route.params.name as string"
+      :loading="addingDomain"
+      @save="handleAddDomain"
+      @cancel="showAddDomainModal = false"
+    />
   </div>
 </template>
 
@@ -1325,6 +1411,8 @@ import LogViewer from "@/components/LogViewer.vue";
 import ConfirmModal from "@/components/ConfirmModal.vue";
 import ContainerTerminal from "@/components/ContainerTerminal.vue";
 import BackupsTab from "@/components/BackupsTab.vue";
+import DomainsManager from "@/components/DomainsManager.vue";
+import DomainFormModal from "@/components/DomainFormModal.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -1349,6 +1437,8 @@ const proxyStatus = ref<ProxyStatus | null>(null);
 const settingUpProxy = ref(false);
 const requestingCert = ref(false);
 const disablingSSL = ref(false);
+const showAddDomainModal = ref(false);
+const addingDomain = ref(false);
 
 const securityConfig = ref<DeploymentSecurityConfig>({
   enabled: false,
@@ -1389,6 +1479,24 @@ const resourceUsage = ref({
   network: 0,
 });
 
+const hasMultipleDomains = computed(() => {
+  return deployment.value?.metadata?.domains && deployment.value.metadata.domains.length > 1;
+});
+
+const singleDomainId = computed(() => {
+  const domains = deployment.value?.metadata?.domains;
+  if (domains && domains.length === 1) {
+    return domains[0].id;
+  }
+  // Legacy domain from networking config uses "default" as ID
+  if (!domains?.length && proxyStatus.value?.exposed) {
+    return "default";
+  }
+  return null;
+});
+
+const deletingDomain = ref(false);
+
 const registryCredential = ref<RegistryCredential | null>(null);
 const allCredentials = ref<RegistryCredential[]>([]);
 const showCredentialModal = ref(false);
@@ -1664,6 +1772,70 @@ const handleSetupProxy = async () => {
   }
 };
 
+const handleDeleteDomain = async (domainId: string) => {
+  deletingDomain.value = true;
+  try {
+    await deploymentsApi.deleteDomain(route.params.name as string, domainId);
+    notifications.success("Domain Deleted", "Domain has been removed");
+    await fetchDeployment();
+  } catch (err: any) {
+    const msg = err.response?.data?.error || err.message;
+    notifications.error("Delete Failed", msg);
+  } finally {
+    deletingDomain.value = false;
+  }
+};
+
+const fetchProxyStatus = async () => {
+  try {
+    const proxyResponse = await proxyApi.getStatus(route.params.name as string);
+    proxyStatus.value = proxyResponse.data.status;
+  } catch {
+    proxyStatus.value = null;
+  }
+};
+
+const handleAddDomain = async (newDomain: any) => {
+  if (!deployment.value?.metadata) return;
+
+  const currentDomain = deployment.value.metadata.networking?.domain;
+  const currentPort = deployment.value.metadata.networking?.container_port || 80;
+  const currentSSL = deployment.value.metadata.ssl || { enabled: false, auto_cert: false };
+
+  addingDomain.value = true;
+  try {
+    // First, convert existing legacy domain to a domain config
+    if (currentDomain) {
+      await deploymentsApi.addDomain(route.params.name as string, {
+        service: deployment.value.metadata.name || (route.params.name as string),
+        container_port: currentPort,
+        domain: currentDomain,
+        ssl: currentSSL,
+      });
+    }
+
+    // Then add the new domain
+    await deploymentsApi.addDomain(route.params.name as string, {
+      service: newDomain.service || deployment.value.metadata.name || (route.params.name as string),
+      container_port: newDomain.container_port || 80,
+      domain: newDomain.domain,
+      path_prefix: newDomain.path_prefix,
+      strip_prefix: newDomain.strip_prefix,
+      ssl: newDomain.ssl || { enabled: false, auto_cert: false },
+      aliases: newDomain.aliases,
+    });
+
+    notifications.success("Domain Added", `${newDomain.domain} has been added to this deployment`);
+    showAddDomainModal.value = false;
+    await fetchDeployment();
+  } catch (err: any) {
+    const msg = err.response?.data?.error || err.message;
+    notifications.error("Failed to Add Domain", msg);
+  } finally {
+    addingDomain.value = false;
+  }
+};
+
 const handleRequestCertificate = async () => {
   if (!proxyStatus.value?.domain) return;
 
@@ -2616,12 +2788,17 @@ onUnmounted(() => {
 
 .proxy-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--space-2);
   margin-top: var(--space-3);
   padding-top: var(--space-3);
   border-top: 1px solid var(--color-gray-100);
 }
 
+.proxy-actions .btn {
+  white-space: nowrap;
+}
+
 .empty-proxy {
   text-align: center;
   padding: var(--space-4);
@@ -2631,6 +2808,7 @@ onUnmounted(() => {
 .empty-proxy i {
   font-size: 2rem;
   margin-bottom: var(--space-2);
+  display: block;
 }
 
 .empty-proxy p {
@@ -2674,6 +2852,97 @@ onUnmounted(() => {
   font-weight: var(--font-medium);
 }
 
+/* Databases List */
+.databases-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.database-item {
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+  background: var(--color-gray-50);
+}
+
+.database-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-2);
+}
+
+.database-alias {
+  font-weight: var(--font-semibold);
+  color: var(--color-gray-900);
+}
+
+.database-type {
+  font-size: var(--text-xs);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-full);
+  font-weight: var(--font-medium);
+  text-transform: uppercase;
+  background: var(--color-gray-100);
+  color: var(--color-gray-700);
+}
+
+.database-type.mysql {
+  background: var(--color-info-100);
+  color: var(--color-info-700);
+}
+
+.database-type.postgres {
+  background: var(--color-primary-100);
+  color: var(--color-primary-700);
+}
+
+.database-type.mariadb {
+  background: var(--color-success-100);
+  color: var(--color-success-700);
+}
+
+.database-type.mongodb {
+  background: var(--color-warning-100);
+  color: var(--color-warning-700);
+}
+
+.database-type.redis {
+  background: var(--color-error-100);
+  color: var(--color-error-700);
+}
+
+.database-details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.database-details .detail-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+}
+
+.database-details .detail-label {
+  color: var(--color-gray-500);
+  min-width: 80px;
+}
+
+.database-details .detail-value {
+  color: var(--color-gray-700);
+}
+
+.database-details code.detail-value {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  background: var(--color-gray-100);
+  padding: var(--space-0-5) var(--space-1);
+  border-radius: var(--radius-xs);
+}
+
 .service-status.running {
   background: var(--color-success-50);
   color: var(--color-success-700);