diff --git a/src/components/AttachStoreModal.vue b/src/components/AttachStoreModal.vue
new file mode 100644
index 0000000..9829a15
--- /dev/null
+++ b/src/components/AttachStoreModal.vue
@@ -0,0 +1,139 @@
+<template>
+  <BaseModal
+    :visible="visible"
+    :title="store ? `Use ${store.name} in an app` : 'Use store in an app'"
+    subtitle="Injects the store's connection details into a deployment's environment."
+    size="md"
+    :close-disabled="busy"
+    @close="emit('close')"
+  >
+    <div v-if="result" class="result">
+      <p class="ok"><Icon name="circle-check" :size="16" /> Attached to {{ result.deployment }}.</p>
+      <p class="muted">These were written to its environment. Restart the deployment to apply.</p>
+      <ul class="keys">
+        <li v-for="k in result.keys" :key="k">
+          <code>{{ k }}</code>
+        </li>
+      </ul>
+    </div>
+
+    <div v-else class="form-stack">
+      <BaseField label="Deployment" hint="The app that should use this store.">
+        <BaseSelect v-model="deployment" :disabled="busy">
+          <option value="" disabled>Select a deployment</option>
+          <option v-for="d in deployments" :key="d" :value="d">{{ d }}</option>
+        </BaseSelect>
+      </BaseField>
+      <BaseField label="Variable prefix" hint="e.g. S3_ gives S3_ENDPOINT, S3_BUCKET, S3_ACCESS_KEY_ID…">
+        <BaseInput v-model="prefix" placeholder="S3_" :disabled="busy" />
+      </BaseField>
+    </div>
+
+    <template #footer>
+      <BaseButton v-if="result" variant="primary" @click="emit('close')">Done</BaseButton>
+      <template v-else>
+        <BaseButton variant="ghost" :disabled="busy" @click="emit('close')">Cancel</BaseButton>
+        <BaseButton variant="primary" icon="plug" :loading="busy" :disabled="!deployment" @click="attach">
+          Attach
+        </BaseButton>
+      </template>
+    </template>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import BaseField from "@/components/base/BaseField.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+import Icon from "@/components/base/Icon.vue";
+import { objectStoresApi, deploymentsApi, type BackupDestination } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+
+const props = defineProps<{ visible: boolean; store: BackupDestination | null }>();
+const emit = defineEmits(["close"]);
+
+const notifications = useNotificationsStore();
+
+const deployments = ref<string[]>([]);
+const deployment = ref("");
+const prefix = ref("S3_");
+const busy = ref(false);
+const result = ref<{ deployment: string; keys: string[] } | null>(null);
+
+watch(
+  () => props.visible,
+  async (open) => {
+    if (!open) return;
+    deployment.value = "";
+    prefix.value = "S3_";
+    result.value = null;
+    try {
+      const res = await deploymentsApi.list();
+      deployments.value = res.data.deployments
+        .map((d: { name: string }) => d.name)
+        .filter((n: string) => n !== props.store?.deployment);
+    } catch (e: any) {
+      notifications.error("Could not load deployments", e.response?.data?.error || e.message);
+      deployments.value = [];
+    }
+  },
+);
+
+async function attach() {
+  if (!props.store || !deployment.value) return;
+  busy.value = true;
+  try {
+    const res = await objectStoresApi.attach(props.store.name, {
+      deployment: deployment.value,
+      prefix: prefix.value.trim() || undefined,
+    });
+    result.value = { deployment: deployment.value, keys: res.data.keys };
+  } catch (e: any) {
+    notifications.error("Attach failed", e.response?.data?.error || e.message);
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.form-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.result {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.ok {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: var(--color-success-700, #15803d);
+  font-weight: var(--font-medium);
+}
+
+.keys {
+  margin: 0;
+  padding-left: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.keys code {
+  font-size: var(--text-sm);
+}
+
+.muted {
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+}
+</style>
diff --git a/src/components/DeployObjectStoreModal.vue b/src/components/DeployObjectStoreModal.vue
new file mode 100644
index 0000000..deb9ae7
--- /dev/null
+++ b/src/components/DeployObjectStoreModal.vue
@@ -0,0 +1,406 @@
+<template>
+  <BaseModal
+    :visible="visible"
+    :title="modalTitle"
+    :subtitle="modalSubtitle"
+    size="lg"
+    :close-disabled="busy"
+    @close="close"
+  >
+    <!-- Step: pick a store type -->
+    <div v-if="step === 'pick'">
+      <div v-if="loading" class="muted"><Icon name="loader-circle" spin :size="18" /> Loading stores…</div>
+
+      <div v-else class="store-picker">
+        <button v-for="t in stores" :key="t.id" type="button" class="store-option" @click="selectStore(t)">
+          <img v-if="t.logo" :src="t.logo" :alt="t.name" class="store-logo" />
+          <Icon v-else name="container" :size="20" />
+          <div class="store-option-text">
+            <span class="store-option-name">{{ t.name }}</span>
+            <span class="store-option-desc">{{ t.description }}</span>
+          </div>
+          <Icon name="chevron-right" :size="16" class="store-option-chevron" />
+        </button>
+
+        <button type="button" class="store-option" @click="startCustom">
+          <Icon name="plug" :size="20" />
+          <div class="store-option-text">
+            <span class="store-option-name">Use an existing deployment</span>
+            <span class="store-option-desc">Connect any S3-compatible container you already run.</span>
+          </div>
+          <Icon name="chevron-right" :size="16" class="store-option-chevron" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Step: configure a template store -->
+    <div v-else-if="step === 'configure'" class="form-stack">
+      <BaseField label="Store name" hint="Used as the deployment and connected-store name.">
+        <BaseInput v-model="form.name" placeholder="e.g. minio-store" :disabled="busy" />
+      </BaseField>
+
+      <label class="toggle-line">
+        <input v-model="form.autoRegister" type="checkbox" :disabled="busy" />
+        <span>
+          <strong>Auto-register as a connected store</strong>
+          <span class="toggle-hint">
+            Create the credential and backup destination so this store is ready for backups immediately. Turn off to
+            wire it up yourself later in Settings.
+          </span>
+        </span>
+      </label>
+    </div>
+
+    <!-- Step: connect an existing deployment -->
+    <div v-else class="form-stack">
+      <BaseField label="Deployment" hint="The running container that serves the S3 API.">
+        <BaseSelect v-model="custom.deployment" :disabled="busy">
+          <option value="" disabled>Select a deployment</option>
+          <option v-for="d in deployments" :key="d" :value="d">{{ d }}</option>
+        </BaseSelect>
+      </BaseField>
+      <div class="grid2">
+        <BaseField label="Store name"
+          ><BaseInput v-model="custom.name" placeholder="my-store" :disabled="busy"
+        /></BaseField>
+        <BaseField label="S3 API port"
+          ><BaseInput v-model="custom.apiPort" placeholder="9000" :disabled="busy"
+        /></BaseField>
+      </div>
+      <div class="grid2">
+        <BaseField label="Access key"
+          ><BaseInput v-model="custom.accessKey" placeholder="access key" :disabled="busy"
+        /></BaseField>
+        <BaseField label="Secret key">
+          <BaseInput v-model="custom.secretKey" type="password" placeholder="••••••••" :disabled="busy" />
+        </BaseField>
+      </div>
+      <BaseField label="Bucket"><BaseInput v-model="custom.bucket" placeholder="backups" :disabled="busy" /></BaseField>
+      <label class="checkbox-line">
+        <input v-model="custom.usePathStyle" type="checkbox" :disabled="busy" />
+        Use path-style addressing (required by MinIO and most self-hosted stores)
+      </label>
+    </div>
+
+    <template #footer>
+      <BaseButton v-if="step !== 'pick'" variant="ghost" :disabled="busy" @click="step = 'pick'">Back</BaseButton>
+      <BaseButton variant="ghost" :disabled="busy" @click="close">Cancel</BaseButton>
+      <BaseButton
+        v-if="step === 'configure'"
+        variant="primary"
+        icon="rocket"
+        :loading="busy"
+        :disabled="!canDeploy"
+        @click="deployTemplate"
+      >
+        Deploy store
+      </BaseButton>
+      <BaseButton
+        v-else-if="step === 'custom'"
+        variant="primary"
+        icon="link"
+        :loading="busy"
+        :disabled="!canConnect"
+        @click="connectExisting"
+      >
+        Connect store
+      </BaseButton>
+    </template>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from "vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import BaseField from "@/components/base/BaseField.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+import Icon from "@/components/base/Icon.vue";
+import { templatesApi, deploymentsApi, objectStoresApi, type ObjectStoreContract } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+
+interface ObjectStoreTemplate {
+  id: string;
+  name: string;
+  description: string;
+  logo?: string;
+  object_store?: ObjectStoreContract;
+}
+
+const props = defineProps<{ visible: boolean }>();
+const emit = defineEmits(["close", "created"]);
+
+const notifications = useNotificationsStore();
+
+const loading = ref(false);
+const busy = ref(false);
+const stores = ref<ObjectStoreTemplate[]>([]);
+const deployments = ref<string[]>([]);
+const step = ref<"pick" | "configure" | "custom">("pick");
+const selectedTemplate = ref<ObjectStoreTemplate | null>(null);
+
+const form = reactive({ name: "", autoRegister: true });
+const custom = reactive({
+  deployment: "",
+  name: "",
+  apiPort: "",
+  accessKey: "",
+  secretKey: "",
+  bucket: "",
+  usePathStyle: true,
+});
+
+const validName = (v: string) => /^[a-z0-9][a-z0-9-]*$/.test(v.trim());
+
+const canDeploy = computed(() => validName(form.name) && !!selectedTemplate.value);
+const canConnect = computed(
+  () =>
+    !!custom.deployment &&
+    validName(custom.name) &&
+    /^[0-9]+$/.test(custom.apiPort.trim()) &&
+    !!custom.accessKey.trim() &&
+    !!custom.secretKey.trim(),
+);
+
+const modalTitle = computed(() => {
+  if (step.value === "configure") return `Deploy ${selectedTemplate.value?.name}`;
+  if (step.value === "custom") return "Connect an existing store";
+  return "Deploy a local store";
+});
+const modalSubtitle = computed(() => {
+  if (step.value === "configure") return "Name the store and choose whether FlatRun connects it automatically.";
+  if (step.value === "custom") return "Register a deployment you already run as a connected store.";
+  return "Run a self-hosted object store, or connect one you already deployed.";
+});
+
+watch(
+  () => props.visible,
+  (open) => {
+    if (open) {
+      step.value = "pick";
+      selectedTemplate.value = null;
+      form.name = "";
+      form.autoRegister = true;
+      Object.assign(custom, {
+        deployment: "",
+        name: "",
+        apiPort: "",
+        accessKey: "",
+        secretKey: "",
+        bucket: "",
+        usePathStyle: true,
+      });
+      loadStores();
+    }
+  },
+);
+
+async function loadStores() {
+  loading.value = true;
+  try {
+    const res = await templatesApi.list();
+    stores.value = (res.data.templates || []).filter((t: ObjectStoreTemplate) => t.object_store);
+  } catch (e: any) {
+    notifications.error("Could not load stores", e.response?.data?.error || e.message);
+    stores.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function selectStore(t: ObjectStoreTemplate) {
+  selectedTemplate.value = t;
+  form.name = t.id;
+  step.value = "configure";
+}
+
+async function startCustom() {
+  step.value = "custom";
+  try {
+    const res = await deploymentsApi.list();
+    deployments.value = res.data.deployments.map((d: { name: string }) => d.name);
+  } catch (e: any) {
+    notifications.error("Could not load deployments", e.response?.data?.error || e.message);
+    deployments.value = [];
+  }
+}
+
+async function deployTemplate() {
+  if (!canDeploy.value || !selectedTemplate.value) return;
+  const name = form.name.trim();
+  const template = selectedTemplate.value;
+
+  busy.value = true;
+  try {
+    const compose = await templatesApi.getCompose(template.id, name);
+    await deploymentsApi.create({
+      name,
+      compose_content: compose.data.content,
+      template_id: template.id,
+      auto_start: true,
+    });
+
+    if (form.autoRegister && template.object_store) {
+      try {
+        const c = template.object_store;
+        await objectStoresApi.provisionManaged({
+          deployment: name,
+          store_name: name,
+          access_key_env: c.access_key_env,
+          secret_key_env: c.secret_key_env,
+          api_port: c.api_port,
+          region: c.region,
+          use_path_style: c.use_path_style,
+        });
+        notifications.success("Store deployed", `${name} is deployed and connected.`);
+      } catch (e: any) {
+        notifications.error(
+          "Store deployed, not connected",
+          `${name} is running, but auto-registering it failed: ${e.response?.data?.error || e.message}. You can connect it from Object Stores → Deploy → Use an existing deployment.`,
+        );
+      }
+    } else {
+      notifications.success("Store deployed", `${name} is deployed.`);
+    }
+
+    emit("created");
+    close();
+  } catch (e: any) {
+    notifications.error("Failed to deploy store", e.response?.data?.error || e.message);
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function connectExisting() {
+  if (!canConnect.value) return;
+  busy.value = true;
+  try {
+    await objectStoresApi.provisionManaged({
+      deployment: custom.deployment,
+      store_name: custom.name.trim(),
+      bucket: custom.bucket.trim() || undefined,
+      access_key: custom.accessKey.trim(),
+      secret_key: custom.secretKey.trim(),
+      api_port: parseInt(custom.apiPort.trim(), 10),
+      use_path_style: custom.usePathStyle,
+    });
+    notifications.success("Store connected", `${custom.name.trim()} is now a connected store.`);
+    emit("created");
+    close();
+  } catch (e: any) {
+    notifications.error("Could not connect store", e.response?.data?.error || e.message);
+  } finally {
+    busy.value = false;
+  }
+}
+
+function close() {
+  if (busy.value) return;
+  emit("close");
+}
+</script>
+
+<style scoped>
+.form-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.grid2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+}
+
+.store-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.store-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  padding: var(--space-3);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  text-align: left;
+  color: var(--text);
+}
+
+.store-option:hover {
+  border-color: var(--accent);
+  background: var(--surface-inset);
+}
+
+.store-logo {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.store-option-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.store-option-name {
+  font-weight: var(--font-semibold);
+}
+
+.store-option-desc {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.store-option-chevron {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.toggle-line {
+  display: flex;
+  gap: var(--space-3);
+  align-items: flex-start;
+  cursor: pointer;
+}
+
+.toggle-line input {
+  margin-top: 0.2rem;
+}
+
+.toggle-line span {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.toggle-hint {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.checkbox-line {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.muted {
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+}
+</style>
diff --git a/src/components/NewDeploymentModal.vue b/src/components/NewDeploymentModal.vue
index 7cd7a2c..05d0b5d 100644
--- a/src/components/NewDeploymentModal.vue
+++ b/src/components/NewDeploymentModal.vue
@@ -1647,6 +1647,9 @@ interface QuickApp {
 
 const props = defineProps<{
   visible: boolean;
+  initialMode?: "easy" | "compose" | "image" | "git";
+  initialCompose?: string;
+  initialName?: string;
 }>();
 
 const emit = defineEmits(["close", "created"]);
@@ -2639,10 +2642,31 @@ watch(
       loadExistingDeployments();
       loadCredentials();
       loadSourceCredentials();
+
+      applyInitialSelection();
     }
   },
 );
 
+// applyInitialSelection preseeds the wizard when a caller opens it aimed at a
+// specific deploy mode (e.g. the Marketplace hands off a downloaded compose),
+// skipping the mode picker and landing on the configuration step.
+const applyInitialSelection = () => {
+  const mode = props.initialMode;
+  if (!mode) return;
+
+  deploymentMode.value = mode;
+  if (props.initialName) {
+    form.name = props.initialName.toLowerCase().replace(/[^a-z0-9-]+/g, "-");
+    onNameChange();
+  }
+  if (mode === "compose") {
+    selectedQuickApp.value = "custom";
+    form.composeContent = props.initialCompose || getDefaultComposeContent();
+  }
+  currentStep.value = 1;
+};
+
 watch(deploymentMode, (newMode, oldMode) => {
   if (oldMode && newMode !== oldMode) {
     selectedQuickApp.value = "";
@@ -2897,7 +2921,7 @@ const handleCreate = async () => {
     };
 
     await deploymentsApi.create(payload);
-    emit("created");
+    emit("created", form.name);
   } catch (e: any) {
     const msg = e.response?.data?.error || e.message;
     notifications.error("Failed to create deployment", msg);
diff --git a/src/components/ReplicateStoreModal.vue b/src/components/ReplicateStoreModal.vue
new file mode 100644
index 0000000..d85d2ee
--- /dev/null
+++ b/src/components/ReplicateStoreModal.vue
@@ -0,0 +1,142 @@
+<template>
+  <BaseModal
+    :visible="visible"
+    :title="store ? `Replicate ${store.name}` : 'Replicate store'"
+    subtitle="Copy this store's objects to another store (offsite copy or local cache)."
+    size="md"
+    :close-disabled="busy"
+    @close="emit('close')"
+  >
+    <div v-if="result" class="result">
+      <p class="ok"><Icon name="circle-check" :size="16" /> {{ result.message }}</p>
+      <dl class="stats">
+        <dt>Copied</dt>
+        <dd>{{ result.copied }}</dd>
+        <dt>Skipped (unchanged)</dt>
+        <dd>{{ result.skipped }}</dd>
+        <dt v-if="result.failed">Failed</dt>
+        <dd v-if="result.failed" class="fail">{{ result.failed }}</dd>
+      </dl>
+    </div>
+
+    <div v-else class="form-stack">
+      <BaseField label="Target store" hint="Where to copy this store's objects.">
+        <BaseSelect v-model="target" :disabled="busy">
+          <option value="" disabled>Select a target store</option>
+          <option v-for="t in targets" :key="t.name" :value="t.name">
+            {{ t.name }} ({{ t.kind === "managed" ? "managed" : "external" }})
+          </option>
+        </BaseSelect>
+      </BaseField>
+      <p v-if="!targets.length" class="muted">No other store to replicate to. Connect one first.</p>
+    </div>
+
+    <template #footer>
+      <BaseButton v-if="result" variant="primary" @click="emit('close')">Done</BaseButton>
+      <template v-else>
+        <BaseButton variant="ghost" :disabled="busy" @click="emit('close')">Cancel</BaseButton>
+        <BaseButton variant="primary" icon="copy" :loading="busy" :disabled="!target" @click="run">
+          Replicate now
+        </BaseButton>
+      </template>
+    </template>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import BaseField from "@/components/base/BaseField.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+import Icon from "@/components/base/Icon.vue";
+import { objectStoresApi, backupDestinationsApi, type BackupDestination } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+
+const props = defineProps<{ visible: boolean; store: BackupDestination | null }>();
+const emit = defineEmits(["close"]);
+
+const notifications = useNotificationsStore();
+
+const targets = ref<BackupDestination[]>([]);
+const target = ref("");
+const busy = ref(false);
+const result = ref<{ message: string; copied: number; skipped: number; failed: number } | null>(null);
+
+watch(
+  () => props.visible,
+  async (open) => {
+    if (!open) return;
+    target.value = "";
+    result.value = null;
+    try {
+      const res = await backupDestinationsApi.list();
+      targets.value = (res.data.destinations || []).filter((d) => d.name !== props.store?.name);
+    } catch (e: any) {
+      notifications.error("Could not load stores", e.response?.data?.error || e.message);
+      targets.value = [];
+    }
+  },
+);
+
+async function run() {
+  if (!props.store || !target.value) return;
+  busy.value = true;
+  try {
+    const res = await objectStoresApi.replicate(props.store.name, target.value);
+    result.value = res.data;
+  } catch (e: any) {
+    notifications.error("Replication failed", e.response?.data?.error || e.message);
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.form-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.result {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.ok {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: var(--color-success-700, #15803d);
+  font-weight: var(--font-medium);
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.3rem 1rem;
+  margin: 0;
+}
+
+.stats dt {
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+}
+
+.stats dd {
+  margin: 0;
+  font-weight: var(--font-medium);
+}
+
+.stats dd.fail {
+  color: var(--color-danger-600, #dc2626);
+}
+
+.muted {
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 5e910d4..fdee118 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -100,6 +100,18 @@ const routes: RouteRecordRaw[] = [
         component: () => import("@/views/ObjectStoresView.vue"),
         meta: { permission: "backups:read" },
       },
+      {
+        path: "storage/object-stores/:name",
+        name: "object-store-detail",
+        component: () => import("@/views/ObjectStoreDetailView.vue"),
+        meta: { permission: "backups:read" },
+      },
+      {
+        path: "storage/object-stores/:name/buckets/:bucket",
+        name: "object-store-bucket",
+        component: () => import("@/views/ObjectBucketView.vue"),
+        meta: { permission: "backups:read" },
+      },
       {
         path: "certificates",
         name: "certificates",
diff --git a/src/services/api.ts b/src/services/api.ts
index 90e7c44..8b65b90 100755
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1121,6 +1121,96 @@ export const backupDestinationsApi = {
     apiClient.post<{ success: boolean; message?: string; error?: string }>("/backup-destinations/test", data),
 };
 
+export interface ObjectStoreContract {
+  access_key_env?: string;
+  secret_key_env?: string;
+  api_port: number;
+  region?: string;
+  use_path_style?: boolean;
+}
+
+export interface StoreObject {
+  Key: string;
+  Size: number;
+  ModTime: string;
+}
+
+export interface StoreBucket {
+  name: string;
+  objects: number;
+  size: number;
+  truncated: boolean;
+  is_backup: boolean;
+}
+
+export const objectStoresApi = {
+  listBuckets: (name: string) =>
+    apiClient.get<{ buckets: StoreBucket[]; backup_bucket: string }>(
+      `/object-stores/${encodeURIComponent(name)}/buckets`,
+    ),
+  createBucket: (name: string, bucket: string) =>
+    apiClient.post<{ message: string; bucket: string }>(`/object-stores/${encodeURIComponent(name)}/buckets`, {
+      bucket,
+    }),
+  deleteBucket: (name: string, bucket: string) =>
+    apiClient.delete(`/object-stores/${encodeURIComponent(name)}/buckets/${encodeURIComponent(bucket)}`),
+  listObjects: (name: string, bucket?: string, token?: string, prefix?: string) =>
+    apiClient.get<{ objects: StoreObject[]; next_token: string }>(
+      `/object-stores/${encodeURIComponent(name)}/objects`,
+      { params: { ...(bucket ? { bucket } : {}), ...(token ? { token } : {}), ...(prefix ? { prefix } : {}) } },
+    ),
+  uploadObject: (name: string, file: File, bucket?: string, key?: string) => {
+    const form = new FormData();
+    form.append("file", file);
+    if (key) form.append("key", key);
+    return apiClient.post<{ message: string; key: string }>(
+      `/object-stores/${encodeURIComponent(name)}/objects`,
+      form,
+      { params: bucket ? { bucket } : undefined, headers: { "Content-Type": "multipart/form-data" } },
+    );
+  },
+  downloadObject: (name: string, key: string, bucket?: string, inline?: boolean) =>
+    apiClient.get(`/object-stores/${encodeURIComponent(name)}/objects/download`, {
+      params: { key, ...(bucket ? { bucket } : {}), ...(inline ? { inline: "true" } : {}) },
+      responseType: "blob",
+    }),
+  deleteObject: (name: string, key: string, bucket?: string) =>
+    apiClient.delete(`/object-stores/${encodeURIComponent(name)}/objects`, {
+      params: { key, ...(bucket ? { bucket } : {}) },
+    }),
+  attach: (name: string, data: { deployment: string; prefix?: string }) =>
+    apiClient.post<{ message: string; keys: string[]; endpoint: string; network: string }>(
+      `/object-stores/${encodeURIComponent(name)}/attach`,
+      data,
+    ),
+  replicate: (name: string, target: string) =>
+    apiClient.post<{
+      message: string;
+      target: string;
+      copied: number;
+      skipped: number;
+      failed: number;
+      bytes_copied: number;
+      total_objects: number;
+    }>(`/object-stores/${encodeURIComponent(name)}/replicate`, { target }),
+  provisionManaged: (
+    data: {
+      deployment: string;
+      store_name?: string;
+      bucket?: string;
+      access_key?: string;
+      secret_key?: string;
+    } & ObjectStoreContract,
+  ) =>
+    apiClient.post<{
+      message: string;
+      destination: BackupDestination;
+      credential: StorageCredential;
+      applied: boolean;
+      apply_error?: string;
+    }>("/object-stores/provision-managed", data),
+};
+
 export interface SecurityEventFilter {
   event_type?: string;
   severity?: string;
diff --git a/src/views/MarketplaceView.vue b/src/views/MarketplaceView.vue
index 784dbce..3436318 100644
--- a/src/views/MarketplaceView.vue
+++ b/src/views/MarketplaceView.vue
@@ -98,40 +98,23 @@
             <Icon name="check" :size="15" />
             Installed
           </button>
-          <button v-else class="btn btn-primary" @click="openInstall(app)">
-            <Icon name="download" :size="15" />
-            Install
+          <button v-else class="btn btn-primary" :disabled="preparing === app.slug" @click="openInstall(app)">
+            <Icon v-if="preparing === app.slug" name="loader-circle" spin :size="15" />
+            <Icon v-else name="download" :size="15" />
+            Deploy
           </button>
         </div>
       </div>
     </div>
 
-    <!-- Install modal -->
-    <Teleport to="body">
-      <div v-if="installTarget" class="modal-overlay" @click.self="closeInstall">
-        <div class="install-modal">
-          <div class="modal-header">
-            <h3>Deploy {{ installTarget.name }}</h3>
-            <button class="icon-btn" @click="closeInstall"><Icon name="x" :size="18" /></button>
-          </div>
-          <div class="modal-body">
-            <p class="modal-note">
-              This downloads the template and creates a new deployment. Pick a name (it must be unique).
-            </p>
-            <label class="field-label">Deployment name</label>
-            <input v-model="installName" type="text" class="text-input" placeholder="my-app" />
-          </div>
-          <div class="modal-footer">
-            <button class="btn btn-secondary" :disabled="installing" @click="closeInstall">Cancel</button>
-            <button class="btn btn-primary" :disabled="installing || !installName.trim()" @click="confirmInstall">
-              <Icon v-if="installing" name="loader-circle" spin :size="15" />
-              <Icon v-else name="download" :size="15" />
-              {{ installing ? "Deploying…" : "Deploy" }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </Teleport>
+    <NewDeploymentModal
+      :visible="showDeployModal"
+      initial-mode="compose"
+      :initial-compose="installCompose"
+      :initial-name="installName"
+      @close="showDeployModal = false"
+      @created="onDeployed"
+    />
   </div>
 </template>
 
@@ -139,8 +122,8 @@
 import { ref, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import Icon from "@/components/base/Icon.vue";
+import NewDeploymentModal from "@/components/NewDeploymentModal.vue";
 import { marketplaceApi, type MarketplaceTemplate, type MarketplaceCategory } from "@/services/marketplace";
-import { deploymentsApi } from "@/services/api";
 import { useDeploymentsStore } from "@/stores/deployments";
 import { useNotificationsStore } from "@/stores/notifications";
 
@@ -156,9 +139,10 @@ const searchQuery = ref("");
 const selectedCategory = ref("all");
 const brokenLogos = ref<Set<string>>(new Set());
 
-const installTarget = ref<MarketplaceTemplate | null>(null);
+const showDeployModal = ref(false);
+const installCompose = ref("");
 const installName = ref("");
-const installing = ref(false);
+const preparing = ref<string | null>(null);
 
 async function load() {
   loading.value = true;
@@ -213,35 +197,28 @@ function openDeployment(app: MarketplaceTemplate) {
   router.push(`/deployments/${app.slug}`);
 }
 
-function openInstall(app: MarketplaceTemplate) {
-  installTarget.value = app;
-  installName.value = app.slug;
-}
-
-function closeInstall() {
-  if (installing.value) return;
-  installTarget.value = null;
-  installName.value = "";
-}
-
-async function confirmInstall() {
-  if (!installTarget.value) return;
-  const app = installTarget.value;
-  const name = installName.value.trim();
-  installing.value = true;
+// The store is a discovery surface: deploying downloads the template's compose
+// and hands it to the standard deployment flow so it gets the same name, domain,
+// SSL, and database options as deploying from anywhere else.
+async function openInstall(app: MarketplaceTemplate) {
+  preparing.value = app.slug;
   try {
     const payload = await marketplaceApi.download(app.slug);
-    await deploymentsApi.create({ name, compose_content: payload.data.content });
-    await deploymentsStore.fetchDeployments();
-    notifications.success("Deployed", `${app.name} was deployed as "${name}".`);
-    installTarget.value = null;
-    router.push(`/deployments/${name}`);
+    installCompose.value = payload.data.content;
+    installName.value = app.slug;
+    showDeployModal.value = true;
   } catch (e: any) {
-    notifications.error("Install failed", e?.response?.data?.error || e?.message || "Could not deploy the template.");
+    notifications.error("Could not load template", e?.response?.data?.error || e?.message || "Download failed.");
   } finally {
-    installing.value = false;
+    preparing.value = null;
   }
 }
+
+async function onDeployed(name: string) {
+  showDeployModal.value = false;
+  await deploymentsStore.fetchDeployments();
+  router.push(`/deployments/${name}`);
+}
 </script>
 
 <style scoped>
@@ -600,89 +577,4 @@ async function confirmInstall() {
     animation: none;
   }
 }
-
-/* Modal */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: var(--space-4);
-}
-
-.install-modal {
-  background: var(--surface-raised);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  width: 100%;
-  max-width: 440px;
-  box-shadow: var(--shadow-lg);
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-4) var(--space-5);
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: var(--text-lg);
-  color: var(--text);
-}
-
-.icon-btn {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  display: inline-flex;
-}
-
-.modal-body {
-  padding: var(--space-5);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.modal-note {
-  margin: 0 0 var(--space-2) 0;
-  font-size: var(--text-sm);
-  color: var(--text-muted);
-}
-
-.field-label {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--text);
-}
-
-.text-input {
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-md);
-  background: var(--surface);
-  color: var(--text);
-}
-
-.text-input:focus {
-  outline: none;
-  border-color: var(--color-primary-500);
-  box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--space-2);
-  padding: var(--space-4) var(--space-5);
-  border-top: 1px solid var(--border-subtle);
-}
 </style>
diff --git a/src/views/ObjectBucketView.vue b/src/views/ObjectBucketView.vue
new file mode 100644
index 0000000..b51adb9
--- /dev/null
+++ b/src/views/ObjectBucketView.vue
@@ -0,0 +1,486 @@
+<template>
+  <div class="bucket-view">
+    <nav class="crumbs">
+      <button type="button" class="crumb" @click="router.push('/storage/object-stores')">Object Stores</button>
+      <Icon name="chevron-right" :size="13" />
+      <button type="button" class="crumb" @click="router.push(`/storage/object-stores/${encodeURIComponent(name)}`)">
+        {{ name }}
+      </button>
+      <Icon name="chevron-right" :size="13" />
+      <span class="crumb current">{{ bucket }}</span>
+    </nav>
+
+    <BaseCard>
+      <div class="toolbar">
+        <h2><Icon name="folder-open" :size="16" /> {{ bucket }}</h2>
+        <span v-if="isProtected" class="protected"><Icon name="shield" :size="12" /> Backups (delete disabled)</span>
+        <span class="spacer" />
+        <span class="count muted"
+          >{{ objects.length }}{{ nextToken ? "+" : "" }} object{{ objects.length === 1 ? "" : "s" }}</span
+        >
+        <BaseButton variant="secondary" size="sm" icon="refresh-cw" :loading="loading" @click="reload"
+          >Refresh</BaseButton
+        >
+        <input ref="fileInput" type="file" class="hidden-file" @change="onFilePicked" />
+        <BaseButton v-if="canWrite" variant="primary" size="sm" icon="upload" :loading="uploading" @click="pickFile">
+          Upload
+        </BaseButton>
+      </div>
+
+      <div v-if="loading && !objects.length" class="state muted">
+        <Icon name="loader-circle" spin :size="18" /> Loading…
+      </div>
+
+      <div v-else-if="!objects.length" class="state empty">
+        <Icon name="package-open" :size="28" />
+        <p>This bucket is empty.</p>
+      </div>
+
+      <template v-else>
+        <table class="obj-table">
+          <thead>
+            <tr>
+              <th>Key</th>
+              <th class="num">Size</th>
+              <th>Modified</th>
+              <th class="actions-col" />
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="o in objects" :key="o.Key">
+              <td class="key">
+                <button v-if="previewable(o.Key)" class="key-link" @click="openPreview(o)">{{ o.Key }}</button>
+                <span v-else>{{ o.Key }}</span>
+              </td>
+              <td class="num">{{ formatBytes(o.Size) }}</td>
+              <td>{{ formatTime(o.ModTime) }}</td>
+              <td class="actions-col">
+                <button class="icon-action" title="Download" :disabled="busyKey === o.Key" @click="download(o)">
+                  <Icon name="download" :size="15" />
+                </button>
+                <button
+                  v-if="canWrite && !isProtected"
+                  class="icon-action danger"
+                  title="Delete"
+                  :disabled="busyKey === o.Key"
+                  @click="remove(o)"
+                >
+                  <Icon name="trash-2" :size="15" />
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div v-if="nextToken" class="load-more">
+          <BaseButton variant="secondary" size="sm" :loading="loadingMore" @click="loadMore">Load more</BaseButton>
+        </div>
+      </template>
+    </BaseCard>
+
+    <ConfirmModal
+      :visible="!!pendingDelete"
+      title="Delete object"
+      :message="pendingDelete ? `Delete “${pendingDelete.Key}” from ${bucket}? This cannot be undone.` : ''"
+      variant="danger"
+      confirm-text="Delete"
+      :loading="!!busyKey"
+      @confirm="confirmDelete"
+      @cancel="pendingDelete = null"
+    />
+
+    <BaseModal :visible="!!preview" :title="preview?.key || 'Preview'" size="xl" @close="closePreview">
+      <div v-if="preview" class="preview">
+        <img v-if="preview.kind === 'image'" :src="preview.url" :alt="preview.key" class="preview-img" />
+        <pre v-else class="preview-text">{{ preview.text }}</pre>
+      </div>
+    </BaseModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import Icon from "@/components/base/Icon.vue";
+import BaseCard from "@/components/base/BaseCard.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import ConfirmModal from "@/components/ConfirmModal.vue";
+import { backupDestinationsApi, objectStoresApi, type StoreObject } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+import { useAuthStore } from "@/stores/auth";
+
+const route = useRoute();
+const router = useRouter();
+const notifications = useNotificationsStore();
+const auth = useAuthStore();
+const canWrite = auth.hasPermission("backups:write");
+
+const name = route.params.name as string;
+const bucket = route.params.bucket as string;
+
+const objects = ref<StoreObject[]>([]);
+const nextToken = ref("");
+const loading = ref(false);
+const loadingMore = ref(false);
+const uploading = ref(false);
+const busyKey = ref<string | null>(null);
+const fileInput = ref<HTMLInputElement | null>(null);
+const pendingDelete = ref<StoreObject | null>(null);
+const isProtected = ref(false);
+const preview = ref<{ key: string; kind: "image" | "text"; url?: string; text?: string } | null>(null);
+
+const IMAGE_EXT = ["png", "jpg", "jpeg", "gif", "webp", "svg", "bmp", "ico"];
+const TEXT_EXT = [
+  "txt",
+  "json",
+  "yaml",
+  "yml",
+  "md",
+  "log",
+  "csv",
+  "xml",
+  "html",
+  "css",
+  "js",
+  "ts",
+  "env",
+  "sh",
+  "conf",
+];
+
+onMounted(async () => {
+  try {
+    const res = await backupDestinationsApi.list();
+    const store = (res.data.destinations || []).find((d) => d.name === name);
+    isProtected.value = !!store && store.bucket === bucket;
+  } catch {
+    isProtected.value = false;
+  }
+  reload();
+});
+
+async function reload() {
+  loading.value = true;
+  objects.value = [];
+  nextToken.value = "";
+  try {
+    const res = await objectStoresApi.listObjects(name, bucket);
+    objects.value = res.data.objects || [];
+    nextToken.value = res.data.next_token || "";
+  } catch (e: any) {
+    notifications.error("Could not list objects", e.response?.data?.error || e.message);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadMore() {
+  if (!nextToken.value) return;
+  loadingMore.value = true;
+  try {
+    const res = await objectStoresApi.listObjects(name, bucket, nextToken.value);
+    objects.value.push(...(res.data.objects || []));
+    nextToken.value = res.data.next_token || "";
+  } catch (e: any) {
+    notifications.error("Could not load more", e.response?.data?.error || e.message);
+  } finally {
+    loadingMore.value = false;
+  }
+}
+
+function pickFile() {
+  fileInput.value?.click();
+}
+
+async function onFilePicked(e: Event) {
+  const input = e.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = "";
+  if (!file) return;
+  uploading.value = true;
+  try {
+    await objectStoresApi.uploadObject(name, file, bucket);
+    notifications.success("Uploaded", `${file.name} uploaded to ${bucket}.`);
+    await reload();
+  } catch (e: any) {
+    notifications.error("Upload failed", e.response?.data?.error || e.message);
+  } finally {
+    uploading.value = false;
+  }
+}
+
+async function download(o: StoreObject) {
+  busyKey.value = o.Key;
+  try {
+    const res = await objectStoresApi.downloadObject(name, o.Key, bucket);
+    const url = URL.createObjectURL(res.data as Blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = o.Key.split("/").pop() || o.Key;
+    a.click();
+    URL.revokeObjectURL(url);
+  } catch (e: any) {
+    notifications.error("Download failed", e.response?.data?.error || e.message);
+  } finally {
+    busyKey.value = null;
+  }
+}
+
+function remove(o: StoreObject) {
+  pendingDelete.value = o;
+}
+
+async function confirmDelete() {
+  const o = pendingDelete.value;
+  if (!o) return;
+  busyKey.value = o.Key;
+  try {
+    await objectStoresApi.deleteObject(name, o.Key, bucket);
+    objects.value = objects.value.filter((x) => x.Key !== o.Key);
+    pendingDelete.value = null;
+  } catch (e: any) {
+    notifications.error("Delete failed", e.response?.data?.error || e.message);
+  } finally {
+    busyKey.value = null;
+  }
+}
+
+function ext(key: string): string {
+  return key.split(".").pop()?.toLowerCase() || "";
+}
+
+function previewable(key: string): boolean {
+  const e = ext(key);
+  return IMAGE_EXT.includes(e) || TEXT_EXT.includes(e);
+}
+
+async function openPreview(o: StoreObject) {
+  const e = ext(o.Key);
+  busyKey.value = o.Key;
+  try {
+    const res = await objectStoresApi.downloadObject(name, o.Key, bucket, true);
+    const blob = res.data as Blob;
+    if (IMAGE_EXT.includes(e)) {
+      preview.value = { key: o.Key, kind: "image", url: URL.createObjectURL(blob) };
+    } else {
+      preview.value = { key: o.Key, kind: "text", text: await blob.text() };
+    }
+  } catch (err: any) {
+    notifications.error("Preview failed", err.response?.data?.error || err.message);
+  } finally {
+    busyKey.value = null;
+  }
+}
+
+function closePreview() {
+  if (preview.value?.url) URL.revokeObjectURL(preview.value.url);
+  preview.value = null;
+}
+
+function formatBytes(n: number): string {
+  if (!n) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(n) / Math.log(1024));
+  return `${(n / Math.pow(1024, i)).toFixed(i ? 1 : 0)} ${units[i]}`;
+}
+
+function formatTime(iso: string): string {
+  const d = new Date(iso);
+  const diff = (Date.now() - d.getTime()) / 1000;
+  if (diff < 60) return "just now";
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return d.toLocaleDateString();
+}
+</script>
+
+<style scoped>
+.bucket-view {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.crumbs {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+}
+
+.crumb {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  font: inherit;
+}
+
+.crumb:hover {
+  color: var(--text);
+}
+
+.crumb.current {
+  color: var(--text);
+  font-weight: var(--font-medium);
+  cursor: default;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
+.toolbar h2 {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0;
+  font-size: var(--text-md);
+  font-weight: var(--font-semibold);
+  color: var(--text);
+}
+
+.protected {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  background: var(--surface-inset);
+  padding: 0.1rem 0.45rem;
+  border-radius: var(--radius-full);
+}
+
+.spacer {
+  flex: 1;
+}
+
+.hidden-file {
+  display: none;
+}
+
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-6);
+  color: var(--text-muted);
+}
+
+.obj-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+
+.obj-table th {
+  text-align: left;
+  color: var(--text-muted);
+  font-weight: var(--font-medium);
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.obj-table td {
+  padding: 0.45rem 0.6rem;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text);
+}
+
+.obj-table .key {
+  font-family: var(--font-mono, monospace);
+  word-break: break-all;
+}
+
+.key-link {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--accent);
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.key-link:hover {
+  text-decoration: underline;
+}
+
+.num {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.actions-col {
+  text-align: right;
+  white-space: nowrap;
+  width: 1%;
+}
+
+.icon-action {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0.2rem 0.35rem;
+  border-radius: var(--radius-sm);
+}
+
+.icon-action:hover {
+  color: var(--text);
+  background: var(--surface-inset);
+}
+
+.icon-action.danger:hover {
+  color: var(--color-danger-600, #dc2626);
+}
+
+.icon-action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.load-more {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-3);
+}
+
+.preview {
+  display: flex;
+  justify-content: center;
+}
+
+.preview-img {
+  max-width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
+}
+
+.preview-text {
+  width: 100%;
+  max-height: 70vh;
+  overflow: auto;
+  margin: 0;
+  padding: var(--space-3);
+  background: var(--surface-inset);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.muted {
+  color: var(--text-muted);
+}
+
+.count {
+  font-size: var(--text-sm);
+}
+</style>
diff --git a/src/views/ObjectStoreDetailView.vue b/src/views/ObjectStoreDetailView.vue
new file mode 100644
index 0000000..1b885ca
--- /dev/null
+++ b/src/views/ObjectStoreDetailView.vue
@@ -0,0 +1,424 @@
+<template>
+  <div class="store-detail">
+    <header class="page-header">
+      <button type="button" class="back" @click="router.push('/storage/object-stores')">
+        <Icon name="arrow-left" :size="16" /> Object Stores
+      </button>
+      <div v-if="store" class="head-main">
+        <div class="title-row">
+          <Icon name="container" :size="20" />
+          <h1>{{ store.name }}</h1>
+          <span class="store-kind" :class="kind">{{ kind === "managed" ? "Managed" : "External" }}</span>
+          <span class="store-state" :class="store.enabled === false ? 'off' : 'on'">
+            {{ store.enabled === false ? "Disabled" : "Active" }}
+          </span>
+        </div>
+        <dl class="meta">
+          <dt>Endpoint</dt>
+          <dd>{{ store.endpoint || "AWS default" }}</dd>
+          <dt>Region</dt>
+          <dd>{{ store.region || "—" }}</dd>
+        </dl>
+        <div v-if="canManage" class="head-actions">
+          <BaseButton variant="secondary" size="sm" icon="plug" @click="showAttach = true">Use in app</BaseButton>
+          <BaseButton variant="secondary" size="sm" icon="copy" @click="showReplicate = true">Replicate</BaseButton>
+        </div>
+      </div>
+    </header>
+
+    <BaseCard v-if="store">
+      <div class="toolbar">
+        <h2>Buckets</h2>
+        <span class="spacer" />
+        <template v-if="showNewBucket">
+          <BaseInput
+            v-model="newBucketName"
+            placeholder="new-bucket"
+            class="new-bucket-input"
+            @keyup.enter="createBucket"
+          />
+          <BaseButton variant="primary" size="sm" :loading="creating" :disabled="!newBucketName" @click="createBucket">
+            Create
+          </BaseButton>
+          <BaseButton variant="ghost" size="sm" @click="showNewBucket = false">Cancel</BaseButton>
+        </template>
+        <BaseButton v-else-if="canWrite" variant="primary" size="sm" icon="plus" @click="showNewBucket = true">
+          New bucket
+        </BaseButton>
+      </div>
+
+      <div v-if="loading" class="state muted"><Icon name="loader-circle" spin :size="18" /> Loading…</div>
+
+      <div v-else-if="!buckets.length" class="state empty">
+        <Icon name="package-open" :size="28" />
+        <p>No buckets yet.</p>
+      </div>
+
+      <table v-else class="bucket-table">
+        <thead>
+          <tr>
+            <th>Bucket</th>
+            <th class="num">Objects</th>
+            <th class="num">Size</th>
+            <th class="actions-col" />
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="b in buckets" :key="b.name" class="bucket-row" @click="open(b)">
+            <td class="bname">
+              <Icon name="folder" :size="15" />
+              {{ b.name }}
+              <span v-if="b.is_backup" class="badge"><Icon name="shield" :size="11" /> backups</span>
+            </td>
+            <td class="num">{{ b.truncated ? `${b.objects.toLocaleString()}+` : b.objects.toLocaleString() }}</td>
+            <td class="num">{{ formatBytes(b.size) }}{{ b.truncated ? "+" : "" }}</td>
+            <td class="actions-col">
+              <button class="icon-action" title="Open" @click.stop="open(b)">
+                <Icon name="chevron-right" :size="16" />
+              </button>
+              <button
+                v-if="canDelete && !b.is_backup"
+                class="icon-action danger"
+                title="Delete bucket"
+                @click.stop="askDelete(b)"
+              >
+                <Icon name="trash-2" :size="15" />
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </BaseCard>
+
+    <div v-else-if="!resolving" class="state empty">
+      <Icon name="alert-triangle" :size="26" />
+      <p>Store not found.</p>
+    </div>
+
+    <AttachStoreModal :visible="showAttach" :store="store" @close="showAttach = false" />
+    <ReplicateStoreModal :visible="showReplicate" :store="store" @close="showReplicate = false" />
+    <ConfirmModal
+      :visible="!!pendingDelete"
+      title="Delete bucket"
+      :message="pendingDelete ? `Delete bucket “${pendingDelete.name}”? It must be empty. This cannot be undone.` : ''"
+      variant="danger"
+      confirm-text="Delete"
+      :loading="deleting"
+      @confirm="confirmDeleteBucket"
+      @cancel="pendingDelete = null"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import Icon from "@/components/base/Icon.vue";
+import BaseCard from "@/components/base/BaseCard.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import AttachStoreModal from "@/components/AttachStoreModal.vue";
+import ReplicateStoreModal from "@/components/ReplicateStoreModal.vue";
+import ConfirmModal from "@/components/ConfirmModal.vue";
+import { backupDestinationsApi, objectStoresApi, type BackupDestination, type StoreBucket } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+import { useAuthStore } from "@/stores/auth";
+
+const route = useRoute();
+const router = useRouter();
+const notifications = useNotificationsStore();
+const auth = useAuthStore();
+const canWrite = auth.hasPermission("backups:write");
+const canDelete = auth.hasPermission("backups:delete");
+const canManage = auth.hasPermission("backups:write") || auth.hasPermission("config:write");
+
+const name = route.params.name as string;
+const store = ref<BackupDestination | null>(null);
+const resolving = ref(true);
+const buckets = ref<StoreBucket[]>([]);
+const loading = ref(false);
+const showAttach = ref(false);
+const showReplicate = ref(false);
+const showNewBucket = ref(false);
+const newBucketName = ref("");
+const creating = ref(false);
+const pendingDelete = ref<StoreBucket | null>(null);
+const deleting = ref(false);
+
+const kind = computed(() => store.value?.kind || "external");
+
+onMounted(async () => {
+  try {
+    const res = await backupDestinationsApi.list();
+    store.value = (res.data.destinations || []).find((d) => d.name === name) || null;
+  } catch (e: any) {
+    notifications.error("Could not load store", e.response?.data?.error || e.message);
+  } finally {
+    resolving.value = false;
+  }
+  if (store.value) load();
+});
+
+async function load() {
+  loading.value = true;
+  try {
+    const res = await objectStoresApi.listBuckets(name);
+    buckets.value = (res.data.buckets || []).sort((a, b) => a.name.localeCompare(b.name));
+  } catch (e: any) {
+    notifications.error("Could not list buckets", e.response?.data?.error || e.message);
+    buckets.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function open(b: StoreBucket) {
+  router.push(`/storage/object-stores/${encodeURIComponent(name)}/buckets/${encodeURIComponent(b.name)}`);
+}
+
+async function createBucket() {
+  const bucket = newBucketName.value.trim();
+  if (!bucket) return;
+  creating.value = true;
+  try {
+    await objectStoresApi.createBucket(name, bucket);
+    showNewBucket.value = false;
+    newBucketName.value = "";
+    await load();
+  } catch (e: any) {
+    notifications.error("Could not create bucket", e.response?.data?.error || e.message);
+  } finally {
+    creating.value = false;
+  }
+}
+
+function askDelete(b: StoreBucket) {
+  pendingDelete.value = b;
+}
+
+async function confirmDeleteBucket() {
+  const b = pendingDelete.value;
+  if (!b) return;
+  deleting.value = true;
+  try {
+    await objectStoresApi.deleteBucket(name, b.name);
+    buckets.value = buckets.value.filter((x) => x.name !== b.name);
+    pendingDelete.value = null;
+  } catch (e: any) {
+    notifications.error("Could not delete bucket", e.response?.data?.error || e.message);
+  } finally {
+    deleting.value = false;
+  }
+}
+
+function formatBytes(n: number): string {
+  if (!n) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(n) / Math.log(1024));
+  return `${(n / Math.pow(1024, i)).toFixed(i ? 1 : 0)} ${units[i]}`;
+}
+</script>
+
+<style scoped>
+.store-detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+  cursor: pointer;
+  padding: 0;
+  margin-bottom: var(--space-3);
+}
+
+.back:hover {
+  color: var(--text);
+}
+
+.title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.title-row h1 {
+  margin: 0;
+  font-size: var(--text-xl);
+  font-weight: var(--font-bold);
+  color: var(--text);
+}
+
+.store-kind,
+.store-state {
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  padding: 0.05rem 0.45rem;
+  border-radius: var(--radius-full);
+}
+
+.store-kind.external {
+  background: var(--surface-inset);
+  color: var(--text-muted);
+}
+
+.store-kind.managed {
+  background: var(--color-info-50);
+  color: var(--color-info-700);
+}
+
+.store-state.on {
+  background: var(--color-success-50);
+  color: var(--color-success-700);
+}
+
+.store-state.off {
+  background: var(--surface-inset);
+  color: var(--text-muted);
+}
+
+.meta {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.25rem 1rem;
+  margin: var(--space-3) 0;
+  max-width: 640px;
+}
+
+.meta dt {
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+}
+
+.meta dd {
+  margin: 0;
+  color: var(--text);
+  font-size: var(--text-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.head-actions {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
+.toolbar h2 {
+  margin: 0;
+  font-size: var(--text-md);
+  font-weight: var(--font-semibold);
+  color: var(--text);
+}
+
+.spacer {
+  flex: 1;
+}
+
+.new-bucket-input {
+  max-width: 200px;
+}
+
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-6);
+  color: var(--text-muted);
+}
+
+.bucket-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+
+.bucket-table th {
+  text-align: left;
+  color: var(--text-muted);
+  font-weight: var(--font-medium);
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.bucket-row {
+  cursor: pointer;
+}
+
+.bucket-row:hover {
+  background: var(--surface-inset);
+}
+
+.bucket-table td {
+  padding: 0.5rem 0.6rem;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text);
+}
+
+.bname {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-weight: var(--font-medium);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  color: var(--color-info-700);
+  background: var(--color-info-50);
+  padding: 0.05rem 0.4rem;
+  border-radius: var(--radius-full);
+}
+
+.num {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.actions-col {
+  text-align: right;
+  white-space: nowrap;
+  width: 1%;
+}
+
+.icon-action {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0.2rem 0.35rem;
+  border-radius: var(--radius-sm);
+}
+
+.icon-action:hover {
+  color: var(--text);
+  background: var(--surface-raised);
+}
+
+.icon-action.danger:hover {
+  color: var(--color-danger-600, #dc2626);
+}
+
+.muted {
+  color: var(--text-muted);
+}
+</style>
diff --git a/src/views/ObjectStoresView.vue b/src/views/ObjectStoresView.vue
index 62f70d5..2ae0b42 100644
--- a/src/views/ObjectStoresView.vue
+++ b/src/views/ObjectStoresView.vue
@@ -19,7 +19,7 @@
         <div class="section-head">
           <h2>Connected stores</h2>
           <div class="head-actions">
-            <BaseButton v-if="canManage" variant="secondary" size="sm" icon="plus" @click="deployStore">
+            <BaseButton v-if="canManage" variant="primary" size="sm" icon="plus" @click="showDeployModal = true">
               Deploy a local store
             </BaseButton>
             <BaseButton v-if="canManage" variant="secondary" size="sm" icon="settings" @click="tab = 'settings'">
@@ -34,17 +34,20 @@
           <Icon name="container" :size="28" />
           <p>No object stores connected yet.</p>
           <div class="head-actions">
-            <BaseButton v-if="canManage" variant="secondary" size="sm" icon="plus" @click="deployStore">
+            <BaseButton v-if="canManage" variant="primary" size="sm" icon="plus" @click="showDeployModal = true">
               Deploy a local store
             </BaseButton>
-            <BaseButton v-if="canManage" variant="primary" size="sm" icon="link" @click="tab = 'settings'">
+            <BaseButton v-if="canManage" variant="secondary" size="sm" icon="link" @click="tab = 'settings'">
               Connect external
             </BaseButton>
           </div>
+          <button v-if="canManage" type="button" class="browse-link" @click="browseTemplates">
+            Or browse all templates
+          </button>
         </div>
 
         <div v-else class="store-grid">
-          <BaseCard v-for="d in destinations" :key="d.name">
+          <BaseCard v-for="d in destinations" :key="d.name" class="store-card" @click="openBrowser(d)">
             <div class="store-top">
               <Icon name="container" :size="16" />
               <span class="store-name">{{ d.name }}</span>
@@ -61,6 +64,7 @@
               <dt>Endpoint</dt>
               <dd>{{ d.endpoint || "AWS default" }}</dd>
             </dl>
+            <div class="store-open"><Icon name="folder-open" :size="14" /> Open store</div>
           </BaseCard>
         </div>
       </section>
@@ -69,6 +73,8 @@
     <div v-else class="tab-panel">
       <StorageBackupsSettings />
     </div>
+
+    <DeployObjectStoreModal :visible="showDeployModal" @close="showDeployModal = false" @created="onStoreDeployed" />
   </div>
 </template>
 
@@ -79,6 +85,7 @@ import Icon from "@/components/base/Icon.vue";
 import BaseCard from "@/components/base/BaseCard.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 import StorageBackupsSettings from "@/components/StorageBackupsSettings.vue";
+import DeployObjectStoreModal from "@/components/DeployObjectStoreModal.vue";
 import { backupDestinationsApi, type BackupDestination } from "@/services/api";
 import { useAuthStore } from "@/stores/auth";
 
@@ -86,14 +93,25 @@ const router = useRouter();
 const auth = useAuthStore();
 const canManage = auth.hasPermission("backups:write") || auth.hasPermission("config:write");
 
+const showDeployModal = ref(false);
+
+function openBrowser(d: BackupDestination) {
+  router.push(`/storage/object-stores/${encodeURIComponent(d.name)}`);
+}
+
 function storeKind(d: BackupDestination): string {
   return d.kind || "external";
 }
 
-function deployStore() {
+function browseTemplates() {
   router.push("/templates");
 }
 
+function onStoreDeployed() {
+  tab.value = "overview";
+  load();
+}
+
 const tabs = [
   { id: "overview", label: "Overview", icon: "layout-grid" },
   { id: "settings", label: "Settings", icon: "settings" },
@@ -209,6 +227,30 @@ onMounted(load);
   gap: var(--space-3);
 }
 
+.store-card {
+  cursor: pointer;
+  transition: border-color 0.12s;
+}
+
+.store-card:hover {
+  border-color: var(--accent);
+}
+
+.store-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: var(--space-3);
+}
+
+.store-open {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: var(--text-xs);
+  color: var(--accent);
+}
+
 .store-top {
   display: flex;
   align-items: center;
@@ -242,6 +284,21 @@ onMounted(load);
   gap: var(--space-2);
 }
 
+.browse-link {
+  margin-top: var(--space-2);
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.browse-link:hover {
+  color: var(--text);
+}
+
 .store-state {
   margin-left: auto;
   font-size: var(--text-xs);
diff --git a/src/views/TemplatesView.vue b/src/views/TemplatesView.vue
index 28fa2e1..0742558 100644
--- a/src/views/TemplatesView.vue
+++ b/src/views/TemplatesView.vue
@@ -135,7 +135,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from "vue";
-import { templatesApi, type TemplateCategory } from "@/services/api";
+import { templatesApi, type TemplateCategory, type ObjectStoreContract } from "@/services/api";
 import { useNotificationsStore } from "@/stores/notifications";
 import NewDeploymentModal from "@/components/NewDeploymentModal.vue";
 
@@ -146,6 +146,7 @@ interface Template {
   icon: string;
   logo?: string;
   category: string;
+  object_store?: ObjectStoreContract;
   priority?: number;
   content: string;
 }