diff --git a/apps/frontend/app/not-found.tsx b/apps/frontend/app/not-found.tsx
new file mode 100644
index 0000000..7cf8b46
--- /dev/null
+++ b/apps/frontend/app/not-found.tsx
@@ -0,0 +1,221 @@
+'use client';
+
+import { useRef } from 'react';
+import Link from 'next/link';
+import { motion, useInView } from 'framer-motion';
+import { Ship, Home, ArrowRight, LayoutDashboard, Anchor } from 'lucide-react';
+import { LandingHeader, LandingFooter } from '@/components/layout';
+
+export default function NotFound() {
+  const heroRef = useRef(null);
+  const isHeroInView = useInView(heroRef, { once: true });
+
+  return (
+    <div className="min-h-screen bg-white flex flex-col">
+      <LandingHeader transparentOnTop={true} />
+
+      {/* Hero Section */}
+      <section
+        ref={heroRef}
+        className="relative flex-1 flex items-center justify-center overflow-hidden"
+      >
+        {/* Background */}
+        <div className="absolute inset-0 bg-gradient-to-br from-brand-navy via-brand-navy/95 to-brand-navy/90">
+          <div className="absolute inset-0 opacity-10">
+            <div className="absolute top-10 left-10 w-72 h-72 lg:w-96 lg:h-96 bg-brand-turquoise rounded-full blur-3xl" />
+            <div className="absolute bottom-32 right-10 w-72 h-72 lg:w-96 lg:h-96 bg-brand-green rounded-full blur-3xl" />
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-brand-turquoise/50 rounded-full blur-3xl" />
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="relative z-10 max-w-4xl mx-auto px-6 text-center pt-32 pb-40">
+          {/* Badge */}
+          <motion.div
+            initial={{ scale: 0.8, opacity: 0 }}
+            animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-10 border border-white/20"
+          >
+            <Anchor className="w-5 h-5 text-brand-turquoise" />
+            <span className="text-white/90 text-sm font-medium font-heading">
+              Erreur 404
+            </span>
+          </motion.div>
+
+          {/* Animated Ship + Waves illustration */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={isHeroInView ? { opacity: 1, scale: 1 } : {}}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            className="relative mb-8 flex justify-center"
+          >
+            <div className="relative w-64 h-40 lg:w-80 lg:h-48">
+              {/* Ship */}
+              <svg
+                viewBox="0 0 200 120"
+                className="absolute inset-0 w-full h-full animate-float"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                {/* Hull */}
+                <path
+                  d="M40 75 L55 95 L145 95 L160 75 Z"
+                  fill="#34CCCD"
+                  opacity="0.9"
+                />
+                {/* Deck */}
+                <rect x="60" y="58" width="80" height="17" rx="2" fill="white" opacity="0.9" />
+                {/* Bridge */}
+                <rect x="85" y="35" width="35" height="23" rx="2" fill="white" opacity="0.85" />
+                {/* Window */}
+                <rect x="92" y="40" width="8" height="6" rx="1" fill="#34CCCD" opacity="0.7" />
+                <rect x="105" y="40" width="8" height="6" rx="1" fill="#34CCCD" opacity="0.7" />
+                {/* Smokestack */}
+                <rect x="95" y="22" width="12" height="13" rx="1" fill="#10183A" opacity="0.8" />
+                <rect x="95" y="22" width="12" height="4" rx="1" fill="#34CCCD" opacity="0.6" />
+                {/* Mast */}
+                <line x1="102" y1="10" x2="102" y2="22" stroke="white" strokeWidth="1.5" opacity="0.7" />
+                {/* Flag */}
+                <path d="M102 10 L115 15 L102 20" fill="#34CCCD" opacity="0.8" />
+                {/* Containers on deck */}
+                <rect x="65" y="60" width="12" height="10" rx="1" fill="#067224" opacity="0.7" />
+                <rect x="79" y="60" width="12" height="10" rx="1" fill="#34CCCD" opacity="0.5" />
+                <rect x="130" y="60" width="12" height="10" rx="1" fill="#067224" opacity="0.5" />
+                <rect x="144" y="60" width="10" height="10" rx="1" fill="white" opacity="0.3" />
+              </svg>
+
+              {/* Waves layer 1 */}
+              <svg
+                viewBox="0 0 400 30"
+                className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[150%] animate-wave"
+                preserveAspectRatio="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0,15 C50,5 100,25 150,15 C200,5 250,25 300,15 C350,5 400,25 400,15 L400,30 L0,30 Z"
+                  fill="#34CCCD"
+                  opacity="0.3"
+                />
+              </svg>
+
+              {/* Waves layer 2 */}
+              <svg
+                viewBox="0 0 400 30"
+                className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-[160%] animate-wave-slow"
+                preserveAspectRatio="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0,18 C60,8 120,28 180,18 C240,8 300,28 360,18 L400,18 L400,30 L0,30 Z"
+                  fill="#34CCCD"
+                  opacity="0.15"
+                />
+              </svg>
+            </div>
+          </motion.div>
+
+          {/* 404 */}
+          <motion.h1
+            initial={{ opacity: 0, y: 30 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.4 }}
+            className="text-8xl lg:text-[12rem] font-bold text-white mb-2 leading-none font-heading tracking-tight"
+          >
+            404
+          </motion.h1>
+
+          {/* Subtitle */}
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.5 }}
+            className="text-3xl lg:text-5xl font-bold mb-6 font-heading"
+          >
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
+              Page introuvable
+            </span>
+          </motion.h2>
+
+          {/* Description */}
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.6 }}
+            className="text-lg lg:text-xl text-white/70 mb-12 max-w-2xl mx-auto leading-relaxed font-body"
+          >
+            Ce navire a pris le large... La page que vous cherchez
+            n&apos;existe pas ou a été déplacée.
+          </motion.p>
+
+          {/* CTA Buttons */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.7 }}
+            className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6"
+          >
+            <Link
+              href="/"
+              className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2 font-heading"
+            >
+              <Home className="w-5 h-5" />
+              <span>Retour à l&apos;accueil</span>
+              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+            </Link>
+
+            <Link
+              href="/dashboard"
+              className="group px-8 py-4 bg-white/10 backdrop-blur-sm text-white border border-white/20 rounded-lg hover:bg-white/20 transition-all hover:shadow-xl font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2 font-heading"
+            >
+              <LayoutDashboard className="w-5 h-5" />
+              <span>Tableau de bord</span>
+            </Link>
+          </motion.div>
+        </div>
+
+        {/* Bottom wave */}
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg
+            className="w-full h-16 lg:h-24"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0,60 C240,90 480,30 720,60 C960,90 1200,30 1440,60 L1440,120 L0,120 Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+      </section>
+
+      <LandingFooter />
+
+      <style jsx global>{`
+        @keyframes float {
+          0%, 100% { transform: translateY(0px) rotate(0deg); }
+          25% { transform: translateY(-6px) rotate(1deg); }
+          75% { transform: translateY(4px) rotate(-1deg); }
+        }
+        @keyframes wave {
+          0% { transform: translateX(-50%) translateX(0); }
+          100% { transform: translateX(-50%) translateX(-50px); }
+        }
+        @keyframes wave-slow {
+          0% { transform: translateX(-50%) translateX(0); }
+          100% { transform: translateX(-50%) translateX(50px); }
+        }
+        .animate-float {
+          animation: float 4s ease-in-out infinite;
+        }
+        .animate-wave {
+          animation: wave 3s ease-in-out infinite alternate;
+        }
+        .animate-wave-slow {
+          animation: wave-slow 4s ease-in-out infinite alternate;
+        }
+      `}</style>
+    </div>
+  );
+}