diff --git a/src/components/App/SideBar/FilterSearch/Hops/index.tsx b/src/components/App/SideBar/FilterSearch/Hops/index.tsx
index b77cfd107..121fa98e0 100644
--- a/src/components/App/SideBar/FilterSearch/Hops/index.tsx
+++ b/src/components/App/SideBar/FilterSearch/Hops/index.tsx
@@ -2,6 +2,7 @@ import { Checkbox, FormControlLabel } from '@mui/material'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { HeadingWrapper, PopoverBody, SubHeading } from '../index'
+import { colors } from '~/utils'
 
 type HopsProps = {
   hops: number
@@ -36,10 +37,37 @@ const HopsWrapper = styled(Flex).attrs({
   gap: 10px;
 `
 
-const CustomCheckbox = styled(Checkbox)`
+const UncheckedIcon = styled('span')`
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  border-radius: 4px;
+  border: 1px solid gray;
+`
+
+const CheckedIcon = styled(UncheckedIcon)`
+  background-color: ${colors.primaryBlue};
+
+  &::before {
+    content: '';
+    display: block;
+    width: 15px;
+    height: 25px;
+    margin: auto;
+    position: relative;
+    top: 4px;
+    left: 1px;
+    background-color: white;
+    mask-image: url('/svg-icons/CheckIcon.svg');
+    mask-size: contain;
+    mask-repeat: no-repeat;
+  }
+`
+
+const CustomCheckbox = styled((props) => (
+  <Checkbox {...props} checkedIcon={<CheckedIcon />} icon={<UncheckedIcon />} />
+))`
   && {
-    .MuiSvgIcon-root {
-      border-radius: 8px;
-    }
+    padding: 15px;
   }
 `