diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index 7ceafb27c5..fbabe5e1cd 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -11400,16 +11400,6 @@ exports[`Storyshots Components/Tag Removable 1`] = `
   width: 1px;
 }
 
-.circuit-6 {
-  border-radius: 4px;
-  font-size: 16px;
-  line-height: 24px;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
-  padding: 4px 12px;
-  cursor: default;
-  display: inline-block;
-}
-
 .circuit-4 {
   padding: 0;
   margin: 0;
@@ -11435,6 +11425,16 @@ exports[`Storyshots Components/Tag Removable 1`] = `
   width: 100%;
 }
 
+.circuit-6 {
+  border-radius: 4px;
+  font-size: 16px;
+  line-height: 24px;
+  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  padding: 4px 12px;
+  cursor: default;
+  display: inline-block;
+}
+
 <span
   class="circuit-6 circuit-7"
 >
@@ -12687,6 +12687,7 @@ label + .circuit-14 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -12923,6 +12924,7 @@ HTMLCollection [
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -13216,6 +13218,7 @@ label + .circuit-14 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -13593,6 +13596,7 @@ HTMLCollection [
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -13697,6 +13701,7 @@ HTMLCollection [
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -13803,6 +13808,7 @@ HTMLCollection [
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -13911,6 +13917,7 @@ HTMLCollection [
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -14083,6 +14090,7 @@ HTMLCollection [
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -14362,6 +14370,7 @@ exports[`Storyshots Forms/Input Base 1`] = `
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -14461,6 +14470,7 @@ exports[`Storyshots Forms/Input Disabled 1`] = `
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -14544,6 +14554,7 @@ exports[`Storyshots Forms/Input Inline 1`] = `
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -14720,6 +14731,7 @@ label + .circuit-7 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -14855,6 +14867,7 @@ label + .circuit-5 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -14988,6 +15001,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   background-color: #FAFBFC;
   border-style: dashed;
   box-shadow: none;
@@ -15090,6 +15104,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   text-align: right;
   padding-right: calc( 12px + 16px + 12px );
 }
@@ -15166,6 +15181,7 @@ HTMLCollection [
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -15322,6 +15338,7 @@ label + .circuit-7 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -15504,6 +15521,7 @@ label + .circuit-7 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -15639,6 +15657,7 @@ label + .circuit-5 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -15780,6 +15799,7 @@ label + .circuit-3 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
 }
@@ -15899,6 +15919,7 @@ label + .circuit-3 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
 }
@@ -16018,6 +16039,7 @@ label + .circuit-3 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
 }
@@ -16137,6 +16159,7 @@ label + .circuit-8 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
 }
@@ -16311,6 +16334,7 @@ label + .circuit-3 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
 }
@@ -16346,27 +16370,241 @@ label + .circuit-3 {
 }
 
 <div
-  class="circuit-5 circuit-6"
+  style="height: 20vh;"
 >
   <div
-    class="circuit-3 circuit-4"
+    class="circuit-5 circuit-6"
   >
     <div
-      class="circuit-0"
+      class="circuit-3 circuit-4"
     >
-      search.svg
+      <div
+        class="circuit-0"
+      >
+        search.svg
+      </div>
+      <input
+        aria-autocomplete="list"
+        aria-expanded="false"
+        aria-invalid="false"
+        autocomplete="off"
+        class="circuit-1 circuit-2"
+        id="downshift-4-input"
+        placeholder="Search by email"
+        role="combobox"
+        type="text"
+        value=""
+      />
     </div>
-    <input
-      aria-autocomplete="list"
-      aria-expanded="false"
-      aria-invalid="false"
-      autocomplete="off"
-      class="circuit-1 circuit-2"
-      id="downshift-4-input"
-      role="combobox"
-      type="text"
-      value=""
-    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Forms/Input/AutoCompleteTags Selected 1`] = `
+.circuit-5 {
+  position: relative;
+  min-width: 150px;
+}
+
+label > .circuit-5,
+label + .circuit-5 {
+  margin-top: 4px;
+}
+
+.circuit-3 {
+  color: #212933;
+  display: block;
+  position: relative;
+  margin-bottom: 16px;
+  margin-bottom: 0;
+}
+
+label > .circuit-3,
+label + .circuit-3 {
+  margin-top: 4px;
+}
+
+.circuit-0 {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  height: 40px;
+  width: 40px;
+  padding: 12px;
+  pointer-events: none;
+}
+
+.circuit-1 {
+  background-color: #FFFFFF;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8DDE1;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
+  padding: 8px 12px;
+  -webkit-transition: border-color 200ms ease-in-out;
+  transition: border-color 200ms ease-in-out;
+  width: 100%;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0;
+  padding-left: calc( 12px + 16px + 12px );
+  padding-right: calc( 12px + 16px + 12px );
+}
+
+.circuit-1:focus,
+.circuit-1:active {
+  border: 1px solid #3388FF;
+  outline: none;
+}
+
+.circuit-1::-webkit-input-placeholder {
+  color: #9DA7B1;
+  -webkit-transition: color 200ms ease-in-out;
+  transition: color 200ms ease-in-out;
+}
+
+.circuit-1::-moz-placeholder {
+  color: #9DA7B1;
+  -webkit-transition: color 200ms ease-in-out;
+  transition: color 200ms ease-in-out;
+}
+
+.circuit-1:-ms-input-placeholder {
+  color: #9DA7B1;
+  -webkit-transition: color 200ms ease-in-out;
+  transition: color 200ms ease-in-out;
+}
+
+.circuit-1::placeholder {
+  color: #9DA7B1;
+  -webkit-transition: color 200ms ease-in-out;
+  transition: color 200ms ease-in-out;
+}
+
+.circuit-7 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  margin-top: 12px;
+}
+
+.circuit-14 {
+  border-radius: 4px;
+  font-size: 16px;
+  line-height: 24px;
+  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  padding: 4px 12px;
+  cursor: default;
+  display: inline-block;
+  margin-top: 8px;
+}
+
+.circuit-14:first-of-type: {
+  margin-top: 0;
+}
+
+.circuit-11 {
+  padding: 0;
+  margin: 0;
+  display: inline-block;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  fill: #0F131A;
+  overflow: initial;
+  height: 16px;
+  width: 16px;
+  margin-left: 12px;
+  vertical-align: middle;
+}
+
+.circuit-11:focus,
+.circuit-11:active {
+  outline: none;
+}
+
+.circuit-11 > svg {
+  height: 100%;
+  width: 100%;
+}
+
+<div
+  style="height: 20vh;"
+>
+  <div
+    class="circuit-5 circuit-6"
+  >
+    <div
+      class="circuit-3 circuit-4"
+    >
+      <div
+        class="circuit-0"
+      >
+        search.svg
+      </div>
+      <input
+        aria-autocomplete="list"
+        aria-expanded="false"
+        aria-invalid="false"
+        autocomplete="off"
+        class="circuit-1 circuit-2"
+        id="downshift-5-input"
+        placeholder="Search by email"
+        role="combobox"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    class="circuit-16 circuit-17"
+    data-testid="autocomplete-tags-selected"
+  >
+    <span
+      class="circuit-13 circuit-14 circuit-15"
+    >
+      test4@sumup.com
+      <button
+        class="circuit-9 circuit-10 circuit-11 circuit-12"
+        data-testid="tag-close"
+        type="button"
+      >
+        <div
+          role="presentation"
+        >
+          close-icon.svg
+        </div>
+        <span
+          class="circuit-7 circuit-8"
+        >
+          remove
+        </span>
+      </button>
+    </span>
   </div>
 </div>
 `;
@@ -16403,6 +16641,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -16524,6 +16763,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -16615,6 +16855,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -16724,6 +16965,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -16841,6 +17083,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -16930,6 +17173,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -17024,6 +17268,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -17131,6 +17376,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -17200,6 +17446,7 @@ exports[`Storyshots Forms/Input/MaskedInput Base 1`] = `
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -17286,6 +17533,7 @@ exports[`Storyshots Forms/Input/RestrictedInput Base 1`] = `
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -17387,6 +17635,7 @@ exports[`Storyshots Forms/Input/SearchInput Base 1`] = `
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
 }
@@ -17488,6 +17737,7 @@ exports[`Storyshots Forms/Input/SearchInput Clearable 1`] = `
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
 }
@@ -17589,6 +17839,7 @@ exports[`Storyshots Forms/Input/SearchInput Disabled 1`] = `
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
 }
@@ -18679,6 +18930,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -18770,6 +19022,7 @@ label + .circuit-2 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -18920,6 +19173,7 @@ label + .circuit-7 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -19053,6 +19307,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   background-color: #FAFBFC;
   border-style: dashed;
   box-shadow: none;
@@ -19205,6 +19460,7 @@ label + .circuit-7 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
diff --git a/src/components/AutoCompleteInput/__snapshots__/AutoCompleteInput.spec.js.snap b/src/components/AutoCompleteInput/__snapshots__/AutoCompleteInput.spec.js.snap
index 144f89f0bf..f22c902194 100644
--- a/src/components/AutoCompleteInput/__snapshots__/AutoCompleteInput.spec.js.snap
+++ b/src/components/AutoCompleteInput/__snapshots__/AutoCompleteInput.spec.js.snap
@@ -47,6 +47,7 @@ label + .circuit-3 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
 }
diff --git a/src/components/AutoCompleteTags/AutoCompleteTags.js b/src/components/AutoCompleteTags/AutoCompleteTags.js
index 344105a571..c693181f42 100644
--- a/src/components/AutoCompleteTags/AutoCompleteTags.js
+++ b/src/components/AutoCompleteTags/AutoCompleteTags.js
@@ -16,65 +16,73 @@
 import React, { Fragment, Component } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { remove, includes, isEmpty } from 'lodash/fp';
+import { css } from '@emotion/core';
+import { isEmpty, map, filter, difference } from 'lodash/fp';
 
 import AutoCompleteInput from '../AutoCompleteInput';
 import Tag from '../Tag';
 
-const TagsWrapper = styled('div')`
-  margin-top: ${props => props.theme.spacings.kilo};
-  /* this *hack* is to not allow the tags to be visible below the overlay */
-  padding: 0 1px;
+const TagsWrapper = styled('div')(
+  ({ theme }) => css`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: ${theme.spacings.kilo};
+  `
+);
 
-  span {
-    display: inline-block;
-    margin-bottom: ${props => props.theme.spacings.byte};
-  }
-`;
+const StyledTag = styled(Tag)(
+  ({ theme }) => css`
+    margin-top: ${theme.spacings.byte};
+    &:first-of-type: {
+      margin-top: 0;
+    }
+  `
+);
 
 class AutoCompleteTags extends Component {
-  static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    availableTags: PropTypes.arrayOf(PropTypes.string).isRequired
+  state = {
+    selected: this.props.selectedTags
   };
 
-  state = { tags: [] };
+  handleAdd = tag => {
+    const { selected } = this.state;
+    const newSelected = [...selected, tag];
 
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.tags.length !== this.state.tags.length) {
-      this.props.onChange(this.state.tags);
-    }
-  }
+    this.setState({ selected: newSelected });
+    this.props.onChange(newSelected);
+  };
 
-  handleAddTag = option =>
-    this.setState(({ tags }) => ({ tags: [...tags, option] }));
+  handleRemove = tag => {
+    const { selected } = this.state;
+    const newSelected = filter(option => option !== tag, selected);
 
-  handleRemoveTag = newTag =>
-    this.setState(({ tags }) => ({
-      tags: remove(tag => tag === newTag)(tags)
-    }));
+    this.setState({ selected: newSelected });
+    this.props.onChange(newSelected);
+  };
 
   render() {
-    const { availableTags } = this.props;
-    const { tags } = this.state;
-    const autoCompleteOptions = availableTags.filter(
-      option => !includes(option, tags)
-    );
+    const { availableTags, ...inputProps } = this.props;
+    const { selected } = this.state;
 
     return (
       <Fragment>
         <AutoCompleteInput
-          onChange={this.handleAddTag}
-          options={autoCompleteOptions}
           clearOnSelect
+          options={difference(availableTags, selected)}
+          {...inputProps}
+          onChange={this.handleAdd}
         />
-        {!isEmpty(tags) && (
-          <TagsWrapper>
-            {tags.map(tag => (
-              <Tag key={tag} onRemove={() => this.handleRemoveTag(tag)}>
-                {tag}
-              </Tag>
-            ))}
+        {!isEmpty(selected) && (
+          <TagsWrapper data-testid="autocomplete-tags-selected">
+            {map(
+              tag => (
+                <StyledTag key={tag} onRemove={() => this.handleRemove(tag)}>
+                  {tag}
+                </StyledTag>
+              ),
+              selected
+            )}
           </TagsWrapper>
         )}
       </Fragment>
@@ -82,6 +90,25 @@ class AutoCompleteTags extends Component {
   }
 }
 
+AutoCompleteTags.propTypes = {
+  /**
+   * The available options to provided to the AutoCompleteInput.
+   */
+  availableTags: PropTypes.arrayOf(PropTypes.string).isRequired,
+  /**
+   * The initially selected options.
+   */
+  selectedTags: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Callback function used to handle adding and removing a tag.
+   */
+  onChange: PropTypes.func.isRequired
+};
+
+AutoCompleteTags.defaultProps = {
+  selectedTags: []
+};
+
 /**
  * @component
  */
diff --git a/src/components/AutoCompleteTags/AutoCompleteTags.spec.js b/src/components/AutoCompleteTags/AutoCompleteTags.spec.js
index 2678b88d5f..0291f1f566 100644
--- a/src/components/AutoCompleteTags/AutoCompleteTags.spec.js
+++ b/src/components/AutoCompleteTags/AutoCompleteTags.spec.js
@@ -14,10 +14,24 @@
  */
 
 import React from 'react';
+import { cleanup, fireEvent } from '@testing-library/react';
 
 import AutoCompleteTags from '.';
 
+const defaultProps = {
+  availableTags: [
+    'test1@sumup.com',
+    'test2@sumup.com',
+    'test3@sumup.com',
+    'test4@sumup.com'
+  ],
+  placeholder: 'Search by email',
+  selectedTags: ['test1@sumup.com'],
+  onChange: jest.fn()
+};
+
 describe('AutoCompleteTags', () => {
+  afterEach(cleanup);
   /**
    * Style tests.
    */
@@ -25,4 +39,24 @@ describe('AutoCompleteTags', () => {
     const actual = create(<AutoCompleteTags availableTags={[]} />);
     expect(actual).toMatchSnapshot();
   });
+
+  it('should display selected tags ', () => {
+    const { getByTestId, getByText } = render(
+      <AutoCompleteTags {...defaultProps} />
+    );
+    expect(getByTestId('autocomplete-tags-selected')).not.toBeNull();
+    expect(getByText('test1@sumup.com')).toBeVisible();
+  });
+
+  it('should handle changes in selected tags ', () => {
+    const { getByTestId, queryByTestId } = render(
+      <AutoCompleteTags {...defaultProps} />
+    );
+    const closeIcon = getByTestId('tag-close');
+
+    fireEvent.click(closeIcon);
+
+    expect(defaultProps.onChange).toHaveBeenCalledWith([]);
+    expect(queryByTestId('autocomplete-tags-selected')).toBeNull();
+  });
 });
diff --git a/src/components/AutoCompleteTags/AutoCompleteTags.story.js b/src/components/AutoCompleteTags/AutoCompleteTags.story.js
index 9f2ea5092e..131b8de663 100644
--- a/src/components/AutoCompleteTags/AutoCompleteTags.story.js
+++ b/src/components/AutoCompleteTags/AutoCompleteTags.story.js
@@ -46,8 +46,27 @@ for (let i = 0; i < 10000; i += 1) {
 }
 
 export const base = () => (
-  <AutoCompleteTags
-    availableTags={randomItems}
-    onChange={action('handleChange')}
-  />
+  <div style={{ height: '20vh' }}>
+    <AutoCompleteTags
+      placeholder="Search by email"
+      availableTags={randomItems}
+      onChange={action('handleChange')}
+    />
+  </div>
+);
+
+export const selected = () => (
+  <div style={{ height: '20vh' }}>
+    <AutoCompleteTags
+      placeholder="Search by email"
+      availableTags={[
+        'test1@sumup.com',
+        'test2@sumup.com',
+        'test3@sumup.com',
+        'test4@sumup.com'
+      ]}
+      selectedTags={['test4@sumup.com']}
+      onChange={action('handleChange')}
+    />
+  </div>
 );
diff --git a/src/components/AutoCompleteTags/__snapshots__/AutoCompleteTags.spec.js.snap b/src/components/AutoCompleteTags/__snapshots__/AutoCompleteTags.spec.js.snap
index 608ee8eb18..af9ec8a976 100644
--- a/src/components/AutoCompleteTags/__snapshots__/AutoCompleteTags.spec.js.snap
+++ b/src/components/AutoCompleteTags/__snapshots__/AutoCompleteTags.spec.js.snap
@@ -47,6 +47,7 @@ label + .circuit-3 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
 }
diff --git a/src/components/CreditCardDetails/components/CardNumberInput/__snapshots__/CardNumberInput.spec.js.snap b/src/components/CreditCardDetails/components/CardNumberInput/__snapshots__/CardNumberInput.spec.js.snap
index 4696ee596c..012a51c612 100644
--- a/src/components/CreditCardDetails/components/CardNumberInput/__snapshots__/CardNumberInput.spec.js.snap
+++ b/src/components/CreditCardDetails/components/CardNumberInput/__snapshots__/CardNumberInput.spec.js.snap
@@ -80,6 +80,7 @@ label + .circuit-14 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -330,6 +331,7 @@ label + .circuit-14 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -546,6 +548,7 @@ HTMLCollection [
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
diff --git a/src/components/CurrencyInput/components/SimpleCurrencyInput/__snapshots__/SimpleCurrencyInput.spec.js.snap b/src/components/CurrencyInput/components/SimpleCurrencyInput/__snapshots__/SimpleCurrencyInput.spec.js.snap
index 3fc420e0a6..e2f4d447e5 100644
--- a/src/components/CurrencyInput/components/SimpleCurrencyInput/__snapshots__/SimpleCurrencyInput.spec.js.snap
+++ b/src/components/CurrencyInput/components/SimpleCurrencyInput/__snapshots__/SimpleCurrencyInput.spec.js.snap
@@ -26,6 +26,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -123,6 +124,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -217,6 +219,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -356,6 +359,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -449,6 +453,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -566,6 +571,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
@@ -696,6 +702,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
   text-align: right;
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
index d5a14cb8bd..ad56d8b106 100644
--- a/src/components/Input/Input.js
+++ b/src/components/Input/Input.js
@@ -80,6 +80,7 @@ const inputBaseStyles = ({ theme }) => css`
   transition: border-color ${theme.transitions.default};
   width: 100%;
   ${textMega({ theme })};
+  margin: 0;
 
   &:focus,
   &:active {
diff --git a/src/components/Input/__snapshots__/Input.spec.js.snap b/src/components/Input/__snapshots__/Input.spec.js.snap
index 7bcd981d92..2e055a1682 100644
--- a/src/components/Input/__snapshots__/Input.spec.js.snap
+++ b/src/components/Input/__snapshots__/Input.spec.js.snap
@@ -14,6 +14,7 @@ exports[`Input should prioritize disabled over error styles 1`] = `
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -120,6 +121,7 @@ label + .circuit-5 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -259,6 +261,7 @@ label + .circuit-5 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   background-color: #FAFBFC;
   border-style: dashed;
   box-shadow: none;
@@ -361,6 +364,7 @@ label + .circuit-6 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -505,6 +509,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
 }
@@ -581,6 +586,7 @@ label + .circuit-2 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -667,6 +673,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   color: red;
 }
@@ -740,6 +747,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -813,6 +821,7 @@ exports[`Input should render with disabled styles when passed the disabled prop
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -887,6 +896,7 @@ exports[`Input should render with inline styles when passed the inline prop 1`]
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -1000,6 +1010,7 @@ label + .circuit-5 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -1093,6 +1104,7 @@ exports[`Input should render with no margin styles when passed the noMargin prop
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -1204,6 +1216,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   background-color: #FAFBFC;
   border-style: dashed;
   box-shadow: none;
@@ -1292,6 +1305,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   text-align: right;
   padding-right: calc( 12px + 16px + 12px );
 }
@@ -1365,6 +1379,7 @@ label + .circuit-5 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
@@ -1464,6 +1479,7 @@ label + .circuit-5 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
 }
 
diff --git a/src/components/SearchInput/__snapshots__/SearchInput.spec.js.snap b/src/components/SearchInput/__snapshots__/SearchInput.spec.js.snap
index 4951e46aad..29395a7ea5 100644
--- a/src/components/SearchInput/__snapshots__/SearchInput.spec.js.snap
+++ b/src/components/SearchInput/__snapshots__/SearchInput.spec.js.snap
@@ -24,6 +24,7 @@ exports[`SearchInput should grey out icon when disabled 1`] = `
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
 }
@@ -128,6 +129,7 @@ label + .circuit-3 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-left: calc( 12px + 16px + 12px );
   padding-right: calc( 12px + 16px + 12px );
 }
diff --git a/src/components/TextArea/__snapshots__/TextArea.spec.js.snap b/src/components/TextArea/__snapshots__/TextArea.spec.js.snap
index fc3fccae27..f0f8b8f654 100644
--- a/src/components/TextArea/__snapshots__/TextArea.spec.js.snap
+++ b/src/components/TextArea/__snapshots__/TextArea.spec.js.snap
@@ -14,6 +14,7 @@ exports[`TextArea should prioritize disabled over error styles 1`] = `
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -122,6 +123,7 @@ label + .circuit-5 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -263,6 +265,7 @@ label + .circuit-5 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   background-color: #FAFBFC;
   border-style: dashed;
   box-shadow: none;
@@ -367,6 +370,7 @@ label + .circuit-6 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -500,6 +504,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -587,6 +592,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -674,6 +680,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -749,6 +756,7 @@ exports[`TextArea should render with disabled styled when passed the disabled pr
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -825,6 +833,7 @@ exports[`TextArea should render with inline styles when passed the inline prop 1
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -940,6 +949,7 @@ label + .circuit-5 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -1035,6 +1045,7 @@ exports[`TextArea should render with no margin styles when passed the noMargin p
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -1148,6 +1159,7 @@ label + .circuit-4 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   background-color: #FAFBFC;
   border-style: dashed;
   box-shadow: none;
@@ -1225,6 +1237,7 @@ label + .circuit-5 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;
@@ -1326,6 +1339,7 @@ label + .circuit-5 {
   width: 100%;
   font-size: 16px;
   line-height: 24px;
+  margin: 0;
   padding-right: calc( 12px + 16px + 12px );
   overflow: auto;
   resize: vertical;