diff --git a/app/package.json b/app/package.json
index a23d4c30..8b14c275 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "1.48.3",
+  "version": "1.48.4",
   "main": "module/module.js",
   "license": "MIT",
   "scripts": {
diff --git a/app/src/pages/Pricing2.tsx b/app/src/pages/Pricing2.tsx
index a2cab521..950a898f 100644
--- a/app/src/pages/Pricing2.tsx
+++ b/app/src/pages/Pricing2.tsx
@@ -21,6 +21,7 @@ import {
 } from "phosphor-react";
 import { Checkout } from "../components/Checkout";
 import throttle from "lodash.throttle";
+import { Link } from "react-router-dom";
 
 const pricingRows = () => [
   { text: t`Daily Sandbox Editor`, free: true, pro: true, icon: Eraser },
@@ -48,6 +49,7 @@ const pricingRows = () => [
     free: false,
     pro: true,
     icon: LightbulbFilament,
+    link: "/blog/post/ai-flowchart-generator",
   },
   {
     text: t`Voice-to-Diagram Dictation`,
@@ -292,12 +294,28 @@ export default function Pricing2() {
               return (
                 <Fragment key={i}>
                   <Cell>
-                    <Icon
-                      size={24}
-                      weight="bold"
-                      className="mr-2 hidden sm:inline"
-                    />
-                    {row.text}
+                    {row.link ? (
+                      <Link
+                        to={row.link}
+                        className="flex items-center hover:text-purple-500"
+                      >
+                        <Icon
+                          size={24}
+                          weight="bold"
+                          className="mr-3 hidden sm:inline -mt-[2px]"
+                        />
+                        {row.text}
+                      </Link>
+                    ) : (
+                      <>
+                        <Icon
+                          size={24}
+                          weight="bold"
+                          className="mr-3 hidden sm:inline -mt-[2px]"
+                        />
+                        {row.text}
+                      </>
+                    )}
                   </Cell>
                   <Cell center available={row.free}>
                     {row.free ? (
diff --git a/app/src/pages/post/Post.css b/app/src/pages/post/Post.css
index 7b37415f..b0777840 100644
--- a/app/src/pages/post/Post.css
+++ b/app/src/pages/post/Post.css
@@ -1,6 +1,6 @@
 .post-content {
   line-height: 1.4;
-  @apply text-neutral-700 dark:text-neutral-200 text-sm leading-normal;
+  @apply text-neutral-900 dark:text-neutral-200 text-base leading-normal;
 }
 
 .post-content code.hljs {
@@ -31,9 +31,10 @@
 }
 
 .post-content h2 {
-  margin-block-start: 1em;
+  margin-block-start: 2em;
   margin-block-end: 0.5em;
-  @apply text-2xl font-bold;
+  text-wrap: balance;
+  @apply text-xl font-bold border-l-8 pl-3 -ml-5 leading-9 py-1;
 }
 
 .post-content h3 {
diff --git a/app/src/pages/post/Post.tsx b/app/src/pages/post/Post.tsx
index f86b79f8..f4d14dbf 100644
--- a/app/src/pages/post/Post.tsx
+++ b/app/src/pages/post/Post.tsx
@@ -32,13 +32,11 @@ export default function Post() {
       </Helmet>
       <Page>
         <div className="grid gap-6">
-          <header className="grid gap-4">
-            <div className="grid gap-2">
-              <span className="text-blue-500 translate-x-[2px] dark:text-purple-400 tracking-wide uppercase">
-                {data.publishDate}
-              </span>
-              <PageTitle className="text-wrap-balance">{data.title}</PageTitle>
-            </div>
+          <header className="grid gap-4 text-center">
+            <span className="text-neutral-400 translate-x-[2px] dark:text-neutral-400 tracking-wide uppercase font-bold text-lg">
+              {data.publishDate}
+            </span>
+            <PageTitle className="text-wrap-balance">{data.title}</PageTitle>
             <p className="text-neutral-400 text-lg dark:text-neutral-300">
               {data.description}
             </p>