diff --git a/src/app/features/settings/encryption/Encryption.tsx b/src/app/features/settings/encryption/Encryption.tsx
index 599ed106..1125cc69 100644
--- a/src/app/features/settings/encryption/Encryption.tsx
+++ b/src/app/features/settings/encryption/Encryption.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import { Box, Text, IconButton, Icon, Icons, Scroll, Button } from 'folds';
+import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { LocalBackup } from './LocalBackup';
+import { OnlineBackup } from './OnlineBackup';
 
 type EncryptionProps = {
   requestClose: () => void;
@@ -44,27 +45,7 @@ export function Encryption({ requestClose }: EncryptionProps) {
                   />
                 </SequenceCard>
               </Box>
-              <Box direction="Column" gap="100">
-                <Text size="L400">Online Backup</Text>
-                <SequenceCard
-                  className={SequenceCardStyle}
-                  variant="SurfaceVariant"
-                  direction="Column"
-                  gap="400"
-                >
-                  <SettingTile
-                    title="Automatic Backup"
-                    description="Continuously save encryption data on server to decrypt messages later."
-                    after={
-                      <Button size="300" variant="Success" radii="300">
-                        <Text as="span" size="B300">
-                          Restore
-                        </Text>
-                      </Button>
-                    }
-                  />
-                </SequenceCard>
-              </Box>
+              <OnlineBackup />
               <LocalBackup />
             </Box>
           </PageContent>
diff --git a/src/app/features/settings/encryption/OnlineBackup.tsx b/src/app/features/settings/encryption/OnlineBackup.tsx
new file mode 100644
index 00000000..74c1a9f6
--- /dev/null
+++ b/src/app/features/settings/encryption/OnlineBackup.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box, Text, Button } from 'folds';
+import { SettingTile } from '../../../components/setting-tile';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+
+export function OnlineBackup() {
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Online Backup</Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title="Automatic Backup"
+          description="Continuously save encryption data on server to decrypt messages later."
+          after={
+            <Button size="300" variant="Success" radii="300">
+              <Text as="span" size="B300">
+                Restore
+              </Text>
+            </Button>
+          }
+        />
+      </SequenceCard>
+    </Box>
+  );
+}