diff --git a/frontend/app/[locale]/blog/[slug]/PostDetails.tsx b/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
index 89c5ab71..7ce07d19 100644
--- a/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
+++ b/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
@@ -85,8 +85,7 @@ function renderPortableTextSpans(
     const marks = child?.marks || [];
     const linkKey = marks.find(mark => linkMap.has(mark));
 
-    let node: React.ReactNode =
-      marks.length === 0 ? linkifyText(text) : text;
+    let node: React.ReactNode = marks.length === 0 ? linkifyText(text) : text;
 
     for (const mark of marks) {
       if (linkMap.has(mark)) {
@@ -132,53 +131,86 @@ function renderPortableTextSpans(
   });
 }
 
-function renderPortableTextBlock(
-  block: any,
-  index: number
-): React.ReactNode {
+function renderPortableTextBlock(block: any, index: number): React.ReactNode {
   const children = renderPortableTextSpans(block.children, block.markDefs);
   const style = block?.style || 'normal';
 
   if (style === 'h1') {
     return (
-      <h1 key={block._key || `block-${index}`}>{children}</h1>
+      <h1
+        key={block._key || `block-${index}`}
+        className="mt-10 mb-4 text-3xl font-bold text-gray-900 dark:text-gray-100"
+      >
+        {children}
+      </h1>
     );
   }
   if (style === 'h2') {
     return (
-      <h2 key={block._key || `block-${index}`}>{children}</h2>
+      <h2
+        key={block._key || `block-${index}`}
+        className="mt-8 mb-3 text-2xl font-semibold text-gray-900 dark:text-gray-100"
+      >
+        {children}
+      </h2>
     );
   }
   if (style === 'h3') {
     return (
-      <h3 key={block._key || `block-${index}`}>{children}</h3>
+      <h3
+        key={block._key || `block-${index}`}
+        className="mt-7 mb-3 text-xl font-semibold text-gray-900 dark:text-gray-100"
+      >
+        {children}
+      </h3>
     );
   }
   if (style === 'h4') {
     return (
-      <h4 key={block._key || `block-${index}`}>{children}</h4>
+      <h4
+        key={block._key || `block-${index}`}
+        className="mt-6 mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100"
+      >
+        {children}
+      </h4>
     );
   }
   if (style === 'h5') {
     return (
-      <h5 key={block._key || `block-${index}`}>{children}</h5>
+      <h5
+        key={block._key || `block-${index}`}
+        className="mt-6 mb-2 text-base font-semibold text-gray-900 dark:text-gray-100"
+      >
+        {children}
+      </h5>
     );
   }
   if (style === 'h6') {
     return (
-      <h6 key={block._key || `block-${index}`}>{children}</h6>
+      <h6
+        key={block._key || `block-${index}`}
+        className="mt-6 mb-2 text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-300"
+      >
+        {children}
+      </h6>
     );
   }
   if (style === 'blockquote') {
     return (
-      <blockquote key={block._key || `block-${index}`}>
+      <blockquote
+        key={block._key || `block-${index}`}
+        className="my-6 border-l-4 border-[color-mix(in_srgb,var(--accent-primary)_40%,transparent)] pl-4 text-gray-600 dark:text-gray-400"
+      >
         {children}
       </blockquote>
     );
   }
 
   return (
-    <p key={block._key || `block-${index}`} className="whitespace-pre-line">
+    <p
+      key={block._key || `block-${index}`}
+      className="mb-4 whitespace-pre-line text-base leading-relaxed text-gray-700 dark:text-gray-300"
+    >
       {children}
     </p>
   );
@@ -215,11 +247,24 @@ function renderPortableText(
         j += 1;
       }
 
+      const listClass =
+        listType === 'ol' ? 'my-4 list-decimal pl-6' : 'my-4 list-disc pl-6';
+      const levelClass = level > 1 ? 'ml-6' : '';
       nodes.push(
         listType === 'ol' ? (
-          <ol key={block._key || `list-${i}`}>{items}</ol>
+          <ol
+            key={block._key || `list-${i}`}
+            className={`${listClass} ${levelClass}`.trim()}
+          >
+            {items}
+          </ol>
         ) : (
-          <ul key={block._key || `list-${i}`}>{items}</ul>
+          <ul
+            key={block._key || `list-${i}`}
+            className={`${listClass} ${levelClass}`.trim()}
+          >
+            {items}
+          </ul>
         )
       );
       i = j;
@@ -439,193 +484,195 @@ export default async function PostDetails({
   return (
     <DynamicGridBackground className="bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
       <main className="relative z-10 mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-      {breadcrumbsJsonLd && (
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(breadcrumbsJsonLd),
-          }}
-        />
-      )}
-      {articleJsonLd && (
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(articleJsonLd),
-          }}
-        />
-      )}
-      <nav className="mb-6" aria-label="Breadcrumb">
-        <ol className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-          {breadcrumbsItems.map((item, index) => {
-            const isLast = index === breadcrumbsItems.length - 1;
-            return (
-              <li
-                key={`${item.name}-${index}`}
-                className="flex items-center gap-2"
-              >
-                {!isLast && item.href ? (
-                  <Link
-                    href={item.href}
-                    className="transition hover:text-[var(--accent-primary)] hover:underline underline-offset-4"
-                  >
-                    {item.name}
-                  </Link>
-                ) : (
-                  <span
-                    className="text-[var(--accent-primary)]"
-                    aria-current={isLast ? 'page' : undefined}
-                  >
-                    {item.name}
-                  </span>
-                )}
-                {index < breadcrumbsItems.length - 1 && <span>&gt;</span>}
-              </li>
-            );
-          })}
-        </ol>
-      </nav>
-
-      <div className="mx-auto w-full max-w-3xl">
-        {categoryLabel && (
-          <div className="text-sm font-medium text-gray-500 dark:text-gray-400 text-center">
-            <Link
-              href={categoryHref || '/blog'}
-              className="inline-flex items-center gap-1 text-[var(--accent-primary)] transition"
-            >
-              {categoryDisplay || categoryLabel}
-            </Link>
-          </div>
+        {breadcrumbsJsonLd && (
+          <script
+            type="application/ld+json"
+            dangerouslySetInnerHTML={{
+              __html: JSON.stringify(breadcrumbsJsonLd),
+            }}
+          />
         )}
-        <h1 className="mt-3 text-4xl font-bold text-gray-900 dark:text-gray-100 text-center">
-          {post.title}
-        </h1>
-
-        {(authorName || post.publishedAt) && (
-          <div className="mt-4 flex justify-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-            {authorName && (
+        {articleJsonLd && (
+          <script
+            type="application/ld+json"
+            dangerouslySetInnerHTML={{
+              __html: JSON.stringify(articleJsonLd),
+            }}
+          />
+        )}
+        <nav className="mb-6" aria-label="Breadcrumb">
+          <ol className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            {breadcrumbsItems.map((item, index) => {
+              const isLast = index === breadcrumbsItems.length - 1;
+              return (
+                <li
+                  key={`${item.name}-${index}`}
+                  className="flex items-center gap-2"
+                >
+                  {!isLast && item.href ? (
+                    <Link
+                      href={item.href}
+                      className="transition hover:text-[var(--accent-primary)] hover:underline underline-offset-4"
+                    >
+                      {item.name}
+                    </Link>
+                  ) : (
+                    <span
+                      className="text-[var(--accent-primary)]"
+                      aria-current={isLast ? 'page' : undefined}
+                    >
+                      {item.name}
+                    </span>
+                  )}
+                  {index < breadcrumbsItems.length - 1 && <span>&gt;</span>}
+                </li>
+              );
+            })}
+          </ol>
+        </nav>
+
+        <div className="mx-auto w-full max-w-3xl">
+          {categoryLabel && (
+            <div className="text-sm font-medium text-gray-500 dark:text-gray-400 text-center">
               <Link
-                href={`/blog?author=${encodeURIComponent(authorName)}`}
-                className="transition hover:text-[var(--accent-primary)]"
+                href={categoryHref || '/blog'}
+                className="inline-flex items-center gap-1 text-[var(--accent-primary)] transition"
               >
-                {authorName}
+                {categoryDisplay || categoryLabel}
               </Link>
-            )}
-            {authorName && post.publishedAt && <span>·</span>}
-            {post.publishedAt && (
-              <time dateTime={post.publishedAt}>
-                {formatBlogDate(post.publishedAt)}
-              </time>
-            )}
+            </div>
+          )}
+          <h1 className="mt-3 text-4xl font-bold text-gray-900 dark:text-gray-100 text-center">
+            {post.title}
+          </h1>
+
+          {(authorName || post.publishedAt) && (
+            <div className="mt-4 flex justify-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+              {authorName && (
+                <Link
+                  href={`/blog?author=${encodeURIComponent(authorName)}`}
+                  className="transition hover:text-[var(--accent-primary)]"
+                >
+                  {authorName}
+                </Link>
+              )}
+              {authorName && post.publishedAt && <span>·</span>}
+              {post.publishedAt && (
+                <time dateTime={post.publishedAt}>
+                  {formatBlogDate(post.publishedAt)}
+                </time>
+              )}
+            </div>
+          )}
+        </div>
+
+        {(post.tags?.length || 0) > 0 && null}
+
+        {post.mainImage && (
+          <div className="relative w-full h-[520px] rounded-2xl overflow-hidden my-8">
+            <Image
+              src={post.mainImage}
+              alt={post.title || 'Post image'}
+              fill
+              className="object-contain"
+            />
           </div>
         )}
-      </div>
 
-      {(post.tags?.length || 0) > 0 && null}
-
-      {post.mainImage && (
-        <div className="relative w-full h-[520px] rounded-2xl overflow-hidden my-8">
-          <Image
-            src={post.mainImage}
-            alt={post.title || 'Post image'}
-            fill
-            className="object-contain"
-          />
+        <div className="mx-auto w-full max-w-3xl">
+          <article className="prose prose-gray max-w-none">
+            {renderPortableText(post.body || [], post.title)}
+          </article>
         </div>
-      )}
-
-      <div className="mx-auto w-full max-w-3xl">
-        <article className="prose prose-gray max-w-none">
-          {renderPortableText(post.body || [], post.title)}
-        </article>
-      </div>
-
-      {recommendedPosts.length > 0 && (
-        <>
-          <div className="mt-16">
-            <div className="h-px w-full bg-gray-200 dark:bg-gray-800" />
-          </div>
 
-          <section className="mt-10">
-            <div>
-              <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
-                {t('recommendedPosts')}
-              </h2>
-              <div className="mt-6 grid gap-6 auto-rows-fr sm:grid-cols-2 lg:grid-cols-3">
-                {recommendedPosts.map(item => {
-                  const itemCategory = item.categories?.[0];
-                  const itemCategoryDisplay = itemCategory
-                    ? getCategoryLabel(itemCategory, t)
-                    : null;
-
-                  return (
-                    <Link
-                      key={item._id}
-                      href={`/blog/${item.slug?.current}`}
-                      className="group flex h-full flex-col"
-                    >
-                    {item.mainImage && (
-                      <div className="relative h-48 w-full overflow-hidden rounded-2xl">
-                        <Image
-                          src={item.mainImage}
-                          alt={item.title || 'Post image'}
-                          fill
-                          className="object-cover transition-transform duration-300 group-hover:scale-[1.03]"
-                        />
-                      </div>
-                    )}
-                    <h3 className="mt-4 text-lg font-semibold text-gray-900 transition group-hover:underline underline-offset-4 dark:text-gray-100">
-                      {item.title}
-                    </h3>
-                    {item.body && (
-                      <p className="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400 line-clamp-2">
-                        {plainTextFromPortableText(item.body)}
-                      </p>
-                    )}
-                    {(item.author?.name ||
-                      itemCategoryDisplay ||
-                      item.publishedAt) && (
-                      <div className="mt-auto pt-3 flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-                        {item.author?.image && (
-                          <span className="relative h-5 w-5 overflow-hidden rounded-full">
+        {recommendedPosts.length > 0 && (
+          <>
+            <div className="mt-16">
+              <div className="h-px w-full bg-gray-200 dark:bg-gray-800" />
+            </div>
+
+            <section className="mt-10">
+              <div>
+                <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+                  {t('recommendedPosts')}
+                </h2>
+                <div className="mt-6 grid gap-6 auto-rows-fr sm:grid-cols-2 lg:grid-cols-3">
+                  {recommendedPosts.map(item => {
+                    const itemCategory = item.categories?.[0];
+                    const itemCategoryDisplay = itemCategory
+                      ? getCategoryLabel(itemCategory, t)
+                      : null;
+
+                    return (
+                      <Link
+                        key={item._id}
+                        href={`/blog/${item.slug?.current}`}
+                        className="group flex h-full flex-col"
+                      >
+                        {item.mainImage && (
+                          <div className="relative h-48 w-full overflow-hidden rounded-2xl">
                             <Image
-                              src={item.author.image}
-                              alt={item.author.name || 'Author'}
+                              src={item.mainImage}
+                              alt={item.title || 'Post image'}
                               fill
-                              className="object-cover"
+                              className="object-cover transition-transform duration-300 group-hover:scale-[1.03]"
                             />
-                          </span>
+                          </div>
                         )}
-                        {item.author?.name && <span>{item.author.name}</span>}
-                        {item.author?.name && itemCategoryDisplay && (
-                          <span>·</span>
+                        <h3 className="mt-4 text-lg font-semibold text-gray-900 transition group-hover:underline underline-offset-4 dark:text-gray-100">
+                          {item.title}
+                        </h3>
+                        {item.body && (
+                          <p className="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400 line-clamp-2">
+                            {plainTextFromPortableText(item.body)}
+                          </p>
                         )}
-                        {itemCategoryDisplay && (
-                          <span className="rounded-full bg-[color-mix(in_srgb,var(--accent-primary)_20%,transparent)] px-3 py-1 text-[11px] font-medium text-gray-500 dark:bg-[color-mix(in_srgb,var(--accent-primary)_50%,transparent)] dark:text-gray-400">
-                            {itemCategoryDisplay}
-                          </span>
+                        {(item.author?.name ||
+                          itemCategoryDisplay ||
+                          item.publishedAt) && (
+                          <div className="mt-auto pt-3 flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+                            {item.author?.image && (
+                              <span className="relative h-5 w-5 overflow-hidden rounded-full">
+                                <Image
+                                  src={item.author.image}
+                                  alt={item.author.name || 'Author'}
+                                  fill
+                                  className="object-cover"
+                                />
+                              </span>
+                            )}
+                            {item.author?.name && (
+                              <span>{item.author.name}</span>
+                            )}
+                            {item.author?.name && itemCategoryDisplay && (
+                              <span>·</span>
+                            )}
+                            {itemCategoryDisplay && (
+                              <span className="rounded-full bg-[color-mix(in_srgb,var(--accent-primary)_20%,transparent)] px-3 py-1 text-[11px] font-medium text-gray-500 dark:bg-[color-mix(in_srgb,var(--accent-primary)_50%,transparent)] dark:text-gray-400">
+                                {itemCategoryDisplay}
+                              </span>
+                            )}
+                            {(item.author?.name || itemCategoryDisplay) &&
+                              item.publishedAt && <span>·</span>}
+                            {item.publishedAt && (
+                              <time dateTime={item.publishedAt}>
+                                {formatBlogDate(item.publishedAt)}
+                              </time>
+                            )}
+                          </div>
                         )}
-                        {(item.author?.name || itemCategoryDisplay) &&
-                          item.publishedAt && <span>·</span>}
-                        {item.publishedAt && (
-                          <time dateTime={item.publishedAt}>
-                            {formatBlogDate(item.publishedAt)}
-                          </time>
-                        )}
-                      </div>
-                    )}
-                    </Link>
-                  );
-                })}
+                      </Link>
+                    );
+                  })}
+                </div>
               </div>
-            </div>
-          </section>
-        </>
-      )}
+            </section>
+          </>
+        )}
 
-      {post.resourceLink && null}
+        {post.resourceLink && null}
 
-      {(authorBio || authorName || authorMeta) && null}
+        {(authorBio || authorName || authorMeta) && null}
       </main>
     </DynamicGridBackground>
   );
diff --git a/frontend/app/[locale]/blog/page.tsx b/frontend/app/[locale]/blog/page.tsx
index caddd764..8e393a19 100644
--- a/frontend/app/[locale]/blog/page.tsx
+++ b/frontend/app/[locale]/blog/page.tsx
@@ -86,7 +86,7 @@ export default async function BlogPage({
 
   return (
     <DynamicGridBackground className="bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
-      <main className="relative z-10 mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+      <main className="relative z-10 mx-auto max-w-7xl px-4 pt-6 pb-12 sm:px-6 lg:px-8">
         {!hasAuthorFilter && (
           <BlogPageHeader title={t('title')} subtitle={t('subtitle')} />
         )}