diff --git a/src/components/code/ProjectCard.astro b/src/components/code/ProjectCard.astro
index 97604be..c0f5a46 100644
--- a/src/components/code/ProjectCard.astro
+++ b/src/components/code/ProjectCard.astro
@@ -14,28 +14,35 @@ const { title, description, technologies, featured = false, detailUrl, lang = 'f
 
 const isRtl = lang === 'ar';
 const readMoreLabel = t('projects', 'readMore', lang);
+const primaryTechs = technologies?.slice(0, 3) ?? [];
+const secondaryTechs = technologies?.slice(3) ?? [];
 ---
 
 <a href={detailUrl} class:list={[
-	"facet-card rounded-2xl border p-6 flex flex-col h-full transition-all duration-300 hover:scale-[1.02] no-underline",
+	"project-card group relative rounded-2xl border p-6 flex flex-col h-full transition-all duration-300 hover:scale-[1.02] no-underline overflow-hidden",
 	featured
-		? "bg-white/[0.12] border-purple-300/20 hover:bg-white/[0.18] hover:border-purple-300/30"
-		: "bg-white/[0.06] border-white/[0.1] hover:bg-white/[0.12] hover:border-white/[0.2]",
+		? "bg-white/[0.10] border-purple-300/20"
+		: "bg-white/[0.05] border-white/[0.08]",
 ]}>
-	<div class="mb-2">
-		<h3 class="text-lg font-bold text-white">
+	<div class="mb-3">
+		<h3 class="text-xl font-bold text-white">
 			{title}
 		</h3>
 	</div>
 
-	<p class="text-sm text-white/60 leading-relaxed flex-1 mb-4">
+	<p class="text-white/60 leading-relaxed flex-1 mb-5">
 		{description}
 	</p>
 
-	{technologies && technologies.length > 0 && (
-		<div class="flex flex-wrap gap-1.5 mb-4">
-			{technologies.map((tech) => (
-				<span class="inline-block px-2 py-0.5 text-xs rounded-full bg-white/[0.08] text-white/60 border border-white/[0.08]">
+	{(primaryTechs.length > 0 || secondaryTechs.length > 0) && (
+		<div class="flex flex-wrap gap-1.5 mb-5">
+			{primaryTechs.map((tech) => (
+				<span class="inline-block px-2.5 py-1 text-xs font-medium rounded-full bg-purple-400/15 text-purple-200 border border-purple-300/15">
+					{tech}
+				</span>
+			))}
+			{secondaryTechs.map((tech) => (
+				<span class="inline-block px-2.5 py-1 text-xs rounded-full bg-white/[0.05] text-white/40 border border-white/[0.06]">
 					{tech}
 				</span>
 			))}
@@ -50,3 +57,11 @@ const readMoreLabel = t('projects', 'readMore', lang);
 		)}
 	</span>
 </a>
+
+<style>
+	.project-card:hover {
+		background: rgba(255, 255, 255, 0.12);
+		border-color: rgba(168, 85, 247, 0.25);
+		box-shadow: 0 0 24px rgba(168, 85, 247, 0.08), 0 4px 16px rgba(0, 0, 0, 0.2);
+	}
+</style>