diff --git a/apps/web/components/Objects/Editor/EditorWrapper.tsx b/apps/web/components/Objects/Editor/EditorWrapper.tsx
index 860beeae..b3221771 100644
--- a/apps/web/components/Objects/Editor/EditorWrapper.tsx
+++ b/apps/web/components/Objects/Editor/EditorWrapper.tsx
@@ -14,7 +14,8 @@ import { IndexeddbPersistence } from 'y-indexeddb'
 import { getCollaborationServerUrl } from '@services/config/config'
 import randomColor from 'randomcolor'
 import MouseMovements from './MouseMovements'
-import { v4 as uuidv4 } from 'uuid';
+import { v4 as uuidv4 } from 'uuid'
+import { debounce } from '@/lib/utils'
 
 interface EditorWrapperProps {
   content: string
@@ -25,73 +26,75 @@ interface EditorWrapperProps {
 
 function EditorWrapper(props: EditorWrapperProps): JSX.Element {
   const session = useLHSession() as any
-  const access_token = session?.data?.tokens?.access_token;
+  const access_token = session?.data?.tokens?.access_token
   // Define provider in the state
-  const [provider, setProvider] = React.useState<HocuspocusProvider | null>(null);
-  const [thisPageColor, setThisPageColor] = useState(randomColor({ luminosity: 'light' }) as string)
-  let uuid = uuidv4();
-  const [onlinePageInstanceID, setOnlinePageInstanceID] = useState(uuid as string)
-
+  const [provider, setProvider] = React.useState<HocuspocusProvider | null>(
+    null
+  )
+  const [thisPageColor, setThisPageColor] = useState(
+    randomColor({ luminosity: 'light' }) as string
+  )
+  let uuid = uuidv4()
+  const [onlinePageInstanceID, setOnlinePageInstanceID] = useState(
+    uuid as string
+  )
 
   /*  Collaboration Features */
   const collab = getCollaborationServerUrl()
-  const isCollabEnabledOnThisOrg = props.org.config.config.features.collaboration.enabled && collab
+  const isCollabEnabledOnThisOrg =
+    props.org.config.config.features.collaboration.enabled && collab
   const doc = new Y.Doc()
   // mouse movement
-  const [mouseMovements, setMouseMovements] = useState({} as any);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const [mouseMovements, setMouseMovements] = useState({} as any)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 
   const debouncedSetMouseMovements = (newMovements: any) => {
     if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
+      clearTimeout(timeoutRef.current)
     }
 
     timeoutRef.current = setTimeout(() => {
-      setMouseMovements(newMovements);
-    }, 10);
-  };
-
+      setMouseMovements(newMovements)
+    }, 10)
+  }
 
   // Store the Y document in the browser
   new IndexeddbPersistence(props.activity.activity_uuid, doc)
 
-  document.addEventListener("mousemove", (event) => {
-    // Share any information you like
-    provider?.setAwarenessField("userMouseMovement", {
-      user: session.data.user,
+  document.addEventListener('mousemove', debounce((event: MouseEvent) => {
+    provider?.setAwarenessField('userMouseMovement', {
+      user: session.user,
       mouseX: event.clientX,
       mouseY: event.clientY,
       color: thisPageColor,
-      onlineInstanceID: onlinePageInstanceID
-    });
-  });
-
+      onlineInstanceID: onlinePageInstanceID,
+    })
+  }, 300))
 
   async function setContent(content: any) {
     let activity = props.activity
     activity.content = content
 
-
-    provider?.setAwarenessField("savings_states", {
+    provider?.setAwarenessField('savings_states', {
       [session.data.user.user_uuid]: {
         status: 'action_save',
         timestamp: new Date().toISOString(),
-        user: session.data.user
-      }
-    });
-
-    toast.promise(updateActivity(activity, activity.activity_uuid, access_token), {
-      loading: 'Saving...',
-      success: <b>Activity saved!</b>,
-      error: <b>Could not save.</b>,
+        user: session.data.user,
+      },
     })
+
+    toast.promise(
+      updateActivity(activity, activity.activity_uuid, access_token),
+      {
+        loading: 'Saving...',
+        success: <b>Activity saved!</b>,
+        error: <b>Could not save.</b>,
+      }
+    )
   }
 
-
-
-
   // Create a ref to store the last save timestamp of each user
-  const lastSaveTimestampRef = useRef({}) as any;
+  const lastSaveTimestampRef = useRef({}) as any
 
   useEffect(() => {
     // Check if provider is not already set
@@ -104,18 +107,18 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
         // TODO(alpha code): This whole block of code should be improved to something more efficient and less hacky
         onConnect: () => {
           // Set the online page instance ID
-          setOnlinePageInstanceID(uuidv4());
+          setOnlinePageInstanceID(uuidv4())
 
           // Set the user color
-          setThisPageColor(randomColor({ luminosity: 'light' }) as string);
+          setThisPageColor(randomColor({ luminosity: 'light' }) as string)
         },
 
         onAwarenessUpdate: ({ states }) => {
-          const usersStates = states;
+          const usersStates = states
           /* Showing user mouse movement */
           usersStates.forEach((userState: any) => {
             if (userState.userMouseMovement) {
-              const userMouseMovement = userState.userMouseMovement;
+              const userMouseMovement = userState.userMouseMovement
 
               // Update the mouse movements state
               debouncedSetMouseMovements((prevMovements: any) => {
@@ -126,15 +129,12 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
                     mouseX: userMouseMovement.mouseX,
                     mouseY: userMouseMovement.mouseY,
                     color: userMouseMovement.color,
-                    onlinePageInstanceID: userMouseMovement.onlineInstanceID
+                    onlinePageInstanceID: userMouseMovement.onlineInstanceID,
                   },
-                };
-              }
-              );
-
+                }
+              })
             }
-          });
-
+          })
 
           /*  Notifiying if a user has saved course content */
           usersStates.forEach((userState: any) => {
@@ -142,59 +142,68 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
               const savingsState = userState.savings_states
 
               // Check if a user has saved the document
-              Object.keys(savingsState).forEach(user => {
-                const userObj = savingsState[user].user;
-                const status = savingsState[user].status;
-                const timestamp = savingsState[user].timestamp;
+              Object.keys(savingsState).forEach((user) => {
+                const userObj = savingsState[user].user
+                const status = savingsState[user].status
+                const timestamp = savingsState[user].timestamp
 
                 // Get the current timestamp
-                const currentTimestamp = new Date().getTime();
+                const currentTimestamp = new Date().getTime()
 
                 // If the user has saved the document and the timestamp is close to the current timestamp, show the toast
-                if (status === 'action_save' && Math.abs(currentTimestamp - new Date(timestamp).getTime()) < 10) { // 5000 milliseconds = 5 seconds
+                if (
+                  status === 'action_save' &&
+                  Math.abs(currentTimestamp - new Date(timestamp).getTime()) <
+                    10
+                ) {
+                  // 5000 milliseconds = 5 seconds
                   // Update the last save timestamp for this user
-                  lastSaveTimestampRef.current[user] = timestamp;
+                  lastSaveTimestampRef.current[user] = timestamp
 
-                  toast.success(`${userObj.first_name} ${userObj.last_name} has saved the document`);
+                  toast.success(
+                    `${userObj.first_name} ${userObj.last_name} has saved the document`
+                  )
                 }
-              });
+              })
             }
           })
         },
-      });
+      })
 
       // Set the new provider
-      setProvider(newProvider);
+      setProvider(newProvider)
     }
-  }, []);
-
+  }, [])
 
   {
     return (
       <>
         <Toast></Toast>
-        <MouseMovements org={props.org} movements={mouseMovements} onlinePageInstanceID={onlinePageInstanceID} />
+        <MouseMovements
+          org={props.org}
+          movements={mouseMovements}
+          onlinePageInstanceID={onlinePageInstanceID}
+        />
         <OrgProvider orgslug={props.org.slug}>
-          {!session.isLoading && (<Editor
-            org={props.org}
-            course={props.course}
-            activity={props.activity}
-            content={props.content}
-            setContent={setContent}
-            session={session}
-            ydoc={doc}
-            hocuspocusProvider={provider}
-            isCollabEnabledOnThisOrg={isCollabEnabledOnThisOrg}
-            userRandomColor={thisPageColor}
-            mouseMovements={mouseMovements}
-          ></Editor>)}
+          {!session.isLoading && (
+            <Editor
+              org={props.org}
+              course={props.course}
+              activity={props.activity}
+              content={props.content}
+              setContent={setContent}
+              session={session}
+              ydoc={doc}
+              hocuspocusProvider={provider}
+              isCollabEnabledOnThisOrg={isCollabEnabledOnThisOrg}
+              userRandomColor={thisPageColor}
+              mouseMovements={mouseMovements}
+            ></Editor>
+          )}
         </OrgProvider>
       </>
     )
   }
 }
 
-
-
 export default EditorWrapper
-