diff --git a/client/src/components/layout/ProjectsSlider/index.tsx b/client/src/components/layout/ProjectsSlider/index.tsx
index 398fb966323f5c86a8c60c48ea567e14cd61d1bc..ac755bde57dbfde1957d7b2ae88d0b1db4a97291 100644
--- a/client/src/components/layout/ProjectsSlider/index.tsx
+++ b/client/src/components/layout/ProjectsSlider/index.tsx
@@ -1,5 +1,5 @@
 
-import { useCallback, useRef } from 'react';
+import { CSSProperties, useCallback, useState } from 'react';
 
 import ProjectSlide, { ProjectSlideProps } from 'components/ui/ProjectSlide';
 
@@ -10,24 +10,25 @@ interface Props {
 }
 
 export default function ProjectsSlider({ projects }: Props) {
-    const slider = useRef<HTMLDivElement | null>(null);
+    const [position, setPosition] = useState(0);
 
     const onChange = useCallback(amount => {
-        const current = parseFloat(slider.current?.style.getPropertyValue('--position') ?? '0') || 0;
-        const next = Math.min(Math.max(current + amount, 0), projects.length - 1);
-        slider.current?.style.setProperty('--position', next.toString());
-    }, [slider, projects]);
+        const nextPosition = Math.min(Math.max(position + amount, 0), projects.length - 1);
+        setPosition(nextPosition);
+    }, [position, setPosition, projects]);
 
     return (
         projects.length
             ? (
-                <div className="project-slider" ref={slider}>
-                    <div className="prev-button" onClick={() => onChange(-1)}>
-                        &lt;
-                    </div>
-                    <div className = "next-button" onClick={() => onChange(1)}>
-                        &gt;
-                    </div>
+                <div className="project-slider" style={{ '--position': position } as CSSProperties}>
+                    <div
+                        className={'prev-button' + (position > 0 ? '' : ' disabled' )}
+                        onClick={() => onChange(-1)}
+                    >&lt;</div>
+                    <div
+                        className={'next-button' + (position < projects.length - 1 ? '' : ' disabled')}
+                        onClick={() => onChange(1)}
+                    >&gt;</div>
                     {
                         projects.map(project =>
                             <div
diff --git a/client/src/components/layout/ProjectsSlider/projects-slider.scss b/client/src/components/layout/ProjectsSlider/projects-slider.scss
index 66e4c5cbf9afcaa90a34c59a52fdbfb22eeb41af..0eb5b5179b130f7c2cff8496352c2533635f74da 100644
--- a/client/src/components/layout/ProjectsSlider/projects-slider.scss
+++ b/client/src/components/layout/ProjectsSlider/projects-slider.scss
@@ -24,7 +24,12 @@
         top: 50%;
         transform: translateY(-50%);
         justify-content: center;
-        align-items: center;;
+        align-items: center;
+
+        &.disabled {
+            opacity: 0.1;
+            cursor: auto;
+        }
     }
 
     .prev-button {