diff --git a/README.md b/README.md
index fa383ffcc..e1a1a9a72 100644
--- a/README.md
+++ b/README.md
@@ -360,13 +360,13 @@ This project is licensed under the [MIT License](https://opensource.org/licenses
 
 <p>
 
-[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-121212?logo=Postwoman)](https://postwoman.io)
+[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-202124?logo=Postwoman)](https://postwoman.io)
 <details>
 <summary>Default</summary>
 <p>
 
 ```
-[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-121212?logo=Postwoman)](https://postwoman.io)
+[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-202124?logo=Postwoman)](https://postwoman.io)
 ```
 </p>
 </details>
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index cc02e327a..d19cb85ea 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -146,6 +146,7 @@ footer {
   z-index: 1;
   height: 100vh;
   padding: 0 8px;
+  background-color: var(--bg-light-color);
 }
 
 .main {
@@ -155,7 +156,6 @@ footer {
   order: 2;
   position: relative;
   padding: 0 16px;
-  background-color: var(--bg-light-color);
   height: 100%;
 }
 
@@ -257,14 +257,14 @@ h3 {
 }
 
 .tooltip {
-  $bgcolor: var(--bg-color);
+  $bgcolor: var(--tt-color);
   $fgcolor: var(--fg-color);
   display: block !important;
   z-index: 10000;
 
   .tooltip-inner {
-    background: black;
-    color: white;
+    background: $bgcolor;
+    color: $fgcolor;
     border-radius: 8px;
     padding: 8px 16px;
     font-size: 12px;
@@ -278,7 +278,7 @@ h3 {
     border-style: solid;
     position: absolute;
     margin: 5px;
-    border-color: black;
+    border-color: $bgcolor;
     z-index: 1;
   }
 
@@ -424,6 +424,17 @@ button {
       transition: all 0.2s ease-in-out;
     }
   }
+
+  &.primary {
+    color: var(--ac-color);
+
+    &:not([disabled]):hover,
+    &:not([disabled]):active,
+    &:not([disabled]):focus {
+      background-color: var(--ac-color);
+      color: var(--act-color);
+    }
+  }
 }
 
 @keyframes beat {
@@ -444,7 +455,6 @@ button {
 
 fieldset {
   margin: 16px 0;
-  // border: 1px solid var(--brd-color);
   border-radius: 16px;
   transition: all 0.2s ease-in-out;
   background-color: var(--bg-dark-color);
@@ -503,6 +513,11 @@ fieldset.yellow legend {
   color: #f1fa8c;
 }
 
+input[type="file"],
+input[type="radio"],
+.tab,
+.hide-on-large-screen,
+#installPWA,
 .hidden {
   display: none;
 }
@@ -669,18 +684,10 @@ ol li {
   display: flex;
 }
 
-.hide-on-large-screen {
-  display: none;
-}
-
 .show-on-large-screen {
   display: inline-flex;
 }
 
-#installPWA {
-  display: none;
-}
-
 .info-response {
   color: #ffeb3b;
 }
@@ -774,12 +781,6 @@ section {
   order: 1;
 }
 
-input[type="file"],
-input[type="radio"],
-.tab {
-  display: none;
-}
-
 input[type="radio"] + label {
   padding: 8px 16px;
   border-bottom: 2px solid transparent;
@@ -856,6 +857,7 @@ input[type="radio"]:checked + label + .tab {
     width: 100%;
     background-color: var(--bg-color);
     transition: all 0.2s ease-in-out;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
   }
 
   nav.primary-nav {
diff --git a/assets/css/themes.scss b/assets/css/themes.scss
index f0dc2058a..5bd10c541 100644
--- a/assets/css/themes.scss
+++ b/assets/css/themes.scss
@@ -9,13 +9,13 @@
 // Dark is the default theme variant.
 @mixin darkTheme {
   // Background color
-  --bg-color: rgba(18, 18, 18, 1);
+  --bg-color: rgba(32, 33, 36, 1);
   // Light Background color
   --bg-light-color: rgba(255, 255, 255, 0.02);
   // Dark Background color
   --bg-dark-color: rgba(0, 0, 0, 0.1);
   // Text color
-  --fg-color: rgba(255, 255, 255, 1);
+  --fg-color: rgba(255, 255, 255, 0.9);
   // Light Text color
   --fg-light-color: rgba(255, 255, 255, 0.5);
   // Border color
@@ -25,9 +25,11 @@
   // Acent color
   --ac-color: rgba(80, 250, 123, 1);
   // Active text color
-  --act-color: rgba(18, 18, 18, 1);
+  --act-color: rgba(32, 33, 36, 1);
   // Auto-complete color
-  --atc-color: rgba(18, 18, 18, 1);
+  --atc-color: rgba(32, 33, 36, 1);
+  // Tooltip color
+  --tt-color: rgba(53, 53, 53, 1);
 }
 
 @mixin lightTheme {
@@ -38,7 +40,7 @@
   // Dark Background color
   --bg-dark-color: rgba(0, 0, 0, 0.02);
   // Text color
-  --fg-color: rgba(0, 0, 0, 1);
+  --fg-color: rgba(0, 0, 0, 0.9);
   // Light Text color
   --fg-light-color: rgba(0, 0, 0, 0.6);
   // Border color
@@ -51,17 +53,19 @@
   --act-color: rgba(255, 255, 255, 1);
   // Auto-complete color
   --atc-color: rgba(255, 255, 255, 1);
+  // Tooltip color
+  --tt-color: rgba(220, 220, 220, 1);
 }
 
 @mixin blackTheme {
   // Background color
   --bg-color: rgba(0, 0, 0, 1);
   // Light Background color
-  --bg-light-color: rgba(255, 255, 255, 0);
+  --bg-light-color: rgba(255, 255, 255, 0.02);
   // Dark Background color
   --bg-dark-color: rgba(255, 255, 255, 0.02);
   // Text color
-  --fg-color: rgba(255, 255, 255, 1);
+  --fg-color: rgba(255, 255, 255, 0.9);
   // Light Text color
   --fg-light-color: rgba(255, 255, 255, 0.5);
   // Border color
@@ -74,6 +78,8 @@
   --act-color: rgba(0, 0, 0, 1);
   // Auto-complete color
   --atc-color: rgba(0, 0, 0, 1);
+  // Tooltip color
+  --tt-color: rgba(18, 18, 18, 1);
 }
 
 :root {
diff --git a/components/collections/addCollection.vue b/components/collections/addCollection.vue
index 9a00ed2a6..2c68f630f 100644
--- a/components/collections/addCollection.vue
+++ b/components/collections/addCollection.vue
@@ -22,14 +22,17 @@
       </ul>
     </div>
     <div slot="footer">
-      <ul>
-        <li>
-          <button class="icon" @click="addNewCollection">
-            <i class="material-icons">add</i>
-            <span>Create</span>
+      <div class="flex-wrap">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            Cancel
           </button>
-        </li>
-      </ul>
+          <button class="icon primary" @click="addNewCollection">
+            Save
+          </button>
+        </span>
+      </div>
     </div>
   </modal>
 </template>
diff --git a/components/collections/addFolder.vue b/components/collections/addFolder.vue
index 3a582c13a..40ec5c574 100644
--- a/components/collections/addFolder.vue
+++ b/components/collections/addFolder.vue
@@ -22,14 +22,17 @@
       </ul>
     </div>
     <div slot="footer">
-      <ul>
-        <li>
-          <button class="icon" @click="addNewFolder">
-            <i class="material-icons">add</i>
-            <span>Create</span>
+      <div class="flex-wrap">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            Cancel
           </button>
-        </li>
-      </ul>
+          <button class="icon primary" @click="addNewFolder">
+            Save
+          </button>
+        </span>
+      </div>
     </div>
   </modal>
 </template>
diff --git a/components/collections/editCollection.vue b/components/collections/editCollection.vue
index 34e2b0999..3a3feac53 100644
--- a/components/collections/editCollection.vue
+++ b/components/collections/editCollection.vue
@@ -1,12 +1,12 @@
 <template>
-  <modal v-if="show" @close="hideModel">
+  <modal v-if="show" @close="hideModal">
     <div slot="header">
       <ul>
         <li>
           <div class="flex-wrap">
             <h3 class="title">Edit Collection</h3>
             <div>
-              <button class="icon" @click="hideModel">
+              <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
               </button>
             </div>
@@ -27,14 +27,17 @@
       </ul>
     </div>
     <div slot="footer">
-      <ul>
-        <li>
-          <button class="icon" @click="saveCollection">
-            <i class="material-icons">save</i>
-            <span>Save</span>
+      <div class="flex-wrap">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            Cancel
           </button>
-        </li>
-      </ul>
+          <button class="icon primary" @click="saveCollection">
+            Save
+          </button>
+        </span>
+      </div>
     </div>
   </modal>
 </template>
@@ -66,7 +69,7 @@ export default {
       });
       this.$emit("hide-modal");
     },
-    hideModel() {
+    hideModal() {
       this.$emit("hide-modal");
     }
   }
diff --git a/components/collections/editFolder.vue b/components/collections/editFolder.vue
index b5c8ef03c..17388fd34 100644
--- a/components/collections/editFolder.vue
+++ b/components/collections/editFolder.vue
@@ -27,14 +27,17 @@
       </ul>
     </div>
     <div slot="footer">
-      <ul>
-        <li>
-          <button class="icon" @click="editFolder">
-            <i class="material-icons">add</i>
-            <span>Save</span>
+      <div class="flex-wrap">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            Cancel
           </button>
-        </li>
-      </ul>
+          <button class="icon primary" @click="editFolder">
+            Save
+          </button>
+        </span>
+      </div>
     </div>
   </modal>
 </template>
diff --git a/components/collections/editRequest.vue b/components/collections/editRequest.vue
index 46323d10e..12d818909 100644
--- a/components/collections/editRequest.vue
+++ b/components/collections/editRequest.vue
@@ -71,14 +71,17 @@
       </ul>
     </div>
     <div slot="footer">
-      <ul>
-        <li>
-          <button class="icon" @click="saveRequest">
-            <i class="material-icons">save</i>
-            <span>Save</span>
+      <div class="flex-wrap">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            Cancel
           </button>
-        </li>
-      </ul>
+          <button class="icon primary" @click="saveRequest">
+            Save
+          </button>
+        </span>
+      </div>
     </div>
   </modal>
 </template>
diff --git a/components/collections/importExportCollections.vue b/components/collections/importExportCollections.vue
index b70f97f70..e6396bc66 100644
--- a/components/collections/importExportCollections.vue
+++ b/components/collections/importExportCollections.vue
@@ -1,12 +1,12 @@
 <template>
-  <modal v-if="show" @close="hideModel">
+  <modal v-if="show" @close="hideModal">
     <div slot="header">
       <ul>
         <li>
           <div class="flex-wrap">
             <h3 class="title">Import / Export Collections</h3>
             <div>
-              <button class="icon" @click="hideModel">
+              <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
               </button>
             </div>
@@ -18,8 +18,8 @@
       <textarea v-model="collectionJson" rows="8"></textarea>
     </div>
     <div slot="footer">
-      <ul>
-        <li>
+      <div class="flex-wrap">
+        <span>
           <button
             class="icon"
             @click="openDialogChooseFileToReplaceWith"
@@ -34,8 +34,6 @@
               ref="inputChooseFileToReplaceWith"
             />
           </button>
-        </li>
-        <li>
           <button
             class="icon"
             @click="openDialogChooseFileToImportFrom"
@@ -50,14 +48,24 @@
               ref="inputChooseFileToImportFrom"
             />
           </button>
-        </li>
-        <li>
-          <button class="icon" @click="exportJSON" v-tooltip="'Download file'">
-            <i class="material-icons">get_app</i>
-            <span>Export to JSON</span>
+        </span>
+        <span></span>
+      </div>
+      <div class="flex-wrap">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            Cancel
           </button>
-        </li>
-      </ul>
+          <button
+            class="icon primary"
+            @click="exportJSON"
+            v-tooltip="'Download file'"
+          >
+            Export
+          </button>
+        </span>
+      </div>
     </div>
   </modal>
 </template>
@@ -76,7 +84,7 @@ export default {
     }
   },
   methods: {
-    hideModel() {
+    hideModal() {
       this.$emit("hide-modal");
     },
     openDialogChooseFileToReplaceWith() {
diff --git a/components/collections/saveRequestAs.vue b/components/collections/saveRequestAs.vue
index 05424c62e..26a174d31 100644
--- a/components/collections/saveRequestAs.vue
+++ b/components/collections/saveRequestAs.vue
@@ -88,14 +88,17 @@
       </ul>
     </div>
     <div slot="footer">
-      <ul>
-        <li>
-          <button class="icon" @click="saveRequestAs">
-            <i class="material-icons">save</i>
-            <span>Save</span>
+      <div class="flex-wrap">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            Cancel
           </button>
-        </li>
-      </ul>
+          <button class="icon primary" @click="saveRequestAs">
+            Save
+          </button>
+        </span>
+      </div>
     </div>
   </modal>
 </template>
diff --git a/components/graphql/field.vue b/components/graphql/field.vue
index 0da0f522f..b5acb1b54 100644
--- a/components/graphql/field.vue
+++ b/components/graphql/field.vue
@@ -15,7 +15,7 @@
 .field-box {
   padding: 16px;
   margin: 4px;
-  border-bottom: 1px solid var(--brd-color);
+  border-bottom: 1px dashed var(--brd-color);
 }
 
 .field-deprecated {
diff --git a/components/history.vue b/components/history.vue
index 9b9ac14d5..67c0ac258 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -308,7 +308,7 @@ ol li {
 
 .entry {
   border-bottom: 1px dashed var(--brd-color);
-  padding: 16px 0;
+  padding: 0 0 8px;
 }
 
 .bg-color {
diff --git a/components/logo.vue b/components/logo.vue
index 6d605047a..57e957e61 100644
--- a/components/logo.vue
+++ b/components/logo.vue
@@ -24,9 +24,9 @@
           <path
             :fill="color"
             id="path3816"
-            data-old_color="#121212"
+            data-old_color="#202124"
             class="active-path"
-            data-original="#121212"
+            data-original="#202124"
             d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z"
           />
         </g>
diff --git a/components/modal.vue b/components/modal.vue
index da088612c..24a79dd23 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.5);
+  background-color: rgba(0, 0, 0, 0.87);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/layouts/default.vue b/layouts/default.vue
index 51073d09b..add992d05 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -441,7 +441,7 @@
             rel="noopener"
           >
             <button class="icon">
-              <i class="material-icons">favorite</i>
+              <i class="material-icons">donut_large</i>
               <span>{{ $t("open_collective") }}</span>
             </button>
           </a>
@@ -453,7 +453,7 @@
             rel="noopener"
           >
             <button class="icon">
-              <i class="material-icons">favorite</i>
+              <i class="material-icons">payment</i>
               <span>{{ $t("paypal") }}</span>
             </button>
           </a>
@@ -465,7 +465,7 @@
             rel="noopener"
           >
             <button class="icon">
-              <i class="material-icons">favorite</i>
+              <i class="material-icons">local_parking</i>
               <span>{{ $t("patreon") }}</span>
             </button>
           </a>
@@ -525,7 +525,7 @@ export default {
       document.documentElement.style.setProperty("--ac-color", color);
       document.documentElement.style.setProperty(
         "--act-color",
-        vibrant ? "rgba(18, 18, 18, 1)" : "rgba(255, 255, 255, 1)"
+        vibrant ? "rgba(32, 33, 36, 1)" : "rgba(255, 255, 255, 1)"
       );
     })();
   },
@@ -539,7 +539,7 @@ export default {
       .querySelector("meta[name=theme-color]")
       .setAttribute(
         "content",
-        this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#121212"
+        this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#202124"
       );
 
     // Initializes the PWA code - checks if the app is installed,
diff --git a/nuxt.config.js b/nuxt.config.js
index fe737ff12..a79f82d2c 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -100,7 +100,7 @@ export default {
       },
       {
         name: "msapplication-TileColor",
-        content: "#121212"
+        content: "#202124"
       },
       {
         name: "msapplication-tap-highlight",
@@ -257,14 +257,14 @@ export default {
 
       display: "standalone",
 
-      theme_color: "#121212",
-      background_color: "#121212",
+      theme_color: "#202124",
+      background_color: "#202124",
       start_url: `${routerBase.router.base}`
     },
 
     meta: {
       description: meta.shortDescription,
-      theme_color: "#121212"
+      theme_color: "#202124"
     },
 
     icons: (sizes => {
diff --git a/pages/index.vue b/pages/index.vue
index 1dbce6e03..bad1b6afe 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -728,14 +728,17 @@
           </ul>
         </div>
         <div slot="footer">
-          <ul>
-            <li>
-              <button class="icon" @click="handleImport">
-                <i class="material-icons">get_app</i>
-                <span>{{ $t("import") }}</span>
+          <div class="flex-wrap">
+            <span></span>
+            <span>
+              <button class="icon" @click="showModal = false">
+                Cancel
               </button>
-            </li>
-          </ul>
+              <button class="icon primary" @click="handleImport">
+                {{ $t("import") }}
+              </button>
+            </span>
+          </div>
         </div>
       </pw-modal>
 
diff --git a/pages/settings.vue b/pages/settings.vue
index 8e543dd6e..e76587b94 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -156,7 +156,7 @@ export default {
       //        set the relevant values.
       themes: [
         {
-          color: "#121212",
+          color: "#202124",
           name: "Kinda Dark",
           class: "",
           aceEditor: "twilight"
@@ -273,7 +273,7 @@ export default {
       document.documentElement.style.setProperty("--ac-color", color);
       document.documentElement.style.setProperty(
         "--act-color",
-        vibrant ? "rgba(18, 18, 18, 1)" : "rgba(255, 255, 255, 1)"
+        vibrant ? "rgba(32, 33, 36, 1)" : "rgba(255, 255, 255, 1)"
       );
       this.applySetting("THEME_COLOR", color.toUpperCase());
       this.applySetting("THEME_COLOR_VIBRANT", vibrant);
diff --git a/static/icons/alien-head.svg b/static/icons/alien-head.svg
index e31f9d5c2..a3491c108 100644
--- a/static/icons/alien-head.svg
+++ b/static/icons/alien-head.svg
@@ -54,9 +54,9 @@
      transform="translate(516.40798,163.89028)"><g
        id="g3818"><path
          id="path3816"
-         data-old_color="#121212"
+         data-old_color="#202124"
          class="active-path"
-         data-original="#121212"
+         data-original="#202124"
          d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z"
          inkscape:connector-curvature="0"
          style="fill:#50fa7b" /></g></g></g></svg>
\ No newline at end of file