diff --git a/app/soapbox/actions/beta.js b/app/soapbox/actions/beta.js
deleted file mode 100644
index 21f4013b4c..0000000000
Binary files a/app/soapbox/actions/beta.js and /dev/null differ
diff --git a/app/soapbox/components/landing-gradient.tsx b/app/soapbox/components/landing-gradient.tsx
index 53e500d285..28be27373f 100644
--- a/app/soapbox/components/landing-gradient.tsx
+++ b/app/soapbox/components/landing-gradient.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 /** Fullscreen gradient used as a backdrop to public pages. */
 const LandingGradient: React.FC = () => (
-  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-gradient-end/10 dark:to-slate-900' />
+  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-900/50 via-white dark:via-slate-900 to-gradient-end/10 dark:to-slate-900/50' />
 );
 
 export default LandingGradient;
diff --git a/app/soapbox/components/ui/checkbox/checkbox.tsx b/app/soapbox/components/ui/checkbox/checkbox.tsx
index dc7a4e3700..3199d4a337 100644
--- a/app/soapbox/components/ui/checkbox/checkbox.tsx
+++ b/app/soapbox/components/ui/checkbox/checkbox.tsx
@@ -9,7 +9,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
       {...props}
       ref={ref}
       type='checkbox'
-      className='focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded'
+      className='dark:bg-slate-800 dark:border-gray-600 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded'
     />
   );
 });
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index a3aa26a6ab..10e9d5559d 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -183,7 +183,6 @@ const SoapboxMount = () => {
 
                 {!me && <Route exact path='/' component={PublicLayout} />}
                 <Route exact path='/about/:slug?' component={PublicLayout} />
-                <Route exact path='/beta/:slug?' component={PublicLayout} />
                 <Route exact path='/mobile/:slug?' component={PublicLayout} />
                 <Route path='/login' component={AuthLayout} />
                 {(features.accountCreation && instance.registrations) && (
diff --git a/app/soapbox/features/beta/index.js b/app/soapbox/features/beta/index.js
deleted file mode 100644
index aaba33fc56..0000000000
Binary files a/app/soapbox/features/beta/index.js and /dev/null differ
diff --git a/app/soapbox/features/landing_page/index.tsx b/app/soapbox/features/landing_page/index.tsx
index 4d408666d9..586f198e23 100644
--- a/app/soapbox/features/landing_page/index.tsx
+++ b/app/soapbox/features/landing_page/index.tsx
@@ -68,13 +68,14 @@ const LandingPage = () => {
   return (
     <main className='mt-16 sm:mt-24' data-testid='homepage'>
       <div className='mx-auto max-w-7xl'>
-        <div className='lg:grid lg:grid-cols-12 lg:gap-8 py-12'>
+        <div className='grid grid-cols-1 lg:grid-cols-12 gap-8 py-12'>
           <div className='px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex'>
             <div>
               <Stack space={3}>
                 <h1 className='text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
                   {instance.title}
                 </h1>
+
                 <Text size='lg'>
                   {instance.description}
                 </Text>
diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx
index 79253194e3..03b33b0c4b 100644
--- a/app/soapbox/features/public_layout/components/header.tsx
+++ b/app/soapbox/features/public_layout/components/header.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
@@ -27,10 +28,10 @@ const Header = () => {
   const dispatch = useDispatch();
   const intl = useIntl();
 
-  const { logo } = useSoapboxConfig();
+  const { logo, logoDarkMode } = useSoapboxConfig();
   const features = useFeatures();
   const instance = useAppSelector((state) => state.instance);
-  const isOpen   = instance.get('registrations', false) === true;
+  const isOpen = instance.get('registrations', false) === true;
   const pepeOpen = useAppSelector(state => state.verification.getIn(['instance', 'registrations'], false) === true);
 
   const [isLoading, setLoading] = React.useState(false);
@@ -76,7 +77,11 @@ const Header = () => {
               <Sonar />
             </div>
             <Link to='/' className='z-10'>
-              <img alt='Logo' src={logo} className='h-6 w-auto cursor-pointer' />
+              <img alt='Logo' src={logo} className={classNames('h-6 w-auto cursor-pointer', { 'dark:hidden': logoDarkMode })} />
+              {logoDarkMode && (
+                <img alt='Logo' src={logoDarkMode} className='h-6 w-auto cursor-pointer hidden dark:block' />
+              )}
+
               <span className='hidden'>{intl.formatMessage(messages.home)}</span>
             </Link>
           </div>
diff --git a/app/soapbox/features/public_layout/components/sonar.tsx b/app/soapbox/features/public_layout/components/sonar.tsx
index f6a8ce21e9..10ae9f2934 100644
--- a/app/soapbox/features/public_layout/components/sonar.tsx
+++ b/app/soapbox/features/public_layout/components/sonar.tsx
@@ -3,10 +3,10 @@ import React from 'react';
 const Sonar = () => (
   <div className='relative'>
     <div className='relative w-48 h-48'>
-      <div className='animate-sonar-scale-4 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 pointer-events-none' />
-      <div className='animate-sonar-scale-3 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 pointer-events-none' />
-      <div className='animate-sonar-scale-2 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 pointer-events-none' />
-      <div className='animate-sonar-scale-1 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 pointer-events-none' />
+      <div className='animate-sonar-scale-4 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
+      <div className='animate-sonar-scale-3 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
+      <div className='animate-sonar-scale-2 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
+      <div className='animate-sonar-scale-1 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
 
       <div className='absolute top-0 left-0 w-48 h-48 bg-white dark:bg-slate-900 rounded-full' />
     </div>
diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js
index 30c206838c..a7cb641eb4 100644
Binary files a/app/soapbox/features/public_layout/index.js and b/app/soapbox/features/public_layout/index.js differ
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts
index cab8dc44c5..f1fed529ba 100644
--- a/app/soapbox/normalizers/soapbox/soapbox_config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts
@@ -110,7 +110,6 @@ export const SoapboxConfigRecord = ImmutableRecord({
     limit: 1,
   }),
   aboutPages: ImmutableMap(),
-  betaPages: ImmutableMap(),
   mobilePages: ImmutableMap(),
   authenticatedProfile: true,
   singleUserMode: false,
diff --git a/app/styles/about.scss b/app/styles/about.scss
index b1041d7d4d..5e2753feb4 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -234,158 +234,6 @@ $fluid-breakpoint: $maximum-width + 20px;
     }
   }
 
-  .beta-page {
-    .app-cta {
-      display: flex;
-      align-items: center;
-      margin: 40px auto;
-
-      @media screen and (max-width: 768px) {
-        flex-direction: column;
-      }
-
-      .copy {
-        flex: 2;
-        background: white;
-        border: 1px solid #eee;
-        padding: 80px;
-        border-radius: 10px;
-
-        @media screen and (max-width: 768px) {
-          padding: 60px 20px 20px 20px;
-          order: 1;
-          text-align: center;
-        }
-      }
-
-      .icon {
-        border-radius: 10px;
-        transform: scale(1.25);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 1;
-        padding: 40px;
-        background: linear-gradient(to bottom, $color-4-light, $color-4);
-        box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
-
-        @media screen and (max-width: 768px) {
-          order: 0;
-          transform: scale(0.75);
-          margin-bottom: -60px;
-        }
-
-        img {
-          border-radius: 16px;
-          box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
-        }
-      }
-
-      h1 {
-        margin: 0 0 20px 0;
-        font-size: 80px;
-        line-height: 90px;
-        font-weight: 600;
-        background: -webkit-linear-gradient(135deg, $color-9, $color-4-light, $color-2-light);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-
-        @media screen and (max-width: 767px) {
-          margin-bottom: 30px;
-          text-align: center;
-          font-size: 50px;
-          line-height: 55px;
-        }
-      }
-    }
-  }
-
-  .beta-header {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .hand-wave {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 200px;
-      height: 200px;
-      background: white;
-      border-radius: 50%;
-      margin-bottom: 20px;
-
-      @media screen and (max-width: $fluid-breakpoint) {
-        width: 120px;
-        height: 120px;
-      }
-
-      img {
-        animation: 1s ease-in wave;
-        max-width: 140px;
-
-        @media screen and (max-width: $fluid-breakpoint) {
-          width: 80px;
-          height: 80px;
-        }
-      }
-    }
-
-    .message {
-      margin: 40px 0;
-      padding: 20px;
-      width: 100%;
-      background: lighten($color-4-light, 30%);
-      border-radius: 10px;
-
-      p {
-        color: $color-4;
-        text-align: center;
-        font-size: 20px;
-        font-weight: 500;
-      }
-
-      span {
-        font-style: italic;
-        font-weight: 600;
-      }
-    }
-
-    .group {
-      display: flex;
-      align-items: center;
-
-      @media screen and (max-width: $fluid-breakpoint) {
-        display: block;
-      }
-
-      .logo {
-        padding: 0 40px;
-        border-right: 10px solid transparentize($color-3, 0.9);
-
-        @media screen and (max-width: $fluid-breakpoint) {
-          border-right: none;
-        }
-      }
-
-      .text {
-        padding: 0 40px;
-        font-weight: 600;
-        font-size: 80px;
-        font-style: italic;
-        color: $color-4-dark;
-
-        @media screen and (max-width: $fluid-breakpoint) {
-          padding: 0;
-          font-weight: 600;
-          font-size: 40px;
-          text-align: center;
-        }
-      }
-    }
-  }
-
   .faq {
     margin-bottom: 80px;
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 0aa665e2e8..7ac10feee9 100644
Binary files a/tailwind.config.js and b/tailwind.config.js differ