diff --git a/src/atoms/ValidatedField.js b/src/atoms/ValidatedField.js
index f0186d98af36d778b945ec3dd7b95a9bfda09a1a..32afa56c834dd66a4456c14e1fde4b73fb5aeb0f 100644
--- a/src/atoms/ValidatedField.js
+++ b/src/atoms/ValidatedField.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
-import classes from './ValidatedField.local.scss'
 import { Field } from 'redux-form'
+import classes from './ValidatedField.local.scss'
 
 // TODO: pass ...props.input to children automatically?
 
@@ -9,7 +9,7 @@ const ValidatedField = ({ component, ...rest }) => (
   <Field
     {...rest}
     component={({ meta, input }) => (
-      <div>
+      <div className={classes.root}>
         {component(input)}
 
         <div className={classes.messages}>
diff --git a/src/atoms/ValidatedField.local.scss b/src/atoms/ValidatedField.local.scss
index 58eecfd094cfc792cdbd67ccf5931d85af8e0df6..feb7b74b33d3858fbc674f4591af94d0282591a0 100644
--- a/src/atoms/ValidatedField.local.scss
+++ b/src/atoms/ValidatedField.local.scss
@@ -1,25 +1,3 @@
-.root {
-  display: flex;
-  align-items: center;
-  font-size: inherit;
-}
-
-input {
-  font-size: inherit;
-  border: 0 none;
-  padding: 0;
-  border-bottom: 1px dashed #aaa;
-  font-family: "Vollkorn", serif;
-
-  &:hover,
-  &:focus {
-    outline-style: none;
-    box-shadow: none;
-    border-color: transparent;
-    border-bottom: 1px dashed var(--color-primary);
-  }
-}
-
 .messages {
   // color: white;
   margin-top: 10px;
diff --git a/src/atoms/ValidatedField.md b/src/atoms/ValidatedField.md
index b7a3472d07c3944682be4008765672b4a511ffac..78e3bd0b183966b55825a1c154c03f21af97e6c7 100644
--- a/src/atoms/ValidatedField.md
+++ b/src/atoms/ValidatedField.md
@@ -11,7 +11,7 @@ const ValidatedFieldForm = reduxForm({
 <ValidatedFieldForm 
     name="error" 
     validate={() => 'Required'}
-    component={input => <input {...input}/>}
+    component={input => <TextField {...input}/>}
     />
 ```
 
@@ -26,6 +26,6 @@ const ValidatedFieldForm = reduxForm({
 <ValidatedFieldForm 
     name="warning" 
     warn={() => 'Expected'}
-    component={input => <input {...input}/>}
+    component={input => <TextField {...input}/>}
     />
 ```