diff --git a/komga-webui/src/router.ts b/komga-webui/src/router.ts
index 6b445cf2b..bdea0f968 100644
--- a/komga-webui/src/router.ts
+++ b/komga-webui/src/router.ts
@@ -94,12 +94,6 @@ const router = new Router({
               beforeEnter: adminGuard,
               component: () => import(/* webpackChunkName: "settings-server" */ './views/SettingsServer.vue'),
             },
-            {
-              path: '/settings/data-import',
-              name: 'settings-data-import',
-              beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "settings-data-import" */ './views/SettingsDataImport.vue'),
-            },
           ],
         },
         {
@@ -175,8 +169,23 @@ const router = new Router({
         {
           path: '/import',
           name: 'import',
+          redirect: {name: 'import-books'},
           beforeEnter: adminGuard,
-          component: () => import(/* webpackChunkName: "book-import" */ './views/BookImport.vue'),
+          component: () => import(/* webpackChunkName: "import" */ './views/ImportHolder.vue'),
+          children: [
+            {
+              path: '/import/books',
+              name: 'import-books',
+              beforeEnter: adminGuard,
+              component: () => import(/* webpackChunkName: "import-books" */ './views/ImportBooks.vue'),
+            },
+            {
+              path: '/import/readlists',
+              name: 'import-readlists',
+              beforeEnter: adminGuard,
+              component: () => import(/* webpackChunkName: "import-readlists" */ './views/ImportReadLists.vue'),
+            },
+          ],
         },
       ],
     },
diff --git a/komga-webui/src/views/BookImport.vue b/komga-webui/src/views/ImportBooks.vue
similarity index 99%
rename from komga-webui/src/views/BookImport.vue
rename to komga-webui/src/views/ImportBooks.vue
index 1eed9bfa3..47206a174 100644
--- a/komga-webui/src/views/BookImport.vue
+++ b/komga-webui/src/views/ImportBooks.vue
@@ -115,7 +115,7 @@ import {ERROR} from '@/types/events'
 import EmptyState from '@/components/EmptyState.vue'
 
 export default Vue.extend({
-  name: 'BookImport',
+  name: 'ImportBooks',
   components: {EmptyState, FileBrowserDialog, FileImportRow, SeriesPickerDialog},
   data: () => ({
     modalFileBrowser: false,
diff --git a/komga-webui/src/views/ImportHolder.vue b/komga-webui/src/views/ImportHolder.vue
new file mode 100644
index 000000000..a4a02a909
--- /dev/null
+++ b/komga-webui/src/views/ImportHolder.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <v-tabs>
+      <v-tab :to="{name: 'import-books'}">{{ $t('common.books') }}</v-tab>
+      <v-tab :to="{name: 'import-readlists'}">{{ $t('common.readlists') }}</v-tab>
+    </v-tabs>
+    <router-view/>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'ImportHolder',
+})
+</script>
diff --git a/komga-webui/src/views/SettingsDataImport.vue b/komga-webui/src/views/ImportReadLists.vue
similarity index 93%
rename from komga-webui/src/views/SettingsDataImport.vue
rename to komga-webui/src/views/ImportReadLists.vue
index c3032f5ed..dc0129646 100644
--- a/komga-webui/src/views/SettingsDataImport.vue
+++ b/komga-webui/src/views/ImportReadLists.vue
@@ -1,12 +1,9 @@
 <template>
   <v-container fluid class="pa-6">
-    <v-row>
-      <v-col class="text-h5">{{ $t('data_import.import_read_lists') }}</v-col>
-    </v-row>
+    <v-alert type="info" text class="body-2">
+      <div v-html="$t('data_import.comicrack_preambule_html')"/>
+    </v-alert>
     <v-form v-model="valid" ref="form">
-      <v-row>
-        <v-col class="body-2" v-html="$t('data_import.comicrack_preambule_html')"></v-col>
-      </v-row>
       <v-row align="center">
         <v-col cols>
           <v-file-input
@@ -21,6 +18,7 @@
         </v-col>
         <v-col cols="auto">
           <v-btn
+            color="primary"
             :disabled="!valid"
             @click="importFiles"
           >{{ $t('data_import.button_import') }}
@@ -92,7 +90,7 @@ import Vue from 'vue'
 import {convertErrorCodes} from '@/functions/error-codes'
 
 export default Vue.extend({
-  name: 'SettingsDataImport',
+  name: 'ImportReadLists',
   data: () => ({
     convertErrorCodes,
     files: [],
diff --git a/komga-webui/src/views/SettingsHolder.vue b/komga-webui/src/views/SettingsHolder.vue
index 915ef21eb..c81d4a3d7 100644
--- a/komga-webui/src/views/SettingsHolder.vue
+++ b/komga-webui/src/views/SettingsHolder.vue
@@ -12,7 +12,6 @@
       </v-tab>
       <v-tab :to="{name: 'settings-users'}">{{ $t('users.users') }}</v-tab>
       <v-tab :to="{name: 'settings-server'}">{{ $t('server.tab_title') }}</v-tab>
-      <v-tab :to="{name: 'settings-data-import'}">{{ $t('data_import.tab_title') }}</v-tab>
     </v-tabs>
     <router-view/>
   </div>