fix(client): source app version from package.json

The client version shown on the Settings page was hardcoded as a
literal in vite.config.ts, while client/package.json sat at the
placeholder "0.0.0". Bumping the displayed version required editing
two unrelated places, and stale Docker client images would keep
showing the old number after upgrades.

This change makes client/package.json the single source of truth
and reads it at build time. Bumps client/package.json from 0.0.0
to 3.6.1 to preserve current behaviour.

Closes #3271

.gitattributes

@@ -0,0 +1,2 @@
+* text=auto
+* text eol=lf

.github/pull_request_template.md

@@ -1,27 +1,28 @@
-**(Please remove this line only before submitting your PR. Ensure that all relevant items are checked before submission.)** 
+**(Please remove this line only before submitting your PR. Ensure that all relevant items are checked before submission.)**
 
 ## Describe your changes
 
-Briefly describe the changes you made and their purpose. 
+Briefly describe the changes you made and their purpose.
 
 ## Write your issue number after "Fixes "
 
-Fixes #123 
+Fixes #123
 
 ## Please ensure all items are checked off before requesting a review. "Checked off" means you need to add an "x" character between brackets so they turn into checkmarks.
 
 - [ ] (Do not skip this or your PR will be closed) I deployed the application locally.
-- [ ] (Do not skip this or your PR will be closed) I have performed a self-review and testing of my code.
+- [ ] (Do not skip this or your PR will be closed) I have performed a self-reviewing and testing of my code.
 - [ ] I have included the issue # in the PR.
-- [ ] I have added i18n support to visible strings (instead of `<div>Add</div>`, use): 
+- [ ] I have added i18n support to visible strings (instead of `<div>Add</div>`, use):
+
 ```Javascript
 const { t } = useTranslation();
 <div>{t('add')}</div>
 ```
+
 - [ ] I have **not** included any files that are not related to my pull request, including package-lock and package-json if dependencies have not changed
 - [ ] I didn't use any hardcoded values (otherwise it will not scale, and will make it difficult to maintain consistency across the application).
 - [ ] I made sure font sizes, color choices etc are all referenced from the theme. I don't have any hardcoded dimensions.
 - [ ] My PR is granular and targeted to one specific feature.
 - [ ] I ran `npm run format` in server and client directories, which automatically formats your code.
 - [ ] I took a screenshot or a video and attached to this PR if there is a UI change.
-

.github/workflows/check-tests.yml

@@ -0,0 +1,23 @@
+name: Test Check (Server)
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  test-server:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install server dependencies
+        working-directory: server
+        run: npm install
+
+      - name: Run server tests
+        working-directory: server
+        run: npm test

.github/workflows/poeditor-sync.yml

@@ -1,120 +1,138 @@
-name: POEditor Translation Synchronization
+name: POEditor Translation Synchronization (disabled)
+
+# This workflow is intentionally disabled — kept for reference only.
+# The full definition is preserved commented-out below. To re-enable,
+# delete the stub job and uncomment the section starting at `on:`.
 
 on:
-  # For manual triggering
-  workflow_dispatch:
-    inputs:
-      languages:
-        description: "Languages to synchronize (comma separated, e.g.: tr,en,es)"
-        required: false
-        default: "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja,zh-cn,th"
-      format:
-        description: "Export format (key_value_json or json)"
-        required: false
-        default: "key_value_json"
-
-permissions:
-  contents: write
-  pull-requests: write
+    workflow_dispatch:
 
 jobs:
-  sync-translations:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      issues: write
-      pull-requests: write
+    disabled:
+        if: false
+        runs-on: ubuntu-latest
+        steps:
+            - run: echo "This workflow is disabled. See comments below for the original definition."
 
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          fetch-depth: 0
+# ---------------------------------------------------------------------------
+# Original (disabled) workflow below. Do not uncomment if you don't know what you're doing.
+# ---------------------------------------------------------------------------
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "22"
+# on:
+#   # For manual triggering
+#   workflow_dispatch:
+#     inputs:
+#       languages:
+#         description: "Languages to synchronize (comma separated, e.g.: tr,en,es)"
+#         required: false
+#         default: "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja,zh-cn,th"
+#       format:
+#         description: "Export format (key_value_json or json)"
+#         required: false
+#         default: "key_value_json"
 
-      - name: Create package.json for scripts
-        run: |
-          mkdir -p .github/scripts
-          cat > .github/scripts/package.json << EOF
-          {
-            "name": "poeditor-scripts",
-            "version": "1.0.0",
-            "private": true,
-            "type": "module",
-            "dependencies": {
-              "axios": "^1.6.0",
-              "fs-extra": "^11.1.1"
-            }
-          }
-          EOF
+# permissions:
+#   contents: write
+#   pull-requests: write
 
-      - name: Install dependencies
-        run: |
-          cd .github/scripts
-          npm install
+# jobs:
+#   sync-translations:
+#     runs-on: ubuntu-latest
+#     permissions:
+#       contents: write
+#       issues: write
+#       pull-requests: write
 
-      - name: Download translations from POEditor
-        env:
-          POEDITOR_API: ${{ secrets.POEDITOR_API }}
-          POEDITOR_PROJECT_ID: ${{ secrets.POEDITOR_PROJECT_ID }}
-          LANGUAGES: ${{ github.event.inputs.languages || 'tr,en' }}
-          EXPORT_FORMAT: ${{ github.event.inputs.format || 'key_value_json' }}
-        run: |
-          mkdir -p temp
-          node .github/scripts/download-translations.js
+#     steps:
+#       - name: Checkout code
+#         uses: actions/checkout@v3
+#         with:
+#           token: ${{ secrets.GITHUB_TOKEN }}
+#           fetch-depth: 0
 
-      - name: Verify translation files
-        run: |
-          echo "Verifying translation files..."
-          for file in temp/*.json; do
-            echo "Checking $file"
-            if [ ! -s "$file" ]; then
-              echo "Error: $file is empty or does not exist"
-              exit 1
-            fi
-            # Validate JSON format
-            cat "$file" | jq . > /dev/null || { echo "Error: $file is not valid JSON"; exit 1; }
-          done
-          echo "All translation files are valid"
+#       - name: Setup Node.js
+#         uses: actions/setup-node@v3
+#         with:
+#           node-version: "22"
 
-      - name: Copy translations to project
-        run: |
-          mkdir -p client/src/locales
-          cp -r temp/* client/src/locales/
-          echo "Translation files copied to client/src/locales/"
+#       - name: Create package.json for scripts
+#         run: |
+#           mkdir -p .github/scripts
+#           cat > .github/scripts/package.json << EOF
+#           {
+#             "name": "poeditor-scripts",
+#             "version": "1.0.0",
+#             "private": true,
+#             "type": "module",
+#             "dependencies": {
+#               "axios": "^1.6.0",
+#               "fs-extra": "^11.1.1"
+#             }
+#           }
+#           EOF
 
-      - name: Get current date
-        id: date
-        run: echo "date=$(date +'%Y-%m-%d %H:%M:%S')" >> $GITHUB_OUTPUT
+#       - name: Install dependencies
+#         run: |
+#           cd .github/scripts
+#           npm install
 
-      - name: Format client code
-        run: |
-          cd client
-          npm ci
-          npm run format
+#       - name: Download translations from POEditor
+#         env:
+#           POEDITOR_API: ${{ secrets.POEDITOR_API }}
+#           POEDITOR_PROJECT_ID: ${{ secrets.POEDITOR_PROJECT_ID }}
+#           LANGUAGES: ${{ github.event.inputs.languages || 'tr,en' }}
+#           EXPORT_FORMAT: ${{ github.event.inputs.format || 'key_value_json' }}
+#         run: |
+#           mkdir -p temp
+#           node .github/scripts/download-translations.js
 
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v7
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          commit-message: "feat: translations updated from POEditor"
-          title: "🌐 Updated Translations from POEditor"
-          body: |
-            This PR contains the latest translations from POEditor.
+#       - name: Verify translation files
+#         run: |
+#           echo "Verifying translation files..."
+#           for file in temp/*.json; do
+#             echo "Checking $file"
+#             if [ ! -s "$file" ]; then
+#               echo "Error: $file is empty or does not exist"
+#               exit 1
+#             fi
+#             # Validate JSON format
+#             cat "$file" | jq . > /dev/null || { echo "Error: $file is not valid JSON"; exit 1; }
+#           done
+#           echo "All translation files are valid"
 
-            📅 Update Date: ${{ steps.date.outputs.date }}
-            🔄 Updated Languages: ${{ github.event.inputs.languages || 'tr,en' }}
+#       - name: Copy translations to project
+#         run: |
+#           mkdir -p client/src/locales
+#           cp -r temp/* client/src/locales/
+#           echo "Translation files copied to client/src/locales/"
 
-            ⚠️ Please review the translations and approve the PR if everything looks correct.
-          branch: translation-update-${{ github.run_number }}
-          delete-branch: true
-          base: develop
-          add-paths: |
-            client/src/locales/*.json
-          committer: GitHub Action <github-actions[bot]@users.noreply.github.com>
-          author: GitHub Action <github-actions[bot]@users.noreply.github.com>
+#       - name: Get current date
+#         id: date
+#         run: echo "date=$(date +'%Y-%m-%d %H:%M:%S')" >> $GITHUB_OUTPUT
+
+#       - name: Format client code
+#         run: |
+#           cd client
+#           npm ci
+#           npm run format
+
+#       - name: Create Pull Request
+#         uses: peter-evans/create-pull-request@v7
+#         with:
+#           token: ${{ secrets.GITHUB_TOKEN }}
+#           commit-message: "feat: translations updated from POEditor"
+#           title: "🌐 Updated Translations from POEditor"
+#           body: |
+#             This PR contains the latest translations from POEditor.
+
+#             📅 Update Date: ${{ steps.date.outputs.date }}
+#             🔄 Updated Languages: ${{ github.event.inputs.languages || 'tr,en' }}
+
+#             ⚠️ Please review the translations and approve the PR if everything looks correct.
+#           branch: translation-update-${{ github.run_number }}
+#           delete-branch: true
+#           base: develop
+#           add-paths: |
+#             client/src/locales/*.json
+#           committer: GitHub Action <github-actions[bot]@users.noreply.github.com>
+#           author: GitHub Action <github-actions[bot]@users.noreply.github.com>

.github/workflows/production-deploy.yml

@@ -2,7 +2,7 @@ name: Demo deploy
 
 on:
   push:
-    branches: ["demo"]
+    branches: [ "demo" ]
   workflow_dispatch:
 jobs:
   docker-build-and-push-client:
@@ -84,7 +84,8 @@ jobs:
           script: |
             cd checkmate
             git pull
-            cd docker/prod
+            cd docker/unified
             docker compose down
             docker compose pull
             docker compose up -d
+            docker system prune -af

.github/workflows/staging-deploy.yml

@@ -2,7 +2,7 @@ name: Staging deploy
 
 on:
   push:
-    branches: ["develop"]
+    branches: [ "develop" ]
 
 jobs:
   docker-build-and-push-client:
@@ -78,13 +78,13 @@ jobs:
       - name: SSH into server and restart container using Docker Compose
         uses: appleboy/ssh-action@v1.2.2
         with:
-          host: ${{ secrets.STAGING_SERVER_HOST }}
-          username: ${{ secrets.STAGING_SERVER_USER }}
-          key: ${{ secrets.STAGING_SERVER_SSH_KEY }}
+          host: ${{ secrets.DEMO_SERVER_HOST }}
+          username: ${{ secrets.DEMO_SERVER_USER }}
+          key: ${{ secrets.DEMO_SERVER_SSH_KEY }}
           script: |
             cd checkmate
             git pull
-            cd docker/staging
+            cd docker/unified
             docker compose down
             docker compose pull
             docker compose up -d

.gitignore

@@ -5,4 +5,6 @@
 mongo
 node_modules/
 docs/architecture
-docs/reviews
+docs/reviews
+docs/todo
+docs/frontend

CLAUDE.md

@@ -105,6 +105,56 @@ client/src/
 - **Queue/Cache**: Redis + BullMQ + Pulse (cron scheduling)
 - **i18n**: i18next + react-i18next (translations via PoEditor)
 
+---
+
+## Backend Architecture Patterns
+
+### Repository Pattern & Separation of Concerns
+
+The backend enforces a strict three-layer separation between HTTP handling, business logic, and data access:
+
+```
+Request → Controller → Service → Repository → MongoDB (Mongoose)
+```
+
+- **Controllers** (`/controllers`) handle HTTP concerns only: parsing request params, calling the appropriate service, and returning a response via the `responseHandler` middleware. They contain no business logic.
+- **Services** (`/service/business`) contain all business logic: deciding whether an incident should be created, whether a notification should fire, what state a monitor is in, etc.
+- **Repositories** (`/repositories`) are the sole layer that talks to MongoDB through Mongoose. They expose clean, reusable query methods (e.g. `findByMonitorId`, `createCheck`) so that services never construct raw DB queries directly.
+
+This separation makes each layer independently testable and keeps Mongoose-specific code out of business logic. When adding a new feature, the pattern to follow is: add a repository method for any new DB query, call it from a service, and expose it via a controller route.
+
+### Monitoring Flow: From Check to Notification
+
+Background monitoring runs on a scheduled queue, not on the HTTP request cycle. The high-level flow for uptime monitoring is:
+
+```
+Pulse (cron) → BullMQ Job → StatusService
+                                 ├── performs HTTP/port/ping check
+                                 ├── saves Check via CheckRepository
+                                 ├── evaluates monitor state change
+                                 │     └── calls IncidentService (create / resolve incident)
+                                 └── calls NotificationService (email, Slack, Discord, webhook)
+```
+
+1. **Pulse** (cron scheduler) enqueues a job into a **BullMQ** queue for each active monitor at its configured interval.
+2. A **BullMQ worker** picks up the job and calls `StatusService`, which performs the actual check (HTTP request, TCP port probe, ping, etc.).
+3. The result is persisted as a `Check` document via the repository layer.
+4. `StatusService` compares the new result against the monitor's previous state. If the monitor transitions from up → down (or down → up), it delegates to `IncidentService` to open or resolve an `Incident` document.
+5. On a state change, `NotificationService` reads the monitor's configured `Notification` documents and dispatches alerts to all enabled channels (email, Discord, Slack, webhooks).
+
+### Queue System (BullMQ + Redis)
+
+Redis serves two roles: job queue storage for BullMQ and ephemeral caching. BullMQ manages concurrency, retries, and backpressure for monitoring jobs, ensuring checks are processed reliably even under load.
+
+- Each monitor type (HTTP, port, ping, infrastructure) maps to its own queue worker so failures in one type don't block others.
+- Job scheduling interval is driven by the `interval` field on the `Monitor` model.
+- Failed jobs are retried with configurable backoff before being moved to a dead-letter state.
+- Redis is also used to cache frequently read data (e.g. aggregated stats) to reduce MongoDB query pressure.
+
+When working on anything related to check scheduling, incident lifecycle, or notifications, trace the flow starting from the relevant BullMQ worker rather than from the controller layer.
+
+---
+
 ## Code Conventions
 
 ### Internationalization
@@ -142,4 +192,4 @@ Key Mongoose models in `/server/src/db/models/`:
 - **StatusPage** - Public status pages
 - **Notification** - Alert configuration (email, Discord, Slack, webhooks)
 - **MaintenanceWindow** - Scheduled maintenance periods
-- **AppSettings** - Global application settings
+- **AppSettings** - Global application settings

CODE_OF_CONDUCT.md

@@ -1,69 +1,69 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in the **bluewave-uptime** project and community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community, especially during Hacktoberfest, where we encourage new contributors to join and feel supported.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our community include:
-
-- Demonstrating empathy and kindness toward other people
-- Being respectful of differing opinions, viewpoints, and experiences
-- Giving and gracefully accepting constructive feedback
-- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
-- Focusing on what is best not just for us as individuals, but for the overall community
-
-Examples of unacceptable behavior include:
-
-- The use of sexualized language or imagery, and sexual attention or advances of any kind
-- Trolling, insulting or derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or email address, without their explicit permission
-- Other conduct which could reasonably be considered inappropriate in a professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
-
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned with this Code of Conduct, especially during Hacktoberfest to ensure a positive experience for all contributors.
-
-## Scope
-
-This Code of Conduct applies within all project spaces, and it also applies when an individual is officially representing the project or its community in public spaces. Examples of representing our project include using an official project email address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@bluewavelabs.ca. All complaints will be reviewed and investigated promptly and fairly.
-
-All project team members are obligated to respect the privacy and security of the reporter of any incident.
-
-## Enforcement Guidelines
-
-Project maintainers will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
-**Consequence**: A private, written warning from project maintainers, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-**Community Impact**: A violation through a single incident or series of actions.
-**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
-
-### 3. Temporary Ban
-**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
-**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
-**Consequence**: A permanent ban from any sort of public interaction within the community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
-
----
-
-By following this Code of Conduct, we can ensure a welcoming and inclusive environment, encouraging new contributors to engage with the project and the community. Thank you for helping make **bluewave-uptime** a positive space for all!
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in the **checkmate** project and community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community, especially during Hacktoberfest, where we encourage new contributors to join and feel supported.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned with this Code of Conduct, especially during Hacktoberfest to ensure a positive experience for all contributors.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and it also applies when an individual is officially representing the project or its community in public spaces. Examples of representing our project include using an official project email address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@bluewavelabs.ca. All complaints will be reviewed and investigated promptly and fairly.
+
+All project team members are obligated to respect the privacy and security of the reporter of any incident.
+
+## Enforcement Guidelines
+
+Project maintainers will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
+**Consequence**: A private, written warning from project maintainers, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+**Community Impact**: A violation through a single incident or series of actions.
+**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+### 3. Temporary Ban
+**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
+**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
+**Consequence**: A permanent ban from any sort of public interaction within the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+---
+
+By following this Code of Conduct, we can ensure a welcoming and inclusive environment, encouraging new contributors to engage with the project and the community. Thank you for helping make **checkmate** a positive space for all!

CONTRIBUTING.md

@@ -16,7 +16,7 @@ PS: **We work closely with contributors on our [Discord channel](https://discord
 Before you dive in, make sure you have these installed:
 
 ```bash
-# Check Node.js (v16+ required)
+# Check Node.js (v20+ required)
 node --version
 
 # Check npm
@@ -96,10 +96,16 @@ cd docker/dev
 
 Build the Docker images:
 
+Linux:
 ```bash
 ./build_images.sh
 ```
 
+Windows:
+```bash
+./build_images.bat
+```
+
 Run MongoDB container:
 
 ```bash

PULLREQUESTS.md

@@ -33,4 +33,4 @@ Ensure you execute `npm run format` before submitting your pull requests in both
 
 ### Keep PRs focused
 
-It may be tempting to address a bug you suddenly remembered or make some tiny adjustments in some component that bothers you, but don’t!  Keep all commits in your pull request fully focused on the specific feature you are working on.  Open up another PR if you want to fix a big or work on another feature.
+It may be tempting to address a bug you suddenly remembered or make some tiny adjustments in some component that bothers you, but don’t!  Keep all commits in your pull request fully focused on the specific feature you are working on.  Open up another PR if you want to fix a bug or work on another feature.

README.es.md

@@ -76,7 +76,7 @@ También puedes ver el consumo de memoria de MongoDB y Redis en el mismo servido
 Si tienes alguna pregunta, sugerencia o comentario, tienes varias opciones:
 
 - [Canal de Discord](https://discord.gg/NAb6H3UTjK)
-- [Discusiones en GitHub](https://github.com/bluewave-labs/bluewave-uptime/discussions)
+- [Discusiones en GitHub](https://github.com/bluewave-labs/checkmate/discussions)
 - [Grupo en Reddit](https://www.reddit.com/r/CheckmateMonitoring/)
 
 ¡No dudes en hacer preguntas o compartir tus ideas, nos encantaría saber de ti!

README.md

@@ -14,6 +14,8 @@
 
 <p align="center"><strong>An open source uptime and infrastructure monitoring application</strong></p>
 
+[![Run on PikaPods](https://www.pikapods.com/static/run-button.svg)](https://www.pikapods.com/pods?run=checkmate)
+
 <img width="1660" alt="image" src="https://github.com/user-attachments/assets/b748f36d-a271-4965-ad0a-18bf153bbee7" />
 
 This repository contains both the frontend and the backend of Checkmate, an open-source, self-hosted monitoring tool for tracking server hardware, uptime, response times, and incidents in real-time with beautiful visualizations. Checkmate regularly checks whether a server/website is accessible and performs optimally, providing real-time alerts and reports on the monitored services' availability, downtime, and response time.
@@ -29,7 +31,6 @@ Checkmate has been stress-tested with 1000+ active monitors without any particul
 - [📦 Demo](#demo)  
 - [🔗 User's guide](#users-guide)  
 - [🛠️ Installation](#installation)
-- [🏁 Translations](#translations)  
 - [🚀 Performance](#performance)  
 - [💚 Questions & Ideas](#questions--ideas)  
 - [🧩 Features](#features)  
@@ -42,17 +43,23 @@ Checkmate has been stress-tested with 1000+ active monitors without any particul
 
 ## Demo
 
-You can see the latest build of [Checkmate](https://checkmate-demo.bluewavelabs.ca/) in action. The username is uptimedemo@demo.com and the password is Demouser1! (just a note that we update the demo server from time to time, so if it doesn't work for you, please ping us on the Discussions channel).
+You can see the latest build of [Checkmate](https://demo.checkmate.so/) in action. 
+
+The username is demouser@demo.com and the password is Demouser1! (just a note that we update the demo server from time to time, so if it doesn't work for you, please ping us on the Discussions channel).
 
 ## User's guide
 
-Usage instructions can be found [here](https://docs.checkmate.so/checkmate-2.1). It's still WIP and some of the information there might be outdated as we continuously add features weekly. Rest assured, we are doing our best! :)
+Usage instructions can be found [here](https://checkmate.so/docs). 
+
+## Prerequisites
+- [Docker](https://www.docker.com/) installed
+- [Git](https://git-scm.com/) installed
 
 ## Installation
 
-See installation instructions in [Checkmate documentation portal](https://docs.checkmate.so/checkmate-2.1/users-guide/quickstart). 
+See installation instructions in [Checkmate documentation portal](https://checkmate.so/docs). 
 
-Alternatively, you can also use [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) (South Africa) or [Pikapods](https://www.pikapods.com/) to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). Capture repository also contains the installation instructions.
+Alternatively, you can also use [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) (South Africa), [Cloudzy](https://cloudzy.com/marketplace/checkmate) or [Pikapods](https://www.pikapods.com/) to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). Capture repository also contains the installation instructions.
 
 ### Using a Custom CA
 
@@ -60,11 +67,6 @@ If you need to monitor internal HTTPS endpoints with certificates from private C
 
 For more documentation, see the [docs directory](./docs/).
 
-
-## Translations
-
-If you would like to use Checkmate in your language, please [go to this page](https://poeditor.com/join/project/lRUoGZFCsJ) and register for the language you would like to translate Checkmate to. 
-
 ## Performance
 
 Thanks to extensive optimizations, Checkmate operates with an exceptionally small memory footprint, requiring minimal memory and CPU resources. Here’s the memory usage of a Node.js instance running on a server that monitors 323 servers every minute:
@@ -80,7 +82,7 @@ You can see the memory footprint of MongoDB and Redis on the same server (398Mb
 If you have any questions, suggestions or comments, you have several options: 
 
 - [Discord channel](https://discord.gg/NAb6H3UTjK) (preferred)
-- [GitHub Discussions](https://github.com/bluewave-labs/bluewave-uptime/discussions) (we check here from time to time)
+- [GitHub Discussions](https://github.com/bluewave-labs/Checkmate/discussions) (we check here from time to time)
 
 Feel free to ask questions or share your ideas - we'd love to hear from you!
 
@@ -112,6 +114,15 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
 
 If you would like to sponsor an additional feature, [see this page](https://checkmate.so/sponsored-features).
 
+## Monitor Lifecycle
+
+1. A monitor executes a check (HTTP / ping / port / hardware via Capture agent)
+2. The result is stored (success/failure + response time)
+3. Recent check results are evaluated against the monitor's configured status change threshold
+4. If the monitor's status change threshold is met and the current status is not equal to the previous status, the monitor's state changes (e.g. `initializing`, `up`, `down`, `breached`)
+5. Upon a state change: an incident is either created or resolved, depending on the monitor's current status
+6. Notifications are triggered based on configuration
+
 ## Screenshots
 
 <p>
@@ -157,27 +168,20 @@ Here's how you can contribute:
 
 0. Star this repo :)
 1. Check [Contributor's guideline](https://github.com/bluewave-labs/Checkmate/blob/develop/CONTRIBUTING.md). First timers are encouraged to check `good-first-issue` tag.
-2. Check [project structure](https://docs.checkmate.so/checkmate-2.1/developers-guide/general-project-structure) and [high level overview](https://bluewavelabs.gitbook.io/checkmate/developers-guide/high-level-overview).
-3. Read a detailed structure of [Checkmate](https://deepwiki.com/bluewave-labs/Checkmate) if you would like to deep dive into the architecture.
-4. Open an issue if you believe you've encountered a bug.
-5. Check for good-first-issue's if you are a newcomer.
-6. Make a pull request to add new features/make quality-of-life improvements/fix bugs.
-7. Check out this interactive walkthrough of the `Checkmate` codebase on CodeCanvas [here](https://www.code-canvas.com/?session=unauthenticatedGithub&repo=Checkmate&owner=bluewave-labs&branch=develop&OnboardingTutorial=true). To refine existing dataflow simulation or create new ones, follow the quick tutorial [here](https://docs.code-canvas.com/updating-diagram).
+2. Read a detailed structure of [Checkmate](https://deepwiki.com/bluewave-labs/Checkmate) if you would like to deep dive into the architecture.
+3. Open an issue if you believe you've encountered a bug.
+4. Check for good-first-issue's if you are a newcomer.
+5. Make a pull request to add new features/make quality-of-life improvements/fix bugs.
+6. Check out this interactive walkthrough of the `Checkmate` codebase on CodeCanvas [here](https://www.code-canvas.com/?session=unauthenticatedGithub&repo=Checkmate&owner=bluewave-labs&branch=develop&OnboardingTutorial=true). To refine existing dataflow simulation or create new ones, follow the quick tutorial [here](https://docs.code-canvas.com/updating-diagram).
 
 <a href="https://github.com/bluewave-labs/checkmate/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=bluewave-labs/checkmate" />
 </a>
 
-[![Star History Chart](https://api.star-history.com/svg?repos=bluewave-labs/checkmate&type=Date)](https://star-history.com/#bluewave-labs/bluewave-uptime&Date)
+[![Star History Chart](https://api.star-history.com/svg?repos=bluewave-labs/checkmate&type=Date)](https://star-history.com/#bluewave-labs/Checkmate&Date)
 
 ## Our sponsors
 
 Thanks to [Gitbook](https://gitbook.io/) for giving us a free tier for their documentation platform, and [Poeditor](https://poeditor.com/) providing us a free account to use their i18n services. If you would like to sponsor Checkmate, please send an email to hello@bluewavelabs.ca
 
 If you would like to sponsor a feature, [see this page](https://checkmate.so/sponsored-features).
-
-Also check other developer and contributor-friendly projects of BlueWave:
-
-- [VerifyWise](https://github.com/bluewave-labs/verifywise), the first open source AI governance platform.
-- [DataRoom](https://github.com/bluewave-labs/bluewave-dataroom), an secure file sharing application, aka dataroom.
-- [Guidefox](https://github.com/bluewave-labs/guidefox), an application that helps new users learn how to use your product via hints, tours, popups and banners.

client/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "client",
 	"private": true,
-	"version": "0.0.0",
+	"version": "3.6.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
@@ -13,7 +13,7 @@
 		"format-check": "prettier --check ."
 	},
 	"lint-staged": {
-		"**/*": "npm run format"
+		"**/*": "prettier --write"
 	},
 	"dependencies": {
 		"@emotion/react": "^11.13.3",
@@ -25,6 +25,7 @@
 		"@mui/x-charts": "7.29.1",
 		"@mui/x-date-pickers": "7.29.4",
 		"@reduxjs/toolkit": "2.7.0",
+		"@types/maplibre-gl": "^1.13.2",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
 		"flag-icons": "7.3.2",
@@ -33,6 +34,7 @@
 		"i18next": "25.4.2",
 		"joi": "17.13.3",
 		"lucide-react": "^0.562.0",
+		"maplibre-gl": "^5.19.0",
 		"mui-color-input": "^7.0.0",
 		"pretty-bytes": "^7.1.0",
 		"pretty-ms": "^9.3.0",
@@ -41,6 +43,7 @@
 		"react-hook-form": "^7.63.0",
 		"react-i18next": "^15.4.0",
 		"react-icons": "5.5.0",
+		"react-map-gl": "^8.1.0",
 		"react-redux": "9.2.0",
 		"react-router": "^6.23.0",
 		"react-router-dom": "^6.23.1",
@@ -49,7 +52,7 @@
 		"redux-persist": "6.0.0",
 		"swr": "^2.3.6",
 		"vite-plugin-svgr": "^4.2.0",
-		"zod": "^4.1.11"
+		"zod": "^4.3.6"
 	},
 	"devDependencies": {
 		"@types/node": "24.5.2",
@@ -63,6 +66,6 @@
 		"lint-staged": "^16.2.7",
 		"prettier": "^3.3.3",
 		"typescript": "5.9.3",
-		"vite": "6.3.6"
+		"vite": "6.4.1"
 	}
 }

client/scripts/migrate-locales.ts

@@ -0,0 +1,258 @@
+/**
+ * Locale Migration Script
+ *
+ * Restructures all non-English locale files to match en.json's nested key structure.
+ * Recovers translations via safe key-matching strategies, uses English placeholders
+ * for unmatched keys.
+ *
+ * Usage: npx tsx client/scripts/migrate-locales.ts
+ *
+ * SAFETY: en.json is NEVER modified. Originals are backed up before overwriting.
+ */
+
+import fs from "fs";
+import path from "path";
+
+const LOCALES_DIR = path.resolve(import.meta.dirname, "../src/locales");
+const BACKUP_DIR = path.join(LOCALES_DIR, "backup");
+const REPORT_PATH = path.join(LOCALES_DIR, "migration-report.json");
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+/** Flatten a nested object into { "a.b.c": value } pairs */
+function flattenKeys(obj: Record<string, unknown>, prefix = ""): Record<string, string> {
+	const result: Record<string, string> = {};
+	for (const [key, value] of Object.entries(obj)) {
+		const fullPath = prefix ? `${prefix}.${key}` : key;
+		if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+			Object.assign(result, flattenKeys(value as Record<string, unknown>, fullPath));
+		} else {
+			result[fullPath] = String(value);
+		}
+	}
+	return result;
+}
+
+/** Set a value at a dot-separated path in a nested object */
+function setNestedValue(
+	obj: Record<string, unknown>,
+	keyPath: string,
+	value: string
+): void {
+	const parts = keyPath.split(".");
+	let current = obj;
+	for (let i = 0; i < parts.length - 1; i++) {
+		const part = parts[i];
+		if (!(part in current) || typeof current[part] !== "object") {
+			current[part] = {};
+		}
+		current = current[part] as Record<string, unknown>;
+	}
+	current[parts[parts.length - 1]] = value;
+}
+
+// ── Build mapping indexes from en.json ───────────────────────────────────────
+
+function buildIndexes(enFlat: Record<string, string>) {
+	const enKeys = Object.keys(enFlat);
+
+	// last segment -> en key paths
+	const lastSegIndex: Record<string, string[]> = {};
+	// last 2 segments -> en key paths
+	const suffixIndex: Record<string, string[]> = {};
+
+	for (const keyPath of enKeys) {
+		const parts = keyPath.split(".");
+		const lastSeg = parts[parts.length - 1].toLowerCase();
+		if (!lastSegIndex[lastSeg]) lastSegIndex[lastSeg] = [];
+		lastSegIndex[lastSeg].push(keyPath);
+
+		if (parts.length >= 2) {
+			const suffix = parts.slice(-2).join(".").toLowerCase();
+			if (!suffixIndex[suffix]) suffixIndex[suffix] = [];
+			suffixIndex[suffix].push(keyPath);
+		}
+	}
+
+	return { lastSegIndex, suffixIndex };
+}
+
+// ── Mapping logic ────────────────────────────────────────────────────────────
+
+type MatchStrategy = "exact" | "suffix-2" | "unique-name" | "english-placeholder";
+
+interface KeyMatch {
+	enKey: string;
+	value: string;
+	strategy: MatchStrategy;
+}
+
+function buildMigratedLocale(
+	enFlat: Record<string, string>,
+	langFlat: Record<string, string>,
+	indexes: ReturnType<typeof buildIndexes>
+): { matches: KeyMatch[]; result: Record<string, unknown> } {
+	const { lastSegIndex, suffixIndex } = indexes;
+	const matches: KeyMatch[] = [];
+	const result: Record<string, unknown> = {};
+
+	// Build reverse lookup: for each orphan key in lang, index by last segment and suffix
+	const langByLastSeg: Record<string, { key: string; value: string }[]> = {};
+	const langBySuffix: Record<string, { key: string; value: string }[]> = {};
+
+	for (const [langKey, langValue] of Object.entries(langFlat)) {
+		const parts = langKey.split(".");
+		const lastSeg = parts[parts.length - 1].toLowerCase();
+		if (!langByLastSeg[lastSeg]) langByLastSeg[lastSeg] = [];
+		langByLastSeg[lastSeg].push({ key: langKey, value: langValue });
+
+		if (parts.length >= 2) {
+			const suffix = parts.slice(-2).join(".").toLowerCase();
+			if (!langBySuffix[suffix]) langBySuffix[suffix] = [];
+			langBySuffix[suffix].push({ key: langKey, value: langValue });
+		}
+	}
+
+	for (const enKey of Object.keys(enFlat)) {
+		const enValue = enFlat[enKey];
+		const parts = enKey.split(".");
+		const lastSeg = parts[parts.length - 1].toLowerCase();
+		const suffix = parts.length >= 2 ? parts.slice(-2).join(".").toLowerCase() : null;
+
+		// Strategy 1: Exact path match
+		if (langFlat[enKey] !== undefined) {
+			const value = langFlat[enKey];
+			setNestedValue(result, enKey, value);
+			matches.push({ enKey, value, strategy: "exact" });
+			continue;
+		}
+
+		// Strategy 2: 2-segment suffix match (lang key suffix matches en key suffix, both unique)
+		if (suffix) {
+			const enCandidates = suffixIndex[suffix];
+			const langCandidates = langBySuffix[suffix];
+			if (
+				enCandidates &&
+				enCandidates.length === 1 &&
+				langCandidates &&
+				langCandidates.length === 1
+			) {
+				const value = langCandidates[0].value;
+				setNestedValue(result, enKey, value);
+				matches.push({ enKey, value, strategy: "suffix-2" });
+				continue;
+			}
+		}
+
+		// Strategy 3: Unique last-segment match
+		const enCandidates = lastSegIndex[lastSeg];
+		const langCandidates = langByLastSeg[lastSeg];
+		if (
+			enCandidates &&
+			enCandidates.length === 1 &&
+			langCandidates &&
+			langCandidates.length === 1
+		) {
+			const value = langCandidates[0].value;
+			setNestedValue(result, enKey, value);
+			matches.push({ enKey, value, strategy: "unique-name" });
+			continue;
+		}
+
+		// No match — use English placeholder
+		setNestedValue(result, enKey, enValue);
+		matches.push({ enKey, value: enValue, strategy: "english-placeholder" });
+	}
+
+	return { matches, result };
+}
+
+// ── Main ─────────────────────────────────────────────────────────────────────
+
+function main() {
+	// Load en.json
+	const enPath = path.join(LOCALES_DIR, "en.json");
+	const en = JSON.parse(fs.readFileSync(enPath, "utf8"));
+	const enFlat = flattenKeys(en);
+	const enKeyCount = Object.keys(enFlat).length;
+	const indexes = buildIndexes(enFlat);
+
+	console.log(`English: ${enKeyCount} keys (source of truth — NOT modified)\n`);
+
+	// Find all non-English locale files
+	const localeFiles = fs
+		.readdirSync(LOCALES_DIR)
+		.filter(
+			(f: string) =>
+				f.endsWith(".json") && f !== "en.json" && f !== "migration-report.json"
+		);
+
+	if (localeFiles.length === 0) {
+		console.log("No locale files to migrate.");
+		return;
+	}
+
+	// Create backup directory
+	if (!fs.existsSync(BACKUP_DIR)) {
+		fs.mkdirSync(BACKUP_DIR, { recursive: true });
+	}
+
+	const report: Record<
+		string,
+		{
+			total: number;
+			exact: number;
+			suffix: number;
+			uniqueName: number;
+			placeholder: number;
+		}
+	> = {};
+
+	for (const file of localeFiles) {
+		const lang = file.replace(".json", "");
+		const filePath = path.join(LOCALES_DIR, file);
+
+		// Backup original
+		const backupPath = path.join(BACKUP_DIR, file);
+		fs.copyFileSync(filePath, backupPath);
+
+		// Load and flatten
+		const langData = JSON.parse(fs.readFileSync(filePath, "utf8"));
+		const langFlat = flattenKeys(langData);
+
+		// Migrate
+		const { matches, result } = buildMigratedLocale(enFlat, langFlat, indexes);
+
+		// Write migrated file
+		fs.writeFileSync(filePath, JSON.stringify(result, null, "\t") + "\n", "utf8");
+
+		// Compute stats
+		const stats = {
+			total: enKeyCount,
+			exact: matches.filter((m) => m.strategy === "exact").length,
+			suffix: matches.filter((m) => m.strategy === "suffix-2").length,
+			uniqueName: matches.filter((m) => m.strategy === "unique-name").length,
+			placeholder: matches.filter((m) => m.strategy === "english-placeholder").length,
+		};
+		report[lang] = stats;
+
+		const translated = stats.exact + stats.suffix + stats.uniqueName;
+		const pct = ((translated / enKeyCount) * 100).toFixed(1);
+		console.log(
+			`${lang.padEnd(8)} ${String(translated).padStart(4)} translated (${pct}%)  |  ` +
+				`exact: ${stats.exact}  suffix: ${stats.suffix}  name: ${stats.uniqueName}  ` +
+				`placeholder: ${stats.placeholder}`
+		);
+	}
+
+	// Write report
+	fs.writeFileSync(REPORT_PATH, JSON.stringify(report, null, "\t") + "\n", "utf8");
+
+	const totalLangs = localeFiles.length;
+	console.log(
+		`\nMigrated ${totalLangs} locale files. Originals backed up to locales/backup/`
+	);
+	console.log(`Report written to ${REPORT_PATH}`);
+}
+
+main();

client/src/App.tsx

@@ -4,39 +4,52 @@ import "react-toastify/dist/ReactToastify.css";
 import { ToastContainer } from "react-toastify";
 import { ThemeProvider } from "@emotion/react";
 import { CssBaseline, GlobalStyles } from "@mui/material";
+import { SWRConfig } from "swr";
 import { Routes } from "./Routes";
 import AppLayout from "@/Components/layout/AppLayout";
 import type { RootState } from "@/Types/state";
 import { lightTheme, darkTheme } from "@/Utils/Theme/Theme";
 
+const swrConfig = {
+	dedupingInterval: 5000,
+	revalidateOnFocus: false,
+	revalidateOnReconnect: true,
+	shouldRetryOnError: false,
+	errorRetryCount: 2,
+	errorRetryInterval: 1000,
+	focusThrottleInterval: 5000,
+};
+
 function App() {
 	const mode = useSelector((state: RootState) => state.ui.mode);
 	const theme = mode === "light" ? lightTheme : darkTheme;
 
 	return (
-		<ThemeProvider theme={theme}>
-			<CssBaseline />
-			<GlobalStyles
-				styles={{
-					body: {
-						backgroundColor: theme.palette.background.default,
-					},
-				}}
-			/>
-			<AppLayout>
-				<Routes />
-			</AppLayout>
-			<ToastContainer
-				newestOnTop={true}
-				theme={mode}
-				style={
-					{
-						"--toastify-color-progress-light": "#7C8BA1",
-						"--toastify-color-progress-dark": "#7C8BA1",
-					} as CSSProperties
-				}
-			/>
-		</ThemeProvider>
+		<SWRConfig value={swrConfig}>
+			<ThemeProvider theme={theme}>
+				<CssBaseline />
+				<GlobalStyles
+					styles={{
+						body: {
+							backgroundColor: theme.palette.background.default,
+						},
+					}}
+				/>
+				<AppLayout>
+					<Routes />
+				</AppLayout>
+				<ToastContainer
+					newestOnTop={true}
+					theme={mode}
+					style={
+						{
+							"--toastify-color-progress-light": "#7C8BA1",
+							"--toastify-color-progress-dark": "#7C8BA1",
+						} as CSSProperties
+					}
+				/>
+			</ThemeProvider>
+		</SWRConfig>
 	);
 }
 

client/src/Components/common/charts/HeatmapResponseTime.tsx

@@ -32,7 +32,7 @@ export const HeatmapResponseTime = ({
 
 	if (!checks || checks.length === 0) return null;
 
-	const latestChecks = checks.slice(-25).reverse();
+	const latestChecks = checks.slice(-25);
 
 	let data: Array<CheckSnapshot | PlaceholderCheck>;
 	if (latestChecks.length !== 25) {

client/src/Components/common/charts/HeatmapResponseTimeTooltip.tsx

@@ -57,7 +57,8 @@ export const HeatmapResponseTimeTooltip = ({
 						{formatDateWithTz(check?.createdAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone)}
 					</Typography>
 					<Typography>
-						{t("common.labels.responseTime")}: {check.originalResponseTime.toFixed()} ms
+						{t("common.labels.responseTime")}:{" "}
+						{check?.originalResponseTime?.toFixed() ?? "N/A"} ms
 					</Typography>
 					<Typography textTransform={"capitalize"}>
 						Status:{" "}

client/src/Components/design-elements/BaseChart.tsx

@@ -2,6 +2,7 @@ import { BaseBox } from ".";
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
+import { LAYOUT } from "@/Utils/Theme/constants";
 import type { ResponsiveStyleValue } from "@mui/system";
 
 import { useTheme } from "@mui/material/styles";
@@ -26,7 +27,7 @@ export const BaseChart = ({
 	return (
 		<BaseBox
 			sx={{
-				padding: padding ?? theme.spacing(8),
+				padding: padding ?? theme.spacing(LAYOUT.MD),
 				display: "flex",
 				flex: 1,
 				width: width,
@@ -34,13 +35,13 @@ export const BaseChart = ({
 			}}
 		>
 			<Stack
-				gap={theme.spacing(8)}
+				gap={theme.spacing(LAYOUT.MD)}
 				flex={1}
 			>
 				<Stack
 					direction="row"
 					alignItems={"center"}
-					gap={theme.spacing(4)}
+					gap={theme.spacing(LAYOUT.XS)}
 				>
 					{icon && (
 						<BaseBox

client/src/Components/design-elements/BasePage.tsx

@@ -3,6 +3,7 @@ import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Alert from "@mui/material/Alert";
 import Link from "@mui/material/Link";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
 import {
 	ErrorFallback,
 	EmptyFallback,
@@ -91,7 +92,7 @@ export const BasePage = ({
 
 	return (
 		<Stack
-			spacing={theme.spacing(10)}
+			spacing={theme.spacing(LAYOUT.LG)}
 			{...props}
 		>
 			<Breadcrumb breadcrumbOverride={breadcrumbOverride} />
@@ -220,7 +221,7 @@ export const BaseAuthPage = ({
 	return (
 		<BasePage
 			breadcrumbOverride={[]}
-			gap={theme.spacing(8)}
+			gap={theme.spacing(LAYOUT.MD)}
 			alignItems={"center"}
 			justifyContent={"center"}
 			minHeight="100vh"
@@ -229,7 +230,7 @@ export const BaseAuthPage = ({
 		>
 			<HeaderAuthControls
 				hideLogo
-				py={theme.spacing(4)}
+				py={theme.spacing(LAYOUT.XS)}
 				position={"absolute"}
 				top={0}
 				left={0}
@@ -243,14 +244,14 @@ export const BaseAuthPage = ({
 			<Stack alignItems={"center"}>
 				<Typography
 					variant="h1"
-					mb={theme.spacing(2)}
+					mb={theme.spacing(SPACING.LG)}
 				>
 					{title}
 				</Typography>
 				<Typography variant="h2">{subtitle}</Typography>
 			</Stack>
 			<Stack
-				gap={theme.spacing(8)}
+				gap={theme.spacing(LAYOUT.MD)}
 				width={{
 					xs: "80%",
 					md: "25%",

client/src/Components/design-elements/BulletPointCheck.tsx

@@ -2,6 +2,7 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { Check } from "lucide-react";
 import { useTheme } from "@mui/material/styles";
+import { LAYOUT } from "@/Utils/Theme/constants";
 
 export const BulletPointCheck = ({
 	text,
@@ -21,7 +22,7 @@ export const BulletPointCheck = ({
 	return (
 		<Stack
 			direction="row"
-			gap={theme.spacing(6)}
+			gap={theme.spacing(LAYOUT.SM)}
 			alignItems="center"
 		>
 			<Check

client/src/Components/design-elements/Fallback.tsx

@@ -2,6 +2,7 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { BulletPointCheck, SkeletonCard } from "@/Components/design-elements";
 import { Button } from "@/Components/inputs";
+import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
 
 import { useNavigate } from "react-router";
 import useMediaQuery from "@mui/material/useMediaQuery";
@@ -27,7 +28,7 @@ export const BaseFallback = ({ children, ...props }: BaseFallbackProps) => {
 				lg: "50%",
 				xl: "40%",
 			}}
-			padding={{ xs: theme.spacing(8), md: theme.spacing(16) }}
+			padding={{ xs: theme.spacing(LAYOUT.MD), md: theme.spacing(LAYOUT.XXL) }}
 			bgcolor={theme.palette.background.paper}
 			border={1}
 			borderColor={theme.palette.divider}
@@ -55,7 +56,7 @@ export const ErrorFallback = ({
 		<BaseFallback>
 			<Typography
 				variant="h1"
-				marginY={theme.spacing(4)}
+				marginY={theme.spacing(LAYOUT.XS)}
 				color={theme.palette.text.secondary}
 			>
 				{title}
@@ -81,7 +82,7 @@ export const EmptyFallback = ({
 	return (
 		<BaseFallback>
 			<Stack
-				gap={theme.spacing(10)}
+				gap={theme.spacing(LAYOUT.MD)}
 				zIndex={1}
 				alignItems="center"
 			>
@@ -89,7 +90,7 @@ export const EmptyFallback = ({
 				<Stack
 					sx={{
 						flexWrap: "wrap",
-						gap: theme.spacing(2),
+						gap: theme.spacing(SPACING.MD),
 						maxWidth: "1100px",
 						width: "100%",
 					}}
@@ -134,7 +135,7 @@ export const EmptyMonitorFallback = ({
 	return (
 		<BaseFallback>
 			<Stack
-				gap={theme.spacing(10)}
+				gap={theme.spacing(LAYOUT.MD)}
 				zIndex={1}
 				alignItems="center"
 			>
@@ -147,7 +148,7 @@ export const EmptyMonitorFallback = ({
 				<Stack
 					sx={{
 						flexWrap: "wrap",
-						gap: theme.spacing(2),
+						gap: theme.spacing(SPACING.MD),
 						maxWidth: "1100px",
 						width: "100%",
 					}}

client/src/Components/design-elements/SplitBox.tsx

@@ -3,6 +3,7 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { LAYOUT } from "@/Utils/Theme/constants";
 export const SplitBox = ({
 	left,
 	right,
@@ -18,10 +19,10 @@ export const SplitBox = ({
 			bgcolor={theme.palette.background.paper}
 			border={1}
 			borderColor={theme.palette.divider}
-			borderRadius={theme.spacing(2)}
+			borderRadius={theme.shape.borderRadius}
 		>
 			<Box
-				padding={theme.spacing(15)}
+				padding={theme.spacing(LAYOUT.XXL)}
 				borderRight={isSmall ? 0 : 1}
 				borderBottom={isSmall ? 1 : 0}
 				borderColor={theme.palette.divider}
@@ -37,7 +38,7 @@ export const SplitBox = ({
 			</Box>
 			<Box
 				flex={1}
-				padding={theme.spacing(15)}
+				padding={theme.spacing(LAYOUT.XXL)}
 			>
 				{right}
 			</Box>
@@ -60,7 +61,7 @@ export const ConfigBox = ({
 	return (
 		<SplitBox
 			left={
-				<Stack spacing={theme.spacing(4)}>
+				<Stack spacing={theme.spacing(LAYOUT.XS)}>
 					<Typography
 						textTransform={"capitalize"}
 						component="h2"

client/src/Components/design-elements/Table.tsx

@@ -29,6 +29,7 @@ import type { TablePaginationOwnProps } from "@mui/material/TablePagination";
 import { useTranslation } from "react-i18next";
 import { useState, Fragment, useEffect } from "react";
 import { useTheme } from "@mui/material/styles";
+import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
 import type { SxProps, Theme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
@@ -90,20 +91,20 @@ export function DataTable<
 	// Return stack of cards for small screens
 	if (isSmall && cardsOnSmallScreens) {
 		return (
-			<Stack spacing={theme.spacing(4)}>
+			<Stack spacing={theme.spacing(LAYOUT.XS)}>
 				{data.map((row) => {
 					const key = row.id || row._id || Math.random();
 					keys.push(key);
 					return (
 						<Stack
 							onClick={() => (onRowClick ? onRowClick(row) : null)}
-							spacing={theme.spacing(4)}
+							spacing={theme.spacing(LAYOUT.XS)}
 							sx={{
 								borderStyle: "solid",
 								borderWidth: 1,
 								borderColor: theme.palette.divider,
 								borderRadius: theme.shape.borderRadius,
-								padding: theme.spacing(4),
+								padding: theme.spacing(LAYOUT.XS),
 								cursor: onRowClick ? "pointer" : "default",
 							}}
 							key={key}
@@ -155,7 +156,7 @@ export function DataTable<
 			<Table
 				sx={{
 					"&.MuiTable-root  :is(.MuiTableHead-root, .MuiTableBody-root) :is(th, td)": {
-						paddingLeft: theme.spacing(8),
+						paddingLeft: theme.spacing(LAYOUT.MD),
 					},
 					"& .MuiTableCell-root": {
 						borderBottom: `1px solid ${theme.palette.divider}`,
@@ -168,13 +169,13 @@ export function DataTable<
 						color: theme.palette.text.secondary,
 						fontWeight: 500,
 						textTransform: "uppercase",
-						padding: `${theme.spacing(2)} ${theme.spacing(8)}`,
+						padding: `${theme.spacing(SPACING.LG)} ${theme.spacing(LAYOUT.MD)}`,
 						fontSize: theme.typography.fontSize,
 					},
 					"& :is(td)": {
 						backgroundColor: theme.palette.background.paper,
 						color: theme.palette.text.secondary,
-						padding: `${theme.spacing(7)} ${theme.spacing(8)}`,
+						padding: `${theme.spacing(LAYOUT.MD)} ${theme.spacing(LAYOUT.MD)}`,
 						fontSize: theme.typography.fontSize,
 						overflowX: "hidden",
 					},
@@ -514,7 +515,7 @@ export const Pagination = ({ ...props }: PaginationProps) => {
 							display: "grid",
 							gridTemplateColumns: "1fr 1fr",
 							gridAutoRows: "auto",
-							rowGap: theme.spacing(1),
+							rowGap: theme.spacing(SPACING.SM),
 							alignItems: "center",
 							justifyItems: "center",
 							paddingLeft: 0,
@@ -556,8 +557,8 @@ const EmptyView = ({ text, positive }: { text?: string; positive?: boolean }) =>
 			alignItems={"center"}
 			justifyContent={"center"}
 			sx={{
-				py: theme.spacing(12),
-				px: theme.spacing(4),
+				py: theme.spacing(LAYOUT.XL),
+				px: theme.spacing(LAYOUT.XS),
 				borderWidth: 1,
 				borderStyle: "solid",
 				borderColor: theme.palette.divider,
@@ -574,7 +575,7 @@ const EmptyView = ({ text, positive }: { text?: string; positive?: boolean }) =>
 					display: "flex",
 					alignItems: "center",
 					justifyContent: "center",
-					mb: theme.spacing(2),
+					mb: theme.spacing(SPACING.LG),
 				}}
 			>
 				<Icon

client/src/Components/inputs/Slider.tsx

@@ -11,20 +11,26 @@ import type { ResponsiveStyleValue } from "@mui/system";
 interface SliderInputProps extends SliderProps {
 	sx?: SliderProps["sx"];
 	showValue?: boolean;
+	formatDisplayValue?: (value: number) => string;
 }
 
 export const SliderInput = forwardRef<HTMLSpanElement, SliderInputProps>(
-	({ sx, showValue = false, ...props }, ref) => {
+	({ sx, showValue = false, formatDisplayValue, ...props }, ref) => {
 		const theme = useTheme();
 		const additionalSx = Array.isArray(sx) ? sx : sx ? [sx] : [];
 
+		const displayValue =
+			showValue && formatDisplayValue && typeof props.value === "number"
+				? formatDisplayValue(props.value)
+				: props.value;
+
 		return (
 			<Stack
 				gap={theme.spacing(8)}
 				direction={"row"}
 				alignItems={"center"}
 			>
-				{showValue && <Typography>{props.value}</Typography>}
+				{showValue && <Typography>{displayValue}</Typography>}
 				<Slider
 					{...props}
 					ref={ref}
@@ -63,12 +69,21 @@ interface SliderWithLabelProps extends SliderProps {
 	fieldLabel?: string;
 	required?: boolean;
 	showValue?: boolean;
+	formatDisplayValue?: (value: number) => string;
 	sliderMaxWidth?: ResponsiveStyleValue<number | string>;
 }
 
 export const SliderWithLabel = forwardRef<HTMLSpanElement, SliderWithLabelProps>(
 	(
-		{ fieldLabel, required, showValue = true, value, sliderMaxWidth = "100%", ...props },
+		{
+			fieldLabel,
+			required,
+			showValue = true,
+			formatDisplayValue,
+			value,
+			sliderMaxWidth = "100%",
+			...props
+		},
 		ref
 	) => {
 		const theme = useTheme();
@@ -82,6 +97,7 @@ export const SliderWithLabel = forwardRef<HTMLSpanElement, SliderWithLabelProps>
 					<SliderInput
 						{...props}
 						showValue={showValue}
+						formatDisplayValue={formatDisplayValue}
 						value={value}
 						ref={ref}
 					/>

client/src/Components/layout/AppLayout.tsx

@@ -1,9 +1,6 @@
 import Box from "@mui/material/Box";
 import { useState, useEffect, useRef } from "react";
 import { useTheme } from "@mui/material/styles";
-import { useSelector } from "react-redux";
-import BackgroundSVG from "@/assets/Images/background.svg";
-import type { RootState } from "@/Types/state";
 import { OfflineBanner } from "@/Components/design-elements";
 import { setServerUnreachableCallback, get } from "@/Utils/ApiClient";
 
@@ -13,7 +10,6 @@ interface AppLayoutProps {
 
 const AppLayout = ({ children }: AppLayoutProps) => {
 	const theme = useTheme();
-	const mode = useSelector((state: RootState) => state.ui.mode);
 	const [serverUnreachable, setServerUnreachable] = useState(false);
 	const retryIntervalRef = useRef<number | null>(null);
 
@@ -47,10 +43,6 @@ const AppLayout = ({ children }: AppLayoutProps) => {
 			sx={{
 				minHeight: "100vh",
 				backgroundColor: theme.palette.background.default,
-				backgroundImage: mode === "dark" ? `url("${BackgroundSVG}")` : "none",
-				backgroundSize: "100% 100%",
-				backgroundPosition: "center",
-				backgroundRepeat: "no-repeat",
 			}}
 		>
 			<OfflineBanner visible={serverUnreachable} />

client/src/Components/monitors/ControlsFilter.tsx

@@ -5,8 +5,18 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 
 import type { MonitorType } from "@/Types/Monitor";
 import { Typography, useTheme } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
-const types = ["http", "ping", "port", "docker", "game"];
+const types = ["http", "ping", "port", "docker", "game", "grpc", "websocket"];
+const typeDisplayNames: Record<string, string> = {
+	http: "HTTP",
+	ping: "Ping",
+	port: "Port",
+	docker: "Docker",
+	game: "Game",
+	grpc: "gRPC",
+	websocket: "WebSocket",
+};
 const statuses = ["up", "down"];
 const states = ["active", "paused"];
 
@@ -30,6 +40,7 @@ export const ControlsFilter = ({
 	onClearFilters: () => void;
 }) => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isFilterActive =
 		(selectedTypes?.length ?? 0) > 0 || selectedStatus !== "" || selectedState !== "";
@@ -50,7 +61,7 @@ export const ControlsFilter = ({
 							key={type}
 							value={type}
 						>
-							<Typography textTransform={"capitalize"}>{type}</Typography>
+							<Typography>{typeDisplayNames[type] ?? type}</Typography>
 						</MenuItem>
 					))}
 				</Select>
@@ -88,7 +99,7 @@ export const ControlsFilter = ({
 					variant="contained"
 					onClick={onClearFilters}
 				>
-					Clear Filters
+					{t("common.buttons.clearFilters")}
 				</Button>
 			)}
 		</Stack>

client/src/Components/monitors/GeoChecksMap.tsx

@@ -0,0 +1,203 @@
+import { useRef, useEffect, useState } from "react";
+import { Box, Typography, Stack, useTheme, GlobalStyles } from "@mui/material";
+import Map, { Marker, Popup } from "react-map-gl/maplibre";
+import type { MapRef } from "react-map-gl/maplibre";
+import type { FlatGeoCheck } from "@/Types/GeoCheck";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+interface GeoChecksMapProps {
+	geoChecks: FlatGeoCheck[];
+}
+
+export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
+	const mapRef = useRef<MapRef>(null);
+	const [selectedCheck, setSelectedCheck] = useState<FlatGeoCheck | null>(null);
+	const theme = useTheme();
+	const isDarkMode = theme.palette.mode === "dark";
+
+	const mapPopupStyles = (
+		<GlobalStyles
+			styles={{
+				".maplibregl-popup-content": {
+					background: "transparent !important",
+					padding: "0 !important",
+					boxShadow: "none !important",
+				},
+				".maplibregl-popup-tip": {
+					display: "none",
+				},
+				".maplibregl-ctrl-attrib": {
+					display: "none",
+				},
+				".maplibregl-ctrl-logo": {
+					display: "none",
+				},
+				".maplibregl-popup-close-button": {
+					color: theme.palette.text.primary,
+					background: "transparent",
+					fontSize: "20px",
+					padding: "4px",
+					"&:hover": {
+						backgroundColor: theme.palette.action.hover,
+					},
+				},
+			}}
+		/>
+	);
+
+	useEffect(() => {
+		if (geoChecks.length === 0 || !mapRef.current) return;
+
+		const bounds = geoChecks.reduce(
+			(acc, check) => {
+				return {
+					minLng: Math.min(acc.minLng, check.location.longitude),
+					maxLng: Math.max(acc.maxLng, check.location.longitude),
+					minLat: Math.min(acc.minLat, check.location.latitude),
+					maxLat: Math.max(acc.maxLat, check.location.latitude),
+				};
+			},
+			{
+				minLng: Infinity,
+				maxLng: -Infinity,
+				minLat: Infinity,
+				maxLat: -Infinity,
+			}
+		);
+
+		if (bounds.minLng !== Infinity) {
+			mapRef.current.fitBounds(
+				[
+					[bounds.minLng, bounds.minLat],
+					[bounds.maxLng, bounds.maxLat],
+				],
+				{ padding: 50, duration: 1000 }
+			);
+		}
+	}, [geoChecks]);
+
+	const getMarkerColor = (status: boolean): string => {
+		return status ? theme.palette.success.main : theme.palette.error.main;
+	};
+
+	const formatResponseTime = (timing: number): string => {
+		return `${timing.toFixed(0)}ms`;
+	};
+
+	return (
+		<>
+			{mapPopupStyles}
+			<Box
+				height={500}
+				width={"100%"}
+				borderRadius={theme.shape.borderRadius}
+				overflow={"hidden"}
+			>
+				<Map
+					ref={mapRef}
+					initialViewState={{
+						longitude: 0,
+						latitude: 20,
+						zoom: 1.5,
+					}}
+					style={{ height: "100%", width: "100%" }}
+					mapStyle={
+						isDarkMode
+							? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+							: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+					}
+				>
+					{geoChecks.map((check, index) => (
+						<Marker
+							key={`${check.id}-${index}`}
+							longitude={check.location.longitude}
+							latitude={check.location.latitude}
+							anchor="bottom"
+							onClick={(e: any) => {
+								e.originalEvent.stopPropagation();
+								setSelectedCheck(check);
+							}}
+						>
+							<div
+								style={{
+									width: "10px",
+									height: "10px",
+									borderRadius: "50%",
+									backgroundColor: getMarkerColor(check.status),
+									boxShadow: "0 2px 4px rgba(0,0,0,0.3)",
+									cursor: "pointer",
+								}}
+							/>
+						</Marker>
+					))}
+
+					{selectedCheck && (
+						<Popup
+							longitude={selectedCheck.location.longitude}
+							latitude={selectedCheck.location.latitude}
+							anchor="top"
+							onClose={() => setSelectedCheck(null)}
+							closeOnClick={false}
+						>
+							<Box
+								sx={{
+									minWidth: 200,
+									p: theme.spacing(4),
+									bgcolor: theme.palette.background.paper,
+									borderWidth: 1,
+									borderStyle: "solid",
+									borderColor: theme.palette.divider,
+									borderRadius: 1,
+								}}
+							>
+								<Typography
+									variant="subtitle1"
+									fontWeight="bold"
+									gutterBottom
+								>
+									{selectedCheck.location.city}, {selectedCheck.location.country}
+								</Typography>
+								<Stack spacing={0.5}>
+									<Typography variant="body2">
+										<Typography
+											component="span"
+											fontWeight="medium"
+										>
+											Status:
+										</Typography>{" "}
+										{selectedCheck.status ? "Up" : "Down"}
+									</Typography>
+									<Typography variant="body2">
+										<Typography
+											component="span"
+											fontWeight="medium"
+										>
+											Status Code:
+										</Typography>{" "}
+										{selectedCheck.statusCode}
+									</Typography>
+									<Typography variant="body2">
+										<Typography
+											component="span"
+											fontWeight="medium"
+										>
+											Response Time:
+										</Typography>{" "}
+										{formatResponseTime(selectedCheck.timings.total)}
+									</Typography>
+									<Typography
+										variant="caption"
+										color="text.secondary"
+										sx={{ mt: 0.5 }}
+									>
+										{new Date(selectedCheck.createdAt).toLocaleString()}
+									</Typography>
+								</Stack>
+							</Box>
+						</Popup>
+					)}
+				</Map>
+			</Box>
+		</>
+	);
+};

client/src/Components/monitors/HeaderGeoTabs.tsx

@@ -0,0 +1,54 @@
+import Stack from "@mui/material/Stack";
+import { Tabs, Tab } from "@/Components/design-elements";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import type { GeoContinent } from "@/Types/GeoCheck";
+
+interface HeaderGeoTabsProps {
+	geoCheckEnabled: boolean;
+	locations: GeoContinent[] | undefined;
+	selectedLocation: GeoContinent;
+	onLocationChange: (location: GeoContinent) => void;
+}
+
+export const HeaderGeoTabs = ({
+	geoCheckEnabled,
+	locations,
+	selectedLocation,
+	onLocationChange,
+}: HeaderGeoTabsProps) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+
+	if (!geoCheckEnabled || !locations || locations.length === 0) {
+		return null;
+	}
+
+	const handleChange = (_event: React.SyntheticEvent, newValue: GeoContinent) => {
+		onLocationChange(newValue);
+	};
+
+	return (
+		<Stack
+			spacing={{ xs: theme.spacing(8), md: 0 }}
+			direction={{ xs: "column", md: "row" }}
+			alignItems={"center"}
+			justifyContent={"flex-start"}
+		>
+			<Tabs
+				value={selectedLocation}
+				onChange={handleChange}
+			>
+				{locations.map((location) => (
+					<Tab
+						key={location}
+						label={t(
+							`pages.createMonitor.form.geoChecks.option.locations.options.${location}`
+						)}
+						value={location}
+					/>
+				))}
+			</Tabs>
+		</Stack>
+	);
+};

client/src/Components/monitors/MonitorStatBoxes.tsx

@@ -25,10 +25,7 @@ export const MonitorStatBoxes = ({
 	}
 
 	const timeOfLastFailure = monitorStats?.timeOfLastFailure || 0;
-	const timeSinceLastFailure =
-		timeOfLastFailure > 0
-			? Date.now() - timeOfLastFailure
-			: Date.now() - new Date(monitorStats?.createdAt || 0).getTime();
+	const timeSinceLastFailure = timeOfLastFailure > 0 ? Date.now() - timeOfLastFailure : 0;
 
 	// Determine time since last check
 	const timeOfLastCheck = monitorStats?.lastCheckTimestamp || 0;
@@ -42,6 +39,12 @@ export const MonitorStatBoxes = ({
 	const streakTime = prettyMilliseconds(timeSinceLastFailure, options);
 
 	const lastCheckTime = prettyMilliseconds(timeSinceLastCheck, options);
+	const isActive =
+		monitor?.status === "up" ||
+		monitor?.status === "paused" ||
+		monitor?.status === "maintenance" ||
+		monitor?.status === "initializing" ||
+		monitor?.status === "breached";
 	const palette = getStatusPalette(monitor?.status);
 
 	return (
@@ -51,8 +54,12 @@ export const MonitorStatBoxes = ({
 		>
 			<StatBox
 				palette={palette}
-				title={t("pages.common.monitors.statBoxes.activeFor")}
-				subtitle={streakTime}
+				title={
+					isActive
+						? t("pages.common.monitors.statBoxes.activeFor")
+						: t("pages.common.monitors.statBoxes.serviceIsDown")
+				}
+				subtitle={isActive ? streakTime : ""}
 			/>
 			<StatBox
 				title={t("pages.common.monitors.statBoxes.lastCheck")}

client/src/Components/monitors/charts/HistogramPageSpeedDetailsTooltip.tsx

@@ -2,6 +2,7 @@ import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
+import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
 import type { ConfigItem } from "@/Components/monitors";
 import type { TooltipProps } from "recharts";
@@ -30,8 +31,8 @@ export const HistogramPageSpeedScoresTooltip = ({
 					border: 1,
 					borderColor: theme.palette.divider,
 					borderRadius: theme.shape.borderRadius,
-					py: theme.spacing(2),
-					px: theme.spacing(4),
+					py: theme.spacing(SPACING.LG),
+					px: theme.spacing(LAYOUT.XS),
 				}}
 			>
 				<Typography
@@ -54,12 +55,12 @@ export const HistogramPageSpeedScoresTooltip = ({
 								key={`${key}-tooltip`}
 								direction="row"
 								alignItems="center"
-								gap={theme.spacing(3)}
-								mt={theme.spacing(1)}
+								gap={theme.spacing(SPACING.XXL)}
+								mt={theme.spacing(SPACING.SM)}
 							>
 								<Box
-									width={theme.spacing(4)}
-									height={theme.spacing(4)}
+									width={theme.spacing(LAYOUT.XS)}
+									height={theme.spacing(LAYOUT.XS)}
 									sx={{ borderRadius: "50%", backgroundColor: dotColor }}
 								/>
 								<Typography

client/src/Components/monitors/index.tsx

@@ -1,6 +1,8 @@
 export * from "./ControlsFilter";
 export * from "./MonitorStatBoxes";
 export * from "./HeaderMonitorControls";
+export * from "./HeaderGeoTabs";
+export * from "./GeoChecksMap";
 export * from "./charts/HistogramStatus";
 export * from "./charts/RadialAvgResponse";
 export * from "./charts/HistogramDetails";

client/src/Components/sidebar/Authfooter.tsx

@@ -5,6 +5,7 @@ import IconButton from "@mui/material/IconButton";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@mui/material";
+import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
 import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
@@ -64,9 +65,9 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 	});
 
 	const menuItemSx = {
-		gap: theme.spacing(2),
+		gap: theme.spacing(LAYOUT.MD),
 		borderRadius: theme.shape.borderRadius,
-		pl: theme.spacing(4),
+		pl: theme.spacing(LAYOUT.XS),
 		"& svg": { stroke: theme.palette.text.secondary },
 	};
 
@@ -74,9 +75,9 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 		<Stack
 			direction="row"
 			alignItems="center"
-			py={theme.spacing(4)}
-			px={theme.spacing(8)}
-			gap={theme.spacing(4)}
+			py={theme.spacing(LAYOUT.XS)}
+			px={theme.spacing(LAYOUT.MD)}
+			gap={theme.spacing(LAYOUT.MD)}
 		>
 			<Avatar
 				small
@@ -88,7 +89,7 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 				<Stack
 					direction="row"
 					alignItems="center"
-					gap={theme.spacing(2)}
+					gap={theme.spacing(SPACING.MD)}
 					minWidth={0}
 					flex={1}
 				>
@@ -132,10 +133,15 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 				disableScrollLock
 				anchorOrigin={{ vertical: "top", horizontal: "right" }}
 				slotProps={{
-					paper: { sx: { mt: theme.spacing(-4), ml: collapsed ? theme.spacing(2) : 0 } },
+					paper: {
+						sx: {
+							mt: theme.spacing(-LAYOUT.XS),
+							ml: collapsed ? theme.spacing(SPACING.LG) : 0,
+						},
+					},
 				}}
 				MenuListProps={{ sx: { p: 2, "& li": { m: 0 } } }}
-				sx={{ ml: theme.spacing(4) }}
+				sx={{ ml: theme.spacing(LAYOUT.XS) }}
 			>
 				{collapsed && (
 					<Box

client/src/Components/sidebar/StarPrompt.tsx

@@ -1,6 +1,7 @@
 import { Typography, IconButton, Stack, Box } from "@mui/material";
 import { Icon } from "@/Components/design-elements";
 import { X } from "lucide-react";
+import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
 
 import { useTheme } from "@mui/material";
 import { useSelector, useDispatch } from "react-redux";
@@ -34,25 +35,22 @@ export const StarPrompt = ({
 	return (
 		<Stack
 			direction="column"
-			sx={{
-				width: "100%",
-				padding: `${theme.spacing(6)} ${theme.spacing(6)}`,
-				borderTop: `1px solid ${theme.palette.divider}`,
-				borderBottom: `1px solid ${theme.palette.divider}`,
-				borderRadius: 0,
-				gap: theme.spacing(1.5),
-			}}
+			gap={theme.spacing(LAYOUT.MD)}
+			padding={theme.spacing(LAYOUT.SM)}
+			width={"100%"}
+			borderTop={`1px solid ${theme.palette.divider}`}
+			borderBottom={`1px solid ${theme.palette.divider}`}
 		>
 			<Stack
 				direction="row"
 				justifyContent="space-between"
 				alignItems="center"
 				width="100%"
-				pl={theme.spacing(4)}
+				pl={theme.spacing(LAYOUT.XS)}
 			>
 				<Typography
 					variant="subtitle2"
-					mt={theme.spacing(3)}
+					mt={theme.spacing(SPACING.XXL)}
 				>
 					{t("components.sidebar.starPrompt.title")}
 				</Typography>
@@ -78,7 +76,7 @@ export const StarPrompt = ({
 			<Typography
 				sx={{
 					mb: 1,
-					px: theme.spacing(4),
+					px: theme.spacing(LAYOUT.XS),
 				}}
 			>
 				{t("components.sidebar.starPrompt.description")}
@@ -96,7 +94,7 @@ export const StarPrompt = ({
 					"&:hover": {
 						opacity: 0.8,
 					},
-					pl: theme.spacing(4),
+					pl: theme.spacing(LAYOUT.XS),
 					filter: mode === "dark" ? "invert(1)" : "none",
 				}}
 			/>

client/src/Components/sidebar/index.tsx

@@ -3,6 +3,7 @@ import Backdrop from "@mui/material/Backdrop";
 import Stack from "@mui/material/Stack";
 import List from "@mui/material/List";
 import Divider from "@mui/material/Divider";
+import { LAYOUT } from "@/Utils/Theme/constants";
 import { useSidebar } from "@/Hooks/useSidebar.js";
 import { Logo } from "@/Components/sidebar/Logo";
 import { getMenu, getBottomMenu, getAccountMenu } from "@/Components/sidebar/Menu";
@@ -65,9 +66,9 @@ export const Sidebar = () => {
 				left={0}
 				minHeight={"100vh"}
 				maxHeight={"100vh"}
-				paddingTop={theme.spacing(6)}
-				paddingBottom={theme.spacing(6)}
-				gap={theme.spacing(6)}
+				paddingTop={theme.spacing(LAYOUT.SM)}
+				paddingBottom={theme.spacing(LAYOUT.SM)}
+				gap={theme.spacing(LAYOUT.SM)}
 				borderRight={`1px solid ${theme.palette.divider}`}
 				width={width}
 				sx={{
@@ -81,13 +82,13 @@ export const Sidebar = () => {
 					component="nav"
 					disablePadding
 					sx={{
-						px: theme.spacing(6),
+						px: theme.spacing(LAYOUT.SM),
 						flex: 1,
 					}}
 				>
 					<Logo
-						pt={theme.spacing(8)}
-						pb={theme.spacing(10)}
+						pt={theme.spacing(LAYOUT.MD)}
+						pb={theme.spacing(LAYOUT.MD)}
 					/>
 					{menu.map((item) => {
 						const selected = location.pathname.startsWith(`/${item.path}`);
@@ -105,7 +106,7 @@ export const Sidebar = () => {
 				<List
 					component="nav"
 					disablePadding
-					sx={{ px: theme.spacing(6) }}
+					sx={{ px: theme.spacing(LAYOUT.SM) }}
 				>
 					{bottomMenu.map((item) => {
 						const selected = location.pathname.startsWith(`/${item.path}`);

client/src/Hooks/UseApi.ts

@@ -4,6 +4,7 @@ import type { AxiosRequestConfig } from "axios";
 import { get, patch, post, put, deleteOp } from "@/Utils/ApiClient";
 import { useState } from "react";
 import { useToast } from "@/Hooks/UseToast";
+import { logger } from "@/Utils/logger";
 
 interface ApiResponse<T> {
 	success: boolean;
@@ -17,7 +18,7 @@ const fetcher = async <T>(url: string, config?: AxiosRequestConfig) => {
 };
 
 export const useGet = <T>(
-	url: string | null,
+	url: string | null | undefined,
 	axiosConfig?: AxiosRequestConfig,
 	swrConfig?: SWRConfiguration
 ) => {
@@ -61,7 +62,7 @@ export const usePost = <B = any, R = any>() => {
 			return res.data;
 		} catch (err: any) {
 			const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
-			console.error(err);
+			logger.error("POST request failed", err, { endpoint, body });
 			toastError(errMsg);
 			setError(errMsg);
 			return null;
@@ -96,7 +97,7 @@ export const usePatch = <B = any, R = any>() => {
 			toastSuccess(res.data?.msg || "Operation successful");
 			return res.data;
 		} catch (err: any) {
-			console.error(err);
+			logger.error("PATCH request failed", err, { endpoint, body });
 			const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
 			toastError(errMsg);
 			setError(errMsg);
@@ -132,7 +133,7 @@ export const usePut = <B = any, R = any>() => {
 			toastSuccess(res.data?.msg || "Operation successful");
 			return res.data;
 		} catch (err: any) {
-			console.error(err);
+			logger.error("PUT request failed", err, { endpoint, body });
 			const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
 			toastError(errMsg);
 			setError(errMsg);
@@ -167,7 +168,7 @@ export const useDelete = <R = any>() => {
 			toastSuccess(res.data?.msg || "Operation successful");
 			return res.data;
 		} catch (err: any) {
-			console.error(err);
+			logger.error("DELETE request failed", err, { endpoint });
 			const errMsg = err?.response?.data?.message || err.message || "An error occurred";
 			toastError(errMsg);
 			setError(errMsg);
@@ -201,7 +202,7 @@ export const useLazyGet = <R = any>() => {
 			});
 			return res.data;
 		} catch (err: any) {
-			console.error(err);
+			logger.error("GET request failed", err, { endpoint });
 			const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
 			toastError(errMsg);
 			setError(errMsg);

client/src/Hooks/useMonitorForm.ts

@@ -14,7 +14,7 @@ const getBaseDefaults = (data?: Monitor | null) => ({
 	notifications: data?.notifications || [],
 	statusWindowSize: data?.statusWindowSize || 5,
 	statusWindowThreshold: data?.statusWindowThreshold || 60,
-	geoCheckEnabled: data?.geoCheckEnabled || false,
+	geoCheckEnabled: data?.geoCheckEnabled ?? false,
 	geoCheckLocations: data?.geoCheckLocations || [],
 	geoCheckInterval: data?.geoCheckInterval || 300000,
 });
@@ -73,6 +73,16 @@ export const useMonitorForm = ({
 					gameId: data?.gameId || "",
 				};
 				break;
+			case "grpc":
+				defaults = {
+					...base,
+					type: "grpc",
+					url: data?.url || "",
+					port: data?.port || 50051,
+					grpcServiceName: data?.grpcServiceName || "",
+					ignoreTlsErrors: data?.ignoreTlsErrors || false,
+				};
+				break;
 			case "pagespeed":
 				defaults = {
 					...base,
@@ -93,6 +103,14 @@ export const useMonitorForm = ({
 					selectedDisks: data?.selectedDisks || [],
 				};
 				break;
+			case "websocket":
+				defaults = {
+					...base,
+					type: "websocket",
+					url: data?.url || "",
+					ignoreTlsErrors: data?.ignoreTlsErrors || false,
+				};
+				break;
 			default:
 				defaults = {
 					...base,

client/src/Hooks/useNotificationForm.ts

@@ -1,28 +1,94 @@
 import { useMemo } from "react";
 import { notificationSchema } from "@/Validation/notifications";
+import type { NotificationFormData } from "@/Validation/notifications";
 import type { Notification } from "@/Types/Notification";
 
 interface UseNotificationFormOptions {
 	data?: Notification | null;
 }
 
+function buildDefaults(data: Notification | null): NotificationFormData {
+	if (data?.type === "matrix") {
+		return {
+			type: "matrix",
+			notificationName: data.notificationName || "",
+			homeserverUrl: data.homeserverUrl || "",
+			roomId: data.roomId || "",
+			accessToken: data.accessToken || "",
+		};
+	}
+	if (data?.type === "telegram") {
+		return {
+			type: "telegram",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+			accessToken: data.accessToken || "",
+		};
+	}
+	if (data?.type === "slack") {
+		return {
+			type: "slack",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+		};
+	}
+	if (data?.type === "discord") {
+		return {
+			type: "discord",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+		};
+	}
+	if (data?.type === "webhook") {
+		return {
+			type: "webhook",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+		};
+	}
+	if (data?.type === "pager_duty") {
+		return {
+			type: "pager_duty",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+		};
+	}
+	if (data?.type === "teams") {
+		return {
+			type: "teams",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+		};
+	}
+	if (data?.type === "twilio") {
+		return {
+			type: "twilio",
+			notificationName: data.notificationName || "",
+			accountSid: data.accountSid || "",
+			accessToken: data.accessToken || "",
+			phone: data.phone || "",
+			twilioPhoneNumber: data.twilioPhoneNumber || "",
+		};
+	}
+	if (data?.type === "pushover") {
+		return {
+			type: "pushover",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+			accessToken: data.accessToken || "",
+		};
+	}
+	// Default: email (covers both data === null and data.type === "email")
+	return {
+		type: "email",
+		notificationName: data?.notificationName || "",
+		address: data?.address || "",
+	};
+}
+
 export const useNotificationForm = ({ data = null }: UseNotificationFormOptions = {}) => {
 	return useMemo(() => {
-		const defaults =
-			data?.type === "matrix"
-				? {
-						type: "matrix" as const,
-						notificationName: data.notificationName || "",
-						homeserverUrl: data.homeserverUrl || "",
-						roomId: data.roomId || "",
-						accessToken: data.accessToken || "",
-					}
-				: {
-						type: (data?.type || "email") as Exclude<Notification["type"], "matrix">,
-						notificationName: data?.notificationName || "",
-						address: data?.address || "",
-					};
-
+		const defaults = buildDefaults(data);
 		return { schema: notificationSchema, defaults };
 	}, [data]);
 };

client/src/Hooks/useSettingsForm.ts

@@ -1,14 +1,14 @@
 import { useMemo } from "react";
 import { settingsSchema } from "@/Validation/settings";
 import type { Settings } from "@/Types/Settings";
-import type { SettingsFormData } from "@/Validation/settings";
+import type { SettingsFormInput } from "@/Validation/settings";
 
 interface UseSettingsFormOptions {
 	data?: Settings | null;
 }
 export const useSettingsForm = ({ data = null }: UseSettingsFormOptions = {}) => {
 	return useMemo(() => {
-		const defaults: SettingsFormData = {
+		const defaults: SettingsFormInput = {
 			systemEmailIgnoreTLS: data?.systemEmailIgnoreTLS ?? false,
 			systemEmailRequireTLS: data?.systemEmailRequireTLS ?? false,
 			systemEmailRejectUnauthorized: data?.systemEmailRejectUnauthorized ?? true,
@@ -22,10 +22,22 @@ export const useSettingsForm = ({ data = null }: UseSettingsFormOptions = {}) =>
 			systemEmailTLSServername: data?.systemEmailTLSServername || "",
 			systemEmailPort: data?.systemEmailPort,
 			globalThresholds: {
-				cpu: data?.globalThresholds?.cpu ?? 0,
-				memory: data?.globalThresholds?.memory ?? 0,
-				disk: data?.globalThresholds?.disk ?? 0,
-				temperature: data?.globalThresholds?.temperature ?? 0,
+				cpu:
+					data?.globalThresholds?.cpu && data.globalThresholds.cpu >= 1
+						? data.globalThresholds.cpu
+						: 80,
+				memory:
+					data?.globalThresholds?.memory && data.globalThresholds.memory >= 1
+						? data.globalThresholds.memory
+						: 80,
+				disk:
+					data?.globalThresholds?.disk && data.globalThresholds.disk >= 1
+						? data.globalThresholds.disk
+						: 80,
+				temperature:
+					data?.globalThresholds?.temperature && data.globalThresholds.temperature >= 1
+						? data.globalThresholds.temperature
+						: 80,
 			},
 			checkTTL: data?.checkTTL ?? 30,
 			pagespeedApiKey: "",

client/src/Hooks/useStatusPageForm.ts

@@ -27,12 +27,14 @@ export const useStatusPageForm = ({
 			companyName: data?.companyName || "",
 			url: data?.url || generateDefaultUrl(),
 			timezone: data?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
+			type: data?.type || ["uptime"],
 			color: data?.color || "#4169E1",
 			monitors: data?.monitors || [],
 			isPublished: data?.isPublished ?? false,
 			showCharts: data?.showCharts ?? true,
 			showUptimePercentage: data?.showUptimePercentage ?? true,
 			showAdminLoginLink: data?.showAdminLoginLink ?? false,
+			showInfrastructure: data?.showInfrastructure ?? false,
 			customCSS: data?.customCSS || "",
 			logo: transformLogo(data?.logo),
 		};

client/src/Pages/Account/EditUser/index.tsx

@@ -11,12 +11,17 @@ import { ConfigBox, BasePage } from "@/Components/design-elements";
 import { UserRoles } from "@/Types/User";
 import { useTranslation } from "react-i18next";
 import type { UserRole, User } from "@/Types/User";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { useTheme } from "@mui/material";
 import { useEditUserForm } from "@/Hooks/useEditUserForm";
-import { useGet, usePatch } from "@/Hooks/UseApi";
+import { useGet, usePatch, useDelete } from "@/Hooks/UseApi";
 import type { EditUserFormData } from "@/Validation/editUser";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { DialogInput } from "@/Components/inputs/Dialog";
+import { useSelector } from "react-redux";
+import type { RootState } from "@/Types/state";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { useIsAdmin, useIsSuperAdmin } from "@/Hooks/useIsAdmin";
 
 interface RoleOption {
 	id: UserRole;
@@ -29,6 +34,12 @@ const EditUserPage = () => {
 	const { userId } = useParams<{ userId: string }>();
 	const { resolver, defaults } = useEditUserForm();
 	const { patch, loading: isSaving } = usePatch();
+	const { deleteFn, loading: isDeleting } = useDelete();
+	const navigate = useNavigate();
+	const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+	const currentUser = useSelector((state: RootState) => state.auth.user);
+	const isSuperAdmin = useIsSuperAdmin();
+	const isAdmin = useIsAdmin();
 
 	const { data: user, isLoading } = useGet<User>(`/auth/users/${userId}`);
 
@@ -60,6 +71,20 @@ const EditUserPage = () => {
 		setValue("role", newRoles, { shouldValidate: true });
 	};
 
+	const canDeleteUser =
+		isAdmin &&
+		userId !== currentUser?.id &&
+		!user?.role?.includes("demo") &&
+		(isSuperAdmin || user?.role?.every((r) => r !== "admin" && r !== "superadmin"));
+
+	const handleDeleteUser = async () => {
+		const result = await deleteFn(`/auth/users/${userId}`);
+		setShowDeleteDialog(false);
+		if (result) {
+			navigate("/account", { state: { tab: "team" } });
+		}
+	};
+
 	const onSubmit = async (data: EditUserFormData) => {
 		await patch(`/auth/users/${userId}`, data);
 	};
@@ -165,17 +190,45 @@ const EditUserPage = () => {
 							</Stack>
 						}
 					/>
-					<Button
-						type="submit"
-						variant="contained"
-						color="primary"
-						loading={isSaving}
-						sx={{ alignSelf: "flex-end", minWidth: 100 }}
+					<Stack
+						gap={LAYOUT.XS}
+						direction="row"
+						justifyContent={"flex-end"}
+						width="100%"
 					>
-						{t("common.buttons.save")}
-					</Button>
+						{canDeleteUser && (
+							<Button
+								variant="contained"
+								color="error"
+								onClick={() => setShowDeleteDialog(true)}
+								sx={{ minWidth: 100 }}
+							>
+								{t("common.buttons.removeUser")}
+							</Button>
+						)}
+						<Button
+							type="submit"
+							variant="contained"
+							color="primary"
+							loading={isSaving}
+							sx={{ minWidth: 100 }}
+						>
+							{t("common.buttons.save")}
+						</Button>
+					</Stack>
 				</Stack>
 			</form>
+			<DialogInput
+				open={showDeleteDialog}
+				title={t("pages.editUser.dialog.removeUser.title")}
+				content={t("pages.editUser.dialog.removeUser.content", {
+					name: `${user?.firstName} ${user?.lastName}`,
+				})}
+				onCancel={() => setShowDeleteDialog(false)}
+				onConfirm={handleDeleteUser}
+				confirmText={t("common.buttons.removeUser")}
+				loading={isDeleting}
+			/>
 		</BasePage>
 	);
 };

client/src/Pages/Account/components/AddTeamMemberDialog.tsx

@@ -43,6 +43,7 @@ export const AddTeamMemberDialog = ({
 	const roleOptions: { value: UserRole; label: string }[] = [
 		{ value: "admin", label: t("common.auth.roles.admin") },
 		{ value: "user", label: t("common.auth.roles.user") },
+		{ value: "demo", label: t("common.auth.roles.demo") },
 	];
 
 	const handleClose = () => {

client/src/Pages/Account/components/InviteTeamMemberDialog.tsx

@@ -48,6 +48,7 @@ export const InviteTeamMemberDialog = ({
 	const roleOptions: { value: UserRole; label: string }[] = [
 		{ value: "admin", label: t("common.auth.roles.admin") },
 		{ value: "user", label: t("common.auth.roles.user") },
+		{ value: "demo", label: t("common.auth.roles.demo") },
 	];
 
 	const handleGenerateToken = async (data: InviteFormData) => {

client/src/Pages/Account/components/TeamTable.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Table } from "@/Components/design-elements";
 import type { Header } from "@/Components/design-elements/Table";
-import { useIsSuperAdmin } from "@/Hooks/useIsAdmin";
+import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import type { User } from "@/Types/User";
 
 interface TeamTableProps {
@@ -13,7 +13,7 @@ interface TeamTableProps {
 export const TeamTable = ({ users }: TeamTableProps) => {
 	const { t } = useTranslation();
 	const navigate = useNavigate();
-	const isSuperAdmin = useIsSuperAdmin();
+	const isAdmin = useIsAdmin();
 
 	const headers: Header<User>[] = [
 		{
@@ -45,7 +45,7 @@ export const TeamTable = ({ users }: TeamTableProps) => {
 	];
 
 	const handleRowClick = (row: User) => {
-		if (isSuperAdmin) {
+		if (isAdmin) {
 			navigate(`/account/team/${row.id}`);
 		}
 	};
@@ -54,7 +54,7 @@ export const TeamTable = ({ users }: TeamTableProps) => {
 		<Table
 			headers={headers}
 			data={users}
-			onRowClick={isSuperAdmin ? handleRowClick : undefined}
+			onRowClick={isAdmin ? handleRowClick : undefined}
 		/>
 	);
 };

client/src/Pages/Auth/Login/index.tsx

@@ -1,6 +1,7 @@
 import { BaseAuthPage, TextLink } from "@/Components/design-elements";
 import { Button, TextField } from "@/Components/inputs";
 
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
@@ -9,7 +10,7 @@ import type { LoginFormData } from "@/Validation/login";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { setAuthState } from "@/Features/Auth/authSlice";
-import { usePost } from "@/Hooks/UseApi";
+import { useLazyGet, usePost } from "@/Hooks/UseApi";
 
 const LoginPage = () => {
 	const { t } = useTranslation();
@@ -17,6 +18,17 @@ const LoginPage = () => {
 	const navigate = useNavigate();
 	const { post, loading } = usePost();
 
+	const [isCheckingAdmin, setIsCheckingAdmin] = useState(true);
+	const { get } = useLazyGet<boolean>();
+
+	useEffect(() => {
+		get("/auth/users/superadmin").then((res) => {
+			if (res?.data === false) navigate("/register", { replace: true });
+			else setIsCheckingAdmin(false);
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	const { schema, defaults } = useLoginForm();
 
 	const { control, handleSubmit } = useForm<LoginFormData>({
@@ -24,6 +36,8 @@ const LoginPage = () => {
 		defaultValues: defaults,
 	});
 
+	if (isCheckingAdmin) return null;
+
 	const onSubmit = async (data: LoginFormData) => {
 		if (loading) return;
 
@@ -82,12 +96,6 @@ const LoginPage = () => {
 				linkText={t("pages.auth.login.links.forgotPassword.linkText")}
 				href="/forgot-password"
 			/>
-			<TextLink
-				alignSelf={"center"}
-				text={t("pages.auth.login.links.register.text")}
-				linkText={t("pages.auth.login.links.register.linkText")}
-				href="/register"
-			/>
 		</BaseAuthPage>
 	);
 };

client/src/Pages/Auth/Register/index.tsx

@@ -1,16 +1,17 @@
 import { BaseAuthPage } from "@/Components/design-elements";
 import { Button, TextField } from "@/Components/inputs";
+import Alert from "@mui/material/Alert";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useRegisterForm } from "@/Hooks/useRegisterForm";
 import type { RegisterFormData } from "@/Validation/register";
 import { useTranslation } from "react-i18next";
-import { usePost, useGet } from "@/Hooks/UseApi";
+import { useLazyGet, usePost } from "@/Hooks/UseApi";
 import { setAuthState } from "@/Features/Auth/authSlice";
 import { useDispatch } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import type { AuthResponse } from "@/Types/User";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 interface RegisterPayload {
 	user: Omit<RegisterFormData, "confirm">;
@@ -32,21 +33,23 @@ const RegisterPage = () => {
 	const { post: verifyToken } = usePost<{ token: string }, InviteVerifyResponse>();
 	const hasVerified = useRef(false);
 
-	const { data: superAdminExists, isLoading: isCheckingAdmin } = useGet<boolean>(
-		token ? null : "/auth/users/superadmin"
-	);
+	const [isCheckingAdmin, setIsCheckingAdmin] = useState(!token);
+	const { get } = useLazyGet<boolean>();
+
+	useEffect(() => {
+		if (token) return;
+		get("/auth/users/superadmin").then((res) => {
+			if (res?.data === true) navigate("/login", { replace: true });
+			else setIsCheckingAdmin(false);
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
 
 	const { control, handleSubmit, setError, reset } = useForm<RegisterFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
 
-	useEffect(() => {
-		if (superAdminExists === true) {
-			navigate("/login", { replace: true });
-		}
-	}, [superAdminExists, navigate]);
-
 	useEffect(() => {
 		if (!token || hasVerified.current) return;
 		hasVerified.current = true;
@@ -92,6 +95,7 @@ const RegisterPage = () => {
 			title={t("pages.auth.register.title")}
 			subtitle={t("pages.auth.register.subtitle")}
 		>
+			{!token && <Alert severity="info">{t("pages.auth.register.setupNotice")}</Alert>}
 			<Controller
 				name="firstName"
 				control={control}

client/src/Pages/Checks/Components/ChecksTable.tsx

@@ -5,7 +5,6 @@ import type { Monitor } from "@/Types/Monitor";
 
 import { useTranslation } from "react-i18next";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
-import { useNavigate } from "react-router";
 import type { Check } from "@/Types/Check";
 import type { RootState } from "@/Types/state";
 import { useSelector } from "react-redux";
@@ -29,7 +28,6 @@ export const ChecksTable = ({
 }) => {
 	const { t } = useTranslation();
 	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-	const navigate = useNavigate();
 
 	const getHeaders = (t: Function, uiTimezone: string) => {
 		const headers: Header<Check>[] = [
@@ -109,9 +107,6 @@ export const ChecksTable = ({
 			<Table
 				headers={headers}
 				data={checks}
-				onRowClick={(row) => {
-					navigate(`/checks/${row.id}`);
-				}}
 				emptyViewText={t("pages.checks.table.empty")}
 			/>
 			<Pagination

client/src/Pages/CreateMonitor/index.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import { useEffect } from "react";
+import { logger } from "@/Utils/logger";
 import { useParams, useLocation, useNavigate } from "react-router";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -15,6 +16,7 @@ import Divider from "@mui/material/Divider";
 import IconButton from "@mui/material/IconButton";
 import { Trash2 } from "lucide-react";
 import { HeaderDeleteControls } from "@/Components/monitors";
+import { GeoContinents } from "@/Types/GeoCheck";
 
 import { BasePage, ConfigBox } from "@/Components/design-elements";
 import {
@@ -27,10 +29,15 @@ import {
 	SliderWithLabel,
 	Dialog,
 } from "@/Components/inputs";
+import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
 import { useGet, usePost, usePatch, useDelete } from "@/Hooks/UseApi";
 import { useMonitorForm } from "@/Hooks/useMonitorForm";
-import type { Monitor, MonitorType, GamesMap } from "@/Types/Monitor";
-import { GeoCheckLocations } from "@/Types/Monitor";
+import {
+	type Monitor,
+	type MonitorType,
+	type GamesMap,
+	supportsGeoCheck,
+} from "@/Types/Monitor";
 import type { Notification } from "@/Types/Notification";
 import type { MonitorFormData } from "@/Validation/monitor";
 
@@ -42,6 +49,8 @@ interface GeneralSettingsConfig {
 	showPort: boolean;
 	showGameSelect: boolean;
 	showSecret: boolean;
+	showGrpcServiceName: boolean;
+	showIgnoreTls: boolean;
 }
 
 const getGeneralSettingsConfig = (
@@ -57,6 +66,8 @@ const getGeneralSettingsConfig = (
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
+			showGrpcServiceName: false,
+			showIgnoreTls: false,
 		},
 		ping: {
 			urlLabel: t("pages.createMonitor.form.general.option.host.label"),
@@ -66,6 +77,8 @@ const getGeneralSettingsConfig = (
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
+			showGrpcServiceName: false,
+			showIgnoreTls: false,
 		},
 		docker: {
 			urlLabel: t("pages.createMonitor.form.general.option.container.label"),
@@ -75,6 +88,8 @@ const getGeneralSettingsConfig = (
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
+			showGrpcServiceName: false,
+			showIgnoreTls: false,
 		},
 		port: {
 			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
@@ -84,6 +99,8 @@ const getGeneralSettingsConfig = (
 			showPort: true,
 			showGameSelect: false,
 			showSecret: false,
+			showGrpcServiceName: false,
+			showIgnoreTls: false,
 		},
 		game: {
 			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
@@ -93,6 +110,19 @@ const getGeneralSettingsConfig = (
 			showPort: true,
 			showGameSelect: true,
 			showSecret: false,
+			showGrpcServiceName: false,
+			showIgnoreTls: false,
+		},
+		grpc: {
+			urlLabel: t("pages.createMonitor.form.general.option.host.label"),
+			urlPlaceholder: t("pages.createMonitor.form.general.option.host.placeholder"),
+			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
+			showUrl: true,
+			showPort: true,
+			showGameSelect: false,
+			showSecret: false,
+			showGrpcServiceName: true,
+			showIgnoreTls: true,
 		},
 		pagespeed: {
 			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
@@ -102,6 +132,8 @@ const getGeneralSettingsConfig = (
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
+			showGrpcServiceName: false,
+			showIgnoreTls: false,
 		},
 		hardware: {
 			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
@@ -111,6 +143,19 @@ const getGeneralSettingsConfig = (
 			showPort: false,
 			showGameSelect: false,
 			showSecret: true,
+			showGrpcServiceName: false,
+			showIgnoreTls: false,
+		},
+		websocket: {
+			urlLabel: t("pages.createMonitor.form.general.option.wsUrl.label"),
+			urlPlaceholder: t("pages.createMonitor.form.general.option.wsUrl.placeholder"),
+			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
+			showUrl: true,
+			showPort: false,
+			showGameSelect: false,
+			showSecret: false,
+			showGrpcServiceName: false,
+			showIgnoreTls: true,
 		},
 	};
 	return configs[type] || configs.http;
@@ -226,7 +271,7 @@ const CreateMonitorPage = () => {
 	};
 
 	const onError = (errors: unknown) => {
-		console.log(errors);
+		logger.debug("Monitor creation validation errors", errors);
 	};
 
 	return (
@@ -253,43 +298,57 @@ const CreateMonitorPage = () => {
 								<FormControl error={!!fieldState.error}>
 									<RadioGroup
 										{...field}
-										sx={{ gap: theme.spacing(6) }}
+										sx={{ gap: theme.spacing(LAYOUT.MD) }}
 									>
 										<RadioWithDescription
 											value="http"
-											label={t("pages.createMonitor.form.type.optionHttp")}
+											label={t("pages.common.monitors.monitorTypes.optionHttp")}
 											description={t(
 												"pages.createMonitor.form.type.optionHttpDescription"
 											)}
 										/>
 										<RadioWithDescription
 											value="ping"
-											label={t("pages.createMonitor.form.type.optionPing")}
+											label={t("pages.common.monitors.monitorTypes.optionPing")}
 											description={t(
 												"pages.createMonitor.form.type.optionPingDescription"
 											)}
 										/>
 										<RadioWithDescription
 											value="docker"
-											label={t("pages.createMonitor.form.type.optionDocker")}
+											label={t("pages.common.monitors.monitorTypes.optionDocker")}
 											description={t(
 												"pages.createMonitor.form.type.optionDockerDescription"
 											)}
 										/>
 										<RadioWithDescription
 											value="port"
-											label={t("pages.createMonitor.form.type.optionPort")}
+											label={t("pages.common.monitors.monitorTypes.optionPort")}
 											description={t(
 												"pages.createMonitor.form.type.optionPortDescription"
 											)}
 										/>
 										<RadioWithDescription
 											value="game"
-											label={t("pages.createMonitor.form.type.optionGame")}
+											label={t("pages.common.monitors.monitorTypes.optionGame")}
 											description={t(
 												"pages.createMonitor.form.type.optionGameDescription"
 											)}
 										/>
+										<RadioWithDescription
+											value="grpc"
+											label={t("pages.common.monitors.monitorTypes.optionGrpc")}
+											description={t(
+												"pages.createMonitor.form.type.optionGrpcDescription"
+											)}
+										/>
+										<RadioWithDescription
+											value="websocket"
+											label={t("pages.common.monitors.monitorTypes.optionWebSocket")}
+											description={t(
+												"pages.createMonitor.form.type.optionWebSocketDescription"
+											)}
+										/>
 									</RadioGroup>
 								</FormControl>
 							)}
@@ -302,7 +361,7 @@ const CreateMonitorPage = () => {
 				title={t("pages.createMonitor.form.general.title")}
 				subtitle={t(`pages.createMonitor.form.general.description.${watchedType}`)}
 				rightContent={
-					<Stack spacing={theme.spacing(8)}>
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
 						{/* URL/Host/Container field - not shown for hardware */}
 						{generalSettingsConfig.showUrl && (
 							<Controller
@@ -378,6 +437,30 @@ const CreateMonitorPage = () => {
 							/>
 						)}
 
+						{/* gRPC Service Name field - only for grpc type */}
+						{generalSettingsConfig.showGrpcServiceName && (
+							<Controller
+								name="grpcServiceName"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										value={field.value ?? ""}
+										type="text"
+										fieldLabel={t(
+											"pages.createMonitor.form.general.option.grpcServiceName.label"
+										)}
+										placeholder={t(
+											"pages.createMonitor.form.general.option.grpcServiceName.placeholder"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						)}
+
 						{/* Secret field - only for hardware type */}
 						{generalSettingsConfig.showSecret && (
 							<Controller
@@ -497,7 +580,7 @@ const CreateMonitorPage = () => {
 					title={t("pages.createMonitor.form.thresholds.title")}
 					subtitle={t("pages.createMonitor.form.thresholds.description")}
 					rightContent={
-						<Stack spacing={theme.spacing(8)}>
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
 							<Controller
 								name="cpuAlertThreshold"
 								control={control}
@@ -579,7 +662,7 @@ const CreateMonitorPage = () => {
 				title={t("pages.createMonitor.form.incidents.title")}
 				subtitle={t("pages.createMonitor.form.incidents.description")}
 				rightContent={
-					<Stack spacing={theme.spacing(12)}>
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
 						<Controller
 							name="statusWindowSize"
 							control={control}
@@ -631,7 +714,7 @@ const CreateMonitorPage = () => {
 								(field.value ?? []).includes(n.id)
 							);
 							return (
-								<Stack spacing={theme.spacing(4)}>
+								<Stack spacing={theme.spacing(LAYOUT.MD)}>
 									<Autocomplete
 										multiple
 										options={notificationOptions}
@@ -682,7 +765,9 @@ const CreateMonitorPage = () => {
 				}
 			/>
 
-			{watchedType === "http" && (
+			{(watchedType === "http" ||
+				watchedType === "grpc" ||
+				watchedType === "websocket") && (
 				<ConfigBox
 					title={t("pages.createMonitor.form.ignoreTls.title")}
 					subtitle={t("pages.createMonitor.form.ignoreTls.description")}
@@ -694,7 +779,7 @@ const CreateMonitorPage = () => {
 								<Stack
 									direction="row"
 									alignItems="center"
-									spacing={theme.spacing(2)}
+									spacing={theme.spacing(SPACING.LG)}
 								>
 									<Switch
 										checked={field.value ?? false}
@@ -715,7 +800,7 @@ const CreateMonitorPage = () => {
 					title={t("pages.createMonitor.form.advanced.title")}
 					subtitle={t("pages.createMonitor.form.advanced.description")}
 					rightContent={
-						<Stack spacing={theme.spacing(8)}>
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
 							<Controller
 								name="useAdvancedMatching"
 								control={control}
@@ -723,7 +808,7 @@ const CreateMonitorPage = () => {
 									<Stack
 										direction="row"
 										alignItems="center"
-										spacing={theme.spacing(2)}
+										spacing={theme.spacing(SPACING.LG)}
 									>
 										<Switch
 											checked={field.value ?? false}
@@ -738,7 +823,7 @@ const CreateMonitorPage = () => {
 								)}
 							/>
 							{watchedUseAdvancedMatching && (
-								<Stack spacing={theme.spacing(8)}>
+								<Stack spacing={theme.spacing(LAYOUT.MD)}>
 									<Controller
 										name="matchMethod"
 										control={control}
@@ -825,13 +910,12 @@ const CreateMonitorPage = () => {
 				/>
 			)}
 
-			{/* Geo-distributed Checks Configuration */}
-			{watchedType === "http" && (
+			{supportsGeoCheck(watchedType) && (
 				<ConfigBox
 					title={t("pages.createMonitor.form.geoChecks.title")}
 					subtitle={t("pages.createMonitor.form.geoChecks.description")}
 					rightContent={
-						<Stack spacing={theme.spacing(8)}>
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
 							<Controller
 								name="geoCheckEnabled"
 								control={control}
@@ -839,7 +923,7 @@ const CreateMonitorPage = () => {
 									<Stack
 										direction="row"
 										alignItems="center"
-										spacing={theme.spacing(2)}
+										spacing={theme.spacing(SPACING.LG)}
 									>
 										<Switch
 											checked={field.value ?? false}
@@ -852,34 +936,70 @@ const CreateMonitorPage = () => {
 								)}
 							/>
 							{watchGeoCheckEnabled && (
-								<Stack spacing={theme.spacing(8)}>
+								<Stack spacing={theme.spacing(LAYOUT.MD)}>
 									<Controller
 										name="geoCheckLocations"
 										control={control}
 										render={({ field }) => {
-											const locationOptions = GeoCheckLocations.map((loc) => ({
-												id: loc,
+											// Map continents to have 'name' property for Autocomplete
+											const locationOptions = GeoContinents.map((continent) => ({
+												id: continent,
 												name: t(
-													`pages.createMonitor.form.geoChecks.option.locations.options.${loc}`
+													`pages.createMonitor.form.geoChecks.option.locations.options.${continent}`
 												),
 											}));
 											const selectedLocations = locationOptions.filter((loc) =>
 												(field.value ?? []).includes(loc.id)
 											);
 											return (
-												<Autocomplete
-													multiple={true}
-													options={locationOptions}
-													value={selectedLocations}
-													getOptionLabel={(option) => option.name}
-													onChange={(_, newValue: typeof locationOptions) => {
-														field.onChange(newValue.map((loc) => loc.id));
-													}}
-													isOptionEqualToValue={(option, value) => option.id === value.id}
-													fieldLabel={t(
-														"pages.createMonitor.form.geoChecks.option.locations.label"
+												<Stack spacing={theme.spacing(LAYOUT.MD)}>
+													<Autocomplete
+														multiple
+														options={locationOptions}
+														value={selectedLocations}
+														getOptionLabel={(option) => option.name}
+														onChange={(_: unknown, newValue: typeof locationOptions) => {
+															field.onChange(newValue.map((loc) => loc.id));
+														}}
+														isOptionEqualToValue={(option, value) =>
+															option.id === value.id
+														}
+														fieldLabel={t(
+															"pages.createMonitor.form.geoChecks.option.locations.label"
+														)}
+													/>
+													{selectedLocations.length > 0 && (
+														<Stack
+															flex={1}
+															width="100%"
+														>
+															{selectedLocations.map((location, index) => (
+																<Stack
+																	direction="row"
+																	alignItems="center"
+																	key={location.id}
+																	width="100%"
+																>
+																	<Typography flexGrow={1}>{location.name}</Typography>
+																	<IconButton
+																		size="small"
+																		onClick={() => {
+																			field.onChange(
+																				(field.value ?? []).filter(
+																					(id: string) => id !== location.id
+																				)
+																			);
+																		}}
+																		aria-label="Remove location"
+																	>
+																		<Trash2 size={16} />
+																	</IconButton>
+																	{index < selectedLocations.length - 1 && <Divider />}
+																</Stack>
+															))}
+														</Stack>
 													)}
-												/>
+												</Stack>
 											);
 										}}
 									/>
@@ -888,16 +1008,32 @@ const CreateMonitorPage = () => {
 										control={control}
 										render={({ field }) => (
 											<Select
+												{...field}
 												value={field.value ?? 300000}
-												onChange={(e) => field.onChange(Number(e.target.value))}
 												fieldLabel={t(
 													"pages.createMonitor.form.geoChecks.option.interval.label"
 												)}
 											>
-												<MenuItem value={300000}>5 min</MenuItem>
-												<MenuItem value={600000}>10 min</MenuItem>
-												<MenuItem value={900000}>15 min</MenuItem>
-												<MenuItem value={1800000}>30 min</MenuItem>
+												<MenuItem value={300000}>
+													{t(
+														"pages.createMonitor.form.geoChecks.option.interval.value.fiveMinutes"
+													)}
+												</MenuItem>
+												<MenuItem value={600000}>
+													{t(
+														"pages.createMonitor.form.geoChecks.option.interval.value.tenMinutes"
+													)}
+												</MenuItem>
+												<MenuItem value={900000}>
+													{t(
+														"pages.createMonitor.form.geoChecks.option.interval.value.fifteenMinutes"
+													)}
+												</MenuItem>
+												<MenuItem value={1800000}>
+													{t(
+														"pages.createMonitor.form.geoChecks.option.interval.value.thirtyMinutes"
+													)}
+												</MenuItem>
 											</Select>
 										)}
 									/>

client/src/Pages/Incidents/Components/CardDetails.tsx

@@ -3,6 +3,7 @@ import Grid from "@mui/material/Grid";
 import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
 import { BaseBox, ValueLabel } from "@/Components/design-elements";
+import { LAYOUT } from "@/Utils/Theme/constants";
 
 import { useTranslation } from "react-i18next";
 import type { Incident } from "@/Types/Incident";
@@ -29,14 +30,14 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 	}
 	return (
 		<Stack
-			gap={theme.spacing(4)}
+			gap={theme.spacing(LAYOUT.MD)}
 			sx={sx}
 		>
 			<Typography textTransform={"uppercase"}>
 				{t("pages.incidents.dialog.details.title")}
 			</Typography>
-			<BaseBox padding={8}>
-				<Stack gap={theme.spacing(4)}>
+			<BaseBox padding={LAYOUT.MD}>
+				<Stack gap={theme.spacing(LAYOUT.MD)}>
 					<Typography textTransform={"uppercase"}>
 						{t("pages.incidents.dialog.details.overview")}
 					</Typography>
@@ -44,7 +45,7 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 
 					<Grid
 						container
-						spacing={theme.spacing(4)}
+						spacing={theme.spacing(LAYOUT.MD)}
 						alignItems="center"
 					>
 						<Grid size={2}>{t("pages.incidents.dialog.details.status")}</Grid>
@@ -75,15 +76,15 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 					</Grid>
 				</Stack>
 			</BaseBox>
-			<BaseBox padding={8}>
-				<Stack gap={theme.spacing(4)}>
+			<BaseBox padding={LAYOUT.MD}>
+				<Stack gap={theme.spacing(LAYOUT.MD)}>
 					<Typography textTransform={"uppercase"}>
 						{t("pages.incidents.dialog.details.analysis")}
 					</Typography>
 					<Divider />
 					<Grid
 						container
-						spacing={theme.spacing(2)}
+						spacing={theme.spacing(LAYOUT.MD)}
 					>
 						<Grid size={6}>
 							<Typography>{t("pages.incidents.dialog.details.timeline")}</Typography>
@@ -127,15 +128,15 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 				</Stack>
 			</BaseBox>
 			{!incident.status && (
-				<BaseBox padding={8}>
-					<Stack gap={theme.spacing(4)}>
+				<BaseBox padding={LAYOUT.MD}>
+					<Stack gap={theme.spacing(LAYOUT.XS)}>
 						<Typography textTransform={"uppercase"}>
 							{t("pages.incidents.dialog.details.resolutionDetails")}
 						</Typography>
 						<Divider />
 						<Grid
 							container
-							spacing={theme.spacing(2)}
+							spacing={theme.spacing(LAYOUT.MD)}
 							alignItems="center"
 						>
 							<Grid size={2}>

client/src/Pages/Logs/index.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
 
 const LogsPage = () => {
 	const { t } = useTranslation();
-	const [activeTab, setActiveTab] = useState<number>(2);
+	const [activeTab, setActiveTab] = useState<number>(1);
 	return (
 		<BasePage>
 			<Tabs

client/src/Pages/Maintenance/create/index.tsx

@@ -1,7 +1,9 @@
 import Stack from "@mui/material/Stack";
 import MenuItem from "@mui/material/MenuItem";
+import { logger } from "@/Utils/logger";
 import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
+import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
 import { BasePage, ConfigBox } from "@/Components/design-elements";
 import {
 	TextField,
@@ -108,7 +110,7 @@ const CreateMaintenanceWindowPage = () => {
 	const isLoading = isPosting || isPatching;
 
 	const onError = (errors: any) => {
-		console.error("Form submission errors:", errors);
+		logger.error("Maintenance form submission failed", undefined, { errors });
 	};
 
 	return (
@@ -120,7 +122,7 @@ const CreateMaintenanceWindowPage = () => {
 				title={t("pages.maintenanceWindow.form.general.title")}
 				subtitle={t("pages.maintenanceWindow.form.general.description")}
 				rightContent={
-					<Stack spacing={theme.spacing(8)}>
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
 						<Controller
 							name="name"
 							control={control}
@@ -170,7 +172,7 @@ const CreateMaintenanceWindowPage = () => {
 				title={t("pages.maintenanceWindow.form.startDate.title")}
 				subtitle={t("pages.maintenanceWindow.form.startDate.description")}
 				rightContent={
-					<Stack spacing={theme.spacing(8)}>
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
 						<Controller
 							name="startDate"
 							control={control}
@@ -197,7 +199,7 @@ const CreateMaintenanceWindowPage = () => {
 				title={t("pages.maintenanceWindow.form.startTime.title")}
 				subtitle={t("pages.maintenanceWindow.form.startTime.description")}
 				rightContent={
-					<Stack spacing={theme.spacing(8)}>
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
 						<Controller
 							name="startTime"
 							control={control}
@@ -218,7 +220,7 @@ const CreateMaintenanceWindowPage = () => {
 						<Stack
 							direction="row"
 							alignItems="flex-start"
-							spacing={theme.spacing(4)}
+							spacing={theme.spacing(LAYOUT.MD)}
 						>
 							<Controller
 								name="duration"
@@ -283,7 +285,7 @@ const CreateMaintenanceWindowPage = () => {
 								.filter((m): m is Monitor => m !== undefined);
 
 							return (
-								<Stack spacing={theme.spacing(4)}>
+								<Stack spacing={theme.spacing(LAYOUT.MD)}>
 									<Autocomplete
 										multiple
 										options={monitorsList}
@@ -317,9 +319,8 @@ const CreateMaintenanceWindowPage = () => {
 													key={monitor.id}
 													direction="row"
 													alignItems="center"
-													spacing={theme.spacing(4)}
-													padding={theme.spacing(4)}
-													marginTop={theme.spacing(2)}
+													padding={theme.spacing(LAYOUT.XS)}
+													marginTop={theme.spacing(SPACING.LG)}
 													borderRadius={1}
 													sx={{
 														border: `1px solid ${theme.palette.divider}`,
@@ -350,7 +351,7 @@ const CreateMaintenanceWindowPage = () => {
 			<Stack
 				direction="row"
 				justifyContent="flex-end"
-				spacing={theme.spacing(2)}
+				spacing={theme.spacing(SPACING.LG)}
 			>
 				<Button
 					loading={isLoading}

client/src/Pages/Notifications/create/index.tsx

@@ -147,27 +147,201 @@ const NotificationsCreatePage = () => {
 					/>
 				}
 			/>
-			{watchedType !== "matrix" && (
+			{watchedType !== "matrix" &&
+				watchedType !== "telegram" &&
+				watchedType !== "pushover" &&
+				watchedType !== "twilio" && (
+					<ConfigBox
+						title={addressConfig.title}
+						subtitle={addressConfig.description}
+						rightContent={
+							<Controller
+								name="address"
+								control={control}
+								defaultValue={"address" in defaults ? defaults.address : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={addressConfig.fieldLabel}
+										placeholder={addressConfig.placeholder}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						}
+					/>
+				)}
+			{watchedType === "telegram" && (
 				<ConfigBox
-					title={addressConfig.title}
-					subtitle={addressConfig.description}
+					title={t("pages.notifications.form.telegram.title")}
+					subtitle={t("pages.notifications.form.telegram.description")}
 					rightContent={
-						<Controller
-							name="address"
-							control={control}
-							defaultValue={defaults.address}
-							render={({ field, fieldState }) => (
-								<TextField
-									{...field}
-									type="text"
-									fieldLabel={addressConfig.fieldLabel}
-									placeholder={addressConfig.placeholder}
-									fullWidth
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message ?? ""}
-								/>
-							)}
-						/>
+						<Stack spacing={theme.spacing(8)}>
+							<Controller
+								name="accessToken"
+								control={control}
+								defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.telegram.optionBotToken")}
+										placeholder={t(
+											"pages.notifications.form.telegram.placeholderBotToken"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="address"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.telegram.optionChatId")}
+										placeholder={t("pages.notifications.form.telegram.placeholderChatId")}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						</Stack>
+					}
+				/>
+			)}
+			{watchedType === "pushover" && (
+				<ConfigBox
+					title={t("pages.notifications.form.pushover.title")}
+					subtitle={t("pages.notifications.form.pushover.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(8)}>
+							<Controller
+								name="accessToken"
+								control={control}
+								defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.pushover.optionAppToken")}
+										placeholder={t(
+											"pages.notifications.form.pushover.placeholderAppToken"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="address"
+								control={control}
+								defaultValue={"address" in defaults ? defaults.address : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.pushover.optionUserKey")}
+										placeholder={t(
+											"pages.notifications.form.pushover.placeholderUserKey"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						</Stack>
+					}
+				/>
+			)}
+			{watchedType === "twilio" && (
+				<ConfigBox
+					title={t("pages.notifications.form.twilio.title")}
+					subtitle={t("pages.notifications.form.twilio.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(8)}>
+							<Controller
+								name="accountSid"
+								control={control}
+								defaultValue={"accountSid" in defaults ? defaults.accountSid : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.twilio.optionAccountSid")}
+										placeholder={t(
+											"pages.notifications.form.twilio.placeholderAccountSid"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="accessToken"
+								control={control}
+								defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.twilio.optionAuthToken")}
+										placeholder={t(
+											"pages.notifications.form.twilio.placeholderAuthToken"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="twilioPhoneNumber"
+								control={control}
+								defaultValue={
+									"twilioPhoneNumber" in defaults ? defaults.twilioPhoneNumber : ""
+								}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.twilio.optionFromNumber")}
+										placeholder={t(
+											"pages.notifications.form.twilio.placeholderFromNumber"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="phone"
+								control={control}
+								defaultValue={"phone" in defaults ? defaults.phone : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.twilio.optionToNumber")}
+										placeholder={t("pages.notifications.form.twilio.placeholderToNumber")}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						</Stack>
 					}
 				/>
 			)}
@@ -180,7 +354,7 @@ const NotificationsCreatePage = () => {
 							<Controller
 								name="homeserverUrl"
 								control={control}
-								defaultValue={defaults.homeserverUrl}
+								defaultValue={"homeserverUrl" in defaults ? defaults.homeserverUrl : ""}
 								render={({ field, fieldState }) => (
 									<TextField
 										{...field}
@@ -196,7 +370,7 @@ const NotificationsCreatePage = () => {
 							<Controller
 								name="roomId"
 								control={control}
-								defaultValue={defaults.roomId}
+								defaultValue={"roomId" in defaults ? defaults.roomId : ""}
 								render={({ field, fieldState }) => (
 									<TextField
 										{...field}
@@ -212,7 +386,7 @@ const NotificationsCreatePage = () => {
 							<Controller
 								name="accessToken"
 								control={control}
-								defaultValue={defaults.accessToken}
+								defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
 								render={({ field, fieldState }) => (
 									<TextField
 										{...field}

client/src/Pages/PageSpeed/Monitors/index.tsx

@@ -8,7 +8,7 @@ import { PageSpeedMonitorsTable } from "@/Pages/PageSpeed/Monitors/Components/Pa
 import type { Monitor } from "@/Types/Monitor";
 
 import { useTranslation } from "react-i18next";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import { useGet, useDelete } from "@/Hooks/UseApi";
 import type { MonitorsWithChecksResponse } from "@/Types/Monitor";
@@ -20,14 +20,6 @@ const PageSpeedMonitorsPage = () => {
 	const isAdmin = useIsAdmin();
 	const { deleteFn, loading: isDeleting } = useDelete();
 
-	const monitorsUrl = "/monitors/team/with-checks?type=pagespeed&limit=10";
-	const {
-		data: monitorsData,
-		isLoading: monitorsIsLoading,
-		error: monitorsError,
-		refetch,
-	} = useGet<MonitorsWithChecksResponse>(monitorsUrl, {}, { refreshInterval: 30000 });
-
 	const settingsUrl = "/settings";
 	const {
 		data: settingsData,
@@ -42,6 +34,28 @@ const PageSpeedMonitorsPage = () => {
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(10);
 
+	const monitorsWithChecksUrl = useMemo(() => {
+		const params = new URLSearchParams();
+		params.append("type", "pagespeed");
+		params.append("limit", "25");
+		if (page !== undefined) params.append("page", String(page));
+		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
+		if (sortField) params.append("field", sortField);
+		if (sortOrder) params.append("order", sortOrder);
+		return `/monitors/team/with-checks?${params.toString()}`;
+	}, [page, rowsPerPage, sortField, sortOrder]);
+
+	const {
+		data: monitorsData,
+		isLoading: monitorsIsLoading,
+		error: monitorsError,
+		refetch,
+	} = useGet<MonitorsWithChecksResponse>(
+		monitorsWithChecksUrl,
+		{},
+		{ refreshInterval: 30000 }
+	);
+
 	const monitors = monitorsData?.monitors;
 	const monitorsCount = monitorsData?.count ?? 0;
 	const summary = monitorsData?.summary ?? null;

client/src/Pages/Settings/index.tsx

@@ -1,6 +1,15 @@
 import { BasePage, ConfigBox, TextLink } from "@/Components/design-elements";
 import { Autocomplete, Select, Dialog, SwitchComponent } from "@/Components/inputs";
-import { Stack, useTheme, MenuItem, Link, type SelectChangeEvent } from "@mui/material";
+import { logger } from "@/Utils/logger";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import {
+	Stack,
+	useTheme,
+	MenuItem,
+	Link,
+	Alert,
+	type SelectChangeEvent,
+} from "@mui/material";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -11,10 +20,10 @@ import { useGet, usePatch, usePost, useLazyGet } from "@/Hooks/UseApi";
 import { useToast } from "@/Hooks/UseToast";
 import { useSettingsForm } from "@/Hooks/useSettingsForm";
 import { useIsAdmin } from "@/Hooks/useIsAdmin.js";
-import type { SettingsFormData } from "@/Validation/settings";
+import type { SettingsFormData, SettingsFormInput } from "@/Validation/settings";
 import { useState } from "react";
 import { Controller } from "react-hook-form";
-import { TextField, Button, FieldLabel } from "@/Components/inputs";
+import { TextField, Button, FieldLabel, SliderWithLabel } from "@/Components/inputs";
 import { Box, Typography } from "@mui/material";
 import { useDelete } from "@/Hooks/UseApi";
 
@@ -28,6 +37,7 @@ import {
 } from "@/Features/UI/uiSlice.js";
 import timezones from "@/Utils/timezones.json";
 import type { RootState } from "@/Types/state";
+import { CHECK_TTL_SENTINEL } from "@/Types/Check";
 
 interface Timezone {
 	id: string;
@@ -79,7 +89,7 @@ export const SettingsPage = () => {
 	// Initialize form with schema and defaults
 	const { schema, defaults } = useSettingsForm({ data: fetchedSettings?.settings });
 
-	const form = useForm<SettingsFormData>({
+	const form = useForm<SettingsFormInput, unknown, SettingsFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 		mode: "onChange",
@@ -246,29 +256,7 @@ export const SettingsPage = () => {
 			delete (dataToSend as any).systemEmailPassword;
 		}
 
-		// Convert undefined to empty string for backend unsetting
-		const processedData = Object.entries(dataToSend).reduce((acc, [key, value]) => {
-			const typedKey = key as keyof SettingsFormData;
-			if (value === undefined) {
-				(acc as any)[typedKey] = "";
-			} else if (typeof value === "object" && value !== null) {
-				// Handle nested objects like globalThresholds
-				// Convert 0 to "" for unsetting thresholds
-				(acc as any)[typedKey] = Object.entries(value).reduce(
-					(nested, [nestedKey, nestedValue]) => ({
-						...nested,
-						[nestedKey]:
-							nestedValue === undefined || nestedValue === 0 ? "" : nestedValue,
-					}),
-					{}
-				);
-			} else {
-				(acc as any)[typedKey] = value;
-			}
-			return acc;
-		}, {} as Partial<SettingsFormData>);
-
-		const result = await patch("/settings", processedData as SettingsFormData);
+		const result = await patch("/settings", dataToSend as SettingsFormData);
 
 		if (result?.success) {
 			// Update API key state from response
@@ -282,7 +270,7 @@ export const SettingsPage = () => {
 	};
 
 	const onError = (errors: unknown) => {
-		console.log("Form validation errors:", errors);
+		logger.debug("Form validation errors", errors);
 	};
 
 	const languages = Object.keys(i18n.options.resources || {});
@@ -292,7 +280,7 @@ export const SettingsPage = () => {
 			component="form"
 			onSubmit={form.handleSubmit(onSubmit, onError)}
 		>
-			<Stack gap={theme.spacing(8)}>
+			<Stack gap={theme.spacing(LAYOUT.MD)}>
 				<ConfigBox
 					title={t("pages.settings.form.timezone.title")}
 					subtitle={t("pages.settings.form.timezone.description")}
@@ -315,7 +303,7 @@ export const SettingsPage = () => {
 					title={t("pages.settings.form.ui.title")}
 					subtitle={t("pages.settings.form.ui.description")}
 					rightContent={
-						<Stack gap={theme.spacing(8)}>
+						<Stack gap={theme.spacing(LAYOUT.MD)}>
 							<Select
 								value={mode}
 								onChange={handleModeChange}
@@ -454,6 +442,43 @@ export const SettingsPage = () => {
 					/>
 				)}
 
+				{/* Check Retention */}
+				{isAdmin && (
+					<ConfigBox
+						title={t("pages.settings.form.retention.title")}
+						subtitle={t("pages.settings.form.retention.description")}
+						rightContent={
+							<Controller
+								name="checkTTL"
+								control={form.control}
+								defaultValue={defaults.checkTTL}
+								render={({ field }) => (
+									<SliderWithLabel
+										{...field}
+										fieldLabel={t("pages.settings.form.retention.option.days.label")}
+										min={1}
+										max={CHECK_TTL_SENTINEL}
+										sliderMaxWidth={{ xs: "100%", md: "50%" }}
+										value={field.value || 30}
+										onChange={(_, value) => field.onChange(value)}
+										valueLabelDisplay="auto"
+										valueLabelFormat={(value: number) =>
+											value >= CHECK_TTL_SENTINEL
+												? t("pages.settings.form.retention.option.days.unlimited")
+												: `${value}`
+										}
+										formatDisplayValue={(value: number) =>
+											value >= CHECK_TTL_SENTINEL
+												? t("pages.settings.form.retention.option.days.unlimited")
+												: `${value}`
+										}
+									/>
+								)}
+							/>
+						}
+					/>
+				)}
+
 				{/* Global Thresholds */}
 				{isAdmin && (
 					<ConfigBox
@@ -465,24 +490,16 @@ export const SettingsPage = () => {
 									name="globalThresholds.cpu"
 									control={form.control}
 									defaultValue={defaults.globalThresholds?.cpu}
-									render={({ field, fieldState }) => (
-										<TextField
+									render={({ field }) => (
+										<SliderWithLabel
 											{...field}
-											value={
-												field.value === undefined || field.value === 0 ? "" : field.value
-											}
-											onChange={(e) => {
-												const val = e.target.value;
-												field.onChange(val === "" ? 0 : Number(val));
-											}}
 											fieldLabel={t("pages.settings.form.thresholds.option.cpu.label")}
-											type="number"
-											inputProps={{ min: 0 }}
-											placeholder={t(
-												"pages.settings.form.thresholds.option.cpu.placeholder"
-											)}
-											error={!!fieldState.error}
-											helperText={fieldState.error?.message}
+											min={1}
+											max={100}
+											sliderMaxWidth={{ xs: "100%", md: "50%" }}
+											value={field.value || 1}
+											onChange={(_, value) => field.onChange(value)}
+											valueLabelDisplay="auto"
 										/>
 									)}
 								/>
@@ -490,24 +507,16 @@ export const SettingsPage = () => {
 									name="globalThresholds.memory"
 									control={form.control}
 									defaultValue={defaults.globalThresholds?.memory}
-									render={({ field, fieldState }) => (
-										<TextField
+									render={({ field }) => (
+										<SliderWithLabel
 											{...field}
-											value={
-												field.value === undefined || field.value === 0 ? "" : field.value
-											}
-											onChange={(e) => {
-												const val = e.target.value;
-												field.onChange(val === "" ? 0 : Number(val));
-											}}
 											fieldLabel={t("pages.settings.form.thresholds.option.memory.label")}
-											type="number"
-											inputProps={{ min: 0 }}
-											placeholder={t(
-												"pages.settings.form.thresholds.option.memory.placeholder"
-											)}
-											error={!!fieldState.error}
-											helperText={fieldState.error?.message}
+											min={1}
+											max={100}
+											sliderMaxWidth={{ xs: "100%", md: "50%" }}
+											value={field.value || 1}
+											onChange={(_, value) => field.onChange(value)}
+											valueLabelDisplay="auto"
 										/>
 									)}
 								/>
@@ -515,24 +524,16 @@ export const SettingsPage = () => {
 									name="globalThresholds.disk"
 									control={form.control}
 									defaultValue={defaults.globalThresholds?.disk}
-									render={({ field, fieldState }) => (
-										<TextField
+									render={({ field }) => (
+										<SliderWithLabel
 											{...field}
-											value={
-												field.value === undefined || field.value === 0 ? "" : field.value
-											}
-											onChange={(e) => {
-												const val = e.target.value;
-												field.onChange(val === "" ? 0 : Number(val));
-											}}
 											fieldLabel={t("pages.settings.form.thresholds.option.disk.label")}
-											type="number"
-											inputProps={{ min: 0 }}
-											placeholder={t(
-												"pages.settings.form.thresholds.option.disk.placeholder"
-											)}
-											error={!!fieldState.error}
-											helperText={fieldState.error?.message}
+											min={1}
+											max={100}
+											sliderMaxWidth={{ xs: "100%", md: "50%" }}
+											value={field.value || 1}
+											onChange={(_, value) => field.onChange(value)}
+											valueLabelDisplay="auto"
 										/>
 									)}
 								/>
@@ -540,26 +541,18 @@ export const SettingsPage = () => {
 									name="globalThresholds.temperature"
 									control={form.control}
 									defaultValue={defaults.globalThresholds?.temperature}
-									render={({ field, fieldState }) => (
-										<TextField
+									render={({ field }) => (
+										<SliderWithLabel
 											{...field}
-											value={
-												field.value === undefined || field.value === 0 ? "" : field.value
-											}
-											onChange={(e) => {
-												const val = e.target.value;
-												field.onChange(val === "" ? 0 : Number(val));
-											}}
 											fieldLabel={t(
 												"pages.settings.form.thresholds.option.temperature.label"
 											)}
-											type="number"
-											inputProps={{ min: 0 }}
-											placeholder={t(
-												"pages.settings.form.thresholds.option.temperature.placeholder"
-											)}
-											error={!!fieldState.error}
-											helperText={fieldState.error?.message}
+											min={1}
+											max={150}
+											sliderMaxWidth={{ xs: "100%", md: "50%" }}
+											value={field.value || 1}
+											onChange={(_, value) => field.onChange(value)}
+											valueLabelDisplay="auto"
 										/>
 									)}
 								/>
@@ -575,7 +568,7 @@ export const SettingsPage = () => {
 					title={t("pages.settings.form.email.title")}
 					subtitle={t("pages.settings.form.email.description")}
 					leftContent={
-						<Stack gap={theme.spacing(8)}>
+						<Stack gap={theme.spacing(LAYOUT.MD)}>
 							<TextLink
 								text={t("pages.settings.form.email.descriptionTransport")}
 								linkText={t("pages.settings.form.email.descriptionTransportLink")}
@@ -623,7 +616,7 @@ export const SettingsPage = () => {
 						</Stack>
 					}
 					rightContent={
-						<Stack gap={theme.spacing(10)}>
+						<Stack gap={theme.spacing(LAYOUT.MD)}>
 							{/* Email Host */}
 							<Controller
 								name="systemEmailHost"
@@ -710,7 +703,7 @@ export const SettingsPage = () => {
 									<Stack
 										direction="row"
 										alignItems="center"
-										gap={theme.spacing(4)}
+										gap={theme.spacing(LAYOUT.XS)}
 									>
 										<Button
 											variant="contained"
@@ -785,7 +778,7 @@ export const SettingsPage = () => {
 								sx={{
 									display: "flex",
 									flexDirection: "column",
-									gap: theme.spacing(4),
+									gap: theme.spacing(LAYOUT.XS),
 								}}
 							>
 								{[
@@ -904,7 +897,7 @@ export const SettingsPage = () => {
 					subtitle={t("pages.settings.form.importExportMonitors.description")}
 					rightContent={
 						<Stack
-							gap={theme.spacing(4)}
+							gap={theme.spacing(LAYOUT.MD)}
 							direction={"row"}
 						>
 							<input
@@ -990,13 +983,46 @@ export const SettingsPage = () => {
 					bottom: 0,
 					backgroundColor: theme.palette.background.paper,
 					borderTop: `1px solid ${theme.palette.divider}`,
-					padding: theme.spacing(8),
-					marginLeft: theme.spacing(-8),
-					marginRight: theme.spacing(-8),
-					marginBottom: theme.spacing(-8),
+					padding: theme.spacing(LAYOUT.MD),
+					marginLeft: theme.spacing(-LAYOUT.MD),
+					marginRight: theme.spacing(-LAYOUT.MD),
+					marginBottom: theme.spacing(-LAYOUT.MD),
 					zIndex: 1000,
 				}}
 			>
+				{/* Validation Error Display */}
+				{Object.keys(form.formState.errors).length > 0 && (
+					<Alert
+						severity="error"
+						sx={{ mb: 2, flexGrow: 1, mr: 2 }}
+					>
+						<Typography
+							variant="body2"
+							sx={{ fontWeight: 600, mb: 1 }}
+						>
+							{t("pages.settings.form.validation.errorMessage")}
+						</Typography>
+						<Box
+							component="ul"
+							sx={{ m: 0, pl: 2 }}
+						>
+							{Object.entries(form.formState.errors).map(([field, error]) => {
+								const message =
+									typeof error === "object" && error?.message
+										? error.message
+										: "Invalid value";
+								return (
+									<li key={field}>
+										<Typography variant="body2">
+											<strong>{field}:</strong> {message}
+										</Typography>
+									</li>
+								);
+							})}
+						</Box>
+					</Alert>
+				)}
+
 				<Button
 					loading={isSaving}
 					type="submit"

client/src/Pages/StatusPage/Create/index.tsx

@@ -1,5 +1,7 @@
 import { BasePage, ConfigBox } from "@/Components/design-elements";
 import Stack from "@mui/material/Stack";
+import { logger } from "@/Utils/logger";
+import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
 import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
 import FormControlLabel from "@mui/material/FormControlLabel";
@@ -19,19 +21,28 @@ import {
 
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useStatusPageForm } from "@/Hooks/useStatusPageForm";
 import type { StatusPageFormData } from "@/Validation/statusPage";
 import { useGet, usePost, usePut, useDelete } from "@/Hooks/UseApi";
 import type { Monitor } from "@/Types/Monitor";
-import type { StatusPageResponse } from "@/Types/StatusPage";
+import type { MonitorDisplayType, StatusPageResponse } from "@/Types/StatusPage";
+import { getMonitorTypeLabel } from "@/Types/StatusPage";
 import timezones from "@/Utils/timezones.json";
 import { useNavigate, useParams } from "react-router-dom";
 import axios from "axios";
 import { HeaderConfigStatusControls } from "./Components/HeaderConfigStatusControls";
 
+const monitorsUrl = (() => {
+	const params = new URLSearchParams();
+	["http", "ping", "port", "docker", "game", "grpc", "websocket", "hardware"].forEach(
+		(type) => params.append("type", type)
+	);
+	return `/monitors/team?${params.toString()}`;
+})();
+
 interface TimezoneOption {
 	_id: string;
 	name: string;
@@ -47,11 +58,11 @@ const CreateStatusPage = () => {
 
 	// Fetch existing status page data when configuring
 	const { data: statusPageData, isLoading: isLoadingStatusPage } =
-		useGet<StatusPageResponse>(isCreate ? null : `/status-page/${url}?type=uptime`);
+		useGet<StatusPageResponse>(
+			isCreate ? null : `/status-page/${url}?type=uptime&type=infrastructure`
+		);
 
-	const { data: monitorsResponse } = useGet<Monitor[]>(
-		"/monitors/team?type=http&type=ping&type=port&type=docker"
-	);
+	const { data: monitorsResponse } = useGet<Monitor[]>(monitorsUrl);
 	const monitors = monitorsResponse ?? [];
 
 	const { post, loading: isSubmittingPost } = usePost();
@@ -79,8 +90,26 @@ const CreateStatusPage = () => {
 		reset(defaults);
 	}, [defaults, reset]);
 
+	const watchedMonitorIds: string[] = form.watch("monitors") ?? [];
+	const computedTypes: MonitorDisplayType[] = useMemo(() => {
+		const selectedMonitors = (watchedMonitorIds ?? [])
+			.map((id) => monitors.find((m) => m.id === id))
+			.filter((m): m is Monitor => m !== undefined);
+
+		const typesSet = new Set<MonitorDisplayType>();
+		selectedMonitors.forEach((m) => {
+			typesSet.add(m.type === "hardware" ? "infrastructure" : "uptime");
+		});
+
+		return typesSet.size ? Array.from(typesSet) : ["uptime"];
+	}, [watchedMonitorIds, monitors]);
+
+	useEffect(() => {
+		form.setValue("type", computedTypes);
+	}, [computedTypes]);
+
 	const onError = (errors: any) => {
-		console.log(errors);
+		logger.debug("Status page validation errors", errors);
 	};
 
 	const handleDeleteClick = () => {
@@ -101,7 +130,6 @@ const CreateStatusPage = () => {
 
 	const onSubmit = async (data: StatusPageFormData) => {
 		const fd = new FormData();
-		fd.append("type", "uptime");
 		fd.append("isPublished", String(data.isPublished));
 		if (data.companyName) fd.append("companyName", data.companyName);
 		if (data.url) fd.append("url", data.url);
@@ -110,11 +138,16 @@ const CreateStatusPage = () => {
 		fd.append("showCharts", String(data.showCharts));
 		fd.append("showUptimePercentage", String(data.showUptimePercentage));
 		fd.append("showAdminLoginLink", String(data.showAdminLoginLink));
+		fd.append("showInfrastructure", String(data.showInfrastructure));
 
 		data.monitors.forEach((monitorId) => {
 			fd.append("monitors[]", monitorId);
 		});
 
+		data.type.forEach((type) => {
+			fd.append("type[]", type);
+		});
+
 		// Handle logo upload
 		if (data.logo === null) {
 			// Signal to remove the logo
@@ -128,7 +161,7 @@ const CreateStatusPage = () => {
 					fd.append("logo", imageResult.data);
 					URL.revokeObjectURL(data.logo.data);
 				} catch (e) {
-					console.error("Error fetching logo blob:", e);
+					logger.error("Failed to fetch logo blob", e instanceof Error ? e : undefined);
 				}
 			}
 		}
@@ -165,7 +198,7 @@ const CreateStatusPage = () => {
 					<Stack
 						direction="row"
 						alignItems="center"
-						spacing={theme.spacing(2)}
+						spacing={theme.spacing(SPACING.MD)}
 					>
 						<Controller
 							name="isPublished"
@@ -187,7 +220,7 @@ const CreateStatusPage = () => {
 				title={t("pages.statusPages.form.basicInfo.title")}
 				subtitle={t("pages.statusPages.form.basicInfo.description")}
 				rightContent={
-					<Stack spacing={theme.spacing(6)}>
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
 						<Controller
 							name="companyName"
 							control={control}
@@ -242,7 +275,7 @@ const CreateStatusPage = () => {
 							};
 
 							return (
-								<Stack spacing={theme.spacing(4)}>
+								<Stack spacing={theme.spacing(LAYOUT.MD)}>
 									<Autocomplete
 										multiple
 										options={monitors}
@@ -290,9 +323,9 @@ const CreateStatusPage = () => {
 																		{...provided.dragHandleProps}
 																		direction="row"
 																		alignItems="center"
-																		spacing={theme.spacing(4)}
-																		padding={theme.spacing(4)}
-																		marginTop={theme.spacing(2)}
+																		spacing={theme.spacing(LAYOUT.XS)}
+																		padding={theme.spacing(LAYOUT.XS)}
+																		marginTop={theme.spacing(SPACING.LG)}
 																		borderRadius={1}
 																		sx={{
 																			border: `1px solid ${theme.palette.divider}`,
@@ -301,7 +334,9 @@ const CreateStatusPage = () => {
 																		}}
 																	>
 																		<GripVertical size={20} />
-																		<Typography flexGrow={1}>{monitor.name}</Typography>
+																		<Typography
+																			flexGrow={1}
+																		>{`${monitor.name} (${getMonitorTypeLabel(monitor.type, t)})`}</Typography>
 																		<IconButton
 																			size="small"
 																			onClick={() => {
@@ -366,7 +401,7 @@ const CreateStatusPage = () => {
 				title={t("pages.statusPages.form.appearance.title")}
 				subtitle={t("pages.statusPages.form.appearance.description")}
 				rightContent={
-					<Stack spacing={theme.spacing(8)}>
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
 						<Stack alignItems={"center"}>
 							<Controller
 								name="logo"
@@ -407,7 +442,7 @@ const CreateStatusPage = () => {
 				title={t("pages.statusPages.form.features.title")}
 				subtitle={t("pages.statusPages.form.features.description")}
 				rightContent={
-					<Stack spacing={theme.spacing(2)}>
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
 						<Controller
 							name="showCharts"
 							control={control}
@@ -423,6 +458,23 @@ const CreateStatusPage = () => {
 								/>
 							)}
 						/>
+						<Controller
+							name="showInfrastructure"
+							control={control}
+							render={({ field }) => (
+								<FormControlLabel
+									control={
+										<Checkbox
+											checked={field.value}
+											onChange={field.onChange}
+										/>
+									}
+									label={t(
+										"pages.statusPages.form.features.option.showInfrastructure.label"
+									)}
+								/>
+							)}
+						/>
 						{/* <Controller
 							name="showUptimePercentage"
 							control={control}

client/src/Pages/StatusPage/Status/Components/InfrastructureMetrics.tsx

@@ -0,0 +1,246 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { Gauge } from "@/Components/design-elements";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import prettyBytes from "pretty-bytes";
+import type { Monitor } from "@/Types/Monitor";
+import Grid from "@mui/material/Grid";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import Box from "@mui/material/Box";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
+
+const GAUGE_RADIUS = 60;
+const GAUGE_STROKE_WIDTH = 12;
+const PERCENTAGE_MULTIPLIER = 100;
+
+interface StatusPageMonitor extends Monitor {
+	checks?: Monitor["recentChecks"];
+}
+
+interface MetricDetail {
+	label: string;
+	value: string;
+}
+
+interface MetricConfig {
+	key: string;
+	label: string;
+	hasData: boolean;
+	progress: number;
+	details: MetricDetail[];
+}
+
+const MetricDetailRow = ({ label, value }: MetricDetail) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+		>
+			<Typography
+				variant="body2"
+				color={theme.palette.text.secondary}
+			>
+				{label}
+			</Typography>
+			<Typography variant="body2">{value}</Typography>
+		</Stack>
+	);
+};
+
+interface MetricItemProps {
+	label: string;
+	progress: number;
+	details?: MetricDetail[];
+}
+
+const MetricItem = ({ label, progress, details }: MetricItemProps) => {
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	return (
+		<Grid
+			size={isSmall ? 12 : 4}
+			sx={{
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				textAlign: "center",
+				gap: theme.spacing(SPACING.LG),
+				padding: theme.spacing(LAYOUT.XS),
+				borderRight: isSmall ? "none" : `1px solid ${theme.palette.divider}`,
+				borderBottom: isSmall ? `1px solid ${theme.palette.divider}` : "none",
+				"&:last-child": {
+					borderRight: "none",
+					borderBottom: "none",
+					paddingBottom: theme.spacing(SPACING.LG),
+				},
+			}}
+		>
+			<Box
+				display="flex"
+				flexDirection="column"
+				alignItems="center"
+			>
+				<Gauge
+					progress={progress}
+					radius={GAUGE_RADIUS}
+					strokeWidth={GAUGE_STROKE_WIDTH}
+				/>
+				<Typography variant="body2">{label}</Typography>
+			</Box>
+			{details && details.length > 0 && (
+				<Box
+					width="100%"
+					paddingX={theme.spacing(LAYOUT.LG)}
+				>
+					{details.map((detail) => (
+						<MetricDetailRow
+							key={detail.label}
+							label={detail.label}
+							value={detail.value}
+						/>
+					))}
+				</Box>
+			)}
+		</Grid>
+	);
+};
+
+type LatestCheck = NonNullable<Monitor["recentChecks"]>[number];
+
+const buildCpuMetric = (
+	check: LatestCheck,
+	t: (key: string) => string
+): MetricConfig | null => {
+	if (!check.cpu || typeof check.cpu.usage_percent !== "number") {
+		return null;
+	}
+	const usagePercent = (check.cpu.usage_percent ?? 0) * PERCENTAGE_MULTIPLIER;
+	return {
+		key: "cpu",
+		label: t("pages.statusPages.monitorsList.infrastructure.cpu"),
+		hasData: true,
+		progress: usagePercent,
+		details: [
+			{
+				label: t("pages.statusPages.monitorsList.infrastructure.usage"),
+				value: `${usagePercent.toFixed(2)}%`,
+			},
+		],
+	};
+};
+
+const buildMemoryMetric = (
+	check: LatestCheck,
+	t: (key: string) => string
+): MetricConfig | null => {
+	if (
+		!check.memory ||
+		typeof check.memory.usage_percent !== "number" ||
+		typeof check.memory.used_bytes !== "number" ||
+		typeof check.memory.total_bytes !== "number"
+	) {
+		return null;
+	}
+	return {
+		key: "memory",
+		label: t("pages.statusPages.monitorsList.infrastructure.memory"),
+		hasData: true,
+		progress: (check.memory.usage_percent ?? 0) * PERCENTAGE_MULTIPLIER,
+		details: [
+			{
+				label: t("pages.statusPages.monitorsList.infrastructure.used"),
+				value: prettyBytes(check.memory.used_bytes ?? 0),
+			},
+			{
+				label: t("pages.statusPages.monitorsList.infrastructure.total"),
+				value: prettyBytes(check.memory.total_bytes ?? 0),
+			},
+		],
+	};
+};
+
+const buildDiskMetric = (
+	check: LatestCheck,
+	t: (key: string) => string
+): MetricConfig | null => {
+	if (!check.disk || check.disk.length === 0) {
+		return null;
+	}
+	const disks = check.disk;
+	const avgUsagePercent =
+		(disks.reduce((acc, disk) => acc + (disk?.usage_percent ?? 0), 0) / disks.length) *
+		PERCENTAGE_MULTIPLIER;
+	const totalUsedBytes = disks.reduce((acc, disk) => acc + (disk?.used_bytes ?? 0), 0);
+	const totalTotalBytes = disks.reduce((acc, disk) => acc + (disk?.total_bytes ?? 0), 0);
+
+	return {
+		key: "disk",
+		label: t("pages.statusPages.monitorsList.infrastructure.disk"),
+		hasData: true,
+		progress: avgUsagePercent,
+		details: [
+			{
+				label: t("pages.statusPages.monitorsList.infrastructure.used"),
+				value: prettyBytes(totalUsedBytes),
+			},
+			{
+				label: t("pages.statusPages.monitorsList.infrastructure.total"),
+				value: prettyBytes(totalTotalBytes),
+			},
+		],
+	};
+};
+
+export const InfrastructureMetrics = ({ monitor }: { monitor: StatusPageMonitor }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	const latestCheck = monitor.recentChecks?.[0] ?? monitor.checks?.[0];
+
+	if (!latestCheck) {
+		return (
+			<Typography
+				variant="body2"
+				color={theme.palette.text.secondary}
+			>
+				{t("pages.statusPages.monitorsList.noData")}
+			</Typography>
+		);
+	}
+
+	const metrics: MetricConfig[] = [
+		buildCpuMetric(latestCheck, t),
+		buildMemoryMetric(latestCheck, t),
+		buildDiskMetric(latestCheck, t),
+	].filter((m): m is MetricConfig => m !== null);
+
+	if (metrics.length === 0) {
+		return (
+			<Typography
+				variant="body2"
+				color={theme.palette.text.secondary}
+			>
+				{t("pages.statusPages.monitorsList.noData")}
+			</Typography>
+		);
+	}
+
+	return (
+		<Grid
+			container
+			alignItems="center"
+			padding={theme.spacing(LAYOUT.XS)}
+		>
+			{metrics.map(({ key, label, progress, details }) => (
+				<MetricItem
+					key={key}
+					label={label}
+					progress={progress}
+					details={details}
+				/>
+			))}
+		</Grid>
+	);
+};

client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx

@@ -5,13 +5,16 @@ import Typography from "@mui/material/Typography";
 import { HistogramResponseTime, HeatmapResponseTime } from "@/Components/common";
 import { StatusLabel, BaseBox } from "@/Components/design-elements";
 import { SwitchComponent } from "@/Components/inputs";
+import { InfrastructureMetrics } from "@/Pages/StatusPage/Status/Components/InfrastructureMetrics";
 
-import { useTheme } from "@mui/material/styles";
+import { useTheme, type Theme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 import type { Monitor } from "@/Types/Monitor";
 import type { StatusPage } from "@/Types/StatusPage";
+import { getMonitorTypeLabel } from "@/Types/StatusPage";
 import type { RootState } from "@/Types/state";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
 
 interface StatusPageMonitor extends Monitor {
 	checks?: Monitor["recentChecks"];
@@ -22,29 +25,124 @@ interface MonitorsListProps {
 	monitors: StatusPageMonitor[];
 }
 
-export const MonitorsList = ({ statusPage, monitors }: MonitorsListProps) => {
+const getMonitorBadgeStyles = (monitorType: string, theme: Theme) => {
+	const bg =
+		monitorType === "hardware" ? theme.palette.info.light : theme.palette.success.light;
+	return {
+		backgroundColor: bg,
+		color: theme.palette.background.paper,
+		padding: `${theme.spacing(SPACING.SM)} ${theme.spacing(SPACING.LG)}`,
+		borderRadius: theme.shape.borderRadius,
+	};
+};
+
+const MonitorHeader = ({
+	monitor,
+	showURL,
+}: {
+	monitor: StatusPageMonitor;
+	showURL: boolean;
+}) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
 
-	const showURL = useSelector((state: RootState) => state.ui?.showURL);
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			justifyContent="space-between"
+			gap={theme.spacing(LAYOUT.XS)}
+			mb={theme.spacing(LAYOUT.XS)}
+		>
+			<Box sx={{ overflow: "hidden", minWidth: 0, flex: 1 }}>
+				<Stack
+					direction="row"
+					alignItems="center"
+					gap={theme.spacing(SPACING.LG)}
+					mb={theme.spacing(SPACING.SM)}
+				>
+					<Typography
+						variant="h6"
+						sx={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+					>
+						{monitor.name}
+					</Typography>
+					<Typography
+						variant="caption"
+						sx={getMonitorBadgeStyles(monitor.type ?? "", theme)}
+					>
+						{getMonitorTypeLabel(monitor.type, t)}
+					</Typography>
+				</Stack>
+				{showURL && monitor.url && (
+					<Typography
+						variant="body2"
+						color={theme.palette.text.secondary}
+						sx={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+					>
+						{monitor.url}
+					</Typography>
+				)}
+			</Box>
+			<StatusLabel status={monitor.status} />
+		</Stack>
+	);
+};
 
+const MonitorContent = ({
+	monitor,
+	statusPage,
+	chartType,
+}: {
+	monitor: StatusPageMonitor;
+	statusPage: StatusPage;
+	chartType: string;
+}) => {
+	const theme = useTheme();
+
+	if (monitor.type === "hardware") {
+		if (statusPage.showInfrastructure === false) return null;
+		return <InfrastructureMetrics monitor={monitor} />;
+	}
+
+	if (statusPage.showCharts === false) return null;
+
+	const checks = monitor.checks?.slice().reverse() ?? [];
+	return (
+		<Box sx={{ overflow: "hidden", minWidth: 0, flex: 1, mb: theme.spacing(SPACING.LG) }}>
+			{chartType === "histogram" ? (
+				<HistogramResponseTime
+					height={{ xs: 50, md: 100 }}
+					gap={{ xs: theme.spacing(SPACING.SM), md: theme.spacing(LAYOUT.SM) }}
+					checks={checks}
+				/>
+			) : (
+				<HeatmapResponseTime checks={checks} />
+			)}
+		</Box>
+	);
+};
+
+export const MonitorsList = ({ statusPage, monitors }: MonitorsListProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const showURL = useSelector((state: RootState) => state.ui?.showURL);
 	const [chartType, setChartType] = useState<"histogram" | "heatmap">("histogram");
 
 	return (
-		<Stack gap={theme.spacing(8)}>
-			{statusPage.showCharts !== false && (
+		<Stack gap={theme.spacing(LAYOUT.MD)}>
+			{statusPage.showCharts && (
 				<Stack
-					direction={"row"}
-					alignItems={"center"}
+					direction="row"
+					alignItems="center"
+					gap={theme.spacing(LAYOUT.SM)}
 				>
 					<Typography>{t("pages.statusPages.monitorsList.chartTypeHeatmap")}</Typography>
 					<SwitchComponent
 						dualOption
 						value={chartType}
 						checked={chartType === "histogram"}
-						onChange={(e) => {
-							setChartType(e.target.checked ? "histogram" : "heatmap");
-						}}
+						onChange={(e) => setChartType(e.target.checked ? "histogram" : "heatmap")}
 					/>
 					<Typography>
 						{t("pages.statusPages.monitorsList.chartTypeHistogram")}
@@ -52,59 +150,22 @@ export const MonitorsList = ({ statusPage, monitors }: MonitorsListProps) => {
 				</Stack>
 			)}
 
-			{monitors?.map((monitor) => {
-				return (
-					<BaseBox
-						key={monitor.id}
-						padding={theme.spacing(4)}
-					>
-						<Stack
-							direction="row"
-							alignItems="center"
-							justifyContent="space-between"
-							gap={theme.spacing(4)}
-							mb={statusPage.showCharts !== false ? theme.spacing(4) : 0}
-						>
-							<Box sx={{ overflow: "hidden", minWidth: 0, flex: 1 }}>
-								<Typography
-									variant="h6"
-									sx={{
-										overflow: "hidden",
-										textOverflow: "ellipsis",
-										whiteSpace: "nowrap",
-									}}
-								>
-									{monitor.name}
-								</Typography>
-								{showURL && (
-									<Typography
-										variant="body2"
-										color="text.secondary"
-									>
-										{monitor.url}
-									</Typography>
-								)}
-							</Box>
-							<StatusLabel status={monitor.status} />
-						</Stack>
-						{statusPage.showCharts !== false && (
-							<Box sx={{ overflow: "hidden", minWidth: 0, flex: 1 }}>
-								{chartType === "histogram" ? (
-									<HistogramResponseTime
-										height={{ xs: 50, md: 100 }}
-										gap={{ xs: theme.spacing(0.5), md: theme.spacing(5) }}
-										checks={monitor?.checks?.slice().reverse() ?? []}
-									/>
-								) : (
-									<HeatmapResponseTime
-										checks={monitor?.checks?.slice().reverse() ?? []}
-									/>
-								)}
-							</Box>
-						)}
-					</BaseBox>
-				);
-			})}
+			{monitors.map((monitor) => (
+				<BaseBox
+					key={monitor.id}
+					padding={theme.spacing(LAYOUT.MD)}
+				>
+					<MonitorHeader
+						monitor={monitor}
+						showURL={showURL}
+					/>
+					<MonitorContent
+						monitor={monitor}
+						statusPage={statusPage}
+						chartType={chartType}
+					/>
+				</BaseBox>
+			))}
 		</Stack>
 	);
 };

client/src/Pages/StatusPage/Status/Components/StatusBar.tsx

@@ -1,35 +1,115 @@
-import { AlertTriangle, CircleCheck } from "lucide-react";
+import {
+	AlertTriangle,
+	CircleCheck,
+	CircleX,
+	Loader,
+	PauseCircle,
+	ShieldAlert,
+	Wrench,
+} from "lucide-react";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 
 import { useTranslation } from "react-i18next";
-import type { Theme } from "@mui/material";
 import { useTheme } from "@mui/material";
-import type { Monitor } from "@/Types/Monitor";
+import type { Theme } from "@mui/material";
+import type { Monitor, MonitorStatus } from "@/Types/Monitor";
+
+interface StatusDisplay {
+	icon: JSX.Element;
+	msg?: string;
+	color?: string;
+}
 
 const getMonitorStatus = (monitors: Monitor[], theme: Theme, t: Function) => {
-	const monitorsStatus: Record<string, any> = {
+	const monitorsStatus: StatusDisplay = {
 		icon: <AlertTriangle size={24} />,
 	};
 
-	if (monitors.every((monitor) => monitor.status === "up")) {
+	// Handle empty monitors array
+	if (monitors.length === 0) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.noMonitors");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <CircleX size={24} />;
+		return monitorsStatus;
+	}
+
+	const allOf = (...statuses: MonitorStatus[]) =>
+		monitors.every((m) => statuses.includes(m.status));
+	const someOf = (...statuses: MonitorStatus[]) =>
+		monitors.some((m) => statuses.includes(m.status));
+	const noneOf = (...statuses: MonitorStatus[]) =>
+		monitors.every((m) => !statuses.includes(m.status));
+
+	// All monitors in a single state
+	if (allOf("up")) {
 		monitorsStatus.msg = t("pages.statusPages.statusBar.allUp");
 		monitorsStatus.color = theme.palette.success.main;
 		monitorsStatus.icon = <CircleCheck size={24} />;
-		return monitorsStatus;
-	} else if (monitors.every((monitor) => monitor.status === "down")) {
+	} else if (allOf("breached")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.allBreached");
+		monitorsStatus.color = theme.palette.error.main;
+		monitorsStatus.icon = <ShieldAlert size={24} />;
+	} else if (allOf("maintenance")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.allMaintenance");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <Wrench size={24} />;
+	} else if (allOf("down")) {
 		monitorsStatus.msg = t("pages.statusPages.statusBar.allDown");
 		monitorsStatus.color = theme.palette.error.main;
-		return monitorsStatus;
-	} else if (monitors.some((monitor) => monitor.status === "down")) {
+		monitorsStatus.icon = <CircleX size={24} />;
+	} else if (allOf("paused")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.allPaused");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <PauseCircle size={24} />;
+	} else if (allOf("initializing")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.allInitializing");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <Loader size={24} />;
+
+		// Breached takes highest priority in mixed states
+	} else if (someOf("breached") && someOf("down")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.breachedAndDown");
+		monitorsStatus.color = theme.palette.error.main;
+		monitorsStatus.icon = <ShieldAlert size={24} />;
+	} else if (someOf("breached")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.breached");
+		monitorsStatus.color = theme.palette.error.main;
+		monitorsStatus.icon = <ShieldAlert size={24} />;
+
+		// Maintenance combinations
+	} else if (someOf("maintenance") && someOf("down")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.maintenanceAndDown");
+		monitorsStatus.color = theme.palette.error.main;
+		monitorsStatus.icon = <Wrench size={24} />;
+	} else if (someOf("maintenance") && noneOf("down")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.maintenance");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <Wrench size={24} />;
+
+		// Degraded (some down, no maintenance/breached)
+	} else if (someOf("down")) {
 		monitorsStatus.msg = t("pages.statusPages.statusBar.degraded");
 		monitorsStatus.color = theme.palette.warning.main;
-		return monitorsStatus;
+		monitorsStatus.icon = <AlertTriangle size={24} />;
+
+		// Some Paused
+	} else if (someOf("paused")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.partiallyPaused");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <PauseCircle size={24} />;
+
+		// Initializing
+	} else if (someOf("initializing")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.initializing");
+		monitorsStatus.color = theme.palette.info.main;
+		monitorsStatus.icon = <Loader size={24} />;
 	} else {
 		monitorsStatus.msg = t("pages.statusPages.statusBar.unknown");
 		monitorsStatus.color = theme.palette.warning.main;
-		return monitorsStatus;
 	}
+
+	return monitorsStatus;
 };
 
 interface StatusBarProps {

client/src/Pages/StatusPage/Status/index.tsx

@@ -23,16 +23,22 @@ const StatusPageView = () => {
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isPublic = location.pathname.startsWith("/status/public");
 
-	const apiUrl = url ? `/status-page/${url}?type=uptime` : null;
+	const apiUrl = url ? `/status-page/${url}?type=uptime&type=infrastructure` : null;
 
-	const { data, isLoading, error } = useGet<StatusPageResponse>(apiUrl);
+	const { data, isLoading, error } = useGet<StatusPageResponse>(
+		apiUrl,
+		{},
+		{
+			refreshInterval: 10000,
+		}
+	);
 
 	const statusPage = data?.statusPage;
 	const monitors = data?.monitors ?? [];
 
 	if (!statusPage) return null;
 
-	if (monitors?.length === 0) {
+	if (monitors.length === 0) {
 		return (
 			<BasePage
 				loading={isLoading}

client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx

@@ -97,7 +97,7 @@ export const StatusPagesTable = ({
 			{
 				id: "type",
 				content: t("common.table.headers.type"),
-				render: (row) => row.type,
+				render: (row) => row.type.join(", "),
 			},
 			{
 				id: "status",

client/src/Pages/Uptime/Details/Components/ChecksTable.tsx

@@ -20,7 +20,7 @@ const getHeaders = (t: Function, uiTimezone: string) => {
 		},
 		{
 			id: "date",
-			content: t("pages.checks.table.headers.dateTime"),
+			content: t("common.table.headers.dateTime"),
 			render: (row) => {
 				return formatDateWithTz(row.createdAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone);
 			},

client/src/Pages/Uptime/Details/Components/GeoChecksTable.tsx

@@ -0,0 +1,107 @@
+import { Table, Pagination, StatusLabel } from "@/Components/design-elements";
+import Box from "@mui/material/Box";
+import type { Header } from "@/Components/design-elements";
+import type { FlatGeoCheck } from "@/Types/GeoCheck";
+import { useTranslation } from "react-i18next";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
+import type { RootState } from "@/Types/state";
+import { useSelector } from "react-redux";
+import prettyMilliseconds from "pretty-ms";
+
+const getHeaders = (t: Function, uiTimezone: string) => {
+	const headers: Header<FlatGeoCheck>[] = [
+		{
+			id: "status",
+			content: t("common.table.headers.status"),
+			render: (row) => {
+				const status = row.status ? "up" : "down";
+				return <StatusLabel status={status} />;
+			},
+		},
+		{
+			id: "date",
+			content: t("common.table.headers.dateTime"),
+			render: (row) => {
+				return formatDateWithTz(row.createdAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone);
+			},
+		},
+		{
+			id: "statusCode",
+			content: t("pages.checks.table.headers.statusCode"),
+			render: (row) => {
+				return row.statusCode || "N/A";
+			},
+		},
+		{
+			id: "location",
+			content: t("pages.checks.table.headers.location"),
+			render: (row) => {
+				const location = row.location;
+				if (!location) return "N/A";
+				const { continent, country, city } = location;
+				return `${continent} - ${country}, ${city}`;
+			},
+		},
+		{
+			id: "responseTime",
+			content: t("common.table.headers.responseTime"),
+			render: (row) => {
+				if (!row.timings?.total) return "N/A";
+				return prettyMilliseconds(row.timings.total, { compact: true });
+			},
+		},
+	];
+	return headers;
+};
+
+export const GeoChecksTable = ({
+	geoChecks,
+	count,
+	page,
+	setPage,
+	rowsPerPage,
+	setRowsPerPage,
+}: {
+	geoChecks: FlatGeoCheck[];
+	count: number;
+	page: number;
+	setPage: (page: number) => void;
+	rowsPerPage: number;
+	setRowsPerPage: (rowsPerPage: number) => void;
+}) => {
+	const { t } = useTranslation();
+	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
+	const headers = getHeaders(t, uiTimezone);
+
+	const handlePageChange = (
+		_e: React.MouseEvent<HTMLButtonElement> | null,
+		newPage: number
+	) => {
+		setPage(newPage);
+	};
+
+	const handleRowsPerPageChange = (
+		e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+	) => {
+		const value = Number(e.target.value);
+		setPage(0);
+		setRowsPerPage(value);
+	};
+
+	return (
+		<Box>
+			<Table
+				headers={headers}
+				data={geoChecks}
+			/>
+			<Pagination
+				component="div"
+				count={count}
+				page={page}
+				rowsPerPage={rowsPerPage}
+				onPageChange={handlePageChange}
+				onRowsPerPageChange={handleRowsPerPageChange}
+			/>
+		</Box>
+	);
+};

client/src/Pages/Uptime/Details/index.tsx

@@ -6,9 +6,12 @@ import {
 	RadialAvgResponse,
 	HistogramDetails,
 	HeaderMonitorControls,
+	HeaderGeoTabs,
+	GeoChecksMap,
 } from "@/Components/monitors";
 import { TrendingUp, AlertTriangle } from "lucide-react";
 import { ChecksTable } from "@/Pages/Uptime/Details/Components/ChecksTable";
+import { GeoChecksTable } from "@/Pages/Uptime/Details/Components/GeoChecksTable";
 import { MonitorStatBoxes } from "@/Components/monitors";
 
 import { useTheme } from "@mui/material/styles";
@@ -17,11 +20,17 @@ import { useState, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { useGet } from "@/Hooks/UseApi";
-import type { MonitorDetailsResponse } from "@/Types/Monitor";
+import { type MonitorDetailsResponse, supportsGeoCheck } from "@/Types/Monitor";
 import type { ChecksResponse } from "@/Types/Check";
+import type {
+	GeoChecksResult,
+	FlatGeoChecksResponse,
+	GeoContinent,
+} from "@/Types/GeoCheck";
 import type { RootState } from "@/Types/state";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
 import { t } from "i18next";
+import { Typography } from "@mui/material";
 
 const certificateDateFormat = "MMM D, YYYY h A";
 
@@ -37,7 +46,10 @@ const UptimeDetailsPage = () => {
 
 	const [page, setPage] = useState<number>(0);
 	const [rowsPerPage, setRowsPerPage] = useState<number>(5);
+	const [geoPage, setGeoPage] = useState<number>(0);
+	const [geoRowsPerPage, setGeoRowsPerPage] = useState<number>(5);
 	const [dateRange, setDateRange] = useState<string>("recent");
+	const [selectedLocation, setSelectedLocation] = useState<GeoContinent>("NA");
 
 	const monitorDetailsUrl = useMemo(() => {
 		if (!monitorId) {
@@ -56,7 +68,7 @@ const UptimeDetailsPage = () => {
 	} = useGet<MonitorDetailsResponse>(
 		monitorDetailsUrl,
 		{},
-		{ refreshInterval: 10000, keepPreviousData: true }
+		{ refreshInterval: 10000, keepPreviousData: true, revalidateOnFocus: false }
 	);
 
 	const monitorData = monitorDetailsData?.monitorData;
@@ -71,7 +83,11 @@ const UptimeDetailsPage = () => {
 		return `/monitors/certificate/${monitorId}`;
 	}, [monitorId, monitor?.type]);
 
-	const { data: certificateData } = useGet<CertificateResponse>(certificateUrl);
+	const { data: certificateData } = useGet<CertificateResponse>(
+		certificateUrl,
+		{},
+		{ revalidateOnFocus: false }
+	);
 
 	const certificateExpiry = useMemo(() => {
 		if (!certificateData?.certificateDate) {
@@ -102,9 +118,58 @@ const UptimeDetailsPage = () => {
 	const { data: checksData, isLoading: checksIsLoading } = useGet<ChecksResponse>(
 		checksUrl,
 		{},
-		{ keepPreviousData: true }
+		{ keepPreviousData: true, revalidateOnFocus: false }
 	);
 
+	const geoChecksUrl = useMemo(() => {
+		if (!monitorId || !supportsGeoCheck(monitor?.type) || !monitor?.geoCheckEnabled) {
+			return null;
+		}
+		const params = new URLSearchParams();
+		params.append("dateRange", dateRange);
+		params.append("continent", selectedLocation);
+		return `/monitors/${monitorId}/geo-checks?${params.toString()}`;
+	}, [monitorId, monitor?.type, monitor?.geoCheckEnabled, dateRange, selectedLocation]);
+
+	const { data: geoGroupedData } = useGet<GeoChecksResult>(
+		geoChecksUrl,
+		{},
+		{ keepPreviousData: true, revalidateOnFocus: false }
+	);
+
+	const geoGroupedChecks = geoGroupedData?.groupedGeoChecks ?? [];
+
+	// Fetch paginated geo checks for the table
+	const geoChecksTableUrl = useMemo(() => {
+		if (!monitorId || !supportsGeoCheck(monitor?.type) || !monitor?.geoCheckEnabled) {
+			return null;
+		}
+		const params = new URLSearchParams();
+		params.append("sortOrder", "desc");
+		params.append("dateRange", dateRange);
+		params.append("page", String(geoPage));
+		params.append("rowsPerPage", String(geoRowsPerPage));
+		return `/geo-checks/${monitorId}?${params.toString()}`;
+	}, [
+		monitorId,
+		monitor?.type,
+		monitor?.geoCheckEnabled,
+		dateRange,
+		geoPage,
+		geoRowsPerPage,
+	]);
+
+	const { data: geoChecksTableData } = useGet<FlatGeoChecksResponse>(
+		geoChecksTableUrl,
+		{},
+		{ keepPreviousData: true, revalidateOnFocus: false }
+	);
+
+	const geoChecksForTable = geoChecksTableData?.geoChecks ?? [];
+	const geoChecksCount = geoChecksTableData?.geoChecksCount ?? 0;
+
+	const geoLocations = monitor?.geoCheckLocations;
+
 	const checks = checksData?.checks ?? [];
 	const checksCount = checksData?.checksCount ?? 0;
 
@@ -127,6 +192,7 @@ const UptimeDetailsPage = () => {
 				dateRange={dateRange}
 				setDateRange={setDateRange}
 			/>
+
 			<Stack
 				direction={{ xs: "column", md: "row" }}
 				gap={theme.spacing(8)}
@@ -160,6 +226,31 @@ const UptimeDetailsPage = () => {
 				rowsPerPage={rowsPerPage}
 				setRowsPerPage={setRowsPerPage}
 			/>
+
+			{monitor?.geoCheckEnabled && (
+				<>
+					<Typography variant="h1">Location breakdown</Typography>
+					<HeaderGeoTabs
+						geoCheckEnabled={monitor?.geoCheckEnabled ?? false}
+						locations={geoLocations}
+						selectedLocation={selectedLocation}
+						onLocationChange={setSelectedLocation}
+					/>
+					<HistogramDetails
+						checks={geoGroupedChecks}
+						range={dateRange}
+					/>
+					<GeoChecksTable
+						geoChecks={geoChecksForTable}
+						count={geoChecksCount}
+						page={geoPage}
+						setPage={setGeoPage}
+						rowsPerPage={geoRowsPerPage}
+						setRowsPerPage={setGeoRowsPerPage}
+					/>
+					<GeoChecksMap geoChecks={geoChecksForTable} />
+				</>
+			)}
 		</BasePage>
 	);
 };

client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx

@@ -181,6 +181,7 @@ export const MonitorTable = ({
 						onClick={(e) => handleSort(e, "status")}
 						sx={{ cursor: "pointer" }}
 					>
+						<Box width={theme.spacing(8)} />
 						{t("common.table.headers.status")}
 						{renderSortIcon(sortField === "status")}
 					</Stack>
@@ -211,6 +212,7 @@ export const MonitorTable = ({
 						onClick={(e) => handleSort(e, "type")}
 						sx={{ cursor: "pointer" }}
 					>
+						<Box width={theme.spacing(8)} />
 						{t("common.table.headers.type")}
 						{renderSortIcon(sortField === "type")}
 					</Stack>

client/src/Pages/Uptime/Monitors/index.tsx

@@ -42,11 +42,11 @@ const UptimeMonitorsPage = () => {
 	const debouncedSearch = useDebounce<string>(search, 300);
 
 	// Convert filter selections to API filter values
-	// Status: "up" -> true, "down" -> false
+	// Status: pass "up"/"down" directly to the API
 	// State: "active" -> true, "paused" -> false
 	const toFilterStatus = useMemo(() => {
-		if (selectedStatus === "up") return "true";
-		if (selectedStatus === "down") return "false";
+		if (selectedStatus === "up") return "up";
+		if (selectedStatus === "down") return "down";
 		return undefined;
 	}, [selectedStatus]);
 
@@ -68,7 +68,9 @@ const UptimeMonitorsPage = () => {
 
 	// Default to all types when none selected
 	const effectiveTypes =
-		selectedTypes.length > 0 ? selectedTypes : ["http", "ping", "docker", "port", "game"];
+		selectedTypes.length > 0
+			? selectedTypes
+			: ["http", "ping", "docker", "port", "game", "grpc", "websocket"];
 
 	// Build URL for monitors with checks
 	const monitorsWithChecksUrl = useMemo(() => {

client/src/Types/Check.ts

@@ -1,3 +1,5 @@
+export const CHECK_TTL_SENTINEL = 366;
+
 export interface CheckMetadata {
 	monitorId: string;
 	teamId: string;
@@ -125,9 +127,6 @@ export interface Check {
 	timings?: CheckTimings;
 	statusCode: number;
 	message: string;
-	ack: boolean;
-	ackAt?: string | null;
-	expiry: string;
 	cpu?: CheckCpuInfo;
 	memory?: CheckMemoryInfo;
 	disk?: CheckDiskInfo[];
@@ -140,7 +139,6 @@ export interface Check {
 	seo?: number;
 	performance?: number;
 	audits?: CheckAudits;
-	__v: number;
 	createdAt: string;
 	updatedAt: string;
 }
@@ -160,14 +158,6 @@ export interface PageSpeedGroupedCheck {
 	totalChecks: number;
 }
 
-export interface GroupedGeoCheck {
-	bucketDate: string;
-	continent: string;
-	avgResponseTime: number;
-	totalChecks: number;
-	uptimePercentage: number;
-}
-
 export interface LatestCheck {
 	status: boolean;
 	responseTime: number;
@@ -244,7 +234,6 @@ export interface UptimeChecksResult {
 	groupedDownChecks: GroupedCheck[];
 	uptimePercentage: number;
 	avgResponseTime: number;
-	groupedGeoChecks?: GroupedGeoCheck[];
 }
 
 export interface ChecksSummary {
@@ -252,10 +241,7 @@ export interface ChecksSummary {
 	downChecks: number;
 }
 
-export type CheckSnapshot = Omit<
-	Check,
-	"metadata" | "ack" | "ackAt" | "expiry" | "__v" | "updatedAt"
-> & {
+export type CheckSnapshot = Omit<Check, "metadata" | "__v" | "updatedAt"> & {
 	originalResponseTime: number;
 };
 

client/src/Types/GeoCheck.ts

@@ -0,0 +1,80 @@
+export const GeoContinents = ["EU", "NA", "AS", "SA", "AF", "OC"] as const;
+export type GeoContinent = (typeof GeoContinents)[number];
+
+export interface GeoCheckMetadata {
+	monitorId: string;
+	teamId: string;
+	type: string;
+}
+
+export interface GeoCheckTimings {
+	total: number;
+	dns: number;
+	tcp: number;
+	tls: number;
+	firstByte: number;
+	download: number;
+}
+
+export interface GeoCheckLocation {
+	continent: GeoContinent;
+	region: string;
+	country: string;
+	state: string;
+	city: string;
+	longitude: number;
+	latitude: number;
+}
+
+export interface GeoCheckResult {
+	location: GeoCheckLocation;
+	status: boolean;
+	statusCode: number;
+	timings: GeoCheckTimings;
+}
+
+export interface GeoCheck {
+	id: string;
+	metadata: GeoCheckMetadata;
+	results: GeoCheckResult[];
+	expiry: string;
+	__v: number;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface FlatGeoCheck {
+	id: string;
+	monitorId: string;
+	teamId: string;
+	type: string;
+	location: GeoCheckLocation;
+	status: boolean;
+	statusCode: number;
+	timings: GeoCheckTimings;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface GroupedGeoCheck {
+	bucketDate: string;
+	continent: GeoContinent;
+	avgResponseTime: number;
+	totalChecks: number;
+	uptimePercentage: number;
+}
+
+export interface GeoChecksResult {
+	monitorType: string;
+	groupedGeoChecks: GroupedGeoCheck[];
+}
+
+export interface GeoChecksResponse {
+	geoChecks: GeoCheck[];
+	geoChecksCount: number;
+}
+
+export interface FlatGeoChecksResponse {
+	geoChecks: FlatGeoCheck[];
+	geoChecksCount: number;
+}

client/src/Types/Monitor.ts

@@ -1,5 +1,7 @@
 import type { GroupedCheck, CheckSnapshot } from "@/Types/Check";
 import type { PageSpeedGroupedCheck } from "@/Types/Check";
+import type { GeoContinent } from "@/Types/GeoCheck";
+export type { GeoContinent } from "@/Types/GeoCheck";
 
 export const MonitorTypes = [
 	"http",
@@ -9,10 +11,21 @@ export const MonitorTypes = [
 	"docker",
 	"port",
 	"game",
+	"grpc",
+	"websocket",
 	"unknown",
 ] as const;
 export type MonitorType = (typeof MonitorTypes)[number];
 
+export const GeoCheckSupportedTypes: readonly MonitorType[] = ["http", "ping"] as const;
+
+export const supportsGeoCheck = (type: MonitorType | undefined): boolean => {
+	if (!type) {
+		return false;
+	}
+	return GeoCheckSupportedTypes.includes(type);
+};
+
 export const MonitorStatuses = [
 	"up",
 	"down",
@@ -25,9 +38,6 @@ export type MonitorStatus = (typeof MonitorStatuses)[number];
 
 export type MonitorMatchMethod = "equal" | "include" | "regex" | "";
 
-export const GeoCheckLocations = ["EU", "NA", "AS", "SA", "AF", "OC"] as const;
-export type GeoCheckLocation = (typeof GeoCheckLocations)[number];
-
 export interface Monitor {
 	id: string;
 	userId: string;
@@ -61,9 +71,10 @@ export interface Monitor {
 	tempAlertCounter: number;
 	selectedDisks: string[];
 	gameId?: string;
+	grpcServiceName?: string;
 	group: string | null;
 	geoCheckEnabled?: boolean;
-	geoCheckLocations?: GeoCheckLocation[];
+	geoCheckLocations?: GeoContinent[];
 	geoCheckInterval?: number;
 	recentChecks: CheckSnapshot[];
 	createdAt: string;

client/src/Types/Notification.ts

@@ -5,6 +5,10 @@ export const NotificationChannels = [
 	"webhook",
 	"pager_duty",
 	"matrix",
+	"teams",
+	"telegram",
+	"pushover",
+	"twilio",
 ] as const;
 export type NotificationChannel = (typeof NotificationChannels)[number];
 
@@ -19,6 +23,8 @@ export interface Notification {
 	homeserverUrl?: string;
 	roomId?: string;
 	accessToken?: string;
+	accountSid?: string;
+	twilioPhoneNumber?: string;
 	createdAt: string;
 	updatedAt: string;
 }

client/src/Types/StatusPage.ts

@@ -1,10 +1,31 @@
-import type { Monitor } from "@/Types/Monitor";
+import type { Monitor, MonitorType } from "@/Types/Monitor";
+export type MonitorDisplayType = "uptime" | "infrastructure";
+
+export const MONITOR_TYPE_KEYS: Partial<Record<MonitorType, string>> = {
+	http: "pages.common.monitors.monitorTypes.optionHttp",
+	ping: "pages.common.monitors.monitorTypes.optionPing",
+	docker: "pages.common.monitors.monitorTypes.optionDocker",
+	port: "pages.common.monitors.monitorTypes.optionPort",
+	game: "pages.common.monitors.monitorTypes.optionGame",
+	grpc: "pages.common.monitors.monitorTypes.optionGrpc",
+	websocket: "pages.common.monitors.monitorTypes.optionWebSocket",
+	hardware: "pages.common.monitors.monitorTypes.optionHardware",
+	pagespeed: "pages.common.monitors.monitorTypes.optionPagespeed",
+};
+
+export const getMonitorTypeLabel = (
+	type: MonitorType,
+	t: (key: string) => string
+): string => {
+	const key = MONITOR_TYPE_KEYS[type];
+	return key ? t(key) : type;
+};
 
 export interface StatusPage {
 	id: string;
 	userId: string;
 	teamId: string;
-	type: string;
+	type: MonitorDisplayType[];
 	companyName: string;
 	url: string;
 	timezone?: string;
@@ -20,6 +41,7 @@ export interface StatusPage {
 	showCharts: boolean;
 	showUptimePercentage: boolean;
 	showAdminLoginLink: boolean;
+	showInfrastructure: boolean;
 	customCSS: string;
 	createdAt: string;
 	updatedAt: string;

client/src/Types/env.d.ts

@@ -4,6 +4,7 @@ declare const __APP_VERSION__: string;
 
 interface ImportMetaEnv {
 	readonly VITE_APP_API_V2_BASE_URL?: string;
+	readonly VITE_APP_LOG_LEVEL?: "debug" | "info" | "warn" | "error";
 }
 
 interface ImportMeta {
@@ -17,3 +18,8 @@ declare module "*.svg?react" {
 	>;
 	export default ReactComponent;
 }
+
+declare module "*.css" {
+	const content: string;
+	export default content;
+}

client/src/Utils/MonitorUtils.ts

@@ -8,6 +8,8 @@ export const getMonitorPath = (type: MonitorType): string => {
 		port: "uptime",
 		ping: "uptime",
 		game: "uptime",
+		grpc: "uptime",
+		websocket: "uptime",
 		unknown: "uptime",
 		docker: "uptime",
 		hardware: "infrastructure",

client/src/Utils/Theme/Palette.ts

@@ -12,6 +12,8 @@ export const typographyLevels = {
 export const colors = {
 	gray200: "#EFEFEF",
 	gray700: "#313131",
+	gray900: "#151518",
+	gray850: "#1c1c21",
 	blueBlueWave: "#1570EF",
 };
 
@@ -31,4 +33,8 @@ export const darkPalette = {
 	secondary: {
 		main: colors.gray700,
 	},
+	background: {
+		default: colors.gray900,
+		paper: colors.gray850,
+	},
 };

client/src/Utils/Theme/constants.ts

@@ -0,0 +1,17 @@
+export const SPACING = {
+	XS: 0.5,
+	SM: 1,
+	MD: 1.5,
+	LG: 2,
+	XL: 2.5,
+	XXL: 3,
+} as const;
+
+export const LAYOUT = {
+	XS: 4,
+	SM: 6,
+	MD: 8,
+	LG: 10,
+	XL: 12,
+	XXL: 16,
+} as const;

client/src/Utils/logger.ts

@@ -0,0 +1,137 @@
+import type { LogLevel } from "@/Types/Log";
+
+interface LogContext {
+	[key: string]: any;
+}
+
+const LOG_LEVEL_PRIORITY: Record<LogLevel, number> = {
+	debug: 0,
+	info: 1,
+	warn: 2,
+	error: 3,
+};
+
+interface ErrorLogData {
+	timestamp: string;
+	level: LogLevel;
+	message: string;
+	error?: {
+		message: string;
+		name: string;
+		stack?: string;
+	};
+	context?: LogContext;
+	url: string;
+	userAgent: string;
+}
+
+const configuredLevel: LogLevel = import.meta.env.VITE_APP_LOG_LEVEL || "error";
+const configuredPriority = LOG_LEVEL_PRIORITY[configuredLevel];
+
+const shouldLog = (level: LogLevel): boolean => {
+	return LOG_LEVEL_PRIORITY[level] >= configuredPriority;
+};
+
+const formatError = (error?: Error) => {
+	if (!error) return undefined;
+
+	return {
+		message: error.message,
+		name: error.name,
+		stack: error.stack,
+	};
+};
+
+const createLogData = (
+	level: LogLevel,
+	message: string,
+	error?: Error,
+	context?: LogContext
+): ErrorLogData => {
+	return {
+		timestamp: new Date().toISOString(),
+		level,
+		message,
+		error: formatError(error),
+		context,
+		url: window.location.href,
+		userAgent: navigator.userAgent,
+	};
+};
+
+const error = (message: string, error?: Error, context?: LogContext): void => {
+	if (!shouldLog("error")) return;
+
+	const logData = createLogData("error", message, error, context);
+
+	if (configuredLevel === "debug") {
+		console.group(`ERROR: ${message}`);
+		if (error) {
+			console.error("Error:", error);
+		}
+		if (context && Object.keys(context).length > 0) {
+			console.log("Context:", context);
+		}
+		console.log("URL:", logData.url);
+		console.log("Timestamp:", logData.timestamp);
+		console.groupEnd();
+	} else {
+		console.error(JSON.stringify(logData));
+	}
+};
+
+const warn = (message: string, context?: LogContext): void => {
+	if (!shouldLog("warn")) return;
+
+	const logData = createLogData("warn", message, undefined, context);
+
+	if (configuredLevel === "debug") {
+		console.group(`WARN: ${message}`);
+		if (context && Object.keys(context).length > 0) {
+			console.log("Context:", context);
+		}
+		console.groupEnd();
+	} else {
+		console.warn(JSON.stringify(logData));
+	}
+};
+
+const debug = (message: string, data?: any): void => {
+	if (!shouldLog("debug")) return;
+
+	console.group(`DEBUG: ${message}`);
+	if (data !== undefined) {
+		console.log(data);
+	}
+	console.groupEnd();
+};
+
+const info = (message: string, data?: any): void => {
+	if (!shouldLog("info")) return;
+
+	if (configuredLevel === "debug") {
+		console.log(`INFO: ${message}`, data);
+	} else {
+		const logData = {
+			timestamp: new Date().toISOString(),
+			level: "info" as LogLevel,
+			message,
+			data,
+		};
+		console.log(JSON.stringify(logData));
+	}
+};
+
+export interface ILogger {
+	error(message: string, error?: Error, context?: LogContext): void;
+	warn(message: string, context?: LogContext): void;
+	debug(message: string, data?: any): void;
+	info(message: string, data?: any): void;
+}
+
+export const logger: ILogger = {
+	error,
+	warn,
+	debug,
+	info,
+};

client/src/Validation/monitor.ts

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { GeoContinents } from "@/Types/GeoCheck";
 
 // URL schema with custom error message
 const urlSchema = z.url({ message: "Please enter a valid URL" });
@@ -21,8 +22,11 @@ const baseSchema = z.object({
 		.min(1, "Incident percentage must be at least 1")
 		.max(100, "Incident percentage must be at most 100"),
 	geoCheckEnabled: z.boolean().optional(),
-	geoCheckLocations: z.array(z.enum(["EU", "NA", "AS", "SA", "AF", "OC"])).optional(),
-	geoCheckInterval: z.number().min(5, "Interval must be at least 5 minutes").optional(),
+	geoCheckLocations: z.array(z.enum(GeoContinents)).optional(),
+	geoCheckInterval: z
+		.number()
+		.min(300000, "Interval must be at least 5 minutes")
+		.optional(),
 });
 
 // HTTP monitor schema
@@ -69,6 +73,18 @@ const gameSchema = baseSchema.extend({
 	gameId: z.string().min(1, "Game type is required"),
 });
 
+// gRPC monitor schema
+const grpcSchema = baseSchema.extend({
+	type: z.literal("grpc"),
+	url: z.string().min(1, "Host is required"),
+	port: z
+		.number()
+		.min(1, "Port must be at least 1")
+		.max(65535, "Port must be at most 65535"),
+	grpcServiceName: z.string().optional(),
+	ignoreTlsErrors: z.boolean(),
+});
+
 // PageSpeed monitor schema
 const pagespeedSchema = baseSchema.extend({
 	type: z.literal("pagespeed"),
@@ -99,6 +115,13 @@ const hardwareSchema = baseSchema.extend({
 	selectedDisks: z.array(z.string()),
 });
 
+// WebSocket monitor schema
+const websocketSchema = baseSchema.extend({
+	type: z.literal("websocket"),
+	url: z.string().min(1, "WebSocket URL is required"),
+	ignoreTlsErrors: z.boolean(),
+});
+
 // Discriminated union of all monitor types
 export const monitorSchema = z.discriminatedUnion("type", [
 	httpSchema,
@@ -106,8 +129,10 @@ export const monitorSchema = z.discriminatedUnion("type", [
 	portSchema,
 	dockerSchema,
 	gameSchema,
+	grpcSchema,
 	pagespeedSchema,
 	hardwareSchema,
+	websocketSchema,
 ]);
 
 export type MonitorFormData = z.infer<typeof monitorSchema>;
@@ -119,6 +144,8 @@ export {
 	portSchema,
 	dockerSchema,
 	gameSchema,
+	grpcSchema,
 	pagespeedSchema,
 	hardwareSchema,
+	websocketSchema,
 };

client/src/Validation/notifications.ts

@@ -45,6 +45,31 @@ const matrixSchema = baseSchema.extend({
 	accessToken: z.string().min(1, "Access token is required"),
 });
 
+const teamsSchema = baseSchema.extend({
+	type: z.literal("teams"),
+	address: z.string().min(1, "Webhook URL is required").url("Please enter a valid URL"),
+});
+
+const telegramSchema = baseSchema.extend({
+	type: z.literal("telegram"),
+	address: z.string().min(1, "Chat ID is required"),
+	accessToken: z.string().min(1, "Bot token is required"),
+});
+
+const pushoverSchema = baseSchema.extend({
+	type: z.literal("pushover"),
+	address: z.string().min(1, "User key is required"),
+	accessToken: z.string().min(1, "App token is required"),
+});
+
+const twilioSchema = baseSchema.extend({
+	type: z.literal("twilio"),
+	accountSid: z.string().min(1, "Account SID is required"),
+	accessToken: z.string().min(1, "Auth token is required"),
+	phone: z.string().min(1, "Recipient phone number is required"),
+	twilioPhoneNumber: z.string().min(1, "Twilio phone number is required"),
+});
+
 export const notificationSchema = z.discriminatedUnion("type", [
 	emailSchema,
 	slackSchema,
@@ -52,6 +77,10 @@ export const notificationSchema = z.discriminatedUnion("type", [
 	webhookSchema,
 	pagerDutySchema,
 	matrixSchema,
+	teamsSchema,
+	telegramSchema,
+	pushoverSchema,
+	twilioSchema,
 ]);
 
 export type NotificationFormData = z.infer<typeof notificationSchema>;

client/src/Validation/settings.ts

@@ -1,3 +1,4 @@
+import { CHECK_TTL_SENTINEL } from "@/Types/Check";
 import { z } from "zod";
 
 export const settingsSchema = z.object({
@@ -6,68 +7,50 @@ export const settingsSchema = z.object({
 	systemEmailRejectUnauthorized: z.boolean(),
 	systemEmailConnectionHost: z
 		.string()
-		.transform((val) => (val.trim() === "" ? undefined : val.trim()))
+		.transform((val) => (val.trim() === "" ? null : val.trim()))
 		.optional(),
 	systemEmailSecure: z.boolean().optional(),
 	systemEmailPool: z.boolean().optional(),
 	showURL: z.boolean().optional(),
-	checkTTL: z.number().int().min(1, "Please enter a value").max(365, "Maximum 365 days"),
+	checkTTL: z
+		.number()
+		.int()
+		.min(1, "Please enter a value")
+		.max(CHECK_TTL_SENTINEL, `Maximum ${CHECK_TTL_SENTINEL}`),
 	pagespeedApiKey: z
 		.string()
-		.transform((val) => (val.trim() === "" ? undefined : val.trim()))
+		.transform((val) => (val.trim() === "" ? null : val.trim()))
 		.optional(),
 	systemEmailHost: z
 		.string()
 		.regex(/^[a-zA-Z0-9.-]*$/, "Invalid hostname or IP address")
-		.transform((val) => (val.trim() === "" ? undefined : val.trim()))
+		.transform((val) => (val.trim() === "" ? null : val.trim()))
 		.optional(),
 	systemEmailPort: z.number().int().min(1).max(65535).optional(),
 	systemEmailAddress: z
-		.string()
 		.email("Please enter a valid email address")
 		.or(z.literal(""))
-		.transform((val) => (val === "" ? undefined : val.toLowerCase().trim()))
+		.transform((val) => (val === "" ? null : val.toLowerCase().trim()))
 		.optional(),
 	systemEmailUser: z
 		.string()
-		.transform((val) => (val.trim() === "" ? undefined : val.trim()))
+		.transform((val) => (val.trim() === "" ? null : val.trim()))
 		.optional(),
 	systemEmailPassword: z
 		.string()
-		.transform((val) => (val.trim() === "" ? undefined : val.trim()))
+		.transform((val) => (val.trim() === "" ? null : val.trim()))
 		.optional(),
 	systemEmailTLSServername: z
 		.string()
-		.transform((val) => (val.trim() === "" ? undefined : val.trim()))
-		.optional(),
-	globalThresholds: z
-		.object({
-			cpu: z
-				.number()
-				.int()
-				.min(1, "Please enter a valid value")
-				.max(100, "Maximum value is 100")
-				.optional(),
-			memory: z
-				.number()
-				.int()
-				.min(1, "Please enter a valid value")
-				.max(100, "Maximum value is 100")
-				.optional(),
-			disk: z
-				.number()
-				.int()
-				.min(1, "Please enter a valid value")
-				.max(100, "Maximum value is 100")
-				.optional(),
-			temperature: z
-				.number()
-				.int()
-				.min(1, "Please enter a valid value")
-				.max(150, "Maximum value is 150")
-				.optional(),
-		})
+		.transform((val) => (val.trim() === "" ? null : val.trim()))
 		.optional(),
+	globalThresholds: z.object({
+		cpu: z.number().int().min(1).max(100),
+		memory: z.number().int().min(1).max(100),
+		disk: z.number().int().min(1).max(100),
+		temperature: z.number().int().min(1).max(150),
+	}),
 });
 
+export type SettingsFormInput = z.input<typeof settingsSchema>;
 export type SettingsFormData = z.infer<typeof settingsSchema>;

client/src/Validation/statusPage.ts

@@ -14,12 +14,16 @@ export const statusPageSchema = z.object({
 			"URL can only contain lowercase letters, numbers, and hyphens"
 		),
 	timezone: z.string().optional(),
+	type: z
+		.array(z.enum(["uptime", "infrastructure"]))
+		.min(1, "At least one type is required"),
 	color: z.string().min(1, "Color is required"),
 	monitors: z.array(z.string()).min(1, "At least one monitor is required"),
 	isPublished: z.boolean(),
 	showCharts: z.boolean(),
 	showUptimePercentage: z.boolean(),
 	showAdminLoginLink: z.boolean(),
+	showInfrastructure: z.boolean(),
 	customCSS: z.string().optional(),
 	logo: z
 		.object({

client/src/Validation/validation.js

@@ -288,7 +288,13 @@ const logoImageValidation = joi
 	.optional(); // Make entire object optional
 
 const statusPageValidation = joi.object({
-	type: joi.string().valid("uptime").required(),
+	type: joi
+		.alternatives()
+		.try(
+			joi.string().valid("uptime", "infrastructure"),
+			joi.array().items(joi.string().valid("uptime", "infrastructure"))
+		)
+		.required(),
 	isPublished: joi.bool(),
 	companyName: joi
 		.string()
@@ -317,6 +323,7 @@ const statusPageValidation = joi.object({
 	showUptimePercentage: joi.boolean(),
 	showCharts: joi.boolean(),
 	showAdminLoginLink: joi.boolean(),
+	showInfrastructure: joi.boolean(),
 });
 
 const settingsValidation = joi.object({

client/src/locales/en.json

@@ -45,7 +45,9 @@
 			"removeMonitors": "Remove monitors",
 			"sendTestEmail": "Send test email",
 			"exportToJSON": "Export to JSON",
-			"importFromJSON": "Import from JSON"
+			"importFromJSON": "Import from JSON",
+			"clearFilters": "Clear filters",
+			"removeUser": "Remove user"
 		},
 		"charts": {
 			"labels": {
@@ -115,7 +117,8 @@
 				"type": "Type",
 				"url": "Url",
 				"interval": "Interval",
-				"active": "Active"
+				"active": "Active",
+				"responseTime": "Response time"
 			}
 		}
 	},
@@ -340,6 +343,7 @@
 			"register": {
 				"title": "Welcome back to Checkmate!",
 				"subtitle": "Sign up to get started",
+				"setupNotice": "This page is only available during initial setup. Once a super admin is registered, additional users can be invited from team settings.",
 				"submit": "Register"
 			},
 			"forgotPassword": {
@@ -372,8 +376,8 @@
 			"table": {
 				"empty": "No down checks in this time range",
 				"headers": {
-					"dateTime": "Date & time",
-					"statusCode": "Status code"
+					"statusCode": "Status code",
+					"location": "Location"
 				}
 			}
 		},
@@ -394,16 +398,28 @@
 					"activeFor": "Active for",
 					"certificateExpiry": "Certificate expiry",
 					"lastCheck": "Last check",
-					"lastResponseTime": "Last response time"
+					"lastResponseTime": "Last response time",
+					"serviceIsDown": "Service is down"
 				},
 				"status": {
 					"down": "down",
-					"breached": "breached",
+					"breached": "threshold exceeded",
 					"initializing": "initializing",
 					"maintenance": "maintenance",
 					"paused": "paused",
 					"total": "total",
 					"up": "up"
+				},
+				"monitorTypes": {
+					"optionDocker": "Docker",
+					"optionGame": "Game",
+					"optionHttp": "HTTP(S)",
+					"optionPing": "Ping",
+					"optionPort": "Port",
+					"optionPagespeed": "PageSpeed",
+					"optionHardware": "Infrastructure",
+					"optionGrpc": "gRPC",
+					"optionWebSocket": "WebSocket"
 				}
 			}
 		},
@@ -431,31 +447,6 @@
 					},
 					"title": "Advanced settings"
 				},
-				"geoChecks": {
-					"title": "Geo-distributed checks",
-					"description": "Run checks from multiple geographic locations to monitor global availability and performance.",
-					"option": {
-						"enabled": {
-							"label": "Enable geo-distributed checks"
-						},
-						"locations": {
-							"label": "Locations",
-							"placeholder": "Select locations",
-							"options": {
-								"EU": "Europe",
-								"NA": "North America",
-								"AS": "Asia",
-								"SA": "South America",
-								"AF": "Africa",
-								"OC": "Oceania"
-							}
-						},
-						"interval": {
-							"label": "Check interval (minutes)",
-							"helper": "Minimum 5 minutes between geo checks"
-						}
-					}
-				},
 				"frequency": {
 					"description": "How often do you want to check the status of this monitor?",
 					"option": {
@@ -506,6 +497,14 @@
 						"port": {
 							"label": "Port to monitor",
 							"placeholder": 80
+						},
+						"grpcServiceName": {
+							"label": "Service name",
+							"placeholder": "e.g. my.service.v1 (leave empty for overall health)"
+						},
+						"wsUrl": {
+							"label": "WebSocket URL",
+							"placeholder": "wss://example.com/socket"
 						}
 					},
 					"title": "General settings",
@@ -516,6 +515,8 @@
 						"docker": "Enter the Docker container name or ID. You can use either the container name (e.g., my-app) or the container ID (full 64-char ID or short ID).",
 						"game": "Enter the IP address or hostname and the port number to ping (e.g., 192.168.1.100 or example.com) and choose game type.",
 						"pagespeed": "Track page load performance, Core Web Vitals, and optimization scores for your website.",
+						"grpc": "Enter the hostname and port of the gRPC server, optionally specify a service name for the health check, and add a display name.",
+						"websocket": "Enter the WebSocket URL to monitor (e.g., wss://example.com/socket) and add a display name.",
 						"hardware": "Monitor CPU, memory, disk usage, and temperature for your infrastructure."
 					}
 				},
@@ -546,15 +547,12 @@
 				},
 				"type": {
 					"description": "Select the type of check to perform",
-					"optionDocker": "Docker",
 					"optionDockerDescription": "Use Docker to monitor if a container is running.",
-					"optionGame": "Game",
 					"optionGameDescription": "Monitor if a specific game server is online.",
-					"optionHttp": "HTTP(S)",
+					"optionGrpcDescription": "Monitor gRPC services using the standard Health Checking Protocol.",
+					"optionWebSocketDescription": "Monitor WebSocket endpoints for connection health and response time.",
 					"optionHttpDescription": "Use HTTP(S) to monitor your website or API endpoint.",
-					"optionPing": "Ping",
 					"optionPingDescription": "Use ICMP Ping to monitor if a server is online.",
-					"optionPort": "Port",
 					"optionPortDescription": "Monitor if a specific port on a server is open.",
 					"title": "Type"
 				},
@@ -576,6 +574,36 @@
 						}
 					}
 				},
+				"geoChecks": {
+					"title": "Geo-Distributed Checks",
+					"description": "Run checks from multiple geographic locations to monitor global availability and performance.",
+					"option": {
+						"enabled": {
+							"label": "Enable geo-distributed checks"
+						},
+						"locations": {
+							"label": "Locations",
+							"placeholder": "Select locations",
+							"options": {
+								"EU": "Europe",
+								"NA": "North America",
+								"AS": "Asia",
+								"SA": "South America",
+								"AF": "Africa",
+								"OC": "Oceania"
+							}
+						},
+						"interval": {
+							"label": "Check interval",
+							"value": {
+								"fiveMinutes": "5 minutes",
+								"tenMinutes": "10 minutes",
+								"fifteenMinutes": "15 minutes",
+								"thirtyMinutes": "30 minutes"
+							}
+						}
+					}
+				},
 				"url": {
 					"title": "Monitor IP/URL on Status Page",
 					"description": "Display the IP address or URL of monitor on the public Status page. If it's disabled, only the monitor name will be shown to protect sensitive information.",
@@ -605,6 +633,12 @@
 					"title": "Roles",
 					"description": "Assign roles to the user. Multiple roles can be selected."
 				}
+			},
+			"dialog": {
+				"removeUser": {
+					"title": "Remove user",
+					"content": "Are you sure you want to remove {{name}} from your team? This action cannot be undone."
+				}
 			}
 		},
 		"incidents": {
@@ -645,7 +679,6 @@
 			},
 			"filters": {
 				"allMonitors": "All monitors",
-				"clearFilters": "Clear filters",
 				"monitor": "Monitor",
 				"resolutionType": "Resolution type",
 				"resolutionTypes": {
@@ -920,6 +953,34 @@
 					"description": "Select the type of notification channel to create.",
 					"optionType": "Type",
 					"title": "Channel type"
+				},
+				"telegram": {
+					"title": "Telegram configuration",
+					"description": "Configure your Telegram bot to send notifications.",
+					"optionBotToken": "Bot token",
+					"placeholderBotToken": "123456789:ABCdefGhIJKlmNoPQRsTUVwxyZ",
+					"optionChatId": "Chat ID",
+					"placeholderChatId": "-1001234567890"
+				},
+				"pushover": {
+					"title": "Pushover configuration",
+					"description": "Configure Pushover to receive push notifications on your devices.",
+					"optionAppToken": "Application API token",
+					"placeholderAppToken": "azGDORePK8gMaC0QOYAMyEEuzJnyUi",
+					"optionUserKey": "User key",
+					"placeholderUserKey": "uQiRzpo4DXghDmr9QzzfQu27cmVRsG"
+				},
+				"twilio": {
+					"title": "Twilio SMS configuration",
+					"description": "Configure Twilio to send SMS notifications to a phone number.",
+					"optionAccountSid": "Account SID",
+					"placeholderAccountSid": "ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
+					"optionAuthToken": "Auth token",
+					"placeholderAuthToken": "your_auth_token",
+					"optionFromNumber": "From number (Twilio)",
+					"placeholderFromNumber": "+15551234567",
+					"optionToNumber": "To number (recipient)",
+					"placeholderToNumber": "+15559876543"
 				}
 			},
 			"table": {
@@ -1014,7 +1075,7 @@
 				},
 				"stats": {
 					"title": "Monitor history",
-					"description": "Define how long you want to retain historical data. You can also clear all existing data.",
+					"description": "Clear all monitoring history and statistics for your team. This action is irreversible.",
 					"option": {
 						"clear": {
 							"label": "Clear all stats. This is irreversible."
@@ -1025,6 +1086,16 @@
 						"description": "This cannot be undone"
 					}
 				},
+				"retention": {
+					"title": "Check retention",
+					"description": "Set how long check data is retained before being automatically cleaned up.",
+					"option": {
+						"days": {
+							"label": "Retention period (days)",
+							"unlimited": "Unlimited"
+						}
+					}
+				},
 				"thresholds": {
 					"title": "Global Thresholds",
 					"description": "Set global CPU, Memory, Disk, and Temperature thresholds for infrastructure monitoring. These apply to all hardware monitors unless overridden.",
@@ -1121,6 +1192,9 @@
 				"about": {
 					"title": "About",
 					"developedBy": "Developed by Bluewave Labs"
+				},
+				"validation": {
+					"errorMessage": "Please fix the following validation errors:"
 				}
 			}
 		},
@@ -1138,12 +1212,38 @@
 			},
 			"monitorsList": {
 				"chartTypeHeatmap": "Heatmap",
-				"chartTypeHistogram": "Histogram"
+				"chartTypeHistogram": "Histogram",
+				"noData": "No data available",
+				"infrastructure": {
+					"title": "Infrastructure",
+					"cpu": "CPU",
+					"memory": "RAM",
+					"memoryText": "Memory",
+					"disk": "Disk",
+					"usage": "Usage",
+					"used": "Used",
+					"total": "Total"
+				},
+				"uptime": {
+					"title": "Uptime",
+					"responseTime": "Response time"
+				}
 			},
 			"statusBar": {
-				"allDown": "All systems are down",
 				"allUp": "All systems operational",
+				"allBreached": "All systems have exceeded thresholds",
+				"allMaintenance": "All systems are under maintenance",
+				"allDown": "All systems are down",
+				"allPaused": "All systems are paused",
+				"allInitializing": "All systems are initializing",
+				"breachedAndDown": "Some systems have exceeded thresholds and are down",
+				"breached": "Some systems have exceeded thresholds",
 				"degraded": "Some systems are experiencing issues",
+				"maintenanceAndDown": "Some systems are down during maintenance",
+				"maintenance": "Some systems are under maintenance",
+				"partiallyPaused": "Some systems are paused",
+				"initializing": "Some systems are initializing",
+				"noMonitors": "No monitors have been configured",
 				"unknown": "Unable to determine system status"
 			},
 			"table": {
@@ -1230,6 +1330,9 @@
 						},
 						"showAdminLoginLink": {
 							"label": "Show admin login link"
+						},
+						"showInfrastructure": {
+							"label": "Show infrastructure metrics"
 						}
 					}
 				}

client/vite.config.ts

@@ -3,11 +3,13 @@ import react from "@vitejs/plugin-react";
 import svgr from "vite-plugin-svgr";
 import path from "path";
 import { fileURLToPath } from "url";
+import { readFileSync } from "fs";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 export default defineConfig(({}) => {
-	let version = "3.4.0";
+	const pkg = JSON.parse(readFileSync(path.resolve(__dirname, "package.json"), "utf-8"));
+	const version = pkg.version;
 
 	return {
 		base: "/",

docker/coolify/build_images.bat

@@ -0,0 +1,36 @@
+@echo off
+setlocal enabledelayedexpansion
+
+REM Change directory to root Server directory for correct Docker Context
+cd /d "%~dp0"
+cd ../..
+
+REM Define service names and their corresponding Dockerfiles
+set services[0]=bluewaveuptime/uptime_client
+set dockerfiles[0]=.\docker\coolify\client.Dockerfile
+
+set services[1]=bluewaveuptime/uptime_database_mongo
+set dockerfiles[1]=.\docker\coolify\mongoDB.Dockerfile
+
+set services[2]=bluewaveuptime/uptime_redis
+set dockerfiles[2]=.\docker\coolify\redis.Dockerfile
+
+set services[3]=bluewaveuptime/uptime_server
+set dockerfiles[3]=.\docker\coolify\server.Dockerfile
+
+REM Loop through each service and build the corresponding image
+for /L %%i in (0,1,2,3) do (
+    set service=!services[%%i]!
+    set dockerfile=!dockerfiles[%%i]!
+
+    docker build -f "!dockerfile!" -t "!service!" .
+
+    REM Check if the build succeeded
+    if errorlevel 1 (
+        echo Error building !service! image. Exiting...
+        exit /b 1
+    )
+)
+
+echo All images built successfully
+exit /b 0

docker/coolify/build_images.sh

@@ -1,14 +1,14 @@
 #!/bin/bash
 # Change directory to root Server directory for correct Docker Context
 cd "$(dirname "$0")"
-cd ../../../
+cd ../../
 
 # Define an array of services and their Dockerfiles
 declare -A services=(
-  ["bluewaveuptime/uptime_client"]="./server/docker/dist/client.Dockerfile"
-  ["bluewaveuptime/uptime_database_mongo"]="./server/docker/dist/mongoDB.Dockerfile"
-  ["bluewaveuptime/uptime_redis"]="./server/docker/dist/redis.Dockerfile"
-  ["bluewaveuptime/uptime_server"]="./server/docker/dist/server.Dockerfile"
+  ["bluewaveuptime/uptime_client"]="./docker/coolify/client.Dockerfile"
+  ["bluewaveuptime/uptime_database_mongo"]="./docker/coolify/mongoDB.Dockerfile"
+  ["bluewaveuptime/uptime_redis"]="./docker/coolify/redis.Dockerfile"
+  ["bluewaveuptime/uptime_server"]="./docker/coolify/server.Dockerfile"
 )
 
 # Loop through each service and build the corresponding image