Index: imaps-frontend/src/components/SearchBar/SearchBar.jsx
===================================================================
--- imaps-frontend/src/components/SearchBar/SearchBar.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/SearchBar/SearchBar.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -6,5 +6,12 @@
 import styles from "./SearchBar.module.css";
 
-function SearchBar({ map, handleDirectionsSubmit, setIsPanelOpen, setSelectedRoom, availableShapes,handleFloorChange }) {
+function SearchBar({
+                     map,
+                     handleDirectionsSubmit,
+                     setIsPanelOpen,
+                     setSelectedRoom,
+                     availableShapes,
+                     handleFloorChange,
+                   }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [from, setFrom] = useState("");
@@ -14,25 +21,40 @@
   const [dropdownVisible, setDropdownVisible] = useState(false);
   const [inputFieldType, setInputFieldType] = useState("");
-  const dropdownRef = useRef(null);
-
-  const toggleExpanded = () => {
-    setIsExpanded(!isExpanded);
-  };
-
-  function searchRoom() {
-    let foundRoom = availableShapes.find(sh => sh.info.name === from)
-    console.log("map fnum",map.floorNum)
-    if(foundRoom.floorNum !== map.floorNum){
+
+  const wrapperRef = useRef(null);
+  const dropdownContainerRef = useRef(null);
+  const activeInputRef = useRef(null); // Track the currently focused input field
+
+  const toggleExpanded = () => setIsExpanded(!isExpanded);
+
+  const handleClickOutside = (event) => {
+    if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(event.target) &&
+        dropdownContainerRef.current &&
+        !dropdownContainerRef.current.contains(event.target)
+    ) {
+      setDropdownVisible(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const searchRoom = () => {
+    const foundRoom = availableShapes.find((sh) => sh.info.name === from);
+    if (foundRoom && foundRoom.floorNum !== map.floorNum) {
       handleFloorChange(foundRoom.floorNum);
     }
-
-
-    console.log("FOUND ROOM: " + foundRoom)
     map.highlightShape(from);
     setSelectedRoom(foundRoom);
     setIsPanelOpen(true);
-  }
-
-  const handleInputFocus = (field) => {
+  };
+
+  const handleInputFocus = (field, inputRef) => {
     if (availableOptions.length === 0 && map) {
       setAvailableOptions(
@@ -42,6 +64,7 @@
       );
     }
+    setInputFieldType(field);
     setDropdownVisible(true);
-    setInputFieldType(field);
+    activeInputRef.current = inputRef; // Set the active input ref
   };
 
@@ -69,13 +92,18 @@
     if (!dropdownVisible || filteredOptions.length === 0) return null;
 
-    const position = dropdownRef.current?.getBoundingClientRect() || { top: 0, left: 0, width: 0 };
+    const position = activeInputRef.current?.getBoundingClientRect() || {
+      top: 0,
+      left: 0,
+      width: 0,
+    };
 
     return ReactDOM.createPortal(
         <ul
+            ref={dropdownContainerRef}
             className={styles.dropdown}
             style={{
               position: "absolute",
-              top: position.top + position.height,
-              left: position.left,
+              top: position.top + position.height + window.scrollY,
+              left: position.left + window.scrollX,
               width: position.width,
             }}
@@ -91,10 +119,10 @@
           ))}
         </ul>,
-        document.body // Portal renders outside the parent hierarchy
+        document.body
     );
   };
 
   return (
-      <div className={styles.wrapper}>
+      <div className={styles.wrapper} ref={wrapperRef}>
         {!isExpanded ? (
             <div className={styles.searchBar}>
@@ -104,6 +132,5 @@
                   placeholder="Search location"
                   aria-label="Search"
-                  ref={dropdownRef} // Attach the input to calculate dropdown position
-                  onFocus={() => handleInputFocus("from")}
+                  onFocus={(e) => handleInputFocus("from", e.target)}
                   onChange={handleInputChange(setFrom)}
                   value={from}
@@ -111,8 +138,16 @@
               {renderDropdown()}
               <div className={styles.buttons}>
-                <button type="button" className={styles.iconButton} onClick={searchRoom}>
+                <button
+                    type="button"
+                    className={styles.iconButton}
+                    onClick={searchRoom}
+                >
                   <img src={searchIcon} alt="Search Icon" />
                 </button>
-                <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
+                <button
+                    type="button"
+                    className={styles.iconButton}
+                    onClick={toggleExpanded}
+                >
                   <img src={routeIcon} alt="Route Icon" />
                 </button>
@@ -127,8 +162,7 @@
                     aria-label="From"
                     value={from}
-                    onFocus={() => handleInputFocus("from")}
+                    onFocus={(e) => handleInputFocus("from", e.target)}
                     onChange={handleInputChange(setFrom)}
                     className={styles.inputField}
-                    ref={inputFieldType === "from" ? dropdownRef : null}
                 />
                 <input
@@ -137,8 +171,7 @@
                     aria-label="To"
                     value={to}
-                    onFocus={() => handleInputFocus("to")}
+                    onFocus={(e) => handleInputFocus("to", e.target)}
                     onChange={handleInputChange(setTo)}
                     className={styles.inputField}
-                    ref={inputFieldType === "to" ? dropdownRef : null}
                 />
                 {renderDropdown()}
@@ -152,5 +185,9 @@
                   <img src={searchIcon} alt="Submit Directions" />
                 </button>
-                <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
+                <button
+                    type="button"
+                    className={styles.iconButton}
+                    onClick={toggleExpanded}
+                >
                   <img src={closeIcon} alt="Close Icon" />
                 </button>
Index: imaps-frontend/src/components/SearchBar/SearchBar.module.css
===================================================================
--- imaps-frontend/src/components/SearchBar/SearchBar.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/SearchBar/SearchBar.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -26,5 +26,5 @@
 .inputField {
   flex-grow: 1;
-  padding: 10px 15px;
+  /*padding: 10px 15px;*/
   font-size: 16px;
   border: 1px solid #ddd;
@@ -33,5 +33,5 @@
   margin-right: 10px;
   min-width: 0;
-
+  margin-top: 12px;
 }
 
