diff --git a/.stylelintrc.js b/.stylelintrc.js
index 9e8cdc3a..bebba98f 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -1,6 +1,11 @@
 module.exports = {
   root: true,
-  extends: [
-    'stylelint-config-standard',
+  extends: ['stylelint-config-standard'],
+  customSyntax: 'postcss-sass',
+  overrides: [
+    {
+      files: ['**/*.vue'],
+      customSyntax: 'postcss-html',
+    },
   ],
 };
diff --git a/package-lock.json b/package-lock.json
index 2ccd5a0c..a0e258f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,8 @@
         "husky": "^8.0.3",
         "lint-staged": "^14.0.1",
         "mux.js": "^6.3.0",
+        "postcss-html": "^1.5.0",
+        "postcss-sass": "^0.5.0",
         "sass": "^1.68.0",
         "sass-loader": "^13.3.2",
         "shaka-player": "^3.3.1",
@@ -8205,6 +8207,21 @@
       "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
       "dev": true
     },
+    "node_modules/gonzales-pe": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz",
+      "integrity": "sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "gonzales": "bin/gonzales.js"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -11608,6 +11625,101 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/postcss-html": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-1.5.0.tgz",
+      "integrity": "sha512-kCMRWJRHKicpA166kc2lAVUGxDZL324bkj/pVOb6RhjB0Z5Krl7mN0AsVkBhVIRZZirY0lyQXG38HCVaoKVNoA==",
+      "dev": true,
+      "dependencies": {
+        "htmlparser2": "^8.0.0",
+        "js-tokens": "^8.0.0",
+        "postcss": "^8.4.0",
+        "postcss-safe-parser": "^6.0.0"
+      },
+      "engines": {
+        "node": "^12 || >=14"
+      }
+    },
+    "node_modules/postcss-html/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/postcss-html/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/postcss-html/node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/postcss-html/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/postcss-html/node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
+    "node_modules/postcss-html/node_modules/js-tokens": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-8.0.2.tgz",
+      "integrity": "sha512-Olnt+V7xYdvGze9YTbGFZIfQXuGV4R3nQwwl8BrtgaPE/wq8UFpUHWuTNc05saowhSr1ZO6tx+V6RjE9D5YQog==",
+      "dev": true
+    },
     "node_modules/postcss-loader": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
@@ -12045,6 +12157,19 @@
         "postcss": "^8.3.3"
       }
     },
+    "node_modules/postcss-sass": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/postcss-sass/-/postcss-sass-0.5.0.tgz",
+      "integrity": "sha512-qtu8awh1NMF3o9j/x9j3EZnd+BlF66X6NZYl12BdKoG2Z4hmydOt/dZj2Nq+g0kfk2pQy3jeYFBmvG9DBwynGQ==",
+      "dev": true,
+      "dependencies": {
+        "gonzales-pe": "^4.3.0",
+        "postcss": "^8.2.14"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.13",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
diff --git a/package.json b/package.json
index eeef53d1..d00ef680 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,8 @@
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "mux.js": "^6.3.0",
+    "postcss-html": "^1.5.0",
+    "postcss-sass": "^0.5.0",
     "sass": "^1.68.0",
     "sass-loader": "^13.3.2",
     "shaka-player": "^3.3.1",
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index fcb4a64d..6e78849c 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -33,7 +33,7 @@ main {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(229, 160, 13, 0.6);
+  background: rgb(229 160 13 / 60%);
   border: 0 none #fff;
   border-radius: 0;
 }
diff --git a/src/components/PlexMediaLayout.vue b/src/components/PlexMediaLayout.vue
index b10bb7f3..12d9ed69 100644
--- a/src/components/PlexMediaLayout.vue
+++ b/src/components/PlexMediaLayout.vue
@@ -6,7 +6,7 @@
           :img="artUrl"
         >
           <v-container
-            style="background: rgba(0, 0, 0, 0.7);"
+            style="background: rgb(0 0 0 / 70%);"
             fluid
           >
             <v-row no-gutters>
diff --git a/src/components/PlexThumbnail.vue b/src/components/PlexThumbnail.vue
index 468fcd7e..0d47caa3 100644
--- a/src/components/PlexThumbnail.vue
+++ b/src/components/PlexThumbnail.vue
@@ -41,7 +41,7 @@
               style="position: absolute;
                     top: 0;
                     right: 0;
-                    background-color: rgba(43, 43, 191, 0.8);
+                    background-color: rgb(43 43 191 / 80%);
                     min-width: 16px;
                     min-height: 16px;"
               class="pa-1 text-body-2"
@@ -337,6 +337,6 @@ export default {
   top: 0;
   text-align: right;
   right: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgb(0 0 0 / 50%);
 }
 </style>
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index d0da5671..2d6e2be9 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -86,7 +86,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import CAF from 'caf';
+import CAF from 'caf/core';
 import contentTitle from '@/mixins/contentTitle';
 import linkwithroom from '@/mixins/linkwithroom';
 import contentLink from '@/mixins/contentlink';
diff --git a/src/components/TheSidebarRight.vue b/src/components/TheSidebarRight.vue
index 3d2b0747..2caa5496 100644
--- a/src/components/TheSidebarRight.vue
+++ b/src/components/TheSidebarRight.vue
@@ -188,6 +188,6 @@ export default {
 
 .participant-count {
   font-size: 0.8em;
-  color: rgba(255, 255, 255, 0.7);
+  color: rgb(255 255 255 / 70%);
 }
 </style>
diff --git a/src/components/TheUpnextDialog.vue b/src/components/TheUpnextDialog.vue
index a39f6a90..9f9d894b 100644
--- a/src/components/TheUpnextDialog.vue
+++ b/src/components/TheUpnextDialog.vue
@@ -14,7 +14,7 @@
         align-center
         justify="start"
         class="pa-0"
-        style="background: rgba(0, 0, 0, 0.7);"
+        style="background: rgb(0 0 0 / 70%);"
       >
         <v-row
           no-gutters
diff --git a/src/components/UserList.vue b/src/components/UserList.vue
index ef3b1769..d2c017e1 100644
--- a/src/components/UserList.vue
+++ b/src/components/UserList.vue
@@ -262,7 +262,7 @@ export default {
   font-size: 26px;
   opacity: 0.8;
   position: absolute;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgb(0 0 0 / 70%);
 }
 
 .border-error {
diff --git a/src/store/modules/plexclients/actions.js b/src/store/modules/plexclients/actions.js
index 887aec0d..b0d4e504 100644
--- a/src/store/modules/plexclients/actions.js
+++ b/src/store/modules/plexclients/actions.js
@@ -1,4 +1,4 @@
-import CAF from 'caf';
+import CAF from 'caf/core';
 import promiseutils from '@/utils/promiseutils';
 import contentTitleUtils from '@/utils/contenttitleutils';
 import { fetchXmlAndTransform } from '@/utils/fetchutils';
diff --git a/src/store/modules/slplayer/actions.js b/src/store/modules/slplayer/actions.js
index c16609fe..9c271511 100644
--- a/src/store/modules/slplayer/actions.js
+++ b/src/store/modules/slplayer/actions.js
@@ -1,4 +1,4 @@
-import CAF from 'caf';
+import CAF from 'caf/core';
 
 import { getRandomPlexId } from '@/utils/random';
 import { fetchJson, queryFetch } from '@/utils/fetchutils';
diff --git a/src/store/modules/synclounge/actions.js b/src/store/modules/synclounge/actions.js
index eb625bff..62e0c492 100644
--- a/src/store/modules/synclounge/actions.js
+++ b/src/store/modules/synclounge/actions.js
@@ -1,4 +1,4 @@
-import CAF from 'caf';
+import CAF from 'caf/core';
 import eventhandlers from '@/store/modules/synclounge/eventhandlers';
 import { combineUrl, combineRelativeUrlParts } from '@/utils/combineurl';
 import { fetchJson } from '@/utils/fetchutils';
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f5f33811..0917cef8 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,22 +1,22 @@
 $material-dark-elevation-colors: (
-  '0': #151924,
-  '1': #171b26,
-  '2': #1a1e28,
-  '3': #1c202b,
-  '4': #1e222d,
-  '6': #232731,
-  '8': #282b36,
-  '12': #31353e,
-  '16': #3a3e47,
-  '24': #4d5059
+  "0": #151924,
+  "1": #171b26,
+  "2": #1a1e28,
+  "3": #1c202b,
+  "4": #1e222d,
+  "6": #232731,
+  "8": #282b36,
+  "12": #31353e,
+  "16": #3a3e47,
+  "24": #4d5059
 );
 
 $material-dark: (
-  'surface': #151924,
-  'app-bar': map-get($material-dark-elevation-colors, '4'),
-  'bottom-navigation': map-get($material-dark-elevation-colors, '8'),
-  'cards': map-get($material-dark-elevation-colors, '1'),
-  // This elevation is different. Normally its 16
-  'navigation-drawer': map-get($material-dark-elevation-colors, '8'),
-  'toolbar': map-get($material-dark-elevation-colors, '4'),
+  "surface": #151924,
+  "app-bar": map-get($material-dark-elevation-colors, "4"),
+  "bottom-navigation": map-get($material-dark-elevation-colors, "8"),
+  "cards": map-get($material-dark-elevation-colors, "1"),
+  
+  "navigation-drawer": map-get($material-dark-elevation-colors, "8"),
+  "toolbar": map-get($material-dark-elevation-colors, "4"),
 );
diff --git a/src/views/AdvancedRoomJoin.vue b/src/views/AdvancedRoomJoin.vue
index 1dbfae2f..35674f7f 100644
--- a/src/views/AdvancedRoomJoin.vue
+++ b/src/views/AdvancedRoomJoin.vue
@@ -5,7 +5,7 @@
     <v-col
       cols="12"
       lg="10"
-      style="background: rgba(0, 0, 0, 0.1); border-radius: 10px;"
+      style="background: rgb(0 0 0 / 10%); border-radius: 10px;"
       class="pa-4"
     >
       <v-row
@@ -25,7 +25,7 @@
 
       <v-stepper
         v-model="e1"
-        style="background: rgba(0, 0, 0, 0.3);"
+        style="background: rgb(0 0 0 / 30%);"
         class="ma-4"
       >
         <v-stepper-header>
diff --git a/src/views/AdvancedRoomWalkthrough.vue b/src/views/AdvancedRoomWalkthrough.vue
index f54d8185..18a3de4a 100644
--- a/src/views/AdvancedRoomWalkthrough.vue
+++ b/src/views/AdvancedRoomWalkthrough.vue
@@ -2,7 +2,7 @@
   <v-row justify="center">
     <v-col
       lg="8"
-      style="background: rgba(0, 0, 0, 0.1); border-radius: 10px;"
+      style="background: rgb(0 0 0 / 10%); border-radius: 10px;"
       class="pa-4"
     >
       <v-row justify="center">
@@ -19,7 +19,7 @@
 
       <v-stepper
         v-model="e1"
-        style="background: rgba(0, 0, 0, 0.3); color: white !important; border-radius: 20px;"
+        style="background: rgb(0 0 0 / 30%); color: white !important; border-radius: 20px;"
         class="ma-4"
       >
         <v-stepper-header>
diff --git a/src/views/PlexHome.vue b/src/views/PlexHome.vue
index a83a0eae..53f92c66 100644
--- a/src/views/PlexHome.vue
+++ b/src/views/PlexHome.vue
@@ -41,7 +41,7 @@
           :to="linkWithRoom(
             { name: 'PlexServer', params: { machineIdentifier: server.clientIdentifier }},
           )"
-          style="background: rgba(0, 0, 0, 0.6);"
+          style="background: rgb(0 0 0 / 60%);"
           :title="server.name"
         >
           <v-container fill-height>
diff --git a/src/views/PlexServer.vue b/src/views/PlexServer.vue
index c5d660f0..aedc7fa5 100644
--- a/src/views/PlexServer.vue
+++ b/src/views/PlexServer.vue
@@ -40,7 +40,7 @@
               </div>
 
               <v-card-title
-                style="background: rgba(0, 0, 0, 0.7);"
+                style="background: rgb(0 0 0 / 70%);"
                 class="px-3 py-1"
               >
                 <div class="text-subtitle-1">
diff --git a/src/views/SignIn.vue b/src/views/SignIn.vue
index d1bd53b6..a91f15d6 100644
--- a/src/views/SignIn.vue
+++ b/src/views/SignIn.vue
@@ -45,7 +45,7 @@
 
 <script>
 import { mapActions, mapGetters, mapMutations } from 'vuex';
-import CAF from 'caf';
+import CAF from 'caf/core';
 
 import getCookie from '@/utils/getcookie';
 
diff --git a/src/views/WebPlayer.vue b/src/views/WebPlayer.vue
index 33225b22..47494205 100644
--- a/src/views/WebPlayer.vue
+++ b/src/views/WebPlayer.vue
@@ -463,11 +463,11 @@ export default {
       linear,
       left top,
       left bottom,
-      from(rgba(0, 0, 0, 0.8)),
-      color-stop(60%, rgba(0, 0, 0, 0.35)),
+      from(rgb(0 0 0 / 80%)),
+      color-stop(60%, rgb(0 0 0 / 35%)),
       to(transparent)
     );
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.35) 60%, transparent);
+  background: linear-gradient(180deg, rgb(0 0 0 / 80%) 0, rgb(0 0 0 / 35%) 60%, transparent);
   top: 0;
   left: 0;
   width: 100%;