diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro
index 778e1b4ff..6407f18ca 100644
--- a/src/components/PostCard.astro
+++ b/src/components/PostCard.astro
@@ -33,7 +33,7 @@ const coverWidth = "28%";
 
 const { remarkPluginFrontmatter } = await entry.render();
 ---
-<div class:list={["card-base border border-black/10 dark:border-white/10 flex flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
+<div class:list={["card-base card-hover flex flex-col w-full relative", className]} style={style}>
     <div class:list={["pl-9 pr-2 pt-6 pb-6 relative", {"w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
         <a href={url}
            class="transition group w-full block font-bold mb-2 md:mb-3 text-xl md:text-3xl text-90 relative
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index ba38ff214..7fe359976 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -46,7 +46,7 @@ const jsonLd = {
 <MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings}>
     <script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
     <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
-        <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full border border-black/10 dark:border-white/10 ",
+        <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full",
             {}
         ]}>
             <!-- word count and reading time -->
diff --git a/src/styles/main.css b/src/styles/main.css
index a06a8395c..e1509589e 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -3,9 +3,13 @@
 @layer components {
     .card-base {
         @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
+        @apply border border-black/5 dark:border-white/10;
         backdrop-filter: blur(12px);
         -webkit-backdrop-filter: blur(12px);
     }
+    .card-hover {
+        @apply hover:scale-[1.01] hover:shadow-xl hover:border-black/10 dark:hover:border-white/20 hover:z-10;
+    }
     h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
         @apply transition;
     }
diff --git a/src/utils/setting-utils.ts b/src/utils/setting-utils.ts
index 8012cf230..22633ac53 100644
--- a/src/utils/setting-utils.ts
+++ b/src/utils/setting-utils.ts
@@ -45,7 +45,7 @@ export function setRainbowSpeed(speed: number): void {
 
 export function getBgBlur(): number {
 	const stored = localStorage.getItem("bg-blur");
-	return stored ? Number.parseInt(stored) : 0; // Default blur is 0
+	return stored ? Number.parseInt(stored) : 4; // Default blur is 4
 }
 
 export function setBgBlur(blur: number): void {