diff --git a/app/[locale]/blog/page.tsx b/app/[locale]/blog/page.tsx
index 988ebf1..f8d2e14 100644
--- a/app/[locale]/blog/page.tsx
+++ b/app/[locale]/blog/page.tsx
@@ -89,7 +89,7 @@ export default async function Page({
                 key={post.slug}
                 href={`/blog${post.slug}`}
                 prefetch={false}
-                className="block rounded-md mb-4 bg-gray-100 px-6 py-5 hover:bg-gray-200 transition-colors"
+                className="block rounded-md mb-4 bg-gray-100 px-6 py-5 transition-all duration-200 shadow hover:bg-gray-200 hover:translate-y-[1px] hover:shadow-inner active:translate-y-[2px] active:shadow-inner focus:outline-none focus:ring-1 focus:ring-gray-300"
               >
                 <div className="flex items-center">
                   <div className="flex-1 pr-4">