diff --git a/app/layout.tsx b/app/layout.tsx
index 912cdeb..61e8806 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,5 @@
 // @auto-i18n-check. Please do not delete the line.
+import { MotionProvider } from "@/components/motion/motion-provider";
 import getEnv from "@/lib/env-entry";
 import { cn } from "@/lib/utils";
 import "@/styles/globals.css";
@@ -64,16 +65,18 @@ export default async function LocaleLayout({
           fontSans.variable,
         )}
       >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <NextIntlClientProvider messages={messages}>
-            {children}
-          </NextIntlClientProvider>
-        </ThemeProvider>
+        <MotionProvider>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <NextIntlClientProvider messages={messages}>
+              {children}
+            </NextIntlClientProvider>
+          </ThemeProvider>
+        </MotionProvider>
       </body>
     </html>
   );
diff --git a/components/Switch.tsx b/components/Switch.tsx
index 4b0b0c4..acd68c6 100644
--- a/components/Switch.tsx
+++ b/components/Switch.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { motion } from "framer-motion";
+import { m } from "framer-motion";
 import { useTranslations } from "next-intl";
 import React, { createRef, useEffect, useRef } from "react";
 
@@ -74,7 +74,7 @@ export default function Switch({
             )}
           >
             {nowTag === tag && (
-              <motion.div
+              <m.div
                 layoutId="nav-item"
                 className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
                 style={{
diff --git a/components/TabSwitch.tsx b/components/TabSwitch.tsx
index 7bae3e0..b15e80d 100644
--- a/components/TabSwitch.tsx
+++ b/components/TabSwitch.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { motion } from "framer-motion";
+import { m } from "framer-motion";
 import { useTranslations } from "next-intl";
 import React from "react";
 
@@ -30,7 +30,7 @@ export default function TabSwitch({
             )}
           >
             {currentTab === tab && (
-              <motion.div
+              <m.div
                 layoutId="tab-switch"
                 className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
                 style={{
diff --git a/components/motion/framer-lazy-feature.ts b/components/motion/framer-lazy-feature.ts
new file mode 100644
index 0000000..a0bf32e
--- /dev/null
+++ b/components/motion/framer-lazy-feature.ts
@@ -0,0 +1 @@
+export { domMax as default } from "framer-motion";
diff --git a/components/motion/motion-provider.tsx b/components/motion/motion-provider.tsx
new file mode 100644
index 0000000..84f27e8
--- /dev/null
+++ b/components/motion/motion-provider.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { LazyMotion } from "framer-motion";
+
+const loadFeatures = () =>
+  import("./framer-lazy-feature").then((res) => res.default);
+
+export const MotionProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <LazyMotion features={loadFeatures} strict key="framer">
+      {children}
+    </LazyMotion>
+  );
+};