diff --git a/packages/ui/package.json b/packages/ui/package.json
index 153ea2b270674e162ba3c69657a5293673f572b3..bb6a607fc3f0a84555219b47a7758d471c7e749f 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -24,7 +24,8 @@
     "react-tag-autocomplete": "^5.4.1",
     "recompose": "^0.26.0",
     "redux": "^3.6.0",
-    "redux-form": "^7.0.3"
+    "redux-form": "^7.0.3",
+    "styled-components": "^3.1.4"
   },
   "devDependencies": {
     "@pubsweet/styleguide": "^1.0.0",
diff --git a/packages/ui/src/atoms/Attachment.js b/packages/ui/src/atoms/Attachment.js
index 1d320ee2deb8387b93a7ac53e979b352c692cd12..445adafd1223764fa86e5fff5873eb52cd9ace62 100644
--- a/packages/ui/src/atoms/Attachment.js
+++ b/packages/ui/src/atoms/Attachment.js
@@ -1,14 +1,45 @@
 import React from 'react'
+import styled from 'styled-components'
 import Icon from './Icon'
-import classes from './Attachment.local.scss'
+
+const Filename = styled.span`
+  color: var(--color-primary);
+  display: inline-flex;
+  overflow-wrap: break-word;
+  padding: 0;
+  word-break: break-all;
+`
+
+const IconContainer = styled.span`
+  --color-local: var(--color-primary);
+  --icon-size: 16px;
+
+  margin: 0.5em;
+
+  & svg {
+    height: var(--icon-size);
+    width: var(--icon-size);
+  }
+`
+
+const Root = styled.a`
+  align-items: center;
+  display: flex;
+  line-height: 1.15;
+  text-decoration: none;
+
+  &:hover ${Filename} {
+    text-decoration: underline;
+  }
+`
 
 const Attachment = ({ value }) => (
-  <a className={classes.root} download={value.name} href={value.url}>
-    <span className={classes.icon}>
+  <Root download={value.name} href={value.url}>
+    <IconContainer>
       <Icon color="var(--color-local)">paperclip</Icon>
-    </span>
-    <span className={classes.filename}>{value.name}</span>
-  </a>
+    </IconContainer>
+    <Filename>{value.name}</Filename>
+  </Root>
 )
 
 export default Attachment
diff --git a/packages/ui/src/atoms/Attachment.local.scss b/packages/ui/src/atoms/Attachment.local.scss
deleted file mode 100644
index 832d23dd8ff4ac68815e3a488e14c85a7673bb89..0000000000000000000000000000000000000000
--- a/packages/ui/src/atoms/Attachment.local.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.root {
-  align-items: center;
-  display: flex;
-  line-height: 1.15;
-  text-decoration: none;
-}
-
-.icon {
-  --color-local: var(--color-primary);
-  --icon-size: 16px;
-
-  margin: 0.5em;
-}
-
-.icon svg {
-  height: var(--icon-size);
-  width: var(--icon-size);
-}
-
-.filename {
-  color: var(--color-primary);
-  display: inline-flex;
-  overflow-wrap: break-word;
-  padding: 0;
-  word-break: break-all;
-}
-
-.root:hover .filename {
-  text-decoration: underline;
-}