diff --git a/transport_accessibility/pt_map/static/pt_map/shapes_on_map.js b/transport_accessibility/pt_map/static/pt_map/shapes_on_map.js
index 2e6c3f1..fe5336c 100644
--- a/transport_accessibility/pt_map/static/pt_map/shapes_on_map.js
+++ b/transport_accessibility/pt_map/static/pt_map/shapes_on_map.js
@@ -59,7 +59,9 @@ function highlightShapes(shape_ids, type) {
 
     if (currentShapeIDs["stops"].length > 0) {
         for (const id of currentShapeIDs["stops"]) {
-            if (shapes["stops"][id] && shapes[id]["marker"]) {
+            console.log("stop id: ", id);
+            console.log("shapes[id]: ", shapes[id]);
+            if (shapes["stops"][id] && shapes["stops"][id]["marker"]) {
                 shapes["stops"][id]["marker"].setStyle({ color: 'blue' });
             }
         }
@@ -77,8 +79,8 @@ function highlightShapes(shape_ids, type) {
     if (type == "stops") {
         for (const id of shape_ids) {
             // Highlight the clicked polyline
-            if (shapes[type][id] && shapes[type][id]["marker"]) {
-                shapes[type][id]["marker"].setStyle({ color: 'red' }).bringToFront();
+            if (shapes["stops"][id] && shapes["stops"][id]["marker"]) {
+                shapes["stops"][id]["marker"].setStyle({ color: 'red' }).bringToFront();
             }
         }
     }
diff --git a/transport_accessibility/pt_map/static/pt_map/sidebar.js b/transport_accessibility/pt_map/static/pt_map/sidebar.js
index 8c0af23..999dde6 100644
--- a/transport_accessibility/pt_map/static/pt_map/sidebar.js
+++ b/transport_accessibility/pt_map/static/pt_map/sidebar.js
@@ -161,8 +161,165 @@ function showTrips(chosenRouteId) {
     $('#tripsModal').modal('show');
 }
 
+function addNewStop() {
+    // Create polyline and add to map
+    //addClickableShape (latlngs, shape_id);
+    console.log("Function addStop not defined yet.");
+}
+
 function addNewShape() {
-    console.log("Function addNewShape() not defined.");
+    shapeStops = [];
+    cancelShapeEdit();
+
+    // Create a container div for the buttons
+    const buttonContainer = document.createElement('div');
+    buttonContainer.className = 'button-container mt-3 p-3 border rounded';
+
+    // Create Toggle OSM router machine button
+    const editButton = document.createElement('button');
+    editButton.className = 'btn btn-primary btn-block my-2';
+    editButton.textContent = 'Toggle OSM router machine';
+    editButton.onclick = () => {
+        // Open route editing tool
+        shapeToOSRM(shapes["routes"][shapeId].polyline);
+    };
+    buttonContainer.appendChild(editButton);
+
+    // Create Save button
+    const saveButton = document.createElement('button');
+    saveButton.className = 'btn btn-secondary btn-block my-2';
+    saveButton.textContent = 'Save Shape';
+    saveButton.setAttribute('ready-to-save', 'false');
+    saveButton.onclick = () => {
+        if (saveButton.getAttribute('ready-to-save') === 'true') {
+            // Append coordinates to stops list
+            var latlngs = currentLayer.getLatLngs();
+            latlngs.forEach(function(latlng) {
+                //stops.push([latlng.lat, latlng.lng]);
+            });
+
+            // Transform the polyline into the specified format in the shapes dictionary
+            shape_id = "n_" + numNewShapes;
+            numNewShapes += 1;
+            shapes["routes"][shape_id] = [];
+            latlngs.forEach(function(latlng, index) {
+                shapes["routes"][shape_id].push({
+                    sequence: index + 1,
+                    lat: latlng.lat,
+                    lon: latlng.lng
+                });
+            });
+
+            // Delete the layer with the drawn polyline
+            map.removeLayer(currentLayer);
+
+            // Create polyline and add to map
+            addClickableShape (latlngs, shape_id);
+
+            // Log the results
+            console.log('Stops:', stops);
+            console.log('Shapes:', shapes["routes"]);
+            
+            // Change button esthetics to default
+            saveButton.style.backgroundColor = '';
+            saveButton.style.color = '';
+            
+            cancelShapeEdit();
+        }
+    };
+    buttonContainer.appendChild(saveButton);
+
+    // Create Cancel button
+    const cancelButton = document.createElement('button');
+    cancelButton.className = 'btn btn-secondary btn-block my-2';
+    cancelButton.textContent = 'Cancel';
+    cancelButton.onclick = () => {
+        cancelShapeEdit();
+    };
+    buttonContainer.appendChild(cancelButton);
+
+    // Append the button container to the chosenShape element
+    chosenShape.appendChild(buttonContainer);
+
+    polylineDrawer.enable();
+
+    // Add created polylines to the map
+    map.on(L.Draw.Event.CREATED, function (event) {
+        var layer = event.layer;
+        currentLayer = layer;
+        drawnItems.addLayer(layer);
+    });
+
+    // Add created shapes to the map and handle the polyline
+    map.on(L.Draw.Event.CREATED, function (event) {
+        var layer = event.layer;
+
+        // Check if the drawn shape is a polyline
+        if (layer instanceof L.Polyline && !(layer instanceof L.Polygon)) {
+            // Disable the drawing control
+            map.removeControl(drawControl);
+
+            saveButton.style.backgroundColor = 'green';
+            saveButton.style.color = 'white'; // Ensure the text is readable
+            saveButton.setAttribute('ready-to-save', 'true');
+        } else {
+            // Add the drawn layer to the map if it's not a polyline
+            drawnItems.addLayer(layer);
+        }
+    });
+}
+
+function displayShapeOptions(shapeId, shapes) {
+    const chosenShape = document.getElementById('chosenShape');
+    
+    // Clear any existing content inside chosenShape
+    while (chosenShape.firstChild) {
+        chosenShape.removeChild(chosenShape.firstChild);
+    }
+
+    // Add text content at the top
+    const textContent = document.createElement('div');
+    textContent.textContent = "Shape " + shapeId;
+    chosenShape.appendChild(textContent);
+
+    // Create a container div for the buttons
+    const buttonContainer = document.createElement('div');
+    buttonContainer.className = 'button-container mt-3 p-3 border rounded';
+
+    // Create Edit button
+    const editButton = document.createElement('button');
+    editButton.className = 'btn btn-primary btn-block my-2';
+    editButton.textContent = 'Edit Shape';
+    editButton.onclick = () => {
+        // Open route editing tool
+        shapeToOSRM(shapes["routes"][shapeId].polyline);
+    };
+    buttonContainer.appendChild(editButton);
+
+    // Create Delete button
+    const deleteButton = document.createElement('button');
+    deleteButton.className = 'btn btn-danger btn-block my-2';
+    deleteButton.textContent = 'Delete Shape';
+    deleteButton.onclick = () => {
+
+        // Cancel the edit view for the current shape
+        cancelShapeEdit();
+        // Delete the current shape and its representation from the map
+        deleteShape(shapeId);
+    };
+    buttonContainer.appendChild(deleteButton);
+
+    // Create Cancel button
+    const cancelButton = document.createElement('button');
+    cancelButton.className = 'btn btn-secondary btn-block my-2';
+    cancelButton.textContent = 'Cancel';
+    cancelButton.onclick = () => {
+        cancelShapeEdit();
+    };
+    buttonContainer.appendChild(cancelButton);
+
+    // Append the button container to the chosenShape element
+    chosenShape.appendChild(buttonContainer);
 }
 
 function drawNewShape() {
diff --git a/transport_accessibility/pt_map/templates/map.html b/transport_accessibility/pt_map/templates/map.html
index 502cdf4..4106e3e 100644
--- a/transport_accessibility/pt_map/templates/map.html
+++ b/transport_accessibility/pt_map/templates/map.html
@@ -61,6 +61,7 @@
                 <h6 id="newShape">
                     <button class="list-group-item list-group-item-action" onclick="drawNewShape()">Draw New Shape</button>
                     <button class="list-group-item list-group-item-action" onclick="addNewShape()">Add New Shape</button>
+                    <button class="list-group-item list-group-item-action" onclick="addNewStop()">Add New Stop</button>
                 </h6>
                 <h6 id="chosenShape">
                     Chosen Shape
@@ -177,9 +178,7 @@
         }
 
         function importGTFS() {
-            stops = JSON.parse('{{ stops|safe }}');
-            routes = JSON.parse('{{ routes|safe }}')
-            timetable = JSON.parse('{{ timetable|safe }}')
+            imported_data = JSON.parse('{{ data }}');
             alert("Import existing GTFS clicked");
             // Logic to import existing GTFS would go here
         }