diff --git a/src/components/common/toggle/ToggleRoot.tsx b/src/components/common/toggle/ToggleRoot.tsx
index ded62b3..b1fe9c5 100644
--- a/src/components/common/toggle/ToggleRoot.tsx
+++ b/src/components/common/toggle/ToggleRoot.tsx
@@ -5,8 +5,8 @@ import { theme } from '@/styles/theme'
 import styled from 'styled-components'
 
 const StyledRoot = styled(Switch.Root)`
-  width: 42px;
-  height: 25px;
+  width: 58px;
+  height: 31px;
   background-color: ${theme.color.grey200};
   border-radius: 9999px;
   position: relative;
diff --git a/src/components/common/toggle/ToggleThumb.tsx b/src/components/common/toggle/ToggleThumb.tsx
index 49b6104..3926151 100644
--- a/src/components/common/toggle/ToggleThumb.tsx
+++ b/src/components/common/toggle/ToggleThumb.tsx
@@ -6,17 +6,16 @@ import styled from 'styled-components'
 
 const StyledThumb = styled(Switch.SwitchThumb)`
   display: block;
-  width: 21px;
-  height: 21px;
+  width: 25px;
+  height: 25px;
   background-color: ${theme.color.white};
   border-radius: 9999px;
-  box-shadow: 0 2px 2px var(--black-a7);
   transition: transform 300ms;
   transform: translateX(2px);
   will-change: transform;
 
   &[data-state='checked'] {
-    transform: translateX(19px);
+    transform: translateX(30px);
   }
 `