diff --git a/server.js b/server.js
index f36191e..e3758e2 100644
--- a/server.js
+++ b/server.js
@@ -192,12 +192,15 @@ app.get("/", async (req, res) => {
     res.write("retry: 1000\n\n");
     while (true) {
       res.write(
-        `data: ${JSON.stringify(
-          JSON.parse(fs.readFileSync("data/latest.json")).map(({ name, otp }) => ({
+        `data: ${JSON.stringify({
+          nextUpdate:
+            (Math.floor(Math.round(new Date().getTime() / 1000.0) / 30) + 1) * 30 * 1000 -
+            new Date().getTime(),
+          list: JSON.parse(fs.readFileSync("data/latest.json")).map(({ name, otp }) => ({
             name,
             otp: getOtp(otp),
-          }))
-        )}\n\n`
+          })),
+        })}\n\n`
       );
 
       await new Promise((resolve) =>
diff --git a/static/index.js b/static/index.js
index aff43c1..e68ce2e 100644
--- a/static/index.js
+++ b/static/index.js
@@ -10,12 +10,12 @@ events.onmessage = async (event) => {
       { transform: `scaleX(0)`, transformOrigin: "left" },
     ],
     {
-      duration: animation ? 30000 : Math.ceil(Date.now() / 30000) * 30000 - Date.now(),
+      duration: JSON.parse(event.data).nextUpdate,
       iterations: 1,
       easing: "linear",
     }
   );
-  for (const { name, otp } of JSON.parse(event.data)) {
+  for (const { name, otp } of JSON.parse(event.data).list) {
     document.querySelector(`#${name} .otp`).innerText = otp;
   }
 };