diff --git a/app/soapbox/actions/settings.js b/app/soapbox/actions/settings.js
index 205250c3bb..03b538bcc7 100644
Binary files a/app/soapbox/actions/settings.js and b/app/soapbox/actions/settings.js differ
diff --git a/app/soapbox/features/soapbox_config/components/site_preview.js b/app/soapbox/features/soapbox_config/components/site_preview.js
new file mode 100644
index 0000000000..725ed30798
Binary files /dev/null and b/app/soapbox/features/soapbox_config/components/site_preview.js differ
diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js
index d6823cee0c..6038f9961b 100644
Binary files a/app/soapbox/features/soapbox_config/index.js and b/app/soapbox/features/soapbox_config/index.js differ
diff --git a/app/soapbox/utils/theme.js b/app/soapbox/utils/theme.js
index 6e847b5a4c..5997019a89 100644
Binary files a/app/soapbox/utils/theme.js and b/app/soapbox/utils/theme.js differ
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index a9cf3b1d45..808b21fdef 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -5,6 +5,7 @@
   flex: 0 0 auto;
   overflow-y: auto;
   height: 50px;
+  width: 100%;
   position: sticky;
   top: 0;
   z-index: 1000;
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 8338f2af36..9829ce2800 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -705,3 +705,33 @@ code {
   cursor: pointer;
   color: $error-red;
 }
+
+.site-preview {
+  border-radius: 4px;
+  overflow: hidden;
+  height: 164px;
+  border: 1px solid;
+  margin-bottom: 40px;
+  background: var(--background-color);
+
+  * {
+    z-index: 0;
+  }
+
+  a {
+    cursor: default;
+  }
+
+  .ui {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    height: 100%;
+  }
+
+  .page {
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+}
diff --git a/app/styles/holiday/halloween.scss b/app/styles/holiday/halloween.scss
index b63a1ed0fb..ad190a18bd 100644
--- a/app/styles/holiday/halloween.scss
+++ b/app/styles/holiday/halloween.scss
@@ -1,4 +1,5 @@
-body.halloween {
+.halloween,
+.site-preview.halloween {
   // Set brand color to orange
   --brand-color_h: 29.727272727272727;
   --brand-color_s: 100%;
@@ -14,8 +15,8 @@ body.halloween {
   // Full-screen pseudo-elements to hold BG graphics
   &::before,
   &::after,
-  .app-holder::before,
-  .app-holder::after {
+  > .app-holder::before,
+  > .app-holder::after {
     content: '';
     display: block;
     position: fixed;
@@ -42,7 +43,7 @@ body.halloween {
     animation: halloween-twinkle 200s linear infinite;
   }
 
-  .app-holder {
+  > .app-holder {
     // Vignette
     &::before {
       background-image: radial-gradient(
@@ -58,90 +59,90 @@ body.halloween {
       background: transparent url("../images/halloween/clouds.png") repeat top center;
       animation: halloween-clouds 200s linear infinite;
     }
-  }
 
-  // Dangling spider
-  .ui .page__top::after,
-  .ui .page__columns::after {
-    content: '';
-    display: block;
-    width: 100px;
-    height: 100px;
-    right: 20px;
-    background-image: url('../images/halloween/spider.svg');
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: top right;
-    z-index: -1;
-    pointer-events: none;
-  }
-
-  .ui .page__columns::after {
-    position: fixed;
-    top: 50px;
-  }
-
-  .ui .page__top::after {
-    position: absolute;
-    bottom: -100px;
-  }
-
-  .ui .page__top + .page__columns::after {
-    display: none;
-  }
-
-  // Witch emblem
-  .getting-started__footer::before {
-    content: '';
-    display: block;
-    background-image: url('../images/halloween/halloween-emblem.svg');
-    background-size: contain;
-    background-position: left;
-    background-repeat: no-repeat;
-    width: 100%;
-    height: 100px;
-    margin-bottom: 20px;
-  }
-
-  // Color fixes
-  // Elements directly over the BG need static colors that don't change
-  // regardless of the theme-mode
-  .getting-started__footer {
-    color: #fff;
-
-    a {
-      color: hsla(0, 0%, 100%, 0.4);
+    // Dangling spider
+    .ui .page__top::after,
+    .ui .page__columns::after {
+      content: '';
+      display: block;
+      width: 100px;
+      height: 100px;
+      right: 20px;
+      background-image: url('../images/halloween/spider.svg');
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: top right;
+      z-index: -1;
+      pointer-events: none;
     }
 
-    p {
-      color: hsla(0, 0%, 100%, 0.8);
+    .ui .page__columns::after {
+      position: fixed;
+      top: 50px;
     }
-  }
 
-  .profile-info-panel {
-    color: #fff;
+    .ui .page__top::after {
+      position: absolute;
+      bottom: -100px;
+    }
 
-    &-content__name h1 {
-      span:first-of-type {
-        color: hsla(0, 0%, 100%, 0.6);
+    .ui .page__top + .page__columns::after {
+      display: none;
+    }
+
+    // Witch emblem
+    .getting-started__footer::before {
+      content: '';
+      display: block;
+      background-image: url('../images/halloween/halloween-emblem.svg');
+      background-size: contain;
+      background-position: left;
+      background-repeat: no-repeat;
+      width: 100%;
+      height: 100px;
+      margin-bottom: 20px;
+    }
+
+    // Color fixes
+    // Elements directly over the BG need static colors that don't change
+    // regardless of the theme-mode
+    .getting-started__footer {
+      color: #fff;
+
+      a {
+        color: hsla(0, 0%, 100%, 0.4);
       }
 
-      small {
+      p {
+        color: hsla(0, 0%, 100%, 0.8);
+      }
+    }
+
+    .profile-info-panel {
+      color: #fff;
+
+      &-content__name h1 {
+        span:first-of-type {
+          color: hsla(0, 0%, 100%, 0.6);
+        }
+
+        small {
+          color: #fff;
+        }
+      }
+
+      &-content__bio {
         color: #fff;
       }
-    }
 
-    &-content__bio {
-      color: #fff;
-    }
-
-    &-content__bio a,
-    &-content__fields a {
-      color: hsl(
-        var(--brand-color_h),
-        var(--brand-color_s),
-        calc(var(--brand-color_l) + 8%)
-      );
+      &-content__bio a,
+      &-content__fields a {
+        color: hsl(
+          var(--brand-color_h),
+          var(--brand-color_s),
+          calc(var(--brand-color_l) + 8%)
+        );
+      }
     }
   }
 }
diff --git a/app/styles/themes.scss b/app/styles/themes.scss
index a670b30860..fb7b89bbd2 100644
--- a/app/styles/themes.scss
+++ b/app/styles/themes.scss
@@ -24,7 +24,8 @@ Examples:
   --primary-text-color--faint
 */
 
-body {
+body,
+.site-preview {
   // Primary variables
   --brand-color: hsl(var(--brand-color_hsl));
   --accent-color: hsl(var(--accent-color_hsl));
@@ -56,7 +57,7 @@ body {
   --warning-color--faint: hsla(var(--warning-color_hsl), 0.5);
 }
 
-body.theme-mode-light {
+.theme-mode-light {
   // Primary variables
   --foreground-color: #ffffff;
   --highlight-text-color: hsl(
@@ -85,7 +86,7 @@ body.theme-mode-light {
   );
 }
 
-body.theme-mode-dark {
+.theme-mode-dark {
   // Primary variables
   --foreground-color: #222222;
   --highlight-text-color: hsl(