diff --git a/public/counter.html b/public/counter.html
index 7e910cf02..681101db4 100644
--- a/public/counter.html
+++ b/public/counter.html
@@ -48,12 +48,8 @@
 
           // 02. create a document then attach it into the client.
           const doc = new yorkie.Document('counter');
-          doc.subscribe('my-presence', (event) => {
-            if (event.type === 'initialized') {
-              displayOnlineClients(doc.getPresences(), client.getID());
-            }
-          });
-          doc.subscribe('others', (event) => {
+          doc.subscribe('presence', (event) => {
+            if (event.type === 'presence-changed') return;
             displayOnlineClients(doc.getPresences(), client.getID());
           });
 
diff --git a/public/drawing.html b/public/drawing.html
index 7a0cc1ffe..b9d672d2a 100644
--- a/public/drawing.html
+++ b/public/drawing.html
@@ -50,16 +50,12 @@
 
           // 02. create a document then attach it into the client.
           const doc = new yorkie.Document('drawing-panel');
-          doc.subscribe('my-presence', (event) => {
+          doc.subscribe('presence', (event) => {
             displayOnlineClients(doc.getPresences(), client.getID());
-            if (event.type === 'presence-changed' && doc.getRoot().shapes) {
+            if (event.type === 'presence-changed') {
               paintCanvas();
             }
           });
-          doc.subscribe('others', (event) => {
-            displayOnlineClients(doc.getPresences(), client.getID());
-            paintCanvas();
-          });
           await client.attach(doc);
 
           let draftShape = null;
@@ -77,6 +73,7 @@
             context.clearRect(0, 0, 500, 500);
 
             const shapes = doc.getRoot().shapes;
+            if (!shapes) return;
             for (const shape of shapes) {
               context.beginPath();
               let isMoved = false;
diff --git a/public/index.html b/public/index.html
index 0f53308b3..59b90e631 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,9 +28,6 @@
     <script src="./yorkie.js"></script>
     <script src="./util.js"></script>
     <script>
-      const colors = ['#FECEEA', '#FEF1D2', '#A9FDD8', '#D7F8FF', '#CEC5FA'];
-      let nextColorIdx = 0;
-
       const statusHolder = document.getElementById('network-status');
       const placeholder = document.getElementById('placeholder');
       const onlineClientsHolder = document.getElementById(
@@ -40,6 +37,12 @@
       const textLogHolder = document.getElementById('text-log-holder');
       const selectionMap = new Map();
 
+      function getRandomColor() {
+        const colors = ['#FECEEA', '#FEF1D2', '#A9FDD8', '#D7F8FF', '#CEC5FA'];
+        const randomIndex = Math.floor(Math.random() * colors.length);
+        return colors[randomIndex];
+      }
+
       function displayLog(doc, codemirror) {
         logHolder.innerText = doc.toJSON();
 
@@ -83,46 +86,50 @@
         });
       }
 
-      function displayRemoteSelection(cm, change, actor) {
-        let color;
-        if (selectionMap.has(actor)) {
-          const selection = selectionMap.get(actor);
-          color = selection.color;
+      function displayRemoteSelection(cm, doc, user) {
+        const { clientID, presence } = user;
+        if (!presence.selection) return;
+        if (selectionMap.has(clientID)) {
+          const selection = selectionMap.get(clientID);
           selection.marker.clear();
-        } else {
-          color = colors[nextColorIdx];
-          nextColorIdx = (nextColorIdx + 1) % colors.length;
         }
 
-        if (change.from === change.to) {
-          const pos = cm.posFromIndex(change.from);
+        const [from, to] = doc
+          .getRoot()
+          .content.posRangeToIndexRange(presence.selection);
+
+        console.log(
+          `%c remote selection from:${from} to:${to}`,
+          'color: skyblue',
+        );
+
+        if (from === to) {
+          const pos = cm.posFromIndex(from);
           const cursorCoords = cm.cursorCoords(pos);
           const cursorElement = document.createElement('span');
           cursorElement.style.borderLeftWidth = '2px';
           cursorElement.style.borderLeftStyle = 'solid';
-          cursorElement.style.borderLeftColor = color;
+          cursorElement.style.borderLeftColor = presence.color;
           cursorElement.style.marginLeft = cursorElement.style.marginRight =
             '-1px';
           cursorElement.style.height =
             (cursorCoords.bottom - cursorCoords.top) * 0.9 + 'px';
-          cursorElement.setAttribute('data-actor-id', actor);
+          cursorElement.setAttribute('data-actor-id', clientID);
           cursorElement.style.zIndex = 0;
 
-          selectionMap.set(actor, {
-            color: color,
+          selectionMap.set(clientID, {
             marker: cm.setBookmark(pos, {
               widget: cursorElement,
               insertLeft: true,
             }),
           });
         } else {
-          const fromPos = cm.posFromIndex(Math.min(change.from, change.to));
-          const toPos = cm.posFromIndex(Math.max(change.from, change.to));
+          const fromPos = cm.posFromIndex(Math.min(from, to));
+          const toPos = cm.posFromIndex(Math.max(from, to));
 
-          selectionMap.set(actor, {
-            color: color,
+          selectionMap.set(clientID, {
             marker: cm.markText(fromPos, toPos, {
-              css: `background: ${color}`,
+              css: `background: ${presence.color}`,
               insertLeft: true,
             }),
           });
@@ -141,12 +148,14 @@
 
           // 02. create a document then attach it into the client.
           const doc = new yorkie.Document('codemirror');
-          doc.subscribe('my-presence', (event) => {
-            if (event.type === 'initialized') {
-              displayOnlineClients(doc.getPresences(), client.getID());
-            }
+          doc.subscribe('presence', (event) => {
+            if (event.type === 'presence-changed') return;
+            displayOnlineClients(doc.getPresences(), client.getID());
+          });
+
+          await client.attach(doc, {
+            initialPresence: { color: getRandomColor() },
           });
-          await client.attach(doc);
 
           doc.update((root) => {
             if (!root.content) {
@@ -163,28 +172,14 @@
           });
 
           doc.subscribe('others', (event) => {
-            if (event.type === 'watched') {
-              displayOnlineClients(doc.getPresences(), client.getID());
-            } else if (event.type === 'unwatched') {
-              displayOnlineClients(doc.getPresences(), client.getID());
+            if (event.type === 'unwatched') {
               const { clientID } = event.value;
               if (selectionMap.has(clientID)) {
                 const selection = selectionMap.get(clientID);
                 selection.marker.clear();
               }
             } else if (event.type === 'presence-changed') {
-              const { clientID, presence } = event.value;
-              const range = doc
-                .getRoot()
-                .content.posRangeToIndexRange(presence.selection);
-              displayRemoteSelection(
-                codemirror,
-                {
-                  from: range[0],
-                  to: range[1],
-                },
-                clientID,
-              );
+              displayRemoteSelection(codemirror, doc, event.value);
             }
           });
 
@@ -253,7 +248,7 @@
             // NOTE: The following conditional statement ignores cursor changes
             //       that occur while applying remote changes to CodeMirror
             //       and handles only movement by keyboard and mouse.
-            if (!change.origin) {
+            if (change.origin === undefined) {
               return;
             }
 
@@ -289,6 +284,10 @@
           // 05. synchronize text of document and codemirror.
           codemirror.setValue(doc.getRoot().content.toString());
           displayLog(doc, codemirror);
+          for (const user of doc.getPresences()) {
+            if (user.clientID === client.getID()) continue;
+            displayRemoteSelection(codemirror, doc, user);
+          }
         } catch (e) {
           console.error(e);
         }
diff --git a/public/multi.html b/public/multi.html
index 3985629ab..ec95c8b59 100644
--- a/public/multi.html
+++ b/public/multi.html
@@ -92,15 +92,9 @@ <h2>yorkie document</h2>
 
           // 02. create a document then attach it into the client.
           const doc = new yorkie.Document('multi-example');
-          doc.subscribe('my-presence', (event) => {
-            if (event.type === 'initialized') {
-              displayOnlineClients(doc.getPresences(), client.getID());
-            }
-          });
-          doc.subscribe('others', (event) => {
-            if (event.type === 'watched' || event.type === 'unwatched') {
-              displayOnlineClients(doc.getPresences(), client.getID());
-            }
+          doc.subscribe('presence', (event) => {
+            if (event.type === 'presence-changed') return;
+            displayOnlineClients(doc.getPresences(), client.getID());
           });
 
           doc.subscribe((event) => {
@@ -261,23 +255,9 @@ <h2>yorkie document</h2>
           });
           doc.subscribe('others', (event) => {
             if (event.type === 'unwatched') {
-              const { clientID } = event.value;
-              cursors.removeCursor(doc.getPresence(clientID).username);
+              cursors.removeCursor(event.value.presence.username);
             } else if (event.type === 'presence-changed') {
-              const { clientID, presence } = event.value;
-              const range = doc
-                .getRoot()
-                .content.posRangeToIndexRange(presence.selection);
-
-              cursors.createCursor(
-                presence.username,
-                presence.username,
-                colorHash.hex(presence.username),
-              );
-              cursors.moveCursor(presence.username, {
-                index: range[0],
-                length: range[1] - range[0],
-              });
+              displayRemoteCursor(event.value);
             }
           });
 
@@ -305,6 +285,19 @@ <h2>yorkie document</h2>
             theme: 'snow',
           });
           const cursors = quill.getModule('cursors');
+          function displayRemoteCursor(user) {
+            const {
+              clientID: id,
+              presence: { username, selection },
+            } = user;
+            if (!selection || id === client.getID()) return;
+            const range = doc.getRoot().content.posRangeToIndexRange(selection);
+            cursors.createCursor(username, username, colorHash.hex(username));
+            cursors.moveCursor(username, {
+              index: range[0],
+              length: range[1] - range[0],
+            });
+          }
 
           // 05-1. Quill to Document.
           quill
@@ -369,8 +362,13 @@ <h2>yorkie document</h2>
                   to = from + op.delete;
                   console.log(`%c local: ${from}-${to}: ''`, 'color: green');
 
-                  doc.update((root) => {
-                    root.content.edit(from, to, '');
+                  doc.update((root, presence) => {
+                    const range = root.content.edit(from, to, '');
+                    if (range) {
+                      presence.set({
+                        selection: root.content.indexRangeToPosRange(range),
+                      });
+                    }
                   }, `update content by ${client.getID()}`);
                 } else if (op.retain !== undefined) {
                   from = to + op.retain;
@@ -459,7 +457,6 @@ <h2>yorkie document</h2>
           // 05-3. synchronize text of document and Quill.
           function syncText() {
             const text = doc.getRoot().content;
-
             const delta = {
               ops: text.values().map((val) => toDeltaOperation(val)),
             };
@@ -470,6 +467,9 @@ <h2>yorkie document</h2>
           displayCount();
           displayTodos();
           displayLog();
+          for (const user of doc.getPresences()) {
+            displayRemoteCursor(user);
+          }
         } catch (e) {
           console.error(e);
         }
diff --git a/public/quill.html b/public/quill.html
index f7503ba1b..e25673fb4 100644
--- a/public/quill.html
+++ b/public/quill.html
@@ -71,15 +71,9 @@
 
           // 02. create a document then attach it into the client.
           const doc = new yorkie.Document(documentKey);
-          doc.subscribe('my-presence', (event) => {
-            if (event.type === 'initialized') {
-              displayOnlineClients(doc.getPresences(), client.getID());
-            }
-          });
-          doc.subscribe('others', (event) => {
-            if (event.type === 'watched' || event.type === 'unwatched') {
-              displayOnlineClients(doc.getPresences(), client.getID());
-            }
+          doc.subscribe('presence', (event) => {
+            if (event.type === 'presence-changed') return;
+            displayOnlineClients(doc.getPresences(), client.getID());
           });
 
           await client.attach(doc, {
@@ -110,23 +104,9 @@
           });
           doc.subscribe('others', (event) => {
             if (event.type === 'unwatched') {
-              const { clientID, presence } = event.value;
-              cursors.removeCursor(presence.username);
+              cursors.removeCursor(event.value.presence.username);
             } else if (event.type === 'presence-changed') {
-              const { clientID, presence } = event.value;
-              const range = doc
-                .getRoot()
-                .content.posRangeToIndexRange(presence.selection);
-
-              cursors.createCursor(
-                presence.username,
-                presence.username,
-                colorHash.hex(presence.username),
-              );
-              cursors.moveCursor(presence.username, {
-                index: range[0],
-                length: range[1] - range[0],
-              });
+              displayRemoteCursor(event.value);
             }
           });
 
@@ -158,6 +138,20 @@
           });
           const cursors = quill.getModule('cursors');
 
+          function displayRemoteCursor(user) {
+            const {
+              clientID: id,
+              presence: { username, selection },
+            } = user;
+            if (!selection || id === client.getID()) return;
+            const range = doc.getRoot().content.posRangeToIndexRange(selection);
+            cursors.createCursor(username, username, colorHash.hex(username));
+            cursors.moveCursor(username, {
+              index: range[0],
+              length: range[1] - range[0],
+            });
+          }
+
           // 04. bind the document with the Quill.
           // 04-1. Quill to Document.
           quill
@@ -300,16 +294,6 @@
 
                   deltaOperations.push(deltaOp);
                 }
-              } else if (op.type === 'select') {
-                cursors.createCursor(
-                  actorName,
-                  actorName,
-                  colorHash.hex(actorName),
-                );
-                cursors.moveCursor(actorName, {
-                  index: from,
-                  length: retainTo,
-                });
               }
 
               prevTo = to;
@@ -335,6 +319,9 @@
 
           syncText();
           displayLog(documentElem, documentTextElem, doc);
+          for (const user of doc.getPresences()) {
+            displayRemoteCursor(user);
+          }
         } catch (e) {
           console.error(e);
         }