diff --git a/frontend/src-tauri/tauri.conf.json b/frontend/src-tauri/tauri.conf.json
index 67dff52c5..beffb4f1d 100644
--- a/frontend/src-tauri/tauri.conf.json
+++ b/frontend/src-tauri/tauri.conf.json
@@ -66,7 +66,7 @@
         ],
         "enable": true
       },
-      "csp": "default-src 'self'; img-src 'self' data: asset: http://asset.localhost; media-src 'self' blob: data:; connect-src 'self' ipc: http://ipc.localhost http://localhost:52123 ws://localhost:52123 http://localhost:52124 ws://localhost:52124"
+      "csp": "default-src 'self'; img-src 'self' data: asset: http://asset.localhost; media-src 'self' blob: data: asset: http://asset.localhost; connect-src 'self' ipc: http://ipc.localhost http://localhost:52123 ws://localhost:52123 http://localhost:52124 ws://localhost:52124"
     }
   }
 }
diff --git a/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx b/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
index 84c8f7737..8ef1e697b 100644
--- a/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
+++ b/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
 import {
   Play,
   Pause,
@@ -11,6 +11,7 @@ import {
   VolumeX,
 } from 'lucide-react';
 import { Slider } from '../../components/ui/Slider';
+import { convertFileSrc } from '@tauri-apps/api/core';
 
 interface NetflixStylePlayerProps {
   videoSrc: string;
@@ -27,9 +28,13 @@ export default function NetflixStylePlayer({
   const [isMuted, setIsMuted] = useState(false);
   const [showControls, setShowControls] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
   const videoRef = useRef<HTMLVideoElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  const resolvedSrc = useMemo(() => convertFileSrc(videoSrc), [videoSrc]);
+
   useEffect(() => {
     let timeout: NodeJS.Timeout;
     const showControlsTemporarily = () => {
@@ -44,16 +49,77 @@ export default function NetflixStylePlayer({
       container.addEventListener('mouseenter', showControlsTemporarily);
     }
 
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const activeEl = document.activeElement;
+      if (
+        activeEl &&
+        (activeEl.tagName === 'INPUT' ||
+          activeEl.tagName === 'TEXTAREA' ||
+          activeEl.getAttribute('contenteditable') === 'true')
+      ) {
+        return;
+      }
+
+      switch (e.key) {
+        case ' ':
+          e.preventDefault();
+          togglePlay();
+          showControlsTemporarily();
+          break;
+        case 'ArrowLeft':
+          e.preventDefault();
+          skipTime(-10);
+          showControlsTemporarily();
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          skipTime(10);
+          showControlsTemporarily();
+          break;
+        case 'm':
+        case 'M':
+          e.preventDefault();
+          toggleMute();
+          showControlsTemporarily();
+          break;
+        case 'f':
+        case 'F':
+          e.preventDefault();
+          toggleFullScreen();
+          showControlsTemporarily();
+          break;
+        default:
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
     return () => {
       if (container) {
         container.removeEventListener('mousemove', showControlsTemporarily);
         container.removeEventListener('mouseenter', showControlsTemporarily);
       }
+      document.removeEventListener('keydown', handleKeyDown);
       clearTimeout(timeout);
     };
   }, []);
 
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(document.fullscreenElement === containerRef.current);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
   const formatTime = (timeInSeconds: number) => {
+    if (!Number.isFinite(timeInSeconds)) {
+      return '0:00';
+    }
     const hours = Math.floor(timeInSeconds / 3600);
     const minutes = Math.floor((timeInSeconds % 3600) / 60);
     const seconds = Math.floor(timeInSeconds % 60);
@@ -65,27 +131,51 @@ export default function NetflixStylePlayer({
   };
 
   const togglePlay = () => {
-    if (videoRef.current) {
-      isPlaying ? videoRef.current.pause() : videoRef.current.play();
-      setIsPlaying(!isPlaying);
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.paused) {
+      video.play().catch(() => {});
+    } else {
+      video.pause();
     }
   };
 
   const handleProgress = () => {
     if (videoRef.current) {
+      setCurrentTime(videoRef.current.currentTime);
       setProgress(
-        (videoRef.current.currentTime / videoRef.current.duration) * 100,
+        videoRef.current.duration
+          ? (videoRef.current.currentTime / videoRef.current.duration) * 100
+          : 0,
       );
     }
   };
 
+  const handleLoadedMetadata = () => {
+    if (videoRef.current) {
+      setDuration(videoRef.current.duration);
+    }
+  };
+
+  const handleDurationChange = () => {
+    if (videoRef.current) {
+      setDuration(videoRef.current.duration);
+    }
+  };
+
   const handleProgressBarClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (videoRef.current) {
       const progressBar = e.currentTarget;
       const clickPosition =
         (e.clientX - progressBar.getBoundingClientRect().left) /
         progressBar.offsetWidth;
-      videoRef.current.currentTime = clickPosition * videoRef.current.duration;
+      const rawTime = clickPosition * videoRef.current.duration;
+      const maxTime = Number.isFinite(videoRef.current.duration)
+        ? videoRef.current.duration
+        : 0;
+      const newTime = Math.min(Math.max(rawTime, 0), maxTime);
+      videoRef.current.currentTime = newTime;
+      setCurrentTime(newTime);
     }
   };
 
@@ -95,12 +185,17 @@ export default function NetflixStylePlayer({
     } else {
       document.exitFullscreen();
     }
-    setIsFullscreen(!isFullscreen);
   };
 
   const skipTime = (seconds: number) => {
     if (videoRef.current) {
-      videoRef.current.currentTime += seconds;
+      const rawTime = videoRef.current.currentTime + seconds;
+      const maxTime = Number.isFinite(videoRef.current.duration)
+        ? videoRef.current.duration
+        : 0;
+      const newTime = Math.min(Math.max(rawTime, 0), maxTime);
+      videoRef.current.currentTime = newTime;
+      setCurrentTime(newTime);
     }
   };
 
@@ -108,6 +203,7 @@ export default function NetflixStylePlayer({
     if (videoRef.current) {
       const volumeValue = newVolume[0];
       videoRef.current.volume = volumeValue;
+      videoRef.current.muted = volumeValue === 0;
       setVolume(volumeValue);
       setIsMuted(volumeValue === 0);
     }
@@ -115,7 +211,7 @@ export default function NetflixStylePlayer({
 
   const toggleMute = () => {
     if (videoRef.current) {
-      const newMuteState = !isMuted;
+      const newMuteState = !videoRef.current.muted;
       videoRef.current.muted = newMuteState;
       setIsMuted(newMuteState);
     }
@@ -130,9 +226,14 @@ export default function NetflixStylePlayer({
       >
         <video
           ref={videoRef}
-          src={videoSrc}
+          src={resolvedSrc}
           className="h-full w-full"
           onTimeUpdate={handleProgress}
+          onLoadedMetadata={handleLoadedMetadata}
+          onDurationChange={handleDurationChange}
+          onPlay={() => setIsPlaying(true)}
+          onPause={() => setIsPlaying(false)}
+          onEnded={() => setIsPlaying(false)}
           preload="auto"
         />
       </div>
@@ -167,9 +268,7 @@ export default function NetflixStylePlayer({
             <FastForward size={24} />
           </button>
           <div className="text-white">
-            {formatTime(videoRef.current?.currentTime ?? 0) +
-              ' / ' +
-              formatTime(videoRef.current?.duration ?? 0)}
+            {formatTime(currentTime) + ' / ' + formatTime(duration)}
           </div>
         </div>
 
diff --git a/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx b/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx
new file mode 100644
index 000000000..e66ef910c
--- /dev/null
+++ b/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx
@@ -0,0 +1,340 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import fs from 'fs';
+import path from 'path';
+import NetflixStylePlayer from '../NetflixStylePlayer';
+
+// Mock Tauri convertFileSrc API
+jest.mock('@tauri-apps/api/core', () => ({
+  convertFileSrc: (path: string) => `tauri-converted://${path}`,
+}));
+
+// Mock Slider component to use simple range input for testing
+jest.mock('../../ui/Slider', () => ({
+  Slider: ({
+    onValueChange,
+    value = [0],
+    min,
+    max,
+    step,
+  }: {
+    onValueChange?: (value: number[]) => void;
+    value?: number[];
+    min?: number;
+    max?: number;
+    step?: number;
+  }) => (
+    <input
+      data-testid="volume-slider"
+      type="range"
+      min={min}
+      max={max}
+      step={step}
+      value={value[0]}
+      onChange={(e) => onValueChange?.([Number.parseFloat(e.target.value)])}
+    />
+  ),
+}));
+
+// Mock lucide icons for easy querying
+jest.mock('lucide-react', () => ({
+  Play: () => <span data-testid="icon-play">Play</span>,
+  Pause: () => <span data-testid="icon-pause">Pause</span>,
+  Rewind: () => <span data-testid="icon-rewind">Rewind</span>,
+  FastForward: () => <span data-testid="icon-fastforward">FastForward</span>,
+  Volume2: () => <span data-testid="icon-volume">Volume</span>,
+  VolumeX: () => <span data-testid="icon-mute">Mute</span>,
+  Maximize2: () => <span data-testid="icon-maximize">Maximize</span>,
+  Minimize2: () => <span data-testid="icon-minimize">Minimize</span>,
+}));
+
+const mockVideoProperties = (video: HTMLVideoElement) => {
+  const state = {
+    muted: false,
+    volume: 1,
+    currentTime: 0,
+  };
+
+  Object.defineProperty(video, 'muted', {
+    get: () => state.muted,
+    set: (val) => {
+      state.muted = val;
+    },
+    configurable: true,
+  });
+
+  Object.defineProperty(video, 'volume', {
+    get: () => state.volume,
+    set: (val) => {
+      state.volume = val;
+    },
+    configurable: true,
+  });
+
+  Object.defineProperty(video, 'currentTime', {
+    get: () => state.currentTime,
+    set: (val) => {
+      state.currentTime = val;
+    },
+    configurable: true,
+  });
+
+  return state;
+};
+
+describe('NetflixStylePlayer', () => {
+  let requestFullscreenMock: jest.Mock;
+  let exitFullscreenMock: jest.Mock;
+
+  beforeEach(() => {
+    // Mock HTMLMediaElement play and pause
+    window.HTMLMediaElement.prototype.play = jest
+      .fn()
+      .mockImplementation(function (this: HTMLVideoElement) {
+        const playEvent = new Event('play');
+        this.dispatchEvent(playEvent);
+        return Promise.resolve();
+      });
+
+    window.HTMLMediaElement.prototype.pause = jest
+      .fn()
+      .mockImplementation(function (this: HTMLVideoElement) {
+        const pauseEvent = new Event('pause');
+        this.dispatchEvent(pauseEvent);
+      });
+
+    requestFullscreenMock = jest.fn();
+    exitFullscreenMock = jest.fn();
+
+    HTMLElement.prototype.requestFullscreen = requestFullscreenMock;
+    document.exitFullscreen = exitFullscreenMock;
+
+    Object.defineProperty(document, 'fullscreenElement', {
+      value: null,
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('converts video source using convertFileSrc for Tauri support', () => {
+    render(
+      <NetflixStylePlayer
+        videoSrc="local-path/video.mp4"
+        title="Test"
+        description="Desc"
+      />,
+    );
+    const video = document.querySelector('video') as HTMLVideoElement;
+    expect(video).toBeInTheDocument();
+    expect(video.src).toBe('tauri-converted://local-path/video.mp4');
+  });
+
+  test('updates isFullscreen state on fullscreenchange event', () => {
+    const { container } = render(
+      <NetflixStylePlayer
+        videoSrc="test-video.mp4"
+        title="Test"
+        description="Desc"
+      />,
+    );
+
+    expect(screen.queryByTestId('icon-minimize')).not.toBeInTheDocument();
+    expect(screen.getByTestId('icon-maximize')).toBeInTheDocument();
+
+    Object.defineProperty(document, 'fullscreenElement', {
+      value: container.firstChild,
+      writable: true,
+      configurable: true,
+    });
+
+    act(() => {
+      document.dispatchEvent(new Event('fullscreenchange'));
+    });
+
+    expect(screen.getByTestId('icon-minimize')).toBeInTheDocument();
+    expect(screen.queryByTestId('icon-maximize')).not.toBeInTheDocument();
+
+    Object.defineProperty(document, 'fullscreenElement', {
+      value: null,
+      writable: true,
+      configurable: true,
+    });
+
+    act(() => {
+      document.dispatchEvent(new Event('fullscreenchange'));
+    });
+
+    expect(screen.queryByTestId('icon-minimize')).not.toBeInTheDocument();
+    expect(screen.getByTestId('icon-maximize')).toBeInTheDocument();
+  });
+
+  test('renders 0:00 before video metadata is loaded and updates on loadedmetadata', () => {
+    render(
+      <NetflixStylePlayer
+        videoSrc="video.mp4"
+        title="Test"
+        description="Desc"
+      />,
+    );
+
+    expect(screen.getByText('0:00 / 0:00')).toBeInTheDocument();
+
+    const video = document.querySelector('video') as HTMLVideoElement;
+
+    Object.defineProperty(video, 'duration', {
+      configurable: true,
+      value: 125,
+    });
+
+    act(() => {
+      fireEvent(video, new Event('loadedmetadata'));
+    });
+
+    expect(screen.getByText('0:00 / 2:05')).toBeInTheDocument();
+  });
+
+  test('volume slider updates volume and unmutes video', () => {
+    render(
+      <NetflixStylePlayer
+        videoSrc="video.mp4"
+        title="Test"
+        description="Desc"
+      />,
+    );
+    const video = document.querySelector('video') as HTMLVideoElement;
+
+    const videoMockState = mockVideoProperties(video);
+
+    const muteBtn = screen.getByTestId('icon-volume').closest('button');
+    expect(muteBtn).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(muteBtn!);
+    });
+
+    expect(videoMockState.muted).toBe(true);
+    expect(screen.getByTestId('icon-mute')).toBeInTheDocument();
+
+    const slider = screen.getByTestId('volume-slider');
+    act(() => {
+      fireEvent.change(slider, { target: { value: '0.5' } });
+    });
+
+    expect(videoMockState.volume).toBe(0.5);
+    expect(videoMockState.muted).toBe(false);
+    expect(screen.getByTestId('icon-volume')).toBeInTheDocument();
+  });
+
+  test('play/pause button updates when video ends', () => {
+    render(
+      <NetflixStylePlayer
+        videoSrc="video.mp4"
+        title="Test"
+        description="Desc"
+      />,
+    );
+
+    const playBtn = screen.getByTestId('icon-play').closest('button');
+    expect(playBtn).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(playBtn!);
+    });
+
+    expect(screen.getByTestId('icon-pause')).toBeInTheDocument();
+
+    const video = document.querySelector('video') as HTMLVideoElement;
+
+    act(() => {
+      fireEvent(video, new Event('ended'));
+    });
+
+    expect(screen.getByTestId('icon-play')).toBeInTheDocument();
+  });
+
+  test('handles keyboard shortcuts for play/pause, seek, mute, and fullscreen', () => {
+    render(
+      <NetflixStylePlayer
+        videoSrc="video.mp4"
+        title="Test"
+        description="Desc"
+      />,
+    );
+
+    const video = document.querySelector('video') as HTMLVideoElement;
+
+    const videoMockState = mockVideoProperties(video);
+    Object.defineProperty(video, 'duration', {
+      value: 120,
+      writable: true,
+      configurable: true,
+    });
+
+    expect(screen.getByTestId('icon-play')).toBeInTheDocument();
+    act(() => {
+      fireEvent.keyDown(document, { key: ' ' });
+    });
+    expect(screen.getByTestId('icon-pause')).toBeInTheDocument();
+
+    expect(screen.queryByTestId('icon-mute')).not.toBeInTheDocument();
+    act(() => {
+      fireEvent.keyDown(document, { key: 'm' });
+    });
+    expect(videoMockState.muted).toBe(true);
+    expect(screen.getByTestId('icon-mute')).toBeInTheDocument();
+
+    expect(videoMockState.currentTime).toBe(0);
+    act(() => {
+      fireEvent.keyDown(document, { key: 'ArrowRight' });
+    });
+    expect(videoMockState.currentTime).toBe(10);
+
+    act(() => {
+      fireEvent.keyDown(document, { key: 'ArrowLeft' });
+    });
+    expect(videoMockState.currentTime).toBe(0);
+
+    expect(requestFullscreenMock).not.toHaveBeenCalled();
+    act(() => {
+      fireEvent.keyDown(document, { key: 'f' });
+    });
+    expect(requestFullscreenMock).toHaveBeenCalled();
+
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    input.focus();
+
+    try {
+      act(() => {
+        fireEvent.keyDown(input, { key: ' ' });
+      });
+      expect(screen.getByTestId('icon-pause')).toBeInTheDocument();
+    } finally {
+      document.body.removeChild(input);
+    }
+  });
+
+  describe('Tauri CSP Policy Configuration', () => {
+    test('tauri.conf.json whitelists asset: and http://asset.localhost in media-src CSP', () => {
+      const configPath = path.resolve(
+        __dirname,
+        '../../../../src-tauri/tauri.conf.json',
+      );
+      const configRaw = fs.readFileSync(configPath, 'utf8');
+      const config = JSON.parse(configRaw);
+
+      const csp = config.app?.security?.csp;
+      expect(csp).toBeDefined();
+
+      const mediaSrcMatch = csp.match(/media-src\s+([^;]+)/);
+      expect(mediaSrcMatch).toBeTruthy();
+
+      const mediaSrcDirective = mediaSrcMatch[1];
+      expect(mediaSrcDirective).toContain('asset:');
+      expect(mediaSrcDirective).toContain('http://asset.localhost');
+    });
+  });
+});