diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
new file mode 100644
index 0000000..e5b18c7
--- /dev/null
+++ b/resources/views/errors/404.blade.php
@@ -0,0 +1,74 @@
+@extends('layouts.app')
+
+@section('title', 'Page not found | ' . config('app.name'))
+
+@section('content')
+<style>
+    .err-404 {
+        max-width: 560px;
+        margin: 80px auto;
+        padding: 48px 32px;
+        text-align: center;
+    }
+    .err-404-emoji {
+        font-size: 72px;
+        line-height: 1;
+        margin-bottom: 12px;
+    }
+    .err-404 h1 {
+        font-size: 28px;
+        font-weight: 700;
+        margin: 0 0 10px;
+        color: var(--text-primary);
+    }
+    .err-404 p {
+        font-size: 15px;
+        color: var(--text-secondary);
+        margin: 0 0 24px;
+        line-height: 1.6;
+    }
+    .err-404-code {
+        font-size: 11px;
+        letter-spacing: .18em;
+        text-transform: uppercase;
+        color: var(--text-secondary);
+        margin-bottom: 4px;
+    }
+    .err-404-actions {
+        display: flex;
+        gap: 10px;
+        justify-content: center;
+        flex-wrap: wrap;
+        margin-top: 24px;
+    }
+    @media (max-width: 480px) {
+        .err-404 { margin: 32px 12px; padding: 32px 16px; }
+        .err-404-emoji { font-size: 56px; }
+        .err-404 h1 { font-size: 22px; }
+    }
+</style>
+
+<div class="err-404">
+    <div class="err-404-emoji" aria-hidden="true">🎞️</div>
+    <div class="err-404-code">Error 404</div>
+    <h1>Can't find that one</h1>
+    <p>
+        The page or video you were looking for isn't here. It might have
+        been removed, renamed, or the link might have a typo.
+    </p>
+    <div class="err-404-actions">
+        <a href="{{ route('home') }}" class="action-btn action-btn-primary">
+            <i class="bi bi-house-door-fill" aria-hidden="true"></i>
+            <span>Back to Home</span>
+        </a>
+        <a href="{{ route('videos.index') }}" class="action-btn">
+            <i class="bi bi-grid-fill" aria-hidden="true"></i>
+            <span>Browse Videos</span>
+        </a>
+        <a href="{{ route('videos.shorts') }}" class="action-btn">
+            <i class="bi bi-lightning-charge-fill" aria-hidden="true"></i>
+            <span>Watch Shorts</span>
+        </a>
+    </div>
+</div>
+@endsection