diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html
index 3f1b373..cffe79b 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html
@@ -103,6 +103,12 @@
         </div>
         <div class="employee-card__block">
           <h3>Roller</h3>
+          <p>
+            Här ser du användarens specifika roller i systemet. Tänk på att rollen i systemet är begränsad till de
+            utförande verksamheter och adresser som användaren hör till. Användaren kan därför endast utföra uppgifter
+            och se information inom den/de utförande adresser som tilldelats användaren.
+            <msfa-roles-dialog></msfa-roles-dialog>.
+          </p>
           <ul class="employee-card__list">
             <li *ngFor="let role of allRoles">
               <digi-icon-check-circle
diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.module.ts b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.module.ts
index a45add4..561208c 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.module.ts
@@ -3,10 +3,11 @@ import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { RolesDialogModule } from '@msfa-shared/components/roles-dialog/roles-dialog.module';
 import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { EmployeeCardComponent } from './employee-card.component';
 
 @NgModule({
@@ -20,7 +21,8 @@ import { EmployeeCardComponent } from './employee-card.component';
     DigiNgLayoutExpansionPanelModule,
     LocalDatePipeModule,
     HideTextModule,
-    BackLinkModule
+    BackLinkModule,
+    RolesDialogModule,
   ],
 })
 export class EmployeeCardModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html
index 47428ae..84c3928 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html
@@ -71,19 +71,8 @@
         <p>
           Här tilldelar du specifika roller i systemet. Välj nedan vilka arbetsuppgifter som användaren ska kunna
           utföra. Tänk på att rollen i systemet är begränsad till de utförande verksamheter och adresser som användaren
-          hör till. Användaren kan därför endast utföra uppgifter och se information inom den/ de utförande adresser som
-          tilldelats användaren.
-          <digi-ng-button
-            class="edit-employee-form__roles-dialog-button"
-            [afVariation]="ButtonVariation.TERTIARY"
-            [afType]="ButtonType.BUTTON"
-            [afSize]="ButtonSize.S"
-            afAriaControls="roles-dialog"
-            [afAriaLabel]="'Öppnar en dialog med information om behörigheter'"
-            (afOnClick)="openRolesDialog()"
-          >
-            Läs mer om roller här
-          </digi-ng-button>
+          hör till. Användaren kan därför endast utföra uppgifter och se information inom den/de utförande adresser som
+          tilldelats användaren. <msfa-roles-dialog></msfa-roles-dialog>.
         </p>
 
         <fieldset class="edit-employee-form__fieldset">
diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts
index 78aec54..9bd66a1 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts
@@ -12,6 +12,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { RolesDialogModule } from '@msfa-shared/components/roles-dialog/roles-dialog.module';
 import { TreeNodesSelectorModule } from '@msfa-shared/components/tree-nodes-selector/tree-nodes-selector.module';
 import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
 import { EmployeeDeleteModule } from '../../components/employee-delete/employee-delete.module';
@@ -38,6 +39,7 @@ import { EmployeeFormComponent } from './employee-form.component';
     DigiNgDialogModule,
     HideTextModule,
     TreeNodesSelectorModule,
+    RolesDialogModule,
   ],
 })
 export class EmployeeFormModule {}
diff --git a/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.html b/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.html
new file mode 100644
index 0000000..e3fab30
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.html
@@ -0,0 +1,79 @@
+<button
+  class="roles-dialog-button"
+  type="button"
+  (click)="openRolesDialog()"
+  aria-controls="roles-dialog"
+  aria-label="Öppnar en dialog med information om behörigheter"
+>
+  {{buttonText}}
+</button>
+
+<digi-ng-dialog
+  id="roles-dialog"
+  class="roles-dialog"
+  [afActive]="displayRolesDialog"
+  (afOnInactive)="closeRolesDialog()"
+  (afOnPrimaryClick)="closeRolesDialog()"
+  afHeading="Om rollerna i systemet"
+  afHeadingLevel="h2"
+  afPrimaryButtonText="Stäng"
+  afSecondaryButtonText=""
+>
+  <p>
+    Läs beskrivningarna nedan för att lära dig mer om de olika rollerna. Personalen kan tilldelas en roll, eller flera
+    roller, beroende på vad de arbetar med. Tänk på att rollen endast gäller inom de utförande verksamheter och adresser
+    som personalen fått behörighet till.
+  </p>
+  <p>
+    All personal kommer att kunna se sitt eget personalkonto, där de kan se vilka roller och utförande verksamheter och
+    adresser som tilldelats dem i systemet. De kommer även att se startsidan.
+  </p>
+
+  <h3>Administrera behörigheter</h3>
+  <p>
+    Rollen passar personal som ska administrera behörigheter i systemet. Rollen bör begränsas till ett fåtal personer
+    och kan användas av exempelvis firmatecknare, behörighetsadministratör, eller annan person som ska kunna
+    administrera personalens behörigheter. Rollen gäller endast inom de utförande verksamheter och adresser som getts
+    behörighet till.
+  </p>
+  <p>Rollen ger tillgång till följande funktioner:</p>
+  <ul>
+    <li>Skapa nya personalkonton</li>
+    <li>Se personallista</li>
+    <li>Se och ändra personalkonto och dess behörigheter</li>
+    <li>Ta bort personalkonton</li>
+  </ul>
+
+  <h3>Ta emot nya deltagare</h3>
+  <p>
+    Rollen passar personal som ska se nya deltagare som inkommit i systemet och som ska tilldela handledare till nya
+    deltagare. Rollen kan exempelvis användas av samordnande roller, handledare, administratörer, eller annan personal
+    som ska kunna utföra dessa arbetsuppgifter. Rollen gäller endast inom de utförande verksamheter och adresser som
+    getts behörighet till.
+  </p>
+  <p>Rollen ger tillgång till följande funktioner:</p>
+  <ul>
+    <li>Se lista över nya deltagare som inkommit</li>
+    <li>Tilldela handledare till nya deltagare</li>
+    <li>Ta bort nya deltagare där beslut om avbrott skett innan tjänsten startat</li>
+  </ul>
+
+  <h3>Rapportering, planering och information om deltagare</h3>
+  <p>
+    Rollen passar personal som arbetar nära deltagare. Rollen kan användas av exempelvis handledare, coacher, studie-
+    och yrkesvägledare, lärare eller andra roller som behöver se information om deltagare, planera aktiviteter med
+    deltagare eller hantera deltagares rapporter. Rollen gäller endast inom de utförande verksamheter och adresser som
+    getts behörighet till.
+  </p>
+  <p>Rollen ger tillgång till följande funktioner:</p>
+
+  <ul>
+    <li>Se lista över deltagare</li>
+    <li>Se information om deltagare</li>
+    <li>Planera aktiviteter i en gemensam planering</li>
+    <li>Skicka och se avvikelserapporter</li>
+    <li>Skicka och se resultatrapporter</li>
+    <li>Skicka och se slutredovisningar</li>
+    <li>Skicka och se informativa rapporter</li>
+  </ul>
+</digi-ng-dialog>
diff --git a/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.scss b/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.scss
new file mode 100644
index 0000000..6e53264
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.scss
@@ -0,0 +1,9 @@
+@import 'mixins/link';
+
+.roles-dialog {
+  position: absolute;
+}
+
+.roles-dialog-button {
+  @include msfa__button-as-link(true);
+}
diff --git a/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.spec.ts b/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.spec.ts
new file mode 100644
index 0000000..1c1fc74
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.spec.ts
@@ -0,0 +1,26 @@
+/* tslint:disable:no-unused-variable */
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RolesDialogComponent } from './roles-dialog.component';
+
+describe('RolesDialogComponent', () => {
+  let component: RolesDialogComponent;
+  let fixture: ComponentFixture<RolesDialogComponent>;
+
+  beforeEach(async(() => {
+    void TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [RolesDialogComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RolesDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.ts b/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.ts
new file mode 100644
index 0000000..bc3cd4a
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.component.ts
@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'msfa-roles-dialog',
+  templateUrl: './roles-dialog.component.html',
+  styleUrls: ['./roles-dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RolesDialogComponent {
+  @Input() buttonText = 'Läs mer om roller här';
+
+  displayRolesDialog = false;
+
+  openRolesDialog(): void {
+    this.displayRolesDialog = true;
+  }
+
+  closeRolesDialog(): void {
+    this.displayRolesDialog = false;
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.module.ts b/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.module.ts
new file mode 100644
index 0000000..5d4c42b
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/components/roles-dialog/roles-dialog.module.ts
@@ -0,0 +1,12 @@
+import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RolesDialogComponent } from './roles-dialog.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [RolesDialogComponent],
+  imports: [CommonModule, DigiNgDialogModule],
+  exports: [RolesDialogComponent],
+})
+export class RolesDialogModule {}
diff --git a/apps/mina-sidor-fa/src/styles/mixins/_link.scss b/apps/mina-sidor-fa/src/styles/mixins/_link.scss
index 629ae25..0f60713 100644
--- a/apps/mina-sidor-fa/src/styles/mixins/_link.scss
+++ b/apps/mina-sidor-fa/src/styles/mixins/_link.scss
@@ -2,6 +2,8 @@
   display: inline-flex;
   align-items: center;
   text-decoration: none;
+  color: var(--digi--typography--color--link);
+  font-size: var(--digi--typography--font-size);
   font-weight: var(--digi--typography--font-weight--semibold);
   gap: var(--digi--layout--gutter--xs);
 
@@ -19,3 +21,10 @@
     }
   }
 }
+
+@mixin msfa__button-as-link($ignore-visited: false) {
+  @include msfa__link($ignore-visited);
+  background-color: transparent;
+  border-width: 0;
+  padding: 0;
+}