diff --git a/apps/ui/src/lib/components/Setting.svelte b/apps/ui/src/lib/components/Setting.svelte
index 30f45755b..04e5f1eac 100644
--- a/apps/ui/src/lib/components/Setting.svelte
+++ b/apps/ui/src/lib/components/Setting.svelte
@@ -10,7 +10,7 @@
 	export let loading = false;
 </script>
 
-<div class="flex items-center py-4 pr-8">
+<div class="flex items-center py-4 pr-8 max-w-xs">
 	<div class="flex w-96 flex-col">
 		<div class="text-xs font-bold text-stone-100 md:text-base">{title}</div>
 		<Explainer text={description} />
diff --git a/apps/ui/src/routes/__layout.svelte b/apps/ui/src/routes/__layout.svelte
index 12e680488..5f19fe0ad 100644
--- a/apps/ui/src/routes/__layout.svelte
+++ b/apps/ui/src/routes/__layout.svelte
@@ -71,7 +71,7 @@
 	$appSession.version = baseSettings.version;
 	$appSession.whiteLabeled = baseSettings.whiteLabeled;
 	$appSession.whiteLabeledDetails.icon = baseSettings.whiteLabeledIcon;
-	$appSession.supportedServiceTypesAndVersions = supportedServiceTypesAndVersions
+	$appSession.supportedServiceTypesAndVersions = supportedServiceTypesAndVersions;
 
 	export let userId: string;
 	export let teamId: string;
@@ -396,7 +396,7 @@
 	{/if}
 {/if}
 <main>
-	<div class="px-20">
+	<div class="pl-14 lg:px-20">
 		<slot />
 	</div>
 </main>
diff --git a/apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte b/apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
index 71e4c06ab..6a177d309 100644
--- a/apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
+++ b/apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
@@ -142,7 +142,7 @@
 </script>
 
 <form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
-	<div class="flex space-x-1 pb-5">
+	<div class="grid gap-1 lg:grid-flow-col lg:w-96 w-64">
 		<div class="title font-bold">{$t('forms.configuration')}</div>
 		{#if $appSession.isAdmin}
 			<button
@@ -162,7 +162,7 @@
 			>
 		{/if}
 	</div>
-	<div class="grid grid-cols-2 items-center px-10 ">
+	<div class="grid lg:grid-cols-2 items-center px-10 ">
 		<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 		<input
 			name="name"
@@ -173,7 +173,7 @@
 		/>
 	</div>
 
-	<div class="grid grid-cols-2 items-center px-10">
+	<div class="grid lg:grid-cols-2 items-center px-10">
 		<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
 		<CopyPasswordField
 			id="engine"
@@ -184,7 +184,7 @@
 			value={destination.engine}
 		/>
 	</div>
-	<div class="grid grid-cols-2 items-center px-10">
+	<div class="grid lg:grid-cols-2 items-center px-10">
 		<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
 		<CopyPasswordField
 			id="network"
@@ -196,7 +196,7 @@
 		/>
 	</div>
 	{#if $appSession.teamId === '0'}
-		<div class="grid grid-cols-2 items-center">
+		<div class="grid lg:grid-cols-2 items-center">
 			<Setting
 				loading={loading.proxy}
 				disabled={cannotDisable}
diff --git a/apps/ui/src/routes/iam/index.svelte b/apps/ui/src/routes/iam/index.svelte
index e50c2fbdd..9b61ec9cc 100644
--- a/apps/ui/src/routes/iam/index.svelte
+++ b/apps/ui/src/routes/iam/index.svelte
@@ -108,24 +108,21 @@
 
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div>
-	<button
-			on:click={newTeam}
-			class="btn btn-square btn-sm bg-iam"
+	<button on:click={newTeam} class="btn btn-square btn-sm bg-iam">
+		<svg
+			class="h-6 w-6"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+			/></svg
 		>
-			<svg
-				class="h-6 w-6"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
-		</button>
+	</button>
 </div>
 
 {#if invitations.length > 0}
@@ -170,14 +167,11 @@
 
 			<tbody>
 				{#each accounts as account}
-					<tr>
+					<tr class="grid items-center justify-center gap-2 lg:grid-flow-col">
 						<td class="px-2">{account.email}</td>
 						<td class="flex space-x-2">
 							<form on:submit|preventDefault={() => resetPassword(account.id)}>
-								<button
-									class="my-4 btn btn-sm bg-iam"
-									>Reset Password</button
-								>
+								<button class="my-4 btn btn-sm bg-iam">Reset Password</button>
 							</form>
 							<form on:submit|preventDefault={() => deleteUser(account.id)}>
 								<button
diff --git a/apps/ui/src/routes/sources/[id]/_Github.svelte b/apps/ui/src/routes/sources/[id]/_Github.svelte
index 8ed240cf2..a1d39145e 100644
--- a/apps/ui/src/routes/sources/[id]/_Github.svelte
+++ b/apps/ui/src/routes/sources/[id]/_Github.svelte
@@ -24,7 +24,7 @@
 				apiUrl: source.apiUrl.replace(/\/$/, '')
 			});
 			return addToast({
-				message:'Configuration saved.',
+				message: 'Configuration saved.',
 				type: 'success'
 			});
 		} catch (error) {
@@ -93,7 +93,7 @@
 <div class="mx-auto max-w-4xl px-6">
 	{#if !source.githubAppId}
 		<form on:submit|preventDefault={newGithubApp} class="py-4">
-			<div class="flex space-x-1 pb-7">
+			<div class="grid gap-1 lg:grid-flow-col pb-7">
 				<div class="title">General</div>
 				{#if !source.githubAppId}
 					<button class="btn btn-sm bg-sources" type="submit">Save & Redirect to GitHub</button>
@@ -101,20 +101,20 @@
 			</div>
 			<div class="grid grid-flow-row gap-2 px-10">
 				<div class="grid grid-flow-row gap-2">
-					<div class="mt-2 grid grid-cols-2 items-center">
+					<div class="mt-2 grid lg: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>
-				<div class="grid grid-cols-2 items-center">
+				<div class="grid lg:grid-cols-2 items-center">
 					<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
 					<input name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
 				</div>
-				<div class="grid grid-cols-2 items-center">
+				<div class="grid lg:grid-cols-2 items-center">
 					<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
 					<input name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
 				</div>
-				<div class="grid grid-cols-2 items-center">
+				<div class="grid lg:grid-cols-2 items-center">
 					<label for="customPort" class="text-base font-bold text-stone-100">Custom SSH Port</label>
 					<input
 						name="customPort"
@@ -128,7 +128,7 @@
 						text="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
 					/>
 				</div>
-				<div class="grid grid-cols-2">
+				<div class="grid lg:grid-cols-2">
 					<div class="flex flex-col">
 						<label for="organization" class="pt-2 text-base font-bold text-stone-100"
 							>Organization</label
@@ -148,29 +148,29 @@
 		</form>
 	{:else if source.githubApp?.installationId}
 		<form on:submit|preventDefault={handleSubmit} class="py-4">
-			<div class="flex space-x-1 pb-5 ">
+			<div class="grid gap-1 lg:grid-flow-col pb-5 ">
 				<div class="title">{$t('general')}</div>
 				{#if $appSession.isAdmin}
-					<button
-						class="btn btn-sm bg-sources"
-						type="submit"
-						disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
+					<button class="btn btn-sm bg-sources" type="submit" disabled={loading}
+						>{loading ? 'Saving...' : 'Save'}</button
 					>
 					<a
 						class="btn btn-sm"
-						href={`${source.htmlUrl}/${source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'}/${source.githubApp.name}/installations/new`}
+						href={`${source.htmlUrl}/${
+							source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
+						}/${source.githubApp.name}/installations/new`}
 						>{$t('source.change_app_settings', { name: 'GitHub' })}</a
 					>
 				{/if}
 			</div>
 			<div class="grid grid-flow-row gap-2 px-10">
 				<div class="grid grid-flow-row gap-2">
-					<div class="mt-2 grid grid-cols-2 items-center">
+					<div class="mt-2 grid lg:grid-cols-2 items-center">
 						<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 						<input name="name" id="name" required bind:value={source.name} />
 					</div>
 				</div>
-				<div class="grid grid-cols-2 items-center">
+				<div class="grid lg:grid-cols-2 items-center">
 					<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
 					<input
 						name="htmlUrl"
@@ -181,7 +181,7 @@
 						bind:value={source.htmlUrl}
 					/>
 				</div>
-				<div class="grid grid-cols-2 items-center">
+				<div class="grid lg:grid-cols-2 items-center">
 					<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
 					<input
 						name="apiUrl"
@@ -193,7 +193,7 @@
 					/>
 				</div>
 				{#if selfHosted}
-					<div class="grid grid-cols-2 items-center">
+					<div class="grid lg:grid-cols-2 items-center">
 						<label for="customPort" class="text-base font-bold text-stone-100"
 							>Custom SSH Port</label
 						>
@@ -210,7 +210,7 @@
 						/>
 					</div>
 				{/if}
-				<div class="grid grid-cols-2">
+				<div class="grid lg:grid-cols-2">
 					<div class="flex flex-col">
 						<label for="organization" class="pt-2 text-base font-bold text-stone-100"
 							>Organization</label
@@ -229,10 +229,12 @@
 		</form>
 	{:else}
 		<div class="text-center">
-			<a href={`${source.htmlUrl}/${source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'}/${source.githubApp.name}/installations/new`}>
-				<button class="box-selection bg-sources text-xl font-bold"
-					>Install Repositories</button
-				></a
+			<a
+				href={`${source.htmlUrl}/${
+					source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
+				}/${source.githubApp.name}/installations/new`}
+			>
+				<button class="box-selection bg-sources text-xl font-bold">Install Repositories</button></a
 			>
 		</div>
 	{/if}
diff --git a/apps/ui/src/tailwind.css b/apps/ui/src/tailwind.css
index 5b551a4c8..22ad0093f 100644
--- a/apps/ui/src/tailwind.css
+++ b/apps/ui/src/tailwind.css
@@ -85,7 +85,7 @@ label {
 	@apply inline-block w-64 text-xs tracking-tight md:text-sm;
 }
 .btn {
-	@apply text-white text-base;
+	@apply text-white text-base min-w-fit h-12;
 }
 
 a {
@@ -195,4 +195,8 @@ a {
 }
 .table *{
   border: none;
+}
+
+input {
+	@apply w-48 lg:w-96;
 }
\ No newline at end of file