diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index eed5259e0..16cbbf2c8 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -12,12 +12,12 @@ const preview: Preview = {
 		backgrounds: {
 			default: 'GitButler_1',
 			values: [
-			  {
-				name: 'GitButler_1',
-				value: '#27272A',
-			  },
-			],
-		  },
+				{
+					name: 'GitButler_1',
+					value: '#27272A'
+				}
+			]
+		}
 	}
 };
 
diff --git a/src/app.postcss b/src/app.postcss
index 869466c7e..9d7d59b14 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -3,12 +3,44 @@
 @tailwind components;
 @tailwind utilities;
 
+/* this is trick to make webkit use hardware acceleration */
+*:not(html) {
+	-webkit-transform: translate3d(0, 0, 0);
+	-webkit-perspective: 1000;
+}
+
+
+/* SCROLL BAR STYLING */
+
+/* width */
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+	border-radius: 2px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+	/* background: #44444A;  */
+	background: rgba(255, 255, 255, 0.2);
+	border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+	background: #6E6E78; 
+}
 .scrollbar-hidden::-webkit-scrollbar {
 	-webkit-appearance: none;
 	width: 0;
 	height: 0;
 }
 
+
 /* COMMAND PALETTE */
 
 .result-section-header {
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index ed059aab5..bf0096aed 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	export let primary = false;
-	export let filled = false;
+	export let filled = true;
 	export let small = false;
 	export let label: string;
 </script>
@@ -39,37 +39,63 @@ And the following optional props:
 	type="button"
 	on:click
 >
-	<span class="overflow-hidden text-ellipsis">{label}</span>
+	{label}
 </button>
 
 <style>
 	.base {
-		@apply flex items-center justify-center rounded text-base text-white;
-	}
-	.base:hover {
-		/* @apply bg-gray-100; */
+		@apply flex items-center justify-center rounded text-base text-zinc-50 shadow transition ease-in-out;
 	}
 	.base:disabled {
 		@apply opacity-40;
 	}
-	.primary-nofill {
-		border: 1px solid #3662e3;
-	}
+
+	/* Primary */
 	.primary-filled {
+		border: 1px solid #3662e3;
 		background: #3662e3;
 	}
-	.default-nofill {
-		background: #71717a;
+	.primary-filled:hover {
+		border: 1px solid #1c48c9;
+		background: #1c48c9;
+		@apply transition ease-in-out;
 	}
+	.primary-nofill {
+		background: rgba(28, 72, 201, 0);
+		border: 1px solid #3662e3;
+		@apply transition ease-in-out;
+	}
+	.primary-nofill:hover {
+		background: rgba(28, 72, 201, 0.3);
+		border: 1px solid #3662e3;
+		@apply transition ease-in-out;
+	}
+
+	/* Default */
 	.default-filled {
 		border: 1px solid #71717a;
+		background: #71717a;
+		@apply transition ease-in-out;
 	}
+	.default-filled:hover {
+		@apply border-zinc-600 bg-zinc-600;
+	}
+	.default-nofill {
+		background: rgba(113, 113, 122, 0);
+		border: 1px solid #71717a;
+		@apply transition ease-in-out;
+	}
+	.default-nofill:hover {
+		background: rgba(113, 113, 122, 0.4);
+		border: 1px solid #71717a;
+		@apply transition ease-in-out;
+	}
+
+	/* Size */
 	.size-normal {
-		width: 66px;
-		height: 36px;
+		@apply px-4 py-2;
 	}
 	.size-small {
-		width: 66px;
-		height: 24px;
+		@apply px-2 py-1;
 	}
 </style>
diff --git a/src/routes/projects/[projectId]/commit/+page.svelte b/src/routes/projects/[projectId]/commit/+page.svelte
index f4adca2d7..8cba61583 100644
--- a/src/routes/projects/[projectId]/commit/+page.svelte
+++ b/src/routes/projects/[projectId]/commit/+page.svelte
@@ -200,20 +200,23 @@
 					<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="mr-2 mt-1 w-4"
 								/>
-								<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%] cursor-pointer truncate {currentPath == activity.path
+										? 'text-white'
+										: ''}"
 									on:click={selectPath(activity.path)}
 									use:collapsable={{ value: activity.path, separator: '/' }}
 								/>
@@ -231,14 +234,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>