diff --git a/packages/freesewing.shared/components/theme-picker.js b/packages/freesewing.shared/components/theme-picker.js
index 71ed36b4371..25531867f2f 100644
--- a/packages/freesewing.shared/components/theme-picker.js
+++ b/packages/freesewing.shared/components/theme-picker.js
@@ -4,7 +4,11 @@ import ThemeIcon from 'shared/components/icons/theme.js'
 const ThemePicker = ({ app, className='' }) => {
   return (
       <div className={`dropdown ${className}`}>
-        <div tabIndex="0" className="m-0 btn flex flex-row gap-2 hover:bg-neutral hover:border-neutral-content">
+        <div tabIndex="0" className={`
+          m-0 btn btn-neutral flex flex-row gap-2
+          sm:btn-ghost
+          hover:bg-neutral hover:border-neutral-content
+        `}>
           <ThemeIcon />
           <span>{app.theme}</span>
           <span>Theme</span>