diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a574f48ef..bdb61920f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
+        "@mantine/core": "^8.0.1",
+        "@mantine/hooks": "^8.0.1",
         "@mui/icons-material": "^7.1.0",
         "@mui/material": "^7.1.0",
         "@testing-library/dom": "^10.4.0",
@@ -22,6 +24,12 @@
         "react-router-dom": "^7.6.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "postcss": "^8.5.3",
+        "postcss-cli": "^11.0.1",
+        "postcss-preset-mantine": "^1.17.0",
+        "postcss-simple-vars": "^7.0.1"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -108,6 +116,12 @@
         "url": "https://opencollective.com/babel"
       }
     },
+    "node_modules/@babel/core/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "license": "MIT"
+    },
     "node_modules/@babel/core/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -2376,21 +2390,6 @@
         "stylis": "4.2.0"
       }
     },
-    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/@emotion/cache": {
       "version": "11.14.0",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
@@ -2622,6 +2621,59 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.0.tgz",
+      "integrity": "sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.0.tgz",
+      "integrity": "sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.28",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "license": "MIT"
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -2772,6 +2824,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@istanbuljs/schema": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
@@ -3035,12 +3096,6 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
-    "node_modules/@jest/transform/node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "license": "MIT"
-    },
     "node_modules/@jest/transform/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -3130,6 +3185,34 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "license": "MIT"
     },
+    "node_modules/@mantine/core": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.0.1.tgz",
+      "integrity": "sha512-4ezaxKjChSPtawamQ3KrJq+x506uTouXlL0Z5fP+t105KnyxMrAJUENhbh2ivD4pq9Zh1BFiD9IWzyu3IXFR8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.28",
+        "clsx": "^2.1.1",
+        "react-number-format": "^5.4.3",
+        "react-remove-scroll": "^2.6.2",
+        "react-textarea-autosize": "8.5.9",
+        "type-fest": "^4.27.0"
+      },
+      "peerDependencies": {
+        "@mantine/hooks": "8.0.1",
+        "react": "^18.x || ^19.x",
+        "react-dom": "^18.x || ^19.x"
+      }
+    },
+    "node_modules/@mantine/hooks": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.0.1.tgz",
+      "integrity": "sha512-GvLdM4Ro3QcDyIgqrdXsUZmeeKye2TNL/k3mEr9JhM5KacHQjr83JPp0u9eLobn7kiyBqpLTYmVYAbmjJdCxHw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.x || ^19.x"
+      }
+    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.0.tgz",
@@ -3215,12 +3298,6 @@
         }
       }
     },
-    "node_modules/@mui/material/node_modules/react-is": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.0.tgz",
-      "integrity": "sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==",
-      "license": "MIT"
-    },
     "node_modules/@mui/private-theming": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.1.0.tgz",
@@ -3369,12 +3446,6 @@
         }
       }
     },
-    "node_modules/@mui/utils/node_modules/react-is": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.0.tgz",
-      "integrity": "sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==",
-      "license": "MIT"
-    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -3499,6 +3570,15 @@
         }
       }
     },
+    "node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -3876,15 +3956,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@testing-library/dom/node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "6.6.3",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz",
@@ -4205,9 +4276,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.15.17",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.17.tgz",
-      "integrity": "sha512-wIX2aSZL5FE+MR0JlvF87BNVrtFWf6AE6rxSE9X7OwnVvoyCQjpzSRJ+M87se/4QCkCiebQAqrJ0y6fwIyi7nw==",
+      "version": "22.15.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.18.tgz",
+      "integrity": "sha512-v1DKRfUdyW+jJhZNEI1PYy29S2YRxMV5AOO/x/SjKmW0acCIOqmbj6Haf9eHAhsPmrhlHSxEhv/1WszcLWV4cg==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -4960,6 +5031,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ansi-html": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.9.tgz",
@@ -5043,12 +5126,12 @@
       }
     },
     "node_modules/aria-query": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
-      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "license": "Apache-2.0",
-      "engines": {
-        "node": ">= 0.4"
+      "dependencies": {
+        "dequal": "^2.0.3"
       }
     },
     "node_modules/array-buffer-byte-length": {
@@ -5352,21 +5435,6 @@
         "proxy-from-env": "^1.1.0"
       }
     },
-    "node_modules/axios/node_modules/form-data": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
-      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -5948,9 +6016,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001717",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001717.tgz",
-      "integrity": "sha512-auPpttCq6BDEG8ZAuHJIplGw6GODhjw+/11e7IjpnYCxZcW/ONgPs0KVBJ0d1bY3e2+7PRe5RCLyP+PfwVgkYw==",
+      "version": "1.0.30001718",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001718.tgz",
+      "integrity": "sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw==",
       "funding": [
         {
           "type": "opencollective",
@@ -6369,18 +6437,18 @@
       }
     },
     "node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "license": "MIT"
     },
     "node_modules/cookie": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
-      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
       "license": "MIT",
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=18"
       }
     },
     "node_modules/cookie-signature": {
@@ -6922,9 +6990,9 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -7038,6 +7106,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dependency-graph": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-1.0.0.tgz",
+      "integrity": "sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -7072,6 +7150,12 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "license": "MIT"
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/detect-port-alt": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
@@ -7336,9 +7420,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.151",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.151.tgz",
-      "integrity": "sha512-Rl6uugut2l9sLojjS4H4SAr3A4IgACMLgpuEMPYCVcKydzfyPrn5absNRju38IhQOf/NwjJY8OGWjlteqYeBCA==",
+      "version": "1.5.154",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.154.tgz",
+      "integrity": "sha512-G4VCFAyKbp1QJ+sWdXYIRYsPGvlV5sDACfCmoMFog3rjm1syLhI41WXm/swZypwCIWIm4IFLWzHY14joWMQ5Fw==",
       "license": "ISC"
     },
     "node_modules/emittery": {
@@ -7917,6 +8001,15 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
       }
     },
+    "node_modules/eslint-plugin-jsx-a11y/node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/eslint-plugin-react": {
       "version": "7.37.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
@@ -8396,6 +8489,15 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/express/node_modules/cookie": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/express/node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -8854,15 +8956,15 @@
       }
     },
     "node_modules/form-data": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.3.tgz",
-      "integrity": "sha512-q5YBMeWy6E2Un0nMGWMgI65MAKtaylxfNJGJxpGh45YDciZB4epbWpaAfImil6CPAPTYB4sh0URQNDRIZG5F2w==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
-        "mime-types": "^2.1.35"
+        "mime-types": "^2.1.12"
       },
       "engines": {
         "node": ">= 6"
@@ -9019,6 +9121,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-own-enumerable-property-symbols": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
@@ -9702,15 +9813,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/import-fresh/node_modules/resolve-from": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/import-local": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
@@ -11421,6 +11523,21 @@
         }
       }
     },
+    "node_modules/jsdom/node_modules/form-data": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.3.tgz",
+      "integrity": "sha512-q5YBMeWy6E2Un0nMGWMgI65MAKtaylxfNJGJxpGh45YDciZB4epbWpaAfImil6CPAPTYB4sh0URQNDRIZG5F2w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -12800,6 +12917,173 @@
         "postcss": "^8.4.6"
       }
     },
+    "node_modules/postcss-cli": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-11.0.1.tgz",
+      "integrity": "sha512-0UnkNPSayHKRe/tc2YGW6XnSqqOA9eqpiRMgRlV1S6HdGi16vwJBx7lviARzbV1HpQHqLLRH3o8vTcB0cLc+5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.3.0",
+        "dependency-graph": "^1.0.0",
+        "fs-extra": "^11.0.0",
+        "picocolors": "^1.0.0",
+        "postcss-load-config": "^5.0.0",
+        "postcss-reporter": "^7.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "read-cache": "^1.0.0",
+        "slash": "^5.0.0",
+        "tinyglobby": "^0.2.12",
+        "yargs": "^17.0.0"
+      },
+      "bin": {
+        "postcss": "index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/fs-extra": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
+      "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/postcss-load-config": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-5.1.0.tgz",
+      "integrity": "sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1",
+        "yaml": "^2.4.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-cli/node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/yaml": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
+      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/postcss-color-functional-notation": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz",
@@ -13246,15 +13530,15 @@
       }
     },
     "node_modules/postcss-load-config/node_modules/yaml": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz",
-      "integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
+      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
       },
       "engines": {
-        "node": ">= 14"
+        "node": ">= 14.6"
       }
     },
     "node_modules/postcss-loader": {
@@ -13401,6 +13685,29 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/postcss-mixins": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-9.0.4.tgz",
+      "integrity": "sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "^3.2.11",
+        "postcss-js": "^4.0.0",
+        "postcss-simple-vars": "^7.0.0",
+        "sugarss": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/postcss-modules-extract-imports": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
@@ -13835,6 +14142,20 @@
         "postcss": "^8.2"
       }
     },
+    "node_modules/postcss-preset-mantine": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/postcss-preset-mantine/-/postcss-preset-mantine-1.17.0.tgz",
+      "integrity": "sha512-ji1PMDBUf2Vsx/HE5faMSs1+ff6qE6YRulTr4Ja+6HD3gop8rSMTCYdpN7KrdsEg079kfBKkO/PaKhG9uR0zwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-mixins": "^9.0.4",
+        "postcss-nested": "^6.0.1"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.0"
+      }
+    },
     "node_modules/postcss-pseudo-class-any-link": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz",
@@ -13894,6 +14215,33 @@
         "postcss": "^8.0.3"
       }
     },
+    "node_modules/postcss-reporter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.1.0.tgz",
+      "integrity": "sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "thenby": "^1.3.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/postcss-selector-not": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz",
@@ -13926,6 +14274,23 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss-simple-vars": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
+      "integrity": "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.1"
+      }
+    },
     "node_modules/postcss-svgo": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
@@ -14078,6 +14443,22 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "license": "MIT"
+    },
+    "node_modules/pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -14428,11 +14809,21 @@
       "license": "MIT"
     },
     "node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.0.tgz",
+      "integrity": "sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==",
       "license": "MIT"
     },
+    "node_modules/react-number-format": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.4.tgz",
+      "integrity": "sha512-wOmoNZoOpvMminhifQYiYSTCLUDOiUbBunrMrMjA+dV52sY+vck1S4UhR6PkgnoCquvvMSeJjErXZ4qSaWCliA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14442,6 +14833,53 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
+      "integrity": "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.0.tgz",
@@ -14480,15 +14918,6 @@
         "react-dom": ">=18"
       }
     },
-    "node_modules/react-router/node_modules/cookie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14562,6 +14991,45 @@
         }
       }
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-textarea-autosize": {
+      "version": "8.5.9",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.9.tgz",
+      "integrity": "sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "use-composed-ref": "^1.3.0",
+        "use-latest": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -14835,7 +15303,7 @@
         "node": ">=8"
       }
     },
-    "node_modules/resolve-from": {
+    "node_modules/resolve-cwd/node_modules/resolve-from": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
       "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
@@ -14844,6 +15312,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -14872,12 +15349,6 @@
         }
       }
     },
-    "node_modules/resolve-url-loader/node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "license": "MIT"
-    },
     "node_modules/resolve-url-loader/node_modules/picocolors": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
@@ -15250,9 +15721,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -15613,12 +16084,12 @@
       "license": "MIT"
     },
     "node_modules/source-map": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
       "license": "BSD-3-Clause",
       "engines": {
-        "node": ">= 8"
+        "node": ">=0.10.0"
       }
     },
     "node_modules/source-map-js": {
@@ -16235,6 +16706,23 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/sugarss": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
+      "integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -16442,6 +16930,12 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "license": "MIT"
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
@@ -16556,13 +17050,13 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.39.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",
-      "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
+      "version": "5.39.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.2.tgz",
+      "integrity": "sha512-yEPUmWve+VA78bI71BW70Dh0TuV4HHd+I5SHOAfS1+QBOmvmCiiffgjR8ryyEd3KIfvPGFqoADt8LdQ6XpXIvg==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.8.2",
+        "acorn": "^8.14.0",
         "commander": "^2.20.0",
         "source-map-support": "~0.5.20"
       },
@@ -16633,6 +17127,13 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "license": "MIT"
     },
+    "node_modules/thenby": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz",
+      "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -16666,6 +17167,51 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "license": "MIT"
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
+      "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
+      "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -16823,12 +17369,12 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
       "license": "(MIT OR CC0-1.0)",
       "engines": {
-        "node": ">=10"
+        "node": ">=16"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -17109,6 +17655,94 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-composed-ref": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.4.0.tgz",
+      "integrity": "sha512-djviaxuOOh7wkj0paeO1Q/4wMZ8Zrnag5H6yBvzN7AKKe8beOaED9SF5/ByLqsku8NP4zQqsvM2u3ew/tJK8/w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.0.tgz",
+      "integrity": "sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-latest": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.3.0.tgz",
+      "integrity": "sha512-mhg3xdm9NaM8q+gLT8KryJPnRFOz1/5XPBhmDEVZK1webPzDjrPk7f/mbpeLqTgB9msytYWANxgALOCJKnLvcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -17168,11 +17802,14 @@
         "node": ">=10.12.0"
       }
     },
-    "node_modules/v8-to-istanbul/node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "license": "MIT"
+    "node_modules/v8-to-istanbul/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 8"
+      }
     },
     "node_modules/vary": {
       "version": "1.1.2",
diff --git a/frontend/package.json b/frontend/package.json
index e40871650..1e66c563f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,6 +6,8 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@mantine/core": "^8.0.1",
+    "@mantine/hooks": "^8.0.1",
     "@mui/icons-material": "^7.1.0",
     "@mui/material": "^7.1.0",
     "@testing-library/dom": "^10.4.0",
@@ -42,5 +44,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "postcss": "^8.5.3",
+    "postcss-cli": "^11.0.1",
+    "postcss-preset-mantine": "^1.17.0",
+    "postcss-simple-vars": "^7.0.1"
   }
 }
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index 33ad091d2..343f48159 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -2,5 +2,6 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+
   },
 }
diff --git a/frontend/src/App.js b/frontend/src/App.js
index a0ea2a744..19f2719f3 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,16 +1,31 @@
-import React from "react";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { ColorSchemeScript, MantineProvider } from '@mantine/core';
+import './index.css';
+import HomePage from './pages/HomePage';
+import SplitPdfPanel from './tools/Split';
+import reportWebVitals from './reportWebVitals';
 
-import HomePage from "./pages/HomePage";
-
-function App() {
+export default function App() {
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-      </Routes>
-    </Router>
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="/split" element={<SplitPdfPanel />} />
+    </Routes>
   );
 }
 
-export default App;
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <ColorSchemeScript />
+    <MantineProvider withGlobalStyles withNormalizeCSS>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </MantineProvider>
+  </React.StrictMode>
+);
+
+reportWebVitals();
diff --git a/frontend/src/components/FileManager.js b/frontend/src/components/FileManager.js
new file mode 100644
index 000000000..ec0cfd615
--- /dev/null
+++ b/frontend/src/components/FileManager.js
@@ -0,0 +1,37 @@
+import React from "react";
+
+export default function FileManager({ files, setFiles, allowMultiple = true }) {
+  const handleFileUpload = (e) => {
+    const uploadedFiles = Array.from(e.target.files);
+    setFiles((prevFiles) => (allowMultiple ? [...prevFiles, ...uploadedFiles] : uploadedFiles));
+  };
+
+  const handleRemoveFile = (index) => {
+    setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div className="space-y-4 w-full max-w-3xl">
+      <input
+        type="file"
+        accept="application/pdf"
+        multiple={allowMultiple}
+        onChange={handleFileUpload}
+        className="block"
+      />
+      <ul className="list-disc pl-5 text-sm">
+        {files.map((file, index) => (
+          <li key={index} className="flex justify-between items-center">
+            {file.name}
+            <button
+              onClick={() => handleRemoveFile(index)}
+              className="text-red-600 hover:underline text-xs"
+            >
+              Remove
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/frontend/src/components/PageEditor.js b/frontend/src/components/PageEditor.js
new file mode 100644
index 000000000..5e331d954
--- /dev/null
+++ b/frontend/src/components/PageEditor.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function PageEditor({ pdfFile }) {
+  return (
+    <div className="w-full h-full flex items-center justify-center">
+      <p className="text-gray-500">Page Editor is under construction.</p>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Viewer.js b/frontend/src/components/Viewer.js
new file mode 100644
index 000000000..b5668e18f
--- /dev/null
+++ b/frontend/src/components/Viewer.js
@@ -0,0 +1,27 @@
+import React from "react";
+
+export default function Viewer({ pdfFile, setPdfFile }) {
+  return pdfFile ? (
+    <iframe
+      src={pdfFile.url}
+      title="PDF Viewer"
+      className="w-full h-full border-none"
+    />
+  ) : (
+    <label className="cursor-pointer text-blue-600 underline">
+      Click to upload a PDF
+      <input
+        type="file"
+        accept="application/pdf"
+        onChange={(e) => {
+          const file = e.target.files[0];
+          if (file && file.type === "application/pdf") {
+            const fileUrl = URL.createObjectURL(file);
+            setPdfFile({ file, url: fileUrl });
+          }
+        }}
+        className="hidden"
+      />
+    </label>
+  );
+}
diff --git a/frontend/src/index.js b/frontend/src/index.js
index d563c0fb1..9915027bf 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,17 +1,22 @@
+import '@mantine/core/styles.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/core';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root')); // Finds the root DOM element
 root.render(
   <React.StrictMode>
-    <App />
+    <ColorSchemeScript />
+    <MantineProvider withGlobalStyles withNormalizeCSS>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </MantineProvider>
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
diff --git a/frontend/src/output.css b/frontend/src/output.css
new file mode 100644
index 000000000..c77b20bc8
--- /dev/null
+++ b/frontend/src/output.css
@@ -0,0 +1,362 @@
+*, ::before, ::after {
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(59 130 246 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
+    --tw-contain-size:  ;
+    --tw-contain-layout:  ;
+    --tw-contain-paint:  ;
+    --tw-contain-style:  
+}
+::backdrop {
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(59 130 246 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
+    --tw-contain-size:  ;
+    --tw-contain-layout:  ;
+    --tw-contain-paint:  ;
+    --tw-contain-style:  
+}
+.mb-3 {
+    margin-bottom: 0.75rem
+}
+.mb-4 {
+    margin-bottom: 1rem
+}
+.mr-2 {
+    margin-right: 0.5rem
+}
+.mt-2 {
+    margin-top: 0.5rem
+}
+.mt-4 {
+    margin-top: 1rem
+}
+.block {
+    display: block
+}
+.flex {
+    display: flex
+}
+.hidden {
+    display: none
+}
+.h-6 {
+    height: 1.5rem
+}
+.h-full {
+    height: 100%
+}
+.h-screen {
+    height: 100vh
+}
+.w-6 {
+    width: 1.5rem
+}
+.w-64 {
+    width: 16rem
+}
+.w-72 {
+    width: 18rem
+}
+.w-full {
+    width: 100%
+}
+.max-w-3xl {
+    max-width: 48rem
+}
+.flex-1 {
+    flex: 1 1 0%
+}
+.cursor-pointer {
+    cursor: pointer
+}
+.list-disc {
+    list-style-type: disc
+}
+.flex-col {
+    flex-direction: column
+}
+.items-center {
+    align-items: center
+}
+.justify-center {
+    justify-content: center
+}
+.justify-between {
+    justify-content: space-between
+}
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
+}
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))
+}
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
+}
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
+}
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
+}
+.overflow-hidden {
+    overflow: hidden
+}
+.overflow-y-auto {
+    overflow-y: auto
+}
+.rounded {
+    border-radius: 0.25rem
+}
+.rounded-md {
+    border-radius: 0.375rem
+}
+.border {
+    border-width: 1px
+}
+.border-b {
+    border-bottom-width: 1px
+}
+.border-l {
+    border-left-width: 1px
+}
+.border-r {
+    border-right-width: 1px
+}
+.border-none {
+    border-style: none
+}
+.bg-blue-600 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1))
+}
+.bg-gray-100 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
+}
+.bg-gray-50 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
+}
+.bg-green-600 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1))
+}
+.bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
+}
+.p-2 {
+    padding: 0.5rem
+}
+.p-4 {
+    padding: 1rem
+}
+.px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem
+}
+.px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem
+}
+.py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem
+}
+.py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem
+}
+.pl-5 {
+    padding-left: 1.25rem
+}
+.text-left {
+    text-align: left
+}
+.text-center {
+    text-align: center
+}
+.text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem
+}
+.text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem
+}
+.text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem
+}
+.text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem
+}
+.font-medium {
+    font-weight: 500
+}
+.font-semibold {
+    font-weight: 600
+}
+.leading-none {
+    line-height: 1
+}
+.text-blue-600 {
+    --tw-text-opacity: 1;
+    color: rgb(37 99 235 / var(--tw-text-opacity, 1))
+}
+.text-gray-500 {
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity, 1))
+}
+.text-gray-600 {
+    --tw-text-opacity: 1;
+    color: rgb(75 85 99 / var(--tw-text-opacity, 1))
+}
+.text-red-500 {
+    --tw-text-opacity: 1;
+    color: rgb(239 68 68 / var(--tw-text-opacity, 1))
+}
+.text-red-600 {
+    --tw-text-opacity: 1;
+    color: rgb(220 38 38 / var(--tw-text-opacity, 1))
+}
+.text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+.underline {
+    text-decoration-line: underline
+}
+.shadow {
+    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+.shadow-sm {
+    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+.grayscale {
+    --tw-grayscale: grayscale(100%);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+.filter {
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+.hover\:bg-blue-700:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1))
+}
+.hover\:bg-gray-200:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
+}
+.hover\:bg-green-700:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1))
+}
+.hover\:underline:hover {
+    text-decoration-line: underline
+}
diff --git a/frontend/src/pages/HomePage.js b/frontend/src/pages/HomePage.js
index 12cb0e4cb..9dd54f651 100644
--- a/frontend/src/pages/HomePage.js
+++ b/frontend/src/pages/HomePage.js
@@ -1,230 +1,180 @@
 import React, { useState } from "react";
-import ConstructionIcon from '@mui/icons-material/Construction';
-import AddToPhotosIcon from '@mui/icons-material/AddToPhotos';
-import ContentCutIcon from '@mui/icons-material/ContentCut';
-import RotateRightIcon from '@mui/icons-material/RotateRight';
-import CropIcon from '@mui/icons-material/Crop';
-import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
-import DeleteIcon from '@mui/icons-material/Delete';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import FullscreenIcon from '@mui/icons-material/Fullscreen';
-import FileUploadIcon from '@mui/icons-material/FileUpload';
-import LooksOneIcon from '@mui/icons-material/LooksOne';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
-import LinkIcon from '@mui/icons-material/Link';
-import CodeIcon from '@mui/icons-material/Code';
-import TableChartIcon from '@mui/icons-material/TableChart';
-import IntegrationInstructionsIcon from '@mui/icons-material/IntegrationInstructions';
-import LockIcon from '@mui/icons-material/Lock';
-import LockOpenIcon from '@mui/icons-material/LockOpen';
-import EditNoteIcon from '@mui/icons-material/EditNote';
-import WorkspacePremiumIcon from '@mui/icons-material/WorkspacePremium';
-import VerifiedIcon from '@mui/icons-material/Verified';
-import RemoveModeratorIcon from '@mui/icons-material/RemoveModerator';
-import SanitizerIcon from '@mui/icons-material/Sanitizer';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import DrawIcon from '@mui/icons-material/Draw';
-import ApprovalIcon from '@mui/icons-material/Approval';
-import WaterDropIcon from '@mui/icons-material/WaterDrop';
-import MenuBookIcon from '@mui/icons-material/MenuBook';
-import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
-import AssignmentIcon from '@mui/icons-material/Assignment';
-import CollectionsIcon from '@mui/icons-material/Collections';
-import LayersClearIcon from '@mui/icons-material/LayersClear';
-import ScannerIcon from '@mui/icons-material/Scanner';
-import NoteAltIcon from '@mui/icons-material/NoteAlt';
-import CompareIcon from '@mui/icons-material/Compare';
-import InfoIcon from '@mui/icons-material/Info';
-import HighlightOffIcon from '@mui/icons-material/HighlightOff';
-import InvertColorsIcon from '@mui/icons-material/InvertColors';
-import AccountTreeIcon from '@mui/icons-material/AccountTree';
-import PaletteIcon from '@mui/icons-material/Palette';
-import ZoomInMapIcon from '@mui/icons-material/ZoomInMap';
-import BuildIcon from '@mui/icons-material/Build';
-import DriveFileRenameOutlineIcon from '@mui/icons-material/DriveFileRenameOutline';
-import JavascriptIcon from '@mui/icons-material/Javascript';
-import SegmentIcon from '@mui/icons-material/Segment';
-import LayersIcon from '@mui/icons-material/Layers';
-import GridOnIcon from '@mui/icons-material/GridOn';
-import AutoStoriesIcon from '@mui/icons-material/AutoStories';
-import Icon from '@mui/material/Icon';
+import AddToPhotosIcon from "@mui/icons-material/AddToPhotos";
+import ContentCutIcon from "@mui/icons-material/ContentCut";
+import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import EditNoteIcon from "@mui/icons-material/EditNote";
+import { Group, SegmentedControl, Paper, Center, Stack, Button, Text, Box } from "@mantine/core";
 
+import FileManager from "../components/FileManager";
 import SplitPdfPanel from "../tools/Split";
-import CompressPdfPanel from "../tools/Compress-pdf";
+import CompressPdfPanel from "../tools/Compress";
+import MergePdfPanel from "../tools/Merge";
+import PageEditor from "../components/PageEditor";
+import Viewer from "../components/Viewer";
 
 const toolRegistry = {
-  "split-pdf": { icon: <PictureAsPdfIcon />, name: "Split PDF", component: SplitPdfPanel },
-  "compress-pdf": { icon: <ZoomInMapIcon />, name: "Compress PDF", component: CompressPdfPanel }
+  split: { icon: <ContentCutIcon />, name: "Split PDF", component: SplitPdfPanel, view: "viewer" },
+  compress: { icon: <ZoomInMapIcon />, name: "Compress PDF", component: CompressPdfPanel, view: "viewer" },
+  merge: { icon: <AddToPhotosIcon />, name: "Merge PDFs", component: MergePdfPanel, view: "fileManager" },
 };
 
-const tools = Object.entries(toolRegistry).map(([id, { icon, name }]) => ({ id, icon, name }));
-
-// Example tool panels
-function ToolPanel({ selectedTool }) {
-  if (!selectedTool) {
-    return (
-      <div className="p-2 border rounded bg-white shadow-sm">
-        <p className="text-sm">Select a tool to begin interacting with the PDF.</p>
-      </div>
-    );
-  }
-  return (
-    <div className="p-2 border rounded bg-white shadow-sm">
-      <h3 className="font-semibold text-sm mb-2">{selectedTool.name}</h3>
-      <p className="text-xs text-gray-600">This is the panel for {selectedTool.name}.</p>
-    </div>
-  );
-}
-
-export default function HomePage() {
-const tools = [
-  { id: "multi-tool", icon: <ConstructionIcon />, name: "Multi-Tool" },
-  { id: "merge-pdfs", icon: <AddToPhotosIcon />, name: "Merge PDFs" },
-  { id: "split-pdf", icon: <ContentCutIcon />, name: "Split PDF" },
-  { id: "rotate-pdf", icon: <RotateRightIcon />, name: "Rotate Pages" },
-  { id: "crop", icon: <CropIcon />, name: "Crop PDF" },
-  { id: "pdf-organizer", icon: <FormatListBulletedIcon />, name: "PDF Organizer" },
-  { id: "remove-pages", icon: <DeleteIcon />, name: "Remove Pages" },
-  { id: "multi-page-layout", icon: <DashboardIcon />, name: "Page Layout" },
-  { id: "scale-pages", icon: <FullscreenIcon />, name: "Scale Pages" },
-  { id: "extract-page", icon: <FileUploadIcon />, name: "Extract Page" },
-  { id: "pdf-to-single-page", icon: <LooksOneIcon />, name: "PDF to Single Page" },
-  { id: "img-to-pdf", icon: <PictureAsPdfIcon />, name: "Image to PDF" },
-  { id: "file-to-pdf", icon: <InsertDriveFileIcon />, name: "File to PDF" },
-  { id: "url-to-pdf", icon: <LinkIcon />, name: "URL to PDF" },
-  { id: "html-to-pdf", icon: <CodeIcon />, name: "HTML to PDF" },
-  { id: "markdown-to-pdf", icon: <IntegrationInstructionsIcon />, name: "Markdown to PDF" },
-  { id: "pdf-to-img", icon: <CollectionsIcon />, name: "PDF to Image" },
-  { id: "pdf-to-pdfa", icon: <PictureAsPdfIcon />, name: "PDF to PDF/A" },
-  { id: "pdf-to-word", icon: <InsertDriveFileIcon />, name: "PDF to Word" },
-  { id: "pdf-to-presentation", icon: <DashboardIcon />, name: "PDF to Presentation" },
-  { id: "pdf-to-text", icon: <AssignmentIcon />, name: "PDF to Text" },
-  { id: "pdf-to-html", icon: <CodeIcon />, name: "PDF to HTML" },
-  { id: "pdf-to-xml", icon: <CodeIcon />, name: "PDF to XML" },
-  { id: "pdf-to-csv", icon: <TableChartIcon />, name: "PDF to CSV" },
-  { id: "pdf-to-markdown", icon: <IntegrationInstructionsIcon />, name: "PDF to Markdown" },
-  { id: "add-password", icon: <LockIcon />, name: "Add Password" },
-  { id: "remove-password", icon: <LockOpenIcon />, name: "Remove Password" },
-  { id: "change-permissions", icon: <LockIcon />, name: "Change Permissions" },
-  { id: "sign", icon: <EditNoteIcon />, name: "Sign PDF" },
-  { id: "cert-sign", icon: <WorkspacePremiumIcon />, name: "Certify Signature" },
-  { id: "validate-signature", icon: <VerifiedIcon />, name: "Validate Signature" },
-  { id: "remove-cert-sign", icon: <RemoveModeratorIcon />, name: "Remove Cert Signature" },
-  { id: "sanitize-pdf", icon: <SanitizerIcon />, name: "Sanitize PDF" },
-  { id: "auto-redact", icon: <VisibilityOffIcon />, name: "Auto Redact" },
-  { id: "redact", icon: <DrawIcon />, name: "Manual Redact" },
-  { id: "stamp", icon: <ApprovalIcon />, name: "Add Stamp" },
-  { id: "add-watermark", icon: <WaterDropIcon />, name: "Add Watermark" },
-  { id: "view-pdf", icon: <MenuBookIcon />, name: "View PDF" },
-  { id: "add-page-numbers", icon: <LooksOneIcon />, name: "Add Page Numbers" },
-  { id: "add-image", icon: <AddPhotoAlternateIcon />, name: "Add Image" },
-  { id: "change-metadata", icon: <AssignmentIcon />, name: "Change Metadata" },
-  { id: "ocr-pdf", icon: <LayersIcon />, name: "OCR PDF" },
-  { id: "extract-images", icon: <CollectionsIcon />, name: "Extract Images" },
-  { id: "flatten", icon: <LayersClearIcon />, name: "Flatten PDF" },
-  { id: "remove-blanks", icon: <ScannerIcon />, name: "Remove Blank Pages" },
-  { id: "remove-annotations", icon: <NoteAltIcon />, name: "Remove Annotations" },
-  { id: "compare", icon: <CompareIcon />, name: "Compare PDFs" },
-  { id: "get-info-on-pdf", icon: <InfoIcon />, name: "PDF Info" },
-  { id: "remove-image-pdf", icon: <HighlightOffIcon />, name: "Remove Images from PDF" },
-  { id: "replace-and-invert-color-pdf", icon: <InvertColorsIcon />, name: "Invert Colors" },
-  { id: "unlock-pdf-forms", icon: <LayersIcon />, name: "Unlock PDF Forms" },
-  { id: "pipeline", icon: <AccountTreeIcon />, name: "Pipeline" },
-  { id: "adjust-contrast", icon: <PaletteIcon />, name: "Adjust Contrast" },
-  { id: "compress-pdf", icon: <ZoomInMapIcon />, name: "Compress PDF" },
-  { id: "extract-image-scans", icon: <ScannerIcon />, name: "Extract Image Scans" },
-  { id: "repair", icon: <BuildIcon />, name: "Repair PDF" },
-  { id: "auto-rename", icon: <DriveFileRenameOutlineIcon />, name: "Auto Rename" },
-  { id: "show-javascript", icon: <JavascriptIcon />, name: "Show JavaScript" },
-  { id: "overlay-pdf", icon: <LayersIcon />, name: "Overlay PDF" },
-
+const VIEW_OPTIONS = [
+  {
+    label: (
+      <Group gap={4}>
+        <VisibilityIcon fontSize="small" />
+      </Group>
+    ),
+    value: "viewer",
+  },
+  {
+    label: (
+      <Group gap={4}>
+        <EditNoteIcon fontSize="small" />
+      </Group>
+    ),
+    value: "pageEditor",
+  },
+  {
+    label: (
+      <Group gap={4}>
+        <InsertDriveFileIcon fontSize="small" />
+      </Group>
+    ),
+    value: "fileManager",
+  },
 ];
 
-const [selectedTool, setSelectedTool] = useState(null);
-const [search, setSearch] = useState("");
-const [pdfFile, setPdfFile] = useState(null);
-const SelectedComponent = selectedTool ? toolRegistry[selectedTool.id]?.component : null;
-const [downloadUrl, setDownloadUrl] = useState(null);
+export default function HomePage() {
+  const [selectedToolKey, setSelectedToolKey] = useState("split");
+  const [currentView, setCurrentView] = useState("viewer");
+  const [pdfFile, setPdfFile] = useState(null);
+  const [files, setFiles] = useState([]);
+  const [downloadUrl, setDownloadUrl] = useState(null);
 
-const filteredTools = tools.filter(tool =>
-  tool.name.toLowerCase().includes(search.toLowerCase())
-);
+  const selectedTool = toolRegistry[selectedToolKey];
 
-function handleFileUpload(e) {
-  const file = e.target.files[0];
-  if (file && file.type === "application/pdf") {
-    const fileUrl = URL.createObjectURL(file);
-    setPdfFile({ file, url: fileUrl });
-  }
-}
-
-return (    <div className="flex h-screen overflow-hidden">
-  {/* Left Sidebar */}
-  <div className="w-64 bg-gray-100 p-4 flex flex-col space-y-2 overflow-y-auto border-r">
-    <input
-      type="text"
-      placeholder="Search tools..."
-      value={search}
-      onChange={(e) => setSearch(e.target.value)}
-      className="mb-3 px-2 py-1 border rounded text-sm"
-    />
-    {filteredTools.map(tool => (
-      <button
-        key={tool.id}
-        title={tool.name}
-        onClick={() => setSelectedTool(tool)}
-        className="flex items-center space-x-3 p-2 hover:bg-gray-200 rounded text-left"
+  return (
+    <Group align="flex-start" spacing={0} style={{ minHeight: "100vh" }}>
+      {/* Left: Tool Picker */}
+      <Box
+        style={{
+          width: 220,
+          background: "#f8f9fa",
+          borderRight: "1px solid #e9ecef",
+          minHeight: "100vh",
+          padding: 16,
+        }}
       >
-        <div className="text-xl leading-none flex items-center justify-center h-6 w-6">
-          {tool.icon}
-        </div>
-        <span className="text-sm font-medium">{tool.name}</span>
-      </button>
-    ))}
-  </div>
+        <Text size="lg" weight={500} mb="md">
+          Tools
+        </Text>
+        <Stack spacing="sm">
+          {Object.entries(toolRegistry).map(([id, { icon, name }]) => (
+            <Button
+              key={id}
+              variant={selectedToolKey === id ? "filled" : "subtle"}
+              leftIcon={icon}
+              onClick={() => {
+                setSelectedToolKey(id);
+                if (toolRegistry[id].view) setCurrentView(toolRegistry[id].view);
+              }}
+              fullWidth
+              size="md"
+              radius="md"
+            >
+              {name}
+            </Button>
+          ))}
+        </Stack>
+      </Box>
 
-{/* Central PDF Viewer Area */}
-<div className="flex-1 bg-white flex items-center justify-center overflow-hidden">
-  <div className="w-full h-full max-w-5xl max-h-[95vh] border rounded shadow-md bg-gray-50 flex items-center justify-center">
-    {!pdfFile ? (
-      <label className="cursor-pointer text-blue-600 underline">
-        Click to upload a PDF
-        <input
-          type="file"
-          accept="application/pdf"
-          onChange={handleFileUpload}
-          className="hidden"
-        />
-      </label>
-    ) : (
-      <iframe
-        src={pdfFile.url}
-        title="PDF Viewer"
-        className="w-full h-full border-none"
-      />
-    )}
-  </div>
-</div>
+      {/* Middle: Main View (Viewer, Editor, Manager) */}
+      <Box
+        style={{
+          flex: 1,
+          minWidth: 0,
+          padding: 24,
+          background: "#fff",
+          minHeight: "100vh",
+          position: "relative",
+        }}
+      >
+        <Center>
+          <Paper
+            radius="xl"
+            shadow="sm"
+            p={4}
+            style={{
+              display: "inline-block",
+              marginTop: 8,
+              marginBottom: 24,
+              background: "#f8f9fa",
+              zIndex: 10,
+            }}
+          >
+            <SegmentedControl
+              data={VIEW_OPTIONS}
+              value={currentView}
+              onChange={setCurrentView}
+              color="blue"
+              radius="xl"
+              size="md"
+            />
+          </Paper>
+        </Center>
+        <Box>
+          {currentView === "viewer" && (
+            <Viewer
+              file={pdfFile}
+              setFile={setPdfFile}
+              downloadUrl={downloadUrl}
+              setDownloadUrl={setDownloadUrl}
+            />
+          )}
+          {currentView === "pageEditor" && (
+            <PageEditor
+              file={pdfFile}
+              setFile={setPdfFile}
+              downloadUrl={downloadUrl}
+              setDownloadUrl={setDownloadUrl}
+            />
+          )}
+          {currentView === "fileManager" && (
+            <FileManager
+              files={files}
+              setFiles={setFiles}
+              setPdfFile={setPdfFile}
+            />
+          )}
+        </Box>
+      </Box>
 
-  {/* Right Sidebar: Tool Interactions */}
-  <div className="w-72 bg-gray-50 p-4 border-l overflow-y-auto">
-    <h2 className="text-lg font-semibold mb-4">Tool Panel</h2>
-    <div className="space-y-3">
-      {SelectedComponent ? (
-        <SelectedComponent file={pdfFile} downloadUrl setDownloadUrl />
-      ) : selectedTool ? (
-        <div className="p-2 border rounded bg-white shadow-sm">
-          <h3 className="font-semibold text-sm mb-2">{selectedTool.name}</h3>
-          <p className="text-xs text-gray-600">This is the panel for {selectedTool.name}.</p>
-        </div>
-      ) : (
-        <div className="p-2 border rounded bg-white shadow-sm">
-          <p className="text-sm">Select a tool to begin interacting with the PDF.</p>
-        </div>
-      )}
-    </div>
-  </div>
-</div>
-);
+      {/* Right: Tool Interaction */}
+      <Box
+        style={{
+          width: 380,
+          background: "#f8f9fa",
+          borderLeft: "1px solid #e9ecef",
+          minHeight: "100vh",
+          padding: 24,
+        }}
+      >
+        {selectedTool && selectedTool.component && (
+          <Paper p="md" radius="md" shadow="xs">
+            {React.createElement(selectedTool.component, {
+              file: pdfFile,
+              setPdfFile,
+              files,
+              setFiles,
+              downloadUrl,
+              setDownloadUrl,
+            })}
+          </Paper>
+        )}
+      </Box>
+    </Group>
+  );
 }
diff --git a/frontend/src/tools/Compress-pdf.js b/frontend/src/tools/Compress-pdf.js
deleted file mode 100644
index a2d4270f7..000000000
--- a/frontend/src/tools/Compress-pdf.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { useState } from "react";
-import axios from "axios";
-
-export default function CompressPdfPanel({file}) {
-  const [optimizeLevel, setOptimizeLevel] = useState("5");
-  const [grayscale, setGrayscale] = useState(false);
-  const [expectedOutputSize, setExpectedOutputSize] = useState("");
-  const [status, setStatus] = useState("");
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-
-    if (!file) {
-      setStatus("Please select a file.");
-      return;
-    }
-
-    const formData = new FormData();
-    formData.append("fileInput", file.file);
-    formData.append("optimizeLevel", optimizeLevel);
-    formData.append("grayscale", grayscale);
-    if (expectedOutputSize) {
-      formData.append("expectedOutputSize", expectedOutputSize);
-    }
-
-    setStatus("Compressing...");
-
-    try {
-      const response = await axios.post("/api/v1/misc/compress-pdf", formData, {
-        responseType: "blob",
-      });
-
-      const url = window.URL.createObjectURL(new Blob([response.data]));
-      const link = document.createElement("a");
-      link.href = url;
-      link.setAttribute("download", "compressed.pdf");
-      document.body.appendChild(link);
-      link.click();
-
-      setStatus("Download ready!");
-    } catch (error) {
-      console.error(error);
-      setStatus("Failed to compress PDF.");
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-4 text-sm">
-
-      <div>
-        <label className="block font-medium">Compression Level (1-9)</label>
-        <select
-          value={optimizeLevel}
-          onChange={(e) => setOptimizeLevel(e.target.value)}
-          className="w-full border px-2 py-1 rounded"
-        >
-          {[...Array(9)].map((_, i) => (
-            <option key={i + 1} value={i + 1}>{i + 1}</option>
-          ))}
-        </select>
-      </div>
-
-      <div className="flex items-center">
-        <input
-          type="checkbox"
-          id="grayscale"
-          checked={grayscale}
-          onChange={(e) => setGrayscale(e.target.checked)}
-          className="mr-2"
-        />
-        <label htmlFor="grayscale">Convert images to grayscale</label>
-      </div>
-
-      <div>
-        <label className="block font-medium">Expected Output Size (e.g. 2MB)</label>
-        <input
-          type="text"
-          value={expectedOutputSize}
-          onChange={(e) => setExpectedOutputSize(e.target.value)}
-          className="w-full border px-2 py-1 rounded"
-        />
-      </div>
-
-      <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded">
-        Compress PDF
-      </button>
-
-      {status && <p className="text-xs text-gray-600 mt-2">{status}</p>}
-    </form>
-  );
-}
diff --git a/frontend/src/tools/Compress.js b/frontend/src/tools/Compress.js
new file mode 100644
index 000000000..43cadcf58
--- /dev/null
+++ b/frontend/src/tools/Compress.js
@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { Stack, Slider, Group, Text, Button, Checkbox, TextInput, Paper } from "@mantine/core";
+
+export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoading }) {
+  const [selected, setSelected] = useState(files.map(() => false));
+  const [compressionLevel, setCompressionLevel] = useState(5); // 1-9, default 5
+  const [grayscale, setGrayscale] = useState(false);
+  const [removeMetadata, setRemoveMetadata] = useState(false);
+  const [expectedSize, setExpectedSize] = useState("");
+  const [aggressive, setAggressive] = useState(false);
+  const [localLoading, setLocalLoading] = useState(false);
+
+  // Update selection state if files prop changes
+  React.useEffect(() => {
+    setSelected(files.map(() => false));
+  }, [files]);
+
+  const handleCheckbox = idx => {
+    setSelected(sel => sel.map((v, i) => (i === idx ? !v : v)));
+  };
+
+  const handleCompress = async () => {
+    const selectedFiles = files.filter((_, i) => selected[i]);
+    if (selectedFiles.length === 0) return;
+    setLocalLoading(true);
+    setLoading?.(true);
+
+    const formData = new FormData();
+    selectedFiles.forEach(file => formData.append("fileInput", file));
+    formData.append("compressionLevel", compressionLevel);
+    formData.append("grayscale", grayscale);
+    formData.append("removeMetadata", removeMetadata);
+    formData.append("aggressive", aggressive);
+    if (expectedSize) formData.append("expectedSize", expectedSize);
+
+    try {
+      const res = await fetch("/api/v1/general/compress-pdf", {
+        method: "POST",
+        body: formData,
+      });
+      const blob = await res.blob();
+      setDownloadUrl(URL.createObjectURL(blob));
+    } finally {
+      setLocalLoading(false);
+      setLoading?.(false);
+    }
+  };
+
+  return (
+    <Paper shadow="xs" p="md" radius="md" withBorder>
+      <Stack>
+        <Text weight={500} mb={4}>Select files to compress:</Text>
+        <Stack spacing={4}>
+          {files.length === 0 && <Text color="dimmed" size="sm">No files loaded.</Text>}
+          {files.map((file, idx) => (
+            <Checkbox
+              key={file.name + idx}
+              label={file.name}
+              checked={selected[idx] || false}
+              onChange={() => handleCheckbox(idx)}
+            />
+          ))}
+        </Stack>
+        <Stack spacing={4} mb={14}>
+          <Text size="sm" style={{ minWidth: 140 }}>Compression Level</Text>
+          <Slider
+            min={1}
+            max={9}
+            step={1}
+            value={compressionLevel}
+            onChange={setCompressionLevel}
+            marks={[
+              { value: 1, label: "1" },
+              { value: 5, label: "5" },
+              { value: 9, label: "9" },
+            ]}
+            style={{ flex: 1 }}
+          />
+        </Stack >
+        <Checkbox
+          label="Convert images to grayscale"
+          checked={grayscale}
+          onChange={e => setGrayscale(e.currentTarget.checked)}
+        />
+        <Checkbox
+          label="Remove PDF metadata"
+          checked={removeMetadata}
+          onChange={e => setRemoveMetadata(e.currentTarget.checked)}
+        />
+        <Checkbox
+          label="Aggressive compression (may reduce quality)"
+          checked={aggressive}
+          onChange={e => setAggressive(e.currentTarget.checked)}
+        />
+        <TextInput
+          label="Expected output size (e.g. 2MB, 500KB)"
+          placeholder="Optional"
+          value={expectedSize}
+          onChange={e => setExpectedSize(e.currentTarget.value)}
+        />
+        <Button
+          onClick={handleCompress}
+          loading={localLoading}
+          disabled={selected.every(v => !v)}
+          fullWidth
+          mt="md"
+        >
+          Compress Selected PDF{selected.filter(Boolean).length > 1 ? "s" : ""}
+        </Button>
+      </Stack>
+    </Paper>
+  );
+}
diff --git a/frontend/src/tools/Merge.js b/frontend/src/tools/Merge.js
new file mode 100644
index 000000000..6c7945894
--- /dev/null
+++ b/frontend/src/tools/Merge.js
@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from "react";
+
+export default function MergePdfPanel({ files, setDownloadUrl }) {
+  const [selectedFiles, setSelectedFiles] = useState([]);
+  const [downloadUrl, setLocalDownloadUrl] = useState(null); // Local state for download URL
+  const [isLoading, setIsLoading] = useState(false); // Loading state
+  const [errorMessage, setErrorMessage] = useState(null); // Error message state
+
+  // Sync selectedFiles with files whenever files change
+  useEffect(() => {
+    setSelectedFiles(files.map(() => true)); // Select all files by default
+  }, [files]);
+
+  const handleMerge = async () => {
+    const filesToMerge = files.filter((_, index) => selectedFiles[index]);
+
+    if (filesToMerge.length < 2) {
+      alert("Please select at least two PDFs to merge.");
+      return;
+    }
+
+    const formData = new FormData();
+    filesToMerge.forEach((file) => formData.append("fileInput", file)); // Use "fileInput" as the key
+
+    setIsLoading(true); // Start loading
+    setErrorMessage(null); // Clear previous errors
+
+    try {
+      const response = await fetch("/api/v1/general/merge-pdfs", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Failed to merge PDFs: ${errorText}`);
+      }
+
+      const blob = await response.blob();
+      const downloadUrl = URL.createObjectURL(blob);
+      setDownloadUrl(downloadUrl); // Pass to parent component
+      setLocalDownloadUrl(downloadUrl); // Store locally for download button
+    } catch (error) {
+      console.error("Error merging PDFs:", error);
+      setErrorMessage(error.message); // Set error message
+    } finally {
+      setIsLoading(false); // Stop loading
+    }
+  };
+
+  const handleCheckboxChange = (index) => {
+    setSelectedFiles((prevSelectedFiles) =>
+      prevSelectedFiles.map((selected, i) => (i === index ? !selected : selected))
+    );
+  };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="font-semibold text-lg">Merge PDFs</h3>
+      <ul className="list-disc pl-5 text-sm">
+        {files.map((file, index) => (
+          <li key={index} className="flex items-center space-x-2">
+            <input
+              type="checkbox"
+              checked={selectedFiles[index]}
+              onChange={() => handleCheckboxChange(index)}
+              className="form-checkbox"
+            />
+            <span>{file.name}</span>
+          </li>
+        ))}
+      </ul>
+      {files.filter((_, index) => selectedFiles[index]).length < 2 && (
+        <p className="text-sm text-red-500">
+          Please select at least two PDFs to merge.
+        </p>
+      )}
+      <button
+        onClick={handleMerge}
+        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+        disabled={files.filter((_, index) => selectedFiles[index]).length < 2 || isLoading}
+      >
+        {isLoading ? "Merging..." : "Merge PDFs"}
+      </button>
+      {errorMessage && (
+        <p className="text-sm text-red-500 mt-2">
+          {errorMessage}
+        </p>
+      )}
+      {downloadUrl && (
+        <a
+          href={downloadUrl}
+          download="merged.pdf"
+          className="block mt-4 px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 text-center"
+        >
+          Download Merged PDF
+        </a>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/tools/Split.js b/frontend/src/tools/Split.js
index ea0c88d3f..713625588 100644
--- a/frontend/src/tools/Split.js
+++ b/frontend/src/tools/Split.js
@@ -1,10 +1,33 @@
 import React, { useState } from "react";
 import axios from "axios";
-import DownloadIcon from '@mui/icons-material/Download';
+import {
+  Button,
+  Select,
+  TextInput,
+  Checkbox,
+  Notification,
+  Stack,
+} from "@mantine/core";
+import DownloadIcon from "@mui/icons-material/Download";
 
 export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
   const [mode, setMode] = useState("byPages");
+  const [pageNumbers, setPageNumbers] = useState("");
+
+  const [horizontalDivisions, setHorizontalDivisions] = useState("0");
+  const [verticalDivisions, setVerticalDivisions] = useState("1");
+  const [mergeSections, setMergeSections] = useState(false);
+
+  const [splitType, setSplitType] = useState("size");
+  const [splitValue, setSplitValue] = useState("");
+
+  const [bookmarkLevel, setBookmarkLevel] = useState("0");
+  const [includeMetadata, setIncludeMetadata] = useState(false);
+  const [allowDuplicates, setAllowDuplicates] = useState(false);
+
   const [status, setStatus] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(null);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -17,175 +40,168 @@ export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
     formData.append("fileInput", file.file);
 
     let endpoint = "";
-    if (mode === "byPages") {
-      const pageNumbers = document.getElementById("pagesInput").value;
-      formData.append("pageNumbers", pageNumbers);
-      endpoint = "/api/v1/general/split-pages";
-    } else if (mode === "bySections") {
-      const horizontal = document.getElementById("horizontalDivisions").value;
-      const vertical = document.getElementById("verticalDivisions").value;
-      const merge = document.getElementById("merge").checked;
-      formData.append("horizontalDivisions", horizontal);
-      formData.append("verticalDivisions", vertical);
-      formData.append("merge", merge);
-      endpoint = "/api/v1/general/split-pdf-by-sections";
-    } else if (mode === "bySizeOrCount") {
-      const splitType = document.getElementById("splitType").value;
-      const splitValue = document.getElementById("splitValue").value;
-      formData.append("splitType", splitType === "size" ? 0 : splitType === "pages" ? 1 : 2);
-      formData.append("splitValue", splitValue);
-      endpoint = "/api/v1/general/split-by-size-or-count";
-    } else if (mode === "byChapters") {
-      const bookmarkLevel = document.getElementById("bookmarkLevel").value;
-      const includeMetadata = document.getElementById("includeMetadata").checked;
-      const allowDuplicates = document.getElementById("allowDuplicates").checked;
-      formData.append("bookmarkLevel", bookmarkLevel);
-      formData.append("includeMetadata", includeMetadata);
-      formData.append("allowDuplicates", allowDuplicates);
-      endpoint = "/api/v1/general/split-pdf-by-chapters";
+
+    switch (mode) {
+      case "byPages":
+        formData.append("pageNumbers", pageNumbers);
+        endpoint = "/api/v1/general/split-pages";
+        break;
+      case "bySections":
+        formData.append("horizontalDivisions", horizontalDivisions);
+        formData.append("verticalDivisions", verticalDivisions);
+        formData.append("merge", mergeSections);
+        endpoint = "/api/v1/general/split-pdf-by-sections";
+        break;
+      case "bySizeOrCount":
+        formData.append("splitType", splitType === "size" ? 0 : splitType === "pages" ? 1 : 2);
+        formData.append("splitValue", splitValue);
+        endpoint = "/api/v1/general/split-by-size-or-count";
+        break;
+      case "byChapters":
+        formData.append("bookmarkLevel", bookmarkLevel);
+        formData.append("includeMetadata", includeMetadata);
+        formData.append("allowDuplicates", allowDuplicates);
+        endpoint = "/api/v1/general/split-pdf-by-chapters";
+        break;
+      default:
+        return;
     }
 
     setStatus("Processing split...");
+    setIsLoading(true);
+    setErrorMessage(null);
 
     try {
       const response = await axios.post(endpoint, formData, { responseType: "blob" });
-      const link = document.createElement("a");
-      link.href = url;
-      link.setAttribute("download", "split_output.zip");
-      document.body.appendChild(link);
       const blob = new Blob([response.data], { type: "application/zip" });
       const url = window.URL.createObjectURL(blob);
       setDownloadUrl(url);
       setStatus("Download ready.");
-        } catch (error) {
+    } catch (error) {
       console.error(error);
+      setErrorMessage(error.response?.data || "An error occurred while splitting the PDF.");
       setStatus("Split failed.");
+    } finally {
+      setIsLoading(false);
     }
   };
 
   return (
-    <form onSubmit={handleSubmit} className="p-2 border rounded bg-white shadow-sm space-y-4 text-sm">
+    <form onSubmit={handleSubmit} >
       <h3 className="font-semibold">Split PDF</h3>
 
-      <div>
-        <label className="block mb-1 font-medium">Split Mode</label>
-        <select
-          value={mode}
-          onChange={(e) => setMode(e.target.value)}
-          className="w-full border px-2 py-1 rounded"
-        >
-          <option value="byPages">Split by Pages (e.g. 1,3,5-10)</option>
-          <option value="bySections">Split by Grid Sections</option>
-          <option value="bySizeOrCount">Split by Size or Count</option>
-          <option value="byChapters">Split by Chapters</option>
-        </select>
-      </div>
-
+      <Select
+        label="Split Mode"
+        value={mode}
+        onChange={setMode}
+        data={[
+          { value: "byPages", label: "Split by Pages (e.g. 1,3,5-10)" },
+          { value: "bySections", label: "Split by Grid Sections" },
+          { value: "bySizeOrCount", label: "Split by Size or Count" },
+          { value: "byChapters", label: "Split by Chapters" },
+        ]}
+      />
       {mode === "byPages" && (
-        <div>
-          <label className="block font-medium mb-1">Pages</label>
-          <input
-            type="text"
-            id="pagesInput"
-            className="w-full border px-2 py-1 rounded"
-            placeholder="e.g. 1,3,5-10"
-          />
-        </div>
+        <TextInput
+          label="Pages"
+          placeholder="e.g. 1,3,5-10"
+          value={pageNumbers}
+          onChange={(e) => setPageNumbers(e.target.value)}
+        />
       )}
 
       {mode === "bySections" && (
-        <div className="space-y-2">
-          <div>
-            <label className="block font-medium mb-1">Horizontal Divisions</label>
-            <input
-              type="number"
-              id="horizontalDivisions"
-              className="w-full border px-2 py-1 rounded"
-              min="0"
-              max="300"
-              defaultValue="0"
-            />
-          </div>
-          <div>
-            <label className="block font-medium mb-1">Vertical Divisions</label>
-            <input
-              type="number"
-              id="verticalDivisions"
-              className="w-full border px-2 py-1 rounded"
-              min="0"
-              max="300"
-              defaultValue="1"
-            />
-          </div>
-          <div className="flex items-center space-x-2">
-            <input type="checkbox" id="merge" />
-            <label htmlFor="merge">Merge sections into one PDF</label>
-          </div>
-        </div>
+        <Stack spacing="sm">
+          <TextInput
+            label="Horizontal Divisions"
+            type="number"
+            min="0"
+            max="300"
+            value={horizontalDivisions}
+            onChange={(e) => setHorizontalDivisions(e.target.value)}
+          />
+          <TextInput
+            label="Vertical Divisions"
+            type="number"
+            min="0"
+            max="300"
+            value={verticalDivisions}
+            onChange={(e) => setVerticalDivisions(e.target.value)}
+          />
+          <Checkbox
+            label="Merge sections into one PDF"
+            checked={mergeSections}
+            onChange={(e) => setMergeSections(e.currentTarget.checked)}
+          />
+        </Stack>
       )}
 
       {mode === "bySizeOrCount" && (
-        <div className="space-y-2">
-          <div>
-            <label className="block font-medium mb-1">Split Type</label>
-            <select id="splitType" className="w-full border px-2 py-1 rounded">
-              <option value="size">By Size</option>
-              <option value="pages">By Page Count</option>
-              <option value="docs">By Document Count</option>
-            </select>
-          </div>
-          <div>
-            <label className="block font-medium mb-1">Split Value</label>
-            <input
-              type="text"
-              id="splitValue"
-              className="w-full border px-2 py-1 rounded"
-              placeholder="e.g. 10MB or 5 pages"
-            />
-          </div>
-        </div>
+        <Stack spacing="sm">
+          <Select
+            label="Split Type"
+            value={splitType}
+            onChange={setSplitType}
+            data={[
+              { value: "size", label: "By Size" },
+              { value: "pages", label: "By Page Count" },
+              { value: "docs", label: "By Document Count" },
+            ]}
+          />
+          <TextInput
+            label="Split Value"
+            placeholder="e.g. 10MB or 5 pages"
+            value={splitValue}
+            onChange={(e) => setSplitValue(e.target.value)}
+          />
+        </Stack>
       )}
 
       {mode === "byChapters" && (
-        <div className="space-y-2">
-          <div>
-            <label className="block font-medium mb-1">Bookmark Level</label>
-            <input
-              type="number"
-              id="bookmarkLevel"
-              className="w-full border px-2 py-1 rounded"
-              defaultValue="0"
-              min="0"
-            />
-          </div>
-          <div className="flex items-center space-x-2">
-            <input type="checkbox" id="includeMetadata" />
-            <label htmlFor="includeMetadata">Include Metadata</label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <input type="checkbox" id="allowDuplicates" />
-            <label htmlFor="allowDuplicates">Allow Duplicate Bookmarks</label>
-          </div>
-        </div>
+        <Stack spacing="sm">
+          <TextInput
+            label="Bookmark Level"
+            type="number"
+            value={bookmarkLevel}
+            onChange={(e) => setBookmarkLevel(e.target.value)}
+          />
+          <Checkbox
+            label="Include Metadata"
+            checked={includeMetadata}
+            onChange={(e) => setIncludeMetadata(e.currentTarget.checked)}
+          />
+          <Checkbox
+            label="Allow Duplicate Bookmarks"
+            checked={allowDuplicates}
+            onChange={(e) => setAllowDuplicates(e.currentTarget.checked)}
+          />
+        </Stack>
       )}
 
-      <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded mt-2">
-        Split PDF
-      </button>
+      <Button type="submit" loading={isLoading} fullWidth>
+        {isLoading ? "Processing..." : "Split PDF"}
+      </Button>
 
       {status && <p className="text-xs text-gray-600">{status}</p>}
 
-{status === "Download ready." && downloadUrl && (
-  <a
-    href={downloadUrl}
-    download="split_output.zip"
-    className="inline-flex items-center bg-green-600 text-white px-4 py-2 rounded shadow hover:bg-green-700 transition mt-2"
-  >
-    <DownloadIcon className="mr-2" />
-    Download Split PDF
-  </a>
-)}
+      {errorMessage && (
+        <Notification color="red" title="Error" onClose={() => setErrorMessage(null)}>
+          {errorMessage}
+        </Notification>
+      )}
 
+      {status === "Download ready." && downloadUrl && (
+        <Button
+          component="a"
+          href={downloadUrl}
+          download="split_output.zip"
+          leftIcon={<DownloadIcon />}
+          color="green"
+          fullWidth
+        >
+          Download Split PDF
+        </Button>
+      )}
     </form>
   );
 }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 61d4f88a8..2572502cd 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,4 +1,7 @@
 module.exports = {
+  corePlugins: {
+    preflight: false,
+  },
   content: [
     "./src/**/*.{js,jsx,ts,tsx}"
   ],
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index a3c67b7db..000000000
--- a/package-lock.json
+++ /dev/null
@@ -1,264 +0,0 @@
-{
-  "name": "Stirling-PDF",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "devDependencies": {
-        "autoprefixer": "^10.4.21",
-        "postcss": "^8.5.3",
-        "tailwindcss": "^4.1.6"
-      }
-    },
-    "node_modules/autoprefixer": {
-      "version": "10.4.21",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
-      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.24.4",
-        "caniuse-lite": "^1.0.30001702",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/browserslist": {
-      "version": "4.24.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.5.tgz",
-      "integrity": "sha512-FDToo4Wo82hIdgc1CQ+NQD0hEhmpPjrZ3hiUgwgOG6IuTdlpr8jdjyG24P6cNP1yJpTLzS5OcGgSw0xmDU1/Tw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "caniuse-lite": "^1.0.30001716",
-        "electron-to-chromium": "^1.5.149",
-        "node-releases": "^2.0.19",
-        "update-browserslist-db": "^1.1.3"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001718",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001718.tgz",
-      "integrity": "sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "CC-BY-4.0"
-    },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.152",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.152.tgz",
-      "integrity": "sha512-xBOfg/EBaIlVsHipHl2VdTPJRSvErNUaqW8ejTq5OlOlIYx1wOllCHsAvAIrr55jD1IYEfdR86miUEt8H5IeJg==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/escalade": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
-    "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/node-releases": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/postcss": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
-      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.8",
-        "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tailwindcss": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.6.tgz",
-      "integrity": "sha512-j0cGLTreM6u4OWzBeLBpycK0WIh8w7kSwcUsQZoGLHZ7xDTdM69lN64AgoIEEwFi0tnhs4wSykUa5YWxAzgFYg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/update-browserslist-db": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
-      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "escalade": "^3.2.0",
-        "picocolors": "^1.1.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    }
-  }
-}
diff --git a/package.json b/package.json
deleted file mode 100644
index ba67b4df1..000000000
--- a/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "devDependencies": {
-    "autoprefixer": "^10.4.21",
-    "postcss": "^8.5.3",
-    "tailwindcss": "^4.1.6"
-  }
-}
diff --git a/src/main/resources/templates/split-pdf-by-chapters.html b/src/main/resources/templates/split-pdf-by-chapters.html
index 22c847273..26838b83f 100644
--- a/src/main/resources/templates/split-pdf-by-chapters.html
+++ b/src/main/resources/templates/split-pdf-by-chapters.html
@@ -1,156 +1,72 @@
-import React, { useState } from "react";
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+<!DOCTYPE html>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
 
-const tools = [
-  { id: "split-pdf", icon: <PictureAsPdfIcon />, name: "Split PDF" }
-];
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{splitByChapters.title}, header=#{splitByChapters.header})}">
+  </th:block>
+</head>
 
-function SplitPdfPanel() {
-  const [mode, setMode] = useState("byPages");
-  return (
-    <div className="p-2 border rounded bg-white shadow-sm space-y-4 text-sm">
-      <h3 className="font-semibold">Split PDF</h3>
-
-      <div>
-        <label className="block mb-1 font-medium">Split Mode</label>
-        <select
-          value={mode}
-          onChange={(e) => setMode(e.target.value)}
-          className="w-full border px-2 py-1 rounded"
-        >
-          <option value="byPages">Split by Pages (e.g. 1,3,5-10)</option>
-          <option value="bySections">Split by Grid Sections</option>
-          <option value="bySizeOrCount">Split by Size or Count</option>
-          <option value="byChapters">Split by Chapters</option>
-        </select>
-      </div>
-
-      {mode === "byPages" && (
-        <div>
-          <label className="block font-medium mb-1">Pages</label>
-          <input
-            type="text"
-            className="w-full border px-2 py-1 rounded"
-            placeholder="e.g. 1,3,5-10"
-          />
-        </div>
-      )}
-
-      {mode === "bySections" && (
-        <div className="space-y-2">
-          <div>
-            <label className="block font-medium mb-1">Horizontal Divisions</label>
-            <input type="number" className="w-full border px-2 py-1 rounded" min="0" max="300" defaultValue="0" />
-          </div>
-          <div>
-            <label className="block font-medium mb-1">Vertical Divisions</label>
-            <input type="number" className="w-full border px-2 py-1 rounded" min="0" max="300" defaultValue="1" />
-          </div>
-          <div className="flex items-center space-x-2">
-            <input type="checkbox" id="merge" />
-            <label htmlFor="merge">Merge sections into one PDF</label>
-          </div>
-        </div>
-      )}
-
-      {mode === "bySizeOrCount" && (
-        <div className="space-y-2">
-          <div>
-            <label className="block font-medium mb-1">Split Type</label>
-            <select className="w-full border px-2 py-1 rounded">
-              <option value="size">By Size</option>
-              <option value="pages">By Page Count</option>
-              <option value="docs">By Document Count</option>
-            </select>
-          </div>
-          <div>
-            <label className="block font-medium mb-1">Split Value</label>
-            <input type="text" className="w-full border px-2 py-1 rounded" placeholder="e.g. 10MB or 5 pages" />
-          </div>
-        </div>
-      )}
-
-      {mode === "byChapters" && (
-        <div className="space-y-2">
-          <div>
-            <label className="block font-medium mb-1">Bookmark Level</label>
-            <input type="number" className="w-full border px-2 py-1 rounded" defaultValue="0" min="0" />
-          </div>
-          <div className="flex items-center space-x-2">
-            <input type="checkbox" id="includeMetadata" />
-            <label htmlFor="includeMetadata">Include Metadata</label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <input type="checkbox" id="allowDuplicates" />
-            <label htmlFor="allowDuplicates">Allow Duplicate Bookmarks</label>
-          </div>
-        </div>
-      )}
-
-      <button className="bg-blue-600 text-white px-4 py-2 rounded mt-2">Split PDF</button>
-    </div>
-  );
-}
-
-export default function HomePage() {
-  const [selectedTool, setSelectedTool] = useState(null);
-  const [search, setSearch] = useState("");
-
-  const filteredTools = tools.filter(tool =>
-    tool.name.toLowerCase().includes(search.toLowerCase())
-  );
-
-  return (
-    <div className="flex h-screen overflow-hidden">
-      {/* Left Sidebar */}
-      <div className="w-64 bg-gray-100 p-4 flex flex-col space-y-2 overflow-y-auto border-r">
-        <input
-          type="text"
-          placeholder="Search tools..."
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          className="mb-3 px-2 py-1 border rounded text-sm"
-        />
-        {filteredTools.map(tool => (
-          <button
-            key={tool.id}
-            title={tool.name}
-            onClick={() => setSelectedTool(tool)}
-            className="flex items-center space-x-3 p-2 hover:bg-gray-200 rounded text-left"
-          >
-            <div className="text-xl leading-none flex items-center justify-center h-6 w-6">
-              {tool.icon}
+<body>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6 bg-card">
+            <div class="tool-header">
+              <svg class="material-symbols-rounded tool-header-icon advance">
+                <use xlink:href="/images/split-chapters.svg#icon-split-chapters"></use>
+              </svg>
+              <span class="tool-header-text" th:text="#{splitByChapters.header}"></span>
             </div>
-            <span className="text-sm font-medium">{tool.name}</span>
-          </button>
-        ))}
-      </div>
+            <form th:action="@{'/api/v1/general/split-pdf-by-chapters'}" method="post" enctype="multipart/form-data">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}">
+              </div>
 
-      {/* Central PDF Viewer Area */}
-      <div className="flex-1 bg-white flex items-center justify-center overflow-hidden">
-        <div className="w-full h-full max-w-5xl max-h-[95vh] border rounded shadow-md bg-gray-50 flex items-center justify-center">
-          <span className="text-gray-400 text-lg">PDF Viewer Placeholder</span>
-        </div>
-      </div>
+              <div class="mb-3">
+                <label for="bookmarkLevel" th:text="#{splitByChapters.bookmarkLevel}"></label>
+                <input type="number" class="form-control" id="bookmarkLevel" name="bookmarkLevel" min="0" value="0"
+                  required>
+              </div>
 
-      {/* Right Sidebar: Tool Interactions */}
-      <div className="w-72 bg-gray-50 p-4 border-l overflow-y-auto">
-        <h2 className="text-lg font-semibold mb-4">Tool Panel</h2>
-        <div className="space-y-3">
-          {selectedTool?.id === "split-pdf" ? (
-            <SplitPdfPanel />
-          ) : selectedTool ? (
-            <div className="p-2 border rounded bg-white shadow-sm">
-              <h3 className="font-semibold text-sm mb-2">{selectedTool.name}</h3>
-              <p className="text-xs text-gray-600">This is the panel for {selectedTool.name}.</p>
-            </div>
-          ) : (
-            <div className="p-2 border rounded bg-white shadow-sm">
-              <p className="text-sm">Select a tool to begin interacting with the PDF.</p>
-            </div>
-          )}
+              <div class="mb-3 form-check">
+                <input type="checkbox" class="form-check-input" id="includeMetadata" name="includeMetadata">
+                <label class="form-check-label" for="includeMetadata"
+                  th:text="#{splitByChapters.includeMetadata}"></label>
+                <input type="hidden" name="includeMetadata" value="false" />
+              </div>
+
+              <div class="mb-3 form-check">
+                <input type="checkbox" class="form-check-input" id="allowDuplicates" name="allowDuplicates">
+                <label class="form-check-label" for="allowDuplicates"
+                  th:text="#{splitByChapters.allowDuplicates}"></label>
+                <input type="hidden" name="allowDuplicates" value="false" />
+              </div>
+
+              <p>
+                <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#info" role="button"
+                  aria-expanded="false" aria-controls="info" th:text="#{info}"></a>
+              </p>
+              <div class="collapse" id="info">
+                <p th:text="#{splitByChapters.desc.1}"></p>
+                <p th:text="#{splitByChapters.desc.2}"></p>
+                <p th:text="#{splitByChapters.desc.3}"></p>
+                <p th:text="#{splitByChapters.desc.4}"></p>
+              </div>
+
+              <br>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{splitByChapters.submit}"></button>
+            </form>
+
+          </div>
         </div>
       </div>
     </div>
-  );
-}
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
+</html>
\ No newline at end of file