Index: imaps-frontend/src/components/SearchBar/SearchBar.jsx
===================================================================
--- imaps-frontend/src/components/SearchBar/SearchBar.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/SearchBar/SearchBar.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,4 +1,3 @@
-import React, { useState, useEffect, useRef } from "react";
-import ReactDOM from "react-dom";
+import React, { useState } from "react";
 import searchIcon from "../../assets/search_icon.png";
 import routeIcon from "../../assets/route_icon.png";
@@ -6,194 +5,93 @@
 import styles from "./SearchBar.module.css";
 
-function SearchBar({
-                     map,
-                     handleDirectionsSubmit,
-                     setIsPanelOpen,
-                     setSelectedRoom,
-                     availableShapes,
-                     handleFloorChange,
-                   }) {
+function SearchBar(props) {
   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 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);
-    }
+  const toggleExpanded = () => {
+    setIsExpanded(!isExpanded);
   };
 
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
+  function searchRoom(){
+    props.map.search();
 
-  const searchRoom = () => {
-    const foundRoom = availableShapes.find((sh) => sh.info.name === from);
-    if (foundRoom && foundRoom.floorNum !== map.floorNum) {
-      handleFloorChange(foundRoom.floorNum);
-    }
-    map.highlightShape(from);
-    setSelectedRoom(foundRoom);
-    setIsPanelOpen(true);
-  };
+  }
 
-  const handleInputFocus = (field, inputRef) => {
-    if (availableOptions.length === 0 && map) {
-      setAvailableOptions(
-          availableShapes
-              .filter((sh) => sh.className === "RenderedRoom")
-              .map((shape) => shape.info.name)
-      );
-    }
-    setInputFieldType(field);
-    setDropdownVisible(true);
-    activeInputRef.current = inputRef; // Set the active input ref
-  };
+  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 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 = 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 + window.scrollY,
-              left: position.left + window.scrollX,
-              width: position.width,
-            }}
-        >
-          {filteredOptions.map((option, index) => (
-              <li
-                  key={index}
-                  className={styles.dropdownItem}
-                  onClick={() => handleOptionClick(option)}
-              >
-                {option}
-              </li>
-          ))}
-        </ul>,
-        document.body
-    );
+    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);
+            });
   };
 
   return (
-      <div className={styles.wrapper} ref={wrapperRef}>
-        {!isExpanded ? (
-            <div className={styles.searchBar}>
-              <input
-                  type="search"
-                  className={styles.inputField}
-                  placeholder="Search location"
-                  aria-label="Search"
-                  onFocus={(e) => handleInputFocus("from", e.target)}
-                  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={(e) => handleInputFocus("from", e.target)}
-                    onChange={handleInputChange(setFrom)}
-                    className={styles.inputField}
-                />
-                <input
-                    type="text"
-                    placeholder="To"
-                    aria-label="To"
-                    value={to}
-                    onFocus={(e) => handleInputFocus("to", e.target)}
-                    onChange={handleInputChange(setTo)}
-                    className={styles.inputField}
-                />
-                {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>
+    <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>
   );
 }
Index: imaps-frontend/src/components/SearchBar/SearchBar.module.css
===================================================================
--- imaps-frontend/src/components/SearchBar/SearchBar.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/SearchBar/SearchBar.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,19 +1,15 @@
 .wrapper {
-  position: relative;
   display: flex;
   justify-content: center;
-  margin: 0 auto;
-  z-index: 105;
+  margin: 0px auto;
   max-width: 600px;
   width: 100%;
-  padding: 10px;
 }
 
 .searchBar,
 .directionsContainer {
-  position: relative;
   display: flex;
-  align-items: center;
-  /*width: 100%;*/
+  align-items: end; /* Ensure all items remain aligned in the center */
+  width: 100%;
   background-color: white;
   padding: 10px;
@@ -21,10 +17,10 @@
   border-radius: 30px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  flex-wrap: nowrap;
+  flex-wrap: nowrap; /* Prevent items from wrapping to the next line */
 }
 
 .inputField {
   flex-grow: 1;
-  /*padding: 10px 15px;*/
+  padding: 10px 15px;
   font-size: 16px;
   border: 1px solid #ddd;
@@ -32,34 +28,6 @@
   outline: none;
   margin-right: 10px;
-  min-width: 0;
-  margin-top: 12px;
+  min-width: 0; /* Ensure the input field remains flexible */
 }
-
-.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 {
@@ -82,4 +50,5 @@
   font-size: 16px;
   transition: background-color 0.3s ease;
+  width: auto;
 }
 
@@ -93,5 +62,7 @@
 }
 
+/* Expanded view for the direction inputs */
 .directionsContainer {
+  flex-direction: column;
   gap: 10px;
 }
@@ -102,2 +73,39 @@
   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;
+  }
+}
