diff --git a/documentation/src/refine-theme/blog-footer.tsx b/documentation/src/refine-theme/blog-footer.tsx
index 44b2125e9c2be..41a9bba765bfc 100644
--- a/documentation/src/refine-theme/blog-footer.tsx
+++ b/documentation/src/refine-theme/blog-footer.tsx
@@ -2,7 +2,7 @@ import Link from "@docusaurus/Link";
 import clsx from "clsx";
 import React from "react";
 
-import { socialLinks } from "./footer-data";
+import { comparisonLinks, socialLinks } from "./footer-data";
 import { RefineLogoSingleIcon } from "./icons/refine-logo-single";
 
 export const BlogFooter = () => {
@@ -51,7 +51,8 @@ export const BlogFooter = () => {
             "h-6",
             "flex-row",
             "items-center",
-            "justify-end",
+            "justify-center",
+            "blog-md:justify-end",
             "gap-4",
             "not-prose",
           )}
@@ -150,6 +151,74 @@ export const BlogFooter = () => {
               CORE
             </span>
           </Link>
+
+          {/* Desktop-only comparison links, inline with muted style */}
+          {comparisonLinks.map(({ href, label }) => (
+            <React.Fragment key={href}>
+              <span
+                className={clsx(
+                  "hidden blog-md:inline",
+                  "text-2xl",
+                  "font-thin",
+                  "leading-6",
+                  "text-zinc-300",
+                  "dark:text-zinc-600",
+                )}
+              >
+                /
+              </span>
+              <Link
+                to={href}
+                className={clsx(
+                  "hidden blog-md:block",
+                  "h-6",
+                  "text-sm",
+                  "font-normal",
+                  "leading-6",
+                  "text-zinc-400",
+                  "dark:text-zinc-500",
+                  "whitespace-nowrap",
+                  "hover:no-underline",
+                  "hover:text-zinc-600",
+                  "dark:hover:text-zinc-300",
+                )}
+              >
+                {label}
+              </Link>
+            </React.Fragment>
+          ))}
+        </div>
+
+        {/* Comparison links — separate muted row on mobile, inline on desktop */}
+        <div
+          className={clsx(
+            "flex",
+            "flex-row",
+            "items-center",
+            "justify-center",
+            "gap-6",
+            "blog-md:hidden",
+          )}
+        >
+          {comparisonLinks.map(({ href, label }) => (
+            <Link
+              key={href}
+              to={href}
+              className={clsx(
+                "text-sm",
+                "font-normal",
+                "leading-5",
+                "text-zinc-400",
+                "dark:text-zinc-500",
+                "hover:no-underline",
+                "hover:text-zinc-600",
+                "dark:hover:text-zinc-300",
+                "whitespace-nowrap",
+              )}
+            >
+              {label}
+            </Link>
+          ))}
         </div>
 
         <div
diff --git a/documentation/src/refine-theme/common-footer.tsx b/documentation/src/refine-theme/common-footer.tsx
index 400bc92ea56d9..d359b4c2e38b6 100644
--- a/documentation/src/refine-theme/common-footer.tsx
+++ b/documentation/src/refine-theme/common-footer.tsx
@@ -1,7 +1,7 @@
 import Link from "@docusaurus/Link";
 import clsx from "clsx";
 import React from "react";
-import { socialLinks } from "./footer-data";
+import { comparisonLinks, socialLinks } from "./footer-data";
 import { RefineCoreLogoIcon } from "./icons/refine-logo";
 
 export const CommonFooter = () => {
@@ -50,6 +50,19 @@ export const CommonFooter = () => {
           >
             Tutorial
           </Link>
+          {comparisonLinks.map(({ href, label }) => (
+            <Link
+              key={href}
+              to={href}
+              className={clsx(
+                "appearance-none",
+                "hover:no-underline",
+                "md:mr-12",
+              )}
+            >
+              {label}
+            </Link>
+          ))}
           <div className={clsx("md:mr-4")}>Join us on</div>
           <div
             className={clsx(
diff --git a/documentation/src/refine-theme/footer-data.tsx b/documentation/src/refine-theme/footer-data.tsx
index ec97bc4248f3d..124aca19f4b2c 100644
--- a/documentation/src/refine-theme/footer-data.tsx
+++ b/documentation/src/refine-theme/footer-data.tsx
@@ -53,6 +53,26 @@ export const menuItems = [
       },
     ],
   },
+  {
+    label: "Compare",
+    items: [
+      {
+        label: "VS",
+        href: "/vs",
+        icon: null,
+      },
+      {
+        label: "Alternatives",
+        href: "/alternatives",
+        icon: null,
+      },
+      {
+        label: "Compare",
+        href: "/compare",
+        icon: null,
+      },
+    ],
+  },
 ];
 
 export const secondaryMenuItems = [
@@ -70,6 +90,12 @@ export const secondaryMenuItems = [
   },
 ];
 
+export const comparisonLinks = [
+  { href: "/vs", label: "VS" },
+  { href: "/alternatives", label: "Alternatives" },
+  { href: "/compare", label: "Compare" },
+];
+
 export const footerDescription =
   "Refine is a React-based framework for the rapid development of web applications. It eliminates the repetitive tasks demanded by CRUD operations and provides industry standard solutions.";
 
diff --git a/documentation/src/refine-theme/tutorial-footer.tsx b/documentation/src/refine-theme/tutorial-footer.tsx
index 4d689e5e9cf2f..a6c8e27b84c07 100644
--- a/documentation/src/refine-theme/tutorial-footer.tsx
+++ b/documentation/src/refine-theme/tutorial-footer.tsx
@@ -1,7 +1,7 @@
 import Link from "@docusaurus/Link";
 import clsx from "clsx";
 import React from "react";
-import { socialLinks } from "./footer-data";
+import { comparisonLinks, socialLinks } from "./footer-data";
 
 export const TutorialFooter = () => {
   return (
@@ -61,6 +61,19 @@ export const TutorialFooter = () => {
           >
             Documentation
           </Link>
+          {comparisonLinks.map(({ href, label }) => (
+            <Link
+              key={href}
+              to={href}
+              className={clsx(
+                "hover:no-underline",
+                "hover:text-refine-link-light",
+                "dark:hover:text-refine-link-dark",
+              )}
+            >
+              {label}
+            </Link>
+          ))}
           <div
             className={clsx(
               "flex flex-col sm:flex-row justify-center items-center",