diff --git a/web/app/src/components/workers/WorkerActionsBar.vue b/web/app/src/components/workers/WorkerActionsBar.vue
new file mode 100644
index 00000000..620800b4
--- /dev/null
+++ b/web/app/src/components/workers/WorkerActionsBar.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="btn-bar workers">
+    <button class="btn wakeup" v-on:click="onButtonWakeup">Wake Up</button>
+    <button class="btn sleep" v-on:click="onButtonSleep">Sleep</button>
+    <button class="btn offline dangerous" v-on:click="onButtonOffline">Offline</button>
+  </div>
+</template>
+
+<script>
+import { useWorkers } from '@/stores/workers';
+import { useNotifs } from '@/stores/notifications';
+
+export default {
+  name: "WorkerActionsBar",
+  data: () => ({
+    workers: useWorkers(),
+    notifs: useNotifs(),
+  }),
+  computed: {
+  },
+  methods: {
+    onButtonWakeup() {
+      return this._handleWorkerActionPromise(
+        this.workers.reqStatusAwake());
+    },
+    onButtonSleep() {
+      return this._handleWorkerActionPromise(
+        this.workers.reqStatusAsleep());
+    },
+    onButtonOffline() {
+      return this._handleWorkerActionPromise(
+        this.workers.reqStatusOffline());
+    },
+
+    _handleWorkerActionPromise(promise) {
+      return promise
+        .catch((error) => {
+          const errorMsg = JSON.stringify(error); // TODO: handle API errors better.
+          this.notifs.add(`Error: ${errorMsg}`);
+        })
+    },
+  }
+}
+
+</script>
+
+<style scoped>
+</style>
diff --git a/web/app/src/components/workers/WorkersTable.vue b/web/app/src/components/workers/WorkersTable.vue
index 4ca09210..4033e750 100644
--- a/web/app/src/components/workers/WorkersTable.vue
+++ b/web/app/src/components/workers/WorkersTable.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <h2 class="column-title">Workers</h2>
+    <worker-actions-bar />
     <status-filter-bar
       :availableStatuses="availableStatuses"
       :activeStatuses="shownStatuses"
@@ -16,8 +17,10 @@ import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import { WorkerMgtApi } from '@/manager-api'
 import { indicator, workerStatus } from '@/statusindicator';
 import { apiClient } from '@/stores/api-query-count';
+import { useWorkers } from '@/stores/workers';
 
 import StatusFilterBar from '@/components/StatusFilterBar.vue'
+import WorkerActionsBar from '@/components/workers/WorkerActionsBar.vue'
 
 export default {
   name: 'WorkersTable',
@@ -25,9 +28,12 @@ export default {
   emits: ["tableRowClicked"],
   components: {
     StatusFilterBar,
+    WorkerActionsBar,
   },
   data: () => {
     return {
+      workers: useWorkers(),
+
       shownStatuses: [],
       availableStatuses: [], // Will be filled after data is loaded from the backend.
     };
diff --git a/web/app/src/stores/workers.js b/web/app/src/stores/workers.js
index e111fe32..315c09a0 100644
--- a/web/app/src/stores/workers.js
+++ b/web/app/src/stores/workers.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 
-import { WorkerMgtApi } from '@/manager-api';
+import { WorkerMgtApi, WorkerStatusChangeRequest } from '@/manager-api';
 import { apiClient } from '@/stores/api-query-count';
 
 
@@ -43,5 +43,23 @@ export const useWorkers = defineStore('workers', {
         activeWorkerID: "",
       });
     },
+
+    reqStatusAwake() { return this.requestStatus("awake"); },
+    reqStatusAsleep() { return this.requestStatus("asleep"); },
+    reqStatusOffline() { return this.requestStatus("offline"); },
+
+    /**
+     * Transition the active worker to the new status.
+     * @param {string} newStatus
+     * @returns a Promise for the API request.
+     */
+     requestStatus(newStatus) {
+      if (!this.activeWorkerID) {
+        console.warn(`requestStatus(${newStatus}) impossible, no active worker ID`);
+        return;
+      }
+      const statuschange = new WorkerStatusChangeRequest(newStatus, false);
+      return api.requestWorkerStatusChange(this.activeWorkerID, statuschange);
+    },
   },
 })