diff --git a/web/index.html b/web/index.html
index 9f185b1..9b9d5aa 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,11 +5,65 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title> tex-fmt </title>
+
+  <style>
+    :root {
+      --col-dark: #191924;
+      --col-mid: #292934;
+      --col-light: #faf7e5;
+      --col-orange: #e5652e;
+      --col-yellow: #eed858;
+    }
+    * {
+      margin: 12px;
+      font-family: 'Noto', sans-serif;
+    }
+    body {
+      background-color: var(--col-dark);
+    }
+    h1 {
+      color: var(--col-light);
+      font-size: 48px;
+      font-family: 'Bungee', sans-serif;
+    }
+    h2 {
+      color: var(--col-yellow);
+      font-size: 24px;
+    }
+    h3 {
+      color: var(--col-light);
+      font-size: 18px;
+    }
+    textarea {
+      color: var(--col-light);
+      background-color: var(--col-mid);
+      border: 2px solid var(--col-orange);
+      border-radius: 4px;
+      font-size: 16px;
+      font-family: 'Source Code Pro', sans-serif;
+      resize: none;
+      padding-left: 5px;
+      padding-right: 5px;
+      padding-top: 2px;
+      padding-bottom: 2px;
+    }
+    button {
+      color: var(--col-light);
+      background-color: var(--col-mid);
+      border-radius: 10px;
+      font-size: 18px;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      padding-left: 14px;
+      padding-right: 14px;
+    }
+  </style>
+
 </head>
 
 <body>
   <h1> tex-fmt </h1>
-  <h3> An extremely fast LaTex formatter </h3>
+  <h2> An extremely fast LaTex formatter </h2>
 
   <!-- Buttons -->
   <div>
@@ -20,12 +74,12 @@ <h3> An extremely fast LaTex formatter </h3>
   <!-- Input and output -->
   <div style="display: flex; gap: 20px;">
 
-    <div style="flex: 1; display: flex; flex-direction: column; max-width: 600px;">
+    <div style="flex: 1; display: flex; flex-direction: column; max-width: 700px;">
       <h3> Input </h3>
       <textarea id="inputText" rows="30" cols="80"></textarea>
     </div>
 
-    <div style="flex: 1; display: flex; flex-direction: column; max-width: 600px;">
+    <div style="flex: 1; display: flex; flex-direction: column; max-width: 700px;">
       <h3> Output </h3>
       <textarea id="outputText" rows="30" cols="80" readonly></textarea>
     </div>
@@ -35,12 +89,12 @@ <h3> Output </h3>
   <!-- Config and logs -->
   <div style="display: flex; gap: 20px;">
 
-    <div style="flex: 1; display: flex; flex-direction: column; max-width: 600px;">
-      <h3> Config (optional) </h3>
+    <div style="flex: 1; display: flex; flex-direction: column; max-width: 700px;">
+      <h3> Config </h3>
       <textarea id="configText" rows="20" cols="80"></textarea>
     </div>
 
-    <div style="flex: 1; display: flex; flex-direction: column; max-width: 600px;">
+    <div style="flex: 1; display: flex; flex-direction: column; max-width: 700px;">
       <h3> Logs </h3>
       <textarea id="logText" rows="20" cols="80" readonly></textarea>
     </div>
