diff --git a/src/components/popupModals/alertBox/index.tsx b/src/components/popupModals/alertBox/index.tsx
index 955ca8533..e986c2ad0 100644
--- a/src/components/popupModals/alertBox/index.tsx
+++ b/src/components/popupModals/alertBox/index.tsx
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
-import { StyledDialog, StyledFooter, StyledCancelContainer } from './style'
+import { StyledDialogWrapper, StyledDialog, StyledFooter, StyledCancelContainer } from './style'
 import Button from '../../buttonsIndicators/button'
 
 export interface Props {
@@ -24,6 +24,7 @@ export default class AlertBox extends React.PureComponent<Props, {}> {
     const { testId, children, ...buttonProps } = this.props
     const { colorType, onClickCancel, cancelString, onClickOk, okString } = buttonProps
     return (
+      <StyledDialogWrapper>
       <StyledDialog data-test-id={testId}>
         <div>{children}</div>
         <StyledFooter>
@@ -37,6 +38,7 @@ export default class AlertBox extends React.PureComponent<Props, {}> {
           <Button type={colorType} onClick={onClickOk} text={okString} />
         </StyledFooter>
       </StyledDialog>
+      </StyledDialogWrapper>
     )
   }
 }
diff --git a/src/components/popupModals/alertBox/style.ts b/src/components/popupModals/alertBox/style.ts
index 960724bb2..f792e1b62 100644
--- a/src/components/popupModals/alertBox/style.ts
+++ b/src/components/popupModals/alertBox/style.ts
@@ -4,16 +4,18 @@
 
 import styled from 'styled-components'
 
-export const StyledDialog = styled<{}, 'div'>('div')`
+export const StyledDialogWrapper = styled<{}, 'div'>('div')`
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 999999;
+  display: flex;
+`
+
+export const StyledDialog = styled<{}, 'div'>('div')`
   width: 470px;
-  height: 200px;
-  overflow: hidden;
   margin: auto;
   padding: 30px 20px 10px;
   max-height: calc(100vh - 100px);
diff --git a/src/components/popupModals/modal/index.tsx b/src/components/popupModals/modal/index.tsx
index 662d1b837..5d060f06b 100644
--- a/src/components/popupModals/modal/index.tsx
+++ b/src/components/popupModals/modal/index.tsx
@@ -13,12 +13,14 @@ export interface Props {
   onClose?: () => void
   size?: 'small' | 'normal'
   testId?: string
+  displayCloseButton?: boolean
 }
 
 export default class Modal extends React.PureComponent<Props, {}> {
   static defaultProps = {
     size: 'normal',
-    id: 'modal'
+    id: 'modal',
+    displayCloseButton: true
   }
 
   outsideClose = () => {
@@ -32,14 +34,16 @@ export default class Modal extends React.PureComponent<Props, {}> {
   }
 
   render () {
-    const { id, onClose, children, size, testId } = this.props
+    const { id, onClose, displayCloseButton, children, size, testId } = this.props
 
     return (
       <StyledWrapper id={id} onClick={this.outsideClose} data-test-id={testId}>
         <StyledDialog size={size}>
-          <StyledClose onClick={onClose}>
-            <CloseStrokeIcon />
-          </StyledClose>
+          {
+            displayCloseButton
+            ? <StyledClose onClick={onClose}><CloseStrokeIcon /></StyledClose>
+            : null
+          }
           <StyledContent>
             {children}
           </StyledContent>
diff --git a/src/features/sync/grid/index.ts b/src/features/sync/grid/index.ts
index 45f537f74..1e2145542 100644
--- a/src/features/sync/grid/index.ts
+++ b/src/features/sync/grid/index.ts
@@ -5,7 +5,7 @@
 import styled from '../../../theme'
 
 export const SectionBlock = styled<{}, 'section'>('section')`
-  margin: 10px 0 40px;
+  margin: 15px 0 40px;
 `
 
 export const EnabledContentButtonGrid = styled<{}, 'footer'>('footer')`
@@ -27,20 +27,27 @@ export const SettingsToggleGrid = styled<{}, 'footer'>('footer')`
 
 export const DisabledContentButtonGrid = styled<{}, 'footer'>('footer')`
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr;
   grid-gap: 10px;
-  margin: 20px 0;
+  margin: 15px 0 0;
 `
 
-export const TableGrid = styled<{}, 'div'>('div')`
+interface TableGridProps {
+  isDeviceTable?: boolean
+}
+
+export const TableGrid = styled<TableGridProps, 'div'>('div')`
+  align-items: center;
   display: grid;
-  grid-template-columns: auto auto;
-  grid-gap: 20px;
+  grid-template-columns: ${p => p.isDeviceTable ? '1fr' : '200px auto'};
+  grid-template-rows: auto;
+  grid-gap: ${p => p.isDeviceTable ? '0' : '50px'};
 `
 
 export const TableButtonGrid = styled<{}, 'div'>('div')`
   display: grid;
-  grid-template-rows: 40px 40px;
+  grid-template-rows: auto;
   grid-gap: 15px;
+  grid-template-columns: 2fr 1fr 1fr;
 `
diff --git a/src/features/sync/images/desktop_icon.png b/src/features/sync/images/desktop_icon.png
new file mode 100644
index 000000000..2284b85f4
Binary files /dev/null and b/src/features/sync/images/desktop_icon.png differ
diff --git a/src/features/sync/images/desktop_icon.svg b/src/features/sync/images/desktop_icon.svg
deleted file mode 100644
index f1bf22b40..000000000
--- a/src/features/sync/images/desktop_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="126" height="109" version="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h108v67H0z"/><path id="c" d="M0 0h126v41H0z"/><linearGradient x1="50%" y1="0%" x2="50%" y2="76%" id="e"><stop stop-color="#FF641D" offset="0%"/><stop stop-color="#FF4600" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(11)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M103 62l-1 1H6l-1-1V6l1-2h96l1 2v56zM71 0H6C3 0 0 3 0 6v56c0 3 3 5 6 5h96c3 0 6-2 6-5V6c0-3-3-6-6-6H71z" fill="#444" mask="url(#b)"/></g><g transform="translate(0 68)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M122 35l-2 1L6 37l-2-2L14 6l1-1h98l2 1 7 29zM81 0H15c-3 0-4 3-5 6L0 35c0 4 2 6 6 6h114c4 0 6-3 6-6l-7-29c-1-4-3-6-6-6H81z" fill="#444" mask="url(#d)"/></g><path d="M75 103l-1 1-23 1-1-2 2-3 1-2h19l2 2 1 3zm-8-9H53c-3 0-4 2-5 6l-2 3c0 3 2 6 5 6h23c3 0 5-3 5-6l-1-3c-1-4-3-6-6-6h-5z" fill="#444"/><path d="M29 11l-1-3 1-1-1-1-2-2-3-1-3-3H9L6 3 2 4 0 6v1l1 1-1 3 4 14 2 4a268 268 0 0 0 9 5l8-5 2-4 4-14" fill="url(#e)" transform="translate(51 17)"/><path d="M66 38h-2l-1 1-2 1 2 1v1l1 1h1v1h1v-1h1l1-1 1-1 1-1-2-1-1-1h-1" fill="#FFFFFE"/><path d="M77 29v-1l-1-1-1-1v-1l-2-2h-3a363 363 0 0 1-1 0h-2l-1-1h-1l-1 1h-6l-1 2-1 1-1 1-1 1v1l1 1 4 3v1l-1 2v1l1 1 1 1h1l1-1 1-1 2-1v-1l-3-2-1-1 2-2v-1l-1-1-4-2h3l3 1-1 5 1 1h3l1-1-1-5 3-1h3l-4 2-1 1v1l2 2-1 1-3 2v1l2 1 1 1 1 1h1l1-1 1-1v-1l-1-2v-1l4-3 1-1z" fill="#FFFFFE"/></g></svg>
\ No newline at end of file
diff --git a/src/features/sync/images/index.ts b/src/features/sync/images/index.ts
index 6cc7786ce..01a36fee7 100644
--- a/src/features/sync/images/index.ts
+++ b/src/features/sync/images/index.ts
@@ -8,9 +8,9 @@ import StartImageUrl from './start_icon.svg'
 import DefaultImageUrl from './default_icon.svg'
 import AddImageUrl from './add_icon.svg'
 import RemoveImageUrl from './remove_icon.svg'
-import DesktopImageUrl from './desktop_icon.svg'
-import MobileImageUrl from './mobile_icon.svg'
-import MobileHandImageUrl from './mobile_picture.png'
+import DesktopImageUrl from './sync_computer.svg'
+import MobileImageUrl from './sync_devices.svg'
+import MobileHandImageUrl from './sync_hand.svg'
 
 const iconStyles = `
   margin-top: 3px;
@@ -18,7 +18,7 @@ const iconStyles = `
 `
 
 const deviceStyles = `
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   height: 100px;
 `
 
@@ -32,6 +32,7 @@ export const SyncDesktopIcon = styled<{}, 'img'>('img').attrs({ src: DesktopImag
 export const SyncMobileIcon = styled<{}, 'img'>('img').attrs({ src: MobileImageUrl })`${deviceStyles}`
 export const SyncMobilePicture = styled<{}, 'img'>('img').attrs({ src: MobileHandImageUrl })`
   max-width: 100%;
+  height: 150px;
   display: block;
 `
 
@@ -40,7 +41,9 @@ interface QRCodeProps {
 }
 
 export const QRCode = styled<QRCodeProps, 'img'>('img')`
-  max-width: 100%;
   display: block;
-  width: ${p => p.size === 'normal' ? '180px' : '140px'};
+  width: 200px;
+  padding: 30px;
+  border: 1px solid #C8C8D5;
+  max-width: 100%;
 `
diff --git a/src/features/sync/images/mobile_icon.png b/src/features/sync/images/mobile_icon.png
new file mode 100644
index 000000000..4b52934dd
Binary files /dev/null and b/src/features/sync/images/mobile_icon.png differ
diff --git a/src/features/sync/images/mobile_icon.svg b/src/features/sync/images/mobile_icon.svg
deleted file mode 100644
index 18d4c52d6..000000000
--- a/src/features/sync/images/mobile_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="107" height="99" version="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M0 1h69v40c-5 0-8 1-8 2v46H0V1z" id="a"/><path id="c" d="M0 0h35v60H0z"/><linearGradient x1="50%" y1="0%" x2="50%" y2="76%" id="e"><stop stop-color="#FF641D" offset="0%"/><stop stop-color="#FF4600" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M64 83l-1 1H6l-1-1V7l1-1h57l1 1v76zM27 1H6C3 1 0 4 0 7v76c0 3 3 6 6 6h57c3 0 6-3 6-6V7c0-3-3-6-6-6H27z" fill="#444" mask="url(#b)"/><path d="M39 79a4 4 0 1 1-8 0 4 4 0 0 1 8 0" fill="#444"/><g><g transform="translate(58 39)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M31 54l-2 2H6l-2-2V6l2-2h23l2 2v48zM24 0H6C3 0 0 3 0 6v48c0 3 3 6 6 6h23c3 0 6-3 6-6V6c0-3-3-6-6-6h-5z" fill="#444" mask="url(#d)"/></g><path d="M80 89a4 4 0 1 1-7 0 4 4 0 0 1 7 0" fill="#444"/></g><g><path d="M33 13l-1-4 1-1-1-1-2-2c-1-1-2-2-4-1l-4-4H11L7 4C5 3 4 4 3 5L0 7l1 2-1 4 4 16 3 4a304 304 0 0 0 11 6l8-6 3-4 4-16" fill="url(#e)" transform="translate(74 50)"/><path d="M91 74h-1l-1 1h-2l-2 1v1l2 1 1 1h1l1 1v1h1v-1l1-1h1l1-1 2-1v-1l-2-1h-2l-1-1" fill="#FFFFFE"/><path d="M103 63v-2l-1-1-1-1-2-2v-1h-1l-2 1a410 410 0 0 1-2 0l-2-1h-2-1l-2 1h-1-1l-2-1h-1v1l-2 2-1 1-1 1v3l1 1 4 4v1l-1 1v2l1 1 1 1h1l2-1 1-1 2-1v-1l-4-3v-1l1-3v-1l-1-1-4-1v-1h4l2 1 1 1-1 5v1h5v-1l-1-5 1-1 2-1h4v1l-4 1-1 1v1l1 3v1l-4 3v1l2 1 1 1 2 1h1l1-1 1-1v-2l-1-1v-1l4-4 1-1v-1z" fill="#FFFFFE"/></g><g><path d="M33 13l-1-4 1-1-1-1-2-2c-1-1-2-2-4-1l-4-4H11L7 4C5 3 4 4 3 5L0 7l1 2-1 4 4 16 3 4a304 304 0 0 0 11 6l8-6 3-4 4-16" fill="url(#e)" transform="translate(19 20)"/><path d="M36 44h-1l-1 1h-2l-2 1v1l2 1 1 1h1l1 1v1h1v-1l1-1h1l1-1 2-1v-1l-2-1h-2l-1-1" fill="#FFFFFE"/><path d="M48 33v-2l-1-1-1-1-2-2v-1h-1l-2 1a410 410 0 0 1-2 0l-2-1h-2-1l-2 1h-1-1l-2-1h-1v1l-2 2-1 1-1 1v3l1 1 4 4v1l-1 1v2l1 1 1 1h1l2-1 1-1 2-1v-1l-4-3v-1l1-3v-1l-1-1-4-1v-1h4l2 1 1 1-1 5v1h5v-1l-1-5 1-1 2-1h4v1l-4 1-1 1v1l1 3v1l-4 3v1l2 1 1 1 2 1h1l1-1 1-1v-2l-1-1v-1l4-4 1-1v-1z" fill="#FFFFFE"/></g></g></svg>
\ No newline at end of file
diff --git a/src/features/sync/images/mobile_picture.png b/src/features/sync/images/mobile_picture.png
index bb776e7ef..65e656e2b 100644
Binary files a/src/features/sync/images/mobile_picture.png and b/src/features/sync/images/mobile_picture.png differ
diff --git a/src/features/sync/images/sync_computer.svg b/src/features/sync/images/sync_computer.svg
new file mode 100644
index 000000000..0c0a7fd2f
--- /dev/null
+++ b/src/features/sync/images/sync_computer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 99 78"><defs><linearGradient id="a" x1=".643%" x2="99.357%" y1="49.357%" y2="49.357%"><stop offset="0%" stop-color="#392DD1"/><stop offset="100%" stop-color="#A91B78"/></linearGradient><linearGradient id="b" x1="78.208%" x2="57.719%" y1="100%" y2="-320.563%"><stop offset="0%" stop-color="#392DD1"/><stop offset="100%" stop-color="#A91B78"/></linearGradient><linearGradient id="c" x1="0%" y1="50.706%" y2="50.706%"><stop offset="0%" stop-color="#F50"/><stop offset="40.988%" stop-color="#F50"/><stop offset="58.198%" stop-color="#FF2000"/><stop offset="100%" stop-color="#FF2000"/></linearGradient><linearGradient id="d" x1="2.148%" y1="50.706%" y2="50.706%"><stop offset="0%" stop-color="#FF452A"/><stop offset="100%" stop-color="#FF2000"/></linearGradient><path id="e" d="M9.99 1.387L8.682 0H4.086l-1.31 1.387s-1.148-.298-1.69.21c0 0 1.531-.13 2.058.67 0 0 1.42.254 1.612.254.191 0 .606-.15.99-.269.382-.119.638-.12.638-.12s.255.001.638.12c.383.12.798.269.99.269.191 0 1.611-.254 1.611-.254.527-.8 2.06-.67 2.06-.67-.544-.508-1.693-.21-1.693-.21"/></defs><g fill="none" fill-rule="evenodd"><path fill="url(#a)" d="M6.208 3.544A3.544 3.544 0 0 1 9.755 0h78.938a3.551 3.551 0 0 1 3.546 3.544v63.695H6.21V3.544z"/><path fill="url(#b)" d="M1.427 71.547C-.341 69.168.63 67.24 3.595 67.24H95.74c2.965 0 3.834 1.86 1.952 4.139l-5.453 6.605H6.21l-4.782-6.436z" transform="matrix(1 0 0 -1 0 145.223)"/><path fill="#000" fill-opacity=".26" d="M6.373 72.142c-1.454 1.586-.9 2.873 1.254 2.873h84.07c2.147 0 2.65-1.215 1.118-2.72l-5.148-5.055H10.866l-4.493 4.902z"/><path fill="#FFF" d="M9.756 6.923a2.5 2.5 0 0 1 2.515-2.5h73.906a2.508 2.508 0 0 1 2.515 2.5v49.854a2.5 2.5 0 0 1-2.515 2.5H12.271a2.508 2.508 0 0 1-2.515-2.5V6.923z"/><g fill="#F1F1F1" fill-rule="nonzero" opacity=".519" transform="translate(17.738 14.156)"><rect width="40.186" height="3.284" x="19.249" rx=".418"/><rect width="39.154" height="3.284" x="19.249" y="12.197" rx=".418"/><rect width="64.548" height="7.037" y="27.21" rx=".418"/><rect width="45.496" height="1.868" x="19.249" y="6.848" rx=".418"/><rect width="62.877" height="1.868" y="20.662" rx=".418"/></g><g transform="translate(19.805 15.04)"><path fill="url(#c)" d="M12.32 3.356l.352-.805s-.447-.448-.99-.955c-.543-.507-1.692-.209-1.692-.209L8.682 0H4.086l-1.31 1.387s-1.148-.298-1.69.21c-.543.506-.99.954-.99.954l.35.805L0 4.55s1.314 4.652 1.468 5.22c.303 1.119.51 1.551 1.373 2.118.862.567 2.426 1.55 2.68 1.7.256.15.575.403.863.403.287 0 .606-.254.861-.403.256-.15 1.82-1.133 2.682-1.7.861-.567 1.069-1 1.372-2.118.154-.568 1.468-5.22 1.468-5.22l-.447-1.193z"/><path fill="#FFF" d="M9.623 2.267s1.684 1.902 1.684 2.308c0 .407-.212.514-.425.725L9.62 6.553c-.12.118-.368.298-.222.621.146.324.362.735.122 1.152-.24.418-.65.696-.914.65-.263-.046-.882-.348-1.11-.486-.227-.138-.947-.693-.947-.906 0-.212.745-.594.882-.68.138-.087.766-.423.779-.555.013-.131.008-.17-.178-.496-.185-.325-.519-.76-.463-1.048.055-.29.594-.44.978-.575.384-.136 1.123-.392 1.215-.431.093-.04.069-.078-.21-.103-.28-.025-1.075-.123-1.433-.03-.358.093-.97.235-1.019.31-.05.076-.093.078-.042.338.05.26.313 1.504.338 1.725.026.222.075.368-.18.422-.255.055-.685.15-.832.15-.148 0-.578-.095-.833-.15-.255-.054-.205-.2-.18-.422.026-.22.288-1.466.338-1.725.051-.26.008-.262-.042-.338-.05-.075-.661-.217-1.019-.31-.358-.093-1.152.005-1.432.03-.28.025-.303.063-.211.103.092.04.832.295 1.216.43.384.136.922.287.977.576.056.289-.278.723-.463 1.048-.185.326-.19.365-.177.496.012.132.64.468.778.554.138.087.883.469.883.681 0 .213-.721.768-.948.906-.228.138-.846.44-1.11.486-.263.046-.674-.232-.914-.65-.24-.417-.024-.828.122-1.152.146-.323-.102-.503-.222-.621L1.885 5.3c-.213-.211-.424-.318-.424-.725 0-.406 1.683-2.308 1.683-2.308s1.42.254 1.612.254c.191 0 .606-.15.99-.269.382-.119.638-.12.638-.12s.255.001.638.12c.383.12.798.269.99.269.191 0 1.611-.254 1.611-.254zM8.362 9.541c.104.061.04.176-.055.239-.095.062-1.37.985-1.494 1.087-.124.102-.306.27-.43.27-.123 0-.305-.168-.429-.27A76.993 76.993 0 0 0 4.46 9.78c-.095-.063-.158-.178-.054-.239.104-.06.43-.215.88-.432.45-.218 1.01-.403 1.098-.403.087 0 .648.185 1.098.403.45.217.775.371.88.432z"/><use fill="url(#d)" xlink:href="#e"/></g></g></svg>
\ No newline at end of file
diff --git a/src/features/sync/images/sync_devices.svg b/src/features/sync/images/sync_devices.svg
new file mode 100644
index 000000000..8fe630686
--- /dev/null
+++ b/src/features/sync/images/sync_devices.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 84 90"><defs><linearGradient id="a" x1=".643%" x2="99.357%" y1="49.357%" y2="49.357%"><stop offset="0%" stop-color="#392DD1"/><stop offset="100%" stop-color="#A91B78"/></linearGradient><linearGradient id="b" x1="0%" y1="50.706%" y2="50.706%"><stop offset="0%" stop-color="#F50"/><stop offset="40.988%" stop-color="#F50"/><stop offset="58.198%" stop-color="#FF2000"/><stop offset="100%" stop-color="#FF2000"/></linearGradient><linearGradient id="c" x1="2.148%" y1="50.706%" y2="50.706%"><stop offset="0%" stop-color="#FF452A"/><stop offset="100%" stop-color="#FF2000"/></linearGradient><path id="d" d="M9.295 1.383L8.078 0H3.8L2.584 1.383s-1.07-.297-1.574.208c0 0 1.425-.129 1.915.67 0 0 1.322.252 1.5.252.178 0 .564-.149.92-.268.357-.119.594-.12.594-.12s.238.001.594.12c.357.12.743.268.92.268.18 0 1.5-.253 1.5-.253.49-.798 1.916-.669 1.916-.669-.505-.505-1.574-.208-1.574-.208"/><linearGradient id="e" x1="-18.33%" x2="139.352%" y1="7.408%" y2="107.403%"><stop offset="0%" stop-color="#392DD1"/><stop offset="100%" stop-color="#A91B78"/></linearGradient><path id="f" d="M5.983.89L5.2 0H2.447l-.784.89S.975.7.65 1.024c0 0 .917-.083 1.233.43 0 0 .85.164.965.164.115 0 .363-.096.593-.173.23-.076.382-.077.382-.077s.153 0 .382.077c.23.077.478.173.593.173.115 0 .965-.163.965-.163.316-.514 1.233-.43 1.233-.43C6.671.698 5.983.89 5.983.89"/></defs><g fill="none" fill-rule="evenodd"><path fill="url(#a)" d="M0 3.76A3.767 3.767 0 0 1 3.768 0h63.01a3.771 3.771 0 0 1 3.767 3.76v81.29a3.767 3.767 0 0 1-3.767 3.759H3.768A3.771 3.771 0 0 1 0 85.049V3.76z"/><path fill="#FFF" d="M2.91 5.7c0-1.138.914-2.06 2.061-2.06h60.603c1.14 0 2.062.91 2.062 2.06v67.946c0 1.138-.915 2.06-2.062 2.06H4.971a2.054 2.054 0 0 1-2.062-2.06V5.7z"/><g fill="#F1F1F1" fill-rule="nonzero" opacity=".519" transform="translate(7.455 11.647)"><rect width="32.953" height="2.702" x="17.784" rx=".342"/><rect width="32.106" height="2.702" x="17.784" y="10.036" rx=".342"/><rect width="45.69" height="2.702" x="2" y="48.152" rx=".342"/><rect width="54.805" height="5.79" x=".124" y="22.388" rx=".342"/><rect width="54.929" height="11.966" y="31" rx=".342"/><rect width="37.307" height="1.537" x="17.784" y="5.635" rx=".342"/><rect width="53.387" height="1.537" y="18" rx=".342"/><rect width="51.559" height="1.537" x="2" y="53.787" rx=".342"/></g><ellipse cx="35.636" cy="81.529" fill="#FFF" fill-rule="nonzero" rx="2.909" ry="2.912"/><g transform="translate(9.098 12)"><path fill="url(#b)" d="M11.463 3.346l.327-.803s-.416-.446-.92-.952c-.506-.505-1.575-.208-1.575-.208L8.078 0H3.8L2.584 1.383s-1.07-.297-1.574.208c-.505.506-.92.952-.92.952l.326.803L0 4.535s1.223 4.637 1.366 5.203c.282 1.115.475 1.547 1.277 2.112.802.564 2.257 1.546 2.495 1.694.237.149.534.402.801.402.268 0 .565-.253.802-.402.238-.148 1.693-1.13 2.495-1.694.802-.565.995-.997 1.277-2.112.143-.566 1.366-5.203 1.366-5.203l-.416-1.19z"/><path fill="#FFF" d="M8.954 2.26s1.566 1.896 1.566 2.3c0 .406-.197.513-.395.724L8.95 6.532c-.11.118-.342.297-.206.62.136.322.337.732.114 1.148-.224.416-.606.694-.85.648-.246-.046-.821-.347-1.033-.484-.212-.138-.882-.692-.882-.904 0-.211.693-.592.821-.678.128-.087.712-.421.724-.553.012-.13.008-.17-.165-.494-.172-.324-.482-.757-.43-1.045.05-.289.552-.438.909-.573.357-.136 1.045-.39 1.131-.43.086-.04.064-.078-.197-.103-.26-.024-.999-.122-1.332-.03-.333.093-.902.235-.948.31-.046.075-.087.077-.04.336.048.259.292 1.5.315 1.72.024.221.07.367-.167.421-.238.054-.637.149-.775.149-.137 0-.537-.095-.774-.149-.238-.054-.191-.2-.168-.42.024-.221.268-1.462.315-1.72.047-.26.007-.262-.04-.337-.045-.075-.614-.217-.948-.31-.333-.092-1.071.006-1.332.03-.26.025-.282.063-.196.103.086.04.774.294 1.13.43.358.135.859.284.91.573.052.288-.258.72-.43 1.045-.173.325-.178.363-.166.494.012.132.597.466.725.553.128.086.82.467.82.678 0 .212-.67.766-.881.904-.212.137-.787.438-1.032.484-.245.046-.628-.232-.85-.648-.224-.416-.023-.826.113-1.148.136-.323-.095-.502-.207-.62L1.754 5.284c-.198-.211-.395-.318-.395-.723 0-.405 1.566-2.3 1.566-2.3s1.322.252 1.5.252c.178 0 .564-.149.92-.268.357-.119.594-.12.594-.12s.238.001.594.12c.357.12.743.268.92.268.18 0 1.5-.253 1.5-.253zM7.78 9.511c.097.06.037.175-.05.238-.09.062-1.276.983-1.391 1.084-.115.102-.285.27-.4.27-.115 0-.284-.168-.4-.27A72.063 72.063 0 0 0 4.15 9.75c-.088-.063-.147-.177-.05-.238.097-.06.4-.214.819-.43.418-.218.94-.402 1.021-.402.082 0 .603.184 1.022.401.418.217.722.37.819.431z"/><use fill="url(#c)" xlink:href="#d"/></g><path fill="url(#e)" d="M0 5.077A5.08 5.08 0 0 1 5.077 0h27.635a5.076 5.076 0 0 1 5.076 5.077v58.698a5.08 5.08 0 0 1-5.076 5.077H5.077A5.076 5.076 0 0 1 0 63.775V5.077z" transform="translate(46 21)"/><path fill="#FFF" d="M47.692 26.029a2.774 2.774 0 0 1 2.772-2.772h28.86a2.767 2.767 0 0 1 2.772 2.772v54.843a2.774 2.774 0 0 1-2.771 2.772H50.464a2.767 2.767 0 0 1-2.772-2.772V26.03zM51.64 85.9c0-.311.262-.564.566-.564h25.376c.313 0 .566.262.566.564a.571.571 0 0 1-.566.565H52.206a.571.571 0 0 1-.566-.565z"/><g transform="translate(52.768 29.465)"><g fill="#EBEBEB" fill-rule="nonzero" transform="translate(.108 .564)"><rect width="11.14" height="1.975" x="11.633" rx=".461"/><rect width="21.357" height="1.975" y="10.158" rx=".461"/><rect width="21.357" height="1.975" y="40.634" rx=".461"/><rect width="24.741" height="4.233" y="19.188" rx=".461"/><rect width="24.741" height="8.748" y="25.961" rx=".461"/></g><rect width="12.574" height="1" x="11.633" y="4.652" fill="#EBEBEB" fill-rule="nonzero" rx=".461"/><rect width="12.574" height="1" x="11.633" y="7.753" fill="#EBEBEB" fill-rule="nonzero" rx=".461"/><rect width="24.105" height="1" y="14.673" fill="#EBEBEB" fill-rule="nonzero" rx=".461"/><rect width="24.105" height="1" y="45.149" fill="#EBEBEB" fill-rule="nonzero" rx=".461"/><g transform="translate(1.27)"><path fill="url(#b)" d="M7.379 2.153l.21-.516s-.268-.287-.593-.613C6.671.7 5.983.89 5.983.89L5.2 0H2.447l-.784.89S.975.7.65 1.024c-.325.326-.593.613-.593.613l.21.516L0 2.92s.787 2.985.88 3.35c.18.717.305.995.821 1.358.516.364 1.453.996 1.606 1.091.153.096.344.259.516.259.172 0 .363-.163.516-.259.153-.095 1.09-.727 1.606-1.09.516-.364.64-.642.822-1.36.092-.364.88-3.349.88-3.349l-.268-.766z"/><path fill="#FFF" d="M5.763 1.455s1.008 1.22 1.008 1.48c0 .262-.126.33-.254.466l-.756.804c-.071.076-.22.19-.133.398.088.208.217.472.074.74-.144.268-.39.446-.548.417-.158-.03-.528-.224-.664-.312-.136-.089-.568-.445-.568-.581 0-.137.446-.382.529-.437.082-.056.458-.271.466-.356.007-.084.004-.11-.106-.318-.111-.209-.311-.488-.278-.673.033-.185.356-.282.586-.369.23-.087.672-.251.728-.277.055-.025.04-.05-.127-.065-.167-.016-.643-.08-.857-.02-.215.06-.581.151-.61.2-.03.048-.057.05-.026.216.03.166.187.965.202 1.107.016.142.045.236-.107.271-.153.035-.41.096-.499.096-.088 0-.346-.061-.498-.096-.153-.035-.123-.129-.108-.27.015-.143.172-.942.202-1.108.03-.167.005-.168-.025-.217-.03-.048-.396-.139-.61-.199-.215-.06-.69.004-.858.02-.167.016-.182.04-.126.065.055.026.498.19.728.277.23.087.552.184.585.369.034.185-.166.464-.277.673-.111.209-.114.234-.106.318.007.085.383.3.466.356.082.055.528.3.528.437 0 .136-.431.492-.568.58-.136.09-.506.283-.664.313-.158.03-.404-.15-.547-.417-.144-.268-.015-.532.073-.74.087-.207-.061-.322-.133-.398L1.129 3.4c-.127-.136-.254-.204-.254-.465s1.008-1.481 1.008-1.481.85.163.965.163c.115 0 .363-.096.593-.173.23-.076.382-.077.382-.077s.153 0 .382.077c.23.077.478.173.593.173.115 0 .965-.163.965-.163zm-.755 4.667c.062.04.024.113-.033.153-.057.04-.82.633-.895.698-.074.066-.183.174-.257.174-.074 0-.183-.108-.257-.174a46.386 46.386 0 0 0-.895-.698c-.057-.04-.095-.114-.032-.153.062-.039.257-.138.527-.277.269-.14.605-.258.657-.258.053 0 .388.118.658.258.269.14.464.238.527.277z"/><use fill="url(#c)" xlink:href="#f"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/features/sync/images/sync_hand.svg b/src/features/sync/images/sync_hand.svg
new file mode 100644
index 000000000..9d2542fdc
--- /dev/null
+++ b/src/features/sync/images/sync_hand.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 202"><g fill="none" fill-rule="evenodd"><path stroke="#4A4A4A" stroke-dasharray="6.667 6.667" stroke-linecap="round" stroke-width="2.667" d="M188.875 65.333L301 0M187.54 93.333l109.456 105.334"/><path stroke="#58585B" stroke-linecap="round" stroke-width="2.667" d="M146.16 122.667L191.546 116"/><path fill="#404042" d="M112.03 171.75l-9.013-10.6c-2.117-2.12-2.116-5.59.002-7.71L206.006 41.26c2.119-2.12 5.584-2.119 7.7.002l10.814 3.548c2.117 2.12 10.21 7.171 5.277 11.273L119.73 171.753c-2.119 2.12-5.584 2.119-7.7-.002"/><path stroke="#58585B" stroke-width="4" d="M112.03 171.75l-9.013-10.6c-2.117-2.12-2.116-5.59.002-7.71L206.006 41.26c2.119-2.12 5.584-2.119 7.7.002l10.814 3.548c2.117 2.12 10.21 7.171 5.277 11.273L119.73 171.753c-2.119 2.12-5.584 2.119-7.7-.002z"/><path stroke="#58585B" stroke-linecap="round" stroke-width="4" d="M172.406 143.645c-26.407-8.477-3.495-24.043-3.495-24.043 2.253-2.255 6.693 1.223 6.693 1.223 8.367 6.766 0 19.009 0 19.009-.644 1.692-1.81 2.92-3.198 3.811-4.163 2.673-10.318 2.311-10.318 2.311l-15.446.322 8.688 9.021c1.767 4.549-2.8 11.277-4.853 13.968a6.539 6.539 0 0 1-2.14 1.812l-4.27 2.263-6.114-3.222c-1.015-.707-6.147-6.996-5.648-5.863.579 1.315 1.787 1.03 1.144 8.441-1.288 14.82-9.011 16.754-9.011 16.754l-8.308 2.9-1.655.885a21.39 21.39 0 0 1-14.299 2.117 12.31 12.31 0 0 0-4.267-.099l-12.66 1.93c-9.333 3.866-15.447 2.255-15.447 2.255l-35.398-4.51-26.387 1.933c-11.907-45.752 8.045-68.95 8.045-68.95l13.194-2.9s32.823-35.119 35.719-38.341c2.896-3.222 9.332-3.544 9.332-3.544 6.758-1.289 34.432-11.277 34.432-11.277 4.827-2.9 9.39 0 9.39 0 7.781 2.9 27.939 5.155 27.939 5.155s14.994 6.766-4.57 14.177c0 0-3.239 7.245-18.672 4.902-2.892-.44-4.696-2.547-4.696-2.547s-1.024 6.91-14.7 6.145l-5.542 4.71s4.023 13.854-5.113 20.298"/><path stroke="#58585B" stroke-width="2.667" d="M138.008 152.545s6.43-7.66 8.634-6.267c3.79 2.396.644 18.365-7.723 20.943 0 0-15.564.723-.91-14.676zm27.302-27.763s3.443-6.43 7.807-5.407c3.412.8 4.42 10.754.464 17.115-2.165 3.48-6.66 4.856-10.283 2.947-3.156-1.664-5.702-8.636 2.012-14.655zm20.768-23.276s3.443-6.43 7.807-5.407c3.412.8 4.42 10.754.464 17.115-2.165 3.481-6.66 4.856-10.283 2.947-3.156-1.663-5.702-8.636 2.012-14.655z"/><path stroke="#58585B" stroke-linecap="square" stroke-linejoin="round" stroke-width="2.667" d="M93.224 164.965s-8.079-3.402-9.344 4.814c-.923 5.998.19 7.294 9.344 11.67 0 0-7.318-3.528-7.09-8.59.177-3.974 2.368-6.217 7.09-7.894z"/><path stroke="#58585B" stroke-width="4" d="M93.224 164.965l22.193 8.356 18.032-.623"/><path stroke="#58585B" stroke-width="2.667" d="M93.224 164.965s8.87 2.457 6.436 10.31c0 0-.41 3.905-5.657 4.82-1.001.175-1.154 1.549-.211 1.929l13.705 5.524c1.955.788 11.1 3.607 12.923 3.306"/><path stroke="#58585B" stroke-linecap="round" stroke-width="2.667" d="M71.02 153.366s17.377 3.545 33.467-26.42"/><path stroke="#58585B" stroke-linecap="round" stroke-width="4" d="M114.668 108.581s3.334 11.61-4.067 26.587"/><path fill="#FEFEFE" d="M106.75 168.187l-9.013-10.6c-2.117-2.122-2.116-5.591.003-7.71L200.727 37.696c1.854-1.856 4.49-1.596 6.852-.691 6.96 2.666 6.072 2.273 6.96 2.666l9.98 5.139c2.118 2.12 2.117 5.59-.002 7.71L114.451 168.19c-2.118 2.12-5.583 2.118-7.7-.003"/><path stroke="#58585B" stroke-width="4" d="M106.75 168.187l-9.013-10.6c-2.117-2.122-2.116-5.591.003-7.71L200.727 37.696c1.854-1.856 4.49-1.596 6.852-.691 6.96 2.666 6.072 2.273 6.96 2.666l9.98 5.139c2.118 2.12 2.117 5.59-.002 7.71L114.451 168.19c-2.118 2.12-5.583 2.118-7.7-.003z"/><path stroke="#58585B" stroke-linecap="round" stroke-width="4" d="M96.63 108.581l45.398-6.946"/></g></svg>
\ No newline at end of file
diff --git a/src/features/sync/index.ts b/src/features/sync/index.ts
index a8f162800..366f19714 100644
--- a/src/features/sync/index.ts
+++ b/src/features/sync/index.ts
@@ -2,8 +2,18 @@
  * 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/. */
 
-export { Title, SubTitle, Paragraph, SwitchLabel } from './text'
-export { Main, TableRowId, TableRowDevice, TableRowRemove, TableRowRemoveButton } from './misc'
+export { Title, SubTitle, Paragraph, SwitchLabel, Link, Bold } from './text'
+export {
+  DisabledContent,
+  EnabledContent,
+  Main,
+  SyncCard,
+  TableRowId,
+  TableRowDevice,
+  TableRowRemove,
+  TableRowRemoveButton,
+  TableRowToggleButton
+} from './misc'
 export {
   SectionBlock,
   SettingsToggleGrid,
diff --git a/src/features/sync/misc/index.ts b/src/features/sync/misc/index.ts
index 364af10ca..6955ad2dc 100644
--- a/src/features/sync/misc/index.ts
+++ b/src/features/sync/misc/index.ts
@@ -3,15 +3,34 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled from '../../../theme'
+import { Card } from '../../../components'
+
+export const DisabledContent = styled<{}, 'div'>('div')`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: inherit;
+  background-color: #efeff0;
+`
+
+export const EnabledContent = styled<{}, 'div'>('div')`
+  height: inherit;
+  background-color: #efeff0;
+`
 
 export const Main = styled<{}, 'main'>('main')`
   font-family: ${p => p.theme.fontFamily.body};
   color: ${p => p.theme.color.defaultControl};
-  max-width: 980px;
-  padding: 40px;
+  padding: 50px 15px;
+  max-width: 830px;
   margin: auto;
 `
 
+export const SyncCard = styled(Card)`
+  padding: 60px 80px;
+`
+
 export const TableRowId = styled<{}, 'span'>('span')`
   width: 5ch;
   text-align: center;
@@ -33,10 +52,16 @@ export const TableRowRemove = styled<{}, 'span'>('span')`
 
 export const TableRowRemoveButton = styled<{}, 'button'>('button')`
   text-align: center;
-  padding: 0 6px;
+  padding: 0;
   border: 0;
   background: transparent;
   cursor: pointer;
   display: block;
   margin: auto;
+  width: 24px;
+`
+
+export const TableRowToggleButton = styled<{}, 'span'>('span')`
+  float: right;
+  margin: 9px;
 `
diff --git a/src/features/sync/modal/index.ts b/src/features/sync/modal/index.ts
index 7a4450606..82da774b0 100644
--- a/src/features/sync/modal/index.ts
+++ b/src/features/sync/modal/index.ts
@@ -6,9 +6,6 @@ import styled from '../../../theme'
 import Heading from '../../../components/text/heading'
 
 export const ModalHeader = styled<{}, 'header'>('header')`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: 32px;
   margin-bottom: 8px;
 `
 
@@ -31,7 +28,7 @@ export const ModalSubTitle = styled<ModalSubTitleProps, 'span'>('span')`
 `
 
 export const ModalContent = styled<{}, 'div'>('div')`
-  margin-left: 0px;
+  margin-bottom: -12px;
 `
 
 export const OneColumnButtonGrid = styled<{}, 'div'>('div')`
@@ -43,15 +40,16 @@ export const TwoColumnButtonGrid = styled<{}, 'footer'>('footer')`
   display: grid;
   align-items: center;
   grid-template-columns: 1fr auto;
-  grid-gap: 20px;
+  grid-gap: 15px;
   margin-top: 20px;
 `
 
 export const ThreeColumnButtonGrid = styled<{}, 'div'>('div')`
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 30px;
-  margin-top: 30px;
+  grid-template-columns: 1fr auto auto;
+  grid-gap: 15px;
+  margin-top: 20px;
+  align-items: center;
 `
 
 export const ThreeColumnButtonGridCol1 = styled<{}, 'div'>('div')`
@@ -69,27 +67,35 @@ export const ThreeColumnButtonGridCol2 = styled<{}, 'div'>('div')`
 
 export const DeviceGrid = styled<{}, 'div'>('div')`
   display: grid;
-  height: 100%;
-  grid-template-columns: auto auto;
+  grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr;
   grid-gap: 30px;
-  margin: 30px auto 0;
-  width: 400px;
+  height: 220px;
+  margin: auto;
+  align-items: center;
+  justify-content: center;
 `
 
-export const DeviceContainer = styled<{}, 'div'>('div')`
+export const DeviceContainer = styled<{}, 'a'>('a')`
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  height: 100%;
+  border: 1px solid #C8C8D5;
+  border-radius: 6px;
+  cursor: pointer;
 `
 
 export const ScanGrid = styled<{}, 'div'>('div')`
   display: grid;
   height: 100%;
-  grid-template-columns: auto auto;
+  grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr;
   margin: 25px auto;
-  max-width: 550px;
+  grid-gap: 30px;
+  align-items: center;
+  width: fit-content;
 `
 
 export const QRCodeContainer = styled<{}, 'div'>('div')`
diff --git a/src/features/sync/text/index.ts b/src/features/sync/text/index.ts
index 81bf9434c..7d1bf8c7f 100644
--- a/src/features/sync/text/index.ts
+++ b/src/features/sync/text/index.ts
@@ -6,14 +6,14 @@ import styled from '../../../theme'
 import Heading from '../../../components/text/heading'
 
 export const Title = styled(Heading)`
-  font-weight: 500;
+  font-weight: 600;
   font-size: 24px;
   margin: 0 0 4px 0;
   line-height: 1.6;
 `
 
 export const SubTitle = styled(Heading)`
-  font-weight: 500;
+  font-weight: 600;
   font-size: 20px;
   margin: 16px 0 12px 0;
 `
@@ -27,6 +27,18 @@ export const Paragraph = styled<{}, 'p'>('p')`
   padding: 0 0 12px 0;
 `
 
+export const Link = styled<{}, 'a'>(Paragraph.withComponent('a') as any)`
+  color: ${p => p.theme.color.subtle};
+  padding: 0;
+  text-decoration: none;
+  cursor: pointer;
+  display: inline;
+`
+
+export const Bold = styled<{}, 'b'>('b')`
+  font-weight: 600;
+`
+
 export const SwitchLabel = styled<{}, 'label'>('label')`
   font-family: ${p => p.theme.fontFamily.body};
   color: ${p => p.theme.color.defaultControlActive};
diff --git a/stories/features/sync/disabledContent.tsx b/stories/features/sync/disabledContent.tsx
index 687f716b9..fa5472f53 100644
--- a/stories/features/sync/disabledContent.tsx
+++ b/stories/features/sync/disabledContent.tsx
@@ -5,13 +5,14 @@
 import * as React from 'react'
 
 // Components
-import Button from '../../../src/components/buttonsIndicators/button'
+import { Button } from '../../../src/components'
 
 // Component-specific components
 import {
+  DisabledContent,
   Main,
+  SyncCard,
   Title,
-  SectionBlock,
   DisabledContentButtonGrid,
   TableGrid,
   Paragraph
@@ -57,45 +58,43 @@ export default class SyncDisabledContent extends React.PureComponent<{}, State>
   render () {
     const { newToSync, existingSyncCode } = this.state
     return (
-      <Main>
-        {
-          newToSync
-            ? <DeviceType onClose={this.onClickNewSyncChainButton} mainDeviceName={this.mainDeviceName} />
-            : null
-        }
-        {
-          existingSyncCode
-            ? <EnterSyncCode onClose={this.onClickEnterSyncChainCodeButton} />
-            : null
-        }
-        <TableGrid>
-          <SyncStartIcon />
-          <div>
-            <Title level={2}>{getLocale('syncTitle')}</Title>
-            <Paragraph>{getLocale('syncDescription')}</Paragraph>
-            <SectionBlock>
-              <DisabledContentButtonGrid>
-                <div>
+      <DisabledContent>
+        <Main>
+          {
+            newToSync
+              ? <DeviceType onClose={this.onClickNewSyncChainButton} />
+              : null
+          }
+          {
+            existingSyncCode
+              ? <EnterSyncCode onClose={this.onClickEnterSyncChainCodeButton} />
+              : null
+          }
+          <SyncCard>
+            <TableGrid isDeviceTable={false}>
+              <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/stories/features/sync/enabledContent.tsx b/stories/features/sync/enabledContent.tsx
index ec2fc1975..f5a019132 100644
--- a/stories/features/sync/enabledContent.tsx
+++ b/stories/features/sync/enabledContent.tsx
@@ -5,23 +5,24 @@
 import * as React from 'react'
 
 // Components
-import Toggle from '../../../src/components/formControls/toggle'
+import { Toggle } from '../../../src/features/shields'
 import Button from '../../../src/components/buttonsIndicators/button'
+import { CloseCircleIcon } from '../../../src/components/icons'
 import Table, { Cell, Row } from '../../../src/components/dataTables/table'
 
 // Feature-specific components
 import {
+  EnabledContent,
   Main,
+  SyncCard,
   Title,
-  SettingsToggleGrid,
-  SwitchLabel,
+  Paragraph,
   SectionBlock,
-  SubTitle,
   TableRowDevice,
-  TableRowRemove,
   TableRowRemoveButton,
   TableGrid,
-  TableButtonGrid
+  TableButtonGrid,
+  TableRowToggleButton
 } from '../../../src/features/sync'
 
 // Modals
@@ -63,16 +64,16 @@ export default class SyncEnabledContent extends React.PureComponent<{}, State> {
     return data.device2.name
   }
 
-  get rows (): Row[] {
+  get deviceRows (): Row[] {
     return [
       {
         content: [
-          { content: <TableRowDevice>{data.device1.name} (main device)</TableRowDevice> },
+          { content: <TableRowDevice>{data.device1.name} (This Device)</TableRowDevice> },
           { content: data.device1.lastActive },
           {
             content: (
               <TableRowRemoveButton data-id={''} data-name={''} onClick={this.onClickRemoveMainDeviceButton}>
-                &times;
+                <CloseCircleIcon />
               </TableRowRemoveButton>
             )
           }
@@ -85,7 +86,7 @@ export default class SyncEnabledContent extends React.PureComponent<{}, State> {
           {
             content: (
               <TableRowRemoveButton data-id={''} data-name={''} onClick={this.onClickRemoveOtherDeviceButton}>
-                &times;
+                <CloseCircleIcon />
               </TableRowRemoveButton>
             )
           }
@@ -94,11 +95,31 @@ export default class SyncEnabledContent extends React.PureComponent<{}, State> {
     ]
   }
 
-  get header (): Cell[] {
+  get deviceHeader (): Cell[] {
     return [
       { content: <TableRowDevice>{getLocale('deviceName')}</TableRowDevice> },
       { content: getLocale('addedOn') },
-      { content: <TableRowRemove>{getLocale('remove')}</TableRowRemove> }
+      { content: '' }
+    ]
+  }
+
+  get settingsHeader (): Cell[] {
+    return [
+      { content: <TableRowDevice>{getLocale('settings')}</TableRowDevice> },
+      { content: '' }
+    ]
+  }
+
+  get settingsRows (): Row[] {
+    return [
+      {
+        content: [
+          {
+            content: getLocale('bookmarks')
+          },
+          { content: <TableRowToggleButton><Toggle id='bookmarks' checked={true} size='large' /></TableRowToggleButton> }
+        ]
+      }
     ]
   }
 
@@ -125,82 +146,75 @@ export default class SyncEnabledContent extends React.PureComponent<{}, State> {
   render () {
     const { removeOtherDevice, removeMainDevice, viewSyncCode, addDevice, resetSync } = this.state
     return (
-      <Main>
-        {
-          removeOtherDevice
-            ? <RemoveOtherDevice onClose={this.onClickRemoveOtherDeviceButton} otherDeviceName={this.otherDeviceName} />
-            : null
-        }
-        {
-          removeMainDevice
-            ? <RemoveMainDevice onClose={this.onClickRemoveMainDeviceButton} mainDeviceName={this.mainDeviceName} />
-            : null
-        }
-        {
-          viewSyncCode
-            ? <ViewSyncCodeModal onClose={this.onClickViewSyncCodeButton} />
-            : null
-        }
-        {
-          addDevice
-            ? <DeviceTypeModal onClose={this.onClickAddDeviceButton} mainDeviceName={this.mainDeviceName} />
-            : null
-        }
-        {
-          resetSync
-            ? <ResetSyncModal onClose={this.onClickResetSyncButton} mainDeviceName={this.mainDeviceName} />
-            : null
-        }
-        <Title level={2}>{getLocale('braveSync')}</Title>
-        <SectionBlock>
-          <SubTitle level={2}>{getLocale('syncChainDevices')}</SubTitle>
-          <TableGrid>
-            <Table header={this.header} rows={this.rows} />
-            <TableButtonGrid>
-              <Button
-                level='secondary'
-                type='accent'
-                size='medium'
-                text={getLocale('addDevice')}
-                onClick={this.onClickAddDeviceButton}
-              />
+      <EnabledContent>
+        <Main>
+          {
+            removeOtherDevice
+              ? <RemoveOtherDevice onClose={this.onClickRemoveOtherDeviceButton} otherDeviceName={this.otherDeviceName} />
+              : null
+          }
+          {
+            removeMainDevice
+              ? <RemoveMainDevice onClose={this.onClickRemoveMainDeviceButton} mainDeviceName={this.mainDeviceName} />
+              : null
+          }
+          {
+            viewSyncCode
+              ? <ViewSyncCodeModal onClose={this.onClickViewSyncCodeButton} />
+              : null
+          }
+          {
+            addDevice
+              ? <DeviceTypeModal onClose={this.onClickAddDeviceButton} />
+              : null
+          }
+          {
+            resetSync
+              ? <ResetSyncModal onClose={this.onClickResetSyncButton} mainDeviceName={this.mainDeviceName} />
+              : null
+          }
+          <SyncCard>
+            <Title level={2}>{getLocale('braveSync')}</Title>
+            <Paragraph>{getLocale('syncChainDevices')}</Paragraph>
+            <SectionBlock>
+              <TableGrid isDeviceTable={true}>
+                <Table header={this.deviceHeader} rows={this.deviceRows} />
+                <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('syncSettings')}</Title>
+            <Paragraph>{getLocale('syncSettingsDescription')}</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')} {data.device1.name}</SubTitle>
-          <SettingsToggleGrid>
-            <Toggle id='bookmarks' checked={false} />
-            <SwitchLabel htmlFor='bookmarks'>
-              {getLocale('bookmarks')}
-            </SwitchLabel>
-            <Toggle id='savedSiteSettings' checked={false} />
-            <SwitchLabel htmlFor='savedSiteSettings'>
-              {getLocale('savedSiteSettings')}
-            </SwitchLabel>
-            <Toggle id='browsingHistory' checked={false} />
-            <SwitchLabel htmlFor='browsingHistory'>
-              {getLocale('browsingHistory')}
-            </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/stories/features/sync/modals.tsx b/stories/features/sync/modals.tsx
index 7d3317385..455076ade 100644
--- a/stories/features/sync/modals.tsx
+++ b/stories/features/sync/modals.tsx
@@ -10,8 +10,6 @@ import data from './page/fakeData'
 import ResetSyncModal from './modals/resetSync'
 import DeviceTypeModal from './modals/deviceType'
 import ScanCodeModal from './modals/scanCode'
-import AddNewChainNoCameraModal from './modals/addNewChainNoCamera'
-import AddNewChainCameraOptionModal from './modals/addNewChainCameraOption'
 import EnterSyncCodeModal from './modals/enterSyncCode'
 import ViewSyncCodeModal from './modals/viewSyncCode'
 import RemoveMainDeviceModal from './modals/removeMainDevice'
@@ -23,10 +21,8 @@ const doNothing = () => {
 
 storiesOf('Feature Components/Sync/Popups and Modals', module)
   .add('Reset Sync', () => <ResetSyncModal onClose={doNothing} mainDeviceName={data.device1.name} />)
-  .add('Device Type', () => <DeviceTypeModal onClose={doNothing} mainDeviceName={data.device1.name} />)
+  .add('Device Type', () => <DeviceTypeModal onClose={doNothing} />)
   .add('Scan Code', () => <ScanCodeModal onClose={doNothing} />)
-  .add('Add New Chain (camera option)', () => <AddNewChainCameraOptionModal onClose={doNothing} />)
-  .add('Add New Chain (no camera)', () => <AddNewChainNoCameraModal onClose={doNothing} />)
   .add('Enter Sync Code', () => <EnterSyncCodeModal onClose={doNothing} />)
   .add('View Sync Code', () => <ViewSyncCodeModal onClose={doNothing} />)
   .add('Remove Main Device', () => <RemoveMainDeviceModal onClose={doNothing} mainDeviceName={data.device1.name} />)
diff --git a/stories/features/sync/modals/addNewChainCameraOption.tsx b/stories/features/sync/modals/addNewChainCameraOption.tsx
deleted file mode 100644
index c894354fe..000000000
--- a/stories/features/sync/modals/addNewChainCameraOption.tsx
+++ /dev/null
@@ -1,104 +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 from '../../../../src/components/buttonsIndicators/button'
-import Modal from '../../../../src/components/popupModals/modal'
-import TextAreaClipboard from '../../../../src/components/formControls/textareaClipboard'
-
-// Feature-specific components
-import { ModalHeader, ModalTitle, ModalSubTitle, ModalContent, ThreeColumnButtonGrid, ThreeColumnButtonGridCol2, ThreeColumnButtonGridCol1 } from '../../../../src/features/sync'
-
-// Modals
-import ScanCode from './scanCode'
-
-// Utils
-import { getLocale } from '../page/fakeLocale'
-import data from '../page/fakeData'
-
-interface Props {
-  fromMobileScreen?: boolean
-  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 } = this.props
-    const { useCameraInstead } = this.state
-    return (
-      <Modal id='addNewChainCameraOptionModal' onClose={onClose} size='small'>
-        {
-          useCameraInstead
-            ? <ScanCode onClose={this.onClickUseCameraInsteadButton} />
-            : null
-        }
-        <ModalHeader>
-          <div>
-            <ModalTitle level={1}>
-              {
-                fromMobileScreen
-                  ? getLocale('mobileEnterThisCode')
-                  : getLocale('enterThisCode')
-              }
-            </ModalTitle>
-            <ModalSubTitle>{getLocale('syncChainCodeHowTo')}</ModalSubTitle>
-          </div>
-        </ModalHeader>
-        <ModalContent>
-          <TextAreaClipboard
-            copiedString='Copied!'
-            wordCountString={getLocale('wordCount')}
-            readOnly={true}
-            defaultValue={data.passphrase}
-          />
-        </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={true}
-              text={getLocale('lookingForDevice')}
-            />
-          </ThreeColumnButtonGridCol2>
-        </ThreeColumnButtonGrid>
-      </Modal>
-    )
-  }
-}
diff --git a/stories/features/sync/modals/addNewChainNoCamera.tsx b/stories/features/sync/modals/addNewChainNoCamera.tsx
deleted file mode 100644
index f8e449556..000000000
--- a/stories/features/sync/modals/addNewChainNoCamera.tsx
+++ /dev/null
@@ -1,71 +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 from '../../../../src/components/buttonsIndicators/button'
-import Modal from '../../../../src/components/popupModals/modal'
-import TextAreaClipboard from '../../../../src/components/formControls/textareaClipboard'
-
-// Feature-specific components
-import {
-  ModalHeader,
-  ModalTitle,
-  ModalSubTitle,
-  ModalContent,
-  TwoColumnButtonGrid,
-  OneColumnButtonGrid
-} from '../../../../src/features/sync'
-
-// Utils
-import { getLocale } from '../page/fakeLocale'
-import data from '../page/fakeData'
-
-interface Props {
-  onClose: () => void
-}
-
-export default class AddNewChainNoCameraModal extends React.PureComponent<Props, {}> {
-  render () {
-    const { onClose } = 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>
-          <TextAreaClipboard
-            copiedString='Copied!'
-            wordCountString='Word Count:'
-            readOnly={true}
-            defaultValue={data.passphrase}
-          />
-        </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={true}
-            text={getLocale('lookingForDevice')}
-          />
-        </TwoColumnButtonGrid>
-      </Modal>
-    )
-  }
-}
diff --git a/stories/features/sync/modals/deviceType.tsx b/stories/features/sync/modals/deviceType.tsx
index cefcdfc97..3e8be26b0 100644
--- a/stories/features/sync/modals/deviceType.tsx
+++ b/stories/features/sync/modals/deviceType.tsx
@@ -5,35 +5,33 @@
 import * as React from 'react'
 
 // Components
-import Button from '../../../../src/components/buttonsIndicators/button'
-import Modal from '../../../../src/components/popupModals/modal'
+import { Modal } from '../../../../src/components'
 
 // Feature-specific components
 import {
   ModalHeader,
-  ModalTitle,
+  Title,
   DeviceGrid,
   DeviceContainer,
-  ModalSubTitle
+  Paragraph
 } from '../../../../src/features/sync'
 
 // Images
 import { SyncMobileIcon, SyncDesktopIcon } from '../../../../src/features/sync/images'
 
 // Modals
-import AddNewChainNoCamera from './addNewChainNoCamera'
+import ViewSyncCode from './viewSyncCode'
 import ScanCode from './scanCode'
 
 // Utils
 import { getLocale } from '../page/fakeLocale'
 
 interface Props {
-  mainDeviceName: string
   onClose: () => void
 }
 
 interface State {
-  addNewChainNoCamera: boolean
+  viewSyncCode: boolean
   scanCode: boolean
 }
 
@@ -41,60 +39,49 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      addNewChainNoCamera: false,
+      viewSyncCode: false,
       scanCode: false
     }
   }
 
-  onClickPhoneTabletButton = () => {
+  onClickPhoneTabletButton = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
     this.setState({ scanCode: !this.state.scanCode })
   }
 
-  onClickComputerButton = () => {
-    this.setState({ addNewChainNoCamera: !this.state.addNewChainNoCamera })
+  onClickComputerButton = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+    this.setState({ viewSyncCode: !this.state.viewSyncCode })
   }
 
   render () {
-    const { onClose, mainDeviceName } = this.props
-    const { addNewChainNoCamera, scanCode } = this.state
+    const { viewSyncCode, scanCode } = this.state
     return (
-      <Modal id='deviceTypeModal' onClose={onClose} size='small'>
+      <Modal id='deviceTypeModal' displayCloseButton={false} size='small'>
         {
           scanCode
           ? <ScanCode onClose={this.onClickPhoneTabletButton} />
           : null
         }
         {
-          addNewChainNoCamera
-            ? <AddNewChainNoCamera onClose={this.onClickComputerButton} />
+          viewSyncCode
+            ? <ViewSyncCode onClose={this.onClickComputerButton} />
             : null
         }
         <ModalHeader>
           <div>
-            <ModalTitle level={1}>{getLocale('letsSync')} “{mainDeviceName}”.</ModalTitle>
-            <ModalSubTitle>{getLocale('chooseDeviceType')}</ModalSubTitle>
+            <Title level={1}>{getLocale('letsSync')}</Title>
+            <Paragraph>{getLocale('chooseDeviceType')}</Paragraph>
           </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/stories/features/sync/modals/enterSyncCode.tsx b/stories/features/sync/modals/enterSyncCode.tsx
index 1272df559..ecbb054af 100644
--- a/stories/features/sync/modals/enterSyncCode.tsx
+++ b/stories/features/sync/modals/enterSyncCode.tsx
@@ -5,21 +5,16 @@
 import * as React from 'react'
 
 // Components
-import Button from '../../../../src/components/buttonsIndicators/button'
-import Modal from '../../../../src/components/popupModals/modal'
-import AlertBox from '../../../../src/components/popupModals/alertBox'
-import TextAreaClipboard from '../../../../src/components/formControls/textareaClipboard'
+import { Modal, AlertBox, TextAreaClipboard, Button } from '../../../../src/components'
 
 // Feature-specific components
 import {
   ModalHeader,
-  ModalTitle,
-  ModalSubTitle,
-  ModalContent,
-  TwoColumnButtonGrid,
-  OneColumnButtonGrid,
   Title,
-  SubTitle
+  SubTitle,
+  Paragraph,
+  TwoColumnButtonGrid,
+  OneColumnButtonGrid
 } from '../../../../src/features/sync'
 
 // Utils
@@ -59,7 +54,7 @@ export default class EnterSyncCodeModal extends React.PureComponent<Props, State
     const { onClose } = this.props
     const { showAlert } = this.state
     return (
-      <Modal id='enterSyncCodeModal' onClose={onClose} size='small'>
+      <Modal id='enterSyncCodeModal' displayCloseButton={false} size='small'>
       {
         showAlert
         ? (
@@ -72,23 +67,20 @@ export default class EnterSyncCodeModal extends React.PureComponent<Props, State
       }
         <ModalHeader>
           <div>
-            <ModalTitle level={1}>{getLocale('enterSyncCode')}</ModalTitle>
-            <ModalSubTitle>{getLocale('enterSyncCodeDescription')}</ModalSubTitle>
+            <Title level={1}>{getLocale('enterSyncCode')}</Title>
+            <Paragraph>{getLocale('enterSyncCodeDescription')}</Paragraph>
           </div>
         </ModalHeader>
-        <ModalContent>
-          <TextAreaClipboard
-            copiedString={getLocale('copied')}
-            wordCountString={getLocale('wordCount')}
-            value={this.state.passphrase}
-            onChange={this.onEnterPassphrase}
-          />
-        </ModalContent>
+        <TextAreaClipboard
+          wordCountString={getLocale('wordCount')}
+          value={this.state.passphrase}
+          onChange={this.onEnterPassphrase}
+        />
         <TwoColumnButtonGrid>
             <OneColumnButtonGrid>
               <Button
                 level='secondary'
-                type='accent'
+                type='subtle'
                 size='medium'
                 onClick={onClose}
                 text={getLocale('cancel')}
diff --git a/stories/features/sync/modals/removeMainDevice.tsx b/stories/features/sync/modals/removeMainDevice.tsx
index 56a3b393c..5e3baa9ea 100644
--- a/stories/features/sync/modals/removeMainDevice.tsx
+++ b/stories/features/sync/modals/removeMainDevice.tsx
@@ -5,15 +5,13 @@
 import * as React from 'react'
 
 // Components
-import Button from '../../../../src/components/buttonsIndicators/button'
-import Modal from '../../../../src/components/popupModals/modal'
+import { Modal, Button } from '../../../../src/components'
 
 // Feature-specific components
 import {
   Paragraph,
   ModalHeader,
-  // ModalIcon,
-  ModalTitle,
+  Title,
   ModalContent,
   TwoColumnButtonGrid,
   OneColumnButtonGrid
@@ -31,13 +29,12 @@ export default class RemoveMainDeviceModal extends React.PureComponent<Props, {}
   render () {
     const { onClose, mainDeviceName } = this.props
     return (
-      <Modal id='removeMainDeviceModal' onClose={onClose} size='small'>
+      <Modal id='removeMainDeviceModal' displayCloseButton={false} size='small'>
         <ModalHeader>
-          <ModalTitle level={1}>{getLocale('remove')} “{mainDeviceName}” {getLocale('thisSyncChain')}?</ModalTitle>
+          <Title level={1}>{getLocale('remove')} “{mainDeviceName}” {getLocale('thisSyncChain')}?</Title>
         </ModalHeader>
         <ModalContent>
           <Paragraph>{getLocale('thisDeviceRemovalDescription')}</Paragraph>
-          <Paragraph>{getLocale('joinSyncChain')}</Paragraph>
         </ModalContent>
         <TwoColumnButtonGrid>
             <OneColumnButtonGrid>
diff --git a/stories/features/sync/modals/removeOtherDevice.tsx b/stories/features/sync/modals/removeOtherDevice.tsx
index a38b0d1a4..4505b9244 100644
--- a/stories/features/sync/modals/removeOtherDevice.tsx
+++ b/stories/features/sync/modals/removeOtherDevice.tsx
@@ -5,14 +5,13 @@
 import * as React from 'react'
 
 // Components
-import Button from '../../../../src/components/buttonsIndicators/button'
-import Modal from '../../../../src/components/popupModals/modal'
+import { Modal, Button } from '../../../../src/components'
 
 // Feature-specific components
 import {
   Paragraph,
   ModalHeader,
-  ModalTitle,
+  Title,
   ModalContent,
   TwoColumnButtonGrid,
   OneColumnButtonGrid
@@ -30,9 +29,9 @@ export default class RemoveMainDeviceModal extends React.PureComponent<Props, {}
   render () {
     const { onClose, otherDeviceName } = this.props
     return (
-      <Modal id='removeMainDeviceModal' onClose={onClose} size='small'>
+      <Modal id='removeMainDeviceModal' displayCloseButton={false} size='small'>
         <ModalHeader>
-          <ModalTitle level={1}>{getLocale('remove')} “{otherDeviceName}” {getLocale('thisSyncChain')}</ModalTitle>
+          <Title level={1}>{getLocale('remove')} “{otherDeviceName}” {getLocale('thisSyncChain')}</Title>
         </ModalHeader>
         <ModalContent>
         <Paragraph>{getLocale('otherDeviceRemovalDescription')}</Paragraph>
diff --git a/stories/features/sync/modals/resetSync.tsx b/stories/features/sync/modals/resetSync.tsx
index 27736f35e..e6d0d0f65 100644
--- a/stories/features/sync/modals/resetSync.tsx
+++ b/stories/features/sync/modals/resetSync.tsx
@@ -5,19 +5,15 @@
 import * as React from 'react'
 
 // Components
-import Button from '../../../../src/components/buttonsIndicators/button'
-import Modal from '../../../../src/components/popupModals/modal'
-import AlertBox from '../../../../src/components/popupModals/alertBox'
+import { Modal, AlertBox, Button } from '../../../../src/components'
 
 // Feature-specific components
 import {
   ModalHeader,
-  ModalTitle,
-  ModalSubTitle,
+  Title,
   ModalContent,
   TwoColumnButtonGrid,
   OneColumnButtonGrid,
-  Title,
   Paragraph
 } from '../../../../src/features/sync'
 
@@ -51,7 +47,7 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
     const { onClose, mainDeviceName } = this.props
     const { showAlert } = this.state
     return (
-      <Modal id='resetSyncModal' onClose={onClose} size='small'>
+      <Modal id='resetSyncModal' displayCloseButton={false} size='small'>
         {
           showAlert
           ? (
@@ -68,13 +64,11 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
         }
         <ModalHeader>
           <div>
-            <ModalSubTitle highlight={true}>{getLocale('warning')}</ModalSubTitle>
-            <ModalTitle level={1}>{getLocale('removing')} “{mainDeviceName}” {getLocale('deleteSyncChain')}</ModalTitle>
+            <Title level={1}>{getLocale('removing')} “{mainDeviceName}” {getLocale('deleteSyncChain')}</Title>
           </div>
         </ModalHeader>
         <ModalContent>
           <Paragraph>{getLocale('deleteSyncDescription')}</Paragraph>
-          <Paragraph>{getLocale('startSyncChainHowTo')}</Paragraph>
         </ModalContent>
         <TwoColumnButtonGrid>
             <OneColumnButtonGrid>
@@ -91,7 +85,7 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
               type='warn'
               size='medium'
               onClick={this.onSetupSync}
-              text={getLocale('remove')}
+              text={getLocale('deleteSyncChainButton')}
             />
           </TwoColumnButtonGrid>
       </Modal>
diff --git a/stories/features/sync/modals/scanCode.tsx b/stories/features/sync/modals/scanCode.tsx
index 5690575a1..cb393b66e 100644
--- a/stories/features/sync/modals/scanCode.tsx
+++ b/stories/features/sync/modals/scanCode.tsx
@@ -5,19 +5,16 @@
 import * as React from 'react'
 
 // Components
-import Button from '../../../../src/components/buttonsIndicators/button'
-import Modal from '../../../../src/components/popupModals/modal'
+import { Modal, Button } from '../../../../src/components'
 
 // Feature-specific components
 import {
   ModalHeader,
-  ModalTitle,
-  ModalSubTitle,
+  Title,
+  Paragraph,
+  Link,
   ScanGrid,
-  QRCodeContainer,
-  ThreeColumnButtonGrid,
-  ThreeColumnButtonGridCol1,
-  ThreeColumnButtonGridCol2
+  ThreeColumnButtonGrid
 } from '../../../../src/features/sync'
 
 // Images
@@ -27,13 +24,13 @@ import { SyncMobilePicture, QRCode } from '../../../../src/features/sync/images'
 import qrCodeImage from '../../../assets/img/fakeQRCodeImage.png'
 
 // Modals
-import AddNewChainCameraOption from './addNewChainCameraOption'
+import ViewSyncCodeModal from './viewSyncCode'
 
 // Utils
 import { getLocale } from '../page/fakeLocale'
 
 interface Props {
-  onClose: () => void
+  onClose: (event?: any) => void
 }
 
 interface State {
@@ -52,53 +49,53 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
     this.setState({ enterCodeWordsInstead: !this.state.enterCodeWordsInstead })
   }
 
+  onCancel = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+    this.props.onClose()
+  }
+
   render () {
     const { onClose } = this.props
     const { enterCodeWordsInstead } = this.state
     return (
-      <Modal id='scanCodeModal' onClose={onClose} size='small'>
+      <Modal id='scanCodeModal' displayCloseButton={false} size='small'>
       {
         enterCodeWordsInstead
-          ? <AddNewChainCameraOption fromMobileScreen={true} onClose={this.onClickEnterCodeWordsInstead} />
+          ? <ViewSyncCodeModal onClose={this.onClickEnterCodeWordsInstead} />
           : null
       }
         <ModalHeader>
           <div>
-            <ModalTitle level={1}>{getLocale('scanThisCode')}</ModalTitle>
-            <ModalSubTitle>{getLocale('scanThisCodeHowTo')}</ModalSubTitle>
+            <Title level={1}>{getLocale('scanThisCode')}</Title>
+            <Paragraph>{getLocale('scanThisCodeHowTo')}</Paragraph>
           </div>
         </ModalHeader>
           <ScanGrid>
             <SyncMobilePicture />
-            <QRCodeContainer><QRCode size='normal' src={qrCodeImage} /></QRCodeContainer>
+            <QRCode size='normal' src={qrCodeImage} />
           </ScanGrid>
           <ThreeColumnButtonGrid>
-            <ThreeColumnButtonGridCol1>
-              <Button
-                level='secondary'
-                type='accent'
-                size='medium'
-                onClick={this.onClickEnterCodeWordsInstead}
-                text={getLocale('enterCodeWordsInstead')}
-              />
-            </ThreeColumnButtonGridCol1>
-            <ThreeColumnButtonGridCol2>
-              <Button
-                level='secondary'
-                type='accent'
-                size='medium'
-                onClick={onClose}
-                text={getLocale('previous')}
-              />
-              <Button
-                level='primary'
-                type='accent'
-                size='medium'
-                onClick={onClose}
-                disabled={true}
-                text={getLocale('lookingForDevice')}
-              />
-            </ThreeColumnButtonGridCol2>
+          <div>
+            <Link onClick={this.onCancel}>{getLocale('cancel')}</Link>
+          </div>
+          <div>
+            <Button
+              level='secondary'
+              type='subtle'
+              size='medium'
+              onClick={onClose}
+              text={getLocale('viewSyncCode')}
+            />
+          </div>
+          <div>
+            <Button
+              level='primary'
+              type='accent'
+              size='medium'
+              onClick={onClose}
+              text={getLocale('viewCodeWords')}
+            />
+          </div>
         </ThreeColumnButtonGrid>
       </Modal>
     )
diff --git a/stories/features/sync/modals/viewSyncCode.tsx b/stories/features/sync/modals/viewSyncCode.tsx
index 6d9e907b9..63313a86b 100644
--- a/stories/features/sync/modals/viewSyncCode.tsx
+++ b/stories/features/sync/modals/viewSyncCode.tsx
@@ -5,59 +5,73 @@
 import * as React from 'react'
 
 // Components
-import Button from '../../../../src/components/buttonsIndicators/button'
-import Modal from '../../../../src/components/popupModals/modal'
-import TextAreaClipboard from '../../../../src/components/formControls/textareaClipboard'
+import { Modal, TextAreaClipboard, Button } from '../../../../src/components'
+import { LoaderIcon } from '../../../../src/components/icons'
 
 // Feature-specific components
 import {
-  ViewSyncCodeGrid,
-  ModalTitle,
-  TwoColumnButtonGrid
+  ModalHeader,
+  Title,
+  Paragraph,
+  Link,
+  Bold,
+  ThreeColumnButtonGrid
 } from '../../../../src/features/sync'
 
-import { QRCode } from '../../../../src/features/sync/images'
-
-// Fake QR Code
-import qrCodeImage from '../../../assets/img/fakeQRCodeImage.png'
-
 // Utils
 import { getLocale } from '../page/fakeLocale'
 import data from '../page/fakeData'
 
 interface Props {
-  onClose: () => void
+  onClose: (event?: any) => void
 }
 
 export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
+  onCancel = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+    this.props.onClose()
+  }
   render () {
     const { onClose } = this.props
     return (
-      <Modal id='viewSyncCodeModal' onClose={onClose} size='small'>
-        <ViewSyncCodeGrid>
+      <Modal id='viewSyncCodeModal' displayCloseButton={false} size='small'>
+        <ModalHeader>
           <div>
-            <ModalTitle level={3}>{getLocale('wordCode')}</ModalTitle>
-            <TextAreaClipboard
-              copiedString={getLocale('copied')}
-              wordCountString={getLocale('wordCount')}
-              defaultValue={data.passphrase}
-            />
+            <Title level={1}>{getLocale('chainCode')}</Title>
+            <Paragraph>
+              {getLocale('chainCodeDescriptionPartial1')} <Bold>{getLocale('chainCodeDescriptionPartial2')}</Bold> {getLocale('chainCodeDescriptionPartial3')}
+            </Paragraph>
           </div>
-          <div style={{ textAlign: 'left' }}>
-            <ModalTitle level={3}>{getLocale('qrCode')}</ModalTitle>
-            <QRCode size='small' src={qrCodeImage} />
+        </ModalHeader>
+        <TextAreaClipboard
+          copiedString='Copied!'
+          wordCountString='Word Count:'
+          readOnly={true}
+          defaultValue={data.passphrase}
+        />
+        <ThreeColumnButtonGrid>
+          <div>
+            <Link onClick={this.onCancel}>{getLocale('cancel')}</Link>
+          </div>
+          <div>
+            <Button
+              level='secondary'
+              type='subtle'
+              size='medium'
+              onClick={onClose}
+              text={getLocale('qrCode')}
+            />
           </div>
-        </ViewSyncCodeGrid>
-        <TwoColumnButtonGrid>
-          <div>{getLocale('privateKey')}</div>
           <Button
-            level='primary'
+            level='secondary'
             type='accent'
             size='medium'
             onClick={onClose}
-            text={getLocale('done')}
+            disabled={true}
+            text={getLocale('lookingForDevice')}
+            icon={{ position: 'before', image: <LoaderIcon /> }}
           />
-        </TwoColumnButtonGrid>
+        </ThreeColumnButtonGrid>
       </Modal>
     )
   }
diff --git a/stories/features/sync/page/fakeLocale.ts b/stories/features/sync/page/fakeLocale.ts
index de7b93756..a4d84a0aa 100644
--- a/stories/features/sync/page/fakeLocale.ts
+++ b/stories/features/sync/page/fakeLocale.ts
@@ -10,64 +10,66 @@ const locale: any = {
   wordCount: 'Word Count:',
   ok: 'Ok',
   cancel: 'Cancel',
-  thisSyncChain: 'from this sync chain',
+  thisSyncChain: 'from Sync Chain',
+  lookingForDevice: 'Looking for device',
   // Enabled Content
   braveSync: 'Brave Sync',
-  syncChainDevices: 'Devices in your sync chain',
+  syncChainDevices: 'The device list below includes all devices in your sync chain. Each device can be managed from any other device.',
   deviceName: 'device name',
-  addedOn: 'added on',
-  addDevice: 'add device',
-  viewSyncCode: 'view sync code',
-  dataToSync: 'Data to sync from',
+  addedOn: 'Date Added',
+  addDevice: 'Add New Device',
+  viewSyncCode: 'View Sync Code',
+  syncSettings: 'Brave Sync Settings',
+  settings: 'Settings',
+  syncSettingsDescription: 'Manage the content you would like to sync between devices. These settings only effect this device.',
   bookmarks: 'Bookmarks',
   savedSiteSettings: 'Saved Site Settings',
   browsingHistory: 'Browsing History',
-  leaveSyncChain: 'Leave Sync Chain',
+  leaveSyncChain: 'Delete Sync Chain',
   // Disabled Content
-  syncTitle: 'Brave Sync allows you to sync bookmarks data privately between your Brave Browsers on various devices.',
-  syncDescription: '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.',
-  startSyncChain: 'Start a new sync chain',
-  enterSyncChainCode: 'Enter a sync chain code',
+  syncTitle: 'Brave Sync Setup',
+  syncDescription: '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.',
+  startSyncChain: 'Start a New Sync Chain',
+  enterSyncChainCode: 'I Have a Sync Code',
   confirmSyncCode: 'Confirm Sync Code',
   // [modal] Enter Sync Code
-  enterSyncCode: 'Enter a sync code',
-  enterSyncCodeDescription: 'Go to Brave Settings > Sync > Display sync code',
+  enterSyncCode: 'Enter Your Sync Chain Code Words',
+  enterSyncCodeDescription: 'Type your supplied sync chain code words into the form below.',
   confirmCode: 'Confirm Sync Code',
   invalidCode: 'Invalid sync code.',
   tryAgain: 'Please try again.',
   // [modal] Remove Main Device
   thisDeviceRemovalDescription: 'Local device data will remain intact on all devices. Other devices in this sync chain will remain synced.',
-  joinSyncChain: 'To join a sync chain again, choose “Enter a sync chain code”.',
   // [modal] Remove Other Device
-  otherDeviceRemovalDescription: 'Note: Removing this device from this sync chain does not clear previously synced data from the device.',
+  otherDeviceRemovalDescription: 'Removing the device from the Sync Chain will not clear previously synced data from the device.',
   // [modal] Reset Sync
   warning: 'Warning!',
   removing: 'Removing',
-  deleteSyncChain: 'will delete this sync chain.',
-  deleteSyncDescription: 'Your local data on this device will be retained but all data in Brave’s Sync cache will be deleted.',
-  startSyncChainHowTo: 'You can start a new sync chain or sync with a new device by entering its sync chain code.',
+  deleteSyncChain: 'will delete the sync chain.',
+  deleteSyncDescription: 'Data currently synced will be retained but all data in Brave’s Sync cache will be deleted. You will need to start a new sync chain to sync device data again.',
+  deleteSyncChainButton: 'Delete Sync Chain',
   areYouSure: 'Are you sure?',
   // [modal] Add New Chain
-  scanThisCode: 'Now, using Brave on your mobile device, scan this code.',
-  scanThisCodeHowTo: 'Go to: Brave Settings > Sync > Scan Sync Code',
-  enterCodeWordsInstead: 'Enter code words instead',
-  previous: '< Previous',
-  lookingForDevice: 'Looking for device',
+  scanThisCode: 'Sync Chain QR Code',
+  scanThisCodeHowTo: 'On your mobile device, navigate to Brave Sync in the Settings panel and click the button “Scan Sync Code”. Use your camera to scan the QR Code below.',
+  viewCodeWords: 'View Code Words',
   // [modal] Add New Chain (Camera Option)
-  // [modal] Add New Chain (no Camera)
-  enterThisCode: 'Now, using Brave on your computer, enter this code:',
-  mobileEnterThisCode: 'Now, using Brave on your mobile device, enter this code:',
+  enterThisCode: 'Using Brave on your computer, enter this code:',
+  mobileEnterThisCode: 'Using Brave on your mobile device, enter this code:',
   syncChainCodeHowTo: 'Go to: Brave Settings > Sync > Enter a Sync Chain Code',
+  // [modal] Add New Chain (no Camera)
+  // [modal] View Sync Code
+  chainCode: 'Sync Chain Code',
+  chainCodeDescriptionPartial1: 'On your target computer, navigate to Brave Sync in settings and click the button',
+  chainCodeDescriptionPartial2: '“I Have a Sync Code”.',
+  chainCodeDescriptionPartial3: 'Type in the below sync chains code words.',
   useCameraInstead: 'Use camera instead',
+  qrCode: 'View QR Code',
   // [modal] Choose Device Type
-  letsSync: 'Let’s sync a new device with',
-  chooseDeviceType: 'Choose a device type:',
-  phoneTablet: 'Phone/Tablet',
-  computer: 'Computer',
-  // [modal] View Sync Code
-  qrCode: 'QR Code',
-  wordCode: 'Word Code',
-  privateKey: 'This is a private key. If you share it, your private data may be compromised.'
+  letsSync: 'Choose Device Type',
+  chooseDeviceType: 'Choose the type of device you would like to sync to.',
+  phoneTablet: 'Tablet or Phone',
+  computer: 'Computer'
 }
 
 export default locale