diff --git a/package.json b/package.json
index 48d1fbe..e2a287b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docusaurus-graph",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "main": "src/index.ts",
   "repository": "https://github.com/Arsero/docusaurus-graph.git",
   "author": "Arsero <54241944+Arsero@users.noreply.github.com>",
diff --git a/src/theme/templates.ts b/src/theme/templates.ts
index 589cf73..6a2ba10 100644
--- a/src/theme/templates.ts
+++ b/src/theme/templates.ts
@@ -38,7 +38,7 @@ const templates = {
     left: 50%;
     transform: translate(-50%, -50%);
     padding: 20px;
-    background-color: white;
+    background-color: var(--ifm-background-surface-color);
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     z-index: 2;
@@ -85,10 +85,20 @@ const templates = {
         <path d="M896 712.533333m-61.866667 0a61.866667 61.866667 0 1 0 123.733334 0 61.866667 61.866667 0 1 0-123.733334 0Z"></path>
         <path d="M825.6 772.266667c-74.666667 89.6-187.733333 147.2-313.6 147.2-93.866667 0-181.333333-32-249.6-87.466667-10.666667 19.2-25.6 34.133333-44.8 44.8C298.666667 942.933333 401.066667 981.333333 512 981.333333c149.333333 0 281.6-70.4 366.933333-177.066666-21.333333-4.266667-40.533333-17.066667-53.333333-32zM142.933333 684.8c-25.6-53.333333-38.4-110.933333-38.4-172.8C104.533333 288 288 104.533333 512 104.533333S919.466667 288 919.466667 512c0 36.266667-6.4 72.533333-14.933334 106.666667 23.466667 2.133333 42.666667 10.666667 57.6 25.6 12.8-42.666667 19.2-87.466667 19.2-132.266667 0-258.133333-211.2-469.333333-469.333333-469.333333S42.666667 253.866667 42.666667 512c0 74.666667 17.066667 142.933333 46.933333 204.8 14.933333-14.933333 32-27.733333 53.333333-32z"></path>
       </svg>
+      <span class="graph-only" style="margin-left: 1rem; font-size: 1rem">Graph View</span>
     </button>
+    <style>
+    @media only screen and (min-width: 997px) {
+      .graph-only {
+        display: none;
+      }
+    }
+    </style>
     `,
   scriptGraph: `
     let graphViewGlobal = null;
+    let isOpen = false;
+
     async function initGraphView() {
       const notes = await (
         await fetch('/docusaurus-graph.json')
@@ -111,21 +121,31 @@ const templates = {
     const graphContainer = document.getElementById('graph-container');
     const graphOverlay = document.getElementById('graph-overlay');
 
-    function openGraph() {
-      graphContainer.style.display = 'block';
-      graphOverlay.style.display = 'block';
-      graphViewGlobal.forceGraph.zoomToFit(1000, 20);
-    }
-
     graphOverlay.addEventListener('click', closeGraph);
     function closeGraph() {
       graphContainer.style.display = 'none';
       graphOverlay.style.display = 'none';
     }
+
+    function openGraph() {
+      if(isOpen === true) {
+        closeGraph();
+        isOpen = false;
+      } else {
+        if(window.innerWidth >= 800 && window.innerHeight >= 720) {
+          graphContainer.style.display = 'block';
+          graphOverlay.style.display = 'block';
+          graphViewGlobal.forceGraph.zoomToFit(1000, 20);
+          isOpen = true;
+        } else {
+          alert('Your screen size must be greater than 800x720.');
+        }
+      }
+    }
     `,
   containerGraph: `
     <div id="graph-overlay"></div>
-    <div id="graph-container" style="color:black">
+    <div id="graph-container">
       <div id="close-graph-btn" onclick="closeGraph()">
         <div style="padding: 5px">X</div>
       </div>