diff --git a/api/src/data/migrations/019.create-actions.ts b/api/src/data/migrations/019.create-actions.ts
index d3ffe0f..89130df 100644
--- a/api/src/data/migrations/019.create-actions.ts
+++ b/api/src/data/migrations/019.create-actions.ts
@@ -18,6 +18,9 @@ export async function up(knex: knex.Knex) {
     table.string("sensitivity_code", 8).nullable();
     table.string("status_code", 8).nullable();
     table.string("notes", 4000).nullable();
+    table.datetime("complete_date").nullable();
+    table.string("complete_name", 200).nullable();
+    table.integer("complete_user_id").nullable();
 
     table.foreign("hazard_id").references("hazards.id");
     table.foreign("incident_id").references("incidents.id");
diff --git a/api/src/data/models/action-model.ts b/api/src/data/models/action-model.ts
index 2febb5d..25580a8 100644
--- a/api/src/data/models/action-model.ts
+++ b/api/src/data/models/action-model.ts
@@ -15,4 +15,9 @@ export interface Action {
   sensitivity_code?: string;
   status_code?: string;
   notes?: string;
+  complete_date?: Date;
+  complete_name?: string;
+  complete_user_id?: number;
+
+  actor_display_name?: string;
 }
diff --git a/api/src/data/models/incident-step-model.ts b/api/src/data/models/incident-step-model.ts
index 8988249..1b5293d 100644
--- a/api/src/data/models/incident-step-model.ts
+++ b/api/src/data/models/incident-step-model.ts
@@ -1,10 +1,12 @@
+import { Knex } from "knex";
+
 export interface IncidentStep {
   id?: number;
   incident_id: number;
   step_title: string;
   order: number;
-  activate_date?: Date;
-  complete_date?: Date;
+  activate_date?: Date | Knex.Raw<any>;
+  complete_date?: Date | Knex.Raw<any>;
   complete_name?: string;
   complete_user_id?: number;
 }
diff --git a/api/src/routes/directory-router.ts b/api/src/routes/directory-router.ts
index a4eb49a..7fb0070 100644
--- a/api/src/routes/directory-router.ts
+++ b/api/src/routes/directory-router.ts
@@ -1,5 +1,6 @@
 import express, { Request, Response } from "express";
 import { DirectoryService } from "../services";
+import { db as knex } from "../data";
 
 export const directoryRouter = express.Router();
 
@@ -13,3 +14,16 @@ directoryRouter.post("/search-directory", async (req: Request, res: Response) =>
 
   return res.json({ data: [...results] });
 });
+
+directoryRouter.post("/search-action-directory", async (req: Request, res: Response) => {
+  let { terms } = req.body;
+
+  await directoryService.connect();
+  let data = await directoryService.search(terms);
+
+  const allUsers = await knex("users");
+
+  data.map((d: any) => (d.user_id = allUsers.find((u) => u.email == d.email)?.id));
+
+  return res.json({ data });
+});
diff --git a/api/src/routes/report-router.ts b/api/src/routes/report-router.ts
index 12cc1a7..7b89674 100644
--- a/api/src/routes/report-router.ts
+++ b/api/src/routes/report-router.ts
@@ -4,6 +4,9 @@ import { isArray } from "lodash";
 import { db as knex } from "../data";
 import { DepartmentService, DirectoryService, EmailService, IncidentService } from "../services";
 import {
+  Action,
+  ActionStatuses,
+  ActionTypes,
   Hazard,
   HazardStatuses,
   Incident,
@@ -110,8 +113,6 @@ reportRouter.post("/", async (req: Request, res: Response) => {
     const insertedIncidents = await trx("incidents").insert(incident).returning("*");
     const insertedHazards = await trx("hazards").insert(hazard).returning("*");
 
-    const supervisorUser = await trx("users").where({ email: supervisor_email }).first();
-
     let insertedIncidentId = insertedIncidents[0].id;
     let insertedHazardId = insertedHazards[0].id;
 
@@ -143,26 +144,15 @@ reportRouter.post("/", async (req: Request, res: Response) => {
         activate_date: i == i ? new Date() : null,
       } as IncidentStep;
 
+      if (i == 1) {
+        (step as any).complete_date = InsertableDate(new Date().toISOString());
+        step.complete_name = req.user.display_name;
+        step.complete_user_id = req.user.id;
+      }
+
       await trx("incident_steps").insert(step);
     }
 
-    /* const basicActions = ["Complete Initial Investigation", "Complete Action Plan"];
-
-    for (let i = 1; i <= basicActions.length; i++) {
-      const action = {
-        incident_id: insertedIncidentId,
-        created_at: new Date(),
-        description: basicActions[i - 1],
-        action_type_code: ActionTypes.SYSTEM_GENERATED.code,
-        sensitivity_code: SensitivityLevels.NOT_SENSITIVE.code,
-        status_code: ActionStatuses.OPEN.code,
-        actor_user_email: supervisor_email,
-        actor_user_id: supervisorUser?.id ?? null,
-      } as Action;
-
-      await trx("actions").insert(action);
-    } */
-
     if (req.files && req.files.files) {
       let files = req.files.files;
 
@@ -216,3 +206,122 @@ reportRouter.post("/", async (req: Request, res: Response) => {
 
   return res.status(400).json({ data: {} });
 });
+
+reportRouter.put("/:id/step/:step_id/:operation", async (req: Request, res: Response) => {
+  const { id, step_id, operation } = req.params;
+
+  const step = await knex("incident_steps").where({ incident_id: id, id: step_id }).first();
+
+  if (step) {
+    if (operation == "complete") {
+      await knex("incident_steps")
+        .where({ incident_id: id, id: step_id })
+        .update({
+          complete_name: req.user.display_name,
+          complete_date: InsertableDate(new Date().toISOString()),
+          complete_user_id: req.user.id,
+        });
+    } else if (operation == "revert") {
+      await knex("incident_steps").where({ incident_id: id, id: step_id }).update({
+        complete_name: null,
+        complete_date: null,
+        complete_user_id: null,
+      });
+    }
+  }
+
+  const allSteps = await knex("incident_steps").where({ incident_id: id });
+  let allComplete = true;
+
+  for (const step of allSteps) {
+    if (!step.complete_date) allComplete = false;
+  }
+
+  if (allComplete) {
+    await knex("incidents").where({ id }).update({ status_code: IncidentStatuses.CLOSED.code });
+  } else {
+    await knex("incidents").where({ id }).update({ status_code: IncidentStatuses.IN_PROGRESS.code });
+  }
+
+  return res.json({ data: {} });
+});
+
+reportRouter.post("/:id/action", async (req: Request, res: Response) => {
+  const { id } = req.params;
+  const { description, notes, actor_user_email, actor_user_id, actor_role_type_id, due_date } = req.body;
+
+  const action = {
+    incident_id: parseInt(id),
+    created_at: InsertableDate(new Date().toISOString()),
+    description,
+    notes,
+    action_type_code: ActionTypes.USER_GENERATED.code,
+    sensitivity_code: SensitivityLevels.NOT_SENSITIVE.code,
+    status_code: ActionStatuses.OPEN.code,
+    actor_user_email,
+    actor_user_id,
+    actor_role_type_id,
+    due_date: InsertableDate(due_date),
+  } as Action;
+
+  await knex("actions").insert(action);
+
+  return res.json({ data: {} });
+});
+
+reportRouter.put("/:id/action/:action_id", async (req: Request, res: Response) => {
+  const { id, action_id } = req.params;
+  const { description, notes, actor_user_email, actor_user_id, actor_role_type_id, due_date } = req.body;
+
+  const action = await knex("actions").where({ incident_id: id, id: action_id }).first();
+  if (!action) return res.status(404).send();
+
+  await knex("actions").where({ id: action_id }).update({
+    description,
+    notes,
+    actor_user_email,
+    actor_user_id,
+    actor_role_type_id,
+    due_date,
+  });
+
+  return res.json({ data: {} });
+});
+
+reportRouter.delete("/:id/action/:action_id", async (req: Request, res: Response) => {
+  const { id, action_id } = req.params;
+
+  await knex("actions").where({ incident_id: id, id: action_id }).delete();
+
+  return res.json({ data: {} });
+});
+
+reportRouter.delete("/:id/action/:action_id", async (req: Request, res: Response) => {
+  const { id, action_id } = req.params;
+
+  await knex("actions").where({ incident_id: id, id: action_id }).delete();
+
+  return res.json({ data: {} });
+});
+
+reportRouter.put("/:id/action/:action_id/:operation", async (req: Request, res: Response) => {
+  const { id, action_id, operation } = req.params;
+
+  if (operation == "complete") {
+    await knex("actions")
+      .where({ incident_id: id, id: action_id })
+      .update({
+        complete_date: InsertableDate(new Date().toISOString()),
+        complete_name: req.user.display_name,
+        complete_user_id: req.user.id,
+      });
+  } else if (operation == "revert") {
+    await knex("actions").where({ incident_id: id, id: action_id }).update({
+      complete_date: null,
+      complete_name: null,
+      complete_user_id: null,
+    });
+  }
+
+  return res.json({ data: {} });
+});
diff --git a/api/src/services/incident-service.ts b/api/src/services/incident-service.ts
index 34f3bf3..40c05f7 100644
--- a/api/src/services/incident-service.ts
+++ b/api/src/services/incident-service.ts
@@ -37,8 +37,8 @@ export class IncidentService {
       .where({ incident_id: item.id })
       .select("id", "incident_id", "added_by_email", "file_name", "file_type", "file_size", "added_date");
 
-    item.steps = await db("incident_steps").where({ incident_id: item.id });
-    item.actions = await db("actions").where({ incident_id: item.id });
+    item.steps = await db("incident_steps").where({ incident_id: item.id }).orderBy("order");
+    item.actions = await db("actions").where({ incident_id: item.id }).orderBy("due_date");
     item.hazards = await db("incident_hazards").where({ incident_id: item.id });
 
     for (let hazard of item.hazards) {
@@ -49,6 +49,18 @@ export class IncidentService {
       hazard.hazard = await db("hazards").where({ id: hazard.hazard_id }).first();
     }
 
+    for (let action of item.actions) {
+      if (action.actor_role_type_id) {
+        action.actor_display_name = (
+          await db("role_types").where({ id: action.actor_role_type_id }).first()
+        ).description;
+      } else if (action.actor_user_id) {
+        action.actor_display_name = (await db("users").where({ id: action.actor_user_id }).first()).display_name;
+      } else if (action.actor_user_email) {
+        action.actor_display_name = action.actor_user_email;
+      }
+    }
+
     return item;
   }
 
diff --git a/web/src/components/action/ActionCreate.vue b/web/src/components/action/ActionCreate.vue
index ae3cdf4..0671e35 100644
--- a/web/src/components/action/ActionCreate.vue
+++ b/web/src/components/action/ActionCreate.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-dialog width="700px">
+  <v-dialog width="700px" persistent>
     <template #default>
       <v-card v-if="action">
         <v-toolbar color="primary" density="comfortable">
-          <v-toolbar-title class="text-white" style="">Add Action to Action Plan</v-toolbar-title>
+          <v-toolbar-title class="text-white" style="">Add Task to Action Plan</v-toolbar-title>
           <v-spacer> </v-spacer>
           <v-toolbar-items>
             <v-btn icon="mdi-close" @click="closeClick"></v-btn>
@@ -11,7 +11,7 @@
         </v-toolbar>
         <v-card-text class="pt-5">
           <v-row>
-            <v-col>
+            <v-col cols="12">
               <v-label>Due date</v-label>
               <DateSelector ref="dp" v-model="action.due_date" :min="new Date()" />
               <a @click="setToday" class="cursor-pointer text-info">Today</a>,
@@ -19,9 +19,11 @@
               <a @click="setWeek" class="cursor-pointer text-info">in 1 week</a>
             </v-col>
             <v-col>
-              <v-label>Assigned to</v-label>
-              <v-text-field hide-details v-model="action.action_user_id" />
-              <a @click="setMe" class="cursor-pointer text-info">Me</a>
+              <ActionUserSelector
+                label="Search and select the group or person"
+                @selected="actionUserSelected"></ActionUserSelector>
+
+              <!-- <a @click="setMe" class="cursor-pointer text-info">Me</a> -->
             </v-col>
             <v-col cols="12">
               <v-label>Task</v-label>
@@ -46,21 +48,26 @@
   </v-dialog>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
 import { DateTime } from "luxon";
 import { useUserStore } from "@/store/UserStore";
+import { useReportStore } from "@/store/ReportStore";
 
 const emit = defineEmits(["doClose"]);
 
+import ActionUserSelector from "./ActionUserSelector.vue";
 import DateSelector from "@/components/DateSelector.vue";
 
 const userStore = useUserStore();
 const { user } = storeToRefs(userStore);
 
-const action = ref({} as { description?: string; due_date?: Date; notes?: string; action_user_id?: any });
-const dp = ref(null as any);
+const reportStore = useReportStore();
+const { saveAction } = reportStore;
+
+const action = ref({});
+const dp = ref(null);
 
 const canSave = computed(() => {
   if (action.value.due_date && action.value.description) return true;
@@ -78,7 +85,7 @@ function setWeek() {
   if (dp.value) dp.value.setManual(DateTime.now().plus({ weeks: 1 }).toJSDate());
 }
 function setMe() {
-  if (user.value) action.value.action_user_id = user.value.display_name;
+  if (user.value) action.value.action_user_id = user.value.id;
 }
 
 function closeClick() {
@@ -87,7 +94,24 @@ function closeClick() {
 }
 
 async function saveClick() {
-  console.log("SAVING ACTION", action.value);
-  alert("This doesn't work yet");
+  await saveAction(action.value).then(() => {
+    closeClick();
+  });
+}
+
+function actionUserSelected(actor) {
+  if (actor.actor_role_type_id) {
+    action.value.actor_role_type_id = actor.actor_role_type_id;
+    action.value.actor_user_id = null;
+    action.value.actor_user_email = null;
+  } else if (actor.user_id) {
+    action.value.actor_role_type_id = null;
+    action.value.actor_user_id = actor.user_id;
+    action.value.actor_user_email = actor.email;
+  } else if (actor.email) {
+    action.value.actor_role_type_id = null;
+    action.value.actor_user_id = null;
+    action.value.actor_user_email = actor.email;
+  }
 }
 </script>
diff --git a/web/src/components/action/ActionEdit.vue b/web/src/components/action/ActionEdit.vue
index 07e62f0..fd459ca 100644
--- a/web/src/components/action/ActionEdit.vue
+++ b/web/src/components/action/ActionEdit.vue
@@ -1,9 +1,135 @@
 <template>
-I am the edit form
+  <v-dialog width="700px" persistent>
+    <template #default>
+      <v-card v-if="props.action">
+        <v-toolbar color="primary" density="comfortable">
+          <v-toolbar-title class="text-white" style="">Edit Task in Action Plan</v-toolbar-title>
+          <v-spacer> </v-spacer>
+          <v-toolbar-items>
+            <v-btn icon="mdi-close" @click="closeClick"></v-btn>
+          </v-toolbar-items>
+        </v-toolbar>
+        <v-card-text class="pt-5">
+          <v-row>
+            <v-col>
+              <v-label>Due date</v-label>
+              <v-text-field hide-details :value="formatDate(props.action.due_date)" />
+              <!-- <a @click="setToday" class="cursor-pointer text-info">Today</a>,
+              <a @click="setTomorrow" class="cursor-pointer text-info">Tomorrow</a>,
+              <a @click="setWeek" class="cursor-pointer text-info">in 1 week</a> -->
+            </v-col>
+            <v-col>
+              <v-label>Assigned to</v-label>
+              <v-text-field hide-details :value="props.action.actor_display_name" />
+              <!-- <a @click="setMe" class="cursor-pointer text-info">Me</a> -->
+            </v-col>
+            <v-col cols="12">
+              <v-label>Task</v-label>
+              <v-text-field v-model="props.action.description" hide-details />
+            </v-col>
+            <v-col cols="12">
+              <v-label>Notes</v-label>
+              <v-textarea v-model="props.action.notes" rows="3" />
+            </v-col>
+
+            <!--
+        sensitivity_code: SensitivityLevels.NOT_SENSITIVE.code,
+        status_code: ActionStatuses.OPEN.code,
+        actor_user_email: supervisor_email,
+        actor_user_id: supervisorUser?.id ?? null,
+          -->
+          </v-row>
+          <!-- <v-btn color="primary" :disabled="!canSave" @click="saveClick">Save</v-btn> -->
+          <div class="d-flex">
+            <v-btn v-if="props.action.complete_date" color="info" @click="revertClick"
+              ><v-icon class="mr-2">mdi-arrow-u-left-top-bold</v-icon> Revert</v-btn
+            >
+            <v-btn v-else color="success" @click="completeClick"
+              ><v-icon class="mr-2">mdi-check</v-icon> Mark Complete</v-btn
+            >
+
+            <v-spacer />
+            <v-btn color="warning" @click="deleteClick"><v-icon class="mr-2">mdi-delete</v-icon>Delete</v-btn>
+          </div>
+        </v-card-text>
+      </v-card>
+    </template>
+  </v-dialog>
 </template>
 
-<script setup lang="ts">
+<script setup>
+import { ref, computed, defineProps } from "vue";
+import { storeToRefs } from "pinia";
+import { DateTime } from "luxon";
+import { useUserStore } from "@/store/UserStore";
+import { useReportStore } from "@/store/ReportStore";
+
+const props = defineProps(["action"]);
+
+const emit = defineEmits(["doClose"]);
+
+import DateSelector from "@/components/DateSelector.vue";
+
+const userStore = useUserStore();
+const { user } = storeToRefs(userStore);
+
+const reportStore = useReportStore();
+const { saveAction, deleteAction, completeAction, revertAction } = reportStore;
+
+const dp = ref(null);
+
+const canSave = computed(() => {
+  if (props.action.due_date && props.action.description) return true;
+
+  return false;
+});
+
+function closeClick() {
+  emit("doClose");
+}
+
+async function saveClick() {
+  await saveAction(props.action).then(() => {
+    closeClick();
+  });
+}
+
+async function deleteClick() {
+  deleteAction(props.action).then(() => {
+    closeClick();
+  });
+}
+
+async function completeClick() {
+  completeAction(props.action).then(() => {
+    closeClick();
+  });
+}
 
+async function revertClick() {
+  revertAction(props.action).then(() => {
+    closeClick();
+  });
+}
 
+function formatDate(input) {
+  if (!input) return "";
+  return DateTime.fromISO(input.toString()).toFormat("yyyy/MM/dd");
+}
 
-</script>
\ No newline at end of file
+function actionUserSelected(actor) {
+  if (actor.actor_role_type_id) {
+    action.value.actor_role_type_id = actor.actor_role_type_id;
+    action.value.actor_user_id = null;
+    action.value.actor_user_email = null;
+  } else if (actor.user_id) {
+    action.value.actor_role_type_id = null;
+    action.value.actor_user_id = actor.user_id;
+    action.value.actor_user_email = actor.email;
+  } else if (actor.email) {
+    action.value.actor_role_type_id = null;
+    action.value.actor_user_id = null;
+    action.value.actor_user_email = actor.email;
+  }
+}
+</script>
diff --git a/web/src/components/action/ActionList.vue b/web/src/components/action/ActionList.vue
index bbd5381..4ec2038 100644
--- a/web/src/components/action/ActionList.vue
+++ b/web/src/components/action/ActionList.vue
@@ -4,12 +4,20 @@
       <v-list bg-color="#ffffff00" rounded class="py-0" style="border: 1px #00000066 solid">
         <div v-for="(action, idx) of selectedReport.actions">
           <v-list-item
-            :title="action.description"
-            :subtitle="`&nbsp; &nbsp; Assigned to ${action.actor_user_id} `"
+            :title="makeTitle(action)"
+            :subtitle="makeSubtitle(action)"
             style="background-color: #ffffff"
-            class="pt-3 pb-3">
+            class="pt-3 pb-3"
+            @click="showEditClick(action)">
             <template #append>
-              <v-btn fab class="my-0" color="success" size="x-small" icon="mdi-check"></v-btn>
+              <v-btn
+                v-if="action.complete_date"
+                fab
+                class="my-0"
+                color="success"
+                size="x-small"
+                icon="mdi-check"></v-btn>
+              <v-btn v-else fab class="my-0" color="warning" size="x-small" icon="mdi-alert-circle-outline"></v-btn>
             </template>
           </v-list-item>
           <v-divider v-if="idx < selectedReport.actions.length - 1" />
@@ -20,10 +28,30 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
+import { DateTime } from "luxon";
 import { storeToRefs } from "pinia";
 import { useReportStore } from "@/store/ReportStore";
 
 const reportStore = useReportStore();
 const { selectedReport } = storeToRefs(reportStore);
+
+const emit = defineEmits(["showAction"]);
+
+function showEditClick(action) {
+  emit("showAction", action);
+}
+
+function makeTitle(action) {
+  return `${action.description}: ${formatDate(action.due_date)}`;
+}
+
+function makeSubtitle(action) {
+  return `Assigned to: ${action.actor_display_name}`;
+}
+
+function formatDate(input) {
+  if (!input) return "";
+  return DateTime.fromISO(input.toString()).toFormat("yyyy/MM/dd");
+}
 </script>
diff --git a/web/src/components/action/ActionUserSelector.vue b/web/src/components/action/ActionUserSelector.vue
new file mode 100644
index 0000000..0a3e3a6
--- /dev/null
+++ b/web/src/components/action/ActionUserSelector.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <v-label class="mb-1">{{ props.label }}</v-label>
+    <div v-if="selectedPerson">
+      <v-text-field
+        :value="selectedPerson.long_name"
+        readonly
+        hide-details
+        append-inner-icon="mdi-close"
+        @click:append-inner="clear" />
+    </div>
+    <div v-else>
+      <v-autocomplete
+        v-model="model"
+        v-model:search="search"
+        :items="items"
+        :loading="isLoading"
+        item-value="id"
+        item-title="long_name"
+        append-icon="mdi-magnify"
+        auto-select-first
+        no-filter
+        outlined
+        dense
+        clearable
+        hide-details
+        return-object>
+        <template #no-data>
+          <div class="mx-4 text-caption">
+            <strong>No matches found?</strong>
+            This search matches the beginning of names and titles only
+          </div>
+        </template>
+      </v-autocomplete>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useDirectoryStore } from "@/store/DirectoryStore";
+
+const props = defineProps(["label"]);
+const emit = defineEmits(["selected"]);
+
+const directoryStore = useDirectoryStore();
+const { searchActionDirectory } = directoryStore;
+
+const isLoading = ref(false);
+const items = ref([] as any[]);
+const search = ref("");
+
+const model = ref(null as any);
+const searchIndex = ref(1);
+
+const timerId = ref(null as any);
+
+const selectedPerson = ref(null as any);
+
+await doDirectorySearch("");
+
+watch(search, async (nv) => {
+  isLoading.value = false;
+  doDirectorySearch(nv);
+});
+
+watch(model, async (nv) => {
+  if (!nv) {
+    return;
+  }
+
+  doSelect();
+});
+async function doDirectorySearch(val: string) {
+  clearTimeout(timerId.value);
+
+  // delay new call 50ms
+  timerId.value = setTimeout(() => {
+    val = val ?? "";
+    isLoading.value = true;
+
+    searchActionDirectory({ terms: val, showRoles: val.length < 4 })
+      .then((res) => {
+        items.value = res;
+      })
+      .catch((err) => {
+        console.log(err);
+      })
+      .finally(() => {
+        isLoading.value = false;
+      });
+  }, 50);
+}
+
+function clear() {
+  model.value = null;
+  search.value = "";
+  selectedPerson.value = null;
+}
+
+function doSelect() {
+  selectedPerson.value = model.value;
+  emit("selected", model.value);
+}
+</script>
diff --git a/web/src/components/incident/DetailsPage.vue b/web/src/components/incident/DetailsPage.vue
index 8919e05..337ff84 100644
--- a/web/src/components/incident/DetailsPage.vue
+++ b/web/src/components/incident/DetailsPage.vue
@@ -3,15 +3,17 @@
 
   <div v-if="selectedReport">
     <div class="float-right">
-    <!--   <v-btn color="primary" class="my-0 mt-1" @click="supervisorClick">
-        <v-icon class="mr-3">mdi-check</v-icon> Supervisor Signature</v-btn
-      > -->
       <OperationMenu />
     </div>
 
     <h1 class="text-h4 mb-2">
       {{ selectedReport.incident_type_description }} Details
-      <v-chip class="ml-3" style="margin-top :-8px" color="info" variant="flat">
+      <v-chip
+        class="ml-3"
+        size="large"
+        style="margin-top: -8px"
+        :color="selectedReport.status_name == 'Closed' ? 'success' : 'yg_zinc'"
+        variant="flat">
         <strong>Status:</strong> &nbsp; {{ selectedReport.status_name }}
       </v-chip>
     </h1>
@@ -22,67 +24,35 @@
     </h2> -->
 
     <div class="mb-5" style="background-color: #eee; border: 1px #aaa solid; border-radius: 5px">
+      <!-- {{ selectedReport.steps }} -->
+
+      <v-stepper-vertical v-if="smAndDown" hide-actions>
+        <v-stepper-vertical-item
+          v-for="(step, idx) of selectedReport.steps"
+          :value="idx + 1"
+          :complete="step.complete_date"
+          :title="step.step_title"
+          :color="step.complete_date ? 'success' : ''"
+          :subtitle="step.complete_date ? `${formatDate(step.complete_date)} by ${step.complete_name}` : ''">
+        </v-stepper-vertical-item>
+      </v-stepper-vertical>
+
       <v-stepper
+        v-else
         v-model="stepperValue"
         flat
-        style="clear: both"
         alt-labels
+        style="clear: both"
         bg-color="#ffffff00"
-        hide-actions
-        :mobile="false">
+        :class="{ unpadded: !smAndDown }">
         <v-stepper-header>
           <v-stepper-item
-            value="1"
-            :complete="stepperValue > 0"
-            title="Incident Reported"
-            :color="stepperValue > 0 ? 'success' : ''"
-            :subtitle="formatDate(selectedReport.created_at)">
-          </v-stepper-item>
-          <v-divider />
-
-          <v-stepper-item
-            value="2"
-            :complete="stepperValue > 1"
-            :color="stepperValue > 1 ? 'success' : ''"
-            title="Investigation Completed">
-            <small class="mt-1">{{ lockDate }}</small>
-          </v-stepper-item>
-          <v-divider />
-
-          <v-stepper-item
-            value="3"
-            :complete="stepperValue > 2"
-            :color="stepperValue > 2 ? 'success' : ''"
-            title="Action Plan Created">
-            <small class="mt-1">{{ uploadDate }}</small>
-          </v-stepper-item>
-          <v-divider />
-
-          <v-stepper-item
-            value="4"
-            :complete="stepperValue > 3"
-            :color="stepperValue > 3 ? 'success' : ''"
-            title="Action Plan Approved">
-            <small class="mt-1">{{ financeApproveDate }}</small>
-            <small>{{ financeApproveName }}</small>
-          </v-stepper-item>
-          <v-divider />
-
-          <v-stepper-item
-            value="5"
-            :complete="stepperValue > 4"
-            :color="stepperValue > 4 ? 'success' : ''"
-            title="Remediation Completed">
-            <small class="mt-1" v-if="stepperValue > 4">Ready to be activated</small>
-          </v-stepper-item>
-          <v-divider />
-
-          <v-stepper-item
-            value="6"
-            :complete="stepperValue > 5"
-            :color="stepperValue > 5 ? 'success' : ''"
-            title="Final Review">
-            <small class="mt-1" v-if="stepperValue > 5">Ready to be activated</small>
+            v-for="(step, idx) of selectedReport.steps"
+            :value="idx + 1"
+            :complete="step.complete_date"
+            :title="step.step_title"
+            :color="step.complete_date ? 'success' : ''"
+            :subtitle="step.complete_date ? `${formatDate(step.complete_date)} by ${step.complete_name}` : ''">
           </v-stepper-item>
         </v-stepper-header>
       </v-stepper>
@@ -94,26 +64,28 @@
           <v-card class="default mb-5">
             <v-card-item class="py-4 px-6 mb-2 bg-sun">
               <div style="width: 100%" class="d-flex">
-                <h4 class="text-h6">Incident Basics</h4>
+                <h4 class="text-h6">Incident Information</h4>
               </div>
             </v-card-item>
             <v-card-text class="pt-2">
-              <v-label>Reported by:</v-label>
+              <v-label>Department</v-label>
               <v-text-field
-                :value="selectedReport.reporting_person_email"
+                :value="selectedReport.department_name"
                 append-inner-icon="mdi-lock"
                 readonly></v-text-field>
 
-              <v-label>Department:</v-label>
+              <v-label>Reported by</v-label>
               <v-text-field
-                :value="selectedReport.department_name"
+                :value="selectedReport.reporting_person_email"
                 append-inner-icon="mdi-lock"
                 readonly></v-text-field>
 
-              <v-label>Supervisor:</v-label>
+              <v-label>Supervisor</v-label>
               <v-text-field
                 :value="selectedReport.supervisor_email"
                 append-inner-icon="mdi-lock"
+                hide-details
+                class="mb-2"
                 readonly></v-text-field>
             </v-card-text>
           </v-card>
@@ -127,8 +99,14 @@
               </div>
             </v-card-item>
             <v-card-text class="pt-2">
-              <ActionList></ActionList>
+              <ActionList @showAction="doShowActionEdit"></ActionList>
+
               <ActionCreate v-model="showActionAdd" @doClose="showActionAdd = false"></ActionCreate>
+
+              <ActionEdit
+                v-model="showActionEdit"
+                :action="actionToEdit"
+                @doClose="showActionEdit = false"></ActionEdit>
             </v-card-text>
           </v-card>
 
@@ -149,14 +127,6 @@
             </v-card-item>
 
             <v-row class="pa-5 pt-2 pb-6">
-              <!--  <v-col cols="12" md="12">
-            <v-label class="mb-1" style="white-space: inherit">General location where the event occurred</v-label>
-            <v-text-field :value="selectedReport.location_code" hide-details />
-          </v-col>
-          <v-col cols="12" md="12">
-            <v-label class="mb-1" style="white-space: inherit">Specific location where the event occurred</v-label>
-            <v-text-field v-model="selectedReport.location_detail" hide-details />
-          </v-col> -->
               <v-col cols="12" md="12">
                 <v-label class="mb-1" style="white-space: inherit">Description of event</v-label>
                 <v-textarea v-model="selectedReport.description" hide-details />
@@ -192,11 +162,6 @@
         </v-col>
       </v-row>
     </section>
-
-    <v-row class="mb-5">
-      <v-col cols="12" md="6"> </v-col>
-      <v-col cols="12" md="6"> </v-col>
-    </v-row>
   </div>
 </template>
 
@@ -206,10 +171,14 @@ import { storeToRefs } from "pinia";
 import { DateTime } from "luxon";
 import { useRoute } from "vue-router";
 
+import { useDisplay } from "vuetify";
+const { smAndDown } = useDisplay();
+
 import OperationMenu from "@/components/incident/OperationMenu.vue";
 import ActionList from "@/components/action/ActionList.vue";
 import HazardList from "@/components/hazard/HazardList.vue";
 import ActionCreate from "@/components/action/ActionCreate.vue";
+import ActionEdit from "@/components/action/ActionEdit.vue";
 
 import { useReportStore } from "@/store/ReportStore";
 
@@ -224,27 +193,66 @@ await initialize();
 await loadReport(reportId);
 
 const showActionAdd = ref(false);
+const showActionEdit = ref(false);
+const actionToEdit = ref(null);
+
+setTimeout(() => {
+  let list = document.getElementsByClassName("v-stepper-item");
+
+  for (let i = 0; i < list.length - 1; i++) {
+    let item = list[i];
+    let hr = document.createElement("hr");
+    hr.classList.add("v-divider");
+    hr.classList.add("v-theme--light");
+    hr.setAttribute("area-orientation", "horizontal");
+    hr.setAttribute("role", "separator");
+    item.after(hr);
+  }
+}, 100);
 
 const stepperValue = computed(() => {
-  if (!selectedReport.value) return 0;
+  if (selectedReport.value) {
+    let current = null;
+
+    for (let i = 1; i < selectedReport.value.steps.length; i++) {
+      const step = selectedReport.value.steps[i - 1];
 
-  if (selectedReport.value.status_name == "Initial Report") return 1;
-  if (selectedReport.value.status_name == "Supervisor Review") return 2;
+      if (step.complete_date) continue;
 
+      return i;
+    }
+  }
   return 0;
 });
 
 function formatDate(input) {
   if (!input) return "";
-  return DateTime.fromISO(input.toString()).toFormat("MMMM dd, yyyy");
-}
-
-function supervisorClick() {
-  selectedReport.value.status_code = "SUP";
-  selectedReport.value.status_name = "Investigation Completed";
+  return DateTime.fromISO(input.toString()).toFormat("yyyy/MM/dd @ h:ma");
 }
 
 function addActionClick() {
   showActionAdd.value = true;
 }
+
+function doShowActionEdit(action) {
+  actionToEdit.value = action;
+  showActionEdit.value = true;
+}
 </script>
+
+<style>
+.v-stepper-item {
+  opacity: 0.9 !important;
+  padding-left: 5px !important;
+  padding-right: 5px !important;
+}
+.unpadded .v-stepper-item:first-of-type {
+  padding-left: 5px !important;
+}
+.unpadded .v-stepper-item:last-of-type {
+  padding-right: 5px !important;
+}
+.v-expansion-panel .v-expansion-panel-text {
+  display: none;
+}
+</style>
diff --git a/web/src/components/incident/OperationMenu.vue b/web/src/components/incident/OperationMenu.vue
index a4e95db..7c79550 100644
--- a/web/src/components/incident/OperationMenu.vue
+++ b/web/src/components/incident/OperationMenu.vue
@@ -1,17 +1,67 @@
 <template>
   <v-menu transition="slide-y-transition">
     <template v-slot:activator="{ props }">
-      <v-btn color="info" v-bind="props" class="my-0"><v-icon class="mr-2">mdi-chevron-down</v-icon> Operations</v-btn>
+      <v-btn color="info" v-bind="props" class="my-0" variant="outlined">
+        <v-icon class="mr-2">mdi-chevron-down</v-icon> Actions
+      </v-btn>
     </template>
 
     <v-list>
-      <v-list-item title="Investigation Completed">
+      <v-list-item
+        title="Complete Next Step"
+        :subtitle="currentStep.step_title"
+        @click="completeClick(currentStep)"
+        v-if="currentStep.id">
         <template #prepend>
-          <v-icon color="green">mdi-check</v-icon>
+          <v-icon color="green">mdi-check-bold</v-icon>
+        </template>
+      </v-list-item>
+      <v-list-item
+        title="Revert Previous Step"
+        :subtitle="previousStep.step_title"
+        @click="revertClick(previousStep)"
+        v-if="previousStep.id">
+        <template #prepend>
+          <v-icon color="error">mdi-arrow-u-left-top-bold</v-icon>
         </template>
       </v-list-item>
     </v-list>
   </v-menu>
 </template>
 
-<script setup lang="ts"></script>
+<script setup>
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useReportStore } from "@/store/ReportStore";
+
+const reportStore = useReportStore();
+const { completeStep, revertStep } = reportStore;
+const { selectedReport } = storeToRefs(reportStore);
+
+const currentStep = computed(() => {
+  if (selectedReport.value) {
+    for (const step of selectedReport.value.steps) {
+      if (step.complete_date) continue;
+      return step;
+    }
+  }
+  return {};
+});
+
+const previousStep = computed(() => {
+  if (selectedReport.value) {
+    for (let i = selectedReport.value.steps.length - 1; i > 0; i--) {
+      const step = selectedReport.value.steps[i];
+      if (step.complete_date) return step;
+    }
+  }
+  return {};
+});
+
+async function completeClick(step) {
+  await completeStep(step);
+}
+async function revertClick(step) {
+  await revertStep(step);
+}
+</script>
diff --git a/web/src/components/report/ReportListCard.vue b/web/src/components/report/ReportListCard.vue
index 7dd681e..2842711 100644
--- a/web/src/components/report/ReportListCard.vue
+++ b/web/src/components/report/ReportListCard.vue
@@ -41,7 +41,7 @@ function makeTitle(input: Incident) {
 
 function makeSubtitle(input: Incident) {
   return `Created: ${DateTime.fromISO(input.created_at.toString(), {
-    zone: "America/Whitehorse",
+    zone: "UTC",
   }).toRelative()}, Status: ${input.status_name}`;
 }
 
diff --git a/web/src/routes.ts b/web/src/routes.ts
index f69c585..e3fb8a9 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -3,7 +3,7 @@ import { createRouter, createWebHistory, RouteLocation, RouteRecordRaw } from "v
 import adminRoutes from "@/modules/administration/router";
 import { authGuard } from "@auth0/auth0-vue";
 
-const routes: Array<RouteRecordRaw> = [
+const routes: RouteRecordRaw[] = [
   {
     path: "/",
     component: () => import("@/layouts/DefaultNoAuth.vue"),
@@ -27,6 +27,9 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: "reports/:id",
         component: () => import("@/components/incident/DetailsPage.vue"),
+        meta: {
+          requiresAuth: true,
+        },
       },
 
       {
@@ -80,3 +83,14 @@ export const router = createRouter({
   history: createWebHistory(),
   routes,
 });
+
+router.beforeEach(async (to) => {
+  //document.title = `${APPLICATION_NAME} ${to.meta.title ? " - " + to.meta.title : ""}`
+
+  if (to.meta.requiresAuth === false) return true;
+
+  const isAuthenticated = await authGuard(to);
+  if (isAuthenticated) return true;
+
+  return false;
+});
diff --git a/web/src/store/DirectoryStore.ts b/web/src/store/DirectoryStore.ts
index 72266cd..9181ed4 100644
--- a/web/src/store/DirectoryStore.ts
+++ b/web/src/store/DirectoryStore.ts
@@ -1,7 +1,8 @@
-import { defineStore } from "pinia";
+import { defineStore, storeToRefs } from "pinia";
 
 import { useApiStore } from "@/store/ApiStore";
 import { DIRECTORY_URL } from "@/urls";
+import { useRoleStore } from "./RoleStore";
 
 export const useDirectoryStore = defineStore("directory", {
   state: () => ({
@@ -16,5 +17,34 @@ export const useDirectoryStore = defineStore("directory", {
         return resp.data;
       });
     },
+
+    async searchActionDirectory({ terms, showRoles = true }: { terms: string; showRoles: boolean }) {
+      const roleStore = useRoleStore();
+      const { roles } = storeToRefs(roleStore);
+      const { initialize } = roleStore;
+
+      if (roles.value.length < 1) await initialize();
+
+      const roleItems = new Array<any>();
+
+      for (const role of roles.value) {
+        if (role.name == "System Admin") continue;
+        if (role.name == "Monitor") continue;
+
+        roleItems.push({ long_name: role.description, actor_role_type_id: role.id });
+      }
+
+      if (!terms || terms.length < 2) {
+        return roleItems;
+      }
+
+      const api = useApiStore();
+
+      this.isLoading = true;
+      return api.call("post", `${DIRECTORY_URL}/search-action-directory`, { terms }).then((resp) => {
+        if (showRoles) return [...roleItems, ...resp.data];
+        return resp.data;
+      });
+    },
   },
 });
diff --git a/web/src/store/ReportStore.ts b/web/src/store/ReportStore.ts
index 9828911..9f71f38 100644
--- a/web/src/store/ReportStore.ts
+++ b/web/src/store/ReportStore.ts
@@ -109,6 +109,113 @@ export const useReportStore = defineStore("reports", {
           console.log(`Error in loadReportsForRole/${roleName}`);
         });
     },
+
+    async completeStep(step: any) {
+      if (!this.selectedReport) return;
+
+      const api = useApiStore();
+      return api
+        .secureCall("put", `${REPORTS_URL}/${this.selectedReport.id}/step/${step.id}/complete`)
+        .then((resp) => {
+          if (this.selectedReport) this.loadReport(this.selectedReport.id);
+        })
+        .catch(() => {
+          console.log(`Error in completeStep /step/${step.id}/complete`);
+        });
+    },
+
+    async revertStep(step: any) {
+      if (!this.selectedReport) return;
+
+      const api = useApiStore();
+      return api
+        .secureCall("put", `${REPORTS_URL}/${this.selectedReport.id}/step/${step.id}/revert`)
+        .then((resp) => {
+          if (this.selectedReport) this.loadReport(this.selectedReport.id);
+        })
+        .catch(() => {
+          console.log(`Error in revertStep /step/${step.id}/complete`);
+        });
+    },
+
+    async saveAction(action: any) {
+      if (!this.selectedReport) return;
+      let reportId = this.selectedReport.id;
+
+      const api = useApiStore();
+
+      if (action.id) {
+        return api
+          .secureCall("put", `${REPORTS_URL}/${reportId}/action/${action.id}`, action)
+          .then((resp) => {
+            if (this.selectedReport) this.loadReport(reportId);
+          })
+          .catch(() => {
+            console.log(`Error in completeStep /${reportId}/action/${action.id}`);
+          });
+      } else {
+        return api
+          .secureCall("post", `${REPORTS_URL}/${reportId}/action`, action)
+          .then((resp) => {
+            if (this.selectedReport) this.loadReport(reportId);
+          })
+          .catch(() => {
+            console.log(`Error in saveAction /${reportId}/action/${action.id}`);
+          });
+      }
+    },
+    async deleteAction(action: any) {
+      if (!this.selectedReport) return;
+      let reportId = this.selectedReport.id;
+
+      const api = useApiStore();
+
+      if (action.id) {
+        return api
+          .secureCall("delete", `${REPORTS_URL}/${reportId}/action/${action.id}`)
+          .then((resp) => {
+            if (this.selectedReport) this.loadReport(reportId);
+          })
+          .catch(() => {
+            console.log(`Error in deleteAction /${reportId}/action/${action.id}`);
+          });
+      }
+    },
+
+    async completeAction(action: any) {
+      if (!this.selectedReport) return;
+      let reportId = this.selectedReport.id;
+
+      const api = useApiStore();
+
+      if (action.id) {
+        return api
+          .secureCall("put", `${REPORTS_URL}/${reportId}/action/${action.id}/complete`)
+          .then((resp) => {
+            if (this.selectedReport) this.loadReport(reportId);
+          })
+          .catch(() => {
+            console.log(`Error in deleteAction /${reportId}/action/${action.id}`);
+          });
+      }
+    },
+    async revertAction(action: any) {
+      if (!this.selectedReport) return;
+      let reportId = this.selectedReport.id;
+
+      const api = useApiStore();
+
+      if (action.id) {
+        return api
+          .secureCall("put", `${REPORTS_URL}/${reportId}/action/${action.id}/revert`)
+          .then((resp) => {
+            if (this.selectedReport) this.loadReport(reportId);
+          })
+          .catch(() => {
+            console.log(`Error in deleteAction /${reportId}/action/${action.id}`);
+          });
+      }
+    },
   },
 });
 
diff --git a/web/src/store/RoleStore.ts b/web/src/store/RoleStore.ts
index 7939cb2..6a40f63 100644
--- a/web/src/store/RoleStore.ts
+++ b/web/src/store/RoleStore.ts
@@ -6,7 +6,7 @@ import { ROLE_URL } from "@/urls";
 export const useRoleStore = defineStore("role", {
   state: () => ({
     isLoading: false,
-    roles: [],
+    roles: [] as any[],
   }),
   actions: {
     async initialize() {