diff --git a/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx
index 9ec60d23..83bd7d32 100644
--- a/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx
+++ b/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx
@@ -1,10 +1,12 @@
 import { BlockNoteView, useCreateBlockNote } from '@blocknote/react';
 import '@blocknote/react/style.css';
-import React, { useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
+import { WebrtcProvider } from 'y-webrtc';
 
+import { Box } from '@/components';
 import { useAuthStore } from '@/core/auth';
 
-import { PadStore, usePadStore } from '../store';
+import { usePadStore } from '../stores';
 import { Pad } from '../types';
 import { randomColor } from '../utils';
 
@@ -13,19 +15,34 @@ interface BlockNoteEditorProps {
 }
 
 export const BlockNoteEditor = ({ pad }: BlockNoteEditorProps) => {
-  const { userData } = useAuthStore();
-  const getProvider = useCallback(
-    (state: PadStore) => {
-      if (!state.providers[pad.id]) {
-        return state.createProvider(pad.id);
-      }
-
-      return state.providers[pad.id];
-    },
-    [pad.id],
+  const { createProvider, padsStore } = usePadStore();
+  const [provider, setProvider] = useState<WebrtcProvider>(
+    padsStore?.[pad.id]?.provider,
   );
 
-  const provider = usePadStore(getProvider);
+  useEffect(() => {
+    if (provider) {
+      return;
+    }
+
+    setProvider(createProvider(pad.id));
+  }, [createProvider, pad.id, provider]);
+
+  if (!provider) {
+    return null;
+  }
+
+  return <BlockNoteContent pad={pad} provider={provider} />;
+};
+
+interface BlockNoteContentProps {
+  pad: Pad;
+  provider: WebrtcProvider;
+}
+
+export const BlockNoteContent = ({ pad, provider }: BlockNoteContentProps) => {
+  const { userData } = useAuthStore();
+  const { setEditor } = usePadStore();
 
   const editor = useCreateBlockNote({
     collaboration: {
@@ -38,5 +55,19 @@ export const BlockNoteEditor = ({ pad }: BlockNoteEditorProps) => {
     },
   });
 
-  return <BlockNoteView editor={editor} />;
+  useEffect(() => {
+    setEditor(pad.id, editor);
+  }, [setEditor, pad.id, editor]);
+
+  return (
+    <Box
+      $css={`
+        &, & > .bn-container, & .ProseMirror {
+          height:100%
+        };
+      `}
+    >
+      <BlockNoteView editor={editor} />
+    </Box>
+  );
 };
diff --git a/src/frontend/apps/impress/src/features/pads/pad/index.tsx b/src/frontend/apps/impress/src/features/pads/pad/index.tsx
index 314dad0c..93eec6ee 100644
--- a/src/frontend/apps/impress/src/features/pads/pad/index.tsx
+++ b/src/frontend/apps/impress/src/features/pads/pad/index.tsx
@@ -1,3 +1,4 @@
 export * from './api';
 export * from './components';
+export * from './stores';
 export * from './types';
diff --git a/src/frontend/apps/impress/src/features/pads/pad/store/usePadStore.tsx b/src/frontend/apps/impress/src/features/pads/pad/store/usePadStore.tsx
deleted file mode 100644
index ab5f5720..00000000
--- a/src/frontend/apps/impress/src/features/pads/pad/store/usePadStore.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { WebrtcProvider } from 'y-webrtc';
-import * as Y from 'yjs';
-import { create } from 'zustand';
-
-import { Pad } from '../types';
-
-export interface PadStore {
-  providers: { [padId: Pad['id']]: WebrtcProvider };
-  createProvider: (padId: Pad['id']) => WebrtcProvider;
-}
-
-const initialState = {
-  providers: {},
-};
-
-export const usePadStore = create<PadStore>((set) => ({
-  providers: initialState.providers,
-  createProvider: (padId: string) => {
-    const provider = new WebrtcProvider(padId, new Y.Doc(), {
-      signaling: [process.env.NEXT_PUBLIC_SIGNALING_URL || ''],
-    });
-
-    set(({ providers }) => {
-      return {
-        providers: {
-          ...providers,
-          [padId]: provider,
-        },
-      };
-    });
-
-    return provider;
-  },
-}));
diff --git a/src/frontend/apps/impress/src/features/pads/pad/store/index.ts b/src/frontend/apps/impress/src/features/pads/pad/stores/index.ts
similarity index 100%
rename from src/frontend/apps/impress/src/features/pads/pad/store/index.ts
rename to src/frontend/apps/impress/src/features/pads/pad/stores/index.ts
diff --git a/src/frontend/apps/impress/src/features/pads/pad/stores/usePadStore.tsx b/src/frontend/apps/impress/src/features/pads/pad/stores/usePadStore.tsx
new file mode 100644
index 00000000..d721c389
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/pads/pad/stores/usePadStore.tsx
@@ -0,0 +1,56 @@
+import { BlockNoteEditor } from '@blocknote/core';
+import { WebrtcProvider } from 'y-webrtc';
+import * as Y from 'yjs';
+import { create } from 'zustand';
+
+import { Pad } from '../types';
+
+export interface PadStore {
+  padsStore: {
+    [padId: Pad['id']]: {
+      provider: WebrtcProvider;
+      editor?: BlockNoteEditor;
+    };
+  };
+  createProvider: (padId: Pad['id']) => WebrtcProvider;
+  setEditor: (padId: Pad['id'], editor: BlockNoteEditor) => void;
+}
+
+const initialState = {
+  padsStore: {},
+};
+
+export const usePadStore = create<PadStore>((set) => ({
+  padsStore: initialState.padsStore,
+  createProvider: (padId: string) => {
+    const provider = new WebrtcProvider(padId, new Y.Doc(), {
+      signaling: [process.env.NEXT_PUBLIC_SIGNALING_URL || ''],
+    });
+
+    set(({ padsStore }) => {
+      return {
+        padsStore: {
+          ...padsStore,
+          [padId]: {
+            provider,
+          },
+        },
+      };
+    });
+
+    return provider;
+  },
+  setEditor: (padId, editor) => {
+    set(({ padsStore }) => {
+      return {
+        padsStore: {
+          ...padsStore,
+          [padId]: {
+            ...padsStore[padId],
+            editor,
+          },
+        },
+      };
+    });
+  },
+}));