diff --git a/src/renderer/App.css b/src/renderer/App.css
index e6bceeb967f60..1c616d95969c1 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -12,16 +12,19 @@
 
 .routerView {
   flex: 1 1 0%;
-  margin: 18px 10px;
+  margin-block: 18px;
+  margin-inline: 10px;
 }
 
 .banner {
   width: 85%;
-  margin: 20px auto 0;
+  margin-block: 20px;
+  margin-inline: auto;
 }
 
 .banner-wrapper {
-  margin: 0 10px;
+  margin-block: 0;
+  margin-inline: 10px;
 }
 
 .flexBox {
@@ -45,16 +48,17 @@
 
 @media only screen and (max-width: 680px) {
   .routerView {
-    margin: 68px 8px 68px;
+    margin-block: 68px;
+    margin-inline: 8px;
   }
 
   .banner {
     width: 80%;
-    margin-top: 20px;
+    margin-block-start: 20px;
   }
 
   .flexBox {
-    margin-top: 60px;
-    margin-bottom: -75px;
+    margin-block-start: 60px;
+    margin-block-end: -75px;
   }
 }
diff --git a/src/renderer/App.js b/src/renderer/App.js
index 340e7b9825ece..21db0394f2e90 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -59,8 +59,9 @@ export default defineComponent({
     showProgressBar: function () {
       return this.$store.getters.getShowProgressBar
     },
-    isRightAligned: function () {
-      return this.locale === 'ar' || this.locale === 'he'
+    isLocaleRightToLeft: function () {
+      return this.locale === 'ar' || this.locale === 'fa' || this.locale === 'he' ||
+        this.locale === 'ur' || this.locale === 'yi' || this.locale === 'ku'
     },
     checkForUpdates: function () {
       return this.$store.getters.getCheckForUpdates
@@ -509,6 +510,11 @@ export default defineComponent({
 
     setLocale: function() {
       document.documentElement.setAttribute('lang', this.locale)
+      if (this.isLocaleRightToLeft) {
+        document.body.dir = 'rtl'
+      } else {
+        document.body.dir = 'ltr'
+      }
     },
 
     /**
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 84ecb7ba348ab..ed2ec65454021 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -4,7 +4,7 @@
     id="app"
     :class="{
       hideOutlines: hideOutlines,
-      rightAligned: isRightAligned
+      isLocaleRightToLeft: isLocaleRightToLeft
     }"
   >
     <top-nav ref="topNav" />
diff --git a/src/renderer/components/channel-about/channel-about.css b/src/renderer/components/channel-about/channel-about.css
index e8e10f4c39861..b7d8b49c9a7f6 100644
--- a/src/renderer/components/channel-about/channel-about.css
+++ b/src/renderer/components/channel-about/channel-about.css
@@ -1,6 +1,6 @@
 .about {
   background-color: var(--card-bg-color);
-  margin-top: 0;
+  margin-block-start: 0;
   padding: 10px;
   position: relative;
   z-index: 1;
@@ -34,9 +34,9 @@
 }
 
 .aboutDetails {
-  text-align: left;
+  text-align: start;
 }
 
 .aboutDetails th {
-  padding-right: 10px;
+  padding-inline-end: 10px;
 }
diff --git a/src/renderer/components/experimental-settings/experimental-settings.css b/src/renderer/components/experimental-settings/experimental-settings.css
index 58e50c3ab6762..3f20bf0554619 100644
--- a/src/renderer/components/experimental-settings/experimental-settings.css
+++ b/src/renderer/components/experimental-settings/experimental-settings.css
@@ -1,6 +1,6 @@
 .experimental-warning {
   text-align: center;
   font-weight: bold;
-  padding-left: 4%;
-  padding-right: 4%
+  padding-inline-start: 4%;
+  padding-inline-end: 4%
 }
diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.scss b/src/renderer/components/ft-age-restricted/ft-age-restricted.scss
index a30ab65b880bd..34bc140b7e4b9 100644
--- a/src/renderer/components/ft-age-restricted/ft-age-restricted.scss
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.scss
@@ -3,7 +3,8 @@
 
   h2 {
     background-color: var(--card-bg-color);
-    padding: 10px 0;
+    padding-block: 10px;
+    padding-inline: 0;
     text-align: center;
     width: 100%;
   }
@@ -12,7 +13,8 @@
     background-color: var(--card-bg-color);
     font-size: 10em;
     height: 100%;
-    padding: 20px 0;
+    padding-block: 20px;
+    padding-inline: 0;
     text-align: center;
     width: 100%;
   }
diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
index 49e3a6e1c5757..e37af8dbcbf35 100644
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/src/renderer/components/ft-button/ft-button.css
@@ -2,7 +2,8 @@
   font-family: 'Roboto', sans-serif;
   min-width: 100px;
   font-size: 0.9rem;
-  padding: 10px 20px;
+  padding-block: 10px;
+  padding-inline: 20px;
   box-sizing: border-box;
   cursor: pointer;
   display: inline-block;
@@ -36,8 +37,8 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   pointer-events: none;
   background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
   background-repeat: no-repeat;
diff --git a/src/renderer/components/ft-card/ft-card.css b/src/renderer/components/ft-card/ft-card.css
index 7048b65424b4a..b9ef73f8b7f41 100644
--- a/src/renderer/components/ft-card/ft-card.css
+++ b/src/renderer/components/ft-card/ft-card.css
@@ -1,8 +1,7 @@
 .ft-card {
   background-color: var(--card-bg-color);
   margin: 8px;
-	padding: 16px;
-	padding-top: 3px;
-	padding-bottom: 16px;
+  padding-block: 3px 16px;
+  padding-inline: 16px;
   box-shadow: 0 1px 2px rgba(0,0,0,.1);
 }
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 a0bf13f51c6ce..56370fa5ed93f 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -32,7 +32,7 @@
 
 .selected {
   position: absolute;
-  top: 10px;
+  inset-block-start: 10px;
   background-color: rgba(0, 0, 0, 0.5);
 }
 
@@ -40,8 +40,8 @@
   color: #EEEEEE;
   font-size: 25px;
   position: absolute;
-  top: 12px;
-  left: 12px;
+  inset-block-start: 12px;
+  inset-inline-start: 12px;
 }
 
 .channelName {
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 a92808a54be03..4466c81766ab3 100644
--- a/src/renderer/components/ft-community-poll/ft-community-poll.css
+++ b/src/renderer/components/ft-community-poll/ft-community-poll.css
@@ -1,5 +1,5 @@
 .vote-count {
-  padding-bottom: 6px;
+  padding-block-end: 6px;
   font-size: smaller;
 }
 
@@ -9,21 +9,21 @@
   border-style: solid;
   border-width: 2px;
   display: block;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   height: 10px;
-  left: 5px;
+  inset-inline-start: 5px;
   position: relative;
-  top: 8px;
+  inset-block-start: 8px;
   width: 10px;
 }
-  
+
 .filled-circle {
   border-radius: 50%;
   background-color: black;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   height: 6px;
-  left: 2px;
-  top: 2px;
+  inset-inline-start: 2px;
+  inset-block-start: 2px;
   position: relative;
   width: 6px;
 }
@@ -32,11 +32,12 @@
   border-radius: 5px;
   border-style: solid;
   border-width: 2px;
-  padding: 5px 25px;
+  padding-block: 5px;
+  padding-inline: 25px;
 }
 
 .option {
-  padding-bottom: 10px;
+  padding-block-end: 10px;
 }
 
 .correct-option {
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 ad3cf1c875022..6f56df4f4c38c 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -22,7 +22,7 @@
   -webkit-border-radius: 50%;
   border-radius: 50%;
   height: 55px;
-  margin-right: 5px;
+  margin-inline-end: 5px;
   width: 55px;
 }
 
@@ -32,12 +32,14 @@
   .authorName {
     font-size: 15px;
     font-weight: bold;
-    margin: 5px 6px 0 5px;
+    margin-block: 5px 0;
+    margin-inline: 5px 6px;
   }
 
   .publishedText {
     font-size: 15px;
-    margin: 5px 6px 0 5px;
+    margin-block: 5px 0;
+    margin-inline: 5px 6px;
   }
 }
 
@@ -51,24 +53,24 @@
   display: block;
   flex-direction: column;
   font-size: 15px;
-  margin-top: 4px;
+  margin-block-start: 4px;
   max-width: 210px;
-  text-align: left;
+  text-align: start;
 
   @media screen and (max-width: 680px) {
-    margin-left: 0;
-    text-align: left;
+    margin-inline-start: 0;
+    text-align: start;
   }
 
   .likeBar {
     border-radius: 4px;
     height: 8px;
-    margin-bottom: 4px;
+    margin-block-end: 4px;
   }
 
   .likeCount {
-    margin-left: 5px;
-    margin-right: 6px;
+    margin-inline-start: 5px;
+    margin-inline-end: 6px;
   }
 }
 
@@ -77,8 +79,8 @@
 
   .videoThumbnail {
     display: flex;
-    margin-bottom: auto;
-    margin-top: auto;
+    margin-block-end: auto;
+    margin-block-start: auto;
     position: relative;
     width: fit-content;
 
@@ -91,7 +93,7 @@
   }
 
   .playlistText {
-    margin-left: 10px;
+    margin-inline-start: 10px;
     width: 50%;
     word-wrap: break-word;
 
@@ -111,7 +113,7 @@
       color: var(--primary-text-color);
       display: flex;
       font-size: small;
-      padding-top: 10px;
+      padding-block-start: 10px;
       text-decoration-line: none;
       width: 100%;
     }
@@ -128,5 +130,5 @@
 
 .ft-list-item.grid {
   min-height: 0 !important;
-  padding-bottom: 20px;
+  padding-block-end: 20px;
 }
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 4bf9ef447298a..076a690f3fc00 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -95,19 +95,19 @@
   z-index: 3;
 
   &.left {
-    right: calc(50% - 10px);
+    inset-inline-end: calc(50% - 10px);
   }
 
   &.right {
-    left: calc(50% - 10px);
+    inset-inline-start: calc(50% - 10px);
   }
 
   &.top {
-    bottom: 45px;
+    inset-block-end: 45px;
   }
 
   &.bottom {
-    top: 45px;
+    inset-block-start: 45px;
   }
 
   .list {
@@ -119,7 +119,8 @@
   .listItem {
     cursor: pointer;
     margin: 0;
-    padding: 8px 10px;
+    padding-block: 8px;
+    padding-inline: 10px;
     transition: background 0.2s ease-out;
     white-space: nowrap;
 
@@ -138,8 +139,9 @@
   }
 
   .listItemDivider {
-    border-top: 1px solid var(--tertiary-text-color);
-    margin: 1px auto;
+    border-block-start: 1px solid var(--tertiary-text-color);
+    margin-block: 1px;
+    margin-inline: auto;
     // Too "visible" with current color
     opacity: 0.5;
     width: 95%;
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 d5878a42a6204..cc167aba2face 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.css
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.css
@@ -20,13 +20,12 @@
   margin: 5px;
   border-radius: 5px;
   display:flex;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
 }
 
 .ft-tag-box li>span {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: 10px;
+  padding-block: 10px;
+  padding-inline-start: 10px;
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-all;
@@ -45,7 +44,7 @@
 }
 
 :deep(.ft-input-component .ft-input) {
-  margin-top: 10px;
+  margin-block-start: 10px;
 }
 
 @media only screen and (max-width: 576px) {
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 07090a95e9594..f7ac9e2145e52 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -2,23 +2,32 @@
   position: relative;
 }
 
+ body[dir='rtl'] .ft-input-component.search.showClearTextButton .inputAction {
+  inset-inline-end: -30px;
+ }
+
+ body[dir='rtl'] .ft-input-component.search.clearTextButtonVisible .inputAction,
+ body[dir='rtl'] .ft-input-component.search.showClearTextButton:focus-within .inputAction {
+  inset-inline-end: 0;
+ }
+
 .ft-input-component.search.showClearTextButton {
-  padding-left: 30px;
+  padding-inline-start: 30px;
 }
 
 .ft-input-component.search.clearTextButtonVisible,
 .ft-input-component.search.showClearTextButton:focus-within {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .ft-input-component.showClearTextButton:not(.search) .ft-input {
-  padding-left: 46px;
+  padding-inline-start: 46px;
 }
 
 /* Main search input */
 .clearTextButtonVisible.search .ft-input,
 .ft-input-component.search.showClearTextButton:focus-within .ft-input {
-  padding-left: 46px;
+  padding-inline-start: 46px;
 }
 
 .ft-input-component:focus-within .clearInputTextButton {
@@ -38,11 +47,12 @@
 
 .clearInputTextButton {
   position: absolute;
-  top: 5px;
-  left: 0;
+  inset-block-start: 5px;
+  inset-inline-start: 0;
   /* To be higher than `.inputWrapper` */
   z-index: 1;
-  margin: 0 3px;
+  margin-block: 0;
+  margin-inline: 3px;
   padding: 10px;
   border-radius: 100%;
   color: var(--primary-text-color);
@@ -70,7 +80,7 @@
 }
 
 .search .clearInputTextButton {
-  top: 12px;
+  inset-block-start: 12px;
 }
 
 .forceTextColor .clearInputTextButton {
@@ -89,7 +99,7 @@
   width: 100%;
   padding: 1rem;
   border: none;
-  margin-bottom: 10px;
+  margin-block-end: 10px;
   font-size: 16px;
   height: 45px;
   color: var(--secondary-text-color);
@@ -125,10 +135,11 @@
 
 .inputAction {
   position: absolute;
-  margin: 0 3px;
+  margin-block: 0;
+  margin-inline: 3px;
   padding: 10px;
-  top: -8px;
-  right: 0;
+  inset-block-start: -8px;
+  inset-inline-end: 0;
   border-radius: 100%;
   color: var(--primary-text-color);
   /* this should look disabled by default */
@@ -155,7 +166,7 @@
   With arrow present means
   the text might get under the arrow with normal padding
    */
-  padding-right: calc(36px + 6px);
+  padding-inline-end: calc(36px + 6px);
 }
 
 .inputAction.enabled:hover {
@@ -187,7 +198,8 @@
   width: 100%;
   list-style: none;
   margin: 0;
-  padding: 5px 0;
+  padding-block: 5px;
+  padding-inline: 0;
   z-index: 10;
   border-radius: 0 0 5px 5px;
   word-wrap: break-word;
@@ -197,7 +209,8 @@
 
 .list li {
   display: block;
-  padding: 0 15px;
+  padding-block: 0;
+  padding-inline: 15px;
   line-height: 2rem;
 }
 
diff --git a/src/renderer/components/ft-loader/ft-loader.css b/src/renderer/components/ft-loader/ft-loader.css
index 9216fc6e7781a..538b43ee85acb 100644
--- a/src/renderer/components/ft-loader/ft-loader.css
+++ b/src/renderer/components/ft-loader/ft-loader.css
@@ -39,7 +39,8 @@
     width: 40px;
     height: 40px;
     position: relative;
-    margin: 100px auto;
+    margin-block: 100px;
+    margin-inline: auto;
 }
 
 .double-bounce1,
@@ -49,8 +50,8 @@
     border-radius: 50%;
     opacity: 0.6;
     position: absolute;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     background-color: var(--primary-color);
 
     -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
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 fc4d165581095..4bf8377664972 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css
+++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
@@ -7,8 +7,8 @@
   */
   margin: 4px;
 	padding: 16px;
-	padding-top: 3px;
-	padding-bottom: 5px;
+  padding-block: 3px 5px;
+  padding-inline: 16px;
   box-shadow: 0 1px 2px rgba(0,0,0,.1);
   position: relative;
   cursor: pointer;
@@ -19,13 +19,13 @@
 }
 
 .message {
-  margin-right: 25px;
+  margin-inline-end: 25px;
   cursor: pointer;
 }
 
 .bannerIcon {
   position: absolute;
-  top: 35%;
-  right: 10px;
+  inset-block-start: 35%;
+  inset-inline-end: 10px;
   cursor: pointer;
 }
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 1db16e8fecfe5..c5d0a6afd3666 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -1,7 +1,8 @@
 .bubblePadding {
   width: 100px;
   height: 115px;
-  padding: 10px 10px 30px 10px;
+  padding-block: 10px 30px;
+  padding-inline: 10px;
   cursor: pointer;
   -webkit-transition: background 0.2s ease-out;
   -moz-transition: background 0.2s ease-out;
@@ -20,7 +21,8 @@
 .bubble {
   width: 70px;
   height: 70px;
-  margin: 20px auto 5px auto;
+  margin-block: 20px 5px;
+  margin-inline: auto;
   border-radius: 50%;
   -webkit-border-radius: 50%;
 }
@@ -29,7 +31,8 @@
   font-size: 35px;
   line-height: 1em;
   text-align: center;
-  padding: 17.5px 0;
+  padding-block: 17.5px;
+  padding-inline: 0;
   user-select: none;
   -webkit-user-select: none;
 }
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 ba8f5fc06c845..4beaf2f6b792f 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
@@ -1,5 +1,5 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 15px;
+  margin-block: 0 15px;
+  margin-inline: auto;
 }
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 3db26c9236a2e..c72cf594982c9 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 15px;
+  margin-block: 0 15px;
+  margin-inline: auto;
 }
 
 .message {
@@ -13,13 +13,13 @@
 }
 
 .bottomMargin {
-  margin-bottom: 30px;
+  margin-block-end: 30px;
 }
 
 .colorOptions {
   max-width: 1000px;
-  margin: 0 auto;
-  margin-bottom: 30px;
+  margin-block: 0 30px;
+  margin-inline: auto;
 }
 
 .colorOption {
@@ -35,7 +35,8 @@
   font-size: 50px;
   line-height: 1em;
   text-align: center;
-  padding: 25px 0;
+  padding-block: 25px;
+  padding-inline: 0px;
   user-select: none;
   -webkit-user-select: none;
 }
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 7243d3db9ed77..8a902e94724c8 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
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 30px;
+  margin-block: 0 30px;
+  margin-inline: auto;
 }
 
 .selected {
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 1b8f0c11e55d6..0c2b2acf1536f 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -24,8 +24,8 @@
 .profileList {
   display: inline;
   position: absolute;
-  top: 60px;
-  right: 10px;
+  inset-block-start: 60px;
+  inset-inline-end: 10px;
   min-width: 250px;
   height: 400px;
   padding: 5px;
@@ -34,7 +34,7 @@
 }
 
 .profileWrapper {
-  margin-top: 60px;
+  margin-block-start: 60px;
   height: 340px;
   overflow-y: auto;
 }
@@ -57,9 +57,9 @@
 }
 
 .profile .colorOption {
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   position: relative;
-  bottom: 5px;
+  inset-block-end: 5px;
   margin: 10px;
 }
 
@@ -67,18 +67,18 @@
   display: flex;
   align-items: center;
   height: 50px;
-  padding-right: 10px;
+  padding-inline-end: 10px;
 }
 
 .profileListTitle {
   position: absolute;
   margin: 0;
-  left: 10px;
+  inset-inline-start: 10px;
 }
 
 .profileSettings {
-  float: right;
+  float: var(--float-right-ltr-rtl-value);
   position: absolute;
-  top: 10px;
-  right: 5px;
+  inset-block-start: 10px;
+  inset-inline-end: 5px;
 }
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 43816bd2f3671..8dc334371cfbe 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;
   height: 3px;
-  bottom: 0px;
-  left: 0px;
+  inset-block-end: 0px;
+  inset-inline-start: 0px;
   background-color: var(--primary-color);
   z-index: 1;
   transition: width 0.5s;
diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css
index 87e71c4fcf410..ed37a7f7636ff 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@@ -1,7 +1,7 @@
 .prompt {
   position: fixed;
-  top: 0px;
-  left: 0px;
+  inset-block-start: 0px;
+  inset-inline-start: 0px;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.7);
@@ -15,7 +15,8 @@
 
 .promptCard.autosize {
   box-sizing: border-box;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   max-width: 95%;
 }
 
@@ -23,7 +24,7 @@
   width: 95%;
   margin: 0;
   position: absolute;
-  left: 2.5%;
+  inset-inline-start: 2.5%;
   box-sizing: border-box;
 }
 
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 7c5aa29e1254f..670616ecb077e 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -17,13 +17,13 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 
 .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-left: 2em;
+  padding-inline-start: 2em;
   vertical-align: middle;
   -webkit-user-select: none;
   user-select: none;
   cursor: pointer;
   display: block;
-  margin-bottom: -20px;
+  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 {
@@ -31,11 +31,11 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   content: '';
   color: var(--primary-color);
   position: absolute;
-  top: 50%;
-  left: 0;
+  inset-block-start: 50%;
+  inset-inline-start: 0;
   width: 14px;
   height: 14px;
-  margin-top: -9px;
+  margin-block-start: -9px;
   border: 2px solid var(--primary-color);
   text-align: center;
   transition: all 0.4s ease;
@@ -46,11 +46,11 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   content: '';
   background-color: var(--primary-color);
   position: absolute;
-  top: 50%;
-  left: 4px;
+  inset-block-start: 50%;
+  inset-inline-start: 4px;
   width: 10px;
   height: 10px;
-  margin-top: -5px;
+  margin-block-start: -5px;
   transform: scale(0);
   transform-origin: 50%;
   transition: transform 200ms ease-out;
@@ -64,11 +64,11 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 
 .pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after {
   background-color: transparent;
-  top: 50%;
-  left: 4px;
+  inset-block-start: 50%;
+  inset-inline-start: 4px;
   width: 8px;
   height: 3px;
-  margin-top: -4px;
+  margin-block-start: -4px;
   border-style: solid;
   border-width: 0 0 3px 3px;
   border-image: none;
@@ -103,5 +103,5 @@ borderscale {  50% {
 }
 
 .radioTitle {
-  margin-bottom: -20px;
+  margin-block-end: -20px;
 }
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 b9052b3050c85..0159e28feffff 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -1,9 +1,10 @@
 .searchFilterInner {
   max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
 
-  padding: 20px 20px 70px 20px;
+  padding-block: 20px 70px;
+  padding-inline: 20px;
   max-height: 410px;
   overflow-y: auto;
 
@@ -23,11 +24,12 @@
 
 .radioFlexBox {
   max-width: 1000px;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
 }
 
 @media only screen and (max-width: 600px) {
   .searchRadio {
-    border-right: 0;
+    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 5387cdbbc2cd4..67a822bbf7775 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -24,8 +24,9 @@
 .select {
   position: relative;
   width: 200px;
-  padding: 0px 10px 10px 0;
-  margin-top: 30px;
+  padding-block: 0 10px;
+  padding-inline: 0 10px;
+  margin-block-start: 30px;
 }
 
 .disabled, .disabled + svg.iconSelect {
@@ -39,7 +40,8 @@
   background-color: transparent;
   color: var(--primary-text-color);
   width: 240px;
-  padding: 10px 10px 10px 0;
+  padding-block: 10px;
+  padding-inline: 0 10px;
   font-size: 18px;
   border-radius: 0;
   border: none;
@@ -60,26 +62,26 @@
   appearance: none;
   -webkit-appearance:none;
   text-overflow: ellipsis;
-  padding-right: 1.1rem;
+  padding-inline-end: 1.1rem;
 }
 
 .iconSelect {
   position: absolute;
-  top: 10px;
-  right: 15px;
+  inset-block-start: 10px;
+  inset-inline-end: 15px;
   /* Styling the down arrow */
   padding: 0;
   content: '';
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
+  border-inline-start: 6px solid transparent;
+  border-inline-end: 6px solid transparent;
   pointer-events: none;
   color: var(--tertiary-text-color);
 }
 
 .selectTooltip {
   position: absolute;
-  top: -20px;
-  right: 17px;
+  inset-block-start: -20px;
+  inset-inline-end: 17px;
 }
 
 
@@ -88,8 +90,8 @@
   font-size: 18px;
   font-weight: normal;
   position: absolute;
-  left: 0;
-  top: 10px;
+  inset-inline-start: 0;
+  inset-block-start: 10px;
   transition: 0.2s ease all;
   color: var(--tertiary-text-color);
 }
@@ -97,7 +99,7 @@
 /* active state */
 .select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
   color: var(--accent-color);
-  top: -20px;
+  inset-block-start: -20px;
   transition: 0.2s ease all;
   font-size: 14px;
 }
@@ -113,18 +115,18 @@
   content: '';
   height: 2px;
   width: 0;
-  bottom: 1px;
+  inset-block-end: 1px;
   position: absolute;
   background: var(--accent-color);
   transition: 0.2s ease all;
 }
 
 .select-bar:before {
-  left: 50%;
+  inset-inline-start: 50%;
 }
 
 .select-bar:after {
-  right: 50%;
+  inset-inline-end: 50%;
 }
 
 /* active state */
@@ -137,8 +139,8 @@
   position: absolute;
   height: 60%;
   width: 100px;
-  top: 25%;
-  left: 0;
+  inset-block-start: 25%;
+  inset-inline-start: 0;
   pointer-events: none;
   opacity: 0.5;
 }
@@ -162,6 +164,6 @@
 @media only screen and (max-width: 680px) {
   .select {
     padding: 0px;
-    margin-right: -15px;
-  }  
+    margin-inline-end: -15px;
+  }
 }
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 f22fce69983d7..9fa31bcf8cf44 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -1,6 +1,7 @@
 .settingsSection {
   background-color: var(--card-bg-color);
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   width: 85%;
 
   @media only screen and (max-width: 800px) {
@@ -8,18 +9,19 @@
   }
 
   &[open] {
-    padding-bottom: 15px;
+    padding-block-end: 15px;
   }
 
   > div {
     box-sizing: border-box;
-    padding: 0 20px;
+    padding-block: 0;
+    padding-inline: 20px;
     width: 100%;
   }
 
   > div:not(:last-child, .ft-flex-box) {
     @media only screen and (max-width: 800px) {
-      margin-bottom: 20px;
+      margin-block-end: 20px;
     }
   }
 }
@@ -28,7 +30,7 @@
   background-color: var(--primary-color);
   border: 0;
   height: 2px;
-  margin-top: -1px;
+  margin-block-start: -1px;
   width: 100%;
 }
 
@@ -41,7 +43,7 @@
 .sectionTitle {
   -webkit-user-select: none;
   user-select: none;
-  margin-left: 2%;
+  margin-inline-start: 2%;
 }
 
 :deep(.switchGrid) {
@@ -64,7 +66,7 @@
 :deep(.switchColumn) {
   display: flex;
   flex-direction: column;
-  justify-items: start;
+  align-items: start;
 }
 
 :deep(.center) {
@@ -87,32 +89,34 @@
   .settingsSection {
     > div {
       :deep(.text.bottom) {
-        left: -85px;
+        inset-inline-start: -85px;
       }
     }
 
     :deep(.switch-ctn.containsTooltip) {
-      left: -10px;
-      margin-right: 5px;
-      padding: 0 10px;
+      inset-inline-start: -10px;
+      margin-inline-end: 5px;
+      padding-block: 0;
+      padding-inline: 10px;
     }
 
     :not(.select, .selectLabel) {
       > :deep(.tooltip) {
         display: inline-block;
         position: absolute;
-        right: -25px;
-        top: 12px;
+        inset-inline-end: -25px;
+        inset-block-start: 12px;
       }
     }
 
     .settingsFlexStart460px :deep(.tooltip) {
-      right: 0;
-      top: -2px;
+      inset-inline-end: 0;
+      inset-block-start: -2px;
     }
 
     :deep(.switch-ctn) {
-      margin: 10px 7px;
+      margin-block: 10px;
+      margin-inline: 7px;
     }
   }
 }
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 3cd776cf697f0..982767c7e26fa 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.scss
+++ b/src/renderer/components/ft-share-button/ft-share-button.scss
@@ -9,7 +9,8 @@
     color: var(--primary-text-color);
     font-size: 18px;
     font-weight: bold;
-    margin: 4px 0 8px;
+    margin-block: 4px 8px;
+    margin-inline: 0;
   }
 
   .buttons {
@@ -24,7 +25,8 @@
   .divider {
     background: var(--tertiary-text-color);
     grid-row: span 3;
-    margin: 0 12px;
+    margin-block: 0;
+    margin-inline: 12px;
     width: 1px;
   }
 
@@ -61,7 +63,7 @@
       background-size: cover;
       display: inline-block;
       height: 20px;
-      margin-right: 2px;
+      margin-inline-end: 2px;
       width: 20px;
 
       @at-root {
diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index b4169819a5365..501d1cddac0c4 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -1,250 +1,256 @@
 .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;
-    width: 380px;
-    color: rgba(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;
-    padding: 5px;
-    margin: 12px 8px;
+  --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;
+  width: 380px;
+  color: rgba(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;
+  padding: 5px;
+  margin-block: 12px;
+  margin-inline: 8px;
 }
 
 /* Input */
 .pure-material-slider > input {
-    -webkit-appearance: none;
-    position: relative;
-    top: 24px;
-    display: block;
-    margin: 0 0 -36px;
-    width: 100%;
-    height: 36px;
-    background-color: transparent;
-    cursor: pointer;
+  -webkit-appearance: none;
+  position: relative;
+  inset-block-start: 24px;
+  display: block;
+  margin-block: 0 -36px;
+  margin-inline: 0;
+  width: 100%;
+  height: 36px;
+  background-color: transparent;
+  cursor: pointer;
 }
 
 /* Without Span */
 .pure-material-slider > input:last-child {
-    position: static;
-    margin: 0;
+  position: static;
+  margin: 0;
 }
 
 /* Span */
 .pure-material-slider > span {
-    display: inline-block;
-    margin-bottom: 36px;
+  display: inline-block;
+  margin-block-end: 36px;
 }
 
 /* Focus */
 .pure-material-slider > input:focus {
-    outline: none;
+  outline: none;
 }
 
 /* Disabled */
 .pure-material-slider > input:disabled {
-    cursor: default;
-    opacity: 0.38;
+  cursor: default;
+  opacity: 0.38;
 }
 
 .pure-material-slider > input:disabled + span {
-    opacity: 0.38;
+  opacity: 0.38;
 }
 
 /* Webkit | Track */
 .pure-material-slider > input::-webkit-slider-runnable-track {
-    margin: 17px 0;
-    border-radius: 1px;
-    width: 100%;
-    height: 2px;
-    background-color: var(--accent-color-opacity4);
+  margin-block: 17px;
+  margin-inline: 0;
+  border-radius: 1px;
+  width: 100%;
+  height: 2px;
+  background-color: var(--accent-color-opacity4);
 }
 
 /* Webkit | Thumb */
 .pure-material-slider > input::-webkit-slider-thumb {
-    appearance: none;
-    -webkit-appearance: none;
-    border: none;
-    border-radius: 50%;
-    height: 2px;
-    width: 2px;
-    background-color: var(--accent-color);
-    transform: scale(6, 6);
-    transition: box-shadow 0.2s;
+  appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  border-radius: 50%;
+  height: 2px;
+  width: 2px;
+  background-color: var(--accent-color);
+  transform: scale(6, 6);
+  transition: box-shadow 0.2s;
 }
 
 /* Webkit | Hover, Focus */
 .pure-material-slider:hover > input::-webkit-slider-thumb {
-    box-shadow: 0 0 0 2px var(--pure-material-safari-helper1);
+  box-shadow: 0 0 0 2px var(--pure-material-safari-helper1);
 }
 
 .pure-material-slider > input:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 0 2px var(--pure-material-safari-helper2);
+  box-shadow: 0 0 0 2px var(--pure-material-safari-helper2);
 }
 
 .pure-material-slider:hover > input:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 0 2px var(--pure-material-safari-helper3);
+  box-shadow: 0 0 0 2px var(--pure-material-safari-helper3);
 }
 
 /* Webkit | Active */
 .pure-material-slider > input:active::-webkit-slider-thumb {
-     box-shadow: 0 0 0 2px var(--pure-material-safari-helper4) !important;
+  box-shadow: 0 0 0 2px var(--pure-material-safari-helper4) !important;
 }
 
 /* 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: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
 }
 
 .pure-material-slider > input:disabled::-webkit-slider-thumb {
-    background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
-    color: rgb(var(--pure-material-surface-rgb, 255, 255, 255)); /* Safari */
-    box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
-    transform: scale(4, 4);
+  background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
+  color: rgb(var(--pure-material-surface-rgb, 255, 255, 255)); /* Safari */
+  box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
+  transform: scale(4, 4);
 }
 
 /* Moz | Track */
 .pure-material-slider > input::-moz-range-track {
-    margin: 17px 0;
-    border-radius: 1px;
-    width: 100%;
-    height: 2px;
-    background-color: var(--accent-color-opacity4);
+  margin-block: 0;
+  margin-auto: 17px;
+  border-radius: 1px;
+  width: 100%;
+  height: 2px;
+  background-color: var(--accent-color-opacity4);
 }
 
 /* Moz | Thumb */
 .pure-material-slider > input::-moz-range-thumb {
-    appearance: none;
-    -moz-appearance: none;
-    border: none;
-    border-radius: 50%;
-    height: 2px;
-    width: 2px;
-    background-color: var(--accent-color);
-    transform: scale(6, 6);
-    transition: box-shadow 0.2s;
+  appearance: none;
+  -moz-appearance: none;
+  border: none;
+  border-radius: 50%;
+  height: 2px;
+  width: 2px;
+  background-color: var(--accent-color);
+  transform: scale(6, 6);
+  transition: box-shadow 0.2s;
 }
 
 /* Moz | Progress */
 .pure-material-slider > input::-moz-range-progress {
-    border-radius: 1px;
-    height: 2px;
-    background-color: var(--accent-color);
+  border-radius: 1px;
+  height: 2px;
+  background-color: var(--accent-color);
 }
 
 /* Moz | Hover, Focus */
 .pure-material-slider:hover > input:hover::-moz-range-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity1);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity1);
 }
 
 .pure-material-slider > input:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity2);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity2);
 }
 
 .pure-material-slider:hover > input:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity3);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity3);
 }
 
 /* Moz | Active */
 .pure-material-slider > input:active::-moz-range-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
+  box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
 }
 
 /* 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: rgba(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: rgba(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;
-    transform: scale(4, 4);
+  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;
+  transform: scale(4, 4);
 }
 
 .pure-material-slider > input::-moz-focus-outer {
-    border: none;
+  border: none;
 }
 
 /* MS | Track */
 .pure-material-slider > input::-ms-track {
-    box-sizing: border-box;
-    margin: 17px 0;
-    border: none;
-    border-radius: 1px;
-    padding: 0 17px;
-    width: 100%;
-    height: 2px;
-    background-color: transparent;
+  box-sizing: border-box;
+  margin-block: 17px;
+  margin-inline: 0;
+  border: none;
+  border-radius: 1px;
+  padding-block: 0;
+  padding-inline: 17px;
+  width: 100%;
+  height: 2px;
+  background-color: transparent;
 }
 
 .pure-material-slider > input::-ms-fill-lower {
-    border-radius: 1px;
-    height: 2px;
-    background-color: var(--accent-color);
+  border-radius: 1px;
+  height: 2px;
+  background-color: var(--accent-color);
 }
 
 /* MS | Progress */
 .pure-material-slider > input::-ms-fill-upper {
-    border-radius: 1px;
-    height: 2px;
-    background-color: var(--accent-color-opacity4);
+  border-radius: 1px;
+  height: 2px;
+  background-color: var(--accent-color-opacity4);
 }
 
 /* MS | Thumb */
 .pure-material-slider > input::-ms-thumb {
-    appearance: none;
-    margin: 0 17px;
-    border: none;
-    border-radius: 50%;
-    height: 2px;
-    width: 2px;
-    background-color: var(--accent-color);
-    transform: scale(6, 6);
-    transition: box-shadow 0.2s;
+  appearance: none;
+  margin-block: 0;
+  margin-inline: 17px;
+  border: none;
+  border-radius: 50%;
+  height: 2px;
+  width: 2px;
+  background-color: var(--accent-color);
+  transform: scale(6, 6);
+  transition: box-shadow 0.2s;
 }
 
 /* MS | Hover, Focus */
 .pure-material-slider:hover > input::-ms-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity1);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity1);
 }
 
 .pure-material-slider > input:focus::-ms-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity2);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity2);
 }
 
 .pure-material-slider:hover > input:focus::-ms-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity3);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity3);
 }
 
 /* MS | Active */
 .pure-material-slider > input:active::-ms-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
+  box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
 }
 
 /* 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: rgba(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);
-    opacity: 0.38;
+  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+  opacity: 0.38;
 }
 
 .pure-material-slider > input:disabled::-ms-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;
-    transform: scale(4, 4);
+  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;
+  transform: scale(4, 4);
 }
 
 @media only screen and (max-width: 680px) {
-    .pure-material-slider {
-        width: 100%;
-    }
+  .pure-material-slider {
+    width: 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 9fff4e5cc826b..3afca0e66b660 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
@@ -1,6 +1,7 @@
 .sponsorBlockCategory {
-  margin-top: 30px;
-  padding: 0 10px;
+  margin-block-start: 30px;
+  padding-block: 0;
+  padding-inline: 10px;
 
   @media only screen and (max-width: 680px) {
     width: 100%;
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
index 7aff233049d6e..9faeb44025d03 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
@@ -1,6 +1,6 @@
 .subscribeButton {
   align-self: center;
   height: 50%;
-  margin-bottom: 10px;
+  margin-block-end: 10px;
   min-width: 150px;
 }
diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index 686b9c32f2afb..99274cece4058 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -1,8 +1,8 @@
 .toast-holder {
   position: fixed;
-  left: 50vw;
-  transform: translate(-50%, 0);
-  bottom: 50px;
+  inset-inline-start: 50vw;
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
+  inset-block-end: 50px;
   z-index: 1;
   display: flex;
   flex-direction: column;
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 d116fcf7450e4..dc4207e1675a8 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -1,7 +1,8 @@
 /* Thanks to Guus Lieben for the Material Design Switch */
 
 .switch-ctn {
-  margin: 20px 16px;
+  margin-block: 20px;
+  margin-inline: 16px;
   position: relative;
 
   &.compact {
@@ -12,9 +13,9 @@
 .switch-input {
   appearance: none;
   height: 20px;
-  left: -3px;
+  inset-inline-start: -3px;
   position: absolute;
-  top: calc(50% - 3px);
+  inset-block-start: calc(50% - 3px);
   transform: translate(0, -50%);
   width: 34px;
 }
@@ -23,9 +24,10 @@
   cursor: pointer;
   display: inline-block;
   font-weight: 500;
-  padding: 12px 0 12px 44px;
+  padding-block: 12px;
+  padding-inline: 44px 0;
   position: relative;
-  text-align: left;
+  text-align: start;
 
   &::before,
   &::after {
@@ -33,7 +35,7 @@
     margin: 0;
     outline: 0;
     position: absolute;
-    top: 50%;
+    inset-block-start: 50%;
     transform: translate(0, -50%);
     transition: all 0.3s ease;
   }
@@ -42,7 +44,7 @@
     background-color: #9e9e9e;
     border-radius: 8px;
     height: 14px;
-    left: 1px;
+    inset-inline-start: 1px;
     width: 34px;
 
     .switch-input:checked + & {
@@ -59,12 +61,12 @@
     border-radius: 50%;
     box-shadow: 0 3px 1px -2px rgb(0 0 0 / 14%), 0 2px 2px 0 rgb(0 0 0 / 9.8%), 0 1px 5px 0 rgb(0 0 0 / 8.4%);
     height: 20px;
-    left: 0;
+    inset-inline-start: 0;
     width: 20px;
 
     .switch-input:checked + & {
       background-color: var(--accent-color);
-      transform: translate(80%, -50%);
+      transform: translate(calc(80% * var(--horizontal-directionality-coefficient)), -50%);
     }
 
     .switch-input:disabled + & {
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 3a1977d79983f..7af822570323f 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -19,8 +19,8 @@
 .button:hover + .text.bottom-left,
 .button:focus + .text.top,
 .button:hover + .text.top {
-  -webkit-transform: translate(-50%, 0);
-  transform: translate(-50%, 0);
+  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
 }
 
 .button:focus + .text.left,
@@ -41,7 +41,8 @@
   max-width: max-content;
   min-width: 15em;
   opacity: 0;
-  padding: 10px 8px;
+  padding-block: 10px;
+  padding-inline: 8px;
   pointer-events: none;
   position: absolute;
   text-align: center;
@@ -52,43 +53,43 @@
 }
 
 .text.bottom {
-  margin-top: 1em;
-  top: 100%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -1em);
-  transform: translate(-50%, -1em);
+  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);
 }
 
 .text.bottom-left {
-  margin-top: 1em;
-  top: 100%;
-  left: -100px;
+  margin-block-start: 1em;
+  inset-block-start: 100%;
+  inset-inline-start: -100px;
   -webkit-transform: translate(-50%, -1em);
-  transform: translate(-50%, -1em);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
 }
 
 .text.left {
-  margin-right:1em;
-  right: 100%;
-  top: 50%;
-  -webkit-transform: translate(1em, -50%);
-  transform: translate(1em, -50%);
+  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%);
 }
 
 .text.right {
-  left: 100%;
-  margin-left: 1em;
-  top: 50%;
-  -webkit-transform: translate(-1em, -50%);
-  transform: translate(-1em, -50%);
+  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%);
 }
 
 .text.top {
-  bottom: 100%;
-  left: 50%;
-  margin-bottom: 1em;
-  -webkit-transform: translate(-50%, 1em);
-  transform: translate(-50%, 1em);
+  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);
 }
 
 .tooltip {
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 d34fd7dd84118..c751799f90781 100644
--- a/src/renderer/components/ft-video-player/ft-video-player.css
+++ b/src/renderer/components/ft-video-player/ft-video-player.css
@@ -22,7 +22,7 @@
 
 :deep(.chapterMarker) {
   height: 100%;
-  top: 0;
+  inset-block-start: 0;
   width: 2px;
   z-index: 2;
   background-color: #000;
diff --git a/src/renderer/components/player-settings/player-settings.scss b/src/renderer/components/player-settings/player-settings.scss
index 246dc136e4685..19bfa9b25f8e9 100644
--- a/src/renderer/components/player-settings/player-settings.scss
+++ b/src/renderer/components/player-settings/player-settings.scss
@@ -5,7 +5,8 @@
 .screenshotFolderContainer {
   align-items: center;
   column-gap: 1rem;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   width: 95%;
 
   .screenshotFolderLabel,
@@ -18,6 +19,6 @@
   .screenshotFilenamePatternInput,
   .screenshotFilenamePatternExample {
     flex-grow: 1;
-    margin-top: 10px;
+    margin-block-start: 10px;
   }
 }
diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss
index f06dca68fe2e3..ef4e1f6429d5b 100644
--- a/src/renderer/components/playlist-info/playlist-info.scss
+++ b/src/renderer/components/playlist-info/playlist-info.scss
@@ -21,7 +21,7 @@
 }
 
 .playlistTitle {
-  margin-bottom: 0.1em;
+  margin-block-end: 0.1em;
 }
 
 .playlistDescription {
@@ -45,7 +45,7 @@
 
 .channelThumbnail {
   border-radius: 200px;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   width: 40px;
 }
 
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 bf70da54812b7..2d3eaf16334cc 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
@@ -30,7 +30,7 @@
 .moreOptionContainer {
   position: fixed;
   background-color: var(--side-nav-color);
-  bottom: 60px;
+  inset-block-end: 60px;
   width: 70px;
   z-index: 0;
   -webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
@@ -44,33 +44,34 @@
   }
 
   .sideNav, .closed {
-    margin-top: 0px;
+    margin-block-start: 0px;
     height: 60px;
     width: 100%;
-    bottom: 0px;
-    top: auto;
+    inset-block-end: 0px;
+    inset-block-start: auto;
     overflow-y: inherit;
   }
 
   .navOption, .closed .navOption {
     width: 70px;
     height: 40px;
-    padding: 10px 0px;
+    padding-block: 10px;
+    padding-inline: 0;
   }
 
   .navLabel {
-    margin-left: 0px;
+    margin-inline-start: 0px;
     width: 100%;
     text-align: center;
-    left: 0px;
+    inset-inline-start: 0px;
     font-size: 11px;
   }
 
   .navIcon {
-    margin-left: 0px;
+    margin-inline-start: 0px;
     width: 100%;
     display: block;
-    margin-top: 0.5em;
+    margin-block-start: 0.5em;
   }
 
   .moreOption {
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 1157b67eb6c10..1325afb972e0d 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -4,8 +4,8 @@
   width: 200px;
   overflow-x: hidden;
   position: sticky;
-  left: 0;
-  top: 60px;
+  inset-inline-start: 0;
+  inset-block-start: 60px;
   z-index: 3;
   box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
   background-color: var(--side-nav-color);
@@ -36,7 +36,7 @@
 }
 
 .topNavOption {
-  margin-top: 10px;
+  margin-block-start: 10px;
 }
 
 .navOption, .navChannel {
@@ -67,18 +67,18 @@
 }
 
 .navIcon {
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }
 
 .navOption .navLabel {
-  margin-left: 40px;
+  margin-inline-start: 40px;
   overflow: hidden;
   word-break: break-word;
 }
 
 .navChannel .navLabel {
   overflow: hidden;
-  margin-left: 40px;
+  margin-inline-start: 40px;
   word-break: break-word;
   font-size: 12px;
 }
@@ -87,7 +87,7 @@
   width: 35px;
   margin: 0;
   position: absolute;
-  top: 50%;
+  inset-block-start: 50%;
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }
@@ -116,8 +116,8 @@
 
 .refreshIcon {
   position: absolute;
-  top: 20px;
-  right: 20px;
+  inset-block-start: 20px;
+  inset-inline-end: 20px;
 }
 
 .closed .refreshIcon {
@@ -126,24 +126,25 @@
 
 .closed .navOption {
   width: 100%;
-  padding: 5px 0px;
+  padding-block: 5px;
+  padding-inline: 0;
 }
 
 .closed .navIcon {
-  margin-left: 0px;
+  margin-inline-start: 0px;
   width: 100%;
   display: block;
-  margin-bottom: 0px;
+  margin-block-end: 0px;
 }
 .closed .navIconExpand{
   height:1.3em;
 }
 
 .closed .navLabel {
-  margin-left: 0px;
+  margin-inline-start: 0px;
   width: 100%;
   text-align: center;
-  left: 0px;
+  inset-inline-start: 0px;
   font-size: 11px;
   margin-block-end: 0em;
 }
@@ -151,15 +152,17 @@
 .closed .navChannel {
   width: 100%;
   height: 45px;
-  padding: 5px 0px;
+  padding-block: 5px;
+  padding-inline: 0;
 }
 
 .closed .thumbnailContainer {
   position: static;
   display: block;
   float: none;
-  margin: 0 auto;
-  top: 0px;
+  margin-block: 0;
+  margin-inline: auto;
+  inset-block-start: 0px;
   -ms-transform: none;
   transform: none;
   margin-block-start: 0.3em;
@@ -177,24 +180,24 @@
 
   .sideNav {
     position: fixed;
-    left: 0;
-    bottom: 0;
+    inset-inline-start: 0;
+    inset-block-end: 0;
 
     display: flex;
   }
 
   .topNavOption {
-    margin-top: 0px;
-    padding-left: 10px;
-    padding-right: 10px;
+    margin-block-start: 0px;
+    padding-inline-start: 10px;
+    padding-inline-end: 10px;
   }
 
   .sideNav, .closed {
-    margin-top: 0px;
+    margin-block-start: 0px;
     height: 60px;
     width: 100%;
-    bottom: 0px;
-    top: auto;
+    inset-block-end: 0px;
+    inset-block-start: auto;
     overflow-y: hidden;
   }
 
@@ -202,15 +205,15 @@
     width: 70px;
     height: 40px;
     padding: 0px;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding-block-start: 10px;
+    padding-block-end: 10px;
   }
 
   .navLabel {
-    margin-left: 0px;
+    margin-inline-start: 0px;
     width: 100%;
     text-align: center;
-    left: 0px;
+    inset-inline-start: 0px;
     font-size: 11px;
   }
 
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 8c2f61968d9a0..103af5333ec49 100644
--- a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
+++ b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
@@ -10,8 +10,8 @@
 
 .floatingTopButton {
   position: fixed;
-  top: 70px;
-  right: 10px;
+  inset-block-start: 70px;
+  inset-inline-end: 10px;
 }
 
 @media only screen and (max-width: 350px) {
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 347d02ab6fc37..801bb2c92da6c 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -25,6 +25,8 @@ export default defineComponent({
       searchFilterValueChanged: false,
       historyIndex: 1,
       isForwardOrBack: false,
+      isArrowBackwardDisabled: true,
+      isArrowForwardDisabled: true,
       searchSuggestionsDataList: [],
       lastSuggestionQuery: ''
     }
@@ -280,8 +282,8 @@ export default defineComponent({
     navigateHistory: function () {
       if (!this.isForwardOrBack) {
         this.historyIndex = window.history.length
-        this.$refs.historyArrowBack.classList.remove('fa-arrow-left')
-        this.$refs.historyArrowForward.classList.add('fa-arrow-right')
+        this.isArrowBackwardDisabled = false
+        this.isArrowForwardDisabled = true
       } else {
         this.isForwardOrBack = false
       }
@@ -293,9 +295,9 @@ export default defineComponent({
 
       if (this.historyIndex > 1) {
         this.historyIndex--
-        this.$refs.historyArrowForward.classList.remove('fa-arrow-right')
+        this.isArrowForwardDisabled = false
         if (this.historyIndex === 1) {
-          this.$refs.historyArrowBack.classList.add('fa-arrow-left')
+          this.isArrowBackwardDisabled = true
         }
       }
     },
@@ -306,10 +308,10 @@ export default defineComponent({
 
       if (this.historyIndex < window.history.length) {
         this.historyIndex++
-        this.$refs.historyArrowBack.classList.remove('fa-arrow-left')
+        this.isArrowBackwardDisabled = false
 
         if (this.historyIndex === window.history.length) {
-          this.$refs.historyArrowForward.classList.add('fa-arrow-right')
+          this.isArrowForwardDisabled = true
         }
       }
     },
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index d1a398a0a953d..03d532e487e12 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -14,11 +14,11 @@
   box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
   display: flex;
   height: 60px;
-  left: 0;
+  inset-inline-start: 0;
   line-height: 60px;
   position: sticky;
-  right: 0;
-  top: 0;
+  inset-inline-end: 0;
+  inset-block-start: 0;
   width: 100%;
   z-index: 4;
 
@@ -56,9 +56,10 @@
     color: var(--text-with-main-color);
   }
 
-  &.fa-arrow-left,
-  &.fa-arrow-right {
-    opacity: 0.4;
+  &.arrowBackwardDisabled,
+  &.arrowForwardDisabled {
+    color: gray;
+    opacity: 0.5;
     pointer-events: none;
     -webkit-user-select: none;
     user-select: none;
@@ -88,7 +89,7 @@
 .navFilterIcon {
   $effect-distance: 10px;
 
-  margin-left: $effect-distance;
+  margin-inline-start: $effect-distance;
 
   &.filterChanged {
     box-shadow: 0 0 $effect-distance var(--primary-color);
@@ -103,7 +104,8 @@
   align-items: center;
   display: flex;
   gap: 3px;
-  margin: 0 6px;
+  margin-block: 0;
+  margin-inline: 6px;
 
   &.profiles {
     justify-content: flex-end;
@@ -125,7 +127,8 @@
     align-items: center;
     cursor: pointer;
     display: flex;
-    padding: 0 25px 0 10px;
+    padding-block: 0;
+    padding-inline: 10px 25px;
 
     &:active {
       background-color: var(--tertiary-text-color);
@@ -155,9 +158,9 @@
       background-repeat: no-repeat;
       background-size: 100px;
       height: 40px;
-      margin-left: 5px;
+      margin-inline-start: 5px;
       position: relative;
-      top: -3px;
+      inset-block-start: -3px;
       width: 100px;
 
       @media only screen and (max-width: 680px) {
@@ -181,10 +184,10 @@
 
     @media only screen and (max-width: 680px) {
       background-color: var(--side-nav-color);
-      left: 0;
+      inset-inline-start: 0;
       position: fixed;
-      right: 0;
-      top: 60px;
+      inset-inline-end: 0;
+      inset-block-start: 60px;
 
       @include top-nav-is-colored {
         background-color: var(--primary-color-hover);
@@ -197,16 +200,18 @@
   }
 
   .searchFilters {
-    left: 0;
-    margin: 10px 20px 20px 220px;
+    inset-inline-start: 0;
+    margin-block: 10px 20px;
+    margin-inline: 220px 20px;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     transition: margin 150ms ease-in-out;
 
     @media only screen and (max-width: 680px) {
-      left: 0;
-      margin: 95px 10px 0;
-      right: 0;
+      inset-inline-start: 0;
+      margin-block: 95px 0;
+      margin-inline: 10px;
+      inset-inline-end: 0;
     }
   }
 }
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 291948ec65b7d..03cd544ce1ac6 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -14,8 +14,9 @@
         @keydown.enter.prevent="toggleSideNav"
       />
       <font-awesome-icon
-        ref="historyArrowBack"
-        class="navBackIcon navIcon fa-arrow-left"
+        :aria-disabled="isArrowBackwardDisabled"
+        class="navIcon"
+        :class="{ arrowBackwardDisabled: isArrowBackwardDisabled}"
         :icon="['fas', 'arrow-left']"
         role="button"
         tabindex="0"
@@ -24,8 +25,9 @@
         @keydown.enter.prevent="historyBack"
       />
       <font-awesome-icon
-        ref="historyArrowForward"
-        class="navForwardIcon navIcon fa-arrow-right"
+        :aria-disabled="isArrowForwardDisabled"
+        class="navIcon"
+        :class="{ arrowForwardDisabled: isArrowForwardDisabled}"
         :icon="['fas', 'arrow-right']"
         role="button"
         tabindex="0"
@@ -54,6 +56,7 @@
       <div
         v-if="!hideHeaderLogo"
         class="logo"
+        dir="ltr"
         role="link"
         tabindex="0"
         :title="$t('Subscriptions.Subscriptions')"
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 d95bde01073f5..29e3a29eb71b8 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,8 @@
 }
 
 .chaptersTitle {
-  margin-top: 10px;
-  margin-bottom: 0;
+  margin-block-start: 10px;
+  margin-block-end: 0;
   cursor: pointer;
 }
 
@@ -13,7 +13,7 @@
 }
 
 .chaptersWrapper {
-  margin-top: 15px;
+  margin-block-start: 15px;
   max-height: 250px;
   overflow-y: scroll;
   display: flex;
@@ -30,7 +30,7 @@
 }
 
 .chaptersChevron.open {
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 
 .chapter {
@@ -76,7 +76,8 @@
 .chapterTimestamp {
   grid-area: timestamp;
   align-self: flex-start;
-  padding: 3px 4px;
+  padding-block: 3px;
+  padding-inline: 4px;
   border-radius: 5px;
   background-color: var(--accent-color);
   color: var(--text-with-accent-color);
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 d821bd7cd2ba8..c75111c7b2211 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -1,5 +1,6 @@
 .card {
-  padding: 0 16px;
+  padding-block: 0;
+  padding-inline: 16px;
 }
 
 .getCommentsTitle,
@@ -9,8 +10,7 @@
 }
 
 .getCommentsTitle {
-  padding-bottom: 8px;
-  padding-top: 8px;
+  padding-block: 8px;
   text-align: center;
   text-decoration: underline;
   cursor: pointer;
@@ -18,19 +18,16 @@
 }
 
 .noCommentMsg {
-  padding-top: 1em;
-  padding-bottom: 1em;
-
+  padding-block: 1em;
   text-align: center;
 }
 
 .commentsTitle {
-  padding-bottom: 1em;
-  padding-top: 1em;
+  padding-block: 1em;
 }
 
 .commentSort {
-  float: right;
+  float: var(--float-right-ltr-rtl-value);
 }
 
 .comment {
@@ -46,7 +43,7 @@
 }
 
 .commentThumbnail {
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   width: 60px;
   height: 60px;
   border-radius: 200px;
@@ -54,7 +51,7 @@
 }
 
 .commentThumbnailHidden {
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -72,28 +69,29 @@
 .commentAuthorWrapper {
   font-weight: bold;
   font-size: 14px;
-  margin-left: 68px;
-  margin-top: 0px;
+  margin-inline-start: 68px;
+  margin-block-start: 0px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.commentAuthor {
-  color: inherit;
-  text-decoration: none;
-}
-
 .commentOwner {
   background-color: var(--secondary-card-bg-color);
   border-radius: 10px;
-  padding: 0 10px;
+  padding-inline: 10px;
+}
+
+
+.commentAuthor {
+  color: inherit;
+  text-decoration: none;
 }
 
 .commentText {
   white-space: pre-wrap;
   font-size: 14px;
-  margin-top: -10px;
-  margin-left: 70px;
+  margin-block-start: -10px;
+  margin-inline-start: 70px;
   word-wrap: break-word;
 }
 .commentPinned {
@@ -101,26 +99,26 @@
   font-size: 12px;
   margin-block-end: 0;
   margin-block-start: 0;
-  margin-left: 68px;
-  margin-bottom: 5px;
+  margin-inline-start: 68px;
+  margin-block-end: 5px;
 }
 
 .commentDate {
   font-weight: normal;
-  margin-left: 5px;
+  margin-inline-start: 5px;
   font-size: 12px;
 }
 
 .commentMemberIcon {
-  margin-left: 5px;
+  margin-inline-start: 5px;
   width: 14px;
   height: 14px;
 }
 
 .commentLikeCount {
   font-size: 11px;
-  margin-left: 70px;
-  margin-top: 0px;
+  margin-inline-start: 70px;
+  margin-block-start: 0px;
 }
 
 .commentHeartBadge {
@@ -128,13 +126,13 @@
   position: relative;
   width: 25px;
   height: 20px;
-  margin-left: 10px;
-  margin-bottom: -7px;
+  margin-inline-start: 10px;
+  margin-block-end: -7px;
 }
 
 .commentHeartBadgeImg {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   width: 15px;
   height: 15px;
   border-radius: 50%;
@@ -143,8 +141,8 @@
 
 .commentHeartBadgeWhite {
   position: absolute;
-  left: 9px;
-  bottom: 1px;
+  inset-inline-start: 9px;
+  inset-block-end: 1px;
   width: 11px;
   height: 11px;
   z-index: 1;
@@ -153,8 +151,8 @@
 .commentHeartBadgeRed {
   position: absolute;
   color: var(--red-500);
-  left: 10px;
-  bottom: 2px;
+  inset-inline-start: 10px;
+  inset-block-end: 2px;
   width: 9px;
   height: 9px;
   z-index: 2;
@@ -162,25 +160,25 @@
 
 .commentMoreReplies {
   font-size: 11px;
-  margin-left: 5px;
+  margin-inline-start: 5px;
   text-decoration: underline;
   cursor: pointer;
   color: var(--title-color);
 }
 
 .commentReplies {
-  margin-left: 30px;
+  margin-inline-start: 30px;
 }
 
 .showMoreReplies {
-  margin-left: 30px;
+  margin-inline-start: 30px;
   font-size: 15px;
   cursor: pointer;
   text-decoration: underline;
 }
 
 .getMoreComments {
-  padding-bottom: 1em;
+  padding-block-end: 1em;
 
   text-align: center;
   text-decoration: underline;
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 5dd5784c4058e..fa086d1083421 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -13,10 +13,9 @@
   display: block;
   font-size: 22px;
   font-weight: normal;
-  margin: 0 0 24px;
+  margin-block: 0 24px;
+  margin-inline: 0;
   margin-block-end: 1em;
-  margin-inline-end: 0;
-  margin-inline-start: 0;
   word-break: break-word;
 }
 
@@ -28,7 +27,7 @@
   .channelThumbnail {
     border-radius: 50%;
     cursor: pointer;
-    margin-right: 10px;
+    margin-inline-end: 10px;
     width: 56px;
   }
 
@@ -36,16 +35,16 @@
     color: inherit;
     cursor: pointer;
     display: block;
-    margin-left: 6px;
+    margin-inline-start: 6px;
     position: relative;
     text-decoration: inherit;
-    top: -2px;
+    inset-block-start: -2px;
   }
 
   .subscribeButton {
     font-size: 14px;
-    margin-left: 6px;
-    margin-top: 6px;
+    margin-inline-start: 6px;
+    margin-block-start: 6px;
     padding: 6px;
   }
 }
@@ -54,22 +53,23 @@
 .datePublished {
   color: var(--secondary-text-color);
   font-size: 15px;
-  text-align: right;
+  text-align: end;
 
   @media screen and (max-width: 680px) {
-    text-align: left;
+    text-align: start;
   }
 }
 
 .viewCount {
-  margin: 18px 0 0;
+  margin-block: 18px 0;
+  margin-inline: 0;
 }
 
 .datePublished {
   margin: 4px 0 0;
 
   @media screen and (max-width: 680px) {
-    margin-top: 16px;
+    margin-block-start: 16px;
   }
 }
 
@@ -78,42 +78,42 @@
   display: flex;
   flex-direction: column;
   font-size: 16px;
-  margin-left: auto;
-  margin-top: 4px;
+  margin-inline-start: auto;
+  margin-block-start: 4px;
   max-width: 210px;
-  text-align: right;
+  text-align: end;
 
   @media screen and (max-width: 680px) {
-    margin-left: 0;
-    text-align: left;
+    margin-inline-start: 0;
+    text-align: start;
   }
 
   .likeBar {
     border-radius: 4px;
     height: 8px;
-    margin-bottom: 4px;
+    margin-block-end: 4px;
   }
 
   .likeCount {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }
 
 .videoOptions {
   display: flex;
   justify-content: flex-end;
-  margin-top: 16px;
+  margin-block-start: 16px;
 
   .option:not(:first-child) {
-    margin-left: 4px;
+    margin-inline-start: 4px;
   }
 
   @media screen and (max-width: 680px) {
     justify-content: flex-start;
 
     :deep(.iconDropdown) {
-      left: calc(50% - 20px);
-      right: auto;
+      inset-inline-start: calc(50% - 20px);
+      inset-inline-end: auto;
     }
   }
 }
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 d73623b60c09a..0a9e1a956592c 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
@@ -31,7 +31,8 @@
 
 :deep(.liveChatEmoji) {
   vertical-align: middle;
-  margin: 0 2px;
+  margin-block: 0;
+  margin-inline: 2px;
 }
 
 .errorIcon {
@@ -57,9 +58,9 @@
 .superChat {
   display: inline-block;
   padding: 1px;
-  padding-right: 10px;
-  margin-left: 2px;
-  margin-right: 2px;
+  padding-inline-end: 10px;
+  margin-inline-start: 2px;
+  margin-inline-end: 2px;
   height: 30px;
   cursor: pointer;
   background-color: var(--primary-color);
@@ -68,14 +69,14 @@
 }
 
 .superChatContent {
-  margin-left: 32px;
-  margin-top: -25px;
+  margin-inline-start: 32px;
+  margin-block-start: -25px;
   color: var(--text-with-main-color);
 }
 
 .superChat .channelThumbnail {
-  margin-top: 3px;
-  margin-left: 3px;
+  margin-block-start: 3px;
+  margin-inline-start: 3px;
   height: 25px;
 }
 
@@ -88,9 +89,9 @@
   width: 100%;
   height: 415px;
   position: absolute;
-  margin-left: -16px;
-  padding-right: 32px;
-  bottom: -15px;
+  margin-inline-start: -16px;
+  padding-inline-end: 32px;
+  inset-block-end: -15px;
   cursor: auto;
   z-index: 1;
 }
@@ -109,8 +110,7 @@
 
 .comment {
   width: 100%;
-  padding-top: 5px;
-  padding-bottom: 7px;
+  padding-block: 5px 7px;
   display: grid;
   grid-template-columns: min-content auto;
   gap: 5px;
@@ -119,10 +119,10 @@
 .superChatMessage {
   width: 90%;
   grid-template-columns: auto;
-  margin-left: 5%;
-  margin-right: 5%;
-  margin-top: 25px;
-  margin-bottom: 10px;
+  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;
@@ -130,7 +130,7 @@
 }
 
 .upperSuperChatMessage {
-  margin-top: -15px;
+  margin-block-start: -15px;
   width: 100%;
   height: 55px;
   background-color: var(--primary-color-hover);
@@ -140,29 +140,29 @@
 
 .upperSuperChatMessage .channelThumbnail {
   width: 45px;
-  margin-left: 10px;
-  margin-top: 5px;
+  margin-inline-start: 10px;
+  margin-block-start: 5px;
 }
 
 .upperSuperChatMessage .channelName {
   color: var(--text-with-main-color);
   opacity: 0.7;
   position: absolute;
-  top: -20px;
-  margin-left: 65px;
+  inset-block-start: -20px;
+  margin-inline-start: 65px;
 }
 
 .upperSuperChatMessage .donationAmount {
   color: var(--text-with-main-color);
   font-weight: bold;
-  margin-left: 65px;
+  margin-inline-start: 65px;
   position: absolute;
-  top: 0px;
+  inset-block-start: 0px;
 }
 
 .superChatMessage .chatMessage {
   color: var(--text-with-main-color);
-  margin-left: 20px;
+  margin-inline-start: 20px;
 }
 
 .liveChatComments {
@@ -177,8 +177,8 @@
 }
 
 .chatContent {
-  margin-top: 5px;
-  margin-bottom: 2px;
+  margin-block-start: 5px;
+  margin-block-end: 2px;
   font-size: 12px;
   word-wrap: break-word;
 }
@@ -186,7 +186,7 @@
 .channelName {
   color: var(--tertiary-text-color);
   font-weight: bold;
-  padding-right: 5px;
+  padding-inline-end: 5px;
 }
 
 .member {
@@ -198,7 +198,7 @@
 }
 
 .owner {
-  margin-right: 2px;
+  margin-inline-end: 2px;
   background-color: var(--primary-color);
   color: var(--text-with-main-color);
 }
@@ -212,8 +212,8 @@
   width: 35px;
   height: 35px;
   position: absolute;
-  left: 45%;
-  bottom: 20px;
+  inset-inline-start: 45%;
+  inset-block-end: 20px;
   cursor: pointer;
   border-radius: 200px;
   -webkit-border-radius: 200px;
@@ -231,5 +231,5 @@
   color: var(--text-with-accent-color);
   font-size: 22px;
   position: relative;
-  top: 0.45rem;
+  inset-block-start: 0.45rem;
 }
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 fecaeee10c98b..ab8e2f6340c46 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -6,17 +6,17 @@
 .channelName {
   font-size: 15px;
   position: relative;
-  bottom: 15px;
+  inset-block-end: 15px;
 }
 
 .playlistIndex {
   position: relative;
-  bottom: 15px;
+  inset-block-end: 15px;
   color: var(--tertiary-text-color);
 }
 
 .playlistProgressBar {
-  margin-left: 10px;
+  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;
@@ -38,7 +38,7 @@
 .playlistIcon {
   font-size: 20px;
   padding: 10px;
-  margin-top: -25px;
+  margin-block-start: -25px;
   cursor: pointer;
   border-radius: 50%;
   color: var(--tertiary-text-color);
@@ -68,7 +68,7 @@
 }
 
 .playlistItem:not(:last-child) {
-  margin-bottom: 8px;
+  margin-block-end: 8px;
 }
 
 .playlistItem:hover {
@@ -91,7 +91,7 @@
 }
 
 .videoInfo {
-  margin-left: 30px;
+  margin-inline-start: 30px;
   position: relative;
-  bottom: 7px;
+  inset-block-end: 7px;
 }
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index f1a4fbb106bf7..e03c2b2a0fcf3 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -109,7 +109,7 @@ $watched-transition-duration: 0.5s;
       align-self: flex-start;
       background-color: var(--bg-color);
       color: var(--primary-text-color);
-      justify-self: left;
+      justify-self: start;
       opacity: $thumbnail-overlay-opacity;
       padding: 2px;
       pointer-events: none;
@@ -121,11 +121,13 @@ $watched-transition-duration: 0.5s;
       border-radius: 5px;
       color: var(--primary-text-color);
       font-size: 15px;
-      justify-self: right;
+      justify-self: end;
       line-height: 1.2;
-      margin: 0 4px 4px 0;
+      margin-block: 0 4px;
+      margin-inline: 0 4px;
       opacity: $thumbnail-overlay-opacity;
-      padding: 3px 4px;
+      padding-block: 3px;
+      padding-inline: 4px;
       pointer-events: none;
 
       @include is-watch-playlist-item {
@@ -141,16 +143,16 @@ $watched-transition-duration: 0.5s;
     .externalPlayerIcon {
       align-self: flex-end;
       font-size: 17px;
-      justify-self: left;
-      margin-bottom: 4px;
-      margin-left: 4px;
+      justify-self: start;
+      margin-block-end: 4px;
+      margin-inline-start: 4px;
     }
 
     .favoritesIcon {
       font-size: 17px;
-      justify-self: right;
-      margin-right: 3px;
-      margin-top: 3px;
+      justify-self: end;
+      margin-inline-end: 3px;
+      margin-block-start: 3px;
       height: fit-content;
     }
 
@@ -166,7 +168,7 @@ $watched-transition-duration: 0.5s;
       align-self: stretch;
       display: grid;
       font-size: 20px;
-      justify-self: right;
+      justify-self: end;
       width: 60px;
 
       .background {
@@ -229,8 +231,9 @@ $watched-transition-duration: 0.5s;
     .infoLine {
       font-size: 14px;
       grid-area: infoLine;
-      margin-top: 5px;
+      margin-block-start: 5px;
       overflow-wrap: anywhere;
+      text-align: start;
 
       @include is-sidebar-item {
         font-size: 12px;
@@ -261,13 +264,13 @@ $watched-transition-duration: 0.5s;
 
     @include is-sidebar-item {
       .videoThumbnail {
-        margin-right: 10px;
+        margin-inline-end: 10px;
       }
     }
 
     .videoThumbnail,
     .channelThumbnail {
-      margin-right: 20px;
+      margin-inline-end: 20px;
     }
 
     .channelThumbnail {
@@ -279,11 +282,11 @@ $watched-transition-duration: 0.5s;
     display: flex;
     flex-direction: column;
     min-height: 230px;
-    padding-bottom: 20px;
+    padding-block-end: 20px;
 
     .videoThumbnail,
     .channelThumbnail {
-      margin-bottom: 12px;
+      margin-block-end: 12px;
 
       .thumbnailImage {
         width: 100%;
@@ -296,7 +299,7 @@ $watched-transition-duration: 0.5s;
 
     .infoLine {
       font-size: 13px;
-      margin-top: 8px;
+      margin-block-start: 8px;
     }
   }
 
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 038ec5dc03e54..a59f26f6d9de7 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -1003,6 +1003,32 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-opacity4: rgba(180,190,254,0.24);
 }
 
+body[dir='ltr'] {
+  --ltr-or-rtl: ltr;
+  --float-left-ltr-rtl-value: left;
+  --float-right-ltr-rtl-value: right;
+  --horizontal-directionality-coefficient: 1;
+}
+
+body[dir='rtl'] {
+  --ltr-or-rtl: rtl;
+  --float-left-ltr-rtl-value: right;
+  --float-right-ltr-rtl-value: left;
+  --horizontal-directionality-coefficient: -1;
+}
+
+body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"]):not([data-icon="circle-question"]) {
+  transform: scale(-1,1);
+}
+
+/* Arabic, Kurdish, Persian and Urdu have a reversed question mark, but not Hebrew and Yiddish */
+html[lang='ar'] [data-prefix="fas"][data-icon="circle-question"],
+html[lang='fa'] [data-prefix="fas"][data-icon="circle-question"],
+html[lang='ku'] [data-prefix="fas"][data-icon="circle-question"],
+html[lang='ur'] [data-prefix="fas"][data-icon="circle-question"] {
+  transform: scale(-1, 1)
+}
+
 body {
   margin: 0;
   min-height: 100vh;
@@ -1020,10 +1046,6 @@ body {
   outline: none;
 }
 
-.rightAligned {
-  text-align: right;
-}
-
 a:link {
     color: var(--link-color);
 }
diff --git a/src/renderer/views/About/About.scss b/src/renderer/views/About/About.scss
index 5d683607044e9..a03e061095f0e 100644
--- a/src/renderer/views/About/About.scss
+++ b/src/renderer/views/About/About.scss
@@ -1,6 +1,6 @@
 .card {
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
   width: 85%;
 
   @media only screen and (max-width: 680px) {
@@ -18,6 +18,7 @@
 }
 
 .version {
+  text-align: center;
   font-size: 2em;
 }
 
@@ -25,7 +26,8 @@
   display: grid;
   grid-gap: 16px;
   grid-template-columns: 1fr 1fr;
-  margin: 80px auto;
+  margin-block: 80;
+  margin-inline: auto;
   max-width: 860px;
 
   @media only screen and (max-width: 650px) {
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 190fd2e8ad7e8..77d807acd49aa 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -1,7 +1,8 @@
 .card {
   position: relative;
   width: 85%;
-  margin: 0 auto 20px;
+  margin-block: 0 20px;
+  margin-inline: auto;
   box-sizing: border-box;
 }
 
@@ -28,8 +29,9 @@
 .channelInfoContainer {
   position: relative;
   background-color: var(--card-bg-color);
-  margin-top: 10px;
-  padding: 0 16px;
+  margin-block-start: 10px;
+  padding-block: 0;
+  padding-inline: 16px;
 }
 
 .channelInfo {
@@ -40,7 +42,7 @@
 }
 
 .channelInfoHasError {
-  padding-bottom: 10px;
+  padding-block-end: 10px;
 }
 
 .channelThumbnail {
@@ -59,8 +61,8 @@
 
 .channelSubCount {
   color: var(--tertiary-text-color);
-  top: 50px;
-  left: 120px;
+  inset-block-start: 50px;
+  inset-inline-start: 120px;
 }
 
 .channelInfoActionsContainer {
@@ -75,13 +77,13 @@
 
 .channelSearch {
   width: 220px;
-  margin-left: auto;
+  margin-inline-start: auto;
   align-self: flex-end;
   flex: 1 1 0%;
 }
 
 .sortSelect {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .channelInfoTabs {
@@ -90,7 +92,8 @@
   height: auto;
   justify-content: unset;
   gap: 32px;
-  padding: .3em 0;
+  padding-block: .3em;
+  padding-inline: 0;
 }
 
 .tabs {
@@ -106,29 +109,29 @@
   align-self: flex-end;
   text-align: center;
   color: var(--tertiary-text-color);
-  border-bottom: 3px solid transparent;
+  border-block-end: 3px solid transparent;
 }
 
 .tab:hover,
 .tab:focus {
   font-weight: bold;
-  border-bottom: 3px solid var(--tertiary-text-color);
+  border-block-end: 3px solid var(--tertiary-text-color);
 }
 
 .selectedTab {
   color: var(--primary-text-color);
-  border-bottom: 3px solid var(--primary-color);
+  border-block-end: 3px solid var(--primary-color);
   font-weight: bold;
   box-sizing: border-box;
 }
 
 .channelSearch {
-  margin-top: 10px;
+  margin-block-start: 10px;
   max-width: 250px;
 }
 
 .elementListLoading {
-  margin-top: 200px;
+  margin-block-start: 200px;
 }
 
 .message {
@@ -142,7 +145,7 @@
   line-height: 45px;
   text-align: center;
   cursor: pointer;
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 
 .thumbnailContainer {
@@ -153,7 +156,7 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
-  padding-left: 1em;
+  padding-inline-start: 1em;
 }
 
 .channelLineContainer h1,
@@ -171,13 +174,13 @@
 
 .ft-community-image {
   display: block;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
 }
 
 .community-post-container {
-  padding-left: 30%;
-  padding-right: 30%;
+  padding-inline-start: 30%;
+  padding-inline-end: 30%;
 }
 
 @media only screen and (max-width: 800px) {
@@ -195,6 +198,6 @@
     overflow-x: scroll;
   }
   #communityPanel {
-    margin-top: 1rem;
+    margin-block-start: 1rem;
   }
 }
diff --git a/src/renderer/views/Hashtag/Hashtag.css b/src/renderer/views/Hashtag/Hashtag.css
index d511fd4473953..33f866ba4d97c 100644
--- a/src/renderer/views/Hashtag/Hashtag.css
+++ b/src/renderer/views/Hashtag/Hashtag.css
@@ -5,7 +5,7 @@
   line-height: 45px;
   text-align: center;
   cursor: pointer;
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 
 .getNextPage:hover, .getNextPage:focus {
@@ -14,7 +14,8 @@
 }
 
 .card {
-  margin: 0 auto 20px;
+  margin-block: 0 20px;
+  margin-inline: auto;
   width: 85%;
 }
 
diff --git a/src/renderer/views/History/History.css b/src/renderer/views/History/History.css
index b6db9095ce937..924a994f96e38 100644
--- a/src/renderer/views/History/History.css
+++ b/src/renderer/views/History/History.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
diff --git a/src/renderer/views/Playlist/Playlist.css b/src/renderer/views/Playlist/Playlist.css
index f762bfc71f93d..59550e3a65ca8 100644
--- a/src/renderer/views/Playlist/Playlist.css
+++ b/src/renderer/views/Playlist/Playlist.css
@@ -6,11 +6,11 @@
   background-color: var(--card-bg-color);
   box-sizing: border-box;
   height: calc(100vh - 132px);
-  margin-right: 1em;
+  margin-inline-end: 1em;
   overflow-y: auto;
   padding: 10px;
   position: sticky;
-  top: 96px;
+  inset-block-start: 96px;
   width: 30%;
 }
 
@@ -40,8 +40,8 @@
 }
 
 :deep(.videoThumbnail) {
-  margin-top: auto;
-  margin-bottom: auto;
+  margin-block-start: auto;
+  margin-block-end: auto;
 }
 
 :deep(.thumbnailImage) {
@@ -56,7 +56,7 @@
   .playlistInfo {
     box-sizing: border-box;
     position: relative;
-    top: 0;
+    inset-block-start: 0;
     height: auto;
     width: 100%;
   }
diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css
index a08e05caeaca8..ac963d12e854d 100644
--- a/src/renderer/views/Popular/Popular.css
+++ b/src/renderer/views/Popular/Popular.css
@@ -1,13 +1,13 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .floatingTopButton {
   position: fixed;
-  top: 70px;
-  right: 10px;
+  inset-block-start: 70px;
+  inset-inline-end: 10px;
 }
 
 @media only screen and (max-width: 350px) {
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.css b/src/renderer/views/ProfileSettings/ProfileSettings.css
index 670ae2a98f8da..ae0b80968567b 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.css
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
@@ -10,8 +10,8 @@
 
 .profileList {
   max-width: 1000px;
-  margin: 0 auto;
-  margin-bottom: 10px;
+  margin-block: 0 10px;
+  margin-inline: auto;
 }
 
 @media only screen and (max-width: 680px) {
diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css
index 9224332692460..a862a4bbc6528 100644
--- a/src/renderer/views/Search/Search.css
+++ b/src/renderer/views/Search/Search.css
@@ -5,7 +5,7 @@
   line-height: 45px;
   text-align: center;
   cursor: pointer;
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 
 .getNextPage:hover, .getNextPage:focus {
@@ -15,8 +15,8 @@
 
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 @media only screen and (max-width: 680px) {
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index c308b9a836525..ef60230187c1c 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -1,7 +1,8 @@
 hr {
   height: 2px;
   width: 85%;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   border: 0;
   background-color: var(--scrollbar-color-hover);
 }
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
index 78781b0371bed..aefeadce2bf30 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
@@ -9,7 +9,7 @@
 }
 
 .count {
-  margin-top: 1rem;
+  margin-block-start: 1rem;
 }
 
 .channels {
@@ -17,7 +17,7 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr) );
   gap: 2.5rem;
-  margin-top: 2rem;
+  margin-block-start: 2rem;
 }
 
 .channel {
@@ -52,7 +52,8 @@
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
-  padding: 0 4px;
+  padding-block: 0;
+  padding-inline: 4px;
 }
 
 .unsubscribeContainer {
diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css
index 3e37187ae8802..21a6d79aea7ea 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.css
+++ b/src/renderer/views/Subscriptions/Subscriptions.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
@@ -10,17 +10,17 @@
 
 .subscriptionTabs {
   width: 100%;
-  margin-top: -3px;
+  margin-block-start: -3px;
   color: var(--tertiary-text-color);
-  margin-bottom: 10px;
+  margin-block-end: 10px;
 }
 
 .selectedTab {
-  border-bottom: 3px solid var(--primary-color);
+  border-block-end: 3px solid var(--primary-color);
   color: var(--primary-text-color);
   font-weight: bold;
   box-sizing: border-box;
-  margin-bottom: -3px;
+  margin-block-end: -3px;
 }
 
 .tab {
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
index 3f5bf94dc39cb..51640fed1f5f4 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@@ -1,30 +1,30 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .floatingTopButton {
   position: fixed;
-  top: 70px;
-  right: 10px;
+  inset-block-start: 70px;
+  inset-inline-end: 10px;
 }
 
 .trendingInfoTabs {
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
-  margin-top: -3px;
+  margin-block-start: -3px;
   color: var(--tertiary-text-color);
-  margin-bottom: 10px;
+  margin-block-end: 10px;
 }
 
 .selectedTab {
-  border-bottom: 3px solid var(--primary-color);
+  border-block-end: 3px solid var(--primary-color);
   color: var(--primary-text-color);
   font-weight: bold;
   box-sizing: border-box;
-  margin-bottom: -3px;
+  margin-block-end: -3px;
 }
 
 .tab {
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.css b/src/renderer/views/UserPlaylists/UserPlaylists.css
index b6db9095ce937..924a994f96e38 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.css
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index 180f443d7f292..e2a62f5b75304 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -46,7 +46,8 @@
     grid-area: video;
 
     .videoAreaMargin {
-      margin: 0 0 16px;
+      margin-block: 0 16px;
+      margin-inline: 0;
     }
 
     .videoPlayer {
@@ -63,22 +64,25 @@
         align-items: center;
         background-color: rgb(0 0 0 / 80%);
         border-radius: 5px;
-        bottom: 12px;
+        inset-block-end: 12px;
         color: #fff;
         display: flex;
         height: 60px;
-        left: 12px;
-        padding: 0 12px;
+        inset-inline-start: 12px;
+        padding-block: 0;
+        padding-inline: 12px;
         position: absolute;
 
         .premiereIcon {
-          float: left;
+          float: var(--float-left-ltr-rtl-value);
           font-size: 25px;
-          margin: 0 12px;
+          margin-block: 0;
+          margin-inline: 12px;
         }
 
         .premiereText {
-          margin: 0 12px;
+          margin-block: 0;
+          margin-inline: 12px;
           min-width: 200px;
 
           .premiereTextTimestamp {
@@ -92,7 +96,8 @@
 
   .watchVideo {
     grid-column: 1;
-    margin: 0 0 16px;
+    margin-block: 0 16px;
+    margin-inline: 0;
   }
 
   .infoArea {
@@ -115,7 +120,8 @@
   .watchVideoPlaylist,
   .watchVideoSidebar,
   .theatrePlaylist {
-    margin: 0 8px 16px;
+    margin-block: 0 16px;
+    margin-inline: 8px;
   }
 
   .watchVideoSidebar,
@@ -125,8 +131,8 @@
 
   .watchVideoPlaylist {
     :deep(.videoThumbnail) {
-      margin-top: auto;
-      margin-bottom: auto;
+      margin-block-start: auto;
+      margin-block-end: auto;
     }
     @media (max-width: 768px) {
       height: auto;
@@ -135,10 +141,12 @@
 
   .watchVideoRecommendations,
   .theatreRecommendations {
-    margin: 0 0 16px;
+    margin-block: 0 16px;
+    margin-inline: 0;
 
     @media only screen and (min-width: 901px) {
-      margin: 0 8px 16px;
+      margin-block: 0 16px;
+      margin-inline: 8px;
     }
   }
 
@@ -158,12 +166,12 @@
 
   @media only screen and (min-width: 901px) {
     .infoArea {
-      scroll-margin-top: 76px;
+      scroll-margin-block-start: 76px;
     }
 
     .infoAreaSticky {
       position: sticky;
-      top: 76px;
+      inset-block-start: 76px;
     }
   }
 }