Index: imaps-frontend/src/components/MapTemplateSelector/LoadMap.jsx
===================================================================
--- imaps-frontend/src/components/MapTemplateSelector/LoadMap.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/MapTemplateSelector/LoadMap.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from "react";
+import styles from "./LoadMap.module.css";
+import HttpService from "../../scripts/net/HttpService";
+
+const MapTemplateSelector = ({ loadHandler }) => {
+  const [templates, setTemplates] = useState([]);
+  const [selectedTemplate, setSelectedTemplate] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchTemplates = async () => {
+      const httpService = new HttpService("http://localhost:8080/api/protected", true);
+      try {
+        const response = await httpService.get("/maps");
+        setTemplates(response);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching templates:", error);
+        setLoading(false);
+      }
+    };
+
+    fetchTemplates();
+  }, []);
+
+  const handleSelect = async (template) => {
+    setSelectedTemplate(template);
+    console.log("Selected template:", template);
+    const httpService = new HttpService("http://localhost:8080/api/protected", true);
+    const response = await httpService.get(`/maps/load?mapName=${template.name}`);
+    console.log("LOAD TEMPLATE: ", response);
+
+    const data = response.map.mapData.textData;
+    loadHandler(data);
+  };
+
+  if (loading) {
+    return <div>Loading map templates...</div>;
+  }
+
+  return (
+    <div className={styles.mapTemplateSelector}>
+      <p>Templates</p>
+      {templates.length > 0 ? (
+        <ul className={styles.templateList}>
+          {templates.map((template) => (
+            <li key={template.id}>
+              <button onClick={() => handleSelect(template)} className={styles.mapTemplateButton}>
+                {template.name}
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p>No map templates available.</p>
+      )}
+      {selectedTemplate && (
+        <div className={styles.selectedTemplate}>
+          <h3 className={styles.text}>Loaded Template:</h3>
+          <p className={styles.text}>{selectedTemplate.name}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MapTemplateSelector;
Index: imaps-frontend/src/components/MapTemplateSelector/LoadMap.module.css
===================================================================
--- imaps-frontend/src/components/MapTemplateSelector/LoadMap.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/MapTemplateSelector/LoadMap.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,51 @@
+.mapTemplateSelector {
+   
+  }
+  
+  
+  .templateList {
+    list-style-type: none;
+    padding: 0;
+     display: grid;
+    grid-template-columns: repeat(2, 7vh); /* Defines responsive columns */
+    gap: 5px;
+    margin: 20px 0;
+  }
+  
+  .templateListItem {
+    /* display: flex;
+    justify-content: center; */
+    width: 80%;
+  }
+  
+  .mapTemplateButton {
+    display: flex; /* Enable flexbox for the button */
+    justify-content: center; /* Center text horizontally */
+    align-items: center; /* Center text vertically */
+    width: 100%; /* Full width of the parent container */
+    padding: 10px;
+    background-color: #804047;
+    border: 2px solid beige;
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 70%; /* Adjust font size as needed */
+    white-space: nowrap; /* Prevent text wrapping */
+    overflow: hidden; /* Hide any overflow text */
+    text-overflow: ellipsis; /* Show ellipsis for overflow text */
+}
+
+  
+  .mapTemplateButton:hover {
+    background-color: beige;
+  }
+  .text{
+    font-size: medium;
+    color: #804047;
+  }
+  
+  .selectedTemplate {
+    margin-top: 10px;
+    padding: 10px;
+    text-align: center;
+  }
+  
