diff --git a/index.html b/index.html
index d82fbea..eb3ae80 100644
--- a/index.html
+++ b/index.html
@@ -42,20 +42,7 @@
 
         </a>
         <nav class="py-0 flex flex-wrap items-center text-base absolute right-0">
-        <!-- 
-          <div id="blinkers" class="flex flex-row space-x-2 pr-4 pb-1.5 justify-center items-center">
-            <p id="blinker-1" class="text-white text-5xl">•</p>
-            <p id="blinker-2" class="text-white text-5xl">•</p>
-            <p id="blinker-3" class="text-white text-5xl">•</p>
-            <p id="blinker-4" class="text-white text-5xl">•</p>
-            <p id="blinker-5" class="text-white text-5xl">•</p>
-            <p id="blinker-6" class="text-white text-5xl">•</p>
-            <p id="blinker-7" class="text-white text-5xl">•</p>
-            <p id="blinker-8" class="text-white text-5xl">•</p>
-            <p id="blinker-9" class="text-white text-5xl">•</p>
-          </div>
-          -->
-          <a id="play-button-1" class="mr-5">
+         <a id="play-button-1" class="mr-5">
             <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 14 16">
               <path d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z"/>
             </svg>
@@ -75,11 +62,39 @@
               <path d="M7.958 19.393a7.7 7.7 0 0 1-6.715-3.439c-2.868-4.832 0-9.376.944-10.654l.091-.122a3.286 3.286 0 0 0 .765-3.288A1 1 0 0 1 4.6.8c.133.1.313.212.525.347A10.451 10.451 0 0 1 10.6 9.3c.5-1.06.772-2.213.8-3.385a1 1 0 0 1 1.592-.758c1.636 1.205 4.638 6.081 2.019 10.441a8.177 8.177 0 0 1-7.053 3.795Z"/>
             </svg>
           </a>
+          <a id="doc-button-1" class="mr-5 hover:text-gray-900">
+            <svg class="w-8 h-8 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
+              <path d="M9 1.334C7.06.594 1.646-.84.293.653a1.158 1.158 0 0 0-.293.77v13.973c0 .193.046.383.134.55.088.167.214.306.366.403a.932.932 0 0 0 .5.147c.176 0 .348-.05.5-.147 1.059-.32 6.265.851 7.5 1.65V1.334ZM19.707.653C18.353-.84 12.94.593 11 1.333V18c1.234-.799 6.436-1.968 7.5-1.65a.931.931 0 0 0 .5.147.931.931 0 0 0 .5-.148c.152-.096.279-.235.366-.403.088-.167.134-.357.134-.55V1.423a1.158 1.158 0 0 0-.293-.77Z"/>
+            </svg>
+          </a>
         </nav>
         </nav>
       </div>
     </header>
 
+    <div id="documentation" class="hidden">
+      <div class="text-sm font-medium text-center text-gray-200 border-b border-gray-200 ">
+        <ul class="flex flex-wrap -mb-px">
+          <li class="mr-2">
+            <a href="#" class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-white hover:border-gray-100 ">Basics</a>
+          </li>
+          <li class="mr-2">
+            <a href="#" class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-white hover:border-gray-100 ">Universes</a>
+          </li>
+          <li class="mr-2">
+            <a href="#" class="inline-block p-4 text-white border-b-2 border-blue-600 rounded-t-lg active" aria-current="page">Notes and sounds</a>
+          </li>
+          <li class="mr-2">
+            <a href="#" class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-white hover:border-gray-100">Functions</a>
+          </li>
+          <li class="mr-2">
+            <a href="#" class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-white hover:border-gray-100">Reference</a>
+          </li>
+       </ul>
+      </div>
+      <p class="text-xl text-white ml-4 mr-4 mt-4">There is nothing to see! Come back later!</p>
+    </div>
+
     <div id="app">
 
       <!-- This modal is used for switching between buffers -->
@@ -151,7 +166,6 @@
               <div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4">
                 <button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4  font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>
               </div>
-
             </div>
           </div>
         </div>
diff --git a/src/Evaluator.ts b/src/Evaluator.ts
index 9e7a87c..ff21cf1 100644
--- a/src/Evaluator.ts
+++ b/src/Evaluator.ts
@@ -52,7 +52,6 @@ export const tryEvaluate = async (
         tryCatchWrapper(application, wrappedCode as string),
         delay(timeout),
       ]);
-
       if (isCodeValid) {
         code.committed = code.candidate;
         const newFunction = new Function(`"use strict";try{${wrappedCode}} catch (e) {console.log(e)};`);
diff --git a/src/main.ts b/src/main.ts
index 62e38d7..fffab31 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -64,6 +64,7 @@ export class Editor {
     document.getElementById("clear-button-1") as HTMLButtonElement,
     document.getElementById("clear-button-2") as HTMLButtonElement,
   ];
+  documentation_button: HTMLButtonElement = document.getElementById("doc-button-1") as HTMLButtonElement;
 
   // Script selection elements
   local_button: HTMLButtonElement = document.getElementById(
@@ -269,6 +270,12 @@ export class Editor {
         this.view.focus();
       }
 
+      if (event.ctrlKey && event.key === "d") {
+        event.preventDefault();
+        this.showDocumentation();
+      }
+
+
       if (event.ctrlKey && event.key === "i") {
         event.preventDefault();
         this.changeModeFromInterface("init");
@@ -333,6 +340,10 @@ export class Editor {
       });
     });
 
+    this.documentation_button.addEventListener("click", () => {
+      this.showDocumentation();
+    })
+
     this.pause_buttons.forEach((button) => {
       button.addEventListener("click", () => {
         this.setButtonHighlighting("pause", true);
@@ -454,6 +465,16 @@ export class Editor {
     return this.universes[this.selected_universe.toString()].locals[this.local_index];
   }
 
+  showDocumentation() {
+      if (document.getElementById("app")?.classList.contains("hidden")) {
+        document.getElementById('app')?.classList.remove('hidden');
+        document.getElementById('documentation')?.classList.add('hidden');
+      } else {
+        document.getElementById('app')?.classList.add('hidden');
+        document.getElementById('documentation')?.classList.remove('hidden');
+      }
+  }
+
   changeToLocalBuffer(i: number) {
     // Updating the CSS accordingly
     const tabs = document.querySelectorAll('[id^="tab-"]');