diff --git a/website/client/components/chat/reportFlagModal.vue b/website/client/components/chat/reportFlagModal.vue
index 78f45a1e94..70aefdb40d 100644
--- a/website/client/components/chat/reportFlagModal.vue
+++ b/website/client/components/chat/reportFlagModal.vue
@@ -1,18 +1,65 @@
- b-modal#report-flag(:title='$t("abuseFlagModalHeading")', size='lg', :hide-footer='true')
- .modal-header
- h4(v-html="$t('abuseFlagModalHeading', reportData)")
+ b-modal#report-flag(:title='$t("abuseFlagModalHeading")', size='md', :hide-footer='true')
.modal-body
+ strong(v-html="$t('abuseFlagModalHeading', reportData)")
blockquote
div(v-markdown='abuseObject.text')
- p(v-html="$t('abuseFlagModalBody', abuseFlagModalBody)")
- .modal-footer
+ div
+ strong {{$t('whyReportingPost')}}
+ span.optional {{$t('optional')}}
+ textarea.form-control(v-model='reportComment', :placeholder='$t("whyReportingPostPlaceholder")')
+ small(v-html="$t('abuseFlagModalBody', abuseFlagModalBody)")
+ .footer.text-center
button.pull-left.btn.btn-danger(@click='clearFlagCount()', v-if='user.contributor.admin && abuseObject.flagCount > 0')
| Reset Flag Count
- button.btn.btn-primary(@click='close()') {{ $t('cancel') }}
- button.btn.btn-danger(@click='reportAbuse()') {{ $t('abuseFlagModalButton') }}
+ a.cancel-link(@click.prevent='close()') {{ $t('cancel') }}
+ button.btn.btn-danger(@click='reportAbuse()') {{ $t('report') }}
+
+
+
+