diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index a82d48e1..9a5731b2 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -9,7 +9,7 @@ const config = {
   reactStrictMode: true,
 
   /** Enables hot reloading for local packages without a build step */
-  transpilePackages: ["@kan/api", "@kan/db"],
+  transpilePackages: ["@kan/api", "@kan/db", "@kan/utils"],
 
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
diff --git a/apps/web/src/components/LottieIcon.tsx b/apps/web/src/components/LottieIcon.tsx
index a89c2e01..a9802b2d 100644
--- a/apps/web/src/components/LottieIcon.tsx
+++ b/apps/web/src/components/LottieIcon.tsx
@@ -1,4 +1,6 @@
-import Lottie from "react-lottie-player";
+import dynamic from "next/dynamic";
+
+const Lottie = dynamic(() => import("react-lottie-player"), { ssr: false });
 
 type IconProps = {
   isPlaying: boolean;