diff --git a/src/components/Devices.tsx b/src/components/Devices.tsx
index c4edf9b..9ffefab 100644
--- a/src/components/Devices.tsx
+++ b/src/components/Devices.tsx
@@ -54,7 +54,7 @@ function DesktopDevice({
       className="py-10 border-b border-[#3D425C] flex justify-between items-start relative [clip-path:polygon(0%_-50%,100%_-50%,100%_100%,-50%_100%)]"
       animate={{
         height: hovered
-          ? +(root.current?.clientHeight ?? 0) + descriptionHeight + 24
+          ? (root.current?.clientHeight ?? 0) + descriptionHeight + 24
           : 112,
       }}
     >
diff --git a/src/components/ui/SliderControls.tsx b/src/components/ui/SliderControls.tsx
index 08afed3..c773097 100644
--- a/src/components/ui/SliderControls.tsx
+++ b/src/components/ui/SliderControls.tsx
@@ -1,6 +1,7 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { ArrowLeftIcon } from '../icons/ArrowLeftIcon';
 import { ArrowRightIcon } from '../icons/ArrowRightIcon';
+import { delay } from 'framer-motion';
 
 export const SliderControls = forwardRef<
   { left: () => void; right: () => void },
@@ -32,34 +33,11 @@ export const SliderControls = forwardRef<
     const nextBtnRef = useRef<HTMLButtonElement>(null);
     const rectRef = useRef<SVGRectElement>(null);
 
-    useEffect(() => {
-      const interval = setInterval(() => {
-        nextBtnRef.current?.click();
-      }, 1000);
-
-      return () => clearInterval(interval);
-    }, [onRightClick]);
-
     useImperativeHandle(ref, () => ({
       left: () => prevBtnRef.current?.click(),
       right: () => nextBtnRef.current?.click(),
     }));
 
-    // useEffect(() => {
-    //   if (slide + 1 === slidesCount) {
-    //     rectRef.current!.classList.remove('transition-all', 'duration-300');
-    //     rectRef.current!.setAttribute('stroke-dasharray', `0 ${length}`);
-    //   }
-
-    //   return () => {
-    //     rectRef.current!.classList.add('transition-all', 'duration-300');
-    //   };
-    // }, [length, slide, slidesCount]);
-
-    // useEffect(() => {
-    //   rectRef.current!.classList.add('transition-all', 'duration-300');
-    // }, []);
-
     return (
       <div className={'flex items-center gap-2 ' + className}>
         <div className="relative flex justify-center max-sm:order-2">
@@ -102,26 +80,19 @@ export const SliderControls = forwardRef<
           ref={prevBtnRef}
           onClick={() => {
             if (slide === 0) {
-              let timeout: number | undefined;
               rectRef.current!.classList.remove(
                 'transition-all',
                 'duration-300',
               );
               rectRef.current!.setAttribute('stroke-dasharray', `${length} 0`);
-              new Promise<void>(
-                res =>
-                  (timeout = setTimeout(() => {
-                    rectRef.current!.classList.add(
-                      'transition-all',
-                      'duration-300',
-                    );
-                    res();
-                  }, 1)),
-              ).then(() => {
-                onLeftClick();
-                clearTimeout(timeout);
-              });
-            } else onLeftClick();
+              delay(() => {
+                rectRef.current!.classList.add(
+                  'transition-all',
+                  'duration-300',
+                );
+              }, 1);
+            }
+            onLeftClick();
           }}
           className="rounded-full sm:p-5 p-4 border border-[#3D425C] bg-[#14161F]"
         >
@@ -130,25 +101,19 @@ export const SliderControls = forwardRef<
         <button
           onClick={() => {
             if (slide + 1 === slidesCount) {
-              let timeout: number | undefined;
               rectRef.current!.classList.remove(
                 'transition-all',
                 'duration-300',
               );
               rectRef.current!.setAttribute('stroke-dasharray', `0 ${length}`);
-              new Promise<void>(res => {
-                timeout = setTimeout(() => {
-                  rectRef.current!.classList.add(
-                    'transition-all',
-                    'duration-300',
-                  );
-                  res();
-                }, 300);
-              }).then(() => {
-                onRightClick();
-                clearTimeout(timeout);
-              });
-            } else onRightClick();
+              delay(() => {
+                rectRef.current!.classList.add(
+                  'transition-all',
+                  'duration-300',
+                );
+              }, 1);
+            }
+            onRightClick();
           }}
           ref={nextBtnRef}
           className="rounded-full sm:p-5 p-4 border border-[#3D425C] bg-[#14161F] max-sm:order-2"
diff --git a/src/components/ui/SliderWithScaling.tsx b/src/components/ui/SliderWithScaling.tsx
index 19a7194..07414b5 100644
--- a/src/components/ui/SliderWithScaling.tsx
+++ b/src/components/ui/SliderWithScaling.tsx
@@ -60,32 +60,12 @@ export function SliderWithScaling<T extends { img: string }>({
     [slides[slides.length - 1], ...slides, slides[0]],
   );
 
-  useEffect(() => {
-    const sliderRefCurrent = sliderRef.current;
-
-    sliderRefCurrent?.addEventListener('transitionend', () => {
-      setTransiting(false);
-      setCurrentSliding(null);
-    });
-
-    return () => {
-      sliderRefCurrent?.removeEventListener('transitionend', () => {
-        setTransiting(false);
-        setCurrentSliding(null);
-      });
-    };
-  }, [slide]);
-
   function nextSlide() {
-    // if (!transiting) {
-    // }
     setCurrentSliding('next');
     dispatch('next');
   }
 
   function prevSlide() {
-    // if (!transiting) {
-    // }
     setCurrentSliding('prev');
     dispatch('prev');
   }
@@ -108,6 +88,9 @@ export function SliderWithScaling<T extends { img: string }>({
         <div {...handlers} className="h-full">
           <div
             className={`flex items-${alignItems} gap-x-4 -mr-6 select-none`}
+            onTransitionEnd={() => {
+              setTransiting(false);
+            }}
             style={{
               minHeight: minHeightScaled,
               transform: `translateX(${sliderOffset}px)`,
@@ -115,40 +98,42 @@ export function SliderWithScaling<T extends { img: string }>({
             }}
             ref={sliderRef}
           >
-            {order.map((slide, index) => (
-              <motion.div
-                key={
-                  slide.img +
-                  (index < 1 ? '123' : index > slides.length ? '456' : '')
-                }
-                initial={
-                  currentSliding === 'next' && index === 0
-                    ? { minWidth: minWidthScaled, minHeight: minHeightScaled }
-                    : index === 3
-                      ? { minWidth, minHeight }
-                      : {}
-                }
-                transition={{ duration: 1, type: 'just' }}
-                animate={
-                  index === 1
-                    ? {
-                        minWidth: minWidthScaled,
-                        minHeight: minHeightScaled,
-                      }
-                    : {
-                        minWidth,
-                        minHeight,
-                        transition: { duration: index === 3 ? 0.0001 : 1 },
-                      }
-                }
-                className={'pointer-events-none ' + childClassName}
-              >
-                <SlideElement
-                  {...slide}
-                  ref={index === 1 && !transiting ? itemRef : null}
-                />
-              </motion.div>
-            ))}
+            {order.map((slide, index) => {
+              return (
+                <motion.div
+                  key={
+                    slide.img +
+                    (index < 1 ? '123' : index > slides.length ? '456' : '')
+                  }
+                  initial={
+                    currentSliding === 'next' && index === 0
+                      ? { minWidth: minWidthScaled, minHeight: minHeightScaled }
+                      : index === 3
+                        ? { minWidth, minHeight }
+                        : {}
+                  }
+                  transition={{ duration: 0.9, type: 'just' }}
+                  animate={
+                    index === 1
+                      ? {
+                          minWidth: minWidthScaled,
+                          minHeight: minHeightScaled,
+                        }
+                      : {
+                          minWidth,
+                          minHeight,
+                          transition: { duration: index === 3 ? 0.0001 : 1 },
+                        }
+                  }
+                  className={'pointer-events-none ' + childClassName}
+                >
+                  <SlideElement
+                    {...slide}
+                    ref={index === 1 && !transiting ? itemRef : null}
+                  />
+                </motion.div>
+              );
+            })}
           </div>
         </div>
       </div>