diff --git a/src/renderer/components/available-versions/available-versions-nav-bar.component.tsx b/src/renderer/components/available-versions/available-versions-nav-bar.component.tsx
index 98759d6d..c491bc25 100644
--- a/src/renderer/components/available-versions/available-versions-nav-bar.component.tsx
+++ b/src/renderer/components/available-versions/available-versions-nav-bar.component.tsx
@@ -13,8 +13,8 @@ export function AvailableVersionsNavBar(props: {years: string[], setSelectedYear
       <div className="relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden mb-3 shadow-md shadow-gray-800">
         <div className="absolute w-full h-1 bottom-0">  
           <span className="absolute h-full w-full bg-red-500 brightness-50"></span>
-          <span className="absolute h-full block w-20 bg-red-500 transition-transform duration-700 shadow-lg shadow-red-500" style={{transform: `translate(${selectedYearIndex * 100}%, 0)`}}></span>
-          <span className="fixed h-1 block w-20 shadow-center bg-transparent shadow-red-500 transition-transform duration-700" style={{transform: `translate(${selectedYearIndex * 100}%, 0)`}}></span>
+          <span className="absolute h-full block w-20 bg-red-500 transition-transform duration-500 shadow-lg shadow-red-500" style={{transform: `translate(${selectedYearIndex * 100}%, 0)`}}></span>
+          <span className="fixed h-1 block w-20 shadow-center bg-transparent shadow-red-500 transition-transform duration-500" style={{transform: `translate(${selectedYearIndex * 100}%, 0)`}}></span>
         </div>
         { props.years.map((y, index) => 
           <span className="w-20 h-full inline-block bg-main-color-2 text-gray-200 text-lg font-bold text-center hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{y}</span>
diff --git a/src/renderer/components/available-versions/available-versions-slider.component.tsx b/src/renderer/components/available-versions/available-versions-slider.component.tsx
index 6513ce48..17440e06 100644
--- a/src/renderer/components/available-versions/available-versions-slider.component.tsx
+++ b/src/renderer/components/available-versions/available-versions-slider.component.tsx
@@ -27,7 +27,7 @@ export function AvailableVersionsSlider() {
   return (
     <div className="w-full h-fit max-h-full relative flex flex-col items-center grow min-h-0">
       <AvailableVersionsNavBar years={availableYears} setSelectedYear={setSelectedYear}></AvailableVersionsNavBar>
-      <div className="w-full min-h-0 flex transition-transform duration-700" style={{transform: `translate(${-(yearIndex * 100)}%, 0)`}}>
+      <div className="w-full min-h-0 flex transition-transform duration-500" style={{transform: `translate(${-(yearIndex * 100)}%, 0)`}}>
         { availableYears.map((year, index) =>
           <AvailableVersionsSlide key={index} year={year}></AvailableVersionsSlide>
         )}