diff --git a/packages/react/react/src/components/DurationDisplay.tsx b/packages/react/react/src/components/DurationDisplay.tsx
new file mode 100644
index 00000000..ee561ebc
--- /dev/null
+++ b/packages/react/react/src/components/DurationDisplay.tsx
@@ -0,0 +1,64 @@
+import {
+  shallowEqual,
+  useMediaSelector,
+  useMediaStore,
+} from '@vjs-10/react-media-store';
+import * as React from 'react';
+import { toConnectedComponent } from '../utils/component-factory';
+import { durationDisplayStateDefinition } from '@vjs-10/media-store';
+
+export const useDurationDisplayState = (_props: any) => {
+  const mediaStore = useMediaStore();
+  /** @TODO Fix type issues with hooks (CJP) */
+  const mediaState = useMediaSelector(
+    durationDisplayStateDefinition.stateTransform,
+    shallowEqual,
+  );
+
+  // Duration display is read-only, no request methods needed
+  return {
+    duration: mediaState.duration,
+    isValidDuration: mediaState.isValidDuration,
+    formattedDuration: mediaState.formattedDuration,
+    durationPhrase: mediaState.durationPhrase,
+  } as const;
+};
+
+export type useDurationDisplayState = typeof useDurationDisplayState;
+export type DurationDisplayState = ReturnType<useDurationDisplayState>;
+
+export const useDurationDisplayProps = (
+  props: React.PropsWithChildren<{ [k: string]: any }>,
+  state: ReturnType<typeof useDurationDisplayState>,
+) => {
+  const baseProps: Record<string, any> = {
+    /** external props spread last to allow for overriding */
+    ...props,
+  };
+
+  return baseProps;
+};
+
+export type useDurationDisplayProps = typeof useDurationDisplayProps;
+type DurationDisplayProps = ReturnType<useDurationDisplayProps>;
+
+export const renderDurationDisplay = (
+  props: DurationDisplayProps,
+  state: DurationDisplayState,
+) => {
+  return (
+    <span {...props}>
+      {state.formattedDuration}
+    </span>
+  );
+};
+
+export type renderDurationDisplay = typeof renderDurationDisplay;
+
+export const DurationDisplay = toConnectedComponent(
+  useDurationDisplayState,
+  useDurationDisplayProps,
+  renderDurationDisplay,
+  'DurationDisplay',
+);
+export default DurationDisplay;
\ No newline at end of file
diff --git a/packages/react/react/src/index.tsx b/packages/react/react/src/index.tsx
index 5a21cb0a..61025275 100644
--- a/packages/react/react/src/index.tsx
+++ b/packages/react/react/src/index.tsx
@@ -9,4 +9,5 @@ export { MediaContainer, useMediaContainerRef } from './components/MediaContaine
 export { PlayButton } from './components/PlayButton';
 export { MuteButton } from './components/MuteButton';
 export { VolumeRange } from './components/VolumeRange';
-export { FullscreenButton } from './components/FullscreenButton';
\ No newline at end of file
+export { FullscreenButton } from './components/FullscreenButton';
+export { DurationDisplay } from './components/DurationDisplay';
\ No newline at end of file