diff --git a/src/App.jsx b/src/App.jsx
index ee5feff..de58852 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,7 +7,7 @@ import Login from "./components/Login";
 import Signup from "./components/Signup";
 import PrivacyPolicy from "./components/PrivacyPolicy"; 
 import TermsOfUse from "./components/TermsOfUse";
-
+import Error from "./components/Error";
 
 function App() {
   return (
@@ -19,7 +19,7 @@ function App() {
         <Route path='/privacy-policy' element={<PrivacyPolicy />} /> 
         <Route path='/terms-of-use' element={<TermsOfUse />} />
         <Route path='/courses' element={<AllCourses />} />
-
+        <Route path="*" element={<Error />} />
       </Routes>
     </Router>
   );
diff --git a/src/components/Courses.jsx b/src/components/Courses.jsx
index 48a4573..0d65757 100644
--- a/src/components/Courses.jsx
+++ b/src/components/Courses.jsx
@@ -1,8 +1,55 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import CourseCards from './CourseCards';
 
 function Courses() {
   const [searchTerm, setSearchTerm] = useState("");
+  const [placeholder, setPlaceholder] = useState('');
+
+  const placeholders = [
+    'Learn Java',
+  'Master C',
+  'Explore C++',
+  'Discover C#',
+  'Build with Ruby',
+  'Unlock Python',
+  'Style with CSS',
+  'Develop with Go',
+  'Create with HTML',
+  'Enhance with JavaScript',
+  'Build with Kotlin',
+  'Scale with Node.js',
+  'Craft with Swift',
+  'Develop with PHP',
+  'Build with React.js',
+  'Streamline with Next.js',
+  'Secure with Rust',
+  'Type with TypeScript',
+  'Craft with Dart',
+  'Analyze with R',
+  'Query with SQL',
+  'Scale with Scala',
+  'Automate with Shell Scripting',
+  'Streamline with Groovy',
+  'Optimize with Assembly',
+  'Elevate with Elixir',
+  'Develop with F#',
+  'Explore Haskell',
+  'Create with Lua',
+  'Build with Objective-C',
+  'Master Perl',
+  'Solve with Prolog',
+  'Innovate with Clojure'
+  ];
+
+  let index = 0;
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setPlaceholder(placeholders[index]);
+      index = (index + 1) % placeholders.length;
+    }, 3000); // Rotate every 3 seconds
+    return () => clearInterval(intervalId);
+  }, []);
 
   const handleSearchChange = (e) => {
     setSearchTerm(e.target.value.toLowerCase());
@@ -16,7 +63,7 @@ function Courses() {
           <div className="search-bar">
             <input
               type="text"
-              placeholder="Explore Courses..."
+              placeholder={placeholder}
               spellCheck="false"
               value={searchTerm}
               onChange={handleSearchChange}
diff --git a/src/components/Error.css b/src/components/Error.css
new file mode 100644
index 0000000..9b9cd57
--- /dev/null
+++ b/src/components/Error.css
@@ -0,0 +1,62 @@
+/* Error.css */
+
+.error-section {
+    padding: 40px;
+    background-color: white;
+}
+
+.error-container {
+    text-align: center;
+}
+
+.error-image {
+    height: 500px;
+    background-size: cover;
+    background-position: center;
+    background-image: url('https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif');
+}
+
+.error-title {
+    font-size: 2rem;
+    font-weight: 800;
+    color: black;
+}
+
+@media (min-width: 1024px) {
+    .error-title {
+        font-size: 3.75rem;
+    }
+}
+
+.error-content {
+    margin-top: -3rem;
+}
+
+.error-subtitle {
+    font-size: 2.5rem;
+    margin-bottom: 0.25rem;
+    font-weight: 600;
+}
+
+.error-description {
+    font-weight: 600;
+}
+
+.error-home-button {
+    padding: 13px 40px;
+    font-size: 1.125rem;
+    background-color: #3ccf4e;
+    /* Caribbean Green */
+    color: white;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    display: inline-block;
+    border-radius: 9999px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: background-color 0.3s;
+}
+
+.error-home-button:hover {
+    background-color: #34a853;
+}
\ No newline at end of file
diff --git a/src/components/Error.jsx b/src/components/Error.jsx
new file mode 100644
index 0000000..4204f0a
--- /dev/null
+++ b/src/components/Error.jsx
@@ -0,0 +1,35 @@
+/** @format */
+
+import React from "react";
+import { Link } from "react-router-dom";
+import "./Error.css"; // Import the custom CSS file
+
+const Error = () => {
+	return (
+		<section className="error-section">
+			<div>
+				<div className="error-container">
+					<div className="error-image">
+						<h1 className="error-title">404 - Page Not Found !!</h1>
+					</div>
+
+					<div className="error-content" style={{"color": "black"}}>
+						<h3 className="error-subtitle">Look like you're lost</h3>
+
+						<p className="error-description">
+							The page you are looking for not available!
+						</p>
+
+						<Link
+							to="/"
+							className="error-home-button">
+							Home
+						</Link>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default Error;