diff --git a/materialious/src/lib/components/settings/ExportImport.svelte b/materialious/src/lib/components/settings/ExportImport.svelte
new file mode 100644
index 00000000..270839d6
--- /dev/null
+++ b/materialious/src/lib/components/settings/ExportImport.svelte
@@ -0,0 +1,181 @@
+
+
+
{$_('pages.subscriptions')}
+
+
+
+
+ {
+ const files = (event.target as HTMLInputElement).files;
+ if (files?.length === 0 || !files) return;
+
+ addToast({
+ data: {
+ text: $_('layout.export.importing')
+ },
+ id: 'importing-toast',
+ closeDelay: 0
+ });
+
+ await importSubscriptionsFromFile(files[0]);
+
+ toaster.removeToast('importing-toast');
+
+ addToast({
+ data: {
+ text: $_('layout.export.importingCompleted')
+ }
+ });
+ }}
+ accept=".json,.opml,.csv"
+ type="file"
+ />
+
+
info {$_('layout.export.importSubSupported')}
+
+
+
+
+
+
+
+
+{#if $invidiousAuthStore && $invidiousInstanceStore && $backendInUseStore === 'yt'}
+
+
{$_('layout.backendEngine.importExport')}
+
+
+
+
+
+
+
+{/if}
+
+
{$_('layout.settings')}
+
+
+
+
+
+
+
+
+
+ {
+ const files = (event.target as HTMLInputElement).files;
+ if (files?.length === 0 || !files) return;
+
+ await loadSettingsFromFile(files[0]);
+ }}
+ accept=".json"
+ type="file"
+ />
+
diff --git a/materialious/src/lib/components/settings/Interface.svelte b/materialious/src/lib/components/settings/Interface.svelte
index d9601551..77abf0ee 100644
--- a/materialious/src/lib/components/settings/Interface.svelte
+++ b/materialious/src/lib/components/settings/Interface.svelte
@@ -1,8 +1,7 @@