diff --git a/frontend/src/assets/styles/listRow.css b/frontend/src/assets/styles/listRow.css
index 5c599c4..fd9f310 100644
--- a/frontend/src/assets/styles/listRow.css
+++ b/frontend/src/assets/styles/listRow.css
@@ -1,8 +1,23 @@
-.hide-scrollbar::-webkit-scrollbar {
-    display: none; 
+:root {
+    --scrollbar-background: linear-gradient(to right, #6a11cb, #2575fc);
+    --scrollbar-thumb: rgba(255, 255, 255, 0.6);
 }
-  
-.hide-scrollbar {
-    -ms-overflow-style: none; 
-    scrollbar-width: none; 
-}
\ No newline at end of file
+
+::-webkit-scrollbar {
+    height: 4px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.9);
+}
+
diff --git a/frontend/src/components/Layout/ListRow.tsx b/frontend/src/components/Layout/ListRow.tsx
index e52e087..e2c532a 100644
--- a/frontend/src/components/Layout/ListRow.tsx
+++ b/frontend/src/components/Layout/ListRow.tsx
@@ -47,7 +47,7 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
 
 	const [currentItems, setCurrentItems] = useState<ItemType[]>(items);
 	const slider = useRef<HTMLDivElement>(null);
-	const scrollAmount = window.innerWidth * 0.3;
+	const scrollAmount = window.innerWidth * 0.4;
 	const navigate = useNavigate();
 
 	const addMoreItems = (newItems: ItemType[]) => {