diff --git a/apps/frontend/src/app/(provider)/provider/[p]/bridge.tsx b/apps/frontend/src/app/(provider)/provider/[p]/bridge.tsx
index 1fd474a5..fdc522ad 100644
--- a/apps/frontend/src/app/(provider)/provider/[p]/bridge.tsx
+++ b/apps/frontend/src/app/(provider)/provider/[p]/bridge.tsx
@@ -33,7 +33,7 @@ declare global {
   }
 }
 
-export const ProviderPreviewBridge: FC<{ provider: string }> = ({
+const ProviderPreviewBridge: FC<{ provider: string }> = ({
   provider,
 }) => {
   // Read __PROVIDER_INIT__ in an effect, not via a useState lazy
@@ -44,10 +44,10 @@ export const ProviderPreviewBridge: FC<{ provider: string }> = ({
   // after mount; useForm's `values` prop then reactively resets the
   // form to the seed AFTER any field-level `register('x', { value })`
   // defaults have been applied, so the seed wins.
-  const [init, setInit] = useState<InitPayload>({});
+  const [init, setInit] = useState<InitPayload>(null);
   useEffect(() => {
     if (typeof window !== 'undefined' && window.__PROVIDER_INIT__) {
-      setInit(window.__PROVIDER_INIT__);
+      setInit(window.__PROVIDER_INIT__ || {});
     }
   }, []);
 
@@ -75,6 +75,10 @@ export const ProviderPreviewBridge: FC<{ provider: string }> = ({
     };
   }, []);
 
+  if (!init) {
+    return null;
+  }
+
   return (
     <ProviderPreviewComponent
       provider={provider}
@@ -86,3 +90,5 @@ export const ProviderPreviewBridge: FC<{ provider: string }> = ({
     />
   );
 };
+
+export default ProviderPreviewBridge;
diff --git a/apps/frontend/src/app/(provider)/provider/[p]/in-bridge.tsx b/apps/frontend/src/app/(provider)/provider/[p]/in-bridge.tsx
new file mode 100644
index 00000000..66f60778
--- /dev/null
+++ b/apps/frontend/src/app/(provider)/provider/[p]/in-bridge.tsx
@@ -0,0 +1,13 @@
+'use client';
+import dynamic from 'next/dynamic';
+import { FC } from 'react';
+const Bridge = dynamic(
+  () =>
+    import(
+      '@gitroom/frontend/components/provider-preview/preview.provider.component'
+    ).then((mod) => mod.ProviderPreviewComponent),
+  { ssr: false }
+);
+export const InBridge: FC<{ provider: string }> = ({ provider }) => {
+  return <Bridge provider={provider} />;
+};
diff --git a/apps/frontend/src/app/(provider)/provider/[p]/page.tsx b/apps/frontend/src/app/(provider)/provider/[p]/page.tsx
index 97918986..61403ce1 100644
--- a/apps/frontend/src/app/(provider)/provider/[p]/page.tsx
+++ b/apps/frontend/src/app/(provider)/provider/[p]/page.tsx
@@ -55,7 +55,7 @@
  * If a different channel is needed, adjust ./bridge.tsx — this page is only
  * a server wrapper that forwards the `:p` route param.
  */
-import { ProviderPreviewBridge } from './bridge';
+import { InBridge } from '@gitroom/frontend/app/(provider)/provider/[p]/in-bridge';
 
 export default async function Page({
   params,
@@ -63,5 +63,5 @@ export default async function Page({
   params: Promise<{ p: string }>;
 }) {
   const { p } = await params;
-  return <ProviderPreviewBridge provider={p} />;
+  return <InBridge provider={p} />;
 }