diff --git a/website/mdx-components.js b/website/mdx-components.js
new file mode 100644
index 0000000000000..4caafad8b8d53
--- /dev/null
+++ b/website/mdx-components.js
@@ -0,0 +1,6 @@
+import { useMDXComponents as getDocsMDXComponents } from '@theguild/components/server';
+import { docsMDXComponents } from './src/components/docs-mdx-components';
+
+export const useMDXComponents = () => {
+  return getDocsMDXComponents(docsMDXComponents);
+};
diff --git a/website/next-env.d.ts b/website/next-env.d.ts
index 52e831b434248..1b3be0840f3f6 100644
--- a/website/next-env.d.ts
+++ b/website/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/website/next.config.js b/website/next.config.js
index 60499530268c4..c190fc6ac8dc4 100644
--- a/website/next.config.js
+++ b/website/next.config.js
@@ -6,6 +6,11 @@ export default withGuildDocs({
   eslint: {
     ignoreDuringBuilds: true,
   },
+  experimental: {
+    turbo: {
+      treeShaking: true,
+    },
+  },
   redirects: () =>
     Object.entries({
       '/api': '/docs',
diff --git a/website/package.json b/website/package.json
index cb023bac91ed6..4cf72bd3ac0c8 100644
--- a/website/package.json
+++ b/website/package.json
@@ -6,13 +6,15 @@
   "scripts": {
     "analyze": "cross-env ANALYZE=true next build",
     "build": "next build && next-sitemap",
-    "dev": "next",
+    "dev": "next --turbopack",
+    "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind",
     "start": "next start"
   },
   "dependencies": {
     "@theguild/components": "^8.0.0",
     "next": "^15.0.0",
     "next-sitemap": "^4.2.3",
+    "pagefind": "^1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.0.0"
diff --git a/website/src/app/(content-pages)/docs/[[...mdxPath]]/legacy-docs-banner.tsx b/website/src/app/(content-pages)/docs/[[...mdxPath]]/legacy-docs-banner.tsx
new file mode 100644
index 0000000000000..c7f23c78bd0e5
--- /dev/null
+++ b/website/src/app/(content-pages)/docs/[[...mdxPath]]/legacy-docs-banner.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { Callout } from '@theguild/components';
+import { Link } from '../../../../components/docs-mdx-components';
+
+export function LegacyDocsBanner() {
+  const pathname = usePathname();
+  if (pathname.startsWith('/v1')) {
+    return null;
+  }
+
+  return (
+    <Callout type="warning">
+      This is the documentation for the <b>old</b> GraphQL Mesh version v0. We recommend upgrading
+      to the latest GraphQL Mesh version v1.
+      <br />
+      <Link
+        href="/v1/migration-from-v0"
+        className="[*:has(div>&)]:mb-8 gap-2 underline hover:no-underline"
+      >
+        Migrate to GraphQL Mesh v1
+      </Link>
+    </Callout>
+  );
+}
diff --git a/website/src/app/(content-pages)/docs/[[...mdxPath]]/page.tsx b/website/src/app/(content-pages)/docs/[[...mdxPath]]/page.tsx
new file mode 100644
index 0000000000000..a89a8c14c32c1
--- /dev/null
+++ b/website/src/app/(content-pages)/docs/[[...mdxPath]]/page.tsx
@@ -0,0 +1,42 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { generateStaticParamsFor, importPage } from 'nextra/pages';
+import { NextPageProps } from '@theguild/components';
+import { useMDXComponents } from '../../../../../mdx-components.js';
+import { ConfiguredGiscus } from '../../../../components/configured-giscus';
+import { LegacyDocsBanner } from './legacy-docs-banner';
+
+/**
+ * You might have an urge to try to refactor this to a separate file and reuse between product-updates and docs.
+ * I had the same urge. It's absurdly finicky. I warned you.
+ *
+ * BTW, even if we moved the product updates to page.mdx pattern, we still need this nesting to fix links in sidebar.
+ */
+export const generateStaticParams = async () => {
+  const pages = await generateStaticParamsFor('mdxPath')();
+  return pages
+    .map(page => (page.mdxPath[0] === 'docs' ? { mdxPath: page.mdxPath.slice(1) } : null))
+    .filter(Boolean);
+};
+
+export async function generateMetadata(props: NextPageProps<'...mdxPath'>) {
+  const params = await props.params;
+  const { metadata } = await importPage(['docs', ...(params.mdxPath || [])]);
+  return metadata;
+}
+
+const Wrapper = useMDXComponents().wrapper;
+
+export default async function Page(props: NextPageProps<'...mdxPath'>) {
+  const params = await props.params;
+
+  const result = await importPage(['docs', ...(params.mdxPath || [])]);
+  const { default: MDXContent, toc, metadata } = result;
+
+  return (
+    <Wrapper toc={toc} metadata={metadata}>
+      <LegacyDocsBanner />
+      <MDXContent params={params} />
+      <ConfiguredGiscus />
+    </Wrapper>
+  );
+}
diff --git a/website/src/app/examples.mdx b/website/src/app/(content-pages)/examples/live-demo.tsx
similarity index 79%
rename from website/src/app/examples.mdx
rename to website/src/app/(content-pages)/examples/live-demo.tsx
index bbd0f8c694e45..c405a818fc25e 100644
--- a/website/src/app/examples.mdx
+++ b/website/src/app/(content-pages)/examples/live-demo.tsx
@@ -1,14 +1,9 @@
----
-title: Examples
-description: Examples of Mesh usage
----
+'use client';
 
-import { useState } from 'react'
-
-<LiveDemo />
+import { useState } from 'react';
 
 export function LiveDemo() {
-  const [exampleRepo, setExampleRepo] = useState('json-schema-example')
+  const [exampleRepo, setExampleRepo] = useState('json-schema-example');
   return (
     <div className="min-h-[calc(100vh-var(--nextra-navbar-height))] flex flex-col">
       <div className="flex items-center justify-center gap-2 py-8">
@@ -16,7 +11,7 @@ export function LiveDemo() {
         <select
           value={exampleRepo}
           onChange={e => {
-            setExampleRepo(e.target.value)
+            setExampleRepo(e.target.value);
           }}
           className="border rounded-md py-1.5"
         >
@@ -40,7 +35,7 @@ export function LiveDemo() {
         sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
       />
     </div>
-  )
+  );
 }
 
 export const EXAMPLES = {
@@ -51,36 +46,36 @@ export const EXAMPLES = {
     Stripe: 'openapi-stripe',
     StackExchange: 'openapi-stackexchange',
     'WeatherBit on React App': 'openapi-react-weatherbit',
-    'NextJS with Apollo': 'nextjs-apollo-example'
+    'NextJS with Apollo': 'nextjs-apollo-example',
   },
   'JSON Schema': {
     'Fake API': 'json-schema-example',
     'Covid-19 Statistics': 'json-schema-covid',
-    'Subscriptions, Webhooks & Live Queries': 'json-schema-subscriptions'
+    'Subscriptions, Webhooks & Live Queries': 'json-schema-subscriptions',
   },
   OData: {
     TripPin: 'odata-trippin',
-    'Microsoft Graph': 'odata-microsoft'
+    'Microsoft Graph': 'odata-microsoft',
   },
   SOAP: {
-    'Country Info': 'soap-country-info'
+    'Country Info': 'soap-country-info',
   },
   MySQL: {
-    Rfam: 'mysql-rfam'
+    Rfam: 'mysql-rfam',
   },
   SQLite: {
-    Chinook: 'sqlite-chinook'
+    Chinook: 'sqlite-chinook',
   },
   'Apollo Federation': {
-    'Apollo Federation Example': 'federation-example'
+    'Apollo Federation Example': 'federation-example',
   },
   'Apache Thrift': {
-    Calculator: 'thrift-calculator'
+    Calculator: 'thrift-calculator',
   },
   gRPC: {
-    'Movies Example': 'grpc-example'
+    'Movies Example': 'grpc-example',
   },
   Neo4J: {
-    'Movies Example': 'neo4j-example'
-  }
-}
+    'Movies Example': 'neo4j-example',
+  },
+};
diff --git a/website/src/app/(content-pages)/examples/page.tsx b/website/src/app/(content-pages)/examples/page.tsx
new file mode 100644
index 0000000000000..ab425ad84ce05
--- /dev/null
+++ b/website/src/app/(content-pages)/examples/page.tsx
@@ -0,0 +1,10 @@
+import { LiveDemo } from './live-demo';
+
+export const metadata = {
+  title: 'Examples',
+  description: 'Examples of Mesh usage',
+};
+
+export default function ExamplesPage() {
+  return <LiveDemo />;
+}
diff --git a/website/src/app/(content-pages)/layout.tsx b/website/src/app/(content-pages)/layout.tsx
new file mode 100644
index 0000000000000..80d2fbd5849de
--- /dev/null
+++ b/website/src/app/(content-pages)/layout.tsx
@@ -0,0 +1,6 @@
+import { HiveInnerLayout } from '../../components/hive-layout/hive-inner-layout';
+import '@theguild/components/style.css';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return <HiveInnerLayout isLanding={false}>{children}</HiveInnerLayout>;
+}
diff --git a/website/src/app/(content-pages)/v1/[[...mdxPath]]/page.tsx b/website/src/app/(content-pages)/v1/[[...mdxPath]]/page.tsx
new file mode 100644
index 0000000000000..2479892baa426
--- /dev/null
+++ b/website/src/app/(content-pages)/v1/[[...mdxPath]]/page.tsx
@@ -0,0 +1,40 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { generateStaticParamsFor, importPage } from 'nextra/pages';
+import { NextPageProps } from '@theguild/components';
+import { useMDXComponents } from '../../../../../mdx-components.js';
+import { ConfiguredGiscus } from '../../../../components/configured-giscus';
+
+/**
+ * You might have an urge to try to refactor this to a separate file and reuse between product-updates and docs.
+ * I had the same urge. It's absurdly finicky. I warned you.
+ *
+ * BTW, even if we moved the product updates to page.mdx pattern, we still need this nesting to fix links in sidebar.
+ */
+export const generateStaticParams = async () => {
+  const pages = await generateStaticParamsFor('mdxPath')();
+  return pages
+    .map(page => (page.mdxPath[0] === 'docs' ? { mdxPath: page.mdxPath.slice(1) } : null))
+    .filter(Boolean);
+};
+
+export async function generateMetadata(props: NextPageProps<'...mdxPath'>) {
+  const params = await props.params;
+  const { metadata } = await importPage(['docs', ...(params.mdxPath || [])]);
+  return metadata;
+}
+
+const Wrapper = useMDXComponents().wrapper;
+
+export default async function Page(props: NextPageProps<'...mdxPath'>) {
+  const params = await props.params;
+
+  const result = await importPage(['docs', ...(params.mdxPath || [])]);
+  const { default: MDXContent, toc, metadata } = result;
+
+  return (
+    <Wrapper toc={toc} metadata={metadata}>
+      <MDXContent params={params} />
+      <ConfiguredGiscus />
+    </Wrapper>
+  );
+}
diff --git a/website/src/app/(landing-pages)/layout.tsx b/website/src/app/(landing-pages)/layout.tsx
new file mode 100644
index 0000000000000..486c1c38f3b58
--- /dev/null
+++ b/website/src/app/(landing-pages)/layout.tsx
@@ -0,0 +1,6 @@
+import { HiveInnerLayout } from '../../components/hive-layout/hive-inner-layout';
+import '@theguild/components/style.css';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return <HiveInnerLayout isLanding>{children}</HiveInnerLayout>;
+}
diff --git a/website/src/app/(landing-pages)/page.tsx b/website/src/app/(landing-pages)/page.tsx
new file mode 100644
index 0000000000000..004a60149b60a
--- /dev/null
+++ b/website/src/app/(landing-pages)/page.tsx
@@ -0,0 +1,6 @@
+export const metadata = {
+  title: 'GraphQL Mesh',
+  description: 'A fully-featured GraphQL gateway framework',
+};
+
+export { IndexPage as default } from '../../components/index-page';
diff --git a/website/src/app/_app.tsx b/website/src/app/_app.tsx
deleted file mode 100644
index 9e5915d5e5223..0000000000000
--- a/website/src/app/_app.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ReactElement } from 'react';
-import { AppProps } from 'next/app';
-import '@theguild/components/style.css';
-import '../hotfix.css';
-
-export default function App({ Component, pageProps }: AppProps): ReactElement {
-  return <Component {...pageProps} />;
-}
diff --git a/website/src/app/_meta.tsx b/website/src/app/_meta.tsx
index 0f8d04dcd0894..06a87bbae8c1f 100644
--- a/website/src/app/_meta.tsx
+++ b/website/src/app/_meta.tsx
@@ -1,40 +1,10 @@
-import Link from 'next/link';
-import { Callout } from '@theguild/components';
+// import { PRODUCTS_MENU_LIST } from '@theguild/components/products';
 
-function LegacyDocsBanner() {
-  return (
-    <Callout type="warning">
-      This is the documentation for the <b>old</b> GraphQL Mesh version v0. We recommend upgrading
-      to the latest GraphQL Mesh version v1.
-      <br />
-      <br />
-      <Link
-        href={`/v1/migration-from-v0`}
-        className="_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]"
-      >
-        Migrate to GraphQL Mesh v1
-      </Link>
-    </Callout>
-  );
-}
-
-export default {
-  index: {
-    title: 'Home',
-    type: 'page',
-    display: 'hidden',
-    theme: {
-      layout: 'raw',
-    },
-  },
+const meta = {
   examples: {
     title: 'Examples',
     type: 'page',
     display: 'hidden',
-    theme: {
-      layout: 'raw',
-      footer: false,
-    },
   },
   v1: {
     title: 'v1',
@@ -43,8 +13,45 @@ export default {
   docs: {
     title: 'v0',
     type: 'page',
-    theme: {
-      topContent: LegacyDocsBanner,
+  },
+  // #region shared items between all websites
+  // TODO: Move it to shared layout.
+  // products: PRODUCTS_MENU_LIST,
+  ecosystem: {
+    title: 'Ecosystem',
+    type: 'page',
+    href: 'https://the-guild.dev/graphql/hive/ecosystem',
+  },
+  blog: {
+    title: 'Blog',
+    type: 'page',
+    href: 'https://the-guild.dev/blog',
+  },
+  github: {
+    title: 'GitHub',
+    type: 'page',
+    href: 'https://github.com/ardatan/graphql-mesh',
+  },
+  'the-guild': {
+    title: 'The Guild',
+    type: 'menu',
+    items: {
+      'about-us': {
+        title: 'About Us',
+        href: 'https://the-guild.dev/about-us',
+      },
+      'brand-assets': {
+        title: 'Brand Assets',
+        href: 'https://the-guild.dev/logos',
+      },
     },
   },
+  'graphql-foundation': {
+    title: 'GraphQL Foundation',
+    type: 'page',
+    href: 'https://graphql.org/community/foundation/',
+  },
+  // #endregion
 };
+
+export default meta;
diff --git a/website/src/app/index.mdx b/website/src/app/index.mdx
deleted file mode 100644
index 0b0e68bbb1bcb..0000000000000
--- a/website/src/app/index.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Home
-description: A fully-featured GraphQL gateway framework
----
-
-export { IndexPage as default } from '../components/index-page'
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
new file mode 100644
index 0000000000000..e5d43cfafdb30
--- /dev/null
+++ b/website/src/app/layout.tsx
@@ -0,0 +1,23 @@
+import localFont from 'next/font/local';
+import { PRODUCTS } from '@theguild/components';
+import { getDefaultMetadata } from '@theguild/components/server';
+import { HiveOuterLayout } from '../components/hive-layout/hive-outer-layout';
+import '@theguild/components/style.css';
+
+export const metadata = getDefaultMetadata({
+  productName: PRODUCTS.MESH.name,
+  websiteName: PRODUCTS.MESH.name,
+  description: 'A fully-featured GraphQL gateway framework',
+});
+
+const neueMontreal = localFont({
+  src: [
+    { path: '../fonts/PPNeueMontreal-Regular.woff2', weight: '400' },
+    { path: '../fonts/PPNeueMontreal-Medium.woff2', weight: '500' },
+    { path: '../fonts/PPNeueMontreal-Medium.woff2', weight: '600' },
+  ],
+});
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return <HiveOuterLayout font={neueMontreal}>{children}</HiveOuterLayout>;
+}
diff --git a/website/src/components/configured-giscus.tsx b/website/src/components/configured-giscus.tsx
new file mode 100644
index 0000000000000..3e00eefd52738
--- /dev/null
+++ b/website/src/components/configured-giscus.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { Giscus } from '@theguild/components';
+
+export function ConfiguredGiscus() {
+  const route = usePathname();
+
+  return (
+    <Giscus
+      // ensure giscus is reloaded when client side route is changed
+      key={route}
+      repo="ardatan/graphql-mesh"
+      repoId="MDEwOlJlcG9zaXRvcnkyMzM1OTc1MTc="
+      category="Docs Discussions"
+      categoryId="DIC_kwDODexqTc4CSDDQ"
+      mapping="pathname"
+    />
+  );
+}
diff --git a/website/src/components/docs-mdx-components.tsx b/website/src/components/docs-mdx-components.tsx
new file mode 100644
index 0000000000000..aa98240835da0
--- /dev/null
+++ b/website/src/components/docs-mdx-components.tsx
@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Anchor } from 'nextra/components';
+import { cn } from '@theguild/components';
+
+export const Link: typeof Anchor = ({ className, ...props }) => {
+  return (
+    <Anchor
+      // we remove `text-underline-position` from default Nextra link styles
+      className={cn(
+        'hive-focus dark:text-primary/90 dark:focus-visible:ring-primary/50 -mx-1 -my-0.5 rounded px-1 py-0.5 font-medium text-blue-700 underline underline-offset-2 hover:no-underline focus-visible:no-underline focus-visible:ring-current focus-visible:ring-offset-blue-200',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+export const docsMDXComponents = {
+  a: Link,
+};
diff --git a/website/src/components/hive-layout/graphql-conf-image.webp b/website/src/components/hive-layout/graphql-conf-image.webp
new file mode 100644
index 0000000000000..1bd8c2f6c4e69
Binary files /dev/null and b/website/src/components/hive-layout/graphql-conf-image.webp differ
diff --git a/website/src/components/hive-layout/hive-inner-layout.tsx b/website/src/components/hive-layout/hive-inner-layout.tsx
new file mode 100644
index 0000000000000..07c57460354f9
--- /dev/null
+++ b/website/src/components/hive-layout/hive-inner-layout.tsx
@@ -0,0 +1,104 @@
+import { ReactNode } from 'react';
+import { Layout as NextraLayout } from 'nextra-theme-docs';
+import {
+  cn,
+  GitHubIcon,
+  GraphQLConfCard,
+  HiveFooter,
+  HiveNavigation,
+  HiveNavigationProps,
+  PaperIcon,
+  PencilIcon,
+  PRODUCTS,
+  RightCornerIcon,
+  TargetIcon,
+} from '@theguild/components';
+import { getPageMap } from '@theguild/components/server';
+import graphQLConfLocalImage from './graphql-conf-image.webp';
+
+const developerMenu: HiveNavigationProps['developerMenu'] = [
+  {
+    href: '/docs',
+    icon: <PaperIcon />,
+    children: 'Documentation',
+  },
+  { href: 'https://status.graphql-hive.com/', icon: <TargetIcon />, children: 'Status' },
+  {
+    href: '/product-updates',
+    icon: <RightCornerIcon />,
+    children: 'Product Updates',
+  },
+  { href: 'https://the-guild.dev/blog', icon: <PencilIcon />, children: 'Blog' },
+  {
+    href: 'https://github.com/graphql-hive/console',
+    icon: <GitHubIcon />,
+    children: 'GitHub',
+  },
+];
+
+export async function HiveInnerLayout({
+  children,
+  isLanding,
+}: {
+  children: ReactNode;
+  /**
+   * Landing pages are 48px narrower than the docs pages and they only have light mode.
+   */
+  isLanding: boolean;
+}) {
+  const [meta, ...pageMap] = await getPageMap();
+
+  // const productsPage = pageMap.find(p => 'name' in p && p.name === 'products')!;
+  // // @ts-expect-error -- this should be fixed in Nextra, without route, the collapsible doesn't work
+  // productsPage.route = '#';
+
+  return (
+    <NextraLayout
+      editLink="Edit this page on GitHub"
+      docsRepositoryBase="https://github.com/graphql-hive/platform/tree/main/packages/web/docs"
+      pageMap={[
+        {
+          data: {
+            // @ts-expect-error -- fixme (copied from Dima's v8 PR (sorry))
+            ...meta.data,
+          },
+        },
+        ...pageMap,
+      ]}
+      feedback={{ labels: 'kind/docs' }}
+      navbar={
+        <HiveNavigation
+          className={isLanding ? 'light max-w-[1392px]' : 'max-w-[90rem]'}
+          companyMenuChildren={<GraphQLConfCard image={graphQLConfLocalImage} />}
+          productName={PRODUCTS.HIVE.name}
+          developerMenu={developerMenu}
+        />
+      }
+      sidebar={{ defaultMenuCollapseLevel: 1 }}
+      footer={
+        <HiveFooter
+          className={cn(
+            isLanding ? 'light' : '[&>:first-child]:mx-0 [&>:first-child]:max-w-[90rem]',
+            'pt-[72px]',
+          )}
+          items={{
+            resources: [
+              {
+                children: 'Privacy Policy',
+                href: 'https://the-guild.dev/graphql/hive/privacy-policy.pdf',
+                title: 'Privacy Policy',
+              },
+              {
+                children: 'Terms of Use',
+                href: 'https://the-guild.dev/graphql/hive/terms-of-use.pdf',
+                title: 'Terms of Use',
+              },
+            ],
+          }}
+        />
+      }
+    >
+      {children}
+    </NextraLayout>
+  );
+}
diff --git a/website/src/components/hive-layout/hive-outer-layout.tsx b/website/src/components/hive-layout/hive-outer-layout.tsx
new file mode 100644
index 0000000000000..198f6165f3172
--- /dev/null
+++ b/website/src/components/hive-layout/hive-outer-layout.tsx
@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import { NextFont } from 'next/dist/compiled/@next/font';
+import { Head } from 'nextra/components';
+
+export interface HiveOuterLayoutProps {
+  children: ReactNode;
+  font: NextFont;
+}
+
+// We'll promote this to Components if the reviewers (probably Dima) like the idea.
+export function HiveOuterLayout({ children, font }: HiveOuterLayoutProps) {
+  return (
+    <html
+      lang="en"
+      // Required to be set for `nextra-theme-docs` styles
+      dir="ltr"
+      // Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
+      suppressHydrationWarning
+      className="font-sans"
+    >
+      <Head>
+        <style>{`:root { --font-sans: ${font.style.fontFamily}; }`}</style>
+        <HiveGlobalLayoutStyles />
+      </Head>
+      <body>{children}</body>
+    </html>
+  );
+}
+/**
+ * This should probably be moved to @theguild/components style.css file, but in such a way that it's
+ * not breaking to websites not using Hive Layout yet.
+ */
+function HiveGlobalLayoutStyles() {
+  return (
+    <style>{
+      /* css */ `
+        :root.dark {
+          --nextra-primary-hue: 67.1deg;
+          --nextra-primary-saturation: 100%;
+          --nextra-primary-lightness: 55%;
+          --nextra-bg: 17, 17, 17;
+        }
+        :root.dark *::selection {
+          background-color: hsl(191deg 95% 72% / 0.25)
+        }
+        .light *::selection {
+          background-color: rgb(134 182 193 / 0.2);
+        }
+        :root.light, body.light {
+          --nextra-primary-hue: 191deg;
+          --nextra-primary-saturation: 40%;
+          --nextra-bg: 255, 255, 255;
+        }
+        .x\\:tracking-tight,
+        .nextra-steps :is(h2, h3, h4) {
+          letter-spacing: normal;
+        }
+      `
+    }</style>
+  );
+}
diff --git a/website/src/components/index-page.tsx b/website/src/components/index-page.tsx
index ce9c3a491aa2d..2b7ac75b6951a 100644
--- a/website/src/components/index-page.tsx
+++ b/website/src/components/index-page.tsx
@@ -24,7 +24,7 @@ function Hero() {
   return (
     <div className="w-full">
       <div className="py-20 sm:py-24 lg:py-32 my-6">
-        <h1 className="max-w-screen-md mx-auto font-extrabold text-5xl sm:text-5xl lg:text-6xl text-center bg-gradient-to-r from-cyan-400 to-sky-500 dark:from-cyan-400 dark:to-sky-600 bg-clip-text text-transparent">
+        <h1 className="max-w-screen-md mx-auto font-extrabold text-5xl sm:text-5xl lg:text-6xl text-center bg-gradient-to-r from-cyan-400 to-sky-500 dark:from-cyan-400 dark:to-sky-600 bg-clip-text text-transparent leading-normal">
           GraphQL Mesh
         </h1>
         <p className="max-w-screen-sm mx-auto mt-6 text-2xl text-gray-600 text-center dark:text-gray-400">
diff --git a/website/src/content/docs/transforms/cache.mdx.bak b/website/src/content/docs/transforms/cache.mdx.bak
deleted file mode 100644
index b1c796ff2cd23..0000000000000
--- a/website/src/content/docs/transforms/cache.mdx.bak
+++ /dev/null
@@ -1,157 +0,0 @@
-import { Callout } from '@theguild/components'
-
-# Cache Transform
-
-The `cache` transform allows you to easily apply caching over your data sources.
-
-It allows you to configure custom invalidation rules (by TTL/mutation) and selective caching according to your needs.
-
-<Callout>
-  This transform is being applied globally because of the need to communicate with other GraphQL operations from your
-  mesh.
-</Callout>
-
-To get started with this transform, install it:
-
-```sh npm2yarn
-npm i @graphql-mesh/transform-cache
-```
-
-<Callout>
-  GraphQL Mesh uses a default localForage cache (it is fallback to LRU cache in NodeJS), but you can replace it with any other key=>value cache mechanism. See [cache section](/docs/cache/localforage) for more info.
-  We'd recommend this transform be used on the root level, not the handler level. It might not work as expected if you use it on a handler level.
-
-</Callout>
-
-## How to use?
-
-### Simple caching
-
-To cache some of your queries, apply the following transform rule. The following example will cache all `Query.*` in your schema forever:
-
-```yaml filename=".meshrc.yaml"
-transforms:
-  - cache:
-      - field: Query.*
-```
-
-You can also apply it to a specific field or multiple fields:
-
-```yaml filename=".meshrc.yaml"
-transforms:
-  - cache:
-      - field: Query.users
-  - cache:
-      - field: Query.posts
-```
-
-### The Cache Key
-
-Each cache record is stored with a key. The default way of creating this key is to use the GraphQL type name, the GraphQL field name, and a hash of the `args` object. This is in order to make that we can distinct the cache key according to the data it's storing.
-
-You can customize the `cacheKey` according to your needs, and you can use custom helpers to help you create those cache keys dynamically.
-
-The following example creates a `cacheKey` by a GraphQL query argument called `userId` per day:
-
-```yaml filename=".meshrc.yaml"
-transforms:
-  - cache:
-      - field: Query.user
-        cacheKey: user-{args.id}-{yyyy-mm-dd | date}
-```
-
-## Cache Invalidation
-
-### TTL
-
-Invalidation by TTL is the simplest way to deal with your cache. You can specify any time (in seconds) to keep your cache.
-
-```yaml filename=".meshrc.yaml"
-transforms:
-  - cache:
-      - field: Query.*
-        invalidate:
-          ttl: 3600 # 1 hour
-```
-
-### Operation-based
-
-GraphQL Mesh has a built-in operation-based caching solution.
-
-You can cache data easily and invalidate it only when it changes by a mutation.
-
-For example, given the following schema:
-
-```graphql
-type Query {
-  user(id: ID!): User!
-}
-
-type Mutation {
-  updateUser(userIdToUpdate: ID!, setFields: UpdateUserInput!): User!
-}
-
-type User {
-  id: ID!
-  email: String!
-  name: String
-}
-
-input UpdateUserInput {
-  email: String
-  name: String
-}
-```
-
-You can set a simple caching based on a user id:
-
-```yaml filename=".meshrc.yaml"
-transforms:
-  - cache:
-      - field: Query.user
-        cacheKey: user-{args.id}
-```
-
-And you can add operation-based invalidation, so when `updateUser` is done successfully, it will invalidate the matching cache record to make sure the data will be fetched next time from the remote source:
-
-```yaml filename=".meshrc.yaml"
-transforms:
-  - cache:
-      - field: Query.user
-        cacheKey: user-{args.id}
-        invalidate:
-          effectingOperations:
-            - operation: Mutation.updateUser
-              matchKey: user-{args.userIdToUpdate}
-```
-
-This way, when someone uses `updateUser` with a specific user id, it will automatically update the data record and then invalidate the cache
-
-### Programmatic
-
-The `getBuiltMesh` method of GraphQL Mesh artifacts returns the general key=>value cache it uses at the moment, so you can easily access it and invalidate records according to your needs:
-
-```ts
-const { getBuiltMesh } = require('./.mesh')
-const { schema, execute, cache } = getBuiltMesh()
-
-cache.delete(SOME_KEY)
-```
-
-## CodeSandBox Example
-
-You can check the ["Location Weather" example](https://github.com/Urigo/graphql-mesh/tree/master/examples/openapi-location-weather/) that uses OpenAPI handler with cache transform;
-
-<iframe
-  src="https://codesandbox.io/embed/github/Urigo/graphql-mesh/tree/master/examples/openapi-location-weather?fontsize=14&hidenavigation=1&theme=dark&module=%2F.meshrc.yml"
-  className="mt-6 w-full h-[500px] rounded-md"
-  title="typescript-location-weather-example"
-  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
-  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-/>
-
-## Config API Reference
-
-import API from '../../../generated-markdown/CacheTransformConfig.generated.md'
-
-<API />
diff --git a/website/src/fonts/PPNeueMontreal-Medium.woff2 b/website/src/fonts/PPNeueMontreal-Medium.woff2
new file mode 100644
index 0000000000000..c2325068f714b
Binary files /dev/null and b/website/src/fonts/PPNeueMontreal-Medium.woff2 differ
diff --git a/website/src/fonts/PPNeueMontreal-Regular.woff2 b/website/src/fonts/PPNeueMontreal-Regular.woff2
new file mode 100644
index 0000000000000..30f88559134d0
Binary files /dev/null and b/website/src/fonts/PPNeueMontreal-Regular.woff2 differ
diff --git a/website/theme.config.tsx b/website/theme.config.tsx
deleted file mode 100644
index 5773cc583e076..0000000000000
--- a/website/theme.config.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/* eslint sort-keys: error */
-import { useRouter } from 'next/router';
-import { defineConfig, Giscus, PRODUCTS, useTheme } from '@theguild/components';
-
-export default defineConfig({
-  description: 'GraphQL Gateway Framework and anything-to-GraphQL',
-  docsRepositoryBase: 'https://github.com/ardatan/graphql-mesh/tree/master/website',
-  logo: PRODUCTS.MESH.logo({ className: 'w-8' }),
-  main: function Main({ children }) {
-    const { resolvedTheme } = useTheme();
-    const { route } = useRouter();
-
-    const comments = route !== '/' && (
-      <Giscus
-        // ensure giscus is reloaded when client side route is changed
-        key={route}
-        repo="ardatan/graphql-mesh"
-        repoId="MDEwOlJlcG9zaXRvcnkyMzM1OTc1MTc="
-        category="Docs Discussions"
-        categoryId="DIC_kwDODexqTc4CSDDQ"
-        mapping="pathname"
-        theme={resolvedTheme}
-      />
-    );
-
-    return (
-      <>
-        {children}
-        {comments}
-      </>
-    );
-  },
-  websiteName: 'GraphQL-Mesh',
-});
diff --git a/website/tsconfig.json b/website/tsconfig.json
index 8a44982386aa5..c8985c5583a24 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
@@ -9,15 +10,13 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "noEmit": true,
-    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "paths": {
-      "@/*": ["./*"]
-    }
+    "paths": { "@/*": ["./*"] },
+    "plugins": [{ "name": "next" }]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }
diff --git a/yarn.lock b/yarn.lock
index f3cdc28c1ea3a..dff0e3f5548b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10577,6 +10577,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pagefind/darwin-arm64@npm:1.2.0":
+  version: 1.2.0
+  resolution: "@pagefind/darwin-arm64@npm:1.2.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@pagefind/darwin-x64@npm:1.2.0":
+  version: 1.2.0
+  resolution: "@pagefind/darwin-x64@npm:1.2.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@pagefind/linux-arm64@npm:1.2.0":
+  version: 1.2.0
+  resolution: "@pagefind/linux-arm64@npm:1.2.0"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@pagefind/linux-x64@npm:1.2.0":
+  version: 1.2.0
+  resolution: "@pagefind/linux-x64@npm:1.2.0"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@pagefind/windows-x64@npm:1.2.0":
+  version: 1.2.0
+  resolution: "@pagefind/windows-x64@npm:1.2.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -28957,6 +28992,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pagefind@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "pagefind@npm:1.2.0"
+  dependencies:
+    "@pagefind/darwin-arm64": "npm:1.2.0"
+    "@pagefind/darwin-x64": "npm:1.2.0"
+    "@pagefind/linux-arm64": "npm:1.2.0"
+    "@pagefind/linux-x64": "npm:1.2.0"
+    "@pagefind/windows-x64": "npm:1.2.0"
+  dependenciesMeta:
+    "@pagefind/darwin-arm64":
+      optional: true
+    "@pagefind/darwin-x64":
+      optional: true
+    "@pagefind/linux-arm64":
+      optional: true
+    "@pagefind/linux-x64":
+      optional: true
+    "@pagefind/windows-x64":
+      optional: true
+  bin:
+    pagefind: lib/runner/bin.cjs
+  checksum: 10c0/291a0aa8b52bd8d4614073aa1f8b803154e57898558bbb1b816aba10acee56ebc07817f8c6407f55a83ab7977cf331c630dc4d8badd1e15f46d194523f9b86cd
+  languageName: node
+  linkType: hard
+
 "param-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "param-case@npm:3.0.4"
@@ -36398,6 +36459,7 @@ __metadata:
     eslint-config-next: "npm:15.1.0"
     next: "npm:^15.0.0"
     next-sitemap: "npm:^4.2.3"
+    pagefind: "npm:^1.2.0"
     postcss-import: "npm:16.1.0"
     postcss-lightningcss: "npm:1.0.1"
     react: "npm:^19.0.0"