diff --git a/assets/dev/css/ea11y-scanner-admin.scss b/assets/dev/css/ea11y-scanner-admin.scss
index 27004ce9..f4cff14f 100644
--- a/assets/dev/css/ea11y-scanner-admin.scss
+++ b/assets/dev/css/ea11y-scanner-admin.scss
@@ -134,7 +134,7 @@
   &-n::after {
     right: 50%;
     bottom: 100%;
-    margin-bottom: 5px;
+    margin-block-end: 5px;
     transform: translateX(50%);
   }
 
@@ -142,8 +142,8 @@
     top: -5px;
     right: 50%;
     bottom: auto;
-    margin-right: -5px;
-    border-top-color: rgb(0 0 0 / 0.8);
+    margin-inline-end: -5px;
+    border-block-start-color: rgb(0 0 0 / 0.8);
   }
 
   &-hidden::before,
diff --git a/assets/dev/css/skip-link.scss b/assets/dev/css/skip-link.scss
index bedb5e71..d032906c 100644
--- a/assets/dev/css/skip-link.scss
+++ b/assets/dev/css/skip-link.scss
@@ -23,8 +23,8 @@
   clip: auto !important;
   clip-path: none;
   pointer-events: auto;
-  top: 30px;
-  left: 30px;
+  inset-block-start: 30px;
+  inset-inline-start: 30px;
   z-index: 100000;
   height: auto;
   width: auto;
@@ -33,10 +33,7 @@
 
 .ea11y-skip-to-content-link:focus + .ea11y-skip-to-content-backdrop {
   position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 9999;
   background-color: rgb(0 0 0 / 0.5);
 }
diff --git a/modules/deactivation/assets/css/style.css b/modules/deactivation/assets/css/style.css
index c5e649ce..b73947bf 100644
--- a/modules/deactivation/assets/css/style.css
+++ b/modules/deactivation/assets/css/style.css
@@ -3,6 +3,7 @@
 }
 
 .ea11y-deactivation-content {
+    text-align: start;
     padding: 20px;
 }
 
@@ -28,6 +29,11 @@
     padding: 5px;
     display: flex;
     flex-direction: row;
+    text-align: start;
+}
+
+.ea11y-feedback-thickbox #TB_closeWindowButton {
+    inset-inline: auto 5px;
 }
 
 .ea11y-feedback-thickbox #TB_closeWindowButton .tb-close-icon {
@@ -37,10 +43,13 @@
 .ea11y-feedback-thickbox #TB_ajaxWindowTitle {
     font-size: 14px;
     letter-spacing: 1px;
+    padding: 0;
+    padding-inline-start: 10px;
+    float: unset;
 }
 
 .ea11y-deactivation-content h3 {
-    margin-top: 0;
+    margin-block-start: 0;
     color: #23282d;
     font-size: 18px;
     font-weight: 600;
@@ -48,15 +57,15 @@
 
 .ea11y-deactivation-content p {
     color: #666;
-    margin-bottom: 20px;
+    margin-block-end: 20px;
 }
 
 .ea11y-feedback-options {
-    margin-bottom: 20px;
+    margin-block-end: 20px;
 }
 
 .ea11y-feedback-option {
-    margin-bottom: 15px;
+    margin-block-end: 15px;
 }
 
 .ea11y-feedback-option > label {
@@ -64,23 +73,23 @@
     align-items: center;
     cursor: pointer;
     color: #23282d;
-    margin-bottom: 8px;
+    margin-block-end: 8px;
 }
 
 .ea11y-feedback-option input[type="radio"] {
-    margin-right: 8px;
+    margin-inline-end: 8px;
 }
 
 .ea11y-feedback-text-field {
-    margin-left: 24px;
-    margin-top: 8px;
+    margin-inline-start: 24px;
+    margin-block-start: 8px;
 }
 
 .ea11y-feedback-text-field label {
     display: block;
     font-size: 12px;
     color: #666;
-    margin-bottom: 4px;
+    margin-block-end: 4px;
 }
 
 .ea11y-feedback-text-field input,
@@ -105,8 +114,8 @@
     flex-direction: row-reverse;
     justify-content: space-between;
     gap: 10px;
-    border-top: 1px solid #e1e1e1;
-    padding-top: 20px;
+    border-block-start: 1px solid #e1e1e1;
+    padding-block-start: 20px;
 }
 
 .ea11y-btn {
diff --git a/modules/deactivation/assets/js/deactivation-feedback.js b/modules/deactivation/assets/js/deactivation-feedback.js
index 3986bdc9..b7155fe5 100644
--- a/modules/deactivation/assets/js/deactivation-feedback.js
+++ b/modules/deactivation/assets/js/deactivation-feedback.js
@@ -1,3 +1,4 @@
+import { __ } from '@wordpress/i18n';
 import '../css/style.css';
 
 const REASON_FIELDS = {
@@ -84,8 +85,8 @@ class Ea11yDeactivationHandler {
 		this.deactivationLink.addEventListener('click', (e) => {
 			e.preventDefault();
 			this.modal(
-				'QUICK FEEDBACK',
-				'#TB_inline?width=550&height=auto&inlineId=ea11y-deactivation-modal',
+				__('Quick feedback', 'pojo-accessibility'),
+				'#TB_inline?width=600&height=auto&inlineId=ea11y-deactivation-modal',
 				'ea11y-feedback-thickbox',
 			);
 		});
diff --git a/modules/legacy/assets/css/style.css b/modules/legacy/assets/css/style.css
index aea13d87..898d006b 100644
--- a/modules/legacy/assets/css/style.css
+++ b/modules/legacy/assets/css/style.css
@@ -70,7 +70,7 @@
   padding: 10px 0;
 }
 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items.pojo-a11y-links {
-  border-top: 1px solid;
+  border-block-start: 1px solid;
 }
 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a {
   display: block;
@@ -82,7 +82,7 @@
   font-weight: bold;
 }
 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a svg {
-  padding-right: 6px;
+  padding-inline-end: 6px;
   display: inline-block;
   width: 1.5em;
   font-style: normal;
@@ -96,10 +96,6 @@
 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a .pojo-a11y-toolbar-text {
   vertical-align: middle;
 }
-body.rtl #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a svg {
-  padding-left: 6px;
-  padding-right: 0;
-}
 @media (max-width: 767px) {
   #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay p.pojo-a11y-toolbar-title {
     padding: 7px 12px 0;
@@ -593,7 +589,7 @@ body.pojo-a11y-high-contrast u span {
   color: #FFFF80 !important;
 }
 body.pojo-a11y-high-contrast dt {
-  border-top: thin solid grey !important;
+  border-block-start: thin solid grey !important;
 }
 body.pojo-a11y-high-contrast h1,
 body.pojo-a11y-high-contrast h1 a,
@@ -639,7 +635,7 @@ body.pojo-a11y-high-contrast img {
 }
 body.pojo-a11y-high-contrast abbr,
 body.pojo-a11y-high-contrast acronym {
-  border-bottom: 1px dotted !important;
+  border-block-end: 1px dotted !important;
 }
 body.pojo-a11y-high-contrast :focus {
   outline: thin dotted !important;
@@ -1428,11 +1424,11 @@ body.pojo-a11y-readable-font *:not(i):not(span) {
 }
 .pojo-skip-link {
   position: absolute;
-  top: -1000em;
+  inset-block-start: -1000em;
 }
 .pojo-skip-link:focus {
-  left: 50px;
-  top: 50px;
+  inset-inline-start: 50px;
+  inset-block-start: 50px;
   height: auto;
   width: 200px;
   display: block;
@@ -1447,10 +1443,6 @@ body.pojo-a11y-readable-font *:not(i):not(span) {
   text-decoration: none;
   box-shadow: 0 0 2px 2px rgb(0 0 0 / 0.6);
 }
-body.rtl .pojo-skip-link:focus {
-  right: 50px;
-  left: auto;
-}
 #pojo-a11y-toolbar *,
 #pojo-a11y-toolbar ::before,
 #pojo-a11y-toolbar ::after {
diff --git a/modules/legacy/assets/less/_high-contrast.less b/modules/legacy/assets/less/_high-contrast.less
index 776992a5..2b4fb9f9 100644
--- a/modules/legacy/assets/less/_high-contrast.less
+++ b/modules/legacy/assets/less/_high-contrast.less
@@ -73,7 +73,7 @@ h4 i, h5 em, h5 i, h6 em, h6 i, i, i span, u, u span {
 	color: #FFFF80 !important;
 }
 dt {
-	border-top: thin solid grey !important;
+	border-block-start: thin solid grey !important;
 }
 h1, h1 a, h1 a b, h1 abbr, h1 center, h1 span, h2, h2 a,
 h2 a b, h2 abbr, h2 center, h2 span, h3, h3 a, h3 a b,
@@ -88,7 +88,7 @@ img {
 	background-color: #808080 !important;
 }
 abbr, acronym {
-	border-bottom: 1px dotted !important;
+	border-block-end: 1px dotted !important;
 }
 :focus {
 	outline: thin dotted !important;
diff --git a/modules/legacy/assets/less/_toolbar.less b/modules/legacy/assets/less/_toolbar.less
index f72ec709..e74c6005 100644
--- a/modules/legacy/assets/less/_toolbar.less
+++ b/modules/legacy/assets/less/_toolbar.less
@@ -85,7 +85,7 @@
 			padding: 10px 0;
 
 			&.pojo-a11y-links {
-				border-top: 1px solid;
+				border-block-start: 1px solid;
 			}
 
 			li.pojo-a11y-toolbar-item {
@@ -101,7 +101,7 @@
 					}
 
 					svg {
-						padding-right: 6px;
+						padding-inline-end: 6px;
                         display: inline-block;
                         width: 1.5em;
                         font-style: normal;
@@ -122,29 +122,6 @@
 	}
 }
 
-body.rtl {
-
-	#pojo-a11y-toolbar {
-
-		.pojo-a11y-toolbar-overlay {
-
-			ul.pojo-a11y-toolbar-items {
-
-				li.pojo-a11y-toolbar-item {
-
-					a {
-
-						svg {
-							padding-left: 6px;
-							padding-right: 0;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
 // Responsive
 @media (max-width: 767px) {
 
diff --git a/modules/legacy/assets/less/style.less b/modules/legacy/assets/less/style.less
index 58649801..5513b254 100644
--- a/modules/legacy/assets/less/style.less
+++ b/modules/legacy/assets/less/style.less
@@ -20,11 +20,11 @@ body.pojo-a11y-readable-font {
 // Skip Link
 .pojo-skip-link {
 	position: absolute;
-	top: -1000em;
+	inset-block-start: -1000em;
 
 	&:focus {
-		left: 50px;
-		top: 50px;
+		inset-inline-start: 50px;
+		inset-block-start: 50px;
 		height: auto;
 		width: 200px;
 		display: block;
@@ -41,15 +41,6 @@ body.pojo-a11y-readable-font {
 	}
 }
 
-body.rtl {
-	.pojo-skip-link {
-		&:focus {
-			right: 50px;
-			left: auto;
-		}
-	}
-}
-
 #pojo-a11y-toolbar {
 
 	*,
diff --git a/modules/legacy/components/upgrade.php b/modules/legacy/components/upgrade.php
index 84f34cf6..5c67c76a 100644
--- a/modules/legacy/components/upgrade.php
+++ b/modules/legacy/components/upgrade.php
@@ -268,8 +268,8 @@ public function maybe_add_introduction_modal() {
 				}
 				.video-wrapper {
 					position: relative;
-					padding-bottom: 56.25%;
-					padding-top: 9px;
+					padding-block-end: 56.25%;
+					padding-block-start: 9px;
 					height: 0;
 					overflow: hidden;
 				}
@@ -277,7 +277,7 @@ public function maybe_add_introduction_modal() {
 					padding: 1px 9px;
 				}
 				.intro-title {
-					margin-top: 16px;
+					margin-block-start: 16px;
 					font-family: Roboto, sans-serif;
 					font-size: 24px;
 					font-style: normal;
@@ -286,8 +286,8 @@ public function maybe_add_introduction_modal() {
 				}
 				.intro-description{
 					padding: 0 !important;
-					margin-top: 24px;
-					margin-bottom: 24px;
+					margin-block-start: 24px;
+					margin-block-end: 24px;
 					color: #69727D;
 				}
 				.benefits {
@@ -298,7 +298,7 @@ public function maybe_add_introduction_modal() {
 					background-image: url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJDaXJjbGVDaGVja0ZpbGxlZCI+CjxwYXRoIGlkPSJWZWN0b3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVDOC45MzMwMSAxLjg3NSA3Ljg3NjQ3IDIuMDg1MTYgNi44OTA3IDIuNDkzNDhDNS45MDQ5MyAyLjkwMTggNS4wMDkyMyAzLjUwMDI4IDQuMjU0NzYgNC4yNTQ3NkMzLjUwMDI4IDUuMDA5MjMgMi45MDE4IDUuOTA0OTMgMi40OTM0OCA2Ljg5MDdDMi4wODUxNiA3Ljg3NjQ3IDEuODc1IDguOTMzMDEgMS44NzUgMTBDMS44NzUgMTEuMDY3IDIuMDg1MTYgMTIuMTIzNSAyLjQ5MzQ4IDEzLjEwOTNDMi45MDE4IDE0LjA5NTEgMy41MDAyOCAxNC45OTA4IDQuMjU0NzYgMTUuNzQ1MkM1LjAwOTIzIDE2LjQ5OTcgNS45MDQ5MyAxNy4wOTgyIDYuODkwNyAxNy41MDY1QzcuODc2NDcgMTcuOTE0OCA4LjkzMzAxIDE4LjEyNSAxMCAxOC4xMjVDMTEuMDY3IDE4LjEyNSAxMi4xMjM1IDE3LjkxNDggMTMuMTA5MyAxNy41MDY1QzE0LjA5NTEgMTcuMDk4MiAxNC45OTA4IDE2LjQ5OTcgMTUuNzQ1MiAxNS43NDUyQzE2LjQ5OTcgMTQuOTkwOCAxNy4wOTgyIDE0LjA5NTEgMTcuNTA2NSAxMy4xMDkzQzE3LjkxNDggMTIuMTIzNSAxOC4xMjUgMTEuMDY3IDE4LjEyNSAxMEMxOC4xMjUgOC45MzMwMSAxNy45MTQ4IDcuODc2NDcgMTcuNTA2NSA2Ljg5MDdDMTcuMDk4MiA1LjkwNDkzIDE2LjQ5OTcgNS4wMDkyMyAxNS43NDUyIDQuMjU0NzZDMTQuOTkwOCAzLjUwMDI4IDE0LjA5NTEgMi45MDE4IDEzLjEwOTMgMi40OTM0OEMxMi4xMjM1IDIuMDg1MTYgMTEuMDY3IDEuODc1IDEwIDEuODc1Wk0xMy41MzQ2IDguMzgwMjRDMTMuNzc4NyA4LjEzNjE2IDEzLjc3ODcgNy43NDA0MyAxMy41MzQ2IDcuNDk2MzVDMTMuMjkwNSA3LjI1MjI4IDEyLjg5NDggNy4yNTIyOCAxMi42NTA3IDcuNDk2MzVMOC45NjkyNSAxMS4xNzc4TDcuMzQ5NDkgOS41NTgwNUM3LjEwNTQyIDkuMzEzOTggNi43MDk2OSA5LjMxMzk4IDYuNDY1NjEgOS41NTgwNUM2LjIyMTUzIDkuODAyMTMgNi4yMjE1MyAxMC4xOTc5IDYuNDY1NjEgMTAuNDQxOUw4LjUyNzMxIDEyLjUwMzZDOC42NDQ1MiAxMi42MjA4IDguODAzNDkgMTIuNjg2NyA4Ljk2OTI1IDEyLjY4NjdDOS4xMzUwMSAxMi42ODY3IDkuMjkzOTggMTIuNjIwOCA5LjQxMTE5IDEyLjUwMzZMMTMuNTM0NiA4LjM4MDI0WiIgZmlsbD0iIzI1NjNFQiIvPgo8L2c+Cjwvc3ZnPgo=);
 					background-repeat: no-repeat;
 					padding: 0 0 0 25px;
-					margin-bottom: 8px;
+					margin-block-end: 8px;
 				}
 				li::marker{
 					font-size: 1.5em;
@@ -316,7 +316,7 @@ public function maybe_add_introduction_modal() {
 					justify-content: end;
 					align-items: center;
 					padding: 16px 0 1px 0;
-					margin-top: 32px;
+					margin-block-start: 32px;
 				}
 				.close-button {
 					font-family: Roboto, sans-serif;
@@ -465,7 +465,7 @@ public function maybe_add_confirmation_modal() {
 					font-weight: 700;
 					line-height: 133.4%;
 					margin-block: 1px;
-					margin-bottom: 9px
+					margin-block-end: 9px
 				}
 				.confirmation-description{
 					font-family: Roboto, sans-serif;
@@ -492,7 +492,7 @@ public function maybe_add_confirmation_modal() {
 					justify-content: end;
 					align-items: center;
 					width: 100%;
-					margin-top: 16px;
+					margin-block-start: 16px;
 				}
 				.upgrade-now {
 					background: #2563EB !important;
diff --git a/modules/reviews/assets/src/components/rating-form.js b/modules/reviews/assets/src/components/rating-form.js
index a5ecdb1d..73e16246 100644
--- a/modules/reviews/assets/src/components/rating-form.js
+++ b/modules/reviews/assets/src/components/rating-form.js
@@ -93,6 +93,6 @@ export default RatingForm;
 
 const StyledFormControlLabel = styled(FormControlLabel)`
 	justify-content: space-between;
-	margin-left: 0;
+	margin-inline-start: 0;
 	width: 100%;
 `;
diff --git a/modules/reviews/assets/src/components/review-form.js b/modules/reviews/assets/src/components/review-form.js
index 0cda4c1e..f7cfcdc5 100644
--- a/modules/reviews/assets/src/components/review-form.js
+++ b/modules/reviews/assets/src/components/review-form.js
@@ -48,13 +48,13 @@ const ReviewForm = () => {
 					fontSize: 24,
 				}}
 			/>
-			<Typography variant="h6" marginBottom={1}>
+			<Typography variant="h6" marginBlockEnd={1}>
 				{__('Awesome!', 'pojo-accessibility')}
 			</Typography>
 			<Typography
 				variant="body1"
 				color="secondary"
-				marginBottom={3}
+				marginBlockEnd={3}
 				width="55%"
 			>
 				{__('Help others discover Ally on WordPress', 'pojo-accessibility')}
@@ -63,7 +63,7 @@ const ReviewForm = () => {
 				emptyIcon={<StarFilledIcon fontSize="large" />}
 				icon={<StarFilledIcon fontSize="large" />}
 				onChange={handleSubmit}
-				sx={{ marginBottom: 3 }}
+				sx={{ marginBlockEnd: 3 }}
 				highlightSelectedOnly={false}
 			/>
 		</FormControl>
diff --git a/modules/reviews/assets/src/layouts/user-feedback-form.js b/modules/reviews/assets/src/layouts/user-feedback-form.js
index 24496827..5e9ccdd3 100644
--- a/modules/reviews/assets/src/layouts/user-feedback-form.js
+++ b/modules/reviews/assets/src/layouts/user-feedback-form.js
@@ -82,7 +82,11 @@ const UserFeedbackForm = () => {
 		>
 			<StyledBox>
 				<Header>
-					<Typography variant="subtitle1" color="text.primary" marginTop={1}>
+					<Typography
+						variant="subtitle1"
+						color="text.primary"
+						marginBlockStart={1}
+					>
 						{headerMessage?.[currentPage]}
 					</Typography>
 				</Header>
@@ -113,7 +117,7 @@ const Header = styled(Box)`
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	margin-bottom: ${({ theme }) => theme.spacing(2)};
+	margin-block-end: ${({ theme }) => theme.spacing(2)};
 `;
 
 const Footer = styled(Box, {
@@ -125,5 +129,5 @@ const Footer = styled(Box, {
 	align-items: center;
 	${({ currentPage, theme }) =>
 		currentPage !== 'feedback' &&
-		`border-top: 1px solid ${theme.palette.divider};`}
+		`border-block-start: 1px solid ${theme.palette.divider};`}
 `;
diff --git a/modules/scanner/assets/js/app.js b/modules/scanner/assets/js/app.js
index 67c02e3f..0431346e 100644
--- a/modules/scanner/assets/js/app.js
+++ b/modules/scanner/assets/js/app.js
@@ -137,7 +137,7 @@ const App = () => {
 			<AppContainer elevation={6} ref={containerRef}>
 				<ErrorBoundary fallback={<ErrorMessage />}>
 					<AppHeader />
-					<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+					<Box sx={{ borderBlockEnd: '1px solid rgb(0 0 0 / 0.12)' }}>
 						<AppsTabs
 							{...tabsProps}
 							aria-label={__(
diff --git a/modules/scanner/assets/js/components/alt-text-form/index.js b/modules/scanner/assets/js/components/alt-text-form/index.js
index 13612472..9844d7e7 100644
--- a/modules/scanner/assets/js/components/alt-text-form/index.js
+++ b/modules/scanner/assets/js/components/alt-text-form/index.js
@@ -101,7 +101,7 @@ export const AltTextForm = ({ item, current, setCurrent, setIsEdit }) => {
 						<Typography variant="body1">
 							{__('Mark image as decorative', 'pojo-accessibility')}
 						</Typography>
-						<FormHelperText sx={{ mt: 0 }}>
+						<FormHelperText sx={{ marginBlockStart: 0 }}>
 							{__(
 								"(decorative images don't need description)",
 								'pojo-accessibility',
diff --git a/modules/scanner/assets/js/components/color-contrast-form/color-set-disabled.js b/modules/scanner/assets/js/components/color-contrast-form/color-set-disabled.js
index 667a3751..9ec31aab 100644
--- a/modules/scanner/assets/js/components/color-contrast-form/color-set-disabled.js
+++ b/modules/scanner/assets/js/components/color-contrast-form/color-set-disabled.js
@@ -58,8 +58,8 @@ export const ColorSetDisabled = ({ title, description }) => {
 					InputProps={{
 						sx: {
 							width: '75px',
-							paddingRight: '4px',
-							marginRight: '8px',
+							paddingInlineEnd: '4px',
+							marginInlineEnd: '8px',
 						},
 						endAdornment: (
 							<InputAdornment position="end">
diff --git a/modules/scanner/assets/js/components/color-contrast-form/color-set.js b/modules/scanner/assets/js/components/color-contrast-form/color-set.js
index 9bee1c94..f0b713c0 100644
--- a/modules/scanner/assets/js/components/color-contrast-form/color-set.js
+++ b/modules/scanner/assets/js/components/color-contrast-form/color-set.js
@@ -90,8 +90,8 @@ export const ColorSet = ({ title, color, initialColor, setColor, area }) => {
 					InputProps={{
 						sx: {
 							width: '75px',
-							paddingRight: '4px',
-							marginRight: '8px',
+							paddingInlineEnd: '4px',
+							marginInlineEnd: '8px',
 						},
 						endAdornment: (
 							<InputAdornment position="end">
diff --git a/modules/scanner/assets/js/components/color-contrast-form/index.js b/modules/scanner/assets/js/components/color-contrast-form/index.js
index 09efdca8..2d7abb23 100644
--- a/modules/scanner/assets/js/components/color-contrast-form/index.js
+++ b/modules/scanner/assets/js/components/color-contrast-form/index.js
@@ -143,7 +143,7 @@ export const ColorContrastForm = ({ item, current, setCurrent, setIsEdit }) => {
 				/>
 			)}
 			<Alert severity={colorData.passesAA ? 'success' : 'error'}>
-				<AlertTitle sx={{ mr: 1 }}>
+				<AlertTitle sx={{ marginInlineEnd: 1 }}>
 					{__('Contrast level:', 'pojo-accessibility')}
 				</AlertTitle>
 				{colorData.ratio}
@@ -170,7 +170,7 @@ export const ColorContrastForm = ({ item, current, setCurrent, setIsEdit }) => {
 						loading={loading}
 						disabled={isSubmitDisabled}
 						onClick={item.isEdit || resolved ? handleUpdate : handleSubmit}
-						sx={{ mt: isManage ? 0 : 1.5 }}
+						sx={{ marginBlockStart: isManage ? 0 : 1.5 }}
 						fullWidth={!isManage}
 					>
 						{isGlobal ? __('Apply to all', 'pojo-accessibility') : applyBtnText}
diff --git a/modules/scanner/assets/js/components/color-contrast-form/parent-selector.js b/modules/scanner/assets/js/components/color-contrast-form/parent-selector.js
index b30393c4..e3300977 100644
--- a/modules/scanner/assets/js/components/color-contrast-form/parent-selector.js
+++ b/modules/scanner/assets/js/components/color-contrast-form/parent-selector.js
@@ -26,7 +26,7 @@ export const ParentSelector = ({
 
 	return (
 		<Box>
-			<Typography variant="body2" as="p" sx={{ mb: 2 }}>
+			<Typography variant="body2" as="p" sx={{ marginBlockEnd: 2 }}>
 				{__('Background area', 'pojo-accessibility')}
 			</Typography>
 			<Box display="flex" alignItems="center" gap={1}>
diff --git a/modules/scanner/assets/js/components/error-message/index.js b/modules/scanner/assets/js/components/error-message/index.js
index 97d0f94f..2bc9835f 100644
--- a/modules/scanner/assets/js/components/error-message/index.js
+++ b/modules/scanner/assets/js/components/error-message/index.js
@@ -8,7 +8,7 @@ export const ErrorMessage = () => (
 	<StateContainer>
 		<ErrorImage />
 		<Box sx={{ maxWidth: '300px' }}>
-			<Typography variant="h5" align="center" sx={{ mb: 2 }}>
+			<Typography variant="h5" align="center" sx={{ marginBlockEnd: 2 }}>
 				{__('Well this is unexpected…', 'pojo-accessibility')}
 			</Typography>
 			<Typography variant="body2" align="center">
diff --git a/modules/scanner/assets/js/components/header/dropdown-menu.js b/modules/scanner/assets/js/components/header/dropdown-menu.js
index 1bf39bca..51e6a270 100644
--- a/modules/scanner/assets/js/components/header/dropdown-menu.js
+++ b/modules/scanner/assets/js/components/header/dropdown-menu.js
@@ -179,7 +179,7 @@ export const DropdownMenu = () => {
 					<MenuItemText>
 						{__('View subscription', 'pojo-accessibility')}
 					</MenuItemText>
-					<MenuItemIcon sx={{ ml: 5 }}>
+					<MenuItemIcon sx={{ marginInlineStart: 5 }}>
 						<ExternalLinkIcon />
 					</MenuItemIcon>
 				</MenuItem>
diff --git a/modules/scanner/assets/js/components/header/index.js b/modules/scanner/assets/js/components/header/index.js
index ef52b380..522ea970 100644
--- a/modules/scanner/assets/js/components/header/index.js
+++ b/modules/scanner/assets/js/components/header/index.js
@@ -49,7 +49,7 @@ const Header = () => {
 			<StyledStatsBlock>
 				<TitleBox
 					sx={{
-						mb: isConnected && !isError ? 2 : 0,
+						marginBlockEnd: isConnected && !isError ? 2 : 0,
 					}}
 				>
 					<Typography variant="subtitle1" as="h3" color="text.primary">
diff --git a/modules/scanner/assets/js/components/header/title/app-title.js b/modules/scanner/assets/js/components/header/title/app-title.js
index 70a2eaa4..5c33f9ca 100644
--- a/modules/scanner/assets/js/components/header/title/app-title.js
+++ b/modules/scanner/assets/js/components/header/title/app-title.js
@@ -15,7 +15,7 @@ const AppTitle = () => {
 					size="small"
 					variant="filled"
 					color="default"
-					sx={{ ml: 1 }}
+					sx={{ marginInlineStart: 1 }}
 					label={__('Beta', 'pojo-accessibility')}
 				/>
 			</StyledTitle>
diff --git a/modules/scanner/assets/js/components/heading-structure/heading-tree-empty.js b/modules/scanner/assets/js/components/heading-structure/heading-tree-empty.js
index ee0a5de3..668f5f71 100644
--- a/modules/scanner/assets/js/components/heading-structure/heading-tree-empty.js
+++ b/modules/scanner/assets/js/components/heading-structure/heading-tree-empty.js
@@ -10,7 +10,7 @@ const HeadingStructureHeadingTreeEmpty = () => {
 			<ErrorImage />
 
 			<Box sx={{ maxWidth: '300px' }}>
-				<Typography variant="h5" align="center" sx={{ mb: 2 }}>
+				<Typography variant="h5" align="center" sx={{ marginBlockEnd: 2 }}>
 					{__('No headings found', 'pojo-accessibility')}
 				</Typography>
 
diff --git a/modules/scanner/assets/js/components/heading-structure/heading-tree-loader.js b/modules/scanner/assets/js/components/heading-structure/heading-tree-loader.js
index b440fc33..5cd7cbc0 100644
--- a/modules/scanner/assets/js/components/heading-structure/heading-tree-loader.js
+++ b/modules/scanner/assets/js/components/heading-structure/heading-tree-loader.js
@@ -21,7 +21,7 @@ const StyledLoaderContainer = styled(Box)`
 	display: flex;
 	flex-direction: column;
 
-	margin-top: ${({ theme }) => theme.spacing(2)};
+	margin-block-start: ${({ theme }) => theme.spacing(2)};
 	gap: ${({ theme }) => theme.spacing(1.5)};
 `;
 
diff --git a/modules/scanner/assets/js/components/list-loader/index.js b/modules/scanner/assets/js/components/list-loader/index.js
index a6d9591f..816407db 100644
--- a/modules/scanner/assets/js/components/list-loader/index.js
+++ b/modules/scanner/assets/js/components/list-loader/index.js
@@ -5,7 +5,7 @@ import {
 
 export const Loader = () => (
 	<SkeletonContainer>
-		<StyledSkeleton width={120} height={12} sx={{ mb: 1 }} />
+		<StyledSkeleton width={120} height={12} sx={{ marginBlockEnd: 1 }} />
 		<StyledSkeleton width="100%" height={48} />
 		<StyledSkeleton width="100%" height={48} />
 		<StyledSkeleton width="100%" height={48} />
diff --git a/modules/scanner/assets/js/components/manage-alt-text/index.js b/modules/scanner/assets/js/components/manage-alt-text/index.js
index 72c6da5b..16be2ee1 100644
--- a/modules/scanner/assets/js/components/manage-alt-text/index.js
+++ b/modules/scanner/assets/js/components/manage-alt-text/index.js
@@ -60,7 +60,7 @@ export const ManageAltText = ({ item, current, openEdit }) => {
 				</AlertWithDisabledState>
 			) : (
 				<Box>
-					<Typography variant="body2" sx={{ mb: 1 }}>
+					<Typography variant="body2" sx={{ marginBlockEnd: 1 }}>
 						{__('Alt text', 'pojo-accessibility')}
 					</Typography>
 					<AlertWithDisabledState
diff --git a/modules/scanner/assets/js/components/manage-footer-actions/global/manage-global-actions.js b/modules/scanner/assets/js/components/manage-footer-actions/global/manage-global-actions.js
index fa298a36..5d0ea1a5 100644
--- a/modules/scanner/assets/js/components/manage-footer-actions/global/manage-global-actions.js
+++ b/modules/scanner/assets/js/components/manage-footer-actions/global/manage-global-actions.js
@@ -54,7 +54,7 @@ const ManageGlobalActions = ({ item }) => {
 				disabled={activeRequest}
 				onClick={handleOpen}
 				ref={anchorEl}
-				sx={{ ml: 1 }}
+				sx={{ marginInlineStart: 1 }}
 			>
 				{isExcluded
 					? __('Enable fix', 'pojo-accessibility')
diff --git a/modules/scanner/assets/js/components/manage-footer-actions/page/manage-page-actions.js b/modules/scanner/assets/js/components/manage-footer-actions/page/manage-page-actions.js
index 68769c2b..6b1cdc55 100644
--- a/modules/scanner/assets/js/components/manage-footer-actions/page/manage-page-actions.js
+++ b/modules/scanner/assets/js/components/manage-footer-actions/page/manage-page-actions.js
@@ -74,7 +74,7 @@ const ManagePageActions = ({ item, isActive }) => {
 						variant="outlined"
 						disabled={activeRequest}
 						onClick={updateRemediation(true)}
-						sx={{ ml: 1 }}
+						sx={{ marginInlineStart: 1 }}
 					>
 						{__('Enable fix', 'pojo-accessibility')}
 					</Button>
diff --git a/modules/scanner/assets/js/components/manage-footer-actions/page/set-global.js b/modules/scanner/assets/js/components/manage-footer-actions/page/set-global.js
index 556ae21f..c56f3bc1 100644
--- a/modules/scanner/assets/js/components/manage-footer-actions/page/set-global.js
+++ b/modules/scanner/assets/js/components/manage-footer-actions/page/set-global.js
@@ -86,12 +86,12 @@ export const SetGlobal = ({
 					<>
 						<InfotipImage src={infotipImageSrc} role="presentation" />
 						<InfotipBox sx={{ maxWidth: '265px' }}>
-							<Typography variant="subtitle1" sx={{ mb: 1 }}>
+							<Typography variant="subtitle1" sx={{ marginBlockEnd: 1 }}>
 								{__('Upgrade to unlock cross-scan fixes', 'pojo-accessibility')}
 							</Typography>
 							<Typography
 								variant="body2"
-								sx={{ mb: 1.5 }}
+								sx={{ marginBlockEnd: 1.5 }}
 								color="text.secondary"
 							>
 								{__(
@@ -148,7 +148,7 @@ export const SetGlobal = ({
 							<>
 								<InfotipImage src={infotipImageSrc} role="presentation" />
 								<InfotipBox sx={{ maxWidth: '260px' }}>
-									<Typography variant="subtitle2" sx={{ mb: 1 }}>
+									<Typography variant="subtitle2" sx={{ marginBlockEnd: 1 }}>
 										{__('Fix once, apply everywhere', 'pojo-accessibility')}
 									</Typography>
 									<Typography variant="body2" color="text.secondary">
diff --git a/modules/scanner/assets/js/components/manual-fix-form/index.js b/modules/scanner/assets/js/components/manual-fix-form/index.js
index 17544653..e0610ad4 100644
--- a/modules/scanner/assets/js/components/manual-fix-form/index.js
+++ b/modules/scanner/assets/js/components/manual-fix-form/index.js
@@ -118,7 +118,7 @@ export const ManualFixForm = ({ item, current, setOpen }) => {
 								<InfotipBox>
 									<Typography
 										variant="subtitle1"
-										sx={{ mb: 1, textTransform: 'none' }}
+										sx={{ marginBlockEnd: 1, textTransform: 'none' }}
 									>
 										{__(
 											"What's the issue and why it matters?",
@@ -143,7 +143,11 @@ export const ManualFixForm = ({ item, current, setOpen }) => {
 
 				<Box>
 					<TitleBox>
-						<Typography variant="subtitle2" as="h5" sx={{ mb: 0.5 }}>
+						<Typography
+							variant="subtitle2"
+							as="h5"
+							sx={{ marginBlockEnd: 0.5 }}
+						>
 							{__('Where is it', 'pojo-accessibility')}
 						</Typography>
 						<Tooltip
@@ -208,7 +212,11 @@ export const ManualFixForm = ({ item, current, setOpen }) => {
 												justifyContent="space-between"
 												alignItems="start"
 											>
-												<Typography variant="subtitle1" as="h5" sx={{ mb: 3 }}>
+												<Typography
+													variant="subtitle1"
+													as="h5"
+													sx={{ marginBlockEnd: 3 }}
+												>
 													{__('See an example', 'pojo-accessibility')}
 												</Typography>
 
@@ -217,7 +225,7 @@ export const ManualFixForm = ({ item, current, setOpen }) => {
 													aria-label={__('Close tooltip', 'pojo-accessibility')}
 													size="small"
 													edge="end"
-													sx={{ mt: -1 }}
+													sx={{ marginBlockStart: -1 }}
 												>
 													<XIcon />
 												</IconButton>
@@ -230,7 +238,7 @@ export const ManualFixForm = ({ item, current, setOpen }) => {
 											<Typography
 												variant="body2"
 												color="secondary"
-												sx={{ mb: 2 }}
+												sx={{ marginBlockEnd: 2 }}
 											>
 												{uxMessaging[item.ruleId].seeAnExample.issue}
 											</Typography>
@@ -245,7 +253,7 @@ export const ManualFixForm = ({ item, current, setOpen }) => {
 														variant="body2"
 														color="secondary"
 														key={`resolution-${index}`}
-														sx={{ mb: 2 }}
+														sx={{ marginBlockEnd: 2 }}
 													>
 														{resolution}
 													</Typography>
@@ -269,7 +277,7 @@ export const ManualFixForm = ({ item, current, setOpen }) => {
 										underline="none"
 										color="info.main"
 										onClick={handleLinkClick}
-										sx={{ mx: 0.5 }}
+										sx={{ marginInline: 0.5 }}
 									>
 										{__('See an example', 'pojo-accessibility')}
 									</Link>
diff --git a/modules/scanner/assets/js/components/manual-fix-form/resolve-with-ai.js b/modules/scanner/assets/js/components/manual-fix-form/resolve-with-ai.js
index f1924c35..0fcc61ef 100644
--- a/modules/scanner/assets/js/components/manual-fix-form/resolve-with-ai.js
+++ b/modules/scanner/assets/js/components/manual-fix-form/resolve-with-ai.js
@@ -116,7 +116,7 @@ export const ResolveWithAi = ({ item, current }) => {
 	return aiSuggestion?.snippet ? (
 		<Box>
 			<Card variant="outlined" sx={{ overflow: 'visible' }}>
-				<CardContent sx={{ pt: 1.5, pb: 0 }}>
+				<CardContent sx={{ paddingBlockStart: 1.5, paddingBlockEnd: 0 }}>
 					<ItemHeader>
 						<ItemTitle>
 							<AIIcon />
@@ -133,7 +133,7 @@ export const ResolveWithAi = ({ item, current }) => {
 										<InfotipBox>
 											<Typography
 												variant="subtitle1"
-												sx={{ mb: 1, textTransform: 'none' }}
+												sx={{ marginBlockEnd: 1, textTransform: 'none' }}
 											>
 												{__('How AI resolves this?', 'pojo-accessibility')}
 											</Typography>
diff --git a/modules/scanner/assets/js/components/remediation-confirmation-modal/delete-global-remediation-modal.js b/modules/scanner/assets/js/components/remediation-confirmation-modal/delete-global-remediation-modal.js
index a771c14a..d28dd044 100644
--- a/modules/scanner/assets/js/components/remediation-confirmation-modal/delete-global-remediation-modal.js
+++ b/modules/scanner/assets/js/components/remediation-confirmation-modal/delete-global-remediation-modal.js
@@ -27,7 +27,12 @@ const DeleteGlobalRemediationModal = ({
 			}
 			approveText={__('Remove everywhere', 'pojo-accessibility')}
 			cancelText={__('Not now', 'pojo-accessibility')}
-			logo={<AlertOctagonFilledIcon color="error" sx={{ mt: '6px' }} />}
+			logo={
+				<AlertOctagonFilledIcon
+					color="error"
+					sx={{ marginBlockStart: '6px' }}
+				/>
+			}
 			onApprove={onDelete}
 			showCloseButton
 			disablePortal
diff --git a/modules/scanner/assets/js/components/remediation-confirmation-modal/delete-page-remediation-modal.js b/modules/scanner/assets/js/components/remediation-confirmation-modal/delete-page-remediation-modal.js
index d5b7ab4a..6d355eeb 100644
--- a/modules/scanner/assets/js/components/remediation-confirmation-modal/delete-page-remediation-modal.js
+++ b/modules/scanner/assets/js/components/remediation-confirmation-modal/delete-page-remediation-modal.js
@@ -31,7 +31,12 @@ const DeletePageRemediationModal = ({
 					: __('Remove fix', 'pojo-accessibility')
 			}
 			cancelText={__('Not now', 'pojo-accessibility')}
-			logo={<AlertOctagonFilledIcon color="error" sx={{ mt: '6px' }} />}
+			logo={
+				<AlertOctagonFilledIcon
+					color="error"
+					sx={{ marginBlockStart: '6px' }}
+				/>
+			}
 			onApprove={onDelete}
 			showCloseButton
 			disablePortal
diff --git a/modules/scanner/assets/js/components/remediation-confirmation-modal/disable-global-remediation-modal.js b/modules/scanner/assets/js/components/remediation-confirmation-modal/disable-global-remediation-modal.js
index 7d75fa89..2edaaee0 100644
--- a/modules/scanner/assets/js/components/remediation-confirmation-modal/disable-global-remediation-modal.js
+++ b/modules/scanner/assets/js/components/remediation-confirmation-modal/disable-global-remediation-modal.js
@@ -23,7 +23,12 @@ const DisableGlobalRemediationModal = ({
 			approveButtonColor="warning"
 			approveText={__('Disable everywhere', 'pojo-accessibility')}
 			cancelText={__('Not now', 'pojo-accessibility')}
-			logo={<AlertOctagonFilledIcon color="warning" sx={{ mt: '6px' }} />}
+			logo={
+				<AlertOctagonFilledIcon
+					color="warning"
+					sx={{ marginBlockStart: '6px' }}
+				/>
+			}
 			onApprove={onDisable}
 			showCloseButton
 			disablePortal
diff --git a/modules/scanner/assets/js/components/remediation-confirmation-modal/enable-global-remediation-modal.js b/modules/scanner/assets/js/components/remediation-confirmation-modal/enable-global-remediation-modal.js
index d5cd981a..753cca5b 100644
--- a/modules/scanner/assets/js/components/remediation-confirmation-modal/enable-global-remediation-modal.js
+++ b/modules/scanner/assets/js/components/remediation-confirmation-modal/enable-global-remediation-modal.js
@@ -23,7 +23,9 @@ const EnableGlobalRemediationModal = ({
 			approveButtonColor="info"
 			approveText={__('Enable everywhere', 'pojo-accessibility')}
 			cancelText={__('Not now', 'pojo-accessibility')}
-			logo={<InfoCircleFilledIcon color="info" sx={{ mt: '6px' }} />}
+			logo={
+				<InfoCircleFilledIcon color="info" sx={{ marginBlockStart: '6px' }} />
+			}
 			onApprove={onEnable}
 			showCloseButton
 			disablePortal
diff --git a/modules/scanner/assets/js/components/remediation-form/index.js b/modules/scanner/assets/js/components/remediation-form/index.js
index a995e5c6..d3d1c9af 100644
--- a/modules/scanner/assets/js/components/remediation-form/index.js
+++ b/modules/scanner/assets/js/components/remediation-form/index.js
@@ -41,7 +41,7 @@ export const RemediationForm = ({ item }) => {
 								<InfotipBox>
 									<Typography
 										variant="subtitle1"
-										sx={{ mb: 1, textTransform: 'none' }}
+										sx={{ marginBlockEnd: 1, textTransform: 'none' }}
 									>
 										{__(
 											"What's the issue and why it matters?",
diff --git a/modules/scanner/assets/js/components/remediation-form/remediation-snippet.js b/modules/scanner/assets/js/components/remediation-form/remediation-snippet.js
index 10f88efe..7dfddbe8 100644
--- a/modules/scanner/assets/js/components/remediation-form/remediation-snippet.js
+++ b/modules/scanner/assets/js/components/remediation-form/remediation-snippet.js
@@ -65,9 +65,9 @@ export const RemediationSnippet = ({ item }) => {
 	};
 
 	return (
-		<Box sx={{ mb: 3 }}>
+		<Box sx={{ marginBlockEnd: 3 }}>
 			<Card variant="outlined" sx={{ overflow: 'visible' }}>
-				<CardContent sx={{ pt: 1.5, pb: 0 }}>
+				<CardContent sx={{ paddingBlockStart: 1.5, paddingBlockEnd: 0 }}>
 					<ItemHeader>
 						<ItemTitle>
 							<AIIcon />
diff --git a/modules/scanner/assets/js/components/upgrade-info-tip/upgrade-content.js b/modules/scanner/assets/js/components/upgrade-info-tip/upgrade-content.js
index c3256d59..9d75f4d3 100644
--- a/modules/scanner/assets/js/components/upgrade-info-tip/upgrade-content.js
+++ b/modules/scanner/assets/js/components/upgrade-info-tip/upgrade-content.js
@@ -64,7 +64,7 @@ export const UpgradeContent = ({
 	return (
 		<InfotipBox>
 			<UpgradeContentContainer>
-				<Typography variant="subtitle1" sx={{ mb: 3 }}>
+				<Typography variant="subtitle1" sx={{ marginBlockEnd: 3 }}>
 					{IS_PRO_PLAN
 						? __("You've reached the monthly limit", 'pojo-accessibility')
 						: __('Resolve issues automatically with AI', 'pojo-accessibility')}
@@ -74,13 +74,13 @@ export const UpgradeContent = ({
 						onClick={closeUpgrade}
 						size="small"
 						edge="end"
-						sx={{ mt: -1 }}
+						sx={{ marginBlockStart: -1 }}
 					>
 						<XIcon />
 					</IconButton>
 				)}
 			</UpgradeContentContainer>
-			<Typography variant="body2" color="secondary" sx={{ mb: 2 }}>
+			<Typography variant="body2" color="secondary" sx={{ marginBlockEnd: 2 }}>
 				{IS_PRO_PLAN
 					? __(
 							'To work more magic with AI, upgrade your plan or wait until next month.',
diff --git a/modules/scanner/assets/js/index.js b/modules/scanner/assets/js/index.js
index 0247a499..07c3256b 100644
--- a/modules/scanner/assets/js/index.js
+++ b/modules/scanner/assets/js/index.js
@@ -87,7 +87,7 @@ const initApp = () => {
 		rootNode.setAttribute('dir', 'rtl');
 	}
 
-	document.body.style[isRTL ? 'marginLeft' : 'marginRight'] = '425px';
+	document.body.style.marginInlineEnd = '425px';
 	document.body.appendChild(rootNode);
 
 	const shadowContainer = rootNode.attachShadow({ mode: 'open' });
diff --git a/modules/scanner/assets/js/layouts/management/manage-main-layout.js b/modules/scanner/assets/js/layouts/management/manage-main-layout.js
index ea69fd0c..807483bd 100644
--- a/modules/scanner/assets/js/layouts/management/manage-main-layout.js
+++ b/modules/scanner/assets/js/layouts/management/manage-main-layout.js
@@ -64,7 +64,7 @@ export const ManageMainLayout = () => {
 
 			{globalRemediations.length > 0 && (
 				<>
-					<ManageHeader sx={{ mt: 2 }}>
+					<ManageHeader sx={{ marginBlockStart: 2 }}>
 						<Typography variant="body2" color="text.tertiary">
 							{__('Cross-page fixes', 'pojo-accessibility')}
 						</Typography>
@@ -82,9 +82,12 @@ export const ManageMainLayout = () => {
 					icon={<CrownFilled color="promotion" />}
 					color="error"
 					onClose={hideUpgradeAlert}
-					sx={{ mt: 2 }}
+					sx={{ marginBlockStart: 2 }}
 				>
-					<Typography variant="body2" sx={{ mb: 1.5, color: 'text.secondary' }}>
+					<Typography
+						variant="body2"
+						sx={{ marginBlockEnd: 1.5, color: 'text.secondary' }}
+					>
 						{__(
 							'Resolve these issues on all of your scanned pages with a click.',
 							'pojo-accessibility',
diff --git a/modules/scanner/assets/js/layouts/management/manage-manual-layout.js b/modules/scanner/assets/js/layouts/management/manage-manual-layout.js
index 0318e019..46798edb 100644
--- a/modules/scanner/assets/js/layouts/management/manage-manual-layout.js
+++ b/modules/scanner/assets/js/layouts/management/manage-manual-layout.js
@@ -37,7 +37,7 @@ export const ManageManualLayout = () => {
 	}, [remediations[openedBlock]?.length]);
 
 	return (
-		<Box sx={{ pb: 8 }}>
+		<Box sx={{ paddingBlockEnd: 8 }}>
 			{remediations[openedBlock].map((item, index) => (
 				<StyledAccordion
 					key={`${item.rule}-${index}`}
diff --git a/modules/scanner/assets/js/layouts/scanner/manual-layout.js b/modules/scanner/assets/js/layouts/scanner/manual-layout.js
index b3626414..c0b5e304 100644
--- a/modules/scanner/assets/js/layouts/scanner/manual-layout.js
+++ b/modules/scanner/assets/js/layouts/scanner/manual-layout.js
@@ -24,7 +24,7 @@ export const ManualLayout = () => {
 	} = useScannerWizardContext();
 
 	return (
-		<Box sx={{ pb: 8 }}>
+		<Box sx={{ paddingBlockEnd: 8 }}>
 			{sortedViolations[openedBlock].map((item, index) => (
 				<StyledAccordion
 					key={`${item.ruleId}-${index}`}
diff --git a/modules/scanner/assets/js/styles/app.styles.js b/modules/scanner/assets/js/styles/app.styles.js
index c2c30594..9277f5a2 100644
--- a/modules/scanner/assets/js/styles/app.styles.js
+++ b/modules/scanner/assets/js/styles/app.styles.js
@@ -104,7 +104,7 @@ export const StyledAlert = styled(Alert)`
 	direction: ltr;
 	& .MuiAlert-icon,
 	& .MuiAlert-content {
-		padding-top: 0;
+		padding-block-start: 0;
 		display: flex;
 	}
 `;
@@ -132,8 +132,8 @@ export const StateContainer = styled(Box)`
 	align-items: center;
 	justify-content: center;
 	gap: ${({ theme }) => theme.spacing(2)};
-	padding-top: ${({ theme }) => theme.spacing(12)};
-	padding-bottom: ${({ theme }) => theme.spacing(6)};
+	padding-block-start: ${({ theme }) => theme.spacing(12)};
+	padding-block-end: ${({ theme }) => theme.spacing(6)};
 `;
 
 export const QuotaMessageContainer = styled(Box)`
@@ -142,14 +142,14 @@ export const QuotaMessageContainer = styled(Box)`
 	align-items: center;
 	justify-content: center;
 	gap: ${({ theme }) => theme.spacing(2)};
-	margin-bottom: ${({ theme }) => theme.spacing(2)};
+	margin-block-end: ${({ theme }) => theme.spacing(2)};
 	padding-inline: ${({ theme }) => theme.spacing(2)};
 `;
 
 export const ReconnectDescription = styled(Typography)`
 	max-width: 250px;
 	text-align: center;
-	margin-bottom: ${({ theme }) => theme.spacing(2)};
+	margin-block-end: ${({ theme }) => theme.spacing(2)};
 `;
 
 export const StyledButtonContainer = styled(Paper)`
@@ -181,7 +181,7 @@ export const ManageButtonWrap = styled(Box)`
 	gap: ${({ theme }) => theme.spacing(1.5)};
 	border: 1px solid ${({ theme }) => theme.palette.action.focus};
 	border-radius: ${({ theme }) => theme.shape.borderRadius}px;
-	padding-right: ${({ theme }) => theme.spacing(1.5)};
+	padding-inline-end: ${({ theme }) => theme.spacing(1.5)};
 	&:hover,
 	&:focus .MuiPaper-root,
 	&:focus-visible .MuiPaper-root {
@@ -237,7 +237,7 @@ export const StyledBox = styled(Box)`
 export const ManageColorAlert = styled(Alert)`
 	padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(1.5)};`};
 	& .MuiAlert-content {
-		padding-top: 0;
+		padding-block-start: 0;
 	}
 	& .MuiAlert-content > div {
 		display: block;
@@ -245,7 +245,7 @@ export const ManageColorAlert = styled(Alert)`
 `;
 
 export const StyledProChip = styled(Chip)`
-	margin-left: ${({ theme }) => theme.spacing(1)};
+	margin-inline-start: ${({ theme }) => theme.spacing(1)};
 	height: 26px;
 	width: 26px;
 
diff --git a/modules/scanner/assets/js/styles/heading-structure.styles.js b/modules/scanner/assets/js/styles/heading-structure.styles.js
index afba5f1f..47feb6dc 100644
--- a/modules/scanner/assets/js/styles/heading-structure.styles.js
+++ b/modules/scanner/assets/js/styles/heading-structure.styles.js
@@ -15,8 +15,8 @@ export const StyledDescription = styled(Typography)`
 	letter-spacing: 0.15px;
 
 	&:first-of-type {
-		margin-top: ${({ theme }) => theme.spacing(2)};
-		margin-bottom: ${({ theme }) => theme.spacing(1)};
+		margin-block-start: ${({ theme }) => theme.spacing(2)};
+		margin-block-end: ${({ theme }) => theme.spacing(1)};
 	}
 
 	&:last-of-type {
@@ -77,7 +77,7 @@ export const StyledTreeListItem = styled('li', {
 	justify-content: center;
 	align-items: flex-start;
 
-	margin-bottom: ${({ theme }) => theme.spacing(1.25)};
+	margin-block-end: ${({ theme }) => theme.spacing(1.25)};
 	box-shadow: ${({ isExpanded, theme }) =>
 		isExpanded
 			? `0 0 0 2px ${theme.palette.action.active}`
@@ -133,7 +133,7 @@ export const StyledListItemDetails = styled(Box)`
 	max-height: 500px;
 
 	padding: ${({ theme }) => theme.spacing(1)};
-	padding-top: 0;
+	padding-block-start: 0;
 `;
 
 export const StyledListItemLevelBox = styled(Box, {
@@ -171,14 +171,14 @@ export const StyledListItemContent = styled(Typography, {
 `;
 
 export const StyledListItemAlert = styled(Alert)`
-	margin-top: ${({ theme }) => theme.spacing(1.5)};
+	margin-block-start: ${({ theme }) => theme.spacing(1.5)};
 	padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(1.5)}`};
 `;
 
 export const StyledListItemBottomWrapper = styled(Box)`
 	width: 100%;
 
-	margin-top: ${({ theme }) => theme.spacing(2)};
+	margin-block-start: ${({ theme }) => theme.spacing(2)};
 `;
 
 export const StyledListItemSelect = styled(Select)`
@@ -195,7 +195,7 @@ export const StyledListItemActionsWrapper = styled(Box)`
 	display: flex;
 	align-items: center;
 
-	margin-top: ${({ theme }) => theme.spacing(2)};
+	margin-block-start: ${({ theme }) => theme.spacing(2)};
 
 	.MuiButton-text {
 		margin-inline-start: auto;
@@ -204,7 +204,7 @@ export const StyledListItemActionsWrapper = styled(Box)`
 `;
 
 export const StyledListItemDismissLabel = styled(FormControlLabel)`
-	margin-left: -7px;
+	margin-inline-start: -7px;
 
 	.MuiTypography-root {
 		font-size: 14px;
diff --git a/modules/scanner/assets/js/styles/manual-fixes.styles.js b/modules/scanner/assets/js/styles/manual-fixes.styles.js
index fe2ab84c..63245b41 100644
--- a/modules/scanner/assets/js/styles/manual-fixes.styles.js
+++ b/modules/scanner/assets/js/styles/manual-fixes.styles.js
@@ -7,8 +7,7 @@ import Typography from '@elementor/ui/Typography';
 import { styled } from '@elementor/ui/styles';
 
 export const StyledAccordion = styled(Accordion)`
-	border-right: none;
-	border-left: none;
+	border-inline: none;
 `;
 
 export const StyledAccordionSummary = styled(AccordionSummary)`
@@ -33,7 +32,7 @@ export const StyledAccordionDetails = styled(AccordionDetails)`
 	display: flex;
 	flex-direction: column;
 	gap: ${({ theme }) => theme.spacing(2)};
-	padding-bottom: 0;
+	padding-block-end: 0;
 `;
 
 export const StyledSnippet = styled(Typography)`
@@ -49,20 +48,20 @@ export const InfotipBox = styled(Box)`
 export const InfotipImage = styled('img')`
 	max-width: 304px;
 	height: auto;
-	border-top-left-radius: ${({ theme }) => theme.spacing(0.5)};
-	border-top-right-radius: ${({ theme }) => theme.spacing(0.5)};
+	border-start-start-radius: ${({ theme }) => theme.spacing(0.5)};
+	border-start-end-radius: ${({ theme }) => theme.spacing(0.5)};
 `;
 
 export const InfotipFooter = styled(Box)`
 	display: flex;
 	justify-content: flex-end;
-	margin-top: ${({ theme }) => theme.spacing(2)};
+	margin-block-start: ${({ theme }) => theme.spacing(2)};
 `;
 
 export const ItemHeader = styled(Box)`
 	display: flex;
 	justify-content: space-between;
-	margin-bottom: ${({ theme }) => theme.spacing(1)};
+	margin-block-end: ${({ theme }) => theme.spacing(1)};
 	min-height: ${({ theme }) => theme.spacing(4)};
 `;
 
@@ -82,6 +81,6 @@ export const TitleBox = styled(Box)`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-bottom: ${({ theme }) => theme.spacing(0.5)};
+	margin-block-end: ${({ theme }) => theme.spacing(0.5)};
 	gap: ${({ theme }) => theme.spacing(0.5)};
 `;
diff --git a/modules/scanner/assets/js/styles/react-colourful.styles.js b/modules/scanner/assets/js/styles/react-colourful.styles.js
index 1d608fa5..74976cb6 100644
--- a/modules/scanner/assets/js/styles/react-colourful.styles.js
+++ b/modules/scanner/assets/js/styles/react-colourful.styles.js
@@ -15,7 +15,7 @@ export const ColorPickerStyles = css`
 		position: relative;
 		flex-grow: 1;
 		border-color: transparent; /* Fixes https://github.com/omgovich/react-colorful/issues/139 */
-		border-bottom: 12px solid #000;
+		border-block-end: 12px solid #000;
 		border-radius: 8px 8px 0 0;
 		background-image:
 			linear-gradient(to top, #000, rgb(0 0 0 / 0)),
@@ -26,10 +26,7 @@ export const ColorPickerStyles = css`
 	.react-colorful__alpha-gradient {
 		content: '';
 		position: absolute;
-		left: 0;
-		top: 0;
-		right: 0;
-		bottom: 0;
+		inset: 0;
 		pointer-events: none;
 		border-radius: inherit;
 	}
@@ -68,10 +65,7 @@ export const ColorPickerStyles = css`
 
 	.react-colorful__interactive {
 		position: absolute;
-		left: 0;
-		top: 0;
-		right: 0;
-		bottom: 0;
+		inset: 0;
 		border-radius: inherit;
 		outline: none;
 		/* Don't trigger the default scrolling behavior when the event is originating from this element */
diff --git a/modules/scanner/assets/js/utils/close-widget.js b/modules/scanner/assets/js/utils/close-widget.js
index ce745bb2..483a7775 100644
--- a/modules/scanner/assets/js/utils/close-widget.js
+++ b/modules/scanner/assets/js/utils/close-widget.js
@@ -1,14 +1,13 @@
 import { removeExistingFocus } from '@ea11y-apps/scanner/utils/focus-on-element';
 
 export const closeWidget = (widget) => {
-	const isRTL = Boolean(window.ea11yScannerData?.isRTL);
 	removeExistingFocus();
 	widget.remove();
 	const url = new URL(window.location.href);
 	url.searchParams.delete('open-ea11y-assistant');
 	url.searchParams.delete('open-ea11y-manage');
 	url.searchParams.delete('open-ea11y-assistant-src');
-	document.body.style.removeProperty(isRTL ? 'margin-left' : 'margin-right');
+	document.body.style.removeProperty('margin-inline-end');
 	document.body.prepend(window.ea11yScannerData.adminBar);
 	window.history.replaceState({}, '', url.toString());
 };
diff --git a/modules/scanner/components/list-column.php b/modules/scanner/components/list-column.php
index ad3b4240..dfd522e0 100644
--- a/modules/scanner/components/list-column.php
+++ b/modules/scanner/components/list-column.php
@@ -31,7 +31,7 @@ public function build_column() {
 	}
 
 	public function add_accessibility_column( $columns ) {
-		$columns['accessibility_status'] = '<a class="ea11y-tooltip ea11y-tooltip-n ea11y-tooltip-hidden" data-label="' . esc_attr__( 'Ally', 'pojo-accessibility' ) . '"><img src="' . esc_url( EA11Y_ASSETS_URL . 'images/logo.svg' ) . '" alt="" style="width:20px; height:20px; vertical-align:middle; margin-right:8px;" /></a><span class="ea11y-column-title" title="' . esc_attr__( 'Ally', 'pojo-accessibility' ) . '">' . esc_html__( 'Ally', 'pojo-accessibility' ) . '</span>';
+		$columns['accessibility_status'] = '<a class="ea11y-tooltip ea11y-tooltip-n ea11y-tooltip-hidden" data-label="' . esc_attr__( 'Ally', 'pojo-accessibility' ) . '"><img src="' . esc_url( EA11Y_ASSETS_URL . 'images/logo.svg' ) . '" alt="" style="width:20px; height:20px; vertical-align:middle; margin-inline-end:8px;" /></a><span class="ea11y-column-title" title="' . esc_attr__( 'Ally', 'pojo-accessibility' ) . '">' . esc_html__( 'Ally', 'pojo-accessibility' ) . '</span>';
 		return $columns;
 	}
 
diff --git a/modules/settings/assets/css/style.css b/modules/settings/assets/css/style.css
index f156afb6..e6152849 100644
--- a/modules/settings/assets/css/style.css
+++ b/modules/settings/assets/css/style.css
@@ -1,5 +1,5 @@
 #wpbody-content {
-	padding-bottom: 0;
+	padding-block-end: 0;
 }
 
 /* Hide wp notices */
@@ -13,7 +13,7 @@ body {
 }
 
 .wrap {
-	margin-top: 0;
+	margin-block-start: 0;
 }
 
 #ea11y-app {
@@ -35,7 +35,7 @@ body.folded #ea11y-app {
 	box-sizing: border-box;
 }
 
-#ea11y-app .wrap {
+#ea11y-app .wrap:not(:empty) {
 	padding: 20px 40px 0;
 }
 
diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index 8b9d094d..9f0b6fc2 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -114,7 +114,7 @@ const App = () => {
 
 						<StyledContainer
 							role="main"
-							aria-label={__('Main Content', 'pojo-accessibility')}
+							aria-label={__('Plugin settings', 'pojo-accessibility')}
 						>
 							<QuotaNotices />
 							<PageContent
diff --git a/modules/settings/assets/js/components/alignment-matrix-control/index.js b/modules/settings/assets/js/components/alignment-matrix-control/index.js
index eda1a0de..c013cd0b 100644
--- a/modules/settings/assets/js/components/alignment-matrix-control/index.js
+++ b/modules/settings/assets/js/components/alignment-matrix-control/index.js
@@ -49,7 +49,7 @@ const AlignmentMatrixControl = ({ mode }) => {
 	return (
 		<FormControl>
 			<FormLabel id="alignment-matrix-control" color="secondary">
-				<Typography variant="subtitle2" marginBottom={3} color="text.primary">
+				<Typography variant="subtitle2" marginBlockEnd={3} color="text.primary">
 					{__('Default Position', 'pojo-accessibility')}
 				</Typography>
 			</FormLabel>
diff --git a/modules/settings/assets/js/components/analytics/analytics-toggle.js b/modules/settings/assets/js/components/analytics/analytics-toggle.js
index 5ec8f4dd..bfa71cee 100644
--- a/modules/settings/assets/js/components/analytics/analytics-toggle.js
+++ b/modules/settings/assets/js/components/analytics/analytics-toggle.js
@@ -59,7 +59,7 @@ export const AnalyticsToggle = () => {
 						color="info"
 						checked={isAnalyticsEnabled}
 						onChange={handleToggleClick}
-						sx={{ ml: 2 }}
+						sx={{ marginInlineStart: 2 }}
 					/>
 				}
 				label={
@@ -83,7 +83,7 @@ export const AnalyticsToggle = () => {
 					</Box>
 				}
 				labelPlacement="start"
-				sx={{ ml: 0 }}
+				sx={{ marginInlineStart: 0 }}
 			/>
 			<Dialog
 				open={showConfirmPopup}
diff --git a/modules/settings/assets/js/components/analytics/charts/line-chart.js b/modules/settings/assets/js/components/analytics/charts/line-chart.js
index 908f552f..a9521d14 100644
--- a/modules/settings/assets/js/components/analytics/charts/line-chart.js
+++ b/modules/settings/assets/js/components/analytics/charts/line-chart.js
@@ -30,7 +30,7 @@ export const LineChart = () => {
 						</Typography>
 					) : null
 				}
-				sx={{ pb: 0 }}
+				sx={{ paddingBlockEnd: 0 }}
 			/>
 			{showChart && (
 				<MuiLineChart
diff --git a/modules/settings/assets/js/components/analytics/charts/pie-chart.js b/modules/settings/assets/js/components/analytics/charts/pie-chart.js
index 58b6e48b..d7eee1d2 100644
--- a/modules/settings/assets/js/components/analytics/charts/pie-chart.js
+++ b/modules/settings/assets/js/components/analytics/charts/pie-chart.js
@@ -67,7 +67,7 @@ export const PieChart = () => {
 
 	return (
 		<Card variant="outlined" sx={{ height: '100%' }} ref={containerRef}>
-			<CardHeader title={<PieChartTitle />} sx={{ pb: 0 }} />
+			<CardHeader title={<PieChartTitle />} sx={{ paddingBlockEnd: 0 }} />
 			{showChart && (
 				<MuiPieChart
 					series={[
diff --git a/modules/settings/assets/js/components/analytics/charts/usage-table.js b/modules/settings/assets/js/components/analytics/charts/usage-table.js
index ce78a753..d64319a3 100644
--- a/modules/settings/assets/js/components/analytics/charts/usage-table.js
+++ b/modules/settings/assets/js/components/analytics/charts/usage-table.js
@@ -64,7 +64,9 @@ export const UsageTable = () => {
 								variant="head"
 								width="40%"
 								sx={
-									stats.elements.length === 0 ? { borderBottom: 'none' } : null
+									stats.elements.length === 0
+										? { borderBlockEnd: 'none' }
+										: null
 								}
 							>
 								{__('Features', 'pojo-accessibility')}
@@ -73,7 +75,9 @@ export const UsageTable = () => {
 								variant="head"
 								width="60%"
 								sx={
-									stats.elements.length === 0 ? { borderBottom: 'none' } : null
+									stats.elements.length === 0
+										? { borderBlockEnd: 'none' }
+										: null
 								}
 							>
 								{__('Times used', 'pojo-accessibility')}
@@ -109,7 +113,7 @@ export const UsageTable = () => {
 									page={currentPage}
 									rowsPerPage={TABLE_PER_PAGE}
 									rowsPerPageOptions={[]}
-									sx={{ borderBottom: 'none' }}
+									sx={{ borderBlockEnd: 'none' }}
 								/>
 							</TableRow>
 						</TableFooter>
diff --git a/modules/settings/assets/js/components/analytics/components/line-tooltip.js b/modules/settings/assets/js/components/analytics/components/line-tooltip.js
index 3fc12276..76ad6085 100644
--- a/modules/settings/assets/js/components/analytics/components/line-tooltip.js
+++ b/modules/settings/assets/js/components/analytics/components/line-tooltip.js
@@ -5,7 +5,7 @@ import { dateI18n } from '@wordpress/date';
 export const LineTooltip = (props) => {
 	const { dataIndex, axis, series } = props;
 	return series[0].data[dataIndex] ? (
-		<Paper sx={{ p: 2, pb: 1 }}>
+		<Paper sx={{ p: 2, paddingBlockEnd: 1 }}>
 			<Typography variant="body2" color="text.tertiary">
 				{dateI18n('d F', axis.data[dataIndex], false)}
 			</Typography>
diff --git a/modules/settings/assets/js/components/analytics/components/pie-tooltip.js b/modules/settings/assets/js/components/analytics/components/pie-tooltip.js
index e7ad8601..913ef996 100644
--- a/modules/settings/assets/js/components/analytics/components/pie-tooltip.js
+++ b/modules/settings/assets/js/components/analytics/components/pie-tooltip.js
@@ -5,7 +5,7 @@ import { styled } from '@elementor/ui/styles';
 export const PieTooltip = (props) => {
 	const { itemData, series } = props;
 	return (
-		<Paper sx={{ p: 2, pb: 1 }}>
+		<Paper sx={{ p: 2, paddingBlockEnd: 1 }}>
 			<StyledTitle
 				variant="body2"
 				color="text.tertiary"
@@ -24,7 +24,7 @@ const StyledTitle = styled(Typography, {
 	shouldForwardProp: (prop) => prop !== 'itemColor',
 })`
 	position: relative;
-	padding-left: 18px;
+	padding-inline-start: 18px;
 	&:before {
 		content: '';
 		position: absolute;
diff --git a/modules/settings/assets/js/components/analytics/skeleton/line-chart-skeleton.js b/modules/settings/assets/js/components/analytics/skeleton/line-chart-skeleton.js
index 72025c4c..b07bec41 100644
--- a/modules/settings/assets/js/components/analytics/skeleton/line-chart-skeleton.js
+++ b/modules/settings/assets/js/components/analytics/skeleton/line-chart-skeleton.js
@@ -32,7 +32,7 @@ export const LineChartSkeleton = ({ animated }) => (
 			}
 			sx={{ height: animated ? '100px' : 'auto', alignItems: 'start' }}
 		/>
-		<StyledCardContent sx={{ pt: 3, pr: 4 }}>
+		<StyledCardContent sx={{ paddingBlockStart: 3, paddingInlineEnd: 4 }}>
 			<ChartSkeleton width="489" height="194" />
 		</StyledCardContent>
 	</Card>
diff --git a/modules/settings/assets/js/components/analytics/skeleton/pie-chart-skeleton.js b/modules/settings/assets/js/components/analytics/skeleton/pie-chart-skeleton.js
index 547aedd1..17f2e010 100644
--- a/modules/settings/assets/js/components/analytics/skeleton/pie-chart-skeleton.js
+++ b/modules/settings/assets/js/components/analytics/skeleton/pie-chart-skeleton.js
@@ -40,13 +40,13 @@ export const PieChartSkeleton = ({ animated }) => {
 				}
 				sx={{ height: '60px', alignItems: 'start' }}
 			/>
-			<StyledCardContent ref={containerRef} sx={{ pt: 5 }}>
+			<StyledCardContent ref={containerRef} sx={{ paddingBlockStart: 5 }}>
 				<Stack
 					direction="row"
 					spacing={6}
 					alignItems="center"
 					justifyContent="center"
-					sx={{ pb: 4 }}
+					sx={{ paddingBlockEnd: 4 }}
 				>
 					<StyledCircle
 						variant="circular"
diff --git a/modules/settings/assets/js/components/analytics/skeleton/usage-table-skeleton.js b/modules/settings/assets/js/components/analytics/skeleton/usage-table-skeleton.js
index 31145f52..0de9fe00 100644
--- a/modules/settings/assets/js/components/analytics/skeleton/usage-table-skeleton.js
+++ b/modules/settings/assets/js/components/analytics/skeleton/usage-table-skeleton.js
@@ -25,7 +25,7 @@ export const UsageTableSkeleton = ({ animated }) => (
 			}
 			sx={{ height: '60px', alignItems: 'start' }}
 		/>
-		<StyledCardContent sx={{ pt: 3 }}>
+		<StyledCardContent sx={{ paddingBlockStart: 3 }}>
 			<Stack spacing={1}>
 				{Array.from({ length: 10 }).map((_, index) => (
 					<Stack key={index} direction="row" alignItems="center" spacing={8}>
@@ -33,7 +33,7 @@ export const UsageTableSkeleton = ({ animated }) => (
 							width={230}
 							height={25}
 							animation={animated ? 'wave' : false}
-							sx={{ mr: 6 }}
+							sx={{ marginInlineEnd: 6 }}
 						/>
 						<Skeleton
 							width={120}
diff --git a/modules/settings/assets/js/components/bottom-bar/index.js b/modules/settings/assets/js/components/bottom-bar/index.js
index 74bbd8bf..6aa9cdc2 100644
--- a/modules/settings/assets/js/components/bottom-bar/index.js
+++ b/modules/settings/assets/js/components/bottom-bar/index.js
@@ -78,5 +78,5 @@ const StyledContainer = styled(Box)`
 	justify-content: flex-end;
 
 	padding: ${({ theme }) => theme.spacing(2)};
-	border-top: 1px solid ${({ theme }) => theme.palette.divider};
+	border-block-start: 1px solid ${({ theme }) => theme.palette.divider};
 `;
diff --git a/modules/settings/assets/js/components/capabilities-item/pro-item-infotip.js b/modules/settings/assets/js/components/capabilities-item/pro-item-infotip.js
index 0314c176..e91b6331 100644
--- a/modules/settings/assets/js/components/capabilities-item/pro-item-infotip.js
+++ b/modules/settings/assets/js/components/capabilities-item/pro-item-infotip.js
@@ -154,7 +154,7 @@ const ProItemInfotip = ({
 export default ProItemInfotip;
 
 const StyledChip = styled(Chip)`
-	margin-left: ${({ theme }) => theme.spacing(1)};
+	margin-inline-start: ${({ theme }) => theme.spacing(1)};
 	height: 26px;
 	width: 26px;
 
diff --git a/modules/settings/assets/js/components/color-picker/index.js b/modules/settings/assets/js/components/color-picker/index.js
index e06f464c..2c06e0f7 100644
--- a/modules/settings/assets/js/components/color-picker/index.js
+++ b/modules/settings/assets/js/components/color-picker/index.js
@@ -15,7 +15,7 @@ const StyledHexColorInput = styled(HexColorInput)`
 	width: 100%;
 	border: 1px solid rgb(0 0 0 / 0.12);
 	border-radius: ${({ theme }) => theme.shape.borderRadius}px;
-	padding-left: 10px;
+	padding-inline-start: 10px;
 `;
 
 const ColorPicker = () => {
@@ -30,7 +30,7 @@ const ColorPicker = () => {
 	return (
 		<FormControl fullWidth>
 			<FormLabel id="color-picker-label" color="secondary">
-				<Typography variant="subtitle2" marginBottom={1} color="text.primary">
+				<Typography variant="subtitle2" marginBlockEnd={1} color="text.primary">
 					{__('Color', 'pojo-accessibility')}
 				</Typography>
 			</FormLabel>
@@ -45,12 +45,11 @@ const ColorPicker = () => {
 					className="widget-settings-color-picker"
 				/>
 
-				<Grid marginTop={2} display="flex">
+				<Grid marginBlockStart={2} display="flex">
 					<Box
 						padding={2}
-						sx={{ backgroundColor: iconDesign.color }}
+						sx={{ backgroundColor: iconDesign.color, marginInlineEnd: 1 }}
 						borderRadius={1}
-						marginRight={1}
 					/>
 
 					<StyledHexColorInput
diff --git a/modules/settings/assets/js/components/color-picker/style.css b/modules/settings/assets/js/components/color-picker/style.css
index 2898562a..5b5fcff2 100644
--- a/modules/settings/assets/js/components/color-picker/style.css
+++ b/modules/settings/assets/js/components/color-picker/style.css
@@ -4,7 +4,7 @@
 
 .widget-settings-color-picker .react-colorful__saturation {
 	border-radius: 0;
-	border-bottom: none;
+	border-block-end: none;
 }
 
 .widget-settings-color-picker .react-colorful__hue {
@@ -15,7 +15,7 @@
 .widget-settings-color-picker .react-colorful__alpha {
 	height: 14px;
 	border-radius: 100px;
-	margin-top: 10px;
+	margin-block-start: 10px;
 }
 
 .widget-settings-color-picker .react-colorful__pointer {
diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js
index b453bc15..2d74cbf3 100644
--- a/modules/settings/assets/js/components/connect-modal/index.js
+++ b/modules/settings/assets/js/components/connect-modal/index.js
@@ -66,8 +66,8 @@ const ConnectModal = () => {
 				<Typography
 					variant="h5"
 					color="text.primary"
-					marginTop={5}
-					marginBottom={1}
+					marginBlockStart={5}
+					marginBlockEnd={1}
 					id="connect-modal-title"
 				>
 					{__("Let's improve your site's accessibility", 'pojo-accessibility')}
@@ -124,7 +124,7 @@ const ConnectModal = () => {
 						size="large"
 						onClick={redirectToConnect}
 						fullWidth
-						sx={{ marginTop: 5 }}
+						sx={{ marginBlockStart: 5 }}
 					>
 						{__('Get started', 'pojo-accessibility')}
 					</Button>
diff --git a/modules/settings/assets/js/components/copy-link/index.js b/modules/settings/assets/js/components/copy-link/index.js
index 9401eb9a..1f529b7f 100644
--- a/modules/settings/assets/js/components/copy-link/index.js
+++ b/modules/settings/assets/js/components/copy-link/index.js
@@ -54,7 +54,7 @@ const CopyLink = ({ content }) => {
 				],
 			}}
 		>
-			<IconButton onClick={copyToClipboard} sx={{ marginLeft: 1 }}>
+			<IconButton onClick={copyToClipboard} sx={{ marginInlineStart: 1 }}>
 				<LinkIcon width="1em" height="1em" />
 			</IconButton>
 		</Tooltip>
diff --git a/modules/settings/assets/js/components/edit-link/index.js b/modules/settings/assets/js/components/edit-link/index.js
index 8cef2de5..ae9cf724 100644
--- a/modules/settings/assets/js/components/edit-link/index.js
+++ b/modules/settings/assets/js/components/edit-link/index.js
@@ -43,7 +43,7 @@ const EditLink = () => {
 		>
 			<IconButton
 				onClick={handleEdit}
-				sx={{ marginLeft: 1 }}
+				sx={{ marginInlineStart: 1 }}
 				aria-label="Edit accessibility statement page"
 			>
 				<EditIcon />
diff --git a/modules/settings/assets/js/components/help-menu/get-started-modal.js b/modules/settings/assets/js/components/help-menu/get-started-modal.js
index 5a5dc922..c848fc31 100644
--- a/modules/settings/assets/js/components/help-menu/get-started-modal.js
+++ b/modules/settings/assets/js/components/help-menu/get-started-modal.js
@@ -80,7 +80,11 @@ const GetStartedModal = () => {
 					referrerPolicy="strict-origin-when-cross-origin"
 					allowfullscreen
 				></iframe>
-				<DialogContentText variant="h5" color="text.primary" marginTop={2}>
+				<DialogContentText
+					variant="h5"
+					color="text.primary"
+					marginBlockStart={2}
+				>
 					{__('Getting started with Ally', 'pojo-accessibility')}
 				</DialogContentText>
 				<DialogContentText variant="body1">
diff --git a/modules/settings/assets/js/components/html-to-typography/index.js b/modules/settings/assets/js/components/html-to-typography/index.js
index 17f36be1..78235731 100644
--- a/modules/settings/assets/js/components/html-to-typography/index.js
+++ b/modules/settings/assets/js/components/html-to-typography/index.js
@@ -48,7 +48,7 @@ const HtmlToTypography = ({ htmlString, replacements }) => {
 					<Typography
 						variant={tagName === 'p' ? 'body2' : 'subtitle2'}
 						component={tagName}
-						marginBottom={1}
+						marginBlockEnd={1}
 						sx={node.attribs.class ? { textAlign: 'center' } : {}} //for correct render on preview
 						color={tagName === 'p' ? 'text.secondary' : 'text.primary'}
 					>
diff --git a/modules/settings/assets/js/components/icon-radius/index.js b/modules/settings/assets/js/components/icon-radius/index.js
index 908ec9f4..67412377 100644
--- a/modules/settings/assets/js/components/icon-radius/index.js
+++ b/modules/settings/assets/js/components/icon-radius/index.js
@@ -134,7 +134,7 @@ const IconRadius = () => {
 				color="secondary"
 				aria-label={__('Widget icon radius control', 'pojo-accessibility')}
 			>
-				<Typography variant="subtitle2" marginBottom={1}>
+				<Typography variant="subtitle2" marginBlockEnd={1}>
 					{__('Corner radius', 'pojo-accessibility')}
 				</Typography>
 			</FormLabel>
diff --git a/modules/settings/assets/js/components/icon-select/index.js b/modules/settings/assets/js/components/icon-select/index.js
index e7555afe..d0a1860f 100644
--- a/modules/settings/assets/js/components/icon-select/index.js
+++ b/modules/settings/assets/js/components/icon-select/index.js
@@ -26,7 +26,7 @@ const IconSelect = (props) => {
 				id="icon-select-radio-buttons-group-label"
 				color="secondary"
 			>
-				<Typography variant="subtitle2" marginBottom={1}>
+				<Typography variant="subtitle2" marginBlockEnd={1}>
 					{__('Icon', 'pojo-accessibility')}
 				</Typography>
 				<MediaUploader />
diff --git a/modules/settings/assets/js/components/icon-size/index.js b/modules/settings/assets/js/components/icon-size/index.js
index 3635c2a5..2a2f1052 100644
--- a/modules/settings/assets/js/components/icon-size/index.js
+++ b/modules/settings/assets/js/components/icon-size/index.js
@@ -26,7 +26,7 @@ const IconSize = (props) => {
 	return (
 		<FormControl>
 			<FormLabel id="icon-size-radio-buttons-group-label" color="secondary">
-				<Typography variant="subtitle2" marginBottom={1}>
+				<Typography variant="subtitle2" marginBlockEnd={1}>
 					{__('Size', 'pojo-accessibility')}
 				</Typography>
 			</FormLabel>
diff --git a/modules/settings/assets/js/components/my-account-menu/popup-menu.js b/modules/settings/assets/js/components/my-account-menu/popup-menu.js
index 669e8f52..c34fb3b3 100644
--- a/modules/settings/assets/js/components/my-account-menu/popup-menu.js
+++ b/modules/settings/assets/js/components/my-account-menu/popup-menu.js
@@ -138,7 +138,7 @@ export const PopupMenu = ({ closeAction, showUpgradeButton, ...menuProps }) => {
 							size="small"
 							fullWidth
 							color={isFree ? 'promotion' : 'secondary'}
-							sx={{ marginTop: 0.5 }}
+							sx={{ marginBlockStart: 0.5 }}
 						>
 							{isFree
 								? __('Upgrade plan', 'pojo-accessibility')
diff --git a/modules/settings/assets/js/components/onboarding-modal/index.js b/modules/settings/assets/js/components/onboarding-modal/index.js
index cb8106ea..f910cb91 100644
--- a/modules/settings/assets/js/components/onboarding-modal/index.js
+++ b/modules/settings/assets/js/components/onboarding-modal/index.js
@@ -74,7 +74,11 @@ const OnboardingModal = () => {
 					referrerPolicy="strict-origin-when-cross-origin"
 					allowfullscreen
 				></iframe>
-				<DialogContentText variant="h5" color="text.primary" marginTop={2}>
+				<DialogContentText
+					variant="h5"
+					color="text.primary"
+					marginBlockStart={2}
+				>
 					{__('See Ally’s new assistant in action', 'pojo-accessibility')}
 				</DialogContentText>
 				<DialogContentText>
diff --git a/modules/settings/assets/js/components/position-control/index.js b/modules/settings/assets/js/components/position-control/index.js
index a80b156a..9cb80b42 100644
--- a/modules/settings/assets/js/components/position-control/index.js
+++ b/modules/settings/assets/js/components/position-control/index.js
@@ -33,8 +33,8 @@ const StyledContainer = styled(Box, {
 })`
 	display: flex;
 	gap: ${({ theme }) => theme.spacing(1)};
-	margin-top: ${({ theme }) => theme.spacing(2)};
-	margin-bottom: ${({ theme, isError }) =>
+	margin-block-start: ${({ theme }) => theme.spacing(2)};
+	margin-block-end: ${({ theme, isError }) =>
 		isError ? theme.spacing(4) : 'initial'};
 
 	transition: all 100ms ease-in-out;
diff --git a/modules/settings/assets/js/components/post-connect-modal/index.js b/modules/settings/assets/js/components/post-connect-modal/index.js
index b1727d81..aed91f34 100644
--- a/modules/settings/assets/js/components/post-connect-modal/index.js
+++ b/modules/settings/assets/js/components/post-connect-modal/index.js
@@ -62,8 +62,8 @@ const PostConnectModal = () => {
 				<Typography
 					variant="h5"
 					color="text.primary"
-					marginTop={5}
-					marginBottom={1}
+					marginBlockStart={5}
+					marginBlockEnd={1}
 					id="post-connect-modal-title"
 				>
 					{__("You're all set", 'pojo-accessibility')}
@@ -73,7 +73,7 @@ const PostConnectModal = () => {
 					variant="body2"
 					sx={{ width: '500px', maxWidth: '100%' }}
 					color="text.primary"
-					marginBottom={5}
+					marginBlockEnd={5}
 					id="post-connect-modal-description"
 				>
 					{__(
diff --git a/modules/settings/assets/js/components/quota-bar/index.js b/modules/settings/assets/js/components/quota-bar/index.js
index f6aa11e8..85ec8fa6 100644
--- a/modules/settings/assets/js/components/quota-bar/index.js
+++ b/modules/settings/assets/js/components/quota-bar/index.js
@@ -109,5 +109,5 @@ const StyledOuterWrapper = styled(Box)`
 	flex-direction: column;
 	gap: ${({ theme }) => theme.spacing(1)};
 	width: 100%;
-	margin-bottom: ${({ theme }) => theme.spacing(1)};
+	margin-block-end: ${({ theme }) => theme.spacing(1)};
 `;
diff --git a/modules/settings/assets/js/components/quota-bar/quota-bar-group.js b/modules/settings/assets/js/components/quota-bar/quota-bar-group.js
index a44d031d..41c854f0 100644
--- a/modules/settings/assets/js/components/quota-bar/quota-bar-group.js
+++ b/modules/settings/assets/js/components/quota-bar/quota-bar-group.js
@@ -200,7 +200,7 @@ const StyledCardContent = styled(CardContent)`
 	background-color: transparent;
 
 	:last-child {
-		padding-bottom: 0;
+		padding-block-end: 0;
 	}
 `;
 
diff --git a/modules/settings/assets/js/components/sidebar-app-bar/index.js b/modules/settings/assets/js/components/sidebar-app-bar/index.js
index 6c0744ee..119c41c3 100644
--- a/modules/settings/assets/js/components/sidebar-app-bar/index.js
+++ b/modules/settings/assets/js/components/sidebar-app-bar/index.js
@@ -1,5 +1,6 @@
 import AppBar from '@elementor/ui/AppBar';
 import IconButton from '@elementor/ui/IconButton';
+import Rotate from '@elementor/ui/Rotate';
 import Toolbar from '@elementor/ui/Toolbar';
 import { useSettings } from '@ea11y/hooks';
 import { SquareRoundedChevronsLeft } from '@ea11y/icons';
@@ -20,11 +21,12 @@ const SidebarAppBar = () => {
 					onClick={() => setOpenSidebar(!openSidebar)}
 					size="small"
 				>
-					<SquareRoundedChevronsLeft
-						role="img"
-						aria-label={__('Toggle sidebar', 'pojo-accessibility')}
-						sx={{ rotate: !openSidebar ? '180deg' : '0' }}
-					/>
+					<Rotate in={!openSidebar}>
+						<SquareRoundedChevronsLeft
+							role="img"
+							aria-label={__('Toggle sidebar', 'pojo-accessibility')}
+						/>
+					</Rotate>
 				</IconButton>
 			</Toolbar>
 		</AppBar>
diff --git a/modules/settings/assets/js/components/sidebar-heading/index.js b/modules/settings/assets/js/components/sidebar-heading/index.js
index 92bff70e..4fd93655 100644
--- a/modules/settings/assets/js/components/sidebar-heading/index.js
+++ b/modules/settings/assets/js/components/sidebar-heading/index.js
@@ -1,4 +1,5 @@
 import ElementorAccessibilityIcon from '@elementor/icons/ElementorAccessibilityIcon';
+import Box from '@elementor/ui/Box';
 import Typography from '@elementor/ui/Typography';
 import { styled } from '@elementor/ui/styles';
 import { useSettings } from '@ea11y/hooks';
@@ -9,10 +10,12 @@ const SidebarHeading = () => {
 
 	return (
 		<StyledHeader>
-			<StyledHeaderIcon
-				aria-hidden={true}
-				sx={{ margin: openSidebar ? 0 : '0 auto' }}
-			/>
+			<StyledIconBox>
+				<ElementorAccessibilityIcon
+					aria-hidden={true}
+					sx={{ fontSize: '24px' }}
+				/>
+			</StyledIconBox>
 			{openSidebar && (
 				<Typography variant="subtitle1" as="div">
 					{__('Accessibility', 'pojo-accessibility')}
@@ -24,18 +27,17 @@ const SidebarHeading = () => {
 
 export default SidebarHeading;
 
-const StyledHeader = styled('div')`
+const StyledHeader = styled(Box)`
 	display: flex;
 	align-items: center;
 	gap: ${({ theme }) => theme.spacing(1.5)};
 	white-space: nowrap;
+	line-height: 0;
 	padding: 0;
 `;
 
-/* TODO: Replace the icon when marketing decide which icon to use */
-const StyledHeaderIcon = styled(ElementorAccessibilityIcon)`
-	font-size: 2.5rem;
-	padding: ${({ theme }) => theme.spacing(0.75)};
+const StyledIconBox = styled(Box)`
+	padding: ${({ theme }) => theme.spacing(1)};
 	border: 1px solid ${({ theme }) => theme.palette.divider};
 	border-radius: ${({ theme }) => theme.shape.borderRadius * 2}px;
 	color: rgb(0 0 0 / 0.54);
diff --git a/modules/settings/assets/js/components/sidebar-menu/menu-item.js b/modules/settings/assets/js/components/sidebar-menu/menu-item.js
index 3dbd3ee7..86e6f15b 100644
--- a/modules/settings/assets/js/components/sidebar-menu/menu-item.js
+++ b/modules/settings/assets/js/components/sidebar-menu/menu-item.js
@@ -17,13 +17,14 @@ import { usePluginSettingsContext } from '../../contexts/plugin-settings';
 const SidebarMenuItem = ({ keyName, item }) => {
 	const { openSidebar, selectedMenu, setSelectedMenu, planData } =
 		useSettings();
-	const { isElementorOne } = usePluginSettingsContext();
+	const { isElementorOne, isRTL } = usePluginSettingsContext();
 
 	const [expandedItems, setExpandedItems] = useState({ widget: true });
 	const [popupPosition, setPopupPosition] = useState({
 		popupPositionAbove: 0,
 		popupPositionBefore: 0,
 	});
+	const TooltipPlacement = isRTL ? 'left' : 'right';
 	const menuItemRef = useRef(null);
 	const key = keyName;
 
@@ -64,7 +65,6 @@ const SidebarMenuItem = ({ keyName, item }) => {
 	const updatePopupPosition = () => {
 		if (menuItemRef.current && !openSidebar && item?.children) {
 			const rect = menuItemRef.current.getBoundingClientRect();
-			const isRTL = document.dir === 'rtl';
 			setPopupPosition({
 				popupPositionAbove: rect.top,
 				// For RTL, calculate distance from the right edge of viewport
@@ -104,7 +104,7 @@ const SidebarMenuItem = ({ keyName, item }) => {
 			>
 				<Tooltip
 					title={item?.name}
-					placement="right"
+					placement={TooltipPlacement}
 					disableHoverListener={openSidebar || hasChildItems}
 				>
 					<ParentItemIcon
@@ -146,7 +146,7 @@ const SidebarMenuItem = ({ keyName, item }) => {
 					popupPosition={popupPosition}
 				>
 					{isSidebarCollapsed && <CollapsedMenuTitle primary={item.name} />}
-					<List disablePadding dense sx={{ pt: 1 }}>
+					<List disablePadding dense sx={{ paddingBlockStart: 1 }}>
 						{Object.entries(item?.children).map(([childKey, child]) => (
 							<ChildListItem key={childKey} dense>
 								<ChildItemButton
diff --git a/modules/settings/assets/js/components/sidebar-menu/tooltips/accessibility-statement.js b/modules/settings/assets/js/components/sidebar-menu/tooltips/accessibility-statement.js
index 8d134a27..327935b4 100644
--- a/modules/settings/assets/js/components/sidebar-menu/tooltips/accessibility-statement.js
+++ b/modules/settings/assets/js/components/sidebar-menu/tooltips/accessibility-statement.js
@@ -8,10 +8,13 @@ import Infotip from '@elementor/ui/Infotip';
 import Typography from '@elementor/ui/Typography';
 import { useSettings } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
+import { usePluginSettingsContext } from '../../../contexts/plugin-settings';
 
 const AccessibilityStatementTooltip = () => {
 	const { selectedMenu, setSelectedMenu, accessibilityStatementData } =
 		useSettings();
+	const { isRTL } = usePluginSettingsContext();
+	const TooltipPlacement = isRTL ? 'left' : 'right';
 
 	if (accessibilityStatementData?.link) {
 		return null;
@@ -51,7 +54,7 @@ const AccessibilityStatementTooltip = () => {
 	);
 
 	return (
-		<Infotip placement="right" content={TooltipCard} tabIndex="0">
+		<Infotip placement={TooltipPlacement} content={TooltipCard} tabIndex="0">
 			<InfoCircleIcon color="info" sx={{ ml: 1 }} fontSize="small" />
 		</Infotip>
 	);
diff --git a/modules/settings/assets/js/components/sidebar-menu/tooltips/analytics.js b/modules/settings/assets/js/components/sidebar-menu/tooltips/analytics.js
index ea24d28a..362912fe 100644
--- a/modules/settings/assets/js/components/sidebar-menu/tooltips/analytics.js
+++ b/modules/settings/assets/js/components/sidebar-menu/tooltips/analytics.js
@@ -10,11 +10,14 @@ import { useSettings } from '@ea11y/hooks';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useAnalyticsContext } from '../../../contexts/analytics-context';
+import { usePluginSettingsContext } from '../../../contexts/plugin-settings';
 
 const AnalyticsTooltip = () => {
 	const { setSelectedMenu } = useSettings();
+	const { isRTL } = usePluginSettingsContext();
 	const { handleAnalyticsToggle, isAnalyticsEnabled } = useAnalyticsContext();
 	const [isOpen, setIsOpen] = useState(false);
+	const TooltipPlacement = isRTL ? 'left' : 'right';
 
 	// Don't show tooltip if analytics is already enabled
 	if (isAnalyticsEnabled) {
@@ -68,7 +71,7 @@ const AnalyticsTooltip = () => {
 
 	return (
 		<Infotip
-			placement="right"
+			placement={TooltipPlacement}
 			content={TooltipCard}
 			tabIndex="0"
 			open={isOpen}
@@ -78,7 +81,7 @@ const AnalyticsTooltip = () => {
 		>
 			<InfoCircleIcon
 				color="info"
-				sx={{ ml: 1 }}
+				sx={{ marginInlineStart: 1 }}
 				onMouseEnter={handleOpen}
 				onFocus={handleOpen}
 				fontSize="small"
diff --git a/modules/settings/assets/js/components/sitemap-settings/index.js b/modules/settings/assets/js/components/sitemap-settings/index.js
index d95426f8..cd462ec9 100644
--- a/modules/settings/assets/js/components/sitemap-settings/index.js
+++ b/modules/settings/assets/js/components/sitemap-settings/index.js
@@ -59,7 +59,7 @@ const SitemapSettings = ({ sitemap }) => {
 				</AccordionSummaryIcon>
 				<ListItemText
 					primary={sitemap?.title}
-					sx={{ flexGrow: 0, marginRight: 1 }}
+					sx={{ flexGrow: 0, marginInlineEnd: 1 }}
 					id={`ea11y-sitemap-toggle`}
 				/>
 			</StyledAccordionSummary>
@@ -77,7 +77,7 @@ const SitemapSettings = ({ sitemap }) => {
 									)}
 								</Typography>
 							}
-							placement="right"
+							placement="top"
 							arrow={true}
 						>
 							<InfoCircleIcon fontSize="small" />
@@ -114,7 +114,8 @@ const StyledAccordion = styled(Accordion)`
 const StyledAccordionSummary = styled(AccordionSummary)`
 	padding: 0;
 	min-height: auto;
-	justify-content: left;
+	justify-content: flex-start;
+
 	&.Mui-expanded {
 		min-height: auto;
 	}
@@ -138,7 +139,7 @@ const StyledFormLabel = styled(FormLabel)`
 	align-items: center;
 	gap: 8px;
 	white-space: nowrap;
-	padding-top: 7px;
+	padding-block-start: 7px;
 `;
 
 const StyledTextField = styled(TextField)`
diff --git a/modules/settings/assets/js/components/skip-to-content-settings/index.js b/modules/settings/assets/js/components/skip-to-content-settings/index.js
index e9b573d3..f490c181 100644
--- a/modules/settings/assets/js/components/skip-to-content-settings/index.js
+++ b/modules/settings/assets/js/components/skip-to-content-settings/index.js
@@ -87,14 +87,14 @@ const SkipToContentSettings = () => {
 						tabIndex="0"
 						content={
 							<Box sx={{ p: 2, maxWidth: '250px' }}>
-								<Typography variant="subtitle2" sx={{ mb: 1 }}>
+								<Typography variant="subtitle2" sx={{ marginBlockEnd: 1 }}>
 									{__('Skip to main content', 'pojo-accessibility')}
 								</Typography>
 
 								<Typography variant="body2">{titleTooltipText}</Typography>
 							</Box>
 						}
-						placement="right"
+						placement="top"
 						arrow={true}
 					>
 						<InfoCircleIcon fontSize="small" />
@@ -130,14 +130,14 @@ const SkipToContentSettings = () => {
 						tabIndex="0"
 						content={
 							<Box sx={{ p: 2, maxWidth: '250px' }}>
-								<Typography variant="subtitle2" sx={{ mb: 1 }}>
+								<Typography variant="subtitle2" sx={{ marginBlockEnd: 1 }}>
 									{__('Skip to main content', 'pojo-accessibility')}
 								</Typography>
 
 								<Typography variant="body2">{idTooltipText}</Typography>
 							</Box>
 						}
-						placement="right"
+						placement="top"
 						arrow={true}
 					>
 						<InfoCircleIcon fontSize="small" />
@@ -161,7 +161,7 @@ const SkipToContentSettings = () => {
 							as="p"
 							variant="caption"
 							color="error"
-							sx={{ marginTop: '4px' }}
+							sx={{ marginBlockStart: '4px' }}
 						>
 							{__('Please enter valid ID!', 'pojo-accessibility')}
 						</Typography>
@@ -176,8 +176,7 @@ const StyledCard = styled(Card)`
 	padding: ${({ theme }) => theme.spacing(2)};
 	margin-block: ${({ theme }) => theme.spacing(4)};
 	max-width: 1200px;
-	margin-left: auto;
-	margin-right: auto;
+	margin-inline: auto;
 `;
 
 const StyledBox = styled(Box)`
@@ -198,7 +197,7 @@ const StyledFormItem = styled(Box)`
 	gap: 16px;
 	align-items: flex-start;
 	justify-content: start;
-	padding-top: 16px;
+	padding-block-start: 16px;
 `;
 
 const StyledFormLabel = styled(FormLabel)`
@@ -206,7 +205,7 @@ const StyledFormLabel = styled(FormLabel)`
 	align-items: center;
 	gap: 8px;
 	white-space: nowrap;
-	padding-top: 7px;
+	padding-block-start: 7px;
 `;
 
 const StyledTextField = styled(TextField)`
diff --git a/modules/settings/assets/js/components/statement-generator/index.js b/modules/settings/assets/js/components/statement-generator/index.js
index e4cbd0a6..9acf9cab 100644
--- a/modules/settings/assets/js/components/statement-generator/index.js
+++ b/modules/settings/assets/js/components/statement-generator/index.js
@@ -166,7 +166,7 @@ const StatementGenerator = ({ open, close }) => {
 							<Typography
 								variant="body2"
 								color="text.secondary"
-								marginBottom={3}
+								marginBlockEnd={3}
 							>
 								{__(
 									'This will generate an accessibility statement that you can preview on the right.',
@@ -260,7 +260,7 @@ const StatementGenerator = ({ open, close }) => {
 							<Typography
 								variant="subtitle1"
 								color="text.primary"
-								marginBottom={6}
+								marginBlockEnd={6}
 							>
 								{__(
 									'Preview your accessibility statement',
diff --git a/modules/settings/assets/js/components/upgrade-modal/index.js b/modules/settings/assets/js/components/upgrade-modal/index.js
index 748589c9..a2992877 100644
--- a/modules/settings/assets/js/components/upgrade-modal/index.js
+++ b/modules/settings/assets/js/components/upgrade-modal/index.js
@@ -40,7 +40,7 @@ const UpgradeModal = () => {
 								variant="h5"
 								id="upgrade-modal-title"
 								align="center"
-								sx={{ mb: 1 }}
+								sx={{ marginBlockEnd: 1 }}
 							>
 								{__(
 									'Discover how visitors use your widget',
diff --git a/modules/settings/assets/js/components/url-mismatch-modal/index.js b/modules/settings/assets/js/components/url-mismatch-modal/index.js
index aaf06455..6fa44390 100644
--- a/modules/settings/assets/js/components/url-mismatch-modal/index.js
+++ b/modules/settings/assets/js/components/url-mismatch-modal/index.js
@@ -90,11 +90,11 @@ const UrlMismatchModal = () => {
 
 					<StyledGridContainerContent>
 						<StyledCard>
-							<StyledCardTitle variant="h6" marginBottom={3}>
+							<StyledCardTitle variant="h6" marginBlockEnd={3}>
 								{__('Update the connected URL', 'pojo-accessibility')}
 							</StyledCardTitle>
 
-							<StyledCardSubtitle variant="body1" marginBottom={3}>
+							<StyledCardSubtitle variant="body1" marginBlockEnd={3}>
 								{__(
 									'For cases where you’re moving the same site from staging to production or changing from HTTP to HTTPs.',
 									'pojo-accessibility',
@@ -111,11 +111,11 @@ const UrlMismatchModal = () => {
 						</StyledCard>
 
 						<StyledCard>
-							<StyledCardTitle variant="h6" marginBottom={3}>
+							<StyledCardTitle variant="h6" marginBlockEnd={3}>
 								{__('Connect the URL as a new site', 'pojo-accessibility')}
 							</StyledCardTitle>
 
-							<StyledCardSubtitle variant="body1" marginBottom={3}>
+							<StyledCardSubtitle variant="body1" marginBlockEnd={3}>
 								{__(
 									'For when you want to connect the plugin to a new site entirely—deleting the previous history.',
 									'pojo-accessibility',
@@ -177,7 +177,7 @@ const StyledCard = styled(Box)`
 	}
 
 	& span {
-		margin-right: 24px;
+		margin-inline-end: 24px;
 	}
 `;
 
@@ -196,33 +196,31 @@ const StyledGridContainer = styled(Grid)`
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	padding-left: ${({ theme }) => theme.spacing(8)};
-	padding-right: ${({ theme }) => theme.spacing(8)};
+	padding-inline: ${({ theme }) => theme.spacing(8)};
 `;
 
 const StyledGridContainerContent = styled(Grid)`
 	justify-content: space-between;
 	display: flex;
-	margin-top: 80px;
-	margin-bottom: 80px;
+	margin-block: 80px;
 `;
 
 const StyledTitle = styled(Typography)`
 	color: ${({ theme }) => theme.palette.text.primary};
-	margin-top: ${({ theme }) => theme.spacing(5)};
-	margin-bottom: ${({ theme }) => theme.spacing(1)};
+	margin-block-start: ${({ theme }) => theme.spacing(5)};
+	margin-block-end: ${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledSubtitle = styled(Typography)`
 	color: ${({ theme }) => theme.palette.text.secondary};
-	margin-bottom: ${({ theme }) => theme.spacing(1)};
+	margin-block-end: ${({ theme }) => theme.spacing(1)};
 	text-align: center;
 	width: 70%;
 `;
 
 const StyledConfirmDialog = styled(ConfirmDialog)`
-	margin-left: 10%;
+	margin-inline-start: 10%;
 	& .MuiDialogContent-dividers {
-		border-bottom: none;
+		border-block-end: none;
 	}
 `;
diff --git a/modules/settings/assets/js/components/widget-activation-settings/index.js b/modules/settings/assets/js/components/widget-activation-settings/index.js
index 408f277d..16a4d987 100644
--- a/modules/settings/assets/js/components/widget-activation-settings/index.js
+++ b/modules/settings/assets/js/components/widget-activation-settings/index.js
@@ -57,7 +57,7 @@ const WidgetActivationSettings = () => {
 								</Typography>
 							</Box>
 						}
-						placement="right"
+						placement="top"
 						arrow={true}
 					>
 						<InfoCircleIcon fontSize="small" />
diff --git a/modules/settings/assets/js/icons/accessibility-controls.js b/modules/settings/assets/js/icons/accessibility-controls.js
index 5c3f70d2..0456a729 100644
--- a/modules/settings/assets/js/icons/accessibility-controls.js
+++ b/modules/settings/assets/js/icons/accessibility-controls.js
@@ -8,7 +8,7 @@ function AccessibilityControlsIcon({ size }, props) {
 		<SvgIcon
 			viewBox="0 0 22 22"
 			fill="none"
-			sx={{ marginRight: 0, fontSize: size, paddingRight: '1px' }}
+			sx={{ marginInlineEnd: 0, fontSize: size, paddingInlineEnd: '1px' }}
 			{...props}
 		>
 			<path
diff --git a/modules/settings/assets/js/icons/accessibility-person.js b/modules/settings/assets/js/icons/accessibility-person.js
index 4eff5205..827ee435 100644
--- a/modules/settings/assets/js/icons/accessibility-person.js
+++ b/modules/settings/assets/js/icons/accessibility-person.js
@@ -9,7 +9,7 @@ function AccessibilityPersonIcon({ size }, props) {
 		<SvgIcon
 			viewBox="0 0 19 25"
 			fill="none"
-			sx={{ marginRight: 0, fontSize: size, paddingRight: '1px' }}
+			sx={{ marginInlineEnd: 0, fontSize: size, paddingInlineEnd: '1px' }}
 			{...props}
 		>
 			<path
diff --git a/modules/settings/assets/js/layouts/icon-design-settings.js b/modules/settings/assets/js/layouts/icon-design-settings.js
index ebdd6cdd..2b812f24 100644
--- a/modules/settings/assets/js/layouts/icon-design-settings.js
+++ b/modules/settings/assets/js/layouts/icon-design-settings.js
@@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n';
 const IconDesignSettings = (props) => {
 	return (
 		<StyledWrapper {...props}>
-			<Box marginBottom={2}>
+			<Box sx={{ marginBlockEnd: 2 }}>
 				<Typography variant="subtitle1">
 					{__('Style', 'pojo-accessibility')}
 				</Typography>
@@ -49,8 +49,7 @@ const StyledWrapper = styled(Box)`
 	padding: ${({ theme }) => theme.spacing(2)};
 	border: 1px solid ${({ theme }) => theme.palette.divider};
 	border-radius: ${({ theme }) => theme.shape.borderRadius}px;
-	margin-left: auto;
-	margin-right: auto;
+	margin-inline: auto;
 	max-width: 1200px;
 `;
 
diff --git a/modules/settings/assets/js/layouts/menu-settings.js b/modules/settings/assets/js/layouts/menu-settings.js
index 37521431..50082fd9 100644
--- a/modules/settings/assets/js/layouts/menu-settings.js
+++ b/modules/settings/assets/js/layouts/menu-settings.js
@@ -19,7 +19,7 @@ import { MENU_SETTINGS } from '../constants/menu-settings';
 const StyledCardContent = styled(CardContent)`
 	height: 55vh;
 	overflow: auto;
-	margin-bottom: ${({ theme }) => theme.spacing(2)};
+	margin-block-end: ${({ theme }) => theme.spacing(2)};
 	padding: 0 ${({ theme }) => theme.spacing(2)};
 `;
 
diff --git a/modules/settings/assets/js/layouts/position-settings-desktop.js b/modules/settings/assets/js/layouts/position-settings-desktop.js
index ed6c0273..1bb90afe 100644
--- a/modules/settings/assets/js/layouts/position-settings-desktop.js
+++ b/modules/settings/assets/js/layouts/position-settings-desktop.js
@@ -39,13 +39,13 @@ const PositionSettingsDesktop = () => {
 	};
 
 	const hideOnDesktopLabel = (
-		<Typography variant="subtitle2" marginRight={2} color="text.primary">
+		<Typography variant="subtitle2" marginInlineEnd={2} color="text.primary">
 			{__('Hide on desktop', 'pojo-accessibility')}
 		</Typography>
 	);
 
 	const exactPositionLabel = (
-		<Typography variant="subtitle2" color="text.primary" marginRight={2}>
+		<Typography variant="subtitle2" color="text.primary" marginInlineEnd={2}>
 			{__('Exact position', 'pojo-accessibility')}
 		</Typography>
 	);
@@ -56,7 +56,7 @@ const PositionSettingsDesktop = () => {
 				label={hideOnDesktopLabel}
 				labelPlacement="start"
 				control={<Switch color="info" size="small" />}
-				sx={{ marginLeft: 2, marginBottom: 3 }}
+				sx={{ marginInlineStart: 2, marginBlockEnd: 3 }}
 				onChange={() => toggleVisibility('desktop')}
 				checked={iconPosition.desktop.hidden}
 			/>
@@ -69,7 +69,7 @@ const PositionSettingsDesktop = () => {
 							label={exactPositionLabel}
 							labelPlacement="start"
 							control={<Switch color="info" size="small" />}
-							sx={{ marginLeft: 0 }}
+							sx={{ marginInlineStart: 0 }}
 							onChange={() => toggleExactPosition('desktop')}
 							checked={iconPosition.desktop?.enableExactPosition}
 						/>
@@ -77,7 +77,7 @@ const PositionSettingsDesktop = () => {
 						<Typography
 							id="ea11y-desktop-position-settings"
 							variant="body2"
-							sx={{ marginTop: 2, marginBottom: 1 }}
+							sx={{ marginBlockStart: 2, marginBlockEnd: 1 }}
 						>
 							{__(
 								'Exact positioning, 5 – 500 px are permitted values:',
diff --git a/modules/settings/assets/js/layouts/position-settings-mobile.js b/modules/settings/assets/js/layouts/position-settings-mobile.js
index 6262db2d..1d262f02 100644
--- a/modules/settings/assets/js/layouts/position-settings-mobile.js
+++ b/modules/settings/assets/js/layouts/position-settings-mobile.js
@@ -37,13 +37,13 @@ const PositionSettingsMobile = () => {
 	};
 
 	const hideOnMobileLabel = (
-		<Typography variant="subtitle2" color="text.primary" marginRight={2}>
+		<Typography variant="subtitle2" color="text.primary" marginInlineEnd={2}>
 			{__('Hide on mobile', 'pojo-accessibility')}
 		</Typography>
 	);
 
 	const exactPositionLabel = (
-		<Typography variant="subtitle2" color="text.primary" marginRight={2}>
+		<Typography variant="subtitle2" color="text.primary" marginInlineEnd={2}>
 			{__('Exact position', 'pojo-accessibility')}
 		</Typography>
 	);
@@ -54,7 +54,7 @@ const PositionSettingsMobile = () => {
 				label={hideOnMobileLabel}
 				labelPlacement="start"
 				control={<Switch color="info" size="small" />}
-				sx={{ marginLeft: 2, marginBottom: 3 }}
+				sx={{ marginInlineStart: 2, marginBlockEnd: 3 }}
 				onChange={() => toggleVisibility('mobile')}
 				checked={iconPosition.mobile.hidden}
 			/>
@@ -66,14 +66,14 @@ const PositionSettingsMobile = () => {
 							label={exactPositionLabel}
 							labelPlacement="start"
 							control={<Switch color="info" size="small" />}
-							sx={{ marginLeft: 0 }}
+							sx={{ marginInlineStart: 0 }}
 							onChange={() => toggleExactPosition('mobile')}
 							checked={iconPosition.mobile?.enableExactPosition}
 						/>
 						<Typography
 							id="ea11y-mobile-position-settings"
 							variant="body2"
-							sx={{ marginTop: 2, marginBottom: 1 }}
+							sx={{ marginBlockStart: 2, marginBlockEnd: 1 }}
 						>
 							{__(
 								'Exact positioning, 5 – 500 px are permitted values:',
diff --git a/modules/settings/assets/js/layouts/position-settings.js b/modules/settings/assets/js/layouts/position-settings.js
index 42527eed..ebaf6eff 100644
--- a/modules/settings/assets/js/layouts/position-settings.js
+++ b/modules/settings/assets/js/layouts/position-settings.js
@@ -30,7 +30,7 @@ export const PositionSettings = (props) => {
 
 	return (
 		<StyledWrapper {...props}>
-			<Box marginBottom={2}>
+			<Box sx={{ marginBlockEnd: 2 }}>
 				<Typography variant="subtitle1">
 					{__('Position', 'pojo-accessibility')}
 				</Typography>
@@ -44,7 +44,7 @@ export const PositionSettings = (props) => {
 			<Box padding={2}>
 				<Tabs
 					value={currentTab}
-					sx={{ borderBottom: 'none', height: '65px' }}
+					sx={{ borderBlockEnd: 'none', height: '65px' }}
 					indicatorColor="secondary"
 					textColor="secondary"
 				>
@@ -84,7 +84,6 @@ const StyledWrapper = styled(Grid)`
 	padding: ${({ theme }) => theme.spacing(2)};
 	border: 1px solid ${({ theme }) => theme.palette.divider};
 	border-radius: ${({ theme }) => theme.shape.borderRadius}px;
-	margin-left: auto;
-	margin-right: auto;
+	margin-inline: auto;
 	max-width: 1200px;
 `;
diff --git a/modules/settings/assets/js/layouts/quota-bar.js b/modules/settings/assets/js/layouts/quota-bar.js
index ce05fdfa..e21e972f 100644
--- a/modules/settings/assets/js/layouts/quota-bar.js
+++ b/modules/settings/assets/js/layouts/quota-bar.js
@@ -12,10 +12,13 @@ import {
 import { PopupMenu, QuotaBarGroup, QuotaIndicator } from '@ea11y/components';
 import { useSavedSettings, useSettings } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
+import { usePluginSettingsContext } from '../contexts/plugin-settings';
 
 const QuotaBar = () => {
 	const { openSidebar } = useSettings();
 	const { loading, isElementorOne } = useSavedSettings();
+	const { isRTL } = usePluginSettingsContext();
+	const TooltipPlacement = isRTL ? 'left' : 'right';
 
 	const quotaPopupMenuState = usePopupState({
 		variant: 'popover',
@@ -33,7 +36,10 @@ const QuotaBar = () => {
 	if (!openSidebar) {
 		return (
 			<StyledBox>
-				<Tooltip title={__('My account', 'site-mailer')} placement="right">
+				<Tooltip
+					title={__('My account', 'site-mailer')}
+					placement={TooltipPlacement}
+				>
 					<StyledIconButton {...bindTrigger(quotaPopupMenuState)}>
 						<CalendarDollarIcon sx={{ color: 'common.black' }} />
 						<QuotaIndicator />
diff --git a/modules/settings/assets/js/layouts/quota-notices.js b/modules/settings/assets/js/layouts/quota-notices.js
index 08e81e6d..95c2f3bc 100644
--- a/modules/settings/assets/js/layouts/quota-notices.js
+++ b/modules/settings/assets/js/layouts/quota-notices.js
@@ -100,7 +100,7 @@ const QuotaNotices = () => {
 				<AlertAction
 					variant="outlined"
 					onClick={() => handleUpgradeClick('80')}
-					sx={{ marginTop: 1 }}
+					sx={{ marginBlockStart: 1 }}
 				>
 					{__('Upgrade now', 'pojo-accessibility')}
 				</AlertAction>
@@ -134,7 +134,7 @@ const QuotaNotices = () => {
 				<AlertAction
 					variant="outlined"
 					onClick={() => handleUpgradeClick('95')}
-					sx={{ marginTop: 1 }}
+					sx={{ marginBlockStart: 1 }}
 				>
 					{__('Upgrade now', 'pojo-accessibility')}
 				</AlertAction>
@@ -168,7 +168,7 @@ const QuotaNotices = () => {
 				<AlertAction
 					variant="outlined"
 					onClick={() => handleUpgradeClick('100')}
-					sx={{ marginTop: 1 }}
+					sx={{ marginBlockStart: 1 }}
 				>
 					{__('Upgrade now', 'pojo-accessibility')}
 				</AlertAction>
@@ -200,7 +200,7 @@ const QuotaNotices = () => {
 				<AlertAction
 					variant="outlined"
 					onClick={() => handleUpgradeClick('100')}
-					sx={{ marginTop: 1 }}
+					sx={{ marginBlockStart: 1 }}
 				>
 					{__('Upgrade now', 'pojo-accessibility')}
 				</AlertAction>
diff --git a/modules/settings/assets/js/layouts/sidebar.js b/modules/settings/assets/js/layouts/sidebar.js
index 0697da26..5b0e11e3 100644
--- a/modules/settings/assets/js/layouts/sidebar.js
+++ b/modules/settings/assets/js/layouts/sidebar.js
@@ -2,6 +2,7 @@ import ChevronLeftIcon from '@elementor/icons/ChevronLeftIcon';
 import Divider from '@elementor/ui/Divider';
 import Drawer from '@elementor/ui/Drawer';
 import IconButton from '@elementor/ui/IconButton';
+import Rotate from '@elementor/ui/Rotate';
 import { styled } from '@elementor/ui/styles';
 import { SidebarHeading, SidebarMenu } from '@ea11y/components';
 import { useSettings } from '@ea11y/hooks';
@@ -18,18 +19,16 @@ const Sidebar = () => {
 			variant="permanent"
 			open={openSidebar}
 			role="navigation"
-			aria-label={__('Sidebar', 'pojo-accessibility')}
+			aria-label={__('Plugin sidebar', 'pojo-accessibility')}
 		>
 			<StyledToggleButton
 				onClick={() => setOpenSidebar(!openSidebar)}
 				size="small"
 				aria-label={__('Toggle sidebar', 'pojo-accessibility')}
 			>
-				<ChevronLeftIcon
-					aria-hidden={true}
-					fontSize="tiny"
-					sx={{ rotate: !openSidebar ? '180deg' : '0' }}
-				/>
+				<Rotate in={!openSidebar}>
+					<ChevronLeftIcon aria-hidden={true} fontSize="tiny" />
+				</Rotate>
 			</StyledToggleButton>
 
 			<SidebarHeaderWrapper>
diff --git a/modules/settings/assets/js/layouts/statement-link/index.js b/modules/settings/assets/js/layouts/statement-link/index.js
index bfcbed3c..234e928a 100644
--- a/modules/settings/assets/js/layouts/statement-link/index.js
+++ b/modules/settings/assets/js/layouts/statement-link/index.js
@@ -26,7 +26,7 @@ import { WIDGET_PREVIEW_ID } from '../../constants';
 import WidgetPreviewSkeleton from './preview-skeleton';
 
 const StyledPreviewContainer = styled(Box)`
-	margin-top: ${({ theme }) => theme.spacing(2)};
+	margin-block-start: ${({ theme }) => theme.spacing(2)};
 
 	border-radius: ${({ theme }) => theme.shape.borderRadius}px;
 	border: 1px solid ${({ theme }) => theme.palette.divider};
@@ -136,21 +136,25 @@ const StatementLink = () => {
 	};
 
 	return (
-		<Card elevation={0} variant="outlined" sx={{ marginTop: 1, width: '100%' }}>
+		<Card
+			elevation={0}
+			variant="outlined"
+			sx={{ marginBlockStart: 1, width: '100%' }}
+		>
 			<CardHeader
 				title={__('Statement link', 'pojo-accessibility')}
 				subheader={__(
 					'Link your accessibility statement page to your accessibility widget.',
 					'pojo-accessibility',
 				)}
-				sx={{ borderBottom: '1px solid', borderBottomColor: 'divider' }}
+				sx={{ borderBlockEnd: '1px solid rgb(0 0 0 / 0.12)' }}
 			/>
 
 			<CardContent>
 				<Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={5}>
 					<Box display="flex" flexDirection="column">
-						<FormControl fullWidth sx={{ marginBottom: 2 }}>
-							<FormLabel sx={{ marginBottom: 1 }}>
+						<FormControl fullWidth sx={{ marginBlockEnd: 2 }}>
+							<FormLabel sx={{ marginBlockEnd: 1 }}>
 								<Typography variant="subtitle2" color="text.primary">
 									{__('Choose which page to link', 'pojo-accessibility')}
 								</Typography>
@@ -180,7 +184,7 @@ const StatementLink = () => {
 						</FormControl>
 
 						<FormControl fullWidth>
-							<FormLabel sx={{ marginBottom: 2, marginTop: 2 }}>
+							<FormLabel sx={{ marginBlockEnd: 2, marginBlockStart: 2 }}>
 								<Typography variant="subtitle2" color="text.primary">
 									{__('Want to hide the link?', 'pojo-accessibility')}
 								</Typography>
@@ -193,10 +197,14 @@ const StatementLink = () => {
 									<StyledSwitch
 										color="info"
 										size="small"
-										sx={{ marginLeft: 3 }}
+										sx={{ marginInlineStart: 3 }}
 									/>
 								}
-								sx={{ marginBottom: 3, alignSelf: 'start', ml: 0 }}
+								sx={{
+									alignSelf: 'start',
+									marginBlockEnd: 3,
+									marginInlineStart: 0,
+								}}
 								onChange={onHideLink}
 								checked={accessibilityStatementData?.hideLink}
 							/>
diff --git a/modules/settings/assets/js/layouts/widget-preview/index.js b/modules/settings/assets/js/layouts/widget-preview/index.js
index b7e83956..ee6e2276 100644
--- a/modules/settings/assets/js/layouts/widget-preview/index.js
+++ b/modules/settings/assets/js/layouts/widget-preview/index.js
@@ -10,9 +10,8 @@ import { WIDGET_PREVIEW_ID } from '../../constants';
 import WidgetPreviewSkeleton from './preview-skeleton';
 
 const StyledPreview = styled(CardContent)`
-	margin-right: auto;
-	margin-left: auto;
-	margin-top: ${({ theme }) => theme.spacing(4)};
+	margin-inline: auto;
+	margin-block-start: ${({ theme }) => theme.spacing(4)};
 	padding: 0 24px;
 
 	overflow: auto;
@@ -55,7 +54,7 @@ const WidgetPreview = () => {
 							)}
 						</Typography>
 					}
-					sx={{ paddingBottom: 0 }}
+					sx={{ paddingBlockEnd: 0 }}
 				/>
 
 				<StyledPreview id={WIDGET_PREVIEW_ID}>
diff --git a/modules/settings/assets/js/pages/accessibility-statement.js b/modules/settings/assets/js/pages/accessibility-statement.js
index 5d795649..1c36dfbf 100644
--- a/modules/settings/assets/js/pages/accessibility-statement.js
+++ b/modules/settings/assets/js/pages/accessibility-statement.js
@@ -5,6 +5,7 @@ import FormLabel from '@elementor/ui/FormLabel';
 import Link from '@elementor/ui/Link';
 import Radio from '@elementor/ui/Radio';
 import RadioGroup from '@elementor/ui/RadioGroup';
+import Rotate from '@elementor/ui/Rotate';
 import Typography from '@elementor/ui/Typography';
 import { styled } from '@elementor/ui/styles';
 import { StatementGenerator } from '@ea11y/components';
@@ -26,6 +27,7 @@ import { mixpanelEvents, mixpanelService } from '@ea11y-apps/global/services';
 import { injectTemplateVars } from '@ea11y-apps/global/utils/inject-template-vars';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { usePluginSettingsContext } from '../contexts/plugin-settings';
 
 const AccessibilityStatement = () => {
 	const { accessibilityStatementData } = useSettings();
@@ -34,6 +36,7 @@ const AccessibilityStatement = () => {
 	// Store statement option - generate or existing
 	const [statementOption, setStatementOption] = useState('');
 	const [showStatementLink, setShowStatementLink] = useState(false);
+	const { isRTL } = usePluginSettingsContext();
 
 	useEffect(() => {
 		mixpanelService.sendEvent(mixpanelEvents.pageView, {
@@ -126,8 +129,8 @@ const AccessibilityStatement = () => {
 										variant="h6"
 										color="text.primary"
 										align="center"
-										marginBottom="4px"
-										marginTop={4}
+										marginBlockEnd="4px"
+										marginBlockStart={4}
 									>
 										{__(
 											'Need an accessibility statement?',
@@ -138,7 +141,7 @@ const AccessibilityStatement = () => {
 									<Typography
 										variant="body2"
 										color="text.secondary"
-										marginBottom={3}
+										marginBlockEnd={3}
 										align="center"
 									>
 										{__(
@@ -175,7 +178,7 @@ const AccessibilityStatement = () => {
 									>
 										<AccessibilityStatementCreateIcon />
 
-										<Typography marginTop={1}>
+										<Typography marginBlockStart={1}>
 											{__('Yes, I need one', 'pojo-accessibility')}
 										</Typography>
 
@@ -199,7 +202,7 @@ const AccessibilityStatement = () => {
 									>
 										<AccessibilityStatementExistingIcon />
 
-										<Typography marginTop={1}>
+										<Typography marginBlockStart={1}>
 											{__('No, I already have one', 'pojo-accessibility')}
 										</Typography>
 
@@ -219,7 +222,11 @@ const AccessibilityStatement = () => {
 								<Button
 									size="large"
 									color="secondary"
-									startIcon={<ChevronLeftIcon fontSize="small" />}
+									startIcon={
+										<Rotate in={isRTL}>
+											<ChevronLeftIcon aria-hidden={true} fontSize="small" />
+										</Rotate>
+									}
 									onClick={handleBackButton}
 								>
 									{__('Back', 'pojo-accessibility')}
@@ -236,7 +243,7 @@ const AccessibilityStatement = () => {
 						justifyContent="end"
 						p={2}
 						width="100%"
-						borderTop="1px solid rgb(0 0 0 / 0.12)"
+						sx={{ borderBlockStart: '1px solid rgb(0 0 0 / 0.12)' }}
 					>
 						<Button
 							color="primary"
diff --git a/modules/settings/assets/js/pages/analytics.js b/modules/settings/assets/js/pages/analytics.js
index 8df0d22b..5ebbba65 100644
--- a/modules/settings/assets/js/pages/analytics.js
+++ b/modules/settings/assets/js/pages/analytics.js
@@ -45,10 +45,7 @@ const StyledPageTitle = styled(StyledTitle)`
 
 const Blur = styled(Box)`
 	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
+	inset: 0;
 	backdrop-filter: blur(5px);
 	z-index: 2;
 `;
diff --git a/modules/settings/assets/js/pages/assistant/empty-state.js b/modules/settings/assets/js/pages/assistant/empty-state.js
index a7621acd..a409da14 100644
--- a/modules/settings/assets/js/pages/assistant/empty-state.js
+++ b/modules/settings/assets/js/pages/assistant/empty-state.js
@@ -107,14 +107,14 @@ const AccessibilityAssistantEmptyState = () => {
 };
 
 const StyledWrapper = styled(Box)`
-	margin-top: ${({ theme }) => theme.spacing(8)};
+	margin-block-start: ${({ theme }) => theme.spacing(8)};
 
 	text-align: center;
 `;
 
 const StyledTitle = styled(Typography)`
-	margin-top: ${({ theme }) => theme.spacing(2)};
-	margin-bottom: ${({ theme }) => theme.spacing(1)};
+	margin-block-start: ${({ theme }) => theme.spacing(2)};
+	margin-block-end: ${({ theme }) => theme.spacing(1)};
 
 	font-size: 20px;
 	font-weight: 500;
@@ -125,7 +125,7 @@ const StyledTitle = styled(Typography)`
 
 const StyledSubtitle = styled(Typography)`
 	color: ${({ theme }) => theme.palette.text.secondary};
-	margin-bottom: ${({ theme }) => theme.spacing(2)};
+	margin-block-end: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledButton = styled(Button)`
@@ -135,11 +135,11 @@ const StyledButton = styled(Button)`
 `;
 
 const StyledGuideContainer = styled(Box)`
-	margin-top: ${({ theme }) => theme.spacing(8)};
+	margin-block-start: ${({ theme }) => theme.spacing(8)};
 `;
 
 const StyledGuideTitle = styled(Typography)`
-	margin-bottom: ${({ theme }) => theme.spacing(2)};
+	margin-block-end: ${({ theme }) => theme.spacing(2)};
 
 	color: ${({ theme }) => theme.palette.text.secondary};
 	font-size: 16px;
@@ -178,7 +178,7 @@ const StyledGuideStepTitle = styled(Typography)`
 	align-items: center;
 
 	margin: 0;
-	margin-bottom: ${({ theme }) => theme.spacing(1)};
+	margin-block-end: ${({ theme }) => theme.spacing(1)};
 
 	color: ${({ theme }) => theme.palette.text.secondary};
 	font-size: 14px;
diff --git a/modules/settings/assets/js/pages/assistant/no-results-state.js b/modules/settings/assets/js/pages/assistant/no-results-state.js
index 23083e05..f22d23f1 100644
--- a/modules/settings/assets/js/pages/assistant/no-results-state.js
+++ b/modules/settings/assets/js/pages/assistant/no-results-state.js
@@ -46,14 +46,14 @@ const AccessibilityAssistantNoResultsState = () => {
 };
 
 const StyledWrapper = styled(Box)`
-	margin-top: ${({ theme }) => theme.spacing(6)};
+	margin-block-start: ${({ theme }) => theme.spacing(6)};
 
 	text-align: center;
 `;
 
 const StyledTitle = styled(Typography)`
-	margin-top: 0;
-	margin-bottom: ${({ theme }) => theme.spacing(1)};
+	margin-block-start: 0;
+	margin-block-end: ${({ theme }) => theme.spacing(1)};
 
 	font-size: 16px;
 	font-weight: 500;
diff --git a/modules/settings/assets/js/pages/assistant/results/pagination.js b/modules/settings/assets/js/pages/assistant/results/pagination.js
index 6b4cd32e..806b8d4d 100644
--- a/modules/settings/assets/js/pages/assistant/results/pagination.js
+++ b/modules/settings/assets/js/pages/assistant/results/pagination.js
@@ -1,5 +1,5 @@
 import TablePagination from '@elementor/ui/TablePagination';
-import { styled } from '@elementor/ui/styles';
+import { __ } from '@wordpress/i18n';
 import { useAccessibilityAssistantContext } from '../../../contexts/accessibility-assistant-context';
 
 const AccessibilityAssistantResultsPagination = () => {
@@ -25,11 +25,12 @@ const AccessibilityAssistantResultsPagination = () => {
 	};
 
 	return (
-		<StyledPagination
+		<TablePagination
 			count={scannerResults.length}
 			page={page}
 			onPageChange={onPageChange}
 			rowsPerPage={rowsPerPage}
+			labelRowsPerPage={__('Scanned URLs per page:', 'pojo-accessibility')}
 			onRowsPerPageChange={onRowsPerPageChange}
 			colSpan={6}
 			align="right"
@@ -37,6 +38,4 @@ const AccessibilityAssistantResultsPagination = () => {
 	);
 };
 
-const StyledPagination = styled(TablePagination)``;
-
 export default AccessibilityAssistantResultsPagination;
diff --git a/modules/settings/assets/js/pages/assistant/results/table.js b/modules/settings/assets/js/pages/assistant/results/table.js
index c28689f1..470521c2 100644
--- a/modules/settings/assets/js/pages/assistant/results/table.js
+++ b/modules/settings/assets/js/pages/assistant/results/table.js
@@ -223,7 +223,7 @@ AccessibilityAssistantResultsTable.propTypes = {
 };
 
 const StyledTableContainer = styled(TableContainer)`
-	margin-top: ${({ theme }) => theme.spacing(3)};
+	margin-block-start: ${({ theme }) => theme.spacing(3)};
 	padding: ${({ theme }) => theme.spacing(2)};
 	border: 1px solid ${({ theme }) => theme.palette.divider};
 	border-radius: ${({ theme }) => theme.shape.borderRadius}px;
diff --git a/modules/settings/assets/js/pages/assistant/stats/index.js b/modules/settings/assets/js/pages/assistant/stats/index.js
index 3a19b3f8..b67b75e6 100644
--- a/modules/settings/assets/js/pages/assistant/stats/index.js
+++ b/modules/settings/assets/js/pages/assistant/stats/index.js
@@ -52,7 +52,7 @@ AccessibilityAssistantStats.propTypes = {
 };
 
 const StyledStatsContainer = styled(Box)`
-	margin-top: ${({ theme }) => theme.spacing(3)};
+	margin-block-start: ${({ theme }) => theme.spacing(3)};
 
 	display: grid;
 	grid-template-columns: 1fr 1fr 2fr;
diff --git a/modules/settings/assets/js/pages/assistant/stats/issues-by-category/issue-list.js b/modules/settings/assets/js/pages/assistant/stats/issues-by-category/issue-list.js
index a7884949..230e8ab2 100644
--- a/modules/settings/assets/js/pages/assistant/stats/issues-by-category/issue-list.js
+++ b/modules/settings/assets/js/pages/assistant/stats/issues-by-category/issue-list.js
@@ -97,7 +97,7 @@ const StyledIssueLevel = styled(Box, {
 	margin-inline-start: ${({ theme }) => theme.spacing(0.5)};
 
 	&:not(:last-of-type) {
-		margin-bottom: ${({ theme }) => theme.spacing(1)};
+		margin-block-end: ${({ theme }) => theme.spacing(1)};
 	}
 
 	&::before {
@@ -131,7 +131,7 @@ const StyledIssuesCount = styled(Typography)`
 	line-height: 130%;
 	letter-spacing: 0.1px;
 	min-width: 50px;
-	text-align: left;
+	text-align: start;
 `;
 
 export default IssueList;
diff --git a/modules/settings/assets/js/pages/assistant/stats/issues-by-level/issue-list.js b/modules/settings/assets/js/pages/assistant/stats/issues-by-level/issue-list.js
index a68e332f..91ce13f1 100644
--- a/modules/settings/assets/js/pages/assistant/stats/issues-by-level/issue-list.js
+++ b/modules/settings/assets/js/pages/assistant/stats/issues-by-level/issue-list.js
@@ -66,7 +66,7 @@ const StyledIssueLevel = styled(Box)`
 	margin-inline-start: ${({ theme }) => theme.spacing(0.5)};
 
 	&:not(:last-of-type) {
-		margin-bottom: ${({ theme }) => theme.spacing(1)};
+		margin-block-end: ${({ theme }) => theme.spacing(1)};
 	}
 
 	:first-of-type::before,
diff --git a/modules/settings/assets/js/pages/assistant/stats/issues-by-level/pie-chart.js b/modules/settings/assets/js/pages/assistant/stats/issues-by-level/pie-chart.js
index 1a0bf74c..615d8145 100644
--- a/modules/settings/assets/js/pages/assistant/stats/issues-by-level/pie-chart.js
+++ b/modules/settings/assets/js/pages/assistant/stats/issues-by-level/pie-chart.js
@@ -40,49 +40,50 @@ const PieChart = ({
 			sx={{
 				width: 120,
 				height: 120,
-				display: 'flex',
-				justifyContent: 'center',
-				alignItems: 'center',
-				position: 'relative',
+				display: 'grid',
+				placeItems: 'center',
 			}}
 		>
-			<MuiPieChart
-				series={[
-					{
-						data: pieData,
-						innerRadius: 40,
-						outerRadius: 52,
-						cx: 60,
-						cy: 60,
-					},
-				]}
-				slots={{
-					itemContent: StatsPieTooltip,
-				}}
-				width={120}
-				height={120}
-				slotProps={{
-					legend: { hidden: true },
-				}}
+			<Box
 				sx={{
-					position: 'absolute',
-					top: '50%',
-					left: '50%',
-					transform: 'translate(-50%, -50%)',
-					[`& .${pieArcLabelClasses.root}`]: {
-						display: 'none',
-					},
+					gridArea: '1 / 1',
+					width: 120,
+					height: 120,
 				}}
-			/>
+			>
+				<MuiPieChart
+					series={[
+						{
+							data: pieData,
+							innerRadius: 40,
+							outerRadius: 52,
+							cx: 60,
+							cy: 60,
+						},
+					]}
+					slots={{
+						itemContent: StatsPieTooltip,
+					}}
+					width={120}
+					height={120}
+					margin={{ top: 0, bottom: 0, left: 0, right: 0 }}
+					slotProps={{
+						legend: { hidden: true },
+					}}
+					sx={{
+						[`& .${pieArcLabelClasses.root}`]: {
+							display: 'none',
+						},
+					}}
+				/>
+			</Box>
 			<Box
 				sx={{
-					position: 'absolute',
-					top: '55%',
-					left: '53%',
-					transform: 'translate(-50%, -50%)',
-					display: 'flex',
-					justifyContent: 'center',
-					alignItems: 'center',
+					gridArea: '1 / 1',
+					width: 120,
+					height: 120,
+					display: 'grid',
+					placeItems: 'center',
 				}}
 			>
 				<Typography variant="h4" as="span">
diff --git a/modules/settings/assets/js/pages/assistant/stats/stats.styles.js b/modules/settings/assets/js/pages/assistant/stats/stats.styles.js
index a94f2e6a..5015535f 100644
--- a/modules/settings/assets/js/pages/assistant/stats/stats.styles.js
+++ b/modules/settings/assets/js/pages/assistant/stats/stats.styles.js
@@ -55,8 +55,6 @@ export const StyledStatsItemContent = styled(Box)`
 `;
 
 export const StyledStatsItemChart = styled(Box)`
-	margin-inline-start: ${({ theme }) => theme.spacing(2)};
-
 	@media screen and (max-width: 1200px) {
 		& {
 			display: none;
@@ -72,7 +70,7 @@ export const StyledStatsItemTitle = styled(Typography, {
 	align-items: center;
 
 	margin: 0;
-	margin-bottom: ${({ spacing, theme }) => theme.spacing(spacing || 2)};
+	margin-block-end: ${({ spacing, theme }) => theme.spacing(spacing || 2)};
 
 	color: ${({ theme }) => theme.palette.text.primary};
 	font-feature-settings:
diff --git a/modules/settings/assets/js/pages/assistant/stats/tooltip.js b/modules/settings/assets/js/pages/assistant/stats/tooltip.js
index 19b22425..be99cc0e 100644
--- a/modules/settings/assets/js/pages/assistant/stats/tooltip.js
+++ b/modules/settings/assets/js/pages/assistant/stats/tooltip.js
@@ -6,7 +6,7 @@ const StatsPieTooltip = (props) => {
 	const { itemData, series } = props;
 	const data = series.data[itemData.dataIndex];
 	return (
-		<Paper sx={{ p: 2, pb: 1 }}>
+		<Paper sx={{ p: 2, paddingBlockEnd: 1 }}>
 			<StyledStatsPieTooltipTitle
 				variant="body2"
 				color="text.tertiary"
@@ -25,7 +25,7 @@ const StyledStatsPieTooltipTitle = styled(Typography, {
 	shouldForwardProp: (prop) => prop !== 'itemColor',
 })`
 	position: relative;
-	padding-left: 18px;
+	padding-inline-start: 18px;
 	&:before {
 		content: '';
 		position: absolute;
diff --git a/modules/settings/assets/js/pages/icon-settings.js b/modules/settings/assets/js/pages/icon-settings.js
index f4ffe096..0a16894a 100644
--- a/modules/settings/assets/js/pages/icon-settings.js
+++ b/modules/settings/assets/js/pages/icon-settings.js
@@ -24,7 +24,7 @@ const IconSettings = () => {
 					{__('Design', 'pojo-accessibility')}
 				</StyledPageTitle>
 
-				<IconDesignSettings marginBottom={4} />
+				<IconDesignSettings marginBlockEnd={4} />
 
 				<PositionSettings />
 			</StyledWideBox>
diff --git a/modules/settings/assets/js/pages/menu.js b/modules/settings/assets/js/pages/menu.js
index 1d63a389..92eac3f9 100644
--- a/modules/settings/assets/js/pages/menu.js
+++ b/modules/settings/assets/js/pages/menu.js
@@ -47,8 +47,7 @@ const StyledSettingsWrapper = styled(Box)`
 	grid-template-columns: repeat(2, 1fr);
 	gap: ${({ theme }) => theme.spacing(4)};
 	max-width: 1200px;
-	margin-left: auto;
-	margin-right: auto;
+	margin-inline: auto;
 `;
 
 const StyledPageTitle = styled(StyledTitle)`
diff --git a/modules/settings/assets/js/pages/pages.styles.js b/modules/settings/assets/js/pages/pages.styles.js
index d1bf2dd8..0362c8c4 100644
--- a/modules/settings/assets/js/pages/pages.styles.js
+++ b/modules/settings/assets/js/pages/pages.styles.js
@@ -70,17 +70,15 @@ export const StyledStatementContainer = styled(Container)`
 	max-height: 100%;
 	max-width: 1200px;
 	width: 100%;
-	margin-right: auto;
-	margin-left: auto;
+	margin-inline: auto;
 
 	@media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
-		padding-left: 0;
-		padding-right: 0;
+		padding-inline: 0;
 	}
 `;
 
 export const StyledCardContent = styled(CardContent)`
 	&:last-child {
-		padding-bottom: 16px;
+		padding-block-end: 16px;
 	}
 `;
diff --git a/modules/settings/banners/bf-sale-2025-banner.php b/modules/settings/banners/bf-sale-2025-banner.php
index 1d6edda9..7db0827b 100644
--- a/modules/settings/banners/bf-sale-2025-banner.php
+++ b/modules/settings/banners/bf-sale-2025-banner.php
@@ -32,7 +32,11 @@ public static function user_viewed_banner(): bool {
 	 * @throws Throwable
 	 */
 	public static function get_banner( string $link ) {
-		if ( ! self::is_sale_time() || self::user_viewed_banner() ) {
+		if ( ! self::is_sale_time() ) {
+			return;
+		}
+
+		if ( self::user_viewed_banner() ) {
 			return;
 		}
 
@@ -62,8 +66,7 @@ public static function get_banner( string $link ) {
 		</div>
 
 		<style>
-			html[dir="rtl"] #ea11y-app,
-			html:not([dir="rtl"]) #ea11y-app {
+			#ea11y-app {
 				height: calc(100vh - 32px - 80px);
 			}
 
diff --git a/modules/settings/banners/elementor-birthday-banner.php b/modules/settings/banners/elementor-birthday-banner.php
index 5d0b8b27..c9004b97 100644
--- a/modules/settings/banners/elementor-birthday-banner.php
+++ b/modules/settings/banners/elementor-birthday-banner.php
@@ -32,7 +32,11 @@ public static function user_viewed_banner(): bool {
 	 * @throws Throwable
 	 */
 	public static function get_banner( string $link ) {
-		if ( ! self::is_sale_time() || self::user_viewed_banner() ) {
+		if ( ! self::is_sale_time() ) {
+			return;
+		}
+
+		if ( self::user_viewed_banner() ) {
 			return;
 		}
 
@@ -61,8 +65,7 @@ public static function get_banner( string $link ) {
 		</div>
 
 		<style>
-			html[dir="rtl"] #ea11y-app,
-			html:not([dir="rtl"]) #ea11y-app {
+			#ea11y-app {
 				height: calc(100vh - 32px - 80px);
 			}
 
diff --git a/modules/settings/banners/onboarding-banner.php b/modules/settings/banners/onboarding-banner.php
index f98a7503..83da86b3 100644
--- a/modules/settings/banners/onboarding-banner.php
+++ b/modules/settings/banners/onboarding-banner.php
@@ -43,7 +43,11 @@ public static function get_banner() {
 			return;
 		}
 
-		if ( self::user_viewed_banner() || self::user_has_scanned_pages() ) {
+		if ( self::user_viewed_banner() ) {
+			return;
+		}
+
+		if ( self::user_has_scanned_pages() ) {
 			return;
 		}
 
@@ -93,7 +97,7 @@ public static function get_banner() {
 		<style>
 			.elementor-ea11y-banner {
 				overflow: hidden;
-				border-left-color: #2563EB;
+				border-inline-start-color: #2563EB;
 				padding: 0;
 			}