Index: imaps-frontend/src/components/MapInfoModal/MapInfoModal.jsx
===================================================================
--- imaps-frontend/src/components/MapInfoModal/MapInfoModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/MapInfoModal/MapInfoModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,170 @@
+import React, {useEffect, useState} from "react";
+import styles from "./MapInfoModal.module.css";
+import {json, useNavigate} from "react-router-dom";
+import edit_icon from "../../assets/edit_icon_black.png";
+import PublishForm from "../PublishForm/PublishForm.jsx";
+import HttpService from "../../scripts/net/HttpService.js";
+import config from "../../scripts/net/netconfig.js";
+import {useAppContext} from "../AppContext/AppContext.jsx";
+
+export default function MapInfoModal({isOpen, onClose, map, onDelete, onUpdate, onPublish, published=false}) {
+    const [isEditPopupOpen, setEditPopupOpen] = useState(false);
+    const [editedName, setEditedName] = useState(map?.mapName || "");
+    const [editedGmapsUrl, setEditedGmapsUrl] = useState(map?.gmaps_url || "");
+    const [publishFormOpen,setPublishFormOpen] = useState(false)
+    const navigate = useNavigate();
+    const[loadedFormData,setLoadedFormData] = useState(null)
+
+
+    useEffect(() => {
+        console.log("GMAPS: " + JSON.stringify(map))
+    }, []);
+
+    const {username} = useAppContext();
+
+    if (!isOpen || !map) return null;
+
+    const handleView = () => {
+        navigate(`/myMaps/${map.mapName}/View`)
+    };
+
+    const handleEdit = () => {
+        navigate(`/myMaps/${map.mapName}/Draw`)
+    };
+
+    const handleDelete = () => {
+        if (window.confirm(`Are you sure you want to delete the map "${map.mapName}"?`)) {
+            onDelete(map.mapName);
+            onClose();
+        }
+    };
+
+
+    const openEditPopup = () => {
+        setEditPopupOpen(true);
+    };
+
+    const closeEditPopup = () => {
+        setEditPopupOpen(false);
+    };
+
+    const handleEditSubmit = async () => {
+        const updatedMap = {
+            ...map,
+            mapName: editedName,
+            gmaps_url: editedGmapsUrl,
+        };
+
+        try {
+            //await onUpdate(updatedMap);
+            setEditPopupOpen(false);
+        } catch (error) {
+            console.error("Error updating map:", error);
+        }
+    };
+
+    const openPublishModal = async () => {
+        const httpService = new HttpService(true);
+        const respForm = await httpService.get(`${config.my_maps.publish_get}?mapName=${map.mapName}`)
+        setLoadedFormData(respForm);
+        setPublishFormOpen(true)
+    };
+
+    const sendPublishRequest = async (formData) => {
+        const httpService = new HttpService(true);
+        formData.mapName = map.mapName;
+        console.log("FORMDATA: "+JSON.stringify(formData))
+        await httpService.post(`${config.my_maps.publish}?username=${username}`,formData);
+        setPublishFormOpen(false)
+        onPublish()
+    }
+
+    return (
+        <div className={styles.modalOverlay} onClick={onClose}>
+            <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+                {publishFormOpen && (
+                    <PublishForm mapName={map.mapName} formData={loadedFormData} onSubmit={sendPublishRequest} onCancel={() => setPublishFormOpen(false)}/>
+                )}
+
+                <img src={map.image_url} alt="Map Thumbnail" className={styles.mapImage}/>
+                <h2 className={styles.title}>
+                    {map.mapName}
+                    <img
+                        src={edit_icon}
+                        alt="Edit"
+                        className={styles.editIcon}
+                        onClick={openEditPopup}
+                    />
+                </h2>
+                <p><strong>Status:</strong> {map.status}</p>
+
+                <p><strong>Created At:</strong> {new Date(map.created_at).toLocaleString()}</p>
+                <p><strong>Modified At:</strong> {new Date(map.modified_at).toLocaleString()}</p>
+                <p><strong>Published
+                    At:</strong> {map.published_at ? new Date(map.published_at).toLocaleString() : "Not published yet"}
+                </p>
+                <p>
+                    <strong>Google Maps URL:</strong>
+                    <a href={map.gMapsUrl}  rel="noopener noreferrer">
+                        Open in Google Maps
+                    </a>
+                </p>
+
+                <div className={styles.buttonContainer}>
+                    <button className={styles.viewButton} onClick={handleView}>
+                        View
+                    </button>
+                    <button className={styles.editButton} onClick={handleEdit}>
+                        Edit
+                    </button>
+                    <button className={styles.deleteButton} onClick={handleDelete}>
+                        Delete
+                    </button>
+                    {!map.is_published && !published && (
+                        <button className={styles.publishButton} onClick={openPublishModal}>
+                            Publish
+                        </button>
+                    )}
+                </div>
+                <button className={styles.closeButton} onClick={onClose}>
+                    Close
+                </button>
+
+                {isEditPopupOpen && (
+                    <div className={styles.editPopupOverlay} onClick={closeEditPopup}>
+                        <div
+                            className={styles.editPopupContent}
+                            onClick={(e) => e.stopPropagation()}
+                        >
+                            <h3 className={styles.title}>Edit Map Details</h3>
+                            <div className={styles.editField}>
+                                <label>Map Name:</label>
+                                <input
+                                    type="text"
+                                    value={editedName}
+                                    onChange={(e) => setEditedName(e.target.value)}
+                                />
+                            </div>
+                            <div className={styles.editField}>
+                                <label>Google Maps URL:</label>
+                                <input
+                                    type="text"
+                                    value={editedGmapsUrl}
+                                    onChange={(e) => setEditedGmapsUrl(e.target.value)}
+                                />
+                            </div>
+                            <div className={styles.editPopupButtons}>
+                                <button className={styles.submitButton} onClick={handleEditSubmit}>
+                                    Submit
+                                </button>
+                                <button className={styles.cancelButton} onClick={closeEditPopup}>
+                                    Cancel
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
Index: imaps-frontend/src/components/MapInfoModal/MapInfoModal.module.css
===================================================================
--- imaps-frontend/src/components/MapInfoModal/MapInfoModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/MapInfoModal/MapInfoModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,235 @@
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    backdrop-filter: blur(5px);
+}
+
+.modalContent {
+    background-color: white;
+    padding: 20px;
+    border-radius: 12px;
+    width: 400px;
+    max-width: 90%;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.mapImage {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin-bottom: 15px;
+}
+
+.title {
+    font-size: 1.5rem;
+    color: #333;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+}
+
+p {
+    margin: 5px 0;
+    font-size: 0.9rem;
+    color: #555;
+}
+
+a {
+    color: #1e90ff;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.buttonContainer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    gap: 10px;
+}
+
+button {
+    padding: 10px 15px;
+    font-size: 0.9rem;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.2s;
+}
+
+button:active {
+    transform: scale(0.95);
+}
+
+button:disabled {
+    background-color: #d3d3d3;
+    color: #888;
+    cursor: not-allowed;
+}
+
+.viewButton {
+    background-color: #1e90ff;
+    color: white;
+}
+
+.viewButton:hover {
+    background-color: #155a8a;
+}
+
+button:disabled.viewButton {
+    background-color: #d3d3d3;
+    color: #888;
+}
+
+.editButton {
+    background-color: #ffa500;
+    color: white;
+}
+
+.editButton:hover {
+    background-color: #cc8400;
+}
+
+button:disabled.editButton {
+    background-color: #d3d3d3;
+    color: #888;
+}
+
+.deleteButton {
+    background-color: #ff4c4c;
+    color: white;
+}
+
+.deleteButton:hover {
+    background-color: #cc0000;
+}
+
+.closeButton {
+    margin-top: 20px;
+    padding: 10px 15px;
+    background-color: #f5f5f5;
+    color: #333;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.closeButton:hover {
+    background-color: #e0e0e0;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+.editPopupOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1100;
+    backdrop-filter: blur(5px);
+}
+
+.editPopupContent {
+    background-color: white;
+    padding: 20px;
+    border-radius: 12px;
+    width: 400px;
+    max-width: 90%;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.editField {
+    margin: 15px 0;
+    text-align: left;
+}
+
+.editField label {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 0.9rem;
+    color: #555;
+}
+
+.editField input {
+    width: 100%;
+    padding: 10px;
+    font-size: 0.9rem;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+.editPopupButtons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    gap: 10px;
+}
+
+.submitButton {
+    background-color: #4caf50;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.submitButton:hover {
+    background-color: #45a049;
+}
+
+.cancelButton {
+    background-color: #f44336;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.cancelButton:hover {
+    background-color: #d32f2f;
+}
+
+.editIcon {
+    width: 20px;
+    height: 20px;
+    margin-left: 10px;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.editIcon:hover {
+    transform: scale(1.1);
+}
