diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..5e45f70
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Level Imposter Docs</title>
+    <meta name="description" content="LevelImposter documentation">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="style.css" rel="stylesheet" type="text/css">
+    
+    <!-- google font families, because Jetbrains is life and Mono Emoji is always nice to have -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=JetBrains Mono" rel="stylesheet">
+  </head>
+  
+  <body>
+    <!-- The sidebar, containing the redirects to various pages of the documentation -->
+    <div class="sideholder">
+      <h1 class="sidetitle">LevelImposter Docs</h1>
+      <p id="home" class="sidebutton" style="text-decoration: underline; font-weight: bold;">Home</p>
+      <p id="basics" class="sidebutton">Basics</p>
+    </div>
+    
+    <div id="pageholder" class="pageholder">
+      <!-- HOW TO ADD A PAGE -->
+      <!-- to add a page, simply create an option on the sidebar located above, then create a page element like the ones below -->
+      <!-- be sure to name your page's id "[your sidebar's id]page" (ex- "home" leads to "homepage") -->
+      <!-- from there, add elements using the existing css styling to your page, or create your own -->
+      
+      <!-- The home page -->
+      <div id="homepage" class="page" style="display: block">
+        <h1 class="pagetitle">Home</h1>
+        <hr class="pagedivider">
+        <p class="pagetext">LevelImposter is a mod for Among Us which allows you to create, test, and play custom maps.</p>
+      </div>
+      
+      <!-- The basics page -->
+      <div id="basicspage" class="page">
+        <h1 class="pagetitle">Basics</h1>
+        <hr class="pagedivider">
+        <p class="pagetext">This is the basics page.</p>
+        <img class="pageimg" src="https://cdn.glitch.global/c8d2697e-f6ac-426a-9cef-bb5f0deba42f/8075d52b-25de-4908-996e-5a62d5b765c7.image.png?v=1714781423589">
+        <p class="pagetext">Pictured above is the LevelImposter editor.</p>
+      </div>
+        
+    </div>
+  </body>
+  
+  
+  <script src="./index.js" type="module"></script>
+</html>
\ No newline at end of file
diff --git a/docs/index.js b/docs/index.js
new file mode 100644
index 0000000..9a27f24
--- /dev/null
+++ b/docs/index.js
@@ -0,0 +1,18 @@
+// grab all our html elements
+const buttons = document.getElementsByClassName("sidebutton");
+const pages = document.getElementsByClassName("page");
+
+// for every redirect button in our sidebar, add an event to open the page when clicked, and highlight the text
+for (let button of buttons) button.addEventListener("click", function(e) {
+  for (let b of buttons) {
+    b.style.textDecoration = "";
+    b.style.fontWeight = "";
+  }
+  button.style.textDecoration = "underline";
+  button.style.fontWeight = "bold";
+  
+  for (let p of pages) p.style.display = "none";
+  document.getElementById(button.id + "page").style.display = "block";
+  
+  document.getElementById("pageholder").scrollTop = 0;
+});
\ No newline at end of file
diff --git a/docs/style.css b/docs/style.css
new file mode 100644
index 0000000..9330a2f
--- /dev/null
+++ b/docs/style.css
@@ -0,0 +1,92 @@
+/* some basic boilerplate css I often use */
+@font-face {
+    font-family: 'Jetbrains Mono';
+    src: url('https://fonts.googleapis.com/css?family=JetBrains Mono');
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "JetBrains Mono", sans-serif;
+  user-select: none;
+  transition: var(--transitionTime);
+  box-shadow: none;
+  appearance: none;
+  border: 0;
+  outline: 0;
+  box-sizing: border-box;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  color: #eeeeee;
+  background-color: #333333;
+  overflow: hidden;
+}
+*:focus {
+  outline: none;
+}
+
+/* the sideholder title and buttons */
+
+.sideholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 20vw;
+  height: 100vh;
+  border-right: solid 0.5vw #eeeeee;
+  padding-top: 5vh;
+  overflow-y: scroll;
+}
+
+.sidetitle {
+  font-size: 3vh;
+  font-weight: bold;
+}
+
+.sidebutton {
+  padding-left: 1vw;
+  padding-top: 2vh;
+  font-size: 3vh;
+}
+
+/* the elements for the pages themselves */
+.pageholder {
+  position: absolute;
+  top: 0;
+  left: 25vw;
+  width: 80vw;
+  height: 100vh;
+  overflow-y: scroll;
+}
+
+.page {
+  display: none;
+}
+
+.pagetitle {
+  font-size: 8vh;
+  padding-top: 5vh;
+  width: 70vw;
+}
+
+.pagetext {
+  font-size: 3vh;
+  width: 70vw;
+}
+
+.pagedivider {
+  position: relative;
+  width: 70vw;
+  border-top: 1vh solid #eeeeee;
+  padding-bottom: 5vh;
+}
+
+.pageimg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 70vw;
+  padding-top: 2vh;
+  padding-bottom: 2vh;
+}
\ No newline at end of file
