diff --git a/src/app.postcss b/src/app.postcss
index ab243c70b..9d7d59b14 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -15,8 +15,7 @@
 /* width */
 ::-webkit-scrollbar {
 	width: 8px;
-	margin-right: 2px;
-	padding-right: 2px;
+	height: 8px;
 }
 
 /* Track */
@@ -26,10 +25,9 @@
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-	background: #44444A; 
+	/* background: #44444A;  */
+	background: rgba(255, 255, 255, 0.2);
 	border-radius: 10px;
-	padding-right: 2px;
-	width: 8px;
 }
 
 /* Handle on hover */
diff --git a/src/routes/projects/[projectId]/commit/+page.svelte b/src/routes/projects/[projectId]/commit/+page.svelte
index f4adca2d7..191aa6e7f 100644
--- a/src/routes/projects/[projectId]/commit/+page.svelte
+++ b/src/routes/projects/[projectId]/commit/+page.svelte
@@ -200,20 +200,21 @@
 					<a href="#" class="text-yellow-200" on:click={toggleAllOn}>all</a>
 					<a href="#" class="text-yellow-200" on:click={toggleAllOff}>none</a>
 				</div>
-				<ul class="w-80 truncate px-2 pb-2">
+				<ul class="truncate px-2 pb-2">
 					{#each $filesStatus as activity}
 						<li class="list-none text-zinc-300">
-							<div class="flex flex-row space-x-2">
+							<div class="flex flex-row align-middle">
 								<input
 									type="checkbox"
 									on:click={showMessage}
 									bind:group={filesSelectedForCommit}
 									value={activity.path}
+									class="w-4 mr-2 mt-1"
 								/>
-								<div>{activity.status.slice(0, 1)}</div>
+								<div class="w-4">{activity.status.slice(0, 1)}</div>
 								<!-- svelte-ignore a11y-click-events-have-key-events -->
 								<div
-									class="cursor-pointer {currentPath == activity.path ? 'text-white' : ''}"
+									class="w-[100%] truncate cursor-pointer {currentPath == activity.path ? 'text-white' : ''}"
 									on:click={selectPath(activity.path)}
 									use:collapsable={{ value: activity.path, separator: '/' }}
 								/>
@@ -231,14 +232,14 @@
 				name="subject"
 				bind:value={commitSubject}
 				placeholder={placeholderSubject}
-				class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
+				class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-3 sm:text-sm sm:leading-4"
 			/>
 			<textarea
 				rows={messageRows}
 				name="message"
 				placeholder={placeholderMessage}
 				bind:value={commitMessage}
-				class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
+				class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-3 sm:text-sm sm:leading-4"
 			/>
 		</div>