diff --git a/web/contexts/app-root/app-root-provider.tsx b/web/contexts/app-root.context.tsx
similarity index 71%
rename from web/contexts/app-root/app-root-provider.tsx
rename to web/contexts/app-root.context.tsx
index 92a3f73ef..48ce0a411 100644
--- a/web/contexts/app-root/app-root-provider.tsx
+++ b/web/contexts/app-root.context.tsx
@@ -1,4 +1,4 @@
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 // mobx store
 import { AppRootStore, IAppRootStore } from "store/application";
 
@@ -17,3 +17,9 @@ export const AppRootStoreProvider = ({ children }: any) => {
   const store: IAppRootStore = initializeStore();
   return <AppRootStoreContext.Provider value={store}>{children}</AppRootStoreContext.Provider>;
 };
+
+export const useAppRootStore = () => {
+  const context = useContext(AppRootStoreContext);
+  if (context === undefined) throw new Error("useMobxStore must be used within MobxStoreProvider");
+  return context;
+};
diff --git a/web/contexts/app-root/index.ts b/web/contexts/app-root/index.ts
deleted file mode 100644
index 416a8ec63..000000000
--- a/web/contexts/app-root/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./app-root-provider";
-export * from "./use-app-root";
diff --git a/web/contexts/app-root/use-app-root.tsx b/web/contexts/app-root/use-app-root.tsx
deleted file mode 100644
index 363192716..000000000
--- a/web/contexts/app-root/use-app-root.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { useContext } from "react";
-import { AppRootStoreContext } from "./app-root-provider";
-
-export const useAppRoot = () => {
-  const context = useContext(AppRootStoreContext);
-  if (context === undefined) throw new Error("useAppRoot must be used within AppRootStoreContext");
-  return context;
-};
diff --git a/web/contexts/page.context.tsx b/web/contexts/page.context.tsx
new file mode 100644
index 000000000..cb83a687c
--- /dev/null
+++ b/web/contexts/page.context.tsx
@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+// mobx store
+import { PageStore } from "store/page.store";
+import { AppRootStore } from "store/application";
+import { useAppRootStore } from "./app-root.context";
+
+export const PageContext = createContext<PageStore | undefined>(undefined);
+
+let pageStore: PageStore | undefined;
+
+export const PageStoreProvider = ({ children }: any) => {
+  const appRootStore = useAppRootStore();
+  pageStore = pageStore ?? new PageStore(appRootStore);
+  return <PageContext.Provider value={pageStore}>{children}</PageContext.Provider>;
+};
+
+export const usePage = () => {
+  const context = useContext(PageContext);
+  if (context === undefined) throw new Error("usePage must be used within AppRootStoreContext");
+  return context;
+};
diff --git a/web/contexts/page.context/index.ts b/web/contexts/page.context/index.ts
deleted file mode 100644
index 78f8c7a77..000000000
--- a/web/contexts/page.context/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./page-provider";
-export * from "./use-page";
diff --git a/web/contexts/page.context/page-provider.tsx b/web/contexts/page.context/page-provider.tsx
deleted file mode 100644
index 5026edabc..000000000
--- a/web/contexts/page.context/page-provider.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { createContext } from "react";
-// mobx store
-import { PageStore } from "store/page.store";
-import { AppRootStore } from "store/application";
-
-let pageStore: PageStore = new PageStore(new AppRootStore());
-
-export const PageContext = createContext<PageStore>(pageStore);
-
-const initializeStore = () => {
-  const _pageStore: PageStore = pageStore ?? new PageStore(pageStore);
-  if (typeof window === "undefined") return _pageStore;
-  if (!pageStore) pageStore = _pageStore;
-  return _pageStore;
-};
-
-export const AppRootStoreProvider = ({ children }: any) => {
-  const store: PageStore = initializeStore();
-  return <PageContext.Provider value={store}>{children}</PageContext.Provider>;
-};
diff --git a/web/contexts/page.context/use-page.tsx b/web/contexts/page.context/use-page.tsx
deleted file mode 100644
index 85e3d1500..000000000
--- a/web/contexts/page.context/use-page.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { useContext } from "react";
-import { PageContext } from "./page-provider";
-
-export const usePage = () => {
-  const context = useContext(PageContext);
-  if (context === undefined) throw new Error("useAppRoot must be used within AppRootStoreContext");
-  return context;
-};
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index ff035be63..1f5b18ba9 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -17,6 +17,7 @@ import { PagesHeader } from "components/headers";
 import { NextPageWithLayout } from "types/app";
 // constants
 import { PAGE_TABS_LIST } from "constants/page";
+import { PageStoreProvider } from "contexts/page.context";
 
 const AllPagesList = dynamic<any>(() => import("components/pages").then((a) => a.AllPagesList), {
   ssr: false,
@@ -82,81 +83,83 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
   };
 
   return (
-    <>
-      {workspaceSlug && projectId && (
-        <CreateUpdatePageModal
-          isOpen={createUpdatePageModal}
-          handleClose={() => setCreateUpdatePageModal(false)}
-          projectId={projectId.toString()}
-        />
-      )}
-      <div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
-        <div className="flex justify-between gap-4">
-          <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
+    <PageStoreProvider>
+      <>
+        {workspaceSlug && projectId && (
+          <CreateUpdatePageModal
+            isOpen={createUpdatePageModal}
+            handleClose={() => setCreateUpdatePageModal(false)}
+            projectId={projectId.toString()}
+          />
+        )}
+        <div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
+          <div className="flex justify-between gap-4">
+            <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
+          </div>
+          <Tab.Group
+            as={Fragment}
+            defaultIndex={currentTabValue(pageTab)}
+            onChange={(i) => {
+              switch (i) {
+                case 0:
+                  return setPageTab("Recent");
+                case 1:
+                  return setPageTab("All");
+                case 2:
+                  return setPageTab("Favorites");
+                case 3:
+                  return setPageTab("Private");
+                case 4:
+                  return setPageTab("Shared");
+                case 5:
+                  return setPageTab("Archived");
+                default:
+                  return setPageTab("All");
+              }
+            }}
+          >
+            <Tab.List as="div" className="mb-6 flex items-center justify-between">
+              <div className="flex flex-wrap items-center gap-4">
+                {PAGE_TABS_LIST.map((tab) => (
+                  <Tab
+                    key={tab.key}
+                    className={({ selected }) =>
+                      `rounded-full border px-5 py-1.5 text-sm outline-none ${
+                        selected
+                          ? "border-custom-primary bg-custom-primary text-white"
+                          : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
+                      }`
+                    }
+                  >
+                    {tab.title}
+                  </Tab>
+                ))}
+              </div>
+            </Tab.List>
+            <Tab.Panels as={Fragment}>
+              <Tab.Panel as="div" className="h-full space-y-5 overflow-y-auto">
+                <RecentPagesList />
+              </Tab.Panel>
+              <Tab.Panel as="div" className="h-full overflow-hidden">
+                <AllPagesList />
+              </Tab.Panel>
+              <Tab.Panel as="div" className="h-full overflow-hidden">
+                <FavoritePagesList />
+              </Tab.Panel>
+              <Tab.Panel as="div" className="h-full overflow-hidden">
+                <PrivatePagesList />
+              </Tab.Panel>
+              <Tab.Panel as="div" className="h-full overflow-hidden">
+                <SharedPagesList />
+              </Tab.Panel>
+              <Tab.Panel as="div" className="h-full overflow-hidden">
+                <ArchivedPagesList />
+              </Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
         </div>
-        <Tab.Group
-          as={Fragment}
-          defaultIndex={currentTabValue(pageTab)}
-          onChange={(i) => {
-            switch (i) {
-              case 0:
-                return setPageTab("Recent");
-              case 1:
-                return setPageTab("All");
-              case 2:
-                return setPageTab("Favorites");
-              case 3:
-                return setPageTab("Private");
-              case 4:
-                return setPageTab("Shared");
-              case 5:
-                return setPageTab("Archived");
-              default:
-                return setPageTab("All");
-            }
-          }}
-        >
-          <Tab.List as="div" className="mb-6 flex items-center justify-between">
-            <div className="flex flex-wrap items-center gap-4">
-              {PAGE_TABS_LIST.map((tab) => (
-                <Tab
-                  key={tab.key}
-                  className={({ selected }) =>
-                    `rounded-full border px-5 py-1.5 text-sm outline-none ${
-                      selected
-                        ? "border-custom-primary bg-custom-primary text-white"
-                        : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
-                    }`
-                  }
-                >
-                  {tab.title}
-                </Tab>
-              ))}
-            </div>
-          </Tab.List>
-          <Tab.Panels as={Fragment}>
-            <Tab.Panel as="div" className="h-full space-y-5 overflow-y-auto">
-              <RecentPagesList />
-            </Tab.Panel>
-            <Tab.Panel as="div" className="h-full overflow-hidden">
-              <AllPagesList />
-            </Tab.Panel>
-            <Tab.Panel as="div" className="h-full overflow-hidden">
-              <FavoritePagesList />
-            </Tab.Panel>
-            <Tab.Panel as="div" className="h-full overflow-hidden">
-              <PrivatePagesList />
-            </Tab.Panel>
-            <Tab.Panel as="div" className="h-full overflow-hidden">
-              <SharedPagesList />
-            </Tab.Panel>
-            <Tab.Panel as="div" className="h-full overflow-hidden">
-              <ArchivedPagesList />
-            </Tab.Panel>
-          </Tab.Panels>
-        </Tab.Group>
-      </div>
-    </>
+      </>
+    </PageStoreProvider>
   );
 });