diff --git a/packages/ui/src/atoms/Badge.js b/packages/ui/src/atoms/Badge.js
index eb6f00420bc27789af4fc134841df0fd81c1ef54..ec3dfcb4c9402a4a347ba8cc512c17c6ac75f7b3 100644
--- a/packages/ui/src/atoms/Badge.js
+++ b/packages/ui/src/atoms/Badge.js
@@ -1,13 +1,43 @@
 import React from 'react'
-import classes from './Badge.local.scss'
+import styled from 'styled-components'
+
+const Root = styled.span`
+  align-items: center;
+  background: linear-gradient(
+    #fff 0,
+    #fff 1.1em,
+    grey 1.1em,
+    grey 1.2em,
+    #fff 1.15em,
+    #fff 2em
+  );
+  font-family: var(--font-interface);
+  font-size: 1em;
+  margin-right: 1em;
+  padding-bottom: 1em;
+`
+
+const Count = styled.span`
+  border-radius: 50%;
+  color: grey;
+  font-size: 1em;
+  font-weight: 600;
+  padding-right: 0.5em;
+  text-align: center;
+`
+
+const Label = styled.span`
+  display: inline-block;
+  padding: 0;
+  text-shadow: 0.05em 0.05em 0 #fff, -0.05em -0.05em 0 #fff,
+    -0.05em 0.05em 0 #fff, 0.05em -0.05em 0 #fff;
+`
 
 const Badge = ({ count, label, plural }) => (
-  <span className={classes.root}>
-    <span className={classes.count}>{count}</span>
-    <span className={classes.label}>
-      {plural && count !== 1 ? plural : label}
-    </span>
-  </span>
+  <Root>
+    <Count>{count}</Count>
+    <Label>{plural && count !== 1 ? plural : label}</Label>
+  </Root>
 )
 
 export default Badge
diff --git a/packages/ui/src/atoms/Badge.local.scss b/packages/ui/src/atoms/Badge.local.scss
deleted file mode 100644
index 544beeeb99dbdfcd5f443b5bc04148c8ec141059..0000000000000000000000000000000000000000
--- a/packages/ui/src/atoms/Badge.local.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.root {
-  align-items: center;
-  background: linear-gradient(
-    #fff 0,
-    #fff 1.1em,
-    grey 1.1em,
-    grey 1.2em,
-    #fff 1.15em,
-    #fff 2em
-  );
-  font-family: var(--font-interface);
-  font-size: 1em;
-  margin-right: 1em;
-  padding-bottom: 1em;
-}
-
-.count {
-  border-radius: 50%;
-  color: grey;
-  font-size: 1em;
-  font-weight: 600;
-  padding-right: 0.5em;
-  text-align: center;
-}
-
-.label {
-  display: inline-block;
-  padding: 0;
-  text-shadow: 0.05em 0.05em 0 #fff, -0.05em -0.05em 0 #fff,
-    -0.05em 0.05em 0 #fff, 0.05em -0.05em 0 #fff;
-}