diff --git a/src/components/error/Error.jsx b/src/components/error/Error.jsx
index 6776274..df4ea80 100644
--- a/src/components/error/Error.jsx
+++ b/src/components/error/Error.jsx
@@ -4,14 +4,24 @@ import { useNavigate } from "react-router-dom"
 function Error({ error }) {
     const navigate = useNavigate();
     return (
-        <div className="bg-[#201F31] w-full h-screen flex justify-center items-center">
+        <div className="w-full h-screen flex justify-center items-center">
             <div className="flex flex-col w-fit h-fit items-center justify-center">
-                <img src="https://s1.gifyu.com/images/SBlOe.png" alt="" className="w-[300px] h-[300px] max-[500px]:w-[200px] max-[500px]:h-[200px]" />
-                <h1 className="text-white text-[35px] leading-5 mt-7">{error === "404" ? "404 Error" : "Error"}</h1>
-                <p className="mt-5">Oops! We couldn&apos;t find this page.</p>
-                <button className="bg-[#ffbade] py-2 px-4 w-fit rounded-3xl text-black text-light flex items-center gap-x-2 mt-7">
-                    <FaChevronLeft className="text-[#ffbade] w-[20px] h-[20px] rounded-full p-1 bg-black" />
-                    <p onClick={() => navigate('/home')} className="text-[18px]">Back to homepage</p>
+                <div className="w-[300px] h-[300px] max-[500px]:w-[200px] max-[500px]:h-[200px] relative overflow-hidden rounded-lg">
+                    <img 
+                        src="https://64.media.tumblr.com/tumblr_lhnjv52vzw1qcrzkko1_500.gif" 
+                        alt="404 Error" 
+                        className="w-full h-full object-cover grayscale" 
+                    />
+                    <div className="absolute inset-0 bg-black/20"></div>
+                </div>
+                <h1 className="font-bold text-white text-[48px] mt-8 tracking-tight">{error === "404" ? "404 Error" : "Error"}</h1>
+                <p className="text-gray-400 text-lg mt-2">Oops! we couldn't find this page.</p>
+                <button 
+                    onClick={() => navigate('/home')} 
+                    className="mt-8 bg-[#ffbade] hover:bg-[#ffcbe7] transition-colors text-black py-2 px-4 w-fit rounded-3xl flex items-center gap-x-2"
+                >
+                    <FaChevronLeft className="text-black w-[20px] h-[20px] rounded-full p-1" />
+                    <span className="text-[18px]">Back to homepage</span>
                 </button>
             </div>
         </div>