diff --git a/frontend/app/api_client.js b/frontend/app/api_client.js
index a9e092486..c9a041cc9 100644
--- a/frontend/app/api_client.js
+++ b/frontend/app/api_client.js
@@ -95,13 +95,11 @@ export default class APIClient {
       edp = `${ edp }/${ this.siteId }`
     }
     return fetch(edp + path, this.init)
-        .then(response => {
+        .then((response) => {
           if (response.ok) {
             return response
           } else {
-            throw new Error(
-                `! ${this.init.method} error on ${path}; ${response.status}`
-            )
+            return Promise.reject({ message: `! ${this.init.method} error on ${path}; ${response.status}`, response });
           }
         })
   }
diff --git a/frontend/app/api_middleware.js b/frontend/app/api_middleware.js
index f98ad344b..9ef371f01 100644
--- a/frontend/app/api_middleware.js
+++ b/frontend/app/api_middleware.js
@@ -33,9 +33,10 @@ export default () => (next) => (action) => {
         next({ type: UPDATE_JWT, data: jwt });
       }
     })
-    .catch((e) => {
+    .catch(async (e) => {
+      const data = await e.response.json();
       logger.error('Error during API request. ', e);
-      return next({ type: FAILURE, errors: parseError(e) });
+      return next({ type: FAILURE, errors: parseError(data.errors) });
     });
 };
 
diff --git a/frontend/app/components/Client/CustomFields/CustomFieldForm.js b/frontend/app/components/Client/CustomFields/CustomFieldForm.js
index 22108deee..15d24be3d 100644
--- a/frontend/app/components/Client/CustomFields/CustomFieldForm.js
+++ b/frontend/app/components/Client/CustomFields/CustomFieldForm.js
@@ -39,17 +39,6 @@ class CustomFieldForm extends React.PureComponent {
                             placeholder="Field Name"
                         />
                     </Form.Field>
-                    
-                    {/* TODO: errors state is not updating properly */}
-                    {/* {errors && (
-                        <div className="mb-3">
-                            {errors.map((error, i) => (
-                                <Message visible={errors} size="mini" error key={i} className={styles.error}>
-                                    {error.message}
-                                </Message>
-                            ))}
-                        </div>
-                    )} */}
 
                     <div className="flex justify-between">
                         <div className="flex items-center">
diff --git a/frontend/app/components/Client/CustomFields/CustomFields.js b/frontend/app/components/Client/CustomFields/CustomFields.js
index 30844dec2..d5843425a 100644
--- a/frontend/app/components/Client/CustomFields/CustomFields.js
+++ b/frontend/app/components/Client/CustomFields/CustomFields.js
@@ -11,6 +11,7 @@ import ListItem from './ListItem';
 import { confirm } from 'UI';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import { useModal } from 'App/components/Modal';
+import { toast } from 'react-toastify';
 
 function CustomFields(props) {
     const [currentSite, setCurrentSite] = React.useState(props.sites.get(0));
@@ -25,10 +26,11 @@ function CustomFields(props) {
     }, []);
 
     const save = (field) => {
-        props.save(currentSite.id, field).then(() => {
-            const { errors } = props;
-            if (!errors || errors.size === 0) {
+        props.save(currentSite.id, field).then((response) => {
+            if (!response || !response.errors || response.errors.size === 0) {
                 hideModal();
+            } else {
+                toast.error(response.errors[0]);
             }
         });
     };
@@ -73,7 +75,7 @@ function CustomFields(props) {
                 </div>
                 <div className="ml-auto">
                 <Tooltip title="You've reached the limit of 10 metadata." disabled={fields.size < 10}>
-                    <Button disabled={fields.size >= 10}  variant="primary" onClick={() => init()}>Add Metadata</Button>
+                    <Button disabled={fields.size >= 10} variant="primary" onClick={() => init()}>Add Metadata</Button>
                 </Tooltip>
                 </div>
             </div>