diff --git a/src/components/SegmentedControl/index.css b/src/components/SegmentedControl/index.scss
similarity index 83%
rename from src/components/SegmentedControl/index.css
rename to src/components/SegmentedControl/index.scss
index 45ff96dd..0416e786 100644
--- a/src/components/SegmentedControl/index.css
+++ b/src/components/SegmentedControl/index.scss
@@ -1,12 +1,12 @@
 .SegmentedControlWrapper {
     display: flex;
     justify-content: center;
-    margin-bottom: 24px;
+    margin-bottom: $unit * 3;
 }
 
 .SegmentedControl {
     background: white;
-    border-radius: 8px;
+    border-radius: $unit;
     display: inline-flex;
     position: relative;
     user-select: none;
diff --git a/src/components/SegmentedControl/index.tsx b/src/components/SegmentedControl/index.tsx
index 19608eea..8e0ff471 100644
--- a/src/components/SegmentedControl/index.tsx
+++ b/src/components/SegmentedControl/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import './index.css'
+import './index.scss'
 
 interface Props {}