diff --git a/.coderabbit.yaml b/.coderabbit.yaml
index 74b51b881dd3..ea94b5330b59 100644
--- a/.coderabbit.yaml
+++ b/.coderabbit.yaml
@@ -32,4 +32,4 @@ knowledge_base:
   issues:
     scope: "local"
   pull_requests:
-    scope: "local"
+    scope: "local"
\ No newline at end of file
diff --git a/components/docs/Visualizer.tsx b/components/docs/Visualizer.tsx
index 504045117e3e..3a9de1a9b1a0 100644
--- a/components/docs/Visualizer.tsx
+++ b/components/docs/Visualizer.tsx
@@ -1,7 +1,7 @@
 import 'schyma/dist/esm/style.css';
 
 import type { JSONSchema7Object } from 'json-schema';
-import React from 'react';
+import React, { useState } from 'react';
 import Schyma from 'schyma';
 
 import schema from '../../config/3.0.0.json';
@@ -12,8 +12,18 @@ const typeSchema = schema as unknown as JSONSchema7Object;
  * @description This component renders the spec explorer.
  */
 function Visualizer() {
+  const [showMap, setShowMap] = useState(false);
+
   return (
-    <div>
+    <div className={`visualizer-container ${showMap ? 'show-map' : ''}`}>
+      <div className='mobile-toggle px-4'>
+        <button
+          onClick={() => setShowMap(!showMap)}
+          className='bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded mb-2 mt-4 w-full'
+        >
+          {showMap ? 'Hide Visual Map' : 'Show Visual Map'}
+        </button>
+      </div>
       <Schyma
         title='AsyncAPI Specification'
         description="The AsyncAPI Specification defines a set of fields that can be used in an
diff --git a/components/layout/DocsLayout.tsx b/components/layout/DocsLayout.tsx
index c5d00b91c3a1..d54a1b29c5f2 100644
--- a/components/layout/DocsLayout.tsx
+++ b/components/layout/DocsLayout.tsx
@@ -97,7 +97,7 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou
   if (router.pathname.includes('v3.0.0-explorer')) {
     return (
       <div>
-        <div className='absolute left-2 top-24 z-10'>
+        <div className='hidden md:block absolute left-2 top-24 z-10'>
           <Button
             className='inline-flex h-full justify-center rounded-md border border-gray-300 bg-white py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black'
             text='Menu'
diff --git a/styles/globals.css b/styles/globals.css
index fdd372ee9a48..8710c92434c8 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -345,4 +345,62 @@ abbr[title] {
 
 select {
   cursor:pointer;
+}
+
+@media (max-width: 768px) {
+
+  .visualizer-container {
+    overflow-x: hidden;
+  }
+  
+  .visualizer-container .body-wrapper {
+    display: flex !important;
+    flex-direction: column !important;
+    width: 100% !important;
+    height: auto !important;
+    min-height: 0 !important;
+  }
+
+  .visualizer-container .node-container {
+    display: none;
+    width: 125% !important;
+    height: 75vh !important;
+    border-right: none !important;
+    border-bottom: 2px solid #e5e7eb;
+    margin-bottom: -15% !important;
+    transform: scale(0.8);
+    transform-origin: top left;
+  }
+
+  .visualizer-container.show-map .node-container {
+    display: block;
+  }
+
+  .visualizer-container .panel {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    height: auto !important;
+    padding: 1rem !important;
+    overflow-x: hidden;
+    overflow-y: visible !important;
+  }
+
+  .visualizer-container .panel h1,
+  .visualizer-container .panel h2,
+  .visualizer-container .panel p {
+    word-break: break-word;
+    white-space: normal;
+  }
+
+  .visualizer-container .panel pre {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+}
+
+@media (min-width: 769px) {
+  .mobile-toggle {
+    display: none;
+  }
 }
\ No newline at end of file