diff --git a/apps/web/app/editor/course/[courseid]/activity/[activityuuid]/edit/page.tsx b/apps/web/app/editor/course/[courseid]/activity/[activityuuid]/edit/page.tsx
index 06483373..672002a1 100644
--- a/apps/web/app/editor/course/[courseid]/activity/[activityuuid]/edit/page.tsx
+++ b/apps/web/app/editor/course/[courseid]/activity/[activityuuid]/edit/page.tsx
@@ -7,6 +7,7 @@ import { getActivityWithAuthHeader } from "@services/courses/activities";
 import { getAccessTokenFromRefreshTokenCookie, getNewAccessTokenUsingRefreshTokenServer } from "@services/auth/auth";
 import { getOrganizationContextInfo, getOrganizationContextInfoWithId } from "@services/organizations/orgs";
 import SessionProvider from "@components/Contexts/SessionContext";
+import EditorOptionsProvider from "@components/Contexts/Editor/EditorContext";
 
 type MetadataProps = {
   params: { orgslug: string, courseid: string, activityid: string };
@@ -38,11 +39,11 @@ const EditActivity = async (params: any) => {
   console.log('courseInfo', courseInfo)
 
   return (
-    <div>
+    <EditorOptionsProvider options={{ isEditable: true }}>
       <SessionProvider>
         <EditorWrapper org={org} course={courseInfo} activity={activity} content={activity.content}></EditorWrapper>
       </SessionProvider>
-    </div>
+    </EditorOptionsProvider>
   );
 }
 
diff --git a/apps/web/components/Contexts/Editor/EditorContext.tsx b/apps/web/components/Contexts/Editor/EditorContext.tsx
index f38f08ff..f39bf2a4 100644
--- a/apps/web/components/Contexts/Editor/EditorContext.tsx
+++ b/apps/web/components/Contexts/Editor/EditorContext.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React, { useState } from 'react'
 
 
diff --git a/apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx
index e6037a5c..914f1a04 100644
--- a/apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx
@@ -1,13 +1,17 @@
+import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
 import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
 import { AlertCircle } from "lucide-react";
 import React from "react";
 import styled from "styled-components";
 
 function InfoCalloutComponent(props: any) {
+  const editorState = useEditorProvider() as any;
+  const isEditable = editorState.isEditable;
+  
   return (
     <NodeViewWrapper>
-      <InfoCalloutWrapper className="flex space-x-2 items-center bg-blue-200 rounded-lg text-blue-900 px-3 shadow-inner" contentEditable={props.extension.options.editable}>
-        <AlertCircle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
+      <InfoCalloutWrapper className="flex space-x-2 items-center bg-blue-200 rounded-lg text-blue-900 px-3 shadow-inner" contentEditable={isEditable}>
+        <AlertCircle /> <NodeViewContent contentEditable={isEditable} className="content" />
       </InfoCalloutWrapper>
     </NodeViewWrapper>
   );
diff --git a/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCallout.ts b/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCallout.ts
index 526e417c..e7911cac 100644
--- a/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCallout.ts
+++ b/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCallout.ts
@@ -8,8 +8,6 @@ export default Node.create({
   group: "block",
   draggable: true,
   content: "text*",
-  marks: "",
-  defining: true,
 
   // TODO : multi line support
 
diff --git a/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx
index d168350c..14338f97 100644
--- a/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx
@@ -1,13 +1,17 @@
+import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
 import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
 import { AlertTriangle } from "lucide-react";
 import React from "react";
 import styled from "styled-components";
 
 function WarningCalloutComponent(props: any) {
+  const editorState = useEditorProvider() as any;
+  const isEditable = editorState.isEditable;
+  
   return (
     <NodeViewWrapper>
-      <CalloutWrapper className="flex space-x-2 items-center bg-yellow-200 rounded-lg text-yellow-900 px-3 shadow-inner" contentEditable={props.extension.options.editable}>
-        <AlertTriangle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
+      <CalloutWrapper className="flex space-x-2 items-center bg-yellow-200 rounded-lg text-yellow-900 px-3 shadow-inner" contentEditable={isEditable}>
+        <AlertTriangle /> <NodeViewContent contentEditable={isEditable} className="content" />
       </CalloutWrapper>
     </NodeViewWrapper>
   );
diff --git a/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
index e34d59f0..7e6ed2ed 100644
--- a/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
@@ -8,10 +8,14 @@ import { UploadIcon } from "@radix-ui/react-icons";
 import { getActivityBlockMediaDirectory } from "@services/media/media";
 import { useOrg } from "@components/Contexts/OrgContext";
 import { useCourse } from "@components/Contexts/CourseContext";
+import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
 
 function ImageBlockComponent(props: any) {
   const org = useOrg() as any;
   const course = useCourse() as any;
+  const editorState = useEditorProvider() as any;
+  
+  const isEditable = editorState.isEditable;
   const [image, setImage] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(false);
   const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
@@ -39,8 +43,8 @@ function ImageBlockComponent(props: any) {
 
   return (
     <NodeViewWrapper className="block-image">
-      {!blockObject && props.extension.options.editable && (
-        <BlockImageWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={props.extension.options.editable}>
+      {!blockObject && isEditable && (
+        <BlockImageWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={isEditable}>
           {isLoading ? (
             <Loader className="animate-spin animate-pulse text-gray-200" size={50} />
           ) : (
diff --git a/apps/web/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx
index 4c2938cb..d7fe11c0 100644
--- a/apps/web/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx
@@ -5,11 +5,13 @@ import "katex/dist/katex.min.css";
 import { InlineMath, BlockMath } from "react-katex";
 import { Edit, Save } from "lucide-react";
 import Link from "next/link";
+import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
 
 function MathEquationBlockComponent(props: any) {
   const [equation, setEquation] = React.useState(props.node.attrs.math_equation);
   const [isEditing, setIsEditing] = React.useState(true);
-  const isEditable = props.extension.options.editable;
+  const editorState = useEditorProvider() as any;
+  const isEditable = editorState.isEditable;
 
   const handleEquationChange = (event: React.ChangeEvent<any>) => {
     setEquation(event.target.value);
diff --git a/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
index b55f935f..4946f762 100644
--- a/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
@@ -8,6 +8,7 @@ import { UploadIcon } from "@radix-ui/react-icons";
 import { getActivityBlockMediaDirectory } from "@services/media/media";
 import { useOrg } from "@components/Contexts/OrgContext";
 import { useCourse } from "@components/Contexts/CourseContext";
+import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
 
 function PDFBlockComponent(props: any) {
   const org = useOrg() as any;
@@ -16,6 +17,8 @@ function PDFBlockComponent(props: any) {
   const [isLoading, setIsLoading] = React.useState(false);
   const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
   const fileId = blockObject ? `${blockObject.content.file_id}.${blockObject.content.file_format}` : null;
+  const editorState = useEditorProvider() as any;
+  const isEditable = editorState.isEditable;
 
   const handlePDFChange = (event: React.ChangeEvent<any>) => {
     setPDF(event.target.files[0]);
@@ -39,7 +42,7 @@ function PDFBlockComponent(props: any) {
   return (
     <NodeViewWrapper className="block-pdf">
       {!blockObject && (
-        <BlockPDFWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={props.extension.options.editable}>
+        <BlockPDFWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={isEditable}>
           {isLoading ? (
             <Loader className="animate-spin animate-pulse text-gray-200" size={50} />
           ) : (
diff --git a/apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx
index c3e350f2..d0cc0db0 100644
--- a/apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx
@@ -4,6 +4,7 @@ import { twJoin, twMerge } from 'tailwind-merge'
 import React from "react";
 import { BadgeHelp, Check, Info, Minus, MoreVertical, Plus, RefreshCcw, X } from "lucide-react";
 import ReactConfetti from "react-confetti";
+import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
 
 interface Answer {
   answer_id: string;
@@ -22,7 +23,8 @@ function QuizBlockComponent(props: any) {
   const [userAnswers, setUserAnswers] = React.useState([]) as [any[], any];
   const [submitted, setSubmitted] = React.useState(false) as [boolean, any];
   const [submissionMessage, setSubmissionMessage] = React.useState("") as [string, any];
-  const isEditable = props.extension.options.editable;
+  const editorState = useEditorProvider() as any;
+  const isEditable = editorState.isEditable;
 
   const handleAnswerClick = (question_id: string, answer_id: string) => {
     // if the quiz is submitted, do nothing
diff --git a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
index 7f5a0b3d..1b597ac8 100644
--- a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
@@ -8,10 +8,13 @@ import { getActivityBlockMediaDirectory } from "@services/media/media";
 import { UploadIcon } from "@radix-ui/react-icons";
 import { useOrg } from "@components/Contexts/OrgContext";
 import { useCourse } from "@components/Contexts/CourseContext";
+import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
 
 function VideoBlockComponents(props: any) {
   const org = useOrg() as any;
   const course = useCourse() as any;
+  const editorState = useEditorProvider() as any;
+  const isEditable = editorState.isEditable;
   const [video, setVideo] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(false);
   const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
@@ -39,7 +42,7 @@ function VideoBlockComponents(props: any) {
   return (
     <NodeViewWrapper className="block-video">
       {!blockObject && (
-        <BlockVideoWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={props.extension.options.editable}>
+        <BlockVideoWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={isEditable}>
           {isLoading ? (
             <Loader className="animate-spin animate-pulse text-gray-200" size={50} />
           ) : (