diff --git a/client/src/App.js b/client/src/App.js
index 83d4855..4a08148 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -6,6 +6,7 @@ import Footer from "./Components/Footer/Footer";
 import Profile from "./Pages/UserProfile";
 import profileData from "./Data/profileData.json";
 import "./styles.css";
+import NotFoundPage from './pages/NotFoundPage';
 
 function App() {
   return (
@@ -13,11 +14,11 @@ function App() {
       <Header />
       <Switch>
         <Route path="/profile" component={Profile} />
-        <Redirect to="/profile" />
+        <Route component={NotFoundPage} />
       </Switch>
       <Footer />
     </BrowserRouter>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/client/src/Error.js b/client/src/Error.js
new file mode 100644
index 0000000..3b767b9
--- /dev/null
+++ b/client/src/Error.js
@@ -0,0 +1,26 @@
+
+//Add route for error page...
+// <Route component = {error}>
+// import Logo from '../logo.png';
+import React from "react";
+import {NavLink} from "react-router-dom";
+import Logo from './design/error-screen/sreens/error-sreen-desktop.png'
+const Error = () => {
+    const mystyle = {
+        color: "white",
+        backgroundColor: "DodgerBlue",
+        padding: "10px",
+        fontFamily: "Arial"
+      };
+    return (
+        <>
+        <div className="setStyle2">
+            <h1 style={mystyle}>404 Error Page</h1>
+            {/* <p>Sorry this page is not valid</p> */}
+            <NavLink to ="/">Take Me Back To Where I Came From</NavLink>
+            <img src = {Logo} width = "500" alt ="error-screen-desktop.png"/>   
+        </div>
+        </>
+    );
+};
+export default Error;
\ No newline at end of file