diff --git a/.changeset/fix-blog-typos.md b/.changeset/fix-blog-typos.md
new file mode 100644
index 0000000000000..b4640584f85d9
--- /dev/null
+++ b/.changeset/fix-blog-typos.md
@@ -0,0 +1,5 @@
+---
+"documentation": patch
+---
+
+docs: fix typos in blog posts
diff --git a/documentation/blog/2022-02-21-react-antd-admin.md b/documentation/blog/2022-02-21-react-antd-admin.md
index 6441ad916fe4f..1c068a4214f51 100644
--- a/documentation/blog/2022-02-21-react-antd-admin.md
+++ b/documentation/blog/2022-02-21-react-antd-admin.md
@@ -528,7 +528,7 @@ Let's create two Roles, Admin and Editor. Admin have full CRUD authority on the
 
 Let's start by creating two buttons for the `Admin` and `Editor` roles in our created Header Component.
 
-```tsx title="/src/componets/header.tsx"
+```tsx title="/src/components/header.tsx"
 import { useGetLocale, useSetLocale } from "@refinedev/core";
 import {
   AntdLayout,
diff --git a/documentation/blog/2023-07-26-refine-primereact-dashboard.md b/documentation/blog/2023-07-26-refine-primereact-dashboard.md
index 5f0a35e390907..1a5294e1f7302 100644
--- a/documentation/blog/2023-07-26-refine-primereact-dashboard.md
+++ b/documentation/blog/2023-07-26-refine-primereact-dashboard.md
@@ -141,7 +141,7 @@ Previously, we mentioned that the scaffolded project includes auto-generated CRU
 
     body {
       margin: 0px;
-      // Build-in PrimeReact themes use this variable
+      // Built-in PrimeReact themes use this variable
       font-family: var(--font-family);
     }
     ```
diff --git a/documentation/blog/2023-09-20-next-ui-panel.md b/documentation/blog/2023-09-20-next-ui-panel.md
index f06b41be89a07..cb44347c58fed 100644
--- a/documentation/blog/2023-09-20-next-ui-panel.md
+++ b/documentation/blog/2023-09-20-next-ui-panel.md
@@ -2289,7 +2289,7 @@ export { ProductEdit } from "./edit";
 export { ProductShow } from "./show";
 ```
 
-Finally, add the following highligthed changes to the `src/App.tsx` file.
+Finally, add the following highlighted changes to the `src/App.tsx` file.
 
 <details>
 
diff --git a/documentation/blog/2024-03-19-ts-shadcn.md b/documentation/blog/2024-03-19-ts-shadcn.md
index e0676d893a3ed..d3c9596763679 100644
--- a/documentation/blog/2024-03-19-ts-shadcn.md
+++ b/documentation/blog/2024-03-19-ts-shadcn.md
@@ -1715,7 +1715,7 @@ In this post, we demonstrated with a blog posts list page example how Shadcn can
 
 We learned how Refin'es headless architecture offers easy integration of Shadcn within a Refine app. We covered Shadcn relies on TailwindCSS and its dependencies and elaborated how Shadcn is configured to operate with TypeScript within a Vite based React app like Refine.
 
-Later on, we generated necessary Shadcn components we needed to rebuild a data grid for a list page in our Refine app. While rebuiling the data table and pagination with Shadcn components, we saw how Shadcn components complement and play well with the sophisticated data fetching, state management and React Table integrations typical of Refine apps. We also examined how Shadcn utilizes Class Variance Authority to produce style maps for component variants that are difficult to implement with plain TailwindCSS.
+Later on, we generated necessary Shadcn components we needed to rebuild a data grid for a list page in our Refine app. While rebuilding the data table and pagination with Shadcn components, we saw how Shadcn components complement and play well with the sophisticated data fetching, state management and React Table integrations typical of Refine apps. We also examined how Shadcn utilizes Class Variance Authority to produce style maps for component variants that are difficult to implement with plain TailwindCSS.
 
 Towards the end, we refactored the Shadcn based paginated data table into a reusable component that we can use to present any data we want.
 
diff --git a/documentation/blog/2024-04-01-ts-keyof.md b/documentation/blog/2024-04-01-ts-keyof.md
index 8a86392f03fc9..13805524a9856 100644
--- a/documentation/blog/2024-04-01-ts-keyof.md
+++ b/documentation/blog/2024-04-01-ts-keyof.md
@@ -102,7 +102,7 @@ It is common to use the `typeof` operator with `keyof` in order to derive an obj
 ```ts
 const account = {
   username: "donald_duck",
-  email: "donald.duck@exmaple.com",
+  email: "donald.duck@example.com",
   password: "goawaygoaway",
   role: "admin",
 };
@@ -144,7 +144,7 @@ We can use the `keyof` operator in generic functions. Let's say we have an `acco
 ```ts
 const account = {
   username: "donald_duck",
-  email: "donald.duck@exmaple.com",
+  email: "donald.duck@example.com",
   password: "goawaygoaway",
   role: "admin",
 };
@@ -152,7 +152,7 @@ const account = {
 function getProp<T, K extends keyof T> (obj: T, prop: K) { return obj[prop] };
 function setProp<T, K extends keyof T> (obj: T, prop: K, value: T[K]) { obj[prop] = value };
 
-console.log(getProp(account, "email")); // "donald.duck@exmaple.com"
+console.log(getProp(account, "email")); // "donald.duck@example.com"
 console.log(getProp<{"name": string}, "name">(account, "email")); // 2345 Error: "name" not compatible to `account` keys
 
 setProp(account, "role", "project manager");
diff --git a/documentation/blog/2024-05-21-zod.md b/documentation/blog/2024-05-21-zod.md
index cb96e0026d850..6c40497b9cfde 100644
--- a/documentation/blog/2024-05-21-zod.md
+++ b/documentation/blog/2024-05-21-zod.md
@@ -688,7 +688,7 @@ export function EditProfile() {
             <input
               type="text"
               className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
-              placeholder="email@exmaple.kr"
+              placeholder="email@example.kr"
               {...formInstance?.register("email")}
             ></input>
             {formInstance?.formState.errors?.email && (
diff --git a/documentation/blog/2024-06-21-auth-with-nextauth.md b/documentation/blog/2024-06-21-auth-with-nextauth.md
index 873c7f179aaf7..90a246c51a777 100644
--- a/documentation/blog/2024-06-21-auth-with-nextauth.md
+++ b/documentation/blog/2024-06-21-auth-with-nextauth.md
@@ -318,7 +318,7 @@ export default function Home() {
               height={200}
             />
             <div className={styles.blogCardContent}>
-              <h2>Nexjs for Beginers</h2>
+              <h2>Nexjs for Beginners</h2>
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
                 Quisquam, quidem.
@@ -450,7 +450,7 @@ export default function Home() {
                 height={200}
               />
               <div className={styles.blogCardContent}>
-                <h2>Nexjs for Beginers</h2>
+                <h2>Nexjs for Beginners</h2>
                 <p>
                   Lorem ipsum dolor sit amet consectetur adipisicing elit.
                   Quisquam, quidem.
diff --git a/documentation/blog/2024-08-12-bun-vs-node.md b/documentation/blog/2024-08-12-bun-vs-node.md
index f0905b4474fdd..ae393a03f85d3 100644
--- a/documentation/blog/2024-08-12-bun-vs-node.md
+++ b/documentation/blog/2024-08-12-bun-vs-node.md
@@ -20,7 +20,7 @@ Do you want to try out a new runtime environment? [Bun](https://bun.sh/) is the
 
 While there is no prerequisite to follow in this tutorial, you should at least know the fundamentals of Javascript and building basic web applications.
 
-You need the followings:
+You need the following:
 
 - [Node 14](https://nodejs.org/en) or higher
 - [Bun runtime](https://bun.sh/) installed
diff --git a/documentation/blog/2024-09-16-stylex-post.md b/documentation/blog/2024-09-16-stylex-post.md
index 72ae6cd00396f..15f7b0d921bad 100644
--- a/documentation/blog/2024-09-16-stylex-post.md
+++ b/documentation/blog/2024-09-16-stylex-post.md
@@ -298,7 +298,7 @@ const style = stylex.create({
 
 </details>
 
-It takes a styles object with property indentifiers that represent a CSS class and values that compose the actual CSS rules. Under the hood, Stylex creates a CSS class with an identifier starting with `x` for each of the Stylex style object property. When the style is applied to a JSX element with `stylex.props`, this generated CSS class is added to the element's `className` property.
+It takes a styles object with property identifiers that represent a CSS class and values that compose the actual CSS rules. Under the hood, Stylex creates a CSS class with an identifier starting with `x` for each of the Stylex style object property. When the style is applied to a JSX element with `stylex.props`, this generated CSS class is added to the element's `className` property.
 
 <br />
 
diff --git a/examples/monorepo-module-federation/apps/blog-posts/package.json b/examples/monorepo-module-federation/apps/blog-posts/package.json
index 423152dda741e..752783a319af4 100644
--- a/examples/monorepo-module-federation/apps/blog-posts/package.json
+++ b/examples/monorepo-module-federation/apps/blog-posts/package.json
@@ -37,7 +37,7 @@
     "react-router": "^7.0.2"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-federation": "^1.2.3",
+    "@module-federation/vite": "^1.16.8",
     "@types/node": "^20",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
diff --git a/examples/monorepo-module-federation/apps/blog-posts/vite.config.ts b/examples/monorepo-module-federation/apps/blog-posts/vite.config.ts
index f0fb0ea3c513f..ccb79f9d7bda1 100644
--- a/examples/monorepo-module-federation/apps/blog-posts/vite.config.ts
+++ b/examples/monorepo-module-federation/apps/blog-posts/vite.config.ts
@@ -1,4 +1,4 @@
-import federation from "@originjs/vite-plugin-federation";
+import { federation } from "@module-federation/vite";
 import react from "@vitejs/plugin-react";
 import * as dns from "dns";
 import { defineConfig } from "vite";
@@ -12,7 +12,8 @@ export default defineConfig({
     react(),
     federation({
       name: "blog_posts",
-      filename: "blog_posts.js",
+      filename: "remoteEntry.js",
+      dts: false,
       exposes: {
         "./BlogPostList": "./src/pages/blog-posts/list.tsx",
         "./BlogPostShow": "./src/pages/blog-posts/show.tsx",
@@ -22,7 +23,7 @@ export default defineConfig({
       shared: [
         "react",
         "react-dom",
-        "react-router-dom",
+        "react-router",
         "@refinedev/core",
         "@refinedev/antd",
         "antd",
diff --git a/examples/monorepo-module-federation/apps/categories/package.json b/examples/monorepo-module-federation/apps/categories/package.json
index 5af4ec06ab8e9..66747e44eeeb6 100644
--- a/examples/monorepo-module-federation/apps/categories/package.json
+++ b/examples/monorepo-module-federation/apps/categories/package.json
@@ -37,7 +37,7 @@
     "react-router": "^7.0.2"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-federation": "^1.2.3",
+    "@module-federation/vite": "^1.16.8",
     "@types/node": "^20",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
diff --git a/examples/monorepo-module-federation/apps/categories/vite.config.ts b/examples/monorepo-module-federation/apps/categories/vite.config.ts
index 514a89a241326..0203b84252de0 100644
--- a/examples/monorepo-module-federation/apps/categories/vite.config.ts
+++ b/examples/monorepo-module-federation/apps/categories/vite.config.ts
@@ -1,4 +1,4 @@
-import federation from "@originjs/vite-plugin-federation";
+import { federation } from "@module-federation/vite";
 import react from "@vitejs/plugin-react";
 import * as dns from "dns";
 import { defineConfig } from "vite";
@@ -12,7 +12,8 @@ export default defineConfig({
     react(),
     federation({
       name: "categories",
-      filename: "categories.js",
+      filename: "remoteEntry.js",
+      dts: false,
       exposes: {
         "./CategoryList": "./src/pages/categories/list.tsx",
         "./CategoryShow": "./src/pages/categories/show.tsx",
@@ -22,7 +23,7 @@ export default defineConfig({
       shared: [
         "react",
         "react-dom",
-        "react-router-dom",
+        "react-router",
         "@refinedev/core",
         "@refinedev/antd",
         "antd",
diff --git a/examples/monorepo-module-federation/apps/host/.env.example b/examples/monorepo-module-federation/apps/host/.env.example
index 7295664406274..97348f1323754 100644
--- a/examples/monorepo-module-federation/apps/host/.env.example
+++ b/examples/monorepo-module-federation/apps/host/.env.example
@@ -1 +1 @@
-VITE_CATEGORIES_URL="http://localhost:4002/assets/categories.js"
+VITE_CATEGORIES_URL="http://localhost:4002/remoteEntry.js"
diff --git a/examples/monorepo-module-federation/apps/host/package.json b/examples/monorepo-module-federation/apps/host/package.json
index f7223b535c5d6..99f70f7b3f541 100644
--- a/examples/monorepo-module-federation/apps/host/package.json
+++ b/examples/monorepo-module-federation/apps/host/package.json
@@ -35,7 +35,7 @@
     "react-router": "^7.0.2"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-federation": "^1.2.3",
+    "@module-federation/vite": "^1.16.8",
     "@types/node": "^20",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
diff --git a/examples/monorepo-module-federation/apps/host/src/App.tsx b/examples/monorepo-module-federation/apps/host/src/App.tsx
index 36b849d3f13f4..914c74d308403 100644
--- a/examples/monorepo-module-federation/apps/host/src/App.tsx
+++ b/examples/monorepo-module-federation/apps/host/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from "react";
+import React, { Suspense } from "react";
 
 import { Authenticated, GitHubBanner, Refine } from "@refinedev/core";
 import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
@@ -25,7 +25,6 @@ import { ColorModeContextProvider } from "./contexts/color-mode";
 import { ForgotPassword } from "./pages/forgotPassword";
 import { Login } from "./pages/login";
 import { Register } from "./pages/register";
-import type { ExtendedWindow } from "./types";
 
 const BlogPostList = React.lazy(() => import("blog_posts/BlogPostList"));
 const BlogPostShow = React.lazy(() => import("blog_posts/BlogPostShow"));
@@ -37,19 +36,7 @@ const CategoryShow = React.lazy(() => import("categories/CategoryShow"));
 const CategoryEdit = React.lazy(() => import("categories/CategoryEdit"));
 const CategoryCreate = React.lazy(() => import("categories/CategoryCreate"));
 
-declare let window: ExtendedWindow;
-
 function App() {
-  useEffect(() => {
-    // This is not as elegant as production code as we cannot use such in production.
-    // But lets assume these envs are coming from a environment handler.
-    // And this is only for sample case.
-    if (import.meta.env.VITE_CATEGORIES_URL) {
-      // This is where we set the payment remote's URL.
-      window.categoriesUrl = import.meta.env.VITE_CATEGORIES_URL;
-    }
-  }, []);
-
   return (
     <BrowserRouter>
       <GitHubBanner />
diff --git a/examples/monorepo-module-federation/apps/host/vite.config.ts b/examples/monorepo-module-federation/apps/host/vite.config.ts
index e384d251291f1..eec14e436caa3 100644
--- a/examples/monorepo-module-federation/apps/host/vite.config.ts
+++ b/examples/monorepo-module-federation/apps/host/vite.config.ts
@@ -1,53 +1,60 @@
-import federation from "@originjs/vite-plugin-federation";
+import { federation } from "@module-federation/vite";
 import react from "@vitejs/plugin-react";
 import * as dns from "dns";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 dns.setDefaultResultOrder("verbatim");
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    react(),
-    federation({
-      name: "host",
-      remotes: [
-        {
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, __dirname, "");
+
+  return {
+    plugins: [
+      react(),
+      federation({
+        name: "host",
+        dts: false,
+        remotes: {
           blog_posts: {
-            external: "http://localhost:4001/assets/blog_posts.js",
-            from: "vite",
-            externalType: "url",
+            type: "module",
+            name: "blog_posts",
+            entry: "http://localhost:4001/remoteEntry.js",
+            entryGlobalName: "blog_posts",
+            shareScope: "default",
           },
-        },
-        {
           categories: {
-            external: "Promise.resolve(window.categoriesUrl)",
-            from: "vite",
-            externalType: "promise",
+            type: "module",
+            name: "categories",
+            entry:
+              env.VITE_CATEGORIES_URL || "http://localhost:4002/remoteEntry.js",
+            entryGlobalName: "categories",
+            shareScope: "default",
           },
         },
-      ],
-      shared: [
-        "react",
-        "react-dom",
-        "react-router-dom",
-        "@refinedev/core",
-        "@refinedev/antd",
-        "antd",
-      ],
-    }),
-    tsconfigPaths({ root: __dirname }),
-  ],
+        filename: "remoteEntry.js",
+        shared: [
+          "react",
+          "react-dom",
+          "react-router",
+          "@refinedev/core",
+          "@refinedev/antd",
+          "antd",
+        ],
+      }),
+      tsconfigPaths({ root: __dirname }),
+    ],
 
-  preview: {
-    host: "localhost",
-    port: 4000,
-    strictPort: true,
-  },
-  build: {
-    target: "esnext",
-    minify: false,
-    cssCodeSplit: false,
-  },
+    preview: {
+      host: "localhost",
+      port: 4000,
+      strictPort: true,
+    },
+    build: {
+      target: "esnext",
+      minify: false,
+      cssCodeSplit: false,
+    },
+  };
 });