diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx
index 4a3d3ad02fd..a70717c9dc6 100644
--- a/src/components/Icon/IconArrowSmall.tsx
+++ b/src/components/Icon/IconArrowSmall.tsx
@@ -19,6 +19,7 @@ export const IconArrowSmall = memo<
   const classes = cn(className, {
     'rotate-180': displayDirection === 'left',
     'rotate-180 rtl:rotate-0': displayDirection === 'start',
+    'rtl:rotate-180': displayDirection === 'end',
     'rotate-90': displayDirection === 'down',
   });
   return (
diff --git a/src/components/MDX/Challenges/Navigation.tsx b/src/components/MDX/Challenges/Navigation.tsx
index 736db093c69..b4d8c0924c4 100644
--- a/src/components/MDX/Challenges/Navigation.tsx
+++ b/src/components/MDX/Challenges/Navigation.tsx
@@ -108,7 +108,7 @@ export function Navigation({
           onClick={handleScrollLeft}
           aria-label="Scroll left"
           className={cn(
-            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l border-gray-20 border-r rtl:rotate-180',
+            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l rtl:rounded-r rtl:rounded-l-none border-gray-20 border-r rtl:border-l rtl:border-r-0',
             {
               'text-primary dark:text-primary-dark': canScrollLeft,
               'text-gray-30': !canScrollLeft,
@@ -120,7 +120,7 @@ export function Navigation({
           onClick={handleScrollRight}
           aria-label="Scroll right"
           className={cn(
-            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e rtl:rotate-180',
+            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e',
             {
               'text-primary dark:text-primary-dark': canScrollRight,
               'text-gray-30': !canScrollRight,