diff --git a/client/package-lock.json b/client/package-lock.json
index 9f4e672..d6af05b 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,12 +9,14 @@
       "version": "0.1.0",
       "dependencies": {
         "@ant-design/icons": "^5.1.4",
+        "@loadable/component": "^5.15.3",
         "@refinedev/antd": "^5.28.0",
         "@refinedev/core": "^4.26.4",
         "@refinedev/kbar": "^1.1.2",
         "@refinedev/react-router-v6": "^4.3.2",
         "@refinedev/simple-rest": "^4.5.0",
         "@tanstack/react-query": "^4.29.19",
+        "@types/loadable__component": "^5.13.4",
         "antd": "^5.6.4",
         "flag-icons": "^6.7.0",
         "i18next": "^23.2.8",
@@ -1496,6 +1498,26 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
+    "node_modules/@loadable/component": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.15.3.tgz",
+      "integrity": "sha512-VOgYgCABn6+/7aGIpg7m0Ruj34tGetaJzt4bQ345FwEovDQZ+dua+NWLmuJKv8rWZyxOUSfoJkmGnzyDXH2BAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.7",
+        "hoist-non-react-statics": "^3.3.1",
+        "react-is": "^16.12.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2229,6 +2251,14 @@
       "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
       "dev": true
     },
+    "node_modules/@types/loadable__component": {
+      "version": "5.13.4",
+      "resolved": "https://registry.npmjs.org/@types/loadable__component/-/loadable__component-5.13.4.tgz",
+      "integrity": "sha512-YhoCCxyuvP2XeZNbHbi8Wb9EMaUJuA2VGHxJffcQYrJKIKSkymJrhbzsf9y4zpTmr5pExAAEh5hbF628PAZ8Dg==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.11.tgz",
@@ -2246,14 +2276,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "dev": true
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/react": {
       "version": "18.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.14.tgz",
       "integrity": "sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -2272,8 +2300,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
-      "dev": true
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
     },
     "node_modules/@types/semver": {
       "version": "7.5.0",
@@ -5215,6 +5242,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/html-parse-stringify": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
diff --git a/client/package.json b/client/package.json
index ff929c5..8ffdbb0 100644
--- a/client/package.json
+++ b/client/package.json
@@ -8,12 +8,14 @@
   "type": "module",
   "dependencies": {
     "@ant-design/icons": "^5.1.4",
+    "@loadable/component": "^5.15.3",
     "@refinedev/antd": "^5.28.0",
     "@refinedev/core": "^4.26.4",
     "@refinedev/kbar": "^1.1.2",
     "@refinedev/react-router-v6": "^4.3.2",
     "@refinedev/simple-rest": "^4.5.0",
     "@tanstack/react-query": "^4.29.19",
+    "@types/loadable__component": "^5.13.4",
     "antd": "^5.6.4",
     "flag-icons": "^6.7.0",
     "i18next": "^23.2.8",
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 5a68631..b9eee3e 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -20,19 +20,6 @@ import { useTranslation } from "react-i18next";
 import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
 import { Header } from "./components/header";
 import { ColorModeContextProvider } from "./contexts/color-mode";
-import { SpoolCreate, SpoolEdit, SpoolList, SpoolShow } from "./pages/spools";
-import {
-  FilamentCreate,
-  FilamentEdit,
-  FilamentList,
-  FilamentShow,
-} from "./pages/filaments";
-import {
-  VendorCreate,
-  VendorEdit,
-  VendorList,
-  VendorShow,
-} from "./pages/vendors";
 import { ReactComponent as Logo } from "./icon.svg";
 import {
   FileOutlined,
@@ -45,6 +32,22 @@ import { Version } from "./components/version";
 import React from "react";
 import { Locale } from "antd/es/locale";
 import { languages } from "./i18n";
+import loadable from "@loadable/component";
+
+interface PageProps {
+  resource: "spools" | "filaments" | "vendors";
+  page: "list" | "create" | "edit" | "show";
+  mode?: "create" | "clone";
+}
+
+const LoadablePage = loadable(
+  (props: PageProps) => import(`./pages/${props.resource}/${props.page}.tsx`),
+  {
+    fallback: <div>Page is Loading...</div>,
+    cacheKey: (props: PageProps) =>
+      `${props.resource}-${props.page}-${props.mode ?? ""}`,
+  }
+);
 
 function App() {
   const { t, i18n } = useTranslation();
@@ -174,43 +177,112 @@ function App() {
                     element={<NavigateToResource resource="spool" />}
                   />
                   <Route path="/spool">
-                    <Route index element={<SpoolList />} />
+                    <Route
+                      index
+                      element={<LoadablePage resource="spools" page="list" />}
+                    />
                     <Route
                       path="create"
-                      element={<SpoolCreate mode="create" />}
+                      element={
+                        <LoadablePage
+                          resource="spools"
+                          page="create"
+                          mode="create"
+                        />
+                      }
                     />
                     <Route
                       path="clone/:id"
-                      element={<SpoolCreate mode="clone" />}
+                      element={
+                        <LoadablePage
+                          resource="spools"
+                          page="create"
+                          mode="clone"
+                        />
+                      }
+                    />
+                    <Route
+                      path="edit/:id"
+                      element={<LoadablePage resource="spools" page="edit" />}
+                    />
+                    <Route
+                      path="show/:id"
+                      element={<LoadablePage resource="spools" page="show" />}
                     />
-                    <Route path="edit/:id" element={<SpoolEdit />} />
-                    <Route path="show/:id" element={<SpoolShow />} />
                   </Route>
                   <Route path="/filament">
-                    <Route index element={<FilamentList />} />
+                    <Route
+                      index
+                      element={
+                        <LoadablePage resource="filaments" page="list" />
+                      }
+                    />
                     <Route
                       path="create"
-                      element={<FilamentCreate mode="create" />}
+                      element={
+                        <LoadablePage
+                          resource="filaments"
+                          page="create"
+                          mode="create"
+                        />
+                      }
                     />
                     <Route
                       path="clone/:id"
-                      element={<FilamentCreate mode="clone" />}
+                      element={
+                        <LoadablePage
+                          resource="filaments"
+                          page="create"
+                          mode="clone"
+                        />
+                      }
+                    />
+                    <Route
+                      path="edit/:id"
+                      element={
+                        <LoadablePage resource="filaments" page="edit" />
+                      }
+                    />
+                    <Route
+                      path="show/:id"
+                      element={
+                        <LoadablePage resource="filaments" page="show" />
+                      }
                     />
-                    <Route path="edit/:id" element={<FilamentEdit />} />
-                    <Route path="show/:id" element={<FilamentShow />} />
                   </Route>
                   <Route path="/vendor">
-                    <Route index element={<VendorList />} />
+                    <Route
+                      index
+                      element={<LoadablePage resource="vendors" page="list" />}
+                    />
                     <Route
                       path="create"
-                      element={<VendorCreate mode="create" />}
+                      element={
+                        <LoadablePage
+                          resource="vendors"
+                          page="create"
+                          mode="create"
+                        />
+                      }
                     />
                     <Route
                       path="clone/:id"
-                      element={<VendorCreate mode="clone" />}
+                      element={
+                        <LoadablePage
+                          resource="vendors"
+                          page="create"
+                          mode="clone"
+                        />
+                      }
+                    />
+                    <Route
+                      path="edit/:id"
+                      element={<LoadablePage resource="vendors" page="edit" />}
+                    />
+                    <Route
+                      path="show/:id"
+                      element={<LoadablePage resource="vendors" page="show" />}
                     />
-                    <Route path="edit/:id" element={<VendorEdit />} />
-                    <Route path="show/:id" element={<VendorShow />} />
                   </Route>
                   <Route path="*" element={<ErrorComponent />} />
                 </Route>