diff --git a/jslib b/jslib
index c3f67dbe26..a867c14b2a 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit c3f67dbe26d7d5b30645a2857fd9f316fce7b6bc
+Subproject commit a867c14b2a8bb5f75cd495018e6c86eff22651b9
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 34929a1c94..bc30dd45a1 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -200,6 +200,12 @@
   "length": {
     "message": "Length"
   },
+  "numWords": {
+    "message": "Number of Words"
+  },
+  "wordSeparator": {
+    "message": "Word Separator"
+  },
   "minNumbers": {
     "message": "Minimum Numbers"
   },
@@ -230,6 +236,9 @@
   "password": {
     "message": "Password"
   },
+  "passphrase": {
+    "message": "Passphrase"
+  },
   "favorite": {
     "message": "Favorite"
   },
diff --git a/src/popup/generator/password-generator.component.html b/src/popup/generator/password-generator.component.html
index d84a650b01..bb54bc5f52 100644
--- a/src/popup/generator/password-generator.component.html
+++ b/src/popup/generator/password-generator.component.html
@@ -33,52 +33,74 @@
             {{'options' | i18n}}
         </div>
         <div class="box-content">
-            <div class="box-content-row box-content-row-slider" appBoxRow>
-                <label for="length">{{'length' | i18n}}</label>
-                <input id="length" type="number" min="5" max="128" [(ngModel)]="options.length"
-                       (blur)="saveOptions()">
-                <input id="lengthRange" type="range" min="5" max="128" step="1"
-                       [(ngModel)]="options.length" (change)="sliderChanged()" (input)="sliderInput()">
-            </div>
-            <div class="box-content-row box-content-row-checkbox" appBoxRow>
-                <label for="uppercase">A-Z</label>
-                <input id="uppercase" type="checkbox" (change)="saveOptions()"
-                       [(ngModel)]="options.uppercase">
-            </div>
-            <div class="box-content-row box-content-row-checkbox" appBoxRow>
-                <label for="lowercase">a-z</label>
-                <input id="lowercase" type="checkbox" (change)="saveOptions()"
-                       [(ngModel)]="options.lowercase">
-            </div>
-            <div class="box-content-row box-content-row-checkbox" appBoxRow>
-                <label for="numbers">0-9</label>
-                <input id="numbers" type="checkbox" (change)="saveOptions()"
-                       [(ngModel)]="options.number">
-            </div>
-            <div class="box-content-row box-content-row-checkbox" appBoxRow>
-                <label for="special">!@#$%^&*</label>
-                <input id="special" type="checkbox" (change)="saveOptions()"
-                       [(ngModel)]="options.special">
+            <div class="box-content-row" appBoxRow>
+                <label for="type" class="sr-only">{{'type' | i18n}}</label>
+                <select id="type" [(ngModel)]="options.type" (change)="saveOptions()">
+                    <option value="password">{{'password' | i18n}}</option>
+                    <option value="passphrase">{{'passphrase' | i18n}}</option>
+                </select>
             </div>
         </div>
     </div>
-    <div class="box">
+    <div class="box" *ngIf="options.type === 'passphrase'">
         <div class="box-content">
             <div class="box-content-row box-content-row-input" appBoxRow>
-                <label for="min-number">{{'minNumbers' | i18n}}</label>
-                <input id="min-number" type="number" min="0" max="9" (input)="saveOptions()"
-                       [(ngModel)]="options.minNumber">
+                <label for="num-words">{{'numWords' | i18n}}</label>
+                <input id="num-words" type="number" min="3" max="20" (input)="saveOptions()"
+                    [(ngModel)]="options.numWords">
             </div>
             <div class="box-content-row box-content-row-input" appBoxRow>
-                <label for="min-special">{{'minSpecial' | i18n}}</label>
-                <input id="min-special" type="number" min="0" max="9" (input)="saveOptions()"
-                       [(ngModel)]="options.minSpecial">
-            </div>
-            <div class="box-content-row box-content-row-checkbox" appBoxRow>
-                <label for="ambiguous">{{'avoidAmbChar' | i18n}}</label>
-                <input id="ambiguous" type="checkbox" (change)="saveOptions()"
-                       [(ngModel)]="avoidAmbiguous">
+                <label for="word-separator">{{'wordSeparator' | i18n}}</label>
+                <input id="word-separator" type="text" maxlength="1" (input)="saveOptions()"
+                    [(ngModel)]="options.wordSeparator">
             </div>
         </div>
     </div>
+    <ng-container *ngIf="options.type === 'password'">
+        <div class="box">
+            <div class="box-content">
+                <div class="box-content-row box-content-row-slider" appBoxRow>
+                    <label for="length">{{'length' | i18n}}</label>
+                    <input id="length" type="number" min="5" max="128" [(ngModel)]="options.length"
+                        (blur)="saveOptions()">
+                    <input id="lengthRange" type="range" min="5" max="128" step="1"
+                        [(ngModel)]="options.length" (change)="sliderChanged()" (input)="sliderInput()">
+                </div>
+                <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                    <label for="uppercase">A-Z</label>
+                    <input id="uppercase" type="checkbox" (change)="saveOptions()" [(ngModel)]="options.uppercase">
+                </div>
+                <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                    <label for="lowercase">a-z</label>
+                    <input id="lowercase" type="checkbox" (change)="saveOptions()" [(ngModel)]="options.lowercase">
+                </div>
+                <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                    <label for="numbers">0-9</label>
+                    <input id="numbers" type="checkbox" (change)="saveOptions()" [(ngModel)]="options.number">
+                </div>
+                <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                    <label for="special">!@#$%^&*</label>
+                    <input id="special" type="checkbox" (change)="saveOptions()" [(ngModel)]="options.special">
+                </div>
+            </div>
+        </div>
+        <div class="box">
+            <div class="box-content">
+                <div class="box-content-row box-content-row-input" appBoxRow>
+                    <label for="min-number">{{'minNumbers' | i18n}}</label>
+                    <input id="min-number" type="number" min="0" max="9" (input)="saveOptions()"
+                        [(ngModel)]="options.minNumber">
+                </div>
+                <div class="box-content-row box-content-row-input" appBoxRow>
+                    <label for="min-special">{{'minSpecial' | i18n}}</label>
+                    <input id="min-special" type="number" min="0" max="9" (input)="saveOptions()"
+                        [(ngModel)]="options.minSpecial">
+                </div>
+                <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                    <label for="ambiguous">{{'avoidAmbChar' | i18n}}</label>
+                    <input id="ambiguous" type="checkbox" (change)="saveOptions()" [(ngModel)]="avoidAmbiguous">
+                </div>
+            </div>
+        </div>
+    </ng-container>
 </content>