diff --git a/static/style/output.css b/static/style/output.css
index 76a30d8..66aab13 100644
--- a/static/style/output.css
+++ b/static/style/output.css
@@ -552,6 +552,10 @@ video {
   margin: 0.5rem;
 }
 
+.m-4 {
+  margin: 1rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -573,6 +577,10 @@ video {
   margin-top: 1rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .block {
   display: block;
 }
@@ -581,6 +589,10 @@ video {
   display: flex;
 }
 
+.table {
+  display: table;
+}
+
 .grid {
   display: grid;
 }
@@ -590,6 +602,14 @@ video {
   width: fit-content;
 }
 
+.w-full {
+  width: 100%;
+}
+
+.border-collapse {
+  border-collapse: collapse;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -602,10 +622,6 @@ video {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.content-center {
-  align-content: center;
-}
-
 .items-center {
   align-items: center;
 }
@@ -622,6 +638,10 @@ video {
   border-radius: 0.375rem;
 }
 
+.border {
+  border-width: 1px;
+}
+
 .border-2 {
   border-width: 2px;
 }
@@ -636,11 +656,6 @@ video {
   background-color: rgb(15 23 42 / var(--tw-bg-opacity));
 }
 
-.bg-gray-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
 .bg-neutral-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
@@ -650,6 +665,20 @@ video {
   padding: 0.5rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -681,6 +710,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .font-black {
   font-weight: 900;
 }
diff --git a/templates/skills.html b/templates/skills.html
index a776b46..d96ba7f 100644
--- a/templates/skills.html
+++ b/templates/skills.html
@@ -3,23 +3,33 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/img/favicon.ico" />
+    <link rel="stylesheet" href="../static/style/output.css" />
     <title>Skills Data</title>
   </head>
-  <body>
-    <h1>Skills Data</h1>
-    <table border="1">
-      <tr>
-        {% for key in csv_data[0].keys() %}
-        <th>{{ key }}</th>
-        {% endfor %}
-      </tr>
-      {% for row in csv_data %}
-      <tr>
-        {% for value in row.values() %}
-        <td>{{ value }}</td>
-        {% endfor %}
-      </tr>
-      {% endfor %}
-    </table>
+  <body
+    class="flex items-center justify-center p-4 m-4 font-mono text-white bg-neutral-800"
+  >
+    <div class="text-center">
+      <h1 class="text-3xl font-bold mb-4">Skills Data</h1>
+      <table class="border-collapse border w-full">
+        <thead>
+          <tr>
+            {% for key in csv_data[0].keys() %}
+            <th class="border py-2 px-4">{{ key }}</th>
+            {% endfor %}
+          </tr>
+        </thead>
+        <tbody>
+          {% for row in csv_data %}
+          <tr>
+            {% for value in row.values() %}
+            <td class="border py-2 px-4">{{ value }}</td>
+            {% endfor %}
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
   </body>
 </html>
