diff --git a/.stylelintrc.json b/.stylelintrc.json
index deadc16c8..e32dc5231 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,5 +1,6 @@
 {
-  "plugins": ["stylelint-use-logical-spec"],
+  "plugins": ["stylelint-use-logical-spec", "@double-great/stylelint-a11y"],
+  "extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
   "overrides": [
     {
       "files": ["**/*.scss"],
@@ -16,6 +17,19 @@
     }
   ],
   "rules": {
+    "selector-no-qualifying-type": [
+      true, {
+      "ignore": ["attribute"]
+    }],
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["deep"]
+      }
+    ],
+    "a11y/no-outline-none": true,
     "liberty/use-logical-spec": ["always", { "except": ["float"] }]
   }
 }
diff --git a/src/renderer/App.css b/src/renderer/App.css
index 90fc87ab4..24b765ca8 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -1,12 +1,12 @@
 @font-face {
   font-family: Roboto;
-  src: url(assets/font/Roboto-Regular.ttf);
+  src: url("assets/font/Roboto-Regular.ttf");
 }
 
-#app {
+.app {
   display: flex;
   flex-wrap: wrap;
-  font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   block-size: 100%;
 }
 
@@ -30,23 +30,23 @@
 .flexBox {
   display: block;
   user-select: unset;
-  -webkit-user-select: unset;
 }
 
-#changeLogText {
+.changeLogText {
   overflow-y: scroll;
   block-size: 40vh;
-  display: block
+  display: block;
 }
 
 .fade-enter-active, .fade-leave-active {
   transition: opacity .15s;
 }
+
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .routerView {
     margin-block: 68px;
     margin-inline: 8px;
@@ -58,7 +58,6 @@
   }
 
   .flexBox {
-    margin-block-start: 60px;
-    margin-block-end: -75px;
+    margin-block: 60px -75px;
   }
 }
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index cb563b887..fb49f342e 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -2,6 +2,7 @@
   <div
     v-if="dataReady"
     id="app"
+    class="app"
     :class="{
       hideOutlines: outlinesHidden,
       isLocaleRightToLeft: isLocaleRightToLeft
@@ -52,7 +53,7 @@
       @click="showReleaseNotes = !showReleaseNotes"
     >
       <span
-        id="changeLogText"
+        class="changeLogText"
         v-html="updateChangelog"
       />
       <ft-flex-box>
diff --git a/src/renderer/components/distraction-settings/distraction-settings.css b/src/renderer/components/distraction-settings/distraction-settings.css
index d6cefc071..a67117e85 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.css
+++ b/src/renderer/components/distraction-settings/distraction-settings.css
@@ -1,5 +1,5 @@
-@media only screen and (max-width: 800px) {
-  br.hide-on-mobile {
+@media only screen and (width <= 800px) {
+  .hide-on-mobile {
     display: none;
   }
 }
diff --git a/src/renderer/components/experimental-settings/experimental-settings.css b/src/renderer/components/experimental-settings/experimental-settings.css
index 3f20bf055..2b20e6e67 100644
--- a/src/renderer/components/experimental-settings/experimental-settings.css
+++ b/src/renderer/components/experimental-settings/experimental-settings.css
@@ -1,6 +1,5 @@
 .experimental-warning {
   text-align: center;
   font-weight: bold;
-  padding-inline-start: 4%;
-  padding-inline-end: 4%
+  padding-inline: 4% 4%
 }
diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
index 4642a184d..4a0cc58ed 100644
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/src/renderer/components/ft-button/ft-button.css
@@ -1,5 +1,5 @@
 .btn {
-  font-family: 'Roboto', sans-serif;
+  font-family: Roboto, sans-serif;
   min-inline-size: 100px;
   font-size: 0.9rem;
   padding-block: 10px;
@@ -18,7 +18,7 @@
   font-weight: 500;
   vertical-align: middle;
   margin: 5px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
 }
 
 .btn:disabled {
@@ -32,7 +32,7 @@
   transform: translate3d(0, 0, 0);
 }
 
-.ripple:after {
+.ripple::after {
   content: "";
   display: block;
   position: absolute;
@@ -49,7 +49,7 @@
   transition: transform .5s, opacity 1s;
 }
 
-.ripple:active:after {
+.ripple:active::after {
   transform: scale(0, 0);
   opacity: .3;
   transition: 0s;
diff --git a/src/renderer/components/ft-card/ft-card.css b/src/renderer/components/ft-card/ft-card.css
index b9ef73f8b..250d9a851 100644
--- a/src/renderer/components/ft-card/ft-card.css
+++ b/src/renderer/components/ft-card/ft-card.css
@@ -3,5 +3,5 @@
   margin: 8px;
   padding-block: 3px 16px;
   padding-inline: 16px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.1);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
 }
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
index 701c0eb96..0dfb0c114 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -24,18 +24,17 @@
   inline-size: 50px;
   block-size: 50px;
   border-radius: 100%;
-  -webkit-border-radius: 100%;
   object-fit: cover;
 }
 
 .selected {
   position: absolute;
   inset-block-start: 10px;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgb(0 0 0 / 50%);
 }
 
 .icon {
-  color: #EEEEEE;
+  color: #EEE;
   font-size: 25px;
   position: absolute;
   inset-block-start: 12px;
diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css
index c35738a1b..3f954536a 100644
--- a/src/renderer/components/ft-community-poll/ft-community-poll.css
+++ b/src/renderer/components/ft-community-poll/ft-community-poll.css
@@ -17,7 +17,7 @@
 
 .filled-circle {
   border-radius: 50%;
-  background-color: black;
+  background-color: #000;
   float: var(--float-left-ltr-rtl-value);
   block-size: 6px;
   inset-inline-start: 2px;
@@ -33,11 +33,10 @@
 .option {
   display: flex;
   align-items: center;
-  padding-block-end: 10px;
+  padding-block: 5px;
   border-radius: 5px;
   border-style: solid;
   border-width: 1px;
-  padding-block: 5px;
   padding-inline-start: 10px;
   margin-block-end: 10px;
 }
diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
index 838cb658b..bb50bb5b4 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -1,10 +1,11 @@
 /* stylelint-disable property-no-vendor-prefix */
-@use '../../scss-partials/_ft-list-item';
+@use '../../scss-partials/ft-list-item';
 
 .outside {
   margin: auto;
   inline-size: 40%;
-  @media screen and (max-width: 768px) {
+
+  @media screen and (width <= 768px) {
     inline-size: 100%;
   }
 }
@@ -25,7 +26,6 @@
 }
 
 .communityThumbnail {
-  -webkit-border-radius: 50%;
   border-radius: 50%;
   block-size: 55px;
   margin-inline-end: 5px;
@@ -40,6 +40,7 @@
     font-weight: bold;
     margin-block: 5px 0;
     margin-inline: 5px 6px;
+
     .authorNameLink {
       color: inherit;
       text-decoration: none;
@@ -67,7 +68,7 @@
   max-inline-size: 210px;
   text-align: start;
 
-  @media screen and (max-width: 680px) {
+  @media screen and (width <= 680px) {
     margin-inline-start: 0;
     text-align: start;
   }
@@ -79,8 +80,7 @@
   }
 
   .likeCount {
-    margin-inline-start: 5px;
-    margin-inline-end: 6px;
+    margin-inline: 5px 6px;
   }
 }
 
@@ -89,8 +89,7 @@
 
   .videoThumbnail {
     display: flex;
-    margin-block-end: auto;
-    margin-block-start: auto;
+    margin-block: auto;
     position: relative;
     inline-size: fit-content;
 
diff --git a/src/renderer/components/ft-flex-box/ft-flex-box.css b/src/renderer/components/ft-flex-box/ft-flex-box.css
index facb39fff..281b67489 100644
--- a/src/renderer/components/ft-flex-box/ft-flex-box.css
+++ b/src/renderer/components/ft-flex-box/ft-flex-box.css
@@ -3,5 +3,4 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
   user-select: none;
-  -webkit-user-select: none;
 }
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 58f776dd6..c76e9333f 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -3,8 +3,6 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
   position: relative;
-
-  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -90,7 +88,6 @@
   list-style-type: none;
   position: absolute;
   text-align: center;
-  -webkit-user-select: none;
   user-select: none;
   z-index: 3;
 
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css
index c1a81925a..bdf006aff 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.css
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.css
@@ -8,7 +8,7 @@
 }
 
 .disabledMsg {
-  color: rgb(233, 255, 108);
+  color: rgb(233 255 108);
   padding-block-end: 10px;
 }
 
@@ -53,7 +53,7 @@
   color: var(--primary-text-color);
   opacity: 0.5;
   padding: 10px;
-  padding-inline-start: 0px;
+  padding-inline-start: 0;
 }
 
 .removeTagButton:hover {
@@ -64,7 +64,7 @@
   margin-block-start: 10px;
 }
 
-@media only screen and (max-width: 576px) {
+@media only screen and (width <= 576px) {
   .ft-input-tags-component {
     inline-size: 100%;
   }
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 4d383d327..e5f9a1704 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .ft-input-component {
   position: relative;
 }
@@ -49,6 +50,7 @@
   position: absolute;
   inset-block-start: 5px;
   inset-inline-start: 0;
+
   /* To be higher than `.inputWrapper` */
   z-index: 1;
   margin-block: 0;
@@ -80,7 +82,7 @@
 }
 
 .forceTextColor .clearInputTextButton {
-  color: #EEEEEE;
+  color: #EEE;
 }
 
 .forceTextColor .clearInputTextButton:active {
@@ -89,12 +91,10 @@
 
 .ft-input {
   box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
   outline: none;
   inline-size: 100%;
   padding: 1rem;
-  border: none;
+  border: 0;
   margin-block-end: 10px;
   font-size: 16px;
   block-size: 45px;
@@ -103,26 +103,23 @@
   background-color: var(--search-bar-color);
 }
 
-.ft-input-component ::-webkit-input-placeholder {
+.ftcomponent ::placeholder {
   color: var(--tertiary-text-color);
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .forceTextColor .ft-input {
-  color: #EEEEEE;
+  color: #EEE;
   background-color: var(--primary-input-color);
 }
 
 .forceTextColor .ft-input:focus {
   box-shadow: 0 0 1rem 0 var(--primary-input-color);
-  -moz-transition: box-shadow 0.2s ease-in-out;
-  -o-transition: box-shadow 0.2s ease-in-out;
   transition: box-shadow 0.2s ease-in-out;
 }
 
-.forceTextColor ::-webkit-input-placeholder {
-  color: #EEEEEE;
+.forceTextColor ::placeholder {
+  color: #EEE;
 }
 
 .inputWrapper {
@@ -138,12 +135,14 @@
   inset-inline-end: 0;
   border-radius: 100%;
   color: var(--primary-text-color);
+
   /* this should look disabled by default */
-  opacity: 50%;
+  opacity: 0.5;
 }
 
 .inputAction.enabled {
-  opacity: 100%;
+  opacity: 1;
+
   /* Only look respond to cursor when enabled */
   cursor: pointer;
 }
@@ -154,7 +153,7 @@
 }
 
 .forceTextColor .inputAction {
-  color: #EEEEEE;
+  color: #EEE;
 }
 
 .ft-input-component.showActionButton .ft-input {
diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.scss b/src/renderer/components/ft-list-channel/ft-list-channel.scss
index 4fa0fe962..8f1b55dd7 100644
--- a/src/renderer/components/ft-list-channel/ft-list-channel.scss
+++ b/src/renderer/components/ft-list-channel/ft-list-channel.scss
@@ -1,4 +1,11 @@
-@use '../../scss-partials/_ft-list-item';
+@use '../../scss-partials/ft-list-item';
+
+.infoAndSubscribe {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  inline-size: 100%;
+}
 
 .ft-list-channel {
   &.grid {
@@ -21,9 +28,6 @@
 
   &.list {
     .infoAndSubscribe {
-      flex-flow: row wrap;
-      justify-content: center;
-
       .channelSubscribeButton {
         margin-block: auto;
         margin-inline: 7px;
@@ -32,13 +36,6 @@
   }
 }
 
-.infoAndSubscribe {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  inline-size: 100%;
-}
-
 .handle {
   color: inherit;
   text-decoration: none;
diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
index c524018e4..b9932da1d 100644
--- a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
@@ -1,4 +1,4 @@
-@use '../../scss-partials/_ft-list-item';
+@use '../../scss-partials/ft-list-item';
 
 .hashtagImage {
   color: var(--primary-text-color);
diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.scss b/src/renderer/components/ft-list-playlist/ft-list-playlist.scss
index af386ff4b..0b80f3851 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.scss
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.scss
@@ -1 +1 @@
-@use '../../scss-partials/_ft-list-item';
+@use '../../scss-partials/ft-list-item';
diff --git a/src/renderer/components/ft-list-video/ft-list-video.scss b/src/renderer/components/ft-list-video/ft-list-video.scss
index 7512ac8a6..6a622222d 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.scss
+++ b/src/renderer/components/ft-list-video/ft-list-video.scss
@@ -1,4 +1,4 @@
-@use '../../scss-partials/_ft-list-item';
+@use '../../scss-partials/ft-list-item';
 
 .thumbnailLink:hover {
   outline: 3px solid var(--side-nav-hover-color);
diff --git a/src/renderer/components/ft-loader/ft-loader.css b/src/renderer/components/ft-loader/ft-loader.css
index 6dabd908c..b27213cf6 100644
--- a/src/renderer/components/ft-loader/ft-loader.css
+++ b/src/renderer/components/ft-loader/ft-loader.css
@@ -53,34 +53,20 @@
     inset-block-start: 0;
     inset-inline-start: 0;
     background-color: var(--primary-color);
-
-    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
     animation: sk-bounce 2.0s infinite ease-in-out;
 }
 
 .double-bounce2 {
-    -webkit-animation-delay: -1.0s;
     animation-delay: -1.0s;
 }
 
-@-webkit-keyframes sk-bounce {
-    0%,
-    100% {
-        -webkit-transform: scale(0.0)
-    }
-    50% {
-        -webkit-transform: scale(1.0)
-    }
-}
-
 @keyframes sk-bounce {
     0%,
     100% {
         transform: scale(0.0);
-        -webkit-transform: scale(0.0);
     }
+
     50% {
         transform: scale(1.0);
-        -webkit-transform: scale(1.0);
     }
 }
diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.css b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
index 4bf837766..2f8464be3 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css
+++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
@@ -1,6 +1,7 @@
 .ftNotificationBanner {
   background-color: var(--primary-color);
   color: var(--text-with-main-color);
+
   /*
   background-color: var(--accent-color);
   color: var(--text-with-accent-color);
@@ -9,13 +10,13 @@
 	padding: 16px;
   padding-block: 3px 5px;
   padding-inline: 16px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.1);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
   position: relative;
   cursor: pointer;
 }
 
 .ftNotificationBanner:focus {
-  box-shadow: 20px 20px 20px rgba(0,0,0,.1);
+  box-shadow: 20px 20px 20px rgb(0 0 0 / 10%);
 }
 
 .message {
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
index fa65984ce..182490925 100644
--- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
@@ -23,7 +23,8 @@
   grid-template-columns: 1fr auto;
   column-gap: 16px;
 }
-@media only screen and (max-width: 800px) {
+
+@media only screen and (width <= 800px) {
   .searchInputsRow {
     /* Switch to 2 rows from 2 columns */
     grid-template-columns: auto;
@@ -37,7 +38,8 @@
   grid-template-rows: 1fr;
   align-items: center;
 }
-@media only screen and (max-width: 800px) {
+
+@media only screen and (width <= 800px) {
   .optionsRow {
     /* Switch to 2 rows from 2 columns */
     grid-template-columns: auto;
@@ -52,11 +54,10 @@
 }
 
 .playlists-container {
-  box-shadow: inset 0 0 5px rgba(0,0,0,.5);
+  box-shadow: inset 0 0 5px rgb(0 0 0 / 50%);
 
   /* Use remaining height */
   flex-grow: 1;
-
   overflow-y: scroll;
 }
 
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
index ed9c0fbf1..27c1f3769 100644
--- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
@@ -107,7 +107,9 @@ export default defineComponent({
     newPlaylistDefaultProperties: function () {
       return this.$store.getters.getNewPlaylistDefaultProperties
     },
-
+    locale: function () {
+      return this.$i18n.locale.replace('_', '-')
+    },
     processedQuery: function() {
       return this.query.trim().toLowerCase()
     },
diff --git a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss
index f887a9962..ddcce78f0 100644
--- a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss
+++ b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss
@@ -15,11 +15,9 @@
 
     .videoCountContainer {
       position: absolute;
-
       inset-inline-end: 0;
       inset-block: 0;
       inline-size: 60px;
-
       font-size: 20px;
 
       .background,
@@ -38,7 +36,6 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-
         color: var(--primary-text-color);
       }
     }
@@ -63,7 +60,6 @@
   &.grid {
     display: flex;
     flex-direction: column;
-
     inline-size: 245px;
     min-block-size: 230px;
     padding-block-end: 20px;
@@ -77,6 +73,7 @@
         aspect-ratio: 16/9;
       }
     }
+
     .title {
       font-size: 22px;
     }
@@ -85,9 +82,7 @@
 
 .selectedIcon {
   position: absolute;
-
   inset-block-start: calc(50% - 25px);
   inset-inline-start: calc(50% - 25px);
-
   font-size: 50px;
 }
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
index 024da1567..1dda37d0f 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -19,7 +19,6 @@
   margin-block: 20px 5px;
   margin-inline: auto;
   border-radius: 50%;
-  -webkit-border-radius: 50%;
 }
 
 .initial {
@@ -29,7 +28,6 @@
   padding-block: 17.5px;
   padding-inline: 0;
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .profileName {
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
index 50867ea46..52b828b61 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
@@ -8,7 +8,7 @@ h2, .selectedCount {
   margin-inline: auto;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.css b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
index 3636a9616..31d54c310 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
@@ -45,14 +45,12 @@ h3 {
   margin: 2px;
   cursor: pointer;
   border-radius: 50%;
-  -webkit-border-radius: 50%;
 }
 
 .initial {
   font-size: 37.5px;
   text-align: center;
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .colorOption:has(.initial) {
@@ -84,7 +82,7 @@ h3 {
   margin-inline: auto;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
index e91ac2a3c..35ee6d140 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
@@ -12,7 +12,7 @@ h2 {
   margin-inline: auto;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index 31e8405e3..53c3d41bf 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -6,7 +6,6 @@
   display: flex;
   justify-content: center;
   border-radius: 50%;
-  -webkit-border-radius: 50%;
 }
 
 .colorOption:hover {
@@ -18,7 +17,6 @@
   line-height: 1em;
   text-align: center;
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .profileList {
@@ -37,6 +35,7 @@
   margin-block-start: 60px;
   block-size: auto;
   overflow-y: auto;
+
   /*
   profile list max height: 90% of window size - 100 px. It's scaled to be 340px on 800x600 resolution. 
   Offset of 100px is to compensate for the fixed size of elements above the list, which takes more screen space on lower resolutions
@@ -47,7 +46,7 @@
 
 /* Navbar changes position to horizontal with this media rule.
 Height adjust for profile list so it won't cover navbar.  */
-@media only screen and (max-width: 680px){
+@media only screen and (width <= 680px){
   .profileWrapper {
     max-block-size: calc(95vh - 180px);
   }
diff --git a/src/renderer/components/ft-progress-bar/ft-progress-bar.css b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
index 6f14df5af..c7ebd6f3c 100644
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.css
+++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
@@ -1,8 +1,8 @@
 .progressBar {
   position: fixed;
   block-size: 3px;
-  inset-block-end: 0px;
-  inset-inline-start: 0px;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   background-color: var(--primary-color);
   z-index: 1;
   transition: inline-size 0.5s;
diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css
index 381fd8c49..06312c5a8 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@@ -4,7 +4,8 @@
   inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgb(0 0 0 / 70%);
+
   /* Higher than components like playlist info */
   z-index: 200;
   padding: 15px;
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.css b/src/renderer/components/ft-radio-button/ft-radio-button.css
index 4efd5aeab..7a5e14ad6 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"], .pure-checkbox input[type="radio"], .pure-radiobutton input[type="radio"] {
   border: 0;
   clip: rect(0 0 0 0);
@@ -9,24 +10,22 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   inline-size: 1px;
 }
 
-.pure-checkbox input[type="checkbox"]:focus + label:before, .pure-radiobutton input[type="checkbox"]:focus + label:before, .pure-checkbox input[type="radio"]:focus + label:before, .pure-radiobutton input[type="radio"]:focus + label:before, .pure-checkbox input[type="checkbox"]:hover + label:before, .pure-radiobutton input[type="checkbox"]:hover + label:before, .pure-checkbox input[type="radio"]:hover + label:before, .pure-radiobutton input[type="radio"]:hover + label:before {
+.pure-checkbox input[type="checkbox"]:focus + label::before, .pure-radiobutton input[type="checkbox"]:focus + label::before, .pure-checkbox input[type="radio"]:focus + label::before, .pure-radiobutton input[type="radio"]:focus + label::before, .pure-checkbox input[type="checkbox"]:hover + label::before, .pure-radiobutton input[type="checkbox"]:hover + label::before, .pure-checkbox input[type="radio"]:hover + label::before, .pure-radiobutton input[type="radio"]:hover + label::before {
   border-color: var(--primary-color);
 }
 
-.pure-checkbox input[type="checkbox"]:active + label:before, .pure-radiobutton input[type="checkbox"]:active + label:before, .pure-checkbox input[type="radio"]:active + label:before, .pure-radiobutton input[type="radio"]:active + label:before { transition-duration: 0s; }
+.pure-checkbox input[type="checkbox"]:active + label::before, .pure-radiobutton input[type="checkbox"]:active + label::before, .pure-checkbox input[type="radio"]:active + label::before, .pure-radiobutton input[type="radio"]:active + label::before { transition-duration: 0s; }
 
 .pure-checkbox input[type="checkbox"] + label, .pure-radiobutton input[type="checkbox"] + label, .pure-checkbox input[type="radio"] + label, .pure-radiobutton input[type="radio"] + label {
   position: relative;
   padding-inline-start: 2em;
-  vertical-align: middle;
-  -webkit-user-select: none;
   user-select: none;
   cursor: pointer;
   display: block;
   margin-block-end: -20px;
 }
 
-.pure-checkbox input[type="checkbox"] + label:before, .pure-radiobutton input[type="checkbox"] + label:before, .pure-checkbox input[type="radio"] + label:before, .pure-radiobutton input[type="radio"] + label:before {
+.pure-checkbox input[type="checkbox"] + label::before, .pure-radiobutton input[type="checkbox"] + label::before, .pure-checkbox input[type="radio"] + label::before, .pure-radiobutton input[type="radio"] + label::before {
   box-sizing: content-box;
   content: '';
   color: var(--primary-color);
@@ -41,7 +40,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   transition: all 0.4s ease;
 }
 
-.pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after, .pure-checkbox input[type="radio"] + label:after, .pure-radiobutton input[type="radio"] + label:after {
+.pure-checkbox input[type="checkbox"] + label::after, .pure-radiobutton input[type="checkbox"] + label::after, .pure-checkbox input[type="radio"] + label::after, .pure-radiobutton input[type="radio"] + label::after {
   box-sizing: content-box;
   content: '';
   background-color: var(--primary-color);
@@ -56,13 +55,13 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   transition: transform 200ms ease-out;
 }
 
-.pure-checkbox input[type="checkbox"]:disabled + label:before, .pure-radiobutton input[type="checkbox"]:disabled + label:before, .pure-checkbox input[type="radio"]:disabled + label:before, .pure-radiobutton input[type="radio"]:disabled + label:before { border-color: #cccccc; }
+.pure-checkbox input[type="checkbox"]:disabled + label::before, .pure-radiobutton input[type="checkbox"]:disabled + label::before, .pure-checkbox input[type="radio"]:disabled + label::before, .pure-radiobutton input[type="radio"]:disabled + label::before { border-color: #ccc; }
 
-.pure-checkbox input[type="checkbox"]:disabled:focus + label:before, .pure-radiobutton input[type="checkbox"]:disabled:focus + label:before, .pure-checkbox input[type="radio"]:disabled:focus + label:before, .pure-radiobutton input[type="radio"]:disabled:focus + label:before, .pure-checkbox input[type="checkbox"]:disabled:hover + label:before, .pure-radiobutton input[type="checkbox"]:disabled:hover + label:before, .pure-checkbox input[type="radio"]:disabled:hover + label:before, .pure-radiobutton input[type="radio"]:disabled:hover + label:before { background-color: inherit; }
+.pure-checkbox input[type="checkbox"]:disabled:focus + label::before, .pure-radiobutton input[type="checkbox"]:disabled:focus + label::before, .pure-checkbox input[type="radio"]:disabled:focus + label::before, .pure-radiobutton input[type="radio"]:disabled:focus + label::before, .pure-checkbox input[type="checkbox"]:disabled:hover + label::before, .pure-radiobutton input[type="checkbox"]:disabled:hover + label::before, .pure-checkbox input[type="radio"]:disabled:hover + label::before, .pure-radiobutton input[type="radio"]:disabled:hover + label::before { background-color: inherit; }
 
-.pure-checkbox input[type="checkbox"]:disabled:checked + label:before, .pure-radiobutton input[type="checkbox"]:disabled:checked + label:before, .pure-checkbox input[type="radio"]:disabled:checked + label:before, .pure-radiobutton input[type="radio"]:disabled:checked + label:before { background-color: #cccccc; }
+.pure-checkbox input[type="checkbox"]:disabled:checked + label::before, .pure-radiobutton input[type="checkbox"]:disabled:checked + label::before, .pure-checkbox input[type="radio"]:disabled:checked + label::before, .pure-radiobutton input[type="radio"]:disabled:checked + label::before { background-color: #ccc; }
 
-.pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after {
+.pure-checkbox input[type="checkbox"] + label::after, .pure-radiobutton input[type="checkbox"] + label::after {
   background-color: transparent;
   inset-block-start: 50%;
   inset-inline-start: 4px;
@@ -75,26 +74,26 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   transform: rotate(-45deg) scale(0);
 }
 
-.pure-checkbox input[type="checkbox"]:checked + label:after, .pure-radiobutton input[type="checkbox"]:checked + label:after {
+.pure-checkbox input[type="checkbox"]:checked + label::after, .pure-radiobutton input[type="checkbox"]:checked + label::after {
   content: '';
   transform: rotate(-45deg) scale(1);
   transition: transform 200ms ease-out;
 }
 
-.pure-checkbox input[type="radio"]:checked + label:before, .pure-radiobutton input[type="radio"]:checked + label:before {
+.pure-checkbox input[type="radio"]:checked + label::before, .pure-radiobutton input[type="radio"]:checked + label::before {
   animation: borderscale 300ms ease-in;
 }
 
-.pure-checkbox input[type="radio"]:checked + label:after, .pure-radiobutton input[type="radio"]:checked + label:after { transform: scale(1); }
+.pure-checkbox input[type="radio"]:checked + label::after, .pure-radiobutton input[type="radio"]:checked + label::after { transform: scale(1); }
 
-.pure-checkbox input[type="radio"] + label:before, .pure-radiobutton input[type="radio"] + label:before, .pure-checkbox input[type="radio"] + label:after, .pure-radiobutton input[type="radio"] + label:after { border-radius: 50%; }
+.pure-checkbox input[type="radio"] + label::before, .pure-radiobutton input[type="radio"] + label::before, .pure-checkbox input[type="radio"] + label::after, .pure-radiobutton input[type="radio"] + label::after { border-radius: 50%; }
 
-.pure-checkbox input[type="checkbox"]:checked + label:before, .pure-radiobutton input[type="checkbox"]:checked + label:before {
+.pure-checkbox input[type="checkbox"]:checked + label::before, .pure-radiobutton input[type="checkbox"]:checked + label::before {
   animation: borderscale 200ms ease-in;
   background: var(--primary-color);
 }
 
-.pure-checkbox input[type="checkbox"]:checked + label:after, .pure-radiobutton input[type="checkbox"]:checked + label:after { transform: rotate(-45deg) scale(1); }
+.pure-radiobutton input[type="checkbox"]:checked + label::after { transform: rotate(-45deg) scale(1); }
 
 @keyframes
 borderscale {  50% {
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index cb31aba27..33ba9f644 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -1,16 +1,12 @@
 .searchFilterInner {
   max-inline-size: 800px;
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-
+  margin-inline: auto;
   padding-block: 20px 70px;
   padding-inline: 20px;
   max-block-size: 410px;
   overflow-y: auto;
-
   background-color: var(--card-bg-color);
-  box-shadow: 0 1px 2px rgba(0,0,0,.1);
-
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
   opacity: 0.9;
 }
 
@@ -28,7 +24,7 @@
   margin-inline: auto;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (width <= 600px) {
   .searchRadio {
     border-inline-end: 0;
   }
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 58b328f53..d2b0a30f2 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -20,18 +20,13 @@
 * https://codepen.io/pavelvaravko/pen/qjojOr
 */
 
-/* select starting stylings ------------------------------*/
+/* select starting stylings ------------------------------ */
 .select {
   position: relative;
   inline-size: 200px;
   margin-block-start: 30px;
 }
 
-.disabled, .disabled + svg.iconSelect {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
 .select-text {
   position: relative;
   font-family: inherit;
@@ -42,7 +37,7 @@
   padding-inline-start: 1rem;
   font-size: 16px;
   border-radius: 5px;
-  border: none;
+  border: 0;
 }
 
 .select option {
@@ -50,7 +45,7 @@
   background-color: var(--card-bg-color);
 }
 
-/* Remove focus */
+/* stylelint-disable-next-line a11y/no-outline-none */
 .select-text:focus {
   outline: none;
 }
@@ -58,7 +53,6 @@
   /* Use custom arrow */
 .select .select-text {
   appearance: none;
-  -webkit-appearance:none;
   text-overflow: ellipsis;
   padding-inline-end: 1.5rem;
 }
@@ -67,6 +61,7 @@
   position: absolute;
   inset-block-start: 10px;
   inset-inline-end: 10px;
+
   /* Styling the down arrow */
   padding: 0;
   content: '';
@@ -76,6 +71,11 @@
   color: var(--tertiary-text-color);
 }
 
+.disabled, .disabled + .iconSelect {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 .selectTooltip {
   position: absolute;
   inset-block-start: -22px;
@@ -108,7 +108,7 @@
   display: block;
 }
 
-.select-bar:before, .select-bar:after {
+.select-bar::before, .select-bar::after {
   content: '';
   block-size: 2px;
   inline-size: 0;
@@ -118,16 +118,16 @@
   transition: 0.2s ease all;
 }
 
-.select-bar:before {
+.select-bar::before {
   inset-inline-start: 50%;
 }
 
-.select-bar:after {
+.select-bar::after {
   inset-inline-end: 50%;
 }
 
 /* active state */
-.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
+.select-text:focus ~ .select-bar::before, .select-text:focus ~ .select-bar::after {
   inline-size: 50%;
 }
 
@@ -142,8 +142,8 @@
   opacity: 0.5;
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (width <= 800px) {
   .select {
     inline-size: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index 3a0fa6278..cdf50ffd3 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -4,7 +4,7 @@
   margin-inline: auto;
   inline-size: 85%;
 
-  @media only screen and (max-width: 800px) {
+  @media only screen and (width <= 800px) {
     inline-size: 100%;
   }
 
@@ -20,7 +20,7 @@
   }
 
   > div:not(:last-child, .ft-flex-box) {
-    @media only screen and (max-width: 800px) {
+    @media only screen and (width <= 800px) {
       margin-block-end: 20px;
     }
   }
@@ -40,7 +40,6 @@
 }
 
 .sectionTitle {
-  -webkit-user-select: none;
   user-select: none;
   margin-inline-start: 2%;
   margin-block: 0.5em;
@@ -55,19 +54,23 @@
   margin-block: 0.5em;
 }
 
-:deep(.switchGrid) {
+%switch-grid {
   align-items: center;
   display: grid;
   grid-template-columns: auto auto;
   justify-content: space-evenly;
 
-  @media only screen and (max-width: 680px) {
+  @media only screen and (width <= 680px) {
     grid-template-columns: auto;
   }
 }
 
+:deep(.switchGrid) {
+  @extend %switch-grid;
+}
+
 :deep(.switchColumnGrid) {
-  @extend :deep(.switchGrid);
+  @extend %switch-grid;
 
   align-items: start;
 }
@@ -82,19 +85,19 @@
   text-align: center;
 }
 
-@media only screen and (max-width: 460px) {
+@media only screen and (width <= 460px) {
   :deep(.settingsFlexStart460px) {
     justify-content: flex-start;
   }
 }
 
-@media only screen and (max-width: 500px) {
+@media only screen and (width <= 500px) {
   :deep(.settingsFlexStart500px) {
     justify-content: flex-start;
   }
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .settingsSection {
     > div {
       :deep(.text.bottom) {
diff --git a/src/renderer/components/ft-share-button/ft-share-button.scss b/src/renderer/components/ft-share-button/ft-share-button.scss
index cfccc6a6b..b04bd4679 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.scss
+++ b/src/renderer/components/ft-share-button/ft-share-button.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .shareLinks {
   display: grid;
   grid-auto-flow: column;
@@ -89,7 +90,7 @@
   }
 }
 
-@media only screen and (max-width: 450px) {
+@media only screen and (width <= 450px) {
   .shareLinks {
     grid-auto-flow: row;
     margin-inline: auto;
diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index a71a5a90c..c6463d7c2 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -1,11 +1,13 @@
+/* stylelint-disable no-descending-specificity */
 .pure-material-slider {
   --pure-material-safari-helper1: var(--accent-color-opacity1);
   --pure-material-safari-helper2: var(--accent-color-opacity2);
   --pure-material-safari-helper3: var(--accent-color-opacity3);
   --pure-material-safari-helper4: var(--accent-color-opacity4);
+
   display: inline-block;
   inline-size: 380px;
-  color: rgba(var(--primary-text-color), 0.87);
+  color: rgb(var(--primary-text-color) 0.87);
   font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
   font-size: 16px;
   line-height: 1.5;
@@ -16,7 +18,7 @@
 
 /* Input */
 .pure-material-slider > input {
-  -webkit-appearance: none;
+  appearance: none;
   position: relative;
   inset-block-start: 24px;
   display: block;
@@ -41,6 +43,7 @@
 }
 
 /* Focus */
+/* stylelint-disable-next-line a11y/no-outline-none */
 .pure-material-slider > input:focus {
   outline: none;
 }
@@ -68,8 +71,7 @@
 /* Webkit | Thumb */
 .pure-material-slider > input::-webkit-slider-thumb {
   appearance: none;
-  -webkit-appearance: none;
-  border: none;
+  border: 0;
   border-radius: 50%;
   block-size: 2px;
   inline-size: 2px;
@@ -98,7 +100,7 @@
 
 /* Webkit | Disabled */
 .pure-material-slider > input:disabled::-webkit-slider-runnable-track {
-  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+  background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38);
 }
 
 .pure-material-slider > input:disabled::-webkit-slider-thumb {
@@ -111,7 +113,7 @@
 /* Moz | Track */
 .pure-material-slider > input::-moz-range-track {
   margin-block: 0;
-  margin-auto: 17px;
+  margin: 17px;
   border-radius: 1px;
   inline-size: 100%;
   block-size: 2px;
@@ -121,8 +123,7 @@
 /* Moz | Thumb */
 .pure-material-slider > input::-moz-range-thumb {
   appearance: none;
-  -moz-appearance: none;
-  border: none;
+  border: 0;
   border-radius: 50%;
   block-size: 2px;
   inline-size: 2px;
@@ -158,12 +159,13 @@
 
 /* Moz | Disabled */
 .pure-material-slider > input:disabled::-moz-range-track {
-  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+  background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38);
 }
 
 .pure-material-slider > input:disabled::-moz-range-progress {
-  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
+  background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.87);
 }
+
 .pure-material-slider > input:disabled::-moz-range-thumb {
   background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
   box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
@@ -171,7 +173,7 @@
 }
 
 .pure-material-slider > input::-moz-focus-outer {
-  border: none;
+  border: 0;
 }
 
 /* MS | Track */
@@ -179,7 +181,7 @@
   box-sizing: border-box;
   margin-block: 17px;
   margin-inline: 0;
-  border: none;
+  border: 0;
   border-radius: 1px;
   padding-block: 0;
   padding-inline: 17px;
@@ -206,7 +208,7 @@
   appearance: none;
   margin-block: 0;
   margin-inline: 17px;
-  border: none;
+  border: 0;
   border-radius: 50%;
   block-size: 2px;
   inline-size: 2px;
@@ -235,11 +237,11 @@
 
 /* MS | Disabled */
 .pure-material-slider > input:disabled::-ms-fill-lower {
-  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+  background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38);
 }
 
 .pure-material-slider > input:disabled::-ms-fill-upper {
-  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+  background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38);
   opacity: 0.38;
 }
 
@@ -249,7 +251,7 @@
   transform: scale(4, 4);
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .pure-material-slider {
     inline-size: 100%;
   }
diff --git a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
index b052038c4..a42c9ecee 100644
--- a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
+++ b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
@@ -3,7 +3,7 @@
   padding-block: 0;
   padding-inline: 10px;
 
-  @media only screen and (max-width: 680px) {
+  @media only screen and (width <= 680px) {
     inline-size: 100%;
   }
 
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
index 467ce1177..249281b8a 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
@@ -3,9 +3,10 @@
   margin-block-end: 10px;
   border-radius: 4px;
   block-size: fit-content;
-  box-shadow: 0px 1px 2px rgb(0 0 0 / 50%);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
   display: flex;
   flex-wrap: nowrap;
+
   /* addresses odd clipping behavior when adjusting window size */
   background-color: var(--primary-color);
 }
@@ -76,7 +77,6 @@
   overflow-y: scroll;
   position: absolute;
   text-align: center;
-  -webkit-user-select: none;
   user-select: none;
   z-index: 3;
   // accounts for parent's left and right margins
@@ -112,7 +112,6 @@
       justify-content: center;
       flex-shrink: 0;
       border-radius: 50%;
-      -webkit-border-radius: 50%;
     }
 
     .initial {
@@ -120,7 +119,6 @@
       line-height: 1em;
       text-align: center;
       user-select: none;
-      -webkit-user-select: none;
     }
 
     .profileName {
diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index 8ab713ae9..1a5ef01a5 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -3,6 +3,7 @@
   inset-inline-start: 50vw;
   transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
   inset-block-end: 50px;
+
   /* Higher than any prompt */
   z-index: 300;
   display: flex;
@@ -16,8 +17,8 @@
   margin: 5px;
   text-align: center;
   overflow-y: auto;
-  background-color: rgba(0, 0, 0, 0.7);
-  color: white;
+  background-color: rgb(0 0 0 / 70%);
+  color: #FFF;
   opacity: 0;
   border-radius: 20px;
   cursor: pointer;
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index 5d939f8c5..b96c676fa 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -74,7 +74,7 @@
     }
   }
 
-  @media (max-width: 680px) {
+  @media (width <= 680px) {
     max-inline-size: 250px;
   }
 }
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 642a65e2e..9419eeed1 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -7,30 +7,6 @@
   padding: 0;
 }
 
-.button:focus + .text,
-.button:hover + .text {
-  opacity: 1;
-  visibility: visible;
-}
-
-.button:focus + .text.bottom,
-.button:hover + .text.bottom,
-.button:hover + .text.bottom-left,
-.button:hover + .text.bottom-left,
-.button:focus + .text.top,
-.button:hover + .text.top {
-  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
-  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
-}
-
-.button:focus + .text.left,
-.button:hover + .text.left,
-.button:focus + .text.right,
-.button:hover + .text.right {
-  -webkit-transform: translate(0, -50%);
-  transform: translate(0, -50%);
-}
-
 .text {
   background-color: color-mix(in srgb, var(--primary-text-color) 80%, transparent);
   border-radius: 20px;
@@ -56,7 +32,6 @@
   margin-block-start: 1em;
   inset-block-start: 100%;
   inset-inline-start: 50%;
-  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
   transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
 }
 
@@ -64,15 +39,13 @@
   margin-block-start: 1em;
   inset-block-start: 100%;
   inset-inline-start: -100px;
-  -webkit-transform: translate(-50%, -1em);
   transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
 }
 
 .text.left {
-  margin-inline-end:1em;
+  margin-inline-end: 1em;
   inset-inline-end: 100%;
   inset-block-start: 50%;
-  -webkit-transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%);
   transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%);
 }
 
@@ -80,7 +53,6 @@
   inset-inline-start: 100%;
   margin-inline-start: 1em;
   inset-block-start: 50%;
-  -webkit-transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%);
   transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%);
 }
 
@@ -88,17 +60,37 @@
   inset-block-end: 100%;
   inset-inline-start: 50%;
   margin-block-end: 1em;
-  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em);
   transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em);
 }
 
+.button:focus + .text,
+.button:hover + .text {
+  opacity: 1;
+  visibility: visible;
+}
+
+.button:focus + .text.bottom,
+.button:hover + .text.bottom,
+.button:hover + .text.bottom-left,
+.button:focus + .text.top,
+.button:hover + .text.top {
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
+}
+
+.button:focus + .text.left,
+.button:hover + .text.left,
+.button:focus + .text.right,
+.button:hover + .text.right {
+  transform: translate(0, -50%);
+}
+
 .text.allowNewlines {
   white-space: pre-wrap;
   text-align: start;
   inline-size: 55vw;
 }
 
-@media only screen and (max-width: 1100px) {
+@media only screen and (width <= 1100px) {
   inline-size: 40vw;
 }
 
diff --git a/src/renderer/components/ft-video-player/ft-video-player.css b/src/renderer/components/ft-video-player/ft-video-player.css
index 1eb804c1b..b098db5ba 100644
--- a/src/renderer/components/ft-video-player/ft-video-player.css
+++ b/src/renderer/components/ft-video-player/ft-video-player.css
@@ -30,7 +30,7 @@
 }
 /* stylelint-enable liberty/use-logical-spec */
 
-@media only screen and (max-width: 460px) {
+@media only screen and (width <= 460px) {
   :deep(.dash-selector .vjs-menu) {
     max-block-size: 14em;
   }
diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss
index da6adcef1..10bf1e6d7 100644
--- a/src/renderer/components/playlist-info/playlist-info.scss
+++ b/src/renderer/components/playlist-info/playlist-info.scss
@@ -11,7 +11,7 @@
   // Ensure placeholder image displayed at same aspect ratio as most other images
   aspect-ratio: 16/9;
 
-  @media only screen and (max-width: 800px) {
+  @media only screen and (width <= 800px) {
     display: none;
   }
 }
@@ -34,7 +34,7 @@
   overflow-y: auto;
   white-space: break-spaces;
 
-  @media only screen and (max-width: 500px) {
+  @media only screen and (width <= 500px) {
     max-block-size: 10vh;
   }
 }
@@ -77,9 +77,8 @@
   margin-block-start: 8px;
 }
 
-@media only screen and (max-width: 1250px) {
+@media only screen and (width <= 1250px) {
   :deep(.sharePlaylistIcon .iconDropdown) {
-    inset-inline-start: auto;
-    inset-inline-end: auto;
+    inset-inline: auto auto;
   }
 }
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index 4945a84ec..112622586 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -29,22 +29,19 @@
   inset-block-end: 60px;
   inline-size: 70px;
   z-index: 0;
-  -webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
-  -moz-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
-  box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
+  box-shadow: 3px -3px 5px 0 rgb(0 0 0 / 20%);
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .sideNavMoreOptions {
     display: block;
   }
 
   .sideNav, .closed {
-    margin-block-start: 0px;
+    margin-block-start: 0;
     block-size: 60px;
     inline-size: 100%;
-    inset-block-end: 0px;
-    inset-block-start: auto;
+    inset-block: auto 0;
     overflow-y: inherit;
   }
 
@@ -56,15 +53,15 @@
   }
 
   .navLabel {
-    margin-inline-start: 0px;
+    margin-inline-start: 0;
     inline-size: 100%;
     text-align: center;
-    inset-inline-start: 0px;
+    inset-inline-start: 0;
     font-size: 11px;
   }
 
   .navIcon {
-    margin-inline-start: 0px;
+    margin-inline-start: 0;
     inline-size: 100%;
     display: block;
     margin-block-start: 0.5em;
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index a9a869114..dec21cf60 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -13,14 +13,12 @@
   transition-duration: 150ms;
   transition-timing-function: ease-in-out;
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .inner {
   block-size: 100%;
   inline-size: 200px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
 }
 
 .closed .inner {
@@ -50,6 +48,19 @@
   display: none;
 }
 
+.navOption, .channelLink {
+  display: block;
+  color: inherit;
+  text-decoration: inherit;
+}
+
+
+.navOption .navLabel {
+  margin-inline-start: 40px;
+  overflow: hidden;
+  word-break: break-word;
+}
+
 .navOption:hover, .navChannel:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
@@ -66,12 +77,6 @@
   margin-inline-start: 10px;
 }
 
-.navOption .navLabel {
-  margin-inline-start: 40px;
-  overflow: hidden;
-  word-break: break-word;
-}
-
 .navChannel .navLabel {
   overflow: hidden;
   margin-inline-start: 40px;
@@ -84,16 +89,9 @@
   margin: 0;
   position: absolute;
   inset-block-start: 50%;
-  -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }
 
-.navOption, .channelLink {
-  display: block;
-  color: inherit;
-  text-decoration: inherit;
-}
-
 .channelThumbnail {
   border-radius: 50%;
   vertical-align: middle;
@@ -127,22 +125,23 @@
 }
 
 .closed .navIcon {
-  margin-inline-start: 0px;
+  margin-inline-start: 0;
   inline-size: 100%;
   display: block;
-  margin-block-end: 0px;
+  margin-block-end: 0;
 }
+
 .closed .navIconExpand{
   block-size:1.3em;
 }
 
 .closed .navLabel {
-  margin-inline-start: 0px;
+  margin-inline-start: 0;
   inline-size: 100%;
   text-align: center;
-  inset-inline-start: 0px;
+  inset-inline-start: 0;
   font-size: 11px;
-  margin-block-end: 0em;
+  margin-block-end: 0;
 }
 
 .closed .navChannel {
@@ -156,16 +155,13 @@
   position: static;
   display: block;
   float: none;
-  margin-block: 0;
   margin-inline: auto;
-  inset-block-start: 0px;
-  -ms-transform: none;
+  inset-block-start: 0;
   transform: none;
-  margin-block-start: 0.3em;
-  margin-block-end: 0.3em;
+  margin-block: 0.3em;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .inner {
     display: contents; /* sunglasses emoji */
   }
@@ -178,44 +174,41 @@
     position: fixed;
     inset-inline-start: 0;
     inset-block-end: 0;
-
     display: flex;
   }
 
   .topNavOption {
-    margin-block-start: 0px;
-    padding-inline-start: 10px;
-    padding-inline-end: 10px;
+    margin-block-start: 0;
+    padding-inline: 10px;
   }
 
   .sideNav, .closed {
-    margin-block-start: 0px;
+    margin-block-start: 0;
     block-size: 60px;
     inline-size: 100%;
-    inset-block-end: 0px;
-    inset-block-start: auto;
+    inset-block: auto 0;
     overflow-y: hidden;
   }
 
   .navOption, .closed .navOption {
     inline-size: 70px;
     block-size: 40px;
-    padding: 0px;
-    padding-block-start: 10px;
-    padding-block-end: 10px;
+    padding: 0;
+    padding-block: 10px 10px;
   }
 
   .navLabel {
-    margin-inline-start: 0px;
+    margin-inline-start: 0;
     inline-size: 100%;
     text-align: center;
-    inset-inline-start: 0px;
+    inset-inline-start: 0;
     font-size: 11px;
   }
 
   .moreOption {
     display: block;
   }
+
   .closed.hiddenLabels{
     inline-size: 100%;
   }
diff --git a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
index 43d037639..07025c77f 100644
--- a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
+++ b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
@@ -14,13 +14,13 @@
   inset-inline-end: 10px;
 }
 
-@media only screen and (max-width: 350px) {
+@media only screen and (width <= 350px) {
   .floatingTopButton {
     position: absolute
   }
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 943ffce8b..e53ece4e3 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -14,15 +14,14 @@
   box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
   display: flex;
   block-size: 60px;
-  inset-inline-start: 0;
+  inset-inline: 0;
   line-height: 60px;
   position: sticky;
-  inset-inline-end: 0;
   inset-block-start: 0;
   inline-size: 100%;
   z-index: 4;
 
-  @media only screen and (min-width: 961px) {
+  @media only screen and (width >= 961px) {
     display: grid;
     grid-template-columns: 1fr 440px 1fr;
   }
@@ -31,13 +30,13 @@
     background-color: var(--primary-color);
   }
 
-  @media only screen and (max-width: 680px) {
+  @media only screen and (width <= 680px) {
     position: fixed;
   }
 }
 
 .menuIcon {
-  @media only screen and (max-width: 680px) {
+  @media only screen and (width <= 680px) {
     display: none;
   }
 }
@@ -58,10 +57,9 @@
 
   &.arrowBackwardDisabled,
   &.arrowForwardDisabled {
-    color: gray;
+    color: #808080;
     opacity: 0.5;
     pointer-events: none;
-    -webkit-user-select: none;
     user-select: none;
   }
 
@@ -112,13 +110,13 @@
   }
 
   .navSearchIcon {
-    @media only screen and (min-width: 681px) {
+    @media only screen and (width >= 681px) {
       display: none;
     }
   }
 
   .navNewWindowIcon {
-    @media only screen and (max-width: 680px) {
+    @media only screen and (width <= 680px) {
       display: none;
     }
   }
@@ -173,7 +171,7 @@
       inset-block-start: -3px;
       inline-size: 100px;
 
-      @media only screen and (max-width: 680px) {
+      @media only screen and (width <= 680px) {
         display: none;
       }
 
@@ -192,11 +190,10 @@
     align-items: center;
     display: flex;
 
-    @media only screen and (max-width: 680px) {
+    @media only screen and (width <= 680px) {
       background-color: var(--side-nav-color);
-      inset-inline-start: 0;
+      inset-inline: 0;
       position: fixed;
-      inset-inline-end: 0;
       inset-block-start: 60px;
 
       @include top-nav-is-colored {
@@ -210,18 +207,16 @@
   }
 
   .searchFilters {
-    inset-inline-start: 0;
+    inset-inline: 0;
     margin-block: 10px 20px;
     margin-inline: 220px 20px;
     position: absolute;
-    inset-inline-end: 0;
     transition: margin 150ms ease-in-out;
 
-    @media only screen and (max-width: 680px) {
-      inset-inline-start: 0;
+    @media only screen and (width <= 680px) {
+      inset-inline: 0;
       margin-block: 95px 0;
       margin-inline: 10px;
-      inset-inline-end: 0;
     }
   }
 }
diff --git a/src/renderer/components/watch-video-chapters/watch-video-chapters.css b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
index d37cce505..f75e8e5a9 100644
--- a/src/renderer/components/watch-video-chapters/watch-video-chapters.css
+++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
@@ -3,8 +3,7 @@
 }
 
 .chaptersTitle {
-  margin-block-start: 10px;
-  margin-block-end: 0;
+  margin-block: 10px 0;
   cursor: pointer;
 }
 
@@ -35,11 +34,9 @@
 
 .chapter {
   display: grid;
-  grid-template-areas:
-    'thumbnail title'
-    'thumbnail timestamp';
-  grid-template-columns: auto 1fr;
-  grid-template-rows: min(auto, 2fr) 1fr;
+  grid-template:
+    'thumbnail title' 2fr
+    'thumbnail timestamp' 2fr / auto 1fr;
   column-gap: 10px;
   justify-items: start;
   cursor: pointer;
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index a15d4999c..79185b130 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -31,7 +31,7 @@
   float: var(--float-right-ltr-rtl-value);
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (width <= 1000px) {
   .commentSort {
     float: none;
   }
@@ -54,7 +54,6 @@
   inline-size: 60px;
   block-size: 60px;
   border-radius: 200px;
-  -webkit-border-radius: 200px;
 }
 
 .commentThumbnailHidden {
@@ -70,7 +69,6 @@
   color: rgb(0 0 0);
   background-color: rgb(235 160 172);
   border-radius: 50%;
-  -webkit-border-radius: 50%;
 }
 
 .commentAuthorWrapper {
@@ -104,9 +102,8 @@
 .commentPinned {
   font-weight: normal;
   font-size: 12px;
-  margin-block-start: 0;
+  margin-block: 0 5px;
   margin-inline-start: 68px;
-  margin-block-end: 5px;
 }
 
 .commentDate {
@@ -150,7 +147,6 @@
   inline-size: 15px;
   block-size: 15px;
   border-radius: 50%;
-  -webkit-border-radius: 50%;
 }
 
 .commentHeartBadgeWhite {
diff --git a/src/renderer/components/watch-video-description/watch-video-description.css b/src/renderer/components/watch-video-description/watch-video-description.css
index 721c26344..c7b2a437e 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.css
+++ b/src/renderer/components/watch-video-description/watch-video-description.css
@@ -4,7 +4,7 @@
 }
 
 .description {
-  font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   font-size: 17px;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index 09177b58d..a6e3252aa 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -58,22 +58,22 @@
     justify-content: flex-end;
     gap: 4px;
 
-    @media screen and (max-width: 680px) {
+    @media screen and (width <= 680px) {
       :deep(.iconDropdown) {
-        inset-inline-start: auto;
-        inset-inline-end: calc(50% - 20px);
+        inset-inline: auto calc(50% - 20px);
       }
     }
 
-    @media screen and (max-width: 460px) {
+    @media screen and (width <= 460px) {
       flex-wrap: nowrap;
+
       :deep(.iconDropdown) {
-        inset-inline-start: auto;
-        inset-inline-end: auto;
+        inset-inline: auto auto;
       }
     }
   }
-  @media screen and (max-width: 460px) {
+
+  @media screen and (width <= 460px) {
     flex-direction: column;
     align-items: flex-start;
     margin-block-start: 10px;
@@ -93,7 +93,7 @@
     max-inline-size: 210px;
     text-align: end;
 
-    @media screen and (max-width: 680px) {
+    @media screen and (width <= 680px) {
       margin-inline-start: 0;
       text-align: start;
     }
@@ -110,8 +110,9 @@
       gap: 3px;
     }
   }
+
   .datePublishedAndViewCount {
-    @media only screen and (max-width: 460px) {
+    @media only screen and (width <= 460px) {
       display: flex;
       justify-content: left;
       flex-direction: column;
@@ -121,6 +122,7 @@
       }
     }
   }
+
   .videoViews {
     white-space: nowrap;
   }
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index d73676000..722c74632 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -66,13 +66,11 @@
   display: inline-block;
   padding: 1px;
   padding-inline-end: 10px;
-  margin-inline-start: 2px;
-  margin-inline-end: 2px;
+  margin-inline: 2px 2px;
   block-size: 30px;
   cursor: pointer;
   background-color: var(--primary-color);
   border-radius: 200px;
-  -webkit-border-radius: 200px;
 }
 
 .superChatContent {
@@ -81,6 +79,17 @@
   color: var(--text-with-main-color);
 }
 
+.channelThumbnail {
+  inline-size: 25px;
+  border-radius: 200px;
+}
+
+.channelName {
+  color: var(--tertiary-text-color);
+  font-weight: bold;
+  padding-inline-end: 5px;
+}
+
 .superChat .channelThumbnail {
   margin-block-start: 3px;
   margin-inline-start: 3px;
@@ -92,7 +101,7 @@
 }
 
 .openedSuperChat {
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgb(0 0 0 / 70%);
   inline-size: 100%;
   block-size: 415px;
   position: absolute;
@@ -103,6 +112,24 @@
   z-index: 1;
 }
 
+.superChatMessage {
+  inline-size: 90%;
+  grid-template-columns: auto;
+  margin-inline: 5% 5%;
+  margin-block: 25px 10px;
+  background-color: var(--primary-color);
+  border-radius: 5px;
+  position: relative;
+}
+
+.upperSuperChatMessage {
+  margin-block-start: -15px;
+  inline-size: 100%;
+  block-size: 55px;
+  background-color: var(--primary-color-hover);
+  border-radius: 5px 5px 0 0;
+}
+
 .openedSuperChat .superChatMessage {
   position: absolute;
 }
@@ -112,7 +139,7 @@
 }
 
 .comment .upperSuperChatMessage {
-  padding: 0px;
+  padding: 0;
 }
 
 .comment {
@@ -123,28 +150,6 @@
   gap: 5px;
 }
 
-.superChatMessage {
-  inline-size: 90%;
-  grid-template-columns: auto;
-  margin-inline-start: 5%;
-  margin-inline-end: 5%;
-  margin-block-start: 25px;
-  margin-block-end: 10px;
-  background-color: var(--primary-color);
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-  position: relative;
-}
-
-.upperSuperChatMessage {
-  margin-block-start: -15px;
-  inline-size: 100%;
-  block-size: 55px;
-  background-color: var(--primary-color-hover);
-  border-radius: 5px 5px 0px 0px;
-  -webkit-border-radius: 5px 5px 0px 0px;
-}
-
 .upperSuperChatMessage .channelThumbnail {
   inline-size: 45px;
   margin-inline-start: 10px;
@@ -164,7 +169,7 @@
   font-weight: bold;
   margin-inline-start: 65px;
   position: absolute;
-  inset-block-start: 0px;
+  inset-block-start: 0;
 }
 
 .superChatMessage .chatMessage {
@@ -177,25 +182,12 @@
   overflow-y: auto;
 }
 
-.channelThumbnail {
-  inline-size: 25px;
-  border-radius: 200px;
-  -webkit-border-radius: 200px;
-}
-
 .chatContent {
-  margin-block-start: 5px;
-  margin-block-end: 2px;
+  margin-block: 5px 2px;
   font-size: 12px;
   word-wrap: break-word;
 }
 
-.channelName {
-  color: var(--tertiary-text-color);
-  font-weight: bold;
-  padding-inline-end: 5px;
-}
-
 .member {
   color: #4CAF50;
 }
@@ -223,7 +215,6 @@
   inset-block-end: 20px;
   cursor: pointer;
   border-radius: 200px;
-  -webkit-border-radius: 200px;
   text-align: center;
   transition: background 0.2s ease-out;
 }
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index d327b8775..0a632bf00 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -23,20 +23,25 @@
 
 .playlistProgressBar {
   margin-inline-start: 10px;
+
   /* > In order to let ::-webkit-progress-value take effect, appearance needs to be set to none on the <progress> element. */
+
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value */
   appearance: none;
 }
 
 .playlistProgressBar::-webkit-progress-value {
   /* Color for filled part */
+
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value */
+
   /* background-color is required to be declared here to prevent color being green */
   background-color: var(--accent-color);
 }
 
 .playlistProgressBar::-webkit-progress-bar {
   /* Color for unfilled part */
+
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar */
   background-color: var(--secondary-text-color);
 }
@@ -63,6 +68,12 @@
   transition: background 0.2s ease-in;
 }
 
+.playlistIconActive {
+  color: var(--accent-color);
+  stroke-width: 10;
+  stroke: var(--accent-color);
+}
+
 .playlistIconActive:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--accent-color-hover);
@@ -71,12 +82,6 @@
   transition: background 0.2s ease-in;
 }
 
-.playlistIconActive {
-  color: var(--accent-color);
-  stroke-width: 10;
-  stroke: var(--accent-color);
-}
-
 .playlistItems {
   overflow-y: auto;
   block-size: 360px;
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index 22be37765..c6f6a5d7a 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 $thumbnail-overlay-opacity: 0.85;
 $watched-transition-duration: 0.5s;
 
@@ -86,7 +87,6 @@ $watched-transition-duration: 0.5s;
       grid-column: 1;
       grid-row: 1;
       user-select: none;
-      -webkit-user-select: none;
     }
 
     .thumbnailLink {
@@ -106,22 +106,20 @@ $watched-transition-duration: 0.5s;
     }
 
     .videoWatched {
-      align-self: flex-start;
+      place-self: flex-start start;
       background-color: var(--bg-color);
       color: var(--primary-text-color);
-      justify-self: start;
       opacity: $thumbnail-overlay-opacity;
       padding: 2px;
       pointer-events: none;
     }
 
     .videoDuration {
-      align-self: flex-end;
+      place-self: flex-end end;
       background-color: var(--card-bg-color);
       border-radius: 5px;
       color: var(--primary-text-color);
       font-size: 15px;
-      justify-self: end;
       line-height: 1.2;
       margin-block: 0 4px;
       margin-inline: 0 4px;
@@ -141,9 +139,8 @@ $watched-transition-duration: 0.5s;
     }
 
     .externalPlayerIcon {
-      align-self: flex-end;
+      place-self: flex-end start;
       font-size: 17px;
-      justify-self: start;
       margin-block-end: 4px;
       margin-inline-start: 4px;
     }
@@ -152,12 +149,12 @@ $watched-transition-duration: 0.5s;
       justify-self: end;
       margin-inline-end: 3px;
       margin-block-start: 3px;
-
       display: grid;
       grid-auto-flow: column;
       justify-content: flex-end;
       block-size: fit-content;
     }
+
     .quickBookmarkVideoIcon,
     .addToPlaylistIcon,
     .trashIcon,
@@ -167,18 +164,16 @@ $watched-transition-duration: 0.5s;
     }
 
     .watchedProgressBar {
-      align-self: flex-end;
+      place-self: flex-end stretch;
       background-color: var(--primary-color);
       block-size: 2px;
-      justify-self: stretch;
       z-index: 2;
     }
 
     .videoCountContainer {
-      align-self: stretch;
+      place-self: stretch end;
       display: grid;
       font-size: 20px;
-      justify-self: end;
       inline-size: 60px;
       pointer-events: none;
 
@@ -256,9 +251,7 @@ $watched-transition-duration: 0.5s;
         font-size: 12px;
       }
 
-      & {
-        @include low-contrast-when-watched(var(--secondary-text-color));
-      }
+      @include low-contrast-when-watched(var(--secondary-text-color));
 
       .channelName {
         @include low-contrast-when-watched(var(--secondary-text-color));
@@ -293,7 +286,7 @@ $watched-transition-duration: 0.5s;
         inline-size: 336px;
         max-inline-size: 25vw;
 
-        @media only screen and (max-width: 680px) {
+        @media only screen and (width <= 680px) {
           max-inline-size: 30vw;
         }
       }
@@ -302,7 +295,7 @@ $watched-transition-duration: 0.5s;
         max-inline-size: 25vw;
         max-block-size: 25vw;
 
-        @media only screen and (max-width: 680px) {
+        @media only screen and (width <= 680px) {
           max-inline-size: 30vw;
           max-block-size: 30vw;
         }
@@ -391,7 +384,6 @@ $watched-transition-duration: 0.5s;
 .upcoming {
   text-transform: uppercase;
   user-select: none;
-  -webkit-user-select: none;
 }
 
 // we use h3 for semantic reasons but don't want to keep the h3 style
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 564e043c3..b927f93f9 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -281,6 +281,7 @@ const state = {
   thumbnailPreference: '',
   blurThumbnails: false,
   useProxy: false,
+  userPlaylistSortOrder: 'date_added_descending',
   useRssFeeds: false,
   useSponsorBlock: false,
   videoVolumeMouseScroll: false,
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 741dc631d..16f35ae59 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -7,7 +7,7 @@
 .pastelPink,
 .hotPink,
 .nordic {
-  --primary-input-color: rgba(0, 0, 0, 0.50);
+  --primary-input-color: rgb(0 0 0 / 50%);
 }
 
 .system[data-system-theme*='light'], .light,
@@ -31,7 +31,7 @@
 .catppuccinMocha,
 .pastelPink,
 .nordic {
-  --primary-input-color: rgba(0, 0, 0, 0.50);
+  --primary-input-color: rgb(0 0 0 / 50%);
   --side-nav-hover-text-color: var(--primary-text-color);
 }
 
@@ -62,36 +62,36 @@
 .catppuccinMocha,
 .hotPink,
 .nordic {
-  --primary-shadow-color: rgba(0, 0, 0, 0.75);
+  --primary-shadow-color: rgb(0 0 0 / 75%);
 }
 
 .system[data-system-theme*='light'], .light {
   --primary-text-color: #212121;
   --secondary-text-color: #424242;
   --tertiary-text-color: #757575;
-  --primary-shadow-color: rgba(232, 232, 232, 1);
+  --primary-shadow-color: rgb(232 232 232 / 100%);
   --title-color: #3f7ac6;
   --bg-color: #f1f1f1;
-  --favorite-icon-color: #00CC00;
-  --card-bg-color: #FFFFFF;
-  --secondary-card-bg-color: #eeeeee;
-  --scrollbar-color: #CCCCCC;
+  --favorite-icon-color: #0C0;
+  --card-bg-color: #FFF;
+  --secondary-card-bg-color: #eee;
+  --scrollbar-color: #CCC;
   --scrollbar-color-hover: #BDBDBD;
-  --side-nav-color: #FFFFFF;
+  --side-nav-color: #FFF;
   --side-nav-hover-color: #e0e0e0;
   --side-nav-active-color: #757575;
   --search-bar-color: #f5f5f5;
 }
 
 .system[data-system-theme*='dark'], .dark {
-  --primary-text-color: #EEEEEE;
+  --primary-text-color: #EEE;
   --secondary-text-color: #ddd;
   --tertiary-text-color: #999;
-  --title-color: #EEEEEE;
+  --title-color: #EEE;
   --bg-color: #212121;
-  --favorite-icon-color: #00FF00;
+  --favorite-icon-color: #0F0;
   --card-bg-color: #303030;
-  --secondary-card-bg-color: rgba(0, 0, 0, 0.75);
+  --secondary-card-bg-color: rgb(0 0 0 / 75%);
   --scrollbar-color: #414141;
   --scrollbar-color-hover: #757575;
   --side-nav-color: #262626;
@@ -101,14 +101,14 @@
 }
 
 .black {
-    --primary-text-color: #EEEEEE;
+    --primary-text-color: #EEE;
     --secondary-text-color: #ddd;
-    --tertiary-text-color: #EEEEEE;
-    --title-color: #EEEEEE;
-    --bg-color: #000000;
-    --favorite-icon-color: #00FF00;
-    --card-bg-color: #000000;
-    --secondary-card-bg-color: rgba(0, 0, 0, 0.75);
+    --tertiary-text-color: #EEE;
+    --title-color: #EEE;
+    --bg-color: #000;
+    --favorite-icon-color: #0F0;
+    --card-bg-color: #000;
+    --secondary-card-bg-color: rgb(0 0 0 / 75%);
     --scrollbar-color: #515151;
     --scrollbar-color-hover: #424242;
     --side-nav-color: #0f0f0f;
@@ -118,13 +118,13 @@
 }
 
 .gray {
-  --primary-text-color: #EEEEEE;
+  --primary-text-color: #EEE;
   --secondary-text-color: #E0E0E0;
   --tertiary-text-color: #F5F5F5;
-  --title-color: #EEEEEE;
+  --title-color: #EEE;
   --bg-color: #212121;
   --card-bg-color: #303030;
-  --secondary-card-bg-color: rgba(0, 0, 0, 0.75);
+  --secondary-card-bg-color: rgb(0 0 0 / 75%);
   --side-nav-color: #262626;
   --side-nav-hover-color: #212121;
   --side-nav-active-color: #303030;
@@ -137,7 +137,7 @@
   --tertiary-text-color: #e5e8f3;
   --title-color: #BD93F9;
   --bg-color: #282A36;
-  --favorite-icon-color: #00FF00;
+  --favorite-icon-color: #0F0;
   --card-bg-color: #33353F;
   --secondary-card-bg-color: #282A36;
   --scrollbar-color: #44475A;
@@ -156,7 +156,7 @@
   --tertiary-text-color: #a6adc8;
   --title-color: var(--accent-color);
   --bg-color: #1e1e2e;
-  --favorite-icon-color: #00FF00;
+  --favorite-icon-color: #0F0;
   --card-bg-color: #181825;
   --secondary-card-bg-color: #1e1e2e;
   --scrollbar-color: #313244;
@@ -173,12 +173,12 @@
   --primary-text-color: #1F002B;
   --secondary-text-color: #361836;
   --tertiary-text-color: #5A285A;
-  --primary-shadow-color: rgb(255, 240, 240, 0.5);
+  --primary-shadow-color: rgb(255 240 240 / 50%);
   --title-color: #185EB4;
   --bg-color: #ffeadd;
   --favorite-icon-color: #760278;
   --card-bg-color: #ffd1dc;
-  --secondary-card-bg-color: #FFFFFF;
+  --secondary-card-bg-color: #FFF;
   --scrollbar-color: #f5c8d3;
   --scrollbar-color-hover: #760278;
   --scrollbar-text-color-hover: var(--scrollbar-color);
@@ -195,62 +195,63 @@
   --primary-text-color: #FFFF;
   --secondary-text-color: #FFFF;
   --tertiary-text-color: #FFFF;
-  --title-color: #000000;
+  --title-color: #000;
   --bg-color: #ff008a;
-  --favorite-icon-color: #00FF00;
+  --favorite-icon-color: #0F0;
   --card-bg-color: #DE1C85;
-  --secondary-card-bg-color: rgba(0, 0, 0, 0.75);
-  --scrollbar-color: #FFFFFF;
+  --secondary-card-bg-color: rgb(0 0 0 / 75%);
+  --scrollbar-color: #FFF;
   --scrollbar-color-hover: #C0F6FF;
-  --scrollbar-text-color-hover: #000000;
+  --scrollbar-text-color-hover: #000;
   --side-nav-color: #EE1E90;
-  --side-nav-hover-color: #FFFFFF;
-  --side-nav-hover-text-color: #000000;
+  --side-nav-hover-color: #FFF;
+  --side-nav-hover-text-color: #000;
   --side-nav-active-color: #959595;
-  --side-nav-active-text-color: #000000;
+  --side-nav-active-text-color: #000;
   --search-bar-color: #9C2D5D;
   --logo-icon: url("../../_icons/iconWhiteSmall.svg");
   --logo-text: url("../../_icons/textWhiteSmall.svg");
+
   /* The hot pink theme does not have a great color contrast with
   many other colors than black and white. This means that the primary and
   secondary theme colors are forced here to be black so as to avoid any
   accessibility concerns. */
-  --primary-color: #000000 !important;
-  --primary-color-hover: #000000 !important;
-  --primary-color-active: #000000 !important;
-  --text-with-main-color: #FFFFFF !important;
-  --text-with-accent-color: #FFFFFF !important;
-  --accent-color: #000000 !important;
+  --primary-color: #000 !important;
+  --primary-color-hover: #000 !important;
+  --primary-color-active: #000 !important;
+  --text-with-main-color: #FFF !important;
+  --text-with-accent-color: #FFF !important;
+  --accent-color: #000 !important;
   --accent-color-hover: #808080 !important;
   --accent-color-active: #6A739A !important;
-  --accent-color-light: #000000 !important;
-  --accent-color-visited: #000000 !important;
-  --accent-color-opacity1: rgba(0,0,0,0.04) !important;
-  --accent-color-opacity2: rgba(0,0,0,0.12) !important;
-  --accent-color-opacity3: rgba(255,255,255,0.16) !important;
-  --accent-color-opacity4: rgba(255,255,255,0.24) !important;
+  --accent-color-light: #000 !important;
+  --accent-color-visited: #000 !important;
+  --accent-color-opacity1: rgb(0 0 0 / 4%) !important;
+  --accent-color-opacity2: rgb(0 0 0 / 12%) !important;
+  --accent-color-opacity3: rgb(255 255 255 / 16%) !important;
+  --accent-color-opacity4: rgb(255 255 255 / 24%) !important;
 }
 
 /* Given that the Hot Pink theme does not need link underlining due to meeting
 WCAG 2 Level AA (https://webaim.org/resources/linkcontrastchecker/?fcolor=FFFFFF&bcolor=DE1C85&lcolor=000000),
 it can be safely elided. This looks quite pleasant on this theme. */
-.hotPink a:not(:hover), .hotPink a.navOption:hover, .hotPink *:not(:hover) {
+.hotPink a:not(:hover, :focus), .hotPink .navOption:hover, .hotPink .navOption:focus, .hotPink *:not(:hover, :focus) {
   text-decoration: none;
 }
 
-.hotPink a:hover {
+.hotPink a:hover, .hotPink a:focus {
   text-decoration: underline;
 }
 
 .nordic {
-  --primary-text-color: #EEEEEE;
+  --primary-text-color: #EEE;
   --secondary-text-color: #ddd;
-  --tertiary-text-color: #EEEEEE;
-  --title-color: #EEEEEE;
+  --tertiary-text-color: #EEE;
+  --title-color: #EEE;
   --bg-color: #2b2f3a;
-  --favorite-icon-color: #00FF00;
+  --favorite-icon-color: #0F0;
   --card-bg-color: #2e3440;
-  --secondary-card-bg-color: rgba(59, 66, 82, 0.75);
+  --secondary-card-bg-color: rgb(59 66 82 / 75%);
   --scrollbar-color: #4b566a;
   --scrollbar-color-hover: #4b566a;
   --side-nav-color: #2e3440;
@@ -271,7 +272,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
 .mainCyan,
 .mainTeal,
 .mainGreen {
-  --text-with-main-color: #FFFFFF;
+  --text-with-main-color: #FFF;
   --logo-icon-bar-color: url("../../_icons/iconWhiteSmall.svg");
   --logo-text-bar-color: url("../../_icons/textWhiteSmall.svg");
 }
@@ -282,7 +283,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
 .mainAmber,
 .mainOrange,
 .mainDeepOrange {
-  --text-with-main-color: #000000;
+  --text-with-main-color: #000;
   --logo-icon-bar-color: url("../../_icons/iconBlackSmall.svg");
   --logo-text-bar-color: url("../../_icons/textBlackSmall.svg");
 }
@@ -431,8 +432,8 @@ it can be safely elided. This looks quite pleasant on this theme. */
 }
 
 .mainDraculaRed {
-  --primary-color: #FF5555;
-  --primary-color-hover: #FF6666;
+  --primary-color: #F55;
+  --primary-color-hover: #F66;
   --primary-color-active: #E64D4D;
 }
 
@@ -555,7 +556,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
 .secCyan,
 .secTeal,
 .secGreen {
-  --text-with-accent-color: #FFFFFF;
+  --text-with-accent-color: #FFF;
 }
 
 .secLightGreen,
@@ -564,7 +565,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
 .secAmber,
 .secOrange,
 .secDeepOrange {
-  --text-with-accent-color: #000000;
+  --text-with-accent-color: #000;
 }
 
 .secRed {
@@ -573,10 +574,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #c62828;
   --accent-color-light: #ef9a9a;
   --accent-color-visited: #b71c1c;
-  --accent-color-opacity1: rgba(244,67,54,0.04);
-  --accent-color-opacity2: rgba(244,67,54,0.12);
-  --accent-color-opacity3: rgba(244,67,54,0.16);
-  --accent-color-opacity4: rgba(244,67,54,0.24);
+  --accent-color-opacity1: rgb(244 67 54 / 4%);
+  --accent-color-opacity2: rgb(244 67 54 / 12%);
+  --accent-color-opacity3: rgb(244 67 54 / 16%);
+  --accent-color-opacity4: rgb(244 67 54 / 24%);
 }
 
 .secPink {
@@ -585,10 +586,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #AD1457;
   --accent-color-light: #F48FB1;
   --accent-color-visited: #880E4F;
-  --accent-color-opacity1: rgba(233,30,99,0.04);
-  --accent-color-opacity2: rgba(233,30,99,0.12);
-  --accent-color-opacity3: rgba(233,30,99,0.16);
-  --accent-color-opacity4: rgba(233,30,99,0.24);
+  --accent-color-opacity1: rgb(233 30 99 / 4%);
+  --accent-color-opacity2: rgb(233 30 99 / 12%);
+  --accent-color-opacity3: rgb(233 30 99 / 16%);
+  --accent-color-opacity4: rgb(233 30 99 / 24%);
 }
 
 .secPurple {
@@ -597,10 +598,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #6A1B9A;
   --accent-color-light: #CE93D8;
   --accent-color-visited: #4A148C;
-  --accent-color-opacity1: rgba(156,39,176,0.04);
-  --accent-color-opacity2: rgba(156,39,176,0.12);
-  --accent-color-opacity3: rgba(156,39,176,0.16);
-  --accent-color-opacity4: rgba(156,39,176,0.24);
+  --accent-color-opacity1: rgb(156 39 176 / 4%);
+  --accent-color-opacity2: rgb(156 39 176 / 12%);
+  --accent-color-opacity3: rgb(156 39 176 / 16%);
+  --accent-color-opacity4: rgb(156 39 176 / 24%);
 }
 
 .secDeepPurple {
@@ -609,10 +610,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #4527A0;
   --accent-color-light: #B39DDB;
   --accent-color-visited: #311B92;
-  --accent-color-opacity1: rgba(103,58,183,0.04);
-  --accent-color-opacity2: rgba(103,58,183,0.12);
-  --accent-color-opacity3: rgba(103,58,183,0.16);
-  --accent-color-opacity4: rgba(103,58,183,0.24);
+  --accent-color-opacity1: rgb(103 58 183 / 4%);
+  --accent-color-opacity2: rgb(103 58 183 / 12%);
+  --accent-color-opacity3: rgb(103 58 183 / 16%);
+  --accent-color-opacity4: rgb(103 58 183 / 24%);
 }
 
 .secIndigo {
@@ -621,10 +622,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #283593;
   --accent-color-light: #9FA8DA;
   --accent-color-visited: #1A237E;
-  --accent-color-opacity1: rgba(63,81,181,0.04);
-  --accent-color-opacity2: rgba(63,81,181,0.12);
-  --accent-color-opacity3: rgba(63,81,181,0.16);
-  --accent-color-opacity4: rgba(63,81,181,0.24);
+  --accent-color-opacity1: rgb(63 81 181 / 4%);
+  --accent-color-opacity2: rgb(63 81 181 / 12%);
+  --accent-color-opacity3: rgb(63 81 181 / 16%);
+  --accent-color-opacity4: rgb(63 81 181 / 24%);
 }
 
 .secBlue {
@@ -633,10 +634,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #1565C0;
   --accent-color-light: #90CAF9;
   --accent-color-visited: #0D47A1;
-  --accent-color-opacity1: rgba(33,150,243,0.04);
-  --accent-color-opacity2: rgba(33,150,243,0.12);
-  --accent-color-opacity3: rgba(33,150,243,0.16);
-  --accent-color-opacity4: rgba(33,150,243,0.24);
+  --accent-color-opacity1: rgb(33 150 243 / 4%);
+  --accent-color-opacity2: rgb(33 150 243 / 12%);
+  --accent-color-opacity3: rgb(33 150 243 / 16%);
+  --accent-color-opacity4: rgb(33 150 243 / 24%);
 }
 
 .secLightBlue {
@@ -645,10 +646,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #0277BD;
   --accent-color-light: #81D4FA;
   --accent-color-visited: #01579B;
-  --accent-color-opacity1: rgba(3,169,244,0.04);
-  --accent-color-opacity2: rgba(3,169,244,0.12);
-  --accent-color-opacity3: rgba(3,169,244,0.16);
-  --accent-color-opacity4: rgba(3,169,244,0.24);
+  --accent-color-opacity1: rgb(3 169 244 / 4%);
+  --accent-color-opacity2: rgb(3 169 244 / 12%);
+  --accent-color-opacity3: rgb(3 169 244 / 16%);
+  --accent-color-opacity4: rgb(3 169 244 / 24%);
 }
 
 .secCyan {
@@ -657,10 +658,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #00838F;
   --accent-color-light: #80DEEA;
   --accent-color-visited: #006064;
-  --accent-color-opacity1: rgba(0,188,212,0.04);
-  --accent-color-opacity2: rgba(0,188,212,0.12);
-  --accent-color-opacity3: rgba(0,188,212,0.16);
-  --accent-color-opacity4: rgba(0,188,212,0.24);
+  --accent-color-opacity1: rgb(0 188 212 / 4%);
+  --accent-color-opacity2: rgb(0 188 212 / 12%);
+  --accent-color-opacity3: rgb(0 188 212 / 16%);
+  --accent-color-opacity4: rgb(0 188 212 / 24%);
 }
 
 .secTeal {
@@ -669,10 +670,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #00695C;
   --accent-color-light: #80CBC4;
   --accent-color-visited: #004D40;
-  --accent-color-opacity1: rgba(0,150,136,0.04);
-  --accent-color-opacity2: rgba(0,150,136,0.12);
-  --accent-color-opacity3: rgba(0,150,136,0.16);
-  --accent-color-opacity4: rgba(0,150,136,0.24);
+  --accent-color-opacity1: rgb(0 150 136 / 4%);
+  --accent-color-opacity2: rgb(0 150 136 / 12%);
+  --accent-color-opacity3: rgb(0 150 136 / 16%);
+  --accent-color-opacity4: rgb(0 150 136 / 24%);
 }
 
 .secGreen {
@@ -681,10 +682,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #2E7D32;
   --accent-color-light: #A5D6A7;
   --accent-color-visited: #1B5E20;
-  --accent-color-opacity1: rgba(76,175,80,0.04);
-  --accent-color-opacity2: rgba(76,175,80,0.12);
-  --accent-color-opacity3: rgba(76,175,80,0.16);
-  --accent-color-opacity4: rgba(76,175,80,0.24);
+  --accent-color-opacity1: rgb(76 175 80 / 4%);
+  --accent-color-opacity2: rgb(76 175 80 / 12%);
+  --accent-color-opacity3: rgb(76 175 80 / 16%);
+  --accent-color-opacity4: rgb(76 175 80 / 24%);
 }
 
 .secLightGreen {
@@ -693,10 +694,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #558B2F;
   --accent-color-light: #C5E1A5;
   --accent-color-visited: #33691E;
-  --accent-color-opacity1: rgba(139,195,74,0.04);
-  --accent-color-opacity2: rgba(139,195,74,0.12);
-  --accent-color-opacity3: rgba(139,195,74,0.16);
-  --accent-color-opacity4: rgba(139,195,74,0.24);
+  --accent-color-opacity1: rgb(139 195 74 / 4%);
+  --accent-color-opacity2: rgb(139 195 74 / 12%);
+  --accent-color-opacity3: rgb(139 195 74 / 16%);
+  --accent-color-opacity4: rgb(139 195 74 / 24%);
 }
 
 .secLime {
@@ -705,10 +706,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #9E9D24;
   --accent-color-light: #E6EE9C;
   --accent-color-visited: #827717;
-  --accent-color-opacity1: rgba(205,220,57,0.04);
-  --accent-color-opacity2: rgba(205,220,57,0.12);
-  --accent-color-opacity3: rgba(205,220,57,0.16);
-  --accent-color-opacity4: rgba(205,220,57,0.24);
+  --accent-color-opacity1: rgb(205 220 57 / 4%);
+  --accent-color-opacity2: rgb(205 220 57 / 12%);
+  --accent-color-opacity3: rgb(205 220 57 / 16%);
+  --accent-color-opacity4: rgb(205 220 57 / 24%);
 }
 
 .secYellow {
@@ -717,10 +718,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #F9A825;
   --accent-color-light: #FFF59D;
   --accent-color-visited: #F57F17;
-  --accent-color-opacity1: rgba(255,235,59,0.04);
-  --accent-color-opacity2: rgba(255,235,59,0.12);
-  --accent-color-opacity3: rgba(255,235,59,0.16);
-  --accent-color-opacity4: rgba(255,235,59,0.24);
+  --accent-color-opacity1: rgb(255 235 59 / 4%);
+  --accent-color-opacity2: rgb(255 235 59 / 12%);
+  --accent-color-opacity3: rgb(255 235 59 / 16%);
+  --accent-color-opacity4: rgb(255 235 59 / 24%);
 }
 
 .secAmber {
@@ -729,10 +730,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #FF8F00;
   --accent-color-light: #FFE082;
   --accent-color-visited: #FF6F00;
-  --accent-color-opacity1: rgba(255,193,7,0.04);
-  --accent-color-opacity2: rgba(255,193,7,0.12);
-  --accent-color-opacity3: rgba(255,193,7,0.16);
-  --accent-color-opacity4: rgba(255,193,7,0.24);
+  --accent-color-opacity1: rgb(255 193 7 / 4%);
+  --accent-color-opacity2: rgb(255 193 7 / 12%);
+  --accent-color-opacity3: rgb(255 193 7 / 16%);
+  --accent-color-opacity4: rgb(255 193 7 / 24%);
 }
 
 .secOrange {
@@ -741,10 +742,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #EF6C00;
   --accent-color-light: #FFCC80;
   --accent-color-visited: #E65100;
-  --accent-color-opacity1: rgba(255,152,0,0.04);
-  --accent-color-opacity2: rgba(255,152,0,0.12);
-  --accent-color-opacity3: rgba(255,152,0,0.16);
-  --accent-color-opacity4: rgba(255,152,0,0.24);
+  --accent-color-opacity1: rgb(255 152 0 / 4%);
+  --accent-color-opacity2: rgb(255 152 0 / 12%);
+  --accent-color-opacity3: rgb(255 152 0 / 16%);
+  --accent-color-opacity4: rgb(255 152 0 / 24%);
 }
 
 .secDeepOrange {
@@ -753,10 +754,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #D84315;
   --accent-color-light: #FFAB91;
   --accent-color-visited: #BF360C;
-  --accent-color-opacity1: rgba(255,87,34,0.04);
-  --accent-color-opacity2: rgba(255,87,34,0.12);
-  --accent-color-opacity3: rgba(255,87,34,0.16);
-  --accent-color-opacity4: rgba(255,87,34,0.24);
+  --accent-color-opacity1: rgb(255 87 34 / 4%);
+  --accent-color-opacity2: rgb(255 87 34 / 12%);
+  --accent-color-opacity3: rgb(255 87 34 / 16%);
+  --accent-color-opacity4: rgb(255 87 34 / 24%);
 }
 
 .secDraculaCyan,
@@ -779,10 +780,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
 .secDraculaPurple,
 .secDraculaRed,
 .secDraculaYellow {
-  --accent-color-opacity1: rgba(98, 114, 164, 0.04);
-  --accent-color-opacity2: rgba(98, 114, 164, 0.12);
-  --accent-color-opacity3: rgba(98, 114, 164, 0.16);
-  --accent-color-opacity4: rgba(98, 114, 164, 0.24);
+  --accent-color-opacity1: rgb(98 114 164 / 4%);
+  --accent-color-opacity2: rgb(98 114 164 / 12%);
+  --accent-color-opacity3: rgb(98 114 164 / 16%);
+  --accent-color-opacity4: rgb(98 114 164 / 24%);
 }
 
 .secDraculaCyan {
@@ -827,11 +828,11 @@ it can be safely elided. This looks quite pleasant on this theme. */
 }
 
 .secDraculaRed {
-  --accent-color: #FF5555;
-  --accent-color-hover: #FF6666;
+  --accent-color: #F55;
+  --accent-color-hover: #F66;
   --accent-color-active: #E64D4D;
-  --accent-color-light: #FF7777;
-  --accent-color-visited: #CC4444;
+  --accent-color-light: #F77;
+  --accent-color-visited: #C44;
 }
 
 .secDraculaYellow {
@@ -865,10 +866,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #e1c8c3;
   --accent-color-light: #F8EAE7;
   --accent-color-visited: #D3A197;
-  --accent-color-opacity1: rgba(245,224,220,0.04);
-  --accent-color-opacity2: rgba(245,224,220,0.12);
-  --accent-color-opacity3: rgba(245,224,220,0.16);
-  --accent-color-opacity4: rgba(245,224,220,0.24);
+  --accent-color-opacity1: rgb(245 224 220 / 4%);
+  --accent-color-opacity2: rgb(245 224 220 / 12%);
+  --accent-color-opacity3: rgb(245 224 220 / 16%);
+  --accent-color-opacity4: rgb(245 224 220 / 24%);
 }
 
 .secCatppuccinMochaFlamingo {
@@ -877,10 +878,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #ddb7b7;
   --accent-color-light: #F7DFDF;
   --accent-color-visited: #cf9898;
-  --accent-color-opacity1: rgba(242,205,205,0.04);
-  --accent-color-opacity2: rgba(242,205,205,0.12);
-  --accent-color-opacity3: rgba(242,205,205,0.16);
-  --accent-color-opacity4: rgba(242,205,205,0.24);
+  --accent-color-opacity1: rgb(242 205 205 / 4%);
+  --accent-color-opacity2: rgb(242 205 205 / 12%);
+  --accent-color-opacity3: rgb(242 205 205 / 16%);
+  --accent-color-opacity4: rgb(242 205 205 / 24%);
 }
 
 .secCatppuccinMochaPink {
@@ -889,10 +890,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #dca3cd;
   --accent-color-light: #f4dbed;
   --accent-color-visited: #d28fc0;
-  --accent-color-opacity1: rgba(245,194,231,0.04);
-  --accent-color-opacity2: rgba(245,194,231,0.12);
-  --accent-color-opacity3: rgba(245,194,231,0.16);
-  --accent-color-opacity4: rgba(245,194,231,0.24);
+  --accent-color-opacity1: rgb(245 194 231 / 4%);
+  --accent-color-opacity2: rgb(245 194 231 / 12%);
+  --accent-color-opacity3: rgb(245 194 231 / 16%);
+  --accent-color-opacity4: rgb(245 194 231 / 24%);
 }
 
 .secCatppuccinMochaMauve {
@@ -901,10 +902,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #b38fdf;
   --accent-color-light: #D6B9F9;
   --accent-color-visited: #A171DA;
-  --accent-color-opacity1: rgba(203,166,247,0.04);
-  --accent-color-opacity2: rgba(203,166,247,0.12);
-  --accent-color-opacity3: rgba(203,166,247,0.16);
-  --accent-color-opacity4: rgba(203,166,247,0.24);
+  --accent-color-opacity1: rgb(203 166 247 / 4%);
+  --accent-color-opacity2: rgb(203 166 247 / 12%);
+  --accent-color-opacity3: rgb(203 166 247 / 16%);
+  --accent-color-opacity4: rgb(203 166 247 / 24%);
 }
 
 .secCatppuccinMochaRed {
@@ -913,10 +914,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #de7693;
   --accent-color-light: #F5A3BA;
   --accent-color-visited: #D56C89;
-  --accent-color-opacity1: rgba(243,139,168,0.04);
-  --accent-color-opacity2: rgba(243,139,168,0.12);
-  --accent-color-opacity3: rgba(243,139,168,0.16);
-  --accent-color-opacity4: rgba(243,139,168,0.24);
+  --accent-color-opacity1: rgb(243 139 168 / 4%);
+  --accent-color-opacity2: rgb(243 139 168 / 12%);
+  --accent-color-opacity3: rgb(243 139 168 / 16%);
+  --accent-color-opacity4: rgb(243 139 168 / 24%);
 }
 
 .secCatppuccinMochaMaroon {
@@ -925,10 +926,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #d68895;
   --accent-color-light: #F0B7C0;
   --accent-color-visited: #C86A79;
-  --accent-color-opacity1: rgba(235,160,172,0.04);
-  --accent-color-opacity2: rgba(235,160,172,0.12);
-  --accent-color-opacity3: rgba(235,160,172,0.16);
-  --accent-color-opacity4: rgba(235,160,172,0.24);
+  --accent-color-opacity1: rgb(235 160 172 / 4%);
+  --accent-color-opacity2: rgb(235 160 172 / 12%);
+  --accent-color-opacity3: rgb(235 160 172 / 16%);
+  --accent-color-opacity4: rgb(235 160 172 / 24%);
 }
 
 .secCatppuccinMochaPeach {
@@ -937,10 +938,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #e1996d;
   --accent-color-light: #FBC4A2;
   --accent-color-visited: #D78A5B;
-  --accent-color-opacity1: rgba(250,179,135,0.04);
-  --accent-color-opacity2: rgba(250,179,135,0.12);
-  --accent-color-opacity3: rgba(250,179,135,0.16);
-  --accent-color-opacity4: rgba(250,179,135,0.24);
+  --accent-color-opacity1: rgb(250 179 135 / 4%);
+  --accent-color-opacity2: rgb(250 179 135 / 12%);
+  --accent-color-opacity3: rgb(250 179 135 / 16%);
+  --accent-color-opacity4: rgb(250 179 135 / 24%);
 }
 
 .secCatppuccinMochaYellow {
@@ -949,10 +950,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #dec48d;
   --accent-color-light: #FBECCB;
   --accent-color-visited: #D5B05D;
-  --accent-color-opacity1: rgba(249,226,175,0.04);
-  --accent-color-opacity2: rgba(249,226,175,0.12);
-  --accent-color-opacity3: rgba(249,226,175,0.16);
-  --accent-color-opacity4: rgba(249,226,175,0.24);
+  --accent-color-opacity1: rgb(249 226 175 / 4%);
+  --accent-color-opacity2: rgb(249 226 175 / 12%);
+  --accent-color-opacity3: rgb(249 226 175 / 16%);
+  --accent-color-opacity4: rgb(249 226 175 / 24%);
 }
 
 .secCatppuccinMochaGreen {
@@ -961,10 +962,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #86c780;
   --accent-color-light: #BCEAB8;
   --accent-color-visited: #6ED166;
-  --accent-color-opacity1: rgba(166,227,161,0.04);
-  --accent-color-opacity2: rgba(166,227,161,0.12);
-  --accent-color-opacity3: rgba(166,227,161,0.16);
-  --accent-color-opacity4: rgba(166,227,161,0.24);
+  --accent-color-opacity1: rgb(166 227 161 / 4%);
+  --accent-color-opacity2: rgb(166 227 161 / 12%);
+  --accent-color-opacity3: rgb(166 227 161 / 16%);
+  --accent-color-opacity4: rgb(166 227 161 / 24%);
 }
 
 .secCatppuccinMochaTeal {
@@ -973,10 +974,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #6fc5b7;
   --accent-color-light: #AFE9DF;
   --accent-color-visited: #5CCCB9;
-  --accent-color-opacity1: rgba(148,226,213,0.04);
-  --accent-color-opacity2: rgba(148,226,213,0.12);
-  --accent-color-opacity3: rgba(148,226,213,0.16);
-  --accent-color-opacity4: rgba(148,226,213,0.24);
+  --accent-color-opacity1: rgb(148 226 213 / 4%);
+  --accent-color-opacity2: rgb(148 226 213 / 12%);
+  --accent-color-opacity3: rgb(148 226 213 / 16%);
+  --accent-color-opacity4: rgb(148 226 213 / 24%);
 }
 
 .secCatppuccinMochaSky {
@@ -985,10 +986,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #68bcca;
   --accent-color-light: #9FE3EF;
   --accent-color-visited: #64C2D3;
-  --accent-color-opacity1: rgba(137,220,235,0.04);
-  --accent-color-opacity2: rgba(137,220,235,0.12);
-  --accent-color-opacity3: rgba(137,220,235,0.16);
-  --accent-color-opacity4: rgba(137,220,235,0.24);
+  --accent-color-opacity1: rgb(137 220 235 / 4%);
+  --accent-color-opacity2: rgb(137 220 235 / 12%);
+  --accent-color-opacity3: rgb(137 220 235 / 16%);
+  --accent-color-opacity4: rgb(137 220 235 / 24%);
 }
 
 .secCatppuccinMochaSapphire {
@@ -997,10 +998,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #59a9cf;
   --accent-color-light: #93D4F0;
   --accent-color-visited: #6AB6D7;
-  --accent-color-opacity1: rgba(116,199,236,0.04);
-  --accent-color-opacity2: rgba(116,199,236,0.12);
-  --accent-color-opacity3: rgba(116,199,236,0.16);
-  --accent-color-opacity4: rgba(116,199,236,0.24);
+  --accent-color-opacity1: rgb(116 199 236 / 4%);
+  --accent-color-opacity2: rgb(116 199 236 / 12%);
+  --accent-color-opacity3: rgb(116 199 236 / 16%);
+  --accent-color-opacity4: rgb(116 199 236 / 24%);
 }
 
 .secCatppuccinMochaBlue {
@@ -1009,10 +1010,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #6593df;
   --accent-color-light: #A7C7FB;
   --accent-color-visited: #739CDD;
-  --accent-color-opacity1: rgba(137,220,235,0.04);
-  --accent-color-opacity2: rgba(137,220,235,0.12);
-  --accent-color-opacity3: rgba(137,220,235,0.16);
-  --accent-color-opacity4: rgba(137,220,235,0.24);
+  --accent-color-opacity1: rgb(137 220 235 / 4%);
+  --accent-color-opacity2: rgb(137 220 235 / 12%);
+  --accent-color-opacity3: rgb(137 220 235 / 16%);
+  --accent-color-opacity4: rgb(137 220 235 / 24%);
 }
 
 .secCatppuccinMochaLavender {
@@ -1021,10 +1022,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #8d98e4;
   --accent-color-light: #D2D8FE;
   --accent-color-visited: #96A1E9;
-  --accent-color-opacity1: rgba(180,190,254,0.04);
-  --accent-color-opacity2: rgba(180,190,254,0.12);
-  --accent-color-opacity3: rgba(180,190,254,0.16);
-  --accent-color-opacity4: rgba(180,190,254,0.24);
+  --accent-color-opacity1: rgb(180 190 254 / 4%);
+  --accent-color-opacity2: rgb(180 190 254 / 12%);
+  --accent-color-opacity3: rgb(180 190 254 / 16%);
+  --accent-color-opacity4: rgb(180 190 254 / 24%);
 }
 
 body[dir='ltr'] {
@@ -1041,7 +1042,7 @@ body[dir='rtl'] {
   --horizontal-directionality-coefficient: -1;
 }
 
-body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"]):not([data-icon="circle-question"]) {
+body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"], [data-icon="circle-question"]) {
   transform: scale(-1,1);
 }
 
@@ -1058,26 +1059,37 @@ body {
   min-block-size: 100vh;
   color: var(--primary-text-color);
   background-color: var(--bg-color);
+
   --red-500: #f44336;
 }
 
-#app {
+.app {
   color: var(--primary-text-color);
   background-color: var(--bg-color);
 }
 
+/* stylelint-disable-next-line a11y/no-outline-none */
 .hideOutlines *:focus {
   outline: none;
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 a:link {
     color: var(--link-color);
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 a:visited {
     color: var(--link-visited-color);
 }
 
+@media (prefers-reduced-motion) {
+  * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
 ::-webkit-scrollbar {
 	inline-size: 6px;
   block-size: 6px;
@@ -1088,6 +1100,6 @@ a:visited {
   border-radius: 6px;
 }
 
-::-webkit-scrollbar-thumb:hover {
+::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:focus {
   background: var(--scrollbar-color-hover);
 }
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 813bb40c3..bbf783cab 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -620,7 +620,7 @@ body.vjs-full-window {
 
 .video-js button {
   background: none;
-  border: none;
+  border: 0;
   color: inherit;
   display: inline-block;
   font-size: inherit;
@@ -1090,10 +1090,7 @@ body.vjs-full-window {
   cursor: pointer;
   padding: 0;
   margin: 0 0.45em 0 0.45em;
-
-  -webkit-user-select: none;
   user-select: none;
-
   background-color: #73859f;
   background-color: rgba(115, 133, 159, 0.5);
 }
@@ -1736,7 +1733,7 @@ video::-webkit-media-text-track-display {
 .vjs-text-track-settings fieldset {
   margin: 5px;
   padding: 3px;
-  border: none;
+  border: 0;
 }
 
 .vjs-text-track-settings fieldset span {
@@ -1799,7 +1796,7 @@ video::-webkit-media-text-track-display {
   left: 0;
   width: 100%;
   height: 100%;
-  border: none;
+  border: 0;
   z-index: -1000;
 }
 
@@ -2028,7 +2025,7 @@ video::-webkit-media-text-track-display {
     width: 2em;
     height: 2em;
     line-height: 2em;
-    border: none;
+    border: 0;
     border-radius: 50%;
     font-size: 3.5em;
     background-color: rgba(0,0,0,.45);
diff --git a/src/renderer/views/About/About.scss b/src/renderer/views/About/About.scss
index 0272d7628..49e07f65b 100644
--- a/src/renderer/views/About/About.scss
+++ b/src/renderer/views/About/About.scss
@@ -3,7 +3,7 @@
   margin-inline: auto;
   inline-size: 85%;
 
-  @media only screen and (max-width: 680px) {
+  @media only screen and (width <= 680px) {
     inline-size: 90%;
   }
 }
@@ -30,7 +30,7 @@
   margin-inline: auto;
   max-inline-size: 860px;
 
-  @media only screen and (max-width: 650px) {
+  @media only screen and (width <= 650px) {
     grid-template-columns: 1fr;
   }
 }
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index a1324d2bb..8fb4900f7 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -20,7 +20,7 @@
 }
 
 .channelBannerContainer.default {
-  background-color: black;
+  background-color: #000;
   background-image: url("../../assets/img/defaultBanner.png");
   background-repeat: repeat;
   background-size: contain;
@@ -49,7 +49,6 @@
   inline-size: 100px;
   block-size: 100px;
   border-radius: 200px;
-  -webkit-border-radius: 200px;
   object-fit: cover;
 }
 
@@ -81,6 +80,8 @@
 }
 
 .channelSearch {
+  margin-block-start: 10px;
+  max-inline-size: 250px;
   inline-size: 220px;
   margin-inline-start: auto;
   align-self: flex-end;
@@ -134,11 +135,6 @@
   box-sizing: border-box;
 }
 
-.channelSearch {
-  margin-block-start: 10px;
-  max-inline-size: 250px;
-}
-
 .elementListLoading {
   margin-block-start: 200px;
 }
@@ -174,8 +170,6 @@
 }
 
 .communityThumbnail {
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-border-radius: 200px;
   border-radius: 200px;
   block-size: 12%;
   inline-size: 12%;
@@ -183,16 +177,14 @@
 
 .ft-community-image {
   display: block;
-  margin-inline-start: auto;
-  margin-inline-end: auto;
+  margin-inline: auto;
 }
 
 .community-post-container {
-  padding-inline-start: 30%;
-  padding-inline-end: 30%;
+  padding-inline: 30%;
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (width <= 800px) {
   .channelInfoTabs {
     block-size: auto;
     flex-flow: column-reverse;
@@ -212,20 +204,22 @@
     flex: 1 1 0%;
   }
 
-  #communityPanel {
+  .communityPanel {
     margin-block-start: 1rem;
   }
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .channelInfo {
     flex-direction: column;
     margin-block: 20px 10px;
   }
+
   .card {
     max-inline-size: none;
     inline-size: 100%;
   }
+
   .channelInfoActionsContainer {
     flex-direction: row-reverse;
     justify-content: left;
@@ -234,7 +228,7 @@
   }
 }
 
-@media only screen and (max-width: 400px) {
+@media only screen and (width <= 400px) {
   .channelInfo {
     justify-content: center;
     gap: 10px;
@@ -260,7 +254,7 @@
   }
 }
 
-@media only screen and (max-width: 260px) {
+@media only screen and (width <= 260px) {
    .channelDetails {
     max-inline-size: none;
   }
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index edc267be1..aed6e7f96 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -368,6 +368,7 @@
         <ft-element-list
           v-if="!hideChannelCommunity && currentTab === 'community'"
           id="communityPanel"
+          class="communityPanel"
           :data="latestCommunityPosts"
           :use-channels-hidden-preference="false"
           role="tabpanel"
diff --git a/src/renderer/views/Hashtag/Hashtag.css b/src/renderer/views/Hashtag/Hashtag.css
index 8dd304347..a2d9314e8 100644
--- a/src/renderer/views/Hashtag/Hashtag.css
+++ b/src/renderer/views/Hashtag/Hashtag.css
@@ -19,7 +19,7 @@
   inline-size: 85%;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/History/History.css b/src/renderer/views/History/History.css
index 8885b1123..a902565bb 100644
--- a/src/renderer/views/History/History.css
+++ b/src/renderer/views/History/History.css
@@ -8,7 +8,7 @@
   color: var(--tertiary-text-color);
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js
index 0fb1e1f9e..4a5856b59 100644
--- a/src/renderer/views/Playlist/Playlist.js
+++ b/src/renderer/views/Playlist/Playlist.js
@@ -7,6 +7,7 @@ import PlaylistInfo from '../../components/playlist-info/playlist-info.vue'
 import FtListVideoNumbered from '../../components/ft-list-video-numbered/ft-list-video-numbered.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
+import FtSelect from '../../components/ft-select/ft-select.vue'
 import FtAutoLoadNextPageWrapper from '../../components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
 import {
   getLocalPlaylist,
@@ -16,6 +17,17 @@ import {
 import { extractNumberFromString, setPublishedTimestampsInvidious, showToast } from '../../helpers/utils'
 import { invidiousGetPlaylistInfo, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 import { getPipedPlaylist, getPipedPlaylistMore, pipedImageToYouTube } from '../../helpers/api/piped'
+
+const SORT_BY_VALUES = {
+  DateAddedNewest: 'date_added_descending',
+  DateAddedOldest: 'date_added_ascending',
+  AuthorAscending: 'author_ascending',
+  AuthorDescending: 'author_descending',
+  VideoTitleAscending: 'video_title_ascending',
+  VideoTitleDescending: 'video_title_descending',
+  Custom: 'custom',
+}
+
 export default defineComponent({
   name: 'Playlist',
   components: {
@@ -25,6 +37,7 @@ export default defineComponent({
     'ft-list-video-numbered': FtListVideoNumbered,
     'ft-flex-box': FtFlexBox,
     'ft-button': FtButton,
+    'ft-select': FtSelect,
     'ft-auto-load-next-page-wrapper': FtAutoLoadNextPageWrapper,
   },
   beforeRouteLeave(to, from, next) {
@@ -80,6 +93,12 @@ export default defineComponent({
     currentInvidiousInstance: function () {
       return this.$store.getters.getCurrentInvidiousInstance
     },
+    userPlaylistSortOrder: function () {
+      return this.$store.getters.getUserPlaylistSortOrder
+    },
+    sortOrder: function () {
+      return this.isUserPlaylistRequested ? this.userPlaylistSortOrder : SORT_BY_VALUES.Custom
+    },
     currentLocale: function () {
       return this.$i18n.locale.replace('_', '-')
     },
@@ -141,10 +160,10 @@ export default defineComponent({
     },
 
     sometimesFilteredUserPlaylistItems() {
-      if (!this.isUserPlaylistRequested) { return this.playlistItems }
-      if (this.processedVideoSearchQuery === '') { return this.playlistItems }
+      if (!this.isUserPlaylistRequested) { return this.sortedPlaylistItems }
+      if (this.processedVideoSearchQuery === '') { return this.sortedPlaylistItems }
 
-      return this.playlistItems.filter((v) => {
+      return this.sortedPlaylistItems.filter((v) => {
         if (typeof (v.title) === 'string' && v.title.toLowerCase().includes(this.processedVideoSearchQuery)) {
           return true
         } else if (typeof (v.author) === 'string' && v.author.toLowerCase().includes(this.processedVideoSearchQuery)) {
@@ -154,10 +173,41 @@ export default defineComponent({
         return false
       })
     },
+    sortByValues() {
+      return Object.values(SORT_BY_VALUES)
+    },
+    isSortOrderCustom() {
+      return this.sortOrder === SORT_BY_VALUES.Custom
+    },
+    sortedPlaylistItems: function () {
+      if (this.sortOrder === SORT_BY_VALUES.Custom) {
+        return this.playlistItems
+      }
+
+      return this.playlistItems.toSorted((a, b) => {
+        switch (this.sortOrder) {
+          case SORT_BY_VALUES.DateAddedNewest:
+            return b.timeAdded - a.timeAdded
+          case SORT_BY_VALUES.DateAddedOldest:
+            return a.timeAdded - b.timeAdded
+          case SORT_BY_VALUES.VideoTitleAscending:
+            return a.title.localeCompare(b.title, this.currentLocale)
+          case SORT_BY_VALUES.VideoTitleDescending:
+            return b.title.localeCompare(a.title, this.currentLocale)
+          case SORT_BY_VALUES.AuthorAscending:
+            return a.author.localeCompare(b.author, this.currentLocale)
+          case SORT_BY_VALUES.AuthorDescending:
+            return b.author.localeCompare(a.author, this.currentLocale)
+          default:
+            console.error(`Unknown sortOrder: ${this.sortOrder}`)
+            return 0
+        }
+      })
+    },
     visiblePlaylistItems: function () {
       if (!this.isUserPlaylistRequested) {
         // No filtering for non user playlists yet
-        return this.playlistItems
+        return this.sortedPlaylistItems
       }
 
       if (this.userPlaylistVisibleLimit < this.sometimesFilteredUserPlaylistItems.length) {
@@ -169,6 +219,32 @@ export default defineComponent({
     processedVideoSearchQuery() {
       return this.videoSearchQuery.trim().toLowerCase()
     },
+    sortBySelectNames() {
+      return this.sortByValues.map((k) => {
+        switch (k) {
+          case SORT_BY_VALUES.Custom:
+            return this.$t('Playlist.Sort By.Custom')
+          case SORT_BY_VALUES.DateAddedNewest:
+            return this.$t('Playlist.Sort By.DateAddedNewest')
+          case SORT_BY_VALUES.DateAddedOldest:
+            return this.$t('Playlist.Sort By.DateAddedOldest')
+          case SORT_BY_VALUES.VideoTitleAscending:
+            return this.$t('Playlist.Sort By.VideoTitleAscending')
+          case SORT_BY_VALUES.VideoTitleDescending:
+            return this.$t('Playlist.Sort By.VideoTitleDescending')
+          case SORT_BY_VALUES.AuthorAscending:
+            return this.$t('Playlist.Sort By.AuthorAscending')
+          case SORT_BY_VALUES.AuthorDescending:
+            return this.$t('Playlist.Sort By.AuthorDescending')
+          default:
+            console.error(`Unknown sort: ${k}`)
+            return k
+        }
+      })
+    },
+    sortBySelectValues() {
+      return this.sortByValues
+    },
   },
   watch: {
     $route () {
@@ -564,6 +640,7 @@ export default defineComponent({
     ...mapActions([
       'updateSubscriptionDetails',
       'updatePlaylist',
+      'updateUserPlaylistSortOrder',
       'removeVideo',
     ]),
 
diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss
index 939f3a5cc..1bf2cc613 100644
--- a/src/renderer/views/Playlist/Playlist.scss
+++ b/src/renderer/views/Playlist/Playlist.scss
@@ -10,7 +10,9 @@
   padding: 10px;
   position: sticky;
   inset-block-start: 96px;
+
   /* This is needed to make prompt always above video entries */
+
   /* Value being too high would block search suggestions */
   z-index: 1;
   inline-size: 30%;
@@ -44,7 +46,7 @@
 
   // Hide action buttons during transitions
   //
-  // The class for icon container is mainly styled in `_ft-list-item.scss`
+  // The class for icon container is mainly styled in `ft-list-item.scss`
   // But the transition related classes are all on container elements
   // So `:deep` is used
   :deep(.ft-list-item .videoThumbnail .playlistIcons) {
@@ -56,6 +58,7 @@
     pointer-events: none;
   }
 }
+
 .playlistItem-enter, .playlistItem-leave-to {
   opacity: 0;
   transform: translate(calc(10% * var(--horizontal-directionality-coefficient)));
@@ -66,12 +69,16 @@
   max-block-size: 7vh;
 }
 
-:deep(.videoThumbnail) {
-  margin-block-start: auto;
-  margin-block-end: auto;
+.sortSelect {
+  /* Put it on the right and align with 'More Options' dropdown button */
+  margin-inline: auto 20px;
 }
 
-@media only screen and (max-width: 850px) {
+:deep(.videoThumbnail) {
+  margin-block: auto;
+}
+
+@media only screen and (width <= 850px) {
   .routerView {
     flex-direction: column;
   }
diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
index 9e8c31d4e..736c37e1d 100644
--- a/src/renderer/views/Playlist/Playlist.vue
+++ b/src/renderer/views/Playlist/Playlist.vue
@@ -43,6 +43,15 @@
       <template
         v-if="playlistItems.length > 0"
       >
+        <ft-select
+          v-if="isUserPlaylistRequested && playlistItems.length > 1"
+          class="sortSelect"
+          :value="sortOrder"
+          :select-names="sortBySelectNames"
+          :select-values="sortBySelectValues"
+          :placeholder="$t('Playlist.Sort By.Sort By')"
+          @change="updateUserPlaylistSortOrder"
+        />
         <template
           v-if="visiblePlaylistItems.length > 0"
         >
@@ -62,8 +71,8 @@
               appearance="result"
               :always-show-add-to-playlist-button="true"
               :quick-bookmark-button-enabled="quickBookmarkButtonEnabled"
-              :can-move-video-up="index > 0 && !playlistInVideoSearchMode"
-              :can-move-video-down="index < playlistItems.length - 1 && !playlistInVideoSearchMode"
+              :can-move-video-up="index > 0 && !playlistInVideoSearchMode && isSortOrderCustom"
+              :can-move-video-down="index < playlistItems.length - 1 && !playlistInVideoSearchMode && isSortOrderCustom"
               :can-remove-from-playlist="true"
               :video-index="playlistInVideoSearchMode ? playlistItems.findIndex(i => i === item) : index"
               :initial-visible-state="index < 10"
diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css
index 8625c77b4..05f87ad79 100644
--- a/src/renderer/views/Popular/Popular.css
+++ b/src/renderer/views/Popular/Popular.css
@@ -10,13 +10,13 @@
   inset-inline-end: 10px;
 }
 
-@media only screen and (max-width: 350px) {
+@media only screen and (width <= 350px) {
   .floatingTopButton {
     position: absolute
   }
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.css b/src/renderer/views/ProfileSettings/ProfileSettings.css
index 8c568da7b..f7d8a4ebc 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.css
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.css
@@ -29,7 +29,7 @@ h2 {
   margin-inline: auto;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css
index aeaa95da9..1ef3d4d13 100644
--- a/src/renderer/views/Search/Search.css
+++ b/src/renderer/views/Search/Search.css
@@ -19,7 +19,7 @@
   margin-inline: auto;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index 42f5502d0..d433f8cf4 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -6,7 +6,7 @@ hr {
   border-block-start: 2px solid var(--scrollbar-color-hover);
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (width <= 800px) {
   hr {
     inline-size: 100%;
   }
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
index 70798e8ce..0c8c0f51a 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -49,7 +49,7 @@
   text-overflow: ellipsis;
   overflow-wrap: break-word;
   inline-size: 100%;
-  display: -webkit-box;
+  display: box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   padding-block: 0;
@@ -66,7 +66,7 @@
   block-size: 80%;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css
index 66ff34fe8..344621775 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.css
+++ b/src/renderer/views/Subscriptions/Subscriptions.css
@@ -10,9 +10,8 @@
 
 .subscriptionTabs {
   inline-size: 100%;
-  margin-block-start: -3px;
+  margin-block: -3px 10px;
   color: var(--tertiary-text-color);
-  margin-block-end: 10px;
 }
 
 .selectedTab {
@@ -35,7 +34,7 @@
   font-weight: bold;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
index a973f9088..5425c5e25 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@@ -14,9 +14,8 @@
   inline-size: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
-  margin-block-start: -3px;
+  margin-block: -3px 10px;
   color: var(--tertiary-text-color);
-  margin-block-end: 10px;
 }
 
 .selectedTab {
@@ -39,13 +38,13 @@
   font-weight: bold;
 }
 
-@media only screen and (max-width: 350px) {
+@media only screen and (width <= 350px) {
   .floatingTopButton {
     position: absolute
   }
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.css b/src/renderer/views/UserPlaylists/UserPlaylists.css
index d0da46adb..bdecb1640 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.css
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.css
@@ -1,6 +1,5 @@
 .card {
   position: relative;
-
   inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
@@ -23,7 +22,8 @@
   grid-template-columns: 1fr auto;
   column-gap: 16px;
 }
-@media only screen and (max-width: 800px) {
+
+@media only screen and (width <= 800px) {
   .searchInputsRow {
     /* Switch to 2 rows from 2 columns */
     grid-template-columns: auto;
@@ -37,7 +37,8 @@
   grid-template-rows: 1fr;
   align-items: center;
 }
-@media only screen and (max-width: 800px) {
+
+@media only screen and (width <= 800px) {
   .optionsRow {
     /* Switch to 2 rows from 2 columns */
     grid-template-columns: auto;
@@ -55,7 +56,7 @@
   color: var(--tertiary-text-color);
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index ad61d8af9..cac7c281d 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -16,7 +16,7 @@
   display: inline-block;
   max-inline-size: calc(80vh * 1.78);
 
-  @media only screen and (min-width: 1051px) {
+  @media only screen and (width >= 1051px) {
     inline-size: 300%;
   }
 }
@@ -99,7 +99,7 @@
   .sidebarArea {
     grid-area: sidebar;
 
-    @media only screen and (min-width: 1051px) {
+    @media only screen and (width >= 1051px) {
       min-inline-size: 380px;
     }
 
@@ -122,10 +122,10 @@
 
   .watchVideoPlaylist {
     :deep(.videoThumbnail) {
-      margin-block-start: auto;
-      margin-block-end: auto;
+      margin-block: auto;
     }
-    @media (max-width: 768px) {
+
+    @media (width <= 768px) {
       block-size: auto;
     }
   }
@@ -135,27 +135,27 @@
     margin-block: 0 16px;
     margin-inline: 0;
 
-    @media only screen and (min-width: 1051px) {
+    @media only screen and (width >= 1051px) {
       margin-block: 0 16px;
       margin-inline: 8px;
     }
   }
 
-  @media only screen and (max-width: 1350px) {
+  @media only screen and (width <= 1350px) {
     @include theatre-mode-template;
   }
 
-  @media only screen and (min-width: 1051px) {
+  @media only screen and (width >= 1051px) {
     &.useTheatreMode {
       @include theatre-mode-template;
     }
   }
 
-  @media only screen and (max-width: 1050px) {
+  @media only screen and (width <= 1050px) {
     @include single-column-template;
   }
 
-  @media only screen and (min-width: 1051px) {
+  @media only screen and (width >= 1051px) {
     .infoArea {
       scroll-margin-block-start: 76px;
     }
diff --git a/static/locales/cs.yaml b/static/locales/cs.yaml
index 6dbc57ab1..15d1e1e6c 100644
--- a/static/locales/cs.yaml
+++ b/static/locales/cs.yaml
@@ -278,6 +278,9 @@ Settings:
       Ask Before Opening Link: Před otevřením odkazu se zeptat
       Open Link: Otevřít odkaz
       External Link Handling: Zpracování externích odkazů
+    Auto Load Next Page:
+      Label: Automaticky načíst další stránku
+      Tooltip: Automaticky načítat další stránky a komentáře.
   Theme Settings:
     Theme Settings: 'Nastavení motivu'
     Match Top Bar with Main Color: 'Přizpůsobit horní lištu hlavní barvě'
@@ -945,6 +948,15 @@ Playlist:
 #* Published
 #& Views
   Playlist: Playlist
+  Sort By:
+    Sort By: Seřadit podle
+    DateAddedNewest: Naposledy přidáno
+    DateAddedOldest: Nejdříve přidáno
+    AuthorAscending: Autor (A-Z)
+    AuthorDescending: Autor (Z-A)
+    VideoTitleDescending: Název (Z-A)
+    VideoTitleAscending: Název (A-Z)
+    Custom: Vlastní
 Toggle Theatre Mode: 'Přepnout režim divadla'
 Change Format:
   Change Media Formats: 'Změnit formát videa'
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index b6035c12e..b5ef3fabe 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -185,7 +185,6 @@ User Playlists:
 
     LatestPlayedFirst: 'Recently Played'
     EarliestPlayedFirst: 'Earliest Played'
-
   SinglePlaylistView:
     Search for Videos: Search for Videos
 
@@ -876,6 +875,15 @@ Playlist:
   View: View
   Views: Views
   Last Updated On: Last Updated On
+  Sort By:
+    Sort By: Sort By
+    DateAddedNewest: Latest added first
+    DateAddedOldest: Earliest added first
+    AuthorAscending: Author (A-Z)
+    AuthorDescending: Author (Z-A)
+    VideoTitleAscending: Title (A-Z)
+    VideoTitleDescending: Title (Z-A)
+    Custom: Custom
 
 # On Video Watch Page
 #* Published
diff --git a/static/locales/es.yaml b/static/locales/es.yaml
index 433c5d877..d8edaf1da 100644
--- a/static/locales/es.yaml
+++ b/static/locales/es.yaml
@@ -276,6 +276,9 @@ Settings:
       Ask Before Opening Link: Preguntar antes de abrir el enlace
       Open Link: Abrir el enlace
       External Link Handling: Gestión de enlaces externos
+    Auto Load Next Page:
+      Label: Carga automática de la página siguiente
+      Tooltip: Cargar automáticamente páginas adicionales y comentarios.
   Theme Settings:
     Theme Settings: 'Configuración del tema'
     Match Top Bar with Main Color: 'Usar color principal para barra superior'
diff --git a/static/locales/hu.yaml b/static/locales/hu.yaml
index 313bf7262..f69033db8 100644
--- a/static/locales/hu.yaml
+++ b/static/locales/hu.yaml
@@ -285,6 +285,9 @@ Settings:
       Ask Before Opening Link: Hivatkozás megnyitása előtt kérése
       Open Link: Hivatkozás megnyitása
       External Link Handling: Külső hivatkozás kezelése
+    Auto Load Next Page:
+      Label: Következő oldal automatikus betöltése
+      Tooltip: További oldalak és megjegyzések automatikus betöltése.
   Theme Settings:
     Theme Settings: 'Téma beállítások'
     Match Top Bar with Main Color: 'Illessze a felső sávot a fő színnel'
@@ -972,6 +975,15 @@ Playlist:
 #* Published
 #& Views
   Playlist: Lejátszási lista
+  Sort By:
+    DateAddedOldest: Legrégebbiek elől
+    DateAddedNewest: Legújabbak elől
+    Sort By: Rendezés
+    AuthorAscending: Szerző szerint (A-Z)
+    AuthorDescending: Szerző szerint (Z-A)
+    VideoTitleAscending: Cím szerint (A-Z)
+    VideoTitleDescending: Cím szerint (Z-A)
+    Custom: Egyéni rendezés
 Toggle Theatre Mode: 'Mozi mód be-/kikapcsolása'
 Change Format:
   Change Media Formats: 'Videoformátumok módosítása'
diff --git a/static/locales/it.yaml b/static/locales/it.yaml
index 5dc3ee5eb..75c4b305e 100644
--- a/static/locales/it.yaml
+++ b/static/locales/it.yaml
@@ -276,6 +276,9 @@ Settings:
       Ask Before Opening Link: Chiedi prima di aprire il link
       Open Link: Apri link
       External Link Handling: Gestione dei link esterni
+    Auto Load Next Page:
+      Label: Carica automaticamente la pagina successiva
+      Tooltip: Carica automaticamente pagine e commenti aggiuntivi.
   Theme Settings:
     Theme Settings: 'Impostazioni del tema'
     Match Top Bar with Main Color: 'Abbina la barra superiore al colore principale'
@@ -932,6 +935,15 @@ Playlist:
 #* Published
 #& Views
   Playlist: Playlist
+  Sort By:
+    Sort By: Ordina per
+    Custom: Personalizzato
+    VideoTitleDescending: Titolo (Z-A)
+    AuthorDescending: Autore (Z-A)
+    AuthorAscending: Autore (A-Z)
+    DateAddedNewest: Prima gli aggiunti più nuovi
+    DateAddedOldest: Prima gli aggiunti più vecchi
+    VideoTitleAscending: Titolo (A-Z)
 Toggle Theatre Mode: 'Attiva/disattiva la modalità teatro'
 Change Format:
   Change Media Formats: 'Cambia formato video'
diff --git a/static/locales/pl.yaml b/static/locales/pl.yaml
index 6ef9f1bb4..e671f41c8 100644
--- a/static/locales/pl.yaml
+++ b/static/locales/pl.yaml
@@ -273,6 +273,9 @@ Settings:
       Ask Before Opening Link: Zapytaj przed otworzeniem linku
       Open Link: Otwórz link
       External Link Handling: Obsługa zewnętrznych linków
+    Auto Load Next Page:
+      Tooltip: Wczytuj kolejne strony oraz komentarze automatycznie.
+      Label: Automatycznie wczytaj kolejną stronę
   Theme Settings:
     Theme Settings: 'Ustawienia wyglądu'
     Match Top Bar with Main Color: 'Dopasuj górną belkę do głównego koloru'
diff --git a/static/locales/pt-BR.yaml b/static/locales/pt-BR.yaml
index 3626df17b..415e076b5 100644
--- a/static/locales/pt-BR.yaml
+++ b/static/locales/pt-BR.yaml
@@ -221,7 +221,7 @@ History:
   Watch History: 'Histórico de visualizações'
   Your history list is currently empty.: 'Seu histórico está vazio no momento.'
   Search bar placeholder: Pesquisar no histórico
-  Empty Search Message: Não há vídeos no seu histórico que correspondam à sua pesquisa
+  Empty Search Message: Não há vídeos em seu histórico que correspondam à sua pesquisa
 Settings:
   # On Settings Page
   Settings: 'Configurações'
@@ -270,6 +270,9 @@ Settings:
       Ask Before Opening Link: Perguntar antes de abrir o link
       Open Link: Abrir link
       External Link Handling: Ação de link externo
+    Auto Load Next Page:
+      Label: Carregamento automático da próxima página
+      Tooltip: Carregar páginas e comentários adicionais automaticamente.
   Theme Settings:
     Theme Settings: 'Configurações de aparência'
     Match Top Bar with Main Color: 'Usar cor principal na barra superior'
@@ -925,6 +928,15 @@ Playlist:
 #* Published
 #& Views
   Playlist: Playlist
+  Sort By:
+    Sort By: Ordenar por
+    AuthorAscending: Autor (A-Z)
+    VideoTitleAscending: Título (A-Z)
+    Custom: Personalizado
+    DateAddedNewest: Mais recentes
+    DateAddedOldest: Mais antigos
+    AuthorDescending: Autor (Z-A)
+    VideoTitleDescending: Título (Z-A)
 Toggle Theatre Mode: 'Alternar Modo Teatro'
 Change Format:
   Change Media Formats: 'Mudar formato do vídeo'
diff --git a/static/locales/ro.yaml b/static/locales/ro.yaml
index a25ba9c62..7cff290a4 100644
--- a/static/locales/ro.yaml
+++ b/static/locales/ro.yaml
@@ -104,8 +104,8 @@ Subscriptions:
     vitezei
   Error Channels: Canale cu erori
   Empty Channels: Canalele la care sunteți abonat(ă) nu au în prezent clipuri video.
-  Disabled Automatic Fetching: Ai dezactivat obținerea automată de abonamente. Reîmprospătează
-    abonamentele pentru a le vedea aici.
+  Disabled Automatic Fetching: Ați dezactivat preluarea automată a abonamentelor.
+    Reîmprospătați abonamentele pentru a le vedea aici.
   Subscriptions Tabs: Filele Abonamente
   All Subscription Tabs Hidden: Toate filele de abonament sunt ascunse. Pentru a vedea
     conținutul aici, vă rugăm să afișați unele file din secțiunea "{subsection}” din
@@ -131,7 +131,8 @@ User Playlists:
     Când lucrările vor fi finalizate, toate videoclipurile care se află în prezent
     aici vor fi migrate într-o listă de redare "Favorite".
   Search bar placeholder: Căutați liste de redare
-  Empty Search Message: Nu sunt videoclipuri pentru căutarea ta
+  Empty Search Message: Nu există videoclipuri în această listă de redare care să
+    corespundă căutării dvs.
   Move Video Down: Mutați video în jos
   Enable Quick Bookmark With This Playlist: Activați marcajul rapid cu această listă
     de redare
@@ -172,13 +173,24 @@ User Playlists:
   Delete Playlist: Ștergeți lista de redare
   Are you sure you want to delete this playlist? This cannot be undone: Sunteți sigur
     că doriți să ștergeți această listă de redare? Acest lucru nu poate fi anulat.
+  CreatePlaylistPrompt:
+    Toast:
+      Playlist {playlistName} has been successfully created.: Lista de redare {playlistName}
+        a fost creată cu succes.
+      There was an issue with creating the playlist.: A existat o problemă la crearea
+        listei de redare.
+      There is already a playlist with this name. Please pick a different name.: Există
+        deja o listă de redare cu acest nume. Vă rugăm să alegeți un alt nume.
+    New Playlist Name: Numele noii liste de redare
+    Create: Creați
 History:
   # On History Page
   History: 'Istoric'
   Watch History: 'Istoricul vizionărilor'
   Your history list is currently empty.: 'Lista dvs. de istoric este momentan goală.'
   Search bar placeholder: Căutare în istoric
-  Empty Search Message: Nu sunt videoclipuri în istoricul tău pentru termenii căutați
+  Empty Search Message: Nu există videoclipuri în această listă de redare care să
+    corespundă căutării dvs.
 Settings:
   # On Settings Page
   Settings: 'Setări'
@@ -210,8 +222,8 @@ Settings:
         #! List countries
     External Link Handling:
       No Action: Nicio acțiune
-      Ask Before Opening Link: Întrebați înainte de a deschide link-ul
-      Open Link: Deschideți link-ul
+      Ask Before Opening Link: Întrebați înainte de a deschide linkul
+      Open Link: Deschideți linkul
       External Link Handling: Gestionarea legăturilor externe
     View all Invidious instance information: Vizualizați toate informațiile despre
       instanța Invidious
@@ -325,11 +337,11 @@ Settings:
       Error:
         Forbidden Characters: Caractere interzise
         Empty File Name: Denumiri de fișiere goale
-      File Name Tooltip: Poți folosi variabile mai jos. %Y An patru numere. %M Lună
-        doua numere. %D Zi două numere. %H oră două numere. %N Minute două numere.
-        %S Secunde două numere. %T Milisecunde trei numere. %s Secunda din videoclip.
-        %t Milisecunda din videoclip trei numere. %i Numele videoclipului. Poți folosi
-        și "\" sau "/" pentru a creea subdosare.
+      File Name Tooltip: Puteți utiliza variabilele de mai jos. %Y Anul 4 cifre. %M
+        Luna 2 cifre. %D Ziua 2 cifre. %H Ora 2 cifre. %N Minute 2 cifre. %S Secunda
+        2 cifre. %T Milisecundă 3 cifre. %s Secunda video. %t Milisecundă video 3
+        cifre. %i Video ID. De asemenea, puteți utiliza "\" sau "/" pentru a crea
+        subfoldere.
       Enable: Activează captura de ecran
       Format Label: Formatul capturii de ecran
     Video Playback Rate Interval: Intervalul de redare video
@@ -602,6 +614,7 @@ Profile:
   Profile Filter: Filtru profil
   Profile Settings: Setări de profil
   Toggle Profile List: Lista profilului toggle
+  Create Profile Name: Creați numele profilului
 Channel:
   Subscriber: 'Abonat'
   Subscribers: 'Abonați'
@@ -674,11 +687,11 @@ Video:
   Video has been marked as watched: 'Video a fost marcat ca fiind vizionat'
   Video has been removed from your history: 'Video a fost eliminat din istoric'
   Open in YouTube: 'Deschideți în YouTube'
-  Copy YouTube Link: 'Copiați link-ul YouTube'
+  Copy YouTube Link: 'Copiați linkul YouTube'
   Open YouTube Embedded Player: 'Deschideți playerul încorporat YouTube'
-  Copy YouTube Embedded Player Link: 'Copiați link-ul playerului încorporat YouTube'
+  Copy YouTube Embedded Player Link: 'Copiați linkul playerului încorporat YouTube'
   Open in Invidious: 'Deschideți în Invidious'
-  Copy Invidious Link: 'Copiați link-ul Invidious'
+  Copy Invidious Link: 'Copiați linkul Invidious'
   Views: 'Vizionări'
   Loop Playlist: 'Lista de redare în buclă'
   Shuffle Playlist: 'Lista de redare aleatorie'
@@ -773,9 +786,9 @@ Video:
   audio only: numai audio
   video only: numai video
   Download Video: Descărcați video
-  Copy Invidious Channel Link: Copiați link-ul canalului Invidious
+  Copy Invidious Channel Link: Copiați linkul canalului Invidious
   Open Channel in Invidious: Canal deschis în Invidious
-  Copy YouTube Channel Link: Copiați link-ul canalului YouTube
+  Copy YouTube Channel Link: Copiați linkul canalului YouTube
   Open Channel in YouTube: Deschideți canalul în YouTube
   Video has been removed from your saved list: Videoclipul a fost eliminat din lista
     ta de salvări
@@ -846,8 +859,8 @@ Share:
   Share Video: 'Distribuiți video'
   Share Playlist: 'Distribuie lista de redare'
   Include Timestamp: 'Includeți timpul de începere'
-  Copy Link: 'Copiați link-ul'
-  Open Link: 'Deschideți link-ul'
+  Copy Link: 'Copiați linkul'
+  Open Link: 'Deschideți linkul'
   Copy Embed: 'Copiați încorporarea'
   Open Embed: 'Deschideți încorporarea'
   # On Click
@@ -960,8 +973,8 @@ Tooltips:
     Proxy Videos Through Invidious: Se va conecta la Invidious pentru a servi videoclipuri
       în loc să facă o conexiune directă la YouTube. Anulează preferințele API.
     Force Local Backend for Legacy Formats: Funcționează numai atunci când API-ul
-      Invidious este implicit. Atunci când este activată, API-ul local va rula și
-      va utiliza formatele vechi returnate de acesta în locul celor returnate de Invidious.
+      Invidious este implicit. Atunci când este activat, API-ul local va rula și va
+      utiliza formatele vechi returnate de acesta în locul celor returnate de Invidious.
       Ajută atunci când videoclipurile returnate de Invidious nu sunt redate din cauza
       restricțiilor de țară.
     Scroll Playback Rate Over Video Player: În timp ce cursorul se află deasupra videoclipului,
@@ -979,7 +992,7 @@ Tooltips:
   General Settings:
     External Link Handling: "Alegeți comportamentul implicit atunci când se face clic
       pe un link care nu poate fi deschis în FreeTube.\nÎn mod implicit, FreeTube
-      va deschide link-ul pe care s-a făcut clic în browserul dvs. implicit.\n"
+      va deschide linkul pe care s-a făcut clic în browserul dvs. implicit.\n"
     Region for Trending: Regiunea de tendințe vă permite să alegeți ce videoclipuri
       în tendințe din fiecare țară doriți să fie afișate.
     Invidious Instance: Instanța Invidious la care FreeTube se va conecta pentru apelurile
@@ -993,10 +1006,10 @@ Tooltips:
       a obține date. API-ul local este un extractor incorporat. API-ul Invidious necesită
       un server Invidious la care să vă conectați.
   Distraction Free Settings:
-    Hide Channels: Introduceți un nume de canal sau un ID de canal pentru a ascunde
-      toate videoclipurile, listele de redare și canalul în sine pentru a nu apărea
-      în căutare, în tendințe, în cele mai populare și recomandate. Numele canalului
-      introdus trebuie să se potrivească complet și să țină cont de majuscule și minuscule.
+    Hide Channels: Introduceți un ID de canal pentru a ascunde toate videoclipurile,
+      listele de redare și canalul însuși de la apariția în căutare, tendințe, cele
+      mai populare și recomandate. ID-ul canalului introdus trebuie să fie o potrivire
+      completă și este sensibil la majuscule și minuscule.
     Hide Subscriptions Live: Această setare este înlocuită de setarea "{appWideSetting}”
       la nivel de aplicație, în secțiunea „{subsection}” din „{settingsSection}”
   Experimental Settings:
@@ -1045,3 +1058,11 @@ Playlist will not pause when current video is finished: Lista de redare nu se va
   când videoclipul curent este terminat
 Go to page: Mergeți la {page}
 Close Banner: Închideți bannerul
+Age Restricted:
+  This video is age restricted: Acest videoclip este restricționat în funcție de vârstă
+  This channel is age restricted: Acest canal este restricționat de vârstă
+Channel Hidden: '{channel} adăugat la filtrul de canal'
+Trimmed input must be at least N characters long: Intrarea tăiată trebuie să aibă
+  cel puțin 1 caracter | Intrarea tăiată trebuie să aibă cel puțin {length} caractere
+Tag already exists: Eticheta "{tagName}" există deja
+Channel Unhidden: '{channel} eliminat din filtrul de canale'
diff --git a/static/locales/tr.yaml b/static/locales/tr.yaml
index 753236943..3c26dd46d 100644
--- a/static/locales/tr.yaml
+++ b/static/locales/tr.yaml
@@ -56,7 +56,7 @@ Search / Go to URL: 'Ara / URL''ye git'
 Search Filters:
   Search Filters: 'Filtreler'
   Sort By:
-    Sort By: 'Sırala'
+    Sort By: 'Sıralama ölçütü'
     Most Relevant: 'En Uygun'
     Rating: 'Derecelendirme'
     Upload Date: 'Yükleme Tarihi'
@@ -277,6 +277,9 @@ Settings:
       Ask Before Opening Link: Bağlantıyı Açmadan Önce Sor
       Open Link: Bağlantıyı Aç
       External Link Handling: Harici Bağlantı İşleme
+    Auto Load Next Page:
+      Label: Sonraki Sayfayı Otomatik Yükle
+      Tooltip: Sonraki sayfaları ve yorumları otomatik olarak yükle.
   Theme Settings:
     Theme Settings: 'Tema Ayarları'
     Match Top Bar with Main Color: 'Üst Barı Ana Renk ile Eşleştir'
@@ -761,7 +764,7 @@ Channel:
   Added channel to your subscriptions: 'Kanal aboneliklerinize eklendi'
   Search Channel: 'Kanalda ara'
   Your search results have returned 0 results: 'Arama sonuçlarınız 0 sonuç verdi'
-  Sort By: 'Sırala'
+  Sort By: 'Sıralama ölçütü'
   Videos:
     Videos: 'Videolar'
     This channel does not currently have any videos: 'Bu kanalda şu anda herhangi
@@ -978,6 +981,15 @@ Playlist:
 #* Published
 #& Views
   Playlist: Oynatma Listesi
+  Sort By:
+    DateAddedNewest: Son eklenen önce
+    AuthorAscending: Yazar (A-Z)
+    AuthorDescending: Yazar (Z-A)
+    VideoTitleAscending: Başlık (A-Z)
+    VideoTitleDescending: Başlık (Z-A)
+    Sort By: Sıralama ölçütü
+    DateAddedOldest: İlk eklenen önce
+    Custom: Özel
 Toggle Theatre Mode: 'Tiyatro Modunu Aç/Kapat'
 Change Format:
   Change Media Formats: 'Video Biçimlerini Değiştir'
diff --git a/static/locales/zh-CN.yaml b/static/locales/zh-CN.yaml
index 7448edec8..b5bc6d0b5 100644
--- a/static/locales/zh-CN.yaml
+++ b/static/locales/zh-CN.yaml
@@ -113,7 +113,7 @@ User Playlists:
   Your saved videos are empty. Click on the save button on the corner of a video to have it listed here: 您未保存视频。点击视频角落的“保存”按钮保存视频
   Playlist Message: 本页面不代表功能完备的播放列表。它只列举您保存或喜爱的播放列表。当项目完成时，本页面的所有视频将会迁移到“最喜爱”播放列表。
   Search bar placeholder: 搜索播放列表
-  Empty Search Message: 这个与你的搜索匹配的播放列表中没有视频
+  Empty Search Message: 此播放列表中没有匹配你搜索的视频
   Are you sure you want to remove all watched videos from this playlist? This cannot be undone: 你确定要从此播放列表删除所有已观看的视频吗？此操作无法撤销。
   AddVideoPrompt:
     Search in Playlists: 在播放列表中搜索
@@ -194,7 +194,7 @@ History:
   Watch History: '观看历史记录'
   Your history list is currently empty.: 您的历史记录列表目前是空的。
   Search bar placeholder: 在播放历史中搜索
-  Empty Search Message: 匹配搜索的历史记录中没有视频
+  Empty Search Message: 历史记录中没有匹配你搜索的视频
 Settings:
   # On Settings Page
   Settings: '设置'
@@ -238,6 +238,9 @@ Settings:
       No Action: 无操作
       External Link Handling: 外部链接处理
       Open Link: 打开链接
+    Auto Load Next Page:
+      Label: 自动加载下一页
+      Tooltip: 自动加载额外页面和评论。
   Theme Settings:
     Theme Settings: '主题设置'
     Match Top Bar with Main Color: '顶部菜单栏对应主颜色'
@@ -825,6 +828,15 @@ Playlist:
 #* Published
 #& Views
   Playlist: 播放列表
+  Sort By:
+    Sort By: 排序依据
+    DateAddedNewest: 最近添加的优先
+    DateAddedOldest: 最早添加的优先
+    AuthorAscending: 作者名（A-Z）
+    AuthorDescending: 作者名（Z-A）
+    VideoTitleDescending: 标题（Z-A)
+    Custom: 自定义
+    VideoTitleAscending: 标题（A-Z）
 Toggle Theatre Mode: '切换剧场模式'
 Change Format:
   Change Media Formats: '更换视频格式'
diff --git a/static/locales/zh-TW.yaml b/static/locales/zh-TW.yaml
index 12ae1999b..8a5bccf68 100644
--- a/static/locales/zh-TW.yaml
+++ b/static/locales/zh-TW.yaml
@@ -239,6 +239,9 @@ Settings:
       Ask Before Opening Link: 開啟連結前詢問
       Open Link: 開啟連結
       External Link Handling: 外部連結處理
+    Auto Load Next Page:
+      Tooltip: 自動載入額外頁面與留言。
+      Label: 自動載入下一頁
   Theme Settings:
     Theme Settings: '主題設定'
     Match Top Bar with Main Color: '頂部功能表欄對應主色彩'
@@ -834,6 +837,15 @@ Playlist:
 #* Published
 #& Views
   Playlist: 播放清單
+  Sort By:
+    Sort By: 排序方式
+    DateAddedNewest: 最後新增優先
+    DateAddedOldest: 最早新增優先
+    AuthorAscending: 作者 (A-Z)
+    AuthorDescending: 作者 (Z-A)
+    VideoTitleAscending: 標題 (A-Z)
+    VideoTitleDescending: 標題 (Z-A)
+    Custom: 自訂
 Toggle Theatre Mode: '切換為劇院模式'
 Change Format:
   Change Media Formats: '變更影片格式'