diff --git a/src/assets/images/404.png b/src/assets/images/404.png
new file mode 100644
index 0000000..602c479
Binary files /dev/null and b/src/assets/images/404.png differ
diff --git a/src/assets/images/wrench-page-notfound.jpg b/src/assets/images/wrench-page-notfound.jpg
new file mode 100644
index 0000000..4b3e688
Binary files /dev/null and b/src/assets/images/wrench-page-notfound.jpg differ
diff --git a/src/components/FourZeroFour/index.jsx b/src/components/FourZeroFour/index.jsx
index fccca38..30b2393 100644
--- a/src/components/FourZeroFour/index.jsx
+++ b/src/components/FourZeroFour/index.jsx
@@ -2,6 +2,8 @@ import React from "react";
 // import Lottie from "react-lottie";
 import { useNavigate } from "react-router-dom";
 import * as animationData from "../../assets/images/Lotties/77618-website-404-error-animation.json";
+import { localImgLoad } from "../../lib";
+// import BgError from '../../assets/images/wrench-page-notfound.jpg'
 
 export default function FourZeroFour() {
   const navigate = useNavigate();
@@ -14,16 +16,21 @@ export default function FourZeroFour() {
     },
   };
   return (
-    <div className="flex justify-center items-center w-full h-screen bg-[#232247]">
-      <div>
+    <div className={`my-custom-bg-class flex justify-center items-center w-full h-screen before:content-[''] before:absolute before:inset-0 before:bg-[#cdcdcd]/[.8]`}>
+      <div className="relative pt-32 max-w-3xl">
         {/* <Lottie options={defaultOptions} width={600} height={600} /> */}
-        <div className="flex justify-center">
+        <div className="px-16 md:px-24 flex flex-col items-center justify-center gap-4">
+          <img src={localImgLoad('images/404.png')} className="w-72" alt='404 Image' />
+          <p className="mt-8 text-red-600 font-black text-4xl md:text-5xl tracking-wider text-center">Sorry!</p>
+          <h1 className="text-black text-4xl md:text-5xl font-black tracking-wide text-center leading-tight">The page can’t be found.</h1>
+          <p className="px-2 md:px-8 text-slate-700 text-base md:text-lg text-center">The page you're looking for isn't available. Use the go back button below</p>
           <button
             onClick={() => navigate(-1)}
             type="button"
-            className="btn-gradient text-white text-lg w-[150px] h-[50px] rounded-full"
+            className="px-4 md:px-8 border-2 border-[#2b70fa] rounded-lg text-[#007bff] text-base md:text-lg h-[48px] flex justify-center items-center gap-1"
           >
-            Go Back
+            <span>Go Back</span>
+            <span className="pb-1">&rarr;</span>
           </button>
         </div>
       </div>
diff --git a/src/index.css b/src/index.css
index 47a0531..49b06f4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -304,6 +304,12 @@ input[type="text"][dir="rtl"] {
     transform: rotate(360deg);
   }
 }
+
+.my-custom-bg-class{
+  background: url("./assets/images/wrench-page-notfound.jpg") center/cover;
+  position: relative;
+}
+
 /* TODO: =================================default end================================ */
 /* TODO: =================================update password================================ */
 .content-wrapper.thankyou-section {