diff --git a/app.js b/app.js
index 01485c6..9c7c78f 100644
--- a/app.js
+++ b/app.js
@@ -8,7 +8,7 @@ App({
   },
   onCreate(options) {
     //  localStorage.setItem('TOTPs', [
-    //   new TOTP('JBSWY3DPEHPK3PXP', 'totp.danhersam.com', 'I1', 6, 30, 0, 'SHA-1'),
+    //   new TOTP('JBSWY3DPEHPK3PXP', 'totp.danhersam.com', 'I1122222222', 6, 30, 0, 'SHA-1'),
     //   new TOTP('JBSWY3DPEHPK3PXP', 'totp.danhersam.com', 'I2', 6, 30, 5, 'SHA-1'),
     //   new TOTP('JBSWY3DPEHPK3PXP', 'totp.danhersam.com', 'I3', 6, 30, -5, 'SHA-1'),
     //   new TOTP('JBSWY3DPEHPK3PXP', 'totp.danhersam.com', 'I4', 6, 30, 0, 'SHA-1'),
diff --git a/page/render/index/renderer.js b/page/render/index/renderer.js
index 61f3d5f..89abcf8 100644
--- a/page/render/index/renderer.js
+++ b/page/render/index/renderer.js
@@ -1,4 +1,4 @@
-import { deleteWidget } from "@zos/ui";
+import { deleteWidget, prop } from "@zos/ui";
 import { TOTP } from "../../../lib/totp-quickjs";
 import { RenderAddButton, RenderExpireBar, RenderOTPValue, RenderTOTPContainer } from '../totpRenderer'
 
@@ -20,19 +20,27 @@ const renderData = []
 
 function renderTOTPs(buffer) {
     for (let i = 0; i < buffer.length; i++) {
-        let otpData = TOTP.copy(buffer[i]).getOTP(Date.now())
+        let otpData = TOTP.copy(buffer[i]).getOTP()
         console.log(otpData.otp)
-        renderData[i] = {}
-        renderData[i].OTP = RenderOTPValue(i, otpData.otp),
-        renderData[i].expireBar = RenderExpireBar(i, otpData.createdTime, buffer[i].fetchTime)
+        renderData[i] = {
+            OTP: RenderOTPValue(i, otpData.otp),
+            expireBar: RenderExpireBar(i, otpData.createdTime, buffer[i].fetchTime)
+        }
         setInterval(() => {
-            deleteWidget(renderData[i].expireBar)
-            renderData[i].expireBar = RenderExpireBar(i, otpData.createdTime, buffer[i].fetchTime)
-            if(otpData.expireTime < Date.now()){
-                otpData = TOTP.copy(buffer[i]).getOTP(Date.now())
-                deleteWidget(renderData[i].OTP)
-                renderData[i].OTP = RenderOTPValue(i, otpData.otp)
+            const expireDif = Math.abs((((Date.now() - otpData.createdTime) / 1000)
+                / buffer[i].fetchTime) - 1)
+
+            renderData[i].expireBar.setProperty(prop.MORE, {
+                end_angle: (expireDif * 360) - 90,
+                color: expireDif > 0.25 ? 0x1ca9c9 : 0xfa0404,
+            })
+            
+            if (otpData.expireTime < Date.now()) {
+                otpData = TOTP.copy(buffer[i]).getOTP()
+                renderData[i].OTP.setProperty(prop.MORE, {
+                    text: otpData.otp
+                })
             }
-        }, 500)
+        }, 50)
     }
 }
\ No newline at end of file
diff --git a/page/render/totpRenderer.js b/page/render/totpRenderer.js
index c277e66..6a1e460 100644
--- a/page/render/totpRenderer.js
+++ b/page/render/totpRenderer.js
@@ -76,14 +76,13 @@ export function RenderExpireBar(position, createdTime, fetchTime) {
     const yPos = getYPos(position)
     const expireDif = Math.abs((((Date.now() - createdTime) / 1000)
         / fetchTime) - 1)
-
     return createWidget(widget.ARC, {
         x: buttonWidth - 50,
         y: yPos + 52,
         w: 40,
         h: 40,
         line_width: 5,
-        color: 0x1ca9c9,
+        color: expireDif > 0.25 ? 0x1ca9c9 : 0xfa0404,
         start_angle: -90,
         end_angle: (expireDif * 360) - 90,
         text: expireDif