diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 1268678..43a3ebd 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -119,24 +119,45 @@ export default function VideoPage() {
   }
 
   return (
-    <div className="min-h-screen bg-bunny-dark">
-      {/* Header */}
-      <header className="bg-bunny-gray/50 border-b border-gray-700 p-4">
-        <div className="max-w-7xl mx-auto flex items-center justify-between">
-          <div className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-bunny-blue rounded-full flex items-center justify-center">
-              <div className="w-0 h-0 border-l-[6px] border-l-white border-y-[4px] border-y-transparent ml-1"></div>
+    <div className="min-h-screen bunny-dark floating-triangles">
+      {/* Header with triangle design */}
+      <div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
+        {/* Triangle decorations in header - same as home page */}
+        <div className="absolute top-2 right-20 w-0 h-0 border-l-[35px] border-l-transparent border-r-[35px] border-r-transparent border-b-[50px] border-b-blue-400/15 rotate-12"></div>
+        <div className="absolute top-3 left-1/3 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-purple-400/12 -rotate-6"></div>
+        <div className="absolute top-1 right-1/2 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[30px] border-b-cyan-400/10 rotate-45"></div>
+        
+        <div className="triangle-decoration-2 opacity-30" style={{top: '10px', right: '15%'}}></div>
+        <div className="triangle-decoration-3 opacity-20" style={{top: '30px', left: '70%'}}></div>
+        
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="flex items-center justify-between h-20">
+            <div className="flex items-center space-x-4">
+              <a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
+                <div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
+                  <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
+                </div>
+                <h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
+              </a>
+            </div>
+            
+            <div className="hidden md:flex items-center space-x-6">
+              <nav className="flex space-x-6">
+                <a href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
+                  Home
+                </a>
+              </nav>
+              
+              <Button
+                onClick={() => window.history.back()}
+                className="bg-white/10 hover:bg-white/20 text-white border border-white/20 backdrop-blur-sm transition-all duration-200"
+              >
+                ← Back
+              </Button>
             </div>
-            <h1 className="text-xl font-bold text-bunny-light">go4.video</h1>
           </div>
-          <Button
-            onClick={() => window.history.back()}
-            className="bg-gray-700 hover:bg-gray-600 text-white"
-          >
-            ← Back
-          </Button>
         </div>
-      </header>
+      </div>
 
       <div className="max-w-7xl mx-auto p-4 lg:p-6">
         <div className="flex flex-col lg:flex-row gap-6">
@@ -282,6 +303,32 @@ export default function VideoPage() {
           </div>
         </div>
       </div>
+      
+      {/* Footer - same as home page */}
+      <footer className="bunny-gray/50 border-t border-white/10 mt-16 relative overflow-hidden">
+        {/* Triangle decorations in footer */}
+        <div className="absolute bottom-2 left-10 w-0 h-0 border-l-[30px] border-l-transparent border-r-[30px] border-r-transparent border-b-[40px] border-b-purple-400/8 rotate-12"></div>
+        <div className="absolute bottom-1 right-1/4 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[30px] border-b-blue-400/6 -rotate-12"></div>
+        <div className="absolute bottom-3 left-1/2 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-cyan-400/7 rotate-45"></div>
+        
+        <div className="triangle-decoration-1 opacity-20" style={{bottom: '10px', right: '20%'}}></div>
+        <div className="triangle-decoration-3 opacity-15" style={{bottom: '20px', left: '15%'}}></div>
+        
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10">
+          <div className="flex flex-col md:flex-row items-center justify-between">
+            <div className="flex items-center space-x-2 mb-4 md:mb-0">
+              <div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center shadow-md">
+                <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-0.5"></div>
+              </div>
+              <span className="text-lg font-semibold text-white">go4.video</span>
+            </div>
+            
+            <div className="text-sm text-bunny-muted">
+              © 2024 go4.video. All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }
\ No newline at end of file
diff --git a/client/src/pages/not-found.tsx b/client/src/pages/not-found.tsx
index dba9f83..427dbb5 100644
--- a/client/src/pages/not-found.tsx
+++ b/client/src/pages/not-found.tsx
@@ -1,21 +1,88 @@
 import { Card, CardContent } from "@/components/ui/card";
 import { AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 export default function NotFound() {
   return (
-    <div className="min-h-screen w-full flex items-center justify-center bg-gray-50">
-      <Card className="w-full max-w-md mx-4">
-        <CardContent className="pt-6">
-          <div className="flex mb-4 gap-2">
-            <AlertCircle className="h-8 w-8 text-red-500" />
-            <h1 className="text-2xl font-bold text-gray-900">404 Page Not Found</h1>
+    <div className="min-h-screen bunny-dark floating-triangles">
+      {/* Header - same as other pages */}
+      <div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
+        {/* Triangle decorations in header */}
+        <div className="absolute top-2 right-20 w-0 h-0 border-l-[35px] border-l-transparent border-r-[35px] border-r-transparent border-b-[50px] border-b-blue-400/15 rotate-12"></div>
+        <div className="absolute top-3 left-1/3 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-purple-400/12 -rotate-6"></div>
+        <div className="absolute top-1 right-1/2 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[30px] border-b-cyan-400/10 rotate-45"></div>
+        
+        <div className="triangle-decoration-2 opacity-30" style={{top: '10px', right: '15%'}}></div>
+        <div className="triangle-decoration-3 opacity-20" style={{top: '30px', left: '70%'}}></div>
+        
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="flex items-center justify-between h-20">
+            <div className="flex items-center space-x-4">
+              <a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
+                <div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
+                  <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
+                </div>
+                <h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
+              </a>
+            </div>
+            
+            <div className="hidden md:flex items-center space-x-6">
+              <nav className="flex space-x-6">
+                <a href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
+                  Home
+                </a>
+              </nav>
+            </div>
           </div>
+        </div>
+      </div>
 
-          <p className="mt-4 text-sm text-gray-600">
-            Did you forget to add the page to the router?
-          </p>
-        </CardContent>
-      </Card>
+      {/* 404 Content */}
+      <div className="flex items-center justify-center min-h-[60vh] px-4">
+        <Card className="w-full max-w-md mx-4 bg-bunny-gray/50 border-white/20">
+          <CardContent className="pt-6">
+            <div className="flex flex-col items-center text-center space-y-4">
+              <AlertCircle className="h-16 w-16 text-red-400" />
+              <h1 className="text-2xl font-bold text-white">404 Page Not Found</h1>
+              <p className="text-bunny-muted">
+                The page you're looking for doesn't exist or has been moved.
+              </p>
+              <Button
+                onClick={() => window.location.href = '/'}
+                className="gradient-primary hover:opacity-90 text-white"
+              >
+                Back to Home
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Footer - same as other pages */}
+      <footer className="bunny-gray/50 border-t border-white/10 mt-16 relative overflow-hidden">
+        {/* Triangle decorations in footer */}
+        <div className="absolute bottom-2 left-10 w-0 h-0 border-l-[30px] border-l-transparent border-r-[30px] border-r-transparent border-b-[40px] border-b-purple-400/8 rotate-12"></div>
+        <div className="absolute bottom-1 right-1/4 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[30px] border-b-blue-400/6 -rotate-12"></div>
+        <div className="absolute bottom-3 left-1/2 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-cyan-400/7 rotate-45"></div>
+        
+        <div className="triangle-decoration-1 opacity-20" style={{bottom: '10px', right: '20%'}}></div>
+        <div className="triangle-decoration-3 opacity-15" style={{bottom: '20px', left: '15%'}}></div>
+        
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10">
+          <div className="flex flex-col md:flex-row items-center justify-between">
+            <div className="flex items-center space-x-2 mb-4 md:mb-0">
+              <div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center shadow-md">
+                <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-0.5"></div>
+              </div>
+              <span className="text-lg font-semibold text-white">go4.video</span>
+            </div>
+            
+            <div className="text-sm text-bunny-muted">
+              © 2024 go4.video. All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }