diff --git a/package-lock.json b/package-lock.json
index d7006db..d43f821 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "formik": "^2.4.6",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-error-boundary": "^5.0.0",
         "react-redux": "^9.2.0",
         "react-router": "^6.30.0",
         "react-router-dom": "^6.30.0",
@@ -17902,6 +17903,18 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-5.0.0.tgz",
+      "integrity": "sha512-tnjAxG+IkpLephNcePNA7v6F/QpWLH8He65+DmedchDwg162JZqx4NmbXj0mlAYVVEd81OW7aFhmbsScYfiAFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.1.0.tgz",
diff --git a/package.json b/package.json
index 5b7c08f..f19fe94 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "formik": "^2.4.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^5.0.0",
     "react-redux": "^9.2.0",
     "react-router": "^6.30.0",
     "react-router-dom": "^6.30.0",
diff --git a/src/App.tsx b/src/App.tsx
index ac4466e..8458eaa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,22 +1,13 @@
-import { Container, CssBaseline } from "@mui/material";
+import { CssBaseline } from "@mui/material";
 import { Provider } from "react-redux";
-import { BrowserRouter } from "react-router-dom";
-import NavigationBar from "./components/NavigationBar";
-import LazyRoutes from "./LazyRoutes";
 import { reduxStore } from "./store/configureStore";
+import EagerRoutes from "./EagerRoutes";
 
 function App() {
   return (
     <Provider store={reduxStore}>
       <CssBaseline>
-        <BrowserRouter>
-          <>
-            <NavigationBar />
-            <Container>
-              <LazyRoutes />
-            </Container>
-          </>
-        </BrowserRouter>
+        <EagerRoutes />
       </CssBaseline>
     </Provider>
   );
diff --git a/src/EagerRoutes.tsx b/src/EagerRoutes.tsx
index 2c1272d..331dcc2 100644
--- a/src/EagerRoutes.tsx
+++ b/src/EagerRoutes.tsx
@@ -1,16 +1,32 @@
-import { Route, Routes } from "react-router-dom";
+import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from "react-router-dom";
 import HeroesPage from "./pages/HeroesPage";
+// import HeroesPage, { loader as heroesLoader } from "./pages/HeroesPage";
 import HomePage from "./pages/HomePage";
 import VillainsPage from "./pages/VillainsPage";
+import { reduxStore } from "./store/configureStore";
+import Root from "./pages/root";
+import { Suspense } from "react";
 
-const EagerRoutes = () => {
-  return (
-    <Routes>
-      <Route path="/" element={<HomePage />} />
-      <Route path="/heroes" element={<HeroesPage />} />
+
+
+const routes = createBrowserRouter(
+  createRoutesFromElements(
+    <Route path="/" element={<Root />} >
+      <Route index element={<HomePage />} />
+      <Route path="/heroes" element={<HeroesPage />}
+      // loader={() => {
+      //   return heroesLoader(reduxStore.dispatch);
+      // }}
+      />
       <Route path="/villains" element={<VillainsPage />} />
-    </Routes>
-  );
-};
+    </Route>
+  )
+)
 
-export default EagerRoutes;
+export default function EagerRoutes() {
+  return (
+    <Suspense fallback={<h1>Fallback component from the root suspense</h1>}>
+      <RouterProvider router={routes} />
+    </Suspense>
+  );
+}
diff --git a/src/pages/HeroesPage.tsx b/src/pages/HeroesPage.tsx
index ecf1994..e07bfa5 100644
--- a/src/pages/HeroesPage.tsx
+++ b/src/pages/HeroesPage.tsx
@@ -15,11 +15,16 @@ import {
   removeHeroFromStore,
   triggerLoading,
 } from "../features/heroes/heroSlice";
-import { useAppDispatch, useAppSelector } from "../store/configureStore";
+import { AppDispatch, useAppDispatch, useAppSelector } from "../store/configureStore";
 import { deleteAxios, getAxios } from "../axios/generic-api-calls";
 import { HeroModel } from "../features/heroes/heroTypes";
 import { EndPoints } from "../axios/api-config";
 
+// export async function loader(dispatch: AppDispatch) {
+//   return dispatch(getHeroesAction());
+// }
+
+
 const HeroesPage = () => {
   const dispatch = useAppDispatch();
   const { heroes, loading } = useAppSelector((state) => state.hero);
@@ -31,8 +36,8 @@ const HeroesPage = () => {
   const [counter, setCounter] = useState("0");
 
   useEffect(() => {
-    dispatch(getHeroesAction());
-    // handleGetHeroes();
+    // dispatch(getHeroesAction());
+    handleGetHeroes();
     // handleFetchHeroes();
   }, [dispatch]);
 
diff --git a/src/pages/root.tsx b/src/pages/root.tsx
new file mode 100644
index 0000000..e33a3d2
--- /dev/null
+++ b/src/pages/root.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import { Outlet } from 'react-router';
+import NavigationBar from '../components/NavigationBar';
+import { Container } from '@mui/material';
+
+export default function Root() {
+    return (
+        <>
+            <NavigationBar />
+            <div className={'bg-white px-6 py-8 shadow-xl ring-1 ring-slate-900/5 dark:bg-slate-800 dark:text-white'}>
+                <ErrorBoundary fallbackRender={() => <div>Something went wrong</div>}>
+                    <Container>
+                        <Outlet />
+                    </Container>
+                </ErrorBoundary>
+            </div>
+        </>
+    );
+}
diff --git a/src/store/configureStore.ts b/src/store/configureStore.ts
index d5eaf8b..6c0ce60 100644
--- a/src/store/configureStore.ts
+++ b/src/store/configureStore.ts
@@ -5,7 +5,7 @@ import { heroSlice } from "../features/heroes/heroSlice";
 import { villainSlice } from "../features/villains/query";
 
 const reduxStore = configureStore({
-  preloadedState: load(),
+  // preloadedState: load(),
 
   reducer: {
     // rtk
@@ -18,7 +18,7 @@ const reduxStore = configureStore({
     getDefaultMiddleware({
       serializableCheck: false,
     })
-      .concat(save({ ignoreStates: ["villain"] }))
+      // .concat(save({ ignoreStates: ["villain"] }))
       .concat(villainSlice.middleware), // for query caching
 
   devTools: