diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte
index 74ef3be3..4e23d53d 100644
--- a/src/components/BeforeAfter/BeforeAfter.stories.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte
@@ -40,13 +40,13 @@
     afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
   >
     {#snippet beforeOverlay()}
-      <div class="overlay p-3 before text-left">
+      <div class="overlay p-3 before">
         <p class="h4 font-bold">July 7, 2020</p>
         <p class="body-note">Initially, this site was far smaller.</p>
       </div>
     {/snippet}
     {#snippet afterOverlay()}
-      <div class="overlay p-3 after text-right">
+      <div class="overlay p-3 after">
         <p class="h4 font-bold">Oct. 20, 2020</p>
         <p class="body-note">But then forces built up.</p>
       </div>
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index adf8250a..3a79ef3d 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -280,6 +280,7 @@
 
   button.before-after-container {
     box-sizing: content-box;
+    text-align: inherit;
 
     img {
       top: 0;
@@ -352,18 +353,18 @@
       height: 0;
       user-select: none;
       position: relative;
-      border-top: 10px solid transparent;
-      border-bottom: 10px solid transparent;
+      border-block-start: 10px solid transparent;
+      border-block-end: 10px solid transparent;
     }
     .arrow-right {
-      left: 19px;
-      bottom: 14px;
-      border-left: 10px solid var(--before-after-handle-colour);
+      inset-inline-start: 19px;
+      inset-block-end: 14px;
+      border-inline-start: 10px solid var(--before-after-handle-colour);
     }
     .arrow-left {
-      left: 3px;
-      top: 6px;
-      border-right: 10px solid var(--before-after-handle-colour);
+      inset-inline-start: 3px;
+      inset-block-start: 6px;
+      border-inline-end: 10px solid var(--before-after-handle-colour);
     }
   }
 
diff --git a/src/components/Byline/Byline.stories.svelte b/src/components/Byline/Byline.stories.svelte
index 33705d5a..c79cffd9 100644
--- a/src/components/Byline/Byline.stories.svelte
+++ b/src/components/Byline/Byline.stories.svelte
@@ -9,7 +9,7 @@
     argTypes: {
       align: {
         control: 'select',
-        options: ['left', 'center'],
+        options: ['auto', 'center'],
       },
     },
   });
diff --git a/src/components/Byline/Byline.svelte b/src/components/Byline/Byline.svelte
index ae41a269..c67cb91e 100644
--- a/src/components/Byline/Byline.svelte
+++ b/src/components/Byline/Byline.svelte
@@ -21,7 +21,7 @@
     /**
      * Alignment of the byline.
      */
-    align?: 'left' | 'center';
+    align?: 'auto' | 'center';
     /**
      * Add an id to to target with custom CSS.
      * @type {string}
@@ -54,7 +54,7 @@
     authors = [],
     publishTime,
     updateTime,
-    align = 'left',
+    align = 'auto',
     id = '',
     cls = '',
     getAuthorPage = getAuthorPageUrl,
@@ -63,7 +63,7 @@
     updated,
   }: Props = $props();
 
-  let alignmentClass = $derived(align === 'left' ? 'text-left' : 'text-center');
+  let alignmentClass = $derived(align === 'center' ? 'text-center' : '');
 
   /**
   /* Date validation and formatter functions
diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
index 01e78d05..831f2c34 100644
--- a/src/components/SearchInput/SearchInput.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -57,8 +57,8 @@
   .search {
     width: 250px;
     .search--icon {
-      left: 0.5rem;
-      top: 0.55rem;
+      inset-inline-start: 0.5rem;
+      inset-block-start: 0.55rem;
       width: 1.5rem;
       height: 1.5rem;
       fill: mixins.$theme-colour-brand-rules;
@@ -71,8 +71,8 @@
       width: 100%;
     }
     .search--x {
-      right: 0;
-      top: 0.55rem;
+      inset-inline-end: 0;
+      inset-block-start: 0.55rem;
       width: 1.5rem;
       height: 1.5rem;
       fill: mixins.$theme-colour-text-primary;
diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte
index ea292d9c..0a13767d 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.svelte
@@ -95,15 +95,15 @@
   @use '../../scss/mixins' as mixins;
   .timeline {
     .date {
-      border-left: 1px solid var(--symbol-colour);
+      border-inline-start: 1px solid var(--symbol-colour);
       &:last-child {
-        border-left: 1px solid mixins.$theme-colour-background;
+        border-inline-start: 1px solid mixins.$theme-colour-background;
         @include mixins.fpb-0;
       }
     }
     svg {
-      top: -1px;
-      left: -10px;
+      inset-block-start: -1px;
+      inset-inline-start: -10px;
     }
     div.title {
       @include mixins.fmt-2;
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index 1a4a442a..0cd90bb7 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -304,7 +304,7 @@
     thead {
       tr {
         th {
-          border-bottom: 1px solid var(--theme-colour-text-primary);
+          border-block-end: 1px solid var(--theme-colour-text-primary);
           @include mixins.bg;
           text-align: inherit;
           &.sortable {
@@ -314,7 +314,7 @@
           .table--thead--sortarrow {
             display: inline-block;
             position: relative;
-            top: 5px;
+            inset-inline-start: 5px;
           }
         }
       }
@@ -325,7 +325,7 @@
         @include mixins.font-regular;
         font-variant-numeric: tabular-nums;
         vertical-align: top;
-        border-bottom: 1px solid
+        border-block-end: 1px solid
           var(--theme-colour-brand-rules, var(--tr-muted-grey));
         &.no-results {
           @include mixins.text-secondary;
@@ -334,7 +334,7 @@
     }
     tfoot.table--tfoot {
       tr {
-        border-bottom: 0;
+        border-block-end: 0;
       }
       td {
         @include mixins.body-caption;
@@ -342,7 +342,7 @@
     }
     &.truncated {
       tbody tr:last-child:not(:first-child) {
-        border-bottom: none;
+        border-block-end: none;
         mask-image: linear-gradient(
           to bottom,
           var(--theme-colour-text-primary) 0%,
diff --git a/src/components/Table/components/RightArrow.svelte b/src/components/Table/components/NextArrow.svelte
similarity index 86%
rename from src/components/Table/components/RightArrow.svelte
rename to src/components/Table/components/NextArrow.svelte
index cbc5acaa..3749a681 100644
--- a/src/components/Table/components/RightArrow.svelte
+++ b/src/components/Table/components/NextArrow.svelte
@@ -15,4 +15,7 @@
     width: 1rem;
     fill: currentColor;
   }
+  :global([dir='rtl']) .icon {
+    transform: rotate(180deg);
+  }
 </style>
diff --git a/src/components/Table/components/Pagination.svelte b/src/components/Table/components/Pagination.svelte
index 254215d5..10f3443e 100644
--- a/src/components/Table/components/Pagination.svelte
+++ b/src/components/Table/components/Pagination.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { intcomma } from 'journalize';
-  import LeftArrow from './LeftArrow.svelte';
-  import RightArrow from './RightArrow.svelte';
+  import PrevArrow from './PrevArrow.svelte';
+  import NextArrow from './NextArrow.svelte';
 
   interface Props {
     /**
@@ -49,7 +49,7 @@
 <nav aria-label="pagination" class="pagination fmt-4">
   <button onclick={goToPreviousPage} disabled={pageNumber === 1}
     ><div class="icon-wrapper">
-      <LeftArrow />
+      <PrevArrow />
       <span class="visually-hidden">Previous page</span>
     </div></button
   >
@@ -62,7 +62,7 @@
     onclick={goToNextPage}
     disabled={pageNumber === Math.ceil(n / pageSize)}
     ><div class="icon-wrapper">
-      <RightArrow />
+      <NextArrow />
       <span class="visually-hidden">Next page</span>
     </div></button
   >
@@ -75,6 +75,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: row;
 
     button {
       border: 1px solid var(--theme-colour-text-secondary, var(--tr-light-grey));
diff --git a/src/components/Table/components/LeftArrow.svelte b/src/components/Table/components/PrevArrow.svelte
similarity index 86%
rename from src/components/Table/components/LeftArrow.svelte
rename to src/components/Table/components/PrevArrow.svelte
index e9ae977d..3545a94d 100644
--- a/src/components/Table/components/LeftArrow.svelte
+++ b/src/components/Table/components/PrevArrow.svelte
@@ -15,4 +15,7 @@
     width: 1rem;
     fill: currentColor;
   }
+  :global([dir='rtl']) .icon {
+    transform: rotate(180deg);
+  }
 </style>
diff --git a/src/components/Table/components/Select.svelte b/src/components/Table/components/Select.svelte
index 7b516572..9df3166d 100644
--- a/src/components/Table/components/Select.svelte
+++ b/src/components/Table/components/Select.svelte
@@ -23,7 +23,7 @@
   }
 </script>
 
-<div class="select">
+<div class="select relative inline-flex">
   <select
     class="select--input body-caption fpx-2"
     name="select--input"
@@ -34,6 +34,18 @@
       <option value={obj.value}>{obj.text} {label.toLowerCase()}</option>
     {/each}
   </select>
+  <div class="arrow absolute">
+    <svg
+      width="15"
+      height="9"
+      viewBox="0 0 15 9"
+      xmlns="http://www.w3.org/2000/svg"
+      ><path
+        d="M6.76474 8.30466L0.236082 1.54523C-0.0786943 1.21934 -0.0786943 0.69069 0.236082 0.364804C0.550521 0.0392666 1.19794 0.0403099 1.51305 0.364804L7.33483 6.49522L12.9249 0.475171C13.3549 0.0451683 14.1195 0.0396141 14.4339 0.365152C14.7487 0.691037 14.7487 1.21969 14.4339 1.54557L7.90492 8.30466C7.59015 8.63054 7.07952 8.63054 6.76474 8.30466Z"
+        fill="var(--theme-colour-brand-rules)"
+      /></svg
+    >
+  </div>
 </div>
 
 <style lang="scss">
@@ -50,12 +62,13 @@
       -moz-appearance: none; /* Firefox */
       -webkit-appearance: none; /* Safari and Chrome */
       appearance: none; /* Remove the default arrow */
-
-      background: transparent;
-      background-image: url('data:image/svg+xml;utf8,<svg width="15" height="9" viewBox="0 0 15 9" xmlns="http://www.w3.org/2000/svg"><path d="M6.76474 8.30466L0.236082 1.54523C-0.0786943 1.21934 -0.0786943 0.69069 0.236082 0.364804C0.550521 0.0392666 1.19794 0.0403099 1.51305 0.364804L7.33483 6.49522L12.9249 0.475171C13.3549 0.0451683 14.1195 0.0396141 14.4339 0.365152C14.7487 0.691037 14.7487 1.21969 14.4339 1.54557L7.90492 8.30466C7.59015 8.63054 7.07952 8.63054 6.76474 8.30466Z" fill="gray"/></svg>');
-      background-repeat: no-repeat;
-      background-position-x: 225px;
-      background-position-y: 55%;
+    }
+    .arrow {
+      pointer-events: none;
+      inset-inline-end: 0;
+      inset-block-start: 0.55rem;
+      width: 1.5rem;
+      height: 1.5rem;
     }
     .select--input::-ms-expand {
       display: none; /* Remove the default arrow in Internet Explorer 11 */