diff --git a/next.config.js b/next.config.js
index 32444230..67efb015 100644
--- a/next.config.js
+++ b/next.config.js
@@ -55,13 +55,16 @@ const config = {
       layers: true,
     };
     
-    // Optimize tree-shaking by ensuring proper module resolution
+    // Optimize tree-shaking by ensuring proper module resolution.
+    // Note: do NOT set `sideEffects: false` globally — it tells webpack that
+    // every file is side-effect-free, which silently strips CSS imports,
+    // polyfills, and other modules that exist purely for their side effects.
+    // Per-package sideEffects flags in package.json are the correct surface.
     config.optimization = {
       ...config.optimization,
       usedExports: true,
-      sideEffects: false,
     };
-    
+
     // Handle CommonJS modules that don't support named exports
     config.resolve = {
       ...config.resolve,
diff --git a/src/components/common/cardano-objects/resolve-adahandle.tsx b/src/components/common/cardano-objects/resolve-adahandle.tsx
index d1ba72d8..51ee040b 100644
--- a/src/components/common/cardano-objects/resolve-adahandle.tsx
+++ b/src/components/common/cardano-objects/resolve-adahandle.tsx
@@ -1,8 +1,14 @@
 import { toast } from "@/hooks/use-toast";
 import { getProvider } from "@/utils/get-provider";
 
-//AdaHandle look up provider only supports mainnnet
-const provider = getProvider(1)
+// AdaHandle lookup is mainnet-only. Lazy-init the provider so the module
+// can be imported during SSR / page-data collection without requiring
+// NEXT_PUBLIC_BLOCKFROST_API_KEY_MAINNET to be defined at module-load time.
+let cachedProvider: ReturnType<typeof getProvider> | null = null;
+const getMainnetProvider = () => {
+  if (!cachedProvider) cachedProvider = getProvider(1);
+  return cachedProvider;
+};
 
 export const resolveAdaHandle = async (
   setAdaHandle: (value: string) => void,
@@ -18,7 +24,7 @@ export const resolveAdaHandle = async (
       return;
     }
 
-    const address = await provider.fetchHandleAddress(handleName);
+    const address = await getMainnetProvider().fetchHandleAddress(handleName);
 
     if (address) {
       const newAddresses = [...recipientAddresses];
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 903d99bb..774fb03c 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -13,6 +13,7 @@ import { env } from "@/env";
 import { api } from "@/utils/api";
 
 import "@/styles/globals.css";
+import "swagger-ui-react/swagger-ui.css";
 import "@/styles/swagger-overrides.css";
 import { Toaster } from "@/components/ui/toaster";
 import Metatags from "@/components/ui/metatags";
diff --git a/src/pages/api-docs.tsx b/src/pages/api-docs.tsx
index 7c97eb78..495c867c 100644
--- a/src/pages/api-docs.tsx
+++ b/src/pages/api-docs.tsx
@@ -6,8 +6,9 @@ import { Key, Lightbulb, Copy, Check } from "lucide-react";
 import Globe from "./globe";
 
 // Avoid SSR for Swagger UI
+// Note: swagger-ui CSS is imported globally from src/pages/_app.tsx because
+// Next.js Pages Router only allows global CSS imports from the custom App.
 const SwaggerUI = dynamic(() => import("swagger-ui-react"), { ssr: false });
-import "swagger-ui-react/swagger-ui.css";
 
 export const getServerSideProps = () => ({ props: {} });