diff --git a/src/app.html b/src/app.html
index 750b237..670ca5e 100644
--- a/src/app.html
+++ b/src/app.html
@@ -17,6 +17,7 @@
 			}
 			body {
 				color: black;
+				overflow-x: hidden;
 			}
 			body.dark {
 				color: white;
@@ -116,7 +117,7 @@
 			<p style="margin-block: 0;">EaglerForge Builder is currently in development, some project files may break due to code changing all the time.</p>
 			<button
 				style="margin: 0; margin-left: 8px; background: transparent; border: 0; outline: 0; padding: 0; cursor: pointer;"
-				onclick="document.getElementById('Zm5BSEgzQW5HeW9yZkFkNEhpbGJiamtpZmdoOGNDc2lMR29JSzF0K2JnPT0=').remove()"
+				onclick="closeAlert()"
 			>
 				<img width="24" height="24" src="/images/close.svg">
 			</button>
@@ -127,7 +128,7 @@
 
 			// if localhost, get rid of the alert
 			const isLocalHost = location.hostname === 'localhost';
-			if (isLocalHost) {
+			if (isLocalHost || localStorage.getItem('alert_closed')) {
 				const alert = document.getElementById('Zm5BSEgzQW5HeW9yZkFkNEhpbGJiamtpZmdoOGNDc2lMR29JSzF0K2JnPT0=');
 				alert.remove();
 			}
@@ -186,6 +187,14 @@
 					prismStyles[styleId] = styleCode;
 				}
 				styleElement.innerHTML = styleCode;
+				if (document.getElementById('docIframe')) {
+					const docIframe = document.getElementById('docIframe').contentWindow.document.body
+					if (mode === 'dark') {
+						docIframe.setAttribute("class", "dark");
+					} else {
+						docIframe.setAttribute("class", "light");
+					}
+				}
 			};
 
 		if (location.hash === "#fullscreen"){
@@ -201,6 +210,36 @@
 				}
 			};
 			updateTheme();
+
+			window.openDoc = function(blockID){
+				let docDiv = document.getElementById('documentation');
+				let iframe = document.createElement("iframe");
+				const mode = localStorage.getItem('tb:theme');
+        		iframe.setAttribute("src", `${window.location.origin}/help/blocks?block=${blockID}&theme=${mode}`);
+        		iframe.style.width = "100%";
+        		iframe.style.height = "100%";
+				iframe.style.border = "none";
+				iframe.id = "docIframe";
+				if (document.getElementById('docIframe')) {
+        			docDiv.replaceChild(iframe, document.getElementById('docIframe'));
+				} else {
+					docDiv.appendChild(iframe);
+				}
+				docDiv.setAttribute('opened', 'true');
+				document.getElementById('closeDocButton').setAttribute('opened', 'true');
+			}
+
+			window.closeDoc = function(){
+				let docDiv = document.getElementById('documentation');
+				document.createElement("iframe").remove();
+				document.getElementById('closeDocButton').setAttribute('opened', 'false');
+				docDiv.setAttribute('opened', 'false');
+			}
+
+			function closeAlert() {
+				document.getElementById('Zm5BSEgzQW5HeW9yZkFkNEhpbGJiamtpZmdoOGNDc2lMR29JSzF0K2JnPT0=').remove()
+				localStorage.setItem('alert_closed', 'true')
+			}
 		</script>
 		<div style="display: contents">%sveltekit.body%</div>
 		<script>document.getElementById('fullscreenButton').innerHTML = `<i class="fa fa-expand"></i>`;</script>
diff --git a/src/lib/Documentation/Documentation.svelte b/src/lib/Documentation/Documentation.svelte
new file mode 100644
index 0000000..43202f9
--- /dev/null
+++ b/src/lib/Documentation/Documentation.svelte
@@ -0,0 +1,74 @@
+<script>
+    //import EaglerForge from "$lib/EaglerCraft/EaglerCraft.svelte";
+
+    import { createEventDispatcher } from "svelte";
+
+    const dispatch = createEventDispatcher();
+
+    function event() {
+        dispatch("click");
+    }
+
+</script>
+<div id="documentation" opened="false">
+    <button onclick="closeDoc()" id="closeDocButton" opened="false">×</button>
+</div>
+
+<style>
+    #documentation{
+        position: absolute;
+        right: 0;
+        height: calc(100% - 16px);
+        width: 0%;
+        z-index: 1;
+        transition: width 0.5s ease-out;
+        border: none;
+        background-color: #f9f9f9;
+    }
+
+    :global(body.dark) #documentation{
+        background-color: #111111;
+    }
+
+    #documentation:not([opened="false"]){
+        border-left: 1px solid #c6c6c6;
+        width: 35%;
+    }
+
+    :global(body.dark) #documentation:not([opened="false"]){
+        border-left: 1px solid #575757;
+    }
+
+
+    #closeDocButton {
+        position: absolute;
+        border: 0px;
+        background-color: transparent;
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+        top: 10px;
+        right: 10px;
+        transform: translateX(100px);
+        font-size: 2rem;
+        transition: transform 0.5s ease-out;
+        color: #000;
+    }
+
+    #closeDocButton:not([opened="false"]) {
+        transform: translate(0px);
+    }
+
+    :global(body.dark) #closeDocButton {
+        color: #fff;
+    }
+
+    :global(.fa.fa-expand, .fa.fa-compress) {
+        vertical-align: text-bottom;
+        font-size: large;
+        color: #000;
+    }
+    :global(body.dark .fa.fa-expand, body.dark .fa.fa-compress) {
+        color: #e9e9e9;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2aa9422..518bd96 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -11,8 +11,8 @@
     import StopButton from "$lib/ControlBar/StopButton.svelte";
     import OpenButton from "$lib/ControlBar/OpenButton.svelte";
     import FullscreenButton from "$lib/ControlBar/FullscreenButton.svelte";
-    import EaglerCraft from "$lib/EaglerCraft/EaglerCraft.svelte"
-
+    import EaglerCraft from "$lib/EaglerCraft/EaglerCraft.svelte";
+    import Documentation from "$lib/Documentation/Documentation.svelte";
 
     // Modals
     import ExtensionColorsModal from "$lib/MenuModals/ExtensionColors.svelte";
@@ -74,6 +74,10 @@
     import registerDisplay from "../resources/blocks/display.js";
     import registerinterface from "../resources/blocks/interface.js";
     
+    Blockly.BlockSvg.prototype.showHelp_ = function ( ) {
+        alert('test')
+    };
+
     registerCore();
     registerControl();
     registerEvents();
@@ -553,6 +557,7 @@
                 <EaglerCraft>
                 </EaglerCraft>
             </div>
+            <Documentation/>
             <div class="row-subsubmenus">
                 <div class="codeActionsWrapper">
                     <p style="margin-right: 12px"><b>Mod Code</b></p>
diff --git a/static/help/blocks/index.html b/static/help/blocks/index.html
new file mode 100644
index 0000000..92aa533
--- /dev/null
+++ b/static/help/blocks/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link href="/help/blocks/style.css" rel="stylesheet" type="text/css" />
+    </head>
+    <body>
+        <section id="presentation">
+            <h1>Documentation</h1>
+            <p>Some blocks are documented here</p>
+        </section>
+        <section id="events_eachTicks">
+            <h2>Every ticks</h2>
+            <block>
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="blocklySvg" tabindex="0" width="230px" height="130px"><g data-id="LSMY~Z^JVL-4H/1$GMo+" class="blocklyDraggable blocklySelected"><path class="blocklyPath" stroke="#bf8f00" fill="#ffbf00" d=" m 0,22  h 0  c 25,-22  71,-22  96,0  h 127.93333435058594 a 4 4 0 0,1 4,4  v 26  V 30  V 62  V 66 a 4 4 0 0,1 -4,4  H 64  c -2,0  -3,1  -4,2  l -4,4  c -1,1  -2,2  -4,2  h -12  c -2,0  -3,-1  -4,-2  l -4,-4  c -1,-1  -2,-2  -4,-2  h -8 a 4 4 0 0,0 -4,4  v 16 a 4 4 0 0,0 4,4  h 8  c 2,0  3,1  4,2  l 4,4  c 1,1  2,2  4,2  h 12  c 2,0  3,-1  4,-2  l 4,-4  c 1,-1  2,-2  4,-2  H 223.93333435058594 a 4 4 0 0,1 4,4  V 102  V 122 a 4 4 0 0,1 -4,4  h -219.93333435058594 a 4 4 0 0,1 -4,-4 z"></path><g transform="translate(8,36.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">every&nbsp;in&nbsp;game&nbsp;ticks&nbsp;do</text></g><path class="blocklyPath" stroke="#bf8f00" fill="none" d=" m 0,22  h 0  c 25,-22  71,-22  96,0  h 127.93333435058594 a 4 4 0 0,1 4,4  v 26  V 30  V 62  V 66 a 4 4 0 0,1 -4,4  H 64  c -2,0  -3,1  -4,2  l -4,4  c -1,1  -2,2  -4,2  h -12  c -2,0  -3,-1  -4,-2  l -4,-4  c -1,-1  -2,-2  -4,-2  h -8 a 4 4 0 0,0 -4,4  v 16 a 4 4 0 0,0 4,4  h 8  c 2,0  3,1  4,2  l 4,4  c 1,1  2,2  4,2  h 12  c 2,0  3,-1  4,-2  l 4,-4  c 1,-1  2,-2  4,-2  H 223.93333435058594 a 4 4 0 0,1 4,4  V 102  V 122 a 4 4 0 0,1 -4,4  h -219.93333435058594 a 4 4 0 0,1 -4,-4 z" filter="url(#blocklySelectedGlowFilter7769814457033053)"></path></g></svg>
+            </block>
+            <p>This block is called every in-game tick, which means that if the player is not currently in a world, the block will not be run.</p>
+        </section>
+        <script>
+            const urlParams = new URLSearchParams(window.location.search);
+            if (urlParams.get('block')) {
+                let allSections = Array.from(document.getElementsByTagName('section'));
+                allSections.forEach((element) => element.style.display = "none");
+                if (document.getElementById(urlParams.get('block'))) {
+                    document.getElementById(urlParams.get('block')).style.display = "block";
+                } else {
+                    document.getElementById('presentation').style.display = "block";
+                    document.getElementById('presentation').innerHTML = "<h1>Block not found</h1>";
+                }
+            }
+
+            if (urlParams.get('theme')) {
+                document.body.className = urlParams.get('theme');
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/static/help/blocks/style.css b/static/help/blocks/style.css
new file mode 100644
index 0000000..36b1c62
--- /dev/null
+++ b/static/help/blocks/style.css
@@ -0,0 +1,33 @@
+body {
+    color: #111111;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    padding: 20px;
+}
+body.dark {
+    color: #f9f9f9;
+}
+
+section > h2,h1 {
+    text-align: center;
+}
+
+/* Blockly SVG blocks */
+block {
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.blocklyText {
+	fill: #ffffff;
+    font-family: monospace;
+    font-weight: bold;
+    font-size: 1rem;
+}
+
+.blocklySvg {
+    user-select: none;
+    width: auto;
+}
+