Index: imaps-frontend/src/components/RoomModal/RoomModal.jsx
===================================================================
--- imaps-frontend/src/components/RoomModal/RoomModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/RoomModal/RoomModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from "react";
+import styles from "./RoomModal.module.css";
+import { Ring } from "konva/lib/shapes/Ring";
+
+export default function RoomModal(props) {
+  const [modal, setModal] = useState(false);
+  const [room, setRoom] = useState(null);
+  const [formData, setFormData] = useState({
+    name: "",
+    type: "",
+    description: "",
+  });
+  const [roomTypes, setRoomTypes] = useState([]);
+
+  const toggleModal = () => {
+    if(modal) {
+      room.info = formData;
+      props.map.updateRoomNames();
+    }
+    setModal(!modal);
+  };
+
+  const saveDetails = () => {
+    if (room) {
+      room.info = formData;
+      toggleModal();
+      console.log(room.info);
+    }
+  };
+  // impl da sa gledat dali ti e zacuvana formava
+
+  const handleInputChange = (e) => {
+    console.log(room.info)
+    const { name, value, type, checked } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: type === "checkbox" ? checked : value,
+    }));
+    room.info = formData;
+  };
+
+  useEffect(() => {
+    const openModalHandler = (event) => {
+      const roomObj = event.detail.room;
+      console.log(roomObj, "ROOMOBJ OTV")
+      setRoom(roomObj);
+      setFormData({
+        name: roomObj.info.name,
+        type: roomObj.info.type,
+        description: roomObj.info.description,
+      });
+      setRoomTypes(event.detail.map.getRoomTypes());
+      toggleModal(true);
+    };
+
+    window.addEventListener("openRoomModalEvent", openModalHandler);
+
+    return () => {
+      window.removeEventListener("openRoomModalEvent", openModalHandler);
+    };
+  }, []);
+
+  if (modal) {
+    document.body.classList.add(styles.activeModal);
+  } else {
+    document.body.classList.remove(styles.activeModal);
+  }
+
+  return (
+    <>
+      {/* <button onClick={toggleModal} className={styles.btnModal}>
+        RoomModal
+      </button> */}
+
+      {modal && (
+        <div className={styles.modal}>
+          <div onClick={toggleModal} className={styles.overlay}></div>
+          <div className={styles.modalContent}>
+            <h2>Enter Room 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}
+                  required
+                />
+              </div>
+              <div className={styles.formGroup}>
+                <label htmlFor="type">Type:</label>
+                <select id="type" name="type" onChange={handleInputChange} value={formData.type} required>
+                  <option value="">Select Room Type</option>
+                  {roomTypes.map((type, index) => (
+                    <option key={index} value={type}>
+                      {type}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className={styles.formGroup}>
+                <label htmlFor="description">Description:</label>
+                <textarea
+                  id="description"
+                  name="description"
+                  value={formData.description}
+                  onChange={handleInputChange}
+                  rows="3"
+                />
+              </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/RoomModal/RoomModal.module.css
===================================================================
--- imaps-frontend/src/components/RoomModal/RoomModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/RoomModal/RoomModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -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;
+}
