diff --git a/public/scroll-to-top-icon.svg b/public/scroll-to-top-icon.svg
new file mode 100644
index 000000000..fd9b29dee
--- /dev/null
+++ b/public/scroll-to-top-icon.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<circle cx="25" cy="25" r="25" fill="white" fill-opacity="0.6" />
+	<path d="M25 41C16.18 41 9 33.82 9 25C9 16.18 16.18 9 25 9C33.82 9 41 16.18 41 25C41 33.82 33.82 41 25 41ZM25 45C36.04 45 45 36.04 45 25C45 13.96 36.04 5 25 5C13.96 5 5 13.96 5 25C5 36.04 13.96 45 25 45ZM25 19L33 27L17 27L25 19Z" fill="black" fill-opacity="0.8" />
+</svg>
diff --git a/src/components/client/layout/ScrollToTop.tsx b/src/components/client/layout/ScrollToTop.tsx
index f1da36615..0aa8be48e 100644
--- a/src/components/client/layout/ScrollToTop.tsx
+++ b/src/components/client/layout/ScrollToTop.tsx
@@ -1,11 +1,14 @@
 import React, { useEffect, useState } from 'react'
 
-import { ArrowCircleUp } from '@mui/icons-material'
+import Image from 'next/image'
+
 import { Box } from '@mui/material'
 
 import theme from 'common/theme'
 
 const ScrollToTop = () => {
+  const scrollToTopButtonPath = '/scroll-to-top-icon.svg'
+
   const [isVisible, setIsVisible] = useState(false)
 
   const toggleVisibility = () => {
@@ -39,13 +42,7 @@ const ScrollToTop = () => {
             bottom: theme.spacing(2),
           }}
           onClick={scrollToTop}>
-          <ArrowCircleUp
-            sx={{
-              width: theme.spacing(8),
-              height: theme.spacing(8),
-              color: theme.palette.primary.main,
-            }}
-          />
+          <Image src={scrollToTopButtonPath} width={64} height={64} alt="Scroll to top button" />
         </Box>
       )}
     </div>