diff --git a/frontend/src/app/modules/grids/context_menus/row.directive.ts b/frontend/src/app/modules/grids/context_menus/row.directive.ts
index 08cc678d52..e15180c010 100644
--- a/frontend/src/app/modules/grids/context_menus/row.directive.ts
+++ b/frontend/src/app/modules/grids/context_menus/row.directive.ts
@@ -82,27 +82,28 @@ export class GridRowContextMenu extends OpContextMenuTrigger {
 
   private buildItems() {
     let grid = this.grid;
+    let rowNumber = this.rowNumber;
 
     // TODO: I18n
     this.items = [
       {
         linkText: "Add row before",
         onClick: () => {
-          //this.wpTableSortBy.addDescending(c);
+          grid.addRow(rowNumber - 1);
           return true;
         }
       },
       {
         linkText: "Add row after",
         onClick: () => {
-          //this.wpTableSortBy.addAscending(c);
+          grid.addRow(rowNumber);
           return true;
         }
       },
       {
         linkText: "Remove row",
         onClick: () => {
-          //this.wpTableGroupBy.setBy(c);
+          grid.removeRow(rowNumber);
           return true;
         }
       }
diff --git a/frontend/src/app/modules/grids/grid.component.ts b/frontend/src/app/modules/grids/grid.component.ts
index cd017e8750..fc37441ca4 100644
--- a/frontend/src/app/modules/grids/grid.component.ts
+++ b/frontend/src/app/modules/grids/grid.component.ts
@@ -265,6 +265,19 @@ export class GridComponent implements OnDestroy, OnInit {
     this.buildAreas();
   }
 
+  public addRow(row:number) {
+    this.numRows++;
+
+    this.widgetResources.filter((widget) => {
+      return widget.startRow > row;
+    }).forEach((widget) => {
+      widget.startRow++;
+      widget.endRow++;
+    });
+
+    this.buildAreas();
+  }
+
   public removeColumn(column:number) {
     this.numColumns--;
 
@@ -293,6 +306,34 @@ export class GridComponent implements OnDestroy, OnInit {
     this.buildAreas();
   }
 
+  public removeRow(row:number) {
+    this.numRows--;
+
+    // remove widgets that only span the removed row
+    this.widgetResources = this.widgetResources.filter((widget) => {
+      return !(widget.startRow === row && widget.endRow === row + 1);
+    });
+
+    //shrink widgets that span more than the removed row
+    this.widgetResources.forEach((widget) => {
+      if (widget.startRow <= row && widget.endRow >= row + 1) {
+        //shrink widgets that span more than the removed row
+        widget.endRow--;
+      }
+    });
+
+    // move all widgets that are after the removed row
+    // so that they appear to keep their place.
+    this.widgetResources.filter((widget) => {
+      return widget.startRow > row;
+    }).forEach((widget) => {
+      widget.startRow--;
+      widget.endRow--;
+    });
+
+    this.buildAreas();
+  }
+
   private buildAreas() {
     this.gridAreas = this.buildGridAreas();
     this.gridAreaDropIds = this.buildGridAreaDropIds();