diff --git a/src/init/dayjs/index.ts b/src/init/dayjs/index.ts
new file mode 100644
index 0000000..35a84ed
--- /dev/null
+++ b/src/init/dayjs/index.ts
@@ -0,0 +1,6 @@
+import dayjs from "dayjs"
+import duration from "dayjs/plugin/duration"
+
+dayjs.extend(duration)
+
+console.log("Global Dayjs plugins initialised.")
\ No newline at end of file
diff --git a/src/init/index.ts b/src/init/index.ts
new file mode 100644
index 0000000..fc6e552
--- /dev/null
+++ b/src/init/index.ts
@@ -0,0 +1 @@
+import "./dayjs"
\ No newline at end of file
diff --git a/src/App.tsx b/src/layout/hero-layout/index.tsx
similarity index 86%
rename from src/App.tsx
rename to src/layout/hero-layout/index.tsx
index d46f430..760217e 100644
--- a/src/App.tsx
+++ b/src/layout/hero-layout/index.tsx
@@ -1,16 +1,16 @@
 import { Outlet, Link } from "react-router-dom"
-import { useMemo, useState } from "react"
-import moment from "moment"
+import { useMemo } from "react"
+import dayjs from "dayjs"
 
 /**
  * Main application component that serves as the root layout.
  * Uses React Router's Outlet to render child routes.
  */
-export default function App() {
-  const today = useMemo(() => moment(), [])
+export default function HeroLayout() {
+  const today = useMemo(() => dayjs(), [])
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 flex flex-col">
       {/* Navigation Header */}
       <header className="bg-white shadow-sm border-b">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -45,7 +45,7 @@ export default function App() {
       </header>
 
       {/* Main Content Area */}
-      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8 flex-grow">
         <div className="px-4 py-6 sm:px-0">
           <Outlet />
         </div>
diff --git a/src/main.tsx b/src/main.tsx
index fb4f525..bd293ad 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,8 +1,10 @@
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
-import { Provider } from "react-redux"
+import { Provider as ReduxProvider } from "react-redux"
+import { PersistGate } from "redux-persist/integration/react"
 import { RouterProvider } from "react-router-dom"
-import store from "@/store"
+import "@/init"
+import store, { persistor } from "@/store"
 import router from "@/router"
 import "./index.css"
 
@@ -12,8 +14,10 @@ import "./index.css"
  */
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <Provider store={store}>
-      <RouterProvider router={router} />
-    </Provider>
+    <ReduxProvider store={store}>
+      <PersistGate persistor={persistor} loading={null}>
+        <RouterProvider router={router} />
+      </PersistGate>
+    </ReduxProvider>
   </StrictMode>,
 )
diff --git a/src/router/index.tsx b/src/router/index.tsx
index be17847..657e332 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,9 +1,16 @@
+import { ComponentType } from "react"
 import { createBrowserRouter } from "react-router-dom"
-import App from "@/App"
 import ErrorPage from "@/components/error-page"
-import HomePage from "@/page/home"
-import AboutPage from "@/page/about"
-import ContactPage from "@/page/contact"
+import HeroLayout from "@/layout/hero-layout"
+
+function lazy<T extends { default: ComponentType<unknown> }>(importer: () => Promise<T>) {
+  return async () => {
+    const module = await importer()
+    return {
+      Component: module.default,
+    }
+  }
+}
 
 /**
  * Main application router configuration using React Router v6.
@@ -13,20 +20,20 @@ const router = createBrowserRouter(
   [
     {
       path: "/",
-      element: <App />,
+      element: <HeroLayout />,
       errorElement: <ErrorPage />,
       children: [
         {
           index: true,
-          element: <HomePage />,
+          lazy: lazy(() => import("@/page/home")),
         },
         {
           path: "about",
-          element: <AboutPage />,
+          lazy: lazy(() => import("@/page/about")),
         },
         {
           path: "contact",
-          element: <ContactPage />,
+          lazy: lazy(() => import("@/page/contact")),
         },
       ],
     },
diff --git a/src/store/index.ts b/src/store/index.ts
index 7dff401..8517872 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,22 +1,46 @@
-import { configureStore } from "@reduxjs/toolkit"
+import { configureStore, combineReducers } from "@reduxjs/toolkit"
 import { useDispatch, useSelector } from "react-redux"
-import authReducer from "./auth-slice.ts"
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+} from "redux-persist"
+import storage from "redux-persist/lib/storage/session" // use session storage
+// import storage from "redux-persist/lib/storage" // use local storage
+import authReducer from "./auth-slice"
 
-/**
- * The Redux store instance for the application.
- *
- * This store is configured using [`configureStore`](https://redux-toolkit.js.org/api/configureStore)
- * from <code>@reduxjs/toolkit</code>. It combines various slice reducers into
- * a single root redux.
- */
-const store = configureStore({
-  reducer: {
-    auth: authReducer,
-  },
+const persistConfig = {
+  key: "root",
+  storage,
+  whitelist: ["auth"],
+  // blacklist: ['department'],
+}
+
+const rootReducer = combineReducers({
+  auth: authReducer,
 })
 
+const persistedReducer = persistReducer(persistConfig, rootReducer)
+
+const store = configureStore({
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
+})
+
+export const persistor = persistStore(store)
+
 export default store
-export type RootState = ReturnType<typeof store.getState>
+export type RootState = ReturnType<typeof rootReducer>
 export type AppDispatch = typeof store.dispatch
 export type AppStore = typeof store