diff --git a/assets/mspoplati/app/oplati.app.js b/assets/mspoplati/app/oplati.app.js
index eb3745f..b3c4f3a 100644
--- a/assets/mspoplati/app/oplati.app.js
+++ b/assets/mspoplati/app/oplati.app.js
@@ -10,54 +10,45 @@ document
     .querySelectorAll(oWrapper)
     .forEach(block => {
 
-        const oplatiinfomessage = '';
-
-
-    console.log(
-        block.dataset.size,
-        block.dataset.fill,
-        block.dataset.path,
-        block.dataset.code,
-    );
-
-    const codeBlock = block.querySelector(oCodeBlock);
-
-    const qrCode = new QRCode(codeBlock, {
-        width: block.dataset.size,
-        height: block.dataset.size,
-        colorDark : block.dataset.path,
-        colorLight : block.dataset.fill,
-        correctLevel : QRCode.CorrectLevel.H,
-    });
-
-    qrCode.clear();
-    qrCode.makeCode(block.dataset.code);
-
-    // setInterval();
-
-    const button = block.querySelector('.button');
-
-    console.log(button);
-
-    button.addEventListener('click', function () {
-
-        const urlParams = new URLSearchParams(window.location.search);
-        const orderId = urlParams.get('msorder');
-
-        let form = new FormData();
-        form.set('ctx', 'web');
-        form.set('action', 'check');
-        form.set('id', orderId);
-
-        fetch("/assets/components/mspoplati/connector.php", {
-            method: "POST",
-            body: form
-        }).then(res => {
-            console.log("Request complete!, resp: ", res);
+        // console.log(block.dataset, block.dataset.path.padStart(7, '#'));
+
+        const qrCode = new QRCode(block.querySelector(oCodeBlock), {
+            width: block.dataset.size,
+            height: block.dataset.size,
+            colorDark: block.dataset.path.padStart(7, '#'),
+            colorLight: block.dataset.fill.padStart(7, '#'),
+            correctLevel: QRCode.CorrectLevel.H,
         });
 
-    });
+        qrCode.clear();
+        qrCode.makeCode(block.dataset.code);
+
+        let start = 60;
+        let interval = setInterval(() => {
+            start--;
+            block.querySelector(oTimerBlock).textContent = '00:' + start.toString(10).padStart(2, '0');
+            // every 3 second?
+            // update state?
+            checkPaymentStatus(block.dataset.oid);
+
+            if (start <= 0) {
+                clearInterval(interval);
+                // show button for renew
+                console.log('renewwing the code');
+            }
+        }, 1000);
 });
 
-// check payment
-// request new code
+function checkPaymentStatus(oid) {
+    let form = new FormData();
+    form.set('ctx', 'web');
+    form.set('action', 'check');
+    form.set('id', oid);
+
+    fetch('/assets/components/mspoplati/connector.php', {
+        method: 'POST',
+        body: form
+    }).then(response => {
+        console.log(response);
+    });
+}
diff --git a/assets/mspoplati/styles/oplati.app.css b/assets/mspoplati/styles/oplati.app.css
index 2a999f6..e3ccb74 100644
--- a/assets/mspoplati/styles/oplati.app.css
+++ b/assets/mspoplati/styles/oplati.app.css
@@ -6,8 +6,47 @@
   box-shadow: 0 0.25rem 0.75rem silver;
   padding: 1rem;
 }
+.oplati-wrapper .oplati-mobile-block {
+  display: none;
+  margin-bottom: 1rem;
+}
+@media screen and (max-device-width: 768px) {
+  .oplati-wrapper .oplati-mobile-block {
+    display: block;
+  }
+}
+.oplati-wrapper .oplati-mobile-block .oplati-mobile-button {
+  border: 1px solid silver;
+  border-radius: 5px;
+  background: white;
+  font-size: 0.75rem;
+  font-weight: bold;
+  color: darkslategrey;
+  box-shadow: 0 3px 6px rgba(55, 55, 55, 0.2);
+}
+.oplati-wrapper .oplati-help-message {
+  display: inline-block;
+  width: 50%;
+  font-size: 0.75rem;
+}
+.oplati-wrapper .oplati-code-block {
+  margin: 1rem 0;
+}
+@media screen and (max-device-width: 768px) {
+  .oplati-wrapper .oplati-code-block {
+    display: none;
+  }
+}
 .oplati-wrapper .oplati-code-block img {
   margin: 0 auto;
 }
+.oplati-wrapper .oplati-timer-block {
+  margin-top: 1rem;
+  color: gray;
+}
+.oplati-wrapper .oplati-status-block {
+  margin-top: 1rem;
+  color: dimgray;
+}
 
 /*# sourceMappingURL=oplati.app.css.map */
diff --git a/assets/mspoplati/styles/oplati.app.css.map b/assets/mspoplati/styles/oplati.app.css.map
index e8a4651..0614d71 100644
--- a/assets/mspoplati/styles/oplati.app.css.map
+++ b/assets/mspoplati/styles/oplati.app.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["oplati.app.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEE;EACE","file":"oplati.app.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["oplati.app.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EAHF;IAII;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAEF;EACE;;AACA;EAFF;IAGI;;;AAEF;EACE;;AAGJ;EACE;EACA;;AAEF;EACE;EACA","file":"oplati.app.css"}
\ No newline at end of file
diff --git a/assets/mspoplati/styles/oplati.app.scss b/assets/mspoplati/styles/oplati.app.scss
index 5890854..424e2ab 100644
--- a/assets/mspoplati/styles/oplati.app.scss
+++ b/assets/mspoplati/styles/oplati.app.scss
@@ -5,9 +5,42 @@
   border-radius: 0.75rem;
   box-shadow: 0 .25rem 0.75rem silver;
   padding: 1rem;
+  .oplati-mobile-block {
+    display: none;
+    margin-bottom: 1rem;
+    @media screen and (max-device-width: 768px) {
+      display: block;
+    }
+    .oplati-mobile-button {
+      border: 1px solid silver;
+      border-radius: 5px;
+      background: white;
+      font-size: .75rem;
+      font-weight: bold;
+      color: darkslategrey;
+      box-shadow: 0 3px 6px rgba(55, 55, 55, .2);
+    }
+  }
+  .oplati-help-message {
+    display: inline-block;
+    width: 50%;
+    font-size: 0.75rem;
+  }
   .oplati-code-block {
+    margin: 1rem 0;
+    @media screen and (max-device-width: 768px) {
+      display: none;
+    }
     img {
       margin: 0 auto;
     }
   }
+  .oplati-timer-block {
+    margin-top: 1rem;
+    color: gray;
+  }
+  .oplati-status-block {
+    margin-top: 1rem;
+    color: dimgray;
+  }
 }