diff --git a/apps/api/src/lib/buildPacks/compose.ts b/apps/api/src/lib/buildPacks/compose.ts
index f47d92fd6..839f3e3ae 100644
--- a/apps/api/src/lib/buildPacks/compose.ts
+++ b/apps/api/src/lib/buildPacks/compose.ts
@@ -78,28 +78,54 @@ export default async function (data) {
 		// TODO: If we support separated volume for each service, we need to add it here
 		if (value['volumes']?.length > 0) {
 			value['volumes'] = value['volumes'].map((volume) => {
-				let [v, path, permission] = volume.split(':');
-				if (
-					v.startsWith('.') ||
-					v.startsWith('..') ||
-					v.startsWith('/') ||
-					v.startsWith('~') ||
-					v.startsWith('$PWD')
-				) {
-					v = v.replace('$.', `~`).replace('$..', '~').replace('$$PWD', '~');
-				} else {
-					if (!path) {
-						path = v;
-						v = `${applicationId}${v.replace(/\//gi, '-').replace(/\./gi, '')}`;
+				if (typeof volume === 'string') {
+					let [v, path, permission] = volume.split(':');
+					if (
+						v.startsWith('.') ||
+						v.startsWith('..') ||
+						v.startsWith('/') ||
+						v.startsWith('~') ||
+						v.startsWith('$PWD')
+					) {
+						v = v.replace(/^\./, `~`).replace(/^\.\./, '~').replace(/^\$PWD/, '~');
 					} else {
-						v = `${applicationId}${v.replace(/\//gi, '-').replace(/\./gi, '')}`;
+						if (!path) {
+							path = v;
+							v = `${applicationId}${v.replace(/\//gi, '-').replace(/\./gi, '')}`;
+						} else {
+							v = `${applicationId}${v.replace(/\//gi, '-').replace(/\./gi, '')}`;
+						}
+						composeVolumes[v] = {
+							name: v
+						};
 					}
-					composeVolumes[v] = {
-						name: v
-					};
+					return `${v}:${path}${permission ? ':' + permission : ''}`;
+				}
+				if (typeof volume === 'object') {
+					let { source, target, mode } = volume;
+					if (
+						source.startsWith('.') ||
+						source.startsWith('..') ||
+						source.startsWith('/') ||
+						source.startsWith('~') ||
+						source.startsWith('$PWD')
+					) {
+
+						source = source.replace(/^\./, `~`).replace(/^\.\./, '~').replace(/^\$PWD/, '~');
+						console.log({source})
+
+					} else {
+						if (!target) {
+							target = source;
+							source = `${applicationId}${source.replace(/\//gi, '-').replace(/\./gi, '')}`;
+						} else {
+							source = `${applicationId}${source.replace(/\//gi, '-').replace(/\./gi, '')}`;
+						}
+					}
+
+					return `${source}:${target}${mode ? ':' + mode : ''}`;
 				}
 
-				return `${v}:${path}${permission ? ':' + permission : ''}`;
 			});
 		}
 		if (volumes.length > 0) {
diff --git a/apps/ui/src/routes/applications/[id]/__layout.svelte b/apps/ui/src/routes/applications/[id]/__layout.svelte
index 6e29cf9b3..a61b27486 100644
--- a/apps/ui/src/routes/applications/[id]/__layout.svelte
+++ b/apps/ui/src/routes/applications/[id]/__layout.svelte
@@ -427,29 +427,6 @@
 				</svg> Stop
 			</button>
 		{:else if $isDeploymentEnabled && !$page.url.pathname.startsWith(`/applications/${id}/configuration/`)}
-			{#if $status.application.overallStatus === 'degraded'}
-				<button
-					on:click={stopApplication}
-					type="submit"
-					disabled={!$isDeploymentEnabled || !$appSession.isAdmin}
-					class="btn btn-sm gap-2"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6 text-error"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					>
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<rect x="6" y="5" width="4" height="14" rx="1" />
-						<rect x="14" y="5" width="4" height="14" rx="1" />
-					</svg> Stop
-				</button>
-			{/if}
 			<button
 				class="btn btn-sm gap-2"
 				disabled={!$isDeploymentEnabled || !$appSession.isAdmin}
@@ -493,6 +470,29 @@
 						: 'Redeploy Stack'
 					: 'Deploy'}
 			</button>
+			{#if $status.application.overallStatus === 'degraded'}
+				<button
+					on:click={stopApplication}
+					type="submit"
+					disabled={!$isDeploymentEnabled || !$appSession.isAdmin}
+					class="btn btn-sm gap-2"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="w-6 h-6 text-error"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<rect x="6" y="5" width="4" height="14" rx="1" />
+						<rect x="14" y="5" width="4" height="14" rx="1" />
+					</svg> Stop
+				</button>
+			{/if}
 		{/if}
 		{#if $location && $status.application.overallStatus === 'healthy'}
 			<a href={$location} target="_blank noreferrer" class="btn btn-sm gap-2 text-sm bg-primary"
diff --git a/apps/ui/src/routes/applications/[id]/storages.svelte b/apps/ui/src/routes/applications/[id]/storages.svelte
index 8a810b635..554ac2f74 100644
--- a/apps/ui/src/routes/applications/[id]/storages.svelte
+++ b/apps/ui/src/routes/applications/[id]/storages.svelte
@@ -35,24 +35,46 @@
 		for (const [_, service] of Object.entries(composeJson.services)) {
 			if (service?.volumes) {
 				for (const [_, volumeName] of Object.entries(service.volumes)) {
-					let [volume, target] = volumeName.split(':');
-					if (
-						volume.startsWith('.') ||
-						volume.startsWith('..') ||
-						volume.startsWith('/') ||
-						volume.startsWith('~') ||
-						volume.startsWith('$PWD')
-					) {
-						volume = volume.replace('$.', `~`).replace('$..', '~').replace('$$PWD', '~');
-					} else {
-						if (!target) {
-							target = volume;
-							volume = `${application.id}${volume.replace(/\//gi, '-').replace(/\./gi, '')}`;
+					if (typeof volumeName === 'string') {
+						let [volume, target] = volumeName.split(':');
+						if (
+							volume.startsWith('.') ||
+							volume.startsWith('..') ||
+							volume.startsWith('/') ||
+							volume.startsWith('~') ||
+							volume.startsWith('$PWD')
+						) {
+							volume = volume.replace(/^\./, `~`).replace(/^\.\./, '~').replace(/^\$PWD/, '~');
 						} else {
-							volume = `${application.id}${volume.replace(/\//gi, '-').replace(/\./gi, '')}`;
+							if (!target) {
+								target = volume;
+								volume = `${application.id}${volume.replace(/\//gi, '-').replace(/\./gi, '')}`;
+							} else {
+								volume = `${application.id}${volume.replace(/\//gi, '-').replace(/\./gi, '')}`;
+							}
 						}
+						predefinedVolumes.push({ id: volume, path: target, predefined: true });
+					}
+					if (typeof volumeName === 'object') {
+						let { source, target } = volumeName;
+						if (
+							source.startsWith('.') ||
+							source.startsWith('..') ||
+							source.startsWith('/') ||
+							source.startsWith('~') ||
+							source.startsWith('$PWD')
+						) {
+							source = source.replace(/^\./, `~`).replace(/^\.\./, '~').replace(/^\$PWD/, '~');
+						} else {
+							if (!target) {
+								target = source;
+								source = `${application.id}${source.replace(/\//gi, '-').replace(/\./gi, '')}`;
+							} else {
+								source = `${application.id}${source.replace(/\//gi, '-').replace(/\./gi, '')}`;
+							}
+						}
+						predefinedVolumes.push({ id: source, path: target, predefined: true });
 					}
-					predefinedVolumes.push({ id: volume, path: target, predefined: true });
 				}
 			}
 		}