diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
index 4c5442654e09..4fb066f2def6 100644
--- a/browser/ui/webui/brave_webui_source.cc
+++ b/browser/ui/webui/brave_webui_source.cc
@@ -454,7 +454,9 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
         { "addedOn", IDS_BRAVE_SYNC_ENABLED_TABLE_ADDED_ON_TITLE },
         { "addDevice", IDS_BRAVE_SYNC_ENABLED_ADD_DEVICE_BUTTON },
         { "viewSyncCode", IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON },
-        { "dataToSync", IDS_BRAVE_SYNC_ENABLED_DATA_TITLE },
+        { "settingsTitle", IDS_BRAVE_SYNC_ENABLED_SETTINGS_TITLE },
+        { "settingsDescription", IDS_BRAVE_SYNC_ENABLED_SETTINGS_DESCRIPTION },
+        { "settings", IDS_BRAVE_SYNC_ENABLED_TABLE_SETTINGS },
         { "bookmarks", IDS_BRAVE_SYNC_ENABLED_BOOKMARKS_LABEL },
         { "savedSiteSettings", IDS_BRAVE_SYNC_ENABLED_SITE_SETTINGS_LABEL },
         { "browsingHistory", IDS_BRAVE_SYNC_ENABLED_HISTORY_LABEL },
diff --git a/components/brave_sync/ui/components/enabledContent.tsx b/components/brave_sync/ui/components/enabledContent.tsx
index 18ff3f871ce0..070ec5ddb3c4 100644
--- a/components/brave_sync/ui/components/enabledContent.tsx
+++ b/components/brave_sync/ui/components/enabledContent.tsx
@@ -6,6 +6,7 @@ import * as React from 'react'
 
 // Components
 import { Button, AlertBox } from 'brave-ui'
+import { CloseCircleIcon } from 'brave-ui/components/icons'
 import Table, { Cell, Row } from 'brave-ui/components/dataTables/table'
 import { Toggle } from 'brave-ui/features/shields'
 
@@ -13,15 +14,17 @@ import { Toggle } from 'brave-ui/features/shields'
 import {
   Main,
   Title,
-  SettingsToggleGrid,
-  SwitchLabel,
+  Paragraph,
   SectionBlock,
   SubTitle,
   TableRowDevice,
   TableRowRemove,
   TableRowRemoveButton,
+  TableRowToggleButton,
   TableGrid,
-  TableButtonGrid
+  TableButtonGrid,
+  EnabledContent,
+  SyncCard
 } from 'brave-ui/features/sync'
 
 // Modals
@@ -60,7 +63,7 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     }
   }
 
-  getRows = (devices?: any): Row[] | undefined => {
+  getDevicesRows = (devices?: any): Row[] | undefined => {
     if (!devices) {
       return
     }
@@ -81,7 +84,7 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
                 data-name={device.name}
                 onClick={this.onClickRemoveDeviceButton}
               >
-                &times;
+                <CloseCircleIcon />
               </TableRowRemoveButton>
             )
           }
@@ -91,7 +94,7 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     })
   }
 
-  get header (): Cell[] {
+  get devicesHeader (): Cell[] {
     return [
       { content: <TableRowDevice>{getLocale('deviceName')}</TableRowDevice> },
       { content: getLocale('addedOn') },
@@ -99,6 +102,33 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     ]
   }
 
+  get settingsHeader (): Cell[] {
+    return [
+      { content: <TableRowDevice>{getLocale('settings')}</TableRowDevice> },
+      { content: '' }
+    ]
+  }
+
+  get settingsRows (): Row[] {
+    return [
+      {
+        content: [
+          { content: getLocale('bookmarks') },
+          { content: (
+            <TableRowToggleButton>
+            <Toggle
+              id='bookmarks'
+              size='large'
+              checked={this.props.syncData.syncBookmarks}
+              onChange={this.onSyncBookmarks}
+            />
+            </TableRowToggleButton>
+          ) }
+        ]
+      }
+    ]
+  }
+
   onClickRemoveDeviceButton = (event: React.MouseEvent<HTMLButtonElement>) => {
     if (!event || !event.currentTarget || !event.currentTarget.dataset) {
       return
@@ -147,98 +177,95 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     }
 
     return (
-      <Main>
-        {
-           syncData.error === 'ERR_SYNC_NO_INTERNET'
-           ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-               <Title>{getLocale('errorNoInternetTitle')}</Title>
-               <SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
-             </AlertBox>
-           : null
-        }
-        {
-          syncData.error === 'ERR_SYNC_INIT_FAILED'
-          ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-              <Title>{getLocale('errorSyncInitFailedTitle')}</Title>
-              <SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
-            </AlertBox>
-          : null
-        }
-        {
-          removeDevice
-            ? (
-              <RemoveDeviceModal
-                deviceName={deviceToRemoveName}
-                deviceId={Number(deviceToRemoveId)}
-                actions={actions}
-                onClose={this.onClickRemoveDeviceButton}
-              />
-            )
-            : null
-        }
-        {
-          viewSyncCode
-            ? <ViewSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickViewSyncCodeButton} />
-            : null
-        }
-        {
-          addDevice
-            ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickAddDeviceButton} />
+      <EnabledContent>
+        <Main>
+          {
+            syncData.error === 'ERR_SYNC_NO_INTERNET'
+            ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
+                <Title>{getLocale('errorNoInternetTitle')}</Title>
+                <SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
+              </AlertBox>
             : null
-        }
-        {
-          resetSync
-            ? <ResetSyncModal syncData={syncData} actions={actions} onClose={this.onClickResetSyncButton} />
+          }
+          {
+            syncData.error === 'ERR_SYNC_INIT_FAILED'
+            ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
+                <Title>{getLocale('errorSyncInitFailedTitle')}</Title>
+                <SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
+              </AlertBox>
             : null
-        }
-        <Title level={2}>{getLocale('braveSync')}</Title>
-        <SectionBlock>
-          <SubTitle level={2}>{getLocale('syncChainDevices')}</SubTitle>
-          <TableGrid>
-            <Table header={this.header} rows={this.getRows(syncData.devices)}>
-              Device list is empty
-            </Table>
-            <TableButtonGrid>
-              <Button
-                level='secondary'
-                type='accent'
-                size='medium'
-                text={getLocale('addDevice')}
-                onClick={this.onClickAddDeviceButton}
-              />
+          }
+          {
+            removeDevice
+              ? (
+                <RemoveDeviceModal
+                  deviceName={deviceToRemoveName}
+                  deviceId={Number(deviceToRemoveId)}
+                  actions={actions}
+                  onClose={this.onClickRemoveDeviceButton}
+                />
+              )
+              : null
+          }
+          {
+            viewSyncCode
+              ? <ViewSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickViewSyncCodeButton} />
+              : null
+          }
+          {
+            addDevice
+              ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickAddDeviceButton} />
+              : null
+          }
+          {
+            resetSync
+              ? <ResetSyncModal syncData={syncData} actions={actions} onClose={this.onClickResetSyncButton} />
+              : null
+          }
+          <SyncCard>
+            <Title level={2}>{getLocale('braveSync')}</Title>
+            <Paragraph>{getLocale('syncChainDevices')}</Paragraph>
+            <SectionBlock>
+              <TableGrid isDeviceTable={true}>
+                <Table header={this.devicesHeader} rows={this.getDevicesRows(syncData.devices)}>
+                  Device list is empty
+                </Table>
+                <TableButtonGrid>
+                  <br />
+                  <Button
+                    level='secondary'
+                    type='accent'
+                    size='medium'
+                    text={getLocale('viewSyncCode')}
+                    onClick={this.onClickViewSyncCodeButton}
+                  />
+                  <Button
+                    level='primary'
+                    type='accent'
+                    size='medium'
+                    text={getLocale('addDevice')}
+                    onClick={this.onClickAddDeviceButton}
+                  />
+                </TableButtonGrid>
+              </TableGrid>
+            </SectionBlock>
+            <Title level={2}>{getLocale('settingsTitle')}</Title>
+            <Paragraph>{getLocale('settingsDescription')}</Paragraph>
+            <SectionBlock>
+              <Table header={this.settingsHeader} rows={this.settingsRows} />
+            </SectionBlock>
+            <SectionBlock>
               <Button
-                level='secondary'
+                level='primary'
                 type='accent'
                 size='medium'
-                text={getLocale('viewSyncCode')}
-                onClick={this.onClickViewSyncCodeButton}
+                text={getLocale('leaveSyncChain')}
+                onClick={this.onClickResetSyncButton}
               />
-            </TableButtonGrid>
-          </TableGrid>
-        </SectionBlock>
-        <SectionBlock>
-          <SubTitle level={2}>{getLocale('dataToSync')} {syncData.thisDeviceName}</SubTitle>
-          <SettingsToggleGrid>
-            <Toggle
-              id='bookmarks'
-              checked={syncData.syncBookmarks}
-              onChange={this.onSyncBookmarks}
-            />
-            <SwitchLabel htmlFor='bookmarks'>
-              {getLocale('bookmarks')}
-            </SwitchLabel>
-          </SettingsToggleGrid>
-        </SectionBlock>
-        <SectionBlock>
-          <Button
-            level='primary'
-            type='accent'
-            size='medium'
-            text={getLocale('leaveSyncChain')}
-            onClick={this.onClickResetSyncButton}
-          />
-        </SectionBlock>
-      </Main>
+            </SectionBlock>
+          </SyncCard>
+        </Main>
+      </EnabledContent>
     )
   }
 }
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
index 80b7c2d01aed..f2d8160b2db3 100644
--- a/components/resources/brave_components_strings.grd
+++ b/components/resources/brave_components_strings.grd
@@ -457,13 +457,15 @@
       <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>
       <!-- WebUI brave sync resources: Enabled Content -->
       <message name="IDS_BRAVE_SYNC_ENABLED_BRAVE_TITLE" desc="The Brae Sync title">Brave Sync</message>
-      <message name="IDS_BRAVE_SYNC_ENABLED_DEVICES_CHAIN_TITLE" desc="The Sync title for the table of devices synced">Devices in your sync chain</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_DEVICES_CHAIN_TITLE" desc="The Sync title for the table of devices synced">The device list below includes all devices in your sync chain. Each device can be managed from any other device.</message>
       <message name="IDS_BRAVE_SYNC_ENABLED_TABLE_DEVICE_NAME_TITLE" desc="The Sync table title for the device column">device name</message>
       <message name="IDS_BRAVE_SYNC_ENABLED_TABLE_THIS_DEVICE_TEXT" desc="The Sync table title for the device column">(This Device)</message>
-      <message name="IDS_BRAVE_SYNC_ENABLED_TABLE_ADDED_ON_TITLE" desc="The Sync table title indicating when a device was added to the chain">added on</message>
-      <message name="IDS_BRAVE_SYNC_ENABLED_ADD_DEVICE_BUTTON" desc="The Sync button `add device` for adding a new device to the sync chain. triggers a modal with device options">add device</message>
-      <message name="IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON" desc="The Sync button `view sync code` for viewing the passphrase and qr code needed to add a new device. triggers a modal with sync code">view QR code and code words</message>
-      <message name="IDS_BRAVE_SYNC_ENABLED_DATA_TITLE" desc="The Sync title that shows the options for data syncing">Data to sync from</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_TABLE_ADDED_ON_TITLE" desc="The Sync table title indicating when a device was added to the chain">Date Added</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_ADD_DEVICE_BUTTON" desc="The Sync button `add device` for adding a new device to the sync chain. triggers a modal with device options">Add New Device</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON" desc="The Sync button `view sync code` for viewing the passphrase and qr code needed to add a new device. triggers a modal with sync code">View Sync Code</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_SETTINGS_TITLE" desc="The Sync title that shows the options for data syncing">Brave Sync Settings</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_SETTINGS_DESCRIPTION" desc="The Sync description that shows the options for data syncing">Manage what information you would like to sync between devices. These settings only effect this device.</message>
+      <message name="IDS_BRAVE_SYNC_ENABLED_TABLE_SETTINGS" desc="The Sync description that shows the options for data syncing">Settings</message>
       <message name="IDS_BRAVE_SYNC_ENABLED_BOOKMARKS_LABEL" desc="The Sync label for the `bookmarks` toggle">Bookmarks</message>
       <message name="IDS_BRAVE_SYNC_ENABLED_SITE_SETTINGS_LABEL" desc="The Sync label for the `saved site settings` toggle">Saved Site Settings</message>
       <message name="IDS_BRAVE_SYNC_ENABLED_HISTORY_LABEL" desc="The Sync label for the `browsing history` toggle">Browsing History</message>