diff --git a/docs/index.html b/docs/index.html
index 0a900d8..1464717 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,143 +1,203 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-Z5B0S1WMC4"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
 
-<head>
-  <!-- Google tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z5B0S1WMC4"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() { dataLayer.push(arguments); }
-    gtag('js', new Date());
+      gtag("config", "G-Z5B0S1WMC4");
+    </script>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>UT Austin Grade Distribution Viewer</title>
+    <link rel="icon" href="favicon.ico" />
+    <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, Austin, Grade, Distribution, Grades, University of Texas, UT Austin, ut grade distributions, ut grades plus, grades+"
+    />
+    <meta
+      property="og:description"
+      content="Explore UT Austin's grade distributions with two simple clicks!"
+    />
+    <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>
 
-    gtag('config', 'G-Z5B0S1WMC4');
-  </script>
-  <meta charset='utf-8'>
-  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
-  <title>UT Austin Grade Distribution Viewer</title>
-  <link rel="icon" href="favicon.ico">
-  <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, Austin, Grade, Distribution, Grades, University of Texas, UT Austin, ut grade distributions, ut grades plus, grades+">
-  <meta property="og:description" content="Explore UT Austin's grade distributions with two simple clicks!">
-  <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> -->
-        <li><a href="https://derec4.github.io/ut-grade-distribution-viewer/index">Home</a></li>
-        <li><a href="https://derec4.github.io/ut-grade-distribution-viewer/about">About</a></li>
-        <li><a href="https://derec4.github.io/ut-grade-distribution-viewer/changelog">Changelog</a></li>
+        <li>
+          <a href="https://derec4.github.io/ut-grade-distribution-viewer/index"
+            >Home</a
+          >
+        </li>
+        <li>
+          <a href="https://derec4.github.io/ut-grade-distribution-viewer/about"
+            >About</a
+          >
+        </li>
+        <li>
+          <a
+            href="https://derec4.github.io/ut-grade-distribution-viewer/changelog"
+            >Changelog</a
+          >
+        </li>
         <div class="top-left">
-          <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>
             <span class="ball"></span>
           </label>
         </div>
-    </ul>
-  </nav>  
-  <div class="wrapper">
-    <div class="about-text" value="">
-      <h1>Intro</h1>
-      <p>
-        This is a database tool to assist students of the <a href="https://en.wikipedia.org/wiki/University_of_Texas_at_Austin">University of Texas at Austin</a> 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>
-        for best results. 
-      </p>
-      <p>
-        Some departments have a space in the middle (e.g., "C S")
-      </p>
-      <p>Course Name is optional, but used for duplicate ID courses (e.g. "UGS 303")</p>
-      <br>
-      <form action="">
-        <!-- Data is separated into course number, course prefix, and course name-->
-        <div class="form-group">
-          <label for="courseField">Department (e.g. "MUS"):</label>
-          <input type="text" id="courseField" name="fname" required>
-        </div>
-        
-        <div class="form-group">
-          <label for="courseNum">Course Number (e.g. "307"):</label>
-          <input type="text" id="courseNum" name="fname" required>
-        </div>
-        
-        <div class="form-group">
-          <label for="courseName">Course Name (e.g. "JAZZ APPRECIATION-WB"):</label>
-          <input type="text" id="courseName" name="fname">
+      </ul>
+    </nav>
+    <div class="wrapper">
+      <div class="about-text" value="">
+        <h1>Intro</h1>
+        <p>
+          This is a database tool to assist students of the
+          <a href="https://en.wikipedia.org/wiki/University_of_Texas_at_Austin"
+            >University of Texas at Austin</a
+          >
+          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">
+        <div class="bg-form-blurb">
+          <p>
+            Use the
+            <a href="https://registrar.utexas.edu/schedules"
+              >official course name</a
+            >
+            for best results.
+          </p>
+          <p>Some departments have a space in the middle (e.g., "C S")</p>
+          <p>
+            Course Name is optional, but used for duplicate ID courses (e.g.
+            "UGS 303")
+          </p>
         </div>
+        <br />
+        <form action="">
+          <!-- Data is separated into course number, course prefix, and course name-->
+          <div class="form-group">
+            <label for="courseField">Department (e.g. "MUS"):</label>
+            <input type="text" id="courseField" name="fname" required />
+          </div>
 
-        <!-- <label for="sectionNum">Section Number (Optional, Experimental)</label>
+          <div class="form-group">
+            <label for="courseNum">Course Number (e.g. "307"):</label>
+            <input type="text" id="courseNum" name="fname" required />
+          </div>
+
+          <div class="form-group">
+            <label for="courseName"
+              >Course Name (e.g. "JAZZ APPRECIATION-WB"):</label
+            >
+            <input type="text" id="courseName" name="fname" />
+          </div>
+
+          <!-- <label for="sectionNum">Section Number (Optional, Experimental)</label>
         <input type="text" id="sectionNum" name="fname" required> -->
-        
-        <div class="form-group">
-          <label for="courseInstructor" title="This is an experimental option!">Instructor:</label>
-          <input type="text" id="courseInstructor" name="fname">
-        </div>
 
-        <!-- Dropdown menu for semester selection -->
-        <div class="form-group">
-          <label for="semester">Semester:</label>
-          <select id="semester" name="dropdown">
-            <option value="f2024">Fall 2024</option>
-            <option value="sp2024">Spring 2024</option>
-            <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>
+          <div class="form-group">
+            <label
+              for="courseInstructor"
+              title="This is an experimental option!"
+              >Instructor:</label
+            >
+            <input type="text" id="courseInstructor" name="fname" />
+          </div>
+
+          <!-- Dropdown menu for semester selection -->
+          <div class="form-group">
+            <label for="semester">Semester:</label>
+            <select id="semester" name="dropdown">
+              <option value="f2024">Fall 2024</option>
+              <option value="sp2024">Spring 2024</option>
+              <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>
+          </div>
+
+          <button type="button" id="subBut" class="submit-button">
+            Submit
+          </button>
+        </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>
-        
-        <button type="button" id="subBut" class="submit-button">Submit</button>
-      </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">
-    <div class="footy-interior">
-      <p>Created by <a href="https://www.linkedin.com/in/derekyujirchen/">Derek Chen.</a>
-      <!-- because VAPA lecture was a bit boring that day -->
-      Help keep the site up by <a href="https://www.paypal.com/donate/?business=ND35WHTPKM494&no_recurring=0&item_name=Help+support+our+grade+distribution+site+and+other+tools%21&currency_code=USD">donating!</a>
-      Report feedback <a href="https://github.com/DereC4/ut-grade-distribution-viewer/issues">here!</a></p>
-      <!-- <iframe
+    <div class="footy">
+      <div class="footy-interior">
+        <p>
+          Created by
+          <a href="https://www.linkedin.com/in/derekyujirchen/">Derek Chen.</a>
+          <!-- because VAPA lecture was a bit boring that day -->
+          Help keep the site up by
+          <a
+            href="https://www.paypal.com/donate/?business=ND35WHTPKM494&no_recurring=0&item_name=Help+support+our+grade+distribution+site+and+other+tools%21&currency_code=USD"
+            >donating!</a
+          >
+          Report feedback
+          <a
+            href="https://github.com/DereC4/ut-grade-distribution-viewer/issues"
+            >here!</a
+          >
+        </p>
+        <!-- <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>
     </div>
-  </div>
-  <script src='main.js'></script>
-  <script src='colorScheme.js'></script>
-  <script src='rememberSemester.js'></script>
-</body>
-
+    <script src="main.js"></script>
+    <script src="colorScheme.js"></script>
+    <script src="rememberSemester.js"></script>
+  </body>
 </html>
diff --git a/docs/main.css b/docs/main.css
index e52cc28..d9d0ab5 100644
--- a/docs/main.css
+++ b/docs/main.css
@@ -186,19 +186,26 @@ opacity: 1;
     display: flex;
     flex-direction: column;
     height: fit-content;
+    align-items: center;
+}
+
+.bg-form-blurb {
+    text-align: left;
+    align-items: flex-start;
 }
 
 .form-group {
     display: flex;
     flex-direction: column;
     margin-bottom: 15px;
-    text-align: center;
     align-items: center;
 }
 
 .form-group label {
     margin-bottom: 5px;
     font-weight: 500;
+    text-align: left;
+    width: 100%;
 }
 
 .form-group input,
@@ -209,6 +216,7 @@ opacity: 1;
     font-size: var(--p-size);
     width: 100%;
     max-width: 400px;
+    text-align: left;
 }
 
 .form-group input:focus,
