diff --git a/frontend/src/components/Editor/Editor.tsx b/frontend/src/components/Editor/Editor.tsx
index 7cd2e5a..0c01f68 100644
--- a/frontend/src/components/Editor/Editor.tsx
+++ b/frontend/src/components/Editor/Editor.tsx
@@ -12,7 +12,8 @@ interface EditorProps {
 }
 
 const Editor = ({ providers, permission }: EditorProps) => {
-  const isEditable = permission !== "view";
+  // Default to false (read-only) until permission is loaded
+  const isEditable = permission === "edit";
 
   const editor = useEditor({
     extensions: [
@@ -34,6 +35,13 @@ const Editor = ({ providers, permission }: EditorProps) => {
     editable: isEditable,
   });
 
+  // Update editable state when permission changes
+  useEffect(() => {
+    if (editor) {
+      editor.setEditable(permission === "edit");
+    }
+  }, [editor, permission]);
+
   useEffect(() => {
     if (editor && providers.awareness) {
       const user = providers.awareness.getLocalState()?.user;
diff --git a/frontend/src/pages/EditorPage.tsx b/frontend/src/pages/EditorPage.tsx
index d8bb4eb..54c348b 100644
--- a/frontend/src/pages/EditorPage.tsx
+++ b/frontend/src/pages/EditorPage.tsx
@@ -24,7 +24,7 @@ const EditorPage = () => {
       <div className="page-header">
         <button onClick={() => navigate("/")}>← Back to Home</button>
         <div className="header-actions">
-          {permission === "view" && (
+          {permission !== "edit" && permission !== null && (
             <div className="view-only-badge" style={{ display: 'flex', alignItems: 'center', gap: '4px', padding: '4px 12px', backgroundColor: '#f0f0f0', borderRadius: '4px', fontSize: '14px' }}>
               <span>👁️</span>
               <span>View only</span>