diff --git a/Web_Dashboard/app.py b/Web_Dashboard/app.py
index 6926070..188ad91 100644
--- a/Web_Dashboard/app.py
+++ b/Web_Dashboard/app.py
@@ -9,6 +9,10 @@ laptop_file = "/home/ravi/Documents/Git/iFixit-Repairability-Dashboard/laptop.cs
 
 @app.route('/')
 def index():
+    return render_template('index.html')
+
+@app.route('/worst-offenders')
+def worst_offenders():
     smartphone = []
     tablet = []
     laptop = []
@@ -61,7 +65,7 @@ def index():
                 message = row[0] + " " + row[1]
                 bad_laptop_3.append(message)
 
-    return render_template('index.html', smartphone=bad_smartphone, tablet=bad_tablet, laptop=bad_laptop,smartphone_3=bad_smartphone_3, tablet_3=bad_tablet_3, laptop_3=bad_laptop_3, smartphone_2=bad_smartphone_2, tablet_2=bad_tablet_2, laptop_2=bad_laptop_2)
+    return render_template('worst-offenders.html', smartphone=bad_smartphone, tablet=bad_tablet, laptop=bad_laptop,smartphone_3=bad_smartphone_3, tablet_3=bad_tablet_3, laptop_3=bad_laptop_3, smartphone_2=bad_smartphone_2, tablet_2=bad_tablet_2, laptop_2=bad_laptop_2)
 
 @app.route('/most-repairable')
 def most_repairable():
@@ -119,6 +123,326 @@ def most_repairable():
 
     return render_template('most-repairable.html', smartphone=good_smartphone, tablet=good_tablet, laptop=good_laptop,smartphone_3=good_smartphone_3, tablet_3=good_tablet_3, laptop_3=good_laptop_3, smartphone_2=good_smartphone_2, tablet_2=good_tablet_2, laptop_2=good_laptop_2)
 
+@app.route('/one')
+def one():
+    one_smartphone = []
+    one_tablet = []
+    one_laptop = []
+    with open(smartphone_file, 'r', newline='') as file:
+        smartphone = []
+        reader = csv.reader(file)
+        for row in reader:
+            smartphone.append(row)
+            if row[2] == '1':
+                message = row[0] + " " + row[1]
+                one_smartphone.append(message)
+    with open(tablet_file, 'r', newline='') as file:
+        tablet = []
+        reader = csv.reader(file)
+        for row in reader:
+            tablet.append(row)
+            if row[2] == '1':
+                message = row[0] + " " + row[1]
+                one_tablet.append(message)
+    with open(laptop_file, 'r', newline='') as file:
+        laptop = []
+        reader = csv.reader(file)
+        for row in reader:
+            laptop.append(row)
+            if row[2] == '1':
+                message = row[0] + " " + row[1]
+                one_laptop.append(message)
+
+    return render_template('one.html', smartphone=one_smartphone, tablet=one_tablet, laptop=one_laptop)
+
+@app.route('/two')
+def two():
+    two_smartphone = []
+    two_tablet = []
+    two_laptop = []
+    with open(smartphone_file, 'r', newline='') as file:
+        smartphone = []
+        reader = csv.reader(file)
+        for row in reader:
+            smartphone.append(row)
+            if row[2] == '2':
+                message = row[0] + " " + row[1]
+                two_smartphone.append(message)
+    with open(tablet_file, 'r', newline='') as file:
+        tablet = []
+        reader = csv.reader(file)
+        for row in reader:
+            tablet.append(row)
+            if row[2] == '2':
+                message = row[0] + " " + row[1]
+                two_tablet.append(message)
+    with open(laptop_file, 'r', newline='') as file:
+        laptop = []
+        reader = csv.reader(file)
+        for row in reader:
+            laptop.append(row)
+            if row[2] == '2':
+                message = row[0] + " " + row[1]
+                two_laptop.append(message)
+
+    return render_template('two.html', smartphone=two_smartphone, tablet=two_tablet, laptop=two_laptop)
+
+@app.route('/three')
+def three():
+    three_smartphone = []
+    three_tablet = []
+    three_laptop = []
+    with open(smartphone_file, 'r', newline='') as file:
+        smartphone = []
+        reader = csv.reader(file)
+        for row in reader:
+            smartphone.append(row)
+            if row[2] == '3':
+                message = row[0] + " " + row[1]
+                three_smartphone.append(message)
+    with open(tablet_file, 'r', newline='') as file:
+        tablet = []
+        reader = csv.reader(file)
+        for row in reader:
+            tablet.append(row)
+            if row[2] == '3':
+                message = row[0] + " " + row[1]
+                three_tablet.append(message)
+    with open(laptop_file, 'r', newline='') as file:
+        laptop = []
+        reader = csv.reader(file)
+        for row in reader:
+            laptop.append(row)
+            if row[2] == '3':
+                message = row[0] + " " + row[1]
+                three_laptop.append(message)
+
+    return render_template('three.html', smartphone=three_smartphone, tablet=three_tablet, laptop=three_laptop)
+
+@app.route('/four')
+def four():
+    four_smartphone = []
+    four_tablet = []
+    four_laptop = []
+    with open(smartphone_file, 'r', newline='') as file:
+        smartphone = []
+        reader = csv.reader(file)
+        for row in reader:
+            smartphone.append(row)
+            if row[2] == '4':
+                message = row[0] + " " + row[1]
+                four_smartphone.append(message)
+    with open(tablet_file, 'r', newline='') as file:
+        tablet = []
+        reader = csv.reader(file)
+        for row in reader:
+            tablet.append(row)
+            if row[2] == '4':
+                message = row[0] + " " + row[1]
+                four_tablet.append(message)
+    with open(laptop_file, 'r', newline='') as file:
+        laptop = []
+        reader = csv.reader(file)
+        for row in reader:
+            laptop.append(row)
+            if row[2] == '4':
+                message = row[0] + " " + row[1]
+                four_laptop.append(message)
+
+    return render_template('four.html', smartphone=four_smartphone, tablet=four_tablet, laptop=four_laptop)
+
+@app.route('/five')
+def five():
+    five_smartphone = []
+    five_tablet = []
+    five_laptop = []
+    with open(smartphone_file, 'r', newline='') as file:
+        smartphone = []
+        reader = csv.reader(file)
+        for row in reader:
+            smartphone.append(row)
+            if row[2] == '5':
+                message = row[0] + " " + row[1]
+                five_smartphone.append(message)
+    with open(tablet_file, 'r', newline='') as file:
+        tablet = []
+        reader = csv.reader(file)
+        for row in reader:
+            tablet.append(row)
+            if row[2] == '5':
+                message = row[0] + " " + row[1]
+                five_tablet.append(message)
+    with open(laptop_file, 'r', newline='') as file:
+        laptop = []
+        reader = csv.reader(file)
+        for row in reader:
+            laptop.append(row)
+            if row[2] == '5':
+                message = row[0] + " " + row[1]
+                five_laptop.append(message)
+
+    return render_template('five.html', smartphone=five_smartphone, tablet=five_tablet, laptop=five_laptop)
+
+@app.route('/six')
+def six():
+    six_smartphone = []
+    six_tablet = []
+    six_laptop = []
+    with open(smartphone_file, 'r', newline='') as file:
+        smartphone = []
+        reader = csv.reader(file)
+        for row in reader:
+            smartphone.append(row)
+            if row[2] == '6':
+                message = row[0] + " " + row[1]
+                six_smartphone.append(message)
+    with open(tablet_file, 'r', newline='') as file:
+        tablet = []
+        reader = csv.reader(file)
+        for row in reader:
+            tablet.append(row)
+            if row[2] == '6':
+                message = row[0] + " " + row[1]
+                six_tablet.append(message)
+    with open(laptop_file, 'r', newline='') as file:
+        laptop = []
+        reader = csv.reader(file)
+        for row in reader:
+            laptop.append(row)
+            if row[2] == '6':
+                message = row[0] + " " + row[1]
+                six_laptop.append(message)
+
+    return render_template('six.html', smartphone=six_smartphone, tablet=six_tablet, laptop=six_laptop)
+
+@app.route('/seven')
+def seven():
+    seven_smartphone = []
+    seven_tablet = []
+    seven_laptop = []
+    with open(smartphone_file, 'r', newline='') as file:
+        smartphone = []
+        reader = csv.reader(file)
+        for row in reader:
+            smartphone.append(row)
+            if row[2] == '7':
+                message = row[0] + " " + row[1]
+                seven_smartphone.append(message)
+    with open(tablet_file, 'r', newline='') as file:
+        tablet = []
+        reader = csv.reader(file)
+        for row in reader:
+            tablet.append(row)
+            if row[2] == '7':
+                message = row[0] + " " + row[1]
+                seven_tablet.append(message)
+    with open(laptop_file, 'r', newline='') as file:
+        laptop = []
+        reader = csv.reader(file)
+        for row in reader:
+            laptop.append(row)
+            if row[2] == '7':
+                message = row[0] + " " + row[1]
+                seven_laptop.append(message)
+
+    return render_template('seven.html', smartphone=seven_smartphone, tablet=seven_tablet, laptop=seven_laptop)
+
+@app.route('/eight')
+def eight():
+    eight_smartphone = []
+    eight_tablet = []
+    eight_laptop = []
+    with open(smartphone_file, 'r', newline='') as file:
+        smartphone = []
+        reader = csv.reader(file)
+        for row in reader:
+            smartphone.append(row)
+            if row[2] == '8':
+                message = row[0] + " " + row[1]
+                eight_smartphone.append(message)
+    with open(tablet_file, 'r', newline='') as file:
+        tablet = []
+        reader = csv.reader(file)
+        for row in reader:
+            tablet.append(row)
+            if row[2] == '8':
+                message = row[0] + " " + row[1]
+                eight_tablet.append(message)
+    with open(laptop_file, 'r', newline='') as file:
+        laptop = []
+        reader = csv.reader(file)
+        for row in reader:
+            laptop.append(row)
+            if row[2] == '8':
+                message = row[0] + " " + row[1]
+                eight_laptop.append(message)
+
+    return render_template('eight.html', smartphone=eight_smartphone, tablet=eight_tablet, laptop=eight_laptop)
+
+@app.route('/nine')
+def nine():
+    nine_smartphone = []
+    nine_tablet = []
+    nine_laptop = []
+    with open(smartphone_file, 'r', newline='') as file:
+        smartphone = []
+        reader = csv.reader(file)
+        for row in reader:
+            smartphone.append(row)
+            if row[2] == '9':
+                message = row[0] + " " + row[1]
+                nine_smartphone.append(message)
+    with open(tablet_file, 'r', newline='') as file:
+        tablet = []
+        reader = csv.reader(file)
+        for row in reader:
+            tablet.append(row)
+            if row[2] == '9':
+                message = row[0] + " " + row[1]
+                nine_tablet.append(message)
+    with open(laptop_file, 'r', newline='') as file:
+        laptop = []
+        reader = csv.reader(file)
+        for row in reader:
+            laptop.append(row)
+            if row[2] == '9':
+                message = row[0] + " " + row[1]
+                nine_laptop.append(message)
+
+    return render_template('nine.html', smartphone=nine_smartphone, tablet=nine_tablet, laptop=nine_laptop)
+
+@app.route('/ten')
+def ten():
+    ten_smartphone = []
+    ten_tablet = []
+    ten_laptop = []
+    with open(smartphone_file, 'r', newline='') as file:
+        smartphone = []
+        reader = csv.reader(file)
+        for row in reader:
+            smartphone.append(row)
+            if row[2] == '10':
+                message = row[0] + " " + row[1]
+                ten_smartphone.append(message)
+    with open(tablet_file, 'r', newline='') as file:
+        tablet = []
+        reader = csv.reader(file)
+        for row in reader:
+            tablet.append(row)
+            if row[2] == '10':
+                message = row[0] + " " + row[1]
+                ten_tablet.append(message)
+    with open(laptop_file, 'r', newline='') as file:
+        laptop = []
+        reader = csv.reader(file)
+        for row in reader:
+            laptop.append(row)
+            if row[2] == '10':
+                message = row[0] + " " + row[1]
+                ten_laptop.append(message)
+
+    return render_template('ten.html', smartphone=ten_smartphone, tablet=ten_tablet, laptop=ten_laptop)
 
 if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=1235) #Run the webserver2
+    from waitress import serve
+    serve(app, host="0.0.0.0", port=1235)
\ No newline at end of file
diff --git a/Web_Dashboard/static/styles.css b/Web_Dashboard/static/styles.css
index cb1fded..4853f21 100644
--- a/Web_Dashboard/static/styles.css
+++ b/Web_Dashboard/static/styles.css
@@ -3,13 +3,13 @@ body::-webkit-scrollbar {
 }
 
 body::-webkit-scrollbar-track {
-  background: #0d2f64;        /* color of the tracking area */
+  background: #040e1e;        /* color of the tracking area */
 }
 
 body::-webkit-scrollbar-thumb {
   background-color: blue;    /* color of the scroll thumb */
   border-radius: 20px;       /* roundness of the scroll thumb */
-  border: 3px solid #040e1e;  /* creates padding around scroll thumb */
+  border: 5px solid #040e1e;  /* creates padding around scroll thumb */
 }
 
 * {box-sizing: border-box;}
@@ -49,25 +49,14 @@ p {
   color: white;
 }
 
-a {
-  float: left;
-  color: white;
-  text-align: center;
-  padding: 12px;
-  text-decoration: none;
-  font-size: 18px;
-  line-height: 25px;
-  border-radius: 4px;
-}
-
 a.none {
   float: none;
-  color: dodgerblue;
+  color: yellow;
   text-align: inherit;
   padding: 0px;
   text-decoration: none;
   font-size: 16px;
-  line-height: 24px;
+  line-height: 12px;
   border-radius: 0px;
 }
 
@@ -88,6 +77,13 @@ a.overridefloat:hover {
 }
 
 a.text {
+  float: none;
+  color: white;
+  text-align: center;
+  padding: 12px;
+  text-decoration: none;
+  line-height: 25px;
+  border-radius: 4px;
   font-size: 25px;
   font-weight: bold;
   text-align: center;
@@ -122,7 +118,23 @@ a.active {
   width: 33.33%;
   width: calc(100% / 3);
   padding: 10px;
-  height: calc(100vh - 149px)
+  height: calc(100vh - 149px);
+}
+
+.column2 {
+  float: left;
+  width: 50%;
+  width: calc(100% / 2);
+  padding: 10px;
+  height: calc((100vh - 149px) / 2);
+}
+
+.column3 {
+  float: left;
+  width: 50%;
+  width: 100%;
+  padding: 10px;
+  height: calc(100vh - 149px);
 }
 
 .row:after {
@@ -139,20 +151,186 @@ a.active {
 @media screen and (max-width: 1200px) {
   .column {
     width: 100%;
-    height: calc((100vh - 222px)*0.5)
+    height: 100%;
   }
 }
 
-.column::-webkit-scrollbar {
+@media screen and (max-width: 1200px) {
+  .column2 {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.column::-webkit-scrollbar, .column2::-webkit-scrollbar, .column3::-webkit-scrollbar {
   width: 12px;               /* width of the entire scrollbar */
 }
 
-.column::-webkit-scrollbar-track {
-  background: #0d2f64;        /* color of the tracking area */
+.column::-webkit-scrollbar-track, .column2::-webkit-scrollbar-track, .column3::-webkit-scrollbar-track {
+  background: #040e1e;        /* color of the tracking area */
 }
 
-.column::-webkit-scrollbar-thumb {
+.column::-webkit-scrollbar-thumb, .column2::-webkit-scrollbar-thumb, .column3::-webkit-scrollbar-thumb {
   background-color: blue;    /* color of the scroll thumb */
   border-radius: 20px;       /* roundness of the scroll thumb */
-  border: 3px solid #040e1e;  /* creates padding around scroll thumb */
+  border: 5px solid #040e1e;  /* creates padding around scroll thumb */
+}
+
+.buttonall {
+  background-color: white;
+  border: none;
+  color: white;
+  padding: 16px 32px;
+  text-decoration: none;
+  color: black;
+  display: inline-block;
+  font-size: 20px;
+  margin: 4px 2px;
+  transition-duration: 0.2s;
+  cursor: pointer;
+}
+
+.button1 {
+  background-color: white;
+  color: black;
+  border: 5px solid #FF4136;
+  text-align: center;
+}
+
+.button1:hover {
+  background-color: #FF4136;
+  color: white;
+}
+
+.button2 {
+  background-color: white;
+  color: black;
+  border: 5px solid #FF612D;
+  text-align: center;
+}
+
+.button2:hover {
+  background-color: #FF612D;
+  color: white;
+}
+.button3 {
+  background-color: white;
+  color: black;
+  border: 5px solid #FF8124;
+  text-align: center;
+}
+
+.button3:hover {
+  background-color: #FF8124;
+  color: white;
+}
+.button4 {
+  background-color: white;
+  color: black;
+  border: 5px solid #FFA01B;
+  text-align: center;
+}
+
+.button4:hover {
+  background-color: #FFA01B;
+  color: white;
+}
+.button5 {
+  background-color: white;
+  color: black;
+  border: 5px solid #FFC012;
+  text-align: center;
+}
+
+.button5:hover {
+  background-color: #FFC012;
+  color: white;
+}
+.button6 {
+  background-color: white;
+  color: black;
+  border: 5px solid #D5C21B;
+  text-align: center;
+}
+
+.button6:hover {
+  background-color: #D5C21B;
+  color: white;
+}
+.button7 {
+  background-color: white;
+  color: black;
+  border: 5px solid #ABC524;
+  text-align: center;
+}
+
+.button7:hover {
+  background-color: #ABC524;
+  color: white;
+}
+.button8 {
+  background-color: white;
+  color: black;
+  border: 5px solid #82C72E;
+  text-align: center;
+}
+
+.button8:hover {
+  background-color: #82C72E;
+  color: white;
+}
+.button9 {
+  background-color: white;
+  color: black;
+  border: 5px solid #58CA37;
+  text-align: center;
+}
+
+.button9:hover {
+  background-color: #58CA37;
+  color: white;
+}
+.button10 {
+  background-color: white;
+  color: black;
+  border: 5px solid #2ECC40;
+  text-align: center;
+}
+
+.button10:hover {
+  background-color: #2ECC40;
+  color: white;
+}
+
+.buttonhardest {
+  background-color: white;
+  color: black;
+  border: 5px solid #FF4136;
+  text-align: center;
+}
+
+.buttonhardest:hover {
+  background-color: #FF4136;
+  color: white;
+}
+
+.buttonbest {
+  background-color: white;
+  color: black;
+  border: 5px solid #2ECC40;
+  text-align: center;
+}
+
+.buttonbest:hover {
+  background-color: #2ECC40;
+  color: white;
+}
+
+.centered {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  height: auto;
 }
diff --git a/Web_Dashboard/templates/eight.html b/Web_Dashboard/templates/eight.html
new file mode 100644
index 0000000..37c26f8
--- /dev/null
+++ b/Web_Dashboard/templates/eight.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>8 out of 10 iFixit Repairability Score</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+    <link href="static/styles.css" rel="stylesheet" media="screen">
+    <link rel="manifest" href="static/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+  </head>
+  <body>
+    <div class="header">
+      <a href="/" class="text">8/10</a>
+    </div>
+    <div class="row">
+      <div class="column3" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin;">
+        <p style="text-align:center; font-size: 25px; color: #82C72E;">Devices that scored a 8 out of 10 on the iFixit Repairability Score. Pretty great!</p>
+        <h2>Smartphones</h2>
+        <div class="list">
+          <p>
+            {% for each in smartphone %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Tablets</h2>
+        <div class="list">
+          <p>
+            {% for each in tablet %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Laptops</h2>
+        <div class="list">
+          <p>
+            {% for each in laptop %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="header" style="padding: 25px 10px;">
+      <p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Web_Dashboard/templates/five.html b/Web_Dashboard/templates/five.html
new file mode 100644
index 0000000..439095f
--- /dev/null
+++ b/Web_Dashboard/templates/five.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>5 out of 10 iFixit Repairability Score</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+    <link href="static/styles.css" rel="stylesheet" media="screen">
+    <link rel="manifest" href="static/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+  </head>
+  <body>
+    <div class="header">
+      <a href="/" class="text">5/10</a>
+    </div>
+    <div class="row">
+      <div class="column3" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin;">
+        <p style="text-align:center; font-size: 25px; color: #FFC012;">Devices that scored a 5 out of 10 on the iFixit Repairability Score. Pretty bad!</p>
+        <h2>Smartphones</h2>
+        <div class="list">
+          <p>
+            {% for each in smartphone %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Tablets</h2>
+        <div class="list">
+          <p>
+            {% for each in tablet %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Laptops</h2>
+        <div class="list">
+          <p>
+            {% for each in laptop %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="header" style="padding: 25px 10px;">
+      <p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Web_Dashboard/templates/four.html b/Web_Dashboard/templates/four.html
new file mode 100644
index 0000000..7f9138a
--- /dev/null
+++ b/Web_Dashboard/templates/four.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>4 out of 10 iFixit Repairability Score</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+    <link href="static/styles.css" rel="stylesheet" media="screen">
+    <link rel="manifest" href="static/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+  </head>
+  <body>
+    <div class="header">
+      <a href="/" class="text">4/10</a>
+    </div>
+    <div class="row">
+      <div class="column3" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin;">
+        <p style="text-align:center; font-size: 25px; color: #FFA01B;">Devices that scored a 4 out of 10 on the iFixit Repairability Score. Pretty bad!</p>
+        <h2>Smartphones</h2>
+        <div class="list">
+          <p>
+            {% for each in smartphone %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Tablets</h2>
+        <div class="list">
+          <p>
+            {% for each in tablet %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Laptops</h2>
+        <div class="list">
+          <p>
+            {% for each in laptop %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="header" style="padding: 25px 10px;">
+      <p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Web_Dashboard/templates/index.html b/Web_Dashboard/templates/index.html
index ed0de3c..4eb2723 100644
--- a/Web_Dashboard/templates/index.html
+++ b/Web_Dashboard/templates/index.html
@@ -1,7 +1,9 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
-    <title>Worst Offenders</title>
+    <title>iFixit Repairability Dashboard</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Find which devices are the most and least repairable, according to iFixit">
     <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
     <link href="static/styles.css" rel="stylesheet" media="screen">
     <link rel="manifest" href="static/site.webmanifest">
@@ -11,92 +13,31 @@
   </head>
   <body>
     <div class="header">
-      <a href="https://github.com/Rav4s/iFixit-Repairability-Dashboard" class="text">Worst Offenders</a>
+      <a href="#" class="text">iFixit Repairability Dashboard</a>
     </div>
     <div class="row">
-      <div class="column" style="background-color:#081c3d; overflow: auto; scrollbar-width: thin;">
-        <h2>Smartphones</h2>
-        <h3 style="color: #FF4136;">1/10</h3>
-        <div class="list">
-          <p>
-            {% for each in smartphone %}
-            <p>{{ each }}</p>
-            {% endfor %}
-          </p>
-        </div>
-        <h3 style="color: #FF8024;">2/10</h3>
-        <div class="list">
-          <p>
-            {% for each in smartphone_2 %}
-            <p>{{ each }}</p>
-            {% endfor %}
-          </p>
-        </div>
-        <h3 style="color: #FFC012;">3/10</h3>
-        <div class="list">
-          <p>
-            {% for each in smartphone_3 %}
-            <p>{{ each }}</p>
-            {% endfor %}
-          </p>
+      <div class="column2" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin; width: 100%;">
+        <p style="text-align:center; font-size: 25px;">Welcome to the iFixit Repairability Dashboard! Here you can find the repairability scores of many devices that iFixit has analyzed. Click a score below to get started!</p>
+        <div class="centered">
+          <div style="display:block; align-items:center; justify-content:center;"><a href="/one" class="button1 buttonall">1/10</a><a href="/two" class="button2 buttonall">2/10</a><a href="/three" class="button3 buttonall">3/10</a><a href="/four" class="button4 buttonall">4/10</a><a href="/five" class="button5 buttonall">5/10</a><a href="/six" class="button6 buttonall">6/10</a><a href="/seven" class="button7 buttonall">7/10</a><a href="/eight" class="button8 buttonall">8/10</a><a href="/nine" class="button9 buttonall">9/10</a><a href="/ten" class="button10 buttonall">10/10</a></div>
         </div>
       </div>
-      <div class="column" style="background-color:#06152e; overflow: auto; scrollbar-width: thin;">
-        <h2>Tablets</h2>
-        <h3 style="color: #FF4136;">1/10</h3>
-        <div class="list">
-          <p>
-            {% for each in tablet %}
-            <p>{{ each }}</p>
-            {% endfor %}
-          </p>
-        </div>
-        <h3 style="color: #FF8024;">2/10</h3>
-        <div class="list">
-          <p>
-            {% for each in tablet_2 %}
-            <p>{{ each }}</p>
-            {% endfor %}
-          </p>
-        </div>
-        <h3 style="color: #FFC012;">3/10</h3>
-        <div class="list">
-          <p>
-            {% for each in tablet_3 %}
-            <p>{{ each }}</p>
-            {% endfor %}
-          </p>
+    </div>
+    <div class="row">
+      <div class="column2" style="background-color:#081c3d; overflow: auto; scrollbar-width: thin;">
+        <h2 style="font-size: 25px;" class="centered">Ever wondered which devices are the hardest to repair? Find the laptops, tablets, and smartphones which have the worst iFixit Repairability Scores.</h2>
+        <div class="centered">
+          <a href="/worst-offenders" class="buttonhardest buttonall">Worst Offenders</a>
         </div>
       </div>
-      <div class="column" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin;">
-        <h2>Laptops</h2>
-        <h3 style="color: #FF4136;">1/10</h3>
-        <div class="list">
-          <p>
-            {% for each in laptop %}
-            <p>{{ each }}</p>
-            {% endfor %}
-          </p>
-        </div>
-        <h3 style="color: #FF8024;">2/10</h3>
-        <div class="list">
-          <p>
-            {% for each in laptop_2 %}
-            <p>{{ each }}</p>
-            {% endfor %}
-          </p>
-        </div>
-        <h3 style="color: #FFC012;">3/10</h3>
-        <div class="list">
-          <p>
-            {% for each in laptop_3 %}
-            <p>{{ each }}</p>
-            {% endfor %}
-          </p>
+      <div class="column2" style="background-color:#06152e; overflow: auto; scrollbar-width: thin;">
+        <h2 style="font-size: 25px;" class="centered">Want to find a device which is absolute repair bliss? Find the laptops, tablets, and smartphones which have the best iFixit Repairability Scores.</h2>
+        <div class="centered">
+          <a href="/most-repairable" class="buttonbest buttonall">Most Repairable Devices</a>
         </div>
       </div>
     </div>
-    <div class="header" style="padding: 10px 10px;">
+    <div class="header" style="padding: 25px 10px;">
       <p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
     </div>
   </body>
diff --git a/Web_Dashboard/templates/most-repairable.html b/Web_Dashboard/templates/most-repairable.html
index b1d3e64..81bb6b1 100644
--- a/Web_Dashboard/templates/most-repairable.html
+++ b/Web_Dashboard/templates/most-repairable.html
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <title>Most Repairable</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,7 +12,7 @@
   </head>
   <body>
     <div class="header">
-      <a href="https://github.com/Rav4s/iFixit-Repairability-Dashboard" class="text">Most Repairable</a>
+      <a href="/" class="text">Most Repairable</a>
     </div>
     <div class="row">
       <div class="column" style="background-color:#081c3d; overflow: auto; scrollbar-width: thin;">
@@ -96,7 +97,7 @@
         </div>
       </div>
     </div>
-    <div class="header" style="padding: 10px 10px;">
+    <div class="header" style="padding: 25px 10px;">
       <p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
     </div>
   </body>
diff --git a/Web_Dashboard/templates/nine.html b/Web_Dashboard/templates/nine.html
new file mode 100644
index 0000000..78b3674
--- /dev/null
+++ b/Web_Dashboard/templates/nine.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>9 out of 10 iFixit Repairability Score</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+    <link href="static/styles.css" rel="stylesheet" media="screen">
+    <link rel="manifest" href="static/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+  </head>
+  <body>
+    <div class="header">
+      <a href="/" class="text">9/10</a>
+    </div>
+    <div class="row">
+      <div class="column3" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin;">
+        <p style="text-align:center; font-size: 25px; color: #58CA37;">Devices that scored a 9 out of 10 on the iFixit Repairability Score. Awesome!</p>
+        <h2>Smartphones</h2>
+        <div class="list">
+          <p>
+            {% for each in smartphone %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Tablets</h2>
+        <div class="list">
+          <p>
+            {% for each in tablet %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Laptops</h2>
+        <div class="list">
+          <p>
+            {% for each in laptop %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="header" style="padding: 25px 10px;">
+      <p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Web_Dashboard/templates/one.html b/Web_Dashboard/templates/one.html
new file mode 100644
index 0000000..d0eed85
--- /dev/null
+++ b/Web_Dashboard/templates/one.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>1 out of 10 iFixit Repairability Score</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+    <link href="static/styles.css" rel="stylesheet" media="screen">
+    <link rel="manifest" href="static/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+  </head>
+  <body>
+    <div class="header" style="align-items: center;">
+      <a href="/" class="text">1/10</a>
+    </div>
+    <div class="row">
+      <div class="column3" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin;">
+        <p style="text-align:center; font-size: 25px; color: #FF4136;">Devices that scored a 1 out of 10 on the iFixit Repairability Score. Ouch!</p>
+        <h2>Smartphones</h2>
+        <div class="list">
+          <p>
+            {% for each in smartphone %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Tablets</h2>
+        <div class="list">
+          <p>
+            {% for each in tablet %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Laptops</h2>
+        <div class="list">
+          <p>
+            {% for each in laptop %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="header" style="padding: 25px 10px;">
+      <p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
+    </div>
+  </body>
+</html>
diff --git a/Web_Dashboard/templates/seven.html b/Web_Dashboard/templates/seven.html
new file mode 100644
index 0000000..964cb4c
--- /dev/null
+++ b/Web_Dashboard/templates/seven.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>7 out of 10 iFixit Repairability Score</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+    <link href="static/styles.css" rel="stylesheet" media="screen">
+    <link rel="manifest" href="static/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+  </head>
+  <body>
+    <div class="header">
+      <a href="/" class="text">7/10</a>
+    </div>
+    <div class="row">
+      <div class="column3" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin;">
+        <p style="text-align:center; font-size: 25px; color: #ABC524;">Devices that scored a 7 out of 10 on the iFixit Repairability Score. Starting to look up.</p>
+        <h2>Smartphones</h2>
+        <div class="list">
+          <p>
+            {% for each in smartphone %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Tablets</h2>
+        <div class="list">
+          <p>
+            {% for each in tablet %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Laptops</h2>
+        <div class="list">
+          <p>
+            {% for each in laptop %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="header" style="padding: 25px 10px;">
+      <p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Web_Dashboard/templates/six.html b/Web_Dashboard/templates/six.html
new file mode 100644
index 0000000..3035422
--- /dev/null
+++ b/Web_Dashboard/templates/six.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>6 out of 10 iFixit Repairability Score</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+    <link href="static/styles.css" rel="stylesheet" media="screen">
+    <link rel="manifest" href="static/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+  </head>
+  <body>
+    <div class="header">
+      <a href="/" class="text">6/10</a>
+    </div>
+    <div class="row">
+      <div class="column3" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin;">
+        <p style="text-align:center; font-size: 25px; color: #D5C21B;">Devices that scored a 6 out of 10 on the iFixit Repairability Score. Starting to look up.</p>
+        <h2>Smartphones</h2>
+        <div class="list">
+          <p>
+            {% for each in smartphone %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Tablets</h2>
+        <div class="list">
+          <p>
+            {% for each in tablet %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Laptops</h2>
+        <div class="list">
+          <p>
+            {% for each in laptop %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="header" style="padding: 25px 10px;">
+      <p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Web_Dashboard/templates/ten.html b/Web_Dashboard/templates/ten.html
new file mode 100644
index 0000000..6d7f3a7
--- /dev/null
+++ b/Web_Dashboard/templates/ten.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>10 out of 10 iFixit Repairability Score</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+    <link href="static/styles.css" rel="stylesheet" media="screen">
+    <link rel="manifest" href="static/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+  </head>
+  <body>
+    <div class="header">
+      <a href="/" class="text">10/10</a>
+    </div>
+    <div class="row">
+      <div class="column3" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin;">
+        <p style="text-align:center; font-size: 25px; color: #2ECC40;">Devices that scored a 10 out of 10 on the iFixit Repairability Score. Amazing!</p>
+        <h2>Smartphones</h2>
+        <div class="list">
+          <p>
+            {% for each in smartphone %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Tablets</h2>
+        <div class="list">
+          <p>
+            {% for each in tablet %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Laptops</h2>
+        <div class="list">
+          <p>
+            {% for each in laptop %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="header" style="padding: 25px 15px;">
+      <p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Web_Dashboard/templates/three.html b/Web_Dashboard/templates/three.html
new file mode 100644
index 0000000..b8e342f
--- /dev/null
+++ b/Web_Dashboard/templates/three.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>3 out of 10 iFixit Repairability Score</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+    <link href="static/styles.css" rel="stylesheet" media="screen">
+    <link rel="manifest" href="static/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+  </head>
+  <body>
+    <div class="header">
+      <a href="/" class="text">3/10</a>
+    </div>
+    <div class="row">
+      <div class="column3" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin;">
+        <p style="text-align:center; font-size: 25px; color: #FF8124;">Devices that scored a 3 out of 10 on the iFixit Repairability Score. Ouch!</p>
+        <h2>Smartphones</h2>
+        <div class="list">
+          <p>
+            {% for each in smartphone %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Tablets</h2>
+        <div class="list">
+          <p>
+            {% for each in tablet %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Laptops</h2>
+        <div class="list">
+          <p>
+            {% for each in laptop %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="header" style="padding: 25px 10px;">
+      <p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Web_Dashboard/templates/two.html b/Web_Dashboard/templates/two.html
new file mode 100644
index 0000000..ebae8db
--- /dev/null
+++ b/Web_Dashboard/templates/two.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>2 out of 10 iFixit Repairability Score</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+    <link href="static/styles.css" rel="stylesheet" media="screen">
+    <link rel="manifest" href="static/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+  </head>
+  <body>
+    <div class="header">
+      <a href="/" class="text">2/10</a>
+    </div>
+    <div class="row">
+      <div class="column3" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin;">
+        <p style="text-align:center; font-size: 25px; color: #FF612D;">Devices that scored a 2 out of 10 on the iFixit Repairability Score. Ouch!</p>
+        <h2>Smartphones</h2>
+        <div class="list">
+          <p>
+            {% for each in smartphone %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Tablets</h2>
+        <div class="list">
+          <p>
+            {% for each in tablet %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <br>
+        <h2>Laptops</h2>
+        <div class="list">
+          <p>
+            {% for each in laptop %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="header" style="padding: 25px 10px;">
+      <p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
+    </div>
+  </body>
+</html>
diff --git a/Web_Dashboard/templates/worst-offenders.html b/Web_Dashboard/templates/worst-offenders.html
new file mode 100644
index 0000000..9635059
--- /dev/null
+++ b/Web_Dashboard/templates/worst-offenders.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Worst Offenders</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+    <link href="static/styles.css" rel="stylesheet" media="screen">
+    <link rel="manifest" href="static/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+  </head>
+  <body>
+    <div class="header">
+      <a href="/" class="text">Worst Offenders</a>
+    </div>
+    <div class="row">
+      <div class="column" style="background-color:#081c3d; overflow: auto; scrollbar-width: thin;">
+        <h2>Smartphones</h2>
+        <h3 style="color: #FF4136;">1/10</h3>
+        <div class="list">
+          <p>
+            {% for each in smartphone %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <h3 style="color: #FF8024;">2/10</h3>
+        <div class="list">
+          <p>
+            {% for each in smartphone_2 %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <h3 style="color: #FFC012;">3/10</h3>
+        <div class="list">
+          <p>
+            {% for each in smartphone_3 %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+      </div>
+      <div class="column" style="background-color:#06152e; overflow: auto; scrollbar-width: thin;">
+        <h2>Tablets</h2>
+        <h3 style="color: #FF4136;">1/10</h3>
+        <div class="list">
+          <p>
+            {% for each in tablet %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <h3 style="color: #FF8024;">2/10</h3>
+        <div class="list">
+          <p>
+            {% for each in tablet_2 %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <h3 style="color: #FFC012;">3/10</h3>
+        <div class="list">
+          <p>
+            {% for each in tablet_3 %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+      </div>
+      <div class="column" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin;">
+        <h2>Laptops</h2>
+        <h3 style="color: #FF4136;">1/10</h3>
+        <div class="list">
+          <p>
+            {% for each in laptop %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <h3 style="color: #FF8024;">2/10</h3>
+        <div class="list">
+          <p>
+            {% for each in laptop_2 %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+        <h3 style="color: #FFC012;">3/10</h3>
+        <div class="list">
+          <p>
+            {% for each in laptop_3 %}
+            <p>{{ each }}</p>
+            {% endfor %}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="header" style="padding: 25px 10px;">
+      <p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
+    </div>
+  </body>
+</html>