diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43c24e135..8be48e03d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -59,7 +59,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 
-- Replace physical properties with logical values (#699)
+- Replace physical properties with logical values - margin (#717)
+- Replace physical properties with logical values - position (#699)
 - Moved web component custom events from the `editor-wc` element to the `document` (#710)
 - Renamed web component custom events to be prefixed with `editor-` (#710)
 - Switch props of `WebComponentLoader` from `snake_case` to `camelCase` (#712)
diff --git a/src/assets/stylesheets/AstroPiModel.scss b/src/assets/stylesheets/AstroPiModel.scss
index 64a6c8df0..0b0165fee 100644
--- a/src/assets/stylesheets/AstroPiModel.scss
+++ b/src/assets/stylesheets/AstroPiModel.scss
@@ -1,7 +1,7 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
 
 .sense-hat {
   width: 100%;
@@ -48,7 +48,7 @@
       &__reset-btn {
         flex: 1;
         display: flex;
-        margin-left: auto;
+        margin-inline-start: auto;
         svg {
           padding: $space-0-5;
           border-radius: 5px;
@@ -69,8 +69,8 @@
     &-heading {
       @include font-size-1(regular);
       font-weight: $font-weight-regular;
-      margin: 0;
-      margin-bottom: $space-0-5;
+      margin-block: 0 $space-0-5;
+      margin-inline: 0;
     }
 
     &-panel {
@@ -93,17 +93,17 @@
         &-reading {
           width: 100%;
           border-radius: 5px;
-          margin-top: $space-0-25;
+          margin-block-start: $space-0-25;
           padding: $space-0-25;
           box-sizing: border-box;
           display: flex;
           align-items: center;
           justify-content: center;
-          font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+          font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
             monospace;
 
           &-timer {
-            margin-top: 0;
+            margin-block-start: 0;
             padding: $space-0-5 0;
             width: 100%;
           }
@@ -129,7 +129,7 @@
           transform: rotate(270deg);
         }
 
-        input[type='color'] {
+        input[type="color"] {
           border-radius: 5px;
           flex: 1;
           width: 100%;
@@ -143,11 +143,11 @@
         }
 
         &-value {
-          margin-left: $space-0-25;
+          margin-inline-start: $space-0-25;
         }
 
         &-last {
-          margin-top: $space-0-5;
+          margin-block-start: $space-0-5;
           flex-flow: row;
           width: 100%;
           align-items: inherit;
@@ -201,7 +201,7 @@
             border: 1px solid $rpf-grey-500;
           }
 
-          input[type='color'] {
+          input[type="color"] {
             background-color: $rpf-grey-800;
             border: 1px solid $rpf-grey-500;
           }
@@ -255,7 +255,7 @@
             border: 2px solid $rpf-grey-300;
           }
 
-          input[type='color'] {
+          input[type="color"] {
             background-color: $rpf-white;
             border: 2px solid $rpf-grey-300;
           }
diff --git a/src/assets/stylesheets/BetaBanner.scss b/src/assets/stylesheets/BetaBanner.scss
index b9b997656..bb5e2a526 100644
--- a/src/assets/stylesheets/BetaBanner.scss
+++ b/src/assets/stylesheets/BetaBanner.scss
@@ -21,7 +21,7 @@
     border-radius: 8px;
     background-color: $rpf-teal-200;
     font-weight: $font-weight-bold;
-    margin-right: $space-1-5;
+    margin-inline-end: $space-1-5;
   }
 }
 
@@ -51,12 +51,12 @@
 }
 
 .editor-banner__close-button {
-  margin-left: auto;
+  margin-inline-start: auto;
 
   &.btn--tertiary {
     svg {
       fill: $rpf-text-primary;
-      margin-right: 0;
+      margin-inline-end: 0;
     }
 
     &:hover {
diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss
index fb960d4ba..7e3411776 100644
--- a/src/assets/stylesheets/Button.scss
+++ b/src/assets/stylesheets/Button.scss
@@ -1,11 +1,19 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
-
-@mixin button-styling($bg, $active-bg, $dis-bg, $dis-c, $focus-bg, $hover-bg, $c: default) {
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
+
+@mixin button-styling(
+  $bg,
+  $active-bg,
+  $dis-bg,
+  $dis-c,
+  $focus-bg,
+  $hover-bg,
+  $c: default
+) {
   background-color: $bg;
 
-  @if $c == 'default' {
+  @if $c == "default" {
     color: $rpf-text-primary;
 
     svg {
@@ -19,17 +27,20 @@
     }
   }
 
-  &:active, .btn-outer:active & {
+  &:active,
+  .btn-outer:active & {
     background-color: $active-bg;
     @content;
   }
 
+
   &:focus-visible, .btn-outer:focus-visible & {
     background-color: $focus-bg;
     @content;
   }
-  
-  &:hover, .btn-outer:hover & {
+
+  &:hover,
+  .btn-outer:hover & {
     background-color: $hover-bg;
     @content;
   }
@@ -87,7 +98,8 @@
 
   // Variants
   &--primary {
-    $colours: $rpf-teal-800, $rpf-teal-600, $rpf-teal-200, $rpf-grey-600, $rpf-teal-800, $rpf-teal-900;
+    $colours: $rpf-teal-800, $rpf-teal-600, $rpf-teal-200, $rpf-grey-600,
+      $rpf-teal-800, $rpf-teal-900;
     @include button-styling($colours...);
   }
 
@@ -115,7 +127,8 @@
   }
 
   &--tertiary {
-    $colours: inherit, inherit, inherit, $rpf-grey-600, inherit, inherit, inherit;
+    $colours: inherit, inherit, inherit, $rpf-grey-600, inherit, inherit,
+      inherit;
     @include button-styling($colours...);
     margin: 0;
 
@@ -137,7 +150,8 @@
   }
 
   &--danger {
-    $colours:  $rpf-alert-error, $rpf-alert-error, $rpf-alert-error, $rpf-white, $rpf-alert-error, $rpf-alerts-error-tint, $rpf-white;
+    $colours: $rpf-alert-error, $rpf-alert-error, $rpf-alert-error, $rpf-white,
+      $rpf-alert-error, $rpf-alerts-error-tint, $rpf-white;
     @include button-styling($colours...);
 
     &:focus-visible {
@@ -226,12 +240,14 @@
   }
 
   .btn--primary {
-    $colours: $rpf-teal-400, $rpf-teal-200, $rpf-grey-200, $rpf-grey-700, $rpf-teal-400, $rpf-teal-600;
+    $colours: $rpf-teal-400, $rpf-teal-200, $rpf-grey-200, $rpf-grey-700,
+      $rpf-teal-400, $rpf-teal-600;
     @include button-styling($colours...);
   }
 
   .btn--secondary {
-    $colours: inherit, inherit, $rpf-grey-700, $rpf-grey-100, inherit, inherit, $rpf-white;
+    $colours: inherit, inherit, $rpf-grey-700, $rpf-grey-100, inherit, inherit,
+      $rpf-white;
     @include button-styling($colours...);
 
     border: 2px solid $rpf-teal-400;
@@ -254,7 +270,8 @@
   }
 
   .btn--tertiary {
-    $colours: inherit, inherit, inherit, $rpf-grey-100, inherit, inherit, $rpf-white;
+    $colours: inherit, inherit, inherit, $rpf-grey-100, inherit, inherit,
+      $rpf-white;
     @include button-styling($colours...);
 
     &:active {
@@ -274,4 +291,3 @@
     }
   }
 }
-
diff --git a/src/assets/stylesheets/ContextMenu.scss b/src/assets/stylesheets/ContextMenu.scss
index 235a8541e..ef5151861 100644
--- a/src/assets/stylesheets/ContextMenu.scss
+++ b/src/assets/stylesheets/ContextMenu.scss
@@ -13,9 +13,9 @@
 
 .context-menu {
   list-style-type: none;
-  margin: 0;
   padding: 0;
-  margin-inline-start: $space-0-5;
+  margin-inline: $space-0-5 0;
+	margin-block: 0;
   border-radius: 5px;
   display: flex;
   flex-direction: column;
diff --git a/src/assets/stylesheets/Dropdown.scss b/src/assets/stylesheets/Dropdown.scss
index d737a91f2..e61cb009c 100644
--- a/src/assets/stylesheets/Dropdown.scss
+++ b/src/assets/stylesheets/Dropdown.scss
@@ -25,7 +25,7 @@
     position: absolute;
     padding: $space-0-5;
     border-radius: 10px;
-    margin-top: $space-1-5;
+    margin-block-start: $space-1-5;
 
     &--bottom {
       inset-block-start: 100%;
@@ -38,7 +38,7 @@
         position: absolute;
         inset-block-end: 100%;
         inset-inline-start: 50%;
-        margin-left: -15px;
+        margin-inline-start: -15px;
         content: '';
       }
     }
diff --git a/src/assets/stylesheets/EditorPanel.scss b/src/assets/stylesheets/EditorPanel.scss
index ed4fc2839..bb28d7c2a 100644
--- a/src/assets/stylesheets/EditorPanel.scss
+++ b/src/assets/stylesheets/EditorPanel.scss
@@ -22,11 +22,11 @@
       .cm-content {
         flex: 1;
         padding-top: $space-0-5;
-        margin-right: $space-0-5;
+        margin-inline-end: $space-0-5;
       }
     }
   }
-  
+
   &--small {
     @include font-size-1(regular);
   }
diff --git a/src/assets/stylesheets/ErrorMessage.scss b/src/assets/stylesheets/ErrorMessage.scss
index c12a89a05..b69439cd5 100644
--- a/src/assets/stylesheets/ErrorMessage.scss
+++ b/src/assets/stylesheets/ErrorMessage.scss
@@ -1,9 +1,9 @@
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/spacing' as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/spacing" as *;
 
 .error-message {
   color: #7e0305;
-  background-color: #FDE2E1;
+  background-color: #fde2e1;
   padding: $space-0-75 $space-1-25;
 
   &__content {
diff --git a/src/assets/stylesheets/FilePanel.scss b/src/assets/stylesheets/FilePanel.scss
index d612ad5a5..26a1ab0d8 100644
--- a/src/assets/stylesheets/FilePanel.scss
+++ b/src/assets/stylesheets/FilePanel.scss
@@ -1,6 +1,6 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
 
 .files-list-item-wrapper {
   display: flex;
@@ -35,7 +35,8 @@
 }
 
 .--light {
-  .files-list-item, .files-list-item__menu {
+  .files-list-item,
+  .files-list-item__menu {
     &:hover {
       background-color: $rpf-teal-secondary-tertiary-hover;
     }
@@ -47,7 +48,8 @@
 }
 
 .--dark {
-  .files-list-item, .files-list-item__menu {
+  .files-list-item,
+  .files-list-item__menu {
     &:hover {
       background-color: $rpf-grey-secondary-tertiary-hover;
     }
diff --git a/src/assets/stylesheets/FontSizeSelector.scss b/src/assets/stylesheets/FontSizeSelector.scss
index 2379487be..bce2c3fd7 100644
--- a/src/assets/stylesheets/FontSizeSelector.scss
+++ b/src/assets/stylesheets/FontSizeSelector.scss
@@ -12,7 +12,7 @@
       border-radius: 5px;
       display: block;
       width: 100%;
-      margin-bottom: $space-0-75;
+      margin-block-end: $space-0-75;
       color: inherit;
 
       .--dark & {
diff --git a/src/assets/stylesheets/GlobalNav.scss b/src/assets/stylesheets/GlobalNav.scss
index 69d9fe7c0..de5c4b85e 100644
--- a/src/assets/stylesheets/GlobalNav.scss
+++ b/src/assets/stylesheets/GlobalNav.scss
@@ -1,7 +1,7 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
-@use './rpf_design_system/mixins' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
+@use "./rpf_design_system/mixins" as *;
 
 .editor-global-nav-wrapper {
   flex: 0 1 auto;
@@ -16,13 +16,14 @@
   z-index: 2;
 
   &__account {
-    margin-left: auto;
-    margin-right: $space-2;
+    margin-inline-start: auto;
+    margin-inline-end: $space-2;
     height: 100%;
 
     svg {
-      fill:  $rpf-white;
-      margin: 0 0 0 $space-0-5;
+      fill: $rpf-white;
+      margin-block: 0;
+      margin-inline: 0 $space-0-5;
     }
 
     .dropdown-button {
@@ -44,14 +45,14 @@
   &__home {
     display: flex;
     align-items: center;
-    margin-left: $space-2;
+    margin-inline-start: $space-2;
     padding: $space-0-5 0;
     font-weight: $font-weight-bold;
     text-decoration: none;
     color: $rpf-white;
 
     span {
-      margin-left: $space-1-5;
+      margin-inline-start: $space-1-5;
     }
 
     &:visited {
@@ -59,7 +60,7 @@
     }
 
     @include md-width {
-      margin-left: $space-3;
+      margin-inline-start: $space-3;
     }
   }
 }
diff --git a/src/assets/stylesheets/HtmlRunner.scss b/src/assets/stylesheets/HtmlRunner.scss
index 8d8ac9542..fd84a8ba6 100644
--- a/src/assets/stylesheets/HtmlRunner.scss
+++ b/src/assets/stylesheets/HtmlRunner.scss
@@ -9,7 +9,7 @@
 }
 
 .htmlrunner-link {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .htmlrunner-link__text {
diff --git a/src/assets/stylesheets/InfoPanel.scss b/src/assets/stylesheets/InfoPanel.scss
index 4f19cdff3..5746b3a7e 100644
--- a/src/assets/stylesheets/InfoPanel.scss
+++ b/src/assets/stylesheets/InfoPanel.scss
@@ -1,12 +1,12 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
 
 .info-panel {
   border-radius: $space-0-5;
   padding: $space-1;
-  margin-bottom: $space-0-5;
+  margin-block-end: $space-0-5;
 
   p {
     margin: 0;
@@ -26,7 +26,7 @@
 
 .info-panel__link {
   &:last-of-type {
-    margin-bottom: $space-1;
+    margin-block-end: $space-1;
   }
 }
 
@@ -35,7 +35,7 @@
     color: $rpf-text-primary-darkmode;
     background-color: $rpf-grey-600;
   }
-  
+
   .info-panel__links a {
     color: $rpf-text-primary-darkmode;
   }
diff --git a/src/assets/stylesheets/LandingPage.scss b/src/assets/stylesheets/LandingPage.scss
index c6fefd468..7561ae491 100644
--- a/src/assets/stylesheets/LandingPage.scss
+++ b/src/assets/stylesheets/LandingPage.scss
@@ -1,8 +1,8 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
-@use './rpf_design_system/mixins' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
+@use "./rpf_design_system/mixins" as *;
 
 .landing-page-wrapper {
   display: flex;
@@ -110,7 +110,7 @@
 }
 
 .landing-page__paths-media {
-  margin-bottom: -2px;
+  margin-block-end: -2px;
 
   img {
     aspect-ratio: 3/2;
@@ -121,7 +121,7 @@
   }
 
   @media screen and (min-width: 768px) {
-    margin-left: auto;
+    margin-inline-start: auto;
 
     img {
       margin: unset;
diff --git a/src/assets/stylesheets/MobileProject.scss b/src/assets/stylesheets/MobileProject.scss
index 43203323d..c183f7944 100644
--- a/src/assets/stylesheets/MobileProject.scss
+++ b/src/assets/stylesheets/MobileProject.scss
@@ -1,5 +1,5 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/colours" as *;
 
 .proj-container--mobile {
   margin: 0;
@@ -14,20 +14,21 @@
   border-radius: 8px;
 }
 
-#app, #wc {
+#app,
+#wc {
   .mobile-nav {
     display: flex;
     width: 100%;
-  
+
     .react-tabs__tab-list {
       padding: 0;
     }
-  
+
     .react-tabs__tab {
       flex: 1;
       display: flex;
       height: $space-4;
-  
+
       &:last-of-type {
         border-right: none;
       }
@@ -79,7 +80,10 @@
   }
 }
 
-#app.--light, #app.--dark, #wc.--light, #wc.--dark {
+#app.--light,
+#app.--dark,
+#wc.--light,
+#wc.--dark {
   .mobile-nav {
     border-bottom: none;
 
diff --git a/src/assets/stylesheets/MobileProjectBar.scss b/src/assets/stylesheets/MobileProjectBar.scss
index 887c53736..aa38aac83 100644
--- a/src/assets/stylesheets/MobileProjectBar.scss
+++ b/src/assets/stylesheets/MobileProjectBar.scss
@@ -1,7 +1,7 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
 
 .mobile-project-bar {
   background-color: $rpf-white;
@@ -36,6 +36,6 @@
   }
 
   .mobile-project-bar__name {
-      color: $rpf-text-secondary;
+    color: $rpf-text-secondary;
   }
 }
diff --git a/src/assets/stylesheets/Modal.scss b/src/assets/stylesheets/Modal.scss
index f30efc18a..c06afef81 100644
--- a/src/assets/stylesheets/Modal.scss
+++ b/src/assets/stylesheets/Modal.scss
@@ -1,9 +1,9 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/line-height' as *;
-@use './rpf_design_system/colours' as *;
-@use './rpf_design_system/mixins' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/line-height" as *;
+@use "./rpf_design_system/colours" as *;
+@use "./rpf_design_system/mixins" as *;
 
 .modal-overlay {
   display: flex;
@@ -24,11 +24,12 @@
   display: flex;
   flex-direction: column;
 
-  label, legend {
+  label,
+  legend {
     font-weight: $font-weight-bold;
   }
 
-  input[type=text] {
+  input[type="text"] {
     @include font-size-1(regular);
     width: 100%;
     box-sizing: border-box;
@@ -51,14 +52,15 @@
   padding: $space-1 $space-0-5 $space-1 $space-1;
 
   button {
-    margin-left: auto;
+    margin-inline-start: auto;
     height: fit-content;
   }
 }
 
 .modal-content__heading {
   @include font-size-1-5(regular);
-  margin: $space-0-5 $space-0-5 $space-0-5 0;
+  margin-block: $space-0-5;
+  margin-inline: $space-0-5 0;
 }
 
 .modal-content__body {
@@ -110,7 +112,8 @@
     flex-direction: column;
   }
 
-  button, a {
+  button,
+  a {
     margin: 0;
 
     span {
@@ -125,8 +128,9 @@
 
 .modal-content__links {
   text-align: center;
-  margin: $space-0-5 0 $space-0-25 0;
-  
+  margin-block: $space-0-5 $space-0-25;
+  margin-inline: 0;
+
   button {
     text-decoration: underline;
   }
@@ -140,7 +144,7 @@
 
 .--dark {
   .modal-overlay {
-    background-color: rgba(0,0,0,0.5);
+    background-color: rgba(0, 0, 0, 0.5);
 
     input {
       border: 2px solid $rpf-white;
@@ -172,7 +176,7 @@
 
 .--light {
   .modal-overlay {
-    background-color: rgba(67,69,76,0.5);
+    background-color: rgba(67, 69, 76, 0.5);
 
     input {
       border: 2px solid $rpf-grey-100;
diff --git a/src/assets/stylesheets/Notifications.scss b/src/assets/stylesheets/Notifications.scss
index 117aa5a28..fda471757 100644
--- a/src/assets/stylesheets/Notifications.scss
+++ b/src/assets/stylesheets/Notifications.scss
@@ -1,13 +1,14 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
 
 #app {
-  .toast--bottom-center__message, .toast--top-center__message {
-      min-height: fit-content;
-      padding: $space-0-25 $space-0-5;
-      margin: 0;
+  .toast--bottom-center__message,
+  .toast--top-center__message {
+    min-height: fit-content;
+    padding: $space-0-25 $space-0-5;
+    margin: 0;
   }
 
   .toast--bottom-center {
@@ -21,7 +22,8 @@
     white-space: nowrap;
 
     .Toastify__toast-icon {
-      margin: 0 $space-0-25 0 0;
+      margin-block: 0;
+      margin-inline: $space-0-25 0;
     }
   }
   .toast--bottom-center__message {
diff --git a/src/assets/stylesheets/Project.scss b/src/assets/stylesheets/Project.scss
index f6e2361c2..7dac1b095 100644
--- a/src/assets/stylesheets/Project.scss
+++ b/src/assets/stylesheets/Project.scss
@@ -1,5 +1,5 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/colours" as *;
 
 .proj {
   display: flex;
@@ -120,18 +120,19 @@
   }
 }
 
-.proj-editor-container, .proj-runner-container {
+.proj-editor-container,
+.proj-runner-container {
   .react-tabs__tab-list {
     flex: 1;
   }
 
   .react-tabs__tab-container {
-    .btn--run, .btn--stop {
-      margin-top: 0;
-      margin-bottom: 0;
+    .btn--run,
+    .btn--stop {
+      margin-block-start: 0;
+      margin-block-end: 0;
     }
   }
-
 }
 
 .--light {
@@ -142,7 +143,9 @@
   }
 
   @media (min-width: 600px) {
-    .proj-runner-container, .proj-editor-container, .sidebar {
+    .proj-runner-container,
+    .proj-editor-container,
+    .sidebar {
       border: 1px solid $rpf-grey-150;
     }
   }
@@ -156,7 +159,9 @@
   }
 
   @media (min-width: 600px) {
-    .proj-runner-container, .proj-editor-container, .sidebar {
+    .proj-runner-container,
+    .proj-editor-container,
+    .sidebar {
       border: 1px solid $rpf-grey-600;
     }
   }
diff --git a/src/assets/stylesheets/ProjectBar.scss b/src/assets/stylesheets/ProjectBar.scss
index 9d11884f8..3a138a174 100644
--- a/src/assets/stylesheets/ProjectBar.scss
+++ b/src/assets/stylesheets/ProjectBar.scss
@@ -1,5 +1,5 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/colours" as *;
 
 .project-bar {
   border-radius: $space-0-5;
@@ -21,7 +21,7 @@
     padding: $space-1;
 
     &::after {
-      content: '';
+      content: "";
       position: absolute;
       inset-block-start: -3px;
       inset-inline-end: 0px;
@@ -37,7 +37,7 @@
   }
 
   &__right {
-    margin-left: auto;
+    margin-inline-start: auto;
     display: flex;
     align-items: center;
     height: 100%;
diff --git a/src/assets/stylesheets/ProjectImages.scss b/src/assets/stylesheets/ProjectImages.scss
index 9685c3b5b..c15dd065d 100644
--- a/src/assets/stylesheets/ProjectImages.scss
+++ b/src/assets/stylesheets/ProjectImages.scss
@@ -1,5 +1,5 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/colours" as *;
 
 .project-images {
   display: grid;
diff --git a/src/assets/stylesheets/ProjectIndexHeader.scss b/src/assets/stylesheets/ProjectIndexHeader.scss
index 545736308..388f65214 100644
--- a/src/assets/stylesheets/ProjectIndexHeader.scss
+++ b/src/assets/stylesheets/ProjectIndexHeader.scss
@@ -1,6 +1,6 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/colours' as *;
-@use './rpf_design_system/mixins' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/colours" as *;
+@use "./rpf_design_system/mixins" as *;
 
 .editor-project-header {
   &__inner {
@@ -30,13 +30,13 @@
 
   h3 {
     @include md-width {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
   }
 
   &__action {
     @include md-width {
-      margin-left: auto;
+      margin-inline-start: auto;
     }
 
     .btn {
diff --git a/src/assets/stylesheets/ProjectIndexPagination.scss b/src/assets/stylesheets/ProjectIndexPagination.scss
index 009fed7cf..f80e21cee 100644
--- a/src/assets/stylesheets/ProjectIndexPagination.scss
+++ b/src/assets/stylesheets/ProjectIndexPagination.scss
@@ -1,12 +1,12 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
 
 .editor-project-list-pagination {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: $space-2-5;
+  margin-block-end: $space-2-5;
   svg {
     margin: 0;
   }
@@ -20,7 +20,7 @@
   width: 100px;
 
   .btn {
-    margin: 0 $space-0-25
+    margin: 0 $space-0-25;
   }
 }
 
@@ -32,7 +32,7 @@
   border-radius: 10px;
   display: flex;
   align-items: center;
-  font-weight: $font-weight-bold
+  font-weight: $font-weight-bold;
 }
 
 .--light {
@@ -46,4 +46,3 @@
     background-color: $rpf-grey-500;
   }
 }
-
diff --git a/src/assets/stylesheets/ProjectInfo.scss b/src/assets/stylesheets/ProjectInfo.scss
index e655c1922..24bd13b5d 100644
--- a/src/assets/stylesheets/ProjectInfo.scss
+++ b/src/assets/stylesheets/ProjectInfo.scss
@@ -1,7 +1,7 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
 
 .project-info {
   align-items: left;
@@ -20,7 +20,7 @@
 .project-type__label {
   @include font-size-1(regular);
   font-weight: $font-weight-bold;
-  margin-bottom: $space-0-5;
+  margin-block-end: $space-0-5;
   display: block;
 }
 
diff --git a/src/assets/stylesheets/ProjectListItem.scss b/src/assets/stylesheets/ProjectListItem.scss
index bdf7b0c08..799b1d52a 100644
--- a/src/assets/stylesheets/ProjectListItem.scss
+++ b/src/assets/stylesheets/ProjectListItem.scss
@@ -1,8 +1,8 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
-@use './rpf_design_system/mixins' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
+@use "./rpf_design_system/mixins" as *;
 
 $medium-table-grid: 990px;
 $small-table-grid: 600px;
@@ -12,7 +12,6 @@ $small-table-grid: 600px;
     align-items: center;
   }
 
-
   &__title {
     align-items: center;
     display: flex;
@@ -44,7 +43,7 @@ $small-table-grid: 600px;
 
   &__tag {
     padding-right: $space-0-5;
-    margin-right: $space-0-5;
+    margin-inline-end: $space-0-5;
 
     .--light & {
       border-right: 1px $rpf-text-secondary solid;
@@ -114,7 +113,7 @@ $small-table-grid: 600px;
       &:active {
         color: $rpf-teal-900;
       }
-  
+
       &:hover {
         color: $rpf-grey-600;
       }
diff --git a/src/assets/stylesheets/ProjectListTable.scss b/src/assets/stylesheets/ProjectListTable.scss
index 72db66430..fa5bdb15a 100644
--- a/src/assets/stylesheets/ProjectListTable.scss
+++ b/src/assets/stylesheets/ProjectListTable.scss
@@ -1,9 +1,8 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
-@use './rpf_design_system/mixins' as *;
-
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
+@use "./rpf_design_system/mixins" as *;
 
 $medium-table-grid: 990px;
 $small-table-grid: 600px;
@@ -40,7 +39,7 @@ $small-table-grid: 600px;
   }
 
   &__heading {
-    margin-top: $space-0-25;
+    margin-block-start: $space-0-25;
   }
 
   &__heading:first-of-type {
diff --git a/src/assets/stylesheets/ProjectName.scss b/src/assets/stylesheets/ProjectName.scss
index ed3a65e9b..de1b4fe1d 100644
--- a/src/assets/stylesheets/ProjectName.scss
+++ b/src/assets/stylesheets/ProjectName.scss
@@ -1,7 +1,7 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
 
 .project-name {
   align-items: center;
@@ -17,7 +17,7 @@
 .project-name__label {
   @include font-size-1(regular);
   font-weight: $font-weight-bold;
-  margin-bottom: $space-0-5;
+  margin-block-end: $space-0-5;
   display: block;
 }
 
diff --git a/src/assets/stylesheets/PythonRunner.scss b/src/assets/stylesheets/PythonRunner.scss
index 305c7ab25..e3a82983f 100644
--- a/src/assets/stylesheets/PythonRunner.scss
+++ b/src/assets/stylesheets/PythonRunner.scss
@@ -1,6 +1,6 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/colours" as *;
 
 .pythonrunner-container {
   display: flex;
@@ -45,7 +45,6 @@
   outline: 0;
 }
 
-
 .pythonrunner-graphic {
   overflow: auto;
   position: relative;
diff --git a/src/assets/stylesheets/SaveStatus.scss b/src/assets/stylesheets/SaveStatus.scss
index dad59030e..24b89a8bb 100644
--- a/src/assets/stylesheets/SaveStatus.scss
+++ b/src/assets/stylesheets/SaveStatus.scss
@@ -1,12 +1,13 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/colours" as *;
 
 .save-status {
   align-items: center;
   display: flex;
   justify-content: flex-end;
-  margin: 0 $space-1 0 $space-0-5;
+  margin-block: 0;
+  margin-inline: $space-1 $space-0-5;
 }
 
 .save-status--mobile {
@@ -19,5 +20,4 @@
 
 .save-status__icon {
   display: flex;
-
 }
diff --git a/src/assets/stylesheets/SelectButtons.scss b/src/assets/stylesheets/SelectButtons.scss
index 62821f2fc..136413298 100644
--- a/src/assets/stylesheets/SelectButtons.scss
+++ b/src/assets/stylesheets/SelectButtons.scss
@@ -1,6 +1,6 @@
-@use './rpf_design_system/colours' as *;
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/mixins' as *;
+@use "./rpf_design_system/colours" as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/mixins" as *;
 
 .select-buttons {
   border: none;
@@ -10,7 +10,7 @@
 
 .select-buttons__legend {
   padding: 0;
-  margin-bottom: $space-1;
+  margin-block-end: $space-1;
 }
 
 .select-buttons__options {
@@ -42,7 +42,7 @@
 .select-buttons__tick {
   display: flex;
   align-items: center;
-  margin-left: auto;
+  margin-inline-start: auto;
   visibility: hidden;
 }
 
diff --git a/src/assets/stylesheets/SettingsPanel.scss b/src/assets/stylesheets/SettingsPanel.scss
index af518d9a5..4e3b9b779 100644
--- a/src/assets/stylesheets/SettingsPanel.scss
+++ b/src/assets/stylesheets/SettingsPanel.scss
@@ -1,19 +1,20 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
 
 .settings-panel {
   font-family: sans-serif;
   padding: $space-0-5;
-  margin-bottom: $space-0-5;
+  margin-block-end: $space-0-5;
   display: flex;
   flex-direction: column;
   gap: $space-0-5;
 
   h3 {
     font-weight: $font-weight-bold;
-    margin: 0 0 $space-0-5 0;
+    margin-block: 0 $space-0-5;
+    margin-inline: 0;
   }
 
   button {
diff --git a/src/assets/stylesheets/Tabs.scss b/src/assets/stylesheets/Tabs.scss
index 7623d010f..f51975e5a 100644
--- a/src/assets/stylesheets/Tabs.scss
+++ b/src/assets/stylesheets/Tabs.scss
@@ -1,6 +1,6 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
 
 #app,
 #wc {
@@ -115,7 +115,6 @@
 
   &.--light {
     .react-tabs {
-
       &__tab-container {
         border-bottom: 1px solid $rpf-grey-150;
       }
diff --git a/src/assets/stylesheets/ThemeToggle.scss b/src/assets/stylesheets/ThemeToggle.scss
index 8c1b407e3..89851d46e 100644
--- a/src/assets/stylesheets/ThemeToggle.scss
+++ b/src/assets/stylesheets/ThemeToggle.scss
@@ -14,7 +14,7 @@
       color: inherit;
       display: block;
       width: 100%;
-      margin-bottom: $space-0-75;
+      margin-block-end: $space-0-75;
 
       .--dark & {
         outline: 2px solid $rpf-grey-500;
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index b98fdf891..5a4806c93 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -8,15 +8,15 @@ body {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
 
diff --git a/storybook/stories/docs/Introduction.stories.mdx b/storybook/stories/docs/Introduction.stories.mdx
index edc33ed69..981a17dd0 100644
--- a/storybook/stories/docs/Introduction.stories.mdx
+++ b/storybook/stories/docs/Introduction.stories.mdx
@@ -20,8 +20,8 @@ import StackAlt from './assets/stackalt.svg';
       letter-spacing: 6px;
       line-height: 24px;
       text-transform: uppercase;
-      margin-bottom: 12px;
-      margin-top: 40px;
+      margin-block-end: 12px;
+      margin-block-start: 40px;
     }
 
     .link-list {
@@ -72,13 +72,13 @@ import StackAlt from './assets/stackalt.svg';
     .link-item strong {
       font-weight: 700;
       display: block;
-      margin-bottom: 2px;
+      margin-block-end: 2px;
     }
 
     .link-item img {
       height: 40px;
       width: 40px;
-      margin-right: 15px;
+      margin-inline-end: 15px;
       flex: none;
     }
 
@@ -96,15 +96,15 @@ import StackAlt from './assets/stackalt.svg';
       background: #E7FDD8;
       color: #66BF3C;
       padding: 4px 12px;
-      margin-right: 10px;
+      margin-inline-end: 10px;
       vertical-align: top;
     }
 
     .tip-wrapper {
       font-size: 13px;
       line-height: 20px;
-      margin-top: 40px;
-      margin-bottom: 40px;
+      margin-block-start: 40px;
+      margin-block-end: 40px;
     }
 
     .tip-wrapper code {