diff --git a/client/App.vue b/client/App.vue
index 18eebe7cf..cd4a074df 100644
--- a/client/App.vue
+++ b/client/App.vue
@@ -28,6 +28,8 @@ import {
   getEnvironmentList,
   getEnvironmentLocation,
   getLatestNewsItems,
+  parseStringToBoolean,
+  workflowHistoryEventHighlightListAddOrUpdate,
 } from '~helpers';
 
 export default {
@@ -77,6 +79,18 @@ export default {
           localStorage.getItem(LOCAL_STORAGE_SETTINGS.timezone) ||
           TIMEZONE_LOCAL,
         timezoneOptions: TIMEZONE_OPTIONS,
+        workflowHistoryEventHighlightList:
+          JSON.parse(
+            localStorage.getItem(
+              LOCAL_STORAGE_SETTINGS.workflowHistoryEventHighlightList
+            )
+          ) || [],
+        workflowHistoryEventHighlightListEnabled: parseStringToBoolean(
+          localStorage.getItem(
+            LOCAL_STORAGE_SETTINGS.workflowHistoryEventHighlightListEnabled
+          ),
+          true
+        ),
       },
     };
   },
@@ -144,14 +158,39 @@ export default {
     onSettingsChange(values) {
       for (const key in values) {
         const value = values[key];
+        const storeValue =
+          typeof value === 'object' ? JSON.stringify(value) : value;
+
+        localStorage.setItem(LOCAL_STORAGE_SETTINGS[key], storeValue);
 
-        localStorage.setItem(LOCAL_STORAGE_SETTINGS[key], value);
         this.settings[key] = value;
       }
     },
     onSettingsClick() {
       this.$modal.show('settings-modal');
     },
+    onWorkflowHistoryEventParamToggle({
+      eventParam: { key: eventParamName, isHighlighted },
+      eventType,
+    }) {
+      const {
+        settings: { workflowHistoryEventHighlightList },
+      } = this;
+
+      this.settings.workflowHistoryEventHighlightList = workflowHistoryEventHighlightListAddOrUpdate(
+        {
+          eventParamName,
+          eventType,
+          isEnabled: !isHighlighted,
+          workflowHistoryEventHighlightList,
+        }
+      );
+
+      localStorage.setItem(
+        LOCAL_STORAGE_SETTINGS.workflowHistoryEventHighlightList,
+        JSON.stringify(this.settings.workflowHistoryEventHighlightList)
+      );
+    },
   },
   watch: {
     'notification.show'(value) {
@@ -239,6 +278,13 @@ export default {
       :date-format="settings.dateFormat"
       :time-format="settings.timeFormat"
       :timezone="settings.timezone"
+      :workflow-history-event-highlight-list="
+        settings.workflowHistoryEventHighlightList
+      "
+      :workflow-history-event-highlight-list-enabled="
+        settings.workflowHistoryEventHighlightListEnabled
+      "
+      @onWorkflowHistoryEventParamToggle="onWorkflowHistoryEventParamToggle"
       @onNotification="onNotification"
     ></router-view>
     <modals-container />
@@ -251,7 +297,13 @@ export default {
       :time-format-options="settings.timeFormatOptions"
       :timezone="settings.timezone"
       :timezone-options="settings.timezoneOptions"
-      @onChange="onSettingsChange"
+      :workflow-history-event-highlight-list="
+        settings.workflowHistoryEventHighlightList
+      "
+      :workflow-history-event-highlight-list-enabled="
+        settings.workflowHistoryEventHighlightListEnabled
+      "
+      @change="onSettingsChange"
     />
   </main>
 </template>
diff --git a/client/components/button-icon.vue b/client/components/button-icon.vue
index aacc16e1a..911ca3ac0 100644
--- a/client/components/button-icon.vue
+++ b/client/components/button-icon.vue
@@ -1,6 +1,9 @@
 <template>
   <component
+    :aria-disabled="disabled"
     class="button-icon"
+    :class="{ disabled: disabled }"
+    :disabled="disabled"
     :href="href"
     :is="tag"
     :to="to"
@@ -11,7 +14,9 @@
       :class="{ [icon]: icon, [color]: color }"
       :style="{ 'font-size': size }"
     />
-    <span class="label" :class="{ [color]: color }">{{ label }}</span>
+    <span class="label" :class="{ [color]: color }" v-if="label">{{
+      label
+    }}</span>
   </component>
 </template>
 
@@ -23,6 +28,9 @@ export default {
       type: String,
       validator: value => ['primary', 'secondary'].includes(value),
     },
+    disabled: {
+      type: Boolean,
+    },
     href: {
       type: String,
     },
@@ -46,7 +54,9 @@ export default {
   },
   methods: {
     onClick(...args) {
-      this.$emit('click', ...args);
+      if (!this.disabled) {
+        this.$emit('click', ...args);
+      }
     },
   },
 };
@@ -64,6 +74,11 @@ export default {
   transition: all 400ms ease;
   white-space: nowrap;
 
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
   .icon {
     vertical-align: middle;
   }
diff --git a/client/components/data-viewer.vue b/client/components/data-viewer.vue
index c5bc78b8e..4335a9106 100644
--- a/client/components/data-viewer.vue
+++ b/client/components/data-viewer.vue
@@ -5,12 +5,7 @@
       class="view-full-screen"
       @click.stop.prevent="viewFullScreen"
     ></a>
-    <prism v-if="highlight !== false" language="json" ref="codebox">{{
-      item.jsonStringDisplay
-    }}</prism>
-    <pre v-if="highlight === false" ref="codebox">{{
-      item.jsonStringDisplay
-    }}</pre>
+    <prism language="json" ref="codebox">{{ item.jsonStringDisplay }}</prism>
   </div>
 </template>
 
@@ -21,7 +16,7 @@ import Prism from 'vue-prism-component';
 
 export default {
   name: 'data-viewer',
-  props: ['compact', 'highlight', 'item', 'title'],
+  props: ['compact', 'item', 'title'],
   data() {
     return {};
   },
@@ -42,9 +37,7 @@ export default {
       this.$el.classList[action]('overflow');
     };
     window.addEventListener('resize', this.checkOverflow);
-    ['item', 'highlight', 'compact'].forEach(e =>
-      this.$watch(e, this.checkOverflow)
-    );
+    ['item', 'compact'].forEach(e => this.$watch(e, this.checkOverflow));
     this.$watch(() => this.$route, this.checkOverflow);
   },
   mounted() {
diff --git a/client/components/detail-list.vue b/client/components/detail-list.vue
index 2a5912c7c..22254b75b 100644
--- a/client/components/detail-list.vue
+++ b/client/components/detail-list.vue
@@ -1,12 +1,14 @@
 <script>
-import { DataViewer } from '~components';
+import DataViewer from './data-viewer';
+import HighlightToggle from './highlight-toggle';
 import { preKeys } from '~constants';
 
 export default {
   name: 'detail-list',
-  props: ['compact', 'highlight', 'item', 'title'],
+  props: ['compact', 'isHighlightEnabled', 'item', 'title'],
   components: {
     'data-viewer': DataViewer,
+    'highlight-toggle': HighlightToggle,
   },
   data() {
     return {};
@@ -17,7 +19,7 @@ export default {
     },
   },
   render(h) {
-    const { highlight, compact, title } = this;
+    const { compact, title } = this;
 
     function dd(kvp) {
       if (kvp.routeLink) {
@@ -30,7 +32,6 @@ export default {
               props: {
                 item: kvp.value,
                 compact,
-                highlight,
                 title: `${title} - ${kvp.key}`,
               },
             }),
@@ -43,7 +44,19 @@ export default {
       { class: 'details' },
       this.item.kvps.map(kvp =>
         h('div', { attrs: { 'data-prop': kvp.key } }, [
-          h('dt', null, kvp.key),
+          h('highlight-toggle', {
+            props: {
+              isHighlighted: kvp.isHighlighted,
+              isEnabled: this.isHighlightEnabled,
+              label: kvp.key,
+              tag: 'dt',
+            },
+            on: {
+              click: () => {
+                this.$emit('onWorkflowHistoryEventParamToggle', kvp);
+              },
+            },
+          }),
           h('dd', null, dd(kvp)),
         ])
       )
diff --git a/client/components/feature-flag.vue b/client/components/feature-flag.vue
index 34be7243e..8db0cd0da 100644
--- a/client/components/feature-flag.vue
+++ b/client/components/feature-flag.vue
@@ -24,17 +24,21 @@ export default {
     },
     params: {
       type: Object,
-    }
+    },
   },
   data() {
     return {
       isFeatureFlagEnabled: false,
-    }
+    };
   },
   async mounted() {
     const { name, params } = this;
     const featureFlagService = new FeatureFlagService();
-    this.isFeatureFlagEnabled = await featureFlagService.isFeatureFlagEnabled({ name, params });
+
+    this.isFeatureFlagEnabled = await featureFlagService.isFeatureFlagEnabled({
+      name,
+      params,
+    });
   },
 };
 </script>
diff --git a/client/components/flex-grid.vue b/client/components/flex-grid.vue
index a3eecffd5..c5bba313b 100644
--- a/client/components/flex-grid.vue
+++ b/client/components/flex-grid.vue
@@ -3,6 +3,7 @@
     class="flex-grid"
     :style="{
       'align-items': alignItems,
+      'flex-direction': flexDirection,
       'justify-content': justifyContent,
       width: width,
     }"
@@ -13,14 +14,27 @@
 
 <script>
 export default {
-  props: ['alignItems', 'justifyContent', 'width'],
+  props: {
+    alignItems: {
+      type: String,
+    },
+    flexDirection: {
+      type: String,
+      default: 'row',
+    },
+    justifyContent: {
+      type: String,
+    },
+    width: {
+      type: String,
+    },
+  },
 };
 </script>
 
 <style lang="stylus">
 .flex-grid {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
 }
 </style>
diff --git a/client/components/highlight-toggle.vue b/client/components/highlight-toggle.vue
new file mode 100644
index 000000000..985fcd058
--- /dev/null
+++ b/client/components/highlight-toggle.vue
@@ -0,0 +1,80 @@
+<template>
+  <component class="highlight-toggle" :is="tag">
+    <span class="label" :class="{ highlight: isHighlighted }">
+      {{ label }}
+    </span>
+    <button-icon
+      :class="{
+        active: isHighlighted,
+        disabled: !isEnabled,
+      }"
+      icon="icon_search"
+      @click="onClick"
+    />
+  </component>
+</template>
+
+<script>
+import ButtonIcon from './button-icon';
+
+export default {
+  name: 'highlight-toggle',
+  props: {
+    isHighlighted: {
+      type: Boolean,
+      default: false,
+    },
+    isEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+  components: {
+    'button-icon': ButtonIcon,
+  },
+  methods: {
+    onClick(...args) {
+      if (this.isEnabled) {
+        this.$emit('click', ...args);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="stylus">
+.highlight-toggle {
+  line-height: 18px;
+
+  &:hover {
+    .button-icon {
+      display: inline-block;
+    }
+  }
+
+  .button-icon {
+    display: none;
+    min-width: 24px;
+    padding: 0;
+
+    &.active {
+      display: inline-block;
+    }
+
+    &.disabled {
+      display: none !important;
+    }
+  }
+
+  .label.highlight {
+    font-weight: bold;
+  }
+}
+</style>
diff --git a/client/components/index.js b/client/components/index.js
index cb0a9d080..c97b4aaf4 100644
--- a/client/components/index.js
+++ b/client/components/index.js
@@ -10,6 +10,7 @@ export { default as ErrorMessage } from './error-message';
 export { default as FeatureFlag } from './feature-flag';
 export { default as FlexGrid } from './flex-grid';
 export { default as FlexGridItem } from './flex-grid-item';
+export { default as HighlightToggle } from './highlight-toggle';
 export { default as LoadingMessage } from './loading-message';
 export { default as LoadingSpinner } from './loading-spinner';
 export { default as NavigationBar } from './navigation-bar';
diff --git a/client/components/settings-modal.vue b/client/components/settings-modal.vue
deleted file mode 100644
index 17ed5648d..000000000
--- a/client/components/settings-modal.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<template>
-  <modal name="settings-modal" @before-close="onBeforeClose">
-    <div class="settings-modal">
-      <div class="header">
-        <flex-grid align-items="center">
-          <flex-grid-item grow="1">
-            <h2>Settings</h2>
-          </flex-grid-item>
-          <flex-grid-item width="40px">
-            <button-icon
-              icon="icon_delete-thin"
-              size="30px"
-              @click="onCloseClick"
-            />
-          </flex-grid-item>
-        </flex-grid>
-      </div>
-      <div class="content">
-        <h3>DateTime options</h3>
-        <div class="content-item">
-          <label for="settingsExample">
-            Example
-          </label>
-          <text-input
-            name="settingsExample"
-            :readonly="true"
-            :value="exampleFormattedDateTime"
-          />
-        </div>
-        <div class="content-item">
-          <flex-grid>
-            <flex-grid-item grow="1">
-              <label for="settingsDateFormat">
-                Date format
-              </label>
-              <v-select
-                input-id="settingsDateFormat"
-                :on-change="onDateFormatChange"
-                :options="dateFormatOptions"
-                :value="modalDateFormat"
-              />
-            </flex-grid-item>
-            <flex-grid-item grow="1">
-              <label for="settingsTimeFormat">
-                Time format
-              </label>
-              <v-select
-                input-id="settingsTimeFormat"
-                :on-change="onTimeFormatChange"
-                :options="timeFormatOptions"
-                :value="modalTimeFormat"
-              />
-            </flex-grid-item>
-            <flex-grid-item grow="1">
-              <label for="settingsTimezone">
-                Timezone
-              </label>
-              <v-select
-                input-id="settingsTimezone"
-                :on-change="onTimezoneChange"
-                :options="timezoneOptions"
-                :value="modalTimezone"
-              />
-            </flex-grid-item>
-          </flex-grid>
-        </div>
-      </div>
-      <div class="footer">
-        <flex-grid align-items="center" justify-content="flex-end">
-          <flex-grid-item width="102px">
-            <button-fill
-              color="tertiary"
-              label="CANCEL"
-              @click="onCloseClick"
-            />
-          </flex-grid-item>
-          <flex-grid-item>
-            <button-fill
-              :disabled="!isSettingsChanged"
-              label="APPLY"
-              @click="onSubmitClick"
-            />
-          </flex-grid-item>
-        </flex-grid>
-      </div>
-    </div>
-  </modal>
-</template>
-
-<script>
-import ButtonFill from './button-fill';
-import ButtonIcon from './button-icon';
-import FlexGrid from './flex-grid';
-import FlexGridItem from './flex-grid-item';
-import TextInput from './text-input';
-import { getDatetimeFormattedString } from '~helpers';
-
-export default {
-  props: {
-    dateFormat: {
-      type: String,
-    },
-    dateFormatOptions: {
-      type: Array,
-    },
-    timeFormat: {
-      type: String,
-    },
-    timeFormatOptions: {
-      type: Array,
-    },
-    timezone: {
-      type: String,
-    },
-    timezoneOptions: {
-      type: Array,
-    },
-  },
-  data() {
-    return {
-      exampleDate: new Date(),
-      modalDateFormat: this.getModalDateFormat(this.dateFormat),
-      modalTimeFormat: this.getModalTimeFormat(this.timeFormat),
-      modalTimezone: this.getModalTimezone(this.timezone),
-    };
-  },
-  computed: {
-    exampleFormattedDateTime() {
-      return getDatetimeFormattedString({
-        date: this.exampleDate,
-        dateFormat: this.modalDateFormat.value,
-        timeFormat: this.modalTimeFormat.value,
-        timezone: this.modalTimezone.value,
-      });
-    },
-    isDateFormatChanged() {
-      return this.modalDateFormat.value !== this.dateFormat;
-    },
-    isSettingsChanged() {
-      return (
-        this.isDateFormatChanged ||
-        this.isTimeFormatChanged ||
-        this.isTimezoneChanged
-      );
-    },
-    isTimeFormatChanged() {
-      return this.modalTimeFormat.value !== this.timeFormat;
-    },
-    isTimezoneChanged() {
-      return this.modalTimezone.value !== this.timezone;
-    },
-  },
-  methods: {
-    close() {
-      this.$modal.hide('settings-modal');
-    },
-    getModalDateFormat(dateFormat) {
-      return this.dateFormatOptions.find(({ value }) => dateFormat === value);
-    },
-    getModalTimeFormat(timeFormat) {
-      return this.timeFormatOptions.find(({ value }) => timeFormat === value);
-    },
-    getModalTimezone(timezone) {
-      return this.timezoneOptions.find(({ value }) => timezone === value);
-    },
-    onCloseClick() {
-      this.close();
-    },
-    onBeforeClose() {
-      this.resetModalValues();
-    },
-    onDateFormatChange(dateFormat) {
-      this.modalDateFormat = dateFormat;
-    },
-    onTimeFormatChange(timeFormat) {
-      this.modalTimeFormat = timeFormat;
-    },
-    onTimezoneChange(timezone) {
-      this.modalTimezone = timezone;
-    },
-    onSubmitClick() {
-      this.$emit('onChange', {
-        ...(this.isDateFormatChanged && {
-          dateFormat: this.modalDateFormat.value,
-        }),
-        ...(this.isTimeFormatChanged && {
-          timeFormat: this.modalTimeFormat.value,
-        }),
-        ...(this.isTimezoneChanged && { timezone: this.modalTimezone.value }),
-      });
-      this.close();
-    },
-    resetModalValues() {
-      this.setModalDateFormat(this.dateFormat);
-      this.setModalTimeFormat(this.timeFormat);
-      this.setModalTimezone(this.timezone);
-    },
-    setModalDateFormat(dateFormat) {
-      this.modalDateFormat = this.getModalDateFormat(dateFormat);
-    },
-    setModalTimeFormat(timeFormat) {
-      this.modalTimeFormat = this.getModalTimeFormat(timeFormat);
-    },
-    setModalTimezone(timezone) {
-      this.modalTimezone = this.getModalTimezone(timezone);
-    },
-  },
-  components: {
-    'button-fill': ButtonFill,
-    'button-icon': ButtonIcon,
-    'flex-grid': FlexGrid,
-    'flex-grid-item': FlexGridItem,
-    'text-input': TextInput,
-  },
-  watch: {
-    dateFormat(dateFormat) {
-      this.setModalDateFormat(dateFormat);
-    },
-    timeFormat(timeFormat) {
-      this.setModalTimeFormat(timeFormat);
-    },
-    timezone(timezone) {
-      this.setModalTimezone(timezone);
-    },
-  },
-};
-</script>
-
-<style lang="stylus">
-.settings-modal {
-  .content {
-    min-height: 320px;
-    min-width: 400px;
-    overflow-y: auto;
-  }
-
-  .content-item {
-    margin: 15px 0;
-  }
-
-  .dropdown-menu {
-    min-width: 90px !important;
-  }
-
-  .footer {
-    padding-top: 15px;
-  }
-
-  label {
-    display: inline-block;
-    margin-bottom: 5px;
-  }
-
-  .header {
-    padding-bottom: 15px;
-  }
-}
-</style>
diff --git a/client/components/settings-modal/components/settings-date-format.vue b/client/components/settings-modal/components/settings-date-format.vue
new file mode 100644
index 000000000..837c61dc6
--- /dev/null
+++ b/client/components/settings-modal/components/settings-date-format.vue
@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <div class="content">
+      <div class="content-item">
+        <label for="settingsExample">
+          Example
+        </label>
+        <text-input
+          name="settingsExample"
+          :readonly="true"
+          :value="exampleFormattedDateTime"
+        />
+      </div>
+      <div class="content-item">
+        <flex-grid>
+          <flex-grid-item grow="1">
+            <label for="settingsDateFormat">
+              Date format
+            </label>
+            <v-select
+              input-id="settingsDateFormat"
+              :on-change="onDateFormatChange"
+              :options="dateFormatOptions"
+              :value="modalDateFormat"
+            />
+          </flex-grid-item>
+          <flex-grid-item grow="1">
+            <label for="settingsTimeFormat">
+              Time format
+            </label>
+            <v-select
+              input-id="settingsTimeFormat"
+              :on-change="onTimeFormatChange"
+              :options="timeFormatOptions"
+              :value="modalTimeFormat"
+            />
+          </flex-grid-item>
+          <flex-grid-item grow="1">
+            <label for="settingsTimezone">
+              Timezone
+            </label>
+            <v-select
+              input-id="settingsTimezone"
+              :on-change="onTimezoneChange"
+              :options="timezoneOptions"
+              :value="modalTimezone"
+            />
+          </flex-grid-item>
+        </flex-grid>
+      </div>
+    </div>
+    <settings-footer
+      :submit-enabled="isSettingsChanged"
+      @cancel="onClose"
+      @submit="onSubmit"
+    />
+  </div>
+</template>
+
+<script>
+import FlexGrid from '../../flex-grid';
+import FlexGridItem from '../../flex-grid-item';
+import TextInput from '../../text-input';
+import SettingsFooter from './settings-footer';
+import { getDatetimeFormattedString } from '~helpers';
+
+export default {
+  name: 'settings-date-format',
+  props: {
+    dateFormat: {
+      type: String,
+    },
+    dateFormatOptions: {
+      type: Array,
+    },
+    timeFormat: {
+      type: String,
+    },
+    timeFormatOptions: {
+      type: Array,
+    },
+    timezone: {
+      type: String,
+    },
+    timezoneOptions: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      exampleDate: new Date(),
+      modalDateFormat: this.getModalDateFormat(this.dateFormat),
+      modalTimeFormat: this.getModalTimeFormat(this.timeFormat),
+      modalTimezone: this.getModalTimezone(this.timezone),
+    };
+  },
+  computed: {
+    exampleFormattedDateTime() {
+      return getDatetimeFormattedString({
+        date: this.exampleDate,
+        dateFormat: this.modalDateFormat.value,
+        timeFormat: this.modalTimeFormat.value,
+        timezone: this.modalTimezone.value,
+      });
+    },
+    isDateFormatChanged() {
+      return this.modalDateFormat.value !== this.dateFormat;
+    },
+    isSettingsChanged() {
+      return (
+        this.isDateFormatChanged ||
+        this.isTimeFormatChanged ||
+        this.isTimezoneChanged
+      );
+    },
+    isTimeFormatChanged() {
+      return this.modalTimeFormat.value !== this.timeFormat;
+    },
+    isTimezoneChanged() {
+      return this.modalTimezone.value !== this.timezone;
+    },
+  },
+  methods: {
+    getModalDateFormat(dateFormat) {
+      return this.dateFormatOptions.find(({ value }) => dateFormat === value);
+    },
+    getModalTimeFormat(timeFormat) {
+      return this.timeFormatOptions.find(({ value }) => timeFormat === value);
+    },
+    getModalTimezone(timezone) {
+      return this.timezoneOptions.find(({ value }) => timezone === value);
+    },
+    onClose() {
+      this.$emit('close');
+    },
+    onDateFormatChange(dateFormat) {
+      this.modalDateFormat = dateFormat;
+    },
+    onTimeFormatChange(timeFormat) {
+      this.modalTimeFormat = timeFormat;
+    },
+    onTimezoneChange(timezone) {
+      this.modalTimezone = timezone;
+    },
+    onSubmit() {
+      this.$emit('change', {
+        ...(this.isDateFormatChanged && {
+          dateFormat: this.modalDateFormat.value,
+        }),
+        ...(this.isTimeFormatChanged && {
+          timeFormat: this.modalTimeFormat.value,
+        }),
+        ...(this.isTimezoneChanged && { timezone: this.modalTimezone.value }),
+      });
+    },
+    setModalDateFormat(dateFormat) {
+      this.modalDateFormat = this.getModalDateFormat(dateFormat);
+    },
+    setModalTimeFormat(timeFormat) {
+      this.modalTimeFormat = this.getModalTimeFormat(timeFormat);
+    },
+    setModalTimezone(timezone) {
+      this.modalTimezone = this.getModalTimezone(timezone);
+    },
+  },
+  components: {
+    'flex-grid': FlexGrid,
+    'flex-grid-item': FlexGridItem,
+    'settings-footer': SettingsFooter,
+    'text-input': TextInput,
+  },
+  watch: {
+    dateFormat(dateFormat) {
+      this.setModalDateFormat(dateFormat);
+    },
+    timeFormat(timeFormat) {
+      this.setModalTimeFormat(timeFormat);
+    },
+    timezone(timezone) {
+      this.setModalTimezone(timezone);
+    },
+  },
+};
+</script>
diff --git a/client/components/settings-modal/components/settings-footer.vue b/client/components/settings-modal/components/settings-footer.vue
new file mode 100644
index 000000000..4bb0086aa
--- /dev/null
+++ b/client/components/settings-modal/components/settings-footer.vue
@@ -0,0 +1,42 @@
+<template>
+  <flex-grid align-items="center" justify-content="flex-end">
+    <flex-grid-item width="102px">
+      <button-fill color="tertiary" label="CANCEL" @click="onCancelClick" />
+    </flex-grid-item>
+    <flex-grid-item>
+      <button-fill
+        :disabled="!submitEnabled"
+        label="APPLY"
+        @click="onSubmitClick"
+      />
+    </flex-grid-item>
+  </flex-grid>
+</template>
+
+<script>
+import ButtonFill from '../../button-fill';
+import FlexGrid from '../../flex-grid';
+import FlexGridItem from '../../flex-grid-item';
+
+export default {
+  name: 'settings-footer',
+  props: {
+    submitEnabled: {
+      type: Boolean,
+    },
+  },
+  methods: {
+    onCancelClick() {
+      this.$emit('cancel');
+    },
+    onSubmitClick() {
+      this.$emit('submit');
+    },
+  },
+  components: {
+    'button-fill': ButtonFill,
+    'flex-grid': FlexGrid,
+    'flex-grid-item': FlexGridItem,
+  },
+};
+</script>
diff --git a/client/components/settings-modal/components/settings-header.vue b/client/components/settings-modal/components/settings-header.vue
new file mode 100644
index 000000000..ffc5378c8
--- /dev/null
+++ b/client/components/settings-modal/components/settings-header.vue
@@ -0,0 +1,51 @@
+<template>
+  <flex-grid align-items="center" class="settings-header">
+    <flex-grid-item grow="1">
+      <h2>{{ displayTitle }}</h2>
+    </flex-grid-item>
+    <flex-grid-item width="40px">
+      <button-icon icon="icon_delete-thin" size="30px" @click="onCloseClick" />
+    </flex-grid-item>
+  </flex-grid>
+</template>
+
+<script>
+import ButtonIcon from '../../button-icon';
+import FlexGrid from '../../flex-grid';
+import FlexGridItem from '../../flex-grid-item';
+
+export default {
+  name: 'settings-header',
+  props: {
+    title: {
+      type: String,
+    },
+    titleSuffix: {
+      type: String,
+    },
+  },
+  computed: {
+    displayTitle() {
+      const { title, titleSuffix } = this;
+
+      return [title, titleSuffix].join(' ');
+    },
+  },
+  methods: {
+    onCloseClick() {
+      this.$emit('close');
+    },
+  },
+  components: {
+    'button-icon': ButtonIcon,
+    'flex-grid': FlexGrid,
+    'flex-grid-item': FlexGridItem,
+  },
+};
+</script>
+
+<style lang="stylus">
+.settings-header {
+  margin-bottom: 15px;
+}
+</style>
diff --git a/client/components/settings-modal/components/settings-list.vue b/client/components/settings-modal/components/settings-list.vue
new file mode 100644
index 000000000..06baac0a0
--- /dev/null
+++ b/client/components/settings-modal/components/settings-list.vue
@@ -0,0 +1,55 @@
+<template>
+  <flex-grid class="settings-list" flex-direction="column">
+    <flex-grid-item v-for="view in viewList" :key="view.name" margin="0">
+      <button-fill
+        class="settings-list-item"
+        :color="view.name === activeViewName ? 'primary' : 'tertiary'"
+        :label="view.displayName"
+        @click="() => onClick(view)"
+      />
+    </flex-grid-item>
+  </flex-grid>
+</template>
+
+<script>
+import ButtonFill from '../../button-fill';
+import FlexGrid from '../../flex-grid';
+import FlexGridItem from '../../flex-grid-item';
+
+export default {
+  name: 'settings-list',
+  props: {
+    activeViewName: {
+      type: String,
+    },
+    viewList: {
+      type: Array,
+    },
+  },
+  methods: {
+    onClick(view) {
+      if (view.name !== this.activeViewName) {
+        this.$emit('change', { view });
+      }
+    },
+  },
+  components: {
+    'button-fill': ButtonFill,
+    'flex-grid': FlexGrid,
+    'flex-grid-item': FlexGridItem,
+  },
+};
+</script>
+
+<style lang="stylus">
+.settings-list {
+  background-color: #fafafa;
+  height: 100%;
+
+  .settings-list-item {
+    padding: 10px 40px 10px 15px;;
+    text-align: left;
+    width: 100%;
+  }
+}
+</style>
diff --git a/client/components/settings-modal/components/settings-toggle.vue b/client/components/settings-modal/components/settings-toggle.vue
new file mode 100644
index 000000000..0fd8b2b46
--- /dev/null
+++ b/client/components/settings-modal/components/settings-toggle.vue
@@ -0,0 +1,54 @@
+<template>
+  <flex-grid class="settings-toggle" align-items="center">
+    <flex-grid-item grow="1">
+      <label :for="name">
+        {{ label }}
+      </label>
+    </flex-grid-item>
+    <flex-grid-item>
+      <toggle-button
+        :labels="true"
+        :name="name"
+        :value="value"
+        @change="onChange"
+      />
+    </flex-grid-item>
+  </flex-grid>
+</template>
+
+<script>
+import { ToggleButton } from 'vue-js-toggle-button';
+import FlexGrid from '../../flex-grid';
+import FlexGridItem from '../../flex-grid-item';
+
+export default {
+  name: 'settings-toggle',
+  props: {
+    label: {
+      type: String,
+    },
+    name: {
+      type: String,
+    },
+    value: {
+      type: Boolean,
+    },
+  },
+  methods: {
+    onChange(event) {
+      this.$emit('change', event);
+    },
+  },
+  components: {
+    'flex-grid': FlexGrid,
+    'flex-grid-item': FlexGridItem,
+    'toggle-button': ToggleButton,
+  },
+};
+</script>
+
+<style lang="stylus">
+.settings-toggle {
+  height: 22px;
+}
+</style>
diff --git a/client/components/settings-modal/components/settings-workflow-history.vue b/client/components/settings-modal/components/settings-workflow-history.vue
new file mode 100644
index 000000000..f00bbfc05
--- /dev/null
+++ b/client/components/settings-modal/components/settings-workflow-history.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="settings-workflow-history">
+    <div class="content">
+      <div class="content-item">
+        <settings-toggle
+          label="Enable history event param highlighting"
+          name="workflowHistoryEventHighlightListEnabled"
+          :value="modalWorkflowHistoryEventHighlightListEnabled"
+          @change="onWorkflowHistoryEventHighlightListEnabledChange"
+        />
+      </div>
+
+      <div
+        class="history-event-param-content"
+        :class="{ disabled: !modalWorkflowHistoryEventHighlightListEnabled }"
+      >
+        <div class="content-item">
+          <flex-grid align-items="center">
+            <flex-grid-item grow="1">
+              <h4>History event params</h4>
+            </flex-grid-item>
+            <flex-grid-item>
+              <button-fill
+                :disabled="!modalWorkflowHistoryEventHighlightListEnabled"
+                label="NEW"
+                @click="onWorkflowHistoryEventHighlightListAdd"
+              />
+            </flex-grid-item>
+          </flex-grid>
+        </div>
+
+        <div class="scrollable">
+          <div
+            class="content-item"
+            v-for="event in modalWorkflowHistoryEventHighlightList"
+            :key="event.id"
+          >
+            <flex-grid align-items="center">
+              <flex-grid-item grow="1">
+                <flex-grid align-items="center">
+                  <flex-grid-item grow="1" width="345px">
+                    <v-select
+                      :disabled="
+                        !modalWorkflowHistoryEventHighlightListEnabled ||
+                          !event.isEnabled
+                      "
+                      :value="event.eventType"
+                      :options="workflowEventTypes"
+                      :on-change="
+                        value =>
+                          onWorkflowHistoryEventHighlightListChange({
+                            event,
+                            key: 'eventType',
+                            value,
+                          })
+                      "
+                    />
+                  </flex-grid-item>
+                  <flex-grid-item>
+                    <text-input
+                      label="Event param name"
+                      :disabled="
+                        !modalWorkflowHistoryEventHighlightListEnabled ||
+                          !event.isEnabled
+                      "
+                      :value="event.eventParamName"
+                      @input="
+                        ({ target: { value } }) =>
+                          onWorkflowHistoryEventHighlightListChange({
+                            event,
+                            key: 'eventParamName',
+                            value,
+                          })
+                      "
+                    />
+                  </flex-grid-item>
+                </flex-grid>
+              </flex-grid-item>
+              <flex-grid-item>
+                <toggle-button
+                  :disabled="!modalWorkflowHistoryEventHighlightListEnabled"
+                  :labels="true"
+                  :value="event.isEnabled"
+                  @change="
+                    ({ value }) =>
+                      onWorkflowHistoryEventHighlightListChange({
+                        event,
+                        key: 'isEnabled',
+                        value,
+                      })
+                  "
+                />
+              </flex-grid-item>
+              <flex-grid-item>
+                <button-icon
+                  :disabled="!modalWorkflowHistoryEventHighlightListEnabled"
+                  icon="icon_trash"
+                  size="20px"
+                  @click="onWorkflowHistoryEventHighlightListRemove(event)"
+                />
+              </flex-grid-item>
+            </flex-grid>
+          </div>
+        </div>
+      </div>
+    </div>
+    <settings-footer
+      :submit-enabled="isSettingsChanged"
+      @cancel="onClose"
+      @submit="onSubmit"
+    />
+  </div>
+</template>
+
+<script>
+import { ToggleButton } from 'vue-js-toggle-button';
+import ButtonFill from '../../button-fill';
+import ButtonIcon from '../../button-icon';
+import FlexGrid from '../../flex-grid';
+import FlexGridItem from '../../flex-grid-item';
+import TextInput from '../../text-input';
+import SettingsFooter from './settings-footer';
+import SettingsToggle from './settings-toggle';
+import {
+  workflowHistoryEventHighlightListAddOrUpdate,
+  workflowHistoryEventHighlightListRemove,
+} from '~helpers';
+import { WORKFLOW_EVENT_TYPES } from '~constants';
+
+export default {
+  name: 'settings-workflow-history',
+  props: {
+    workflowHistoryEventHighlightList: {
+      type: Array,
+    },
+    workflowHistoryEventHighlightListEnabled: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      isWorkflowHistoryEventHighlightListChanged: false,
+      modalWorkflowHistoryEventHighlightListEnabled: this
+        .workflowHistoryEventHighlightListEnabled,
+      modalWorkflowHistoryEventHighlightList: this
+        .workflowHistoryEventHighlightList,
+      workflowEventTypes: WORKFLOW_EVENT_TYPES,
+    };
+  },
+  computed: {
+    isWorkflowHistoryEventHighlightListEnabledChanged() {
+      return (
+        this.modalWorkflowHistoryEventHighlightListEnabled !==
+        this.workflowHistoryEventHighlightListEnabled
+      );
+    },
+    isSettingsChanged() {
+      return (
+        this.isWorkflowHistoryEventHighlightListChanged ||
+        this.isWorkflowHistoryEventHighlightListEnabledChanged
+      );
+    },
+  },
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+    onWorkflowHistoryEventHighlightListChange({ event, key, value }) {
+      if (event[key] === value) {
+        return;
+      }
+
+      this.modalWorkflowHistoryEventHighlightList = workflowHistoryEventHighlightListAddOrUpdate(
+        {
+          ...event,
+          [key]: value,
+          workflowHistoryEventHighlightList: this
+            .modalWorkflowHistoryEventHighlightList,
+        }
+      );
+      this.isWorkflowHistoryEventHighlightListChanged = true;
+    },
+    onWorkflowHistoryEventHighlightListRemove({ id }) {
+      this.modalWorkflowHistoryEventHighlightList = workflowHistoryEventHighlightListRemove(
+        {
+          id,
+          workflowHistoryEventHighlightList: this
+            .modalWorkflowHistoryEventHighlightList,
+        }
+      );
+      this.isWorkflowHistoryEventHighlightListChanged = true;
+    },
+    onWorkflowHistoryEventHighlightListAdd() {
+      this.modalWorkflowHistoryEventHighlightList = workflowHistoryEventHighlightListAddOrUpdate(
+        {
+          eventParamName: '',
+          eventType: WORKFLOW_EVENT_TYPES[0],
+          id: new Date().getTime(),
+          isEnabled: true,
+          workflowHistoryEventHighlightList: this
+            .modalWorkflowHistoryEventHighlightList,
+        }
+      );
+      this.isWorkflowHistoryEventHighlightListChanged = true;
+    },
+    onWorkflowHistoryEventHighlightListEnabledChange({ value }) {
+      this.modalWorkflowHistoryEventHighlightListEnabled = value;
+    },
+    onSubmit() {
+      this.$emit('change', {
+        ...(this.isWorkflowHistoryEventHighlightListEnabledChanged && {
+          workflowHistoryEventHighlightListEnabled: this
+            .modalWorkflowHistoryEventHighlightListEnabled,
+        }),
+        ...(this.isWorkflowHistoryEventHighlightListChanged && {
+          workflowHistoryEventHighlightList: this
+            .modalWorkflowHistoryEventHighlightList,
+        }),
+      });
+    },
+  },
+  components: {
+    'button-fill': ButtonFill,
+    'button-icon': ButtonIcon,
+    'flex-grid': FlexGrid,
+    'flex-grid-item': FlexGridItem,
+    'settings-footer': SettingsFooter,
+    'settings-toggle': SettingsToggle,
+    'text-input': TextInput,
+    'toggle-button': ToggleButton,
+  },
+};
+</script>
+
+<style lang="stylus">
+.settings-workflow-history {
+  .history-event-param-content {
+    &.disabled {
+      opacity: 0.3;
+    }
+  }
+
+  .scrollable {
+    overflow-y: auto;
+    height: 200px;
+  }
+}
+</style>
diff --git a/client/components/settings-modal/constants.js b/client/components/settings-modal/constants.js
new file mode 100644
index 000000000..fb76b57cf
--- /dev/null
+++ b/client/components/settings-modal/constants.js
@@ -0,0 +1,10 @@
+export const SETTINGS_VIEW_LIST = [
+  {
+    displayName: 'DateTime',
+    name: 'settings-date-format',
+  },
+  {
+    displayName: 'Workflow History',
+    name: 'settings-workflow-history',
+  },
+];
diff --git a/client/components/settings-modal/index.vue b/client/components/settings-modal/index.vue
new file mode 100644
index 000000000..06a6c6151
--- /dev/null
+++ b/client/components/settings-modal/index.vue
@@ -0,0 +1,153 @@
+<template>
+  <modal
+    name="settings-modal"
+    @before-close="onBeforeClose"
+    @before-open="onBeforeOpen"
+  >
+    <div class="settings-modal">
+      <settings-header
+        :title="activeView.displayName"
+        title-suffix="Settings"
+        @close="onClose"
+      />
+      <flex-grid>
+        <flex-grid-item margin="20px">
+          <settings-list
+            :active-view-name="activeView.name"
+            :view-list="viewList"
+            @change="onSettingsListChange"
+          />
+        </flex-grid-item>
+        <flex-grid-item>
+          <settings-date-format
+            :date-format="dateFormat"
+            :date-format-options="dateFormatOptions"
+            :time-format="timeFormat"
+            :time-format-options="timeFormatOptions"
+            :timezone="timezone"
+            :timezone-options="timezoneOptions"
+            v-if="settingsDateFormatViewActive"
+            @change="onSettingsChange"
+            @close="onClose"
+          />
+          <settings-workflow-history
+            :workflow-history-event-highlight-list="
+              workflowHistoryEventHighlightList
+            "
+            :workflow-history-event-highlight-list-enabled="
+              workflowHistoryEventHighlightListEnabled
+            "
+            v-if="settingsWorkflowHistoryViewActive"
+            @change="onSettingsChange"
+            @close="onClose"
+          />
+        </flex-grid-item>
+      </flex-grid>
+    </div>
+  </modal>
+</template>
+
+<script>
+import FlexGrid from '../flex-grid';
+import FlexGridItem from '../flex-grid-item';
+import SettingsDateFormat from './components/settings-date-format';
+import SettingsHeader from './components/settings-header';
+import SettingsList from './components/settings-list';
+import SettingsWorkflowHistory from './components/settings-workflow-history';
+import { SETTINGS_VIEW_LIST } from './constants';
+
+export default {
+  data() {
+    return {
+      activeView: {},
+      viewList: SETTINGS_VIEW_LIST,
+    };
+  },
+  props: {
+    dateFormat: {
+      type: String,
+    },
+    dateFormatOptions: {
+      type: Array,
+    },
+    timeFormat: {
+      type: String,
+    },
+    timeFormatOptions: {
+      type: Array,
+    },
+    timezone: {
+      type: String,
+    },
+    timezoneOptions: {
+      type: Array,
+    },
+    workflowHistoryEventHighlightList: {
+      type: Array,
+    },
+    workflowHistoryEventHighlightListEnabled: {
+      type: Boolean,
+    },
+  },
+  computed: {
+    settingsDateFormatViewActive() {
+      return this.activeView.name === 'settings-date-format';
+    },
+    settingsWorkflowHistoryViewActive() {
+      return this.activeView.name === 'settings-workflow-history';
+    },
+  },
+  methods: {
+    close() {
+      this.$modal.hide('settings-modal');
+    },
+    onClose() {
+      this.close();
+    },
+    onBeforeClose() {
+      this.activeView = {};
+    },
+    onBeforeOpen() {
+      this.activeView = this.viewList[0];
+    },
+    onSettingsChange(event) {
+      this.$emit('change', event);
+      this.close();
+    },
+    onSettingsListChange({ view }) {
+      this.activeView = view;
+    },
+  },
+  components: {
+    'flex-grid': FlexGrid,
+    'flex-grid-item': FlexGridItem,
+    'settings-date-format': SettingsDateFormat,
+    'settings-list': SettingsList,
+    'settings-workflow-history': SettingsWorkflowHistory,
+    'settings-header': SettingsHeader,
+  },
+};
+</script>
+
+<style lang="stylus">
+.settings-modal {
+  .content {
+    min-height: 320px;
+    min-width: 630px;
+    overflow-y: auto;
+  }
+
+  .content-item {
+    margin: 10px 0 15px;
+  }
+
+  .dropdown-menu {
+    min-width: 90px !important;
+  }
+
+  label {
+    display: inline-block;
+    margin-bottom: 5px;
+  }
+}
+</style>
diff --git a/client/components/text-input.vue b/client/components/text-input.vue
index bc8f29b2c..2d0a01122 100644
--- a/client/components/text-input.vue
+++ b/client/components/text-input.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="text-input field">
     <input
+      :disabled="disabled"
       :name="name"
       placeholder=" "
       :readonly="readonly"
@@ -15,7 +16,7 @@
 <script>
 export default {
   name: 'text-input',
-  props: ['label', 'name', 'readonly', 'type', 'value'],
+  props: ['disabled', 'label', 'name', 'readonly', 'type', 'value'],
   methods: {
     onInputChange(...args) {
       this.$emit('input', ...args);
diff --git a/client/constants.js b/client/constants.js
index 1b31ead8c..8b5c3d536 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -38,6 +38,10 @@ export const LOCAL_STORAGE_SETTINGS = {
   dateFormat: 'settings-date-format',
   timeFormat: 'settings-time-format',
   timezone: 'settings-timezone',
+  workflowHistoryEventHighlightList:
+    'settings-workflow-history-event-highlight-list',
+  workflowHistoryEventHighlightListEnabled:
+    'settings-workflow-history-event-highlight-list-enabled',
 };
 
 export const MAXIMUM_JSON_CHARACTER_LIMIT = 5000;
@@ -64,3 +68,55 @@ export const TIMEZONE_OPTIONS = [
   { label: 'Local', value: TIMEZONE_LOCAL },
   { label: 'UTC', value: TIMEZONE_UTC },
 ];
+
+export const WORKFLOW_EVENT_TYPE = {
+  ActivityTaskCanceled: 'ActivityTaskCanceled',
+  ActivityTaskCancelRequested: 'ActivityTaskCancelRequested',
+  ActivityTaskCompleted: 'ActivityTaskCompleted',
+  ActivityTaskFailed: 'ActivityTaskFailed',
+  ActivityTaskScheduled: 'ActivityTaskScheduled',
+  ActivityTaskStarted: 'ActivityTaskStarted',
+  ActivityTaskTimedOut: 'ActivityTaskTimedOut',
+  CancelTimerFailed: 'CancelTimerFailed',
+  ChildWorkflowExecutionCanceled: 'ChildWorkflowExecutionCanceled',
+  ChildWorkflowExecutionCompleted: 'ChildWorkflowExecutionCompleted',
+  ChildWorkflowExecutionFailed: 'ChildWorkflowExecutionFailed',
+  ChildWorkflowExecutionStarted: 'ChildWorkflowExecutionStarted',
+  ChildWorkflowExecutionTerminated: 'ChildWorkflowExecutionTerminated',
+  ChildWorkflowExecutionTimedOut: 'ChildWorkflowExecutionTimedOut',
+  DecisionTaskCompleted: 'DecisionTaskCompleted',
+  DecisionTaskFailed: 'DecisionTaskFailed',
+  DecisionTaskScheduled: 'DecisionTaskScheduled',
+  DecisionTaskStarted: 'DecisionTaskStarted',
+  DecisionTaskTimedOut: 'DecisionTaskTimedOut',
+  ExternalWorkflowExecutionCancelRequested:
+    'ExternalWorkflowExecutionCancelRequested',
+  ExternalWorkflowExecutionSignaled: 'ExternalWorkflowExecutionSignaled',
+  MarkerRecorded: 'MarkerRecorded',
+  RequestCancelActivityTaskFailed: 'RequestCancelActivityTaskFailed',
+  RequestCancelExternalWorkflowExecutionFailed:
+    'RequestCancelExternalWorkflowExecutionFailed',
+  RequestCancelExternalWorkflowExecutionInitiated:
+    'RequestCancelExternalWorkflowExecutionInitiated',
+  SignalExternalWorkflowExecutionFailed:
+    'SignalExternalWorkflowExecutionFailed',
+  SignalExternalWorkflowExecutionInitiated:
+    'SignalExternalWorkflowExecutionInitiated',
+  StartChildWorkflowExecutionFailed: 'StartChildWorkflowExecutionFailed',
+  StartChildWorkflowExecutionInitiated: 'StartChildWorkflowExecutionInitiated',
+  TimerCanceled: 'TimerCanceled',
+  TimerFired: 'TimerFired',
+  TimerStarted: 'TimerStarted',
+  UpsertWorkflowSearchAttributes: 'UpsertWorkflowSearchAttributes',
+  WorkflowExecutionCanceled: 'WorkflowExecutionCanceled',
+  WorkflowExecutionCancelRequested: 'WorkflowExecutionCancelRequested',
+  WorkflowExecutionCompleted: 'WorkflowExecutionCompleted',
+  WorkflowExecutionContinuedAsNew: 'WorkflowExecutionContinuedAsNew',
+  WorkflowExecutionFailed: 'WorkflowExecutionFailed',
+  WorkflowExecutionSignaled: 'WorkflowExecutionSignaled',
+  WorkflowExecutionStarted: 'WorkflowExecutionStarted',
+  WorkflowExecutionTerminated: 'WorkflowExecutionTerminated',
+  WorkflowExecutionTimedOut: 'WorkflowExecutionTimedOut',
+};
+
+export const WORKFLOW_EVENT_TYPES = Object.values(WORKFLOW_EVENT_TYPE);
diff --git a/client/helpers/get-query-string-from-object.js b/client/helpers/get-query-string-from-object.js
index cd7c7ee5a..113e7a842 100644
--- a/client/helpers/get-query-string-from-object.js
+++ b/client/helpers/get-query-string-from-object.js
@@ -1,11 +1,21 @@
 const getQueryStringFromObject = (params = {}) => {
   const paramKeys = Object.keys(params);
+
   if (paramKeys.length === 0) {
     return '';
   }
-  return '?' + paramKeys.map((queryName) =>
-    encodeURIComponent(queryName) + '=' + encodeURIComponent(params[queryName])
-  ).join('&');
+
+  return (
+    '?' +
+    paramKeys
+      .map(
+        queryName =>
+          encodeURIComponent(queryName) +
+          '=' +
+          encodeURIComponent(params[queryName])
+      )
+      .join('&')
+  );
 };
 
 export default getQueryStringFromObject;
diff --git a/client/helpers/get-query-string-from-object.spec.js b/client/helpers/get-query-string-from-object.spec.js
index ce032837d..89ebf3a1d 100644
--- a/client/helpers/get-query-string-from-object.spec.js
+++ b/client/helpers/get-query-string-from-object.spec.js
@@ -3,6 +3,7 @@ import getQueryStringFromObject from './get-query-string-from-object';
 describe('getQueryStringFromObject', () => {
   it('should return empty string when no params are passed.', () => {
     const output = getQueryStringFromObject();
+
     expect(output).toEqual('');
   });
 
@@ -12,6 +13,9 @@ describe('getQueryStringFromObject', () => {
       booleanParam: true,
       numberParam: 20,
     });
-    expect(output).toEqual('?stringParam=string&booleanParam=true&numberParam=20');
+
+    expect(output).toEqual(
+      '?stringParam=string&booleanParam=true&numberParam=20'
+    );
   });
 });
diff --git a/client/helpers/index.js b/client/helpers/index.js
index dcbb36c55..8a3840b72 100644
--- a/client/helpers/index.js
+++ b/client/helpers/index.js
@@ -14,4 +14,7 @@ export { default as http } from './http';
 export { default as injectMomentDurationFormat } from './inject-moment-duration-format';
 export { default as jsonTryParse } from './json-try-parse';
 export { default as mapDomainDescription } from './map-domain-description';
+export { default as parseStringToBoolean } from './parse-string-to-boolean';
 export { default as shortName } from './short-name';
+export { default as workflowHistoryEventHighlightListAddOrUpdate } from './workflow-history-event-highlight-list-add-or-update';
+export { default as workflowHistoryEventHighlightListRemove } from './workflow-history-event-highlight-list-remove';
diff --git a/client/helpers/parse-string-to-boolean.js b/client/helpers/parse-string-to-boolean.js
new file mode 100644
index 000000000..0097d1974
--- /dev/null
+++ b/client/helpers/parse-string-to-boolean.js
@@ -0,0 +1,13 @@
+const parseStringToBoolean = (value, defaultValue = false) => {
+  if (value === 'true') {
+    return true;
+  }
+
+  if (value === 'false') {
+    return false;
+  }
+
+  return defaultValue;
+};
+
+export default parseStringToBoolean;
diff --git a/client/helpers/parse-string-to-boolean.spec.js b/client/helpers/parse-string-to-boolean.spec.js
new file mode 100644
index 000000000..6f7158f3f
--- /dev/null
+++ b/client/helpers/parse-string-to-boolean.spec.js
@@ -0,0 +1,27 @@
+import parseStringToBoolean from './parse-string-to-boolean';
+
+describe('parseStringToBoolean', () => {
+  it('should return true when passed value = "true".', () => {
+    const output = parseStringToBoolean('true');
+
+    expect(output).toEqual(true);
+  });
+
+  it('should return false when passed value = "false".', () => {
+    const output = parseStringToBoolean('false');
+
+    expect(output).toEqual(false);
+  });
+
+  it('should return false when nothing is passed.', () => {
+    const output = parseStringToBoolean();
+
+    expect(output).toEqual(false);
+  });
+
+  it('should return true when passed value = null and defaultValue = true.', () => {
+    const output = parseStringToBoolean(null, true);
+
+    expect(output).toEqual(true);
+  });
+});
diff --git a/client/helpers/workflow-history-event-highlight-list-add-or-update.js b/client/helpers/workflow-history-event-highlight-list-add-or-update.js
new file mode 100644
index 000000000..830e696d1
--- /dev/null
+++ b/client/helpers/workflow-history-event-highlight-list-add-or-update.js
@@ -0,0 +1,49 @@
+import findIndexById from './workflow-history-event-highlight-list-find-index-by-id';
+
+const findIndexByTypeAndParamName = ({
+  eventType,
+  eventParamName,
+}) => eventParam =>
+  eventParam.eventType === eventType &&
+  eventParam.eventParamName === eventParamName;
+
+const workflowHistoryEventHighlightListAddOrUpdate = ({
+  eventParamName,
+  eventType,
+  id,
+  isEnabled,
+  workflowHistoryEventHighlightList,
+}) => {
+  const findIndexHandler = id
+    ? findIndexById({ id })
+    : findIndexByTypeAndParamName({ eventParamName, eventType });
+
+  const index = workflowHistoryEventHighlightList.findIndex(findIndexHandler);
+
+  if (index === -1) {
+    return [
+      {
+        eventParamName,
+        eventType,
+        id: Date.now(),
+        isEnabled,
+      },
+      ...workflowHistoryEventHighlightList,
+    ];
+  }
+
+  const event = workflowHistoryEventHighlightList[index];
+
+  return [
+    ...workflowHistoryEventHighlightList.slice(0, index),
+    {
+      ...event,
+      eventParamName,
+      eventType,
+      isEnabled,
+    },
+    ...workflowHistoryEventHighlightList.slice(index + 1),
+  ];
+};
+
+export default workflowHistoryEventHighlightListAddOrUpdate;
diff --git a/client/helpers/workflow-history-event-highlight-list-add-or-update.spec.js b/client/helpers/workflow-history-event-highlight-list-add-or-update.spec.js
new file mode 100644
index 000000000..7b74e50b4
--- /dev/null
+++ b/client/helpers/workflow-history-event-highlight-list-add-or-update.spec.js
@@ -0,0 +1,151 @@
+import addOrUpdate from './workflow-history-event-highlight-list-add-or-update';
+
+describe('workflowHistoryEventHighlightListAddOrUpdate', () => {
+  it('should add an item to start of list if not found with id = 1.', () => {
+    jest.spyOn(Date, 'now').mockImplementationOnce(() => 1);
+
+    const workflowHistoryEventHighlightList = [
+      {
+        id: 0,
+        eventParamName: 'eventId',
+        eventType: 'ActivityTaskCanceled',
+        isEnabled: false,
+      },
+      {
+        id: 2,
+        eventParamName: 'eventId',
+        eventType: 'ActivityTaskCompleted',
+        isEnabled: false,
+      },
+      {
+        id: 3,
+        eventParamName: 'eventId',
+        eventType: 'DecisionTaskCompleted',
+        isEnabled: false,
+      },
+      {
+        id: 4,
+        eventParamName: 'eventId',
+        eventType: 'DecisionTaskScheduled',
+        isEnabled: false,
+      },
+    ];
+
+    const output = addOrUpdate({
+      eventParamName: 'eventId',
+      eventType: 'ActivityTaskScheduled',
+      id: 1,
+      isEnabled: true,
+      workflowHistoryEventHighlightList,
+    });
+
+    expect(output.length).toEqual(5);
+    expect(output[0]).toEqual({
+      eventParamName: 'eventId',
+      eventType: 'ActivityTaskScheduled',
+      id: 1,
+      isEnabled: true,
+    });
+  });
+
+  it('should update item in list with id = 1.', () => {
+    const workflowHistoryEventHighlightList = [
+      {
+        id: 0,
+        eventParamName: 'eventId',
+        eventType: 'ActivityTaskCanceled',
+        isEnabled: false,
+      },
+      {
+        id: 1,
+        eventParamName: 'eventId',
+        eventType: 'ActivityTaskScheduled',
+        isEnabled: false,
+      },
+      {
+        id: 2,
+        eventParamName: 'eventId',
+        eventType: 'ActivityTaskCompleted',
+        isEnabled: false,
+      },
+      {
+        id: 3,
+        eventParamName: 'eventId',
+        eventType: 'DecisionTaskCompleted',
+        isEnabled: false,
+      },
+      {
+        id: 4,
+        eventParamName: 'eventId',
+        eventType: 'DecisionTaskScheduled',
+        isEnabled: false,
+      },
+    ];
+
+    const output = addOrUpdate({
+      eventParamName: 'eventId',
+      eventType: 'ActivityTaskScheduled',
+      id: 1,
+      isEnabled: true,
+      workflowHistoryEventHighlightList,
+    });
+
+    expect(output.length).toEqual(5);
+    expect(output[1]).toEqual({
+      eventParamName: 'eventId',
+      eventType: 'ActivityTaskScheduled',
+      id: 1,
+      isEnabled: true,
+    });
+  });
+
+  it('should update item in list with eventType = "ActivityTaskScheduled" and eventParamName = "eventId" (no id specified).', () => {
+    const workflowHistoryEventHighlightList = [
+      {
+        id: 0,
+        eventParamName: 'eventId',
+        eventType: 'ActivityTaskCanceled',
+        isEnabled: false,
+      },
+      {
+        id: 1,
+        eventParamName: 'eventId',
+        eventType: 'ActivityTaskScheduled',
+        isEnabled: false,
+      },
+      {
+        id: 2,
+        eventParamName: 'eventId',
+        eventType: 'ActivityTaskCompleted',
+        isEnabled: false,
+      },
+      {
+        id: 3,
+        eventParamName: 'eventId',
+        eventType: 'DecisionTaskCompleted',
+        isEnabled: false,
+      },
+      {
+        id: 4,
+        eventParamName: 'eventId',
+        eventType: 'DecisionTaskScheduled',
+        isEnabled: false,
+      },
+    ];
+
+    const output = addOrUpdate({
+      eventParamName: 'eventId',
+      eventType: 'ActivityTaskScheduled',
+      isEnabled: true,
+      workflowHistoryEventHighlightList,
+    });
+
+    expect(output.length).toEqual(5);
+    expect(output[1]).toEqual({
+      eventParamName: 'eventId',
+      eventType: 'ActivityTaskScheduled',
+      id: 1,
+      isEnabled: true,
+    });
+  });
+});
diff --git a/client/helpers/workflow-history-event-highlight-list-find-index-by-id.js b/client/helpers/workflow-history-event-highlight-list-find-index-by-id.js
new file mode 100644
index 000000000..6db25b942
--- /dev/null
+++ b/client/helpers/workflow-history-event-highlight-list-find-index-by-id.js
@@ -0,0 +1,4 @@
+const workflowHistoryEventHighlightListFindIndexById = ({ id }) => eventParam =>
+  eventParam.id === id;
+
+export default workflowHistoryEventHighlightListFindIndexById;
diff --git a/client/helpers/workflow-history-event-highlight-list-find-index-by-id.spec.js b/client/helpers/workflow-history-event-highlight-list-find-index-by-id.spec.js
new file mode 100644
index 000000000..86a9cdc91
--- /dev/null
+++ b/client/helpers/workflow-history-event-highlight-list-find-index-by-id.spec.js
@@ -0,0 +1,34 @@
+import findIndexById from './workflow-history-event-highlight-list-find-index-by-id';
+
+describe('workflowHistoryEventHighlightListFindIndexById', () => {
+  it('should return -1 if it cant find item in the list.', () => {
+    const workflowHistoryEventHighlightList = [
+      { id: 0 },
+      { id: 2 },
+      { id: 3 },
+      { id: 4 },
+    ];
+
+    const output = workflowHistoryEventHighlightList.findIndex(
+      findIndexById({ id: 1 })
+    );
+
+    expect(output).toEqual(-1);
+  });
+
+  it('should return index = 1 when id = 1 and matching item with id = 1 is the second in the list.', () => {
+    const workflowHistoryEventHighlightList = [
+      { id: 0 },
+      { id: 1 },
+      { id: 2 },
+      { id: 3 },
+      { id: 4 },
+    ];
+
+    const output = workflowHistoryEventHighlightList.findIndex(
+      findIndexById({ id: 1 })
+    );
+
+    expect(output).toEqual(1);
+  });
+});
diff --git a/client/helpers/workflow-history-event-highlight-list-remove.js b/client/helpers/workflow-history-event-highlight-list-remove.js
new file mode 100644
index 000000000..6d73011ed
--- /dev/null
+++ b/client/helpers/workflow-history-event-highlight-list-remove.js
@@ -0,0 +1,21 @@
+import findIndexById from './workflow-history-event-highlight-list-find-index-by-id';
+
+const workflowHistoryEventHighlightListRemove = ({
+  id,
+  workflowHistoryEventHighlightList,
+}) => {
+  const index = workflowHistoryEventHighlightList.findIndex(
+    findIndexById({ id })
+  );
+
+  if (index === -1) {
+    return workflowHistoryEventHighlightList;
+  }
+
+  return [
+    ...workflowHistoryEventHighlightList.slice(0, index),
+    ...workflowHistoryEventHighlightList.slice(index + 1),
+  ];
+};
+
+export default workflowHistoryEventHighlightListRemove;
diff --git a/client/helpers/workflow-history-event-highlight-list-remove.spec.js b/client/helpers/workflow-history-event-highlight-list-remove.spec.js
new file mode 100644
index 000000000..507f85b1d
--- /dev/null
+++ b/client/helpers/workflow-history-event-highlight-list-remove.spec.js
@@ -0,0 +1,36 @@
+import remove from './workflow-history-event-highlight-list-remove';
+
+describe('workflowHistoryEventHighlightListRemove', () => {
+  it('list is unchanged when no item with id = 1 in list and passed id = 1.', () => {
+    const workflowHistoryEventHighlightList = [
+      { id: 0 },
+      { id: 2 },
+      { id: 3 },
+      { id: 4 },
+    ];
+
+    const output = remove({
+      id: 1,
+      workflowHistoryEventHighlightList,
+    });
+
+    expect(output).toEqual(workflowHistoryEventHighlightList);
+  });
+
+  it('removes item with id = 1 from list when passed id = 1.', () => {
+    const workflowHistoryEventHighlightList = [
+      { id: 0 },
+      { id: 1 },
+      { id: 2 },
+      { id: 3 },
+      { id: 4 },
+    ];
+
+    const output = remove({
+      id: 1,
+      workflowHistoryEventHighlightList,
+    });
+
+    expect(output).toEqual([{ id: 0 }, { id: 2 }, { id: 3 }, { id: 4 }]);
+  });
+});
diff --git a/client/routes/index.vue b/client/routes/index.vue
index f912941b8..106b25385 100644
--- a/client/routes/index.vue
+++ b/client/routes/index.vue
@@ -14,7 +14,11 @@
       />
       <navigation-link label="Help" icon="icon_help" :to="{ name: 'help' }" />
     </navigation-bar>
-    <router-view name="domain-list" @onNotification="onNotification" />
+    <router-view
+      name="domain-list"
+      @onNotification="onNotification"
+      @onWorkflowHistoryEventParamToggle="onWorkflowHistoryEventParamToggle"
+    />
     <router-view name="help" @onNotification="onNotification" />
     <router-view name="news" @onNotification="onNotification" />
   </section>
@@ -32,6 +36,9 @@ export default {
     onNotification(event) {
       this.$emit('onNotification', event);
     },
+    onWorkflowHistoryEventParamToggle(event) {
+      this.$emit('onWorkflowHistoryEventParamToggle', event);
+    },
   },
 };
 </script>
diff --git a/client/routes/workflow/components/event-detail.vue b/client/routes/workflow/components/event-detail.vue
index a04dc858b..7e08b4dd8 100644
--- a/client/routes/workflow/components/event-detail.vue
+++ b/client/routes/workflow/components/event-detail.vue
@@ -3,7 +3,7 @@ import { DetailList } from '~components';
 
 export default {
   name: 'event-detail',
-  props: ['event', 'compact', 'highlight'],
+  props: ['event', 'isHighlightEnabled', 'compact'],
   components: {
     'detail-list': DetailList,
   },
@@ -14,11 +14,16 @@ export default {
 
     return h('detail-list', {
       props: {
+        isHighlightEnabled: this.isHighlightEnabled,
         item: this.event,
-        highlight: this.highlight,
         compact: this.compact,
         title: `Event #${this.event.eventId} ${this.event.eventType}`,
       },
+      on: {
+        onWorkflowHistoryEventParamToggle: event => {
+          this.$emit('onWorkflowHistoryEventParamToggle', event);
+        },
+      },
     });
   },
 };
diff --git a/client/routes/workflow/helpers/event-full-transforms.js b/client/routes/workflow/helpers/event-full-transforms.js
index 1de6b7a4b..115d05f7e 100644
--- a/client/routes/workflow/helpers/event-full-transforms.js
+++ b/client/routes/workflow/helpers/event-full-transforms.js
@@ -1,5 +1,7 @@
+import { WORKFLOW_EVENT_TYPE } from '~constants';
+
 export const eventFullTransforms = {
-  MarkerRecorded: d => {
+  [WORKFLOW_EVENT_TYPE.MarkerRecorded]: d => {
     if (d.markerName === 'SideEffect') {
       return {
         sideEffectID: d.details[0],
diff --git a/client/routes/workflow/helpers/get-event-details.js b/client/routes/workflow/helpers/get-event-details.js
index 0c864618e..16d3e5d96 100644
--- a/client/routes/workflow/helpers/get-event-details.js
+++ b/client/routes/workflow/helpers/get-event-details.js
@@ -1,17 +1,29 @@
+import getEventKvpsHighlight from './get-event-kvps-highlight';
 import { getKeyValuePairs } from '~helpers';
 
-const getEventDetails = event => {
+const getEventDetails = ({
+  event,
+  workflowHistoryEventHighlightList = [],
+  workflowHistoryEventHighlightListEnabled = false,
+}) => {
   const { details, eventId, eventType, timeStampDisplay } = event;
-  const kvps = getKeyValuePairs({
-    timestamp: timeStampDisplay,
-    eventId,
-    ...details,
+
+  const { kvps, isHighlighted } = getEventKvpsHighlight({
+    eventType,
+    kvps: getKeyValuePairs({
+      timestamp: timeStampDisplay,
+      eventId,
+      ...details,
+    }),
+    workflowHistoryEventHighlightList,
+    workflowHistoryEventHighlightListEnabled,
   });
 
   return {
     ...details,
     eventId,
     eventType,
+    isHighlighted,
     kvps,
     timestamp: timeStampDisplay,
   };
diff --git a/client/routes/workflow/helpers/get-event-details.spec.js b/client/routes/workflow/helpers/get-event-details.spec.js
index fac71de4b..c576a89ef 100644
--- a/client/routes/workflow/helpers/get-event-details.spec.js
+++ b/client/routes/workflow/helpers/get-event-details.spec.js
@@ -17,25 +17,25 @@ describe('getEventDetails', () => {
     });
 
     it('should return an object with a copy of details.', () => {
-      const output = getEventDetails(event);
+      const output = getEventDetails({ event });
 
       expect(output.key).toEqual('value');
     });
 
     it('should return an object with eventId.', () => {
-      const output = getEventDetails(event);
+      const output = getEventDetails({ event });
 
       expect(output.eventId).toEqual('eventIdValue');
     });
 
     it('should return an object with eventType.', () => {
-      const output = getEventDetails(event);
+      const output = getEventDetails({ event });
 
       expect(output.eventType).toEqual('eventTypeValue');
     });
 
     it('should return an object with kvps.', () => {
-      const output = getEventDetails(event);
+      const output = getEventDetails({ event });
 
       expect(output.kvps).toEqual('kvpsMock');
     });
diff --git a/client/routes/workflow/helpers/get-event-full-details.js b/client/routes/workflow/helpers/get-event-full-details.js
index 9e37bf0e2..bc765ac5e 100644
--- a/client/routes/workflow/helpers/get-event-full-details.js
+++ b/client/routes/workflow/helpers/get-event-full-details.js
@@ -1,7 +1,12 @@
 import { eventFullTransforms } from './event-full-transforms';
+import getEventKvpsHighlight from './get-event-kvps-highlight';
 import { getKeyValuePairs } from '~helpers';
 
-const getEventFullDetails = event => {
+const getEventFullDetails = ({
+  event,
+  workflowHistoryEventHighlightList,
+  workflowHistoryEventHighlightListEnabled,
+} = {}) => {
   if (!event) {
     return event;
   }
@@ -15,12 +20,18 @@ const getEventFullDetails = event => {
       ? maps[event.eventType](event.details)
       : event.details;
 
-  const kvps = getKeyValuePairs(item);
+  const { kvps, isHighlighted } = getEventKvpsHighlight({
+    eventType,
+    kvps: getKeyValuePairs(item),
+    workflowHistoryEventHighlightList,
+    workflowHistoryEventHighlightListEnabled,
+  });
 
   return {
     ...item,
     eventId,
     eventType,
+    isHighlighted,
     kvps,
   };
 };
diff --git a/client/routes/workflow/helpers/get-event-full-details.spec.js b/client/routes/workflow/helpers/get-event-full-details.spec.js
index 4f0874f33..4c40dff1c 100644
--- a/client/routes/workflow/helpers/get-event-full-details.spec.js
+++ b/client/routes/workflow/helpers/get-event-full-details.spec.js
@@ -5,9 +5,9 @@ jest.mock('~helpers');
 describe('getEventFullDetails', () => {
   describe('When passed no event', () => {
     it('should return what was passed.', () => {
-      const output = getEventFullDetails(false);
+      const output = getEventFullDetails();
 
-      expect(output).toEqual(false);
+      expect(output).toEqual(undefined);
     });
   });
 
@@ -25,25 +25,25 @@ describe('getEventFullDetails', () => {
     });
 
     it('should return an object with a copy of details.', () => {
-      const output = getEventFullDetails(event);
+      const output = getEventFullDetails({ event });
 
       expect(output.key).toEqual('value');
     });
 
     it('should return an object with eventId.', () => {
-      const output = getEventFullDetails(event);
+      const output = getEventFullDetails({ event });
 
       expect(output.eventId).toEqual('eventIdValue');
     });
 
     it('should return an object with eventType.', () => {
-      const output = getEventFullDetails(event);
+      const output = getEventFullDetails({ event });
 
       expect(output.eventType).toEqual('eventTypeValue');
     });
 
     it('should return an object with kvps.', () => {
-      const output = getEventFullDetails(event);
+      const output = getEventFullDetails({ event });
 
       expect(output.kvps).toEqual('kvpsMock');
     });
diff --git a/client/routes/workflow/helpers/get-event-kvps-highlight.js b/client/routes/workflow/helpers/get-event-kvps-highlight.js
new file mode 100644
index 000000000..58ba4a573
--- /dev/null
+++ b/client/routes/workflow/helpers/get-event-kvps-highlight.js
@@ -0,0 +1,47 @@
+const getEventKvpsHighlight = ({
+  eventType,
+  kvps,
+  workflowHistoryEventHighlightList,
+  workflowHistoryEventHighlightListEnabled,
+}) => {
+  let eventIsHighlighted = false;
+
+  if (!workflowHistoryEventHighlightListEnabled) {
+    return {
+      kvps,
+      isHighlighted: false,
+    };
+  }
+
+  const filteredWorkflowHistoryEventHighlightList = workflowHistoryEventHighlightList.filter(
+    highlight => highlight.isEnabled && highlight.eventType === eventType
+  );
+
+  if (!filteredWorkflowHistoryEventHighlightList.length) {
+    return {
+      kvps,
+      isHighlighted: false,
+    };
+  }
+
+  return {
+    kvps: kvps.map(kvp => {
+      const isHighlighted =
+        filteredWorkflowHistoryEventHighlightList.find(
+          ({ eventParamName }) => eventParamName === kvp.key
+        ) !== undefined;
+
+      if (isHighlighted) {
+        eventIsHighlighted = true;
+      }
+
+      return {
+        ...kvp,
+        isHighlighted,
+      };
+    }),
+    isHighlighted: eventIsHighlighted,
+  };
+};
+
+export default getEventKvpsHighlight;
diff --git a/client/routes/workflow/helpers/get-event-kvps-highlight.spec.js b/client/routes/workflow/helpers/get-event-kvps-highlight.spec.js
new file mode 100644
index 000000000..b3e7c0db7
--- /dev/null
+++ b/client/routes/workflow/helpers/get-event-kvps-highlight.spec.js
@@ -0,0 +1,116 @@
+import getEventKvpsHighlight from './get-event-kvps-highlight';
+
+describe('getEventKvpsHighlight', () => {
+  it('should return isHighlighted = false when workflowHistoryEventHighlightListEnabled = false.', () => {
+    const output = getEventKvpsHighlight({
+      eventType: 'ActivityTaskScheduled',
+      kvps: [],
+      workflowHistoryEventHighlightList: [],
+      workflowHistoryEventHighlightListEnabled: false,
+    });
+
+    expect(output).toEqual({
+      kvps: [],
+      isHighlighted: false,
+    });
+  });
+
+  it('should return isHighlighted = false when workflowHistoryEventHighlightListEnabled = true and workflowHistoryEventHighlightList items are not enabled.', () => {
+    const workflowHistoryEventHighlightList = [
+      {
+        eventType: 'ActivityTaskScheduled',
+        eventParamName: 'eventId',
+        isEnabled: false,
+      },
+    ];
+
+    const output = getEventKvpsHighlight({
+      eventType: 'ActivityTaskScheduled',
+      kvps: [],
+      workflowHistoryEventHighlightList,
+      workflowHistoryEventHighlightListEnabled: true,
+    });
+
+    expect(output).toEqual({
+      kvps: [],
+      isHighlighted: false,
+    });
+  });
+
+  it('should return isHighlighted = true and kvp.isHighlighted = true when workflowHistoryEventHighlightListEnabled = true and workflowHistoryEventHighlightList items are matching and enabled.', () => {
+    const workflowHistoryEventHighlightList = [
+      {
+        eventType: 'ActivityTaskScheduled',
+        eventParamName: 'eventId',
+        isEnabled: true,
+      },
+    ];
+    const kvps = [
+      {
+        key: 'eventId',
+        value: 1,
+      },
+      {
+        key: 'scheduledEventId',
+        value: 0,
+      },
+    ];
+
+    const output = getEventKvpsHighlight({
+      eventType: 'ActivityTaskScheduled',
+      kvps,
+      workflowHistoryEventHighlightList,
+      workflowHistoryEventHighlightListEnabled: true,
+    });
+
+    expect(output).toEqual({
+      kvps: [
+        {
+          isHighlighted: true,
+          key: 'eventId',
+          value: 1,
+        },
+        {
+          isHighlighted: false,
+          key: 'scheduledEventId',
+          value: 0,
+        },
+      ],
+      isHighlighted: true,
+    });
+  });
+
+  it('should return isHighlighted = false and kvp.isHighlighted = false when workflowHistoryEventHighlightListEnabled = true and workflowHistoryEventHighlightList items are not matching and enabled.', () => {
+    const workflowHistoryEventHighlightList = [
+      {
+        eventType: 'ActivityTaskScheduled',
+        eventParamName: 'eventId',
+        isEnabled: true,
+      },
+    ];
+    const kvps = [
+      {
+        key: 'scheduledEventId',
+        value: 0,
+      },
+    ];
+
+    const output = getEventKvpsHighlight({
+      eventType: 'ActivityTaskScheduled',
+      kvps,
+      workflowHistoryEventHighlightList,
+      workflowHistoryEventHighlightListEnabled: true,
+    });
+
+    expect(output).toEqual({
+      kvps: [
+        {
+          isHighlighted: false,
+          key: 'scheduledEventId',
+          value: 0,
+        },
+      ],
+      isHighlighted: false,
+    });
+  });
+});
diff --git a/client/routes/workflow/helpers/get-history-events.js b/client/routes/workflow/helpers/get-history-events.js
index 1481a5d0b..da16f0345 100644
--- a/client/routes/workflow/helpers/get-history-events.js
+++ b/client/routes/workflow/helpers/get-history-events.js
@@ -5,7 +5,14 @@ import getEventDetails from './get-event-details';
 import getEventFullDetails from './get-event-full-details';
 import getEventSummary from './get-event-summary';
 
-const getHistoryEvents = ({ dateFormat, events, timeFormat, timezone }) => {
+const getHistoryEvents = ({
+  dateFormat,
+  events,
+  timeFormat,
+  timezone,
+  workflowHistoryEventHighlightList,
+  workflowHistoryEventHighlightListEnabled,
+}) => {
   if (!events) {
     return [];
   }
@@ -43,9 +50,17 @@ const getHistoryEvents = ({ dateFormat, events, timeFormat, timezone }) => {
       };
     })
     .map(event => {
-      const details = getEventDetails(event);
+      const details = getEventDetails({
+        event,
+        workflowHistoryEventHighlightList,
+        workflowHistoryEventHighlightListEnabled,
+      });
       const eventSummary = getEventSummary(event);
-      const eventFullDetails = getEventFullDetails(event);
+      const eventFullDetails = getEventFullDetails({
+        event,
+        workflowHistoryEventHighlightList,
+        workflowHistoryEventHighlightListEnabled,
+      });
 
       return {
         ...event,
diff --git a/client/routes/workflow/helpers/get-history-timeline-events.js b/client/routes/workflow/helpers/get-history-timeline-events.js
index 78b393947..8e4356002 100644
--- a/client/routes/workflow/helpers/get-history-timeline-events.js
+++ b/client/routes/workflow/helpers/get-history-timeline-events.js
@@ -3,7 +3,7 @@ import mapTimelineEvents from './map-timeline-events';
 
 const getHistoryTimelineEvents = ({ historyEvents }) =>
   mapTimelineEvents(historyEvents).map(event => {
-    const details = getEventDetails(event);
+    const details = getEventDetails({ event });
 
     return { ...event, details };
   });
diff --git a/client/routes/workflow/helpers/get-summary-workflow-status.js b/client/routes/workflow/helpers/get-summary-workflow-status.js
index 9180a8785..9888d4072 100644
--- a/client/routes/workflow/helpers/get-summary-workflow-status.js
+++ b/client/routes/workflow/helpers/get-summary-workflow-status.js
@@ -1,3 +1,5 @@
+import { WORKFLOW_EVENT_TYPE } from '~constants';
+
 const getSummaryWorkflowStatus = ({
   isWorkflowRunning,
   workflow,
@@ -14,7 +16,10 @@ const getSummaryWorkflowStatus = ({
     ).toLowerCase();
   }
 
-  if (workflowCompletedEvent.eventType === 'WorkflowExecutionContinuedAsNew') {
+  if (
+    workflowCompletedEvent.eventType ===
+    WORKFLOW_EVENT_TYPE.WorkflowExecutionContinuedAsNew
+  ) {
     return {
       to: {
         name: 'workflow/summary',
diff --git a/client/routes/workflow/helpers/map-timeline-events.js b/client/routes/workflow/helpers/map-timeline-events.js
index 5d1635a08..d46b832cf 100644
--- a/client/routes/workflow/helpers/map-timeline-events.js
+++ b/client/routes/workflow/helpers/map-timeline-events.js
@@ -1,5 +1,6 @@
 import moment from 'moment';
 import { summarizeEvents } from './summarize-events';
+import { WORKFLOW_EVENT_TYPE } from '~constants';
 import { shortName } from '~helpers';
 
 export default function(historyEvents) {
@@ -51,14 +52,14 @@ export default function(historyEvents) {
       } else {
         item.eventIds.push(e.eventId);
 
-        if (e.eventType !== 'ActivityTaskStarted') {
+        if (e.eventType !== WORKFLOW_EVENT_TYPE.ActivityTaskStarted) {
           Object.assign(item.details, summarizeEvents[e.eventType](e.details));
         }
       }
 
       if (
-        e.eventType !== 'ActivityTaskScheduled' &&
-        e.eventType !== 'ActivityTaskStarted'
+        e.eventType !== WORKFLOW_EVENT_TYPE.ActivityTaskScheduled &&
+        e.eventType !== WORKFLOW_EVENT_TYPE.ActivityTaskStarted
       ) {
         assignEnd(item, e.timestamp);
         item.className = `activity ${e.eventType
@@ -104,15 +105,16 @@ export default function(historyEvents) {
       }
 
       if (
-        e.eventType !== 'StartChildWorkflowExecutionInitiated' &&
-        e.eventType !== 'ChildWorkflowExecutionStarted'
+        e.eventType !==
+          WORKFLOW_EVENT_TYPE.StartChildWorkflowExecutionInitiated &&
+        e.eventType !== WORKFLOW_EVENT_TYPE.ChildWorkflowExecutionStarted
       ) {
         assignEnd(item, e.timestamp);
         item.className = `child-workflow ${e.eventType
           .replace('ChildWorkflowExecution', '')
           .toLowerCase()}`;
       }
-    } else if (e.eventType === 'TimerStarted') {
+    } else if (e.eventType === WORKFLOW_EVENT_TYPE.TimerStarted) {
       add({
         id: `timer${e.details.timerId}`,
         className: 'timer',
@@ -126,13 +128,13 @@ export default function(historyEvents) {
           .duration(e.details.startToFireTimeoutSeconds, 'seconds')
           .format()})`,
       });
-    } else if (e.eventType === 'TimerFired') {
+    } else if (e.eventType === WORKFLOW_EVENT_TYPE.TimerFired) {
       const timerStartedEvent = hash[`timer${e.details.timerId}`];
 
       if (timerStartedEvent) {
         timerStartedEvent.eventIds.push(e.eventId);
       }
-    } else if (e.eventType === 'MarkerRecorded') {
+    } else if (e.eventType === WORKFLOW_EVENT_TYPE.MarkerRecorded) {
       const markerName =
         e.details.markerName !== undefined
           ? e.details.markerName.toLowerCase()
@@ -149,9 +151,9 @@ export default function(historyEvents) {
             SideEffect: 'Side Effect',
             LocalActivity: 'Local Activity',
           }[e.details.markerName] || `${e.details.markerName} Marker`,
-        details: summarizeEvents.MarkerRecorded(e.details),
+        details: summarizeEvents[WORKFLOW_EVENT_TYPE.MarkerRecorded](e.details),
       });
-    } else if (e.eventType === 'WorkflowExecutionSignaled') {
+    } else if (e.eventType === WORKFLOW_EVENT_TYPE.WorkflowExecutionSignaled) {
       add({
         id: `signal${e.eventId}`,
         className: 'signal',
@@ -162,18 +164,23 @@ export default function(historyEvents) {
           input: e.details.input,
         },
       });
-    } else if (e.eventType === 'SignalExternalWorkflowExecutionInitiated') {
+    } else if (
+      e.eventType ===
+      WORKFLOW_EVENT_TYPE.SignalExternalWorkflowExecutionInitiated
+    ) {
       add({
         id: `extsignal${e.eventId}`,
         className: 'external-signal',
         eventIds: [e.eventId],
         start: moment(e.timestamp),
         content: 'External Workflow Signaled',
-        details: summarizeEvents.SignalExternalWorkflowExecutionInitiated(
-          e.details
-        ),
+        details: summarizeEvents[
+          WORKFLOW_EVENT_TYPE.SignalExternalWorkflowExecutionInitiated
+        ](e.details),
       });
-    } else if (e.eventType === 'ExternalWorkflowExecutionSignaled') {
+    } else if (
+      e.eventType === WORKFLOW_EVENT_TYPE.ExternalWorkflowExecutionSignaled
+    ) {
       const initiatedEvent = hash[`extsignal${e.eventId}`];
 
       if (initiatedEvent) {
@@ -182,8 +189,8 @@ export default function(historyEvents) {
         // assignEnd(item, e.timestamp);
       }
     } else if (
-      e.eventType === 'DecisionTaskFailed' ||
-      e.eventType === 'DecisionTaskTimedOut'
+      e.eventType === WORKFLOW_EVENT_TYPE.DecisionTaskFailed ||
+      e.eventType === WORKFLOW_EVENT_TYPE.DecisionTaskTimedOut
     ) {
       add({
         id: `decision${e.eventId}`,
diff --git a/client/routes/workflow/helpers/summarize-events.js b/client/routes/workflow/helpers/summarize-events.js
index 39f85bb18..400f22dd0 100644
--- a/client/routes/workflow/helpers/summarize-events.js
+++ b/client/routes/workflow/helpers/summarize-events.js
@@ -1,17 +1,20 @@
 import moment from 'moment';
 import parentWorkflowLink from './parent-workflow-link';
 import workflowLink from './workflow-link';
+import { WORKFLOW_EVENT_TYPE } from '~constants';
 import { shortName } from '~helpers';
 
 export const summarizeEvents = {
-  ActivityTaskCancelRequested: d => ({ ID: d.activityId }),
-  ActivityTaskCompleted: d => ({ result: d.result }),
-  ActivityTaskCanceled: d => ({}),
-  ActivityTaskFailed: d => ({
+  [WORKFLOW_EVENT_TYPE.ActivityTaskCanceled]: d => ({}),
+  [WORKFLOW_EVENT_TYPE.ActivityTaskCancelRequested]: d => ({
+    ID: d.activityId,
+  }),
+  [WORKFLOW_EVENT_TYPE.ActivityTaskCompleted]: d => ({ result: d.result }),
+  [WORKFLOW_EVENT_TYPE.ActivityTaskFailed]: d => ({
     details: d.details,
     reason: d.reason,
   }),
-  ActivityTaskScheduled: d => ({
+  [WORKFLOW_EVENT_TYPE.ActivityTaskScheduled]: d => ({
     'Close Timeout': moment
       .duration(d.scheduleToCloseTimeoutSeconds, 'seconds')
       .format(),
@@ -19,30 +22,34 @@ export const summarizeEvents = {
     input: d.input,
     Name: shortName(d.activityType.name),
   }),
-  ActivityTaskStarted: d => ({
+  [WORKFLOW_EVENT_TYPE.ActivityTaskStarted]: d => ({
     attempt: d.attempt,
     identity: d.identity,
     requestId: d.requestId,
   }),
-  ActivityTaskTimedOut: d => ({ 'Timeout Type': d.timeoutType }),
-  ChildWorkflowExecutionCompleted: d => ({
+  [WORKFLOW_EVENT_TYPE.ActivityTaskTimedOut]: d => ({
+    'Timeout Type': d.timeoutType,
+  }),
+  [WORKFLOW_EVENT_TYPE.ChildWorkflowExecutionCompleted]: d => ({
     result: d.result,
     Workflow: workflowLink(d, true),
   }),
-  ChildWorkflowExecutionStarted: d => ({
+  [WORKFLOW_EVENT_TYPE.ChildWorkflowExecutionStarted]: d => ({
     Workflow: workflowLink(d),
   }),
-  DecisionTaskCompleted: d => ({ identity: d.identity }),
-  DecisionTaskScheduled: d => ({
+  [WORKFLOW_EVENT_TYPE.DecisionTaskCompleted]: d => ({ identity: d.identity }),
+  [WORKFLOW_EVENT_TYPE.DecisionTaskScheduled]: d => ({
     Tasklist: d.taskList.name,
     Timeout: moment.duration(d.startToCloseTimeoutSeconds, 'seconds').format(),
   }),
-  DecisionTaskStarted: d => ({ requestId: d.requestId }),
-  DecisionTaskTimedOut: d => ({ 'Timeout Type': d.timeoutType }),
-  ExternalWorkflowExecutionSignaled: d => ({
+  [WORKFLOW_EVENT_TYPE.DecisionTaskStarted]: d => ({ requestId: d.requestId }),
+  [WORKFLOW_EVENT_TYPE.DecisionTaskTimedOut]: d => ({
+    'Timeout Type': d.timeoutType,
+  }),
+  [WORKFLOW_EVENT_TYPE.ExternalWorkflowExecutionSignaled]: d => ({
     Workflow: workflowLink(d),
   }),
-  MarkerRecorded: d => {
+  [WORKFLOW_EVENT_TYPE.MarkerRecorded]: d => {
     const details = d.details || {};
 
     if (d.markerName === 'LocalActivity') {
@@ -79,23 +86,23 @@ export const summarizeEvents = {
 
     return d;
   },
-  StartChildWorkflowExecutionInitiated: d => ({
-    input: d.input,
-    Tasklist: d.taskList.name,
-    Workflow: shortName(d.workflowType.name),
-  }),
-  SignalExternalWorkflowExecutionInitiated: d => ({
+  [WORKFLOW_EVENT_TYPE.SignalExternalWorkflowExecutionInitiated]: d => ({
     input: d.input,
     signal: d.signalName,
     Workflow: workflowLink(d),
   }),
-  TimerStarted: d => ({
+  [WORKFLOW_EVENT_TYPE.StartChildWorkflowExecutionInitiated]: d => ({
+    input: d.input,
+    Tasklist: d.taskList.name,
+    Workflow: shortName(d.workflowType.name),
+  }),
+  [WORKFLOW_EVENT_TYPE.TimerStarted]: d => ({
     'Fire Timeout': moment
       .duration(d.startToFireTimeoutSeconds, 'seconds')
       .format(),
     'Timer ID': d.timerId,
   }),
-  WorkflowExecutionStarted: d => {
+  [WORKFLOW_EVENT_TYPE.WorkflowExecutionStarted]: d => {
     const summary = {
       'Close Timeout': moment
         .duration(d.executionStartToCloseTimeoutSeconds, 'seconds')
diff --git a/client/routes/workflow/history.vue b/client/routes/workflow/history.vue
index be91d801b..18ef9f1c3 100644
--- a/client/routes/workflow/history.vue
+++ b/client/routes/workflow/history.vue
@@ -147,7 +147,12 @@
                     "
                   >
                     <div class="td col-id">{{ item.eventId }}</div>
-                    <div class="td col-type">{{ item.eventType }}</div>
+                    <div class="td col-type">
+                      <highlight-toggle
+                        :is-highlighted="item.details.isHighlighted"
+                        :label="item.eventType"
+                      />
+                    </div>
                     <div class="td col-time">
                       {{
                         tsFormat === 'elapsed'
@@ -162,8 +167,19 @@
                             ? item.eventSummary
                             : item.eventFullDetails
                         "
+                        :is-highlight-enabled="
+                          compactDetails && !item.expanded
+                            ? false
+                            : workflowHistoryEventHighlightListEnabled
+                        "
                         :compact="compactDetails && !item.expanded"
-                        :highlight="events.length < 100"
+                        @onWorkflowHistoryEventParamToggle="
+                          eventParam =>
+                            onWorkflowHistoryEventParamToggle({
+                              eventParam,
+                              eventType: item.eventType,
+                            })
+                        "
                       />
                     </div>
                   </div>
@@ -201,6 +217,7 @@
                   <span class="event-title">{{ item.content }}</span>
                   <detail-list
                     :compact="true"
+                    :is-highlight-enabled="false"
                     :item="item.details"
                     :title="item.content"
                   />
@@ -226,6 +243,7 @@
               >
               <detail-list
                 class="timeline-details"
+                :is-highlight-enabled="false"
                 :item="selectedTimelineEvent.details"
                 :title="selectedTimelineEvent.content"
               />
@@ -239,15 +257,31 @@
                   @click.prevent="$router.replaceQueryParam('eventId', eid)"
                   :data-event-id="eid"
                 >
-                  {{ events.find(event => event.eventId === eid).eventType }}
+                  <highlight-toggle
+                    :is-highlighted="
+                      events.find(event => event.eventId === eid).details
+                        .isHighlighted
+                    "
+                    :label="
+                      events.find(event => event.eventId === eid).eventType
+                    "
+                  />
                 </a>
               </div>
               <detail-list
                 class="event-detail"
+                :is-highlight-enabled="workflowHistoryEventHighlightListEnabled"
                 :item="selectedEventDetails"
                 :title="
                   `${selectedTimelineEvent.content} - ${selectedEvent.eventType}`
                 "
+                @onWorkflowHistoryEventParamToggle="
+                  eventParam =>
+                    onWorkflowHistoryEventParamToggle({
+                      eventParam,
+                      eventType: selectedEvent.eventType,
+                    })
+                "
               />
             </div>
           </div>
@@ -270,7 +304,7 @@ import debounce from 'lodash-es/debounce';
 import omit from 'lodash-es/omit';
 import Timeline from './components/timeline.vue';
 import EventDetail from './components/event-detail.vue';
-import { DetailList } from '~components';
+import { DetailList, HighlightToggle } from '~components';
 
 export default {
   name: 'history',
@@ -309,6 +343,8 @@ export default {
     'runId',
     'showGraph',
     'timelineEvents',
+    'workflowHistoryEventHighlightList',
+    'workflowHistoryEventHighlightListEnabled',
     'workflowId',
   ],
   created() {
@@ -431,6 +467,9 @@ export default {
     onSplitResize: debounce(() => {
       window.dispatchEvent(new Event('resize'));
     }, 5),
+    onWorkflowHistoryEventParamToggle(event) {
+      this.$emit('onWorkflowHistoryEventParamToggle', event);
+    },
     setEventType(et) {
       this.eventType = et.value;
       setTimeout(() => this.scrollEventIntoView(this.eventId), 100);
@@ -524,6 +563,7 @@ export default {
     DynamicScroller,
     DynamicScrollerItem,
     'event-detail': EventDetail,
+    'highlight-toggle': HighlightToggle,
     prism: Prism,
     RecycleScroller,
     timeline: Timeline,
diff --git a/client/routes/workflow/index.vue b/client/routes/workflow/index.vue
index 7224fc898..b3d0b8832 100644
--- a/client/routes/workflow/index.vue
+++ b/client/routes/workflow/index.vue
@@ -49,7 +49,12 @@
       :events="historyEvents"
       :loading="history.loading"
       :timelineEvents="historyTimelineEvents"
+      :workflow-history-event-highlight-list="workflowHistoryEventHighlightList"
+      :workflow-history-event-highlight-list-enabled="
+        workflowHistoryEventHighlightListEnabled
+      "
       @onNotification="onNotification"
+      @onWorkflowHistoryEventParamToggle="onWorkflowHistoryEventParamToggle"
     />
     <router-view
       name="stacktrace"
@@ -111,6 +116,8 @@ export default {
     'runId',
     'timeFormat',
     'timezone',
+    'workflowHistoryEventHighlightList',
+    'workflowHistoryEventHighlightListEnabled',
     'workflowId',
   ],
   created() {
@@ -134,9 +141,23 @@ export default {
       )}/${encodeURIComponent(runId)}`;
     },
     historyEvents() {
-      const { dateFormat, events, timeFormat, timezone } = this;
+      const {
+        dateFormat,
+        events,
+        timeFormat,
+        timezone,
+        workflowHistoryEventHighlightList,
+        workflowHistoryEventHighlightListEnabled,
+      } = this;
 
-      return getHistoryEvents({ dateFormat, events, timeFormat, timezone });
+      return getHistoryEvents({
+        dateFormat,
+        events,
+        timeFormat,
+        timezone,
+        workflowHistoryEventHighlightList,
+        workflowHistoryEventHighlightListEnabled,
+      });
     },
     historyTimelineEvents() {
       const { historyEvents } = this;
@@ -303,6 +324,9 @@ export default {
     onNotification(event) {
       this.$emit('onNotification', event);
     },
+    onWorkflowHistoryEventParamToggle(event) {
+      this.$emit('onWorkflowHistoryEventParamToggle', event);
+    },
     setupQueryUrlWatch() {
       this.clearQueryUrlWatch();
       this.unwatch.push(
diff --git a/client/routes/workflow/summary.vue b/client/routes/workflow/summary.vue
index 8bfc529c2..be0bfaf15 100644
--- a/client/routes/workflow/summary.vue
+++ b/client/routes/workflow/summary.vue
@@ -134,10 +134,7 @@
 <script>
 import { TERMINATE_DEFAULT_ERROR_MESSAGE } from './constants';
 import { NOTIFICATION_TYPE_ERROR, NOTIFICATION_TYPE_SUCCESS } from '~constants';
-import {
-  getErrorMessage,
-  getDatetimeFormattedString,
-} from '~helpers';
+import { getErrorMessage, getDatetimeFormattedString } from '~helpers';
 import { BarLoader, ButtonFill, DataViewer, DetailList } from '~components';
 import { FeatureFlagService } from '~services';
 
@@ -171,9 +168,10 @@ export default {
     'detail-list': DetailList,
   },
   async mounted() {
-    const { name, params } = this;
     this.featureFlagService = new FeatureFlagService();
-    this.isWorkflowTerminateFeatureFlagEnabled = await this.featureFlagService.isFeatureFlagEnabled({ name: 'workflowTerminate' });
+    this.isWorkflowTerminateFeatureFlagEnabled = await this.featureFlagService.isFeatureFlagEnabled(
+      { name: 'workflowTerminate' }
+    );
     this.initAuthorization();
   },
   computed: {
@@ -231,7 +229,10 @@ export default {
       }
     },
     async initAuthorization() {
-      const isDomainAuthorizationFeatureFlagEnabled = await this.featureFlagService.isFeatureFlagEnabled({ name: 'domainAuthorization' });
+      const isDomainAuthorizationFeatureFlagEnabled = await this.featureFlagService.isFeatureFlagEnabled(
+        { name: 'domainAuthorization' }
+      );
+
       if (isDomainAuthorizationFeatureFlagEnabled) {
         const authorization = await this.fetchDomainAuthorization();
 
diff --git a/client/services/feature-flag-service.js b/client/services/feature-flag-service.js
index a2bd71e92..e1b2a1757 100644
--- a/client/services/feature-flag-service.js
+++ b/client/services/feature-flag-service.js
@@ -6,8 +6,9 @@ class FeatureFlagService {
   async isFeatureFlagEnabled({ name = '', params = {} }) {
     const queryParams = getQueryStringFromObject(params);
     const url = [URL_BASE, name, queryParams].join('');
+
     return (await http(window.fetch, url)).value;
   }
-};
+}
 
 export default FeatureFlagService;
diff --git a/client/styles/select.styl b/client/styles/select.styl
index 07529723a..7442a1204 100644
--- a/client/styles/select.styl
+++ b/client/styles/select.styl
@@ -4,6 +4,10 @@ main .v-select
   font-family inherit
   color text-color
 
+  &.disabled .dropdown-toggle input {
+    background-color: transparent;
+  }
+
   input {
     left: 0;
     position: absolute !important;
diff --git a/client/test/scenario.js b/client/test/scenario.js
index 48d1da62c..d306f36f2 100644
--- a/client/test/scenario.js
+++ b/client/test/scenario.js
@@ -91,6 +91,7 @@ Scenario.prototype.tearDown = function tearDown() {
   delete window.Mocha.copiedText;
 
   const unmatched = this.api.calls(false);
+
   return unmatched.length
     ? Promise.reject(
         new Error(`${unmatched.length} outstanding expected API calls:
@@ -164,7 +165,9 @@ Scenario.prototype.withDomainDescription = function withDomainDescription(
   return this;
 };
 
-Scenario.prototype.withFeatureFlags = function withFeatureFlags(featureFlags = []) {
+Scenario.prototype.withFeatureFlags = function withFeatureFlags(
+  featureFlags = []
+) {
   featureFlags.forEach(({ key, value }) => {
     this.api.getOnce(`/api/feature-flags/${key}`, {
       key,
diff --git a/client/test/workflow.test.js b/client/test/workflow.test.js
index 4a13498e5..7145620f5 100644
--- a/client/test/workflow.test.js
+++ b/client/test/workflow.test.js
@@ -16,12 +16,12 @@ describe('Workflow', () => {
         .withDomainAuthorization('ci-test', true)
         .withFeatureFlags([
           {
-            "key": "domainAuthorization",
-            "value": false
+            key: 'domainAuthorization',
+            value: false,
           },
           {
-            "key": "workflowTerminate",
-            "value": true
+            key: 'workflowTerminate',
+            value: true,
           },
         ])
         .withNewsFeed()
diff --git a/news/blog/_posts/2020-07-12-cadence-go-0-13-0.md b/news/blog/_posts/2020-07-12-cadence-go-0-13-0.md
index a0915abe7..afe730a60 100644
--- a/news/blog/_posts/2020-07-12-cadence-go-0-13-0.md
+++ b/news/blog/_posts/2020-07-12-cadence-go-0-13-0.md
@@ -1,5 +1,5 @@
 ---
-date: 2020-06-12T07:00:00
+date: 2020-07-12T07:00:00
 feed:
   enable: true
 ---
diff --git a/news/blog/_posts/2020-07-17-cadence-ui-3-18-0.md b/news/blog/_posts/2020-07-17-cadence-ui-3-18-0.md
index e082e810d..7c8af5b42 100644
--- a/news/blog/_posts/2020-07-17-cadence-ui-3-18-0.md
+++ b/news/blog/_posts/2020-07-17-cadence-ui-3-18-0.md
@@ -1,5 +1,5 @@
 ---
-date: 2020-06-17T07:00:00
+date: 2020-07-17T07:00:00
 feed:
   enable: true
 ---
diff --git a/news/blog/_posts/2020-07-28-cadence-ui-3-19-0.md b/news/blog/_posts/2020-07-28-cadence-ui-3-19-0.md
new file mode 100644
index 000000000..962538016
--- /dev/null
+++ b/news/blog/_posts/2020-07-28-cadence-ui-3-19-0.md
@@ -0,0 +1,12 @@
+---
+date: 2020-07-28T07:00:00
+feed:
+  enable: true
+---
+
+# Cadence UI v3.19.0
+<release-notes
+  owner="uber"
+  repo="cadence-web"
+  tag="v3.19.0"
+/>
diff --git a/package.json b/package.json
index ad6f1c54f..650e94ad9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cadence-web",
-  "version": "3.18.1",
+  "version": "3.19.0",
   "description": "Cadence Web UI",
   "main": "server/index.js",
   "licence": "MIT",
@@ -70,6 +70,7 @@
     "vue": "^2.5.13",
     "vue-infinite-scroll": "^2.0.2",
     "vue-js-modal": "^1.3.18",
+    "vue-js-toggle-button": "^1.3.3",
     "vue-loader": "^13.0.1",
     "vue-prism-component": "^1.0.1",
     "vue-router": "^3.0.1",