Index: imaps-frontend/src/components/SearchBar/SearchBar.jsx
===================================================================
--- imaps-frontend/src/components/SearchBar/SearchBar.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/SearchBar/SearchBar.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,3 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
+import ReactDOM from "react-dom";
 import searchIcon from "../../assets/search_icon.png";
 import routeIcon from "../../assets/route_icon.png";
@@ -5,8 +6,13 @@
 import styles from "./SearchBar.module.css";
 
-function SearchBar(props) {
+function SearchBar({ map, handleDirectionsSubmit, setIsPanelOpen, setSelectedRoom, availableShapes,handleFloorChange }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [from, setFrom] = useState("");
   const [to, setTo] = useState("");
+  const [availableOptions, setAvailableOptions] = useState([]);
+  const [filteredOptions, setFilteredOptions] = useState([]);
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const [inputFieldType, setInputFieldType] = useState("");
+  const dropdownRef = useRef(null);
 
   const toggleExpanded = () => {
@@ -14,84 +20,143 @@
   };
 
-  function searchRoom(){
-    props.map.search();
+  function searchRoom() {
+    let foundRoom = availableShapes.find(sh => sh.info.name === from)
+    console.log("map fnum",map.floorNum)
+    if(foundRoom.floorNum !== map.floorNum){
+      handleFloorChange(foundRoom.floorNum);
+    }
 
+
+    console.log("FOUND ROOM: " + foundRoom)
+    map.highlightShape(from);
+    setSelectedRoom(foundRoom);
+    setIsPanelOpen(true);
   }
 
-  const handleDirectionsSubmit = () => {
-    console.log(`From: ${from}, To: ${to}`);
-    const url = new URL('http://localhost:8080/api/public/navigate');
-    url.searchParams.append('from', from);
-    url.searchParams.append('to', to);
+  const handleInputFocus = (field) => {
+    if (availableOptions.length === 0 && map) {
+      setAvailableOptions(
+          availableShapes
+              .filter((sh) => sh.className === "RenderedRoom")
+              .map((shape) => shape.info.name)
+      );
+    }
+    setDropdownVisible(true);
+    setInputFieldType(field);
+  };
 
-    fetch(url)
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error('Network response was not ok');
-                }
-                return response.json();
-            })
-            .then(data => {
-                console.log('Success:', data);
-                const points = data.map(item => item.coordinates);
-                props.map.drawRoute(points);
-            })
-            .catch(error => {
-                console.error('Error:', error);
-            });
+  const handleInputChange = (setter) => (event) => {
+    const value = event.target.value;
+    setter(value);
+    setDropdownVisible(true);
+
+    const filtered = availableOptions.filter((option) =>
+        option.toLowerCase().includes(value.toLowerCase())
+    );
+    setFilteredOptions(filtered);
+  };
+
+  const handleOptionClick = (option) => {
+    if (inputFieldType === "from") {
+      setFrom(option);
+    } else if (inputFieldType === "to") {
+      setTo(option);
+    }
+    setDropdownVisible(false);
+  };
+
+  const renderDropdown = () => {
+    if (!dropdownVisible || filteredOptions.length === 0) return null;
+
+    const position = dropdownRef.current?.getBoundingClientRect() || { top: 0, left: 0, width: 0 };
+
+    return ReactDOM.createPortal(
+        <ul
+            className={styles.dropdown}
+            style={{
+              position: "absolute",
+              top: position.top + position.height,
+              left: position.left,
+              width: position.width,
+            }}
+        >
+          {filteredOptions.map((option, index) => (
+              <li
+                  key={index}
+                  className={styles.dropdownItem}
+                  onClick={() => handleOptionClick(option)}
+              >
+                {option}
+              </li>
+          ))}
+        </ul>,
+        document.body // Portal renders outside the parent hierarchy
+    );
   };
 
   return (
-    <div className={styles.wrapper}>
-      {/* Regular search bar */}
-      {!isExpanded ? (
-        <div className={styles.searchBar}>
-          <input
-            type="search"
-            className={styles.inputField}
-            placeholder="Search location"
-            aria-label="Search"
-          />
-          <div className={styles.buttons}>
-            <button type="button" className={styles.iconButton} onClick={searchRoom}>
-              <img src={searchIcon} alt="Search Icon" />
-            </button>
-            <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
-              <img src={routeIcon} alt="Route Icon" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        /* Expanded view for directions */
-        <div className={styles.directionsContainer}>
-          <div className={styles.directionsInputs}>
-            <input
-              type="text"
-              placeholder="From"
-              aria-label="From"
-              value={from}
-              onChange={(e) => setFrom(e.target.value)}
-              className={styles.inputField}
-            />
-            <input
-              type="text"
-              placeholder="To"
-              aria-label="To"
-              value={to}
-              onChange={(e) => setTo(e.target.value)}
-              className={styles.inputField}
-            />
-          </div>
-          <div className={styles.buttons}>
-            <button type="button" className={styles.iconButton} onClick={handleDirectionsSubmit}>
-              <img src={searchIcon} alt="Submit Directions" />
-            </button>
-            <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
-              <img src={closeIcon} alt="Close Icon" />
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
+      <div className={styles.wrapper}>
+        {!isExpanded ? (
+            <div className={styles.searchBar}>
+              <input
+                  type="search"
+                  className={styles.inputField}
+                  placeholder="Search location"
+                  aria-label="Search"
+                  ref={dropdownRef} // Attach the input to calculate dropdown position
+                  onFocus={() => handleInputFocus("from")}
+                  onChange={handleInputChange(setFrom)}
+                  value={from}
+              />
+              {renderDropdown()}
+              <div className={styles.buttons}>
+                <button type="button" className={styles.iconButton} onClick={searchRoom}>
+                  <img src={searchIcon} alt="Search Icon" />
+                </button>
+                <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
+                  <img src={routeIcon} alt="Route Icon" />
+                </button>
+              </div>
+            </div>
+        ) : (
+            <div className={styles.directionsContainer}>
+              <div className={styles.directionsInputs}>
+                <input
+                    type="text"
+                    placeholder="From"
+                    aria-label="From"
+                    value={from}
+                    onFocus={() => handleInputFocus("from")}
+                    onChange={handleInputChange(setFrom)}
+                    className={styles.inputField}
+                    ref={inputFieldType === "from" ? dropdownRef : null}
+                />
+                <input
+                    type="text"
+                    placeholder="To"
+                    aria-label="To"
+                    value={to}
+                    onFocus={() => handleInputFocus("to")}
+                    onChange={handleInputChange(setTo)}
+                    className={styles.inputField}
+                    ref={inputFieldType === "to" ? dropdownRef : null}
+                />
+                {renderDropdown()}
+              </div>
+              <div className={styles.buttons}>
+                <button
+                    type="button"
+                    className={styles.iconButton}
+                    onClick={() => handleDirectionsSubmit(from, to)}
+                >
+                  <img src={searchIcon} alt="Submit Directions" />
+                </button>
+                <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
+                  <img src={closeIcon} alt="Close Icon" />
+                </button>
+              </div>
+            </div>
+        )}
+      </div>
   );
 }
Index: imaps-frontend/src/components/SearchBar/SearchBar.module.css
===================================================================
--- imaps-frontend/src/components/SearchBar/SearchBar.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/SearchBar/SearchBar.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,15 +1,19 @@
 .wrapper {
+  position: relative;
   display: flex;
   justify-content: center;
-  margin: 0px auto;
+  margin: 0 auto;
+  z-index: 105;
   max-width: 600px;
   width: 100%;
+  padding: 10px;
 }
 
 .searchBar,
 .directionsContainer {
+  position: relative;
   display: flex;
-  align-items: end; /* Ensure all items remain aligned in the center */
-  width: 100%;
+  align-items: center;
+  /*width: 100%;*/
   background-color: white;
   padding: 10px;
@@ -17,5 +21,5 @@
   border-radius: 30px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  flex-wrap: nowrap; /* Prevent items from wrapping to the next line */
+  flex-wrap: nowrap;
 }
 
@@ -28,6 +32,34 @@
   outline: none;
   margin-right: 10px;
-  min-width: 0; /* Ensure the input field remains flexible */
+  min-width: 0;
+
 }
+
+.dropdown {
+  position: absolute; /* Position absolute to detach from wrapper flow */
+  top: 100%; /* Place below the search bar */
+  left: 0;
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  width: 100%; /* Match the search bar width */
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 9999; /* Highest level to ensure it's above everything */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+
+.dropdownItem {
+  padding: 10px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.dropdownItem:hover {
+  background-color: #007bff; /* Highlight color */
+  color: white; /* Ensure text is readable */
+}
+
 
 .buttons {
@@ -50,5 +82,4 @@
   font-size: 16px;
   transition: background-color 0.3s ease;
-  width: auto;
 }
 
@@ -62,7 +93,5 @@
 }
 
-/* Expanded view for the direction inputs */
 .directionsContainer {
-  flex-direction: column;
   gap: 10px;
 }
@@ -73,39 +102,2 @@
   gap: 10px;
 }
-
-.directionsInputs .inputField {
-  flex: 1;
-}
-
-/* Media query for responsive design */
-@media (max-width: 768px) {
-  .wrapper {
-    max-width: 100%;
-    padding: 10px;
-  }
-
-  /* Keep buttons and input fields inline */
-  .searchBar,
-  .directionsContainer {
-    flex-direction: row; /* Keep items in a row */
-    align-items: center; /* Keep buttons and inputs on the same line */
-    flex-wrap: nowrap; /* Prevent items from wrapping */
-    padding: 8px;
-  }
-
-  .inputField {
-    width: 100%;
-    flex-grow: 1;
-    margin-right: 10px;
-  }
-
-  .buttons {
-    width: auto;
-    gap: 5px;
-  }
-
-  .iconButton {
-    width: auto;
-    padding: 10px;
-  }
-}
