diff --git a/package-lock.json b/package-lock.json
index b6ee300..302a5e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1787,9 +1787,9 @@
       "dev": true
     },
     "animejs": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.0.tgz",
-      "integrity": "sha512-zhtGl5cS0G2f5DfciMO8uwWpnx06nfFnHlXYYXHBazHep1Lyd6kEtBQP+9hpYKE0dBZjIigHp9VpMO95ZfXQJQ=="
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz",
+      "integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
     },
     "ansi-colors": {
       "version": "3.2.4",
@@ -7232,9 +7232,9 @@
       "dev": true
     },
     "js-base64": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.3.tgz",
-      "integrity": "sha512-fiUvdfCaAXoQTHdKMgTvg6IkecXDcVz6V5rlftUTclF9IKBjMizvSdQaCl/z/6TApDeby5NL+axYou3i0mu1Pg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
+      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
       "dev": true
     },
     "js-levenshtein": {
@@ -10668,9 +10668,9 @@
       "dev": true
     },
     "sass": {
-      "version": "1.26.10",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.10.tgz",
-      "integrity": "sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw==",
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.27.0.tgz",
+      "integrity": "sha512-0gcrER56OkzotK/GGwgg4fPrKuiFlPNitO7eUJ18Bs+/NBlofJfMxmxqpqJxjae9vu0Wq8TZzrSyxZal00WDig==",
       "dev": true,
       "requires": {
         "chokidar": ">=2.0.0 <4.0.0"
@@ -12117,12 +12117,12 @@
       }
     },
     "stylelint-config-recess-order": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-2.0.4.tgz",
-      "integrity": "sha512-lWCVL5VyEGz4MOFDhPt79ibhv+E3mqerd/8thzOCN7Nuk+rGNR/AebtyHNeKm1xMm5Ri6czHGxWPXwmrSPo3yQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-2.1.0.tgz",
+      "integrity": "sha512-h269OpnCTcOHR6xBRb+dQPrZnQA62zG3Q5yzP+RH71kn/LjWCoPFRmzg4UoajA42+y5WX8L1TFwqlDPIuojP3w==",
       "dev": true,
       "requires": {
-        "stylelint-order": "4.0.x"
+        "stylelint-order": "4.1.x"
       }
     },
     "stylelint-config-recommended": {
@@ -12141,13 +12141,13 @@
       }
     },
     "stylelint-order": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-4.0.0.tgz",
-      "integrity": "sha512-bXV0v+jfB0+JKsqIn3mLglg1Dj2QCYkFHNfL1c+rVMEmruZmW5LUqT/ARBERfBm8SFtCuXpEdatidw/3IkcoiA==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-4.1.0.tgz",
+      "integrity": "sha512-sVTikaDvMqg2aJjh4r48jsdfmqLT+nqB1MOsaBnvM3OwLx4S+WXcsxsgk5w18h/OZoxZCxuyXMh61iBHcj9Qiw==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.15",
-        "postcss": "^7.0.26",
+        "postcss": "^7.0.31",
         "postcss-sorting": "^5.0.1"
       }
     },
@@ -13064,9 +13064,9 @@
       "dev": true
     },
     "vue": {
-      "version": "2.6.11",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
-      "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
+      "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
     },
     "vue-cli-plugin-element": {
       "version": "1.0.1",
@@ -13175,9 +13175,9 @@
       }
     },
     "vue-template-compiler": {
-      "version": "2.6.11",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
-      "integrity": "sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==",
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz",
+      "integrity": "sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==",
       "dev": true,
       "requires": {
         "de-indent": "^1.0.2",
diff --git a/package.json b/package.json
index f2a8856..d68f529 100644
--- a/package.json
+++ b/package.json
@@ -38,15 +38,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "animejs": "^3.0.1",
+    "animejs": "^3.2.1",
     "core-js": "^2.6.5",
-    "dom-confetti": "^0.1.1",
-    "element-ui": "^2.12.0",
+    "dom-confetti": "^0.1.2",
+    "element-ui": "^2.13.2",
     "granim": "^2.0.0",
     "typed.js": "^2.0.11",
-    "vue": "^2.6.10",
+    "vue": "^2.6.12",
     "vue-codemirror": "^4.0.6",
-    "vue-faq-accordion": "^1.2.1",
+    "vue-faq-accordion": "^1.6.2",
     "vue-scrollTo": "^2.4.1",
     "vue-social-sharing": "^2.4.6",
     "vue-twentytwenty": "^0.6.2"
@@ -56,18 +56,18 @@
     "@vue/cli-plugin-eslint": "^3.11.0",
     "@vue/cli-service": "^3.11.0",
     "@vue/eslint-config-standard": "^4.0.0",
-    "babel-eslint": "^10.0.3",
+    "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "node-sass": "^4.9.2",
+    "node-sass": "^4.14.1",
     "raw-loader": "^2.0.0",
-    "sass": "^1.23.0",
+    "sass": "^1.27.0",
     "sass-loader": "^7.3.1",
     "stylelint": "^10.0.1",
-    "stylelint-config-recess-order": "^2.0.2",
+    "stylelint-config-recess-order": "^2.1.0",
     "stylelint-config-standard": "^18.3.0",
     "vue-cli-plugin-element": "^1.0.1",
-    "vue-template-compiler": "^2.5.21"
+    "vue-template-compiler": "^2.6.12"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index ec97caf..0326eb5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,7 +22,7 @@
           :xs="22"
           :sm="18"
         >
-          <p class="large">
+          <p>
             <a
               v-if="theme === 'dark'"
               :href="stylesDark"
@@ -634,20 +634,22 @@ export default {
     Header,
     CodeView: lazyLoadComponent({
       componentFactory: () => import('@/components/CodeView'),
-      background: localStorage.getItem('theme') === 'dark' ? '#304148' : '#f2f2f2',
-      height: '70vh',
+      background: localStorage.getItem('theme') === 'light' ? '#f2f2f2' : '#304148',
+      height: '80vh',
       loading: Loader
     }),
     HeroImage: lazyLoadComponent({
       componentFactory: () => import('@/components/HeroImage'),
-      background: localStorage.getItem('theme') === 'dark' ? '#515151' : '#f5f5f5',
-      height: '37vw',
+      background: localStorage.getItem('theme') === 'light' ? '#f5f5f5' : '#515151',
+      height: '50vw',
+      maxHeight: '350px',
       loading: Loader
     }),
     Compare: lazyLoadComponent({
       componentFactory: () => import('@/components/Compare'),
-      background: localStorage.getItem('theme') === 'dark' ? '#515151' : '#f5f5f5',
-      height: '45vw',
+      background: localStorage.getItem('theme') === 'light' ? '#f5f5f5' : '#515151',
+      height: '927px',
+      maxHeight: 'calc(100vw + 48px)',
       loading: Loader
     }),
     Faq,
diff --git a/src/components/CodeView.vue b/src/components/CodeView.vue
index c934fad..95ad34a 100644
--- a/src/components/CodeView.vue
+++ b/src/components/CodeView.vue
@@ -111,6 +111,10 @@ export default {
   height: 80vh;
 }
 
+::v-deep .CodeMirror {
+  background: transparent;
+}
+
 .code {
   height: calc(100% - 34px);
   font-size: calc(14px + 0.5vw);
diff --git a/src/components/Compare.vue b/src/components/Compare.vue
index 447b3bd..211622b 100644
--- a/src/components/Compare.vue
+++ b/src/components/Compare.vue
@@ -45,6 +45,15 @@
         </p>
       </el-col>
     </el-row>
+    <svg>
+      <filter id="posterize">
+        <feComponentTransfer>
+          <feFuncR type="discrete" tableValues="0 0.33 0.66 0.99" />
+          <feFuncG type="discrete" tableValues="0 0.33 0.66 0.99" />
+          <feFuncB type="discrete" tableValues="0 0.33 0.66 0.99" />
+        </feComponentTransfer>
+      </filter>
+    </svg>
   </div>
 </template>
 <script>
@@ -194,6 +203,10 @@ export default {
     }
   }
 
+  .twentytwenty-container:hover > ::v-deep .twentytwenty-overlay {
+    opacity: 0;
+  }
+
   // IE 9 only
   @media all and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
     .select {
@@ -213,7 +226,7 @@ export default {
   }
   .twentytwenty-container {
     z-index: 0;
-    height: 45vw;
+    height: 735px;
     img {
       z-index: auto;
     }
diff --git a/src/components/Faq.vue b/src/components/Faq.vue
index b2764ce..cbe4bd8 100644
--- a/src/components/Faq.vue
+++ b/src/components/Faq.vue
@@ -150,7 +150,8 @@ export default {
         }
       }
       .accordion__value {
-        padding: 0 25px 25px 50px;
+        padding: 0 25px 25px 75px;
+        line-height: calc(2rem + 1vw);
         color: inherit;
       }
     }
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index faae5ae..b6849d3 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -61,8 +61,8 @@ body {
 
 p {
   padding-bottom: 20px;
-  font-size: calc(0.9rem + 0.4vw);
-  line-height: calc(2rem + 0.6vw);
+  font-size: calc(1rem + 0.5vw);
+  line-height: calc(2rem + 1vw);
   &.columns {
     column-count: 2;
     column-width: 18em;
@@ -73,10 +73,6 @@ p {
       column-gap: 25px;
     }
   }
-  &.large {
-    font-size: calc(0.9rem + 0.8vw);
-    line-height: calc(1.6rem + 2vw);
-  }
   &.small {
     font-size: calc(0.8rem + 0.2vw);
     line-height: calc(1.75rem + 0.2vw);
@@ -207,7 +203,7 @@ p {
 }
 
 .no-padding {
-  padding: 0!important;
+  padding: 0 !important;
 }
 
 .scroll-head {
@@ -289,8 +285,8 @@ em.alt {
   float: right;
   height: 20vw;
   min-height: 300px;
-  max-height: 400px;
-  margin: 0 0 5px 25px;
+  max-height: 325px;
+  margin: 0 0 25px 5vw;
 }
 
 .code-segment {
diff --git a/src/utils/lazy-load-component.js b/src/utils/lazy-load-component.js
index d474f45..2384d38 100644
--- a/src/utils/lazy-load-component.js
+++ b/src/utils/lazy-load-component.js
@@ -2,6 +2,7 @@ export default function lazyLoadComponent ({
   componentFactory,
   background,
   height,
+  maxHeight,
   loading,
   loadingData
 }) {
@@ -15,8 +16,10 @@ export default function lazyLoadComponent ({
     }),
     loading: {
       mounted () {
-        this.$el.style.background = background || '#595959'
+        console.log(background)
+        this.$el.style.backgroundColor = background || '#595959'
         this.$el.style.height = height || 0
+        this.$el.style.maxHeight = maxHeight || 'auto'
         // We immediately load the component if
         // `IntersectionObserver` is not supported.
         if (!('IntersectionObserver' in window)) {