diff --git a/client/coral-admin/src/components/BanUserDialog.css b/client/coral-admin/src/components/BanUserDialog.css
index 17f971daa..538f90da2 100644
--- a/client/coral-admin/src/components/BanUserDialog.css
+++ b/client/coral-admin/src/components/BanUserDialog.css
@@ -1,152 +1,153 @@
 .dialog {
   border: none;
   box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
-  width: 500px;
+  width: 400px;
   top: 50%;
   transform: translateY(-50%);
   padding: 20px;
+  border-radius: 4px;
+}
 
-  h2 {
-    color: black;
-    font-size: 1.76em;
-    font-weight: 500;
-    margin: 0;
-  }
+.header {
+  color: black;
+  font-size: 1.5em;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+}
 
-  h3 {
-    color: black;
-    font-size: 1.4em;
-    font-weight: 500;
-    margin: 0;
-  }
+.subheader {
+  color: black;
+  font-size: 1.3em;
+  font-weight: 500;
+  margin: 0 0 8px 0;
 }
 
 .textField {
-    margin-top: 15px;
+  margin-top: 15px;
 }
 
 .textField label {
-    font-size: 1.08em;
-    font-weight: bold;
-    margin-bottom: 5px;
+  font-size: 1.08em;
+  font-weight: bold;
+  margin-bottom: 5px;
 }
 
 .textField input {
-    width: 100%;
-    display: block;
-    border: none;
-    outline: none;
-    border: 1px solid rgba(0,0,0,.12);
-    padding: 10px 6px;
-    box-sizing: border-box;
-    border-radius: 2px;
-    margin: 5px auto;
+  width: 100%;
+  display: block;
+  border: none;
+  outline: none;
+  border: 1px solid rgba(0,0,0,.12);
+  padding: 10px 6px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin: 5px auto;
 }
 
 .footer {
-    margin: 20px auto 10px;
-    text-align: center;
+  margin: 20px auto 10px;
+  text-align: center;
 }
 
 .footer span {
-    display: block;
-    margin-bottom: 5px;
+  display: block;
+  margin-bottom: 5px;
 }
 
 .footer a {
-    color: #2c69b6;
-    cursor: pointer;
-    margin: 0 5px;
+  color: #2c69b6;
+  cursor: pointer;
+  margin: 0 5px;
 }
 
 .socialConnections {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 .signInButton {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 .close {
-    font-size: 20px;
-    line-height: 14px;
-    top: 10px;
-    right: 10px;
-    position: absolute;
-    display: block;
-    font-weight: bold;
-    color: #363636;
-    cursor: pointer;
+  font-size: 20px;
+  line-height: 14px;
+  top: 10px;
+  right: 10px;
+  position: absolute;
+  display: block;
+  font-weight: bold;
+  color: #363636;
+  cursor: pointer;
 }
 
 .close:hover {
-    color: #6b6b6b;
+  color: #6b6b6b;
 }
 
 input.error{
-    border: solid 2px #f44336;
+  border: solid 2px #f44336;
 }
 
 .errorMsg, .hint {
-    color: grey;
-    font-weight: 600;
-    padding: 3px 0 16px;
+  color: grey;
+  font-weight: 600;
+  padding: 3px 0 16px;
 }
 
 .alert {
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 2px;
+  padding: 10px;
+  margin-bottom: 20px;
+  border-radius: 2px;
 }
 
 .alert--success {
-    border: solid 1px #1ec00e;
-    background: #cbf1b8;
-    color: #006900;
+  border: solid 1px #1ec00e;
+  background: #cbf1b8;
+  color: #006900;
 }
 
 .alert--error {
-    background: #FFEBEE;
-    color: #B71C1C;
+  background: #FFEBEE;
+  color: #B71C1C;
 }
 
 .userBox a {
-    color: #2c69b6;
-    cursor: pointer;
-    margin: 0px;
+  color: #2c69b6;
+  cursor: pointer;
+  margin: 0px;
 }
 
 .attention {
-    display: inline-block;
-    width: 15px;
-    height: 15px;
-    background: #B71C1C;
-    color: #FFEBEE;
-    font-weight: bolder;
-    padding: 4px;
-    vertical-align: middle;
-    border-radius: 20px;
-    box-sizing: border-box;
-    font-size: 9px;
-    line-height: 7px;
-    text-align: center;
-    margin-right: 5px;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background: #B71C1C;
+  color: #FFEBEE;
+  font-weight: bolder;
+  padding: 4px;
+  vertical-align: middle;
+  border-radius: 20px;
+  box-sizing: border-box;
+  font-size: 9px;
+  line-height: 7px;
+  text-align: center;
+  margin-right: 5px;
 }
 
 .action {
-    margin-top: 15px;
+  margin-top: 15px;
 }
 
 .passwordRequestSuccess {
-    border: 1px solid green;
-    background-color: lightgreen;
-    padding: 10px;
+  border: 1px solid green;
+  background-color: lightgreen;
+  padding: 10px;
 }
 
 .passwordRequestFailure {
-    border: 1px solid orange;
-    background-color: 1px solid coral;
-    padding: 10px;
+  border: 1px solid orange;
+  background-color: 1px solid coral;
+  padding: 10px;
 }
 
 .cancel {
@@ -159,8 +160,9 @@ input.error{
 }
 
 .buttons {
-  margin: 20px;
-  text-align: center;
+  margin-top: 8px;
+  margin-bottom: 6px;
+  text-align: right;
 }
 
 .legend {
diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js
index d9746dd0d..7e53a0530 100644
--- a/client/coral-admin/src/components/BanUserDialog.js
+++ b/client/coral-admin/src/components/BanUserDialog.js
@@ -13,13 +13,25 @@ class BanUserDialog extends React.Component {
   
   state = initialState;
 
+  componentWillReceiveProps(next) {
+    if (this.props.open && !next.open) {
+      this.setState(initialState);
+    }
+  }
+  
   handleMessageChange = (e) => {
     const {value: message} = e; 
     this.setState({message});
   }
 
-  goToStep = (step) => {
-    this.setState({step});
+  goToStep1 = () => {
+    this.setState({
+      step: 1,
+      message: t(
+        'bandialog.email_message_ban',
+        this.props.username,
+      ),
+    });
   }
 
   renderStep0() {
@@ -30,18 +42,20 @@ class BanUserDialog extends React.Component {
     } = this.props;
 
     return (
-      <div>
-        <div className={styles.header}>
-          <h2>{t('bandialog.ban_user')}</h2>
-        </div>
-        <div className={styles.separator}>
-          <h3>{t('bandialog.are_you_sure', username)}</h3>
-          <p>{info}</p>
-        </div>
+      <section>
+        <h2 className={styles.header}>
+          {t('bandialog.ban_user')}
+        </h2>
+        <h3 className={styles.subheader}>
+          {t('bandialog.are_you_sure', username)}
+        </h3>
+        <p className={styles.description}>
+          {info}
+        </p>
         <div className={styles.buttons}>
           <Button
             className={cn('talk-ban-user-dialog-button-cancel')}
-            cStyle="cancel"
+            cStyle="white"
             onClick={onCancel}
             raised >
             {t('bandialog.cancel')}
@@ -49,12 +63,12 @@ class BanUserDialog extends React.Component {
           <Button 
             className={cn('talk-ban-user-dialog-button-confirm')}
             cStyle="black"
-            onClick={() => this.goToStep(1)}
+            onClick={this.goToStep1}
             raised >
             {t('bandialog.yes_ban_user')}
           </Button>
         </div>
-      </div>
+      </section>
     );
   }
 
@@ -67,32 +81,39 @@ class BanUserDialog extends React.Component {
     const {message} = this.state;
 
     return (
-      <div>
-        <h2>Notify the user of ban</h2>
-        <p>This will notify the user by email that they have been banned from the community</p>
+      <section>
+        <h2 className={styles.header}>
+          {t('bandialog.notify_ban_headline')}
+        </h2>
+        <p className={styles.description}>
+          {t('bandialog.notify_ban_description')}
+        </p>
         <fieldset>
           <legend className={styles.legend}>{t('bandialog.write_a_message')}</legend>
           <textarea
           rows={5}
           className={styles.messageInput}
           value={message}
-          onChange={this.handleMessageChange} />
+          onChange={this.handleMessageChange}
+          />
         </fieldset>
-        <Button
-          className={cn('talk-ban-user-dialog-button-cancel')}
-          cStyle="cancel"
-          onClick={onCancel}
-          raised >
-          {t('bandialog.cancel')}
-        </Button>
-        <Button 
-          className={cn('talk-ban-user-dialog-button-confirm')}
-          cStyle="black"
-          onClick={onPerform}
-          raised >
-          {t('bandialog.send')}
-        </Button>
-      </div>
+        <div className={styles.buttons}>
+          <Button
+            className={cn('talk-ban-user-dialog-button-cancel')}
+            cStyle="white"
+            onClick={onCancel}
+            raised >
+            {t('bandialog.cancel')}
+          </Button>
+          <Button 
+            className={cn('talk-ban-user-dialog-button-confirm')}
+            cStyle="black"
+            onClick={onPerform}
+            raised >
+            {t('bandialog.send')}
+          </Button>
+        </div>
+      </section>
     )
   }
 
diff --git a/locales/en.yml b/locales/en.yml
index 64c119e24..ec7c48f0d 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -14,6 +14,9 @@ en:
     yes_ban_user: "Yes, Ban User"
     write_a_message: "Write a message"
     send: "Send"
+    notify_ban_headline: "Notify the user of ban"
+    notify_ban_description: "This will notify the user by email that they have been banned from the community"
+    email_message_ban: "Dear {0},\n\nSomeone with access to your account has violated our community guidelines. As a result, your account has been banned. You will no longer be able to comment, like or report comments. if you think this has been done in error, please contact our community team."
   bio_offensive: "This bio is offensive"
   cancel: "Cancel"
   characters_remaining: "characters remaining"
diff --git a/locales/es.yml b/locales/es.yml
index fc14d5ed5..be99cae16 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -14,6 +14,9 @@ es:
     yes_ban_user: "Si, Suspender al usuario"
     write_a_message: "Escribe un mensaje"
     send: "Enviar"
+    notify_ban_headline: "Notificar al usuario de la suspensión"
+    notify_ban_description: "Esto notificará al usuario por email que fueron suspendidos de la comunidad"
+    email_message_ban: "Dear {0},\n\nSomeone with access to your account has violated our community guidelines. As a result, your account has been banned. You will no longer be able to comment, like or report comments. if you think this has been done in error, please contact our community team."
   bio_offensive: "Esta biografia es ofensiva"
   cancel: Cancelar
   characters_remaining: "carácteres restantes"