diff --git a/packages/html/html/src/skins/media-skin-default.ts b/packages/html/html/src/skins/media-skin-default.ts
index 5802f465..829392f4 100644
--- a/packages/html/html/src/skins/media-skin-default.ts
+++ b/packages/html/html/src/skins/media-skin-default.ts
@@ -42,6 +42,20 @@ export function getTemplateHTML() {
         background: none;
       }
 
+      /* Time Display Styling */
+      media-current-time-display,
+      media-duration-display {
+        background: rgb(20 20 30 / .7);
+        padding: 4px 8px;
+        color: rgb(238 238 238);
+        font-family: monospace;
+        font-size: 14px;
+        border-radius: 2px;
+        min-width: 3em;
+        text-align: center;
+        display: inline-block;
+      }
+
       /* Generic Media Button Styling */
       .button {
         border: none;
diff --git a/packages/react/react/src/skins/MediaSkinDefault.tsx b/packages/react/react/src/skins/MediaSkinDefault.tsx
index 0973b89f..3ccf2e01 100644
--- a/packages/react/react/src/skins/MediaSkinDefault.tsx
+++ b/packages/react/react/src/skins/MediaSkinDefault.tsx
@@ -31,9 +31,9 @@ export const MediaSkinDefault: React.FC<{ children: React.ReactNode }> = ({
             <PlayIcon className={styles.PlayIcon}></PlayIcon>
             <PauseIcon className={styles.PauseIcon}></PauseIcon>
           </PlayButton>
-          <CurrentTimeDisplay />
+          <CurrentTimeDisplay className={styles.TimeDisplay} />
           <TimeRange className={styles.TimeRange} />
-          <DurationDisplay />
+          <DurationDisplay className={styles.TimeDisplay} />
           {/* @ts-ignore */}
           <MuteButton className={`${styles.Button} ${styles.MediaMuteButton}`}>
             <VolumeHighIcon
diff --git a/packages/react/react/src/skins/styles.module.css b/packages/react/react/src/skins/styles.module.css
index 00c25c45..b9ebcfbd 100644
--- a/packages/react/react/src/skins/styles.module.css
+++ b/packages/react/react/src/skins/styles.module.css
@@ -73,6 +73,18 @@
   flex-grow: 1;
 }
 
+/* Time Display Styling */
+.TimeDisplay {
+  background: rgb(20 20 30 / 0.7);
+  padding: 4px 8px;
+  color: rgb(238 238 238);
+  font-family: monospace;
+  font-size: 14px;
+  border-radius: 2px;
+  min-width: 3em;
+  text-align: center;
+}
+
 /* Base Button Styling */
 .MediaPlayButton {
   border: none;