diff --git a/web/src/App.tsx b/web/src/App.tsx
index 4900de74a..2fd8a98ee 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -6,6 +6,7 @@ import { locationService } from "./services";
 import { useAppSelector } from "./store";
 import router from "./router";
 import * as storage from "./helpers/storage";
+import theme from "./theme";
 
 function App() {
   const { i18n } = useTranslation();
@@ -41,7 +42,7 @@ function App() {
   }, [locale]);
 
   return (
-    <CssVarsProvider>
+    <CssVarsProvider theme={theme}>
       <RouterProvider router={router} />
     </CssVarsProvider>
   );
diff --git a/web/src/components/ApperanceSelect.tsx b/web/src/components/ApperanceSelect.tsx
index 23df3ed6b..15d7dfd2c 100644
--- a/web/src/components/ApperanceSelect.tsx
+++ b/web/src/components/ApperanceSelect.tsx
@@ -21,7 +21,7 @@ const ApperanceSelect = () => {
 
   return (
     <Select
-      className="!min-w-[12rem] w-auto text-sm"
+      className="!min-w-[10rem] w-auto text-sm"
       value={apperance}
       onChange={(_, value) => {
         setApperance(value as Apperance);
diff --git a/web/src/components/SearchBar.tsx b/web/src/components/SearchBar.tsx
index e2521878f..ac6773f3e 100644
--- a/web/src/components/SearchBar.tsx
+++ b/web/src/components/SearchBar.tsx
@@ -34,7 +34,7 @@ const SearchBar = () => {
     <div className="search-bar-container">
       <div className="search-bar-inputer">
         <Icon.Search className="icon-img" />
-        <input className="text-input" type="text" placeholder="" value={queryText} onChange={handleTextQueryInput} />
+        <input className="text-input" autoComplete="off" type="text" placeholder="" value={queryText} onChange={handleTextQueryInput} />
       </div>
       <div className="quickly-action-wrapper">
         <div className="quickly-action-container">
diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx
index 833a95485..71e859ade 100644
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@@ -63,7 +63,6 @@ const UserBanner = () => {
   };
 
   const handleSignOutBtnClick = async () => {
-    userService.doSignOut().catch();
     navigate("/auth");
   };
 
diff --git a/web/src/less/search-bar.less b/web/src/less/search-bar.less
index bdbdedf9a..0fd0ac6d3 100644
--- a/web/src/less/search-bar.less
+++ b/web/src/less/search-bar.less
@@ -3,10 +3,6 @@
 
   &:hover,
   &:active {
-    > .search-bar-inputer > .text-input {
-      @apply flex;
-    }
-
     > .quickly-action-wrapper {
       @apply flex;
     }
@@ -20,7 +16,7 @@
     }
 
     > .text-input {
-      @apply hidden sm:flex ml-2 w-24 grow text-sm outline-none bg-transparent;
+      @apply flex ml-2 w-24 grow text-sm outline-none bg-transparent;
     }
   }
 
diff --git a/web/src/pages/Auth.tsx b/web/src/pages/Auth.tsx
index df6019a2b..9661873e2 100644
--- a/web/src/pages/Auth.tsx
+++ b/web/src/pages/Auth.tsx
@@ -1,5 +1,5 @@
 import { Option, Select } from "@mui/joy";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "../store";
@@ -28,6 +28,10 @@ const Auth = () => {
   const [username, setUsername] = useState(mode === "dev" ? "demohero" : "");
   const [password, setPassword] = useState(mode === "dev" ? "secret" : "");
 
+  useEffect(() => {
+    userService.doSignOut().catch();
+  }, []);
+
   const handleUsernameInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
     const text = e.target.value as string;
     setUsername(text);
diff --git a/web/src/theme/index.ts b/web/src/theme/index.ts
new file mode 100644
index 000000000..1d59cc392
--- /dev/null
+++ b/web/src/theme/index.ts
@@ -0,0 +1,15 @@
+import { extendTheme } from "@mui/joy";
+
+const theme = extendTheme({
+  components: {
+    JoySelect: {
+      styleOverrides: {
+        root: {
+          fontSize: "0.875rem",
+        },
+      },
+    },
+  },
+});
+
+export default theme;