diff --git a/web/src/components/HomeSidebar.tsx b/web/src/components/HomeSidebar.tsx
index ef2c78a6..1b655edb 100644
--- a/web/src/components/HomeSidebar.tsx
+++ b/web/src/components/HomeSidebar.tsx
@@ -32,6 +32,10 @@ export const toggleHomeSidebar = (show?: boolean) => {
   if (show) {
     sidebarEl.classList.add("show");
     maskEl.classList.add("show");
+
+    // auto focus search bar when sidebar is shown
+    const inputEl = sidebarEl.querySelector("#mobile-search-bar") as HTMLInputElement;
+    inputEl?.focus();
   } else {
     sidebarEl.classList.remove("show");
     maskEl.classList.remove("show");
diff --git a/web/src/components/SearchBar.tsx b/web/src/components/SearchBar.tsx
index 830c41e4..d8be5e05 100644
--- a/web/src/components/SearchBar.tsx
+++ b/web/src/components/SearchBar.tsx
@@ -54,6 +54,7 @@ const SearchBar = () => {
       <input
         className="flex ml-2 w-24 grow text-sm outline-none bg-transparent dark:text-gray-200"
         type="text"
+        id="mobile-search-bar"
         placeholder="Search memos"
         ref={inputRef}
         value={queryText}