diff --git a/src/components/HeaderMenu/index.css b/src/components/HeaderMenu/index.css
deleted file mode 100644
index 5d301672..00000000
--- a/src/components/HeaderMenu/index.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.Menu {
-    background: white;
-    border-radius: 6px;
-    display: none;
-    min-width: 140px;
-    position: absolute;
-    top: 24px;
-    z-index: 1;
-}
-
-.MenuItem {
-    -webkit-font-smoothing: antialiased;
-
-    color: #777;
-    font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
-    font-weight: 500;
-    padding: 6px 12px;
-}
-
-.MenuItem:hover {
-    color: #555;
-    cursor: pointer;
-    background: #f9f9f9;
-}
-
-.MenuItem a {
-    color: #777
-}
-
-.MenuItem:hover a {
-    color: #555
-}
-
-.MenuGroup {
-    border-bottom: 2px solid #f5f5f5;
-}
-
-.MenuGroup:first-child .MenuItem:first-child:hover {
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
-}
-
-.MenuGroup:last-child .MenuItem:last-child:hover {
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px;
-}
-
-.MenuGroup:last-child {
-    border-bottom: none;
-}
\ No newline at end of file
diff --git a/src/components/HeaderMenu/index.scss b/src/components/HeaderMenu/index.scss
new file mode 100644
index 00000000..3728c73d
--- /dev/null
+++ b/src/components/HeaderMenu/index.scss
@@ -0,0 +1,47 @@
+.Menu {
+    background: white;
+    border-radius: 6px;
+    display: none;
+    min-width: 140px;
+    position: absolute;
+    top: $unit * 4;
+    z-index: 1;
+}
+
+.MenuItem {
+    color: $grey-10;
+    font-weight: 500;
+    padding: 6px 12px;
+
+    &:hover {
+        background: $grey-90;
+        color: $grey-00;
+        cursor: pointer;
+    }
+
+    a {
+        color: $grey-10;
+
+        &:hover {
+            color: $grey-00;
+        }
+    }
+}
+
+.MenuGroup {
+    border-bottom: 2px solid #f5f5f5;
+
+    &:first-child .MenuItem:first-child:hover {
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+    }
+
+    &:last-child .MenuItem:last-child:hover {
+        border-bottom-left-radius: 6px;
+        border-bottom-right-radius: 6px;
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
\ No newline at end of file
diff --git a/src/components/HeaderMenu/index.tsx b/src/components/HeaderMenu/index.tsx
index 05ada31a..ff1ebbae 100644
--- a/src/components/HeaderMenu/index.tsx
+++ b/src/components/HeaderMenu/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import './index.css'
+import './index.scss'
 
 import LoginModal from '~components/LoginModal'
 import SignupModal from '~components/SignupModal'