diff --git a/frontend/application/app/blog/page.tsx b/frontend/application/app/blog/page.tsx
new file mode 100644
index 0000000..8524616
--- /dev/null
+++ b/frontend/application/app/blog/page.tsx
@@ -0,0 +1,5 @@
+import BlogPage from "../../components/BlogPage";
+
+export default function Blog() {
+  return <BlogPage />;
+}
diff --git a/frontend/application/app/checkout/success/[id]/page.tsx b/frontend/application/app/checkout/success/[id]/page.tsx
new file mode 100644
index 0000000..9fd13ce
--- /dev/null
+++ b/frontend/application/app/checkout/success/[id]/page.tsx
@@ -0,0 +1,6 @@
+import OrderSuccess from "../../../../components/OrderSuccess";
+
+export default async function SuccessPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return <OrderSuccess orderId={id} />;
+}
diff --git a/frontend/application/app/track/page.tsx b/frontend/application/app/track/page.tsx
new file mode 100644
index 0000000..3e51db1
--- /dev/null
+++ b/frontend/application/app/track/page.tsx
@@ -0,0 +1,5 @@
+import OrderTracking from "../../components/OrderTracking";
+
+export default function TrackPage() {
+  return <OrderTracking />;
+}
diff --git a/frontend/application/app/videos/page.tsx b/frontend/application/app/videos/page.tsx
new file mode 100644
index 0000000..6e26e5f
--- /dev/null
+++ b/frontend/application/app/videos/page.tsx
@@ -0,0 +1,5 @@
+import VideosPage from "../../components/VideosPage";
+
+export default function Videos() {
+  return <VideosPage />;
+}
diff --git a/frontend/application/components/BlogPage.tsx b/frontend/application/components/BlogPage.tsx
index e4ae4fd..df24d53 100644
--- a/frontend/application/components/BlogPage.tsx
+++ b/frontend/application/components/BlogPage.tsx
@@ -42,7 +42,10 @@ const BLOG_POSTS = [
   }
 ];
 
-export default function BlogPage({ onBack, onProductClick }: { onBack: () => void, onProductClick: (p: Product) => void }) {
+import { useRouter } from 'next/navigation';
+
+export default function BlogPage() {
+  const router = useRouter();
   const [selectedPost, setSelectedPost] = React.useState<typeof BLOG_POSTS[0] | null>(null);
   const [products, setProducts] = React.useState<Product[]>([]);
 
@@ -56,7 +59,7 @@ export default function BlogPage({ onBack, onProductClick }: { onBack: () => voi
         <div className="max-w-7xl mx-auto">
           {/* Breadcrumbs */}
           <div className="flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-10">
-             <span className="cursor-pointer hover:text-canina-blue" onClick={onBack}>خانه</span>
+             <span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>خانه</span>
              <ChevronRight className="w-2.5 h-2.5" />
              <span className="cursor-pointer hover:text-canina-blue" onClick={() => setSelectedPost(null)}>مجله سلامت</span>
              <ChevronRight className="w-2.5 h-2.5" />
@@ -123,7 +126,7 @@ export default function BlogPage({ onBack, onProductClick }: { onBack: () => voi
                       {products.slice(4, 7).map(p => (
                         <div 
                            key={p.id}
-                           onClick={() => onProductClick(p)}
+                           onClick={() => router.push(`/shop/${p.id}`)}
                            className="bg-white/10 border border-white/20 p-4 rounded-3xl flex items-center gap-4 cursor-pointer hover:bg-white/20 transition-all group"
                         >
                            <div className="w-16 h-16 bg-white rounded-2xl p-2 shrink-0 group-hover:scale-110 transition-transform">
@@ -182,7 +185,7 @@ export default function BlogPage({ onBack, onProductClick }: { onBack: () => voi
               </p>
            </div>
            <button 
-             onClick={onBack}
+             onClick={() => router.push('/')}
              className="px-8 py-3 bg-white border border-medical-gray-200 rounded-2xl text-medical-gray-700 shadow-sm flex items-center gap-2 font-black hover:bg-medical-gray-50 transition-all"
            >
              <ChevronRight className="w-5 h-5" />
@@ -316,7 +319,7 @@ export default function BlogPage({ onBack, onProductClick }: { onBack: () => voi
                       تمامی مقالات این وبلاگ بر اساس کاتالوگ‌های رسمی و نتایج آزمایشگاهی کمپانی کانی‌نا آلمان تدوین شده است.
                   </p>
                   <button 
-                    onClick={() => onBack()}
+                    onClick={() => router.push('/shop')}
                     className="bg-white text-canina-blue px-8 py-4 rounded-2xl font-black hover:scale-105 transition-transform"
                   >
                     مشاهده محصولات تخصصی
@@ -326,7 +329,7 @@ export default function BlogPage({ onBack, onProductClick }: { onBack: () => voi
                   {products.slice(0, 2).map((p) => (
                     <div 
                       key={p.id}
-                      onClick={() => onProductClick(p)}
+                      onClick={() => router.push(`/shop/${p.id}`)}
                       className="bg-white/10 border border-white/20 p-6 rounded-3xl cursor-pointer hover:bg-white/20 transition-all text-center group"
                     >
                        <img src={p.image} alt={p.name} className="w-20 h-20 mx-auto mb-4 object-contain filter brightness-0 invert group-hover:scale-110 transition-transform" />
diff --git a/frontend/application/components/OrderSuccess.tsx b/frontend/application/components/OrderSuccess.tsx
index b0680bb..cedbb14 100644
--- a/frontend/application/components/OrderSuccess.tsx
+++ b/frontend/application/components/OrderSuccess.tsx
@@ -13,7 +13,10 @@ import {
 import { useCartStore } from "../store/cartStore";
 import { usePetStore } from "../store/usePetStore";
 
-export default function OrderSuccess({ orderId, onNavigate }: { orderId: string; onNavigate: (v: any) => void }) {
+import { useRouter } from 'next/navigation';
+
+export default function OrderSuccess({ orderId }: { orderId: string }) {
+  const router = useRouter();
   const { orders } = useCartStore();
   const { getActivePet } = usePetStore();
   const order = orders.find(o => o.id === orderId);
@@ -90,13 +93,13 @@ export default function OrderSuccess({ orderId, onNavigate }: { orderId: string;
 
           <div className="space-y-4">
             <button 
-              onClick={() => onNavigate('order-tracking')}
+              onClick={() => router.push('/track')}
               className="w-full bg-medical-gray-900 text-white py-5 rounded-2xl font-black text-lg hover:bg-canina-blue transition-all"
             >
               مشاهده و پیگیری زنده سفارش
             </button>
             <button 
-              onClick={() => onNavigate('shop')}
+              onClick={() => router.push('/shop')}
               className="flex items-center justify-center gap-2 w-full text-medical-gray-400 font-bold hover:text-canina-blue transition-colors"
             >
               <ChevronLeft className="w-4 h-4" />
diff --git a/frontend/application/components/OrderTracking.tsx b/frontend/application/components/OrderTracking.tsx
index 83a3edb..35092ea 100644
--- a/frontend/application/components/OrderTracking.tsx
+++ b/frontend/application/components/OrderTracking.tsx
@@ -14,7 +14,10 @@ import {
 } from "lucide-react";
 import { useCartStore } from "../store/cartStore";
 
-export default function OrderTracking({ onNavigate, onBack }: { onNavigate: (v: any) => void, onBack?: () => void }) {
+import { useRouter } from 'next/navigation';
+
+export default function OrderTracking() {
+  const router = useRouter();
   const { orders } = useCartStore();
   const [searchId, setSearchId] = useState("");
   const [activeOrder, setActiveOrder] = useState(orders[0] || null);
@@ -40,7 +43,7 @@ export default function OrderTracking({ onNavigate, onBack }: { onNavigate: (v:
         {/* Mobile Navigation & Breadcrumbs */}
         <div className="lg:hidden mb-12 space-y-4">
           <button 
-            onClick={onBack || (() => onNavigate('home'))}
+            onClick={() => router.back()}
             className="flex items-center gap-2 text-medical-gray-500 font-bold hover:text-canina-blue transition-colors"
           >
             <ChevronRight className="w-5 h-5 font-vazir" />
@@ -48,7 +51,7 @@ export default function OrderTracking({ onNavigate, onBack }: { onNavigate: (v:
           </button>
           
           <div className="flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest overflow-x-auto whitespace-nowrap pb-2">
-            <span className="cursor-pointer hover:text-canina-blue" onClick={onBack || (() => onNavigate('home'))}>کانینا</span>
+            <span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>کانینا</span>
             <ChevronLeft className="w-2.5 h-2.5" />
             <span className="text-canina-blue">پیگیری سفارش</span>
           </div>
@@ -56,7 +59,7 @@ export default function OrderTracking({ onNavigate, onBack }: { onNavigate: (v:
 
         {/* Desktop Breadcrumbs */}
         <div className="hidden lg:flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-12">
-           <span className="cursor-pointer hover:text-canina-blue" onClick={onBack || (() => onNavigate('home'))}>خانه</span>
+           <span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>خانه</span>
            <ChevronLeft className="w-2.5 h-2.5" />
            <span className="text-canina-blue">رهگیری هوشمند محموله</span>
         </div>
diff --git a/frontend/application/components/VideosPage.tsx b/frontend/application/components/VideosPage.tsx
index febc3d2..082e3e5 100644
--- a/frontend/application/components/VideosPage.tsx
+++ b/frontend/application/components/VideosPage.tsx
@@ -52,7 +52,10 @@ const ALL_VIDEOS = [
   }
 ];
 
-export default function VideosPage({ onBack }: { onBack: () => void }) {
+import { useRouter } from 'next/navigation';
+
+export default function VideosPage() {
+  const router = useRouter();
   const [selectedVideo, setSelectedVideo] = useState<typeof ALL_VIDEOS[0] | null>(null);
   const [search, setSearch] = useState("");
 
@@ -75,7 +78,7 @@ export default function VideosPage({ onBack }: { onBack: () => void }) {
                </h1>
             </div>
             <button 
-              onClick={onBack}
+              onClick={() => router.push('/')}
               className="px-8 py-3 bg-white/5 border border-white/10 rounded-2xl text-white shadow-sm flex items-center gap-2 font-black hover:bg-white/10 transition-all"
             >
               <ChevronRight className="w-5 h-5" />