diff --git a/apps/dafa-web/src/app/data/enums/keyboard-codes.enum.ts b/apps/dafa-web/src/app/data/enums/keyboard-codes.enum.ts
new file mode 100644
index 0000000..4a25bc9
--- /dev/null
+++ b/apps/dafa-web/src/app/data/enums/keyboard-codes.enum.ts
@@ -0,0 +1,4 @@
+export enum KeyboardCodes {
+  ENTER = 'Enter',
+  ESCAPE = 'Escape',
+}
diff --git a/apps/dafa-web/src/app/pages/participants/participants.component.html b/apps/dafa-web/src/app/pages/participants/participants.component.html
index 78e7001..7a3956e 100644
--- a/apps/dafa-web/src/app/pages/participants/participants.component.html
+++ b/apps/dafa-web/src/app/pages/participants/participants.component.html
@@ -1,8 +1,18 @@
 <digi-typography>
-  <h1>Mina deltagare</h1>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna neque, interdum vel massa eget, condimentum
-    rutrum velit. Sed vitae ullamcorper sem. Aliquam malesuada nunc sed purus mollis scelerisque. Curabitur bibendum leo
-    quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
-  </p>
+  <section class="participants">
+    <h1>Mina deltagare</h1>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna neque, interdum vel massa eget, condimentum
+      rutrum velit. Sed vitae ullamcorper sem. Aliquam malesuada nunc sed purus mollis scelerisque. Curabitur bibendum
+      leo quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
+    </p>
+
+    <form class="participants__search-wrapper" (ngSubmit)="handleSearchSubmit($event)">
+      <digi-form-input-search
+        af-label="Sök kunder"
+        af-label-description="Sök på namn eller ärendenummer"
+        (afOnInput)="handleSearchInput($event)"
+      ></digi-form-input-search>
+    </form>
+  </section>
 </digi-typography>
diff --git a/apps/dafa-web/src/app/pages/participants/participants.component.scss b/apps/dafa-web/src/app/pages/participants/participants.component.scss
index e69de29..13d8bdc 100644
--- a/apps/dafa-web/src/app/pages/participants/participants.component.scss
+++ b/apps/dafa-web/src/app/pages/participants/participants.component.scss
@@ -0,0 +1,5 @@
+.participants {
+  &__search-wrapper {
+    max-width: var(--digi--typography--text--max-width);
+  }
+}
diff --git a/apps/dafa-web/src/app/pages/participants/participants.component.ts b/apps/dafa-web/src/app/pages/participants/participants.component.ts
index 87aa326..de9838e 100644
--- a/apps/dafa-web/src/app/pages/participants/participants.component.ts
+++ b/apps/dafa-web/src/app/pages/participants/participants.component.ts
@@ -6,4 +6,15 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   styleUrls: ['./participants.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ParticipantsComponent {}
+export class ParticipantsComponent {
+  searchValue = '';
+
+  handleSearchSubmit($event: SubmitEvent): void {
+    console.log(this.searchValue);
+    console.log($event);
+  }
+
+  handleSearchInput($event: CustomEvent): void {
+    this.searchValue = $event.detail.target.value;
+  }
+}
diff --git a/apps/dafa-web/src/app/pages/participants/participants.module.ts b/apps/dafa-web/src/app/pages/participants/participants.module.ts
index bc30997..a576eb9 100644
--- a/apps/dafa-web/src/app/pages/participants/participants.module.ts
+++ b/apps/dafa-web/src/app/pages/participants/participants.module.ts
@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { ParticipantsComponent } from './participants.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [ParticipantsComponent],
-  imports: [CommonModule, RouterModule.forChild([{ path: '', component: ParticipantsComponent }])],
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: ParticipantsComponent }]), FormsModule],
 })
 export class ParticipantsModule {}
diff --git a/apps/dafa-web/src/app/shared/components/icon/icon.module.ts b/apps/dafa-web/src/app/shared/components/icon/icon.module.ts
index e6bbbb7..ee56eec 100644
--- a/apps/dafa-web/src/app/shared/components/icon/icon.module.ts
+++ b/apps/dafa-web/src/app/shared/components/icon/icon.module.ts
@@ -1,24 +1,10 @@
-import { DigiNgIconBellModule } from '@af/digi-ng/_icon/icon-bell';
-import { DigiNgIconCalendarAltModule } from '@af/digi-ng/_icon/icon-calendar-alt';
-import { DigiNgIconEnvelopeFilledModule } from '@af/digi-ng/_icon/icon-envelope-filled';
-import { DigiNgIconSokkandidatModule } from '@af/digi-ng/_icon/icon-sokkandidat';
-import { DigiNgIconUserAltModule } from '@af/digi-ng/_icon/icon-user-alt';
-import { DigiNgIconUsersSolidModule } from '@af/digi-ng/_icon/icon-users-solid';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { IconComponent } from './icon.component';
 
 @NgModule({
   declarations: [IconComponent],
-  imports: [
-    CommonModule,
-    DigiNgIconUserAltModule,
-    DigiNgIconUsersSolidModule,
-    DigiNgIconBellModule,
-    DigiNgIconCalendarAltModule,
-    DigiNgIconEnvelopeFilledModule,
-    DigiNgIconSokkandidatModule,
-  ],
+  imports: [CommonModule],
   exports: [IconComponent],
 })
 export class IconModule {}
diff --git a/mock-api/.gitkeep b/mock-api/.gitkeep
new file mode 100644
index 0000000..e69de29