diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 3faae48627b..7d216ac257e 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -71,6 +71,7 @@ apps/web/src/app/platform @bitwarden/team-platform-dev
 libs/angular/src/platform @bitwarden/team-platform-dev
 libs/common/src/platform @bitwarden/team-platform-dev
 libs/common/spec @bitwarden/team-platform-dev
+libs/common/src/state-migrations @bitwarden/team-platform-dev
 # Node-specifc platform files
 libs/node @bitwarden/team-platform-dev
 # Web utils used across app and connectors
diff --git a/.github/renovate.json b/.github/renovate.json
index af418cf3475..bb5816d4ce3 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -91,6 +91,7 @@
     },
     {
       "matchPackageNames": [
+        "@webcomponents/custom-elements",
         "concurrently",
         "cross-env",
         "del",
@@ -105,6 +106,7 @@
         "prettier",
         "prettier-plugin-tailwindcss",
         "rimraf",
+        "tabbable",
         "wait-on"
       ],
       "description": "Autofill owned dependencies",
diff --git a/.storybook/manager.js b/.storybook/manager.js
new file mode 100644
index 00000000000..89a69bf9421
--- /dev/null
+++ b/.storybook/manager.js
@@ -0,0 +1,63 @@
+import { addons } from "@storybook/addons";
+import { create } from "@storybook/theming/create";
+
+const lightTheme = create({
+  base: "light",
+  //logo and Title
+  brandTitle: "Bitwarden Component Library",
+  brandUrl: "/",
+  brandImage:
+    "https://github.com/bitwarden/brand/blob/51942f8d6e55e96a078a524e0f739efbf1997bcf/logos/logo-horizontal-blue.png?raw=true",
+  brandTarget: "_self",
+
+  //Colors
+  colorPrimary: "#6D757E",
+  colorSecondary: "#175DDC",
+
+  // UI
+  appBg: "#f9fBff",
+  appContentBg: "#ffffff",
+  appBorderColor: "#CED4DC",
+
+  // Text colors
+  textColor: "#212529",
+  textInverseColor: "#ffffff",
+
+  // Toolbar default and active colors
+  barTextColor: "#6D757E",
+  barSelectedColor: "#175DDC",
+  barBg: "#ffffff",
+
+  // Form colors
+  inputBg: "#ffffff",
+  inputBorder: "#6D757E",
+  inputTextColor: "#6D757E",
+});
+
+const darkTheme = create({
+  base: "dark",
+
+  //logo and Title
+  brandTitle: "Bitwarden Component Library",
+  brandUrl: "/",
+  brandImage:
+    "https://github.com/bitwarden/brand/blob/51942f8d6e55e96a078a524e0f739efbf1997bcf/logos/logo-horizontal-white.png?raw=true",
+  brandTarget: "_self",
+
+  //Colors
+  colorSecondary: "#6A99F0",
+  barSelectedColor: "#6A99F0",
+});
+
+export const getPreferredColorScheme = () => {
+  if (!globalThis || !globalThis.matchMedia) return "light";
+
+  const isDarkThemePreferred = globalThis.matchMedia("(prefers-color-scheme: dark)").matches;
+  if (isDarkThemePreferred) return "dark";
+
+  return "light";
+};
+
+addons.setConfig({
+  theme: getPreferredColorScheme() === "dark" ? darkTheme : lightTheme,
+});
diff --git a/apps/browser/gulpfile.js b/apps/browser/gulpfile.js
index 2f672ffcdd4..af1a2d8c7db 100644
--- a/apps/browser/gulpfile.js
+++ b/apps/browser/gulpfile.js
@@ -60,6 +60,7 @@ function dist(browserName, manifest) {
 function distFirefox() {
   return dist("firefox", (manifest) => {
     delete manifest.storage;
+    delete manifest.sandbox;
     return manifest;
   });
 }
diff --git a/apps/browser/src/_locales/be/messages.json b/apps/browser/src/_locales/be/messages.json
index 096ba374f2f..7278c61d448 100644
--- a/apps/browser/src/_locales/be/messages.json
+++ b/apps/browser/src/_locales/be/messages.json
@@ -92,13 +92,13 @@
     "message": "Аўтазапаўненне"
   },
   "autoFillLogin": {
-    "message": "Auto-fill login"
+    "message": "Аўтазапаўненне лагіна"
   },
   "autoFillCard": {
-    "message": "Auto-fill card"
+    "message": "Аўтазапаўненне карткі"
   },
   "autoFillIdentity": {
-    "message": "Auto-fill identity"
+    "message": "Аўтазапаўненне асабістых даных"
   },
   "generatePasswordCopied": {
     "message": "Генерыраваць пароль (з капіяваннем)"
@@ -110,13 +110,13 @@
     "message": "Няма адпаведных лагінаў."
   },
   "noCards": {
-    "message": "No cards"
+    "message": "Няма картак"
   },
   "noIdentities": {
-    "message": "No identities"
+    "message": "Няма прыватных даных"
   },
   "addLoginMenu": {
-    "message": "Add login"
+    "message": "Дадаць лагін"
   },
   "addCardMenu": {
     "message": "Add card"
diff --git a/apps/browser/src/_locales/bg/messages.json b/apps/browser/src/_locales/bg/messages.json
index 216d248d62c..dfa2260546c 100644
--- a/apps/browser/src/_locales/bg/messages.json
+++ b/apps/browser/src/_locales/bg/messages.json
@@ -442,7 +442,7 @@
     "message": "При заключване на системата"
   },
   "onRestart": {
-    "message": "При повторно пускане на четеца"
+    "message": "При повторно пускане на браузъра"
   },
   "never": {
     "message": "Никога"
@@ -2191,13 +2191,13 @@
     "message": "Вписването е стартирано"
   },
   "exposedMasterPassword": {
-    "message": "Exposed Master Password"
+    "message": "Разобличена главна парола"
   },
   "exposedMasterPasswordDesc": {
     "message": "Паролата е намерена в пробив на данни. Използвайте уникална парола, за да защитите вашия акаунт. Наистина ли искате да използвате слаба парола?"
   },
   "weakAndExposedMasterPassword": {
-    "message": "Weak and Exposed Master Password"
+    "message": "Слаба и разобличена главна парола"
   },
   "weakAndBreachedMasterPasswordDesc": {
     "message": "Разпозната е слаба парола, която присъства в известен случай на изтекли данни. Използвайте сложна и уникална парола, за да защитите данните си. Наистина ли искате да използвате тази парола?"
@@ -2575,7 +2575,7 @@
     "message": "Секретният ключ няма да бъде копиран в клонирания елемент. Искате ли да продължите с клонирането на елемента?"
   },
   "passkeyFeatureIsNotImplementedForAccountsWithoutMasterPassword": {
-    "message": "Verification required by the initiating site. This feature is not yet implemented for accounts without master password."
+    "message": "Изисква се проверка от иницииращия сайт. Тази функция все още не е внедрена за акаунти без главна парола."
   },
   "logInWithPasskey": {
     "message": "Вписване със секретен ключ?"
diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 355c1ec3b8f..af2de0643ed 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -619,6 +619,9 @@
   "addLoginNotificationDesc": {
     "message": "Ask to add an item if one isn't found in your vault."
   },
+  "addLoginNotificationDescAlt": {
+    "message": "Ask to add an item if one isn't found in your vault. Applies to all logged in accounts."
+  },
   "showCardsCurrentTab": {
     "message": "Show cards on Tab page"
   },
@@ -651,6 +654,9 @@
   "changedPasswordNotificationDesc": {
     "message": "Ask to update a login's password when a change is detected on a website."
   },
+  "changedPasswordNotificationDescAlt": {
+    "message": "Ask to update a login's password when a change is detected on a website. Applies to all logged in accounts."
+  },
   "notificationChangeDesc": {
     "message": "Do you want to update this password in Bitwarden?"
   },
@@ -667,7 +673,10 @@
     "message": "Show context menu options"
   },
   "contextMenuItemDesc": {
-    "message": "Use a secondary click to access password generation and matching logins for the website. "
+    "message": "Use a secondary click to access password generation and matching logins for the website."
+  },
+  "contextMenuItemDescAlt": {
+    "message": "Use a secondary click to access password generation and matching logins for the website. Applies to all logged in accounts."
   },
   "defaultUriMatchDetection": {
     "message": "Default URI match detection",
@@ -682,6 +691,9 @@
   "themeDesc": {
     "message": "Change the application's color theme."
   },
+  "themeDescAlt": {
+    "message": "Change the application's color theme. Applies to all logged in accounts."
+  },
   "dark": {
     "message": "Dark",
     "description": "Dark color"
@@ -1002,6 +1014,25 @@
   "environmentSaved": {
     "message": "Environment URLs saved"
   },
+  "showAutoFillMenuOnFormFields": {
+    "message": "Show auto-fill menu on form fields",
+    "description": "Represents the message for allowing the user to enable the auto-fill overlay"
+  },
+  "showAutoFillMenuOnFormFieldsDescAlt": {
+    "message": "Applies to all logged in accounts."
+  },
+  "autofillOverlayVisibilityOff": {
+    "message": "Off",
+    "description": "Overlay setting select option for disabling autofill overlay"
+  },
+  "autofillOverlayVisibilityOnFieldFocus": {
+    "message": "When field is selected (on focus)",
+    "description": "Overlay appearance select option for showing the field on focus of the input element"
+  },
+  "autofillOverlayVisibilityOnButtonClick": {
+    "message": "When auto-fill icon is selected",
+    "description": "Overlay appearance select option for showing the field on click of the overlay icon"
+  },
   "enableAutoFillOnPageLoad": {
     "message": "Auto-fill on page load"
   },
@@ -1253,9 +1284,6 @@
   "typeIdentity": {
     "message": "Identity"
   },
-  "typePasskey": {
-    "message": "Passkey"
-  },
   "passwordHistory": {
     "message": "Password history"
   },
@@ -1665,6 +1693,9 @@
   "excludedDomainsDesc": {
     "message": "Bitwarden will not ask to save login details for these domains. You must refresh the page for changes to take effect."
   },
+  "excludedDomainsDescAlt": {
+    "message": "Bitwarden will not ask to save login details for these domains for all logged in accounts. You must refresh the page for changes to take effect."
+  },
   "excludedDomainsInvalidDomain": {
     "message": "$DOMAIN$ is not a valid domain",
     "placeholders": {
@@ -2227,7 +2258,7 @@
     "message": "How to auto-fill"
   },
   "autofillSelectInfoWithCommand": {
-    "message": "Select an item from this page or use the shortcut: $COMMAND$",
+    "message": "Select an item from this screen, use the shortcut $COMMAND$, or explore other options in settings.",
     "placeholders": {
       "command": {
         "content": "$1",
@@ -2236,7 +2267,7 @@
     }
   },
   "autofillSelectInfoWithoutCommand": {
-    "message": "Select an item from this page or set a shortcut in settings."
+    "message": "Select an item from this screen, or explore other options in settings."
   },
   "gotIt": {
     "message": "Got it"
@@ -2457,6 +2488,80 @@
     "message": "Turn off master password re-prompt to edit this field",
     "description": "Message appearing below the autofill on load message when master password reprompt is set for a vault item."
   },
+  "bitwardenOverlayButton": {
+    "message": "Bitwarden auto-fill menu button",
+    "description": "Page title for the iframe containing the overlay button"
+  },
+  "toggleBitwardenVaultOverlay": {
+    "message": "Toggle Bitwarden auto-fill menu",
+    "description": "Screen reader and tool tip label for the overlay button"
+  },
+  "bitwardenVault": {
+    "message": "Bitwarden auto-fill menu",
+    "description": "Page title in overlay"
+  },
+  "unlockYourAccountToViewMatchingLogins": {
+    "message": "Unlock your account to view matching logins",
+    "description": "Text to display in overlay when the account is locked."
+  },
+  "unlockAccount": {
+    "message": "Unlock account",
+    "description": "Button text to display in overlay when the account is locked."
+  },
+  "fillCredentialsFor":  {
+    "message": "Fill credentials for",
+    "description": "Screen reader text for when overlay item is in focused"
+  },
+  "partialUsername" : {
+    "message": "Partial username",
+    "description": "Screen reader text for when a login item is focused where a partial username is displayed. SR will announce this phrase before reading the text of the partial username"
+  },
+  "noItemsToShow": {
+    "message": "No items to show",
+    "description": "Text to show in overlay if there are no matching items"
+  },
+  "newItem": {
+    "message": "New item",
+    "description": "Button text to display in overlay when there are no matching items"
+  },
+  "addNewVaultItem": {
+    "message": "Add new vault item",
+    "description": "Screen reader text (aria-label) for new item button in overlay"
+  },
+  "bitwardenOverlayMenuAvailable": {
+    "message": "Bitwarden auto-fill menu available. Press the down arrow key to select.",
+    "description": "Screen reader text for announcing when the overlay opens on the page"
+  },
+  "overrideBrowserAutofillTitle": {
+    "message": "Override browser auto-fill?",
+    "description": "Dialog title facilitating the ability to override a chrome browser's default autofill behavior"
+  },
+  "overrideBrowserAutofillDescription": {
+    "message": "Leaving this setting off may cause conflicts between the Bitwarden auto-fill menu and your browser’s.",
+    "description": "Dialog message facilitating the ability to override a chrome browser's default autofill behavior"
+  },
+  "overrideBrowserAutofillPrivacyRequiredDescription": {
+    "message": "Leaving this setting off may cause conflicts between the Bitwarden auto-fill menu and your browser’s. Turning this on will restart the Bitwarden extension.",
+    "description": "Dialog message facilitating the ability to override a chrome browser's default autofill behavior"
+  },
+  "turnOn": {
+    "message": "Turn on"
+  },
+  "ignore": {
+    "message": "Ignore"
+  },
+  "overrideBrowserAutoFillSettings": {
+    "message": "Override browser auto-fill settings",
+    "description": "Label for the setting that allows overriding the default browser autofill settings"
+  },
+  "extensionPrivacyPermissionNotGrantedTitle": {
+    "message": "Unable to override browser auto-fill",
+    "description": "Title for the dialog that appears when the user has not granted the extension permission to set privacy settings"
+  },
+  "extensionPrivacyPermissionNotGrantedDescription": {
+    "message": "Bitwarden must have access to the extension's privacy permission to override browser auto-fill settings.",
+    "description": "Description for the dialog that appears when the user has not granted the extension permission to set privacy settings"
+  },
   "importData": {
     "message": "Import data",
     "description": "Used for the header of the import dialog, the import button and within the file-password-prompt"
diff --git a/apps/browser/src/_locales/hr/messages.json b/apps/browser/src/_locales/hr/messages.json
index 66a91b70fe5..6d321b41904 100644
--- a/apps/browser/src/_locales/hr/messages.json
+++ b/apps/browser/src/_locales/hr/messages.json
@@ -92,13 +92,13 @@
     "message": "Auto-ispuna"
   },
   "autoFillLogin": {
-    "message": "Auto-fill login"
+    "message": "Auto-ispuna prijave"
   },
   "autoFillCard": {
-    "message": "Auto-fill card"
+    "message": "Auto-ispuna kartice"
   },
   "autoFillIdentity": {
-    "message": "Auto-fill identity"
+    "message": "Auto-ispuna identiteta"
   },
   "generatePasswordCopied": {
     "message": "Generiraj lozinku (i kopiraj)"
@@ -110,19 +110,19 @@
     "message": "Nema podudarajućih prijava"
   },
   "noCards": {
-    "message": "No cards"
+    "message": "Nema kartica"
   },
   "noIdentities": {
-    "message": "No identities"
+    "message": "Nema identiteta"
   },
   "addLoginMenu": {
-    "message": "Add login"
+    "message": "Dodaj prijavu"
   },
   "addCardMenu": {
-    "message": "Add card"
+    "message": "Dodaj karticu"
   },
   "addIdentityMenu": {
-    "message": "Add identity"
+    "message": "Dodaj identitet"
   },
   "unlockVaultMenu": {
     "message": "Otključaj svoj trezor"
@@ -1254,7 +1254,7 @@
     "message": "Identitet"
   },
   "typePasskey": {
-    "message": "Passkey"
+    "message": "Pristupni ključ"
   },
   "passwordHistory": {
     "message": "Povijest"
@@ -1657,7 +1657,7 @@
     "message": "Pravila organizacije utječu na tvoje mogućnosti vlasništva. "
   },
   "personalOwnershipPolicyInEffectImports": {
-    "message": "An organization policy has blocked importing items into your individual vault."
+    "message": "Organizacijsko pravilo onemogućuje uvoz stavki u tvoj osobni trezor."
   },
   "excludedDomains": {
     "message": "Izuzete domene"
@@ -1926,11 +1926,11 @@
     "message": "Odaberi mapu..."
   },
   "orgPermissionsUpdatedMustSetPassword": {
-    "message": "Your organization permissions were updated, requiring you to set a master password.",
+    "message": "Moraš postaviti glavnu lozinku jer su dopuštenja tvoje organizacije ažurirana.",
     "description": "Used as a card title description on the set password page to explain why the user is there"
   },
   "orgRequiresYouToSetPassword": {
-    "message": "Your organization requires you to set a master password.",
+    "message": "Tvoja organizacija zahtijeva da postaviš glavnu lozinku.",
     "description": "Used as a card title description on the set password page to explain why the user is there"
   },
   "hours": {
@@ -2458,26 +2458,26 @@
     "description": "Message appearing below the autofill on load message when master password reprompt is set for a vault item."
   },
   "importData": {
-    "message": "Import data",
+    "message": "Uvezi podatke",
     "description": "Used for the header of the import dialog, the import button and within the file-password-prompt"
   },
   "importError": {
-    "message": "Import error"
+    "message": "Greška prilikom uvoza"
   },
   "importErrorDesc": {
-    "message": "There was a problem with the data you tried to import. Please resolve the errors listed below in your source file and try again."
+    "message": "Postoji problem s podacima za uvoz. Potrebno je razriješiti doljenavedene greške u izvornoj datoteci i pokušati ponovno."
   },
   "resolveTheErrorsBelowAndTryAgain": {
-    "message": "Resolve the errors below and try again."
+    "message": "Popravi navedene greške i pokušaj ponovo."
   },
   "description": {
-    "message": "Description"
+    "message": "Opis"
   },
   "importSuccess": {
-    "message": "Data successfully imported"
+    "message": "Uvoz podataka u trezor je uspio"
   },
   "importSuccessNumberOfItems": {
-    "message": "A total of $AMOUNT$ items were imported.",
+    "message": "Ukupno je uvezeno $AMOUNT$ stavaka.",
     "placeholders": {
       "amount": {
         "content": "$1",
@@ -2486,10 +2486,10 @@
     }
   },
   "total": {
-    "message": "Total"
+    "message": "Ukupno"
   },
   "importWarning": {
-    "message": "You are importing data to $ORGANIZATION$. Your data may be shared with members of this organization. Do you want to proceed?",
+    "message": "Uvoziš podatke u $ORGANIZATION$. Tvoji podaci možda će biti podijeljeni s članovima ove organizacije. Želiš li svejedno uvesti podatke?",
     "placeholders": {
       "organization": {
         "content": "$1",
@@ -2498,31 +2498,31 @@
     }
   },
   "importFormatError": {
-    "message": "Data is not formatted correctly. Please check your import file and try again."
+    "message": "Podaci nisu ispravno formatirani. Provjeri uvoznu datoteku i pokušaj ponovno."
   },
   "importNothingError": {
-    "message": "Nothing was imported."
+    "message": "Ništa nije uvezeno."
   },
   "importEncKeyError": {
-    "message": "Error decrypting the exported file. Your encryption key does not match the encryption key used export the data."
+    "message": "Greška u dešifriranju izvozne datoteke. Ovaj ključ za šifriranje ne odgovara ključu za šifriranje korištenom pri izvozu datoteke."
   },
   "invalidFilePassword": {
-    "message": "Invalid file password, please use the password you entered when you created the export file."
+    "message": "Nesipravna lozinka datoteke. Unesi lozinku izvozne datoteke."
   },
   "importDestination": {
-    "message": "Import destination"
+    "message": "Odredište uvoza"
   },
   "learnAboutImportOptions": {
-    "message": "Learn about your import options"
+    "message": "Više o mogućnostima uvoza"
   },
   "selectImportFolder": {
-    "message": "Select a folder"
+    "message": "Odaberi mapu"
   },
   "selectImportCollection": {
-    "message": "Select a collection"
+    "message": "Odaberi zbirku"
   },
   "importTargetHint": {
-    "message": "Select this option if you want the imported file contents moved to a $DESTINATION$",
+    "message": "Odaberi ovu opciju ako sadržaj uvezene datoteke želiš spremiti u $DESTINATION$",
     "description": "Located as a hint under the import target. Will be appended by either folder or collection, depending if the user is importing into an individual or an organizational vault.",
     "placeholders": {
       "destination": {
@@ -2532,25 +2532,25 @@
     }
   },
   "importUnassignedItemsError": {
-    "message": "File contains unassigned items."
+    "message": "Datoteka sadrži nedodijeljene stavke."
   },
   "selectFormat": {
-    "message": "Select the format of the import file"
+    "message": "Odaberi format datoteke za uvoz"
   },
   "selectImportFile": {
-    "message": "Select the import file"
+    "message": "Odaberi datoteku za uvoz"
   },
   "chooseFile": {
-    "message": "Choose File"
+    "message": "Odaberi datoteku"
   },
   "noFileChosen": {
-    "message": "No file chosen"
+    "message": "Nije odabrana datoteka"
   },
   "orCopyPasteFileContents": {
-    "message": "or copy/paste the import file contents"
+    "message": "ili kopiraj/zalijepi sadržaj uvozne datoteke"
   },
   "instructionsFor": {
-    "message": "$NAME$ Instructions",
+    "message": "$NAME$ upute",
     "description": "The title for the import tool instructions.",
     "placeholders": {
       "name": {
@@ -2560,127 +2560,127 @@
     }
   },
   "confirmVaultImport": {
-    "message": "Confirm vault import"
+    "message": "Potvrdi uvoz trezora"
   },
   "confirmVaultImportDesc": {
-    "message": "This file is password-protected. Please enter the file password to import data."
+    "message": "Ova je datoteka zaštićena lozinkom. Unesi lozinku za nastavak uvoza."
   },
   "confirmFilePassword": {
-    "message": "Confirm file password"
+    "message": "Potvrdi lozinku datoteke"
   },
   "passkeyNotCopied": {
-    "message": "Passkey will not be copied"
+    "message": "Pristupni ključ neće biti kopiran"
   },
   "passkeyNotCopiedAlert": {
-    "message": "The passkey will not be copied to the cloned item. Do you want to continue cloning this item?"
+    "message": "Pristupni ključ se neće kopirati u kloniranu stavku. Želiš li nastaviti klonirati ovu stavku?"
   },
   "passkeyFeatureIsNotImplementedForAccountsWithoutMasterPassword": {
-    "message": "Verification required by the initiating site. This feature is not yet implemented for accounts without master password."
+    "message": "Ishodišna stranica zahtijeva verifikaciju. Ova značajka još nije implementirana za račune bez glavne lozinke."
   },
   "logInWithPasskey": {
-    "message": "Log in with passkey?"
+    "message": "Prijava pristupnim ključem?"
   },
   "passkeyAlreadyExists": {
-    "message": "A passkey already exists for this application."
+    "message": "Za ovu aplikaciju već postoji pristupni ključ."
   },
   "noPasskeysFoundForThisApplication": {
-    "message": "No passkeys found for this application."
+    "message": "Za ovu aplikaciju nema pristupnih ključeva."
   },
   "noMatchingPasskeyLogin": {
-    "message": "You do not have a matching login for this site."
+    "message": "Nema odgovarajuće prijavu za ovu stranicu."
   },
   "confirm": {
-    "message": "Confirm"
+    "message": "Autoriziraj"
   },
   "savePasskey": {
-    "message": "Save passkey"
+    "message": "Spremi pristupni ključ"
   },
   "savePasskeyNewLogin": {
-    "message": "Save passkey as new login"
+    "message": "Spremi pristupni ključ kao novu prijavu"
   },
   "choosePasskey": {
-    "message": "Choose a login to save this passkey to"
+    "message": "Odaberi prijavu za spremanje ovog pristupnog ključa"
   },
   "passkeyItem": {
-    "message": "Passkey Item"
+    "message": "Stavka pristupnog ključa"
   },
   "overwritePasskey": {
-    "message": "Overwrite passkey?"
+    "message": "Prebriši pristupni ključ?"
   },
   "overwritePasskeyAlert": {
-    "message": "This item already contains a passkey. Are you sure you want to overwrite the current passkey?"
+    "message": "Ova stavka već sadrži pristupni ključ. Sigurno želiš prebrisati trenutni pristupni ključ?"
   },
   "featureNotSupported": {
-    "message": "Feature not yet supported"
+    "message": "Značajka još nije podržana"
   },
   "yourPasskeyIsLocked": {
-    "message": "Authentication required to use passkey. Verify your identity to continue."
+    "message": "Za korištenje pristpnog ključa potrebna je autentifikacija. Potvrdi svoj identitet."
   },
   "useBrowserName": {
-    "message": "Use browser"
+    "message": "Koristi preglednik"
   },
   "multifactorAuthenticationCancelled": {
-    "message": "Multifactor authentication cancelled"
+    "message": "Multifaktorska autentifikacija otkazana"
   },
   "noLastPassDataFound": {
-    "message": "No LastPass data found"
+    "message": "Nisu nađeni LastPass podaci"
   },
   "incorrectUsernameOrPassword": {
-    "message": "Incorrect username or password"
+    "message": "Neispravno korisničko ime ili lozinka"
   },
   "multifactorAuthenticationFailed": {
-    "message": "Multifactor authentication failed"
+    "message": "Multifaktorska autentifikacija nije uspjela"
   },
   "includeSharedFolders": {
-    "message": "Include shared folders"
+    "message": "Uključi dijeljene mape"
   },
   "lastPassEmail": {
-    "message": "LastPass Email"
+    "message": "LastPass e-pošta"
   },
   "importingYourAccount": {
-    "message": "Importing your account..."
+    "message": "Uvoz tvog računa..."
   },
   "lastPassMFARequired": {
-    "message": "LastPass multifactor authentication required"
+    "message": "Potrebna LastPass multifaktorska autenfikacija"
   },
   "lastPassMFADesc": {
-    "message": "Enter your one-time passcode from your authentication app"
+    "message": "Unesi svoj jednokratni kôd iz aplikacije za autentifikaciju"
   },
   "lastPassOOBDesc": {
-    "message": "Approve the login request in your authentication app or enter a one-time passcode."
+    "message": "Odobri svoj zahtjev za prijavu u svojoj aplikaciji za autentifikaciju ili unesi jednokratni kôd."
   },
   "passcode": {
     "message": "Passcode"
   },
   "lastPassMasterPassword": {
-    "message": "LastPass master password"
+    "message": "LastPass glavna lozinka"
   },
   "lastPassAuthRequired": {
-    "message": "LastPass authentication required"
+    "message": "Potrebna LastPass autentifikacija"
   },
   "awaitingSSO": {
-    "message": "Awaiting SSO authentication"
+    "message": "Čekanje SSO autentifikacije"
   },
   "awaitingSSODesc": {
-    "message": "Please continue to log in using your company credentials."
+    "message": "Prijavi se koristeći pristupne podatke svoje tvrtke."
   },
   "seeDetailedInstructions": {
-    "message": "See detailed instructions on our help site at",
+    "message": "Detaljne upute za pomoć pronađi na našoj stranici za pomoć na",
     "description": "This is followed a by a hyperlink to the help website."
   },
   "importDirectlyFromLastPass": {
-    "message": "Import directly from LastPass"
+    "message": "Uvezi direktno iz LastPass-a"
   },
   "importFromCSV": {
-    "message": "Import from CSV"
+    "message": "Uvezi iz CSV-a"
   },
   "lastPassTryAgainCheckEmail": {
-    "message": "Try again or look for an email from LastPass to verify it's you."
+    "message": "Pokušaj ponovno ili pogledaj e-poštu od LastPass-a za potvrdu."
   },
   "collection": {
-    "message": "Collection"
+    "message": "Zbirka"
   },
   "lastPassYubikeyDesc": {
-    "message": "Insert the YubiKey associated with your LastPass account into your computer's USB port, then touch its button."
+    "message": "Umetni YubiKey pridružen svojem LastPass računu u USB priključak račuanala, a zatim dodirni njegovu tipku."
   }
 }
diff --git a/apps/browser/src/_locales/zh_CN/messages.json b/apps/browser/src/_locales/zh_CN/messages.json
index 6f637a10dfe..1c72b15db49 100644
--- a/apps/browser/src/_locales/zh_CN/messages.json
+++ b/apps/browser/src/_locales/zh_CN/messages.json
@@ -510,7 +510,7 @@
     "message": "您的登录会话已过期。"
   },
   "logOutConfirmation": {
-    "message": "您确定要注销吗？"
+    "message": "确定要注销吗？"
   },
   "yes": {
     "message": "是"
@@ -540,7 +540,7 @@
     "message": "文件夹已保存"
   },
   "deleteFolderConfirmation": {
-    "message": "您确定要删除此文件夹吗？"
+    "message": "确定要删除此文件夹吗？"
   },
   "deletedFolder": {
     "message": "文件夹已删除"
@@ -592,13 +592,13 @@
     "message": "覆盖密码"
   },
   "overwritePasswordConfirmation": {
-    "message": "您确定要覆盖当前密码吗？"
+    "message": "确定要覆盖当前密码吗？"
   },
   "overwriteUsername": {
     "message": "覆盖用户名"
   },
   "overwriteUsernameConfirmation": {
-    "message": "您确定要覆盖当前用户名吗？"
+    "message": "确定要覆盖当前用户名吗？"
   },
   "searchFolder": {
     "message": "搜索文件夹"
@@ -769,7 +769,7 @@
     "message": "删除附件"
   },
   "deleteAttachmentConfirmation": {
-    "message": "您确定要删除此附件吗？"
+    "message": "确定要删除此附件吗？"
   },
   "deletedAttachment": {
     "message": "附件已删除"
@@ -1378,7 +1378,7 @@
     "description": "ex. Date this password was updated"
   },
   "neverLockWarning": {
-    "message": "您确定要使用「从不」选项吗？将锁定选项设置为「从不」会将密码库的加密密钥存储在您的设备上。如果使用此选项，您必须确保您的设备安全。"
+    "message": "确定要使用「从不」选项吗？将锁定选项设置为「从不」会将密码库的加密密钥存储在您的设备上。如果使用此选项，您必须确保您的设备安全。"
   },
   "noOrganizationsList": {
     "message": "您没有加入任何组织。组织允许您与其他用户安全地共享项目。"
@@ -1468,7 +1468,7 @@
     "message": "永久删除项目"
   },
   "permanentlyDeleteItemConfirmation": {
-    "message": "您确定要永久删除此项目吗？"
+    "message": "确定要永久删除此项目吗？"
   },
   "permanentlyDeletedItem": {
     "message": "项目已永久删除"
@@ -2012,7 +2012,7 @@
     "message": "主密码已移除"
   },
   "leaveOrganizationConfirmation": {
-    "message": "您确定要退出该组织吗？"
+    "message": "确定要退出该组织吗？"
   },
   "leftOrganization": {
     "message": "您已经退出该组织。"
@@ -2522,7 +2522,7 @@
     "message": "选择一个集合"
   },
   "importTargetHint": {
-    "message": "如果您希望将导入的文件内容移动到 $DESTINATION$，请选择此选项",
+    "message": "如果您希望将导入的文件内容移动到某个 $DESTINATION$，请选择此选项",
     "description": "Located as a hint under the import target. Will be appended by either folder or collection, depending if the user is importing into an individual or an organizational vault.",
     "placeholders": {
       "destination": {
@@ -2608,7 +2608,7 @@
     "message": "覆盖通行密钥吗？"
   },
   "overwritePasskeyAlert": {
-    "message": "此项目已包含一个通行密钥。您确定要覆盖当前的通行密钥吗？"
+    "message": "此项目已包含一个通行密钥。确定要覆盖当前的通行密钥吗？"
   },
   "featureNotSupported": {
     "message": "功能尚不被支持"
@@ -2632,7 +2632,7 @@
     "message": "多重身份验证失败"
   },
   "includeSharedFolders": {
-    "message": "包含已共享的文件夹"
+    "message": "包含共享的文件夹"
   },
   "lastPassEmail": {
     "message": "LastPass Email"
diff --git a/apps/browser/src/auth/popup/utils/auth-popout-window.spec.ts b/apps/browser/src/auth/popup/utils/auth-popout-window.spec.ts
index 1cc0d2948dc..e682181454e 100644
--- a/apps/browser/src/auth/popup/utils/auth-popout-window.spec.ts
+++ b/apps/browser/src/auth/popup/utils/auth-popout-window.spec.ts
@@ -23,9 +23,14 @@ describe("AuthPopoutWindow", () => {
   });
 
   describe("openUnlockPopout", () => {
+    let senderTab: chrome.tabs.Tab;
+
+    beforeEach(() => {
+      senderTab = { windowId: 1 } as chrome.tabs.Tab;
+    });
+
     it("opens a single action popup that allows the user to unlock the extension and sends a `bgUnlockPopoutOpened` message", async () => {
       jest.spyOn(BrowserApi, "tabsQuery").mockResolvedValue([]);
-      const senderTab = { windowId: 1 } as chrome.tabs.Tab;
 
       await openUnlockPopout(senderTab);
 
@@ -33,7 +38,17 @@ describe("AuthPopoutWindow", () => {
         singleActionKey: AuthPopoutType.unlockExtension,
         senderWindowId: 1,
       });
-      expect(sendMessageDataSpy).toHaveBeenCalledWith(senderTab, "bgUnlockPopoutOpened");
+      expect(sendMessageDataSpy).toHaveBeenCalledWith(senderTab, "bgUnlockPopoutOpened", {
+        skipNotification: false,
+      });
+    });
+
+    it("sends an indication that the presenting the notification bar for unlocking the extension should be skipped", async () => {
+      await openUnlockPopout(senderTab, true);
+
+      expect(sendMessageDataSpy).toHaveBeenCalledWith(senderTab, "bgUnlockPopoutOpened", {
+        skipNotification: true,
+      });
     });
 
     it("closes any existing popup window types that are open to the unlock extension route", async () => {
@@ -65,16 +80,16 @@ describe("AuthPopoutWindow", () => {
   });
 
   describe("closeUnlockPopout", () => {
-    it("closes the unlock extension popout window", () => {
-      closeUnlockPopout();
+    it("closes the unlock extension popout window", async () => {
+      await closeUnlockPopout();
 
-      expect(closeSingleActionPopoutSpy).toHaveBeenCalledWith("auth_unlockExtension");
+      expect(closeSingleActionPopoutSpy).toHaveBeenCalledWith(AuthPopoutType.unlockExtension);
     });
   });
 
   describe("openSsoAuthResultPopout", () => {
-    it("opens a window that facilitates presentation of the results for SSO authentication", () => {
-      openSsoAuthResultPopout({ code: "code", state: "state" });
+    it("opens a window that facilitates presentation of the results for SSO authentication", async () => {
+      await openSsoAuthResultPopout({ code: "code", state: "state" });
 
       expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#/sso?code=code&state=state", {
         singleActionKey: AuthPopoutType.ssoAuthResult,
@@ -83,8 +98,8 @@ describe("AuthPopoutWindow", () => {
   });
 
   describe("openTwoFactorAuthPopout", () => {
-    it("opens a window that facilitates two factor authentication", () => {
-      openTwoFactorAuthPopout({ data: "data", remember: "remember" });
+    it("opens a window that facilitates two factor authentication", async () => {
+      await openTwoFactorAuthPopout({ data: "data", remember: "remember" });
 
       expect(openPopoutSpy).toHaveBeenCalledWith(
         "popup/index.html#/2fa;webAuthnResponse=data;remember=remember",
@@ -94,10 +109,10 @@ describe("AuthPopoutWindow", () => {
   });
 
   describe("closeTwoFactorAuthPopout", () => {
-    it("closes the two-factor authentication window", () => {
-      closeTwoFactorAuthPopout();
+    it("closes the two-factor authentication window", async () => {
+      await closeTwoFactorAuthPopout();
 
-      expect(closeSingleActionPopoutSpy).toHaveBeenCalledWith("auth_twoFactorAuth");
+      expect(closeSingleActionPopoutSpy).toHaveBeenCalledWith(AuthPopoutType.twoFactorAuth);
     });
   });
 });
diff --git a/apps/browser/src/auth/popup/utils/auth-popout-window.ts b/apps/browser/src/auth/popup/utils/auth-popout-window.ts
index 2f995fc1f4a..d436aeb73eb 100644
--- a/apps/browser/src/auth/popup/utils/auth-popout-window.ts
+++ b/apps/browser/src/auth/popup/utils/auth-popout-window.ts
@@ -15,8 +15,9 @@ const extensionUnlockUrls = new Set([
  * Opens a window that facilitates unlocking / logging into the extension.
  *
  * @param senderTab - Used to determine the windowId of the sender.
+ * @param skipNotification - Used to determine whether to show the unlock notification.
  */
-async function openUnlockPopout(senderTab: chrome.tabs.Tab) {
+async function openUnlockPopout(senderTab: chrome.tabs.Tab, skipNotification = false) {
   const existingPopoutWindowTabs = await BrowserApi.tabsQuery({ windowType: "popup" });
   existingPopoutWindowTabs.forEach((tab) => {
     if (extensionUnlockUrls.has(tab.url)) {
@@ -28,7 +29,7 @@ async function openUnlockPopout(senderTab: chrome.tabs.Tab) {
     singleActionKey: AuthPopoutType.unlockExtension,
     senderWindowId: senderTab.windowId,
   });
-  await BrowserApi.tabSendMessageData(senderTab, "bgUnlockPopoutOpened");
+  await BrowserApi.tabSendMessageData(senderTab, "bgUnlockPopoutOpened", { skipNotification });
 }
 
 /**
diff --git a/apps/browser/src/autofill/background/abstractions/overlay.background.ts b/apps/browser/src/autofill/background/abstractions/overlay.background.ts
new file mode 100644
index 00000000000..2e5eb1bfa63
--- /dev/null
+++ b/apps/browser/src/autofill/background/abstractions/overlay.background.ts
@@ -0,0 +1,131 @@
+import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
+import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
+
+import AutofillPageDetails from "../../models/autofill-page-details";
+
+type WebsiteIconData = {
+  imageEnabled: boolean;
+  image: string;
+  fallbackImage: string;
+  icon: string;
+};
+
+type OverlayAddNewItemMessage = {
+  login?: {
+    uri?: string;
+    hostname: string;
+    username: string;
+    password: string;
+  };
+};
+
+type OverlayBackgroundExtensionMessage = {
+  [key: string]: any;
+  command: string;
+  tab?: chrome.tabs.Tab;
+  sender?: string;
+  details?: AutofillPageDetails;
+  overlayElement?: string;
+  display?: string;
+  data?: {
+    commandToRetry?: {
+      msg?: {
+        command?: string;
+      };
+    };
+  };
+} & OverlayAddNewItemMessage;
+
+type OverlayPortMessage = {
+  [key: string]: any;
+  command: string;
+  direction?: string;
+  overlayCipherId?: string;
+};
+
+type FocusedFieldData = {
+  focusedFieldStyles: Partial<CSSStyleDeclaration>;
+  focusedFieldRects: Partial<DOMRect>;
+};
+
+type OverlayCipherData = {
+  id: string;
+  name: string;
+  type: CipherType;
+  reprompt: CipherRepromptType;
+  favorite: boolean;
+  icon: { imageEnabled: boolean; image: string; fallbackImage: string; icon: string };
+  login?: { username: string };
+  card?: string;
+};
+
+type BackgroundMessageParam = {
+  message: OverlayBackgroundExtensionMessage;
+};
+type BackgroundSenderParam = {
+  sender: chrome.runtime.MessageSender;
+};
+type BackgroundOnMessageHandlerParams = BackgroundMessageParam & BackgroundSenderParam;
+
+type OverlayBackgroundExtensionMessageHandlers = {
+  [key: string]: CallableFunction;
+  openAutofillOverlay: () => void;
+  autofillOverlayElementClosed: ({ message }: BackgroundMessageParam) => void;
+  autofillOverlayAddNewVaultItem: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
+  getAutofillOverlayVisibility: () => void;
+  checkAutofillOverlayFocused: () => void;
+  focusAutofillOverlayList: () => void;
+  updateAutofillOverlayPosition: ({ message }: BackgroundMessageParam) => void;
+  updateAutofillOverlayHidden: ({ message }: BackgroundMessageParam) => void;
+  updateFocusedFieldData: ({ message }: BackgroundMessageParam) => void;
+  collectPageDetailsResponse: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
+  unlockCompleted: ({ message }: BackgroundMessageParam) => void;
+  addEditCipherSubmitted: () => void;
+  deletedCipher: () => void;
+};
+
+type PortMessageParam = {
+  message: OverlayPortMessage;
+};
+type PortConnectionParam = {
+  port: chrome.runtime.Port;
+};
+type PortOnMessageHandlerParams = PortMessageParam & PortConnectionParam;
+
+type OverlayButtonPortMessageHandlers = {
+  [key: string]: CallableFunction;
+  overlayButtonClicked: ({ port }: PortConnectionParam) => void;
+  closeAutofillOverlay: ({ port }: PortConnectionParam) => void;
+  overlayPageBlurred: () => void;
+  redirectOverlayFocusOut: ({ message, port }: PortOnMessageHandlerParams) => void;
+};
+
+type OverlayListPortMessageHandlers = {
+  [key: string]: CallableFunction;
+  checkAutofillOverlayButtonFocused: () => void;
+  overlayPageBlurred: () => void;
+  unlockVault: ({ port }: PortConnectionParam) => void;
+  fillSelectedListItem: ({ message, port }: PortOnMessageHandlerParams) => void;
+  addNewVaultItem: ({ port }: PortConnectionParam) => void;
+  viewSelectedCipher: ({ message, port }: PortOnMessageHandlerParams) => void;
+  redirectOverlayFocusOut: ({ message, port }: PortOnMessageHandlerParams) => void;
+};
+
+interface OverlayBackground {
+  init(): Promise<void>;
+  removePageDetails(tabId: number): void;
+  updateOverlayCiphers(): void;
+}
+
+export {
+  WebsiteIconData,
+  OverlayBackgroundExtensionMessage,
+  OverlayPortMessage,
+  FocusedFieldData,
+  OverlayCipherData,
+  OverlayAddNewItemMessage,
+  OverlayBackgroundExtensionMessageHandlers,
+  OverlayButtonPortMessageHandlers,
+  OverlayListPortMessageHandlers,
+  OverlayBackground,
+};
diff --git a/apps/browser/src/autofill/background/notification.background.spec.ts b/apps/browser/src/autofill/background/notification.background.spec.ts
new file mode 100644
index 00000000000..6a0a4a7345a
--- /dev/null
+++ b/apps/browser/src/autofill/background/notification.background.spec.ts
@@ -0,0 +1,54 @@
+import { mock } from "jest-mock-extended";
+
+import { PolicyService } from "@bitwarden/common/admin-console/services/policy/policy.service";
+import { AuthService } from "@bitwarden/common/auth/services/auth.service";
+import { EnvironmentService } from "@bitwarden/common/platform/services/environment.service";
+import { CipherService } from "@bitwarden/common/vault/services/cipher.service";
+import { FolderService } from "@bitwarden/common/vault/services/folder/folder.service";
+
+import { BrowserStateService } from "../../platform/services/browser-state.service";
+import { createChromeTabMock } from "../jest/autofill-mocks";
+import AutofillService from "../services/autofill.service";
+
+import NotificationBackground from "./notification.background";
+
+describe("NotificationBackground", () => {
+  let notificationBackground: NotificationBackground;
+  const autofillService = mock<AutofillService>();
+  const cipherService = mock<CipherService>();
+  const authService = mock<AuthService>();
+  const policyService = mock<PolicyService>();
+  const folderService = mock<FolderService>();
+  const stateService = mock<BrowserStateService>();
+  const environmentService = mock<EnvironmentService>();
+
+  beforeEach(() => {
+    notificationBackground = new NotificationBackground(
+      autofillService,
+      cipherService,
+      authService,
+      policyService,
+      folderService,
+      stateService,
+      environmentService
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("unlockVault", () => {
+    it("returns early if the message indicates that the notification should be skipped", async () => {
+      const tabMock = createChromeTabMock();
+      const message = { data: { skipNotification: true } };
+      jest.spyOn(notificationBackground["authService"], "getAuthStatus");
+      jest.spyOn(notificationBackground as any, "pushUnlockVaultToQueue");
+
+      await notificationBackground["unlockVault"](message, tabMock);
+
+      expect(notificationBackground["authService"].getAuthStatus).not.toHaveBeenCalled();
+      expect(notificationBackground["pushUnlockVaultToQueue"]).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/apps/browser/src/autofill/background/notification.background.ts b/apps/browser/src/autofill/background/notification.background.ts
index 253dcd8928a..c60bc666d38 100644
--- a/apps/browser/src/autofill/background/notification.background.ts
+++ b/apps/browser/src/autofill/background/notification.background.ts
@@ -122,7 +122,7 @@ export default class NotificationBackground {
         }
         break;
       case "bgUnlockPopoutOpened":
-        await this.unlockVault(sender.tab);
+        await this.unlockVault(msg, sender.tab);
         break;
       case "checkNotificationQueue":
         await this.checkNotificationQueue(sender.tab);
@@ -330,7 +330,21 @@ export default class NotificationBackground {
     }
   }
 
-  private async unlockVault(tab: chrome.tabs.Tab) {
+  /**
+   * Sets up a notification to unlock the vault when the user
+   * attempts to autofill a cipher while the vault is locked.
+   *
+   * @param message - Extension message, determines if the notification should be skipped
+   * @param tab - The tab that the message was sent from
+   */
+  private async unlockVault(
+    message: { data?: { skipNotification?: boolean } },
+    tab: chrome.tabs.Tab
+  ) {
+    if (message.data?.skipNotification) {
+      return;
+    }
+
     const currentAuthStatus = await this.authService.getAuthStatus();
     if (currentAuthStatus !== AuthenticationStatus.Locked || this.notificationQueue.length) {
       return;
diff --git a/apps/browser/src/autofill/background/overlay.background.spec.ts b/apps/browser/src/autofill/background/overlay.background.spec.ts
new file mode 100644
index 00000000000..6f103b9c65a
--- /dev/null
+++ b/apps/browser/src/autofill/background/overlay.background.spec.ts
@@ -0,0 +1,1316 @@
+import { mock, mockReset } from "jest-mock-extended";
+
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+import { AuthService } from "@bitwarden/common/auth/services/auth.service";
+import { ThemeType } from "@bitwarden/common/enums";
+import { EnvironmentService } from "@bitwarden/common/platform/services/environment.service";
+import { I18nService } from "@bitwarden/common/platform/services/i18n.service";
+import { SettingsService } from "@bitwarden/common/services/settings.service";
+import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
+import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { CipherService } from "@bitwarden/common/vault/services/cipher.service";
+
+import { BrowserApi } from "../../platform/browser/browser-api";
+import { BrowserStateService } from "../../platform/services/browser-state.service";
+import { SHOW_AUTOFILL_BUTTON } from "../constants";
+import {
+  createAutofillPageDetailsMock,
+  createChromeTabMock,
+  createFocusedFieldDataMock,
+  createPageDetailMock,
+  createPortSpyMock,
+} from "../jest/autofill-mocks";
+import { flushPromises, sendExtensionRuntimeMessage, sendPortMessage } from "../jest/testing-utils";
+import { AutofillService } from "../services/abstractions/autofill.service";
+import {
+  AutofillOverlayElement,
+  AutofillOverlayPort,
+  AutofillOverlayVisibility,
+  RedirectFocusDirection,
+} from "../utils/autofill-overlay.enum";
+
+import OverlayBackground from "./overlay.background";
+
+const iconServerUrl = "https://icons.bitwarden.com/";
+
+describe("OverlayBackground", () => {
+  let buttonPortSpy: chrome.runtime.Port;
+  let listPortSpy: chrome.runtime.Port;
+  let overlayBackground: OverlayBackground;
+  const cipherService = mock<CipherService>();
+  const autofillService = mock<AutofillService>();
+  const authService = mock<AuthService>();
+  const environmentService = mock<EnvironmentService>({
+    getIconsUrl: () => iconServerUrl,
+  });
+  const settingsService = mock<SettingsService>();
+  const stateService = mock<BrowserStateService>();
+  const i18nService = mock<I18nService>();
+  const initOverlayElementPorts = (options = { initList: true, initButton: true }) => {
+    const { initList, initButton } = options;
+    if (initButton) {
+      overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.Button));
+      buttonPortSpy = overlayBackground["overlayButtonPort"];
+    }
+
+    if (initList) {
+      overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.List));
+      listPortSpy = overlayBackground["overlayListPort"];
+    }
+
+    return { buttonPortSpy, listPortSpy };
+  };
+
+  beforeEach(() => {
+    overlayBackground = new OverlayBackground(
+      cipherService,
+      autofillService,
+      authService,
+      environmentService,
+      settingsService,
+      stateService,
+      i18nService
+    );
+    overlayBackground.init();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    mockReset(cipherService);
+  });
+
+  describe("removePageDetails", () => {
+    it("removes the page details for a specific tab from the pageDetailsForTab object", () => {
+      const tabId = 1;
+      overlayBackground["pageDetailsForTab"][tabId] = [createPageDetailMock()];
+      overlayBackground.removePageDetails(tabId);
+
+      expect(overlayBackground["pageDetailsForTab"][tabId]).toBeUndefined();
+    });
+  });
+
+  describe("init", () => {
+    it("sets up the extension message listeners, get the overlay's visibility settings, and get the user's auth status", async () => {
+      overlayBackground["setupExtensionMessageListeners"] = jest.fn();
+      overlayBackground["getOverlayVisibility"] = jest.fn();
+      overlayBackground["getAuthStatus"] = jest.fn();
+
+      await overlayBackground.init();
+
+      expect(overlayBackground["setupExtensionMessageListeners"]).toHaveBeenCalled();
+      expect(overlayBackground["getOverlayVisibility"]).toHaveBeenCalled();
+      expect(overlayBackground["getAuthStatus"]).toHaveBeenCalled();
+    });
+  });
+
+  describe("updateOverlayCiphers", () => {
+    const url = "https://jest-testing-website.com";
+    const tab = createChromeTabMock({ url });
+    const cipher1 = mock<CipherView>({
+      id: "id-1",
+      localData: { lastUsedDate: 222 },
+      name: "name-1",
+      type: CipherType.Login,
+      login: { username: "username-1", uri: url },
+    });
+    const cipher2 = mock<CipherView>({
+      id: "id-2",
+      localData: { lastUsedDate: 111 },
+      name: "name-2",
+      type: CipherType.Login,
+      login: { username: "username-2", uri: url },
+    });
+
+    beforeEach(() => {
+      overlayBackground["userAuthStatus"] = AuthenticationStatus.Unlocked;
+    });
+
+    it("ignores updating the overlay ciphers if the user's auth status is not unlocked", async () => {
+      overlayBackground["userAuthStatus"] = AuthenticationStatus.Locked;
+      jest.spyOn(BrowserApi, "getTabFromCurrentWindowId");
+      jest.spyOn(cipherService, "getAllDecryptedForUrl");
+
+      await overlayBackground.updateOverlayCiphers();
+
+      expect(BrowserApi.getTabFromCurrentWindowId).not.toHaveBeenCalled();
+      expect(cipherService.getAllDecryptedForUrl).not.toHaveBeenCalled();
+    });
+
+    it("ignores updating the overlay ciphers if the tab is undefined", async () => {
+      jest.spyOn(BrowserApi, "getTabFromCurrentWindowId").mockResolvedValueOnce(undefined);
+      jest.spyOn(cipherService, "getAllDecryptedForUrl");
+
+      await overlayBackground.updateOverlayCiphers();
+
+      expect(BrowserApi.getTabFromCurrentWindowId).toHaveBeenCalled();
+      expect(cipherService.getAllDecryptedForUrl).not.toHaveBeenCalled();
+    });
+
+    it("queries all ciphers for the given url, sort them by last used, and format them for usage in the overlay", async () => {
+      jest.spyOn(BrowserApi, "getTabFromCurrentWindowId").mockResolvedValueOnce(tab);
+      cipherService.getAllDecryptedForUrl.mockResolvedValue([cipher1, cipher2]);
+      cipherService.sortCiphersByLastUsedThenName.mockReturnValue(-1);
+      jest.spyOn(BrowserApi, "tabSendMessageData").mockImplementation();
+      jest.spyOn(overlayBackground as any, "getOverlayCipherData");
+
+      await overlayBackground.updateOverlayCiphers();
+
+      expect(BrowserApi.getTabFromCurrentWindowId).toHaveBeenCalled();
+      expect(cipherService.getAllDecryptedForUrl).toHaveBeenCalledWith(url);
+      expect(overlayBackground["cipherService"].sortCiphersByLastUsedThenName).toHaveBeenCalled();
+      expect(overlayBackground["overlayLoginCiphers"]).toStrictEqual(
+        new Map([
+          ["overlay-cipher-0", cipher2],
+          ["overlay-cipher-1", cipher1],
+        ])
+      );
+      expect(overlayBackground["getOverlayCipherData"]).toHaveBeenCalled();
+    });
+
+    it("posts an `updateOverlayListCiphers` message to the overlay list port, and send a `updateIsOverlayCiphersPopulated` message to the tab indicating that the list of ciphers is populated", async () => {
+      overlayBackground["overlayListPort"] = mock<chrome.runtime.Port>();
+      cipherService.getAllDecryptedForUrl.mockResolvedValue([cipher1, cipher2]);
+      cipherService.sortCiphersByLastUsedThenName.mockReturnValue(-1);
+      jest.spyOn(BrowserApi, "getTabFromCurrentWindowId").mockResolvedValueOnce(tab);
+      jest.spyOn(BrowserApi, "tabSendMessageData").mockImplementation();
+
+      await overlayBackground.updateOverlayCiphers();
+
+      expect(overlayBackground["overlayListPort"].postMessage).toHaveBeenCalledWith({
+        command: "updateOverlayListCiphers",
+        ciphers: [
+          {
+            card: null,
+            favorite: cipher2.favorite,
+            icon: {
+              fallbackImage: "images/bwi-globe.png",
+              icon: "bwi-globe",
+              image: "https://icons.bitwarden.com//jest-testing-website.com/icon.png",
+              imageEnabled: true,
+            },
+            id: "overlay-cipher-0",
+            login: {
+              username: "us*******2",
+            },
+            name: "name-2",
+            reprompt: cipher2.reprompt,
+            type: 1,
+          },
+          {
+            card: null,
+            favorite: cipher1.favorite,
+            icon: {
+              fallbackImage: "images/bwi-globe.png",
+              icon: "bwi-globe",
+              image: "https://icons.bitwarden.com//jest-testing-website.com/icon.png",
+              imageEnabled: true,
+            },
+            id: "overlay-cipher-1",
+            login: {
+              username: "us*******1",
+            },
+            name: "name-1",
+            reprompt: cipher1.reprompt,
+            type: 1,
+          },
+        ],
+      });
+      expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
+        tab,
+        "updateIsOverlayCiphersPopulated",
+        { isOverlayCiphersPopulated: true }
+      );
+    });
+  });
+
+  describe("getOverlayCipherData", () => {
+    const url = "https://jest-testing-website.com";
+    const cipher1 = mock<CipherView>({
+      id: "id-1",
+      localData: { lastUsedDate: 222 },
+      name: "name-1",
+      type: CipherType.Login,
+      login: { username: "username-1", uri: url },
+    });
+    const cipher2 = mock<CipherView>({
+      id: "id-2",
+      localData: { lastUsedDate: 111 },
+      name: "name-2",
+      type: CipherType.Login,
+      login: { username: "username-2", uri: url },
+    });
+    const cipher3 = mock<CipherView>({
+      id: "id-3",
+      localData: { lastUsedDate: 333 },
+      name: "name-3",
+      type: CipherType.Card,
+      card: { subTitle: "Visa, *6789" },
+    });
+    const cipher4 = mock<CipherView>({
+      id: "id-4",
+      localData: { lastUsedDate: 444 },
+      name: "name-4",
+      type: CipherType.Card,
+      card: { subTitle: "Mastercard, *1234" },
+    });
+
+    it("formats and returns the cipher data", () => {
+      overlayBackground["overlayLoginCiphers"] = new Map([
+        ["overlay-cipher-0", cipher2],
+        ["overlay-cipher-1", cipher1],
+        ["overlay-cipher-2", cipher3],
+        ["overlay-cipher-3", cipher4],
+      ]);
+
+      const overlayCipherData = overlayBackground["getOverlayCipherData"]();
+
+      expect(overlayCipherData).toStrictEqual([
+        {
+          card: null,
+          favorite: cipher2.favorite,
+          icon: {
+            fallbackImage: "images/bwi-globe.png",
+            icon: "bwi-globe",
+            image: "https://icons.bitwarden.com//jest-testing-website.com/icon.png",
+            imageEnabled: true,
+          },
+          id: "overlay-cipher-0",
+          login: {
+            username: "us*******2",
+          },
+          name: "name-2",
+          reprompt: cipher2.reprompt,
+          type: 1,
+        },
+        {
+          card: null,
+          favorite: cipher1.favorite,
+          icon: {
+            fallbackImage: "images/bwi-globe.png",
+            icon: "bwi-globe",
+            image: "https://icons.bitwarden.com//jest-testing-website.com/icon.png",
+            imageEnabled: true,
+          },
+          id: "overlay-cipher-1",
+          login: {
+            username: "us*******1",
+          },
+          name: "name-1",
+          reprompt: cipher1.reprompt,
+          type: 1,
+        },
+        {
+          card: "Visa, *6789",
+          favorite: cipher3.favorite,
+          icon: {
+            fallbackImage: "",
+            icon: "bwi-credit-card",
+            image: undefined,
+            imageEnabled: true,
+          },
+          id: "overlay-cipher-2",
+          login: null,
+          name: "name-3",
+          reprompt: cipher3.reprompt,
+          type: 3,
+        },
+        {
+          card: "Mastercard, *1234",
+          favorite: cipher4.favorite,
+          icon: {
+            fallbackImage: "",
+            icon: "bwi-credit-card",
+            image: undefined,
+            imageEnabled: true,
+          },
+          id: "overlay-cipher-3",
+          login: null,
+          name: "name-4",
+          reprompt: cipher4.reprompt,
+          type: 3,
+        },
+      ]);
+    });
+  });
+
+  describe("obscureName", () => {
+    it("returns an empty string if the name is falsy", () => {
+      const name: string = undefined;
+
+      const obscureName = overlayBackground["obscureName"](name);
+
+      expect(obscureName).toBe("");
+    });
+
+    it("will not attempt to obscure a username that is only a domain", () => {
+      const name = "@domain.com";
+
+      const obscureName = overlayBackground["obscureName"](name);
+
+      expect(obscureName).toBe(name);
+    });
+
+    it("will obscure all characters of a name that is less than 5 characters expect for the first character", () => {
+      const name = "name@domain.com";
+
+      const obscureName = overlayBackground["obscureName"](name);
+
+      expect(obscureName).toBe("n***@domain.com");
+    });
+
+    it("will obscure all characters of a name that is greater than 4 characters by less than 6 ", () => {
+      const name = "name1@domain.com";
+
+      const obscureName = overlayBackground["obscureName"](name);
+
+      expect(obscureName).toBe("na***@domain.com");
+    });
+
+    it("will obscure all characters of a name that is greater than 5 characters except for the first two characters and the last character", () => {
+      const name = "name12@domain.com";
+
+      const obscureName = overlayBackground["obscureName"](name);
+
+      expect(obscureName).toBe("na***2@domain.com");
+    });
+  });
+
+  describe("getAuthStatus", () => {
+    it("will update the user's auth status but will not update the overlay ciphers", async () => {
+      const authStatus = AuthenticationStatus.Unlocked;
+      overlayBackground["userAuthStatus"] = AuthenticationStatus.Unlocked;
+      jest.spyOn(overlayBackground["authService"], "getAuthStatus").mockResolvedValue(authStatus);
+      jest.spyOn(overlayBackground as any, "updateOverlayButtonAuthStatus").mockImplementation();
+      jest.spyOn(overlayBackground as any, "updateOverlayCiphers").mockImplementation();
+
+      const status = await overlayBackground["getAuthStatus"]();
+
+      expect(overlayBackground["authService"].getAuthStatus).toHaveBeenCalled();
+      expect(overlayBackground["updateOverlayButtonAuthStatus"]).not.toHaveBeenCalled();
+      expect(overlayBackground["updateOverlayCiphers"]).not.toHaveBeenCalled();
+      expect(overlayBackground["userAuthStatus"]).toBe(authStatus);
+      expect(status).toBe(authStatus);
+    });
+
+    it("will update the user's auth status and update the overlay ciphers if the status has been modified", async () => {
+      const authStatus = AuthenticationStatus.Unlocked;
+      overlayBackground["userAuthStatus"] = AuthenticationStatus.LoggedOut;
+      jest.spyOn(overlayBackground["authService"], "getAuthStatus").mockResolvedValue(authStatus);
+      jest.spyOn(overlayBackground as any, "updateOverlayButtonAuthStatus").mockImplementation();
+      jest.spyOn(overlayBackground as any, "updateOverlayCiphers").mockImplementation();
+
+      await overlayBackground["getAuthStatus"]();
+
+      expect(overlayBackground["authService"].getAuthStatus).toHaveBeenCalled();
+      expect(overlayBackground["updateOverlayButtonAuthStatus"]).toHaveBeenCalled();
+      expect(overlayBackground["updateOverlayCiphers"]).toHaveBeenCalled();
+      expect(overlayBackground["userAuthStatus"]).toBe(authStatus);
+    });
+  });
+
+  describe("updateOverlayButtonAuthStatus", () => {
+    it("will send a message to the button port with the user's auth status", () => {
+      overlayBackground["overlayButtonPort"] = mock<chrome.runtime.Port>();
+      jest.spyOn(overlayBackground["overlayButtonPort"], "postMessage");
+
+      overlayBackground["updateOverlayButtonAuthStatus"]();
+
+      expect(overlayBackground["overlayButtonPort"].postMessage).toHaveBeenCalledWith({
+        command: "updateOverlayButtonAuthStatus",
+        authStatus: overlayBackground["userAuthStatus"],
+      });
+    });
+  });
+
+  describe("getTranslations", () => {
+    it("will query the overlay page translations if they have not been queried", () => {
+      overlayBackground["overlayPageTranslations"] = undefined;
+      jest.spyOn(overlayBackground as any, "getTranslations");
+      jest.spyOn(overlayBackground["i18nService"], "translate").mockImplementation((key) => key);
+      jest.spyOn(BrowserApi, "getUILanguage").mockReturnValue("en");
+
+      const translations = overlayBackground["getTranslations"]();
+
+      expect(overlayBackground["getTranslations"]).toHaveBeenCalled();
+      const translationKeys = [
+        "opensInANewWindow",
+        "bitwardenOverlayButton",
+        "toggleBitwardenVaultOverlay",
+        "bitwardenVault",
+        "unlockYourAccountToViewMatchingLogins",
+        "unlockAccount",
+        "fillCredentialsFor",
+        "partialUsername",
+        "view",
+        "noItemsToShow",
+        "newItem",
+        "addNewVaultItem",
+      ];
+      translationKeys.forEach((key) => {
+        expect(overlayBackground["i18nService"].translate).toHaveBeenCalledWith(key);
+      });
+      expect(translations).toStrictEqual({
+        locale: "en",
+        opensInANewWindow: "opensInANewWindow",
+        buttonPageTitle: "bitwardenOverlayButton",
+        toggleBitwardenVaultOverlay: "toggleBitwardenVaultOverlay",
+        listPageTitle: "bitwardenVault",
+        unlockYourAccount: "unlockYourAccountToViewMatchingLogins",
+        unlockAccount: "unlockAccount",
+        fillCredentialsFor: "fillCredentialsFor",
+        partialUsername: "partialUsername",
+        view: "view",
+        noItemsToShow: "noItemsToShow",
+        newItem: "newItem",
+        addNewVaultItem: "addNewVaultItem",
+      });
+    });
+  });
+
+  describe("setupExtensionMessageListeners", () => {
+    it("will set up onMessage and onConnect listeners", () => {
+      overlayBackground["setupExtensionMessageListeners"]();
+
+      // eslint-disable-next-line
+      expect(chrome.runtime.onMessage.addListener).toHaveBeenCalled();
+      expect(chrome.runtime.onConnect.addListener).toHaveBeenCalled();
+    });
+  });
+
+  describe("handleExtensionMessage", () => {
+    it("will return early if the message command is not present within the extensionMessageHandlers", () => {
+      const message = {
+        command: "not-a-command",
+      };
+      const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
+      const sendResponse = jest.fn();
+
+      const returnValue = overlayBackground["handleExtensionMessage"](
+        message,
+        sender,
+        sendResponse
+      );
+
+      expect(returnValue).toBe(undefined);
+      expect(sendResponse).not.toHaveBeenCalled();
+    });
+
+    it("will trigger the message handler and return undefined if the message does not have a response", () => {
+      const message = {
+        command: "autofillOverlayElementClosed",
+      };
+      const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
+      const sendResponse = jest.fn();
+      jest.spyOn(overlayBackground as any, "overlayElementClosed");
+
+      const returnValue = overlayBackground["handleExtensionMessage"](
+        message,
+        sender,
+        sendResponse
+      );
+
+      expect(returnValue).toBe(undefined);
+      expect(sendResponse).not.toHaveBeenCalled();
+      expect(overlayBackground["overlayElementClosed"]).toHaveBeenCalledWith(message);
+    });
+
+    it("will return a response if the message handler returns a response", async () => {
+      const message = {
+        command: "openAutofillOverlay",
+      };
+      const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
+      const sendResponse = jest.fn();
+      jest.spyOn(overlayBackground as any, "getTranslations").mockReturnValue("translations");
+
+      const returnValue = overlayBackground["handleExtensionMessage"](
+        message,
+        sender,
+        sendResponse
+      );
+
+      expect(returnValue).toBe(true);
+    });
+
+    describe("extension message handlers", () => {
+      beforeEach(() => {
+        jest
+          .spyOn(overlayBackground as any, "getAuthStatus")
+          .mockResolvedValue(AuthenticationStatus.Unlocked);
+      });
+
+      describe("openAutofillOverlay message handler", () => {
+        it("opens the autofill overlay by sending a message to the current tab", async () => {
+          const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
+          jest.spyOn(BrowserApi, "getTabFromCurrentWindowId").mockResolvedValueOnce(sender.tab);
+          jest.spyOn(BrowserApi, "tabSendMessageData").mockImplementation();
+
+          sendExtensionRuntimeMessage({ command: "openAutofillOverlay" });
+          await flushPromises();
+
+          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
+            sender.tab,
+            "openAutofillOverlay",
+            {
+              isFocusingFieldElement: false,
+              isOpeningFullOverlay: false,
+              authStatus: AuthenticationStatus.Unlocked,
+            }
+          );
+        });
+      });
+
+      describe("autofillOverlayElementClosed message handler", () => {
+        beforeEach(() => {
+          initOverlayElementPorts();
+        });
+
+        it("disconnects the button element port", () => {
+          sendExtensionRuntimeMessage({
+            command: "autofillOverlayElementClosed",
+            overlayElement: AutofillOverlayElement.Button,
+          });
+
+          expect(buttonPortSpy.disconnect).toHaveBeenCalled();
+          expect(overlayBackground["overlayButtonPort"]).toBeNull();
+        });
+
+        it("disconnects the list element port", () => {
+          sendExtensionRuntimeMessage({
+            command: "autofillOverlayElementClosed",
+            overlayElement: AutofillOverlayElement.List,
+          });
+
+          expect(listPortSpy.disconnect).toHaveBeenCalled();
+          expect(overlayBackground["overlayListPort"]).toBeNull();
+        });
+      });
+
+      describe("autofillOverlayAddNewVaultItem message handler", () => {
+        let sender: chrome.runtime.MessageSender;
+        beforeEach(() => {
+          sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
+          jest
+            .spyOn(overlayBackground["stateService"], "setAddEditCipherInfo")
+            .mockImplementation();
+          jest.spyOn(overlayBackground as any, "openAddEditVaultItemPopout").mockImplementation();
+        });
+
+        it("will not open the add edit popout window if the message does not have a login cipher provided", () => {
+          sendExtensionRuntimeMessage({ command: "autofillOverlayAddNewVaultItem" }, sender);
+
+          expect(overlayBackground["stateService"].setAddEditCipherInfo).not.toHaveBeenCalled();
+          expect(overlayBackground["openAddEditVaultItemPopout"]).not.toHaveBeenCalled();
+        });
+
+        it("will open the add edit popout window after creating a new cipher", async () => {
+          sendExtensionRuntimeMessage(
+            {
+              command: "autofillOverlayAddNewVaultItem",
+              login: {
+                uri: "https://tacos.com",
+                hostname: "",
+                username: "username",
+                password: "password",
+              },
+            },
+            sender
+          );
+          await flushPromises();
+
+          expect(overlayBackground["stateService"].setAddEditCipherInfo).toHaveBeenCalled();
+          expect(overlayBackground["openAddEditVaultItemPopout"]).toHaveBeenCalled();
+        });
+      });
+
+      describe("getAutofillOverlayVisibility message handler", () => {
+        beforeEach(() => {
+          jest
+            .spyOn(overlayBackground["settingsService"], "getAutoFillOverlayVisibility")
+            .mockResolvedValue(AutofillOverlayVisibility.OnFieldFocus);
+        });
+
+        it("will set the overlayVisibility property", async () => {
+          sendExtensionRuntimeMessage({ command: "getAutofillOverlayVisibility" });
+          await flushPromises();
+
+          expect(overlayBackground["overlayVisibility"]).toBe(
+            AutofillOverlayVisibility.OnFieldFocus
+          );
+        });
+
+        it("returns the overlayVisibility property", async () => {
+          const sendMessageSpy = jest.fn();
+
+          sendExtensionRuntimeMessage(
+            { command: "getAutofillOverlayVisibility" },
+            undefined,
+            sendMessageSpy
+          );
+          await flushPromises();
+
+          expect(sendMessageSpy).toHaveBeenCalledWith(AutofillOverlayVisibility.OnFieldFocus);
+        });
+      });
+
+      describe("checkAutofillOverlayFocused message handler", () => {
+        beforeEach(() => {
+          initOverlayElementPorts();
+        });
+
+        it("will check if the overlay list is focused if the list port is open", () => {
+          sendExtensionRuntimeMessage({ command: "checkAutofillOverlayFocused" });
+
+          expect(listPortSpy.postMessage).toHaveBeenCalledWith({
+            command: "checkAutofillOverlayListFocused",
+          });
+          expect(buttonPortSpy.postMessage).not.toHaveBeenCalledWith({
+            command: "checkAutofillOverlayButtonFocused",
+          });
+        });
+
+        it("will check if the overlay button is focused if the list port is not open", () => {
+          overlayBackground["overlayListPort"] = undefined;
+
+          sendExtensionRuntimeMessage({ command: "checkAutofillOverlayFocused" });
+
+          expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
+            command: "checkAutofillOverlayButtonFocused",
+          });
+          expect(listPortSpy.postMessage).not.toHaveBeenCalledWith({
+            command: "checkAutofillOverlayListFocused",
+          });
+        });
+      });
+
+      describe("focusAutofillOverlayList message handler", () => {
+        it("will send a `focusOverlayList` message to the overlay list port", () => {
+          initOverlayElementPorts({ initList: true, initButton: false });
+
+          sendExtensionRuntimeMessage({ command: "focusAutofillOverlayList" });
+
+          expect(listPortSpy.postMessage).toHaveBeenCalledWith({ command: "focusOverlayList" });
+        });
+      });
+
+      describe("updateAutofillOverlayPosition message handler", () => {
+        beforeEach(() => {
+          overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.List));
+          listPortSpy = overlayBackground["overlayListPort"];
+          overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.Button));
+          buttonPortSpy = overlayBackground["overlayButtonPort"];
+        });
+
+        it("ignores updating the position if the overlay element type is not provided", () => {
+          sendExtensionRuntimeMessage({ command: "updateAutofillOverlayPosition" });
+
+          expect(listPortSpy.postMessage).not.toHaveBeenCalledWith({
+            command: "updateIframePosition",
+            styles: expect.anything(),
+          });
+          expect(buttonPortSpy.postMessage).not.toHaveBeenCalledWith({
+            command: "updateIframePosition",
+            styles: expect.anything(),
+          });
+        });
+
+        it("updates the overlay button's position", () => {
+          const focusedFieldData = createFocusedFieldDataMock();
+          sendExtensionRuntimeMessage({ command: "updateFocusedFieldData", focusedFieldData });
+
+          sendExtensionRuntimeMessage({
+            command: "updateAutofillOverlayPosition",
+            overlayElement: AutofillOverlayElement.Button,
+          });
+
+          expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
+            command: "updateIframePosition",
+            styles: { height: "2px", left: "4px", top: "2px", width: "2px" },
+          });
+        });
+
+        it("modifies the overlay button's height for medium sized input elements", () => {
+          const focusedFieldData = createFocusedFieldDataMock({
+            focusedFieldRects: { top: 1, left: 2, height: 35, width: 4 },
+          });
+          sendExtensionRuntimeMessage({ command: "updateFocusedFieldData", focusedFieldData });
+
+          sendExtensionRuntimeMessage({
+            command: "updateAutofillOverlayPosition",
+            overlayElement: AutofillOverlayElement.Button,
+          });
+
+          expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
+            command: "updateIframePosition",
+            styles: { height: "20px", left: "-22px", top: "8px", width: "20px" },
+          });
+        });
+
+        it("modifies the overlay button's height for large sized input elements", () => {
+          const focusedFieldData = createFocusedFieldDataMock({
+            focusedFieldRects: { top: 1, left: 2, height: 50, width: 4 },
+          });
+          sendExtensionRuntimeMessage({ command: "updateFocusedFieldData", focusedFieldData });
+
+          sendExtensionRuntimeMessage({
+            command: "updateAutofillOverlayPosition",
+            overlayElement: AutofillOverlayElement.Button,
+          });
+
+          expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
+            command: "updateIframePosition",
+            styles: { height: "27px", left: "-32px", top: "13px", width: "27px" },
+          });
+        });
+
+        it("takes into account the right padding of the focused field in positioning the button if the right padding of the field is larger than the left padding", () => {
+          const focusedFieldData = createFocusedFieldDataMock({
+            focusedFieldStyles: { paddingRight: "20px", paddingLeft: "6px" },
+          });
+          sendExtensionRuntimeMessage({ command: "updateFocusedFieldData", focusedFieldData });
+
+          sendExtensionRuntimeMessage({
+            command: "updateAutofillOverlayPosition",
+            overlayElement: AutofillOverlayElement.Button,
+          });
+
+          expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
+            command: "updateIframePosition",
+            styles: { height: "2px", left: "-18px", top: "2px", width: "2px" },
+          });
+        });
+
+        it("will post a message to the overlay list facilitating an update of the list's position", () => {
+          const focusedFieldData = createFocusedFieldDataMock();
+          sendExtensionRuntimeMessage({ command: "updateFocusedFieldData", focusedFieldData });
+
+          overlayBackground["updateOverlayPosition"]({
+            overlayElement: AutofillOverlayElement.List,
+          });
+          sendExtensionRuntimeMessage({
+            command: "updateAutofillOverlayPosition",
+            overlayElement: AutofillOverlayElement.List,
+          });
+
+          expect(listPortSpy.postMessage).toHaveBeenCalledWith({
+            command: "updateIframePosition",
+            styles: { left: "2px", top: "4px", width: "4px" },
+          });
+        });
+      });
+
+      describe("updateOverlayHidden", () => {
+        beforeEach(() => {
+          initOverlayElementPorts();
+        });
+
+        it("returns early if the display value is not provided", () => {
+          const message = {
+            command: "updateAutofillOverlayHidden",
+          };
+
+          sendExtensionRuntimeMessage(message);
+
+          expect(buttonPortSpy.postMessage).not.toHaveBeenCalledWith(message);
+          expect(listPortSpy.postMessage).not.toHaveBeenCalledWith(message);
+        });
+
+        it("posts a message to the overlay button and list with the display value", () => {
+          const message = { command: "updateAutofillOverlayHidden", display: "none" };
+
+          sendExtensionRuntimeMessage(message);
+
+          expect(overlayBackground["overlayButtonPort"].postMessage).toHaveBeenCalledWith({
+            command: "updateOverlayHidden",
+            styles: {
+              display: message.display,
+            },
+          });
+          expect(overlayBackground["overlayListPort"].postMessage).toHaveBeenCalledWith({
+            command: "updateOverlayHidden",
+            styles: {
+              display: message.display,
+            },
+          });
+        });
+      });
+
+      describe("collectPageDetailsResponse message handler", () => {
+        let sender: chrome.runtime.MessageSender;
+        const pageDetails1 = createAutofillPageDetailsMock({
+          login: { username: "username1", password: "password1" },
+        });
+        const pageDetails2 = createAutofillPageDetailsMock({
+          login: { username: "username2", password: "password2" },
+        });
+
+        beforeEach(() => {
+          sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
+        });
+
+        it("stores the page details provided by the message by the tab id of the sender", () => {
+          sendExtensionRuntimeMessage(
+            { command: "collectPageDetailsResponse", details: pageDetails1 },
+            sender
+          );
+
+          expect(overlayBackground["pageDetailsForTab"][sender.tab.id]).toStrictEqual([
+            { frameId: sender.frameId, tab: sender.tab, details: pageDetails1 },
+          ]);
+        });
+
+        it("updates the page details for a tab that already has a set of page details stored ", () => {
+          overlayBackground["pageDetailsForTab"][sender.tab.id] = [
+            {
+              frameId: sender.frameId,
+              tab: sender.tab,
+              details: pageDetails1,
+            },
+          ];
+
+          sendExtensionRuntimeMessage(
+            { command: "collectPageDetailsResponse", details: pageDetails2 },
+            sender
+          );
+
+          expect(overlayBackground["pageDetailsForTab"][sender.tab.id]).toStrictEqual([
+            { frameId: sender.frameId, tab: sender.tab, details: pageDetails1 },
+            { frameId: sender.frameId, tab: sender.tab, details: pageDetails2 },
+          ]);
+        });
+      });
+
+      describe("unlockCompleted message handler", () => {
+        let getAuthStatusSpy: jest.SpyInstance;
+
+        beforeEach(() => {
+          overlayBackground["userAuthStatus"] = AuthenticationStatus.LoggedOut;
+          jest.spyOn(BrowserApi, "tabSendMessageData");
+          getAuthStatusSpy = jest
+            .spyOn(overlayBackground as any, "getAuthStatus")
+            .mockImplementation(() => {
+              overlayBackground["userAuthStatus"] = AuthenticationStatus.Unlocked;
+              return Promise.resolve(AuthenticationStatus.Unlocked);
+            });
+        });
+
+        it("updates the user's auth status but does not open the overlay", async () => {
+          const message = {
+            command: "unlockCompleted",
+            data: {
+              commandToRetry: { msg: { command: "" } },
+            },
+          };
+
+          sendExtensionRuntimeMessage(message);
+          await flushPromises();
+
+          expect(getAuthStatusSpy).toHaveBeenCalled();
+          expect(BrowserApi.tabSendMessageData).not.toHaveBeenCalled();
+        });
+
+        it("updates user's auth status and opens the overlay if a follow up command is provided", async () => {
+          const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
+          const message = {
+            command: "unlockCompleted",
+            data: {
+              commandToRetry: { msg: { command: "openAutofillOverlay" } },
+            },
+          };
+          jest.spyOn(BrowserApi, "getTabFromCurrentWindowId").mockResolvedValueOnce(sender.tab);
+
+          sendExtensionRuntimeMessage(message);
+          await flushPromises();
+
+          expect(getAuthStatusSpy).toHaveBeenCalled();
+          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
+            sender.tab,
+            "openAutofillOverlay",
+            {
+              isFocusingFieldElement: true,
+              isOpeningFullOverlay: false,
+              authStatus: AuthenticationStatus.Unlocked,
+            }
+          );
+        });
+      });
+
+      describe("addEditCipherSubmitted message handler", () => {
+        it("updates the overlay ciphers", () => {
+          const message = {
+            command: "addEditCipherSubmitted",
+          };
+          jest.spyOn(overlayBackground as any, "updateOverlayCiphers").mockImplementation();
+
+          sendExtensionRuntimeMessage(message);
+
+          expect(overlayBackground["updateOverlayCiphers"]).toHaveBeenCalled();
+        });
+      });
+
+      describe("deletedCipher message handler", () => {
+        it("updates the overlay ciphers", () => {
+          const message = {
+            command: "deletedCipher",
+          };
+          jest.spyOn(overlayBackground as any, "updateOverlayCiphers").mockImplementation();
+
+          sendExtensionRuntimeMessage(message);
+
+          expect(overlayBackground["updateOverlayCiphers"]).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+
+  describe("handlePortOnConnect", () => {
+    beforeEach(() => {
+      jest.spyOn(overlayBackground as any, "updateOverlayPosition").mockImplementation();
+      jest.spyOn(overlayBackground as any, "getAuthStatus").mockImplementation();
+      jest.spyOn(overlayBackground as any, "getTranslations").mockImplementation();
+      jest.spyOn(overlayBackground as any, "getOverlayCipherData").mockImplementation();
+    });
+
+    it("skips setting up the overlay port if the port connection is not for an overlay element", () => {
+      const port = createPortSpyMock("not-an-overlay-element");
+
+      overlayBackground["handlePortOnConnect"](port);
+
+      expect(port.onMessage.addListener).not.toHaveBeenCalled();
+      expect(port.postMessage).not.toHaveBeenCalled();
+    });
+
+    it("sets up the overlay list port if the port connection is for the overlay list", async () => {
+      initOverlayElementPorts({ initList: true, initButton: false });
+      await flushPromises();
+
+      expect(overlayBackground["overlayButtonPort"]).toBeUndefined();
+      expect(listPortSpy.onMessage.addListener).toHaveBeenCalled();
+      expect(listPortSpy.postMessage).toHaveBeenCalled();
+      expect(overlayBackground["getAuthStatus"]).toHaveBeenCalled();
+      expect(chrome.runtime.getURL).toHaveBeenCalledWith("overlay/list.css");
+      expect(overlayBackground["getTranslations"]).toHaveBeenCalled();
+      expect(overlayBackground["getOverlayCipherData"]).toHaveBeenCalled();
+      expect(overlayBackground["updateOverlayPosition"]).toHaveBeenCalledWith({
+        overlayElement: AutofillOverlayElement.List,
+      });
+    });
+
+    it("sets up the overlay button port if the port connection is for the overlay button", async () => {
+      initOverlayElementPorts({ initList: false, initButton: true });
+      await flushPromises();
+
+      expect(overlayBackground["overlayListPort"]).toBeUndefined();
+      expect(buttonPortSpy.onMessage.addListener).toHaveBeenCalled();
+      expect(buttonPortSpy.postMessage).toHaveBeenCalled();
+      expect(overlayBackground["getAuthStatus"]).toHaveBeenCalled();
+      expect(chrome.runtime.getURL).toHaveBeenCalledWith("overlay/button.css");
+      expect(overlayBackground["getTranslations"]).toHaveBeenCalled();
+      expect(overlayBackground["updateOverlayPosition"]).toHaveBeenCalledWith({
+        overlayElement: AutofillOverlayElement.Button,
+      });
+    });
+
+    it("gets the system theme", async () => {
+      jest.spyOn(overlayBackground["stateService"], "getTheme").mockResolvedValue(ThemeType.System);
+      window.matchMedia = jest.fn(() => mock<MediaQueryList>({ matches: true }));
+
+      initOverlayElementPorts({ initList: true, initButton: false });
+      await flushPromises();
+
+      expect(window.matchMedia).toHaveBeenCalledWith("(prefers-color-scheme: dark)");
+    });
+  });
+
+  describe("handleOverlayElementPortMessage", () => {
+    beforeEach(() => {
+      initOverlayElementPorts();
+      overlayBackground["userAuthStatus"] = AuthenticationStatus.Unlocked;
+    });
+
+    it("ignores port messages that do not contain a handler", () => {
+      jest.spyOn(overlayBackground as any, "checkOverlayButtonFocused").mockImplementation();
+
+      sendPortMessage(buttonPortSpy, { command: "checkAutofillOverlayButtonFocused" });
+
+      expect(overlayBackground["checkOverlayButtonFocused"]).not.toHaveBeenCalled();
+    });
+
+    describe("overlay button message handlers", () => {
+      it("unlocks the vault if the user auth status is not unlocked", () => {
+        overlayBackground["userAuthStatus"] = AuthenticationStatus.LoggedOut;
+        jest.spyOn(overlayBackground as any, "unlockVault").mockImplementation();
+
+        sendPortMessage(buttonPortSpy, { command: "overlayButtonClicked" });
+
+        expect(overlayBackground["unlockVault"]).toHaveBeenCalled();
+      });
+
+      it("opens the autofill overlay if the auth status is unlocked", () => {
+        jest.spyOn(overlayBackground as any, "openOverlay").mockImplementation();
+
+        sendPortMessage(buttonPortSpy, { command: "overlayButtonClicked" });
+
+        expect(overlayBackground["openOverlay"]).toHaveBeenCalled();
+      });
+
+      describe("closeAutofillOverlay", () => {
+        it("sends a `closeOverlay` message to the sender tab", () => {
+          jest.spyOn(BrowserApi, "tabSendMessage");
+
+          sendPortMessage(buttonPortSpy, { command: "closeAutofillOverlay" });
+
+          expect(BrowserApi.tabSendMessage).toHaveBeenCalledWith(buttonPortSpy.sender.tab, {
+            command: "closeAutofillOverlay",
+          });
+        });
+      });
+
+      describe("overlayPageBlurred", () => {
+        it("checks if the overlay list is focused", () => {
+          jest.spyOn(overlayBackground as any, "checkOverlayListFocused");
+
+          sendPortMessage(buttonPortSpy, { command: "overlayPageBlurred" });
+
+          expect(overlayBackground["checkOverlayListFocused"]).toHaveBeenCalled();
+        });
+      });
+
+      describe("redirectOverlayFocusOut", () => {
+        beforeEach(() => {
+          jest.spyOn(BrowserApi, "tabSendMessageData");
+        });
+
+        it("ignores the redirect message if the direction is not provided", () => {
+          sendPortMessage(buttonPortSpy, { command: "redirectOverlayFocusOut" });
+
+          expect(BrowserApi.tabSendMessageData).not.toHaveBeenCalled();
+        });
+
+        it("sends the redirect message if the direction is provided", () => {
+          sendPortMessage(buttonPortSpy, {
+            command: "redirectOverlayFocusOut",
+            direction: RedirectFocusDirection.Next,
+          });
+
+          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
+            buttonPortSpy.sender.tab,
+            "redirectOverlayFocusOut",
+            { direction: RedirectFocusDirection.Next }
+          );
+        });
+      });
+    });
+
+    describe("overlay list message handlers", () => {
+      describe("checkAutofillOverlayButtonFocused", () => {
+        it("checks on the focus state of the overlay button", () => {
+          jest.spyOn(overlayBackground as any, "checkOverlayButtonFocused").mockImplementation();
+
+          sendPortMessage(listPortSpy, { command: "checkAutofillOverlayButtonFocused" });
+
+          expect(overlayBackground["checkOverlayButtonFocused"]).toHaveBeenCalled();
+        });
+      });
+
+      describe("overlayPageBlurred", () => {
+        it("checks on the focus state of the overlay button", () => {
+          jest.spyOn(overlayBackground as any, "checkOverlayButtonFocused").mockImplementation();
+
+          sendPortMessage(listPortSpy, { command: "overlayPageBlurred" });
+
+          expect(overlayBackground["checkOverlayButtonFocused"]).toHaveBeenCalled();
+        });
+      });
+
+      describe("unlockVault", () => {
+        it("closes the autofill overlay and opens the unlock popout", async () => {
+          jest.spyOn(overlayBackground as any, "closeOverlay").mockImplementation();
+          jest.spyOn(overlayBackground as any, "openUnlockPopout").mockImplementation();
+          jest.spyOn(BrowserApi, "tabSendMessageData").mockImplementation();
+
+          sendPortMessage(listPortSpy, { command: "unlockVault" });
+          await flushPromises();
+
+          expect(overlayBackground["closeOverlay"]).toHaveBeenCalledWith(listPortSpy);
+          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
+            listPortSpy.sender.tab,
+            "addToLockedVaultPendingNotifications",
+            {
+              commandToRetry: {
+                msg: { command: "openAutofillOverlay" },
+                sender: listPortSpy.sender,
+              },
+              target: "overlay.background",
+            }
+          );
+          expect(overlayBackground["openUnlockPopout"]).toHaveBeenCalledWith(
+            listPortSpy.sender.tab,
+            true
+          );
+        });
+      });
+
+      describe("fillSelectedListItem", () => {
+        let getLoginCiphersSpy: jest.SpyInstance;
+        let isPasswordRepromptRequiredSpy: jest.SpyInstance;
+        let doAutoFillSpy: jest.SpyInstance;
+
+        beforeEach(() => {
+          getLoginCiphersSpy = jest.spyOn(overlayBackground["overlayLoginCiphers"], "get");
+          isPasswordRepromptRequiredSpy = jest.spyOn(
+            overlayBackground["autofillService"],
+            "isPasswordRepromptRequired"
+          );
+          doAutoFillSpy = jest.spyOn(overlayBackground["autofillService"], "doAutoFill");
+        });
+
+        it("ignores the fill request if the overlay cipher id is not provided", async () => {
+          sendPortMessage(listPortSpy, { command: "fillSelectedListItem" });
+          await flushPromises();
+
+          expect(getLoginCiphersSpy).not.toHaveBeenCalled();
+          expect(isPasswordRepromptRequiredSpy).not.toHaveBeenCalled();
+          expect(doAutoFillSpy).not.toHaveBeenCalled();
+        });
+
+        it("ignores the fill request if a master password reprompt is required", async () => {
+          const cipher = mock<CipherView>({
+            reprompt: CipherRepromptType.Password,
+            type: CipherType.Login,
+          });
+          overlayBackground["overlayLoginCiphers"] = new Map([["overlay-cipher-1", cipher]]);
+          getLoginCiphersSpy = jest.spyOn(overlayBackground["overlayLoginCiphers"], "get");
+          isPasswordRepromptRequiredSpy.mockResolvedValue(true);
+
+          sendPortMessage(listPortSpy, {
+            command: "fillSelectedListItem",
+            overlayCipherId: "overlay-cipher-1",
+          });
+          await flushPromises();
+
+          expect(getLoginCiphersSpy).toHaveBeenCalled();
+          expect(isPasswordRepromptRequiredSpy).toHaveBeenCalledWith(
+            cipher,
+            listPortSpy.sender.tab
+          );
+          expect(doAutoFillSpy).not.toHaveBeenCalled();
+        });
+
+        it("auto-fills the selected cipher and move it to the top of the front of the ciphers map", async () => {
+          const cipher1 = mock<CipherView>({ id: "overlay-cipher-1" });
+          const cipher2 = mock<CipherView>({ id: "overlay-cipher-2" });
+          const cipher3 = mock<CipherView>({ id: "overlay-cipher-3" });
+          overlayBackground["overlayLoginCiphers"] = new Map([
+            ["overlay-cipher-1", cipher1],
+            ["overlay-cipher-2", cipher2],
+            ["overlay-cipher-3", cipher3],
+          ]);
+          isPasswordRepromptRequiredSpy.mockResolvedValue(false);
+
+          sendPortMessage(listPortSpy, {
+            command: "fillSelectedListItem",
+            overlayCipherId: "overlay-cipher-2",
+          });
+          await flushPromises();
+
+          expect(isPasswordRepromptRequiredSpy).toHaveBeenCalledWith(
+            cipher2,
+            listPortSpy.sender.tab
+          );
+          expect(doAutoFillSpy).toHaveBeenCalledWith({
+            tab: listPortSpy.sender.tab,
+            cipher: cipher2,
+            pageDetails: undefined,
+            fillNewPassword: true,
+            allowTotpAutofill: true,
+          });
+          expect(overlayBackground["overlayLoginCiphers"].entries()).toStrictEqual(
+            new Map([
+              ["overlay-cipher-2", cipher2],
+              ["overlay-cipher-1", cipher1],
+              ["overlay-cipher-3", cipher3],
+            ]).entries()
+          );
+        });
+      });
+
+      describe("getNewVaultItemDetails", () => {
+        it("will send an addNewVaultItemFromOverlay message", async () => {
+          jest.spyOn(BrowserApi, "tabSendMessage");
+
+          sendPortMessage(listPortSpy, { command: "addNewVaultItem" });
+          await flushPromises();
+
+          expect(BrowserApi.tabSendMessage).toHaveBeenCalledWith(listPortSpy.sender.tab, {
+            command: "addNewVaultItemFromOverlay",
+          });
+        });
+      });
+
+      describe("viewSelectedCipher", () => {
+        let openViewVaultItemPopoutSpy: jest.SpyInstance;
+
+        beforeEach(() => {
+          openViewVaultItemPopoutSpy = jest
+            .spyOn(overlayBackground as any, "openViewVaultItemPopout")
+            .mockImplementation();
+        });
+
+        it("returns early if the passed cipher ID does not match one of the overlay login ciphers", async () => {
+          overlayBackground["overlayLoginCiphers"] = new Map([
+            ["overlay-cipher-0", mock<CipherView>({ id: "overlay-cipher-0" })],
+          ]);
+
+          sendPortMessage(listPortSpy, {
+            command: "viewSelectedCipher",
+            overlayCipherId: "overlay-cipher-1",
+          });
+          await flushPromises();
+
+          expect(openViewVaultItemPopoutSpy).not.toHaveBeenCalled();
+        });
+
+        it("will open the view vault item popout with the selected cipher", async () => {
+          const cipher = mock<CipherView>({ id: "overlay-cipher-1" });
+          overlayBackground["overlayLoginCiphers"] = new Map([
+            ["overlay-cipher-0", mock<CipherView>({ id: "overlay-cipher-0" })],
+            ["overlay-cipher-1", cipher],
+          ]);
+
+          sendPortMessage(listPortSpy, {
+            command: "viewSelectedCipher",
+            overlayCipherId: "overlay-cipher-1",
+          });
+          await flushPromises();
+
+          expect(overlayBackground["openViewVaultItemPopout"]).toHaveBeenCalledWith(
+            listPortSpy.sender.tab,
+            {
+              cipherId: cipher.id,
+              action: SHOW_AUTOFILL_BUTTON,
+            }
+          );
+        });
+      });
+
+      describe("redirectOverlayFocusOut", () => {
+        it("redirects focus out of the overlay list", async () => {
+          const message = {
+            command: "redirectOverlayFocusOut",
+            direction: RedirectFocusDirection.Next,
+          };
+          const redirectOverlayFocusOutSpy = jest.spyOn(
+            overlayBackground as any,
+            "redirectOverlayFocusOut"
+          );
+
+          sendPortMessage(listPortSpy, message);
+          await flushPromises();
+
+          expect(redirectOverlayFocusOutSpy).toHaveBeenCalledWith(message, listPortSpy);
+        });
+      });
+    });
+  });
+});
diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts
new file mode 100644
index 00000000000..b80974eda2e
--- /dev/null
+++ b/apps/browser/src/autofill/background/overlay.background.ts
@@ -0,0 +1,766 @@
+import { SettingsService } from "@bitwarden/common/abstractions/settings.service";
+import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+import { ThemeType } from "@bitwarden/common/enums";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
+import { buildCipherIcon } from "@bitwarden/common/vault/icon/build-cipher-icon";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
+import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
+
+import { openUnlockPopout } from "../../auth/popup/utils/auth-popout-window";
+import LockedVaultPendingNotificationsItem from "../../background/models/lockedVaultPendingNotificationsItem";
+import { BrowserApi } from "../../platform/browser/browser-api";
+import {
+  openViewVaultItemPopout,
+  openAddEditVaultItemPopout,
+} from "../../vault/popup/utils/vault-popout-window";
+import { SHOW_AUTOFILL_BUTTON } from "../constants";
+import { AutofillService, PageDetail } from "../services/abstractions/autofill.service";
+import { AutofillOverlayElement, AutofillOverlayPort } from "../utils/autofill-overlay.enum";
+
+import {
+  FocusedFieldData,
+  OverlayBackgroundExtensionMessageHandlers,
+  OverlayButtonPortMessageHandlers,
+  OverlayCipherData,
+  OverlayListPortMessageHandlers,
+  OverlayBackground as OverlayBackgroundInterface,
+  OverlayBackgroundExtensionMessage,
+  OverlayAddNewItemMessage,
+  OverlayPortMessage,
+  WebsiteIconData,
+} from "./abstractions/overlay.background";
+
+class OverlayBackground implements OverlayBackgroundInterface {
+  private readonly openUnlockPopout = openUnlockPopout;
+  private readonly openViewVaultItemPopout = openViewVaultItemPopout;
+  private readonly openAddEditVaultItemPopout = openAddEditVaultItemPopout;
+  private overlayVisibility: number;
+  private overlayLoginCiphers: Map<string, CipherView> = new Map();
+  private pageDetailsForTab: Record<number, PageDetail[]> = {};
+  private userAuthStatus: AuthenticationStatus = AuthenticationStatus.LoggedOut;
+  private overlayButtonPort: chrome.runtime.Port;
+  private overlayListPort: chrome.runtime.Port;
+  private focusedFieldData: FocusedFieldData;
+  private overlayPageTranslations: Record<string, string>;
+  private readonly iconsServerUrl: string;
+  private readonly extensionMessageHandlers: OverlayBackgroundExtensionMessageHandlers = {
+    openAutofillOverlay: () => this.openOverlay(false),
+    autofillOverlayElementClosed: ({ message }) => this.overlayElementClosed(message),
+    autofillOverlayAddNewVaultItem: ({ message, sender }) => this.addNewVaultItem(message, sender),
+    getAutofillOverlayVisibility: () => this.getOverlayVisibility(),
+    checkAutofillOverlayFocused: () => this.checkOverlayFocused(),
+    focusAutofillOverlayList: () => this.focusOverlayList(),
+    updateAutofillOverlayPosition: ({ message }) => this.updateOverlayPosition(message),
+    updateAutofillOverlayHidden: ({ message }) => this.updateOverlayHidden(message),
+    updateFocusedFieldData: ({ message }) => this.setFocusedFieldData(message),
+    collectPageDetailsResponse: ({ message, sender }) => this.storePageDetails(message, sender),
+    unlockCompleted: ({ message }) => this.unlockCompleted(message),
+    addEditCipherSubmitted: () => this.updateOverlayCiphers(),
+    deletedCipher: () => this.updateOverlayCiphers(),
+  };
+  private readonly overlayButtonPortMessageHandlers: OverlayButtonPortMessageHandlers = {
+    overlayButtonClicked: ({ port }) => this.handleOverlayButtonClicked(port),
+    closeAutofillOverlay: ({ port }) => this.closeOverlay(port),
+    overlayPageBlurred: () => this.checkOverlayListFocused(),
+    redirectOverlayFocusOut: ({ message, port }) => this.redirectOverlayFocusOut(message, port),
+  };
+  private readonly overlayListPortMessageHandlers: OverlayListPortMessageHandlers = {
+    checkAutofillOverlayButtonFocused: () => this.checkOverlayButtonFocused(),
+    overlayPageBlurred: () => this.checkOverlayButtonFocused(),
+    unlockVault: ({ port }) => this.unlockVault(port),
+    fillSelectedListItem: ({ message, port }) => this.fillSelectedOverlayListItem(message, port),
+    addNewVaultItem: ({ port }) => this.getNewVaultItemDetails(port),
+    viewSelectedCipher: ({ message, port }) => this.viewSelectedCipher(message, port),
+    redirectOverlayFocusOut: ({ message, port }) => this.redirectOverlayFocusOut(message, port),
+  };
+
+  constructor(
+    private cipherService: CipherService,
+    private autofillService: AutofillService,
+    private authService: AuthService,
+    private environmentService: EnvironmentService,
+    private settingsService: SettingsService,
+    private stateService: StateService,
+    private i18nService: I18nService
+  ) {
+    this.iconsServerUrl = this.environmentService.getIconsUrl();
+  }
+
+  /**
+   * Removes cached page details for a tab
+   * based on the passed tabId.
+   *
+   * @param tabId - Used to reference the page details of a specific tab
+   */
+  removePageDetails(tabId: number) {
+    delete this.pageDetailsForTab[tabId];
+  }
+
+  /**
+   * Sets up the extension message listeners and gets the settings for the
+   * overlay's visibility and the user's authentication status.
+   */
+  async init() {
+    this.setupExtensionMessageListeners();
+    await this.getOverlayVisibility();
+    await this.getAuthStatus();
+  }
+
+  /**
+   * Updates the overlay list's ciphers and sends the updated list to the overlay list iframe.
+   * Queries all ciphers for the given url, and sorts them by last used. Will not update the
+   * list of ciphers if the extension is not unlocked.
+   */
+  async updateOverlayCiphers() {
+    if (this.userAuthStatus !== AuthenticationStatus.Unlocked) {
+      return;
+    }
+
+    const currentTab = await BrowserApi.getTabFromCurrentWindowId();
+    if (!currentTab?.url) {
+      return;
+    }
+
+    this.overlayLoginCiphers = new Map();
+    const ciphersViews = (await this.cipherService.getAllDecryptedForUrl(currentTab.url)).sort(
+      (a, b) => this.cipherService.sortCiphersByLastUsedThenName(a, b)
+    );
+    for (let cipherIndex = 0; cipherIndex < ciphersViews.length; cipherIndex++) {
+      this.overlayLoginCiphers.set(`overlay-cipher-${cipherIndex}`, ciphersViews[cipherIndex]);
+    }
+
+    const ciphers = this.getOverlayCipherData();
+    this.overlayListPort?.postMessage({ command: "updateOverlayListCiphers", ciphers });
+    await BrowserApi.tabSendMessageData(currentTab, "updateIsOverlayCiphersPopulated", {
+      isOverlayCiphersPopulated: Boolean(ciphers.length),
+    });
+  }
+
+  /**
+   * Strips out unnecessary data from the ciphers and returns an array of
+   * objects that contain the cipher data needed for the overlay list.
+   */
+  private getOverlayCipherData(): OverlayCipherData[] {
+    const isFaviconDisabled = this.settingsService.getDisableFavicon();
+    const overlayCiphersArray = Array.from(this.overlayLoginCiphers);
+    const overlayCipherData = [];
+    let loginCipherIcon: WebsiteIconData;
+
+    for (let cipherIndex = 0; cipherIndex < overlayCiphersArray.length; cipherIndex++) {
+      const [overlayCipherId, cipher] = overlayCiphersArray[cipherIndex];
+      if (!loginCipherIcon && cipher.type === CipherType.Login) {
+        loginCipherIcon = buildCipherIcon(this.iconsServerUrl, cipher, isFaviconDisabled);
+      }
+
+      overlayCipherData.push({
+        id: overlayCipherId,
+        name: cipher.name,
+        type: cipher.type,
+        reprompt: cipher.reprompt,
+        favorite: cipher.favorite,
+        icon:
+          cipher.type === CipherType.Login
+            ? loginCipherIcon
+            : buildCipherIcon(this.iconsServerUrl, cipher, isFaviconDisabled),
+        login:
+          cipher.type === CipherType.Login
+            ? { username: this.obscureName(cipher.login.username) }
+            : null,
+        card: cipher.type === CipherType.Card ? cipher.card.subTitle : null,
+      });
+    }
+
+    return overlayCipherData;
+  }
+
+  /**
+   * Handles aggregation of page details for a tab. Stores the page details
+   * in association with the tabId of the tab that sent the message.
+   *
+   * @param message - Message received from the `collectPageDetailsResponse` command
+   * @param sender - The sender of the message
+   */
+  private storePageDetails(
+    message: OverlayBackgroundExtensionMessage,
+    sender: chrome.runtime.MessageSender
+  ) {
+    const pageDetails = {
+      frameId: sender.frameId,
+      tab: sender.tab,
+      details: message.details,
+    };
+
+    if (this.pageDetailsForTab[sender.tab.id]?.length) {
+      this.pageDetailsForTab[sender.tab.id].push(pageDetails);
+      return;
+    }
+
+    this.pageDetailsForTab[sender.tab.id] = [pageDetails];
+  }
+
+  /**
+   * Triggers autofill for the selected cipher in the overlay list. Also places
+   * the selected cipher at the top of the list of ciphers.
+   *
+   * @param overlayCipherId - Cipher ID corresponding to the overlayLoginCiphers map. Does not correspond to the actual cipher's ID.
+   * @param sender - The sender of the port message
+   */
+  private async fillSelectedOverlayListItem(
+    { overlayCipherId }: OverlayPortMessage,
+    { sender }: chrome.runtime.Port
+  ) {
+    if (!overlayCipherId) {
+      return;
+    }
+
+    const cipher = this.overlayLoginCiphers.get(overlayCipherId);
+
+    if (await this.autofillService.isPasswordRepromptRequired(cipher, sender.tab)) {
+      return;
+    }
+    await this.autofillService.doAutoFill({
+      tab: sender.tab,
+      cipher: cipher,
+      pageDetails: this.pageDetailsForTab[sender.tab.id],
+      fillNewPassword: true,
+      allowTotpAutofill: true,
+    });
+
+    this.overlayLoginCiphers = new Map([[overlayCipherId, cipher], ...this.overlayLoginCiphers]);
+  }
+
+  /**
+   * Checks if the overlay is focused. Will check the overlay list
+   * if it is open, otherwise it will check the overlay button.
+   */
+  private checkOverlayFocused() {
+    if (this.overlayListPort) {
+      this.checkOverlayListFocused();
+
+      return;
+    }
+
+    this.checkOverlayButtonFocused();
+  }
+
+  /**
+   * Posts a message to the overlay button iframe to check if it is focused.
+   */
+  private checkOverlayButtonFocused() {
+    this.overlayButtonPort?.postMessage({ command: "checkAutofillOverlayButtonFocused" });
+  }
+
+  /**
+   * Posts a message to the overlay list iframe to check if it is focused.
+   */
+  private checkOverlayListFocused() {
+    this.overlayListPort?.postMessage({ command: "checkAutofillOverlayListFocused" });
+  }
+
+  /**
+   * Sends a message to the sender tab to close the autofill overlay.
+   *
+   * @param sender - The sender of the port message
+   */
+  private closeOverlay({ sender }: chrome.runtime.Port) {
+    BrowserApi.tabSendMessage(sender.tab, { command: "closeAutofillOverlay" });
+  }
+
+  /**
+   * Handles cleanup when an overlay element is closed. Disconnects
+   * the list and button ports and sets them to null.
+   *
+   * @param overlayElement - The overlay element that was closed, either the list or button
+   */
+  private overlayElementClosed({ overlayElement }: OverlayBackgroundExtensionMessage) {
+    if (overlayElement === AutofillOverlayElement.Button) {
+      this.overlayButtonPort?.disconnect();
+      this.overlayButtonPort = null;
+
+      return;
+    }
+
+    this.overlayListPort?.disconnect();
+    this.overlayListPort = null;
+  }
+
+  /**
+   * Updates the position of either the overlay list or button. The position
+   * is based on the focused field's position and dimensions.
+   *
+   * @param overlayElement - The overlay element to update, either the list or button
+   */
+  private updateOverlayPosition({ overlayElement }: { overlayElement?: string }) {
+    if (!overlayElement) {
+      return;
+    }
+
+    if (overlayElement === AutofillOverlayElement.Button) {
+      this.overlayButtonPort?.postMessage({
+        command: "updateIframePosition",
+        styles: this.getOverlayButtonPosition(),
+      });
+
+      return;
+    }
+
+    this.overlayListPort?.postMessage({
+      command: "updateIframePosition",
+      styles: this.getOverlayListPosition(),
+    });
+  }
+
+  /**
+   * Gets the position of the focused field and calculates the position
+   * of the overlay button based on the focused field's position and dimensions.
+   */
+  private getOverlayButtonPosition() {
+    if (!this.focusedFieldData) {
+      return;
+    }
+
+    const { top, left, width, height } = this.focusedFieldData.focusedFieldRects;
+    const { paddingRight, paddingLeft } = this.focusedFieldData.focusedFieldStyles;
+    let elementOffset = height * 0.37;
+    if (height >= 35) {
+      elementOffset = height >= 50 ? height * 0.47 : height * 0.42;
+    }
+
+    const elementHeight = height - elementOffset;
+    const elementTopPosition = top + elementOffset / 2;
+    let elementLeftPosition = left + width - height + elementOffset / 2;
+
+    const fieldPaddingRight = parseInt(paddingRight, 10);
+    const fieldPaddingLeft = parseInt(paddingLeft, 10);
+    if (fieldPaddingRight > fieldPaddingLeft) {
+      elementLeftPosition = left + width - height - (fieldPaddingRight - elementOffset + 2);
+    }
+
+    return {
+      top: `${Math.round(elementTopPosition)}px`,
+      left: `${Math.round(elementLeftPosition)}px`,
+      height: `${Math.round(elementHeight)}px`,
+      width: `${Math.round(elementHeight)}px`,
+    };
+  }
+
+  /**
+   * Gets the position of the focused field and calculates the position
+   * of the overlay list based on the focused field's position and dimensions.
+   */
+  private getOverlayListPosition() {
+    if (!this.focusedFieldData) {
+      return;
+    }
+
+    const { top, left, width, height } = this.focusedFieldData.focusedFieldRects;
+    return {
+      width: `${Math.round(width)}px`,
+      top: `${Math.round(top + height)}px`,
+      left: `${Math.round(left)}px`,
+    };
+  }
+
+  /**
+   * Sets the focused field data to the data passed in the extension message.
+   *
+   * @param focusedFieldData - Contains the rects and styles of the focused field.
+   */
+  private setFocusedFieldData({ focusedFieldData }: OverlayBackgroundExtensionMessage) {
+    this.focusedFieldData = focusedFieldData;
+  }
+
+  /**
+   * Updates the overlay's visibility based on the display property passed in the extension message.
+   *
+   * @param display - The display property of the overlay, either "block" or "none"
+   */
+  private updateOverlayHidden({ display }: OverlayBackgroundExtensionMessage) {
+    if (!display) {
+      return;
+    }
+
+    const portMessage = { command: "updateOverlayHidden", styles: { display } };
+
+    this.overlayButtonPort?.postMessage(portMessage);
+    this.overlayListPort?.postMessage(portMessage);
+  }
+
+  /**
+   * Sends a message to the currently active tab to open the autofill overlay.
+   *
+   * @param isFocusingFieldElement - Identifies whether the field element should be focused when the overlay is opened
+   * @param isOpeningFullOverlay - Identifies whether the full overlay should be forced open regardless of other states
+   */
+  private async openOverlay(isFocusingFieldElement = false, isOpeningFullOverlay = false) {
+    const currentTab = await BrowserApi.getTabFromCurrentWindowId();
+
+    await BrowserApi.tabSendMessageData(currentTab, "openAutofillOverlay", {
+      isFocusingFieldElement,
+      isOpeningFullOverlay,
+      authStatus: await this.getAuthStatus(),
+    });
+  }
+
+  /**
+   * Obscures the username by replacing all but the first and last characters with asterisks.
+   * If the username is less than 4 characters, only the first character will be shown.
+   * If the username is 6 or more characters, the first and last characters will be shown.
+   * The domain will not be obscured.
+   *
+   * @param name - The username to obscure
+   */
+  private obscureName(name: string): string {
+    if (!name) {
+      return "";
+    }
+
+    const [username, domain] = name.split("@");
+    const usernameLength = username?.length;
+    if (!usernameLength) {
+      return name;
+    }
+
+    const startingCharacters = username.slice(0, usernameLength > 4 ? 2 : 1);
+    let numberStars = usernameLength;
+    if (usernameLength > 4) {
+      numberStars = usernameLength < 6 ? numberStars - 1 : numberStars - 2;
+    }
+
+    let obscureName = `${startingCharacters}${new Array(numberStars).join("*")}`;
+    if (usernameLength >= 6) {
+      obscureName = `${obscureName}${username.slice(-1)}`;
+    }
+
+    return domain ? `${obscureName}@${domain}` : obscureName;
+  }
+
+  /**
+   * Gets the overlay's visibility setting from the settings service.
+   */
+  private async getOverlayVisibility(): Promise<number> {
+    this.overlayVisibility = await this.settingsService.getAutoFillOverlayVisibility();
+
+    return this.overlayVisibility;
+  }
+
+  /**
+   * Gets the user's authentication status from the auth service. If the user's
+   * authentication status has changed, the overlay button's authentication status
+   * will be updated and the overlay list's ciphers will be updated.
+   */
+  private async getAuthStatus() {
+    const formerAuthStatus = this.userAuthStatus;
+    this.userAuthStatus = await this.authService.getAuthStatus();
+
+    if (
+      this.userAuthStatus !== formerAuthStatus &&
+      this.userAuthStatus === AuthenticationStatus.Unlocked
+    ) {
+      this.updateOverlayButtonAuthStatus();
+      await this.updateOverlayCiphers();
+    }
+
+    return this.userAuthStatus;
+  }
+
+  /**
+   * Gets the currently set theme for the user.
+   */
+  private async getCurrentTheme() {
+    const theme = await this.stateService.getTheme();
+
+    if (theme !== ThemeType.System) {
+      return theme;
+    }
+
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? ThemeType.Dark
+      : ThemeType.Light;
+  }
+
+  /**
+   * Sends a message to the overlay button to update its authentication status.
+   */
+  private updateOverlayButtonAuthStatus() {
+    this.overlayButtonPort?.postMessage({
+      command: "updateOverlayButtonAuthStatus",
+      authStatus: this.userAuthStatus,
+    });
+  }
+
+  /**
+   * Handles the overlay button being clicked. If the user is not authenticated,
+   * the vault will be unlocked. If the user is authenticated, the overlay will
+   * be opened.
+   *
+   * @param port - The port of the overlay button
+   */
+  private handleOverlayButtonClicked(port: chrome.runtime.Port) {
+    if (this.userAuthStatus !== AuthenticationStatus.Unlocked) {
+      this.unlockVault(port);
+      return;
+    }
+
+    this.openOverlay(false, true);
+  }
+
+  /**
+   * Facilitates opening the unlock popout window.
+   *
+   * @param port - The port of the overlay list
+   */
+  private async unlockVault(port: chrome.runtime.Port) {
+    const { sender } = port;
+
+    this.closeOverlay(port);
+    const retryMessage: LockedVaultPendingNotificationsItem = {
+      commandToRetry: { msg: { command: "openAutofillOverlay" }, sender },
+      target: "overlay.background",
+    };
+    await BrowserApi.tabSendMessageData(
+      sender.tab,
+      "addToLockedVaultPendingNotifications",
+      retryMessage
+    );
+    await this.openUnlockPopout(sender.tab, true);
+  }
+
+  /**
+   * Triggers the opening of a vault item popout window associated
+   * with the passed cipher ID.
+   * @param overlayCipherId - Cipher ID corresponding to the overlayLoginCiphers map. Does not correspond to the actual cipher's ID.
+   * @param sender - The sender of the port message
+   */
+  private async viewSelectedCipher(
+    { overlayCipherId }: OverlayPortMessage,
+    { sender }: chrome.runtime.Port
+  ) {
+    const cipher = this.overlayLoginCiphers.get(overlayCipherId);
+    if (!cipher) {
+      return;
+    }
+
+    await this.openViewVaultItemPopout(sender.tab, {
+      cipherId: cipher.id,
+      action: SHOW_AUTOFILL_BUTTON,
+    });
+  }
+
+  /**
+   * Facilitates redirecting focus to the overlay list.
+   */
+  private focusOverlayList() {
+    this.overlayListPort?.postMessage({ command: "focusOverlayList" });
+  }
+
+  /**
+   * Updates the authentication status for the user and opens the overlay if
+   * a followup command is present in the message.
+   *
+   * @param message - Extension message received from the `unlockCompleted` command
+   */
+  private async unlockCompleted(message: OverlayBackgroundExtensionMessage) {
+    await this.getAuthStatus();
+
+    if (message.data?.commandToRetry?.msg?.command === "openAutofillOverlay") {
+      await this.openOverlay(true);
+    }
+  }
+
+  /**
+   * Gets the translations for the overlay page.
+   */
+  private getTranslations() {
+    if (!this.overlayPageTranslations) {
+      this.overlayPageTranslations = {
+        locale: BrowserApi.getUILanguage(),
+        opensInANewWindow: this.i18nService.translate("opensInANewWindow"),
+        buttonPageTitle: this.i18nService.translate("bitwardenOverlayButton"),
+        toggleBitwardenVaultOverlay: this.i18nService.translate("toggleBitwardenVaultOverlay"),
+        listPageTitle: this.i18nService.translate("bitwardenVault"),
+        unlockYourAccount: this.i18nService.translate("unlockYourAccountToViewMatchingLogins"),
+        unlockAccount: this.i18nService.translate("unlockAccount"),
+        fillCredentialsFor: this.i18nService.translate("fillCredentialsFor"),
+        partialUsername: this.i18nService.translate("partialUsername"),
+        view: this.i18nService.translate("view"),
+        noItemsToShow: this.i18nService.translate("noItemsToShow"),
+        newItem: this.i18nService.translate("newItem"),
+        addNewVaultItem: this.i18nService.translate("addNewVaultItem"),
+      };
+    }
+
+    return this.overlayPageTranslations;
+  }
+
+  /**
+   * Facilitates redirecting focus out of one of the
+   *  overlay elements to elements on the page.
+   *
+   * @param direction - The direction to redirect focus to (either "next", "previous" or "current)
+   * @param sender - The sender of the port message
+   */
+  private redirectOverlayFocusOut(
+    { direction }: OverlayPortMessage,
+    { sender }: chrome.runtime.Port
+  ) {
+    if (!direction) {
+      return;
+    }
+
+    BrowserApi.tabSendMessageData(sender.tab, "redirectOverlayFocusOut", { direction });
+  }
+
+  /**
+   * Triggers adding a new vault item from the overlay. Gathers data
+   * input by the user before calling to open the add/edit window.
+   *
+   * @param sender - The sender of the port message
+   */
+  private getNewVaultItemDetails({ sender }: chrome.runtime.Port) {
+    BrowserApi.tabSendMessage(sender.tab, { command: "addNewVaultItemFromOverlay" });
+  }
+
+  /**
+   * Handles adding a new vault item from the overlay. Gathers data login
+   * data captured in the extension message.
+   *
+   * @param login - The login data captured from the extension message
+   * @param sender - The sender of the extension message
+   */
+  private async addNewVaultItem(
+    { login }: OverlayAddNewItemMessage,
+    sender: chrome.runtime.MessageSender
+  ) {
+    if (!login) {
+      return;
+    }
+
+    const uriView = new LoginUriView();
+    uriView.uri = login.uri;
+
+    const loginView = new LoginView();
+    loginView.uris = [uriView];
+    loginView.username = login.username || "";
+    loginView.password = login.password || "";
+
+    const cipherView = new CipherView();
+    cipherView.name = (Utils.getHostname(login.uri) || login.hostname).replace(/^www\./, "");
+    cipherView.folderId = null;
+    cipherView.type = CipherType.Login;
+    cipherView.login = loginView;
+
+    await this.stateService.setAddEditCipherInfo({
+      cipher: cipherView,
+      collectionIds: cipherView.collectionIds,
+    });
+
+    await this.openAddEditVaultItemPopout(sender.tab, { cipherId: cipherView.id });
+  }
+
+  /**
+   * Sets up the extension message listeners for the overlay.
+   */
+  private setupExtensionMessageListeners() {
+    BrowserApi.messageListener("overlay.background", this.handleExtensionMessage);
+    chrome.runtime.onConnect.addListener(this.handlePortOnConnect);
+  }
+
+  /**
+   * Handles extension messages sent to the extension background.
+   *
+   * @param message - The message received from the extension
+   * @param sender - The sender of the message
+   * @param sendResponse - The response to send back to the sender
+   */
+  private handleExtensionMessage = (
+    message: OverlayBackgroundExtensionMessage,
+    sender: chrome.runtime.MessageSender,
+    sendResponse: (response?: any) => void
+  ) => {
+    const handler: CallableFunction | undefined = this.extensionMessageHandlers[message?.command];
+    if (!handler) {
+      return;
+    }
+
+    const messageResponse = handler({ message, sender });
+    if (!messageResponse) {
+      return;
+    }
+
+    Promise.resolve(messageResponse).then((response) => sendResponse(response));
+    return true;
+  };
+
+  /**
+   * Handles the connection of a port to the extension background.
+   *
+   * @param port - The port that connected to the extension background
+   */
+  private handlePortOnConnect = async (port: chrome.runtime.Port) => {
+    const isOverlayListPort = port.name === AutofillOverlayPort.List;
+    const isOverlayButtonPort = port.name === AutofillOverlayPort.Button;
+
+    if (!isOverlayListPort && !isOverlayButtonPort) {
+      return;
+    }
+
+    if (isOverlayListPort) {
+      this.overlayListPort = port;
+    } else {
+      this.overlayButtonPort = port;
+    }
+
+    port.onMessage.addListener(this.handleOverlayElementPortMessage);
+    port.postMessage({
+      command: `initAutofillOverlay${isOverlayListPort ? "List" : "Button"}`,
+      authStatus: await this.getAuthStatus(),
+      styleSheetUrl: chrome.runtime.getURL(`overlay/${isOverlayListPort ? "list" : "button"}.css`),
+      theme: `theme_${await this.getCurrentTheme()}`,
+      translations: this.getTranslations(),
+      ciphers: isOverlayListPort ? this.getOverlayCipherData() : null,
+    });
+    this.updateOverlayPosition({
+      overlayElement: isOverlayListPort
+        ? AutofillOverlayElement.List
+        : AutofillOverlayElement.Button,
+    });
+  };
+
+  /**
+   * Handles messages sent to the overlay list or button ports.
+   *
+   * @param message - The message received from the port
+   * @param port - The port that sent the message
+   */
+  private handleOverlayElementPortMessage = (
+    message: OverlayBackgroundExtensionMessage,
+    port: chrome.runtime.Port
+  ) => {
+    const command = message?.command;
+    let handler: CallableFunction | undefined;
+
+    if (port.name === AutofillOverlayPort.Button) {
+      handler = this.overlayButtonPortMessageHandlers[command];
+    }
+
+    if (port.name === AutofillOverlayPort.List) {
+      handler = this.overlayListPortMessageHandlers[command];
+    }
+
+    if (!handler) {
+      return;
+    }
+
+    handler({ message, port });
+  };
+}
+
+export default OverlayBackground;
diff --git a/apps/browser/src/autofill/background/tabs.background.spec.ts b/apps/browser/src/autofill/background/tabs.background.spec.ts
new file mode 100644
index 00000000000..e320f22248e
--- /dev/null
+++ b/apps/browser/src/autofill/background/tabs.background.spec.ts
@@ -0,0 +1,238 @@
+import { mock } from "jest-mock-extended";
+
+import MainBackground from "../../background/main.background";
+import {
+  flushPromises,
+  triggerTabOnActivatedEvent,
+  triggerTabOnRemovedEvent,
+  triggerTabOnReplacedEvent,
+  triggerTabOnUpdatedEvent,
+  triggerWindowOnFocusedChangedEvent,
+} from "../jest/testing-utils";
+
+import NotificationBackground from "./notification.background";
+import OverlayBackground from "./overlay.background";
+import TabsBackground from "./tabs.background";
+
+describe("TabsBackground", () => {
+  let tabsBackgorund: TabsBackground;
+  const mainBackground = mock<MainBackground>({
+    messagingService: {
+      send: jest.fn(),
+    },
+  });
+  const notificationBackground = mock<NotificationBackground>();
+  const overlayBackground = mock<OverlayBackground>();
+
+  beforeEach(() => {
+    tabsBackgorund = new TabsBackground(mainBackground, notificationBackground, overlayBackground);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("init", () => {
+    it("sets up a window on focusChanged listener", () => {
+      const handleWindowOnFocusChangedSpy = jest.spyOn(
+        tabsBackgorund as any,
+        "handleWindowOnFocusChanged"
+      );
+
+      tabsBackgorund.init();
+
+      expect(chrome.windows.onFocusChanged.addListener).toHaveBeenCalledWith(
+        handleWindowOnFocusChangedSpy
+      );
+    });
+  });
+
+  describe("tab event listeners", () => {
+    beforeEach(() => {
+      tabsBackgorund.init();
+    });
+
+    describe("window onFocusChanged event", () => {
+      it("ignores focus change events that do not contain a windowId", async () => {
+        triggerWindowOnFocusedChangedEvent(undefined);
+        await flushPromises();
+
+        expect(mainBackground.messagingService.send).not.toHaveBeenCalled();
+      });
+
+      it("sets the local focusedWindowId property", async () => {
+        triggerWindowOnFocusedChangedEvent(10);
+        await flushPromises();
+
+        expect(tabsBackgorund["focusedWindowId"]).toBe(10);
+      });
+
+      it("updates the current tab data", async () => {
+        triggerWindowOnFocusedChangedEvent(10);
+        await flushPromises();
+
+        expect(mainBackground.refreshBadge).toHaveBeenCalled();
+        expect(mainBackground.refreshMenu).toHaveBeenCalled();
+        expect(overlayBackground.updateOverlayCiphers).toHaveBeenCalled();
+      });
+
+      it("sends a `windowChanged` message", async () => {
+        triggerWindowOnFocusedChangedEvent(10);
+        await flushPromises();
+
+        expect(mainBackground.messagingService.send).toHaveBeenCalledWith("windowChanged");
+      });
+    });
+
+    describe("handleTabOnActivated", () => {
+      it("updates the current tab data", async () => {
+        triggerTabOnActivatedEvent({ tabId: 10, windowId: 20 });
+        await flushPromises();
+
+        expect(mainBackground.refreshBadge).toHaveBeenCalled();
+        expect(mainBackground.refreshMenu).toHaveBeenCalled();
+        expect(overlayBackground.updateOverlayCiphers).toHaveBeenCalled();
+      });
+
+      it("sends a `tabChanged` message to the messaging service", async () => {
+        triggerTabOnActivatedEvent({ tabId: 10, windowId: 20 });
+        await flushPromises();
+
+        expect(mainBackground.messagingService.send).toHaveBeenCalledWith("tabChanged");
+      });
+    });
+
+    describe("handleTabOnReplaced", () => {
+      beforeEach(() => {
+        mainBackground.onReplacedRan = false;
+      });
+
+      it("ignores the event if the `onReplacedRan` property of the main background class is set to `true`", () => {
+        mainBackground.onReplacedRan = true;
+
+        triggerTabOnReplacedEvent(10, 20);
+
+        expect(notificationBackground.checkNotificationQueue).not.toHaveBeenCalled();
+      });
+
+      it("checks the notification queue", () => {
+        triggerTabOnReplacedEvent(10, 20);
+
+        expect(notificationBackground.checkNotificationQueue).toHaveBeenCalled();
+      });
+
+      it("updates the current tab data", async () => {
+        triggerTabOnReplacedEvent(10, 20);
+        await flushPromises();
+
+        expect(mainBackground.refreshBadge).toHaveBeenCalled();
+        expect(mainBackground.refreshMenu).toHaveBeenCalled();
+        expect(overlayBackground.updateOverlayCiphers).toHaveBeenCalled();
+      });
+
+      it("sends a `tabChanged` message to the messaging service", async () => {
+        triggerTabOnReplacedEvent(10, 20);
+        await flushPromises();
+
+        expect(mainBackground.messagingService.send).toHaveBeenCalledWith("tabChanged");
+      });
+    });
+
+    describe("handleTabOnUpdated", () => {
+      const focusedWindowId = 10;
+      let tab: chrome.tabs.Tab;
+
+      beforeEach(() => {
+        mainBackground.onUpdatedRan = false;
+        tabsBackgorund["focusedWindowId"] = focusedWindowId;
+        tab = mock<chrome.tabs.Tab>({
+          windowId: focusedWindowId,
+          active: true,
+          status: "loading",
+        });
+      });
+
+      it("removes the cached page details from the overlay background if the tab status is `loading`", () => {
+        triggerTabOnUpdatedEvent(focusedWindowId, { status: "loading" }, tab);
+
+        expect(overlayBackground.removePageDetails).toHaveBeenCalledWith(focusedWindowId);
+      });
+
+      it("removes the cached page details from the overlay background if the tab status is `unloaded`", () => {
+        triggerTabOnUpdatedEvent(focusedWindowId, { status: "unloaded" }, tab);
+
+        expect(overlayBackground.removePageDetails).toHaveBeenCalledWith(focusedWindowId);
+      });
+
+      it("skips updating the current tab data the focusedWindowId is set to a value less than zero", async () => {
+        tab.windowId = -1;
+        triggerTabOnUpdatedEvent(focusedWindowId, { status: "loading" }, tab);
+        await flushPromises();
+
+        expect(mainBackground.refreshBadge).not.toHaveBeenCalled();
+        expect(mainBackground.refreshMenu).not.toHaveBeenCalled();
+        expect(overlayBackground.updateOverlayCiphers).not.toHaveBeenCalled();
+      });
+
+      it("skips updating the current tab data if the updated tab is not for the focusedWindowId", async () => {
+        tab.windowId = 20;
+        triggerTabOnUpdatedEvent(focusedWindowId, { status: "loading" }, tab);
+        await flushPromises();
+
+        expect(mainBackground.refreshBadge).not.toHaveBeenCalled();
+        expect(mainBackground.refreshMenu).not.toHaveBeenCalled();
+        expect(overlayBackground.updateOverlayCiphers).not.toHaveBeenCalled();
+      });
+
+      it("skips updating the current tab data if the updated tab is not active", async () => {
+        tab.active = false;
+        triggerTabOnUpdatedEvent(focusedWindowId, { status: "loading" }, tab);
+        await flushPromises();
+
+        expect(mainBackground.refreshBadge).not.toHaveBeenCalled();
+        expect(mainBackground.refreshMenu).not.toHaveBeenCalled();
+        expect(overlayBackground.updateOverlayCiphers).not.toHaveBeenCalled();
+      });
+
+      it("skips updating the badge, context menu and notification bar if the `onUpdatedRan` property of the main background class is set to `true`", async () => {
+        mainBackground.onUpdatedRan = true;
+        triggerTabOnUpdatedEvent(focusedWindowId, { status: "loading" }, tab);
+        await flushPromises();
+
+        expect(mainBackground.refreshBadge).not.toHaveBeenCalled();
+        expect(mainBackground.refreshMenu).not.toHaveBeenCalled();
+      });
+
+      it("checks the notification queue", async () => {
+        triggerTabOnUpdatedEvent(focusedWindowId, { status: "loading" }, tab);
+        await flushPromises();
+
+        expect(notificationBackground.checkNotificationQueue).toHaveBeenCalled();
+      });
+
+      it("updates the current tab data", async () => {
+        triggerTabOnUpdatedEvent(focusedWindowId, { status: "loading" }, tab);
+        await flushPromises();
+
+        expect(mainBackground.refreshBadge).toHaveBeenCalled();
+        expect(mainBackground.refreshMenu).toHaveBeenCalled();
+        expect(overlayBackground.updateOverlayCiphers).toHaveBeenCalled();
+      });
+
+      it("sends a `tabChanged` message to the messaging service", async () => {
+        triggerTabOnUpdatedEvent(focusedWindowId, { status: "loading" }, tab);
+        await flushPromises();
+
+        expect(mainBackground.messagingService.send).toHaveBeenCalledWith("tabChanged");
+      });
+    });
+
+    describe("handleTabOnRemoved", () => {
+      it("removes the cached overlay page details", () => {
+        triggerTabOnRemovedEvent(10, { windowId: 20, isWindowClosing: false });
+
+        expect(overlayBackground.removePageDetails).toHaveBeenCalledWith(10);
+      });
+    });
+  });
+});
diff --git a/apps/browser/src/autofill/background/tabs.background.ts b/apps/browser/src/autofill/background/tabs.background.ts
index 0655fd23b62..c47ef76f665 100644
--- a/apps/browser/src/autofill/background/tabs.background.ts
+++ b/apps/browser/src/autofill/background/tabs.background.ts
@@ -1,69 +1,123 @@
 import MainBackground from "../../background/main.background";
 
 import NotificationBackground from "./notification.background";
+import OverlayBackground from "./overlay.background";
 
 export default class TabsBackground {
   constructor(
     private main: MainBackground,
-    private notificationBackground: NotificationBackground
+    private notificationBackground: NotificationBackground,
+    private overlayBackground: OverlayBackground
   ) {}
 
   private focusedWindowId: number;
 
+  /**
+   * Initializes the window and tab listeners.
+   */
   async init() {
     if (!chrome.tabs || !chrome.windows) {
       return;
     }
 
-    chrome.windows.onFocusChanged.addListener(async (windowId: number) => {
-      if (windowId === null || windowId < 0) {
-        return;
-      }
-
-      this.focusedWindowId = windowId;
-      await this.main.refreshBadge();
-      await this.main.refreshMenu();
-      this.main.messagingService.send("windowChanged");
-    });
-
-    chrome.tabs.onActivated.addListener(async (activeInfo: chrome.tabs.TabActiveInfo) => {
-      await this.main.refreshBadge();
-      await this.main.refreshMenu();
-      this.main.messagingService.send("tabChanged");
-    });
-
-    chrome.tabs.onReplaced.addListener(async (addedTabId: number, removedTabId: number) => {
-      if (this.main.onReplacedRan) {
-        return;
-      }
-      this.main.onReplacedRan = true;
-
-      await this.notificationBackground.checkNotificationQueue();
-      await this.main.refreshBadge();
-      await this.main.refreshMenu();
-      this.main.messagingService.send("tabChanged");
-    });
-
-    chrome.tabs.onUpdated.addListener(
-      async (tabId: number, changeInfo: chrome.tabs.TabChangeInfo, tab: chrome.tabs.Tab) => {
-        if (this.focusedWindowId > 0 && tab.windowId != this.focusedWindowId) {
-          return;
-        }
-
-        if (!tab.active) {
-          return;
-        }
-
-        if (this.main.onUpdatedRan) {
-          return;
-        }
-        this.main.onUpdatedRan = true;
-
-        await this.notificationBackground.checkNotificationQueue(tab);
-        await this.main.refreshBadge();
-        await this.main.refreshMenu();
-        this.main.messagingService.send("tabChanged");
-      }
-    );
+    chrome.windows.onFocusChanged.addListener(this.handleWindowOnFocusChanged);
+    chrome.tabs.onActivated.addListener(this.handleTabOnActivated);
+    chrome.tabs.onReplaced.addListener(this.handleTabOnReplaced);
+    chrome.tabs.onUpdated.addListener(this.handleTabOnUpdated);
+    chrome.tabs.onRemoved.addListener(this.handleTabOnRemoved);
   }
+
+  /**
+   * Handles the window onFocusChanged event.
+   *
+   * @param windowId - The ID of the window that was focused.
+   */
+  private handleWindowOnFocusChanged = async (windowId: number) => {
+    if (!windowId) {
+      return;
+    }
+
+    this.focusedWindowId = windowId;
+    await this.updateCurrentTabData();
+    this.main.messagingService.send("windowChanged");
+  };
+
+  /**
+   * Handles the tab onActivated event.
+   */
+  private handleTabOnActivated = async () => {
+    await this.updateCurrentTabData();
+    this.main.messagingService.send("tabChanged");
+  };
+
+  /**
+   * Handles the tab onReplaced event.
+   */
+  private handleTabOnReplaced = async () => {
+    if (this.main.onReplacedRan) {
+      return;
+    }
+    this.main.onReplacedRan = true;
+
+    await this.notificationBackground.checkNotificationQueue();
+    await this.updateCurrentTabData();
+    this.main.messagingService.send("tabChanged");
+  };
+
+  /**
+   * Handles the tab onUpdated event.
+   *
+   * @param tabId - The ID of the tab that was updated.
+   * @param changeInfo - The change information.
+   * @param tab - The updated tab.
+   */
+  private handleTabOnUpdated = async (
+    tabId: number,
+    changeInfo: chrome.tabs.TabChangeInfo,
+    tab: chrome.tabs.Tab
+  ) => {
+    const removePageDetailsStatus = new Set(["loading", "unloaded"]);
+    if (removePageDetailsStatus.has(changeInfo.status)) {
+      this.overlayBackground.removePageDetails(tabId);
+    }
+
+    if (this.focusedWindowId > 0 && tab.windowId !== this.focusedWindowId) {
+      return;
+    }
+
+    if (!tab.active) {
+      return;
+    }
+
+    await this.overlayBackground.updateOverlayCiphers();
+
+    if (this.main.onUpdatedRan) {
+      return;
+    }
+    this.main.onUpdatedRan = true;
+
+    await this.notificationBackground.checkNotificationQueue(tab);
+    await this.main.refreshBadge();
+    await this.main.refreshMenu();
+    this.main.messagingService.send("tabChanged");
+  };
+
+  /**
+   * Handles the tab onRemoved event.
+   *
+   * @param tabId - The ID of the tab that was removed.
+   */
+  private handleTabOnRemoved = async (tabId: number) => {
+    this.overlayBackground.removePageDetails(tabId);
+  };
+
+  /**
+   * Updates the current tab data, refreshing the badge and context menu
+   * for the current tab. Also updates the overlay ciphers.
+   */
+  private updateCurrentTabData = async () => {
+    await this.main.refreshBadge();
+    await this.main.refreshMenu();
+    await this.overlayBackground.updateOverlayCiphers();
+  };
 }
diff --git a/apps/browser/src/autofill/browser/context-menu-clicked-handler.spec.ts b/apps/browser/src/autofill/browser/context-menu-clicked-handler.spec.ts
index 5c6b5e07da3..f1b2fe3339e 100644
--- a/apps/browser/src/autofill/browser/context-menu-clicked-handler.spec.ts
+++ b/apps/browser/src/autofill/browser/context-menu-clicked-handler.spec.ts
@@ -15,7 +15,7 @@ import {
   AUTOFILL_ID,
   COPY_PASSWORD_ID,
   COPY_USERNAME_ID,
-  COPY_VERIFICATIONCODE_ID,
+  COPY_VERIFICATION_CODE_ID,
   GENERATE_PASSWORD_ID,
   NOOP_COMMAND_SUFFIX,
 } from "../constants";
@@ -165,7 +165,7 @@ describe("ContextMenuClickedHandler", () => {
         return Promise.resolve("654321");
       });
 
-      await sut.run(createData(`${COPY_VERIFICATIONCODE_ID}_1`, COPY_VERIFICATIONCODE_ID), {
+      await sut.run(createData(`${COPY_VERIFICATION_CODE_ID}_1`, COPY_VERIFICATION_CODE_ID), {
         url: "https://test.com",
       } as any);
 
diff --git a/apps/browser/src/autofill/browser/context-menu-clicked-handler.ts b/apps/browser/src/autofill/browser/context-menu-clicked-handler.ts
index e7f57a46869..a2e139fbee8 100644
--- a/apps/browser/src/autofill/browser/context-menu-clicked-handler.ts
+++ b/apps/browser/src/autofill/browser/context-menu-clicked-handler.ts
@@ -44,7 +44,7 @@ import {
   COPY_IDENTIFIER_ID,
   COPY_PASSWORD_ID,
   COPY_USERNAME_ID,
-  COPY_VERIFICATIONCODE_ID,
+  COPY_VERIFICATION_CODE_ID,
   CREATE_CARD_ID,
   CREATE_IDENTITY_ID,
   CREATE_LOGIN_ID,
@@ -281,7 +281,7 @@ export class ContextMenuClickedHandler {
         }
 
         break;
-      case COPY_VERIFICATIONCODE_ID:
+      case COPY_VERIFICATION_CODE_ID:
         if (menuItemId === CREATE_LOGIN_ID) {
           await openAddEditVaultItemPopout(tab, { cipherType: CipherType.Login });
           break;
@@ -290,7 +290,7 @@ export class ContextMenuClickedHandler {
         if (await this.isPasswordRepromptRequired(cipher)) {
           await openVaultItemPasswordRepromptPopout(tab, {
             cipherId: cipher.id,
-            action: COPY_VERIFICATIONCODE_ID,
+            action: COPY_VERIFICATION_CODE_ID,
           });
         } else {
           this.copyToClipboard({
diff --git a/apps/browser/src/autofill/browser/main-context-menu-handler.ts b/apps/browser/src/autofill/browser/main-context-menu-handler.ts
index cc5cc9a5166..20e176cf5c4 100644
--- a/apps/browser/src/autofill/browser/main-context-menu-handler.ts
+++ b/apps/browser/src/autofill/browser/main-context-menu-handler.ts
@@ -28,7 +28,7 @@ import {
   COPY_IDENTIFIER_ID,
   COPY_PASSWORD_ID,
   COPY_USERNAME_ID,
-  COPY_VERIFICATIONCODE_ID,
+  COPY_VERIFICATION_CODE_ID,
   CREATE_CARD_ID,
   CREATE_IDENTITY_ID,
   CREATE_LOGIN_ID,
@@ -139,7 +139,7 @@ export class MainContextMenuHandler {
 
       if (await this.stateService.getCanAccessPremium()) {
         await create({
-          id: COPY_VERIFICATIONCODE_ID,
+          id: COPY_VERIFICATION_CODE_ID,
           parentId: ROOT_ID,
           title: this.i18nService.t("copyVerificationCode"),
         });
@@ -250,7 +250,7 @@ export class MainContextMenuHandler {
 
       const canAccessPremium = await this.stateService.getCanAccessPremium();
       if (canAccessPremium && (!cipher || !Utils.isNullOrEmpty(cipher.login?.totp))) {
-        await createChildItem(COPY_VERIFICATIONCODE_ID);
+        await createChildItem(COPY_VERIFICATION_CODE_ID);
       }
 
       if ((!cipher || cipher.type === CipherType.Card) && optionId !== CREATE_LOGIN_ID) {
diff --git a/apps/browser/src/autofill/constants.ts b/apps/browser/src/autofill/constants.ts
index c07d829f723..2c361723ad2 100644
--- a/apps/browser/src/autofill/constants.ts
+++ b/apps/browser/src/autofill/constants.ts
@@ -10,16 +10,27 @@ export const EVENTS = {
   KEYDOWN: "keydown",
   KEYPRESS: "keypress",
   KEYUP: "keyup",
+  BLUR: "blur",
+  CLICK: "click",
+  FOCUS: "focus",
+  SCROLL: "scroll",
+  RESIZE: "resize",
+  DOMCONTENTLOADED: "DOMContentLoaded",
+  LOAD: "load",
+  MESSAGE: "message",
+  VISIBILITYCHANGE: "visibilitychange",
+  FOCUSOUT: "focusout",
 } as const;
 
 /* Context Menu item Ids */
 export const AUTOFILL_CARD_ID = "autofill-card";
 export const AUTOFILL_ID = "autofill";
+export const SHOW_AUTOFILL_BUTTON = "show-autofill-button";
 export const AUTOFILL_IDENTITY_ID = "autofill-identity";
 export const COPY_IDENTIFIER_ID = "copy-identifier";
 export const COPY_PASSWORD_ID = "copy-password";
 export const COPY_USERNAME_ID = "copy-username";
-export const COPY_VERIFICATIONCODE_ID = "copy-totp";
+export const COPY_VERIFICATION_CODE_ID = "copy-totp";
 export const CREATE_CARD_ID = "create-card";
 export const CREATE_IDENTITY_ID = "create-identity";
 export const CREATE_LOGIN_ID = "create-login";
diff --git a/apps/browser/src/autofill/content/abstractions/autofill-init.ts b/apps/browser/src/autofill/content/abstractions/autofill-init.ts
index 24a04d16707..e15cac15331 100644
--- a/apps/browser/src/autofill/content/abstractions/autofill-init.ts
+++ b/apps/browser/src/autofill/content/abstractions/autofill-init.ts
@@ -1,3 +1,5 @@
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+
 import AutofillScript from "../../models/autofill-script";
 
 type AutofillExtensionMessage = {
@@ -7,13 +9,30 @@ type AutofillExtensionMessage = {
   fillScript?: AutofillScript;
   url?: string;
   pageDetailsUrl?: string;
+  ciphers?: any;
+  data?: {
+    authStatus?: AuthenticationStatus;
+    isFocusingFieldElement?: boolean;
+    isOverlayCiphersPopulated?: boolean;
+    direction?: "previous" | "next";
+    isOpeningFullOverlay?: boolean;
+  };
 };
 
+type AutofillExtensionMessageParam = { message: AutofillExtensionMessage };
+
 type AutofillExtensionMessageHandlers = {
   [key: string]: CallableFunction;
-  collectPageDetails: (message: { message: AutofillExtensionMessage }) => void;
-  collectPageDetailsImmediately: (message: { message: AutofillExtensionMessage }) => void;
-  fillForm: (message: { message: AutofillExtensionMessage }) => void;
+  collectPageDetails: ({ message }: AutofillExtensionMessageParam) => void;
+  collectPageDetailsImmediately: ({ message }: AutofillExtensionMessageParam) => void;
+  fillForm: ({ message }: AutofillExtensionMessageParam) => void;
+  openAutofillOverlay: ({ message }: AutofillExtensionMessageParam) => void;
+  closeAutofillOverlay: () => void;
+  addNewVaultItemFromOverlay: () => void;
+  redirectOverlayFocusOut: ({ message }: AutofillExtensionMessageParam) => void;
+  updateIsOverlayCiphersPopulated: ({ message }: AutofillExtensionMessageParam) => void;
+  bgUnlockPopoutOpened: () => void;
+  bgVaultItemRepromptPopoutOpened: () => void;
 };
 
 interface AutofillInit {
diff --git a/apps/browser/src/autofill/content/autofill-init.spec.ts b/apps/browser/src/autofill/content/autofill-init.spec.ts
index d808984be68..93614970ec5 100644
--- a/apps/browser/src/autofill/content/autofill-init.spec.ts
+++ b/apps/browser/src/autofill/content/autofill-init.spec.ts
@@ -1,16 +1,22 @@
 import { mock } from "jest-mock-extended";
 
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+
+import { flushPromises, sendExtensionRuntimeMessage } from "../jest/testing-utils";
 import AutofillPageDetails from "../models/autofill-page-details";
 import AutofillScript from "../models/autofill-script";
+import AutofillOverlayContentService from "../services/autofill-overlay-content.service";
+import { RedirectFocusDirection } from "../utils/autofill-overlay.enum";
 
 import { AutofillExtensionMessage } from "./abstractions/autofill-init";
+import AutofillInit from "./autofill-init";
 
 describe("AutofillInit", () => {
-  let bitwardenAutofillInit: any;
+  let autofillInit: AutofillInit;
+  const autofillOverlayContentService = mock<AutofillOverlayContentService>();
 
   beforeEach(() => {
-    require("../content/autofill-init");
-    bitwardenAutofillInit = window.bitwardenAutofillInit;
+    autofillInit = new AutofillInit(autofillOverlayContentService);
   });
 
   afterEach(() => {
@@ -20,93 +26,11 @@ describe("AutofillInit", () => {
 
   describe("init", () => {
     it("sets up the extension message listeners", () => {
-      jest.spyOn(bitwardenAutofillInit, "setupExtensionMessageListeners");
+      jest.spyOn(autofillInit as any, "setupExtensionMessageListeners");
 
-      bitwardenAutofillInit.init();
+      autofillInit.init();
 
-      expect(bitwardenAutofillInit.setupExtensionMessageListeners).toHaveBeenCalled();
-    });
-  });
-
-  describe("collectPageDetails", () => {
-    let extensionMessage: AutofillExtensionMessage;
-    let pageDetails: AutofillPageDetails;
-
-    beforeEach(() => {
-      extensionMessage = {
-        command: "collectPageDetails",
-        tab: mock<chrome.tabs.Tab>(),
-        sender: "sender",
-      };
-      pageDetails = {
-        title: "title",
-        url: "http://example.com",
-        documentUrl: "documentUrl",
-        forms: {},
-        fields: [],
-        collectedTimestamp: 0,
-      };
-      jest
-        .spyOn(bitwardenAutofillInit.collectAutofillContentService, "getPageDetails")
-        .mockReturnValue(pageDetails);
-    });
-
-    it("returns collected page details for autofill if set to send the details in the response", async () => {
-      const response = await bitwardenAutofillInit["collectPageDetails"](extensionMessage, true);
-
-      expect(bitwardenAutofillInit.collectAutofillContentService.getPageDetails).toHaveBeenCalled();
-      expect(response).toEqual(pageDetails);
-    });
-
-    it("sends the collected page details for autofill using a background script message", async () => {
-      jest.spyOn(chrome.runtime, "sendMessage");
-
-      await bitwardenAutofillInit["collectPageDetails"](extensionMessage);
-
-      expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
-        command: "collectPageDetailsResponse",
-        tab: extensionMessage.tab,
-        details: pageDetails,
-        sender: extensionMessage.sender,
-      });
-    });
-  });
-
-  describe("fillForm", () => {
-    beforeEach(() => {
-      jest
-        .spyOn(bitwardenAutofillInit.insertAutofillContentService, "fillForm")
-        .mockImplementation();
-    });
-
-    it("skips calling the InsertAutofillContentService and does not fill the form if the url to fill is not equal to the current tab url", () => {
-      const fillScript = mock<AutofillScript>();
-      const message = {
-        command: "fillForm",
-        fillScript,
-        pageDetailsUrl: "https://a-different-url.com",
-      };
-
-      bitwardenAutofillInit.fillForm(message);
-
-      expect(bitwardenAutofillInit.insertAutofillContentService.fillForm).not.toHaveBeenCalledWith(
-        fillScript
-      );
-    });
-
-    it("will call the InsertAutofillContentService to fill the form", () => {
-      const fillScript = mock<AutofillScript>();
-      const message = {
-        command: "fillForm",
-        fillScript,
-        pageDetailsUrl: window.location.href,
-      };
-
-      bitwardenAutofillInit.fillForm(message);
-
-      expect(bitwardenAutofillInit.insertAutofillContentService.fillForm).toHaveBeenCalledWith(
-        fillScript
-      );
+      expect(autofillInit["setupExtensionMessageListeners"]).toHaveBeenCalled();
     });
   });
 
@@ -114,10 +38,10 @@ describe("AutofillInit", () => {
     it("sets up a chrome runtime on message listener", () => {
       jest.spyOn(chrome.runtime.onMessage, "addListener");
 
-      bitwardenAutofillInit["setupExtensionMessageListeners"]();
+      autofillInit["setupExtensionMessageListeners"]();
 
       expect(chrome.runtime.onMessage.addListener).toHaveBeenCalledWith(
-        bitwardenAutofillInit["handleExtensionMessage"]
+        autofillInit["handleExtensionMessage"]
       );
     });
   });
@@ -136,38 +60,27 @@ describe("AutofillInit", () => {
       sender = mock<chrome.runtime.MessageSender>();
     });
 
-    it("returns a false value if a extension message handler is not found with the given message command", () => {
+    it("returns a undefined value if a extension message handler is not found with the given message command", () => {
       message.command = "unknownCommand";
 
-      const response = bitwardenAutofillInit["handleExtensionMessage"](
-        message,
-        sender,
-        sendResponse
-      );
+      const response = autofillInit["handleExtensionMessage"](message, sender, sendResponse);
 
-      expect(response).toBe(false);
+      expect(response).toBe(undefined);
     });
 
-    it("returns a false value if the message handler does not return a response", async () => {
-      const response1 = await bitwardenAutofillInit["handleExtensionMessage"](
-        message,
-        sender,
-        sendResponse
-      );
-      await Promise.resolve(response1);
+    it("returns a undefined value if the message handler does not return a response", async () => {
+      const response1 = await autofillInit["handleExtensionMessage"](message, sender, sendResponse);
+      await flushPromises();
 
       expect(response1).not.toBe(false);
 
-      message.command = "fillForm";
+      message.command = "removeAutofillOverlay";
       message.fillScript = mock<AutofillScript>();
 
-      const response2 = await bitwardenAutofillInit["handleExtensionMessage"](
-        message,
-        sender,
-        sendResponse
-      );
+      const response2 = autofillInit["handleExtensionMessage"](message, sender, sendResponse);
+      await flushPromises();
 
-      expect(response2).toBe(false);
+      expect(response2).toBe(undefined);
     });
 
     it("returns a true value and calls sendResponse if the message handler returns a response", async () => {
@@ -181,18 +94,365 @@ describe("AutofillInit", () => {
         collectedTimestamp: 0,
       };
       jest
-        .spyOn(bitwardenAutofillInit.collectAutofillContentService, "getPageDetails")
-        .mockReturnValue(pageDetails);
+        .spyOn(autofillInit["collectAutofillContentService"], "getPageDetails")
+        .mockResolvedValue(pageDetails);
 
-      const response = await bitwardenAutofillInit["handleExtensionMessage"](
-        message,
-        sender,
-        sendResponse
-      );
+      const response = await autofillInit["handleExtensionMessage"](message, sender, sendResponse);
       await Promise.resolve(response);
 
       expect(response).toBe(true);
       expect(sendResponse).toHaveBeenCalledWith(pageDetails);
     });
+
+    describe("extension message handlers", () => {
+      beforeEach(() => {
+        autofillInit.init();
+      });
+
+      describe("collectPageDetails", () => {
+        it("sends the collected page details for autofill using a background script message", async () => {
+          const pageDetails: AutofillPageDetails = {
+            title: "title",
+            url: "http://example.com",
+            documentUrl: "documentUrl",
+            forms: {},
+            fields: [],
+            collectedTimestamp: 0,
+          };
+          const message = {
+            command: "collectPageDetails",
+            sender: "sender",
+            tab: mock<chrome.tabs.Tab>(),
+          };
+          jest
+            .spyOn(autofillInit["collectAutofillContentService"], "getPageDetails")
+            .mockResolvedValue(pageDetails);
+
+          sendExtensionRuntimeMessage(message, sender, sendResponse);
+          await flushPromises();
+
+          expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
+            command: "collectPageDetailsResponse",
+            tab: message.tab,
+            details: pageDetails,
+            sender: message.sender,
+          });
+        });
+      });
+
+      describe("collectPageDetailsImmediately", () => {
+        it("returns collected page details for autofill if set to send the details in the response", async () => {
+          const pageDetails: AutofillPageDetails = {
+            title: "title",
+            url: "http://example.com",
+            documentUrl: "documentUrl",
+            forms: {},
+            fields: [],
+            collectedTimestamp: 0,
+          };
+          jest
+            .spyOn(autofillInit["collectAutofillContentService"], "getPageDetails")
+            .mockResolvedValue(pageDetails);
+
+          sendExtensionRuntimeMessage(
+            { command: "collectPageDetailsImmediately" },
+            sender,
+            sendResponse
+          );
+          await flushPromises();
+
+          expect(autofillInit["collectAutofillContentService"].getPageDetails).toHaveBeenCalled();
+          expect(sendResponse).toBeCalledWith(pageDetails);
+          expect(chrome.runtime.sendMessage).not.toHaveBeenCalled();
+        });
+      });
+
+      describe("fillForm", () => {
+        let fillScript: AutofillScript;
+        beforeEach(() => {
+          fillScript = mock<AutofillScript>();
+          jest.spyOn(autofillInit["insertAutofillContentService"], "fillForm").mockImplementation();
+        });
+
+        it("skips calling the InsertAutofillContentService and does not fill the form if the url to fill is not equal to the current tab url", async () => {
+          const fillScript = mock<AutofillScript>();
+          const message = {
+            command: "fillForm",
+            fillScript,
+            pageDetailsUrl: "https://a-different-url.com",
+          };
+
+          sendExtensionRuntimeMessage(message);
+          await flushPromises();
+
+          expect(autofillInit["insertAutofillContentService"].fillForm).not.toHaveBeenCalledWith(
+            fillScript
+          );
+        });
+
+        it("calls the InsertAutofillContentService to fill the form", async () => {
+          sendExtensionRuntimeMessage({
+            command: "fillForm",
+            fillScript,
+            pageDetailsUrl: window.location.href,
+          });
+          await flushPromises();
+
+          expect(autofillInit["insertAutofillContentService"].fillForm).toHaveBeenCalledWith(
+            fillScript
+          );
+        });
+
+        it("updates the isCurrentlyFilling properties of the overlay and focus the recent field after filling", async () => {
+          jest.useFakeTimers();
+          jest.spyOn(autofillInit as any, "updateOverlayIsCurrentlyFilling");
+          jest
+            .spyOn(autofillInit["autofillOverlayContentService"], "focusMostRecentOverlayField")
+            .mockImplementation();
+
+          sendExtensionRuntimeMessage({
+            command: "fillForm",
+            fillScript,
+            pageDetailsUrl: window.location.href,
+          });
+          await flushPromises();
+          jest.advanceTimersByTime(300);
+
+          expect(autofillInit["updateOverlayIsCurrentlyFilling"]).toHaveBeenNthCalledWith(1, true);
+          expect(autofillInit["insertAutofillContentService"].fillForm).toHaveBeenCalledWith(
+            fillScript
+          );
+          expect(autofillInit["updateOverlayIsCurrentlyFilling"]).toHaveBeenNthCalledWith(2, false);
+          expect(
+            autofillInit["autofillOverlayContentService"].focusMostRecentOverlayField
+          ).toHaveBeenCalled();
+        });
+
+        it("skips attempting to focus the most recent field if the autofillOverlayContentService is not present", async () => {
+          jest.useFakeTimers();
+          const newAutofillInit = new AutofillInit(undefined);
+          newAutofillInit.init();
+          jest.spyOn(newAutofillInit as any, "updateOverlayIsCurrentlyFilling");
+          jest
+            .spyOn(newAutofillInit["insertAutofillContentService"], "fillForm")
+            .mockImplementation();
+
+          sendExtensionRuntimeMessage({
+            command: "fillForm",
+            fillScript,
+            pageDetailsUrl: window.location.href,
+          });
+          await flushPromises();
+          jest.advanceTimersByTime(300);
+
+          expect(newAutofillInit["updateOverlayIsCurrentlyFilling"]).toHaveBeenNthCalledWith(
+            1,
+            true
+          );
+          expect(newAutofillInit["insertAutofillContentService"].fillForm).toHaveBeenCalledWith(
+            fillScript
+          );
+          expect(newAutofillInit["updateOverlayIsCurrentlyFilling"]).not.toHaveBeenNthCalledWith(
+            2,
+            false
+          );
+        });
+      });
+
+      describe("openAutofillOverlay", () => {
+        const message = {
+          command: "openAutofillOverlay",
+          data: {
+            isFocusingFieldElement: true,
+            isOpeningFullOverlay: true,
+            authStatus: AuthenticationStatus.Unlocked,
+          },
+        };
+
+        it("skips attempting to open the autofill overlay if the autofillOverlayContentService is not present", () => {
+          const newAutofillInit = new AutofillInit(undefined);
+          newAutofillInit.init();
+
+          sendExtensionRuntimeMessage(message);
+
+          expect(newAutofillInit["autofillOverlayContentService"]).toBe(undefined);
+        });
+
+        it("opens the autofill overlay", () => {
+          sendExtensionRuntimeMessage(message);
+
+          expect(
+            autofillInit["autofillOverlayContentService"].openAutofillOverlay
+          ).toHaveBeenCalledWith({
+            isFocusingFieldElement: message.data.isFocusingFieldElement,
+            isOpeningFullOverlay: message.data.isOpeningFullOverlay,
+            authStatus: message.data.authStatus,
+          });
+        });
+      });
+
+      describe("closeAutofillOverlay", () => {
+        beforeEach(() => {
+          autofillInit["autofillOverlayContentService"].isFieldCurrentlyFocused = false;
+          autofillInit["autofillOverlayContentService"].isCurrentlyFilling = false;
+        });
+
+        it("ignores the message if a field is currently focused", () => {
+          autofillInit["autofillOverlayContentService"].isFieldCurrentlyFocused = true;
+
+          sendExtensionRuntimeMessage({ command: "closeAutofillOverlay" });
+
+          expect(
+            autofillInit["autofillOverlayContentService"].removeAutofillOverlayList
+          ).not.toHaveBeenCalled();
+          expect(
+            autofillInit["autofillOverlayContentService"].removeAutofillOverlay
+          ).not.toHaveBeenCalled();
+        });
+
+        it("removes the autofill overlay list if the overlay is currently filling", () => {
+          autofillInit["autofillOverlayContentService"].isCurrentlyFilling = true;
+
+          sendExtensionRuntimeMessage({ command: "closeAutofillOverlay" });
+
+          expect(
+            autofillInit["autofillOverlayContentService"].removeAutofillOverlayList
+          ).toHaveBeenCalled();
+          expect(
+            autofillInit["autofillOverlayContentService"].removeAutofillOverlay
+          ).not.toHaveBeenCalled();
+        });
+
+        it("removes the entire overlay if the overlay is not currently filling", () => {
+          sendExtensionRuntimeMessage({ command: "closeAutofillOverlay" });
+
+          expect(
+            autofillInit["autofillOverlayContentService"].removeAutofillOverlayList
+          ).not.toHaveBeenCalled();
+          expect(
+            autofillInit["autofillOverlayContentService"].removeAutofillOverlay
+          ).toHaveBeenCalled();
+        });
+      });
+
+      describe("addNewVaultItemFromOverlay", () => {
+        it("will not add a new vault item if the autofillOverlayContentService is not present", () => {
+          const newAutofillInit = new AutofillInit(undefined);
+          newAutofillInit.init();
+
+          sendExtensionRuntimeMessage({ command: "addNewVaultItemFromOverlay" });
+
+          expect(newAutofillInit["autofillOverlayContentService"]).toBe(undefined);
+        });
+
+        it("will add a new vault item", () => {
+          sendExtensionRuntimeMessage({ command: "addNewVaultItemFromOverlay" });
+
+          expect(autofillInit["autofillOverlayContentService"].addNewVaultItem).toHaveBeenCalled();
+        });
+      });
+
+      describe("redirectOverlayFocusOut", () => {
+        const message = {
+          command: "redirectOverlayFocusOut",
+          data: {
+            direction: RedirectFocusDirection.Next,
+          },
+        };
+
+        it("ignores the message to redirect focus if the autofillOverlayContentService does not exist", () => {
+          const newAutofillInit = new AutofillInit(undefined);
+          newAutofillInit.init();
+
+          sendExtensionRuntimeMessage(message);
+
+          expect(newAutofillInit["autofillOverlayContentService"]).toBe(undefined);
+        });
+
+        it("redirects the overlay focus", () => {
+          sendExtensionRuntimeMessage(message);
+
+          expect(
+            autofillInit["autofillOverlayContentService"].redirectOverlayFocusOut
+          ).toHaveBeenCalledWith(message.data.direction);
+        });
+      });
+
+      describe("updateIsOverlayCiphersPopulated", () => {
+        const message = {
+          command: "updateIsOverlayCiphersPopulated",
+          data: {
+            isOverlayCiphersPopulated: true,
+          },
+        };
+
+        it("skips updating whether the ciphers are populated if the autofillOverlayContentService does note exist", () => {
+          const newAutofillInit = new AutofillInit(undefined);
+          newAutofillInit.init();
+
+          sendExtensionRuntimeMessage(message);
+
+          expect(newAutofillInit["autofillOverlayContentService"]).toBe(undefined);
+        });
+
+        it("updates whether the overlay ciphers are populated", () => {
+          sendExtensionRuntimeMessage(message);
+
+          expect(autofillInit["autofillOverlayContentService"].isOverlayCiphersPopulated).toEqual(
+            message.data.isOverlayCiphersPopulated
+          );
+        });
+      });
+
+      describe("bgUnlockPopoutOpened", () => {
+        it("skips attempting to blur and remove the overlay if the autofillOverlayContentService is not present", () => {
+          const newAutofillInit = new AutofillInit(undefined);
+          newAutofillInit.init();
+          jest.spyOn(newAutofillInit as any, "removeAutofillOverlay");
+
+          sendExtensionRuntimeMessage({ command: "bgUnlockPopoutOpened" });
+
+          expect(newAutofillInit["autofillOverlayContentService"]).toBe(undefined);
+          expect(newAutofillInit["removeAutofillOverlay"]).not.toHaveBeenCalled();
+        });
+
+        it("blurs the most recently focused feel and remove the autofill overlay", () => {
+          jest.spyOn(autofillInit["autofillOverlayContentService"], "blurMostRecentOverlayField");
+          jest.spyOn(autofillInit as any, "removeAutofillOverlay");
+
+          sendExtensionRuntimeMessage({ command: "bgUnlockPopoutOpened" });
+
+          expect(
+            autofillInit["autofillOverlayContentService"].blurMostRecentOverlayField
+          ).toHaveBeenCalled();
+          expect(autofillInit["removeAutofillOverlay"]).toHaveBeenCalled();
+        });
+      });
+
+      describe("bgVaultItemRepromptPopoutOpened", () => {
+        it("skips attempting to blur and remove the overlay if the autofillOverlayContentService is not present", () => {
+          const newAutofillInit = new AutofillInit(undefined);
+          newAutofillInit.init();
+          jest.spyOn(newAutofillInit as any, "removeAutofillOverlay");
+
+          sendExtensionRuntimeMessage({ command: "bgVaultItemRepromptPopoutOpened" });
+
+          expect(newAutofillInit["autofillOverlayContentService"]).toBe(undefined);
+          expect(newAutofillInit["removeAutofillOverlay"]).not.toHaveBeenCalled();
+        });
+
+        it("blurs the most recently focused feel and remove the autofill overlay", () => {
+          jest.spyOn(autofillInit["autofillOverlayContentService"], "blurMostRecentOverlayField");
+          jest.spyOn(autofillInit as any, "removeAutofillOverlay");
+
+          sendExtensionRuntimeMessage({ command: "bgVaultItemRepromptPopoutOpened" });
+
+          expect(
+            autofillInit["autofillOverlayContentService"].blurMostRecentOverlayField
+          ).toHaveBeenCalled();
+          expect(autofillInit["removeAutofillOverlay"]).toHaveBeenCalled();
+        });
+      });
+    });
   });
 });
diff --git a/apps/browser/src/autofill/content/autofill-init.ts b/apps/browser/src/autofill/content/autofill-init.ts
index 99c64b3779b..0bd04edee4b 100644
--- a/apps/browser/src/autofill/content/autofill-init.ts
+++ b/apps/browser/src/autofill/content/autofill-init.ts
@@ -1,4 +1,5 @@
 import AutofillPageDetails from "../models/autofill-page-details";
+import { AutofillOverlayContentService } from "../services/abstractions/autofill-overlay-content.service";
 import CollectAutofillContentService from "../services/collect-autofill-content.service";
 import DomElementVisibilityService from "../services/dom-element-visibility.service";
 import InsertAutofillContentService from "../services/insert-autofill-content.service";
@@ -10,6 +11,7 @@ import {
 } from "./abstractions/autofill-init";
 
 class AutofillInit implements AutofillInitInterface {
+  private readonly autofillOverlayContentService: AutofillOverlayContentService | undefined;
   private readonly domElementVisibilityService: DomElementVisibilityService;
   private readonly collectAutofillContentService: CollectAutofillContentService;
   private readonly insertAutofillContentService: InsertAutofillContentService;
@@ -17,16 +19,27 @@ class AutofillInit implements AutofillInitInterface {
     collectPageDetails: ({ message }) => this.collectPageDetails(message),
     collectPageDetailsImmediately: ({ message }) => this.collectPageDetails(message, true),
     fillForm: ({ message }) => this.fillForm(message),
+    openAutofillOverlay: ({ message }) => this.openAutofillOverlay(message),
+    closeAutofillOverlay: () => this.removeAutofillOverlay(),
+    addNewVaultItemFromOverlay: () => this.addNewVaultItemFromOverlay(),
+    redirectOverlayFocusOut: ({ message }) => this.redirectOverlayFocusOut(message),
+    updateIsOverlayCiphersPopulated: ({ message }) => this.updateIsOverlayCiphersPopulated(message),
+    bgUnlockPopoutOpened: () => this.blurAndRemoveOverlay(),
+    bgVaultItemRepromptPopoutOpened: () => this.blurAndRemoveOverlay(),
   };
 
   /**
    * AutofillInit constructor. Initializes the DomElementVisibilityService,
    * CollectAutofillContentService and InsertAutofillContentService classes.
+   *
+   * @param autofillOverlayContentService - The autofill overlay content service, potentially undefined.
    */
-  constructor() {
+  constructor(autofillOverlayContentService?: AutofillOverlayContentService) {
+    this.autofillOverlayContentService = autofillOverlayContentService;
     this.domElementVisibilityService = new DomElementVisibilityService();
     this.collectAutofillContentService = new CollectAutofillContentService(
-      this.domElementVisibilityService
+      this.domElementVisibilityService,
+      this.autofillOverlayContentService
     );
     this.insertAutofillContentService = new InsertAutofillContentService(
       this.domElementVisibilityService,
@@ -38,10 +51,10 @@ class AutofillInit implements AutofillInitInterface {
    * Initializes the autofill content script, setting up
    * the extension message listeners. This method should
    * be called once when the content script is loaded.
-   * @public
    */
   init() {
     this.setupExtensionMessageListeners();
+    this.autofillOverlayContentService?.init();
   }
 
   /**
@@ -50,10 +63,9 @@ class AutofillInit implements AutofillInitInterface {
    * parameter is set to true, the page details will be
    * returned to facilitate sending the details in the
    * response to the extension message.
-   * @param {AutofillExtensionMessage} message
-   * @param {boolean} sendDetailsInResponse
-   * @returns {AutofillPageDetails | void}
-   * @private
+   *
+   * @param message - The extension message.
+   * @param sendDetailsInResponse - Determines whether to send the details in the response.
    */
   private async collectPageDetails(
     message: AutofillExtensionMessage,
@@ -78,31 +90,138 @@ class AutofillInit implements AutofillInitInterface {
    *
    * @param {AutofillExtensionMessage} message
    */
-  private fillForm({ fillScript, pageDetailsUrl }: AutofillExtensionMessage) {
+  private async fillForm({ fillScript, pageDetailsUrl }: AutofillExtensionMessage) {
     if ((document.defaultView || window).location.href !== pageDetailsUrl) {
       return;
     }
 
-    this.insertAutofillContentService.fillForm(fillScript);
+    this.updateOverlayIsCurrentlyFilling(true);
+    await this.insertAutofillContentService.fillForm(fillScript);
+
+    if (!this.autofillOverlayContentService) {
+      return;
+    }
+
+    setTimeout(() => {
+      this.updateOverlayIsCurrentlyFilling(false);
+      this.autofillOverlayContentService.focusMostRecentOverlayField();
+    }, 250);
   }
 
   /**
-   * Sets up the extension message listeners
-   * for the content script.
-   * @private
+   * Handles updating the overlay is currently filling value.
+   *
+   * @param isCurrentlyFilling - Indicates if the overlay is currently filling
+   */
+  private updateOverlayIsCurrentlyFilling(isCurrentlyFilling: boolean) {
+    if (!this.autofillOverlayContentService) {
+      return;
+    }
+
+    this.autofillOverlayContentService.isCurrentlyFilling = isCurrentlyFilling;
+  }
+
+  /**
+   * Opens the autofill overlay.
+   *
+   * @param data - The extension message data.
+   */
+  private openAutofillOverlay({ data }: AutofillExtensionMessage) {
+    if (!this.autofillOverlayContentService) {
+      return;
+    }
+
+    this.autofillOverlayContentService.openAutofillOverlay(data);
+  }
+
+  /**
+   * Blurs the most recent overlay field and removes the overlay. Used
+   * in cases where the background unlock or vault item reprompt popout
+   * is opened.
+   */
+  private blurAndRemoveOverlay() {
+    if (!this.autofillOverlayContentService) {
+      return;
+    }
+
+    this.autofillOverlayContentService.blurMostRecentOverlayField();
+    this.removeAutofillOverlay();
+  }
+
+  /**
+   * Removes the autofill overlay if the field is not currently focused.
+   * If the autofill is currently filling, only the overlay list will be
+   * removed.
+   */
+  private removeAutofillOverlay() {
+    if (
+      !this.autofillOverlayContentService ||
+      this.autofillOverlayContentService.isFieldCurrentlyFocused
+    ) {
+      return;
+    }
+
+    if (this.autofillOverlayContentService.isCurrentlyFilling) {
+      this.autofillOverlayContentService.removeAutofillOverlayList();
+      return;
+    }
+
+    this.autofillOverlayContentService.removeAutofillOverlay();
+  }
+
+  /**
+   * Adds a new vault item from the overlay.
+   */
+  private addNewVaultItemFromOverlay() {
+    if (!this.autofillOverlayContentService) {
+      return;
+    }
+
+    this.autofillOverlayContentService.addNewVaultItem();
+  }
+
+  /**
+   * Redirects the overlay focus out of an overlay iframe.
+   *
+   * @param data - Contains the direction to redirect the focus.
+   */
+  private redirectOverlayFocusOut({ data }: AutofillExtensionMessage) {
+    if (!this.autofillOverlayContentService) {
+      return;
+    }
+
+    this.autofillOverlayContentService.redirectOverlayFocusOut(data?.direction);
+  }
+
+  /**
+   * Updates whether the current tab has ciphers that can populate the overlay list
+   *
+   * @param data - Contains the isOverlayCiphersPopulated value
+   *
+   */
+  private updateIsOverlayCiphersPopulated({ data }: AutofillExtensionMessage) {
+    if (!this.autofillOverlayContentService) {
+      return;
+    }
+
+    this.autofillOverlayContentService.isOverlayCiphersPopulated = Boolean(
+      data?.isOverlayCiphersPopulated
+    );
+  }
+
+  /**
+   * Sets up the extension message listeners for the content script.
    */
   private setupExtensionMessageListeners() {
     chrome.runtime.onMessage.addListener(this.handleExtensionMessage);
   }
 
   /**
-   * Handles the extension messages
-   * sent to the content script.
-   * @param {AutofillExtensionMessage} message
-   * @param {chrome.runtime.MessageSender} sender
-   * @param {(response?: any) => void} sendResponse
-   * @returns {boolean}
-   * @private
+   * Handles the extension messages sent to the content script.
+   *
+   * @param message - The extension message.
+   * @param sender - The message sender.
+   * @param sendResponse - The send response callback.
    */
   private handleExtensionMessage = (
     message: AutofillExtensionMessage,
@@ -112,12 +231,12 @@ class AutofillInit implements AutofillInitInterface {
     const command: string = message.command;
     const handler: CallableFunction | undefined = this.extensionMessageHandlers[command];
     if (!handler) {
-      return false;
+      return;
     }
 
     const messageResponse = handler({ message, sender });
     if (!messageResponse) {
-      return false;
+      return;
     }
 
     Promise.resolve(messageResponse).then((response) => sendResponse(response));
@@ -125,9 +244,4 @@ class AutofillInit implements AutofillInitInterface {
   };
 }
 
-(function () {
-  if (!window.bitwardenAutofillInit) {
-    window.bitwardenAutofillInit = new AutofillInit();
-    window.bitwardenAutofillInit.init();
-  }
-})();
+export default AutofillInit;
diff --git a/apps/browser/src/autofill/content/autofill.css b/apps/browser/src/autofill/content/autofill.css
index e495cbf5c45..cbdb776fafa 100644
--- a/apps/browser/src/autofill/content/autofill.css
+++ b/apps/browser/src/autofill/content/autofill.css
@@ -34,3 +34,10 @@ span[data-bwautofill].com-bitwarden-browser-animated-fill {
   animation: bitwardenfill 200ms ease-in-out 0ms 1;
   -webkit-animation: bitwardenfill 200ms ease-in-out 0ms 1;
 }
+
+@media (prefers-reduced-motion) {
+  .com-bitwarden-browser-animated-fill {
+    animation: none;
+    -webkit-animation: none;
+  }
+}
diff --git a/apps/browser/src/autofill/content/bootstrap-autofill-overlay.ts b/apps/browser/src/autofill/content/bootstrap-autofill-overlay.ts
new file mode 100644
index 00000000000..5bc9fb1718f
--- /dev/null
+++ b/apps/browser/src/autofill/content/bootstrap-autofill-overlay.ts
@@ -0,0 +1,11 @@
+import AutofillOverlayContentService from "../services/autofill-overlay-content.service";
+
+import AutofillInit from "./autofill-init";
+
+(function (windowContext) {
+  if (!windowContext.bitwardenAutofillInit) {
+    const autofillOverlayContentService = new AutofillOverlayContentService();
+    windowContext.bitwardenAutofillInit = new AutofillInit(autofillOverlayContentService);
+    windowContext.bitwardenAutofillInit.init();
+  }
+})(window);
diff --git a/apps/browser/src/autofill/content/bootstrap-autofill.ts b/apps/browser/src/autofill/content/bootstrap-autofill.ts
new file mode 100644
index 00000000000..3264c77ea0e
--- /dev/null
+++ b/apps/browser/src/autofill/content/bootstrap-autofill.ts
@@ -0,0 +1,8 @@
+import AutofillInit from "./autofill-init";
+
+(function (windowContext) {
+  if (!windowContext.bitwardenAutofillInit) {
+    windowContext.bitwardenAutofillInit = new AutofillInit();
+    windowContext.bitwardenAutofillInit.init();
+  }
+})(window);
diff --git a/apps/browser/src/autofill/content/notification-bar.ts b/apps/browser/src/autofill/content/notification-bar.ts
index 29ba7ca9fff..223d6ab1ddf 100644
--- a/apps/browser/src/autofill/content/notification-bar.ts
+++ b/apps/browser/src/autofill/content/notification-bar.ts
@@ -3,7 +3,7 @@ import ChangePasswordRuntimeMessage from "../../background/models/changePassword
 import AutofillField from "../models/autofill-field";
 import { WatchedForm } from "../models/watched-form";
 import { FormData } from "../services/abstractions/autofill.service";
-import { UserSettings } from "../types";
+import { GlobalSettings, UserSettings } from "../types";
 
 interface HTMLElementWithFormOpId extends HTMLElement {
   formOpId: string;
@@ -97,6 +97,7 @@ async function loadNotificationBar() {
   const userSettingsStorageValue = await getFromLocalStorage(activeUserId);
   if (userSettingsStorageValue[activeUserId]) {
     const userSettings: UserSettings = userSettingsStorageValue[activeUserId].settings;
+    const globalSettings: GlobalSettings = await getFromLocalStorage("global");
 
     // Do not show the notification bar on the Bitwarden vault
     // because they can add logins and change passwords there
@@ -107,11 +108,11 @@ async function loadNotificationBar() {
       // show the notification bar on (for login detail collection or password change).
       // It is managed in the Settings > Excluded Domains page in the browser extension.
       // Example: '{"bitwarden.com":null}'
-      const excludedDomainsDict = userSettings.neverDomains;
+      const excludedDomainsDict = globalSettings.neverDomains;
       if (!excludedDomainsDict || !(window.location.hostname in excludedDomainsDict)) {
         // Set local disabled preferences
-        disabledAddLoginNotification = userSettings.disableAddLoginNotification;
-        disabledChangedPasswordNotification = userSettings.disableChangedPasswordNotification;
+        disabledAddLoginNotification = globalSettings.disableAddLoginNotification;
+        disabledChangedPasswordNotification = globalSettings.disableChangedPasswordNotification;
 
         if (!disabledAddLoginNotification || !disabledChangedPasswordNotification) {
           // If the user has not disabled both notifications, then handle the initial page change (null -> actual page)
diff --git a/apps/browser/src/autofill/jest/autofill-mocks.ts b/apps/browser/src/autofill/jest/autofill-mocks.ts
index 69c82934fa4..aec61f9df56 100644
--- a/apps/browser/src/autofill/jest/autofill-mocks.ts
+++ b/apps/browser/src/autofill/jest/autofill-mocks.ts
@@ -1,12 +1,18 @@
 import { mock } from "jest-mock-extended";
 
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 import { UriMatchType } from "@bitwarden/common/enums";
+import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
+import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 
+import { OverlayCipherData } from "../background/abstractions/overlay.background";
 import AutofillField from "../models/autofill-field";
 import AutofillPageDetails from "../models/autofill-page-details";
 import AutofillScript, { FillScript } from "../models/autofill-script";
-import { GenerateFillScriptOptions } from "../services/abstractions/autofill.service";
+import { InitAutofillOverlayButtonMessage } from "../overlay/abstractions/autofill-overlay-button";
+import { InitAutofillOverlayListMessage } from "../overlay/abstractions/autofill-overlay-list";
+import { GenerateFillScriptOptions, PageDetail } from "../services/abstractions/autofill.service";
 
 function createAutofillFieldMock(customFields = {}): AutofillField {
   return {
@@ -38,6 +44,15 @@ function createAutofillFieldMock(customFields = {}): AutofillField {
   };
 }
 
+function createPageDetailMock(customFields = {}): PageDetail {
+  return {
+    frameId: 0,
+    tab: createChromeTabMock(),
+    details: createAutofillPageDetailsMock(),
+    ...customFields,
+  };
+}
+
 function createAutofillPageDetailsMock(customFields = {}): AutofillPageDetails {
   return {
     title: "title",
@@ -71,7 +86,7 @@ function createChromeTabMock(customFields = {}): chrome.tabs.Tab {
     discarded: false,
     autoDiscardable: false,
     groupId: 2,
-    url: "https://tacos.com",
+    url: "https://jest-testing-website.com",
     ...customFields,
   };
 }
@@ -84,7 +99,7 @@ function createGenerateFillScriptOptionsMock(customFields = {}): GenerateFillScr
     fillNewPassword: false,
     allowTotpAutofill: false,
     cipher: mock<CipherView>(),
-    tabUrl: "https://tacos.com",
+    tabUrl: "https://jest-testing-website.com",
     defaultUriMatch: UriMatchType.Domain,
     ...customFields,
   };
@@ -122,10 +137,135 @@ function createAutofillScriptMock(
   };
 }
 
+const overlayPagesTranslations = {
+  locale: "en",
+  buttonPageTitle: "buttonPageTitle",
+  listPageTitle: "listPageTitle",
+  opensInANewWindow: "opensInANewWindow",
+  toggleBitwardenVaultOverlay: "toggleBitwardenVaultOverlay",
+  unlockYourAccount: "unlockYourAccount",
+  unlockAccount: "unlockAccount",
+  fillCredentialsFor: "fillCredentialsFor",
+  partialUsername: "partialUsername",
+  view: "view",
+  noItemsToShow: "noItemsToShow",
+  newItem: "newItem",
+  addNewVaultItem: "addNewVaultItem",
+};
+function createInitAutofillOverlayButtonMessageMock(
+  customFields = {}
+): InitAutofillOverlayButtonMessage {
+  return {
+    command: "initAutofillOverlayButton",
+    translations: overlayPagesTranslations,
+    styleSheetUrl: "https://jest-testing-website.com",
+    authStatus: AuthenticationStatus.Unlocked,
+    ...customFields,
+  };
+}
+function createAutofillOverlayCipherDataMock(index: number, customFields = {}): OverlayCipherData {
+  return {
+    id: String(index),
+    name: `website login ${index}`,
+    login: { username: `username${index}` },
+    type: CipherType.Login,
+    reprompt: CipherRepromptType.None,
+    favorite: false,
+    icon: {
+      imageEnabled: true,
+      image: "https://jest-testing-website.com/image.png",
+      fallbackImage: "https://jest-testing-website.com/fallback.png",
+      icon: "bw-icon",
+    },
+    ...customFields,
+  };
+}
+
+function createInitAutofillOverlayListMessageMock(
+  customFields = {}
+): InitAutofillOverlayListMessage {
+  return {
+    command: "initAutofillOverlayList",
+    translations: overlayPagesTranslations,
+    styleSheetUrl: "https://jest-testing-website.com",
+    theme: "light",
+    authStatus: AuthenticationStatus.Unlocked,
+    ciphers: [
+      createAutofillOverlayCipherDataMock(1, {
+        icon: {
+          imageEnabled: true,
+          image: "https://jest-testing-website.com/image.png",
+          fallbackImage: "",
+          icon: "bw-icon",
+        },
+      }),
+      createAutofillOverlayCipherDataMock(2, {
+        icon: {
+          imageEnabled: true,
+          image: "",
+          fallbackImage: "https://jest-testing-website.com/fallback.png",
+          icon: "bw-icon",
+        },
+      }),
+      createAutofillOverlayCipherDataMock(3, {
+        name: "",
+        login: { username: "" },
+        icon: { imageEnabled: true, image: "", fallbackImage: "", icon: "bw-icon" },
+      }),
+      createAutofillOverlayCipherDataMock(4, {
+        icon: { imageEnabled: false, image: "", fallbackImage: "", icon: "" },
+      }),
+      createAutofillOverlayCipherDataMock(5),
+      createAutofillOverlayCipherDataMock(6),
+      createAutofillOverlayCipherDataMock(7),
+      createAutofillOverlayCipherDataMock(8),
+    ],
+    ...customFields,
+  };
+}
+
+function createFocusedFieldDataMock(customFields = {}) {
+  return {
+    focusedFieldRects: {
+      top: 1,
+      left: 2,
+      height: 3,
+      width: 4,
+    },
+    focusedFieldStyles: {
+      paddingRight: "6px",
+      paddingLeft: "6px",
+    },
+    ...customFields,
+  };
+}
+
+function createPortSpyMock(name: string) {
+  return mock<chrome.runtime.Port>({
+    name,
+    onMessage: {
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+    },
+    onDisconnect: {
+      addListener: jest.fn(),
+    },
+    postMessage: jest.fn(),
+    sender: {
+      tab: createChromeTabMock(),
+    },
+  });
+}
+
 export {
   createAutofillFieldMock,
+  createPageDetailMock,
   createAutofillPageDetailsMock,
   createChromeTabMock,
   createGenerateFillScriptOptionsMock,
   createAutofillScriptMock,
+  createInitAutofillOverlayButtonMessageMock,
+  createInitAutofillOverlayListMessageMock,
+  createFocusedFieldDataMock,
+  createPortSpyMock,
 };
diff --git a/apps/browser/src/autofill/jest/testing-utils.ts b/apps/browser/src/autofill/jest/testing-utils.ts
index ac5964b7bc6..c3fe951a8ee 100644
--- a/apps/browser/src/autofill/jest/testing-utils.ts
+++ b/apps/browser/src/autofill/jest/testing-utils.ts
@@ -1,5 +1,104 @@
+import { mock } from "jest-mock-extended";
+
 function triggerTestFailure() {
   expect(true).toBe("Test has failed.");
 }
 
-export { triggerTestFailure };
+const scheduler = typeof setImmediate === "function" ? setImmediate : setTimeout;
+function flushPromises() {
+  return new Promise(function (resolve) {
+    scheduler(resolve);
+  });
+}
+
+function postWindowMessage(data: any, origin = "https://localhost/") {
+  globalThis.dispatchEvent(new MessageEvent("message", { data, origin }));
+}
+
+function sendExtensionRuntimeMessage(
+  message: any,
+  sender?: chrome.runtime.MessageSender,
+  sendResponse?: CallableFunction
+) {
+  (chrome.runtime.onMessage.addListener as unknown as jest.SpyInstance).mock.calls.forEach(
+    (call) => {
+      const callback = call[0];
+      callback(
+        message || {},
+        sender || mock<chrome.runtime.MessageSender>(),
+        sendResponse || jest.fn()
+      );
+    }
+  );
+}
+
+function sendPortMessage(port: chrome.runtime.Port, message: any) {
+  (port.onMessage.addListener as unknown as jest.SpyInstance).mock.calls.forEach((call) => {
+    const callback = call[0];
+    callback(message || {}, port);
+  });
+}
+
+function triggerPortOnDisconnectEvent(port: chrome.runtime.Port) {
+  (port.onDisconnect.addListener as unknown as jest.SpyInstance).mock.calls.forEach((call) => {
+    const callback = call[0];
+    callback(port);
+  });
+}
+
+function triggerWindowOnFocusedChangedEvent(windowId: number) {
+  (chrome.windows.onFocusChanged.addListener as unknown as jest.SpyInstance).mock.calls.forEach(
+    (call) => {
+      const callback = call[0];
+      callback(windowId);
+    }
+  );
+}
+
+function triggerTabOnActivatedEvent(activeInfo: chrome.tabs.TabActiveInfo) {
+  (chrome.tabs.onActivated.addListener as unknown as jest.SpyInstance).mock.calls.forEach(
+    (call) => {
+      const callback = call[0];
+      callback(activeInfo);
+    }
+  );
+}
+
+function triggerTabOnReplacedEvent(addedTabId: number, removedTabId: number) {
+  (chrome.tabs.onReplaced.addListener as unknown as jest.SpyInstance).mock.calls.forEach((call) => {
+    const callback = call[0];
+    callback(addedTabId, removedTabId);
+  });
+}
+
+function triggerTabOnUpdatedEvent(
+  tabId: number,
+  changeInfo: chrome.tabs.TabChangeInfo,
+  tab: chrome.tabs.Tab
+) {
+  (chrome.tabs.onUpdated.addListener as unknown as jest.SpyInstance).mock.calls.forEach((call) => {
+    const callback = call[0];
+    callback(tabId, changeInfo, tab);
+  });
+}
+
+function triggerTabOnRemovedEvent(tabId: number, removeInfo: chrome.tabs.TabRemoveInfo) {
+  (chrome.tabs.onRemoved.addListener as unknown as jest.SpyInstance).mock.calls.forEach((call) => {
+    const callback = call[0];
+    callback(tabId, removeInfo);
+  });
+}
+
+export {
+  triggerTestFailure,
+  flushPromises,
+  postWindowMessage,
+  sendExtensionRuntimeMessage,
+  sendPortMessage,
+  triggerPortOnDisconnectEvent,
+  triggerWindowOnFocusedChangedEvent,
+  triggerTabOnActivatedEvent,
+  triggerTabOnReplacedEvent,
+  triggerTabOnUpdatedEvent,
+  triggerTabOnRemovedEvent,
+};
diff --git a/apps/browser/src/autofill/notification/bar.scss b/apps/browser/src/autofill/notification/bar.scss
index 3fdfca01a43..20615e024a7 100644
--- a/apps/browser/src/autofill/notification/bar.scss
+++ b/apps/browser/src/autofill/notification/bar.scss
@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../shared/styles/variables";
 
 body {
   padding: 0;
@@ -104,7 +104,7 @@ button.secondary:not(.neutral) {
 
   &:hover {
     @include themify($themes) {
-      background-color: darken(themed("backgroundColor"), 1.5%);
+      background-color: themed("backgroundOffsetColor");
       color: darken(themed("mutedTextColor"), 6%);
     }
   }
diff --git a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-button.ts b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-button.ts
new file mode 100644
index 00000000000..380a1f5de2e
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-button.ts
@@ -0,0 +1,27 @@
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+
+type OverlayButtonMessage = { command: string };
+
+type UpdateAuthStatusMessage = OverlayButtonMessage & { authStatus: AuthenticationStatus };
+
+type InitAutofillOverlayButtonMessage = UpdateAuthStatusMessage & {
+  styleSheetUrl: string;
+  translations: Record<string, string>;
+};
+
+type OverlayButtonWindowMessageHandlers = {
+  [key: string]: CallableFunction;
+  initAutofillOverlayButton: ({ message }: { message: InitAutofillOverlayButtonMessage }) => void;
+  checkAutofillOverlayButtonFocused: () => void;
+  updateAutofillOverlayButtonAuthStatus: ({
+    message,
+  }: {
+    message: UpdateAuthStatusMessage;
+  }) => void;
+};
+
+export {
+  UpdateAuthStatusMessage,
+  InitAutofillOverlayButtonMessage,
+  OverlayButtonWindowMessageHandlers,
+};
diff --git a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-iframe.service.ts b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-iframe.service.ts
new file mode 100644
index 00000000000..1f7009bece3
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-iframe.service.ts
@@ -0,0 +1,32 @@
+type AutofillOverlayIframeExtensionMessage = {
+  command: string;
+  styles?: Partial<CSSStyleDeclaration>;
+  theme?: string;
+};
+
+type AutofillOverlayIframeWindowMessageHandlers = {
+  [key: string]: CallableFunction;
+  updateAutofillOverlayListHeight: (message: AutofillOverlayIframeExtensionMessage) => void;
+};
+
+type AutofillOverlayIframeExtensionMessageParam = {
+  message: AutofillOverlayIframeExtensionMessage;
+};
+
+type BackgroundPortMessageHandlers = {
+  [key: string]: CallableFunction;
+  initAutofillOverlayList: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
+  updateIframePosition: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
+  updateOverlayHidden: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
+};
+
+interface AutofillOverlayIframeService {
+  initOverlayIframe(initStyles: Partial<CSSStyleDeclaration>, ariaAlert?: string): void;
+}
+
+export {
+  AutofillOverlayIframeExtensionMessage,
+  AutofillOverlayIframeWindowMessageHandlers,
+  BackgroundPortMessageHandlers,
+  AutofillOverlayIframeService,
+};
diff --git a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-list.ts b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-list.ts
new file mode 100644
index 00000000000..b656f238dce
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-list.ts
@@ -0,0 +1,31 @@
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+
+import { OverlayCipherData } from "../../background/abstractions/overlay.background";
+
+type OverlayListMessage = { command: string };
+
+type UpdateOverlayListCiphersMessage = OverlayListMessage & {
+  ciphers: OverlayCipherData[];
+};
+
+type InitAutofillOverlayListMessage = OverlayListMessage & {
+  authStatus: AuthenticationStatus;
+  styleSheetUrl: string;
+  theme: string;
+  translations: Record<string, string>;
+  ciphers?: OverlayCipherData[];
+};
+
+type OverlayListWindowMessageHandlers = {
+  [key: string]: CallableFunction;
+  initAutofillOverlayList: ({ message }: { message: InitAutofillOverlayListMessage }) => void;
+  checkAutofillOverlayListFocused: () => void;
+  updateOverlayListCiphers: ({ message }: { message: UpdateOverlayListCiphersMessage }) => void;
+  focusOverlayList: () => void;
+};
+
+export {
+  UpdateOverlayListCiphersMessage,
+  InitAutofillOverlayListMessage,
+  OverlayListWindowMessageHandlers,
+};
diff --git a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-page-element.ts b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-page-element.ts
new file mode 100644
index 00000000000..eb3c2fa4a71
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-page-element.ts
@@ -0,0 +1,13 @@
+import { OverlayButtonWindowMessageHandlers } from "./autofill-overlay-button";
+import { OverlayListWindowMessageHandlers } from "./autofill-overlay-list";
+
+type WindowMessageHandlers = OverlayButtonWindowMessageHandlers | OverlayListWindowMessageHandlers;
+
+type AutofillOverlayPageElementWindowMessage = {
+  [key: string]: any;
+  command: string;
+  overlayCipherId?: string;
+  height?: number;
+};
+
+export { WindowMessageHandlers, AutofillOverlayPageElementWindowMessage };
diff --git a/apps/browser/src/autofill/overlay/iframe-content/__snapshots__/autofill-overlay-iframe.service.spec.ts.snap b/apps/browser/src/autofill/overlay/iframe-content/__snapshots__/autofill-overlay-iframe.service.spec.ts.snap
new file mode 100644
index 00000000000..cb8e4a541bb
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/iframe-content/__snapshots__/autofill-overlay-iframe.service.spec.ts.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AutofillOverlayIframeService initOverlayIframe creates an aria alert element if the ariaAlert param is passed 1`] = `
+<div
+  aria-atomic="true"
+  aria-live="polite"
+  role="status"
+  style="position: absolute !important; top: -9999px !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none;"
+>
+  aria alert
+</div>
+`;
+
+exports[`AutofillOverlayIframeService initOverlayIframe sets up the iframe's attributes 1`] = `
+<iframe
+  allowtransparency="true"
+  sandbox="allow-scripts"
+  src="chrome-extension://id/overlay/list.html"
+  style="all: initial !important; position: fixed !important; display: block !important; z-index: 2147483647 !important; line-height: 0 !important; overflow: hidden !important; transition: opacity 125ms ease-out 0s !important; visibility: visible !important; clip-path: none !important; pointer-events: auto !important; margin: 0px !important; padding: 0px !important; color-scheme: normal !important; opacity: 0 !important; height: 0px;"
+  tabindex="-1"
+  title="title"
+/>
+`;
diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-button-iframe.spec.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-button-iframe.spec.ts
new file mode 100644
index 00000000000..8106f2698dc
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-button-iframe.spec.ts
@@ -0,0 +1,19 @@
+import AutofillOverlayButtonIframe from "./autofill-overlay-button-iframe";
+import AutofillOverlayIframeElement from "./autofill-overlay-iframe-element";
+
+describe("AutofillOverlayButtonIframe", () => {
+  window.customElements.define("autofill-overlay-button-iframe", AutofillOverlayButtonIframe);
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it("creates a custom element that is an instance of the AutofillIframeElement parent class", () => {
+    document.body.innerHTML = "<autofill-overlay-button-iframe></autofill-overlay-button-iframe>";
+
+    const iframe = document.querySelector("autofill-overlay-button-iframe");
+
+    expect(iframe).toBeInstanceOf(AutofillOverlayButtonIframe);
+    expect(iframe).toBeInstanceOf(AutofillOverlayIframeElement);
+  });
+});
diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-button-iframe.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-button-iframe.ts
new file mode 100644
index 00000000000..125a53c01de
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-button-iframe.ts
@@ -0,0 +1,20 @@
+import { AutofillOverlayPort } from "../../utils/autofill-overlay.enum";
+
+import AutofillOverlayIframeElement from "./autofill-overlay-iframe-element";
+
+class AutofillOverlayButtonIframe extends AutofillOverlayIframeElement {
+  constructor() {
+    super(
+      "overlay/button.html",
+      AutofillOverlayPort.Button,
+      {
+        background: "transparent",
+        border: "none",
+      },
+      chrome.i18n.getMessage("bitwardenOverlayButton"),
+      chrome.i18n.getMessage("bitwardenOverlayMenuAvailable")
+    );
+  }
+}
+
+export default AutofillOverlayButtonIframe;
diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe-element.spec.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe-element.spec.ts
new file mode 100644
index 00000000000..7af5d973a92
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe-element.spec.ts
@@ -0,0 +1,32 @@
+import AutofillOverlayIframeElement from "./autofill-overlay-iframe-element";
+import AutofillOverlayIframeService from "./autofill-overlay-iframe.service";
+
+jest.mock("./autofill-overlay-iframe.service");
+
+describe("AutofillOverlayIframeElement", () => {
+  window.customElements.define("autofill-overlay-iframe", AutofillOverlayIframeElement);
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it("creates a custom element that is an instance of the HTMLElement parent class", () => {
+    document.body.innerHTML = "<autofill-overlay-iframe></autofill-overlay-iframe>";
+
+    const iframe = document.querySelector("autofill-overlay-iframe");
+
+    expect(iframe).toBeInstanceOf(HTMLElement);
+  });
+
+  it("attaches a closed shadow DOM", () => {
+    document.body.innerHTML = "<autofill-overlay-iframe></autofill-overlay-iframe>";
+
+    const iframe = document.querySelector("autofill-overlay-iframe");
+
+    expect(iframe.shadowRoot).toBeNull();
+  });
+
+  it("instantiates the autofill overlay iframe service for each attached custom element", () => {
+    expect(AutofillOverlayIframeService).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe-element.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe-element.ts
new file mode 100644
index 00000000000..7f84c07870d
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe-element.ts
@@ -0,0 +1,23 @@
+import AutofillOverlayIframeService from "./autofill-overlay-iframe.service";
+
+class AutofillOverlayIframeElement extends HTMLElement {
+  constructor(
+    iframePath: string,
+    portName: string,
+    initStyles: Partial<CSSStyleDeclaration>,
+    iframeTitle: string,
+    ariaAlert?: string
+  ) {
+    super();
+
+    const shadow: ShadowRoot = this.attachShadow({ mode: "closed" });
+    const autofillOverlayIframeService = new AutofillOverlayIframeService(
+      iframePath,
+      portName,
+      shadow
+    );
+    autofillOverlayIframeService.initOverlayIframe(initStyles, iframeTitle, ariaAlert);
+  }
+}
+
+export default AutofillOverlayIframeElement;
diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.spec.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.spec.ts
new file mode 100644
index 00000000000..432f1a548ab
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.spec.ts
@@ -0,0 +1,406 @@
+import { EVENTS } from "../../constants";
+import { createPortSpyMock } from "../../jest/autofill-mocks";
+import {
+  flushPromises,
+  sendPortMessage,
+  triggerPortOnDisconnectEvent,
+} from "../../jest/testing-utils";
+import { AutofillOverlayPort } from "../../utils/autofill-overlay.enum";
+
+import AutofillOverlayIframeService from "./autofill-overlay-iframe.service";
+
+describe("AutofillOverlayIframeService", () => {
+  const iframePath = "overlay/list.html";
+  let autofillOverlayIframeService: AutofillOverlayIframeService;
+  let portSpy: chrome.runtime.Port;
+  let shadowAppendSpy: jest.SpyInstance;
+  let handlePortDisconnectSpy: jest.SpyInstance;
+  let handlePortMessageSpy: jest.SpyInstance;
+  let handleWindowMessageSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    const shadow = document.createElement("div").attachShadow({ mode: "open" });
+    autofillOverlayIframeService = new AutofillOverlayIframeService(
+      iframePath,
+      AutofillOverlayPort.Button,
+      shadow
+    );
+    shadowAppendSpy = jest.spyOn(shadow, "appendChild");
+    handlePortDisconnectSpy = jest.spyOn(
+      autofillOverlayIframeService as any,
+      "handlePortDisconnect"
+    );
+    handlePortMessageSpy = jest.spyOn(autofillOverlayIframeService as any, "handlePortMessage");
+    handleWindowMessageSpy = jest.spyOn(autofillOverlayIframeService as any, "handleWindowMessage");
+    chrome.runtime.connect = jest.fn((connectInfo: chrome.runtime.ConnectInfo) =>
+      createPortSpyMock(connectInfo.name)
+    ) as unknown as typeof chrome.runtime.connect;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("initOverlayIframe", () => {
+    it("sets up the iframe's attributes", () => {
+      autofillOverlayIframeService.initOverlayIframe({ height: "0px" }, "title");
+
+      expect(autofillOverlayIframeService["iframe"]).toMatchSnapshot();
+    });
+
+    it("appends the iframe to the shadowDom", () => {
+      jest.spyOn(autofillOverlayIframeService["shadow"], "appendChild");
+
+      autofillOverlayIframeService.initOverlayIframe({}, "title");
+
+      expect(autofillOverlayIframeService["shadow"].appendChild).toBeCalledWith(
+        autofillOverlayIframeService["iframe"]
+      );
+    });
+
+    it("creates an aria alert element if the ariaAlert param is passed", () => {
+      const ariaAlert = "aria alert";
+      jest.spyOn(autofillOverlayIframeService as any, "createAriaAlertElement");
+
+      autofillOverlayIframeService.initOverlayIframe({}, "title", ariaAlert);
+
+      expect(autofillOverlayIframeService["createAriaAlertElement"]).toBeCalledWith(ariaAlert);
+      expect(autofillOverlayIframeService["ariaAlertElement"]).toMatchSnapshot();
+    });
+
+    describe("on load of the iframe source", () => {
+      beforeEach(() => {
+        autofillOverlayIframeService.initOverlayIframe({ height: "0px" }, "title", "ariaAlert");
+      });
+
+      it("sets up and connects the port message listener to the extension background", () => {
+        jest.spyOn(globalThis, "addEventListener");
+
+        autofillOverlayIframeService["iframe"].dispatchEvent(new Event(EVENTS.LOAD));
+        portSpy = autofillOverlayIframeService["port"];
+
+        expect(chrome.runtime.connect).toBeCalledWith({ name: AutofillOverlayPort.Button });
+        expect(portSpy.onDisconnect.addListener).toBeCalledWith(handlePortDisconnectSpy);
+        expect(portSpy.onMessage.addListener).toBeCalledWith(handlePortMessageSpy);
+        expect(globalThis.addEventListener).toBeCalledWith(EVENTS.MESSAGE, handleWindowMessageSpy);
+      });
+
+      it("skips announcing the aria alert if the aria alert element is not populated", () => {
+        jest.spyOn(globalThis, "setTimeout");
+        autofillOverlayIframeService["ariaAlertElement"] = undefined;
+
+        autofillOverlayIframeService["iframe"].dispatchEvent(new Event(EVENTS.LOAD));
+
+        expect(globalThis.setTimeout).not.toBeCalled();
+      });
+
+      it("announces the aria alert if the aria alert element is populated", () => {
+        jest.useFakeTimers();
+        jest.spyOn(globalThis, "setTimeout");
+        autofillOverlayIframeService["ariaAlertElement"] = document.createElement("div");
+        autofillOverlayIframeService["ariaAlertTimeout"] = setTimeout(jest.fn(), 2000);
+
+        autofillOverlayIframeService["iframe"].dispatchEvent(new Event(EVENTS.LOAD));
+
+        expect(globalThis.setTimeout).toBeCalled();
+        jest.advanceTimersByTime(2000);
+
+        expect(shadowAppendSpy).toBeCalledWith(autofillOverlayIframeService["ariaAlertElement"]);
+      });
+    });
+  });
+
+  describe("event listeners", () => {
+    beforeEach(() => {
+      autofillOverlayIframeService.initOverlayIframe({ height: "0px" }, "title", "ariaAlert");
+      autofillOverlayIframeService["iframe"].dispatchEvent(new Event(EVENTS.LOAD));
+      Object.defineProperty(autofillOverlayIframeService["iframe"], "contentWindow", {
+        value: {
+          postMessage: jest.fn(),
+        },
+        writable: true,
+      });
+      jest.spyOn(autofillOverlayIframeService["iframe"].contentWindow, "postMessage");
+      portSpy = autofillOverlayIframeService["port"];
+    });
+
+    describe("handlePortDisconnect", () => {
+      it("ignores ports that do not have the correct port name", () => {
+        portSpy.name = "wrong-port-name";
+        triggerPortOnDisconnectEvent(portSpy);
+
+        expect(autofillOverlayIframeService["port"]).not.toBeNull();
+      });
+
+      it("resets the iframe element's opacity, height, and display styles", () => {
+        triggerPortOnDisconnectEvent(portSpy);
+
+        expect(autofillOverlayIframeService["iframe"].style.opacity).toBe("0");
+        expect(autofillOverlayIframeService["iframe"].style.height).toBe("0px");
+        expect(autofillOverlayIframeService["iframe"].style.display).toBe("block");
+      });
+
+      it("removes the global message listener", () => {
+        jest.spyOn(globalThis, "removeEventListener");
+
+        triggerPortOnDisconnectEvent(portSpy);
+
+        expect(globalThis.removeEventListener).toBeCalledWith(
+          EVENTS.MESSAGE,
+          handleWindowMessageSpy
+        );
+      });
+
+      it("removes the port's onMessage listener", () => {
+        triggerPortOnDisconnectEvent(portSpy);
+
+        expect(portSpy.onMessage.removeListener).toBeCalledWith(handlePortMessageSpy);
+      });
+
+      it("removes the port's onDisconnect listener", () => {
+        triggerPortOnDisconnectEvent(portSpy);
+
+        expect(portSpy.onDisconnect.removeListener).toBeCalledWith(handlePortDisconnectSpy);
+      });
+
+      it("disconnects the port", () => {
+        triggerPortOnDisconnectEvent(portSpy);
+
+        expect(portSpy.disconnect).toBeCalled();
+        expect(autofillOverlayIframeService["port"]).toBeNull();
+      });
+    });
+
+    describe("handlePortMessage", () => {
+      it("ignores port messages that do not correlate to the correct port name", () => {
+        portSpy.name = "wrong-port-name";
+        sendPortMessage(portSpy, {});
+
+        expect(autofillOverlayIframeService["iframe"].contentWindow.postMessage).not.toBeCalled();
+      });
+
+      it("passes on the message to the iframe if the message is not registered with the message handlers", () => {
+        const message = { command: "unregisteredMessage" };
+
+        sendPortMessage(portSpy, message);
+
+        expect(autofillOverlayIframeService["iframe"].contentWindow.postMessage).toBeCalledWith(
+          message,
+          "*"
+        );
+      });
+
+      it("handles port messages that are registered with the message handlers and does not pass the message on to the iframe", () => {
+        jest.spyOn(autofillOverlayIframeService as any, "updateIframePosition");
+
+        sendPortMessage(portSpy, { command: "updateIframePosition" });
+
+        expect(autofillOverlayIframeService["iframe"].contentWindow.postMessage).not.toBeCalled();
+      });
+
+      describe("initializing the overlay list", () => {
+        let updateElementStylesSpy: jest.SpyInstance;
+
+        beforeEach(() => {
+          updateElementStylesSpy = jest.spyOn(
+            autofillOverlayIframeService as any,
+            "updateElementStyles"
+          );
+        });
+
+        it("passed the message on to the iframe element", () => {
+          const message = {
+            command: "initAutofillOverlayList",
+            theme: "theme_light",
+          };
+
+          sendPortMessage(portSpy, message);
+
+          expect(updateElementStylesSpy).not.toBeCalled();
+          expect(autofillOverlayIframeService["iframe"].contentWindow.postMessage).toBeCalledWith(
+            message,
+            "*"
+          );
+        });
+
+        it("updates the border to match the `dark` theme", () => {
+          const message = {
+            command: "initAutofillOverlayList",
+            theme: "theme_dark",
+          };
+
+          sendPortMessage(portSpy, message);
+
+          expect(updateElementStylesSpy).toBeCalledWith(autofillOverlayIframeService["iframe"], {
+            borderColor: "#4c525f",
+          });
+        });
+
+        it("updates the border to match the `nord` theme", () => {
+          const message = {
+            command: "initAutofillOverlayList",
+            theme: "theme_nord",
+          };
+
+          sendPortMessage(portSpy, message);
+
+          expect(updateElementStylesSpy).toBeCalledWith(autofillOverlayIframeService["iframe"], {
+            borderColor: "#2E3440",
+          });
+        });
+
+        it("updates the border to match the `solarizedDark` theme", () => {
+          const message = {
+            command: "initAutofillOverlayList",
+            theme: "theme_solarizedDark",
+          };
+
+          sendPortMessage(portSpy, message);
+
+          expect(updateElementStylesSpy).toBeCalledWith(autofillOverlayIframeService["iframe"], {
+            borderColor: "#073642",
+          });
+        });
+      });
+
+      describe("updating the iframe's position", () => {
+        beforeEach(() => {
+          jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(true);
+        });
+
+        it("ignores updating the iframe position if the document does not have focus", () => {
+          jest.spyOn(autofillOverlayIframeService as any, "updateElementStyles");
+          jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false);
+
+          sendPortMessage(portSpy, {
+            command: "updateIframePosition",
+            styles: { top: 100, left: 100 },
+          });
+
+          expect(autofillOverlayIframeService["updateElementStyles"]).not.toBeCalled();
+        });
+
+        it("updates the iframe position if the document has focus", () => {
+          const styles = { top: "100px", left: "100px" };
+
+          sendPortMessage(portSpy, {
+            command: "updateIframePosition",
+            styles,
+          });
+
+          expect(autofillOverlayIframeService["iframe"].style.top).toBe(styles.top);
+          expect(autofillOverlayIframeService["iframe"].style.left).toBe(styles.left);
+        });
+
+        it("fades the iframe element in after positioning the element", () => {
+          jest.useFakeTimers();
+          const styles = { top: "100px", left: "100px" };
+
+          sendPortMessage(portSpy, {
+            command: "updateIframePosition",
+            styles,
+          });
+
+          expect(autofillOverlayIframeService["iframe"].style.opacity).toBe("0");
+          jest.advanceTimersByTime(10);
+          expect(autofillOverlayIframeService["iframe"].style.opacity).toBe("1");
+        });
+
+        it("announces the opening of the iframe using an aria alert", () => {
+          jest.useFakeTimers();
+          const styles = { top: "100px", left: "100px" };
+
+          sendPortMessage(portSpy, {
+            command: "updateIframePosition",
+            styles,
+          });
+
+          jest.advanceTimersByTime(2000);
+          expect(shadowAppendSpy).toBeCalledWith(autofillOverlayIframeService["ariaAlertElement"]);
+        });
+      });
+
+      it("updates the visibility of the iframe", () => {
+        sendPortMessage(portSpy, {
+          command: "updateOverlayHidden",
+          styles: { display: "none" },
+        });
+
+        expect(autofillOverlayIframeService["iframe"].style.display).toBe("none");
+      });
+    });
+
+    describe("handleWindowMessage", () => {
+      it("ignores window messages when the port is not set", () => {
+        autofillOverlayIframeService["port"] = null;
+
+        globalThis.dispatchEvent(new MessageEvent("message", { data: {} }));
+
+        expect(autofillOverlayIframeService["port"]).toBeNull();
+      });
+
+      it("ignores window messages whose source is not the iframe's content window", () => {
+        globalThis.dispatchEvent(
+          new MessageEvent("message", {
+            data: {},
+            source: window,
+          })
+        );
+
+        expect(portSpy.postMessage).not.toBeCalled();
+      });
+
+      it("ignores window messages whose origin is not from the extension origin", () => {
+        globalThis.dispatchEvent(
+          new MessageEvent("message", {
+            data: {},
+            source: autofillOverlayIframeService["iframe"].contentWindow,
+            origin: "https://www.google.com",
+          })
+        );
+
+        expect(portSpy.postMessage).not.toBeCalled();
+      });
+
+      it("passes the window message from an iframe element to the background port", () => {
+        globalThis.dispatchEvent(
+          new MessageEvent("message", {
+            data: { command: "not-a-handled-command" },
+            source: autofillOverlayIframeService["iframe"].contentWindow,
+            origin: "chrome-extension://id",
+          })
+        );
+
+        expect(portSpy.postMessage).toBeCalledWith({ command: "not-a-handled-command" });
+      });
+
+      it("updates the overlay list height", () => {
+        globalThis.dispatchEvent(
+          new MessageEvent("message", {
+            data: { command: "updateAutofillOverlayListHeight", styles: { height: "300px" } },
+            source: autofillOverlayIframeService["iframe"].contentWindow,
+            origin: "chrome-extension://id",
+          })
+        );
+
+        expect(autofillOverlayIframeService["iframe"].style.height).toBe("300px");
+      });
+    });
+  });
+
+  describe("mutation observer", () => {
+    beforeEach(() => {
+      autofillOverlayIframeService.initOverlayIframe({ height: "0px" }, "title", "ariaAlert");
+      autofillOverlayIframeService["iframe"].dispatchEvent(new Event(EVENTS.LOAD));
+    });
+
+    it("reverts any styles changes made directly to the iframe", async () => {
+      jest.useFakeTimers();
+
+      autofillOverlayIframeService["iframe"].style.visibility = "hidden";
+      await flushPromises();
+
+      expect(autofillOverlayIframeService["iframe"].style.visibility).toBe("visible");
+    });
+  });
+});
diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts
new file mode 100644
index 00000000000..2ec2bc0aa3b
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts
@@ -0,0 +1,315 @@
+import { EVENTS } from "../../constants";
+import { setElementStyles } from "../../utils/utils";
+import {
+  BackgroundPortMessageHandlers,
+  AutofillOverlayIframeService as AutofillOverlayIframeServiceInterface,
+  AutofillOverlayIframeExtensionMessage,
+  AutofillOverlayIframeWindowMessageHandlers,
+} from "../abstractions/autofill-overlay-iframe.service";
+
+class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterface {
+  private port: chrome.runtime.Port | null = null;
+  private extensionOriginsSet: Set<string>;
+  private iframeMutationObserver: MutationObserver;
+  private iframe: HTMLIFrameElement;
+  private ariaAlertElement: HTMLDivElement;
+  private ariaAlertTimeout: NodeJS.Timeout;
+  private iframeStyles: Partial<CSSStyleDeclaration> = {
+    all: "initial",
+    position: "fixed",
+    display: "block",
+    zIndex: "2147483647",
+    lineHeight: "0",
+    overflow: "hidden",
+    transition: "opacity 125ms ease-out 0s",
+    visibility: "visible",
+    clipPath: "none",
+    pointerEvents: "auto",
+    margin: "0",
+    padding: "0",
+    colorScheme: "normal",
+    opacity: "0",
+  };
+  private readonly windowMessageHandlers: AutofillOverlayIframeWindowMessageHandlers = {
+    updateAutofillOverlayListHeight: (message) =>
+      this.updateElementStyles(this.iframe, message.styles),
+  };
+  private readonly backgroundPortMessageHandlers: BackgroundPortMessageHandlers = {
+    initAutofillOverlayList: ({ message }) => this.initAutofillOverlayList(message),
+    updateIframePosition: ({ message }) => this.updateIframePosition(message.styles),
+    updateOverlayHidden: ({ message }) => this.updateElementStyles(this.iframe, message.styles),
+  };
+
+  constructor(private iframePath: string, private portName: string, private shadow: ShadowRoot) {
+    this.extensionOriginsSet = new Set([
+      chrome.runtime.getURL("").slice(0, -1).toLowerCase(), // Remove the trailing slash and normalize the extension url to lowercase
+      "null",
+    ]);
+
+    this.iframeMutationObserver = new MutationObserver(this.handleMutations);
+  }
+
+  /**
+   * Handles initialization of the iframe which includes applying initial styles
+   * to the iframe, setting the source, and adding listener that connects the
+   * iframe to the background script each time it loads. Can conditionally
+   * create an aria alert element to announce to screen readers when the iframe
+   * is loaded. The end result is append to the shadowDOM of the custom element
+   * that is declared.
+   *
+   *
+   * @param initStyles - Initial styles to apply to the iframe
+   * @param iframeTitle - Title to apply to the iframe
+   * @param ariaAlert - Text to announce to screen readers when the iframe is loaded
+   */
+  initOverlayIframe(
+    initStyles: Partial<CSSStyleDeclaration>,
+    iframeTitle: string,
+    ariaAlert?: string
+  ) {
+    this.iframe = globalThis.document.createElement("iframe");
+    this.iframe.src = chrome.runtime.getURL(this.iframePath);
+    this.updateElementStyles(this.iframe, { ...this.iframeStyles, ...initStyles });
+    this.iframe.tabIndex = -1;
+    this.iframe.setAttribute("title", iframeTitle);
+    this.iframe.setAttribute("sandbox", "allow-scripts");
+    this.iframe.setAttribute("allowtransparency", "true");
+    this.iframe.addEventListener(EVENTS.LOAD, this.setupPortMessageListener);
+
+    if (ariaAlert) {
+      this.createAriaAlertElement(ariaAlert);
+    }
+
+    this.shadow.appendChild(this.iframe);
+  }
+
+  /**
+   * Creates an aria alert element that is used to announce to screen readers
+   * when the iframe is loaded.
+   *
+   * @param ariaAlertText - Text to announce to screen readers when the iframe is loaded
+   */
+  private createAriaAlertElement(ariaAlertText: string) {
+    this.ariaAlertElement = globalThis.document.createElement("div");
+    this.ariaAlertElement.setAttribute("role", "status");
+    this.ariaAlertElement.setAttribute("aria-live", "polite");
+    this.ariaAlertElement.setAttribute("aria-atomic", "true");
+    this.updateElementStyles(this.ariaAlertElement, {
+      position: "absolute",
+      top: "-9999px",
+      left: "-9999px",
+      width: "1px",
+      height: "1px",
+      overflow: "hidden",
+      opacity: "0",
+      pointerEvents: "none",
+    });
+    this.ariaAlertElement.textContent = ariaAlertText;
+  }
+
+  /**
+   * Sets up the port message listener to the extension background script. This
+   * listener is used to communicate between the iframe and the background script.
+   * This also facilitates announcing to screen readers when the iframe is loaded.
+   */
+  private setupPortMessageListener = () => {
+    this.port = chrome.runtime.connect({ name: this.portName });
+    this.port.onDisconnect.addListener(this.handlePortDisconnect);
+    this.port.onMessage.addListener(this.handlePortMessage);
+    globalThis.addEventListener(EVENTS.MESSAGE, this.handleWindowMessage);
+
+    this.announceAriaAlert();
+  };
+
+  /**
+   * Announces the aria alert element to screen readers when the iframe is loaded.
+   */
+  private announceAriaAlert() {
+    if (!this.ariaAlertElement) {
+      return;
+    }
+
+    this.ariaAlertElement.remove();
+    if (this.ariaAlertTimeout) {
+      clearTimeout(this.ariaAlertTimeout);
+    }
+
+    this.ariaAlertTimeout = setTimeout(() => this.shadow.appendChild(this.ariaAlertElement), 2000);
+  }
+
+  /**
+   * Handles disconnecting the port message listener from the extension background
+   * script. This also removes the listener that facilitates announcing to screen
+   * readers when the iframe is loaded.
+   *
+   * @param port - The port that is disconnected
+   */
+  private handlePortDisconnect = (port: chrome.runtime.Port) => {
+    if (port.name !== this.portName) {
+      return;
+    }
+
+    this.updateElementStyles(this.iframe, { opacity: "0", height: "0px", display: "block" });
+    globalThis.removeEventListener("message", this.handleWindowMessage);
+    this.port.onMessage.removeListener(this.handlePortMessage);
+    this.port.onDisconnect.removeListener(this.handlePortDisconnect);
+    this.port.disconnect();
+    this.port = null;
+  };
+
+  /**
+   * Handles messages sent from the extension background script to the iframe.
+   * Triggers behavior within the iframe as well as on the custom element that
+   * contains the iframe element.
+   *
+   * @param message
+   * @param port
+   */
+  private handlePortMessage = (
+    message: AutofillOverlayIframeExtensionMessage,
+    port: chrome.runtime.Port
+  ) => {
+    if (port.name !== this.portName) {
+      return;
+    }
+
+    if (this.backgroundPortMessageHandlers[message.command]) {
+      this.backgroundPortMessageHandlers[message.command]({ message, port });
+      return;
+    }
+
+    this.iframe.contentWindow?.postMessage(message, "*");
+  };
+
+  /**
+   * Handles messages sent from the iframe to the extension background script.
+   * Will adjust the border element to fit the user's set theme.
+   *
+   * @param message - The message sent from the iframe
+   */
+  private initAutofillOverlayList(message: AutofillOverlayIframeExtensionMessage) {
+    const { theme } = message;
+    let borderColor: string;
+    if (theme === "theme_dark") {
+      borderColor = "#4c525f";
+    }
+    if (theme === "theme_nord") {
+      borderColor = "#2E3440";
+    }
+    if (theme === "theme_solarizedDark") {
+      borderColor = "#073642";
+    }
+    if (borderColor) {
+      this.updateElementStyles(this.iframe, { borderColor });
+    }
+
+    this.iframe.contentWindow?.postMessage(message, "*");
+  }
+
+  /**
+   * Updates the position of the iframe element. Will also announce
+   * to screen readers that the iframe is open.
+   *
+   * @param position - The position styles to apply to the iframe
+   */
+  private updateIframePosition(position: Partial<CSSStyleDeclaration>) {
+    if (!globalThis.document.hasFocus()) {
+      return;
+    }
+
+    this.updateElementStyles(this.iframe, position);
+    setTimeout(() => this.updateElementStyles(this.iframe, { opacity: "1" }), 0);
+    this.announceAriaAlert();
+  }
+
+  /**
+   * Handles messages sent from the iframe. If the message does not have a
+   * specified handler set, it passes the message to the background script.
+   *
+   * @param event - The message event
+   */
+  private handleWindowMessage = (event: MessageEvent) => {
+    if (
+      !this.port ||
+      event.source !== this.iframe.contentWindow ||
+      !this.isFromExtensionOrigin(event.origin.toLowerCase())
+    ) {
+      return;
+    }
+
+    const message = event.data;
+    if (this.windowMessageHandlers[message.command]) {
+      this.windowMessageHandlers[message.command](message);
+      return;
+    }
+
+    this.port.postMessage(event.data);
+  };
+
+  /**
+   * Accepts an element and updates the styles for that element. This method
+   * will also unobserve the element if it is the iframe element. This is
+   * done to ensure that we do not trigger the mutation observer when we
+   * update the styles for the iframe.
+   *
+   * @param customElement - The element to update the styles for
+   * @param styles - The styles to apply to the element
+   */
+  private updateElementStyles(customElement: HTMLElement, styles: Partial<CSSStyleDeclaration>) {
+    if (!customElement) {
+      return;
+    }
+
+    this.unobserveIframe();
+
+    setElementStyles(customElement, styles, true);
+    this.iframeStyles = { ...this.iframeStyles, ...styles };
+
+    this.observeIframe();
+  }
+
+  /**
+   * Chrome returns null for any sandboxed iframe sources.
+   * Firefox references the extension URI as its origin.
+   * Any other origin value is a security risk.
+   *
+   * @param messageOrigin - The origin of the window message
+   */
+  private isFromExtensionOrigin(messageOrigin: string): boolean {
+    return this.extensionOriginsSet.has(messageOrigin);
+  }
+
+  /**
+   * Handles mutations to the iframe element. The ensures that the iframe
+   * element's styles are not modified by a third party source.
+   *
+   * @param mutations - The mutations to the iframe element
+   */
+  private handleMutations = (mutations: MutationRecord[]) => {
+    for (let index = 0; index < mutations.length; index++) {
+      const mutation = mutations[index];
+      if (mutation.type !== "attributes" || mutation.attributeName !== "style") {
+        continue;
+      }
+
+      this.iframe.removeAttribute("style");
+      this.updateElementStyles(this.iframe, this.iframeStyles);
+    }
+  };
+
+  /**
+   * Observes the iframe element for mutations to its style attribute.
+   */
+  private observeIframe() {
+    this.iframeMutationObserver.observe(this.iframe, { attributes: true });
+  }
+
+  /**
+   * Unobserves the iframe element for mutations to its style attribute.
+   */
+  private unobserveIframe() {
+    this.iframeMutationObserver.disconnect();
+  }
+}
+
+export default AutofillOverlayIframeService;
diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-list-iframe.spec.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-list-iframe.spec.ts
new file mode 100644
index 00000000000..5ba39eb0023
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-list-iframe.spec.ts
@@ -0,0 +1,19 @@
+import AutofillOverlayIframeElement from "./autofill-overlay-iframe-element";
+import AutofillOverlayListIframe from "./autofill-overlay-list-iframe";
+
+describe("AutofillOverlayListIframe", () => {
+  window.customElements.define("autofill-overlay-list-iframe", AutofillOverlayListIframe);
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it("creates a custom element that is an instance of the AutofillIframeElement parent class", () => {
+    document.body.innerHTML = "<autofill-overlay-list-iframe></autofill-overlay-list-iframe>";
+
+    const iframe = document.querySelector("autofill-overlay-list-iframe");
+
+    expect(iframe).toBeInstanceOf(AutofillOverlayListIframe);
+    expect(iframe).toBeInstanceOf(AutofillOverlayIframeElement);
+  });
+});
diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-list-iframe.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-list-iframe.ts
new file mode 100644
index 00000000000..26a0ed2765e
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-list-iframe.ts
@@ -0,0 +1,25 @@
+import { AutofillOverlayPort } from "../../utils/autofill-overlay.enum";
+
+import AutofillOverlayIframeElement from "./autofill-overlay-iframe-element";
+
+class AutofillOverlayListIframe extends AutofillOverlayIframeElement {
+  constructor() {
+    super(
+      "overlay/list.html",
+      AutofillOverlayPort.List,
+      {
+        height: "0px",
+        minWidth: "250px",
+        maxHeight: "180px",
+        boxShadow: "rgba(0, 0, 0, 0.1) 2px 4px 6px 0px",
+        borderRadius: "4px",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "rgb(206, 212, 220)",
+      },
+      chrome.i18n.getMessage("bitwardenVault")
+    );
+  }
+}
+
+export default AutofillOverlayListIframe;
diff --git a/apps/browser/src/autofill/overlay/pages/button/__snapshots__/autofill-overlay-button.spec.ts.snap b/apps/browser/src/autofill/overlay/pages/button/__snapshots__/autofill-overlay-button.spec.ts.snap
new file mode 100644
index 00000000000..61a8b49df29
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/button/__snapshots__/autofill-overlay-button.spec.ts.snap
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AutofillOverlayButton initAutofillOverlayButton creates the button element with the locked icon when the user's auth status is not Unlocked 1`] = `
+<button
+  aria-label="toggleBitwardenVaultOverlay"
+  class="overlay-button"
+  tabindex="-1"
+  type="button"
+>
+  <svg
+    aria-hidden="true"
+    class="overlay-button-svg-icon logo-locked-icon"
+    fill="none"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      clip-path="url(#a)"
+    >
+      <path
+        d="M12.66.175A.566.566 0 0 0 12.25 0H1.75a.559.559 0 0 0-.409.175.561.561 0 0 0-.175.41v7c.002.532.105 1.06.305 1.554.189.488.444.948.756 1.368.322.42.682.81 1.076 1.163.365.335.75.649 1.152.939.35.248.718.483 1.103.706.385.222.656.372.815.45.16.08.29.141.386.182A.53.53 0 0 0 7 14a.509.509 0 0 0 .238-.055c.098-.043.225-.104.387-.182.162-.079.438-.23.816-.45.378-.222.75-.459 1.102-.707.403-.29.788-.604 1.154-.939a8.435 8.435 0 0 0 1.076-1.163c.312-.42.567-.88.757-1.367a4.19 4.19 0 0 0 .304-1.555v-7a.55.55 0 0 0-.174-.407Z"
+        fill="#175DDC"
+      />
+      <path
+        d="M7 12.365s4.306-2.18 4.306-4.717V1.5H7v10.865Z"
+        fill="#fff"
+      />
+      <circle
+        cx="12.889"
+        cy="12.889"
+        fill="#F8F9FA"
+        r="4.889"
+      />
+      <path
+        d="M11.26 11.717h2.37v-.848c0-.313-.116-.58-.348-.8a1.17 1.17 0 0 0-.838-.332c-.327 0-.606.11-.838.332a1.066 1.066 0 0 0-.347.8v.848Zm3.851.424v2.546a.4.4 0 0 1-.13.3.44.44 0 0 1-.314.124h-4.445a.44.44 0 0 1-.315-.124.4.4 0 0 1-.13-.3V12.14a.4.4 0 0 1 .13-.3.44.44 0 0 1 .315-.124h.148v-.848c0-.542.204-1.008.612-1.397a2.044 2.044 0 0 1 1.462-.583c.568 0 1.056.194 1.463.583.408.39.611.855.611 1.397v.848h.149a.44.44 0 0 1 .315.124.4.4 0 0 1 .13.3Z"
+        fill="#555"
+      />
+    </g>
+    <defs>
+      <clippath
+        id="a"
+      >
+        <rect
+          fill="#fff"
+          height="16"
+          rx="2"
+          width="16"
+        />
+      </clippath>
+    </defs>
+  </svg>
+</button>
+`;
+
+exports[`AutofillOverlayButton initAutofillOverlayButton creates the button element with the normal icon when the user's auth status is Unlocked  1`] = `
+<button
+  aria-label="toggleBitwardenVaultOverlay"
+  class="overlay-button"
+  tabindex="-1"
+  type="button"
+>
+  <svg
+    aria-hidden="true"
+    class="overlay-button-svg-icon logo-icon"
+    fill="none"
+    height="14"
+    viewBox="0 0 14 14"
+    width="14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.66.175A.566.566 0 0 0 12.25 0H1.75a.559.559 0 0 0-.409.175.561.561 0 0 0-.175.41v7c.002.532.105 1.06.305 1.554.189.488.444.948.756 1.368.322.42.682.81 1.076 1.163.365.335.75.649 1.152.939.35.248.718.483 1.103.706.385.222.656.372.815.45.16.08.29.141.386.182A.53.53 0 0 0 7 14a.509.509 0 0 0 .238-.055c.098-.043.225-.104.387-.182.162-.079.438-.23.816-.45.378-.222.75-.459 1.102-.707.403-.29.788-.604 1.154-.939a8.435 8.435 0 0 0 1.076-1.163c.312-.42.567-.88.757-1.367a4.19 4.19 0 0 0 .304-1.555v-7a.55.55 0 0 0-.174-.407Z"
+      fill="#175DDC"
+    />
+    <path
+      d="M7 12.365s4.306-2.18 4.306-4.717V1.5H7v10.865Z"
+      fill="#fff"
+    />
+  </svg>
+</button>
+`;
diff --git a/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.spec.ts b/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.spec.ts
new file mode 100644
index 00000000000..a4d0b336225
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.spec.ts
@@ -0,0 +1,92 @@
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+
+import { createInitAutofillOverlayButtonMessageMock } from "../../../jest/autofill-mocks";
+import { postWindowMessage } from "../../../jest/testing-utils";
+
+import AutofillOverlayButton from "./autofill-overlay-button";
+
+describe("AutofillOverlayButton", () => {
+  globalThis.customElements.define("autofill-overlay-button", AutofillOverlayButton);
+
+  let autofillOverlayButton: AutofillOverlayButton;
+
+  beforeEach(() => {
+    document.body.innerHTML = `<autofill-overlay-button></autofill-overlay-button>`;
+    autofillOverlayButton = document.querySelector("autofill-overlay-button");
+    autofillOverlayButton["messageOrigin"] = "https://localhost/";
+    jest.spyOn(globalThis.document, "createElement");
+    jest.spyOn(globalThis.parent, "postMessage");
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("initAutofillOverlayButton", () => {
+    it("creates the button element with the locked icon when the user's auth status is not Unlocked", () => {
+      postWindowMessage(
+        createInitAutofillOverlayButtonMessageMock({ authStatus: AuthenticationStatus.Locked })
+      );
+
+      expect(autofillOverlayButton["buttonElement"]).toMatchSnapshot();
+      expect(autofillOverlayButton["buttonElement"].querySelector("svg")).toBe(
+        autofillOverlayButton["logoLockedIconElement"]
+      );
+    });
+
+    it("creates the button element with the normal icon when the user's auth status is Unlocked ", () => {
+      postWindowMessage(createInitAutofillOverlayButtonMessageMock());
+
+      expect(autofillOverlayButton["buttonElement"]).toMatchSnapshot();
+      expect(autofillOverlayButton["buttonElement"].querySelector("svg")).toBe(
+        autofillOverlayButton["logoIconElement"]
+      );
+    });
+
+    it("posts a message to the background indicating that the icon was clicked", () => {
+      postWindowMessage(createInitAutofillOverlayButtonMessageMock());
+      autofillOverlayButton["buttonElement"].click();
+
+      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
+        { command: "overlayButtonClicked" },
+        "https://localhost/"
+      );
+    });
+  });
+
+  describe("global event listeners", () => {
+    beforeEach(() => {
+      postWindowMessage(createInitAutofillOverlayButtonMessageMock());
+    });
+
+    it("does not post a message to close the autofill overlay if the element is focused during the focus check", () => {
+      jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(true);
+
+      postWindowMessage({ command: "checkAutofillOverlayButtonFocused" });
+
+      expect(globalThis.parent.postMessage).not.toHaveBeenCalled();
+    });
+
+    it("posts a message to close the autofill overlay if the element is not focused during the focus check", () => {
+      jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false);
+
+      postWindowMessage({ command: "checkAutofillOverlayButtonFocused" });
+
+      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
+        { command: "closeAutofillOverlay" },
+        "https://localhost/"
+      );
+    });
+
+    it("updates the user's auth status", () => {
+      autofillOverlayButton["authStatus"] = AuthenticationStatus.Locked;
+
+      postWindowMessage({
+        command: "updateAutofillOverlayButtonAuthStatus",
+        authStatus: AuthenticationStatus.Unlocked,
+      });
+
+      expect(autofillOverlayButton["authStatus"]).toBe(AuthenticationStatus.Unlocked);
+    });
+  });
+});
diff --git a/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.ts b/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.ts
new file mode 100644
index 00000000000..7b3acdac9e5
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.ts
@@ -0,0 +1,108 @@
+import "@webcomponents/custom-elements";
+import "lit/polyfill-support.js";
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+
+import { EVENTS } from "../../../constants";
+import { logoIcon, logoLockedIcon } from "../../../utils/svg-icons";
+import { buildSvgDomElement } from "../../../utils/utils";
+import {
+  InitAutofillOverlayButtonMessage,
+  OverlayButtonWindowMessageHandlers,
+} from "../../abstractions/autofill-overlay-button";
+import AutofillOverlayPageElement from "../shared/autofill-overlay-page-element";
+
+class AutofillOverlayButton extends AutofillOverlayPageElement {
+  private authStatus: AuthenticationStatus = AuthenticationStatus.LoggedOut;
+  private readonly buttonElement: HTMLButtonElement;
+  private readonly logoIconElement: HTMLElement;
+  private readonly logoLockedIconElement: HTMLElement;
+  private readonly overlayButtonWindowMessageHandlers: OverlayButtonWindowMessageHandlers = {
+    initAutofillOverlayButton: ({ message }) => this.initAutofillOverlayButton(message),
+    checkAutofillOverlayButtonFocused: () => this.checkButtonFocused(),
+    updateAutofillOverlayButtonAuthStatus: ({ message }) =>
+      this.updateAuthStatus(message.authStatus),
+  };
+
+  constructor() {
+    super();
+
+    this.buttonElement = globalThis.document.createElement("button");
+
+    this.setupGlobalListeners(this.overlayButtonWindowMessageHandlers);
+
+    this.logoIconElement = buildSvgDomElement(logoIcon);
+    this.logoIconElement.classList.add("overlay-button-svg-icon", "logo-icon");
+
+    this.logoLockedIconElement = buildSvgDomElement(logoLockedIcon);
+    this.logoLockedIconElement.classList.add("overlay-button-svg-icon", "logo-locked-icon");
+  }
+
+  /**
+   * Initializes the overlay button. Facilitates ensuring that the page
+   * is set up with the expected styles and translations.
+   *
+   * @param authStatus - The authentication status of the user
+   * @param styleSheetUrl - The URL of the stylesheet to apply to the page
+   * @param translations - The translations to apply to the page
+   * @private
+   */
+  private async initAutofillOverlayButton({
+    authStatus,
+    styleSheetUrl,
+    translations,
+  }: InitAutofillOverlayButtonMessage) {
+    const linkElement = this.initOverlayPage("button", styleSheetUrl, translations);
+
+    this.buttonElement.tabIndex = -1;
+    this.buttonElement.type = "button";
+    this.buttonElement.classList.add("overlay-button");
+    this.buttonElement.setAttribute(
+      "aria-label",
+      this.getTranslation("toggleBitwardenVaultOverlay")
+    );
+    this.buttonElement.addEventListener(EVENTS.CLICK, this.handleButtonElementClick);
+
+    this.updateAuthStatus(authStatus);
+
+    this.shadowDom.append(linkElement, this.buttonElement);
+  }
+
+  /**
+   * Updates the authentication status of the user. This will update the icon
+   * displayed on the button.
+   *
+   * @param authStatus - The authentication status of the user
+   */
+  private updateAuthStatus(authStatus: AuthenticationStatus) {
+    this.authStatus = authStatus;
+
+    this.buttonElement.innerHTML = "";
+    const iconElement =
+      this.authStatus === AuthenticationStatus.Unlocked
+        ? this.logoIconElement
+        : this.logoLockedIconElement;
+    this.buttonElement.append(iconElement);
+  }
+
+  /**
+   * Handles a click event on the button element. Posts a message to the
+   * parent window indicating that the button was clicked.
+   */
+  private handleButtonElementClick = () => {
+    this.postMessageToParent({ command: "overlayButtonClicked" });
+  };
+
+  /**
+   * Checks if the button is focused. If it is not, then it posts a message
+   * to the parent window indicating that the overlay should be closed.
+   */
+  private checkButtonFocused() {
+    if (globalThis.document.hasFocus()) {
+      return;
+    }
+
+    this.postMessageToParent({ command: "closeAutofillOverlay" });
+  }
+}
+
+export default AutofillOverlayButton;
diff --git a/apps/browser/src/autofill/overlay/pages/button/bootstrap-autofill-overlay-button.ts b/apps/browser/src/autofill/overlay/pages/button/bootstrap-autofill-overlay-button.ts
new file mode 100644
index 00000000000..f7e98cbd1eb
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/button/bootstrap-autofill-overlay-button.ts
@@ -0,0 +1,9 @@
+import { AutofillOverlayElement } from "../../../utils/autofill-overlay.enum";
+
+import AutofillOverlayButton from "./autofill-overlay-button";
+
+require("./button.scss");
+
+(function () {
+  globalThis.customElements.define(AutofillOverlayElement.Button, AutofillOverlayButton);
+})();
diff --git a/apps/browser/src/autofill/overlay/pages/button/button.html b/apps/browser/src/autofill/overlay/pages/button/button.html
new file mode 100644
index 00000000000..de553e008d9
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/button/button.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Bitwarden overlay button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="color-scheme" content="normal" />
+  </head>
+  <body>
+    <autofill-overlay-button></autofill-overlay-button>
+  </body>
+</html>
diff --git a/apps/browser/src/autofill/overlay/pages/button/button.scss b/apps/browser/src/autofill/overlay/pages/button/button.scss
new file mode 100644
index 00000000000..79a48583a99
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/button/button.scss
@@ -0,0 +1,36 @@
+@import "../../../shared/styles/variables";
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 100%;
+  min-width: 100vw;
+  height: 100%;
+  min-height: 100vh;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  overflow: hidden;
+}
+autofill-overlay-button {
+  width: 100%;
+  height: auto;
+}
+
+.overlay-button {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: auto;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+
+  .overlay-button-svg-icon {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+}
diff --git a/apps/browser/src/autofill/overlay/pages/list/__snapshots__/autofill-overlay-list.spec.ts.snap b/apps/browser/src/autofill/overlay/pages/list/__snapshots__/autofill-overlay-list.spec.ts.snap
new file mode 100644
index 00000000000..ddee3d5ee33
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/list/__snapshots__/autofill-overlay-list.spec.ts.snap
@@ -0,0 +1,542 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AutofillOverlayList initAutofillOverlayList the list of ciphers for an authenticated user creates the view for a list of ciphers 1`] = `
+<div
+  aria-modal="true"
+  class="overlay-list-container light"
+  role="dialog"
+>
+  <ul
+    class="overlay-actions-list"
+    role="list"
+  >
+    <li
+      class="overlay-actions-list-item"
+      role="listitem"
+    >
+      <div
+        class="cipher-container"
+      >
+        <button
+          aria-description="partialUsername, username1"
+          aria-label="fillCredentialsFor website login 1"
+          class="fill-cipher-button"
+          tabindex="-1"
+        >
+          <span
+            aria-hidden="true"
+            class="cipher-icon"
+            style="background-image: url(https://jest-testing-website.com/image.png);"
+          />
+          <span
+            class="cipher-details"
+          >
+            <span
+              class="cipher-name"
+              title="website login 1"
+            >
+              website login 1
+            </span>
+            <span
+              class="cipher-user-login"
+              title="username1"
+            >
+              username1
+            </span>
+          </span>
+        </button>
+        <button
+          aria-label="view website login 1, opensInANewWindow"
+          class="view-cipher-button"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            fill="none"
+            height="20"
+            viewBox="0 0 20 20"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#a)"
+            >
+              <path
+                d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
+                fill="#175DDC"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="a"
+              >
+                <path
+                  d="M0 .113h20v19.773H0z"
+                  fill="#fff"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </button>
+      </div>
+    </li>
+    <li
+      class="overlay-actions-list-item"
+      role="listitem"
+    >
+      <div
+        class="cipher-container"
+      >
+        <button
+          aria-description="partialUsername, username2"
+          aria-label="fillCredentialsFor website login 2"
+          class="fill-cipher-button"
+          tabindex="-1"
+        >
+          <span
+            aria-hidden="true"
+            class="cipher-icon bwi bw-icon"
+          />
+          <span
+            class="cipher-details"
+          >
+            <span
+              class="cipher-name"
+              title="website login 2"
+            >
+              website login 2
+            </span>
+            <span
+              class="cipher-user-login"
+              title="username2"
+            >
+              username2
+            </span>
+          </span>
+        </button>
+        <button
+          aria-label="view website login 2, opensInANewWindow"
+          class="view-cipher-button"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            fill="none"
+            height="20"
+            viewBox="0 0 20 20"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#a)"
+            >
+              <path
+                d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
+                fill="#175DDC"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="a"
+              >
+                <path
+                  d="M0 .113h20v19.773H0z"
+                  fill="#fff"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </button>
+      </div>
+    </li>
+    <li
+      class="overlay-actions-list-item"
+      role="listitem"
+    >
+      <div
+        class="cipher-container"
+      >
+        <button
+          aria-description="partialUsername, "
+          aria-label="fillCredentialsFor "
+          class="fill-cipher-button"
+          tabindex="-1"
+        >
+          <span
+            aria-hidden="true"
+            class="cipher-icon bwi bw-icon"
+          />
+          <span
+            class="cipher-details"
+          />
+        </button>
+        <button
+          aria-label="view , opensInANewWindow"
+          class="view-cipher-button"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            fill="none"
+            height="20"
+            viewBox="0 0 20 20"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#a)"
+            >
+              <path
+                d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
+                fill="#175DDC"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="a"
+              >
+                <path
+                  d="M0 .113h20v19.773H0z"
+                  fill="#fff"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </button>
+      </div>
+    </li>
+    <li
+      class="overlay-actions-list-item"
+      role="listitem"
+    >
+      <div
+        class="cipher-container"
+      >
+        <button
+          aria-description="partialUsername, username4"
+          aria-label="fillCredentialsFor website login 4"
+          class="fill-cipher-button"
+          tabindex="-1"
+        >
+          <span
+            aria-hidden="true"
+            class="cipher-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              height="25"
+              viewBox="0 0 24 25"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M18.026 17.842c-1.418 1.739-3.517 2.84-5.86 2.84a7.364 7.364 0 0 1-3.431-.848l.062-.15.062-.151.063-.157c.081-.203.17-.426.275-.646.133-.28.275-.522.426-.68.026-.028.101-.075.275-.115.165-.037.376-.059.629-.073.138-.008.288-.014.447-.02.399-.016.847-.034 1.266-.092.314-.044.566-.131.755-.271a.884.884 0 0 0 .352-.555c.037-.2.008-.392-.03-.543-.035-.135-.084-.264-.12-.355l-.01-.03a4.26 4.26 0 0 0-.145-.33c-.126-.264-.237-.497-.288-1.085-.03-.344.09-.73.251-1.138l.089-.22c.05-.123.1-.247.14-.355.064-.171.129-.375.129-.566a1.51 1.51 0 0 0-.134-.569 2.573 2.573 0 0 0-.319-.547c-.246-.323-.635-.669-1.093-.669-.44 0-1.006.169-1.487.368-.246.102-.48.216-.68.33-.192.111-.372.235-.492.359-.93.96-1.48 1.239-1.81 1.258-.277.017-.478-.15-.736-.525a9.738 9.738 0 0 1-.19-.29l-.006-.01a11.568 11.568 0 0 0-.198-.305 2.76 2.76 0 0 0-.521-.6 1.39 1.39 0 0 0-1.088-.314 8.302 8.302 0 0 1 1.987-3.936c.055.342.146.626.272.856.23.42.561.64.926.716.406.086.857-.061 1.26-.216.125-.047.248-.097.372-.147.309-.125.618-.25.947-.341.26-.072.581-.057.959.012.264.049.529.118.8.19l.36.091c.379.094.782.178 1.135.148.374-.032.733-.197.934-.623a.874.874 0 0 0 .024-.752c-.087-.197-.24-.355-.35-.47-.26-.267-.412-.427-.412-.685 0-.125.037-.2.09-.263a.982.982 0 0 1 .303-.211c.059-.03.119-.058.183-.089l.036-.016a3.79 3.79 0 0 0 .236-.118c.047-.026.098-.056.148-.093 1.936.747 3.51 2.287 4.368 4.249a7.739 7.739 0 0 0-.031-.004c-.38-.047-.738-.056-1.063.061-.34.123-.603.368-.817.74-.122.211-.284.43-.463.67l-.095.129c-.207.281-.431.595-.58.92-.15.326-.245.705-.142 1.103.104.397.387.738.837 1.036.099.065.225.112.314.145l.02.008c.108.04.195.074.268.117.07.042.106.08.124.114.017.03.037.087.022.206-.047.376-.069.73-.052 1.034.017.292.071.59.218.809.118.174.12.421.108.786v.01a2.46 2.46 0 0 0 .021.518.809.809 0 0 0 .15.35Zm1.357.059a9.654 9.654 0 0 0 1.62-5.386c0-5.155-3.957-9.334-8.836-9.334-4.88 0-8.836 4.179-8.836 9.334 0 3.495 1.82 6.543 4.513 8.142v.093h.161a8.426 8.426 0 0 0 4.162 1.098c2.953 0 5.568-1.53 7.172-3.882a.569.569 0 0 0 .048-.062l-.004-.003ZM8.152 19.495a43.345 43.345 0 0 1 .098-.238l.057-.142c.082-.205.182-.455.297-.698.143-.301.323-.624.552-.864.163-.172.392-.254.602-.302.219-.05.473-.073.732-.088.162-.01.328-.016.495-.023.386-.015.782-.03 1.168-.084.255-.036.392-.099.461-.15.06-.045.076-.084.083-.12a.534.534 0 0 0-.02-.223 2.552 2.552 0 0 0-.095-.278l-.01-.027a3.128 3.128 0 0 0-.104-.232c-.134-.282-.31-.65-.374-1.381-.046-.533.138-1.063.3-1.472.035-.09.069-.172.1-.249.046-.11.086-.21.123-.31.062-.169.083-.264.083-.312a.812.812 0 0 0-.076-.283 1.867 1.867 0 0 0-.23-.394c-.21-.274-.428-.408-.577-.408-.315 0-.788.13-1.246.32a5.292 5.292 0 0 0-.603.293 1.727 1.727 0 0 0-.347.244c-.936.968-1.641 1.421-2.235 1.457-.646.04-1.036-.413-1.31-.813-.07-.103-.139-.21-.203-.311l-.005-.007c-.064-.101-.125-.197-.188-.29a2.098 2.098 0 0 0-.387-.453.748.748 0 0 0-.436-.18c-.1-.006-.22.005-.365.046a8.707 8.707 0 0 0-.056.992c0 2.957 1.488 5.547 3.716 6.98Zm10.362-2.316.003-.192.002-.046c.01-.305.026-.786-.232-1.169-.036-.054-.082-.189-.096-.444-.014-.243.003-.55.047-.9a1.051 1.051 0 0 0-.105-.649.987.987 0 0 0-.374-.374 2.285 2.285 0 0 0-.367-.166h-.003a1.243 1.243 0 0 1-.205-.088c-.369-.244-.505-.46-.549-.629-.044-.168-.015-.364.099-.61.115-.25.297-.511.507-.796l.089-.12c.178-.239.368-.495.512-.745.152-.263.302-.382.466-.441.18-.065.416-.073.77-.03.142.018.275.04.397.063.274.837.423 1.736.423 2.671a8.45 8.45 0 0 1-1.384 4.665Zm-4.632-12.63a7.362 7.362 0 0 0-1.715-.201c-1.89 0-3.621.716-4.965 1.905.025.54.12.887.24 1.105.13.238.295.34.482.38.2.042.484-.027.905-.188l.328-.13c.32-.13.681-.275 1.048-.377.398-.111.833-.075 1.24 0 .289.053.59.132.871.205l.326.084c.383.094.694.151.932.13.216-.017.326-.092.395-.237.039-.083.027-.114.014-.144-.027-.062-.088-.136-.212-.264l-.043-.044c-.218-.222-.567-.578-.567-1.142 0-.305.101-.547.262-.734.137-.159.308-.267.46-.347Z"
+                fill="#777"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
+          <span
+            class="cipher-details"
+          >
+            <span
+              class="cipher-name"
+              title="website login 4"
+            >
+              website login 4
+            </span>
+            <span
+              class="cipher-user-login"
+              title="username4"
+            >
+              username4
+            </span>
+          </span>
+        </button>
+        <button
+          aria-label="view website login 4, opensInANewWindow"
+          class="view-cipher-button"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            fill="none"
+            height="20"
+            viewBox="0 0 20 20"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#a)"
+            >
+              <path
+                d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
+                fill="#175DDC"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="a"
+              >
+                <path
+                  d="M0 .113h20v19.773H0z"
+                  fill="#fff"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </button>
+      </div>
+    </li>
+    <li
+      class="overlay-actions-list-item"
+      role="listitem"
+    >
+      <div
+        class="cipher-container"
+      >
+        <button
+          aria-description="partialUsername, username5"
+          aria-label="fillCredentialsFor website login 5"
+          class="fill-cipher-button"
+          tabindex="-1"
+        >
+          <span
+            aria-hidden="true"
+            class="cipher-icon"
+            style="background-image: url(https://jest-testing-website.com/image.png);"
+          />
+          <span
+            class="cipher-details"
+          >
+            <span
+              class="cipher-name"
+              title="website login 5"
+            >
+              website login 5
+            </span>
+            <span
+              class="cipher-user-login"
+              title="username5"
+            >
+              username5
+            </span>
+          </span>
+        </button>
+        <button
+          aria-label="view website login 5, opensInANewWindow"
+          class="view-cipher-button"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            fill="none"
+            height="20"
+            viewBox="0 0 20 20"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#a)"
+            >
+              <path
+                d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
+                fill="#175DDC"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="a"
+              >
+                <path
+                  d="M0 .113h20v19.773H0z"
+                  fill="#fff"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </button>
+      </div>
+    </li>
+    <li
+      class="overlay-actions-list-item"
+      role="listitem"
+    >
+      <div
+        class="cipher-container"
+      >
+        <button
+          aria-description="partialUsername, username6"
+          aria-label="fillCredentialsFor website login 6"
+          class="fill-cipher-button"
+          tabindex="-1"
+        >
+          <span
+            aria-hidden="true"
+            class="cipher-icon"
+            style="background-image: url(https://jest-testing-website.com/image.png);"
+          />
+          <span
+            class="cipher-details"
+          >
+            <span
+              class="cipher-name"
+              title="website login 6"
+            >
+              website login 6
+            </span>
+            <span
+              class="cipher-user-login"
+              title="username6"
+            >
+              username6
+            </span>
+          </span>
+        </button>
+        <button
+          aria-label="view website login 6, opensInANewWindow"
+          class="view-cipher-button"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            fill="none"
+            height="20"
+            viewBox="0 0 20 20"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#a)"
+            >
+              <path
+                d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
+                fill="#175DDC"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="a"
+              >
+                <path
+                  d="M0 .113h20v19.773H0z"
+                  fill="#fff"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </button>
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`AutofillOverlayList initAutofillOverlayList the locked overlay for an unauthenticated user creates the views for the locked overlay 1`] = `
+<div
+  aria-modal="true"
+  class="overlay-list-container light"
+  role="dialog"
+>
+  <div
+    class="locked-overlay overlay-list-message"
+    id="locked-overlay-description"
+  >
+    unlockYourAccount
+  </div>
+  <div
+    class="overlay-list-button-container"
+  >
+    <button
+      aria-label="unlockAccount, opensInANewWindow"
+      class="unlock-button overlay-list-button"
+      id="unlock-button"
+      tabindex="-1"
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        height="17"
+        viewBox="0 0 17 17"
+        width="17"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          clip-path="url(#a)"
+        >
+          <path
+            d="M8.799 11.633a.68.68 0 0 0-.639.422.695.695 0 0 0-.054.264.682.682 0 0 0 .374.6v1.13a.345.345 0 1 0 .693 0v-1.17a.68.68 0 0 0 .315-.56.695.695 0 0 0-.204-.486.682.682 0 0 0-.485-.2Zm4.554-4.657h-7.11a.438.438 0 0 1-.406-.26A3.81 3.81 0 0 1 5.584 4.3c.112-.435.312-.842.588-1.195A3.196 3.196 0 0 1 7.19 2.25a3.468 3.468 0 0 1 3.225-.059A3.62 3.62 0 0 1 11.94 3.71l.327.59a.502.502 0 1 0 .885-.483l-.307-.552a4.689 4.689 0 0 0-2.209-2.078 4.466 4.466 0 0 0-3.936.185A4.197 4.197 0 0 0 5.37 2.49a4.234 4.234 0 0 0-.768 1.565 4.714 4.714 0 0 0 .162 2.682.182.182 0 0 1-.085.22.173.173 0 0 1-.082.02h-.353a1.368 1.368 0 0 0-1.277.842c-.07.168-.107.348-.109.53v7.1a1.392 1.392 0 0 0 .412.974 1.352 1.352 0 0 0 .974.394h9.117c.363.001.711-.142.97-.4a1.39 1.39 0 0 0 .407-.972v-7.1a1.397 1.397 0 0 0-.414-.973 1.368 1.368 0 0 0-.972-.396Zm.37 8.469a.373.373 0 0 1-.11.26.364.364 0 0 1-.26.107H4.246a.366.366 0 0 1-.26-.107.374.374 0 0 1-.11-.261V8.349a.374.374 0 0 1 .11-.26.366.366 0 0 1 .26-.108h9.116a.366.366 0 0 1 .37.367l-.008 7.097Z"
+            fill="#175DDC"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="a"
+          >
+            <path
+              d="M.798.817h16v16h-16z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
+      </svg>
+      unlockAccount
+    </button>
+  </div>
+</div>
+`;
+
+exports[`AutofillOverlayList initAutofillOverlayList the overlay with an empty list of ciphers creates the views for the no results overlay 1`] = `
+<div
+  aria-modal="true"
+  class="overlay-list-container light"
+  role="dialog"
+>
+  <div
+    class="no-items overlay-list-message"
+  >
+    noItemsToShow
+  </div>
+  <div
+    class="overlay-list-button-container"
+  >
+    <button
+      aria-label="addNewVaultItem, opensInANewWindow"
+      class="add-new-item-button overlay-list-button"
+      id="new-item-button"
+      tabindex="-1"
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        height="17"
+        viewBox="0 0 16 17"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          clip-path="url(#a)"
+        >
+          <path
+            d="M15.222 7.914H8.963a.471.471 0 0 1-.34-.147.512.512 0 0 1-.142-.353V.99c0-.133-.05-.26-.14-.354a.471.471 0 0 0-.68 0 .51.51 0 0 0-.142.354v6.424c0 .132-.051.26-.142.353a.474.474 0 0 1-.34.147H.777a.47.47 0 0 0-.34.146.5.5 0 0 0-.14.354.522.522 0 0 0 .14.353.48.48 0 0 0 .34.147h6.26c.128 0 .25.052.34.146.09.094.142.221.142.354v6.576c0 .132.05.26.14.353a.471.471 0 0 0 .68 0 .512.512 0 0 0 .142-.353V9.414c0-.133.051-.26.142-.354a.474.474 0 0 1 .34-.146h6.26c.127 0 .25-.053.34-.147a.511.511 0 0 0 0-.707.472.472 0 0 0-.34-.146Z"
+            fill="#175DDC"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="a"
+          >
+            <path
+              d="M0 .49h16v16H0z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
+      </svg>
+      newItem
+    </button>
+  </div>
+</div>
+`;
diff --git a/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.spec.ts b/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.spec.ts
new file mode 100644
index 00000000000..358b003401d
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.spec.ts
@@ -0,0 +1,389 @@
+import { mock } from "jest-mock-extended";
+
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+
+import { createInitAutofillOverlayListMessageMock } from "../../../jest/autofill-mocks";
+import { postWindowMessage } from "../../../jest/testing-utils";
+
+import AutofillOverlayList from "./autofill-overlay-list";
+
+describe("AutofillOverlayList", () => {
+  globalThis.customElements.define("autofill-overlay-list", AutofillOverlayList);
+  global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }));
+
+  let autofillOverlayList: AutofillOverlayList;
+
+  beforeEach(() => {
+    document.body.innerHTML = `<autofill-overlay-list></autofill-overlay-list>`;
+    autofillOverlayList = document.querySelector("autofill-overlay-list");
+    autofillOverlayList["messageOrigin"] = "https://localhost/";
+    jest.spyOn(globalThis.document, "createElement");
+    jest.spyOn(globalThis.parent, "postMessage");
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("initAutofillOverlayList", () => {
+    describe("the locked overlay for an unauthenticated user", () => {
+      beforeEach(() => {
+        postWindowMessage(
+          createInitAutofillOverlayListMessageMock({
+            authStatus: AuthenticationStatus.Locked,
+            cipherList: [],
+          })
+        );
+      });
+
+      it("creates the views for the locked overlay", () => {
+        expect(autofillOverlayList["overlayListContainer"]).toMatchSnapshot();
+      });
+
+      it("allows the user to unlock the vault", () => {
+        const unlockButton =
+          autofillOverlayList["overlayListContainer"].querySelector("#unlock-button");
+
+        unlockButton.dispatchEvent(new Event("click"));
+
+        expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
+          { command: "unlockVault" },
+          "https://localhost/"
+        );
+      });
+    });
+
+    describe("the overlay with an empty list of ciphers", () => {
+      beforeEach(() => {
+        postWindowMessage(
+          createInitAutofillOverlayListMessageMock({
+            authStatus: AuthenticationStatus.Unlocked,
+            ciphers: [],
+          })
+        );
+      });
+
+      it("creates the views for the no results overlay", () => {
+        expect(autofillOverlayList["overlayListContainer"]).toMatchSnapshot();
+      });
+
+      it("allows the user to add a vault item", () => {
+        const addVaultItemButton =
+          autofillOverlayList["overlayListContainer"].querySelector("#new-item-button");
+
+        addVaultItemButton.dispatchEvent(new Event("click"));
+
+        expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
+          { command: "addNewVaultItem" },
+          "https://localhost/"
+        );
+      });
+    });
+
+    describe("the list of ciphers for an authenticated user", () => {
+      beforeEach(() => {
+        postWindowMessage(createInitAutofillOverlayListMessageMock());
+      });
+
+      it("creates the view for a list of ciphers", () => {
+        expect(autofillOverlayList["overlayListContainer"]).toMatchSnapshot();
+      });
+
+      it("loads ciphers on scroll one page at a time", () => {
+        jest.useFakeTimers();
+        const originalListOfElements =
+          autofillOverlayList["overlayListContainer"].querySelectorAll(".cipher-container");
+
+        autofillOverlayList["handleCiphersListScrollEvent"]();
+        jest.runAllTimers();
+
+        const updatedListOfElements =
+          autofillOverlayList["overlayListContainer"].querySelectorAll(".cipher-container");
+
+        expect(originalListOfElements.length).toBe(6);
+        expect(updatedListOfElements.length).toBe(8);
+      });
+
+      it("debounces the ciphers scroll handler", () => {
+        jest.useFakeTimers();
+        autofillOverlayList["cipherListScrollDebounceTimeout"] = setTimeout(jest.fn, 0);
+        const handleDebouncedScrollEventSpy = jest.spyOn(
+          autofillOverlayList as any,
+          "handleDebouncedScrollEvent"
+        );
+
+        autofillOverlayList["handleCiphersListScrollEvent"]();
+        jest.advanceTimersByTime(100);
+        autofillOverlayList["handleCiphersListScrollEvent"]();
+        jest.advanceTimersByTime(100);
+        autofillOverlayList["handleCiphersListScrollEvent"]();
+        jest.advanceTimersByTime(400);
+
+        expect(handleDebouncedScrollEventSpy).toHaveBeenCalledTimes(1);
+      });
+
+      describe("fill cipher button event listeners", () => {
+        beforeEach(() => {
+          postWindowMessage(createInitAutofillOverlayListMessageMock());
+        });
+
+        it("allows the user to fill a cipher on click", () => {
+          const fillCipherButton =
+            autofillOverlayList["overlayListContainer"].querySelector(".fill-cipher-button");
+
+          fillCipherButton.dispatchEvent(new Event("click"));
+
+          expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
+            { command: "fillSelectedListItem", overlayCipherId: "1" },
+            "https://localhost/"
+          );
+        });
+
+        it("allows the user to move keyboard focus to the next cipher element on ArrowDown", () => {
+          const fillCipherElements =
+            autofillOverlayList["overlayListContainer"].querySelectorAll(".fill-cipher-button");
+          const firstFillCipherElement = fillCipherElements[0];
+          const secondFillCipherElement = fillCipherElements[1];
+          jest.spyOn(secondFillCipherElement as HTMLElement, "focus");
+
+          firstFillCipherElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" }));
+
+          expect((secondFillCipherElement as HTMLElement).focus).toBeCalled();
+        });
+
+        it("directs focus to the first item in the cipher list if no cipher is present after the current one when pressing ArrowDown", () => {
+          const fillCipherElements =
+            autofillOverlayList["overlayListContainer"].querySelectorAll(".fill-cipher-button");
+          const lastFillCipherElement = fillCipherElements[fillCipherElements.length - 1];
+          const firstFillCipherElement = fillCipherElements[0];
+          jest.spyOn(firstFillCipherElement as HTMLElement, "focus");
+
+          lastFillCipherElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" }));
+
+          expect((firstFillCipherElement as HTMLElement).focus).toBeCalled();
+        });
+
+        it("allows the user to move keyboard focus to the previous cipher element on ArrowUp", () => {
+          const fillCipherElements =
+            autofillOverlayList["overlayListContainer"].querySelectorAll(".fill-cipher-button");
+          const firstFillCipherElement = fillCipherElements[0];
+          const secondFillCipherElement = fillCipherElements[1];
+          jest.spyOn(firstFillCipherElement as HTMLElement, "focus");
+
+          secondFillCipherElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowUp" }));
+
+          expect((firstFillCipherElement as HTMLElement).focus).toBeCalled();
+        });
+
+        it("directs focus to the last item in the cipher list if no cipher is present before the current one when pressing ArrowUp", () => {
+          const fillCipherElements =
+            autofillOverlayList["overlayListContainer"].querySelectorAll(".fill-cipher-button");
+          const firstFillCipherElement = fillCipherElements[0];
+          const lastFillCipherElement = fillCipherElements[fillCipherElements.length - 1];
+          jest.spyOn(lastFillCipherElement as HTMLElement, "focus");
+
+          firstFillCipherElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowUp" }));
+
+          expect((lastFillCipherElement as HTMLElement).focus).toBeCalled();
+        });
+
+        it("allows the user to move keyboard focus to the view cipher button on ArrowRight", () => {
+          const cipherContainerElement =
+            autofillOverlayList["overlayListContainer"].querySelector(".cipher-container");
+          const fillCipherElement = cipherContainerElement.querySelector(".fill-cipher-button");
+          const viewCipherButton = cipherContainerElement.querySelector(".view-cipher-button");
+          jest.spyOn(viewCipherButton as HTMLElement, "focus");
+
+          fillCipherElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowRight" }));
+
+          expect((viewCipherButton as HTMLElement).focus).toBeCalled();
+        });
+
+        it("ignores keyup events that do not include ArrowUp, ArrowDown, or ArrowRight", () => {
+          const fillCipherElement =
+            autofillOverlayList["overlayListContainer"].querySelector(".fill-cipher-button");
+          jest.spyOn(fillCipherElement as HTMLElement, "focus");
+
+          fillCipherElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowLeft" }));
+
+          expect((fillCipherElement as HTMLElement).focus).not.toBeCalled();
+        });
+      });
+
+      describe("view cipher button event listeners", () => {
+        beforeEach(() => {
+          postWindowMessage(createInitAutofillOverlayListMessageMock());
+        });
+
+        it("allows the user to view a cipher on click", () => {
+          const viewCipherButton =
+            autofillOverlayList["overlayListContainer"].querySelector(".view-cipher-button");
+
+          viewCipherButton.dispatchEvent(new Event("click"));
+
+          expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
+            { command: "viewSelectedCipher", overlayCipherId: "1" },
+            "https://localhost/"
+          );
+        });
+
+        it("allows the user to move keyboard focus to the current cipher element on ArrowLeft", () => {
+          const cipherContainerElement =
+            autofillOverlayList["overlayListContainer"].querySelector(".cipher-container");
+          const fillCipherButton = cipherContainerElement.querySelector(".fill-cipher-button");
+          const viewCipherButton = cipherContainerElement.querySelector(".view-cipher-button");
+          jest.spyOn(fillCipherButton as HTMLElement, "focus");
+
+          viewCipherButton.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowLeft" }));
+
+          expect((fillCipherButton as HTMLElement).focus).toBeCalled();
+        });
+
+        it("allows the user to move keyboard to the next cipher element on ArrowDown", () => {
+          const cipherContainerElements =
+            autofillOverlayList["overlayListContainer"].querySelectorAll(".cipher-container");
+          const viewCipherButton = cipherContainerElements[0].querySelector(".view-cipher-button");
+          const secondFillCipherButton =
+            cipherContainerElements[1].querySelector(".fill-cipher-button");
+          jest.spyOn(secondFillCipherButton as HTMLElement, "focus");
+
+          viewCipherButton.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" }));
+
+          expect((secondFillCipherButton as HTMLElement).focus).toBeCalled();
+        });
+
+        it("allows the user to move keyboard focus to the previous cipher element on ArrowUp", () => {
+          const cipherContainerElements =
+            autofillOverlayList["overlayListContainer"].querySelectorAll(".cipher-container");
+          const viewCipherButton = cipherContainerElements[1].querySelector(".view-cipher-button");
+          const firstFillCipherButton =
+            cipherContainerElements[0].querySelector(".fill-cipher-button");
+          jest.spyOn(firstFillCipherButton as HTMLElement, "focus");
+
+          viewCipherButton.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowUp" }));
+
+          expect((firstFillCipherButton as HTMLElement).focus).toBeCalled();
+        });
+
+        it("ignores keyup events that do not include ArrowUp, ArrowDown, or ArrowRight", () => {
+          const viewCipherButton =
+            autofillOverlayList["overlayListContainer"].querySelector(".view-cipher-button");
+          jest.spyOn(viewCipherButton as HTMLElement, "focus");
+
+          viewCipherButton.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowRight" }));
+
+          expect((viewCipherButton as HTMLElement).focus).not.toBeCalled();
+        });
+      });
+    });
+  });
+
+  describe("global event listener handlers", () => {
+    it("does not post a `checkAutofillOverlayButtonFocused` message to the parent if the overlay is currently focused", () => {
+      jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(true);
+
+      postWindowMessage({ command: "checkAutofillOverlayListFocused" });
+
+      expect(globalThis.parent.postMessage).not.toHaveBeenCalled();
+    });
+
+    it("posts a `checkAutofillOverlayButtonFocused` message to the parent if the overlay is not currently focused", () => {
+      jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false);
+
+      postWindowMessage({ command: "checkAutofillOverlayListFocused" });
+
+      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
+        { command: "checkAutofillOverlayButtonFocused" },
+        "https://localhost/"
+      );
+    });
+
+    it("updates the list of ciphers", () => {
+      postWindowMessage(createInitAutofillOverlayListMessageMock());
+      const updateCiphersSpy = jest.spyOn(autofillOverlayList as any, "updateListItems");
+
+      postWindowMessage({ command: "updateOverlayListCiphers" });
+
+      expect(updateCiphersSpy).toHaveBeenCalled();
+    });
+
+    describe("directing user focus into the overlay list", () => {
+      it("focuses the unlock button element if the user is not authenticated", () => {
+        postWindowMessage(
+          createInitAutofillOverlayListMessageMock({
+            authStatus: AuthenticationStatus.Locked,
+            cipherList: [],
+          })
+        );
+        const unlockButton =
+          autofillOverlayList["overlayListContainer"].querySelector("#unlock-button");
+        jest.spyOn(unlockButton as HTMLElement, "focus");
+
+        postWindowMessage({ command: "focusOverlayList" });
+
+        expect((unlockButton as HTMLElement).focus).toBeCalled();
+      });
+
+      it("focuses the new item button element if the cipher list is empty", () => {
+        postWindowMessage(createInitAutofillOverlayListMessageMock({ ciphers: [] }));
+        const newItemButton =
+          autofillOverlayList["overlayListContainer"].querySelector("#new-item-button");
+        jest.spyOn(newItemButton as HTMLElement, "focus");
+
+        postWindowMessage({ command: "focusOverlayList" });
+
+        expect((newItemButton as HTMLElement).focus).toBeCalled();
+      });
+
+      it("focuses the first cipher button element if the cipher list is populated", () => {
+        postWindowMessage(createInitAutofillOverlayListMessageMock());
+        const firstCipherItem =
+          autofillOverlayList["overlayListContainer"].querySelector(".fill-cipher-button");
+        jest.spyOn(firstCipherItem as HTMLElement, "focus");
+
+        postWindowMessage({ command: "focusOverlayList" });
+
+        expect((firstCipherItem as HTMLElement).focus).toBeCalled();
+      });
+    });
+  });
+
+  describe("handleResizeObserver", () => {
+    beforeEach(() => {
+      postWindowMessage(createInitAutofillOverlayListMessageMock());
+    });
+
+    it("ignores resize entries whose target is not the overlay list", () => {
+      const entries = [
+        {
+          target: mock<HTMLElement>(),
+          contentRect: { height: 300 },
+        },
+      ];
+
+      autofillOverlayList["handleResizeObserver"](entries as unknown as ResizeObserverEntry[]);
+
+      expect(globalThis.parent.postMessage).not.toHaveBeenCalled();
+    });
+
+    it("posts a message to update the overlay list height if the list container is resized", () => {
+      const entries = [
+        {
+          target: autofillOverlayList["overlayListContainer"],
+          contentRect: { height: 300 },
+        },
+      ];
+
+      autofillOverlayList["handleResizeObserver"](entries as unknown as ResizeObserverEntry[]);
+
+      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
+        { command: "updateAutofillOverlayListHeight", styles: { height: "300px" } },
+        "https://localhost/"
+      );
+    });
+  });
+});
diff --git a/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts b/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts
new file mode 100644
index 00000000000..77ddd56b34d
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts
@@ -0,0 +1,603 @@
+import "@webcomponents/custom-elements";
+import "lit/polyfill-support.js";
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+
+import { OverlayCipherData } from "../../../background/abstractions/overlay.background";
+import { EVENTS } from "../../../constants";
+import { globeIcon, lockIcon, plusIcon, viewCipherIcon } from "../../../utils/svg-icons";
+import { buildSvgDomElement } from "../../../utils/utils";
+import {
+  InitAutofillOverlayListMessage,
+  OverlayListWindowMessageHandlers,
+} from "../../abstractions/autofill-overlay-list";
+import AutofillOverlayPageElement from "../shared/autofill-overlay-page-element";
+
+class AutofillOverlayList extends AutofillOverlayPageElement {
+  private overlayListContainer: HTMLDivElement;
+  private resizeObserver: ResizeObserver;
+  private eventHandlersMemo: { [key: string]: EventListener } = {};
+  private ciphers: OverlayCipherData[] = [];
+  private ciphersList: HTMLUListElement;
+  private cipherListScrollIsDebounced = false;
+  private cipherListScrollDebounceTimeout: NodeJS.Timeout;
+  private currentCipherIndex = 0;
+  private readonly showCiphersPerPage = 6;
+  private readonly overlayListWindowMessageHandlers: OverlayListWindowMessageHandlers = {
+    initAutofillOverlayList: ({ message }) => this.initAutofillOverlayList(message),
+    checkAutofillOverlayListFocused: () => this.checkOverlayListFocused(),
+    updateOverlayListCiphers: ({ message }) => this.updateListItems(message.ciphers),
+    focusOverlayList: () => this.focusOverlayList(),
+  };
+
+  constructor() {
+    super();
+
+    this.setupOverlayListGlobalListeners();
+  }
+
+  /**
+   * Initializes the overlay list and updates the list items with the passed ciphers.
+   * If the auth status is not `Unlocked`, the locked overlay is built.
+   *
+   * @param translations - The translations to use for the overlay list.
+   * @param styleSheetUrl - The URL of the stylesheet to use for the overlay list.
+   * @param theme - The theme to use for the overlay list.
+   * @param authStatus - The current authentication status.
+   * @param ciphers - The ciphers to display in the overlay list.
+   */
+  private async initAutofillOverlayList({
+    translations,
+    styleSheetUrl,
+    theme,
+    authStatus,
+    ciphers,
+  }: InitAutofillOverlayListMessage) {
+    const linkElement = this.initOverlayPage("button", styleSheetUrl, translations);
+
+    globalThis.document.documentElement.classList.add(theme);
+
+    this.overlayListContainer = globalThis.document.createElement("div");
+    this.overlayListContainer.classList.add("overlay-list-container", theme);
+    this.overlayListContainer.setAttribute("role", "dialog");
+    this.overlayListContainer.setAttribute("aria-modal", "true");
+    this.resizeObserver.observe(this.overlayListContainer);
+
+    this.shadowDom.append(linkElement, this.overlayListContainer);
+
+    if (authStatus === AuthenticationStatus.Unlocked) {
+      this.updateListItems(ciphers);
+      return;
+    }
+
+    this.buildLockedOverlay();
+  }
+
+  /**
+   * Builds the locked overlay, which is displayed when the user is not authenticated.
+   * Facilitates the ability to unlock the extension from the overlay.
+   */
+  private buildLockedOverlay() {
+    const lockedOverlay = globalThis.document.createElement("div");
+    lockedOverlay.id = "locked-overlay-description";
+    lockedOverlay.classList.add("locked-overlay", "overlay-list-message");
+    lockedOverlay.textContent = this.getTranslation("unlockYourAccount");
+
+    const unlockButtonElement = globalThis.document.createElement("button");
+    unlockButtonElement.id = "unlock-button";
+    unlockButtonElement.tabIndex = -1;
+    unlockButtonElement.classList.add("unlock-button", "overlay-list-button");
+    unlockButtonElement.textContent = this.getTranslation("unlockAccount");
+    unlockButtonElement.setAttribute(
+      "aria-label",
+      `${this.getTranslation("unlockAccount")}, ${this.getTranslation("opensInANewWindow")}`
+    );
+    unlockButtonElement.prepend(buildSvgDomElement(lockIcon));
+    unlockButtonElement.addEventListener(EVENTS.CLICK, this.handleUnlockButtonClick);
+
+    const overlayListButtonContainer = globalThis.document.createElement("div");
+    overlayListButtonContainer.classList.add("overlay-list-button-container");
+    overlayListButtonContainer.appendChild(unlockButtonElement);
+
+    this.overlayListContainer.append(lockedOverlay, overlayListButtonContainer);
+  }
+
+  /**
+   * Handles the click event for the unlock button.
+   * Sends a message to the parent window to unlock the vault.
+   */
+  private handleUnlockButtonClick = () => {
+    this.postMessageToParent({ command: "unlockVault" });
+  };
+
+  /**
+   * Updates the list items with the passed ciphers.
+   * If no ciphers are passed, the no results overlay is built.
+   *
+   * @param ciphers - The ciphers to display in the overlay list.
+   */
+  private updateListItems(ciphers: OverlayCipherData[]) {
+    this.ciphers = ciphers;
+    this.currentCipherIndex = 0;
+    this.overlayListContainer.innerHTML = "";
+
+    if (!ciphers?.length) {
+      this.buildNoResultsOverlayList();
+      return;
+    }
+
+    this.ciphersList = globalThis.document.createElement("ul");
+    this.ciphersList.classList.add("overlay-actions-list");
+    this.ciphersList.setAttribute("role", "list");
+    globalThis.addEventListener(EVENTS.SCROLL, this.handleCiphersListScrollEvent);
+
+    this.loadPageOfCiphers();
+
+    this.overlayListContainer.appendChild(this.ciphersList);
+  }
+
+  /**
+   * Overlay view that is presented when no ciphers are found for a given page.
+   * Facilitates the ability to add a new vault item from the overlay.
+   */
+  private buildNoResultsOverlayList() {
+    const noItemsMessage = globalThis.document.createElement("div");
+    noItemsMessage.classList.add("no-items", "overlay-list-message");
+    noItemsMessage.textContent = this.getTranslation("noItemsToShow");
+
+    const newItemButton = globalThis.document.createElement("button");
+    newItemButton.tabIndex = -1;
+    newItemButton.id = "new-item-button";
+    newItemButton.classList.add("add-new-item-button", "overlay-list-button");
+    newItemButton.textContent = this.getTranslation("newItem");
+    newItemButton.setAttribute(
+      "aria-label",
+      `${this.getTranslation("addNewVaultItem")}, ${this.getTranslation("opensInANewWindow")}`
+    );
+    newItemButton.prepend(buildSvgDomElement(plusIcon));
+    newItemButton.addEventListener(EVENTS.CLICK, this.handeNewItemButtonClick);
+
+    const overlayListButtonContainer = globalThis.document.createElement("div");
+    overlayListButtonContainer.classList.add("overlay-list-button-container");
+    overlayListButtonContainer.appendChild(newItemButton);
+
+    this.overlayListContainer.append(noItemsMessage, overlayListButtonContainer);
+  }
+
+  /**
+   * Handles the click event for the new item button.
+   * Sends a message to the parent window to add a new vault item.
+   */
+  private handeNewItemButtonClick = () => {
+    this.postMessageToParent({ command: "addNewVaultItem" });
+  };
+
+  /**
+   * Loads a page of ciphers into the overlay list container.
+   */
+  private loadPageOfCiphers() {
+    const lastIndex = Math.min(
+      this.currentCipherIndex + this.showCiphersPerPage,
+      this.ciphers.length
+    );
+    for (let cipherIndex = this.currentCipherIndex; cipherIndex < lastIndex; cipherIndex++) {
+      this.ciphersList.appendChild(this.buildOverlayActionsListItem(this.ciphers[cipherIndex]));
+      this.currentCipherIndex++;
+    }
+
+    if (this.currentCipherIndex >= this.ciphers.length) {
+      globalThis.removeEventListener(EVENTS.SCROLL, this.handleCiphersListScrollEvent);
+    }
+  }
+
+  /**
+   * Handles updating the list of ciphers when the
+   * user scrolls to the bottom of the list.
+   */
+  private handleCiphersListScrollEvent = () => {
+    if (this.cipherListScrollIsDebounced) {
+      return;
+    }
+
+    this.cipherListScrollIsDebounced = true;
+    if (this.cipherListScrollDebounceTimeout) {
+      clearTimeout(this.cipherListScrollDebounceTimeout);
+    }
+    this.cipherListScrollDebounceTimeout = setTimeout(this.handleDebouncedScrollEvent, 300);
+  };
+
+  /**
+   * Debounced handler for updating the list of ciphers when the user scrolls to
+   * the bottom of the list. Triggers at most once every 300ms.
+   */
+  private handleDebouncedScrollEvent = () => {
+    this.cipherListScrollIsDebounced = false;
+
+    if (globalThis.scrollY + globalThis.innerHeight >= this.ciphersList.clientHeight - 300) {
+      this.loadPageOfCiphers();
+    }
+  };
+
+  /**
+   * Builds the list item for a given cipher.
+   *
+   * @param cipher - The cipher to build the list item for.
+   */
+  private buildOverlayActionsListItem(cipher: OverlayCipherData) {
+    const fillCipherElement = this.buildFillCipherElement(cipher);
+    const viewCipherElement = this.buildViewCipherElement(cipher);
+
+    const cipherContainerElement = globalThis.document.createElement("div");
+    cipherContainerElement.classList.add("cipher-container");
+    cipherContainerElement.append(fillCipherElement, viewCipherElement);
+
+    const overlayActionsListItem = globalThis.document.createElement("li");
+    overlayActionsListItem.setAttribute("role", "listitem");
+    overlayActionsListItem.classList.add("overlay-actions-list-item");
+    overlayActionsListItem.appendChild(cipherContainerElement);
+
+    return overlayActionsListItem;
+  }
+
+  /**
+   * Builds the fill cipher button for a given cipher.
+   * Wraps the cipher icon and details.
+   *
+   * @param cipher - The cipher to build the fill cipher button for.
+   */
+  private buildFillCipherElement(cipher: OverlayCipherData) {
+    const cipherIcon = this.buildCipherIconElement(cipher);
+    const cipherDetailsElement = this.buildCipherDetailsElement(cipher);
+
+    const fillCipherElement = globalThis.document.createElement("button");
+    fillCipherElement.tabIndex = -1;
+    fillCipherElement.classList.add("fill-cipher-button");
+    fillCipherElement.setAttribute(
+      "aria-label",
+      `${this.getTranslation("fillCredentialsFor")} ${cipher.name}`
+    );
+    fillCipherElement.setAttribute(
+      "aria-description",
+      `${this.getTranslation("partialUsername")}, ${cipher.login.username}`
+    );
+    fillCipherElement.append(cipherIcon, cipherDetailsElement);
+    fillCipherElement.addEventListener(EVENTS.CLICK, this.handleFillCipherClickEvent(cipher));
+    fillCipherElement.addEventListener(EVENTS.KEYUP, this.handleFillCipherKeyUpEvent);
+
+    return fillCipherElement;
+  }
+
+  /**
+   * Handles the click event for the fill cipher button.
+   * Sends a message to the parent window to fill the selected cipher.
+   *
+   * @param cipher - The cipher to fill.
+   */
+  private handleFillCipherClickEvent = (cipher: OverlayCipherData) => {
+    return this.useEventHandlersMemo(
+      () =>
+        this.postMessageToParent({
+          command: "fillSelectedListItem",
+          overlayCipherId: cipher.id,
+        }),
+      `${cipher.id}-fill-cipher-button-click-handler`
+    );
+  };
+
+  /**
+   * Handles the keyup event for the fill cipher button. Facilitates
+   * selecting the next/previous cipher item on ArrowDown/ArrowUp. Also
+   * facilitates moving keyboard focus to the view cipher button on ArrowRight.
+   *
+   * @param event - The keyup event.
+   */
+  private handleFillCipherKeyUpEvent = (event: KeyboardEvent) => {
+    const listenedForKeys = new Set(["ArrowDown", "ArrowUp", "ArrowRight"]);
+    if (!listenedForKeys.has(event.code) || !(event.target instanceof Element)) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const currentListItem = event.target.closest(".overlay-actions-list-item") as HTMLElement;
+    if (event.code === "ArrowDown") {
+      this.focusNextListItem(currentListItem);
+      return;
+    }
+
+    if (event.code === "ArrowUp") {
+      this.focusPreviousListItem(currentListItem);
+      return;
+    }
+
+    this.focusViewCipherButton(currentListItem, event.target as HTMLElement);
+  };
+
+  /**
+   * Builds the button that facilitates viewing a cipher in the vault.
+   *
+   * @param cipher - The cipher to view.
+   */
+  private buildViewCipherElement(cipher: OverlayCipherData) {
+    const viewCipherElement = globalThis.document.createElement("button");
+    viewCipherElement.tabIndex = -1;
+    viewCipherElement.classList.add("view-cipher-button");
+    viewCipherElement.setAttribute(
+      "aria-label",
+      `${this.getTranslation("view")} ${cipher.name}, ${this.getTranslation("opensInANewWindow")}`
+    );
+    viewCipherElement.append(buildSvgDomElement(viewCipherIcon));
+    viewCipherElement.addEventListener(EVENTS.CLICK, this.handleViewCipherClickEvent(cipher));
+    viewCipherElement.addEventListener(EVENTS.KEYUP, this.handleViewCipherKeyUpEvent);
+
+    return viewCipherElement;
+  }
+
+  /**
+   * Handles the click event for the view cipher button. Sends a
+   * message to the parent window to view the selected cipher.
+   *
+   * @param cipher - The cipher to view.
+   */
+  private handleViewCipherClickEvent = (cipher: OverlayCipherData) => {
+    return this.useEventHandlersMemo(
+      () => this.postMessageToParent({ command: "viewSelectedCipher", overlayCipherId: cipher.id }),
+      `${cipher.id}-view-cipher-button-click-handler`
+    );
+  };
+
+  /**
+   * Handles the keyup event for the view cipher button. Facilitates
+   * selecting the next/previous cipher item on ArrowDown/ArrowUp.
+   * Also facilitates moving keyboard focus to the current fill
+   * cipher button on ArrowLeft.
+   *
+   * @param event - The keyup event.
+   */
+  private handleViewCipherKeyUpEvent = (event: KeyboardEvent) => {
+    const listenedForKeys = new Set(["ArrowDown", "ArrowUp", "ArrowLeft"]);
+    if (!listenedForKeys.has(event.code) || !(event.target instanceof Element)) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const currentListItem = event.target.closest(".overlay-actions-list-item") as HTMLElement;
+    const cipherContainer = currentListItem.querySelector(".cipher-container") as HTMLElement;
+    cipherContainer?.classList.remove("remove-outline");
+    if (event.code === "ArrowDown") {
+      this.focusNextListItem(currentListItem);
+      return;
+    }
+
+    if (event.code === "ArrowUp") {
+      this.focusPreviousListItem(currentListItem);
+      return;
+    }
+
+    const previousSibling = event.target.previousElementSibling as HTMLElement;
+    previousSibling?.focus();
+  };
+
+  /**
+   * Builds the icon for a given cipher. Prioritizes the favicon from a given cipher url
+   * and the default icon element within the extension. If neither are available, the
+   * globe icon is used.
+   *
+   * @param cipher - The cipher to build the icon for.
+   */
+  private buildCipherIconElement(cipher: OverlayCipherData) {
+    const cipherIcon = globalThis.document.createElement("span");
+    cipherIcon.classList.add("cipher-icon");
+    cipherIcon.setAttribute("aria-hidden", "true");
+
+    if (cipher.icon?.image) {
+      try {
+        const url = new URL(cipher.icon.image);
+        cipherIcon.style.backgroundImage = `url(${url.href})`;
+        return cipherIcon;
+      } catch {
+        // Silently default to the globe icon element if the image URL is invalid
+      }
+    }
+
+    if (cipher.icon?.icon) {
+      cipherIcon.classList.add("cipher-icon", "bwi", cipher.icon.icon);
+      return cipherIcon;
+    }
+
+    cipherIcon.append(buildSvgDomElement(globeIcon));
+    return cipherIcon;
+  }
+
+  /**
+   * Builds the details for a given cipher. Includes the cipher name and username login.
+   *
+   * @param cipher - The cipher to build the details for.
+   */
+  private buildCipherDetailsElement(cipher: OverlayCipherData) {
+    const cipherNameElement = this.buildCipherNameElement(cipher);
+    const cipherUserLoginElement = this.buildCipherUserLoginElement(cipher);
+
+    const cipherDetailsElement = globalThis.document.createElement("span");
+    cipherDetailsElement.classList.add("cipher-details");
+    if (cipherNameElement) {
+      cipherDetailsElement.appendChild(cipherNameElement);
+    }
+    if (cipherUserLoginElement) {
+      cipherDetailsElement.appendChild(cipherUserLoginElement);
+    }
+
+    return cipherDetailsElement;
+  }
+
+  /**
+   * Builds the name element for a given cipher.
+   *
+   * @param cipher - The cipher to build the name element for.
+   */
+  private buildCipherNameElement(cipher: OverlayCipherData): HTMLSpanElement | null {
+    if (!cipher.name) {
+      return null;
+    }
+
+    const cipherNameElement = globalThis.document.createElement("span");
+    cipherNameElement.classList.add("cipher-name");
+    cipherNameElement.textContent = cipher.name;
+    cipherNameElement.setAttribute("title", cipher.name);
+
+    return cipherNameElement;
+  }
+
+  /**
+   * Builds the username login element for a given cipher.
+   *
+   * @param cipher - The cipher to build the username login element for.
+   */
+  private buildCipherUserLoginElement(cipher: OverlayCipherData): HTMLSpanElement | null {
+    if (!cipher.login?.username) {
+      return null;
+    }
+
+    const cipherUserLoginElement = globalThis.document.createElement("span");
+    cipherUserLoginElement.classList.add("cipher-user-login");
+    cipherUserLoginElement.textContent = cipher.login.username;
+    cipherUserLoginElement.setAttribute("title", cipher.login.username);
+
+    return cipherUserLoginElement;
+  }
+
+  /**
+   * Validates whether the overlay list iframe is currently focused.
+   * If not focused, will check if the button element is focused.
+   */
+  private checkOverlayListFocused() {
+    if (globalThis.document.hasFocus()) {
+      return;
+    }
+
+    this.postMessageToParent({ command: "checkAutofillOverlayButtonFocused" });
+  }
+
+  /**
+   * Focuses the overlay list iframe. The element that receives focus is
+   * determined by the presence of the unlock button, new item button, or
+   * the first cipher button.
+   */
+  private focusOverlayList() {
+    const unlockButtonElement = this.overlayListContainer.querySelector(
+      "#unlock-button"
+    ) as HTMLElement;
+    if (unlockButtonElement) {
+      unlockButtonElement.focus();
+      return;
+    }
+
+    const newItemButtonElement = this.overlayListContainer.querySelector(
+      "#new-item-button"
+    ) as HTMLElement;
+    if (newItemButtonElement) {
+      newItemButtonElement.focus();
+      return;
+    }
+
+    const firstCipherElement = this.overlayListContainer.querySelector(
+      ".fill-cipher-button"
+    ) as HTMLElement;
+    firstCipherElement?.focus();
+  }
+
+  /**
+   * Sets up the global listeners for the overlay list iframe.
+   */
+  private setupOverlayListGlobalListeners() {
+    this.setupGlobalListeners(this.overlayListWindowMessageHandlers);
+
+    this.resizeObserver = new ResizeObserver(this.handleResizeObserver);
+  }
+
+  /**
+   * Handles the resize observer event. Facilitates updating the height of the
+   * overlay list iframe when the height of the list changes.
+   *
+   * @param entries - The resize observer entries.
+   */
+  private handleResizeObserver = (entries: ResizeObserverEntry[]) => {
+    for (let entryIndex = 0; entryIndex < entries.length; entryIndex++) {
+      const entry = entries[entryIndex];
+      if (entry.target !== this.overlayListContainer) {
+        continue;
+      }
+
+      const { height } = entry.contentRect;
+      this.postMessageToParent({
+        command: "updateAutofillOverlayListHeight",
+        styles: { height: `${height}px` },
+      });
+      break;
+    }
+  };
+
+  /**
+   * Establishes a memoized event handler for a given event.
+   *
+   * @param eventHandler - The event handler to memoize.
+   * @param memoIndex - The memo index to use for the event handler.
+   */
+  private useEventHandlersMemo = (eventHandler: EventListener, memoIndex: string) => {
+    return this.eventHandlersMemo[memoIndex] || (this.eventHandlersMemo[memoIndex] = eventHandler);
+  };
+
+  /**
+   * Focuses the next list item in the overlay list. If the current list item is the last
+   * item in the list, the first item is focused.
+   *
+   * @param currentListItem - The current list item.
+   */
+  private focusNextListItem(currentListItem: HTMLElement) {
+    const nextListItem = currentListItem.nextSibling as HTMLElement;
+    const nextSibling = nextListItem?.querySelector(".fill-cipher-button") as HTMLElement;
+    if (nextSibling) {
+      nextSibling.focus();
+      return;
+    }
+
+    const firstListItem = currentListItem.parentElement?.firstChild as HTMLElement;
+    const firstSibling = firstListItem?.querySelector(".fill-cipher-button") as HTMLElement;
+    firstSibling?.focus();
+  }
+
+  /**
+   * Focuses the previous list item in the overlay list. If the current list item is the first
+   * item in the list, the last item is focused.
+   *
+   * @param currentListItem - The current list item.
+   */
+  private focusPreviousListItem(currentListItem: HTMLElement) {
+    const previousListItem = currentListItem.previousSibling as HTMLElement;
+    const previousSibling = previousListItem?.querySelector(".fill-cipher-button") as HTMLElement;
+    if (previousSibling) {
+      previousSibling.focus();
+      return;
+    }
+
+    const lastListItem = currentListItem.parentElement?.lastChild as HTMLElement;
+    const lastSibling = lastListItem?.querySelector(".fill-cipher-button") as HTMLElement;
+    lastSibling?.focus();
+  }
+
+  /**
+   * Focuses the view cipher button relative to the current fill cipher button.
+   *
+   * @param currentListItem - The current list item.
+   * @param currentButtonElement - The current button element.
+   */
+  private focusViewCipherButton(currentListItem: HTMLElement, currentButtonElement: HTMLElement) {
+    const cipherContainer = currentListItem.querySelector(".cipher-container") as HTMLElement;
+    cipherContainer.classList.add("remove-outline");
+
+    const nextSibling = currentButtonElement.nextElementSibling as HTMLElement;
+    nextSibling?.focus();
+  }
+}
+
+export default AutofillOverlayList;
diff --git a/apps/browser/src/autofill/overlay/pages/list/bootstrap-autofill-overlay-list.ts b/apps/browser/src/autofill/overlay/pages/list/bootstrap-autofill-overlay-list.ts
new file mode 100644
index 00000000000..b0832e7e518
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/list/bootstrap-autofill-overlay-list.ts
@@ -0,0 +1,9 @@
+import { AutofillOverlayElement } from "../../../utils/autofill-overlay.enum";
+
+import AutofillOverlayList from "./autofill-overlay-list";
+
+require("./list.scss");
+
+(function () {
+  globalThis.customElements.define(AutofillOverlayElement.List, AutofillOverlayList);
+})();
diff --git a/apps/browser/src/autofill/overlay/pages/list/list.html b/apps/browser/src/autofill/overlay/pages/list/list.html
new file mode 100644
index 00000000000..5678a3e4f38
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/list/list.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Bitwarden vault</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="color-scheme" content="normal" />
+  </head>
+  <body>
+    <autofill-overlay-list></autofill-overlay-list>
+  </body>
+</html>
diff --git a/apps/browser/src/autofill/overlay/pages/list/list.scss b/apps/browser/src/autofill/overlay/pages/list/list.scss
new file mode 100644
index 00000000000..1713350718b
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/list/list.scss
@@ -0,0 +1,293 @@
+@import "../../../../../../../libs/angular/src/scss/webfonts.css";
+@import "../../../../../../../libs/angular/src/scss/bwicons/styles/style";
+@import "../../../shared/styles/variables";
+@import "../../../../../../../libs/angular/src/scss/icons";
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 10px;
+}
+
+body {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+
+  @include themify($themes) {
+    color: themed("textColor");
+    background-color: themed("backgroundColor");
+  }
+}
+
+.overlay-list-message {
+  font-family: $font-family-sans-serif;
+  font-weight: 400;
+  font-size: 1.4rem;
+  line-height: 1.5;
+  width: 100%;
+  padding: 0.8rem;
+
+  @include themify($themes) {
+    color: themed("textColor");
+  }
+
+  &.no-items {
+    font-size: 1.6rem;
+  }
+}
+
+.overlay-list-button-container {
+  width: 100%;
+  padding: 0.2rem;
+  background: transparent;
+  transition: background-color 0.2s ease-in-out;
+  border-top-width: 0.1rem;
+  border-top-style: solid;
+
+  @include themify($themes) {
+    border-top-color: themed("borderColor");
+  }
+
+  &:hover {
+    @include themify($themes) {
+      background: themed("backgroundOffsetColor");
+    }
+  }
+}
+
+.overlay-list-button {
+  display: flex;
+  align-content: center;
+  justify-content: flex-start;
+  width: 100%;
+  font-family: $font-family-sans-serif;
+  font-size: 1.6rem;
+  font-weight: 700;
+  text-align: left;
+  background: transparent;
+  border: none;
+  padding: 0.7rem;
+  margin: 0;
+  cursor: pointer;
+  border-radius: 0.4rem;
+
+  @include themify($themes) {
+    color: themed("primaryColor");
+  }
+
+  &:focus:focus-visible {
+    outline-width: 0.2rem;
+    outline-style: solid;
+
+    @include themify($themes) {
+      outline-color: themed("focusOutlineColor");
+    }
+  }
+
+  svg {
+    position: relative;
+    margin-left: 0.4rem;
+    margin-right: 0.8rem;
+
+    path {
+      @include themify($themes) {
+        fill: themed("primaryColor") !important;
+      }
+    }
+  }
+}
+
+.unlock-button {
+  svg {
+    top: 0.2rem;
+    width: 1.6rem;
+    height: 1.7rem;
+  }
+}
+
+.add-new-item-button {
+  svg {
+    top: 0.2rem;
+    width: 1.7rem;
+    height: 1.7rem;
+  }
+}
+
+.overlay-actions-list {
+  padding: 0;
+  margin: 0;
+}
+
+.overlay-actions-list-item {
+  transition: background-color 0.2s ease-in-out;
+  list-style: none;
+  padding: 0.2rem;
+
+  &:not(:last-child) {
+    border-bottom-width: 0.1rem;
+    border-bottom-style: solid;
+
+    @include themify($themes) {
+      border-bottom-color: themed("borderColor");
+    }
+  }
+
+  &:hover {
+    @include themify($themes) {
+      background: themed("backgroundOffsetColor");
+    }
+  }
+
+  .cipher-container {
+    display: flex;
+    align-content: flex-start;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0.7rem 0.3rem 0.7rem 0.7rem;
+    border-radius: 0.4rem;
+
+    &:focus-within:not(.remove-outline) {
+      outline-width: 0.2rem;
+      outline-style: solid;
+
+      @include themify($themes) {
+        outline-color: themed("focusOutlineColor");
+      }
+    }
+  }
+
+  .fill-cipher-button,
+  .view-cipher-button {
+    padding: 0;
+    margin: 0;
+    line-height: 0;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  .fill-cipher-button {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: flex-start;
+    width: calc(100% - 4rem);
+    outline: none;
+  }
+
+  .view-cipher-button {
+    flex-shrink: 0;
+    width: 4rem;
+    height: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.4rem;
+
+    &:focus:focus-visible {
+      outline-width: 0.2rem;
+      outline-style: solid;
+
+      @include themify($themes) {
+        outline-color: themed("focusOutlineColor");
+      }
+    }
+
+    svg {
+      path {
+        @include themify($themes) {
+          fill: themed("primaryColor") !important;
+        }
+      }
+    }
+  }
+
+  .cipher-icon {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 3.2rem;
+    height: 3.2rem;
+    margin: 0 1rem 0 0;
+    line-height: 0;
+    background-size: 2.6rem;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    @include themify($themes) {
+      color: themed("mutedTextColor");
+    }
+
+    svg {
+      width: 100%;
+      height: auto;
+      flex-shrink: 0;
+
+      path {
+        @include themify($themes) {
+          fill: themed("primaryColor") !important;
+        }
+      }
+    }
+
+    &.bwi {
+      font-size: 2.6rem;
+
+      &:not(.cipher-icon) {
+        @include themify($themes) {
+          color: themed("primaryColor");
+        }
+
+        svg {
+          path {
+            @include themify($themes) {
+              fill: themed("primaryColor") !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .cipher-details {
+    display: block;
+    width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: left;
+  }
+
+  .cipher-name,
+  .cipher-user-login {
+    display: block;
+    width: 100%;
+    line-height: 1.5;
+    font-family: $font-family-sans-serif;
+    font-weight: 400;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  .cipher-name {
+    font-size: 1.6rem;
+
+    @include themify($themes) {
+      color: themed("textColor");
+    }
+  }
+
+  .cipher-user-login {
+    font-size: 1.4rem;
+
+    @include themify($themes) {
+      color: themed("mutedTextColor");
+    }
+  }
+}
diff --git a/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.spec.ts b/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.spec.ts
new file mode 100644
index 00000000000..1c0587ce861
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.spec.ts
@@ -0,0 +1,219 @@
+import { mock } from "jest-mock-extended";
+
+import { OverlayButtonWindowMessageHandlers } from "../../abstractions/autofill-overlay-button";
+
+import AutofillOverlayPageElement from "./autofill-overlay-page-element";
+
+describe("AutofillOverlayPageElement", () => {
+  globalThis.customElements.define("autofill-overlay-page-element", AutofillOverlayPageElement);
+  let autofillOverlayPageElement: AutofillOverlayPageElement;
+  const translations = {
+    locale: "en",
+    buttonPageTitle: "buttonPageTitle",
+    listPageTitle: "listPageTitle",
+  };
+
+  beforeEach(() => {
+    jest.spyOn(globalThis.parent, "postMessage");
+    jest.spyOn(globalThis, "addEventListener");
+    jest.spyOn(globalThis.document, "addEventListener");
+    document.body.innerHTML = "<autofill-overlay-page-element></autofill-overlay-page-element>";
+    autofillOverlayPageElement = document.querySelector("autofill-overlay-page-element");
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("initOverlayPage", () => {
+    beforeEach(() => {
+      jest.spyOn(globalThis.document.documentElement, "setAttribute");
+      jest.spyOn(globalThis.document, "createElement");
+    });
+
+    it("initializes the button overlay page", () => {
+      const linkElement = autofillOverlayPageElement["initOverlayPage"](
+        "button",
+        "https://jest-testing-website.com",
+        translations
+      );
+
+      expect(globalThis.document.documentElement.setAttribute).toHaveBeenCalledWith(
+        "lang",
+        translations.locale
+      );
+      expect(globalThis.document.head.title).toEqual(translations.buttonPageTitle);
+      expect(globalThis.document.createElement).toHaveBeenCalledWith("link");
+      expect(linkElement.getAttribute("rel")).toEqual("stylesheet");
+      expect(linkElement.getAttribute("href")).toEqual("https://jest-testing-website.com");
+    });
+  });
+
+  describe("postMessageToParent", () => {
+    it("skips posting a message to the parent if the message origin in not set", () => {
+      autofillOverlayPageElement["postMessageToParent"]({ command: "test" });
+
+      expect(globalThis.parent.postMessage).not.toHaveBeenCalled();
+    });
+
+    it("posts a message to the parent", () => {
+      autofillOverlayPageElement["messageOrigin"] = "https://jest-testing-website.com";
+      autofillOverlayPageElement["postMessageToParent"]({ command: "test" });
+
+      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
+        { command: "test" },
+        "https://jest-testing-website.com"
+      );
+    });
+  });
+
+  describe("getTranslation", () => {
+    it("returns an empty value if the translation doesn't exist in the translations object", () => {
+      autofillOverlayPageElement["translations"] = translations;
+
+      expect(autofillOverlayPageElement["getTranslation"]("test")).toEqual("");
+    });
+  });
+
+  describe("global event listeners", () => {
+    it("sets up global event listeners", () => {
+      const handleWindowMessageSpy = jest.spyOn(
+        autofillOverlayPageElement as any,
+        "handleWindowMessage"
+      );
+      const handleWindowBlurEventSpy = jest.spyOn(
+        autofillOverlayPageElement as any,
+        "handleWindowBlurEvent"
+      );
+      const handleDocumentKeyDownEventSpy = jest.spyOn(
+        autofillOverlayPageElement as any,
+        "handleDocumentKeyDownEvent"
+      );
+      autofillOverlayPageElement["setupGlobalListeners"](
+        mock<OverlayButtonWindowMessageHandlers>()
+      );
+
+      expect(globalThis.addEventListener).toHaveBeenCalledWith("message", handleWindowMessageSpy);
+      expect(globalThis.addEventListener).toHaveBeenCalledWith("blur", handleWindowBlurEventSpy);
+      expect(globalThis.document.addEventListener).toHaveBeenCalledWith(
+        "keydown",
+        handleDocumentKeyDownEventSpy
+      );
+    });
+
+    it("sets the message origin when handling the first passed window message", () => {
+      const initAutofillOverlayButtonSpy = jest.fn();
+      autofillOverlayPageElement["setupGlobalListeners"](
+        mock<OverlayButtonWindowMessageHandlers>({
+          initAutofillOverlayButton: initAutofillOverlayButtonSpy,
+        })
+      );
+
+      globalThis.dispatchEvent(
+        new MessageEvent("message", {
+          data: { command: "initAutofillOverlayButton" },
+          origin: "https://jest-testing-website.com",
+        })
+      );
+
+      expect(autofillOverlayPageElement["messageOrigin"]).toEqual(
+        "https://jest-testing-website.com"
+      );
+    });
+
+    it("handles window messages that are part of the passed windowMessageHandlers object", () => {
+      const initAutofillOverlayButtonSpy = jest.fn();
+      autofillOverlayPageElement["setupGlobalListeners"](
+        mock<OverlayButtonWindowMessageHandlers>({
+          initAutofillOverlayButton: initAutofillOverlayButtonSpy,
+        })
+      );
+      const data = { command: "initAutofillOverlayButton" };
+
+      globalThis.dispatchEvent(new MessageEvent("message", { data }));
+
+      expect(initAutofillOverlayButtonSpy).toHaveBeenCalledWith({ message: data });
+    });
+
+    it("skips attempting to handle window messages that are not part of the passed windowMessageHandlers object", () => {
+      const initAutofillOverlayButtonSpy = jest.fn();
+      autofillOverlayPageElement["setupGlobalListeners"](
+        mock<OverlayButtonWindowMessageHandlers>({
+          initAutofillOverlayButton: initAutofillOverlayButtonSpy,
+        })
+      );
+
+      globalThis.dispatchEvent(new MessageEvent("message", { data: { command: "test" } }));
+
+      expect(initAutofillOverlayButtonSpy).not.toHaveBeenCalled();
+    });
+
+    it("posts a message to the parent when the window is blurred", () => {
+      autofillOverlayPageElement["messageOrigin"] = "https://jest-testing-website.com";
+      autofillOverlayPageElement["setupGlobalListeners"](
+        mock<OverlayButtonWindowMessageHandlers>()
+      );
+
+      globalThis.dispatchEvent(new Event("blur"));
+
+      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
+        { command: "overlayPageBlurred" },
+        "https://jest-testing-website.com"
+      );
+    });
+
+    it("skips redirecting keyboard focus when a KeyDown event triggers and the key is not a `Tab` or `Escape` key", () => {
+      autofillOverlayPageElement["setupGlobalListeners"](
+        mock<OverlayButtonWindowMessageHandlers>()
+      );
+
+      globalThis.document.dispatchEvent(new KeyboardEvent("keydown", { code: "test" }));
+
+      expect(globalThis.parent.postMessage).not.toHaveBeenCalled();
+    });
+
+    it("redirects the overlay focus out to the previous element on KeyDown of the `Tab+Shift` keys", () => {
+      autofillOverlayPageElement["messageOrigin"] = "https://jest-testing-website.com";
+      autofillOverlayPageElement["setupGlobalListeners"](
+        mock<OverlayButtonWindowMessageHandlers>()
+      );
+
+      globalThis.document.dispatchEvent(
+        new KeyboardEvent("keydown", { code: "Tab", shiftKey: true })
+      );
+
+      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
+        { command: "redirectOverlayFocusOut", direction: "previous" },
+        "https://jest-testing-website.com"
+      );
+    });
+
+    it("redirects the overlay focus out to the next element on KeyDown of the `Tab` key", () => {
+      autofillOverlayPageElement["messageOrigin"] = "https://jest-testing-website.com";
+      autofillOverlayPageElement["setupGlobalListeners"](
+        mock<OverlayButtonWindowMessageHandlers>()
+      );
+
+      globalThis.document.dispatchEvent(new KeyboardEvent("keydown", { code: "Tab" }));
+
+      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
+        { command: "redirectOverlayFocusOut", direction: "next" },
+        "https://jest-testing-website.com"
+      );
+    });
+
+    it("redirects the overlay focus out to the current element on KeyDown of the `Escape` key", () => {
+      autofillOverlayPageElement["messageOrigin"] = "https://jest-testing-website.com";
+      autofillOverlayPageElement["setupGlobalListeners"](
+        mock<OverlayButtonWindowMessageHandlers>()
+      );
+
+      globalThis.document.dispatchEvent(new KeyboardEvent("keydown", { code: "Escape" }));
+
+      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
+        { command: "redirectOverlayFocusOut", direction: "current" },
+        "https://jest-testing-website.com"
+      );
+    });
+  });
+});
diff --git a/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.ts b/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.ts
new file mode 100644
index 00000000000..692803a7529
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.ts
@@ -0,0 +1,150 @@
+import { EVENTS } from "../../../constants";
+import { RedirectFocusDirection } from "../../../utils/autofill-overlay.enum";
+import {
+  AutofillOverlayPageElementWindowMessage,
+  WindowMessageHandlers,
+} from "../../abstractions/autofill-overlay-page-element";
+
+class AutofillOverlayPageElement extends HTMLElement {
+  protected shadowDom: ShadowRoot;
+  protected messageOrigin: string;
+  protected translations: Record<string, string>;
+  protected windowMessageHandlers: WindowMessageHandlers;
+
+  constructor() {
+    super();
+
+    this.shadowDom = this.attachShadow({ mode: "closed" });
+  }
+
+  /**
+   * Initializes the overlay page element. Facilitates ensuring that the page
+   * is set up with the expected styles and translations.
+   *
+   * @param elementName - The name of the element, e.g. "button" or "list"
+   * @param styleSheetUrl - The URL of the stylesheet to apply to the page
+   * @param translations - The translations to apply to the page
+   */
+  protected initOverlayPage(
+    elementName: "button" | "list",
+    styleSheetUrl: string,
+    translations: Record<string, string>
+  ): HTMLLinkElement {
+    this.translations = translations;
+    globalThis.document.documentElement.setAttribute("lang", this.getTranslation("locale"));
+    globalThis.document.head.title = this.getTranslation(`${elementName}PageTitle`);
+
+    this.shadowDom.innerHTML = "";
+    const linkElement = globalThis.document.createElement("link");
+    linkElement.setAttribute("rel", "stylesheet");
+    linkElement.setAttribute("href", styleSheetUrl);
+
+    return linkElement;
+  }
+
+  /**
+   * Posts a window message to the parent window.
+   *
+   * @param message - The message to post
+   */
+  protected postMessageToParent(message: AutofillOverlayPageElementWindowMessage) {
+    if (!this.messageOrigin) {
+      return;
+    }
+
+    globalThis.parent.postMessage(message, this.messageOrigin);
+  }
+
+  /**
+   * Gets a translation from the translations object.
+   *
+   * @param key
+   * @protected
+   */
+  protected getTranslation(key: string): string {
+    return this.translations[key] || "";
+  }
+
+  /**
+   * Sets up global listeners for the window message, window blur, and
+   * document keydown events.
+   *
+   * @param windowMessageHandlers - The window message handlers to use
+   */
+  protected setupGlobalListeners(windowMessageHandlers: WindowMessageHandlers) {
+    this.windowMessageHandlers = windowMessageHandlers;
+
+    globalThis.addEventListener(EVENTS.MESSAGE, this.handleWindowMessage);
+    globalThis.addEventListener(EVENTS.BLUR, this.handleWindowBlurEvent);
+    globalThis.document.addEventListener(EVENTS.KEYDOWN, this.handleDocumentKeyDownEvent);
+  }
+
+  /**
+   * Handles window messages from the parent window.
+   *
+   * @param event - The window message event
+   */
+  private handleWindowMessage = (event: MessageEvent) => {
+    if (!this.windowMessageHandlers) {
+      return;
+    }
+
+    if (!this.messageOrigin) {
+      this.messageOrigin = event.origin;
+    }
+
+    const message = event?.data;
+    const handler = this.windowMessageHandlers[message?.command];
+    if (!handler) {
+      return;
+    }
+
+    handler({ message });
+  };
+
+  /**
+   * Handles the window blur event.
+   */
+  private handleWindowBlurEvent = () => {
+    this.postMessageToParent({ command: "overlayPageBlurred" });
+  };
+
+  /**
+   * Handles the document keydown event. Facilitates redirecting the
+   * user focus in the right direction out of the overlay. Also facilitates
+   * closing the overlay when the user presses the Escape key.
+   *
+   * @param event - The document keydown event
+   */
+  private handleDocumentKeyDownEvent = (event: KeyboardEvent) => {
+    const listenedForKeys = new Set(["Tab", "Escape"]);
+    if (!listenedForKeys.has(event.code)) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (event.code === "Tab") {
+      this.redirectOverlayFocusOutMessage(
+        event.shiftKey ? RedirectFocusDirection.Previous : RedirectFocusDirection.Next
+      );
+      return;
+    }
+
+    this.redirectOverlayFocusOutMessage(RedirectFocusDirection.Current);
+  };
+
+  /**
+   * Redirects the overlay focus out to the previous element on KeyDown of the `Tab+Shift` keys.
+   * Redirects the overlay focus out to the next element on KeyDown of the `Tab` key.
+   * Redirects the overlay focus out to the current element on KeyDown of the `Escape` key.
+   *
+   * @param direction - The direction to redirect the focus out
+   */
+  private redirectOverlayFocusOutMessage(direction: string) {
+    this.postMessageToParent({ command: "redirectOverlayFocusOut", direction });
+  }
+}
+
+export default AutofillOverlayPageElement;
diff --git a/apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts b/apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts
new file mode 100644
index 00000000000..1cfde6e6274
--- /dev/null
+++ b/apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts
@@ -0,0 +1,32 @@
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+
+import AutofillField from "../../models/autofill-field";
+import { ElementWithOpId, FormFieldElement } from "../../types";
+
+type OpenAutofillOverlayOptions = {
+  isFocusingFieldElement?: boolean;
+  isOpeningFullOverlay?: boolean;
+  authStatus?: AuthenticationStatus;
+};
+
+interface AutofillOverlayContentService {
+  isFieldCurrentlyFocused: boolean;
+  isCurrentlyFilling: boolean;
+  isOverlayCiphersPopulated: boolean;
+  pageDetailsUpdateRequired: boolean;
+  init(): void;
+  setupAutofillOverlayListenerOnField(
+    autofillFieldElement: ElementWithOpId<FormFieldElement>,
+    autofillFieldData: AutofillField
+  ): Promise<void>;
+  openAutofillOverlay(options: OpenAutofillOverlayOptions): void;
+  removeAutofillOverlay(): void;
+  removeAutofillOverlayButton(): void;
+  removeAutofillOverlayList(): void;
+  addNewVaultItem(): void;
+  redirectOverlayFocusOut(direction: "previous" | "next"): void;
+  focusMostRecentOverlayField(): void;
+  blurMostRecentOverlayField(): void;
+}
+
+export { OpenAutofillOverlayOptions, AutofillOverlayContentService };
diff --git a/apps/browser/src/autofill/services/abstractions/autofill.service.ts b/apps/browser/src/autofill/services/abstractions/autofill.service.ts
index bbd0b21d226..04beb2e4c48 100644
--- a/apps/browser/src/autofill/services/abstractions/autofill.service.ts
+++ b/apps/browser/src/autofill/services/abstractions/autofill.service.ts
@@ -47,7 +47,8 @@ export interface GenerateFillScriptOptions {
 export abstract class AutofillService {
   injectAutofillScripts: (
     sender: chrome.runtime.MessageSender,
-    autofillV2?: boolean
+    autofillV2?: boolean,
+    autofillOverlay?: boolean
   ) => Promise<void>;
   getFormsWithPasswordFields: (pageDetails: AutofillPageDetails) => FormData[];
   doAutoFill: (options: AutoFillOptions) => Promise<string | null>;
@@ -61,4 +62,5 @@ export abstract class AutofillService {
     fromCommand: boolean,
     cipherType?: CipherType
   ) => Promise<string | null>;
+  isPasswordRepromptRequired: (cipher: CipherView, tab: chrome.tabs.Tab) => Promise<boolean>;
 }
diff --git a/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts b/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts
new file mode 100644
index 00000000000..12b9f19e030
--- /dev/null
+++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts
@@ -0,0 +1,1612 @@
+import { mock } from "jest-mock-extended";
+
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+
+import { EVENTS } from "../constants";
+import { createAutofillFieldMock } from "../jest/autofill-mocks";
+import { flushPromises } from "../jest/testing-utils";
+import AutofillField from "../models/autofill-field";
+import { ElementWithOpId, FormFieldElement } from "../types";
+import {
+  AutofillOverlayElement,
+  AutofillOverlayVisibility,
+  RedirectFocusDirection,
+} from "../utils/autofill-overlay.enum";
+
+import { AutoFillConstants } from "./autofill-constants";
+import AutofillOverlayContentService from "./autofill-overlay-content.service";
+
+const defaultWindowReadyState = document.readyState;
+const defaultDocumentVisibilityState = document.visibilityState;
+describe("AutofillOverlayContentService", () => {
+  let autofillOverlayContentService: AutofillOverlayContentService;
+  let sendExtensionMessageSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    autofillOverlayContentService = new AutofillOverlayContentService();
+    sendExtensionMessageSpy = jest
+      .spyOn(autofillOverlayContentService as any, "sendExtensionMessage")
+      .mockResolvedValue(undefined);
+    Object.defineProperty(document, "readyState", {
+      value: defaultWindowReadyState,
+      writable: true,
+    });
+    Object.defineProperty(document, "visibilityState", {
+      value: defaultDocumentVisibilityState,
+      writable: true,
+    });
+    Object.defineProperty(document, "activeElement", {
+      value: null,
+      writable: true,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      value: 1080,
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("init", () => {
+    let setupGlobalEventListenersSpy: jest.SpyInstance;
+    let setupMutationObserverSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      jest.spyOn(document, "addEventListener");
+      jest.spyOn(window, "addEventListener");
+      setupGlobalEventListenersSpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "setupGlobalEventListeners"
+      );
+      setupMutationObserverSpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "setupMutationObserver"
+      );
+    });
+
+    it("sets up a DOMContentLoaded event listener that triggers setting up the mutation observers", () => {
+      Object.defineProperty(document, "readyState", {
+        value: "loading",
+        writable: true,
+      });
+
+      autofillOverlayContentService.init();
+
+      expect(document.addEventListener).toHaveBeenCalledWith(
+        "DOMContentLoaded",
+        setupGlobalEventListenersSpy
+      );
+      expect(setupGlobalEventListenersSpy).not.toHaveBeenCalled();
+    });
+
+    it("sets up a visibility change listener for the DOM", () => {
+      const handleVisibilityChangeEventSpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "handleVisibilityChangeEvent"
+      );
+
+      autofillOverlayContentService.init();
+
+      expect(document.addEventListener).toHaveBeenCalledWith(
+        "visibilitychange",
+        handleVisibilityChangeEventSpy
+      );
+    });
+
+    it("sets up a focus out listener for the window", () => {
+      const handleFormFieldBlurEventSpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "handleFormFieldBlurEvent"
+      );
+
+      autofillOverlayContentService.init();
+
+      expect(window.addEventListener).toHaveBeenCalledWith("focusout", handleFormFieldBlurEventSpy);
+    });
+
+    it("sets up mutation observers for the body and html element", () => {
+      jest
+        .spyOn(globalThis, "MutationObserver")
+        .mockImplementation(() => mock<MutationObserver>({ observe: jest.fn() }));
+      const handleOverlayElementMutationObserverUpdateSpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "handleOverlayElementMutationObserverUpdate"
+      );
+      const handleBodyElementMutationObserverUpdateSpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "handleBodyElementMutationObserverUpdate"
+      );
+      const handleDocumentElementMutationObserverUpdateSpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "handleDocumentElementMutationObserverUpdate"
+      );
+
+      autofillOverlayContentService.init();
+
+      expect(setupMutationObserverSpy).toHaveBeenCalledTimes(1);
+      expect(globalThis.MutationObserver).toHaveBeenNthCalledWith(
+        1,
+        handleOverlayElementMutationObserverUpdateSpy
+      );
+      expect(globalThis.MutationObserver).toHaveBeenNthCalledWith(
+        2,
+        handleBodyElementMutationObserverUpdateSpy
+      );
+      expect(globalThis.MutationObserver).toHaveBeenNthCalledWith(
+        3,
+        handleDocumentElementMutationObserverUpdateSpy
+      );
+    });
+  });
+
+  describe("setupAutofillOverlayListenerOnField", () => {
+    let autofillFieldElement: ElementWithOpId<FormFieldElement>;
+    let autofillFieldData: AutofillField;
+
+    beforeEach(() => {
+      document.body.innerHTML = `
+      <form id="validFormId">
+        <input type="text" id="username-field" placeholder="username" />
+        <input type="password" id="password-field" placeholder="password" />
+      </form>
+      `;
+
+      autofillFieldElement = document.getElementById(
+        "username-field"
+      ) as ElementWithOpId<FormFieldElement>;
+      autofillFieldElement.opid = "op-1";
+      jest.spyOn(autofillFieldElement, "addEventListener");
+      autofillFieldData = createAutofillFieldMock({
+        opid: "username-field",
+        form: "validFormId",
+        placeholder: "username",
+        elementNumber: 1,
+      });
+    });
+
+    describe("skips setup for ignored form fields", () => {
+      beforeEach(() => {
+        autofillFieldData = mock<AutofillField>();
+      });
+
+      it("ignores fields that are readonly", () => {
+        autofillFieldData.readonly = true;
+
+        autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+          autofillFieldElement,
+          autofillFieldData
+        );
+
+        expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
+      });
+
+      it("ignores fields that contain a disabled attribute", () => {
+        autofillFieldData.disabled = true;
+
+        autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+          autofillFieldElement,
+          autofillFieldData
+        );
+
+        expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
+      });
+
+      it("ignores fields that are not viewable", () => {
+        autofillFieldData.viewable = false;
+
+        autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+          autofillFieldElement,
+          autofillFieldData
+        );
+
+        expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
+      });
+
+      it("ignores fields that are part of the ExcludedAutofillTypes", () => {
+        AutoFillConstants.ExcludedAutofillTypes.forEach((excludedType) => {
+          autofillFieldData.type = excludedType;
+
+          autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+
+          expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
+        });
+      });
+
+      it("ignores fields that contain the keyword `search`", () => {
+        autofillFieldData.placeholder = "search";
+
+        autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+          autofillFieldElement,
+          autofillFieldData
+        );
+
+        expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
+      });
+
+      it("ignores fields that contain the keyword `captcha` ", () => {
+        autofillFieldData.placeholder = "captcha";
+
+        autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+          autofillFieldElement,
+          autofillFieldData
+        );
+
+        expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
+      });
+
+      it("ignores fields that do not appear as a login field", () => {
+        autofillFieldData.placeholder = "not-a-login-field";
+
+        autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+          autofillFieldElement,
+          autofillFieldData
+        );
+
+        expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
+      });
+    });
+
+    describe("identifies the overlay visibility setting", () => {
+      it("defaults the overlay visibility setting to `OnFieldFocus` if a value is not set", async () => {
+        sendExtensionMessageSpy.mockResolvedValueOnce(undefined);
+        autofillOverlayContentService["autofillOverlayVisibility"] = undefined;
+
+        await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+          autofillFieldElement,
+          autofillFieldData
+        );
+
+        expect(sendExtensionMessageSpy).toHaveBeenCalledWith("getAutofillOverlayVisibility");
+        expect(autofillOverlayContentService["autofillOverlayVisibility"]).toEqual(
+          AutofillOverlayVisibility.OnFieldFocus
+        );
+      });
+
+      it("sets the overlay visibility setting to the value returned from the background script", async () => {
+        sendExtensionMessageSpy.mockResolvedValueOnce(AutofillOverlayVisibility.OnFieldFocus);
+        autofillOverlayContentService["autofillOverlayVisibility"] = undefined;
+
+        await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+          autofillFieldElement,
+          autofillFieldData
+        );
+
+        expect(autofillOverlayContentService["autofillOverlayVisibility"]).toEqual(
+          AutofillOverlayVisibility.OnFieldFocus
+        );
+      });
+    });
+
+    describe("sets up form field element listeners", () => {
+      it("removes all cached event listeners from the form field element", async () => {
+        jest.spyOn(autofillFieldElement, "removeEventListener");
+        const inputHandler = jest.fn();
+        const clickHandler = jest.fn();
+        const focusHandler = jest.fn();
+        autofillOverlayContentService["eventHandlersMemo"] = {
+          "op-1-username-field-input-handler": inputHandler,
+          "op-1-username-field-click-handler": clickHandler,
+          "op-1-username-field-focus-handler": focusHandler,
+        };
+
+        await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+          autofillFieldElement,
+          autofillFieldData
+        );
+
+        expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith(
+          1,
+          "input",
+          inputHandler
+        );
+        expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith(
+          2,
+          "click",
+          clickHandler
+        );
+        expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith(
+          3,
+          "focus",
+          focusHandler
+        );
+      });
+
+      describe("form field blur event listener", () => {
+        beforeEach(async () => {
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+        });
+
+        it("updates the isFieldCurrentlyFocused value to false", async () => {
+          autofillOverlayContentService["isFieldCurrentlyFocused"] = true;
+
+          autofillFieldElement.dispatchEvent(new Event("blur"));
+
+          expect(autofillOverlayContentService["isFieldCurrentlyFocused"]).toEqual(false);
+        });
+
+        it("sends a message to the background to check if the overlay is focused", () => {
+          autofillFieldElement.dispatchEvent(new Event("blur"));
+
+          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("checkAutofillOverlayFocused");
+        });
+      });
+
+      describe("form field keyup event listener", () => {
+        beforeEach(async () => {
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+          jest.spyOn(globalThis.customElements, "define").mockImplementation();
+        });
+
+        it("removes the autofill overlay when the `Escape` key is pressed", () => {
+          jest.spyOn(autofillOverlayContentService as any, "removeAutofillOverlay");
+
+          autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "Escape" }));
+
+          expect(autofillOverlayContentService.removeAutofillOverlay).toHaveBeenCalled();
+        });
+
+        it("repositions the overlay if autofill is not currently filling when the `Enter` key is pressed", () => {
+          const handleOverlayRepositionEventSpy = jest.spyOn(
+            autofillOverlayContentService as any,
+            "handleOverlayRepositionEvent"
+          );
+          autofillOverlayContentService["isCurrentlyFilling"] = false;
+
+          autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "Enter" }));
+
+          expect(handleOverlayRepositionEventSpy).toHaveBeenCalled();
+        });
+
+        it("skips repositioning the overlay if autofill is currently filling when the `Enter` key is pressed", () => {
+          const handleOverlayRepositionEventSpy = jest.spyOn(
+            autofillOverlayContentService as any,
+            "handleOverlayRepositionEvent"
+          );
+          autofillOverlayContentService["isCurrentlyFilling"] = true;
+
+          autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "Enter" }));
+
+          expect(handleOverlayRepositionEventSpy).not.toHaveBeenCalled();
+        });
+
+        it("opens the overlay list and focuses it after a delay if it is not visible when the `ArrowDown` key is pressed", async () => {
+          jest.useFakeTimers();
+          const updateMostRecentlyFocusedFieldSpy = jest.spyOn(
+            autofillOverlayContentService as any,
+            "updateMostRecentlyFocusedField"
+          );
+          const openAutofillOverlaySpy = jest.spyOn(
+            autofillOverlayContentService as any,
+            "openAutofillOverlay"
+          );
+          autofillOverlayContentService["isOverlayListVisible"] = false;
+
+          autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" }));
+          await flushPromises();
+
+          expect(updateMostRecentlyFocusedFieldSpy).toHaveBeenCalledWith(autofillFieldElement);
+          expect(openAutofillOverlaySpy).toHaveBeenCalledWith({ isOpeningFullOverlay: true });
+          expect(sendExtensionMessageSpy).not.toHaveBeenCalledWith("focusAutofillOverlayList");
+
+          jest.advanceTimersByTime(150);
+
+          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("focusAutofillOverlayList");
+        });
+
+        it("focuses the overlay list when the `ArrowDown` key is pressed", () => {
+          autofillOverlayContentService["isOverlayListVisible"] = true;
+
+          autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" }));
+
+          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("focusAutofillOverlayList");
+        });
+      });
+
+      describe("form field input change event listener", () => {
+        beforeEach(() => {
+          jest.spyOn(globalThis.customElements, "define").mockImplementation();
+        });
+
+        it("ignores span elements that trigger the listener", async () => {
+          const spanAutofillFieldElement = document.createElement(
+            "span"
+          ) as ElementWithOpId<HTMLSpanElement>;
+          jest.spyOn(autofillOverlayContentService as any, "storeModifiedFormElement");
+
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            spanAutofillFieldElement,
+            autofillFieldData
+          );
+
+          spanAutofillFieldElement.dispatchEvent(new Event("input"));
+
+          expect(autofillOverlayContentService["storeModifiedFormElement"]).not.toHaveBeenCalled();
+        });
+
+        it("stores the field as a user filled field if the form field data indicates that it is for a username", async () => {
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+          autofillFieldElement.dispatchEvent(new Event("input"));
+
+          expect(autofillOverlayContentService["userFilledFields"].username).toEqual(
+            autofillFieldElement
+          );
+        });
+
+        it("stores the field as a user filled field if the form field is of type password", async () => {
+          const passwordFieldElement = document.getElementById(
+            "password-field"
+          ) as ElementWithOpId<FormFieldElement>;
+
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            passwordFieldElement,
+            autofillFieldData
+          );
+          passwordFieldElement.dispatchEvent(new Event("input"));
+
+          expect(autofillOverlayContentService["userFilledFields"].password).toEqual(
+            passwordFieldElement
+          );
+        });
+
+        it("removes the overlay if the form field element has a value and the user is not authed", async () => {
+          jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(false);
+          const removeAutofillOverlayListSpy = jest.spyOn(
+            autofillOverlayContentService as any,
+            "removeAutofillOverlayList"
+          );
+          (autofillFieldElement as HTMLInputElement).value = "test";
+
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+          autofillFieldElement.dispatchEvent(new Event("input"));
+
+          expect(removeAutofillOverlayListSpy).toHaveBeenCalled();
+        });
+
+        it("removes the overlay if the form field element has a value and the overlay ciphers are populated", async () => {
+          jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(true);
+          autofillOverlayContentService["isOverlayCiphersPopulated"] = true;
+          const removeAutofillOverlayListSpy = jest.spyOn(
+            autofillOverlayContentService as any,
+            "removeAutofillOverlayList"
+          );
+          (autofillFieldElement as HTMLInputElement).value = "test";
+
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+          autofillFieldElement.dispatchEvent(new Event("input"));
+
+          expect(removeAutofillOverlayListSpy).toHaveBeenCalled();
+        });
+
+        it("opens the autofill overlay if the form field is empty", async () => {
+          jest.spyOn(autofillOverlayContentService as any, "openAutofillOverlay");
+          (autofillFieldElement as HTMLInputElement).value = "";
+
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+          autofillFieldElement.dispatchEvent(new Event("input"));
+
+          expect(autofillOverlayContentService["openAutofillOverlay"]).toHaveBeenCalled();
+        });
+
+        it("opens the autofill overlay if the form field is empty and the user is authed", async () => {
+          jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(true);
+          jest.spyOn(autofillOverlayContentService as any, "openAutofillOverlay");
+          (autofillFieldElement as HTMLInputElement).value = "";
+
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+          autofillFieldElement.dispatchEvent(new Event("input"));
+
+          expect(autofillOverlayContentService["openAutofillOverlay"]).toHaveBeenCalled();
+        });
+
+        it("opens the autofill overlay if the form field is empty and the overlay ciphers are not populated", async () => {
+          jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(false);
+          autofillOverlayContentService["isOverlayCiphersPopulated"] = false;
+          jest.spyOn(autofillOverlayContentService as any, "openAutofillOverlay");
+          (autofillFieldElement as HTMLInputElement).value = "";
+
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+          autofillFieldElement.dispatchEvent(new Event("input"));
+
+          expect(autofillOverlayContentService["openAutofillOverlay"]).toHaveBeenCalled();
+        });
+      });
+
+      describe("form field click event listener", () => {
+        beforeEach(async () => {
+          jest
+            .spyOn(autofillOverlayContentService as any, "triggerFormFieldFocusedAction")
+            .mockImplementation();
+          autofillOverlayContentService["isOverlayListVisible"] = false;
+          autofillOverlayContentService["isOverlayListVisible"] = false;
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+        });
+
+        it("triggers the field focused handler if the overlay is not visible", async () => {
+          autofillFieldElement.dispatchEvent(new Event("click"));
+
+          expect(autofillOverlayContentService["triggerFormFieldFocusedAction"]).toHaveBeenCalled();
+        });
+
+        it("skips triggering the field focused handler if the overlay list is visible", () => {
+          autofillOverlayContentService["isOverlayListVisible"] = true;
+
+          autofillFieldElement.dispatchEvent(new Event("click"));
+
+          expect(
+            autofillOverlayContentService["triggerFormFieldFocusedAction"]
+          ).not.toHaveBeenCalled();
+        });
+
+        it("skips triggering the field focused handler if the overlay button is visible", () => {
+          autofillOverlayContentService["isOverlayButtonVisible"] = true;
+
+          autofillFieldElement.dispatchEvent(new Event("click"));
+
+          expect(
+            autofillOverlayContentService["triggerFormFieldFocusedAction"]
+          ).not.toHaveBeenCalled();
+        });
+      });
+
+      describe("form field focus event listener", () => {
+        let updateMostRecentlyFocusedFieldSpy: jest.SpyInstance;
+
+        beforeEach(() => {
+          jest.spyOn(globalThis.customElements, "define").mockImplementation();
+          updateMostRecentlyFocusedFieldSpy = jest.spyOn(
+            autofillOverlayContentService as any,
+            "updateMostRecentlyFocusedField"
+          );
+          autofillOverlayContentService["isCurrentlyFilling"] = false;
+        });
+
+        it("skips triggering the handler logic if autofill is currently filling", async () => {
+          autofillOverlayContentService["isCurrentlyFilling"] = true;
+          autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
+          autofillOverlayContentService["autofillOverlayVisibility"] =
+            AutofillOverlayVisibility.OnFieldFocus;
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+
+          autofillFieldElement.dispatchEvent(new Event("focus"));
+
+          expect(updateMostRecentlyFocusedFieldSpy).not.toHaveBeenCalled();
+        });
+
+        it("updates the most recently focused field", async () => {
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+
+          autofillFieldElement.dispatchEvent(new Event("focus"));
+
+          expect(updateMostRecentlyFocusedFieldSpy).toHaveBeenCalledWith(autofillFieldElement);
+          expect(autofillOverlayContentService["mostRecentlyFocusedField"]).toEqual(
+            autofillFieldElement
+          );
+        });
+
+        it("removes the overlay list if the autofill visibility is set to onClick", async () => {
+          autofillOverlayContentService["overlayListElement"] = document.createElement("div");
+          autofillOverlayContentService["autofillOverlayVisibility"] =
+            AutofillOverlayVisibility.OnButtonClick;
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+
+          autofillFieldElement.dispatchEvent(new Event("focus"));
+          await flushPromises();
+
+          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
+            overlayElement: "autofill-overlay-list",
+          });
+        });
+
+        it("removes the overlay list if the form element has a value and the focused field is newly focused", async () => {
+          autofillOverlayContentService["overlayListElement"] = document.createElement("div");
+          autofillOverlayContentService["mostRecentlyFocusedField"] = document.createElement(
+            "input"
+          ) as ElementWithOpId<HTMLInputElement>;
+          (autofillFieldElement as HTMLInputElement).value = "test";
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+
+          autofillFieldElement.dispatchEvent(new Event("focus"));
+          await flushPromises();
+
+          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
+            overlayElement: "autofill-overlay-list",
+          });
+        });
+
+        it("opens the autofill overlay if the form element has no value", async () => {
+          autofillOverlayContentService["overlayListElement"] = document.createElement("div");
+          (autofillFieldElement as HTMLInputElement).value = "";
+          autofillOverlayContentService["autofillOverlayVisibility"] =
+            AutofillOverlayVisibility.OnFieldFocus;
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+
+          autofillFieldElement.dispatchEvent(new Event("focus"));
+          await flushPromises();
+
+          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("openAutofillOverlay");
+        });
+
+        it("opens the autofill overlay if the overlay ciphers are not populated and the user is authed", async () => {
+          autofillOverlayContentService["overlayListElement"] = document.createElement("div");
+          (autofillFieldElement as HTMLInputElement).value = "";
+          autofillOverlayContentService["autofillOverlayVisibility"] =
+            AutofillOverlayVisibility.OnFieldFocus;
+          jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(true);
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+
+          autofillFieldElement.dispatchEvent(new Event("focus"));
+          await flushPromises();
+
+          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("openAutofillOverlay");
+        });
+
+        it("updates the overlay button position if the focus event is not opening the overlay", async () => {
+          autofillOverlayContentService["autofillOverlayVisibility"] =
+            AutofillOverlayVisibility.OnFieldFocus;
+          (autofillFieldElement as HTMLInputElement).value = "test";
+          autofillOverlayContentService["isOverlayCiphersPopulated"] = true;
+          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+            autofillFieldElement,
+            autofillFieldData
+          );
+
+          autofillFieldElement.dispatchEvent(new Event("focus"));
+          await flushPromises();
+
+          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
+            overlayElement: AutofillOverlayElement.Button,
+          });
+        });
+      });
+    });
+
+    it("triggers the form field focused handler if the current active element in the document is the passed form field", async () => {
+      const documentRoot = autofillFieldElement.getRootNode() as Document;
+      Object.defineProperty(documentRoot, "activeElement", {
+        value: autofillFieldElement,
+        writable: true,
+      });
+
+      await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+        autofillFieldElement,
+        autofillFieldData
+      );
+
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("openAutofillOverlay");
+      expect(autofillOverlayContentService["mostRecentlyFocusedField"]).toEqual(
+        autofillFieldElement
+      );
+    });
+
+    it("sets the most recently focused field to the passed form field element if the value is not set", async () => {
+      autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
+
+      await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
+        autofillFieldElement,
+        autofillFieldData
+      );
+
+      expect(autofillOverlayContentService["mostRecentlyFocusedField"]).toEqual(
+        autofillFieldElement
+      );
+    });
+  });
+
+  describe("openAutofillOverlay", () => {
+    let autofillFieldElement: ElementWithOpId<FormFieldElement>;
+
+    beforeEach(() => {
+      document.body.innerHTML = `
+      <form id="validFormId">
+        <input type="text" id="username-field" placeholder="username" />
+        <input type="password" id="password-field" placeholder="password" />
+      </form>
+      `;
+
+      autofillFieldElement = document.getElementById(
+        "username-field"
+      ) as ElementWithOpId<FormFieldElement>;
+      autofillFieldElement.opid = "op-1";
+      autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
+    });
+
+    it("skips opening the overlay if a field has not been recently focused", () => {
+      autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
+
+      autofillOverlayContentService["openAutofillOverlay"]();
+
+      expect(sendExtensionMessageSpy).not.toHaveBeenCalled();
+    });
+
+    it("focuses the most recent overlay field if the field is not focused", () => {
+      jest.spyOn(autofillFieldElement, "getRootNode").mockReturnValue(document);
+      Object.defineProperty(document, "activeElement", {
+        value: document.createElement("div"),
+        writable: true,
+      });
+      const focusMostRecentOverlayFieldSpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "focusMostRecentOverlayField"
+      );
+
+      autofillOverlayContentService["openAutofillOverlay"]({ isFocusingFieldElement: true });
+
+      expect(focusMostRecentOverlayFieldSpy).toHaveBeenCalled();
+    });
+
+    it("skips focusing the most recent overlay field if the field is already focused", () => {
+      jest.spyOn(autofillFieldElement, "getRootNode").mockReturnValue(document);
+      Object.defineProperty(document, "activeElement", {
+        value: autofillFieldElement,
+        writable: true,
+      });
+      const focusMostRecentOverlayFieldSpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "focusMostRecentOverlayField"
+      );
+
+      autofillOverlayContentService["openAutofillOverlay"]({ isFocusingFieldElement: true });
+
+      expect(focusMostRecentOverlayFieldSpy).not.toHaveBeenCalled();
+    });
+
+    it("stores the user's auth status", () => {
+      autofillOverlayContentService["authStatus"] = undefined;
+
+      autofillOverlayContentService["openAutofillOverlay"]({
+        authStatus: AuthenticationStatus.Unlocked,
+      });
+
+      expect(autofillOverlayContentService["authStatus"]).toEqual(AuthenticationStatus.Unlocked);
+    });
+
+    it("opens both autofill overlay elements", () => {
+      autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
+
+      autofillOverlayContentService["openAutofillOverlay"]();
+
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
+        overlayElement: AutofillOverlayElement.Button,
+      });
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
+        overlayElement: AutofillOverlayElement.List,
+      });
+    });
+
+    it("opens the autofill overlay button only if overlay visibility is set for onButtonClick", () => {
+      autofillOverlayContentService["autofillOverlayVisibility"] =
+        AutofillOverlayVisibility.OnButtonClick;
+
+      autofillOverlayContentService["openAutofillOverlay"]({ isOpeningFullOverlay: false });
+
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
+        overlayElement: AutofillOverlayElement.Button,
+      });
+      expect(sendExtensionMessageSpy).not.toHaveBeenCalledWith("updateAutofillOverlayPosition", {
+        overlayElement: AutofillOverlayElement.List,
+      });
+    });
+
+    it("overrides the onButtonClick visibility setting to open both overlay elements", () => {
+      autofillOverlayContentService["autofillOverlayVisibility"] =
+        AutofillOverlayVisibility.OnButtonClick;
+
+      autofillOverlayContentService["openAutofillOverlay"]({ isOpeningFullOverlay: true });
+
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
+        overlayElement: AutofillOverlayElement.Button,
+      });
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
+        overlayElement: AutofillOverlayElement.List,
+      });
+    });
+
+    it("sends an extension message requesting an re-collection of page details if they need to update", () => {
+      jest.spyOn(autofillOverlayContentService as any, "sendExtensionMessage");
+      autofillOverlayContentService.pageDetailsUpdateRequired = true;
+
+      autofillOverlayContentService["openAutofillOverlay"]();
+
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("bgCollectPageDetails", {
+        sender: "autofillOverlayContentService",
+      });
+    });
+  });
+
+  describe("focusMostRecentOverlayField", () => {
+    it("focuses the most recently focused overlay field", () => {
+      const mostRecentlyFocusedField = document.createElement(
+        "input"
+      ) as ElementWithOpId<HTMLInputElement>;
+      autofillOverlayContentService["mostRecentlyFocusedField"] = mostRecentlyFocusedField;
+      jest.spyOn(mostRecentlyFocusedField, "focus");
+
+      autofillOverlayContentService["focusMostRecentOverlayField"]();
+
+      expect(mostRecentlyFocusedField.focus).toHaveBeenCalled();
+    });
+  });
+
+  describe("blurMostRecentOverlayField", () => {
+    it("removes focus from the most recently focused overlay field", () => {
+      const mostRecentlyFocusedField = document.createElement(
+        "input"
+      ) as ElementWithOpId<HTMLInputElement>;
+      autofillOverlayContentService["mostRecentlyFocusedField"] = mostRecentlyFocusedField;
+      jest.spyOn(mostRecentlyFocusedField, "blur");
+
+      autofillOverlayContentService["blurMostRecentOverlayField"]();
+
+      expect(mostRecentlyFocusedField.blur).toHaveBeenCalled();
+    });
+  });
+
+  describe("removeAutofillOverlay", () => {
+    it("disconnects the body's mutation observer", () => {
+      const bodyMutationObserver = mock<MutationObserver>();
+      autofillOverlayContentService["bodyElementMutationObserver"] = bodyMutationObserver;
+
+      autofillOverlayContentService.removeAutofillOverlay();
+
+      expect(bodyMutationObserver.disconnect).toHaveBeenCalled();
+    });
+  });
+
+  describe("removeAutofillOverlayButton", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `<div class="overlay-button"></div>`;
+      autofillOverlayContentService["overlayButtonElement"] = document.querySelector(
+        ".overlay-button"
+      ) as HTMLElement;
+    });
+
+    it("removes the overlay button from the DOM", () => {
+      const overlayButtonElement = document.querySelector(".overlay-button") as HTMLElement;
+      autofillOverlayContentService["isOverlayButtonVisible"] = true;
+
+      autofillOverlayContentService.removeAutofillOverlay();
+
+      expect(autofillOverlayContentService["isOverlayButtonVisible"]).toEqual(false);
+      expect(document.body.contains(overlayButtonElement)).toEqual(false);
+    });
+
+    it("sends a message to the background indicating that the overlay button has been closed", () => {
+      autofillOverlayContentService.removeAutofillOverlay();
+
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
+        overlayElement: AutofillOverlayElement.Button,
+      });
+    });
+
+    it("removes the overlay reposition event listeners", () => {
+      jest.spyOn(globalThis.document.body, "removeEventListener");
+      jest.spyOn(globalThis, "removeEventListener");
+      const handleOverlayRepositionEventSpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "handleOverlayRepositionEvent"
+      );
+
+      autofillOverlayContentService.removeAutofillOverlay();
+
+      expect(globalThis.removeEventListener).toHaveBeenCalledWith(
+        EVENTS.SCROLL,
+        handleOverlayRepositionEventSpy,
+        {
+          capture: true,
+        }
+      );
+      expect(globalThis.removeEventListener).toHaveBeenCalledWith(
+        EVENTS.RESIZE,
+        handleOverlayRepositionEventSpy
+      );
+    });
+  });
+
+  describe("removeAutofillOverlayList", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `<div class="overlay-list"></div>`;
+      autofillOverlayContentService["overlayListElement"] = document.querySelector(
+        ".overlay-list"
+      ) as HTMLElement;
+    });
+
+    it("removes the overlay list element from the dom", () => {
+      const overlayListElement = document.querySelector(".overlay-list") as HTMLElement;
+      autofillOverlayContentService["isOverlayListVisible"] = true;
+
+      autofillOverlayContentService.removeAutofillOverlay();
+
+      expect(autofillOverlayContentService["isOverlayListVisible"]).toEqual(false);
+      expect(document.body.contains(overlayListElement)).toEqual(false);
+    });
+
+    it("sends a message to the extension background indicating that the overlay list has closed", () => {
+      autofillOverlayContentService.removeAutofillOverlay();
+
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
+        overlayElement: AutofillOverlayElement.List,
+      });
+    });
+  });
+
+  describe("addNewVaultItem", () => {
+    it("skips sending the message if the overlay list is not visible", () => {
+      autofillOverlayContentService["isOverlayListVisible"] = false;
+
+      autofillOverlayContentService.addNewVaultItem();
+
+      expect(sendExtensionMessageSpy).not.toHaveBeenCalled();
+    });
+
+    it("sends a message that facilitates adding a new vault item with empty fields", () => {
+      autofillOverlayContentService["isOverlayListVisible"] = true;
+
+      autofillOverlayContentService.addNewVaultItem();
+
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayAddNewVaultItem", {
+        login: {
+          username: "",
+          password: "",
+          uri: "http://localhost/",
+          hostname: "localhost",
+        },
+      });
+    });
+
+    it("sends a message that facilitates adding a new vault item with data from user filled fields", () => {
+      document.body.innerHTML = `
+      <form id="validFormId">
+        <input type="text" id="username-field" placeholder="username" />
+        <input type="password" id="password-field" placeholder="password" />
+      </form>
+      `;
+      const usernameField = document.getElementById(
+        "username-field"
+      ) as ElementWithOpId<HTMLInputElement>;
+      const passwordField = document.getElementById(
+        "password-field"
+      ) as ElementWithOpId<HTMLInputElement>;
+      usernameField.value = "test-username";
+      passwordField.value = "test-password";
+      autofillOverlayContentService["isOverlayListVisible"] = true;
+      autofillOverlayContentService["userFilledFields"] = {
+        username: usernameField,
+        password: passwordField,
+      };
+
+      autofillOverlayContentService.addNewVaultItem();
+
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayAddNewVaultItem", {
+        login: {
+          username: "test-username",
+          password: "test-password",
+          uri: "http://localhost/",
+          hostname: "localhost",
+        },
+      });
+    });
+  });
+
+  describe("redirectOverlayFocusOut", () => {
+    let autofillFieldElement: ElementWithOpId<FormFieldElement>;
+    let autofillFieldFocusSpy: jest.SpyInstance;
+    let findTabsSpy: jest.SpyInstance;
+    let previousFocusableElement: HTMLElement;
+    let nextFocusableElement: HTMLElement;
+
+    beforeEach(() => {
+      document.body.innerHTML = `
+      <div class="previous-focusable-element" tabindex="0"></div>
+      <form id="validFormId">
+        <input type="text" id="username-field" placeholder="username" />
+        <input type="password" id="password-field" placeholder="password" />
+      </form>
+      <div class="next-focusable-element" tabindex="0"></div>
+      `;
+      autofillFieldElement = document.getElementById(
+        "username-field"
+      ) as ElementWithOpId<FormFieldElement>;
+      autofillFieldElement.opid = "op-1";
+      previousFocusableElement = document.querySelector(
+        ".previous-focusable-element"
+      ) as HTMLElement;
+      nextFocusableElement = document.querySelector(".next-focusable-element") as HTMLElement;
+      autofillFieldFocusSpy = jest.spyOn(autofillFieldElement, "focus");
+      findTabsSpy = jest.spyOn(autofillOverlayContentService as any, "findTabs");
+      autofillOverlayContentService["isOverlayListVisible"] = true;
+      autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
+      autofillOverlayContentService["focusableElements"] = [
+        previousFocusableElement,
+        autofillFieldElement,
+        nextFocusableElement,
+      ];
+    });
+
+    it("skips focusing an element if the overlay is not visible", () => {
+      autofillOverlayContentService["isOverlayListVisible"] = false;
+
+      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Next);
+
+      expect(findTabsSpy).not.toHaveBeenCalled();
+    });
+
+    it("skips focusing an element if no recently focused field exists", () => {
+      autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
+
+      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Next);
+
+      expect(findTabsSpy).not.toHaveBeenCalled();
+    });
+
+    it("focuses the most recently focused field if the focus direction is `Current`", () => {
+      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Current);
+
+      expect(findTabsSpy).not.toHaveBeenCalled();
+      expect(autofillFieldFocusSpy).toHaveBeenCalled();
+    });
+
+    it("removes the overlay if the focus direction is `Current`", () => {
+      jest.useFakeTimers();
+      const removeAutofillOverlaySpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "removeAutofillOverlay"
+      );
+
+      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Current);
+      jest.advanceTimersByTime(150);
+
+      expect(removeAutofillOverlaySpy).toHaveBeenCalled();
+    });
+
+    it("finds all focusable tabs if the focusable elements array is not populated", () => {
+      autofillOverlayContentService["focusableElements"] = [];
+      findTabsSpy.mockReturnValue([
+        previousFocusableElement,
+        autofillFieldElement,
+        nextFocusableElement,
+      ]);
+
+      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Next);
+
+      expect(findTabsSpy).toHaveBeenCalledWith(globalThis.document.body, { getShadowRoot: true });
+    });
+
+    it("focuses the previous focusable element if the focus direction is `Previous`", () => {
+      jest.spyOn(previousFocusableElement, "focus");
+
+      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Previous);
+
+      expect(autofillFieldFocusSpy).not.toHaveBeenCalled();
+      expect(previousFocusableElement.focus).toHaveBeenCalled();
+    });
+
+    it("focuses the next focusable element if the focus direction is `Next`", () => {
+      jest.spyOn(nextFocusableElement, "focus");
+
+      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Next);
+
+      expect(autofillFieldFocusSpy).not.toHaveBeenCalled();
+      expect(nextFocusableElement.focus).toHaveBeenCalled();
+    });
+  });
+
+  describe("handleOverlayRepositionEvent", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+      <form id="validFormId">
+        <input type="text" id="username-field" placeholder="username" />
+        <input type="password" id="password-field" placeholder="password" />
+      </form>
+      `;
+      const usernameField = document.getElementById(
+        "username-field"
+      ) as ElementWithOpId<HTMLInputElement>;
+      autofillOverlayContentService["mostRecentlyFocusedField"] = usernameField;
+      autofillOverlayContentService["setOverlayRepositionEventListeners"]();
+      autofillOverlayContentService["isOverlayButtonVisible"] = true;
+      autofillOverlayContentService["isOverlayListVisible"] = true;
+      jest
+        .spyOn(autofillOverlayContentService as any, "recentlyFocusedFieldIsCurrentlyFocused")
+        .mockReturnValue(true);
+    });
+
+    it("skips handling the overlay reposition event if the overlay button and list elements are not visible", () => {
+      autofillOverlayContentService["isOverlayButtonVisible"] = false;
+      autofillOverlayContentService["isOverlayListVisible"] = false;
+
+      globalThis.dispatchEvent(new Event(EVENTS.RESIZE));
+
+      expect(sendExtensionMessageSpy).not.toHaveBeenCalled();
+    });
+
+    it("hides the overlay elements", () => {
+      globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
+
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayHidden", {
+        display: "none",
+      });
+      expect(autofillOverlayContentService["isOverlayButtonVisible"]).toEqual(false);
+      expect(autofillOverlayContentService["isOverlayListVisible"]).toEqual(false);
+    });
+
+    it("clears the user interaction timeout", () => {
+      jest.useFakeTimers();
+      const clearTimeoutSpy = jest.spyOn(globalThis, "clearTimeout");
+      autofillOverlayContentService["userInteractionEventTimeout"] = setTimeout(jest.fn(), 123);
+
+      globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
+
+      expect(clearTimeoutSpy).toHaveBeenCalledWith(expect.anything());
+    });
+
+    it("removes the overlay completely if the field is not focused", () => {
+      jest.useFakeTimers();
+      jest
+        .spyOn(autofillOverlayContentService as any, "recentlyFocusedFieldIsCurrentlyFocused")
+        .mockReturnValue(false);
+      const removeAutofillOverlaySpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "removeAutofillOverlay"
+      );
+      autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
+
+      globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
+      jest.advanceTimersByTime(800);
+
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayHidden", {
+        display: "block",
+      });
+      expect(autofillOverlayContentService["isOverlayButtonVisible"]).toEqual(true);
+      expect(autofillOverlayContentService["isOverlayListVisible"]).toEqual(true);
+      expect(removeAutofillOverlaySpy).toHaveBeenCalled();
+    });
+
+    it("updates the overlay position if the most recently focused field is still within the viewport", async () => {
+      jest.useFakeTimers();
+      jest
+        .spyOn(autofillOverlayContentService as any, "updateMostRecentlyFocusedField")
+        .mockImplementation(() => {
+          autofillOverlayContentService["focusedFieldData"] = {
+            focusedFieldRects: {
+              top: 100,
+            },
+            focusedFieldStyles: {},
+          };
+        });
+      const clearUserInteractionEventTimeoutSpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "clearUserInteractionEventTimeout"
+      );
+
+      globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
+      jest.advanceTimersByTime(800);
+      await flushPromises();
+
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
+        overlayElement: AutofillOverlayElement.Button,
+      });
+      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
+        overlayElement: AutofillOverlayElement.List,
+      });
+      expect(clearUserInteractionEventTimeoutSpy).toHaveBeenCalled();
+    });
+
+    it("removes the autofill overlay if the focused field is outside of the viewport", async () => {
+      jest.useFakeTimers();
+      jest
+        .spyOn(autofillOverlayContentService as any, "updateMostRecentlyFocusedField")
+        .mockImplementation(() => {
+          autofillOverlayContentService["focusedFieldData"] = {
+            focusedFieldRects: {
+              top: 4000,
+            },
+            focusedFieldStyles: {},
+          };
+        });
+      const removeAutofillOverlaySpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "removeAutofillOverlay"
+      );
+
+      globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
+      jest.advanceTimersByTime(800);
+      await flushPromises();
+
+      expect(removeAutofillOverlaySpy).toHaveBeenCalled();
+    });
+  });
+
+  describe("handleOverlayElementMutationObserverUpdate", () => {
+    let usernameField: ElementWithOpId<HTMLInputElement>;
+
+    beforeEach(() => {
+      document.body.innerHTML = `
+      <form id="validFormId">
+        <input type="text" id="username-field" placeholder="username" />
+        <input type="password" id="password-field" placeholder="password" />
+      </form>
+      `;
+      usernameField = document.getElementById(
+        "username-field"
+      ) as ElementWithOpId<HTMLInputElement>;
+      usernameField.style.setProperty("display", "block", "important");
+      jest.spyOn(usernameField, "removeAttribute");
+      jest.spyOn(usernameField.style, "setProperty");
+      jest
+        .spyOn(
+          autofillOverlayContentService as any,
+          "isTriggeringExcessiveMutationObserverIterations"
+        )
+        .mockReturnValue(false);
+    });
+
+    it("skips handling the mutation if excessive mutation observer events are triggered", () => {
+      jest
+        .spyOn(
+          autofillOverlayContentService as any,
+          "isTriggeringExcessiveMutationObserverIterations"
+        )
+        .mockReturnValue(true);
+
+      autofillOverlayContentService["handleOverlayElementMutationObserverUpdate"]([
+        mock<MutationRecord>({
+          target: usernameField,
+        }),
+      ]);
+
+      expect(usernameField.removeAttribute).not.toHaveBeenCalled();
+    });
+
+    it("skips handling the mutation if the record type is not for `attributes`", () => {
+      autofillOverlayContentService["handleOverlayElementMutationObserverUpdate"]([
+        mock<MutationRecord>({
+          target: usernameField,
+          type: "childList",
+        }),
+      ]);
+
+      expect(usernameField.removeAttribute).not.toHaveBeenCalled();
+    });
+
+    it("removes all element attributes that are not the style attribute", () => {
+      autofillOverlayContentService["handleOverlayElementMutationObserverUpdate"]([
+        mock<MutationRecord>({
+          target: usernameField,
+          type: "attributes",
+          attributeName: "placeholder",
+        }),
+      ]);
+
+      expect(usernameField.removeAttribute).toHaveBeenCalledWith("placeholder");
+    });
+
+    it("removes all attached style attributes and sets the default styles", () => {
+      autofillOverlayContentService["handleOverlayElementMutationObserverUpdate"]([
+        mock<MutationRecord>({
+          target: usernameField,
+          type: "attributes",
+          attributeName: "style",
+        }),
+      ]);
+
+      expect(usernameField.removeAttribute).toHaveBeenCalledWith("style");
+      expect(usernameField.style.setProperty).toHaveBeenCalledWith("all", "initial", "important");
+      expect(usernameField.style.setProperty).toHaveBeenCalledWith(
+        "position",
+        "fixed",
+        "important"
+      );
+      expect(usernameField.style.setProperty).toHaveBeenCalledWith("display", "block", "important");
+    });
+  });
+
+  describe("handleBodyElementMutationObserverUpdate", () => {
+    let overlayButtonElement: HTMLElement;
+    let overlayListElement: HTMLElement;
+
+    beforeEach(() => {
+      document.body.innerHTML = `
+      <div class="overlay-button"></div>
+      <div class="overlay-list"></div>
+      `;
+      overlayButtonElement = document.querySelector(".overlay-button") as HTMLElement;
+      overlayListElement = document.querySelector(".overlay-list") as HTMLElement;
+      autofillOverlayContentService["overlayButtonElement"] = overlayButtonElement;
+      autofillOverlayContentService["overlayListElement"] = overlayListElement;
+      autofillOverlayContentService["isOverlayListVisible"] = true;
+      jest.spyOn(globalThis.document.body, "insertBefore");
+      jest
+        .spyOn(
+          autofillOverlayContentService as any,
+          "isTriggeringExcessiveMutationObserverIterations"
+        )
+        .mockReturnValue(false);
+    });
+
+    it("skips handling the mutation if the overlay elements are not present in the DOM", () => {
+      autofillOverlayContentService["overlayButtonElement"] = undefined;
+      autofillOverlayContentService["overlayListElement"] = undefined;
+
+      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
+
+      expect(globalThis.document.body.insertBefore).not.toHaveBeenCalled();
+    });
+
+    it("skips handling the mutation if excessive mutations are being triggered", () => {
+      jest
+        .spyOn(
+          autofillOverlayContentService as any,
+          "isTriggeringExcessiveMutationObserverIterations"
+        )
+        .mockReturnValue(true);
+
+      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
+
+      expect(globalThis.document.body.insertBefore).not.toHaveBeenCalled();
+    });
+
+    it("skips re-arranging the DOM elements if the last child of the body is the overlay list and the second to last child of the body is the overlay button", () => {
+      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
+
+      expect(globalThis.document.body.insertBefore).not.toHaveBeenCalled();
+    });
+
+    it("skips re-arranging the DOM elements if the last child is the overlay button and the overlay list is not visible", () => {
+      overlayListElement.remove();
+      autofillOverlayContentService["isOverlayListVisible"] = false;
+
+      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
+
+      expect(globalThis.document.body.insertBefore).not.toHaveBeenCalled();
+    });
+
+    it("positions the overlay button before the overlay list if an element has inserted itself after the button element", () => {
+      const injectedElement = document.createElement("div");
+      document.body.insertBefore(injectedElement, overlayListElement);
+
+      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
+
+      expect(globalThis.document.body.insertBefore).toHaveBeenCalledWith(
+        overlayButtonElement,
+        overlayListElement
+      );
+    });
+
+    it("positions the overlay button before the overlay list if the elements have inserted in incorrect order", () => {
+      document.body.appendChild(overlayButtonElement);
+
+      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
+
+      expect(globalThis.document.body.insertBefore).toHaveBeenCalledWith(
+        overlayButtonElement,
+        overlayListElement
+      );
+    });
+
+    it("positions the last child before the overlay button if it is not the overlay list", () => {
+      const injectedElement = document.createElement("div");
+      document.body.appendChild(injectedElement);
+
+      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
+
+      expect(globalThis.document.body.insertBefore).toHaveBeenCalledWith(
+        injectedElement,
+        overlayButtonElement
+      );
+    });
+  });
+
+  describe("handleDocumentElementMutationObserverUpdate", () => {
+    let overlayButtonElement: HTMLElement;
+    let overlayListElement: HTMLElement;
+
+    beforeEach(() => {
+      document.body.innerHTML = `
+      <div class="overlay-button"></div>
+      <div class="overlay-list"></div>
+      `;
+      document.head.innerHTML = `<title>test</title>`;
+      overlayButtonElement = document.querySelector(".overlay-button") as HTMLElement;
+      overlayListElement = document.querySelector(".overlay-list") as HTMLElement;
+      autofillOverlayContentService["overlayButtonElement"] = overlayButtonElement;
+      autofillOverlayContentService["overlayListElement"] = overlayListElement;
+      autofillOverlayContentService["isOverlayListVisible"] = true;
+      jest.spyOn(globalThis.document.body, "appendChild");
+      jest
+        .spyOn(
+          autofillOverlayContentService as any,
+          "isTriggeringExcessiveMutationObserverIterations"
+        )
+        .mockReturnValue(false);
+    });
+
+    it("skips modification of the DOM if the overlay button and list elements are not present", () => {
+      autofillOverlayContentService["overlayButtonElement"] = undefined;
+      autofillOverlayContentService["overlayListElement"] = undefined;
+
+      autofillOverlayContentService["handleDocumentElementMutationObserverUpdate"]([
+        mock<MutationRecord>(),
+      ]);
+
+      expect(globalThis.document.body.appendChild).not.toHaveBeenCalled();
+    });
+
+    it("skips modification of the DOM if excessive mutation events are being triggered", () => {
+      jest
+        .spyOn(
+          autofillOverlayContentService as any,
+          "isTriggeringExcessiveMutationObserverIterations"
+        )
+        .mockReturnValue(true);
+
+      autofillOverlayContentService["handleDocumentElementMutationObserverUpdate"]([
+        mock<MutationRecord>(),
+      ]);
+
+      expect(globalThis.document.body.appendChild).not.toHaveBeenCalled();
+    });
+
+    it("ignores the mutation record if the record is not of type `childlist`", () => {
+      autofillOverlayContentService["handleDocumentElementMutationObserverUpdate"]([
+        mock<MutationRecord>({
+          type: "attributes",
+        }),
+      ]);
+
+      expect(globalThis.document.body.appendChild).not.toHaveBeenCalled();
+    });
+
+    it("ignores the mutation record if the record does not contain any added nodes", () => {
+      autofillOverlayContentService["handleDocumentElementMutationObserverUpdate"]([
+        mock<MutationRecord>({
+          type: "childList",
+          addedNodes: mock<NodeList>({ length: 0 }),
+        }),
+      ]);
+
+      expect(globalThis.document.body.appendChild).not.toHaveBeenCalled();
+    });
+
+    it("ignores mutations for the document body and head", () => {
+      autofillOverlayContentService["handleDocumentElementMutationObserverUpdate"]([
+        {
+          type: "childList",
+          addedNodes: document.querySelectorAll("body, head"),
+        } as unknown as MutationRecord,
+      ]);
+
+      expect(globalThis.document.body.appendChild).not.toHaveBeenCalled();
+    });
+
+    it("appends the identified node to the body", async () => {
+      jest.useFakeTimers();
+      const injectedElement = document.createElement("div");
+      injectedElement.id = "test";
+      document.documentElement.appendChild(injectedElement);
+      autofillOverlayContentService["handleDocumentElementMutationObserverUpdate"]([
+        {
+          type: "childList",
+          addedNodes: document.querySelectorAll("#test"),
+        } as unknown as MutationRecord,
+      ]);
+      jest.advanceTimersByTime(10);
+
+      expect(globalThis.document.body.appendChild).toHaveBeenCalledWith(injectedElement);
+    });
+  });
+
+  describe("isTriggeringExcessiveMutationObserverIterations", () => {
+    it("clears any existing reset timeout", () => {
+      jest.useFakeTimers();
+      const clearTimeoutSpy = jest.spyOn(globalThis, "clearTimeout");
+      autofillOverlayContentService["mutationObserverIterationsResetTimeout"] = setTimeout(
+        jest.fn(),
+        123
+      );
+
+      autofillOverlayContentService["isTriggeringExcessiveMutationObserverIterations"]();
+
+      expect(clearTimeoutSpy).toHaveBeenCalledWith(expect.anything());
+    });
+
+    it("will reset the number of mutationObserverIterations after two seconds", () => {
+      jest.useFakeTimers();
+      autofillOverlayContentService["mutationObserverIterations"] = 10;
+
+      autofillOverlayContentService["isTriggeringExcessiveMutationObserverIterations"]();
+      jest.advanceTimersByTime(2000);
+
+      expect(autofillOverlayContentService["mutationObserverIterations"]).toEqual(0);
+    });
+
+    it("will blur the overlay field and remove the autofill overlay if excessive mutation observer iterations are triggering", async () => {
+      autofillOverlayContentService["mutationObserverIterations"] = 101;
+      const blurMostRecentOverlayFieldSpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "blurMostRecentOverlayField"
+      );
+      const removeAutofillOverlaySpy = jest.spyOn(
+        autofillOverlayContentService as any,
+        "removeAutofillOverlay"
+      );
+
+      autofillOverlayContentService["isTriggeringExcessiveMutationObserverIterations"]();
+      await flushPromises();
+
+      expect(blurMostRecentOverlayFieldSpy).toHaveBeenCalled();
+      expect(removeAutofillOverlaySpy).toHaveBeenCalled();
+    });
+  });
+
+  describe("handleVisibilityChangeEvent", () => {
+    it("skips removing the overlay if the document is visible", () => {
+      jest.spyOn(autofillOverlayContentService as any, "removeAutofillOverlay");
+
+      autofillOverlayContentService["handleVisibilityChangeEvent"]();
+
+      expect(autofillOverlayContentService["removeAutofillOverlay"]).not.toHaveBeenCalled();
+    });
+
+    it("removes the overlay if the document is not visible", () => {
+      Object.defineProperty(document, "visibilityState", {
+        value: "hidden",
+        writable: true,
+      });
+      jest.spyOn(autofillOverlayContentService as any, "removeAutofillOverlay");
+
+      autofillOverlayContentService["handleVisibilityChangeEvent"]();
+
+      expect(autofillOverlayContentService["removeAutofillOverlay"]).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
new file mode 100644
index 00000000000..fc1136a368b
--- /dev/null
+++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
@@ -0,0 +1,1124 @@
+import "@webcomponents/custom-elements";
+import "lit/polyfill-support.js";
+import { FocusableElement, tabbable } from "tabbable";
+
+import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+
+import { FocusedFieldData } from "../background/abstractions/overlay.background";
+import { EVENTS } from "../constants";
+import AutofillField from "../models/autofill-field";
+import AutofillOverlayButtonIframe from "../overlay/iframe-content/autofill-overlay-button-iframe";
+import AutofillOverlayListIframe from "../overlay/iframe-content/autofill-overlay-list-iframe";
+import { ElementWithOpId, FillableFormFieldElement, FormFieldElement } from "../types";
+import {
+  AutofillOverlayElement,
+  RedirectFocusDirection,
+  AutofillOverlayVisibility,
+} from "../utils/autofill-overlay.enum";
+import {
+  generateRandomCustomElementName,
+  sendExtensionMessage,
+  setElementStyles,
+} from "../utils/utils";
+
+import {
+  AutofillOverlayContentService as AutofillOverlayContentServiceInterface,
+  OpenAutofillOverlayOptions,
+} from "./abstractions/autofill-overlay-content.service";
+import { AutoFillConstants } from "./autofill-constants";
+
+class AutofillOverlayContentService implements AutofillOverlayContentServiceInterface {
+  isFieldCurrentlyFocused = false;
+  isCurrentlyFilling = false;
+  isOverlayCiphersPopulated = false;
+  pageDetailsUpdateRequired = false;
+  private readonly findTabs = tabbable;
+  private readonly sendExtensionMessage = sendExtensionMessage;
+  private autofillOverlayVisibility: number;
+  private userFilledFields: Record<string, FillableFormFieldElement> = {};
+  private authStatus: AuthenticationStatus;
+  private focusableElements: FocusableElement[] = [];
+  private isOverlayButtonVisible = false;
+  private isOverlayListVisible = false;
+  private overlayButtonElement: HTMLElement;
+  private overlayListElement: HTMLElement;
+  private mostRecentlyFocusedField: ElementWithOpId<FormFieldElement>;
+  private focusedFieldData: FocusedFieldData;
+  private userInteractionEventTimeout: NodeJS.Timeout;
+  private overlayElementsMutationObserver: MutationObserver;
+  private bodyElementMutationObserver: MutationObserver;
+  private mutationObserverIterations = 0;
+  private mutationObserverIterationsResetTimeout: NodeJS.Timeout;
+  private autofillFieldKeywordsMap: WeakMap<AutofillField, string> = new WeakMap();
+  private eventHandlersMemo: { [key: string]: EventListener } = {};
+  private readonly customElementDefaultStyles: Partial<CSSStyleDeclaration> = {
+    all: "initial",
+    position: "fixed",
+    display: "block",
+    zIndex: "2147483647",
+  };
+
+  /**
+   * Initializes the autofill overlay content service by setting up the mutation observers.
+   * The observers will be instantiated on DOMContentLoaded if the page is current loading.
+   */
+  init() {
+    if (globalThis.document.readyState === "loading") {
+      globalThis.document.addEventListener(EVENTS.DOMCONTENTLOADED, this.setupGlobalEventListeners);
+      return;
+    }
+
+    this.setupGlobalEventListeners();
+  }
+
+  /**
+   * Sets up the autofill overlay listener on the form field element. This method is called
+   * during the page details collection process.
+   *
+   * @param formFieldElement - Form field elements identified during the page details collection process.
+   * @param autofillFieldData - Autofill field data captured from the form field element.
+   */
+  async setupAutofillOverlayListenerOnField(
+    formFieldElement: ElementWithOpId<FormFieldElement>,
+    autofillFieldData: AutofillField
+  ) {
+    if (this.isIgnoredField(autofillFieldData)) {
+      return;
+    }
+
+    if (!this.autofillOverlayVisibility) {
+      await this.getAutofillOverlayVisibility();
+    }
+
+    this.setupFormFieldElementEventListeners(formFieldElement);
+
+    if (this.getRootNodeActiveElement(formFieldElement) === formFieldElement) {
+      await this.triggerFormFieldFocusedAction(formFieldElement);
+      return;
+    }
+
+    if (!this.mostRecentlyFocusedField) {
+      await this.updateMostRecentlyFocusedField(formFieldElement);
+    }
+  }
+
+  /**
+   * Handles opening the autofill overlay. Will conditionally open
+   * the overlay based on the current autofill overlay visibility setting.
+   * Allows you to optionally focus the field element when opening the overlay.
+   * Will also optionally ignore the overlay visibility setting and open the
+   *
+   * @param options - Options for opening the autofill overlay.
+   */
+  openAutofillOverlay(options: OpenAutofillOverlayOptions = {}) {
+    const { isFocusingFieldElement, isOpeningFullOverlay, authStatus } = options;
+    if (!this.mostRecentlyFocusedField) {
+      return;
+    }
+
+    if (this.pageDetailsUpdateRequired) {
+      this.sendExtensionMessage("bgCollectPageDetails", {
+        sender: "autofillOverlayContentService",
+      });
+      this.pageDetailsUpdateRequired = false;
+    }
+
+    if (isFocusingFieldElement && !this.recentlyFocusedFieldIsCurrentlyFocused()) {
+      this.focusMostRecentOverlayField();
+    }
+
+    if (typeof authStatus !== "undefined") {
+      this.authStatus = authStatus;
+    }
+
+    if (
+      this.autofillOverlayVisibility === AutofillOverlayVisibility.OnButtonClick &&
+      !isOpeningFullOverlay
+    ) {
+      this.updateOverlayButtonPosition();
+      return;
+    }
+
+    this.updateOverlayElementsPosition();
+  }
+
+  /**
+   * Focuses the most recently focused field element.
+   */
+  focusMostRecentOverlayField() {
+    this.mostRecentlyFocusedField?.focus();
+  }
+
+  /**
+   * Removes focus from the most recently focused field element.
+   */
+  blurMostRecentOverlayField() {
+    this.mostRecentlyFocusedField?.blur();
+  }
+
+  /**
+   * Removes the autofill overlay from the page. This will initially
+   * unobserve the body element to ensure the mutation observer no
+   * longer triggers.
+   */
+  removeAutofillOverlay = () => {
+    this.removeBodyElementObserver();
+    this.removeAutofillOverlayButton();
+    this.removeAutofillOverlayList();
+  };
+
+  /**
+   * Removes the overlay button from the DOM if it is currently present. Will
+   * also remove the overlay reposition event listeners.
+   */
+  removeAutofillOverlayButton() {
+    if (!this.overlayButtonElement) {
+      return;
+    }
+
+    this.overlayButtonElement.remove();
+    this.isOverlayButtonVisible = false;
+    this.sendExtensionMessage("autofillOverlayElementClosed", {
+      overlayElement: AutofillOverlayElement.Button,
+    });
+    this.removeOverlayRepositionEventListeners();
+  }
+
+  /**
+   * Removes the overlay list from the DOM if it is currently present.
+   */
+  removeAutofillOverlayList() {
+    if (!this.overlayListElement) {
+      return;
+    }
+
+    this.overlayListElement.remove();
+    this.isOverlayListVisible = false;
+    this.sendExtensionMessage("autofillOverlayElementClosed", {
+      overlayElement: AutofillOverlayElement.List,
+    });
+  }
+
+  /**
+   * Formats any found user filled fields for a login cipher and sends a message
+   * to the background script to add a new cipher.
+   */
+  addNewVaultItem() {
+    if (!this.isOverlayListVisible) {
+      return;
+    }
+
+    const login = {
+      username: this.userFilledFields["username"]?.value || "",
+      password: this.userFilledFields["password"]?.value || "",
+      uri: globalThis.document.URL,
+      hostname: globalThis.document.location.hostname,
+    };
+
+    this.sendExtensionMessage("autofillOverlayAddNewVaultItem", { login });
+  }
+
+  /**
+   * Redirects the keyboard focus out of the overlay, selecting the element that is
+   * either previous or next in the tab order. If the direction is current, the most
+   * recently focused field will be focused.
+   *
+   * @param direction - The direction to redirect the focus.
+   */
+  redirectOverlayFocusOut(direction: string) {
+    if (!this.isOverlayListVisible || !this.mostRecentlyFocusedField) {
+      return;
+    }
+
+    if (direction === RedirectFocusDirection.Current) {
+      this.focusMostRecentOverlayField();
+      setTimeout(this.removeAutofillOverlay, 100);
+      return;
+    }
+
+    if (!this.focusableElements.length) {
+      this.focusableElements = this.findTabs(globalThis.document.body, { getShadowRoot: true });
+    }
+
+    const focusedElementIndex = this.focusableElements.findIndex(
+      (element) => element === this.mostRecentlyFocusedField
+    );
+
+    const indexOffset = direction === RedirectFocusDirection.Previous ? -1 : 1;
+    const redirectFocusElement = this.focusableElements[focusedElementIndex + indexOffset];
+    redirectFocusElement?.focus();
+  }
+
+  /**
+   * Sets up the event listeners that facilitate interaction with the form field elements.
+   * Will clear any cached form field element handlers that are encountered when setting
+   * up a form field element to the overlay.
+   *
+   * @param formFieldElement - The form field element to set up the event listeners for.
+   */
+  private setupFormFieldElementEventListeners(formFieldElement: ElementWithOpId<FormFieldElement>) {
+    this.removeCachedFormFieldEventListeners(formFieldElement);
+
+    formFieldElement.addEventListener(EVENTS.BLUR, this.handleFormFieldBlurEvent);
+    formFieldElement.addEventListener(EVENTS.KEYUP, this.handleFormFieldKeyupEvent);
+    formFieldElement.addEventListener(
+      EVENTS.INPUT,
+      this.handleFormFieldInputEvent(formFieldElement)
+    );
+    formFieldElement.addEventListener(
+      EVENTS.CLICK,
+      this.handleFormFieldClickEvent(formFieldElement)
+    );
+    formFieldElement.addEventListener(
+      EVENTS.FOCUS,
+      this.handleFormFieldFocusEvent(formFieldElement)
+    );
+  }
+
+  /**
+   * Removes any cached form field element handlers that are encountered
+   * when setting up a form field element to present the overlay.
+   *
+   * @param formFieldElement - The form field element to remove the cached handlers for.
+   */
+  private removeCachedFormFieldEventListeners(formFieldElement: ElementWithOpId<FormFieldElement>) {
+    const handlers = [EVENTS.INPUT, EVENTS.CLICK, EVENTS.FOCUS];
+    for (let index = 0; index < handlers.length; index++) {
+      const event = handlers[index];
+      const memoIndex = this.getFormFieldHandlerMemoIndex(formFieldElement, event);
+      const existingHandler = this.eventHandlersMemo[memoIndex];
+      if (!existingHandler) {
+        return;
+      }
+
+      formFieldElement.removeEventListener(event, existingHandler);
+      delete this.eventHandlersMemo[memoIndex];
+    }
+  }
+
+  /**
+   * Helper method that facilitates registration of an event handler to a form field element.
+   *
+   * @param eventHandler - The event handler to memoize.
+   * @param memoIndex - The memo index to use for the event handler.
+   */
+  private useEventHandlersMemo = (eventHandler: EventListener, memoIndex: string) => {
+    return this.eventHandlersMemo[memoIndex] || (this.eventHandlersMemo[memoIndex] = eventHandler);
+  };
+
+  /**
+   * Formats the memoIndex for the form field event handler.
+   *
+   * @param formFieldElement - The form field element to format the memo index for.
+   * @param event - The event to format the memo index for.
+   */
+  private getFormFieldHandlerMemoIndex(
+    formFieldElement: ElementWithOpId<FormFieldElement>,
+    event: string
+  ) {
+    return `${formFieldElement.opid}-${formFieldElement.id}-${event}-handler`;
+  }
+
+  /**
+   * Form Field blur event handler. Updates the value identifying whether
+   * the field is focused and sends a message to check if the overlay itself
+   * is currently focused.
+   */
+  private handleFormFieldBlurEvent = () => {
+    this.isFieldCurrentlyFocused = false;
+    this.sendExtensionMessage("checkAutofillOverlayFocused");
+  };
+
+  /**
+   * Form field keyup event handler. Facilitates the ability to remove the
+   * autofill overlay using the escape key, focusing the overlay list using
+   * the ArrowDown key, and ensuring that the overlay is repositioned when
+   * the form is submitted using the Enter key.
+   *
+   * @param event - The keyup event.
+   */
+  private handleFormFieldKeyupEvent = (event: KeyboardEvent) => {
+    const eventCode = event.code;
+    if (eventCode === "Escape") {
+      this.removeAutofillOverlay();
+      return;
+    }
+
+    if (eventCode === "Enter" && !this.isCurrentlyFilling) {
+      this.handleOverlayRepositionEvent();
+      return;
+    }
+
+    if (eventCode === "ArrowDown") {
+      event.preventDefault();
+      event.stopPropagation();
+
+      this.focusOverlayList();
+    }
+  };
+
+  /**
+   * Triggers a focus of the overlay list, if it is visible. If the list is not visible,
+   * the overlay will be opened and the list will be focused after a short delay. Ensures
+   * that the overlay list is focused when the user presses the down arrow key.
+   */
+  private async focusOverlayList() {
+    if (!this.isOverlayListVisible && this.mostRecentlyFocusedField) {
+      await this.updateMostRecentlyFocusedField(this.mostRecentlyFocusedField);
+      this.openAutofillOverlay({ isOpeningFullOverlay: true });
+      setTimeout(() => this.sendExtensionMessage("focusAutofillOverlayList"), 125);
+      return;
+    }
+
+    this.sendExtensionMessage("focusAutofillOverlayList");
+  }
+
+  /**
+   * Sets up and memoizes the form field input event handler.
+   *
+   * @param formFieldElement - The form field element that triggered the input event.
+   */
+  private handleFormFieldInputEvent = (formFieldElement: ElementWithOpId<FormFieldElement>) => {
+    return this.useEventHandlersMemo(
+      () => this.triggerFormFieldInput(formFieldElement),
+      this.getFormFieldHandlerMemoIndex(formFieldElement, EVENTS.INPUT)
+    );
+  };
+
+  /**
+   * Triggers when the form field element receives an input event. This method will
+   * store the modified form element data for use when the user attempts to add a new
+   * vault item. It also acts to remove the overlay list while the user is typing.
+   *
+   * @param formFieldElement - The form field element that triggered the input event.
+   */
+  private triggerFormFieldInput(formFieldElement: ElementWithOpId<FormFieldElement>) {
+    if (formFieldElement instanceof HTMLSpanElement) {
+      return;
+    }
+
+    this.storeModifiedFormElement(formFieldElement);
+
+    if (formFieldElement.value && (this.isOverlayCiphersPopulated || !this.isUserAuthed())) {
+      this.removeAutofillOverlayList();
+      return;
+    }
+
+    this.openAutofillOverlay();
+  }
+
+  /**
+   * Stores the modified form element data for use when the user attempts to add a new
+   * vault item. This method will also store the most recently focused field, if it is
+   * not already stored.
+   *
+   * @param formFieldElement
+   * @private
+   */
+  private storeModifiedFormElement(formFieldElement: ElementWithOpId<FillableFormFieldElement>) {
+    if (formFieldElement === this.mostRecentlyFocusedField) {
+      this.mostRecentlyFocusedField = formFieldElement;
+    }
+
+    if (formFieldElement.type === "password") {
+      this.userFilledFields.password = formFieldElement;
+      return;
+    }
+
+    this.userFilledFields.username = formFieldElement;
+  }
+
+  /**
+   * Sets up and memoizes the form field click event handler.
+   *
+   * @param formFieldElement - The form field element that triggered the click event.
+   */
+  private handleFormFieldClickEvent = (formFieldElement: ElementWithOpId<FormFieldElement>) => {
+    return this.useEventHandlersMemo(
+      () => this.triggerFormFieldClickedAction(formFieldElement),
+      this.getFormFieldHandlerMemoIndex(formFieldElement, EVENTS.CLICK)
+    );
+  };
+
+  /**
+   * Triggers when the form field element receives a click event. This method will
+   * trigger the focused action for the form field element if the overlay is not visible.
+   *
+   * @param formFieldElement - The form field element that triggered the click event.
+   */
+  private async triggerFormFieldClickedAction(formFieldElement: ElementWithOpId<FormFieldElement>) {
+    if (this.isOverlayButtonVisible || this.isOverlayListVisible) {
+      return;
+    }
+
+    await this.triggerFormFieldFocusedAction(formFieldElement);
+  }
+
+  /**
+   * Sets up and memoizes the form field focus event handler.
+   *
+   * @param formFieldElement - The form field element that triggered the focus event.
+   */
+  private handleFormFieldFocusEvent = (formFieldElement: ElementWithOpId<FormFieldElement>) => {
+    return this.useEventHandlersMemo(
+      () => this.triggerFormFieldFocusedAction(formFieldElement),
+      this.getFormFieldHandlerMemoIndex(formFieldElement, EVENTS.FOCUS)
+    );
+  };
+
+  /**
+   * Triggers when the form field element receives a focus event. This method will
+   * update the most recently focused field and open the autofill overlay if the
+   * autofill process is not currently active.
+   *
+   * @param formFieldElement - The form field element that triggered the focus event.
+   */
+  private async triggerFormFieldFocusedAction(formFieldElement: ElementWithOpId<FormFieldElement>) {
+    if (this.isCurrentlyFilling) {
+      return;
+    }
+
+    this.isFieldCurrentlyFocused = true;
+    this.clearUserInteractionEventTimeout();
+    const initiallyFocusedField = this.mostRecentlyFocusedField;
+    await this.updateMostRecentlyFocusedField(formFieldElement);
+    const formElementHasValue = Boolean((formFieldElement as HTMLInputElement).value);
+
+    if (
+      this.autofillOverlayVisibility === AutofillOverlayVisibility.OnButtonClick ||
+      (formElementHasValue && initiallyFocusedField !== this.mostRecentlyFocusedField)
+    ) {
+      this.removeAutofillOverlayList();
+    }
+
+    if (!formElementHasValue || (!this.isOverlayCiphersPopulated && this.isUserAuthed())) {
+      this.sendExtensionMessage("openAutofillOverlay");
+      return;
+    }
+
+    this.updateOverlayButtonPosition();
+  }
+
+  /**
+   * Validates whether the user is currently authenticated.
+   */
+  private isUserAuthed() {
+    return this.authStatus === AuthenticationStatus.Unlocked;
+  }
+
+  /**
+   * Identifies if the autofill field's data contains any of
+   * the keyboards matching the passed list of keywords.
+   *
+   * @param autofillFieldData - Autofill field data captured from the form field element.
+   * @param keywords - Keywords to search for in the autofill field data.
+   */
+  private keywordsFoundInFieldData(autofillFieldData: AutofillField, keywords: string[]) {
+    const searchedString = this.getAutofillFieldDataKeywords(autofillFieldData);
+    return keywords.some((keyword) => searchedString.includes(keyword));
+  }
+
+  /**
+   * Aggregates the autofill field's data into a single string
+   * that can be used to search for keywords.
+   *
+   * @param autofillFieldData - Autofill field data captured from the form field element.
+   */
+  private getAutofillFieldDataKeywords(autofillFieldData: AutofillField) {
+    if (this.autofillFieldKeywordsMap.has(autofillFieldData)) {
+      return this.autofillFieldKeywordsMap.get(autofillFieldData);
+    }
+
+    const keywordValues = [
+      autofillFieldData.htmlID,
+      autofillFieldData.htmlName,
+      autofillFieldData.htmlClass,
+      autofillFieldData.type,
+      autofillFieldData.title,
+      autofillFieldData.placeholder,
+      autofillFieldData.autoCompleteType,
+      autofillFieldData["label-data"],
+      autofillFieldData["label-aria"],
+      autofillFieldData["label-left"],
+      autofillFieldData["label-right"],
+      autofillFieldData["label-tag"],
+      autofillFieldData["label-top"],
+    ]
+      .join(",")
+      .toLowerCase();
+    this.autofillFieldKeywordsMap.set(autofillFieldData, keywordValues);
+
+    return keywordValues;
+  }
+
+  /**
+   * Validates that the most recently focused field is currently
+   * focused within the root node relative to the field.
+   */
+  private recentlyFocusedFieldIsCurrentlyFocused() {
+    return (
+      this.getRootNodeActiveElement(this.mostRecentlyFocusedField) === this.mostRecentlyFocusedField
+    );
+  }
+
+  /**
+   * Updates the position of both the overlay button and overlay list.
+   */
+  private updateOverlayElementsPosition() {
+    this.updateOverlayButtonPosition();
+    this.updateOverlayListPosition();
+  }
+
+  /**
+   * Updates the position of the overlay button.
+   */
+  private updateOverlayButtonPosition() {
+    if (!this.overlayButtonElement) {
+      this.createAutofillOverlayButton();
+    }
+
+    if (!this.isOverlayButtonVisible) {
+      this.appendOverlayElementToBody(this.overlayButtonElement);
+      this.isOverlayButtonVisible = true;
+      this.setOverlayRepositionEventListeners();
+    }
+    this.sendExtensionMessage("updateAutofillOverlayPosition", {
+      overlayElement: AutofillOverlayElement.Button,
+    });
+  }
+
+  /**
+   * Updates the position of the overlay list.
+   */
+  private updateOverlayListPosition() {
+    if (!this.overlayListElement) {
+      this.createAutofillOverlayList();
+    }
+
+    if (!this.isOverlayListVisible) {
+      this.appendOverlayElementToBody(this.overlayListElement);
+      this.isOverlayListVisible = true;
+    }
+
+    this.sendExtensionMessage("updateAutofillOverlayPosition", {
+      overlayElement: AutofillOverlayElement.List,
+    });
+  }
+
+  /**
+   * Appends the overlay element to the body element. This method will also
+   * observe the body element to ensure that the overlay element is not
+   * interfered with by any DOM changes.
+   *
+   * @param element - The overlay element to append to the body element.
+   */
+  private appendOverlayElementToBody(element: HTMLElement) {
+    this.observeBodyElement();
+    globalThis.document.body.appendChild(element);
+  }
+
+  /**
+   * Sends a message that facilitates hiding the overlay elements.
+   *
+   * @param isHidden - Indicates if the overlay elements should be hidden.
+   */
+  private toggleOverlayHidden(isHidden: boolean) {
+    const displayValue = isHidden ? "none" : "block";
+    this.sendExtensionMessage("updateAutofillOverlayHidden", { display: displayValue });
+
+    this.isOverlayButtonVisible = !isHidden;
+    this.isOverlayListVisible = !isHidden;
+  }
+
+  /**
+   * Updates the data used to position the overlay elements in relation
+   * to the most recently focused form field.
+   *
+   * @param formFieldElement - The form field element that triggered the focus event.
+   */
+  private async updateMostRecentlyFocusedField(
+    formFieldElement: ElementWithOpId<FormFieldElement>
+  ) {
+    this.mostRecentlyFocusedField = formFieldElement;
+    const { paddingRight, paddingLeft } = globalThis.getComputedStyle(formFieldElement);
+    const { width, height, top, left } = await this.getMostRecentlyFocusedFieldRects(
+      formFieldElement
+    );
+    this.focusedFieldData = {
+      focusedFieldStyles: { paddingRight, paddingLeft },
+      focusedFieldRects: { width, height, top, left },
+    };
+
+    this.sendExtensionMessage("updateFocusedFieldData", {
+      focusedFieldData: this.focusedFieldData,
+    });
+  }
+
+  /**
+   * Gets the bounding client rects for the most recently focused field. This method will
+   * attempt to use an intersection observer to get the most recently focused field's
+   * bounding client rects. If the intersection observer is not supported, or the
+   * intersection observer does not return a valid bounding client rect, the form
+   * field element's bounding client rect will be used.
+   *
+   * @param formFieldElement - The form field element that triggered the focus event.
+   */
+  private async getMostRecentlyFocusedFieldRects(
+    formFieldElement: ElementWithOpId<FormFieldElement>
+  ) {
+    const focusedFieldRects = await this.getBoundingClientRectFromIntersectionObserver(
+      formFieldElement
+    );
+    if (focusedFieldRects) {
+      return focusedFieldRects;
+    }
+
+    return formFieldElement.getBoundingClientRect();
+  }
+
+  /**
+   * Gets the bounds of the form field element from the IntersectionObserver API.
+   *
+   * @param formFieldElement - The form field element that triggered the focus event.
+   */
+  private async getBoundingClientRectFromIntersectionObserver(
+    formFieldElement: ElementWithOpId<FormFieldElement>
+  ): Promise<DOMRectReadOnly | null> {
+    if (!("IntersectionObserver" in window) && !("IntersectionObserverEntry" in window)) {
+      return null;
+    }
+
+    return new Promise((resolve) => {
+      const intersectionObserver = new IntersectionObserver(
+        (entries) => {
+          let fieldBoundingClientRects = entries[0]?.boundingClientRect;
+          if (!fieldBoundingClientRects?.width || !fieldBoundingClientRects.height) {
+            fieldBoundingClientRects = null;
+          }
+
+          intersectionObserver.disconnect();
+          resolve(fieldBoundingClientRects);
+        },
+        {
+          root: globalThis.document.body,
+          rootMargin: "0px",
+          threshold: 0.9999, // Safari doesn't seem to function properly with a threshold of 1
+        }
+      );
+      intersectionObserver.observe(formFieldElement);
+    });
+  }
+
+  /**
+   * Identifies if the field should have the autofill overlay setup on it. Currently, this is mainly
+   * determined by whether the field correlates with a login cipher. This method will need to be
+   * updated in the future to support other types of forms.
+   *
+   * @param autofillFieldData - Autofill field data captured from the form field element.
+   */
+  private isIgnoredField(autofillFieldData: AutofillField): boolean {
+    const ignoredFieldTypes = new Set(AutoFillConstants.ExcludedAutofillTypes);
+    if (
+      autofillFieldData.readonly ||
+      autofillFieldData.disabled ||
+      !autofillFieldData.viewable ||
+      ignoredFieldTypes.has(autofillFieldData.type) ||
+      this.keywordsFoundInFieldData(autofillFieldData, ["search", "captcha"])
+    ) {
+      return true;
+    }
+
+    const isLoginCipherField =
+      autofillFieldData.type === "password" ||
+      this.keywordsFoundInFieldData(autofillFieldData, AutoFillConstants.UsernameFieldNames);
+
+    return !isLoginCipherField;
+  }
+
+  /**
+   * Creates the autofill overlay button element. Will not attempt
+   * to create the element if it already exists in the DOM.
+   */
+  private createAutofillOverlayButton() {
+    if (this.overlayButtonElement) {
+      return;
+    }
+
+    const customElementName = generateRandomCustomElementName();
+    globalThis.customElements?.define(customElementName, AutofillOverlayButtonIframe);
+    this.overlayButtonElement = globalThis.document.createElement(customElementName);
+
+    this.updateCustomElementDefaultStyles(this.overlayButtonElement);
+    this.moveDocumentElementChildrenToBody(globalThis.document.documentElement.childNodes);
+  }
+
+  /**
+   * Creates the autofill overlay list element. Will not attempt
+   * to create the element if it already exists in the DOM.
+   */
+  private createAutofillOverlayList() {
+    if (this.overlayListElement) {
+      return;
+    }
+
+    const customElementName = generateRandomCustomElementName();
+    globalThis.customElements?.define(customElementName, AutofillOverlayListIframe);
+    this.overlayListElement = globalThis.document.createElement(customElementName);
+
+    this.updateCustomElementDefaultStyles(this.overlayListElement);
+  }
+
+  /**
+   * Updates the default styles for the custom element. This method will
+   * remove any styles that are added to the custom element by other methods.
+   *
+   * @param element - The custom element to update the default styles for.
+   */
+  private updateCustomElementDefaultStyles(element: HTMLElement) {
+    this.unobserveCustomElements();
+
+    setElementStyles(element, this.customElementDefaultStyles, true);
+
+    this.observeCustomElements();
+  }
+
+  /**
+   * Queries the background script for the autofill overlay visibility setting.
+   * If the setting is not found, a default value of OnFieldFocus will be used
+   * @private
+   */
+  private async getAutofillOverlayVisibility() {
+    const overlayVisibility = await this.sendExtensionMessage("getAutofillOverlayVisibility");
+    this.autofillOverlayVisibility = overlayVisibility || AutofillOverlayVisibility.OnFieldFocus;
+  }
+
+  /**
+   * Sets up event listeners that facilitate repositioning
+   * the autofill overlay on scroll or resize.
+   */
+  private setOverlayRepositionEventListeners() {
+    globalThis.addEventListener(EVENTS.SCROLL, this.handleOverlayRepositionEvent, {
+      capture: true,
+    });
+    globalThis.addEventListener(EVENTS.RESIZE, this.handleOverlayRepositionEvent);
+  }
+
+  /**
+   * Removes the listeners that facilitate repositioning
+   * the autofill overlay on scroll or resize.
+   */
+  private removeOverlayRepositionEventListeners() {
+    globalThis.removeEventListener(EVENTS.SCROLL, this.handleOverlayRepositionEvent, {
+      capture: true,
+    });
+    globalThis.removeEventListener(EVENTS.RESIZE, this.handleOverlayRepositionEvent);
+  }
+
+  /**
+   * Handles the resize or scroll events that enact
+   * repositioning of the overlay.
+   */
+  private handleOverlayRepositionEvent = () => {
+    if (!this.isOverlayButtonVisible && !this.isOverlayListVisible) {
+      return;
+    }
+
+    this.toggleOverlayHidden(true);
+    this.clearUserInteractionEventTimeout();
+    this.userInteractionEventTimeout = setTimeout(this.triggerOverlayRepositionUpdates, 750);
+  };
+
+  /**
+   * Triggers the overlay reposition updates. This method ensures that the overlay elements
+   * are correctly positioned when the viewport scrolls or repositions.
+   */
+  private triggerOverlayRepositionUpdates = async () => {
+    if (!this.recentlyFocusedFieldIsCurrentlyFocused()) {
+      this.toggleOverlayHidden(false);
+      this.removeAutofillOverlay();
+      return;
+    }
+
+    await this.updateMostRecentlyFocusedField(this.mostRecentlyFocusedField);
+    this.updateOverlayElementsPosition();
+    this.toggleOverlayHidden(false);
+    this.clearUserInteractionEventTimeout();
+
+    if (
+      this.focusedFieldData.focusedFieldRects?.top > 0 &&
+      this.focusedFieldData.focusedFieldRects?.top < window.innerHeight
+    ) {
+      return;
+    }
+
+    this.removeAutofillOverlay();
+  };
+
+  /**
+   * Clears the user interaction event timeout. This is used to ensure that
+   * the overlay is not repositioned while the user is interacting with it.
+   */
+  private clearUserInteractionEventTimeout() {
+    if (this.userInteractionEventTimeout) {
+      clearTimeout(this.userInteractionEventTimeout);
+    }
+  }
+
+  /**
+   * Sets up global event listeners and the mutation
+   * observer to facilitate required changes to the
+   * overlay elements.
+   */
+  private setupGlobalEventListeners = () => {
+    globalThis.document.addEventListener(EVENTS.VISIBILITYCHANGE, this.handleVisibilityChangeEvent);
+    globalThis.addEventListener(EVENTS.FOCUSOUT, this.handleFormFieldBlurEvent);
+    this.setupMutationObserver();
+  };
+
+  /**
+   * Handles the visibility change event. This method will remove the
+   * autofill overlay if the document is not visible.
+   */
+  private handleVisibilityChangeEvent = () => {
+    if (document.visibilityState === "visible") {
+      return;
+    }
+
+    this.mostRecentlyFocusedField = null;
+    this.removeAutofillOverlay();
+  };
+
+  /**
+   * Sets up mutation observers for the overlay elements, the body element, and the
+   * document element. The mutation observers are used to remove any styles that are
+   * added to the overlay elements by the website. They are also used to ensure that
+   * the overlay elements are always present at the bottom of the body element.
+   */
+  private setupMutationObserver = () => {
+    this.overlayElementsMutationObserver = new MutationObserver(
+      this.handleOverlayElementMutationObserverUpdate
+    );
+
+    this.bodyElementMutationObserver = new MutationObserver(
+      this.handleBodyElementMutationObserverUpdate
+    );
+
+    const documentElementMutationObserver = new MutationObserver(
+      this.handleDocumentElementMutationObserverUpdate
+    );
+    documentElementMutationObserver.observe(globalThis.document.documentElement, {
+      childList: true,
+    });
+  };
+
+  /**
+   * Sets up mutation observers to verify that the overlay
+   * elements are not modified by the website.
+   */
+  private observeCustomElements() {
+    if (this.overlayButtonElement) {
+      this.overlayElementsMutationObserver?.observe(this.overlayButtonElement, {
+        attributes: true,
+      });
+    }
+
+    if (this.overlayListElement) {
+      this.overlayElementsMutationObserver?.observe(this.overlayListElement, { attributes: true });
+    }
+  }
+
+  /**
+   * Disconnects the mutation observers that are used to verify that the overlay
+   * elements are not modified by the website.
+   */
+  private unobserveCustomElements() {
+    this.overlayElementsMutationObserver?.disconnect();
+  }
+
+  /**
+   * Sets up a mutation observer for the body element. The mutation observer is used
+   * to ensure that the overlay elements are always present at the bottom of the body
+   * element.
+   */
+  private observeBodyElement() {
+    this.bodyElementMutationObserver?.observe(globalThis.document.body, { childList: true });
+  }
+
+  /**
+   * Disconnects the mutation observer for the body element.
+   */
+  private removeBodyElementObserver() {
+    this.bodyElementMutationObserver?.disconnect();
+  }
+
+  /**
+   * Handles the mutation observer update for the overlay elements. This method will
+   * remove any attributes or styles that might be added to the overlay elements by
+   * a separate process within the website where this script is injected.
+   *
+   * @param mutationRecord - The mutation record that triggered the update.
+   */
+  private handleOverlayElementMutationObserverUpdate = (mutationRecord: MutationRecord[]) => {
+    if (this.isTriggeringExcessiveMutationObserverIterations()) {
+      return;
+    }
+
+    for (let recordIndex = 0; recordIndex < mutationRecord.length; recordIndex++) {
+      const record = mutationRecord[recordIndex];
+      if (record.type !== "attributes") {
+        continue;
+      }
+
+      const element = record.target as HTMLElement;
+      if (record.attributeName !== "style") {
+        this.removeModifiedElementAttributes(element);
+
+        continue;
+      }
+
+      element.removeAttribute("style");
+      this.updateCustomElementDefaultStyles(element);
+    }
+  };
+
+  /**
+   * Removes all elements from a passed overlay
+   * element except for the style attribute.
+   *
+   * @param element - The element to remove the attributes from.
+   */
+  private removeModifiedElementAttributes(element: HTMLElement) {
+    const attributes = Array.from(element.attributes);
+    for (let attributeIndex = 0; attributeIndex < attributes.length; attributeIndex++) {
+      const attribute = attributes[attributeIndex];
+      if (attribute.name === "style") {
+        continue;
+      }
+
+      element.removeAttribute(attribute.name);
+    }
+  }
+
+  /**
+   * Handles the mutation observer update for the body element. This method will
+   * ensure that the overlay elements are always present at the bottom of the body
+   * element.
+   */
+  private handleBodyElementMutationObserverUpdate = () => {
+    if (
+      (!this.overlayButtonElement && !this.overlayListElement) ||
+      this.isTriggeringExcessiveMutationObserverIterations()
+    ) {
+      return;
+    }
+
+    const lastChild = globalThis.document.body.lastElementChild;
+    const secondToLastChild = lastChild?.previousElementSibling;
+    const lastChildIsOverlayList = lastChild === this.overlayListElement;
+    const lastChildIsOverlayButton = lastChild === this.overlayButtonElement;
+    const secondToLastChildIsOverlayButton = secondToLastChild === this.overlayButtonElement;
+
+    if (
+      (lastChildIsOverlayList && secondToLastChildIsOverlayButton) ||
+      (lastChildIsOverlayButton && !this.isOverlayListVisible)
+    ) {
+      return;
+    }
+
+    if (
+      (lastChildIsOverlayList && !secondToLastChildIsOverlayButton) ||
+      (lastChildIsOverlayButton && this.isOverlayListVisible)
+    ) {
+      globalThis.document.body.insertBefore(this.overlayButtonElement, this.overlayListElement);
+      return;
+    }
+
+    globalThis.document.body.insertBefore(lastChild, this.overlayButtonElement);
+  };
+
+  /**
+   * Handles the mutation observer update for the document element. This
+   * method will ensure that any elements added to the document element
+   * are appended to the body element.
+   *
+   * @param mutationRecords - The mutation records that triggered the update.
+   */
+  private handleDocumentElementMutationObserverUpdate = (mutationRecords: MutationRecord[]) => {
+    if (
+      (!this.overlayButtonElement && !this.overlayListElement) ||
+      this.isTriggeringExcessiveMutationObserverIterations()
+    ) {
+      return;
+    }
+
+    for (const record of mutationRecords) {
+      if (record.type !== "childList" || record.addedNodes.length === 0) {
+        continue;
+      }
+
+      this.moveDocumentElementChildrenToBody(record.addedNodes);
+    }
+  };
+
+  /**
+   * Moves the passed nodes to the body element. This method is used to ensure that
+   * any elements added to the document element are higher in the DOM than the overlay
+   * elements.
+   *
+   * @param nodes - The nodes to move to the body element.
+   */
+  private moveDocumentElementChildrenToBody(nodes: NodeList) {
+    const ignoredElements = new Set([globalThis.document.body, globalThis.document.head]);
+    for (const node of nodes) {
+      if (ignoredElements.has(node as HTMLElement)) {
+        continue;
+      }
+
+      // This is a workaround for an issue where the document element's children
+      // are not appended to the body element. This forces the children to be
+      // appended on the next tick of the event loop.
+      setTimeout(() => globalThis.document.body.appendChild(node), 0);
+    }
+  }
+
+  /**
+   * Identifies if the mutation observer is triggering excessive iterations.
+   * Will trigger a blur of the most recently focused field and remove the
+   * autofill overlay if any set mutation observer is triggering
+   * excessive iterations.
+   */
+  private isTriggeringExcessiveMutationObserverIterations() {
+    if (this.mutationObserverIterationsResetTimeout) {
+      clearTimeout(this.mutationObserverIterationsResetTimeout);
+    }
+
+    this.mutationObserverIterations++;
+    this.mutationObserverIterationsResetTimeout = setTimeout(
+      () => (this.mutationObserverIterations = 0),
+      2000
+    );
+
+    if (this.mutationObserverIterations > 100) {
+      clearTimeout(this.mutationObserverIterationsResetTimeout);
+      this.mutationObserverIterations = 0;
+      this.blurMostRecentOverlayField();
+      this.removeAutofillOverlay();
+
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Gets the root node of the passed element and returns the active element within that root node.
+   *
+   * @param element - The element to get the root node active element for.
+   */
+  private getRootNodeActiveElement(element: Element): Element {
+    const documentRoot = element.getRootNode() as ShadowRoot | Document;
+    return documentRoot?.activeElement;
+  }
+}
+
+export default AutofillOverlayContentService;
diff --git a/apps/browser/src/autofill/services/autofill.service.spec.ts b/apps/browser/src/autofill/services/autofill.service.spec.ts
index 968f7a0d834..f923f3f1f86 100644
--- a/apps/browser/src/autofill/services/autofill.service.spec.ts
+++ b/apps/browser/src/autofill/services/autofill.service.spec.ts
@@ -35,6 +35,7 @@ import { triggerTestFailure } from "../jest/testing-utils";
 import AutofillField from "../models/autofill-field";
 import AutofillPageDetails from "../models/autofill-page-details";
 import AutofillScript from "../models/autofill-script";
+import { AutofillOverlayVisibility } from "../utils/autofill-overlay.enum";
 
 import {
   AutoFillOptions,
@@ -73,7 +74,8 @@ describe("AutofillService", () => {
 
   describe("injectAutofillScripts", () => {
     const autofillV1Script = "autofill.js";
-    const autofillV2Script = "autofill-init.js";
+    const autofillV2BootstrapScript = "bootstrap-autofill.js";
+    const autofillOverlayBootstrapScript = "bootstrap-autofill-overlay.js";
     const defaultAutofillScripts = ["autofiller.js", "notificationBar.js", "contextMenuHandler.js"];
     const defaultExecuteScriptOptions = { runAt: "document_start" };
     let tabMock: chrome.tabs.Tab;
@@ -96,17 +98,60 @@ describe("AutofillService", () => {
         });
       });
       expect(BrowserApi.executeScriptInTab).not.toHaveBeenCalledWith(tabMock.id, {
-        file: `content/${autofillV2Script}`,
+        file: `content/${autofillV2BootstrapScript}`,
         frameId: sender.frameId,
         ...defaultExecuteScriptOptions,
       });
     });
 
-    it("will inject the autofill-init class if the enableAutofillV2 flag is set", () => {
-      autofillService.injectAutofillScripts(sender, true);
+    it("will inject the bootstrap-autofill script if the enableAutofillV2 flag is set", async () => {
+      await autofillService.injectAutofillScripts(sender, true);
 
       expect(BrowserApi.executeScriptInTab).toHaveBeenCalledWith(tabMock.id, {
-        file: `content/${autofillV2Script}`,
+        file: `content/${autofillV2BootstrapScript}`,
+        frameId: sender.frameId,
+        ...defaultExecuteScriptOptions,
+      });
+      expect(BrowserApi.executeScriptInTab).not.toHaveBeenCalledWith(tabMock.id, {
+        file: `content/${autofillV1Script}`,
+        frameId: sender.frameId,
+        ...defaultExecuteScriptOptions,
+      });
+    });
+
+    it("will inject the bootstrap-autofill-overlay script if the enableAutofillOverlay flag is set and the user has the autofill overlay enabled", async () => {
+      jest
+        .spyOn(autofillService["settingsService"], "getAutoFillOverlayVisibility")
+        .mockResolvedValue(AutofillOverlayVisibility.OnFieldFocus);
+
+      await autofillService.injectAutofillScripts(sender, true, true);
+
+      expect(BrowserApi.executeScriptInTab).toHaveBeenCalledWith(tabMock.id, {
+        file: `content/${autofillOverlayBootstrapScript}`,
+        frameId: sender.frameId,
+        ...defaultExecuteScriptOptions,
+      });
+      expect(BrowserApi.executeScriptInTab).not.toHaveBeenCalledWith(tabMock.id, {
+        file: `content/${autofillV1Script}`,
+        frameId: sender.frameId,
+        ...defaultExecuteScriptOptions,
+      });
+      expect(BrowserApi.executeScriptInTab).not.toHaveBeenCalledWith(tabMock.id, {
+        file: `content/${autofillV2BootstrapScript}`,
+        frameId: sender.frameId,
+        ...defaultExecuteScriptOptions,
+      });
+    });
+
+    it("will inject the bootstrap-autofill script if the enableAutofillOverlay flag is set but the user does not have the autofill overlay enabled", async () => {
+      jest
+        .spyOn(autofillService["settingsService"], "getAutoFillOverlayVisibility")
+        .mockResolvedValue(AutofillOverlayVisibility.Off);
+
+      await autofillService.injectAutofillScripts(sender, true, true);
+
+      expect(BrowserApi.executeScriptInTab).toHaveBeenCalledWith(tabMock.id, {
+        file: `content/${autofillV2BootstrapScript}`,
         ...defaultExecuteScriptOptions,
       });
       expect(BrowserApi.executeScriptInTab).not.toHaveBeenCalledWith(tabMock.id, {
@@ -843,12 +888,116 @@ describe("AutofillService", () => {
       jest.spyOn(autofillService as any, "getActiveTab").mockResolvedValueOnce(tab);
       jest.spyOn(autofillService, "doAutoFillOnTab").mockResolvedValueOnce(totp);
 
-      const result = await autofillService.doAutoFillActiveTab(pageDetails, fromCommand);
+      const result = await autofillService.doAutoFillActiveTab(
+        pageDetails,
+        fromCommand,
+        CipherType.Login
+      );
 
       expect(autofillService["getActiveTab"]).toHaveBeenCalled();
       expect(autofillService.doAutoFillOnTab).toHaveBeenCalledWith(pageDetails, tab, fromCommand);
       expect(result).toBe(totp);
     });
+
+    it("auto-fills card cipher types", async () => {
+      const cardFormPageDetails = [
+        {
+          frameId: 1,
+          tab: createChromeTabMock(),
+          details: createAutofillPageDetailsMock({
+            fields: [
+              createAutofillFieldMock({
+                opid: "number-field",
+                form: "validFormId",
+                elementNumber: 1,
+              }),
+              createAutofillFieldMock({
+                opid: "ccv-field",
+                form: "validFormId",
+                elementNumber: 2,
+              }),
+            ],
+          }),
+        },
+      ];
+      const cardCipher = mock<CipherView>({
+        type: CipherType.Card,
+        reprompt: CipherRepromptType.None,
+      });
+      jest.spyOn(autofillService as any, "getActiveTab").mockResolvedValueOnce(tab);
+      jest.spyOn(autofillService, "doAutoFill").mockImplementation();
+      jest
+        .spyOn(autofillService["cipherService"], "getAllDecryptedForUrl")
+        .mockResolvedValueOnce([cardCipher]);
+
+      await autofillService.doAutoFillActiveTab(cardFormPageDetails, false, CipherType.Card);
+
+      expect(autofillService["cipherService"].getAllDecryptedForUrl).toHaveBeenCalled();
+      expect(autofillService.doAutoFill).toHaveBeenCalledWith({
+        tab: tab,
+        cipher: cardCipher,
+        pageDetails: cardFormPageDetails,
+        skipLastUsed: true,
+        skipUsernameOnlyFill: true,
+        onlyEmptyFields: true,
+        onlyVisibleFields: true,
+        fillNewPassword: false,
+        allowUntrustedIframe: false,
+        allowTotpAutofill: false,
+      });
+    });
+
+    it("auto-fills identity cipher types", async () => {
+      const identityFormPageDetails = [
+        {
+          frameId: 1,
+          tab: createChromeTabMock(),
+          details: createAutofillPageDetailsMock({
+            fields: [
+              createAutofillFieldMock({
+                opid: "name-field",
+                form: "validFormId",
+                elementNumber: 1,
+              }),
+              createAutofillFieldMock({
+                opid: "address-field",
+                form: "validFormId",
+                elementNumber: 2,
+              }),
+            ],
+          }),
+        },
+      ];
+      const identityCipher = mock<CipherView>({
+        type: CipherType.Identity,
+        reprompt: CipherRepromptType.None,
+      });
+      jest.spyOn(autofillService as any, "getActiveTab").mockResolvedValueOnce(tab);
+      jest.spyOn(autofillService, "doAutoFill").mockImplementation();
+      jest
+        .spyOn(autofillService["cipherService"], "getAllDecryptedForUrl")
+        .mockResolvedValueOnce([identityCipher]);
+
+      await autofillService.doAutoFillActiveTab(
+        identityFormPageDetails,
+        false,
+        CipherType.Identity
+      );
+
+      expect(autofillService["cipherService"].getAllDecryptedForUrl).toHaveBeenCalled();
+      expect(autofillService.doAutoFill).toHaveBeenCalledWith({
+        tab: tab,
+        cipher: identityCipher,
+        pageDetails: identityFormPageDetails,
+        skipLastUsed: true,
+        skipUsernameOnlyFill: true,
+        onlyEmptyFields: true,
+        onlyVisibleFields: true,
+        fillNewPassword: false,
+        allowUntrustedIframe: false,
+        allowTotpAutofill: false,
+      });
+    });
   });
 
   describe("getActiveTab", () => {
@@ -4276,5 +4425,15 @@ describe("AutofillService", () => {
 
       expect(result).toBe(true);
     });
+
+    it("resets the currentlyOpeningPasswordRepromptPopout value to false after the debounce has occurred", () => {
+      jest.useFakeTimers();
+
+      const result = autofillService["isDebouncingPasswordRepromptPopout"]();
+      jest.advanceTimersByTime(100);
+
+      expect(result).toBe(false);
+      expect(autofillService["currentlyOpeningPasswordRepromptPopout"]).toBe(false);
+    });
   });
 });
diff --git a/apps/browser/src/autofill/services/autofill.service.ts b/apps/browser/src/autofill/services/autofill.service.ts
index ea8dcb6c10f..ebd67abe439 100644
--- a/apps/browser/src/autofill/services/autofill.service.ts
+++ b/apps/browser/src/autofill/services/autofill.service.ts
@@ -16,6 +16,7 @@ import { openVaultItemPasswordRepromptPopout } from "../../vault/popup/utils/vau
 import AutofillField from "../models/autofill-field";
 import AutofillPageDetails from "../models/autofill-page-details";
 import AutofillScript from "../models/autofill-script";
+import { AutofillOverlayVisibility } from "../utils/autofill-overlay.enum";
 
 import {
   AutoFillOptions,
@@ -52,10 +53,25 @@ export default class AutofillService implements AutofillServiceInterface {
    * is enabled.
    * @param {chrome.runtime.MessageSender} sender
    * @param {boolean} autofillV2
+   * @param {boolean} autofillOverlay
    * @returns {Promise<void>}
    */
-  async injectAutofillScripts(sender: chrome.runtime.MessageSender, autofillV2 = false) {
-    const mainAutofillScript = autofillV2 ? `autofill-init.js` : "autofill.js";
+  async injectAutofillScripts(
+    sender: chrome.runtime.MessageSender,
+    autofillV2 = false,
+    autofillOverlay = false
+  ) {
+    let mainAutofillScript = "autofill.js";
+
+    const isUsingAutofillOverlay =
+      autofillOverlay &&
+      (await this.settingsService.getAutoFillOverlayVisibility()) !== AutofillOverlayVisibility.Off;
+
+    if (autofillV2) {
+      mainAutofillScript = isUsingAutofillOverlay
+        ? "bootstrap-autofill-overlay.js"
+        : "bootstrap-autofill.js";
+    }
 
     const injectedScripts = [
       mainAutofillScript,
@@ -276,20 +292,13 @@ export default class AutofillService implements AutofillServiceInterface {
     }
 
     if (
-      cipher.reprompt === CipherRepromptType.Password &&
-      // If the master password has is not available, reprompt will error
-      (await this.userVerificationService.hasMasterPasswordAndMasterKeyHash()) &&
+      (await this.isPasswordRepromptRequired(cipher, tab)) &&
       !this.isDebouncingPasswordRepromptPopout()
     ) {
       if (fromCommand) {
         this.cipherService.updateLastUsedIndexForUrl(tab.url);
       }
 
-      await this.openVaultItemPasswordRepromptPopout(tab, {
-        cipherId: cipher.id,
-        action: "autofill",
-      });
-
       return null;
     }
 
@@ -314,6 +323,21 @@ export default class AutofillService implements AutofillServiceInterface {
     return totpCode;
   }
 
+  async isPasswordRepromptRequired(cipher: CipherView, tab: chrome.tabs.Tab): Promise<boolean> {
+    const userHasMasterPasswordAndKeyHash =
+      await this.userVerificationService.hasMasterPasswordAndMasterKeyHash();
+    if (cipher.reprompt === CipherRepromptType.Password && userHasMasterPasswordAndKeyHash) {
+      await this.openVaultItemPasswordRepromptPopout(tab, {
+        cipherId: cipher.id,
+        action: "autofill",
+      });
+
+      return true;
+    }
+
+    return false;
+  }
+
   /**
    * Autofill the active tab with the next cipher from the cache
    * @param {PageDetail[]} pageDetails The data scraped from the page
diff --git a/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts b/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts
index b21f530e572..b58f31507ba 100644
--- a/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts
+++ b/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts
@@ -9,6 +9,7 @@ import {
   FormElementWithAttribute,
 } from "../types";
 
+import AutofillOverlayContentService from "./autofill-overlay-content.service";
 import CollectAutofillContentService from "./collect-autofill-content.service";
 import DomElementVisibilityService from "./dom-element-visibility.service";
 
@@ -23,11 +24,15 @@ const mockLoginForm = `
 
 describe("CollectAutofillContentService", () => {
   const domElementVisibilityService = new DomElementVisibilityService();
+  const autofillOverlayContentService = new AutofillOverlayContentService();
   let collectAutofillContentService: CollectAutofillContentService;
 
   beforeEach(() => {
     document.body.innerHTML = mockLoginForm;
-    collectAutofillContentService = new CollectAutofillContentService(domElementVisibilityService);
+    collectAutofillContentService = new CollectAutofillContentService(
+      domElementVisibilityService,
+      autofillOverlayContentService
+    );
   });
 
   afterEach(() => {
diff --git a/apps/browser/src/autofill/services/collect-autofill-content.service.ts b/apps/browser/src/autofill/services/collect-autofill-content.service.ts
index caf9060dd21..20f1c2b5921 100644
--- a/apps/browser/src/autofill/services/collect-autofill-content.service.ts
+++ b/apps/browser/src/autofill/services/collect-autofill-content.service.ts
@@ -8,16 +8,18 @@ import {
   FormElementWithAttribute,
 } from "../types";
 
+import { AutofillOverlayContentService } from "./abstractions/autofill-overlay-content.service";
 import {
   UpdateAutofillDataAttributeParams,
   AutofillFieldElements,
   AutofillFormElements,
   CollectAutofillContentService as CollectAutofillContentServiceInterface,
 } from "./abstractions/collect-autofill-content.service";
-import DomElementVisibilityService from "./dom-element-visibility.service";
+import { DomElementVisibilityService } from "./abstractions/dom-element-visibility.service";
 
 class CollectAutofillContentService implements CollectAutofillContentServiceInterface {
   private readonly domElementVisibilityService: DomElementVisibilityService;
+  private readonly autofillOverlayContentService: AutofillOverlayContentService;
   private noFieldsFound = false;
   private domRecentlyMutated = true;
   private autofillFormElements: AutofillFormElements = new Map();
@@ -27,8 +29,12 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
   private updateAutofillElementsAfterMutationTimeout: NodeJS.Timeout;
   private readonly updateAfterMutationTimeoutDelay = 1000;
 
-  constructor(domElementVisibilityService: DomElementVisibilityService) {
+  constructor(
+    domElementVisibilityService: DomElementVisibilityService,
+    autofillOverlayContentService?: AutofillOverlayContentService
+  ) {
     this.domElementVisibilityService = domElementVisibilityService;
+    this.autofillOverlayContentService = autofillOverlayContentService;
   }
 
   /**
@@ -320,6 +326,10 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
 
     if (element instanceof HTMLSpanElement) {
       this.autofillFieldElements.set(element, autofillFieldBase);
+      this.autofillOverlayContentService?.setupAutofillOverlayListenerOnField(
+        element,
+        autofillFieldBase
+      );
       return autofillFieldBase;
     }
 
@@ -357,6 +367,7 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
     };
 
     this.autofillFieldElements.set(element, autofillField);
+    this.autofillOverlayContentService?.setupAutofillOverlayListenerOnField(element, autofillField);
     return autofillField;
   };
 
@@ -445,7 +456,7 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
         labelElementsSet.add(currentElement);
       }
 
-      currentElement = currentElement.parentElement.closest("label");
+      currentElement = currentElement.parentElement?.closest("label");
     }
 
     if (
@@ -926,6 +937,9 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
           this.isAutofillElementNodeMutated(mutation.addedNodes))
       ) {
         this.domRecentlyMutated = true;
+        if (this.autofillOverlayContentService) {
+          this.autofillOverlayContentService.pageDetailsUpdateRequired = true;
+        }
         this.noFieldsFound = false;
         continue;
       }
@@ -949,6 +963,9 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
     this.currentLocationHref = globalThis.location.href;
 
     this.domRecentlyMutated = true;
+    if (this.autofillOverlayContentService) {
+      this.autofillOverlayContentService.pageDetailsUpdateRequired = true;
+    }
     this.noFieldsFound = false;
 
     this.autofillFormElements.clear();
@@ -993,13 +1010,23 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
       }
     }
 
-    if (isRemovingNodes) {
-      for (let elementIndex = 0; elementIndex < mutatedElements.length; elementIndex++) {
+    for (let elementIndex = 0; elementIndex < mutatedElements.length; elementIndex++) {
+      const node = mutatedElements[elementIndex];
+      if (isRemovingNodes) {
         this.deleteCachedAutofillElement(
-          mutatedElements[elementIndex] as
-            | ElementWithOpId<HTMLFormElement>
-            | ElementWithOpId<FormFieldElement>
+          node as ElementWithOpId<HTMLFormElement> | ElementWithOpId<FormFieldElement>
         );
+        continue;
+      }
+
+      if (
+        this.autofillOverlayContentService &&
+        this.isNodeFormFieldElement(node) &&
+        !this.autofillFieldElements.get(node as ElementWithOpId<FormFieldElement>)
+      ) {
+        // We are setting this item to a -1 index because we do not know its position in the DOM.
+        // This value should be updated with the next call to collect page details.
+        this.buildAutofillFieldItem(node as ElementWithOpId<FormFieldElement>, -1);
       }
     }
 
diff --git a/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts b/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts
index 828d768ca25..b6739db36a2 100644
--- a/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts
+++ b/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts
@@ -2,6 +2,7 @@ import { EVENTS } from "../constants";
 import AutofillScript, { FillScript, FillScriptActions } from "../models/autofill-script";
 import { FillableFormFieldElement, FormElementWithAttribute, FormFieldElement } from "../types";
 
+import AutofillOverlayContentService from "./autofill-overlay-content.service";
 import CollectAutofillContentService from "./collect-autofill-content.service";
 import DomElementVisibilityService from "./dom-element-visibility.service";
 import InsertAutofillContentService from "./insert-autofill-content.service";
@@ -64,8 +65,10 @@ function setMockWindowLocation({
 
 describe("InsertAutofillContentService", () => {
   const domElementVisibilityService = new DomElementVisibilityService();
+  const autofillOverlayContentService = new AutofillOverlayContentService();
   const collectAutofillContentService = new CollectAutofillContentService(
-    domElementVisibilityService
+    domElementVisibilityService,
+    autofillOverlayContentService
   );
   let insertAutofillContentService: InsertAutofillContentService;
   let fillScript: AutofillScript;
@@ -103,14 +106,14 @@ describe("InsertAutofillContentService", () => {
   });
 
   describe("fillForm", () => {
-    it("returns early if the passed fill script does not have a script property", () => {
+    it("returns early if the passed fill script does not have a script property", async () => {
       fillScript.script = [];
       jest.spyOn(insertAutofillContentService as any, "fillingWithinSandboxedIframe");
       jest.spyOn(insertAutofillContentService as any, "userCancelledInsecureUrlAutofill");
       jest.spyOn(insertAutofillContentService as any, "userCancelledUntrustedIframeAutofill");
       jest.spyOn(insertAutofillContentService as any, "runFillScriptAction");
 
-      insertAutofillContentService.fillForm(fillScript);
+      await insertAutofillContentService.fillForm(fillScript);
 
       expect(insertAutofillContentService["fillingWithinSandboxedIframe"]).not.toHaveBeenCalled();
       expect(
@@ -122,7 +125,7 @@ describe("InsertAutofillContentService", () => {
       expect(insertAutofillContentService["runFillScriptAction"]).not.toHaveBeenCalled();
     });
 
-    it("returns early if the script is filling within a sand boxed iframe", () => {
+    it("returns early if the script is filling within a sand boxed iframe", async () => {
       jest
         .spyOn(insertAutofillContentService as any, "fillingWithinSandboxedIframe")
         .mockReturnValue(true);
@@ -130,7 +133,7 @@ describe("InsertAutofillContentService", () => {
       jest.spyOn(insertAutofillContentService as any, "userCancelledUntrustedIframeAutofill");
       jest.spyOn(insertAutofillContentService as any, "runFillScriptAction");
 
-      insertAutofillContentService.fillForm(fillScript);
+      await insertAutofillContentService.fillForm(fillScript);
 
       expect(insertAutofillContentService["fillingWithinSandboxedIframe"]).toHaveBeenCalled();
       expect(
@@ -142,7 +145,7 @@ describe("InsertAutofillContentService", () => {
       expect(insertAutofillContentService["runFillScriptAction"]).not.toHaveBeenCalled();
     });
 
-    it("returns early if the autofill is occurring on an insecure url and the user cancels the autofill", () => {
+    it("returns early if the autofill is occurring on an insecure url and the user cancels the autofill", async () => {
       jest
         .spyOn(insertAutofillContentService as any, "fillingWithinSandboxedIframe")
         .mockReturnValue(false);
@@ -152,7 +155,7 @@ describe("InsertAutofillContentService", () => {
       jest.spyOn(insertAutofillContentService as any, "userCancelledUntrustedIframeAutofill");
       jest.spyOn(insertAutofillContentService as any, "runFillScriptAction");
 
-      insertAutofillContentService.fillForm(fillScript);
+      await insertAutofillContentService.fillForm(fillScript);
 
       expect(insertAutofillContentService["fillingWithinSandboxedIframe"]).toHaveBeenCalled();
       expect(insertAutofillContentService["userCancelledInsecureUrlAutofill"]).toHaveBeenCalled();
@@ -162,7 +165,7 @@ describe("InsertAutofillContentService", () => {
       expect(insertAutofillContentService["runFillScriptAction"]).not.toHaveBeenCalled();
     });
 
-    it("returns early if the iframe is untrusted and the user cancelled the autofill", () => {
+    it("returns early if the iframe is untrusted and the user cancelled the autofill", async () => {
       jest
         .spyOn(insertAutofillContentService as any, "fillingWithinSandboxedIframe")
         .mockReturnValue(false);
@@ -174,7 +177,7 @@ describe("InsertAutofillContentService", () => {
         .mockReturnValue(true);
       jest.spyOn(insertAutofillContentService as any, "runFillScriptAction");
 
-      insertAutofillContentService.fillForm(fillScript);
+      await insertAutofillContentService.fillForm(fillScript);
 
       expect(insertAutofillContentService["fillingWithinSandboxedIframe"]).toHaveBeenCalled();
       expect(insertAutofillContentService["userCancelledInsecureUrlAutofill"]).toHaveBeenCalled();
@@ -184,7 +187,7 @@ describe("InsertAutofillContentService", () => {
       expect(insertAutofillContentService["runFillScriptAction"]).not.toHaveBeenCalled();
     });
 
-    it("runs the fill script action for all scripts found within the fill script", () => {
+    it("runs the fill script action for all scripts found within the fill script", async () => {
       jest
         .spyOn(insertAutofillContentService as any, "fillingWithinSandboxedIframe")
         .mockReturnValue(false);
@@ -196,7 +199,7 @@ describe("InsertAutofillContentService", () => {
         .mockReturnValue(false);
       jest.spyOn(insertAutofillContentService as any, "runFillScriptAction");
 
-      insertAutofillContentService.fillForm(fillScript);
+      await insertAutofillContentService.fillForm(fillScript);
 
       expect(insertAutofillContentService["fillingWithinSandboxedIframe"]).toHaveBeenCalled();
       expect(insertAutofillContentService["userCancelledInsecureUrlAutofill"]).toHaveBeenCalled();
@@ -399,14 +402,14 @@ describe("InsertAutofillContentService", () => {
       jest.useFakeTimers();
     });
 
-    it("returns early if no opid is provided", () => {
+    it("returns early if no opid is provided", async () => {
       const action = "fill_by_opid";
       const opid = "";
       const value = "value";
       const scriptAction: FillScript = [action, opid, value];
       jest.spyOn(insertAutofillContentService["autofillInsertActions"], action);
 
-      insertAutofillContentService["runFillScriptAction"](scriptAction, 0);
+      await insertAutofillContentService["runFillScriptAction"](scriptAction, 0);
       jest.advanceTimersByTime(20);
 
       expect(insertAutofillContentService["autofillInsertActions"][action]).not.toHaveBeenCalled();
diff --git a/apps/browser/src/autofill/services/insert-autofill-content.service.ts b/apps/browser/src/autofill/services/insert-autofill-content.service.ts
index 46cb53d4f59..11a2d7fc71e 100644
--- a/apps/browser/src/autofill/services/insert-autofill-content.service.ts
+++ b/apps/browser/src/autofill/services/insert-autofill-content.service.ts
@@ -31,9 +31,10 @@ class InsertAutofillContentService implements InsertAutofillContentServiceInterf
    * Handles autofill of the forms on the current page based on the
    * data within the passed fill script object.
    * @param {AutofillScript} fillScript
+   * @returns {Promise<void>}
    * @public
    */
-  fillForm(fillScript: AutofillScript) {
+  async fillForm(fillScript: AutofillScript) {
     if (
       !fillScript.script?.length ||
       this.fillingWithinSandboxedIframe() ||
@@ -43,7 +44,8 @@ class InsertAutofillContentService implements InsertAutofillContentServiceInterf
       return;
     }
 
-    fillScript.script.forEach(this.runFillScriptAction);
+    const fillActionPromises = fillScript.script.map(this.runFillScriptAction);
+    await Promise.all(fillActionPromises);
   }
 
   /**
@@ -128,20 +130,27 @@ class InsertAutofillContentService implements InsertAutofillContentServiceInterf
   /**
    * Runs the autofill action based on the action type and the opid.
    * Each action is subsequently delayed by 20 milliseconds.
-   * @param {FillScriptActions} action
+   * @param {"click_on_opid" | "focus_by_opid" | "fill_by_opid"} action
    * @param {string} opid
    * @param {string} value
    * @param {number} actionIndex
+   * @returns {Promise<void>}
+   * @private
    */
-  private runFillScriptAction = ([action, opid, value]: FillScript, actionIndex: number): void => {
+  private runFillScriptAction = (
+    [action, opid, value]: FillScript,
+    actionIndex: number
+  ): Promise<void> => {
     if (!opid || !this.autofillInsertActions[action]) {
       return;
     }
 
     const delayActionsInMilliseconds = 20;
-    setTimeout(
-      () => this.autofillInsertActions[action]({ opid, value }),
-      delayActionsInMilliseconds * actionIndex
+    return new Promise((resolve) =>
+      setTimeout(() => {
+        this.autofillInsertActions[action]({ opid, value });
+        resolve();
+      }, delayActionsInMilliseconds * actionIndex)
     );
   };
 
@@ -344,9 +353,10 @@ class InsertAutofillContentService implements InsertAutofillContentServiceInterf
    * @private
    */
   private simulateUserKeyboardEventInteractions(element: FormFieldElement): void {
-    [EVENTS.KEYDOWN, EVENTS.KEYPRESS, EVENTS.KEYUP].forEach((eventType) =>
-      element.dispatchEvent(new KeyboardEvent(eventType, { bubbles: true }))
-    );
+    const simulatedKeyboardEvents = [EVENTS.KEYDOWN, EVENTS.KEYPRESS, EVENTS.KEYUP];
+    for (let index = 0; index < simulatedKeyboardEvents.length; index++) {
+      element.dispatchEvent(new KeyboardEvent(simulatedKeyboardEvents[index], { bubbles: true }));
+    }
   }
 
   /**
@@ -356,9 +366,10 @@ class InsertAutofillContentService implements InsertAutofillContentServiceInterf
    * @private
    */
   private simulateInputElementChangedEvent(element: FormFieldElement): void {
-    [EVENTS.INPUT, EVENTS.CHANGE].forEach((eventType) =>
-      element.dispatchEvent(new Event(eventType, { bubbles: true }))
-    );
+    const simulatedInputEvents = [EVENTS.INPUT, EVENTS.CHANGE];
+    for (let index = 0; index < simulatedInputEvents.length; index++) {
+      element.dispatchEvent(new Event(simulatedInputEvents[index], { bubbles: true }));
+    }
   }
 }
 
diff --git a/apps/browser/src/autofill/notification/variables.scss b/apps/browser/src/autofill/shared/styles/variables.scss
similarity index 70%
rename from apps/browser/src/autofill/notification/variables.scss
rename to apps/browser/src/autofill/shared/styles/variables.scss
index bb29ad86336..318bc34025a 100644
--- a/apps/browser/src/autofill/notification/variables.scss
+++ b/apps/browser/src/autofill/shared/styles/variables.scss
@@ -1,14 +1,20 @@
 @import "~nord/src/sass/nord.scss";
 
+$dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
+
 $font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-size-base: 14px;
-$text-color: #333333;
+$text-color: #212529;
+$muted-text-color: #6c747c;
+$border-color: #ced4dc;
 $border-color-dark: #ddd;
 $border-radius: 3px;
+$focus-outline-color: #1252a3;
 
 $brand-primary: #175ddc;
 
-$background-color: #f0f0f0;
+$background-color: #ffffff;
+$background-offset-color: #f0f0f0;
 
 $solarizedDarkBase0: #839496;
 $solarizedDarkBase03: #002b36;
@@ -21,50 +27,62 @@ $solarizedDarkGreen: #859900;
 $themes: (
   light: (
     textColor: $text-color,
-    mutedTextColor: #6d757e,
+    mutedTextColor: $muted-text-color,
     backgroundColor: $background-color,
+    backgroundOffsetColor: $background-offset-color,
     primaryColor: $brand-primary,
     buttonPrimaryColor: $brand-primary,
     textContrast: $background-color,
-    inputBorderColor: darken($border-color-dark, 7%),
+    inputBorderColor: darken($border-color-dark, 2.75%),
     inputBackgroundColor: #ffffff,
+    borderColor: $border-color,
+    focusOutlineColor: $focus-outline-color,
   ),
   dark: (
     textColor: #ffffff,
     mutedTextColor: #bac0ce,
     backgroundColor: #2f343d,
+    backgroundOffsetColor: darken(#2f343d, 2.75%),
     buttonPrimaryColor: #6f9df1,
     primaryColor: #6f9df1,
     textContrast: #2f343d,
     inputBorderColor: #4c525f,
     inputBackgroundColor: #2f343d,
+    borderColor: #4c525f,
+    focusOutlineColor: $focus-outline-color,
   ),
   nord: (
     textColor: $nord5,
     mutedTextColor: $nord4,
     backgroundColor: $nord1,
+    backgroundOffsetColor: darken($nord1, 2.75%),
     buttonPrimaryColor: $nord8,
     primaryColor: $nord9,
     textContrast: $nord2,
     inputBorderColor: $nord0,
     inputBackgroundColor: $nord2,
+    borderColor: $nord0,
+    focusOutlineColor: $focus-outline-color,
   ),
   solarizedDark: (
     textColor: $solarizedDarkBase2,
     // Muted uses main text color to avoid contrast issues
     mutedTextColor: $solarizedDarkBase2,
     backgroundColor: $solarizedDarkBase03,
+    backgroundOffsetColor: darken($solarizedDarkBase03, 2.75%),
     buttonPrimaryColor: $solarizedDarkCyan,
     primaryColor: $solarizedDarkGreen,
     textContrast: $solarizedDarkBase02,
     inputBorderColor: rgba($solarizedDarkBase2, 0.2),
     inputBackgroundColor: $solarizedDarkBase01,
+    borderColor: $solarizedDarkBase2,
+    focusOutlineColor: $focus-outline-color,
   ),
 );
 
 @mixin themify($themes: $themes) {
   @each $theme, $map in $themes {
-    html.theme_#{$theme} & {
+    .theme_#{$theme} & {
       $theme-map: () !global;
       @each $key, $submap in $map {
         $value: map-get(map-get($themes, $theme), "#{$key}");
diff --git a/apps/browser/src/autofill/types/index.ts b/apps/browser/src/autofill/types/index.ts
index 8a97e397477..880ce3ca1e5 100644
--- a/apps/browser/src/autofill/types/index.ts
+++ b/apps/browser/src/autofill/types/index.ts
@@ -1,4 +1,5 @@
 import { Region } from "@bitwarden/common/platform/abstractions/environment.service";
+import { GlobalState } from "@bitwarden/common/platform/models/domain/global-state";
 import { VaultTimeoutAction } from "@bitwarden/common/src/enums/vault-timeout-action.enum";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 
@@ -34,13 +35,15 @@ export type UserSettings = {
   settings: {
     equivalentDomains: string[][];
   };
-  neverDomains?: { [key: string]: any };
-  disableAddLoginNotification?: boolean;
-  disableChangedPasswordNotification?: boolean;
   vaultTimeout: number;
   vaultTimeoutAction: VaultTimeoutAction;
 };
 
+export type GlobalSettings = Pick<
+  GlobalState,
+  "disableAddLoginNotification" | "disableChangedPasswordNotification" | "neverDomains"
+>;
+
 /**
  * A HTMLElement (usually a form element) with additional custom properties added by this script
  */
diff --git a/apps/browser/src/autofill/utils/autofill-overlay.enum.ts b/apps/browser/src/autofill/utils/autofill-overlay.enum.ts
new file mode 100644
index 00000000000..ae07c7c5e92
--- /dev/null
+++ b/apps/browser/src/autofill/utils/autofill-overlay.enum.ts
@@ -0,0 +1,28 @@
+const AutofillOverlayElement = {
+  Button: "autofill-overlay-button",
+  List: "autofill-overlay-list",
+} as const;
+
+const AutofillOverlayPort = {
+  Button: "autofill-overlay-button-port",
+  List: "autofill-overlay-list-port",
+} as const;
+
+const RedirectFocusDirection = {
+  Current: "current",
+  Previous: "previous",
+  Next: "next",
+} as const;
+
+const AutofillOverlayVisibility = {
+  Off: 0,
+  OnButtonClick: 1,
+  OnFieldFocus: 2,
+} as const;
+
+export {
+  AutofillOverlayElement,
+  AutofillOverlayPort,
+  RedirectFocusDirection,
+  AutofillOverlayVisibility,
+};
diff --git a/apps/browser/src/autofill/utils/svg-icons.ts b/apps/browser/src/autofill/utils/svg-icons.ts
new file mode 100644
index 00000000000..a3a8de4d4f0
--- /dev/null
+++ b/apps/browser/src/autofill/utils/svg-icons.ts
@@ -0,0 +1,19 @@
+const logoIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path fill="#175DDC" d="M12.66.175A.566.566 0 0 0 12.25 0H1.75a.559.559 0 0 0-.409.175.561.561 0 0 0-.175.41v7c.002.532.105 1.06.305 1.554.189.488.444.948.756 1.368.322.42.682.81 1.076 1.163.365.335.75.649 1.152.939.35.248.718.483 1.103.706.385.222.656.372.815.45.16.08.29.141.386.182A.53.53 0 0 0 7 14a.509.509 0 0 0 .238-.055c.098-.043.225-.104.387-.182.162-.079.438-.23.816-.45.378-.222.75-.459 1.102-.707.403-.29.788-.604 1.154-.939a8.435 8.435 0 0 0 1.076-1.163c.312-.42.567-.88.757-1.367a4.19 4.19 0 0 0 .304-1.555v-7a.55.55 0 0 0-.174-.407Z"/><path fill="#fff" d="M7 12.365s4.306-2.18 4.306-4.717V1.5H7v10.865Z"/></svg>';
+
+const logoLockedIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(#a)"><path fill="#175DDC" d="M12.66.175A.566.566 0 0 0 12.25 0H1.75a.559.559 0 0 0-.409.175.561.561 0 0 0-.175.41v7c.002.532.105 1.06.305 1.554.189.488.444.948.756 1.368.322.42.682.81 1.076 1.163.365.335.75.649 1.152.939.35.248.718.483 1.103.706.385.222.656.372.815.45.16.08.29.141.386.182A.53.53 0 0 0 7 14a.509.509 0 0 0 .238-.055c.098-.043.225-.104.387-.182.162-.079.438-.23.816-.45.378-.222.75-.459 1.102-.707.403-.29.788-.604 1.154-.939a8.435 8.435 0 0 0 1.076-1.163c.312-.42.567-.88.757-1.367a4.19 4.19 0 0 0 .304-1.555v-7a.55.55 0 0 0-.174-.407Z"/><path fill="#fff" d="M7 12.365s4.306-2.18 4.306-4.717V1.5H7v10.865Z"/><circle cx="12.889" cy="12.889" r="4.889" fill="#F8F9FA"/><path fill="#555" d="M11.26 11.717h2.37v-.848c0-.313-.116-.58-.348-.8a1.17 1.17 0 0 0-.838-.332c-.327 0-.606.11-.838.332a1.066 1.066 0 0 0-.347.8v.848Zm3.851.424v2.546a.4.4 0 0 1-.13.3.44.44 0 0 1-.314.124h-4.445a.44.44 0 0 1-.315-.124.4.4 0 0 1-.13-.3V12.14a.4.4 0 0 1 .13-.3.44.44 0 0 1 .315-.124h.148v-.848c0-.542.204-1.008.612-1.397a2.044 2.044 0 0 1 1.462-.583c.568 0 1.056.194 1.463.583.408.39.611.855.611 1.397v.848h.149a.44.44 0 0 1 .315.124.4.4 0 0 1 .13.3Z"/></g><defs><clipPath id="a"><rect width="16" height="16" fill="#fff" rx="2"/></clipPath></defs></svg>';
+
+const globeIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"><path fill="#777" fill-rule="evenodd" d="M18.026 17.842c-1.418 1.739-3.517 2.84-5.86 2.84a7.364 7.364 0 0 1-3.431-.848l.062-.15.062-.151.063-.157c.081-.203.17-.426.275-.646.133-.28.275-.522.426-.68.026-.028.101-.075.275-.115.165-.037.376-.059.629-.073.138-.008.288-.014.447-.02.399-.016.847-.034 1.266-.092.314-.044.566-.131.755-.271a.884.884 0 0 0 .352-.555c.037-.2.008-.392-.03-.543-.035-.135-.084-.264-.12-.355l-.01-.03a4.26 4.26 0 0 0-.145-.33c-.126-.264-.237-.497-.288-1.085-.03-.344.09-.73.251-1.138l.089-.22c.05-.123.1-.247.14-.355.064-.171.129-.375.129-.566a1.51 1.51 0 0 0-.134-.569 2.573 2.573 0 0 0-.319-.547c-.246-.323-.635-.669-1.093-.669-.44 0-1.006.169-1.487.368-.246.102-.48.216-.68.33-.192.111-.372.235-.492.359-.93.96-1.48 1.239-1.81 1.258-.277.017-.478-.15-.736-.525a9.738 9.738 0 0 1-.19-.29l-.006-.01a11.568 11.568 0 0 0-.198-.305 2.76 2.76 0 0 0-.521-.6 1.39 1.39 0 0 0-1.088-.314 8.302 8.302 0 0 1 1.987-3.936c.055.342.146.626.272.856.23.42.561.64.926.716.406.086.857-.061 1.26-.216.125-.047.248-.097.372-.147.309-.125.618-.25.947-.341.26-.072.581-.057.959.012.264.049.529.118.8.19l.36.091c.379.094.782.178 1.135.148.374-.032.733-.197.934-.623a.874.874 0 0 0 .024-.752c-.087-.197-.24-.355-.35-.47-.26-.267-.412-.427-.412-.685 0-.125.037-.2.09-.263a.982.982 0 0 1 .303-.211c.059-.03.119-.058.183-.089l.036-.016a3.79 3.79 0 0 0 .236-.118c.047-.026.098-.056.148-.093 1.936.747 3.51 2.287 4.368 4.249a7.739 7.739 0 0 0-.031-.004c-.38-.047-.738-.056-1.063.061-.34.123-.603.368-.817.74-.122.211-.284.43-.463.67l-.095.129c-.207.281-.431.595-.58.92-.15.326-.245.705-.142 1.103.104.397.387.738.837 1.036.099.065.225.112.314.145l.02.008c.108.04.195.074.268.117.07.042.106.08.124.114.017.03.037.087.022.206-.047.376-.069.73-.052 1.034.017.292.071.59.218.809.118.174.12.421.108.786v.01a2.46 2.46 0 0 0 .021.518.809.809 0 0 0 .15.35Zm1.357.059a9.654 9.654 0 0 0 1.62-5.386c0-5.155-3.957-9.334-8.836-9.334-4.88 0-8.836 4.179-8.836 9.334 0 3.495 1.82 6.543 4.513 8.142v.093h.161a8.426 8.426 0 0 0 4.162 1.098c2.953 0 5.568-1.53 7.172-3.882a.569.569 0 0 0 .048-.062l-.004-.003ZM8.152 19.495a43.345 43.345 0 0 1 .098-.238l.057-.142c.082-.205.182-.455.297-.698.143-.301.323-.624.552-.864.163-.172.392-.254.602-.302.219-.05.473-.073.732-.088.162-.01.328-.016.495-.023.386-.015.782-.03 1.168-.084.255-.036.392-.099.461-.15.06-.045.076-.084.083-.12a.534.534 0 0 0-.02-.223 2.552 2.552 0 0 0-.095-.278l-.01-.027a3.128 3.128 0 0 0-.104-.232c-.134-.282-.31-.65-.374-1.381-.046-.533.138-1.063.3-1.472.035-.09.069-.172.1-.249.046-.11.086-.21.123-.31.062-.169.083-.264.083-.312a.812.812 0 0 0-.076-.283 1.867 1.867 0 0 0-.23-.394c-.21-.274-.428-.408-.577-.408-.315 0-.788.13-1.246.32a5.292 5.292 0 0 0-.603.293 1.727 1.727 0 0 0-.347.244c-.936.968-1.641 1.421-2.235 1.457-.646.04-1.036-.413-1.31-.813-.07-.103-.139-.21-.203-.311l-.005-.007c-.064-.101-.125-.197-.188-.29a2.098 2.098 0 0 0-.387-.453.748.748 0 0 0-.436-.18c-.1-.006-.22.005-.365.046a8.707 8.707 0 0 0-.056.992c0 2.957 1.488 5.547 3.716 6.98Zm10.362-2.316.003-.192.002-.046c.01-.305.026-.786-.232-1.169-.036-.054-.082-.189-.096-.444-.014-.243.003-.55.047-.9a1.051 1.051 0 0 0-.105-.649.987.987 0 0 0-.374-.374 2.285 2.285 0 0 0-.367-.166h-.003a1.243 1.243 0 0 1-.205-.088c-.369-.244-.505-.46-.549-.629-.044-.168-.015-.364.099-.61.115-.25.297-.511.507-.796l.089-.12c.178-.239.368-.495.512-.745.152-.263.302-.382.466-.441.18-.065.416-.073.77-.03.142.018.275.04.397.063.274.837.423 1.736.423 2.671a8.45 8.45 0 0 1-1.384 4.665Zm-4.632-12.63a7.362 7.362 0 0 0-1.715-.201c-1.89 0-3.621.716-4.965 1.905.025.54.12.887.24 1.105.13.238.295.34.482.38.2.042.484-.027.905-.188l.328-.13c.32-.13.681-.275 1.048-.377.398-.111.833-.075 1.24 0 .289.053.59.132.871.205l.326.084c.383.094.694.151.932.13.216-.017.326-.092.395-.237.039-.083.027-.114.014-.144-.027-.062-.088-.136-.212-.264l-.043-.044c-.218-.222-.567-.578-.567-1.142 0-.305.101-.547.262-.734.137-.159.308-.267.46-.347Z" clip-rule="evenodd"/></svg>';
+
+const lockIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none"><g clip-path="url(#a)"><path fill="#175DDC" d="M8.799 11.633a.68.68 0 0 0-.639.422.695.695 0 0 0-.054.264.682.682 0 0 0 .374.6v1.13a.345.345 0 1 0 .693 0v-1.17a.68.68 0 0 0 .315-.56.695.695 0 0 0-.204-.486.682.682 0 0 0-.485-.2Zm4.554-4.657h-7.11a.438.438 0 0 1-.406-.26A3.81 3.81 0 0 1 5.584 4.3c.112-.435.312-.842.588-1.195A3.196 3.196 0 0 1 7.19 2.25a3.468 3.468 0 0 1 3.225-.059A3.62 3.62 0 0 1 11.94 3.71l.327.59a.502.502 0 1 0 .885-.483l-.307-.552a4.689 4.689 0 0 0-2.209-2.078 4.466 4.466 0 0 0-3.936.185A4.197 4.197 0 0 0 5.37 2.49a4.234 4.234 0 0 0-.768 1.565 4.714 4.714 0 0 0 .162 2.682.182.182 0 0 1-.085.22.173.173 0 0 1-.082.02h-.353a1.368 1.368 0 0 0-1.277.842c-.07.168-.107.348-.109.53v7.1a1.392 1.392 0 0 0 .412.974 1.352 1.352 0 0 0 .974.394h9.117c.363.001.711-.142.97-.4a1.39 1.39 0 0 0 .407-.972v-7.1a1.397 1.397 0 0 0-.414-.973 1.368 1.368 0 0 0-.972-.396Zm.37 8.469a.373.373 0 0 1-.11.26.364.364 0 0 1-.26.107H4.246a.366.366 0 0 1-.26-.107.374.374 0 0 1-.11-.261V8.349a.374.374 0 0 1 .11-.26.366.366 0 0 1 .26-.108h9.116a.366.366 0 0 1 .37.367l-.008 7.097Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M.798.817h16v16h-16z"/></clipPath></defs></svg>';
+
+const plusIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none"><g clip-path="url(#a)"><path fill="#175DDC" d="M15.222 7.914H8.963a.471.471 0 0 1-.34-.147.512.512 0 0 1-.142-.353V.99c0-.133-.05-.26-.14-.354a.471.471 0 0 0-.68 0 .51.51 0 0 0-.142.354v6.424c0 .132-.051.26-.142.353a.474.474 0 0 1-.34.147H.777a.47.47 0 0 0-.34.146.5.5 0 0 0-.14.354.522.522 0 0 0 .14.353.48.48 0 0 0 .34.147h6.26c.128 0 .25.052.34.146.09.094.142.221.142.354v6.576c0 .132.05.26.14.353a.471.471 0 0 0 .68 0 .512.512 0 0 0 .142-.353V9.414c0-.133.051-.26.142-.354a.474.474 0 0 1 .34-.146h6.26c.127 0 .25-.053.34-.147a.511.511 0 0 0 0-.707.472.472 0 0 0-.34-.146Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 .49h16v16H0z"/></clipPath></defs></svg>';
+
+const viewCipherIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><g clip-path="url(#a)"><path fill="#175DDC" d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 .113h20v19.773H0z"/></clipPath></defs></svg>';
+
+export { logoIcon, logoLockedIcon, globeIcon, lockIcon, plusIcon, viewCipherIcon };
diff --git a/apps/browser/src/autofill/utils/utils.spec.ts b/apps/browser/src/autofill/utils/utils.spec.ts
new file mode 100644
index 00000000000..43c3ef03ae5
--- /dev/null
+++ b/apps/browser/src/autofill/utils/utils.spec.ts
@@ -0,0 +1,118 @@
+import { logoIcon, logoLockedIcon } from "./svg-icons";
+import {
+  buildSvgDomElement,
+  generateRandomCustomElementName,
+  sendExtensionMessage,
+  setElementStyles,
+} from "./utils";
+
+describe("buildSvgDomElement", () => {
+  it("returns an SVG DOM element", () => {
+    const builtSVG = buildSvgDomElement(logoIcon);
+    const builtSVGAriaVisible = buildSvgDomElement(logoLockedIcon, false);
+
+    expect(builtSVG.tagName).toEqual("svg");
+    expect(builtSVG.getAttribute("aria-hidden")).toEqual("true");
+    expect(builtSVGAriaVisible.tagName).toEqual("svg");
+    expect(builtSVGAriaVisible.getAttribute("aria-hidden")).toEqual("false");
+  });
+});
+
+describe("generateRandomCustomElementName", () => {
+  it("returns a randomized value", async () => {
+    let generatedValue = "";
+
+    expect(generatedValue).toHaveLength(0);
+
+    generatedValue = generateRandomCustomElementName();
+
+    expect(generatedValue.length).toBeGreaterThan(0);
+  });
+});
+
+describe("sendExtensionMessage", () => {
+  it("sends a message to the extention", () => {
+    const extensionMessageResponse = sendExtensionMessage("updateAutofillOverlayHidden", {
+      display: "none",
+    });
+    jest.spyOn(chrome.runtime, "sendMessage");
+
+    expect(chrome.runtime.sendMessage).toHaveBeenCalled();
+    expect(extensionMessageResponse).toEqual(Promise.resolve({}));
+  });
+});
+
+describe("setElementStyles", () => {
+  const passedRules = { backgroundColor: "hotpink", color: "cyan" };
+  const expectedCSSRuleString = "background-color: hotpink; color: cyan;";
+  const expectedImportantCSSRuleString =
+    "background-color: hotpink !important; color: cyan !important;";
+
+  it("sets the passed styles to the passed HTMLElement", async () => {
+    const domParser = new DOMParser();
+    const testDivDOM = domParser.parseFromString(
+      "<div>This is an unexciting div.</div>",
+      "text/html"
+    );
+    const testDiv = testDivDOM.querySelector("div");
+
+    expect(testDiv.getAttribute("style")).toEqual(null);
+
+    setElementStyles(testDiv, passedRules);
+
+    expect(testDiv.getAttribute("style")).toEqual(expectedCSSRuleString);
+  });
+
+  it("sets the passed styles with !important flag to the passed HTMLElement", () => {
+    const domParser = new DOMParser();
+    const testDivDOM = domParser.parseFromString(
+      "<div>This is an unexciting div.</div>",
+      "text/html"
+    );
+    const testDiv = testDivDOM.querySelector("div");
+
+    expect(testDiv.style.cssText).toEqual("");
+
+    setElementStyles(testDiv, passedRules, true);
+
+    expect(testDiv.style.cssText).toEqual(expectedImportantCSSRuleString);
+  });
+
+  it("makes no changes when no element is passed", () => {
+    const domParser = new DOMParser();
+    const testDivDOM = domParser.parseFromString(
+      "<div>This is an unexciting div.</div>",
+      "text/html"
+    );
+    const testDiv = testDivDOM.querySelector("div");
+
+    expect(testDiv.style.cssText).toEqual("");
+
+    setElementStyles(testDiv, passedRules);
+
+    expect(testDiv.style.cssText).toEqual(expectedCSSRuleString);
+
+    setElementStyles(undefined, passedRules, true);
+
+    expect(testDiv.style.cssText).toEqual(expectedCSSRuleString);
+  });
+
+  it("makes no changes when no CSS rules are passed", () => {
+    const domParser = new DOMParser();
+    const testDivDOM = domParser.parseFromString(
+      "<div>This is an unexciting div.</div>",
+      "text/html"
+    );
+    const testDiv = testDivDOM.querySelector("div");
+
+    expect(testDiv.style.cssText).toEqual("");
+
+    setElementStyles(testDiv, passedRules);
+
+    expect(testDiv.style.cssText).toEqual(expectedCSSRuleString);
+
+    setElementStyles(testDiv, {}, true);
+
+    expect(testDiv.style.cssText).toEqual(expectedCSSRuleString);
+  });
+});
diff --git a/apps/browser/src/autofill/utils/utils.ts b/apps/browser/src/autofill/utils/utils.ts
new file mode 100644
index 00000000000..8f953fb01b9
--- /dev/null
+++ b/apps/browser/src/autofill/utils/utils.ts
@@ -0,0 +1,111 @@
+/**
+ * Generates a random string of characters that formatted as a custom element name.
+ */
+function generateRandomCustomElementName(): string {
+  const generateRandomChars = (length: number): string => {
+    const chars = "abcdefghijklmnopqrstuvwxyz";
+    const randomChars = [];
+    const randomBytes = new Uint8Array(length);
+    globalThis.crypto.getRandomValues(randomBytes);
+
+    for (let byteIndex = 0; byteIndex < randomBytes.length; byteIndex++) {
+      const byte = randomBytes[byteIndex];
+      randomChars.push(chars[byte % chars.length]);
+    }
+
+    return randomChars.join("");
+  };
+
+  const length = Math.floor(Math.random() * 5) + 8; // Between 8 and 12 characters
+  const numHyphens = Math.min(Math.max(Math.floor(Math.random() * 4), 1), length - 1); // At least 1, maximum of 3 hyphens
+
+  const hyphenIndices: number[] = [];
+  while (hyphenIndices.length < numHyphens) {
+    const index = Math.floor(Math.random() * (length - 1)) + 1;
+    if (!hyphenIndices.includes(index)) {
+      hyphenIndices.push(index);
+    }
+  }
+  hyphenIndices.sort((a, b) => a - b);
+
+  let randomString = "";
+  let prevIndex = 0;
+
+  for (let index = 0; index < hyphenIndices.length; index++) {
+    const hyphenIndex = hyphenIndices[index];
+    randomString = randomString + generateRandomChars(hyphenIndex - prevIndex) + "-";
+    prevIndex = hyphenIndex;
+  }
+
+  randomString += generateRandomChars(length - prevIndex);
+
+  return randomString;
+}
+
+/**
+ * Builds a DOM element from an SVG string.
+ *
+ * @param svgString - The SVG string to build the DOM element from.
+ * @param ariaHidden - Determines whether the SVG should be hidden from screen readers.
+ */
+function buildSvgDomElement(svgString: string, ariaHidden = true): HTMLElement {
+  const domParser = new DOMParser();
+  const svgDom = domParser.parseFromString(svgString, "image/svg+xml");
+  const domElement = svgDom.documentElement;
+  domElement.setAttribute("aria-hidden", `${ariaHidden}`);
+
+  return domElement;
+}
+
+/**
+ * Sends a message to the extension.
+ *
+ * @param command - The command to send.
+ * @param options - The options to send with the command.
+ */
+async function sendExtensionMessage(
+  command: string,
+  options: Record<string, any> = {}
+): Promise<any | void> {
+  return new Promise((resolve) => {
+    chrome.runtime.sendMessage(Object.assign({ command }, options), (response) => {
+      if (chrome.runtime.lastError) {
+        return;
+      }
+
+      resolve(response);
+    });
+  });
+}
+
+/**
+ * Sets CSS styles on an element.
+ *
+ * @param element - The element to set the styles on.
+ * @param styles - The styles to set on the element.
+ * @param priority - Determines whether the styles should be set as important.
+ */
+function setElementStyles(
+  element: HTMLElement,
+  styles: Partial<CSSStyleDeclaration>,
+  priority?: boolean
+) {
+  if (!element || !styles || !Object.keys(styles).length) {
+    return;
+  }
+
+  for (const styleProperty in styles) {
+    element.style.setProperty(
+      styleProperty.replace(/([a-z])([A-Z])/g, "$1-$2"), // Convert camelCase to kebab-case
+      styles[styleProperty],
+      priority ? "important" : undefined
+    );
+  }
+}
+
+export {
+  generateRandomCustomElementName,
+  buildSvgDomElement,
+  sendExtensionMessage,
+  setElementStyles,
+};
diff --git a/apps/browser/src/background/main.background.ts b/apps/browser/src/background/main.background.ts
index e3fe610fce5..7aaaf4dff26 100644
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -121,6 +121,7 @@ import { BrowserOrganizationService } from "../admin-console/services/browser-or
 import { BrowserPolicyService } from "../admin-console/services/browser-policy.service";
 import ContextMenusBackground from "../autofill/background/context-menus.background";
 import NotificationBackground from "../autofill/background/notification.background";
+import OverlayBackground from "../autofill/background/overlay.background";
 import TabsBackground from "../autofill/background/tabs.background";
 import { CipherContextMenuHandler } from "../autofill/browser/cipher-context-menu-handler";
 import { ContextMenuClickedHandler } from "../autofill/browser/context-menu-clicked-handler";
@@ -236,6 +237,7 @@ export default class MainBackground {
   private contextMenusBackground: ContextMenusBackground;
   private idleBackground: IdleBackground;
   private notificationBackground: NotificationBackground;
+  private overlayBackground: OverlayBackground;
   private runtimeBackground: RuntimeBackground;
   private tabsBackground: TabsBackground;
   private webRequestBackground: WebRequestBackground;
@@ -309,7 +311,7 @@ export default class MainBackground {
       },
       window
     );
-    this.i18nService = new BrowserI18nService(BrowserApi.getUILanguage(window), this.stateService);
+    this.i18nService = new BrowserI18nService(BrowserApi.getUILanguage(), this.stateService);
     this.encryptService = flagEnabled("multithreadDecryption")
       ? new MultithreadEncryptServiceImplementation(
           this.cryptoFunctionService,
@@ -655,8 +657,20 @@ export default class MainBackground {
       this.stateService,
       this.environmentService
     );
-
-    this.tabsBackground = new TabsBackground(this, this.notificationBackground);
+    this.overlayBackground = new OverlayBackground(
+      this.cipherService,
+      this.autofillService,
+      this.authService,
+      this.environmentService,
+      this.settingsService,
+      this.stateService,
+      this.i18nService
+    );
+    this.tabsBackground = new TabsBackground(
+      this,
+      this.notificationBackground,
+      this.overlayBackground
+    );
     if (!this.popupOnlyContext) {
       const contextMenuClickedHandler = new ContextMenuClickedHandler(
         (options) => this.platformUtilsService.copyToClipboard(options.text, { window: self }),
@@ -738,6 +752,8 @@ export default class MainBackground {
     this.configService.init();
     this.twoFactorService.init();
 
+    await this.overlayBackground.init();
+
     await this.tabsBackground.init();
     if (!this.popupOnlyContext) {
       this.contextMenusBackground?.init();
diff --git a/apps/browser/src/background/runtime.background.ts b/apps/browser/src/background/runtime.background.ts
index 9d8ab4b898d..4099b161cc5 100644
--- a/apps/browser/src/background/runtime.background.ts
+++ b/apps/browser/src/background/runtime.background.ts
@@ -133,7 +133,8 @@ export default class RuntimeBackground {
       case "triggerAutofillScriptInjection":
         await this.autofillService.injectAutofillScripts(
           sender,
-          await this.configService.getFeatureFlag<boolean>(FeatureFlag.AutofillV2)
+          await this.configService.getFeatureFlag<boolean>(FeatureFlag.AutofillV2),
+          await this.configService.getFeatureFlag<boolean>(FeatureFlag.AutofillOverlay)
         );
         break;
       case "bgCollectPageDetails":
diff --git a/apps/browser/src/manifest.json b/apps/browser/src/manifest.json
index 37b44cb3ef2..d5bef7f950e 100644
--- a/apps/browser/src/manifest.json
+++ b/apps/browser/src/manifest.json
@@ -59,8 +59,12 @@
     "webRequest",
     "webRequestBlocking"
   ],
-  "optional_permissions": ["nativeMessaging"],
+  "optional_permissions": ["nativeMessaging", "privacy"],
   "content_security_policy": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'",
+  "sandbox": {
+    "pages": ["overlay/button.html", "overlay/list.html"],
+    "content_security_policy": "sandbox allow-scripts; script-src 'self'"
+  },
   "commands": {
     "_execute_browser_action": {
       "suggested_key": {
@@ -96,7 +100,10 @@
     "content/fido2/page-script.js",
     "notification/bar.html",
     "images/icon38.png",
-    "images/icon38_locked.png"
+    "images/icon38_locked.png",
+    "overlay/button.html",
+    "overlay/list.html",
+    "popup/fonts/*"
   ],
   "applications": {
     "gecko": {
diff --git a/apps/browser/src/manifest.v3.json b/apps/browser/src/manifest.v3.json
index 7f8f15b9d7d..27b7a418260 100644
--- a/apps/browser/src/manifest.v3.json
+++ b/apps/browser/src/manifest.v3.json
@@ -66,12 +66,17 @@
     "clipboardRead",
     "clipboardWrite",
     "idle",
-    "alarms"
+    "alarms",
+    "scripting"
   ],
-  "optional_permissions": ["nativeMessaging"],
+  "optional_permissions": ["nativeMessaging", "privacy"],
   "host_permissions": ["http://*/*", "https://*/*"],
   "content_security_policy": {
-    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
+    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'",
+    "sandbox": "sandbox allow-scripts; script-src 'self'"
+  },
+  "sandbox": {
+    "pages": ["overlay/button.html", "overlay/list.html"]
   },
   "commands": {
     "_execute_action": {
@@ -110,7 +115,10 @@
         "content/webauthn/page-script.js",
         "notification/bar.html",
         "images/icon38.png",
-        "images/icon38_locked.png"
+        "images/icon38_locked.png",
+        "overlay/button.html",
+        "overlay/list.html",
+        "popup/fonts/*"
       ],
       "matches": ["<all_urls>"]
     }
diff --git a/apps/browser/src/platform/browser/browser-api.ts b/apps/browser/src/platform/browser/browser-api.ts
index 472bf8cc3da..19815b1cf53 100644
--- a/apps/browser/src/platform/browser/browser-api.ts
+++ b/apps/browser/src/platform/browser/browser-api.ts
@@ -334,7 +334,7 @@ export class BrowserApi {
     return process.env.ENV !== "production";
   }
 
-  static getUILanguage(win: Window) {
+  static getUILanguage() {
     return chrome.i18n.getUILanguage();
   }
 
@@ -369,11 +369,22 @@ export class BrowserApi {
     if (BrowserApi.isWebExtensionsApi) {
       return browser.permissions.request(permission);
     }
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       chrome.permissions.request(permission, resolve);
     });
   }
 
+  /**
+   * Checks if the user has provided the given permissions to the extension.
+   *
+   * @param permissions - The permissions to check.
+   */
+  static async permissionsGranted(permissions: string[]): Promise<boolean> {
+    return new Promise((resolve) =>
+      chrome.permissions.contains({ permissions }, (result) => resolve(result))
+    );
+  }
+
   static getPlatformInfo(): Promise<browser.runtime.PlatformInfo | chrome.runtime.PlatformInfo> {
     if (BrowserApi.isWebExtensionsApi) {
       return browser.runtime.getPlatformInfo();
@@ -423,4 +434,33 @@ export class BrowserApi {
       });
     });
   }
+
+  /**
+   * Identifies if the browser autofill settings are overridden by the extension.
+   */
+  static async browserAutofillSettingsOverridden(): Promise<boolean> {
+    const autofillAddressOverridden: boolean = await new Promise((resolve) =>
+      chrome.privacy.services.autofillAddressEnabled.get({}, (details) =>
+        resolve(details.levelOfControl === "controlled_by_this_extension" && !details.value)
+      )
+    );
+
+    const autofillCreditCardOverridden: boolean = await new Promise((resolve) =>
+      chrome.privacy.services.autofillCreditCardEnabled.get({}, (details) =>
+        resolve(details.levelOfControl === "controlled_by_this_extension" && !details.value)
+      )
+    );
+
+    return autofillAddressOverridden && autofillCreditCardOverridden;
+  }
+
+  /**
+   * Updates the browser autofill settings to the given value.
+   *
+   * @param value - Determines whether to enable or disable the autofill settings.
+   */
+  static async updateDefaultBrowserAutofillSettings(value: boolean) {
+    chrome.privacy.services.autofillAddressEnabled.set({ value });
+    chrome.privacy.services.autofillCreditCardEnabled.set({ value });
+  }
 }
diff --git a/apps/browser/src/platform/decorators/session-sync-observable/session-syncer.spec.ts b/apps/browser/src/platform/decorators/session-sync-observable/session-syncer.spec.ts
index afa66db0454..96c5a4eea55 100644
--- a/apps/browser/src/platform/decorators/session-sync-observable/session-syncer.spec.ts
+++ b/apps/browser/src/platform/decorators/session-sync-observable/session-syncer.spec.ts
@@ -1,4 +1,4 @@
-import { awaitAsync } from "@bitwarden/angular/../test-utils";
+import { awaitAsync } from "@bitwarden/common/../spec/utils";
 import { mock, MockProxy } from "jest-mock-extended";
 import { BehaviorSubject, ReplaySubject } from "rxjs";
 
diff --git a/apps/browser/src/platform/listeners/on-command-listener.ts b/apps/browser/src/platform/listeners/on-command-listener.ts
index 0e2cf03828d..04f8b72dbfb 100644
--- a/apps/browser/src/platform/listeners/on-command-listener.ts
+++ b/apps/browser/src/platform/listeners/on-command-listener.ts
@@ -54,7 +54,7 @@ const doAutoFillLogin = async (tab: chrome.tabs.Tab): Promise<void> => {
       logoutCallback: () => Promise.resolve(),
     },
     i18nServiceOptions: {
-      systemLanguage: BrowserApi.getUILanguage(self),
+      systemLanguage: BrowserApi.getUILanguage(),
     },
   };
   const logService = await logServiceFactory(cachedServices, opts);
diff --git a/apps/browser/src/platform/listeners/update-badge.ts b/apps/browser/src/platform/listeners/update-badge.ts
index 1b692eb9b97..198cac533ac 100644
--- a/apps/browser/src/platform/listeners/update-badge.ts
+++ b/apps/browser/src/platform/listeners/update-badge.ts
@@ -279,7 +279,7 @@ export class UpdateBadge {
         logoutCallback: () => Promise.reject("not implemented"),
       },
       i18nServiceOptions: {
-        systemLanguage: BrowserApi.getUILanguage(self),
+        systemLanguage: BrowserApi.getUILanguage(),
       },
     };
     this.stateService = await stateServiceFactory(serviceCache, opts);
diff --git a/apps/browser/src/platform/services/abstractions/abstract-chrome-storage-api.service.ts b/apps/browser/src/platform/services/abstractions/abstract-chrome-storage-api.service.ts
index 7d6cf1390fc..77267c3e875 100644
--- a/apps/browser/src/platform/services/abstractions/abstract-chrome-storage-api.service.ts
+++ b/apps/browser/src/platform/services/abstractions/abstract-chrome-storage-api.service.ts
@@ -11,6 +11,9 @@ import { fromChromeEvent } from "../../browser/from-chrome-event";
 export default abstract class AbstractChromeStorageService implements AbstractStorageService {
   constructor(protected chromeStorageApi: chrome.storage.StorageArea) {}
 
+  get valuesRequireDeserialization(): boolean {
+    return true;
+  }
   get updates$(): Observable<StorageUpdate> {
     return fromChromeEvent(this.chromeStorageApi.onChanged).pipe(
       mergeMap(([changes]) => {
@@ -27,7 +30,6 @@ export default abstract class AbstractChromeStorageService implements AbstractSt
             key: key,
             // For removes this property will not exist but then it will just be
             // undefined which is fine.
-            value: change.newValue,
             updateType: updateType,
           };
         });
diff --git a/apps/browser/src/platform/services/local-backed-session-storage.service.ts b/apps/browser/src/platform/services/local-backed-session-storage.service.ts
index 188a9854c55..6366c51de3f 100644
--- a/apps/browser/src/platform/services/local-backed-session-storage.service.ts
+++ b/apps/browser/src/platform/services/local-backed-session-storage.service.ts
@@ -35,6 +35,10 @@ export class LocalBackedSessionStorageService extends AbstractMemoryStorageServi
     super();
   }
 
+  get valuesRequireDeserialization(): boolean {
+    return true;
+  }
+
   get updates$() {
     return this.updatesSubject.asObservable();
   }
diff --git a/apps/browser/src/popup/services/services.module.ts b/apps/browser/src/popup/services/services.module.ts
index 2edc90286b0..8e0d4c288a3 100644
--- a/apps/browser/src/popup/services/services.module.ts
+++ b/apps/browser/src/popup/services/services.module.ts
@@ -244,7 +244,7 @@ function getBgService<T>(service: keyof MainBackground) {
     {
       provide: I18nServiceAbstraction,
       useFactory: (stateService: BrowserStateService) => {
-        return new BrowserI18nService(BrowserApi.getUILanguage(window), stateService);
+        return new BrowserI18nService(BrowserApi.getUILanguage(), stateService);
       },
       deps: [StateService],
     },
diff --git a/apps/browser/src/popup/settings/autofill.component.html b/apps/browser/src/popup/settings/autofill.component.html
index 21ad160d067..9204add4458 100644
--- a/apps/browser/src/popup/settings/autofill.component.html
+++ b/apps/browser/src/popup/settings/autofill.component.html
@@ -11,7 +11,57 @@
   <div class="right"></div>
 </header>
 <main tabindex="-1">
-  <div class="box">
+  <div class="box tw-mt-4">
+    <div class="box-content">
+      <button
+        type="button"
+        class="box-content-row box-content-row-link box-content-row-flex"
+        (click)="commandSettings()"
+      >
+        <div class="row-main">{{ "autofillShortcut" | i18n }}</div>
+        <i class="bwi bwi-external-link bwi-lg bwi-fw" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div id="autofillKeyboardHelp" class="box-footer">
+      {{ autofillKeyboardHelperText }}
+    </div>
+  </div>
+  <ng-container *ngIf="isAutoFillOverlayFlagEnabled">
+    <div class="box">
+      <div class="box-content">
+        <div class="box-content-row" appBoxRow>
+          <label for="autofill-overlay-settings">{{ "showAutoFillMenuOnFormFields" | i18n }}</label>
+          <select
+            id="autofill-overlay-settings"
+            name="autofill-overlay-settings"
+            [(ngModel)]="autoFillOverlayVisibility"
+            (change)="updateAutoFillOverlayVisibility()"
+          >
+            <option *ngFor="let o of autoFillOverlayVisibilityOptions" [ngValue]="o.value">
+              {{ o.name }}
+            </option>
+          </select>
+        </div>
+        <div class="box-footer" *ngIf="accountSwitcherEnabled">
+          {{ "showAutoFillMenuOnFormFieldsDescAlt" | i18n }}
+        </div>
+      </div>
+    </div>
+  </ng-container>
+  <div class="box tw-mt-4" *ngIf="canOverrideBrowserAutofillSetting">
+    <div class="box-content">
+      <div class="box-content-row box-content-row-checkbox" appBoxRow>
+        <label for="overrideBrowserAutofill">{{ "overrideBrowserAutoFillSettings" | i18n }}</label>
+        <input
+          id="overrideBrowserAutofill"
+          type="checkbox"
+          (change)="updateDefaultBrowserAutofillDisabled()"
+          [(ngModel)]="defaultBrowserAutofillDisabled"
+        />
+      </div>
+    </div>
+  </div>
+  <div class="box tw-mt-4">
     <div class="box-content">
       <div class="box-content-row box-content-row-checkbox" appBoxRow>
         <label for="autofill">{{ "enableAutoFillOnPageLoad" | i18n }}</label>
@@ -82,19 +132,4 @@
       {{ "defaultUriMatchDetectionDesc" | i18n }}
     </div>
   </div>
-  <div class="box">
-    <div class="box-content">
-      <button
-        type="button"
-        class="box-content-row box-content-row-link box-content-row-flex"
-        (click)="commandSettings()"
-      >
-        <div class="row-main">{{ "autofillShortcut" | i18n }}</div>
-        <i class="bwi bwi-external-link bwi-lg bwi-fw" aria-hidden="true"></i>
-      </button>
-    </div>
-    <div id="autofillKeyboardHelp" class="box-footer">
-      {{ autofillKeyboardHelperText }}
-    </div>
-  </div>
 </main>
diff --git a/apps/browser/src/popup/settings/autofill.component.ts b/apps/browser/src/popup/settings/autofill.component.ts
index 477c0592664..17cbf60502f 100644
--- a/apps/browser/src/popup/settings/autofill.component.ts
+++ b/apps/browser/src/popup/settings/autofill.component.ts
@@ -1,29 +1,58 @@
 import { Component, OnInit } from "@angular/core";
 
+import { SettingsService } from "@bitwarden/common/abstractions/settings.service";
 import { UriMatchType } from "@bitwarden/common/enums";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import { DialogService } from "@bitwarden/components";
 
+import { AutofillOverlayVisibility } from "../../autofill/utils/autofill-overlay.enum";
 import { BrowserApi } from "../../platform/browser/browser-api";
+import { flagEnabled } from "../../platform/flags";
 
 @Component({
   selector: "app-autofill",
   templateUrl: "autofill.component.html",
 })
 export class AutofillComponent implements OnInit {
+  protected canOverrideBrowserAutofillSetting = false;
+  protected defaultBrowserAutofillDisabled = false;
+  protected isAutoFillOverlayFlagEnabled = false;
+  protected autoFillOverlayVisibility: number;
+  protected autoFillOverlayVisibilityOptions: any[];
   enableAutoFillOnPageLoad = false;
   autoFillOnPageLoadDefault = false;
   autoFillOnPageLoadOptions: any[];
   defaultUriMatch = UriMatchType.Domain;
   uriMatchOptions: any[];
   autofillKeyboardHelperText: string;
+  accountSwitcherEnabled = false;
 
   constructor(
     private stateService: StateService,
     private i18nService: I18nService,
-    private platformUtilsService: PlatformUtilsService
+    private platformUtilsService: PlatformUtilsService,
+    private configService: ConfigServiceAbstraction,
+    private settingsService: SettingsService,
+    private dialogService: DialogService
   ) {
+    this.autoFillOverlayVisibilityOptions = [
+      {
+        name: i18nService.t("autofillOverlayVisibilityOff"),
+        value: AutofillOverlayVisibility.Off,
+      },
+      {
+        name: i18nService.t("autofillOverlayVisibilityOnFieldFocus"),
+        value: AutofillOverlayVisibility.OnFieldFocus,
+      },
+      {
+        name: i18nService.t("autofillOverlayVisibilityOnButtonClick"),
+        value: AutofillOverlayVisibility.OnButtonClick,
+      },
+    ];
     this.autoFillOnPageLoadOptions = [
       { name: i18nService.t("autoFillOnPageLoadYes"), value: true },
       { name: i18nService.t("autoFillOnPageLoadNo"), value: false },
@@ -36,11 +65,22 @@ export class AutofillComponent implements OnInit {
       { name: i18nService.t("exact"), value: UriMatchType.Exact },
       { name: i18nService.t("never"), value: UriMatchType.Never },
     ];
+
+    this.accountSwitcherEnabled = flagEnabled("accountSwitching");
   }
 
   async ngOnInit() {
-    this.enableAutoFillOnPageLoad = await this.stateService.getEnableAutoFillOnPageLoad();
+    this.canOverrideBrowserAutofillSetting = this.platformUtilsService.isChrome();
 
+    this.defaultBrowserAutofillDisabled = await this.browserAutofillSettingCurrentlyOverridden();
+
+    this.isAutoFillOverlayFlagEnabled = await this.configService.getFeatureFlag<boolean>(
+      FeatureFlag.AutofillOverlay
+    );
+    this.autoFillOverlayVisibility =
+      (await this.settingsService.getAutoFillOverlayVisibility()) || AutofillOverlayVisibility.Off;
+
+    this.enableAutoFillOnPageLoad = await this.stateService.getEnableAutoFillOnPageLoad();
     this.autoFillOnPageLoadDefault =
       (await this.stateService.getAutoFillOnPageLoadDefault()) ?? true;
 
@@ -51,6 +91,56 @@ export class AutofillComponent implements OnInit {
     await this.setAutofillKeyboardHelperText(command);
   }
 
+  async updateDefaultBrowserAutofillDisabled() {
+    const privacyPermissionGranted = await this.privacyPermissionGranted();
+    if (!this.defaultBrowserAutofillDisabled && !privacyPermissionGranted) {
+      return;
+    }
+
+    if (
+      !privacyPermissionGranted &&
+      !(await BrowserApi.requestPermission({ permissions: ["privacy"] }))
+    ) {
+      await this.dialogService.openSimpleDialog({
+        title: { key: "extensionPrivacyPermissionNotGrantedTitle" },
+        content: { key: "extensionPrivacyPermissionNotGrantedDescription" },
+        acceptButtonText: { key: "ok" },
+        cancelButtonText: null,
+        type: "warning",
+      });
+      this.defaultBrowserAutofillDisabled = false;
+
+      return;
+    }
+
+    await BrowserApi.updateDefaultBrowserAutofillSettings(!this.defaultBrowserAutofillDisabled);
+  }
+
+  async updateAutoFillOverlayVisibility() {
+    await this.settingsService.setAutoFillOverlayVisibility(this.autoFillOverlayVisibility);
+
+    if (
+      this.autoFillOverlayVisibility === AutofillOverlayVisibility.Off ||
+      !this.canOverrideBrowserAutofillSetting ||
+      (await this.browserAutofillSettingCurrentlyOverridden())
+    ) {
+      return;
+    }
+
+    const permissionGranted = await this.privacyPermissionGranted();
+    const contentKey = permissionGranted
+      ? "overrideBrowserAutofillDescription"
+      : "overrideBrowserAutofillPrivacyRequiredDescription";
+    await this.dialogService.openSimpleDialog({
+      title: { key: "overrideBrowserAutofillTitle" },
+      content: { key: contentKey },
+      acceptButtonText: { key: "turnOn" },
+      acceptAction: async () => await this.handleOverrideDialogAccept(),
+      cancelButtonText: { key: "ignore" },
+      type: "info",
+    });
+  }
+
   async updateAutoFillOnPageLoad() {
     await this.stateService.setEnableAutoFillOnPageLoad(this.enableAutoFillOnPageLoad);
   }
@@ -84,4 +174,25 @@ export class AutofillComponent implements OnInit {
       BrowserApi.createNewTab("https://bitwarden.com/help/keyboard-shortcuts");
     }
   }
+
+  private handleOverrideDialogAccept = async () => {
+    this.defaultBrowserAutofillDisabled = true;
+    await this.updateDefaultBrowserAutofillDisabled();
+  };
+
+  async browserAutofillSettingCurrentlyOverridden() {
+    if (!this.canOverrideBrowserAutofillSetting) {
+      return false;
+    }
+
+    if (!(await this.privacyPermissionGranted())) {
+      return false;
+    }
+
+    return await BrowserApi.browserAutofillSettingsOverridden();
+  }
+
+  async privacyPermissionGranted(): Promise<boolean> {
+    return await BrowserApi.permissionsGranted(["privacy"]);
+  }
 }
diff --git a/apps/browser/src/popup/settings/excluded-domains.component.html b/apps/browser/src/popup/settings/excluded-domains.component.html
index 87a3f0a042b..51d6a20d5be 100644
--- a/apps/browser/src/popup/settings/excluded-domains.component.html
+++ b/apps/browser/src/popup/settings/excluded-domains.component.html
@@ -16,6 +16,13 @@
   <main tabindex="-1">
     <div class="box">
       <div class="box-content">
+        <div class="box-footer" [ngStyle]="{ marginTop: '10px' }">
+          {{
+            accountSwitcherEnabled
+              ? ("excludedDomainsDescAlt" | i18n)
+              : ("excludedDomainsDesc" | i18n)
+          }}
+        </div>
         <ng-container *ngIf="excludedDomains">
           <div
             class="box-content-row box-content-row-multi"
@@ -79,9 +86,6 @@
           <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i> {{ "newUri" | i18n }}
         </button>
       </div>
-      <div class="box-footer">
-        {{ "excludedDomainsDesc" | i18n }}
-      </div>
     </div>
   </main>
 </form>
diff --git a/apps/browser/src/popup/settings/excluded-domains.component.ts b/apps/browser/src/popup/settings/excluded-domains.component.ts
index 7adedd72240..dfed6879588 100644
--- a/apps/browser/src/popup/settings/excluded-domains.component.ts
+++ b/apps/browser/src/popup/settings/excluded-domains.component.ts
@@ -8,6 +8,7 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 
 import { BrowserApi } from "../../platform/browser/browser-api";
+import { flagEnabled } from "../../platform/flags";
 
 interface ExcludedDomain {
   uri: string;
@@ -25,6 +26,7 @@ export class ExcludedDomainsComponent implements OnInit, OnDestroy {
   existingExcludedDomains: ExcludedDomain[] = [];
   currentUris: string[];
   loadCurrentUrisTimeout: number;
+  accountSwitcherEnabled = false;
 
   constructor(
     private stateService: StateService,
@@ -33,7 +35,9 @@ export class ExcludedDomainsComponent implements OnInit, OnDestroy {
     private broadcasterService: BroadcasterService,
     private ngZone: NgZone,
     private platformUtilsService: PlatformUtilsService
-  ) {}
+  ) {
+    this.accountSwitcherEnabled = flagEnabled("accountSwitching");
+  }
 
   async ngOnInit() {
     const savedDomains = await this.stateService.getNeverDomains();
diff --git a/apps/browser/src/popup/settings/options.component.html b/apps/browser/src/popup/settings/options.component.html
index a356be5f735..db9a29fa119 100644
--- a/apps/browser/src/popup/settings/options.component.html
+++ b/apps/browser/src/popup/settings/options.component.html
@@ -74,7 +74,11 @@
         </div>
       </div>
       <div id="addlogin-notification-barHelp" class="box-footer">
-        {{ "addLoginNotificationDesc" | i18n }}
+        {{
+          accountSwitcherEnabled
+            ? ("addLoginNotificationDescAlt" | i18n)
+            : ("addLoginNotificationDesc" | i18n)
+        }}
       </div>
     </div>
     <div class="box">
@@ -93,7 +97,11 @@
         </div>
       </div>
       <div id="changedpass-notification-barHelp" class="box-footer">
-        {{ "changedPasswordNotificationDesc" | i18n }}
+        {{
+          accountSwitcherEnabled
+            ? ("changedPasswordNotificationDescAlt" | i18n)
+            : ("changedPasswordNotificationDesc" | i18n)
+        }}
       </div>
     </div>
     <div class="box">
@@ -109,7 +117,13 @@
           />
         </div>
       </div>
-      <div id="context-menuHelp" class="box-footer">{{ "contextMenuItemDesc" | i18n }}</div>
+      <div id="context-menuHelp" class="box-footer">
+        {{
+          accountSwitcherEnabled
+            ? ("contextMenuItemDescAlt" | i18n)
+            : ("contextMenuItemDesc" | i18n)
+        }}
+      </div>
     </div>
   </ng-container>
   <div class="box box-section-divider">
@@ -206,7 +220,9 @@
           </select>
         </div>
       </div>
-      <div id="themeHelp" class="box-footer">{{ "themeDesc" | i18n }}</div>
+      <div id="themeHelp" class="box-footer">
+        {{ accountSwitcherEnabled ? ("themeDescAlt" | i18n) : ("themeDesc" | i18n) }}
+      </div>
     </div>
   </ng-container>
 </main>
diff --git a/apps/browser/src/popup/settings/options.component.ts b/apps/browser/src/popup/settings/options.component.ts
index b020816158c..b23fefbf646 100644
--- a/apps/browser/src/popup/settings/options.component.ts
+++ b/apps/browser/src/popup/settings/options.component.ts
@@ -8,6 +8,8 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 
+import { flagEnabled } from "../../platform/flags";
+
 @Component({
   selector: "app-options",
   templateUrl: "options.component.html",
@@ -34,6 +36,7 @@ export class OptionsComponent implements OnInit {
   showGeneral = true;
   showAutofill = true;
   showDisplay = true;
+  accountSwitcherEnabled = false;
 
   constructor(
     private messagingService: MessagingService,
@@ -71,6 +74,8 @@ export class OptionsComponent implements OnInit {
       { name: i18nService.t("autoFillOnPageLoadYes"), value: true },
       { name: i18nService.t("autoFillOnPageLoadNo"), value: false },
     ];
+
+    this.accountSwitcherEnabled = flagEnabled("accountSwitching");
   }
 
   async ngOnInit() {
diff --git a/apps/browser/src/popup/settings/settings.component.html b/apps/browser/src/popup/settings/settings.component.html
index f96a7ffdb7c..0b752ac6ce6 100644
--- a/apps/browser/src/popup/settings/settings.component.html
+++ b/apps/browser/src/popup/settings/settings.component.html
@@ -109,7 +109,9 @@
         />
       </div>
       <button
-        *ngIf="availableVaultTimeoutActions.includes(VaultTimeoutAction.Lock)"
+        *ngIf="
+          !accountSwitcherEnabled && availableVaultTimeoutActions.includes(VaultTimeoutAction.Lock)
+        "
         type="button"
         class="box-content-row box-content-row-flex text-default"
         appStopClick
@@ -163,6 +165,7 @@
         <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
+        *ngIf="!accountSwitcherEnabled"
         type="button"
         class="box-content-row box-content-row-flex text-default"
         appStopClick
diff --git a/apps/browser/src/popup/settings/settings.component.ts b/apps/browser/src/popup/settings/settings.component.ts
index b67564a07b5..61404bbb07a 100644
--- a/apps/browser/src/popup/settings/settings.component.ts
+++ b/apps/browser/src/popup/settings/settings.component.ts
@@ -36,6 +36,7 @@ import { DialogService } from "@bitwarden/components";
 import { SetPinComponent } from "../../auth/popup/components/set-pin.component";
 import { BiometricErrors, BiometricErrorTypes } from "../../models/biometricErrors";
 import { BrowserApi } from "../../platform/browser/browser-api";
+import { flagEnabled } from "../../platform/flags";
 import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
 
 import { AboutComponent } from "./about.component";
@@ -71,6 +72,7 @@ export class SettingsComponent implements OnInit {
   }>;
   supportsBiometric: boolean;
   showChangeMasterPass = true;
+  accountSwitcherEnabled = false;
 
   form = this.formBuilder.group({
     vaultTimeout: [null as number | null],
@@ -99,7 +101,9 @@ export class SettingsComponent implements OnInit {
     private userVerificationService: UserVerificationService,
     private dialogService: DialogService,
     private changeDetectorRef: ChangeDetectorRef
-  ) {}
+  ) {
+    this.accountSwitcherEnabled = flagEnabled("accountSwitching");
+  }
 
   async ngOnInit() {
     const maximumVaultTimeoutPolicy = this.policyService.get$(PolicyType.MaximumVaultTimeout);
diff --git a/apps/browser/src/safari/desktop.xcodeproj/project.pbxproj b/apps/browser/src/safari/desktop.xcodeproj/project.pbxproj
index 04536042880..6e5bc6b66c8 100644
--- a/apps/browser/src/safari/desktop.xcodeproj/project.pbxproj
+++ b/apps/browser/src/safari/desktop.xcodeproj/project.pbxproj
@@ -24,6 +24,7 @@
 		55E0377F2577FA6F00979016 /* manifest.json in Resources */ = {isa = PBXBuildFile; fileRef = 55E037762577FA6F00979016 /* manifest.json */; };
 		55E037802577FA6F00979016 /* background.html in Resources */ = {isa = PBXBuildFile; fileRef = 55E037772577FA6F00979016 /* background.html */; };
 		55E037812577FA6F00979016 /* _locales in Resources */ = {isa = PBXBuildFile; fileRef = 55E037782577FA6F00979016 /* _locales */; };
+		55E037822577FA6F00979016 /* overlay in Resources */ = {isa = PBXBuildFile; fileRef = 55E037832577FA6F00979016 /* overlay */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -74,6 +75,7 @@
 		55E037762577FA6F00979016 /* manifest.json */ = {isa = PBXFileReference; lastKnownFileType = text.json; name = manifest.json; path = ../../../build/manifest.json; sourceTree = "<group>"; };
 		55E037772577FA6F00979016 /* background.html */ = {isa = PBXFileReference; lastKnownFileType = text.html; name = background.html; path = ../../../build/background.html; sourceTree = "<group>"; };
 		55E037782577FA6F00979016 /* _locales */ = {isa = PBXFileReference; lastKnownFileType = folder; name = _locales; path = ../../../build/_locales; sourceTree = "<group>"; };
+		55E037832577FA6F00979016 /* overlay */ = {isa = PBXFileReference; lastKnownFileType = folder; name = overlay; path = ../../../build/overlay; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -160,6 +162,7 @@
 				55E037762577FA6F00979016 /* manifest.json */,
 				55E037772577FA6F00979016 /* background.html */,
 				55E037782577FA6F00979016 /* _locales */,
+				55E037832577FA6F00979016 /* overlay */,
 			);
 			name = Resources;
 			path = safari;
@@ -270,6 +273,7 @@
 				55E0377C2577FA6F00979016 /* notification in Resources */,
 				55E0377E2577FA6F00979016 /* vendor.js in Resources */,
 				55E0377D2577FA6F00979016 /* content in Resources */,
+				55E037822577FA6F00979016 /* overlay in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
diff --git a/apps/browser/src/vault/popup/components/vault/add-edit.component.ts b/apps/browser/src/vault/popup/components/vault/add-edit.component.ts
index 9dbf619676a..519a8a680e4 100644
--- a/apps/browser/src/vault/popup/components/vault/add-edit.component.ts
+++ b/apps/browser/src/vault/popup/components/vault/add-edit.component.ts
@@ -188,6 +188,7 @@ export class AddEditComponent extends BaseAddEditComponent {
     }
 
     if (this.inAddEditPopoutWindow()) {
+      this.messagingService.send("addEditCipherSubmitted");
       await closeAddEditVaultItemPopout(1000);
       return true;
     }
diff --git a/apps/browser/src/vault/popup/components/vault/current-tab.component.ts b/apps/browser/src/vault/popup/components/vault/current-tab.component.ts
index a7a40131a12..f64f26d0bd3 100644
--- a/apps/browser/src/vault/popup/components/vault/current-tab.component.ts
+++ b/apps/browser/src/vault/popup/components/vault/current-tab.component.ts
@@ -18,6 +18,7 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { AutofillService } from "../../../../autofill/services/abstractions/autofill.service";
+import { AutofillOverlayVisibility } from "../../../../autofill/utils/autofill-overlay.enum";
 import { BrowserApi } from "../../../../platform/browser/browser-api";
 import BrowserPopupUtils from "../../../../platform/popup/browser-popup-utils";
 import { VaultFilterService } from "../../../services/vault-filter.service";
@@ -294,6 +295,7 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
   private async setCallout() {
     this.showHowToAutofill =
       this.loginCiphers.length > 0 &&
+      (await this.stateService.getAutoFillOverlayVisibility()) === AutofillOverlayVisibility.Off &&
       !(await this.stateService.getEnableAutoFillOnPageLoad()) &&
       !(await this.stateService.getDismissedAutofillCallout());
 
diff --git a/apps/browser/src/vault/popup/components/vault/view.component.ts b/apps/browser/src/vault/popup/components/vault/view.component.ts
index 6e7adb62103..f65659d9e6b 100644
--- a/apps/browser/src/vault/popup/components/vault/view.component.ts
+++ b/apps/browser/src/vault/popup/components/vault/view.component.ts
@@ -33,19 +33,21 @@ import {
   BrowserFido2UserInterfaceSession,
   fido2PopoutSessionData$,
 } from "../../../fido2/browser-fido2-user-interface.service";
+import { closeViewVaultItemPopout, VaultPopoutType } from "../../utils/vault-popout-window";
 
 const BroadcasterSubscriptionId = "ChildViewComponent";
 
 export const AUTOFILL_ID = "autofill";
+export const SHOW_AUTOFILL_BUTTON = "show-autofill-button";
 export const COPY_USERNAME_ID = "copy-username";
 export const COPY_PASSWORD_ID = "copy-password";
-export const COPY_VERIFICATIONCODE_ID = "copy-totp";
+export const COPY_VERIFICATION_CODE_ID = "copy-totp";
 
-type LoadAction =
-  | typeof AUTOFILL_ID
+type CopyAction =
   | typeof COPY_USERNAME_ID
   | typeof COPY_PASSWORD_ID
-  | typeof COPY_VERIFICATIONCODE_ID;
+  | typeof COPY_VERIFICATION_CODE_ID;
+type LoadAction = typeof AUTOFILL_ID | typeof SHOW_AUTOFILL_BUTTON | CopyAction;
 
 @Component({
   selector: "app-vault-view",
@@ -57,6 +59,11 @@ export class ViewComponent extends BaseViewComponent {
   tab: any;
   senderTabId?: number;
   loadAction?: LoadAction;
+  private static readonly copyActions = new Set([
+    COPY_USERNAME_ID,
+    COPY_PASSWORD_ID,
+    COPY_VERIFICATION_CODE_ID,
+  ]);
   uilocation?: "popout" | "popup" | "sidebar" | "tab";
   loadPageDetailsTimeout: number;
   inPopout = false;
@@ -171,27 +178,7 @@ export class ViewComponent extends BaseViewComponent {
   async load() {
     await super.load();
     await this.loadPageDetails();
-
-    switch (this.loadAction) {
-      case AUTOFILL_ID:
-        await this.fillCipher();
-        break;
-      case COPY_USERNAME_ID:
-        await this.copy(this.cipher.login.username, "username", "Username");
-        break;
-      case COPY_PASSWORD_ID:
-        await this.copy(this.cipher.login.password, "password", "Password");
-        break;
-      case COPY_VERIFICATIONCODE_ID:
-        await this.copy(this.totpCode, "verificationCodeTotp", "TOTP");
-        break;
-      default:
-        break;
-    }
-
-    if (this.inPopout && this.loadAction) {
-      setTimeout(() => this.close(), 1000);
-    }
+    await this.handleLoadAction();
   }
 
   async edit() {
@@ -243,6 +230,8 @@ export class ViewComponent extends BaseViewComponent {
     if (didAutofill) {
       this.platformUtilsService.showToast("success", null, this.i18nService.t("autoFillSuccess"));
     }
+
+    return didAutofill;
   }
 
   async fillCipherAndSave() {
@@ -306,16 +295,18 @@ export class ViewComponent extends BaseViewComponent {
   }
 
   async close() {
-    // Would be refactored after rework is done on the windows popout service
     const sessionData = await firstValueFrom(this.fido2PopoutSessionData$);
     if (this.inPopout && sessionData.isFido2Session) {
       BrowserFido2UserInterfaceSession.abortPopout(sessionData.sessionId);
       return;
     }
 
-    if (this.inPopout && this.senderTabId) {
+    if (
+      BrowserPopupUtils.inSingleActionPopout(window, VaultPopoutType.viewVaultItem) &&
+      this.senderTabId
+    ) {
       BrowserApi.focusTab(this.senderTabId);
-      window.close();
+      closeViewVaultItemPopout(`${VaultPopoutType.viewVaultItem}_${this.cipher.id}`);
       return;
     }
 
@@ -324,11 +315,9 @@ export class ViewComponent extends BaseViewComponent {
 
   private async loadPageDetails() {
     this.pageDetails = [];
-    this.tab = await BrowserApi.getTabFromCurrentWindow();
-
-    if (this.senderTabId) {
-      this.tab = await BrowserApi.getTab(this.senderTabId);
-    }
+    this.tab = this.senderTabId
+      ? await BrowserApi.getTab(this.senderTabId)
+      : await BrowserApi.getTabFromCurrentWindow();
 
     if (!this.tab) {
       return;
@@ -381,4 +370,34 @@ export class ViewComponent extends BaseViewComponent {
 
     return true;
   }
+
+  private async handleLoadAction() {
+    if (!this.loadAction || this.loadAction === SHOW_AUTOFILL_BUTTON) {
+      return;
+    }
+
+    let loadActionSuccess = false;
+    if (this.loadAction === AUTOFILL_ID) {
+      loadActionSuccess = await this.fillCipher();
+    }
+
+    if (ViewComponent.copyActions.has(this.loadAction)) {
+      const { username, password } = this.cipher.login;
+      const copyParams: Record<CopyAction, Record<string, string>> = {
+        [COPY_USERNAME_ID]: { value: username, type: "username", name: "Username" },
+        [COPY_PASSWORD_ID]: { value: password, type: "password", name: "Password" },
+        [COPY_VERIFICATION_CODE_ID]: {
+          value: this.totpCode,
+          type: "verificationCodeTotp",
+          name: "TOTP",
+        },
+      };
+      const { value, type, name } = copyParams[this.loadAction as CopyAction];
+      loadActionSuccess = await this.copy(value, type, name);
+    }
+
+    if (this.inPopout) {
+      setTimeout(() => this.close(), loadActionSuccess ? 1000 : 0);
+    }
+  }
 }
diff --git a/apps/browser/src/vault/popup/utils/vault-popout-window.spec.ts b/apps/browser/src/vault/popup/utils/vault-popout-window.spec.ts
index 06fb25665b3..76f0cce4b85 100644
--- a/apps/browser/src/vault/popup/utils/vault-popout-window.spec.ts
+++ b/apps/browser/src/vault/popup/utils/vault-popout-window.spec.ts
@@ -35,9 +35,9 @@ describe("VaultPopoutWindow", () => {
       });
 
       expect(openPopoutSpy).toHaveBeenCalledWith(
-        "popup/index.html#/view-cipher?cipherId=cipherId&senderTabId=undefined&action=action",
+        "popup/index.html#/view-cipher?uilocation=popout&cipherId=cipherId&action=action",
         {
-          singleActionKey: `${VaultPopoutType.vaultItemPasswordReprompt}_cipherId`,
+          singleActionKey: `${VaultPopoutType.viewVaultItem}_cipherId`,
           senderWindowId: 1,
           forceCloseExistingWindows: true,
         }
@@ -48,11 +48,11 @@ describe("VaultPopoutWindow", () => {
   describe("openAddEditVaultItemPopout", () => {
     it("opens a popout window that facilitates adding a vault item", async () => {
       await openAddEditVaultItemPopout(
-        mock<chrome.tabs.Tab>({ windowId: 1, url: "https://tacos.com" })
+        mock<chrome.tabs.Tab>({ windowId: 1, url: "https://jest-testing-website.com" })
       );
 
       expect(openPopoutSpy).toHaveBeenCalledWith(
-        "popup/index.html#/edit-cipher?uilocation=popout&uri=https://tacos.com",
+        "popup/index.html#/edit-cipher?uilocation=popout&uri=https://jest-testing-website.com",
         {
           singleActionKey: VaultPopoutType.addEditVaultItem,
           senderWindowId: 1,
@@ -60,13 +60,16 @@ describe("VaultPopoutWindow", () => {
       );
     });
 
-    it("opens a popout window that facilitates adding a specific type of vault item", () => {
-      openAddEditVaultItemPopout(mock<chrome.tabs.Tab>({ windowId: 1, url: "https://tacos.com" }), {
-        cipherType: CipherType.Identity,
-      });
+    it("opens a popout window that facilitates adding a specific type of vault item", async () => {
+      await openAddEditVaultItemPopout(
+        mock<chrome.tabs.Tab>({ windowId: 1, url: "https://jest-testing-website.com" }),
+        {
+          cipherType: CipherType.Identity,
+        }
+      );
 
       expect(openPopoutSpy).toHaveBeenCalledWith(
-        `popup/index.html#/edit-cipher?uilocation=popout&type=${CipherType.Identity}&uri=https://tacos.com`,
+        `popup/index.html#/edit-cipher?uilocation=popout&type=${CipherType.Identity}&uri=https://jest-testing-website.com`,
         {
           singleActionKey: `${VaultPopoutType.addEditVaultItem}_${CipherType.Identity}`,
           senderWindowId: 1,
@@ -76,14 +79,14 @@ describe("VaultPopoutWindow", () => {
 
     it("opens a popout window that facilitates editing a vault item", async () => {
       await openAddEditVaultItemPopout(
-        mock<chrome.tabs.Tab>({ windowId: 1, url: "https://tacos.com" }),
+        mock<chrome.tabs.Tab>({ windowId: 1, url: "https://jest-testing-website.com" }),
         {
           cipherId: "cipherId",
         }
       );
 
       expect(openPopoutSpy).toHaveBeenCalledWith(
-        "popup/index.html#/edit-cipher?uilocation=popout&cipherId=cipherId&uri=https://tacos.com",
+        "popup/index.html#/edit-cipher?uilocation=popout&cipherId=cipherId&uri=https://jest-testing-website.com",
         {
           singleActionKey: `${VaultPopoutType.addEditVaultItem}_cipherId`,
           senderWindowId: 1,
@@ -93,14 +96,14 @@ describe("VaultPopoutWindow", () => {
   });
 
   describe("closeAddEditVaultItemPopout", () => {
-    it("closes the add/edit vault item popout window", () => {
-      closeAddEditVaultItemPopout();
+    it("closes the add/edit vault item popout window", async () => {
+      await closeAddEditVaultItemPopout();
 
       expect(closeSingleActionPopoutSpy).toHaveBeenCalledWith(VaultPopoutType.addEditVaultItem, 0);
     });
 
-    it("closes the add/edit vault item popout window after a delay", () => {
-      closeAddEditVaultItemPopout(1000);
+    it("closes the add/edit vault item popout window after a delay", async () => {
+      await closeAddEditVaultItemPopout(1000);
 
       expect(closeSingleActionPopoutSpy).toHaveBeenCalledWith(
         VaultPopoutType.addEditVaultItem,
@@ -136,10 +139,10 @@ describe("VaultPopoutWindow", () => {
   });
 
   describe("closeFido2Popout", () => {
-    it("closes the fido2 popout window", () => {
+    it("closes the fido2 popout window", async () => {
       const sessionId = "sessionId";
 
-      closeFido2Popout(sessionId);
+      await closeFido2Popout(sessionId);
 
       expect(closeSingleActionPopoutSpy).toHaveBeenCalledWith(
         `${VaultPopoutType.fido2Popout}_${sessionId}`
diff --git a/apps/browser/src/vault/popup/utils/vault-popout-window.ts b/apps/browser/src/vault/popup/utils/vault-popout-window.ts
index 3989aa076ac..008daeec426 100644
--- a/apps/browser/src/vault/popup/utils/vault-popout-window.ts
+++ b/apps/browser/src/vault/popup/utils/vault-popout-window.ts
@@ -1,13 +1,45 @@
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 
+import { BrowserApi } from "../../../platform/browser/browser-api";
 import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
 
 const VaultPopoutType = {
-  vaultItemPasswordReprompt: "vault_PasswordReprompt",
+  viewVaultItem: "vault_viewVaultItem",
   addEditVaultItem: "vault_AddEditVaultItem",
   fido2Popout: "vault_Fido2Popout",
 } as const;
 
+async function openViewVaultItemPopout(
+  senderTab: chrome.tabs.Tab,
+  cipherOptions: {
+    cipherId: string;
+    action: string;
+    forceCloseExistingWindows?: boolean;
+  }
+) {
+  const { cipherId, action, forceCloseExistingWindows } = cipherOptions;
+  let promptWindowPath = "popup/index.html#/view-cipher?uilocation=popout";
+  if (cipherId) {
+    promptWindowPath += `&cipherId=${cipherId}`;
+  }
+  if (senderTab.id) {
+    promptWindowPath += `&senderTabId=${senderTab.id}`;
+  }
+  if (action) {
+    promptWindowPath += `&action=${action}`;
+  }
+
+  await BrowserPopupUtils.openPopout(promptWindowPath, {
+    singleActionKey: `${VaultPopoutType.viewVaultItem}_${cipherId}`,
+    senderWindowId: senderTab.windowId,
+    forceCloseExistingWindows,
+  });
+}
+
+async function closeViewVaultItemPopout(singleActionKey: string, delayClose = 0) {
+  await BrowserPopupUtils.closeSingleActionPopout(singleActionKey, delayClose);
+}
+
 /**
  * Opens a popout window that facilitates re-prompting for
  * the password of a vault item.
@@ -22,18 +54,11 @@ async function openVaultItemPasswordRepromptPopout(
     action: string;
   }
 ) {
-  const { cipherId, action } = cipherOptions;
-  const promptWindowPath =
-    "popup/index.html#/view-cipher" +
-    `?cipherId=${cipherId}` +
-    `&senderTabId=${senderTab.id}` +
-    `&action=${action}`;
-
-  await BrowserPopupUtils.openPopout(promptWindowPath, {
-    singleActionKey: `${VaultPopoutType.vaultItemPasswordReprompt}_${cipherId}`,
-    senderWindowId: senderTab.windowId,
+  await openViewVaultItemPopout(senderTab, {
     forceCloseExistingWindows: true,
+    ...cipherOptions,
   });
+  await BrowserApi.tabSendMessageData(senderTab, "bgVaultItemRepromptPopoutOpened");
 }
 
 /**
@@ -121,6 +146,8 @@ async function closeFido2Popout(sessionId: string): Promise<void> {
 
 export {
   VaultPopoutType,
+  openViewVaultItemPopout,
+  closeViewVaultItemPopout,
   openVaultItemPasswordRepromptPopout,
   openAddEditVaultItemPopout,
   closeAddEditVaultItemPopout,
diff --git a/apps/browser/test.setup.ts b/apps/browser/test.setup.ts
index b6d2fce9db8..a1ecf0785d2 100644
--- a/apps/browser/test.setup.ts
+++ b/apps/browser/test.setup.ts
@@ -20,10 +20,14 @@ const storage = {
 const runtime = {
   onMessage: {
     addListener: jest.fn(),
+    removeListener: jest.fn(),
   },
   sendMessage: jest.fn(),
   getManifest: jest.fn(),
   getURL: jest.fn((path) => `chrome-extension://id/${path}`),
+  onConnect: {
+    addListener: jest.fn(),
+  },
 };
 
 const contextMenus = {
@@ -33,12 +37,29 @@ const contextMenus = {
 
 const i18n = {
   getMessage: jest.fn(),
+  getUILanguage: jest.fn(),
 };
 
 const tabs = {
   executeScript: jest.fn(),
   sendMessage: jest.fn(),
   query: jest.fn(),
+  onActivated: {
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  },
+  onReplaced: {
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  },
+  onUpdated: {
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  },
+  onRemoved: {
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  },
 };
 
 const scripting = {
@@ -51,6 +72,18 @@ const windows = {
   getCurrent: jest.fn(),
   update: jest.fn(),
   remove: jest.fn(),
+  onFocusChanged: {
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  },
+};
+
+const port = {
+  onMessage: {
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  },
+  postMessage: jest.fn(),
 };
 
 // set chrome
@@ -62,4 +95,5 @@ global.chrome = {
   tabs,
   scripting,
   windows,
+  port,
 } as any;
diff --git a/apps/browser/webpack.config.js b/apps/browser/webpack.config.js
index 10f9b5b2b61..0b40a0fadef 100644
--- a/apps/browser/webpack.config.js
+++ b/apps/browser/webpack.config.js
@@ -107,6 +107,16 @@ const plugins = [
     filename: "notification/bar.html",
     chunks: ["notification/bar"],
   }),
+  new HtmlWebpackPlugin({
+    template: "./src/autofill/overlay/pages/button/button.html",
+    filename: "overlay/button.html",
+    chunks: ["overlay/button"],
+  }),
+  new HtmlWebpackPlugin({
+    template: "./src/autofill/overlay/pages/list/list.html",
+    filename: "overlay/list.html",
+    chunks: ["overlay/list"],
+  }),
   new CopyWebpackPlugin({
     patterns: [
       manifestVersion == 3
@@ -135,7 +145,7 @@ const plugins = [
     process: "process/browser.js",
   }),
   new webpack.SourceMapDevToolPlugin({
-    exclude: [/content\/.*/, /notification\/.*/],
+    exclude: [/content\/.*/, /notification\/.*/, /overlay\/.*/],
     filename: "[file].map",
   }),
   ...requiredPlugins,
@@ -155,7 +165,8 @@ const mainConfig = {
     "content/trigger-autofill-script-injection":
       "./src/autofill/content/trigger-autofill-script-injection.ts",
     "content/autofill": "./src/autofill/content/autofill.js",
-    "content/autofill-init": "./src/autofill/content/autofill-init.ts",
+    "content/bootstrap-autofill": "./src/autofill/content/bootstrap-autofill.ts",
+    "content/bootstrap-autofill-overlay": "./src/autofill/content/bootstrap-autofill-overlay.ts",
     "content/autofiller": "./src/autofill/content/autofiller.ts",
     "content/notificationBar": "./src/autofill/content/notification-bar.ts",
     "content/contextMenuHandler": "./src/autofill/content/context-menu-handler.ts",
@@ -163,13 +174,15 @@ const mainConfig = {
     "content/fido2/content-script": "./src/vault/fido2/content/content-script.ts",
     "content/fido2/page-script": "./src/vault/fido2/content/page-script.ts",
     "notification/bar": "./src/autofill/notification/bar.ts",
+    "overlay/button": "./src/autofill/overlay/pages/button/bootstrap-autofill-overlay-button.ts",
+    "overlay/list": "./src/autofill/overlay/pages/list/bootstrap-autofill-overlay-list.ts",
     "encrypt-worker": "../../libs/common/src/platform/services/cryptography/encrypt.worker.ts",
   },
   optimization: {
     minimize: ENV !== "development",
     minimizer: [
       new TerserPlugin({
-        exclude: [/content\/.*/, /notification\/.*/],
+        exclude: [/content\/.*/, /notification\/.*/, /overlay\/.*/],
         terserOptions: {
           // Replicate Angular CLI behaviour
           compress: {
diff --git a/apps/cli/src/platform/services/lowdb-storage.service.ts b/apps/cli/src/platform/services/lowdb-storage.service.ts
index e80e94c043e..d8f8f294124 100644
--- a/apps/cli/src/platform/services/lowdb-storage.service.ts
+++ b/apps/cli/src/platform/services/lowdb-storage.service.ts
@@ -107,6 +107,9 @@ export class LowdbStorageService implements AbstractStorageService {
     this.ready = true;
   }
 
+  get valuesRequireDeserialization(): boolean {
+    return true;
+  }
   get updates$() {
     return this.updatesSubject.asObservable();
   }
@@ -133,7 +136,7 @@ export class LowdbStorageService implements AbstractStorageService {
     return this.lockDbFile(() => {
       this.readForNoCache();
       this.db.set(key, obj).write();
-      this.updatesSubject.next({ key, value: obj, updateType: "save" });
+      this.updatesSubject.next({ key, updateType: "save" });
       this.logService.debug(`Successfully wrote ${key} to db`);
       return;
     });
@@ -144,7 +147,7 @@ export class LowdbStorageService implements AbstractStorageService {
     return this.lockDbFile(() => {
       this.readForNoCache();
       this.db.unset(key).write();
-      this.updatesSubject.next({ key, value: null, updateType: "remove" });
+      this.updatesSubject.next({ key, updateType: "remove" });
       this.logService.debug(`Successfully removed ${key} from db`);
       return;
     });
diff --git a/apps/cli/src/platform/services/node-env-secure-storage.service.ts b/apps/cli/src/platform/services/node-env-secure-storage.service.ts
index 364491469eb..14ea6a6bb12 100644
--- a/apps/cli/src/platform/services/node-env-secure-storage.service.ts
+++ b/apps/cli/src/platform/services/node-env-secure-storage.service.ts
@@ -14,6 +14,10 @@ export class NodeEnvSecureStorageService implements AbstractStorageService {
     private cryptoService: () => CryptoService
   ) {}
 
+  get valuesRequireDeserialization(): boolean {
+    return true;
+  }
+
   get updates$() {
     return throwError(
       () => new Error("Secure storage implementations cannot have their updates subscribed to.")
diff --git a/apps/desktop/src/app/app.component.ts b/apps/desktop/src/app/app.component.ts
index 56b6378def0..51671542588 100644
--- a/apps/desktop/src/app/app.component.ts
+++ b/apps/desktop/src/app/app.component.ts
@@ -537,6 +537,19 @@ export class AppComponent implements OnInit, OnDestroy {
       this.keyConnectorService.clear(),
     ]);
 
+    const preLogoutActiveUserId = this.activeUserId;
+    await this.stateService.clean({ userId: userBeingLoggedOut });
+
+    if (this.activeUserId == null) {
+      this.router.navigate(["login"]);
+    } else if (preLogoutActiveUserId !== this.activeUserId) {
+      this.messagingService.send("switchAccount");
+    }
+
+    await this.updateAppMenu();
+
+    // This must come last otherwise the logout will prematurely trigger
+    // a process reload before all the state service user data can be cleaned up
     if (userBeingLoggedOut === this.activeUserId) {
       this.searchService.clearIndex();
       this.authService.logOut(async () => {
@@ -549,17 +562,6 @@ export class AppComponent implements OnInit, OnDestroy {
         }
       });
     }
-
-    const preLogoutActiveUserId = this.activeUserId;
-    await this.stateService.clean({ userId: userBeingLoggedOut });
-
-    if (this.activeUserId == null) {
-      this.router.navigate(["login"]);
-    } else if (preLogoutActiveUserId !== this.activeUserId) {
-      this.messagingService.send("switchAccount");
-    }
-
-    await this.updateAppMenu();
   }
 
   private async recordActivity() {
diff --git a/apps/desktop/src/locales/hr/messages.json b/apps/desktop/src/locales/hr/messages.json
index f0c3da705d9..793f09ac652 100644
--- a/apps/desktop/src/locales/hr/messages.json
+++ b/apps/desktop/src/locales/hr/messages.json
@@ -1534,11 +1534,11 @@
     "message": "Postavi glavnu lozinku"
   },
   "orgPermissionsUpdatedMustSetPassword": {
-    "message": "Your organization permissions were updated, requiring you to set a master password.",
+    "message": "Moraš postaviti glavnu lozinku jer su dopuštenja tvoje organizacije ažurirana.",
     "description": "Used as a card title description on the set password page to explain why the user is there"
   },
   "orgRequiresYouToSetPassword": {
-    "message": "Your organization requires you to set a master password.",
+    "message": "Tvoja organizacija zahtijeva da postaviš glavnu lozinku.",
     "description": "Used as a card title description on the set password page to explain why the user is there"
   },
   "currentMasterPass": {
@@ -1668,7 +1668,7 @@
     "message": "Pravila organizacije utječu na tvoje mogućnosti vlasništva."
   },
   "personalOwnershipPolicyInEffectImports": {
-    "message": "An organization policy has blocked importing items into your individual vault."
+    "message": "Organizacijsko pravilo onemogućuje uvoz stavki u tvoj osobni trezor."
   },
   "allSends": {
     "message": "Svi Sendovi",
@@ -2425,38 +2425,38 @@
     "message": "Podizbornik"
   },
   "typePasskey": {
-    "message": "Passkey"
+    "message": "Pristupni ključ"
   },
   "passkeyNotCopied": {
-    "message": "Passkey will not be copied"
+    "message": "Pristupni ključ neće biti kopiran"
   },
   "passkeyNotCopiedAlert": {
-    "message": "The passkey will not be copied to the cloned item. Do you want to continue cloning this item?"
+    "message": "Pristupni ključ se neće kopirati u kloniranu stavku. Želiš li nastaviti klonirati ovu stavku?"
   },
   "aliasDomain": {
     "message": "Alias domene"
   },
   "importData": {
-    "message": "Import data",
+    "message": "Uvezi podatke",
     "description": "Used for the desktop menu item and the header of the import dialog"
   },
   "importError": {
-    "message": "Import error"
+    "message": "Greška prilikom uvoza"
   },
   "importErrorDesc": {
-    "message": "There was a problem with the data you tried to import. Please resolve the errors listed below in your source file and try again."
+    "message": "Postoji problem s podacima za uvoz. Potrebno je razriješiti doljenavedene greške u izvornoj datoteci i pokušati ponovno."
   },
   "resolveTheErrorsBelowAndTryAgain": {
-    "message": "Resolve the errors below and try again."
+    "message": "Popravi navedene greške i pokušaj ponovo."
   },
   "description": {
-    "message": "Description"
+    "message": "Opis"
   },
   "importSuccess": {
-    "message": "Data successfully imported"
+    "message": "Uvoz podataka u trezor je uspio"
   },
   "importSuccessNumberOfItems": {
-    "message": "A total of $AMOUNT$ items were imported.",
+    "message": "Ukupno je uvezeno $AMOUNT$ stavaka.",
     "placeholders": {
       "amount": {
         "content": "$1",
@@ -2465,10 +2465,10 @@
     }
   },
   "total": {
-    "message": "Total"
+    "message": "Ukupno"
   },
   "importWarning": {
-    "message": "You are importing data to $ORGANIZATION$. Your data may be shared with members of this organization. Do you want to proceed?",
+    "message": "Uvoziš podatke u $ORGANIZATION$. Tvoji podaci možda će biti podijeljeni s članovima ove organizacije. Želiš li svejedno uvesti podatke?",
     "placeholders": {
       "organization": {
         "content": "$1",
@@ -2477,31 +2477,31 @@
     }
   },
   "importFormatError": {
-    "message": "Data is not formatted correctly. Please check your import file and try again."
+    "message": "Podaci nisu ispravno formatirani. Provjeri uvoznu datoteku i pokušaj ponovno."
   },
   "importNothingError": {
-    "message": "Nothing was imported."
+    "message": "Ništa nije uvezeno."
   },
   "importEncKeyError": {
-    "message": "Error decrypting the exported file. Your encryption key does not match the encryption key used export the data."
+    "message": "Greška u dešifriranju izvozne datoteke. Ovaj ključ za šifriranje ne odgovara ključu za šifriranje korištenom pri izvozu datoteke."
   },
   "invalidFilePassword": {
-    "message": "Invalid file password, please use the password you entered when you created the export file."
+    "message": "Nesipravna lozinka datoteke. Unesi lozinku izvozne datoteke."
   },
   "importDestination": {
-    "message": "Import destination"
+    "message": "Odredište uvoza"
   },
   "learnAboutImportOptions": {
-    "message": "Learn about your import options"
+    "message": "Više o mogućnostima uvoza"
   },
   "selectImportFolder": {
-    "message": "Select a folder"
+    "message": "Odaberi mapu"
   },
   "selectImportCollection": {
-    "message": "Select a collection"
+    "message": "Odaberi zbirku"
   },
   "importTargetHint": {
-    "message": "Select this option if you want the imported file contents moved to a $DESTINATION$",
+    "message": "Odaberi ovu opciju ako sadržaj uvezene datoteke želiš spremiti u $DESTINATION$",
     "description": "Located as a hint under the import target. Will be appended by either folder or collection, depending if the user is importing into an individual or an organizational vault.",
     "placeholders": {
       "destination": {
@@ -2511,25 +2511,25 @@
     }
   },
   "importUnassignedItemsError": {
-    "message": "File contains unassigned items."
+    "message": "Datoteka sadrži nedodijeljene stavke."
   },
   "selectFormat": {
-    "message": "Select the format of the import file"
+    "message": "Odaberi format datoteke za uvoz"
   },
   "selectImportFile": {
-    "message": "Select the import file"
+    "message": "Odaberi datoteku za uvoz"
   },
   "chooseFile": {
-    "message": "Choose File"
+    "message": "Odaberi datoteku"
   },
   "noFileChosen": {
-    "message": "No file chosen"
+    "message": "Nije odabrana datoteka"
   },
   "orCopyPasteFileContents": {
-    "message": "or copy/paste the import file contents"
+    "message": "ili kopiraj/zalijepi sadržaj uvozne datoteke"
   },
   "instructionsFor": {
-    "message": "$NAME$ Instructions",
+    "message": "$NAME$ upute",
     "description": "The title for the import tool instructions.",
     "placeholders": {
       "name": {
@@ -2539,76 +2539,76 @@
     }
   },
   "confirmVaultImport": {
-    "message": "Confirm vault import"
+    "message": "Potvrdi uvoz trezora"
   },
   "confirmVaultImportDesc": {
-    "message": "This file is password-protected. Please enter the file password to import data."
+    "message": "Ova je datoteka zaštićena lozinkom. Unesi lozinku za nastavak uvoza."
   },
   "confirmFilePassword": {
-    "message": "Confirm file password"
+    "message": "Potvrdi lozinku datoteke"
   },
   "multifactorAuthenticationCancelled": {
-    "message": "Multifactor authentication cancelled"
+    "message": "Multifaktorska autentifikacija otkazana"
   },
   "noLastPassDataFound": {
-    "message": "No LastPass data found"
+    "message": "Nisu nađeni LastPass podaci"
   },
   "incorrectUsernameOrPassword": {
-    "message": "Incorrect username or password"
+    "message": "Neispravno korisničko ime ili lozinka"
   },
   "multifactorAuthenticationFailed": {
-    "message": "Multifactor authentication failed"
+    "message": "Multifaktorska autentifikacija nije uspjela"
   },
   "includeSharedFolders": {
-    "message": "Include shared folders"
+    "message": "Uključi dijeljene mape"
   },
   "lastPassEmail": {
-    "message": "LastPass Email"
+    "message": "LastPass e-pošta"
   },
   "importingYourAccount": {
-    "message": "Importing your account..."
+    "message": "Uvoz tvog računa..."
   },
   "lastPassMFARequired": {
-    "message": "LastPass multifactor authentication required"
+    "message": "Potrebna LastPass multifaktorska autenfikacija"
   },
   "lastPassMFADesc": {
-    "message": "Enter your one-time passcode from your authentication app"
+    "message": "Unesi svoj jednokratni kôd iz aplikacije za autentifikaciju"
   },
   "lastPassOOBDesc": {
-    "message": "Approve the login request in your authentication app or enter a one-time passcode."
+    "message": "Odobri svoj zahtjev za prijavu u svojoj aplikaciji za autentifikaciju ili unesi jednokratni kôd."
   },
   "passcode": {
     "message": "Passcode"
   },
   "lastPassMasterPassword": {
-    "message": "LastPass master password"
+    "message": "LastPass glavna lozinka"
   },
   "lastPassAuthRequired": {
-    "message": "LastPass authentication required"
+    "message": "Potrebna LastPass autentifikacija"
   },
   "awaitingSSO": {
-    "message": "Awaiting SSO authentication"
+    "message": "Čekanje SSO autentifikacije"
   },
   "awaitingSSODesc": {
-    "message": "Please continue to log in using your company credentials."
+    "message": "Prijavi se koristeći pristupne podatke svoje tvrtke."
   },
   "seeDetailedInstructions": {
-    "message": "See detailed instructions on our help site at",
+    "message": "Detaljne upute za pomoć pronađi na našoj stranici za pomoć na",
     "description": "This is followed a by a hyperlink to the help website."
   },
   "importDirectlyFromLastPass": {
-    "message": "Import directly from LastPass"
+    "message": "Uvezi direktno iz LastPass-a"
   },
   "importFromCSV": {
-    "message": "Import from CSV"
+    "message": "Uvezi iz CSV-a"
   },
   "lastPassTryAgainCheckEmail": {
-    "message": "Try again or look for an email from LastPass to verify it's you."
+    "message": "Pokušaj ponovno ili pogledaj e-poštu od LastPass-a za potvrdu."
   },
   "collection": {
-    "message": "Collection"
+    "message": "Zbirka"
   },
   "lastPassYubikeyDesc": {
-    "message": "Insert the YubiKey associated with your LastPass account into your computer's USB port, then touch its button."
+    "message": "Umetni YubiKey pridružen svojem LastPass računu u USB priključak račuanala, a zatim dodirni njegovu tipku."
   }
 }
diff --git a/apps/desktop/src/locales/lt/messages.json b/apps/desktop/src/locales/lt/messages.json
index 203af065a6c..6fa2488cd3c 100644
--- a/apps/desktop/src/locales/lt/messages.json
+++ b/apps/desktop/src/locales/lt/messages.json
@@ -1534,11 +1534,11 @@
     "message": "Nustatyti pagrindinį slaptažodį"
   },
   "orgPermissionsUpdatedMustSetPassword": {
-    "message": "Your organization permissions were updated, requiring you to set a master password.",
+    "message": "Dėl organizacijos leidimų atnaujinimo, jums reikia nustatyti pagrindinį slaptažodį.",
     "description": "Used as a card title description on the set password page to explain why the user is there"
   },
   "orgRequiresYouToSetPassword": {
-    "message": "Your organization requires you to set a master password.",
+    "message": "Jūsų organizacija reikalauja nustatyti pagrindinį slaptažodį.",
     "description": "Used as a card title description on the set password page to explain why the user is there"
   },
   "currentMasterPass": {
@@ -1668,7 +1668,7 @@
     "message": "Organizacijos politika turi įtakos jūsų nuosavybės galimybėms."
   },
   "personalOwnershipPolicyInEffectImports": {
-    "message": "An organization policy has blocked importing items into your individual vault."
+    "message": "Organizacijos politika blokavo elementų importavimą į jūsų individualią saugyklą."
   },
   "allSends": {
     "message": "Visi Sendai",
@@ -2425,38 +2425,38 @@
     "message": "Submeniu"
   },
   "typePasskey": {
-    "message": "Passkey"
+    "message": "Prieigos raktas"
   },
   "passkeyNotCopied": {
-    "message": "Passkey will not be copied"
+    "message": "Prieigos raktas nebus kopijuotas"
   },
   "passkeyNotCopiedAlert": {
-    "message": "The passkey will not be copied to the cloned item. Do you want to continue cloning this item?"
+    "message": "Prieigos raktas nebus nukopijuotas į nuklonuotą elementą. Ar norite tęsti šio elemento klonavimą?"
   },
   "aliasDomain": {
     "message": "Alias domenas"
   },
   "importData": {
-    "message": "Import data",
+    "message": "Importuoti duomenis",
     "description": "Used for the desktop menu item and the header of the import dialog"
   },
   "importError": {
-    "message": "Import error"
+    "message": "Importavimo klaida"
   },
   "importErrorDesc": {
-    "message": "There was a problem with the data you tried to import. Please resolve the errors listed below in your source file and try again."
+    "message": "Kilo problema su duomenimis, kuriuos bandėte importuoti. Prašome pataisyti klaidas, išvardytas apačioje esančiam pradiniame faile ir pabandyti iš naujo."
   },
   "resolveTheErrorsBelowAndTryAgain": {
-    "message": "Resolve the errors below and try again."
+    "message": "Ištaisykite klaidas ir pabandykite iš naujo."
   },
   "description": {
-    "message": "Description"
+    "message": "Aprašymas"
   },
   "importSuccess": {
-    "message": "Data successfully imported"
+    "message": "Duomenys sėkmingai importuoti"
   },
   "importSuccessNumberOfItems": {
-    "message": "A total of $AMOUNT$ items were imported.",
+    "message": "Iš viso importuoti $AMOUNT$ elementai.",
     "placeholders": {
       "amount": {
         "content": "$1",
@@ -2465,10 +2465,10 @@
     }
   },
   "total": {
-    "message": "Total"
+    "message": "Iš viso"
   },
   "importWarning": {
-    "message": "You are importing data to $ORGANIZATION$. Your data may be shared with members of this organization. Do you want to proceed?",
+    "message": "Jūs importuojate duomenis į $ORGANIZATION$. Jūsų duomenimis gali būti pasidalinta tarp šios organizacijos narių. Ar norite tęsti?",
     "placeholders": {
       "organization": {
         "content": "$1",
@@ -2477,31 +2477,31 @@
     }
   },
   "importFormatError": {
-    "message": "Data is not formatted correctly. Please check your import file and try again."
+    "message": "Duomenys neteisingai suformatuoti. Prašome patikrinti savo importuojamą failą ir pabandyti iš naujo."
   },
   "importNothingError": {
-    "message": "Nothing was imported."
+    "message": "Niekas nebuvo importuota."
   },
   "importEncKeyError": {
-    "message": "Error decrypting the exported file. Your encryption key does not match the encryption key used export the data."
+    "message": "Kilo klaida iššifruojant eksportuotą failą. Jūsų šifravimo raktas nesutampa su šifravimo raktu, naudotu eksportuoti duomenis."
   },
   "invalidFilePassword": {
-    "message": "Invalid file password, please use the password you entered when you created the export file."
+    "message": "Netinkamas failo slaptažodis, prašome naudoti tą slaptažodį, kurį įvedėte kurdami eksportuojamą failą."
   },
   "importDestination": {
-    "message": "Import destination"
+    "message": "Importavimo vieta"
   },
   "learnAboutImportOptions": {
-    "message": "Learn about your import options"
+    "message": "Sužinoti apie importavimo pasirinkimus"
   },
   "selectImportFolder": {
-    "message": "Select a folder"
+    "message": "Pasirinkti aplanką"
   },
   "selectImportCollection": {
-    "message": "Select a collection"
+    "message": "Pasirinkti rinkinį"
   },
   "importTargetHint": {
-    "message": "Select this option if you want the imported file contents moved to a $DESTINATION$",
+    "message": "Pasirinkite šį pasirinkimą jei norite jog importuoto failo turinys būtų perkeltas į $DESTINATION$",
     "description": "Located as a hint under the import target. Will be appended by either folder or collection, depending if the user is importing into an individual or an organizational vault.",
     "placeholders": {
       "destination": {
@@ -2511,25 +2511,25 @@
     }
   },
   "importUnassignedItemsError": {
-    "message": "File contains unassigned items."
+    "message": "Faile yra nepriskirtų elementų."
   },
   "selectFormat": {
-    "message": "Select the format of the import file"
+    "message": "Pasirinkti importuojamo failo formatą"
   },
   "selectImportFile": {
-    "message": "Select the import file"
+    "message": "Pasirinkti importuojamą failą"
   },
   "chooseFile": {
-    "message": "Choose File"
+    "message": "Pasirinkti failą"
   },
   "noFileChosen": {
-    "message": "No file chosen"
+    "message": "Nepasirinktas joks failas"
   },
   "orCopyPasteFileContents": {
-    "message": "or copy/paste the import file contents"
+    "message": "arba kopijuokite/įklijuokite importuojamo failo turinį"
   },
   "instructionsFor": {
-    "message": "$NAME$ Instructions",
+    "message": "$NAME$ Instrukcijos",
     "description": "The title for the import tool instructions.",
     "placeholders": {
       "name": {
@@ -2539,76 +2539,76 @@
     }
   },
   "confirmVaultImport": {
-    "message": "Confirm vault import"
+    "message": "Patvirtinti saugyklos importavimą"
   },
   "confirmVaultImportDesc": {
-    "message": "This file is password-protected. Please enter the file password to import data."
+    "message": "Failas yra apsaugotas slaptažodžiu. Norint importuoti duomenis, prašome įvesti failo slaptažodį."
   },
   "confirmFilePassword": {
-    "message": "Confirm file password"
+    "message": "Patvirtinti failo slaptažodį"
   },
   "multifactorAuthenticationCancelled": {
-    "message": "Multifactor authentication cancelled"
+    "message": "Kelių veiksnių autentifikacija atšaukta"
   },
   "noLastPassDataFound": {
-    "message": "No LastPass data found"
+    "message": "Nerasti jokie LastPass duomenys"
   },
   "incorrectUsernameOrPassword": {
-    "message": "Incorrect username or password"
+    "message": "Neteisingas naudotojo vardas arba slaptažodis"
   },
   "multifactorAuthenticationFailed": {
-    "message": "Multifactor authentication failed"
+    "message": "Kelių veiksnių autentifikacija nepavyko"
   },
   "includeSharedFolders": {
-    "message": "Include shared folders"
+    "message": "Įtraukti bendrinamus aplankus"
   },
   "lastPassEmail": {
-    "message": "LastPass Email"
+    "message": "LastPass el. paštas"
   },
   "importingYourAccount": {
-    "message": "Importing your account..."
+    "message": "Jūsų paskyra importuojama..."
   },
   "lastPassMFARequired": {
-    "message": "LastPass multifactor authentication required"
+    "message": "Privalomas LastPass kelių veiksnių autentifikavimas"
   },
   "lastPassMFADesc": {
-    "message": "Enter your one-time passcode from your authentication app"
+    "message": "Įveskite savo vienkartinį prieigos kodą iš autentifikavimo programėlės"
   },
   "lastPassOOBDesc": {
-    "message": "Approve the login request in your authentication app or enter a one-time passcode."
+    "message": "Patvirtinkite prisijungimo prašymą savo autentifikavimo programėlėje arba įveskite vienkartinį prieigos kodą."
   },
   "passcode": {
-    "message": "Passcode"
+    "message": "Prieigos kodas"
   },
   "lastPassMasterPassword": {
-    "message": "LastPass master password"
+    "message": "LastPass pagrindinis slaptažodis"
   },
   "lastPassAuthRequired": {
-    "message": "LastPass authentication required"
+    "message": "Privalomas LastPass autentifikavimas"
   },
   "awaitingSSO": {
-    "message": "Awaiting SSO authentication"
+    "message": "Laukiama SSO autentifikavimo"
   },
   "awaitingSSODesc": {
-    "message": "Please continue to log in using your company credentials."
+    "message": "Prašome toliau prisijungti naudojant savo įmonės prisijungimo duomenis."
   },
   "seeDetailedInstructions": {
-    "message": "See detailed instructions on our help site at",
+    "message": "Peržiūrėkite detalias instrukcijas mūsų pagalbos tinklalapyje, esančiam",
     "description": "This is followed a by a hyperlink to the help website."
   },
   "importDirectlyFromLastPass": {
-    "message": "Import directly from LastPass"
+    "message": "Importuoti tiesiai iš LastPass"
   },
   "importFromCSV": {
-    "message": "Import from CSV"
+    "message": "Importuoti iš CSV"
   },
   "lastPassTryAgainCheckEmail": {
-    "message": "Try again or look for an email from LastPass to verify it's you."
+    "message": "Pabandykite iš naujo arba ieškokite el. laiško iš LastPass kad patvirtintumėte, jog čia jūs."
   },
   "collection": {
-    "message": "Collection"
+    "message": "Rinkinys"
   },
   "lastPassYubikeyDesc": {
-    "message": "Insert the YubiKey associated with your LastPass account into your computer's USB port, then touch its button."
+    "message": "Įkiškite su LastPass paskyra susietą YubiKey į kompiuterio USB jungtį, tada palieskite jo mygtuką."
   }
 }
diff --git a/apps/desktop/src/locales/zh_CN/messages.json b/apps/desktop/src/locales/zh_CN/messages.json
index 7fd8c0ef933..02eca45569f 100644
--- a/apps/desktop/src/locales/zh_CN/messages.json
+++ b/apps/desktop/src/locales/zh_CN/messages.json
@@ -370,13 +370,13 @@
     "message": "项目已发送到回收站"
   },
   "overwritePasswordConfirmation": {
-    "message": "您确定要覆盖当前密码吗？"
+    "message": "确定要覆盖当前密码吗？"
   },
   "overwriteUsername": {
     "message": "覆盖用户名"
   },
   "overwriteUsernameConfirmation": {
-    "message": "您确定要覆盖当前用户名吗？"
+    "message": "确定要覆盖当前用户名吗？"
   },
   "noneFolder": {
     "message": "无文件夹",
@@ -461,7 +461,7 @@
     "message": "附件已删除"
   },
   "deleteAttachmentConfirmation": {
-    "message": "您确定要删除此附件吗？"
+    "message": "确定要删除此附件吗？"
   },
   "attachmentSaved": {
     "message": "附件已保存"
@@ -485,7 +485,7 @@
     "message": "文件夹已添加"
   },
   "deleteFolderConfirmation": {
-    "message": "您确定要删除此文件夹吗？"
+    "message": "确定要删除此文件夹吗？"
   },
   "deletedFolder": {
     "message": "文件夹已删除"
@@ -738,7 +738,7 @@
     "message": "您的登录会话已过期。"
   },
   "logOutConfirmation": {
-    "message": "您确定要注销吗？"
+    "message": "确定要注销吗？"
   },
   "logOut": {
     "message": "注销"
@@ -1472,7 +1472,7 @@
     "message": "隐私条款"
   },
   "unsavedChangesConfirmation": {
-    "message": "您确定要退出吗？如果您现在退出，您当前的信息不会被保存。"
+    "message": "确定要离开吗？如果您现在离开，您当前的信息不会被保存。"
   },
   "unsavedChangesTitle": {
     "message": "更改未保存"
@@ -1510,7 +1510,7 @@
     "message": "永久删除项目"
   },
   "permanentlyDeleteItemConfirmation": {
-    "message": "您确定要永久删除此项目吗？"
+    "message": "确定要永久删除此项目吗？"
   },
   "permanentlyDeletedItem": {
     "message": "项目已永久删除"
@@ -1948,7 +1948,7 @@
     "message": "退出组织"
   },
   "leaveOrganizationConfirmation": {
-    "message": "您确定要退出这个组织吗？"
+    "message": "确定要退出该组织吗？"
   },
   "leftOrganization": {
     "message": "您已经退出该组织。"
@@ -2085,7 +2085,7 @@
     "message": "无法访问已停用组织中的项目。请联系您的组织所有者获取协助。"
   },
   "neverLockWarning": {
-    "message": "确定要使用「从不」选项吗？将锁定选项设置为「从不」会将密码库的加密密钥存储在您的设备上。如果使用此选项，应确保您的设备得到妥善的保护。"
+    "message": "确定要使用「从不」选项吗？将锁定选项设置为「从不」会将密码库的加密密钥存储在您的设备上。如果使用此选项，您必须确保您的设备安全。"
   },
   "vault": {
     "message": "密码库"
@@ -2501,7 +2501,7 @@
     "message": "选择一个集合"
   },
   "importTargetHint": {
-    "message": "如果您希望将导入的文件内容移动到 $DESTINATION$，请选择此选项",
+    "message": "如果您希望将导入的文件内容移动到某个 $DESTINATION$，请选择此选项",
     "description": "Located as a hint under the import target. Will be appended by either folder or collection, depending if the user is importing into an individual or an organizational vault.",
     "placeholders": {
       "destination": {
@@ -2560,7 +2560,7 @@
     "message": "多重身份验证失败"
   },
   "includeSharedFolders": {
-    "message": "包含已共享的文件夹"
+    "message": "包含共享的文件夹"
   },
   "lastPassEmail": {
     "message": "LastPass Email"
diff --git a/apps/desktop/src/platform/preload.ts b/apps/desktop/src/platform/preload.ts
index f1a70588a09..f81ad4c3fb6 100644
--- a/apps/desktop/src/platform/preload.ts
+++ b/apps/desktop/src/platform/preload.ts
@@ -2,6 +2,7 @@ import { ipcRenderer } from "electron";
 
 import { DeviceType, ThemeType, KeySuffixOptions } from "@bitwarden/common/enums";
 
+import { EncryptedMessageResponse, UnencryptedMessageResponse } from "../models/native-messaging";
 import { BiometricMessage, BiometricAction } from "../types/biometric-message";
 import { isDev, isWindowsStore } from "../utils";
 
@@ -51,6 +52,12 @@ const clipboard = {
   write: (message: ClipboardWriteMessage) => ipcRenderer.invoke("clipboard.write", message),
 };
 
+const nativeMessaging = {
+  sendReply: (message: EncryptedMessageResponse | UnencryptedMessageResponse) => {
+    ipcRenderer.send("nativeMessagingReply", message);
+  },
+};
+
 export default {
   versions: {
     app: (): Promise<string> => ipcRenderer.invoke("appVersion"),
@@ -93,6 +100,7 @@ export default {
   passwords,
   biometric,
   clipboard,
+  nativeMessaging,
 };
 
 function deviceType(): DeviceType {
diff --git a/apps/desktop/src/platform/services/electron-renderer-secure-storage.service.ts b/apps/desktop/src/platform/services/electron-renderer-secure-storage.service.ts
index 8d6b51cf7df..42513510ff3 100644
--- a/apps/desktop/src/platform/services/electron-renderer-secure-storage.service.ts
+++ b/apps/desktop/src/platform/services/electron-renderer-secure-storage.service.ts
@@ -4,6 +4,9 @@ import { AbstractStorageService } from "@bitwarden/common/platform/abstractions/
 import { StorageOptions } from "@bitwarden/common/platform/models/domain/storage-options";
 
 export class ElectronRendererSecureStorageService implements AbstractStorageService {
+  get valuesRequireDeserialization(): boolean {
+    return true;
+  }
   get updates$() {
     return throwError(
       () => new Error("Secure storage implementations cannot have their updates subscribed to.")
diff --git a/apps/desktop/src/platform/services/electron-renderer-storage.service.ts b/apps/desktop/src/platform/services/electron-renderer-storage.service.ts
index 8bb9ff72179..e81a0ca908c 100644
--- a/apps/desktop/src/platform/services/electron-renderer-storage.service.ts
+++ b/apps/desktop/src/platform/services/electron-renderer-storage.service.ts
@@ -8,6 +8,9 @@ import {
 export class ElectronRendererStorageService implements AbstractStorageService {
   private updatesSubject = new Subject<StorageUpdate>();
 
+  get valuesRequireDeserialization(): boolean {
+    return true;
+  }
   get updates$() {
     return this.updatesSubject.asObservable();
   }
@@ -22,11 +25,11 @@ export class ElectronRendererStorageService implements AbstractStorageService {
 
   async save<T>(key: string, obj: T): Promise<void> {
     await ipc.platform.storage.save(key, obj);
-    this.updatesSubject.next({ key, value: obj, updateType: "save" });
+    this.updatesSubject.next({ key, updateType: "save" });
   }
 
   async remove(key: string): Promise<void> {
     await ipc.platform.storage.remove(key);
-    this.updatesSubject.next({ key, value: null, updateType: "remove" });
+    this.updatesSubject.next({ key, updateType: "remove" });
   }
 }
diff --git a/apps/desktop/src/platform/services/electron-storage.service.ts b/apps/desktop/src/platform/services/electron-storage.service.ts
index 40be8260dc3..065e3f5de04 100644
--- a/apps/desktop/src/platform/services/electron-storage.service.ts
+++ b/apps/desktop/src/platform/services/electron-storage.service.ts
@@ -65,6 +65,9 @@ export class ElectronStorageService implements AbstractStorageService {
     });
   }
 
+  get valuesRequireDeserialization(): boolean {
+    return true;
+  }
   get updates$() {
     return this.updatesSubject.asObservable();
   }
@@ -84,13 +87,13 @@ export class ElectronStorageService implements AbstractStorageService {
       obj = Array.from(obj);
     }
     this.store.set(key, obj);
-    this.updatesSubject.next({ key, value: obj, updateType: "save" });
+    this.updatesSubject.next({ key, updateType: "save" });
     return Promise.resolve();
   }
 
   remove(key: string): Promise<void> {
     this.store.delete(key);
-    this.updatesSubject.next({ key, value: null, updateType: "remove" });
+    this.updatesSubject.next({ key, updateType: "remove" });
     return Promise.resolve();
   }
 }
diff --git a/apps/desktop/src/services/native-message-handler.service.ts b/apps/desktop/src/services/native-message-handler.service.ts
index 6779195c3f1..e77e0b41835 100644
--- a/apps/desktop/src/services/native-message-handler.service.ts
+++ b/apps/desktop/src/services/native-message-handler.service.ts
@@ -1,5 +1,4 @@
 import { Injectable } from "@angular/core";
-import { ipcRenderer } from "electron";
 import { firstValueFrom } from "rxjs";
 
 import { NativeMessagingVersion } from "@bitwarden/common/enums";
@@ -225,7 +224,7 @@ export class NativeMessageHandlerService {
   }
 
   private sendResponse(response: EncryptedMessageResponse | UnencryptedMessageResponse) {
-    ipcRenderer.send("nativeMessagingReply", response);
+    ipc.platform.nativeMessaging.sendReply(response);
   }
 
   // Trim all null bytes padded at the end of messages. This happens with C encryption libraries.
diff --git a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts
index 9d0dc6799d3..caeb6b464f7 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts
@@ -54,6 +54,7 @@ export interface MemberDialogParams {
   allOrganizationUserEmails: string[];
   usesKeyConnector: boolean;
   initialTab?: MemberDialogTab;
+  numConfirmedMembers: number;
 }
 
 export enum MemberDialogResult {
@@ -383,6 +384,15 @@ export class MemberDialogComponent implements OnInit, OnDestroy {
         });
         return;
       }
+      if (
+        this.organization.hasReseller &&
+        this.params.numConfirmedMembers + emails.length > this.organization.seats
+      ) {
+        this.formGroup.controls.emails.setErrors({
+          tooManyEmails: { message: this.i18nService.t("seatLimitReachedContactYourProvider") },
+        });
+        return;
+      }
       await this.userService.invite(emails, userView);
     }
 
diff --git a/apps/web/src/app/admin-console/organizations/members/people.component.ts b/apps/web/src/app/admin-console/organizations/members/people.component.ts
index 1ab5f250fe4..33deb5ee731 100644
--- a/apps/web/src/app/admin-console/organizations/members/people.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/people.component.ts
@@ -427,6 +427,15 @@ export class PeopleComponent
   }
 
   async edit(user: OrganizationUserView, initialTab: MemberDialogTab = MemberDialogTab.Role) {
+    if (!user && this.organization.hasReseller && this.organization.seats === this.confirmedCount) {
+      this.platformUtilsService.showToast(
+        "error",
+        this.i18nService.t("seatLimitReached"),
+        this.i18nService.t("contactYourProvider")
+      );
+      return;
+    }
+
     // Invite User: Add Flow
     // Click on user email: Edit Flow
 
@@ -450,6 +459,7 @@ export class PeopleComponent
         allOrganizationUserEmails: this.allUsers?.map((user) => user.email) ?? [],
         usesKeyConnector: user?.usesKeyConnector,
         initialTab: initialTab,
+        numConfirmedMembers: this.confirmedCount,
       },
     });
 
diff --git a/apps/web/src/app/admin-console/organizations/tools/exposed-passwords-report.component.ts b/apps/web/src/app/admin-console/organizations/tools/exposed-passwords-report.component.ts
index 415bd6516c2..7f8e3197a54 100644
--- a/apps/web/src/app/admin-console/organizations/tools/exposed-passwords-report.component.ts
+++ b/apps/web/src/app/admin-console/organizations/tools/exposed-passwords-report.component.ts
@@ -4,7 +4,6 @@ import { ActivatedRoute } from "@angular/router";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
@@ -25,12 +24,11 @@ export class ExposedPasswordsReportComponent extends BaseExposedPasswordsReportC
     cipherService: CipherService,
     auditService: AuditService,
     modalService: ModalService,
-    messagingService: MessagingService,
-    private organizationService: OrganizationService,
+    organizationService: OrganizationService,
     private route: ActivatedRoute,
     passwordRepromptService: PasswordRepromptService
   ) {
-    super(cipherService, auditService, modalService, messagingService, passwordRepromptService);
+    super(cipherService, auditService, organizationService, modalService, passwordRepromptService);
   }
 
   async ngOnInit() {
diff --git a/apps/web/src/app/admin-console/organizations/tools/inactive-two-factor-report.component.ts b/apps/web/src/app/admin-console/organizations/tools/inactive-two-factor-report.component.ts
index 4cc68b1f9d0..7d60439f3f2 100644
--- a/apps/web/src/app/admin-console/organizations/tools/inactive-two-factor-report.component.ts
+++ b/apps/web/src/app/admin-console/organizations/tools/inactive-two-factor-report.component.ts
@@ -4,7 +4,6 @@ import { ActivatedRoute } from "@angular/router";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { PasswordRepromptService } from "@bitwarden/vault";
@@ -21,13 +20,12 @@ export class InactiveTwoFactorReportComponent extends BaseInactiveTwoFactorRepor
   constructor(
     cipherService: CipherService,
     modalService: ModalService,
-    messagingService: MessagingService,
     private route: ActivatedRoute,
     logService: LogService,
     passwordRepromptService: PasswordRepromptService,
-    private organizationService: OrganizationService
+    organizationService: OrganizationService
   ) {
-    super(cipherService, modalService, messagingService, logService, passwordRepromptService);
+    super(cipherService, organizationService, modalService, logService, passwordRepromptService);
   }
 
   async ngOnInit() {
diff --git a/apps/web/src/app/admin-console/organizations/tools/reused-passwords-report.component.ts b/apps/web/src/app/admin-console/organizations/tools/reused-passwords-report.component.ts
index 93652239a11..c85178f7211 100644
--- a/apps/web/src/app/admin-console/organizations/tools/reused-passwords-report.component.ts
+++ b/apps/web/src/app/admin-console/organizations/tools/reused-passwords-report.component.ts
@@ -3,8 +3,6 @@ import { ActivatedRoute } from "@angular/router";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
@@ -24,13 +22,11 @@ export class ReusedPasswordsReportComponent extends BaseReusedPasswordsReportCom
   constructor(
     cipherService: CipherService,
     modalService: ModalService,
-    messagingService: MessagingService,
-    stateService: StateService,
     private route: ActivatedRoute,
-    private organizationService: OrganizationService,
+    organizationService: OrganizationService,
     passwordRepromptService: PasswordRepromptService
   ) {
-    super(cipherService, modalService, messagingService, stateService, passwordRepromptService);
+    super(cipherService, organizationService, modalService, passwordRepromptService);
   }
 
   async ngOnInit() {
diff --git a/apps/web/src/app/admin-console/organizations/tools/unsecured-websites-report.component.ts b/apps/web/src/app/admin-console/organizations/tools/unsecured-websites-report.component.ts
index e8fbc0ed5e6..bee951063f0 100644
--- a/apps/web/src/app/admin-console/organizations/tools/unsecured-websites-report.component.ts
+++ b/apps/web/src/app/admin-console/organizations/tools/unsecured-websites-report.component.ts
@@ -3,7 +3,6 @@ import { ActivatedRoute } from "@angular/router";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { PasswordRepromptService } from "@bitwarden/vault";
@@ -20,12 +19,11 @@ export class UnsecuredWebsitesReportComponent extends BaseUnsecuredWebsitesRepor
   constructor(
     cipherService: CipherService,
     modalService: ModalService,
-    messagingService: MessagingService,
     private route: ActivatedRoute,
-    private organizationService: OrganizationService,
+    organizationService: OrganizationService,
     passwordRepromptService: PasswordRepromptService
   ) {
-    super(cipherService, modalService, messagingService, passwordRepromptService);
+    super(cipherService, organizationService, modalService, passwordRepromptService);
   }
 
   async ngOnInit() {
diff --git a/apps/web/src/app/admin-console/organizations/tools/weak-passwords-report.component.ts b/apps/web/src/app/admin-console/organizations/tools/weak-passwords-report.component.ts
index 540f71d91dc..1902d24fe7d 100644
--- a/apps/web/src/app/admin-console/organizations/tools/weak-passwords-report.component.ts
+++ b/apps/web/src/app/admin-console/organizations/tools/weak-passwords-report.component.ts
@@ -3,7 +3,6 @@ import { ActivatedRoute } from "@angular/router";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
@@ -25,16 +24,15 @@ export class WeakPasswordsReportComponent extends BaseWeakPasswordsReportCompone
     cipherService: CipherService,
     passwordStrengthService: PasswordStrengthServiceAbstraction,
     modalService: ModalService,
-    messagingService: MessagingService,
     private route: ActivatedRoute,
-    private organizationService: OrganizationService,
+    organizationService: OrganizationService,
     passwordRepromptService: PasswordRepromptService
   ) {
     super(
       cipherService,
       passwordStrengthService,
+      organizationService,
       modalService,
-      messagingService,
       passwordRepromptService
     );
   }
diff --git a/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts b/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts
index 4d8565dd8d7..a4ca5b75214 100644
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts
@@ -151,21 +151,12 @@ export class CreateCredentialDialogComponent implements OnInit {
     }
 
     const name = this.formGroup.value.credentialNaming.name;
-    try {
-      await this.webauthnService.saveCredential(
-        this.formGroup.value.credentialNaming.name,
-        this.pendingCredential,
-        keySet
-      );
-    } catch (error) {
-      this.logService?.error(error);
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("unexpectedError"),
-        error.message
-      );
-      return;
-    }
+
+    await this.webauthnService.saveCredential(
+      this.formGroup.value.credentialNaming.name,
+      this.pendingCredential,
+      keySet
+    );
 
     if (await firstValueFrom(this.hasPasskeys$)) {
       this.platformUtilsService.showToast(
diff --git a/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html b/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
index 7b346ddc95d..dc55be99f1b 100644
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
@@ -1,12 +1,22 @@
 <h2 bitTypography="h2">
   {{ "loginWithPasskey" | i18n }}
   <ng-container *ngIf="hasData">
-    <span *ngIf="hasCredentials" bitBadge badgeType="success" class="!tw-align-middle">{{
-      "on" | i18n
-    }}</span>
-    <span *ngIf="!hasCredentials" bitBadge badgeType="secondary" class="!tw-align-middle">{{
-      "off" | i18n
-    }}</span>
+    <span
+      *ngIf="requireSsoPolicyEnabled"
+      bitBadge
+      badgeType="secondary"
+      class="tw-max-w-full !tw-align-middle"
+    >
+      {{ "off" | i18n }} - {{ "ssoLoginIsRequired" | i18n }}
+    </span>
+    <ng-container *ngIf="!requireSsoPolicyEnabled">
+      <span *ngIf="hasCredentials" bitBadge badgeType="success" class="!tw-align-middle">{{
+        "on" | i18n
+      }}</span>
+      <span *ngIf="!hasCredentials" bitBadge badgeType="secondary" class="!tw-align-middle">{{
+        "off" | i18n
+      }}</span>
+    </ng-container>
   </ng-container>
   <span bitBadge badgeType="warning" class="!tw-align-middle">{{ "beta" | i18n }}</span>
   <ng-container *ngIf="loading">
@@ -56,7 +66,7 @@
 
 <p bitTypography="body2" *ngIf="limitReached">{{ "passkeyLimitReachedInfo" | i18n }}</p>
 
-<ng-container *ngIf="hasData && !limitReached">
+<ng-container *ngIf="hasData && !limitReached && !requireSsoPolicyEnabled">
   <button
     *ngIf="hasCredentials"
     type="button"
diff --git a/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.ts b/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.ts
index 879b68f069c..57a0b6c29a9 100644
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.ts
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.ts
@@ -1,6 +1,8 @@
 import { Component, HostBinding, OnDestroy, OnInit } from "@angular/core";
 import { Subject, takeUntil } from "rxjs";
 
+import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { DialogService } from "@bitwarden/components";
 
 import { WebauthnLoginAdminService } from "../../core";
@@ -28,7 +30,8 @@ export class WebauthnLoginSettingsComponent implements OnInit, OnDestroy {
 
   constructor(
     private webauthnService: WebauthnLoginAdminService,
-    private dialogService: DialogService
+    private dialogService: DialogService,
+    private policyService: PolicyService
   ) {}
 
   @HostBinding("attr.aria-busy")
@@ -48,7 +51,16 @@ export class WebauthnLoginSettingsComponent implements OnInit, OnDestroy {
     return this.credentials?.length >= this.MaxCredentialCount;
   }
 
+  requireSsoPolicyEnabled = false;
+
   ngOnInit(): void {
+    this.policyService
+      .policyAppliesToActiveUser$(PolicyType.RequireSso)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((enabled) => {
+        this.requireSsoPolicyEnabled = enabled;
+      });
+
     this.webauthnService
       .getCredentials$()
       .pipe(takeUntil(this.destroy$))
diff --git a/apps/web/src/app/components/environment-selector/environment-selector.component.html b/apps/web/src/app/components/environment-selector/environment-selector.component.html
index d17a9c2b43c..847830ce602 100644
--- a/apps/web/src/app/components/environment-selector/environment-selector.component.html
+++ b/apps/web/src/app/components/environment-selector/environment-selector.component.html
@@ -20,7 +20,6 @@
         isEuServer ? 'javascript:void(0)' : 'https://vault.bitwarden.eu' + routeAndParams
       "
       class="pr-4"
-      *ngIf="euServerFlagEnabled"
     >
       <i
         class="bwi bwi-fw bwi-sm bwi-check pb-1"
diff --git a/apps/web/src/app/components/environment-selector/environment-selector.component.ts b/apps/web/src/app/components/environment-selector/environment-selector.component.ts
index 3c1c5a19732..bede7a2e14c 100644
--- a/apps/web/src/app/components/environment-selector/environment-selector.component.ts
+++ b/apps/web/src/app/components/environment-selector/environment-selector.component.ts
@@ -1,8 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
-import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { RegionDomain } from "@bitwarden/common/platform/abstractions/environment.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
@@ -12,22 +10,14 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
   templateUrl: "environment-selector.component.html",
 })
 export class EnvironmentSelectorComponent implements OnInit {
-  constructor(
-    private configService: ConfigServiceAbstraction,
-    private platformUtilsService: PlatformUtilsService,
-    private router: Router
-  ) {}
+  constructor(private platformUtilsService: PlatformUtilsService, private router: Router) {}
 
   isEuServer: boolean;
   isUsServer: boolean;
   showRegionSelector = false;
-  euServerFlagEnabled: boolean;
   routeAndParams: string;
 
   async ngOnInit() {
-    this.euServerFlagEnabled = await this.configService.getFeatureFlag<boolean>(
-      FeatureFlag.DisplayEuEnvironmentFlag
-    );
     const domain = Utils.getDomain(window.location.href);
     this.isEuServer = domain.includes(RegionDomain.EU);
     this.isUsServer = domain.includes(RegionDomain.US) || domain.includes(RegionDomain.USQA);
diff --git a/apps/web/src/app/core/html-storage.service.ts b/apps/web/src/app/core/html-storage.service.ts
index ef839fb4d96..ebcd9241c95 100644
--- a/apps/web/src/app/core/html-storage.service.ts
+++ b/apps/web/src/app/core/html-storage.service.ts
@@ -16,6 +16,9 @@ export class HtmlStorageService implements AbstractStorageService {
     return { htmlStorageLocation: HtmlStorageLocation.Session };
   }
 
+  get valuesRequireDeserialization(): boolean {
+    return true;
+  }
   get updates$() {
     return this.updatesSubject.asObservable();
   }
@@ -62,7 +65,7 @@ export class HtmlStorageService implements AbstractStorageService {
         window.sessionStorage.setItem(key, json);
         break;
     }
-    this.updatesSubject.next({ key, value: obj, updateType: "save" });
+    this.updatesSubject.next({ key, updateType: "save" });
     return Promise.resolve();
   }
 
@@ -76,7 +79,7 @@ export class HtmlStorageService implements AbstractStorageService {
         window.sessionStorage.removeItem(key);
         break;
     }
-    this.updatesSubject.next({ key, value: null, updateType: "remove" });
+    this.updatesSubject.next({ key, updateType: "remove" });
     return Promise.resolve();
   }
 }
diff --git a/apps/web/src/app/oss.module.ts b/apps/web/src/app/oss.module.ts
index a68b681dca3..73c03fd5dc8 100644
--- a/apps/web/src/app/oss.module.ts
+++ b/apps/web/src/app/oss.module.ts
@@ -5,6 +5,7 @@ import { AuthModule } from "./auth";
 import { LoginModule } from "./auth/login/login.module";
 import { TrialInitiationModule } from "./auth/trial-initiation/trial-initiation.module";
 import { LooseComponentsModule, SharedModule } from "./shared";
+import { AccessComponent } from "./tools/send/access.component";
 import { OrganizationBadgeModule } from "./vault/individual-vault/organization-badge/organization-badge.module";
 import { VaultFilterModule } from "./vault/individual-vault/vault-filter/vault-filter.module";
 
@@ -18,6 +19,7 @@ import { VaultFilterModule } from "./vault/individual-vault/vault-filter/vault-f
     OrganizationUserModule,
     LoginModule,
     AuthModule,
+    AccessComponent,
   ],
   exports: [
     SharedModule,
@@ -26,6 +28,7 @@ import { VaultFilterModule } from "./vault/individual-vault/vault-filter/vault-f
     VaultFilterModule,
     OrganizationBadgeModule,
     LoginModule,
+    AccessComponent,
   ],
   bootstrap: [],
 })
diff --git a/apps/web/src/app/reports/pages/cipher-report.component.ts b/apps/web/src/app/reports/pages/cipher-report.component.ts
index 80c41b0c252..984b547fb75 100644
--- a/apps/web/src/app/reports/pages/cipher-report.component.ts
+++ b/apps/web/src/app/reports/pages/cipher-report.component.ts
@@ -1,8 +1,9 @@
 import { Directive, ViewChild, ViewContainerRef } from "@angular/core";
+import { Observable } from "rxjs";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { PasswordRepromptService } from "@bitwarden/vault";
@@ -19,13 +20,15 @@ export class CipherReportComponent {
   hasLoaded = false;
   ciphers: CipherView[] = [];
   organization: Organization;
+  organizations$: Observable<Organization[]>;
 
   constructor(
     private modalService: ModalService,
-    protected messagingService: MessagingService,
-    public requiresPaid: boolean,
-    protected passwordRepromptService: PasswordRepromptService
-  ) {}
+    protected passwordRepromptService: PasswordRepromptService,
+    protected organizationService: OrganizationService
+  ) {
+    this.organizations$ = this.organizationService.organizations$;
+  }
 
   async load() {
     this.loading = true;
diff --git a/apps/web/src/app/reports/pages/exposed-passwords-report.component.html b/apps/web/src/app/reports/pages/exposed-passwords-report.component.html
index e23fb4a086d..f88d3a082e6 100644
--- a/apps/web/src/app/reports/pages/exposed-passwords-report.component.html
+++ b/apps/web/src/app/reports/pages/exposed-passwords-report.component.html
@@ -49,6 +49,16 @@
             <br />
             <small>{{ c.subTitle }}</small>
           </td>
+          <td>
+            <app-org-badge
+              *ngIf="!organization"
+              [disabled]="disabled"
+              [organizationId]="c.organizationId"
+              [organizationName]="c.organizationId | orgNameFromId : (organizations$ | async)"
+              appStopProp
+            >
+            </app-org-badge>
+          </td>
           <td class="text-right">
             <span bitBadge badgeType="warning">
               {{ "exposedXTimes" | i18n : (exposedPasswordMap.get(c.id) | number) }}
diff --git a/apps/web/src/app/reports/pages/exposed-passwords-report.component.spec.ts b/apps/web/src/app/reports/pages/exposed-passwords-report.component.spec.ts
new file mode 100644
index 00000000000..656abbff2af
--- /dev/null
+++ b/apps/web/src/app/reports/pages/exposed-passwords-report.component.spec.ts
@@ -0,0 +1,79 @@
+// eslint-disable-next-line no-restricted-imports
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { mock, MockProxy } from "jest-mock-extended";
+
+import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
+import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { AuditService } from "@bitwarden/common/abstractions/audit.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { PasswordRepromptService } from "@bitwarden/vault";
+
+import { ExposedPasswordsReportComponent } from "./exposed-passwords-report.component";
+import { cipherData } from "./reports-ciphers.mock";
+
+describe("ExposedPasswordsReportComponent", () => {
+  let component: ExposedPasswordsReportComponent;
+  let fixture: ComponentFixture<ExposedPasswordsReportComponent>;
+  let auditService: MockProxy<AuditService>;
+
+  beforeEach(() => {
+    auditService = mock<AuditService>();
+    TestBed.configureTestingModule({
+      declarations: [ExposedPasswordsReportComponent, I18nPipe],
+      providers: [
+        {
+          provide: CipherService,
+          useValue: mock<CipherService>(),
+        },
+        {
+          provide: AuditService,
+          useValue: auditService,
+        },
+        {
+          provide: OrganizationService,
+          useValue: mock<OrganizationService>(),
+        },
+        {
+          provide: ModalService,
+          useValue: mock<ModalService>(),
+        },
+        {
+          provide: PasswordRepromptService,
+          useValue: mock<PasswordRepromptService>(),
+        },
+        {
+          provide: I18nService,
+          useValue: mock<I18nService>(),
+        },
+      ],
+      schemas: [],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExposedPasswordsReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should initialize component", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should get only ciphers with exposed passwords that the user has "Can Edit" access to', async () => {
+    const expectedIdOne: any = "cbea34a8-bde4-46ad-9d19-b05001228ab2";
+    const expectedIdTwo = "cbea34a8-bde4-46ad-9d19-b05001228cd3";
+
+    jest.spyOn(auditService, "passwordLeaked").mockReturnValue(Promise.resolve<any>(1234));
+    jest.spyOn(component as any, "getAllCiphers").mockReturnValue(Promise.resolve<any>(cipherData));
+    await component.setCiphers();
+
+    expect(component.ciphers.length).toEqual(2);
+    expect(component.ciphers[0].id).toEqual(expectedIdOne);
+    expect(component.ciphers[0].edit).toEqual(true);
+    expect(component.ciphers[1].id).toEqual(expectedIdTwo);
+    expect(component.ciphers[1].edit).toEqual(true);
+  });
+});
diff --git a/apps/web/src/app/reports/pages/exposed-passwords-report.component.ts b/apps/web/src/app/reports/pages/exposed-passwords-report.component.ts
index dec2f707d4a..54a634b2510 100644
--- a/apps/web/src/app/reports/pages/exposed-passwords-report.component.ts
+++ b/apps/web/src/app/reports/pages/exposed-passwords-report.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from "@angular/core";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
@@ -16,15 +16,16 @@ import { CipherReportComponent } from "./cipher-report.component";
 })
 export class ExposedPasswordsReportComponent extends CipherReportComponent implements OnInit {
   exposedPasswordMap = new Map<string, number>();
+  disabled = true;
 
   constructor(
     protected cipherService: CipherService,
     protected auditService: AuditService,
+    protected organizationService: OrganizationService,
     modalService: ModalService,
-    messagingService: MessagingService,
     passwordRepromptService: PasswordRepromptService
   ) {
-    super(modalService, messagingService, true, passwordRepromptService);
+    super(modalService, passwordRepromptService, organizationService);
   }
 
   async ngOnInit() {
@@ -35,25 +36,28 @@ export class ExposedPasswordsReportComponent extends CipherReportComponent imple
     const allCiphers = await this.getAllCiphers();
     const exposedPasswordCiphers: CipherView[] = [];
     const promises: Promise<void>[] = [];
-    allCiphers.forEach((c) => {
+    allCiphers.forEach((ciph) => {
+      const { type, login, isDeleted, edit, viewPassword, id } = ciph;
       if (
-        c.type !== CipherType.Login ||
-        c.login.password == null ||
-        c.login.password === "" ||
-        c.isDeleted
+        type !== CipherType.Login ||
+        login.password == null ||
+        login.password === "" ||
+        isDeleted ||
+        (!this.organization && !edit) ||
+        !viewPassword
       ) {
         return;
       }
-      const promise = this.auditService.passwordLeaked(c.login.password).then((exposedCount) => {
+      const promise = this.auditService.passwordLeaked(login.password).then((exposedCount) => {
         if (exposedCount > 0) {
-          exposedPasswordCiphers.push(c);
-          this.exposedPasswordMap.set(c.id, exposedCount);
+          exposedPasswordCiphers.push(ciph);
+          this.exposedPasswordMap.set(id, exposedCount);
         }
       });
       promises.push(promise);
     });
     await Promise.all(promises);
-    this.ciphers = exposedPasswordCiphers;
+    this.ciphers = [...exposedPasswordCiphers];
   }
 
   protected getAllCiphers(): Promise<CipherView[]> {
diff --git a/apps/web/src/app/reports/pages/inactive-two-factor-report.component.html b/apps/web/src/app/reports/pages/inactive-two-factor-report.component.html
index eca2d3e3ab7..076f2f03ed5 100644
--- a/apps/web/src/app/reports/pages/inactive-two-factor-report.component.html
+++ b/apps/web/src/app/reports/pages/inactive-two-factor-report.component.html
@@ -59,6 +59,16 @@
             <br />
             <small>{{ c.subTitle }}</small>
           </td>
+          <td>
+            <app-org-badge
+              *ngIf="!organization"
+              [disabled]="disabled"
+              [organizationId]="c.organizationId"
+              [organizationName]="c.organizationId | orgNameFromId : (organizations$ | async)"
+              appStopProp
+            >
+            </app-org-badge>
+          </td>
           <td class="text-right">
             <a
               bitBadge
diff --git a/apps/web/src/app/reports/pages/inactive-two-factor-report.component.spec.ts b/apps/web/src/app/reports/pages/inactive-two-factor-report.component.spec.ts
new file mode 100644
index 00000000000..39958dddb2c
--- /dev/null
+++ b/apps/web/src/app/reports/pages/inactive-two-factor-report.component.spec.ts
@@ -0,0 +1,84 @@
+// eslint-disable-next-line no-restricted-imports
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { mock } from "jest-mock-extended";
+
+import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
+import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { PasswordRepromptService } from "@bitwarden/vault";
+
+import { InactiveTwoFactorReportComponent } from "./inactive-two-factor-report.component";
+import { cipherData } from "./reports-ciphers.mock";
+
+describe("InactiveTwoFactorReportComponent", () => {
+  let component: InactiveTwoFactorReportComponent;
+  let fixture: ComponentFixture<InactiveTwoFactorReportComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [InactiveTwoFactorReportComponent, I18nPipe],
+      providers: [
+        {
+          provide: CipherService,
+          useValue: mock<CipherService>(),
+        },
+        {
+          provide: OrganizationService,
+          useValue: mock<OrganizationService>(),
+        },
+        {
+          provide: ModalService,
+          useValue: mock<ModalService>(),
+        },
+        {
+          provide: LogService,
+          useValue: mock<LogService>(),
+        },
+        {
+          provide: PasswordRepromptService,
+          useValue: mock<PasswordRepromptService>(),
+        },
+        {
+          provide: I18nService,
+          useValue: mock<I18nService>(),
+        },
+      ],
+      schemas: [],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InactiveTwoFactorReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should initialize component", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should get only ciphers with domains in the 2fa directory that they have "Can Edit" access to', async () => {
+    const expectedIdOne: any = "cbea34a8-bde4-46ad-9d19-b05001228xy4";
+    const expectedIdTwo: any = "cbea34a8-bde4-46ad-9d19-b05001227nm5";
+    component.services.set(
+      "101domain.com",
+      "https://help.101domain.com/account-management/account-security/enabling-disabling-two-factor-verification"
+    );
+    component.services.set(
+      "123formbuilder.com",
+      "https://www.123formbuilder.com/docs/multi-factor-authentication-login"
+    );
+
+    jest.spyOn(component as any, "getAllCiphers").mockReturnValue(Promise.resolve<any>(cipherData));
+    await component.setCiphers();
+
+    expect(component.ciphers.length).toEqual(2);
+    expect(component.ciphers[0].id).toEqual(expectedIdOne);
+    expect(component.ciphers[0].edit).toEqual(true);
+    expect(component.ciphers[1].id).toEqual(expectedIdTwo);
+    expect(component.ciphers[1].edit).toEqual(true);
+  });
+});
diff --git a/apps/web/src/app/reports/pages/inactive-two-factor-report.component.ts b/apps/web/src/app/reports/pages/inactive-two-factor-report.component.ts
index ad257d7e596..b1ca1f654d9 100644
--- a/apps/web/src/app/reports/pages/inactive-two-factor-report.component.ts
+++ b/apps/web/src/app/reports/pages/inactive-two-factor-report.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from "@angular/core";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
@@ -18,15 +18,16 @@ import { CipherReportComponent } from "./cipher-report.component";
 export class InactiveTwoFactorReportComponent extends CipherReportComponent implements OnInit {
   services = new Map<string, string>();
   cipherDocs = new Map<string, string>();
+  disabled = true;
 
   constructor(
     protected cipherService: CipherService,
+    protected organizationService: OrganizationService,
     modalService: ModalService,
-    messagingService: MessagingService,
     private logService: LogService,
     passwordRepromptService: PasswordRepromptService
   ) {
-    super(modalService, messagingService, true, passwordRepromptService);
+    super(modalService, passwordRepromptService, organizationService);
   }
 
   async ngOnInit() {
@@ -43,33 +44,35 @@ export class InactiveTwoFactorReportComponent extends CipherReportComponent impl
     if (this.services.size > 0) {
       const allCiphers = await this.getAllCiphers();
       const inactive2faCiphers: CipherView[] = [];
-      const promises: Promise<void>[] = [];
       const docs = new Map<string, string>();
-      allCiphers.forEach((c) => {
+
+      allCiphers.forEach((ciph) => {
+        const { type, login, isDeleted, edit, id, viewPassword } = ciph;
         if (
-          c.type !== CipherType.Login ||
-          (c.login.totp != null && c.login.totp !== "") ||
-          !c.login.hasUris ||
-          c.isDeleted
+          type !== CipherType.Login ||
+          (login.totp != null && login.totp !== "") ||
+          !login.hasUris ||
+          isDeleted ||
+          (!this.organization && !edit) ||
+          !viewPassword
         ) {
           return;
         }
-        for (let i = 0; i < c.login.uris.length; i++) {
-          const u = c.login.uris[i];
+        for (let i = 0; i < login.uris.length; i++) {
+          const u = login.uris[i];
           if (u.uri != null && u.uri !== "") {
             const uri = u.uri.replace("www.", "");
             const domain = Utils.getDomain(uri);
             if (domain != null && this.services.has(domain)) {
               if (this.services.get(domain) != null) {
-                docs.set(c.id, this.services.get(domain));
+                docs.set(id, this.services.get(domain));
               }
-              inactive2faCiphers.push(c);
+              inactive2faCiphers.push(ciph);
             }
           }
         }
       });
-      await Promise.all(promises);
-      this.ciphers = inactive2faCiphers;
+      this.ciphers = [...inactive2faCiphers];
       this.cipherDocs = docs;
     }
   }
diff --git a/apps/web/src/app/reports/pages/reports-ciphers.mock.ts b/apps/web/src/app/reports/pages/reports-ciphers.mock.ts
new file mode 100644
index 00000000000..195c9afa9d2
--- /dev/null
+++ b/apps/web/src/app/reports/pages/reports-ciphers.mock.ts
@@ -0,0 +1,128 @@
+export const cipherData: any[] = [
+  {
+    initializerKey: 1,
+    id: "cbea34a8-bde4-46ad-9d19-b05001228ab1",
+    organizationId: null,
+    folderId: null,
+    name: "Cannot Be Edited",
+    notes: null,
+    isDeleted: false,
+    type: 1,
+    favorite: false,
+    organizationUseTotp: false,
+    login: {
+      password: "123",
+    },
+    edit: false,
+    viewPassword: true,
+    collectionIds: [],
+    revisionDate: "2023-08-03T17:40:59.793Z",
+    creationDate: "2023-08-03T17:40:59.793Z",
+    deletedDate: null,
+    reprompt: 0,
+    localData: null,
+  },
+  {
+    initializerKey: 1,
+    id: "cbea34a8-bde4-46ad-9d19-b05001228ab2",
+    organizationId: null,
+    folderId: null,
+    name: "Can Be Edited id ending 2",
+    notes: null,
+    isDeleted: false,
+    type: 1,
+    favorite: false,
+    organizationUseTotp: false,
+    login: {
+      password: "123",
+      hasUris: true,
+      uris: [
+        {
+          uri: "http://nothing.com",
+        },
+      ],
+    },
+    edit: true,
+    viewPassword: true,
+    collectionIds: [],
+    revisionDate: "2023-08-03T17:40:59.793Z",
+    creationDate: "2023-08-03T17:40:59.793Z",
+    deletedDate: null,
+    reprompt: 0,
+    localData: null,
+  },
+  {
+    initializerKey: 1,
+    id: "cbea34a8-bde4-46ad-9d19-b05001228cd3",
+    organizationId: null,
+    folderId: null,
+    name: "Can Be Edited id ending 3",
+    notes: null,
+    type: 1,
+    favorite: false,
+    organizationUseTotp: false,
+    login: {
+      password: "123",
+      hasUris: true,
+      uris: [
+        {
+          uri: "http://example.com",
+        },
+      ],
+    },
+    edit: true,
+    viewPassword: true,
+    collectionIds: [],
+    revisionDate: "2023-08-03T17:40:59.793Z",
+    creationDate: "2023-08-03T17:40:59.793Z",
+    deletedDate: null,
+    reprompt: 0,
+    localData: null,
+  },
+  {
+    initializerKey: 1,
+    id: "cbea34a8-bde4-46ad-9d19-b05001228xy4",
+    organizationId: null,
+    folderId: null,
+    name: "Can Be Edited id ending 4",
+    notes: null,
+    type: 1,
+    favorite: false,
+    organizationUseTotp: false,
+    login: {
+      hasUris: true,
+      uris: [{ uri: "101domain.com" }],
+    },
+    edit: true,
+    viewPassword: true,
+    collectionIds: [],
+    revisionDate: "2023-08-03T17:40:59.793Z",
+    creationDate: "2023-08-03T17:40:59.793Z",
+    deletedDate: null,
+    reprompt: 0,
+    localData: null,
+  },
+  {
+    initializerKey: 1,
+    id: "cbea34a8-bde4-46ad-9d19-b05001227nm5",
+    organizationId: null,
+    folderId: null,
+    name: "Can Be Edited id ending 5",
+    notes: null,
+    type: 1,
+    favorite: false,
+    organizationUseTotp: false,
+    login: {
+      hasUris: true,
+      uris: [{ uri: "123formbuilder.com" }],
+    },
+    edit: true,
+    viewPassword: true,
+    collectionIds: [],
+    revisionDate: "2023-08-03T17:40:59.793Z",
+    creationDate: "2023-08-03T17:40:59.793Z",
+    deletedDate: null,
+    reprompt: 0,
+    localData: null,
+  },
+];
diff --git a/apps/web/src/app/reports/pages/reused-passwords-report.component.html b/apps/web/src/app/reports/pages/reused-passwords-report.component.html
index e423365ef89..c4b80a88f31 100644
--- a/apps/web/src/app/reports/pages/reused-passwords-report.component.html
+++ b/apps/web/src/app/reports/pages/reused-passwords-report.component.html
@@ -64,6 +64,16 @@
             <br />
             <small>{{ c.subTitle }}</small>
           </td>
+          <td>
+            <app-org-badge
+              *ngIf="!organization"
+              [disabled]="disabled"
+              [organizationId]="c.organizationId"
+              [organizationName]="c.organizationId | orgNameFromId : (organizations$ | async)"
+              appStopProp
+            >
+            </app-org-badge>
+          </td>
           <td class="text-right">
             <span bitBadge badgeType="warning">
               {{ "reusedXTimes" | i18n : passwordUseMap.get(c.login.password) }}
diff --git a/apps/web/src/app/reports/pages/reused-passwords-report.component.spec.ts b/apps/web/src/app/reports/pages/reused-passwords-report.component.spec.ts
new file mode 100644
index 00000000000..01ed07a5682
--- /dev/null
+++ b/apps/web/src/app/reports/pages/reused-passwords-report.component.spec.ts
@@ -0,0 +1,70 @@
+// eslint-disable-next-line no-restricted-imports
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { mock } from "jest-mock-extended";
+
+import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
+import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { PasswordRepromptService } from "@bitwarden/vault";
+
+import { cipherData } from "./reports-ciphers.mock";
+import { ReusedPasswordsReportComponent } from "./reused-passwords-report.component";
+
+describe("ReusedPasswordsReportComponent", () => {
+  let component: ReusedPasswordsReportComponent;
+  let fixture: ComponentFixture<ReusedPasswordsReportComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ReusedPasswordsReportComponent, I18nPipe],
+      providers: [
+        {
+          provide: CipherService,
+          useValue: mock<CipherService>(),
+        },
+        {
+          provide: OrganizationService,
+          useValue: mock<OrganizationService>(),
+        },
+        {
+          provide: ModalService,
+          useValue: mock<ModalService>(),
+        },
+        {
+          provide: PasswordRepromptService,
+          useValue: mock<PasswordRepromptService>(),
+        },
+        {
+          provide: I18nService,
+          useValue: mock<I18nService>(),
+        },
+      ],
+      schemas: [],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReusedPasswordsReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should initialize component", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should get ciphers with reused passwords that the user has "Can Edit" access to', async () => {
+    const expectedIdOne: any = "cbea34a8-bde4-46ad-9d19-b05001228ab2";
+    const expectedIdTwo = "cbea34a8-bde4-46ad-9d19-b05001228cd3";
+    jest.spyOn(component as any, "getAllCiphers").mockReturnValue(Promise.resolve<any>(cipherData));
+    await component.setCiphers();
+
+    expect(component.ciphers.length).toEqual(2);
+    expect(component.ciphers[0].id).toEqual(expectedIdOne);
+    expect(component.ciphers[0].edit).toEqual(true);
+    expect(component.ciphers[1].id).toEqual(expectedIdTwo);
+    expect(component.ciphers[1].edit).toEqual(true);
+  });
+});
diff --git a/apps/web/src/app/reports/pages/reused-passwords-report.component.ts b/apps/web/src/app/reports/pages/reused-passwords-report.component.ts
index 431b571fa16..c8aa305b8d8 100644
--- a/apps/web/src/app/reports/pages/reused-passwords-report.component.ts
+++ b/apps/web/src/app/reports/pages/reused-passwords-report.component.ts
@@ -1,8 +1,7 @@
 import { Component, OnInit } from "@angular/core";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
@@ -16,15 +15,15 @@ import { CipherReportComponent } from "./cipher-report.component";
 })
 export class ReusedPasswordsReportComponent extends CipherReportComponent implements OnInit {
   passwordUseMap: Map<string, number>;
+  disabled = true;
 
   constructor(
     protected cipherService: CipherService,
+    protected organizationService: OrganizationService,
     modalService: ModalService,
-    messagingService: MessagingService,
-    stateService: StateService,
     passwordRepromptService: PasswordRepromptService
   ) {
-    super(modalService, messagingService, true, passwordRepromptService);
+    super(modalService, passwordRepromptService, organizationService);
   }
 
   async ngOnInit() {
@@ -35,20 +34,23 @@ export class ReusedPasswordsReportComponent extends CipherReportComponent implem
     const allCiphers = await this.getAllCiphers();
     const ciphersWithPasswords: CipherView[] = [];
     this.passwordUseMap = new Map<string, number>();
-    allCiphers.forEach((c) => {
+    allCiphers.forEach((ciph) => {
+      const { type, login, isDeleted, edit, viewPassword } = ciph;
       if (
-        c.type !== CipherType.Login ||
-        c.login.password == null ||
-        c.login.password === "" ||
-        c.isDeleted
+        type !== CipherType.Login ||
+        login.password == null ||
+        login.password === "" ||
+        isDeleted ||
+        (!this.organization && !edit) ||
+        !viewPassword
       ) {
         return;
       }
-      ciphersWithPasswords.push(c);
-      if (this.passwordUseMap.has(c.login.password)) {
-        this.passwordUseMap.set(c.login.password, this.passwordUseMap.get(c.login.password) + 1);
+      ciphersWithPasswords.push(ciph);
+      if (this.passwordUseMap.has(login.password)) {
+        this.passwordUseMap.set(login.password, this.passwordUseMap.get(login.password) + 1);
       } else {
-        this.passwordUseMap.set(c.login.password, 1);
+        this.passwordUseMap.set(login.password, 1);
       }
     });
     const reusedPasswordCiphers = ciphersWithPasswords.filter(
diff --git a/apps/web/src/app/reports/pages/unsecured-websites-report.component.html b/apps/web/src/app/reports/pages/unsecured-websites-report.component.html
index 99530b753c7..61feed5cefa 100644
--- a/apps/web/src/app/reports/pages/unsecured-websites-report.component.html
+++ b/apps/web/src/app/reports/pages/unsecured-websites-report.component.html
@@ -59,6 +59,16 @@
             <br />
             <small>{{ c.subTitle }}</small>
           </td>
+          <td>
+            <app-org-badge
+              *ngIf="!organization"
+              [disabled]="disabled"
+              [organizationId]="c.organizationId"
+              [organizationName]="c.organizationId | orgNameFromId : (organizations$ | async)"
+              appStopProp
+            >
+            </app-org-badge>
+          </td>
         </tr>
       </tbody>
     </table>
diff --git a/apps/web/src/app/reports/pages/unsecured-websites-report.component.spec.ts b/apps/web/src/app/reports/pages/unsecured-websites-report.component.spec.ts
new file mode 100644
index 00000000000..3bc8346d7a3
--- /dev/null
+++ b/apps/web/src/app/reports/pages/unsecured-websites-report.component.spec.ts
@@ -0,0 +1,70 @@
+// eslint-disable-next-line no-restricted-imports
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { mock } from "jest-mock-extended";
+
+import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
+import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { PasswordRepromptService } from "@bitwarden/vault";
+
+import { cipherData } from "./reports-ciphers.mock";
+import { UnsecuredWebsitesReportComponent } from "./unsecured-websites-report.component";
+
+describe("UnsecuredWebsitesReportComponent", () => {
+  let component: UnsecuredWebsitesReportComponent;
+  let fixture: ComponentFixture<UnsecuredWebsitesReportComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UnsecuredWebsitesReportComponent, I18nPipe],
+      providers: [
+        {
+          provide: CipherService,
+          useValue: mock<CipherService>(),
+        },
+        {
+          provide: OrganizationService,
+          useValue: mock<OrganizationService>(),
+        },
+        {
+          provide: ModalService,
+          useValue: mock<ModalService>(),
+        },
+        {
+          provide: PasswordRepromptService,
+          useValue: mock<PasswordRepromptService>(),
+        },
+        {
+          provide: I18nService,
+          useValue: mock<I18nService>(),
+        },
+      ],
+      schemas: [],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UnsecuredWebsitesReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should initialize component", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should get only unsecured ciphers that the user has "Can Edit" access to', async () => {
+    const expectedIdOne: any = "cbea34a8-bde4-46ad-9d19-b05001228ab2";
+    const expectedIdTwo = "cbea34a8-bde4-46ad-9d19-b05001228cd3";
+    jest.spyOn(component as any, "getAllCiphers").mockReturnValue(Promise.resolve<any>(cipherData));
+    await component.setCiphers();
+
+    expect(component.ciphers.length).toEqual(2);
+    expect(component.ciphers[0].id).toEqual(expectedIdOne);
+    expect(component.ciphers[0].edit).toEqual(true);
+    expect(component.ciphers[1].id).toEqual(expectedIdTwo);
+    expect(component.ciphers[1].edit).toEqual(true);
+  });
+});
diff --git a/apps/web/src/app/reports/pages/unsecured-websites-report.component.ts b/apps/web/src/app/reports/pages/unsecured-websites-report.component.ts
index 42ddb3b1d5d..c1d91cf0bf5 100644
--- a/apps/web/src/app/reports/pages/unsecured-websites-report.component.ts
+++ b/apps/web/src/app/reports/pages/unsecured-websites-report.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from "@angular/core";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
@@ -14,13 +14,15 @@ import { CipherReportComponent } from "./cipher-report.component";
   templateUrl: "unsecured-websites-report.component.html",
 })
 export class UnsecuredWebsitesReportComponent extends CipherReportComponent implements OnInit {
+  disabled = true;
+
   constructor(
     protected cipherService: CipherService,
+    protected organizationService: OrganizationService,
     modalService: ModalService,
-    messagingService: MessagingService,
     passwordRepromptService: PasswordRepromptService
   ) {
-    super(modalService, messagingService, true, passwordRepromptService);
+    super(modalService, passwordRepromptService, organizationService);
   }
 
   async ngOnInit() {
@@ -35,7 +37,9 @@ export class UnsecuredWebsitesReportComponent extends CipherReportComponent impl
       }
       return c.login.uris.some((u) => u.uri != null && u.uri.indexOf("http://") === 0);
     });
-    this.ciphers = unsecuredCiphers;
+    this.ciphers = unsecuredCiphers.filter(
+      (c) => (!this.organization && c.edit) || (this.organization && !c.edit)
+    );
   }
 
   protected getAllCiphers(): Promise<CipherView[]> {
diff --git a/apps/web/src/app/reports/pages/weak-passwords-report.component.html b/apps/web/src/app/reports/pages/weak-passwords-report.component.html
index 4dbe20192d4..044483a5de8 100644
--- a/apps/web/src/app/reports/pages/weak-passwords-report.component.html
+++ b/apps/web/src/app/reports/pages/weak-passwords-report.component.html
@@ -64,6 +64,16 @@
             <br />
             <small>{{ c.subTitle }}</small>
           </td>
+          <td>
+            <app-org-badge
+              *ngIf="!organization"
+              [disabled]="disabled"
+              [organizationId]="c.organizationId"
+              [organizationName]="c.organizationId | orgNameFromId : (organizations$ | async)"
+              appStopProp
+            >
+            </app-org-badge>
+          </td>
           <td class="text-right">
             <span bitBadge [badgeType]="passwordStrengthMap.get(c.id)[1]">
               {{ passwordStrengthMap.get(c.id)[0] | i18n }}
diff --git a/apps/web/src/app/reports/pages/weak-passwords-report.component.spec.ts b/apps/web/src/app/reports/pages/weak-passwords-report.component.spec.ts
new file mode 100644
index 00000000000..9d74412dc27
--- /dev/null
+++ b/apps/web/src/app/reports/pages/weak-passwords-report.component.spec.ts
@@ -0,0 +1,82 @@
+// eslint-disable-next-line no-restricted-imports
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { mock, MockProxy } from "jest-mock-extended";
+
+import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
+import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { PasswordRepromptService } from "@bitwarden/vault";
+
+import { cipherData } from "./reports-ciphers.mock";
+import { WeakPasswordsReportComponent } from "./weak-passwords-report.component";
+
+describe("WeakPasswordsReportComponent", () => {
+  let component: WeakPasswordsReportComponent;
+  let fixture: ComponentFixture<WeakPasswordsReportComponent>;
+  let passwordStrengthService: MockProxy<PasswordStrengthServiceAbstraction>;
+
+  beforeEach(() => {
+    passwordStrengthService = mock<PasswordStrengthServiceAbstraction>();
+    TestBed.configureTestingModule({
+      declarations: [WeakPasswordsReportComponent, I18nPipe],
+      providers: [
+        {
+          provide: CipherService,
+          useValue: mock<CipherService>(),
+        },
+        {
+          provide: PasswordStrengthServiceAbstraction,
+          useValue: passwordStrengthService,
+        },
+        {
+          provide: OrganizationService,
+          useValue: mock<OrganizationService>(),
+        },
+        {
+          provide: ModalService,
+          useValue: mock<ModalService>(),
+        },
+        {
+          provide: PasswordRepromptService,
+          useValue: mock<PasswordRepromptService>(),
+        },
+        {
+          provide: I18nService,
+          useValue: mock<I18nService>(),
+        },
+      ],
+      schemas: [],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WeakPasswordsReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should initialize component", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should get only ciphers with weak passwords that the user has "Can Edit" access to', async () => {
+    const expectedIdOne: any = "cbea34a8-bde4-46ad-9d19-b05001228ab2";
+    const expectedIdTwo = "cbea34a8-bde4-46ad-9d19-b05001228cd3";
+
+    jest.spyOn(passwordStrengthService, "getPasswordStrength").mockReturnValue({
+      password: "123",
+      score: 0,
+    } as any);
+    jest.spyOn(component as any, "getAllCiphers").mockReturnValue(Promise.resolve<any>(cipherData));
+    await component.setCiphers();
+
+    expect(component.ciphers.length).toEqual(2);
+    expect(component.ciphers[0].id).toEqual(expectedIdOne);
+    expect(component.ciphers[0].edit).toEqual(true);
+    expect(component.ciphers[1].id).toEqual(expectedIdTwo);
+    expect(component.ciphers[1].edit).toEqual(true);
+  });
+});
diff --git a/apps/web/src/app/reports/pages/weak-passwords-report.component.ts b/apps/web/src/app/reports/pages/weak-passwords-report.component.ts
index b5bad708afd..6ae7b15baca 100644
--- a/apps/web/src/app/reports/pages/weak-passwords-report.component.ts
+++ b/apps/web/src/app/reports/pages/weak-passwords-report.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from "@angular/core";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
@@ -17,17 +18,19 @@ import { CipherReportComponent } from "./cipher-report.component";
 })
 export class WeakPasswordsReportComponent extends CipherReportComponent implements OnInit {
   passwordStrengthMap = new Map<string, [string, BadgeTypes]>();
+  disabled = true;
 
   private passwordStrengthCache = new Map<string, number>();
+  weakPasswordCiphers: CipherView[] = [];
 
   constructor(
     protected cipherService: CipherService,
     protected passwordStrengthService: PasswordStrengthServiceAbstraction,
+    protected organizationService: OrganizationService,
     modalService: ModalService,
-    messagingService: MessagingService,
     passwordRepromptService: PasswordRepromptService
   ) {
-    super(modalService, messagingService, true, passwordRepromptService);
+    super(modalService, passwordRepromptService, organizationService);
   }
 
   async ngOnInit() {
@@ -36,33 +39,32 @@ export class WeakPasswordsReportComponent extends CipherReportComponent implemen
 
   async setCiphers() {
     const allCiphers = await this.getAllCiphers();
-    const weakPasswordCiphers: CipherView[] = [];
-    const isUserNameNotEmpty = (c: CipherView): boolean => {
-      return c.login.username != null && c.login.username.trim() !== "";
-    };
-    const getCacheKey = (c: CipherView): string => {
-      return c.login.password + "_____" + (isUserNameNotEmpty(c) ? c.login.username : "");
-    };
+    this.findWeakPasswords(allCiphers);
+  }
 
-    allCiphers.forEach((c) => {
+  protected findWeakPasswords(ciphers: any[]): void {
+    ciphers.forEach((ciph) => {
+      const { type, login, isDeleted, edit, viewPassword, id } = ciph;
       if (
-        c.type !== CipherType.Login ||
-        c.login.password == null ||
-        c.login.password === "" ||
-        c.isDeleted
+        type !== CipherType.Login ||
+        login.password == null ||
+        login.password === "" ||
+        isDeleted ||
+        (!this.organization && !edit) ||
+        !viewPassword
       ) {
         return;
       }
-      const hasUserName = isUserNameNotEmpty(c);
-      const cacheKey = getCacheKey(c);
+      const hasUserName = this.isUserNameNotEmpty(ciph);
+      const cacheKey = this.getCacheKey(ciph);
       if (!this.passwordStrengthCache.has(cacheKey)) {
         let userInput: string[] = [];
         if (hasUserName) {
-          const atPosition = c.login.username.indexOf("@");
+          const atPosition = login.username.indexOf("@");
           if (atPosition > -1) {
             userInput = userInput
               .concat(
-                c.login.username
+                login.username
                   .substr(0, atPosition)
                   .trim()
                   .toLowerCase()
@@ -70,15 +72,15 @@ export class WeakPasswordsReportComponent extends CipherReportComponent implemen
               )
               .filter((i) => i.length >= 3);
           } else {
-            userInput = c.login.username
+            userInput = login.username
               .trim()
               .toLowerCase()
               .split(/[^A-Za-z0-9]/)
-              .filter((i) => i.length >= 3);
+              .filter((i: any) => i.length >= 3);
           }
         }
         const result = this.passwordStrengthService.getPasswordStrength(
-          c.login.password,
+          login.password,
           null,
           userInput.length > 0 ? userInput : null
         );
@@ -86,17 +88,17 @@ export class WeakPasswordsReportComponent extends CipherReportComponent implemen
       }
       const score = this.passwordStrengthCache.get(cacheKey);
       if (score != null && score <= 2) {
-        this.passwordStrengthMap.set(c.id, this.scoreKey(score));
-        weakPasswordCiphers.push(c);
+        this.passwordStrengthMap.set(id, this.scoreKey(score));
+        this.weakPasswordCiphers.push(ciph);
       }
     });
-    weakPasswordCiphers.sort((a, b) => {
+    this.weakPasswordCiphers.sort((a, b) => {
       return (
-        this.passwordStrengthCache.get(getCacheKey(a)) -
-        this.passwordStrengthCache.get(getCacheKey(b))
+        this.passwordStrengthCache.get(this.getCacheKey(a)) -
+        this.passwordStrengthCache.get(this.getCacheKey(b))
       );
     });
-    this.ciphers = weakPasswordCiphers;
+    this.ciphers = [...this.weakPasswordCiphers];
   }
 
   protected getAllCiphers(): Promise<CipherView[]> {
@@ -108,6 +110,14 @@ export class WeakPasswordsReportComponent extends CipherReportComponent implemen
     return true;
   }
 
+  private isUserNameNotEmpty(c: CipherView): boolean {
+    return !Utils.isNullOrWhitespace(c.login.username);
+  }
+
+  private getCacheKey(c: CipherView): string {
+    return c.login.password + "_____" + (this.isUserNameNotEmpty(c) ? c.login.username : "");
+  }
+
   private scoreKey(score: number): [string, BadgeTypes] {
     switch (score) {
       case 4:
diff --git a/apps/web/src/app/reports/reports.module.ts b/apps/web/src/app/reports/reports.module.ts
index f4150f2382d..500865cfb1c 100644
--- a/apps/web/src/app/reports/reports.module.ts
+++ b/apps/web/src/app/reports/reports.module.ts
@@ -2,6 +2,8 @@ import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { SharedModule } from "../shared";
+import { OrganizationBadgeModule } from "../vault/individual-vault/organization-badge/organization-badge.module";
+import { PipesModule } from "../vault/individual-vault/pipes/pipes.module";
 
 import { BreachReportComponent } from "./pages/breach-report.component";
 import { ExposedPasswordsReportComponent } from "./pages/exposed-passwords-report.component";
@@ -15,7 +17,14 @@ import { ReportsRoutingModule } from "./reports-routing.module";
 import { ReportsSharedModule } from "./shared";
 
 @NgModule({
-  imports: [CommonModule, SharedModule, ReportsSharedModule, ReportsRoutingModule],
+  imports: [
+    CommonModule,
+    SharedModule,
+    ReportsSharedModule,
+    ReportsRoutingModule,
+    OrganizationBadgeModule,
+    PipesModule,
+  ],
   declarations: [
     BreachReportComponent,
     ExposedPasswordsReportComponent,
@@ -25,7 +34,6 @@ import { ReportsSharedModule } from "./shared";
     ReusedPasswordsReportComponent,
     UnsecuredWebsitesReportComponent,
     WeakPasswordsReportComponent,
-    WeakPasswordsReportComponent,
   ],
 })
 export class ReportsModule {}
diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts
index 091f8ec68b0..c96e1227c8c 100644
--- a/apps/web/src/app/shared/loose-components.module.ts
+++ b/apps/web/src/app/shared/loose-components.module.ts
@@ -73,7 +73,6 @@ import { SettingsComponent } from "../settings/settings.component";
 import { VaultTimeoutInputComponent } from "../settings/vault-timeout-input.component";
 import { GeneratorComponent } from "../tools/generator.component";
 import { PasswordGeneratorHistoryComponent } from "../tools/password-generator-history.component";
-import { AccessComponent } from "../tools/send/access.component";
 import { AddEditComponent as SendAddEditComponent } from "../tools/send/add-edit.component";
 import { ToolsComponent } from "../tools/tools.component";
 import { PremiumBadgeComponent } from "../vault/components/premium-badge.component";
@@ -82,6 +81,8 @@ import { AddEditComponent } from "../vault/individual-vault/add-edit.component";
 import { AttachmentsComponent } from "../vault/individual-vault/attachments.component";
 import { CollectionsComponent } from "../vault/individual-vault/collections.component";
 import { FolderAddEditComponent } from "../vault/individual-vault/folder-add-edit.component";
+import { OrganizationBadgeModule } from "../vault/individual-vault/organization-badge/organization-badge.module";
+import { PipesModule } from "../vault/individual-vault/pipes/pipes.module";
 import { ShareComponent } from "../vault/individual-vault/share.component";
 import { AddEditComponent as OrgAddEditComponent } from "../vault/org-vault/add-edit.component";
 import { AttachmentsComponent as OrgAttachmentsComponent } from "../vault/org-vault/attachments.component";
@@ -103,12 +104,13 @@ import { SharedModule } from "./shared.module";
     DynamicAvatarComponent,
     EnvironmentSelectorModule,
     AccountFingerprintComponent,
+    OrganizationBadgeModule,
+    PipesModule,
     PasswordCalloutComponent,
   ],
   declarations: [
     AcceptFamilySponsorshipComponent,
     AcceptOrganizationComponent,
-    AccessComponent,
     AccountComponent,
     AddEditComponent,
     AddEditCustomFieldsComponent,
@@ -191,7 +193,6 @@ import { SharedModule } from "./shared.module";
     UserVerificationModule,
     PremiumBadgeComponent,
     AcceptOrganizationComponent,
-    AccessComponent,
     AccountComponent,
     AddEditComponent,
     AddEditCustomFieldsComponent,
diff --git a/apps/web/src/app/tools/send/access.component.html b/apps/web/src/app/tools/send/access.component.html
index 634d0bbf40b..7b891f4f6f4 100644
--- a/apps/web/src/app/tools/send/access.component.html
+++ b/apps/web/src/app/tools/send/access.component.html
@@ -1,150 +1,84 @@
-<form #form (ngSubmit)="load()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-  <div class="row justify-content-center mt-5">
-    <div class="col-12">
-      <h1 class="lead text-center mb-4">Bitwarden Send</h1>
+<form [formGroup]="formGroup" [bitSubmit]="load">
+  <div
+    class="tw-mx-auto tw-mt-5 tw-flex tw-max-w-xl tw-flex-col tw-items-center tw-justify-center tw-p-8"
+  >
+    <img class="logo logo-themed" alt="Bitwarden" />
+    <div class="tw-mt-5 tw-w-full">
+      <h2 bitTypography="h2" class="tw-mb-4 tw-text-center">View Send</h2>
     </div>
-    <div class="col-12 text-center" *ngIf="creatorIdentifier != null">
-      <p>{{ "sendCreatorIdentifier" | i18n : creatorIdentifier }}</p>
+    <div class="tw-w-full tw-text-center" *ngIf="creatorIdentifier != null">
+      <p>{{ "sendAccessCreatorIdentifier" | i18n : creatorIdentifier }}</p>
     </div>
-    <div class="col-8" *ngIf="hideEmail">
-      <app-callout type="warning" title="{{ 'warning' | i18n }}">
-        {{ "viewSendHiddenEmailWarning" | i18n }}
-        <a href="https://bitwarden.com/help/receive-send/" target="_blank">{{
-          "learnMore" | i18n
-        }}</a
-        >.
-      </app-callout>
-    </div>
-  </div>
-  <div class="row justify-content-center">
-    <div class="col-5">
-      <div class="card d-block">
-        <div class="card-body" *ngIf="loading" class="text-center">
-          <i
-            class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
-            title="{{ 'loading' | i18n }}"
-            aria-hidden="true"
-          ></i>
-          <span class="sr-only">{{ "loading" | i18n }}</span>
-        </div>
-        <div class="card-body" *ngIf="!loading && passwordRequired">
-          <p>{{ "sendProtectedPassword" | i18n }}</p>
-          <p>{{ "sendProtectedPasswordDontKnow" | i18n }}</p>
-          <div class="form-group">
-            <label for="password">{{ "password" | i18n }}</label>
-            <input
-              id="password"
-              type="password"
-              name="Password"
-              class="text-monospace form-control"
-              [(ngModel)]="password"
-              required
-              appInputVerbatim
-              appAutofocus
-            />
-          </div>
-          <div class="d-flex">
-            <button
-              type="submit"
-              class="btn btn-primary btn-block btn-submit"
-              [disabled]="form.loading"
-            >
-              <span>
-                <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}
-              </span>
-              <i
-                class="bwi bwi-spinner bwi-spin"
-                title="{{ 'loading' | i18n }}"
-                aria-hidden="true"
-              ></i>
-            </button>
-          </div>
-        </div>
-        <div class="card-body" *ngIf="!loading && unavailable">
-          {{ "sendAccessUnavailable" | i18n }}
-        </div>
-        <div class="card-body" *ngIf="!loading && error">
-          {{ "unexpectedError" | i18n }}
-        </div>
-        <div class="card-body" *ngIf="!loading && !passwordRequired && send">
-          <p class="text-center">
+    <bit-callout *ngIf="hideEmail" type="warning" title="{{ 'warning' | i18n }}">
+      {{ "viewSendHiddenEmailWarning" | i18n }}
+      <a
+        bitLink
+        href="https://bitwarden.com/help/receive-send/"
+        target="_blank"
+        rel="noopener noreferrer"
+        >{{ "learnMore" | i18n }}</a
+      >.
+    </bit-callout>
+    <div
+      class="tw-mt-3 tw-w-10/12 tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-6"
+    >
+      <ng-container *ngIf="!loading; else spinner">
+        <app-send-access-password
+          (setPasswordEvent)="setPassword($event)"
+          *ngIf="passwordRequired && !error"
+        ></app-send-access-password>
+        <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="unavailable">
+          <ng-container slot="description">{{ "sendAccessUnavailable" | i18n }}</ng-container>
+        </bit-no-items>
+        <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="error">
+          <ng-container slot="description">{{ "unexpectedErrorSend" | i18n }}</ng-container>
+        </bit-no-items>
+        <div *ngIf="!passwordRequired && send && !error && !unavailable">
+          <p class="tw-text-center">
             <b>{{ send.name }}</b>
           </p>
           <hr />
           <!-- Text -->
           <ng-container *ngIf="send.type === sendType.Text">
-            <app-callout *ngIf="send.text.hidden" type="tip">{{
-              "sendHiddenByDefault" | i18n
-            }}</app-callout>
-            <div class="form-group">
-              <textarea
-                id="text"
-                rows="8"
-                name="Text"
-                [ngModel]="sendText"
-                class="form-control"
-                readonly
-              ></textarea>
-            </div>
-            <button
-              class="btn btn-block btn-link"
-              type="button"
-              (click)="toggleText()"
-              *ngIf="send.text.hidden"
-            >
-              <i
-                class="bwi bwi-lg"
-                aria-hidden="true"
-                [ngClass]="{ 'bwi-eye': !showText, 'bwi-eye-slash': showText }"
-              ></i>
-              {{ "toggleVisibility" | i18n }}
-            </button>
-            <button class="btn btn-block btn-link" type="button" (click)="copyText()">
-              <i class="bwi bwi-copy" aria-hidden="true"></i> {{ "copyValue" | i18n }}
-            </button>
+            <app-send-access-text [send]="send"></app-send-access-text>
           </ng-container>
           <!-- File -->
           <ng-container *ngIf="send.type === sendType.File">
-            <p>{{ send.file.fileName }}</p>
-            <button
-              class="btn btn-primary btn-block"
-              type="button"
-              (click)="download()"
-              *ngIf="!downloading"
-            >
-              <i class="bwi bwi-download" aria-hidden="true"></i>
-              {{ "downloadFile" | i18n }} ({{ send.file.sizeName }})
-            </button>
-            <button
-              class="btn btn-primary btn-block"
-              type="button"
-              *ngIf="downloading"
-              disabled="true"
-            >
-              <i
-                class="bwi bwi-spinner bwi-spin"
-                title="{{ 'loading' | i18n }}"
-                aria-hidden="true"
-              ></i>
-            </button>
+            <app-send-access-file
+              [send]="send"
+              [decKey]="decKey"
+              [accessRequest]="accessRequest"
+            ></app-send-access-file>
           </ng-container>
-          <p *ngIf="expirationDate" class="text-center text-muted">
+          <p *ngIf="expirationDate" class="tw-text-center tw-text-muted">
             Expires: {{ expirationDate | date : "medium" }}
           </p>
         </div>
-      </div>
+      </ng-container>
+      <ng-template #spinner>
+        <div class="tw-text-center">
+          <i
+            class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
+            title="{{ 'loading' | i18n }}"
+            aria-hidden="true"
+          ></i>
+          <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+        </div>
+      </ng-template>
     </div>
-    <div class="col-12 text-center mt-5 text-muted">
-      <p class="mb-0">
-        {{ "sendAccessTaglineProductDesc" | i18n }}<br />
+    <div class="tw-mt-5 tw-w-10/12 tw-text-center tw-text-muted">
+      <p bitTypography="body2" class="tw-mb-0">
+        {{ "sendAccessTaglineProductDesc" | i18n }}
         {{ "sendAccessTaglineLearnMore" | i18n }}
-        <a href="https://www.bitwarden.com/products/send?source=web-vault" target="_blank"
+        <a
+          bitLink
+          href="https://www.bitwarden.com/products/send?source=web-vault"
+          target="_blank"
+          rel="noopener noreferrer"
           >Bitwarden Send</a
         >
         {{ "sendAccessTaglineOr" | i18n }}
-        <a href="https://vault.bitwarden.com/#/register" target="_blank">{{
-          "sendAccessTaglineSignUp" | i18n
-        }}</a>
+        <a bitLink routerLink="/register" target="_blank">{{ "sendAccessTaglineSignUp" | i18n }}</a>
         {{ "sendAccessTaglineTryToday" | i18n }}
       </p>
     </div>
diff --git a/apps/web/src/app/tools/send/access.component.ts b/apps/web/src/app/tools/send/access.component.ts
index 180acfd69f7..d01bc9c52ff 100644
--- a/apps/web/src/app/tools/send/access.component.ts
+++ b/apps/web/src/app/tools/send/access.component.ts
@@ -1,16 +1,14 @@
 import { Component, OnInit } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 
-import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { SEND_KDF_ITERATIONS } from "@bitwarden/common/enums";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
 import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
-import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { EncArrayBuffer } from "@bitwarden/common/platform/models/domain/enc-array-buffer";
 import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
 import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
 import { SendAccess } from "@bitwarden/common/tools/send/models/domain/send-access";
@@ -18,56 +16,65 @@ import { SendAccessRequest } from "@bitwarden/common/tools/send/models/request/s
 import { SendAccessResponse } from "@bitwarden/common/tools/send/models/response/send-access.response";
 import { SendAccessView } from "@bitwarden/common/tools/send/models/view/send-access.view";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
+import { NoItemsModule } from "@bitwarden/components";
+
+import { SharedModule } from "../../shared";
+
+import { ExpiredSend } from "./icons/expired-send.icon";
+import { SendAccessFileComponent } from "./send-access-file.component";
+import { SendAccessPasswordComponent } from "./send-access-password.component";
+import { SendAccessTextComponent } from "./send-access-text.component";
 
 @Component({
   selector: "app-send-access",
   templateUrl: "access.component.html",
+  standalone: true,
+  imports: [
+    SendAccessFileComponent,
+    SendAccessTextComponent,
+    SendAccessPasswordComponent,
+    SharedModule,
+    NoItemsModule,
+  ],
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class AccessComponent implements OnInit {
-  send: SendAccessView;
-  sendType = SendType;
-  downloading = false;
-  loading = true;
-  passwordRequired = false;
-  formPromise: Promise<SendAccessResponse>;
-  password: string;
-  showText = false;
-  unavailable = false;
-  error = false;
-  hideEmail = false;
+  protected send: SendAccessView;
+  protected sendType = SendType;
+  protected loading = true;
+  protected passwordRequired = false;
+  protected formPromise: Promise<SendAccessResponse>;
+  protected password: string;
+  protected unavailable = false;
+  protected error = false;
+  protected hideEmail = false;
+  protected decKey: SymmetricCryptoKey;
+  protected accessRequest: SendAccessRequest;
+  protected expiredSendIcon = ExpiredSend;
+
+  protected formGroup = this.formBuilder.group({});
 
   private id: string;
   private key: string;
-  private decKey: SymmetricCryptoKey;
-  private accessRequest: SendAccessRequest;
 
   constructor(
-    private i18nService: I18nService,
     private cryptoFunctionService: CryptoFunctionService,
-    private apiService: ApiService,
-    private platformUtilsService: PlatformUtilsService,
     private route: ActivatedRoute,
     private cryptoService: CryptoService,
-    private fileDownloadService: FileDownloadService,
-    private sendApiService: SendApiService
+    private sendApiService: SendApiService,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    protected formBuilder: FormBuilder
   ) {}
 
-  get sendText() {
-    if (this.send == null || this.send.text == null) {
-      return null;
-    }
-    return this.showText ? this.send.text.text : this.send.text.maskedText;
-  }
-
-  get expirationDate() {
+  protected get expirationDate() {
     if (this.send == null || this.send.expirationDate == null) {
       return null;
     }
     return this.send.expirationDate;
   }
 
-  get creatorIdentifier() {
+  protected get creatorIdentifier() {
     if (this.send == null || this.send.creatorIdentifier == null) {
       return null;
     }
@@ -86,77 +93,22 @@ export class AccessComponent implements OnInit {
     });
   }
 
-  async download() {
-    if (this.send == null || this.decKey == null) {
-      return;
-    }
-
-    if (this.downloading) {
-      return;
-    }
-
-    const downloadData = await this.sendApiService.getSendFileDownloadData(
-      this.send,
-      this.accessRequest
-    );
-
-    if (Utils.isNullOrWhitespace(downloadData.url)) {
-      this.platformUtilsService.showToast("error", null, this.i18nService.t("missingSendFile"));
-      return;
-    }
-
-    this.downloading = true;
-    const response = await fetch(new Request(downloadData.url, { cache: "no-store" }));
-    if (response.status !== 200) {
-      this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
-      this.downloading = false;
-      return;
-    }
-
-    try {
-      const encBuf = await EncArrayBuffer.fromResponse(response);
-      const decBuf = await this.cryptoService.decryptFromBytes(encBuf, this.decKey);
-      this.fileDownloadService.download({
-        fileName: this.send.file.fileName,
-        blobData: decBuf,
-        downloadMethod: "save",
-      });
-    } catch (e) {
-      this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
-    }
-
-    this.downloading = false;
-  }
-
-  copyText() {
-    this.platformUtilsService.copyToClipboard(this.send.text.text);
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("valueCopied", this.i18nService.t("sendTypeText"))
-    );
-  }
-
-  toggleText() {
-    this.showText = !this.showText;
-  }
-
-  async load() {
+  protected load = async () => {
     this.unavailable = false;
     this.error = false;
     this.hideEmail = false;
-    const keyArray = Utils.fromUrlB64ToArray(this.key);
-    this.accessRequest = new SendAccessRequest();
-    if (this.password != null) {
-      const passwordHash = await this.cryptoFunctionService.pbkdf2(
-        this.password,
-        keyArray,
-        "sha256",
-        SEND_KDF_ITERATIONS
-      );
-      this.accessRequest.password = Utils.fromBufferToB64(passwordHash);
-    }
     try {
+      const keyArray = Utils.fromUrlB64ToArray(this.key);
+      this.accessRequest = new SendAccessRequest();
+      if (this.password != null) {
+        const passwordHash = await this.cryptoFunctionService.pbkdf2(
+          this.password,
+          keyArray,
+          "sha256",
+          SEND_KDF_ITERATIONS
+        );
+        this.accessRequest.password = Utils.fromBufferToB64(passwordHash);
+      }
       let sendResponse: SendAccessResponse = null;
       if (this.loading) {
         sendResponse = await this.sendApiService.postSendAccess(this.id, this.accessRequest);
@@ -168,16 +120,23 @@ export class AccessComponent implements OnInit {
       const sendAccess = new SendAccess(sendResponse);
       this.decKey = await this.cryptoService.makeSendKey(keyArray);
       this.send = await sendAccess.decrypt(this.decKey);
-      this.showText = this.send.text != null ? !this.send.text.hidden : true;
     } catch (e) {
       if (e instanceof ErrorResponse) {
         if (e.statusCode === 401) {
           this.passwordRequired = true;
         } else if (e.statusCode === 404) {
           this.unavailable = true;
+        } else if (e.statusCode === 400) {
+          this.platformUtilsService.showToast(
+            "error",
+            this.i18nService.t("errorOccurred"),
+            e.message
+          );
         } else {
           this.error = true;
         }
+      } else {
+        this.error = true;
       }
     }
     this.loading = false;
@@ -186,5 +145,9 @@ export class AccessComponent implements OnInit {
       !this.passwordRequired &&
       !this.loading &&
       !this.unavailable;
+  };
+
+  protected setPassword(password: string) {
+    this.password = password;
   }
 }
diff --git a/apps/web/src/app/tools/send/icons/expired-send.icon.ts b/apps/web/src/app/tools/send/icons/expired-send.icon.ts
new file mode 100644
index 00000000000..b39cdca797d
--- /dev/null
+++ b/apps/web/src/app/tools/send/icons/expired-send.icon.ts
@@ -0,0 +1,11 @@
+import { svgIcon } from "@bitwarden/components";
+
+export const ExpiredSend = svgIcon`
+    <svg xmlns="http://www.w3.org/2000/svg" width="130" height="130" fill="none">
+        <path class="tw-fill-secondary-500" fill-rule="evenodd" d="M22.75 29.695c0-4.991 4.074-9.037 9.1-9.037h14.3v2.582h-14.3c-3.59 0-6.5 2.89-6.5 6.455v68.428h-2.6V29.696Zm75.4 76.175V68.428h2.6v37.442c0 4.991-4.074 9.038-9.1 9.038h-53.3v-2.582h53.3c3.59 0 6.5-2.891 6.5-6.456Z" clip-rule="evenodd"/>
+        <path class="tw-fill-secondary-500" fill-rule="evenodd" d="M43.55 37.441c0-17.113 13.969-30.986 31.2-30.986s31.2 13.873 31.2 30.986c0 17.114-13.969 30.987-31.2 30.987s-31.2-13.873-31.2-30.986Zm31.2-33.568c-18.667 0-33.8 15.03-33.8 33.569S56.083 71.01 74.75 71.01c18.668 0 33.8-15.03 33.8-33.569S93.418 3.873 74.75 3.873Z" clip-rule="evenodd"/>
+        <path class="tw-fill-secondary-500" fill-rule="evenodd" d="M73.972 65.2c0 .357.291.646.65.646 15.968 0 28.925-12.71 28.925-28.404a.648.648 0 0 0-.65-.646.648.648 0 0 0-.65.646c0 14.967-12.36 27.113-27.625 27.113a.648.648 0 0 0-.65.645ZM46.347 38.087c.36 0 .65-.289.65-.645 0-14.968 12.361-27.113 27.625-27.113.36 0 .65-.29.65-.646a.648.648 0 0 0-.65-.646c-15.968 0-28.925 12.71-28.925 28.405 0 .356.291.645.65.645Z" clip-rule="evenodd"/>
+        <path class="tw-fill-secondary-500" fill-rule="evenodd" d="M123.729 81.869a1.926 1.926 0 0 1 0 2.739l-1.439 1.43a1.96 1.96 0 0 1-2.758 0L95.577 62.245a1.306 1.306 0 0 0-1.839 0 1.285 1.285 0 0 0 0 1.826l23.956 23.791a4.571 4.571 0 0 0 6.434 0l1.44-1.43a4.497 4.497 0 0 0 0-6.39l-23.956-23.791a1.306 1.306 0 0 0-1.838 0 1.285 1.285 0 0 0 0 1.825l23.955 23.792ZM34.45 36.797c0-.714.582-1.292 1.3-1.292h5.85c.718 0 1.3.578 1.3 1.291 0 .714-.582 1.292-1.3 1.292h-5.85c-.718 0-1.3-.578-1.3-1.291Zm0 10.973c0-.713.582-1.29 1.3-1.29h7.8c.718 0 1.3.578 1.3 1.29 0 .714-.582 1.292-1.3 1.292h-7.8c-.718 0-1.3-.578-1.3-1.291Zm0 10.975c0-.713.582-1.291 1.3-1.291H49.4c.718 0 1.3.578 1.3 1.29 0 .714-.582 1.292-1.3 1.292H35.75c-.718 0-1.3-.578-1.3-1.291Zm0 10.975c0-.714.582-1.292 1.3-1.292H72.8c.718 0 1.3.578 1.3 1.291s-.582 1.291-1.3 1.291H35.75c-.718 0-1.3-.578-1.3-1.29Zm0 10.973c0-.713.582-1.29 1.3-1.29h27.3c.718 0 1.3.577 1.3 1.29 0 .713-.582 1.291-1.3 1.291h-27.3c-.718 0-1.3-.578-1.3-1.29Zm6.5 10.975c0-.713.582-1.291 1.3-1.291H88.4c.718 0 1.3.578 1.3 1.291s-.582 1.291-1.3 1.291H42.25c-.718 0-1.3-.578-1.3-1.291Zm0 10.974c0-.713.582-1.291 1.3-1.291H88.4c.718 0 1.3.578 1.3 1.291s-.582 1.291-1.3 1.291H42.25c-.718 0-1.3-.578-1.3-1.291Z" clip-rule="evenodd"/>
+        <path class="tw-fill-secondary-500" fill-rule="evenodd" d="M43.664 86.742c.412.292.617.794.524 1.289l-6.366 33.964a1.305 1.305 0 0 1-1.745.968l-9.692-3.707-4.914 5.689c-.355.41-.928.557-1.438.37a1.292 1.292 0 0 1-.849-1.211v-8.444c0-.305.108-.599.306-.832l14.73-17.357a1.306 1.306 0 0 1 1.831-.156c.549.46.619 1.275.156 1.82L21.784 116.13v4.485l3.225-3.733c.358-.414.94-.56 1.454-.364l9.089 3.476 5.567-29.698-32.42 18.385 6.813 3.082c.653.296.941 1.061.643 1.71a1.303 1.303 0 0 1-1.722.64l-9.122-4.128a1.289 1.289 0 0 1-.106-2.296l37.06-21.017c.44-.249.986-.222 1.399.07Z" clip-rule="evenodd"/>
+    </svg>
+`;
diff --git a/apps/web/src/app/tools/send/send-access-file.component.html b/apps/web/src/app/tools/send/send-access-file.component.html
new file mode 100644
index 00000000000..82880407809
--- /dev/null
+++ b/apps/web/src/app/tools/send/send-access-file.component.html
@@ -0,0 +1,5 @@
+<p>{{ send.file.fileName }}</p>
+<button bitButton type="button" buttonType="primary" [bitAction]="download" [block]="true">
+  <i class="bwi bwi-download" aria-hidden="true"></i>
+  {{ "downloadAttachments" | i18n }} ({{ send.file.sizeName }})
+</button>
diff --git a/apps/web/src/app/tools/send/send-access-file.component.ts b/apps/web/src/app/tools/send/send-access-file.component.ts
new file mode 100644
index 00000000000..c4e71a51629
--- /dev/null
+++ b/apps/web/src/app/tools/send/send-access-file.component.ts
@@ -0,0 +1,67 @@
+import { Component, Input } from "@angular/core";
+
+import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
+import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { EncArrayBuffer } from "@bitwarden/common/platform/models/domain/enc-array-buffer";
+import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
+import { SendAccessRequest } from "@bitwarden/common/tools/send/models/request/send-access.request";
+import { SendAccessView } from "@bitwarden/common/tools/send/models/view/send-access.view";
+import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
+
+import { SharedModule } from "../../shared";
+
+@Component({
+  selector: "app-send-access-file",
+  templateUrl: "send-access-file.component.html",
+  imports: [SharedModule],
+  standalone: true,
+})
+export class SendAccessFileComponent {
+  @Input() send: SendAccessView;
+  @Input() decKey: SymmetricCryptoKey;
+  @Input() accessRequest: SendAccessRequest;
+  constructor(
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService,
+    private cryptoService: CryptoService,
+    private fileDownloadService: FileDownloadService,
+    private sendApiService: SendApiService
+  ) {}
+
+  protected download = async () => {
+    if (this.send == null || this.decKey == null) {
+      return;
+    }
+
+    const downloadData = await this.sendApiService.getSendFileDownloadData(
+      this.send,
+      this.accessRequest
+    );
+
+    if (Utils.isNullOrWhitespace(downloadData.url)) {
+      this.platformUtilsService.showToast("error", null, this.i18nService.t("missingSendFile"));
+      return;
+    }
+
+    const response = await fetch(new Request(downloadData.url, { cache: "no-store" }));
+    if (response.status !== 200) {
+      this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
+      return;
+    }
+
+    try {
+      const encBuf = await EncArrayBuffer.fromResponse(response);
+      const decBuf = await this.cryptoService.decryptFromBytes(encBuf, this.decKey);
+      this.fileDownloadService.download({
+        fileName: this.send.file.fileName,
+        blobData: decBuf,
+        downloadMethod: "save",
+      });
+    } catch (e) {
+      this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
+    }
+  };
+}
diff --git a/apps/web/src/app/tools/send/send-access-password.component.html b/apps/web/src/app/tools/send/send-access-password.component.html
new file mode 100644
index 00000000000..8bb2c306010
--- /dev/null
+++ b/apps/web/src/app/tools/send/send-access-password.component.html
@@ -0,0 +1,28 @@
+<p bitTypography="body1">{{ "sendProtectedPassword" | i18n }}</p>
+<p bitTypography="body1">{{ "sendProtectedPasswordDontKnow" | i18n }}</p>
+<div class="tw-mb-3" [formGroup]="formGroup">
+  <bit-form-field>
+    <bit-label>{{ "password" | i18n }}</bit-label>
+    <input
+      bitInput
+      type="password"
+      formControlName="password"
+      required
+      appInputVerbatim
+      appAutofocus
+    />
+    <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+  </bit-form-field>
+  <div class="tw-flex">
+    <button
+      bitButton
+      bitFormButton
+      type="submit"
+      buttonType="primary"
+      [loading]="loading"
+      [block]="true"
+    >
+      <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }} </span>
+    </button>
+  </div>
+</div>
diff --git a/apps/web/src/app/tools/send/send-access-password.component.ts b/apps/web/src/app/tools/send/send-access-password.component.ts
new file mode 100644
index 00000000000..07a08fda7cd
--- /dev/null
+++ b/apps/web/src/app/tools/send/send-access-password.component.ts
@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
+import { Subject, takeUntil } from "rxjs";
+
+import { SharedModule } from "../../shared";
+
+@Component({
+  selector: "app-send-access-password",
+  templateUrl: "send-access-password.component.html",
+  imports: [SharedModule],
+  standalone: true,
+})
+export class SendAccessPasswordComponent {
+  private destroy$ = new Subject<void>();
+  protected formGroup = this.formBuilder.group({
+    password: ["", [Validators.required]],
+  });
+
+  @Input() loading: boolean;
+  @Output() setPasswordEvent = new EventEmitter<string>();
+
+  constructor(private formBuilder: FormBuilder) {}
+
+  async ngOnInit() {
+    this.formGroup.controls.password.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((val) => {
+        this.setPasswordEvent.emit(val);
+      });
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}
diff --git a/apps/web/src/app/tools/send/send-access-text.component.html b/apps/web/src/app/tools/send/send-access-text.component.html
new file mode 100644
index 00000000000..ca772251146
--- /dev/null
+++ b/apps/web/src/app/tools/send/send-access-text.component.html
@@ -0,0 +1,26 @@
+<bit-callout *ngIf="send.text.hidden" type="info">{{ "sendHiddenByDefault" | i18n }}</bit-callout>
+<bit-form-field [formGroup]="formGroup">
+  <textarea id="text" bitInput rows="8" name="Text" formControlName="sendText" readonly></textarea>
+</bit-form-field>
+<div class="tw-mb-3">
+  <button
+    bitButton
+    type="button"
+    buttonType="secondary"
+    [block]="true"
+    (click)="toggleText()"
+    *ngIf="send.text.hidden"
+  >
+    <i
+      class="bwi bwi-lg"
+      aria-hidden="true"
+      [ngClass]="{ 'bwi-eye': !showText, 'bwi-eye-slash': showText }"
+    ></i>
+    {{ "toggleVisibility" | i18n }}
+  </button>
+</div>
+<div class="tw-mb-3">
+  <button bitButton type="button" buttonType="primary" [block]="true" (click)="copyText()">
+    <i class="bwi bwi-clone" aria-hidden="true"></i> {{ "copyValue" | i18n }}
+  </button>
+</div>
diff --git a/apps/web/src/app/tools/send/send-access-text.component.ts b/apps/web/src/app/tools/send/send-access-text.component.ts
new file mode 100644
index 00000000000..4c3c9c89675
--- /dev/null
+++ b/apps/web/src/app/tools/send/send-access-text.component.ts
@@ -0,0 +1,59 @@
+import { Component, Input } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { SendAccessView } from "@bitwarden/common/tools/send/models/view/send-access.view";
+
+import { SharedModule } from "../../shared";
+
+@Component({
+  selector: "app-send-access-text",
+  templateUrl: "send-access-text.component.html",
+  imports: [SharedModule],
+  standalone: true,
+})
+export class SendAccessTextComponent {
+  private _send: SendAccessView = null;
+  protected showText = false;
+
+  protected formGroup = this.formBuilder.group({
+    sendText: [""],
+  });
+
+  constructor(
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService,
+    private formBuilder: FormBuilder
+  ) {}
+
+  get send(): SendAccessView {
+    return this._send;
+  }
+
+  @Input() set send(value: SendAccessView) {
+    this._send = value;
+    this.showText = this.send.text != null ? !this.send.text.hidden : true;
+
+    if (this.send == null || this.send.text == null) {
+      return;
+    }
+
+    this.formGroup.controls.sendText.patchValue(
+      this.showText ? this.send.text.text : this.send.text.maskedText
+    );
+  }
+
+  protected copyText() {
+    this.platformUtilsService.copyToClipboard(this.send.text.text);
+    this.platformUtilsService.showToast(
+      "success",
+      null,
+      this.i18nService.t("valueCopied", this.i18nService.t("sendTypeText"))
+    );
+  }
+
+  protected toggleText() {
+    this.showText = !this.showText;
+  }
+}
diff --git a/apps/web/src/locales/af/messages.json b/apps/web/src/locales/af/messages.json
index 707d1859d2e..d2549d6df8d 100644
--- a/apps/web/src/locales/af/messages.json
+++ b/apps/web/src/locales/af/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Hierdie send is by verstek versteek. U kan sy sigbaarheid wissel deur die knop hier onder.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Laai lêer af"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "om dit vandag te probeer.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden-gebruiker $USER_IDENTIFIER$ het die volgende met u gedeel",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Volgende"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Gekose streekvlag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/ar/messages.json b/apps/web/src/locales/ar/messages.json
index 73fa96dbbb3..bbb7d9ba4b2 100644
--- a/apps/web/src/locales/ar/messages.json
+++ b/apps/web/src/locales/ar/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "لتجربته اليوم.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/az/messages.json b/apps/web/src/locales/az/messages.json
index 8807d07e090..298c927bad1 100644
--- a/apps/web/src/locales/az/messages.json
+++ b/apps/web/src/locales/az/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Bu \"send\" ilkin olaraq gizlidir. Aşağıdakı düyməni istifadə edərək görünməni dəyişdirə bilərsiniz.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Faylı endir"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "Müraciət etməyə çalışdığınız Send yoxdur və ya artıq əlçatmazdır.",
@@ -4609,8 +4609,8 @@
     "message": "bu gün sınamaq üçün.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "$USER_IDENTIFIER$ Bitwarden istifadəçisi aşağıdakıları sizinlə paylaşdı",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Növbəti"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO girişi tələb olunur"
+  },
   "selectedRegionFlag": {
     "message": "Seçilmiş bölgə bayrağı"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/be/messages.json b/apps/web/src/locales/be/messages.json
index 464f0b0925f..578d711ac3d 100644
--- a/apps/web/src/locales/be/messages.json
+++ b/apps/web/src/locales/be/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Прадвызначана гэты Send схаваны. Вы можаце змяніць яго бачнасць выкарыстоўваючы кнопку ніжэй.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Спампаваць файл"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "Send да якога вы спрабуеце атрымаць доступ не існуе або больш недаступны.",
@@ -4609,8 +4609,8 @@
     "message": "каб паспрабаваць сёння.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Карыстальнік Bitwarden $USER_IDENTIFIER$ абагуліў з вамі",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Далей"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Сцяг выбранага рэгіёна"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/bg/messages.json b/apps/web/src/locales/bg/messages.json
index 53be0706293..5a5f821e1a5 100644
--- a/apps/web/src/locales/bg/messages.json
+++ b/apps/web/src/locales/bg/messages.json
@@ -2763,7 +2763,7 @@
     "message": "Трезор по уеб"
   },
   "cli": {
-    "message": "CLI"
+    "message": "ИКР"
   },
   "bitWebVault": {
     "message": "Трезор по уеб"
@@ -4218,8 +4218,8 @@
     "message": "Стандартно изпращането е скрито. Може да промените това като натиснете бутона по-долу.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Изтеглете файл"
+  "downloadAttachments": {
+    "message": "Сваляне на прикачените файлове"
   },
   "sendAccessUnavailable": {
     "message": "Изпращането, което се опитвате да достъпите, е изтрито или вече не е налично.",
@@ -4609,8 +4609,8 @@
     "message": "за да го пробвате още днес.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Потребителят на Битуорден — $USER_IDENTIFIER$, сподели следното с вас",
+  "sendAccessCreatorIdentifier": {
+    "message": "Членът на Битуорден — $USER_IDENTIFIER$, сподели следното с вас",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "Необходимо е вписване чрез еднократно удостоверяване"
+  },
   "selectedRegionFlag": {
     "message": "Знаме на избрания регион"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Достъпът до проекта е актуализиран"
+  },
+  "unexpectedErrorSend": {
+    "message": "Възникна неочаквана грешка при зареждането на това изпращане. Опитайте отново по-късно."
   }
 }
diff --git a/apps/web/src/locales/bn/messages.json b/apps/web/src/locales/bn/messages.json
index be343cbb0ab..8e271a0c621 100644
--- a/apps/web/src/locales/bn/messages.json
+++ b/apps/web/src/locales/bn/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/bs/messages.json b/apps/web/src/locales/bs/messages.json
index e2ee1b4f675..f4ae92cb1bd 100644
--- a/apps/web/src/locales/bs/messages.json
+++ b/apps/web/src/locales/bs/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/ca/messages.json b/apps/web/src/locales/ca/messages.json
index c5b8467d13a..7e7c4c4b114 100644
--- a/apps/web/src/locales/ca/messages.json
+++ b/apps/web/src/locales/ca/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Aquest Send està ocult per defecte. Podeu canviar la seua visibilitat mitjançant el botó següent.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Baixa el fitxer"
+  "downloadAttachments": {
+    "message": "Baixa els fitxers adjunts"
   },
   "sendAccessUnavailable": {
     "message": "L'enviament al qual intenteu accedir no existeix o ja no està disponible.",
@@ -4609,8 +4609,8 @@
     "message": "per provar-ho hui.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "L'usuari bitwarden $USER_IDENTIFIER$ ha compartit el següent amb vosaltres",
+  "sendAccessCreatorIdentifier": {
+    "message": "El membre de Bitwarden $USER_IDENTIFIER$ us ha compartit això",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Següent"
   },
+  "ssoLoginIsRequired": {
+    "message": "Inici de sessió SSO necessari"
+  },
   "selectedRegionFlag": {
     "message": "Bandera de la regió seleccionada"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "S'ha actualitzat l'accés al projecte"
+  },
+  "unexpectedErrorSend": {
+    "message": "S'ha produït un error inesperat en carregar aquest enviament. Torneu a provar-ho més tard."
   }
 }
diff --git a/apps/web/src/locales/cs/messages.json b/apps/web/src/locales/cs/messages.json
index 6105ceae85a..c567d2981e8 100644
--- a/apps/web/src/locales/cs/messages.json
+++ b/apps/web/src/locales/cs/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Tento Send je ve výchozím nastavení skrytý. Viditelnost můžete přepnout pomocí tlačítka níže.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Stáhnout soubor"
+  "downloadAttachments": {
+    "message": "Stáhnout přílohy"
   },
   "sendAccessUnavailable": {
     "message": "Send, ke kterému se pokoušíte přistupovat, neexistuje nebo již není k dispozici.",
@@ -4609,7 +4609,7 @@
     "message": "abyste to vyzkoušeli ještě dnes.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
+  "sendAccessCreatorIdentifier": {
     "message": "Uživatel Bitwarden $USER_IDENTIFIER$ s Vámi sdílí následující",
     "placeholders": {
       "user_identifier": {
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Další"
   },
+  "ssoLoginIsRequired": {
+    "message": "Přihlášení SSO je povinné"
+  },
   "selectedRegionFlag": {
     "message": "Vlajka zvoleného regionu"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Přístup k projektu byl aktualizován"
+  },
+  "unexpectedErrorSend": {
+    "message": "Při načítání tohoto Sendu došlo k neočekávané chybě. Zkuste to znovu později."
   }
 }
diff --git a/apps/web/src/locales/cy/messages.json b/apps/web/src/locales/cy/messages.json
index c901cb95299..77e07d67954 100644
--- a/apps/web/src/locales/cy/messages.json
+++ b/apps/web/src/locales/cy/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/da/messages.json b/apps/web/src/locales/da/messages.json
index 19f847d13ab..c4c294b6e83 100644
--- a/apps/web/src/locales/da/messages.json
+++ b/apps/web/src/locales/da/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Denne Send er som standard skjult. Dens synlighed kan ændres vha. knappen nedenfor.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download fil"
+  "downloadAttachments": {
+    "message": "Download vedhæftninger"
   },
   "sendAccessUnavailable": {
     "message": "Den Send, der forsøges tilgået, findes ikke, eller er ikke længere tilgængelig.",
@@ -4609,8 +4609,8 @@
     "message": "for at prøve det i dag.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden-bruger $USER_IDENTIFIER$ delte flg. med dig",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden-brugeren $USER_IDENTIFIER$ delte flg. med dig",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Næste"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO-login er obligatorisk"
+  },
   "selectedRegionFlag": {
     "message": "Valgte områdeflag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Projektadgang opdateret"
+  },
+  "unexpectedErrorSend": {
+    "message": "En uventet fejl opstod under indlæsning af denne Send. Forsøg igen senere."
   }
 }
diff --git a/apps/web/src/locales/de/messages.json b/apps/web/src/locales/de/messages.json
index be019a8d530..d6bf3cab26a 100644
--- a/apps/web/src/locales/de/messages.json
+++ b/apps/web/src/locales/de/messages.json
@@ -648,22 +648,22 @@
     "message": "Benenne deinen Passkey, um ihn zu identifizieren."
   },
   "useForVaultEncryption": {
-    "message": "Use for vault encryption"
+    "message": "Zur Tresorverschlüsselung verwenden"
   },
   "useForVaultEncryptionInfo": {
-    "message": "Log in and unlock on supported devices without your master password. Follow the prompts from your browser to finalize setup."
+    "message": "Anmelden und Entsperren auf unterstützten Geräten ohne dein Master-Passwort. Folge den Anweisungen deines Browsers, um die Einrichtung abzuschließen."
   },
   "useForVaultEncryptionErrorReadingPasskey": {
-    "message": "Error reading passkey. Try again or uncheck this option."
+    "message": "Fehler beim Lesen des Passkeys. Versuche es erneut oder deaktiviere diese Option."
   },
   "encryptionNotSupported": {
     "message": "Verschlüsselung nicht unterstützt"
   },
   "encryptionNotEnabled": {
-    "message": "Encryption not enabled"
+    "message": "Verschlüsselung nicht aktiviert"
   },
   "usedForEncryption": {
-    "message": "Used for encryption"
+    "message": "Wird für die Verschlüsselung verwendet"
   },
   "loginWithPasskeyEnabled": {
     "message": "Anmeldung mit Passkey aktiviert"
@@ -4020,7 +4020,7 @@
     "message": "All Teams Starter features, plus:"
   },
   "chooseMonthlyOrAnnualBilling": {
-    "message": "Choose monthly or annual billing"
+    "message": "Monatliche oder jährliche Abrechnung wählen"
   },
   "abilityToAddMoreThanNMembers": {
     "message": "Ability to add more than $COUNT$ members",
@@ -4218,8 +4218,8 @@
     "message": "Dieses Send ist standardmäßig ausgeblendet. Du kannst die Sichtbarkeit mit dem Button unten umschalten.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Datei herunterladen"
+  "downloadAttachments": {
+    "message": "Anhänge herunterladen"
   },
   "sendAccessUnavailable": {
     "message": "Das Send, auf das du zugreifen möchtest, existiert nicht oder ist nicht mehr verfügbar.",
@@ -4609,8 +4609,8 @@
     "message": "um es heute auszuprobieren.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden Benutzer $USER_IDENTIFIER$ hat Folgendes mit dir geteilt",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden-Mitglied $USER_IDENTIFIER$ hat Folgendes mit dir geteilt",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Weiter"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO-Anmeldung ist erforderlich"
+  },
   "selectedRegionFlag": {
     "message": "Flagge der ausgewählten Region"
   },
@@ -7302,7 +7305,7 @@
     "message": "Manage the collection behavior for the organization"
   },
   "limitCollectionCreationDeletionDesc": {
-    "message": "Limit collection creation and deletion to owners and admins"
+    "message": "Sammlungserstellung und -löschung auf Eigentümer und Administratoren beschränken"
   },
   "collectionManagementUpdated": {
     "message": "Collection management behavior saved"
@@ -7354,10 +7357,10 @@
     "message": "Beta"
   },
   "assignCollectionAccess": {
-    "message": "Assign collection access"
+    "message": "Sammlungszugriff zuweisen"
   },
   "editedCollections": {
-    "message": "Edited collections"
+    "message": "Bearbeitete Sammlungen"
   },
   "baseUrl": {
     "message": "Server-URL"
@@ -7391,6 +7394,9 @@
     "description": "This is followed a by a hyperlink to the help website."
   },
   "projectAccessUpdated": {
-    "message": "Project access updated"
+    "message": "Projektzugriff aktualisiert"
+  },
+  "unexpectedErrorSend": {
+    "message": "Beim Laden dieses Sends ist ein unerwarteter Fehler aufgetreten. Versuche es später erneut."
   }
 }
diff --git a/apps/web/src/locales/el/messages.json b/apps/web/src/locales/el/messages.json
index 017c86c0eb8..d7ff3c648b6 100644
--- a/apps/web/src/locales/el/messages.json
+++ b/apps/web/src/locales/el/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Αυτό το send είναι κρυμμένο από προεπιλογή. Μπορείτε να αλλάξετε την ορατότητά του χρησιμοποιώντας το παρακάτω κουμπί.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Λήψη Αρχείου"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "Το Send που προσπαθείτε να αποκτήσετε πρόσβαση, δεν υπάρχει ή δεν είναι πλέον διαθέσιμο.",
@@ -4609,8 +4609,8 @@
     "message": "για να το δοκιμάσετε σήμερα.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Ο χρήστης Bitwarden $USER_IDENTIFIER$ κοινοποίησε τα ακόλουθα μαζί σας",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 44bb8a45222..702f94e7e4d 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,17 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
+  },
+  "seatLimitReached": {
+    "message": "Seat limit has been reached"
+  },
+  "contactYourProvider": {
+    "message": "Contact your provider to purchase additional seats."
+  },
+  "seatLimitReachedContactYourProvider": {
+    "message": "Seat limit has been reached. Contact your provider to purchase additional seats."
   }
 }
diff --git a/apps/web/src/locales/en_GB/messages.json b/apps/web/src/locales/en_GB/messages.json
index 8242cbc0d62..ecbabbde081 100644
--- a/apps/web/src/locales/en_GB/messages.json
+++ b/apps/web/src/locales/en_GB/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/en_IN/messages.json b/apps/web/src/locales/en_IN/messages.json
index 0a1cb6f8b7c..244c300d817 100644
--- a/apps/web/src/locales/en_IN/messages.json
+++ b/apps/web/src/locales/en_IN/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download File"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/eo/messages.json b/apps/web/src/locales/eo/messages.json
index c0e529f7848..4d1e883a162 100644
--- a/apps/web/src/locales/eo/messages.json
+++ b/apps/web/src/locales/eo/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Ĉi tiu sendado estas kaŝita defaŭlte. Vi povas ŝalti ĝian videblecon per la suba butono.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Elŝuti dosieron"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "La Sendo, kiun vi provas aliri, ne ekzistas aŭ ne plu haveblas.",
@@ -4609,8 +4609,8 @@
     "message": "provi ĝin hodiaŭ.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden-uzanto $USER_IDENTIFIER$ dividis la jenon kun vi",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/es/messages.json b/apps/web/src/locales/es/messages.json
index 8f1b30d315f..26a70699bdb 100644
--- a/apps/web/src/locales/es/messages.json
+++ b/apps/web/src/locales/es/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Este Send está oculto por defecto. Puede cambiar su visibilidad usando el botón de abajo.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Descargar archivo"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "El envío al que está intentando acceder no existe o ya no está disponible.",
@@ -4252,7 +4252,7 @@
     "message": "Añadir contacto de emergencia"
   },
   "designatedEmergencyContacts": {
-    "message": "Diseñado como contacto de emergencia"
+    "message": "Designado como contacto de emergencia"
   },
   "noGrantedAccess": {
     "message": "Aún no has sido designado como un contacto de emergencia para nadie."
@@ -4609,8 +4609,8 @@
     "message": "pruébalo hoy.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Usuario $USER_IDENTIFIER$ de Bitwarden compartió contigo",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Siguiente"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Región seleccionada"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/et/messages.json b/apps/web/src/locales/et/messages.json
index 175167d6706..456ed4f3d72 100644
--- a/apps/web/src/locales/et/messages.json
+++ b/apps/web/src/locales/et/messages.json
@@ -4218,8 +4218,8 @@
     "message": "See Send on vaikeseades peidetud. Saad selle nähtavust alloleva nupu abil seadistada.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Laadi fail alla"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "Send, millele üritad ligi pääseda, ei eksisteeri või see pole enam saadaval.",
@@ -4609,8 +4609,8 @@
     "message": "et seda ise proovida.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwardeni kasutaja $USER_IDENTIFIER$ jagas sinuga järgnevat",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/eu/messages.json b/apps/web/src/locales/eu/messages.json
index 1bae995b8a4..7c67cce7f25 100644
--- a/apps/web/src/locales/eu/messages.json
+++ b/apps/web/src/locales/eu/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Send hau modu lehenetsian ezkutatuta dago. Beheko botoia sakatuz alda dezakezu ikusgarritasuna.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Deskargatu fitxategia"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "Sartzen saiatzen ari zaren Send-a ez da existitzen edo ez dago erabilgarri.",
@@ -4609,8 +4609,8 @@
     "message": "gaur probatzeko.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "$USER_IDENTIFIER$ Bitwarden erabiltzaileak, ondorengoa zurekin partekatu du",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/fa/messages.json b/apps/web/src/locales/fa/messages.json
index 4007656a084..89299d8ab26 100644
--- a/apps/web/src/locales/fa/messages.json
+++ b/apps/web/src/locales/fa/messages.json
@@ -4218,8 +4218,8 @@
     "message": "این ارسال به طور پیش‌فرض پنهان است. با استفاده از دکمه زیر می‌توانید نمایان بودن آن را تغییر دهید.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "بارگیری پرونده"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "ارسالی که می‌خواهید به آن دسترسی پیدا کنید وجود ندارد یا دیگر در دسترس نیست.",
@@ -4609,8 +4609,8 @@
     "message": "برای امتحان کردن امروز.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "کاربر Bitwarden $USER_IDENTIFIER$ موارد زیر را با شما به اشتراک گذاشت",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "بعدی"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "پرچم منطقه انتخاب شد"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/fi/messages.json b/apps/web/src/locales/fi/messages.json
index 82b8a23ab36..14b954f26aa 100644
--- a/apps/web/src/locales/fi/messages.json
+++ b/apps/web/src/locales/fi/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Send on oletusarvoisesti piilotettu. Voit vaihtaa sen näkyvyyttä alla olevalla painikkeella.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Lataa tiedosto"
+  "downloadAttachments": {
+    "message": "Lataa liitteet"
   },
   "sendAccessUnavailable": {
     "message": "Sendiä, jota yrität avata, ei ole olemassa tai se ei ole enää käytettävissä.",
@@ -4609,8 +4609,8 @@
     "message": "kokeillaksesi sitä tänään.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden-käyttäjä $USER_IDENTIFIER$ jakoi kanssasi seuraavat",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden-jäsen $USER_IDENTIFIER$ jakoi sinulle seuraavat",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Seuraava"
   },
+  "ssoLoginIsRequired": {
+    "message": "Kertakirjautuminen vaaditaan"
+  },
   "selectedRegionFlag": {
     "message": "Valitun alueen lippu"
   },
@@ -7391,6 +7394,9 @@
     "description": "This is followed a by a hyperlink to the help website."
   },
   "projectAccessUpdated": {
-    "message": "Project access updated"
+    "message": "Projektin käyttöoikeudet on muutettu"
+  },
+  "unexpectedErrorSend": {
+    "message": "Odottamaton virhe ladattaessa Sendiä. Yritä myöhemmin uudelleen."
   }
 }
diff --git a/apps/web/src/locales/fil/messages.json b/apps/web/src/locales/fil/messages.json
index 2d1f7761b29..0b79921ff0c 100644
--- a/apps/web/src/locales/fil/messages.json
+++ b/apps/web/src/locales/fil/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Ang Send na ito ay nakatago bilang default. Maaari mong i toggle ang visibility nito gamit ang pindutan sa ibaba.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Mag-download ng file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "Ang Send na sinusubukan mong ma access ay hindi umiiral o hindi na magagamit.",
@@ -4609,8 +4609,8 @@
     "message": "para masubukan ngayon.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Ibinahagi sa iyo ng Bitwarden user na si $USER_IDENTIFIER$ ang sumusunod",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/fr/messages.json b/apps/web/src/locales/fr/messages.json
index f996b5fecc8..e5a5e0e9563 100644
--- a/apps/web/src/locales/fr/messages.json
+++ b/apps/web/src/locales/fr/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Ce Send est masqué par défaut. Vous pouvez changer sa visibilité en utilisant le bouton ci-dessous.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Télécharger le fichier"
+  "downloadAttachments": {
+    "message": "Télécharger les pièces jointes"
   },
   "sendAccessUnavailable": {
     "message": "Le Send que vous essayez d'accéder n'existe pas ou n'est plus disponible.",
@@ -4609,8 +4609,8 @@
     "message": "pour l'essayer dès aujourd'hui.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "L'utilisateur Bitwarden $USER_IDENTIFIER$ a partagé ce qui suit avec vous",
+  "sendAccessCreatorIdentifier": {
+    "message": "Le membre Bitwarden $USER_IDENTIFIER$ a partagé ce qui suit avec vous",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Suivant"
   },
+  "ssoLoginIsRequired": {
+    "message": "La connexion SSO est requise"
+  },
   "selectedRegionFlag": {
     "message": "Drapeau de la région sélectionnée"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Accès au projet mis à jour"
+  },
+  "unexpectedErrorSend": {
+    "message": "Une erreur inattendue est survenue lors du chargement de ce Send. Réessayez plus tard."
   }
 }
diff --git a/apps/web/src/locales/gl/messages.json b/apps/web/src/locales/gl/messages.json
index c901cb95299..77e07d67954 100644
--- a/apps/web/src/locales/gl/messages.json
+++ b/apps/web/src/locales/gl/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/he/messages.json b/apps/web/src/locales/he/messages.json
index 92625241db3..1ab9f723784 100644
--- a/apps/web/src/locales/he/messages.json
+++ b/apps/web/src/locales/he/messages.json
@@ -4218,8 +4218,8 @@
     "message": "הSend הזה מוסתר כברירת מחדל. באפשרותך לשנות את מצב ההסתרה בעזרת הכפתור להלן.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "הורד קובץ"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/hi/messages.json b/apps/web/src/locales/hi/messages.json
index 4c9053bd334..d3f42f2b036 100644
--- a/apps/web/src/locales/hi/messages.json
+++ b/apps/web/src/locales/hi/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/hr/messages.json b/apps/web/src/locales/hr/messages.json
index 11f291787e6..65e7d69e90f 100644
--- a/apps/web/src/locales/hr/messages.json
+++ b/apps/web/src/locales/hr/messages.json
@@ -612,43 +612,43 @@
     "message": "Prijava glavnom lozinkom"
   },
   "loginWithPasskey": {
-    "message": "Log in with passkey"
+    "message": "Prijava pristupnim ključem"
   },
   "loginWithPasskeyInfo": {
     "message": "Use a generated passkey that will automatically log you in without a password. Biometrics, like facial recognition or fingerprint, or another FIDO2 security method will verify your identity."
   },
   "newPasskey": {
-    "message": "New passkey"
+    "message": "Novi pristupni ključ"
   },
   "learnMoreAboutPasswordless": {
     "message": "Learn more about passwordless"
   },
   "passkeyEnterMasterPassword": {
-    "message": "Enter your master password to modify log in with passkey settings."
+    "message": "Unesi glavnu lozinku za promjenu postavki prijave pristupnim ključem."
   },
   "creatingPasskeyLoading": {
-    "message": "Creating passkey..."
+    "message": "Stvaranje pristupnog ključa..."
   },
   "creatingPasskeyLoadingInfo": {
-    "message": "Keep this window open and follow prompts from your browser."
+    "message": "Ostavi ovaj prozor otvoren i prati upute u svojem pregledniku."
   },
   "errorCreatingPasskey": {
-    "message": "Error creating passkey"
+    "message": "Greška kreiranja pristupnog ključa"
   },
   "errorCreatingPasskeyInfo": {
-    "message": "There was a problem creating your passkey."
+    "message": "Došlo je do problema sa stvaranjem pristupnog ključa."
   },
   "passkeySuccessfullyCreated": {
-    "message": "Passkey successfully created!"
+    "message": "Pristupni ključ je uspješno stvoren!"
   },
   "customName": {
-    "message": "Custom name"
+    "message": "Naziv"
   },
   "customPasskeyNameInfo": {
     "message": "Name your passkey to help you identify it."
   },
   "useForVaultEncryption": {
-    "message": "Use for vault encryption"
+    "message": "Koristi enkripciju trezora"
   },
   "useForVaultEncryptionInfo": {
     "message": "Log in and unlock on supported devices without your master password. Follow the prompts from your browser to finalize setup."
@@ -1048,7 +1048,7 @@
     "message": "Ovaj izvoz sadrži podatke trezora u nešifriranom obliku! Izvezenu datoteku se ne bi smjelo pohranjivati ili slati putem nesigurnih kanala (npr. e-poštom). Izbriši ju odmah nakon završetka korištenja."
   },
   "exportSecretsWarningDesc": {
-    "message": "This export contains your secrets data in an unencrypted format. You should not store or send the exported file over unsecure channels (such as email). Delete it immediately after you are done using it."
+    "message": "Ovaj izvoz sadrži podatke trezora u nešifriranom obliku! Izvezenu datoteku se ne bi smjelo pohranjivati ili slati putem nesigurnih kanala (npr. e-poštom). Izbriši ju odmah nakon završetka korištenja."
   },
   "encExportKeyWarningDesc": {
     "message": "Ovaj izvoz šifrira tvoje podatke koristeći ključ za šifriranje. Promijeniš li naknadno ključ za šifriranje, potrebno je ponovno napraviti izvoz jer nećeš moći dešifrirati ovu izvezenu datoteku."
@@ -1063,7 +1063,7 @@
     "message": "Izvezi trezor"
   },
   "exportSecrets": {
-    "message": "Export secrets"
+    "message": "Izvezi tajne"
   },
   "fileFormat": {
     "message": "Format datoteke"
@@ -1394,7 +1394,7 @@
     }
   },
   "importUnassignedItemsError": {
-    "message": "File contains unassigned items."
+    "message": "Datoteka sadrži nedodijeljene stavke."
   },
   "selectFormat": {
     "message": "Odaberi format datoteke za uvoz"
@@ -2009,7 +2009,7 @@
     "message": "1 GB šifriranog prostora za pohranu podataka."
   },
   "premiumSignUpTwoStepOptions": {
-    "message": "Proprietary two-step login options such as YubiKey and Duo."
+    "message": "Mogućnosti za prijavu u dva koraka kao što su YubiKey i Duo."
   },
   "premiumSignUpEmergency": {
     "message": "Pristup u nuždi"
@@ -3678,7 +3678,7 @@
     "message": "Organizacija suspendirana"
   },
   "secretsAccessSuspended": {
-    "message": "Suspended organizations cannot be accessed. Please contact your organization owner for assistance."
+    "message": "Stavkama u suspendiranoj Organizaciji se ne može pristupiti. Kontaktiraj vlasnika Organizacije za pomoć."
   },
   "secretsCannotCreate": {
     "message": "Secrets cannot be created in suspended organizations. Please contact your organization owner for assistance."
@@ -4017,7 +4017,7 @@
     "message": "Sve značajke Team, plus:"
   },
   "includeAllTeamsStarterFeatures": {
-    "message": "All Teams Starter features, plus:"
+    "message": "Sve značajke Team, plus:"
   },
   "chooseMonthlyOrAnnualBilling": {
     "message": "Choose monthly or annual billing"
@@ -4218,8 +4218,8 @@
     "message": "Ovaj je Send zadano skriven. Moguće mu je promijeniti vidljivost.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Preuzmi datoteku"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "Send kojem pokušavaš pristupiti više ne postoji ili više nije dostupan.",
@@ -4609,8 +4609,8 @@
     "message": "za isprobavanje.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden korisnik $USER_IDENTIFIER$ je s tobom podijelio",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -4851,7 +4851,7 @@
     "message": "Greška"
   },
   "accountRecoveryManageUsers": {
-    "message": "Manage users must also be granted with the manage account recovery permission"
+    "message": "Upravljanje korisnicima mora također biti uključeno s dozvolom za Upravljanje ponovnim postavljanjem lozinke"
   },
   "setupProvider": {
     "message": "Postavke davatelja"
@@ -4988,7 +4988,7 @@
     "message": "Tvoja glavna lozinka ne zadovoljava pravila ove organizacije. Kako bi se pridružio organizaciji, moraš odmah ažurirati svoju glavnu lozinku. Ako nastaviš, odjavit ćeš se iz trenutne sesije te ćeš se morati ponovno prijaviti. Aktivne sesije na drugim uređajima mogu ostati aktivne do jedan sat."
   },
   "updateWeakMasterPasswordWarning": {
-    "message": "Your master password does not meet one or more of your organization policies. In order to access the vault, you must update your master password now. Proceeding will log you out of your current session, requiring you to log back in. Active sessions on other devices may continue to remain active for up to one hour."
+    "message": "Tvoja glavna lozinka ne zadovoljava pravila ove organizacije. Za pristup trezoru moraš odmah ažurirati svoju glavnu lozinku. Ako nastaviš, odjaviti ćeš se iz trenutne sesije te ćeš se morati ponovno prijaviti. Aktivne sesije na drugim uređajima mogu ostati aktivne do jedan sat."
   },
   "maximumVaultTimeout": {
     "message": "Istek trezora"
@@ -5367,7 +5367,7 @@
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Use the require single-sign-on authentication policy to require all members to log in with SSO.'"
   },
   "ssoPolicyHelpAnchor": {
-    "message": "require single sign-on authentication policy",
+    "message": "zahtijevaj SSO autentifikaciju",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Use the require single-sign-on authentication policy to require all members to log in with SSO.'"
   },
   "ssoPolicyHelpEnd": {
@@ -7055,11 +7055,11 @@
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Once authenticated, members will decrypt vault data using a key stored on their device. The single organization policy, SSO required policy, and account recovery administration policy with automatic enrollment will turn on when this option is used.'"
   },
   "orgPermissionsUpdatedMustSetPassword": {
-    "message": "Your organization permissions were updated, requiring you to set a master password.",
+    "message": "Moraš postaviti glavnu lozinku jer su dopuštenja tvoje organizacije ažurirana.",
     "description": "Used as a card title description on the set password page to explain why the user is there"
   },
   "orgRequiresYouToSetPassword": {
-    "message": "Your organization requires you to set a master password.",
+    "message": "Tvoja organizacija zahtijeva da postaviš glavnu lozinku.",
     "description": "Used as a card title description on the set password page to explain why the user is there"
   },
   "notFound": {
@@ -7092,7 +7092,7 @@
     "message": "Activate Secrets Manager"
   },
   "yourOrganizationsFingerprint": {
-    "message": "Your organization's fingerprint phrase",
+    "message": "Jedinstvena fraza tvoje organizacije",
     "description": "A 'fingerprint phrase' is a unique word phrase (similar to a passphrase) that a user can use to authenticate their organization's public key with another user, for the purposes of sharing."
   },
   "deviceApprovals": {
@@ -7102,7 +7102,7 @@
     "message": "Approve login requests below to allow the requesting member to finish logging in. Unapproved requests expire after 1 week. Verify the member’s information before approving."
   },
   "deviceInfo": {
-    "message": "Device info"
+    "message": "Informacije o uređaju"
   },
   "time": {
     "message": "Vrijeme"
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Sljedeće"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Zastava odabrane regije"
   },
@@ -7387,10 +7390,13 @@
     "message": "The passkey will not be copied to the cloned item. Do you want to continue cloning this item?"
   },
   "seeDetailedInstructions": {
-    "message": "See detailed instructions on our help site at",
+    "message": "Detaljne upute za pomoć pronađi na našoj stranici za pomoć na",
     "description": "This is followed a by a hyperlink to the help website."
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/hu/messages.json b/apps/web/src/locales/hu/messages.json
index 1fcb4ebecfb..a7ef618f490 100644
--- a/apps/web/src/locales/hu/messages.json
+++ b/apps/web/src/locales/hu/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Ez a Send alapértelmezésben rejtett. Az alábbi gombbal átváltható a láthatósága.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Fájl letöltése"
+  "downloadAttachments": {
+    "message": "Mellékletek letöltése"
   },
   "sendAccessUnavailable": {
     "message": "Az elérendő küldés nem létezik vagy már nem elérhető.",
@@ -4609,7 +4609,7 @@
     "message": "próbáljuk ki még ma.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
+  "sendAccessCreatorIdentifier": {
     "message": "$USER_IDENTIFIER$ Bitwarden felhasználó megosztotta a következőket",
     "placeholders": {
       "user_identifier": {
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Következő"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO bejelentkezés szükséges"
+  },
   "selectedRegionFlag": {
     "message": "Kiválasztott régió zászló"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "A projekt elérés frissítésre került."
+  },
+  "unexpectedErrorSend": {
+    "message": "Váratlan hiba történt a Send betöltésekor. Próbáljuk újra később."
   }
 }
diff --git a/apps/web/src/locales/id/messages.json b/apps/web/src/locales/id/messages.json
index 4ae055a9bb8..fa0aa9340d2 100644
--- a/apps/web/src/locales/id/messages.json
+++ b/apps/web/src/locales/id/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Pengiriman ini disembunyikan secara default. Anda dapat mengubah visibilitasnya menggunakan tombol di bawah ini.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Unduh berkas"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "Pengiriman yang Anda coba akses tidak ada atau tidak lagi tersedia.",
@@ -4609,8 +4609,8 @@
     "message": "untuk mencobanya hari ini.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Pengguna Bitwarden $USER_IDENTIFIER$ berbagi yang berikut dengan Anda",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/it/messages.json b/apps/web/src/locales/it/messages.json
index e3de47e8f7f..f7e9ea0ed0c 100644
--- a/apps/web/src/locales/it/messages.json
+++ b/apps/web/src/locales/it/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Questo Send è nascosto per impostazione predefinita. Modifica la sua visibilità usando questo pulsante.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Scarica file"
+  "downloadAttachments": {
+    "message": "Scarica allegati"
   },
   "sendAccessUnavailable": {
     "message": "Il Send a cui stai provando ad accedere non esiste o non è più disponibile.",
@@ -4609,8 +4609,8 @@
     "message": "per provarlo oggi.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "L'utente Bitwarden $USER_IDENTIFIER$ ha condiviso questo con te",
+  "sendAccessCreatorIdentifier": {
+    "message": "Il membro di Bitwarden $USER_IDENTIFIER$ ha condiviso questo con te",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Avanti"
   },
+  "ssoLoginIsRequired": {
+    "message": "Il login SSO è obbligatorio"
+  },
   "selectedRegionFlag": {
     "message": "Bandiera della regione selezionata"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Accesso al progetto aggiornato"
+  },
+  "unexpectedErrorSend": {
+    "message": "Si è verificato un errore imprevisto durante il caricamento di questo Send. Riprova più tardi."
   }
 }
diff --git a/apps/web/src/locales/ja/messages.json b/apps/web/src/locales/ja/messages.json
index f60fc39ecc7..09de6c0838a 100644
--- a/apps/web/src/locales/ja/messages.json
+++ b/apps/web/src/locales/ja/messages.json
@@ -4218,8 +4218,8 @@
     "message": "このSendはデフォルトでは非表示になっています。下のボタンで表示・非表示が切り替え可能です。",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "ファイルをダウンロード"
+  "downloadAttachments": {
+    "message": "添付ファイルをダウンロード"
   },
   "sendAccessUnavailable": {
     "message": "アクセスしようとしているSendは存在しないか、利用できません。",
@@ -4609,8 +4609,8 @@
     "message": "試してみてください",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden ユーザー $USER_IDENTIFIER$ が共有しました",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden メンバー $USER_IDENTIFIER$ が共有しました",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "次へ"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO ログインが必要です"
+  },
   "selectedRegionFlag": {
     "message": "リージョン選択"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "プロジェクトへのアクセスを更新しました"
+  },
+  "unexpectedErrorSend": {
+    "message": "この Send の読み込み中に予期しないエラーが発生しました。後でもう一度お試しください。"
   }
 }
diff --git a/apps/web/src/locales/ka/messages.json b/apps/web/src/locales/ka/messages.json
index 2b0532679a3..a3fe70ddd10 100644
--- a/apps/web/src/locales/ka/messages.json
+++ b/apps/web/src/locales/ka/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/km/messages.json b/apps/web/src/locales/km/messages.json
index c901cb95299..77e07d67954 100644
--- a/apps/web/src/locales/km/messages.json
+++ b/apps/web/src/locales/km/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/kn/messages.json b/apps/web/src/locales/kn/messages.json
index 42f24c3735b..ca6c70819bd 100644
--- a/apps/web/src/locales/kn/messages.json
+++ b/apps/web/src/locales/kn/messages.json
@@ -4218,8 +4218,8 @@
     "message": "ಈ ಕಳುಹಿಸುವಿಕೆಯನ್ನು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಮರೆಮಾಡಲಾಗಿದೆ. ಕೆಳಗಿನ ಬಟನ್ ಬಳಸಿ ನೀವು ಅದರ ಗೋಚರತೆಯನ್ನು ಟಾಗಲ್ ಮಾಡಬಹುದು.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "ನೀವು ಪ್ರವೇಶಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತಿರುವ ಕಳುಹಿಸುವಿಕೆಯು ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲ ಅಥವಾ ಇನ್ನು ಮುಂದೆ ಲಭ್ಯವಿಲ್ಲ.",
@@ -4609,8 +4609,8 @@
     "message": "ಇಂದು ಅದನ್ನು ಪ್ರಯತ್ನಿಸಲು.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "ಬಿಟ್‌ವಾರ್ಡೆನ್ ಬಳಕೆದಾರ $USER_IDENTIFIER$ ಈ ಕೆಳಗಿನವುಗಳನ್ನು ನಿಮ್ಮೊಂದಿಗೆ ಹಂಚಿಕೊಂಡಿದ್ದಾರೆ",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/ko/messages.json b/apps/web/src/locales/ko/messages.json
index 016247cb96e..80ac34fa7c4 100644
--- a/apps/web/src/locales/ko/messages.json
+++ b/apps/web/src/locales/ko/messages.json
@@ -4218,8 +4218,8 @@
     "message": "이 Send는 기본적으로 숨겨져 있습니다. 아래의 버튼을 눌러 공개 여부를 전환할 수 있습니다.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "파일 다운로드"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "접근하려고 하는 Send가 존재하지 않거나 더이상 제공되지 않습니다.",
@@ -4609,8 +4609,8 @@
     "message": "해서 체험해보세요.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden의 $USER_IDENTIFIER$ 사용자가 다음 내용을 당신과 공유했습니다",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/lv/messages.json b/apps/web/src/locales/lv/messages.json
index 37f819a12d8..986f44caf9a 100644
--- a/apps/web/src/locales/lv/messages.json
+++ b/apps/web/src/locales/lv/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Šis Send ir paslēpts pēc noklusējuma. Tā redzamību var pārslēgt ar zemāk esošo pogu.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Lejupielādēt datni"
+  "downloadAttachments": {
+    "message": "Lejupielādēt pielikumus"
   },
   "sendAccessUnavailable": {
     "message": "Send, kuram mēģini piekļūt, nepastāv vai vairs nav pieejams.",
@@ -4609,8 +4609,8 @@
     "message": "izmēģinātu šodien.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden lietotājs $USER_IDENTIFIER$ kopīgoja sekojošo",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden dalībnieks $USER_IDENTIFIER$ kopīgoja sekojošo",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Turpināt"
   },
+  "ssoLoginIsRequired": {
+    "message": "Vienotā pieteikšanās ir nepieciešama"
+  },
   "selectedRegionFlag": {
     "message": "Atlasītā apgabala karogs"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Projekta piekļuve ir atjaunināta"
+  },
+  "unexpectedErrorSend": {
+    "message": "Atgadījās neparedzēta kļūda šī Send ielādēšanas laikā. Vēlāk jāmēģina vēlreiz."
   }
 }
diff --git a/apps/web/src/locales/ml/messages.json b/apps/web/src/locales/ml/messages.json
index 448142b52db..ebd600ce3c0 100644
--- a/apps/web/src/locales/ml/messages.json
+++ b/apps/web/src/locales/ml/messages.json
@@ -4218,8 +4218,8 @@
     "message": "ഈ Send സ്ഥിരസ്ഥിതിയായി മറച്ചിരിക്കുന്നു. ചുവടെയുള്ള ബട്ടൺ ഉപയോഗിച്ചാൽ നിങ്ങൾക്ക് അതിന്റെ ദൃശ്യപരത ടോഗിൾ ചെയ്യാൻ കഴിയും.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "ഫയൽ ഡൗൺലോഡുചെയ്യുക"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/mr/messages.json b/apps/web/src/locales/mr/messages.json
index c901cb95299..77e07d67954 100644
--- a/apps/web/src/locales/mr/messages.json
+++ b/apps/web/src/locales/mr/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/my/messages.json b/apps/web/src/locales/my/messages.json
index c901cb95299..77e07d67954 100644
--- a/apps/web/src/locales/my/messages.json
+++ b/apps/web/src/locales/my/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/nb/messages.json b/apps/web/src/locales/nb/messages.json
index e8b3c693a06..6c4ff5e3117 100644
--- a/apps/web/src/locales/nb/messages.json
+++ b/apps/web/src/locales/nb/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Denne Send-en er skjult som standard. Du kan veksle synlighet ved å bruke knappen nedenfor.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Last ned fil"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "Send-en du forsøker å få tilgang til finnes ikke eller er ikke lenger tilgjengelig.",
@@ -4609,8 +4609,8 @@
     "message": "for å prøve det i dag.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden-bruker $USER_IDENTIFIER$ delte følgende med deg",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/ne/messages.json b/apps/web/src/locales/ne/messages.json
index 7f216d27b10..05c85aa7858 100644
--- a/apps/web/src/locales/ne/messages.json
+++ b/apps/web/src/locales/ne/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/nl/messages.json b/apps/web/src/locales/nl/messages.json
index 052420c6bdd..81222b6059e 100644
--- a/apps/web/src/locales/nl/messages.json
+++ b/apps/web/src/locales/nl/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Deze Send is standaard verborgen. Je kunt de zichtbaarheid ervan in- en uitschakelen met de knop hieronder.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Bestand downloaden"
+  "downloadAttachments": {
+    "message": "Bijlagen downloaden"
   },
   "sendAccessUnavailable": {
     "message": "De Send die je probeert te benaderen is niet (langer) beschikbaar.",
@@ -4609,8 +4609,8 @@
     "message": "om het vandaag te proberen.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden-gebruiker $USER_IDENTIFIER$ heeft het volgende met je gedeeld",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden-lid $USER_IDENTIFIER$ heeft het volgende met je gedeeld",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Volgende"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Geselecteerde regionale vlag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Projecttoegang bijgewerkt"
+  },
+  "unexpectedErrorSend": {
+    "message": "Er is een onverwachte fout opgetreden tijdens het laden van deze Send. Probeer het later opnieuw."
   }
 }
diff --git a/apps/web/src/locales/nn/messages.json b/apps/web/src/locales/nn/messages.json
index 3183aa3bde3..d101f348674 100644
--- a/apps/web/src/locales/nn/messages.json
+++ b/apps/web/src/locales/nn/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/or/messages.json b/apps/web/src/locales/or/messages.json
index c901cb95299..77e07d67954 100644
--- a/apps/web/src/locales/or/messages.json
+++ b/apps/web/src/locales/or/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/pl/messages.json b/apps/web/src/locales/pl/messages.json
index 8053032a08b..35fe6a505d4 100644
--- a/apps/web/src/locales/pl/messages.json
+++ b/apps/web/src/locales/pl/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Ta wysyłka jest domyślnie ukryta. Możesz zmienić jej widoczność za pomocą przycisku.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Pobierz plik"
+  "downloadAttachments": {
+    "message": "Pobierz załączniki"
   },
   "sendAccessUnavailable": {
     "message": "Wysyłka nie istnieje lub nie jest już dostępna.",
@@ -4609,7 +4609,7 @@
     "message": ", aby ją wypróbować.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
+  "sendAccessCreatorIdentifier": {
     "message": "Użytkownik Bitwarden $USER_IDENTIFIER$ udostępnił Tobie",
     "placeholders": {
       "user_identifier": {
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Dalej"
   },
+  "ssoLoginIsRequired": {
+    "message": "Logowaniez użyciem SSO jest wymagane"
+  },
   "selectedRegionFlag": {
     "message": "Flaga wybranego regionu"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/pt_BR/messages.json b/apps/web/src/locales/pt_BR/messages.json
index d02ce09624d..5d592f7bb77 100644
--- a/apps/web/src/locales/pt_BR/messages.json
+++ b/apps/web/src/locales/pt_BR/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Este Send é oculto por padrão. Você pode alternar a visibilidade usando o botão abaixo.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Baixar Arquivo"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "O Send que você está tentando acessar não existe ou não está mais disponível.",
@@ -4609,8 +4609,8 @@
     "message": "para testar hoje mesmo.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "O usuário $USER_IDENTIFIER$ do Bitwarden compartilhou o seguinte com você",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Avançar"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Sinalização de região selecionada"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/pt_PT/messages.json b/apps/web/src/locales/pt_PT/messages.json
index 4e821145254..aff9efc4b3b 100644
--- a/apps/web/src/locales/pt_PT/messages.json
+++ b/apps/web/src/locales/pt_PT/messages.json
@@ -648,7 +648,7 @@
     "message": "Dê um nome à sua chave de acesso para o ajudar a identificá-la."
   },
   "useForVaultEncryption": {
-    "message": "Utilização para encriptação de cofre"
+    "message": "Utilizar para encriptação de cofre"
   },
   "useForVaultEncryptionInfo": {
     "message": "Inicie sessão e desbloqueie em dispositivos suportados sem a sua palavra-passe mestra. Siga as instruções do seu navegador para finalizar a configuração."
@@ -1273,7 +1273,7 @@
     "message": "Zona de perigo"
   },
   "dangerZoneDesc": {
-    "message": "Cuidado, estas ações não são reversíveis!"
+    "message": "Cuidado, estas ações são irreversíveis!"
   },
   "deauthorizeSessions": {
     "message": "Desautorizar sessões"
@@ -4218,8 +4218,8 @@
     "message": "Este Send está oculto por defeito. Pode alternar a sua visibilidade utilizando o botão abaixo.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Transferir ficheiro"
+  "downloadAttachments": {
+    "message": "Transferir anexos"
   },
   "sendAccessUnavailable": {
     "message": "O Send a que está a tentar aceder não existe ou já não está disponível.",
@@ -4609,8 +4609,8 @@
     "message": "para o experimentar hoje.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "O utilizador $USER_IDENTIFIER$ do Bitwarden partilhou o seguinte consigo",
+  "sendAccessCreatorIdentifier": {
+    "message": "O membro $USER_IDENTIFIER$ do Bitwarden partilhou consigo o seguinte",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Avançar"
   },
+  "ssoLoginIsRequired": {
+    "message": "É necessário um início de sessão SSO"
+  },
   "selectedRegionFlag": {
     "message": "Bandeira da região selecionada"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Acesso ao projeto atualizado"
+  },
+  "unexpectedErrorSend": {
+    "message": "Ocorreu um erro inesperado ao carregar este Send. Tente novamente mais tarde."
   }
 }
diff --git a/apps/web/src/locales/ro/messages.json b/apps/web/src/locales/ro/messages.json
index 9741a96f7f5..babd9be2e0a 100644
--- a/apps/web/src/locales/ro/messages.json
+++ b/apps/web/src/locales/ro/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Acest Send este ascuns în mod implicit. Puteți comuta vizibilitatea acestuia cu butonul de mai jos.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Descărcare fișier"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "Send-ul pe care încercați să-l accesați nu există sau nu mai este disponibil.",
@@ -4609,8 +4609,8 @@
     "message": "pentru a-l încerca astăzi.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Utilizatorul Bitwarden $USER_IDENTIFIER$ a partajat următoarele cu dvs.",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/ru/messages.json b/apps/web/src/locales/ru/messages.json
index 1457cd1371c..c47e7995067 100644
--- a/apps/web/src/locales/ru/messages.json
+++ b/apps/web/src/locales/ru/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Эта Send по умолчанию скрыта. Вы можете переключить ее видимость с помощью кнопки ниже.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Скачать файл"
+  "downloadAttachments": {
+    "message": "Скачать вложения"
   },
   "sendAccessUnavailable": {
     "message": "Send, к которой вы пытаетесь получить доступ, больше не существует или недоступна.",
@@ -4609,7 +4609,7 @@
     "message": "чтобы попробовать уже сегодня.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
+  "sendAccessCreatorIdentifier": {
     "message": "Пользователь Bitwarden $USER_IDENTIFIER$ поделился с вами следующим",
     "placeholders": {
       "user_identifier": {
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Далее"
   },
+  "ssoLoginIsRequired": {
+    "message": "Требуется логин SSO"
+  },
   "selectedRegionFlag": {
     "message": "Флаг выбранного региона"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Доступ к проекту обновлен"
+  },
+  "unexpectedErrorSend": {
+    "message": "При загрузке этой Send произошла непредвиденная ошибка. Повторите попытку позже."
   }
 }
diff --git a/apps/web/src/locales/si/messages.json b/apps/web/src/locales/si/messages.json
index 611aec16c6a..0350e6464bf 100644
--- a/apps/web/src/locales/si/messages.json
+++ b/apps/web/src/locales/si/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/sk/messages.json b/apps/web/src/locales/sk/messages.json
index d6ee8d07448..effd87f2185 100644
--- a/apps/web/src/locales/sk/messages.json
+++ b/apps/web/src/locales/sk/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Tento Send je normálne skrytý. Tlačidlom nižšie môžete prepnúť jeho viditeľnosť.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Stiahnuť súbor"
+  "downloadAttachments": {
+    "message": "Stiahnuť prílohy"
   },
   "sendAccessUnavailable": {
     "message": "Odoslanie, ku ktorému sa pokúšate získať prístup, neexistuje alebo už nie je k dispozícii.",
@@ -4609,8 +4609,8 @@
     "message": "skúste to ešte dnes.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden používateľ $USER_IDENTIFIER$ zdieľal nasledujúce s vami",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden člen $USER_IDENTIFIER$ zdieľal s vami nasledujúce",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Ďalej"
   },
+  "ssoLoginIsRequired": {
+    "message": "Vyžaduje sa prihlásenie cez SSO"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Prístup k projektu aktualizovaný"
+  },
+  "unexpectedErrorSend": {
+    "message": "Nastal neočakávaný problém pri načítavaní tohto Sendu. Skúste to neskôr."
   }
 }
diff --git a/apps/web/src/locales/sl/messages.json b/apps/web/src/locales/sl/messages.json
index e62db7873ed..b4fa9f8cb33 100644
--- a/apps/web/src/locales/sl/messages.json
+++ b/apps/web/src/locales/sl/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/sr/messages.json b/apps/web/src/locales/sr/messages.json
index c8175e6f884..09c15aacff3 100644
--- a/apps/web/src/locales/sr/messages.json
+++ b/apps/web/src/locales/sr/messages.json
@@ -648,22 +648,22 @@
     "message": "Именујте Ваш приступачни кључ за лакшу идентификацију."
   },
   "useForVaultEncryption": {
-    "message": "Use for vault encryption"
+    "message": "Користи се за шифровање сефа"
   },
   "useForVaultEncryptionInfo": {
-    "message": "Log in and unlock on supported devices without your master password. Follow the prompts from your browser to finalize setup."
+    "message": "Пријавите се и откључајте на подржаним уређајима без ваше главне лозинке. Пратите упутства из прегледача да бисте завршили подешавање."
   },
   "useForVaultEncryptionErrorReadingPasskey": {
-    "message": "Error reading passkey. Try again or uncheck this option."
+    "message": "Грешка при читању кључа. Покушајте поново или опозовите избор ове опције."
   },
   "encryptionNotSupported": {
     "message": "Шифровање није подржано"
   },
   "encryptionNotEnabled": {
-    "message": "Encryption not enabled"
+    "message": "Шифрирање није омогућено"
   },
   "usedForEncryption": {
-    "message": "Used for encryption"
+    "message": "Употребљено за шифровање"
   },
   "loginWithPasskeyEnabled": {
     "message": "Пријављивање са упаљеним приступчним кључем"
@@ -4218,8 +4218,8 @@
     "message": "Ово Слање је подразумевано скривено. Можете да пребацујете његову видљивост помоћу дугмета испод.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Преузми датотеку"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "„Send“ које покушавате да приступите не постоји или више није доступан.",
@@ -4609,8 +4609,8 @@
     "message": "да пробаш одмах.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden корисник $USER_IDENTIFIER$ је поделио следеће са тобом",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Следеће"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Одабрана застава"
   },
@@ -7391,6 +7394,9 @@
     "description": "This is followed a by a hyperlink to the help website."
   },
   "projectAccessUpdated": {
-    "message": "Project access updated"
+    "message": "Приступ пројекту је ажуриран"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/sr_CS/messages.json b/apps/web/src/locales/sr_CS/messages.json
index 98d4804f28f..d5510f30b4d 100644
--- a/apps/web/src/locales/sr_CS/messages.json
+++ b/apps/web/src/locales/sr_CS/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/sv/messages.json b/apps/web/src/locales/sv/messages.json
index 739f2eb03ab..bb7847f07b9 100644
--- a/apps/web/src/locales/sv/messages.json
+++ b/apps/web/src/locales/sv/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Denna Send är dold som standard. Du kan växla dess synlighet med hjälp av knappen nedan.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Ladda ner fil"
+  "downloadAttachments": {
+    "message": "Ladda ner bilagor"
   },
   "sendAccessUnavailable": {
     "message": "Den Send du försöker komma åt finns inte eller är inte längre tillgänglig.",
@@ -4609,8 +4609,8 @@
     "message": "att prova det idag.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden-användaren $USER_IDENTIFIER$ delade följande med dig",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Nästa"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "Ett oväntat fel inträffade när denna Send laddades. Försök igen senare."
   }
 }
diff --git a/apps/web/src/locales/te/messages.json b/apps/web/src/locales/te/messages.json
index c901cb95299..77e07d67954 100644
--- a/apps/web/src/locales/te/messages.json
+++ b/apps/web/src/locales/te/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/th/messages.json b/apps/web/src/locales/th/messages.json
index 36058f9aa16..d1f77892e0b 100644
--- a/apps/web/src/locales/th/messages.json
+++ b/apps/web/src/locales/th/messages.json
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4609,8 +4609,8 @@
     "message": "to try it today.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/tr/messages.json b/apps/web/src/locales/tr/messages.json
index a6694784241..1b171cbff85 100644
--- a/apps/web/src/locales/tr/messages.json
+++ b/apps/web/src/locales/tr/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Bu Send varsayılan olarak gizlidir. Aşağıdaki düğmeyi kullanarak görünürlüğünü değiştirebilirsiniz.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Dosyayı indir"
+  "downloadAttachments": {
+    "message": "Ekleri indir"
   },
   "sendAccessUnavailable": {
     "message": "Erişmeye çalıştığınız Send yok veya artık mevcut değil.",
@@ -4609,8 +4609,8 @@
     "message": "hemen deneyin.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden kullanıcısı $USER_IDENTIFIER$ aşağıdakileri sizinle paylaştı",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden üyesi $USER_IDENTIFIER$ aşağıdakileri sizinle paylaştı",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "İleri"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO girişi gereklidir"
+  },
   "selectedRegionFlag": {
     "message": "Seçilen bölgenin bayrağı"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Proje erişimi güncellendi"
+  },
+  "unexpectedErrorSend": {
+    "message": "Bu Gönderim yüklenirken beklenmeyen bir hata oluştu. Daha sonra tekrar deneyin."
   }
 }
diff --git a/apps/web/src/locales/uk/messages.json b/apps/web/src/locales/uk/messages.json
index bc1409dda76..86312163a53 100644
--- a/apps/web/src/locales/uk/messages.json
+++ b/apps/web/src/locales/uk/messages.json
@@ -4218,8 +4218,8 @@
     "message": "Це відправлення типово приховане. Ви можете змінити його видимість кнопкою нижче.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Завантажити файл"
+  "downloadAttachments": {
+    "message": "Завантажити вкладення"
   },
   "sendAccessUnavailable": {
     "message": "Відправлення, до якого ви намагаєтесь отримати доступ, не існує, або більше недоступне.",
@@ -4609,8 +4609,8 @@
     "message": "щоб спробувати.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Користувач Bitwarden $USER_IDENTIFIER$ ділиться з вами таким",
+  "sendAccessCreatorIdentifier": {
+    "message": "Учасник Bitwarden $USER_IDENTIFIER$ ділиться з вами таким",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Далі"
   },
+  "ssoLoginIsRequired": {
+    "message": "Потрібно увійти через SSO"
+  },
   "selectedRegionFlag": {
     "message": "Прапор вибраного регіону"
   },
@@ -7391,6 +7394,9 @@
     "description": "This is followed a by a hyperlink to the help website."
   },
   "projectAccessUpdated": {
-    "message": "Project access updated"
+    "message": "Доступ до проєкту оновлено"
+  },
+  "unexpectedErrorSend": {
+    "message": "Під час завантаження цього відправлення сталася неочікувана помилка. Повторіть спробу пізніше."
   }
 }
diff --git a/apps/web/src/locales/vi/messages.json b/apps/web/src/locales/vi/messages.json
index a231d73cc0b..e95c92fd387 100644
--- a/apps/web/src/locales/vi/messages.json
+++ b/apps/web/src/locales/vi/messages.json
@@ -67,7 +67,7 @@
     "message": "Số hộ chiếu"
   },
   "licenseNumber": {
-    "message": "Số giấy phép"
+    "message": "Số bằng lái xe"
   },
   "email": {
     "message": "Email"
@@ -112,7 +112,7 @@
     "message": "Tháng 12"
   },
   "title": {
-    "message": "Tiêu đề"
+    "message": "Danh xưng"
   },
   "mr": {
     "message": "Ông"
@@ -164,7 +164,7 @@
     "description": "This describes a field that is 'linked' (related) to another field."
   },
   "remove": {
-    "message": "Xoá"
+    "message": "Xóa"
   },
   "unassigned": {
     "message": "Hủy ấn định"
@@ -226,7 +226,7 @@
     "message": "Kiểm tra xem mật khẩu có bị lộ không."
   },
   "passwordExposed": {
-    "message": "Mật khẩu này đã bị lộ $VALUE$ lần() trong các dữ liệu vi phạm. Bạn nên thay đổi nó.",
+    "message": "Mật khẩu này đã bị lộ $VALUE$ lần trong các vụ rò rỉ dữ liệu. Bạn nên thay đổi nó.",
     "placeholders": {
       "value": {
         "content": "$1",
@@ -235,7 +235,7 @@
     }
   },
   "passwordSafe": {
-    "message": "Mật khẩu này không được tìm thấy trong bất kỳ dữ liệu vi phạm nào được biết đến. Nó an toàn để sử dụng."
+    "message": "Mật khẩu này không tìm thấy trong bất kỳ vụ rò rỉ dữ liệu nào. Nó an toàn để sử dụng."
   },
   "save": {
     "message": "Lưu"
@@ -256,7 +256,7 @@
     "message": "Yêu thích"
   },
   "unfavorite": {
-    "message": "Bỏ yêu thích"
+    "message": "Bỏ thích"
   },
   "edit": {
     "message": "Sửa"
@@ -279,15 +279,15 @@
     "description": "Search Card type"
   },
   "searchIdentity": {
-    "message": "Tìm kiếm danh tính",
+    "message": "Tìm kiếm danh bạ",
     "description": "Search Identity type"
   },
   "searchSecureNote": {
-    "message": "Tìm kiếm ghi chú an toàn",
+    "message": "Tìm kiếm ghi chú",
     "description": "Search Secure Note type"
   },
   "searchVault": {
-    "message": "Tìm kiếm trong Kho"
+    "message": "Tìm kiếm trong kho"
   },
   "searchMyVault": {
     "message": "Tìm kiếm trong kho"
@@ -308,31 +308,31 @@
     "message": "Yêu thích"
   },
   "types": {
-    "message": "Các loại"
+    "message": "Loại"
   },
   "typeLogin": {
-    "message": "Đăng nhập"
+    "message": "Thông tin đăng nhập"
   },
   "typeCard": {
     "message": "Thẻ"
   },
   "typeIdentity": {
-    "message": "Định danh"
+    "message": "Danh bạ"
   },
   "typeSecureNote": {
-    "message": "Ghi chú bảo mật"
+    "message": "Ghi chú"
   },
   "typeLoginPlural": {
-    "message": "Đăng nhập"
+    "message": "Thông tin đăng nhập"
   },
   "typeCardPlural": {
     "message": "Thẻ"
   },
   "typeIdentityPlural": {
-    "message": "Danh tính"
+    "message": "Danh bạ"
   },
   "typeSecureNotePlural": {
-    "message": "Ghi chú bảo mật"
+    "message": "Ghi chú"
   },
   "folders": {
     "message": "Thư mục"
@@ -467,10 +467,10 @@
     "message": "Vault items"
   },
   "filter": {
-    "message": "Bộ Lọc"
+    "message": "Bộ lọc"
   },
   "moveSelectedToOrg": {
-    "message": "Chuyển đã chọn tới Tổ chức"
+    "message": "Chuyển mục đã chọn tới Tổ chức"
   },
   "deleteSelected": {
     "message": "Xóa mục đã chọn"
@@ -488,16 +488,16 @@
     "message": "Khởi chạy"
   },
   "newAttachment": {
-    "message": "Thêm tệp đính kèm mới"
+    "message": "Thêm tập tin đính kèm mới"
   },
   "deletedAttachment": {
-    "message": "Đã xoá tệp đính kèm"
+    "message": "Đã xóa tập tin đính kèm"
   },
   "deleteAttachmentConfirmation": {
-    "message": "Bạn có chắc chắn muốn xóa tập tin đính kèm này?"
+    "message": "Bạn có chắc muốn xóa tập tin đính kèm này?"
   },
   "attachmentSaved": {
-    "message": "Tệp đính kèm đã được lưu."
+    "message": "Đã lưu tập tin đính kèm"
   },
   "file": {
     "message": "Tập tin"
@@ -506,13 +506,13 @@
     "message": "Chọn một tập tin."
   },
   "maxFileSize": {
-    "message": "Kích thước tối đa của tệp tin là 500 MB."
+    "message": "Dung lượng tối đa của tập tin là 500 MB."
   },
   "addedItem": {
     "message": "Đã thêm mục"
   },
   "editedItem": {
-    "message": "Mục được chỉnh sửa"
+    "message": "Đã lưu mục"
   },
   "movedItemToOrg": {
     "message": "$ITEMNAME$ đã di chuyển tới $ORGNAME$",
@@ -543,10 +543,10 @@
     "message": "Xóa thư mục"
   },
   "deleteAttachment": {
-    "message": "Xóa tệp đính kèm"
+    "message": "Xóa tập tin đính kèm"
   },
   "deleteItemConfirmation": {
-    "message": "Bạn có chắc bạn muốn xóa mục này?"
+    "message": "Bạn có chắc muốn xóa mục này?"
   },
   "deletedItem": {
     "message": "Đã xóa mục"
@@ -558,16 +558,16 @@
     "message": "Đã di chuyển mục"
   },
   "overwritePasswordConfirmation": {
-    "message": "Bạn có chắc chắn muốn ghi đè mật khẩu hiện tại không?"
+    "message": "Bạn có chắc muốn ghi đè mật khẩu hiện tại không?"
   },
   "editedFolder": {
-    "message": "Đã chỉnh sửa thư mục"
+    "message": "Đã lưu thư mục"
   },
   "addedFolder": {
     "message": "Đã thêm thư mục"
   },
   "deleteFolderConfirmation": {
-    "message": "Bạn có chắc chắn muốn xóa thư mục này không?"
+    "message": "Bạn có chắc muốn xóa thư mục này?"
   },
   "deletedFolder": {
     "message": "Đã xóa thư mục"
@@ -585,7 +585,7 @@
     "message": "Phiên đăng nhập của bạn đã hết hạn."
   },
   "logOutConfirmation": {
-    "message": "Bạn có chắc chắn muốn đăng xuất không?"
+    "message": "Bạn có chắc muốn đăng xuất?"
   },
   "logOut": {
     "message": "Đăng xuất"
@@ -696,7 +696,7 @@
     "message": "Tạo tài khoản"
   },
   "newAroundHere": {
-    "message": "Bạn mới tới đây sao?"
+    "message": "Bạn mới dùng?"
   },
   "startTrial": {
     "message": "Bắt đầu dùng thử"
@@ -717,7 +717,7 @@
     "message": "Tên của bạn"
   },
   "yourNameDesc": {
-    "message": "Chúng tôi nên gọi bạn là gì nào?"
+    "message": "Chúng tôi nên gọi bạn là gì?"
   },
   "masterPass": {
     "message": "Mật khẩu chính"
@@ -747,13 +747,13 @@
     "message": "Gợi ý mật khẩu"
   },
   "enterEmailToGetHint": {
-    "message": "Vui lòng nhập địa chỉ email của tài khoản bạn để nhận gợi ý mật khẩu."
+    "message": "Nhập địa chỉ email của tài khoản bạn để nhận gợi ý mật khẩu."
   },
   "getMasterPasswordHint": {
     "message": "Nhận gợi ý mật khẩu chính"
   },
   "emailRequired": {
-    "message": "Cần phải có địa chỉ email."
+    "message": "Yêu cầu có địa chỉ email."
   },
   "invalidEmail": {
     "message": "Địa chỉ email không hợp lệ."
@@ -781,13 +781,13 @@
     "message": "Tài khoản của bạn đã được tạo! Bạn có thể đăng nhập ngay bây giờ."
   },
   "trialAccountCreated": {
-    "message": "Tài Khoản Đã Tạo Thành Công."
+    "message": "Đã tạo tài khoản thành công."
   },
   "masterPassSent": {
-    "message": "Chúng tôi đã gửi cho bạn email với gợi ý mật khẩu chính của bạn."
+    "message": "Chúng tôi đã gửi cho bạn email với gợi ý mật khẩu chính."
   },
   "unexpectedError": {
-    "message": "Một lỗi bất ngờ đã xảy ra."
+    "message": "Xảy ra một lỗi bất ngờ."
   },
   "expirationDateError": {
     "message": "Please select an expiration date that is in the future."
@@ -796,7 +796,7 @@
     "message": "Địa chỉ email"
   },
   "yourVaultIsLocked": {
-    "message": "Kho của bạn đã bị khóa. Xác minh mật khẩu chính của bạn để tiếp tục."
+    "message": "Kho của bạn đã bị khóa. Nhập mật khẩu chính để tiếp tục."
   },
   "uuid": {
     "message": "UUID"
@@ -805,7 +805,7 @@
     "message": "Mở khóa"
   },
   "loggedInAsEmailOn": {
-    "message": "Đã đăng nhập là $EMAIL$ trên $HOSTNAME$.",
+    "message": "Đã đăng nhập $EMAIL$ trên $HOSTNAME$.",
     "placeholders": {
       "email": {
         "content": "$1",
@@ -821,37 +821,37 @@
     "message": "Mật khẩu chính không hợp lệ"
   },
   "invalidFilePassword": {
-    "message": "Mật khẩu tệp không hợp lệ, vui lòng sử dụng mật khẩu bạn đã nhập khi tạo tệp xuất."
+    "message": "Mật khẩu tập tin không hợp lệ, vui lòng sử dụng mật khẩu bạn đã nhập khi xuất tập tin."
   },
   "lockNow": {
     "message": "Khóa ngay"
   },
   "noItemsInList": {
-    "message": "Không có mục nào để liệt kê."
+    "message": "Chưa có mục nào."
   },
   "noPermissionToViewAllCollectionItems": {
-    "message": "Bạn không có quyền xem tất cả các mục trong bộ sưu tập này."
+    "message": "Bạn không có quyền xem tất cả mục trong bộ sưu tập này."
   },
   "noCollectionsInList": {
-    "message": "Không có bộ sưu tập nào để liệt kê."
+    "message": "Chưa có bộ sưu tập nào."
   },
   "noGroupsInList": {
-    "message": "Không có nhóm nào để liệt kê."
+    "message": "Chưa có nhóm nào."
   },
   "noUsersInList": {
-    "message": "Không có người nào để liệt kê."
+    "message": "Chưa có người nào."
   },
   "noMembersInList": {
     "message": "Không có người nào để liệt kê."
   },
   "noEventsInList": {
-    "message": "Không có sự kiện nào để liệt kê."
+    "message": "Chưa có sự kiện nào."
   },
   "newOrganization": {
     "message": "Tổ chức mới"
   },
   "noOrganizationsList": {
-    "message": "Bạn không thuộc tổ chức nào. Tổ chức sẽ cho phép bạn chia sẻ với người dùng khác một cách bảo mật."
+    "message": "Bạn chưa thuộc tổ chức nào. Tổ chức sẽ cho phép bạn chia sẻ các mục với người dùng khác một cách bảo mật."
   },
   "notificationSentDevice": {
     "message": "Một thông báo đã được gửi đến thiết bị của bạn."
@@ -866,10 +866,10 @@
     }
   },
   "enterVerificationCodeApp": {
-    "message": "Vui lòng nhập mã xác thực 6 chữ số từ ứng dụng xác thực của bạn."
+    "message": "Nhập mã xác thực 6 chữ số từ ứng dụng xác thực của bạn."
   },
   "enterVerificationCodeEmail": {
-    "message": "Vui lòng nhập mã xác thực 6 chữ số được gửi tới $EMAIL$.",
+    "message": "Nhập mã xác thực 6 chữ số được gửi tới $EMAIL$.",
     "placeholders": {
       "email": {
         "content": "$1",
@@ -890,31 +890,31 @@
     "message": "Ghi nhớ đăng nhập"
   },
   "sendVerificationCodeEmailAgain": {
-    "message": "Gửi lại email xác thực"
+    "message": "Gửi lại email xác minh"
   },
   "useAnotherTwoStepMethod": {
-    "message": "Sử dụng phương pháp xác thực hai lớp khác"
+    "message": "Dùng phương pháp xác mnih hai bước khác"
   },
   "insertYubiKey": {
-    "message": "Vui lòng cắm Yubikey vào cổng USB của máy tính bạn và bấm nút trên Yubikey."
+    "message": "Cắm YubiKey vào cổng USB trên máy tính bạn và bấm nút trên Yubikey."
   },
   "insertU2f": {
-    "message": "Vui lòng cắm chìa khóa bảo mật vào cổng USB của máy tính bạn và bấm nút trên chìa khóa nếu có."
+    "message": "Cắm khóa bảo mật vào cổng USB trên máy tính bạn và bấm nút trên khóa, nếu có."
   },
   "loginUnavailable": {
-    "message": "Đăng nhập không hoạt động"
+    "message": "Đăng nhập không được"
   },
   "noTwoStepProviders": {
-    "message": "Tài khoản này có xác thực hai lớp, tuy nhiên, trình duyệt của bạn không hỗ trợ dịch vụ xác thực hai lớp đang sử dụng."
+    "message": "Tài khoản này có xác minh hai bước. Tuy nhiên, trình duyệt của bạn không hỗ trợ dịch vụ xác minh của bạn."
   },
   "noTwoStepProviders2": {
     "message": "Vui lòng sử dụng trình duyệt được hỗ trợ (chẳng hạn như Chrome) và/hoặc thêm dịch vụ khác với hỗ trợ tốt hơn trên các trình duyệt (chẳng hạn như một ứng dụng xác thực)."
   },
   "twoStepOptions": {
-    "message": "Tùy chọn xác thực hai lớp"
+    "message": "Tùy chọn xác minh hai bước"
   },
   "recoveryCodeDesc": {
-    "message": "Bạn bị mất quyền truy cập vào tất cả các dịch vụ xác thực hai lớp? Sử dụng mã phục hồi của bạn để tắt tất cả các dịch vụ xác thực hai lớp của tài khoản bạn."
+    "message": "Bạn bị mất quyền truy cập vào tất cả các dịch vụ xác minh hai bước? Sử dụng mã phục hồi của bạn để tắt chúng trên tài khoản bạn."
   },
   "recoveryCodeTitle": {
     "message": "Mã phục hồi"
@@ -923,14 +923,14 @@
     "message": "Ứng dụng xác thực"
   },
   "authenticatorAppDesc": {
-    "message": "Sử dụng một ứng dụng xác thực (chẳng hạn như Authy hoặc Google Authenticator) để tạo các mã xác nhận theo thời gian.",
+    "message": "Sử dụng một ứng dụng xác thực (chẳng hạn như Authy hoặc Google Authenticator) để tạo các mã xác thực thời gian thực.",
     "description": "'Authy' and 'Google Authenticator' are product names and should not be translated."
   },
   "yubiKeyTitle": {
     "message": "Mật khẩu OTP YubiKey"
   },
   "yubiKeyDesc": {
-    "message": "Sử dụng YubiKey để truy cập tài khoản của bạn. Hoạt động với YubiKey 4, 4 Nano, 4C và NEO."
+    "message": "Sử dụng YubiKey để truy cập tài khoản của bạn. Hoạt động với YubiKey 4, 5 và các thiết bị NEO."
   },
   "duoDesc": {
     "message": "Xác minh với Duo Security dùng ứng dụng Duo Mobile, SMS, điện thoại, hoặc mật khẩu U2F.",
@@ -959,7 +959,7 @@
     "message": "Email"
   },
   "emailDesc": {
-    "message": "Mã xác thực sẽ được gửi qua email cho bạn."
+    "message": "Mã xác minh sẽ được gửi qua email cho bạn."
   },
   "continue": {
     "message": "Tiếp tục"
@@ -977,10 +977,10 @@
     "message": "Choose an organization that you wish to move these items to. Moving to an organization transfers ownership of the items to that organization. You will no longer be the direct owner of these items once they have been moved."
   },
   "collectionsDesc": {
-    "message": "Chỉnh sửa những bộ sưu tập mà bạn sẽ chia sẻ mục này với. Chỉ những thành viên của tổ chức với quyền cho những bộ sưu tập đó mới có thể xem được mục này."
+    "message": "Chỉnh sửa những bộ sưu tập mà bạn có chia sẻ mục này. Chỉ những thành viên của tổ chức có quyền quản lý những bộ sưu tập đó mới có thể xem được mục này."
   },
   "deleteSelectedItemsDesc": {
-    "message": "Bạn đã chọn $COUNT$ mục để xóa. Bạn có chắc bạn muốn xóa hết những mục này?",
+    "message": "$COUNT$ mục sẽ được chuyển vào thùng rác.",
     "placeholders": {
       "count": {
         "content": "$1",
@@ -1001,7 +1001,7 @@
     "message": "Bạn có chắc rằng bạn muốn tiếp tục?"
   },
   "moveSelectedItemsDesc": {
-    "message": "Vui lòng chọn thư mục mà bạn muốn di chuyển $COUNT$ mục này tới.",
+    "message": "Chọn thư mục mà bạn muốn di chuyển $COUNT$ mục này tới.",
     "placeholders": {
       "count": {
         "content": "$1",
@@ -1045,7 +1045,7 @@
     "message": "Xác nhận xuất kho lưu trữ"
   },
   "exportWarningDesc": {
-    "message": "Bản trích xuất này chứa dữ liệu kho bạn và không được mã hóa. Bạn không nên lưu trữ hay gửi tập tin trích xuất thông qua phương thức không an toàn (như email). Vui lòng xóa nó ngay lập tức khi bạn đã sử dụng xong."
+    "message": "Bản xuất này chứa dữ liệu kho bạn và không được mã hóa. Bạn không nên lưu trữ hay gửi tập tin đã xuất thông qua phương thức rủi ro (như email). Vui lòng xóa nó ngay lập tức khi bạn đã sử dụng xong."
   },
   "exportSecretsWarningDesc": {
     "message": "This export contains your secrets data in an unencrypted format. You should not store or send the exported file over unsecure channels (such as email). Delete it immediately after you are done using it."
@@ -1060,7 +1060,7 @@
     "message": "Xuất"
   },
   "exportVault": {
-    "message": "Trích xuất kho"
+    "message": "Xuất kho"
   },
   "exportSecrets": {
     "message": "Export secrets"
@@ -1075,7 +1075,7 @@
     "message": "This password will be used to export and import this file"
   },
   "confirmMasterPassword": {
-    "message": "Xác nhận mật khẩu chính"
+    "message": "Nhập lại mật khẩu chính"
   },
   "confirmFormat": {
     "message": "Confirm format"
@@ -1084,7 +1084,7 @@
     "message": "Mật khẩu tập tin"
   },
   "confirmFilePassword": {
-    "message": "Xác nhận mật khẩu tập tin"
+    "message": "Nhập lại mật khẩu tập tin"
   },
   "accountRestrictedOptionDescription": {
     "message": "Use your account encryption key, derived from your account's username and Master Password, to encrypt the export and restrict import to only the current Bitwarden account."
@@ -1099,25 +1099,25 @@
     "message": "Tài khoản bị hạn chế"
   },
   "passwordProtected": {
-    "message": "Mật khẩu đã được bảo vệ"
+    "message": "Đã được bảo vệ mật khẩu"
   },
   "filePasswordAndConfirmFilePasswordDoNotMatch": {
-    "message": "“Mật khẩu tệp” và “Xác nhận mật khẩu tệp” không khớp."
+    "message": "“Mật khẩu tập tin” và “Nhập lại mật khẩu tập tin” không khớp."
   },
   "confirmVaultImport": {
-    "message": "Xác nhận nhập kho lưu trữ"
+    "message": "Xác nhận nhập kho mật khẩu"
   },
   "confirmVaultImportDesc": {
-    "message": "Tập tin này được mật khẩu bảo vệ. Vui lòng nhập mật khẩu tệp để nhập dữ liệu."
+    "message": "Tập tin này được bảo vệ bằng mật khẩu. Vui lòng nhập mật khẩu để nhập dữ liệu."
   },
   "exportSuccess": {
-    "message": "Dữ liệu kho cảu bạn đã được trích xuất."
+    "message": "Đã xuất dữ liệu kho cảu bạn"
   },
   "passwordGenerator": {
     "message": "Tạo mật khẩu"
   },
   "minComplexityScore": {
-    "message": "Điểm phức tạp tối thiểu"
+    "message": "Độ phức tạp tối thiểu"
   },
   "minNumbers": {
     "message": "Số chữ số tối thiểu"
@@ -1127,7 +1127,7 @@
     "description": "Minimum special characters"
   },
   "ambiguous": {
-    "message": "Tránh các ký tự không rõ ràng"
+    "message": "Tránh các ký tự dễ gây nhầm lẫn"
   },
   "regeneratePassword": {
     "message": "Tạo lại mật khẩu"
@@ -1136,21 +1136,21 @@
     "message": "Độ dài"
   },
   "uppercase": {
-    "message": "Chữ in hoa (A-Z)",
+    "message": "Chữ hoa (A-Z)",
     "description": "Include uppercase letters in the password generator."
   },
   "lowercase": {
-    "message": "Chữ in thường (a-z)",
+    "message": "Chữ thường (a-z)",
     "description": "Include lowercase letters in the password generator."
   },
   "numbers": {
-    "message": "Số (0-9)"
+    "message": "Chữ số (0-9)"
   },
   "specialCharacters": {
     "message": "Ký tự đặc biệt (!@#$%^&*)"
   },
   "numWords": {
-    "message": "Số lượng chữ"
+    "message": "Số lượng từ"
   },
   "wordSeparator": {
     "message": "Dấu tách từ"
@@ -1166,10 +1166,10 @@
     "message": "Lịch sử mật khẩu"
   },
   "noPasswordsInList": {
-    "message": "Không có mật khẩu để liệt kê."
+    "message": "Chưa có mật khẩu."
   },
   "clear": {
-    "message": "Xoá",
+    "message": "Xóa",
     "description": "To clear something out. Example: To clear browser history."
   },
   "accountUpdated": {
@@ -1188,7 +1188,7 @@
     "message": "Mã"
   },
   "changeEmailDesc": {
-    "message": "Chúng tôi đã gửi mã xác thực tới $EMAIL$. Vui lòng kiểm tra thùng thư của bạn để nhận và nhập mã vào bên dưới để hoàn thành quá trình thay đổi địa chỉ email.",
+    "message": "Chúng tôi đã gửi mã xác minh tới $EMAIL$. Vui lòng kiểm tra email để nhận và nhập mã vào bên dưới để hoàn tất quá trình thay đổi địa chỉ email.",
     "placeholders": {
       "email": {
         "content": "$1",
@@ -1197,7 +1197,7 @@
     }
   },
   "loggedOutWarning": {
-    "message": "Tiếp tục sẽ đăng xuất bạn ra khỏi phiên hiện tại, cần bạn phải đăng nhập lại. Những phiên trên các thiết bị khác sẽ tiếp tục có hiệu lực lên đến 1 tiếng."
+    "message": "Sẽ đăng xuất bạn ra khỏi phiên hiện tại, sau đó cần đăng nhập lại. Những phiên trên các thiết bị khác sẽ tiếp tục có hiệu lực lên đến 1 tiếng."
   },
   "emailChanged": {
     "message": "Đã thay đổi email"
@@ -1224,7 +1224,7 @@
     "message": "Xác nhận mật khẩu chính mới"
   },
   "encKeySettings": {
-    "message": "Cài đặt mật khẩu mã hóa"
+    "message": "Cài đặt mã khóa"
   },
   "kdfAlgorithm": {
     "message": "Thuật toán KDF"
@@ -1233,7 +1233,7 @@
     "message": "Số lần KDF"
   },
   "kdfIterationsDesc": {
-    "message": "Số lần KDF nhiều có thể giúp bảo vệ mật khẩu chính khỏi những cuộc tấn công cưỡng chế. Chúng tôi khuyến khích giá trị $VALUE$ hoặc cao hơn.",
+    "message": "Số lần KDF nhiều có thể giúp bảo vệ mật khẩu chính khỏi những cuộc tấn công. Chúng tôi khuyến khích giá trị $VALUE$ hoặc cao hơn.",
     "placeholders": {
       "value": {
         "content": "$1",
@@ -1242,7 +1242,7 @@
     }
   },
   "kdfIterationsWarning": {
-    "message": "Số lần KDF quá cao có thể làm các thiết bị yếu hơn bị giật lag khi đăng nhập (hoặc mỏ khóa). Chúng tôi khuyến khích tăng $INCREMENT$ mỗi lần và thử trên các thiết bị của bạn trước.",
+    "message": "Số lần KDF quá cao có thể làm các thiết bị yếu hơn bị giật lag khi đăng nhập (hoặc mở khóa). Chúng tôi khuyến khích tăng $INCREMENT$ mỗi lần và thử trên các thiết bị của bạn trước.",
     "placeholders": {
       "increment": {
         "content": "$1",
@@ -1267,25 +1267,25 @@
     "message": "Thay đổi KDF"
   },
   "encKeySettingsChanged": {
-    "message": "Cài đặt mật khẩu mã hóa đã thay đổi"
+    "message": "Đã thay đổi cài đặt mã khóa"
   },
   "dangerZone": {
     "message": "Vùng nguy hiểm"
   },
   "dangerZoneDesc": {
-    "message": "Vui lòng cẩn thận, những hành động này không thể được hủy bỏ!"
+    "message": "Cẩn thận, thao tác này không thể khôi phục!"
   },
   "deauthorizeSessions": {
-    "message": "Hủy quyền phiên"
+    "message": "Gỡ phiên"
   },
   "deauthorizeSessionsDesc": {
-    "message": "Lo lắng tài khoản của bạn bị đăng nhập trên một thiết bị khác? Tiếp tục bên dưới để hủy quyền tất cả thiết bị bạn đã sử dụng. Bước bảo mật này được khuyến khích nếu bạn đã sử dụng thiết bị công cộng hoặc thiết bị không phải của bạn. Nó cũng sẽ xóa hết những phiên đăng nhập hai bước đã được lưu."
+    "message": "Lo lắng tài khoản của bạn bị đăng nhập trên một thiết bị khác? Hãy gỡ phiên tất cả thiết bị bạn đã sử dụng. Bước bảo mật này được khuyến khích nếu bạn đã sử dụng thiết bị công cộng hoặc thiết bị không phải của bạn. Nó cũng sẽ xóa hết những phiên đăng nhập hai bước đã được lưu."
   },
   "deauthorizeSessionsWarning": {
-    "message": "Tiếp tục sẽ đăng xuất bạn ra khỏi phiên hiện tại, cần bạn phải đăng nhập lại. Bạn cũng sẽ phải đăng nhập hai bước lại nếu bạn có đăng nhập hai bước. Những phiên đăng nhập trên các thiết bị khác sẽ tiếp tục có hiệu lực lên đến 1 tiếng."
+    "message": "Sẽ đăng xuất bạn ra khỏi phiên hiện tại, sau đó cần đăng nhập lại. Bạn cũng sẽ phải đăng nhập hai bước lại nếu bạn có đăng nhập hai bước. Những phiên đăng nhập trên các thiết bị khác sẽ tiếp tục có hiệu lực lên đến 1 tiếng."
   },
   "sessionsDeauthorized": {
-    "message": "Tất cả phiên đăng nhập đã bị hủy"
+    "message": "Tất cả phiên đăng nhập đã bị gỡ"
   },
   "purgeVault": {
     "message": "Xóa kho"
@@ -1297,7 +1297,7 @@
     "message": "Vault accessed by Provider."
   },
   "purgeVaultDesc": {
-    "message": "Tiếp tục bên dưới để xóa hết tất cả mục và thư mục trong kho của bạn. Những mục thuộc về tổ chức mà bạn chia sẻ với sẽ không bị xóa."
+    "message": "Tiếp tục để xóa hết tất cả mục và thư mục trong kho của bạn. Những mục thuộc về tổ chức mà bạn chia sẻ sẽ không bị xóa."
   },
   "purgeOrgVaultDesc": {
     "message": "Tiếp tục bên dưới để xóa hết tất cả mục trong kho của tổ chức."
@@ -1312,16 +1312,16 @@
     "message": "Xóa tài khoản"
   },
   "deleteAccountDesc": {
-    "message": "Tiếp tục bên dưới để xóa tài khoản và dữ liệu liên quan của bạn."
+    "message": "Tiếp tục để xóa tài khoản và dữ liệu liên quan của bạn."
   },
   "deleteAccountWarning": {
-    "message": "Việc xóa tài khoản là vĩnh viễn và không thể hoàn tác."
+    "message": "Tài khoản sẽ bị xóa vĩnh viễn và không thể hoàn tác."
   },
   "accountDeleted": {
     "message": "Tài khoản đã được xóa"
   },
   "accountDeletedDesc": {
-    "message": "Tài khoản của bạn đã được đóng và tất cả những dữ liệu liên quan đã được xóa."
+    "message": "Đã đóng tài khoản của bạn và tất cả những dữ liệu liên quan cũng được xóa."
   },
   "myAccount": {
     "message": "Tài khoản của tôi"
@@ -1366,7 +1366,7 @@
     "message": "Dữ liệu không được định dạng đúng cách, vui lòng kiểm tra và thử lại."
   },
   "importNothingError": {
-    "message": "Không có gì đã được nhập."
+    "message": "Chưa nhập gì."
   },
   "importEncKeyError": {
     "message": "Error decrypting the exported file. Your encryption key does not match the encryption key used export the data."
@@ -1397,7 +1397,7 @@
     "message": "File contains unassigned items."
   },
   "selectFormat": {
-    "message": "Chọn định dạng cho file xuất"
+    "message": "Chọn định dạng xuất"
   },
   "selectImportFile": {
     "message": "Chọn tập tin nhập"
@@ -1406,13 +1406,13 @@
     "message": "Chọn tập tin"
   },
   "noFileChosen": {
-    "message": "Không có tệp nào được chọn"
+    "message": "Chưa chọn tập tin nào"
   },
   "orCopyPasteFileContents": {
     "message": "hoặc sao chép/dán để nhập nội dung file"
   },
   "instructionsFor": {
-    "message": "Chỉ dẫn cho $NAME$",
+    "message": "Hướng dẫn dùng $NAME$",
     "description": "The title for the import tool instructions.",
     "placeholders": {
       "name": {
@@ -1425,19 +1425,19 @@
     "message": "Tùy chọn"
   },
   "preferences": {
-    "message": "Tuỳ chỉnh"
+    "message": "Tùy chỉnh"
   },
   "preferencesDesc": {
-    "message": "Tùy chỉnh trải nghiệm Kho trên web của bạn."
+    "message": "Tùy chỉnh Kho trên web của bạn."
   },
   "preferencesUpdated": {
-    "message": "Đã lưu tuỳ chỉnh"
+    "message": "Đã lưu tùy chỉnh"
   },
   "language": {
     "message": "Ngôn ngữ"
   },
   "languageDesc": {
-    "message": "Thay đổi ngôn ngữ của kho mạng."
+    "message": "Thay đổi ngôn ngữ của kho trên web."
   },
   "enableFavicon": {
     "message": "Hiện biểu tượng trang web"
@@ -1456,7 +1456,7 @@
     "message": "Mặc định"
   },
   "domainRules": {
-    "message": "Quy luật tên miền"
+    "message": "Quy tắc tên miền"
   },
   "domainRulesDesc": {
     "message": "If you have the same login across multiple different website domains, you can mark the website as \"equivalent\". \"Global\" domains are ones already created for you by Bitwarden."
@@ -1492,10 +1492,10 @@
     }
   },
   "domainsUpdated": {
-    "message": "Tên miền được cập nhật"
+    "message": "Tên miền đã được cập nhật"
   },
   "twoStepLogin": {
-    "message": "Xác thực 2 bước"
+    "message": "Đăng nhập 2-bước"
   },
   "twoStepLoginEnforcement": {
     "message": "Two-step Login Enforcement"
@@ -1523,7 +1523,7 @@
     "message": "Setting up two-step login can permanently lock you out of your Bitwarden account. A recovery code allows you to access your account in the event that you can no longer use your normal two-step login provider (example: you lose your device). Bitwarden support will not be able to assist you if you lose access to your account. We recommend you write down or print the recovery code and keep it in a safe place."
   },
   "viewRecoveryCode": {
-    "message": "Hiển thị mã khôi phục"
+    "message": "Xem mã khôi phục"
   },
   "providers": {
     "message": "Cung cấp",
@@ -1549,10 +1549,10 @@
     "message": "Cần có tài khoản trả phí"
   },
   "premiumRequiredDesc": {
-    "message": "Cần nâng cấp tài khoản trả phí để sử dụng chức năng này."
+    "message": "Cần nâng cấp tài khoản trả phí để sử dụng tính năng này."
   },
   "youHavePremiumAccess": {
-    "message": "Bạn được truy cập tài khoản trả phí"
+    "message": "Bạn có tài khoản trả phí"
   },
   "alreadyPremiumFromOrg": {
     "message": "Bạn được truy cập tài khoản trả phí vì tổ chức của bạn đã chi trả cho việc này."
@@ -1576,7 +1576,7 @@
     "message": "Vui lòng nhập mật khẩu chính để chỉnh sửa cài đặt đăng nhập hai bước."
   },
   "twoStepAuthenticatorDesc": {
-    "message": "Làm theo hướng dẫn để thiếp lập đăng nhập hai bước bằng ứng dụng:"
+    "message": "Làm theo hướng dẫn để thiết lập đăng nhập 2 bước bằng ứng dụng:"
   },
   "twoStepAuthenticatorDownloadApp": {
     "message": "Tải về ứng dụng xác thực hai bước"
@@ -1594,52 +1594,52 @@
     "message": "Thiết bị Windows"
   },
   "twoStepAuthenticatorAppsRecommended": {
-    "message": "Những ứng dụng xác thực sau đây được khuyên dùng, thích cái khác cũng được, ko sao."
+    "message": "Những ứng dụng xác thực sau đây được khuyên dùng, nhưng những cái khác cũng ok."
   },
   "twoStepAuthenticatorScanCode": {
-    "message": "Quét nã QR code bằng ứng dụng xác thực"
+    "message": "Quét mã QR bằng ứng dụng xác thực"
   },
   "key": {
-    "message": "Chìa khóa"
+    "message": "Khóa"
   },
   "twoStepAuthenticatorEnterCode": {
-    "message": "Vui lòng nhập mã 6 bước sinh ra từ ứng dụng xác thực"
+    "message": "Vui lòng nhập mã 6 chữ số được tạo từ ứng dụng xác thực"
   },
   "twoStepAuthenticatorReaddDesc": {
-    "message": "Trong trường hợp bạn cần thêm thiết bị khác, ở dưới là mã QR( hoặc khóa) được yêu cầu bởi ứng dụng xác thực."
+    "message": "Trong trường hợp bạn cần thêm thiết bị khác, ở dưới là mã QR (hoặc khóa) được yêu cầu bởi ứng dụng xác thực."
   },
   "twoStepDisableDesc": {
-    "message": "Bạn có chắc muốn vô hiệu hóa xác thực hai bước?"
+    "message": "Bạn có chắc muốn vô hiệu hóa xác minh hai bước?"
   },
   "twoStepDisabled": {
     "message": "Xác thực hai bước bị hủy bỏ."
   },
   "twoFactorYubikeyAdd": {
-    "message": "Thêm khóa Yubikey mới vào tài khoản của bạn"
+    "message": "Thêm khóa YubiKey mới vào tài khoản của bạn"
   },
   "twoFactorYubikeyPlugIn": {
-    "message": "Cắm khóa Yubikey vào cổng USB máy tính của bạn."
+    "message": "Cắm khóa YubiKey vào cổng USB máy tính của bạn."
   },
   "twoFactorYubikeySelectKey": {
     "message": "Select the first empty YubiKey input field below."
   },
   "twoFactorYubikeyTouchButton": {
-    "message": "Chạm vào nút bấm trên Yubikey."
+    "message": "Chạm vào nút bấm trên YubiKey."
   },
   "twoFactorYubikeySaveForm": {
     "message": "Lưu mẫu."
   },
   "twoFactorYubikeyWarning": {
-    "message": "Do giới hạn của hệ điều hành, Yubikey KHÔNG thể xài hết được trên các ứng dụng Bitwarden. Bạn nên đăng ký thêm một phương pháp xác thực 2 bước khác khi mà Yubikey không xài được. Hỗ trợ hệ điều hành:"
+    "message": "Do giới hạn của hệ điều hành, YubiKey không thể xài hết được trên các ứng dụng Bitwarden. Bạn nên đăng ký thêm một phương pháp xác thực 2 bước khác khi mà YubiKey không xài được. Hỗ trợ hệ điều hành:"
   },
   "twoFactorYubikeySupportUsb": {
     "message": "Web vault, desktop application, CLI, and all browser extensions on a device with a USB port that can accept your YubiKey."
   },
   "twoFactorYubikeySupportMobile": {
-    "message": "Mobile apps on a device with NFC capabilities or a USB port that can accept your YubiKey."
+    "message": "Ứng dụng di động trên thiết bị có khả năng NFC hoặc cổng USB có thể chấp nhận YubiKey của bạn."
   },
   "yubikeyX": {
-    "message": "Yubikey $INDEX$",
+    "message": "YubiKey $INDEX$",
     "placeholders": {
       "index": {
         "content": "$1",
@@ -1672,10 +1672,10 @@
     "message": "Một trong các khóa bảo mật của tôi có hỗ trợ NFC."
   },
   "twoFactorYubikeySupportsNfcDesc": {
-    "message": "Nếu một trong các khóa Yubikey có hỗ trợ NFC (ví dụ như Yubikey NEO), bạn sẽ được nhắc nhở trên thiết bị di động khi sóng NFC được phát hiện."
+    "message": "Nếu một trong các khóa YubiKey có hỗ trợ NFC (ví dụ như Yubikey NEO), bạn sẽ được nhắc nhở trên thiết bị di động khi sóng NFC được phát hiện."
   },
   "yubikeysUpdated": {
-    "message": "Đã cập nhập Yubikey"
+    "message": "Đã cập nhật YubiKey"
   },
   "disableAllKeys": {
     "message": "Deactivate all keys"
@@ -1687,7 +1687,7 @@
     "message": "Integration key"
   },
   "twoFactorDuoSecretKey": {
-    "message": "Mã khóa bí mật"
+    "message": "Khóa bí mật"
   },
   "twoFactorDuoApiHostname": {
     "message": "API hostname"
@@ -1702,13 +1702,13 @@
     "message": "Enter the resulting 6 digit verification code from the email"
   },
   "sendEmail": {
-    "message": "Gửi Email"
+    "message": "Gửi email"
   },
   "twoFactorU2fAdd": {
     "message": "Add a FIDO U2F security key to your account"
   },
   "removeU2fConfirmation": {
-    "message": "Bạn có chắc chắn muốn xóa khóa bảo mật này?"
+    "message": "Bạn có chắc muốn xóa khóa bảo mật này?"
   },
   "twoFactorWebAuthnAdd": {
     "message": "Add a WebAuthn security key to your account"
@@ -1717,10 +1717,10 @@
     "message": "Read key"
   },
   "keyCompromised": {
-    "message": "Chìa khóa bị lộ."
+    "message": "Khóa bị lộ."
   },
   "twoFactorU2fGiveName": {
-    "message": "Đặt cho Yubikey một cái tên để nhận diện."
+    "message": "Đặt cho YubiKey một cái tên để nhận diện."
   },
   "twoFactorU2fPlugInReadKey": {
     "message": "Cắm khóa bảo mật vào cổng USB và bấm nút trên khóa."
@@ -1732,7 +1732,7 @@
     "message": "Lưu mẫu."
   },
   "twoFactorU2fWarning": {
-    "message": "Do giới hạn của hệ điều hành, FIDO U2F KHÔNG thể xài hết được trên các ứng dụng Bitwarden. Bạn nên đăng ký thêm một phương pháp xác thực 2 bước khác khi mà FIDO U2F không xài được. Hỗ trợ hệ điều hành:"
+    "message": "Do giới hạn của hệ điều hành, FIDO U2F không thể xài hết được trên các ứng dụng Bitwarden. Bạn nên đăng ký thêm một phương pháp xác thực 2 bước khác khi mà FIDO U2F không xài được. Hỗ trợ hệ điều hành:"
   },
   "twoFactorU2fSupportWeb": {
     "message": "Web vault and browser extensions on a desktop/laptop with a U2F supported browser (Chrome, Opera, Vivaldi, or Firefox with FIDO U2F turned on)."
@@ -1759,7 +1759,7 @@
     "message": "You have not set up any two-step login providers yet. After you have set up a two-step login provider you can check back here for your recovery code."
   },
   "printCode": {
-    "message": "In mã",
+    "message": "Mã in",
     "description": "Print 2FA recovery code"
   },
   "reports": {
@@ -1774,7 +1774,7 @@
     "description": "Vault health reports can be used to evaluate the security of your Bitwarden individual or organization vault."
   },
   "unsecuredWebsitesReport": {
-    "message": "Báo cáo trang web không an toàn"
+    "message": "Trang web không an toàn"
   },
   "unsecuredWebsitesReportDesc": {
     "message": "URLs that start with http:// don’t use the best available encryption. Change the login URIs for these accounts to https:// for safer browsing."
@@ -1798,7 +1798,7 @@
     "message": "Inactive two-step login"
   },
   "inactive2faReportDesc": {
-    "message": "Xác thực 2 bước là một bước quan trọng để bảo vệ tài khoản của bạn khỏi hacker. Nếu trang web cho phép, bạn nên kích hoạt xác thực 2 bước."
+    "message": "Đăng nhập hai bước sẽ thêm một lớp bảo vệ cho tài khoản của bạn. Thiết lập đăng nhập hai bước bằng trình xác thực Bitwarden cho các tài khoản này hoặc sử dụng phương pháp thay thế."
   },
   "inactive2faFound": {
     "message": "Logins without two-step login found"
@@ -1819,7 +1819,7 @@
     "message": "Hướng dẫn"
   },
   "exposedPasswordsReport": {
-    "message": "Báo cáo mật khẩu bị rò rỉ"
+    "message": "Mật khẩu bị rò rỉ"
   },
   "exposedPasswordsReportDesc": {
     "message": "Passwords exposed in a data breach are easy targets for attackers. Change these passwords to prevent potential break-ins."
@@ -1852,13 +1852,13 @@
     }
   },
   "weakPasswordsReport": {
-    "message": "Báo cáo mật khẩu không đảm bảo an toàn"
+    "message": "Mật khẩu yếu"
   },
   "weakPasswordsReportDesc": {
-    "message": "Mật khẩu không an toàn có thể bị hacker và công cụ dò mật khẩu tự động đoán được dễ dàng . Chế độ tạo mật khẩu tự động của Bitwarden sẽ khắc phục vấn đề này."
+    "message": "Những kẻ tấn công có thể dễ dàng đoán được mật khẩu yếu. Thay đổi những mật khẩu này thành mật khẩu mạnh bằng cách sử dụng trình tạo mật khẩu."
   },
   "weakPasswordsFound": {
-    "message": "Phát hiện mật khẩu không an toàn"
+    "message": "Phát hiện mật khẩu yếu"
   },
   "weakPasswordsFoundDesc": {
     "message": "We found $COUNT$ items in your vault with passwords that are not strong. You should update them to use stronger passwords.",
@@ -1873,13 +1873,13 @@
     "message": "No items in your vault have weak passwords."
   },
   "reusedPasswordsReport": {
-    "message": "Báo cáo mật khẩu tái sử dụng"
+    "message": "Mật khẩu bị trùng"
   },
   "reusedPasswordsReportDesc": {
     "message": "Reusing passwords makes it easier for attackers to break into multiple accounts. Change these passwords so that each is unique."
   },
   "reusedPasswordsFound": {
-    "message": "Phát hiện mật khẩu tái sử dụng"
+    "message": "Phát hiện mật khẩu bị trùng"
   },
   "reusedPasswordsFoundDesc": {
     "message": "We found $COUNT$ passwords that are being reused in your vault. You should change them to a unique value.",
@@ -1903,7 +1903,7 @@
     }
   },
   "dataBreachReport": {
-    "message": "Báo cáo dữ liệu bị rò rĩ"
+    "message": "Dữ liệu bị rò rĩ"
   },
   "breachDesc": {
     "message": "Breached accounts can expose your personal information. Secure breached accounts by enabling 2FA or creating a stronger password."
@@ -2077,7 +2077,7 @@
     "message": "# of additional GB"
   },
   "additionalStorageIntervalDesc": {
-    "message": "Gói của bạn có $SIZE$ dung lượng lưu trữ tập tin có mã hóa. Bạn có thể mua thêm dung lượng với giá $PRICE$ cho mỗi GB/$INTERVAL$.",
+    "message": "Gói của bạn có $SIZE$ dung lượng lưu trữ tập tin mã hóa. Bạn có thể mua thêm dung lượng với giá $PRICE$ cho mỗi GB/$INTERVAL$.",
     "placeholders": {
       "size": {
         "content": "$1",
@@ -2113,7 +2113,7 @@
     "description": "Short abbreviation for 'month'"
   },
   "paymentChargedAnnually": {
-    "message": "Phương thức thanh toán của bạn sẽ được thu phí ngay lập tức và sau đó sẽ định kỳ thu phí mỗi năm. Bạn có thể hủy bỏ bất cứ lúc nào."
+    "message": "Phương thức thanh toán của bạn sẽ được áp dụng ngay lập tức và gia hạn mỗi năm. Bạn có thể hủy bỏ bất cứ lúc nào."
   },
   "paymentCharged": {
     "message": "Phương thức thanh toán của bạn sẽ được thu phí ngay lập tức và sau đó sẽ thu phí định kỳ mỗi $INTERVAL$. Bạn có thể hủy bất cứ lúc nào.",
@@ -2128,58 +2128,58 @@
     "message": "Your payment method will be charged for any unpaid subscriptions."
   },
   "paymentChargedWithTrial": {
-    "message": "Gói của bạn đi kèm với 7 ngày dùng thử miễn phí. Phương thức thanh toán của bạn sẽ không bị tính phí cho đến khi hết thời gian dùng thử. Việc thanh toán sẽ thực hiện định kỳ mỗi $INTERVAL$. Bạn có thể hủy bỏ bất cứ lúc nào."
+    "message": "Gói của bạn đi kèm với 7 ngày dùng thử miễn phí. Phương thức thanh toán của bạn sẽ không bị tính phí cho đến khi hết thời gian dùng thử. Bạn có thể hủy bỏ bất cứ lúc nào."
   },
   "paymentInformation": {
-    "message": "Thông Tin Thanh Toán"
+    "message": "Thông tin thanh toán"
   },
   "billingInformation": {
-    "message": "Thông Tin Hóa Đơn"
+    "message": "Thông tin hóa đơn"
   },
   "billingTrialSubLabel": {
     "message": "Phương thức thanh toán của bạn sẽ không bị thu phí trong 7 ngày dùng thử miễn phí."
   },
   "creditCard": {
-    "message": "Thẻ Tín Dụng"
+    "message": "Thẻ tín dụng"
   },
   "paypalClickSubmit": {
     "message": "Nhấn vào nút PayPal để đăng nhập vào tài khoản PayPal của bạn, sau đó nhấn vào nút Submit bên dưới để tiếp tục."
   },
   "cancelSubscription": {
-    "message": "Hủy thuê bao"
+    "message": "Hủy gói"
   },
   "subscriptionExpiration": {
-    "message": "Thuê bao hết hạn vào"
+    "message": "Gói hết hạn vào"
   },
   "subscriptionCanceled": {
-    "message": "Thuê bao của bạn đã bị hủy."
+    "message": "Gói của bạn đã bị hủy."
   },
   "pendingCancellation": {
     "message": "Đang chờ hủy"
   },
   "subscriptionPendingCanceled": {
-    "message": "Thuê bao của bạn sẽ được huỷ tại cuối kì thanh toán hiện tại."
+    "message": "Gói của bạn sẽ được hủy vào cuối kì thanh toán hiện tại."
   },
   "reinstateSubscription": {
-    "message": "Kích hoạt lại thuê bao"
+    "message": "Kích hoạt lại gói"
   },
   "reinstateConfirmation": {
     "message": "Bạn có chắc muốn bỏ yêu cầu hủy đang chờ duyệt và kích hoạt lại thuê bao?"
   },
   "reinstated": {
-    "message": "Đã kích hoạt lại thuê bao."
+    "message": "Đã kích hoạt lại gói."
   },
   "cancelConfirmation": {
     "message": "Bạn có chắc muốn hủy không? Bạn sẽ mất hết quyền truy cập tất cả các tính năng của thuê bao này khi kì thanh toán kết thúc."
   },
   "canceledSubscription": {
-    "message": "Đã hủy thuê bao"
+    "message": "Đã hủy gói"
   },
   "neverExpires": {
     "message": "Never expires"
   },
   "status": {
-    "message": "Trạng Thái"
+    "message": "Trạng thái"
   },
   "nextCharge": {
     "message": "Next charge"
@@ -2194,10 +2194,10 @@
     "message": "Update license"
   },
   "manageSubscription": {
-    "message": "Quản lý thuê bao"
+    "message": "Quản lý gói"
   },
   "launchCloudSubscription": {
-    "message": "Bắt Đầu Đăng Ký Đám Mây"
+    "message": "Bắt đầu đăng ký Đám Mây"
   },
   "storage": {
     "message": "Lưu trữ"
@@ -2237,7 +2237,7 @@
     "message": "Hóa đơn"
   },
   "noInvoices": {
-    "message": "Không có hóa đơn."
+    "message": "Chưa có hóa đơn."
   },
   "paid": {
     "message": "Paid",
@@ -2409,7 +2409,7 @@
     "message": "For businesses and other large organizations."
   },
   "freeForever": {
-    "message": "Miễn Phí Mãi Mãi"
+    "message": "Miễn phí trọn đời"
   },
   "includesXUsers": {
     "message": "includes $COUNT$ users",
@@ -2565,7 +2565,7 @@
     "message": "Tải ứng dụng"
   },
   "loggedInAs": {
-    "message": "Đã đăng nhập là"
+    "message": "Đã đăng nhập"
   },
   "eventLogs": {
     "message": "Event logs"
@@ -2589,13 +2589,13 @@
     "message": "New group"
   },
   "addGroup": {
-    "message": "Thêm Nhóm"
+    "message": "Thêm nhóm"
   },
   "editGroup": {
-    "message": "Chỉnh Sửa Nhóm"
+    "message": "Chỉnh sửa nhóm"
   },
   "deleteGroupConfirmation": {
-    "message": "Bạn có chắc chắn muốn xóa nhóm này?"
+    "message": "Bạn có chắc muốn xóa nhóm này?"
   },
   "deleteMultipleGroupsConfirmation": {
     "message": "Are you sure you want to delete the following $QUANTITY$ group(s)?",
@@ -2781,7 +2781,7 @@
     "message": "Two-step login saved"
   },
   "disabled2fa": {
-    "message": "Đã tắt đăng nhập 2 bước."
+    "message": "Đã tắt đăng nhập 2 bước"
   },
   "recovered2fa": {
     "message": "Recovered account from two-step login."
@@ -3300,7 +3300,7 @@
     }
   },
   "rememberEmail": {
-    "message": "Ghi nhớ đăng nhập"
+    "message": "Ghi nhớ email"
   },
   "recoverAccountTwoStepDesc": {
     "message": "If you cannot access your account through your normal two-step login methods, you can use your two-step login recovery code to turn off all two-step providers on your account."
@@ -3318,7 +3318,7 @@
     "message": "Nhập địa chỉ email của bạn vào bên dưới để khôi phục và xóa tài khoản của bạn."
   },
   "deleteRecoverEmailSent": {
-    "message": "Nếu tài khoản của bạn có tồn tại, chúng tôi đã gửi cho bạn một email với hướng dẫn chi tiết."
+    "message": "Nếu tài khoản của bạn tồn tại, chúng tôi đã gửi cho bạn một email với hướng dẫn chi tiết."
   },
   "deleteRecoverConfirmDesc": {
     "message": "Bạn đã yêu cầu xóa tài khoản Bitwarden của mình. Nhấn vào nút bên dưới để xác nhận."
@@ -3363,21 +3363,21 @@
     "message": "Organization saved"
   },
   "taxInformation": {
-    "message": "Thông Tin Thuế"
+    "message": "Thông tin thuế"
   },
   "taxInformationDesc": {
-    "message": "Đối với các khách hàng ở Mỹ, mã ZIP là bắt buộc để đáp ứng các yêu cầu về thuế bán hàng, đối với các quốc gia khác, bạn có thể tùy chọn cung cấp mã số thuế (VAT / GST) và/hoặc địa chỉ để xuất hiện trên hóa đơn của mình."
+    "message": "Đối với khách hàng Mỹ, mã ZIP là bắt buộc để đáp ứng các yêu cầu về thuế bán hàng, đối với các quốc gia khác, bạn có thể tùy chọn cung cấp mã số thuế (VAT/GST) và/hoặc địa chỉ để xuất hiện trên hóa đơn của mình."
   },
   "billingPlan": {
     "message": "Gói",
     "description": "A billing plan/package. For example: Families, Teams, Enterprise, etc."
   },
   "changeBillingPlan": {
-    "message": "Thay Đổi Gói",
+    "message": "Nâng cấp gói",
     "description": "A billing plan/package. For example: Families, Teams, Enterprise, etc."
   },
   "changeBillingPlanUpgrade": {
-    "message": "Upgrade your account to another plan be providing the information below. Please ensure that you have an active payment method added to the account.",
+    "message": "Nâng cấp tài khoản của bạn lên gói khác bằng cách cung cấp thông tin bên dưới. Hãy đảm bảo rằng bạn đã thêm phương thức thanh toán đang hoạt động vào tài khoản.",
     "description": "A billing plan/package. For example: Families, Teams, Enterprise, etc."
   },
   "invoiceNumber": {
@@ -3391,10 +3391,10 @@
     }
   },
   "viewInvoice": {
-    "message": "Xem Hóa đơn"
+    "message": "Xem hóa đơn"
   },
   "downloadInvoice": {
-    "message": "Tải Hóa đơn"
+    "message": "Tải xuống hóa đơn"
   },
   "verifyBankAccount": {
     "message": "Xác minh tài khoản ngân hàng"
@@ -3406,7 +3406,7 @@
     "message": "Payment with a bank account is only available to customers in the United States. You will be required to verify your bank account. We will make two micro-deposits within the next 1-2 business days. Enter these amounts on the organization's billing page to verify the bank account."
   },
   "verifyBankAccountFailureWarning": {
-    "message": "Nếu không xác nhận tài khoản ngân hàng, bạn có thể lỡ hạn thanh toán khiến cho thuê bao bị ngừng."
+    "message": "Nếu không xác minh tài khoản ngân hàng, bạn có thể lỡ hạn thanh toán khiến cho gói bị tạm ngừng."
   },
   "verifiedBankAccount": {
     "message": "Bank account verified"
@@ -3486,7 +3486,7 @@
     "message": "Subscription seats"
   },
   "subscriptionUpdated": {
-    "message": "Đã cập nhật thuê bao"
+    "message": "Đã cập nhật gói"
   },
   "subscribedToSecretsManager": {
     "message": "Subscription updated. You now have access to Secrets Manager."
@@ -3591,7 +3591,7 @@
     "message": "Any encrypted exports that you have saved will also become invalid."
   },
   "subscription": {
-    "message": "Thuê bao"
+    "message": "Gói"
   },
   "loading": {
     "message": "Loading"
@@ -3671,7 +3671,7 @@
     "description": "ex. Date this item was created"
   },
   "datePasswordUpdated": {
-    "message": "Mật khẩu đã cập nhật",
+    "message": "Mật khẩu đã được cập nhật",
     "description": "ex. Date this password was updated"
   },
   "organizationIsDisabled": {
@@ -3814,7 +3814,7 @@
     "message": "You cannot perform this action while using an in-app purchase payment method."
   },
   "manageSubscriptionFromStore": {
-    "message": "Bạn chỉ có thể quản lý thuê bao của mình từ cửa hàng ứng dụng mà bạn đã thanh toán."
+    "message": "Bạn chỉ có thể quản lý gói của mình từ cửa hàng ứng dụng mà bạn đã thanh toán."
   },
   "minLength": {
     "message": "Minimum length"
@@ -3918,7 +3918,7 @@
     "message": "Tìm kiếm thùng rác"
   },
   "permanentlyDelete": {
-    "message": "Xóa Vĩnh Viễn"
+    "message": "Xoá vĩnh viễn"
   },
   "permanentlyDeleteSelected": {
     "message": "Permanently delete selected"
@@ -3927,7 +3927,7 @@
     "message": "Permanently delete item"
   },
   "permanentlyDeleteItemConfirmation": {
-    "message": "Bạn có chắc chắn muốn xóa vĩnh viễn mục này không?"
+    "message": "Bạn có chắc muốn xóa vĩnh viễn mục này?"
   },
   "permanentlyDeletedItem": {
     "message": "Item permanently deleted"
@@ -4096,56 +4096,56 @@
     "message": "Văn bản"
   },
   "createSend": {
-    "message": "Tạo Send mới",
+    "message": "Gửi mới",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "editSend": {
-    "message": "Chỉnh sửa Send",
+    "message": "Sửa mục Gửi",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "createdSend": {
-    "message": "Đã tạo Send",
+    "message": "Đã lưu mục Gửi",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "editedSend": {
-    "message": "Đã chỉnh sửa Send",
+    "message": "Đã lưu mục Gửi",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "deletedSend": {
-    "message": "Đã xóa Send",
+    "message": "Đã xóa mục Gửi",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "deleteSend": {
-    "message": "Xóa Send",
+    "message": "Xóa mục Gửi",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "deleteSendConfirmation": {
-    "message": "Bạn có chắc chắn muốn xóa Send này?",
+    "message": "Bạn có chắc muốn xóa mục Gửi này?",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "whatTypeOfSend": {
-    "message": "Đây là loại Send gì?",
+    "message": "Đây là kiểu Gửi gì?",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "deletionDate": {
     "message": "Deletion date"
   },
   "deletionDateDesc": {
-    "message": "Send sẽ được xóa vĩnh viễn vào ngày và giờ được chỉ định.",
+    "message": "Mục Gửi sẽ được xóa vĩnh viễn vào ngày và giờ được chỉ định.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "expirationDate": {
     "message": "Expiration date"
   },
   "expirationDateDesc": {
-    "message": "Nếu được thiết lập, truy cập vào Send này sẽ hết hạn vào ngày và giờ được chỉ định.",
+    "message": "Nếu được thiết lập, mục Gửi này sẽ hết hạn vào ngày và giờ được chỉ định.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "maxAccessCount": {
     "message": "Maximum access count"
   },
   "maxAccessCountDesc": {
-    "message": "Nếu được thiết lập, khi đã đạt tới số lượng truy cập tối đa, người dùng sẽ không thể truy cập Send này nữa.",
+    "message": "Nếu được thiết lập, khi đã đạt tới số lượng truy cập tối đa, người dùng sẽ không thể truy cập mục Gửi này nữa.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "currentAccessCount": {
@@ -4170,7 +4170,7 @@
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "copySendLink": {
-    "message": "Sao chép liên kết Send",
+    "message": "Sao chép liên kết mục Gửi",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "removePassword": {
@@ -4190,7 +4190,7 @@
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "allSends": {
-    "message": "Toàn bộ Send"
+    "message": "Tất cả mục Gửi"
   },
   "maxAccessCountReached": {
     "message": "Max access count reached",
@@ -4203,11 +4203,11 @@
     "message": "Expired"
   },
   "searchSends": {
-    "message": "Tìm kiếm trong Send",
+    "message": "Tìm kiếm mục Gửi",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "sendProtectedPassword": {
-    "message": "Send này được bảo vệ bằng mật khẩu. Hãy nhập mật khẩu vào bên dưới để tiếp tục.",
+    "message": "Mục Gửi này được bảo vệ bằng mật khẩu. Hãy nhập mật khẩu vào bên dưới để tiếp tục.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "sendProtectedPasswordDontKnow": {
@@ -4218,8 +4218,8 @@
     "message": "This Send is hidden by default. You can toggle its visibility using the button below.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "Download file"
+  "downloadAttachments": {
+    "message": "Tải xuống tập tin đính kèm"
   },
   "sendAccessUnavailable": {
     "message": "The Send you are trying to access does not exist or is no longer available.",
@@ -4230,11 +4230,11 @@
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "noSendsInList": {
-    "message": "Không có Sends trong danh sách.",
+    "message": "Chưa có mục Gửi.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "emergencyAccess": {
-    "message": "Truy Cập Khẩn Cấp"
+    "message": "Truy cập khẩn cấp"
   },
   "emergencyAccessDesc": {
     "message": "Grant and manage emergency access for trusted contacts. Trusted contacts may request access to either View or Takeover your account in case of an emergency. Visit our help page for more information and details into how zero knowledge sharing works."
@@ -4388,7 +4388,7 @@
     "message": "Due to an Enterprise policy, you are restricted from saving items to your individual vault. Change the ownership option to an organization and choose from available collections."
   },
   "disableSend": {
-    "message": "Tắt Send"
+    "message": "Xóa Gửi"
   },
   "disableSendPolicyDesc": {
     "message": "Do not allow members to create or edit Sends.",
@@ -4398,11 +4398,11 @@
     "message": "Organization members that can manage the organization's policies are exempt from this policy's enforcement."
   },
   "sendDisabled": {
-    "message": "Đã tắt Send",
+    "message": "Đã loại bỏ Gửi",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "sendDisabledWarning": {
-    "message": "Do chính sách doanh nghiệp, bạn chỉ có thể xóa những Send hiện có.",
+    "message": "Do chính sách doanh nghiệp, bạn chỉ có thể xóa những mục Gửi hiện có.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "sendOptions": {
@@ -4457,7 +4457,7 @@
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Custom roles is an enterprise feature. Contact our support team to upgrade your subscription'"
   },
   "customDescNonEnterpriseEnd": {
-    "message": ". Hãy liên lạc với đội ngũ hỗ trợ của chúng tôi để nâng cấp thuê bao của bạn",
+    "message": ". Hãy liên lạc với đội ngũ hỗ trợ của chúng tôi để nâng cấp gói của bạn",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Custom roles is an enterprise feature. Contact our support team to upgrade your subscription'"
   },
   "customNonEnterpriseError": {
@@ -4518,7 +4518,7 @@
     "message": "Manage SSO"
   },
   "manageUsers": {
-    "message": "Quản Lý Người Dùng"
+    "message": "Quản lý người dùng"
   },
   "manageAccountRecovery": {
     "message": "Manage account recovery"
@@ -4546,7 +4546,7 @@
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "sendNameDesc": {
-    "message": "Một tên gợi nhớ để mô tả về Send này.",
+    "message": "Một tên gợi nhớ để mô tả mục Gửi này.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "sendTextDesc": {
@@ -4563,7 +4563,7 @@
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "send": {
-    "message": "Chia sẻ",
+    "message": "Gửi",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "sendAccessTaglineProductDesc": {
@@ -4609,8 +4609,8 @@
     "message": "thử ngay hôm nay.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden user $USER_IDENTIFIER$ shared the following with you",
+  "sendAccessCreatorIdentifier": {
+    "message": "Thành viên Bitwarden $USER_IDENTIFIER$ đã chia sẻ với bạn",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -5297,7 +5297,7 @@
     "message": "Remove sponsorship"
   },
   "removeSponsorshipConfirmation": {
-    "message": "Nếu xóa người tài trợ, bạn sẽ chịu trách nhiệm cho chi phí của thuê bao này và cước phát sinh về sau. Bạn có chắc muốn tiếp tục không?"
+    "message": "Nếu xóa người tài trợ, bạn sẽ chịu trách nhiệm cho chi phí của gói này và cước phát sinh về sau. Bạn có chắc muốn tiếp tục?"
   },
   "sponsorshipCreated": {
     "message": "Sponsorship created"
@@ -5610,7 +5610,7 @@
     "message": "Keys"
   },
   "billingHistory": {
-    "message": "Lịch sử Thanh toán"
+    "message": "Lịch sử thanh toán"
   },
   "backToReports": {
     "message": "Back to reports"
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "Yêu cầu đăng nhập bằng SSO"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "Đã xảy ra lỗi khi tải mục Gửi này. Hãy thử lại sau."
   }
 }
diff --git a/apps/web/src/locales/zh_CN/messages.json b/apps/web/src/locales/zh_CN/messages.json
index ee59470c474..2d40fe30386 100644
--- a/apps/web/src/locales/zh_CN/messages.json
+++ b/apps/web/src/locales/zh_CN/messages.json
@@ -494,7 +494,7 @@
     "message": "附件已删除"
   },
   "deleteAttachmentConfirmation": {
-    "message": "您确定要删除此附件吗？"
+    "message": "确定要删除此附件吗？"
   },
   "attachmentSaved": {
     "message": "附件已保存"
@@ -558,7 +558,7 @@
     "message": "项目已移动"
   },
   "overwritePasswordConfirmation": {
-    "message": "您确定要覆盖当前密码吗？"
+    "message": "确定要覆盖当前密码吗？"
   },
   "editedFolder": {
     "message": "文件夹已保存"
@@ -567,7 +567,7 @@
     "message": "文件夹已添加"
   },
   "deleteFolderConfirmation": {
-    "message": "您确定要删除此文件夹吗？"
+    "message": "确定要删除此文件夹吗？"
   },
   "deletedFolder": {
     "message": "文件夹已删除"
@@ -585,7 +585,7 @@
     "message": "您的登录会话已过期。"
   },
   "logOutConfirmation": {
-    "message": "您确定要注销吗？"
+    "message": "确定要注销吗？"
   },
   "logOut": {
     "message": "注销"
@@ -998,7 +998,7 @@
     }
   },
   "deleteSelectedConfirmation": {
-    "message": "您确定要继续吗？"
+    "message": "确定要继续吗？"
   },
   "moveSelectedItemsDesc": {
     "message": "选择要将这 $COUNT$ 个项目移动到的文件夹。",
@@ -1384,7 +1384,7 @@
     "message": "选择一个集合"
   },
   "importTargetHint": {
-    "message": "如果您希望将导入的文件内容移动到 $DESTINATION$，请选择此选项",
+    "message": "如果您希望将导入的文件内容移动到某个 $DESTINATION$，请选择此选项",
     "description": "Located as a hint under the import target. Will be appended by either folder or collection, depending if the user is importing into an individual or an organizational vault.",
     "placeholders": {
       "destination": {
@@ -1609,7 +1609,7 @@
     "message": "如果您要把它添加到其他设备，下面是您的验证器 App 所需要的二维码（或密钥）。"
   },
   "twoStepDisableDesc": {
-    "message": "您确定要停用此两步登录提供程序吗？"
+    "message": "确定要停用此两步登录提供程序吗？"
   },
   "twoStepDisabled": {
     "message": "此两步登录提供程序已停用。"
@@ -1708,7 +1708,7 @@
     "message": "添加一个 FIDO U2F 安全钥匙到您的帐户"
   },
   "removeU2fConfirmation": {
-    "message": "您确认要删除这个安全钥匙吗？"
+    "message": "确认要删除此安全钥匙吗？"
   },
   "twoFactorWebAuthnAdd": {
     "message": "添加一个 WebAuthn 安全钥匙到您的账户"
@@ -2164,13 +2164,13 @@
     "message": "恢复订阅"
   },
   "reinstateConfirmation": {
-    "message": "您确定要撤销请求并恢复订阅吗？"
+    "message": "确定要移除待处理的取消请求并恢复订阅吗？"
   },
   "reinstated": {
     "message": "您的订阅已恢复。"
   },
   "cancelConfirmation": {
-    "message": "您确定要取消吗？在本次计费周期结束后，您将无法使用此订阅的所有功能。"
+    "message": "确定要取消吗？在本次计费周期结束后，您将无法使用此订阅的所有功能。"
   },
   "canceledSubscription": {
     "message": "订阅已取消"
@@ -2550,7 +2550,7 @@
     "message": "退出"
   },
   "leaveOrganizationConfirmation": {
-    "message": "您确定要退出这个组织吗？"
+    "message": "确定要退出该组织吗？"
   },
   "leftOrganization": {
     "message": "您已经退出该组织。"
@@ -2595,10 +2595,10 @@
     "message": "编辑群组"
   },
   "deleteGroupConfirmation": {
-    "message": "您确定要删除此群组吗？"
+    "message": "确定要删除此群组吗？"
   },
   "deleteMultipleGroupsConfirmation": {
-    "message": "您确定要删除如下 $QUANTITY$ 个群组吗？",
+    "message": "确定要删除如下 $QUANTITY$ 个群组吗？",
     "placeholders": {
       "quantity": {
         "content": "$1",
@@ -2607,7 +2607,7 @@
     }
   },
   "removeUserConfirmation": {
-    "message": "您确实要移除此用户吗？"
+    "message": "确实要移除此用户吗？"
   },
   "removeOrgUserConfirmation": {
     "message": "移除成员后，他们将不再具有对组织数据的访问权限，并且此操作是不可逆的。要将此成员添加回组织，必须再次邀请他们并加入。"
@@ -3727,7 +3727,7 @@
     "message": "脆弱的主密码"
   },
   "weakMasterPasswordDesc": {
-    "message": "识别到弱密码。请使用一个强密码以保护你的账户。你确定你要使用弱密码吗？"
+    "message": "识别到弱密码。请使用一个强密码以保护你的账户。确定要使用弱密码吗？"
   },
   "rotateAccountEncKey": {
     "message": "同时轮换账户的加密密钥"
@@ -3736,7 +3736,7 @@
     "message": "轮换加密密钥"
   },
   "rotateEncKeyConfirmation": {
-    "message": "您确定要轮换账户的加密密钥吗？"
+    "message": "确定要轮换账户的加密密钥吗？"
   },
   "attachmentsNeedFix": {
     "message": "此项目有需要修复的旧文件附件。"
@@ -3927,7 +3927,7 @@
     "message": "永久删除项目"
   },
   "permanentlyDeleteItemConfirmation": {
-    "message": "您确定要永久删除此项目吗？"
+    "message": "确定要永久删除此项目吗？"
   },
   "permanentlyDeletedItem": {
     "message": "项目已永久删除"
@@ -4054,7 +4054,7 @@
     "message": "取消链接 SSO"
   },
   "unlinkSsoConfirmation": {
-    "message": "您确定要断开该组织的 SSO 链接吗？"
+    "message": "确定要取消该组织的 SSO 链接吗？"
   },
   "linkSso": {
     "message": "链接 SSO"
@@ -4218,8 +4218,8 @@
     "message": "此 Send 默认隐藏。您可使用下方的按钮切换其可见性。",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "下载文件"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "您尝试访问的 Send 不存在或不再可用。",
@@ -4324,7 +4324,7 @@
     "message": "请求访问权限"
   },
   "requestAccessConfirmation": {
-    "message": "您确定要申请紧急访问吗？这将在 $WAITTIME$ 天后或当用户手动批准请求时获得访问权限。",
+    "message": "确定要申请紧急访问吗？这将在 $WAITTIME$ 天后或当用户手动批准请求时获得访问权限。",
     "placeholders": {
       "waittime": {
         "content": "$1",
@@ -4348,7 +4348,7 @@
     "message": "拒绝"
   },
   "approveAccessConfirmation": {
-    "message": "您确定要批准紧急访问吗？这将允许 $USER$  $ACTION$ 您的账户。",
+    "message": "确定要批准紧急访问吗？这将允许 $USER$ $ACTION$ 您的账户。",
     "placeholders": {
       "user": {
         "content": "$1",
@@ -4609,8 +4609,8 @@
     "message": "来马上尝试。",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden 用户 $USER_IDENTIFIER$ 与您分享了以下内容",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -4788,7 +4788,7 @@
     "message": "此操作不适用于所选用户。"
   },
   "removeUsersWarning": {
-    "message": "您确定要移除以下用户吗？该过程可能需要几秒钟才能完成，并且不能中断或取消。"
+    "message": "确定要移除以下用户吗？该过程可能需要几秒钟才能完成，并且不能中断或取消。"
   },
   "removeOrgUsersConfirmation": {
     "message": "移除成员后，他们将不再具有对组织数据的访问权限，并且此操作是不可逆的。要将成员添加回组织，必须再次邀请他们并加入。该过程可能需要几秒钟才能完成，并且不能被中断或取消。"
@@ -4921,7 +4921,7 @@
     "message": "我的提供商"
   },
   "addOrganizationConfirmation": {
-    "message": "您确定要将 $ORGANIZATION$ 添加为 $PROVIDER$ 的客户吗？",
+    "message": "确定要将 $ORGANIZATION$ 添加为 $PROVIDER$ 的客户吗？",
     "placeholders": {
       "organization": {
         "content": "$1",
@@ -4970,7 +4970,7 @@
     }
   },
   "detachOrganizationConfirmation": {
-    "message": "您确定要分离这个组织吗？该组织将继续存在，但不再由此提供商管理。"
+    "message": "确定要分离这个组织吗？该组织将继续存在，但不再由此提供商管理。"
   },
   "add": {
     "message": "添加"
@@ -5297,7 +5297,7 @@
     "message": "移除赞助"
   },
   "removeSponsorshipConfirmation": {
-    "message": "移除赞助后，将由您自己负责此订阅及其相关的账单。您确定要继续吗？"
+    "message": "移除赞助后，将由您自己负责此订阅及其相关的账单。确定要继续吗？"
   },
   "sponsorshipCreated": {
     "message": "赞助已创建"
@@ -5306,7 +5306,7 @@
     "message": "电子邮件已发送"
   },
   "revokeSponsorshipConfirmation": {
-    "message": "移除该账户后，家庭计划赞助将在计费周期结束时到期。在现有的赞助到期之前您将无法兑换新的赞助邀请。您确定要继续吗？"
+    "message": "移除该账户后，家庭计划赞助将在计费周期结束时到期。在现有的赞助到期之前您将无法兑换新的赞助邀请。确定要继续吗？"
   },
   "removeSponsorshipSuccess": {
     "message": "赞助已移除"
@@ -5754,7 +5754,7 @@
     "message": "已更新设备验证"
   },
   "areYouSureYouWantToEnableDeviceVerificationTheVerificationCodeEmailsWillArriveAtX": {
-    "message": "您确定要开启设备验证吗？验证码邮件将发送到 $EMAIL$",
+    "message": "确定要开启设备验证吗？验证码邮件将发送到 $EMAIL$",
     "placeholders": {
       "email": {
         "content": "$1",
@@ -6189,10 +6189,10 @@
     "description": "Notifies that the selected secrets have been moved to the trash"
   },
   "hardDeleteSecretConfirmation": {
-    "message": "您确定要永久删除此机密吗？"
+    "message": "确定要永久删除此机密吗？"
   },
   "hardDeleteSecretsConfirmation": {
-    "message": "您确定要永久删除这些机密吗？"
+    "message": "确定要永久删除这些机密吗？"
   },
   "hardDeletesSuccessToast": {
     "message": "机密已永久删除"
@@ -6500,7 +6500,7 @@
     "message": "移除域名"
   },
   "removeDomainWarning": {
-    "message": "移除域名不能撤消。您确定要继续吗？"
+    "message": "移除域名不能撤消。确定要继续吗？"
   },
   "domainRemoved": {
     "message": "域名已移除"
@@ -6891,10 +6891,10 @@
     "message": "恢复机密"
   },
   "restoreSecretPrompt": {
-    "message": "您确定要恢复此机密吗？"
+    "message": "确定要恢复此机密吗？"
   },
   "restoreSecretsPrompt": {
-    "message": "您确定要恢复这些密机密吗？"
+    "message": "确定要恢复这些密机密吗？"
   },
   "secretRestoredSuccessToast": {
     "message": "机密已恢复"
@@ -6970,7 +6970,7 @@
     "description": "Notification to inform the user that a form's input can't contain only whitespace."
   },
   "dismiss": {
-    "message": "取消"
+    "message": "忽略"
   },
   "notAvailableForFreeOrganization": {
     "message": "免费组织不能使用此功能。请联系您的组织所有者寻求升级。"
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "下一步"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "选择的区域旗帜"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "工程访问权限已更新"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/apps/web/src/locales/zh_TW/messages.json b/apps/web/src/locales/zh_TW/messages.json
index fb9ddb850c2..0b56f49e779 100644
--- a/apps/web/src/locales/zh_TW/messages.json
+++ b/apps/web/src/locales/zh_TW/messages.json
@@ -4218,8 +4218,8 @@
     "message": "此 Send 預設為隱藏。您可使用下方的按鈕切換其可見度。",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "downloadFile": {
-    "message": "下載檔案"
+  "downloadAttachments": {
+    "message": "Download attachments"
   },
   "sendAccessUnavailable": {
     "message": "您嘗試存取的 Send 不存在或無法再使用。",
@@ -4609,8 +4609,8 @@
     "message": "現在就試試。",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   },
-  "sendCreatorIdentifier": {
-    "message": "Bitwarden 使用者 $USER_IDENTIFIER$ 與您共用了以下內容",
+  "sendAccessCreatorIdentifier": {
+    "message": "Bitwarden member $USER_IDENTIFIER$ shared the following with you",
     "placeholders": {
       "user_identifier": {
         "content": "$1",
@@ -7182,6 +7182,9 @@
   "next": {
     "message": "下一步"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "選定的區域標記"
   },
@@ -7392,5 +7395,8 @@
   },
   "projectAccessUpdated": {
     "message": "Project access updated"
+  },
+  "unexpectedErrorSend": {
+    "message": "An unexpected error has occurred while loading this Send. Try again later."
   }
 }
diff --git a/libs/angular/src/auth/components/environment-selector.component.html b/libs/angular/src/auth/components/environment-selector.component.html
index 2765787c317..8ee8a4d5784 100644
--- a/libs/angular/src/auth/components/environment-selector.component.html
+++ b/libs/angular/src/auth/components/environment-selector.component.html
@@ -63,7 +63,6 @@
         class="environment-selector-dialog-item"
         (click)="toggle(ServerEnvironmentType.EU)"
         [attr.aria-pressed]="selectedEnvironment === ServerEnvironmentType.EU ? 'true' : 'false'"
-        *ngIf="euServerFlagEnabled"
       >
         <i
           class="bwi bwi-fw bwi-sm bwi-check"
@@ -75,7 +74,7 @@
         ></i>
         <span>{{ "euDomain" | i18n }}</span>
       </button>
-      <br *ngIf="euServerFlagEnabled" />
+      <br />
       <button
         type="button"
         class="environment-selector-dialog-item"
diff --git a/libs/angular/src/auth/components/environment-selector.component.ts b/libs/angular/src/auth/components/environment-selector.component.ts
index 19dc95dbcf6..36ef35a0b9b 100644
--- a/libs/angular/src/auth/components/environment-selector.component.ts
+++ b/libs/angular/src/auth/components/environment-selector.component.ts
@@ -4,7 +4,6 @@ import { Component, EventEmitter, OnDestroy, OnInit, Output } from "@angular/cor
 import { Router } from "@angular/router";
 import { Subject, takeUntil } from "rxjs";
 
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import {
   EnvironmentService as EnvironmentServiceAbstraction,
@@ -37,7 +36,6 @@ import {
 })
 export class EnvironmentSelectorComponent implements OnInit, OnDestroy {
   @Output() onOpenSelfHostedSettings = new EventEmitter();
-  euServerFlagEnabled: boolean;
   isOpen = false;
   showingModal = false;
   selectedEnvironment: Region;
@@ -89,9 +87,6 @@ export class EnvironmentSelectorComponent implements OnInit, OnDestroy {
 
   async updateEnvironmentInfo() {
     this.selectedEnvironment = this.environmentService.selectedRegion;
-    this.euServerFlagEnabled = await this.configService.getFeatureFlag<boolean>(
-      FeatureFlag.DisplayEuEnvironmentFlag
-    );
   }
 
   close() {
diff --git a/libs/angular/src/vault/components/icon.component.ts b/libs/angular/src/vault/components/icon.component.ts
index 84a72ca0c3c..44ce2d8872f 100644
--- a/libs/angular/src/vault/components/icon.component.ts
+++ b/libs/angular/src/vault/components/icon.component.ts
@@ -10,26 +10,9 @@ import {
 
 import { SettingsService } from "@bitwarden/common/abstractions/settings.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
-import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
+import { buildCipherIcon } from "@bitwarden/common/vault/icon/build-cipher-icon";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 
-/**
- * Provides a mapping from supported card brands to
- * the filenames of icon that should be present in images/cards folder of clients.
- */
-const cardIcons: Record<string, string> = {
-  Visa: "card-visa",
-  Mastercard: "card-mastercard",
-  Amex: "card-amex",
-  Discover: "card-discover",
-  "Diners Club": "card-diners-club",
-  JCB: "card-jcb",
-  Maestro: "card-maestro",
-  UnionPay: "card-union-pay",
-  RuPay: "card-ru-pay",
-};
-
 @Component({
   selector: "app-vault-icon",
   templateUrl: "icon.component.html",
@@ -61,73 +44,6 @@ export class IconComponent implements OnInit {
     this.data$ = combineLatest([
       this.settingsService.disableFavicon$.pipe(distinctUntilChanged()),
       this.cipher$.pipe(filter((c) => c !== undefined)),
-    ]).pipe(
-      map(([disableFavicon, cipher]) => {
-        const imageEnabled = !disableFavicon;
-        let image = undefined;
-        let fallbackImage = "";
-        let icon = undefined;
-
-        switch (cipher.type) {
-          case CipherType.Login:
-            icon = "bwi-globe";
-
-            if (cipher.login.uri) {
-              let hostnameUri = cipher.login.uri;
-              let isWebsite = false;
-
-              if (hostnameUri.indexOf("androidapp://") === 0) {
-                icon = "bwi-android";
-                image = null;
-              } else if (hostnameUri.indexOf("iosapp://") === 0) {
-                icon = "bwi-apple";
-                image = null;
-              } else if (
-                imageEnabled &&
-                hostnameUri.indexOf("://") === -1 &&
-                hostnameUri.indexOf(".") > -1
-              ) {
-                hostnameUri = "http://" + hostnameUri;
-                isWebsite = true;
-              } else if (imageEnabled) {
-                isWebsite = hostnameUri.indexOf("http") === 0 && hostnameUri.indexOf(".") > -1;
-              }
-
-              if (imageEnabled && isWebsite) {
-                try {
-                  image = iconsUrl + "/" + Utils.getHostname(hostnameUri) + "/icon.png";
-                  fallbackImage = "images/bwi-globe.png";
-                } catch (e) {
-                  // Ignore error since the fallback icon will be shown if image is null.
-                }
-              }
-            } else {
-              image = null;
-            }
-            break;
-          case CipherType.SecureNote:
-            icon = "bwi-sticky-note";
-            break;
-          case CipherType.Card:
-            icon = "bwi-credit-card";
-            if (imageEnabled && cipher.card.brand in cardIcons) {
-              icon = "credit-card-icon " + cardIcons[cipher.card.brand];
-            }
-            break;
-          case CipherType.Identity:
-            icon = "bwi-id-card";
-            break;
-          default:
-            break;
-        }
-
-        return {
-          imageEnabled,
-          image,
-          fallbackImage,
-          icon,
-        };
-      })
-    );
+    ]).pipe(map(([disableFavicon, cipher]) => buildCipherIcon(iconsUrl, cipher, disableFavicon)));
   }
 }
diff --git a/libs/angular/test-utils.ts b/libs/angular/test-utils.ts
deleted file mode 100644
index a2422e698fd..00000000000
--- a/libs/angular/test-utils.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export async function awaitAsync(ms = 0) {
-  await new Promise((resolve) => setTimeout(resolve, ms));
-}
diff --git a/libs/common/spec/fake-storage.service.ts b/libs/common/spec/fake-storage.service.ts
index 281df01533f..ba3e4613466 100644
--- a/libs/common/spec/fake-storage.service.ts
+++ b/libs/common/spec/fake-storage.service.ts
@@ -10,6 +10,7 @@ import { StorageOptions } from "../src/platform/models/domain/storage-options";
 export class FakeStorageService implements AbstractStorageService {
   private store: Record<string, unknown>;
   private updatesSubject = new Subject<StorageUpdate>();
+  private _valuesRequireDeserialization = false;
 
   /**
    * Returns a mock of a {@see AbstractStorageService} for asserting the expected
@@ -32,6 +33,18 @@ export class FakeStorageService implements AbstractStorageService {
     this.store = store;
   }
 
+  get internalStore() {
+    return this.store;
+  }
+
+  internalUpdateValuesRequireDeserialization(value: boolean) {
+    this._valuesRequireDeserialization = value;
+  }
+
+  get valuesRequireDeserialization(): boolean {
+    return this._valuesRequireDeserialization;
+  }
+
   get updates$() {
     return this.updatesSubject.asObservable();
   }
@@ -48,13 +61,13 @@ export class FakeStorageService implements AbstractStorageService {
   save<T>(key: string, obj: T, options?: StorageOptions): Promise<void> {
     this.mock.save(key, options);
     this.store[key] = obj;
-    this.updatesSubject.next({ key: key, value: obj, updateType: "save" });
+    this.updatesSubject.next({ key: key, updateType: "save" });
     return Promise.resolve();
   }
   remove(key: string, options?: StorageOptions): Promise<void> {
     this.mock.remove(key, options);
     delete this.store[key];
-    this.updatesSubject.next({ key: key, value: undefined, updateType: "remove" });
+    this.updatesSubject.next({ key: key, updateType: "remove" });
     return Promise.resolve();
   }
 }
diff --git a/libs/common/spec/utils.ts b/libs/common/spec/utils.ts
index 91d2033da8a..7db5711adfa 100644
--- a/libs/common/spec/utils.ts
+++ b/libs/common/spec/utils.ts
@@ -84,3 +84,11 @@ function clone(value: any): any {
     return JSON.parse(JSON.stringify(value));
   }
 }
+
+export async function awaitAsync(ms = 0) {
+  if (ms < 1) {
+    await Promise.resolve();
+  } else {
+    await new Promise((resolve) => setTimeout(resolve, ms));
+  }
+}
diff --git a/libs/common/src/abstractions/settings.service.ts b/libs/common/src/abstractions/settings.service.ts
index 78ed7183c88..b5c7f09a4f3 100644
--- a/libs/common/src/abstractions/settings.service.ts
+++ b/libs/common/src/abstractions/settings.service.ts
@@ -10,5 +10,7 @@ export abstract class SettingsService {
   getEquivalentDomains: (url: string) => Set<string>;
   setDisableFavicon: (value: boolean) => Promise<any>;
   getDisableFavicon: () => boolean;
+  setAutoFillOverlayVisibility: (value: number) => Promise<void>;
+  getAutoFillOverlayVisibility: () => Promise<number>;
   clear: (userId?: string) => Promise<void>;
 }
diff --git a/libs/common/src/admin-console/models/domain/organization.ts b/libs/common/src/admin-console/models/domain/organization.ts
index 068ce6d45aa..c7d8ee49243 100644
--- a/libs/common/src/admin-console/models/domain/organization.ts
+++ b/libs/common/src/admin-console/models/domain/organization.ts
@@ -258,6 +258,10 @@ export class Organization {
     return this.providerId != null || this.providerName != null;
   }
 
+  get hasReseller() {
+    return this.hasProvider && this.providerType === ProviderType.Reseller;
+  }
+
   get canAccessSecretsManager() {
     return this.useSecretsManager && this.accessSecretsManager;
   }
diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index 1482317b02d..d51b4561fd7 100644
--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -1,10 +1,10 @@
 export enum FeatureFlag {
-  DisplayEuEnvironmentFlag = "display-eu-environment",
   DisplayLowKdfIterationWarningFlag = "display-kdf-iteration-warning",
   Fido2VaultCredentials = "fido2-vault-credentials",
   TrustedDeviceEncryption = "trusted-device-encryption",
   PasswordlessLogin = "passwordless-login",
   AutofillV2 = "autofill-v2",
+  AutofillOverlay = "autofill-overlay",
   BrowserFilelessImport = "browser-fileless-import",
   ItemShare = "item-share",
   FlexibleCollections = "flexible-collections",
diff --git a/libs/common/src/platform/abstractions/state.service.ts b/libs/common/src/platform/abstractions/state.service.ts
index a40f6b36b18..5a0236989ed 100644
--- a/libs/common/src/platform/abstractions/state.service.ts
+++ b/libs/common/src/platform/abstractions/state.service.ts
@@ -285,6 +285,8 @@ export abstract class StateService<T extends Account = Account> {
   setEmailVerified: (value: boolean, options?: StorageOptions) => Promise<void>;
   getEnableAlwaysOnTop: (options?: StorageOptions) => Promise<boolean>;
   setEnableAlwaysOnTop: (value: boolean, options?: StorageOptions) => Promise<void>;
+  getAutoFillOverlayVisibility: (options?: StorageOptions) => Promise<number>;
+  setAutoFillOverlayVisibility: (value: number, options?: StorageOptions) => Promise<void>;
   getEnableAutoFillOnPageLoad: (options?: StorageOptions) => Promise<boolean>;
   setEnableAutoFillOnPageLoad: (value: boolean, options?: StorageOptions) => Promise<void>;
   getEnableBrowserIntegration: (options?: StorageOptions) => Promise<boolean>;
@@ -420,8 +422,8 @@ export abstract class StateService<T extends Account = Account> {
   setMainWindowSize: (value: number, options?: StorageOptions) => Promise<void>;
   getMinimizeOnCopyToClipboard: (options?: StorageOptions) => Promise<boolean>;
   setMinimizeOnCopyToClipboard: (value: boolean, options?: StorageOptions) => Promise<void>;
-  getNeverDomains: (options?: StorageOptions) => Promise<{ [id: string]: any }>;
-  setNeverDomains: (value: { [id: string]: any }, options?: StorageOptions) => Promise<void>;
+  getNeverDomains: (options?: StorageOptions) => Promise<{ [id: string]: unknown }>;
+  setNeverDomains: (value: { [id: string]: unknown }, options?: StorageOptions) => Promise<void>;
   getNoAutoPromptBiometricsText: (options?: StorageOptions) => Promise<string>;
   setNoAutoPromptBiometricsText: (value: string, options?: StorageOptions) => Promise<void>;
   getOpenAtLogin: (options?: StorageOptions) => Promise<boolean>;
diff --git a/libs/common/src/platform/abstractions/storage.service.ts b/libs/common/src/platform/abstractions/storage.service.ts
index 8beac2c1c1e..c0e3478f547 100644
--- a/libs/common/src/platform/abstractions/storage.service.ts
+++ b/libs/common/src/platform/abstractions/storage.service.ts
@@ -5,11 +5,11 @@ import { MemoryStorageOptions, StorageOptions } from "../models/domain/storage-o
 export type StorageUpdateType = "save" | "remove";
 export type StorageUpdate = {
   key: string;
-  value?: unknown;
   updateType: StorageUpdateType;
 };
 
 export abstract class AbstractStorageService {
+  abstract get valuesRequireDeserialization(): boolean;
   /**
    * Provides an {@link Observable} that represents a stream of updates that
    * have happened in this storage service or in the storage this service provides
diff --git a/libs/common/src/platform/models/domain/account.ts b/libs/common/src/platform/models/domain/account.ts
index 3319e4a8f85..359e765f792 100644
--- a/libs/common/src/platform/models/domain/account.ts
+++ b/libs/common/src/platform/models/domain/account.ts
@@ -222,12 +222,9 @@ export class AccountSettings {
   clearClipboard?: number;
   collapsedGroupings?: string[];
   defaultUriMatch?: UriMatchType;
-  disableAddLoginNotification?: boolean;
   disableAutoBiometricsPrompt?: boolean;
   disableAutoTotpCopy?: boolean;
   disableBadgeCounter?: boolean;
-  disableChangedPasswordNotification?: boolean;
-  disableContextMenuItem?: boolean;
   disableGa?: boolean;
   dismissedAutoFillOnPageLoadCallout?: boolean;
   dontShowCardsCurrentTab?: boolean;
@@ -239,7 +236,6 @@ export class AccountSettings {
   environmentUrls: EnvironmentUrls = new EnvironmentUrls();
   equivalentDomains?: any;
   minimizeOnCopyToClipboard?: boolean;
-  neverDomains?: { [id: string]: any };
   passwordGenerationOptions?: PasswordGeneratorOptions;
   usernameGenerationOptions?: UsernameGeneratorOptions;
   generatorOptions?: GeneratorOptions;
diff --git a/libs/common/src/platform/models/domain/global-state.ts b/libs/common/src/platform/models/domain/global-state.ts
index 30ad32124cf..7515aa8a8db 100644
--- a/libs/common/src/platform/models/domain/global-state.ts
+++ b/libs/common/src/platform/models/domain/global-state.ts
@@ -36,4 +36,9 @@ export class GlobalState {
   enableBrowserIntegrationFingerprint?: boolean;
   enableDuckDuckGoBrowserIntegration?: boolean;
   region?: string;
+  neverDomains?: { [id: string]: unknown };
+  disableAddLoginNotification?: boolean;
+  disableChangedPasswordNotification?: boolean;
+  disableContextMenuItem?: boolean;
+  autoFillOverlayVisibility?: number;
 }
diff --git a/libs/common/src/platform/services/memory-storage.service.ts b/libs/common/src/platform/services/memory-storage.service.ts
index abfc0b1597b..f3ad25d3a0b 100644
--- a/libs/common/src/platform/services/memory-storage.service.ts
+++ b/libs/common/src/platform/services/memory-storage.service.ts
@@ -6,6 +6,9 @@ export class MemoryStorageService extends AbstractMemoryStorageService {
   private store = new Map<string, unknown>();
   private updatesSubject = new Subject<StorageUpdate>();
 
+  get valuesRequireDeserialization(): boolean {
+    return false;
+  }
   get updates$() {
     return this.updatesSubject.asObservable();
   }
@@ -27,13 +30,13 @@ export class MemoryStorageService extends AbstractMemoryStorageService {
       return this.remove(key);
     }
     this.store.set(key, obj);
-    this.updatesSubject.next({ key, value: obj, updateType: "save" });
+    this.updatesSubject.next({ key, updateType: "save" });
     return Promise.resolve();
   }
 
   remove(key: string): Promise<void> {
     this.store.delete(key);
-    this.updatesSubject.next({ key, value: null, updateType: "remove" });
+    this.updatesSubject.next({ key, updateType: "remove" });
     return Promise.resolve();
   }
 
diff --git a/libs/common/src/platform/services/state.service.ts b/libs/common/src/platform/services/state.service.ts
index d9dcb93a366..0ff655e34cb 100644
--- a/libs/common/src/platform/services/state.service.ts
+++ b/libs/common/src/platform/services/state.service.ts
@@ -1,6 +1,7 @@
 import { BehaviorSubject, concatMap } from "rxjs";
 import { Jsonify, JsonValue } from "type-fest";
 
+import { AutofillOverlayVisibility } from "../../../../../apps/browser/src/autofill/utils/autofill-overlay.enum";
 import { EncryptedOrganizationKeyData } from "../../admin-console/models/data/encrypted-organization-key.data";
 import { OrganizationData } from "../../admin-console/models/data/organization.data";
 import { PolicyData } from "../../admin-console/models/data/policy.data";
@@ -1121,18 +1122,18 @@ export class StateService<
 
   async getDisableAddLoginNotification(options?: StorageOptions): Promise<boolean> {
     return (
-      (await this.getAccount(this.reconcileOptions(options, await this.defaultOnDiskOptions())))
-        ?.settings?.disableAddLoginNotification ?? false
+      (await this.getGlobals(this.reconcileOptions(options, await this.defaultOnDiskOptions())))
+        ?.disableAddLoginNotification ?? false
     );
   }
 
   async setDisableAddLoginNotification(value: boolean, options?: StorageOptions): Promise<void> {
-    const account = await this.getAccount(
+    const globals = await this.getGlobals(
       this.reconcileOptions(options, await this.defaultOnDiskOptions())
     );
-    account.settings.disableAddLoginNotification = value;
-    await this.saveAccount(
-      account,
+    globals.disableAddLoginNotification = value;
+    await this.saveGlobals(
+      globals,
       this.reconcileOptions(options, await this.defaultOnDiskOptions())
     );
   }
@@ -1193,8 +1194,8 @@ export class StateService<
 
   async getDisableChangedPasswordNotification(options?: StorageOptions): Promise<boolean> {
     return (
-      (await this.getAccount(this.reconcileOptions(options, await this.defaultOnDiskOptions())))
-        ?.settings?.disableChangedPasswordNotification ?? false
+      (await this.getGlobals(this.reconcileOptions(options, await this.defaultOnDiskOptions())))
+        ?.disableChangedPasswordNotification ?? false
     );
   }
 
@@ -1202,30 +1203,30 @@ export class StateService<
     value: boolean,
     options?: StorageOptions
   ): Promise<void> {
-    const account = await this.getAccount(
+    const globals = await this.getGlobals(
       this.reconcileOptions(options, await this.defaultOnDiskOptions())
     );
-    account.settings.disableChangedPasswordNotification = value;
-    await this.saveAccount(
-      account,
+    globals.disableChangedPasswordNotification = value;
+    await this.saveGlobals(
+      globals,
       this.reconcileOptions(options, await this.defaultOnDiskOptions())
     );
   }
 
   async getDisableContextMenuItem(options?: StorageOptions): Promise<boolean> {
     return (
-      (await this.getAccount(this.reconcileOptions(options, await this.defaultOnDiskOptions())))
-        ?.settings?.disableContextMenuItem ?? false
+      (await this.getGlobals(this.reconcileOptions(options, await this.defaultOnDiskOptions())))
+        ?.disableContextMenuItem ?? false
     );
   }
 
   async setDisableContextMenuItem(value: boolean, options?: StorageOptions): Promise<void> {
-    const account = await this.getAccount(
+    const globals = await this.getGlobals(
       this.reconcileOptions(options, await this.defaultOnDiskOptions())
     );
-    account.settings.disableContextMenuItem = value;
-    await this.saveAccount(
-      account,
+    globals.disableContextMenuItem = value;
+    await this.saveGlobals(
+      globals,
       this.reconcileOptions(options, await this.defaultOnDiskOptions())
     );
   }
@@ -1526,6 +1527,27 @@ export class StateService<
     );
   }
 
+  async getAutoFillOverlayVisibility(options?: StorageOptions): Promise<number> {
+    return (
+      (
+        await this.getGlobals(
+          this.reconcileOptions(options, await this.defaultOnDiskLocalOptions())
+        )
+      )?.autoFillOverlayVisibility ?? AutofillOverlayVisibility.OnFieldFocus
+    );
+  }
+
+  async setAutoFillOverlayVisibility(value: number, options?: StorageOptions): Promise<void> {
+    const globals = await this.getGlobals(
+      this.reconcileOptions(options, await this.defaultOnDiskLocalOptions())
+    );
+    globals.autoFillOverlayVisibility = value;
+    await this.saveGlobals(
+      globals,
+      this.reconcileOptions(options, await this.defaultOnDiskLocalOptions())
+    );
+  }
+
   async getEnableAutoFillOnPageLoad(options?: StorageOptions): Promise<boolean> {
     return (
       (await this.getAccount(this.reconcileOptions(options, await this.defaultOnDiskOptions())))
@@ -2295,19 +2317,19 @@ export class StateService<
     );
   }
 
-  async getNeverDomains(options?: StorageOptions): Promise<{ [id: string]: any }> {
+  async getNeverDomains(options?: StorageOptions): Promise<{ [id: string]: unknown }> {
     return (
-      await this.getAccount(this.reconcileOptions(options, await this.defaultOnDiskOptions()))
-    )?.settings?.neverDomains;
+      await this.getGlobals(this.reconcileOptions(options, await this.defaultOnDiskOptions()))
+    )?.neverDomains;
   }
 
-  async setNeverDomains(value: { [id: string]: any }, options?: StorageOptions): Promise<void> {
-    const account = await this.getAccount(
+  async setNeverDomains(value: { [id: string]: unknown }, options?: StorageOptions): Promise<void> {
+    const globals = await this.getGlobals(
       this.reconcileOptions(options, await this.defaultOnDiskOptions())
     );
-    account.settings.neverDomains = value;
-    await this.saveAccount(
-      account,
+    globals.neverDomains = value;
+    await this.saveGlobals(
+      globals,
       this.reconcileOptions(options, await this.defaultOnDiskOptions())
     );
   }
diff --git a/libs/common/src/platform/state/global-state.ts b/libs/common/src/platform/state/global-state.ts
index 3d330668def..c14338a2fb9 100644
--- a/libs/common/src/platform/state/global-state.ts
+++ b/libs/common/src/platform/state/global-state.ts
@@ -1,5 +1,7 @@
 import { Observable } from "rxjs";
 
+import { StateUpdateOptions } from "./state-update-options";
+
 /**
  * A helper object for interacting with state that is scoped to a specific domain
  * but is not scoped to a user. This is application wide storage.
@@ -8,9 +10,16 @@ export interface GlobalState<T> {
   /**
    * Method for allowing you to manipulate state in an additive way.
    * @param configureState callback for how you want manipulate this section of state
+   * @param options Defaults given by @see {module:state-update-options#DEFAULT_OPTIONS}
+   * @param options.shouldUpdate A callback for determining if you want to update state. Defaults to () => true
+   * @param options.combineLatestWith An observable that you want to combine with the current state for callbacks. Defaults to null
+   * @param options.msTimeout A timeout for how long you are willing to wait for a `combineLatestWith` option to complete. Defaults to 1000ms. Only applies if `combineLatestWith` is set.
    * @returns A promise that must be awaited before your next action to ensure the update has been written to state.
    */
-  update: (configureState: (state: T) => T) => Promise<T>;
+  update: <TCombine>(
+    configureState: (state: T, dependency: TCombine) => T,
+    options?: StateUpdateOptions<T, TCombine>
+  ) => Promise<T>;
 
   /**
    * An observable stream of this state, the first emission of this will be the current state on disk
diff --git a/libs/common/src/platform/state/implementations/default-global-state.spec.ts b/libs/common/src/platform/state/implementations/default-global-state.spec.ts
index 86dc7e16709..656b8031c6e 100644
--- a/libs/common/src/platform/state/implementations/default-global-state.spec.ts
+++ b/libs/common/src/platform/state/implementations/default-global-state.spec.ts
@@ -3,9 +3,10 @@
  * @jest-environment ../shared/test.environment.ts
  */
 
+import { firstValueFrom, of } from "rxjs";
 import { Jsonify } from "type-fest";
 
-import { trackEmissions } from "../../../../spec";
+import { trackEmissions, awaitAsync } from "../../../../spec";
 import { FakeStorageService } from "../../../../spec/fake-storage.service";
 import { KeyDefinition, globalKeyBuilder } from "../key-definition";
 import { StateDefinition } from "../state-definition";
@@ -28,16 +29,15 @@ class TestState {
 
 const testStateDefinition = new StateDefinition("fake", "disk");
 
-const testKeyDefinition = new KeyDefinition<TestState>(
-  testStateDefinition,
-  "fake",
-  TestState.fromJSON
-);
+const testKeyDefinition = new KeyDefinition<TestState>(testStateDefinition, "fake", {
+  deserializer: TestState.fromJSON,
+});
 const globalKey = globalKeyBuilder(testKeyDefinition);
 
 describe("DefaultGlobalState", () => {
   let diskStorageService: FakeStorageService;
   let globalState: DefaultGlobalState<TestState>;
+  const newData = { date: new Date() };
 
   beforeEach(() => {
     diskStorageService = new FakeStorageService();
@@ -48,51 +48,154 @@ describe("DefaultGlobalState", () => {
     jest.resetAllMocks();
   });
 
-  it("should emit when storage updates", async () => {
-    const emissions = trackEmissions(globalState.state$);
-    const newData = { date: new Date() };
-    await diskStorageService.save(globalKey, newData);
+  describe("state$", () => {
+    it("should emit when storage updates", async () => {
+      const emissions = trackEmissions(globalState.state$);
+      await diskStorageService.save(globalKey, newData);
+      await awaitAsync();
 
-    expect(emissions).toEqual([
-      null, // Initial value
-      newData,
-      // JSON.parse(JSON.stringify(newData)), // This is due to the way `trackEmissions` clones
-    ]);
-  });
-
-  it("should not emit when update key does not match", async () => {
-    const emissions = trackEmissions(globalState.state$);
-    const newData = { date: new Date() };
-    await diskStorageService.save("wrong_key", newData);
-
-    expect(emissions).toEqual(
-      expect.arrayContaining([
+      expect(emissions).toEqual([
         null, // Initial value
-      ])
-    );
-  });
-
-  it("should save on update", async () => {
-    const newData = { date: new Date() };
-    const result = await globalState.update((state) => {
-      return newData;
+        newData,
+      ]);
     });
 
-    expect(diskStorageService.mock.save).toHaveBeenCalledTimes(1);
-    expect(result).toEqual(newData);
-  });
+    it("should not emit when update key does not match", async () => {
+      const emissions = trackEmissions(globalState.state$);
+      await diskStorageService.save("wrong_key", newData);
 
-  it("should emit once per update", async () => {
-    const emissions = trackEmissions(globalState.state$);
-    const newData = { date: new Date() };
-
-    await globalState.update((state) => {
-      return newData;
+      expect(emissions).toHaveLength(0);
     });
 
-    expect(emissions).toEqual([
-      null, // Initial value
-      newData,
-    ]);
+    it("should emit initial storage value on first subscribe", async () => {
+      const initialStorage: Record<string, TestState> = {};
+      initialStorage[globalKey] = TestState.fromJSON({
+        date: "2022-09-21T13:14:17.648Z",
+      });
+      diskStorageService.internalUpdateStore(initialStorage);
+
+      const state = await firstValueFrom(globalState.state$);
+      expect(diskStorageService.mock.get).toHaveBeenCalledTimes(1);
+      expect(diskStorageService.mock.get).toHaveBeenCalledWith("global_fake_fake", undefined);
+      expect(state).toBeTruthy();
+    });
+  });
+
+  describe("update", () => {
+    it("should save on update", async () => {
+      const result = await globalState.update((state) => {
+        return newData;
+      });
+
+      expect(diskStorageService.mock.save).toHaveBeenCalledTimes(1);
+      expect(result).toEqual(newData);
+    });
+
+    it("should emit once per update", async () => {
+      const emissions = trackEmissions(globalState.state$);
+      await awaitAsync(); // storage updates are behind a promise
+
+      await globalState.update((state) => {
+        return newData;
+      });
+
+      await awaitAsync();
+
+      expect(emissions).toEqual([
+        null, // Initial value
+        newData,
+      ]);
+    });
+
+    it("should provided combined dependencies", async () => {
+      const emissions = trackEmissions(globalState.state$);
+      await awaitAsync(); // storage updates are behind a promise
+
+      const combinedDependencies = { date: new Date() };
+
+      await globalState.update(
+        (state, dependencies) => {
+          expect(dependencies).toEqual(combinedDependencies);
+          return newData;
+        },
+        {
+          combineLatestWith: of(combinedDependencies),
+        }
+      );
+
+      await awaitAsync();
+
+      expect(emissions).toEqual([
+        null, // Initial value
+        newData,
+      ]);
+    });
+
+    it("should not update if shouldUpdate returns false", async () => {
+      const emissions = trackEmissions(globalState.state$);
+
+      const result = await globalState.update(
+        (state) => {
+          return newData;
+        },
+        {
+          shouldUpdate: () => false,
+        }
+      );
+
+      expect(diskStorageService.mock.save).not.toHaveBeenCalled();
+      expect(emissions).toEqual([null]); // Initial value
+      expect(result).toBeUndefined();
+    });
+
+    it("should provide the update callback with the current State", async () => {
+      const emissions = trackEmissions(globalState.state$);
+      await awaitAsync(); // storage updates are behind a promise
+
+      // Seed with interesting data
+      const initialData = { date: new Date(2020, 1, 1) };
+      await globalState.update((state, dependencies) => {
+        return initialData;
+      });
+
+      await awaitAsync();
+
+      await globalState.update((state) => {
+        expect(state).toEqual(initialData);
+        return newData;
+      });
+
+      await awaitAsync();
+
+      expect(emissions).toEqual([
+        null, // Initial value
+        initialData,
+        newData,
+      ]);
+    });
+
+    it("should give initial state for update call", async () => {
+      const initialStorage: Record<string, TestState> = {};
+      const initialState = TestState.fromJSON({
+        date: "2022-09-21T13:14:17.648Z",
+      });
+      initialStorage[globalKey] = initialState;
+      diskStorageService.internalUpdateStore(initialStorage);
+
+      const emissions = trackEmissions(globalState.state$);
+      await awaitAsync(); // storage updates are behind a promise
+
+      const newState = {
+        ...initialState,
+        date: new Date(initialState.date.getFullYear(), initialState.date.getMonth() + 1),
+      };
+      const actual = await globalState.update((existingState) => newState);
+
+      await awaitAsync();
+
+      expect(actual).toEqual(newState);
+      expect(emissions).toHaveLength(2);
+      expect(emissions).toEqual(expect.arrayContaining([initialState, newState]));
+    });
   });
 });
diff --git a/libs/common/src/platform/state/implementations/default-global-state.ts b/libs/common/src/platform/state/implementations/default-global-state.ts
index a7f65764266..d6713e14bf8 100644
--- a/libs/common/src/platform/state/implementations/default-global-state.ts
+++ b/libs/common/src/platform/state/implementations/default-global-state.ts
@@ -1,15 +1,29 @@
-import { BehaviorSubject, Observable, defer, filter, map, shareReplay, tap } from "rxjs";
-import { Jsonify } from "type-fest";
+import {
+  BehaviorSubject,
+  Observable,
+  defer,
+  filter,
+  firstValueFrom,
+  shareReplay,
+  switchMap,
+  tap,
+  timeout,
+} from "rxjs";
 
 import { AbstractStorageService } from "../../abstractions/storage.service";
 import { GlobalState } from "../global-state";
 import { KeyDefinition, globalKeyBuilder } from "../key-definition";
+import { StateUpdateOptions, populateOptionsWithDefault } from "../state-update-options";
+
+import { getStoredValue } from "./util";
+const FAKE_DEFAULT = Symbol("fakeDefault");
 
 export class DefaultGlobalState<T> implements GlobalState<T> {
   private storageKey: string;
-  private seededPromise: Promise<void>;
 
-  protected stateSubject: BehaviorSubject<T | null> = new BehaviorSubject<T | null>(null);
+  protected stateSubject: BehaviorSubject<T | typeof FAKE_DEFAULT> = new BehaviorSubject<
+    T | typeof FAKE_DEFAULT
+  >(FAKE_DEFAULT);
 
   state$: Observable<T>;
 
@@ -19,15 +33,17 @@ export class DefaultGlobalState<T> implements GlobalState<T> {
   ) {
     this.storageKey = globalKeyBuilder(this.keyDefinition);
 
-    this.seededPromise = this.chosenLocation.get<Jsonify<T>>(this.storageKey).then((data) => {
-      const serializedData = this.keyDefinition.deserializer(data);
-      this.stateSubject.next(serializedData);
-    });
-
     const storageUpdates$ = this.chosenLocation.updates$.pipe(
       filter((update) => update.key === this.storageKey),
-      map((update) => {
-        return this.keyDefinition.deserializer(update.value as Jsonify<T>);
+      switchMap(async (update) => {
+        if (update.updateType === "remove") {
+          return null;
+        }
+        return await getStoredValue(
+          this.storageKey,
+          this.chosenLocation,
+          this.keyDefinition.deserializer
+        );
       }),
       shareReplay({ bufferSize: 1, refCount: false })
     );
@@ -37,24 +53,53 @@ export class DefaultGlobalState<T> implements GlobalState<T> {
         this.stateSubject.next(value);
       });
 
+      this.getFromState().then((s) => {
+        this.stateSubject.next(s);
+      });
+
       return this.stateSubject.pipe(
         tap({
-          complete: () => storageUpdateSubscription.unsubscribe(),
+          complete: () => {
+            storageUpdateSubscription.unsubscribe();
+          },
         })
       );
-    });
+    }).pipe(
+      shareReplay({ refCount: false, bufferSize: 1 }),
+      filter<T>((i) => i != FAKE_DEFAULT)
+    );
   }
 
-  async update(configureState: (state: T) => T): Promise<T> {
-    await this.seededPromise;
-    const currentState = this.stateSubject.getValue();
-    const newState = configureState(currentState);
+  async update<TCombine>(
+    configureState: (state: T, dependency: TCombine) => T,
+    options: StateUpdateOptions<T, TCombine> = {}
+  ): Promise<T> {
+    options = populateOptionsWithDefault(options);
+    const currentState = await this.getGuaranteedState();
+    const combinedDependencies =
+      options.combineLatestWith != null
+        ? await firstValueFrom(options.combineLatestWith.pipe(timeout(options.msTimeout)))
+        : null;
+
+    if (!options.shouldUpdate(currentState, combinedDependencies)) {
+      return;
+    }
+
+    const newState = configureState(currentState, combinedDependencies);
     await this.chosenLocation.save(this.storageKey, newState);
     return newState;
   }
 
+  private async getGuaranteedState() {
+    const currentValue = this.stateSubject.getValue();
+    return currentValue === FAKE_DEFAULT ? await this.getFromState() : currentValue;
+  }
+
   async getFromState(): Promise<T> {
-    const data = await this.chosenLocation.get<Jsonify<T>>(this.storageKey);
-    return this.keyDefinition.deserializer(data);
+    return await getStoredValue(
+      this.storageKey,
+      this.chosenLocation,
+      this.keyDefinition.deserializer
+    );
   }
 }
diff --git a/libs/common/src/platform/state/implementations/default-user-state.spec.ts b/libs/common/src/platform/state/implementations/default-user-state.spec.ts
index e1ab3c1a623..f5cc7e9693f 100644
--- a/libs/common/src/platform/state/implementations/default-user-state.spec.ts
+++ b/libs/common/src/platform/state/implementations/default-user-state.spec.ts
@@ -1,8 +1,12 @@
+/**
+ * need to update test environment so trackEmissions works appropriately
+ * @jest-environment ../shared/test.environment.ts
+ */
 import { any, mock } from "jest-mock-extended";
-import { BehaviorSubject, firstValueFrom, timeout } from "rxjs";
+import { BehaviorSubject, firstValueFrom, of, timeout } from "rxjs";
 import { Jsonify } from "type-fest";
 
-import { trackEmissions } from "../../../../spec";
+import { awaitAsync, trackEmissions } from "../../../../spec";
 import { FakeStorageService } from "../../../../spec/fake-storage.service";
 import { AccountInfo, AccountService } from "../../../auth/abstractions/account.service";
 import { AuthenticationStatus } from "../../../auth/enums/authentication-status";
@@ -29,11 +33,9 @@ class TestState {
 
 const testStateDefinition = new StateDefinition("fake", "disk");
 
-const testKeyDefinition = new KeyDefinition<TestState>(
-  testStateDefinition,
-  "fake",
-  TestState.fromJSON
-);
+const testKeyDefinition = new KeyDefinition<TestState>(testStateDefinition, "fake", {
+  deserializer: TestState.fromJSON,
+});
 
 describe("DefaultUserState", () => {
   const accountService = mock<AccountService>();
@@ -62,7 +64,7 @@ describe("DefaultUserState", () => {
       name: `Test User ${id}`,
       status: AuthenticationStatus.Unlocked,
     });
-    await new Promise((resolve) => setTimeout(resolve, 1));
+    await awaitAsync();
   };
 
   afterEach(() => {
@@ -70,51 +72,42 @@ describe("DefaultUserState", () => {
   });
 
   it("emits updates for each user switch and update", async () => {
-    diskStorageService.internalUpdateStore({
-      "user_00000000-0000-1000-a000-000000000001_fake_fake": {
-        date: "2022-09-21T13:14:17.648Z",
-        array: ["value1", "value2"],
-      } as Jsonify<TestState>,
-      "user_00000000-0000-1000-a000-000000000002_fake_fake": {
-        date: "2021-09-21T13:14:17.648Z",
-        array: ["user2_value"],
-      },
-    });
+    const user1 = "user_00000000-0000-1000-a000-000000000001_fake_fake";
+    const user2 = "user_00000000-0000-1000-a000-000000000002_fake_fake";
+    const state1 = {
+      date: new Date(2021, 0),
+      array: ["value1"],
+    };
+    const state2 = {
+      date: new Date(2022, 0),
+      array: ["value2"],
+    };
+    const initialState: Record<string, TestState> = {};
+    initialState[user1] = state1;
+    initialState[user2] = state2;
+    diskStorageService.internalUpdateStore(initialState);
 
     const emissions = trackEmissions(userState.state$);
 
     // User signs in
     changeActiveUser("1");
-    await new Promise<void>((resolve) => setTimeout(resolve, 1));
+    await awaitAsync();
 
     // Service does an update
-    await userState.update((state) => {
-      state.array.push("value3");
-      state.date = new Date(2023, 0);
-      return state;
-    });
-    await new Promise<void>((resolve) => setTimeout(resolve, 1));
+    const updatedState = {
+      date: new Date(2023, 0),
+      array: ["value3"],
+    };
+    await userState.update(() => updatedState);
+    await awaitAsync();
 
     // Emulate an account switch
     await changeActiveUser("2");
 
-    expect(emissions).toHaveLength(3);
-    // Gotten starter user data
-    expect(emissions[0]).toBeTruthy();
-    expect(emissions[0].array).toHaveLength(2);
+    expect(emissions).toEqual([state1, updatedState, state2]);
 
-    // Gotten emission for the update call
-    expect(emissions[1]).toBeTruthy();
-    expect(emissions[1].array).toHaveLength(3);
-    expect(new Date(emissions[1].date).getUTCFullYear()).toBe(2023);
-
-    // The second users data
-    expect(emissions[2]).toBeTruthy();
-    expect(emissions[2].array).toHaveLength(1);
-    expect(new Date(emissions[2].date).getUTCFullYear()).toBe(2021);
-
-    // Should only be called twice to get state, once for each user
-    expect(diskStorageService.mock.get).toHaveBeenCalledTimes(2);
+    // Should be called three time to get state, once for each user and once for the update
+    expect(diskStorageService.mock.get).toHaveBeenCalledTimes(3);
     expect(diskStorageService.mock.get).toHaveBeenNthCalledWith(
       1,
       "user_00000000-0000-1000-a000-000000000001_fake_fake",
@@ -122,6 +115,11 @@ describe("DefaultUserState", () => {
     );
     expect(diskStorageService.mock.get).toHaveBeenNthCalledWith(
       2,
+      "user_00000000-0000-1000-a000-000000000001_fake_fake",
+      any()
+    );
+    expect(diskStorageService.mock.get).toHaveBeenNthCalledWith(
+      3,
       "user_00000000-0000-1000-a000-000000000002_fake_fake",
       any()
     );
@@ -161,9 +159,9 @@ describe("DefaultUserState", () => {
 
     diskStorageService.internalUpdateStore({
       "user_00000000-0000-1000-a000-000000000001_fake_fake": {
-        date: "2020-09-21T13:14:17.648Z",
+        date: new Date(2020, 0),
         array: ["testValue"],
-      } as Jsonify<TestState>,
+      } as TestState,
     });
 
     const promise = firstValueFrom(userState.state$.pipe(timeout(20)))
@@ -233,4 +231,102 @@ describe("DefaultUserState", () => {
     // this value is correct.
     expect(emissions).toHaveLength(2);
   });
+
+  describe("update", () => {
+    const newData = { date: new Date(), array: ["test"] };
+    beforeEach(async () => {
+      changeActiveUser("1");
+    });
+
+    it("should save on update", async () => {
+      const result = await userState.update((state, dependencies) => {
+        return newData;
+      });
+
+      expect(diskStorageService.mock.save).toHaveBeenCalledTimes(1);
+      expect(result).toEqual(newData);
+    });
+
+    it("should emit once per update", async () => {
+      const emissions = trackEmissions(userState.state$);
+      await awaitAsync(); // Need to await for the initial value to be emitted
+
+      await userState.update((state, dependencies) => {
+        return newData;
+      });
+      await awaitAsync();
+
+      expect(emissions).toEqual([
+        null, // initial value
+        newData,
+      ]);
+    });
+
+    it("should provide combined dependencies", async () => {
+      const emissions = trackEmissions(userState.state$);
+      await awaitAsync(); // Need to await for the initial value to be emitted
+
+      const combinedDependencies = { date: new Date() };
+
+      await userState.update(
+        (state, dependencies) => {
+          expect(dependencies).toEqual(combinedDependencies);
+          return newData;
+        },
+        {
+          combineLatestWith: of(combinedDependencies),
+        }
+      );
+      await awaitAsync();
+
+      expect(emissions).toEqual([
+        null, // initial value
+        newData,
+      ]);
+    });
+
+    it("should not update if shouldUpdate returns false", async () => {
+      const emissions = trackEmissions(userState.state$);
+      await awaitAsync(); // Need to await for the initial value to be emitted
+
+      const result = await userState.update(
+        (state, dependencies) => {
+          return newData;
+        },
+        {
+          shouldUpdate: () => false,
+        }
+      );
+
+      await awaitAsync();
+
+      expect(diskStorageService.mock.save).not.toHaveBeenCalled();
+      expect(result).toBe(undefined);
+      expect(emissions).toEqual([null]);
+    });
+
+    it("should provide the current state to the update callback", async () => {
+      const emissions = trackEmissions(userState.state$);
+      await awaitAsync(); // Need to await for the initial value to be emitted
+
+      // Seed with interesting data
+      const initialData = { date: new Date(2020, 0), array: ["value1", "value2"] };
+      await userState.update((state, dependencies) => {
+        return initialData;
+      });
+
+      await userState.update((state, dependencies) => {
+        expect(state).toEqual(initialData);
+        return newData;
+      });
+
+      await awaitAsync();
+
+      expect(emissions).toEqual([
+        null, // Initial value
+        initialData,
+        newData,
+      ]);
+    });
+  });
 });
diff --git a/libs/common/src/platform/state/implementations/default-user-state.ts b/libs/common/src/platform/state/implementations/default-user-state.ts
index 10d1329d70e..19a2c420d0a 100644
--- a/libs/common/src/platform/state/implementations/default-user-state.ts
+++ b/libs/common/src/platform/state/implementations/default-user-state.ts
@@ -9,8 +9,8 @@ import {
   firstValueFrom,
   combineLatestWith,
   filter,
+  timeout,
 } from "rxjs";
-import { Jsonify } from "type-fest";
 
 import { AccountService } from "../../../auth/abstractions/account.service";
 import { UserId } from "../../../types/guid";
@@ -18,9 +18,11 @@ import { EncryptService } from "../../abstractions/encrypt.service";
 import { AbstractStorageService } from "../../abstractions/storage.service";
 import { DerivedUserState } from "../derived-user-state";
 import { KeyDefinition, userKeyBuilder } from "../key-definition";
+import { StateUpdateOptions, populateOptionsWithDefault } from "../state-update-options";
 import { Converter, UserState } from "../user-state";
 
 import { DefaultDerivedUserState } from "./default-derived-state";
+import { getStoredValue } from "./util";
 
 const FAKE_DEFAULT = Symbol("fakeDefault");
 
@@ -54,9 +56,11 @@ export class DefaultUserState<T> implements UserState<T> {
         if (key == null) {
           return FAKE_DEFAULT;
         }
-        const jsonData = await this.chosenStorageLocation.get<Jsonify<T>>(key);
-        const data = keyDefinition.deserializer(jsonData);
-        return data;
+        return await getStoredValue(
+          key,
+          this.chosenStorageLocation,
+          this.keyDefinition.deserializer
+        );
       }),
       // Share the execution
       shareReplay({ refCount: false, bufferSize: 1 })
@@ -65,8 +69,16 @@ export class DefaultUserState<T> implements UserState<T> {
     const storageUpdates$ = this.chosenStorageLocation.updates$.pipe(
       combineLatestWith(this.formattedKey$),
       filter(([update, key]) => key !== null && update.key === key),
-      map(([update]) => {
-        return keyDefinition.deserializer(update.value as Jsonify<T>);
+      switchMap(async ([update, key]) => {
+        if (update.updateType === "remove") {
+          return null;
+        }
+        const data = await getStoredValue(
+          key,
+          this.chosenStorageLocation,
+          this.keyDefinition.deserializer
+        );
+        return data;
       })
     );
 
@@ -94,23 +106,53 @@ export class DefaultUserState<T> implements UserState<T> {
       .pipe(filter<T>((value) => value != FAKE_DEFAULT));
   }
 
-  async update(configureState: (state: T) => T): Promise<T> {
+  async update<TCombine>(
+    configureState: (state: T, dependency: TCombine) => T,
+    options: StateUpdateOptions<T, TCombine> = {}
+  ): Promise<T> {
+    options = populateOptionsWithDefault(options);
     const key = await this.createKey();
     const currentState = await this.getGuaranteedState(key);
-    const newState = configureState(currentState);
+    const combinedDependencies =
+      options.combineLatestWith != null
+        ? await firstValueFrom(options.combineLatestWith.pipe(timeout(options.msTimeout)))
+        : null;
+
+    if (!options.shouldUpdate(currentState, combinedDependencies)) {
+      return;
+    }
+
+    const newState = configureState(currentState, combinedDependencies);
     await this.saveToStorage(key, newState);
     return newState;
   }
 
-  async updateFor(userId: UserId, configureState: (state: T) => T): Promise<T> {
+  async updateFor<TCombine>(
+    userId: UserId,
+    configureState: (state: T, dependencies: TCombine) => T,
+    options: StateUpdateOptions<T, TCombine> = {}
+  ): Promise<T> {
     if (userId == null) {
       throw new Error("Attempting to update user state, but no userId has been supplied.");
     }
+    options = populateOptionsWithDefault(options);
 
     const key = userKeyBuilder(userId, this.keyDefinition);
-    const currentStore = await this.chosenStorageLocation.get<Jsonify<T>>(key);
-    const currentState = this.keyDefinition.deserializer(currentStore);
-    const newState = configureState(currentState);
+    const currentState = await getStoredValue(
+      key,
+      this.chosenStorageLocation,
+      this.keyDefinition.deserializer
+    );
+    const combinedDependencies =
+      options.combineLatestWith != null
+        ? await firstValueFrom(options.combineLatestWith.pipe(timeout(options.msTimeout)))
+        : null;
+
+    if (!options.shouldUpdate(currentState, combinedDependencies)) {
+      return;
+    }
+
+    const newState = configureState(currentState, combinedDependencies);
     await this.saveToStorage(key, newState);
 
     return newState;
@@ -118,8 +160,7 @@ export class DefaultUserState<T> implements UserState<T> {
 
   async getFromState(): Promise<T> {
     const key = await this.createKey();
-    const data = await this.chosenStorageLocation.get<Jsonify<T>>(key);
-    return this.keyDefinition.deserializer(data);
+    return await getStoredValue(key, this.chosenStorageLocation, this.keyDefinition.deserializer);
   }
 
   createDerived<TTo>(converter: Converter<T, TTo>): DerivedUserState<TTo> {
@@ -140,10 +181,13 @@ export class DefaultUserState<T> implements UserState<T> {
   }
 
   private async seedInitial(key: string): Promise<T> {
-    const data = await this.chosenStorageLocation.get<Jsonify<T>>(key);
-    const serializedData = this.keyDefinition.deserializer(data);
-    this.stateSubject.next(serializedData);
-    return serializedData;
+    const value = await getStoredValue(
+      key,
+      this.chosenStorageLocation,
+      this.keyDefinition.deserializer
+    );
+    this.stateSubject.next(value);
+    return value;
   }
 
   protected saveToStorage(key: string, data: T): Promise<void> {
diff --git a/libs/common/src/platform/state/implementations/util.spec.ts b/libs/common/src/platform/state/implementations/util.spec.ts
new file mode 100644
index 00000000000..15737b0c8c9
--- /dev/null
+++ b/libs/common/src/platform/state/implementations/util.spec.ts
@@ -0,0 +1,50 @@
+import { FakeStorageService } from "../../../../spec/fake-storage.service";
+
+import { getStoredValue } from "./util";
+
+describe("getStoredValue", () => {
+  const key = "key";
+  const deserializedValue = { value: 1 };
+  const value = JSON.stringify(deserializedValue);
+  const deserializer = (v: string) => JSON.parse(v);
+  let storageService: FakeStorageService;
+
+  beforeEach(() => {
+    storageService = new FakeStorageService();
+  });
+
+  describe("when the storage service requires deserialization", () => {
+    beforeEach(() => {
+      storageService.internalUpdateValuesRequireDeserialization(true);
+    });
+
+    it("should deserialize", async () => {
+      storageService.save(key, value);
+
+      const result = await getStoredValue(key, storageService, deserializer);
+
+      expect(result).toEqual(deserializedValue);
+    });
+  });
+  describe("when the storage service does not require deserialization", () => {
+    beforeEach(() => {
+      storageService.internalUpdateValuesRequireDeserialization(false);
+    });
+
+    it("should not deserialize", async () => {
+      storageService.save(key, value);
+
+      const result = await getStoredValue(key, storageService, deserializer);
+
+      expect(result).toEqual(value);
+    });
+
+    it("should convert undefined to null", async () => {
+      storageService.save(key, undefined);
+
+      const result = await getStoredValue(key, storageService, deserializer);
+
+      expect(result).toEqual(null);
+    });
+  });
+});
diff --git a/libs/common/src/platform/state/implementations/util.ts b/libs/common/src/platform/state/implementations/util.ts
new file mode 100644
index 00000000000..60401ce523b
--- /dev/null
+++ b/libs/common/src/platform/state/implementations/util.ts
@@ -0,0 +1,18 @@
+import { Jsonify } from "type-fest";
+
+import { AbstractStorageService } from "../../abstractions/storage.service";
+
+export async function getStoredValue<T>(
+  key: string,
+  storage: AbstractStorageService,
+  deserializer: (jsonValue: Jsonify<T>) => T
+) {
+  if (storage.valuesRequireDeserialization) {
+    const jsonValue = await storage.get<Jsonify<T>>(key);
+    const value = deserializer(jsonValue);
+    return value;
+  } else {
+    const value = await storage.get<T>(key);
+    return value ?? null;
+  }
+}
diff --git a/libs/common/src/platform/state/key-definition.spec.ts b/libs/common/src/platform/state/key-definition.spec.ts
new file mode 100644
index 00000000000..8ddc6900083
--- /dev/null
+++ b/libs/common/src/platform/state/key-definition.spec.ts
@@ -0,0 +1,81 @@
+import { Opaque } from "type-fest";
+
+import { KeyDefinition } from "./key-definition";
+import { StateDefinition } from "./state-definition";
+
+const fakeStateDefinition = new StateDefinition("fake", "disk");
+
+type FancyString = Opaque<string, "FancyString">;
+
+describe("KeyDefinition", () => {
+  describe("constructor", () => {
+    it("throws on undefined deserializer", () => {
+      expect(() => {
+        new KeyDefinition<boolean>(fakeStateDefinition, "fake", {
+          deserializer: undefined,
+        });
+      });
+    });
+  });
+
+  describe("record", () => {
+    it("runs custom deserializer for each record value", () => {
+      const recordDefinition = KeyDefinition.record<boolean>(fakeStateDefinition, "fake", {
+        // Intentionally negate the value for testing
+        deserializer: (value) => !value,
+      });
+
+      expect(recordDefinition).toBeTruthy();
+      expect(recordDefinition.deserializer).toBeTruthy();
+
+      const deserializedValue = recordDefinition.deserializer({
+        test1: false,
+        test2: true,
+      });
+
+      expect(Object.keys(deserializedValue)).toHaveLength(2);
+
+      // Values should have swapped from their initial value
+      expect(deserializedValue["test1"]).toBeTruthy();
+      expect(deserializedValue["test2"]).toBeFalsy();
+    });
+
+    it("can handle fancy string type", () => {
+      // This test is more of a test that I got the typescript typing correctly than actually testing any business logic
+      const recordDefinition = KeyDefinition.record<boolean, FancyString>(
+        fakeStateDefinition,
+        "fake",
+        {
+          deserializer: (value) => !value,
+        }
+      );
+
+      const fancyRecord = recordDefinition.deserializer(
+        JSON.parse(`{ "myKey": false, "mySecondKey": true }`)
+      );
+
+      expect(fancyRecord).toBeTruthy();
+      expect(Object.keys(fancyRecord)).toHaveLength(2);
+      expect(fancyRecord["myKey" as FancyString]).toBeTruthy();
+      expect(fancyRecord["mySecondKey" as FancyString]).toBeFalsy();
+    });
+  });
+
+  describe("array", () => {
+    it("run custom deserializer for each array element", () => {
+      const arrayDefinition = KeyDefinition.array<boolean>(fakeStateDefinition, "fake", {
+        deserializer: (value) => !value,
+      });
+
+      expect(arrayDefinition).toBeTruthy();
+      expect(arrayDefinition.deserializer).toBeTruthy();
+
+      const deserializedValue = arrayDefinition.deserializer([false, true]);
+
+      expect(deserializedValue).toBeTruthy();
+      expect(deserializedValue).toHaveLength(2);
+      expect(deserializedValue[0]).toBeTruthy();
+      expect(deserializedValue[1]).toBeFalsy();
+    });
+  });
+});
diff --git a/libs/common/src/platform/state/key-definition.ts b/libs/common/src/platform/state/key-definition.ts
index 91dafcb5e95..17eb1d943f1 100644
--- a/libs/common/src/platform/state/key-definition.ts
+++ b/libs/common/src/platform/state/key-definition.ts
@@ -5,6 +5,22 @@ import { Utils } from "../misc/utils";
 
 import { StateDefinition } from "./state-definition";
 
+/**
+ * A set of options for customizing the behavior of a {@link KeyDefinition}
+ */
+type KeyDefinitionOptions<T> = {
+  /**
+   * A function to use to safely convert your type from json to your expected type.
+   *
+   * **Important:** Your data may be serialized/deserialized at any time and this
+   *  callback needs to be able to faithfully re-initialize from the JSON object representation of your type.
+   *
+   * @param jsonValue The JSON object representation of your state.
+   * @returns The fully typed version of your state.
+   */
+  readonly deserializer: (jsonValue: Jsonify<T>) => T;
+};
+
 /**
  * KeyDefinitions describe the precise location to store data for a given piece of state.
  * The StateDefinition is used to describe the domain of the state, and the KeyDefinition
@@ -14,30 +30,61 @@ export class KeyDefinition<T> {
   /**
    * Creates a new instance of a KeyDefinition
    * @param stateDefinition The state definition for which this key belongs to.
-   * @param key The name of the key, this should be unique per domain
-   * @param deserializer A function to use to safely convert your type from json to your expected type.
+   * @param key The name of the key, this should be unique per domain.
+   * @param options A set of options to customize the behavior of {@link KeyDefinition}. All options are required.
+   * @param options.deserializer A function to use to safely convert your type from json to your expected type.
+   *   Your data may be serialized/deserialized at any time and this needs callback needs to be able to faithfully re-initialize
+   *   from the JSON object representation of your type.
    */
   constructor(
     readonly stateDefinition: StateDefinition,
     readonly key: string,
-    readonly deserializer: (jsonValue: Jsonify<T>) => T
-  ) {}
+    private readonly options: KeyDefinitionOptions<T>
+  ) {
+    if (options.deserializer == null) {
+      throw new Error(
+        `'deserializer' is a required property on key ${stateDefinition.name} > ${key}`
+      );
+    }
+  }
+
+  /**
+   * Gets the deserializer configured for this {@link KeyDefinition}
+   */
+  get deserializer() {
+    return this.options.deserializer;
+  }
 
   /**
    * Creates a {@link KeyDefinition} for state that is an array.
    * @param stateDefinition The state definition to be added to the KeyDefinition
    * @param key The key to be added to the KeyDefinition
-   * @param deserializer The deserializer for the element of the array in your state.
-   * @returns A {@link KeyDefinition} that contains a serializer that will run the provided deserializer for each
-   * element of an array **unless that array is null in which case it will return an empty list.**
+   * @param options The options to customize the final {@link KeyDefinition}.
+   * @returns A {@link KeyDefinition} initialized for arrays, the options run
+   * the deserializer on the provided options for each element of an array
+   * **unless that array is null, in which case it will return an empty list.**
+   *
+   * @example
+   * ```typescript
+   * const MY_KEY = KeyDefinition.array<MyArrayElement>(MY_STATE, "key", {
+   *   deserializer: (myJsonElement) => convertToElement(myJsonElement),
+   * });
+   * ```
    */
   static array<T>(
     stateDefinition: StateDefinition,
     key: string,
-    deserializer: (jsonValue: Jsonify<T>) => T
+    // We have them provide options for the element of the array, depending on future options we add, this could get a little weird.
+    options: KeyDefinitionOptions<T> // The array helper forces  an initialValue of an empty array
   ) {
-    return new KeyDefinition<T[]>(stateDefinition, key, (jsonValue) => {
-      return jsonValue?.map((v) => deserializer(v)) ?? [];
+    return new KeyDefinition<T[]>(stateDefinition, key, {
+      ...options,
+      deserializer: (jsonValue) => {
+        if (jsonValue == null) {
+          return null;
+        }
+        return jsonValue.map((v) => options.deserializer(v));
+      },
     });
   }
 
@@ -45,32 +92,42 @@ export class KeyDefinition<T> {
    * Creates a {@link KeyDefinition} for state that is a record.
    * @param stateDefinition The state definition to be added to the KeyDefinition
    * @param key The key to be added to the KeyDefinition
-   * @param deserializer The deserializer for the value part of a record.
+   * @param options The options to customize the final {@link KeyDefinition}.
    * @returns A {@link KeyDefinition} that contains a serializer that will run the provided deserializer for each
-   * value in a record and returns every key as a string **unless that record is null in which case it will return an record.**
+   * value in a record and returns every key as a string **unless that record is null, in which case it will return an record.**
+   *
+   * @example
+   * ```typescript
+   * const MY_KEY = KeyDefinition.record<MyRecordValue>(MY_STATE, "key", {
+   *   deserializer: (myJsonValue) => convertToValue(myJsonValue),
+   * });
+   * ```
    */
-  static record<T>(
+  static record<T, TKey extends string = string>(
     stateDefinition: StateDefinition,
     key: string,
-    deserializer: (jsonValue: Jsonify<T>) => T
+    // We have them provide options for the value of the record, depending on future options we add, this could get a little weird.
+    options: KeyDefinitionOptions<T> // The array helper forces an initialValue of an empty record
   ) {
-    return new KeyDefinition<Record<string, T>>(stateDefinition, key, (jsonValue) => {
-      const output: Record<string, T> = {};
+    return new KeyDefinition<Record<TKey, T>>(stateDefinition, key, {
+      ...options,
+      deserializer: (jsonValue) => {
+        if (jsonValue == null) {
+          return null;
+        }
 
-      if (jsonValue == null) {
+        const output: Record<string, T> = {};
+        for (const key in jsonValue) {
+          output[key] = options.deserializer((jsonValue as Record<string, Jsonify<T>>)[key]);
+        }
         return output;
-      }
-
-      for (const key in jsonValue) {
-        output[key] = deserializer((jsonValue as Record<string, Jsonify<T>>)[key]);
-      }
-      return output;
+      },
     });
   }
 
   /**
-   *
-   * @returns
+   * Create a string that should be unique across the entire application.
+   * @returns A string that can be used to cache instances created via this key.
    */
   buildCacheKey(): string {
     return `${this.stateDefinition.storageLocation}_${this.stateDefinition.name}_${this.key}`;
diff --git a/libs/common/src/platform/state/state-update-options.ts b/libs/common/src/platform/state/state-update-options.ts
new file mode 100644
index 00000000000..3a4bfed4641
--- /dev/null
+++ b/libs/common/src/platform/state/state-update-options.ts
@@ -0,0 +1,26 @@
+import { Observable } from "rxjs";
+
+export const DEFAULT_OPTIONS = {
+  shouldUpdate: () => true,
+  combineLatestWith: null as Observable<unknown>,
+  msTimeout: 1000,
+};
+
+type DefinitelyTypedDefault<T, TCombine> = Omit<
+  typeof DEFAULT_OPTIONS,
+  "shouldUpdate" | "combineLatestWith"
+> & {
+  shouldUpdate: (state: T, dependency: TCombine) => boolean;
+  combineLatestWith?: Observable<TCombine>;
+};
+
+export type StateUpdateOptions<T, TCombine> = Partial<DefinitelyTypedDefault<T, TCombine>>;
+
+export function populateOptionsWithDefault<T, TCombine>(
+  options: StateUpdateOptions<T, TCombine>
+): StateUpdateOptions<T, TCombine> {
+  return {
+    ...(DEFAULT_OPTIONS as StateUpdateOptions<T, TCombine>),
+    ...options,
+  };
+}
diff --git a/libs/common/src/platform/state/user-state.ts b/libs/common/src/platform/state/user-state.ts
index 82113e37ae3..93404926dd9 100644
--- a/libs/common/src/platform/state/user-state.ts
+++ b/libs/common/src/platform/state/user-state.ts
@@ -4,6 +4,8 @@ import { UserId } from "../../types/guid";
 import { EncryptService } from "../abstractions/encrypt.service";
 import { UserKey } from "../models/domain/symmetric-crypto-key";
 
+import { StateUpdateOptions } from "./state-update-options";
+
 import { DerivedUserState } from ".";
 
 export class DeriveContext {
@@ -21,16 +23,33 @@ export interface UserState<T> {
   /**
    * Updates backing stores for the active user.
    * @param configureState function that takes the current state and returns the new state
+   * @param options Defaults to @see {module:state-update-options#DEFAULT_OPTIONS}
+   * @param options.shouldUpdate A callback for determining if you want to update state. Defaults to () => true
+   * @param options.combineLatestWith An observable that you want to combine with the current state for callbacks. Defaults to null
+   * @param options.msTimeout A timeout for how long you are willing to wait for a `combineLatestWith` option to complete. Defaults to 1000ms. Only applies if `combineLatestWith` is set.
+
    * @returns The new state
    */
-  readonly update: (configureState: (state: T) => T) => Promise<T>;
+  readonly update: <TCombine>(
+    configureState: (state: T, dependencies: TCombine) => T,
+    options?: StateUpdateOptions<T, TCombine>
+  ) => Promise<T>;
   /**
    * Updates backing stores for the given userId, which may or may not be active.
    * @param userId the UserId to target the update for
    * @param configureState function that takes the current state for the targeted user and returns the new state
+   * @param options Defaults given by @see {module:state-update-options#DEFAULT_OPTIONS}
+   * @param options.shouldUpdate A callback for determining if you want to update state. Defaults to () => true
+   * @param options.combineLatestWith An observable that you want to combine with the current state for callbacks. Defaults to null
+   * @param options.msTimeout A timeout for how long you are willing to wait for a `combineLatestWith` option to complete. Defaults to 1000ms. Only applies if `combineLatestWith` is set.
+
    * @returns The new state
    */
-  readonly updateFor: (userId: UserId, configureState: (state: T) => T) => Promise<T>;
+  readonly updateFor: <TCombine>(
+    userId: UserId,
+    configureState: (state: T, dependencies: TCombine) => T,
+    options?: StateUpdateOptions<T, TCombine>
+  ) => Promise<T>;
 
   /**
    * Creates a derives state from the current state. Derived states are always tied to the active user.
diff --git a/libs/common/src/services/settings.service.ts b/libs/common/src/services/settings.service.ts
index f3002a7bfd0..6ebaa68263b 100644
--- a/libs/common/src/services/settings.service.ts
+++ b/libs/common/src/services/settings.service.ts
@@ -74,6 +74,14 @@ export class SettingsService implements SettingsServiceAbstraction {
     return this._disableFavicon.getValue();
   }
 
+  async setAutoFillOverlayVisibility(value: number): Promise<void> {
+    return await this.stateService.setAutoFillOverlayVisibility(value);
+  }
+
+  async getAutoFillOverlayVisibility(): Promise<number> {
+    return await this.stateService.getAutoFillOverlayVisibility();
+  }
+
   async clear(userId?: string): Promise<void> {
     if (userId == null || userId == (await this.stateService.getUserId())) {
       this._settings.next({});
diff --git a/libs/common/src/state-migrations/migrate.ts b/libs/common/src/state-migrations/migrate.ts
index 483c4f2e8eb..fd1f3143910 100644
--- a/libs/common/src/state-migrations/migrate.ts
+++ b/libs/common/src/state-migrations/migrate.ts
@@ -11,10 +11,11 @@ import { AddKeyTypeToOrgKeysMigrator } from "./migrations/5-add-key-type-to-org-
 import { RemoveLegacyEtmKeyMigrator } from "./migrations/6-remove-legacy-etm-key";
 import { MoveBiometricAutoPromptToAccount } from "./migrations/7-move-biometric-auto-prompt-to-account";
 import { MoveStateVersionMigrator } from "./migrations/8-move-state-version";
+import { MoveBrowserSettingsToGlobal } from "./migrations/9-move-browser-settings-to-global";
 import { MinVersionMigrator } from "./migrations/min-version";
 
 export const MIN_VERSION = 2;
-export const CURRENT_VERSION = 8;
+export const CURRENT_VERSION = 9;
 export type MinVersion = typeof MIN_VERSION;
 
 export async function migrate(
@@ -38,7 +39,8 @@ export async function migrate(
     .with(AddKeyTypeToOrgKeysMigrator, 4, 5)
     .with(RemoveLegacyEtmKeyMigrator, 5, 6)
     .with(MoveBiometricAutoPromptToAccount, 6, 7)
-    .with(MoveStateVersionMigrator, 7, CURRENT_VERSION)
+    .with(MoveStateVersionMigrator, 7, 8)
+    .with(MoveBrowserSettingsToGlobal, 8, CURRENT_VERSION)
     .migrate(migrationHelper);
 }
 
diff --git a/libs/common/src/state-migrations/migration-builder.spec.ts b/libs/common/src/state-migrations/migration-builder.spec.ts
index fa53544f133..154d89db1ae 100644
--- a/libs/common/src/state-migrations/migration-builder.spec.ts
+++ b/libs/common/src/state-migrations/migration-builder.spec.ts
@@ -17,6 +17,20 @@ describe("MigrationBuilder", () => {
     }
   }
 
+  class TestMigratorWithInstanceMethod extends Migrator<0, 1> {
+    private async instanceMethod(helper: MigrationHelper, value: string) {
+      await helper.set("test", value);
+    }
+
+    async migrate(helper: MigrationHelper): Promise<void> {
+      await this.instanceMethod(helper, "migrate");
+    }
+
+    async rollback(helper: MigrationHelper): Promise<void> {
+      await this.instanceMethod(helper, "rollback");
+    }
+  }
+
   let sut: MigrationBuilder<number>;
 
   beforeEach(() => {
@@ -114,4 +128,9 @@ describe("MigrationBuilder", () => {
       expect(rollback).not.toBeCalled();
     });
   });
+
+  it("should be able to call instance methods", async () => {
+    const helper = new MigrationHelper(0, mock(), mock());
+    await sut.with(TestMigratorWithInstanceMethod, 0, 1).migrate(helper);
+  });
 });
diff --git a/libs/common/src/state-migrations/migration-builder.ts b/libs/common/src/state-migrations/migration-builder.ts
index 776295a6b8f..2747183629c 100644
--- a/libs/common/src/state-migrations/migration-builder.ts
+++ b/libs/common/src/state-migrations/migration-builder.ts
@@ -93,7 +93,7 @@ export class MigrationBuilder<TCurrent extends number = 0> {
     );
     if (shouldMigrate) {
       const method = direction === "up" ? migrator.migrate : migrator.rollback;
-      await method(helper);
+      await method.bind(migrator)(helper);
       helper.info(
         `Migrator ${migrator.constructor.name} (to version ${migrator.toVersion}) migrated - ${direction}`
       );
diff --git a/libs/common/src/state-migrations/migrations/9-move-browser-settings-to-global.spec.ts b/libs/common/src/state-migrations/migrations/9-move-browser-settings-to-global.spec.ts
new file mode 100644
index 00000000000..201c8643a90
--- /dev/null
+++ b/libs/common/src/state-migrations/migrations/9-move-browser-settings-to-global.spec.ts
@@ -0,0 +1,355 @@
+import { mock } from "jest-mock-extended";
+
+import { FakeStorageService } from "../../../spec/fake-storage.service";
+import { MigrationHelper } from "../migration-helper";
+import { Migrator } from "../migrator";
+
+import { MoveBrowserSettingsToGlobal } from "./9-move-browser-settings-to-global";
+
+type TestState = { authenticatedAccounts: string[] } & { [key: string]: unknown };
+
+// This could become a helper available to anyone
+const runMigrator = async <TMigrator extends Migrator<number, number>>(
+  migrator: TMigrator,
+  initalData?: Record<string, unknown>
+): Promise<Record<string, unknown>> => {
+  const fakeStorageService = new FakeStorageService(initalData);
+  const helper = new MigrationHelper(migrator.fromVersion, fakeStorageService, mock());
+  await migrator.migrate(helper);
+  return fakeStorageService.internalStore;
+};
+
+describe("MoveBrowserSettingsToGlobal", () => {
+  const myMigrator = new MoveBrowserSettingsToGlobal(8, 9);
+
+  // This could be the state for a browser client who has never touched the settings or this could
+  // be a different client who doesn't make it possible to toggle these settings
+  it("doesn't set any value to global if there is no equivalent settings on the account", async () => {
+    const testInput: TestState = {
+      authenticatedAccounts: ["user1"],
+      global: {
+        theme: "system", // A real global setting that should persist after migration
+      },
+      user1: {
+        settings: {
+          region: "Self-hosted",
+        },
+      },
+    };
+
+    const output = await runMigrator(myMigrator, testInput);
+
+    // No additions to the global state
+    expect(output["global"]).toEqual({
+      theme: "system",
+    });
+
+    // No additions to user state
+    expect(output["user1"]).toEqual({
+      settings: {
+        region: "Self-hosted",
+      },
+    });
+  });
+
+  // This could be a user who opened up the settings page and toggled the checkbox, since this setting infers undefined
+  // as false this is essentially the default value.
+  it("sets the setting from the users settings if they have toggled the setting but placed it back to it's inferred", async () => {
+    const testInput: TestState = {
+      authenticatedAccounts: ["user1"],
+      global: {
+        theme: "system", // A real global setting that should persist after migration
+      },
+      user1: {
+        settings: {
+          disableAddLoginNotification: false,
+          disableChangedPasswordNotification: false,
+          disableContextMenuItem: false,
+          neverDomains: {
+            "example.com": null,
+          },
+          region: "Self-hosted",
+        },
+      },
+    };
+
+    const output = await runMigrator(myMigrator, testInput);
+
+    // User settings should have moved to global
+    expect(output["global"]).toEqual({
+      theme: "system",
+      disableAddLoginNotification: false,
+      disableChangedPasswordNotification: false,
+      disableContextMenuItem: false,
+      neverDomains: {
+        "example.com": null,
+      },
+    });
+
+    // Migrated settings should be deleted
+    expect(output["user1"]).toEqual({
+      settings: { region: "Self-hosted" },
+    });
+  });
+
+  // The user has set a value and it's not the default, we should respect that choice globally
+  it("should take the only users settings", async () => {
+    const testInput: TestState = {
+      authenticatedAccounts: ["user1"],
+      global: {
+        theme: "system", // A real global setting that should persist after migration
+      },
+      user1: {
+        settings: {
+          disableAddLoginNotification: true,
+          disableChangedPasswordNotification: true,
+          disableContextMenuItem: true,
+          neverDomains: {
+            "example.com": null,
+          },
+          region: "Self-hosted",
+        },
+      },
+    };
+
+    const output = await runMigrator(myMigrator, testInput);
+
+    // The value for the single user value should be set to global
+    expect(output["global"]).toEqual({
+      theme: "system",
+      disableAddLoginNotification: true,
+      disableChangedPasswordNotification: true,
+      disableContextMenuItem: true,
+      neverDomains: {
+        "example.com": null,
+      },
+    });
+
+    expect(output["user1"]).toEqual({
+      settings: { region: "Self-hosted" },
+    });
+  });
+
+  // No browser client at the time of this writing should ever have multiple authenticatedAccounts
+  // but in the bizzare case, we should interpret any user having the feature turned on as the value for
+  // all the accounts.
+  it("should take the false value if there are conflicting choices", async () => {
+    const testInput: TestState = {
+      authenticatedAccounts: ["user1", "user2"],
+      global: {
+        theme: "system", // A real global setting that should persist after migration
+      },
+      user1: {
+        settings: {
+          disableAddLoginNotification: true,
+          disableChangedPasswordNotification: true,
+          disableContextMenuItem: true,
+          neverDomains: {
+            "example.com": null,
+          },
+          region: "Self-hosted",
+        },
+      },
+      user2: {
+        settings: {
+          disableAddLoginNotification: false,
+          disableChangedPasswordNotification: false,
+          disableContextMenuItem: false,
+          neverDomains: {
+            "example2.com": null,
+          },
+          region: "Self-hosted",
+        },
+      },
+    };
+
+    const output = await runMigrator(myMigrator, testInput);
+
+    // The false settings should be respected over the true values
+    // neverDomains should be combined into a single object
+    expect(output["global"]).toEqual({
+      theme: "system",
+      disableAddLoginNotification: false,
+      disableChangedPasswordNotification: false,
+      disableContextMenuItem: false,
+      neverDomains: {
+        "example.com": null,
+        "example2.com": null,
+      },
+    });
+
+    expect(output["user1"]).toEqual({
+      settings: { region: "Self-hosted" },
+    });
+
+    expect(output["user2"]).toEqual({
+      settings: { region: "Self-hosted" },
+    });
+  });
+
+  // Once again, no normal browser should have conflicting values at the time of this comment but:
+  // if one user has toggled the setting back to on and one user has never touched the setting,
+  // persist the false value into the global state.
+  it("should persist the false value if one user has that in their settings", async () => {
+    const testInput: TestState = {
+      authenticatedAccounts: ["user1", "user2"],
+      global: {
+        theme: "system", // A real global setting that should persist after migration
+      },
+      user1: {
+        settings: {
+          region: "Self-hosted",
+        },
+      },
+      user2: {
+        settings: {
+          disableAddLoginNotification: false,
+          disableChangedPasswordNotification: false,
+          disableContextMenuItem: false,
+          neverDomains: {
+            "example.com": null,
+          },
+          region: "Self-hosted",
+        },
+      },
+    };
+
+    const output = await runMigrator(myMigrator, testInput);
+
+    // The false settings should be respected over the true values
+    // neverDomains should be combined into a single object
+    expect(output["global"]).toEqual({
+      theme: "system",
+      disableAddLoginNotification: false,
+      disableChangedPasswordNotification: false,
+      disableContextMenuItem: false,
+      neverDomains: {
+        "example.com": null,
+      },
+    });
+
+    expect(output["user1"]).toEqual({
+      settings: { region: "Self-hosted" },
+    });
+
+    expect(output["user2"]).toEqual({
+      settings: { region: "Self-hosted" },
+    });
+  });
+
+  // Once again, no normal browser should have conflicting values at the time of this comment but:
+  // if one user has toggled the setting off and one user has never touched the setting,
+  // persist the false value into the global state.
+  it("should persist the false value from a user with no settings since undefined is inferred as false", async () => {
+    const testInput: TestState = {
+      authenticatedAccounts: ["user1", "user2"],
+      global: {
+        theme: "system", // A real global setting that should persist after migration
+      },
+      user1: {
+        settings: {
+          region: "Self-hosted",
+        },
+      },
+      user2: {
+        settings: {
+          disableAddLoginNotification: true,
+          disableChangedPasswordNotification: true,
+          disableContextMenuItem: true,
+          neverDomains: {
+            "example.com": null,
+          },
+          region: "Self-hosted",
+        },
+      },
+    };
+
+    const output = await runMigrator(myMigrator, testInput);
+
+    // The false settings should be respected over the true values
+    // neverDomains should be combined into a single object
+    expect(output["global"]).toEqual({
+      theme: "system",
+      disableAddLoginNotification: false,
+      disableChangedPasswordNotification: false,
+      disableContextMenuItem: false,
+      neverDomains: {
+        "example.com": null,
+      },
+    });
+
+    expect(output["user1"]).toEqual({
+      settings: { region: "Self-hosted" },
+    });
+
+    expect(output["user2"]).toEqual({
+      settings: { region: "Self-hosted" },
+    });
+  });
+
+  // This is more realistic, a browser user could have signed into the application and logged out, then signed
+  // into a different account. Pre browser account switching, the state for the user _is_ kept on disk but the account
+  // id of the non-current account isn't saved to the authenticatedAccounts array so we don't have a great way to
+  // get the state and include it in our calculations for what the global state should be.
+  it("only cares about users defined in authenticatedAccounts", async () => {
+    const testInput: TestState = {
+      authenticatedAccounts: ["user1"],
+      global: {
+        theme: "system", // A real global setting that should persist after migration
+      },
+      user1: {
+        settings: {
+          disableAddLoginNotification: true,
+          disableChangedPasswordNotification: true,
+          disableContextMenuItem: true,
+          neverDomains: {
+            "example.com": null,
+          },
+          region: "Self-hosted",
+        },
+      },
+      user2: {
+        settings: {
+          disableAddLoginNotification: false,
+          disableChangedPasswordNotification: false,
+          disableContextMenuItem: false,
+          neverDomains: {
+            "example2.com": null,
+          },
+          region: "Self-hosted",
+        },
+      },
+    };
+
+    const output = await runMigrator(myMigrator, testInput);
+
+    // The true settings should be respected over the false values because that whole users values
+    // shouldn't be respected.
+    // neverDomains should be combined into a single object
+    expect(output["global"]).toEqual({
+      theme: "system",
+      disableAddLoginNotification: true,
+      disableChangedPasswordNotification: true,
+      disableContextMenuItem: true,
+      neverDomains: {
+        "example.com": null,
+      },
+    });
+
+    expect(output["user1"]).toEqual({
+      settings: { region: "Self-hosted" },
+    });
+
+    expect(output["user2"]).toEqual({
+      settings: {
+        disableAddLoginNotification: false,
+        disableChangedPasswordNotification: false,
+        disableContextMenuItem: false,
+        neverDomains: {
+          "example2.com": null,
+        },
+        region: "Self-hosted",
+      },
+    });
+  });
+});
diff --git a/libs/common/src/state-migrations/migrations/9-move-browser-settings-to-global.ts b/libs/common/src/state-migrations/migrations/9-move-browser-settings-to-global.ts
new file mode 100644
index 00000000000..5273c600088
--- /dev/null
+++ b/libs/common/src/state-migrations/migrations/9-move-browser-settings-to-global.ts
@@ -0,0 +1,102 @@
+import { MigrationHelper } from "../migration-helper";
+import { Migrator } from "../migrator";
+
+type NeverDomains = { [id: string]: unknown };
+
+type ExpectedAccountType = {
+  settings?: {
+    neverDomains?: NeverDomains;
+    disableAddLoginNotification?: boolean;
+    disableChangedPasswordNotification?: boolean;
+    disableContextMenuItem?: boolean;
+  };
+};
+
+type TargetGlobalState = {
+  neverDomains?: NeverDomains;
+  disableAddLoginNotification?: boolean;
+  disableChangedPasswordNotification?: boolean;
+  disableContextMenuItem?: boolean;
+};
+
+export class MoveBrowserSettingsToGlobal extends Migrator<8, 9> {
+  // Will first check if any of the accounts have a value from the given accountSelector
+  // if they do have a value it will set that value into global state but if multiple
+  // users have differing values it will prefer the false setting,
+  // if all users have true then it will take true.
+  tryAddSetting(
+    accounts: { userId: string; account: ExpectedAccountType }[],
+    accountSelector: (account: ExpectedAccountType) => boolean | undefined,
+    globalSetter: (value: boolean | undefined) => void
+  ): void {
+    const hasValue = accounts.some(({ account }) => {
+      return accountSelector(account) !== undefined;
+    });
+
+    if (hasValue) {
+      const value = !accounts.some(({ account }) => {
+        return (accountSelector(account) ?? false) === false;
+      });
+
+      globalSetter(value);
+    }
+  }
+
+  async migrate(helper: MigrationHelper): Promise<void> {
+    const global = await helper.get<object>("global");
+
+    const accounts = await helper.getAccounts<ExpectedAccountType>();
+
+    const globalNeverDomainsValue = accounts.reduce((accumulator, { account }) => {
+      const normalizedNeverDomains = account.settings?.neverDomains ?? {};
+      for (const [id, value] of Object.entries(normalizedNeverDomains)) {
+        accumulator ??= {};
+        accumulator[id] = value;
+      }
+      return accumulator;
+    }, undefined as NeverDomains);
+
+    const targetGlobalState: TargetGlobalState = {};
+
+    if (globalNeverDomainsValue != null) {
+      targetGlobalState.neverDomains = globalNeverDomainsValue;
+    }
+
+    this.tryAddSetting(
+      accounts,
+      (a) => a.settings?.disableAddLoginNotification,
+      (v) => (targetGlobalState.disableAddLoginNotification = v)
+    );
+
+    this.tryAddSetting(
+      accounts,
+      (a) => a.settings?.disableChangedPasswordNotification,
+      (v) => (targetGlobalState.disableChangedPasswordNotification = v)
+    );
+
+    this.tryAddSetting(
+      accounts,
+      (a) => a.settings?.disableContextMenuItem,
+      (v) => (targetGlobalState.disableContextMenuItem = v)
+    );
+
+    await helper.set<TargetGlobalState>("global", {
+      ...global,
+      ...targetGlobalState,
+    });
+
+    await Promise.all(
+      accounts.map(async ({ userId, account }) => {
+        delete account.settings?.disableAddLoginNotification;
+        delete account.settings?.disableChangedPasswordNotification;
+        delete account.settings?.disableContextMenuItem;
+        delete account.settings?.neverDomains;
+        await helper.set(userId, account);
+      })
+    );
+  }
+
+  rollback(helper: MigrationHelper): Promise<void> {
+    throw new Error("Method not implemented.");
+  }
+}
diff --git a/libs/common/src/vault/icon/build-cipher-icon.ts b/libs/common/src/vault/icon/build-cipher-icon.ts
new file mode 100644
index 00000000000..88ddf682252
--- /dev/null
+++ b/libs/common/src/vault/icon/build-cipher-icon.ts
@@ -0,0 +1,85 @@
+import { Utils } from "../../platform/misc/utils";
+import { CipherType } from "../enums/cipher-type";
+import { CipherView } from "../models/view/cipher.view";
+
+export function buildCipherIcon(
+  iconsServerUrl: string,
+  cipher: CipherView,
+  isFaviconDisabled: boolean
+) {
+  const imageEnabled = !isFaviconDisabled;
+  let icon;
+  let image;
+  let fallbackImage = "";
+  const cardIcons: Record<string, string> = {
+    Visa: "card-visa",
+    Mastercard: "card-mastercard",
+    Amex: "card-amex",
+    Discover: "card-discover",
+    "Diners Club": "card-diners-club",
+    JCB: "card-jcb",
+    Maestro: "card-maestro",
+    UnionPay: "card-union-pay",
+    RuPay: "card-ru-pay",
+  };
+
+  switch (cipher.type) {
+    case CipherType.Login:
+      icon = "bwi-globe";
+
+      if (cipher.login.uri) {
+        let hostnameUri = cipher.login.uri;
+        let isWebsite = false;
+
+        if (hostnameUri.indexOf("androidapp://") === 0) {
+          icon = "bwi-android";
+          image = null;
+        } else if (hostnameUri.indexOf("iosapp://") === 0) {
+          icon = "bwi-apple";
+          image = null;
+        } else if (
+          imageEnabled &&
+          hostnameUri.indexOf("://") === -1 &&
+          hostnameUri.indexOf(".") > -1
+        ) {
+          hostnameUri = `http://${hostnameUri}`;
+          isWebsite = true;
+        } else if (imageEnabled) {
+          isWebsite = hostnameUri.indexOf("http") === 0 && hostnameUri.indexOf(".") > -1;
+        }
+
+        if (imageEnabled && isWebsite) {
+          try {
+            image = `${iconsServerUrl}/${Utils.getHostname(hostnameUri)}/icon.png`;
+            fallbackImage = "images/bwi-globe.png";
+          } catch (e) {
+            // Ignore error since the fallback icon will be shown if image is null.
+          }
+        }
+      } else {
+        image = null;
+      }
+      break;
+    case CipherType.SecureNote:
+      icon = "bwi-sticky-note";
+      break;
+    case CipherType.Card:
+      icon = "bwi-credit-card";
+      if (imageEnabled && cipher.card.brand in cardIcons) {
+        icon = `credit-card-icon ${cardIcons[cipher.card.brand]}`;
+      }
+      break;
+    case CipherType.Identity:
+      icon = "bwi-id-card";
+      break;
+    default:
+      break;
+  }
+
+  return {
+    imageEnabled,
+    image,
+    fallbackImage,
+    icon,
+  };
+}
diff --git a/libs/common/src/vault/models/view/cipher.view.ts b/libs/common/src/vault/models/view/cipher.view.ts
index 0667519be7e..de3a1a62bf3 100644
--- a/libs/common/src/vault/models/view/cipher.view.ts
+++ b/libs/common/src/vault/models/view/cipher.view.ts
@@ -84,7 +84,7 @@ export class CipherView implements View, InitializerMetadata {
   }
 
   get subTitle(): string {
-    return this.item.subTitle;
+    return this.item?.subTitle;
   }
 
   get hasPasswordHistory(): boolean {
@@ -124,7 +124,7 @@ export class CipherView implements View, InitializerMetadata {
   }
 
   get linkedFieldOptions() {
-    return this.item.linkedFieldOptions;
+    return this.item?.linkedFieldOptions;
   }
 
   linkedFieldValue(id: LinkedIdType) {
diff --git a/libs/common/src/vault/services/fido2/fido2-client.service.ts b/libs/common/src/vault/services/fido2/fido2-client.service.ts
index cdc8a88fd23..a810d0accd6 100644
--- a/libs/common/src/vault/services/fido2/fido2-client.service.ts
+++ b/libs/common/src/vault/services/fido2/fido2-client.service.ts
@@ -196,7 +196,7 @@ export class Fido2ClientService implements Fido2ClientServiceAbstraction {
       authData: Fido2Utils.bufferToString(makeCredentialResult.authData),
       clientDataJSON: Fido2Utils.bufferToString(clientDataJSONBytes),
       publicKeyAlgorithm: makeCredentialResult.publicKeyAlgorithm,
-      transports: ["internal"],
+      transports: params.rp.id === "google.com" ? ["internal", "usb"] : ["internal"],
     };
   }
 
diff --git a/libs/components/src/checkbox/checkbox.component.ts b/libs/components/src/checkbox/checkbox.component.ts
index 5e1e17a5cac..82113b68c5a 100644
--- a/libs/components/src/checkbox/checkbox.component.ts
+++ b/libs/components/src/checkbox/checkbox.component.ts
@@ -25,6 +25,7 @@ export class CheckboxComponent implements BitFormControlAbstraction {
     "tw-w-3.5",
     "tw-mr-1.5",
     "tw-bottom-[-1px]", // Fix checkbox looking off-center
+    "tw-flex-none", // Flexbox fix for bit-form-control
 
     "before:tw-content-['']",
     "before:tw-block",
diff --git a/libs/components/src/checkbox/checkbox.stories.ts b/libs/components/src/checkbox/checkbox.stories.ts
index 11ef32eac77..86b682240da 100644
--- a/libs/components/src/checkbox/checkbox.stories.ts
+++ b/libs/components/src/checkbox/checkbox.stories.ts
@@ -1,5 +1,12 @@
 import { Component, Input } from "@angular/core";
-import { FormsModule, ReactiveFormsModule, FormBuilder, Validators } from "@angular/forms";
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  FormBuilder,
+  Validators,
+  FormGroup,
+  FormControl,
+} from "@angular/forms";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/src/platform/abstractions/i18n.service";
@@ -15,7 +22,8 @@ const template = `
       <input type="checkbox" bitCheckbox formControlName="checkbox">
       <bit-label>Click me</bit-label>
     </bit-form-control>
-  </form>`;
+  </form>
+`;
 
 @Component({
   selector: "app-example",
@@ -89,6 +97,40 @@ export const Default: Story = {
   },
 };
 
+export const Hint: Story = {
+  render: (args) => ({
+    props: {
+      formObj: new FormGroup({
+        checkbox: new FormControl(false),
+      }),
+    },
+    template: `
+      <form [formGroup]="formObj">
+        <bit-form-control>
+          <input type="checkbox" bitCheckbox formControlName="checkbox">
+          <bit-label>Really long value that never ends.</bit-label>
+          <bit-hint>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis consequat enim vitae elementum.
+            Ut non odio est. Duis eu nisi ultrices, porttitor lorem eget, ornare libero. Fusce ex ante, consequat ac
+            sem et, euismod placerat tellus.
+          </bit-hint>
+        </bit-form-control>
+      </form>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: template,
+      },
+    },
+  },
+  args: {
+    checked: false,
+    disabled: false,
+  },
+};
+
 export const Custom: Story = {
   render: (args) => ({
     props: args,
diff --git a/libs/components/src/form-control/form-control.component.html b/libs/components/src/form-control/form-control.component.html
index 9e31bc9ec40..91bba1719df 100644
--- a/libs/components/src/form-control/form-control.component.html
+++ b/libs/components/src/form-control/form-control.component.html
@@ -1,13 +1,13 @@
 <label [class]="labelClasses">
   <ng-content></ng-content>
   <span [class]="labelContentClasses">
-    <ng-content select="bit-label"></ng-content>
-    <span *ngIf="required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
+    <span>
+      <ng-content select="bit-label"></ng-content>
+      <span *ngIf="required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
+    </span>
+    <ng-content select="bit-hint" *ngIf="!hasError"></ng-content>
   </span>
 </label>
-<div>
-  <ng-content select="bit-hint" *ngIf="!hasError"></ng-content>
-</div>
 <div *ngIf="hasError" class="tw-mt-1 tw-text-danger">
   <i class="bwi bwi-error"></i> {{ displayError }}
 </div>
diff --git a/libs/components/src/form-control/form-control.component.ts b/libs/components/src/form-control/form-control.component.ts
index 934622a4a2a..b61dee709c5 100644
--- a/libs/components/src/form-control/form-control.component.ts
+++ b/libs/components/src/form-control/form-control.component.ts
@@ -20,22 +20,36 @@ export class FormControlComponent {
     this._inline = coerceBooleanProperty(value);
   }
 
+  private _disableMargin = false;
+  @Input() set disableMargin(value: boolean | "") {
+    this._disableMargin = coerceBooleanProperty(value);
+  }
+  get disableMargin() {
+    return this._disableMargin;
+  }
+
   @ContentChild(BitFormControlAbstraction) protected formControl: BitFormControlAbstraction;
 
   @HostBinding("class") get classes() {
-    return ["tw-mb-6"].concat(this.inline ? ["tw-inline-block", "tw-mr-4"] : ["tw-block"]);
+    return []
+      .concat(this.inline ? ["tw-inline-block", "tw-mr-4"] : ["tw-block"])
+      .concat(this.disableMargin ? [] : ["tw-mb-6"]);
   }
 
   constructor(private i18nService: I18nService) {}
 
   protected get labelClasses() {
-    return ["tw-transition", "tw-select-none", "tw-mb-0"].concat(
-      this.formControl.disabled ? "tw-cursor-auto" : "tw-cursor-pointer"
-    );
+    return [
+      "tw-transition",
+      "tw-select-none",
+      "tw-mb-0",
+      "tw-inline-flex",
+      "tw-items-baseline",
+    ].concat(this.formControl.disabled ? "tw-cursor-auto" : "tw-cursor-pointer");
   }
 
   protected get labelContentClasses() {
-    return ["tw-font-semibold"].concat(
+    return ["tw-inline-flex", "tw-flex-col", "tw-font-semibold"].concat(
       this.formControl.disabled ? "tw-text-muted" : "tw-text-main"
     );
   }
diff --git a/libs/components/src/form-control/hint.component.ts b/libs/components/src/form-control/hint.component.ts
index 59d01a89da5..e5b285c0183 100644
--- a/libs/components/src/form-control/hint.component.ts
+++ b/libs/components/src/form-control/hint.component.ts
@@ -6,7 +6,7 @@ let nextId = 0;
 @Directive({
   selector: "bit-hint",
   host: {
-    class: "tw-text-muted tw-inline-block tw-mt-1",
+    class: "tw-text-muted tw-font-normal tw-inline-block tw-mt-1",
   },
 })
 export class BitHintComponent {
diff --git a/libs/components/src/radio-button/radio-button.component.html b/libs/components/src/radio-button/radio-button.component.html
index 0d455596536..04ed6189a58 100644
--- a/libs/components/src/radio-button/radio-button.component.html
+++ b/libs/components/src/radio-button/radio-button.component.html
@@ -1,15 +1,15 @@
-<bit-form-control inline>
+<bit-form-control [inline]="!block" disableMargin>
   <input
     type="radio"
     bitRadio
     [id]="inputId"
-    [name]="name"
     [disabled]="groupDisabled || disabled"
     [value]="value"
     [checked]="selected"
     (change)="onInputChange()"
     (blur)="onBlur()"
   />
+
   <ng-content select="bit-label" ngProjectAs="bit-label"></ng-content>
   <ng-content select="bit-hint" ngProjectAs="bit-hint"></ng-content>
 </bit-form-control>
diff --git a/libs/components/src/radio-button/radio-button.component.ts b/libs/components/src/radio-button/radio-button.component.ts
index 8da02488d47..967718f4079 100644
--- a/libs/components/src/radio-button/radio-button.component.ts
+++ b/libs/components/src/radio-button/radio-button.component.ts
@@ -10,6 +10,10 @@ let nextId = 0;
 })
 export class RadioButtonComponent {
   @HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;
+  @HostBinding("class") get classList() {
+    return [this.block ? "tw-block" : "tw-inline-block", "tw-mb-2"];
+  }
+
   @Input() value: unknown;
   @Input() disabled = false;
 
@@ -31,6 +35,10 @@ export class RadioButtonComponent {
     return this.groupComponent.disabled;
   }
 
+  get block() {
+    return this.groupComponent.block;
+  }
+
   protected onInputChange() {
     this.groupComponent.onInputChange(this.value);
   }
diff --git a/libs/components/src/radio-button/radio-button.module.ts b/libs/components/src/radio-button/radio-button.module.ts
index 11b5bc3732a..21fd9427046 100644
--- a/libs/components/src/radio-button/radio-button.module.ts
+++ b/libs/components/src/radio-button/radio-button.module.ts
@@ -2,13 +2,14 @@ import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { FormControlModule } from "../form-control";
+import { SharedModule } from "../shared";
 
 import { RadioButtonComponent } from "./radio-button.component";
 import { RadioGroupComponent } from "./radio-group.component";
 import { RadioInputComponent } from "./radio-input.component";
 
 @NgModule({
-  imports: [CommonModule, FormControlModule],
+  imports: [CommonModule, SharedModule, FormControlModule],
   declarations: [RadioInputComponent, RadioButtonComponent, RadioGroupComponent],
   exports: [FormControlModule, RadioInputComponent, RadioButtonComponent, RadioGroupComponent],
 })
diff --git a/libs/components/src/radio-button/radio-button.stories.ts b/libs/components/src/radio-button/radio-button.stories.ts
index da9d9d6b2ab..f9b00799369 100644
--- a/libs/components/src/radio-button/radio-button.stories.ts
+++ b/libs/components/src/radio-button/radio-button.stories.ts
@@ -1,5 +1,5 @@
 import { FormsModule, ReactiveFormsModule, FormControl, FormGroup } from "@angular/forms";
-import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -67,6 +67,37 @@ export const Inline: Story = {
   }),
 };
 
+export const InlineHint: Story = {
+  render: () => ({
+    props: {
+      formObj: new FormGroup({
+        radio: new FormControl(0),
+      }),
+    },
+    template: `
+    <form [formGroup]="formObj">
+      <bit-radio-group formControlName="radio" aria-label="Example radio group">
+        <bit-label>Group of radio buttons</bit-label>
+
+        <bit-radio-button id="radio-first" [value]="0">
+          <bit-label>First</bit-label>
+        </bit-radio-button>
+
+        <bit-radio-button id="radio-second" [value]="1">
+          <bit-label>Second</bit-label>
+        </bit-radio-button>
+
+        <bit-radio-button id="radio-third" [value]="2">
+          <bit-label>Third</bit-label>
+        </bit-radio-button>
+
+        <bit-hint>This is a hint for the radio group</bit-hint>
+      </bit-radio-group>
+    </form>
+    `,
+  }),
+};
+
 export const Block: Story = {
   render: () => ({
     props: {
@@ -76,20 +107,20 @@ export const Block: Story = {
     },
     template: `
       <form [formGroup]="formObj">
-        <bit-radio-group formControlName="radio" aria-label="Example radio group">
+        <bit-radio-group formControlName="radio" aria-label="Example radio group" [block]="true">
           <bit-label>Group of radio buttons</bit-label>
   
-          <bit-radio-button id="radio-first" class="tw-block" [value]="0">
+          <bit-radio-button id="radio-first" [value]="0">
             <bit-label>First</bit-label>
             <bit-hint>This is a hint for the first option</bit-hint>
           </bit-radio-button>
   
-          <bit-radio-button id="radio-second" class="tw-block" [value]="1">
+          <bit-radio-button id="radio-second" [value]="1">
             <bit-label>Second</bit-label>
             <bit-hint>This is a hint for the second option</bit-hint>
           </bit-radio-button>
   
-          <bit-radio-button id="radio-third" class="tw-block" [value]="2">
+          <bit-radio-button id="radio-third" [value]="2">
             <bit-label>Third</bit-label>
             <bit-hint>This is a hint for the third option</bit-hint>
           </bit-radio-button>
@@ -98,3 +129,37 @@ export const Block: Story = {
     `,
   }),
 };
+
+export const BlockHint: Story = {
+  render: () => ({
+    props: {
+      formObj: new FormGroup({
+        radio: new FormControl(0),
+      }),
+    },
+    template: `
+      <form [formGroup]="formObj">
+        <bit-radio-group formControlName="radio" aria-label="Example radio group" [block]="true">
+          <bit-label>Group of radio buttons</bit-label>
+
+          <bit-radio-button id="radio-first" [value]="0">
+            <bit-label>First</bit-label>
+            <bit-hint>This is a hint for the first option</bit-hint>
+          </bit-radio-button>
+
+          <bit-radio-button id="radio-second" [value]="1">
+            <bit-label>Second</bit-label>
+            <bit-hint>This is a hint for the second option</bit-hint>
+          </bit-radio-button>
+
+          <bit-radio-button id="radio-third" [value]="2">
+            <bit-label>Third</bit-label>
+            <bit-hint>This is a hint for the third option</bit-hint>
+          </bit-radio-button>
+
+          <bit-hint>This is a hint for the radio group</bit-hint>
+        </bit-radio-group>
+      </form>
+    `,
+  }),
+};
diff --git a/libs/components/src/radio-button/radio-group.component.html b/libs/components/src/radio-button/radio-group.component.html
index 2931020b2b8..128a723d461 100644
--- a/libs/components/src/radio-button/radio-group.component.html
+++ b/libs/components/src/radio-button/radio-group.component.html
@@ -2,6 +2,7 @@
   <fieldset>
     <legend class="tw-mb-1 tw-block tw-text-sm tw-font-semibold tw-text-main">
       <ng-content select="bit-label"></ng-content>
+      <span *ngIf="required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
     </legend>
     <ng-container *ngTemplateOutlet="content"></ng-container>
   </fieldset>
@@ -11,4 +12,9 @@
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </ng-container>
 
-<ng-template #content><ng-content></ng-content></ng-template>
+<ng-template #content>
+  <div>
+    <ng-content></ng-content>
+  </div>
+  <ng-content select="bit-hint" ngProjectAs="bit-hint"></ng-content>
+</ng-template>
diff --git a/libs/components/src/radio-button/radio-group.component.ts b/libs/components/src/radio-button/radio-group.component.ts
index 4b882303941..6a93ee07a6b 100644
--- a/libs/components/src/radio-button/radio-group.component.ts
+++ b/libs/components/src/radio-button/radio-group.component.ts
@@ -1,5 +1,5 @@
 import { Component, ContentChild, HostBinding, Input, Optional, Self } from "@angular/core";
-import { ControlValueAccessor, NgControl } from "@angular/forms";
+import { ControlValueAccessor, NgControl, Validators } from "@angular/forms";
 
 import { BitLabel } from "../form-control/label.directive";
 
@@ -21,8 +21,11 @@ export class RadioGroupComponent implements ControlValueAccessor {
     this._name = value;
   }
 
+  @Input() block = false;
+
   @HostBinding("attr.role") role = "radiogroup";
   @HostBinding("attr.id") @Input() id = `bit-radio-group-${nextId++}`;
+  @HostBinding("class") classList = ["tw-block", "tw-mb-4"];
 
   @ContentChild(BitLabel) protected label: BitLabel;
 
@@ -32,6 +35,10 @@ export class RadioGroupComponent implements ControlValueAccessor {
     }
   }
 
+  get required() {
+    return this.ngControl?.control?.hasValidator(Validators.required) ?? false;
+  }
+
   // ControlValueAccessor
   onChange: (value: unknown) => void;
   onTouched: () => void;
diff --git a/libs/components/src/radio-button/radio-input.component.ts b/libs/components/src/radio-button/radio-input.component.ts
index bc767add6e5..8b36cbf5ed7 100644
--- a/libs/components/src/radio-button/radio-input.component.ts
+++ b/libs/components/src/radio-button/radio-input.component.ts
@@ -29,6 +29,7 @@ export class RadioInputComponent implements BitFormControlAbstraction {
     "tw-h-3.5",
     "tw-mr-1.5",
     "tw-bottom-[-1px]", // Fix checkbox looking off-center
+    "tw-flex-none", // Flexbox fix for bit-form-control
 
     "hover:tw-border-2",
     "[&>label:hover]:tw-border-2",
diff --git a/libs/components/src/stories/migration.mdx b/libs/components/src/stories/migration.mdx
new file mode 100644
index 00000000000..730cfdb412f
--- /dev/null
+++ b/libs/components/src/stories/migration.mdx
@@ -0,0 +1,214 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Documentation/Migration" />
+
+# Migrating to the Component Library
+
+You have been tasked with migrating a component to use the CL. What does that entail?
+
+## Getting Started
+
+Before progressing here, please ensure that...
+
+- You have fully setup your dev environment as described in the
+  [contributing docs](https://contributing.bitwarden.com/).
+- You are familiar with [Angular reactive forms](https://angular.io/guide/reactive-forms).
+- You are familiar with [Tailwind](https://tailwindcss.com/docs/utility-first).
+
+## Background
+
+The design of Bitwarden is in flux. At the time of writing, the frontend codebase uses a mix of
+multiple UI frameworks: Bootstrap, custom "box" styles, and this component library, which is built
+on top of Tailwind. In short, the "CL migration" is a move to only use the CL and remove everything
+else.
+
+This is very important work. Centralizing around a shared design system will:
+
+- improve user experience by utilizing consistent patterns
+- improve developer experience by reducing custom complex UI code
+- improve dev & design velocity by having a central location to make UI/UX changes that impact the
+  entire project
+
+## Success Criteria
+
+Follow these steps to fully migrate a component.
+
+### Use Storybook
+
+Don't recreate the wheel.
+
+After reviewing a design, consult this Storybook to determine if there is a component built for your
+usecase. Don't waste effort styling a button or building a popover menu from scratch--we already
+have those. If a component isn't flexible enough or doesn't exist for your usecase, contact Will
+Martin.
+
+### Use Tailwind
+
+Only use Tailwind for styling. No Bootstrap or other custom CSS is allowed.
+
+This is easy to verify. Bitwarden prefixes all Tailwind classes with `tw-`. If you see a class
+without this prefix, it probably shouldn't be there.
+
+<div class="tw-bg-danger-500/10 tw-p-4">
+  <span class="tw-font-bold tw-text-danger">Bad (Bootstrap)</span>
+  ```html
+  <div class="mb-2"></div>
+  ```
+</div>
+
+<div class="tw-bg-success-500/10 tw-p-4">
+  <span class="tw-font-bold tw-text-success">Good (Tailwind)</span>
+  ```html
+  <div class="tw-mb-2"></div>
+  ```
+</div>
+
+**Exception:** Icon font classes, prefixed with `bwi`, are allowed.
+
+<div class="tw-bg-success-500/10 tw-p-4">
+  <span class="tw-font-bold tw-text-success">Good (Icons)</span>
+  ```html
+  <i class="bwi bwi-spinner bwi-lg bwi-spin" aria-hidden="true"></i>
+  ```
+</div>
+
+### Use Reactive Forms
+
+The CL has form components that integrate with Angular's reactive forms: `bit-form-field`,
+`bitSubmit`, `bit-form-control`, etc. All forms should be migrated from template-drive forms to
+reactive forms to make use of these components. Review the
+[form component docs](?path=/docs/component-library-form--docs).
+
+<div class="tw-bg-danger-500/10 tw-p-4">
+    <span class="tw-text-danger tw-font-bold">Bad</span>
+    ```html
+    <form #form (ngSubmit)="submit()">
+        ...
+    </form>
+    ```
+</div>
+
+<div class="tw-bg-success-500/10 tw-p-4">
+    <span class="tw-text-success tw-font-bold">Good</span>
+    ```html
+    <form [formGroup]="formGroup" [bitSubmit]="submit">
+        ...
+    </form>
+    ```
+</div>
+
+### Dialogs
+
+Legacy Bootstrap modals use the `ModalService`. These should be converted to use the `DialogService`
+and it's [related CL components](?path=/docs/component-library-dialogs--docs). Components that are
+fully migrated should have no reference to the `ModalService`.
+
+1. Update the template to use CL components:
+
+<div class="tw-bg-danger-500/10 tw-p-4">
+    ```html
+    <!-- FooDialogComponent -->
+    <div class="modal fade" role="dialog" aria-modal="true">...</div>
+    ```
+</div>
+
+<div class="tw-bg-success-500/10 tw-p-4">
+    ```html
+    <!-- FooDialogComponent -->
+    <bit-dialog>...</bit-dialog>
+    ```
+</div>
+
+2. Create a static `open` method on the component, that calls `DialogService.open`:
+
+<div class="tw-bg-success-500/10 tw-p-4">
+    ```ts
+      export class FooDialogComponent {
+        //...
+
+        static open(dialogService: DialogService) {
+          return dialogService.open(DeleteAccountComponent);
+        }
+      }
+    ```
+
+</div>
+
+3. If you need to pass data into the dialog, pass it to `open` as a parameter and inject
+   `DIALOG_DATA` into the component's constructor.
+
+<div class="tw-bg-success-500/10 tw-p-4">
+    ```ts
+    export type FooDialogParams = {
+      bar: string;
+    }
+
+    export class FooDialogComponent {
+      constructor(@Inject(DIALOG_DATA) protected params: FooDialogParams) {}
+
+      static open(dialogService: DialogService, data: FooDialogParams) {
+        return dialogService.open(DeleteAccountComponent, { data });
+      }
+    }
+    ```
+
+</div>
+
+4. Replace calls to `ModalService.open` or `ModalService.openViewRef` with the newly created static
+   `open` method:
+
+<div class="tw-bg-danger-500/10 tw-p-4">`this.modalService.open(FooDialogComponent);`</div>
+
+<div class="tw-bg-success-500/10 tw-p-4">`FooDialogComponent.open(this.dialogService);`</div>
+
+## Examples
+
+The following examples come from accross the Bitwarden codebase.
+
+### 1.) AboutComponent
+
+Codeowner: Platform
+
+https://github.com/bitwarden/clients/pull/6301/files
+
+This migration updates a `ModalService` component to the `DialogService`.
+
+**Note:** Most of the internal markup of this component was unchanged, aside from the removal of
+defunct Bootstrap classes.
+
+### 2.) Auth
+
+Codeowner: Auth
+
+https://github.com/bitwarden/clients/pull/5377
+
+This PR also does some general refactoring, the main relevant change can be seen here:
+
+[Old template](https://github.com/bitwarden/clients/pull/5377/files#diff-4fcab9ffa4ed26904c53da3bd130e346986576f2372e90b0f66188c809f9284d)
+-->
+[New template](https://github.com/bitwarden/clients/pull/5377/files#diff-cb93c74c828b9b49dc7869cc0324f5f7d6609da6f72e38ac6baba6d5b6384327)
+
+Updates a dialog, similar to example 1, but also adds CL form components and Angular Reactive Forms.
+
+### 3.) AC
+
+Codeowner: Admin Console
+
+https://github.com/bitwarden/clients/pull/5417
+
+Migrates dialog, form, buttons, and a table.
+
+### 4.) Vault
+
+Codeowner: Vault
+
+https://github.com/bitwarden/clients/pull/5648
+
+Some of our components are shared between multiple clients (web, desktop, and the browser extension)
+through the use of inheritance. This PR updates the _web_ template of a cross-client component to
+use Tailwind and the CL, and updates the base component implementation to use reactive forms,
+without updating the desktop or browser templates.
+
+## Questions
+
+Please direct any development questions to Will Martin. Thank you!
diff --git a/libs/importer/src/importers/lastpass/access/vault.ts b/libs/importer/src/importers/lastpass/access/vault.ts
index fc38fab8714..5f614ebb840 100644
--- a/libs/importer/src/importers/lastpass/access/vault.ts
+++ b/libs/importer/src/importers/lastpass/access/vault.ts
@@ -142,9 +142,11 @@ export class Vault {
     );
     if (response.status === HttpStatusCode.Ok) {
       const json = await response.json();
-      const k1 = json?.extensions?.LastPassK1 as string;
-      if (k1 != null) {
-        return Utils.fromB64ToArray(k1);
+      if (json?.extensions != null && json.extensions.length > 0) {
+        const k1 = json.extensions[0].LastPassK1 as string;
+        if (k1 != null) {
+          return Utils.fromB64ToArray(k1);
+        }
       }
     }
     return null;
diff --git a/package-lock.json b/package-lock.json
index cfa0563a871..571434e8c0f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -64,6 +64,7 @@
         "proper-lockfile": "4.1.2",
         "qrious": "4.0.2",
         "rxjs": "7.8.1",
+        "tabbable": "^6.2.0",
         "tldts": "6.0.14",
         "utf-8-validate": "5.0.10",
         "zone.js": "0.12.0",
@@ -113,6 +114,7 @@
         "@types/zxcvbn": "4.4.1",
         "@typescript-eslint/eslint-plugin": "5.62.0",
         "@typescript-eslint/parser": "5.62.0",
+        "@webcomponents/custom-elements": "^1.6.0",
         "autoprefixer": "10.4.15",
         "base64-loader": "1.0.0",
         "buffer": "6.0.3",
@@ -15271,6 +15273,12 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@webcomponents/custom-elements": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@webcomponents/custom-elements/-/custom-elements-1.6.0.tgz",
+      "integrity": "sha512-CqTpxOlUCPWRNUPZDxT5v2NnHXA4oox612iUGnmTUGQFhZ1Gkj8kirtl/2wcF6MqX7+PqqicZzOCBKKfIn0dww==",
+      "dev": true
+    },
     "node_modules/@webpack-cli/configtest": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
@@ -37297,6 +37305,11 @@
       "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==",
       "dev": true
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
diff --git a/package.json b/package.json
index 104af6ded10..34f9d217b81 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "@types/zxcvbn": "4.4.1",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
+    "@webcomponents/custom-elements": "1.6.0",
     "autoprefixer": "10.4.15",
     "base64-loader": "1.0.0",
     "buffer": "6.0.3",
@@ -196,6 +197,7 @@
     "proper-lockfile": "4.1.2",
     "qrious": "4.0.2",
     "rxjs": "7.8.1",
+    "tabbable": "6.2.0",
     "tldts": "6.0.14",
     "utf-8-validate": "5.0.10",
     "zone.js": "0.12.0",