diff --git a/src/app/accounts/login.component.ts b/src/app/accounts/login.component.ts
index 1d57749a..c144476e 100644
--- a/src/app/accounts/login.component.ts
+++ b/src/app/accounts/login.component.ts
@@ -46,7 +46,7 @@ export class LoginComponent {
             const response = await this.formPromise;
             if (response.twoFactor) {
                 this.analytics.eventTrack.next({ action: 'Logged In To Two-step' });
-                this.router.navigate(['twoFactor']);
+                this.router.navigate(['2fa']);
                 // TODO: pass 2fa info
             } else {
                 this.analytics.eventTrack.next({ action: 'Logged In' });
diff --git a/src/app/accounts/two-factor.component.html b/src/app/accounts/two-factor.component.html
new file mode 100644
index 00000000..0583c1b4
--- /dev/null
+++ b/src/app/accounts/two-factor.component.html
@@ -0,0 +1,24 @@
+<form id="register-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+    <div class="content">
+        <h1>{{title}}</h1>
+        <div class="box last">
+            <div class="box-content">
+                <div class="box-content-row" appBoxRow>
+                    <label for="code">{{'verificationCode' | i18n}}</label>
+                    <input id="code" type="text" name="Code" [(ngModel)]="token" required appAutofocus>
+                </div>
+                <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                    <label for="remember">{{'verificationCode' | i18n}}</label>
+                    <input id="remember" type="checkbox" [(ngModel)]="remember">
+                </div>
+            </div>
+        </div>
+        <div class="buttons">
+            <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
+                <span [hidden]="form.loading">{{'continue' | i18n}}</span>
+                <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
+            </button>
+            <a routerLink="/login" class="btn block">{{'cancel' | i18n}}</a>
+        </div>
+    </div>
+</form>
diff --git a/src/app/accounts/two-factor.component.ts b/src/app/accounts/two-factor.component.ts
new file mode 100644
index 00000000..e7cc670e
--- /dev/null
+++ b/src/app/accounts/two-factor.component.ts
@@ -0,0 +1,55 @@
+import * as template from './two-factor.component.html';
+
+import {
+    Component,
+} from '@angular/core';
+
+import { Router } from '@angular/router';
+
+import { Angulartics2 } from 'angulartics2';
+import { ToasterService } from 'angular2-toaster';
+
+import { RegisterRequest } from 'jslib/models/request/registerRequest';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { AuthService } from 'jslib/abstractions/auth.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+@Component({
+    selector: 'app-two-factor',
+    template: template,
+})
+export class TwoFactorComponent {
+    token: string = '';
+    remember: boolean = false;
+    providerType: number;
+    email: string;
+    masterPassword: string;
+    formPromise: Promise<any>;
+
+    constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
+        private toasterService: ToasterService, private i18nService: I18nService,
+        private cryptoService: CryptoService, private apiService: ApiService) { }
+
+    async submit() {
+        if (this.token == null || this.token === '') {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('verificationCodeRequired'));
+            return;
+        }
+
+        // TODO: stop U2f
+        // TODO: normalize token
+
+        try {
+            this.formPromise = this.authService.logIn(this.email, this.masterPassword, this.providerType,
+                this.token, this.remember);
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Logged In From Two-step' });
+            this.router.navigate(['vault']);
+        } catch {
+            // TODO: start U2F
+        }
+    }
+}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 070b3397..6b8e2563 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -7,11 +7,13 @@ import {
 import { HintComponent } from './accounts/hint.component';
 import { LoginComponent } from './accounts/login.component';
 import { RegisterComponent } from './accounts/register.component';
+import { TwoFactorComponent } from './accounts/two-factor.component';
 import { VaultComponent } from './vault/vault.component';
 
 const routes: Routes = [
     { path: '', redirectTo: '/login', pathMatch: 'full' },
     { path: 'login', component: LoginComponent },
+    { path: '2fa', component: TwoFactorComponent },
     { path: 'register', component: RegisterComponent },
     { path: 'vault', component: VaultComponent },
     { path: 'hint', component: HintComponent },
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 51ba056c..b9032a0f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -31,6 +31,7 @@ import { RegisterComponent } from './accounts/register.component';
 import { SearchCiphersPipe } from './pipes/search-ciphers.pipe';
 import { StopClickDirective } from './directives/stop-click.directive';
 import { StopPropDirective } from './directives/stop-prop.directive';
+import { TwoFactorComponent } from './accounts/two-factor.component';
 import { VaultComponent } from './vault/vault.component';
 import { ViewComponent } from './vault/view.component';
 
@@ -69,6 +70,7 @@ import { ViewComponent } from './vault/view.component';
         SearchCiphersPipe,
         StopClickDirective,
         StopPropDirective,
+        TwoFactorComponent,
         VaultComponent,
         ViewComponent,
     ],