diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index 9436cad007..3f5a4dc671 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -96,20 +96,20 @@
 				{#if components.length}
 					<div transition:slide|local={{ duration: 100 }}>
 						<ListItem title={`${title} (${components.length})`}>
-							<div class="flex flex-wrap gap-2 py-2">
+							<div class="flex flex-wrap gap-3 py-2">
 								{#each components as item (item)}
-									<button
-										animate:flip={{ duration: 100 }}
-										on:click={() => addComponent(item)}
-										title={componentsRecord[item].name}
-										class="border w-24 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
-										justify-center bg-white rounded-md hover:bg-gray-100 duration-200"
-									>
-										<svelte:component this={componentsRecord[item].icon} />
-										<div class="text-xs w-full text-center ellipsize">
+									<div animate:flip={{ duration: 100 }} class="w-20">
+										<button
+											on:click={() => addComponent(item)}
+											title={componentsRecord[item].name}
+											class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center justify-center bg-white rounded-md hover:bg-gray-100 duration-200 hover:border-blue-500"
+										>
+											<svelte:component this={componentsRecord[item].icon} class="text-gray-600" />
+										</button>
+										<div class="text-xs text-center flex-wrap text-gray-600 mt-1">
 											{componentsRecord[item].name}
 										</div>
-									</button>
+									</div>
 								{/each}
 							</div>
 						</ListItem>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
index 58eb6cbf38..98d875cf5a 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
@@ -30,7 +30,7 @@
 	{#if prefix !== undefined}
 		<button
 			on:click|preventDefault={() => isOpenStore.toggle(storeTitle)}
-			class="w-full flex justify-between items-center text-gray-700 px-2 py-1 
+			class="w-full flex justify-between items-center text-gray-700 px-2 py-1
 			rounded-sm duration-200 hover:bg-gray-100 {toggleClasses}"
 		>
 			<h1 class="text-sm font-semibold text-left">
@@ -46,7 +46,7 @@
 			</div>
 		{/if}
 	{:else}
-		<h1 class="text-sm font-semibold text-left px-2 py-1">
+		<h1 class="text-sm font-semibold text-left px-2 py-1 text-gray-600">
 			<slot name="title">
 				{title}
 			</slot>