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