Index: imaps-frontend/src/components/AppContext/AppContext.jsx
===================================================================
--- imaps-frontend/src/components/AppContext/AppContext.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/AppContext/AppContext.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,31 @@
+import React, {createContext, useState, useContext, useEffect} from 'react';
+import {verifyToken} from "../../scripts/util/verifyToken.js";
+
+const AppContext = createContext();
+export const AppProvider = ({ children }) => {
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [username, setUsername] = useState('');
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        verifyToken(setIsAuthenticated,setUsername,setLoading)
+    }, []);
+
+
+    return (
+        <AppContext.Provider
+            value={{
+                isAuthenticated,
+                username,
+                loading,
+                setIsAuthenticated,
+                setUsername,
+                setLoading,
+            }}
+        >
+            {children}
+        </AppContext.Provider>
+    );
+};
+
+export const useAppContext = () => useContext(AppContext);
Index: imaps-frontend/src/components/DeleteConfirmationModal/DeleteConfirmationModal.jsx
===================================================================
--- imaps-frontend/src/components/DeleteConfirmationModal/DeleteConfirmationModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/DeleteConfirmationModal/DeleteConfirmationModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,26 @@
+import styles from "./DeleteConfirmationModal.module.css";
+
+export default function DeleteConfirmationModal({ isOpen, onClose, onDelete, maps }) {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modalContent}>
+        <h2>Select a Map to Delete</h2>
+        <ul className={styles.mapList}>
+          {maps.map((map) => (
+            <li key={map.mapName} className={styles.mapItem}>
+              {map.mapName}
+              <button onClick={() => onDelete(map.mapName)} className={styles.deleteButton}>
+                Delete
+              </button>
+            </li>
+          ))}
+        </ul>
+        <div className={styles.modalActions}>
+          <button onClick={onClose}>Cancel</button>
+        </div>
+      </div>
+    </div>
+  );
+}
Index: imaps-frontend/src/components/DeleteConfirmationModal/DeleteConfirmationModal.module.css
===================================================================
--- imaps-frontend/src/components/DeleteConfirmationModal/DeleteConfirmationModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/DeleteConfirmationModal/DeleteConfirmationModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,92 @@
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modalContent {
+  background: white;
+  padding: 30px;
+  border-radius: 12px;
+  width: 450px;
+  max-width: 90%;
+  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s ease;
+  animation: scaleUp 0.3s ease-out;
+}
+
+@keyframes scaleUp {
+  from {
+    transform: scale(0.9);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+h2 {
+  font-size: 1.75rem;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+ul {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 20px;
+}
+
+li {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+li button {
+  background-color: #ff4d4d;
+  color: white;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+li button:hover {
+  background-color: #cc0000;
+}
+
+.modalActions {
+  display: flex;
+  justify-content: center;
+}
+
+.modalActions button {
+  padding: 10px 20px;
+  font-size: 1rem;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.modalActions button:hover {
+  background-color: #f5f5f5;
+}
Index: imaps-frontend/src/components/EntranceModal/EntranceModal.jsx
===================================================================
--- imaps-frontend/src/components/EntranceModal/EntranceModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,248 +1,0 @@
-import React, { useState, useEffect } from "react";
-import styles from "./EntranceModal.module.css";
-
-export default function EntranceModal(props) {
-  const [modal, setModal] = useState(false);
-  const [room, setRoom] = useState(null);
-  const [pins, setPins] = useState([]);
-
-  const [formData, setFormData] = useState({
-    name: "",
-    connectedRoom: "",
-    description: "",
-    availableRooms: [],
-    availablePins: [],
-    selectedPins: [],
-    isMainEntrance: false,
-    selectedPin: "",
-  });
-
-  const toggleModal = () => {
-    if (modal) {
-      room.info = formData;
-      props.map.updateRoomNames();
-      console.log("Se vikna");
-    }
-    setModal(!modal);
-  };
-
-  const handleInputChange = (e) => {
-    const { name, value, type, checked } = e.target;
-    setFormData((prevData) => ({
-      ...prevData,
-      [name]: type === "checkbox" ? checked : value,
-    }));
-
-    console.log(formData);
-  };
-
-  const addPinToList = () => {
-    if (!formData.selectedPin || pins.includes(formData.selectedPin)) return;
-
-    setPins((prevPins) => {
-      const updatedPins = [...prevPins, formData.selectedPin];
-
-      setFormData((prevFormData) => ({
-        ...prevFormData,
-        selectedPin: "",
-        selectedPins: updatedPins,
-      }));
-
-      return updatedPins;
-    });
-  };
-
-  const removePinFromList = (pinToRemove) => {
-    setPins((prevPins) => {
-      const updatedPins = prevPins.filter((pin) => pin !== pinToRemove);
-      setFormData((prevFormData) => ({
-        ...prevFormData,
-        selectedPins: updatedPins,
-      }));
-      return updatedPins;
-    });
-    props.map.removeConnection(formData.name, pinToRemove);
-  };
-
-  const saveDetails = () => {
-    if (room) {
-      room.info = formData;
-      toggleModal();
-    }
-  };
-
-  useEffect(() => {
-    const openModalHandler = (event) => {
-      const roomObj = event.detail.room;
-      setRoom(roomObj);
-
-      const savedPins = roomObj.info.selectedPins || [];
-
-      setFormData({
-        name: roomObj.info.name || "",
-        connectedRoom: roomObj.info.connectedRoom || "",
-        description: roomObj.info.description || "",
-        availablePins: event.detail.map.getConnections() || [],
-        availableRooms: event.detail.map.getRooms() || [],
-        isMainEntrance: roomObj.info.isMainEntrance || false,
-        selectedPin: "",
-        selectedPins: savedPins,
-      });
-
-      setPins(savedPins);
-      setModal(true);
-      event.detail.map.updateConnections();
-
-      console.log(savedPins, "Loaded pins on modal open");
-    };
-
-    window.addEventListener("openEntranceModalEvent", openModalHandler);
-
-    return () => {
-      window.removeEventListener("openEntranceModalEvent", openModalHandler);
-    };
-  }, []);
-
-  if (modal) {
-    document.body.classList.add(styles.activeModal);
-  } else {
-    document.body.classList.remove(styles.activeModal);
-  }
-
-  return (
-    <>
-      {/* <button onClick={toggleModal} className={styles.btnModal}>
-        Entrance Modal
-      </button> */}
-
-      {modal && (
-        <div className={styles.modal}>
-          <div onClick={toggleModal} className={styles.overlay}></div>
-          <div className={styles.modalContent}>
-            <h2>Enter Entrance Details</h2>
-            <form className={styles.form}>
-              {/* Entrance Name */}
-              <div className={styles.formGroup}>
-                <label htmlFor="name">Name:</label>
-                <input
-                  type="text"
-                  id="name"
-                  name="name"
-                  value={formData.name}
-                  onChange={handleInputChange}
-                  placeholder="Enter the entrance name" // Suggest user input
-                  required
-                />
-              </div>
-
-              {/* Select Room for Entrance */}
-              <div className={styles.formGroup}>
-                <label htmlFor="connectedRoom">Select room associated with entrance:</label>
-                <select
-                  id="connectedRoom"
-                  name="connectedRoom"
-                  value={formData.connectedRoom}
-                  onChange={handleInputChange}
-                  required
-                >
-                  <option value="">Select Room</option>
-                  {formData.availableRooms.map((room, index) => (
-                    <option key={index} value={room.name}>
-                      {room.name}
-                    </option>
-                  ))}
-                </select>
-              </div>
-
-              {/* Pins Dropdown for Hallway Navigation */}
-              <div className={styles.formGroup}>
-                <label htmlFor="selectedPin">Select connections:</label>
-                <select
-                  id="selectedPin"
-                  name="selectedPin"
-                  value={formData.selectedPin}
-                  onChange={handleInputChange}
-                  required
-                >
-                  <option value="">Select Connection</option>
-                  {formData.availablePins
-                    .filter(
-                      (pin) =>
-                        formData.selectedPins.includes(pin.name) === false &&
-                        pin.name !== "" &&
-                        pin.name !== formData.name
-                    )
-                    .map((pin, index) => (
-                      <option key={index} value={pin.name}>
-                        {pin.name}
-                      </option>
-                    ))}
-                </select>
-                <button type="button" onClick={addPinToList} className={styles.addButton}>
-                  Add Connection
-                </button>
-              </div>
-
-              {/* Display added pins */}
-              <h3>Connections:</h3>
-              <ul className={styles.pinList}>
-                {pins.length > 0 ? (
-                  pins.map((pin, index) => (
-                    <li key={index} className={styles.pinItem}>
-                      {pin}
-                      <button onClick={() => removePinFromList(pin)} className={styles.removeButton}>
-                        Remove
-                      </button>
-                    </li>
-                  ))
-                ) : (
-                  <li>No connections added</li>
-                )}
-              </ul>
-              <br />
-
-              {/* Description */}
-              <div className={styles.formGroup}>
-                <label htmlFor="description">Description:</label>
-                <textarea
-                  id="description"
-                  name="description"
-                  value={formData.description}
-                  onChange={handleInputChange}
-                  rows="3"
-                />
-              </div>
-
-              {/* Main Entrance Checkbox */}
-              <div className={styles.formGroupCheckbox}>
-                <input
-                  type="checkbox"
-                  id="isMainEntrance"
-                  name="isMainEntrance"
-                  checked={formData.isMainEntrance}
-                  onChange={handleInputChange}
-                />
-                <label htmlFor="isMainEntrance">Is Main Entrance?</label>
-              </div>
-
-              {/* Save Button */}
-              <div className={styles.formGroup}>
-                <button
-                  type="button"
-                  id="submit-details"
-                  onClick={saveDetails}
-                  className={styles.submitButton}
-                >
-                  Save
-                </button>
-              </div>
-            </form>
-            <button className={styles.closeModal} onClick={toggleModal}>
-              CLOSE
-            </button>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
Index: imaps-frontend/src/components/EntranceModal/EntranceModal.module.css
===================================================================
--- imaps-frontend/src/components/EntranceModal/EntranceModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,183 +1,0 @@
-/* Active modal: Disable scrolling when the modal is open */
-.activeModal {
-  overflow-y: hidden; /* Disable scrolling */
-}
-
-/* Modal and overlay styles */
-.modal,
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
-
-/* Overlay: Dark background with optional blur */
-.overlay {
-  background: rgba(0, 0, 0, 0.7); /* Darken the background */
-  backdrop-filter: blur(5px); /* Optional blur effect */
-  z-index: 999; /* Ensure the overlay appears below the modal */
-}
-
-/* Modal content: Centered and styled */
-.modalContent {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #2c2f33; /* Darker background for modal content */
-  color: #ffffff; /* White text for contrast */
-  padding: 20px;
-  border-radius: 8px;
-  max-width: 600px;
-  width: 100%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  z-index: 1000; /* Ensure the modal appears above the overlay */
-}
-
-/* Heading styles */
-h2,
-h3 {
-  margin-bottom: 15px;
-  color: #ffffff; /* White text for the headings */
-}
-
-/* Button for opening the modal */
-.btnModal {
-  padding: 10px 20px;
-  font-size: 18px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin: 20px;
-  display: block;
-}
-
-.btnModal:hover {
-  background-color: #0056b3;
-}
-
-/* Close button inside the modal */
-.closeModal {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  padding: 5px 10px;
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.closeModal:hover {
-  background-color: #c82333;
-}
-
-/* Form styles */
-.form {
-  display: flex;
-  flex-direction: column;
-}
-
-.formGroup {
-  margin-bottom: 15px;
-}
-
-/* Form labels */
-.formGroup label {
-  display: block;
-  margin-bottom: 5px;
-  color: #ffffff; /* White text for labels */
-}
-
-/* Input, select, and textarea styles */
-.formGroup input,
-.formGroup select,
-.formGroup textarea {
-  width: 100%;
-  padding: 8px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: #23272a; /* Darker input background */
-  color: #ffffff; /* White text inside the input fields */
-}
-
-.formGroup input::placeholder,
-.formGroup textarea::placeholder {
-  color: #888888; /* Slightly lighter color for placeholder text */
-}
-
-/* Checkbox alignment fix */
-.formGroupCheckbox {
-  display: flex;
-  align-items: center; /* Vertical alignment */
-  color: #ffffff;
-}
-
-/* Add button */
-.addButton {
-  background-color: #28a745;
-  color: white;
-  padding: 8px 15px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin-top: 10px;
-}
-
-.addButton:hover {
-  background-color: #218838;
-}
-
-/* Save button styling */
-.submitButton {
-  background-color: #28a745;
-  color: white;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-  margin-top: 15px;
-}
-
-.submitButton:hover {
-  background-color: #218838;
-}
-
-/* Pin list */
-.pinList {
-  list-style-type: none;
-  padding: 0;
-  margin-top: 15px;
-}
-
-/* Individual pin item */
-.pinItem {
-  background-color: #444;
-  padding: 8px;
-  margin-bottom: 5px;
-  color: white;
-  border-radius: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-/* Remove button */
-.removeButton {
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.removeButton:hover {
-  background-color: #c82333;
-}
Index: imaps-frontend/src/components/FilterBar/FilterBar.jsx
===================================================================
--- imaps-frontend/src/components/FilterBar/FilterBar.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/FilterBar/FilterBar.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,32 +1,34 @@
-import React from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import styles from "./FilterBar.module.css";
 
-function FilterBar() {
-  const filterLocation = (category) => {
-    console.log(`Filter locations by: ${category}`);
-    // filtering logic
-  };
+export default function FilterBar({roomTypes,map}) {
+  const [selectedCategory, setSelectedCategory] = useState("all");
+
+
+
+  const filterLocation = useCallback((category) => {
+    map.setFilter(category)
+    setSelectedCategory(category);
+  },[])
 
   return (
     <div className={styles.wrapper}>
       <div className={styles.scrollableContainer}>
-        <button className={styles.buttonValue} onClick={() => filterLocation("all")}>
+        <button
+          className={`${styles.buttonValue} ${selectedCategory === "all" ? styles.active : ""}`}
+          onClick={() => filterLocation("all")}
+        >
           All
         </button>
-        <button className={styles.buttonValue} onClick={() => filterLocation("Classrooms")}>
-          Classrooms
-        </button>
-        <button className={styles.buttonValue} onClick={() => filterLocation("Administrative")}>
-          Administrative
-        </button>
-        <button className={styles.buttonValue} onClick={() => filterLocation("Labs")}>
-          Labs
-        </button>
-        <button className={styles.buttonValue} onClick={() => filterLocation("Restrooms")}>
-          Restrooms
-        </button>
-        <button className={styles.buttonValue} onClick={() => filterLocation("Cafeteria")}>
-          Cafeteria
-        </button>
+
+        {roomTypes?.map((roomType, index) => (
+          <button
+            key={index}
+            className={`${styles.buttonValue} ${selectedCategory === roomType.name ? styles.active : ""}`}
+            onClick={() => filterLocation(roomType.name)}
+          >
+            {roomType.name}
+          </button>
+        ))}
       </div>
     </div>
@@ -34,3 +36,2 @@
 }
 
-export default FilterBar;
Index: imaps-frontend/src/components/InfoPinModal/InfoPinModal.jsx
===================================================================
--- imaps-frontend/src/components/InfoPinModal/InfoPinModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,204 +1,0 @@
-import React, { useState, useEffect } from "react";
-import styles from "./InfoPinModal.module.css"; // Reusing the same styles
-
-export default function InfoPinModal(props) {
-  const [modal, setModal] = useState(false);
-  const [pins, setPins] = useState([]);
-  const [room, setRoom] = useState(null);
-
-  const [formData, setFormData] = useState({
-    name: "",
-    description: "",
-    selectedPin: "",
-    availablePins: [],
-    selectedPins: [],
-  });
-
-  const toggleModal = () => {
-    if (modal) {
-      room.info = formData;
-      props.map.updateRoomNames();
-    }
-    setModal(!modal);
-  };
-
-  const handleInputChange = (e) => {
-    const { name, value } = e.target;
-    setFormData((prevData) => ({
-      ...prevData,
-      [name]: value,
-    }));
-  };
-
-  const addPinToList = () => {
-    if (!formData.selectedPin || pins.includes(formData.selectedPin)) return;
-
-    setPins((prevPins) => {
-      const updatedPins = [...prevPins, formData.selectedPin];
-
-      setFormData((prevFormData) => ({
-        ...prevFormData,
-        selectedPin: "",
-        selectedPins: updatedPins,
-      }));
-
-      return updatedPins;
-    });
-  };
-
-  const removePinFromList = (pinToRemove) => {
-    setPins((prevPins) => {
-      const updatedPins = prevPins.filter((pin) => pin !== pinToRemove);
-
-      setFormData((prevFormData) => ({
-        ...prevFormData,
-        selectedPins: updatedPins,
-      }));
-
-      props.map.removeConnection(formData.name, pinToRemove);
-      return updatedPins;
-    });
-  };
-
-  const saveDetails = () => {
-    room.info = formData;
-    toggleModal();
-  };
-
-  useEffect(() => {
-    const openModalHandler = (event) => {
-      const roomObj = event.detail.room;
-
-      setRoom(roomObj);
-
-      // Populate formData and pins based on the room information
-      setFormData({
-        name: roomObj.info.name || "", // Room name
-        description: roomObj.info.description || "",
-        selectedPin: "",
-        availablePins: event.detail.map.getConnections(),
-        selectedPins: roomObj.info.selectedPins,
-      });
-
-      setPins(roomObj.info.selectedPins || []); // Set the already connected pins
-
-      setModal(true); // Open the modal
-      event.detail.map.updateConnections();
-    };
-
-    // Add event listener to open modal
-    window.addEventListener("openPinModalEvent", openModalHandler);
-
-    return () => {
-      // Cleanup the event listener when the component unmounts
-      window.removeEventListener("openPinModalEvent", openModalHandler);
-    };
-  }, []);
-
-  if (modal) {
-    document.body.classList.add(styles.activeModal);
-  } else {
-    document.body.classList.remove(styles.activeModal);
-  }
-
-  return (
-    <>
-      {/* <button onClick={toggleModal} className={styles.btnModal}>
-        Info Pin Modal
-      </button> */}
-
-      {modal && (
-        <div className={styles.modal}>
-          <div onClick={toggleModal} className={styles.overlay}></div>
-          <div className={styles.modalContent}>
-            <h2>Enter Pin Details</h2>
-            <form className={styles.form}>
-              <div className={styles.formGroup}>
-                <label htmlFor="name">Name:</label>
-                <input
-                  type="text"
-                  id="name"
-                  name="name"
-                  value={formData.name}
-                  onChange={handleInputChange}
-                  placeholder="Enter the pin name"
-                  required
-                />
-              </div>
-
-              <div className={styles.formGroup}>
-                <label htmlFor="selectedPin">Select connections:</label>
-                <select
-                  id="selectedPin"
-                  name="selectedPin"
-                  value={formData.selectedPin}
-                  onChange={handleInputChange}
-                  required
-                >
-                  <option value="">Select Connection</option>
-                  {formData.availablePins
-                    .filter(
-                      (pin) =>
-                        formData.selectedPins.includes(pin.name) == false &&
-                        pin.name != "" &&
-                        pin.name != formData.name
-                    )
-                    .map((pin, index) => (
-                      <option key={index} value={pin.name}>
-                        {pin.name}
-                      </option>
-                    ))}
-                </select>
-                <button type="button" onClick={addPinToList} className={styles.addButton}>
-                  Add Connection
-                </button>
-              </div>
-
-              <h3>Connections:</h3>
-              <ul className={styles.pinList}>
-                {pins.length > 0 ? (
-                  pins.map((pin, index) => (
-                    <li key={index} className={styles.pinItem}>
-                      {pin}
-                      <button onClick={() => removePinFromList(pin)} className={styles.removeButton}>
-                        Remove
-                      </button>
-                    </li>
-                  ))
-                ) : (
-                  <li>No connections added</li>
-                )}
-              </ul>
-              <br />
-              <div className={styles.formGroup}>
-                <label htmlFor="description">Description:</label>
-                <textarea
-                  id="description"
-                  name="description"
-                  value={formData.description}
-                  onChange={handleInputChange}
-                  rows="3"
-                  placeholder="Enter description for the pin"
-                />
-              </div>
-
-              <div className={styles.formGroup}>
-                <button
-                  type="button"
-                  id="submit-details"
-                  onClick={saveDetails}
-                  className={styles.submitButton}
-                >
-                  Save
-                </button>
-              </div>
-            </form>
-            <button className={styles.closeModal} onClick={toggleModal}>
-              CLOSE
-            </button>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
Index: imaps-frontend/src/components/InfoPinModal/InfoPinModal.module.css
===================================================================
--- imaps-frontend/src/components/InfoPinModal/InfoPinModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,183 +1,0 @@
-/* Active modal: Disable scrolling when the modal is open */
-.activeModal {
-  overflow-y: hidden; /* Disable scrolling */
-}
-
-/* Modal and overlay styles */
-.modal,
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
-
-/* Overlay: Dark background with optional blur */
-.overlay {
-  background: rgba(0, 0, 0, 0.7); /* Darken the background */
-  backdrop-filter: blur(5px); /* Optional blur effect */
-  z-index: 999; /* Ensure the overlay appears below the modal */
-}
-
-/* Modal content: Centered and styled */
-.modalContent {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #2c2f33; /* Darker background for modal content */
-  color: #ffffff; /* White text for contrast */
-  padding: 20px;
-  border-radius: 8px;
-  max-width: 600px;
-  width: 100%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  z-index: 1000; /* Ensure the modal appears above the overlay */
-}
-
-/* Heading styles */
-h2,
-h3 {
-  margin-bottom: 15px;
-  color: #ffffff; /* White text for the headings */
-}
-
-/* Button for opening the modal */
-.btnModal {
-  padding: 10px 20px;
-  font-size: 18px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin: 20px;
-  display: block;
-}
-
-.btnModal:hover {
-  background-color: #0056b3;
-}
-
-/* Close button inside the modal */
-.closeModal {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  padding: 5px 10px;
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.closeModal:hover {
-  background-color: #c82333;
-}
-
-/* Form styles */
-.form {
-  display: flex;
-  flex-direction: column;
-}
-
-.formGroup {
-  margin-bottom: 15px;
-}
-
-/* Form labels */
-.formGroup label {
-  display: block;
-  margin-bottom: 5px;
-  color: #ffffff; /* White text for labels */
-}
-
-/* Input, select, and textarea styles */
-.formGroup input,
-.formGroup select,
-.formGroup textarea {
-  width: 100%;
-  padding: 8px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: #23272a; /* Darker input background */
-  color: #ffffff; /* White text inside the input fields */
-}
-
-.formGroup input::placeholder,
-.formGroup textarea::placeholder {
-  color: #888888; /* Slightly lighter color for placeholder text */
-}
-
-/* Checkbox alignment fix */
-.formGroupCheckbox {
-  display: flex;
-  align-items: center; /* Vertical alignment */
-  color: #ffffff;
-}
-
-/* Add button */
-.addButton {
-  background-color: #28a745;
-  color: white;
-  padding: 8px 15px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin-top: 10px;
-}
-
-.addButton:hover {
-  background-color: #218838;
-}
-
-/* Save button styling */
-.submitButton {
-  background-color: #28a745;
-  color: white;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-  margin-top: 15px;
-}
-
-.submitButton:hover {
-  background-color: #218838;
-}
-
-/* Pin list */
-.pinList {
-  list-style-type: none;
-  padding: 0;
-  margin-top: 15px;
-}
-
-/* Individual pin item */
-.pinItem {
-  background-color: #444;
-  padding: 8px;
-  margin-bottom: 5px;
-  color: white;
-  border-radius: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-/* Remove button */
-.removeButton {
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.removeButton:hover {
-  background-color: #c82333;
-}
Index: imaps-frontend/src/components/KeyMappingsGuidePanel/KeymapPanel.jsx
===================================================================
--- imaps-frontend/src/components/KeyMappingsGuidePanel/KeymapPanel.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,39 +1,0 @@
-import { useState } from "react";
-import styles from './KeymapPanel.module.css'; // Import the CSS module
-
-const keyMappings = [
-    { key: 'W', info: 'Move Up' },
-    { key: 'A', info: 'Move Left' },
-    { key: 'S', info: 'Move Down' },
-    { key: 'D', info: 'Move Right' },
-    { key: 'Space', info: 'Jump / Shoot' },
-    { key: 'E', info: 'Interact' },
-    { key: 'Q', info: 'Switch Weapon' }
-];
-
-const KeyboardPanel = () => {
-    const [hoveredKey, setHoveredKey] = useState(null);
-
-    return (
-        <div className={styles.keyboardPanel}>
-            {keyMappings.map((keyItem, index) => (
-                <button
-                    key={index}
-                    className={styles.keyButton}
-                    onMouseEnter={() => setHoveredKey(keyItem.info)}
-                    onMouseLeave={() => setHoveredKey(null)}
-                >
-                    {keyItem.key}
-                </button>
-            ))}
-
-            {hoveredKey && (
-                <div className={styles.keyInfo}>
-                    {hoveredKey}
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default KeyboardPanel;
Index: imaps-frontend/src/components/KeyMappingsGuidePanel/KeymapPanel.module.css
===================================================================
--- imaps-frontend/src/components/KeyMappingsGuidePanel/KeymapPanel.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,45 +1,0 @@
-.keymapPanel {
-    position: fixed; /* Position the panel at the top */
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 1000; /* Make sure the panel is above other elements */
-    background-color: #f1f1f1;
-    border: 2px solid #333;
-    padding: 10px;
-    border-radius: 10px;
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 10px;
-    width: 20px; /* Adjust the width to suit your layout */
-    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.keyButton {
-    width: 50px;
-    height: 50px;
-    background-color: #f1f1f1;
-    border: 2px solid #333;
-    border-radius: 5px;
-    font-size: 18px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.keyButton:hover {
-    background-color: #333;
-    color: #fff;
-}
-
-.keyInfo {
-    margin-top: 10px;
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-    background-color: #f8f8f8;
-    border: 2px solid #333;
-    padding: 5px;
-    border-radius: 5px;
-}
Index: imaps-frontend/src/components/LoadingContainer/LoadingContainer.jsx
===================================================================
--- imaps-frontend/src/components/LoadingContainer/LoadingContainer.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/LoadingContainer/LoadingContainer.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,10 @@
+import React from "react";
+
+export const LoadingContainer = () => {
+    return (
+        <div className="loading-container">
+            <div className="spinner"></div>
+            <p>Loading, please wait...</p>
+        </div>
+    );
+}
Index: imaps-frontend/src/components/Logo/Logo.jsx
===================================================================
--- imaps-frontend/src/components/Logo/Logo.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Logo/Logo.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,23 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import logoImage from "../../assets/logo_icon.png";
+import styles from "./Logo.module.css";
+
+function Logo({ position = "fixed" }) {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate("/");
+  };
+
+  return (
+    <div
+      className={position === "fixed" ? styles.fixedLogoContainer : styles.inlineLogoContainer}
+      onClick={handleClick}
+    >
+      <img src={logoImage} alt="Logo" className={styles.logoImage} />
+    </div>
+  );
+}
+
+export default Logo;
Index: imaps-frontend/src/components/Logo/Logo.module.css
===================================================================
--- imaps-frontend/src/components/Logo/Logo.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Logo/Logo.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,40 @@
+.logoContainer {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.logoImage {
+  width: 50px; /* Adjust the size as needed */
+  height: auto;
+  transition: opacity 0.2s ease;
+}
+
+.logoImage:hover {
+  opacity: 0.8; /* Slight hover effect */
+}
+
+.fixedLogoContainer {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.inlineLogoContainer {
+  display: inline-block; /* Allows the logo to be placed inline within other elements */
+  cursor: pointer;
+}
+
+.logoImage {
+  width: 50px; /* Adjust size as needed */
+  height: auto;
+  transition: opacity 0.2s ease;
+}
+
+.logoImage:hover {
+  opacity: 0.8; /* Hover effect */
+}
Index: imaps-frontend/src/components/MapControls/MapControls.jsx
===================================================================
--- imaps-frontend/src/components/MapControls/MapControls.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/MapControls/MapControls.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,10 +1,14 @@
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 import styles from "./MapControls.module.css";
 import plusIcon from "../../assets/plus_icon.png";
 import minusIcon from "../../assets/minus_icon.png";
 import floorIcon from "../../assets/floor_icon.png";
+import HttpService from "../../scripts/net/HttpService.js";
 
-export default function MapControls({ onZoomIn, onZoomOut, onFloorChange }) {
-  const [currentFloor, setCurrentFloor] = useState(1); // Starting floor
+export default function MapControls({onFloorChange,mapName }) {
+  const [currentFloor, setCurrentFloor] = useState(0);
+  const [floors, setFloors] = useState([]);
+
+  // Starting floor
 
   // Handle floor selection
@@ -20,8 +24,8 @@
       {/* Zoom Controls */}
       <div className={styles.zoomControls}>
-        <button onClick={onZoomIn} className={styles.zoomButton}>
+        <button className={styles.zoomButton}>
           <img src={plusIcon} alt="Zoom In" />
         </button>
-        <button onClick={onZoomOut} className={styles.zoomButton}>
+        <button className={styles.zoomButton}>
           <img src={minusIcon} alt="Zoom Out" />
         </button>
@@ -29,17 +33,23 @@
 
       {/* Floor Selector */}
-      <div className={styles.floorSelector}>
-        <img src={floorIcon} alt="Floor Icon" className={styles.floorIcon} />
-        <select
-          value={currentFloor}
-          onChange={(e) => handleFloorChange(parseInt(e.target.value, 10))}
-          className={styles.floorDropdown}
-        >
-          <option value={1}>1F</option>
-          <option value={2}>2F</option>
-          <option value={3}>3F</option>
-          <option value={4}>4F</option>
-        </select>
-      </div>
+      {/*<div className={styles.floorSelector}>*/}
+      {/*  <img src={floorIcon} alt="Floor Icon" className={styles.floorIcon} />*/}
+      {/*  <select*/}
+      {/*    value={currentFloor}*/}
+      {/*    onChange={(e) => handleFloorChange(parseInt(e.target.value, 10))}*/}
+      {/*    className={styles.floorDropdown}*/}
+      {/*  >*/}
+      {/*    {floors?.map(floor => (*/}
+      {/*        <option key={floor.floorNumber} value={floor.floorNumber}>*/}
+      {/*          {floor.floorNumber}F*/}
+      {/*        </option>*/}
+
+      {/*    ))}*/}
+      {/*    /!*<option value={1}>1F</option>*!/*/}
+      {/*    /!*<option value={2}>2F</option>*!/*/}
+      {/*    /!*<option value={3}>3F</option>*!/*/}
+      {/*    /!*<option value={4}>4F</option>*!/*/}
+      {/*  </select>*/}
+      {/*</div>*/}
     </div>
   );
Index: imaps-frontend/src/components/MapInfoModal/MapInfoModal.jsx
===================================================================
--- imaps-frontend/src/components/MapInfoModal/MapInfoModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/MapInfoModal/MapInfoModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,170 @@
+import React, {useEffect, useState} from "react";
+import styles from "./MapInfoModal.module.css";
+import {json, useNavigate} from "react-router-dom";
+import edit_icon from "../../assets/edit_icon_black.png";
+import PublishForm from "../PublishForm/PublishForm.jsx";
+import HttpService from "../../scripts/net/HttpService.js";
+import config from "../../scripts/net/netconfig.js";
+import {useAppContext} from "../AppContext/AppContext.jsx";
+
+export default function MapInfoModal({isOpen, onClose, map, onDelete, onUpdate, onPublish, published=false}) {
+    const [isEditPopupOpen, setEditPopupOpen] = useState(false);
+    const [editedName, setEditedName] = useState(map?.mapName || "");
+    const [editedGmapsUrl, setEditedGmapsUrl] = useState(map?.gmaps_url || "");
+    const [publishFormOpen,setPublishFormOpen] = useState(false)
+    const navigate = useNavigate();
+    const[loadedFormData,setLoadedFormData] = useState(null)
+
+
+    useEffect(() => {
+        console.log("GMAPS: " + JSON.stringify(map))
+    }, []);
+
+    const {username} = useAppContext();
+
+    if (!isOpen || !map) return null;
+
+    const handleView = () => {
+        navigate(`/myMaps/${map.mapName}/View`)
+    };
+
+    const handleEdit = () => {
+        navigate(`/myMaps/${map.mapName}/Draw`)
+    };
+
+    const handleDelete = () => {
+        if (window.confirm(`Are you sure you want to delete the map "${map.mapName}"?`)) {
+            onDelete(map.mapName);
+            onClose();
+        }
+    };
+
+
+    const openEditPopup = () => {
+        setEditPopupOpen(true);
+    };
+
+    const closeEditPopup = () => {
+        setEditPopupOpen(false);
+    };
+
+    const handleEditSubmit = async () => {
+        const updatedMap = {
+            ...map,
+            mapName: editedName,
+            gmaps_url: editedGmapsUrl,
+        };
+
+        try {
+            //await onUpdate(updatedMap);
+            setEditPopupOpen(false);
+        } catch (error) {
+            console.error("Error updating map:", error);
+        }
+    };
+
+    const openPublishModal = async () => {
+        const httpService = new HttpService(true);
+        const respForm = await httpService.get(`${config.my_maps.publish_get}?mapName=${map.mapName}`)
+        setLoadedFormData(respForm);
+        setPublishFormOpen(true)
+    };
+
+    const sendPublishRequest = async (formData) => {
+        const httpService = new HttpService(true);
+        formData.mapName = map.mapName;
+        console.log("FORMDATA: "+JSON.stringify(formData))
+        await httpService.post(`${config.my_maps.publish}?username=${username}`,formData);
+        setPublishFormOpen(false)
+        onPublish()
+    }
+
+    return (
+        <div className={styles.modalOverlay} onClick={onClose}>
+            <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+                {publishFormOpen && (
+                    <PublishForm mapName={map.mapName} formData={loadedFormData} onSubmit={sendPublishRequest} onCancel={() => setPublishFormOpen(false)}/>
+                )}
+
+                <img src={map.image_url} alt="Map Thumbnail" className={styles.mapImage}/>
+                <h2 className={styles.title}>
+                    {map.mapName}
+                    <img
+                        src={edit_icon}
+                        alt="Edit"
+                        className={styles.editIcon}
+                        onClick={openEditPopup}
+                    />
+                </h2>
+                <p><strong>Status:</strong> {map.status}</p>
+
+                <p><strong>Created At:</strong> {new Date(map.created_at).toLocaleString()}</p>
+                <p><strong>Modified At:</strong> {new Date(map.modified_at).toLocaleString()}</p>
+                <p><strong>Published
+                    At:</strong> {map.published_at ? new Date(map.published_at).toLocaleString() : "Not published yet"}
+                </p>
+                <p>
+                    <strong>Google Maps URL:</strong>
+                    <a href={map.gMapsUrl}  rel="noopener noreferrer">
+                        Open in Google Maps
+                    </a>
+                </p>
+
+                <div className={styles.buttonContainer}>
+                    <button className={styles.viewButton} onClick={handleView}>
+                        View
+                    </button>
+                    <button className={styles.editButton} onClick={handleEdit}>
+                        Edit
+                    </button>
+                    <button className={styles.deleteButton} onClick={handleDelete}>
+                        Delete
+                    </button>
+                    {!map.is_published && !published && (
+                        <button className={styles.publishButton} onClick={openPublishModal}>
+                            Publish
+                        </button>
+                    )}
+                </div>
+                <button className={styles.closeButton} onClick={onClose}>
+                    Close
+                </button>
+
+                {isEditPopupOpen && (
+                    <div className={styles.editPopupOverlay} onClick={closeEditPopup}>
+                        <div
+                            className={styles.editPopupContent}
+                            onClick={(e) => e.stopPropagation()}
+                        >
+                            <h3 className={styles.title}>Edit Map Details</h3>
+                            <div className={styles.editField}>
+                                <label>Map Name:</label>
+                                <input
+                                    type="text"
+                                    value={editedName}
+                                    onChange={(e) => setEditedName(e.target.value)}
+                                />
+                            </div>
+                            <div className={styles.editField}>
+                                <label>Google Maps URL:</label>
+                                <input
+                                    type="text"
+                                    value={editedGmapsUrl}
+                                    onChange={(e) => setEditedGmapsUrl(e.target.value)}
+                                />
+                            </div>
+                            <div className={styles.editPopupButtons}>
+                                <button className={styles.submitButton} onClick={handleEditSubmit}>
+                                    Submit
+                                </button>
+                                <button className={styles.cancelButton} onClick={closeEditPopup}>
+                                    Cancel
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
Index: imaps-frontend/src/components/MapInfoModal/MapInfoModal.module.css
===================================================================
--- imaps-frontend/src/components/MapInfoModal/MapInfoModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/MapInfoModal/MapInfoModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,235 @@
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    backdrop-filter: blur(5px);
+}
+
+.modalContent {
+    background-color: white;
+    padding: 20px;
+    border-radius: 12px;
+    width: 400px;
+    max-width: 90%;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.mapImage {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin-bottom: 15px;
+}
+
+.title {
+    font-size: 1.5rem;
+    color: #333;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+}
+
+p {
+    margin: 5px 0;
+    font-size: 0.9rem;
+    color: #555;
+}
+
+a {
+    color: #1e90ff;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.buttonContainer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    gap: 10px;
+}
+
+button {
+    padding: 10px 15px;
+    font-size: 0.9rem;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.2s;
+}
+
+button:active {
+    transform: scale(0.95);
+}
+
+button:disabled {
+    background-color: #d3d3d3;
+    color: #888;
+    cursor: not-allowed;
+}
+
+.viewButton {
+    background-color: #1e90ff;
+    color: white;
+}
+
+.viewButton:hover {
+    background-color: #155a8a;
+}
+
+button:disabled.viewButton {
+    background-color: #d3d3d3;
+    color: #888;
+}
+
+.editButton {
+    background-color: #ffa500;
+    color: white;
+}
+
+.editButton:hover {
+    background-color: #cc8400;
+}
+
+button:disabled.editButton {
+    background-color: #d3d3d3;
+    color: #888;
+}
+
+.deleteButton {
+    background-color: #ff4c4c;
+    color: white;
+}
+
+.deleteButton:hover {
+    background-color: #cc0000;
+}
+
+.closeButton {
+    margin-top: 20px;
+    padding: 10px 15px;
+    background-color: #f5f5f5;
+    color: #333;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.closeButton:hover {
+    background-color: #e0e0e0;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+.editPopupOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1100;
+    backdrop-filter: blur(5px);
+}
+
+.editPopupContent {
+    background-color: white;
+    padding: 20px;
+    border-radius: 12px;
+    width: 400px;
+    max-width: 90%;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.editField {
+    margin: 15px 0;
+    text-align: left;
+}
+
+.editField label {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 0.9rem;
+    color: #555;
+}
+
+.editField input {
+    width: 100%;
+    padding: 10px;
+    font-size: 0.9rem;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+.editPopupButtons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    gap: 10px;
+}
+
+.submitButton {
+    background-color: #4caf50;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.submitButton:hover {
+    background-color: #45a049;
+}
+
+.cancelButton {
+    background-color: #f44336;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.cancelButton:hover {
+    background-color: #d32f2f;
+}
+
+.editIcon {
+    width: 20px;
+    height: 20px;
+    margin-left: 10px;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.editIcon:hover {
+    transform: scale(1.1);
+}
Index: imaps-frontend/src/components/MapTemplateSelector/LoadMap.jsx
===================================================================
--- imaps-frontend/src/components/MapTemplateSelector/LoadMap.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,67 +1,0 @@
-import React, { useState, useEffect } from "react";
-import styles from "./LoadMap.module.css";
-import HttpService from "../../scripts/net/HttpService";
-
-const MapTemplateSelector = ({ loadHandler }) => {
-  const [templates, setTemplates] = useState([]);
-  const [selectedTemplate, setSelectedTemplate] = useState(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchTemplates = async () => {
-      const httpService = new HttpService("http://localhost:8080/api/protected", true);
-      try {
-        const response = await httpService.get("/maps");
-        setTemplates(response);
-        setLoading(false);
-      } catch (error) {
-        console.error("Error fetching templates:", error);
-        setLoading(false);
-      }
-    };
-
-    fetchTemplates();
-  }, []);
-
-  const handleSelect = async (template) => {
-    setSelectedTemplate(template);
-    console.log("Selected template:", template);
-    const httpService = new HttpService("http://localhost:8080/api/protected", true);
-    const response = await httpService.get(`/maps/load?mapName=${template.name}`);
-    console.log("LOAD TEMPLATE: ", response);
-
-    const data = response.map.mapData.textData;
-    loadHandler(data);
-  };
-
-  if (loading) {
-    return <div>Loading map templates...</div>;
-  }
-
-  return (
-    <div className={styles.mapTemplateSelector}>
-      <p>Templates</p>
-      {templates.length > 0 ? (
-        <ul className={styles.templateList}>
-          {templates.map((template) => (
-            <li key={template.id}>
-              <button onClick={() => handleSelect(template)} className={styles.mapTemplateButton}>
-                {template.name}
-              </button>
-            </li>
-          ))}
-        </ul>
-      ) : (
-        <p>No map templates available.</p>
-      )}
-      {selectedTemplate && (
-        <div className={styles.selectedTemplate}>
-          <h3 className={styles.text}>Loaded Template:</h3>
-          <p className={styles.text}>{selectedTemplate.name}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default MapTemplateSelector;
Index: imaps-frontend/src/components/MapTemplateSelector/LoadMap.module.css
===================================================================
--- imaps-frontend/src/components/MapTemplateSelector/LoadMap.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,51 +1,0 @@
-.mapTemplateSelector {
-   
-  }
-  
-  
-  .templateList {
-    list-style-type: none;
-    padding: 0;
-     display: grid;
-    grid-template-columns: repeat(2, 7vh); /* Defines responsive columns */
-    gap: 5px;
-    margin: 20px 0;
-  }
-  
-  .templateListItem {
-    /* display: flex;
-    justify-content: center; */
-    width: 80%;
-  }
-  
-  .mapTemplateButton {
-    display: flex; /* Enable flexbox for the button */
-    justify-content: center; /* Center text horizontally */
-    align-items: center; /* Center text vertically */
-    width: 100%; /* Full width of the parent container */
-    padding: 10px;
-    background-color: #804047;
-    border: 2px solid beige;
-    cursor: pointer;
-    border-radius: 5px;
-    font-size: 70%; /* Adjust font size as needed */
-    white-space: nowrap; /* Prevent text wrapping */
-    overflow: hidden; /* Hide any overflow text */
-    text-overflow: ellipsis; /* Show ellipsis for overflow text */
-}
-
-  
-  .mapTemplateButton:hover {
-    background-color: beige;
-  }
-  .text{
-    font-size: medium;
-    color: #804047;
-  }
-  
-  .selectedTemplate {
-    margin-top: 10px;
-    padding: 10px;
-    text-align: center;
-  }
-  
Index: imaps-frontend/src/components/Modals/Components/Modal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/Modal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Components/Modal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,86 @@
+import React, { useRef, useState, useEffect } from "react";
+import styles from "../EntranceModal/EntranceModal.module.css";
+
+export default function Modal({ children, title, isOpen, toggleModal }) {
+  const modalRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const [position, setPosition] = useState({ x: "50%", y: "50%" });
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  const handleMouseDown = (e) => {
+    if (!modalRef.current) return;
+    setDragging(true);
+    const rect = modalRef.current.getBoundingClientRect();
+    setOffset({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    });
+  };
+
+  const handleMouseMove = (e) => {
+    if (!dragging) return;
+    setPosition({
+      x: e.clientX - offset.x,
+      y: e.clientY - offset.y,
+    });
+  };
+
+  const handleMouseUp = () => {
+    setDragging(false);
+  };
+
+  useEffect(() => {
+    if (dragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    } else {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [dragging]);
+
+  if (isOpen) {
+    document.body.classList.add(styles.activeModal);
+  } else {
+    document.body.classList.remove(styles.activeModal);
+  }
+
+  return (
+      <>
+        {isOpen && (
+            <div className={styles.modal}>
+              <div onClick={toggleModal} className={styles.overlay}></div>
+              <div
+                  ref={modalRef}
+                  className={styles.modalContent}
+                  style={{
+                    top: typeof position.y === "string" ? position.y : `${position.y}px`,
+                    left: typeof position.x === "string" ? position.x : `${position.x}px`,
+                    transform:
+                        typeof position.x === "string" && typeof position.y === "string"
+                            ? "translate(-50%, -50%)"
+                            : "none",
+                  }}
+              >
+                <div
+                    className={styles.draggableHeader}
+                    onMouseDown={handleMouseDown}
+                >
+                  <h2 className={styles.title}>{title}</h2>
+                </div>
+                <form className={styles.form}>
+                  {children}
+                  <button className={styles.closeModal} onClick={toggleModal}>
+                    CLOSE
+                  </button>
+                </form>
+              </div>
+            </div>
+        )}
+      </>
+  );
+}
Index: imaps-frontend/src/components/Modals/Components/ModalAddRoomTypes.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalAddRoomTypes.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Components/ModalAddRoomTypes.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,25 @@
+import styles from "../RoomTypeModal/RoomTypeModal.module.css";
+import React from "react";
+
+export default function ModalAddRoomTypes(handleInputChange,formData,addRoomType){
+    return (
+        <>
+            <h2>Manage Room Types</h2>
+            <div className={styles.formGroup}>
+                <label htmlFor="type">Add New Room Type:</label>
+                <input
+                    type="text"
+                    id="type"
+                    name="type"
+                    value={formData.type}
+                    onChange={handleInputChange}
+                    placeholder="Enter a new room type (e.g., Office, Classroom)"
+                />
+                <button type="button" className={styles.addButton} onClick={addRoomType}>
+                    Add Type
+                </button>
+            </div>
+        </>
+
+    )
+}
Index: imaps-frontend/src/components/Modals/Components/ModalDescriptionField.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalDescriptionField.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Components/ModalDescriptionField.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,16 @@
+import styles from "../EntranceModal/EntranceModal.module.css";
+
+export default function ModalDescriptionField({shapeInfo,updateModalData}){
+    return (
+        <div className={styles.formGroup}>
+            <label htmlFor="description">Description:</label>
+            <textarea
+                id="description"
+                name="description"
+                value={shapeInfo.description}
+                onChange={updateModalData}
+                rows="3"
+            />
+        </div>
+    )
+}
Index: imaps-frontend/src/components/Modals/Components/ModalDisplayConnections.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalDisplayConnections.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Components/ModalDisplayConnections.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,30 @@
+import styles from "../EntranceModal/EntranceModal.module.css";
+import React, {useEffect} from "react";
+
+export default function ModalDisplayConnections({connections,removePinFromList}){
+
+    useEffect(() => {
+        console.log("CONNNECTIONS: " + connections);
+    }, []);
+
+    return (
+        <>
+            <h3>Connections:</h3>
+            <ul className={styles.pinList}>
+                {connections.length > 0 ? (
+                    connections.map((pin, index) => (
+                        <li key={index} className={styles.pinItem}>
+                            {pin}
+                            <button onClick={() => removePinFromList(pin)} className={styles.removeButton}>
+                                Remove
+                            </button>
+                        </li>
+                    ))
+                ) : (
+                    <li>No connections added</li>
+                )}
+            </ul>
+            <br/>
+        </>
+    )
+}
Index: imaps-frontend/src/components/Modals/Components/ModalDisplayRoomTypes.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalDisplayRoomTypes.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Components/ModalDisplayRoomTypes.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,24 @@
+import styles from "../RoomTypeModal/RoomTypeModal.module.css";
+import React from "react";
+
+export default function ModalDisplayRoomTypes(roomTypes,removeRoomType){
+    return (
+        <>
+            <h3>Available Room Types:</h3>
+            <ul className={styles.roomTypeList}>
+                {roomTypes.length > 0 ? (
+                    roomTypes.map((type, index) => (
+                        <li key={index} className={styles.roomTypeItem}>
+                            {type}
+                            <button className={styles.removeButton} onClick={() => removeRoomType(type)}>
+                                Remove
+                            </button>
+                        </li>
+                    ))
+                ) : (
+                    <li>No room types available</li>
+                )}
+            </ul>
+        </>
+    )
+}
Index: imaps-frontend/src/components/Modals/Components/ModalMainEntranceCheckbox.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalMainEntranceCheckbox.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Components/ModalMainEntranceCheckbox.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,16 @@
+import styles from "../EntranceModal/EntranceModal.module.css";
+
+export default function ModalMainEntranceCheckbox ({shapeInfo,updateModalData}){
+    return (
+        <div className={styles.formGroupCheckbox}>
+            <input
+                type="checkbox"
+                id="isMainEntrance"
+                name="isMainEntrance"
+                checked={shapeInfo.isMainEntrance}
+                onChange={updateModalData}
+            />
+            <label htmlFor="isMainEntrance" style={{color: "white"}}>Main Entrance</label>
+        </div>
+    )
+}
Index: imaps-frontend/src/components/Modals/Components/ModalNameField.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalNameField.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Components/ModalNameField.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,19 @@
+import styles from "../EntranceModal/EntranceModal.module.css";
+import React from "react";
+
+export default function ModalNameField({shapeInfo,updateModalData,phtext}) {
+    return (
+        <div className={styles.formGroup}>
+            <label htmlFor="name">Name:</label>
+            <input
+                type="text"
+                id="name"
+                name="name"
+                value={shapeInfo.name}
+                onChange={updateModalData}
+                placeholder={phtext}
+                required
+            />
+        </div>
+    )
+}
Index: imaps-frontend/src/components/Modals/Components/ModalRoomTypes.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalRoomTypes.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Components/ModalRoomTypes.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,20 @@
+import styles from "../RoomModal/RoomModal.module.css";
+import React from "react";
+
+export default function ModalRoomTypes({shapeInfo,updateModalData,roomTypes}){
+    console.log("ROOM TYPES: " + roomTypes)
+
+    return (
+        <div className={styles.formGroup}>
+            <label htmlFor="type">Type:</label>
+            <select id="type" name="type" onChange={updateModalData} value={shapeInfo.type} required>
+                <option value="">Select Room Type</option>
+                {roomTypes?.map((roomType, index) => (
+                    <option key={index} value={roomType.name}>
+                        {roomType.name}
+                    </option>
+                ))}
+            </select>
+        </div>
+    )
+}
Index: imaps-frontend/src/components/Modals/Components/ModalSaveButton.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalSaveButton.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Components/ModalSaveButton.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,17 @@
+import styles from "../EntranceModal/EntranceModal.module.css";
+import React from "react";
+
+export default function ModalSaveButton({saveDetails}){
+    return (
+        <div className={styles.formGroup}>
+            <button
+                type="button"
+                id="submit-details"
+                onClick={saveDetails}
+                className={styles.submitButton}
+            >
+                Save
+            </button>
+        </div>
+    )
+}
Index: imaps-frontend/src/components/Modals/Components/ModalSelectConnections.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalSelectConnections.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Components/ModalSelectConnections.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,33 @@
+import styles from "../EntranceModal/EntranceModal.module.css";
+import React from "react";
+
+export default function ModalSelectConnections({shape = null,availableShapes,updateModalData,addPinToList,}) {
+
+    return shape && (
+        <div className={styles.formGroup}>
+                <label htmlFor="selectedPin">Select connections:</label>
+                <select
+                    id="selectedPin"
+                    name="selectedPin"
+                    value={shape.info.selectedPin}
+                    onChange={updateModalData}
+                    required
+                >
+                    <option value="">Select Connection</option>
+                    {availableShapes.filter ((conn) =>
+                                shape.info.selectedPins.includes(conn.name) === false &&
+                                conn.name !== "" &&
+                                conn.name !== shape.info.name
+                        )
+                        .map((conn, index) => (
+                            <option key={index} value={conn.info.name}>
+                                {conn.info.name}
+                            </option>
+                        ))}
+                </select>
+                <button type="button" onClick={addPinToList} className={styles.addButton}>
+                    Add Connection
+                </button>
+            </div>
+    )
+}
Index: imaps-frontend/src/components/Modals/Components/ModalSelectConnections2.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalSelectConnections2.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Components/ModalSelectConnections2.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,43 @@
+import styles from "../EntranceModal/EntranceModal.module.css";
+import React from "react";
+import PropTypes from "prop-types";
+import MapShape from "../../../scripts/base/MapShape.js";
+
+export default function ModalSelectConnections2({shapeInfo,updateModalData,addConnection,availableShapes}) {
+
+    console.log("shapes modal",availableShapes)
+    return (
+            <div className={styles.formGroup}>
+                <label htmlFor="selectedPin">Select connections:</label>
+                <select
+                    id="selectedPin"
+                    name="selectedPin"
+                    value={shapeInfo.selectedPin}
+                    onChange={updateModalData}
+                >
+                    <option value="">Select Connection</option>
+                    {availableShapes
+                        .filter(
+                            (s) =>
+                                !s.info.selectedPins.includes(shapeInfo.name) &&
+                                s.info.name !== "" &&
+                                s.info.name !== shapeInfo.name
+                        )
+                        .map((othShape, index) => (
+                            <option key={index} value={othShape.info.name}>
+                                {othShape.info.name}
+                            </option>
+                        ))}
+                </select>
+                <button type="button" onClick={addConnection} className={styles.addButton}>
+                    Add Connection
+                </button>
+            </div>
+    )
+}
+
+ModalSelectConnections2.propTypes = {
+    shapeInfo: PropTypes.object,
+    updateModalData: PropTypes.func,
+    addConnection: PropTypes.func,
+}
Index: imaps-frontend/src/components/Modals/Components/ModalSelectRoom.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalSelectRoom.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Components/ModalSelectRoom.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,24 @@
+import styles from "../EntranceModal/EntranceModal.module.css";
+import React from "react";
+
+export default function ModalSelectRoom({shapeInfo,availableRooms,updateModalData}){
+    return (
+        <div className={styles.formGroup}>
+            <label htmlFor="connectedRoom">Select room associated with entrance:</label>
+            <select
+                id="connectedRoom"
+                name="connectedRoom"
+                value={shapeInfo.connectedRoom}
+                onChange={updateModalData}
+                required
+            >
+                <option value="">Select Room</option>
+                {availableRooms.map((room, index) => (
+                    <option key={index} value={room.info.name}>
+                        {room.info.name}
+                    </option>
+                ))}
+            </select>
+        </div>
+    )
+}
Index: imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,64 @@
+import React, { useContext, useState } from "react";
+import PropTypes from "prop-types";
+import styles from "./CreateMapModal.module.css";
+
+const CreateMapModal = ({ isOpen, onClose,addMap}) => {
+    const [mapName, setMapName] = useState("");
+    const [mapType, setMapType] = useState("");
+
+    const handleSubmit = (e) => {
+        const mapDetails = {
+            name: mapName,
+            type: mapType,
+        };
+
+        addMap(mapDetails);
+
+        onClose();
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className={styles.modalOverlay} onClick={onClose}>
+            <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+                <h2 className={styles.title}>Enter Map Details</h2>
+                <form onSubmit={handleSubmit} className={styles.formData}>
+                    <label>
+                        Map Name:
+                        <input
+                            type="text"
+                            value={mapName}
+                            onChange={(e) => setMapName(e.target.value)}
+                            required
+                        />
+                    </label>
+                    <label>
+                        Map Type:
+                        <input
+                            type="text"
+                            value={mapType}
+                            onChange={(e) => setMapType(e.target.value)}
+                            required
+                        />
+                    </label>
+                    <div className={styles.modalButtons}>
+                        <button type="submit" className={styles.modalSubmitButton}>
+                            Submit
+                        </button>
+                        <button type="button" className={styles.modalCancelButton} onClick={onClose}>
+                            Cancel
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+CreateMapModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+};
+
+export default CreateMapModal;
Index: imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.module.css
===================================================================
--- imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,117 @@
+/* Modal Overlay */
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    backdrop-filter: blur(5px);
+}
+
+/* Modal Content */
+.modalContent {
+    background-color: #fff;
+    padding: 2rem;
+    border-radius: 12px;
+    width: 400px;
+    max-width: 90%;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
+    animation: fadeIn 0.3s ease-out;
+}
+
+/* Modal Title */
+.title {
+    color: #333;
+    text-transform: uppercase;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+/* Modal Buttons Container */
+.modalButtons {
+    margin-top: 1.5rem;
+    display: flex;
+    justify-content: space-between;
+}
+
+/* Submit Button */
+.modalSubmitButton {
+    padding: 0.8rem 1.5rem;
+    font-size: 1rem;
+    font-weight: bold;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    background-color: #007bff;
+    color: white;
+    transition: background-color 0.3s, transform 0.2s;
+}
+
+.modalSubmitButton:hover {
+    background-color: #0056b3;
+    transform: scale(1.05);
+}
+
+/* Cancel Button */
+.modalCancelButton {
+    padding: 0.8rem 1.5rem;
+    font-size: 1rem;
+    font-weight: bold;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    background-color: #f1f1f1;
+    color: #333;
+    transition: background-color 0.3s, transform 0.2s;
+}
+
+.modalCancelButton:hover {
+    background-color: #e0e0e0;
+    transform: scale(1.05);
+}
+
+/* Form Data */
+.formData {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+label {
+    font-size: 0.9rem;
+    color: #666;
+    margin-bottom: 0.5rem;
+    display: block;
+}
+
+input {
+    padding: 0.7rem;
+    font-size: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    outline: none;
+    transition: border-color 0.3s;
+}
+
+input:focus {
+    border-color: #007bff;
+    box-shadow: 0px 0px 4px rgba(0, 123, 255, 0.5);
+}
+
+/* Fade In Animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
Index: imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,69 @@
+import React, {useState, useEffect} from "react";
+import styles from "./EntranceModal.module.css";
+import PropTypes from "prop-types";
+import {MapBuilder} from "../../../scripts/main/MapBuilder.js";
+
+import Modal from "../Components/Modal.jsx";
+import ModalNameField from "../Components/ModalNameField.jsx";
+import ModalSelectRoom from "../Components/ModalSelectRoom.jsx";
+import ModalSelectConnections from "../Components/ModalSelectConnections.jsx";
+import ModalDisplayConnections from "../Components/ModalDisplayConnections.jsx";
+import ModalDescriptionField from "../Components/ModalDescriptionField.jsx";
+import ModalSaveButton from "../Components/ModalSaveButton.jsx";
+import ModalMainEntranceCheckbox from "../Components/ModalMainEntranceCheckbox.jsx";
+import {useModalEvent} from "../Hooks/useModalEvent.jsx";
+import useModalState from "../Hooks/useModalState.jsx";
+import useConnections from "../Hooks/useConnections.jsx";
+import ModalSelectConnections2 from "../Components/ModalSelectConnections2.jsx";
+import ShapeQuery from "../../../scripts/util/ShapeQuery.js";
+
+export default function EntranceModal({map}) {
+
+    const {
+        modalState: {isOpen,setIsOpen,shape,setShape,shapeInfo,setShapeInfo},
+        handlers: {toggleModal,updateModalData,saveDetails}
+    } = useModalState(map);
+
+    const {
+        connectionState: {connections,setConnections},
+        handlers: {addConnection,removeConnection}
+    } = useConnections(map,shapeInfo,setShapeInfo)
+
+
+    useModalEvent((event) => {
+        const shape = event.detail.room;
+        setShape(shape);
+        setShapeInfo({
+            ...shape.info,
+            selectedPin: ""
+
+        })
+        const connections = shape.info.selectedPins || [];
+        setConnections(connections);
+        setIsOpen(true);
+        console.log(connections, "Loaded pins on modal open");
+    },"openEntranceModalEvent")
+
+
+
+    return (
+        <Modal isOpen={isOpen} toggleModal={toggleModal} title={"Enter Entrance Details"}>
+            <ModalNameField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
+            <ModalSelectRoom shapeInfo={shapeInfo} availableRooms={ShapeQuery.findAllByTypeAndFloor(shape?.floorNum,"Room")} updateModalData={updateModalData}/>
+            <ModalSelectConnections2
+                availableShapes={ShapeQuery.findAllByType("InfoPin","Entrance")} // najubo ke e entrance samo so room da mozit
+                addConnection={addConnection}
+                updateModalData={updateModalData}
+                shapeInfo={shapeInfo}
+            />
+            <ModalDisplayConnections connections={connections} removePinFromList={removeConnection}/>
+            <ModalDescriptionField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
+            <ModalMainEntranceCheckbox shapeInfo={shapeInfo} updateModalData={updateModalData}></ModalMainEntranceCheckbox>
+            <ModalSaveButton saveDetails={saveDetails}/>
+        </Modal>
+    );
+}
+
+EntranceModal.propTypes = {
+    map: PropTypes.instanceOf(MapBuilder),
+};
Index: imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.module.css
===================================================================
--- imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,190 @@
+/* Active modal: Disable scrolling when the modal is open */
+.activeModal {
+  overflow-y: hidden; /* Disable scrolling */
+}
+
+/* Modal and overlay styles */
+.modal,
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.overlay {
+  /*background: rgba(255, 255, 255, 0.05);*/
+  z-index: 999;
+}
+
+.draggableHeader {
+  cursor: move;
+  padding: 10px;
+  background-color: #2c2f33;
+  color: #ffffff;
+  border-bottom: 1px solid #444;
+}
+
+
+
+.modalContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #2c2f33;
+  color: #ffffff !important;
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}
+
+
+.title {
+  margin-bottom: 15px;
+  color: #ffffff ;
+}
+
+.btnModal {
+  padding: 10px 20px;
+  font-size: 18px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 20px;
+  display: block;
+}
+
+.btnModal:hover {
+  background-color: #0056b3;
+}
+
+.closeModal {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px 10px;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.closeModal:hover {
+  background-color: #c82333;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+.formGroup {
+  margin-bottom: 15px;
+}
+
+.formGroup label {
+  display: block;
+  margin-bottom: 5px;
+  color: #ffffff;
+}
+
+.formGroup input,
+.formGroup select,
+.formGroup textarea {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: #23272a;
+  color: #ffffff;
+}
+
+.formGroup input::placeholder,
+.formGroup textarea::placeholder {
+  color: #888888;
+}
+
+/* Checkbox alignment fix */
+.formGroupCheckbox {
+
+  display: flex;
+  flex-direction: row;
+  vertical-align: middle;
+  align-items: flex-end;
+  /*justify-content: start;!* Vertical alignment *!*/
+  /*color: #ffffff;*/
+}
+
+.formGroupCheckbox input{
+  width: 10%;
+  margin-bottom: 0.88em;
+}
+
+/* Add button */
+.addButton {
+  background-color: #28a745 !important;
+  color: white;
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.addButton:hover {
+  background-color: #218838 !important;
+}
+
+/* Save button styling */
+.submitButton {
+  background-color: #28a745 !important;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 15px;
+}
+
+.submitButton:hover {
+  background-color: #218838;
+}
+
+.pinList {
+  list-style-type: none;
+  padding: 0;
+  margin-top: 15px;
+}
+
+.pinItem {
+  background-color: #444;
+  padding: 8px;
+  margin-bottom: 5px;
+  color: white;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.removeButton {
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.removeButton:hover {
+  background-color: #c82333;
+}
Index: imaps-frontend/src/components/Modals/Hooks/useConnections.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useConnections.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Hooks/useConnections.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,45 @@
+import {useState} from "react";
+
+export default function useConnections(map,shapeInfo,setShapeInfo){
+    const [connections,setConnections] = useState([])
+
+    const addConnection = () => {
+        console.log("TOSKA",shapeInfo)
+        if (!shapeInfo.selectedPin || connections.includes(shapeInfo.selectedPin)) return;
+
+        setConnections((prevConn) => {
+            const updatedConnections = [...prevConn, shapeInfo.selectedPin];
+
+
+            setShapeInfo((prevShapeInfo) => ({
+                ...prevShapeInfo,
+                ["selectedPin"]: "",
+                ["selectedPins"]: updatedConnections,
+            }));
+
+            console.log(shapeInfo.name,shapeInfo.selectedPin,"TEST")
+
+            map.drawConnection(shapeInfo.name,shapeInfo.selectedPin);
+            return updatedConnections;
+        });
+    };
+
+    const removeConnection = (connToRemove) => {
+        setConnections((prevConn) => {
+            const updatedPins = prevConn.filter((pin) => pin !== connToRemove);
+            setShapeInfo((prevFormData) => ({
+                ...prevFormData,
+                selectedPins: updatedPins,
+            }));
+            return updatedPins;
+        });
+        map.removeConnection(shapeInfo.name, connToRemove);
+    };
+
+
+    return {
+        connectionState: {connections,setConnections},
+        handlers: {addConnection,removeConnection}
+
+    }
+}
Index: imaps-frontend/src/components/Modals/Hooks/useModalEvent.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useModalEvent.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Hooks/useModalEvent.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,14 @@
+import {useEffect} from "react";
+
+export function useModalEvent(openModalHandler,eventName){
+    useEffect(() => {
+
+        if(eventName == null) return;
+
+        window.addEventListener(eventName, openModalHandler);
+
+        return () => {
+            window.removeEventListener(eventName, openModalHandler);
+        };
+    }, []);
+}
Index: imaps-frontend/src/components/Modals/Hooks/useModalState.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useModalState.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Hooks/useModalState.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,40 @@
+import {useState} from "react";
+import triggerMapSave from "../../../scripts/util/triggerMapSave.js";
+
+export default function useModalState(map) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [shape, setShape] = useState(null);
+    const [shapeInfo,setShapeInfo] = useState({});
+
+
+    const toggleModal = () => {
+        if (isOpen) {
+            shape.setInfo(shapeInfo);
+            map.updateRoomNames();
+            triggerMapSave();
+            console.log("SHAPE BEF CLOSE:",shape.info)
+        }
+        setIsOpen(!isOpen);
+    };
+
+    const updateModalData = (e) => {
+        const {name, value, type, checked} = e.target;
+        setShapeInfo(prevShapeInfo => ({
+                ...prevShapeInfo,
+                [name]: type === "checkbox" ? checked : value
+            }
+        ))
+        console.log("SHAPE INFO UPDATE",shape.info)
+    };
+
+    const saveDetails = () => {
+        if (shape) {
+            toggleModal();
+        }
+    };
+
+    return {
+        modalState: {isOpen, shapeInfo,setIsOpen, shape, setShape,setShapeInfo},
+        handlers: {toggleModal, updateModalData, saveDetails}
+    };
+}
Index: imaps-frontend/src/components/Modals/Hooks/useRoomTypes.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useRoomTypes.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Hooks/useRoomTypes.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,19 @@
+import {useEffect} from "react";
+
+export default function useRoomTypes(formData,setFormData,roomTypes,setRoomTypes,map){
+
+    const addRoomType = () => {
+        if (!formData.type || roomTypes.includes(formData.type)) return;
+        // setRoomTypes((prevTypes) => [...prevTypes, formData.type]);
+        setFormData({ ...formData, type: "" });
+        map.addRoomType(formData.type);
+        console.log("TYPES" + map.roomTypes);
+    };
+
+    const removeRoomType = (typeToRemove) => {
+        map.removeRoomType(typeToRemove);
+        setRoomTypes((prevTypes) => prevTypes.filter((type) => type !== typeToRemove));
+    };
+
+    return {addRoomType,removeRoomType}
+}
Index: imaps-frontend/src/components/Modals/InfoPinModal/InfoPinModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/InfoPinModal/InfoPinModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/InfoPinModal/InfoPinModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,63 @@
+import React, {useState, useEffect} from "react";
+import styles from "./InfoPinModal.module.css";
+import PropTypes, {instanceOf} from "prop-types";
+import {MapBuilder} from "../../../scripts/main/MapBuilder.js";
+import ModalNameField from "../Components/ModalNameField.jsx";
+import ModalSelectConnections from "../Components/ModalSelectConnections.jsx";
+import ModalDisplayConnections from "../Components/ModalDisplayConnections.jsx";
+import ModalDescriptionField from "../Components/ModalDescriptionField.jsx";
+import ModalSaveButton from "../Components/ModalSaveButton.jsx";
+import Modal from "../Components/Modal.jsx";
+import useModalState from "../Hooks/useModalState.jsx";
+import useConnections from "../Hooks/useConnections.jsx";
+import {useModalEvent} from "../Hooks/useModalEvent.jsx";
+import ModalSelectConnections2 from "../Components/ModalSelectConnections2.jsx";
+import ShapeQuery from "../../../scripts/util/ShapeQuery.js";
+
+export default function InfoPinModal({map}) {
+
+    const {
+        modalState: {isOpen,shapeInfo,shape,setIsOpen,setShape,setShapeInfo},
+        handlers: {toggleModal,updateModalData,saveDetails}
+    } = useModalState(map);
+
+    const {
+        connectionState: {connections,setConnections},
+        handlers: {addConnection,removeConnection}
+    } = useConnections(map,shapeInfo,setShapeInfo)
+
+
+    useModalEvent((event) => {
+        const shape = event.detail.room;
+        setShape(shape);
+        setShapeInfo({
+            ...shape.info,
+            selectedPin: ""
+        })
+        setConnections(shape.info.selectedPins || []);
+        setIsOpen(true);
+
+        console.log(shape.info.selectedPins, "Loaded pins on modal open");
+    },"openPinModalEvent")
+
+
+    return (
+        <Modal isOpen={isOpen} toggleModal={toggleModal} title={"Enter Pin Details"}>
+            <ModalNameField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
+            <ModalSelectConnections2
+                shapeInfo={shapeInfo}
+                availableShapes={ShapeQuery.findAllByTypeAndFloor(map?.floorNum,"Stairs","InfoPin","Entrance")}
+                updateModalData={updateModalData}
+                addConnection={addConnection}
+            />
+            <ModalDisplayConnections connections={connections} removePinFromList={removeConnection}/>
+            <ModalDescriptionField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
+            <ModalSaveButton saveDetails={saveDetails}/>
+        </Modal>
+
+    );
+}
+
+InfoPinModal.propTypes = {
+    map: PropTypes.instanceOf(MapBuilder),
+};
Index: imaps-frontend/src/components/Modals/InfoPinModal/InfoPinModal.module.css
===================================================================
--- imaps-frontend/src/components/Modals/InfoPinModal/InfoPinModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/InfoPinModal/InfoPinModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,183 @@
+/* Active modal: Disable scrolling when the modal is open */
+.activeModal {
+  overflow-y: hidden; /* Disable scrolling */
+}
+
+/* Modal and overlay styles */
+.modal,
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+/* Overlay: Dark background with optional blur */
+.overlay {
+  background: rgba(0, 0, 0, 0.7); /* Darken the background */
+  backdrop-filter: blur(5px); /* Optional blur effect */
+  z-index: 999; /* Ensure the overlay appears below the modal */
+}
+
+/* Modal content: Centered and styled */
+.modalContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #2c2f33; /* Darker background for modal content */
+  color: #ffffff; /* White text for contrast */
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000; /* Ensure the modal appears above the overlay */
+}
+
+/* Heading styles */
+h2,
+h3 {
+  margin-bottom: 15px;
+  color: #ffffff; /* White text for the headings */
+}
+
+/* Button for opening the modal */
+.btnModal {
+  padding: 10px 20px;
+  font-size: 18px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 20px;
+  display: block;
+}
+
+.btnModal:hover {
+  background-color: #0056b3;
+}
+
+/* Close button inside the modal */
+.closeModal {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px 10px;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.closeModal:hover {
+  background-color: #c82333;
+}
+
+/* Form styles */
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+.formGroup {
+  margin-bottom: 15px;
+}
+
+/* Form labels */
+.formGroup label {
+  display: block;
+  margin-bottom: 5px;
+  color: #ffffff; /* White text for labels */
+}
+
+/* Input, select, and textarea styles */
+.formGroup input,
+.formGroup select,
+.formGroup textarea {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: #23272a; /* Darker input background */
+  color: #ffffff; /* White text inside the input fields */
+}
+
+.formGroup input::placeholder,
+.formGroup textarea::placeholder {
+  color: #888888; /* Slightly lighter color for placeholder text */
+}
+
+/* Checkbox alignment fix */
+.formGroupCheckbox {
+  display: flex;
+  align-items: center; /* Vertical alignment */
+  color: #ffffff;
+}
+
+/* Add button */
+.addButton {
+  background-color: #28a745;
+  color: white;
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.addButton:hover {
+  background-color: #218838;
+}
+
+/* Save button styling */
+.submitButton {
+  background-color: #28a745;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 15px;
+}
+
+.submitButton:hover {
+  background-color: #218838;
+}
+
+/* Pin list */
+.pinList {
+  list-style-type: none;
+  padding: 0;
+  margin-top: 15px;
+}
+
+/* Individual pin item */
+.pinItem {
+  background-color: #444;
+  padding: 8px;
+  margin-bottom: 5px;
+  color: white;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Remove button */
+.removeButton {
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.removeButton:hover {
+  background-color: #c82333;
+}
Index: imaps-frontend/src/components/Modals/RoomModal/RoomModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/RoomModal/RoomModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/RoomModal/RoomModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,35 @@
+import React, {useState, useEffect} from "react";
+import ModalNameField from "../Components/ModalNameField.jsx";
+import ModalDescriptionField from "../Components/ModalDescriptionField.jsx";
+import ModalSaveButton from "../Components/ModalSaveButton.jsx";
+import Modal from "../Components/Modal.jsx";
+import ModalRoomTypes from "../Components/ModalRoomTypes.jsx";
+import useModalState from "../Hooks/useModalState.jsx";
+import {useModalEvent} from "../Hooks/useModalEvent.jsx";
+
+export default function RoomModal({map,roomTypes}) {
+    const {
+        modalState: {isOpen,setIsOpen,setShape,shapeInfo,setShapeInfo},
+        handlers: {toggleModal,updateModalData,saveDetails}
+    } = useModalState(map);
+
+
+    useModalEvent((event) => {
+        const shape = event.detail.room;
+        setShape(shape);
+        setShapeInfo(shape.info);
+        setIsOpen(true);
+
+    },"openRoomModalEvent")
+
+
+
+    return (
+        <Modal isOpen={isOpen} toggleModal={toggleModal} title={"Enter Room Details"}>
+            <ModalNameField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
+            <ModalRoomTypes updateModalData={updateModalData} shapeInfo={shapeInfo} roomTypes={roomTypes}/>
+            <ModalDescriptionField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
+            <ModalSaveButton saveDetails={saveDetails}/>
+        </Modal>
+    );
+}
Index: imaps-frontend/src/components/Modals/RoomModal/RoomModal.module.css
===================================================================
--- imaps-frontend/src/components/Modals/RoomModal/RoomModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/RoomModal/RoomModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,121 @@
+/* Modal.module.css */
+
+.activeModal {
+  overflow-y: hidden; /* Disable scrolling */
+}
+
+.modal,
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.overlay {
+  background: rgba(0, 0, 0, 0.7); /* Darken the background */
+  backdrop-filter: blur(5px); /* Optional blur effect */
+  z-index: 999;
+}
+
+.modalContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #2c2f33; /* Darker background for modal content */
+  color: #ffffff; /* White text for contrast */
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}
+
+h2 {
+  margin-bottom: 15px;
+  color: #ffffff; /* White text for the heading */
+}
+
+.btnModal {
+  padding: 10px 20px;
+  font-size: 18px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 20px;
+  display: block;
+}
+
+.btnModal:hover {
+  background-color: #0056b3;
+}
+
+.closeModal {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px 10px;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.closeModal:hover {
+  background-color: #c82333;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+.formGroup {
+  margin-bottom: 15px;
+}
+
+.formGroup label {
+  display: block;
+  margin-bottom: 5px;
+  color: #ffffff; /* White text for labels */
+}
+
+.formGroup input,
+.formGroup select,
+.formGroup textarea {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: #23272a; /* Darker input background */
+  color: #ffffff; /* White text inside the input fields */
+}
+
+.formGroup input::placeholder,
+.formGroup textarea::placeholder {
+  color: #888888; /* Slightly lighter color for placeholder text */
+}
+
+.formGroup input[type="checkbox"] {
+  width: auto;
+  margin-right: 10px;
+}
+
+.submitButton {
+  background-color: #28a745;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.submitButton:hover {
+  background-color: #218838;
+}
Index: imaps-frontend/src/components/Modals/RoomTypeModal/RoomTypeModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/RoomTypeModal/RoomTypeModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/RoomTypeModal/RoomTypeModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from "react";
+import styles from "./RoomTypeModal.module.css";
+import useRoomTypes from "../Hooks/useRoomTypes.jsx";
+
+export default function RoomTypeModal({map,roomTypes,addRoomTypeDB}) {
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const [roomTypeName, setRoomTypeName] = useState("");
+
+  const toggleModal = () => {
+    setModalIsOpen(!modalIsOpen);
+  };
+
+  const handleAddRoomType = async () => {
+    await addRoomTypeDB(roomTypeName);
+    setRoomTypeName("");
+  }
+  // Handle form input changes
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setRoomTypeName(value);
+  };
+
+  return (
+    <>
+      <button onClick={toggleModal} className={styles.btnModal}>
+        Room Types
+      </button>
+
+      {modalIsOpen && (
+        <div className={styles.modal}>
+          <div onClick={toggleModal} className={styles.overlay}></div>
+          <div className={styles.modalContent}>
+            <h2>Manage Room Types</h2>
+
+            <form className={styles.form}>
+              <div className={styles.formGroup}>
+                <label htmlFor="roomTypeName">Add New Room Type:</label>
+                <input
+                  type="text"
+                  id="roomTypeName"
+                  name="roomTypeName"
+                  value={roomTypeName}
+                  onChange={handleInputChange}
+                  placeholder="Enter a new room type (e.g., Office, Classroom)"
+                />
+                <button type="button" className={styles.addButton} onClick={handleAddRoomType}>
+                  Add Type
+                </button>
+              </div>
+            </form>
+
+            <h3>Available Room Types:</h3>
+            <ul className={styles.roomTypeList}>
+              {roomTypes.length > 0 ? (
+                roomTypes.map((roomType,index) => (
+                  <li key={index} className={styles.roomTypeItem}>
+                    {roomType.name}
+                    <button className={styles.removeButton} >
+                      Remove
+                    </button>
+                  </li>
+                ))
+              ) : (
+                <li>No room types available</li>
+              )}
+            </ul>
+
+            <button className={styles.closeModal} onClick={toggleModal}>
+              CLOSE
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
Index: imaps-frontend/src/components/Modals/RoomTypeModal/RoomTypeModal.module.css
===================================================================
--- imaps-frontend/src/components/Modals/RoomTypeModal/RoomTypeModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/RoomTypeModal/RoomTypeModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,167 @@
+/* Active modal: Disable scrolling when the modal is open */
+.activeModal {
+  overflow-y: hidden; /* Disable scrolling */
+}
+
+/* Modal and overlay styles */
+.modal,
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+/* Overlay: Dark background with optional blur */
+.overlay {
+  background: rgba(0, 0, 0, 0.7); /* Darken the background */
+  backdrop-filter: blur(5px); /* Optional blur effect */
+  z-index: 999; /* Ensure the overlay appears below the modal */
+}
+
+/* Modal content: Centered and styled */
+.modalContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #2c2f33; /* Darker background for modal content */
+  color: #ffffff; /* White text for contrast */
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000; /* Ensure the modal appears above the overlay */
+}
+
+/* Modal heading */
+h2,
+h3 {
+  margin-bottom: 15px;
+  color: #ffffff; /* White text for the headings */
+}
+
+/* Button for opening the modal */
+.btnModal {
+  padding: 10px 20px;
+  font-size: 18px;
+  background-color: #aa5c5c;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 10px 0;
+  display: block;
+}
+
+.btnModal:hover {
+  background-color: #994f4f;
+}
+
+/* Close button inside the modal */
+.closeModal {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px 10px;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.closeModal:hover {
+  background-color: #c82333;
+}
+
+/* Form styles */
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Form group: margin between form elements */
+.formGroup {
+  margin-bottom: 15px;
+}
+
+/* Form labels */
+.formGroup label {
+  display: block;
+  margin-bottom: 5px;
+  color: #ffffff; /* White text for labels */
+}
+
+/* Input, select, and textarea styles */
+.formGroup input,
+.formGroup select,
+.formGroup textarea {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: #23272a; /* Darker input background */
+  color: #ffffff; /* White text inside the input fields */
+}
+
+.formGroup input::placeholder,
+.formGroup textarea::placeholder {
+  color: #888888; /* Slightly lighter color for placeholder text */
+}
+
+/* Checkbox style adjustment */
+.formGroup input[type="checkbox"] {
+  width: auto;
+  margin-right: 10px;
+}
+
+/* Add button for adding room types */
+.addButton {
+  background-color: #28a745;
+  color: white;
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.addButton:hover {
+  background-color: #218838;
+}
+
+/* Dynamic room type list */
+.roomTypeList {
+  list-style-type: none;
+  padding: 0;
+  margin-top: 15px;
+}
+
+/* Individual room type item */
+.roomTypeItem {
+  background-color: #444;
+  padding: 8px;
+  margin-bottom: 5px;
+  color: white;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Remove button */
+.removeButton {
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.removeButton:hover {
+  background-color: #c82333;
+}
Index: imaps-frontend/src/components/Modals/StairsModal/StairsModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/StairsModal/StairsModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/StairsModal/StairsModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,54 @@
+import React, {useState} from "react";
+import useModalState from "../Hooks/useModalState.jsx";
+import {useModalEvent} from "../Hooks/useModalEvent.jsx";
+import useConnections from "../Hooks/useConnections.jsx";
+import ModalNameField from "../Components/ModalNameField.jsx";
+
+import ModalDisplayConnections from "../Components/ModalDisplayConnections.jsx";
+import ModalDescriptionField from "../Components/ModalDescriptionField.jsx";
+import ModalSaveButton from "../Components/ModalSaveButton.jsx";
+import Modal from "../Components/Modal.jsx";
+import ModalSelectConnections2 from "../Components/ModalSelectConnections2.jsx";
+import ShapeRegistry from "../../../scripts/util/ShapeRegistry.js";
+import ShapeQuery from "../../../scripts/util/ShapeQuery.js";
+
+export default function StairsModal({map}){
+    const {
+        modalState: {isOpen,setIsOpen,setShape,shapeInfo,setShapeInfo},
+        handlers: {toggleModal,updateModalData,saveDetails}
+    } = useModalState(map);
+
+    const {
+        connectionState: {connections,setConnections},
+        handlers: {addConnection,removeConnection}
+    } = useConnections(map,shapeInfo,setShapeInfo)
+
+
+    useModalEvent((event) => {
+        const roomObj = event.detail.room;
+        setShape(roomObj);
+        setShapeInfo(roomObj.info);
+        console.log("stairs connections shape info: " + roomObj.info.selectedPins)
+        setConnections(roomObj.info.selectedPins || []);
+        setIsOpen(true);
+        console.log(roomObj.info.selectedPins, "Loaded pins on modal open");
+    },"openStairsModalEvent")
+
+
+
+    return (
+
+        <Modal isOpen={isOpen} toggleModal={toggleModal} title={"Enter Stair Details"}>
+            <ModalNameField shapeInfo={shapeInfo} updateModalData={updateModalData} phtext={"Enter name of stairs"}/>
+            <ModalSelectConnections2
+                shapeInfo={shapeInfo}
+                updateModalData={updateModalData}
+                addConnection={addConnection}
+                availableShapes={ShapeQuery.findAllByType("Stairs")}
+            />
+            <ModalDisplayConnections connections={connections} removePinFromList={removeConnection}/>
+            <ModalDescriptionField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
+            <ModalSaveButton saveDetails={saveDetails}/>
+        </Modal>
+    )
+}
Index: imaps-frontend/src/components/Profile/Profile.jsx
===================================================================
--- imaps-frontend/src/components/Profile/Profile.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/Profile/Profile.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,52 +1,70 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useContext } from "react";
+import { useNavigate, Link } from "react-router-dom";
 import profile from "../../assets/person_icon.png";
 import styles from "./Profile.module.css";
+import { useAppContext } from "../AppContext/AppContext.jsx";
 
-function Profile() {
-  const menus = ["Profile", "Settings", "Support", "Logout"];
-  const [open, setOpen] = useState(false);
-  const menuRef = useRef(null);
-  const imgRef = useRef(null);
+function Profile({ position = "fixed" }) {
+    const { username, isAuthenticated } = useAppContext();
+    const [open, setOpen] = useState(false);
+    const menuRef = useRef(null);
+    const imgRef = useRef(null);
+    const navigate = useNavigate();
 
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (menuRef.current && imgRef.current) {
-        if (!menuRef.current.contains(e.target) && !imgRef.current.contains(e.target)) {
-          setOpen(false);
+    const menus = isAuthenticated ? ["My Maps", "Logout"] : ["Login"];
+
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (menuRef.current && imgRef.current) {
+                if (!menuRef.current.contains(e.target) && !imgRef.current.contains(e.target)) {
+                    setOpen(false);
+                }
+            }
+        };
+
+        document.addEventListener("click", handleClickOutside);
+
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, []);
+
+    const handleMenuClick = (menu) => {
+        if (menu === "My Maps") {
+            navigate("/MyMaps");
+        } else if (menu === "Logout") {
+            localStorage.removeItem("token");
+            window.location.reload();
         }
-      }
+        setOpen(false);
     };
 
-    document.addEventListener("click", handleClickOutside);
-
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <div className={styles.profileContainer}>
-      <div className={styles.profileWrapper}>
-        <img
-          onClick={() => setOpen(!open)}
-          src={profile}
-          alt="profile"
-          className={styles.profileImage}
-          ref={imgRef}
-        />
-        {open && (
-          <div ref={menuRef} className={styles.dropdownMenu}>
-            <ul className={styles.menuList}>
-              {menus.map((menu) => (
-                <li key={menu} onClick={() => setOpen(false)} className={styles.menuItem}>
-                  {menu}
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-      </div>
-    </div>
-  );
+    return (
+        <div className={position === "fixed" ? styles.fixedProfileContainer : styles.inlineProfileContainer}>
+            <div className={styles.profileWrapper}>
+                <div className={styles.profileIconContainer} onClick={() => setOpen(!open)}>
+                    <img src={profile} alt="profile" className={styles.profileImage} ref={imgRef} />
+                </div>
+                {open && (
+                    <div ref={menuRef} className={styles.dropdownMenu}>
+                        {isAuthenticated && <div className={styles.username}>{username}</div>}
+                        <ul className={styles.menuList}>
+                            {menus.map((menu) =>
+                                menu === "Login" ? (
+                                    <li key={menu} className={styles.menuItem}>
+                                        <Link to="/login" className={styles.linkStyle}>{menu}</Link>
+                                    </li>
+                                ) : (
+                                    <li key={menu} onClick={() => handleMenuClick(menu)} className={styles.menuItem}>
+                                        {menu}
+                                    </li>
+                                )
+                            )}
+                        </ul>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
 }
 
Index: imaps-frontend/src/components/Profile/Profile.module.css
===================================================================
--- imaps-frontend/src/components/Profile/Profile.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/Profile/Profile.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,44 +1,58 @@
-img:hover,
-.menuItem:hover {
+.fixedProfileContainer {
+  position: fixed;
+  top: 1em;
+  right: 2.5em;
+  z-index: 1000;
+}
+
+.inlineProfileContainer {
+  display: inline-block;
   cursor: pointer;
 }
 
-.menuList {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  text-align: center;
+.profileWrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
 }
 
-.profileContainer {
-  display: flex;
-  justify-content: center;
-}
-
-.profileWrapper {
-  position: relative;
+.profileIconContainer {
+  position: relative; /* Makes dropdown position relative to this container */
+  cursor: pointer;
 }
 
 .profileImage {
-  height: 48px;
-  width: 48px;
+  width: 60px;
+  height: 60px;
   border-radius: 50%;
-  /* border: 4px solid #d1d5db; */
-  object-fit: cover;
+  transition: box-shadow 0.3s ease;
 }
 
-/* Dropdown Menu */
+.profileImage:hover {
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+}
+
 .dropdownMenu {
   position: absolute;
-  top: 50px; /* Adjust according to image size and spacing */
-  left: 50%;
-  transform: translateX(-50%); /* Center the menu below the image */
-  width: 13rem;
-  background-color: white;
-  padding: 1rem;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  top: 70px; 
+  margin-left: 1.8em;
+  transform: translateX(-50%);
+  background-color: #ffffff;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+  border-radius: 12px;
+  padding: 12px;
+  width: 180px;
+  transition: opacity 0.3s ease;
+  opacity: 1;
 }
 
-/* Menu List and Items */
+.username {
+  padding: 10px 0;
+  font-weight: 600;
+  text-align: center;
+  color: #333;
+  border-bottom: 1px solid #eee;
+}
+
 .menuList {
   list-style-type: none;
@@ -49,10 +63,14 @@
 .menuItem {
   padding: 10px;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
   text-align: center;
-  border-radius: 5px;
-  transition: background-color 0.3s ease;
+  color: #333;
+  font-weight: 500;
+  border-radius: 8px;
 }
 
 .menuItem:hover {
-  background-color: #f0f0f0;
+  background-color: #f5f5f5;
+  color: #007bff; /* Optional: Adds a blue highlight on hover */
 }
Index: imaps-frontend/src/components/ProtectedRoute/ProtectedRoute.jsx
===================================================================
--- imaps-frontend/src/components/ProtectedRoute/ProtectedRoute.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/ProtectedRoute/ProtectedRoute.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,7 +1,25 @@
-import React from "react";
-import { Outlet, Navigate } from "react-router-dom";
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+import {useAppContext} from "../AppContext/AppContext.jsx";
+import HttpService from "../../scripts/net/HttpService.js";
+import React, {useEffect} from "react";
+import {LoadingContainer} from "../LoadingContainer/LoadingContainer.jsx";
+import config from "../../scripts/net/netconfig.js";
+import {verifyToken} from "../../scripts/util/verifyToken.js";
 
-const ProtectedRoute = ({ isAuthenticated }) => {
-  return isAuthenticated ? <Outlet /> : <Navigate to="/Login" />;
+const ProtectedRoute = () => {
+  const location = useLocation();
+  const {loading,isAuthenticated} = useAppContext();
+
+
+  if(loading){
+    return <LoadingContainer/>
+  }
+
+
+  if (!isAuthenticated) {
+    return <Navigate to="/Login" state={{ targetPath: location }} replace />;
+  }
+
+  return <Outlet />;
 };
 
Index: imaps-frontend/src/components/PublishForm/PublishForm.jsx
===================================================================
--- imaps-frontend/src/components/PublishForm/PublishForm.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/PublishForm/PublishForm.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import styles from './PublishForm.module.css';
+
+const PublishForm = ({ isAdmin = false, formData, onSubmit, onCancel, onApprove, onDeny }) => {
+    const [state, setState] = useState(isAdmin ? 'viewing' : 'writing');
+    const [form, setForm] = useState(
+        formData || {
+            id: -1,
+            name: '',
+            lastName: '',
+            mapName: '',
+            mapType: 'Other',
+            googleMapsUrl: '',
+        }
+    );
+    const [errors, setErrors] = useState({});
+
+    const mapTypeOptions = ['Hospital', 'Faculty', 'House', 'Other'];
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setForm((prev) => ({ ...prev, [name]: value }));
+        setErrors((prev) => ({ ...prev, [name]: '' }));
+    };
+
+    const validateForm = () => {
+        const newErrors = {};
+        if (!form.name.trim()) newErrors.name = 'Name is required.';
+        if (!form.lastName.trim()) newErrors.lastName = 'Last Name is required.';
+        if (!form.googleMapsUrl.trim()) newErrors.googleMapsUrl = 'Google Maps URL is required.';
+        return newErrors;
+    };
+
+    const handleSubmit = () => {
+        const formErrors = validateForm();
+        if (Object.keys(formErrors).length > 0) {
+            setErrors(formErrors);
+            return;
+        }
+
+        if (state === 'writing') {
+            onSubmit(form);
+        }
+    };
+
+    return (
+        <>
+            <div className={styles.modalOverlay}></div>
+            <div className={styles.modal}>
+                <div className={styles.modalContent}>
+                    <h2>{state === 'writing' ? 'Publish Map' : 'View Map Details'}</h2>
+                    {state === 'writing' ? (
+                        <form>
+                            <div>
+                                <label>Name:</label>
+                                <input
+                                    type="text"
+                                    name="name"
+                                    value={form.name}
+                                    onChange={handleChange}
+                                />
+                                {errors.name && <p className={styles.error}>{errors.name}</p>}
+                            </div>
+                            <div>
+                                <label>Last Name:</label>
+                                <input
+                                    type="text"
+                                    name="lastName"
+                                    value={form.lastName}
+                                    onChange={handleChange}
+                                />
+                                {errors.lastName && <p className={styles.error}>{errors.lastName}</p>}
+                            </div>
+                            <div>
+                                <label>Google Maps URL:</label>
+                                <input
+                                    type="url"
+                                    name="googleMapsUrl"
+                                    value={form.googleMapsUrl}
+                                    onChange={handleChange}
+                                />
+                                {errors.googleMapsUrl && (
+                                    <p className={styles.error}>{errors.googleMapsUrl}</p>
+                                )}
+                            </div>
+                            <div>
+                                <label>Type of Map:</label>
+                                <select
+                                    name="mapType"
+                                    value={form.mapType}
+                                    onChange={handleChange}
+                                >
+                                    {mapTypeOptions.map((option) => (
+                                        <option key={option} value={option}>
+                                            {option}
+                                        </option>
+                                    ))}
+                                </select>
+                            </div>
+                            <div className={styles.buttonGroup}>
+                                <button type="button" onClick={handleSubmit}>
+                                    Submit
+                                </button>
+                                <button
+                                    type="button"
+                                    className={styles.cancelButton}
+                                    onClick={onCancel}
+                                >
+                                    Cancel
+                                </button>
+                            </div>
+                        </form>
+                    ) : (
+                        <div>
+                            <p><strong>Map Name:</strong> {form.mapName}</p>
+                            <p><strong>Name:</strong> {form.name}</p>
+                            <p><strong>Last Name:</strong> {form.lastName}</p>
+                            <p>
+                                <strong>Google Maps URL:</strong>{' '}
+                                <a
+                                    href={form.googleMapsUrl}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    {form.googleMapsUrl}
+                                </a>
+                            </p>
+                            <p><strong>Type of Map:</strong> {form.mapType}</p>
+                            <div className={styles.buttonGroup}>
+                                <button
+                                    className={styles.cancelButton}
+                                    onClick={onCancel}
+                                >
+                                    Cancel
+                                </button>
+                                <button
+                                    className={styles.approveButton}
+                                    onClick={() => onApprove(form.id,form.mapName)}
+                                >
+                                    Approve
+                                </button>
+                                <button
+                                    className={styles.denyButton}
+                                    onClick={() => onDeny(form.id,form.mapName,"Reason")}
+                                >
+                                    Deny
+                                </button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default PublishForm;
Index: imaps-frontend/src/components/PublishForm/PublishForm.module.css
===================================================================
--- imaps-frontend/src/components/PublishForm/PublishForm.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/PublishForm/PublishForm.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,178 @@
+/* Modal overlay for blur and dark background */
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6); /* Dark transparent background */
+    backdrop-filter: blur(8px); /* Stronger blur effect */
+    z-index: 999; /* Behind the modal */
+}
+
+/* Modal styles */
+.modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+    width: 420px;
+    max-width: 90%;
+    z-index: 1000; /* Above the overlay */
+    padding: 30px;
+    animation: fadeIn 0.3s ease;
+}
+
+/* Modal fade-in animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -55%);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.modalContent {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+h2 {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #333333;
+    text-align: center;
+    width: 100%;
+}
+
+/* Input and form styles */
+form {
+    width: 100%;
+}
+
+label {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 5px;
+    display: block;
+    color: #555555;
+}
+
+input, select {
+    width: calc(100% - 10px);
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #cccccc;
+    border-radius: 6px;
+    font-size: 1rem;
+}
+
+/* Button styles */
+button {
+    background-color: #007bff;
+    color: #ffffff;
+    border: none;
+    border-radius: 6px;
+    padding: 12px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s;
+}
+
+button:hover {
+    background-color: #0056b3;
+    transform: scale(1.05); /* Slight scaling effect */
+}
+
+.cancelButton {
+    background-color: #dc3545;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 12px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s;
+}
+
+.cancelButton:hover {
+    background-color: #a71d2a;
+    transform: scale(1.05); /* Slight scaling effect */
+}
+
+.approveButton {
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 12px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s;
+}
+
+.approveButton:hover {
+    background-color: #218838;
+    transform: scale(1.05); /* Slight scaling effect */
+}
+
+.denyButton {
+    background-color: #ffc107;
+    color: #212529;
+    border: none;
+    border-radius: 6px;
+    padding: 12px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s;
+}
+
+.denyButton:hover {
+    background-color: #e0a800;
+    transform: scale(1.05); /* Slight scaling effect */
+}
+
+/* Button group */
+.buttonGroup {
+    display: flex;
+    justify-content: space-between;
+    gap: 15px;
+    margin-top: 20px;
+}
+
+.error {
+    color: #ff0000;
+    font-size: 0.85rem;
+    margin-top: -10px;
+    margin-bottom: 10px;
+}
+
+p {
+    font-size: 1rem;
+    margin: 10px 0;
+    line-height: 1.6;
+}
+
+a {
+    color: #007bff;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: #0056b3;
+}
+
+@media (max-width: 480px) {
+    .modal {
+        width: 90%;
+    }
+}
Index: imaps-frontend/src/components/RoomInfoPanel/RoomInfoPanel.jsx
===================================================================
--- imaps-frontend/src/components/RoomInfoPanel/RoomInfoPanel.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/RoomInfoPanel/RoomInfoPanel.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,66 @@
+import React, {useEffect, useRef, useState} from "react";
+import styles from "./RoomInfoPanel.module.css";
+import navigate_icon from "../../assets/route_icon.png";
+
+const RoomInfoPanel = ({isOpen, onClose, floor, room, handleDirectionsSubmit}) => {
+  const panelRef = useRef();
+  const testImageUrl = "data:image/jpeg;base64,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"
+
+  function onNavigate(){
+    handleDirectionsSubmit("", room.info.name)
+  }
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (panelRef.current && !panelRef.current.contains(event.target)) {
+        onClose();
+
+      }
+    };
+
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+
+
+  return (room !== null &&
+      <div ref={panelRef} className={`${styles.roomInfoPanel} ${isOpen ? styles.open : ""}`}>
+        <button className={styles.closeButton} onClick={onClose}>
+          ×
+        </button>
+        {room ? (
+            <>
+              <div className={styles.roomHeader}>
+                <h2>{room.info.name}</h2>
+                <h2>{room.info.type !== "" && "("+room.info.type+")"}</h2>
+              </div>
+              <div className={styles.floorInfo}>
+                <p>Floor: {floor}</p>
+              </div>
+              <div className={styles.roomImageWrapper}>
+                <img src={testImageUrl} alt={room.name} className={styles.roomImage} />
+              </div>
+              <div className={styles.roomDescription}>
+                <p>{room.info.description}</p>
+              </div>
+              <button className={styles.navigateButton} onClick={onNavigate}>
+                <img src={navigate_icon} alt="Navigate Icon" className={styles.navigateIcon} />
+                Navigate
+              </button>
+            </>
+        ) : (
+            <p>Select a room to see details.</p>
+        )}
+      </div>
+  );
+};
+
+export default RoomInfoPanel;
Index: imaps-frontend/src/components/RoomInfoPanel/RoomInfoPanel.module.css
===================================================================
--- imaps-frontend/src/components/RoomInfoPanel/RoomInfoPanel.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/RoomInfoPanel/RoomInfoPanel.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,103 @@
+/* Panel styling */
+.roomInfoPanel {
+  position: fixed;
+  top: 0;
+  right: -350px;
+  width: 350px;
+  height: 100%;
+  background-color: #f7f9fc !important;
+  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
+  transition: right 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 6;
+}
+
+.open {
+  right: 0;
+}
+
+/* Close button styling */
+.closeButton {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  font-size: 28px;
+  background: none;
+  border: none;
+  color: #555;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.closeButton:hover {
+  color: #000 !important;
+}
+
+/* Room image styling */
+.roomImageWrapper {
+  width: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+  margin: 20px 0;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.roomImage {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 12px;
+}
+
+.roomHeader h2 {
+  color: #333;
+  font-size: 1.5rem;
+  font-weight: 600;
+  text-align: center;
+  margin: 0;
+  color: black !important;
+}
+
+.roomDescription p {
+  color: #666 !important;
+  line-height: 1.6;
+  text-align: center;
+}
+/* Floor information styling */
+.floorInfo p {
+  color: #666 !important;
+  font-size: 1.1rem;
+  margin-top: 10px;
+  text-align: center;
+}
+
+/* Navigate button styling */
+.navigateButton {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 20px;
+  margin-top: 20px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.navigateButton:hover {
+  background-color: #0056b3;
+}
+
+.navigateIcon {
+  width: 20px;
+  height: 20px;
+}
+
Index: imaps-frontend/src/components/RoomModal/RoomModal.jsx
===================================================================
--- imaps-frontend/src/components/RoomModal/RoomModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,132 +1,0 @@
-import React, { useState, useEffect } from "react";
-import styles from "./RoomModal.module.css";
-import { Ring } from "konva/lib/shapes/Ring";
-
-export default function RoomModal(props) {
-  const [modal, setModal] = useState(false);
-  const [room, setRoom] = useState(null);
-  const [formData, setFormData] = useState({
-    name: "",
-    type: "",
-    description: "",
-  });
-  const [roomTypes, setRoomTypes] = useState([]);
-
-  const toggleModal = () => {
-    if(modal) {
-      room.info = formData;
-      props.map.updateRoomNames();
-    }
-    setModal(!modal);
-  };
-
-  const saveDetails = () => {
-    if (room) {
-      room.info = formData;
-      toggleModal();
-      console.log(room.info);
-    }
-  };
-  // impl da sa gledat dali ti e zacuvana formava
-
-  const handleInputChange = (e) => {
-    console.log(room.info)
-    const { name, value, type, checked } = e.target;
-    setFormData((prevData) => ({
-      ...prevData,
-      [name]: type === "checkbox" ? checked : value,
-    }));
-    room.info = formData;
-  };
-
-  useEffect(() => {
-    const openModalHandler = (event) => {
-      const roomObj = event.detail.room;
-      console.log(roomObj, "ROOMOBJ OTV")
-      setRoom(roomObj);
-      setFormData({
-        name: roomObj.info.name,
-        type: roomObj.info.type,
-        description: roomObj.info.description,
-      });
-      setRoomTypes(event.detail.map.getRoomTypes());
-      toggleModal(true);
-    };
-
-    window.addEventListener("openRoomModalEvent", openModalHandler);
-
-    return () => {
-      window.removeEventListener("openRoomModalEvent", openModalHandler);
-    };
-  }, []);
-
-  if (modal) {
-    document.body.classList.add(styles.activeModal);
-  } else {
-    document.body.classList.remove(styles.activeModal);
-  }
-
-  return (
-    <>
-      {/* <button onClick={toggleModal} className={styles.btnModal}>
-        RoomModal
-      </button> */}
-
-      {modal && (
-        <div className={styles.modal}>
-          <div onClick={toggleModal} className={styles.overlay}></div>
-          <div className={styles.modalContent}>
-            <h2>Enter Room Details</h2>
-            <form className={styles.form}>
-              <div className={styles.formGroup}>
-                <label htmlFor="name">Name:</label>
-                <input
-                  type="text"
-                  id="name"
-                  name="name"
-                  value={formData.name}
-                  onChange={handleInputChange}
-                  required
-                />
-              </div>
-              <div className={styles.formGroup}>
-                <label htmlFor="type">Type:</label>
-                <select id="type" name="type" onChange={handleInputChange} value={formData.type} required>
-                  <option value="">Select Room Type</option>
-                  {roomTypes.map((type, index) => (
-                    <option key={index} value={type}>
-                      {type}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div className={styles.formGroup}>
-                <label htmlFor="description">Description:</label>
-                <textarea
-                  id="description"
-                  name="description"
-                  value={formData.description}
-                  onChange={handleInputChange}
-                  rows="3"
-                />
-              </div>
-              <div className={styles.formGroup}>
-                <button
-                  type="button"
-                  id="submit-details"
-                  onClick={saveDetails}
-                  className={styles.submitButton}
-                >
-                  Save
-                </button>
-              </div>
-            </form>
-            <button className={styles.closeModal} onClick={toggleModal}>
-              CLOSE
-            </button>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
Index: imaps-frontend/src/components/RoomModal/RoomModal.module.css
===================================================================
--- imaps-frontend/src/components/RoomModal/RoomModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,121 +1,0 @@
-/* Modal.module.css */
-
-.activeModal {
-  overflow-y: hidden; /* Disable scrolling */
-}
-
-.modal,
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
-
-.overlay {
-  background: rgba(0, 0, 0, 0.7); /* Darken the background */
-  backdrop-filter: blur(5px); /* Optional blur effect */
-  z-index: 999;
-}
-
-.modalContent {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #2c2f33; /* Darker background for modal content */
-  color: #ffffff; /* White text for contrast */
-  padding: 20px;
-  border-radius: 8px;
-  max-width: 600px;
-  width: 100%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  z-index: 1000;
-}
-
-h2 {
-  margin-bottom: 15px;
-  color: #ffffff; /* White text for the heading */
-}
-
-.btnModal {
-  padding: 10px 20px;
-  font-size: 18px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin: 20px;
-  display: block;
-}
-
-.btnModal:hover {
-  background-color: #0056b3;
-}
-
-.closeModal {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  padding: 5px 10px;
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.closeModal:hover {
-  background-color: #c82333;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-}
-
-.formGroup {
-  margin-bottom: 15px;
-}
-
-.formGroup label {
-  display: block;
-  margin-bottom: 5px;
-  color: #ffffff; /* White text for labels */
-}
-
-.formGroup input,
-.formGroup select,
-.formGroup textarea {
-  width: 100%;
-  padding: 8px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: #23272a; /* Darker input background */
-  color: #ffffff; /* White text inside the input fields */
-}
-
-.formGroup input::placeholder,
-.formGroup textarea::placeholder {
-  color: #888888; /* Slightly lighter color for placeholder text */
-}
-
-.formGroup input[type="checkbox"] {
-  width: auto;
-  margin-right: 10px;
-}
-
-.submitButton {
-  background-color: #28a745;
-  color: white;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.submitButton:hover {
-  background-color: #218838;
-}
Index: imaps-frontend/src/components/RoomTypeModal/RoomTypeModal.jsx
===================================================================
--- imaps-frontend/src/components/RoomTypeModal/RoomTypeModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,107 +1,0 @@
-import React, { useState, useEffect } from "react";
-import styles from "./RoomTypeModal.module.css";
-
-export default function RoomTypeModal(args) {
-  const [modal, setModal] = useState(false);
-  const [roomTypes, setRoomTypes] = useState([]);
-  const [formData, setFormData] = useState({
-    name: "",
-    type: "",
-    description: "",
-  });
-
-  const toggleModal = () => {
-    setModal(!modal);
-  };
-
-  // Add new room type to the list
-  const addRoomType = () => {
-    if (!formData.type || roomTypes.includes(formData.type)) return; // Prevent empty or duplicate room types
-    setRoomTypes((prevTypes) => [...prevTypes, formData.type]);
-    setFormData({ ...formData, type: "" }); // Reset type input after adding
-    args.map.addRoomType(formData.type);
-    console.log(args.map.roomTypes);
-  };
-
-  // Remove room type from the list
-  const removeRoomType = (typeToRemove) => {
-    setRoomTypes((prevTypes) => prevTypes.filter((type) => type !== typeToRemove));
-  };
-
-  // Handle form input changes
-  const handleInputChange = (e) => {
-    const { name, value } = e.target;
-    setFormData((prevData) => ({
-      ...prevData,
-      [name]: value,
-    }));
-  };
-
-  // Load room types from local storage on mount
-  // useEffect(() => {
-  //   //const storedRoomTypes = JSON.parse(localStorage.getItem("roomTypes")) || [];
-  //   if(args && args.map){
-  //     setRoomTypes(args.map.roomTypes);
-  //   }
-
-  // }, [args]);
-
-  // Save room types to local storage whenever they change
-  // useEffect(() => {
-  //   localStorage.setItem("roomTypes", JSON.stringify(roomTypes));
-  // }, [roomTypes]);
-
-  return (
-    <>
-      <button onClick={toggleModal} className={styles.btnModal}>
-        Room Types
-      </button>
-
-      {modal && (
-        <div className={styles.modal}>
-          <div onClick={toggleModal} className={styles.overlay}></div>
-          <div className={styles.modalContent}>
-            <h2>Manage Room Types</h2>
-
-            <form className={styles.form}>
-              <div className={styles.formGroup}>
-                <label htmlFor="type">Add New Room Type:</label>
-                <input
-                  type="text"
-                  id="type"
-                  name="type"
-                  value={formData.type}
-                  onChange={handleInputChange}
-                  placeholder="Enter a new room type (e.g., Office, Classroom)"
-                />
-                <button type="button" className={styles.addButton} onClick={addRoomType}>
-                  Add Type
-                </button>
-              </div>
-            </form>
-
-            <h3>Available Room Types:</h3>
-            <ul className={styles.roomTypeList}>
-              {roomTypes.length > 0 ? (
-                roomTypes.map((type, index) => (
-                  <li key={index} className={styles.roomTypeItem}>
-                    {type}
-                    <button className={styles.removeButton} onClick={() => removeRoomType(type)}>
-                      Remove
-                    </button>
-                  </li>
-                ))
-              ) : (
-                <li>No room types available</li>
-              )}
-            </ul>
-
-            <button className={styles.closeModal} onClick={toggleModal}>
-              CLOSE
-            </button>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
Index: imaps-frontend/src/components/RoomTypeModal/RoomTypeModal.module.css
===================================================================
--- imaps-frontend/src/components/RoomTypeModal/RoomTypeModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,167 +1,0 @@
-/* Active modal: Disable scrolling when the modal is open */
-.activeModal {
-  overflow-y: hidden; /* Disable scrolling */
-}
-
-/* Modal and overlay styles */
-.modal,
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
-
-/* Overlay: Dark background with optional blur */
-.overlay {
-  background: rgba(0, 0, 0, 0.7); /* Darken the background */
-  backdrop-filter: blur(5px); /* Optional blur effect */
-  z-index: 999; /* Ensure the overlay appears below the modal */
-}
-
-/* Modal content: Centered and styled */
-.modalContent {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #2c2f33; /* Darker background for modal content */
-  color: #ffffff; /* White text for contrast */
-  padding: 20px;
-  border-radius: 8px;
-  max-width: 600px;
-  width: 100%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  z-index: 1000; /* Ensure the modal appears above the overlay */
-}
-
-/* Modal heading */
-h2,
-h3 {
-  margin-bottom: 15px;
-  color: #ffffff; /* White text for the headings */
-}
-
-/* Button for opening the modal */
-.btnModal {
-  padding: 10px 20px;
-  font-size: 18px;
-  background-color: #aa5c5c;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin: 10px 0;
-  display: block;
-}
-
-.btnModal:hover {
-  background-color: #994f4f;
-}
-
-/* Close button inside the modal */
-.closeModal {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  padding: 5px 10px;
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.closeModal:hover {
-  background-color: #c82333;
-}
-
-/* Form styles */
-.form {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Form group: margin between form elements */
-.formGroup {
-  margin-bottom: 15px;
-}
-
-/* Form labels */
-.formGroup label {
-  display: block;
-  margin-bottom: 5px;
-  color: #ffffff; /* White text for labels */
-}
-
-/* Input, select, and textarea styles */
-.formGroup input,
-.formGroup select,
-.formGroup textarea {
-  width: 100%;
-  padding: 8px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: #23272a; /* Darker input background */
-  color: #ffffff; /* White text inside the input fields */
-}
-
-.formGroup input::placeholder,
-.formGroup textarea::placeholder {
-  color: #888888; /* Slightly lighter color for placeholder text */
-}
-
-/* Checkbox style adjustment */
-.formGroup input[type="checkbox"] {
-  width: auto;
-  margin-right: 10px;
-}
-
-/* Add button for adding room types */
-.addButton {
-  background-color: #28a745;
-  color: white;
-  padding: 8px 15px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin-top: 10px;
-}
-
-.addButton:hover {
-  background-color: #218838;
-}
-
-/* Dynamic room type list */
-.roomTypeList {
-  list-style-type: none;
-  padding: 0;
-  margin-top: 15px;
-}
-
-/* Individual room type item */
-.roomTypeItem {
-  background-color: #444;
-  padding: 8px;
-  margin-bottom: 5px;
-  color: white;
-  border-radius: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-/* Remove button */
-.removeButton {
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.removeButton:hover {
-  background-color: #c82333;
-}
Index: imaps-frontend/src/components/SaveMap/SaveMap.jsx
===================================================================
--- imaps-frontend/src/components/SaveMap/SaveMap.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/SaveMap/SaveMap.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -2,4 +2,5 @@
 import HttpService from '../../scripts/net/HttpService';
 import styles from './SaveMap.module.css';
+import triggerMapSave from "../../scripts/util/triggerMapSave.js";
 
 const SaveMap = ({submitHandler}) => {
@@ -8,5 +9,8 @@
     const handleSubmit = (event) => {
         event.preventDefault();
-        submitHandler(name);
+        // submitHandler();
+        // const mapSaveEvent = new CustomEvent("mapsave",{});
+        // window.dispatchEvent(mapSaveEvent)
+        triggerMapSave();
     };
 
@@ -15,16 +19,4 @@
         <div className={styles.saveMapContainer}>
             <form onSubmit={handleSubmit} className={styles.saveMapForm}>
-                <div>
-                    <label htmlFor="name">Map Name: </label>
-                    <input 
-                        type="text" 
-                        id="name" 
-                        value={name} 
-                        onChange={(e) => setName(e.target.value)} 
-                        placeholder="Enter map name" 
-                        required
-                        className={styles.saveMapInput}
-                    />
-                </div>
                 <div>
                     <button type="submit" className={styles.saveMapButton}>Save Map</button>
Index: imaps-frontend/src/components/SaveMap/SaveMap.module.css
===================================================================
--- imaps-frontend/src/components/SaveMap/SaveMap.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/SaveMap/SaveMap.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -21,16 +21,30 @@
 
 .saveMapButton {
-  background-color: #e67e22;
-  color: white;
+  width: 100%;
+  height: 50px;
+  background-color: #e67e22 !important;
+  color: #ffffff !important;
   border: none;
-  border-radius: 5px;
+  border-radius: 8px;
+  font-size: 20px;
+  font-weight: bold;
   cursor: pointer;
-  width: 8vw;
-  height: 2vw;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
+  appearance: none;
+  -webkit-appearance: none;
 }
 
 .saveMapButton:hover {
-  background-color: #b35418;
+  background-color: #d2691e !important;
+  transform: scale(1.05);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+.saveMapButton:active {
+  background-color: #b35418 !important;
   transform: scale(0.98);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
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;
-  }
-}
Index: imaps-frontend/src/components/SideBar/SideBar.jsx
===================================================================
--- imaps-frontend/src/components/SideBar/SideBar.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/SideBar/SideBar.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -24,8 +24,8 @@
             </li>
             <li>
-              <Link to="/Maps">Maps</Link>
+              <Link to="/Maps">Browse Maps</Link>
             </li>
             <li>
-              <Link to="/Maps/FinkiMaps/Draw">Draw</Link>
+              <Link to="/myMaps">My Maps</Link>
             </li>
           </ul>
Index: imaps-frontend/src/components/SideBar/SideBar.module.css
===================================================================
--- imaps-frontend/src/components/SideBar/SideBar.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/SideBar/SideBar.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -90,7 +90,7 @@
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   background-color: rgba(0, 0, 0, 0.4);
-  z-index: 900;
+  z-index: 100;
 }
Index: imaps-frontend/src/components/Toast/Toast.jsx
===================================================================
--- imaps-frontend/src/components/Toast/Toast.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Toast/Toast.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./Toast.module.css";
+
+const Toast = ({ message, type, onClose }) => {
+    return (
+        <div
+            className={`${styles.toast} ${type === 1 ? styles.success : styles.error}`}
+            onClick={onClose}
+        >
+            {message}
+        </div>
+    );
+};
+
+
+
+export default Toast;
Index: imaps-frontend/src/components/Toast/Toast.module.css
===================================================================
--- imaps-frontend/src/components/Toast/Toast.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Toast/Toast.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,25 @@
+.toast {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    animation: fadeInOut 3s ease-in-out;
+    color: white;
+    font-size: 16px;
+}
+
+.toast.success {
+    background-color: #4caf50; /* Green for success */
+}
+
+.toast.error {
+    background-color: #f44336; /* Red for error */
+}
+
+@keyframes fadeInOut {
+    0%, 100% { opacity: 0; }
+    10%, 90% { opacity: 1; }
+}
