diff --git a/components/themeselector.tsx b/components/themeselector.tsx
index f395038..eb4fee9 100644
--- a/components/themeselector.tsx
+++ b/components/themeselector.tsx
@@ -6,7 +6,7 @@ import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownO
 import Themes from '../public/data/themes.json';
 
 export const StyleSelector = () => {
-  const themes = Themes.themes;
+  const themes: DefaultTheme[] = Themes.themes;
   const updateTheme = useUpdateTheme();
   const currentTheme = useContext(ThemeContext);
   const [selectedTheme, setSelectedTheme] = useState(themes[currentTheme.themeId]);
@@ -35,16 +35,19 @@ export const StyleSelector = () => {
   }
 
   const [visible, setVisible] = useState(false);
+  const [buttonFocus, setButtonFocus] = useState(visible);
 
   function  handleBlur(event:any) {
     if (!event.currentTarget.contains(event.relatedTarget)) {
+      setButtonFocus(false);
       setVisible(false);
     }
   }
 
   return (
     <ThemeDropDown onBlur={(event) => handleBlur(event)}>
-      <ThemeDropDownButton show={+visible} onClick={() => setVisible(visible => !visible)}>{selectedTheme.themeName}</ThemeDropDownButton>
+      <ThemeDropDownButton focus={+buttonFocus} show={+visible} onFocus={() => setButtonFocus(true)} onClick={() => setVisible(visible => !visible)}>{selectedTheme.themeName}
+      </ThemeDropDownButton>
       <ThemeDropDownOptions id="themesDropdown" show={+visible}>
         {themes.map((theme) => (
           <ThemeDropDownOption active={theme.themeId === selectedTheme.themeId ? 1 : 0} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>