diff --git a/assets/css/fonts.scss b/assets/css/fonts.scss
index ed33e2d44..541e2cf1e 100644
--- a/assets/css/fonts.scss
+++ b/assets/css/fonts.scss
@@ -1,2 +1,2 @@
 // Poppins (Google Fonts)
-@import url("https://fonts.googleapis.com/css?family=Poppins:500,700&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Poppins:400,600&display=swap");
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 2f8567ad1..b123dde72 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -20,7 +20,7 @@ $responsiveWidth: 720px;
 }
 
 ::placeholder {
-  color: var(--fg-color);
+  color: var(--fg-light-color);
   opacity: 0.3;
 }
 
@@ -34,25 +34,26 @@ a {
   display: inline-flex;
   color: inherit;
   text-decoration: none;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 body {
   background-color: var(--bg-color);
   color: var(--fg-color);
-  font-weight: 500;
+  font-weight: 400;
+  font-size: 16px;
+  font-family: "Poppins", "Roboto", "Noto", sans-serif;
   line-height: 1.5;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   user-select: none;
-  font-family: "Poppins", "Roboto", "Noto", sans-serif;
 }
 
 h1,
 h2,
 h3 {
   margin: 0;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 h3.title {
@@ -93,17 +94,17 @@ button {
   justify-content: center;
   margin: 4px;
   padding: 0 16px;
-  border-radius: 8px;
+  border-radius: 20px;
   background-color: var(--ac-color);
   color: var(--act-color);
-  font-weight: 700;
+  font-weight: 600;
   font-size: 16px;
   font-family: "Poppins", "Roboto", "Noto", sans-serif;
-  cursor: pointer;
   transition: all 0.2s ease-in-out;
   fill: var(--act-color);
-  height: 41px;
+  height: 40px;
   box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.02);
+  cursor: pointer;
 
   span {
     display: inline-flex;
@@ -112,15 +113,18 @@ button {
 
   &.icon {
     background-color: var(--bg-color);
-    color: var(--fg-color);
-    fill: var(--fg-color);
+    color: var(--fg-light-color);
+    fill: var(--fg-light-color);
+
+    &:not([disabled]):hover {
+      color: var(--fg-color);
+      fill: var(--fg-color);
+    }
   }
 
-  &:not([disabled]):hover,
-  &:not(.disabled):focus {
-    background-color: var(--bg-color);
-    color: var(--ac-color);
-    fill: var(--ac-color);
+  &:not([disabled]):hover {
+    color: var(--act-color);
+    fill: var(--act-color);
   }
 }
 
@@ -133,7 +137,7 @@ fieldset {
 
 legend {
   color: var(--fg-color);
-  font-weight: 700;
+  font-weight: 600;
   cursor: pointer;
 }
 
@@ -190,18 +194,17 @@ pre {
   margin: 4px;
   padding: 8px;
   border-radius: 8px;
-  background-color: var(--brd-color);
+  background-color: var(--bg-dark-color);
   color: var(--fg-color);
-  font-size: 18px;
+  font-size: 16px;
   font-family: monospace;
   transition: all 0.2s ease-in-out;
   user-select: text;
   width: calc(100% - 8px);
+  min-height: 40px;
 
-  &:not([readonly]):hover,
-  &:not([readonly]):focus {
-    background-color: var(--bg-color);
-    box-shadow: inset 0 0 0 2px var(--fg-color);
+  &:not([readonly]):hover {
+    background-color: var(--bg-dark-color);
   }
 }
 
@@ -216,14 +219,14 @@ code {
 
 .hljs,
 .hljs-subst {
-  background-color: var(--brd-color) !important;
+  background-color: var(--bg-dark-color) !important;
   color: var(--fg-color) !important;
 }
 
 select,
 input,
 option {
-  height: 41px;
+  height: 40px;
 }
 
 input[type="checkbox"] {
@@ -260,18 +263,19 @@ input[type="checkbox"] {
 .disabled,
 [disabled] {
   background-color: var(--err-color);
-  color: var(--fg-color);
-  fill: var(--fg-color);
+  color: var(--fg-light-color);
+  fill: var(--fg-light-color);
   cursor: default;
 
   &.icon {
-    color: var(--fg-color);
-    fill: var(--fg-color);
+    color: var(--bg-color);
+    fill: var(--bg-color);
   }
 }
 
 label {
   padding: 4px;
+  color: var(--fg-light-color);
 }
 
 ul,
diff --git a/assets/css/themes.scss b/assets/css/themes.scss
index 1734539c0..f6410a162 100644
--- a/assets/css/themes.scss
+++ b/assets/css/themes.scss
@@ -7,36 +7,42 @@
 
 // Dark is the default theme variant.
 :root {
-  --bg-dark-color: #1d1f27;
+  // Dark Background color
+  --bg-dark-color: rgb(41, 42, 45);
   // Background color
-  --bg-color: #282a36;
+  --bg-color: rgb(37, 38, 40);
   // Auto-complete color
-  --atc-color: #20212b;
+  --atc-color: rgb(49, 49, 55);
   // Text color
-  --fg-color: #c4c6d4;
+  --fg-color: rgb(247, 248, 248);
+  // Light Text color
+  --fg-light-color: rgb(150, 155, 160);
   // Border color
-  --brd-color: #333545;
+  --brd-color: rgb(48, 47, 55);
   // Error color
-  --err-color: #303341;
-  // Active color
+  --err-color: rgb(41, 42, 45);
+  // Acent color
   --ac-color: #50fa7b;
   // Active text color
-  --act-color: #282a36;
+  --act-color: rgb(37, 38, 40);
 }
 
 :root.light {
-  --bg-dark-color: #7a7a7a;
+  // Dark Background color
+  --bg-dark-color: #e8f0fe;
   // Background color
   --bg-color: #fff;
   // Auto-complete color
   --atc-color: #ebebeb;
   // Text color
   --fg-color: #525252;
+  // Light Text color
+  --fg-light-color: rgb(150, 155, 160);
   // Border color
   --brd-color: #f2f2f2;
   // Error color
   --err-color: invert(#303341, 1);
-  // Active color
+  // Acent color
   --ac-color: #57b5f9;
   // Active text color
   --act-color: #fff;
diff --git a/components/modal.vue b/components/modal.vue
index e6dc41f4c..8825ac4e1 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -25,7 +25,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgba(0, 0, 0, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/components/section.vue b/components/section.vue
index a95fa2333..7ad14174f 100644
--- a/components/section.vue
+++ b/components/section.vue
@@ -9,7 +9,7 @@
 
 <style>
   fieldset.no-colored-frames legend {
-    color: var(--ac-color);
+    color: var(--fg-color);
   }
 </style>
 
diff --git a/layouts/default.vue b/layouts/default.vue
index b701a3011..61f41bd0c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -31,8 +31,11 @@
           </svg>
           <span>Tweet</span>
         </button>
-        <button id="installPWA" @click.prevent="showInstallPrompt()">
-          Install PWA
+        <button class="icon" id="installPWA" @click.prevent="showInstallPrompt()">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z"/>
+          </svg>
+          <span>Install PWA</span>
         </button>
       </div>
       <!-- Bottom section of footer: version/author information -->
@@ -168,7 +171,7 @@
         let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
         if (vibrant == null) vibrant = true;
         document.documentElement.style.setProperty('--ac-color', color);
-        document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
+        document.documentElement.style.setProperty('--act-color', vibrant ? 'rgb(37, 38, 40)' : '#fff');
       })();
     },
 
diff --git a/pages/index.vue b/pages/index.vue
index ad311e733..456ccc5c2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -100,36 +100,7 @@
           </button>
         </li>
       </ul>
-    </pw-section>
-    <pw-section class="blue" label="Request Code" ref="requestCode" v-if="!isHidden">
-      <ul>
-        <li>
-          <label for="requestType">Request Type</label>
-          <select id="requestType" v-model="requestType">
-            <option>JavaScript XHR</option>
-            <option>Fetch</option>
-            <option>cURL</option>
-          </select>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <div class="flex-wrap">
-            <label for="generatedCode">Generated Code</label>
-            <div>
-              <button class="icon" @click="copyRequestCode" id="copyRequestCode" ref="copyRequestCode">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                  <path d="M19.647 15.247c-1.278 0-2.429.551-3.225 1.429l-7.788-3.846c.062-.343.079-.64.067-.942l8.058-4.231c.769.682 1.78 1.097 2.889 1.097 2.404-.001 4.352-1.949 4.352-4.353s-1.948-4.353-4.353-4.353-4.353 1.949-4.353 4.353c0 .18.012.356.033.53l-7.828 4.111c-.793-.829-1.908-1.347-3.146-1.347-2.405 0-4.353 1.949-4.353 4.353s1.948 4.353 4.353 4.353c1.013 0 1.943-.347 2.684-.927l8.26 4.078-.001.047c0 2.404 1.948 4.353 4.353 4.353s4.351-1.949 4.351-4.353-1.948-4.352-4.353-4.352z"/>
-                </svg>
-                <span>Copy</span>
-              </button>
-            </div>
-          </div>
-          <textarea id="generatedCode" ref="generatedCode" name="generatedCode" rows="8" v-model="requestCode"></textarea>
-        </li>
-      </ul>
-    </pw-section>
-    <pw-section class="blue" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
+    <div class="blue" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
       <ul>
         <li>
           <autocomplete :source="validContentTypes" :spellcheck="false" v-model="contentType">Content Type
@@ -184,6 +155,35 @@
           </li>
         </ul>
       </div>
+    </div>
+    </pw-section>
+    <pw-section class="blue" label="Code" ref="requestCode" v-if="!isHidden">
+      <ul>
+        <li>
+          <label for="requestType">Request Type</label>
+          <select id="requestType" v-model="requestType">
+            <option>JavaScript XHR</option>
+            <option>Fetch</option>
+            <option>cURL</option>
+          </select>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <div class="flex-wrap">
+            <label for="generatedCode">Generated Code</label>
+            <div>
+              <button class="icon" @click="copyRequestCode" id="copyRequestCode" ref="copyRequestCode">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+                  <path d="M19.647 15.247c-1.278 0-2.429.551-3.225 1.429l-7.788-3.846c.062-.343.079-.64.067-.942l8.058-4.231c.769.682 1.78 1.097 2.889 1.097 2.404-.001 4.352-1.949 4.352-4.353s-1.948-4.353-4.353-4.353-4.353 1.949-4.353 4.353c0 .18.012.356.033.53l-7.828 4.111c-.793-.829-1.908-1.347-3.146-1.347-2.405 0-4.353 1.949-4.353 4.353s1.948 4.353 4.353 4.353c1.013 0 1.943-.347 2.684-.927l8.26 4.078-.001.047c0 2.404 1.948 4.353 4.353 4.353s4.351-1.949 4.351-4.353-1.948-4.352-4.353-4.352z"/>
+                </svg>
+                <span>Copy</span>
+              </button>
+            </div>
+          </div>
+          <textarea id="generatedCode" ref="generatedCode" name="generatedCode" rows="8" v-model="requestCode"></textarea>
+        </li>
+      </ul>
     </pw-section>
     <pw-section class="purple" id="response" label="Response" ref="response">
       <ul>
@@ -748,14 +748,6 @@
           headers
         );
 
-        const headersObject = {};
-
-        Object.keys(headers).forEach(id=>{
-          headersObject[headers[id].key] = headers[id].value
-        });
-
-        headers = headersObject;
-
         try {
           const payload = await this.$axios({
             method: this.method,
diff --git a/pages/settings.vue b/pages/settings.vue
index cb0634669..4c7813335 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -79,7 +79,7 @@
         //        You should copy the existing light theme as a template and then just
         //        set the relevant values.
         themes: [{
-            "color": "#282a36",
+            "color": "rgb(37, 38, 40)",
             "name": "Dark (Default)",
             "class": ""
           },
@@ -174,7 +174,7 @@
         // By default, the color is vibrant.
         if (vibrant == null) vibrant = true;
         document.documentElement.style.setProperty('--ac-color', color);
-        document.documentElement.style.setProperty('--act-color', vibrant ? '#282a36' : '#f8f8f2');
+        document.documentElement.style.setProperty('--act-color', vibrant ? 'rgb(37, 38, 40)' : '#f8f8f2');
         this.applySetting('THEME_COLOR', color.toUpperCase());
         this.applySetting('THEME_COLOR_VIBRANT', vibrant);
       },
diff --git a/pages/websocket.vue b/pages/websocket.vue
index fcee649e5..25123abef 100644
--- a/pages/websocket.vue
+++ b/pages/websocket.vue
@@ -32,7 +32,7 @@
             <span v-if="communication.log">
               <span v-for="(logEntry, index) in communication.log" :style="{ color: logEntry.color }" :key="index">@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
             </span>
-            <span v-else>(Waiting for connection...)</span>
+            <span v-else>(waiting for connection)</span>
           </div>
         </li>
       </ul>
@@ -64,14 +64,13 @@
     padding: 8px 16px;
     width: calc(100% - 8px);
     border-radius: 8px;
-    background-color: var(--brd-color);
+    background-color: var(--bg-dark-color);
     color: var(--fg-color);
     height: 256px;
     overflow: auto;
 
     &,
     span {
-      font-weight: 700;
       font-size: 18px;
       font-family: monospace;
     }