diff --git a/packages/ui/src/atoms/File.js b/packages/ui/src/atoms/File.js
index 93e5ef6d12136c7b25db379dc6c1d24fd32a3637..547f2fec4828a047d47f9655722684768635ad6e 100644
--- a/packages/ui/src/atoms/File.js
+++ b/packages/ui/src/atoms/File.js
@@ -1,20 +1,122 @@
 import React from 'react'
-import classes from './File.local.scss'
+import styled from 'styled-components'
 
-const extension = ({ name }) => name.replace(/^.+\./, '')
+const Icon = styled.div`
+  background: #ddd;
+  height: 100px;
+  padding: 5px;
+  position: relative;
+  transition: transform 0.3s ease;
+  width: 70px;
+`
+
+const Extension = styled.div`
+  background: #888;
+  color: white;
+  font-size: 12px;
+  left: 20px;
+  padding: 2px;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  text-transform: uppercase;
+  top: 20px;
+`
+
+const Filename = styled.div`
+  color: #aaa;
+  font-size: 1em;
+  font-style: italic;
+  margin: 0.7em;
+  text-align: center;
+  width: 20ch;
+  word-break: break-all; /* to divide into lines */
+`
+
+const Root = styled.div`
+  align-items: center;
+  display: inline-flex;
+  flex-direction: column;
+  margin-bottom: 2em;
+  margin-right: 3em;
+  position: relative;
+  width: 20ch;
+
+  &::before,
+  &::after {
+    cursor: pointer;
+    transition: transform 0.3s;
+  }
+
+  &::after {
+    background: var(--color-danger);
+    border: 1px solid white;
+    color: white;
+    content: 'remove';
+    cursor: pointer;
+    font-size: 0.8em;
+    left: 70%;
+    letter-spacing: 0.5px;
+    padding: 0.2em 0.4em;
+    position: absolute;
+    text-transform: uppercase;
+    top: 4em;
+    transform: scaleX(0);
+    transform-origin: 0 0;
+    z-index: 2;
+  }
+
+  &::before {
+    background: var(--color-primary);
+    border: 1px solid white;
+    color: white;
+    content: 'replace';
+    cursor: pointer;
+    font-size: 0.8em;
+    left: 70%;
+    letter-spacing: 0.5px;
+    padding: 0.2em 0.4em;
+    position: absolute;
+    text-transform: uppercase;
+    top: 6em;
+    transform: scaleX(0);
+    transform-origin: 0 0;
+    z-index: 3;
+  }
+
+  &:hover {
+    ${Extension} {
+      background: white;
+      border-right: 2px solid #ddd;
+      color: var(--color-primary);
+    }
+
+    ${Icon} {
+      background: var(--color-primary);
+      transform: skewY(6deg) rotate(-6deg);
+    }
+
+    &::after,
+    &::before {
+      transform: scaleX(1);
+    }
+  }
+`
+
+const getFileExtension = ({ name }) => name.replace(/^.+\./, '')
 
 const File = ({ value }) => (
-  <div className={classes.root}>
-    <div className={classes.icon}>
-      <div className={classes.extension}>{extension(value)}</div>
-    </div>
+  <Root>
+    <Icon>
+      <Extension>{getFileExtension(value)}</Extension>
+    </Icon>
 
-    <div className={classes.name}>
+    <Filename>
       <a download={value.name} href={value.url}>
         {value.name}
       </a>
-    </div>
-  </div>
+    </Filename>
+  </Root>
 )
 
 export default File
diff --git a/packages/ui/src/atoms/File.local.scss b/packages/ui/src/atoms/File.local.scss
deleted file mode 100644
index 0bb001ba700d88e8226bfbcd81a6bf29888bec07..0000000000000000000000000000000000000000
--- a/packages/ui/src/atoms/File.local.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-.root {
-  align-items: center;
-  display: inline-flex;
-  flex-direction: column;
-  margin-bottom: 2em;
-  margin-right: 3em;
-  position: relative;
-  width: 20ch;
-
-  &::before,
-  &::after {
-    cursor: pointer;
-    transition: transform 0.3s;
-  }
-
-  &::after {
-    background: var(--color-danger);
-    border: 1px solid white;
-    color: white;
-    content: 'remove';
-    cursor: pointer;
-    font-size: 0.8em;
-    left: 70%;
-    letter-spacing: 0.5px;
-    padding: 0.2em 0.4em;
-    position: absolute;
-    text-transform: uppercase;
-    top: 4em;
-    transform: scaleX(0);
-    transform-origin: 0 0;
-    z-index: 2;
-  }
-
-  &::before {
-    background: var(--color-primary);
-    border: 1px solid white;
-    color: white;
-    content: 'replace';
-    cursor: pointer;
-    font-size: 0.8em;
-    left: 70%;
-    letter-spacing: 0.5px;
-    padding: 0.2em 0.4em;
-    position: absolute;
-    text-transform: uppercase;
-    top: 6em;
-    transform: scaleX(0);
-    transform-origin: 0 0;
-    z-index: 3;
-  }
-
-  .icon {
-    background: #ddd;
-    height: 100px;
-    padding: 5px;
-    position: relative;
-    transition: transform 0.3s ease;
-    width: 70px;
-  }
-
-  .extension {
-    background: #888;
-    color: white;
-    font-size: 12px;
-    left: 20px;
-    padding: 2px;
-    position: absolute;
-    right: 0;
-    text-align: center;
-    text-transform: uppercase;
-    top: 20px;
-  }
-
-  .name {
-    color: #aaa;
-    font-size: 1em;
-    font-style: italic;
-    margin: 0.7em;
-    text-align: center;
-    width: 20ch;
-    word-break: break-all; /* to divide into lines */
-  }
-
-  &:hover {
-    .extension {
-      background: white;
-      border-right: 2px solid #ddd;
-      color: var(--color-primary);
-    }
-
-    .icon {
-      background: var(--color-primary);
-      transform: skewY(6deg) rotate(-6deg);
-    }
-
-    &::after,
-    &::before {
-      transform: scaleX(1);
-    }
-  }
-}