diff --git a/packages/ui/src/components/base/SmartClickable.vue b/packages/ui/src/components/base/SmartClickable.vue
index c3e4e8748..33d87ce86 100644
--- a/packages/ui/src/components/base/SmartClickable.vue
+++ b/packages/ui/src/components/base/SmartClickable.vue
@@ -31,6 +31,11 @@ defineOptions({
 		:deep(.smart-clickable\:allow-pointer-events) {
 			pointer-events: all;
 		}
+
+		:deep(.ease-brightness) {
+			opacity: 1;
+			transition: opacity 0.125s ease-out;
+		}
 	}
 }
 
@@ -54,6 +59,10 @@ defineOptions({
 		:deep(.smart-clickable\:highlight-on-hover) {
 			filter: brightness(var(--hover-brightness, 1.25));
 		}
+		:deep(.ease-brightness) {
+			opacity: 0.85;
+			transition: opacity 0.125s ease-out;
+		}
 	}
 
 	:first-child:focus-visible + .smart-clickable__contents {
diff --git a/packages/ui/src/components/project/card/ProjectCard.vue b/packages/ui/src/components/project/card/ProjectCard.vue
index 9f5ea5a05..b523685f6 100644
--- a/packages/ui/src/components/project/card/ProjectCard.vue
+++ b/packages/ui/src/components/project/card/ProjectCard.vue
@@ -27,7 +27,7 @@
 			</div>
 			<div class="p-4 flex flex-col gap-3 grow">
 				<div class="flex gap-3">
-					<Avatar :src="iconUrl" size="96px" class="project-card__icon" no-shadow />
+					<Avatar :src="iconUrl" size="96px" class="project-card__icon ease-brightness" no-shadow />
 					<div class="flex flex-col gap-2 w-full">
 						<div class="grid grid-cols-[1fr_auto] gap-4">
 							<div class="flex flex-col gap-1">
@@ -84,7 +84,7 @@
 			<Avatar
 				:src="iconUrl"
 				size="100px"
-				class="project-card__icon grid-project-card-list__icon"
+				class="project-card__icon grid-project-card-list__icon ease-brightness"
 				no-shadow
 			/>
 			<div class="flex flex-col gap-2 grid-project-card-list__info">