Index: imaps-frontend/src/pages/MyMaps/CreateMaps.module.css
===================================================================
--- imaps-frontend/src/pages/MyMaps/CreateMaps.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/MyMaps/CreateMaps.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,142 @@
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: center;
+  font-family: "Roboto", sans-serif;
+  overflow: hidden;
+}
+
+* {
+  font-family: "Exo", sans-serif;
+}
+
+.mapTitle {
+  color: #2c2f33;
+  text-transform: uppercase;
+}
+
+h1 {
+  font-size: 2.5rem;
+  color: black;
+  margin-bottom: 20px;
+}
+
+.categories {
+  margin-bottom: 20px;
+  text-align: start;
+  color: #333;
+}
+
+.actionButtons {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.createMapsButton {
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #f1153b;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.createMapsButton:hover {
+  background-color: #b70526;
+  transform: translateY(-2px);
+}
+
+.searchBar {
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.searchBar input {
+  width: 300px;
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  outline: none;
+  transition: all 0.3s ease;
+}
+
+.searchBar input:focus {
+  border-color: #1e90ff;
+  box-shadow: 0 0 8px rgba(30, 144, 255, 0.5);
+}
+
+.mapsContainer {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  margin-top: 30px;
+}
+
+.mapColumn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center items horizontally */
+  justify-content: flex-start; /* Ensure tiles stack from the top */
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.tile {
+  width: 90%; /* Adjust width to leave space around the tile */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #2c3e50;
+  background-color: #ffffff;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
+  transition: all 300ms ease-in-out;
+  padding: 10px;
+  border: 2px solid #232323;
+  border-radius: 12px;
+  margin-bottom: 20px;
+}
+
+.tile:hover {
+  transform: scale(1.05);
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 18px;
+  background: #f1153b;
+}
+
+.imgStyle {
+  width: 80%;
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.dragging {
+  background-color: #1e90ff;
+  transform: scale(1.06) rotate(3deg);
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px,
+  rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px,
+  rgba(0, 0, 0, 0.09) 0px -3px 5px;
+}
+
+@media (max-width: 768px) {
+  .mapsContainer {
+    flex-direction: column;
+  }
+
+  .mapColumn {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+
+  .searchBar input {
+    width: 100%;
+  }
+}
Index: imaps-frontend/src/pages/MyMaps/MyMaps.jsx
===================================================================
--- imaps-frontend/src/pages/MyMaps/MyMaps.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/MyMaps/MyMaps.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,241 @@
+import React, {useEffect, useState} from "react";
+import styles from "./CreateMaps.module.css";
+import {TilesContainer} from "react-tiles-dnd";
+import MapInfoModal from "../../components/MapInfoModal/MapInfoModal.jsx";
+import CreateMapModal from "../../components/Modals/CreateMapModal/CreateMapModal.jsx";
+import HttpService from "../../scripts/net/HttpService.js";
+import card from "../../assets/card-map.png";
+import Logo from "../../components/Logo/Logo.jsx";
+import Profile from "../../components/Profile/Profile.jsx";
+import {useAppContext} from "../../components/AppContext/AppContext.jsx";
+import config from "../../scripts/net/netconfig.js";
+import {element} from "prop-types";
+import Toast from "../../components/Toast/Toast.jsx";
+
+const renderTile = ({data, isDragging}, openMapInfo) => (
+    <div style={{padding: "1rem", width: "100%"}}>
+        <div
+            className={`${styles.tile} ${isDragging ? styles.dragging : ""}`}
+            style={{width: "100%", height: "100%"}}
+            onClick={() => openMapInfo(data)}
+        >
+            <img src={card} className={styles.imgStyle} alt="Map Thumbnail"/>
+            <div className={styles.mapTitle}>{data.mapName}</div>
+        </div>
+    </div>
+);
+
+const tileSize = (tile) => ({
+    colSpan: tile.cols,
+    rowSpan: tile.rows,
+});
+
+export default function MyMaps() {
+    const [tiles, setTiles] = useState([]);
+    const [allTiles, setAllTiles] = useState([]);
+    const {username} = useAppContext();
+    const [selectedMap, setSelectedMap] = useState(null);
+    const [isMapInfoModalOpen, setIsMapInfoModalOpen] = useState(false);
+    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+    const [publicMaps, setPublicMaps] = useState([]);
+    const [privateMaps, setPrivateMaps] = useState([]);
+    const [pendingMaps, setPendingMaps] = useState([]);
+    const [toastMessage, setToastMessage] = useState(null);
+    const [toastType, setToastType] = useState(1);
+
+    const openMapInfoModal = (map) => {
+        setSelectedMap(map);
+        setIsMapInfoModalOpen(true);
+    };
+
+    const closeMapInfoModal = () => {
+        setIsMapInfoModalOpen(false);
+        setSelectedMap(null);
+    };
+
+    const openCreateModal = () => {
+        setIsCreateModalOpen(true);
+    };
+
+    const closeCreateModal = () => {
+        setIsCreateModalOpen(false);
+    };
+
+    const showToast = (message, type = 1) => {
+        setToastMessage(message);
+        setToastType(type);
+        setTimeout(() => setToastMessage(null), 3000); // Automatically hide the toast after 3 seconds
+    };
+
+
+    const handleUpdate = async (updatedMap) => {
+        // Placeholder for map update logic
+    };
+
+    const deleteMap = (mapName) => {
+        const httpService = new HttpService();
+        httpService.setAuthenticated();
+        const url = `${config.my_maps.delete}?mapName=${mapName}&username=${username}`;
+
+        httpService
+            .delete(url)
+            .then(() => {
+                setTiles((prevTiles) => prevTiles.filter((tile) => tile.mapName !== mapName));
+                setAllTiles((prevTiles) => prevTiles.filter((tile) => tile.mapName !== mapName));
+                showToast("Map deleted", 1)
+            })
+            .catch((error) => {
+                const errorMessage = error.response?.data?.error || error.message || "Unknown error";
+                // alert(`Error deleting the map: ${errorMessage}`);
+                showToast(`Error deleting the map: ${errorMessage}`, 0)
+            });
+    };
+
+    const addMap = (mapDetails) => {
+        const httpService = new HttpService();
+        httpService.setAuthenticated();
+
+        httpService
+            .put(`${config.my_maps.add}?username=${username}`, mapDetails)
+            .then((respMap) => {
+                console.log("RESP NEW MAP: " + respMap)
+                const mapTile = {
+                    mapName: respMap.mapName,
+                    cols: 1,
+                    rows: 1,
+                    status: respMap.mapStatus,
+                    created_at: respMap.createdAt,
+                    modified_at: respMap.modifiedAt,
+                    published_at: respMap.published_at,
+                    gmaps_url: respMap.gmaps_url,
+                    image_url: card,
+                    is_published: respMap.is_published,
+                };
+
+                setAllTiles((prevTiles) => [...prevTiles, mapTile]);
+                setTiles((prevTiles) => [...prevTiles, mapTile]);
+                showToast("Map added successfully!");
+
+
+            })
+            .catch((error) => {
+                showToast("Map name already taken", 0)
+            });
+    };
+
+    useEffect(() => {
+        const loadMaps = async () => {
+            const httpService = new HttpService();
+            httpService.setAuthenticated();
+
+            const respMaps = await httpService.get(`${config.my_maps.display}?username=${username}`);
+
+            const mapTiles = respMaps.map((elem) => ({
+                mapName: elem.mapName,
+                cols: 1,
+                rows: 1,
+                status: elem.mapStatus,
+                created_at: elem.createdAt,
+                modified_at: elem.modifiedAt,
+                published_at: elem.published_at,
+                gmaps_url: elem.gMapsUrl,
+                image_url: card,
+                numFavourites: elem.numFavourites,
+            }));
+
+
+            setTiles(mapTiles);
+            setAllTiles(mapTiles);
+        };
+        loadMaps();
+    }, [username]);
+
+    useEffect(() => {
+        setPublicMaps(tiles.filter((tile) => tile.status === "PUBLIC"));
+        setPrivateMaps(tiles.filter((tile) => tile.status === "PRIVATE"));
+        setPendingMaps(tiles.filter((tile) => tile.status === "INVALID"));
+    }, [tiles]);
+
+    const handleSearch = (e) => {
+        const query = e.target.value.toLowerCase();
+        setTiles(allTiles.filter((tile) => tile.mapName.toLowerCase().includes(query)));
+    };
+
+    return (
+        <div className={styles.container}>
+            <Logo/>
+            <Profile/>
+            <h1>Your Maps</h1>
+
+            <div className={styles.actionButtons}>
+                <button className={styles.createMapsButton} onClick={openCreateModal}>
+                    Create Map
+                </button>
+            </div>
+
+            <div className={styles.searchBar}>
+                <input type="text" placeholder="Search for maps..." onChange={handleSearch}/>
+            </div>
+
+            <div className={styles.mapsContainer}>
+                <div className={styles.mapColumn}>
+                    <h3 className={styles.categories}>Public Maps:</h3>
+                    <hr/>
+                    <TilesContainer
+                        data={publicMaps}
+                        renderTile={(tileProps) => renderTile(tileProps, openMapInfoModal)}
+                        tileSize={tileSize}
+                        forceTileWidth={150}
+                        forceTileHeight={170}
+                    />
+                </div>
+
+                <div className={styles.mapColumn}>
+                    <h3 className={styles.categories}>Private Maps:</h3>
+                    <hr/>
+                    <TilesContainer
+                        data={privateMaps}
+                        renderTile={(tileProps) => renderTile(tileProps, openMapInfoModal)}
+                        tileSize={tileSize}
+                        forceTileWidth={150}
+                        forceTileHeight={170}
+                    />
+                </div>
+
+                <div className={styles.mapColumn}>
+                    <h3 className={styles.categories}>Pending Approval:</h3>
+                    <hr/>
+                    <TilesContainer
+                        data={pendingMaps}
+                        renderTile={(tileProps) => renderTile(tileProps, openMapInfoModal)}
+                        tileSize={tileSize}
+                        forceTileWidth={150}
+                        forceTileHeight={170}
+                    />
+                </div>
+            </div>
+
+            <MapInfoModal
+                isOpen={isMapInfoModalOpen}
+                onClose={closeMapInfoModal}
+                map={selectedMap}
+                onDelete={deleteMap}
+                onUpdate={handleUpdate}
+                onPublish={() => {
+                    showToast(`Map ${selectedMap.mapName} published successfully!`);
+                    setPrivateMaps((prevMaps) => prevMaps.filter(m => m.mapName !== selectedMap.mapName))
+                    setPendingMaps((prevMaps) => [...prevMaps,allTiles.find(m => m.mapName = selectedMap.mapName)])
+                    closeMapInfoModal()
+                }}
+            />
+
+            <CreateMapModal
+                isOpen={isCreateModalOpen}
+                onClose={closeCreateModal}
+                addMap={addMap}
+            />
+
+            {toastMessage && <Toast message={toastMessage} type={toastType} onClose={() => setToastMessage(null)}/>}
+        </div>
+    );
+}
