diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index bb9353304..f4477898d 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -52,7 +52,7 @@
         "description": "Account."
     },
     "accountName": {
-        "message": "Account Name",
+        "message": "Username",
         "description": "Account Name."
     },
     "issuer": {
@@ -303,5 +303,14 @@
     },
     "loading": {
         "message": "Loading..."
+    },
+    "advanced": {
+        "message": "Advanced"
+    },
+    "period": {
+        "message": "Period"
+    },
+    "type": {
+        "message": "Type"
     }
 }
diff --git a/src/components/Popup/AddAccountPage.vue b/src/components/Popup/AddAccountPage.vue
index 49f0b47d8..2f56c0c83 100644
--- a/src/components/Popup/AddAccountPage.vue
+++ b/src/components/Popup/AddAccountPage.vue
@@ -1,15 +1,29 @@
 <template>
   <div>
-    <label>{{ i18n.accountName }}</label>
-    <input type="text" class="input" v-model="newAccount.account" />
+    <label>{{ i18n.issuer }}</label>
+    <input type="text" class="input" v-model="newAccount.issuer" />
     <label>{{ i18n.secret }}</label>
     <input type="text" class="input" v-model="newAccount.secret" />
-    <select v-model="newAccount.type">
-      <option v-bind:value="OTPType.totp">{{ i18n.based_on_time }}</option>
-      <option v-bind:value="OTPType.hotp">{{ i18n.based_on_counter }}</option>
-      <option v-bind:value="OTPType.battle">Battle.net</option>
-      <option v-bind:value="OTPType.steam">Steam</option>
-    </select>
+    <details>
+      <summary>{{ i18n.advanced }}</summary>
+      <label>{{ i18n.accountName }}</label>
+      <input type="text" class="input" v-model="newAccount.account" />
+      <label>{{ i18n.period }}</label>
+      <input
+        type="number"
+        min="1"
+        class="input"
+        v-model.number="newAccount.period"
+        v-bind:disabled="newAccount.type === OTPType.hotp"
+      />
+      <label class="combo-label">{{ i18n.type }}</label>
+      <select v-model="newAccount.type">
+        <option v-bind:value="OTPType.totp">{{ i18n.based_on_time }}</option>
+        <option v-bind:value="OTPType.hotp">{{ i18n.based_on_counter }}</option>
+        <option v-bind:value="OTPType.battle">Battle.net</option>
+        <option v-bind:value="OTPType.steam">Steam</option>
+      </select>
+    </details>
     <div class="button-small" v-on:click="addNewAccount()">{{ i18n.ok }}</div>
   </div>
 </template>
@@ -20,12 +34,22 @@ import { OTPType, OTPEntry } from "../../models/otp";
 import * as CryptoJS from "crypto-js";
 
 export default Vue.extend({
-  data: function() {
+  data: function(): {
+    newAccount: {
+      issuer: string;
+      account: string;
+      secret: string;
+      type: OTPType;
+      period: number | undefined;
+    };
+  } {
     return {
       newAccount: {
+        issuer: "",
         account: "",
         secret: "",
-        type: OTPType.totp
+        type: OTPType.totp,
+        period: undefined
       }
     };
   },
@@ -33,6 +57,7 @@ export default Vue.extend({
   methods: {
     async addNewAccount() {
       this.newAccount.secret = this.newAccount.secret.replace(/ /g, "");
+
       if (
         !/^[a-z2-7]+=*$/i.test(this.newAccount.secret) &&
         !/^[0-9a-f]+$/i.test(this.newAccount.secret)
@@ -56,20 +81,33 @@ export default Vue.extend({
       } else {
         type = this.newAccount.type;
       }
+
+      if (type === OTPType.hhex || type === OTPType.hotp) {
+        this.newAccount.period = undefined;
+      } else if (
+        typeof this.newAccount.period !== "number" ||
+        this.newAccount.period < 1
+      ) {
+        this.newAccount.period = undefined;
+      }
+
       const entry = new OTPEntry({
         type,
         index: 0,
-        issuer: "",
+        issuer: this.newAccount.issuer,
         account: this.newAccount.account,
         encrypted: false,
         hash: CryptoJS.MD5(this.newAccount.secret).toString(),
         secret: this.newAccount.secret,
-        counter: 0
+        counter: 0,
+        period: this.newAccount.period
       });
+
       await entry.create(this.$store.state.accounts.encryption);
       await this.$store.dispatch("accounts/updateEntries");
       this.$store.commit("style/hideInfo");
       this.$store.commit("style/toggleEdit");
+
       const codes = document.getElementById("codes");
       if (codes) {
         // wait vue apply changes to dom