diff --git a/src/APP/index.js b/src/APP/index.js
index 4a755f70..15910b9d 100644
--- a/src/APP/index.js
+++ b/src/APP/index.js
@@ -25,6 +25,7 @@ import Error403 from "./pages/errorPages/Error403";
 import Error404 from "./pages/errorPages/Error404";
 import Error500 from "./pages/errorPages/Error500";
 
+import ErrorBoundary from "./pages/errorPages/ErrorBoundary";
 import ProductDisplay from "./pages/shop/pages/ProductDisplay";
 import GalleryPage from "./pages/gallery/GalleryPage";
 
@@ -52,6 +53,7 @@ export {
   Error403,
   Error404,
   Error500,
+  ErrorBoundary,
   ProductDisplay,
   GalleryPage,
 
diff --git a/src/APP/pages/blog/Blog.jsx b/src/APP/pages/blog/Blog.jsx
index 4e949891..889d3e82 100644
--- a/src/APP/pages/blog/Blog.jsx
+++ b/src/APP/pages/blog/Blog.jsx
@@ -1,5 +1,5 @@
 
-import React, { useEffect } from "react";
+import React from "react";
 import { useParams, useNavigate } from "react-router-dom";
 
 
@@ -14,18 +14,12 @@ function Blog() {
   const navigate = useNavigate();
   const {
     data: blogData,
-    refetch: refetchBlogData,
 
     isLoading,
     isError,
     isSuccess,
   } = useBlogData(title_slug);
 
-
-  useEffect(() => {
-    refetchBlogData();
-  }, [title_slug]);
-
   return (
     <div className="w-screen max-w-[1440px] mx-auto">
       {isError && navigate("/error-500")}
diff --git a/src/APP/pages/blog/sections/RelatedBlogs.jsx b/src/APP/pages/blog/sections/RelatedBlogs.jsx
index 04819087..65f87bb0 100644
--- a/src/APP/pages/blog/sections/RelatedBlogs.jsx
+++ b/src/APP/pages/blog/sections/RelatedBlogs.jsx
@@ -4,6 +4,7 @@ import { useRelatedBlogsData } from "../../../../hooks/Queries/blog/useBlogData"
 import BlogCard from "../../blogs/sections/BlogCard";
 import { filterRelatedBlogs } from "../../../../utilities/FilterBlogs";
 
+
 function RelatedBlogs({ blogId, categoryId }) {
   const { title_slug } = useParams();
 
@@ -24,15 +25,16 @@ function RelatedBlogs({ blogId, categoryId }) {
     title_slug
   );
 
+
   return (
     <>
       {isError && <p>Error loading blogs!</p>}
       {isLoading && <p>Loading blogs...</p>}
 
-
       {isSuccess && filteredRelatedBlogs.length > 0 && (
         <>
-          <h2 className="text-2xl text-black font-semibold underline decoration-green-600 underline-offset-2">
+          <h2 className="text-2xl text-gray-500 font-semibold underline decoration-green-600 underline-offset-2">
+
             {filteredRelatedBlogs.length > 1
               ? "Related Articles"
               : "Related Article"}
@@ -53,7 +55,6 @@ function RelatedBlogs({ blogId, categoryId }) {
             )}
           </div>
         </>
-
       )}
     </>
   );
diff --git a/src/APP/pages/blogs/sections/BlogsWrapper.jsx b/src/APP/pages/blogs/sections/BlogsWrapper.jsx
index 3964c83f..13a181a9 100644
--- a/src/APP/pages/blogs/sections/BlogsWrapper.jsx
+++ b/src/APP/pages/blogs/sections/BlogsWrapper.jsx
@@ -5,9 +5,7 @@ import { useNavigate } from "react-router-dom";
 
 import BlogCard from "./BlogCard";
 import BlogPagination from "./BlogPagination";
-
 import { Loader } from "../../../components";
-
 import { SearchBlogContext } from "../../../../context/searchBlog";
 import {
   useBlogsData,
@@ -15,8 +13,6 @@ import {
 } from "../../../../hooks/Queries/blogs/useAllBlogsData";
 
 import { filterBlogsByCat } from "../../../../utilities/FilterBlogs";
-
-
 function SearchResults({ searchText }) {
   return (
     <h3 className="text-black text-xl md:text-3xl font-semibold leading-8 md:leading-loose text-center">
@@ -24,7 +20,6 @@ function SearchResults({ searchText }) {
 
       <span className="text-primary"> "{searchText}"</span>
 
-
     </h3>
   );
 }
@@ -99,7 +94,6 @@ function BlogsWrapper() {
             blogCategories &&
             Array.isArray(blogCategories)
               ? blogCategories.map((blog) => (
-
                   <button
                     type="button"
                     key={blog.id}
@@ -110,7 +104,6 @@ function BlogsWrapper() {
                   >
                     {blog.name}
                   </button>
-
                 ))
               : null}
           </div>
diff --git a/src/APP/pages/errorPages/Error500.jsx b/src/APP/pages/errorPages/Error500.jsx
index 2c879d4e..bfeb1a75 100644
--- a/src/APP/pages/errorPages/Error500.jsx
+++ b/src/APP/pages/errorPages/Error500.jsx
@@ -1,6 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
-
 import { bgError500, error500svg } from "../../../assets/images/errorPages";
 
 function Error500() {
@@ -30,17 +28,18 @@ function Error500() {
             <p className="text-xl font-normal mb-2">
               We’re experiencing an internal server problem. Please try again
               after a few minutes or{" "}
-              <Link to="/" className="text-primary hover:underline">
+              <a href="/" className="text-primary hover:underline">
                 contact us.
-              </Link>
+              </a>
             </p>
 
-            <Link
-              to="/"
+            <a
+              href="/"
               className="bg-[#00664E] rounded-lg text-white w-max py-2 px-10"
             >
               Go Home
-            </Link>
+            </a>
+
           </div>
         </div>
 
@@ -60,17 +59,17 @@ function Error500() {
         <p className="text-base font-normal mb-2 max-w-lg ">
           We’re experiencing an internal server problem. Please try again after
           a few minutes or{" "}
-          <Link to="/" className="text-primary hover:underline">
+          <a href="/" className="text-primary hover:underline">
             contact us.
-          </Link>
+          </a>
         </p>
 
-        <Link
-          to="/"
+        <a
+          href="/"
           className="bg-primary text-base rounded-lg text-white w-max py-2 px-10"
         >
           Go Home
-        </Link>
+        </a>
       </div>
     </section>
   );
diff --git a/src/APP/pages/errorPages/ErrorBoundary.jsx b/src/APP/pages/errorPages/ErrorBoundary.jsx
new file mode 100644
index 00000000..34e1d5bf
--- /dev/null
+++ b/src/APP/pages/errorPages/ErrorBoundary.jsx
@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+
+import Error500 from "./Error500";
+
+function ErrorBoundary({ children }) {
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    const errorHandler = (error) => {
+      console.error(
+        "Error: ",
+        error.message,
+        "ErrorFileName: ",
+        error.filename
+      );
+      setHasError(true);
+    };
+
+    window.addEventListener("error", errorHandler);
+
+    return () => {
+      window.removeEventListener("error", errorHandler);
+    };
+  }, []);
+
+  if (hasError) {
+    return <Error500 />;
+  }
+
+  return <>{children}</>;
+}
+
+export default ErrorBoundary;
diff --git a/src/APP/pages/events/sections/eventsSection/EventsUpdateSection.jsx b/src/APP/pages/events/sections/eventsSection/EventsUpdateSection.jsx
index aa63d953..4d161cd3 100644
--- a/src/APP/pages/events/sections/eventsSection/EventsUpdateSection.jsx
+++ b/src/APP/pages/events/sections/eventsSection/EventsUpdateSection.jsx
@@ -1,7 +1,5 @@
 
 import React from "react"; // , { useState }
-
-
 import { Link } from "react-router-dom";
 
 function EventsUpdateSection({
diff --git a/src/main.jsx b/src/main.jsx
index 01e98260..0590c09c 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -8,7 +8,7 @@ import "./index.css";
 import router from "./router";
 import { SearchBlogProvider } from "./context/searchBlog";
 import { AuthContextProvider } from "./utils/AuthContext";
-
+import { ErrorBoundary } from "./APP";
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -19,13 +19,15 @@ const queryClient = new QueryClient({
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <AuthContextProvider>
-      <QueryClientProvider client={queryClient}>
-        <SearchBlogProvider>
-          <RouterProvider router={router} />
-          <ReactQueryDevtools position="bottom-right" />
-        </SearchBlogProvider>
-      </QueryClientProvider>
-    </AuthContextProvider>
+    <ErrorBoundary>
+      <AuthContextProvider>
+        <QueryClientProvider client={queryClient}>
+          <SearchBlogProvider>
+            <RouterProvider router={router} />
+            <ReactQueryDevtools position="bottom-right" />
+          </SearchBlogProvider>
+        </QueryClientProvider>
+      </AuthContextProvider>
+    </ErrorBoundary>
   </React.StrictMode>
 );
diff --git a/src/router/index.jsx b/src/router/index.jsx
index de09d2df..6a7cbdf1 100644
--- a/src/router/index.jsx
+++ b/src/router/index.jsx
@@ -16,7 +16,6 @@ import {
   DonatePage,
   Homepage,
   Resources,
-
   ProductDisplay,
   Checkout,
   SingleEvent,
@@ -26,7 +25,6 @@ import {
   Error400,
   Error403,
   GalleryPage,
-
 } from "../APP";
 // import {
 //   AllChaptersPage,
@@ -66,7 +64,6 @@ const router = createBrowserRouter([
         element: <CommunityPage />,
       },
       {
-
         path: "/Gallery",
         element: <GalleryPage />,
       },
@@ -108,7 +105,6 @@ const router = createBrowserRouter([
         path: "/events/:id", // New route path
         element: <SingleEvent />,
       },
-
       // {
       //   path: "/resources",
       //   element: <Resources />,
@@ -122,8 +118,6 @@ const router = createBrowserRouter([
       //   element: <SingleProductDonation />,
       // },
       // {
-
-
       //   path: "/signup",
       //   element: <SignUp />,
       // },
@@ -141,6 +135,7 @@ const router = createBrowserRouter([
   {
     path: "/error-403",
     element: <Error403 />,
+
   },
   {
     path: "/*",
@@ -151,7 +146,6 @@ const router = createBrowserRouter([
     element: <Error500 />,
   },
 
-
   // {
   //   path: "/admin",
   //   element: <AdminLayout />,