diff --git a/pages/components/ThemeSelector.js b/pages/components/ThemeSelector.js
index 30e7a2f..18e53cb 100644
--- a/pages/components/ThemeSelector.js
+++ b/pages/components/ThemeSelector.js
@@ -21,11 +21,11 @@ const ThemeSelector = (props) => {
     }
   };
   return (
-      <button className="my-4 text-2xl focus:outline-none" onClick={switchTheme}>
+      <button className="inline-flex rounded-md border border-gray-300 dark:border-gray-800 shadow-sm px-2 bg-white font-medium text-gray-700 hover:bg-gray-50 dark:bg-gray-700 dark:text-white my-3 py-1 text-2xl focus:outline-none" onClick={switchTheme}>
         {theme === 'light' ? (
-          <FontAwesomeIcon icon={faMoon} className="w-10 h-8" />
+          <FontAwesomeIcon icon={faMoon} className="w-10 h-7" />
         ) : (
-          <FontAwesomeIcon icon={faSun} className="w-10 h-8" />
+          <FontAwesomeIcon icon={faSun} className="w-10 h-7" />
         )}
       </button>
   )