diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 723d0333..50f0a131 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -635,6 +635,9 @@ body.zen-mode-enable {
   .ms-2 {
     margin-inline-start: calc(var(--spacing) * 2);
   }
+  .ms-6 {
+    margin-inline-start: calc(var(--spacing) * 6);
+  }
   .me-1 {
     margin-inline-end: calc(var(--spacing) * 1);
   }
@@ -1210,9 +1213,6 @@ body.zen-mode-enable {
   .mb-\[2px\] {
     margin-bottom: 2px;
   }
-  .-ml-12 {
-    margin-left: calc(var(--spacing) * -12);
-  }
   .ml-0 {
     margin-left: calc(var(--spacing) * 0);
   }
@@ -1222,9 +1222,6 @@ body.zen-mode-enable {
   .ml-3 {
     margin-left: calc(var(--spacing) * 3);
   }
-  .ml-6 {
-    margin-left: calc(var(--spacing) * 6);
-  }
   .ml-auto {
     margin-left: auto;
   }
@@ -1779,6 +1776,10 @@ body.zen-mode-enable {
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 1px;
   }
+  .border-s-2 {
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 2px;
+  }
   .border-s-\[0\.125rem\] {
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 0.125rem;
@@ -1795,10 +1796,6 @@ body.zen-mode-enable {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
   }
-  .border-l-2 {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 2px;
-  }
   .border-dotted {
     --tw-border-style: dotted;
     border-style: dotted;
@@ -3236,6 +3233,11 @@ body.zen-mode-enable {
       margin-right: calc(var(--spacing) * 4);
     }
   }
+  .ltr\:-ml-12 {
+    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+      margin-left: calc(var(--spacing) * -12);
+    }
+  }
   .ltr\:block {
     &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
       display: block;
@@ -3261,6 +3263,11 @@ body.zen-mode-enable {
       left: calc(var(--spacing) * 0);
     }
   }
+  .rtl\:-mr-\[79px\] {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      margin-right: calc(79px * -1);
+    }
+  }
   .rtl\:ml-4 {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       margin-left: calc(var(--spacing) * 4);
diff --git a/layouts/shortcodes/timeline.html b/layouts/shortcodes/timeline.html
index 175ab5b9..a94352a1 100644
--- a/layouts/shortcodes/timeline.html
+++ b/layouts/shortcodes/timeline.html
@@ -1,3 +1,3 @@
-<ol class="border-l-2 border-primary-500 dark:border-primary-300 list-none">
+<ol class="border-s-2 border-primary-500 dark:border-primary-300 list-none">
   {{- .Inner -}}
 </ol>
diff --git a/layouts/shortcodes/timelineItem.html b/layouts/shortcodes/timelineItem.html
index df9c9632..4937993a 100644
--- a/layouts/shortcodes/timelineItem.html
+++ b/layouts/shortcodes/timelineItem.html
@@ -3,12 +3,12 @@
 {{ $badge := .Get "badge" }}
 {{ $subheader := .Get "subheader" }}
 <li>
-  <div class="flex flex-start">
+  <div class="flex">
     <div
-      class="bg-primary-500 dark:bg-primary-300 text-neutral-50 dark:text-neutral-700 min-w-[30px] h-8 text-2xl flex items-center justify-center rounded-full -ml-12 mt-5">
+      class="bg-primary-500 dark:bg-primary-300 text-neutral-50 dark:text-neutral-700 min-w-[30px] h-8 text-2xl flex items-center justify-center rounded-full ltr:-ml-12 rtl:-mr-[79px] mt-5">
       {{ partial "icon" $icon }}
     </div>
-    <div class="block p-6 rounded-lg shadow-2xl min-w-full ml-6 mb-10 break-words">
+    <div class="block p-6 rounded-lg shadow-2xl flex-1 ms-6 mb-10 break-words">
       <div class="flex justify-between">
         {{ if $header }}
           <h2 class="mt-0">{{ $header }}</h2>
@@ -29,4 +29,4 @@
       </div>
     </div>
   </div>
-</li>
+</li>
\ No newline at end of file