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