diff --git a/components/Header.tsx b/components/Header.tsx
new file mode 100644
index 0000000..c1605ab
--- /dev/null
+++ b/components/Header.tsx
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Container, Group, Burger } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { MantineLogo } from '@mantine/ds';
+import classes from '@/styles/Header.module.css';
+
+const links = [
+  { link: '/about', label: 'Features' },
+  { link: '/pricing', label: 'Pricing' },
+  { link: '/learn', label: 'Learn' },
+  { link: '/community', label: 'Community' },
+];
+
+export default function Header() {
+  const [opened, { toggle }] = useDisclosure(false);
+  const [active, setActive] = useState(links[0].link);
+
+  const items = links.map((link) => (
+    <a
+      key={link.label}
+      href={link.link}
+      className={classes.link}
+      data-active={active === link.link || undefined}
+      onClick={(event) => {
+        event.preventDefault();
+        setActive(link.link);
+      }}
+    >
+      {link.label}
+    </a>
+  ));
+
+  return (
+    <header className={classes.header}>
+      <Container size="md" className={classes.inner}>
+        <MantineLogo size={28} />
+        <Group gap={5} visibleFrom="xs">
+          {items}
+        </Group>
+
+        <Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />
+      </Container>
+    </header>
+  );
+}
\ No newline at end of file
diff --git a/components/OverallStatus.tsx b/components/OverallStatus.tsx
new file mode 100644
index 0000000..ca1b478
--- /dev/null
+++ b/components/OverallStatus.tsx
@@ -0,0 +1,32 @@
+import { Center, Space, Title } from '@mantine/core'
+import { IconCircleCheck, IconAlertCircle } from '@tabler/icons-react'
+
+export default function OverallStatus({ state }: { state: { overallUp: number, overallDown: number, lastUpdate: number }}) {
+
+  let statusString = ''
+  let icon = <IconAlertCircle style={{ width: 64, height: 64 }} />
+  if (state.overallUp === 0 && state.overallDown === 0) {
+    statusString = 'No data yet'
+  } else if (state.overallUp === 0) {
+    statusString = 'All down'
+  } else if (state.overallDown === 0) {
+    statusString = 'All up'
+    icon = <IconCircleCheck style={{ width: 64, height: 64 }} />
+  } else {
+    statusString = `${state.overallUp} up, ${state.overallDown} down`
+  }
+
+  return (<>
+    <Center>
+      {icon}
+    </Center>
+    <Space h="md"/>
+    <Center>
+      <Title order={1}>{statusString}</Title>
+    </Center>
+    <Center>
+      <Title order={5}>Last updated on: {new Date(state.lastUpdate * 1000).toLocaleString()}</Title>
+    </Center>
+  </>)
+}
+
diff --git a/package-lock.json b/package-lock.json
index b40fe53..53665de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,10 @@
       "version": "0.1.0",
       "dependencies": {
         "@cloudflare/workers-types": "^4.20231010.0",
+        "@mantine/core": "^7.1.3",
+        "@mantine/ds": "^7.1.3",
+        "@mantine/hooks": "^7.1.3",
+        "@tabler/icons-react": "^2.39.0",
         "next": "13.5.4",
         "react": "^18",
         "react-dom": "^18"
@@ -19,6 +23,9 @@
         "@types/react-dom": "^18",
         "eslint": "^8",
         "eslint-config-next": "13.5.4",
+        "postcss": "^8.4.31",
+        "postcss-preset-mantine": "^1.8.0",
+        "postcss-simple-vars": "^7.0.1",
         "typescript": "^5",
         "wrangler": "^3.13.1"
       }
@@ -36,7 +43,6 @@
       "version": "7.23.2",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@babel/runtime/-/runtime-7.23.2.tgz",
       "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -577,6 +583,54 @@
         "node": ">=14"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.24.8",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/react/-/react-0.24.8.tgz",
+      "integrity": "sha512-AuYeDoaR8jtUlUXtZ1IJ/6jtBkGnSpJXbGNzokBL87VDJ8opMq1Bgrc0szhK482ReQY6KZsMoZCVSb4xwalkBA==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.1",
+        "aria-hidden": "^1.2.3",
+        "tabbable": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.2",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/react-dom/-/react-dom-2.0.2.tgz",
+      "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.11",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
@@ -610,6 +664,75 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@mantine/code-highlight": {
+      "version": "7.1.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@mantine/code-highlight/-/code-highlight-7.1.3.tgz",
+      "integrity": "sha512-Z+E++yrOcqoKpgf34dw13y6M9K/qtqEnLftKiwwE2RL6C8+0gI8iVYU7Y7yuvFPgntZ1DOnSs+d2OEsxuECoiw==",
+      "peer": true,
+      "dependencies": {
+        "clsx": "2.0.0",
+        "highlight.js": "^11.7.0"
+      },
+      "peerDependencies": {
+        "@mantine/core": "7.1.3",
+        "@mantine/hooks": "7.1.3",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
+    "node_modules/@mantine/core": {
+      "version": "7.1.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@mantine/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-5vLwrMFVlGkd56HDoz5woE7I48XuycoyKaasJj49LTn2MuccHvNJ7c0VPlRlbzK8YQuwV7g1KsBAM8zzJlwqig==",
+      "dependencies": {
+        "@floating-ui/react": "^0.24.8",
+        "clsx": "2.0.0",
+        "react-number-format": "^5.2.2",
+        "react-remove-scroll": "^2.5.6",
+        "react-textarea-autosize": "8.5.3",
+        "type-fest": "^3.13.1"
+      },
+      "peerDependencies": {
+        "@mantine/hooks": "7.1.3",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
+    "node_modules/@mantine/core/node_modules/type-fest": {
+      "version": "3.13.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/type-fest/-/type-fest-3.13.1.tgz",
+      "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@mantine/ds": {
+      "version": "7.1.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@mantine/ds/-/ds-7.1.3.tgz",
+      "integrity": "sha512-GTdS4J9XsNG6us56haksC2EcNb0EPkJsGoiBu2MO7zdmmIqQsPtF/DVGzr9XxkTxFmRkgd9qkVvsA9eOqRQEKg==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "peerDependencies": {
+        "@mantine/code-highlight": "7.1.3",
+        "@mantine/core": "7.1.3",
+        "@mantine/hooks": "7.1.3",
+        "@tabler/icons-react": "^2.29.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
+    "node_modules/@mantine/hooks": {
+      "version": "7.1.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@mantine/hooks/-/hooks-7.1.3.tgz",
+      "integrity": "sha512-jCOedyl229vzNEoya9L/PIeT+Btwuoqh09vRbFRNoTdRZgVMTWi4BT08BRWK5iqSa9PlvWtIaSGcCtjqqXKZcA==",
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "13.5.4",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@next/env/-/env-13.5.4.tgz",
@@ -808,6 +931,31 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "2.39.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@tabler/icons/-/icons-2.39.0.tgz",
+      "integrity": "sha512-iK3j2jIEGIUaJcbYYg5iwyG1Y/m4lzUxAUbxRpvgeXCWP29jvZaH5hajZmU3KaSealddHuJg7PSQislPHpCsoQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "2.39.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@tabler/icons-react/-/icons-react-2.39.0.tgz",
+      "integrity": "sha512-MyUK1jqtmHPZBnDXqIc1Y5OnfoqG+tGaSB1/gcl0mlY462fJ5f3QB0ZIZzAHMAGYb6K2iJSdFIFavhcgpDDZ7Q==",
+      "dependencies": {
+        "@tabler/icons": "2.39.0",
+        "prop-types": "^15.7.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@types/json5/-/json5-0.0.29.tgz",
@@ -827,13 +975,13 @@
       "version": "15.7.8",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@types/prop-types/-/prop-types-15.7.8.tgz",
       "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.2.28",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@types/react/-/react-18.2.28.tgz",
       "integrity": "sha512-ad4aa/RaaJS3hyGz0BGegdnSRXQBkd1CCYDCdNjBPg90UUpLgo+WlJqb9fMYUxtehmzF3PJaTWqRZjko6BRzBg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -853,7 +1001,7 @@
       "version": "0.16.4",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@types/scheduler/-/scheduler-0.16.4.tgz",
       "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@typescript-eslint/parser": {
       "version": "6.7.5",
@@ -1046,6 +1194,17 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/aria-hidden/-/aria-hidden-1.2.3.tgz",
+      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/aria-query/-/aria-query-5.3.0.tgz",
@@ -1321,6 +1480,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001547",
       "resolved": "https://mirrors.cloud.tencent.com/npm/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz",
@@ -1410,6 +1578,14 @@
       "resolved": "https://mirrors.cloud.tencent.com/npm/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/color-convert/-/color-convert-2.0.1.tgz",
@@ -1457,11 +1633,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://mirrors.cloud.tencent.com/npm/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -1538,6 +1726,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2373,6 +2566,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-source": {
       "version": "2.0.12",
       "resolved": "https://mirrors.cloud.tencent.com/npm/get-source/-/get-source-2.0.12.tgz",
@@ -2599,6 +2800,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.9.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+      "peer": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://mirrors.cloud.tencent.com/npm/ignore/-/ignore-5.2.4.tgz",
@@ -2663,6 +2873,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.2",
       "resolved": "https://mirrors.cloud.tencent.com/npm/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
@@ -3349,7 +3567,6 @@
       "version": "4.1.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3623,6 +3840,108 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-mixins": {
+      "version": "9.0.4",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/postcss-mixins/-/postcss-mixins-9.0.4.tgz",
+      "integrity": "sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==",
+      "dev": true,
+      "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-nested": {
+      "version": "6.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-preset-mantine": {
+      "version": "1.8.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/postcss-preset-mantine/-/postcss-preset-mantine-1.8.0.tgz",
+      "integrity": "sha512-aLc+EoDXsvnXM2lWWF1MI+lgGqbd5xatVJ3KyTmsheNoXBYN0OFAkRFqyy3tfdveH64Fno2SLNEr4w/njPSInw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-mixins": "^9.0.4",
+        "postcss-nested": "^6.0.1"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.0"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.13",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-simple-vars": {
+      "version": "7.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
+      "integrity": "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.1"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3642,7 +3961,6 @@
       "version": "15.8.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -3704,8 +4022,102 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-number-format": {
+      "version": "5.3.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/react-number-format/-/react-number-format-5.3.1.tgz",
+      "integrity": "sha512-qpYcQLauIeEhCZUZY9jXZnnroOtdy3jYaS1zQ3M1Sr6r/KMOBEIGNIb7eKT19g2N1wbYgFgvDzs19hw5TrB8XQ==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.7",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
+      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.4",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.4",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-textarea-autosize": {
+      "version": "8.5.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz",
+      "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==",
+      "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"
+      }
     },
     "node_modules/readdirp": {
       "version": "3.6.0",
@@ -3742,8 +4154,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.14.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
-      "dev": true
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.1",
@@ -4181,6 +4592,22 @@
         }
       }
     },
+    "node_modules/sugarss": {
+      "version": "4.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/sugarss/-/sugarss-4.0.1.tgz",
+      "integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==",
+      "dev": true,
+      "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://mirrors.cloud.tencent.com/npm/supports-color/-/supports-color-7.2.0.tgz",
@@ -4205,6 +4632,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/tapable/-/tapable-2.2.1.tgz",
@@ -4405,6 +4837,90 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
+      "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-composed-ref": {
+      "version": "1.3.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
+      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-latest": {
+      "version": "1.2.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/use-latest/-/use-latest-1.2.1.tgz",
+      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/watchpack/-/watchpack-2.4.0.tgz",
@@ -4642,7 +5158,6 @@
       "version": "7.23.2",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@babel/runtime/-/runtime-7.23.2.tgz",
       "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.14.0"
       }
@@ -4911,6 +5426,46 @@
       "integrity": "sha512-JUFJad5lv7jxj926GPgymrWQxxjPYuJNiNjNMzqT+HiuP6Vl3dk5xzG+8sTX96np0ZAluvaMzPsjhHZ5rNuNQQ==",
       "dev": true
     },
+    "@floating-ui/core": {
+      "version": "1.5.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "requires": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "requires": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/react": {
+      "version": "0.24.8",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/react/-/react-0.24.8.tgz",
+      "integrity": "sha512-AuYeDoaR8jtUlUXtZ1IJ/6jtBkGnSpJXbGNzokBL87VDJ8opMq1Bgrc0szhK482ReQY6KZsMoZCVSb4xwalkBA==",
+      "requires": {
+        "@floating-ui/react-dom": "^2.0.1",
+        "aria-hidden": "^1.2.3",
+        "tabbable": "^6.0.1"
+      }
+    },
+    "@floating-ui/react-dom": {
+      "version": "2.0.2",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/react-dom/-/react-dom-2.0.2.tgz",
+      "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==",
+      "requires": {
+        "@floating-ui/dom": "^1.5.1"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.11",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
@@ -4934,6 +5489,50 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@mantine/code-highlight": {
+      "version": "7.1.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@mantine/code-highlight/-/code-highlight-7.1.3.tgz",
+      "integrity": "sha512-Z+E++yrOcqoKpgf34dw13y6M9K/qtqEnLftKiwwE2RL6C8+0gI8iVYU7Y7yuvFPgntZ1DOnSs+d2OEsxuECoiw==",
+      "peer": true,
+      "requires": {
+        "clsx": "2.0.0",
+        "highlight.js": "^11.7.0"
+      }
+    },
+    "@mantine/core": {
+      "version": "7.1.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@mantine/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-5vLwrMFVlGkd56HDoz5woE7I48XuycoyKaasJj49LTn2MuccHvNJ7c0VPlRlbzK8YQuwV7g1KsBAM8zzJlwqig==",
+      "requires": {
+        "@floating-ui/react": "^0.24.8",
+        "clsx": "2.0.0",
+        "react-number-format": "^5.2.2",
+        "react-remove-scroll": "^2.5.6",
+        "react-textarea-autosize": "8.5.3",
+        "type-fest": "^3.13.1"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "3.13.1",
+          "resolved": "https://mirrors.cloud.tencent.com/npm/type-fest/-/type-fest-3.13.1.tgz",
+          "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g=="
+        }
+      }
+    },
+    "@mantine/ds": {
+      "version": "7.1.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@mantine/ds/-/ds-7.1.3.tgz",
+      "integrity": "sha512-GTdS4J9XsNG6us56haksC2EcNb0EPkJsGoiBu2MO7zdmmIqQsPtF/DVGzr9XxkTxFmRkgd9qkVvsA9eOqRQEKg==",
+      "requires": {
+        "clsx": "2.0.0"
+      }
+    },
+    "@mantine/hooks": {
+      "version": "7.1.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@mantine/hooks/-/hooks-7.1.3.tgz",
+      "integrity": "sha512-jCOedyl229vzNEoya9L/PIeT+Btwuoqh09vRbFRNoTdRZgVMTWi4BT08BRWK5iqSa9PlvWtIaSGcCtjqqXKZcA==",
+      "requires": {}
+    },
     "@next/env": {
       "version": "13.5.4",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@next/env/-/env-13.5.4.tgz",
@@ -5042,6 +5641,20 @@
         "tslib": "^2.4.0"
       }
     },
+    "@tabler/icons": {
+      "version": "2.39.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@tabler/icons/-/icons-2.39.0.tgz",
+      "integrity": "sha512-iK3j2jIEGIUaJcbYYg5iwyG1Y/m4lzUxAUbxRpvgeXCWP29jvZaH5hajZmU3KaSealddHuJg7PSQislPHpCsoQ=="
+    },
+    "@tabler/icons-react": {
+      "version": "2.39.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@tabler/icons-react/-/icons-react-2.39.0.tgz",
+      "integrity": "sha512-MyUK1jqtmHPZBnDXqIc1Y5OnfoqG+tGaSB1/gcl0mlY462fJ5f3QB0ZIZzAHMAGYb6K2iJSdFIFavhcgpDDZ7Q==",
+      "requires": {
+        "@tabler/icons": "2.39.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@types/json5/-/json5-0.0.29.tgz",
@@ -5061,13 +5674,13 @@
       "version": "15.7.8",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@types/prop-types/-/prop-types-15.7.8.tgz",
       "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==",
-      "dev": true
+      "devOptional": true
     },
     "@types/react": {
       "version": "18.2.28",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@types/react/-/react-18.2.28.tgz",
       "integrity": "sha512-ad4aa/RaaJS3hyGz0BGegdnSRXQBkd1CCYDCdNjBPg90UUpLgo+WlJqb9fMYUxtehmzF3PJaTWqRZjko6BRzBg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -5087,7 +5700,7 @@
       "version": "0.16.4",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@types/scheduler/-/scheduler-0.16.4.tgz",
       "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==",
-      "dev": true
+      "devOptional": true
     },
     "@typescript-eslint/parser": {
       "version": "6.7.5",
@@ -5205,6 +5818,14 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "aria-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/aria-hidden/-/aria-hidden-1.2.3.tgz",
+      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "aria-query": {
       "version": "5.3.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/aria-query/-/aria-query-5.3.0.tgz",
@@ -5420,6 +6041,12 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "dev": true
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true
+    },
     "caniuse-lite": {
       "version": "1.0.30001547",
       "resolved": "https://mirrors.cloud.tencent.com/npm/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz",
@@ -5477,6 +6104,11 @@
       "resolved": "https://mirrors.cloud.tencent.com/npm/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "clsx": {
+      "version": "2.0.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q=="
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/color-convert/-/color-convert-2.0.1.tgz",
@@ -5515,11 +6147,17 @@
         "which": "^2.0.1"
       }
     },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
     "csstype": {
       "version": "3.1.2",
       "resolved": "https://mirrors.cloud.tencent.com/npm/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
+      "devOptional": true
     },
     "damerau-levenshtein": {
       "version": "1.0.8",
@@ -5576,6 +6214,11 @@
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
       "dev": true
     },
+    "detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -6230,6 +6873,11 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="
+    },
     "get-source": {
       "version": "2.0.12",
       "resolved": "https://mirrors.cloud.tencent.com/npm/get-source/-/get-source-2.0.12.tgz",
@@ -6387,6 +7035,12 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "highlight.js": {
+      "version": "11.9.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+      "peer": true
+    },
     "ignore": {
       "version": "5.2.4",
       "resolved": "https://mirrors.cloud.tencent.com/npm/ignore/-/ignore-5.2.4.tgz",
@@ -6436,6 +7090,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "is-array-buffer": {
       "version": "3.0.2",
       "resolved": "https://mirrors.cloud.tencent.com/npm/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
@@ -6922,8 +7584,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-inspect": {
       "version": "1.12.3",
@@ -7111,6 +7772,63 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1"
+      }
+    },
+    "postcss-mixins": {
+      "version": "9.0.4",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/postcss-mixins/-/postcss-mixins-9.0.4.tgz",
+      "integrity": "sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==",
+      "dev": true,
+      "requires": {
+        "fast-glob": "^3.2.11",
+        "postcss-js": "^4.0.0",
+        "postcss-simple-vars": "^7.0.0",
+        "sugarss": "^4.0.1"
+      }
+    },
+    "postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.11"
+      }
+    },
+    "postcss-preset-mantine": {
+      "version": "1.8.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/postcss-preset-mantine/-/postcss-preset-mantine-1.8.0.tgz",
+      "integrity": "sha512-aLc+EoDXsvnXM2lWWF1MI+lgGqbd5xatVJ3KyTmsheNoXBYN0OFAkRFqyy3tfdveH64Fno2SLNEr4w/njPSInw==",
+      "dev": true,
+      "requires": {
+        "postcss-mixins": "^9.0.4",
+        "postcss-nested": "^6.0.1"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.13",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-simple-vars": {
+      "version": "7.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
+      "integrity": "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==",
+      "dev": true,
+      "requires": {}
+    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -7127,7 +7845,6 @@
       "version": "15.8.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -7166,8 +7883,56 @@
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "react-number-format": {
+      "version": "5.3.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/react-number-format/-/react-number-format-5.3.1.tgz",
+      "integrity": "sha512-qpYcQLauIeEhCZUZY9jXZnnroOtdy3jYaS1zQ3M1Sr6r/KMOBEIGNIb7eKT19g2N1wbYgFgvDzs19hw5TrB8XQ==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
+    "react-remove-scroll": {
+      "version": "2.5.7",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
+      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+      "requires": {
+        "react-remove-scroll-bar": "^2.3.4",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      }
+    },
+    "react-remove-scroll-bar": {
+      "version": "2.3.4",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+      "requires": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      }
+    },
+    "react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "requires": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      }
+    },
+    "react-textarea-autosize": {
+      "version": "8.5.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz",
+      "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "use-composed-ref": "^1.3.0",
+        "use-latest": "^1.2.1"
+      }
     },
     "readdirp": {
       "version": "3.6.0",
@@ -7195,8 +7960,7 @@
     "regenerator-runtime": {
       "version": "0.14.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
-      "dev": true
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
     "regexp.prototype.flags": {
       "version": "1.5.1",
@@ -7504,6 +8268,13 @@
         "client-only": "0.0.1"
       }
     },
+    "sugarss": {
+      "version": "4.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/sugarss/-/sugarss-4.0.1.tgz",
+      "integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==",
+      "dev": true,
+      "requires": {}
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/supports-color/-/supports-color-7.2.0.tgz",
@@ -7519,6 +8290,11 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/tapable/-/tapable-2.2.1.tgz",
@@ -7668,6 +8444,49 @@
         "punycode": "^2.1.0"
       }
     },
+    "use-callback-ref": {
+      "version": "1.3.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
+      "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "use-composed-ref": {
+      "version": "1.3.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
+      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==",
+      "requires": {}
+    },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "requires": {}
+    },
+    "use-latest": {
+      "version": "1.2.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/use-latest/-/use-latest-1.2.1.tgz",
+      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
+      "requires": {
+        "use-isomorphic-layout-effect": "^1.1.1"
+      }
+    },
+    "use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "requires": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 38ce1d3..7e54c78 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,10 @@
   },
   "dependencies": {
     "@cloudflare/workers-types": "^4.20231010.0",
+    "@mantine/core": "^7.1.3",
+    "@mantine/ds": "^7.1.3",
+    "@mantine/hooks": "^7.1.3",
+    "@tabler/icons-react": "^2.39.0",
     "next": "13.5.4",
     "react": "^18",
     "react-dom": "^18"
@@ -20,6 +24,9 @@
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "13.5.4",
+    "postcss": "^8.4.31",
+    "postcss-preset-mantine": "^1.8.0",
+    "postcss-simple-vars": "^7.0.1",
     "typescript": "^5",
     "wrangler": "^3.13.1"
   }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 021681f..60572f6 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,15 @@
-import '@/styles/globals.css'
+import '@mantine/core/styles.css';
 import type { AppProps } from 'next/app'
+import { MantineProvider, createTheme } from '@mantine/core';
+
+const theme = createTheme({
+  /** Put your mantine theme override here */
+});
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <MantineProvider theme={theme}>
+      <Component {...pageProps} />
+    </MantineProvider>
+  )
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 54e8bf3..4e3229e 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,9 +1,12 @@
 import { Html, Head, Main, NextScript } from 'next/document'
+import { ColorSchemeScript } from '@mantine/core';
 
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        <ColorSchemeScript defaultColorScheme="auto" />
+      </Head>
       <body>
         <Main />
         <NextScript />
diff --git a/pages/index.tsx b/pages/index.tsx
index e0401aa..006b2de 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,46 +1,16 @@
 import Head from 'next/head'
+
 import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
 import { MonitorState } from '@/uptime.types'
 import { KVNamespace } from '@cloudflare/workers-types'
 import config from '@/uptime.config'
+import OverallStatus from '@/components/OverallStatus'
+import Header from '@/components/Header'
 
 export const runtime = 'experimental-edge'
+const inter = Inter({ subsets: ['latin'] })
 
 export default function Home({ state }: { state: MonitorState }) {
-  
-  
-  // Calculate overall status
-  // TODO: Move this to a component
-  let downCount = 0
-  let upCount = 0
-
-  for (const monitor of config.monitors) {
-    if (state.history[monitor.id]?.slice(-1)[0].up) {
-      upCount += 1
-    } else {
-      downCount += 1
-    }
-  }
-
-  let overallStatus = ""
-  
-  if (downCount === 0 && upCount === 0) {
-    overallStatus = "No monitors configured"
-  }
-  if (downCount === 0) {
-    overallStatus = "All systems operational"
-  }
-  if (upCount === 0) {
-    overallStatus = "All systems not operational"
-  }
-  if (upCount > 0 && downCount > 0) {
-    overallStatus = "Some systems not operational"
-  }
-
-
   return (
     <>
       <Head>
@@ -48,11 +18,10 @@ export default function Home({ state }: { state: MonitorState }) {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main>
-        <h1>Uptime Flare</h1>
-
-        <h2>Current Status: {overallStatus}</h2>
-        <h2>Last updated on: {state.lastUpdate.toString()}</h2>
+      <main className={inter.className}>
+        
+        <Header />
+        <OverallStatus state={state} />
 
         {
           config.monitors.map(monitor => (
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..2b9e9a8
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+}
\ No newline at end of file
diff --git a/styles/Header.module.css b/styles/Header.module.css
new file mode 100644
index 0000000..cb63f3e
--- /dev/null
+++ b/styles/Header.module.css
@@ -0,0 +1,33 @@
+.header {
+  height: rem(56px);
+  margin-bottom: rem(120px);
+  background-color: var(--mantine-color-body);
+  border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.inner {
+  height: rem(56px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.link {
+  display: block;
+  line-height: 1;
+  padding: rem(8px) rem(12px);
+  border-radius: var(--mantine-radius-sm);
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+
+  [data-mantine-color-scheme] &[data-active] {
+    background-color: var(--mantine-color-blue-filled);
+    color: var(--mantine-color-white);
+  }
+}
\ No newline at end of file
diff --git a/styles/Home.module.css b/styles/Home.module.css
deleted file mode 100644
index 6676d2c..0000000
--- a/styles/Home.module.css
+++ /dev/null
@@ -1,229 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  max-width: 100%;
-  width: var(--max-width);
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo {
-  position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}
diff --git a/styles/globals.css b/styles/globals.css
deleted file mode 100644
index d4f491e..0000000
--- a/styles/globals.css
+++ /dev/null
@@ -1,107 +0,0 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
diff --git a/uptime.config.ts b/uptime.config.ts
index 6ba59df..ad5f279 100644
--- a/uptime.config.ts
+++ b/uptime.config.ts
@@ -28,7 +28,7 @@ const config = {
       method: 'GET',
       target: 'https://cloudflare.com',
       expectedCode: [200],
-      timeout: 10,
+      timeout: 5,
       headers: {
         "User-Agent": "Uptimeflare"
       },
@@ -39,7 +39,7 @@ const config = {
       name: 'Ping 1.1.1.1',
       method: 'TCP_PING',
       target: '1.1.1.1:1234'
-    }
+    },
   ]
 } 
 
diff --git a/worker/src/index.ts b/worker/src/index.ts
index d2a4e09..8d2b6de 100644
--- a/worker/src/index.ts
+++ b/worker/src/index.ts
@@ -19,6 +19,7 @@ async function getStatus(monitor: MonitorTarget): Promise<{ ping: number; up: bo
 
 	if (monitor.method === "TCP_PING") {
 		// TCP port endpoint monitor
+		// TODO: TCP timeout
 		try {
 			const [hostname, port] = monitor.target.split(":")
 			
@@ -90,6 +91,9 @@ export default {
 		state.overallUp = 0
 
 		// Check each monitor
+		// TODO: callback exception handler
+		// TODO: advanced status check
+		// TODO: concurrent status check
 		for (const monitor of config.monitors) {
 			console.log(`[${workerLocation}] Checking ${monitor.name}...`)