diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index d01b2fd27..6ba320195 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -68,9 +68,7 @@ const Navbar = () => {
           </div>
 
           <div className='absolute inset-y-0 right-0 flex items-center pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0 space-x-3'>
-            {settings.get('isDeveloper') && (
-              <ThemeToggle />
-            )}
+            <ThemeToggle />
 
             {account ? (
               <div className='hidden relative lg:flex items-center'>
diff --git a/app/soapbox/features/ui/components/theme_toggle.tsx b/app/soapbox/features/ui/components/theme_toggle.tsx
index 5f04be848..e8c63c60f 100644
--- a/app/soapbox/features/ui/components/theme_toggle.tsx
+++ b/app/soapbox/features/ui/components/theme_toggle.tsx
@@ -37,8 +37,8 @@ function ThemeToggle({ showLabel }: IThemeToggle) {
           id={id}
           checked={themeMode === 'light'}
           icons={{
-            checked: <Icon src={require('@tabler/icons/icons/sun.svg')} />,
-            unchecked: <Icon src={require('@tabler/icons/icons/moon.svg')} />,
+            checked: <Icon className='w-4 h-4' src={require('@tabler/icons/icons/sun.svg')} />,
+            unchecked: <Icon className='w-4 h-4' src={require('@tabler/icons/icons/moon.svg')} />,
           }}
           onChange={onToggle}
         />
diff --git a/app/styles/components/theme-toggle.scss b/app/styles/components/theme-toggle.scss
index 5b59d80b1..112c14972 100644
--- a/app/styles/components/theme-toggle.scss
+++ b/app/styles/components/theme-toggle.scss
@@ -27,8 +27,11 @@
     }
   }
 
-  .svg-icon {
-    width: 18px;
-    height: 18px;
+  .react-toggle-track {
+    @apply dark:bg-slate-600;
+  }
+
+  .react-toggle-thumb {
+    @apply dark:bg-slate-900 dark:border-slate-800;
   }
 }