diff --git a/maxkey-web-frontend/maxkey-web-app/src/app/routes/config/timebased/timebased.component.ts b/maxkey-web-frontend/maxkey-web-app/src/app/routes/config/timebased/timebased.component.ts
index ae64f9d8a..35f22df55 100644
--- a/maxkey-web-frontend/maxkey-web-app/src/app/routes/config/timebased/timebased.component.ts
+++ b/maxkey-web-frontend/maxkey-web-app/src/app/routes/config/timebased/timebased.component.ts
@@ -1,19 +1,18 @@
 /*
  * Copyright [2022] [MaxKey of copyright http://www.maxkey.top]
- * 
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *     http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
 
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -22,6 +21,9 @@ import { NzMessageService } from 'ng-zorro-antd/message';
 
 import { TimeBased } from '../../../entity/TimeBased';
 import { TimeBasedService } from '../../../service/time-based.service';
+import { splitString, concatArrayString } from '../../../shared/utils/set2stringstil';
+
+import { Console } from 'console';
 
 @Component({
   selector: 'app-timebased',
@@ -60,16 +62,23 @@ export class TimebasedComponent implements OnInit {
 });*/
     this.timeBasedService.get('').subscribe(res => {
       this.form.model.init(res.data);
+      this.formatSecret();
       this.cdr.detectChanges();
     });
   }
 
+  formatSecret(): void {
+    this.form.model.sharedSecret = concatArrayString(splitString(this.form.model.sharedSecret, 4), ' ');
+    this.form.model.hexSharedSecret = concatArrayString(splitString(this.form.model.hexSharedSecret, 4), ' ');
+  }
+
   onSubmit(): void {
     this.form.submitting = true;
     this.form.model.trans();
     this.timeBasedService.update(this.form.model).subscribe(res => {
       if (res.code == 0) {
         this.form.model.init(res.data);
+        this.formatSecret();
         this.msg.success(`提交成功`);
       } else {
         this.msg.success(`提交失败`);
diff --git a/maxkey-web-frontend/maxkey-web-app/src/app/shared/utils/set2stringstil.ts b/maxkey-web-frontend/maxkey-web-app/src/app/shared/utils/set2stringstil.ts
index f779b3fcd..cae0368e4 100644
--- a/maxkey-web-frontend/maxkey-web-app/src/app/shared/utils/set2stringstil.ts
+++ b/maxkey-web-frontend/maxkey-web-app/src/app/shared/utils/set2stringstil.ts
@@ -21,3 +21,26 @@ export function set2String(set: Set<String>): string {
     });
     return setValues;
 }
+
+export function splitString(str: String, length: number): string[] {
+    let arrayValues: string[] = [];
+    let tempStr = str;
+    let index = 0;
+    while (tempStr != '') {
+        arrayValues[index] = tempStr.substring(0, length);
+        tempStr = tempStr.substring(length, tempStr.length);
+        index++;
+    }
+    return arrayValues;
+}
+
+export function concatArrayString(arrayValues: String[], split: String): string {
+    let tempStr = '';
+    for (let index in arrayValues) {
+        if (tempStr !== '') {
+            tempStr = tempStr + split;
+        }
+        tempStr = tempStr + arrayValues[index];
+    }
+    return tempStr;
+}