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..6fbeb02bd1d 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,11 +29,11 @@
             </span>
           </div>
 
-          <div class="col-12 col-lg-6 text-right">
+          <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">
-                  <a href="https://flowcrypt.com/account" target="_blank"> 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>
@@ -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..b4bf9a15fea 100644
--- a/extension/css/settings.css
+++ b/extension/css/settings.css
@@ -47,6 +47,19 @@ html {
   display: none;
 }
 
+#header-row .action-open-encrypted-contact-page,
+#header-row .action-toggle-accounts-menu,
+#footer-row a {
+  text-decoration: none;
+}
+
+#header-row .action-open-encrypted-contact-page: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;
 }
@@ -332,12 +345,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 +888,4 @@ span.fc-badge {
 .fc-badge-light-gray {
   background-color: #bcbcbc;
   color: #444 !important;
-}
\ No newline at end of file
+}
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>',
diff --git a/package-lock.json b/package-lock.json
index 39ab53780a1..afaf6ae0950 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",
@@ -1127,6 +1127,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.1",
       "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.11.1.tgz",
@@ -2955,10 +2966,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",
@@ -2971,8 +2981,7 @@
       ],
       "license": "MIT",
       "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
+        "@popperjs/core": "^2.11.8"
       }
     },
     "node_modules/boxen": {
@@ -6588,9 +6597,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": {
@@ -8410,18 +8419,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",
diff --git a/package.json b/package.json
index d4de2a07c4c..0c83761b62c 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",