diff --git a/tools/devtools/src/devtools/panel/index.tsx b/tools/devtools/src/devtools/panel/index.tsx
index 04ccd3690..56dd67d89 100644
--- a/tools/devtools/src/devtools/panel/index.tsx
+++ b/tools/devtools/src/devtools/panel/index.tsx
@@ -41,6 +41,7 @@ const Panel = () => {
     isLast: true,
   });
   const [selectedEvent, setSelectedEvent] = useState([]);
+  const [hidePresenceTab, setHidePresenceTab] = useState(false);
   const {
     isDragging: isHistoryDragging,
     position: historyH,
@@ -57,6 +58,13 @@ const Panel = () => {
     axis: 'x',
     initial: 300,
   });
+  const documentStyle = hidePresenceTab
+    ? { width: '100%' }
+    : {
+        width: documentW,
+        maxWidth: '90%',
+        borderRight: '1px solid var(--gray-300)',
+      };
 
   useEffect(() => {
     if (events.length === 0) {
@@ -116,6 +124,8 @@ const Panel = () => {
         selectedEvent={selectedEvent}
         selectedEventIndexInfo={selectedEventIndexInfo}
         setSelectedEventIndexInfo={setSelectedEventIndexInfo}
+        hidePresenceTab={hidePresenceTab}
+        setHidePresenceTab={setHidePresenceTab}
       />
       <Separator
         dir={'horizontal'}
@@ -124,15 +134,19 @@ const Panel = () => {
       />
       <div className="devtools-data">
         <SelectedNodeProvider>
-          <Document style={{ width: documentW }} />
+          <Document style={documentStyle} />
         </SelectedNodeProvider>
-        <Separator
-          isDragging={isDocumentDragging}
-          {...documentSeparatorProps}
-        />
-        <SelectedPresenceProvider>
-          <Presence />
-        </SelectedPresenceProvider>
+        {!hidePresenceTab && (
+          <>
+            <Separator
+              isDragging={isDocumentDragging}
+              {...documentSeparatorProps}
+            />
+            <SelectedPresenceProvider>
+              <Presence />
+            </SelectedPresenceProvider>
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/tools/devtools/src/devtools/panel/styles.css b/tools/devtools/src/devtools/panel/styles.css
index 1e2ae0105..656b531ce 100644
--- a/tools/devtools/src/devtools/panel/styles.css
+++ b/tools/devtools/src/devtools/panel/styles.css
@@ -152,9 +152,6 @@
 
 .yorkie-root {
   min-width: 10%;
-  max-width: 90%;
-  width: 60%;
-  border-right: 1px solid var(--gray-300);
 }
 
 .yorkie-presence {
diff --git a/tools/devtools/src/devtools/tabs/History.tsx b/tools/devtools/src/devtools/tabs/History.tsx
index 0f9f04053..dc5460d31 100644
--- a/tools/devtools/src/devtools/tabs/History.tsx
+++ b/tools/devtools/src/devtools/tabs/History.tsx
@@ -63,6 +63,8 @@ export function History({
   selectedEvent,
   selectedEventIndexInfo,
   setSelectedEventIndexInfo,
+  hidePresenceTab,
+  setHidePresenceTab,
 }) {
   const events = useTransactionEvents();
   const [openHistory, setOpenHistory] = useState(false);
@@ -180,6 +182,13 @@ export function History({
                 >
                   ⇥
                 </button>
+                <button
+                  onClick={() => {
+                    setHidePresenceTab((prev: boolean) => !prev);
+                  }}
+                >
+                  {hidePresenceTab ? '¥' : 'Y'}
+                </button>
               </span>
             </span>
           )}