diff --git a/app/soapbox/features/about/index.js b/app/soapbox/features/about/index.js
index 89d952f72f..de2475eac1 100644
Binary files a/app/soapbox/features/about/index.js and b/app/soapbox/features/about/index.js differ
diff --git a/app/soapbox/features/landing_page/components/registration_form.js b/app/soapbox/features/landing_page/components/registration_form.js
index fd525fb0d6..2fc0c8a531 100644
Binary files a/app/soapbox/features/landing_page/components/registration_form.js and b/app/soapbox/features/landing_page/components/registration_form.js differ
diff --git a/app/styles/soapbox/about.scss b/app/styles/soapbox/about.scss
index e931ff00e0..6e081bc0f1 100644
--- a/app/styles/soapbox/about.scss
+++ b/app/styles/soapbox/about.scss
@@ -729,6 +729,13 @@ $small-breakpoint: 960px;
     &--right {
       margin-left: auto;
       width: 395px;
+      background-color: #fff;
+      border-radius: 6px;
+
+      .simple_form {
+        padding: 20px;
+        background-color: var(--brand-color-faint);
+      }
     }
 
     @media (min-width: 767px) and (max-width: 1024px) {
@@ -1005,3 +1012,7 @@ $small-breakpoint: 960px;
 .public-layout pre.canary {
   white-space: pre-wrap;
 }
+
+.about-page {
+  background: var(--brand-color-faint);
+}
diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss
index ffd098048c..ac420cfd33 100644
--- a/app/styles/soapbox/components.scss
+++ b/app/styles/soapbox/components.scss
@@ -53,7 +53,7 @@
 
   &:disabled,
   &.disabled {
-    background-color: $ui-primary-color;
+    background-color: var(--brand-color-med);
     cursor: default;
   }
 
diff --git a/app/styles/soapbox/containers.scss b/app/styles/soapbox/containers.scss
index 073bc216b8..030c17940c 100644
--- a/app/styles/soapbox/containers.scss
+++ b/app/styles/soapbox/containers.scss
@@ -203,6 +203,8 @@
   .content {
     display: block;
     margin: 40px 0;
+    background: #fff;
+    border-radius: 6px;
 
     @media screen and (max-width: 767px) {
       margin-top: 0;
@@ -270,10 +272,12 @@
             position: absolute;
             top: 30px;
             left: 160px;
+            border-radius: 4px;
+            background: #fff;
+            overflow: hidden;
 
             a {
               padding: 4px;
-              border-radius: 4px;
               background-color: var(--brand-color-med);
             }
           }
diff --git a/app/styles/soapbox/footer.scss b/app/styles/soapbox/footer.scss
index 167595478b..1a2b2f5787 100644
--- a/app/styles/soapbox/footer.scss
+++ b/app/styles/soapbox/footer.scss
@@ -6,8 +6,8 @@
     justify-content: center;
     align-items: center;
     margin-top: auto;
-    background-color: lighten($ui-base-color, 5%);
-    border-top: darken($ui-base-color, 10%);
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.15);
 
     @media screen and (max-width: 1024px) {
       padding: 40px 20px;
@@ -48,14 +48,9 @@
       margin-right: auto;
 
       span {
-        color: var(--primary-text-color);
         font-size: 1.3rem;
         font-weight: 500;
         line-height: 1.5;
-
-        &:last-of-type {
-          color: var(--primary-text-color-faint);
-        }
       }
     }
 
@@ -67,7 +62,7 @@
       li {
         a {
           text-decoration: none;
-          color: lighten($ui-base-color, 34%);
+          color: #fff;
           font-size: 1.3rem;
           font-weight: 500;
           line-height: 1.5;
diff --git a/app/styles/soapbox/forms.scss b/app/styles/soapbox/forms.scss
index b55ae17f8c..5bbf634cfb 100644
--- a/app/styles/soapbox/forms.scss
+++ b/app/styles/soapbox/forms.scss
@@ -409,17 +409,10 @@ code {
       margin-right: 0;
     }
 
-    &:hover {
-      background-color: lighten($ui-highlight-color, 5%);
-    }
-
+    &:hover,
     &:active,
     &:focus {
-      background-color: darken($ui-highlight-color, 5%);
-    }
-
-    &:disabled:hover {
-      background-color: $ui-primary-color;
+      background-color: var(--brand-color-hicontrast);
     }
 
     &.negative {