diff --git a/web/index.html b/web/index.html
index 7839419c0..d143d2bf0 100644
--- a/web/index.html
+++ b/web/index.html
@@ -32,10 +32,12 @@
   <title>Twake Mail</title>
   <link rel="manifest" href="manifest.json">
   <link rel="stylesheet" type="text/css" href="splash/style.css">
+  <link rel="stylesheet" type="text/css" href="worker_service/style.css">
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
 
   <script type="application/javascript" src="assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>
   <script src="splash/splash.js"></script>
+  <script src="worker_service/worker_service.js"></script>
 </head>
 <body>
 
@@ -55,78 +57,44 @@
             <div class="loader"></div>
         </div>
     </div>
+
+    <div class="bottom-sheet">
+      <div class="sheet-header">
+        <span class="open_on_mobile_title">Open Twake Mail in...</span>
+      </div>
+      <div class="sheet-content">
+        <span class="open_on_mobile_actions" onclick={hanldeOpenTwakeMailApp()}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#002DDF"
+            strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
+            <circle cx="12" cy="16" r="1" fill="black" />
+            <line x1="12" y1="18" x2="12.01" y2="18" />
+          </svg>
+          <span style="color: #002DDF">Twake Mail App</span>
+          <span style="flex: 1"></span>
+          <button class="button openApp">
+            Open
+          </button>
+        </span>
+        <span class="open_on_mobile_actions" onclick={handleContinueTwakeMailOnWeb()}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black"
+            strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+          <span>Continue on web</span>
+          <span style="flex: 1"></span>
+          <Button class="button continueWeb">
+            Continue
+          </Button>
+        </span>
+      </div>
+    </div>
   <!-- This script installs service_worker.js to provide PWA functionality to
        application. For more information, see:
        https://developers.google.com/web/fundamentals/primers/service-workers -->
   <script>
-    var serviceWorkerVersion = null;
-    var scriptLoaded = false;
-    function loadMainDartJs() {
-      if (scriptLoaded) {
-        return;
-      }
-      scriptLoaded = true;
-      var scriptTag = document.createElement('script');
-      scriptTag.src = 'main.dart.js';
-      scriptTag.type = 'application/javascript';
-      document.body.append(scriptTag);
-    }
-
-    if ('serviceWorker' in navigator) {
-      // Service workers are supported. Use them.
-      window.addEventListener('load', function () {
-        // Wait for registration to finish before dropping the <script> tag.
-        // Otherwise, the browser will load the script multiple times,
-        // potentially different versions.
-        navigator.serviceWorker.register('firebase-messaging-sw.js').then(serviceWorkerRegistration => {
-          console.info('Service worker firebase-messaging was registered.');
-        }).catch(error => {
-          console.error('An error occurred while registering the service worker firebase-messaging.');
-          console.error(error);
-        });
-        var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
-        navigator.serviceWorker.register(serviceWorkerUrl)
-          .then((reg) => {
-            function waitForActivation(serviceWorker) {
-              serviceWorker.addEventListener('statechange', () => {
-                if (serviceWorker.state == 'activated') {
-                  console.log('Installed new service worker.');
-                  loadMainDartJs();
-                }
-              });
-            }
-            if (!reg.active && (reg.installing || reg.waiting)) {
-              // No active web worker and we have installed or are installing
-              // one for the first time. Simply wait for it to activate.
-              waitForActivation(reg.installing || reg.waiting);
-            } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
-              // When the app updates the serviceWorkerVersion changes, so we
-              // need to ask the service worker to update.
-              console.log('New service worker available.');
-              reg.update();
-              waitForActivation(reg.installing);
-            } else {
-              // Existing service worker is still good.
-              console.log('Loading app from service worker.');
-              loadMainDartJs();
-            }
-          });
-
-        // If service worker doesn't succeed in a reasonable amount of time,
-        // fallback to plaint <script> tag.
-        setTimeout(() => {
-          if (!scriptLoaded) {
-            console.warn(
-              'Failed to load app from service worker. Falling back to plain <script> tag.',
-            );
-            loadMainDartJs();
-          }
-        }, 4000);
-      });
-    } else {
-      // Service workers not supported. Just drop the <script> tag.
-      loadMainDartJs();
-    }
+    initialWorkerService();
   </script>
   <script src="https://unpkg.com/pica/dist/pica.min.js" ></script> 
 </body>
diff --git a/web/worker_service/style.css b/web/worker_service/style.css
index ea2a91cf7..cadf8665d 100644
--- a/web/worker_service/style.css
+++ b/web/worker_service/style.css
@@ -21,44 +21,34 @@
 
 .sheet-content { 
 	padding: 20px; 
-} 
-
-.sheet-content h2 { 
-	font-size: 24px; 
-	margin-bottom: 10px; 
-} 
-
-.sheet-content p { 
-	font-size: 16px; 
-	line-height: 1.5; 
 }
 
 .open_on_mobile_title {
-      height: 48px;
-      line-height: 48px;
-      display: inline-block;
-      font-weight: bold;
-      font-size: 16px;
-      border-bottom: 1px solid #eee;
-      text-align: center;
-      width: 100%;
-      margin-bottom: 16px;
-      color: #000;
-    }
+  height: 48px;
+  line-height: 48px;
+  display: inline-block;
+  font-weight: bold;
+  font-size: 16px;
+  border-bottom: 1px solid #eee;
+  text-align: center;
+  width: 100%;
+  margin-bottom: 16px;
+  color: #000;
+}
 
 .open_on_mobile_actions {
-      width: 100%;
-      display: block;
-      height: 48px;
-      display: flex;
-      justify-content: left;
-      align-items: center;
+  width: 100%;
+  display: block;
+  height: 48px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
 
-      & > span {
-        margin-left: 8px;
-        font-weight: bold;
-      }
-    }
+  & > span {
+    margin-left: 8px;
+    font-weight: bold;
+  }
+}
 
 .button {
   border: none;
diff --git a/web/worker_service/worker_service.js b/web/worker_service/worker_service.js
new file mode 100644
index 000000000..330786e0b
--- /dev/null
+++ b/web/worker_service/worker_service.js
@@ -0,0 +1,136 @@
+const androidStore = 'https://play.google.com/store/apps/details?id=com.linagora.android.teammail';
+const iosStore = 'https://apps.apple.com/vn/app/twake-mail/id1587086189';
+const iosPlatform = 'iOS';
+const androidPlatform = 'android';
+const otherPlatform = 'other';
+var serviceWorkerVersion = null;
+var scriptLoaded = false;
+
+function loadMainDartJs() {
+  if (scriptLoaded) {
+    return;
+  }
+  scriptLoaded = true;
+  var scriptTag = document.createElement('script');
+  scriptTag.src = 'main.dart.js';
+  scriptTag.type = 'application/javascript';
+  document.body.append(scriptTag);
+}
+
+function fetchServiceWorker() {
+if ('serviceWorker' in navigator) {
+  // Service workers are supported. Use them.
+  // Wait for registration to finish before dropping the <script>tag.
+  // Otherwise, the browser will load the script multiple times,
+  // potentially different versions.
+  navigator.serviceWorker.register('firebase-messaging-sw.js').then(serviceWorkerRegistration => {
+    console.info('[TwakeMail] fetchServiceWorker(): Service worker firebase-messaging was registered.');
+  }).catch(error => {
+    console.error(
+      '[TwakeMail] fetchServiceWorker(): An error occurred while registering the service worker firebase-messaging.'
+      );
+    console.error(error);
+  });
+  var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
+  navigator.serviceWorker.register(serviceWorkerUrl)
+    .then((reg) => {
+      function waitForActivation(serviceWorker) {
+        serviceWorker.addEventListener('statechange', () => {
+          if (serviceWorker.state == 'activated') {
+            console.log('[TwakeMail] fetchServiceWorker(): Installed new service worker.');
+            loadMainDartJs();
+          }
+        });
+      }
+      if (!reg.active && (reg.installing || reg.waiting)) {
+        // No active web worker and we have installed or are installing
+        // one for the first time. Simply wait for it to activate.
+        waitForActivation(reg.installing || reg.waiting);
+      } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
+        // When the app updates the serviceWorkerVersion changes, so we
+        // need to ask the service worker to update.
+        console.log('[TwakeMail] fetchServiceWorker(): New service worker available.');
+        reg.update();
+        waitForActivation(reg.installing);
+      } else {
+        // Existing service worker is still good.
+        console.log('[TwakeMail] fetchServiceWorker(): Loading app from service worker.');
+        loadMainDartJs();
+      }
+    });
+  // If service worker doesn't succeed in a reasonable amount of time,
+  // fallback to plaint <script> tag.
+  setTimeout(() => {
+    if (!scriptLoaded) {
+      console.warn(
+        '[TwakeMail] fetchServiceWorker(): Failed to load app from service worker. Falling back to plain <script> tag.',
+      );
+      loadMainDartJs();
+    }
+  }, 4000);
+  }
+  else {
+    // Service workers not supported. Just drop the <script> tag.
+    loadMainDartJs();
+  }
+  }
+
+  function handleContinueTwakeMailOnWeb() {
+    console.info('[TwakeMail] handleContinueTwakeMailOnWeb(): Continue on web.');
+    closeBottomSheet();
+    fetchServiceWorker();
+  }
+
+  function getPlatform() {
+    console.info('[TwakeMail] getPlatform(): ', navigator.userAgent);
+    if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+      return iosPlatform;
+    }
+    if (/Android/i.test(navigator.userAgent)) {
+      return androidPlatform;
+    }
+    return otherPlatform;
+  }
+
+  function hanldeOpenTwakeMailApp() {
+    const os = getPlatform();
+    console.info('[TwakeMail] hanldeOpenTwakeMailApp() - OS:', os);
+    if (os === androidPlatform) {
+      document.location.replace(androidStore);
+    } else if (os === iosPlatform) {
+      document.location.replace(iosStore);
+    }
+  }
+
+  function initialWorkerService() {
+    const os = getPlatform();
+    const searchParams = Object.fromEntries(
+      new URLSearchParams(window.location.search),
+    );
+    const originInUrl = searchParams.origin;
+    //   For desktop, we don't show the open on app popup
+    if (os === otherPlatform || typeof window === 'undefined') {
+      if (os !== otherPlatform) {
+        console.log('[TwakeMail] initialWorkerService(): Keep on browser because:', {
+          os,
+          originInUrl,
+          windowUndefined: typeof window === 'undefined',
+        });
+      }
+      fetchServiceWorker();
+      return;
+    }
+    console.log('[TwakeMail] initialWorkerService(): Open the bottom sheet.');
+    const bottomSheet = document.querySelector(".bottom-sheet");
+    bottomSheet.style.display = "block";
+    document.body.style.overflow = "hidden";
+    bottomSheet.style.bottom = "0";
+  }
+
+  function closeBottomSheet() {
+    console.info('[TwakeMail] closeBottomSheet(): Closing the bottom sheet.');
+    const bottomSheet = document.querySelector(".bottom-sheet");
+    bottomSheet.style.display = "none";
+    document.body.style.overflow = "auto";
+    bottomSheet.style.bottom = "-100%";
+  }
\ No newline at end of file
