diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
index 4c5442654e09..109745969a7a 100644
--- a/browser/ui/webui/brave_webui_source.cc
+++ b/browser/ui/webui/brave_webui_source.cc
@@ -439,13 +439,17 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
       }
     }, {
       std::string("sync"), {
-        { "done", IDS_BRAVE_SYNC_SHARED_DONE_BUTTON },
+        // Shared strings
         { "remove", IDS_BRAVE_SYNC_SHARED_REMOVE_PARTIAL },
         { "copied", IDS_BRAVE_SYNC_SHARED_COPIED_TEXT },
         { "wordCount",  IDS_BRAVE_SYNC_SHARED_WORD_COUNT_TEXT },
         { "ok", IDS_BRAVE_SYNC_SHARED_OK_BUTTON },
         { "cancel", IDS_BRAVE_SYNC_SHARED_CANCEL_BUTTON },
+        { "cancelDeviceSyncing", IDS_BRAVE_SYNC_SHARED_CANCEL_SYNCING_TITLE },
+        { "cancelDeviceSyncingButton", IDS_BRAVE_SYNC_SHARED_CANCEL_SYNCING_BUTTON },
         { "thisSyncChain", IDS_BRAVE_SYNC_SHARED_FROM_THIS_CHAIN_PARTIAL },
+        { "lookingForDevice", IDS_BRAVE_SYNC_SCAN_CODE_LOOKING_FOR_DEVICE_BUTTON },
+        { "viewSyncCode", IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON },
         // Enabled Content
         { "braveSync", IDS_BRAVE_SYNC_ENABLED_BRAVE_TITLE },
         { "syncChainDevices", IDS_BRAVE_SYNC_ENABLED_DEVICES_CHAIN_TITLE },
@@ -453,8 +457,9 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
         { "thisDevice", IDS_BRAVE_SYNC_ENABLED_TABLE_THIS_DEVICE_TEXT },
         { "addedOn", IDS_BRAVE_SYNC_ENABLED_TABLE_ADDED_ON_TITLE },
         { "addDevice", IDS_BRAVE_SYNC_ENABLED_ADD_DEVICE_BUTTON },
-        { "viewSyncCode", IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON },
-        { "dataToSync", IDS_BRAVE_SYNC_ENABLED_DATA_TITLE },
+        { "settingsTitle", IDS_BRAVE_SYNC_ENABLED_SETTINGS_TITLE },
+        { "settingsDescription", IDS_BRAVE_SYNC_ENABLED_SETTINGS_DESCRIPTION },
+        { "settings", IDS_BRAVE_SYNC_ENABLED_TABLE_SETTINGS },
         { "bookmarks", IDS_BRAVE_SYNC_ENABLED_BOOKMARKS_LABEL },
         { "savedSiteSettings", IDS_BRAVE_SYNC_ENABLED_SITE_SETTINGS_LABEL },
         { "browsingHistory", IDS_BRAVE_SYNC_ENABLED_HISTORY_LABEL },
@@ -464,7 +469,6 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
         { "syncDescription", IDS_BRAVE_SYNC_DISABLED_NEW_CHAIN_DESCRIPTION },
         { "startSyncChain", IDS_BRAVE_SYNC_DISABLED_START_NEW_CHAIN_BUTTON },
         { "enterSyncChainCode", IDS_BRAVE_SYNC_DISABLED_ENTER_CODE_BUTTON },
-        { "confirmSyncCode", IDS_BRAVE_SYNC_DISABLED_CONFIRM_CODE_BUTTON },
         // [modal] Enter Sync Code
         { "enterSyncCode", IDS_BRAVE_SYNC_ENTER_CODE_TITLE },
         { "enterSyncCodeDescription", IDS_BRAVE_SYNC_ENTER_CODE_DESCRIPTION },
@@ -481,27 +485,23 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
         { "deleteSyncDescription", IDS_BRAVE_SYNC_RESET_REMOVAL_INSTRUCTIONS },
         { "startSyncChainHowTo", IDS_BRAVE_SYNC_RESET_START_NEW_INSTRUCTIONS },
         { "areYouSure", IDS_BRAVE_SYNC_RESET_ARE_YOU_SURE_TITLE },
-        // [modal] Add New Chain
-        { "scanThisCode", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_DESCRIPTION },
-        { "scanThisCodeHowTo", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_INSTRUCTIONS },
-        { "enterCodeWordsInstead", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_CODE_WORDS_BUTTON },
-        { "previous", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_PREVIOUS_BUTTON },
-        { "lookingForDevice", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_LOOKING_FOR_DEVICE_BUTTON },
-        // [modal] Add New Chain (Camera Option)
-        // [modal] Add New Chain (no Camera)
-        { "enterThisCode", IDS_BRAVE_SYNC_NEW_CHAIN_DESKTOP_TITLE },
-        { "mobileEnterThisCode", IDS_BRAVE_SYNC_NEW_CHAIN_MOBILE_TITLE },
-        { "syncChainCodeHowTo", IDS_BRAVE_SYNC_NEW_CHAIN_DESCRIPTION },
-        { "useCameraInstead", IDS_BRAVE_SYNC_NEW_CHAIN_USE_CAMERA_BUTTON },
+        // [modal] Scan Code
+        { "scanThisCode", IDS_BRAVE_SYNC_SCAN_CODE_TITLE },
+        { "scanThisCodeHowToPartial1", IDS_BRAVE_SYNC_SCAN_CODE_DESCRIPTION_PARTIAL_1 },
+        { "scanThisCodeHowToPartial2", IDS_BRAVE_SYNC_SCAN_CODE_DESCRIPTION_PARTIAL_2 },
+        { "scanThisCodeHowToPartial3", IDS_BRAVE_SYNC_SCAN_CODE_DESCRIPTION_PARTIAL_3 },
+        // [modal] View Code
+        { "chainCode", IDS_BRAVE_SYNC_VIEW_CODE_TITLE },
+        { "chainCodeDescriptionPartial1", IDS_BRAVE_SYNC_VIEW_CODE_DESCRIPTION_PARTIAL_1 },
+        { "chainCodeDescriptionPartial2", IDS_BRAVE_SYNC_VIEW_CODE_DESCRIPTION_PARTIAL_2 },
+        { "chainCodeDescriptionPartial3", IDS_BRAVE_SYNC_VIEW_CODE_DESCRIPTION_PARTIAL_3 },
+        { "useCameraInstead", IDS_BRAVE_SYNC_VIEW_CODE_USE_CAMERA_BUTTON },
+        { "qrCode", IDS_BRAVE_SYNC_VIEW_CODE_QR_CODE },
         // [modal] Choose Device Type
-        { "letsSync", IDS_BRAVE_SYNC_CHOOSE_DEVICE_NEW_DEVICE_TITLE },
-        { "chooseDeviceType", IDS_BRAVE_SYNC_CHOOSE_DEVICE_CHOOSE_DEVICE_TITLE },
+        { "letsSync", IDS_BRAVE_SYNC_CHOOSE_DEVICE_TITLE },
+        { "chooseDeviceType", IDS_BRAVE_SYNC_CHOOSE_DEVICE_DESCRIPTION },
         { "phoneTablet", IDS_BRAVE_SYNC_CHOOSE_DEVICE_MOBILE_TITLE },
         { "computer", IDS_BRAVE_SYNC_CHOOSE_DEVICE_COMPUTER_TITLE },
-        // [modal] View Sync Code
-        { "qrCode", IDS_BRAVE_SYNC_VIEW_CODE_QR_CODE_TITLE },
-        { "wordCode", IDS_BRAVE_SYNC_VIEW_CODE_WORD_CODE_TITLE },
-        { "privateKey", IDS_BRAVE_SYNC_VIEW_CODE_PRIVATE_KEY_PHRASE },
         // errors
         { "errorWrongCodeTitle", IDS_BRAVE_SYNC_ERROR_WRONG_CODE_TITLE },
         { "errorWrongCodeDescription", IDS_BRAVE_SYNC_ERROR_WRONG_CODE_DESCRIPTION },
diff --git a/components/brave_sync/ui/BUILD.gn b/components/brave_sync/ui/BUILD.gn
index c1f015272312..96df9f047c63 100644
--- a/components/brave_sync/ui/BUILD.gn
+++ b/components/brave_sync/ui/BUILD.gn
@@ -3,8 +3,8 @@ import("//brave/components/common/typescript.gni")
 transpile_web_ui("ui") {
   inputs = [
     "actions/sync_actions.ts",
-    "components/modals/addNewChainCameraOption.tsx",
-    "components/modals/addNewChainNoCamera.tsx",
+    "components/commonDialogs/areYouSure.tsx",
+    "components/commonDialogs/cancelDeviceSyncing.tsx",
     "components/modals/deviceType.tsx",
     "components/modals/enterSyncCode.tsx",
     "components/modals/removeDevice.tsx",
diff --git a/components/brave_sync/ui/actions/sync_actions.ts b/components/brave_sync/ui/actions/sync_actions.ts
index d74a81a12bef..7ba6f6fa3153 100644
--- a/components/brave_sync/ui/actions/sync_actions.ts
+++ b/components/brave_sync/ui/actions/sync_actions.ts
@@ -115,8 +115,8 @@ export const onSyncSetupError = (error: Sync.SetupErrorType) => {
 /**
  * Reset the Sync Error
  */
-export const resetSyncSetupError = () => {
-  return action(types.SYNC_RESET_SETUP_ERROR)
+export const clearSyncSetupError = () => {
+  return action(types.SYNC_CLEAR_SETUP_ERROR)
 }
 
 /**
diff --git a/components/brave_sync/ui/brave_sync.html b/components/brave_sync/ui/brave_sync.html
index b6bfa5a8d8c1..586f9b1955c1 100644
--- a/components/brave_sync/ui/brave_sync.html
+++ b/components/brave_sync/ui/brave_sync.html
@@ -22,7 +22,8 @@
     <script src="/brave_sync.bundle.js"></script>
     <script src="/strings.js"></script>
     <style>
-      #root { height: 100%; }
+      html { background-color: #efeff0; }
+      #syncPage { height: -webkit-fill-available; }
     </style>
   </head>
   <body>
diff --git a/components/brave_sync/ui/components/commonDialogs/areYouSure.tsx b/components/brave_sync/ui/components/commonDialogs/areYouSure.tsx
new file mode 100644
index 000000000000..80472e443a4d
--- /dev/null
+++ b/components/brave_sync/ui/components/commonDialogs/areYouSure.tsx
@@ -0,0 +1,35 @@
+/* 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/. */
+
+import * as React from 'react'
+
+// Components
+import { AlertBox } from 'brave-ui'
+
+// Feature-specific components
+import { Title } from 'brave-ui/features/sync'
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  onClickOk: () => void
+  onClickCancel: () => void
+}
+
+export default class AreYouSure extends React.PureComponent<Props, {}> {
+  render () {
+    const { onClickOk, onClickCancel } = this.props
+    return (
+      <AlertBox
+        okString={getLocale('ok')}
+        onClickOk={onClickOk}
+        cancelString={getLocale('cancel')}
+        onClickCancel={onClickCancel}
+      >
+        <Title level={1}>{getLocale('areYouSure')}</Title>
+      </AlertBox>
+    )
+  }
+}
diff --git a/components/brave_sync/ui/components/commonDialogs/cancelDeviceSyncing.tsx b/components/brave_sync/ui/components/commonDialogs/cancelDeviceSyncing.tsx
new file mode 100644
index 000000000000..bc8fd9d13f4b
--- /dev/null
+++ b/components/brave_sync/ui/components/commonDialogs/cancelDeviceSyncing.tsx
@@ -0,0 +1,36 @@
+/* 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/. */
+
+import * as React from 'react'
+
+// Components
+import { AlertBox } from 'brave-ui'
+
+// Feature-specific components
+import { Title, Paragraph } from 'brave-ui/features/sync'
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  onClickOk: () => void
+  onClickCancel: () => void
+}
+
+export default class AreYouSure extends React.PureComponent<Props, {}> {
+  render () {
+    const { onClickOk, onClickCancel } = this.props
+    return (
+      <AlertBox
+        okString={getLocale('cancelDeviceSyncingButton')}
+        onClickOk={onClickOk}
+        cancelString={getLocale('cancel')}
+        onClickCancel={onClickCancel}
+      >
+        <Title level={1}>{getLocale('areYouSure')}</Title>
+        <Paragraph>{getLocale('cancelDeviceSyncing')}</Paragraph>
+      </AlertBox>
+    )
+  }
+}
diff --git a/components/brave_sync/ui/components/disabledContent.tsx b/components/brave_sync/ui/components/disabledContent.tsx
index ac3f9a8048ea..3faed65cde79 100644
--- a/components/brave_sync/ui/components/disabledContent.tsx
+++ b/components/brave_sync/ui/components/disabledContent.tsx
@@ -11,10 +11,11 @@ import { Button } from 'brave-ui'
 import {
   Main,
   Title,
-  SectionBlock,
   DisabledContentButtonGrid,
   TableGrid,
-  Paragraph
+  Paragraph,
+  SyncCard,
+  DisabledContent
 } from 'brave-ui/features/sync'
 
 import { SyncStartIcon } from 'brave-ui/features/sync/images'
@@ -62,45 +63,43 @@ export default class SyncDisabledContent extends React.PureComponent<Props, Stat
     }
 
     return (
-      <Main>
-        {
-          newToSync
-            ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickNewSyncChainButton} />
-            : null
-        }
-        {
-          existingSyncCode
-            ? <EnterSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickEnterSyncChainCodeButton} />
-            : null
-        }
-        <TableGrid>
-          <SyncStartIcon />
-          <div>
-            <Title level={2}>{getLocale('syncTitle')}</Title>
-            <Paragraph>{getLocale('syncDescription')}</Paragraph>
-            <SectionBlock>
-              <DisabledContentButtonGrid>
-                <div>
+      <DisabledContent>
+        <Main>
+          {
+            newToSync
+              ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickNewSyncChainButton} />
+              : null
+          }
+          {
+            existingSyncCode
+              ? <EnterSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickEnterSyncChainCodeButton} />
+              : null
+          }
+          <SyncCard>
+            <TableGrid>
+              <SyncStartIcon />
+              <div>
+                <Title level={2}>{getLocale('syncTitle')}</Title>
+                <Paragraph>{getLocale('syncDescription')}</Paragraph>
+                <DisabledContentButtonGrid>
                   <Button
                     level='primary'
                     type='accent'
                     onClick={this.onClickNewSyncChainButton}
                     text={getLocale('startSyncChain')}
                   />
-                </div>
-                <div>
                   <Button
                     level='secondary'
                     type='accent'
                     onClick={this.onClickEnterSyncChainCodeButton}
                     text={getLocale('enterSyncChainCode')}
                   />
-                </div>
-              </DisabledContentButtonGrid>
-            </SectionBlock>
-          </div>
-        </TableGrid>
-      </Main>
+                </DisabledContentButtonGrid>
+              </div>
+            </TableGrid>
+          </SyncCard>
+        </Main>
+      </DisabledContent>
     )
   }
 }
diff --git a/components/brave_sync/ui/components/enabledContent.tsx b/components/brave_sync/ui/components/enabledContent.tsx
index 18ff3f871ce0..117bc43a5c39 100644
--- a/components/brave_sync/ui/components/enabledContent.tsx
+++ b/components/brave_sync/ui/components/enabledContent.tsx
@@ -6,6 +6,7 @@ import * as React from 'react'
 
 // Components
 import { Button, AlertBox } from 'brave-ui'
+import { CloseCircleIcon } from 'brave-ui/components/icons'
 import Table, { Cell, Row } from 'brave-ui/components/dataTables/table'
 import { Toggle } from 'brave-ui/features/shields'
 
@@ -13,20 +14,23 @@ import { Toggle } from 'brave-ui/features/shields'
 import {
   Main,
   Title,
-  SettingsToggleGrid,
-  SwitchLabel,
+  Paragraph,
   SectionBlock,
   SubTitle,
   TableRowDevice,
   TableRowRemove,
   TableRowRemoveButton,
+  TableRowToggleButton,
   TableGrid,
-  TableButtonGrid
+  TableButtonGrid,
+  EnabledContent,
+  SyncCard
 } from 'brave-ui/features/sync'
 
 // Modals
 import RemoveDeviceModal from './modals/removeDevice'
 import ViewSyncCodeModal from './modals/viewSyncCode'
+import ScanCodeModal from './modals/scanCode'
 import DeviceTypeModal from './modals/deviceType'
 import ResetSyncModal from './modals/resetSync'
 
@@ -41,6 +45,7 @@ interface Props {
 interface State {
   removeDevice: boolean
   viewSyncCode: boolean
+  scanCode: boolean
   addDevice: boolean
   resetSync: boolean
   deviceToRemoveName: string | undefined
@@ -53,6 +58,7 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     this.state = {
       removeDevice: false,
       viewSyncCode: false,
+      scanCode: false,
       addDevice: false,
       resetSync: false,
       deviceToRemoveName: '',
@@ -60,7 +66,7 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     }
   }
 
-  getRows = (devices?: any): Row[] | undefined => {
+  getDevicesRows = (devices?: any): Row[] | undefined => {
     if (!devices) {
       return
     }
@@ -81,7 +87,7 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
                 data-name={device.name}
                 onClick={this.onClickRemoveDeviceButton}
               >
-                &times;
+                <CloseCircleIcon />
               </TableRowRemoveButton>
             )
           }
@@ -91,7 +97,7 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     })
   }
 
-  get header (): Cell[] {
+  get devicesHeader (): Cell[] {
     return [
       { content: <TableRowDevice>{getLocale('deviceName')}</TableRowDevice> },
       { content: getLocale('addedOn') },
@@ -99,6 +105,33 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     ]
   }
 
+  get settingsHeader (): Cell[] {
+    return [
+      { content: <TableRowDevice>{getLocale('settings')}</TableRowDevice> },
+      { content: '' }
+    ]
+  }
+
+  get settingsRows (): Row[] {
+    return [
+      {
+        content: [
+          { content: getLocale('bookmarks') },
+          { content: (
+            <TableRowToggleButton>
+            <Toggle
+              id='bookmarks'
+              size='large'
+              checked={this.props.syncData.syncBookmarks}
+              onChange={this.onSyncBookmarks}
+            />
+            </TableRowToggleButton>
+          ) }
+        ]
+      }
+    ]
+  }
+
   onClickRemoveDeviceButton = (event: React.MouseEvent<HTMLButtonElement>) => {
     if (!event || !event.currentTarget || !event.currentTarget.dataset) {
       return
@@ -107,16 +140,28 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     this.setState({
       deviceToRemoveName: target.dataset.name,
       deviceToRemoveId: target.dataset.id,
-      removeDevice: !this.state.removeDevice
+      removeDevice: true
     })
   }
 
+  onClickCancelRemoveDeviceButton = () => {
+    this.setState({ removeDevice: !this.state.removeDevice })
+  }
+
   onUserNoticedError = () => {
-    this.props.actions.resetSyncSetupError()
+    this.props.actions.clearSyncSetupError()
+  }
+
+  onClickCancelChildModals = () => {
+    this.setState({ scanCode: false, viewSyncCode: false })
   }
 
   onClickViewSyncCodeButton = () => {
-    this.setState({ viewSyncCode: !this.state.viewSyncCode })
+    this.setState({ scanCode: false, viewSyncCode: true })
+  }
+
+  onClickScanCodeButton = () => {
+    this.setState({ scanCode: true, viewSyncCode: false })
   }
 
   onClickAddDeviceButton = () => {
@@ -136,6 +181,7 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     const {
       removeDevice,
       viewSyncCode,
+      scanCode,
       addDevice,
       resetSync,
       deviceToRemoveName,
@@ -147,98 +193,113 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     }
 
     return (
-      <Main>
-        {
-           syncData.error === 'ERR_SYNC_NO_INTERNET'
-           ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-               <Title>{getLocale('errorNoInternetTitle')}</Title>
-               <SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
-             </AlertBox>
-           : null
-        }
-        {
-          syncData.error === 'ERR_SYNC_INIT_FAILED'
-          ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-              <Title>{getLocale('errorSyncInitFailedTitle')}</Title>
-              <SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
-            </AlertBox>
-          : null
-        }
-        {
-          removeDevice
-            ? (
-              <RemoveDeviceModal
-                deviceName={deviceToRemoveName}
-                deviceId={Number(deviceToRemoveId)}
-                actions={actions}
-                onClose={this.onClickRemoveDeviceButton}
-              />
-            )
-            : null
-        }
-        {
-          viewSyncCode
-            ? <ViewSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickViewSyncCodeButton} />
-            : null
-        }
-        {
-          addDevice
-            ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickAddDeviceButton} />
+      <EnabledContent>
+        <Main>
+          {
+            syncData.error === 'ERR_SYNC_NO_INTERNET'
+            ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
+                <Title>{getLocale('errorNoInternetTitle')}</Title>
+                <SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
+              </AlertBox>
             : null
-        }
-        {
-          resetSync
-            ? <ResetSyncModal syncData={syncData} actions={actions} onClose={this.onClickResetSyncButton} />
+          }
+          {
+            syncData.error === 'ERR_SYNC_INIT_FAILED'
+            ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
+                <Title>{getLocale('errorSyncInitFailedTitle')}</Title>
+                <SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
+              </AlertBox>
             : null
-        }
-        <Title level={2}>{getLocale('braveSync')}</Title>
-        <SectionBlock>
-          <SubTitle level={2}>{getLocale('syncChainDevices')}</SubTitle>
-          <TableGrid>
-            <Table header={this.header} rows={this.getRows(syncData.devices)}>
-              Device list is empty
-            </Table>
-            <TableButtonGrid>
-              <Button
-                level='secondary'
-                type='accent'
-                size='medium'
-                text={getLocale('addDevice')}
-                onClick={this.onClickAddDeviceButton}
-              />
+          }
+          {
+            removeDevice
+              ? (
+                <RemoveDeviceModal
+                  syncData={syncData}
+                  deviceName={deviceToRemoveName}
+                  deviceId={deviceToRemoveId}
+                  actions={actions}
+                  onClose={this.onClickCancelRemoveDeviceButton}
+                />
+              )
+              : null
+          }
+          {
+            viewSyncCode
+              ? (
+                <ViewSyncCodeModal
+                  onClickScanCodeInstead={this.onClickScanCodeButton}
+                  syncData={syncData}
+                  actions={actions}
+                  onClose={this.onClickCancelChildModals}
+                />
+              ) : null
+          }
+          {
+            scanCode
+              ? (
+                <ScanCodeModal
+                  onClickViewSyncCodeInstead={this.onClickViewSyncCodeButton}
+                  syncData={syncData}
+                  actions={actions}
+                  onClose={this.onClickCancelChildModals}
+                />
+              ) : null
+          }
+          {
+            addDevice
+              ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickAddDeviceButton} />
+              : null
+          }
+          {
+            resetSync
+              ? <ResetSyncModal syncData={syncData} actions={actions} onClose={this.onClickResetSyncButton} />
+              : null
+          }
+          <SyncCard>
+            <Title level={2}>{getLocale('braveSync')}</Title>
+            <Paragraph>{getLocale('syncChainDevices')}</Paragraph>
+            <SectionBlock>
+              <TableGrid isDeviceTable={true}>
+                <Table header={this.devicesHeader} rows={this.getDevicesRows(syncData.devices)}>
+                  Device list is empty
+                </Table>
+                <TableButtonGrid>
+                  <br />
+                  <Button
+                    level='secondary'
+                    type='accent'
+                    size='medium'
+                    text={getLocale('viewSyncCode')}
+                    onClick={this.onClickViewSyncCodeButton}
+                  />
+                  <Button
+                    level='primary'
+                    type='accent'
+                    size='medium'
+                    text={getLocale('addDevice')}
+                    onClick={this.onClickAddDeviceButton}
+                  />
+                </TableButtonGrid>
+              </TableGrid>
+            </SectionBlock>
+            <Title level={2}>{getLocale('settingsTitle')}</Title>
+            <Paragraph>{getLocale('settingsDescription')}</Paragraph>
+            <SectionBlock>
+              <Table header={this.settingsHeader} rows={this.settingsRows} />
+            </SectionBlock>
+            <SectionBlock>
               <Button
-                level='secondary'
+                level='primary'
                 type='accent'
                 size='medium'
-                text={getLocale('viewSyncCode')}
-                onClick={this.onClickViewSyncCodeButton}
+                text={getLocale('leaveSyncChain')}
+                onClick={this.onClickResetSyncButton}
               />
-            </TableButtonGrid>
-          </TableGrid>
-        </SectionBlock>
-        <SectionBlock>
-          <SubTitle level={2}>{getLocale('dataToSync')} {syncData.thisDeviceName}</SubTitle>
-          <SettingsToggleGrid>
-            <Toggle
-              id='bookmarks'
-              checked={syncData.syncBookmarks}
-              onChange={this.onSyncBookmarks}
-            />
-            <SwitchLabel htmlFor='bookmarks'>
-              {getLocale('bookmarks')}
-            </SwitchLabel>
-          </SettingsToggleGrid>
-        </SectionBlock>
-        <SectionBlock>
-          <Button
-            level='primary'
-            type='accent'
-            size='medium'
-            text={getLocale('leaveSyncChain')}
-            onClick={this.onClickResetSyncButton}
-          />
-        </SectionBlock>
-      </Main>
+            </SectionBlock>
+          </SyncCard>
+        </Main>
+      </EnabledContent>
     )
   }
 }
diff --git a/components/brave_sync/ui/components/modals/addNewChainCameraOption.tsx b/components/brave_sync/ui/components/modals/addNewChainCameraOption.tsx
deleted file mode 100644
index d05c283d4f9d..000000000000
--- a/components/brave_sync/ui/components/modals/addNewChainCameraOption.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-/* 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/. */
-
-import * as React from 'react'
-
-// Components
-import { Button, Modal, TextAreaClipboard } from 'brave-ui'
-
-// Feature-specific components
-import {
-  ModalHeader,
-  ModalTitle,
-  ModalSubTitle,
-  ModalContent,
-  ThreeColumnButtonGrid,
-  ThreeColumnButtonGridCol2,
-  ThreeColumnButtonGridCol1
-} from 'brave-ui/features/sync'
-
-// Modals
-import ScanCodeModal from './scanCode'
-
-// Utils
-import { getLocale } from '../../../../common/locale'
-
-interface Props {
-  fromMobileScreen?: boolean
-  syncData: Sync.State
-  actions: any
-  onClose: () => void
-}
-
-interface State {
-  useCameraInstead: boolean
-}
-
-export default class AddNewChainCameraOptionModal extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
-    super(props)
-    this.state = {
-      useCameraInstead: false
-    }
-  }
-
-  onClickUseCameraInsteadButton = () => {
-    this.setState({ useCameraInstead: !this.state.useCameraInstead })
-  }
-
-  render () {
-    const { fromMobileScreen, onClose, syncData, actions } = this.props
-    const { useCameraInstead } = this.state
-
-    return (
-      <Modal id='addNewChainCameraOptionModal' onClose={onClose} size='small'>
-        {
-          useCameraInstead
-            ? <ScanCodeModal syncData={syncData} actions={actions} onClose={this.onClickUseCameraInsteadButton} />
-            : null
-        }
-        <ModalHeader>
-          <div>
-            <ModalTitle level={1}>
-              {
-                fromMobileScreen
-                  ? getLocale('mobileEnterThisCode')
-                  : getLocale('enterThisCode')
-              }
-            </ModalTitle>
-            <ModalSubTitle>{getLocale('syncChainCodeHowTo')}</ModalSubTitle>
-          </div>
-        </ModalHeader>
-        <ModalContent>
-          {
-            syncData.syncWords
-            ? (
-              <TextAreaClipboard
-                copiedString={getLocale('copied')}
-                wordCountString={getLocale('wordCount')}
-                readOnly={true}
-                defaultValue={syncData.syncWords}
-              />
-            )
-            : null
-          }
-        </ModalContent>
-        <ThreeColumnButtonGrid>
-          <ThreeColumnButtonGridCol1>
-            <Button
-              level='secondary'
-              type='accent'
-              size='medium'
-              onClick={this.onClickUseCameraInsteadButton}
-              text={getLocale('useCameraInstead')}
-            />
-          </ThreeColumnButtonGridCol1>
-          <ThreeColumnButtonGridCol2>
-            <Button
-              level='secondary'
-              type='accent'
-              size='medium'
-              onClick={onClose}
-              text={getLocale('previous')}
-            />
-            <Button
-              level='primary'
-              type='accent'
-              size='medium'
-              onClick={onClose}
-              disabled={!syncData.isSyncConfigured}
-              text={
-                !syncData.isSyncConfigured
-                ? getLocale('lookingForDevice')
-                : getLocale('ok')
-              }
-            />
-          </ThreeColumnButtonGridCol2>
-        </ThreeColumnButtonGrid>
-      </Modal>
-    )
-  }
-}
diff --git a/components/brave_sync/ui/components/modals/addNewChainNoCamera.tsx b/components/brave_sync/ui/components/modals/addNewChainNoCamera.tsx
deleted file mode 100644
index 6d537d635a5c..000000000000
--- a/components/brave_sync/ui/components/modals/addNewChainNoCamera.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/* 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/. */
-
-import * as React from 'react'
-
-// Components
-import { Button, Modal, TextAreaClipboard } from 'brave-ui'
-
-// Feature-specific components
-import {
-  ModalHeader,
-  ModalTitle,
-  ModalSubTitle,
-  ModalContent,
-  TwoColumnButtonGrid,
-  OneColumnButtonGrid
-} from 'brave-ui/features/sync'
-
-// Utils
-import { getLocale } from '../../../../common/locale'
-
-interface Props {
-  syncData: Sync.State
-  actions: any
-  onClose: () => void
-}
-
-export default class AddNewChainNoCameraModal extends React.PureComponent<Props, {}> {
-  render () {
-    const { onClose, syncData } = this.props
-
-    return (
-      <Modal id='addNewChainNoCameraModal' onClose={onClose} size='small'>
-        <ModalHeader>
-          <div>
-            <ModalTitle level={1}>{getLocale('enterThisCode')}</ModalTitle>
-            <ModalSubTitle>{getLocale('syncChainCodeHowTo')}</ModalSubTitle>
-          </div>
-        </ModalHeader>
-        <ModalContent>
-          {
-            syncData.syncWords
-            ? (
-              <TextAreaClipboard
-                copiedString={getLocale('copied')}
-                wordCountString={getLocale('wordCount')}
-                readOnly={true}
-                defaultValue={syncData.syncWords}
-              />
-            )
-            : null
-          }
-        </ModalContent>
-        <TwoColumnButtonGrid>
-          <OneColumnButtonGrid>
-            <Button
-              level='secondary'
-              type='accent'
-              size='medium'
-              onClick={onClose}
-              text={getLocale('previous')}
-            />
-          </OneColumnButtonGrid>
-          <Button
-            level='primary'
-            type='accent'
-            size='medium'
-            onClick={onClose}
-            disabled={syncData.devices.length < 2}
-            text={
-              syncData.devices.length < 2
-              ? getLocale('lookingForDevice')
-              : getLocale('ok')
-            }
-          />
-        </TwoColumnButtonGrid>
-      </Modal>
-    )
-  }
-}
diff --git a/components/brave_sync/ui/components/modals/deviceType.tsx b/components/brave_sync/ui/components/modals/deviceType.tsx
index f5aec3c09bc5..3f77cbb6d090 100644
--- a/components/brave_sync/ui/components/modals/deviceType.tsx
+++ b/components/brave_sync/ui/components/modals/deviceType.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Components
-import { Button, Modal, AlertBox } from 'brave-ui'
+import { Modal, AlertBox } from 'brave-ui'
 
 // Feature-specific components
 import {
@@ -19,8 +19,8 @@ import {
 } from 'brave-ui/features/sync'
 
 // Modals
-import AddNewChainNoCameraModal from './addNewChainNoCamera'
-import ScanCodeModal from './scanCode'
+import ViewSyncCode from './viewSyncCode'
+import ScanCode from './scanCode'
 
 // Utils
 import { getLocale } from '../../../../common/locale'
@@ -35,7 +35,7 @@ interface Props {
 }
 
 interface State {
-  addNewChainNoCamera: boolean
+  viewSyncCode: boolean
   scanCode: boolean
 }
 
@@ -43,12 +43,12 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      addNewChainNoCamera: false,
+      viewSyncCode: false,
       scanCode: false
     }
   }
 
-  componentWillMount () {
+  componentDidMount () {
     // once the screen is rendered, create a sync chain.
     // this allow us to request the qr code and sync words immediately
     const { thisDeviceName } = this.props.syncData
@@ -58,36 +58,28 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
   }
 
   onUserNoticedError = () => {
-    this.props.actions.resetSyncSetupError()
+    this.props.actions.clearSyncSetupError()
     this.props.onClose()
   }
 
-  onClickClose = () => {
-    const { devices, isSyncConfigured } = this.props.syncData
-    // sync is enabled when at least 2 devices are in the chain.
-    // this modal works both with sync enabled and disabled states.
-    // in case user opens it in the enabled content screen,
-    // check there are 2 devices in chain before reset
-    if (isSyncConfigured && devices.length < 2) {
-      this.props.actions.onSyncReset()
-    }
-    this.props.onClose()
+  onClickCancelChildModals = () => {
+    this.setState({ scanCode: false, viewSyncCode: false })
   }
 
   onClickPhoneTabletButton = () => {
-    this.setState({ scanCode: !this.state.scanCode })
+    this.setState({ scanCode: true, viewSyncCode: false })
   }
 
   onClickComputerButton = () => {
-    this.setState({ addNewChainNoCamera: !this.state.addNewChainNoCamera })
+    this.setState({ scanCode: false, viewSyncCode: true })
   }
 
   render () {
-    const { actions, syncData } = this.props
-    const { addNewChainNoCamera, scanCode } = this.state
+    const { onClose, actions, syncData } = this.props
+    const { viewSyncCode, scanCode } = this.state
 
     return (
-      <Modal id='deviceTypeModal' onClose={this.onClickClose} size='small'>
+      <Modal id='deviceTypeModal' displayCloseButton={false} size='small'>
         {
           syncData.error === 'ERR_SYNC_NO_INTERNET'
           ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
@@ -106,40 +98,42 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
         }
         {
           scanCode
-          ? <ScanCodeModal syncData={syncData} actions={actions} onClose={this.onClickPhoneTabletButton} />
-          : null
+          ? (
+            <ScanCode
+              syncData={syncData}
+              actions={actions}
+              onClose={this.onClickCancelChildModals}
+              onClickViewSyncCodeInstead={this.onClickComputerButton}
+              onCloseDeviceTypeModal={onClose}
+            />
+          ) : null
         }
         {
-          addNewChainNoCamera
-            ? <AddNewChainNoCameraModal syncData={syncData} actions={actions} onClose={this.onClickComputerButton} />
-            : null
+          viewSyncCode
+            ? (
+              <ViewSyncCode
+                syncData={syncData}
+                actions={actions}
+                onClose={this.onClickCancelChildModals}
+                onClickScanCodeInstead={this.onClickPhoneTabletButton}
+                onCloseDeviceTypeModal={onClose}
+              />
+            ) : null
         }
         <ModalHeader>
           <div>
-            <ModalTitle level={1}>{getLocale('letsSync')} “{syncData.thisDeviceName}”.</ModalTitle>
+            <ModalTitle level={1}>{getLocale('letsSync')}</ModalTitle>
             <ModalSubTitle>{getLocale('chooseDeviceType')}</ModalSubTitle>
           </div>
         </ModalHeader>
         <DeviceGrid>
-          <DeviceContainer>
+          <DeviceContainer onClick={this.onClickPhoneTabletButton}>
             <SyncMobileIcon />
-            <Button
-              level='primary'
-              type='accent'
-              size='medium'
-              onClick={this.onClickPhoneTabletButton}
-              text={getLocale('phoneTablet')}
-            />
+            <Title level={2}>{getLocale('phoneTablet')}</Title>
           </DeviceContainer>
-          <DeviceContainer>
+          <DeviceContainer onClick={this.onClickComputerButton}>
           <SyncDesktopIcon />
-            <Button
-              level='primary'
-              type='accent'
-              size='medium'
-              onClick={this.onClickComputerButton}
-              text={getLocale('computer')}
-            />
+          <Title level={2}>{getLocale('computer')}</Title>
           </DeviceContainer>
         </DeviceGrid>
       </Modal>
diff --git a/components/brave_sync/ui/components/modals/enterSyncCode.tsx b/components/brave_sync/ui/components/modals/enterSyncCode.tsx
index 4e7e9f734e49..9dab52363d90 100644
--- a/components/brave_sync/ui/components/modals/enterSyncCode.tsx
+++ b/components/brave_sync/ui/components/modals/enterSyncCode.tsx
@@ -19,6 +19,9 @@ import {
   SubTitle
 } from 'brave-ui/features/sync'
 
+// Icons
+import { LoaderIcon } from 'brave-ui/components/icons'
+
 // Utils
 import { getLocale } from '../../../../common/locale'
 
@@ -29,37 +32,77 @@ interface Props {
 }
 interface State {
   passphrase: string
+  willCreateNewSyncChainFromCode: boolean
 }
 
 export default class EnterSyncCodeModal extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      passphrase: ''
+      passphrase: '',
+      willCreateNewSyncChainFromCode: false
+    }
+  }
+
+  componentDidUpdate (prevProps: Props) {
+    // when component updates with a different config, disable the
+    // loading state and unfreeze the modal. at this point the component
+    // auto refresh and lead the user to the enabledContent view
+    if (
+      this.props.syncData.error !== undefined ||
+      (
+        this.state.willCreateNewSyncChainFromCode &&
+        prevProps.syncData.isSyncConfigured !==
+        this.props.syncData.isSyncConfigured &&
+        this.props.syncData.devices.length > 1
+      )
+    ) {
+      this.setState({ willCreateNewSyncChainFromCode: false })
+      this.props.onClose()
+      return
+    }
+
+    // eventually re-enable this dialog if it takes too long to process.
+    // this is useful when the back-end isn't responsive and avoids letting
+    // the user stuck in a blocked interface. this does not enable sync via code words
+    if (
+      this.state.willCreateNewSyncChainFromCode &&
+      this.props.syncData.isSyncConfigured === false
+      ) {
+      window.setTimeout(() =>
+        this.setState({ willCreateNewSyncChainFromCode: false }
+      ), 30000)
     }
   }
 
   onUserNoticedError = () => {
-    this.props.actions.resetSyncSetupError()
+    this.props.actions.clearSyncSetupError()
   }
 
   onEnterPassphrase = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     this.setState({ passphrase: event.target.value })
   }
 
+  onDismissModal = () => {
+    this.props.onClose()
+  }
+
   onClickConfirmSyncCode = () => {
     const { error, thisDeviceName } = this.props.syncData
     if (thisDeviceName !== '' || error) {
       return
     }
     const { passphrase } = this.state
+    this.setState({ willCreateNewSyncChainFromCode: true })
     this.props.actions.onSetupSyncHaveCode(passphrase, '')
   }
 
   render () {
-    const { onClose, syncData } = this.props
+    const { syncData } = this.props
+    const { willCreateNewSyncChainFromCode } = this.state
+
     return (
-      <Modal id='enterSyncCodeModal' onClose={onClose} size='small'>
+      <Modal id='enterSyncCodeModal' displayCloseButton={false} size='small'>
         {
            syncData.error === 'ERR_SYNC_WRONG_WORDS'
            ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
@@ -110,7 +153,8 @@ export default class EnterSyncCodeModal extends React.PureComponent<Props, State
               level='secondary'
               type='accent'
               size='medium'
-              onClick={onClose}
+              disabled={willCreateNewSyncChainFromCode}
+              onClick={this.onDismissModal}
               text={getLocale('cancel')}
             />
           </OneColumnButtonGrid>
@@ -120,6 +164,11 @@ export default class EnterSyncCodeModal extends React.PureComponent<Props, State
             size='medium'
             onClick={this.onClickConfirmSyncCode}
             text={getLocale('confirmCode')}
+            disabled={willCreateNewSyncChainFromCode}
+            icon={{
+              position: 'after',
+              image: willCreateNewSyncChainFromCode && <LoaderIcon />
+            }}
           />
         </TwoColumnButtonGrid>
       </Modal>
diff --git a/components/brave_sync/ui/components/modals/removeDevice.tsx b/components/brave_sync/ui/components/modals/removeDevice.tsx
index 2a445893a9da..f9312f522c64 100644
--- a/components/brave_sync/ui/components/modals/removeDevice.tsx
+++ b/components/brave_sync/ui/components/modals/removeDevice.tsx
@@ -17,35 +17,70 @@ import {
   OneColumnButtonGrid
 } from 'brave-ui/features/sync'
 
+// Icons
+import { LoaderIcon } from 'brave-ui/components/icons'
+
 // Utils
 import { getLocale } from '../../../../common/locale'
 
 interface Props {
+  syncData: Sync.State
   onClose: (event?: React.MouseEvent<HTMLButtonElement>) => void
   actions: any
   deviceName: string | undefined
-  deviceId: number | undefined
+  deviceId: string | undefined
+}
+
+interface State {
+  willRemoveDevice: boolean
 }
 
-export default class RemoveMainDeviceModal extends React.PureComponent<Props, {}> {
+export default class RemoveMainDeviceModal extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = { willRemoveDevice: false }
+  }
+
+  componentDidUpdate (prevProps: Props) {
+    // if devices lengh is different it means that sync
+    // computed the device removal. in this case, cancel
+    // the loading state and close the modal
+    if (
+      prevProps.syncData.devices.length !==
+      this.props.syncData.devices.length
+    ) {
+      this.setState({ willRemoveDevice: false })
+      this.props.onClose()
+    }
+  }
+
+  onDismissModal = () => {
+    this.props.onClose()
+  }
+
   onClickConfirmRemoveDeviceButton = () => {
-    const { deviceName, deviceId } = this.props
+    const { syncData, deviceName, deviceId } = this.props
+    // if there aren't enough devices, reset sync
+    if (syncData.devices.length < 2) {
+      this.props.actions.onSyncReset()
+      return
+    }
     this.props.actions.onRemoveDevice(Number(deviceId), deviceName)
-    this.props.onClose()
+    this.setState({ willRemoveDevice: true })
   }
 
   render () {
-    const { onClose, deviceName, deviceId } = this.props
+    const { syncData, deviceName, deviceId } = this.props
+    const { willRemoveDevice } = this.state
 
     return (
-      <Modal id='removeMainDeviceModal' onClose={onClose} size='small'>
+      <Modal id='removeMainDeviceModal' displayCloseButton={false} size='small'>
         <ModalHeader>
           <ModalTitle level={1}>{getLocale('remove')} “{deviceName}” {getLocale('thisSyncChain')}?</ModalTitle>
         </ModalHeader>
         <ModalContent>
           {
-            // zero is always the this device
-            deviceId === 0
+            deviceId === syncData.thisDeviceId
             ? <div>
                 <Paragraph>{getLocale('thisDeviceRemovalDescription')}</Paragraph>
                 <Paragraph>{getLocale('joinSyncChain')}</Paragraph>
@@ -57,18 +92,24 @@ export default class RemoveMainDeviceModal extends React.PureComponent<Props, {}
             <OneColumnButtonGrid>
               <Button
                 level='secondary'
-                type='accent'
+                type='subtle'
                 size='medium'
-                onClick={onClose}
+                onClick={this.onDismissModal}
+                disabled={willRemoveDevice}
                 text={getLocale('cancel')}
               />
             </OneColumnButtonGrid>
             <Button
               level='primary'
-              type='accent'
+              type='warn'
               size='medium'
               onClick={this.onClickConfirmRemoveDeviceButton}
               text={getLocale('remove')}
+              disabled={willRemoveDevice}
+              icon={{
+                position: 'after',
+                image: willRemoveDevice && <LoaderIcon />
+              }}
             />
         </TwoColumnButtonGrid>
       </Modal>
diff --git a/components/brave_sync/ui/components/modals/resetSync.tsx b/components/brave_sync/ui/components/modals/resetSync.tsx
index 56b32eb4691a..100177848d99 100644
--- a/components/brave_sync/ui/components/modals/resetSync.tsx
+++ b/components/brave_sync/ui/components/modals/resetSync.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Components
-import { AlertBox, Button, Modal } from 'brave-ui'
+import { Button, Modal } from 'brave-ui'
 
 // Feature-specific components
 import {
@@ -15,10 +15,15 @@ import {
   ModalContent,
   TwoColumnButtonGrid,
   OneColumnButtonGrid,
-  Title,
   Paragraph
 } from 'brave-ui/features/sync'
 
+// Icons
+import { LoaderIcon } from 'brave-ui/components/icons'
+
+// Dialogs
+import AreYouSure from '../commonDialogs/areYouSure'
+
 // Utils
 import { getLocale } from '../../../../common/locale'
 
@@ -30,45 +35,58 @@ interface Props {
 
 interface State {
   showAlert: boolean
+  willResetSync: boolean
 }
 
 export default class ResetSyncModal extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
-    this.state = { showAlert: false }
+    this.state = {
+      showAlert: false,
+      willResetSync: false
+    }
+  }
+
+  componentDidUpdate (prevProps: Props) {
+    // wait until sync is not configured to proceed
+    if (
+      prevProps.syncData.isSyncConfigured !==
+      this.props.syncData.isSyncConfigured
+    ) {
+      this.setState({ willResetSync: false })
+      this.props.onClose()
+    }
+  }
+
+  onDismissModal = () => {
+    this.props.onClose()
   }
 
-  onResetSync = () => {
+  onClickResetSync = () => {
     this.setState({ showAlert: !this.state.showAlert })
   }
 
   onConfirmResetSync = () => {
+    this.setState({
+      showAlert: false,
+      willResetSync: true
+    })
     this.props.actions.onSyncReset()
   }
 
   render () {
-    const { onClose, syncData } = this.props
-    const { showAlert } = this.state
+    const { syncData } = this.props
+    const { showAlert, willResetSync } = this.state
 
     if (!syncData) {
       return null
     }
 
     return (
-      <Modal id='resetSyncModal' onClose={onClose} size='small'>
+      <Modal id='resetSyncModal' displayCloseButton={false} size='small'>
         {
-          showAlert
-          ? (
-              <AlertBox
-                okString={getLocale('ok')}
-                onClickOk={this.onConfirmResetSync}
-                cancelString={getLocale('cancel')}
-                onClickCancel={onClose}
-              >
-                <Title level={1}>{getLocale('areYouSure')}</Title>
-              </AlertBox>
-            )
-          : null
+          showAlert &&
+          <AreYouSure onClickOk={this.onConfirmResetSync} onClickCancel={this.onClickResetSync} />
         }
         <ModalHeader>
           <div>
@@ -84,18 +102,24 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
             <OneColumnButtonGrid>
               <Button
                 level='secondary'
-                type='accent'
+                type='subtle'
                 size='medium'
-                onClick={onClose}
+                onClick={this.onDismissModal}
                 text={getLocale('cancel')}
+                disabled={willResetSync}
               />
             </OneColumnButtonGrid>
             <Button
               level='primary'
-              type='accent'
+              type='warn'
               size='medium'
-              onClick={this.onResetSync}
+              onClick={this.onClickResetSync}
               text={getLocale('remove')}
+              disabled={willResetSync}
+              icon={{
+                position: 'after',
+                image: willResetSync && <LoaderIcon />
+              }}
             />
           </TwoColumnButtonGrid>
       </Modal>
diff --git a/components/brave_sync/ui/components/modals/scanCode.tsx b/components/brave_sync/ui/components/modals/scanCode.tsx
index ef2fd401febd..dd2928e16ee2 100644
--- a/components/brave_sync/ui/components/modals/scanCode.tsx
+++ b/components/brave_sync/ui/components/modals/scanCode.tsx
@@ -6,20 +6,21 @@ import * as React from 'react'
 
 // Components
 import { Button, Modal } from 'brave-ui'
+import { LoaderIcon } from 'brave-ui/components/icons'
 
 // Feature-specific components
 import {
   ModalHeader,
-  ModalTitle,
-  ModalSubTitle,
+  Title,
+  Bold,
+  Paragraph,
   ScanGrid,
   ThreeColumnButtonGrid,
-  ThreeColumnButtonGridCol1,
-  ThreeColumnButtonGridCol2
+  Link
 } from 'brave-ui/features/sync'
 
-// Modals
-import AddNewChainCameraOptionModal from './addNewChainCameraOption'
+// Dialogs
+import CancelDeviceSyncingDialog from '../commonDialogs/cancelDeviceSyncing'
 
 // Utils
 import { getLocale } from '../../../../common/locale'
@@ -31,38 +32,95 @@ interface Props {
   syncData: Sync.State
   actions: any
   onClose: () => void
+  onClickViewSyncCodeInstead: () => void
+  onCloseDeviceTypeModal?: () => void
 }
+
 interface State {
-  enterCodeWordsInstead: boolean
+  willCancelScanCode: boolean
+  newDeviceFound: boolean
 }
 
 export default class ScanCodeModal extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      enterCodeWordsInstead: false
+      willCancelScanCode: false,
+      newDeviceFound: false
+    }
+  }
+
+  componentDidUpdate (prevProps: Readonly<Props>) {
+    if (
+        this.props.syncData.devices.length > 1 &&
+        prevProps.syncData.devices.length !==
+        this.props.syncData.devices.length
+    ) {
+      this.setState({ newDeviceFound: true })
+    }
+
+    const { newDeviceFound } = this.state
+    // when a device is found, self-close all modals
+    if (newDeviceFound) {
+      this.dismissAllModals()
+    }
+  }
+
+  dismissAllModals = () => {
+    this.props.onClose()
+    if (this.props.onCloseDeviceTypeModal) {
+      this.props.onCloseDeviceTypeModal()
     }
   }
 
-  onClickEnterCodeWordsInstead = () => {
-    this.setState({ enterCodeWordsInstead: !this.state.enterCodeWordsInstead })
+  onClickViewCodeWordsInstead = () => {
+    this.props.onClickViewSyncCodeInstead()
+  }
+
+  onDismissModal = () => {
+    const { devices, isSyncConfigured } = this.props.syncData
+    // if user is still trying to build a sync chain,
+    // open the confirmation modal. otherwise close it
+    isSyncConfigured && devices.length < 2
+      ? this.setState({ willCancelScanCode: true })
+      : this.dismissAllModals()
+  }
+
+  onDismissDialog = () => {
+    this.setState({ willCancelScanCode: false })
+  }
+
+  onConfirmDismissModal = () => {
+    const { devices, isSyncConfigured } = this.props.syncData
+    // sync is enabled when at least 2 devices are in the chain.
+    // this modal works both with sync enabled and disabled states.
+    // in case user opens it in the enabled content screen,
+    // check there are 2 devices in chain before reset
+    if (isSyncConfigured && devices.length < 2) {
+      this.props.actions.onSyncReset()
+      this.dismissAllModals()
+    }
+    this.setState({ willCancelScanCode: false })
+    this.props.onClose()
   }
 
   render () {
-    const { onClose, syncData, actions } = this.props
-    const { enterCodeWordsInstead } = this.state
+    const { syncData } = this.props
+    const { willCancelScanCode, newDeviceFound } = this.state
 
     return (
-      <Modal id='scanCodeModal' onClose={onClose} size='small'>
+      <Modal id='scanCodeModal' displayCloseButton={false} size='small'>
         {
-          enterCodeWordsInstead
-            ? <AddNewChainCameraOptionModal syncData={syncData} actions={actions} fromMobileScreen={true} onClose={this.onClickEnterCodeWordsInstead} />
-            : null
+          willCancelScanCode
+          ? <CancelDeviceSyncingDialog onClickCancel={this.onDismissDialog} onClickOk={this.onConfirmDismissModal} />
+          : null
         }
         <ModalHeader>
           <div>
-            <ModalTitle level={1}>{getLocale('scanThisCode')}</ModalTitle>
-            <ModalSubTitle>{getLocale('scanThisCodeHowTo')}</ModalSubTitle>
+            <Title level={1}>{getLocale('scanThisCode')}</Title>
+            <Paragraph>
+              {getLocale('scanThisCodeHowToPartial1')} <Bold>{getLocale('scanThisCodeHowToPartial2')}</Bold> {getLocale('scanThisCodeHowToPartial3')}
+            </Paragraph>
           </div>
         </ModalHeader>
         <ScanGrid>
@@ -74,36 +132,38 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
           }
         </ScanGrid>
         <ThreeColumnButtonGrid>
-          <ThreeColumnButtonGridCol1>
-            <Button
-              level='secondary'
-              type='accent'
-              size='medium'
-              onClick={this.onClickEnterCodeWordsInstead}
-              text={getLocale('enterCodeWordsInstead')}
-            />
-          </ThreeColumnButtonGridCol1>
-          <ThreeColumnButtonGridCol2>
+          <div>
+            <Link onClick={this.onDismissModal}>{getLocale('cancel')}</Link>
+          </div>
+          <div>
             <Button
               level='secondary'
-              type='accent'
+              type='subtle'
               size='medium'
-              onClick={onClose}
-              text={getLocale('previous')}
+              onClick={this.onClickViewCodeWordsInstead}
+              text={getLocale('viewSyncCode')}
             />
+          </div>
+          <div>
             <Button
               level='primary'
               type='accent'
               size='medium'
-              onClick={onClose}
-              disabled={!syncData.isSyncConfigured}
+              onClick={this.onDismissModal}
+              disabled={newDeviceFound === false}
               text={
-                !syncData.isSyncConfigured
+                newDeviceFound === false
                 ? getLocale('lookingForDevice')
                 : getLocale('ok')
               }
+              icon={{
+                position: 'before',
+                image: newDeviceFound === false
+                  ? <LoaderIcon />
+                  : null
+              }}
             />
-          </ThreeColumnButtonGridCol2>
+          </div>
         </ThreeColumnButtonGrid>
       </Modal>
     )
diff --git a/components/brave_sync/ui/components/modals/viewSyncCode.tsx b/components/brave_sync/ui/components/modals/viewSyncCode.tsx
index 4a6da3df73ed..ade60cf2f11d 100644
--- a/components/brave_sync/ui/components/modals/viewSyncCode.tsx
+++ b/components/brave_sync/ui/components/modals/viewSyncCode.tsx
@@ -4,37 +4,121 @@
 
 import * as React from 'react'
 
- // Components
+// Components
 import { Button, Modal, TextAreaClipboard } from 'brave-ui'
+import { LoaderIcon } from 'brave-ui/components/icons'
 
 // Feature-specific components
 import {
-  ViewSyncCodeGrid,
-  ModalTitle,
-  TwoColumnButtonGrid
+  ModalHeader,
+  Title,
+  Paragraph,
+  ThreeColumnButtonGrid,
+  Bold,
+  Link
 } from 'brave-ui/features/sync'
 
+// Dialogs
+import CancelDeviceSyncingDialog from '../commonDialogs/cancelDeviceSyncing'
+
 // Utils
 import { getLocale } from '../../../../common/locale'
 
-// Images
-import { QRCode } from 'brave-ui/features/sync/images'
-
 interface Props {
   syncData: Sync.State
   actions: any
   onClose: () => void
+  onClickScanCodeInstead: () => void
+  onCloseDeviceTypeModal?: () => void
+}
+
+interface State {
+  willCancelViewCode: boolean
+  newDeviceFound: boolean
 }
 
-export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
+export default class ViewSyncCodeModal extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {
+      willCancelViewCode: false,
+      newDeviceFound: false
+    }
+  }
+
+  componentDidUpdate (prevProps: Readonly<Props>) {
+    if (
+        this.props.syncData.devices.length > 1 &&
+        prevProps.syncData.devices.length !==
+        this.props.syncData.devices.length
+    ) {
+      this.setState({ newDeviceFound: true })
+    }
+
+    const { newDeviceFound } = this.state
+    // when a device is found, self-close this modal
+    if (newDeviceFound) {
+      this.dismissAllModals()
+    }
+  }
+
+  dismissAllModals = () => {
+    this.props.onClose()
+    if (this.props.onCloseDeviceTypeModal) {
+      this.props.onCloseDeviceTypeModal()
+    }
+  }
+
+  onClickUseCameraInsteadButton = () => {
+    this.props.onClickScanCodeInstead()
+  }
+
+  onDismissModal = () => {
+    const { devices, isSyncConfigured } = this.props.syncData
+    // if user is still trying to build a sync chain,
+    // open the confirmation modal. otherwise close it
+    isSyncConfigured && devices.length < 2
+      ? this.setState({ willCancelViewCode: true })
+      : this.dismissAllModals()
+  }
+
+  onDismissDialog = () => {
+    this.setState({ willCancelViewCode: false })
+  }
+
+  onConfirmDismissModal = () => {
+    const { devices, isSyncConfigured } = this.props.syncData
+    // sync is enabled when at least 2 devices are in the chain.
+    // this modal works both with sync enabled and disabled states.
+    // in case user opens it in the enabled content screen,
+    // check there are 2 devices in chain before reset
+    if (isSyncConfigured && devices.length < 2) {
+      this.props.actions.onSyncReset()
+      this.dismissAllModals()
+    }
+    this.setState({ willCancelViewCode: false })
+    this.props.onClose()
+  }
+
   render () {
-    const { onClose, syncData } = this.props
+    const { syncData } = this.props
+    const { willCancelViewCode, newDeviceFound } = this.state
 
     return (
-      <Modal id='viewSyncCodeModal' onClose={onClose} size='small'>
-        <ViewSyncCodeGrid>
+      <Modal id='viewSyncCodeModal' displayCloseButton={false} size='small'>
+        {
+          willCancelViewCode
+          ? <CancelDeviceSyncingDialog onClickCancel={this.onDismissDialog} onClickOk={this.onConfirmDismissModal} />
+          : null
+        }
+        <ModalHeader>
           <div>
-            <ModalTitle level={3}>{getLocale('wordCode')}</ModalTitle>
+            <Title level={1}>{getLocale('chainCode')}</Title>
+            <Paragraph>
+              {getLocale('chainCodeDescriptionPartial1')} <Bold>{getLocale('chainCodeDescriptionPartial2')}</Bold> {getLocale('chainCodeDescriptionPartial3')}
+            </Paragraph>
+          </div>
+        </ModalHeader>
           {
             syncData.syncWords
             ? (
@@ -47,35 +131,38 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
             )
             : null
           }
+        <ThreeColumnButtonGrid>
+          <div>
+            <Link onClick={this.onDismissModal}>{getLocale('cancel')}</Link>
           </div>
           <div>
-            <ModalTitle level={3}>{getLocale('qrCode')}</ModalTitle>
-            {
-              syncData.seedQRImageSource
-                ? (
-                  <QRCode
-                    size='small'
-                    src={syncData.seedQRImageSource}
-                    style={{
-                      // TODO: @cezaraugusto fix this in brave-ui
-                      border: '1px solid #DFDFE8'
-                    }}
-                  />
-                )
-                : null
-            }
+            <Button
+              level='secondary'
+              type='subtle'
+              size='medium'
+              onClick={this.onClickUseCameraInsteadButton}
+              text={getLocale('qrCode')}
+            />
           </div>
-        </ViewSyncCodeGrid>
-        <TwoColumnButtonGrid>
-          <div>{getLocale('privateKey')}</div>
           <Button
             level='primary'
             type='accent'
             size='medium'
-            onClick={onClose}
-            text={getLocale('done')}
+            onClick={this.onDismissModal}
+            disabled={newDeviceFound === false}
+            text={
+              newDeviceFound === false
+              ? getLocale('lookingForDevice')
+              : getLocale('ok')
+            }
+            icon={{
+              position: 'before',
+              image: newDeviceFound === false
+                ? <LoaderIcon />
+                : null
+            }}
           />
-        </TwoColumnButtonGrid>
+        </ThreeColumnButtonGrid>
       </Modal>
     )
   }
diff --git a/components/brave_sync/ui/constants/sync_types.ts b/components/brave_sync/ui/constants/sync_types.ts
index ac14364769ad..b08758d0f6cc 100644
--- a/components/brave_sync/ui/constants/sync_types.ts
+++ b/components/brave_sync/ui/constants/sync_types.ts
@@ -16,6 +16,6 @@ export const enum types {
   SYNC_BROWSING_HISTORY = '@@sync/SYNC_BROWSING_HISTORY',
   SYNC_SETUP_SYNC_HAVE_CODE = '@@sync/SYNC_SETUP_SYNC_HAVE_CODE',
   SYNC_SETUP_ERROR = '@@sync/SYNC_SETUP_ERROR',
-  SYNC_RESET_SETUP_ERROR = '@@sync/SYNC_RESET_SETUP_ERROR',
+  SYNC_CLEAR_SETUP_ERROR = '@@sync/SYNC_CLEAR_SETUP_ERROR',
   SYNC_ON_LOG_MESSAGE = '@@sync/SYNC_ON_LOG_MESSAGE'
 }
diff --git a/components/brave_sync/ui/reducers/sync_reducer.ts b/components/brave_sync/ui/reducers/sync_reducer.ts
index 3c8b9de3e740..c87cec88ffe5 100644
--- a/components/brave_sync/ui/reducers/sync_reducer.ts
+++ b/components/brave_sync/ui/reducers/sync_reducer.ts
@@ -125,7 +125,7 @@ const syncReducer: Reducer<Sync.State | undefined> = (state: Sync.State | undefi
       state = { ...state, error: payload.error }
       break
 
-    case types.SYNC_RESET_SETUP_ERROR:
+    case types.SYNC_CLEAR_SETUP_ERROR:
       state = { ...state, error: undefined }
       break
 
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
index 80b7c2d01aed..5d5f9c50ab9a 100644
--- a/components/resources/brave_components_strings.grd
+++ b/components/resources/brave_components_strings.grd
@@ -454,25 +454,31 @@
       <message name="IDS_BRAVE_SYNC_SHARED_WORD_COUNT_TEXT" desc="The Sync `word count` phrase that shows how many words are in a textarea field">Word Count:</message>
       <message name="IDS_BRAVE_SYNC_SHARED_OK_BUTTON" desc="The Sync `ok` button that indicates user is aware of what is being written">Ok</message>
       <message name="IDS_BRAVE_SYNC_SHARED_CANCEL_BUTTON" desc="The Sync `cancel` button that closes the current modal">Cancel</message>
+      <message name="IDS_BRAVE_SYNC_SHARED_CANCEL_SYNCING_TITLE" desc="The Sync phrase for when the user is about to reset sync by closing the `view code` or `scan code` modal">Exiting this modal early will delete the current chain and the devices looking for this code will not be able to sync. This modal will exit automatically when a successful sync connection is made.</message>
+      <message name="IDS_BRAVE_SYNC_SHARED_CANCEL_SYNCING_BUTTON" desc="The Sync button label for when the user is about to reset sync by closing the `view code` or `scan code` modal">Exit Modal</message>
       <message name="IDS_BRAVE_SYNC_SHARED_FROM_THIS_CHAIN_PARTIAL" desc="The Sync partial phrase included in `remove X from this sync chain` where X is the user's device name">from this sync chain</message>
+      <message name="IDS_BRAVE_SYNC_SHARED_VIEW_CODE_BUTTON" desc="The Sync button to enter code words instead of scanning the current code">View Code Words</message>
+      <message name="IDS_BRAVE_SYNC_SCAN_CODE_LOOKING_FOR_DEVICE_BUTTON" desc="The Sync temporary button that holds while a device is not found yet">Looking for device</message>
       <!-- WebUI brave sync resources: Enabled Content -->
       <message name="IDS_BRAVE_SYNC_ENABLED_BRAVE_TITLE" desc="The Brae Sync title">Brave Sync</message>
-      <message name="IDS_BRAVE_SYNC_ENABLED_DEVICES_CHAIN_TITLE" desc="The Sync title for the table of devices synced">Devices in your sync chain</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_DEVICES_CHAIN_TITLE" desc="The Sync title for the table of devices synced">The device list below includes all devices in your sync chain. Each device can be managed from any other device.</message>
       <message name="IDS_BRAVE_SYNC_ENABLED_TABLE_DEVICE_NAME_TITLE" desc="The Sync table title for the device column">device name</message>
       <message name="IDS_BRAVE_SYNC_ENABLED_TABLE_THIS_DEVICE_TEXT" desc="The Sync table title for the device column">(This Device)</message>
-      <message name="IDS_BRAVE_SYNC_ENABLED_TABLE_ADDED_ON_TITLE" desc="The Sync table title indicating when a device was added to the chain">added on</message>
-      <message name="IDS_BRAVE_SYNC_ENABLED_ADD_DEVICE_BUTTON" desc="The Sync button `add device` for adding a new device to the sync chain. triggers a modal with device options">add device</message>
-      <message name="IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON" desc="The Sync button `view sync code` for viewing the passphrase and qr code needed to add a new device. triggers a modal with sync code">view QR code and code words</message>
-      <message name="IDS_BRAVE_SYNC_ENABLED_DATA_TITLE" desc="The Sync title that shows the options for data syncing">Data to sync from</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_TABLE_ADDED_ON_TITLE" desc="The Sync table title indicating when a device was added to the chain">Date Added</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_ADD_DEVICE_BUTTON" desc="The Sync button `add device` for adding a new device to the sync chain. triggers a modal with device options">Add New Device</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON" desc="The Sync button `view sync code` for viewing the passphrase and qr code needed to add a new device. triggers a modal with sync code">View Sync Code</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_SETTINGS_TITLE" desc="The Sync title that shows the options for data syncing">Brave Sync Settings</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_SETTINGS_DESCRIPTION" desc="The Sync description that shows the options for data syncing">Manage what information you would like to sync between devices. These settings only effect this device.</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_TABLE_SETTINGS" desc="The Sync description that shows the options for data syncing">Settings</message>
       <message name="IDS_BRAVE_SYNC_ENABLED_BOOKMARKS_LABEL" desc="The Sync label for the `bookmarks` toggle">Bookmarks</message>
       <message name="IDS_BRAVE_SYNC_ENABLED_SITE_SETTINGS_LABEL" desc="The Sync label for the `saved site settings` toggle">Saved Site Settings</message>
       <message name="IDS_BRAVE_SYNC_ENABLED_HISTORY_LABEL" desc="The Sync label for the `browsing history` toggle">Browsing History</message>
       <message name="IDS_BRAVE_SYNC_ENABLED_LEAVE_CHAIN_BUTTON" desc="The Sync button that opens a modal to leave the current sync chain">Leave Sync Chain</message>
       <!-- WebUI brave sync resources: Disabled Content -->
-      <message name="IDS_BRAVE_SYNC_DISABLED_DESCRIPTION" desc="The Sync phrase explaining what sync can do. Appears when sync is disabled.">Brave Sync allows you to sync bookmarks data privately between your Brave Browsers on your various devices.</message>
-      <message name="IDS_BRAVE_SYNC_DISABLED_NEW_CHAIN_DESCRIPTION" desc="The Sync phrase explaining what happens when you start a new sync chain. Appears when sync is disabled.">When you start a new sync chain, a new sync code is created. You will use this same code across your devices to link them together.</message>
-      <message name="IDS_BRAVE_SYNC_DISABLED_START_NEW_CHAIN_BUTTON" desc="The Sync button that triggers a modal to start a new sync chian">Start a new sync chain</message>
-      <message name="IDS_BRAVE_SYNC_DISABLED_ENTER_CODE_BUTTON" desc="The Sync button that triggers a modal asking for the sync chain code passphrase">Enter a sync chain code</message>
+      <message name="IDS_BRAVE_SYNC_DISABLED_DESCRIPTION" desc="The Brave Sync title.">Brave Sync Setup</message>
+      <message name="IDS_BRAVE_SYNC_DISABLED_NEW_CHAIN_DESCRIPTION" desc="The Sync phrase explaining what happens when you start a new sync chain. Appears when sync is disabled.">To start, you will need Brave installed on all the devices you plan to sync. To chain them together, start a sync chain that you will use to securely link all of your devices together.</message>
+      <message name="IDS_BRAVE_SYNC_DISABLED_START_NEW_CHAIN_BUTTON" desc="The Sync button that triggers a modal to start a new sync chian">Start a New Sync Chain</message>
+      <message name="IDS_BRAVE_SYNC_DISABLED_ENTER_CODE_BUTTON" desc="The Sync button that triggers a modal asking for the sync chain code passphrase">I Have a Sync Code</message>
       <message name="IDS_BRAVE_SYNC_DISABLED_CONFIRM_CODE_BUTTON" desc="The Sync button to confirm the Sync code that was inputed by the user">Confirm Sync Code</message>
       <!-- WebUI brave sync resources: [modal] Enter Sync Code -->
       <message name="IDS_BRAVE_SYNC_ENTER_CODE_TITLE" desc="The Sync modal title for `enter sync code`">Enter a sync code</message>
@@ -490,27 +496,23 @@
       <message name="IDS_BRAVE_SYNC_RESET_REMOVAL_INSTRUCTIONS" desc="The Sync phrase explaining what happens if you reset your sync chain. Used in the `reset sync` modal">Your local data on this device will be retained but all data in Brave’s Sync cache will be deleted.</message>
       <message name="IDS_BRAVE_SYNC_RESET_START_NEW_INSTRUCTIONS" desc="The Sync phrase explaining how you can start a new sync chain after reseting sync. Used in the `reset sync` modal">You can start a new sync chain or sync with a new device by entering its sync chain code.</message>
       <message name="IDS_BRAVE_SYNC_RESET_ARE_YOU_SURE_TITLE" desc="The Sync dialog title asking if user is sure about the action of reseting sync">Are you sure?</message>
-      <!-- WebUI brave sync resources: [modal] Add New Chain -->
-      <message name="IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_DESCRIPTION" desc="The Sync phrase in `add new chain` modal asking to scan the sync code">Now, using Brave on your mobile device, scan this code.</message>
-      <message name="IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_INSTRUCTIONS" desc="The Sync phrase in `add new chain` suggesting the step to accomplish the new chain syncing">Go to: Brave Settings &gt; Sync &gt; Scan Sync Code</message>
-      <message name="IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_CODE_WORDS_BUTTON" desc="The Sync button to enter code words instead of scanning the current code">Enter code words instead...</message>
-      <message name="IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_PREVIOUS_BUTTON" desc="The Sync button to go back to the previous action">&lt; Previous</message>
-      <message name="IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_LOOKING_FOR_DEVICE_BUTTON" desc="The Sync temporary button that holds while a device is not found yet">Looking for device</message>
-      <!-- WebUI brave sync resources: [modal] Add New Chain (Camera Option) -->
-      <!-- WebUI brave sync resources: [modal] Add New Chain (no Camera) -->
-      <message name="IDS_BRAVE_SYNC_NEW_CHAIN_DESKTOP_TITLE" desc="The Sync title phrase suggesting user to enter the sync code. Appears in the `add new chain` modal (both)">Now, using Brave on your computer, enter this code:</message>
-      <message name="IDS_BRAVE_SYNC_NEW_CHAIN_MOBILE_TITLE" desc="The Sync title phrase suggesting user to enter the sync code. Appears in the `add new chain` modal (both)">Now, using Brave on your mobile device, enter this code:</message>
-      <message name="IDS_BRAVE_SYNC_NEW_CHAIN_DESCRIPTION" desc="The Sync description suggesting where to go with the current sync code">Go to: Brave Settings &gt; Sync &gt; Enter a Sync Chain Code</message>
-      <message name="IDS_BRAVE_SYNC_NEW_CHAIN_USE_CAMERA_BUTTON" desc="The Sync button to use your camera to sync the code instead of copying the sync code">Use my camera instead...</message>
+      <!-- WebUI brave sync resources: [modal] Scan Code -->
+      <message name="IDS_BRAVE_SYNC_SCAN_CODE_TITLE" desc="The Sync title for the `scan sync code` modal">Sync Chain QR Code</message>
+      <message name="IDS_BRAVE_SYNC_SCAN_CODE_DESCRIPTION_PARTIAL_1" desc="The Sync instructions for the `scan sync code` modal partial phrase (1)">On your mobile device, navigate to Brave Sync in the Settings panel and click the button</message>
+      <message name="IDS_BRAVE_SYNC_SCAN_CODE_DESCRIPTION_PARTIAL_2" desc="The Sync instructions for the `scan sync code` modal partial phrase (2)">“Scan Sync Code”</message>
+      <message name="IDS_BRAVE_SYNC_SCAN_CODE_DESCRIPTION_PARTIAL_3" desc="The Sync instructions for the `scan sync code` modal partial phrase (3)">Use your camera to scan the QR Code below.</message>
+      <!-- WebUI brave sync resources: [modal] View Code -->
+      <message name="IDS_BRAVE_SYNC_VIEW_CODE_TITLE" desc="The Sync title for the `view sync code` modal">Sync Chain Code</message>
+      <message name="IDS_BRAVE_SYNC_VIEW_CODE_DESCRIPTION_PARTIAL_1" desc="The Sync instructions for the `view sync code` modal partial phrase (1)">On your target computer, navigate to Brave Sync in settings and click the button</message>
+      <message name="IDS_BRAVE_SYNC_VIEW_CODE_DESCRIPTION_PARTIAL_2" desc="The Sync instructions for the `view sync code` modal partial phrase (2)">“I Have a Sync Code”.</message>
+      <message name="IDS_BRAVE_SYNC_VIEW_CODE_DESCRIPTION_PARTIAL_3" desc="The Sync instructions for the `view sync code` modal partial phrase (3)">Type in the below sync chains code words.</message>
+      <message name="IDS_BRAVE_SYNC_VIEW_CODE_USE_CAMERA_BUTTON" desc="The Sync button to use your camera to sync the code instead of copying the sync code">Use my camera instead</message>
+      <message name="IDS_BRAVE_SYNC_VIEW_CODE_QR_CODE" desc="The Sync description suggesting where to go with the current sync code">View QR Code</message>
       <!-- WebUI brave sync resources: [modal] Choose Device Type -->
-      <message name="IDS_BRAVE_SYNC_CHOOSE_DEVICE_NEW_DEVICE_TITLE" desc="The Sync title to sync a new device. Appears in the `choose device type` modal">Let’s sync a new device with</message>
-      <message name="IDS_BRAVE_SYNC_CHOOSE_DEVICE_CHOOSE_DEVICE_TITLE" desc="The Sync title to select which device to sync. Appears in the `choose device type` modal">Choose a device type:</message>
+      <message name="IDS_BRAVE_SYNC_CHOOSE_DEVICE_TITLE" desc="The Sync title to sync a new device. Appears in the `choose device type` modal">Choose Device Type</message>
+      <message name="IDS_BRAVE_SYNC_CHOOSE_DEVICE_DESCRIPTION" desc="The Sync title to select which device to sync. Appears in the `choose device type` modal">Choose the type of device you would like to sync to.</message>
       <message name="IDS_BRAVE_SYNC_CHOOSE_DEVICE_MOBILE_TITLE" desc="The Sync Phone/tablet word below the phone/tablet image. Appears in the `choose device type` modal">Phone/Tablet</message>
       <message name="IDS_BRAVE_SYNC_CHOOSE_DEVICE_COMPUTER_TITLE" desc="The Sync Computer word below the computer image. Appears in the `choose device type` modal">Computer</message>
-      <!-- WebUI brave sync resources: [modal] View Sync Code -->
-      <message name="IDS_BRAVE_SYNC_VIEW_CODE_QR_CODE_TITLE" desc="The Sync QR code title. Appears in the `view sync code` modal">QR Code</message>
-      <message name="IDS_BRAVE_SYNC_VIEW_CODE_WORD_CODE_TITLE" desc="The Sync Word Code title. Appears in the `view sync code` modal">Word Code</message>
-      <message name="IDS_BRAVE_SYNC_VIEW_CODE_PRIVATE_KEY_PHRASE" desc="The Sync explainer about the sync data. Appears in the `view sync code` modal">This is a private key. If you share it, your private data may be compromised.</message>
       <!-- WebUI brave sync resources: Errors -->
       <message name="IDS_BRAVE_SYNC_ERROR_WRONG_CODE_TITLE" desc="Error message in dialog for when sync words are invalid (title)">Invalid sync code.</message>
       <message name="IDS_BRAVE_SYNC_ERROR_WRONG_CODE_DESCRIPTION" desc="Error message in dialog for when sync words are invalid (description)">Please try again.</message>
diff --git a/package-lock.json b/package-lock.json
index 9a4454da05c4..c88b1377cc5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -463,7 +463,7 @@
     },
     "ansi-escapes": {
       "version": "3.1.0",
-      "resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
       "integrity": "sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==",
       "dev": true
     },
@@ -542,7 +542,7 @@
     },
     "array-equal": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
       "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
       "dev": true
     },
@@ -1237,8 +1237,8 @@
       }
     },
     "brave-ui": {
-      "version": "github:brave/brave-ui#0ef71e2127af947ff7f2e6e830cc61dfac360123",
-      "from": "github:brave/brave-ui#0ef71e2127af947ff7f2e6e830cc61dfac360123",
+      "version": "github:brave/brave-ui#2e89af51c9e142a9af4b8952f06a6168411ca12a",
+      "from": "github:brave/brave-ui#2e89af51c9e142a9af4b8952f06a6168411ca12a",
       "dev": true,
       "requires": {
         "emptykit.css": "^1.0.1",
@@ -1484,7 +1484,7 @@
     },
     "callsites": {
       "version": "2.0.0",
-      "resolved": "http://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
       "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
       "dev": true
     },
@@ -1857,7 +1857,7 @@
     },
     "color-string": {
       "version": "0.3.0",
-      "resolved": "http://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz",
       "integrity": "sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=",
       "dev": true,
       "requires": {
@@ -1877,7 +1877,7 @@
     },
     "colors": {
       "version": "1.1.2",
-      "resolved": "http://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
       "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
       "dev": true
     },
@@ -2256,7 +2256,7 @@
     },
     "d": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/d/-/d-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
       "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
       "dev": true,
       "requires": {
@@ -2468,7 +2468,7 @@
     },
     "doctrine": {
       "version": "0.7.2",
-      "resolved": "http://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
       "integrity": "sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=",
       "dev": true,
       "requires": {
@@ -2921,7 +2921,7 @@
     },
     "expand-range": {
       "version": "1.8.2",
-      "resolved": "http://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
+      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
       "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
       "dev": true,
       "requires": {
@@ -4430,7 +4430,7 @@
     },
     "is-accessor-descriptor": {
       "version": "0.1.6",
-      "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
       "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
       "dev": true,
       "requires": {
@@ -4506,7 +4506,7 @@
     },
     "is-data-descriptor": {
       "version": "0.1.4",
-      "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
       "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
       "dev": true,
       "requires": {
@@ -6324,7 +6324,7 @@
     },
     "mp4-stream": {
       "version": "2.0.3",
-      "resolved": "http://registry.npmjs.org/mp4-stream/-/mp4-stream-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/mp4-stream/-/mp4-stream-2.0.3.tgz",
       "integrity": "sha512-5NzgI0+bGakoZEwnIYINXqB3mnewkt3Y7jcvkXsTubnCNUSdM8cpP0Vemxf6FLg0qUN8fydTgNMVAc3QU8B92g==",
       "requires": {
         "buffer-alloc": "^1.1.0",
@@ -6428,7 +6428,7 @@
     },
     "next-tick": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
@@ -6522,7 +6522,7 @@
       "dependencies": {
         "colors": {
           "version": "0.5.1",
-          "resolved": "http://registry.npmjs.org/colors/-/colors-0.5.1.tgz",
+          "resolved": "https://registry.npmjs.org/colors/-/colors-0.5.1.tgz",
           "integrity": "sha1-fQAj6usVTo7p/Oddy5I9DtFmd3Q=",
           "dev": true
         }
@@ -6820,7 +6820,7 @@
     },
     "os-tmpdir": {
       "version": "1.0.2",
-      "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "dev": true
     },
@@ -6949,7 +6949,7 @@
     },
     "path-browserify": {
       "version": "0.0.0",
-      "resolved": "http://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
       "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=",
       "dev": true
     },
@@ -6967,7 +6967,7 @@
     },
     "path-is-absolute": {
       "version": "1.0.1",
-      "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "path-key": {
@@ -8098,13 +8098,13 @@
     },
     "regjsgen": {
       "version": "0.2.0",
-      "resolved": "http://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
       "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=",
       "dev": true
     },
     "regjsparser": {
       "version": "0.1.5",
-      "resolved": "http://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
       "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
       "dev": true,
       "requires": {
@@ -8220,7 +8220,7 @@
     },
     "resolve": {
       "version": "1.1.7",
-      "resolved": "http://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
       "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
       "dev": true
     },
@@ -8349,7 +8349,7 @@
     },
     "safe-regex": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
       "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
       "dev": true,
       "requires": {
@@ -8780,7 +8780,7 @@
     },
     "sprintf-js": {
       "version": "1.0.3",
-      "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
@@ -8950,7 +8950,7 @@
     },
     "string_decoder": {
       "version": "1.1.1",
-      "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
       "requires": {
         "safe-buffer": "~5.1.0"
@@ -8958,7 +8958,7 @@
     },
     "strip-ansi": {
       "version": "3.0.1",
-      "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
       "dev": true,
       "requires": {
@@ -8976,7 +8976,7 @@
     },
     "strip-eof": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
       "dev": true
     },
@@ -9572,7 +9572,7 @@
     },
     "tty-browserify": {
       "version": "0.0.0",
-      "resolved": "http://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
       "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
       "dev": true
     },
@@ -9703,7 +9703,7 @@
     },
     "underscore": {
       "version": "1.4.4",
-      "resolved": "http://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz",
       "integrity": "sha1-YaajIBBiKvoHljvzJSA88SI51gQ=",
       "dev": true
     },
@@ -10024,7 +10024,7 @@
     },
     "vm-browserify": {
       "version": "0.0.4",
-      "resolved": "http://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
       "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=",
       "dev": true,
       "requires": {
@@ -10509,7 +10509,7 @@
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
           "requires": {
diff --git a/package.json b/package.json
index 042c106ee4c2..72c9e8d4eda9 100644
--- a/package.json
+++ b/package.json
@@ -272,7 +272,7 @@
     "@types/react-dom": "^16.0.7",
     "@types/react-redux": "6.0.4",
     "awesome-typescript-loader": "^5.2.0",
-    "brave-ui": "github:brave/brave-ui#0ef71e2127af947ff7f2e6e830cc61dfac360123",
+    "brave-ui": "github:brave/brave-ui#2e89af51c9e142a9af4b8952f06a6168411ca12a",
     "css-loader": "^0.28.9",
     "csstype": "^2.5.5",
     "emptykit.css": "^1.0.1",