diff --git a/src/app/workflow-spec-list/workflow-spec-list.component.html b/src/app/workflow-spec-list/workflow-spec-list.component.html
index 7a6bfd9..262152c 100644
--- a/src/app/workflow-spec-list/workflow-spec-list.component.html
+++ b/src/app/workflow-spec-list/workflow-spec-list.component.html
@@ -59,7 +59,7 @@
         <mat-divider></mat-divider>
 
       <mat-accordion class="example-headers-align" multi="false">
-      <ng-container *ngFor="let cat of workflowSpecsByCategory">
+      <ng-container *ngFor="let cat of workflowSpecsByCategory; let j = index">
 
         <div *ngIf="!(searchField.value && cat.workflow_specs.length === 0)">
         <ng-container *ngIf="!(cat.id === null && cat.workflow_specs.length === 0)">
@@ -110,20 +110,20 @@
                 <mat-icon>edit</mat-icon>
               </button>
               <button
-                *ngIf="!cat[0]"
+                *ngIf="j!==1"
                 mat-mini-fab
                 title="Move up"
                 color="primary"
-                (click)="editCategoryDisplayOrder(cat.id, -1)"
+                (click)="editCategoryDisplayOrder(cat, cat.id, 'up')"
               >
                 <mat-icon>arrow_upward</mat-icon>
               </button>
               <button
-                *ngIf="!cat[workflowSpecsByCategory.length-1]"
+                *ngIf="j!== cat[workflowSpecsByCategory.length-1]"
                 mat-mini-fab
                 title="Move down"
                 color="primary"
-                (click)="editCategoryDisplayOrder(cat.id, 1)"
+                (click)="editCategoryDisplayOrder(cat, cat.id, 'down')"
               >
                 <mat-icon>arrow_downward</mat-icon>
               </button>
diff --git a/src/app/workflow-spec-list/workflow-spec-list.component.ts b/src/app/workflow-spec-list/workflow-spec-list.component.ts
index d9035b7..be09dc9 100644
--- a/src/app/workflow-spec-list/workflow-spec-list.component.ts
+++ b/src/app/workflow-spec-list/workflow-spec-list.component.ts
@@ -222,16 +222,16 @@ export class WorkflowSpecListComponent implements OnInit {
     });
   }
 
-  editCategoryDisplayOrder(catId: number, direction: string) {
-    // const reorderedCats = this._reorder(catId, direction, cats) as WorkflowSpecCategoryGroup[];
-    // this._updateCatDisplayOrders(reorderedCats);
-
-    // Send this info to a new endpoint
+  editCategoryDisplayOrder(cat: WorkflowSpecCategoryGroup, catId: number, direction: string) {
+    this.api.reorderWorkflowCategory(catId, direction).subscribe(cat_change => {
+      console.log('wfsbcat: ', this.workflowSpecsByCategory);
+      console.log('this.categories', this.categories);
+      console.log('changed is ', cat_change);
+      // this.workflowSpecsByCategory = cat_change;
+    });
   }
 
   editSpecDisplayOrder(cat: WorkflowSpecCategoryGroup, specId: string, direction: string) {
-    // const reorderedSpecs = this._reorder(specId, direction, specs) as WorkflowSpec[];
-    // this._updateSpecDisplayOrders(reorderedSpecs);
     this.api.reorderWorkflowSpecification(specId, direction).subscribe(wfs => {
       cat.workflow_specs= wfs;
     });
@@ -253,7 +253,6 @@ export class WorkflowSpecListComponent implements OnInit {
         display_order: -1, // Display it at the top
       }];
 
-      // ?
       this.categories.forEach((cat, i) => {
         this.workflowSpecsByCategory.push(cat);
         this.workflowSpecsByCategory[i + 1].workflow_specs = [];