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