diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d2bb0e7ef9..96fb60102d 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -14,6 +14,10 @@ import { LoginComponent } from './accounts/login.component';
 import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 
+import { ExportComponent } from './tools/export.component';
+import { ImportComponent } from './tools/import.component';
+import { ToolsComponent } from './tools/tools.component';
+
 import { VaultComponent } from './vault/vault.component';
 
 import { UnauthGuardService } from './services/unauth-guard.service';
@@ -37,6 +41,15 @@ const routes: Routes = [
         component: UserLayoutComponent,
         children: [
             { path: 'vault', component: VaultComponent, canActivate: [AuthGuardService] },
+            {
+                path: 'tools',
+                component: ToolsComponent,
+                children: [
+                    { path: '', pathMatch: 'full', redirectTo: 'import' },
+                    { path: 'import', component: ImportComponent, canActivate: [AuthGuardService] },
+                    { path: 'export', component: ExportComponent, canActivate: [AuthGuardService] },
+                ],
+            },
         ],
     },
     {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 68094f760a..ce4794a796 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -29,6 +29,10 @@ import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 
+import { ExportComponent } from './tools/export.component';
+import { ImportComponent } from './tools/import.component';
+import { ToolsComponent } from './tools/tools.component';
+
 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
 import { CiphersComponent } from './vault/ciphers.component';
@@ -75,6 +79,7 @@ import { Folder } from 'jslib/models/domain';
         BlurClickDirective,
         BoxRowDirective,
         CiphersComponent,
+        ExportComponent,
         FallbackSrcDirective,
         FolderAddEditComponent,
         FooterComponent,
@@ -83,6 +88,7 @@ import { Folder } from 'jslib/models/domain';
         HintComponent,
         IconComponent,
         I18nPipe,
+        ImportComponent,
         InputVerbatimDirective,
         LockComponent,
         LoginComponent,
@@ -93,6 +99,7 @@ import { Folder } from 'jslib/models/domain';
         SearchCiphersPipe,
         StopClickDirective,
         StopPropDirective,
+        ToolsComponent,
         TrueFalseValueDirective,
         TwoFactorComponent,
         TwoFactorOptionsComponent,
diff --git a/src/app/tools/export.component.html b/src/app/tools/export.component.html
new file mode 100644
index 0000000000..28c8950e54
--- /dev/null
+++ b/src/app/tools/export.component.html
@@ -0,0 +1 @@
+<h1>Export</h1>
diff --git a/src/app/tools/export.component.ts b/src/app/tools/export.component.ts
new file mode 100644
index 0000000000..e7ff8d32ff
--- /dev/null
+++ b/src/app/tools/export.component.ts
@@ -0,0 +1,9 @@
+import {
+    Component,
+} from '@angular/core';
+
+@Component({
+    selector: 'app-export',
+    templateUrl: 'export.component.html',
+})
+export class ExportComponent { }
diff --git a/src/app/tools/import.component.html b/src/app/tools/import.component.html
new file mode 100644
index 0000000000..3b2d015a8f
--- /dev/null
+++ b/src/app/tools/import.component.html
@@ -0,0 +1 @@
+<h1>Import</h1>
diff --git a/src/app/tools/import.component.ts b/src/app/tools/import.component.ts
new file mode 100644
index 0000000000..e9e4ca98bd
--- /dev/null
+++ b/src/app/tools/import.component.ts
@@ -0,0 +1,9 @@
+import {
+    Component,
+} from '@angular/core';
+
+@Component({
+    selector: 'app-import',
+    templateUrl: 'import.component.html',
+})
+export class ImportComponent { }
diff --git a/src/app/tools/tools.component.html b/src/app/tools/tools.component.html
new file mode 100644
index 0000000000..ec91827e14
--- /dev/null
+++ b/src/app/tools/tools.component.html
@@ -0,0 +1,19 @@
+<div class="container page-content">
+    <div class="row">
+        <div class="col-3">
+            <div class="card">
+                <div class="card-header">Tools</div>
+                <div class="list-group list-group-flush">
+                    <a routerLink="import" class="list-group-item" routerLinkActive="active">
+                        Import
+                    </a>
+                    <a routerLink="export" class="list-group-item" routerLinkActive="active">
+                        Export</a>
+                </div>
+            </div>
+        </div>
+        <div class="col-6">
+            <router-outlet></router-outlet>
+        </div>
+    </div>
+</div>
diff --git a/src/app/tools/tools.component.ts b/src/app/tools/tools.component.ts
new file mode 100644
index 0000000000..3021a401a6
--- /dev/null
+++ b/src/app/tools/tools.component.ts
@@ -0,0 +1,9 @@
+import {
+    Component,
+} from '@angular/core';
+
+@Component({
+    selector: 'app-tools',
+    templateUrl: 'tools.component.html',
+})
+export class ToolsComponent { }