From ff66712152f3e3b4eeea4ff2339ca00569dc6dee Mon Sep 17 00:00:00 2001
From: Ioan Moldovan <ioan@flowcrypt.com>
Date: Wed, 21 Jan 2026 04:47:37 -0800
Subject: [PATCH 1/4] feat: upgraded to bootstrap v5

---
 extension/chrome/elements/pgp_block.htm |  2 +-
 extension/chrome/settings/index.htm     | 10 +--
 extension/chrome/settings/setup.htm     |  4 +-
 extension/css/settings.css              |  7 +-
 package-lock.json                       | 97 +++++++++++++++++++------
 package.json                            |  4 +-
 6 files changed, 90 insertions(+), 34 deletions(-)

diff --git a/extension/chrome/elements/pgp_block.htm b/extension/chrome/elements/pgp_block.htm
index ed3c39c3bfb..02c0719e711 100644
--- a/extension/chrome/elements/pgp_block.htm
+++ b/extension/chrome/elements/pgp_block.htm
@@ -22,7 +22,7 @@
             <tbody>
               <tr class="print_header_info">
                 <td class="print_user_email" data-test="print-user-email"></td>
-                <td class="display-table float-right">
+                <td class="display-table float-end">
                   <span class="print_encrypted_with_label">Encrypted with</span>
                   <img src="/img/logo/flowcrypt-logo-125-27.png" width="auto" height="22" alt="FlowCrypt a.s. Mail" class="logo" />
                 </td>
diff --git a/extension/chrome/settings/index.htm b/extension/chrome/settings/index.htm
index d584d09a658..16e1f59c6f0 100644
--- a/extension/chrome/settings/index.htm
+++ b/extension/chrome/settings/index.htm
@@ -21,7 +21,7 @@
     <section id="header-row">
       <div class="container">
         <div class="row">
-          <div class="col-12 col-lg-6 text-left logo-row">
+          <div class="col-12 col-lg-6 text-start logo-row">
             <img class="cryptup-logo" src="/img/logo/full-logo.svg" alt="FlowCrypt Logo" />
             <span class="subscription">
               <a class="level green_label short" href="https://flowcrypt.com/account">free forever</a>
@@ -29,7 +29,7 @@
             </span>
           </div>
 
-          <div class="col-12 col-lg-6 text-right">
+          <div class="col-12 col-lg-6 text-end">
             <div class="profile-row">
               <div class="public-profile-container hide_if_setup_not_done public_profile_indicator_container" style="visibility: hidden">
                 <div id="public-profile-indicator">
@@ -199,7 +199,7 @@ <h1 class="text-center">FlowCrypt Settings</h1>
               <div class="col-12 flex" style="padding-left: 0">
                 <img src="/img/svgs/key-icon.svg" class="key-icon" alt="key icon" />
                 <span class="my-keys-copy">My Keys</span>
-                <span class="text-right keys-link-top-right-container">
+                <span class="text-end keys-link-top-right-container">
                   <a href="#" class="show_settings_page my_key_link add_key" data-test="action-open-add-key-page" page="/chrome/settings/modules/add_key.htm"
                     >Add Key</a
                   >
@@ -218,7 +218,7 @@ <h1 class="text-center">FlowCrypt Settings</h1>
           <div class="col-12 col-lg-2">
             <a href="#" class="show_settings_page" page="modules/help.htm" data-test="action-open-modules-help">Need Help?</a>
           </div>
-          <div class="col-12 col-lg-8 row">
+          <div class="col-12 col-lg-8 d-flex justify-content-center">
             <a href="https://flowcrypt.com/terms" target="_blank" class="gray_link">Terms</a>
             <a href="https://flowcrypt.com/privacy" target="_blank" class="gray_link">Privacy</a>
             <a href="https://github.com/FlowCrypt/flowcrypt-browser" target="_blank" class="gray_link advanced">Source</a>
@@ -228,7 +228,7 @@ <h1 class="text-center">FlowCrypt Settings</h1>
               >
             </span>
           </div>
-          <div class="col-12 col-lg-2 text-right hide_if_setup_not_done">
+          <div class="col-12 col-lg-2 text-end hide_if_setup_not_done">
             <a class="toggle-settings advanced" href="#" data-test="action-toggle-screen-basic">Basic Settings</a
             ><a class="toggle-settings basic" href="#" data-test="action-toggle-screen-additional">Additional Settings</a>
           </div>
diff --git a/extension/chrome/settings/setup.htm b/extension/chrome/settings/setup.htm
index 202198f3d6d..a484ef87937 100644
--- a/extension/chrome/settings/setup.htm
+++ b/extension/chrome/settings/setup.htm
@@ -21,11 +21,11 @@
     <section id="header-row">
       <div class="container">
         <div class="row">
-          <div class="col-12 col-lg-6 text-left logo-row">
+          <div class="col-12 col-lg-6 text-start logo-row">
             <img class="cryptup-logo" src="/img/logo/full-logo.svg" alt="FlowCrypt Logo" />
           </div>
 
-          <div class="col-12 col-lg-6 text-right">
+          <div class="col-12 col-lg-6 text-end">
             <div class="profile-row">
               <div class="public-profile-container hide_if_setup_not_done public_profile_indicator_container" style="visibility: hidden"></div>
               <a href="#" class="email-address action-toggle-accounts-menu" data-test="action-toggle-accounts-menu"></a>
diff --git a/extension/css/settings.css b/extension/css/settings.css
index 9bcb0dc3286..24590ddf6af 100644
--- a/extension/css/settings.css
+++ b/extension/css/settings.css
@@ -332,12 +332,17 @@ a.gray_link {
   padding: 36px 0;
 }
 
+.profile-row {
+  position: relative;
+}
+
 #settings-row .box {
   background-color: #31a217;
 
   /* background-image: -webkit-linear-gradient(140deg, #31A217 -40%, green 0%, #31A217 100%);
 */
   border: 0;
+  position: relative;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   display: block;
@@ -870,4 +875,4 @@ span.fc-badge {
 .fc-badge-light-gray {
   background-color: #bcbcbc;
   color: #444 !important;
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index e2e1633c51d..09d4060bfd9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,12 +15,12 @@
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
-        "bootstrap": "4.6.2",
+        "bootstrap": "^5.3.3",
         "dompurify": "3.3.1",
         "filesize": "11.0.13",
         "fs-extra": "^11.3.3",
         "globby": "^16.1.0",
-        "jquery": "3.7.1",
+        "jquery": "^4.0.0",
         "linkify-html": "4.3.2",
         "linkifyjs": "4.3.2",
         "node-forge": "1.3.3",
@@ -1115,6 +1115,17 @@
         "node": ">=12"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@puppeteer/browsers": {
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.11.0.tgz",
@@ -2251,6 +2262,29 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/addons-linter/node_modules/node-fetch": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
+      "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/addons-moz-compare": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/addons-moz-compare/-/addons-moz-compare-1.3.0.tgz",
@@ -2920,10 +2954,9 @@
       "license": "ISC"
     },
     "node_modules/bootstrap": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
-      "deprecated": "This version of Bootstrap is no longer supported. Please upgrade to the latest version.",
+      "version": "5.3.8",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
+      "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
       "funding": [
         {
           "type": "github",
@@ -2936,8 +2969,7 @@
       ],
       "license": "MIT",
       "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
+        "@popperjs/core": "^2.11.8"
       }
     },
     "node_modules/boxen": {
@@ -6542,9 +6574,9 @@
       }
     },
     "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-4.0.0.tgz",
+      "integrity": "sha512-TXCHVR3Lb6TZdtw1l3RTLf8RBWVGexdxL6AC8/e0xZKEpBflBsjh9/8LXw+dkNFuOyW9B7iB3O1sP7hS0Kiacg==",
       "license": "MIT"
     },
     "node_modules/js-string-escape": {
@@ -8364,18 +8396,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "license": "MIT",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -10610,6 +10630,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/ts-api-utils": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
@@ -10992,6 +11021,15 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/webpack": {
       "version": "5.104.1",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.104.1.tgz",
@@ -11181,6 +11219,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/when": {
       "version": "3.7.7",
       "resolved": "https://registry.npmjs.org/when/-/when-3.7.7.tgz",
diff --git a/package.json b/package.json
index 60fa07d6f72..da0cd266b8f 100644
--- a/package.json
+++ b/package.json
@@ -48,12 +48,12 @@
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-common": "^3.0.4",
     "@zxcvbn-ts/language-en": "^3.0.2",
-    "bootstrap": "4.6.2",
+    "bootstrap": "^5.3.3",
     "dompurify": "3.3.1",
     "filesize": "11.0.13",
     "fs-extra": "^11.3.3",
     "globby": "^16.1.0",
-    "jquery": "3.7.1",
+    "jquery": "^4.0.0",
     "linkify-html": "4.3.2",
     "linkifyjs": "4.3.2",
     "node-forge": "1.3.3",

From 341143f250d264821f2f8a57fe346e0bdf0d0241 Mon Sep 17 00:00:00 2001
From: Ioan Moldovan <ioan@flowcrypt.com>
Date: Thu, 22 Jan 2026 04:59:31 -0800
Subject: [PATCH 2/4] fix: pr reviews

---
 extension/chrome/settings/index.htm |  2 +-
 extension/css/settings.css          | 13 +++++++++++++
 extension/js/common/settings.ts     |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/extension/chrome/settings/index.htm b/extension/chrome/settings/index.htm
index 16e1f59c6f0..3a314c97b55 100644
--- a/extension/chrome/settings/index.htm
+++ b/extension/chrome/settings/index.htm
@@ -33,7 +33,7 @@
             <div class="profile-row">
               <div class="public-profile-container hide_if_setup_not_done public_profile_indicator_container" style="visibility: hidden">
                 <div id="public-profile-indicator">
-                  <a href="https://flowcrypt.com/account" target="_blank"> Encrypted Contact Page </a>
+                  <a href="https://flowcrypt.com/account" target="_blank" class="action_show_encrypted_inbox"> Encrypted Contact Page </a>
                 </div>
               </div>
               <a href="#" class="email-address action-toggle-accounts-menu" data-test="action-toggle-accounts-menu"></a>
diff --git a/extension/css/settings.css b/extension/css/settings.css
index 24590ddf6af..cc872a81988 100644
--- a/extension/css/settings.css
+++ b/extension/css/settings.css
@@ -47,6 +47,19 @@ html {
   display: none;
 }
 
+#header-row .action_show_encrypted_inbox,
+#header-row .action-toggle-accounts-menu,
+#footer-row a {
+  text-decoration: none;
+}
+
+#header-row .action_show_encrypted_inbox:hover,
+#header-row .action-toggle-accounts-menu:hover,
+#footer-row a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
 #header-row .logo-row a.cryptup-logo-row {
   text-decoration: none;
 }
diff --git a/extension/js/common/settings.ts b/extension/js/common/settings.ts
index 9beba88efaf..dfa92f9c215 100644
--- a/extension/js/common/settings.ts
+++ b/extension/js/common/settings.ts
@@ -427,7 +427,7 @@ export class Settings {
       return [
         `<a href="#" ${isHeaderRow && 'id = "header-row"'} class="row alt-accounts action_select_account">`,
         `  <div class="col-2"><img class="profile-img" src="${Xss.escape(picture)}" alt=""></div>`,
-        '  <div class="col-10 text-left">',
+        '  <div class="col-10 text-start">',
         `    <div class="contains_email" data-test="action-switch-to-account">${Xss.escape(email)}</div>`,
         '  </div>',
         '</a>',

From 4b8e6a09ad3e6f5b98355f9ae940edd857eeb7b0 Mon Sep 17 00:00:00 2001
From: Ioan Moldovan <ioan@flowcrypt.com>
Date: Thu, 22 Jan 2026 05:09:54 -0800
Subject: [PATCH 3/4] fix: encrypted contact page

---
 extension/chrome/settings/index.htm | 2 +-
 extension/css/settings.css          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/extension/chrome/settings/index.htm b/extension/chrome/settings/index.htm
index 3a314c97b55..e477f25141b 100644
--- a/extension/chrome/settings/index.htm
+++ b/extension/chrome/settings/index.htm
@@ -33,7 +33,7 @@
             <div class="profile-row">
               <div class="public-profile-container hide_if_setup_not_done public_profile_indicator_container" style="visibility: hidden">
                 <div id="public-profile-indicator">
-                  <a href="https://flowcrypt.com/account" target="_blank" class="action_show_encrypted_inbox"> Encrypted Contact Page </a>
+                  <a href="https://flowcrypt.com/account" target="_blank" class="action-open-encrypted-contact-page"> Encrypted Contact Page </a>
                 </div>
               </div>
               <a href="#" class="email-address action-toggle-accounts-menu" data-test="action-toggle-accounts-menu"></a>
diff --git a/extension/css/settings.css b/extension/css/settings.css
index cc872a81988..b4bf9a15fea 100644
--- a/extension/css/settings.css
+++ b/extension/css/settings.css
@@ -47,13 +47,13 @@ html {
   display: none;
 }
 
-#header-row .action_show_encrypted_inbox,
+#header-row .action-open-encrypted-contact-page,
 #header-row .action-toggle-accounts-menu,
 #footer-row a {
   text-decoration: none;
 }
 
-#header-row .action_show_encrypted_inbox:hover,
+#header-row .action-open-encrypted-contact-page:hover,
 #header-row .action-toggle-accounts-menu:hover,
 #footer-row a:hover {
   color: #0056b3;

From 78b345a46a1f33c3c1a7203a75ee66750dcf54c5 Mon Sep 17 00:00:00 2001
From: Ioan Moldovan <ioan@flowcrypt.com>
Date: Thu, 22 Jan 2026 05:22:20 -0800
Subject: [PATCH 4/4] fix: position relative

---
 extension/chrome/settings/index.htm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extension/chrome/settings/index.htm b/extension/chrome/settings/index.htm
index e477f25141b..6fbeb02bd1d 100644
--- a/extension/chrome/settings/index.htm
+++ b/extension/chrome/settings/index.htm
@@ -29,7 +29,7 @@
             </span>
           </div>
 
-          <div class="col-12 col-lg-6 text-end">
+          <div class="col-12 col-lg-6 text-end position-relative">
             <div class="profile-row">
               <div class="public-profile-container hide_if_setup_not_done public_profile_indicator_container" style="visibility: hidden">
                 <div id="public-profile-indicator">