diff --git a/browser/components/firefoxview/firefox-view-tabs-setup-manager.sys.mjs b/browser/components/firefoxview/firefox-view-tabs-setup-manager.sys.mjs
index 364af7a1786f..a4ffe6d3b56f 100644
--- a/browser/components/firefoxview/firefox-view-tabs-setup-manager.sys.mjs
+++ b/browser/components/firefoxview/firefox-view-tabs-setup-manager.sys.mjs
@@ -15,6 +15,7 @@ const { XPCOMUtils } = ChromeUtils.importESModule(
 
 const lazy = {};
 XPCOMUtils.defineLazyModuleGetters(lazy, {
+  Log: "resource://gre/modules/Log.jsm",
   UIState: "resource://services-sync/UIState.jsm",
   SyncedTabs: "resource://services-sync/SyncedTabs.jsm",
 });
@@ -26,7 +27,11 @@ XPCOMUtils.defineLazyGetter(lazy, "fxAccounts", () => {
 
 const SYNC_TABS_PREF = "services.sync.engine.tabs";
 const RECENT_TABS_SYNC = "services.sync.lastTabFetch";
+const MOBILE_PROMO_DISMISSED_PREF =
+  "browser.tabs.firefox-view.mobilePromo.dismissed";
+const LOGGING_PREF = "browser.tabs.firefox-view.logLevel";
 const TOPIC_SETUPSTATE_CHANGED = "firefox-view.setupstate.changed";
+const TOPIC_DEVICELIST_UPDATED = "fxaccounts:devicelist_updated";
 
 function openTabInWindow(window, url) {
   const {
@@ -40,31 +45,7 @@ export const TabsSetupFlowManager = new (class {
     this.QueryInterface = ChromeUtils.generateQI(["nsIObserver"]);
 
     this.setupState = new Map();
-    this._currentSetupStateName = "";
-
-    Services.obs.addObserver(this, lazy.UIState.ON_UPDATE);
-    Services.obs.addObserver(this, "fxaccounts:device_connected");
-    Services.obs.addObserver(this, "fxaccounts:device_disconnected");
-
-    // this.syncTabsPrefEnabled will track the value of the tabs pref
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      "syncTabsPrefEnabled",
-      SYNC_TABS_PREF,
-      false,
-      () => {
-        this.maybeUpdateUI();
-      }
-    );
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      "lastTabFetch",
-      RECENT_TABS_SYNC,
-      false,
-      () => {
-        this.maybeUpdateUI();
-      }
-    );
+    this.resetInternalState();
 
     this.registerSetupState({
       uiStateIndex: 0,
@@ -76,7 +57,7 @@ export const TabsSetupFlowManager = new (class {
     // TODO: handle offline, sync service not ready or available
     this.registerSetupState({
       uiStateIndex: 1,
-      name: "connect-mobile-device",
+      name: "connect-secondary-device",
       exitConditions: () => {
         return this.secondaryDeviceConnected;
       },
@@ -109,26 +90,81 @@ export const TabsSetupFlowManager = new (class {
       },
     });
 
-    // attempting to resolve the fxa user is a proxy for readiness
-    lazy.fxAccounts.getSignedInUser().then(() => {
-      this.maybeUpdateUI();
-    });
+    Services.obs.addObserver(this, lazy.UIState.ON_UPDATE);
+    Services.obs.addObserver(this, TOPIC_DEVICELIST_UPDATED);
+
+    // this.syncTabsPrefEnabled will track the value of the tabs pref
+    XPCOMUtils.defineLazyPreferenceGetter(
+      this,
+      "syncTabsPrefEnabled",
+      SYNC_TABS_PREF,
+      false,
+      () => {
+        this._uiUpdateNeeded = true;
+        this.maybeUpdateUI();
+      }
+    );
+    XPCOMUtils.defineLazyPreferenceGetter(
+      this,
+      "lastTabFetch",
+      RECENT_TABS_SYNC,
+      false,
+      () => {
+        this._uiUpdateNeeded = true;
+        this.maybeUpdateUI();
+      }
+    );
+    XPCOMUtils.defineLazyPreferenceGetter(
+      this,
+      "mobilePromoDismissedPref",
+      MOBILE_PROMO_DISMISSED_PREF,
+      false,
+      () => {
+        this._uiUpdateNeeded = true;
+        this.maybeUpdateUI();
+      }
+    );
+
+    this._uiUpdateNeeded = true;
+    if (this.fxaSignedIn) {
+      this.refreshDevices();
+    }
+    this.maybeUpdateUI();
+  }
+
+  resetInternalState() {
+    // assign initial values for all the managed internal properties
+    this._currentSetupStateName = "not-signed-in";
+    this._shouldShowSuccessConfirmation = false;
+    this._didShowMobilePromo = false;
+    this._uiUpdateNeeded = true;
+
+    // keep track of what is connected so we can respond to changes
+    this._deviceStateSnapshot = {
+      mobileDeviceConnected: this.mobileDeviceConnected,
+      secondaryDeviceConnected: this.secondaryDeviceConnected,
+    };
   }
   uninit() {
     Services.obs.removeObserver(this, lazy.UIState.ON_UPDATE);
-    Services.obs.removeObserver(this, "fxaccounts:device_connected");
-    Services.obs.removeObserver(this, "fxaccounts:device_disconnected");
+    Services.obs.removeObserver(this, TOPIC_DEVICELIST_UPDATED);
+  }
+  get currentSetupState() {
+    return this.setupState.get(this._currentSetupStateName);
   }
   get uiStateIndex() {
-    const state =
-      this._currentSetupStateName &&
-      this.setupState.get(this._currentSetupStateName);
-    return state ? state.uiStateIndex : -1;
+    return this.currentSetupState.uiStateIndex;
   }
   get fxaSignedIn() {
-    return lazy.UIState.get().status === lazy.UIState.STATUS_SIGNED_IN;
+    let { UIState } = lazy;
+    return (
+      UIState.isReady() && UIState.get().status === UIState.STATUS_SIGNED_IN
+    );
   }
   get secondaryDeviceConnected() {
+    if (!this.fxaSignedIn) {
+      return false;
+    }
     let recentDevices = lazy.fxAccounts.device?.recentDeviceList?.length;
     return recentDevices > 1;
   }
@@ -139,6 +175,41 @@ export const TabsSetupFlowManager = new (class {
       lazy.SyncedTabs.TABS_FRESH_ENOUGH_INTERVAL_SECONDS
     );
   }
+  get mobileDeviceConnected() {
+    if (!this.fxaSignedIn) {
+      return false;
+    }
+    let mobileClients = lazy.fxAccounts.device.recentDeviceList?.filter(
+      device => device.type == "mobile"
+    );
+    return mobileClients?.length > 0;
+  }
+  get shouldShowMobilePromo() {
+    return (
+      this.currentSetupState.uiStateIndex >= 3 &&
+      !this.mobileDeviceConnected &&
+      !this.mobilePromoDismissedPref
+    );
+  }
+  get shouldShowMobileConnectedSuccess() {
+    return (
+      this.currentSetupState.uiStateIndex >= 3 &&
+      this._shouldShowSuccessConfirmation &&
+      this.mobileDeviceConnected
+    );
+  }
+  get logger() {
+    if (!this._log) {
+      let setupLog = lazy.Log.repository.getLogger("FirefoxView.TabsSetup");
+      setupLog.manageLevelFromPref(LOGGING_PREF);
+      setupLog.addAppender(
+        new lazy.Log.ConsoleAppender(new lazy.Log.BasicFormatter())
+      );
+      this._log = setupLog;
+    }
+    return this._log;
+  }
+
   registerSetupState(state) {
     this.setupState.set(state.name, state);
   }
@@ -146,16 +217,60 @@ export const TabsSetupFlowManager = new (class {
   async observe(subject, topic, data) {
     switch (topic) {
       case lazy.UIState.ON_UPDATE:
+        this.logger.debug("Handling UIState update");
         this.maybeUpdateUI();
         break;
-      case "fxaccounts:device_connected":
-      case "fxaccounts:device_disconnected":
-        await lazy.fxAccounts.device.refreshDeviceList();
+      case TOPIC_DEVICELIST_UPDATED:
+        this.logger.debug("Handling observer notification:", topic, data);
+        this.refreshDevices();
         this.maybeUpdateUI();
         break;
     }
   }
 
+  refreshDevices() {
+    // compare new values to the previous values
+    const mobileDeviceConnected = this.mobileDeviceConnected;
+    const secondaryDeviceConnected = this.secondaryDeviceConnected;
+
+    this.logger.debug(
+      `refreshDevices, mobileDeviceConnected: ${mobileDeviceConnected}, `,
+      `secondaryDeviceConnected: ${secondaryDeviceConnected}`
+    );
+
+    let didDeviceStateChange =
+      this._deviceStateSnapshot.mobileDeviceConnected !=
+        mobileDeviceConnected ||
+      this._deviceStateSnapshot.secondaryDeviceConnected !=
+        secondaryDeviceConnected;
+    if (
+      mobileDeviceConnected &&
+      !this._deviceStateSnapshot.mobileDeviceConnected
+    ) {
+      // a mobile device was added, show success if we previously showed the promo
+      this._shouldShowSuccessConfirmation = this._didShowMobilePromo;
+    } else if (
+      !mobileDeviceConnected &&
+      this._deviceStateSnapshot.mobileDeviceConnected
+    ) {
+      // no mobile device connected now, reset
+      Services.prefs.clearUserPref(MOBILE_PROMO_DISMISSED_PREF);
+      this._shouldShowSuccessConfirmation = false;
+    }
+    this._deviceStateSnapshot = {
+      mobileDeviceConnected,
+      secondaryDeviceConnected,
+    };
+    if (didDeviceStateChange) {
+      this.logger.debug(
+        "refreshDevices: device state did change, call maybeUpdateUI"
+      );
+      this._uiUpdateNeeded = true;
+    } else {
+      this.logger.debug("refreshDevices: no device state change");
+    }
+  }
+
   maybeUpdateUI() {
     let nextSetupStateName = this._currentSetupStateName;
 
@@ -167,19 +282,34 @@ export const TabsSetupFlowManager = new (class {
       }
     }
 
-    if (nextSetupStateName !== this._currentSetupStateName) {
-      const state = this.setupState.get(nextSetupStateName);
+    let setupState = this.currentSetupState;
+    if (nextSetupStateName != this._currentSetupStateName) {
+      setupState = this.setupState.get(nextSetupStateName);
       this._currentSetupStateName = nextSetupStateName;
-
-      Services.obs.notifyObservers(
-        null,
-        TOPIC_SETUPSTATE_CHANGED,
-        state.uiStateIndex
-      );
-      if ("function" == typeof state.enter) {
-        state.enter();
-      }
+      this._uiUpdateNeeded = true;
     }
+    this.logger.debug("maybeUpdateUI, _uiUpdateNeeded:", this._uiUpdateNeeded);
+    if (this._uiUpdateNeeded) {
+      this._uiUpdateNeeded = false;
+      if (this.shouldShowMobilePromo) {
+        this._didShowMobilePromo = true;
+      }
+      Services.obs.notifyObservers(null, TOPIC_SETUPSTATE_CHANGED);
+    }
+    if ("function" == typeof setupState.enter) {
+      setupState.enter();
+    }
+  }
+
+  dismissMobilePromo() {
+    Services.prefs.setBoolPref(MOBILE_PROMO_DISMISSED_PREF, true);
+  }
+
+  dismissMobileConfirmation() {
+    this._shouldShowSuccessConfirmation = false;
+    this._didShowMobilePromo = false;
+    this._uiUpdateNeeded = true;
+    this.maybeUpdateUI();
   }
 
   async openFxASignup(window) {
@@ -188,10 +318,12 @@ export const TabsSetupFlowManager = new (class {
     );
     openTabInWindow(window, url, true);
   }
+
   openSyncPreferences(window) {
     const url = "about:preferences?action=pair#sync";
     openTabInWindow(window, url, true);
   }
+
   syncOpenTabs(containerElem) {
     // Flip the pref on.
     // The observer should trigger re-evaluating state and advance to next step
diff --git a/browser/components/firefoxview/firefoxView.ftl b/browser/components/firefoxview/firefoxView.ftl
index 946855244e62..667af7d37781 100644
--- a/browser/components/firefoxview/firefoxView.ftl
+++ b/browser/components/firefoxview/firefoxView.ftl
@@ -14,6 +14,10 @@ menu-tools-firefox-view =
 
 firefoxview-page-title = { -firefoxview-brand-name }
 
+firefoxview-close-button =
+  .title = Close
+  .aria-label = Close
+
 # Used instead of the localized relative time when a timestamp is within a minute or so of now
 firefoxview-just-now-timestamp = Just now
 
@@ -43,6 +47,13 @@ firefoxview-tabpickup-synctabs-primarybutton = Sync open tabs
 
 firefoxview-tabpickup-syncing = Sit tight while your tabs sync. It’ll be just a moment.
 
+firefoxview-mobile-promo-header = Grab tabs from your phone or tablet
+firefoxview-mobile-promo-description = To view your latest mobile tabs, sign in to { -brand-product-name } on iOS or Android.
+firefoxview-mobile-promo-primarybutton = Get { -brand-product-name } for mobile
+
+firefoxview-mobile-confirmation-header = 🎉 Good to go!
+firefoxview-mobile-confirmation-description = Now you can grab your { -brand-product-name } tabs from your tablet or phone.
+
 firefoxview-closed-tabs-title = Recently closed
 firefoxview-closed-tabs-collapse-button =
   .title = Show or hide recently closed tabs list
diff --git a/browser/components/firefoxview/firefoxview.css b/browser/components/firefoxview/firefoxview.css
index 58dbad4c35ef..fa3ae696aa7f 100644
--- a/browser/components/firefoxview/firefoxview.css
+++ b/browser/components/firefoxview/firefoxview.css
@@ -8,6 +8,11 @@
   --sidebar-width: 200px;
   --header-spacing: 40px;
   --footer-spacing: 80px;
+  --card-border-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
+
+  --success-background-color: #87FFD1;
+  --success-border-color: #2AC3A2;
+  --success-color: #15141A;
 
   --colorways-figure-size: 225px;
   --colorways-grid-template-areas:
@@ -254,6 +259,17 @@ body > main > aside {
   display: none !important;
 }
 
+button.primary {
+  white-space: nowrap;
+  min-width: fit-content;
+}
+
+button.close {
+  background-image: url(chrome://global/skin/icons/close.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
 .card,
 .synced-tab-li,
 .synced-tab-li-placeholder,
@@ -306,12 +322,12 @@ body > main > aside {
 }
 
 /* Bug 1770534 - Only use the zap-gradient for built-in, color-neutral themes */
-.setup-step {
+.zap-card {
   border: none;
   position: relative;
   z-index: 0;
 }
-.setup-step::before {
+.zap-card::before {
   content: "";
   position: absolute;
   z-index: -1;
@@ -339,11 +355,6 @@ body > main > aside {
   flex: 1 1 auto;
 }
 
-.setup-step > .step-body > button.primary {
-  white-space: nowrap;
-  min-width: fit-content;
-}
-
 .setup-step > footer {
   display: flex;
   flex-direction: column;
@@ -354,6 +365,44 @@ body > main > aside {
   margin-block: 0 8px;
 }
 
+.message-box {
+  display: flex;
+  align-content: space-between;
+  align-items: center;
+  margin-block: 8px;
+  gap: 8px;
+}
+
+.message-content {
+  flex: 1 1 auto;
+}
+
+.message-content > .message-header {
+  font-size: 1.12em;
+  margin-block: 0 0.33em;
+}
+
+.message-content > .message-description {
+  margin-block: 0 0.33em;
+}
+
+.confirmation-message-box {
+  background-color: var(--success-background-color);
+  color: var(--success-color);
+  border-color: var(--success-border-color);
+}
+.confirmation-message-box > .message-content {
+  text-align: center;
+}
+.confirmation-message-box > .message-content > .message-header {
+  font-size: inherit;
+  display: inline;
+}
+.confirmation-message-box > .icon-button {
+  /* ensure we get the local color value as container doesnt change color with theme */
+  color: inherit;
+}
+
 /* 117px is the total height of the collapsible-tabs-container; setting that size
  for the second row stabilizes the layout so it doesn't shift when collapsibled */
 #recently-closed-tabs-container {
diff --git a/browser/components/firefoxview/firefoxview.html b/browser/components/firefoxview/firefoxview.html
index 7ae4da380a49..5576a03f5287 100644
--- a/browser/components/firefoxview/firefoxview.html
+++ b/browser/components/firefoxview/firefoxview.html
@@ -33,7 +33,7 @@
     <main>
       <template id="sync-setup-template">
         <named-deck class="sync-setup-container" data-prefix="id:">
-          <div name="sync-setup-view0" data-prefix="id:-view0" class="card setup-step" data-prefix="aria-labelledby:-view0-header">
+          <div name="sync-setup-view0" data-prefix="id:-view0" class="card zap-card setup-step" data-prefix="aria-labelledby:-view0-header">
             <h2 data-prefix="id:-view0-header" data-l10n-id="firefoxview-tabpickup-step-signin-header" class="card-header"></h2>
             <section class="step-body">
               <p class="step-content" data-l10n-id="firefoxview-tabpickup-step-signin-description"></p>
@@ -47,7 +47,7 @@
                 data-l10n-args='{"percentValue":"11"}'></label>
             </footer>
           </div>
-          <div name="sync-setup-view1" data-prefix="id:-view1" class="card setup-step" data-prefix="aria-labelledby:-view1-header">
+          <div name="sync-setup-view1" data-prefix="id:-view1" class="card zap-card setup-step" data-prefix="aria-labelledby:-view1-header">
             <h2 data-prefix="id:-view1-header" data-l10n-id="firefoxview-tabpickup-adddevice-header" class="card-header"></h2>
             <section class="step-body">
               <p class="step-content">
@@ -65,7 +65,7 @@
                 data-l10n-args='{"percentValue":"33"}'></label>
             </footer>
           </div>
-          <div name="sync-setup-view2" data-prefix="id:-view2" class="card setup-step" data-prefix="aria-labelledby:-view2-header">
+          <div name="sync-setup-view2" data-prefix="id:-view2" class="card zap-card setup-step" data-prefix="aria-labelledby:-view2-header">
             <h2 data-prefix="id:-view2-header" data-l10n-id="firefoxview-tabpickup-synctabs-header" class="card-header"></h2>
             <section class="step-body">
               <p class="step-content">
@@ -104,6 +104,25 @@
           <button id="collapsible-synced-tabs-button" class="ghost-button twisty icon arrow-up" hidden></button>
           <p class="section-description" data-l10n-id="firefoxview-tabpickup-description"></p>
         </header>
+
+        <div class="confirmation-message-box message-box card card-no-hover" hidden>
+          <div class="message-content">
+            <h2 data-l10n-id="firefoxview-mobile-confirmation-header" class="message-header"></h2>
+            <span class="message-description" data-l10n-id="firefoxview-mobile-confirmation-description"></span>
+          </div>
+          <button data-action="mobile-confirmation-dismiss" class="close icon-button ghost-button" data-l10n-id="firefoxview-close-button"></button>
+        </div>
+        <div id="sync-setup-placeholder" hidden></div>
+        <div id="synced-tabs-placeholder" hidden></div>
+        <div class="promo-box message-box zap-card card-no-hover card" hidden>
+          <div class="message-content">
+            <h2 data-l10n-id="firefoxview-mobile-promo-header" class="message-header"></h2>
+            <p class="message-description" data-l10n-id="firefoxview-mobile-promo-description"></p>
+          </div>
+          <button class="primary" data-action="mobile-promo-primary-action" data-l10n-id="firefoxview-mobile-promo-primarybutton"></button>
+          <button data-action="mobile-promo-dismiss" class="close icon-button ghost-button" data-l10n-id="firefoxview-close-button"></button>
+        </div>
+
       </section>
 
       <aside class="content-container" is="colorways-card">
diff --git a/browser/components/firefoxview/tab-pickup-container.mjs b/browser/components/firefoxview/tab-pickup-container.mjs
index 2612f8ea7d78..a2d7c6ceea01 100644
--- a/browser/components/firefoxview/tab-pickup-container.mjs
+++ b/browser/components/firefoxview/tab-pickup-container.mjs
@@ -31,8 +31,9 @@ class TabPickupContainer extends HTMLElement {
 
   connectedCallback() {
     this.addEventListener("click", this);
+    this.addEventListener("visibilitychange", this);
     Services.obs.addObserver(this.boundObserve, TOPIC_SETUPSTATE_CHANGED);
-    this.updateSetupState(TabsSetupFlowManager.uiStateIndex);
+    this.update();
   }
 
   cleanup() {
@@ -62,17 +63,43 @@ class TabPickupContainer extends HTMLElement {
           TabsSetupFlowManager.syncOpenTabs(event.target);
           break;
         }
+        case "mobile-promo-dismiss": {
+          TabsSetupFlowManager.dismissMobilePromo(event.target);
+          break;
+        }
+        case "mobile-promo-primary-action": {
+          TabsSetupFlowManager.openSyncPreferences(event.target.ownerGlobal);
+          break;
+        }
+        case "mobile-confirmation-dismiss": {
+          TabsSetupFlowManager.dismissMobileConfirmation(event.target);
+          break;
+        }
       }
     }
-  }
-
-  async observe(subject, topic, stateIndex) {
-    if (topic == TOPIC_SETUPSTATE_CHANGED) {
-      this.updateSetupState(TabsSetupFlowManager.uiStateIndex);
+    // Returning to fxview seems like a likely time for a device check
+    if (
+      event.type == "visibilitychange" &&
+      document.visibilityState === "visible"
+    ) {
+      this.update();
     }
   }
 
-  appendTemplatedElement(templateId, elementId) {
+  async observe(subject, topic, data) {
+    if (topic == TOPIC_SETUPSTATE_CHANGED) {
+      this.update();
+    }
+  }
+
+  get mobilePromoElem() {
+    return this.querySelector(".promo-box");
+  }
+  get mobileSuccessElem() {
+    return this.querySelector(".confirmation-message-box");
+  }
+
+  insertTemplatedElement(templateId, elementId, replaceNode) {
     const template = document.getElementById(templateId);
     const templateContent = template.content;
     const cloned = templateContent.cloneNode(true);
@@ -91,32 +118,57 @@ class TabPickupContainer extends HTMLElement {
           elem.dataset.supportUrl;
       }
     }
-    this.appendChild(cloned);
+    if (replaceNode) {
+      if (typeof replaceNode == "string") {
+        replaceNode = document.getElementById(replaceNode);
+      }
+      this.replaceChild(cloned, replaceNode);
+    } else {
+      this.appendChild(cloned);
+    }
   }
-  updateSetupState(stateIndex) {
-    const currStateIndex = this._currentSetupStateIndex;
-    if (stateIndex === undefined) {
-      stateIndex = currStateIndex;
+
+  update({
+    stateIndex = TabsSetupFlowManager.uiStateIndex,
+    showMobilePromo = TabsSetupFlowManager.shouldShowMobilePromo,
+    showMobilePairSuccess = TabsSetupFlowManager.shouldShowMobileConnectedSuccess,
+  } = {}) {
+    let needsRender = false;
+    if (showMobilePromo !== this._showMobilePromo) {
+      this._showMobilePromo = showMobilePromo;
+      needsRender = true;
     }
-    if (stateIndex === this._currentSetupStateIndex) {
-      return;
+    if (showMobilePairSuccess !== this._showMobilePairSuccess) {
+      this._showMobilePairSuccess = showMobilePairSuccess;
+      needsRender = true;
     }
-    this._currentSetupStateIndex = stateIndex;
-    this.render();
+    if (stateIndex !== this._currentSetupStateIndex) {
+      this._currentSetupStateIndex = stateIndex;
+      needsRender = true;
+    }
+    needsRender && this.render();
   }
   render() {
     if (!this.isConnected) {
       return;
     }
+
     let setupElem = this.setupContainerElem;
     let tabsElem = this.tabsContainerElem;
+    let mobilePromoElem = this.mobilePromoElem;
+    let mobileSuccessElem = this.mobileSuccessElem;
+
     const stateIndex = this._currentSetupStateIndex;
     const isLoading = stateIndex == 3;
 
     // show/hide either the setup or tab list containers, creating each as necessary
     if (stateIndex < 3) {
       if (!setupElem) {
-        this.appendTemplatedElement("sync-setup-template", "tabpickup-steps");
+        this.insertTemplatedElement(
+          "sync-setup-template",
+          "tabpickup-steps",
+          "sync-setup-placeholder"
+        );
         setupElem = this.setupContainerElem;
       }
       if (tabsElem) {
@@ -128,9 +180,10 @@ class TabPickupContainer extends HTMLElement {
     }
 
     if (!tabsElem) {
-      this.appendTemplatedElement(
+      this.insertTemplatedElement(
         "synced-tabs-template",
-        "tabpickup-tabs-container"
+        "tabpickup-tabs-container",
+        "synced-tabs-placeholder"
       );
       tabsElem = this.tabsContainerElem;
     }
@@ -143,6 +196,8 @@ class TabPickupContainer extends HTMLElement {
     if (stateIndex == 4) {
       this.collapsibleButton.hidden = false;
     }
+    mobilePromoElem.hidden = !this._showMobilePromo;
+    mobileSuccessElem.hidden = !this._showMobilePairSuccess;
   }
 }
 customElements.define("tab-pickup-container", TabPickupContainer);
diff --git a/browser/components/firefoxview/tests/browser/browser_firefoxview_tab.js b/browser/components/firefoxview/tests/browser/browser_firefoxview_tab.js
index 4212475fdb46..c878a2f1122b 100644
--- a/browser/components/firefoxview/tests/browser/browser_firefoxview_tab.js
+++ b/browser/components/firefoxview/tests/browser/browser_firefoxview_tab.js
@@ -17,46 +17,6 @@ add_setup(async function() {
   }
 });
 
-function assertFirefoxViewTab(w = window) {
-  ok(w.FirefoxViewHandler.tab, "Firefox View tab exists");
-  ok(w.FirefoxViewHandler.tab?.hidden, "Firefox View tab is hidden");
-  is(
-    w.gBrowser.tabs.indexOf(w.FirefoxViewHandler.tab),
-    0,
-    "Firefox View tab is the first tab"
-  );
-  is(
-    w.gBrowser.visibleTabs.indexOf(w.FirefoxViewHandler.tab),
-    -1,
-    "Firefox View tab is not in the list of visible tabs"
-  );
-}
-
-async function openFirefoxViewTab(w = window) {
-  ok(
-    !w.FirefoxViewHandler.tab,
-    "Firefox View tab doesn't exist prior to clicking the button"
-  );
-  info("Clicking the Firefox View button");
-  await EventUtils.synthesizeMouseAtCenter(
-    w.document.getElementById("firefox-view-button"),
-    {},
-    w
-  );
-  assertFirefoxViewTab(w);
-  is(w.gBrowser.tabContainer.selectedIndex, 0, "Firefox View tab is selected");
-  await BrowserTestUtils.browserLoaded(w.FirefoxViewHandler.tab.linkedBrowser);
-  return w.FirefoxViewHandler.tab;
-}
-
-function closeFirefoxViewTab(w = window) {
-  w.gBrowser.removeTab(w.FirefoxViewHandler.tab);
-  ok(
-    !w.FirefoxViewHandler.tab,
-    "Reference to Firefox View tab got removed when closing the tab"
-  );
-}
-
 add_task(async function load_opens_new_tab() {
   await openFirefoxViewTab();
   gURLBar.focus();
diff --git a/browser/components/firefoxview/tests/browser/browser_setup_state.js b/browser/components/firefoxview/tests/browser/browser_setup_state.js
index 83f7b4540002..59178d2e2b5f 100644
--- a/browser/components/firefoxview/tests/browser/browser_setup_state.js
+++ b/browser/components/firefoxview/tests/browser/browser_setup_state.js
@@ -5,28 +5,41 @@ const { UIState } = ChromeUtils.import("resource://services-sync/UIState.jsm");
 const { TabsSetupFlowManager } = ChromeUtils.importESModule(
   "resource:///modules/firefox-view-tabs-setup-manager.sys.mjs"
 );
+const MOBILE_PROMO_DISMISSED_PREF =
+  "browser.tabs.firefox-view.mobilePromo.dismissed";
 
 const { sinon } = ChromeUtils.import("resource://testing-common/Sinon.jsm");
 
+var gMockFxaDevices = null;
+
 function promiseSyncReady() {
   let service = Cc["@mozilla.org/weave/service;1"].getService(Ci.nsISupports)
     .wrappedJSObject;
   return service.whenLoaded();
 }
 
+async function touchLastTabFetch() {
+  // lastTabFetch stores a timestamp in *seconds*.
+  const nowSeconds = Math.floor(Date.now() / 1000);
+  info("updating lastFetch:" + nowSeconds);
+  Services.prefs.setIntPref("services.sync.lastTabFetch", nowSeconds);
+  // wait so all pref observers can complete
+  await TestUtils.waitForTick();
+}
+
 function setupMocks({ fxaDevices = null, state = UIState.STATUS_SIGNED_IN }) {
   const sandbox = sinon.createSandbox();
+  gMockFxaDevices = fxaDevices;
   sandbox.stub(fxAccounts.device, "recentDeviceList").get(() => fxaDevices);
   sandbox.stub(UIState, "get").returns({
     status: state,
     syncEnabled: true,
   });
-  sandbox.stub(fxAccounts.device, "refreshDeviceList").resolves(true);
 
   sandbox
     .stub(Weave.Service.clientsEngine, "getClientByFxaDeviceId")
     .callsFake(fxaDeviceId => {
-      let target = fxaDevices.find(c => c.id == fxaDeviceId);
+      let target = gMockFxaDevices.find(c => c.id == fxaDeviceId);
       return target ? target.clientRecord : null;
     });
   sandbox.stub(Weave.Service.clientsEngine, "getClientType").returns("desktop");
@@ -34,6 +47,30 @@ function setupMocks({ fxaDevices = null, state = UIState.STATUS_SIGNED_IN }) {
   return sandbox;
 }
 
+async function setupWithDesktopDevices() {
+  const sandbox = setupMocks({
+    state: UIState.STATUS_SIGNED_IN,
+    fxaDevices: [
+      {
+        id: 1,
+        name: "This Device",
+        isCurrentDevice: true,
+        type: "desktop",
+      },
+      {
+        id: 2,
+        name: "Other Device",
+        type: "desktop",
+      },
+    ],
+  });
+  // ensure tab sync is false so we don't skip onto next step
+  await SpecialPowers.pushPrefEnv({
+    set: [["services.sync.engine.tabs", true]],
+  });
+  return sandbox;
+}
+
 async function waitForVisibleStep(browser, expected) {
   const { document } = browser.contentWindow;
 
@@ -66,37 +103,68 @@ async function waitForVisibleStep(browser, expected) {
   }
 }
 
-async function waitForElementVisible(browser, selector, isVisible = true) {
+function checkMobilePromo(browser, expected = {}) {
   const { document } = browser.contentWindow;
-  const elem = document.querySelector(selector);
-  ok(elem, `Got element with selector: ${selector}`);
-
-  await BrowserTestUtils.waitForMutationCondition(
-    elem,
-    {
-      attributeFilter: ["hidden"],
-    },
-    () => {
-      return isVisible
-        ? BrowserTestUtils.is_visible(elem)
-        : BrowserTestUtils.is_hidden(elem);
-    }
+  const promoElem = document.querySelector(
+    "#tab-pickup-container > .promo-box"
   );
+  const successElem = document.querySelector(
+    "#tab-pickup-container > .confirmation-message-box"
+  );
+
+  info("checkMobilePromo: " + JSON.stringify(expected));
+  if (expected.mobilePromo) {
+    ok(BrowserTestUtils.is_visible(promoElem), "Mobile promo is visible");
+  } else {
+    ok(
+      !promoElem || BrowserTestUtils.is_hidden(promoElem),
+      "Mobile promo is hidden"
+    );
+  }
+  if (expected.mobileConfirmation) {
+    ok(
+      BrowserTestUtils.is_visible(successElem),
+      "Success confirmation is visible"
+    );
+  } else {
+    ok(
+      !successElem || BrowserTestUtils.is_hidden(successElem),
+      "Success confirmation is hidden"
+    );
+  }
+}
+
+async function tearDown(sandbox) {
+  sandbox?.restore();
+  Services.prefs.clearUserPref("services.sync.lastTabFetch");
+  Services.prefs.clearUserPref(MOBILE_PROMO_DISMISSED_PREF);
 }
 
 add_setup(async function() {
+  if (!Services.prefs.getBoolPref("browser.tabs.firefox-view")) {
+    info(
+      "firefox-view pref was off, toggling it on and adding the tabstrip widget"
+    );
+    await SpecialPowers.pushPrefEnv({
+      set: [["browser.tabs.firefox-view", true]],
+    });
+    CustomizableUI.addWidgetToArea(
+      "firefox-view-button",
+      CustomizableUI.AREA_TABSTRIP,
+      0
+    );
+    registerCleanupFunction(() => {
+      CustomizableUI.removeWidgetFromArea("firefox-view-button");
+    });
+  }
+
   await promiseSyncReady();
   // gSync.init() is called in a requestIdleCallback. Force its initialization.
   gSync.init();
 
-  const tab = await BrowserTestUtils.openNewForegroundTab(
-    gBrowser,
-    "about:firefoxview"
-  );
   registerCleanupFunction(async function() {
-    BrowserTestUtils.removeTab(tab);
     Services.prefs.clearUserPref("services.sync.engine.tabs");
-    Services.prefs.clearUserPref("services.sync.lastTabFetch");
+    await tearDown();
   });
   // set tab sync false so we don't skip setup states
   await SpecialPowers.pushPrefEnv({
@@ -105,19 +173,21 @@ add_setup(async function() {
 });
 
 add_task(async function test_unconfigured_initial_state() {
-  const browser = gBrowser.selectedBrowser;
   const sandbox = setupMocks({ state: UIState.STATUS_NOT_CONFIGURED });
-
-  Services.obs.notifyObservers(null, UIState.ON_UPDATE);
-  await waitForVisibleStep(browser, {
-    expectedVisible: "#tabpickup-steps-view0",
+  await withFirefoxView({}, async browser => {
+    Services.obs.notifyObservers(null, UIState.ON_UPDATE);
+    await waitForVisibleStep(browser, {
+      expectedVisible: "#tabpickup-steps-view0",
+    });
+    checkMobilePromo(browser, {
+      mobilePromo: false,
+      mobileConfirmation: false,
+    });
   });
-
-  sandbox.restore();
+  await tearDown(sandbox);
 });
 
 add_task(async function test_signed_in() {
-  const browser = gBrowser.selectedBrowser;
   const sandbox = setupMocks({
     state: UIState.STATUS_SIGNED_IN,
     fxaDevices: [
@@ -129,18 +199,26 @@ add_task(async function test_signed_in() {
       },
     ],
   });
-  Services.obs.notifyObservers(null, UIState.ON_UPDATE);
-  await waitForVisibleStep(browser, {
-    expectedVisible: "#tabpickup-steps-view1",
+  await withFirefoxView({}, async browser => {
+    Services.obs.notifyObservers(null, UIState.ON_UPDATE);
+    await waitForVisibleStep(browser, {
+      expectedVisible: "#tabpickup-steps-view1",
+    });
+
+    is(
+      fxAccounts.device.recentDeviceList?.length,
+      1,
+      "Just 1 device connected"
+    );
+    checkMobilePromo(browser, {
+      mobilePromo: false,
+      mobileConfirmation: false,
+    });
   });
-
-  is(fxAccounts.device.recentDeviceList?.length, 1, "Just 1 device connected");
-
-  sandbox.restore();
+  await tearDown(sandbox);
 });
 
 add_task(async function test_2nd_desktop_connected() {
-  const browser = gBrowser.selectedBrowser;
   const sandbox = setupMocks({
     state: UIState.STATUS_SIGNED_IN,
     fxaDevices: [
@@ -157,31 +235,34 @@ add_task(async function test_2nd_desktop_connected() {
       },
     ],
   });
+  await withFirefoxView({}, async browser => {
+    // ensure tab sync is false so we don't skip onto next step
+    ok(
+      !Services.prefs.getBoolPref("services.sync.engine.tabs", false),
+      "services.sync.engine.tabs is initially false"
+    );
 
-  // ensure tab sync is false so we don't skip onto next step
-  ok(
-    !Services.prefs.getBoolPref("services.sync.engine.tabs", false),
-    "services.sync.engine.tabs is initially false"
-  );
+    Services.obs.notifyObservers(null, UIState.ON_UPDATE);
+    await waitForVisibleStep(browser, {
+      expectedVisible: "#tabpickup-steps-view2",
+    });
 
-  Services.obs.notifyObservers(null, UIState.ON_UPDATE);
-  await waitForVisibleStep(browser, {
-    expectedVisible: "#tabpickup-steps-view2",
+    is(fxAccounts.device.recentDeviceList?.length, 2, "2 devices connected");
+    ok(
+      fxAccounts.device.recentDeviceList?.every(
+        device => device.type !== "mobile"
+      ),
+      "No connected device is type:mobile"
+    );
+    checkMobilePromo(browser, {
+      mobilePromo: false,
+      mobileConfirmation: false,
+    });
   });
-
-  is(fxAccounts.device.recentDeviceList?.length, 2, "2 devices connected");
-  ok(
-    fxAccounts.device.recentDeviceList?.every(
-      device => device.type !== "mobile"
-    ),
-    "No connected device is type:mobile"
-  );
-
-  sandbox.restore();
+  await tearDown(sandbox);
 });
 
 add_task(async function test_mobile_connected() {
-  const browser = gBrowser.selectedBrowser;
   const sandbox = setupMocks({
     state: UIState.STATUS_SIGNED_IN,
     fxaDevices: [
@@ -198,30 +279,34 @@ add_task(async function test_mobile_connected() {
       },
     ],
   });
-  // ensure tab sync is false so we don't skip onto next step
-  ok(
-    !Services.prefs.getBoolPref("services.sync.engine.tabs", false),
-    "services.sync.engine.tabs is initially false"
-  );
+  await withFirefoxView({}, async browser => {
+    // ensure tab sync is false so we don't skip onto next step
+    ok(
+      !Services.prefs.getBoolPref("services.sync.engine.tabs", false),
+      "services.sync.engine.tabs is initially false"
+    );
 
-  Services.obs.notifyObservers(null, UIState.ON_UPDATE);
-  await waitForVisibleStep(browser, {
-    expectedVisible: "#tabpickup-steps-view2",
+    Services.obs.notifyObservers(null, UIState.ON_UPDATE);
+    await waitForVisibleStep(browser, {
+      expectedVisible: "#tabpickup-steps-view2",
+    });
+
+    is(fxAccounts.device.recentDeviceList?.length, 2, "2 devices connected");
+    ok(
+      fxAccounts.device.recentDeviceList?.some(
+        device => device.type !== "mobile"
+      ),
+      "A connected device is type:mobile"
+    );
+    checkMobilePromo(browser, {
+      mobilePromo: false,
+      mobileConfirmation: false,
+    });
   });
-
-  is(fxAccounts.device.recentDeviceList?.length, 2, "2 devices connected");
-  ok(
-    fxAccounts.device.recentDeviceList?.some(
-      device => device.type !== "mobile"
-    ),
-    "A connected device is type:mobile"
-  );
-
-  sandbox.restore();
+  await tearDown(sandbox);
 });
 
 add_task(async function test_tab_sync_enabled() {
-  const browser = gBrowser.selectedBrowser;
   const sandbox = setupMocks({
     state: UIState.STATUS_SIGNED_IN,
     fxaDevices: [
@@ -238,43 +323,58 @@ add_task(async function test_tab_sync_enabled() {
       },
     ],
   });
-  Services.obs.notifyObservers(null, UIState.ON_UPDATE);
+  await withFirefoxView({}, async browser => {
+    Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
-  // test initial state, with the pref not enabled
-  await waitForVisibleStep(browser, {
-    expectedVisible: "#tabpickup-steps-view2",
+    // test initial state, with the pref not enabled
+    await waitForVisibleStep(browser, {
+      expectedVisible: "#tabpickup-steps-view2",
+    });
+    checkMobilePromo(browser, {
+      mobilePromo: false,
+      mobileConfirmation: false,
+    });
+
+    // test with the pref toggled on
+    await SpecialPowers.pushPrefEnv({
+      set: [["services.sync.engine.tabs", true]],
+    });
+    await waitForElementVisible(browser, "#tabpickup-steps", false);
+    checkMobilePromo(browser, {
+      mobilePromo: false,
+      mobileConfirmation: false,
+    });
+
+    // reset and test clicking the action button
+    await SpecialPowers.popPrefEnv();
+    await waitForVisibleStep(browser, {
+      expectedVisible: "#tabpickup-steps-view2",
+    });
+    checkMobilePromo(browser, {
+      mobilePromo: false,
+      mobileConfirmation: false,
+    });
+
+    const actionButton = browser.contentWindow.document.querySelector(
+      "#tabpickup-steps-view2 button.primary"
+    );
+    actionButton.click();
+
+    await waitForElementVisible(browser, "#tabpickup-steps", false);
+    checkMobilePromo(browser, {
+      mobilePromo: false,
+      mobileConfirmation: false,
+    });
+
+    ok(
+      Services.prefs.getBoolPref("services.sync.engine.tabs", false),
+      "tab sync pref should be enabled after button click"
+    );
   });
-
-  // test with the pref toggled on
-  await SpecialPowers.pushPrefEnv({
-    set: [["services.sync.engine.tabs", true]],
-  });
-  await waitForElementVisible(browser, "#tabpickup-steps", false);
-
-  // reset and test clicking the action button
-  await SpecialPowers.popPrefEnv();
-  await waitForVisibleStep(browser, {
-    expectedVisible: "#tabpickup-steps-view2",
-  });
-
-  const actionButton = browser.contentWindow.document.querySelector(
-    "#tabpickup-steps-view2 button.primary"
-  );
-  actionButton.click();
-
-  await waitForElementVisible(browser, "#tabpickup-steps", false);
-
-  ok(
-    Services.prefs.getBoolPref("services.sync.engine.tabs", false),
-    "tab sync pref should be enabled after button click"
-  );
-
-  sandbox.restore();
-  Services.prefs.clearUserPref("services.sync.engine.tabs");
+  await tearDown(sandbox);
 });
 
 add_task(async function test_tab_sync_loading() {
-  const browser = gBrowser.selectedBrowser;
   const sandbox = setupMocks({
     state: UIState.STATUS_SIGNED_IN,
     fxaDevices: [
@@ -291,95 +391,287 @@ add_task(async function test_tab_sync_loading() {
       },
     ],
   });
-  const { document } = browser.contentWindow;
+  await withFirefoxView({}, async browser => {
+    Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
-  await SpecialPowers.pushPrefEnv({
-    set: [["services.sync.engine.tabs", true]],
+    await SpecialPowers.pushPrefEnv({
+      set: [["services.sync.engine.tabs", true]],
+    });
+
+    const { document } = browser.contentWindow;
+    const tabsContainer = document.querySelector("#tabpickup-tabs-container");
+    const tabsList = document.querySelector(
+      "#tabpickup-tabs-container tab-pickup-list"
+    );
+    const loadingElem = document.querySelector(
+      "#tabpickup-tabs-container .loading-content"
+    );
+    const setupElem = document.querySelector("#tabpickup-steps");
+
+    await waitForElementVisible(browser, "#tabpickup-steps", false);
+    await waitForElementVisible(browser, "#tabpickup-tabs-container", true);
+    checkMobilePromo(browser, {
+      mobilePromo: false,
+      mobileConfirmation: false,
+    });
+
+    function checkLoadingState(isLoading = false) {
+      if (isLoading) {
+        ok(
+          tabsContainer.classList.contains("loading"),
+          "Tabs container has loading class"
+        );
+        BrowserTestUtils.is_visible(
+          loadingElem,
+          "Loading content is visible when loading"
+        );
+        !tabsList ||
+          BrowserTestUtils.is_hidden(
+            tabsList,
+            "Synced tabs list is not visible when loading"
+          );
+        !setupElem ||
+          BrowserTestUtils.is_hidden(
+            setupElem,
+            "Setup content is not visible when loading"
+          );
+      } else {
+        ok(
+          !tabsContainer.classList.contains("loading"),
+          "Tabs container has no loading class"
+        );
+        !loadingElem ||
+          BrowserTestUtils.is_hidden(
+            loadingElem,
+            "Loading content is not visible when tabs are loaded"
+          );
+        BrowserTestUtils.is_visible(
+          tabsList,
+          "Synced tabs list is visible when loaded"
+        );
+        !setupElem ||
+          BrowserTestUtils.is_hidden(
+            setupElem,
+            "Setup content is not visible when tabs are loaded"
+          );
+      }
+    }
+    checkLoadingState(true);
+
+    await touchLastTabFetch();
+
+    await BrowserTestUtils.waitForMutationCondition(
+      tabsContainer,
+      { attributeFilter: ["class"], attributes: true },
+      () => {
+        return !tabsContainer.classList.contains("loading");
+      }
+    );
+    checkLoadingState(false);
+    checkMobilePromo(browser, {
+      mobilePromo: false,
+      mobileConfirmation: false,
+    });
+
+    // Simulate stale data by setting lastTabFetch to 10mins ago
+    const TEN_MINUTES_MS = 1000 * 60 * 10;
+    const staleFetchSeconds = Math.floor((Date.now() - TEN_MINUTES_MS) / 1000);
+    info("updating lastFetch:" + staleFetchSeconds);
+    Services.prefs.setIntPref("services.sync.lastTabFetch", staleFetchSeconds);
+
+    await BrowserTestUtils.waitForMutationCondition(
+      tabsContainer,
+      { attributeFilter: ["class"], attributes: true },
+      () => {
+        return tabsContainer.classList.contains("loading");
+      }
+    );
+    checkLoadingState(true);
+    checkMobilePromo(browser, {
+      mobilePromo: false,
+      mobileConfirmation: false,
+    });
   });
-  Services.obs.notifyObservers(null, UIState.ON_UPDATE);
-
-  await waitForElementVisible(browser, "#tabpickup-steps", false);
-  await waitForElementVisible(browser, "#tabpickup-tabs-container", true);
-
-  const tabsContainer = document.querySelector("#tabpickup-tabs-container");
-  const tabsList = document.querySelector(
-    "#tabpickup-tabs-container tab-pickup-list"
-  );
-  const loadingElem = document.querySelector(
-    "#tabpickup-tabs-container .loading-content"
-  );
-  const setupElem = document.querySelector("#tabpickup-steps");
-
-  function checkLoadingState(isLoading = false) {
-    if (isLoading) {
-      ok(
-        tabsContainer.classList.contains("loading"),
-        "Tabs container has loading class"
-      );
-      BrowserTestUtils.is_visible(
-        loadingElem,
-        "Loading content is visible when loading"
-      );
-      BrowserTestUtils.is_hidden(
-        tabsList,
-        "Synced tabs list is not visible when loading"
-      );
-      BrowserTestUtils.is_hidden(
-        setupElem,
-        "Setup content is not visible when loading"
-      );
-    } else {
-      ok(
-        !tabsContainer.classList.contains("loading"),
-        "Tabs container has no loading class"
-      );
-      BrowserTestUtils.is_hidden(
-        loadingElem,
-        "Loading content is not visible when tabs are loaded"
-      );
-      BrowserTestUtils.is_visible(
-        tabsList,
-        "Synced tabs list is visible when loaded"
-      );
-      BrowserTestUtils.is_hidden(
-        setupElem,
-        "Setup content is not visible when tabs are loaded"
-      );
-    }
-  }
-  checkLoadingState(true);
-
-  // lastTabFetch stores a timestamp in *seconds*.
-  const nowSeconds = Math.floor(Date.now() / 1000);
-  info("updating lastFetch:" + nowSeconds);
-  Services.prefs.setIntPref("services.sync.lastTabFetch", nowSeconds);
-
-  await BrowserTestUtils.waitForMutationCondition(
-    tabsContainer,
-    { attributeFilter: ["class"], attributes: true },
-    () => {
-      return !tabsContainer.classList.contains("loading");
-    }
-  );
-  checkLoadingState(false);
-
-  // Simulate stale data by setting lastTabFetch to 10mins ago
-  const TEN_MINUTES_MS = 1000 * 60 * 10;
-  const staleFetchSeconds = Math.floor((Date.now() - TEN_MINUTES_MS) / 1000);
-  info("updating lastFetch:" + staleFetchSeconds);
-  Services.prefs.setIntPref("services.sync.lastTabFetch", staleFetchSeconds);
-
-  await BrowserTestUtils.waitForMutationCondition(
-    tabsContainer,
-    { attributeFilter: ["class"], attributes: true },
-    () => {
-      return tabsContainer.classList.contains("loading");
-    }
-  );
-  checkLoadingState(true);
-
   await SpecialPowers.popPrefEnv();
-  sandbox.restore();
-  Services.prefs.clearUserPref("services.sync.engine.tabs");
-  Services.prefs.clearUserPref("services.sync.lastTabFetch");
+  await tearDown(sandbox);
+});
+
+add_task(async function test_mobile_promo() {
+  const sandbox = await setupWithDesktopDevices();
+  await withFirefoxView({}, async browser => {
+    // ensure last tab fetch was just now so we don't get the loading state
+    await touchLastTabFetch();
+
+    Services.obs.notifyObservers(null, UIState.ON_UPDATE);
+    await waitForElementVisible(browser, ".synced-tabs-container");
+    is(fxAccounts.device.recentDeviceList?.length, 2, "2 devices connected");
+
+    info("checking mobile promo, should be visible now");
+    checkMobilePromo(browser, {
+      mobilePromo: true,
+      mobileConfirmation: false,
+    });
+
+    gMockFxaDevices.push({
+      id: 3,
+      name: "Mobile Device",
+      type: "mobile",
+    });
+
+    Services.obs.notifyObservers(null, "fxaccounts:devicelist_updated");
+
+    // Wait for the async refreshDeviceList(),
+    // which should result in the promo being hidden
+    await waitForElementVisible(
+      browser,
+      "#tab-pickup-container > .promo-box",
+      false
+    );
+    is(fxAccounts.device.recentDeviceList?.length, 3, "3 devices connected");
+    checkMobilePromo(browser, {
+      mobilePromo: false,
+      mobileConfirmation: true,
+    });
+  });
+  await tearDown(sandbox);
+});
+
+add_task(async function test_mobile_promo_pref() {
+  const sandbox = await setupWithDesktopDevices();
+  await SpecialPowers.pushPrefEnv({
+    set: [[MOBILE_PROMO_DISMISSED_PREF, true]],
+  });
+  await withFirefoxView({}, async browser => {
+    // ensure tab sync is false so we don't skip onto next step
+    info("starting test, will notify of UIState update");
+    // ensure last tab fetch was just now so we don't get the loading state
+    await touchLastTabFetch();
+
+    Services.obs.notifyObservers(null, UIState.ON_UPDATE);
+    await waitForElementVisible(browser, ".synced-tabs-container");
+    is(fxAccounts.device.recentDeviceList?.length, 2, "2 devices connected");
+
+    info("checking mobile promo, should be still hidden because of the pref");
+    checkMobilePromo(browser, {
+      mobilePromo: false,
+      mobileConfirmation: false,
+    });
+
+    // reset the dismissed pref, which should case the promo to get shown
+    await SpecialPowers.popPrefEnv();
+    await waitForElementVisible(
+      browser,
+      "#tab-pickup-container > .promo-box",
+      true
+    );
+
+    const promoElem = browser.contentWindow.document.querySelector(
+      "#tab-pickup-container > .promo-box"
+    );
+    const promoElemClose = promoElem.querySelector(".close");
+    ok(promoElemClose.hasAttribute("aria-label"), "Button has an a11y name");
+    // check that dismissing the promo sets the pref
+    info("Clicking the promo close button: " + promoElemClose);
+    EventUtils.sendMouseEvent({ type: "click" }, promoElemClose);
+
+    info("Check the promo box got hidden");
+    BrowserTestUtils.is_hidden(promoElem);
+    ok(
+      SpecialPowers.getBoolPref(MOBILE_PROMO_DISMISSED_PREF),
+      "Promo pref is updated when close is clicked"
+    );
+  });
+  await tearDown(sandbox);
+});
+
+add_task(async function test_mobile_promo_windows() {
+  // make sure interacting with the promo and success confirmation in one window
+  // also updates the others
+  const sandbox = await setupWithDesktopDevices();
+  await withFirefoxView({}, async browser => {
+    // ensure last tab fetch was just now so we don't get the loading state
+    await touchLastTabFetch();
+
+    Services.obs.notifyObservers(null, UIState.ON_UPDATE);
+    await waitForElementVisible(browser, ".synced-tabs-container");
+    is(fxAccounts.device.recentDeviceList?.length, 2, "2 devices connected");
+
+    info("checking mobile promo is visible");
+    checkMobilePromo(browser, {
+      mobilePromo: true,
+      mobileConfirmation: false,
+    });
+
+    info(
+      "opening new window, pref is: " +
+        SpecialPowers.getBoolPref("browser.tabs.firefox-view")
+    );
+
+    let win2 = await BrowserTestUtils.openNewBrowserWindow();
+    info("Got window, now opening Firefox View in it");
+    await withFirefoxView(
+      { resetFlowManager: false, win: win2 },
+      async win2Browser => {
+        info("In withFirefoxView taskFn for win2");
+        // promo should be visible in the 2nd window too
+        info("check mobile promo is visible in the new window");
+        checkMobilePromo(win2Browser, {
+          mobilePromo: true,
+          mobileConfirmation: false,
+        });
+
+        // add the mobile device to get the success confirmation in both instances
+        info("add a mobile device and send device_connected notification");
+        gMockFxaDevices.push({
+          id: 3,
+          name: "Mobile Device",
+          type: "mobile",
+        });
+
+        Services.obs.notifyObservers(null, "fxaccounts:devicelist_updated");
+        is(
+          fxAccounts.device.recentDeviceList?.length,
+          3,
+          "3 devices connected"
+        );
+
+        // Wait for the async refreshDevices(),
+        // which should result in the promo being hidden
+        info("waiting for the confirmation box to be visible");
+        await waitForElementVisible(
+          win2Browser,
+          "#tab-pickup-container > .promo-box",
+          false
+        );
+
+        for (let fxviewBrowser of [browser, win2Browser]) {
+          info(
+            "checking promo is hidden and confirmation is visible in each window"
+          );
+          checkMobilePromo(fxviewBrowser, {
+            mobilePromo: false,
+            mobileConfirmation: true,
+          });
+        }
+
+        // dismiss the confirmation and check its gone from both instances
+        const confirmBox = win2Browser.contentWindow.document.querySelector(
+          "#tab-pickup-container > .confirmation-message-box"
+        );
+        const closeButton = confirmBox.querySelector(".close");
+        ok(closeButton.hasAttribute("aria-label"), "Button has an a11y name");
+        EventUtils.sendMouseEvent({ type: "click" }, closeButton, win2);
+        BrowserTestUtils.is_hidden(confirmBox);
+
+        for (let fxviewBrowser of [browser, win2Browser]) {
+          checkMobilePromo(fxviewBrowser, {
+            mobilePromo: false,
+            mobileConfirmation: false,
+          });
+        }
+      }
+    );
+    await BrowserTestUtils.closeWindow(win2);
+  });
+  await tearDown(sandbox);
 });
diff --git a/browser/components/firefoxview/tests/browser/head.js b/browser/components/firefoxview/tests/browser/head.js
index 4ae6d6204b4f..17b28a960d3e 100644
--- a/browser/components/firefoxview/tests/browser/head.js
+++ b/browser/components/firefoxview/tests/browser/head.js
@@ -22,6 +22,9 @@ function testVisibility(browser, expected) {
 async function waitForElementVisible(browser, selector, isVisible = true) {
   const { document } = browser.contentWindow;
   const elem = document.querySelector(selector);
+  if (!isVisible && !elem) {
+    return;
+  }
   ok(elem, `Got element with selector: ${selector}`);
 
   await BrowserTestUtils.waitForMutationCondition(
@@ -36,3 +39,73 @@ async function waitForElementVisible(browser, selector, isVisible = true) {
     }
   );
 }
+
+function assertFirefoxViewTab(w = window) {
+  ok(w.FirefoxViewHandler.tab, "Firefox View tab exists");
+  ok(w.FirefoxViewHandler.tab?.hidden, "Firefox View tab is hidden");
+  is(
+    w.gBrowser.tabs.indexOf(w.FirefoxViewHandler.tab),
+    0,
+    "Firefox View tab is the first tab"
+  );
+  is(
+    w.gBrowser.visibleTabs.indexOf(w.FirefoxViewHandler.tab),
+    -1,
+    "Firefox View tab is not in the list of visible tabs"
+  );
+}
+
+async function openFirefoxViewTab(w = window) {
+  ok(
+    !w.FirefoxViewHandler.tab,
+    "Firefox View tab doesn't exist prior to clicking the button"
+  );
+  info("Clicking the Firefox View button");
+  await EventUtils.synthesizeMouseAtCenter(
+    w.document.getElementById("firefox-view-button"),
+    {},
+    w
+  );
+  assertFirefoxViewTab(w);
+  is(w.gBrowser.tabContainer.selectedIndex, 0, "Firefox View tab is selected");
+  await BrowserTestUtils.browserLoaded(w.FirefoxViewHandler.tab.linkedBrowser);
+  return w.FirefoxViewHandler.tab;
+}
+
+function closeFirefoxViewTab(w = window) {
+  w.gBrowser.removeTab(w.FirefoxViewHandler.tab);
+  ok(
+    !w.FirefoxViewHandler.tab,
+    "Reference to Firefox View tab got removed when closing the tab"
+  );
+}
+
+async function withFirefoxView(
+  { resetFlowManager = true, win = window },
+  taskFn
+) {
+  if (resetFlowManager) {
+    const { TabsSetupFlowManager } = ChromeUtils.importESModule(
+      "resource:///modules/firefox-view-tabs-setup-manager.sys.mjs"
+    );
+    // reset internal state so we aren't reacting to whatever state the last invocation left behind
+    TabsSetupFlowManager.resetInternalState();
+  }
+  let tab = await openFirefoxViewTab(win);
+  let originalWindow = tab.ownerGlobal;
+  let result = await taskFn(tab.linkedBrowser);
+  let finalWindow = tab.ownerGlobal;
+  if (originalWindow == finalWindow && !tab.closing && tab.linkedBrowser) {
+    // taskFn may resolve within a tick after opening a new tab.
+    // We shouldn't remove the newly opened tab in the same tick.
+    // Wait for the next tick here.
+    await TestUtils.waitForTick();
+    BrowserTestUtils.removeTab(tab);
+  } else {
+    Services.console.logStringMessage(
+      "withFirefoxView: Tab was already closed before " +
+        "removeTab would have been called"
+    );
+  }
+  return Promise.resolve(result);
+}
diff --git a/services/fxaccounts/FxAccountsCommon.js b/services/fxaccounts/FxAccountsCommon.js
index b07ca6f05ac3..e09c58d52ac7 100644
--- a/services/fxaccounts/FxAccountsCommon.js
+++ b/services/fxaccounts/FxAccountsCommon.js
@@ -88,6 +88,7 @@ exports.FXA_PUSH_SCOPE_ACCOUNT_UPDATE = "chrome://fxa-device-update";
 exports.ON_PROFILE_CHANGE_NOTIFICATION = "fxaccounts:profilechange"; // WebChannel
 exports.ON_ACCOUNT_STATE_CHANGE_NOTIFICATION = "fxaccounts:statechange";
 exports.ON_NEW_DEVICE_ID = "fxaccounts:new_device_id";
+exports.ON_DEVICELIST_UPDATED = "fxaccounts:devicelist_updated";
 
 // The common prefix for all commands.
 exports.COMMAND_PREFIX = "https://identity.mozilla.com/cmd/";
diff --git a/services/fxaccounts/FxAccountsDevice.jsm b/services/fxaccounts/FxAccountsDevice.jsm
index 61ccab3c1fc3..57c9e15e39bf 100644
--- a/services/fxaccounts/FxAccountsDevice.jsm
+++ b/services/fxaccounts/FxAccountsDevice.jsm
@@ -12,6 +12,7 @@ const {
   ERRNO_DEVICE_SESSION_CONFLICT,
   ERRNO_UNKNOWN_DEVICE,
   ON_NEW_DEVICE_ID,
+  ON_DEVICELIST_UPDATED,
   ON_DEVICE_CONNECTED_NOTIFICATION,
   ON_DEVICE_DISCONNECTED_NOTIFICATION,
   ONVERIFIED_NOTIFICATION,
@@ -255,6 +256,7 @@ class FxAccountsDevice {
           lastFetch: this._fxai.now(),
           devices,
         };
+        Services.obs.notifyObservers(null, ON_DEVICELIST_UPDATED);
         return true;
       } finally {
         this._fetchAndCacheDeviceListPromise = null;
diff --git a/services/fxaccounts/tests/xpcshell/test_accounts_device_registration.js b/services/fxaccounts/tests/xpcshell/test_accounts_device_registration.js
index 5c603c09f7b2..ed8f3d660bc8 100644
--- a/services/fxaccounts/tests/xpcshell/test_accounts_device_registration.js
+++ b/services/fxaccounts/tests/xpcshell/test_accounts_device_registration.js
@@ -18,6 +18,7 @@ const {
   ERRNO_UNKNOWN_DEVICE,
   ON_DEVICE_CONNECTED_NOTIFICATION,
   ON_DEVICE_DISCONNECTED_NOTIFICATION,
+  ON_DEVICELIST_UPDATED,
 } = ChromeUtils.import("resource://gre/modules/FxAccountsCommon.js");
 var { AccountState } = ChromeUtils.import(
   "resource://gre/modules/FxAccounts.jsm"
@@ -789,6 +790,14 @@ add_task(async function test_refreshDeviceList() {
   let spy = {
     getDeviceList: { count: 0 },
   };
+  const deviceListUpdateObserver = {
+    count: 0,
+    observe(subject, topic, data) {
+      this.count++;
+    },
+  };
+  Services.obs.addObserver(deviceListUpdateObserver, ON_DEVICELIST_UPDATED);
+
   fxAccountsClient.getDeviceList = (function(old) {
     return function getDeviceList() {
       spy.getDeviceList.count += 1;
@@ -826,6 +835,11 @@ add_task(async function test_refreshDeviceList() {
     "Should not have device list initially"
   );
   Assert.ok(await device.refreshDeviceList(), "Should refresh list");
+  Assert.equal(
+    deviceListUpdateObserver.count,
+    1,
+    `${ON_DEVICELIST_UPDATED} was notified`
+  );
   Assert.deepEqual(
     device.recentDeviceList,
     [
@@ -847,6 +861,11 @@ add_task(async function test_refreshDeviceList() {
     !(await device.refreshDeviceList()),
     "Should not refresh device list if fresh"
   );
+  Assert.equal(
+    deviceListUpdateObserver.count,
+    1,
+    `${ON_DEVICELIST_UPDATED} was not notified`
+  );
 
   fxai._now += device.TIME_BETWEEN_FXA_DEVICES_FETCH_MS;
 
@@ -861,6 +880,11 @@ add_task(async function test_refreshDeviceList() {
     2,
     "Should only make one request if called with pending request"
   );
+  Assert.equal(
+    deviceListUpdateObserver.count,
+    2,
+    `${ON_DEVICELIST_UPDATED} only notified once`
+  );
 
   device.observe(null, ON_DEVICE_CONNECTED_NOTIFICATION);
   await device.refreshDeviceList();
@@ -869,6 +893,11 @@ add_task(async function test_refreshDeviceList() {
     3,
     "Should refresh device list after connecting new device"
   );
+  Assert.equal(
+    deviceListUpdateObserver.count,
+    3,
+    `${ON_DEVICELIST_UPDATED} notified when new device connects`
+  );
   device.observe(
     null,
     ON_DEVICE_DISCONNECTED_NOTIFICATION,
@@ -880,6 +909,11 @@ add_task(async function test_refreshDeviceList() {
     4,
     "Should refresh device list after disconnecting device"
   );
+  Assert.equal(
+    deviceListUpdateObserver.count,
+    4,
+    `${ON_DEVICELIST_UPDATED} notified when device disconnects`
+  );
   device.observe(
     null,
     ON_DEVICE_DISCONNECTED_NOTIFICATION,
@@ -891,11 +925,21 @@ add_task(async function test_refreshDeviceList() {
     4,
     "Should not refresh device list after disconnecting this device"
   );
+  Assert.equal(
+    deviceListUpdateObserver.count,
+    4,
+    `${ON_DEVICELIST_UPDATED} not notified again`
+  );
 
   let refreshBeforeResetPromise = device.refreshDeviceList({
     ignoreCached: true,
   });
   fxai._generation++;
+  Assert.equal(
+    deviceListUpdateObserver.count,
+    4,
+    `${ON_DEVICELIST_UPDATED} not notified`
+  );
   await Assert.rejects(refreshBeforeResetPromise, /Another user has signed in/);
 
   device.reset();
@@ -908,6 +952,12 @@ add_task(async function test_refreshDeviceList() {
     await device.refreshDeviceList(),
     "Should fetch new list after resetting"
   );
+  Assert.equal(
+    deviceListUpdateObserver.count,
+    5,
+    `${ON_DEVICELIST_UPDATED} notified after reset`
+  );
+  Services.obs.removeObserver(deviceListUpdateObserver, ON_DEVICELIST_UPDATED);
 });
 
 add_task(async function test_checking_remote_availableCommands_mismatch() {