diff --git a/cshare-app/src/pages/NotFoundPage.jsx b/cshare-app/src/pages/NotFoundPage.jsx
new file mode 100644
index 0000000..91ac07f
--- /dev/null
+++ b/cshare-app/src/pages/NotFoundPage.jsx
@@ -0,0 +1,94 @@
+import { useNavigate } from 'react-router-dom';
+import { FileIcon, UploadIcon } from '../components/Icons';
+
+export default function NotFoundPage() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="page-enter" style={{
+      maxWidth: '560px',
+      margin: '0 auto',
+      padding: '120px 24px 80px',
+      textAlign: 'center',
+    }}>
+      {/* Large 404 */}
+      <div style={{
+        fontFamily: 'var(--font-heading)',
+        fontWeight: 800,
+        fontSize: 'clamp(6rem, 15vw, 10rem)',
+        lineHeight: 1,
+        letterSpacing: '-0.05em',
+        background: 'linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 50%, var(--success) 100%)',
+        WebkitBackgroundClip: 'text',
+        WebkitTextFillColor: 'transparent',
+        backgroundClip: 'text',
+        marginBottom: '16px',
+        animation: 'fadeInUp 0.5s ease both',
+      }}>
+        404
+      </div>
+
+      {/* Glitch line */}
+      <div style={{
+        width: '60px', height: '3px', margin: '0 auto 32px',
+        background: 'linear-gradient(90deg, var(--accent), var(--accent-hover))',
+        borderRadius: '2px',
+        animation: 'fadeInUp 0.5s 0.1s ease both',
+      }} />
+
+      <h1 className="heading-md" style={{
+        marginBottom: '12px',
+        animation: 'fadeInUp 0.5s 0.15s ease both',
+      }}>
+        This file wasn't found
+      </h1>
+
+      <p style={{
+        color: 'var(--text-secondary)',
+        fontSize: '1rem',
+        lineHeight: 1.6,
+        marginBottom: '40px',
+        maxWidth: '400px',
+        margin: '0 auto 40px',
+        animation: 'fadeInUp 0.5s 0.2s ease both',
+      }}>
+        The link may have expired, the file was removed, or this page never existed. Either way, there's nothing here.
+      </p>
+
+      <div style={{
+        display: 'flex', gap: '12px', justifyContent: 'center',
+        animation: 'fadeInUp 0.5s 0.25s ease both',
+      }}>
+        <button className="btn btn-primary btn-lg" onClick={() => navigate('/upload')}>
+          <UploadIcon size={18} />
+          Upload a File
+        </button>
+        <button className="btn btn-secondary btn-lg" onClick={() => navigate('/')}>
+          Go Home
+        </button>
+      </div>
+
+      {/* Decorative file icons */}
+      <div style={{ marginTop: '64px', opacity: 0.15, position: 'relative', height: '80px' }}>
+        <div style={{
+          position: 'absolute', left: '20%', top: '10px',
+          animation: 'float 4s ease-in-out infinite',
+        }}>
+          <FileIcon size={32} />
+        </div>
+        <div style={{
+          position: 'absolute', left: '45%', top: '0',
+          animation: 'float 5s ease-in-out 0.5s infinite',
+        }}>
+          <FileIcon size={24} />
+        </div>
+        <div style={{
+          position: 'absolute', right: '20%', top: '15px',
+          animation: 'float 4.5s ease-in-out 1s infinite',
+        }}>
+          <FileIcon size={28} />
+        </div>
+      </div>
+    </div>
+  );
+}