Index: imaps-frontend/src/components/PublishForm/PublishForm.jsx
===================================================================
--- imaps-frontend/src/components/PublishForm/PublishForm.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/PublishForm/PublishForm.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import styles from './PublishForm.module.css';
+
+const PublishForm = ({ isAdmin = false, formData, onSubmit, onCancel, onApprove, onDeny }) => {
+    const [state, setState] = useState(isAdmin ? 'viewing' : 'writing');
+    const [form, setForm] = useState(
+        formData || {
+            id: -1,
+            name: '',
+            lastName: '',
+            mapName: '',
+            mapType: 'Other',
+            googleMapsUrl: '',
+        }
+    );
+    const [errors, setErrors] = useState({});
+
+    const mapTypeOptions = ['Hospital', 'Faculty', 'House', 'Other'];
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setForm((prev) => ({ ...prev, [name]: value }));
+        setErrors((prev) => ({ ...prev, [name]: '' }));
+    };
+
+    const validateForm = () => {
+        const newErrors = {};
+        if (!form.name.trim()) newErrors.name = 'Name is required.';
+        if (!form.lastName.trim()) newErrors.lastName = 'Last Name is required.';
+        if (!form.googleMapsUrl.trim()) newErrors.googleMapsUrl = 'Google Maps URL is required.';
+        return newErrors;
+    };
+
+    const handleSubmit = () => {
+        const formErrors = validateForm();
+        if (Object.keys(formErrors).length > 0) {
+            setErrors(formErrors);
+            return;
+        }
+
+        if (state === 'writing') {
+            onSubmit(form);
+        }
+    };
+
+    return (
+        <>
+            <div className={styles.modalOverlay}></div>
+            <div className={styles.modal}>
+                <div className={styles.modalContent}>
+                    <h2>{state === 'writing' ? 'Publish Map' : 'View Map Details'}</h2>
+                    {state === 'writing' ? (
+                        <form>
+                            <div>
+                                <label>Name:</label>
+                                <input
+                                    type="text"
+                                    name="name"
+                                    value={form.name}
+                                    onChange={handleChange}
+                                />
+                                {errors.name && <p className={styles.error}>{errors.name}</p>}
+                            </div>
+                            <div>
+                                <label>Last Name:</label>
+                                <input
+                                    type="text"
+                                    name="lastName"
+                                    value={form.lastName}
+                                    onChange={handleChange}
+                                />
+                                {errors.lastName && <p className={styles.error}>{errors.lastName}</p>}
+                            </div>
+                            <div>
+                                <label>Google Maps URL:</label>
+                                <input
+                                    type="url"
+                                    name="googleMapsUrl"
+                                    value={form.googleMapsUrl}
+                                    onChange={handleChange}
+                                />
+                                {errors.googleMapsUrl && (
+                                    <p className={styles.error}>{errors.googleMapsUrl}</p>
+                                )}
+                            </div>
+                            <div>
+                                <label>Type of Map:</label>
+                                <select
+                                    name="mapType"
+                                    value={form.mapType}
+                                    onChange={handleChange}
+                                >
+                                    {mapTypeOptions.map((option) => (
+                                        <option key={option} value={option}>
+                                            {option}
+                                        </option>
+                                    ))}
+                                </select>
+                            </div>
+                            <div className={styles.buttonGroup}>
+                                <button type="button" onClick={handleSubmit}>
+                                    Submit
+                                </button>
+                                <button
+                                    type="button"
+                                    className={styles.cancelButton}
+                                    onClick={onCancel}
+                                >
+                                    Cancel
+                                </button>
+                            </div>
+                        </form>
+                    ) : (
+                        <div>
+                            <p><strong>Map Name:</strong> {form.mapName}</p>
+                            <p><strong>Name:</strong> {form.name}</p>
+                            <p><strong>Last Name:</strong> {form.lastName}</p>
+                            <p>
+                                <strong>Google Maps URL:</strong>{' '}
+                                <a
+                                    href={form.googleMapsUrl}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    {form.googleMapsUrl}
+                                </a>
+                            </p>
+                            <p><strong>Type of Map:</strong> {form.mapType}</p>
+                            <div className={styles.buttonGroup}>
+                                <button
+                                    className={styles.cancelButton}
+                                    onClick={onCancel}
+                                >
+                                    Cancel
+                                </button>
+                                <button
+                                    className={styles.approveButton}
+                                    onClick={() => onApprove(form.id,form.mapName)}
+                                >
+                                    Approve
+                                </button>
+                                <button
+                                    className={styles.denyButton}
+                                    onClick={() => onDeny(form.id,form.mapName,"Reason")}
+                                >
+                                    Deny
+                                </button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default PublishForm;
Index: imaps-frontend/src/components/PublishForm/PublishForm.module.css
===================================================================
--- imaps-frontend/src/components/PublishForm/PublishForm.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/PublishForm/PublishForm.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,178 @@
+/* Modal overlay for blur and dark background */
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6); /* Dark transparent background */
+    backdrop-filter: blur(8px); /* Stronger blur effect */
+    z-index: 999; /* Behind the modal */
+}
+
+/* Modal styles */
+.modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+    width: 420px;
+    max-width: 90%;
+    z-index: 1000; /* Above the overlay */
+    padding: 30px;
+    animation: fadeIn 0.3s ease;
+}
+
+/* Modal fade-in animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -55%);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.modalContent {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+h2 {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #333333;
+    text-align: center;
+    width: 100%;
+}
+
+/* Input and form styles */
+form {
+    width: 100%;
+}
+
+label {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 5px;
+    display: block;
+    color: #555555;
+}
+
+input, select {
+    width: calc(100% - 10px);
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #cccccc;
+    border-radius: 6px;
+    font-size: 1rem;
+}
+
+/* Button styles */
+button {
+    background-color: #007bff;
+    color: #ffffff;
+    border: none;
+    border-radius: 6px;
+    padding: 12px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s;
+}
+
+button:hover {
+    background-color: #0056b3;
+    transform: scale(1.05); /* Slight scaling effect */
+}
+
+.cancelButton {
+    background-color: #dc3545;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 12px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s;
+}
+
+.cancelButton:hover {
+    background-color: #a71d2a;
+    transform: scale(1.05); /* Slight scaling effect */
+}
+
+.approveButton {
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 12px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s;
+}
+
+.approveButton:hover {
+    background-color: #218838;
+    transform: scale(1.05); /* Slight scaling effect */
+}
+
+.denyButton {
+    background-color: #ffc107;
+    color: #212529;
+    border: none;
+    border-radius: 6px;
+    padding: 12px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s;
+}
+
+.denyButton:hover {
+    background-color: #e0a800;
+    transform: scale(1.05); /* Slight scaling effect */
+}
+
+/* Button group */
+.buttonGroup {
+    display: flex;
+    justify-content: space-between;
+    gap: 15px;
+    margin-top: 20px;
+}
+
+.error {
+    color: #ff0000;
+    font-size: 0.85rem;
+    margin-top: -10px;
+    margin-bottom: 10px;
+}
+
+p {
+    font-size: 1rem;
+    margin: 10px 0;
+    line-height: 1.6;
+}
+
+a {
+    color: #007bff;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: #0056b3;
+}
+
+@media (max-width: 480px) {
+    .modal {
+        width: 90%;
+    }
+}
