From 3d6adeffc4e94f164e91ab6894567647e38f80ae Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Thu, 22 Sep 2022 15:48:16 +0200
Subject: [PATCH] ui: more UI improvements

---
 .../lib/components/CopyPasswordField.svelte   |   4 +-
 .../src/routes/applications/[id]/_Menu.svelte | 194 ++++++++++-
 .../routes/applications/[id]/_Secret.svelte   | 212 ++++++------
 .../routes/applications/[id]/_Storage.svelte  |  63 ++--
 .../routes/applications/[id]/__layout.svelte  | 302 ++----------------
 .../routes/applications/[id]/danger.svelte    |  80 +++++
 .../src/routes/applications/[id]/index.svelte |   4 +-
 .../applications/[id]/logs/_BuildLog.svelte   | 108 +++----
 .../applications/[id]/logs/build.svelte       |  58 ++--
 .../applications/[id]/logs/index.svelte       |   9 +-
 .../applications/[id]/previews/index.svelte   |   7 +
 .../routes/applications/[id]/secrets.svelte   |  72 ++---
 .../routes/applications/[id]/storages.svelte  |  38 ++-
 apps/ui/src/tailwind.css                      |   3 +
 14 files changed, 597 insertions(+), 557 deletions(-)
 create mode 100644 apps/ui/src/routes/applications/[id]/danger.svelte

diff --git a/apps/ui/src/lib/components/CopyPasswordField.svelte b/apps/ui/src/lib/components/CopyPasswordField.svelte
index 14a3ca376..24ed90f94 100644
--- a/apps/ui/src/lib/components/CopyPasswordField.svelte
+++ b/apps/ui/src/lib/components/CopyPasswordField.svelte
@@ -15,7 +15,7 @@
 	export let placeholder = '';
 	export let inputStyle = '';
 
-	let disabledClass = 'bg-coolback disabled:bg-coolblack w-full';
+	let disabledClass = 'bg-coolback disabled:bg-coolblack lg:w-64 w-full';
 	let isHttps = browser && window.location.protocol === 'https:';
 
 	function copyToClipboard() {
@@ -82,7 +82,7 @@
 		/>
 	{/if}
 
-	<div class="absolute top-0 right-0 m-3  cursor-pointer text-stone-600 hover:text-white">
+	<div class="absolute top-0 right-0 flex justify-center items-center h-full cursor-pointer text-stone-600 hover:text-white mr-3">
 		<div class="flex space-x-2">
 			{#if isPasswordField}
 				<div on:click={() => (showPassword = !showPassword)}>
diff --git a/apps/ui/src/routes/applications/[id]/_Menu.svelte b/apps/ui/src/routes/applications/[id]/_Menu.svelte
index b1b71331b..33247d740 100644
--- a/apps/ui/src/routes/applications/[id]/_Menu.svelte
+++ b/apps/ui/src/routes/applications/[id]/_Menu.svelte
@@ -1,21 +1,203 @@
 <script lang="ts">
+	export let application: any;
+	import { status } from '$lib/store';
 	import { page } from '$app/stores';
 </script>
 
-<ul class="menu border bg-coolgray-100 border-coolgray-200 rounded-box p-2 space-y-2">
+<ul class="menu border bg-coolgray-100 border-coolgray-200 rounded-box p-2 space-y-2 sticky top-4">
 	<li class="menu-title">
-		<span>General</span>
+		<span>Configuration</span>
 	</li>
 	<li class="rounded" class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}`}>
-		<a href={`/applications/${$page.params.id}`} class="no-underline w-full">Build & Deploy</a>
+		<a href={`/applications/${$page.params.id}`} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				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" />
+				<path
+					d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5"
+				/>
+			</svg>Build & Deploy</a
+		>
 	</li>
-	<li class="menu-title">
-		<span>Other</span>
+	<li
+		class="rounded"
+		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/secrets`}
+	>
+		<a href={`/applications/${$page.params.id}/secrets`} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				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" />
+				<path
+					d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
+				/>
+				<circle cx="12" cy="11" r="1" />
+				<line x1="12" y1="12" x2="12" y2="14.5" />
+			</svg>Environment Variables (secrets)</a
+		>
+	</li>
+	<li
+		class="rounded"
+		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/storages`}
+	>
+		<a href={`/applications/${$page.params.id}/storages`} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				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" />
+				<ellipse cx="12" cy="6" rx="8" ry="3" />
+				<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
+				<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
+			</svg>Peristent Volumes</a
+		>
 	</li>
 	<li
 		class="rounded"
 		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/features`}
 	>
-		<a href={`/applications/${$page.params.id}/features`} class="no-underline w-full">Features</a>
+		<a href={`/applications/${$page.params.id}/features`} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				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" />
+				<polyline points="13 3 13 10 19 10 11 21 11 14 5 14 13 3" />
+			</svg>Features</a
+		>
+	</li>
+	<li class="menu-title">
+		<span>Logs</span>
+	</li>
+	<li
+		class:text-stone-600={!$status.application.isRunning}
+		class="rounded"
+		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/logs`}
+	>
+		<a href={$status.application.isRunning ?`/applications/${$page.params.id}/logs` : ''} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				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" />
+				<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+				<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+				<line x1="3" y1="6" x2="3" y2="19" />
+				<line x1="12" y1="6" x2="12" y2="19" />
+				<line x1="21" y1="6" x2="21" y2="19" />
+			</svg>Application</a
+		>
+	</li>
+	<li
+		class="rounded"
+		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/logs/build`}
+	>
+		<a href={`/applications/${$page.params.id}/logs/build`} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				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" />
+				<circle cx="19" cy="13" r="2" />
+				<circle cx="4" cy="17" r="2" />
+				<circle cx="13" cy="17" r="2" />
+				<line x1="13" y1="19" x2="4" y2="19" />
+				<line x1="4" y1="15" x2="13" y2="15" />
+				<path d="M8 12v-5h2a3 3 0 0 1 3 3v5" />
+				<path d="M5 15v-2a1 1 0 0 1 1 -1h7" />
+				<path d="M19 11v-7l-6 7" />
+			</svg>Build</a
+		>
+	</li>
+	<li class="menu-title">
+		<span>Advanced</span>
+	</li>
+	{#if !application.settings.isBot}
+		<li
+			class="rounded"
+			class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/previews`}
+		>
+			<a href={`/applications/${$page.params.id}/previews`} class="no-underline w-full"
+				><svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="w-6 h-6"
+					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" />
+					<circle cx="7" cy="18" r="2" />
+					<circle cx="7" cy="6" r="2" />
+					<circle cx="17" cy="12" r="2" />
+					<line x1="7" y1="8" x2="7" y2="16" />
+					<path d="M7 8a4 4 0 0 0 4 4h4" />
+				</svg>Preview Deployments</a
+			>
+		</li>
+	{/if}
+	<li
+		class="rounded"
+		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/danger`}
+	>
+		<a href={`/applications/${$page.params.id}/danger`} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				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" />
+				<path d="M12 9v2m0 4v.01" />
+				<path
+					d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"
+				/>
+			</svg>Danger Zone</a
+		>
 	</li>
 </ul>
diff --git a/apps/ui/src/routes/applications/[id]/_Secret.svelte b/apps/ui/src/routes/applications/[id]/_Secret.svelte
index 134e89892..248e0952e 100644
--- a/apps/ui/src/routes/applications/[id]/_Secret.svelte
+++ b/apps/ui/src/routes/applications/[id]/_Secret.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	export let length = 0;
 	export let name = '';
 	export let value = '';
 	export let isBuildSecret = false;
@@ -39,13 +40,18 @@
 	async function createSecret(isNew: any) {
 		try {
 			if (isNew) {
-				if (!name || !value) return;
+				if (!name || !value) {
+					return addToast({
+						message: 'Please fill in all fields.',
+						type: 'error'
+					});
+				}
 			}
 			if (value === undefined && isPRMRSecret) {
-				return
+				return;
 			}
 			if (value === '' && !isPRMRSecret) {
-				throw new Error('Value is required.')
+				throw new Error('Value is required.');
 			}
 			await saveSecret({
 				isNew,
@@ -66,9 +72,9 @@
 				});
 			} else {
 				addToast({
-				message: 'Secret updated.',
-				type: 'success'
-			});
+					message: 'Secret updated.',
+					type: 'success'
+				});
 			}
 			dispatch('refresh');
 		} catch (error) {
@@ -98,97 +104,117 @@
 	}
 </script>
 
-<td>
-	<input
-		style="min-width: 350px !important;"
-		id={isNewSecret ? 'secretName' : 'secretNameNew'}
-		bind:value={name}
-		required
-		placeholder="EXAMPLE_VARIABLE"
-		readonly={!isNewSecret}
-		class:bg-transparent={!isNewSecret}
-		class:cursor-not-allowed={!isNewSecret}
-	/>
-</td>
-<td>
-	<CopyPasswordField
-		id={isNewSecret ? 'secretValue' : 'secretValueNew'}
-		name={isNewSecret ? 'secretValue' : 'secretValueNew'}
-		isPasswordField={true}
-		bind:value
-		placeholder="J$#@UIO%HO#$U%H"
-		inputStyle="min-width: 350px; !important"
-	/>
-</td>
-<td class="text-center">
-	<button
-		on:click={setSecretValue}
-		aria-pressed="false"
-		class="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
-		class:bg-green-600={isBuildSecret}
-		class:bg-stone-700={!isBuildSecret}
-		class:opacity-50={isPRMRSecret}
-		class:cursor-not-allowed={isPRMRSecret}
-		class:cursor-pointer={!isPRMRSecret}
-	>
-		<span class="sr-only">{$t('application.secrets.use_isbuildsecret')}</span>
-		<span
-			class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
-			class:translate-x-5={isBuildSecret}
-			class:translate-x-0={!isBuildSecret}
+<div class="w-full font-bold grid grid-cols-1 lg:grid-cols-4 gap-2">
+	<div class="flex flex-col">
+		<label for="name" class="pb-2 uppercase">{length > 0 && !isNewSecret ? 'name' : ''}</label>
+		{#if isNewSecret}
+			<div class="lg:hidden block pt-10 pb-2">New Secret</div>
+		{/if}
+		<input
+			id={isNewSecret ? 'secretName' : 'secretNameNew'}
+			bind:value={name}
+			required
+			placeholder="EXAMPLE_VARIABLE"
+			readonly={!isNewSecret}
+			class="lg:w-64 w-full"
+			class:bg-coolblack={!isNewSecret}
+			class:border={!isNewSecret}
+			class:border-dashed={!isNewSecret}
+			class:border-coolgray-300={!isNewSecret}
+			class:cursor-not-allowed={!isNewSecret}
+		/>
+	</div>
+	<div class="flex flex-col">
+		<label for="name" class="pb-2 uppercase">{length > 0 && !isNewSecret ? 'value' : ''}</label>
+		<CopyPasswordField
+			id={isNewSecret ? 'secretValue' : 'secretValueNew'}
+			name={isNewSecret ? 'secretValue' : 'secretValueNew'}
+			isPasswordField={true}
+			bind:value
+			placeholder="J$#@UIO%HO#$U%H"
+		/>
+	</div>
+	<div class="flex lg:flex-col flex-row justify-start items-center pt-3 lg:pt-0">
+		<label for="name" class="uppercase"
+			>{length > 0 && !isNewSecret ? 'Need during buildtime?' : ''}</label
 		>
-			<span
-				class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
-				class:opacity-0={isBuildSecret}
-				class:opacity-100={!isBuildSecret}
-				aria-hidden="true"
+		{#if isNewSecret}
+			<label class="lg:hidden uppercase" for="name">Need during buildtime?</label>
+		{/if}
+		<div class="flex justify-center h-full items-center pt-0 lg:pt-3 pl-4 lg:pl-0">
+			<button
+				on:click={setSecretValue}
+				aria-pressed="false"
+				class="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
+				class:bg-green-600={isBuildSecret}
+				class:bg-stone-700={!isBuildSecret}
+				class:opacity-50={isPRMRSecret}
+				class:cursor-not-allowed={isPRMRSecret}
+				class:cursor-pointer={!isPRMRSecret}
 			>
-				<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
-					<path
-						d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-				</svg>
-			</span>
-			<span
-				class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
-				aria-hidden="true"
-				class:opacity-100={isBuildSecret}
-				class:opacity-0={!isBuildSecret}
-			>
-				<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
-					<path
-						d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
-					/>
-				</svg>
-			</span>
-		</span>
-	</button>
-</td>
-<td>
-	{#if isNewSecret}
-		<div class="flex items-center justify-center">
-			<button class="btn bg-applications btn-sm" on:click={() => createSecret(true)}
-				>{$t('forms.add')}</button
-			>
-		</div>
-	{:else}
-		<div class="flex flex-row justify-center space-x-2">
-			<div class="flex items-center justify-center">
-				<button class="btn bg-application btn-sm" on:click={() => createSecret(false)}
-					>{$t('forms.set')}</button
+				<span class="sr-only">{$t('application.secrets.use_isbuildsecret')}</span>
+				<span
+					class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
+					class:translate-x-5={isBuildSecret}
+					class:translate-x-0={!isBuildSecret}
 				>
-			</div>
-			{#if !isPRMRSecret}
-				<div class="flex justify-center items-end">
-					<button class="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeSecret}
-						>{$t('forms.remove')}</button
+					<span
+						class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
+						class:opacity-0={isBuildSecret}
+						class:opacity-100={!isBuildSecret}
+						aria-hidden="true"
 					>
+						<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
+							<path
+								d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</span>
+					<span
+						class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
+						aria-hidden="true"
+						class:opacity-100={isBuildSecret}
+						class:opacity-0={!isBuildSecret}
+					>
+						<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
+							<path
+								d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+							/>
+						</svg>
+					</span>
+				</span>
+			</button>
+		</div>
+	</div>
+	<div class="flex flex-row lg:flex-col lg:items-center items-start">
+		<label for="name" class="lg:block hidden uppercase">{length > 0 && !isNewSecret ? 'Actions' : ''}</label>
+		<div class="flex justify-center h-full items-center pt-3">
+			{#if isNewSecret}
+				<div class="flex items-center justify-center">
+					<button class="btn btn-sm btn-primary" on:click={() => createSecret(true)}
+						>Save New Secret</button
+					>
+				</div>
+			{:else}
+				<div class="flex flex-row justify-center space-x-2">
+					<div class="flex items-center justify-center">
+						<button class="btn btn-sm btn-primary" on:click={() => createSecret(false)}
+							>Set</button
+						>
+					</div>
+					{#if !isPRMRSecret}
+						<div class="flex justify-center items-end">
+							<button class="btn btn-sm btn-error" on:click={removeSecret}
+								>Remove</button
+							>
+						</div>
+					{/if}
 				</div>
 			{/if}
 		</div>
-	{/if}
-</td>
+	</div>
+</div>
diff --git a/apps/ui/src/routes/applications/[id]/_Storage.svelte b/apps/ui/src/routes/applications/[id]/_Storage.svelte
index f67686eeb..2fe473f51 100644
--- a/apps/ui/src/routes/applications/[id]/_Storage.svelte
+++ b/apps/ui/src/routes/applications/[id]/_Storage.svelte
@@ -59,32 +59,39 @@
 	}
 </script>
 
-<td>
-	<input
-		bind:value={storage.path}
-		required
-		placeholder="eg: /sqlite.db"
-	/>
-</td>
-<td>
-	{#if isNew}
-		<div class="flex items-center justify-center">
-			<button class="btn btn-sm bg-applications" on:click={() => saveStorage(true)}
-				>{$t('forms.add')}</button
-			>
+<div class="w-full font-bold grid gap-2">
+	<div class="flex flex-col">
+		<label for="name" class="pb-2 uppercase">{!isNew ? 'name' : ''}</label>
+		{#if isNew}
+			<div class="lg:hidden block pt-10 pb-2 uppercase">New Persistent Storage</div>
+		{/if}
+		<div class="flex  flex-col lg:flex-row lg:space-y-0 space-y-2">
+			<input
+				class="w-full lg:w-64"
+				bind:value={storage.path}
+				required
+				placeholder="eg: /sqlite.db"
+			/>
+			{#if isNew}
+				<div class="flex items-center justify-center w-full lg:w-64">
+					<button class="btn btn-sm btn-primary" on:click={() => saveStorage(true)}
+						>{$t('forms.add')}</button
+					>
+				</div>
+			{:else}
+				<div class="flex flex-row items-center justify-center space-x-2 w-full lg:w-64">
+					<div class="flex items-center justify-center">
+						<button class="btn btn-sm btn-primary" on:click={() => saveStorage(false)}
+							>{$t('forms.set')}</button
+						>
+					</div>
+					<div class="flex justify-center">
+						<button class="btn btn-sm btn-error" on:click={removeStorage}
+							>{$t('forms.remove')}</button
+						>
+					</div>
+				</div>
+			{/if}
 		</div>
-	{:else}
-		<div class="flex flex-row justify-center space-x-2">
-			<div class="flex items-center justify-center">
-				<button class="btn btn-sm bg-applications" on:click={() => saveStorage(false)}
-					>{$t('forms.set')}</button
-				>
-			</div>
-			<div class="flex justify-center items-end">
-				<button class="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeStorage}
-					>{$t('forms.remove')}</button
-				>
-			</div>
-		</div>
-	{/if}
-</td>
+	</div>
+</div>
diff --git a/apps/ui/src/routes/applications/[id]/__layout.svelte b/apps/ui/src/routes/applications/[id]/__layout.svelte
index bc934c0ed..105bf6c24 100644
--- a/apps/ui/src/routes/applications/[id]/__layout.svelte
+++ b/apps/ui/src/routes/applications/[id]/__layout.svelte
@@ -55,7 +55,6 @@
 	export let application: any;
 	export let settings: any;
 	import { page } from '$app/stores';
-	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
 	import { del, get, post } from '$lib/api';
 	import { goto } from '$app/navigation';
 	import { onDestroy, onMount } from 'svelte';
@@ -100,23 +99,6 @@
 		}
 	}
 
-	async function deleteApplication(name: string, force: boolean) {
-		const sure = confirm($t('application.confirm_to_delete', { name }));
-		if (sure) {
-			$status.application.initialLoading = true;
-			try {
-				await del(`/applications/${id}`, { id, force });
-				return await window.location.assign(`/`);
-			} catch (error) {
-				if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid`)) {
-					forceDelete = true;
-				}
-				return errorNotification(error);
-			} finally {
-				$status.application.initialLoading = false;
-			}
-		}
-	}
 	async function restartApplication() {
 		try {
 			$status.application.initialLoading = true;
@@ -192,52 +174,20 @@
 <div class="mx-auto max-w-screen-2xl px-6 grid grid-cols-1 lg:grid-cols-2">
 	<nav class="header flex flex-row order-2 lg:order-1 px-0 lg:px-4">
 		<div class="title lg:pb-10">
-			{#if $page.url.pathname === `/applications/${id}` || $page.url.pathname === `/applications/${id}/features`}
-				Configurations
-			{:else if $page.url.pathname === `/applications/${id}/secrets`}
-				Secrets
-			{:else if $page.url.pathname === `/applications/${id}/storages`}
-				Persistent Storages
-			{:else if $page.url.pathname === `/applications/${id}/previews`}
-				Preview Deployments
-			{:else if $page.url.pathname === `/applications/${id}/logs`}
-				Application Logs
-			{:else if $page.url.pathname === `/applications/${id}/logs/build`}
-				Build Logs
-			{:else if $page.url.pathname === `/applications/${id}/configuration/source`}
+			{#if $page.url.pathname === `/applications/${id}/configuration/source`}
 				Select a Git Source
 			{:else if $page.url.pathname === `/applications/${id}/configuration/destination`}
 				Select a Destination
 			{:else if $page.url.pathname === `/applications/${id}/configuration/buildpack`}
 				Select a Build Pack
+			{:else}
+				Configurations
 			{/if}
 		</div>
 	</nav>
 	<div
 		class="header flex flex-row items-start justify-center lg:justify-end space-x-2 order-1 lg:order-2"
 	>
-		{#if $location}
-			<a id="open" href={$location} target="_blank" class="icons bg-transparent"
-				><svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					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" />
-					<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-					<line x1="10" y1="14" x2="20" y2="4" />
-					<polyline points="15 4 20 4 20 9" />
-				</svg></a
-			>
-			<Tooltip triggeredBy="#open">Open</Tooltip>
-
-			<div class="hidden lg:block border border-coolgray-500 h-8" />
-		{/if}
 		{#if $status.application.isExited || $status.application.isRestarting}
 			<a
 				id="applicationerror"
@@ -340,7 +290,7 @@
 					id="forceredeploy"
 					type="submit"
 					disabled={!$isDeploymentEnabled}
-					class="icons bg-transparent"
+					class="icons bg-transparent "
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -358,20 +308,20 @@
 							transform="rotate(-45 12 12)"
 						/>
 					</svg>
+					
 				</button>
 				<Tooltip triggeredBy="#forceredeploy">Force redeploy (without cache)</Tooltip>
 			</form>
 		{:else}
 			<form on:submit|preventDefault={() => handleDeploySubmit(false)}>
 				<button
-					id="deploy"
 					type="submit"
 					disabled={!$isDeploymentEnabled}
-					class="icons bg-transparent text-success"
+					class="btn bg-success"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
+						class="w-6 h-6 mr-4"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -382,61 +332,16 @@
 						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 						<path d="M7 4v16l13 -8z" />
 					</svg>
+					Build & Deploy
 				</button>
-				<Tooltip triggeredBy="#deploy">Deploy</Tooltip>
 			</form>
 		{/if}
-		<div class="hidden lg:block border border-coolgray-500 h-8" />
-		<a
-			href={$isDeploymentEnabled ? `/applications/${id}` : null}
-			sveltekit:prefetch
-			class="hover:text-yellow-500 rounded"
-			class:text-yellow-500={$page.url.pathname === `/applications/${id}` ||
-				$page.url.pathname === `/applications/${id}/features`}
-			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}` ||
-				$page.url.pathname === `/applications/${id}/features`}
-		>
-			<button
-				disabled={!$isDeploymentEnabled}
-				id="configurations"
-				class="icons bg-transparent text-sm"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					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="4" y="8" width="4" height="4" />
-					<line x1="6" y1="4" x2="6" y2="8" />
-					<line x1="6" y1="12" x2="6" y2="20" />
-					<rect x="10" y="14" width="4" height="4" />
-					<line x1="12" y1="4" x2="12" y2="14" />
-					<line x1="12" y1="18" x2="12" y2="20" />
-					<rect x="16" y="5" width="4" height="4" />
-					<line x1="18" y1="4" x2="18" y2="5" />
-					<line x1="18" y1="9" x2="18" y2="20" />
-				</svg></button
-			></a
-		>
 
-		<Tooltip triggeredBy="#configurations">Configurations</Tooltip>
-		<a
-			href={$isDeploymentEnabled ? `/applications/${id}/secrets` : null}
-			sveltekit:prefetch
-			class="hover:text-pink-500 rounded"
-			class:text-pink-500={$page.url.pathname === `/applications/${id}/secrets`}
-			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/secrets`}
-		>
-			<button id="secrets" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
-				<svg
+		{#if $location && $status.application.isRunning}
+			<a href={$location} target="_blank" class="btn text-sm btn-primary"
+				><svg
 					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
+					class="h-6 w-6 mr-2"
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
@@ -445,182 +350,19 @@
 					stroke-linejoin="round"
 				>
 					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<path
-						d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
-					/>
-					<circle cx="12" cy="11" r="1" />
-					<line x1="12" y1="12" x2="12" y2="14.5" />
-				</svg></button
-			></a
-		>
-		<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
-		<a
-			href={$isDeploymentEnabled ? `/applications/${id}/storages` : null}
-			sveltekit:prefetch
-			class="hover:text-pink-500 rounded"
-			class:text-pink-500={$page.url.pathname === `/applications/${id}/storages`}
-			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/storages`}
-		>
-			<button
-				id="persistentstorages"
-				disabled={!$isDeploymentEnabled}
-				class="icons bg-transparent text-sm"
+					<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+					<line x1="10" y1="14" x2="20" y2="4" />
+					<polyline points="15 4 20 4 20 9" />
+				</svg>Open</a
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
-					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" />
-					<ellipse cx="12" cy="6" rx="8" ry="3" />
-					<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
-					<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
-				</svg>
-			</button></a
-		>
-		<Tooltip triggeredBy="#persistentstorages">Persistent Storages</Tooltip>
-		{#if !application.settings.isBot}
-			<a
-				href={$isDeploymentEnabled ? `/applications/${id}/previews` : null}
-				sveltekit:prefetch
-				class="hover:text-orange-500 rounded"
-				class:text-orange-500={$page.url.pathname === `/applications/${id}/previews`}
-				class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/previews`}
-			>
-				<button id="previews" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
-						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" />
-						<circle cx="7" cy="18" r="2" />
-						<circle cx="7" cy="6" r="2" />
-						<circle cx="17" cy="12" r="2" />
-						<line x1="7" y1="8" x2="7" y2="16" />
-						<path d="M7 8a4 4 0 0 0 4 4h4" />
-					</svg></button
-				></a
-			>
-			<Tooltip triggeredBy="#previews">Previews</Tooltip>
-		{/if}
-		<div class="hidden lg:block border border-coolgray-500 h-8" />
-		<a
-			href={$isDeploymentEnabled && $status.application.isRunning
-				? `/applications/${id}/logs`
-				: null}
-			sveltekit:prefetch
-			class="hover:text-sky-500 rounded"
-			class:text-sky-500={$page.url.pathname === `/applications/${id}/logs`}
-			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs`}
-		>
-			<button
-				id="applicationlogs"
-				disabled={!$isDeploymentEnabled || !$status.application.isRunning}
-				class="icons bg-transparent text-sm"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					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" />
-					<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
-					<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
-					<line x1="3" y1="6" x2="3" y2="19" />
-					<line x1="12" y1="6" x2="12" y2="19" />
-					<line x1="21" y1="6" x2="21" y2="19" />
-				</svg>
-			</button></a
-		>
-		<Tooltip triggeredBy="#applicationlogs">Application Logs</Tooltip>
-		<a
-			href={$isDeploymentEnabled ? `/applications/${id}/logs/build` : null}
-			sveltekit:prefetch
-			class="hover:text-red-500 rounded"
-			class:text-red-500={$page.url.pathname === `/applications/${id}/logs/build`}
-			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs/build`}
-		>
-			<button id="buildlogs" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					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" />
-					<circle cx="19" cy="13" r="2" />
-					<circle cx="4" cy="17" r="2" />
-					<circle cx="13" cy="17" r="2" />
-					<line x1="13" y1="19" x2="4" y2="19" />
-					<line x1="4" y1="15" x2="13" y2="15" />
-					<path d="M8 12v-5h2a3 3 0 0 1 3 3v5" />
-					<path d="M5 15v-2a1 1 0 0 1 1 -1h7" />
-					<path d="M19 11v-7l-6 7" />
-				</svg>
-			</button></a
-		>
-		<Tooltip triggeredBy="#buildlogs">Build Logs</Tooltip>
-		<div class="hidden lg:block border border-coolgray-500 h-8" />
-
-		{#if forceDelete}
-			<button
-				id="forcedelete"
-				on:click={() => deleteApplication(application.name, true)}
-				type="submit"
-				disabled={!$appSession.isAdmin}
-				class:bg-red-600={$appSession.isAdmin}
-				class:hover:bg-red-500={$appSession.isAdmin}
-				class="icons bg-transparent text-sm"
-			>
-				Force Delete
-			</button>
-			<Tooltip triggeredBy="#forcedelete" placement="left">Force Delete</Tooltip>
-		{:else}
-			<button
-				id="delete"
-				on:click={() => deleteApplication(application.name, false)}
-				type="submit"
-				disabled={!$appSession.isAdmin}
-				class:hover:text-red-500={$appSession.isAdmin}
-				class="icons bg-transparent text-sm"
-			>
-				<DeleteIcon />
-			</button>
-			<Tooltip triggeredBy="#delete" placement="left">Delete</Tooltip>
 		{/if}
 	</div>
 </div>
 <div class="mx-auto max-w-screen-2xl px-6 grid grid-cols-1 lg:grid-cols-4">
-	{#if $page.url.pathname === `/applications/${$page.params.id}` || $page.url.pathname === `/applications/${$page.params.id}/features`}
-		<nav class="header flex flex-col lg:pt-0">
-			<Menu />
-		</nav>
-		<div class="pt-0 px-5 col-span-0 lg:col-span-3 pb-24">
-			<slot />
-		</div>
-	{:else}
-		<div class="pt-0 px-5 col-span-0 lg:col-span-4 pb-24">
-			<slot />
-		</div>
-	{/if}
+	<nav class="header flex flex-col lg:pt-0 ">
+		<Menu {application} />
+	</nav>
+	<div class="pt-0 px-5 col-span-0 lg:col-span-3 pb-24">
+		<slot />
+	</div>
 </div>
diff --git a/apps/ui/src/routes/applications/[id]/danger.svelte b/apps/ui/src/routes/applications/[id]/danger.svelte
new file mode 100644
index 000000000..db5dfe1d5
--- /dev/null
+++ b/apps/ui/src/routes/applications/[id]/danger.svelte
@@ -0,0 +1,80 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({ fetch, params, stuff, url }) => {
+		try {
+			const response = await get(`/applications/${params.id}/secrets`);
+			return {
+				props: {
+					application: stuff.application,
+					...response
+				}
+			};
+		} catch (error) {
+			return {
+				status: 500,
+				error: new Error(`Could not load ${url}`)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let application: any;
+	import { page } from '$app/stores';
+	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
+	import { del, get } from '$lib/api';
+	import { t } from '$lib/translations';
+	import { appSession, status } from '$lib/store';
+	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
+	import Tooltip from '$lib/components/Tooltip.svelte';
+	const { id } = $page.params;
+
+	let forceDelete = false;
+	async function deleteApplication(name: string, force: boolean) {
+		const sure = confirm($t('application.confirm_to_delete', { name }));
+		if (sure) {
+			$status.application.initialLoading = true;
+			try {
+				await del(`/applications/${id}`, { id, force });
+				return await window.location.assign(`/`);
+			} catch (error) {
+				if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid`)) {
+					forceDelete = true;
+				}
+				return errorNotification(error);
+			} finally {
+				$status.application.initialLoading = false;
+			}
+		}
+	}
+</script>
+
+<div class="mx-auto w-full">
+	<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
+		<div class="title font-bold pb-3">Danger Zone</div>
+	</div>
+
+	{#if forceDelete}
+		<button
+			id="forcedelete"
+			on:click={() => deleteApplication(application.name, true)}
+			type="submit"
+			disabled={!$appSession.isAdmin}
+			class:bg-red-600={$appSession.isAdmin}
+			class:hover:bg-red-500={$appSession.isAdmin}
+			class="btn btn-sm btn-error text-sm"
+		>
+			Force Delete Application
+		</button>
+	{:else}
+		<button
+			id="delete"
+			on:click={() => deleteApplication(application.name, false)}
+			type="submit"
+			disabled={!$appSession.isAdmin}
+			class="btn btn-sm btn-error text-sm"
+		>
+			Delete Application
+		</button>
+	{/if}
+</div>
diff --git a/apps/ui/src/routes/applications/[id]/index.svelte b/apps/ui/src/routes/applications/[id]/index.svelte
index 67260000d..a5001e732 100644
--- a/apps/ui/src/routes/applications/[id]/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/index.svelte
@@ -297,12 +297,12 @@
 
 <div class="w-full">
 	<form on:submit|preventDefault={handleSubmit}>
-		<div class="mx-auto w-full ">
+		<div class="mx-auto w-full">
 			<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
 				<div class="title font-bold pb-3 ">General</div>
 				{#if $appSession.isAdmin}
 					<button
-						class="btn btn-sm btn-primary"
+						class="btn btn-sm  btn-primary"
 						type="submit"
 						class:loading
 						class:bg-orange-600={forceSave}
diff --git a/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte b/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
index 5be454202..fd294940f 100644
--- a/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
@@ -104,63 +104,63 @@
 	});
 </script>
 
-<div class="relative" class:pt-10={currentStatus !== 'running'}>
-	{#if currentStatus === 'running'}
-		<div class="flex justify-start sticky top-0 pb-2 space-x-2">
-			<button
-				on:click={followBuild}
-				class="btn btn-sm bg-coollabs"
-				class:bg-coolgray-300={followingLogs}
-				class:text-applications={followingLogs}
+<div class="relative">
+	<div class="flex justify-start  top-0 pb-2 space-x-2">
+		<button
+			on:click={followBuild}
+			class="btn btn-sm bg-coollabs"
+			disabled={currentStatus !== 'running'}
+			class:bg-coolgray-300={followingLogs || currentStatus !== 'running'}
+			class:text-applications={followingLogs}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6 mr-2"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6 mr-2"
-					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" />
-					<circle cx="12" cy="12" r="9" />
-					<line x1="8" y1="12" x2="12" y2="16" />
-					<line x1="12" y1="8" x2="12" y2="16" />
-					<line x1="16" y1="12" x2="12" y2="16" />
-				</svg>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<circle cx="12" cy="12" r="9" />
+				<line x1="8" y1="12" x2="12" y2="16" />
+				<line x1="12" y1="8" x2="12" y2="16" />
+				<line x1="16" y1="12" x2="12" y2="16" />
+			</svg>
 
-				{followingLogs ? 'Following Logs...' : 'Follow Logs'}
-			</button>
+			{followingLogs ? 'Following Logs...' : 'Follow Logs'}
+		</button>
 
-			<button
-				on:click={cancelBuild}
-				class:animation-spin={cancelInprogress}
-				class="btn btn-sm"
-				class:bg-error={!cancelInprogress}
-				class:bg-coolgray-300={cancelInprogress}
-				class:text-error={cancelInprogress}
+		<button
+			on:click={cancelBuild}
+			class:animation-spin={cancelInprogress}
+			class="btn btn-sm"
+			disabled={currentStatus !== 'running'}
+			class:bg-coolgray-300={cancelInprogress || currentStatus !== 'running'}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6 mr-2"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6 mr-2"
-					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" />
-					<circle cx="12" cy="12" r="9" />
-					<path d="M10 10l4 4m0 -4l-4 4" />
-				</svg>
-				{cancelInprogress ? 'Cancelling...' : 'Cancel Build'}
-			</button>
-			<button id="streaming" class="btn btn-sm bg-transparent border-none loading" />
-			<Tooltip triggeredBy="#streaming">Streaming logs</Tooltip>
-		</div>
-	{/if}
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<circle cx="12" cy="12" r="9" />
+				<path d="M10 10l4 4m0 -4l-4 4" />
+			</svg>
+			{cancelInprogress ? 'Cancelling...' : 'Cancel Build'}
+		</button>
+		{#if currentStatus === 'running'}
+		<button id="streaming" class="btn btn-sm bg-transparent border-none loading" />
+		<Tooltip triggeredBy="#streaming">Streaming logs</Tooltip>
+		{/if}
+	</div>
 	{#if currentStatus === 'queued'}
 		<div
 			class="font-mono w-full bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col whitespace-nowrap scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
@@ -171,7 +171,7 @@
 		<div
 			bind:this={logsEl}
 			on:scroll={detect}
-			class="font-mono w-full bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
+			class="font-mono w-full bg-coolgray-100 border border-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
 		>
 			{#each logs as log}
 				{#if fromDb}
diff --git a/apps/ui/src/routes/applications/[id]/logs/build.svelte b/apps/ui/src/routes/applications/[id]/logs/build.svelte
index 188300697..4f44a2e0d 100644
--- a/apps/ui/src/routes/applications/[id]/logs/build.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/build.svelte
@@ -45,7 +45,6 @@
 		loadBuildLogsInterval = setInterval(() => {
 			getBuildLogs();
 		}, 2000);
-		
 	});
 	onDestroy(() => {
 		clearInterval(loadBuildLogsInterval);
@@ -54,14 +53,14 @@
 		const response = await get(`/applications/${$page.params.id}/logs/build?skip=${skip}`);
 		builds = response.builds;
 	}
-	
+
 	async function loadMoreBuilds() {
 		if (buildCount >= skip) {
 			skip = skip + 5;
 			noMoreBuilds = buildCount <= skip;
 			try {
 				const data = await get(`/applications/${id}/logs/build?skip=${skip}`);
-				builds = data.builds
+				builds = data.builds;
 				return;
 			} catch (error) {
 				return errorNotification(error);
@@ -107,12 +106,35 @@
 	}
 </script>
 
-<div class="block flex-row justify-start space-x-2 px-5  sm:px-10 md:flex">
+<div class="mx-auto w-full">
+	<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
+		<div class="flex flex-row">
+			<div class="title font-bold pb-3 pr-3">Build Logs</div>
+			<button class="btn btn-sm bg-error" on:click={resetQueue}>Reset Build Queue</button>
+		</div>
+	</div>
+</div>
+<div class="block flex-col justify-start space-x-2 flex flex-col-reverse lg:flex-row">
+	<div class="flex-1 md:w-96">
+		{#if $selectedBuildId}
+			{#key $selectedBuildId}
+				<svelte:component this={BuildLog} />
+			{/key}
+		{/if}
+	</div>
 	<div class="mb-4 min-w-[16rem] space-y-2 md:mb-0 ">
-		<button class="btn btn-sm w-full bg-error" on:click={resetQueue}
-			>Reset Build Queue</button
-		>
 		<div class="top-4 md:sticky">
+			{#if !noMoreBuilds}
+				{#if buildCount > 5}
+					<div class="flex space-x-2 pb-2">
+						<button
+							disabled={noMoreBuilds}
+							class=" btn btn-sm w-full btn-primary"
+							on:click={loadMoreBuilds}>{$t('application.build.load_more')}</button
+						>
+					</div>
+				{/if}
+			{/if}
 			{#each builds as build, index (build.id)}
 				<div
 					id={`building-${build.id}`}
@@ -141,9 +163,7 @@
 					<div class="w-48 text-center text-xs">
 						{#if build.status === 'running'}
 							<div>
-								<span class="font-bold text-xl"
-									>{build.elapsed}s</span
-								>
+								<span class="font-bold text-xl">{build.elapsed}s</span>
 							</div>
 						{:else if build.status !== 'queued'}
 							<div>{day(build.updatedAt).utc().fromNow()}</div>
@@ -162,24 +182,6 @@
 				>
 			{/each}
 		</div>
-		{#if !noMoreBuilds}
-			{#if buildCount > 5}
-				<div class="flex space-x-2 pb-10">
-					<button
-						disabled={noMoreBuilds}
-						class=" btn btn-sm w-full"
-						on:click={loadMoreBuilds}>{$t('application.build.load_more')}</button
-					>
-				</div>
-			{/if}
-		{/if}
-	</div>
-	<div class="flex-1 md:w-96">
-		{#if $selectedBuildId}
-			{#key $selectedBuildId}
-				<svelte:component this={BuildLog} />
-			{/key}
-		{/if}
 	</div>
 </div>
 {#if buildCount === 0}
diff --git a/apps/ui/src/routes/applications/[id]/logs/index.svelte b/apps/ui/src/routes/applications/[id]/logs/index.svelte
index 009954532..4ec6ab28d 100644
--- a/apps/ui/src/routes/applications/[id]/logs/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/index.svelte
@@ -91,7 +91,12 @@
 	}
 </script>
 
-<div class="flex flex-row justify-center space-x-2 px-10">
+<div class="mx-auto w-full">
+	<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
+		<div class="title font-bold pb-3">Application Logs</div>
+	</div>
+</div>
+<div class="flex flex-row justify-center space-x-2">
 	{#if logs.length === 0}
 		<div class="text-xl font-bold tracking-tighter">{$t('application.build.waiting_logs')}</div>
 	{:else}
@@ -129,7 +134,7 @@
 			<div
 				bind:this={logsEl}
 				on:scroll={detect}
-				class="font-mono w-full bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
+				class="font-mono w-full bg-coolgray-100 border border-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
 			>
 				{#each logs as log}
 					<p>{log + '\n'}</p>
diff --git a/apps/ui/src/routes/applications/[id]/previews/index.svelte b/apps/ui/src/routes/applications/[id]/previews/index.svelte
index 2ebd0a5af..38447538d 100644
--- a/apps/ui/src/routes/applications/[id]/previews/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/previews/index.svelte
@@ -177,6 +177,13 @@
 	});
 </script>
 
+<div class="w-full">
+	<div class="mx-auto w-full">
+		<div class="flex flex-row border-b border-coolgray-500 mb-6  space-x-2">
+			<div class="title font-bold pb-3">Preview Deployments</div>
+		</div>
+	</div>
+</div>
 <div class="flex justify-center">
 	<SimpleExplainer
 		text={applicationSecrets && applicationSecrets.length === 0
diff --git a/apps/ui/src/routes/applications/[id]/secrets.svelte b/apps/ui/src/routes/applications/[id]/secrets.svelte
index 84331d532..647deddb7 100644
--- a/apps/ui/src/routes/applications/[id]/secrets.svelte
+++ b/apps/ui/src/routes/applications/[id]/secrets.svelte
@@ -20,14 +20,12 @@
 
 <script lang="ts">
 	export let secrets: any;
-	export let application: any;
-	import pLimit from 'p-limit';
-	import Secret from './_Secret.svelte';
+		import pLimit from 'p-limit';
 	import { page } from '$app/stores';
-	import { t } from '$lib/translations';
 	import { get } from '$lib/api';
 	import { saveSecret } from './utils';
 	import { addToast } from '$lib/store';
+	import Secret from './_Secret.svelte';
 
 	const limit = pLimit(1);
 	const { id } = $page.params;
@@ -37,8 +35,8 @@
 		const data = await get(`/applications/${id}/secrets`);
 		secrets = [...data.secrets];
 	}
-	async function getValues(e: any) {
-		e.preventDefault();
+	async function getValues() {
+		if (!batchSecrets) return;
 		const eachValuePair = batchSecrets.split('\n');
 		const batchSecretsPairs = eachValuePair
 			.filter((secret) => !secret.startsWith('#') && secret)
@@ -67,41 +65,31 @@
 	}
 </script>
 
-<div class="mx-auto max-w-6xl px-6 pt-4">
-	<div class="overflow-x-auto">
-		<table class="mx-auto border-separate text-left">
-			<thead>
-				<tr class="h-12">
-					<th scope="col">{$t('forms.name')}</th>
-					<th scope="col">{$t('forms.value')}</th>
-					<th scope="col" class="w-64 text-center"
-						>{$t('application.preview.need_during_buildtime')}</th
-					>
-					<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
-				</tr>
-			</thead>
-			<tbody>
-				{#each secrets as secret}
-					{#key secret.id}
-						<tr>
-							<Secret
-								name={secret.name}
-								value={secret.value}
-								isBuildSecret={secret.isBuildSecret}
-								on:refresh={refreshSecrets}
-							/>
-						</tr>
-					{/key}
-				{/each}
-				<tr>
-					<Secret isNewSecret on:refresh={refreshSecrets} />
-				</tr>
-			</tbody>
-		</table>
+<div class="mx-auto w-full">
+	<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
+		<div class="title font-bold pb-3">Secrets</div>
 	</div>
-	<h2 class="title my-6 font-bold">Paste .env file</h2>
-	<form on:submit|preventDefault={getValues} class="mb-12 w-full">
-		<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
-		<button class="btn btn-sm bg-applications" type="submit">Batch add secrets</button>
-	</form>
+	{#each secrets as secret}
+		{#key secret.id}
+			<Secret
+				length={secrets.length}
+				name={secret.name}
+				value={secret.value}
+				isBuildSecret={secret.isBuildSecret}
+				on:refresh={refreshSecrets}
+			/>
+		{/key}
+	{/each}
+	<Secret isNewSecret on:refresh={refreshSecrets} />
+
 </div>
+<form on:submit|preventDefault={getValues} class="mb-12 w-full">
+	<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2 pt-10">
+		<div class="flex flex-row space-x-2">
+			<div class="title font-bold pb-3 ">Paste <code>.env</code> file</div>
+			<button class="btn btn-sm bg-primary" type="submit">Add Secrets in Batch</button>
+		</div>
+	</div>
+
+	<textarea placeholder={`PORT=1337\nPASSWORD=supersecret`} bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
+</form>
diff --git a/apps/ui/src/routes/applications/[id]/storages.svelte b/apps/ui/src/routes/applications/[id]/storages.svelte
index 2433ec7d6..8926b437e 100644
--- a/apps/ui/src/routes/applications/[id]/storages.svelte
+++ b/apps/ui/src/routes/applications/[id]/storages.svelte
@@ -32,24 +32,22 @@
 	}
 </script>
 
-<div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
-	<table class="mx-auto border-separate text-left">
-		<thead>
-			<tr class="h-12">
-				<th scope="col">{$t('forms.path')} <Explainer position="dropdown-bottom" explanation={$t('application.storage.persistent_storage_explainer')} /></th>
-			</tr>
-		</thead>
-		<tbody>
-			{#each persistentStorages as storage}
-				{#key storage.id}
-					<tr>
-						<Storage on:refresh={refreshStorage} {storage} />
-					</tr>
-				{/key}
-			{/each}
-			<tr>
-				<Storage on:refresh={refreshStorage} isNew />
-			</tr>
-		</tbody>
-	</table>
+<div class="w-full">
+	<div class="mx-auto w-full">
+		<div class="flex flex-row border-b border-coolgray-500 mb-6  space-x-2">
+			<div class="title font-bold pb-3">
+				Persistent Volumes <Explainer
+					position="dropdown-bottom"
+					explanation={$t('application.storage.persistent_storage_explainer')}
+				/>
+			</div>
+		</div>
+
+		{#each persistentStorages as storage}
+			{#key storage.id}
+				<Storage on:refresh={refreshStorage} {storage} />
+			{/key}
+		{/each}
+		<Storage on:refresh={refreshStorage} isNew />
+	</div>
 </div>
diff --git a/apps/ui/src/tailwind.css b/apps/ui/src/tailwind.css
index 9e26c5f00..29a843a56 100644
--- a/apps/ui/src/tailwind.css
+++ b/apps/ui/src/tailwind.css
@@ -17,6 +17,9 @@ @font-face {
 		url('/poppins-v19-latin-ext_latin_devanagari-500.woff') format('woff');
 }
 
+button {
+	@apply text-sm !important;
+}
 html {
 	@apply h-full min-h-full overflow-y-scroll;
 }