diff --git a/src/packages/member/component/settings/totp/config/config-setting.component.html b/src/packages/member/component/settings/totp/config/config-setting.component.html
index ad21388..dc24856 100644
--- a/src/packages/member/component/settings/totp/config/config-setting.component.html
+++ b/src/packages/member/component/settings/totp/config/config-setting.component.html
@@ -16,7 +16,10 @@
 </div>
 <div>
   <p>Key & Backup Code</p>
-  <div>{{totpMap.key}}</div>
+  <div *ngIf="totp">{{totp.key}}, {{totp.uri}}</div>
+  <div *ngIf="totp">
+    <qrcode [qrdata]="totp.uri" [size]="128" [level]="'M'"></qrcode>
+  </div>
   <form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="totpForm" (ngSubmit)="totpRegistClick()">
     <input type="text"
            id="code" class="input"
diff --git a/src/packages/member/component/settings/totp/config/config-setting.component.ts b/src/packages/member/component/settings/totp/config/config-setting.component.ts
index 06e5d10..659f084 100644
--- a/src/packages/member/component/settings/totp/config/config-setting.component.ts
+++ b/src/packages/member/component/settings/totp/config/config-setting.component.ts
@@ -25,8 +25,9 @@ import {RPCClientError} from '../../../../../../@loafer/ng-rpc/protocol';
 export class ConfigSettingComponent implements OnInit, AfterContentInit {
   member: Member;
   totpState$ = this.store.pipe(select(TotpSelector.select('totp')));
-  totpMap: any;
+  totp: any;
   totpForm: FormGroup;
+  qrData:string;
 
   @Input()  selectedItem: any;
   @Output() close = new EventEmitter();
@@ -39,11 +40,16 @@ export class ConfigSettingComponent implements OnInit, AfterContentInit {
               ) { }
 
   ngOnInit() {
+    this.totpForm = this.formBuilder.group({
+      'code': [
+        [
+        ]
+      ]
+    });
     this.totpState$.subscribe(
-      (m: any) => {
-        if (m != null) {
-          this.totpMap = m;
-        }
+      (obj: any) => {
+        console.log(obj);
+        this.totp = obj;
       },
       (error: RPCClientError) => {
         console.log(error.response.message);
diff --git a/src/packages/member/service/member-totp.service.ts b/src/packages/member/service/member-totp.service.ts
index 7d444df..28148df 100644
--- a/src/packages/member/service/member-totp.service.ts
+++ b/src/packages/member/service/member-totp.service.ts
@@ -14,8 +14,6 @@ export class MemberTotpService {
   }
 
   public createTotp(member: Member): Observable<MemberTotp[]> {
-    // Todo Store get member object
-
     return this.rpcService.call<MemberTotp[]>('MemberTotpService.createTotp', member);
   }
 
diff --git a/src/packages/member/store/totp/totp.reducer.ts b/src/packages/member/store/totp/totp.reducer.ts
index 9df9ace..612e05b 100644
--- a/src/packages/member/store/totp/totp.reducer.ts
+++ b/src/packages/member/store/totp/totp.reducer.ts
@@ -23,6 +23,7 @@ export function reducer(state = initialState, action: Actions): State {
       const keyURI = action.payload.uri;
       return {
         ...state,
+        totp: {key: secretKey, uri: keyURI},
         error: null,
         pending: false,
         secretKey: secretKey,
diff --git a/src/packages/member/store/totp/totp.state.ts b/src/packages/member/store/totp/totp.state.ts
index 86d95ec..32a2f86 100644
--- a/src/packages/member/store/totp/totp.state.ts
+++ b/src/packages/member/store/totp/totp.state.ts
@@ -1,6 +1,7 @@
 import { RESTClientError } from '@loafer/ng-rest/protocol';
 
 export interface State {
+  totp: any;
   secretKey: string;
   keyURI: string;
   error: RESTClientError | null;
@@ -8,6 +9,7 @@ export interface State {
 }
 
 export const initialState: State = {
+  totp: null,
   secretKey: null,
   keyURI: null,
   error: null,