diff --git a/docs/about.html b/docs/about.html
index d3fb6cd..9fca652 100644
--- a/docs/about.html
+++ b/docs/about.html
@@ -1,110 +1,82 @@
 <!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>
 
-<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>
+  <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>
+      </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>
       </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 class="footy">
+      Created by Derek Chen
+      <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>
-    <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>
-
+    <script src="main.js"></script>
+    <script src="colorScheme.js"></script>
+  </body>
 </html>
diff --git a/docs/changelog.html b/docs/changelog.html
index 367d7d3..8bd230c 100644
--- a/docs/changelog.html
+++ b/docs/changelog.html
@@ -35,50 +35,52 @@
         <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 class="wrapper">
+      <div class="about-text">
+        <h1>Changelog</h1>
       </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 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="card">
-          <h3>Follow Me</h3>
-          <p>Some text..</p>
+        <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>
-    <div class="footy">Created by Derek Chen
+    <div class="footy">
+      Created by Derek Chen
       <!-- because VAPA lecture was a bit boring that day -->
       <div>
-        <input type="checkbox" class="checkbox" id="colorToggle">
+        <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>
@@ -87,7 +89,12 @@
       </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">
+        frameborder="0"
+        scrolling="0"
+        width="100"
+        height="30"
+        title="GitHub"
+      >
       </iframe>
     </div>
   </body>
diff --git a/docs/index.html b/docs/index.html
index 745832e..a6f2963 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -36,8 +36,9 @@
   </nav>  
   <div class="wrapper">
     <div class="about-text" value="">
+      <h1>Intro</h1>
       <p>
-        This is a database tool to assist students of the University of Texas - Austin in the biannual scramble for
+        This is a database tool to assist students of the University of Texas at Austin in the biannual scramble for
         Jazz Appr- I mean course registration process.
       </p>
       <p>
diff --git a/docs/main.css b/docs/main.css
index eb83549..3b08dbd 100644
--- a/docs/main.css
+++ b/docs/main.css
@@ -177,7 +177,7 @@ h1 {
 }
 
 .default-card {
-    background-color: white;
+    background-color: var(--container-color);
     padding: 20px;
     margin-top: 20px;
 }
