diff --git a/app/soapbox/actions/settings.js b/app/soapbox/actions/settings.js
index 205250c3b..03b538bcc 100644
--- a/app/soapbox/actions/settings.js
+++ b/app/soapbox/actions/settings.js
@@ -9,7 +9,7 @@ export const SETTING_SAVE   = 'SETTING_SAVE';
 
 export const FE_NAME = 'soapbox_fe';
 
-const defaultSettings = ImmutableMap({
+export const defaultSettings = ImmutableMap({
   onboarded: false,
 
   skinTone: 1,
diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js
index ea9f753d4..f0e407033 100644
--- a/app/soapbox/components/sidebar_menu.js
+++ b/app/soapbox/components/sidebar_menu.js
@@ -15,7 +15,7 @@ import { shortNumberFormat } from '../utils/numbers';
 import { isStaff } from '../utils/accounts';
 import { makeGetAccount } from '../selectors';
 import { logOut } from 'soapbox/actions/auth';
-import ThemeToggle from '../features/ui/components/theme_toggle';
+import ThemeToggle from '../features/ui/components/theme_toggle_container';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
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 000000000..725ed3079
--- /dev/null
+++ b/app/soapbox/features/soapbox_config/components/site_preview.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import classNames from 'classnames';
+import { defaultSettings } from 'soapbox/actions/settings';
+import { brandColorToCSS } from 'soapbox/utils/theme';
+
+export default function SitePreview({ soapbox }) {
+
+  const settings = defaultSettings.mergeDeep(soapbox.get('defaultSettings'));
+
+  const bodyClass = classNames('site-preview app-body', `theme-mode-${settings.get('themeMode')}`, {
+    'system-font': settings.get('systemFont'),
+    'no-reduce-motion': !settings.get('reduceMotion'),
+    'dyslexic': settings.get('dyslexicFont'),
+    'demetricator': settings.get('demetricator'),
+    'halloween': settings.get('halloween'),
+  });
+
+  return (
+    <div className={bodyClass}>
+      <style>{`.site-preview {${brandColorToCSS(soapbox.get('brandColor'))}}`}</style>
+      <div className='app-holder'>
+        <div>
+          <div className='ui'>
+            <nav className='tabs-bar'>
+              <div className='tabs-bar__container'>
+                <div className='tabs-bar__split tabs-bar__split--left'>
+                  <a className='tabs-bar__link--logo' href='#'>
+                    <img alt='Logo' src={soapbox.get('logo')} />
+                    <span>Home</span>
+                  </a>
+                  <a className='tabs-bar__link' href='#'>
+                    <i role='img' alt='home' className='fa fa-home' />
+                    <span>Home</span>
+                  </a>
+                  <a className='tabs-bar__link' href='#'>
+                    <i role='img' alt='bell' className='fa fa-bell' />
+                    <span>Notifications</span>
+                  </a>
+                </div>
+              </div>
+            </nav>
+            <div className='page'>
+              <span className='spoiler-button__overlay__label'>Site Preview</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+}
+
+SitePreview.propTypes = {
+  soapbox: ImmutablePropTypes.map.isRequired,
+};
diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js
index d6823cee0..50ba5257d 100644
--- a/app/soapbox/features/soapbox_config/index.js
+++ b/app/soapbox/features/soapbox_config/index.js
@@ -23,6 +23,9 @@ import Overlay from 'react-overlays/lib/Overlay';
 import { isMobile } from 'soapbox/is_mobile';
 import detectPassiveEvents from 'detect-passive-events';
 import Accordion from '../ui/components/accordion';
+import SitePreview from './components/site_preview';
+import ThemeToggle from 'soapbox/features/ui/components/theme_toggle';
+import { defaultSettings } from 'soapbox/actions/settings';
 
 const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
@@ -185,15 +188,26 @@ class SoapboxConfig extends ImmutablePureComponent {
   render() {
     const { intl } = this.props;
     const soapbox = this.getSoapboxConfig();
+    const settings = defaultSettings.mergeDeep(soapbox.get('defaultSettings'));
 
     return (
       <Column icon='cog' heading={intl.formatMessage(messages.heading)} backBtnSlim>
         <SimpleForm onSubmit={this.handleSubmit}>
           <fieldset disabled={this.state.isLoading}>
+            <SitePreview soapbox={soapbox} />
             <FieldsGroup>
               <div className='fields-row file-picker'>
                 <div className='fields-row__column fields-row__column-6'>
-                  <img src={soapbox.get('logo')} />
+                  <ColorWithPicker
+                    buttonId='brand_color'
+                    label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
+                    value={soapbox.get('brandColor')}
+                    onChange={this.handleChange(['brandColor'], (e) => e.hex)}
+                  />
+                  <ThemeToggle
+                    onToggle={this.handleChange(['defaultSettings', 'themeMode'], value => value)}
+                    settings={settings}
+                  />
                 </div>
                 <div className='fields-row__column fields-group fields-row__column-6'>
                   <FileChooserLogo
@@ -204,41 +218,7 @@ class SoapboxConfig extends ImmutablePureComponent {
                   />
                 </div>
               </div>
-              {/*<div className='fields-row file-picker'>
-                <div className='fields-row__column fields-row__column-6'>
-                  <img src={soapbox.get('banner')} />
-                </div>
-                <div className='fields-row__column fields-group fields-row__column-6'>
-                  <FileChooser
-                    label={<FormattedMessage id='soapbox_config.fields.banner_label' defaultMessage='Banner' />}
-                    name='banner'
-                    hint={<FormattedMessage id='soapbox_config.hints.banner' defaultMessage='PNG, GIF or JPG. At most 2 MB. Will be displayed to 400x400px' />}
-                    onChange={this.handleFileChange(['banner'])}
-                  />
-                </div>
-              </div>*/}
             </FieldsGroup>
-            <FieldsGroup>
-              <div className='fields-row__column fields-group'>
-                <ColorWithPicker
-                  buttonId='brand_color'
-                  label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
-                  value={soapbox.get('brandColor')}
-                  onChange={this.handleChange(['brandColor'], (e) => e.hex)}
-                />
-              </div>
-            </FieldsGroup>
-            {/*<FieldsGroup>
-              <Checkbox
-                label={<FormattedMessage id='soapbox_config.fields.patron_enabled_label' defaultMessage='Patron module' />}
-                hint={<FormattedMessage id='soapbox_config.hints.patron_enabled' defaultMessage='Enables display of Patron module.  Requires installation of Patron module.' />}
-                name='patron'
-                checked={soapbox.getIn(['extensions', 'patron', 'enabled'])}
-                onChange={this.handleChange(
-                  ['extensions', 'patron', 'enabled'], (e) => e.checked,
-                )}
-              />
-            </FieldsGroup>*/}
             <FieldsGroup>
               <TextInput
                 name='copyright'
@@ -249,104 +229,77 @@ class SoapboxConfig extends ImmutablePureComponent {
               />
             </FieldsGroup>
             <FieldsGroup>
-              <div className='fields-row__column fields-group'>
-                <div className='input with_block_label'>
-                  <label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
-                  <span className='hint'>
-                    <FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the left panel of the timelines page.' />
-                  </span>
-                  <span className='hint'>
-                    <FormattedMessage id='soapbox_config.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://forkaweso.me/Fork-Awesome/icons/'>Soapbox Icons List</a> }} />
-                  </span>
-                  {
-                    soapbox.getIn(['promoPanel', 'items']).map((field, i) => (
-                      <div className='row' key={i}>
-                        <TextInput
-                          label={intl.formatMessage(messages.promoItemIcon)}
-                          placeholder={intl.formatMessage(messages.promoItemIcon)}
-                          value={field.get('icon')}
-                          onChange={this.handlePromoItemChange(i, 'icon', field)}
-                        />
-                        <TextInput
-                          label={intl.formatMessage(messages.promoItemLabel)}
-                          placeholder={intl.formatMessage(messages.promoItemLabel)}
-                          value={field.get('text')}
-                          onChange={this.handlePromoItemChange(i, 'text', field)}
-                        />
-                        <TextInput
-                          label={intl.formatMessage(messages.promoItemURL)}
-                          placeholder={intl.formatMessage(messages.promoItemURL)}
-                          value={field.get('url')}
-                          onChange={this.handlePromoItemChange(i, 'url', field)}
-                        />
-                        <Icon id='times-circle' onClick={this.handleDeleteItem(['promoPanel', 'items', i])} />
-                      </div>
-                    ))
-                  }
-                  <div className='actions'>
-                    <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}>
-                      <Icon id='plus-circle' />
-                      <FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
-                    </div>
-                  </div>
-                </div>
-                <div className='input with_block_label'>
-                  <label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
-                  <span className='hint'>
-                    <FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
-                  </span>
-                  {
-                    soapbox.getIn(['navlinks', 'homeFooter']).map((field, i) => (
-                      <div className='row' key={i}>
-                        <TextInput
-                          label={intl.formatMessage(messages.homeFooterItemLabel)}
-                          placeholder={intl.formatMessage(messages.homeFooterItemLabel)}
-                          value={field.get('title')}
-                          onChange={this.handleHomeFooterItemChange(i, 'title', field)}
-                        />
-                        <TextInput
-                          label={intl.formatMessage(messages.homeFooterItemURL)}
-                          placeholder={intl.formatMessage(messages.homeFooterItemURL)}
-                          value={field.get('url')}
-                          onChange={this.handleHomeFooterItemChange(i, 'url', field)}
-                        />
-                        <Icon id='times-circle' onClick={this.handleDeleteItem(['navlinks', 'homeFooter', i])} />
-                      </div>
-                    ))
-                  }
-                  <div className='actions'>
-                    <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}>
-                      <Icon id='plus-circle' />
-                      <FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              {/* <div className='input with_block_label'>
-                <label><FormattedMessage id='soapbox_config.fields.custom_css_fields_label' defaultMessage='Custom CSS' /></label>
+              <div className='input with_block_label'>
+                <label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
                 <span className='hint'>
-                  <FormattedMessage id='soapbox_config.hints.custom_css_fields' defaultMessage='Insert a URL to a CSS file like `https://mysite.com/instance/custom.css`, or simply `/instance/custom.css`' />
+                  <FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the left panel of the timelines page.' />
+                </span>
+                <span className='hint'>
+                  <FormattedMessage id='soapbox_config.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://forkaweso.me/Fork-Awesome/icons/'>Soapbox Icons List</a> }} />
                 </span>
                 {
-                  soapbox.get('customCss').map((field, i) => (
+                  soapbox.getIn(['promoPanel', 'items']).map((field, i) => (
                     <div className='row' key={i}>
                       <TextInput
-                        label={intl.formatMessage(messages.customCssLabel)}
-                        placeholder={intl.formatMessage(messages.customCssLabel)}
-                        value={field}
-                        onChange={this.handleChange(['customCss', i], (e) => e.target.value)}
+                        label={intl.formatMessage(messages.promoItemIcon)}
+                        placeholder={intl.formatMessage(messages.promoItemIcon)}
+                        value={field.get('icon')}
+                        onChange={this.handlePromoItemChange(i, 'icon', field)}
                       />
-                      <Icon id='times-circle' onClick={this.handleDeleteItem(['customCss', i])} />
+                      <TextInput
+                        label={intl.formatMessage(messages.promoItemLabel)}
+                        placeholder={intl.formatMessage(messages.promoItemLabel)}
+                        value={field.get('text')}
+                        onChange={this.handlePromoItemChange(i, 'text', field)}
+                      />
+                      <TextInput
+                        label={intl.formatMessage(messages.promoItemURL)}
+                        placeholder={intl.formatMessage(messages.promoItemURL)}
+                        value={field.get('url')}
+                        onChange={this.handlePromoItemChange(i, 'url', field)}
+                      />
+                      <Icon id='times-circle' onClick={this.handleDeleteItem(['promoPanel', 'items', i])} />
                     </div>
                   ))
                 }
                 <div className='actions'>
-                  <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['customCss'], '')}>
+                  <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}>
                     <Icon id='plus-circle' />
-                    <FormattedMessage id='soapbox_config.fields.custom_css.add' defaultMessage='Add another custom CSS URL' />
+                    <FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
                   </div>
                 </div>
-              </div> */}
+              </div>
+              <div className='input with_block_label'>
+                <label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
+                <span className='hint'>
+                  <FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
+                </span>
+                {
+                  soapbox.getIn(['navlinks', 'homeFooter']).map((field, i) => (
+                    <div className='row' key={i}>
+                      <TextInput
+                        label={intl.formatMessage(messages.homeFooterItemLabel)}
+                        placeholder={intl.formatMessage(messages.homeFooterItemLabel)}
+                        value={field.get('title')}
+                        onChange={this.handleHomeFooterItemChange(i, 'title', field)}
+                      />
+                      <TextInput
+                        label={intl.formatMessage(messages.homeFooterItemURL)}
+                        placeholder={intl.formatMessage(messages.homeFooterItemURL)}
+                        value={field.get('url')}
+                        onChange={this.handleHomeFooterItemChange(i, 'url', field)}
+                      />
+                      <Icon id='times-circle' onClick={this.handleDeleteItem(['navlinks', 'homeFooter', i])} />
+                    </div>
+                  ))
+                }
+                <div className='actions'>
+                  <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}>
+                    <Icon id='plus-circle' />
+                    <FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
+                  </div>
+                </div>
+              </div>
             </FieldsGroup>
             <Accordion
               headline={intl.formatMessage(messages.rawJSONLabel)}
diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js
index 1440e2ae6..46c314500 100644
--- a/app/soapbox/features/ui/components/tabs_bar.js
+++ b/app/soapbox/features/ui/components/tabs_bar.js
@@ -14,7 +14,7 @@ import ActionBar from 'soapbox/features/compose/components/action_bar';
 import { openModal } from '../../../actions/modal';
 import { openSidebar } from '../../../actions/sidebar';
 import Icon from '../../../components/icon';
-import ThemeToggle from '../../ui/components/theme_toggle';
+import ThemeToggle from '../../ui/components/theme_toggle_container';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { isStaff } from 'soapbox/utils/accounts';
 
diff --git a/app/soapbox/features/ui/components/theme_toggle.js b/app/soapbox/features/ui/components/theme_toggle.js
index 50e6fbb7f..317020111 100644
--- a/app/soapbox/features/ui/components/theme_toggle.js
+++ b/app/soapbox/features/ui/components/theme_toggle.js
@@ -1,10 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import { injectIntl, defineMessages } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Icon from '../../../components/icon';
-import { changeSetting, getSettings } from 'soapbox/actions/settings';
 import SettingToggle from '../../notifications/components/setting_toggle';
 
 const messages = defineMessages({
@@ -12,31 +10,18 @@ const messages = defineMessages({
   switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
 });
 
-const mapStateToProps = state => {
-  return {
-    settings: getSettings(state),
-  };
-};
-
-const mapDispatchToProps = (dispatch) => ({
-  toggleTheme(setting) {
-    dispatch(changeSetting(['themeMode'], setting));
-  },
-});
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
+export default @injectIntl
 class ThemeToggle extends React.PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
     settings: ImmutablePropTypes.map.isRequired,
-    toggleTheme: PropTypes.func,
+    onToggle: PropTypes.func.isRequired,
     showLabel: PropTypes.bool,
   };
 
   handleToggleTheme = () => {
-    this.props.toggleTheme(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
+    this.props.onToggle(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
   }
 
   render() {
diff --git a/app/soapbox/features/ui/components/theme_toggle_container.js b/app/soapbox/features/ui/components/theme_toggle_container.js
new file mode 100644
index 000000000..4a2cad1f7
--- /dev/null
+++ b/app/soapbox/features/ui/components/theme_toggle_container.js
@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { changeSetting, getSettings } from 'soapbox/actions/settings';
+import ThemeToggle from './theme_toggle';
+
+const mapStateToProps = state => {
+  return {
+    settings: getSettings(state),
+  };
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  onToggle(setting) {
+    dispatch(changeSetting(['themeMode'], setting));
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ThemeToggle);
diff --git a/app/soapbox/utils/theme.js b/app/soapbox/utils/theme.js
index 6e847b5a4..5997019a8 100644
--- a/app/soapbox/utils/theme.js
+++ b/app/soapbox/utils/theme.js
@@ -79,3 +79,5 @@ export const themeDataToCss = themeData => (
     .entrySeq()
     .reduce((acc, cur) => acc + `--${cur[0]}:${cur[1]};`, '')
 );
+
+export const brandColorToCSS = brandColor => themeDataToCss(brandColorToThemeData(brandColor));
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index a9cf3b1d4..808b21fde 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 8338f2af3..9829ce280 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 b63a1ed0f..ad190a18b 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 a670b3086..fb7b89bbd 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(