diff --git a/demo/index.html b/demo/index.html
index 910397c3..33389ae9 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -15,42 +15,90 @@
   </head>
   <body>
     <h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
-    <div id="terminal-container"></div>
-    <div>
-      <h3>Options</h3>
-      <p>These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.setOption</code> function.</p>
-      <div id="options-container"></div>
-    </div>
-    <div>
-      <h3>Addons</h3>
-      <p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
-      <div id="addons-container"></div>
-      <h3>Addons Control</h3>
-      <h4>SearchAddon</h4>
-      <p>
-        <label>Find next <input id="find-next"/></label>
-        <label>Find previous <input id="find-previous"/></label>
-        <label>Use regex<input type="checkbox" id="regex"/></label>
-        <label>Case sensitive<input type="checkbox" id="case-sensitive"/></label>
-        <label>Whole word<input type="checkbox" id="whole-word"/></label>
-      </p>
-      <h4>SerializeAddon</h4>
-      <p>
-        <button id="serialize">Serialize the content of terminal</button>
-        <label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
-        <div><pre id="serialize-output"></pre></div>
-      </p>
-    </div>
-    <div>
-      <h3>Style</h3>
-      <div style="display: inline-block; margin-right: 16px;">
-        <label for="padding">Padding</label>
-        <input type="number" id="padding" />
+    <div id="container">
+      <div id="grid">
+        <div id="terminal-container"></div>
+      </div>
+      <div id="grid">
+        <div class="tab">
+          <button id= "optionsbutton" class="tabLinks" onclick="openSection(event, 'options')">Options</button>
+          <button id= "addonsbutton" class="tabLinks" onclick="openSection(event, 'addons')">Addons</button>
+          <button id= "stylebutton" class="tabLinks" onclick="openSection(event, 'style')">Style</button>
+          <button id= "testbutton" class="tabLinks" onclick="openSection(event, 'test')">Test</button>
+        </div>
+        <div id="options" class="tabContent">
+          <h3>Options</h3>
+          <p>These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.setOption</code> function.</p>
+          <div id="options-container"></div>
+        </div>
+        <div id="addons" class="tabContent">
+          <h3>Addons</h3>
+          <p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
+          <div id="addons-container"></div>
+          <h3>Addons Control</h3>
+          <h4>SearchAddon</h4>
+          <div style= "display:flex; flex-direction:column;">
+            <label>Find next <input id="find-next"/></label>
+            <label>Find previous <input id="find-previous"/></label>
+            <label><input type="checkbox" id="regex"/>Use regex</label>
+            <label><input type="checkbox" id="case-sensitive"/>Case sensitive</label>
+            <label><input type="checkbox" id="whole-word"/>Whole word</label>
+          </div>
+          <h4>SerializeAddon</h4>
+          <div>
+            <button id="serialize">Serialize the content of terminal</button>
+            <label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
+            <div><pre id="serialize-output"></pre></div>
+          </div>
+        </div>
+        <div id="style" class="tabContent">
+          <h3>Style</h3>
+          <div style="display: inline-block; margin-right: 16px;">
+            <label for="padding">Padding</label>
+            <input type="number" id="padding" />
+          </div>
+        </div>
+        <div id="test" class="tabContent">
+          <h3>Test</h3>
+          <div style="display: inline-block; margin-right: 16px;">
+            <button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
+            <button id="custom-glyph" title="Write custom box drawing and block element characters to the terminal">Test custom glyphs</button>
+          </div>
+        </div>
       </div>
     </div>
-    <hr/>
-    <button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
-    <button id="custom-glyph" title="Write custom box drawing and block element characters to the terminal">Test custom glyphs</button>
-    <script src="dist/client-bundle.js" defer ></script>
-  </body>
+      <script src="dist/client-bundle.js" defer ></script>
+      <script>
+      var tab = localStorage.getItem("tab");
+
+        if(tab === null){
+            document.getElementById("options").style.display = "block";
+            document.getElementById("optionsbutton").classList.add("active");
+        }
+        else {
+          const tabContent = document.getElementsByClassName("tabContent");
+          let itr;
+          for (itr = 0; itr < tabContent.length; itr+=1) {
+            tabContent[itr].style.display = "none";
+          }
+          document.getElementById(""+tab+"").style.display = "block";
+          document.getElementById(""+tab+"button").classList.add("active");
+        }
+        function openSection(event, section) {
+          const tabContent = document.getElementsByClassName("tabContent");
+          let itr;
+          for (itr = 0; itr < tabContent.length; itr+=1) {
+            tabContent[itr].style.display = "none";
+          }
+          const tabLinks = document.getElementsByClassName("tabLinks");
+          for (itr = 0; itr < tabLinks.length; itr+=1) {
+            tabLinks[itr].className = tabLinks[itr].className.replace(" active", "");
+          }
+          document.getElementById(section).style.display = "block";
+          localStorage.setItem("tab", section);
+          event.currentTarget.className += " active";
+        }
+
+      </script>
+    </body>
 </html>
diff --git a/demo/style.css b/demo/style.css
index 9c5fd0bd..cebd08e0 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -41,3 +41,52 @@ pre {
     word-wrap: break-word;
     white-space: pre-wrap;
 }
+
+
+#container {
+    display: flex;
+    height: 75vh;
+}
+#grid {
+    flex: 1;
+    /* max-height: 80vh;
+    overflow-y: auto; */
+    width: 100%;
+}
+.tab {
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+}
+
+/* Style the buttons inside the tab */
+.tab button {
+    background-color: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+    font-size: 17px;
+}
+
+/* Change background color of buttons on hover */
+.tab button:hover {
+    background-color: #ddd;
+}
+
+/* Create an active/current tablink class */
+.tab button.active {
+    background-color: #ccc;
+  }
+
+/* Style the tab content */
+.tabContent {
+    display: none;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-top: none;
+    max-height: 100vh;
+    overflow-y: auto;
+}
