diff --git a/package.json b/package.json
index ff6192008be..5ded8286e7c 100644
--- a/package.json
+++ b/package.json
@@ -138,6 +138,7 @@
   ],
   "version": "0.0.0",
   "dependencies": {
+    "@headlessui/react": "^1.6.5",
     "autoprefixer": "^10.4.0",
     "handlebars": "^4.7.7",
     "jsonfile": "^6.1.0",
diff --git a/sites/shared/components/locale-picker.js b/sites/shared/components/locale-picker.js
index dcc3ee8a7f6..b7c78999dc1 100644
--- a/sites/shared/components/locale-picker.js
+++ b/sites/shared/components/locale-picker.js
@@ -3,38 +3,59 @@ import LocaleIcon from 'shared/components/icons/i18n.js'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 import Link from 'next/link'
+import Picker, {PickerLink} from './picker';
+import { Menu } from '@headlessui/react'
 
 const LocalePicker = ({ app, iconOnly=false }) => {
   const { t } = useTranslation(['locales'])
   const router = useRouter()
 
+  const pickerProps = {
+    iconOnly,
+    Icon: LocaleIcon,
+    selectedItem: t(router.locale)
+  }
+
   return (
-    <div className="dropdown dropdown-end w-auto">
-      <div tabIndex="0" className={ iconOnly
-        ? 'btn btn-sm'
-        : `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
-          md:btn-ghost
-          hover:bg-neutral hover:border-neutral-content
-        `
-      }>
-        <LocaleIcon />
-      {!iconOnly && <span>{t(router.locale)}</span>}
-      </div>
-      <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
+    <Picker {...pickerProps} >
         {router.locales.map(locale => (
-          <li key={locale}>
-            <Link href={router.asPath} locale={locale}>
-              <a className="btn btn-ghost text-base-content hover:bg-base-200">
-                <span className="text-base-content">
-                  {t(locale)}
-                </span>
-              </a>
-            </Link>
-          </li>
+          <PickerLink
+            locale={locale}
+            href={router.asPath}
+            key={locale}>
+            {t(locale)}
+          </PickerLink>
         ))}
-      </ul>
-    </div>
+    </Picker>
   )
+
+  // return (
+  //   <div className="dropdown dropdown-end w-auto">
+  //     <div tabIndex="0" className={ iconOnly
+  //       ? 'btn btn-sm'
+  //       : `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
+  //         md:btn-ghost
+  //         hover:bg-neutral hover:border-neutral-content
+  //       `
+  //     }>
+  //       <LocaleIcon />
+  //     {!iconOnly && <span>{t(router.locale)}</span>}
+  //     </div>
+  //     <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
+  //       {router.locales.map(locale => (
+  //         <li key={locale}>
+  //           <Link href={router.asPath} locale={locale}>
+  //             <a className="btn btn-ghost text-base-content hover:bg-base-200">
+  //               <span className="text-base-content">
+  //                 {t(locale)}
+  //               </span>
+  //             </a>
+  //           </Link>
+  //         </li>
+  //       ))}
+  //     </ul>
+  //   </div>
+  // )
 }
 
 export default LocalePicker
diff --git a/sites/shared/components/picker.js b/sites/shared/components/picker.js
new file mode 100644
index 00000000000..44949b422de
--- /dev/null
+++ b/sites/shared/components/picker.js
@@ -0,0 +1,56 @@
+import {useRef, forwardRef} from 'react'
+import { Menu } from '@headlessui/react'
+import Link from 'next/link'
+
+const Picker = ({Icon, className, selectedItem, iconOnly=false, children}) => {
+
+	return (<Menu as="div" className={`dropdown dropdown-end ${className} w-auto`}>
+		<Menu.Button className={iconOnly
+			? `btn btn-sm`
+			: `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
+			md:btn-ghost
+			hover:bg-neutral hover:border-neutral-content
+			`}
+			aria-label="Choose Theme">
+			<Icon />
+			{!iconOnly && <span>{selectedItem}</span>}
+			</Menu.Button>
+		<Menu.Items as="ul" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
+		 {children}
+		</Menu.Items>
+	</Menu>)
+}
+
+export default Picker
+
+const itemClass = (active) => "btn btn-ghost " + (active ? 'bg-base-200' : '')
+
+export const PickerLink = (props) => {
+	return (<li role="menuitem">
+		<Menu.Item>
+			{({active}) => (<ForwardLink active={active} {...props}></ForwardLink>)}
+		</Menu.Item>
+	</li>)
+}
+
+const ForwardLink = forwardRef(({href, locale, active, children, ...rest}, ref) => (
+	<Link href={href} locale={locale}>
+  	<a className={itemClass(active)} {...rest} role={undefined} ref={ref}>
+  		<span className="text-base-content">
+    		{children}
+  		</span>
+  	</a>
+	</Link>
+))
+
+export const PickerButton = ({onClick, children}) => {
+	return (<Menu.Item as="li" onClick={onClick}>
+    {({ active }) => (
+      <button className={itemClass(active)}>
+      	<span className="text-base-content">
+      		{children}
+      	</span>
+      </button>
+    )}
+  </Menu.Item>)
+}
diff --git a/sites/shared/components/theme-picker.js b/sites/shared/components/theme-picker.js
index 8abee2a2e01..7eb70d387f3 100644
--- a/sites/shared/components/theme-picker.js
+++ b/sites/shared/components/theme-picker.js
@@ -1,41 +1,67 @@
 import themes from 'shared/themes/index.js'
 import ThemeIcon from 'shared/components/icons/theme.js'
+import {useRef} from 'react'
 import { useTranslation } from 'next-i18next'
+import Picker, {PickerButton} from './picker';
+import { Menu } from '@headlessui/react'
 
 const ThemePicker = ({ app, className, iconOnly=false }) => {
   const { t } = useTranslation(['themes'])
 
-  return (
-      <div className={`dropdown dropdown-end ${className} w-auto`}>
-        <div tabIndex="0" className={iconOnly
-         ? `btn btn-sm`
-         : `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
-            md:btn-ghost
-            hover:bg-neutral hover:border-neutral-content
-          `}
-        >
-          <ThemeIcon />
-          {!iconOnly && <span>{t(`${app.theme}Theme`)}</span>}
-        </div>
-        <ul
-          tabIndex="0"
-          className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52"
-        >
-          {Object.keys(themes).map(theme => (
-            <li key={theme}>
-              <button
-                onClick={() => app.setTheme(theme)}
-                className="btn btn-ghost hover:bg-base-200"
-              >
-                <span className="text-base-content">
-                  {t(`${theme}Theme`)}
-                </span>
-              </button>
-            </li>
-          ))}
-        </ul>
-      </div>
-  )
+  const items = {};
+  for (var k in themes){
+    items[k] = {...themes[k], key: k}
+  }
+
+  const pickerProps = {
+    className,
+    iconOnly,
+    Icon: ThemeIcon,
+    selectedItem: t(`${app.theme}Theme`)
+  }
+  return (<Picker {...pickerProps}>
+    {Object.keys(themes).map(theme => (
+      <PickerButton onClick={() =>
+      app.setTheme(theme)} key={theme}>
+        {t(`${theme}Theme`)}
+      </PickerButton>
+    ))}
+  </Picker>)
+
+
+
+  // return (
+  //     <div className={`dropdown dropdown-end ${className} w-auto`}>
+  //       <div tabIndex="0" className={iconOnly
+  //        ? `btn btn-sm`
+  //        : `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
+  //           md:btn-ghost
+  //           hover:bg-neutral hover:border-neutral-content
+  //         `}
+  //       >
+  //         <ThemeIcon />
+  //         {!iconOnly && <span>{t(`${app.theme}Theme`)}</span>}
+  //       </div>
+  //       <ul
+  //         tabIndex="0"
+  //         className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52"
+  //       >
+  //         {Object.keys(themes).map(theme => (
+  //           <li key={theme}>
+  //             <button
+  //               onClick={() => app.setTheme(theme)}
+  //               className="btn btn-ghost hover:bg-base-200"
+  //             >
+  //               <span className="text-base-content">
+  //                 {t(`${theme}Theme`)}
+  //               </span>
+  //             </button>
+  //           </li>
+  //         ))}
+  //       </ul>
+  //     </div>
+  // )
+  // return null;
 }
 
 export default ThemePicker
diff --git a/yarn.lock b/yarn.lock
index 683882c4eaa..766efb2a602 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1909,6 +1909,11 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
+"@headlessui/react@^1.6.5":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.5.tgz#5587c537de809cf3146eb2ff263e5e940b1bf69c"
+  integrity sha512-3VkKteDxlxf3fE0KbfO9t60KC1lM7YNpZggLpwzVNg1J/zwL+h+4N7MBlFDVpInZI3rKlZGpNx0PWsG/9c2vQg==
+
 "@heroicons/react@^1.0.5":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"