diff --git a/.playwright-mcp/final-working-state.png b/.playwright-mcp/final-working-state.png
new file mode 100644
index 00000000..15365ac2
Binary files /dev/null and b/.playwright-mcp/final-working-state.png differ
diff --git a/.playwright-mcp/fullscreen-mode.png b/.playwright-mcp/fullscreen-mode.png
new file mode 100644
index 00000000..b0b27ba6
Binary files /dev/null and b/.playwright-mcp/fullscreen-mode.png differ
diff --git a/.playwright-mcp/fullscreen-test-final.png b/.playwright-mcp/fullscreen-test-final.png
new file mode 100644
index 00000000..5e79804a
Binary files /dev/null and b/.playwright-mcp/fullscreen-test-final.png differ
diff --git a/.playwright-mcp/fullscreen-test-initial.png b/.playwright-mcp/fullscreen-test-initial.png
new file mode 100644
index 00000000..5ad7a6f5
Binary files /dev/null and b/.playwright-mcp/fullscreen-test-initial.png differ
diff --git a/.playwright-mcp/initial-state.png b/.playwright-mcp/initial-state.png
new file mode 100644
index 00000000..15365ac2
Binary files /dev/null and b/.playwright-mcp/initial-state.png differ
diff --git a/.playwright-mcp/react-fullscreen-icons-fixed.png b/.playwright-mcp/react-fullscreen-icons-fixed.png
new file mode 100644
index 00000000..24aca3e0
Binary files /dev/null and b/.playwright-mcp/react-fullscreen-icons-fixed.png differ
diff --git a/.playwright-mcp/react-fullscreen-icons-issue.png b/.playwright-mcp/react-fullscreen-icons-issue.png
new file mode 100644
index 00000000..319b472d
Binary files /dev/null and b/.playwright-mcp/react-fullscreen-icons-issue.png differ
diff --git a/packages/core/media-store/src/component-state-definitions/duration-display.ts b/packages/core/media-store/src/component-state-definitions/duration-display.ts
index 7f714585..2d3b2fd2 100644
--- a/packages/core/media-store/src/component-state-definitions/duration-display.ts
+++ b/packages/core/media-store/src/component-state-definitions/duration-display.ts
@@ -6,23 +6,12 @@
  * display is a read-only component that shows the total duration of media.
  */
 
-import { formatDuration, formatAsTimePhrase, isValidDuration } from '../utils/time';
-
 /**
  * State interface for duration display components
  */
 export interface DurationDisplayState {
   /** The raw duration value in seconds */
   duration: number | undefined;
-  
-  /** Whether the duration is valid and should be displayed */
-  isValidDuration: boolean;
-  
-  /** Formatted duration string for display (e.g., "4:32" or "--:--") */
-  formattedDuration: string;
-  
-  /** Human-readable duration phrase for accessibility (e.g., "4 minutes, 32 seconds") */
-  durationPhrase: string;
 }
 
 /**
@@ -42,13 +31,9 @@ export const durationDisplayStateDefinition = {
    */
   stateTransform: (rawState: Record<string, any>): DurationDisplayState => {
     const { duration } = rawState;
-    const isValid = isValidDuration(duration);
     
     return {
       duration,
-      isValidDuration: isValid,
-      formattedDuration: formatDuration(duration),
-      durationPhrase: isValid ? formatAsTimePhrase(duration) : 'Duration unknown',
     };
   },
 
diff --git a/packages/html/html/src/components/media-duration-display.ts b/packages/html/html/src/components/media-duration-display.ts
index 5fa05da4..cc99b824 100644
--- a/packages/html/html/src/components/media-duration-display.ts
+++ b/packages/html/html/src/components/media-duration-display.ts
@@ -3,7 +3,7 @@ import {
   StateHook,
   PropsHook,
 } from '../utils/component-factory';
-import { durationDisplayStateDefinition } from '@vjs-10/media-store';
+import { durationDisplayStateDefinition, formatDuration } from '@vjs-10/media-store';
 import { namedNodeMapToObject } from '../utils/element-utils.js';
 
 export function getTemplateHTML(
@@ -25,9 +25,6 @@ export class DurationDisplayBase extends HTMLElement {
   _state:
     | {
         duration: number | undefined;
-        isValidDuration: boolean;
-        formattedDuration: string;
-        durationPhrase: string;
       }
     | undefined;
 
@@ -54,21 +51,13 @@ export class DurationDisplayBase extends HTMLElement {
     return this._state?.duration;
   }
 
-  get formattedDuration() {
-    return this._state?.formattedDuration || '--:--';
-  }
-
-  get durationPhrase() {
-    return this._state?.durationPhrase || 'Duration unknown';
-  }
-
   _update(_props: any, state: any) {
     this._state = state;
     
-    // Update the span content
+    // Update the span content with formatted duration
     const spanElement = this.shadowRoot?.querySelector('span') as HTMLElement;
     if (spanElement) {
-      spanElement.textContent = state.formattedDuration;
+      spanElement.textContent = formatDuration(state.duration);
     }
   }
 }
@@ -79,9 +68,6 @@ export class DurationDisplayBase extends HTMLElement {
  */
 export const useDurationDisplayState: StateHook<{
   duration: number | undefined;
-  isValidDuration: boolean;
-  formattedDuration: string;
-  durationPhrase: string;
 }> = {
   keys: [...durationDisplayStateDefinition.keys],
   transform: (rawState, _mediaStore) => ({
@@ -96,9 +82,6 @@ export const useDurationDisplayState: StateHook<{
  */
 export const useDurationDisplayProps: PropsHook<{
   duration: number | undefined;
-  isValidDuration: boolean;
-  formattedDuration: string;
-  durationPhrase: string;
 }> = (_state, _element) => {
   const baseProps: Record<string, any> = {};
   return baseProps;
diff --git a/packages/react/react/src/components/DurationDisplay.tsx b/packages/react/react/src/components/DurationDisplay.tsx
index ee561ebc..082daf1b 100644
--- a/packages/react/react/src/components/DurationDisplay.tsx
+++ b/packages/react/react/src/components/DurationDisplay.tsx
@@ -5,7 +5,7 @@ import {
 } from '@vjs-10/react-media-store';
 import * as React from 'react';
 import { toConnectedComponent } from '../utils/component-factory';
-import { durationDisplayStateDefinition } from '@vjs-10/media-store';
+import { durationDisplayStateDefinition, formatDuration } from '@vjs-10/media-store';
 
 export const useDurationDisplayState = (_props: any) => {
   const mediaStore = useMediaStore();
@@ -18,9 +18,6 @@ export const useDurationDisplayState = (_props: any) => {
   // Duration display is read-only, no request methods needed
   return {
     duration: mediaState.duration,
-    isValidDuration: mediaState.isValidDuration,
-    formattedDuration: mediaState.formattedDuration,
-    durationPhrase: mediaState.durationPhrase,
   } as const;
 };
 
@@ -48,7 +45,7 @@ export const renderDurationDisplay = (
 ) => {
   return (
     <span {...props}>
-      {state.formattedDuration}
+      {formatDuration(state.duration)}
     </span>
   );
 };