diff --git a/mail/components/preferences/jar.mn b/mail/components/preferences/jar.mn
index dc37015752..7ed608b85e 100644
--- a/mail/components/preferences/jar.mn
+++ b/mail/components/preferences/jar.mn
@@ -12,6 +12,7 @@ messenger.jar:
 *   content/messenger/preferences/dockoptions.xhtml
 #endif
     content/messenger/preferences/chat.js
+    content/messenger/preferences/sync.js
     content/messenger/preferences/messagestyle.js
     content/messenger/preferences/messengerLanguages.js
     content/messenger/preferences/messengerLanguages.xhtml
diff --git a/mail/components/preferences/preferences.js b/mail/components/preferences/preferences.js
index 8217d09e2e..a7135d4e7f 100644
--- a/mail/components/preferences/preferences.js
+++ b/mail/components/preferences/preferences.js
@@ -8,6 +8,7 @@
 /* import-globals-from downloads.js */
 /* import-globals-from privacy.js */
 /* import-globals-from chat.js */
+/* import-globals-from sync.js */
 /* import-globals-from findInPage.js */
 /* globals gCalendarPane */
 
@@ -133,6 +134,7 @@ function init() {
   register_module("paneCompose", gComposePane);
   register_module("panePrivacy", gPrivacyPane);
   register_module("paneCalendar", gCalendarPane);
+  register_module("paneSync", gSyncPane);
   register_module("paneSearchResults", gSearchResultsPane);
   if (Services.prefs.getBoolPref("mail.chat.enabled")) {
     register_module("paneChat", gChatPane);
diff --git a/mail/components/preferences/preferences.xhtml b/mail/components/preferences/preferences.xhtml
index 9351b6f066..40c4d8b3bb 100644
--- a/mail/components/preferences/preferences.xhtml
+++ b/mail/components/preferences/preferences.xhtml
@@ -147,6 +147,18 @@
                       alt="" />
             <label class="category-name" flex="1" data-l10n-id="pane-calendar-title"/>
           </richlistitem>
+
+          <richlistitem id="category-sync"
+                        class="category"
+                        value="paneSync"
+                        hidden="true"
+                        data-l10n-id="category-sync"
+                        align="center">
+            <html:img class="category-icon"
+                      src="chrome://messenger/skin/icons/new/touch/sync.svg"
+                      alt="" />
+            <label class="category-name" flex="1" data-l10n-id="pane-sync-title"/>
+          </richlistitem>
         </richlistbox>
 
         <spacer flex="1"/>
@@ -188,6 +200,7 @@
 #include privacy.inc.xhtml
 #include chat.inc.xhtml
 #include ../../../calendar/base/content/preferences/calendar-preferences.inc.xhtml
+#include sync.inc.xhtml
           </vbox>
         </vbox>
       </vbox>
diff --git a/mail/components/preferences/sync.inc.xhtml b/mail/components/preferences/sync.inc.xhtml
new file mode 100644
index 0000000000..0df3681bb7
--- /dev/null
+++ b/mail/components/preferences/sync.inc.xhtml
@@ -0,0 +1,41 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+<script src="chrome://messenger/content/preferences/sync.js"/>
+
+<html:template id="paneSync">
+  <html:div id="syncPaneCategory"
+            class="subcategory"
+            data-category="paneSync"
+            xmlns="http://www.w3.org/1999/xhtml">
+    <h1 data-l10n-id="sync-pane-header"></h1>
+
+    <!-- TODO: Sync Account Not Signed In View -->
+
+    <section id="syncAccountSignedIn">
+      <div id="syncAccountSection">
+        <div id="photoInput">
+          <button type="button" id="photoButton"
+                  class="plain-button"
+                  data-l10n-id="sync-pane-edit-photo">
+            <img class="contact-photo" src="" alt="" />
+            <div id="photoOverlay"></div>
+          </button>
+        </div>
+        <div id="syncAccountInfo">
+          <span id="syncAccountName">Jane Doe</span>
+          <span id="syncAccountMail">example@example.com</span>
+          <a href="#" data-l10n-id="sync-pane-manage-account"></a>
+        </div>
+        <button id="syncAccountSignOut"
+                data-l10n-id="sync-pane-sign-out"
+                type="button">
+        </button>
+      </div>
+
+      <!-- TODO: Device Name section -->
+
+      <!-- TODO: Section to show what is being synced -->
+    </section>
+  </html:div>
+</html:template>
diff --git a/mail/components/preferences/sync.js b/mail/components/preferences/sync.js
new file mode 100644
index 0000000000..47ae25b850
--- /dev/null
+++ b/mail/components/preferences/sync.js
@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/* import-globals-from preferences.js */
+
+var gSyncPane = {
+  init() {
+    /* TODO: hook up Sync backend to front-end */
+  },
+};
diff --git a/mail/locales/en-US/messenger/preferences/preferences.ftl b/mail/locales/en-US/messenger/preferences/preferences.ftl
index 30479fccc2..feb1350900 100644
--- a/mail/locales/en-US/messenger/preferences/preferences.ftl
+++ b/mail/locales/en-US/messenger/preferences/preferences.ftl
@@ -30,6 +30,10 @@ pane-calendar-title = Calendar
 category-calendar =
     .tooltiptext = Calendar
 
+pane-sync-title = Sync
+category-sync =
+    .tooltiptext = Sync
+
 general-language-and-appearance-header = Language & Appearance
 
 general-incoming-mail-header = Incoming Mails
@@ -908,3 +912,14 @@ search-results-empty-message2 = { PLATFORM() ->
 }
 
 search-results-help-link = Need help? Visit <a data-l10n-name="url">{ -brand-short-name } Support</a>
+
+## Sync Tab
+
+sync-pane-header = Sync
+
+sync-pane-edit-photo =
+  .title = Change profile picture
+
+sync-pane-manage-account = Manage account
+
+sync-pane-sign-out = Sign out…
diff --git a/mail/themes/shared/jar.inc.mn b/mail/themes/shared/jar.inc.mn
index 5b50fb3f2c..f088971837 100644
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@@ -648,6 +648,7 @@
   skin/classic/messenger/icons/new/touch/pencil.svg           (../shared/mail/icons/new/touch/pencil.svg)
   skin/classic/messenger/icons/new/touch/settings.svg         (../shared/mail/icons/new/touch/settings.svg)
   skin/classic/messenger/icons/new/touch/subtract-circle.svg  (../shared/mail/icons/new/touch/subtract-circle.svg)
+  skin/classic/messenger/icons/new/touch/sync.svg             (../shared/mail/icons/new/touch/sync.svg)
   skin/classic/messenger/icons/new/touch/tasks.svg            (../shared/mail/icons/new/touch/tasks.svg)
 
   skin/classic/messenger/icons/new/address-book-indicator.svg (../shared/mail/icons/new/address-book-indicator.svg)
diff --git a/mail/themes/shared/mail/icons/new/touch/sync.svg b/mail/themes/shared/mail/icons/new/touch/sync.svg
new file mode 100644
index 0000000000..d7fe781c69
--- /dev/null
+++ b/mail/themes/shared/mail/icons/new/touch/sync.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" version="1.1" viewBox="0 0 24 24" height="24" width="24">
+  <path d="M12 3a8.972 8.972 0 0 0-5.803 2.12.5.5 0 0 0-.058.704.5.5 0 0 0 .703.06A7.962 7.962 0 0 1 12 4c4.424 0 8 3.575 8 8v.293l-2.146-2.147a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .707l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.707.5.5 0 0 0-.708 0L21 12.293V12c0-4.965-4.035-9-9-9Zm-8.578 7.006a.5.5 0 0 0-.276.14l-3 3a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0L3 11.707v.3C3.004 16.969 7.038 21 12 21a8.972 8.972 0 0 0 5.816-2.131.5.5 0 0 0 .059-.705.5.5 0 0 0-.705-.059A7.963 7.963 0 0 1 12 20c-4.424 0-8-3.576-8-8v-.293l2.146 2.146a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707l-3-3a.5.5 0 0 0-.432-.14z" fill="context-stroke"/>
+</svg>
diff --git a/mail/themes/shared/mail/preferences/preferences.css b/mail/themes/shared/mail/preferences/preferences.css
index 615bd39596..cf57f072eb 100644
--- a/mail/themes/shared/mail/preferences/preferences.css
+++ b/mail/themes/shared/mail/preferences/preferences.css
@@ -3,6 +3,7 @@
    - You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("chrome://messenger/skin/shared/preferences/subdialog.css");
+@import url("chrome://messenger/skin/colors.css");
 @import url("chrome://messenger/skin/icons.css");
 
 @namespace html url("http://www.w3.org/1999/xhtml");
@@ -727,3 +728,101 @@ calendar-notifications-setting .remove-button {
 /**
  * End connection dialog
  */
+
+ /**
+ * Sync Settings Page
+ */
+
+#syncAccountSection {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 24px;
+  margin: 24px 0;
+}
+
+#photoInput {
+  display: contents;
+  place-self: center;
+}
+
+.contact-photo,
+#photoButton {
+  border-radius: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.contact-photo {
+  width: 80px;
+  height: 80px;
+  margin: -1px;
+  object-fit: cover;
+  object-position: center;
+  background-color: var(--in-content-button-background);
+  background-image: var(--icon-user);
+  background-size: 48px;
+  background-position: calc(50% - 1px) calc(50% - 1px);
+  background-repeat: no-repeat;
+  border: none;
+  -moz-context-properties: stroke;
+  stroke: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+#photoButton {
+  position: relative;
+  width: 78px;
+  height: 78px;
+  min-width: 78px;
+  overflow: hidden;
+}
+
+#photoButton:hover {
+  background: none;
+}
+
+#photoOverlay {
+  position: absolute;
+  inset: 0;
+  border-radius: 100%;
+}
+
+#photoButton:focus-visible {
+  outline: 2px solid var(--in-content-focus-outline-color);
+  outline-offset: 2px;
+}
+
+#photoButton:is(:focus-visible, :hover) #photoOverlay {
+  background-color: color-mix(in srgb, var(--color-gray-90) 75%, transparent);
+  background-image: var(--icon-more);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 48px;
+  -moz-context-properties: stroke;
+  stroke: var(--color-white);
+  cursor: pointer;
+}
+
+@media (prefers-contrast) {
+  #photoButton:is(:focus-visible, :hover) #photoOverlay {
+    background-color: var(--color-black);
+  }
+}
+
+#syncAccountInfo {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+}
+
+#syncAccountName {
+  font-weight: bold;
+  font-size: 1.3rem;
+}
+
+#syncAccountMail {
+  margin-bottom: 6px
+}
+
+#syncAccountSignOut {
+  place-self: end;
+}