diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
index 4fb066f2def6..de1d8e46f90c 100644
--- a/browser/ui/webui/brave_webui_source.cc
+++ b/browser/ui/webui/brave_webui_source.cc
@@ -439,13 +439,15 @@ 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 },
         { "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,7 +455,6 @@ 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 },
         { "settingsTitle", IDS_BRAVE_SYNC_ENABLED_SETTINGS_TITLE },
         { "settingsDescription", IDS_BRAVE_SYNC_ENABLED_SETTINGS_DESCRIPTION },
         { "settings", IDS_BRAVE_SYNC_ENABLED_TABLE_SETTINGS },
@@ -466,7 +467,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 },
@@ -483,27 +483,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..15c775f09dee 100644
--- a/components/brave_sync/ui/BUILD.gn
+++ b/components/brave_sync/ui/BUILD.gn
@@ -3,8 +3,6 @@ import("//brave/components/common/typescript.gni")
 transpile_web_ui("ui") {
   inputs = [
     "actions/sync_actions.ts",
-    "components/modals/addNewChainCameraOption.tsx",
-    "components/modals/addNewChainNoCamera.tsx",
     "components/modals/deviceType.tsx",
     "components/modals/enterSyncCode.tsx",
     "components/modals/removeDevice.tsx",
diff --git a/components/brave_sync/ui/brave_sync.html b/components/brave_sync/ui/brave_sync.html
index 1748d21c05b1..a158d9af503b 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>
-      html, body, #root { height: 100vh; }
+      {# html, body, #root,  #}
+      #syncPage { height: 100vh; }
     </style>
   </head>
   <body>
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..d86dedfcbbb6 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,7 +43,7 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      addNewChainNoCamera: false,
+      viewSyncCode: false,
       scanCode: false
     }
   }
@@ -79,12 +79,12 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
   }
 
   onClickComputerButton = () => {
-    this.setState({ addNewChainNoCamera: !this.state.addNewChainNoCamera })
+    this.setState({ viewSyncCode: !this.state.viewSyncCode })
   }
 
   render () {
     const { actions, syncData } = this.props
-    const { addNewChainNoCamera, scanCode } = this.state
+    const { viewSyncCode, scanCode } = this.state
 
     return (
       <Modal id='deviceTypeModal' onClose={this.onClickClose} size='small'>
@@ -106,40 +106,28 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
         }
         {
           scanCode
-          ? <ScanCodeModal syncData={syncData} actions={actions} onClose={this.onClickPhoneTabletButton} />
+          ? <ScanCode syncData={syncData} actions={actions} onClose={this.onClickPhoneTabletButton} />
           : null
         }
         {
-          addNewChainNoCamera
-            ? <AddNewChainNoCameraModal syncData={syncData} actions={actions} onClose={this.onClickComputerButton} />
+          viewSyncCode
+            ? <ViewSyncCode syncData={syncData} actions={actions} onClose={this.onClickComputerButton} />
             : 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/scanCode.tsx b/components/brave_sync/ui/components/modals/scanCode.tsx
index ef2fd401febd..ef4ff8355a70 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'
+import ViewSyncCode from './viewSyncCode'
 
 // Utils
 import { getLocale } from '../../../../common/locale'
@@ -33,36 +34,43 @@ interface Props {
   onClose: () => void
 }
 interface State {
-  enterCodeWordsInstead: boolean
+  viewSyncCode: boolean
 }
 
 export default class ScanCodeModal extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      enterCodeWordsInstead: false
+      viewSyncCode: false
     }
   }
 
   onClickEnterCodeWordsInstead = () => {
-    this.setState({ enterCodeWordsInstead: !this.state.enterCodeWordsInstead })
+    this.setState({ viewSyncCode: !this.state.viewSyncCode })
+  }
+
+  onCancel = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+    this.props.onClose()
   }
 
   render () {
     const { onClose, syncData, actions } = this.props
-    const { enterCodeWordsInstead } = this.state
+    const { viewSyncCode } = 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} />
+          viewSyncCode
+            ? <ViewSyncCode syncData={syncData} actions={actions} onClose={this.onClickEnterCodeWordsInstead} />
             : 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 +82,38 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
           }
         </ScanGrid>
         <ThreeColumnButtonGrid>
-          <ThreeColumnButtonGridCol1>
+        <div>
+            <Link onClick={this.onCancel}>{getLocale('cancel')}</Link>
+          </div>
+          <div>
             <Button
               level='secondary'
-              type='accent'
+              type='subtle'
               size='medium'
               onClick={this.onClickEnterCodeWordsInstead}
-              text={getLocale('enterCodeWordsInstead')}
+              text={getLocale('viewSyncCode')}
             />
-          </ThreeColumnButtonGridCol1>
-          <ThreeColumnButtonGridCol2>
-            <Button
-              level='secondary'
-              type='accent'
-              size='medium'
-              onClick={onClose}
-              text={getLocale('previous')}
-            />
-            <Button
+          </div>
+          <div>
+          <Button
               level='primary'
               type='accent'
               size='medium'
               onClick={onClose}
-              disabled={!syncData.isSyncConfigured}
+              disabled={syncData.devices.length < 2}
               text={
-                !syncData.isSyncConfigured
+                syncData.devices.length < 2
                 ? getLocale('lookingForDevice')
                 : getLocale('ok')
               }
+              icon={{
+                position: 'before',
+                image: syncData.devices.length < 2
+                  ? <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..1db60173bac9 100644
--- a/components/brave_sync/ui/components/modals/viewSyncCode.tsx
+++ b/components/brave_sync/ui/components/modals/viewSyncCode.tsx
@@ -4,37 +4,72 @@
 
 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'
 
+// Modals
+import ScanCode from './scanCode'
+
 // Utils
 import { getLocale } from '../../../../common/locale'
 
-// Images
-import { QRCode } from 'brave-ui/features/sync/images'
-
 interface Props {
   syncData: Sync.State
   actions: any
   onClose: () => void
 }
 
-export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
+interface State {
+  useCameraInstead: boolean
+}
+
+export default class ViewSyncCodeModal extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {
+      useCameraInstead: false
+    }
+  }
+
+  onClickUseCameraInsteadButton = () => {
+    this.setState({ useCameraInstead: !this.state.useCameraInstead })
+  }
+
+  onCancel = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+    this.props.onClose()
+  }
+
   render () {
-    const { onClose, syncData } = this.props
+    const { onClose, actions, syncData } = this.props
+    const { useCameraInstead } = this.state
 
     return (
-      <Modal id='viewSyncCodeModal' onClose={onClose} size='small'>
-        <ViewSyncCodeGrid>
+      <Modal id='viewSyncCodeModal' displayCloseButton={false} size='small'>
+        {
+          useCameraInstead
+            ? <ScanCode syncData={syncData} actions={actions} onClose={this.onClickUseCameraInsteadButton} />
+            : 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 +82,38 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
             )
             : null
           }
+        <ThreeColumnButtonGrid>
+          <div>
+            <Link onClick={this.onCancel}>{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')}
+            disabled={syncData.devices.length < 2}
+            text={
+              syncData.devices.length < 2
+              ? getLocale('lookingForDevice')
+              : getLocale('ok')
+            }
+            icon={{
+              position: 'before',
+              image: syncData.devices.length < 2
+                ? <LoaderIcon />
+                : null
+            }}
           />
-        </TwoColumnButtonGrid>
+        </ThreeColumnButtonGrid>
       </Modal>
     )
   }
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
index b9b458272803..c447e3257aca 100644
--- a/components/resources/brave_components_strings.grd
+++ b/components/resources/brave_components_strings.grd
@@ -455,6 +455,8 @@
       <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_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">The device list below includes all devices in your sync chain. Each device can be managed from any other device.</message>
@@ -492,27 +494,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>