diff --git a/app/src/components/content/HorizontalContentTileCollection.vue b/app/src/components/content/HorizontalContentTileCollection.vue
index 83b91d3380..5edbef917c 100644
--- a/app/src/components/content/HorizontalContentTileCollection.vue
+++ b/app/src/components/content/HorizontalContentTileCollection.vue
@@ -113,29 +113,27 @@ useInfiniteScroll(
 
         <div class="relative">
             <div
-                class="group absolute left-0 top-0 z-10 h-full cursor-pointer px-6"
+                class="group absolute left-0 top-0 z-30 h-full cursor-pointer px-6"
                 @click="spinLeft()"
             >
                 <ArrowLeftCircleIcon
                     v-if="showLeftSpin"
                     :class="[
-                        'mt-7 h-10 w-10 text-zinc-100 opacity-80 group-hover:opacity-90 md:h-14 md:w-14',
+                        'mt-7 h-10 w-10 text-zinc-100 opacity-80 transition-opacity duration-200 group-hover:opacity-100 md:h-14 md:w-14',
                         computedTitlePosition === 'overlay' ? 'md:mt-20' : 'md:mt-10',
                     ]"
-                    @click="spinLeft()"
                 />
             </div>
             <div
-                class="group absolute right-0 top-0 z-10 h-full cursor-pointer px-6"
+                class="group absolute right-0 top-0 z-30 h-full cursor-pointer px-6"
                 @click="spinRight()"
             >
                 <ArrowRightCircleIcon
                     v-if="showRightSpin"
                     :class="[
-                        'h-10 w-10 text-zinc-100 opacity-80 group-hover:opacity-90 md:mt-10 md:h-14 md:w-14',
+                        'mt-7 h-10 w-10 text-zinc-100 opacity-80 transition-opacity duration-200 group-hover:opacity-100 md:h-14 md:w-14',
                         computedTitlePosition === 'overlay' ? 'md:mt-20' : 'md:mt-10',
                     ]"
-                    @click="spinRight()"
                 />
             </div>