diff --git a/docs/widgets.md b/docs/widgets.md
index 940e3dd8..fabae2aa 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -66,6 +66,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Gluetun VPN Info](#gluetun-vpn-info)
   - [Drone CI Build](#drone-ci-builds)
   - [Linkding](#linkding)
+  - [Uptime Kuma](£uptime-kuma)
 - **[System Resource Monitoring](#system-resource-monitoring)**
   - [CPU Usage Current](#current-cpu-usage)
   - [CPU Usage Per Core](#cpu-usage-per-core)
@@ -2113,7 +2114,9 @@ This will show the list of nodes.
       token_name: dashy
       token_uuid: bfb152df-abcd-abcd-abcd-ccb95a472d01
 ```
+
 This will show the list of VMs, with a title and a linked fotter, hiding VM templates.
+
 ```yaml
   - type: proxmox-lists
     useProxy: true 
@@ -2130,11 +2133,7 @@ This will show the list of VMs, with a title and a linked fotter, hiding VM temp
       footer_as_link: true
       hide_templates: 1
 ```
-#### Troubleshooting
-- **404 Error in development mode**: The error might disappear in production mode `yarn start`
-- **500 Error in production mode**: Try adding the certificate authority (CA) certificate of your Proxmox host to Node.js. 
-  - Download the Proxmox CA certificate to your Dashy host.
-  - Export environment variable `NODE_EXTRA_CA_CERTS` and set its value to the path of the downloaded CA certificate. Example:  `export NODE_EXTRA_CA_CERTS=/usr/local/share/ca-certificates/devlab_ca.pem`
+
 #### Info
 
 - **CORS**: 🟠 Proxied
@@ -2143,6 +2142,12 @@ This will show the list of VMs, with a title and a linked fotter, hiding VM temp
 - **Host**: Self-Hosted (see [Proxmox Virtual Environment](https://proxmox.com/en/proxmox-ve))
 - **Privacy**: _See [Proxmox's Privacy Policy](https://proxmox.com/en/privacy-policy)_
 
+#### Troubleshooting
+- **404 Error in development mode**: The error might disappear in production mode `yarn start`
+- **500 Error in production mode**: Try adding the certificate authority (CA) certificate of your Proxmox host to Node.js. 
+  - Download the Proxmox CA certificate to your Dashy host.
+  - Export environment variable `NODE_EXTRA_CA_CERTS` and set its value to the path of the downloaded CA certificate. Example:  `export NODE_EXTRA_CA_CERTS=/usr/local/share/ca-certificates/devlab_ca.pem`
+
 ---
 
 ### Sabnzbd
@@ -2285,6 +2290,37 @@ Linkding is a self-hosted bookmarking service, which has a clean interface and i
 
 ---
 
+### Uptime Kuma
+
+[Uptime Kuma](https://github.com/louislam/uptime-kuma) is an easy-to-use self-hosted monitoring tool.
+
+#### Options
+
+| **Field**    | **Type** | **Required** | **Description**                                                          |
+| ------------ | -------- | ------------ | ------------------------------------------------------------------------ |
+| **`url`**    | `string` | Required     | The URL of the Uptime Kuma instance                                      |
+| **`apiKey`** | `string` | Required     | The API key (see https://github.com/louislam/uptime-kuma/wiki/API-Keys). |
+
+#### Example
+
+```yaml
+- type: uptime-kuma
+  useProxy: true
+  options:
+    apiKey: uk2_99H0Yd3I2pPNIRfn0TqBFu4g5q85R1Mh75yZzw6H
+    url: http://192.168.1.106:3691/metrics
+```
+
+#### Info
+
+- **CORS**: 🟢 Enabled
+- **Auth**: 🟢 Required
+- **Price**: 🟢 Free
+- **Host**: Self-Hosted (see [Uptime Kuma](https://github.com/louislam/uptime-kuma) ))
+- **Privacy**: _See [Uptime Kuma](https://github.com/louislam/uptime-kuma)_
+
+---
+
 ## System Resource Monitoring
 
 ### Glances
diff --git a/src/components/Widgets/UptimeKuma.vue b/src/components/Widgets/UptimeKuma.vue
new file mode 100644
index 00000000..b58c1d08
--- /dev/null
+++ b/src/components/Widgets/UptimeKuma.vue
@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <template v-if="monitors">
+      <div v-for="(monitor, index) in monitors" :key="index" class="item-wrapper">
+        <div class="item monitor-row">
+          <div class="title-title"><span class="text">{{ monitor.name }}</span></div>
+          <div class="monitors-container">
+            <div class="status-container">
+              <span class="status-pill" :class="[monitor.statusClass]">{{ monitor.status }}</span>
+            </div>
+            <div class="status-container">
+              <span class="response-time">{{ monitor.responseTime }}ms</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="errorMessage">
+      <div class="error-message">
+        <span class="text">{{ errorMessage }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+/**
+ * A simple example which you can use as a template for creating your own widget.
+ * Takes two optional parameters (`text` and `count`), and fetches a list of images
+ * from dummyapis.com, then renders the results to the UI.
+ */
+import WidgetMixin from '@/mixins/WidgetMixin';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      monitors: null,
+      errorMessage: null,
+      errorMessageConstants: {
+        missingApiKey: 'No API key set',
+        missingUrl: 'No URL set',
+      },
+    };
+  },
+
+  mounted() {
+    this.fetchData();
+  },
+  computed: {
+    /* Get API key for access to instance */
+    apiKey() {
+      const { apiKey } = this.options;
+
+      return apiKey;
+    },
+    /* Get instance URL */
+    url() {
+      const { url } = this.options;
+
+      return url;
+    },
+    /* Create authorisation header for the instance from the apiKey */
+    authHeaders() {
+      if (!this.options.apiKey) {
+        return {};
+      }
+      const encoded = window.btoa(`:${this.options.apiKey}`);
+      return { Authorization: `Basic ${encoded}` };
+    },
+  },
+  methods: {
+    /* The update() method extends mixin, used to update the data.
+     * It's called by parent component, when the user presses update
+     */
+    update() {
+      this.startLoading();
+      this.fetchData();
+    },
+    /* Make the data request to the computed API endpoint */
+    fetchData() {
+      const { authHeaders, url } = this;
+
+      if (!this.optionsValid({ authHeaders, url })) {
+        return;
+      }
+
+      this.makeRequest(url, authHeaders)
+        .then(this.processData);
+    },
+    /* Convert API response data into a format to be consumed by the UI */
+    processData(response) {
+      const monitorRows = this.getMonitorRows(response);
+
+      const monitors = new Map();
+
+      for (let index = 0; index < monitorRows.length; index += 1) {
+        const row = monitorRows[index];
+        this.processRow(row, monitors);
+      }
+
+      this.monitors = Array.from(monitors.values());
+    },
+    getMonitorRows(response) {
+      return response.split('\n').filter(row => row.startsWith('monitor_'));
+    },
+    processRow(row, monitors) {
+      const dataType = this.getRowDataType(row);
+      const monitorName = this.getRowMonitorName(row);
+
+      if (!monitors.has(monitorName)) {
+        monitors.set(monitorName, { name: monitorName });
+      }
+
+      const monitor = monitors.get(monitorName);
+      const value = this.getRowValue(row);
+
+      const updated = this.setMonitorValue(dataType, monitor, value);
+
+      monitors.set(monitorName, updated);
+    },
+    setMonitorValue(key, monitor, value) {
+      const copy = { ...monitor };
+      switch (key) {
+        case 'monitor_cert_days_remaining': {
+          copy.certDaysRemaining = value;
+          break;
+        }
+        case 'monitor_cert_is_valid': {
+          copy.certValid = value;
+          break;
+        }
+        case 'monitor_response_time': {
+          copy.responseTime = value;
+          break;
+        }
+        case 'monitor_status': {
+          copy.status = value === '1' ? 'Up' : 'Down';
+          copy.statusClass = copy.status.toLowerCase();
+          break;
+        }
+        default:
+          break;
+      }
+
+      return copy;
+    },
+    getRowValue(row) {
+      return this.getValueWithRegex(row, /\b\d+\b$/);
+    },
+    getRowMonitorName(row) {
+      return this.getValueWithRegex(row, /monitor_name="([^"]+)"/);
+    },
+    getRowDataType(row) {
+      return this.getValueWithRegex(row, /^(.*?)\{/);
+    },
+    getValueWithRegex(string, regex) {
+      const result = string.match(regex);
+
+      const isArray = Array.isArray(result);
+
+      if (!isArray) {
+        return result;
+      }
+
+      return result.length > 1 ? result[1] : result[0];
+    },
+    optionsValid({ url, authHeaders }) {
+      const errors = [];
+      if (url === undefined) {
+        errors.push(this.errorMessageConstants.missingUrl);
+      }
+
+      if (authHeaders === undefined) {
+        errors.push(this.errorMessageConstants.missingApiKey);
+      }
+
+      if (errors.length === 0) { return true; }
+
+      this.errorMessage = errors.join('\n');
+      return false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.status-pill {
+  border-radius: 50em;
+  box-sizing: border-box;
+  font-size: 0.75em;
+  display: inline-block;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  padding: .35em .65em;
+  margin: 1em 0.5em;
+  min-width: 64px;
+
+  &.up {
+    background-color: rgb(92, 221, 139);
+    color: black;
+  }
+
+  &.down {
+    background-color: rgb(220, 53, 69);
+    color: white;
+  }
+}
+
+div.item.monitor-row:hover {
+  background-color: var(--item-background);
+  color: var(--current-color);
+  opacity: 1;
+
+  div.title-title>span.text {
+    color: var(--current-color);
+  }
+}
+
+.monitors-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  width: 50%;
+}
+
+.monitor-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.35em 0.5em;
+  align-items: center;
+}
+
+.title-title {
+  font-weight: bold;
+}
+</style>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index 3ab0c6c4..739388fa 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -115,6 +115,7 @@ const COMPAT = {
   'synology-download': 'SynologyDownload',
   'system-info': 'SystemInfo',
   'tfl-status': 'TflStatus',
+  'uptime-kuma': 'UptimeKuma',
   'wallet-balance': 'WalletBalance',
   weather: 'Weather',
   'weather-forecast': 'WeatherForecast',
@@ -205,14 +206,16 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/media-queries.scss';
+@import "@/styles/media-queries.scss";
+
 .widget-base {
   position: relative;
   padding: 0.75rem 0.5rem 0.5rem 0.5rem;
   background: var(--widget-base-background);
   box-shadow: var(--widget-base-shadow, none);
+
   // Refresh and full-page action buttons
-  button.action-btn  {
+  button.action-btn {
     height: 1rem;
     min-width: auto;
     width: 1.75rem;
@@ -223,21 +226,26 @@ export default {
     border: none;
     opacity: var(--dimming-factor);
     color: var(--widget-text-color);
+
     &:hover {
       opacity: 1;
       color: var(--widget-background-color);
     }
+
     &.update-btn {
       right: -0.25rem;
     }
+
     &.open-btn {
       right: 1.75rem;
     }
   }
+
   // Optional widget label
   .widget-label {
     color: var(--widget-text-color);
   }
+
   // Actual widget container
   .widget-wrap {
     &.has-error {
@@ -245,9 +253,11 @@ export default {
       opacity: 0.5;
       border-radius: var(--curve-factor);
       background: #ffff0040;
+
       &:hover { background: none; }
     }
   }
+
   // Error message output
   .widget-error {
     p.error-msg {
@@ -256,12 +266,14 @@ export default {
       font-size: 1rem;
       margin: 0 auto 0.5rem auto;
     }
+
     p.error-output {
       font-family: var(--font-monospace);
       color: var(--widget-text-color);
       font-size: 0.85rem;
       margin: 0.5rem auto;
     }
+
     p.retry-link {
       cursor: pointer;
       text-decoration: underline;
@@ -270,14 +282,17 @@ export default {
       margin: 0;
     }
   }
+
   // Loading spinner
   .loading {
     margin: 0.2rem auto;
     text-align: center;
+
     svg.loader {
       width: 100px;
     }
   }
+
   // Hide widget contents while loading
   &.is-loading {
     .widget-wrap {
@@ -285,5 +300,4 @@ export default {
     }
   }
 }
-
 </style>