diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index d20b9a553..3d5278c88 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -52,7 +52,7 @@ body {
   @apply select-none;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
@@ -61,7 +61,7 @@ body {
 body.afterLoad {
   @apply transition-colors;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 }
 
 body.sticky-footer footer {
@@ -73,7 +73,7 @@ body.sticky-footer footer {
 .layout-enter-active,
 .layout-leave-active {
   @apply transition-opacity;
-  @apply duration-200;
+  @apply duration-150;
 }
 
 .page-enter,
@@ -164,7 +164,7 @@ p {
   @apply text-sm;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 }
 
 hr {
@@ -187,7 +187,7 @@ hr {
     @apply shadow-lg;
     @apply transition;
     @apply ease-in-out;
-    @apply duration-200;
+    @apply duration-150;
     @apply bg-ttColor;
     @apply text-fgColor;
   }
@@ -202,7 +202,7 @@ hr {
     @apply z-30;
     @apply transition;
     @apply ease-in-out;
-    @apply duration-200;
+    @apply duration-150;
   }
 
   &[x-placement^="top"] {
@@ -311,7 +311,7 @@ hr {
     @apply opacity-0;
     @apply transition-opacity;
     @apply ease-in-out;
-    @apply duration-200;
+    @apply duration-150;
   }
 
   &[aria-hidden="false"] {
@@ -319,7 +319,7 @@ hr {
     @apply opacity-100;
     @apply transition-opacity;
     @apply ease-in-out;
-    @apply duration-200;
+    @apply duration-150;
   }
 }
 
@@ -344,7 +344,7 @@ button {
   @apply font-bold;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
   @apply fill-current;
   @apply cursor-pointer;
   @apply outline-none;
@@ -477,7 +477,7 @@ code {
   @apply font-normal;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
   @apply select-text;
   @apply resize-y;
   @apply outline-none;
@@ -538,6 +538,7 @@ pre {
     @apply absolute;
     @apply pointer-events-none;
     @apply font-icon;
+    @apply text-fgLightColor;
 
     content: "\e313";
     top: 16px;
@@ -578,7 +579,7 @@ input[type="checkbox"] {
       @apply text-transparent;
       @apply transition;
       @apply ease-in-out;
-      @apply duration-200;
+      @apply duration-150;
 
       content: "\2714";
       height: 16px;
@@ -614,7 +615,7 @@ label {
   @apply text-sm;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 }
 
 ul,
@@ -703,7 +704,7 @@ ol li {
     @apply fixed;
     @apply transition;
     @apply ease-in-out;
-    @apply duration-200;
+    @apply duration-150;
     @apply shadow-lg;
     @apply rounded-lg;
 
diff --git a/components/layout/pw-header.vue b/components/layout/pw-header.vue
index 6543fad81..e3e839ff2 100644
--- a/components/layout/pw-header.vue
+++ b/components/layout/pw-header.vue
@@ -137,7 +137,7 @@ $responsiveWidth: 768px;
   @apply text-xl;
   @apply transition-colors;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 
   &:hover {
     @apply text-acColor;
diff --git a/components/layout/pw-section.vue b/components/layout/pw-section.vue
index 1bfea4dfd..ac5343878 100644
--- a/components/layout/pw-section.vue
+++ b/components/layout/pw-section.vue
@@ -19,7 +19,7 @@ fieldset {
   @apply bg-bgDarkColor;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 
   legend {
     @apply px-4;
@@ -28,7 +28,7 @@ fieldset {
     @apply cursor-pointer;
     @apply transition;
     @apply ease-in-out;
-    @apply duration-200;
+    @apply duration-150;
   }
 
   &.blue legend {
diff --git a/components/layout/sidenav.vue b/components/layout/sidenav.vue
index fafa1327e..f999ba547 100644
--- a/components/layout/sidenav.vue
+++ b/components/layout/sidenav.vue
@@ -177,7 +177,7 @@ $responsiveWidth: 768px;
   @apply bg-bgDarkColor;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
   // @apply overflow-y-auto;
 }
 
@@ -206,7 +206,7 @@ nav.primary-nav {
     @apply outline-none;
     @apply transition;
     @apply ease-in-out;
-    @apply duration-200;
+    @apply duration-150;
 
     &:hover {
       @apply text-fgColor;
@@ -266,7 +266,7 @@ nav.secondary-nav {
         @apply outline-none;
         @apply transition;
         @apply ease-in-out;
-        @apply duration-200;
+        @apply duration-150;
 
         &:hover {
           @apply text-fgColor;
diff --git a/components/ui/accent-mode-picker.vue b/components/ui/accent-mode-picker.vue
index e75c79e64..45e80548d 100644
--- a/components/ui/accent-mode-picker.vue
+++ b/components/ui/accent-mode-picker.vue
@@ -6,7 +6,7 @@
         v-for="(color, index) of colors"
         :key="`color-${index}`"
         v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-        class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none"
+        class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none"
         :class="[{ 'bg-bgDarkColor': color === active }, `text-${color}-400`]"
         @click="setActiveColor(color)"
       >
diff --git a/components/ui/autocomplete.vue b/components/ui/autocomplete.vue
index 639406a44..ecde272f9 100644
--- a/components/ui/autocomplete.vue
+++ b/components/ui/autocomplete.vue
@@ -47,9 +47,9 @@
     @apply mx-2;
     @apply left-0;
     @apply z-50;
-    @apply transition-transform;
+    @apply transition;
     @apply ease-in-out;
-    @apply duration-200;
+    @apply duration-150;
     @apply shadow-lg;
 
     top: calc(100% - 8px);
diff --git a/components/ui/color-mode-picker.vue b/components/ui/color-mode-picker.vue
index 206a5d1dc..e9301b870 100644
--- a/components/ui/color-mode-picker.vue
+++ b/components/ui/color-mode-picker.vue
@@ -14,7 +14,7 @@
         v-for="(color, index) of colors"
         :key="`color-${index}`"
         v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-        class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
+        class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
         :class="[
           { 'bg-bgDarkColor': color === $colorMode.preference },
           { 'text-acColor hover:text-acColor': color === $colorMode.value },
diff --git a/components/ui/modal.vue b/components/ui/modal.vue
index 451c5abb3..e5296dfef 100644
--- a/components/ui/modal.vue
+++ b/components/ui/modal.vue
@@ -11,7 +11,7 @@
             <!-- <div class="fade top"></div>
             <div class="fade bottom"></div> -->
           </div>
-          <div class="modal-footer">
+          <div v-if="hasFooterSlot" class="modal-footer">
             <slot name="footer"></slot>
           </div>
         </div>
@@ -32,7 +32,7 @@
   @apply justify-center;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 
   background-color: rgba(0, 0, 0, 0.32);
 }
@@ -52,7 +52,7 @@
   @apply m-2;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
   @apply bg-bgColor;
   @apply rounded-lg;
   @apply shadow-2xl;
@@ -90,10 +90,10 @@
 .modal-enter .modal-container,
 .modal-leave-active .modal-container {
   @apply transform;
-  @apply scale-75;
+  @apply scale-90;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 }
 
 .fade {
@@ -101,7 +101,7 @@
   @apply block;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 
   left: 16px;
   right: 20px;
@@ -118,3 +118,13 @@
   }
 }
 </style>
+
+<script>
+export default {
+  computed: {
+    hasFooterSlot() {
+      return !!this.$slots.footer
+    },
+  },
+}
+</script>
diff --git a/components/ui/tabs.vue b/components/ui/tabs.vue
index fffbac5e3..e20f4f5c3 100644
--- a/components/ui/tabs.vue
+++ b/components/ui/tabs.vue
@@ -59,7 +59,7 @@
         @apply cursor-pointer;
         @apply transition-colors;
         @apply ease-in-out;
-        @apply duration-200;
+        @apply duration-150;
 
         .material-icons {
           @apply m-4;
diff --git a/package-lock.json b/package-lock.json
index 1db1a928e..3ebe758e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -115,12 +115,17 @@
         "@babel/types": "^7.12.10"
       },
       "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
         "@babel/types": {
-          "version": "7.12.10",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
-          "integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz",
+          "integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==",
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -193,12 +198,17 @@
         "@babel/types": "^7.12.1"
       },
       "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
         "@babel/types": {
-          "version": "7.12.10",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
-          "integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz",
+          "integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==",
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -380,12 +390,17 @@
         "@babel/types": "^7.12.1"
       },
       "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
         "@babel/types": {
-          "version": "7.12.10",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
-          "integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz",
+          "integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==",
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
@@ -916,9 +931,9 @@
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.1.tgz",
-      "integrity": "sha512-zJyAC9sZdE60r1nVQHblcfCj29Dh2Y0DOvlMkcqSo0ckqjiCwNiUezUKw+RjOCwGfpLRwnAeQ2XlLpsnGkvv9w==",
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.11.tgz",
+      "integrity": "sha512-atR1Rxc3hM+VPg/NvNvfYw0npQEAcHuJ+MGZnFn6h3bo+1U3BWXMdFMlvVRApBTWKQMX7SOwRJZA5FBF/JQbvA==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
@@ -1188,15 +1203,15 @@
       }
     },
     "@babel/preset-env": {
-      "version": "7.12.10",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.10.tgz",
-      "integrity": "sha512-Gz9hnBT/tGeTE2DBNDkD7BiWRELZt+8lSysHuDwmYXUIvtwZl0zI+D6mZgXZX0u8YBlLS4tmai9ONNY9tjRgRA==",
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.11.tgz",
+      "integrity": "sha512-j8Tb+KKIXKYlDBQyIOy4BLxzv1NUOwlHfZ74rvW+Z0Gp4/cI2IMDPBWAgWceGcE7aep9oL/0K9mlzlMGxA8yNw==",
       "requires": {
         "@babel/compat-data": "^7.12.7",
         "@babel/helper-compilation-targets": "^7.12.5",
         "@babel/helper-module-imports": "^7.12.5",
         "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-validator-option": "^7.12.1",
+        "@babel/helper-validator-option": "^7.12.11",
         "@babel/plugin-proposal-async-generator-functions": "^7.12.1",
         "@babel/plugin-proposal-class-properties": "^7.12.1",
         "@babel/plugin-proposal-dynamic-import": "^7.12.1",
@@ -1225,7 +1240,7 @@
         "@babel/plugin-transform-arrow-functions": "^7.12.1",
         "@babel/plugin-transform-async-to-generator": "^7.12.1",
         "@babel/plugin-transform-block-scoped-functions": "^7.12.1",
-        "@babel/plugin-transform-block-scoping": "^7.12.1",
+        "@babel/plugin-transform-block-scoping": "^7.12.11",
         "@babel/plugin-transform-classes": "^7.12.1",
         "@babel/plugin-transform-computed-properties": "^7.12.1",
         "@babel/plugin-transform-destructuring": "^7.12.1",
@@ -1255,17 +1270,27 @@
         "@babel/plugin-transform-unicode-escapes": "^7.12.1",
         "@babel/plugin-transform-unicode-regex": "^7.12.1",
         "@babel/preset-modules": "^0.1.3",
-        "@babel/types": "^7.12.10",
+        "@babel/types": "^7.12.11",
         "core-js-compat": "^3.8.0",
         "semver": "^5.5.0"
       },
       "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/helper-validator-option": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz",
+          "integrity": "sha512-TBFCyj939mFSdeX7U7DDj32WtzYY7fDcalgq8v3fBZMNOJQNn7nOYzMaUCiPxPYfCup69mtIpqlKgMZLvQ8Xhw=="
+        },
         "@babel/types": {
-          "version": "7.12.10",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
-          "integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz",
+          "integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==",
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
+            "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
             "to-fast-properties": "^2.0.0"
           }
diff --git a/package.json b/package.json
index e67e051fd..4b45bbe8d 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
     "@nuxtjs/color-mode": "^2.0.2",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/pwa": "^3.3.2",