diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx
index 51b55f5..5616de8 100644
--- a/src/app/[locale]/not-found.tsx
+++ b/src/app/[locale]/not-found.tsx
@@ -16,13 +16,16 @@ export const metadata: Metadata = {
   description: "Discover our bestselling natural oils for hair and skin care.",
 };
 
-interface NotFoundPageProps {
-  params: Promise<{ locale: string }>;
-}
-
-export default async function NotFoundPage({ params }: NotFoundPageProps) {
-  const { locale } = await params;
-  const validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;
+export default async function NotFoundPage() {
+  // Get locale from URL path
+  const headersList = await headers();
+  const pathname = headersList.get("x-invoke-path") || headersList.get("x-matched-path") || "/";
+  
+  // Extract locale from path (e.g., /en/products → en, /sr/products → sr)
+  const pathSegments = pathname.split("/").filter(Boolean);
+  const potentialLocale = pathSegments[0];
+  const validLocale = isValidLocale(potentialLocale) ? potentialLocale : DEFAULT_LOCALE;
+  
   const t = await getTranslations({ locale: validLocale, namespace: "NotFound" });
   const productReviewT = await getTranslations({ locale: validLocale, namespace: "ProductReviews" });
   
@@ -49,7 +52,6 @@ export default async function NotFoundPage({ params }: NotFoundPageProps) {
   }>;
 
   // Track 404 page view via OpenPanel (client-side will handle this)
-  const headersList = await headers();
   const referer = headersList.get("referer") || "";
 
   return (
@@ -189,7 +191,7 @@ export default async function NotFoundPage({ params }: NotFoundPageProps) {
               <div
                 key={review.id}
                 className="bg-white rounded-lg p-6 shadow-sm opacity-0 translate-y-5"
-                style={{ animation: `fadeInUp 0.6s ease-out ${index * 0.1}s forwards` }}
+                style={{ animation: `fadeInUp 0.6s ease-out ${index * 100}ms forwards` }}
               >
                 <div className="flex gap-1 mb-4">
                   {[...Array(5)].map((_, i) => (
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..5616de8
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,279 @@
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { getProducts, getProductImage, getProductPrice } from "@/lib/saleor";
+import { getSaleorLocale, isValidLocale, DEFAULT_LOCALE } from "@/lib/i18n/locales";
+import type { Locale } from "@/lib/i18n/locales";
+import type { Product } from "@/types/saleor";
+import Link from "next/link";
+import Image from "next/image";
+import { Star, ArrowRight } from "lucide-react";
+import TrustBadges from "@/components/home/TrustBadges";
+import UrgencyMessages from "@/components/404/UrgencyMessages";
+import { headers } from "next/headers";
+
+export const metadata: Metadata = {
+  title: "Page Not Found | ManoonOils",
+  description: "Discover our bestselling natural oils for hair and skin care.",
+};
+
+export default async function NotFoundPage() {
+  // Get locale from URL path
+  const headersList = await headers();
+  const pathname = headersList.get("x-invoke-path") || headersList.get("x-matched-path") || "/";
+  
+  // Extract locale from path (e.g., /en/products → en, /sr/products → sr)
+  const pathSegments = pathname.split("/").filter(Boolean);
+  const potentialLocale = pathSegments[0];
+  const validLocale = isValidLocale(potentialLocale) ? potentialLocale : DEFAULT_LOCALE;
+  
+  const t = await getTranslations({ locale: validLocale, namespace: "NotFound" });
+  const productReviewT = await getTranslations({ locale: validLocale, namespace: "ProductReviews" });
+  
+  const saleorLocale = getSaleorLocale(validLocale as Locale);
+  
+  // Fetch products
+  let products: Product[] = [];
+  try {
+    products = await getProducts(saleorLocale);
+  } catch (error) {
+    console.error("Error fetching products for 404 page:", error);
+  }
+  
+  // Get first 4 products as bestsellers
+  const bestsellers = products.slice(0, 4);
+  
+  // Get product reviews for rotation
+  const productReviews = productReviewT.raw("reviews") as Array<{
+    id: number;
+    name: string;
+    location: string;
+    text: string;
+    rating: number;
+  }>;
+
+  // Track 404 page view via OpenPanel (client-side will handle this)
+  const referer = headersList.get("referer") || "";
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Hero Section */}
+      <section className="pt-24 pb-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-50 to-white">
+        <div className="max-w-4xl mx-auto text-center">
+          <div
+            className="opacity-0 translate-y-5 animate-[fadeInUp_0.6s_ease-out_forwards]"
+          >
+            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-serif italic text-[#1A1A1A] mb-4 leading-tight">
+              {t("title")}
+            </h1>
+            <p className="text-xl sm:text-2xl text-[#666666] mb-8 font-light">
+              {t("subtitle")}
+            </p>
+            
+            <Link
+              href={`/${validLocale}/products`}
+              className="inline-flex items-center gap-2 px-8 py-4 bg-[#1A1A1A] text-white text-sm uppercase tracking-[0.15em] font-medium hover:bg-[#333333] transition-colors duration-300"
+            >
+              {t("shopBestsellers")}
+              <ArrowRight className="w-4 h-4" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Trust Badges */}
+      <TrustBadges />
+
+      {/* Urgency Messages */}
+      <UrgencyMessages />
+
+      {/* Bestsellers Section */}
+      <section className="py-16 sm:py-20 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto">
+          <div
+            className="text-center mb-12 opacity-0 translate-y-5"
+            style={{ animation: "fadeInUp 0.6s ease-out forwards" }}
+          >
+            <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
+              Popular
+            </span>
+            <h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight">
+              {t("bestsellersTitle")}
+            </h2>
+          </div>
+
+          {bestsellers.length > 0 ? (
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
+              {bestsellers.map((product, index) => {
+                const image = getProductImage(product);
+                const price = getProductPrice(product);
+                const isAvailable = product.variants?.[0]?.quantityAvailable > 0;
+
+                return (
+                  <div
+                    key={product.id}
+                    className="group opacity-0 translate-y-5"
+                    style={{ 
+                      animation: `fadeInUp 0.5s ease-out ${index * 100}ms forwards` 
+                    }}
+                  >
+                    <Link href={`/${validLocale}/products/${product.slug}`} className="block">
+                      <div className="relative w-full aspect-square bg-[#f8f9fa] overflow-hidden mb-4">
+                        {image ? (
+                          <Image
+                            src={image}
+                            alt={product.name}
+                            fill
+                            className="object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
+                            sizes="(max-width: 768px) 50vw, 25vw"
+                          />
+                        ) : (
+                          <div className="absolute inset-0 flex items-center justify-center text-[#999999]">
+                            <span className="text-sm">No Image</span>
+                          </div>
+                        )}
+
+                        {!isAvailable && (
+                          <div className="absolute inset-0 bg-white/80 flex items-center justify-center">
+                            <span className="text-sm uppercase tracking-[0.1em] text-[#666666]">
+                              Out of Stock
+                            </span>
+                          </div>
+                        )}
+
+                        <div className="absolute inset-x-0 bottom-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
+                          <button
+                            className="w-full py-3 bg-black text-white text-xs uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors"
+                            onClick={(e) => e.preventDefault()}
+                          >
+                            Quick Add
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="text-center">
+                        <h3 className="text-[15px] font-medium text-[#1a1a1a] mb-1 group-hover:text-[#666666] transition-colors line-clamp-1">
+                          {product.name}
+                        </h3>
+                        <p className="text-[14px] text-[#666666]">
+                          {price || "Contact for price"}
+                        </p>
+                      </div>
+                    </Link>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <p className="text-[#666666]">No products available at the moment.</p>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* Testimonials Section */}
+      <section className="py-16 sm:py-20 px-4 sm:px-6 lg:px-8 bg-[#F0F7FA]">
+        <div className="max-w-7xl mx-auto">
+          <div 
+            className="text-center mb-12 opacity-0 translate-y-5"
+            style={{ animation: "fadeInUp 0.6s ease-out forwards" }}
+          >
+            <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
+              Testimonials
+            </span>
+            <h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight">
+              {t("testimonialsTitle")}
+            </h2>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {productReviews.slice(0, 6).map((review, index) => (
+              <div
+                key={review.id}
+                className="bg-white rounded-lg p-6 shadow-sm opacity-0 translate-y-5"
+                style={{ animation: `fadeInUp 0.6s ease-out ${index * 100}ms forwards` }}
+              >
+                <div className="flex gap-1 mb-4">
+                  {[...Array(5)].map((_, i) => (
+                    <Star
+                      key={i}
+                      className={`w-4 h-4 ${
+                        i < review.rating
+                          ? "fill-amber-400 text-amber-400"
+                          : "fill-gray-200 text-gray-200"
+                      }`}
+                    />
+                  ))}
+                </div>
+                <p className="text-[#1A1A1A] mb-4 text-sm leading-relaxed">
+                  &ldquo;{review.text}&rdquo;
+                </p>
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#c9a962] to-[#e8967a] flex items-center justify-center text-white font-medium text-sm">
+                    {review.name.charAt(0)}
+                  </div>
+                  <div>
+                    <p className="font-medium text-[#1A1A1A] text-sm">{review.name}</p>
+                    <p className="text-xs text-[#6B7280]">{review.location}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Final CTA Section */}
+      <section className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-4xl mx-auto text-center">
+          <div
+            className="opacity-0 translate-y-5"
+            style={{ animation: "fadeInUp 0.6s ease-out forwards" }}
+          >
+            <h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] mb-4 tracking-tight">
+              {t("finalCTATitle")}
+            </h2>
+            <p className="text-lg sm:text-xl text-[#666666] mb-8 font-light">
+              {t("finalCTASubtitle")}
+            </p>
+            
+            <Link
+              href={`/${validLocale}/products`}
+              className="inline-flex items-center gap-2 px-10 py-4 bg-[#1A1A1A] text-white text-sm uppercase tracking-[0.15em] font-medium hover:bg-[#333333] transition-colors duration-300"
+            >
+              {t("viewAllProducts")}
+              <ArrowRight className="w-4 h-4" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* OpenPanel Tracking Script */}
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+            if (typeof window !== 'undefined' && window.op) {
+              window.op('track', '404_page_view', {
+                url: window.location.pathname,
+                referrer: '${referer}'
+              });
+            }
+          `,
+        }}
+      />
+
+      <style jsx global>{`
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `}</style>
+    </div>
+  );
+}