diff --git a/.gitignore b/.gitignore
index c91b435..b78b190 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,4 +34,5 @@
 .Spotlight-V100
 .Trashes
 ehthumbs.db
-Thumbs.db
\ No newline at end of file
+Thumbs.db
+node_modules/
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index a8af031..49db56e 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -163,6 +163,14 @@
         "message": "Counter Based",
         "description": "Counter Based"
     },
+    "six_digit_otp": {
+        "message": "6 Digit OTP",
+        "description": "6 Digit OTP"
+    },
+    "eight_digit_otp": {
+        "message": "8 Digit OTP",
+        "description": "8 Digit OTP"
+    },
     "resize_popup_page": {
         "message": "Resize Popup Page",
         "description": "Resize Popup Page"
diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json
index 94a2be1..981489e 100644
--- a/_locales/zh_CN/messages.json
+++ b/_locales/zh_CN/messages.json
@@ -163,6 +163,14 @@
 		"message": "基于计数器",
 		"description": "Counter Based"
 	},
+    "six_digit_otp": {
+        "message": "6 Digit OTP",
+        "description": "6 Digit OTP"
+    },
+    "eight_digit_otp": {
+        "message": "8 Digit OTP",
+        "description": "8 Digit OTP"
+    },
 	"resize_popup_page": {
 		"message": "调整弹出页面尺寸",
 		"description": "Resize Popup Page"
diff --git a/css/content.css b/css/content.css
index e5c420d..1591a61 100644
--- a/css/content.css
+++ b/css/content.css
@@ -1,25 +1,22 @@
-#__ga_grayLayout__ {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: rgba(0, 0, 0, 0.6);
-	z-index: 1000000;
-	display: none;
-	cursor: crosshair;
-}
-
-#__ga_grayLayout__ .scan {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	top: 0;
-	opacity: 0.5;
-}
-
-#__ga_captureBox__ {
-	position: absolute;
-	border: white 1px dashed;
-	display: none;
-}
\ No newline at end of file
+#__ga_grayLayout__ {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 1000000;
+  display: none;
+  cursor: crosshair; }
+
+#__ga_grayLayout__ .scan {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  opacity: 0.5; }
+
+#__ga_captureBox__ {
+  position: absolute;
+  border: white 1px dashed;
+  display: none; }
diff --git a/css/popup.css b/css/popup.css
index 440ad01..b7eec07 100644
--- a/css/popup.css
+++ b/css/popup.css
@@ -1,700 +1,973 @@
-@font-face {
-  font-family: 'Droid Sans Mono';
-  font-style: normal;
-  font-weight: 400;
-  src: url(DroidSansMono.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-
-@-webkit-keyframes twinkling{
-    0%{
-        color:#DD4B39;
-    }
-    100%{
-        color:#EEA59C;
-    }
-}
-
-@-webkit-keyframes fadeshow{
-    0%{
-        opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
-}
-
-@-webkit-keyframes fadehide{
-    0%{
-        opacity:1;
-    }
-    100%{
-        opacity:0;
-    }
-}
-
-@-webkit-keyframes fadein{
-    0%{
-        opacity:0;
-        top:110px;
-    }
-    100%{
-        opacity:1;
-        top:10px;
-    }
-}
-
-@-webkit-keyframes fadeout{
-    0%{
-        opacity:1;
-        top:10px;
-    }
-    100%{
-        opacity:0;
-        top:110px;
-    }
-}
-
-@-webkit-keyframes slidein{
-    0%{
-        opacity:0;
-        left:-55px;
-    }
-    100%{
-        opacity:1;
-        left:0;
-    }
-}
-
-@-webkit-keyframes slideout{
-    0%{
-        opacity:1;
-        left:0;
-    }
-    100%{
-        opacity:0;
-        left:-55px;
-    }
-}
-
-@-webkit-keyframes qrfadein{
-    0%{
-        opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
-}
-
-@-webkit-keyframes qrfadeout{
-    0%{
-        opacity:1;
-    }
-    100%{
-        opacity:0;
-    }
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    width: 320px;
-    height: 480px;
-    overflow: hidden;
-    font-family: arial, 'Microsoft YaHei';
-    cursor: default;
-    -webkit-user-select: none;
-    transform-origin: left top;
-}
-
-#header,
-#menuHead {
-    height: 38px;
-    line-height: 38px;
-    position: relative;
-    text-align: center;
-    font-size: 16px;
-    border-bottom: #CCC 1px solid;
-}
-
-#notification {
-    position: absolute;
-    left: 100px;
-    top: -1000px;
-    width: 120px;
-    height: 60px;
-    line-height: 60px;
-    text-align: center;
-    background: rgba(0,0,0,0.5);
-    color: #FFF;
-    font-size: 20px;
-    border-radius: 2px;
-}
-
-#notification.fadein {
-    top: 190px;
-    -webkit-animation: fadeshow 0.2s 1 ease-out;
-}
-
-#notification.fadeout {
-    top: 190px;
-    -webkit-animation: fadehide 0.2s 1 ease-in;
-}
-
-#codes {
-    height: 442px;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    background: #EEE;
-    padding-right:10px;
-}
-
-#codes:hover {
-    padding-right: 0;
-    overflow-y: scroll;
-}
-
-#codes::-webkit-scrollbar {
-    width: 10px;
-    background: #EEE;
-}
-
-#codes::-webkit-scrollbar-thumb {
-    background-color: #AAA;
-    border: 2px solid #EEE;
-    border-radius: 5px;
-}
-
-#codeClipboard {
-    position: absolute;
-    top: -1000px;
-}
-
-.codeBox {
-    margin: 10px;
-    margin-right: 0;
-    padding: 10px;
-    border: #CCC 1px solid;
-    background: white;
-    border-radius: 2px;
-    position: relative;
-}
-
-.codeBox[unencrypted="true"] .warning {
-    position: absolute;
-    height: 0;
-    line-height: 12px;
-    font-size: 12px;
-    padding: 0 10px;
-    margin: 0 4px;
-    width: 250px;
-    bottom: 4px;
-    left: 0;
-    background: #EC6959;
-    color: #FFF;
-    cursor: pointer;
-    overflow: hidden;
-    border-radius: 2px;
-    -webkit-transition: height 0.2s;
-}
-
-#codes:not(.edit) .codeBox[unencrypted="true"]:hover .warning {
-    height: 24px;
-}
-
-.codeBox[dropOver="true"] {
-    border: gray 1px dashed;
-}
-
-.issuer {
-    font-size: 12px;
-    color: black;
-    width: 80%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.code {
-    font-size: 36px;
-    color: #08C;
-    width: 80%;
-    -webkit-user-select: text;
-    font-family: 'Droid Sans Mono';
-    cursor: pointer;
-}
-
-#codes.edit .code {
-    color: #CCC!important;
-    -webkit-user-select: none;
-    cursor: default;
-}
-
-#codes.edit .account,
-#codes.edit .issuer {
-    display: none;
-}
-
-.accountEdit,
-.issuerEdit {
-    display: none;
-}
-
-.accountEdit input,
-.issuerEdit input {
-    border: none;
-    height: 14px;
-    width: 70%;
-    font-size: 12px;
-    font-family: arial, 'Microsoft YaHei';
-    outline: none;
-    background: #eee;
-}
-
-#codes.edit .accountEdit,
-#codes.edit .issuerEdit {
-    display: block;
-}
-
-#codes.timeout .code:not(.hotp) {
-    -webkit-animation: twinkling 1s infinite ease-in-out;
-}
-
-.hotp {
-    color: #555;
-    cursor: default;
-}
-
-.hotp[hasCode="true"] {
-    color: #08C;
-    cursor: pointer;
-}
-
-.movehandle {
-    height: 98px;
-    line-height: 98px;
-    right: 10px;
-    top: 0;
-    position: absolute;
-    font-size: 24px;
-    color: #CCC;
-    cursor: move;
-    display: none;
-}
-
-#codes.edit .movehandle {
-    display: block;
-}
-
-.showqr {
-    right: 10px;
-    top: 10px;
-    position: absolute;
-    font-size: 20px;
-    color: #CCC;
-    cursor: pointer;
-    opacity: 0;
-}
-
-.showqr:hover {
-    opacity: 1;
-}
-
-#codes.edit .showqr,
-.showqr.hidden {
-    display: none;
-}
-
-.account {
-    font-size: 12px;
-    color: gray;
-    width: 80%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-#add,
-#add_qr,
-#add_secret,
-#add_button,
-#security_save,
-#passphrase_ok,
-#message_close,
-#exportButton,
-#resize_save {
-    margin: 10px;
-    padding: 20px;
-    border: #CCC 1px solid;
-    background: white;
-    border-radius: 2px;
-    position: relative;
-    text-align: center;
-    font-size: 16px;
-    color: gray;
-    cursor: pointer;
-}
-
-#add {
-    margin-right: 0;
-}
-
-#message_close,
-#add_button,
-#exportButton,
-#security_save,
-#passphrase_ok,
-#resize_save {
-    font-size: 12px;
-    margin: 20px 100px;
-    padding: 10px;
-    cursor: pointer;
-}
-
-#codes #add {
-    font-size: 16px;
-    line-height: 56px;
-    display: none;
-}
-
-#codes.edit #add {
-    display: block;
-}
-
-#codes .deleteAction {
-    font-size: 20px;
-    color: #DD4B39;
-    position: absolute;
-    top: -10px;
-    left: -10px;
-    z-index: 10;
-    display: none;
-}
-
-#codes.edit .deleteAction {
-    display: block;
-    cursor: pointer;
-}
-
-#infoAction {
-    position: absolute;
-    left: 20px;
-    bottom: 0;
-    height: 38px;
-    line-height: 38px;
-    font-size: 16px;
-    color: gray;
-    cursor: pointer;
-}
-
-#infoAction.hidden {
-    display: none;
-}
-
-#editAction {
-    position: absolute;
-    right: 20px;
-    bottom: 0;
-    height: 38px;
-    line-height: 38px;
-    font-size: 16px;
-    color: gray;
-    cursor: pointer;
-}
-
-.counter {
-    color: #888;
-    font-size: 18px;
-    text-align: center;
-    cursor: pointer;
-}
-
-.counter:not([disabled="true"]):hover {
-    color: #000;
-}
-
-.counter[disabled="true"] {
-    color: #CCC;
-    cursor: default;
-}
-
-.sector,
-.counter {
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-}
-
-#codes.edit .sector,
-#codes.edit .counter {
-    display: none;
-}
-
-#menu {
-    width: 320px;
-    height: 480px;
-    position: absolute;
-    left: -1000px;
-    background: #EEE;
-    top: 0;
-}
-
-#menu.slidein {
-    left: 0;
-    -webkit-animation: slidein 0.2s 1 ease-out;
-}
-
-#menu.slideout {
-    left: -55px;
-    -webkit-animation: slideout 0.2s 1 ease-in;
-}
-
-#menuHead {
-    background: #FFF;
-}
-
-#menu .menuList {
-    margin: 10px;
-    border: #CCC 1px solid;
-    border-radius: 2px;
-    background: #FFF;
-}
-
-#menu .menuList p {
-    position: relative;
-    border-bottom: #CCC 1px solid;
-    padding: 10px;
-    font-size: 16px;
-    color: gray;
-    cursor: pointer;
-}
-
-#menu .menuList p:hover {
-    background: #F4FCFF;
-    color: black;
-}
-
-#menu .menuList p:hover:after {
-    color: black;
-}
-
-#menu .menuList p:last-child {
-    border-bottom: none;
-}
-
-#menu .menuList p a {
-    color: gray;
-    text-decoration: none;
-    display: line-block;
-}
-
-#menu .menuList p i.fa {
-    font-size: 14px;
-    display: line-block;
-    width: 30px;
-}
-
-#version {
-    text-align: center;
-    color: gray;
-    margin: 10px;
-}
-
-#info,
-#addAccount,
-#security,
-#passphrase,
-#export,
-#resize {
-    position: absolute;
-    height: 460px;
-    width: 300px;
-    padding: 10px;
-    border: gray;
-    background: white;
-    left: 10px;
-    top: -1000px;
-    box-shadow: 1px 1px 3px gray;
-    z-index: 100;
-}
-
-#info.fadein,
-#addAccount.fadein,
-#security.fadein,
-#passphrase.fadein,
-#export.fadein,
-#resize.fadein {
-    top: 10px;
-    -webkit-animation: fadein 0.2s 1 ease-out;
-}
-
-#info.fadeout,
-#addAccount.fadeout,
-#security.fadeout,
-#passphrase.fadeout,
-#export.fadeout,
-#resize.fadeout {
-    top: 110px;
-    -webkit-animation: fadeout 0.2s 1 ease-in;
-}
-
-#infoClose,
-#addAccountClose,
-#securityClose,
-#passphraseClose,
-#exportClose,
-#resizeClose {
-    height: 20px;
-    width: 20px;
-    font-size: 14px;
-    color: gray;
-    cursor: pointer;
-}
-
-#menuClose {
-    position: absolute;
-    height: 38px;
-    line-height: 38px;
-    left: 20px;
-    font-size: 16px;
-    color: gray;
-    bottom: 0;
-    cursor: pointer;
-}
-
-#menuClose:hover,
-#exportButton:hover,
-#message_close:hover,
-#add_button:hover,
-#add_secret:hover,
-#add_qr:hover,
-#editAction:hover,
-#infoAction:hover,
-#codes #add:hover,
-#infoClose:hover,
-#addAccountClose:hover,
-#securityClose:hover,
-#passphraseClose:hover,
-#security_save:hover,
-#passphrase_ok:hover,
-#export:hover,
-#resizeClose:hover,
-#resize_save:hover {
-    color: black;
-}
-
-#infoContent,
-#addAccountContent,
-#exportContent {
-    height: 420px;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-#exportData {
-    height: 330px;
-    width: 100%;
-    word-break: break-all;
-    resize: none;
-    outline: none;
-}
-
-#infoContent p {
-    font-size: 12px;
-    margin-bottom: 20px;
-}
-
-#infoContent a {
-    color: #4183c4;
-}
-
-#qr {
-    width: 100%;
-    height: 100%;
-    top: -1000px;
-    left: 0;
-    position: absolute;
-    z-index: 10;
-    background-color: rgba(0, 0, 0, 0.5);
-    background-repeat: no-repeat;
-    background-position: center;
-}
-
-#qr canvas {
-    display: none;
-}
-
-#qr.qrfadein {
-    top: 0;
-    -webkit-animation: qrfadein 0.2s 1 ease-out;
-}
-
-#qr.qrfadeout {
-    top: 0;
-    -webkit-animation: qrfadeout 0.2s 1 ease-in;
-}
-
-#secret_box {
-    display: none;
-}
-
-#secret_box input,
-#security input,
-#passphrase input {
-    display: block;
-    margin: 0 10px 10px 10px;
-    padding: 10px;
-    width: 260px;
-    border: #CCC 1px solid;
-    background: white;
-    outline: none;
-}
-
-.checkbox_group input[type="checkbox"],
-.radio_group input[type="radio"] {
-    display: inline-block !important;
-    width: auto !important;
-}
-
-.checkbox_group label,
-.radio_group label {
-    display: inline-block !important;
-    margin-left: 0 !important;
-}
-
-#secret_box label,
-#security label,
-#passphrase label,
-#security_warning,
-#passphrase_info {
-    display: block;
-    margin: 10px 0 0 10px;
-}
-
-#security_warning,
-#passphrase_info {
-    color: gray;
-}
-
-#resize_list_label,
-#resize_list {
-    margin: 20px;
-    font-size: 16px;
-}
-
-#message {
-    position: absolute;
-    width: 300px;
-    padding: 10px;
-    border: gray;
-    background: white;
-    left: 10px;
-    top: 150px;
-    box-shadow: 1px 1px 3px gray;
-    display: none;
-    z-index: 1000;
-}
\ No newline at end of file
+@-webkit-keyframes twinkling {
+  0% {
+    color: #DD4B39; }
+  100% {
+    color: #e8867a; } }
+
+@keyframes twinkling {
+  0% {
+    color: #DD4B39; }
+  100% {
+    color: #e8867a; } }
+
+@-webkit-keyframes fadeshow {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@keyframes fadeshow {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@-webkit-keyframes fadehide {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+@keyframes fadehide {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+@-webkit-keyframes fadein {
+  0% {
+    opacity: 0;
+    top: 110px; }
+  100% {
+    opacity: 1;
+    top: 10px; } }
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+    top: 110px; }
+  100% {
+    opacity: 1;
+    top: 10px; } }
+
+@-webkit-keyframes fadeout {
+  0% {
+    opacity: 1;
+    top: 10px; }
+  100% {
+    opacity: 0;
+    top: 110px; } }
+
+@keyframes fadeout {
+  0% {
+    opacity: 1;
+    top: 10px; }
+  100% {
+    opacity: 0;
+    top: 110px; } }
+
+@-webkit-keyframes slidein {
+  0% {
+    opacity: 0;
+    left: -55px; }
+  100% {
+    opacity: 1;
+    left: 0; } }
+
+@keyframes slidein {
+  0% {
+    opacity: 0;
+    left: -55px; }
+  100% {
+    opacity: 1;
+    left: 0; } }
+
+@-webkit-keyframes slideout {
+  0% {
+    opacity: 1;
+    left: 0; }
+  100% {
+    opacity: 0;
+    left: -55px; } }
+
+@keyframes slideout {
+  0% {
+    opacity: 1;
+    left: 0; }
+  100% {
+    opacity: 0;
+    left: -55px; } }
+
+@-webkit-keyframes qrfadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@keyframes qrfadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@-webkit-keyframes qrfadeout {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+@keyframes qrfadeout {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+font-face {
+  font-family: "Droid Sans Mono", arial, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  src: url(DroidSansMono.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box; }
+
+body {
+  width: 320px;
+  height: 480px;
+  overflow: hidden;
+  font-family: "Microsoft YaHei", arial, sans-serif;
+  cursor: default;
+  -webkit-user-select: none;
+  -webkit-transform-origin: left top;
+      -ms-transform-origin: left top;
+          transform-origin: left top; }
+
+#header {
+  height: 38px;
+  line-height: 38px;
+  position: relative;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: #CCC 1px solid;
+  background: #4183c4; }
+  #header div, #header span {
+    color: #FFF; }
+    #header div:hover, #header span:hover {
+      color: #CCC; }
+  #header .fa {
+    font-size: 14px; }
+
+#menuHead {
+  height: 38px;
+  line-height: 38px;
+  position: relative;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: #CCC 1px solid;
+  background: #FFF; }
+
+#notification {
+  position: absolute;
+  left: 100px;
+  top: -1000px;
+  width: 120px;
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.5);
+  color: #FFF;
+  font-size: 20px;
+  border-radius: 2px; }
+
+#notification.fadein {
+  top: 190px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadeshow 0.2s 1 ease-out;
+          animation: fadeshow 0.2s 1 ease-out; }
+
+#notification.fadeout {
+  top: 190px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadehide 0.2s 1 ease-in;
+          animation: fadehide 0.2s 1 ease-in; }
+
+#codes {
+  height: 442px;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  background: #EEE;
+  padding-right: 10px; }
+  #codes:hover {
+    padding-right: 0;
+    overflow-y: scroll; }
+  #codes::-webkit-scrollbar {
+    width: 10px;
+    background: #EEE; }
+  #codes::-webkit-scrollbar-thumb {
+    background-color: #CCC;
+    border: 2px solid #EEE;
+    border-radius: 5px; }
+  #codes:not(.edit) .codeBox[unencrypted="true"]:hover .warning {
+    height: 24px; }
+  #codes .deleteAction {
+    font-size: 20px;
+    color: #DD4B39;
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    z-index: 10;
+    display: none; }
+
+#codeClipboard {
+  position: absolute;
+  top: -1000px; }
+
+.codeBox {
+  margin: 10px;
+  margin-right: 0;
+  padding: 10px;
+  border: #CCC 1px solid;
+  background: white;
+  border-radius: 2px;
+  position: relative; }
+
+.codeBox[unencrypted="true"] .warning {
+  position: absolute;
+  height: 0;
+  line-height: 12px;
+  font-size: 12px;
+  padding: 0 10px;
+  margin: 0 4px;
+  width: 250px;
+  bottom: 4px;
+  left: 0;
+  background: #EC6959;
+  color: #FFF;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 2px;
+  -webkit-transition: height 0.2s; }
+
+.codeBox[dropOver="true"] {
+  border: gray 1px dashed; }
+
+.issuer {
+  font-size: 12px;
+  color: #000;
+  width: 80%;
+  text-overflow: ellipsis;
+  overflow: hidden; }
+
+.code {
+  font-size: 36px;
+  color: #08C;
+  width: 80%;
+  -webkit-user-select: text;
+  font-family: "Droid Sans Mono", arial, sans-serif;
+  cursor: pointer; }
+
+#codes.edit .code {
+  color: #CCC !important;
+  -webkit-user-select: none;
+  cursor: default; }
+
+#codes.edit .account {
+  display: none; }
+
+#codes.edit .issuer {
+  display: none; }
+
+#codes.edit .accountEdit {
+  display: block; }
+
+#codes.edit .issuerEdit {
+  display: block; }
+
+#codes.edit .movehandle {
+  display: block; }
+
+#codes.edit .showqr {
+  display: none; }
+
+#codes.edit .deleteAction {
+  display: block;
+  cursor: pointer; }
+
+#codes.edit .sector {
+  display: none; }
+
+#codes.edit .counter {
+  display: none; }
+
+.accountEdit {
+  display: none; }
+  .accountEdit input {
+    border: none;
+    height: 14px;
+    width: 70%;
+    font-size: 12px;
+    font-family: "Microsoft YaHei", arial, sans-serif;
+    outline: none;
+    background: #EEE; }
+
+.issuerEdit {
+  display: none; }
+  .issuerEdit input {
+    border: none;
+    height: 14px;
+    width: 70%;
+    font-size: 12px;
+    font-family: "Microsoft YaHei", arial, sans-serif;
+    outline: none;
+    background: #EEE; }
+
+#codes.timeout .code:not(.hotp) {
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: twinkling 1s infinite ease-out;
+          animation: twinkling 1s infinite ease-out;
+  /* color: $red; */ }
+
+.hotp {
+  color: #555;
+  cursor: default; }
+
+.hotp[hasCode="true"] {
+  color: #08C;
+  cursor: pointer; }
+
+.movehandle {
+  height: 98px;
+  line-height: 98px;
+  right: 10px;
+  top: 0;
+  position: absolute;
+  font-size: 24px;
+  color: #CCC;
+  cursor: move;
+  display: none; }
+
+.showqr {
+  right: 10px;
+  top: 10px;
+  position: absolute;
+  font-size: 20px;
+  color: #CCC;
+  cursor: pointer;
+  opacity: 0; }
+  .showqr:hover {
+    opacity: 1; }
+
+.showqr.hidden {
+  display: none; }
+
+.account {
+  font-size: 12px;
+  color: #888;
+  width: 80%;
+  text-overflow: ellipsis;
+  overflow: hidden; }
+
+#add_qr {
+  margin: 10px;
+  padding: 20px;
+  border: #CCC 1px solid;
+  background: white;
+  border-radius: 2px;
+  position: relative;
+  text-align: center;
+  font-size: 16px;
+  color: #888;
+  cursor: pointer; }
+  #add_qr:hover {
+    color: #000; }
+
+#add_secret {
+  margin: 10px;
+  padding: 20px;
+  border: #CCC 1px solid;
+  background: white;
+  border-radius: 2px;
+  position: relative;
+  text-align: center;
+  font-size: 16px;
+  color: #888;
+  cursor: pointer; }
+  #add_secret:hover {
+    color: #000; }
+
+#add_button {
+  margin: 10px;
+  padding: 20px;
+  border: #CCC 1px solid;
+  background: white;
+  border-radius: 2px;
+  position: relative;
+  text-align: center;
+  font-size: 16px;
+  color: #888;
+  cursor: pointer;
+  font-size: 12px;
+  margin: 20px 100px;
+  padding: 10px;
+  cursor: pointer; }
+  #add_button:hover {
+    color: #000; }
+
+#security_save {
+  margin: 10px;
+  padding: 20px;
+  border: #CCC 1px solid;
+  background: white;
+  border-radius: 2px;
+  position: relative;
+  text-align: center;
+  font-size: 16px;
+  color: #888;
+  cursor: pointer;
+  font-size: 12px;
+  margin: 20px 100px;
+  padding: 10px;
+  cursor: pointer; }
+  #security_save:hover {
+    color: #000; }
+
+#passphrase_ok {
+  margin: 10px;
+  padding: 20px;
+  border: #CCC 1px solid;
+  background: white;
+  border-radius: 2px;
+  position: relative;
+  text-align: center;
+  font-size: 16px;
+  color: #888;
+  cursor: pointer;
+  font-size: 12px;
+  margin: 20px 100px;
+  padding: 10px;
+  cursor: pointer; }
+  #passphrase_ok:hover {
+    color: #000; }
+
+#message_close {
+  margin: 10px;
+  padding: 20px;
+  border: #CCC 1px solid;
+  background: white;
+  border-radius: 2px;
+  position: relative;
+  text-align: center;
+  font-size: 16px;
+  color: #888;
+  cursor: pointer;
+  font-size: 12px;
+  margin: 20px 100px;
+  padding: 10px;
+  cursor: pointer; }
+  #message_close:hover {
+    color: #000; }
+
+#exportButton {
+  margin: 10px;
+  padding: 20px;
+  border: #CCC 1px solid;
+  background: white;
+  border-radius: 2px;
+  position: relative;
+  text-align: center;
+  font-size: 16px;
+  color: #888;
+  cursor: pointer;
+  font-size: 12px;
+  margin: 20px 100px;
+  padding: 10px;
+  cursor: pointer; }
+  #exportButton:hover {
+    color: #000; }
+
+#resize_save {
+  margin: 10px;
+  padding: 20px;
+  border: #CCC 1px solid;
+  background: white;
+  border-radius: 2px;
+  position: relative;
+  text-align: center;
+  font-size: 16px;
+  color: #888;
+  cursor: pointer;
+  font-size: 12px;
+  margin: 20px 100px;
+  padding: 10px;
+  cursor: pointer; }
+  #resize_save:hover {
+    color: #000; }
+
+#infoAction {
+  position: absolute;
+  left: 20px;
+  bottom: 0;
+  height: 38px;
+  line-height: 38px;
+  font-size: 16px;
+  color: #888;
+  cursor: pointer; }
+  #infoAction:hover {
+    color: #000; }
+
+#infoAction.hidden {
+  display: none; }
+
+#editAction {
+  position: absolute;
+  right: 20px;
+  bottom: 0;
+  height: 38px;
+  line-height: 38px;
+  font-size: 16px;
+  color: #888;
+  cursor: pointer; }
+  #editAction:hover {
+    color: #000; }
+
+#add {
+  position: absolute;
+  right: 20px;
+  bottom: 0;
+  height: 38px;
+  line-height: 38px;
+  font-size: 16px;
+  color: #888;
+  cursor: pointer;
+  right: 50px; }
+  #add:hover {
+    color: #000; }
+
+.counter {
+  color: #888;
+  font-size: 18px;
+  text-align: center;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 10px;
+  bottom: 10px; }
+  .counter:not([disabled="true"]):hover {
+    color: #000; }
+
+.counter[disabled="true"] {
+  color: #CCC;
+  cursor: default; }
+
+.sector {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 10px;
+  bottom: 10px; }
+
+#menu {
+  width: 320px;
+  height: 480px;
+  position: absolute;
+  left: -1000px;
+  background: #EEE;
+  top: 0; }
+  #menu .menuList {
+    margin: 10px;
+    border: #CCC 1px solid;
+    border-radius: 2px;
+    background: #FFF; }
+    #menu .menuList p {
+      position: relative;
+      border-bottom: #CCC 1px solid;
+      padding: 10px;
+      font-size: 16px;
+      color: #888;
+      cursor: pointer; }
+      #menu .menuList p:hover {
+        background: #F4FCFF;
+        color: #000; }
+        #menu .menuList p:hover:after {
+          color: #000; }
+      #menu .menuList p:last-child {
+        border-bottom: none; }
+      #menu .menuList p a {
+        color: #888;
+        text-decoration: none;
+        display: line-block; }
+      #menu .menuList p i.fa {
+        font-size: 14px;
+        display: line-block;
+        width: 30px; }
+
+#menu.slidein {
+  left: 0;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: slidein 0.2s 1 ease-out;
+          animation: slidein 0.2s 1 ease-out; }
+
+#menu.slideout {
+  left: -55px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: slideout 0.2s 1 ease-in;
+          animation: slideout 0.2s 1 ease-in; }
+
+#version {
+  text-align: center;
+  color: #888;
+  margin: 10px; }
+
+#info {
+  position: absolute;
+  height: 460px;
+  width: 300px;
+  padding: 10px;
+  border: gray;
+  background: white;
+  left: 10px;
+  top: -1000px;
+  box-shadow: 1px 1px 3px gray;
+  z-index: 100; }
+
+#addAccount {
+  position: absolute;
+  height: 460px;
+  width: 300px;
+  padding: 10px;
+  border: gray;
+  background: white;
+  left: 10px;
+  top: -1000px;
+  box-shadow: 1px 1px 3px gray;
+  z-index: 100; }
+
+#security {
+  position: absolute;
+  height: 460px;
+  width: 300px;
+  padding: 10px;
+  border: gray;
+  background: white;
+  left: 10px;
+  top: -1000px;
+  box-shadow: 1px 1px 3px gray;
+  z-index: 100; }
+  #security input {
+    display: block;
+    margin: 0 10px 10px 10px;
+    padding: 10px;
+    width: 260px;
+    border: #CCC 1px solid;
+    background: white;
+    outline: none; }
+  #security label {
+    display: block;
+    margin: 10px 0 0 10px; }
+
+#passphrase {
+  position: absolute;
+  height: 460px;
+  width: 300px;
+  padding: 10px;
+  border: gray;
+  background: white;
+  left: 10px;
+  top: -1000px;
+  box-shadow: 1px 1px 3px gray;
+  z-index: 100; }
+  #passphrase input {
+    display: block;
+    margin: 0 10px 10px 10px;
+    padding: 10px;
+    width: 260px;
+    border: #CCC 1px solid;
+    background: white;
+    outline: none; }
+  #passphrase label {
+    display: block;
+    margin: 10px 0 0 10px; }
+
+#export {
+  position: absolute;
+  height: 460px;
+  width: 300px;
+  padding: 10px;
+  border: gray;
+  background: white;
+  left: 10px;
+  top: -1000px;
+  box-shadow: 1px 1px 3px gray;
+  z-index: 100; }
+  #export:hover {
+    color: #000; }
+
+#resize {
+  position: absolute;
+  height: 460px;
+  width: 300px;
+  padding: 10px;
+  border: gray;
+  background: white;
+  left: 10px;
+  top: -1000px;
+  box-shadow: 1px 1px 3px gray;
+  z-index: 100; }
+
+#info.fadein {
+  top: 10px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadein 0.2s 1 ease-out;
+          animation: fadein 0.2s 1 ease-out; }
+
+#addAccount.fadein {
+  top: 10px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadein 0.2s 1 ease-out;
+          animation: fadein 0.2s 1 ease-out; }
+
+#security.fadein {
+  top: 10px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadein 0.2s 1 ease-out;
+          animation: fadein 0.2s 1 ease-out; }
+
+#passphrase.fadein {
+  top: 10px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadein 0.2s 1 ease-out;
+          animation: fadein 0.2s 1 ease-out; }
+
+#export.fadein {
+  top: 10px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadein 0.2s 1 ease-out;
+          animation: fadein 0.2s 1 ease-out; }
+
+#resize.fadein {
+  top: 10px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadein 0.2s 1 ease-out;
+          animation: fadein 0.2s 1 ease-out; }
+
+#info.fadeout {
+  top: 110px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadeout 0.2s 1 ease-in;
+          animation: fadeout 0.2s 1 ease-in; }
+
+#addAccount.fadeout {
+  top: 110px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadeout 0.2s 1 ease-in;
+          animation: fadeout 0.2s 1 ease-in; }
+
+#security.fadeout {
+  top: 110px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadeout 0.2s 1 ease-in;
+          animation: fadeout 0.2s 1 ease-in; }
+
+#passphrase.fadeout {
+  top: 110px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadeout 0.2s 1 ease-in;
+          animation: fadeout 0.2s 1 ease-in; }
+
+#export.fadeout {
+  top: 110px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadeout 0.2s 1 ease-in;
+          animation: fadeout 0.2s 1 ease-in; }
+
+#resize.fadeout {
+  top: 110px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: fadeout 0.2s 1 ease-in;
+          animation: fadeout 0.2s 1 ease-in; }
+
+#infoClose {
+  height: 20px;
+  width: 20px;
+  font-size: 14px;
+  color: #888;
+  cursor: pointer; }
+  #infoClose:hover {
+    color: #000; }
+
+#addAccountClose {
+  height: 20px;
+  width: 20px;
+  font-size: 14px;
+  color: #888;
+  cursor: pointer; }
+  #addAccountClose:hover {
+    color: #000; }
+
+#securityClose {
+  height: 20px;
+  width: 20px;
+  font-size: 14px;
+  color: #888;
+  cursor: pointer; }
+  #securityClose:hover {
+    color: #000; }
+
+#passphraseClose {
+  height: 20px;
+  width: 20px;
+  font-size: 14px;
+  color: #888;
+  cursor: pointer; }
+  #passphraseClose:hover {
+    color: #000; }
+
+#exportClose {
+  height: 20px;
+  width: 20px;
+  font-size: 14px;
+  color: #888;
+  cursor: pointer; }
+
+#resizeClose {
+  height: 20px;
+  width: 20px;
+  font-size: 14px;
+  color: #888;
+  cursor: pointer; }
+  #resizeClose:hover {
+    color: #000; }
+
+#menuClose {
+  position: absolute;
+  height: 38px;
+  line-height: 38px;
+  left: 20px;
+  font-size: 16px;
+  color: #888;
+  bottom: 0;
+  cursor: pointer; }
+  #menuClose:hover {
+    color: #000; }
+
+#infoContent {
+  height: 420px;
+  overflow-y: auto;
+  overflow-x: hidden; }
+  #infoContent p {
+    font-size: 12px;
+    margin-bottom: 20px; }
+  #infoContent a {
+    color: #4183c4; }
+
+#addAccountContent {
+  height: 420px;
+  overflow-y: auto;
+  overflow-x: hidden; }
+
+#exportContent {
+  height: 420px;
+  overflow-y: auto;
+  overflow-x: hidden; }
+
+#exportData {
+  height: 330px;
+  width: 100%;
+  word-break: break-all;
+  resize: none;
+  outline: none; }
+
+#qr {
+  width: 100%;
+  height: 100%;
+  top: -1000px;
+  left: 0;
+  position: absolute;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.5);
+  background-repeat: no-repeat;
+  background-position: center; }
+  #qr canvas {
+    display: none; }
+
+#qr.qrfadein {
+  top: 0;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: qrfadein 0.2s 1 ease-out;
+          animation: qrfadein 0.2s 1 ease-out; }
+
+#qr.qrfadeout {
+  top: 0;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-animation: qrfadeout 0.2s 1 ease-in;
+          animation: qrfadeout 0.2s 1 ease-in; }
+
+#secret_box {
+  display: none; }
+  #secret_box input {
+    display: block;
+    margin: 0 10px 10px 10px;
+    padding: 10px;
+    width: 260px;
+    border: #CCC 1px solid;
+    background: white;
+    outline: none; }
+  #secret_box label {
+    display: block;
+    margin: 10px 0 0 10px; }
+
+.checkbox_group input[type="checkbox"] {
+  display: inline-block !important;
+  width: auto !important; }
+
+.checkbox_group label {
+  display: inline-block !important;
+  margin-left: 0 !important; }
+
+.radio_group input[type="radio"] {
+  display: inline-block !important;
+  width: auto !important; }
+
+.radio_group label {
+  display: inline-block !important;
+  margin-left: 0 !important; }
+
+#security_warning {
+  display: block;
+  margin: 10px 0 0 10px;
+  color: #888; }
+
+#passphrase_info {
+  display: block;
+  margin: 10px 0 0 10px;
+  color: #888; }
+
+#resize_list_label {
+  margin: 20px;
+  font-size: 16px; }
+
+#resize_list {
+  margin: 20px;
+  font-size: 16px; }
+
+#message {
+  position: absolute;
+  width: 300px;
+  padding: 10px;
+  border: gray;
+  background: white;
+  left: 10px;
+  top: 150px;
+  box-shadow: 1px 1px 3px gray;
+  display: none;
+  z-index: 1000; }
+
+.color-gray {
+  color: #888; }
+
+.color-red {
+  color: #DD4B39; }
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..34feed1
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,35 @@
+/*=========================================
+ GULP
+ =========================================*/
+var $ = require('gulp-load-plugins')({
+    rename: {'gulp': 'g'},
+    pattern: ['gulp', 'gulp-*', 'gulp.*', '@*/gulp{-,.}*']
+});
+
+var swallowError = function (error) {
+    console.log(error.toString());
+    this.emit('end');
+};
+
+// Browsers to target when prefixing CSS.
+var BROWSERS = ['last 4 versions', 'ie >= 9', 'chrome > 20'];
+
+/*-----------------------------------------
+ STYLES
+ -----------------------------------------*/
+$.g.task('styles', function () {
+    $.g.src(['scss/*.scss','!scss/_*.scss'])
+        .pipe($.sass()).on('error', $.sass.logError)
+        .pipe($.autoprefixer({browsers: BROWSERS}))
+        .pipe($.g.dest('css/'))
+        .pipe($.notify('Styles compiled'));
+});
+
+/*-----------------------------------------
+ WATCH, DEFAULT
+ -----------------------------------------*/
+$.g.task('watch', function () {
+    $.g.watch('scss/**/*.scss', ['styles']);
+});
+
+$.g.task('default', ['styles', 'watch']);
diff --git a/javascript/background.js b/javascript/background.js
index 5a4d23c..ab00a0d 100644
--- a/javascript/background.js
+++ b/javascript/background.js
@@ -54,7 +54,7 @@ function getTotp(text) {
         if (!label || !parameters) {
             chrome.tabs.sendMessage(id, {action: 'errorqr'});
         } else {
-            var account, secret, issuer;
+            var account, secret, issuer, digits = 6;
             label = decodeURIComponent(label);
             if (label.indexOf(':') !== -1) {
                 issuer = label.split(':')[0];
@@ -67,6 +67,8 @@ function getTotp(text) {
                 var parameter = parameters[i].split('=');
                 if (parameter[0].toLowerCase() === 'secret') {
                     secret = parameter[1];
+                } else if (parameter[0].toLowerCase() === 'digits' && parseInt(parameter[1], 10) === 8) { // strict check, 6 is default, only 6 or 8 allowed
+                    digits = parameter[1];
                 } else if (parameter[0].toLowerCase() === 'issuer') {
                     issuer = parameter[1];
                 } else if (parameter[0].toLowerCase() === 'counter') {
@@ -84,6 +86,7 @@ function getTotp(text) {
                     var addSecret = {};
                     if (decodedPhrase) {
                         addSecret[CryptoJS.MD5(secret)] = {
+                            digits: digits||6,
                             account: account||'',
                             issuer: issuer||'',
                             type: type,
@@ -93,6 +96,7 @@ function getTotp(text) {
                         }
                     } else {
                         addSecret[CryptoJS.MD5(secret)] = {
+                            digits: digits||6,
                             account: account||'',
                             issuer: issuer||'',
                             type: type,
diff --git a/javascript/popup.js b/javascript/popup.js
index 0203169..d6eff97 100644
--- a/javascript/popup.js
+++ b/javascript/popup.js
@@ -10,6 +10,10 @@ var editTimeout;
 var decodedPhrase;
 var shownPassphrase = false;
 var capturing = false;
+var gray = window.getComputedStyle(document.getElementsByClassName('color-gray')[0]).color;
+var red = window.getComputedStyle(document.getElementsByClassName('color-red')[0]).color;
+document.getElementsByClassName('color-gray')[0].style.display = 'none';
+document.getElementsByClassName('color-red')[0].style.display = 'none';
 
 if (localStorage.phrase) {
     decodedPhrase = localStorage.phrase;
@@ -31,6 +35,8 @@ document.getElementById('add_qr').innerText = chrome.i18n.getMessage('add_qr');
 document.getElementById('add_secret').innerText = chrome.i18n.getMessage('add_secret');
 document.getElementById('totp_label').innerText = chrome.i18n.getMessage('based_on_time');
 document.getElementById('hotp_label').innerText = chrome.i18n.getMessage('based_on_counter');
+document.getElementById('dig6_label').innerText = chrome.i18n.getMessage('six_digit_otp');
+document.getElementById('dig8_label').innerText = chrome.i18n.getMessage('eight_digit_otp');
 document.getElementById('add_button').innerText = chrome.i18n.getMessage('ok');
 document.getElementById('message_close').innerText = chrome.i18n.getMessage('ok');
 document.getElementById('account_label').innerText = chrome.i18n.getMessage('account');
@@ -67,6 +73,8 @@ chrome.storage.sync.get(showCodes);
 
 document.getElementById('menuExImport').onclick = showExport;
 
+document.getElementById('secret_input').onkeyup = toggle6and8;
+
 document.getElementById('menuAbout').onclick = function () {
     document.getElementById('info').className = 'fadein';
     setTimeout(function () {
@@ -369,7 +377,20 @@ function checkSecret(secret, type) {
     }
 }
 
+function toggle6and8() {
+    var secret = document.getElementById('secret_input').value;
+    var battleRegEx = /^(bliz-|blz-)/gi;
+    var steamRegEx = /^stm-/gi
+    if(battleRegEx.test(secret) || steamRegEx.test(secret)) {
+        document.getElementById('dig6and8').style.display="none";
+    }
+    else {
+        document.getElementById('dig6and8').style.display="block";
+    }
+}
+
 function saveSecret() {
+    var digits = document.getElementById('dig8').checked ? 8 : 6;
     var account = document.getElementById('account_input').value;
     var secret = document.getElementById('secret_input').value;
     var type = document.getElementById('totp').checked ? 'totp' : 'hotp';
@@ -395,6 +416,7 @@ function saveSecret() {
             var addSecret = {};
             if (decodedPhrase) {
                 addSecret[CryptoJS.MD5(secret)] = {
+                    digits : digits,
                     account : account,
                     issuer : '',
                     type : type,
@@ -404,6 +426,7 @@ function saveSecret() {
                 }
             } else {
                 addSecret[CryptoJS.MD5(secret)] = {
+                    digits : digits,
                     account : account,
                     issuer : '',
                     type : type,
@@ -566,14 +589,18 @@ function updateCode() {
                 }, 200);
             }
         } else if (_secret[i].type !== 'hotp') {
-            document.getElementById('code-' + i).innerText = getCode(_secret[i].secret);
+            document.getElementById('code-' + i).innerText = formatCode(getCode(_secret[i].secret, undefined, _secret[i].digits));
             document.getElementById('showqr-' + i).className = 'showqr';
         }
     }
 }
 
+function formatCode(code) {
+    half = Math.floor(code.length/2);
+    return code.substr(0, half) + ' ' + code.substr(half);
+}
+
 function update() {
-    getSector();
     var second = new Date().getSeconds();
     if (localStorage.offset) {
         second += Number(localStorage.offset) + 30;
@@ -587,18 +614,22 @@ function update() {
     if (second < 1) {
         updateCode();
     }
+    getSector(second);
 }
 
-function getSector() {
+function getSector(second) {
+    second = second || false;
+    if (!second && second !== 0) {
     var second = new Date().getSeconds();
-    if (localStorage.offset) {
-        second += Number(localStorage.offset) + 30;
+        if (localStorage.offset) {
+            second += Number(localStorage.offset) + 30;
+        }
+        second = second % 30;
     }
-    second = second % 30;
     var canvas = document.getElementById('sector');
     var ctx = canvas.getContext('2d');
     ctx.clearRect(0, 0, 40, 40);
-    ctx.fillStyle = '#888';
+    ctx.fillStyle = second > 25 ? red : gray;
     sector(ctx, 20, 20, Math.PI / 180 * second / 30 * 360, Math.PI / 180 * (1 - second / 30) * 360, 16, 0, true);
     var url = canvas.toDataURL();
     var sectors = document.getElementsByClassName('sector');
@@ -963,7 +994,7 @@ function getNewHotpCode() {
     }
         .bind(this), 5000);
     document.getElementById('code-' + codeId).setAttribute('hasCode', 'true');
-    document.getElementById('code-' + codeId).innerText = getCode(_secret[codeId].secret, _secret[codeId].counter);
+    document.getElementById('code-' + codeId).innerText = getCode(_secret[codeId].secret, _secret[codeId].counter, _secret[codeId].digits);
     _secret[codeId].counter++;
     chrome.storage.sync.get(function (secret) {
         secret[CryptoJS.MD5(_secret[codeId].secret)].counter = _secret[codeId].counter;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..fe03591
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "authenticator",
+  "version": "",
+  "description": "Google Authenticator Chrome Extention",
+  "main": "gulpfile.js",
+  "devDependencies": {
+    "gulp": "^3.9.0",
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-concat": "~2.6.0",
+    "gulp-cssnano": "^2.1.2",
+    "gulp-load-plugins": "^1.1.0",
+    "gulp-notify": "~2.2.0",
+    "gulp-rename": "~1.2.2",
+    "gulp-sass": "^2.1.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "",
+  "homepage": ""
+}
diff --git a/popup.html b/popup.html
index 8f9506a..0020de6 100644
--- a/popup.html
+++ b/popup.html
@@ -12,10 +12,9 @@
 <link href="css/popup.css" type="text/css" rel="stylesheet" charset="utf-8" />
 </head>
 <body>
-<div id="header"><span id="extName">Google Authenticator</span><div id="infoAction"><i class="fa fa-cog"></i></div><div id="editAction" edit='false'><i class="fa fa-pencil"></i></div></div>
+<div id="header"><span id="extName">Google Authenticator</span><div id="infoAction"><i class="fa fa-bars"></i></div><div id="editAction" edit='false'><i class="fa fa-pencil"></i></div><div id="add"><i class="fa fa-plus"></i></div></div>
 <div id="codes">
 <div id="codeList"></div>
-<div id="add"><i class="fa fa-plus"></i></div>
 </div>
 <div id="notification"></div>
 <div id="menu">
@@ -51,7 +50,7 @@
 <label for="account_input" id="account_label"></label>
 <input type="text" id="account_input" />
 <label for="secret_input" id="secret_label"></label>
-<input type="text" id="secret_input" />
+<input type="text" id="secret_input"/>
 <div class="radio_group">
 <input type="radio" id="totp" name="otp_type" checked="true" />
 <label for="totp" id="totp_label"></label>
@@ -60,6 +59,16 @@
 <input type="radio" id="hotp" name="otp_type" />
 <label for="hotp" id="hotp_label"></label>
 </div>
+<div id="dig6and8">
+<div class="radio_group">
+<input type="radio" id="dig6" name="otp_len" checked="true" />
+<label for="dig6" id="dig6_label">6 digits</label>
+</div>
+<div class="radio_group">
+<input type="radio" id="dig8" name="otp_len" />
+<label for="dig8" id="dig8_label">8 digits</label>
+</div>
+</div>
 <div id="add_button"></div>
 </div>
 </div>
@@ -120,6 +129,7 @@
 </div>
 <div id="qr"></div>
 <canvas id="sector" width="40" height="40" style="display:none"></canvas>
+<span class="color-gray"></span><span class="color-red"></span>
 <input type="text" id="codeClipboard" />
 <script src="javascript/sector.js"></script>
 <script src="javascript/popup.js"></script>
diff --git a/scss/content.scss b/scss/content.scss
new file mode 100644
index 0000000..0f76845
--- /dev/null
+++ b/scss/content.scss
@@ -0,0 +1,25 @@
+#__ga_grayLayout__ {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.6);
+	z-index: 1000000;
+	display: none;
+	cursor: crosshair;
+}
+
+#__ga_grayLayout__ .scan {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	opacity: 0.5;
+}
+
+#__ga_captureBox__ {
+	position: absolute;
+	border: white 1px dashed;
+	display: none;
+}
\ No newline at end of file
diff --git a/scss/popup.scss b/scss/popup.scss
new file mode 100644
index 0000000..b979ace
--- /dev/null
+++ b/scss/popup.scss
@@ -0,0 +1,990 @@
+$white: #FFF;
+$background: #EEE;
+$teal: #08C;
+$light_gray: #CCC;
+$medium_gray: #555;
+$red: #DD4B39;
+$gray: #888;
+$dark: #000;
+$blue: #4183c4;
+$font_droid_sans: 'Droid Sans Mono', arial, sans-serif;
+$font_default_sans: 'Microsoft YaHei', arial, sans-serif;
+$semitransparent: rgba(0, 0, 0, 0.5);
+
+@keyframes twinkling {
+    0% {
+        color: $red;
+    }
+    100% {
+        color: lighten($red, 15%);
+    }
+}
+@keyframes fadeshow {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@keyframes fadehide {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+@keyframes fadein {
+    0% {
+        opacity: 0;
+        top: 110px;
+    }
+    100% {
+        opacity: 1;
+        top: 10px;
+    }
+}
+@keyframes fadeout {
+    0% {
+        opacity: 1;
+        top: 10px;
+    }
+    100% {
+        opacity: 0;
+        top: 110px;
+    }
+}
+@keyframes slidein {
+    0% {
+        opacity: 0;
+        left: -55px;
+    }
+    100% {
+        opacity: 1;
+        left: 0;
+    }
+}
+@keyframes slideout {
+    0% {
+        opacity: 1;
+        left: 0;
+    }
+    100% {
+        opacity: 0;
+        left: -55px;
+    }
+}
+@keyframes qrfadein {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@keyframes qrfadeout {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+font-face {
+    font-family: $font_droid_sans;
+    font-style: normal;
+    font-weight: 400;
+    src: url(DroidSansMono.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+@mixin hwa() {
+  -webkit-transform: translate3d(0, 0, 0);
+}
+
+body {
+    width: 320px;
+    height: 480px;
+    overflow: hidden;
+    font-family: $font_default_sans;
+    cursor: default;
+    -webkit-user-select: none;
+    transform-origin: left top;
+}
+#header {
+    height: 38px;
+    line-height: 38px;
+    position: relative;
+    text-align: center;
+    font-size: 16px;
+    border-bottom: $light_gray 1px solid;
+    background: $blue;
+    div,span {
+        color: $white;
+        &:hover {
+            color: $light_gray;
+        }
+    }
+
+    .fa {
+        font-size: 14px;
+    }
+}
+#menuHead {
+    height: 38px;
+    line-height: 38px;
+    position: relative;
+    text-align: center;
+    font-size: 16px;
+    border-bottom: $light_gray 1px solid;
+    background: #FFF;
+}
+#notification {
+    position: absolute;
+    left: 100px;
+    top: -1000px;
+    width: 120px;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    background: rgba(0,0,0,0.5);
+    color: $white;
+    font-size: 20px;
+    border-radius: 2px;
+}
+#notification.fadein {
+    top: 190px;
+    @include hwa();
+    animation: fadeshow 0.2s 1 ease-out;
+}
+#notification.fadeout {
+    top: 190px;
+    @include hwa();
+    animation: fadehide 0.2s 1 ease-in;
+}
+#codes {
+    height: 442px;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    background: $background;
+    padding-right: 10px;
+    &:hover {
+        padding-right: 0;
+        overflow-y: scroll;
+    }
+    &::-webkit-scrollbar {
+        width: 10px;
+        background: $background;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: $light_gray;
+        border: 2px solid $background;
+        border-radius: 5px;
+    }
+    &:not(.edit) {
+        .codeBox[unencrypted="true"] {
+            &:hover {
+                .warning {
+                    height: 24px;
+                }
+            }
+        }
+    }
+    .deleteAction {
+        font-size: 20px;
+        color: $red;
+        position: absolute;
+        top: -10px;
+        left: -10px;
+        z-index: 10;
+        display: none;
+    }
+}
+#codeClipboard {
+    position: absolute;
+    top: -1000px;
+}
+.codeBox {
+    margin: 10px;
+    margin-right: 0;
+    padding: 10px;
+    border: $light_gray 1px solid;
+    background: white;
+    border-radius: 2px;
+    position: relative;
+}
+.codeBox[unencrypted="true"] {
+    .warning {
+        position: absolute;
+        height: 0;
+        line-height: 12px;
+        font-size: 12px;
+        padding: 0 10px;
+        margin: 0 4px;
+        width: 250px;
+        bottom: 4px;
+        left: 0;
+        background: #EC6959;
+        color: $white;
+        cursor: pointer;
+        overflow: hidden;
+        border-radius: 2px;
+        -webkit-transition: height 0.2s;
+    }
+}
+.codeBox[dropOver="true"] {
+    border: gray 1px dashed;
+}
+.issuer {
+    font-size: 12px;
+    color: $dark;
+    width: 80%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.code {
+    font-size: 36px;
+    color: $teal;
+    width: 80%;
+    -webkit-user-select: text;
+    font-family: $font_droid_sans;
+    cursor: pointer;
+}
+#codes.edit {
+    .code {
+        color: $light_gray !important;
+        -webkit-user-select: none;
+        cursor: default;
+    }
+    .account {
+        display: none;
+    }
+    .issuer {
+        display: none;
+    }
+    .accountEdit {
+        display: block;
+    }
+    .issuerEdit {
+        display: block;
+    }
+    .movehandle {
+        display: block;
+    }
+    .showqr {
+        display: none;
+    }
+    .deleteAction {
+        display: block;
+        cursor: pointer;
+    }
+    .sector {
+        display: none;
+    }
+    .counter {
+        display: none;
+    }
+}
+.accountEdit {
+    display: none;
+    input {
+        border: none;
+        height: 14px;
+        width: 70%;
+        font-size: 12px;
+        font-family: $font_default_sans;
+        outline: none;
+        background: $background;
+    }
+}
+.issuerEdit {
+    display: none;
+    input {
+        border: none;
+        height: 14px;
+        width: 70%;
+        font-size: 12px;
+        font-family: $font_default_sans;
+        outline: none;
+        background: $background;
+    }
+}
+#codes.timeout {
+    .code {
+        &:not(.hotp) {
+            @include hwa();
+            animation: twinkling 1s infinite ease-out;
+            /* color: $red; */
+        }
+    }
+}
+.hotp {
+    color: $medium_gray;
+    cursor: default;
+}
+.hotp[hasCode="true"] {
+    color: $teal;
+    cursor: pointer;
+}
+.movehandle {
+    height: 98px;
+    line-height: 98px;
+    right: 10px;
+    top: 0;
+    position: absolute;
+    font-size: 24px;
+    color: $light_gray;
+    cursor: move;
+    display: none;
+}
+.showqr {
+    right: 10px;
+    top: 10px;
+    position: absolute;
+    font-size: 20px;
+    color: $light_gray;
+    cursor: pointer;
+    opacity: 0;
+    &:hover {
+        opacity: 1;
+    }
+}
+.showqr.hidden {
+    display: none;
+}
+.account {
+    font-size: 12px;
+    color: $gray;
+    width: 80%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+#add_qr {
+    margin: 10px;
+    padding: 20px;
+    border: $light_gray 1px solid;
+    background: white;
+    border-radius: 2px;
+    position: relative;
+    text-align: center;
+    font-size: 16px;
+    color: $gray;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#add_secret {
+    margin: 10px;
+    padding: 20px;
+    border: $light_gray 1px solid;
+    background: white;
+    border-radius: 2px;
+    position: relative;
+    text-align: center;
+    font-size: 16px;
+    color: $gray;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#add_button {
+    margin: 10px;
+    padding: 20px;
+    border: $light_gray 1px solid;
+    background: white;
+    border-radius: 2px;
+    position: relative;
+    text-align: center;
+    font-size: 16px;
+    color: $gray;
+    cursor: pointer;
+    font-size: 12px;
+    margin: 20px 100px;
+    padding: 10px;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#security_save {
+    margin: 10px;
+    padding: 20px;
+    border: $light_gray 1px solid;
+    background: white;
+    border-radius: 2px;
+    position: relative;
+    text-align: center;
+    font-size: 16px;
+    color: $gray;
+    cursor: pointer;
+    font-size: 12px;
+    margin: 20px 100px;
+    padding: 10px;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#passphrase_ok {
+    margin: 10px;
+    padding: 20px;
+    border: $light_gray 1px solid;
+    background: white;
+    border-radius: 2px;
+    position: relative;
+    text-align: center;
+    font-size: 16px;
+    color: $gray;
+    cursor: pointer;
+    font-size: 12px;
+    margin: 20px 100px;
+    padding: 10px;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#message_close {
+    margin: 10px;
+    padding: 20px;
+    border: $light_gray 1px solid;
+    background: white;
+    border-radius: 2px;
+    position: relative;
+    text-align: center;
+    font-size: 16px;
+    color: $gray;
+    cursor: pointer;
+    font-size: 12px;
+    margin: 20px 100px;
+    padding: 10px;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#exportButton {
+    margin: 10px;
+    padding: 20px;
+    border: $light_gray 1px solid;
+    background: white;
+    border-radius: 2px;
+    position: relative;
+    text-align: center;
+    font-size: 16px;
+    color: $gray;
+    cursor: pointer;
+    font-size: 12px;
+    margin: 20px 100px;
+    padding: 10px;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#resize_save {
+    margin: 10px;
+    padding: 20px;
+    border: $light_gray 1px solid;
+    background: white;
+    border-radius: 2px;
+    position: relative;
+    text-align: center;
+    font-size: 16px;
+    color: $gray;
+    cursor: pointer;
+    font-size: 12px;
+    margin: 20px 100px;
+    padding: 10px;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#infoAction {
+    position: absolute;
+    left: 20px;
+    bottom: 0;
+    height: 38px;
+    line-height: 38px;
+    font-size: 16px;
+    color: $gray;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#infoAction.hidden {
+    display: none;
+}
+#editAction {
+    position: absolute;
+    right: 20px;
+    bottom: 0;
+    height: 38px;
+    line-height: 38px;
+    font-size: 16px;
+    color: $gray;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#add {
+    position: absolute;
+    right: 20px;
+    bottom: 0;
+    height: 38px;
+    line-height: 38px;
+    font-size: 16px;
+    color: $gray;
+    cursor: pointer;
+    right: 50px;
+    &:hover {
+        color: $dark;
+    }
+}
+.counter {
+    color: $gray;
+    font-size: 18px;
+    text-align: center;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    &:not([disabled="true"]) {
+        &:hover {
+            color: $dark;
+        }
+    }
+}
+.counter[disabled="true"] {
+    color: $light_gray;
+    cursor: default;
+}
+.sector {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+}
+#menu {
+    width: 320px;
+    height: 480px;
+    position: absolute;
+    left: -1000px;
+    background: $background;
+    top: 0;
+    .menuList {
+        margin: 10px;
+        border: $light_gray 1px solid;
+        border-radius: 2px;
+        background: #FFF;
+        p {
+            position: relative;
+            border-bottom: $light_gray 1px solid;
+            padding: 10px;
+            font-size: 16px;
+            color: $gray;
+            cursor: pointer;
+            &:hover {
+                background: #F4FCFF;
+                color: $dark;
+                &:after {
+                    color: $dark;
+                }
+            }
+            &:last-child {
+                border-bottom: none;
+            }
+            a {
+                color: $gray;
+                text-decoration: none;
+                display: line-block;
+            }
+            i.fa {
+                font-size: 14px;
+                display: line-block;
+                width: 30px;
+            }
+        }
+    }
+}
+#menu.slidein {
+    left: 0;
+    @include hwa();
+    animation: slidein 0.2s 1 ease-out;
+}
+#menu.slideout {
+    left: -55px;
+    @include hwa();
+    animation: slideout 0.2s 1 ease-in;
+}
+#version {
+    text-align: center;
+    color: $gray;
+    margin: 10px;
+}
+#info {
+    position: absolute;
+    height: 460px;
+    width: 300px;
+    padding: 10px;
+    border: gray;
+    background: white;
+    left: 10px;
+    top: -1000px;
+    box-shadow: 1px 1px 3px gray;
+    z-index: 100;
+}
+#addAccount {
+    position: absolute;
+    height: 460px;
+    width: 300px;
+    padding: 10px;
+    border: gray;
+    background: white;
+    left: 10px;
+    top: -1000px;
+    box-shadow: 1px 1px 3px gray;
+    z-index: 100;
+}
+#security {
+    position: absolute;
+    height: 460px;
+    width: 300px;
+    padding: 10px;
+    border: gray;
+    background: white;
+    left: 10px;
+    top: -1000px;
+    box-shadow: 1px 1px 3px gray;
+    z-index: 100;
+    input {
+        display: block;
+        margin: 0 10px 10px 10px;
+        padding: 10px;
+        width: 260px;
+        border: $light_gray 1px solid;
+        background: white;
+        outline: none;
+    }
+    label {
+        display: block;
+        margin: 10px 0 0 10px;
+    }
+}
+#passphrase {
+    position: absolute;
+    height: 460px;
+    width: 300px;
+    padding: 10px;
+    border: gray;
+    background: white;
+    left: 10px;
+    top: -1000px;
+    box-shadow: 1px 1px 3px gray;
+    z-index: 100;
+    input {
+        display: block;
+        margin: 0 10px 10px 10px;
+        padding: 10px;
+        width: 260px;
+        border: $light_gray 1px solid;
+        background: white;
+        outline: none;
+    }
+    label {
+        display: block;
+        margin: 10px 0 0 10px;
+    }
+}
+#export {
+    position: absolute;
+    height: 460px;
+    width: 300px;
+    padding: 10px;
+    border: gray;
+    background: white;
+    left: 10px;
+    top: -1000px;
+    box-shadow: 1px 1px 3px gray;
+    z-index: 100;
+    &:hover {
+        color: $dark;
+    }
+}
+#resize {
+    position: absolute;
+    height: 460px;
+    width: 300px;
+    padding: 10px;
+    border: gray;
+    background: white;
+    left: 10px;
+    top: -1000px;
+    box-shadow: 1px 1px 3px gray;
+    z-index: 100;
+}
+#info.fadein {
+    top: 10px;
+    @include hwa();
+    animation: fadein 0.2s 1 ease-out;
+}
+#addAccount.fadein {
+    top: 10px;
+    @include hwa();
+    animation: fadein 0.2s 1 ease-out;
+}
+#security.fadein {
+    top: 10px;
+    @include hwa();
+    animation: fadein 0.2s 1 ease-out;
+}
+#passphrase.fadein {
+    top: 10px;
+    @include hwa();
+    animation: fadein 0.2s 1 ease-out;
+}
+#export.fadein {
+    top: 10px;
+    @include hwa();
+    animation: fadein 0.2s 1 ease-out;
+}
+#resize.fadein {
+    top: 10px;
+    @include hwa();
+    animation: fadein 0.2s 1 ease-out;
+}
+#info.fadeout {
+    top: 110px;
+    @include hwa();
+    animation: fadeout 0.2s 1 ease-in;
+}
+#addAccount.fadeout {
+    top: 110px;
+    @include hwa();
+    animation: fadeout 0.2s 1 ease-in;
+}
+#security.fadeout {
+    top: 110px;
+    @include hwa();
+    animation: fadeout 0.2s 1 ease-in;
+}
+#passphrase.fadeout {
+    top: 110px;
+    @include hwa();
+    animation: fadeout 0.2s 1 ease-in;
+}
+#export.fadeout {
+    top: 110px;
+    @include hwa();
+    animation: fadeout 0.2s 1 ease-in;
+}
+#resize.fadeout {
+    top: 110px;
+    @include hwa();
+    animation: fadeout 0.2s 1 ease-in;
+}
+#infoClose {
+    height: 20px;
+    width: 20px;
+    font-size: 14px;
+    color: $gray;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#addAccountClose {
+    height: 20px;
+    width: 20px;
+    font-size: 14px;
+    color: $gray;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#securityClose {
+    height: 20px;
+    width: 20px;
+    font-size: 14px;
+    color: $gray;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#passphraseClose {
+    height: 20px;
+    width: 20px;
+    font-size: 14px;
+    color: $gray;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#exportClose {
+    height: 20px;
+    width: 20px;
+    font-size: 14px;
+    color: $gray;
+    cursor: pointer;
+}
+#resizeClose {
+    height: 20px;
+    width: 20px;
+    font-size: 14px;
+    color: $gray;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#menuClose {
+    position: absolute;
+    height: 38px;
+    line-height: 38px;
+    left: 20px;
+    font-size: 16px;
+    color: $gray;
+    bottom: 0;
+    cursor: pointer;
+    &:hover {
+        color: $dark;
+    }
+}
+#infoContent {
+    height: 420px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    p {
+        font-size: 12px;
+        margin-bottom: 20px;
+    }
+    a {
+        color: $blue;
+    }
+}
+#addAccountContent {
+    height: 420px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+#exportContent {
+    height: 420px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+#exportData {
+    height: 330px;
+    width: 100%;
+    word-break: break-all;
+    resize: none;
+    outline: none;
+}
+#qr {
+    width: 100%;
+    height: 100%;
+    top: -1000px;
+    left: 0;
+    position: absolute;
+    z-index: 10;
+    background-color: $semitransparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    canvas {
+        display: none;
+    }
+}
+#qr.qrfadein {
+    top: 0;
+    @include hwa();
+    animation: qrfadein 0.2s 1 ease-out;
+}
+#qr.qrfadeout {
+    top: 0;
+    @include hwa();
+    animation: qrfadeout 0.2s 1 ease-in;
+}
+#secret_box {
+    display: none;
+    input {
+        display: block;
+        margin: 0 10px 10px 10px;
+        padding: 10px;
+        width: 260px;
+        border: $light_gray 1px solid;
+        background: white;
+        outline: none;
+    }
+    label {
+        display: block;
+        margin: 10px 0 0 10px;
+    }
+}
+.checkbox_group {
+    input[type="checkbox"] {
+        display: inline-block !important;
+        width: auto !important;
+    }
+    label {
+        display: inline-block !important;
+        margin-left: 0 !important;
+    }
+}
+.radio_group {
+    input[type="radio"] {
+        display: inline-block !important;
+        width: auto !important;
+    }
+    label {
+        display: inline-block !important;
+        margin-left: 0 !important;
+    }
+}
+#security_warning {
+    display: block;
+    margin: 10px 0 0 10px;
+    color: $gray;
+}
+#passphrase_info {
+    display: block;
+    margin: 10px 0 0 10px;
+    color: $gray;
+}
+#resize_list_label {
+    margin: 20px;
+    font-size: 16px;
+}
+#resize_list {
+    margin: 20px;
+    font-size: 16px;
+}
+#message {
+    position: absolute;
+    width: 300px;
+    padding: 10px;
+    border: gray;
+    background: white;
+    left: 10px;
+    top: 150px;
+    box-shadow: 1px 1px 3px gray;
+    display: none;
+    z-index: 1000;
+}
+.color-gray { color: $gray; }
+.color-red { color: $red; }
\ No newline at end of file
diff --git a/totp/totp.js b/totp/totp.js
index ff5853d..6d9b92d 100644
--- a/totp/totp.js
+++ b/totp/totp.js
@@ -55,9 +55,9 @@ var KeyUtilities = function() {
 		return output;
 	};
 	
-	var generate = function(secret, counter) {
+	var generate = function(secret, counter, len) {
 		secret = secret.replace(/\s/g, '');
-		var len = 6;
+		len = parseInt(len, 10) === 8 ? 8 : 6;
 		var b26 = false;
 		if(/^[a-z2-7]+=*$/.test(secret.toLowerCase())) {
 			var key = base32tohex(secret);