diff --git a/packages/ui/src/components/base/SmartClickable.vue b/packages/ui/src/components/base/SmartClickable.vue
index 33d87ce86e..216c2f25de 100644
--- a/packages/ui/src/components/base/SmartClickable.vue
+++ b/packages/ui/src/components/base/SmartClickable.vue
@@ -44,9 +44,6 @@ defineOptions({
 	// Setup base styles for contents
 	.smart-clickable__contents {
 		transition: scale 0.125s ease-out;
-
-		// Why? I don't know. It forces the SVGs to render differently, which fixes some shift on hover otherwise.
-		//filter: brightness(1.00001);
 	}
 
 	// When clickable is being hovered or focus-visible, give contents an effect
@@ -59,6 +56,12 @@ defineOptions({
 		:deep(.smart-clickable\:highlight-on-hover) {
 			filter: brightness(var(--hover-brightness, 1.25));
 		}
+		:deep(.smart-clickable\:surface-4-on-hover) {
+			@apply bg-surface-4;
+		}
+		:deep(.smart-clickable\:surface-5-on-hover) {
+			@apply bg-surface-5;
+		}
 		:deep(.ease-brightness) {
 			opacity: 0.85;
 			transition: opacity 0.125s ease-out;
diff --git a/packages/ui/src/components/project/ProjectCardList.vue b/packages/ui/src/components/project/ProjectCardList.vue
index 922a39b836..c44ed3b5fe 100644
--- a/packages/ui/src/components/project/ProjectCardList.vue
+++ b/packages/ui/src/components/project/ProjectCardList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 withDefaults(
 	defineProps<{
-		layout?: 'list' | 'grid'
+		layout?: 'list' | 'grid' | 'gallery'
 	}>(),
 	{
 		layout: 'list',
@@ -13,7 +13,7 @@ withDefaults(
 		class="gap-3"
 		:class="{
 			'flex flex-col': layout === 'list',
-			'grid grid-project-list': layout === 'grid',
+			'grid grid-project-list': layout === 'grid' || layout === 'gallery',
 		}"
 		role="list"
 	>
diff --git a/packages/ui/src/components/project/card/ProjectCard.vue b/packages/ui/src/components/project/card/ProjectCard.vue
index b523685f61..0b621436c2 100644
--- a/packages/ui/src/components/project/card/ProjectCard.vue
+++ b/packages/ui/src/components/project/card/ProjectCard.vue
@@ -182,7 +182,7 @@ const props = defineProps<{
 }>()
 
 const baseCardStyle =
-	'w-full h-full border-[1px] border-solid border-surface-4 overflow-hidden bg-bg-raised rounded-2xl group transition-all smart-clickable:outline-on-focus smart-clickable:highlight-on-hover'
+	'w-full h-full border-[1px] border-solid border-surface-4 overflow-hidden bg-surface-3 rounded-2xl transition-all smart-clickable:outline-on-focus smart-clickable:highlight-on-hover'
 
 const updatedDate = computed(() =>
 	props.dateUpdated ? dayjs(props.dateUpdated).toDate() : undefined,