diff --git a/web_editor/assets/add.svg b/web_editor/assets/add.svg
new file mode 100644
index 0000000..7a4b6b8
--- /dev/null
+++ b/web_editor/assets/add.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <defs/>
+    <path fill="none" stroke="none" visibility="hidden" d="M 0 0 L 24 0 L 24 24 L 0 24 L 0 0 Z"/>
+    <path fill="#FFFFFF" stroke="none" d="M 12 2 C 6.48 2 2 6.48 2 12 C 2 17.52 6.48 22 12 22 C 17.52 22 22 17.52 22 12 C 22 6.48 17.52 2 12 2 Z M 17 13 L 13 13 L 13 17 L 11 17 L 11 13 L 7 13 L 7 11 L 11 11 L 11 7 L 13 7 L 13 11 L 17 11 L 17 13 Z"/>
+</svg>
diff --git a/web_editor/assets/pedestrian.svg b/web_editor/assets/pedestrian.svg
new file mode 100644
index 0000000..3d608c5
--- /dev/null
+++ b/web_editor/assets/pedestrian.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8688 6.44723C14.9817 6.44723 15.8922 5.53669 15.8922 4.42381C15.8922 3.31093 14.9817 2.40039 13.8688 2.40039C12.7559 2.40039 11.8454 3.31093 11.8454 4.42381C11.8454 5.53669 12.7559 6.44723 13.8688 6.44723ZM10.1255 9.88704L7.29272 24.1521H9.41731L11.2384 16.0585L13.363 18.0819V24.1521H15.3864V16.5643L13.2618 14.5409L13.8688 11.5058C15.1841 13.0233 17.2075 14.0351 19.4332 14.0351V12.0116C17.511 12.0116 15.8922 10.9999 15.0829 9.58353L14.0712 7.96479C13.6665 7.35777 13.0595 6.95308 12.3513 6.95308C12.0478 6.95308 11.8454 7.05425 11.5419 7.05425L6.28101 9.28002V14.0351H8.30443V10.5952L10.1255 9.88704Z" fill="white"/>
+</svg>
diff --git a/web_editor/index.html b/web_editor/index.html
index b8327cb..71cf799 100644
--- a/web_editor/index.html
+++ b/web_editor/index.html
@@ -28,6 +28,9 @@
         <button type="button" class="new-lane-card" id="new-bus">
           New <img src="assets/bus.svg" class="icon" />
         </button>
+        <button type="button" class="new-lane-card" id="new-sidewalk">
+          New <img src="assets/pedestrian.svg" class="icon" />
+        </button>
       </div>
     </div>
 
diff --git a/web_editor/js/cards.js b/web_editor/js/cards.js
index 94d3b6d..f416aad 100644
--- a/web_editor/js/cards.js
+++ b/web_editor/js/cards.js
@@ -11,7 +11,8 @@ export function makeLaneCard(lane, idx, app) {
   }
   node.appendChild(wrapInCenterDiv(width(lane)));
 
-  var finalRow = document.createElement("div");
+  var editRow = document.createElement("div");
+  editRow.align = "center";
 
   var left = iconObj("left");
   if (idx != 0) {
@@ -23,15 +24,14 @@ export function makeLaneCard(lane, idx, app) {
   } else {
     left.disabled = true;
   }
-  finalRow.appendChild(left);
-  finalRow.align = "center";
+  editRow.appendChild(left);
 
   var trash = iconObj("delete");
   trash.onclick = () => {
     app.road.lanes.splice(idx, 1);
     app.render();
   };
-  finalRow.appendChild(trash);
+  editRow.appendChild(trash);
 
   var right = iconObj("right");
   if (idx != app.road.lanes.length - 1) {
@@ -43,9 +43,23 @@ export function makeLaneCard(lane, idx, app) {
   } else {
     right.disabled = true;
   }
-  finalRow.appendChild(right);
+  editRow.appendChild(right);
 
-  node.append(finalRow);
+  node.append(editRow);
+
+  if (idx != app.road.lanes.length - 1) {
+    var add = iconObj("add");
+    add.className = "insert-lane";
+    add.onclick = () => {
+      app.road.lanes.splice(idx + 1, 0, {
+        type: "travel",
+        direction: "backward",
+        designated: "motor_vehicle",
+      });
+      app.render();
+    };
+    node.append(add);
+  }
 
   return node;
 }
@@ -60,6 +74,9 @@ function typeIcon(lane) {
   if (lane.type == "travel" && lane.designated == "motor_vehicle") {
     return icon("car");
   }
+  if (lane.type == "travel" && lane.designated == "foot") {
+    return icon("pedestrian");
+  }
   if (lane.type == "parking" && lane.designated == "motor_vehicle") {
     return icon("parking");
   }
@@ -71,10 +88,20 @@ function typeIcon(lane) {
 
 function directionIcon(lane) {
   if (lane.direction == "forward") {
-    return icon("forwards");
+    var obj = iconObj("forwards");
+    obj.onclick = () => {
+      lane.direction = "backward";
+      app.render();
+    };
+    return obj;
   }
   if (lane.direction == "backward") {
-    return icon("backwards");
+    var obj = iconObj("backwards");
+    obj.onclick = () => {
+      lane.direction = "forward";
+      app.render();
+    };
+    return obj;
   }
   if (lane.direction == "both") {
     return icon("both_ways");
diff --git a/web_editor/js/main.js b/web_editor/js/main.js
index 356ac09..b0f5f14 100644
--- a/web_editor/js/main.js
+++ b/web_editor/js/main.js
@@ -127,5 +127,12 @@ export class LaneEditor {
       });
       this.render();
     };
+    document.getElementById("new-sidewalk").onclick = () => {
+      this.road.lanes.push({
+        type: "travel",
+        designated: "foot",
+      });
+      this.render();
+    };
   }
 }
diff --git a/web_editor/main.css b/web_editor/main.css
index 53a3ad5..791a662 100644
--- a/web_editor/main.css
+++ b/web_editor/main.css
@@ -6,6 +6,8 @@
 .card {
   outline: solid;
   padding: 15px;
+  /* So child elements can use position=absolute */
+  position: relative;
 }
 
 .card button {
@@ -33,6 +35,13 @@
   width: 50px;
 }
 
+.insert-lane {
+  position: absolute;
+  right: -15px;
+  bottom: 0px;
+  z-index: 1;
+}
+
 table,
 td {
   border: 1px solid black;