diff --git a/src/app/components/SearchOverlay.tsx b/src/app/components/SearchOverlay.tsx
index 2a096ed..83d59ea 100644
--- a/src/app/components/SearchOverlay.tsx
+++ b/src/app/components/SearchOverlay.tsx
@@ -87,7 +87,7 @@ export default function SearchOverlay({ config, setConfig, onClose }: SearchOver
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
-        className="fixed inset-0 z-50 backdrop-blur-md bg-black/30"
+        className="fixed inset-0 z-50 backdrop-blur-md bg-black/30 flex items-center justify-center"
         onClick={onClose}
       >
         <motion.div
@@ -95,10 +95,11 @@ export default function SearchOverlay({ config, setConfig, onClose }: SearchOver
           animate={{ y: 0, opacity: 1 }}
           exit={{ y: -50, opacity: 0 }}
           transition={{ type: 'spring', damping: 25, stiffness: 300 }}
-          className="max-w-2xl mx-auto mt-20 bg-white rounded-xl shadow-2xl overflow-hidden"
+          className="w-full h-full max-w-2xl sm:rounded-xl bg-white shadow-2xl overflow-auto flex flex-col justify-center mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0"
+          style={{ maxHeight: '100dvh' }}
           onClick={(e) => e.stopPropagation()}
         >
-          <div className="p-6">
+          <div className="p-4 sm:p-6 flex-1 flex flex-col">
             <div className="flex items-center justify-between mb-6">
               <h2 className="text-xl font-medium">Search</h2>
               <button onClick={onClose} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg">