diff --git a/app/components/SearchBar.tsx b/app/components/SearchBar.tsx
index 4e9a425..f45ae28 100644
--- a/app/components/SearchBar.tsx
+++ b/app/components/SearchBar.tsx
@@ -41,6 +41,7 @@ export function SearchBar() {
         </div>
       </DialogTrigger>
       <DialogContent
+        onOverlayClick={() => setIsOpen(false)}
         className={classnames(
           "fixed z-50",
           "w-[95vw] max-w-xl rounded-lg",
diff --git a/app/components/UI/Dialog.tsx b/app/components/UI/Dialog.tsx
index 4f72fb0..ce8c7f8 100644
--- a/app/components/UI/Dialog.tsx
+++ b/app/components/UI/Dialog.tsx
@@ -3,12 +3,17 @@ import React, { ComponentPropsWithoutRef } from "react";
 
 export const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    onOverlayClick?: () => void;
+  }
 >(({ children, ...props }, forwardedRef) => (
   <DialogPrimitive.Portal>
     <DialogPrimitive.Overlay
       forceMount
       className="fixed inset-0 z-20 bg-black/60"
+      onClick={() => {
+        props.onOverlayClick && props.onOverlayClick();
+      }}
     />
     <DialogPrimitive.Content forceMount {...props} ref={forwardedRef}>
       {children}