diff --git a/docs/about.html b/docs/about.html
new file mode 100644
index 0000000..d3fb6cd
--- /dev/null
+++ b/docs/about.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset='utf-8'>
+  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+  <title>About - UT Austin Grade Distribution Viewer</title>
+  <link rel="icon" href="favicon.io">
+  <meta name="description" content="An up to date grade distribution viewer for students at the University of Texas at Austin">  
+  <meta name="author" content="Derek Chen">
+  <meta name="keywords" content="UT, University of Texas at Austin, Grade viewer, grade distribution viewer, derex, grade distribution, ut austin">
+  <meta name="language" content="English">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+  </script>
+</head>
+
+<body>
+  <nav>
+    <ul>
+        <li><a href="/docs/index.html">Home</a></li>
+        <li><a href="/docs/about.html">About</a></li>
+        <li><a href="/docs/changelog.html">Changelog</a></li>
+    </ul>
+  </nav>  
+  <div class="wrapper">
+    <div class="about-text" value="">
+      <h1>About</h1>
+      <p>
+        This is a database tool to assist students of the University of Texas - Austin in the biannual scramble for
+        Jazz Appr- I mean course registration process.
+      </p>
+      <p>
+        I noticed other grade sites used outdated data, so I made
+        my own. Enjoy!
+      </p>
+    </div>
+    <div class="bg-form">
+      <p>
+        Use the
+        <a href="https://registrar.utexas.edu/schedules">official course name</a>
+        whenever possible. 
+      </p>
+      <p>
+        Some departments have a space in the middle (e.g., "C S")
+      </p>
+      <br>
+      <form action="">
+        <!-- Data is separated into course number, course prefi;x, and course name-->
+        <label for="courseField">Department (e.g., "MUS"):</label>
+        <input type="text" id="courseField" name="fname" required><br><br>
+        <label for="courseNum">Course Number (e.g., "307"):</label>
+        <input type="text" id="courseNum" name="fname" required><br><br>
+        <label for="courseName">Course Name (Optional, for same-number classes (e.g., "UGS 303")):</label>
+        <input type="text" id="courseName" name="fname"><br><br>
+
+        <!-- <label for="sectionNum">Section Number (Optional, Experimental)</label>
+        <input type="text" id="sectionNum" name="fname" required><br><br> -->
+        <!-- <label for="courseInstructor">Instructor (Optional):</label>
+        <input type="text" id="courseInstructor" name="fname"><br><br> -->
+
+        <!-- Dropdown menu for semester selection -->
+        <form>
+          <label for="dropdown">Semester:</label>
+          <select id="semester" name="dropdown">
+            <option value="f2023">Fall 2023</option>
+            <option value="s2023">Summer 2023</option>
+            <option value="sp2023">Spring 2023</option>
+            <option value="f2022">Fall 2022</option>
+            <option value="s2022">Summer 2022</option>
+            <option value="sp2022">Spring 2022</option>
+            <option value="f2021">Fall 2021</option>
+            <option value="s2021">Summer 2021</option>
+            <option value="sp2021">Spring 2021</option>
+            <option value="f2020">Fall 2020</option>
+            <option value="s2020">Summer 2020</option>
+            <option value="sp2020">Spring 2020</option>
+          </select>
+          <br><br>
+        </form>
+        <button type="button" id="subBut" class="submit-button">Submit</button><br><br>
+      </form>
+      <div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw">
+        <!--Bar graph stuff-->
+        <canvas id="gradeBar" style="width:100%;height:100%;"></canvas>
+      </div>
+    </div>
+  </div>
+  <div class="footy">Created by Derek Chen
+    <!-- because VAPA lecture was a bit boring that day -->
+    <div>
+      <input type="checkbox" class="checkbox" id="colorToggle">
+      <label for="colorToggle" class="checkbox-label">
+        <i class="fas fa-moon"></i>
+        <i class="fas fa-sun"></i>
+        <span class="ball"></span>
+      </label>
+    </div>
+    <iframe
+      src="https://ghbtns.com/github-btn.html?user=Derec4&repo=ut-grade-distribution-viewer&type=star&count=true&size=large"
+      frameborder="0" scrolling="0" width="100" height="30" title="GitHub">
+    </iframe>
+  </div>
+  <script src='main.js'></script>
+  <script src='colorScheme.js'></script>
+</body>
+
+</html>
diff --git a/docs/changelog.html b/docs/changelog.html
new file mode 100644
index 0000000..367d7d3
--- /dev/null
+++ b/docs/changelog.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Changelog - UT Austin Grade Distribution Viewer</title>
+    <link rel="icon" href="favicon.io" />
+    <meta
+      name="description"
+      content="An up to date grade distribution viewer for students at the University of Texas at Austin"
+    />
+    <meta name="author" content="Derek Chen" />
+    <meta
+      name="keywords"
+      content="UT, University of Texas at Austin, Grade viewer, grade distribution viewer, derex, grade distribution, ut austin"
+    />
+    <meta name="language" content="English" />
+    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+    <style>
+      @media screen and (max-width: 800px) {
+        .leftcolumn,
+        .rightcolumn {
+          width: 100%;
+          padding: 0;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <nav>
+      <ul>
+        <li><a href="/docs/index.html">Home</a></li>
+        <li><a href="/docs/about.html">About</a></li>
+        <li><a href="/docs/changelog.html">Changelog</a></li>
+      </ul>
+    </nav>
+    
+  <div class="wrapper">
+    <div class="about-text">
+      <h1>Changelog</h1>
+    </div>
+    <div class="changelog-split-row">
+      <div class="column">
+        <div class="default-card">
+          <h2>TITLE HEADING</h2>
+          <h5>Title description, Dec 7, 2017</h5>
+          <p>Some text..</p>
+          <p>
+            Sunt in culpa qui officia deserunt mollit anim id est laborum
+            consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco.
+          </p>
+        </div>
+        <div class="default-card">
+          <h2>Made this page</h2>
+          <p>April 20, 2024</p>
+          <p>
+            Yay I fixed a ton of things today and made this page! Got the color
+            changing slider working way more smoothly now too so that's great.
+          </p>
+          <p>Can't believe this semester ends in 2 weeks</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="default-card">
+          <h2>About Me</h2>
+          <p>Just a simple student trying to make his way in the universe.</p>
+        </div>
+        <div class="card">
+          <h3>Follow Me</h3>
+          <p>Some text..</p>
+        </div>
+      </div>
+    </div>
+    </div>
+    <div class="footy">Created by Derek Chen
+      <!-- because VAPA lecture was a bit boring that day -->
+      <div>
+        <input type="checkbox" class="checkbox" id="colorToggle">
+        <label for="colorToggle" class="checkbox-label">
+          <i class="fas fa-moon"></i>
+          <i class="fas fa-sun"></i>
+          <span class="ball"></span>
+        </label>
+      </div>
+      <iframe
+        src="https://ghbtns.com/github-btn.html?user=Derec4&repo=ut-grade-distribution-viewer&type=star&count=true&size=large"
+        frameborder="0" scrolling="0" width="100" height="30" title="GitHub">
+      </iframe>
+    </div>
+  </body>
+</html>
diff --git a/docs/index.html b/docs/index.html
index eeeaaf4..745832e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -29,14 +29,13 @@
 <body>
   <nav>
     <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">About</a></li>
-        <li><a href="#">Changelog</a></li>
+        <li><a href="/docs/index.html">Home</a></li>
+        <li><a href="/docs/about.html">About</a></li>
+        <li><a href="/docs/changelog.html">Changelog</a></li>
     </ul>
   </nav>  
   <div class="wrapper">
     <div class="about-text" value="">
-      <h1>About</h1>
       <p>
         This is a database tool to assist students of the University of Texas - Austin in the biannual scramble for
         Jazz Appr- I mean course registration process.
diff --git a/docs/main.css b/docs/main.css
index 382c0b4..eb83549 100644
--- a/docs/main.css
+++ b/docs/main.css
@@ -26,7 +26,7 @@ body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
-
+    justify-content: center;
 }
 
 body.dark {
@@ -52,6 +52,8 @@ nav ul {
     list-style-type: none;
     padding: 0;
     text-align: center;
+    width: auto;
+    margin-left: 50px;
 }
 
 nav ul li {
@@ -168,6 +170,25 @@ h1 {
     margin: 0 0 1rem 0
 }
 
+.column {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.default-card {
+    background-color: white;
+    padding: 20px;
+    margin-top: 20px;
+}
+
+.changelog-split-row {
+    content: "";
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
 .checkbox {
     opacity: 0;
     position: absolute;
