diff --git a/locales/en/messages.json b/locales/en/messages.json
index a02b3399a4..9ff82e0fb3 100644
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -1,5 +1,318 @@
 {
-  "hello": {
-    "message": "hello world"
+  "whatTypeOfItem": {
+    "message": "What type of item is this?"
+  },
+  "name": {
+    "message": "Name"
+  },
+  "uri": {
+    "message": "URI"
+  },
+  "uriPosition": {
+    "message": "URI $POSITION$",
+    "description": "A listing of URIs. Ex: URI 1, URI 2, URI 3, etc.",
+    "placeholders": {
+      "position": {
+        "content": "$1",
+        "example": "2"
+      }
+    }
+  },
+  "newUri": {
+    "message": "New URI"
+  },
+  "username": {
+    "message": "Username"
+  },
+  "password": {
+    "message": "Password"
+  },
+  "notes": {
+    "message": "Notes"
+  },
+  "customFields": {
+    "message": "Custom Fields"
+  },
+  "cardholderName": {
+    "message": "Cardholder Name"
+  },
+  "number": {
+    "message": "Number"
+  },
+  "brand": {
+    "message": "Brand"
+  },
+  "expiration": {
+    "message": "Expiration"
+  },
+  "securityCode": {
+    "message": "Security Code"
+  },
+  "identityName": {
+    "message": "Identity Name"
+  },
+  "company": {
+    "message": "Company"
+  },
+  "ssn": {
+    "message": "Social Security Number"
+  },
+  "passportNumber": {
+    "message": "Passport Number"
+  },
+  "licenseNumber": {
+    "message": "License Number"
+  },
+  "email": {
+    "message": "Email"
+  },
+  "phone": {
+    "message": "Phone"
+  },
+  "january": {
+    "message": "January"
+  },
+  "february": {
+    "message": "February"
+  },
+  "march": {
+    "message": "March"
+  },
+  "april": {
+    "message": "April"
+  },
+  "may": {
+    "message": "May"
+  },
+  "june": {
+    "message": "June"
+  },
+  "july": {
+    "message": "July"
+  },
+  "august": {
+    "message": "August"
+  },
+  "september": {
+    "message": "September"
+  },
+  "october": {
+    "message": "October"
+  },
+  "november": {
+    "message": "November"
+  },
+  "december": {
+    "message": "December"
+  },
+  "title": {
+    "message": "Title"
+  },
+  "mr": {
+    "message": "Mr"
+  },
+  "mrs": {
+    "message": "Mrs"
+  },
+  "ms": {
+    "message": "Ms"
+  },
+  "dr": {
+    "message": "Dr"
+  },
+  "expirationMonth": {
+    "message": "Expiration Month"
+  },
+  "expirationYear": {
+    "message": "Expiration Year"
+  },
+  "authenticatorKeyTotp": {
+    "message": "Authenticator Key (TOTP)"
+  },
+  "folder": {
+    "message": "Folder"
+  },
+  "newCustomField": {
+    "message": "New Custom Field"
+  },
+  "value": {
+    "message": "Value"
+  },
+  "cfTypeText": {
+    "message": "Text"
+  },
+  "cfTypeHidden": {
+    "message": "Hidden"
+  },
+  "cfTypeBoolean": {
+    "message": "Boolean"
+  },
+  "remove": {
+    "message": "Remove"
+  },
+  "noneFolder": {
+    "message": "No Folder",
+    "description": "This is the folder for uncategorized items"
+  },
+  "addFolder": {
+    "message": "Add Folder"
+  },
+  "editFolder": {
+    "message": "Edit Folder"
+  },
+  "baseDomain": {
+    "message": "Base domain"
+  },
+  "host": {
+    "message": "Host",
+    "description": "A URL's host value. For example, the host of https://sub.domain.com:443 is 'sub.domain.com:443'."
+  },
+  "exact": {
+    "message": "Exact"
+  },
+  "startsWith": {
+    "message": "Starts with"
+  },
+  "regEx": {
+    "message": "Regular expression",
+    "description": "A programming term, also known as 'RegEx'."
+  },
+  "matchDetection": {
+    "message": "Match Detection",
+    "description": "URI match detection for auto-fill."
+  },
+  "defaultMatchDetection": {
+    "message": "Default match detection",
+    "description": "Default URI match detection for auto-fill."
+  },
+  "never": {
+    "message": "Never"
+  },
+  "toggleVisibility": {
+    "message": "Toggle Visibility"
+  },
+  "generatePassword": {
+    "message": "Generate Password"
+  },
+  "checkPassword": {
+    "message": "Check if password has been exposed."
+  },
+  "passwordExposed": {
+    "message": "This password has been exposed $VALUE$ time(s) in data breaches. You should change it.",
+    "placeholders": {
+      "value": {
+        "content": "$1",
+        "example": "2"
+      }
+    }
+  },
+  "passwordSafe": {
+    "message": "This password was not found in any known data breaches. It should be safe to use."
+  },
+  "save": {
+    "message": "Save"
+  },
+  "cancel": {
+    "message": "Cancel"
+  },
+  "close": {
+    "message": "Close"
+  },
+  "delete": {
+    "message": "Delete"
+  },
+  "favorite": {
+    "message": "Favorite"
+  },
+  "edit": {
+    "message": "Edit"
+  },
+  "searchCollection": {
+    "message": "Search Collection"
+  },
+  "searchFolder": {
+    "message": "Search Folder"
+  },
+  "searchFavorites": {
+    "message": "Search Favorites"
+  },
+  "searchType": {
+    "message": "Search Type",
+    "description": "Search item type"
+  },
+  "searchVault": {
+    "message": "Search Vault"
+  },
+  "allItems": {
+    "message": "All Items"
+  },
+  "favorites": {
+    "message": "Favorites"
+  },
+  "types": {
+    "message": "Types"
+  },
+  "typeLogin": {
+    "message": "Login"
+  },
+  "typeCard": {
+    "message": "Card"
+  },
+  "typeIdentity": {
+    "message": "Identity"
+  },
+  "typeSecureNote": {
+    "message": "Secure Note"
+  },
+  "folders": {
+    "message": "Folders"
+  },
+  "collections": {
+    "message": "Collections"
+  },
+  "firstName": {
+    "message": "First Name"
+  },
+  "middleName": {
+    "message": "Middle Name"
+  },
+  "lastName": {
+    "message": "Last Name"
+  },
+  "address1": {
+    "message": "Address 1"
+  },
+  "address2": {
+    "message": "Address 2"
+  },
+  "address3": {
+    "message": "Address 3"
+  },
+  "cityTown": {
+    "message": "City / Town"
+  },
+  "stateProvince": {
+    "message": "State / Province"
+  },
+  "zipPostalCode": {
+    "message": "Zip / Postal Code"
+  },
+  "country": {
+    "message": "Country"
+  },
+  "shared": {
+    "message": "Shared"
+  },
+  "attachments": {
+    "message": "Attachments"
+  },
+  "select": {
+    "message": "Select"
+  },
+  "addItem": {
+    "message": "Add Item"
+  },
+  "editItem": {
+    "message": "Edit Item"
   }
 }
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 51746799f1..16b5a01c14 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -1,278 +1,280 @@
 <div class="modal fade">
     <div class="modal-dialog modal-lg">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+            <div class="modal-header">{{title}}</div>
             <div class="modal-body">
-                <div class="content">
-                    <div class="inner-content" *ngIf="cipher">
-                        <div class="box">
-                            <div class="box-header">
-                                {{title}}
-                            </div>
-                            <div class="box-content">
-                                <div class="box-content-row" *ngIf="!editMode" appBoxRow>
-                                    <label for="type">{{'type' | i18n}}</label>
-                                    <select id="type" name="Type" [(ngModel)]="cipher.type">
-                                        <option *ngFor="let o of typeOptions" [ngValue]="o.value">{{o.name}}</option>
-                                    </select>
-                                </div>
-                                <div class="box-content-row" appBoxRow>
-                                    <label for="name">{{'name' | i18n}}</label>
-                                    <input id="name" type="text" name="Name" [(ngModel)]="cipher.name" [appAutofocus]="!editMode">
-                                </div>
-                                <!-- Login -->
-                                <div *ngIf="cipher.type === cipherType.Login">
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="loginUsername">{{'username' | i18n}}</label>
-                                        <input id="loginUsername" type="text" name="Login.Username" [(ngModel)]="cipher.login.username">
-                                    </div>
-                                    <div class="box-content-row box-content-row-flex" appBoxRow>
-                                        <div class="row-main">
-                                            <label for="loginPassword">{{'password' | i18n}}</label>
-                                            <input id="loginPassword" class="monospaced" type="{{showPassword ? 'text' : 'password'}}" name="Login.Password" [(ngModel)]="cipher.login.password">
-                                        </div>
-                                        <div class="action-buttons">
-                                            <button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick title="{{'checkPassword' | i18n}}" (click)="checkPassword()"
-                                                [appApiAction]="checkPasswordPromise" [disabled]="checkPasswordBtn.loading">
-                                                <i class="fa fa-lg fa-check-circle" [hidden]="checkPasswordBtn.loading"></i>
-                                                <i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"></i>
-                                            </button>
-                                            <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
-                                                <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                                            </a>
-                                            <a class="row-btn" href="#" appStopClick appBlurClick title="{{'generatePassword' | i18n}}" (click)="generatePassword()">
-                                                <i class="fa fa-lg fa-refresh"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="loginTotp">{{'authenticatorKeyTotp' | i18n}}</label>
-                                        <input id="loginTotp" type="text" name="Login.Totp" class="monospaced" [(ngModel)]="cipher.login.totp">
-                                    </div>
-                                </div>
-                                <!-- Card -->
-                                <div *ngIf="cipher.type === cipherType.Card">
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="cardCardholderName">{{'cardholderName' | i18n}}</label>
-                                        <input id="cardCardholderName" type="text" name="Card.CardCardholderName" [(ngModel)]="cipher.card.cardholderName">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="cardNumber">{{'number' | i18n}}</label>
-                                        <input id="cardNumber" type="text" name="Card.Number" [(ngModel)]="cipher.card.number">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="cardBrand">{{'brand' | i18n}}</label>
-                                        <select id="cardBrand" name="Card.Brand" [(ngModel)]="cipher.card.brand">
-                                            <option *ngFor="let o of cardBrandOptions" [ngValue]="o.value">{{o.name}}</option>
-                                        </select>
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="cardExpMonth">{{'expirationMonth' | i18n}}</label>
-                                        <select id="cardExpMonth" name="Card.ExpMonth" [(ngModel)]="cipher.card.expMonth">
-                                            <option *ngFor="let o of cardExpMonthOptions" [ngValue]="o.value">{{o.name}}</option>
-                                        </select>
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="cardExpYear">{{'expirationYear' | i18n}}</label>
-                                        <input id="cardExpYear" type="text" name="Card.ExpYear" [(ngModel)]="cipher.card.expYear" placeholder="{{'ex' | i18n}} 2019">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="cardCode">{{'securityCode' | i18n}}</label>
-                                        <input id="cardCode" type="text" name="Card.Code" [(ngModel)]="cipher.card.code">
-                                    </div>
-                                </div>
-                                <!-- Identity -->
-                                <div *ngIf="cipher.type === cipherType.Identity">
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idTitle">{{'title' | i18n}}</label>
-                                        <select id="idTitle" name="Identity.Title" [(ngModel)]="cipher.identity.title">
-                                            <option *ngFor="let o of identityTitleOptions" [ngValue]="o.value">{{o.name}}</option>
-                                        </select>
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idFirstName">{{'firstName' | i18n}}</label>
-                                        <input id="idFirstName" type="text" name="Identity.FirstName" [(ngModel)]="cipher.identity.firstName">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idMiddleName">{{'middleName' | i18n}}</label>
-                                        <input id="idMiddleName" type="text" name="Identity.MiddleName" [(ngModel)]="cipher.identity.middleName">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idLastName">{{'lastName' | i18n}}</label>
-                                        <input id="idLastName" type="text" name="Identity.LastName" [(ngModel)]="cipher.identity.lastName">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idUsername">{{'username' | i18n}}</label>
-                                        <input id="idUsername" type="text" name="Identity.Username" [(ngModel)]="cipher.identity.username">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idCompany">{{'company' | i18n}}</label>
-                                        <input id="idCompany" type="text" name="Identity.Company" [(ngModel)]="cipher.identity.company">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idSsn">{{'ssn' | i18n}}</label>
-                                        <input id="idSsn" type="text" name="Identity.SSN" [(ngModel)]="cipher.identity.ssn">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idPassportNumber">{{'passportNumber' | i18n}}</label>
-                                        <input id="idPassportNumber" type="text" name="Identity.PassportNumber" [(ngModel)]="cipher.identity.passportNumber">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idLicenseNumber">{{'licenseNumber' | i18n}}</label>
-                                        <input id="idLicenseNumber" type="text" name="Identity.LicenseNumber" [(ngModel)]="cipher.identity.licenseNumber">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idEmail">{{'email' | i18n}}</label>
-                                        <input id="idEmail" type="text" name="Identity.Email" [(ngModel)]="cipher.identity.email">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idPhone">{{'phone' | i18n}}</label>
-                                        <input id="idPhone" type="text" name="Identity.Phone" [(ngModel)]="cipher.identity.phone">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idAddress1">{{'address1' | i18n}}</label>
-                                        <input id="idAddress1" type="text" name="Identity.Address1" [(ngModel)]="cipher.identity.address1">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idAddress2">{{'address2' | i18n}}</label>
-                                        <input id="idAddress2" type="text" name="Identity.Address2" [(ngModel)]="cipher.identity.address2">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idAddress3">{{'address3' | i18n}}</label>
-                                        <input id="idAddress3" type="text" name="Identity.Address3" [(ngModel)]="cipher.identity.address3">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idCity">{{'cityTown' | i18n}}</label>
-                                        <input id="idCity" type="text" name="Identity.City" [(ngModel)]="cipher.identity.city">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idState">{{'stateProvince' | i18n}}</label>
-                                        <input id="idState" type="text" name="Identity.State" [(ngModel)]="cipher.identity.state">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idPostalCode">{{'zipPostalCode' | i18n}}</label>
-                                        <input id="idPostalCode" type="text" name="Identity.PostalCode" [(ngModel)]="cipher.identity.postalCode">
-                                    </div>
-                                    <div class="box-content-row" appBoxRow>
-                                        <label for="idCountry">{{'country' | i18n}}</label>
-                                        <input id="idCountry" type="text" name="Identity.Country" [(ngModel)]="cipher.identity.country">
-                                    </div>
-                                </div>
-                            </div>
+                <div class="row" *ngIf="!editMode">
+                    <div class="col-6">
+                        <div class="form-group">
+                            <label for="type">{{'whatTypeOfItem' | i18n}}</label>
+                            <select id="type" name="Type" [(ngModel)]="cipher.type">
+                                <option *ngFor="let o of typeOptions" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
                         </div>
-                        <div class="box" *ngIf="cipher.type === cipherType.Login">
-                            <div class="box-content">
-                                <ng-container *ngIf="cipher.login.hasUris">
-                                    <div class="box-content-row box-content-row-multi" appBoxRow *ngFor="let u of cipher.login.uris; let i = index">
-                                        <a href="#" appStopClick (click)="removeUri(u)" title="{{'remove' | i18n}}">
-                                            <i class="fa fa-minus-circle fa-lg"></i>
-                                        </a>
-                                        <div class="row-main">
-                                            <label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
-                                            <input id="loginUri{{i}}" type="text" name="Login.Uris[{{i}}].Uri" [(ngModel)]="u.uri" placeholder="{{'ex' | i18n}} https://google.com">
-                                            <label for="loginUriMatch{{i}}" class="sr-only">
-                                                {{'matchDetection' | i18n}} {{(i + 1)}}
-                                            </label>
-                                            <select id="loginUriMatch{{i}}" name="Login.Uris[{{i}}].Match" [(ngModel)]="u.match" [hidden]="u.showOptions === false || (u.showOptions == null && u.match == null)"
-                                                (change)="loginUriMatchChanged(u)">
-                                                <option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{o.name}}</option>
-                                            </select>
-                                        </div>
-                                        <div class="action-buttons">
-                                            <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleOptions' | i18n}}" (click)="toggleUriOptions(u)">
-                                                <i class="fa fa-lg fa-cog"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                </ng-container>
-                                <a href="#" appStopClick appBlurClick (click)="addUri()" class="box-content-row">
-                                    <i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newUri' | i18n}}
-                                </a>
-                            </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6">
+                        <div class="form-group">
+                            <label for="name">{{'name' | i18n}}</label>
+                            <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="cipher.name" [appAutofocus]="!editMode">
                         </div>
-                        <div class="box">
-                            <div class="box-content">
-                                <div class="box-content-row" appBoxRow>
-                                    <label for="folder">{{'folder' | i18n}}</label>
-                                    <select id="folder" name="FolderId" [(ngModel)]="cipher.folderId">
-                                        <option *ngFor="let f of folders" [ngValue]="f.id">{{f.name}}</option>
-                                    </select>
+                    </div>
+                </div>
+                <div class="box">
+                    <div class="box-content">
+                        <!-- Login -->
+                        <div *ngIf="cipher.type === cipherType.Login">
+                            <div class="box-content-row" appBoxRow>
+                                <label for="loginUsername">{{'username' | i18n}}</label>
+                                <input id="loginUsername" type="text" name="Login.Username" [(ngModel)]="cipher.login.username">
+                            </div>
+                            <div class="box-content-row box-content-row-flex" appBoxRow>
+                                <div class="row-main">
+                                    <label for="loginPassword">{{'password' | i18n}}</label>
+                                    <input id="loginPassword" class="monospaced" type="{{showPassword ? 'text' : 'password'}}" name="Login.Password" [(ngModel)]="cipher.login.password">
                                 </div>
-                                <div class="box-content-row box-content-row-checkbox" appBoxRow>
-                                    <label for="favorite">{{'favorite' | i18n}}</label>
-                                    <input id="favorite" type="checkbox" name="Favorite" [(ngModel)]="cipher.favorite">
-                                </div>
-                                <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick (click)="attachments()" *ngIf="editMode">
-                                    <div class="row-main">{{'attachments' | i18n}}</div>
-                                    <i class="fa fa-chevron-right row-sub-icon"></i>
-                                </a>
-                            </div>
-                        </div>
-                        <div class="box">
-                            <div class="box-header">
-                                <label for="notes">{{'notes' | i18n}}</label>
-                            </div>
-                            <div class="box-content">
-                                <div class="box-content-row" appBoxRow>
-                                    <textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"></textarea>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="box">
-                            <div class="box-header">
-                                {{'customFields' | i18n}}
-                            </div>
-                            <div class="box-content">
-                                <ng-container *ngIf="cipher.hasFields">
-                                    <div class="box-content-row box-content-row-multi" appBoxRow *ngFor="let f of cipher.fields; let i = index" [ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
-                                        <a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
-                                            <i class="fa fa-minus-circle fa-lg"></i>
-                                        </a>
-                                        <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
-                                        <label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
-                                        <div class="row-main">
-                                            <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name" class="row-label" placeholder="{{'name' | i18n}}">
-                                            <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value" *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
-                                            <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}" name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced"
-                                                *ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
-                                        </div>
-                                        <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox" [(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean"
-                                            appTrueFalseValue trueValue="true" falseValue="false">
-                                        <div class="action-buttons" *ngIf="f.type === fieldType.Hidden">
-                                            <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
-                                                <i class="fa fa-lg" [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                </ng-container>
-                                <div class="box-content-row" appBoxRow>
-                                    <a href="#" appStopClick (click)="addField()">
-                                        <i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newCustomField' | i18n}}
+                                <div class="action-buttons">
+                                    <button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick title="{{'checkPassword' | i18n}}" (click)="checkPassword()"
+                                        [appApiAction]="checkPasswordPromise" [disabled]="checkPasswordBtn.loading">
+                                        <i class="fa fa-lg fa-check-circle" [hidden]="checkPasswordBtn.loading"></i>
+                                        <i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"></i>
+                                    </button>
+                                    <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                                        <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                                    </a>
+                                    <a class="row-btn" href="#" appStopClick appBlurClick title="{{'generatePassword' | i18n}}" (click)="generatePassword()">
+                                        <i class="fa fa-lg fa-refresh"></i>
                                     </a>
-                                    <label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
-                                    <select id="addFieldType" name="AddFieldType" [(ngModel)]="addFieldType" class="field-type">
-                                        <option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>
-                                    </select>
                                 </div>
                             </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="loginTotp">{{'authenticatorKeyTotp' | i18n}}</label>
+                                <input id="loginTotp" type="text" name="Login.Totp" class="monospaced" [(ngModel)]="cipher.login.totp">
+                            </div>
+                        </div>
+                        <!-- Card -->
+                        <div *ngIf="cipher.type === cipherType.Card">
+                            <div class="box-content-row" appBoxRow>
+                                <label for="cardCardholderName">{{'cardholderName' | i18n}}</label>
+                                <input id="cardCardholderName" type="text" name="Card.CardCardholderName" [(ngModel)]="cipher.card.cardholderName">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="cardNumber">{{'number' | i18n}}</label>
+                                <input id="cardNumber" type="text" name="Card.Number" [(ngModel)]="cipher.card.number">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="cardBrand">{{'brand' | i18n}}</label>
+                                <select id="cardBrand" name="Card.Brand" [(ngModel)]="cipher.card.brand">
+                                    <option *ngFor="let o of cardBrandOptions" [ngValue]="o.value">{{o.name}}</option>
+                                </select>
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="cardExpMonth">{{'expirationMonth' | i18n}}</label>
+                                <select id="cardExpMonth" name="Card.ExpMonth" [(ngModel)]="cipher.card.expMonth">
+                                    <option *ngFor="let o of cardExpMonthOptions" [ngValue]="o.value">{{o.name}}</option>
+                                </select>
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="cardExpYear">{{'expirationYear' | i18n}}</label>
+                                <input id="cardExpYear" type="text" name="Card.ExpYear" [(ngModel)]="cipher.card.expYear" placeholder="{{'ex' | i18n}} 2019">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="cardCode">{{'securityCode' | i18n}}</label>
+                                <input id="cardCode" type="text" name="Card.Code" [(ngModel)]="cipher.card.code">
+                            </div>
+                        </div>
+                        <!-- Identity -->
+                        <div *ngIf="cipher.type === cipherType.Identity">
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idTitle">{{'title' | i18n}}</label>
+                                <select id="idTitle" name="Identity.Title" [(ngModel)]="cipher.identity.title">
+                                    <option *ngFor="let o of identityTitleOptions" [ngValue]="o.value">{{o.name}}</option>
+                                </select>
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idFirstName">{{'firstName' | i18n}}</label>
+                                <input id="idFirstName" type="text" name="Identity.FirstName" [(ngModel)]="cipher.identity.firstName">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idMiddleName">{{'middleName' | i18n}}</label>
+                                <input id="idMiddleName" type="text" name="Identity.MiddleName" [(ngModel)]="cipher.identity.middleName">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idLastName">{{'lastName' | i18n}}</label>
+                                <input id="idLastName" type="text" name="Identity.LastName" [(ngModel)]="cipher.identity.lastName">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idUsername">{{'username' | i18n}}</label>
+                                <input id="idUsername" type="text" name="Identity.Username" [(ngModel)]="cipher.identity.username">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idCompany">{{'company' | i18n}}</label>
+                                <input id="idCompany" type="text" name="Identity.Company" [(ngModel)]="cipher.identity.company">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idSsn">{{'ssn' | i18n}}</label>
+                                <input id="idSsn" type="text" name="Identity.SSN" [(ngModel)]="cipher.identity.ssn">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idPassportNumber">{{'passportNumber' | i18n}}</label>
+                                <input id="idPassportNumber" type="text" name="Identity.PassportNumber" [(ngModel)]="cipher.identity.passportNumber">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idLicenseNumber">{{'licenseNumber' | i18n}}</label>
+                                <input id="idLicenseNumber" type="text" name="Identity.LicenseNumber" [(ngModel)]="cipher.identity.licenseNumber">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idEmail">{{'email' | i18n}}</label>
+                                <input id="idEmail" type="text" name="Identity.Email" [(ngModel)]="cipher.identity.email">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idPhone">{{'phone' | i18n}}</label>
+                                <input id="idPhone" type="text" name="Identity.Phone" [(ngModel)]="cipher.identity.phone">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idAddress1">{{'address1' | i18n}}</label>
+                                <input id="idAddress1" type="text" name="Identity.Address1" [(ngModel)]="cipher.identity.address1">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idAddress2">{{'address2' | i18n}}</label>
+                                <input id="idAddress2" type="text" name="Identity.Address2" [(ngModel)]="cipher.identity.address2">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idAddress3">{{'address3' | i18n}}</label>
+                                <input id="idAddress3" type="text" name="Identity.Address3" [(ngModel)]="cipher.identity.address3">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idCity">{{'cityTown' | i18n}}</label>
+                                <input id="idCity" type="text" name="Identity.City" [(ngModel)]="cipher.identity.city">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idState">{{'stateProvince' | i18n}}</label>
+                                <input id="idState" type="text" name="Identity.State" [(ngModel)]="cipher.identity.state">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idPostalCode">{{'zipPostalCode' | i18n}}</label>
+                                <input id="idPostalCode" type="text" name="Identity.PostalCode" [(ngModel)]="cipher.identity.postalCode">
+                            </div>
+                            <div class="box-content-row" appBoxRow>
+                                <label for="idCountry">{{'country' | i18n}}</label>
+                                <input id="idCountry" type="text" name="Identity.Country" [(ngModel)]="cipher.identity.country">
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="footer">
-                    <button appBlurClick type="submit" class="primary" title="{{'save' | i18n}}" [disabled]="form.loading">
-                        <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
-                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
-                    </button>
-                    <button appBlurClick type="button" (click)="cancel()" title="{{'cancel' | i18n}}">
-                        {{'cancel' | i18n}}
-                    </button>
-                    <div class="right">
-                        <button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger" title="{{'delete' | i18n}}" *ngIf="editMode"
-                            [disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
-                            <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
-                            <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
-                        </button>
+                <div class="box" *ngIf="cipher.type === cipherType.Login">
+                    <div class="box-content">
+                        <ng-container *ngIf="cipher.login.hasUris">
+                            <div class="box-content-row box-content-row-multi" appBoxRow *ngFor="let u of cipher.login.uris; let i = index">
+                                <a href="#" appStopClick (click)="removeUri(u)" title="{{'remove' | i18n}}">
+                                    <i class="fa fa-minus-circle fa-lg"></i>
+                                </a>
+                                <div class="row-main">
+                                    <label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
+                                    <input id="loginUri{{i}}" type="text" name="Login.Uris[{{i}}].Uri" [(ngModel)]="u.uri" placeholder="{{'ex' | i18n}} https://google.com">
+                                    <label for="loginUriMatch{{i}}" class="sr-only">
+                                        {{'matchDetection' | i18n}} {{(i + 1)}}
+                                    </label>
+                                    <select id="loginUriMatch{{i}}" name="Login.Uris[{{i}}].Match" [(ngModel)]="u.match" [hidden]="u.showOptions === false || (u.showOptions == null && u.match == null)"
+                                        (change)="loginUriMatchChanged(u)">
+                                        <option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{o.name}}</option>
+                                    </select>
+                                </div>
+                                <div class="action-buttons">
+                                    <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleOptions' | i18n}}" (click)="toggleUriOptions(u)">
+                                        <i class="fa fa-lg fa-cog"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </ng-container>
+                        <a href="#" appStopClick appBlurClick (click)="addUri()" class="box-content-row">
+                            <i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newUri' | i18n}}
+                        </a>
                     </div>
                 </div>
+                <div class="box">
+                    <div class="box-content">
+                        <div class="box-content-row" appBoxRow>
+                            <label for="folder">{{'folder' | i18n}}</label>
+                            <select id="folder" name="FolderId" [(ngModel)]="cipher.folderId">
+                                <option *ngFor="let f of folders" [ngValue]="f.id">{{f.name}}</option>
+                            </select>
+                        </div>
+                        <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                            <label for="favorite">{{'favorite' | i18n}}</label>
+                            <input id="favorite" type="checkbox" name="Favorite" [(ngModel)]="cipher.favorite">
+                        </div>
+                        <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick (click)="attachments()" *ngIf="editMode">
+                            <div class="row-main">{{'attachments' | i18n}}</div>
+                            <i class="fa fa-chevron-right row-sub-icon"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="box">
+                    <div class="box-header">
+                        <label for="notes">{{'notes' | i18n}}</label>
+                    </div>
+                    <div class="box-content">
+                        <div class="box-content-row" appBoxRow>
+                            <textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"></textarea>
+                        </div>
+                    </div>
+                </div>
+                <div class="box">
+                    <div class="box-header">
+                        {{'customFields' | i18n}}
+                    </div>
+                    <div class="box-content">
+                        <ng-container *ngIf="cipher.hasFields">
+                            <div class="box-content-row box-content-row-multi" appBoxRow *ngFor="let f of cipher.fields; let i = index" [ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
+                                <a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
+                                    <i class="fa fa-minus-circle fa-lg"></i>
+                                </a>
+                                <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
+                                <label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
+                                <div class="row-main">
+                                    <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name" class="row-label" placeholder="{{'name' | i18n}}">
+                                    <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value" *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
+                                    <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}" name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced"
+                                        *ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
+                                </div>
+                                <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox" [(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean"
+                                    appTrueFalseValue trueValue="true" falseValue="false">
+                                <div class="action-buttons" *ngIf="f.type === fieldType.Hidden">
+                                    <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
+                                        <i class="fa fa-lg" [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </ng-container>
+                        <div class="box-content-row" appBoxRow>
+                            <a href="#" appStopClick (click)="addField()">
+                                <i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newCustomField' | i18n}}
+                            </a>
+                            <label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
+                            <select id="addFieldType" name="AddFieldType" [(ngModel)]="addFieldType" class="field-type">
+                                <option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button appBlurClick type="submit" class="primary" title="{{'save' | i18n}}" [disabled]="form.loading">
+                    <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
+                    <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
+                </button>
+                <button appBlurClick type="button" (click)="cancel()" title="{{'cancel' | i18n}}">
+                    {{'cancel' | i18n}}
+                </button>
+                <div class="right">
+                    <button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger" title="{{'delete' | i18n}}" *ngIf="editMode"
+                        [disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
+                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
+                    </button>
+                </div>
             </div>
         </form>
     </div>
diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index dd49be7a88..5e63d4e79d 100644
--- a/src/app/vault/ciphers.component.html
+++ b/src/app/vault/ciphers.component.html
@@ -9,7 +9,7 @@
                     <app-vault-icon [cipher]="c"></app-vault-icon>
                 </td>
                 <td>
-                    <a href="#" appStopClick (click)="selectCipher(c)" title="{{'viewItem' | i18n}}">{{c.name}}</a>
+                    <a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
                     <i class="fa fa-share-alt text-muted" *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
                     <i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
                     <small>{{c.subTitle}}</small>
diff --git a/src/app/vault/folder-add-edit.component.html b/src/app/vault/folder-add-edit.component.html
index b6dce984f7..f0e1e15995 100644
--- a/src/app/vault/folder-add-edit.component.html
+++ b/src/app/vault/folder-add-edit.component.html
@@ -20,7 +20,7 @@
                     <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
                     <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
                 </button>
-                <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
+                <button type="button" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
                 <div class="right">
                     <button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger"
                             title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
index 6300cbe611..ad59da5c42 100644
--- a/src/app/vault/groupings.component.html
+++ b/src/app/vault/groupings.component.html
@@ -3,47 +3,47 @@
         Filters
     </div>
     <div class="card-body">
-        <input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search"
-               class="form-control" [(ngModel)]="searchText" (input)="searchTextChanged()" appAutofocus>
+        <input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search" class="form-control" [(ngModel)]="searchText"
+            (input)="searchTextChanged()" appAutofocus>
         <ul class="fa-ul">
             <li [ngClass]="{active: selectedAll}">
                 <a href="#" appStopClick appBlurClick (click)="selectAll()">
-                    <i class="fa-li fa fa-fw fa-th"></i>All Items
+                    <i class="fa-li fa fa-fw fa-th"></i>{{'allItems' | i18n}}
                 </a>
             </li>
             <li [ngClass]="{active: selectedFavorites}">
                 <a href="#" appStopClick appBlurClick (click)="selectFavorites()">
-                    <i class="fa-li fa fa-fw fa-star"></i>Favorites
+                    <i class="fa-li fa fa-fw fa-star"></i>{{'favorites' | i18n}}
                 </a>
             </li>
         </ul>
-        <h3>Types</h3>
+        <h3>{{'types' | i18n}}</h3>
         <ul class="fa-ul">
             <li [ngClass]="{active: selectedType === cipherType.Login}">
                 <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
-                    <i class="fa-li fa fa-fw fa-globe"></i>Login
+                    <i class="fa-li fa fa-fw fa-globe"></i>{{'typeLogin' | i18n}}
                 </a>
             </li>
             <li [ngClass]="{active: selectedType === cipherType.Card}">
                 <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
-                    <i class="fa-li fa fa-fw fa-credit-card"></i>Card
+                    <i class="fa-li fa fa-fw fa-credit-card"></i>{{'typeCard' | i18n}}
                 </a>
             </li>
             <li [ngClass]="{active: selectedType === cipherType.Identity}">
                 <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
-                    <i class="fa-li fa fa-fw fa-id-card-o"></i>Identity
+                    <i class="fa-li fa fa-fw fa-id-card-o"></i>{{'typeIdentity' | i18n}}
                 </a>
             </li>
             <li [ngClass]="{active: selectedType === cipherType.SecureNote}">
                 <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.SecureNote)">
-                    <i class="fa-li fa fa-fw fa-sticky-note-o"></i>Secure Note
+                    <i class="fa-li fa fa-fw fa-sticky-note-o"></i>{{'typeSecureNote' | i18n}}
                 </a>
             </li>
         </ul>
-        <p *ngIf="!loaded" class="text-muted">Loading...</p>
+        <p *ngIf="!loaded" class="text-muted"><i class="fa fa-spinner fa-spin"></i></p>
         <ng-container *ngIf="loaded">
             <h3>
-                Folders
+                {{'folders' | i18n}}
                 <button appBlurClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
                     <i class="fa fa-plus fa-fw"></i>
                 </button>
@@ -59,7 +59,7 @@
                 </li>
             </ul>
             <div *ngIf="collections && collections.length">
-                <h3>Collections</h3>
+                <h3>{{'collections' | i18n}}</h3>
                 <ul class="fa-ul">
                     <li *ngFor="let c of collections" [ngClass]="{active: c.id === selectedCollectionId}">
                         <a href="#" appStopClick appBlurClick (click)="selectCollection(c)">
diff --git a/src/app/vault/groupings.component.ts b/src/app/vault/groupings.component.ts
index 3e95a96b90..290183019f 100644
--- a/src/app/vault/groupings.component.ts
+++ b/src/app/vault/groupings.component.ts
@@ -16,6 +16,7 @@ import { GroupingsComponent as BaseGroupingsComponent } from 'jslib/angular/comp
 export class GroupingsComponent extends BaseGroupingsComponent {
     @Output() onSearchTextChanged = new EventEmitter<string>();
     searchText: string = '';
+    searchPlaceholder: string = null;
 
     constructor(collectionService: CollectionService, folderService: FolderService) {
         super(collectionService, folderService);
diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html
index a7f72cccc1..69a1bf5643 100644
--- a/src/app/vault/vault.component.html
+++ b/src/app/vault/vault.component.html
@@ -55,7 +55,7 @@
 <div class="container footer text-muted">
     <div class="row">
         <div class="col">
-            &copy; 2015-2018 8bit Solutions LLC
+            &copy; 2018, 8bit Solutions LLC
         </div>
         <div class="col text-center">
 
diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts
index 37bd305d56..b8edd6aa59 100644
--- a/src/app/vault/vault.component.ts
+++ b/src/app/vault/vault.component.ts
@@ -83,14 +83,14 @@ export class VaultComponent implements OnInit {
     }
 
     async clearGroupingFilters() {
-        this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchVault');
+        this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchVault');
         await this.ciphersComponent.load();
         this.clearFilters();
         this.go();
     }
 
     async filterFavorites() {
-        this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchFavorites');
+        this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchFavorites');
         await this.ciphersComponent.load((c) => c.favorite);
         this.clearFilters();
         this.favorites = true;
@@ -98,7 +98,7 @@ export class VaultComponent implements OnInit {
     }
 
     async filterCipherType(type: CipherType) {
-        this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchType');
+        this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchType');
         await this.ciphersComponent.load((c) => c.type === type);
         this.clearFilters();
         this.type = type;
@@ -107,7 +107,7 @@ export class VaultComponent implements OnInit {
 
     async filterFolder(folderId: string) {
         folderId = folderId === 'none' ? null : folderId;
-        this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchFolder');
+        this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchFolder');
         await this.ciphersComponent.load((c) => c.folderId === folderId);
         this.clearFilters();
         this.folderId = folderId == null ? 'none' : folderId;
@@ -115,7 +115,7 @@ export class VaultComponent implements OnInit {
     }
 
     async filterCollection(collectionId: string) {
-        this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchCollection');
+        this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchCollection');
         await this.ciphersComponent.load((c) => c.collectionIds.indexOf(collectionId) > -1);
         this.clearFilters();
         this.collectionId = collectionId;