diff --git a/.webpack/webpack.prod.mjs b/.webpack/webpack.prod.mjs
index f0656b67e09..0b2e7921517 100644
--- a/.webpack/webpack.prod.mjs
+++ b/.webpack/webpack.prod.mjs
@@ -15,5 +15,5 @@ export default merge(common, {
       __OPENMCT_ROOT_RELATIVE__: '""'
     })
   ],
-  devtool: 'source-map'
+  devtool: 'eval-source-map'
 });
diff --git a/e2e/appActions.js b/e2e/appActions.js
index 105854b4cc7..6d94b1dc022 100644
--- a/e2e/appActions.js
+++ b/e2e/appActions.js
@@ -560,7 +560,7 @@ async function setFixedIndependentTimeConductorBounds(page, { start, end }) {
   await page.getByLabel('Enable Independent Time Conductor').click();
 
   // Bring up the time conductor popup
-  await page.getByLabel('Independent Time Conductor Settings').click();
+  await page.getByLabel('Independent Time Conductor Panel').click();
   await expect(page.getByLabel('Time Conductor Options')).toBeInViewport();
   await _setTimeBounds(page, start, end);
 
diff --git a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
index 8369012c7c5..6018b3f9b32 100644
--- a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
@@ -104,8 +104,9 @@ test.describe('Snapshot Container tests', () => {
     await page.locator('.ptro-crp-el').click();
     await page.locator('.ptro-text-tool-input').fill('...is there life on mars?');
     // When working with Painterro, we need to check that the Apply button is hidden after clicking
-    await page.getByTitle('Apply').click();
-    await expect(page.getByTitle('Apply')).toBeHidden();
+    const painterroApplyButton = page.locator('.ptro-text-tool-buttons').getByTitle('Apply');
+    await painterroApplyButton.click();
+    await expect(painterroApplyButton).toBeHidden();
 
     // Save and exit annotation window
     await page.getByRole('button', { name: 'Save' }).click();
@@ -130,8 +131,9 @@ test.describe('Snapshot Container tests', () => {
     await page.locator('.ptro-crp-el').click();
     await page.locator('.ptro-text-tool-input').fill('...is there life on mars?');
     // When working with Painterro, we need to check that the Apply button is hidden after clicking
-    await page.getByTitle('Apply').click();
-    await expect(page.getByTitle('Apply')).toBeHidden();
+    const painterroApplyButton = page.locator('.ptro-text-tool-buttons').getByTitle('Apply');
+    await painterroApplyButton.click();
+    await expect(painterroApplyButton).toBeHidden();
 
     // Save and exit annotation window
     await page.getByRole('button', { name: 'Save' }).click();
diff --git a/src/api/forms/components/controls/LocatorField.vue b/src/api/forms/components/controls/LocatorField.vue
index 7dc159a6dc2..192b42e71ac 100644
--- a/src/api/forms/components/controls/LocatorField.vue
+++ b/src/api/forms/components/controls/LocatorField.vue
@@ -23,7 +23,7 @@
 <template>
   <MctTree
     :is-selector-tree="true"
-    :initial-selection="model.parent"
+    :initial-selection="initialSelection"
     @tree-item-selection="handleItemSelection"
   />
 </template>
@@ -43,6 +43,11 @@ export default {
     }
   },
   emits: ['on-change'],
+  computed: {
+    initialSelection() {
+      return this.model.parent || this.model.value?.[0];
+    }
+  },
   methods: {
     handleItemSelection(item) {
       const data = {
diff --git a/src/api/time/IndependentTimeContext.js b/src/api/time/IndependentTimeContext.js
index 148bf52adf4..c0f1132223d 100644
--- a/src/api/time/IndependentTimeContext.js
+++ b/src/api/time/IndependentTimeContext.js
@@ -321,8 +321,16 @@ class IndependentTimeContext extends TimeContext {
       return this.upstreamTimeContext.setMode(...arguments);
     }
 
-    if (mode === MODES.realtime && this.activeClock === undefined) {
-      throw `Unknown clock. Has a clock been registered with 'addClock'?`;
+    if (mode === MODES.realtime) {
+      // TODO: This should probably happen up front in creating an independent time context
+      // TODO: not just in time every time setMode is called
+      if (this.activeClock === undefined) {
+        this.activeClock = this.globalTimeContext.getClock();
+      }
+
+      if (this.activeClock === undefined) {
+        throw `Unknown clock. Has a clock been registered with 'addClock'?`;
+      }
     }
 
     if (mode !== this.mode) {
diff --git a/src/api/time/TimeAPI.js b/src/api/time/TimeAPI.js
index 8b29a7c5ff8..cbec60ee0a4 100644
--- a/src/api/time/TimeAPI.js
+++ b/src/api/time/TimeAPI.js
@@ -135,33 +135,33 @@ class TimeAPI extends GlobalTimeContext {
 
   /**
    * Get or set an independent time context which follows the TimeAPI timeSystem,
-   * but with different offsets for a given domain object
-   * @param {string} key The identifier key of the domain object these offsets are set for
-   * @param {ClockOffsets | TimeConductorBounds} value This maintains a sliding time window of a fixed width that automatically updates
-   * @param {key | string} clockKey the real time clock key currently in use
+   * but with different bounds for a given domain object
+   * @param {string} keyString The keyString identifier of the domain object these offsets are set for
+   * @param {TimeConductorBounds | ClockOffsets} boundsOrOffsets either bounds if in fixed mode, or offsets if in realtime mode
+   * @param {string} clockKey the key for the real time clock to use
    */
-  addIndependentContext(key, value, clockKey) {
-    let timeContext = this.getIndependentContext(key);
+  addIndependentContext(keyString, boundsOrOffsets, clockKey) {
+    let timeContext = this.getIndependentContext(keyString);
 
     //stop following upstream time context since the view has its own
     timeContext.resetContext();
 
     if (clockKey) {
       timeContext.setClock(clockKey);
-      timeContext.setMode(REALTIME_MODE_KEY, value);
+      timeContext.setMode(REALTIME_MODE_KEY, boundsOrOffsets);
     } else {
-      timeContext.setMode(FIXED_MODE_KEY, value);
+      timeContext.setMode(FIXED_MODE_KEY, boundsOrOffsets);
     }
 
     // Also emit the mode in case it's different from the previous time context
     timeContext.emit(TIME_CONTEXT_EVENTS.modeChanged, structuredClone(timeContext.getMode()));
 
     // Notify any nested views to update, pass in the viewKey so that particular view can skip getting an upstream context
-    this.emit('refreshContext', key);
+    this.emit('refreshContext', keyString);
 
     return () => {
       //follow any upstream time context
-      this.emit('removeOwnContext', key);
+      this.emit('removeOwnContext', keyString);
     };
   }
 
diff --git a/src/api/time/TimeContext.js b/src/api/time/TimeContext.js
index 6bdd6ec2046..c7e8726d1eb 100644
--- a/src/api/time/TimeContext.js
+++ b/src/api/time/TimeContext.js
@@ -193,10 +193,10 @@ class TimeContext extends EventEmitter {
         valid: false,
         message: 'Start and end must be specified as integer values'
       };
-    } else if (bounds.start > bounds.end) {
+    } else if (bounds.start >= bounds.end) {
       return {
         valid: false,
-        message: 'Specified start date exceeds end bound'
+        message: 'Start bound must be less than end bound'
       };
     }
 
@@ -261,7 +261,7 @@ class TimeContext extends EventEmitter {
     } else if (offsets.start >= offsets.end) {
       return {
         valid: false,
-        message: 'Specified start offset must be < end offset'
+        message: 'Start offset must be less than end offset'
       };
     }
 
diff --git a/src/plugins/charts/scatter/ScatterPlotView.vue b/src/plugins/charts/scatter/ScatterPlotView.vue
index 95b623ecac1..b3084c3ca62 100644
--- a/src/plugins/charts/scatter/ScatterPlotView.vue
+++ b/src/plugins/charts/scatter/ScatterPlotView.vue
@@ -57,8 +57,8 @@ export default {
       const yAxisUnit = yAxisMetadata.units ? `(${yAxisMetadata.units})` : '';
 
       return {
-        xAxisTitle: `${xAxisMetadata.name || ''} ${xAxisUnit}`,
-        yAxisTitle: `${yAxisMetadata.name || ''} ${yAxisUnit}`
+        xAxisTitle: `${xAxis || ''} ${xAxisUnit}`,
+        yAxisTitle: `${yAxis || ''} ${yAxisUnit}`
       };
     }
   },
diff --git a/src/plugins/correlationTelemetryPlugin/plugin.js b/src/plugins/correlationTelemetryPlugin/plugin.js
new file mode 100644
index 00000000000..a1857fd1560
--- /dev/null
+++ b/src/plugins/correlationTelemetryPlugin/plugin.js
@@ -0,0 +1,228 @@
+const CORRELATOR_TYPE = 'telemetry.correlator';
+
+export default function CorrelationTelemetryPlugin(openmct) {
+  // eslint-disable-next-line no-shadow
+  return function install(openmct) {
+    function getTelemetryObject(idString) {
+      return openmct.objects.get(idString);
+    }
+
+    function getTelemetry(object, options) {
+      return openmct.telemetry.request(object, options);
+    }
+
+    openmct.types.addType(CORRELATOR_TYPE, {
+      name: 'Correlation Telemetry',
+      description: `Combines telemetry from multiple sources to produce telemetry correlated by timestamp with a given time tolerance.`,
+      cssClass: 'icon-object',
+      creatable: true,
+      initialize: function (obj) {
+        obj.telemetry = {};
+      },
+      form: [
+        {
+          key: 'xSource',
+          name: 'X Axis Source',
+          control: 'locator',
+          required: true,
+          cssClass: 'grows'
+        },
+        {
+          key: 'ySource',
+          name: 'Y Axis Source',
+          control: 'locator',
+          required: true,
+          cssClass: 'grows'
+        }
+      ]
+    });
+
+    openmct.telemetry.addProvider({
+      supportsMetadata: function (domainObject) {
+        return domainObject.type === CORRELATOR_TYPE;
+      },
+      getMetadata: function (domainObject) {
+        let metadata = {};
+        metadata.values = openmct.time.getAllTimeSystems().map(function (timeSystem, i) {
+          return {
+            name: timeSystem.name,
+            key: timeSystem.key,
+            source: timeSystem.source,
+            format: timeSystem.timeFormat,
+            hints: { domain: i }
+          };
+        });
+        metadata.values.push({
+          name: 'X',
+          key: 'x',
+          source: 'x',
+          hints: { xSource: 1, range: 1 }
+        });
+        metadata.values.push({
+          name: 'Y',
+          key: 'y',
+          source: 'y',
+          hints: { ySource: 1, range: 2 }
+        });
+        return metadata;
+      },
+      supportsRequest: function (domainObject) {
+        return domainObject.type === CORRELATOR_TYPE;
+      },
+      request: function (domainObject, options) {
+        let telemResults = {};
+        let telemObject;
+
+        const xSourceIdentifier = openmct.objects.makeKeyString(domainObject.xSource[0].identifier);
+        let xPromise = getTelemetryObject(xSourceIdentifier)
+          .then((object) => {
+            telemObject = object;
+            return getTelemetry(object, options);
+          })
+          .then((data) => {
+            let source = 'x';
+            telemResults[source] = {
+              object: telemObject
+            };
+            let metadata = openmct.telemetry.getMetadata(telemObject);
+            let valueMeta = metadata.valuesForHints(['range'])[0];
+            telemResults[source].coorelatorFormat = openmct.telemetry.getValueFormatter(valueMeta);
+            telemResults[source].coorelatorFormat = openmct.telemetry.getValueFormatter(valueMeta);
+            telemResults[source].timestampFormat = openmct.telemetry.getValueFormatter(
+              metadata.value(options.domain)
+            );
+            telemResults[source].data = data;
+          });
+
+        const ySourceIdentifier = openmct.objects.makeKeyString(domainObject.ySource[0].identifier);
+        let yPromise = getTelemetryObject(ySourceIdentifier)
+          .then((object) => {
+            telemObject = object;
+            return getTelemetry(object, options);
+          })
+          .then((data) => {
+            let source = 'y';
+            telemResults[source] = {
+              object: telemObject
+            };
+            let metadata = openmct.telemetry.getMetadata(telemObject);
+            let valueMeta = metadata.valuesForHints(['range'])[0];
+            telemResults[source].coorelatorFormat = openmct.telemetry.getValueFormatter(valueMeta);
+            telemResults[source].coorelatorFormat = openmct.telemetry.getValueFormatter(valueMeta);
+            telemResults[source].timestampFormat = openmct.telemetry.getValueFormatter(
+              metadata.value(options.domain)
+            );
+            telemResults[source].data = data;
+          });
+
+        return Promise.all([xPromise, yPromise]).then(function () {
+          let results = [];
+          let xByTime = telemResults.x.data.reduce(function (m, datum) {
+            m[telemResults.x.timestampFormat.parse(datum)] =
+              telemResults.x.coorelatorFormat.parse(datum);
+            return m;
+          }, {});
+          telemResults.y.data.forEach(function (datum) {
+            let timestamp = telemResults.y.timestampFormat.parse(datum);
+            if (xByTime[timestamp] !== undefined) {
+              let resultDatum = {
+                x: xByTime[timestamp],
+                y: telemResults.y.coorelatorFormat.parse(datum)
+              };
+              resultDatum[options.domain] = timestamp;
+              results.push(resultDatum);
+            }
+          });
+          return results;
+        });
+      },
+      supportsSubscribe: function (domainObject) {
+        return domainObject.type === CORRELATOR_TYPE;
+      },
+      subscribe: function (domainObject, callback) {
+        let telem = {};
+        let done = false;
+        let unsubscribes = [];
+
+        function sendUpdate() {
+          if (done) {
+            return;
+          }
+          if (!telem.y.latest || !telem.x.latest) {
+            return;
+          }
+          if (telem.y.latestTimestamp !== telem.x.latestTimestamp) {
+            return;
+          }
+          let datum = {
+            x: telem.x.coorelatorFormat.parse(telem.x.latest),
+            y: telem.y.coorelatorFormat.parse(telem.y.latest)
+          };
+          datum[openmct.time.timeSystem().key] = Math.max(
+            telem.x.latestTimestamp,
+            telem.y.latestTimestamp
+          );
+          delete telem.x.latest;
+          delete telem.y.latest;
+          delete telem.x.latestTimestamp;
+          delete telem.y.latestTimestamp;
+          callback(datum);
+        }
+
+        const xSourceIdentifier = openmct.objects.makeKeyString(domainObject.xSource[0].identifier);
+        getTelemetryObject(xSourceIdentifier).then(function (xObject) {
+          if (done) {
+            return;
+          }
+          telem.x = {
+            object: xObject
+          };
+          let metadata = openmct.telemetry.getMetadata(xObject);
+          let valueMeta = metadata.valuesForHints(['range'])[0];
+          telem.x.coorelatorFormat = openmct.telemetry.getValueFormatter(valueMeta);
+          telem.x.timestampFormat = openmct.telemetry.getValueFormatter(
+            metadata.value(openmct.time.timeSystem().key)
+          );
+          unsubscribes.push(
+            openmct.telemetry.subscribe(xObject, function (datum) {
+              telem.x.latest = datum;
+              telem.x.latestTimestamp = telem.x.timestampFormat.parse(datum);
+              requestAnimationFrame(sendUpdate);
+            })
+          );
+        });
+
+        const ySourceIdentifier = openmct.objects.makeKeyString(domainObject.ySource[0].identifier);
+        getTelemetryObject(ySourceIdentifier).then(function (yObject) {
+          if (done) {
+            return;
+          }
+          telem.y = {
+            object: yObject
+          };
+          let metadata = openmct.telemetry.getMetadata(yObject);
+          let valueMeta = metadata.valuesForHints(['range'])[0];
+          telem.y.coorelatorFormat = openmct.telemetry.getValueFormatter(valueMeta);
+          telem.y.timestampFormat = openmct.telemetry.getValueFormatter(
+            metadata.value(openmct.time.timeSystem().key)
+          );
+          unsubscribes.push(
+            openmct.telemetry.subscribe(yObject, function (datum) {
+              telem.y.latest = datum;
+              telem.y.latestTimestamp = telem.y.timestampFormat.parse(datum);
+              requestAnimationFrame(sendUpdate);
+            })
+          );
+        });
+
+        return function unsubscribe() {
+          done = true;
+          unsubscribes.forEach(function (u) {
+            u();
+          });
+          unsubscribes = undefined;
+        };
+      }
+    });
+  };
+}
diff --git a/src/plugins/plot/axis/XAxis.vue b/src/plugins/plot/axis/XAxis.vue
index ceb58503312..d35bedb624b 100644
--- a/src/plugins/plot/axis/XAxis.vue
+++ b/src/plugins/plot/axis/XAxis.vue
@@ -132,7 +132,7 @@ export default {
           };
         });
       }
-
+      console.log('xKeyOptions', this.xKeyOptions, 'this.xAxis', this.xAxis);
       this.xAxisLabel = this.xAxis.get('label');
       this.selectedXKeyOptionKey =
         this.xKeyOptions.length > 0 ? this.getXKeyOption(xAxisKey).key : xAxisKey;
diff --git a/src/plugins/plugins.js b/src/plugins/plugins.js
index 76b9e590d3d..470b90d97a6 100644
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@@ -34,6 +34,7 @@ import ClearData from './clearData/plugin.js';
 import Clock from './clock/plugin.js';
 import ConditionPlugin from './condition/plugin.js';
 import ConditionWidgetPlugin from './conditionWidget/plugin.js';
+import CorrelationTelemetryPlugin from './correlationTelemetryPlugin/plugin.js';
 import CouchDBSearchFolder from './CouchDBSearchFolder/plugin.js';
 import DefaultRootName from './defaultRootName/plugin.js';
 import DeviceClassifier from './DeviceClassifier/plugin.js';
@@ -177,6 +178,7 @@ plugins.Gauge = GaugePlugin;
 plugins.Timelist = TimeList;
 plugins.InspectorViews = InspectorViews;
 plugins.InspectorDataVisualization = InspectorDataVisualization;
+plugins.CorrelationTelemetry = CorrelationTelemetryPlugin;
 plugins.EventTimestripPlugin = EventTimestripPlugin;
 
 export default plugins;
diff --git a/src/plugins/timeConductor/ConductorAxis.vue b/src/plugins/timeConductor/ConductorAxis.vue
index bc824d08a1b..688973799af 100644
--- a/src/plugins/timeConductor/ConductorAxis.vue
+++ b/src/plugins/timeConductor/ConductorAxis.vue
@@ -41,21 +41,16 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import utcMultiTimeFormat from './utcMultiTimeFormat.js';
 
 const PADDING = 1;
-const DEFAULT_DURATION_FORMATTER = 'duration';
 const PIXELS_PER_TICK = 100;
 const PIXELS_PER_TICK_WIDE = 200;
 
 export default {
-  inject: ['openmct'],
+  inject: ['openmct', 'isFixedTimeMode'],
   props: {
     viewBounds: {
       type: Object,
       required: true
     },
-    isFixed: {
-      type: Boolean,
-      required: true
-    },
     altPressed: {
       type: Boolean,
       required: true
@@ -198,22 +193,8 @@ export default {
       this.axisElement.call(this.xAxis);
       this.setScale();
     },
-    getActiveFormatter() {
-      let timeSystem = this.openmct.time.getTimeSystem();
-
-      if (this.isFixed) {
-        return this.getFormatter(timeSystem.timeFormat);
-      } else {
-        return this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
-      }
-    },
-    getFormatter(key) {
-      return this.openmct.telemetry.getValueFormatter({
-        format: key
-      }).formatter;
-    },
     dragStart($event) {
-      if (this.isFixed) {
+      if (this.isFixedTimeMode) {
         this.dragStartX = $event.clientX;
 
         if (this.altPressed) {
diff --git a/src/plugins/timeConductor/ConductorClock.vue b/src/plugins/timeConductor/ConductorClock.vue
index 23f29d48951..f4321ff1337 100644
--- a/src/plugins/timeConductor/ConductorClock.vue
+++ b/src/plugins/timeConductor/ConductorClock.vue
@@ -23,8 +23,8 @@
   <div v-if="readOnly === false" ref="clockButton" class="c-tc-input-popup__options">
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
-        class="c-button--menu js-clock-button"
-        :class="[buttonCssClass, selectedClock.cssClass]"
+        class="c-button--menu js-clock-button c-icon-button"
+        :class="selectedClock.cssClass"
         aria-label="Time Conductor Clock Menu"
         @click.prevent.stop="showClocksMenu"
       >
@@ -38,18 +38,8 @@
 </template>
 
 <script>
-import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
-import clockMixin from './clock-mixin.js';
-
 export default {
-  mixins: [clockMixin],
-  inject: {
-    openmct: 'openmct',
-    configuration: {
-      from: 'configuration',
-      default: undefined
-    }
-  },
+  inject: ['openmct', 'configuration', 'clock', 'getAllClockMetadata', 'getClockMetadata'],
   props: {
     readOnly: {
       type: Boolean,
@@ -58,21 +48,13 @@ export default {
       }
     }
   },
-  emits: ['clock-updated'],
-  data() {
-    const activeClock = this.getActiveClock();
-
-    return {
-      selectedClock: activeClock ? this.getClockMetadata(activeClock) : undefined,
-      clocks: []
-    };
+  computed: {
+    selectedClock() {
+      return this.getClockMetadata(this.clock);
+    }
   },
   mounted() {
-    this.loadClocks(this.configuration.menuOptions);
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
-  },
-  unmounted() {
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
+    this.clocks = this.getAllClockMetadata(this.configuration.menuOptions);
   },
   methods: {
     showClocksMenu() {
@@ -86,52 +68,6 @@ export default {
       };
 
       this.dismiss = this.openmct.menus.showSuperMenu(x, y, this.clocks, menuOptions);
-    },
-    setClock(clockKey) {
-      const option = {
-        clockKey
-      };
-      let configuration = this.getMatchingConfig({
-        clock: clockKey,
-        timeSystem: this.openmct.time.getTimeSystem().key
-      });
-
-      if (configuration === undefined) {
-        configuration = this.getMatchingConfig({
-          clock: clockKey
-        });
-
-        option.timeSystem = configuration.timeSystem;
-        option.bounds = configuration.bounds;
-
-        // this.openmct.time.setTimeSystem(configuration.timeSystem, configuration.bounds);
-      }
-
-      const offsets = this.openmct.time.getClockOffsets() ?? configuration.clockOffsets;
-      option.offsets = offsets;
-
-      this.$emit('clock-updated', option);
-    },
-    getMatchingConfig(options) {
-      const matchers = {
-        clock(config) {
-          return options.clock === config.clock;
-        },
-        timeSystem(config) {
-          return options.timeSystem === config.timeSystem;
-        }
-      };
-
-      function configMatches(config) {
-        return Object.keys(options).reduce((match, option) => {
-          return match && matchers[option](config);
-        }, true);
-      }
-
-      return this.configuration.menuOptions.filter(configMatches)[0];
-    },
-    setViewFromClock(clock) {
-      this.selectedClock = this.getClockMetadata(clock);
     }
   }
 };
diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index 1f9339c9bfa..f8df48370fd 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -27,62 +27,49 @@
       { 'is-zooming': isZooming },
       { 'is-panning': isPanning },
       { 'alt-pressed': altPressed },
-      isFixed ? 'is-fixed-mode' : 'is-realtime-mode'
+      isFixedTimeMode ? 'is-fixed-mode' : 'is-realtime-mode'
     ]"
   >
     <ConductorModeIcon class="c-conductor__mode-icon" />
     <div class="c-compact-tc__setting-value u-fade-truncate">
-      <ConductorMode :mode="mode" :read-only="true" />
+      <ConductorMode :read-only="true" />
       <ConductorClock :read-only="true" />
       <ConductorTimeSystem :read-only="true" />
     </div>
-    <ConductorInputsFixed v-if="isFixed" :input-bounds="viewBounds" :read-only="true" />
+    <ConductorInputsFixed v-if="isFixedTimeMode" :input-bounds="viewBounds" :read-only="true" />
     <ConductorInputsRealtime v-else :input-bounds="viewBounds" :read-only="true" />
     <ConductorAxis
-      v-if="isFixed"
+      v-if="isFixedTimeMode"
       class="c-conductor__ticks"
       :view-bounds="viewBounds"
-      :is-fixed="isFixed"
       :alt-pressed="altPressed"
       @end-pan="endPan"
       @end-zoom="endZoom"
       @pan-axis="pan"
       @zoom-axis="zoom"
     />
-    <div
-      role="button"
-      class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"
-      aria-label="Time Conductor Settings"
-    ></div>
-
+    <ConductorHistory
+      class="c-conductor__history-select"
+      title="Select and apply previously entered time intervals."
+    />
     <ConductorPopUp
       v-if="showConductorPopup"
       ref="conductorPopup"
       :bottom="false"
       :position-x="positionX"
       :position-y="positionY"
-      :is-fixed="isFixed"
       @popup-loaded="initializePopup"
-      @mode-updated="saveMode"
-      @clock-updated="saveClock"
-      @fixed-bounds-updated="saveFixedBounds"
-      @clock-offsets-updated="saveClockOffsets"
       @dismiss="clearPopup"
     />
   </div>
 </template>
 
 <script>
-import _ from 'lodash';
+import { inject, provide } from 'vue';
 
-import {
-  FIXED_MODE_KEY,
-  MODES,
-  REALTIME_MODE_KEY,
-  TIME_CONTEXT_EVENTS
-} from '../../api/time/constants.js';
 import ConductorAxis from './ConductorAxis.vue';
 import ConductorClock from './ConductorClock.vue';
+import ConductorHistory from './ConductorHistory.vue';
 import ConductorInputsFixed from './ConductorInputsFixed.vue';
 import ConductorInputsRealtime from './ConductorInputsRealtime.vue';
 import ConductorMode from './ConductorMode.vue';
@@ -90,14 +77,14 @@ import ConductorModeIcon from './ConductorModeIcon.vue';
 import ConductorPopUp from './ConductorPopUp.vue';
 import conductorPopUpManager from './conductorPopUpManager.js';
 import ConductorTimeSystem from './ConductorTimeSystem.vue';
-
-const DEFAULT_DURATION_FORMATTER = 'duration';
+import { useTime } from './useTime.js';
 
 export default {
   components: {
     ConductorTimeSystem,
     ConductorClock,
     ConductorMode,
+    ConductorHistory,
     ConductorInputsRealtime,
     ConductorInputsFixed,
     ConductorAxis,
@@ -106,38 +93,54 @@ export default {
   },
   mixins: [conductorPopUpManager],
   inject: ['openmct', 'configuration'],
-  data() {
-    const isFixed = this.openmct.time.isFixed();
-    const bounds = this.openmct.time.getBounds();
-    const offsets = this.openmct.time.getClockOffsets();
-    const timeSystem = this.openmct.time.getTimeSystem();
-    const timeFormatter = this.getFormatter(timeSystem.timeFormat);
-    const durationFormatter = this.getFormatter(
-      timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
-    );
+  setup(props) {
+    const openmct = inject('openmct');
+    const {
+      timeContext,
+      timeSystemFormatter,
+      timeSystemDurationFormatter,
+      isTimeSystemUTCBased,
+      timeMode,
+      isFixedTimeMode,
+      isRealTimeMode,
+      getAllModeMetadata,
+      getModeMetadata,
+      bounds,
+      isTick,
+      offsets,
+      clock,
+      getAllClockMetadata,
+      getClockMetadata
+    } = useTime(openmct);
+
+    provide('timeSystemFormatter', timeSystemFormatter);
+    provide('timeSystemDurationFormatter', timeSystemDurationFormatter);
+    provide('isTimeSystemUTCBased', isTimeSystemUTCBased);
+    provide('timeContext', timeContext);
+    provide('timeMode', timeMode);
+    provide('isFixedTimeMode', isFixedTimeMode);
+    provide('isRealTimeMode', isRealTimeMode);
+    provide('getAllModeMetadata', getAllModeMetadata);
+    provide('getModeMetadata', getModeMetadata);
+    provide('bounds', bounds);
+    provide('isTick', isTick);
+    provide('offsets', offsets);
+    provide('clock', clock);
+    provide('getAllClockMetadata', getAllClockMetadata);
+    provide('getClockMetadata', getClockMetadata);
 
     return {
-      timeSystem,
-      timeFormatter,
-      durationFormatter,
-      offsets: {
-        start: offsets && durationFormatter.format(Math.abs(offsets.start)),
-        end: offsets && durationFormatter.format(Math.abs(offsets.end))
-      },
-      bounds: {
-        start: bounds.start,
-        end: bounds.end
-      },
-      formattedBounds: {
-        start: timeFormatter.format(bounds.start),
-        end: timeFormatter.format(bounds.end)
-      },
+      timeSystemFormatter,
+      isFixedTimeMode,
+      bounds
+    };
+  },
+  data() {
+    return {
       viewBounds: {
-        start: bounds.start,
-        end: bounds.end
+        start: this.bounds.start,
+        end: this.bounds.end
       },
-      isFixed,
-      isUTCBased: timeSystem.isUTCBased,
       showDatePicker: false,
       showConductorPopup: false,
       altPressed: false,
@@ -146,38 +149,30 @@ export default {
     };
   },
   computed: {
-    mode() {
-      return this.isFixed ? FIXED_MODE_KEY : REALTIME_MODE_KEY;
+    formattedBounds() {
+      return {
+        start: this.timeSystemFormatter.format(this.bounds.start),
+        end: this.timeSystemFormatter.format(this.bounds.end)
+      };
+    }
+  },
+  watch: {
+    bounds: {
+      handler() {
+        this.setViewBounds(this.bounds);
+      },
+      deep: true
     }
   },
   mounted() {
     document.addEventListener('keydown', this.handleKeyDown);
     document.addEventListener('keyup', this.handleKeyUp);
-
-    this.setTimeSystem(this.copy(this.openmct.time.getTimeSystem()));
-
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.boundsChanged, _.throttle(this.handleNewBounds, 300));
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.modeChanged, this.setMode);
   },
   beforeUnmount() {
     document.removeEventListener('keydown', this.handleKeyDown);
     document.removeEventListener('keyup', this.handleKeyUp);
-
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.boundsChanged, _.throttle(this.handleNewBounds, 300));
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.modeChanged, this.setMode);
   },
   methods: {
-    handleNewBounds(bounds, isTick) {
-      if (this.openmct.time.isRealTime() || !isTick) {
-        this.setBounds(bounds);
-        this.setViewFromBounds(bounds);
-      }
-    },
-    setBounds(bounds) {
-      this.bounds = bounds;
-    },
     handleKeyDown(event) {
       if (event.key === 'Alt') {
         this.altPressed = true;
@@ -190,7 +185,7 @@ export default {
     },
     pan(bounds) {
       this.isPanning = true;
-      this.setViewFromBounds(bounds);
+      this.setViewBounds(bounds);
     },
     endPan(bounds) {
       this.isPanning = false;
@@ -203,8 +198,8 @@ export default {
         this.isZooming = false;
       } else {
         this.isZooming = true;
-        this.formattedBounds.start = this.timeFormatter.format(bounds.start);
-        this.formattedBounds.end = this.timeFormatter.format(bounds.end);
+        this.formattedBounds.start = this.timeSystemFormatter.format(bounds.start);
+        this.formattedBounds.end = this.timeSystemFormatter.format(bounds.end);
       }
     },
     endZoom(bounds) {
@@ -212,49 +207,12 @@ export default {
       if (bounds) {
         this.openmct.time.setBounds(bounds);
       } else {
-        this.setViewFromBounds(this.bounds);
+        this.setViewBounds(this.bounds);
       }
     },
-    setTimeSystem(timeSystem) {
-      this.timeSystem = timeSystem;
-      this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
-      this.durationFormatter = this.getFormatter(
-        timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
-      );
-      this.isUTCBased = timeSystem.isUTCBased;
-    },
-    setMode() {
-      this.isFixed = this.openmct.time.isFixed();
-    },
-    setViewFromBounds(bounds) {
-      this.formattedBounds.start = this.timeFormatter.format(bounds.start);
-      this.formattedBounds.end = this.timeFormatter.format(bounds.end);
+    setViewBounds(bounds) {
       this.viewBounds.start = bounds.start;
       this.viewBounds.end = bounds.end;
-    },
-    getFormatter(key) {
-      return this.openmct.telemetry.getValueFormatter({
-        format: key
-      }).formatter;
-    },
-    getBoundsForMode(mode) {
-      const isRealTime = mode === MODES.realtime;
-      return isRealTime ? this.openmct.time.getClockOffsets() : this.openmct.time.getBounds();
-    },
-    saveFixedBounds(bounds) {
-      this.openmct.time.setBounds(bounds);
-    },
-    saveClockOffsets(offsets) {
-      this.openmct.time.setClockOffsets(offsets);
-    },
-    saveClock(clockOptions) {
-      this.openmct.time.setClock(clockOptions.clockKey);
-    },
-    saveMode(mode) {
-      this.openmct.time.setMode(mode, this.getBoundsForMode(mode));
-    },
-    copy(object) {
-      return JSON.parse(JSON.stringify(object));
     }
   }
 };
diff --git a/src/plugins/timeConductor/ConductorHistory.vue b/src/plugins/timeConductor/ConductorHistory.vue
index b7764fb5c03..c7fd4063cf9 100644
--- a/src/plugins/timeConductor/ConductorHistory.vue
+++ b/src/plugins/timeConductor/ConductorHistory.vue
@@ -24,12 +24,9 @@
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
         aria-label="Time Conductor History"
-        class="c-button--menu c-history-button icon-history"
-        :class="buttonCssClass"
+        class="c-button--minor c-history-button icon-history c-icon-button"
         @click.prevent.stop="showHistoryMenu"
-      >
-        <span class="c-button__label">History</span>
-      </button>
+      />
     </div>
   </div>
 </template>
@@ -47,15 +44,6 @@ import UTCTimeFormat from '../utcTimeSystem/UTCTimeFormat.js';
 
 export default {
   inject: ['openmct', 'configuration'],
-  props: {
-    buttonCssClass: {
-      type: String,
-      required: false,
-      default() {
-        return '';
-      }
-    }
-  },
   data() {
     const mode = this.openmct.time.getMode();
 
diff --git a/src/plugins/timeConductor/ConductorInputsFixed.vue b/src/plugins/timeConductor/ConductorInputsFixed.vue
index ee5309f25f6..5d72fda0fb7 100644
--- a/src/plugins/timeConductor/ConductorInputsFixed.vue
+++ b/src/plugins/timeConductor/ConductorInputsFixed.vue
@@ -20,14 +20,12 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <TimePopupFixed
-    v-if="readOnly === false"
-    :input-bounds="bounds"
-    :input-time-system="timeSystem"
+  <DateTimePopupFixed
+    v-if="shouldUseSplitDateTimeInputs && !readOnly"
     @focus="$event.target.select()"
-    @update="setBoundsFromView"
     @dismiss="dismiss"
   />
+  <TimePopupFixed v-else-if="!readOnly" @focus="$event.target.select()" @dismiss="dismiss" />
   <div v-else class="c-compact-tc__setting-wrapper">
     <div
       class="c-compact-tc__setting-value u-fade-truncate--lg --no-sep"
@@ -48,29 +46,16 @@
 </template>
 
 <script>
-import _ from 'lodash';
-
-import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import DateTimePopupFixed from './DateTimePopupFixed.vue';
 import TimePopupFixed from './TimePopupFixed.vue';
 
 export default {
   components: {
-    TimePopupFixed
+    TimePopupFixed,
+    DateTimePopupFixed
   },
-  inject: ['openmct'],
+  inject: ['openmct', 'timeContext', 'bounds', 'timeSystemFormatter'],
   props: {
-    inputBounds: {
-      type: Object,
-      default() {
-        return undefined;
-      }
-    },
-    objectPath: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
     readOnly: {
       type: Boolean,
       default() {
@@ -84,94 +69,19 @@ export default {
       }
     }
   },
-  emits: ['bounds-updated', 'dismiss-inputs-fixed'],
-  data() {
-    const timeSystem = this.openmct.time.getTimeSystem();
-    const timeFormatter = this.getFormatter(timeSystem.timeFormat);
-    let bounds = this.inputBounds || this.openmct.time.getBounds();
-
-    return {
-      timeSystem,
-      timeFormatter,
-      bounds: {
-        start: bounds.start,
-        end: bounds.end
-      },
-      formattedBounds: {
-        start: timeFormatter.format(bounds.start),
-        end: timeFormatter.format(bounds.end)
-      },
-      isUTCBased: timeSystem.isUTCBased
-    };
-  },
-  watch: {
-    objectPath: {
-      handler(newPath, oldPath) {
-        if (newPath === oldPath) {
-          return;
-        }
-
-        this.setTimeContext();
-      },
-      deep: true
+  emits: ['dismiss-inputs-fixed'],
+  computed: {
+    shouldUseSplitDateTimeInputs() {
+      return Boolean(this.timeSystemFormatter.formatDate);
     },
-    inputBounds: {
-      handler(newBounds) {
-        this.handleNewBounds(newBounds);
-      },
-      deep: true
+    formattedBounds() {
+      return {
+        start: this.timeSystemFormatter.format(this.bounds.start),
+        end: this.timeSystemFormatter.format(this.bounds.end)
+      };
     }
   },
-  mounted() {
-    this.handleNewBounds = _.throttle(this.handleNewBounds, 300);
-    this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem())));
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.setTimeContext();
-  },
-  beforeUnmount() {
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.stopFollowingTimeContext();
-  },
   methods: {
-    setTimeContext() {
-      this.stopFollowingTimeContext();
-      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-
-      this.handleNewBounds(this.timeContext.getBounds());
-      this.timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-    },
-    stopFollowingTimeContext() {
-      if (this.timeContext) {
-        this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-      }
-    },
-    handleNewBounds(bounds) {
-      this.setBounds(bounds);
-      this.setViewFromBounds(bounds);
-    },
-    setBounds(bounds) {
-      this.bounds = bounds;
-    },
-    setViewFromBounds(bounds) {
-      this.formattedBounds.start = this.timeFormatter.format(bounds.start);
-      this.formattedBounds.end = this.timeFormatter.format(bounds.end);
-    },
-    setTimeSystem(timeSystem) {
-      this.timeSystem = timeSystem;
-      this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
-      this.isUTCBased = timeSystem.isUTCBased;
-    },
-    getFormatter(key) {
-      return this.openmct.telemetry.getValueFormatter({
-        format: key
-      }).formatter;
-    },
-    setBoundsFromView(bounds) {
-      this.$emit('bounds-updated', {
-        start: bounds.start,
-        end: bounds.end
-      });
-    },
     dismiss() {
       this.$emit('dismiss-inputs-fixed');
     }
diff --git a/src/plugins/timeConductor/ConductorInputsRealtime.vue b/src/plugins/timeConductor/ConductorInputsRealtime.vue
index ec98b823f5c..0c67813f637 100644
--- a/src/plugins/timeConductor/ConductorInputsRealtime.vue
+++ b/src/plugins/timeConductor/ConductorInputsRealtime.vue
@@ -22,29 +22,28 @@
 <template>
   <TimePopupRealtime
     v-if="readOnly === false"
-    :offsets="offsets"
+    :offsets="formattedOffsets"
     @focus="$event.target.select()"
-    @update="timePopUpdate"
     @dismiss="dismiss"
   />
   <div v-else class="c-compact-tc__setting-wrapper">
     <div
       v-if="!compact"
       class="c-compact-tc__setting-value icon-minus u-fade-truncate--lg --no-sep"
-      :aria-label="`Start offset: ${offsets.start}`"
-      :title="`Start offset: ${offsets.start}`"
+      :aria-label="`Start offset: ${formattedOffsets.start}`"
+      :title="`Start offset: ${formattedOffsets.start}`"
     >
-      {{ offsets.start }}
+      {{ formattedOffsets.start }}
     </div>
     <div v-if="!compact" class="c-compact-tc__bounds__start-end-sep icon-arrows-right-left"></div>
     <div
       v-if="!compact"
       class="c-compact-tc__setting-value icon-plus u-fade-truncate--lg"
       :class="{ '--no-sep': compact }"
-      :aria-label="`End offset: ${offsets.end}`"
-      :title="`End offset: ${offsets.end}`"
+      :aria-label="`End offset: ${formattedOffsets.end}`"
+      :title="`End offset: ${formattedOffsets.end}`"
     >
-      {{ offsets.end }}
+      {{ formattedOffsets.end }}
     </div>
     <div
       class="c-compact-tc__setting-value icon-clock c-compact-tc__current-update u-fade-truncate--lg --no-sep"
@@ -58,31 +57,21 @@
 </template>
 
 <script>
-import _ from 'lodash';
-
-import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import TimePopupRealtime from './TimePopupRealtime.vue';
 
-const DEFAULT_DURATION_FORMATTER = 'duration';
-
 export default {
   components: {
     TimePopupRealtime
   },
-  inject: ['openmct'],
+  inject: [
+    'openmct',
+    'bounds',
+    'clock',
+    'offsets',
+    'timeSystemFormatter',
+    'timeSystemDurationFormatter'
+  ],
   props: {
-    objectPath: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    inputBounds: {
-      type: Object,
-      default() {
-        return undefined;
-      }
-    },
     readOnly: {
       type: Boolean,
       default() {
@@ -96,169 +85,34 @@ export default {
       }
     }
   },
-  emits: ['offsets-updated', 'dismiss-inputs-realtime'],
+  emits: ['dismiss-inputs-realtime'],
   data() {
-    const timeSystem = this.openmct.time.getTimeSystem();
-    const durationFormatter = this.getFormatter(
-      timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
-    );
-    const timeFormatter = this.getFormatter(timeSystem.timeFormat);
-    const bounds = this.bounds ?? this.openmct.time.getBounds();
-    const offsets = this.offsets ?? this.openmct.time.getClockOffsets();
-    const currentValue = this.openmct.time.getClock()?.currentValue();
-
     return {
-      showTCInputStart: false,
-      showTCInputEnd: false,
-      durationFormatter,
-      timeFormatter,
-      bounds: {
-        start: bounds.start,
-        end: bounds.end
-      },
-      offsets: {
-        start: offsets && durationFormatter.format(Math.abs(offsets.start)),
-        end: offsets && durationFormatter.format(Math.abs(offsets.end))
-      },
-      formattedBounds: {
-        start: timeFormatter.format(bounds.start),
-        end: timeFormatter.format(bounds.end)
-      },
-      currentValue,
-      formattedCurrentValue: timeFormatter.format(currentValue),
-      isUTCBased: timeSystem.isUTCBased
+      currentValue: this.clock.currentValue()
     };
   },
-  watch: {
-    objectPath: {
-      handler(newPath, oldPath) {
-        if (newPath === oldPath) {
-          return;
-        }
-
-        this.setTimeContext();
-      },
-      deep: true
-    },
-    inputBounds: {
-      handler(newBounds) {
-        this.handleNewBounds(newBounds);
-      },
-      deep: true
+  computed: {
+    formattedOffsets() {
+      return {
+        start: this.timeSystemDurationFormatter.format(Math.abs(this.offsets.start)),
+        end: this.timeSystemDurationFormatter.format(Math.abs(this.offsets.end))
+      };
+    },
+    formattedCurrentValue() {
+      return this.timeSystemFormatter.format(this.currentValue);
     }
   },
-  mounted() {
-    this.handleNewBounds = _.throttle(this.handleNewBounds, 300, {
-      leading: true,
-      trailing: true
-    });
-    this.setTimeSystem(this.copy(this.openmct.time.getTimeSystem()));
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.setTimeContext();
-  },
-  beforeUnmount() {
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.stopFollowingTime();
+  watch: {
+    bounds() {
+      this.updateCurrentValue();
+    }
   },
   methods: {
-    followTime() {
-      const bounds = this.timeContext
-        ? this.timeContext.getBounds()
-        : this.openmct.time.getBounds();
-      const offsets = this.timeContext
-        ? this.timeContext.getClockOffsets()
-        : this.openmct.time.getClockOffsets();
-
-      this.handleNewBounds(bounds);
-      this.setViewFromOffsets(offsets);
-
-      if (this.timeContext) {
-        this.timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-        this.timeContext.on(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.setViewFromOffsets);
-      } else {
-        this.openmct.time.on(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-        this.openmct.time.on(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.setViewFromOffsets);
-      }
-    },
-    stopFollowingTime() {
-      this.handleNewBounds.cancel();
-
-      if (this.timeContext) {
-        this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-        this.timeContext.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.setViewFromOffsets);
-      } else {
-        this.openmct.time.off(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-        this.openmct.time.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.setViewFromOffsets);
-      }
-    },
-    setTimeContext() {
-      this.stopFollowingTime();
-      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-      this.followTime();
-    },
-    handleNewBounds(bounds, isTick) {
-      if (this.timeContext.isRealTime() || !isTick) {
-        this.setBounds(bounds);
-        this.setViewFromBounds(bounds);
-        this.updateCurrentValue();
-      }
-    },
-    setViewFromOffsets(offsets) {
-      if (offsets) {
-        this.offsets.start = this.durationFormatter.format(Math.abs(offsets.start));
-        this.offsets.end = this.durationFormatter.format(Math.abs(offsets.end));
-      }
-    },
-    setBounds(bounds) {
-      this.bounds = bounds;
-    },
-    setViewFromBounds(bounds) {
-      this.formattedBounds.start = this.timeFormatter.format(bounds.start);
-      this.formattedBounds.end = this.timeFormatter.format(bounds.end);
-    },
     updateCurrentValue() {
-      const currentValue = this.timeContext.getClock().currentValue();
-
-      if (currentValue !== undefined) {
-        this.setCurrentValue(currentValue);
-      }
-    },
-    setCurrentValue(value) {
-      this.currentValue = value;
-      this.formattedCurrentValue = this.timeFormatter.format(value);
-    },
-    setTimeSystem(timeSystem) {
-      this.timeSystem = timeSystem;
-      this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
-      this.durationFormatter = this.getFormatter(
-        timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
-      );
-      this.isUTCBased = timeSystem.isUTCBased;
-    },
-    getFormatter(key) {
-      return this.openmct.telemetry.getValueFormatter({
-        format: key
-      }).formatter;
-    },
-    timePopUpdate({ start, end }) {
-      this.offsets.start = [start.hours, start.minutes, start.seconds].join(':');
-      this.offsets.end = [end.hours, end.minutes, end.seconds].join(':');
-      this.setOffsetsFromView();
-    },
-    setOffsetsFromView() {
-      let startOffset = 0 - this.durationFormatter.parse(this.offsets.start);
-      let endOffset = this.durationFormatter.parse(this.offsets.end);
-
-      this.$emit('offsets-updated', {
-        start: startOffset,
-        end: endOffset
-      });
+      this.currentValue = this.clock.currentValue();
     },
     dismiss() {
       this.$emit('dismiss-inputs-realtime');
-    },
-    copy(object) {
-      return JSON.parse(JSON.stringify(object));
     }
   }
 };
diff --git a/src/plugins/timeConductor/ConductorMode.vue b/src/plugins/timeConductor/ConductorMode.vue
index e198406fc5f..da631bc0f95 100644
--- a/src/plugins/timeConductor/ConductorMode.vue
+++ b/src/plugins/timeConductor/ConductorMode.vue
@@ -23,8 +23,8 @@
   <div v-if="readOnly === false" ref="modeButton" class="c-tc-input-popup__options">
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
-        class="c-button--menu js-mode-button"
-        :class="[buttonCssClass, selectedMode.cssClass]"
+        class="c-button--menu js-mode-button c-icon-button"
+        :class="selectedMode.cssClass"
         aria-label="Time Conductor Mode Menu"
         @click.prevent.stop="showModesMenu"
       >
@@ -43,20 +43,9 @@
 </template>
 
 <script>
-import modeMixin from './mode-mixin.js';
-
-const TEST_IDS = true;
-
 export default {
-  mixins: [modeMixin],
-  inject: ['openmct', 'configuration'],
+  inject: ['openmct', 'timeMode', 'getAllModeMetadata', 'getModeMetadata'],
   props: {
-    mode: {
-      type: String,
-      default() {
-        return undefined;
-      }
-    },
     readOnly: {
       type: Boolean,
       default() {
@@ -64,24 +53,20 @@ export default {
       }
     }
   },
-  emits: ['mode-updated'],
   data() {
-    const mode = this.openmct.time.getMode();
-
     return {
-      selectedMode: this.getModeMetadata(mode, TEST_IDS),
-      modes: []
+      selectedMode: this.getModeMetadata(this.timeMode)
     };
   },
   watch: {
-    mode: {
-      handler(newMode) {
-        this.setViewFromMode(newMode);
+    timeMode: {
+      handler() {
+        this.setView();
       }
     }
   },
   mounted() {
-    this.loadModes();
+    this.modes = this.getAllModeMetadata();
   },
   methods: {
     showModesMenu() {
@@ -96,13 +81,8 @@ export default {
 
       this.dismiss = this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
     },
-    setViewFromMode(mode) {
-      this.selectedMode = this.getModeMetadata(mode, TEST_IDS);
-    },
-    setMode(mode) {
-      this.setViewFromMode(mode);
-
-      this.$emit('mode-updated', mode);
+    setView() {
+      this.selectedMode = this.getModeMetadata(this.timeMode);
     }
   }
 };
diff --git a/src/plugins/timeConductor/ConductorPopUp.vue b/src/plugins/timeConductor/ConductorPopUp.vue
index 4d699774c06..415fdae53f0 100644
--- a/src/plugins/timeConductor/ConductorPopUp.vue
+++ b/src/plugins/timeConductor/ConductorPopUp.vue
@@ -5,66 +5,36 @@
         v-if="isIndependent"
         class="c-conductor__mode-select"
         title="Sets the Time Conductor's mode."
-        :mode="timeOptionMode"
-        @independent-mode-updated="saveIndependentMode"
       />
       <ConductorMode
         v-else
         class="c-conductor__mode-select"
         title="Sets the Time Conductor's mode."
-        :button-css-class="'c-icon-button'"
-        @mode-updated="saveMode"
       />
       <IndependentClock
         v-if="isIndependent"
         class="c-conductor__mode-select"
         title="Sets the Time Conductor's clock."
-        :clock="timeOptionClock"
-        :button-css-class="'c-icon-button'"
-        @independent-clock-updated="saveIndependentClock"
       />
       <ConductorClock
         v-else
         class="c-conductor__mode-select"
         title="Sets the Time Conductor's clock."
-        :button-css-class="'c-icon-button'"
-        @clock-updated="saveClock"
       />
       <!-- TODO: Time system and history must work even with ITC later -->
       <ConductorTimeSystem
         v-if="!isIndependent"
         class="c-conductor__time-system-select"
         title="Sets the Time Conductor's time system."
-        :button-css-class="'c-icon-button'"
-      />
-      <ConductorHistory
-        v-if="!isIndependent"
-        class="c-conductor__history-select"
-        title="Select and apply previously entered time intervals."
-        :button-css-class="'c-icon-button'"
       />
     </div>
-    <ConductorInputsFixed
-      v-if="isFixed"
-      :input-bounds="bounds"
-      :object-path="objectPath"
-      @bounds-updated="saveFixedBounds"
-      @dismiss-inputs-fixed="dismiss"
-    />
-    <ConductorInputsRealtime
-      v-else
-      :input-bounds="bounds"
-      :object-path="objectPath"
-      @offsets-updated="saveClockOffsets"
-      @dismiss-inputs-realtime="dismiss"
-    />
+    <ConductorInputsFixed v-if="isFixedTimeMode" @dismiss-inputs-fixed="dismiss" />
+    <ConductorInputsRealtime v-else @dismiss-inputs-realtime="dismiss" />
   </div>
 </template>
 
 <script>
-import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import ConductorClock from './ConductorClock.vue';
-import ConductorHistory from './ConductorHistory.vue';
 import ConductorInputsFixed from './ConductorInputsFixed.vue';
 import ConductorInputsRealtime from './ConductorInputsRealtime.vue';
 import ConductorMode from './ConductorMode.vue';
@@ -79,17 +49,10 @@ export default {
     IndependentMode,
     IndependentClock,
     ConductorTimeSystem,
-    ConductorHistory,
     ConductorInputsFixed,
     ConductorInputsRealtime
   },
-  inject: {
-    openmct: 'openmct',
-    configuration: {
-      from: 'configuration',
-      default: undefined
-    }
-  },
+  inject: ['openmct', 'isFixedTimeMode'],
   props: {
     positionX: {
       type: Number,
@@ -99,57 +62,20 @@ export default {
       type: Number,
       required: true
     },
-    isFixed: {
-      type: Boolean,
-      required: true
-    },
     isIndependent: {
       type: Boolean,
       default() {
         return false;
       }
     },
-    timeOptions: {
-      type: Object,
-      default() {
-        return undefined;
-      }
-    },
     bottom: {
       type: Boolean,
       default() {
         return false;
       }
-    },
-    objectPath: {
-      type: Array,
-      default() {
-        return [];
-      }
     }
   },
-  emits: [
-    'popup-loaded',
-    'dismiss',
-    'independent-clock-updated',
-    'fixed-bounds-updated',
-    'clock-offsets-updated',
-    'clock-updated',
-    'mode-updated',
-    'independent-mode-updated'
-  ],
-  data() {
-    const bounds = this.openmct.time.getBounds();
-    const timeSystem = this.openmct.time.getTimeSystem();
-
-    return {
-      timeSystem,
-      bounds: {
-        start: bounds.start,
-        end: bounds.end
-      }
-    };
-  },
+  emits: ['popup-loaded', 'dismiss'],
   computed: {
     position() {
       const position = {
@@ -164,84 +90,16 @@ export default {
     },
     popupClasses() {
       const value = this.bottom ? 'c-tc-input-popup--bottom ' : '';
-      const mode = this.isFixed ? 'fixed-mode' : 'realtime-mode';
+      const mode = this.isFixedTimeMode ? 'fixed-mode' : 'realtime-mode';
       const independentClass = this.isIndependent ? 'itc-popout ' : '';
 
       return `${independentClass}${value}c-tc-input-popup--${mode}`;
-    },
-    timeOptionMode() {
-      return this.timeOptions?.mode;
-    },
-    timeOptionClock() {
-      return this.timeOptions?.clock;
-    }
-  },
-  watch: {
-    objectPath: {
-      handler(newPath, oldPath) {
-        //domain object or view has probably changed
-        if (newPath === oldPath) {
-          return;
-        }
-
-        this.setTimeContext();
-      },
-      deep: true
     }
   },
   mounted() {
     this.$emit('popup-loaded');
-    this.setTimeContext();
-  },
-  beforeUnmount() {
-    this.stopFollowingTimeContext();
   },
   methods: {
-    setTimeContext() {
-      if (this.timeContext) {
-        this.stopFollowingTimeContext();
-      }
-
-      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-
-      this.timeContext.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
-      this.timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, this.setBounds);
-
-      this.setViewFromClock(this.timeContext.getClock());
-      this.setBounds(this.timeContext.getBounds());
-    },
-    stopFollowingTimeContext() {
-      this.timeContext.off(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
-      this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.setBounds);
-    },
-    setViewFromClock() {
-      this.bounds = this.isFixed
-        ? this.timeContext.getBounds()
-        : this.openmct.time.getClockOffsets();
-    },
-    setBounds(bounds, isTick) {
-      if (this.isFixed || !isTick) {
-        this.bounds = bounds;
-      }
-    },
-    saveFixedBounds(bounds) {
-      this.$emit('fixed-bounds-updated', bounds);
-    },
-    saveClockOffsets(offsets) {
-      this.$emit('clock-offsets-updated', offsets);
-    },
-    saveClock(clockOptions) {
-      this.$emit('clock-updated', clockOptions);
-    },
-    saveMode(mode) {
-      this.$emit('mode-updated', mode);
-    },
-    saveIndependentMode(mode) {
-      this.$emit('independent-mode-updated', mode);
-    },
-    saveIndependentClock(clockKey) {
-      this.$emit('independent-clock-updated', clockKey);
-    },
     dismiss() {
       this.$emit('dismiss');
     }
diff --git a/src/plugins/timeConductor/ConductorTimeSystem.vue b/src/plugins/timeConductor/ConductorTimeSystem.vue
index 4023249fcb4..08225e90516 100644
--- a/src/plugins/timeConductor/ConductorTimeSystem.vue
+++ b/src/plugins/timeConductor/ConductorTimeSystem.vue
@@ -26,8 +26,7 @@
     class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
   >
     <button
-      class="c-button--menu c-time-system-button"
-      :class="[buttonCssClass]"
+      class="c-button--menu c-time-system-button c-icon-button"
       aria-label="Time Conductor Time System"
       @click.prevent.stop="showTimeSystemMenu"
     >
@@ -50,13 +49,6 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 export default {
   inject: ['openmct', 'configuration'],
   props: {
-    buttonCssClass: {
-      type: String,
-      required: false,
-      default() {
-        return '';
-      }
-    },
     readOnly: {
       type: Boolean,
       default() {
diff --git a/src/plugins/timeConductor/DatePicker.vue b/src/plugins/timeConductor/DatePicker.vue
index 7bf97c1ca4d..1aa47890d08 100644
--- a/src/plugins/timeConductor/DatePicker.vue
+++ b/src/plugins/timeConductor/DatePicker.vue
@@ -107,10 +107,6 @@ export default {
       type: String,
       default: undefined
     },
-    formatter: {
-      type: Object,
-      required: true
-    },
     bottom: {
       type: Boolean,
       default() {
diff --git a/src/plugins/timeConductor/DateTimePopupFixed.vue b/src/plugins/timeConductor/DateTimePopupFixed.vue
new file mode 100644
index 00000000000..387e8ed8020
--- /dev/null
+++ b/src/plugins/timeConductor/DateTimePopupFixed.vue
@@ -0,0 +1,368 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <form ref="fixedDeltaInput">
+    <div class="c-tc-input-popup__input-grid-utc">
+      <div class="pr-time-label pr-time-label-start-date"><em>Start</em> Date</div>
+      <div class="pr-time-label pr-time-label-start-time">Time</div>
+      <div class="pr-time-label pr-time-label-end-date"><em>End</em> Date</div>
+      <div class="pr-time-label pr-time-label-end-time">Time</div>
+
+      <div
+        class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-start-date"
+      >
+        <DatePicker
+          class="c-ctrl-wrapper--menus-right"
+          :default-date-time="formattedBounds.startDate"
+          @date-selected="startDateSelected"
+        />
+        <input
+          ref="startDate"
+          v-model="formattedBounds.startDate"
+          class="c-input--datetime"
+          type="text"
+          autocorrect="off"
+          spellcheck="false"
+          aria-label="Start date"
+          @input="validateInput('startDate')"
+          @change="reportValidity('startDate')"
+          @copy.prevent.stop="copyToClipboard('start')"
+          @paste.prevent.stop="pasteFromClipboard('start')"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input--time pr-time-input-start-time">
+        <input
+          ref="startTime"
+          v-model="formattedBounds.startTime"
+          class="c-input--datetime"
+          type="text"
+          autocorrect="off"
+          spellcheck="false"
+          aria-label="Start time"
+          @input="validateInput('startTime')"
+          @change="reportValidity('startTime')"
+          @copy.prevent.stop="copyToClipboard('start')"
+          @paste.prevent.stop="pasteFromClipboard('start')"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input__start-end-sep icon-arrows-right-left"></div>
+
+      <div
+        class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-end-date"
+      >
+        <DatePicker
+          class="c-ctrl-wrapper--menus-left"
+          :default-date-time="formattedBounds.endDate"
+          @date-selected="endDateSelected"
+        />
+        <input
+          ref="endDate"
+          v-model="formattedBounds.endDate"
+          class="c-input--datetime"
+          type="text"
+          autocorrect="off"
+          spellcheck="false"
+          aria-label="End date"
+          @input="validateInput('endDate')"
+          @change="reportValidity('endDate')"
+          @copy.prevent.stop="copyToClipboard('end')"
+          @paste.prevent.stop="pasteFromClipboard('end')"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input--time pr-time-input-end-time">
+        <input
+          ref="endTime"
+          v-model="formattedBounds.endTime"
+          class="c-input--datetime"
+          type="text"
+          autocorrect="off"
+          spellcheck="false"
+          aria-label="End time"
+          @input="validateInput('endTime')"
+          @change="reportValidity('endTime')"
+          @copy.prevent.stop="copyToClipboard('end')"
+          @paste.prevent.stop="pasteFromClipboard('end')"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input--buttons">
+        <button
+          class="c-button c-button--major icon-check"
+          :disabled="hasInputValidityError"
+          aria-label="Submit time bounds"
+          @click.prevent="submitForm(true)"
+        ></button>
+        <button
+          class="c-button icon-x"
+          aria-label="Discard changes and close time popup"
+          @click.prevent="hide"
+        ></button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script>
+import DatePicker from './DatePicker.vue';
+
+export default {
+  components: {
+    DatePicker
+  },
+  inject: [
+    'openmct',
+    'isTimeSystemUTCBased',
+    'timeContext',
+    'timeSystemFormatter',
+    'timeSystemDurationFormatter',
+    'bounds'
+  ],
+  emits: ['update', 'dismiss'],
+  data() {
+    return {
+      formattedBounds: {},
+      inputValidityMap: {
+        startDate: { valid: true },
+        startTime: { valid: true },
+        endDate: { valid: true },
+        endTime: { valid: true }
+      },
+      logicalValidityMap: {
+        limit: { valid: true },
+        bounds: { valid: true }
+      }
+    };
+  },
+  computed: {
+    hasInputValidityError() {
+      return Object.values(this.inputValidityMap).some((inputValidity) => !inputValidity.valid);
+    },
+    hasLogicalValidationErrors() {
+      return Object.values(this.logicalValidityMap).some(
+        (logicalValidity) => !logicalValidity.valid
+      );
+    },
+    isValid() {
+      return !this.hasInputValidityError && !this.hasLogicalValidationErrors;
+    }
+  },
+  watch: {
+    bounds: {
+      handler() {
+        this.setViewFromBounds();
+      }
+    }
+  },
+  mounted() {
+    this.setViewFromBounds();
+  },
+  beforeUnmount() {
+    this.clearAllValidation();
+  },
+  methods: {
+    async copyToClipboard(startOrEnd) {
+      if (startOrEnd !== 'start' && startOrEnd !== 'end') {
+        console.warn('Invalid startOrEnd value');
+        return;
+      }
+
+      const bound =
+        this.timeSystemFormatter.parse(this.formattedBounds[`${startOrEnd}Date`]) +
+        this.timeSystemDurationFormatter.parse(this.formattedBounds[`${startOrEnd}Time`]);
+      const timeStampString = this.timeSystemFormatter.format(bound);
+
+      try {
+        await navigator.clipboard.writeText(timeStampString);
+      } catch (err) {
+        this.openmct.notifications.error('Failed to copy timestamp to clipboard');
+        console.error(err);
+      }
+    },
+    async pasteFromClipboard(startOrEnd) {
+      if (startOrEnd !== 'start' && startOrEnd !== 'end') {
+        console.warn('Invalid startOrEnd value');
+        return;
+      }
+
+      let timeStampString;
+      try {
+        timeStampString = await navigator.clipboard.readText();
+      } catch (err) {
+        this.openmct.notifications.error('Failed to get timestamp from clipboard');
+        console.error(err);
+        return;
+      }
+
+      if (!this.timeSystemFormatter.validate(timeStampString)) {
+        this.openmct.notifications.warn(`"${timeStampString}" is not a valid timestamp format`);
+        return;
+      }
+
+      const bound = this.timeSystemFormatter.parse(timeStampString);
+      this.formattedBounds[`${startOrEnd}Date`] = this.timeSystemFormatter.formatDate(bound);
+      this.formattedBounds[`${startOrEnd}Time`] = this.timeSystemDurationFormatter.format(
+        Math.abs(bound)
+      );
+
+      this.validateInput([`${startOrEnd}Date`, `${startOrEnd}Time`]);
+      this.reportValidity([`${startOrEnd}Date`, `${startOrEnd}Time`]);
+    },
+    setViewFromBounds() {
+      this.formattedBounds = {
+        startDate: this.timeSystemFormatter.formatDate(this.bounds.start),
+        startTime: this.timeSystemDurationFormatter.format(Math.abs(this.bounds.start)),
+        endDate: this.timeSystemFormatter.formatDate(this.bounds.end),
+        endTime: this.timeSystemDurationFormatter.format(Math.abs(this.bounds.end))
+      };
+    },
+    setBoundsFromView(shouldDismiss) {
+      if (this.$refs.fixedDeltaInput.checkValidity()) {
+        const start =
+          this.timeSystemFormatter.parse(this.formattedBounds.startDate) +
+          this.timeSystemDurationFormatter.parse(this.formattedBounds.startTime);
+        const end =
+          this.timeSystemFormatter.parse(this.formattedBounds.endDate) +
+          this.timeSystemDurationFormatter.parse(this.formattedBounds.endTime);
+
+        const bounds = { start, end };
+        this.timeContext.setBounds(bounds);
+      }
+
+      if (shouldDismiss) {
+        this.$emit('dismiss');
+
+        return false;
+      }
+    },
+    clearAllValidation() {
+      Object.keys(this.inputValidityMap).forEach(this.clearValidation);
+    },
+    clearValidation(refName) {
+      const input = this.getInput(refName);
+
+      input.setCustomValidity('');
+      input.title = '';
+    },
+    submitForm(shouldDismiss) {
+      this.validateLimit();
+      this.reportValidity('limit');
+      this.validateBounds();
+      this.reportValidity('bounds');
+
+      if (this.isValid) {
+        this.setBoundsFromView(shouldDismiss);
+      }
+    },
+    validateInput(refNames) {
+      if (!Array.isArray(refNames)) {
+        refNames = [refNames];
+      }
+
+      this.clearAllValidation();
+
+      refNames.forEach((refName) => {
+        const inputType = refName.includes('Date') ? 'Date' : 'Time';
+        const formatter =
+          inputType === 'Date' ? this.timeSystemFormatter : this.timeSystemDurationFormatter;
+        const validationResult = formatter.validate(this.formattedBounds[refName])
+          ? { valid: true }
+          : { valid: false, message: `Invalid ${inputType}` };
+
+        this.inputValidityMap[refName] = validationResult;
+      });
+    },
+    validateBounds() {
+      const start =
+        this.timeSystemFormatter.parse(this.formattedBounds.startDate) +
+        this.timeSystemDurationFormatter.parse(this.formattedBounds.startTime);
+      const end =
+        this.timeSystemFormatter.parse(this.formattedBounds.endDate) +
+        this.timeSystemDurationFormatter.parse(this.formattedBounds.endTime);
+
+      const bounds = { start, end };
+
+      this.logicalValidityMap.bounds = this.openmct.time.validateBounds(bounds);
+    },
+    validateLimit(bounds) {
+      const limit = this.configuration?.menuOptions
+        ?.filter((option) => option.timeSystem === this.timeSystemKey)
+        ?.find((option) => option.limit)?.limit;
+
+      if (this.isUTCBased && limit && bounds.end - bounds.start > limit) {
+        this.logicalValidityMap.limit = {
+          valid: false,
+          message: 'Start and end difference exceeds allowable limit'
+        };
+      } else {
+        this.logicalValidityMap.limit = { valid: true };
+      }
+    },
+    reportValidity(refNames) {
+      if (!Array.isArray(refNames)) {
+        refNames = [refNames];
+      }
+
+      refNames.forEach((refName) => {
+        const input = this.getInput(refName);
+        const validationResult = this.inputValidityMap[refName] ?? this.logicalValidityMap[refName];
+
+        if (validationResult.valid !== true) {
+          input.setCustomValidity(validationResult.message);
+          input.title = validationResult.message;
+          this.hasLogicalValidationErrors = true;
+        } else {
+          input.setCustomValidity('');
+          input.title = '';
+        }
+      });
+
+      this.$refs.fixedDeltaInput.reportValidity();
+    },
+    getInput(refName) {
+      if (Object.keys(this.inputValidityMap).includes(refName)) {
+        return this.$refs[refName];
+      }
+
+      return this.$refs.startDate;
+    },
+    startDateSelected(date) {
+      this.formattedBounds.startDate = this.timeSystemFormatter.formatDate(date);
+      this.validateInput('startDate');
+      this.reportValidity('startDate');
+    },
+    endDateSelected(date) {
+      this.formattedBounds.endDate = this.timeSystemFormatter.formatDate(date);
+      this.validateInput('endDate');
+      this.reportValidity('endDate');
+    },
+    hide($event) {
+      if ($event.target.className.indexOf('c-button icon-x') > -1) {
+        this.$emit('dismiss');
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/TimePopupFixed.vue
index 652df767e38..4884bfea4ee 100644
--- a/src/plugins/timeConductor/TimePopupFixed.vue
+++ b/src/plugins/timeConductor/TimePopupFixed.vue
@@ -1,84 +1,70 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
 <template>
   <form ref="fixedDeltaInput">
     <div class="c-tc-input-popup__input-grid">
-      <div class="pr-time-label pr-time-label-start-date"><em>Start</em> Date</div>
-      <div class="pr-time-label pr-time-label-start-time">Time</div>
-      <div class="pr-time-label pr-time-label-end-date"><em>End</em> Date</div>
-      <div class="pr-time-label pr-time-label-end-time">Time</div>
+      <div class="pr-time-label pr-time-label-start-time">Start</div>
+      <div class="pr-time-label pr-time-label-end-time">End</div>
 
-      <div
-        class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-start-date"
-      >
+      <div class="pr-time-input pr-time-input-start">
         <input
-          ref="startDate"
-          v-model="formattedBounds.startDate"
+          ref="start"
+          v-model="formattedBounds.start"
           class="c-input--datetime"
           type="text"
           autocorrect="off"
           spellcheck="false"
-          aria-label="Start date"
-          @input="validateInput('startDate')"
-          @change="reportValidity('startDate')"
+          aria-label="Start time"
+          @input="validateInput('start')"
+          @change="reportValidity('start')"
         />
         <DatePicker
-          v-if="isUTCBased"
-          class="c-ctrl-wrapper--menus-right"
-          :default-date-time="formattedBounds.startDate"
-          :formatter="timeFormatter"
-          @date-selected="startDateSelected"
-        />
-      </div>
-
-      <div class="pr-time-input pr-time-input--time pr-time-input-start-time">
-        <input
-          ref="startTime"
-          v-model="formattedBounds.startTime"
-          class="c-input--datetime"
-          type="text"
-          autocorrect="off"
-          spellcheck="false"
-          aria-label="Start time"
-          @input="validateInput('startTime')"
-          @change="reportValidity('startTime')"
+          v-if="isTimeSystemUTCBased"
+          class="c-ctrl-wrapper--menus-left"
+          :default-date-time="formattedBounds.start"
+          @date-selected="dateSelected($event, 'start')"
         />
       </div>
 
       <div class="pr-time-input pr-time-input__start-end-sep icon-arrows-right-left"></div>
 
-      <div
-        class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-end-date"
-      >
+      <div class="pr-time-input pr-time-input-end">
         <input
-          ref="endDate"
-          v-model="formattedBounds.endDate"
+          ref="end"
+          v-model="formattedBounds.end"
           class="c-input--datetime"
           type="text"
           autocorrect="off"
           spellcheck="false"
-          aria-label="End date"
-          @input="validateInput('endDate')"
-          @change="reportValidity('endDate')"
+          aria-label="End time"
+          @input="validateInput('end')"
+          @change="reportValidity('end')"
         />
         <DatePicker
-          v-if="isUTCBased"
+          v-if="isTimeSystemUTCBased"
           class="c-ctrl-wrapper--menus-left"
-          :default-date-time="formattedBounds.endDate"
-          :formatter="timeFormatter"
-          @date-selected="endDateSelected"
-        />
-      </div>
-
-      <div class="pr-time-input pr-time-input--time pr-time-input-end-time">
-        <input
-          ref="endTime"
-          v-model="formattedBounds.endTime"
-          class="c-input--datetime"
-          type="text"
-          autocorrect="off"
-          spellcheck="false"
-          aria-label="End time"
-          @input="validateInput('endTime')"
-          @change="reportValidity('endTime')"
+          :default-date-time="formattedBounds.end"
+          @date-selected="dateSelected($event, 'end')"
         />
       </div>
 
@@ -87,7 +73,7 @@
           class="c-button c-button--major icon-check"
           :disabled="hasInputValidityError"
           aria-label="Submit time bounds"
-          @click.prevent="handleFormSubmission(true)"
+          @click.prevent="submitForm(true)"
         ></button>
         <button
           class="c-button icon-x"
@@ -100,52 +86,27 @@
 </template>
 
 <script>
-import _ from 'lodash';
-
 import DatePicker from './DatePicker.vue';
 
-const DEFAULT_DURATION_FORMATTER = 'duration';
-
 export default {
   components: {
     DatePicker
   },
-  inject: ['openmct'],
-  props: {
-    inputBounds: {
-      type: Object,
-      required: true
-    },
-    inputTimeSystem: {
-      type: Object,
-      required: true
-    }
-  },
+  inject: [
+    'openmct',
+    'isTimeSystemUTCBased',
+    'timeContext',
+    'timeSystemFormatter',
+    'timeSystemDurationFormatter',
+    'bounds'
+  ],
   emits: ['update', 'dismiss'],
   data() {
-    const timeSystem = this.openmct.time.getTimeSystem();
-    const bounds = this.openmct.time.getBounds();
-
     return {
-      timeFormatter: this.getFormatter(timeSystem.timeFormat),
-      durationFormatter: this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER),
-      timeSystemKey: timeSystem.key,
-      bounds: {
-        start: bounds.start,
-        end: bounds.end
-      },
-      formattedBounds: {
-        start: '',
-        end: '',
-        startTime: '',
-        endTime: ''
-      },
-      isUTCBased: timeSystem.isUTCBased,
+      formattedBounds: {},
       inputValidityMap: {
-        startDate: { valid: true },
-        startTime: { valid: true },
-        endDate: { valid: true },
-        endTime: { valid: true }
+        start: { valid: true },
+        end: { valid: true }
       },
       logicalValidityMap: {
         limit: { valid: true },
@@ -155,79 +116,50 @@ export default {
   },
   computed: {
     hasInputValidityError() {
-      return Object.values(this.inputValidityMap).some((isValid) => !isValid.valid);
+      return Object.values(this.inputValidityMap).some((validity) => !validity.valid);
     },
     hasLogicalValidationErrors() {
-      return Object.values(this.logicalValidityMap).some((isValid) => !isValid.valid);
+      return Object.values(this.logicalValidityMap).some((validity) => !validity.valid);
     },
     isValid() {
       return !this.hasInputValidityError && !this.hasLogicalValidationErrors;
     }
   },
   watch: {
-    inputBounds: {
-      handler(newBounds) {
-        this.handleNewBounds(newBounds);
-      },
-      deep: true
-    },
-    inputTimeSystem: {
-      handler(newTimeSystem) {
-        this.setTimeSystem(newTimeSystem);
-      },
-      deep: true
+    bounds: {
+      handler() {
+        this.setViewFromBounds();
+      }
     }
   },
-  created() {
-    this.handleNewBounds = _.throttle(this.handleNewBounds, 300);
-  },
   mounted() {
-    this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem())));
-    this.setViewFromBounds(this.bounds);
+    this.setViewFromBounds();
   },
   beforeUnmount() {
     this.clearAllValidation();
   },
   methods: {
-    handleNewBounds(bounds) {
-      this.setBounds(bounds);
-      this.setViewFromBounds(bounds);
-    },
-    setBounds(bounds) {
-      this.bounds = bounds;
-    },
-    setViewFromBounds(bounds) {
-      this.formattedBounds.startDate = this.timeFormatter.format(bounds.start).split(' ')[0];
-      this.formattedBounds.endDate = this.timeFormatter.format(bounds.end).split(' ')[0];
-      this.formattedBounds.startTime = this.durationFormatter.format(Math.abs(bounds.start));
-      this.formattedBounds.endTime = this.durationFormatter.format(Math.abs(bounds.end));
-    },
-    setTimeSystem(timeSystem) {
-      this.timeSystemKey = timeSystem.key;
-      this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
-      this.durationFormatter = this.getFormatter(
-        timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
-      );
-      this.isUTCBased = timeSystem.isUTCBased;
-    },
-    getFormatter(key) {
-      return this.openmct.telemetry.getValueFormatter({
-        format: key
-      }).formatter;
+    setViewFromBounds() {
+      const start = this.timeSystemFormatter.format(this.bounds.start);
+      const end = this.timeSystemFormatter.format(this.bounds.end);
+
+      this.formattedBounds = {
+        start,
+        end
+      };
     },
-    setBoundsFromView(dismiss) {
+    setBoundsFromView(shouldDismiss) {
       if (this.$refs.fixedDeltaInput.checkValidity()) {
-        let start = this.timeFormatter.parse(
-          `${this.formattedBounds.startDate} ${this.formattedBounds.startTime}`
-        );
-        let end = this.timeFormatter.parse(
-          `${this.formattedBounds.endDate} ${this.formattedBounds.endTime}`
-        );
+        const start = this.timeSystemFormatter.parse(this.formattedBounds.start);
+        const end = this.timeSystemFormatter.parse(this.formattedBounds.end);
 
-        this.$emit('update', { start, end });
+        this.timeContext.setBounds({
+          start,
+          end
+        });
       }
 
-      if (dismiss) {
+      if (shouldDismiss) {
         this.$emit('dismiss');
         return false;
       }
@@ -241,7 +173,7 @@ export default {
       input.setCustomValidity('');
       input.title = '';
     },
-    handleFormSubmission(shouldDismiss) {
+    submitForm(shouldDismiss) {
       this.validateLimit();
       this.reportValidity('limit');
       this.validateBounds();
@@ -253,23 +185,16 @@ export default {
     },
     validateInput(refName) {
       this.clearAllValidation();
-
-      const inputType = refName.includes('Date') ? 'Date' : 'Time';
-      const formatter = inputType === 'Date' ? this.timeFormatter : this.durationFormatter;
-      const validationResult = formatter.validate(this.formattedBounds[refName])
+      const validationResult = this.timeSystemFormatter.validate(this.formattedBounds[refName])
         ? { valid: true }
-        : { valid: false, message: `Invalid ${inputType}` };
+        : { valid: false, message: 'Invalid Date' };
 
       this.inputValidityMap[refName] = validationResult;
     },
     validateBounds() {
       const bounds = {
-        start: this.timeFormatter.parse(
-          `${this.formattedBounds.startDate} ${this.formattedBounds.startTime}`
-        ),
-        end: this.timeFormatter.parse(
-          `${this.formattedBounds.endDate} ${this.formattedBounds.endTime}`
-        )
+        start: this.timeSystemFormatter.parse(this.formattedBounds.start),
+        end: this.timeSystemFormatter.parse(this.formattedBounds.end)
       };
 
       this.logicalValidityMap.bounds = this.openmct.time.validateBounds(bounds);
@@ -308,17 +233,12 @@ export default {
         return this.$refs[refName];
       }
 
-      return this.$refs.startDate;
-    },
-    startDateSelected(date) {
-      this.formattedBounds.startDate = this.timeFormatter.format(date).split(' ')[0];
-      this.validateInput('startDate');
-      this.reportValidity('startDate');
+      return this.$refs.start;
     },
-    endDateSelected(date) {
-      this.formattedBounds.endDate = this.timeFormatter.format(date).split(' ')[0];
-      this.validateInput('endDate');
-      this.reportValidity('endDate');
+    dateSelected(date, refName) {
+      this.formattedBounds[refName] = this.timeSystemFormatter.format(date);
+      this.validateInput(refName);
+      this.reportValidity(refName);
     },
     hide($event) {
       if ($event.target.className.indexOf('c-button icon-x') > -1) {
diff --git a/src/plugins/timeConductor/TimePopupRealtime.vue b/src/plugins/timeConductor/TimePopupRealtime.vue
index 326f21bd72e..979c91a4f40 100644
--- a/src/plugins/timeConductor/TimePopupRealtime.vue
+++ b/src/plugins/timeConductor/TimePopupRealtime.vue
@@ -1,6 +1,28 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
 <template>
   <form ref="deltaInput">
-    <div class="c-tc-input-popup__input-grid">
+    <div class="c-tc-input-popup__input-grid-utc">
       <div class="pr-time-label icon-minus pr-time-label-minus-hrs">Hrs</div>
       <div class="pr-time-label pr-time-label-minus-mins">Mins</div>
       <div class="pr-time-label pr-time-label-minus-secs">Secs</div>
@@ -142,14 +164,17 @@
 </template>
 
 <script>
+import { nextTick } from 'vue';
+
 export default {
+  inject: ['timeContext', 'timeSystemDurationFormatter'],
   props: {
     offsets: {
       type: Object,
       required: true
     }
   },
-  emits: ['update', 'dismiss'],
+  emits: ['dismiss'],
   data() {
     return {
       startInputHrs: '00',
@@ -164,6 +189,7 @@ export default {
   watch: {
     offsets: {
       handler() {
+        console.log('REMOVE THIS');
         this.setOffsets();
       },
       deep: true
@@ -206,18 +232,23 @@ export default {
       this.isDisabled = disabled;
     },
     submit() {
-      this.$emit('update', {
-        start: {
-          hours: this.startInputHrs,
-          minutes: this.startInputMins,
-          seconds: this.startInputSecs
-        },
-        end: {
-          hours: this.endInputHrs,
-          minutes: this.endInputMins,
-          seconds: this.endInputSecs
-        }
-      });
+      const formattedStartOffset = [
+        this.startInputHrs,
+        this.startInputMins,
+        this.startInputSecs
+      ].join(':');
+      const formattedEndOffset = [this.endInputHrs, this.endInputMins, this.endInputSecs].join(':');
+
+      let startOffset = 0 - this.timeSystemDurationFormatter.parse(formattedStartOffset);
+      let endOffset = this.timeSystemDurationFormatter.parse(formattedEndOffset);
+
+      const offsets = {
+        start: startOffset,
+        end: endOffset
+      };
+
+      this.timeContext.setClockOffsets(offsets);
+
       this.$emit('dismiss');
     },
     hide($event) {
@@ -234,13 +265,13 @@ export default {
       this[ref] = cv.toString().padStart(2, '0');
       this.validate();
     },
-    setOffsets() {
+    async setOffsets() {
       [this.startInputHrs, this.startInputMins, this.startInputSecs] =
         this.offsets.start.split(':');
       [this.endInputHrs, this.endInputMins, this.endInputSecs] = this.offsets.end.split(':');
-      this.$nextTick(() => {
-        this.numberSelect('startInputHrs');
-      });
+
+      await nextTick();
+      this.numberSelect('startInputHrs');
     },
     numberSelect(input) {
       if (this.$refs[input] === undefined || this.$refs[input] === null) {
diff --git a/src/plugins/timeConductor/clock-mixin.js b/src/plugins/timeConductor/clock-mixin.js
index 32da96c7adc..37ba0259548 100644
--- a/src/plugins/timeConductor/clock-mixin.js
+++ b/src/plugins/timeConductor/clock-mixin.js
@@ -1,13 +1,4 @@
 export default {
-  props: {
-    buttonCssClass: {
-      type: String,
-      required: false,
-      default() {
-        return '';
-      }
-    }
-  },
   methods: {
     loadClocks(menuOptions) {
       let clocks;
diff --git a/src/plugins/timeConductor/conductor.scss b/src/plugins/timeConductor/conductor.scss
index f914cfdf7a1..f05ee3dada1 100644
--- a/src/plugins/timeConductor/conductor.scss
+++ b/src/plugins/timeConductor/conductor.scss
@@ -629,7 +629,6 @@
         }
         &-label-end-time{
             grid-area: eTime;
-
         }
         &-input-end-date{
             grid-area: eDateInput;
@@ -641,6 +640,14 @@
             grid-area: blank;
         }
 
+        // FIXED TIME MODE non utc
+        &-input-start{
+            grid-area: sInput;
+        }
+        &-input-end{
+            grid-area: eInput;
+        }
+
         //REAL TIME MODE
         &-label-minus-hrs{
             grid-area: labelMinusHrs;
@@ -691,14 +698,20 @@
     }
 
     &--fixed-mode {
-        .c-tc-input-popup__input-grid {
+        .c-tc-input-popup__input-grid-utc {
             grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr;
             grid-template-areas: 
                "sDate sTime . eDate eTime ."
                "sDateInput sTimeInput arrowIcon eDateInput eTimeInput buttons";
         }
+        .c-tc-input-popup__input-grid {
+            grid-template-columns: 1fr 1fr 1fr 2fr;
+            grid-template-areas: 
+               "sTime . eTime ."
+               "sInput arrowIcon eInput buttons";
+        }
         @include phonePortrait(){ 
-            .c-tc-input-popup__input-grid {
+            .c-tc-input-popup__input-grid-utc {
                 grid-template-columns: repeat(2, max-content) 1fr;
                 grid-template-areas:
                     "sDate sTime ."
@@ -708,19 +721,29 @@
                 padding: 2px; 
                 overflow: hidden;
             }
+            .c-tc-input-popup__input-grid {
+              grid-template-columns: repeat(2, max-content) 1fr;
+              grid-template-areas:
+                  "sTime ."
+                  "sInput ."
+                  "eTime ."
+                  "eInput buttons";
+              padding: 2px; 
+              overflow: hidden;
+          }
         }
 
     }
 
     &--realtime-mode {
-        .c-tc-input-popup__input-grid {
+        .c-tc-input-popup__input-grid, .c-tc-input-popup__input-grid-utc {
             grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
             grid-template-areas:
                 "labelMinusHrs labelMinusMins labelMinusSecs . labelPlusHrs labelPlusMins labelPlusSecs ."
                 "inputMinusHrs inputMinusMins inputMinusSecs arrowIcon inputPlusHrs inputPlusMins inputPlusSecs buttons";
         }
         @include phonePortrait(){ 
-            .c-tc-input-popup__input-grid {
+            .c-tc-input-popup__input-grid, .c-tc-input-popup__input-grid-utc {
                 grid-template-columns: repeat(3, max-content) 1fr;
                 grid-template-areas:
                     "labelMinusHrs labelMinusMins labelMinusSecs ."
@@ -733,7 +756,7 @@
         }
     }
 
-    &__input-grid {
+    &__input-grid, &__input-grid-utc {
         display: grid;
         grid-row-gap: $interiorMargin;
         grid-column-gap: $interiorMarginSm;
diff --git a/src/plugins/timeConductor/independent/IndependentClock.vue b/src/plugins/timeConductor/independent/IndependentClock.vue
index 79e532c84d4..d940781c9fb 100644
--- a/src/plugins/timeConductor/independent/IndependentClock.vue
+++ b/src/plugins/timeConductor/independent/IndependentClock.vue
@@ -25,7 +25,7 @@
       <button
         v-if="selectedClock"
         class="c-icon-button c-button--menu js-clock-button"
-        :class="[buttonCssClass, selectedClock.cssClass]"
+        :class="selectedClock.cssClass"
         aria-label="Independent Time Conductor Clock Menu"
         @click.prevent.stop="showClocksMenu"
       >
@@ -36,20 +36,9 @@
 </template>
 
 <script>
-import { TIME_CONTEXT_EVENTS } from '../../../api/time/constants.js';
-import toggleMixin from '../../../ui/mixins/toggle-mixin.js';
-import clockMixin from '../clock-mixin.js';
-
 export default {
-  mixins: [toggleMixin, clockMixin],
-  inject: ['openmct'],
+  inject: ['openmct', 'clock', 'getAllClockMetadata', 'getClockMetadata'],
   props: {
-    clock: {
-      type: String,
-      default() {
-        return undefined;
-      }
-    },
     enabled: {
       type: Boolean,
       default() {
@@ -57,33 +46,20 @@ export default {
       }
     }
   },
-  emits: ['independent-clock-updated'],
-  data() {
-    const activeClock = this.getActiveClock();
-
-    return {
-      selectedClock: activeClock ? this.getClockMetadata(activeClock) : undefined,
-      clocks: []
-    };
+  computed: {
+    selectedClock() {
+      return this.getClockMetadata(this.clock);
+    }
   },
   watch: {
-    clock(newClock, oldClock) {
-      this.setViewFromClock(newClock);
-    },
     enabled(newValue, oldValue) {
       if (newValue !== undefined && newValue !== oldValue && newValue === true) {
         this.setViewFromClock(this.clock);
       }
     }
   },
-  beforeUnmount() {
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
-  },
-  mounted: function () {
-    this.loadClocks();
-    this.setViewFromClock(this.clock);
-
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
+  mounted() {
+    this.clocks = this.getAllClockMetadata();
   },
   methods: {
     showClocksMenu() {
@@ -95,27 +71,11 @@ export default {
         menuClass: 'c-conductor__clock-menu c-super-menu--sm',
         placement: this.openmct.menus.menuPlacement.BOTTOM_RIGHT
       };
-      this.openmct.menus.showSuperMenu(x, y, this.clocks, menuOptions);
-    },
-    getMenuOptions() {
-      let currentGlobalClock = this.getActiveClock();
 
-      //Create copy of active clock so the time API does not get reactified.
-      currentGlobalClock = Object.assign(
-        {},
-        {
-          name: currentGlobalClock.name,
-          clock: currentGlobalClock.key,
-          timeSystem: this.openmct.time.getTimeSystem().key
-        }
-      );
-
-      return [currentGlobalClock];
+      this.openmct.menus.showSuperMenu(x, y, this.clocks, menuOptions);
     },
     setClock(clockKey) {
       this.setViewFromClock(clockKey);
-
-      this.$emit('independent-clock-updated', clockKey);
     },
     setViewFromClock(clockOrKey) {
       let clock = clockOrKey;
diff --git a/src/plugins/timeConductor/independent/IndependentMode.vue b/src/plugins/timeConductor/independent/IndependentMode.vue
index fe599a12e24..c951c77cb30 100644
--- a/src/plugins/timeConductor/independent/IndependentMode.vue
+++ b/src/plugins/timeConductor/independent/IndependentMode.vue
@@ -23,8 +23,8 @@
   <div ref="modeMenuButton" class="c-ctrl-wrapper c-ctrl-wrapper--menus-up">
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
-        class="c-icon-button c-button--menu js-mode-button"
-        :class="[buttonCssClass, selectedMode.cssClass]"
+        class="c-button--menu js-mode-button c-icon-button"
+        :class="selectedMode.cssClass"
         aria-label="Independent Time Conductor Mode Menu"
         @click.prevent.stop="showModesMenu"
       >
@@ -35,19 +35,9 @@
 </template>
 
 <script>
-import toggleMixin from '../../../ui/mixins/toggle-mixin.js';
-import modeMixin from '../mode-mixin.js';
-
 export default {
-  mixins: [toggleMixin, modeMixin],
-  inject: ['openmct'],
+  inject: ['openmct', 'timeMode', 'getAllModeMetadata', 'getModeMetadata'],
   props: {
-    mode: {
-      type: String,
-      default() {
-        return undefined;
-      }
-    },
     enabled: {
       type: Boolean,
       default() {
@@ -55,27 +45,25 @@ export default {
       }
     }
   },
-  emits: ['independent-mode-updated'],
-  data: function () {
+  data() {
     return {
-      selectedMode: this.getModeMetadata(this.mode),
-      modes: []
+      selectedMode: this.getModeMetadata(this.timeMode)
     };
   },
   watch: {
-    mode: {
-      handler(newMode) {
-        this.setViewFromMode(newMode);
+    timeMode: {
+      handler() {
+        this.setView();
       }
     },
     enabled(newValue, oldValue) {
       if (newValue !== undefined && newValue !== oldValue && newValue === true) {
-        this.setViewFromMode(this.mode);
+        this.setView();
       }
     }
   },
   mounted: function () {
-    this.loadModes();
+    this.modes = this.getAllModeMetadata();
   },
   methods: {
     showModesMenu() {
@@ -89,13 +77,8 @@ export default {
       };
       this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
     },
-    setViewFromMode(mode) {
-      this.selectedMode = this.getModeMetadata(mode);
-    },
-    setMode(mode) {
-      this.setViewFromMode(mode);
-
-      this.$emit('independent-mode-updated', mode);
+    setView() {
+      this.selectedMode = this.getModeMetadata(this.timeMode);
     }
   }
 };
diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
index 2ff26ee74ef..38720ce1df8 100644
--- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@@ -24,7 +24,11 @@
     ref="timeConductorOptionsHolder"
     class="c-compact-tc"
     :class="[
-      isFixed ? 'is-fixed-mode' : independentTCEnabled ? 'is-realtime-mode' : 'is-fixed-mode',
+      isFixedTimeMode
+        ? 'is-fixed-mode'
+        : independentTCEnabled
+          ? 'is-realtime-mode'
+          : 'is-fixed-mode',
       { 'is-expanded': independentTCEnabled }
     ]"
     aria-label="Independent Time Conductor Panel"
@@ -42,7 +46,6 @@
     <ConductorInputsFixed
       v-if="showFixedInputs"
       class="c-compact-tc__bounds--fixed"
-      :object-path="objectPath"
       :read-only="true"
       :compact="true"
     />
@@ -50,45 +53,38 @@
     <ConductorInputsRealtime
       v-if="showRealtimeInputs"
       class="c-compact-tc__bounds--real-time"
-      :object-path="objectPath"
       :read-only="true"
       :compact="true"
     />
-    <div
-      v-if="independentTCEnabled"
-      role="button"
-      class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"
-      aria-label="Independent Time Conductor Settings"
-    ></div>
 
     <ConductorPopUp
       v-if="showConductorPopup"
       ref="conductorPopup"
-      :object-path="objectPath"
       :is-independent="true"
-      :time-options="timeOptions"
-      :is-fixed="isFixed"
       :bottom="true"
       :position-x="positionX"
       :position-y="positionY"
       @popup-loaded="initializePopup"
-      @independent-mode-updated="saveMode"
-      @independent-clock-updated="saveClock"
-      @fixed-bounds-updated="saveFixedBounds"
-      @clock-offsets-updated="saveClockOffsets"
       @dismiss="clearPopup"
     />
   </div>
 </template>
 
 <script>
+import { inject, provide, toRaw } from 'vue';
+
 import ConductorModeIcon from '@/plugins/timeConductor/ConductorModeIcon.vue';
 
-import { FIXED_MODE_KEY, TIME_CONTEXT_EVENTS } from '../../../api/time/constants.js';
 import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
 import ConductorInputsFixed from '../ConductorInputsFixed.vue';
 import ConductorInputsRealtime from '../ConductorInputsRealtime.vue';
 import ConductorPopUp from '../ConductorPopUp.vue';
+import { useClock } from '../useClock.js';
+import { useClockOffsets } from '../useClockOffsets.js';
+import { useTimeBounds } from '../useTimeBounds.js';
+import { useTimeContext } from '../useTimeContext.js';
+import { useTimeMode } from '../useTimeMode.js';
+import { useTimeSystem } from '../useTimeSystem.js';
 import independentTimeConductorPopUpManager from './independentTimeConductorPopUpManager.js';
 
 export default {
@@ -100,13 +96,7 @@ export default {
     ToggleSwitch
   },
   mixins: [independentTimeConductorPopUpManager],
-  inject: {
-    openmct: 'openmct',
-    configuration: {
-      from: 'configuration',
-      default: undefined
-    }
-  },
+  inject: ['openmct'],
   props: {
     domainObject: {
       type: Object,
@@ -117,111 +107,149 @@ export default {
       required: true
     }
   },
-  emits: ['updated'],
-  data() {
-    const fixedOffsets = this.openmct.time.getBounds();
-    const clockOffsets = this.openmct.time.getClockOffsets();
-    const clock = this.openmct.time.getClock().key;
-    const mode = this.openmct.time.getMode();
-    const timeOptions = this.domainObject.configuration.timeOptions ?? {
-      clockOffsets,
-      fixedOffsets
-    };
-
-    timeOptions.clock = timeOptions.clock ?? clock;
-    timeOptions.mode = timeOptions.mode ?? mode;
+  setup(props) {
+    const openmct = inject('openmct');
+    const { timeContext } = useTimeContext(openmct, () => props.objectPath);
 
-    // check for older configurations that stored a key
-    if (timeOptions.mode.key) {
-      timeOptions.mode = timeOptions.mode.key;
-    }
+    const { timeSystemFormatter, timeSystemDurationFormatter, isTimeSystemUTCBased } =
+      useTimeSystem(openmct, timeContext);
+    const { timeMode, isFixedTimeMode, isRealTimeMode, getAllModeMetadata, getModeMetadata } =
+      useTimeMode(openmct, timeContext);
+    const { bounds, isTick } = useTimeBounds(openmct, timeContext);
+    const { clock, getAllClockMetadata, getClockMetadata } = useClock(openmct, timeContext);
+    const { offsets } = useClockOffsets(openmct, timeContext);
 
-    const isFixed = timeOptions.mode === FIXED_MODE_KEY;
+    provide('timeContext', timeContext);
+    provide('timeSystemFormatter', timeSystemFormatter);
+    provide('timeSystemDurationFormatter', timeSystemDurationFormatter);
+    provide('isTimeSystemUTCBased', isTimeSystemUTCBased);
+    provide('timeMode', timeMode);
+    provide('isFixedTimeMode', isFixedTimeMode);
+    provide('isRealTimeMode', isRealTimeMode);
+    provide('getAllModeMetadata', getAllModeMetadata);
+    provide('getModeMetadata', getModeMetadata);
+    provide('bounds', bounds);
+    provide('isTick', isTick);
+    provide('offsets', offsets);
+    provide('clock', clock);
+    provide('getAllClockMetadata', getAllClockMetadata);
+    provide('getClockMetadata', getClockMetadata);
 
     return {
-      timeOptions,
-      isFixed,
-      independentTCEnabled: this.domainObject.configuration.useIndependentTime === true,
-      viewBounds: {
-        start: fixedOffsets.start,
-        end: fixedOffsets.end
-      }
+      timeContext,
+      timeMode,
+      clock,
+      timeSystemFormatter,
+      isFixedTimeMode,
+      isRealTimeMode,
+      bounds,
+      isTick,
+      offsets
+    };
+  },
+  data() {
+    return {
+      keyString: this.openmct.objects.makeKeyString(this.domainObject.identifier),
+      independentTCEnabled: this.domainObject.configuration.useIndependentTime === true
     };
   },
   computed: {
+    myKeyString() {
+      const identifier = this.domainObject.identifier;
+      return this.openmct.objects.makeKeyString(identifier);
+    },
+    do() {
+      console.log(this.objectPath[0]);
+      return this.objectPath[0];
+    },
+    // itcEnabled() {
+    //   console.log(`itcEnabled: ${this.domainObject.configuration.useIndependentTime === true}`);
+    //   return this.domainObject.configuration.useIndependentTime === true;
+    // },
+    configuration() {
+      console.log('why does this not fire when watch domainObject fires?');
+      return this.domainObject.configuration && {};
+    },
     toggleTitle() {
       return `${this.independentTCEnabled ? 'Disable' : 'Enable'} Independent Time Conductor`;
     },
     showFixedInputs() {
-      return this.isFixed && this.independentTCEnabled;
+      return this.isFixedTimeMode && this.independentTCEnabled;
     },
     showRealtimeInputs() {
-      return !this.isFixed && this.independentTCEnabled;
+      return this.isRealTimeMode && this.independentTCEnabled;
     }
   },
   watch: {
-    domainObject: {
-      handler(domainObject) {
-        const key = this.openmct.objects.makeKeyString(domainObject.identifier);
-        if (key !== this.keyString) {
-          //domain object has changed
-          this.destroyIndependentTime();
-
-          this.independentTCEnabled = domainObject.configuration.useIndependentTime === true;
-          this.timeOptions = domainObject.configuration.timeOptions ?? {
-            clockOffsets: this.openmct.time.getClockOffsets(),
-            fixedOffsets: this.openmct.time.getBounds()
-          };
+    myKeyString() {
+      console.log(`object changed`);
+    },
+    independentTCEnabled() {
+      this.handleIndependentTimeConductorChange();
+    },
+    timeContext() {
+      const keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
 
-          // these may not be set due to older configurations
-          this.timeOptions.clock = this.timeOptions.clock ?? this.openmct.time.getClock().key;
-          this.timeOptions.mode = this.timeOptions.mode ?? this.openmct.time.getMode();
+      if (keyString !== this.keyString) {
+        //domain object in object view has changed (via tree navigation)
+        this.unregisterIndependentTimeContext?.();
+        this.keyString = keyString;
 
-          // check for older configurations that stored a key
-          if (this.timeOptions.mode.key) {
-            this.timeOptions.mode = this.timeOptions.mode.key;
-          }
+        this.independentTCEnabled = this.domainObject.configuration.useIndependentTime === true;
 
-          this.isFixed = this.timeOptions.mode === FIXED_MODE_KEY;
+        this.setTimeOptions();
 
-          this.initialize();
-        }
-      },
-      deep: true
+        this.initialize();
+      }
     },
-    objectPath: {
-      handler(newPath, oldPath) {
-        //domain object or view has probably changed
-        this.setTimeContext();
-      },
-      deep: true
+    clock() {
+      if (this.independentTCEnabled) {
+        this.saveClock();
+      }
+    },
+    timeMode() {
+      if (this.independentTCEnabled) {
+        this.saveMode();
+      }
+    },
+    clockOffsets() {
+      if (this.independentTCEnabled) {
+        this.saveClockOffsets();
+      }
+    },
+    bounds() {
+      if (this.independentTCEnabled && this.isTick === false) {
+        this.saveFixedBounds();
+      }
     }
   },
   created() {
+    // this.initialize();
+  },
+  mounted() {
+    this.setTimeOptions();
+
     this.initialize();
   },
   beforeUnmount() {
-    this.stopFollowingTimeContext();
-    this.destroyIndependentTime();
+    this.unregisterIndependentTimeContext?.();
   },
   methods: {
     initialize() {
-      this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-      this.setTimeContext();
-
       if (this.independentTCEnabled) {
-        this.registerIndependentTimeOffsets();
+        this.registerIndependentTimeContext();
       }
     },
-    toggleIndependentTC() {
-      this.independentTCEnabled = !this.independentTCEnabled;
-
+    handleIndependentTimeConductorChange() {
       if (this.independentTCEnabled) {
-        this.registerIndependentTimeOffsets();
+        this.registerIndependentTimeContext();
       } else {
         this.clearPopup();
-        this.destroyIndependentTime();
+        this.unregisterIndependentTimeContext?.();
       }
+    },
+    toggleIndependentTC() {
+      this.independentTCEnabled = !this.independentTCEnabled;
 
       this.openmct.objects.mutate(
         this.domainObject,
@@ -229,106 +257,97 @@ export default {
         this.independentTCEnabled
       );
     },
-    setTimeContext() {
-      if (this.timeContext) {
-        this.stopFollowingTimeContext();
+    setTimeOptions() {
+      this.timeOptions = toRaw(this.domainObject.configuration.timeOptions);
+      if (!this.timeOptions) {
+        this.timeOptions = {
+          clockOffsets: this.offsets,
+          fixedOffsets: this.bounds
+        };
       }
 
-      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-      this.timeContext.on(TIME_CONTEXT_EVENTS.clockChanged, this.setTimeOptionsClock);
-      this.timeContext.on(TIME_CONTEXT_EVENTS.modeChanged, this.setTimeOptionsMode);
-    },
-    stopFollowingTimeContext() {
-      this.timeContext.off(TIME_CONTEXT_EVENTS.clockChanged, this.setTimeOptionsClock);
-      this.timeContext.off(TIME_CONTEXT_EVENTS.modeChanged, this.setTimeOptionsMode);
-    },
-    setTimeOptionsClock(clock) {
-      // If the user has persisted any time options, then don't override them with global settings.
-      if (this.independentTCEnabled) {
-        return;
+      if (!this.timeOptions.clock) {
+        // can remove openmct.time.getClock() if timeContexts have clock in fixed time
+        this.timeOptions.clock = this.clock?.key ?? this.openmct.time.getClock().key;
       }
-      this.setTimeOptionsOffsets();
-      this.timeOptions.clock = clock.key;
-    },
-    setTimeOptionsMode(mode) {
-      // If the user has persisted any time options, then don't override them with global settings.
-      if (this.independentTCEnabled) {
-        this.setTimeOptionsOffsets();
-        this.timeOptions.mode = mode;
-        this.isFixed = this.timeOptions.mode === FIXED_MODE_KEY;
+
+      if (!this.timeOptions.mode) {
+        this.timeOptions.mode = this.timeMode;
+      }
+
+      // check for older configurations that stored a key
+      if (this.timeOptions.mode.key) {
+        this.timeOptions.mode = this.timeOptions.mode.key;
       }
     },
-    setTimeOptionsOffsets() {
-      this.timeOptions.clockOffsets =
-        this.timeOptions.clockOffsets ?? this.timeContext.getClockOffsets();
-      this.timeOptions.fixedOffsets = this.timeOptions.fixedOffsets ?? this.timeContext.getBounds();
+    saveFixedBounds() {
+      this.timeOptions.fixedOffsets = this.bounds;
+      this.updateTimeOptions();
     },
-    saveFixedBounds(bounds) {
-      const newOptions = this.updateTimeOptionProperty({
-        fixedOffsets: bounds
-      });
-      this.updateTimeOptions(newOptions);
+    saveClockOffsets() {
+      this.timeOptions.clockOffsets = this.offsets;
+      this.updateTimeOptions();
     },
-    saveClockOffsets(offsets) {
-      const newOptions = this.updateTimeOptionProperty({
-        clockOffsets: offsets
-      });
-
-      this.updateTimeOptions(newOptions);
+    saveMode() {
+      this.timeOptions.mode = this.timeMode;
+      this.updateTimeOptions();
     },
-    saveMode(mode) {
-      this.isFixed = mode === FIXED_MODE_KEY;
-      const newOptions = this.updateTimeOptionProperty({
-        mode: mode
-      });
-
-      this.updateTimeOptions(newOptions);
+    saveClock() {
+      this.timeOptions.clock = this.clock?.key;
+      this.updateTimeOptions();
     },
-    saveClock(clock) {
-      const newOptions = this.updateTimeOptionProperty({
-        clock
-      });
-
-      this.updateTimeOptions(newOptions);
+    updateTimeOptions() {
+      this.registerIndependentTimeContext();
+      this.openmct.objects.mutate(this.domainObject, 'configuration.timeOptions', this.timeOptions);
     },
-    updateTimeOptions(options) {
-      this.timeOptions = options;
+    registerIndependentTimeContext() {
+      const bounds = this.timeOptions.fixedOffsets ?? this.bounds;
+      const offsets = this.timeOptions.clockOffsets ?? this.offsets;
+      const clockKey = this.timeOptions.clock || this.clock.key;
 
-      this.registerIndependentTimeOffsets();
-      this.$emit('updated', this.timeOptions); // no longer use this, but may be used elsewhere
-      this.openmct.objects.mutate(this.domainObject, 'configuration.timeOptions', this.timeOptions);
+      const independentTimeContextBoundsOrOffsets = this.isFixedTimeMode ? bounds : offsets;
+      const independentTimeContextClockKey = this.isFixedTimeMode ? undefined : clockKey;
+
+      const independentTimeContext = this.openmct.time.getIndependentContext(this.keyString);
+
+      if (!independentTimeContext.hasOwnContext()) {
+        this.unregisterIndependentTimeContext = this.openmct.time.addIndependentContext(
+          this.keyString,
+          independentTimeContextBoundsOrOffsets,
+          independentTimeContextClockKey
+        );
+      } else {
+        // if (this.isRealTimeMode) {
+        //   independentTimeContext.setClock(this.timeOptions.clock);
+        // }
+        // independentTimeContext.setMode(this.timeOptions.mode, independentTimeContextBoundsOrOffsets);
+      }
     },
     registerIndependentTimeOffsets() {
-      const timeContext = this.openmct.time.getIndependentContext(this.keyString);
+      // const timeContext = this.openmct.time.getIndependentContext(this.keyString);
+      const clockKey = this.timeOptions.clock || this.clock.key;
       let offsets;
 
-      if (this.isFixed) {
-        offsets = this.timeOptions.fixedOffsets ?? this.timeContext.getBounds();
+      if (this.isFixedTimeMode) {
+        offsets = this.timeOptions.fixedOffsets ?? this.bounds;
       } else {
-        offsets = this.timeOptions.clockOffsets ?? this.openmct.time.getClockOffsets();
+        offsets = this.timeOptions.clockOffsets ?? this.offsets;
       }
 
-      if (!timeContext.hasOwnContext()) {
-        this.unregisterIndependentTime = this.openmct.time.addIndependentContext(
+      if (!this.timeContext.hasOwnContext()) {
+        this.unregisterIndependentTimeContext = this.openmct.time.addIndependentContext(
           this.keyString,
           offsets,
-          this.isFixed ? undefined : this.timeOptions.clock
+          this.isFixedTimeMode ? undefined : clockKey
         );
       } else {
-        if (!this.isFixed) {
-          timeContext.setClock(this.timeOptions.clock);
-        }
+        console.log('removed code');
+        // if (this.isRealTimeMode) {
+        //   this.timeContext.setClock(this.timeOptions.clock);
+        // }
 
-        timeContext.setMode(this.timeOptions.mode, offsets);
+        // this.timeContext.setMode(this.timeOptions.mode, offsets);
       }
-    },
-    destroyIndependentTime() {
-      if (this.unregisterIndependentTime) {
-        this.unregisterIndependentTime();
-      }
-    },
-    updateTimeOptionProperty(option) {
-      return Object.assign({}, this.timeOptions, option);
     }
   }
 };
diff --git a/src/plugins/timeConductor/mode-mixin.js b/src/plugins/timeConductor/mode-mixin.js
deleted file mode 100644
index f8dc37db647..00000000000
--- a/src/plugins/timeConductor/mode-mixin.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '../../api/time/constants.js';
-
-export default {
-  props: {
-    buttonCssClass: {
-      type: String,
-      required: false,
-      default() {
-        return '';
-      }
-    }
-  },
-  methods: {
-    loadModes() {
-      this.modes = [FIXED_MODE_KEY, REALTIME_MODE_KEY].map(this.getModeMetadata);
-    },
-    getModeMetadata(mode, testIds = false) {
-      let modeOptions;
-      const key = mode;
-
-      if (key === FIXED_MODE_KEY) {
-        modeOptions = {
-          key,
-          name: 'Fixed Timespan',
-          description: 'Query and explore data that falls between two fixed datetimes.',
-          cssClass: 'icon-tabular',
-          onItemClicked: () => this.setMode(key)
-        };
-
-        if (testIds) {
-          modeOptions.testId = 'conductor-modeOption-fixed';
-        }
-      } else {
-        modeOptions = {
-          key,
-          name: 'Real-Time',
-          description:
-            'Monitor streaming data in real-time. The Time Conductor and displays will automatically advance themselves based on the active clock.',
-          cssClass: 'icon-clock',
-          onItemClicked: () => this.setMode(key)
-        };
-
-        if (testIds) {
-          modeOptions.testId = 'conductor-modeOption-realtime';
-        }
-      }
-
-      return modeOptions;
-    }
-  }
-};
diff --git a/src/plugins/timeConductor/plugin.js b/src/plugins/timeConductor/plugin.js
index a8a9acbd78f..92d2b1adb8d 100644
--- a/src/plugins/timeConductor/plugin.js
+++ b/src/plugins/timeConductor/plugin.js
@@ -111,7 +111,7 @@ function mountComponent(openmct, configuration) {
       openmct: openmct,
       configuration: configuration
     },
-    template: '<conductor />'
+    template: '<Conductor />'
   };
   openmct.layout.conductorComponent = markRaw(conductorApp);
 }
diff --git a/src/plugins/timeConductor/useClock.js b/src/plugins/timeConductor/useClock.js
new file mode 100644
index 00000000000..8df819c116f
--- /dev/null
+++ b/src/plugins/timeConductor/useClock.js
@@ -0,0 +1,151 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { onBeforeUnmount, shallowRef, watch } from 'vue';
+
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+
+/**
+ * Provides reactive `clock` which is reactive to a time context,
+ * as well as a function to observe and update the component's clock,
+ * which automatically stops observing when the component is unmounted.
+ *
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('src/api/time/TimeContext.js').default} timeContext - the time context
+ * @returns {{
+ *   clock: import('vue').Ref<import('src/api/time/TimeContext.js').Clock>,
+ *   getAllClockMetadata: () => Object,
+ *   getClockMetadata: () => Object
+ * }}
+ */
+export function useClock(openmct, timeContext) {
+  let stopObservingClock;
+
+  const clock = shallowRef(timeContext.value.getClock());
+
+  onBeforeUnmount(() => stopObservingClock?.());
+
+  watch(
+    timeContext,
+    (newContext, oldContext) => {
+      oldContext?.off(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
+      observeClock();
+    },
+    { immediate: true }
+  );
+
+  function observeClock() {
+    timeContext.value.on(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
+    stopObservingClock = () => timeContext.value.off(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
+  }
+
+  function getAllClockMetadata(menuOptions) {
+    const clocks = menuOptions
+      ? menuOptions
+          .map((menuOption) => menuOption.clock)
+          .filter((key, index, array) => key !== undefined && array.indexOf(key) === index)
+          .map((clockKey) => openmct.time.getAllClocks().find((_clock) => _clock.key === clockKey))
+      : openmct.time.getAllClocks();
+
+    const clockMetadata = clocks.map(getClockMetadata);
+
+    return clockMetadata;
+  }
+
+  function getClockMetadata(_clock) {
+    if (_clock === undefined) {
+      return;
+    }
+
+    const clockMetadata = {
+      key: _clock.key,
+      name: _clock.name,
+      description: 'Uses the system clock as the current time basis. ' + _clock.description,
+      cssClass: _clock.cssClass || 'icon-clock',
+      onItemClicked: () => setClock(_clock.key)
+    };
+
+    return clockMetadata;
+  }
+
+  function setClock(key) {
+    timeContext.value.setClock(key);
+  }
+
+  function updateClock(_clock) {
+    clock.value = _clock;
+  }
+
+  /**
+   * TODO: bring this back. we lost this in the last refactor.
+   * changing clock requires a timesystem check.
+   * 
+  function setClockWithOptions() {
+    const option = {
+      clockKey
+    };
+    let configuration = this.getMatchingConfig({
+      clock: clockKey,
+      timeSystem: this.openmct.time.getTimeSystem().key
+    });
+
+    if (configuration === undefined) {
+      configuration = this.getMatchingConfig({
+        clock: clockKey
+      });
+
+      option.timeSystem = configuration.timeSystem;
+      option.bounds = configuration.bounds;
+
+      // this.openmct.time.setTimeSystem(configuration.timeSystem, configuration.bounds);
+    }
+
+    const offsets = this.openmct.time.getClockOffsets() ?? configuration.clockOffsets;
+    option.offsets = offsets;
+  }
+
+  function getMatchingConfig(options) {
+    const matchers = {
+      clock(config) {
+        return options.clock === config.clock;
+      },
+      timeSystem(config) {
+        return options.timeSystem === config.timeSystem;
+      }
+    };
+
+    function configMatches(config) {
+      return Object.keys(options).reduce((match, option) => {
+        return match && matchers[option](config);
+      }, true);
+    }
+
+    return this.configuration.menuOptions.filter(configMatches)[0];
+  }
+  */
+
+  return {
+    clock,
+    getAllClockMetadata,
+    getClockMetadata
+  };
+}
diff --git a/src/plugins/timeConductor/useClockOffsets.js b/src/plugins/timeConductor/useClockOffsets.js
new file mode 100644
index 00000000000..5bdd5fda7c0
--- /dev/null
+++ b/src/plugins/timeConductor/useClockOffsets.js
@@ -0,0 +1,71 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { onBeforeUnmount, shallowRef, watch } from 'vue';
+
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+
+/**
+ * @typedef {import('src/api/time/TimeContext.js').ClockOffsets} ClockOffsets
+ */
+
+/**
+ * Provides reactive `offsets`,
+ * as well as a function to observe and update offsets changes,
+ * which automatically stops observing when the component is unmounted.
+ *
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('src/api/time/TimeContext.js').default} timeContext - The time context
+ * @returns {{
+ *   offsets: import('vue').Ref<ClockOffsets>,
+ * }}
+ */
+export function useClockOffsets(openmct, timeContext) {
+  let stopObservingClockOffsets;
+
+  const offsets = shallowRef(timeContext.value.getClockOffsets());
+
+  onBeforeUnmount(() => stopObservingClockOffsets?.());
+
+  watch(
+    timeContext,
+    (newContext, oldContext) => {
+      oldContext?.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
+      observeClockOffsets();
+    },
+    { immediate: true }
+  );
+
+  function observeClockOffsets() {
+    timeContext.value.on(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
+    stopObservingClockOffsets = () =>
+      timeContext.value.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
+  }
+
+  function updateClockOffsets(_offsets) {
+    offsets.value = _offsets;
+  }
+
+  return {
+    offsets
+  };
+}
diff --git a/src/plugins/timeConductor/useTime.js b/src/plugins/timeConductor/useTime.js
new file mode 100644
index 00000000000..90b9c0344ba
--- /dev/null
+++ b/src/plugins/timeConductor/useTime.js
@@ -0,0 +1,92 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { useClock } from './useClock.js';
+import { useClockOffsets } from './useClockOffsets.js';
+import { useTimeBounds } from './useTimeBounds.js';
+import { useTimeContext } from './useTimeContext.js';
+import { useTimeMode } from './useTimeMode.js';
+import { useTimeSystem } from './useTimeSystem.js';
+
+/**
+ * @typedef {import('src/api/time/TimeContext.js').default} TimeContext
+ * @typedef {import('src/api/time/GlobalTimeContext.js').default} GlobalTimeContext
+ * @typedef {import('src/api/telemetry/TelemetryValueFormatter.js').default} TelemetryValueFormatter
+ * @typedef {import('src/api/time/TimeContext.js').Mode} Mode
+ * @typedef {import('src/api/time/TimeContext.js').Clock} Clock
+ * @typedef {import('src/api/time/TimeContext.js').ClockOffsets} ClockOffsets
+ * @typedef {import('src/api/time/TimeContext.js').Bounds} Bounds
+ */
+
+/**
+ * Provides a reactive interface to the time context based on the current object path
+ *
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('openmct').ObjectPath} objectPath - The path of the object
+ * @returns {{
+ *   timeContext: TimeContext | GlobalTimeContext,
+ *   timeSystemFormatter: import('vue').Ref<TelemetryValueFormatter>,
+ *   timeSystemDurationFormatter: import('vue').Ref<TelemetryValueFormatter>,
+ *   isTimeSystemUTCBased: import('vue').Ref<boolean>,
+ *   timeMode: import('vue').Ref<Mode>,
+ *   isFixedTimeMode: import('vue').Ref<boolean>,
+ *   isRealTimeMode: import('vue').Ref<boolean>,
+ *   getAllModeMetadata: import('vue').Ref<() => void>,
+ *   getModeMetadata: import('vue').Ref<() => void>,
+ *   bounds: import('vue').Ref<Bounds>,
+ *   isTick: import('vue').Ref<boolean>,
+ *   offsets: import('vue').Ref<ClockOffsets>,
+ *   clock: import('vue').Ref<Clock>,
+ *   getAllClockMetadata: import('vue').Ref<() => void>,
+ *   getClockMetadata: import('vue').Ref<() => void>
+ * }}
+ */
+export function useTime(openmct, objectPath) {
+  const { timeContext } = useTimeContext(openmct, objectPath);
+  const { timeSystemFormatter, timeSystemDurationFormatter, isTimeSystemUTCBased } = useTimeSystem(
+    openmct,
+    timeContext
+  );
+  const { timeMode, isFixedTimeMode, isRealTimeMode, getAllModeMetadata, getModeMetadata } =
+    useTimeMode(openmct, timeContext);
+  const { bounds, isTick } = useTimeBounds(openmct, timeContext);
+  const { clock, getAllClockMetadata, getClockMetadata } = useClock(openmct, timeContext);
+  const { offsets } = useClockOffsets(openmct, timeContext);
+
+  return {
+    timeContext,
+    timeSystemFormatter,
+    timeSystemDurationFormatter,
+    isTimeSystemUTCBased,
+    timeMode,
+    isFixedTimeMode,
+    isRealTimeMode,
+    getAllModeMetadata,
+    getModeMetadata,
+    bounds,
+    isTick,
+    offsets,
+    clock,
+    getAllClockMetadata,
+    getClockMetadata
+  };
+}
diff --git a/src/plugins/timeConductor/useTimeBounds.js b/src/plugins/timeConductor/useTimeBounds.js
new file mode 100644
index 00000000000..2d7861939c1
--- /dev/null
+++ b/src/plugins/timeConductor/useTimeBounds.js
@@ -0,0 +1,83 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { onBeforeUnmount, ref, shallowRef, watch } from 'vue';
+
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import throttle from '../../utils/throttle.js';
+
+const THROTTLE_RATE = 300;
+/**
+ * @typedef {import('src/api/time/TimeContext.js').Bounds} Bounds
+ */
+
+/**
+ * Provides reactive `bounds`,
+ * as well as a function to observe and update bounds changes,
+ * which automatically stops observing when the component is unmounted.
+ *
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('src/api/time/TimeContext.js').default} timeContext - the time context
+ * @returns {{
+ *   bounds: import('vue').Ref<Bounds>,
+ *   isTick: import('vue').Ref<boolean>
+ * }}
+ */
+export function useTimeBounds(openmct, timeContext) {
+  let stopObservingTimeBounds;
+
+  const bounds = shallowRef(timeContext.value.getBounds());
+  const isTick = ref(false);
+
+  onBeforeUnmount(() => stopObservingTimeBounds?.());
+
+  watch(
+    timeContext,
+    (newContext, oldContext) => {
+      oldContext?.off(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds, THROTTLE_RATE));
+      observeTimeBounds();
+    },
+    { immediate: true }
+  );
+
+  function observeTimeBounds() {
+    timeContext.value.on(
+      TIME_CONTEXT_EVENTS.boundsChanged,
+      throttle(updateTimeBounds, THROTTLE_RATE)
+    );
+    stopObservingTimeBounds = () =>
+      timeContext.value.off(
+        TIME_CONTEXT_EVENTS.boundsChanged,
+        throttle(updateTimeBounds, THROTTLE_RATE)
+      );
+  }
+
+  function updateTimeBounds(_timeBounds, _isTick) {
+    bounds.value = _timeBounds;
+    isTick.value = _isTick;
+  }
+
+  return {
+    isTick,
+    bounds
+  };
+}
diff --git a/src/plugins/timeConductor/useTimeContext.js b/src/plugins/timeConductor/useTimeContext.js
new file mode 100644
index 00000000000..ec5941ffe36
--- /dev/null
+++ b/src/plugins/timeConductor/useTimeContext.js
@@ -0,0 +1,53 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { shallowRef, toValue, watchEffect } from 'vue';
+
+/**
+ * @typedef {import('src/api/time/TimeContext.js').default} TimeContext
+ * @typedef {import('src/api/time/GlobalTimeContext.js').default} GlobalTimeContext
+ */
+
+/**
+ * Provides the reactive TimeContext
+ * for the view's objectPath,
+ * or the GlobalTimeContext if objectPath is undefined.
+ *
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('openmct').ObjectPath} objectPath - The path of the object
+ * @returns {{
+ *   timeContext: TimeContext | GlobalTimeContext
+ * }}
+ */
+export function useTimeContext(openmct, objectPath) {
+  const timeContext = shallowRef(null);
+
+  watchEffect(() => getTimeContext());
+
+  function getTimeContext() {
+    const path = toValue(objectPath);
+
+    timeContext.value = path !== undefined ? openmct.time.getContextForView(path) : openmct.time;
+  }
+
+  return { timeContext };
+}
diff --git a/src/plugins/timeConductor/useTimeMode.js b/src/plugins/timeConductor/useTimeMode.js
new file mode 100644
index 00000000000..d9f6b3a847d
--- /dev/null
+++ b/src/plugins/timeConductor/useTimeMode.js
@@ -0,0 +1,114 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+
+import {
+  FIXED_MODE_KEY,
+  REALTIME_MODE_KEY,
+  TIME_CONTEXT_EVENTS
+} from '../../api/time/constants.js';
+
+/**
+ * @typedef {import('src/api/time/TimeContext.js').Mode} Mode
+ */
+
+/**
+ * Provides reactive `timeMode` which is reactive to a time context,
+ * as well as a function to observe and update the component's time mode,
+ * which automatically stops observing when the component is unmounted.
+ *
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('src/api/time/TimeContext.js').default} timeContext - The time context
+ * @returns {{
+ *   timeMode: import('vue').Ref<Mode>,
+ *   getAllModeMetadata: import('vue').Ref<() => void>,
+ *   getModeMetadata: import('vue').Ref<() => void>,
+ *   isFixedTimeMode: import('vue').Ref<boolean>,
+ *   isRealTimeMode: import('vue').Ref<boolean>
+ * }}
+ */
+export function useTimeMode(openmct, timeContext) {
+  let stopObservingTimeMode;
+
+  const timeMode = ref(timeContext.value.getMode());
+  const isFixedTimeMode = computed(() => timeMode.value === FIXED_MODE_KEY);
+  const isRealTimeMode = computed(() => timeMode.value === REALTIME_MODE_KEY);
+
+  onBeforeUnmount(() => stopObservingTimeMode?.());
+
+  watch(
+    timeContext,
+    (newContext, oldContext) => {
+      oldContext?.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
+      observeTimeMode();
+    },
+    { immediate: true }
+  );
+
+  function observeTimeMode() {
+    timeContext.value.on(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
+    stopObservingTimeMode = () =>
+      timeContext.value.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
+  }
+
+  function getAllModeMetadata() {
+    return [FIXED_MODE_KEY, REALTIME_MODE_KEY].map(getModeMetadata);
+  }
+
+  function getModeMetadata(key) {
+    const fixedModeMetadata = {
+      key: FIXED_MODE_KEY,
+      name: 'Fixed Timespan',
+      description: 'Query and explore data that falls between two fixed datetimes.',
+      cssClass: 'icon-tabular',
+      onItemClicked: () => setTimeMode(key)
+    };
+
+    const realTimeModeMetadata = {
+      key: REALTIME_MODE_KEY,
+      name: 'Real-Time',
+      description:
+        'Monitor streaming data in real-time. The Time Conductor and displays will automatically advance themselves based on the active clock.',
+      cssClass: 'icon-clock',
+      onItemClicked: () => setTimeMode(key)
+    };
+
+    return key === FIXED_MODE_KEY ? fixedModeMetadata : realTimeModeMetadata;
+  }
+
+  function setTimeMode(_timeMode) {
+    timeContext.value.setMode(_timeMode);
+  }
+
+  function updateTimeMode(_timeMode) {
+    timeMode.value = _timeMode;
+  }
+
+  return {
+    timeMode,
+    getAllModeMetadata,
+    getModeMetadata,
+    isFixedTimeMode,
+    isRealTimeMode
+  };
+}
diff --git a/src/plugins/timeConductor/useTimeSystem.js b/src/plugins/timeConductor/useTimeSystem.js
new file mode 100644
index 00000000000..4d4df5d4559
--- /dev/null
+++ b/src/plugins/timeConductor/useTimeSystem.js
@@ -0,0 +1,98 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { onBeforeUnmount, ref, watch } from 'vue';
+
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+
+const DEFAULT_DURATION_FORMATTER = 'duration';
+
+/**
+ * @typedef {import('src/api/telemetry/TelemetryValueFormatter.js').default} TelemetryValueFormatter
+ */
+
+/**
+ * Provides a reactive destructuring of the component's current time system,
+ * as well as a function to observe and update the component's time system,
+ * which automatically stops observing when the component is unmounted.
+ *
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('src/api/time/TimeContext.js').default} timeContext - The time context
+ * @returns {{
+ *   timeSystemKey: import('vue').Ref<string>,
+ *   timeSystemFormatter: import('vue').Ref<TelemetryValueFormatter>,
+ *   timeSystemDurationFormatter: import('vue').Ref<TelemetryValueFormatter>,
+ *   isTimeSystemUTCBased: import('vue').Ref<boolean>
+ * }}
+ */
+export function useTimeSystem(openmct, timeContext) {
+  let stopObservingTimeSystem;
+
+  const initialTimeSystem = timeContext.value.getTimeSystem();
+
+  const timeSystemKey = ref(initialTimeSystem.key);
+  const timeSystemFormatter = ref(getFormatter(openmct, initialTimeSystem.timeFormat));
+  const timeSystemDurationFormatter = ref(
+    getFormatter(openmct, initialTimeSystem.durationFormat || DEFAULT_DURATION_FORMATTER)
+  );
+  const isTimeSystemUTCBased = ref(initialTimeSystem.isUTCBased);
+
+  onBeforeUnmount(() => stopObservingTimeSystem?.());
+
+  watch(
+    timeContext,
+    (newContext, oldContext) => {
+      oldContext?.off(TIME_CONTEXT_EVENTS.timeSystemChanged, updateTimeSystem);
+      observeTimeSystem();
+    },
+    { immediate: true }
+  );
+
+  function observeTimeSystem() {
+    timeContext.value.on(TIME_CONTEXT_EVENTS.timeSystemChanged, updateTimeSystem);
+    stopObservingTimeSystem = () =>
+      timeContext.value.off(TIME_CONTEXT_EVENTS.timeSystemChanged, updateTimeSystem);
+  }
+
+  function updateTimeSystem(timeSystem) {
+    timeSystemKey.value = timeSystem.key;
+    timeSystemFormatter.value = getFormatter(openmct, timeSystem.timeFormat);
+    timeSystemDurationFormatter.value = getFormatter(
+      openmct,
+      timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
+    );
+    isTimeSystemUTCBased.value = timeSystem.isUTCBased;
+  }
+
+  return {
+    timeSystemKey,
+    timeSystemFormatter,
+    timeSystemDurationFormatter,
+    isTimeSystemUTCBased
+  };
+}
+
+function getFormatter(openmct, key) {
+  return openmct.telemetry.getValueFormatter({
+    format: key
+  }).formatter;
+}
diff --git a/src/plugins/utcTimeSystem/UTCTimeFormat.js b/src/plugins/utcTimeSystem/UTCTimeFormat.js
index 916c9f57847..0dde49c1c50 100644
--- a/src/plugins/utcTimeSystem/UTCTimeFormat.js
+++ b/src/plugins/utcTimeSystem/UTCTimeFormat.js
@@ -32,12 +32,13 @@ import moment from 'moment';
 export default class UTCTimeFormat {
   constructor() {
     this.key = 'utc';
-    this.DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSS';
+    this.DATE_FORMAT = `YYYY-MM-DD HH:mm:ss.SSS`;
     this.DATE_FORMATS = {
       PRECISION_DEFAULT: this.DATE_FORMAT,
-      PRECISION_DEFAULT_WITH_ZULU: this.DATE_FORMAT + 'Z',
-      PRECISION_SECONDS: 'YYYY-MM-DD HH:mm:ss',
-      PRECISION_MINUTES: 'YYYY-MM-DD HH:mm',
+      PRECISION_DEFAULT_WITH_ZULU: `${this.DATE_FORMAT}Z`,
+      PRECISION_DEFAULT_WITH_ZULU_MOMENT: `${this.DATE_FORMAT}[Z]`,
+      PRECISION_SECONDS: `YYYY-MM-DD HH:mm:ss`,
+      PRECISION_MINUTES: `YYYY-MM-DD HH:mm`,
       PRECISION_DAYS: 'YYYY-MM-DD',
       PRECISION_SECONDS_TIME_ONLY: 'HH:mm:ss',
       PRECISION_MINUTES_TIME_ONLY: 'HH:mm'
@@ -54,6 +55,7 @@ export default class UTCTimeFormat {
 
   /**
    * @param {number} value The value to format.
+   * @param {string} formatString The format string to use for formatting.
    * @returns {string} the formatted date(s). If multiple values were requested, then an array of
    * formatted values will be returned. Where a value could not be formatted, `undefined` will be returned at its position
    * in the array.
@@ -66,15 +68,29 @@ export default class UTCTimeFormat {
         throw 'Invalid format requested from UTC Time Formatter ';
       }
 
-      let format = formatString || this.DATE_FORMATS.PRECISION_DEFAULT;
+      const format = formatString || this.DATE_FORMATS.PRECISION_DEFAULT_WITH_ZULU_MOMENT;
 
-      return utc.format(format) + (formatString ? '' : 'Z');
-    } else {
-      return value;
+      return utc.format(format);
     }
   }
 
-  parse(text) {
+  /**
+   * Optional formatting method that allows for splitting date and time into separate inputs
+   * Allows for easier manipulation of date or time
+   * @param {number} value The value to format.
+   * @returns {string} the formatted date.
+   */
+  formatDate(value) {
+    return this.format(value, this.DATE_FORMATS.PRECISION_DAYS);
+  }
+
+  /**
+   * @param {number|string} text The text to parse.
+   * @param {string} formatString The format string to use for parsing.
+   * @returns {number} the value parsed from the text.
+   * If the text is a number, it is returned as is.
+   */
+  parse(text, formatString) {
     if (typeof text === 'number') {
       return text;
     }