diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css
index 740c30369..998ebe1ee 100644
--- a/components/product/ProductSlider/ProductSlider.module.css
+++ b/components/product/ProductSlider/ProductSlider.module.css
@@ -1,19 +1,21 @@
 .root {
-  @apply relative w-full h-full relative;
+  @apply relative w-full h-full;
   overflow-y: hidden;
 }
 
 .leftControl,
 .rightControl {
-  @apply text-white text-xl absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
+  @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
 }
 
 .leftControl {
-  @apply left-6;
+  @apply bg-cover left-10 md:left-6;
+  background-image: url('public/cursor-left.png');
 }
 
 .rightControl {
-  @apply right-6;
+  @apply bg-cover right-10 md:right-6;
+  background-image: url('public/cursor-right.png');
 }
 
 .control {
@@ -66,11 +68,3 @@
 .positionIndicatorActive:hover .dot {
   @apply bg-white;
 }
-/* sx={{
-  width: '10px',
-  height: '10px',
-  bg: currentSlide === idx ? 'primary' : 'gray',
-  borderRadius: 'full',
-  mx: 2,
-  '&:focus': { outline: 'none' },
-}} */
diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx
index 0b95ba1e2..d22b58f83 100644
--- a/components/product/ProductSlider/ProductSlider.tsx
+++ b/components/product/ProductSlider/ProductSlider.tsx
@@ -1,6 +1,6 @@
 import { useKeenSlider } from 'keen-slider/react'
+import Image from 'next/image'
 import React, { Children, FC, isValidElement, useState } from 'react'
-import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'
 import cn from 'classnames'
 
 import s from './ProductSlider.module.css'
@@ -20,12 +20,11 @@ const ProductSlider: FC = ({ children }) => {
 
   return (
     <div className={s.root}>
-      <button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
-        <HiChevronLeft />
-      </button>
-      <button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
-        <HiChevronRight />
-      </button>
+      <button className={cn(s.leftControl, s.control)} onClick={slider?.prev} />
+      <button
+        className={cn(s.rightControl, s.control)}
+        onClick={slider?.next}
+      />
       <div
         ref={ref}
         className="keen-slider h-full transition-opacity duration-150"
diff --git a/public/cursor-left.png b/public/cursor-left.png
index b1233e279..3c292b044 100644
Binary files a/public/cursor-left.png and b/public/cursor-left.png differ
diff --git a/public/cursor-right.png b/public/cursor-right.png
index ee78d78c6..e3b46de42 100644
Binary files a/public/cursor-right.png and b/public/cursor-right.png differ