diff --git a/app/components/ScrollToTop.vue b/app/components/ScrollToTop.vue
index a2840d3911..c05ec1a2e8 100644
--- a/app/components/ScrollToTop.vue
+++ b/app/components/ScrollToTop.vue
@@ -36,11 +36,11 @@ onMounted(() => {
   <button
     v-if="isActive && supportsScrollStateQueries"
     type="button"
-    class="scroll-to-top-css fixed bottom-4 right-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
+    class="scroll-to-top-css fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
     :aria-label="$t('common.scroll_to_top')"
     @click="scrollToTop"
   >
-    <span class="i-carbon-arrow-up w-5 h-5" aria-hidden="true" />
+    <span class="i-carbon:arrow-up w-5 h-5" aria-hidden="true" />
   </button>
 
   <!-- JS fallback for browsers without scroll-state support -->
@@ -56,11 +56,11 @@ onMounted(() => {
     <button
       v-if="isActive && isMounted && isVisible"
       type="button"
-      class="fixed bottom-4 right-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
+      class="fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
       :aria-label="$t('common.scroll_to_top')"
       @click="scrollToTop"
     >
-      <span class="i-carbon-arrow-up w-5 h-5" aria-hidden="true" />
+      <span class="i-carbon:arrow-up w-5 h-5" aria-hidden="true" />
     </button>
   </Transition>
 </template>