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>
+    )
+}
