diff --git a/packages/html/html/src/skins/media-skin-default.ts b/packages/html/html/src/skins/media-skin-default.ts
index 71e8fcd6..33254c15 100644
--- a/packages/html/html/src/skins/media-skin-default.ts
+++ b/packages/html/html/src/skins/media-skin-default.ts
@@ -6,6 +6,7 @@ import '../components/media-mute-button';
 import '../components/media-volume-range';
 import '../components/media-time-range';
 import '../components/media-fullscreen-button';
+import '../components/media-duration-display';
 import '@vjs-10/html-icons';
 
 export function getTemplateHTML() {
@@ -99,6 +100,7 @@ export function getTemplateHTML() {
             <media-pause-icon class="icon pause-icon"></media-pause-icon>
           </media-play-button>
           <media-time-range></media-time-range>
+          <media-duration-display></media-duration-display>
           <media-mute-button class="button">
             <media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
             <media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
diff --git a/packages/react/react/src/skins/MediaSkinDefault.tsx b/packages/react/react/src/skins/MediaSkinDefault.tsx
index 20a2a019..c354efea 100644
--- a/packages/react/react/src/skins/MediaSkinDefault.tsx
+++ b/packages/react/react/src/skins/MediaSkinDefault.tsx
@@ -5,6 +5,7 @@ import MuteButton from '../components/MuteButton';
 import { VolumeRange } from '../components/VolumeRange';
 import { TimeRange } from '../components/TimeRange';
 import { FullscreenButton } from '../components/FullscreenButton';
+import { DurationDisplay } from '../components/DurationDisplay';
 import { MediaContainer } from '../components/MediaContainer';
 import {
   VolumeHighIcon,
@@ -30,6 +31,7 @@ export const MediaSkinDefault: React.FC<{ children: React.ReactNode }> = ({
             <PauseIcon className={styles.PauseIcon}></PauseIcon>
           </PlayButton>
           <TimeRange className={styles.TimeRange} />
+          <DurationDisplay />
           {/* @ts-ignore */}
           <MuteButton className={`${styles.Button} ${styles.MediaMuteButton}`}>
             <VolumeHighIcon