From df18b938099c60ee5d90052ea081410cbf78f6b3 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Tue, 22 Feb 2022 12:56:58 +0100
Subject: [PATCH] Design day!

---
 src/lib/components/CopyPasswordField.svelte   |   2 +-
 src/lib/components/Explainer.svelte           |   2 +-
 src/routes/__layout.svelte                    |  19 +-
 src/routes/applications/[id]/index.svelte     |  51 +++--
 .../applications/[id]/secrets/_Secret.svelte  |  18 +-
 .../applications/[id]/secrets/index.svelte    |  32 +--
 .../databases/[id]/_Databases/_CouchDb.svelte |  10 +-
 .../[id]/_Databases/_Databases.svelte         |  12 +-
 .../databases/[id]/_Databases/_MongoDB.svelte |   4 +-
 .../databases/[id]/_Databases/_MySQL.svelte   |  10 +-
 .../[id]/_Databases/_PostgreSQL.svelte        |   6 +-
 .../databases/[id]/_Databases/_Redis.svelte   |   2 +-
 .../destinations/[id]/_LocalDocker.svelte     | 128 +++++------
 src/routes/destinations/[id]/index.svelte     |   5 +-
 src/routes/new/destination/_Docker.svelte     |  64 ++----
 src/routes/new/source/_Github.svelte          |  57 +++--
 src/routes/new/source/_Gitlab.svelte          |  83 +++----
 .../services/[id]/_Services/_Services.svelte  |  35 ++-
 src/routes/settings/index.svelte              |   6 +-
 src/routes/sources/[id]/_Github.svelte        |  46 ++--
 src/routes/sources/[id]/_Gitlab.svelte        | 216 ++++++++----------
 src/routes/sources/[id]/index.svelte          |   2 +-
 src/routes/teams/[id]/index.svelte            |  86 ++++---
 src/tailwind.css                              |   4 +-
 24 files changed, 418 insertions(+), 482 deletions(-)

diff --git a/src/lib/components/CopyPasswordField.svelte b/src/lib/components/CopyPasswordField.svelte
index 9a409fb17..cb207b475 100644
--- a/src/lib/components/CopyPasswordField.svelte
+++ b/src/lib/components/CopyPasswordField.svelte
@@ -29,7 +29,7 @@
 	{#if !isPasswordField || showPassword}
 		{#if textarea}
 			<textarea
-				rows="3"
+				rows="5"
 				class={disabledClass}
 				{placeholder}
 				type="text"
diff --git a/src/lib/components/Explainer.svelte b/src/lib/components/Explainer.svelte
index b47c03ec1..5d4e208f9 100644
--- a/src/lib/components/Explainer.svelte
+++ b/src/lib/components/Explainer.svelte
@@ -3,4 +3,4 @@
 	export let customClass = 'max-w-[24rem]';
 </script>
 
-<div class="py-1 text-xs text-stone-400 {customClass}">{@html text}</div>
+<div class="p-2 text-xs text-stone-400 {customClass}">{@html text}</div>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index c31e462cb..a355b085c 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -444,7 +444,8 @@
 						</button>
 					{/if}
 				{/if}
-
+			</div>
+			<div class="flex flex-col space-y-4 py-2">
 				<a
 					sveltekit:prefetch
 					href="/teams"
@@ -519,15 +520,15 @@
 						<path d="M7 12h14l-3 -3m0 6l3 -3" />
 					</svg>
 				</div>
-			</div>
-			<div
-				class="w-full text-center font-bold text-stone-400 hover:bg-coolgray-200 hover:text-white"
-			>
-				<a
-					class="text-[10px] no-underline"
-					href={`https://github.com/coollabsio/coolify/releases/tag/v${$session.version}`}
-					target="_blank">v{$session.version}</a
+				<div
+					class="w-full text-center font-bold text-stone-400 hover:bg-coolgray-200 hover:text-white"
 				>
+					<a
+						class="text-[10px] no-underline"
+						href={`https://github.com/coollabsio/coolify/releases/tag/v${$session.version}`}
+						target="_blank">v{$session.version}</a
+					>
+				</div>
 			</div>
 		</div>
 	</nav>
diff --git a/src/routes/applications/[id]/index.svelte b/src/routes/applications/[id]/index.svelte
index bfd9133eb..af1d6c2f6 100644
--- a/src/routes/applications/[id]/index.svelte
+++ b/src/routes/applications/[id]/index.svelte
@@ -174,7 +174,7 @@
 		</div>
 		<div class="grid grid-flow-row gap-2 px-10">
 			<div class="mt-2 grid grid-cols-2 items-center">
-				<label for="name">Name</label>
+				<label for="name" class="text-base font-bold text-stone-100">Name</label>
 				<input
 					readonly={!$session.isAdmin}
 					name="name"
@@ -184,7 +184,7 @@
 				/>
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="gitSource">Git Source</label>
+				<label for="gitSource" class="text-base font-bold text-stone-100">Git Source</label>
 				<a
 					href={$session.isAdmin
 						? `/applications/${id}/configuration/source?from=/applications/${id}`
@@ -199,7 +199,7 @@
 				>
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="repository">Git Repository</label>
+				<label for="repository" class="text-base font-bold text-stone-100">Git Repository</label>
 				<a
 					href={$session.isAdmin
 						? `/applications/${id}/configuration/repository?from=/applications/${id}&to=/applications/${id}/configuration/buildpack`
@@ -214,7 +214,7 @@
 				>
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="buildPack">Build Pack</label>
+				<label for="buildPack" class="text-base font-bold text-stone-100">Build Pack</label>
 				<a
 					href={$session.isAdmin
 						? `/applications/${id}/configuration/buildpack?from=/applications/${id}`
@@ -230,7 +230,7 @@
 				>
 			</div>
 			<div class="grid grid-cols-2 items-center pb-8">
-				<label for="destination">Destination</label>
+				<label for="destination" class="text-base font-bold text-stone-100">Destination</label>
 				<div class="no-underline">
 					<input
 						value={application.destinationDocker.name}
@@ -247,7 +247,7 @@
 		<div class="grid grid-flow-row gap-2 px-10">
 			<div class="grid grid-cols-2">
 				<div class="flex-col">
-					<label for="fqdn" class="relative pt-2">Domain (FQDN)</label>
+					<label for="fqdn" class="pt-2 text-base font-bold text-stone-100">Domain (FQDN)</label>
 					<Explainer
 						text="If you specify <span class='text-green-500 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-green-500 font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application."
 					/>
@@ -277,7 +277,7 @@
 			</div>
 			{#if !staticDeployments.includes(application.buildPack)}
 				<div class="grid grid-cols-2 items-center">
-					<label for="port">Port</label>
+					<label for="port" class="text-base font-bold text-stone-100">Port</label>
 					<input
 						readonly={!$session.isAdmin}
 						name="port"
@@ -290,7 +290,9 @@
 
 			{#if !notNodeDeployments.includes(application.buildPack)}
 				<div class="grid grid-cols-2 items-center">
-					<label for="installCommand">Install Command</label>
+					<label for="installCommand" class="text-base font-bold text-stone-100"
+						>Install Command</label
+					>
 					<input
 						readonly={!$session.isAdmin}
 						name="installCommand"
@@ -300,7 +302,7 @@
 					/>
 				</div>
 				<div class="grid grid-cols-2 items-center">
-					<label for="buildCommand">Build Command</label>
+					<label for="buildCommand" class="text-base font-bold text-stone-100">Build Command</label>
 					<input
 						readonly={!$session.isAdmin}
 						name="buildCommand"
@@ -310,7 +312,7 @@
 					/>
 				</div>
 				<div class="grid grid-cols-2 items-center">
-					<label for="startCommand" class="">Start Command</label>
+					<label for="startCommand" class="text-base font-bold text-stone-100">Start Command</label>
 					<input
 						readonly={!$session.isAdmin}
 						name="startCommand"
@@ -322,7 +324,14 @@
 			{/if}
 
 			<div class="grid grid-cols-2 items-center">
-				<label for="baseDirectory" class="pt-2">Base Directory</label>
+				<div class="flex-col">
+					<label for="baseDirectory" class="pt-2 text-base font-bold text-stone-100"
+						>Base Directory</label
+					>
+					<Explainer
+						text="Directory to use as the base for all commands.<br>Could be useful with <span class='text-green-500 font-bold'>monorepos</span>."
+					/>
+				</div>
 				<input
 					readonly={!$session.isAdmin}
 					name="baseDirectory"
@@ -330,13 +339,18 @@
 					bind:value={application.baseDirectory}
 					placeholder="default: /"
 				/>
-				<Explainer
-					text="Directory to use as the base of all commands. <br> Could be useful with monorepos."
-				/>
 			</div>
 			{#if !notNodeDeployments.includes(application.buildPack)}
-				<div class="grid grid-cols-2">
-					<label for="publishDirectory" class="pt-2">Publish Directory</label>
+				<div class="grid grid-cols-2 items-center">
+					<div class="flex-col">
+						<label for="publishDirectory" class="pt-2 text-base font-bold text-stone-100"
+							>Publish Directory</label
+						>
+						<Explainer
+							text="Directory containing all the assets for deployment. <br> For example: <span class='text-green-500 font-bold'>dist</span>,<span class='text-green-500 font-bold'>_site</span> or <span class='text-green-500 font-bold'>public</span>."
+						/>
+					</div>
+
 					<input
 						readonly={!$session.isAdmin}
 						name="publishDirectory"
@@ -344,9 +358,6 @@
 						bind:value={application.publishDirectory}
 						placeholder=" default: /"
 					/>
-					<Explainer
-						text="Directory containing all the assets for deployment. <br> For example: <span class='text-green-600 font-bold'>dist</span>,<span class='text-green-600 font-bold'>_site</span> or <span class='text-green-600 font-bold'>public</span>."
-					/>
 				</div>
 			{/if}
 		</div>
@@ -378,7 +389,7 @@
 				bind:setting={debug}
 				on:click={() => changeSettings('debug')}
 				title="Debug Logs"
-				description="Enable debug logs during build phase. <br>(<span class='text-red-500'>sensitive information</span> could be visible in logs)"
+				description="Enable debug logs during build phase.<br><span class='text-red-500 font-bold'>Sensitive information</span> could be visible and saved in logs."
 			/>
 		</div>
 	</div>
diff --git a/src/routes/applications/[id]/secrets/_Secret.svelte b/src/routes/applications/[id]/secrets/_Secret.svelte
index d5d0988d9..12b03cb7b 100644
--- a/src/routes/applications/[id]/secrets/_Secret.svelte
+++ b/src/routes/applications/[id]/secrets/_Secret.svelte
@@ -59,19 +59,19 @@
 	}
 </script>
 
-<td class="whitespace-nowrap px-6 py-2 text-sm font-medium text-white">
+<td>
 	<input
 		id={isNewSecret ? 'secretName' : 'secretNameNew'}
 		bind:value={name}
 		required
 		placeholder="EXAMPLE_VARIABLE"
-		class="-mx-2 w-64 border-2 border-transparent"
+		class=" border border-dashed border-coolgray-300"
 		readonly={!isNewSecret}
 		class:bg-transparent={!isNewSecret}
 		class:cursor-not-allowed={!isNewSecret}
 	/>
 </td>
-<td class="whitespace-nowrap px-6 py-2 text-sm font-medium text-white">
+<td>
 	<CopyPasswordField
 		id={isNewSecret ? 'secretValue' : 'secretValueNew'}
 		name={isNewSecret ? 'secretValue' : 'secretValueNew'}
@@ -81,7 +81,7 @@
 		placeholder="J$#@UIO%HO#$U%H"
 	/>
 </td>
-<td class="whitespace-nowrap px-6 py-2 text-center text-sm font-medium text-white">
+<td class="text-center">
 	<div
 		type="button"
 		on:click={setSecretValue}
@@ -130,21 +130,19 @@
 		</span>
 	</div>
 </td>
-<td class="whitespace-nowrap px-6 py-2 text-sm font-medium text-white">
+<td>
 	{#if isNewSecret}
 		<div class="flex items-center justify-center">
 			<button class="bg-green-600 hover:bg-green-500" on:click={() => saveSecret(true)}>Add</button>
 		</div>
 	{:else}
-		<div class="flex-col space-y-2">
+		<div class="flex flex-row justify-center space-x-2">
 			<div class="flex items-center justify-center">
-				<button class="w-24 bg-green-600 hover:bg-green-500" on:click={() => saveSecret(false)}
-					>Set</button
-				>
+				<button class="" on:click={() => saveSecret(false)}>Set</button>
 			</div>
 			{#if !isPRMRSecret}
 				<div class="flex justify-center items-end">
-					<button class="w-24 bg-red-600 hover:bg-red-500" on:click={removeSecret}>Remove</button>
+					<button class="bg-red-600 hover:bg-red-500" on:click={removeSecret}>Remove</button>
 				</div>
 			{/if}
 		</div>
diff --git a/src/routes/applications/[id]/secrets/index.svelte b/src/routes/applications/[id]/secrets/index.svelte
index 04b8593a2..faeb22361 100644
--- a/src/routes/applications/[id]/secrets/index.svelte
+++ b/src/routes/applications/[id]/secrets/index.svelte
@@ -41,33 +41,19 @@
 	</div>
 </div>
 <div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
-	<table class="mx-auto">
-		<thead class=" rounded-xl border-b border-coolgray-500">
-			<tr>
-				<th
-					scope="col"
-					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white">Name</th
-				>
-				<th
-					scope="col"
-					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white"
-					>Value</th
-				>
-				<th
-					scope="col"
-					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white"
-					>Need during buildtime?</th
-				>
-				<th
-					scope="col"
-					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white"
-				/>
+	<table class="mx-auto border-separate text-left">
+		<thead>
+			<tr class="h-12">
+				<th scope="col">Name</th>
+				<th scope="col">Value</th>
+				<th scope="col" class="w-64 text-center">Need during buildtime?</th>
+				<th scope="col" class="w-96 text-center">Action</th>
 			</tr>
 		</thead>
-		<tbody class="">
+		<tbody>
 			{#each secrets as secret}
 				{#key secret.id}
-					<tr class="h-20 transition duration-100 hover:bg-coolgray-400">
+					<tr>
 						<Secret
 							name={secret.name}
 							value={secret.value}
diff --git a/src/routes/databases/[id]/_Databases/_CouchDb.svelte b/src/routes/databases/[id]/_Databases/_CouchDb.svelte
index 1a52e342c..861e21cb5 100644
--- a/src/routes/databases/[id]/_Databases/_CouchDb.svelte
+++ b/src/routes/databases/[id]/_Databases/_CouchDb.svelte
@@ -8,7 +8,7 @@
 </div>
 <div class="space-y-2 px-10">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase">Default Database</label>
+		<label for="defaultDatabase" class="text-base font-bold text-stone-100">Default Database</label>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
@@ -20,7 +20,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser">User</label>
+		<label for="dbUser" class="text-base font-bold text-stone-100">User</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -31,7 +31,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword">Password</label>
+		<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -43,7 +43,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser">Root User</label>
+		<label for="rootUser" class="text-base font-bold text-stone-100">Root User</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -54,7 +54,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUserPassword">Root's Password</label>
+		<label for="rootUserPassword" class="text-base font-bold text-stone-100">Root's Password</label>
 		<CopyPasswordField
 			readonly
 			disabled
diff --git a/src/routes/databases/[id]/_Databases/_Databases.svelte b/src/routes/databases/[id]/_Databases/_Databases.svelte
index 9b233c8c8..7386af1fc 100644
--- a/src/routes/databases/[id]/_Databases/_Databases.svelte
+++ b/src/routes/databases/[id]/_Databases/_Databases.svelte
@@ -91,7 +91,7 @@
 
 		<div class="grid grid-flow-row gap-2 px-10">
 			<div class="grid grid-cols-2 items-center">
-				<label for="name">Name</label>
+				<label for="name" class="text-base font-bold text-stone-100">Name</label>
 				<input
 					readonly={!$session.isAdmin}
 					name="name"
@@ -101,7 +101,7 @@
 				/>
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="destination">Destination</label>
+				<label for="destination" class="text-base font-bold text-stone-100">Destination</label>
 				{#if database.destinationDockerId}
 					<div class="no-underline">
 						<input
@@ -116,14 +116,14 @@
 			</div>
 
 			<div class="grid grid-cols-2 items-center">
-				<label for="version">Version</label>
+				<label for="version" class="text-base font-bold text-stone-100">Version</label>
 				<input value={database.version} readonly disabled class="bg-transparent " />
 			</div>
 		</div>
 
 		<div class="grid grid-flow-row gap-2 px-10">
 			<div class="grid grid-cols-2 items-center">
-				<label for="host">Host</label>
+				<label for="host" class="text-base font-bold text-stone-100">Host</label>
 				<CopyPasswordField
 					placeholder="Generated automatically after start"
 					isPasswordField={false}
@@ -135,7 +135,7 @@
 				/>
 			</div>
 			<div class="grid grid-cols-2 items-center">
-				<label for="publicPort">Port</label>
+				<label for="publicPort" class="text-base font-bold text-stone-100">Port</label>
 				<CopyPasswordField
 					placeholder="Generated automatically after set to public"
 					id="publicPort"
@@ -159,7 +159,7 @@
 				<CouchDb bind:database />
 			{/if}
 			<div class="grid grid-cols-2 items-center px-10 pb-8">
-				<label for="url">Connection String</label>
+				<label for="url" class="text-base font-bold text-stone-100">Connection String</label>
 				<CopyPasswordField
 					textarea={true}
 					placeholder="Generated automatically after start"
diff --git a/src/routes/databases/[id]/_Databases/_MongoDB.svelte b/src/routes/databases/[id]/_Databases/_MongoDB.svelte
index 2b6eae411..7ec21edcd 100644
--- a/src/routes/databases/[id]/_Databases/_MongoDB.svelte
+++ b/src/routes/databases/[id]/_Databases/_MongoDB.svelte
@@ -8,7 +8,7 @@
 </div>
 <div class="space-y-2 px-10">
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser">Root User</label>
+		<label for="rootUser" class="text-base font-bold text-stone-100">Root User</label>
 		<CopyPasswordField
 			placeholder="Generated automatically after start"
 			id="rootUser"
@@ -19,7 +19,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUserPassword">Root's Password</label>
+		<label for="rootUserPassword" class="text-base font-bold text-stone-100">Root's Password</label>
 		<CopyPasswordField
 			placeholder="Generated automatically after start"
 			isPasswordField={true}
diff --git a/src/routes/databases/[id]/_Databases/_MySQL.svelte b/src/routes/databases/[id]/_Databases/_MySQL.svelte
index c27a93c08..f085b3320 100644
--- a/src/routes/databases/[id]/_Databases/_MySQL.svelte
+++ b/src/routes/databases/[id]/_Databases/_MySQL.svelte
@@ -8,7 +8,7 @@
 </div>
 <div class="space-y-2 px-10">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase">Default Database</label>
+		<label for="defaultDatabase" class="text-base font-bold text-stone-100">Default Database</label>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
@@ -20,7 +20,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser">User</label>
+		<label for="dbUser" class="text-base font-bold text-stone-100">User</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -31,7 +31,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword">Password</label>
+		<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -43,7 +43,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser">Root User</label>
+		<label for="rootUser" class="text-base font-bold text-stone-100">Root User</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -54,7 +54,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUserPassword">Root's Password</label>
+		<label for="rootUserPassword" class="text-base font-bold text-stone-100">Root's Password</label>
 		<CopyPasswordField
 			readonly
 			disabled
diff --git a/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte b/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
index c792e73d2..3f995cafc 100644
--- a/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
+++ b/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
@@ -8,7 +8,7 @@
 </div>
 <div class="space-y-2 px-10">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase">Default Database</label>
+		<label for="defaultDatabase" class="text-base font-bold text-stone-100">Default Database</label>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
@@ -20,7 +20,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser">User</label>
+		<label for="dbUser" class="text-base font-bold text-stone-100">User</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -31,7 +31,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword">Password</label>
+		<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
 		<CopyPasswordField
 			readonly
 			disabled
diff --git a/src/routes/databases/[id]/_Databases/_Redis.svelte b/src/routes/databases/[id]/_Databases/_Redis.svelte
index a828af55f..fece7c837 100644
--- a/src/routes/databases/[id]/_Databases/_Redis.svelte
+++ b/src/routes/databases/[id]/_Databases/_Redis.svelte
@@ -8,7 +8,7 @@
 </div>
 <div class="space-y-2 px-10">
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword">Password</label>
+		<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
 		<CopyPasswordField
 			disabled
 			readonly
diff --git a/src/routes/destinations/[id]/_LocalDocker.svelte b/src/routes/destinations/[id]/_LocalDocker.svelte
index ba3bebc6e..76a36787a 100644
--- a/src/routes/destinations/[id]/_LocalDocker.svelte
+++ b/src/routes/destinations/[id]/_LocalDocker.svelte
@@ -122,80 +122,72 @@
 	}
 </script>
 
-<div class="flex justify-center px-6 pb-8">
-	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
-		<div class="flex h-8 items-center space-x-2">
-			<div class="text-xl font-bold text-white">Configuration</div>
-			<button
-				type="submit"
-				class="bg-sky-600 hover:bg-sky-500"
-				class:bg-sky-600={!loading}
-				class:hover:bg-sky-500={!loading}
-				disabled={loading}
-				>{loading ? 'Saving...' : 'Save'}
-			</button>
-			<button
-				class={restarting ? '' : 'bg-red-600 hover:bg-red-500'}
-				disabled={restarting}
-				on:click|preventDefault={forceRestartProxy}
-				>{restarting ? 'Restarting... please wait...' : 'Force restart proxy'}</button
-			>
-			<!-- <button type="button" class="bg-coollabs hover:bg-coollabs-100" on:click={scanApps}
+<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
+	<div class="flex space-x-1 pb-5">
+		<div class="title font-bold">Configuration</div>
+		<button
+			type="submit"
+			class="bg-sky-600 hover:bg-sky-500"
+			class:bg-sky-600={!loading}
+			class:hover:bg-sky-500={!loading}
+			disabled={loading}
+			>{loading ? 'Saving...' : 'Save'}
+		</button>
+		<button
+			class={restarting ? '' : 'bg-red-600 hover:bg-red-500'}
+			disabled={restarting}
+			on:click|preventDefault={forceRestartProxy}
+			>{restarting ? 'Restarting... please wait...' : 'Force restart proxy'}</button
+		>
+		<!-- <button type="button" class="bg-coollabs hover:bg-coollabs-100" on:click={scanApps}
 				>Scan for applications</button
 			> -->
-		</div>
-		<div class="grid grid-cols-3 items-center">
-			<label for="name">Name</label>
-			<div class="col-span-2">
-				<input name="name" placeholder="name" bind:value={destination.name} />
-			</div>
-		</div>
+	</div>
+	<div class="grid grid-cols-2 items-center px-10 ">
+		<label for="name" class="text-base font-bold text-stone-100">Name</label>
+		<input name="name" placeholder="name" bind:value={destination.name} />
+	</div>
 
-		<div class="grid grid-cols-3 items-center">
-			<label for="engine">Engine</label>
-			<div class="col-span-2">
-				<CopyPasswordField
-					id="engine"
-					readonly
-					disabled
-					name="engine"
-					placeholder="eg: /var/run/docker.sock"
-					value={destination.engine}
-				/>
-			</div>
-		</div>
-		<!-- <div class="flex items-center">
+	<div class="grid grid-cols-2 items-center px-10">
+		<label for="engine" class="text-base font-bold text-stone-100">Engine</label>
+		<CopyPasswordField
+			id="engine"
+			readonly
+			disabled
+			name="engine"
+			placeholder="eg: /var/run/docker.sock"
+			value={destination.engine}
+		/>
+	</div>
+	<!-- <div class="flex items-center">
 			<label for="remoteEngine">Remote Engine?</label>
 			<input name="remoteEngine" type="checkbox" bind:checked={payload.remoteEngine} />
 		</div> -->
-		<div class="grid grid-cols-3 items-center">
-			<label for="network">Network</label>
-			<div class="col-span-2">
-				<CopyPasswordField
-					id="network"
-					readonly
-					disabled
-					name="network"
-					placeholder="default: coolify"
-					value={destination.network}
-				/>
-			</div>
-		</div>
-		<div class="grid grid-cols-2 items-center">
-			<Setting
-				disabled={cannotDisable}
-				bind:setting={destination.isCoolifyProxyUsed}
-				on:click={changeProxySetting}
-				title="Use Coolify Proxy?"
-				description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration. Databases will have their own proxy. <br><br>${
-					cannotDisable
-						? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
-						: ''
-				}`}
-			/>
-		</div>
-	</form>
-</div>
+	<div class="grid grid-cols-2 items-center px-10">
+		<label for="network" class="text-base font-bold text-stone-100">Network</label>
+		<CopyPasswordField
+			id="network"
+			readonly
+			disabled
+			name="network"
+			placeholder="default: coolify"
+			value={destination.network}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<Setting
+			disabled={cannotDisable}
+			bind:setting={destination.isCoolifyProxyUsed}
+			on:click={changeProxySetting}
+			title="Use Coolify Proxy?"
+			description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration. Databases will have their own proxy. <br><br>${
+				cannotDisable
+					? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
+					: ''
+			}`}
+		/>
+	</div>
+</form>
 <!-- <div class="flex justify-center">
 	{#if payload.isCoolifyProxyUsed}
 		{#if state}
diff --git a/src/routes/destinations/[id]/index.svelte b/src/routes/destinations/[id]/index.svelte
index a4527d46e..a5b2996c8 100644
--- a/src/routes/destinations/[id]/index.svelte
+++ b/src/routes/destinations/[id]/index.svelte
@@ -42,5 +42,6 @@
 	<span class="arrow-right-applications px-1">></span>
 	<span class="pr-2">{destination.name}</span>
 </div>
-
-<LocalDocker bind:destination {settings} {state} />
+<div class="mx-auto max-w-4xl px-6">
+	<LocalDocker bind:destination {settings} {state} />
+</div>
diff --git a/src/routes/new/destination/_Docker.svelte b/src/routes/new/destination/_Docker.svelte
index 044d0f24b..47a070049 100644
--- a/src/routes/new/destination/_Docker.svelte
+++ b/src/routes/new/destination/_Docker.svelte
@@ -5,7 +5,7 @@
 
 	import { post } from '$lib/api';
 	import Setting from '$lib/components/Setting.svelte';
-	import { enhance, errorNotification } from '$lib/form';
+	import { errorNotification } from '$lib/form';
 
 	let loading = false;
 
@@ -24,8 +24,8 @@
 
 <div class="flex justify-center px-6 pb-8">
 	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
-		<div class="flex h-8 items-center space-x-2">
-			<div class="text-xl font-bold text-white">Configuration</div>
+		<div class="flex items-center space-x-2 pb-5">
+			<div class="title font-bold">Configuration</div>
 			<button
 				type="submit"
 				class:bg-sky-600={!loading}
@@ -38,24 +38,20 @@
 					: 'Save'}</button
 			>
 		</div>
-		<div class="grid grid-cols-3 items-center">
-			<label for="name">Name</label>
-			<div class="col-span-2">
-				<input required name="name" placeholder="name" bind:value={payload.name} />
-			</div>
+		<div class="mt-2 grid grid-cols-2 items-center px-10">
+			<label for="name" class="text-base font-bold text-stone-100">Name</label>
+			<input required name="name" placeholder="name" bind:value={payload.name} />
 		</div>
 
-		<div class="grid grid-cols-3 items-center">
-			<label for="engine">Engine</label>
-			<div class="col-span-2">
-				<input
-					required
-					name="engine"
-					placeholder="eg: /var/run/docker.sock"
-					bind:value={payload.engine}
-				/>
-				<!-- <Explainer text="You can use remote Docker Engine with over SSH." /> -->
-			</div>
+		<div class="grid grid-cols-2 items-center px-10">
+			<label for="engine" class="text-base font-bold text-stone-100">Engine</label>
+			<input
+				required
+				name="engine"
+				placeholder="eg: /var/run/docker.sock"
+				bind:value={payload.engine}
+			/>
+			<!-- <Explainer text="You can use remote Docker Engine with over SSH." /> -->
 		</div>
 		<!-- <div class="flex items-center">
 			<label for="remoteEngine">Remote Docker Engine?</label>
@@ -75,27 +71,17 @@
 				</div>
 			</div>
 		{/if} -->
-		<div class="grid grid-cols-3 items-center">
-			<label for="network">Network</label>
-			<div class="col-span-2">
-				<input
-					required
-					name="network"
-					placeholder="default: coolify"
-					bind:value={payload.network}
-				/>
-			</div>
+		<div class="grid grid-cols-2 items-center px-10">
+			<label for="network" class="text-base font-bold text-stone-100">Network</label>
+			<input required name="network" placeholder="default: coolify" bind:value={payload.network} />
 		</div>
-		<div class="flex justify-start">
-			<ul class="mt-2 divide-y divide-stone-800">
-				<Setting
-					bind:setting={payload.isCoolifyProxyUsed}
-					on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
-					isPadding={false}
-					title="Use Coolify Proxy?"
-					description="This will install a proxy on the destination to allow you to access your applications and services without any manual configuration (recommended for Docker). Databases will have their own proxy."
-				/>
-			</ul>
+		<div class="grid grid-cols-2 items-center">
+			<Setting
+				bind:setting={payload.isCoolifyProxyUsed}
+				on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
+				title="Use Coolify Proxy?"
+				description="This will install a proxy on the destination to allow you to access your applications and services without any manual configuration (recommended for Docker).<br><br>Databases will have their own proxy."
+			/>
 		</div>
 	</form>
 </div>
diff --git a/src/routes/new/source/_Github.svelte b/src/routes/new/source/_Github.svelte
index d1d5f5c88..e8f2d33c4 100644
--- a/src/routes/new/source/_Github.svelte
+++ b/src/routes/new/source/_Github.svelte
@@ -24,26 +24,24 @@
 	}
 </script>
 
-<div class="flex justify-center pb-8">
-	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
-		<div class="flex h-8 items-center space-x-2">
-			<div class="text-xl font-bold text-white">Configuration</div>
-			<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
-		</div>
-		<div class="grid grid-cols-3 items-center">
-			<label for="type">Type</label>
+<div class="mx-auto max-w-4xl px-6">
+	<div class="flex justify-center pb-8">
+		<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
+			<div class="flex h-8 items-center space-x-2">
+				<div class="text-xl font-bold text-white">Configuration</div>
+				<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
+			</div>
+			<div class="grid grid-cols-2 items-center px-10">
+				<label for="type" class="text-base font-bold text-stone-100">Type</label>
 
-			<div class="col-span-2">
 				<select name="type" id="type" class="w-96" bind:value={gitSource.type}>
 					<option value="github">GitHub</option>
 					<option value="gitlab">GitLab</option>
 					<option value="bitbucket">BitBucket</option>
 				</select>
 			</div>
-		</div>
-		<div class="grid grid-cols-3 items-center">
-			<label for="name">Name</label>
-			<div class="col-span-2">
+			<div class="grid grid-cols-2 items-center px-10">
+				<label for="name" class="text-base font-bold text-stone-100">Name</label>
 				<input
 					name="name"
 					id="name"
@@ -53,11 +51,9 @@
 					bind:value={gitSource.name}
 				/>
 			</div>
-		</div>
 
-		<div class="grid grid-cols-3 items-center">
-			<label for="htmlUrl">HTML URL</label>
-			<div class="col-span-2">
+			<div class="grid grid-cols-2 items-center px-10">
+				<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
 				<input
 					type="url"
 					name="htmlUrl"
@@ -67,10 +63,8 @@
 					bind:value={gitSource.htmlUrl}
 				/>
 			</div>
-		</div>
-		<div class="grid grid-cols-3 items-center">
-			<label for="apiUrl">API URL</label>
-			<div class="col-span-2">
+			<div class="grid grid-cols-2 items-center px-10">
+				<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
 				<input
 					name="apiUrl"
 					type="url"
@@ -80,10 +74,15 @@
 					bind:value={gitSource.apiUrl}
 				/>
 			</div>
-		</div>
-		<div class="grid grid-cols-3">
-			<label for="organization" class="pt-2">Organization</label>
-			<div class="col-span-2">
+			<div class="grid grid-cols-2 px-10">
+				<div class="flex flex-col">
+					<label for="organization" class="pt-2 text-base font-bold text-stone-100"
+						>Organization</label
+					>
+					<Explainer
+						text="Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."
+					/>
+				</div>
 				<input
 					name="organization"
 					id="organization"
@@ -91,11 +90,7 @@
 					bind:value={gitSource.organization}
 					bind:this={organizationEl}
 				/>
-				<Explainer
-					text="Fill it if you would like to use an organization's as your Git Source. Otherwise your
-				user will be used."
-				/>
 			</div>
-		</div>
-	</form>
+		</form>
+	</div>
 </div>
diff --git a/src/routes/new/source/_Gitlab.svelte b/src/routes/new/source/_Gitlab.svelte
index 5e7ad866e..219bc56b0 100644
--- a/src/routes/new/source/_Gitlab.svelte
+++ b/src/routes/new/source/_Gitlab.svelte
@@ -27,56 +27,47 @@
 			<div class="text-xl font-bold text-white">Configuration</div>
 			<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
 		</div>
-		<div class="grid grid-cols-3 items-center">
-			<label for="type">Type</label>
-
-			<div class="col-span-2">
-				<select name="type" id="type" class="w-96" bind:value={gitSource.type}>
-					<option value="github">GitHub</option>
-					<option value="gitlab">GitLab</option>
-					<option value="bitbucket">BitBucket</option>
-				</select>
-			</div>
+		<div class="grid grid-cols-2 items-center px-10">
+			<label for="type" class="text-base font-bold text-stone-100">Type</label>
+			<select name="type" id="type" class="w-96" bind:value={gitSource.type}>
+				<option value="github">GitHub</option>
+				<option value="gitlab">GitLab</option>
+				<option value="bitbucket">BitBucket</option>
+			</select>
 		</div>
-		<div class="grid grid-cols-3 items-center">
-			<label for="name">Name</label>
-			<div class="col-span-2">
-				<input
-					name="name"
-					id="name"
-					placeholder="GitHub.com"
-					required
-					bind:this={nameEl}
-					bind:value={gitSource.name}
-				/>
-			</div>
+		<div class="grid grid-cols-2 items-center px-10">
+			<label for="name" class="text-base font-bold text-stone-100">Name</label>
+			<input
+				name="name"
+				id="name"
+				placeholder="GitHub.com"
+				required
+				bind:this={nameEl}
+				bind:value={gitSource.name}
+			/>
 		</div>
 
-		<div class="grid grid-cols-3 items-center">
-			<label for="htmlUrl">HTML URL</label>
-			<div class="col-span-2">
-				<input
-					type="url"
-					name="htmlUrl"
-					id="htmlUrl"
-					placeholder="eg: https://github.com"
-					required
-					bind:value={gitSource.htmlUrl}
-				/>
-			</div>
+		<div class="grid grid-cols-2 items-center px-10">
+			<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
+			<input
+				type="url"
+				name="htmlUrl"
+				id="htmlUrl"
+				placeholder="eg: https://github.com"
+				required
+				bind:value={gitSource.htmlUrl}
+			/>
 		</div>
-		<div class="grid grid-cols-3 items-center">
-			<label for="apiUrl">API URL</label>
-			<div class="col-span-2">
-				<input
-					name="apiUrl"
-					type="url"
-					id="apiUrl"
-					placeholder="eg: https://api.github.com"
-					required
-					bind:value={gitSource.apiUrl}
-				/>
-			</div>
+		<div class="grid grid-cols-2 items-center px-10">
+			<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
+			<input
+				name="apiUrl"
+				type="url"
+				id="apiUrl"
+				placeholder="eg: https://api.github.com"
+				required
+				bind:value={gitSource.apiUrl}
+			/>
 		</div>
 	</form>
 </div>
diff --git a/src/routes/services/[id]/_Services/_Services.svelte b/src/routes/services/[id]/_Services/_Services.svelte
index 056daee5f..8ce7186e2 100644
--- a/src/routes/services/[id]/_Services/_Services.svelte
+++ b/src/routes/services/[id]/_Services/_Services.svelte
@@ -70,11 +70,7 @@
 				>
 			{/if}
 			{#if service.type === 'plausibleanalytics' && isRunning}
-				<button
-					on:click|preventDefault={setEmailsToVerified}
-					class:bg-pink-600={!loadingVerification}
-					class:hover:bg-pink-500={!loadingVerification}
-					disabled={loadingVerification}
+				<button on:click|preventDefault={setEmailsToVerified} disabled={loadingVerification}
 					>{loadingVerification ? 'Verifying' : 'Verify emails without SMTP'}</button
 				>
 			{/if}
@@ -82,7 +78,7 @@
 
 		<div class="grid grid-flow-row gap-2">
 			<div class="mt-2 grid grid-cols-2 items-center px-10">
-				<label for="name">Name</label>
+				<label for="name" class="text-base font-bold text-stone-100">Name</label>
 				<div>
 					<input
 						readonly={!$session.isAdmin}
@@ -95,7 +91,7 @@
 			</div>
 
 			<div class="grid grid-cols-2 items-center px-10">
-				<label for="destination">Destination</label>
+				<label for="destination" class="text-base font-bold text-stone-100">Destination</label>
 				<div>
 					{#if service.destinationDockerId}
 						<div class="no-underline">
@@ -110,22 +106,23 @@
 				</div>
 			</div>
 			<div class="grid grid-cols-2 px-10">
-				<label for="fqdn" class="pt-2">Domain (FQDN)</label>
-				<div>
-					<CopyPasswordField
-						placeholder="eg: https://analytics.coollabs.io"
-						readonly={!$session.isAdmin && !isRunning}
-						disabled={!$session.isAdmin || isRunning}
-						name="fqdn"
-						id="fqdn"
-						pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
-						bind:value={service.fqdn}
-						required
-					/>
+				<div class="flex-col ">
+					<label for="fqdn" class="pt-2 text-base font-bold text-stone-100">Domain (FQDN)</label>
 					<Explainer
 						text="If you specify <span class='text-pink-600 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-pink-600 font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application."
 					/>
 				</div>
+
+				<CopyPasswordField
+					placeholder="eg: https://analytics.coollabs.io"
+					readonly={!$session.isAdmin && !isRunning}
+					disabled={!$session.isAdmin || isRunning}
+					name="fqdn"
+					id="fqdn"
+					pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
+					bind:value={service.fqdn}
+					required
+				/>
 			</div>
 			<div class="grid grid-cols-2 items-center px-10">
 				<Setting
diff --git a/src/routes/settings/index.svelte b/src/routes/settings/index.svelte
index 80c3cee80..891b79d67 100644
--- a/src/routes/settings/index.svelte
+++ b/src/routes/settings/index.svelte
@@ -97,9 +97,9 @@
 </div>
 {#if $session.teamId === '0'}
 	<div class="mx-auto max-w-4xl px-6">
-		<form on:submit|preventDefault={handleSubmit}>
-			<div class="flex space-x-1 py-6 font-bold">
-				<div class="title">Global Settings</div>
+		<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
+			<div class="flex space-x-1 py-6">
+				<div class="title font-bold">Global Settings</div>
 				<button
 					type="submit"
 					disabled={loading.save}
diff --git a/src/routes/sources/[id]/_Github.svelte b/src/routes/sources/[id]/_Github.svelte
index 91883d298..102971353 100644
--- a/src/routes/sources/[id]/_Github.svelte
+++ b/src/routes/sources/[id]/_Github.svelte
@@ -62,32 +62,28 @@
 {#if !source.githubAppId}
 	<button on:click={newGithubApp}>Create new GitHub App</button>
 {:else if source.githubApp?.installationId}
-	<div class="mx-auto max-w-4xl px-6">
-		<form on:submit|preventDefault={handleSubmit} class="py-4">
-			<div class="flex space-x-1 pb-5 font-bold">
-				<div class="title">General</div>
-				{#if $session.isAdmin}
-					<button
-						type="submit"
-						class:bg-orange-600={!loading}
-						class:hover:bg-orange-500={!loading}
-						disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
-					>
-					<button on:click|preventDefault={() => installRepositories(source)}
-						>Change GitHub App Settings</button
-					>
-				{/if}
+	<form on:submit|preventDefault={handleSubmit} class="py-4">
+		<div class="flex space-x-1 pb-5 font-bold">
+			<div class="title">General</div>
+			{#if $session.isAdmin}
+				<button
+					type="submit"
+					class:bg-orange-600={!loading}
+					class:hover:bg-orange-500={!loading}
+					disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
+				>
+				<button on:click|preventDefault={() => installRepositories(source)}
+					>Change GitHub App Settings</button
+				>
+			{/if}
+		</div>
+		<div class="grid grid-flow-row gap-2 px-10">
+			<div class="grid grid-cols-2 items-center mt-2">
+				<label for="name" class="text-base font-bold text-stone-100">Name</label>
+				<input name="name" id="name" required bind:value={source.name} />
 			</div>
-			<div class="grid grid-flow-row gap-2 px-10">
-				<div class="mt-2 grid grid-cols-3 items-center">
-					<label for="name">Name</label>
-					<div class="col-span-2 ">
-						<input name="name" id="name" required bind:value={source.name} />
-					</div>
-				</div>
-			</div>
-		</form>
-	</div>
+		</div>
+	</form>
 {:else}
 	<button on:click={() => installRepositories(source)}>Install Repositories</button>
 {/if}
diff --git a/src/routes/sources/[id]/_Gitlab.svelte b/src/routes/sources/[id]/_Gitlab.svelte
index ba18ea5f2..56bb0288d 100644
--- a/src/routes/sources/[id]/_Gitlab.svelte
+++ b/src/routes/sources/[id]/_Gitlab.svelte
@@ -90,129 +90,115 @@
 	}
 </script>
 
-<div class="flex flex-col justify-center">
-	{#if !source.gitlabApp?.appId}
-		<form class="grid grid-flow-row gap-2 py-4" on:submit|preventDefault={newApp}>
-			<div class="grid grid-cols-3 items-center">
-				<label for="type">GitLab Application Type</label>
-				<div class="col-span-2">
-					<select name="type" id="type" class="w-96" bind:value={payload.applicationType}>
-						<option value="user">User owned application</option>
-						<option value="group">Group owned application</option>
-						{#if source.htmlUrl !== 'https://gitlab.com'}
-							<option value="instance">Instance-wide application (self-hosted)</option>
-						{/if}
-					</select>
-				</div>
+{#if !source.gitlabApp?.appId}
+	<form class="grid grid-flow-row gap-2 py-4" on:submit|preventDefault={newApp}>
+		<div class="grid grid-cols-2 items-center">
+			<label for="type">GitLab Application Type</label>
+			<select name="type" id="type" class="w-96" bind:value={payload.applicationType}>
+				<option value="user">User owned application</option>
+				<option value="group">Group owned application</option>
+				{#if source.htmlUrl !== 'https://gitlab.com'}
+					<option value="instance">Instance-wide application (self-hosted)</option>
+				{/if}
+			</select>
+		</div>
+		{#if payload.applicationType === 'group'}
+			<div class="grid grid-cols-2 items-center">
+				<label for="groupName">Group Name</label>
+				<input name="groupName" id="groupName" required bind:value={payload.groupName} />
 			</div>
-			{#if payload.applicationType === 'group'}
-				<div class="grid grid-cols-3 items-center">
-					<label for="groupName">Group Name</label>
-					<div class="col-span-2">
-						<input name="groupName" id="groupName" required bind:value={payload.groupName} />
-					</div>
-				</div>
-			{/if}
+		{/if}
 
-			<div class="w-full pt-10 text-center">
-				<button class="w-96 bg-orange-600 hover:bg-orange-500" type="submit"
-					>Register new OAuth application on GitLab</button
-				>
-			</div>
+		<div class="w-full pt-10 text-center">
+			<button class="w-96 bg-orange-600 hover:bg-orange-500" type="submit"
+				>Register new OAuth application on GitLab</button
+			>
+		</div>
 
-			<Explainer
-				customClass="w-full"
-				text="<span class='font-bold text-base text-white'>Scopes required:</span> 	
+		<Explainer
+			customClass="w-full"
+			text="<span class='font-bold text-base text-white'>Scopes required:</span> 	
 	<br>- <span class='text-orange-500 font-bold'>api</span> (Access the authenticated user's API)
 	<br>- <span class='text-orange-500 font-bold'>read_repository</span> (Allows read-only access to the repository)
 	<br>- <span class='text-orange-500 font-bold'>email</span> (Allows read-only access to the user's primary email address using OpenID Connect)
 	<br>
 	<br>For extra security, you can set Expire access tokens!
 	<br><br>Webhook URL: <span class='text-orange-500 font-bold'>{browser
-					? window.location.origin
-					: ''}/webhooks/gitlab</span>
+				? window.location.origin
+				: ''}/webhooks/gitlab</span>
 	<br>But if you will set a custom domain name for Coolify, use that instead."
-			/>
-		</form>
-		<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4 pt-10">
-			<div class="flex h-8 items-center space-x-2">
-				<div class="text-xl font-bold text-white">Configuration</div>
-				<button
-					type="submit"
-					class:bg-orange-600={!loading}
-					class:hover:bg-orange-500={!loading}
-					disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
-				>
-			</div>
-
-			<div class="grid grid-cols-3 items-start">
-				<label for="oauthId" class="pt-2">OAuth ID</label>
-				<div class="col-span-2">
-					<input
-						on:change={checkOauthId}
-						bind:this={oauthIdEl}
-						name="oauthId"
-						id="oauthId"
-						type="number"
-						required
-						bind:value={payload.oauthId}
-					/>
-					<Explainer
-						text="The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class='font-bold text-orange-600' >in the URL</span> of your GitLab OAuth Application."
-					/>
-				</div>
-			</div>
-			{#if payload.applicationType === 'group'}
-				<div class="grid grid-cols-3 items-center">
-					<label for="groupName">Group Name</label>
-					<div class="col-span-2">
-						<input name="groupName" id="groupName" required bind:value={payload.groupName} />
-					</div>
-				</div>
-			{/if}
-			<div class="grid grid-cols-3 items-center">
-				<label for="appId">Application ID</label>
-				<div class="col-span-2">
-					<input name="appId" id="appId" required bind:value={payload.appId} />
-				</div>
-			</div>
-			<div class="grid grid-cols-3 items-center">
-				<label for="appSecret">Secret</label>
-				<div class="col-span-2">
-					<input
-						name="appSecret"
-						id="appSecret"
-						type="password"
-						required
-						bind:value={payload.appSecret}
-					/>
-				</div>
-			</div>
-		</form>
-	{:else}
-		<div class="mx-auto max-w-4xl px-6">
-			<form on:submit|preventDefault={handleSubmitSave} class="py-4">
-				<div class="flex space-x-1 pb-5 font-bold">
-					<div class="title">General</div>
-					{#if $session.isAdmin}
-						<button
-							type="submit"
-							class:bg-orange-600={!loading}
-							class:hover:bg-orange-500={!loading}
-							disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
-						>
-						<button on:click|preventDefault={changeSettings}>Change GitLab App Settings</button>
-					{/if}
-				</div>
-				<div class="grid grid-flow-row gap-2 px-10">
-					<div class="mt-2 grid grid-cols-3 items-center">
-						<label for="name">Name</label>
-						<div class="col-span-2 ">
-							<input name="name" id="name" required bind:value={source.name} />
-						</div>
-					</div>
-				</div>
-			</form>
+		/>
+	</form>
+	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4 pt-10">
+		<div class="flex h-8 items-center space-x-2">
+			<div class="text-xl font-bold text-white">Configuration</div>
+			<button
+				type="submit"
+				class:bg-orange-600={!loading}
+				class:hover:bg-orange-500={!loading}
+				disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
+			>
 		</div>
-	{/if}
-</div>
+
+		<div class="grid grid-cols-2 items-start">
+			<div class="flex-col">
+				<label for="oauthId" class="pt-2">OAuth ID</label>
+				<Explainer
+					text="The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class='font-bold text-orange-600' >in the URL</span> of your GitLab OAuth Application."
+				/>
+			</div>
+			<input
+				on:change={checkOauthId}
+				bind:this={oauthIdEl}
+				name="oauthId"
+				id="oauthId"
+				type="number"
+				required
+				bind:value={payload.oauthId}
+			/>
+		</div>
+		{#if payload.applicationType === 'group'}
+			<div class="grid grid-cols-2 items-center">
+				<label for="groupName">Group Name</label>
+				<input name="groupName" id="groupName" required bind:value={payload.groupName} />
+			</div>
+		{/if}
+		<div class="grid grid-cols-2 items-center">
+			<label for="appId">Application ID</label>
+			<input name="appId" id="appId" required bind:value={payload.appId} />
+		</div>
+		<div class="grid grid-cols-2 items-center">
+			<label for="appSecret">Secret</label>
+			<input
+				name="appSecret"
+				id="appSecret"
+				type="password"
+				required
+				bind:value={payload.appSecret}
+			/>
+		</div>
+	</form>
+{:else}
+	<div class="mx-auto max-w-4xl px-6">
+		<form on:submit|preventDefault={handleSubmitSave} class="py-4">
+			<div class="flex space-x-1 pb-5 font-bold">
+				<div class="title">General</div>
+				{#if $session.isAdmin}
+					<button
+						type="submit"
+						class:bg-orange-600={!loading}
+						class:hover:bg-orange-500={!loading}
+						disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
+					>
+					<button on:click|preventDefault={changeSettings}>Change GitLab App Settings</button>
+				{/if}
+			</div>
+			<div class="grid grid-flow-row gap-2 px-10">
+				<div class="mt-2 grid grid-cols-2 items-center">
+					<label for="name" class="text-base font-bold text-stone-100">Name</label>
+					<input name="name" id="name" required bind:value={source.name} />
+				</div>
+			</div>
+		</form>
+	</div>
+{/if}
diff --git a/src/routes/sources/[id]/index.svelte b/src/routes/sources/[id]/index.svelte
index 8f861c6dd..83f171412 100644
--- a/src/routes/sources/[id]/index.svelte
+++ b/src/routes/sources/[id]/index.svelte
@@ -40,7 +40,7 @@
 	<span class="pr-2">{source.name}</span>
 </div>
 
-<div class="flex justify-center space-x-2 px-6 py-3">
+<div class="flex justify-center px-6 pb-8">
 	{#if source.type === 'github'}
 		<Github bind:source />
 	{:else if source.type === 'gitlab'}
diff --git a/src/routes/teams/[id]/index.svelte b/src/routes/teams/[id]/index.svelte
index 80c4d58e7..964b57612 100644
--- a/src/routes/teams/[id]/index.svelte
+++ b/src/routes/teams/[id]/index.svelte
@@ -98,39 +98,40 @@
 	<span class="arrow-right-applications px-1 text-cyan-500">></span>
 	<span class="pr-2">{team.name}</span>
 </div>
-<div class="mx-auto max-w-4xl">
-	<form on:submit|preventDefault={handleSubmit}>
-		<div class="flex space-x-1 p-6 font-bold">
-			<div class="title">Settings</div>
-			<div class="text-center">
-				<button class="bg-cyan-600 hover:bg-cyan-500" type="submit">Save</button>
+<div class="mx-auto max-w-4xl px-6">
+	<form on:submit|preventDefault={handleSubmit} class=" py-4">
+		<div class="flex space-x-1 pb-5">
+			<div class="title font-bold">Settings</div>
+			<button class="bg-cyan-600 hover:bg-cyan-500" type="submit">Save</button>
+		</div>
+		<div class="grid grid-flow-row gap-2 px-10">
+			<div class="mt-2 grid grid-cols-2">
+				<div class="flex-col">
+					<label for="name" class="text-base font-bold text-stone-100">Name</label>
+					{#if team.id === '0'}
+						<Explainer
+							customClass="w-full"
+							text="This is the <span class='text-red-500 font-bold'>root</span> team. That means members of this group can manage instance wide settings and have all the priviliges in Coolify (imagine like root user on Linux)."
+						/>
+					{/if}
+				</div>
+				<input id="name" name="name" placeholder="name" bind:value={team.name} />
 			</div>
 		</div>
-
-		<div class="mx-2 flex items-center space-x-2 px-4 sm:px-6">
-			<label for="name">Name</label>
-			<input id="name" name="name" placeholder="name" bind:value={team.name} />
-		</div>
-		{#if team.id === '0'}
-			<div class="px-8 pt-4 text-left">
-				<Explainer
-					customClass="w-full"
-					text="This is the <span class='text-red-500 font-bold'>root</span> team. That means members of this group can manage instance wide settings and have all the priviliges in Coolify (imagine like root user on Linux)."
-				/>
-			</div>
-		{/if}
 	</form>
 
-	<div class="flex space-x-1 py-5 px-6 pt-10 font-bold">
+	<div class="flex space-x-1 py-5 pt-10 font-bold">
 		<div class="title">Members</div>
 	</div>
 	<div class="px-4 sm:px-6">
-		<table class="mx-2 w-full table-auto text-left">
-			<tr class="h-8 border-b border-coolgray-400">
-				<th scope="col">Email</th>
-				<th scope="col">Permission</th>
-				<th scope="col" class="text-center">Actions</th>
-			</tr>
+		<table class="w-full border-separate text-left">
+			<thead>
+				<tr class="h-8 border-b border-coolgray-400">
+					<th scope="col">Email</th>
+					<th scope="col">Permission</th>
+					<th scope="col" class="text-center">Actions</th>
+				</tr>
+			</thead>
 			{#each permissions as permission}
 				<tr class="text-xs">
 					<td class="py-4"
@@ -176,25 +177,18 @@
 			{/each}
 		</table>
 	</div>
-</div>
-{#if $session.isAdmin}
-	<div class="mx-auto max-w-4xl pt-8">
-		<form on:submit|preventDefault={sendInvitation}>
-			<div class="flex space-x-1 p-6">
-				<div>
+	{#if $session.isAdmin}
+		<form on:submit|preventDefault={sendInvitation} class="py-5 pt-10">
+			<div class="flex space-x-1">
+				<div class="flex space-x-1">
 					<div class="title font-bold">Invite new member</div>
-					<div class="text-left">
-						<Explainer
-							customClass="w-56"
-							text="You can only invite registered users at the moment - will be extended soon."
-						/>
-					</div>
-				</div>
-				<div class="pt-1 text-center">
 					<button class="bg-cyan-600 hover:bg-cyan-500" type="submit">Send invitation</button>
 				</div>
 			</div>
-			<div class="flex-col space-y-2 px-4 sm:px-6">
+			<Explainer
+				text="You can only invite registered users at the moment - will be extended soon."
+			/>
+			<div class="flex-col space-y-2 px-4 pt-5 sm:px-6">
 				<div class="flex space-x-0">
 					<input
 						bind:value={invitation.email}
@@ -205,18 +199,20 @@
 					<div class="flex-1" />
 					<button
 						on:click={() => (invitation.permission = 'read')}
-						class="rounded-none rounded-l"
+						class="rounded-none rounded-l border border-dashed border-transparent"
 						type="button"
+						class:border-coolgray-300={invitation.permission !== 'read'}
 						class:bg-pink-500={invitation.permission === 'read'}>Read</button
 					>
 					<button
 						on:click={() => (invitation.permission = 'admin')}
-						class="rounded-none rounded-r"
+						class="rounded-none rounded-r border border-dashed border-transparent"
 						type="button"
+						class:border-coolgray-300={invitation.permission !== 'admin'}
 						class:bg-red-500={invitation.permission === 'admin'}>Admin</button
 					>
 				</div>
 			</div>
 		</form>
-	</div>
-{/if}
+	{/if}
+</div>
diff --git a/src/tailwind.css b/src/tailwind.css
index ee83f0ae0..cf6e8f295 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -38,11 +38,11 @@ input {
 	@apply h-12 w-96 rounded border border-transparent bg-transparent bg-coolgray-200 p-2 pr-20 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
 }
 textarea {
-	@apply w-96 rounded border border-transparent bg-transparent bg-coolgray-200 p-2 pr-20 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
+	@apply min-w-[24rem] rounded border border-transparent bg-transparent bg-coolgray-200 p-2 pr-20 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
 }
 
 select {
-	@apply rounded bg-coolgray-200 p-2 text-xs font-bold tracking-tight text-white outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:text-stone-600 md:text-sm;
+	@apply h-12 w-96 rounded bg-coolgray-200 p-2 text-xs font-bold tracking-tight text-white outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:text-stone-600 md:text-sm;
 }
 
 label {