diff --git a/package-lock.json b/package-lock.json
index 9b9ae4b5..c08bdc9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "lucide-react": "^0.552.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
-        "react-router-dom": "^7.9.5",
+        "react-router-dom": "^7.11.0",
         "tailwindcss": "^4.1.16"
       },
       "devDependencies": {
@@ -2293,12 +2293,16 @@
       "license": "MIT"
     },
     "node_modules/cookie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/cross-spawn": {
@@ -2920,9 +2924,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3582,9 +3586,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.5.tgz",
-      "integrity": "sha512-JmxqrnBZ6E9hWmf02jzNn9Jm3UqyeimyiwzD69NjxGySG6lIz/1LVPsoTCwN7NBX2XjCEa1LIX5EMz1j2b6u6A==",
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.11.0.tgz",
+      "integrity": "sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -3604,12 +3608,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.5.tgz",
-      "integrity": "sha512-mkEmq/K8tKN63Ae2M7Xgz3c9l9YNbY+NHH6NNeUmLA3kDkhKXRsNb/ZpxaEunvGo2/3YXdk5EJU3Hxp3ocaBPw==",
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.11.0.tgz",
+      "integrity": "sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.9.5"
+        "react-router": "7.11.0"
       },
       "engines": {
         "node": ">=20.0.0"
diff --git a/package.json b/package.json
index 8e30fcd7..210f0bca 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "lucide-react": "^0.552.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router-dom": "^7.9.5",
+    "react-router-dom": "^7.11.0",
     "tailwindcss": "^4.1.16"
   },
   "devDependencies": {
diff --git a/src/App.tsx b/src/App.tsx
index 4b1419ad..a2fc4051 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { Routes, Route } from 'react-router'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import Home from './pages/Home.tsx'
 import CreatePostPage from './pages/CreatePostPage.tsx'
 import Navbar from './components/Navbar.tsx'
@@ -8,6 +8,7 @@ import CreateCommunityPage from './pages/CreateCommunityPage.tsx'
 import {CommunityPage} from './pages/CommunityPage.tsx'
 import { CommunitiesPage } from './pages/CommunitiesPage.tsx'
 import MessagesPage from './pages/MessagesPage.tsx'
+import NotFound from './components/NotFound.tsx'  // Import the 404 page
 import EventsPage from './pages/EventsPage.tsx'
 import EventDetailPage from './pages/EventDetailPage.tsx'
 import CreateEventPage from './pages/CreateEventPage.tsx'
@@ -21,6 +22,26 @@ import ProfilePage from './pages/ProfilePage.tsx'
 
 function App() {
   return (
+    <>
+      <div>
+        <Router>  {/* Wrap everything with Router */}
+          <Navbar />
+          <div>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/create" element={<CreatePostPage />} />
+              <Route path="/post/:id" element={<PostPage />} />
+              <Route path="/communities/create" element={<CreateCommunityPage />} />
+              <Route path="/communities" element={<CommunitiesPage />} />
+              <Route path="/communities/:id" element={<CommunityPage />} />
+              <Route path="/messages" element={<MessagesPage />} />
+              {/* Add 404 route at the end - catches all undefined routes */}
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </div>
+        </Router>
+      </div>
+    </>
     <div className="min-h-screen flex flex-col bg-[var(--bg-primary)] text-[var(--text-primary)] transition-colors">
       <Navbar />
       <main className="flex-1">
@@ -54,4 +75,4 @@ function App() {
   )
 }
 
-export default App
+export default App
\ No newline at end of file
diff --git a/src/components/CommunityDisplay.tsx b/src/components/CommunityDisplay.tsx
index c25e57b1..ec79e739 100644
--- a/src/components/CommunityDisplay.tsx
+++ b/src/components/CommunityDisplay.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import PostItem from "./PostItem";
+import PostSkeleton from "./PostSkeleton"; // Import the skeleton component
 import { fetchCommunityPost } from "../utils/communityApi";
 
 interface Props {
@@ -27,8 +28,25 @@ const CommunityDisplay = ({ communityId }: Props) => {
     queryFn: () => fetchCommunityPost(communityId),
   });
 
-  if (isLoading)
-    return <div className="text-center py-4">Loading posts...</div>;
+  // Skeleton loading state
+  if (isLoading) {
+    return (
+      <div>
+        {/* Skeleton header */}
+        <div className="mb-10 text-center justify-center animate-pulse">
+          <div className="h-10 bg-cyan-900/30 rounded w-48 mx-auto mb-2"></div>
+          <div className="h-4 bg-slate-700/30 rounded w-40 mx-auto"></div>
+        </div>
+
+        {/* Skeleton posts */}
+        <div className="mx-auto flex flex-col gap-6">
+          {[...Array(3)].map((_, index) => (
+            <PostSkeleton key={`skeleton-${index}`} />
+          ))}
+        </div>
+      </div>
+    );
+  }
   
   if (error)
     return (
@@ -52,7 +70,6 @@ const CommunityDisplay = ({ communityId }: Props) => {
       </div>
 
       {data && data.length > 0 ? (
-        
         <div className="mx-auto flex flex-col gap-6">
           {data.map((post) => (
             <PostItem key={post.id} post={post} />
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
new file mode 100644
index 00000000..c34362f2
--- /dev/null
+++ b/src/components/NotFound.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const NotFound = () => {
+  const styles = {
+    container: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      minHeight: '100vh',
+      backgroundColor: '#f5f5f5',
+      padding: '20px',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+    } as React.CSSProperties,
+    content: {
+      textAlign: 'center' as const,
+      backgroundColor: 'white',
+      padding: '40px',
+      borderRadius: '12px',
+      boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
+      maxWidth: '500px',
+      width: '100%'
+    } as React.CSSProperties,
+    title: {
+      fontSize: '6rem',
+      fontWeight: 700,
+      color: '#dc3545',
+      margin: 0,
+      lineHeight: 1
+    } as React.CSSProperties,
+    subtitle: {
+      fontSize: '2rem',
+      fontWeight: 600,
+      color: '#333',
+      margin: '20px 0 10px'
+    } as React.CSSProperties,
+    message: {
+      fontSize: '1.1rem',
+      color: '#666',
+      marginBottom: '30px',
+      lineHeight: '1.5'
+    } as React.CSSProperties,
+    button: {
+      display: 'inline-block',
+      backgroundColor: '#007bff',
+      color: 'white',
+      padding: '12px 30px',
+      borderRadius: '6px',
+      textDecoration: 'none',
+      fontWeight: 500,
+      fontSize: '1rem',
+      transition: 'background-color 0.3s ease'
+    } as React.CSSProperties
+  };
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.content}>
+        <h1 style={styles.title}>404</h1>
+        <h2 style={styles.subtitle}>Page Not Found</h2>
+        <p style={styles.message}>
+          Oops! The page you're looking for doesn't exist or has been moved.
+        </p>
+        <Link to="/" style={styles.button}>
+          Return to Feed
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;
\ No newline at end of file
diff --git a/src/components/PostSkeleton.tsx b/src/components/PostSkeleton.tsx
new file mode 100644
index 00000000..29320131
--- /dev/null
+++ b/src/components/PostSkeleton.tsx
@@ -0,0 +1,44 @@
+// src/components/PostSkeleton.tsx
+import React from 'react';
+
+const PostSkeleton: React.FC = () => {
+  return (
+    <div className="bg-gradient-to-br from-slate-900 to-slate-800 border border-cyan-900/30 rounded-lg p-6 animate-pulse">
+      {/* Header with user info */}
+      <div className="flex items-center mb-4">
+        <div className="w-10 h-10 bg-cyan-900/40 rounded-full"></div>
+        <div className="ml-3 flex-1">
+          <div className="h-4 bg-cyan-800/40 rounded w-1/4 mb-2"></div>
+          <div className="h-3 bg-slate-700/40 rounded w-1/6"></div>
+        </div>
+      </div>
+      
+      {/* Post title */}
+      <div className="h-6 bg-cyan-800/30 rounded w-3/4 mb-3"></div>
+      
+      {/* Post content lines */}
+      <div className="space-y-2 mb-4">
+        <div className="h-4 bg-slate-700/30 rounded w-full"></div>
+        <div className="h-4 bg-slate-700/30 rounded w-5/6"></div>
+        <div className="h-4 bg-slate-700/30 rounded w-4/6"></div>
+      </div>
+      
+      {/* Tags */}
+      <div className="flex gap-2 mb-4">
+        <div className="h-6 bg-cyan-900/30 rounded w-16"></div>
+        <div className="h-6 bg-cyan-900/30 rounded w-20"></div>
+      </div>
+      
+      {/* Action buttons */}
+      <div className="flex justify-between items-center pt-4 border-t border-cyan-900/20">
+        <div className="flex gap-4">
+          <div className="h-8 w-20 bg-cyan-900/30 rounded"></div>
+          <div className="h-8 w-20 bg-cyan-900/30 rounded"></div>
+        </div>
+        <div className="h-6 w-24 bg-slate-700/30 rounded"></div>
+      </div>
+    </div>
+  );
+};
+
+export default PostSkeleton;
\ No newline at end of file