diff --git a/jslib b/jslib
index 93edd272dd..e297f39bd5 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 93edd272dde1d0d5739c29a57668849fb445eee3
+Subproject commit e297f39bd53db6939bc888e5aa1c41ff8579b19d
diff --git a/src/app/tools/breach-report.component.html b/src/app/tools/breach-report.component.html
index 3bebc6d0b3..5f90854480 100644
--- a/src/app/tools/breach-report.component.html
+++ b/src/app/tools/breach-report.component.html
@@ -2,15 +2,27 @@
     <h1>{{'dataBreachReport' | i18n}}</h1>
 </div>
 <p>{{'breachDesc' | i18n}}</p>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="loading"></i>
-<ng-container *ngIf="!loading">
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+    <div class="row">
+        <div class="form-group col-6">
+            <label for="username">{{'username' | i18n}}</label>
+            <input id="username" type="text" name="Username" class="form-control" [(ngModel)]="username" required>
+            <small class="form-text text-muted">{{'breachCheckUsernameEmail' | i18n}}</small>
+        </div>
+    </div>
+    <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+        <i class="fa fa-spinner fa-spin"></i>
+        <span>{{'checkBreaches' | i18n}}</span>
+    </button>
+</form>
+<div class="mt-4" *ngIf="!form.loading && checkedUsername">
     <p *ngIf="error">{{'reportError' | i18n}}...</p>
     <ng-container *ngIf="!error">
         <app-callout type="success" title="{{'goodNews' | i18n}}" *ngIf="!breachedAccounts.length">
-            {{'breachEmailNotFound' | i18n : email}}
+            {{'breachUsernameNotFound' | i18n : checkedUsername}}
         </app-callout>
         <app-callout type="danger" title="{{'breachFound' | i18n}}" *ngIf="breachedAccounts.length">
-            {{'breachEmailFound' | i18n : email : breachedAccounts.length}}
+            {{'breachUsernameFound' | i18n : checkedUsername : breachedAccounts.length}}
         </app-callout>
         <ul class="list-group list-group-breach" *ngIf="breachedAccounts.length">
             <li *ngFor="let a of breachedAccounts" class="list-group-item d-flex align-items-center">
@@ -42,4 +54,4 @@
             </li>
         </ul>
     </ng-container>
-</ng-container>
+</div>
diff --git a/src/app/tools/breach-report.component.ts b/src/app/tools/breach-report.component.ts
index f04bbf4e87..8efddd950a 100644
--- a/src/app/tools/breach-report.component.ts
+++ b/src/app/tools/breach-report.component.ts
@@ -12,21 +12,27 @@ import { BreachAccountResponse } from 'jslib/models/response/breachAccountRespon
     templateUrl: 'breach-report.component.html',
 })
 export class BreachReportComponent implements OnInit {
-    loading = true;
     error = false;
-    email: string;
+    username: string;
+    checkedUsername: string;
     breachedAccounts: BreachAccountResponse[] = [];
+    formPromise: Promise<BreachAccountResponse[]>;
 
     constructor(private auditService: AuditService, private userService: UserService) { }
 
     async ngOnInit() {
-        this.loading = true;
+        this.username = await this.userService.getEmail();
+    }
+
+    async submit() {
+        this.error = false;
+        this.username = this.username.toLowerCase();
         try {
-            this.email = await this.userService.getEmail();
-            this.breachedAccounts = await this.auditService.breachedAccounts(this.email);
+            this.formPromise = this.auditService.breachedAccounts(this.username);
+            this.breachedAccounts = await this.formPromise;
         } catch {
             this.error = true;
         }
-        this.loading = false;
+        this.checkedUsername = this.username;
     }
 }
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 6cebae60c5..3d4bf27212 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -1148,10 +1148,16 @@
   "breachDesc": {
     "message": "A \"breach\" is an incident where a site's data has been illegally accessed by hackers and then released publicly. Review the types of data that were compromised (email addresses, passwords, credit cards etc.) and take appropriate action, such as changing passwords."
   },
-  "breachEmailNotFound": {
-    "message": "Your email ($EMAIL$) was not found in any known data breaches.",
+  "breachCheckUsernameEmail": {
+    "message": "Check any usernames or email addresses that you use."
+  },
+  "checkBreaches": {
+    "message": "Check Breaches"
+  },
+  "breachUsernameNotFound": {
+    "message": "$USERNAME$ was not found in any known data breaches.",
     "placeholders": {
-      "email": {
+      "username": {
         "content": "$1",
         "example": "user@example.com"
       }
@@ -1161,10 +1167,10 @@
     "message": "Good News",
     "description": "ex. Good News, No Breached Accounts Found!"
   },
-  "breachEmailFound": {
-    "message": "Your email ($EMAIL$) was found in $COUNT$ different data breaches online.",
+  "breachUsernameFound": {
+    "message": "$USERNAME$ was found in $COUNT$ different data breaches online.",
     "placeholders": {
-      "email": {
+      "username": {
         "content": "$1",
         "example": "user@example.com"
       },