diff --git a/.stylelintrc b/.stylelintrc
index aad673db..52301b54 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,9 +1,13 @@
 {
     "extends": "stylelint-config-standard",
+    "customSyntax": "postcss-html",
     "rules": {
         "indentation": 4,
         "no-descending-specificity": null,
         "selector-list-comma-newline-after": null,
-        "declaration-empty-line-before": null
+        "declaration-empty-line-before": null,
+        "alpha-value-notation": "number",
+        "color-function-notation": "legacy",
+        "shorthand-property-no-redundant-values": null
     }
 }
diff --git a/package.json b/package.json
index 28db266a..63aaecd6 100644
--- a/package.json
+++ b/package.json
@@ -132,6 +132,7 @@
         "jest": "~27.2.5",
         "jest-puppeteer": "~6.0.3",
         "npm-check-updates": "^12.5.5",
+        "postcss-html": "^1.3.1",
         "puppeteer": "~13.1.3",
         "sass": "~1.42.1",
         "stylelint": "~14.2.0",
diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 325245a6..c8de6a6f 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -21,7 +21,7 @@
 
             <router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }">
                 <div class="row">
-                    <div class="col-9 col-md-8 small-padding" :class="{ 'monitorItem': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
+                    <div class="col-9 col-md-8 small-padding" :class="{ 'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
                         <div class="info">
                             <Uptime :monitor="item" type="24" :pill="true" />
                             {{ item.name }}
@@ -172,7 +172,7 @@ export default {
 
 .dark {
     .footer {
-      //  background-color: $dark-bg;
+        //  background-color: $dark-bg;
     }
 }
 
@@ -198,7 +198,7 @@ export default {
     max-width: 15em;
 }
 
-.monitorItem {
+.monitor-item {
     width: 100%;
 }
 
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 20f15558..50d51042 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -278,7 +278,7 @@ export default {
 
         .dropdown-item {
             border-radius: 0.3rem;
-            padding: 2px 16px 4px 16px;
+            padding: 2px 16px 4px;
 
             .dark & {
                 background: $dark-bg;
diff --git a/src/components/ProxyDialog.vue b/src/components/ProxyDialog.vue
index c1895e5b..a6c23465 100644
--- a/src/components/ProxyDialog.vue
+++ b/src/components/ProxyDialog.vue
@@ -25,7 +25,7 @@
                             <label for="proxy-host" class="form-label">{{ $t("Proxy Server") }}</label>
                             <div class="d-flex">
                                 <input id="proxy-host" v-model="proxy.host" type="text" class="form-control" required :placeholder="$t('Server Address')">
-                                <input v-model="proxy.port" type="number" class="form-control ms-2" style="width: 100px" required min="1" max="65535" :placeholder="$t('Port')">
+                                <input v-model="proxy.port" type="number" class="form-control ms-2" style="width: 100px;" required min="1" max="65535" :placeholder="$t('Port')">
                             </div>
                         </div>
 
diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 37440e31..df94eec9 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -145,7 +145,7 @@ export default {
 
 .mobile {
     .item {
-        padding: 13px 0 10px 0;
+        padding: 13px 0 10px;
     }
 }
 
diff --git a/src/components/ToggleSection.vue b/src/components/ToggleSection.vue
index bc6028d7..daf9c00c 100644
--- a/src/components/ToggleSection.vue
+++ b/src/components/ToggleSection.vue
@@ -49,7 +49,7 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars.scss";
 
-h5:after {
+h5::after {
     content: "";
     display: block;
     width: 50%;
diff --git a/src/components/TwoFADialog.vue b/src/components/TwoFADialog.vue
index 8a773d6b..049f7c87 100644
--- a/src/components/TwoFADialog.vue
+++ b/src/components/TwoFADialog.vue
@@ -46,7 +46,7 @@
                                     <input v-model="token" type="text" maxlength="6" class="form-control">
                                     <button class="btn btn-outline-primary" type="button" @click="verifyToken()">{{ $t("Verify Token") }}</button>
                                 </div>
-                                <p v-show="tokenValid" class="mt-2" style="color: green">{{ $t("tokenValidSettingsMsg") }}</p>
+                                <p v-show="tokenValid" class="mt-2" style="color: green;">{{ $t("tokenValidSettingsMsg") }}</p>
                             </div>
                         </div>
                     </div>
diff --git a/src/components/notifications/Mattermost.vue b/src/components/notifications/Mattermost.vue
index 2d174146..4d42999e 100644
--- a/src/components/notifications/Mattermost.vue
+++ b/src/components/notifications/Mattermost.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="mb-3">
-        <label for="mattermost-webhook-url" class="form-label">{{ $t("Webhook URL") }}<span style="color:red;"><sup>*</sup></span></label>
+        <label for="mattermost-webhook-url" class="form-label">{{ $t("Webhook URL") }}<span style="color: red;"><sup>*</sup></span></label>
         <input id="mattermost-webhook-url" v-model="$parent.notification.mattermostWebhookUrl" type="text" class="form-control" required>
         <label for="mattermost-username" class="form-label">{{ $t("Username") }}</label>
         <input id="mattermost-username" v-model="$parent.notification.mattermostusername" type="text" class="form-control">
@@ -11,7 +11,7 @@
         <label for="mattermost-channel" class="form-label">{{ $t("Channel Name") }}</label>
         <input id="mattermost-channel-name" v-model="$parent.notification.mattermostchannel" type="text" class="form-control">
         <div class="form-text">
-            <span style="color:red;"><sup>*</sup></span>{{ $t("Required") }}
+            <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
             <i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
                 <a href="https://docs.mattermost.com/developer/webhooks-incoming.html" target="_blank">https://docs.mattermost.com/developer/webhooks-incoming.html</a>
             </i18n-t>
diff --git a/src/components/settings/About.vue b/src/components/settings/About.vue
index ad134094..b4d7b659 100644
--- a/src/components/settings/About.vue
+++ b/src/components/settings/About.vue
@@ -44,6 +44,7 @@ export default {
 .logo {
     margin: 4em 1em;
 }
+
 .update-link {
     font-size: 0.9em;
 }
diff --git a/src/components/settings/Backup.vue b/src/components/settings/Backup.vue
index 6ac28d46..ba0f92f0 100644
--- a/src/components/settings/Backup.vue
+++ b/src/components/settings/Backup.vue
@@ -69,7 +69,7 @@
 
             <div class="mb-2">
                 <input
-                    id="importBackup"
+                    id="import-backend"
                     type="file"
                     class="form-control"
                     accept="application/json"
@@ -94,7 +94,7 @@
             <div
                 v-if="importAlert"
                 class="alert alert-danger mt-3"
-                style="padding: 6px 16px"
+                style="padding: 6px 16px;"
             >
                 {{ importAlert }}
             </div>
@@ -159,7 +159,7 @@ export default {
 
         importBackup() {
             this.processing = true;
-            let uploadItem = document.getElementById("importBackup").files;
+            let uploadItem = document.getElementById("import-backend").files;
 
             if (uploadItem.length <= 0) {
                 this.processing = false;
@@ -198,7 +198,7 @@ export default {
 @import "../../assets/vars.scss";
 
 .dark {
-    #importBackup {
+    #import-backend {
         &::file-selector-button {
             color: $primary;
             background-color: $dark-bg;
diff --git a/src/components/settings/General.vue b/src/components/settings/General.vue
index e6896945..a175988b 100644
--- a/src/components/settings/General.vue
+++ b/src/components/settings/General.vue
@@ -189,4 +189,3 @@ export default {
 };
 </script>
 
-<style></style>
diff --git a/src/components/settings/MonitorHistory.vue b/src/components/settings/MonitorHistory.vue
index 8fff6054..0092727f 100644
--- a/src/components/settings/MonitorHistory.vue
+++ b/src/components/settings/MonitorHistory.vue
@@ -129,5 +129,3 @@ export default {
     },
 };
 </script>
-
-<style></style>
diff --git a/src/components/settings/Security.vue b/src/components/settings/Security.vue
index 1459519f..e5960004 100644
--- a/src/components/settings/Security.vue
+++ b/src/components/settings/Security.vue
@@ -355,7 +355,7 @@ export default {
 <style lang="scss" scoped>
 @import "../../assets/vars.scss";
 
-h5:after {
+h5::after {
     content: "";
     display: block;
     width: 50%;
diff --git a/src/pages/ManageStatusPage.vue b/src/pages/ManageStatusPage.vue
index 4ea8bbf8..c3360375 100644
--- a/src/pages/ManageStatusPage.vue
+++ b/src/pages/ManageStatusPage.vue
@@ -92,7 +92,6 @@ export default {
         }
 
         .info {
-
             .title {
                 font-weight: bold;
                 font-size: 20px;
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 2c0c1967..efe03cae 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -836,7 +836,7 @@ footer {
 
 .incident {
     .content {
-        &[contenteditable=true] {
+        &[contenteditable="true"] {
             min-height: 60px;
         }
     }