diff --git a/src/pages/404.css b/src/pages/404.css
new file mode 100644
index 00000000..152e833c
--- /dev/null
+++ b/src/pages/404.css
@@ -0,0 +1,40 @@
+.not-found-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    text-align: center;
+    background-color: #f8f8f8;
+    color: #333;
+  }
+  
+  .not-found-content h1 {
+    font-size: 6rem;
+    margin-bottom: 0.5rem;
+    color: #ff6b6b;
+  }
+  
+  .not-found-content h2 {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+  }
+  
+  .not-found-content p {
+    font-size: 1.2rem;
+    margin-bottom: 1.5rem;
+  }
+  
+  .home-button {
+    padding: 10px 20px;
+    font-size: 1rem;
+    color: #fff;
+    background-color: #0073e6;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+  }
+  
+  .home-button:hover {
+    background-color: #005bb5;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/404.jsx b/src/pages/404.jsx
index d6d53513..69ad0e2e 100644
--- a/src/pages/404.jsx
+++ b/src/pages/404.jsx
@@ -1,12 +1,25 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import SEO from '../components/seo';
+import './404.css';
 
 const NotFoundPage = () => (
-  <div>
-    <SEO title="404: Not found" />
-    <h1>NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-  </div>
+  <div className="not-found-container">
+    <SEO 
+      title="Page Not Found - Error 404"
+      description="This page could not be found. Return to the homepage to continue exploring our site."
+      meta={[
+        { name: 'robots', content: 'noindex, follow' }
+      ]}
+    />
+    
+    <div className="not-found-content">
+      <h1>404</h1>
+      <h2>Oops! This page doesn't exist.</h2>
+      <p>The page you are looking for seems to be missing.</p>
+      <Link to="/" className="home-button">Return to Homepage</Link>
+    </div>
+</div>
 );
 
 export default NotFoundPage;