diff --git a/.gitignore b/.gitignore
index 60c75a9..dc21a6e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@
 /eslintrc.json
 node_modules
 build
+.vscode
 .idea
\ No newline at end of file
diff --git a/Styles/controls.css b/Styles/controls.css
index 0106830..be6cb63 100644
--- a/Styles/controls.css
+++ b/Styles/controls.css
@@ -1,42 +1,54 @@
-.controls {
+.controlsWrapper {
   display: grid;
   grid-template-columns: repeat(5, auto);
   width: fit-content;
   gap: min(2vw, 2rem);
 }
-.controls ~ .controls {
+.extraControlsWrapper {
   margin-top: 1.5rem;
 }
-.controls input,
-.controls select {
+.controlsWrapper input,
+.controlsWrapper select {
   font-size: 0.75rem;
   background-color: var(--input-bg);
   color: var(--input-f-clr);
   border-color: var(--btn-border-clr);
 }
 
-.controls input[type="text"] {
+.controlsWrapper input[type="text"] {
   border: none;
   outline: 1px solid var(--btn-border-clr);
 }
 
-.button-wrapper {
-  display: grid;
-  grid-template-columns: repeat(6, auto);
-  gap: 1rem;
-  width: fit-content;
-  margin-block: 2rem 1rem;
+.sigmaInput {
+  width: 3.5rem
 }
-.button-wrapper button {
-  font-size: 0.8rem;
-  padding: 0.1em 0.2em;
-  cursor: pointer;
+
+.capInputWrapper {
+  display: inline;
 }
-.button-wrapper button:hover {
-  transform: scale(1.1);
+
+.currencyInput, .capInput {
+  width: 5rem
+}
+
+.hardCapToggle {
+  position: relative; 
+  width: min(1rem, 5vw); 
+  outline: none;
+}
+
+.extraInputWrapper {
+  display: flex;
+}
+
+.extraInputDescription {
+  display: inline;
+  margin-right: 0.8rem;
 }
 
 .timeDiffWrapper {
+  display: grid;
   flex-direction: column;
   gap: 0.3rem;
 }
@@ -44,25 +56,38 @@
   width: 20rem;
 }
 
-.simAllInputs {
+/* Action bar */
+
+.actionBar {
+  display: grid;
+  grid-template-columns: repeat(6, auto);
+  gap: 1rem;
+  width: fit-content;
+  margin-block: 2rem 1rem;
+}
+.actionBar button {
+  font-size: 0.8rem;
+  padding: 0.1em 0.2em;
+}
+
+/* Sim all inputs */
+
+.simAllInputWrapper {
   display: grid;
   grid-template-columns: 1fr auto auto;
   gap: 1rem 0.5rem;
   margin-right: 2rem;
   place-items: center;
 }
-.simAllInputs button:hover {
-  cursor: pointer;
-  transform: scale(1.1);
+.simAllInputWrapper .simAllCheckboxLabel {
+  font-size: 0.75rem;
 }
-.simAllInputs input[type="checkbox"] {
+.simAllInputWrapper input[type="checkbox"] {
   width: 0.8rem;
   height: 0.8rem;
 }
 
-.saveDist {
-  position: relative;
-}
+/* Sim all input & extra input */
 
 textarea {
   resize: none;
@@ -76,7 +101,7 @@ textarea.simAllInputArea {
   width: 20rem;
   height: 4rem;
 }
-textarea.modeInput {
+textarea.extraInput {
   width: 6rem;
   height: 1.8em;
 }
diff --git a/Styles/dialogs.css b/Styles/dialogs.css
new file mode 100644
index 0000000..d2c7bb9
--- /dev/null
+++ b/Styles/dialogs.css
@@ -0,0 +1,56 @@
+dialog {
+    --inline-padding: min(10vw, 3.5rem);
+    padding: 2rem var(--inline-padding);
+    background-color: var(--dialog-bg);
+    color: var(--dialog-f-clr);
+    border: 0.1rem solid var(--dialog-f-clr);
+    border-radius: 0.5rem;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    overflow: hidden;
+}
+
+dialog::backdrop {
+    background-color: var(--dialog-backdrop-clr);
+    opacity: 0.6;
+}
+
+.dialogTitle {
+    margin-bottom: 1.5rem;
+}
+
+.dialogCloseBtn {
+  border-radius: 50%;
+  width: 1.5rem;
+  aspect-ratio: 1;
+  background-color: var(--close-btn-bg);
+  color: var(--close-btn-fg);
+  font-weight: bold;
+  font-size: 0.8rem;
+  font-style: italic;
+  font-family: "Luicida Handwriting";
+  cursor: pointer;
+  transition: scale 100ms;
+  position: absolute;
+  right: 1.5rem;
+  top: 1.5rem;
+  outline: 0.1em solid var(--close-btn-fg);
+}
+
+.dialogCloseBtn:hover {
+    scale: 1.2;
+}
+
+dialog > div::-webkit-scrollbar {
+    width: 1rem;
+}
+dialog > div::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-bg);
+    border: 1px solid var(--scrollbar-thumb-border);
+    border-radius: 0.5rem;
+}
+dialog > div::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-track-bg);
+    border-radius: 0.5rem;
+}
\ No newline at end of file
diff --git a/Styles/main.css b/Styles/main.css
index dbc5175..1a3817b 100644
--- a/Styles/main.css
+++ b/Styles/main.css
@@ -11,6 +11,7 @@
 
   width: 100vw;
   overflow-x: hidden;
+  overscroll-behavior: none;
 }
 
 body {
@@ -36,6 +37,10 @@ button {
   transition: background-color 100ms ease-in-out, color 100ms ease-in-out, transform 0.1s;
 }
 
+button:hover {
+  transform: scale(1.1);
+}
+
 button.buttongreen {
   background-color: var(--button-green-bg);
 }
@@ -43,3 +48,7 @@ button.buttongreen {
 .content-wrapper {
   padding: min(3vw, 1.5rem * 0.85);
 }
+
+.hidden {
+  display: none !important;
+}
\ No newline at end of file
diff --git a/Styles/narrow.css b/Styles/narrow.css
index 9dd9f76..a50ab6f 100644
--- a/Styles/narrow.css
+++ b/Styles/narrow.css
@@ -2,76 +2,52 @@
   :root {
     font-size: calc(0.5vw + 0.8rem + 0.5vh);
   }
-  .controls:nth-of-type(1) {
-    display: grid;
-    grid-template-columns: repeat(3, auto);
-    gap: 0.5rem 1rem;
-  }
-  .button-wrapper {
-    display: grid;
-    grid-template-columns: repeat(2, auto);
-    gap: 0.5rem 1rem;
-  }
-  .settings {
-    width: 95%;
-    --inline-padding: 1.2rem;
+  .content-wrapper {
+    padding: 1rem;
   }
-  .settingsButtons {
+  /* Nav */
+  .navBtns {
     font-size: 0.8rem;
   }
-  .settings input[type="range"] {
-    appearance: none;
-    width: 5rem;
-  }
-  .settings input[type="range"]::-webkit-slider-runnable-track {
-    height: 0.4rem;
-  }
-  .settings input[type="range"]::-webkit-slider-thumb {
-    appearance: none;
-    height: 0.8rem;
-    width: 0.45rem;
-    margin-top: -0.2rem;
-    background-color: red;
-    outline: 1px solid green;
-  }
-  .content-wrapper {
-    padding: 1rem;
+
+  /* Controls */
+  .baseControlsWrapper {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    gap: 0.5rem 1rem;
   }
-  .controls:nth-of-type(2) {
+  .extraControlsWrapper {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     white-space: nowrap;
   }
-  .description {
+  .inputLabel {
     display: block;
   }
-  .simAllInputs button {
+  .simAllInputWrapper {
+    width: max-content;
+  }
+  .simAllInputWrapper button {
     font-size: 0.6rem;
   }
-  .simAllInputs input {
+  .simAllInputWrapper input {
     width: 0.7rem;
     height: 0.7rem;
   }
-  .output {
-    min-width: 80vw;
-  }
-  .saveDist::before {
-    content: "Saved!";
-    position: absolute;
-    inset: 0;
-    transition: opacity 500ms;
-    color: var(--font-clr);
-    font-size: 0.7rem;
-    opacity: 0;
-    top: -90%;
-  }
-  .extraInputs {
+  .extraInputWrapper {
     flex-direction: column;
     gap: 1rem;
   }
-  .simAllInputs {
-    width: max-content;
+  .actionBar {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    gap: 0.5rem 1rem;
+  }
+
+  /* Outputs */
+  .log {
+    min-width: 80vw;
   }
   .boughtVars table,
   .boughtVars tr,
@@ -81,4 +57,25 @@
     text-align: center;
     font-size: 0.63rem;
   }
+
+  /* Settings dialog */
+  .settings {
+    width: 95%;
+    --inline-padding: 1.2rem;
+  }
+  .settings input[type="range"] {
+    appearance: none;
+    width: 5rem;
+  }
+  .settings input[type="range"]::-webkit-slider-runnable-track {
+    height: 0.4rem;
+  }
+  .settings input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    height: 0.8rem;
+    width: 0.45rem;
+    margin-top: -0.2rem;
+    background-color: red;
+    outline: 1px solid green;
+  }
 }
\ No newline at end of file
diff --git a/Styles/navbar.css b/Styles/navbar.css
index 05fe553..f901674 100644
--- a/Styles/navbar.css
+++ b/Styles/navbar.css
@@ -1,4 +1,4 @@
-.nav {
+nav {
   background-color: var(--bg-accent-0);
   padding: 0.4em 1rem;
   display: grid;
@@ -8,6 +8,20 @@
   color: inherit;
 }
 
+nav div {
+  margin-top: auto; 
+  margin-bottom: 0.2rem;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+
+.versionLabel {
+  font-size: 0.9rem;
+}
+
 .settingsBtn {
   background: url(../settings.png);
   width: 2.25rem;
@@ -17,68 +31,32 @@
   background-repeat: no-repeat;
   background-color: transparent;
   outline: 0;
-  cursor: pointer;
   border-radius: 50%;
   transition: scale 100ms, box-shadow 100ms;
-  translate: 0 20%;
 }
 .settingsBtn:hover {
   box-shadow: 0 0 0.6rem 0.05rem var(--settings-btn-shadow-clr), inset 0 0 0.4rem 0.03rem var(--settings-btn-shadow-clr);
   scale: 1.1;
 }
 
-.settings {
-  --inline-padding: min(10vw, 5rem);
-  padding: 2rem var(--inline-padding);
-  background-color: var(--dialog-bg);
-  color: var(--dialog-f-clr);
-  border: 0.1rem solid var(--dialog-f-clr);
-  border-radius: 0.5rem;
-  top: 50%;
-  left: 50%;
-  translate: -50% -50%;
-  overflow: hidden;
-}
 .instructions {
-  --inline-padding: min(10vw, 5rem);
-  padding: 2rem var(--inline-padding);
-  background-color: var(--dialog-bg);
-  color: var(--dialog-f-clr);
-  border: 0.1rem solid var(--dialog-f-clr);
-  border-radius: 0.5rem;
-  top: 50%;
-  left: 50%;
-  translate: -50% -50%;
-  overflow: auto;
+  width: 75vw;
+  max-height: 90vh;
 }
-.settings::backdrop,
-.instructions::backdrop,
-.boughtVars::backdrop {
-  background-color: var(--dialog-backdrop-clr);
-  opacity: 0.6;
-}
-.settingsCloseBtn,
-.instructionsCloseBtn {
-  border-radius: 50%;
-  width: 1.5rem;
-  aspect-ratio: 1;
-  background-color: var(--close-btn-bg);
-  color: var(--close-btn-fg);
-  font-weight: bold;
-  font-size: 0.8rem;
-  font-style: italic;
-  font-family: "Luicida Handwriting";
-  cursor: pointer;
-  transition: scale 100ms;
-  position: absolute;
-  right: 7%;
-  top: 10%;
-  outline: 0.1em solid var(--close-btn-fg);
+
+.instructions[open] {
+  display: flex;
+  flex-direction: column;
 }
-.settingsCloseBtn:hover,
-.instructionsCloseBtn:hover {
-  scale: 1.2;
+
+.instructionsContent {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: none;
+  padding-right: 1rem;
 }
+
 .settings input {
   outline: 0;
 }
@@ -87,14 +65,19 @@
   height: 1rem;
 }
 
+.settings .sliderContainer {
+  margin-bottom: 2rem;
+}
+
 .settings select {
   background-color: var(--input-bg);
   color: var(--input-f-clr);
   border-color: var(--btn-border-clr);
 }
 
-
 .nav-title {
+  font-family: Computer Modern Concrete; 
+  font-weight: 600;
   transition: color 100ms ease-in-out;
   color: var(--title-clr);
 }
diff --git a/Styles/output.css b/Styles/output.css
index 3f94e11..ff62c7f 100644
--- a/Styles/output.css
+++ b/Styles/output.css
@@ -1,3 +1,6 @@
+.simTable {
+  margin-block-start: 2.5rem;
+}
 .simTable,
 .simTable th,
 .simTable td {
@@ -37,7 +40,7 @@
   padding-inline: 0.9rem;
   font-size: 0.85rem;
 }
-.small tbody tr:nth-child(2n+1) td {
+.simTable.small tbody tr:nth-child(2n+1) td {
   background-color: var(--table-bg-alt);
 }
 .big th {
@@ -52,22 +55,29 @@
   background-color: var(--table-bg-alt);
 }
 
-.simTable {
-  margin-block-start: 2.5rem;
+.boughtVars {
+  padding: 4rem 0.1rem 1rem 1rem;
+  max-height: 90vh;
+  overflow: hidden;
 }
 
-.boughtVars {
-  padding: 5rem 0 5rem 1rem;
+.boughtVars[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+.boughtVarsTableWrapper {
+  flex: 1;
+  overflow: auto;
+  overscroll-behavior: none;
+  padding-right: 1rem;
+}
+
+.boughtVars table thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
   background-color: var(--dialog-bg);
-  color: var(--dialog-f-clr);
-  border: 0.1rem solid var(--dialog-f-clr);
-  border-radius: 0.5rem;
-  top: 50%;
-  left: 50%;
-  translate: -50% -50%;
-  max-height: 70vh;
-  overflow: hidden;
-  position: relative;
 }
 
 .boughtVars table tr td.highlighted {
@@ -81,7 +91,7 @@
 .timeDiffTable tr,
 .timeDiffTable td {
   border-collapse: collapse;
-  padding: 0.3rem;
+  padding: 0.25rem;
   text-align: center;
   font-size: 0.9rem;
 }
@@ -97,32 +107,3 @@
 .timeDiffTable td ~ td {
   border-left: 1px solid var(--dialog-f-clr);
 }
-.boughtVarsCloseBtn {
-  border-radius: 50%;
-  width: 1.5rem;
-  aspect-ratio: 1;
-  background-color: var(--close-btn-bg);
-  color: var(--close-btn-fg);
-  font-weight: bold;
-  font-size: 0.8rem;
-  font-style: italic;
-  font-family: "Luicida Handwriting";
-  cursor: pointer;
-  transition: scale 100ms;
-  position: fixed;
-  right: 10%;
-  top: 5%;
-  outline: 0.1em solid var(--close-btn-fg);
-}
-.boughtVars > div::-webkit-scrollbar {
-  width: 1rem;
-}
-.boughtVars > div::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb-bg);
-  border: 1px solid var(--scrollbar-thumb-border);
-  border-radius: 0.5rem;
-}
-.boughtVars > div::-webkit-scrollbar-track {
-  background-color: var(--scrollbar-track-bg);
-  border-radius: 0.5rem;
-}
diff --git a/index.html b/index.html
index e4d68e0..d72538a 100644
--- a/index.html
+++ b/index.html
@@ -5,42 +5,45 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Theory Simulator</title>
-    <link rel="stylesheet" href="./Styles/fonts/Computer Modern Bright Semibold/cmun-bright-semibold.css" />
     <link rel="stylesheet" href="./Styles/fonts/Computer Modern Concrete/Concrete/cmun-concrete.css" />
     <link rel="stylesheet" href="./Styles/main.css" />
     <link rel="stylesheet" href="./Styles/navbar.css" />
     <link rel="stylesheet" href="./Styles/controls.css" />
     <link rel="stylesheet" href="./Styles/output.css" />
+    <link rel="stylesheet" href="./Styles/dialogs.css" />
     <link rel="stylesheet" href="./Styles/narrow.css" />
     <link rel="stylesheet" href="./Styles/themes.css" />
     <link rel="icon" href="https://conicgames.github.io/exponentialidle/assets/favicon/favicon.ico">
     <script>
       const defaultTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "classic";
       const state = JSON.parse(localStorage.getItem("simState") ?? `{}`);
-      const theme = (state && state.settings && state.settings.theme) ? state.settings.theme : defaultTheme
+      const theme = state?.settings?.theme ?? defaultTheme;
       document.documentElement.setAttribute("theme", theme);
     </script>
     <script defer type="module" src="./build/bundle.js"></script>
   </head>
+
   <body>
-    <div class="nav">
-      <div style="margin-top: auto; margin-bottom: 0.2rem">
-        <span style="font-size: 0.9rem">v3.0.0 (Alpha)</span>
-        <button style="margin-left: 1rem; cursor: pointer" class="settingsButtons">Changelog</button>
-        <button style="margin-left: 1rem; cursor: pointer" class="settingsButtons instructionsBtn">Instructions</button>
-        <button style="margin-left: 0.8rem" class="settingsBtn"></button>
+    <nav>
+      <div>
+        <span class="versionLabel">v3.0.0 (Alpha)</span>
+        <button class="navBtns">Changelog</button>
+        <button class="instructionsBtn navBtns">Instructions</button>
+        <button class="settingsBtn"></button>
       </div>
-      <h1 class="nav-title" style="font-family: Computer Modern Concrete; font-weight: 600">e<sup>x</sup> Theory simulator</h1>
-    </div>
+
+      <h1 class="nav-title">e<sup>x</sup> Theory simulator</h1>
+    </nav>
+
     <div class="content-wrapper">
-      <div class="controls">
+      <div class="baseControlsWrapper controlsWrapper hidden">
         <div>
-          <span class="description">Theory: </span>
-          <select class="theory"></select>
+          <span class="inputLabel">Theory: </span>
+          <select class="theorySelector"></select>
         </div>
-        <div id="stratSelectionWrapper">
-          <span class="description">Strat: </span>
-          <select class="strat">
+        <div class="stratSelectionWrapper">
+          <span class="inputLabel">Strat: </span>
+          <select class="stratSelector">
             <option value="Best Overall">Best Overall</option>
             <option value="Best Active">Best Active</option>
             <option value="Best Semi-Idle">Best Semi-Idle</option>
@@ -48,83 +51,83 @@ <h1 class="nav-title" style="font-family: Computer Modern Concrete; font-weight:
           </select>
         </div>
         <div>
-          <span class="description">Sigma: </span>
-          <input type="text" class="sigma" style="width: 3.5rem" placeholder="<number>" spellcheck="false" />
+          <span class="inputLabel">Sigma: </span>
+          <input type="text" class="sigmaInput" placeholder="<number>" spellcheck="false" />
         </div>
         <div>
-          <span class="description">Input: </span>
-          <input type="text" class="input" style="width: 5rem" placeholder="<rho>[r/t/m]>" spellcheck="false" />
+          <span class="inputLabel">Input: </span>
+          <input type="text" class="currencyInput" placeholder="<rho>[r/t/m]>" spellcheck="false" />
         </div>
-        <div class="capWrapper">
-          <span class="description">Cap: </span>
-          <input type="text" class="cap" style="width: 5rem" placeholder="<rho>[r/t/m]>" spellcheck="false" />
+        <div class="capInputWrapper">
+          <span class="inputLabel">Cap: </span>
+          <input type="text" class="capInput" placeholder="<rho>[r/t/m]>" spellcheck="false" />
         </div>
       </div>
-      <div class="controls">
+      <div class="extraControlsWrapper controlsWrapper">
         <div>
-          <span class="description">Mode: </span>
-          <select class="mode"></select>
+          <span class="inputLabel">Mode: </span>
+          <select class="modeSelector"></select>
         </div>
-        <div class="hardCapWrapper" style="display: none">
-          <span class="description">Hard cap? </span>
-          <input style="position: relative; width: min(1rem, 5vw); outline: none" type="checkbox" class="hardCap" />
+        <div class="hardCapWrapper hidden">
+          <span class="inputLabel">Hard cap? </span>
+          <input class="hardCapToggle" type="checkbox" />
         </div>
-        <div class="extraInputs">
-          <span class="extraInputDescription" style="margin-right: 0.8rem">mode inputs</span>
-          <div class="simAllInputs">
-            <button class="saveDist">Save distribution</button>
-            <span style="font-size: 0.75rem">Semi-Idle: </span>
-            <input type="checkbox" class="semi-idle" style="position: relative" checked="true" />
-            <button class="getDist">Get distribution</button>
-            <span style="font-size: 0.75rem">Hard Active: </span>
-            <input type="checkbox" class="hard-active" style="position: relative" />
-            <button class="loadSave">Load save</button>
+        <div class="extraInputWrapper hidden">
+          <span class="extraInputDescription"></span>
+          <div class="simAllInputWrapper">
+            <button class="saveDistBtn">Save distribution</button>
+            <span class="simAllCheckboxLabel">Semi-Idle: </span>
+            <input class="semiIdleToggle" type="checkbox" checked="true" />
+            <button class="getDistBtn">Get distribution</button>
+            <span class="simAllCheckboxLabel">Very Active: </span>
+            <input class="hardActiveToggle" type="checkbox" />
+            <button class="loadSaveBtn">Load save</button>
           </div>
           <textarea class="simAllInputArea" cols="30" spellcheck="false"></textarea>
-          <textarea class="modeInput" cols="30" spellcheck="false"></textarea>
+          <textarea class="extraInput" cols="30" spellcheck="false"></textarea>
         </div>
-        <div class="timeDiffWrapper" style="display: none">
+        <div class="timeDiffWrapper hidden">
           <input type="text" class="timeDiffInput" />
           <input type="text" class="timeDiffInput" />
           <input type="text" class="timeDiffInput" />
           <table class="timeDiffTable"></table>
         </div>
       </div>
-      <div class="button-wrapper">
-        <button class="imageC">Copy Image</button>
-        <button class="imageD">Download Image</button>
-        <button class="csvD">Download CSV</button>
-        <button class="clear">Clear all results</button>
-        <button class="clearInput">Clear all inputs</button>
-        <button class="simulate">Simulate</button>
+      <div class="actionBar">
+        <button class="copyImageBtn">Copy Image</button>
+        <button class="downloadImageBtn">Download Image</button>
+        <button class="downloadCsvBtn">Download CSV</button>
+        <button class="clearResultsBtn">Clear all results</button>
+        <button class="clearInputsBtn">Clear all inputs</button>
+        <button class="simulateBtn">Simulate</button>
       </div>
-      <span class="output" style="display: block"></span>
+      <span class="log"></span>
       <table class="simTable">
         <thead><tr></tr></thead>
         <tbody></tbody>
       </table>
     </div>
     <dialog class="settings">
-      <h1 style="margin-bottom: 1.5rem">Sim settings</h1>
-      <button class="settingsCloseBtn">X</button>
-      <div class="sliderContainer" style="margin-bottom: 2rem">
+      <h1 class="dialogTitle">Sim settings</h1>
+      <button class="settingsCloseBtn dialogCloseBtn">X</button>
+      <div class="sliderContainer">
         <label for="dtSlider">dt:</label><br />
-        <input type="range" class="dt" step="0.1" max="10" min="0" value="8.1943" id="dtSlider" />
+        <input type="range" class="dt" step="0.1" max="10" min="0" value="8.1943" class="dtSlider" />
         <span class="sliderOtp dtOtp">1.5</span> <br />
         
         <label for="ddtSlider">&Delta;dt:</label><br />
-        <input type="range" class="ddt" step="0.1" max="10" min="0" value="2.71233" id="ddtSlider" />
+        <input type="range" class="ddt" step="0.1" max="10" min="0" value="2.71233" class="ddtSlider" />
         <span class="sliderOtp ddtOtp">1.0001</span><br />
 
         <label for="mfDepthSlider">MF reset depth:</label><br />
-        <input type="range" class="mfDepth" step="1" max="5" min="0" value="0" id="mfDepthSlider" />
+        <input type="range" class="mfDepth" step="1" max="5" min="0" value="0" class="mfDepthSlider" />
         <span class="sliderOtp mfDepthOtp">0</span><br />
 
         <label for="boughtVarsDeltaSlider">Show bought vars in recovery:</label><br />
-        <input type="range" class="boughtVarsDelta" step="1" min="5" max="30" value="5" id="boughtVarsDeltaSlider" />
+        <input type="range" class="boughtVarsDelta" step="1" min="5" max="30" value="5" class="boughtVarsDeltaSlider" />
         <span class="sliderOtp boughtVarsDeltaOtp">e5ρ</span><br />
 
-        <button class="resetSettings settingsButtons">Reset</button>
+        <button class="resetSettings navBtns">Reset</button>
       </div>
       <span>Theme: </span> <select class="themeSelector"></select><br /><br />
       <span>Strats simmed in "all" mode: </span> 
@@ -145,10 +148,10 @@ <h1 style="margin-bottom: 1.5rem">Sim settings</h1>
       <span>Generate a total purchase list: </span> <input type="checkbox" class="totalPurchaseList" /><br /><br />
     </dialog>
     <dialog class="boughtVars">
-      <button class="boughtVarsCloseBtn">X</button>
-      <div style="overflow: auto; max-height: 55vh; position: relative; padding-right: 1rem">
-        <table style="margin: 0">
-          <thead style="position: sticky; top: 0%; background-color: var(--dialog-bg)">
+      <button class="boughtVarsCloseBtn dialogCloseBtn">X</button>
+      <div class="boughtVarsTableWrapper">
+        <table>
+          <thead>
             <td>Variable</td>
             <td>Lvl</td>
             <td>Cost</td>
@@ -172,77 +175,111 @@ <h1 style="margin-bottom: 1.5rem">Sim settings</h1>
       </div>
     </dialog>
     <dialog class="instructions">
-      <h1 style="margin-bottom: 1.5rem">Instructions</h1>
-      <button class="instructionsCloseBtn">X</button>
-      <h2>About the sim:</h2>
-      <br>&nbsp;
-      <ul>
-        <li>
-          <strong>Mode:</strong> You can select from different modes allowing you to do more varied inputs. Each mode is described below:
-          <ul>
-            <li>
-              <strong>All:</strong> This will give you an input field where you can enter all of the values of your theories. The input order for your values will be : <br>
-              Sigma T1 T2 ... T7 T8 WSP SL ... BaP.<br> 
-              If you don't want to sim a theory, enter 0. <br /><br />
-              You also have the option to put an "r" or "m" at the end of each value. "r" means that it is a rho value, and will not be affected by rho/tau conversion. "m" means that the value is the total
-              multiplier (make sure to have maximum possible levels of r9 bought, because this will affect the result), and it will be automatically converted to rho. By default, all values are expected as tau.
-              <br />
-              <br /> Example: 95 230 50m 250 300 300 70m 250 200 7e100r
-              <br>&nbsp;
-            </li>
-            <li>
-              <strong>Single:</strong> You will sim one publish for a single theory using a single (or let it automatically find the best) strategy.
-              <br>&nbsp;
-            </li>
-            <li>
-              <strong>Chain:</strong> For Chain Sims, you are required to enter a value for "Cap." This sims every publish until it gets to your desired tau/rho. <br /> Hard Cap?: This button hard caps the
-              tau/rho to the cap you placed instead of simming the entire publication.
-              <br>&nbsp;
-            </li>
-            <li>
-              <strong>Step:</strong> A Variant of Chain that will sim in steps of n x tau/rho where n is any number.
-              <br>&nbsp;
-            </li>
-          </ul>
-        </li>
-        <li>
-          <strong>Changelog:</strong> See all the versions, changes, and updates to the sim.
-        </li>
-        <li>
-          <strong>Copy Image: </strong>This button will copy the output of the sim to your Clipboard
-        </li>
-        <li>
-          <strong>Download Image:</strong> This button will download a .png to your device, mobile or pc.
-        </li>
-        <li>
-          <strong>Clear Results: </strong>This will clear your last Sims results.
-        </li>
-        <li>
-          <strong>Simulate:</strong> "Execute order 66" aka, start simulating.
-        </li>
-        <li>
-          Below are explanations for what the different input fields do that are visible if you are not in "All" or "Time diff." mode:
-          <ul>
-            <li>
-              <strong>Theory:</strong> You can select a theory for you to simulate in this dropdown. This will allow you to sim only 1 theory at a time.
-            </li>
-            <li>
-              <strong>Strat:</strong> When simulating 1 sim at a time, you can select a strategy that you would like to use for the sim. This drop-down will have all known strategies that are effective.
-            </li>
-            <li>
-              <strong>Sigma:</strong> Generally, you would want to put your total students in here, but you can put any value in here. This is adaptive for R9, so if you enter students &lt; 65 you
-              will not have R9, or if you enter 65&lt;sigma&lt;75, you will have 1R9, etc.
-            </li>
-            <li>
-              <strong>Input:</strong> This is where you will enter your theory's rho/tau/multiplier. Accepted inputs are x.xxexxxx, xxxx or the value in log10. You can optionally put an r/t/m after the value,
-              to indicate whether it's a rho, tau or total multiplier value. Default is rho.
-            </li>
-            <li>
-              <strong>Cap:</strong> This is only used when you use chain or steps mode. This is a value for how far it will simulate. Same formats apply here as for Input.
-            </li>
-          </ul>
-        </li>
-      </ul>
+      <button class="instructionsCloseBtn dialogCloseBtn">X</button>
+      <h1 class="dialogTitle">Instructions</h1>
+      <div class="instructionsContent">
+        <h2>About the sim:</h2>
+        <br>&nbsp;
+        <ul>
+          <li>
+            <strong>Mode:</strong> 
+            You can select from different modes allowing you to do more varied inputs. 
+            Each mode is described below:
+            <ul>
+              <li>
+                <strong>All:</strong> 
+                This will give you an input field where you can enter all of the values of your theories. 
+                The input order for your values will be : <br>
+                Sigma T1 T2 ... T7 T8 WSP SL ... BaP.<br> 
+                If you don't want to sim a theory, enter 0. <br /><br />
+                You also have the option to put an "r" or "m" at the end of each value. 
+                "r" means that it is a rho value, and will not be affected by rho/tau conversion. 
+                "m" means that the value is the total multiplier 
+                (make sure to have maximum possible levels of r9 bought, because this will affect the result), 
+                and it will be automatically converted to rho. 
+                By default, all values are expected as tau.
+                <br />
+                <br /> Example: 95 230 50m 250 300 300 70m 250 200 7e100r
+                <br>&nbsp;
+              </li>
+              <li>
+                <strong>Single:</strong> 
+                You will sim one publish for a single theory using a single 
+                (or let it automatically find the best) strategy.
+                <br>&nbsp;
+              </li>
+              <li>
+                <strong>Chain:</strong> 
+                For Chain Sims, you are required to enter a value for "Cap." 
+                This sims every publish until it gets to your desired tau/rho. <br /> 
+                Hard Cap?: This button hard caps the tau/rho to the cap you placed 
+                instead of simming the entire publication.
+                <br>&nbsp;
+              </li>
+              <li>
+                <strong>Step:</strong> 
+                A Variant of Chain that will sim in steps of n x tau/rho where n is any number.
+                <br>&nbsp;
+              </li>
+            </ul>
+          </li>
+          <li>
+            <strong>Changelog:</strong> 
+            See all the versions, changes, and updates to the sim.
+          </li>
+          <li>
+            <strong>Copy Image: </strong>
+            This button will copy the output of the sim to your Clipboard
+          </li>
+          <li>
+            <strong>Download Image:</strong> 
+            This button will download a .png to your device, mobile or pc.
+          </li>
+          <li>
+            <strong>Clear Results: </strong>
+            This will clear your last Sims results.
+          </li>
+          <li>
+            <strong>Simulate:</strong> 
+            "Execute order 66" aka, start simulating.
+          </li>
+          <li>
+            Below are explanations for what the different input fields do 
+            that are visible if you are not in "All" or "Time diff." mode:
+            <ul>
+              <li>
+                <strong>Theory:</strong> 
+                You can select a theory for you to simulate in this dropdown. 
+                This will allow you to sim only 1 theory at a time.
+              </li>
+              <li>
+                <strong>Strat:</strong> 
+                When simulating 1 sim at a time, you can select a strategy that you would like to use for the sim. 
+                This drop-down will have all known strategies that are effective.
+              </li>
+              <li>
+                <strong>Sigma:</strong> 
+                Generally, you would want to put your total students in here, but you can put any value in here. 
+                This is adaptive for R9, so if you enter students &lt; 65 you will not have R9, 
+                or if you enter 65&lt;sigma&lt;75, you will have 1R9, etc.
+              </li>
+              <li>
+                <strong>Input:</strong> 
+                This is where you will enter your theory's rho/tau/multiplier. 
+                Accepted inputs are x.xxexxxx, xxxx or the value in log10. 
+                You can optionally put an r/t/m after the value, 
+                to indicate whether it's a rho, tau or total multiplier value. Default is rho.
+              </li>
+              <li>
+                <strong>Cap:</strong> 
+                This is only used when you use chain or steps mode. 
+                This is a value for how far it will simulate. Same formats apply here as for Input.
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+      
     </dialog>
   </body>
 </html>
diff --git a/src/Data/data.json b/src/Data/data.json
index 14e7cbc..ca677fb 100644
--- a/src/Data/data.json
+++ b/src/Data/data.json
@@ -808,15 +808,16 @@
   },
   "stratCategories": ["Best Overall", "Best Active", "Best Semi-Idle", "Best Idle"],
   "modes": ["All", "Single sim", "Chain", "Steps", "Comparison", "StepChain", "Amount", "Time", "Time diff."],
-  "modeInputDescriptions": ["", "", "", "Step length: ", "Step length: ", "Amount of pubs (Chain): ", "Total Time: "],
+  "modeInputDescriptions": ["", "", "", "Step length: ", "", "Step length: ", "Amount of pubs (Chain): ", "Total Time: "],
   "modeInputPlaceholder": [
     "<sigma> <t1>* [t2]* ... [wsp]* ... [bap]* \n\n*[r/t/m] = rho/tau/total multiplier | default tau\n\nOr: input your save here and click \"Load save\"",
     "",
     "",
     "",
+    "",
     "<Number>",
     "<Number>",
-    "",
+    "<Number>[ydhm]+",
     "<t1> [t1], ... , <t8> [t8] or <wsp> [wsp], ... , <bap> [bap]",
     "<t1> [t1], ... , <t8> [t8] or <wsp> [wsp], ... , <bap> [bap]",
     "<sigma 1> <sigma 2> [ct y/n] [idle strats only y/n]"
diff --git a/src/Sim/main.ts b/src/Sim/main.ts
index a1eb7d2..051e5f4 100644
--- a/src/Sim/main.ts
+++ b/src/Sim/main.ts
@@ -6,14 +6,7 @@ import { qs, event } from "../Utils/DOMhelpers";
 import { cacheFilterQuery, cacheFilterResponse, setCache } from "./cache";
 import { refreshDOMEventLoop } from "../Utils/helpers";
 import { loadSave } from "../UI/buttonEvents";
-
-const output = qs(".output");
-
-// Inputs
-const simAllInputArea = qs<HTMLTextAreaElement>(".simAllInputArea");
-
-//Buttons
-const simulateButton = qs(".simulate");
+import UI from "../UI/elements";
 
 export const global = {
   simulating: false,
@@ -22,16 +15,16 @@ export const global = {
 async function simCall() {
   if (global.simulating) {
     global.simulating = false;
-    output.textContent = "Sim stopped.";
+    UI.outputs.log.textContent = "Sim stopped.";
     return;
   }
 
   global.simulating = true;
-  output.textContent = "";
-  simulateButton.textContent = "Stop simulating";
+  UI.outputs.log.textContent = "";
+  UI.controls.simulateBtn.textContent = "Stop simulating";
 
   // Auto-load save
-  if (/^[A-Za-z0-9+\/=]{20,}$/.test(simAllInputArea.value.trim())) {
+  if (/^[A-Za-z0-9+\/=]{20,}$/.test(UI.controls.simAllInputArea.value.trim())) {
     await loadSave();
     await refreshDOMEventLoop();
   }
@@ -44,15 +37,15 @@ async function simCall() {
     await refreshDOMEventLoop();
     if (global.simulating) setCache(query, filteredResponse);
     writeSimResponse(filteredResponse);
-    output.textContent = "";
+    UI.outputs.log.textContent = "";
   }
   catch (err) {
-    output.textContent = global.simulating ? String(err) : "Sim stopped.";
+    UI.outputs.log.textContent = global.simulating ? String(err) : "Sim stopped.";
   }
   
   global.simulating = false;
-  simulateButton.textContent = "Simulate";
+  UI.controls.simulateBtn.textContent = "Simulate";
   setSimState();
 }
 
-event(simulateButton, "click", simCall);
\ No newline at end of file
+event(UI.controls.simulateBtn, "click", simCall);
\ No newline at end of file
diff --git a/src/Sim/parse.ts b/src/Sim/parse.ts
index 73d0f25..4d1fc3c 100644
--- a/src/Sim/parse.ts
+++ b/src/Sim/parse.ts
@@ -1,44 +1,19 @@
 import jsonData from "../Data/data.json" with { type: "json" };
 import { getTheoryFromIndex, isMainTheory, parseLog10String, reverseMulti } from "../Utils/helpers";
-import { qs } from "../Utils/DOMhelpers";
+import UI from "../UI/elements";
 
-//Inputs
-const modeSelector = qs<HTMLSelectElement>(".mode");
-const theorySelector = qs<HTMLSelectElement>(".theory");
-const stratSelector = qs<HTMLSelectElement>(".strat");
-const sigmaInput = qs<HTMLInputElement>(".sigma");
-const currencyInput = qs<HTMLInputElement>(".input");
-const capInput = qs<HTMLInputElement>(".cap");
-const simAllInputArea = qs<HTMLTextAreaElement>(".simAllInputArea")
-const modeInput = qs<HTMLTextAreaElement>(".modeInput");
-const hardCap = qs<HTMLInputElement>(".hardCap");
-const semi_idle = qs<HTMLInputElement>(".semi-idle");
-const hard_active = qs<HTMLInputElement>(".hard-active");
-
-//Setting Inputs
-const dtOtp = qs(".dtOtp");
-const ddtOtp = qs(".ddtOtp");
-const mfDepthOtp = qs(".mfDepthOtp");
-const boughtVarsDeltaSlider = qs<HTMLInputElement>(".boughtVarsDelta");
-const themeSelector = qs<HTMLSelectElement>(".themeSelector");
-const simAllStrats = qs<HTMLSelectElement>(".simallstrats");
-const completedCTs = qs<HTMLSelectElement>(".completedcts");
-const showA23 = qs<HTMLInputElement>(".a23");
-const showUnofficials = qs<HTMLInputElement>(".unofficials");
-const generateTotalPurchaseList = qs<HTMLInputElement>(".totalPurchaseList");
-
-function parseSettings(): Settings {
+export function parseSettings(): Settings {
     return {
-        dt: parseFloat(dtOtp.textContent ?? "1.5"),
-        ddt: parseFloat(ddtOtp.textContent ?? "1.0001"),
-        mfResetDepth: parseInt(mfDepthOtp.textContent ?? "0"),
-        boughtVarsDelta: parseInt(boughtVarsDeltaSlider.value),
-        theme: themeSelector.value,
-        simAllStrats: simAllStrats.value as SettingsSimAllStratsMode,
-        completedCTs: completedCTs.value as SettingsCompletedCTsMode,
-        showA23: showA23.checked,
-        showUnofficials: showUnofficials.checked,
-        totalPurchaseList: generateTotalPurchaseList.checked
+        dt: parseFloat(UI.settings.dtOtp.textContent ?? "1.5"),
+        ddt: parseFloat(UI.settings.ddtOtp.textContent ?? "1.0001"),
+        mfResetDepth: parseInt(UI.settings.mfDepthOtp.textContent ?? "0"),
+        boughtVarsDelta: parseInt(UI.settings.boughtVarsDeltaSlider.value),
+        theme: UI.settings.themeSelector.value,
+        simAllStrats: UI.settings.simAllStrats.value as SettingsSimAllStratsMode,
+        completedCTs: UI.settings.completedCTs.value as SettingsCompletedCTsMode,
+        showA23: UI.settings.showA23.checked,
+        showUnofficials: UI.settings.showUnofficials.checked,
+        totalPurchaseList: UI.settings.totalPurchaseList.checked
     }
 }
 
@@ -77,7 +52,7 @@ function parseCurrency(str: string, theory: theoryType, sigma: number, defaultTy
 }
 
 function parseSigma(required: boolean): number {
-    const str = sigmaInput.value.replace(" ", "");
+    const str = UI.controls.sigmaInput.value.replace(" ", "");
     const match = str.match(/^\d+$/g);
     if (match) {
         return parseInt(match[0]);
@@ -91,84 +66,84 @@ function parseSigma(required: boolean): number {
 }
 
 function parseSingleSim(): SingleSimQuery {
-    const theory = theorySelector.value as theoryType;
+    const theory = UI.controls.theorySelector.value as theoryType;
     const sigma = parseSigma(isMainTheory(theory));
 
     return {
         queryType: "single",
         theory: theory,
-        strat: stratSelector.value,
+        strat: UI.controls.stratSelector.value,
         sigma: sigma,
-        rho: parseCurrency(currencyInput.value, theory, sigma),
+        rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma),
         settings: parseSettings()
     }
 }
 
 function parseChainSim(): ChainSimQuery {
-    const theory = theorySelector.value as theoryType;
+    const theory = UI.controls.theorySelector.value as theoryType;
     const sigma = parseSigma(isMainTheory(theory));
 
     return {
         queryType: "chain",
         theory: theory,
-        strat: stratSelector.value,
+        strat: UI.controls.stratSelector.value,
         sigma: sigma,
-        rho: parseCurrency(currencyInput.value, theory, sigma),
-        cap: parseCurrency(capInput.value, theory, sigma),
-        hardCap: hardCap.checked,
+        rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma),
+        cap: parseCurrency(UI.controls.capInput.value, theory, sigma),
+        hardCap: UI.controls.hardCap.checked,
         settings: parseSettings()
     }
 }
 
 function parseStepSim(): StepSimQuery {
-    const theory = theorySelector.value as theoryType;
+    const theory = UI.controls.theorySelector.value as theoryType;
     const sigma = parseSigma(isMainTheory(theory));
 
     return {
         queryType: "step",
         theory: theory,
-        strat: stratSelector.value,
+        strat: UI.controls.stratSelector.value,
         sigma: sigma,
-        rho: parseCurrency(currencyInput.value, theory, sigma),
-        cap: parseCurrency(capInput.value, theory, sigma),
-        step: parseExponentialValue(modeInput.value),
+        rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma),
+        cap: parseCurrency(UI.controls.capInput.value, theory, sigma),
+        step: parseExponentialValue(UI.controls.extraInput.value),
         settings: parseSettings()
     }
 }
 
 function parseComparisonSim(): ComparisonSimQuery {
-    const theory = theorySelector.value as theoryType;
+    const theory = UI.controls.theorySelector.value as theoryType;
     const sigma = parseSigma(isMainTheory(theory));
 
     return {
         queryType: "comparison",
         theory: theory,
         sigma: sigma,
-        rho: parseCurrency(currencyInput.value, theory, sigma),
+        rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma),
         settings: parseSettings()
     }
 }
 
 function parseAmountSim(): AmountSimQuery {
-    const theory = theorySelector.value as theoryType;
+    const theory = UI.controls.theorySelector.value as theoryType;
     const sigma = parseSigma(isMainTheory(theory));
 
     return {
         queryType: "amount",
         theory: theory,
-        strat: stratSelector.value,
+        strat: UI.controls.stratSelector.value,
         sigma: sigma,
-        rho: parseCurrency(currencyInput.value, theory, sigma),
-        amount: parseInt(modeInput.value),
+        rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma),
+        amount: parseInt(UI.controls.extraInput.value),
         settings: parseSettings()
     }
 }
 
 function parseTimeSim(): TimeSimQuery {
-    const theory = theorySelector.value as theoryType;
+    const theory = UI.controls.theorySelector.value as theoryType;
     const sigma = parseSigma(isMainTheory(theory));
 
-    const timeStr = modeInput.value;
+    const timeStr = UI.controls.extraInput.value;
     const timeComponents = timeStr.matchAll(/(\d+)([ydhm])/g);
     let time = 0;
 
@@ -192,35 +167,35 @@ function parseTimeSim(): TimeSimQuery {
     return {
         queryType: "time",
         theory: theory,
-        strat: stratSelector.value,
+        strat: UI.controls.stratSelector.value,
         sigma: sigma,
-        rho: parseCurrency(currencyInput.value, theory, sigma),
+        rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma),
         time,
-        hardCap: hardCap.checked,
+        hardCap: UI.controls.hardCap.checked,
         settings: parseSettings()
     }
 }
 
 function parseStepChainSim(): StepChainQuery {
-    const theory = theorySelector.value as theoryType;
+    const theory = UI.controls.theorySelector.value as theoryType;
     const sigma = parseSigma(isMainTheory(theory));
 
     return {
         queryType: "step_chain",
         theory: theory,
-        strat: stratSelector.value,
+        strat: UI.controls.stratSelector.value,
         sigma: sigma,
-        rho: parseCurrency(currencyInput.value, theory, sigma),
-        cap: parseCurrency(capInput.value, theory, sigma),
-        step: parseExponentialValue(modeInput.value),
-        hardCap: hardCap.checked,
+        rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma),
+        cap: parseCurrency(UI.controls.capInput.value, theory, sigma),
+        step: parseExponentialValue(UI.controls.extraInput.value),
+        hardCap: UI.controls.hardCap.checked,
         settings: parseSettings()
     }
 }
 
 function parseSimAll(): SimAllQuery {
     const settings = parseSettings();
-    const str = simAllInputArea.value;
+    const str = UI.controls.simAllInputArea.value;
     let split = str.split(" ").map(s => s.replace("\n", "")).filter(s => s != "");
     
     const sigmaStr = split.shift() ?? "";
@@ -248,15 +223,15 @@ function parseSimAll(): SimAllQuery {
         queryType: "all",
         sigma: sigma,
         values: values,
-        veryActive: hard_active.checked,
-        semiIdle: semi_idle.checked,
+        veryActive: UI.controls.veryActiveToggle.checked,
+        semiIdle: UI.controls.semiIdleToggle.checked,
         stratType: settings.simAllStrats,
         settings: settings
     }
 }
 
 export function parseQuery(): SimQuery {
-    switch (modeSelector.value) {
+    switch (UI.controls.modeSelector.value) {
         case "All": return parseSimAll();
         case "Single sim": return parseSingleSim();
         case "Chain": return parseChainSim();
diff --git a/src/Sim/simulate.ts b/src/Sim/simulate.ts
index 9464cee..9013145 100644
--- a/src/Sim/simulate.ts
+++ b/src/Sim/simulate.ts
@@ -1,7 +1,6 @@
 import jsonData from "../Data/data.json" with { type: "json" };
 import { global } from "./main";
 import { convertTime, defaultResult, getBestResult, getTheoryFromIndex, logToExp, sleep } from "../Utils/helpers";
-import { qs } from "../Utils/DOMhelpers";
 import { getStrats } from "./strats";
 import t1 from "../Theories/T1-T8/T1";
 import t2 from "../Theories/T1-T8/T2";
@@ -22,8 +21,7 @@ import mf from "../Theories/CTs/MF";
 import bap from "../Theories/CTs/BaP";
 import bt from "../Theories/Unofficial-CTs/BT";
 import tc from "../Theories/Unofficial-CTs/TC";
-
-const output = qs(".output");
+import UI from "../UI/elements";
 
 const simFunction: { [key in theoryType]: ((data: theoryData) => Promise<simResult>) } = {
     T1: t1,
@@ -86,7 +84,7 @@ async function chainSim(query: ChainSimQuery, doLog = true): Promise<ChainSimRes
         const ts = performance.now();
         if (ts - lastLog > 250 && doLog) {
             lastLog = ts;
-            output.textContent = `Simulating ${logToExp(rho, 0)}/${stopStr}`;
+            UI.outputs.log.textContent = `Simulating ${logToExp(rho, 0)}/${stopStr}`;
             await sleep();
         }
 
@@ -130,7 +128,7 @@ async function amountSim(query: AmountSimQuery, doLog = true): Promise<ChainSimR
         const ts = performance.now();
         if (ts - lastLog > 250 && doLog) {
             lastLog = ts;
-            output.textContent = `Simulating ${i+1}/${query.amount} pubs`;
+            UI.outputs.log.textContent = `Simulating ${i+1}/${query.amount} pubs`;
             await sleep();
         }
 
@@ -174,7 +172,7 @@ async function timeSim(query: TimeSimQuery): Promise<ChainSimResponse> {
         const ts = performance.now();
         if (ts - lastLog > 250) {
             lastLog = ts;
-            output.textContent = `Simulating ${convertTime(time)}/${stopStr}`;
+            UI.outputs.log.textContent = `Simulating ${convertTime(time)}/${stopStr}`;
             await sleep();
         }
 
@@ -217,7 +215,7 @@ async function stepSim(query: StepSimQuery): Promise<StepSimResponse> {
         const ts = performance.now();
         if (ts - lastLog > 250) {
             lastLog = ts;
-            output.textContent = `Simulating ${logToExp(rho, 0)}/${stopStr}`;
+            UI.outputs.log.textContent = `Simulating ${logToExp(rho, 0)}/${stopStr}`;
             await sleep();
         }
 
@@ -271,7 +269,7 @@ async function simAll(query: SimAllQuery): Promise<SimAllResponse> {
         if (rho <= 0) continue;
         if (!global.simulating) break;
         
-        output.innerText = `Simulating ${theory}/${lastTheory}`;
+        UI.outputs.log.innerText = `Simulating ${theory}/${lastTheory}`;
         await sleep();
 
         const queryData: Omit<SingleSimQuery, "strat"> = {
@@ -322,7 +320,7 @@ async function stepChainSim(query: StepChainQuery): Promise<StepSimResponse> {
         const ts = performance.now();
         if (ts - lastLog > 250) {
             lastLog = ts;
-            output.textContent = `Simulating ${logToExp(rho, 0)}/${stopStr}`;
+            UI.outputs.log.textContent = `Simulating ${logToExp(rho, 0)}/${stopStr}`;
             await sleep();
         }
 
diff --git a/src/Sim/write.ts b/src/Sim/write.ts
index dbb5a37..8004823 100644
--- a/src/Sim/write.ts
+++ b/src/Sim/write.ts
@@ -1,18 +1,7 @@
 import jsonData from "../Data/data.json" with { type: "json" };
 import { convertTime, formatNumber, isMainTheory, logToExp } from "../Utils/helpers";
-import { qs, qsa, ce, event, removeAllChilds, downloadString, getTableHeaders, tau } from "../Utils/DOMhelpers";
-
-// Settings
-const generateTotalPurchaseList = qs<HTMLInputElement>(".totalPurchaseList");
-
-// Outputs
-const table = qs(".simTable");
-const theadRow = qs<HTMLTableRowElement>(".simTable > thead > tr");
-const tbody = qs(".simTable > tbody");
-
-const varBuyDialog = qs<HTMLDialogElement>(".boughtVars");
-const varBuyTable = qs<HTMLTableSectionElement>(".boughtVarsOtp");
-const varBuyListCloseBtn = qs<HTMLButtonElement>(".boughtVarsCloseBtn");
+import { qsa, ce, removeAllChilds, downloadString, getTableHeaders, tau, openDialog, bindDialogCloseEvents, hide } from "../Utils/DOMhelpers";
+import UI from "../UI/elements";
 
 const downloadIcon = '<svg xmlns="http://www.w3.org" width="24" height="24" viewBox="0 0 24 24" ' +
         'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"' +
@@ -32,24 +21,24 @@ let totalBuys: varBuy[] = [];
 
 // Utils
 function clearTable() {
-    removeAllChilds(tbody);
+    removeAllChilds(UI.outputs.tableBody);
 }
 function setTableClass(cl: ("big" | "small")) {
-    table.classList.remove("big", "small");
-    table.classList.add(cl);
+    UI.outputs.table.classList.remove("big", "small");
+    UI.outputs.table.classList.add(cl);
 }
 function setTableMode(mode: string) {
-    table.setAttribute("simMode", mode);
+    UI.outputs.table.setAttribute("simMode", mode);
 }
 function getTableMode(): string {
-    return table.getAttribute("simMode") ?? "";
+    return UI.outputs.table.getAttribute("simMode") ?? "";
 }
 function setTableHeaders(...headers: string[]) {
-    removeAllChilds(theadRow);
+    removeAllChilds(UI.outputs.tableHeadRow);
     headers.forEach(header => {
         const cell = ce("th");
         cell.innerHTML = header;
-        theadRow.appendChild(cell);
+        UI.outputs.tableHeadRow.appendChild(cell);
     })
 }
 
@@ -84,7 +73,7 @@ function makeVarBuyCsv(arr: varBuy[]): string {
 }
 
 function addVarBuyCell(row: HTMLTableRowElement, buys: varBuy[], addToTotal = true, rowspan = 1) {
-    if (addToTotal && generateTotalPurchaseList.checked) {
+    if (addToTotal && UI.settings.totalPurchaseList.checked) {
         totalBuys.push(...buys);
         totalBuys.push({variable: "---", level: 0, cost: 0, timeStamp: 0});
     }
@@ -136,23 +125,20 @@ function highlightResetCells() {
 
 /** Generates and open the var buy list */
 function openVarModal(arr: varBuy[]) {
-  document.body.style.overflow = "hidden";
-  varBuyDialog.showModal();
-  removeAllChilds(varBuyTable);
+  openDialog(UI.buyList.dialog);
+  removeAllChilds(UI.buyList.table);
   for (let varBuy of arr) {
     const row = ce<HTMLTableRowElement>("tr");
     addTableCell(row, varBuy.variable);
     addTableCell(row, varBuy.level.toString());
     addTableCell(row, `${logToExp(varBuy.cost, 2)}<span style="margin-left:.1em">${getCurrencySymbol(varBuy.symbol)}</span>`);
     addTableCell(row, convertTime(varBuy.timeStamp));
-    varBuyTable.appendChild(row);
+    UI.buyList.table.appendChild(row);
   }
   highlightResetCells();
 }
 
-event(varBuyListCloseBtn, "pointerdown", () => varBuyDialog.close());
-
-event(varBuyDialog, "close", () => document.body.style.overflow = "auto");
+bindDialogCloseEvents(UI.buyList.dialog, UI.buyList.closeBtn);
 
 // Response writers
 
@@ -169,7 +155,7 @@ function writeSingleSimResponse(response: SingleSimResponse) {
     addTableCell(row, res.tauH == 0 ? "0" : formatNumber(res.tauH));
     addTableCell(row, convertTime(res.time));
     addVarBuyCell(row, res.boughtVars);
-    tbody.append(row);
+    UI.outputs.tableBody.append(row);
 }
 
 function writeChainSimResponse(response: ChainSimResponse) {
@@ -196,15 +182,15 @@ function writeChainSimResponse(response: ChainSimResponse) {
     addTableCell(resRow, convertTime(response.totalTime));
 
     fillTableRow(labelRow, 1);
-    if(generateTotalPurchaseList.checked) {
+    if(UI.settings.totalPurchaseList.checked) {
         addVarBuyCell(resRow, totalBuys, false);
     }
     else {
         fillTableRow(resRow, 1);
     }
 
-    tbody.append(labelRow);
-    tbody.append(resRow);
+    UI.outputs.tableBody.append(labelRow);
+    UI.outputs.tableBody.append(resRow);
 }
 
 function writeStepSimResponse(response: StepSimResponse) {
@@ -212,12 +198,12 @@ function writeStepSimResponse(response: StepSimResponse) {
         responseType: "single",
         result: res
     }));
-    if (generateTotalPurchaseList.checked) {
+    if (UI.settings.totalPurchaseList.checked) {
         const resRow = ce<HTMLTableRowElement>("tr");
         fillTableRow(resRow, 8);
         addTableCell(resRow, "Total");
         addVarBuyCell(resRow, totalBuys, false);
-        tbody.append(resRow);
+        UI.outputs.tableBody.append(resRow);
     }
 }
 
@@ -259,8 +245,8 @@ function writeSimAllResponse(response: SimAllResponse) {
                 completeSimAllLine(rowActive, res.active);
                 completeSimAllLine(rowPassive, res.idle);
 
-                tbody.appendChild(rowActive);
-                tbody.appendChild(rowPassive);
+                UI.outputs.tableBody.appendChild(rowActive);
+                UI.outputs.tableBody.appendChild(rowPassive);
             }
             else {
                 const uniqueRes = response.stratType == "active" ? res.active : res.idle;
@@ -270,7 +256,7 @@ function writeSimAllResponse(response: SimAllResponse) {
                 addTableCell(row, logToExp(res.lastPub, 2));
                 completeSimAllLine(row, uniqueRes);
 
-                tbody.appendChild(row);
+                UI.outputs.tableBody.appendChild(row);
             }
         })
 
@@ -278,11 +264,11 @@ function writeSimAllResponse(response: SimAllResponse) {
             const bufferRow1 = ce<HTMLTableRowElement>("tr");
             const bufferRow2 = ce<HTMLTableRowElement>("tr");
 
-            bufferRow1.style.display = "none";
+            hide(bufferRow1);
             addTableCell(bufferRow2, "---");
 
-            tbody.appendChild(bufferRow1);
-            tbody.appendChild(bufferRow2);
+            UI.outputs.tableBody.appendChild(bufferRow1);
+            UI.outputs.tableBody.appendChild(bufferRow2);
         }
     })
 }
diff --git a/src/UI/buttonEvents.ts b/src/UI/buttonEvents.ts
index c3aa4fa..581089a 100644
--- a/src/UI/buttonEvents.ts
+++ b/src/UI/buttonEvents.ts
@@ -1,63 +1,44 @@
 import html2canvas from "html2canvas";
-import { qs, qsa, ce, event, removeAllChilds, downloadString, getTableHeaders } from "../Utils/DOMhelpers";
+import { qs, qsa, ce, event, removeAllChilds, downloadString, getTableHeaders, animateButton, hide, show } from "../Utils/DOMhelpers";
+import UI from "./elements";
+import { refreshDOMEventLoop } from "../Utils/helpers";
 
-//Buttons
-const clear = qs(".clear");
-const copyImage = qs<HTMLButtonElement>(".imageC");
-const downloadImage = qs(".imageD");
-const downloadCsv = qs(".csvD");
-const clearInput = qs(".clearInput");
-
-const saveDist = qs<HTMLButtonElement>(".saveDist");
-const getDist = qs(".getDist");
-const loadSaveButton = qs(".loadSave");
-const sigmaInput = qs<HTMLInputElement>(".sigma");
-const currencyInput = qs<HTMLInputElement>(".input");
-const capInput = qs<HTMLInputElement>(".cap");
-const simAllInputArea = qs<HTMLTextAreaElement>(".simAllInputArea");
-const modeInput = qs<HTMLTextAreaElement>(".modeInput");
-
-
-const output = qs(".output");
-const table = qs(".simTable");
-const tbody = qs(".simTable tbody");
-
-event(clear, "pointerdown", () => {
-  removeAllChilds(tbody);
-  output.textContent = "";
+event(UI.controls.clearResultsBtn, "pointerdown", () => {
+  removeAllChilds(UI.outputs.tableBody);
+  UI.outputs.log.textContent = "";
   console.clear();
 });
 
-event(clearInput, "pointerdown", () => {
-  sigmaInput.value = "";
-  currencyInput.value = "";
-  capInput.value = "";
-  simAllInputArea.value = "";
-  modeInput.value = "";
+event(UI.controls.clearInputsBtn, "pointerdown", () => {
+  UI.controls.sigmaInput.value = "";
+  UI.controls.currencyInput.value = "";
+  UI.controls.capInput.value = "";
+  UI.controls.simAllInputArea.value = "";
+  UI.controls.extraInput.value = "";
 })
 
-event(copyImage, "pointerdown", () => createImage(""));
-event(downloadImage, "pointerdown", () => createImage("download"));
-event(downloadCsv, "pointerdown", () => {
-  if (table.children[0].children[0].childElementCount == 0) {
+event(UI.controls.copyImageBtn, "pointerdown", async () => {await createImage("copy")});
+event(UI.controls.downloadImageBtn, "pointerdown", async () => {await createImage("download")});
+event(UI.controls.downloadCsvBtn, "pointerdown", () => {
+  if (UI.outputs.tableHeadRow.childElementCount == 0) {
     return;
   }
   downloadString(makeTableCsv(), "sim_results.csv");
 })
 
-function createImage(mode: string) {
-  if (table.children[0].children[0].childElementCount == 0) {
+async function createImage(mode: "download" | "copy") {
+  if (UI.outputs.tableHeadRow.childElementCount == 0) {
     return;
   }
 
-  const lastHeader = qs(".simTable thead tr th:last-child");
+  const lastHeader = UI.outputs.getLastTableHeader();
   const varBuyCells = qsa(".varBuyCell");
 
-  const initialLastHeaderDisplay = lastHeader.style.display;
-  lastHeader.style.display = "none";
-  varBuyCells.forEach((elem) => elem.style.display = "none");
+  hide(lastHeader);
+  varBuyCells.forEach((elem) => hide(elem));
+  await refreshDOMEventLoop();
 
-  html2canvas(table).then((canvas) =>
+  html2canvas(UI.outputs.table).then((canvas) =>
     canvas.toBlob((blob) => {
       if (mode === "download") {
         const a = ce<HTMLAnchorElement>("a");
@@ -70,48 +51,38 @@ function createImage(mode: string) {
           .write([new ClipboardItem({ "image/png": blob })])
           .then(() => {
             console.log("Sucsessfully created image and copied to clipboard!");
-            copyImage.disabled = true;
-            copyImage.innerHTML = "Copied!";
-            copyImage.classList.add("buttongreen");
-            setTimeout(() => {
-              copyImage.disabled = false;
-              copyImage.innerHTML = "Copy Image";
-              copyImage.classList.remove("buttongreen");
-            }, 1000);
-          })
-          .catch(() => console.log("Failed creating image."));
+            animateButton(UI.controls.copyImageBtn, "Copied!");
+          }).catch(() => console.log("Failed creating image."));
       }
     })
   )
   .catch(() => console.log("Failed creating image."));
 
-  lastHeader.style.display = initialLastHeaderDisplay;
-  varBuyCells.forEach((elem) => elem.style.display = "flex");
+  show(lastHeader);
+  varBuyCells.forEach((elem) => show(elem));
 }
 
 function makeTableCsv(): string {
-    const theadRow = qs(".simTable thead tr");
-
     let csvTotal = "";
 
-    if (table.classList.contains("big")) {
+    if (UI.outputs.table.classList.contains("big")) {
       let headers = getTableHeaders(
-        theadRow.children.length == 10 ? "all" : "all_one",
+        UI.outputs.tableHeadRow.children.length == 10 ? "all" : "all_one",
         "text",
-        Number(theadRow.children[0].innerHTML.match(/^\d+/))
+        Number(UI.outputs.tableHeadRow.children[0].innerHTML.match(/^\d+/))
       )
       csvTotal += headers.join(",") + ",\n";
       let rowIndex = 0;
-      while (rowIndex < tbody.children.length) {
-        let row = tbody.children[rowIndex];
+      while (rowIndex < UI.outputs.tableBody.children.length) {
+        let row = UI.outputs.tableBody.children[rowIndex];
         if (row.children.length >= 2) {
           if ((row.children[0] as HTMLTableCellElement).rowSpan == 2) {
             rowIndex++;
-            let nextRow = tbody.children[rowIndex];
+            let nextRow = UI.outputs.tableBody.children[rowIndex];
             let row1Content = [];
             let row2Content = [];
             let j = 0;
-            for (let i = 0; i < theadRow.children.length - 1; i++) {
+            for (let i = 0; i < UI.outputs.tableHeadRow.children.length - 1; i++) {
               if ((row.children[i] as HTMLTableCellElement).rowSpan == 2) {
                 row1Content.push(row.children[i].innerHTML);
                 row2Content.push(row.children[i].innerHTML);
@@ -126,7 +97,7 @@ function makeTableCsv(): string {
             csvTotal += row2Content.join(",") + ",\n";
           }
           else {
-            for (let i = 0; i < theadRow.children.length - 1; i++) {
+            for (let i = 0; i < UI.outputs.tableHeadRow.children.length - 1; i++) {
               csvTotal += row.children[i].innerHTML + ",";
             }
             csvTotal += "\n";
@@ -140,7 +111,7 @@ function makeTableCsv(): string {
       let h0match = headers[0].match(/<span[^>]*>(.*)<\/span>/);
       headers[0] = h0match == undefined ? headers[0] : (h0match.groups == undefined ? headers[0] : h0match.groups[0]);
       csvTotal += headers.join(",") + ",\n";
-      for (let row of tbody.children) {
+      for (let row of UI.outputs.tableBody.children) {
           if (row.children[0].innerHTML.trim().length == 0) {
             continue;
           }
@@ -154,25 +125,18 @@ function makeTableCsv(): string {
     return csvTotal;
 }
 
-event(saveDist, "pointerdown", () => {
-  const saveString = simAllInputArea.value;
+event(UI.controls.saveDistBtn, "pointerdown", () => {
+  const saveString = UI.controls.simAllInputArea.value;
   if (saveString.replace(" ", "").length === 0) return;
-  saveDist.disabled = true;
-  saveDist.innerHTML = "Saved!";
-  saveDist.classList.add("buttongreen");
   localStorage.setItem("savedDistribution", saveString);
-  setTimeout(() => {
-    saveDist.disabled = false;
-    saveDist.innerHTML = "Save distribution";
-    saveDist.classList.remove("buttongreen")
-  }, 1000);
+  animateButton(UI.controls.saveDistBtn, "Saved!");
 });
-event(getDist, "pointerdown", () => {
-  simAllInputArea.value = localStorage.getItem("savedDistribution") ?? simAllInputArea.value;
+event(UI.controls.getDistBtn, "pointerdown", () => {
+  UI.controls.simAllInputArea.value = localStorage.getItem("savedDistribution") ?? UI.controls.simAllInputArea.value;
 });
 
 export async function loadSave(): Promise<void> {
-  let presumedSaveFile = simAllInputArea.value.trim();
+  let presumedSaveFile = UI.controls.simAllInputArea.value.trim();
 
   return fetch("https://ex-save-loader.hotab.pw/load",{
     method: "POST",
@@ -183,13 +147,14 @@ export async function loadSave(): Promise<void> {
     body: JSON.stringify({savefile: presumedSaveFile})
   }).then(res => res.json()).then(r => {
     if(!r[1] || r[1] == "Not a savefile") {
-      output.textContent = "Error loading save file.";
+      UI.outputs.log.textContent = "Error loading save file.";
     } else {
-      simAllInputArea.value = r[1];
+      UI.controls.simAllInputArea.value = r[1];
+      animateButton(UI.controls.loadSaveBtn, "Loaded!")
     }
   }).catch(e => {
-    output.textContent = "Error loading save file.";
+    UI.outputs.log.textContent = "Error loading save file.";
   });
 }
 
-event(loadSaveButton, "pointerdown", loadSave);
\ No newline at end of file
+event(UI.controls.loadSaveBtn, "pointerdown", loadSave);
\ No newline at end of file
diff --git a/src/UI/elements.ts b/src/UI/elements.ts
new file mode 100644
index 0000000..24e43d5
--- /dev/null
+++ b/src/UI/elements.ts
@@ -0,0 +1,86 @@
+import { qs } from "../Utils/DOMhelpers";
+
+const UI = {
+    nav: {
+        instructionsBtn: qs<HTMLButtonElement>(".instructionsBtn"),
+        settingsBtn: qs<HTMLButtonElement>(".settingsBtn")
+    },
+    controls: {
+        baseWrapper: qs(".baseControlsWrapper"),
+
+        theorySelector: qs<HTMLSelectElement>(".theorySelector"),
+
+        stratSelectorWrapper: qs(".stratSelectionWrapper"),
+        stratSelector: qs<HTMLSelectElement>(".stratSelector"),
+
+        sigmaInput: qs<HTMLInputElement>(".sigmaInput"),
+        currencyInput: qs<HTMLInputElement>(".currencyInput"),
+        capInputWrapper: qs(".capInputWrapper"),
+        capInput: qs<HTMLInputElement>(".capInput"),
+
+        modeSelector: qs<HTMLSelectElement>(".modeSelector"),
+
+        hardCapWrapper: qs(".hardCapWrapper"),
+        hardCap: qs<HTMLInputElement>(".hardCapToggle"),
+
+        extraInputWrapper: qs(".extraInputWrapper"),
+        extraInputDesc: qs(".extraInputDescription"),
+
+        simAllInputWrapper: qs(".simAllInputWrapper"),
+        saveDistBtn: qs<HTMLButtonElement>(".saveDistBtn"),
+        semiIdleToggle: qs<HTMLInputElement>(".semiIdleToggle"),
+        veryActiveToggle: qs<HTMLInputElement>(".hardActiveToggle"),
+        getDistBtn: qs(".getDistBtn"),
+        loadSaveBtn: qs<HTMLButtonElement>(".loadSaveBtn"),
+
+        simAllInputArea: qs<HTMLTextAreaElement>(".simAllInputArea"),
+        extraInput: qs<HTMLTextAreaElement>(".extraInput"),
+
+        timeDiffWrapper: qs(".timeDiffWrapper"),
+
+        copyImageBtn: qs<HTMLButtonElement>(".copyImageBtn"),
+        downloadImageBtn: qs(".downloadImageBtn"),
+        downloadCsvBtn: qs(".downloadCsvBtn"),
+        clearResultsBtn: qs(".clearResultsBtn"),
+        clearInputsBtn: qs(".clearInputsBtn"),
+        simulateBtn: qs(".simulateBtn")
+    },
+    outputs: {
+        log: qs(".log"),
+        table: qs(".simTable"),
+        tableHeadRow: qs<HTMLTableRowElement>(".simTable > thead > tr"),
+        tableBody: qs(".simTable > tbody"),
+        getLastTableHeader: () => qs(".simTable thead tr th:last-child")
+    },
+    settings: {
+        dialog: qs<HTMLDialogElement>(".settings"),
+        closeBtn: qs<HTMLButtonElement>(".settingsCloseBtn"),
+        dtSlider: qs<HTMLInputElement>(".dt"),
+        dtOtp: qs(".dtOtp"),
+        ddtSlider: qs<HTMLInputElement>(".ddt"),
+        ddtOtp: qs(".ddtOtp"),
+        mfDepthSlider: qs<HTMLInputElement>(".mfDepth"),
+        mfDepthOtp: qs(".mfDepthOtp"),
+        boughtVarsDeltaSlider: qs<HTMLInputElement>(".boughtVarsDelta"),
+        boughtVarsDeltaOtp: qs(".boughtVarsDeltaOtp"),
+        resetBtn: qs(".resetSettings"),
+
+        themeSelector: qs<HTMLSelectElement>(".themeSelector"),
+        simAllStrats: qs<HTMLSelectElement>(".simallstrats"),
+        completedCTs: qs<HTMLSelectElement>(".completedcts"),
+        showA23: qs<HTMLInputElement>(".a23"),
+        showUnofficials: qs<HTMLInputElement>(".unofficials"),
+        totalPurchaseList: qs<HTMLInputElement>(".totalPurchaseList")
+    },
+    buyList: {
+        dialog: qs<HTMLDialogElement>(".boughtVars"),
+        closeBtn: qs<HTMLButtonElement>(".boughtVarsCloseBtn"),
+        table: qs<HTMLTableSectionElement>(".boughtVarsOtp")
+    },
+    instructions: {
+        dialog: qs<HTMLDialogElement>(".instructions"),
+        closeBtn: qs<HTMLButtonElement>(".instructionsCloseBtn")
+    }
+};
+
+export default UI;
\ No newline at end of file
diff --git a/src/UI/render.ts b/src/UI/render.ts
index b2c1c4d..a8535f0 100644
--- a/src/UI/render.ts
+++ b/src/UI/render.ts
@@ -1,29 +1,8 @@
 import data from "../Data/data.json" with { type: "json" };
 import { findIndex, getIndexFromTheory } from "../Utils/helpers";
-import { qs, qsa, event, ce, removeAllChilds } from "../Utils/DOMhelpers";
+import { event, ce, removeAllChilds, hide, show } from "../Utils/DOMhelpers";
 import { getSimState } from "./simState";
-
-//Inputs
-const theorySelector = qs<HTMLSelectElement>(".theory");
-const stratSelector = qs<HTMLSelectElement>(".strat");
-const capInputWrapper = qs(".capWrapper");
-const modeSelector = qs<HTMLSelectElement>(".mode");
-const sigmaInput = qs<HTMLInputElement>(".sigma");
-const currencyInput = qs<HTMLInputElement>(".input");
-const simAllInputArea = qs<HTMLTextAreaElement>(".simAllInputArea")
-const modeInput = qs<HTMLTextAreaElement>(".modeInput");
-const hardCapWrapper = qs(".hardCapWrapper");
-const themeSelector = qs<HTMLSelectElement>(".themeSelector");
-const showUnofficials = qs<HTMLInputElement>(".unofficials");
-
-//Other containers/elements
-const stratSelectionWrapper = qs("#stratSelectionWrapper");
-const extraInputs = qs(".extraInputs");
-const timeDiffWrapper = qs(".timeDiffWrapper");
-const singleInput = qsa(".controls")[0];
-const simAllInputs = qs(".simAllInputs");
-const modeInputDescription = qs(".extraInputDescription");
-
+import UI from "./elements";
 
 const theories = Object.keys(data.theories) as theoryType[];
 
@@ -38,110 +17,110 @@ function populateSelectElement(select: HTMLSelectElement, items: string[], clear
   }
 }
 function populateTheoryList(showUnofficials: boolean) {
-  populateSelectElement(theorySelector, theories.filter(theory => 
+  populateSelectElement(UI.controls.theorySelector, theories.filter(theory => 
     (data.theories as TheoryDataStructure)[theory].UI_visible !== false || showUnofficials));
 }
 
 //Renders theories, strats and modes options on page load
 
-populateSelectElement(themeSelector, data.themes);
-event(themeSelector, "change", themeUpdate);
+populateSelectElement(UI.settings.themeSelector, data.themes);
+event(UI.settings.themeSelector, "change", themeUpdate);
 
 getSimState();
 
-populateSelectElement(modeSelector, data.modes);
+populateSelectElement(UI.controls.modeSelector, data.modes);
 modeUpdate();
-event(modeSelector, "input", modeUpdate);
+event(UI.controls.modeSelector, "input", modeUpdate);
 
-populateTheoryList(showUnofficials.checked);
+populateTheoryList(UI.settings.showUnofficials.checked);
 theoryUpdate();
-event(theorySelector, "change", theoryUpdate);
+event(UI.controls.theorySelector, "change", theoryUpdate);
 
-event(showUnofficials, "click", () => {
-    populateTheoryList(showUnofficials.checked);
+event(UI.settings.showUnofficials, "click", () => {
+    populateTheoryList(UI.settings.showUnofficials.checked);
     theoryUpdate();
 });
 
 function populateSingleSimFields(rewriteCurrency: boolean = false): void {
   // Sigma field
-  const splits = simAllInputArea.value.replace("\n", "").split(" ").filter(s => s != "")
+  const splits = UI.controls.simAllInputArea.value.replace("\n", "").split(" ").filter(s => s != "")
 
-  if (sigmaInput.value == "" && splits.length > 0) {
+  if (UI.controls.sigmaInput.value == "" && splits.length > 0) {
     const match = splits[0].match(/^\d+$/g);
     if (match) {
-      sigmaInput.value = match[0];
+      UI.controls.sigmaInput.value = match[0];
     }
   }
 
-  if ((currencyInput.value == "" || rewriteCurrency) && theorySelector.value && splits.length > 1) {
-    const theoryIndex = getIndexFromTheory(theorySelector.value);
+  if ((UI.controls.currencyInput.value == "" || rewriteCurrency) && UI.controls.theorySelector.value && splits.length > 1) {
+    const theoryIndex = getIndexFromTheory(UI.controls.theorySelector.value);
     if (splits.length > theoryIndex + 1) {
       const str = splits[theoryIndex + 1];
       const match = str.match(/^e?\d+(\.\d+)?[rtm]?$/) || str.match(/^\d+(\.\d+)?e\d+[rtm]?$/);
       if (match) {
-        currencyInput.value = /[rtm]/.test(str) ? str : str.concat("t");
+        UI.controls.currencyInput.value = /[rtm]/.test(str) ? str : str.concat("t");
       }
     }
     else if (rewriteCurrency) {
-      currencyInput.value = "";
+      UI.controls.currencyInput.value = "";
     }
   }
 }
 
 function modeUpdate(): void {
-  const newMode = modeSelector.value;
-
+  const newMode = UI.controls.modeSelector.value;
 
-  singleInput.style.display = "none";
-  capInputWrapper.style.display = "none";
-  hardCapWrapper.style.display = "none";
+  hide(UI.controls.baseWrapper);
+  hide(UI.controls.capInputWrapper);
+  hide(UI.controls.hardCapWrapper);
 
-  stratSelectionWrapper.style.display = "none";
-  extraInputs.style.display = "none";
-  simAllInputs.style.display = "none";
-  simAllInputArea.style.display = "none";
-  modeInputDescription.style.display = "inline";
-  modeInput.style.display = "none";
-  timeDiffWrapper.style.display = "none";
+  hide(UI.controls.stratSelectorWrapper);
+  hide(UI.controls.extraInputWrapper)
+  hide(UI.controls.simAllInputWrapper);
+  hide(UI.controls.simAllInputArea);
+  show(UI.controls.extraInputDesc);
+  hide(UI.controls.extraInput);
+  hide(UI.controls.timeDiffWrapper);
 
   // Displays the strat selector
-  if (newMode !== "Comparison") stratSelectionWrapper.style.display = "block";
+  if (newMode !== "Comparison") show(UI.controls.stratSelectorWrapper);
   // Displays the single-theory inputs
-  if (newMode !== "All" && newMode !== "Time diff.") singleInput.style.display = "grid";
+  if (newMode !== "All" && newMode !== "Time diff.") show(UI.controls.baseWrapper);
   // Displays the cap input for chain/steps mode
-  if (newMode === "Chain" || newMode === "Steps" || newMode === "StepChain") capInputWrapper.style.display = "inline";
+  if (newMode === "Chain" || newMode === "Steps" || newMode === "StepChain") show(UI.controls.capInputWrapper);
   // Displays the hard cap input
-  if (newMode === "Chain" || newMode == "StepChain" /*|| newMode == "Time"*/) hardCapWrapper.style.display = "block";
+  if (newMode === "Chain" || newMode == "StepChain" /*|| newMode == "Time"*/) show(UI.controls.hardCapWrapper);
 
   // Extra Inputs
-  if (newMode !== "Single sim" && newMode !== "Comparison" && newMode !== "Time diff." && newMode !== "Chain") extraInputs.style.display = "flex";
+  if (newMode !== "Single sim" && newMode !== "Comparison" && newMode !== "Time diff." && newMode !== "Chain") 
+    show(UI.controls.extraInputWrapper)
   if (newMode === "All") {
-    simAllInputs.style.display = "grid";
-    modeInputDescription.style.display = "none";
-    simAllInputArea.style.display = "block";
-    simAllInputArea.placeholder = data.modeInputPlaceholder[0];
+    show(UI.controls.simAllInputWrapper);
+    hide(UI.controls.extraInputDesc);
+    show(UI.controls.simAllInputArea);
+    UI.controls.simAllInputArea.placeholder = data.modeInputPlaceholder[0];
   }
   else {
-    modeInput.style.display = "block";
+    show(UI.controls.extraInput);
   }
-  modeInputDescription.textContent = data.modeInputDescriptions[findIndex(data.modes, newMode)];
-  modeInput.placeholder = data.modeInputPlaceholder[findIndex(data.modes, newMode)];
+  UI.controls.extraInputDesc.textContent = data.modeInputDescriptions[findIndex(data.modes, newMode)];
+  UI.controls.extraInput.placeholder = data.modeInputPlaceholder[findIndex(data.modes, newMode)];
   
-  if (newMode === "Time diff.") timeDiffWrapper.style.display = "grid";
+  if (newMode === "Time diff.") show(UI.controls.timeDiffWrapper);
 
   populateSingleSimFields();
 }
 
 function theoryUpdate() {
-  const currentTheory = theorySelector.value as theoryType;
+  const currentTheory = UI.controls.theorySelector.value as theoryType;
   const currentTheoryStrats = Object.keys(data.theories[currentTheory].strats).filter(
     (strat) => (data.theories as TheoryDataStructure)[currentTheory].strats[strat].UI_visible !== false
   );
-  populateSelectElement(stratSelector, data.stratCategories.concat(currentTheoryStrats));
+  populateSelectElement(UI.controls.stratSelector, data.stratCategories.concat(currentTheoryStrats));
   populateSingleSimFields(true);
 }
 
 function themeUpdate() {
   const root = document.documentElement;
-  root.setAttribute("theme", themeSelector.value);
+  root.setAttribute("theme", UI.settings.themeSelector.value);
 }
diff --git a/src/UI/settings.ts b/src/UI/settings.ts
index d66536d..dad35aa 100644
--- a/src/UI/settings.ts
+++ b/src/UI/settings.ts
@@ -1,73 +1,37 @@
 import { formatNumber, getddtFromSlider, getdtFromSlider } from "../Utils/helpers";
-import { qs, event } from "../Utils/DOMhelpers";
+import { bindDialogCloseEvents, event, openDialog } from "../Utils/DOMhelpers";
 import { setSimState } from "./simState";
+import UI from "./elements";
 
-// Settings menu
+event(UI.nav.settingsBtn, "pointerdown", () => openDialog(UI.settings.dialog));
+bindDialogCloseEvents(UI.settings.dialog, UI.settings.closeBtn, setSimState);
 
-const settingsBtn = qs<HTMLButtonElement>(".settingsBtn");
-const settingsCloseBtn = qs<HTMLButtonElement>(".settingsCloseBtn");
-const settingsModal = qs<HTMLDialogElement>(".settings");
+event(UI.nav.instructionsBtn, "pointerdown", () => openDialog(UI.instructions.dialog));
+bindDialogCloseEvents(UI.instructions.dialog, UI.instructions.closeBtn);
 
-event(settingsBtn, "pointerdown", () => {
-  settingsModal.showModal();
-  document.body.style.overflow = "hidden";
+event(UI.settings.dtSlider, "input", () => {
+  UI.settings.dtOtp.textContent = formatNumber(getdtFromSlider(parseFloat(UI.settings.dtSlider.value)), 4);
 });
 
-event(settingsCloseBtn, "pointerdown", () => settingsModal.close());
-
-event(settingsModal, "close", () => {
-  setSimState();
-  document.body.style.overflow = "auto";
-})
-
-// Instructions menu
-
-const instructionsBtn = qs<HTMLButtonElement>(".instructionsBtn");
-const instructionsCloseBtn = qs<HTMLButtonElement>(".instructionsCloseBtn");
-const instructionsModal = qs<HTMLDialogElement>(".instructions");
-
-event(instructionsBtn, "pointerdown", () => {
-  instructionsModal.showModal();
-  document.body.style.overflow = "hidden";
+event(UI.settings.ddtSlider, "input", () => {
+  UI.settings.ddtOtp.textContent = formatNumber(getddtFromSlider(parseFloat(UI.settings.ddtSlider.value)), 7)
 });
 
-event(instructionsCloseBtn, "pointerdown", () => instructionsModal.close());
-
-event(instructionsModal, "close", () => document.body.style.overflow = "auto");
-
-// Settings inputs
-
-const dtSlider = qs<HTMLInputElement>(".dt");
-const dtOtp = qs(".dtOtp");
-
-const ddtSlider = qs<HTMLInputElement>(".ddt");
-const ddtOtp = qs(".ddtOtp");
-
-const mfDepthSlider = qs<HTMLInputElement>(".mfDepth");
-const mfDepthOtp = qs(".mfDepthOtp");
-
-const boughtVarsDeltaSlider = qs<HTMLInputElement>(".boughtVarsDelta");
-const boughtVarsDeltaOtp = qs(".boughtVarsDeltaOtp");
-
-event(dtSlider, "input", () => {
-  dtOtp.textContent = formatNumber(getdtFromSlider(parseFloat(dtSlider.value)), 4);
-});
-
-event(ddtSlider, "input", () => {
-  ddtOtp.textContent = formatNumber(getddtFromSlider(parseFloat(ddtSlider.value)), 7)
-});
-
-event(mfDepthSlider, "input", () => mfDepthOtp.textContent = mfDepthSlider.value);
-
-event(boughtVarsDeltaSlider, "input", () => boughtVarsDeltaOtp.textContent = `e${boughtVarsDeltaSlider.value}ρ`);
-
-event(qs(".resetSettings"), "pointerdown", () => {
-  dtSlider.value = "8.1943";
-  dtOtp.textContent = "1.5";
-  ddtSlider.value = "2.71233";
-  ddtOtp.textContent = "1.0001";
-  boughtVarsDeltaSlider.value = "5";
-  boughtVarsDeltaOtp.textContent = "e5ρ";
-  mfDepthSlider.value = "0";
-  mfDepthOtp.textContent = "0";
+event(UI.settings.mfDepthSlider, "input", () => 
+  UI.settings.mfDepthOtp.textContent = UI.settings.mfDepthSlider.value
+);
+
+event(UI.settings.boughtVarsDeltaSlider, "input", () => 
+  UI.settings.boughtVarsDeltaOtp.textContent = `e${UI.settings.boughtVarsDeltaSlider.value}ρ`
+);
+
+event(UI.settings.resetBtn, "pointerdown", () => {
+  UI.settings.dtSlider.value = "8.1943";
+  UI.settings.dtOtp.textContent = "1.5";
+  UI.settings.ddtSlider.value = "2.71233";
+  UI.settings.ddtOtp.textContent = "1.0001";
+  UI.settings.boughtVarsDeltaSlider.value = "5";
+  UI.settings.boughtVarsDeltaOtp.textContent = "e5ρ";
+  UI.settings.mfDepthSlider.value = "0";
+  UI.settings.mfDepthOtp.textContent = "0";
 });
diff --git a/src/UI/simState.ts b/src/UI/simState.ts
index d9b492c..9979642 100644
--- a/src/UI/simState.ts
+++ b/src/UI/simState.ts
@@ -1,48 +1,27 @@
 import { round } from "../Utils/helpers";
-import { qs } from "../Utils/DOMhelpers";
-
-//Sim All Settings
-const semiIdle = qs<HTMLInputElement>(".semi-idle");
-const hardActive = qs<HTMLInputElement>(".hard-active");
-
-//Setting Inputs
-const dtSlider = qs<HTMLInputElement>(".dt");
-const dtOtp = qs(".dtOtp");
-
-const ddtSlider = qs<HTMLInputElement>(".ddt");
-const ddtOtp = qs(".ddtOtp");
-
-const mfDepthSlider = qs<HTMLInputElement>(".mfDepth");
-const mfDepthOtp = qs(".mfDepthOtp");
-
-const boughtVarsDeltaSlider = qs<HTMLInputElement>(".boughtVarsDelta");
-const boughtVarsDeltaOtp = qs(".boughtVarsDeltaOtp");
-
-const themeSelector = qs<HTMLSelectElement>(".themeSelector");
-
-const simAllStrats = qs<HTMLSelectElement>(".simallstrats");
-const completedCTs = qs<HTMLInputElement>(".completedcts");
-const showA23 = qs<HTMLInputElement>(".a23");
-const showUnofficials = qs<HTMLInputElement>(".unofficials");
+import UI from "./elements";
 
 const defaultState = `{"settings":{"dt":"1.5","ddt":"1.0001","showA23":false,"showUnofficials":false}}`;
 const defaultTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "classic";
 
 export function setSimState() {
-  localStorage.setItem("simAllSettings", JSON.stringify([semiIdle.checked, hardActive.checked]));
+  localStorage.setItem("simAllSettings", JSON.stringify([
+    UI.controls.semiIdleToggle.checked, 
+    UI.controls.veryActiveToggle.checked
+  ]));
   localStorage.setItem(
     "simState",
     JSON.stringify({
       settings: {
-        dt: dtOtp.textContent,
-        ddt: ddtOtp.textContent,
-        mfResetDepth: mfDepthOtp.textContent,
-        boughtVarsDelta: boughtVarsDeltaSlider.value,
-        simAllStrats: simAllStrats.value,
-        completedCTs: completedCTs.value,
-        showA23: showA23.checked,
-        showUnofficials: showUnofficials.checked,
-        theme: themeSelector.value
+        dt: UI.settings.dtOtp.textContent,
+        ddt: UI.settings.ddtOtp.textContent,
+        mfResetDepth: UI.settings.mfDepthOtp.textContent,
+        boughtVarsDelta: UI.settings.boughtVarsDeltaSlider.value,
+        simAllStrats: UI.settings.simAllStrats.value,
+        completedCTs: UI.settings.completedCTs.value,
+        showA23: UI.settings.showA23.checked,
+        showUnofficials: UI.settings.showUnofficials.checked,
+        theme: UI.settings.themeSelector.value
       },
     })
   );
@@ -50,26 +29,28 @@ export function setSimState() {
 export function getSimState() {
   //Sim All Settings
   const simAllSettings: [boolean, boolean] = JSON.parse(localStorage.getItem("simAllSettings") ?? "[true, false]");
-  semiIdle.checked = simAllSettings[0];
-  hardActive.checked = simAllSettings[1];
+  UI.controls.semiIdleToggle.checked = simAllSettings[0];
+  UI.controls.veryActiveToggle.checked = simAllSettings[1];
 
   // Sim Settings
   const state = JSON.parse(localStorage.getItem("simState") ?? defaultState);
 
-  dtOtp.textContent = state.settings.dt;
-  ddtOtp.textContent = state.settings.ddt;
-  mfDepthOtp.textContent = state.settings.mfResetDepth ?? "0";
-  boughtVarsDeltaOtp.textContent = `e${state.settings.boughtVarsDelta ?? 5}ρ`;
+  UI.settings.dtOtp.textContent = state.settings.dt;
+  UI.settings.ddtOtp.textContent = state.settings.ddt;
+  UI.settings.mfDepthOtp.textContent = state.settings.mfResetDepth ?? "0";
+  UI.settings.boughtVarsDeltaOtp.textContent = `e${state.settings.boughtVarsDelta ?? 5}ρ`;
   // Determines the slider position based on the stored value (see helpers.ts)
-  dtSlider.value = String(round(Math.log2((state.settings.dt - 0.15) / (4.9 / (1 + 2 ** parseFloat(dtSlider.max)))), 4));
-  ddtSlider.value = String(round(Math.log((state.settings.ddt - 1) / (0.3 / 3 ** parseFloat(ddtSlider.max))) / Math.log(3), 4));
-  mfDepthSlider.value = mfDepthOtp.textContent ?? "0";
-  boughtVarsDeltaSlider.value = state.settings.boughtVarsDelta ?? 5;
-
-  themeSelector.value = state.settings.theme ?? defaultTheme;
-  simAllStrats.value = state.settings.simAllStrats ?? "all";
-  completedCTs.value = state.settings.completedCTs ?? (state.settings.skipCompletedCTs === true ? "no" : "in");
+  UI.settings.dtSlider.value = 
+    String(round(Math.log2((state.settings.dt - 0.15) / (4.9 / (1 + 2 ** parseFloat(UI.settings.dtSlider.max)))), 4));
+  UI.settings.ddtSlider.value = 
+    String(round(Math.log((state.settings.ddt - 1) / (0.3 / 3 ** parseFloat(UI.settings.ddtSlider.max))) / Math.log(3), 4));
+  UI.settings.mfDepthSlider.value = UI.settings.mfDepthOtp.textContent ?? "0";
+  UI.settings.boughtVarsDeltaSlider.value = state.settings.boughtVarsDelta ?? 5;
+
+  UI.settings.themeSelector.value = state.settings.theme ?? defaultTheme;
+  UI.settings.simAllStrats.value = state.settings.simAllStrats ?? "all";
+  UI.settings.completedCTs.value = state.settings.completedCTs ?? (state.settings.skipCompletedCTs === true ? "no" : "in");
   //skipCompletedCTs.checked = state.settings.skipCompletedCTs ?? false;
-  showA23.checked = state.settings.showA23;
-  showUnofficials.checked = state.settings.showUnofficials ?? false;
+  UI.settings.showA23.checked = state.settings.showA23;
+  UI.settings.showUnofficials.checked = state.settings.showUnofficials ?? false;
 }
diff --git a/src/Utils/DOMhelpers.ts b/src/Utils/DOMhelpers.ts
index 8dcc38a..0db1217 100644
--- a/src/Utils/DOMhelpers.ts
+++ b/src/Utils/DOMhelpers.ts
@@ -15,7 +15,7 @@ export const qsa = <T extends HTMLElement>(name: string) => document.querySelect
 /** Alias of document.createElement */
 export const ce = <T extends HTMLElement>(type: string) => (document.createElement(type) as T) ?? raise(`HtmlElement ${type} could not be created.`);
 /** Adds an event listener to `element` */
-export const event = <T>(element: HTMLElement, eventType: string, callback: (e: T) => void) => element.addEventListener(eventType, (e) => callback(e as T));
+export const event = (element: HTMLElement, eventType: string, callback: (e?: Event) => void) => element.addEventListener(eventType, (e) => callback(e));
 
 /** Removes all childs of `element` */
 export const removeAllChilds = (element: HTMLElement) => {
@@ -45,6 +45,19 @@ export function downloadString(str: string, filename: string) {
     }
 }
 
+/**
+ * Returns the table headers
+ * @param tableType Type of table
+ * 
+ * "single": Single theory table
+ * 
+ * "all": All mode table with A/I comparison
+ * 
+ * "all_one": All mode without A/I comparison
+ * @param headerType Return type (html or text for csv export)
+ * @param sigma Sigma
+ * @returns List of table headers
+ */
 export function getTableHeaders(tableType: "single" | "all" | "all_one", headerType: "html" | "text", sigma?: number): string[] {
   if (tableType !== "single") {
       let headers = [
@@ -76,4 +89,63 @@ export function getTableHeaders(tableType: "single" | "all" | "all_one", headerT
     ];
     return headers;
   };
+}
+
+/**
+ * Animates a button by giving it a specific class for a given delay
+ * @param button Button to animate
+ * @param text Text to display
+ * @param delay Length of the animation in ms (default 1000)
+ * @param animateClass CSS class used for the animation (default "buttongreen")
+ */
+export function animateButton(button: HTMLButtonElement, text: string, delay = 1000, animateClass = "buttongreen") {
+  const previousText = button.innerHTML;
+  button.disabled = true;
+  button.innerHTML = text;
+  button.classList.add(animateClass);
+  setTimeout(() => {
+    button.disabled = false;
+    button.innerHTML = previousText;
+    button.classList.remove(animateClass);
+  }, delay);
+}
+
+/**
+ * Opens a dialog
+ * @param dialog Dialog to open
+ */
+export function openDialog(dialog: HTMLDialogElement) {
+  dialog.showModal();
+  document.body.style.overflow = "hidden";
+}
+
+/**
+ * Binds events to close a dialog properly
+ * @param dialog Dialog
+ * @param closeBtn Close button of the dialog
+ * @param onClosed Function to call when the dialog is closed (optional)
+ */
+export function bindDialogCloseEvents(dialog: HTMLDialogElement, closeBtn: HTMLButtonElement, onClosed?: () => void) {
+  event(closeBtn, "pointerdown", () => dialog.close());
+
+  event(dialog, "close", () => {
+    if (onClosed) onClosed();
+    document.body.style.overflow = "auto";
+  })
+}
+
+/**
+ * Hides an element by giving it the 'hidden' class
+ * @param element Element to hide
+ */
+export function hide(element: HTMLElement) {
+  element.classList.add("hidden");
+}
+
+/**
+ * Shows an element by removing the 'hidden' class from it
+ * @param element Element to show
+ */
+export function show(element: HTMLElement) {
+  element.classList.remove("hidden");
 }
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 019ede4..21072f8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,7 +8,8 @@ module.exports = {
       "./src/UI/buttonEvents.ts",
       "./src/UI/render.ts",
       "./src/UI/settings.ts",
-      "./src/UI/simState.ts"
+      "./src/UI/simState.ts",
+      "./src/UI/elements.ts"
     ],
   },
   output: {