diff --git a/apps/mina-sidor-fa/src/app/app-routing.module.ts b/apps/mina-sidor-fa/src/app/app-routing.module.ts
index 5795781..f6fe619 100644
--- a/apps/mina-sidor-fa/src/app/app-routing.module.ts
+++ b/apps/mina-sidor-fa/src/app/app-routing.module.ts
@@ -63,6 +63,14 @@ activeFeatures.forEach(feature => {
         canActivate: [AuthGuard, OrganizationGuard, RoleGuard],
       });
       break;
+    case Feature.EXPORTS:
+      routes.push({
+        path: 'exporter',
+        data: { title: 'Exporter', expectedRoles: [RoleEnum.MSFA_ReceiveDeltagare] },
+        loadChildren: () => import('./pages/exports/exports.module').then(m => m.ExportsModule),
+        canActivate: [AuthGuard, OrganizationGuard, RoleGuard],
+      });
+      break;
     case Feature.MY_ACCOUNT:
       routes.push({
         path: 'mitt-konto',
diff --git a/apps/mina-sidor-fa/src/app/pages/exports/exports-routing.module.ts b/apps/mina-sidor-fa/src/app/pages/exports/exports-routing.module.ts
new file mode 100644
index 0000000..aab8b07
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/exports/exports-routing.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ExportsComponent } from './exports.component';
+
+const routes: Routes = [
+  { path: '', data: { title: 'Exporter' }, component: ExportsComponent },
+  {
+    path: 'deltagare',
+    data: { title: 'Skapa export för deltagare' },
+    loadChildren: () => import('./pages/deltagare-export/deltagare-export.module').then(m => m.DeltagareExportModule),
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ExportsRoutingModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/exports/exports.component.html b/apps/mina-sidor-fa/src/app/pages/exports/exports.component.html
new file mode 100644
index 0000000..662eeb0
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/exports/exports.component.html
@@ -0,0 +1,10 @@
+<msfa-layout>
+  <section class="exports">
+    <digi-typography>
+      <header class="exports__header">
+        <h1>Exporter</h1>
+      </header>
+      <main class="exports__contents"></main>
+    </digi-typography>
+  </section>
+</msfa-layout>
diff --git a/apps/mina-sidor-fa/src/app/pages/exports/exports.component.scss b/apps/mina-sidor-fa/src/app/pages/exports/exports.component.scss
new file mode 100644
index 0000000..1fb6463
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/exports/exports.component.scss
@@ -0,0 +1,10 @@
+@import 'variables/gutters';
+
+.exports {
+  &__contents {
+    display: flex;
+    flex-direction: column;
+    gap: $digi--layout--gutter--l;
+    margin-top: $digi--layout--gutter--l;
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/pages/exports/exports.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/exports/exports.component.spec.ts
new file mode 100644
index 0000000..15959b1
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/exports/exports.component.spec.ts
@@ -0,0 +1,30 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ExportsComponent } from './exports.component';
+
+describe('ExportsComponent', () => {
+  let component: ExportsComponent;
+  let fixture: ComponentFixture<ExportsComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
+        declarations: [ExportsComponent],
+        imports: [HttpClientTestingModule, RouterTestingModule],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExportsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/mina-sidor-fa/src/app/pages/exports/exports.component.ts b/apps/mina-sidor-fa/src/app/pages/exports/exports.component.ts
new file mode 100644
index 0000000..a1f947b
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/exports/exports.component.ts
@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'msfa-exports',
+  templateUrl: './exports.component.html',
+  styleUrls: ['./exports.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ExportsComponent {}
diff --git a/apps/mina-sidor-fa/src/app/pages/exports/exports.module.ts b/apps/mina-sidor-fa/src/app/pages/exports/exports.module.ts
new file mode 100644
index 0000000..4e4b72c
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/exports/exports.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { ExportsComponent } from './exports.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [ExportsComponent],
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: ExportsComponent }]), LayoutModule],
+})
+export class ExportsModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.html b/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.html
new file mode 100644
index 0000000..76f2f4b
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.html
@@ -0,0 +1,10 @@
+<msfa-layout>
+  <section class="deltagare-export">
+      <digi-typography>
+      <header class="deltagare-export__header">
+          <h1>Deltagare export</h1>
+      </header>
+      <main class="deltagare-export__contents"></main>
+    </digi-typography>
+    </section>
+</msfa-layout>
diff --git a/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.scss b/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.scss
new file mode 100644
index 0000000..7944f62
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.scss
@@ -0,0 +1,10 @@
+@import 'variables/gutters';
+
+.deltagare-export {
+  &__contents {
+    display: flex;
+    flex-direction: column;
+    gap: $digi--layout--gutter--l;
+    margin-top: $digi--layout--gutter--l;
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.spec.ts
new file mode 100644
index 0000000..a57fc4b
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.spec.ts
@@ -0,0 +1,30 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { DeltagareExportComponent } from './deltagare-export.component';
+
+describe('DeltagareExportComponent', () => {
+  let component: DeltagareExportComponent;
+  let fixture: ComponentFixture<DeltagareExportComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
+        declarations: [DeltagareExportComponent],
+        imports: [HttpClientTestingModule, RouterTestingModule],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeltagareExportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.ts b/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.ts
new file mode 100644
index 0000000..6d21e27
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.ts
@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'msfa-deltagare-export',
+  templateUrl: './deltagare-export.component.html',
+  styleUrls: ['./deltagare-export.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DeltagareExportComponent {}
diff --git a/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.module.ts b/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.module.ts
new file mode 100644
index 0000000..2a6fd13
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { DeltagareExportComponent } from './deltagare-export.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [DeltagareExportComponent],
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: DeltagareExportComponent }]), LayoutModule],
+})
+export class DeltagareExportModule {}
diff --git a/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.html b/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.html
index a4117ae..db4a2b4 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.html
+++ b/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.html
@@ -79,5 +79,6 @@
     <digi-icon-arrow-right *ngSwitchCase="iconType.ARROW_RIGHT" [ngClass]="iconClass"></digi-icon-arrow-right>
     <digi-icon-eye *ngSwitchCase="iconType.EYE" [ngClass]="iconClass"></digi-icon-eye>
     <digi-icon-eye-slash *ngSwitchCase="iconType.EYESLASH" [ngClass]="iconClass"></digi-icon-eye-slash>
+    <digi-icon-archive *ngSwitchCase="iconType.ARCHIVE" [ngClass]="iconClass"></digi-icon-archive>
   </ng-container>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.html b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.html
index 0eb3ea0..2cbd6b6 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.html
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.html
@@ -31,5 +31,12 @@
         Administration
       </a>
     </li>
+
+    <li class="sidebar__item" *ngIf="exportsVisible">
+      <a [routerLink]="['/exporter']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
+        <msfa-icon class="sidebar__icon" [icon]="iconType.ARCHIVE" size="xl"></msfa-icon>
+        Exporter
+      </a>
+    </li>
   </ul>
 </nav>
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.ts
index 73ba2f5..1ad3566 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.ts
@@ -36,4 +36,10 @@ export class SidebarComponent {
       )
     );
   }
+  get exportsVisible(): boolean {
+    return (
+      this.activeFeatures.includes(Feature.EXPORTS) &&
+      this.userRoles?.some(role => role.type === RoleEnum.MSFA_ReceiveDeltagare)
+    );
+  }
 }
diff --git a/apps/mina-sidor-fa/src/app/shared/enums/feature.enum.ts b/apps/mina-sidor-fa/src/app/shared/enums/feature.enum.ts
index 95a9312..4d74555 100644
--- a/apps/mina-sidor-fa/src/app/shared/enums/feature.enum.ts
+++ b/apps/mina-sidor-fa/src/app/shared/enums/feature.enum.ts
@@ -15,4 +15,5 @@ export enum Feature {
   REPORTING_SIGNAL,
   REPORTING_PERIODISK_REDOVISNING,
   REPORTING_INFORMATIV_RAPPORT,
+  EXPORTS,
 }
diff --git a/apps/mina-sidor-fa/src/app/shared/enums/icon-type.enum.ts b/apps/mina-sidor-fa/src/app/shared/enums/icon-type.enum.ts
index 0944cc5..5707b41 100644
--- a/apps/mina-sidor-fa/src/app/shared/enums/icon-type.enum.ts
+++ b/apps/mina-sidor-fa/src/app/shared/enums/icon-type.enum.ts
@@ -20,4 +20,5 @@ export enum IconType {
   ARROW_RIGHT = 'arrow-right',
   EYE = 'eye',
   EYESLASH = 'eyeslash',
+  ARCHIVE = 'archive',
 }
diff --git a/apps/mina-sidor-fa/src/environments/active-features.ts b/apps/mina-sidor-fa/src/environments/active-features.ts
index 2203026..67f1387 100644
--- a/apps/mina-sidor-fa/src/environments/active-features.ts
+++ b/apps/mina-sidor-fa/src/environments/active-features.ts
@@ -26,4 +26,5 @@ export const ACTIVE_FEATURES_TEST: Feature[] = [
   Feature.VERSION_INFO,
   Feature.REPORTING_PERIODISK_REDOVISNING,
   Feature.REPORTING_INFORMATIV_RAPPORT,
+  Feature.EXPORTS,
 ];