diff --git a/app/src/Server.js b/app/src/Server.js
index 53d50560..310197ba 100644
--- a/app/src/Server.js
+++ b/app/src/Server.js
@@ -305,7 +305,7 @@ const s3Client = new S3Client({
 // html views
 const views = {
     html: path.join(__dirname, '../../public/views'),
-    about: path.join(__dirname, '../../', 'public/views/about.html'),
+    feedback: path.join(__dirname, '../../', 'public/views/feedback.html'),
     landing: path.join(__dirname, '../../', 'public/views/landing.html'),
     login: path.join(__dirname, '../../', 'public/views/login.html'),
     activeRooms: path.join(__dirname, '../../', 'public/views/activeRooms.html'),
@@ -807,9 +807,9 @@ function startServer() {
     // });
 
     // Lika2 about
-    // app.get('/about', (req, res) => {
-    //     res.sendFile(views.about);
-    // });
+    app.get('/feedback', (req, res) => {
+        res.sendFile(views.feedback);
+    });
 
     // // Get stats endpoint
     // app.get('/stats', (req, res) => {
diff --git a/public/views/feedback.html b/public/views/feedback.html
new file mode 100644
index 00000000..7d5d1ae0
--- /dev/null
+++ b/public/views/feedback.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodePill - 404 Page Not Found</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600,700">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'IBM Plex Sans', sans-serif;
+            background: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);
+            color: #333;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 800px;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .logo {
+            margin-bottom: 40px;
+        }
+
+        .logo img {
+            height: 50px;
+            width: auto;
+        }
+
+        .error-code {
+            font-size: 150px;
+            font-weight: 700;
+            color: #e53935;
+            line-height: 1;
+            margin-bottom: 20px;
+            text-shadow: 5px 5px 0 rgba(229, 57, 53, 0.1);
+        }
+
+        .error-title {
+            font-size: 32px;
+            font-weight: 600;
+            margin-bottom: 20px;
+            color: #333;
+        }
+
+        .error-description {
+            font-size: 18px;
+            color: #666;
+            margin-bottom: 40px;
+            max-width: 500px;
+            line-height: 1.6;
+        }
+
+        .error-graphic {
+            margin: 40px 0;
+            position: relative;
+            width: 300px;
+            height: 200px;
+        }
+
+        .pill {
+            position: absolute;
+            width: 200px;
+            height: 80px;
+            border-radius: 40px;
+            background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            box-shadow: 0 10px 20px rgba(229, 57, 53, 0.3);
+        }
+
+        .pill::before {
+            content: '';
+            position: absolute;
+            width: 160px;
+            height: 60px;
+            border-radius: 30px;
+            background: rgba(255, 255, 255, 0.2);
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        .broken-pieces {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+
+        .piece {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            border-radius: 40px;
+            background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
+            box-shadow: 0 5px 15px rgba(229, 57, 53, 0.3);
+        }
+
+        .piece-1 {
+            top: 20px;
+            left: 30px;
+            transform: rotate(-15deg);
+        }
+
+        .piece-2 {
+            bottom: 20px;
+            right: 30px;
+            transform: rotate(15deg);
+        }
+
+        .search-icon {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            border: 4px solid rgba(229, 57, 53, 0.3);
+            border-radius: 50%;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        .search-icon::before {
+            content: '';
+            position: absolute;
+            width: 50px;
+            height: 4px;
+            background-color: rgba(229, 57, 53, 0.3);
+            bottom: -25px;
+            right: -15px;
+            transform: rotate(45deg);
+        }
+
+        .error-actions {
+            display: flex;
+            gap: 20px;
+            margin-top: 30px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .btn {
+            display: inline-block;
+            padding: 14px 30px;
+            border-radius: 6px;
+            font-weight: 600;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            font-size: 16px;
+            min-width: 180px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
+            color: white;
+            box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 20px rgba(229, 57, 53, 0.5);
+        }
+
+        .btn-secondary {
+            background: transparent;
+            color: #e53935;
+            border: 2px solid #e53935;
+        }
+
+        .btn-secondary:hover {
+            background: rgba(229, 57, 53, 0.05);
+            transform: translateY(-3px);
+        }
+
+        footer {
+            margin-top: 60px;
+            color: #888;
+            font-size: 14px;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translate(-50%, -50%); }
+            50% { transform: translate(-50%, -55%); }
+        }
+
+        .floating {
+            animation: float 3s ease-in-out infinite;
+        }
+
+        @keyframes shake {
+            0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
+            25% { transform: translate(-50%, -50%) rotate(-5deg); }
+            75% { transform: translate(-50%, -50%) rotate(5deg); }
+        }
+
+        .shaking {
+            animation: shake 0.5s ease-in-out infinite;
+        }
+
+        @media (max-width: 600px) {
+            .error-code {
+                font-size: 120px;
+            }
+            
+            .error-title {
+                font-size: 26px;
+            }
+            
+            .error-description {
+                font-size: 16px;
+            }
+            
+            .error-graphic {
+                width: 250px;
+                height: 150px;
+            }
+            
+            .pill {
+                width: 150px;
+                height: 60px;
+            }
+            
+            .piece {
+                width: 60px;
+                height: 60px;
+            }
+            
+            .search-icon {
+                width: 80px;
+                height: 80px;
+            }
+            
+            .btn {
+                padding: 12px 25px;
+                min-width: 160px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="logo">
+            <!-- Logo placeholder - replace with actual CodePill logo -->
+            <div style="font-size: 28px; font-weight: 700; color: #e53935;">CODEPILL</div>
+        </div>
+
+        <div class="error-code">404</div>
+        
+        <h1 class="error-title">Page Not Found</h1>
+        
+        <p class="error-description">
+            The page you're looking for seems to have disappeared. It might have been moved, deleted, 
+            or perhaps you entered the wrong URL.
+        </p>
+        
+        <div class="error-graphic">
+            <div class="pill floating"></div>
+            <div class="broken-pieces">
+                <div class="piece piece-1"></div>
+                <div class="piece piece-2"></div>
+            </div>
+            <div class="search-icon shaking"></div>
+        </div>
+        
+        <div class="error-actions">
+            <a href="/" class="btn btn-primary">Go to Homepage</a>
+            <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
+        </div>
+        
+        <footer>
+            <p>&copy; 2025 CodePill. All rights reserved.</p>
+        </footer>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Add interactive hover effects
+            const pieces = document.querySelectorAll('.piece');
+            
+            pieces.forEach(piece => {
+                piece.addEventListener('mouseenter', function() {
+                    this.style.transform = this.style.transform + ' scale(1.2)';
+                });
+                
+                piece.addEventListener('mouseleave', function() {
+                    this.style.transform = this.style.transform.replace(' scale(1.2)', '');
+                });
+            });
+            
+            // Add click effect to the pill
+            const pill = document.querySelector('.pill');
+            pill.addEventListener('click', function() {
+                this.classList.add('shaking');
+                setTimeout(() => {
+                    this.classList.remove('shaking');
+                }, 500);
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
