Index: imaps-frontend/src/components/InfoPinModal/InfoPinModal.jsx
===================================================================
--- imaps-frontend/src/components/InfoPinModal/InfoPinModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/InfoPinModal/InfoPinModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,204 @@
+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)
+++ imaps-frontend/src/components/InfoPinModal/InfoPinModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -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;
+}
