diff --git a/src/components/FrameworkIconTabs.tsx b/src/components/FrameworkIconTabs.tsx
index 0034eeece..642f97fbb 100644
--- a/src/components/FrameworkIconTabs.tsx
+++ b/src/components/FrameworkIconTabs.tsx
@@ -30,7 +30,7 @@ export function FrameworkIconTabs({
       role="group"
       aria-label="Choose framework"
       className={twMerge(
-        'fade-x fade-size-x-sm flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default scrollbar-hide',
+        'fade-end fade-size-x-sm flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default scrollbar-hide',
         className,
       )}
     >
diff --git a/src/components/markdown/FileTabs.tsx b/src/components/markdown/FileTabs.tsx
index de3462f01..174b9baad 100644
--- a/src/components/markdown/FileTabs.tsx
+++ b/src/components/markdown/FileTabs.tsx
@@ -50,7 +50,7 @@ export function FileTabs({ tabs, children }: FileTabsProps) {
       <div
         role="tablist"
         onKeyDown={handleTabListKeyDown}
-        className="fade-x fade-size-x-sm flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default"
+        className="fade-end fade-size-x-sm flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default"
       >
         {tabs.map((tab) => {
           const isActive = activeSlug === tab.slug
diff --git a/src/components/markdown/Tabs.tsx b/src/components/markdown/Tabs.tsx
index 183ca2dec..c9292ef1e 100644
--- a/src/components/markdown/Tabs.tsx
+++ b/src/components/markdown/Tabs.tsx
@@ -85,7 +85,7 @@ export function Tabs({
       <div
         role="tablist"
         onKeyDown={handleTabListKeyDown}
-        className="not-prose fade-x fade-size-x-sm flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default"
+        className="not-prose fade-end fade-size-x-sm flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default"
       >
         {tabsProp.map((tab) => {
           return (