diff --git a/packages/ui/src/atoms/Attachment.js b/packages/ui/src/atoms/Attachment.js
index 9f9be1d4982afa1ac866ecaf7c6ab965693612f6..1d320ee2deb8387b93a7ac53e979b352c692cd12 100644
--- a/packages/ui/src/atoms/Attachment.js
+++ b/packages/ui/src/atoms/Attachment.js
@@ -3,9 +3,9 @@ import Icon from './Icon'
 import classes from './Attachment.local.scss'
 
 const Attachment = ({ value }) => (
-  <a download={value.name} href={value.url}>
+  <a className={classes.root} download={value.name} href={value.url}>
     <span className={classes.icon}>
-      <Icon color="var(--color-primary)">paperclip</Icon>
+      <Icon color="var(--color-local)">paperclip</Icon>
     </span>
     <span className={classes.filename}>{value.name}</span>
   </a>
diff --git a/packages/ui/src/atoms/Attachment.local.scss b/packages/ui/src/atoms/Attachment.local.scss
index 4a6f520208438c03d42cdc043dfd0b51e284112d..832d23dd8ff4ac68815e3a488e14c85a7673bb89 100644
--- a/packages/ui/src/atoms/Attachment.local.scss
+++ b/packages/ui/src/atoms/Attachment.local.scss
@@ -1,13 +1,30 @@
+.root {
+  align-items: center;
+  display: flex;
+  line-height: 1.15;
+  text-decoration: none;
+}
+
 .icon {
-  color: var(--color-primary);
-  display: inline-flex;
-  margin-right: 10px;
+  --color-local: var(--color-primary);
+  --icon-size: 16px;
+
+  margin: 0.5em;
+}
+
+.icon svg {
+  height: var(--icon-size);
+  width: var(--icon-size);
 }
 
 .filename {
-  font-size: 0.7em;
-  height: 2em;
-  max-width: 25ch;
+  color: var(--color-primary);
+  display: inline-flex;
   overflow-wrap: break-word;
   padding: 0;
+  word-break: break-all;
+}
+
+.root:hover .filename {
+  text-decoration: underline;
 }
diff --git a/packages/ui/src/atoms/File.local.scss b/packages/ui/src/atoms/File.local.scss
index b751734209305fadec52e1127df5c48d4ae7f83c..0bef1ebf15167868057d96570d93cef684b58235 100644
--- a/packages/ui/src/atoms/File.local.scss
+++ b/packages/ui/src/atoms/File.local.scss
@@ -77,8 +77,8 @@
     font-style: italic;
     margin: 5px;
     max-width: 15ch;
+    overflow-wrap: break-all; /* to divide into lines */
     text-align: center;
-    word-break: break-all; /* to divide into lines */
   }
 
   &:hover {
diff --git a/packages/ui/src/atoms/Icon.js b/packages/ui/src/atoms/Icon.js
index 26a904615c5d9d4477665a7fe0b268d440657177..d67e11c29ef77a5de4d5bc411a49e8830608fb4d 100644
--- a/packages/ui/src/atoms/Icon.js
+++ b/packages/ui/src/atoms/Icon.js
@@ -3,7 +3,7 @@ import { pascalize } from 'humps'
 import * as icons from 'react-feather'
 import classes from './Icon.local.scss'
 
-const Icon = ({ children, color = 'black', size = 24 }) => {
+const Icon = ({ children, color = 'var(--color-local, black)', size = 24 }) => {
   // convert `arrow_left` to `ArrowLeft`
   const name = pascalize(children)
 
diff --git a/packages/ui/src/atoms/Icon.local.scss b/packages/ui/src/atoms/Icon.local.scss
index dfc0a60d1bb3b49d4f363268b978b8339adb0fa2..dcf1c2ecbcf8976156987e1e67f164dd8c86152c 100644
--- a/packages/ui/src/atoms/Icon.local.scss
+++ b/packages/ui/src/atoms/Icon.local.scss
@@ -1,3 +1,6 @@
 .root {
+  // color of the icon is set by his parent
+
   display: inline-flex;
+  width: var(--icon-size);
 }
diff --git a/packages/ui/src/lib/colors.local.scss b/packages/ui/src/lib/colors.local.scss
index e06cf2a6b7113312ebe42ec117ee71a92416e3b7..16b8c8ca3a6fd5c4b72f6c2686e018e5afdab2cc 100644
--- a/packages/ui/src/lib/colors.local.scss
+++ b/packages/ui/src/lib/colors.local.scss
@@ -1,4 +1,4 @@
 .primary {
-  background-color: cornflowerblue;
+  background-color: var(--color-primary);
   color: white;
 }
diff --git a/packages/ui/src/molecules/Attachments.js b/packages/ui/src/molecules/Attachments.js
index c05eb487934d3afd84eb781165042e96655e562e..10f65100b6eea198fd2026bd9770c8b056d0e0a4 100644
--- a/packages/ui/src/molecules/Attachments.js
+++ b/packages/ui/src/molecules/Attachments.js
@@ -14,7 +14,7 @@ const Attachments = props => (
     uploadingFile={({ file, progress, error }) => (
       <div className={classes.uploading}>
         <span className={classes.icon}>
-          <Icon color="var(--color-primary)">paperclip</Icon>
+          <Icon color="var(--color-local, black)">paperclip</Icon>
         </span>
         <span className={classes.filename}>{error || 'Uploading…'}</span>
       </div>
diff --git a/packages/ui/src/molecules/Attachments.local.scss b/packages/ui/src/molecules/Attachments.local.scss
index 67c036fe4dcea0013b463abcf34e2e5442dea10c..cf01f0057102aa01b0b2a1adfd2e85997cf60396 100644
--- a/packages/ui/src/molecules/Attachments.local.scss
+++ b/packages/ui/src/molecules/Attachments.local.scss
@@ -1,6 +1,8 @@
 .uploading {
-  align-items: center;
   display: flex;
+  flex-direction: column;
+  margin-bottom: 2em;
+  margin-top: 2em;
 }
 
 .icon {
diff --git a/packages/ui/src/molecules/Files.local.scss b/packages/ui/src/molecules/Files.local.scss
index b6e58a85f85b3148688af89b7f95a724b630b35b..1737d0ea2e22a52457fe11fc67b2b9d8593c7e7c 100644
--- a/packages/ui/src/molecules/Files.local.scss
+++ b/packages/ui/src/molecules/Files.local.scss
@@ -18,6 +18,8 @@
 }
 
 .files {
+  display: flex;
+  flex-direction: column;
   font-size: 0.9em;
   font-style: italic;
   line-height: 1.5;
diff --git a/packages/ui/test/__snapshots__/AppBar.test.js.snap b/packages/ui/test/__snapshots__/AppBar.test.js.snap
index df74fa0cbcd219aab3fe3f049f69271b1350509a..d18c4e4156689ecc4fb50930325ee1ee38fe6615 100644
--- a/packages/ui/test/__snapshots__/AppBar.test.js.snap
+++ b/packages/ui/test/__snapshots__/AppBar.test.js.snap
@@ -29,7 +29,7 @@ exports[`AppBar Snapshot 1`] = `
           <path
             d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
             fill="none"
-            stroke="black"
+            stroke="var(--color-local, black)"
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="2"
@@ -39,7 +39,7 @@ exports[`AppBar Snapshot 1`] = `
             cy="7"
             fill="none"
             r="4"
-            stroke="black"
+            stroke="var(--color-local, black)"
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="2"