diff --git a/wsi_superpixel_guided_labeling/web_client/views/vue/components/ActiveLearning/ActiveLearningKeyboardShortcuts.vue b/wsi_superpixel_guided_labeling/web_client/views/vue/components/ActiveLearning/ActiveLearningKeyboardShortcuts.vue
index b247fd6b..04622a40 100644
--- a/wsi_superpixel_guided_labeling/web_client/views/vue/components/ActiveLearning/ActiveLearningKeyboardShortcuts.vue
+++ b/wsi_superpixel_guided_labeling/web_client/views/vue/components/ActiveLearning/ActiveLearningKeyboardShortcuts.vue
@@ -5,7 +5,12 @@ import _ from 'underscore';
 
 import { store, previousCard, nextCard } from './store.js';
 
+import MouseAndKeyboardControls from '../MouseAndKeyboardControls.vue';
+
 export default Vue.extend({
+    components: {
+        MouseAndKeyboardControls
+    },
     data() {
         return {
             showShortcuts: true
@@ -54,6 +59,7 @@ export default Vue.extend({
 
 <template>
   <div class="h-hotkeys-container">
+    <mouse-and-keyboard-controls :active-learning-setup="false" />
     <div class="h-hotkeys-header">
       <h5>Hotkeys</h5>
       <button
@@ -98,7 +104,8 @@ export default Vue.extend({
     top: 5px;
     left: 5px;
     padding: 5px;
-    min-width: 200px;
+    min-width: 250px;
+    max-width: 250px;
     display: flex;
     flex-direction: column;
     background-color: white;
@@ -120,4 +127,8 @@ export default Vue.extend({
     font-size: 12px;
     display: flex;
 }
+
+.h-bindings {
+    font-size: 12px;
+}
 </style>
diff --git a/wsi_superpixel_guided_labeling/web_client/views/vue/components/ActiveLearningSetup/ActiveLearningInitialLabels.vue b/wsi_superpixel_guided_labeling/web_client/views/vue/components/ActiveLearningSetup/ActiveLearningInitialLabels.vue
index 5b3574e5..b5ca6363 100644
--- a/wsi_superpixel_guided_labeling/web_client/views/vue/components/ActiveLearningSetup/ActiveLearningInitialLabels.vue
+++ b/wsi_superpixel_guided_labeling/web_client/views/vue/components/ActiveLearningSetup/ActiveLearningInitialLabels.vue
@@ -6,6 +6,8 @@ import { restRequest } from '@girder/core/rest';
 import { ViewerWidget } from '@girder/large_image_annotation/views';
 import ColorPickerInput from '@girder/histomicsui/vue/components/ColorPickerInput.vue';
 
+import MouseAndKeyboardControls from '../MouseAndKeyboardControls.vue';
+
 // Define some helpful constants for adding categories
 const boundaryColor = 'rgba(0, 0, 0, 1)';
 const defaultNewCategoryColor = 'rgba(255, 0, 0, 0.5)';
@@ -18,7 +20,8 @@ const colorPattern = /^(#[0-9a-fA-F]{3,4}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{8}|rgb\(\
 
 export default Vue.extend({
     components: {
-        ColorPickerInput
+        ColorPickerInput,
+        MouseAndKeyboardControls
     },
     props: ['backboneParent', 'imageNamesById', 'annotationsByImageId'],
     data() {
@@ -400,105 +403,110 @@ export default Vue.extend({
 <template>
   <div class="h-al-setup-categories">
     <div
-      v-if="pixelmapRendered"
-      class="h-add-new-category"
+      class="h-setup-categories-body"
     >
-      <div class="h-category-form">
-        <div class="h-form-controls">
-          <div class="form-group">
-            <label for="category-label">Label</label>
-            <input
-              id="category-label"
-              v-model="currentCategoryLabel"
-              class="form-control input-sm h-active-learning-input"
-            >
-          </div>
-          <div class="form-group">
-            <label for="fill-color">Fill Color</label>
-            <color-picker-input
-              :key="categoryIndex"
-              v-model="currentCategoryFillColor"
-              class="h-active-learning-input"
-              :color="currentCategoryFillColor"
-            />
+      <div
+        v-if="pixelmapRendered"
+        class="h-add-new-category"
+      >
+        <div class="h-category-form">
+          <div class="h-form-controls">
+            <div class="form-group">
+              <label for="category-label">Label</label>
+              <input
+                id="category-label"
+                v-model="currentCategoryLabel"
+                class="form-control input-sm h-active-learning-input"
+              >
+            </div>
+            <div class="form-group">
+              <label for="fill-color">Fill Color</label>
+              <color-picker-input
+                :key="categoryIndex"
+                v-model="currentCategoryFillColor"
+                class="h-active-learning-input"
+                :color="currentCategoryFillColor"
+              />
+            </div>
           </div>
-        </div>
-        <div class="h-error-messages">
-          <p
-            v-if="!currentCategoryFormValid || !currentLabelsValid"
-            class="form-validation-error"
-          >
-            Please fix all errors to continue
-          </p>
-          <ul v-if="currentFormErrors.length > 0">
-            <li
-              v-for="error in currentFormErrors"
-              :key="error"
-              class="form-validation-error"
-            >
-              {{ error }}
-            </li>
-          </ul>
-          <ul v-if="currentLabelingErrors.length > 0">
-            <li
-              v-for="error in currentLabelingErrors"
-              :key="error"
+          <div class="h-error-messages">
+            <p
+              v-if="!currentCategoryFormValid || !currentLabelsValid"
               class="form-validation-error"
             >
-              {{ error }}
-            </li>
-          </ul>
+              Please fix all errors to continue
+            </p>
+            <ul v-if="currentFormErrors.length > 0">
+              <li
+                v-for="error in currentFormErrors"
+                :key="error"
+                class="form-validation-error"
+              >
+                {{ error }}
+              </li>
+            </ul>
+            <ul v-if="currentLabelingErrors.length > 0">
+              <li
+                v-for="error in currentLabelingErrors"
+                :key="error"
+                class="form-validation-error"
+              >
+                {{ error }}
+              </li>
+            </ul>
+          </div>
         </div>
-      </div>
-      <button
-        class="btn btn-primary h-previous-category-btn"
-        :disabled="categoryIndex === 0 || !currentCategoryFormValid"
-        @click="previousCategory"
-      >
-        Previous
-      </button>
-      <button
-        class="btn btn-primary h-next-category-btn"
-        :disabled="categoryIndex >= categories.length - 1 || !currentCategoryFormValid"
-        @click="nextCategory"
-      >
-        Next
-      </button>
-      <button
-        class="btn btn-primary h-add-category-btn"
-        :disabled="!currentCategoryFormValid"
-        @click="addCategory"
-      >
-        Add Category
-      </button>
-      <button
-        class="btn btn-primary h-start-training-btn"
-        :disabled="!currentCategoryFormValid || !currentLabelsValid"
-        @click="beginTraining"
-      >
-        Begin training
-      </button>
-      <div class="h-al-image-selector">
-        <span>Image: </span>
-        <select
-          v-model="currentImageId"
-          class="h-al-image-select"
+        <button
+          class="btn btn-primary h-previous-category-btn"
+          :disabled="categoryIndex === 0 || !currentCategoryFormValid"
+          @click="previousCategory"
+        >
+          Previous
+        </button>
+        <button
+          class="btn btn-primary h-next-category-btn"
+          :disabled="categoryIndex >= categories.length - 1 || !currentCategoryFormValid"
+          @click="nextCategory"
         >
-          <option
-            v-for="imageId in Object.keys(imageNamesById)"
-            :key="imageId"
-            :value="imageId"
+          Next
+        </button>
+        <button
+          class="btn btn-primary h-add-category-btn"
+          :disabled="!currentCategoryFormValid"
+          @click="addCategory"
+        >
+          Add Category
+        </button>
+        <button
+          class="btn btn-primary h-start-training-btn"
+          :disabled="!currentCategoryFormValid || !currentLabelsValid"
+          @click="beginTraining"
+        >
+          Begin training
+        </button>
+        <div class="h-al-image-selector">
+          <span>Image: </span>
+          <select
+            v-model="currentImageId"
+            class="h-al-image-select"
           >
-            {{ imageNamesById[imageId] }}
-          </option>
-        </select>
+            <option
+              v-for="imageId in Object.keys(imageNamesById)"
+              :key="imageId"
+              :value="imageId"
+            >
+              {{ imageNamesById[imageId] }}
+            </option>
+          </select>
+        </div>
       </div>
-    </div>
-    <div class="h-setup-categories-body">
       <div
         ref="map"
         class="h-setup-categories-map"
       />
+    </div>
+    <div class="h-setup-categories-information">
+      <mouse-and-keyboard-controls :active-learning-setup="true" />
       <div class="h-category-setup-progress">
         <div
           v-for="(key, index) in Object.keys(labeledSuperpixelCounts)"
@@ -517,16 +525,19 @@ export default Vue.extend({
     height: 100%;
     position: absolute;
     display: flex;
-    flex-direction: column;
 }
-.h-setup-categories-body {
-    width: 100%;
+.h-setup-categories-information {
+    width: 33%;
     height: 100%;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
 }
-.h-setup-categories-map {
+
+.h-setup-categories-body {
     width: 67%;
+}
+
+.h-setup-categories-map {
     height: 600px;
     border: 1px solid #f0f0f0;
 }
diff --git a/wsi_superpixel_guided_labeling/web_client/views/vue/components/MouseAndKeyboardControls.vue b/wsi_superpixel_guided_labeling/web_client/views/vue/components/MouseAndKeyboardControls.vue
new file mode 100644
index 00000000..10453f3a
--- /dev/null
+++ b/wsi_superpixel_guided_labeling/web_client/views/vue/components/MouseAndKeyboardControls.vue
@@ -0,0 +1,107 @@
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+    props: ['activeLearningSetup'],
+    data() {
+        return {
+            showControls: true
+        };
+    },
+    mounted() {
+        // Default to hidden when we are not in the setup step
+        this.showControls = this.activeLearningSetup;
+    }
+});
+</script>
+
+<template>
+  <div :class="{'h-controls-container': activeLearningSetup}">
+    <div class="h-controls-header">
+      <h5>Mouse and Keyboard Controls</h5>
+      <button
+        class="h-controls-toggle"
+        @click="showControls = !showControls"
+      >
+        <i
+          v-if="showControls"
+          class="icon-up-open"
+        />
+        <i
+          v-else
+          class="icon-down-open"
+        />
+      </button>
+    </div>
+    <div v-if="showControls">
+      <h6 v-if="activeLearningSetup">
+        Annotations
+      </h6>
+      <ul
+        v-if="activeLearningSetup"
+        class="h-controls"
+      >
+        <li>Left-click: Label single superpixel</li>
+        <li>Shift-left-drag: Continuously label superpixels</li>
+      </ul>
+      <h6>Pan</h6>
+      <ul class="h-controls">
+        <li>Left-drag</li>
+        <li>Middle-drag: This works even when editing annotations.</li>
+        <li>Single touch drag</li>
+        <li v-if="activeLearningSetup">
+          Arrow keys / Shift-arrow keys / Shift-ctrl-arrow keys
+        </li>
+      </ul>
+      <h6>Zoom</h6>
+      <ul class="h-controls">
+        <li>Right-drag</li>
+        <li>Mouse wheel</li>
+        <li>Multi-touch spread or contract</li>
+        <li v-if="activeLearningSetup">
+          Plus, minus / Shift-plus, shift-minus / Shift-ctrl-plus, shift-ctrl-minus
+        </li>
+        <li v-if="activeLearningSetup">
+          1 - 7: The number keys 1 - 7 will zoom to discrete zoom levels.
+        </li>
+        <li>Shift-left-drag, shift-right-drag: Zoom into or out of the selected rectangle</li>
+      </ul>
+      <h6>Rotate</h6>
+      <ul class="h-controls">
+        <li>Left-ctrl-drag</li>
+        <li>Ctrl-mouse wheel</li>
+        <li>Multi-touch rotate</li>
+        <li v-if="activeLearningSetup">
+          &lt;, &gt; (also . or ,) rotate the image a small amount. If shift is held down, &lt; and &gt; rotate the image 90 degrees.
+        </li>
+        <li v-if="activeLearningSetup">
+          0: 0 returns the image to the default orientation.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.h-controls-container {
+  margin-right: 15px;
+}
+
+.h-controls-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+.h-controls-toggle {
+    background-color: transparent;
+    border: none;
+}
+
+.h-controls {
+    font-size: 12px;
+}
+
+h6 {
+  margin-bottom: 0px;
+}
+</style>