diff --git a/example/news-interactions/src/module/common/component/Lottie/index.tsx b/example/news-interactions/src/module/common/component/Lottie/index.tsx
index 1308266c..eb6c396d 100644
--- a/example/news-interactions/src/module/common/component/Lottie/index.tsx
+++ b/example/news-interactions/src/module/common/component/Lottie/index.tsx
@@ -1,12 +1,19 @@
 "use client";
 
 import { useWalletStatus } from "@frak-labs/nexus-sdk/react";
-import { Player } from "@lottiefiles/react-lottie-player";
 import { Link } from "next-view-transitions";
+import dynamic from "next/dynamic";
 import { useState } from "react";
 import lottie from "./assets/lottie.json";
 import styles from "./index.module.css";
 
+/**
+ * Import Lottie component dynamically to avoid loading it on the server side
+ */
+const Player = dynamic(() =>
+    import("@lottiefiles/react-lottie-player").then((mod) => mod.Player)
+);
+
 export function Lottie({ className }: { className?: string }) {
     const [playerState, setPlayerState] = useState<"complete" | undefined>();
     // Get the wallet status