diff --git a/apps/dafa-web/src/app/data/enums/icon-type.enum.ts b/apps/dafa-web/src/app/data/enums/icon-type.enum.ts
index 37167f2..6756f86 100644
--- a/apps/dafa-web/src/app/data/enums/icon-type.enum.ts
+++ b/apps/dafa-web/src/app/data/enums/icon-type.enum.ts
@@ -13,4 +13,6 @@ export enum IconType {
   WARNING = 'warning',
   APPROVED = 'approved',
   X = 'x',
+  EYE = 'eye',
+  EYESLASH = 'eyeslash',
 }
diff --git a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html
index 31e11dc..40a1033 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html
+++ b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html
@@ -1,107 +1,112 @@
 <dafa-logged-in-shell>
+  <section class="employee-card">
+    <digi-typography *ngIf="detailedEmployeeData$ | async as detailedEmployeeData; else loadingRef">
+      <h1>{{ detailedEmployeeData.fullName }}</h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus accusantium sit, reprehenderit, esse suscipit
+        quis similique harum est eum eveniet aspernatur delectus magni asperiores porro aliquam voluptate! Architecto,
+        perferendis commodi.
+      </p>
 
-<section class="employee-card">
-  <digi-typography *ngIf="detailedEmployeeData$ | async as detailedEmployeeData; else loadingRef">
-    <h1>{{ detailedEmployeeData.fullName }}</h1>
-    <p>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus accusantium sit, reprehenderit, esse suscipit
-      quis similique harum est eum eveniet aspernatur delectus magni asperiores porro aliquam voluptate! Architecto,
-      perferendis commodi.
-    </p>
+      <div class="employee-card__contents">
+        <div class="employee-card__column">
+          <h2>Kontaktuppgifter</h2>
 
-    <div class="employee-card__contents">
-      <div class="employee-card__column">
-        <h2>Kontaktuppgifter</h2>
+          <dl>
+            <dt>Namn</dt>
+            <dd *ngIf="detailedEmployeeData.fullName; else emptyDD">{{ detailedEmployeeData.fullName }}</dd>
+            <dt>Personnummer</dt>
+            <dd *ngIf="detailedEmployeeData.ssn; else emptyDD">
+              <dafa-hide-text
+                symbols="********-****"
+                [changingText]="detailedEmployeeData.ssn"
+                ariaLabelType="personnummer"
+              ></dafa-hide-text>
+            </dd>
+          </dl>
+        </div>
 
-        <dl>
-          <dt>Namn</dt>
-          <dd *ngIf="detailedEmployeeData.fullName; else emptyDD">{{ detailedEmployeeData.fullName }}</dd>
-          <dt>Personnummer</dt>
-          <dd *ngIf="detailedEmployeeData.ssn; else emptyDD">{{ detailedEmployeeData.ssn }}</dd>
-        </dl>
+        <div class="employee-card__column">
+          <h2>Uppgifter om arbete</h2>
+
+          <dl>
+            <dt>Behörigheter</dt>
+            <ng-container *ngIf="detailedEmployeeData.authorizations.length; else emptyDD">
+              <dd *ngFor="let authorization of detailedEmployeeData.authorizations">{{ authorization.name }}</dd>
+            </ng-container>
+            <dt>Tjänster</dt>
+            <ng-container *ngIf="detailedEmployeeData.services.length; else emptyDD">
+              <dd *ngFor="let service of detailedEmployeeData.services">{{ service.name }}</dd>
+            </ng-container>
+          </dl>
+        </div>
+
+        <div class="employee-card__column">
+          <h2>Utförande verksamheter</h2>
+
+          <ul *ngIf="detailedEmployeeData.organizations?.length" class="employee-card__organizations">
+            <li *ngFor="let organization of detailedEmployeeData.organizations" class="employee-card__organization">
+              <h3>{{ organization.name }}</h3>
+              <dl>
+                <dt>KA-nummer</dt>
+                <dd>{{ organization.kaNumber }}</dd>
+                <dt>Adress</dt>
+                <dd>{{ organization.address.street }} {{ organization.address.houseNumber }}</dd>
+                <dd>{{ organization.address.postalCode }} {{ organization.address.city }}</dd>
+              </dl>
+            </li>
+          </ul>
+        </div>
+
+        <div class="employee-card__column">
+          <digi-ng-layout-expansion-panel>
+            <h3 style="margin-bottom: 0" data-slot-trigger>
+              Tilldelade deltagare ({{ detailedEmployeeData.participants?.length || 0 }})
+            </h3>
+            <ng-container *ngIf="detailedEmployeeData.participants?.length; else noParticipantsInfo">
+              <ul class="employee-card__participants">
+                <li *ngIf="detailedEmployeeData.participants.length > 1" class="employee-card__participant">
+                  <digi-form-checkbox
+                    af-variation="primary"
+                    af-label="Välj alla"
+                    af-value="all"
+                    [afChecked]="pendingSelectedParticipants.length"
+                    [afIndeterminate]="pendingSelectedParticipants.length !== detailedEmployeeData.participants.length"
+                    (afOnChange)="
+                      handleChangeAllParticipants(detailedEmployeeData.participants, $event.detail.target.checked)
+                    "
+                  ></digi-form-checkbox>
+                </li>
+                <li *ngFor="let participant of detailedEmployeeData.participants" class="employee-card__participant">
+                  <digi-form-checkbox
+                    af-variation="primary"
+                    [afLabel]="participant.fullName"
+                    [afValue]="participant.id"
+                    [afChecked]="pendingSelectedParticipants.includes(participant.id)"
+                    (afOnChange)="handleChangeParticipant(participant.id, $event.detail.target.checked)"
+                  ></digi-form-checkbox>
+                </li>
+              </ul>
+
+              <digi-button af-size="s" (afOnClick)="handleChangeEmployee()">Byt handledare</digi-button>
+            </ng-container>
+            <ng-template #noParticipantsInfo>
+              <p>Inga deltagare har kopplats till {{ detailedEmployeeData.fullName }}.</p>
+            </ng-template>
+          </digi-ng-layout-expansion-panel>
+        </div>
       </div>
+    </digi-typography>
+  </section>
 
-      <div class="employee-card__column">
-        <h2>Uppgifter om arbete</h2>
+  <ng-template #loadingRef>
+    <digi-ng-skeleton-base [afCount]="3" afText="Laddar personalkortet"></digi-ng-skeleton-base>
+  </ng-template>
 
-        <dl>
-          <dt>Behörigheter</dt>
-          <ng-container *ngIf="detailedEmployeeData.authorizations.length; else emptyDD">
-            <dd *ngFor="let authorization of detailedEmployeeData.authorizations">{{ authorization.name }}</dd>
-          </ng-container>
-          <dt>Tjänster</dt>
-          <ng-container *ngIf="detailedEmployeeData.services.length; else emptyDD">
-            <dd *ngFor="let service of detailedEmployeeData.services">{{ service.name }}</dd>
-          </ng-container>
-        </dl>
-      </div>
-
-      <div class="employee-card__column">
-        <h2>Utförande verksamheter</h2>
-
-        <ul *ngIf="detailedEmployeeData.organizations?.length" class="employee-card__organizations">
-          <li *ngFor="let organization of detailedEmployeeData.organizations" class="employee-card__organization">
-            <h3>{{ organization.name }}</h3>
-            <dl>
-              <dt>KA-nummer</dt>
-              <dd>{{ organization.kaNumber }}</dd>
-              <dt>Adress</dt>
-              <dd>{{ organization.address.street }} {{ organization.address.houseNumber }}</dd>
-              <dd>{{ organization.address.postalCode }} {{ organization.address.city }}</dd>
-            </dl>
-          </li>
-        </ul>
-      </div>
-
-      <div class="employee-card__column">
-        <digi-ng-layout-expansion-panel>
-          <h3 style="margin-bottom: 0" data-slot-trigger>
-            Tilldelade deltagare ({{ detailedEmployeeData.participants?.length || 0 }})
-          </h3>
-          <ng-container *ngIf="detailedEmployeeData.participants?.length; else noParticipantsInfo">
-            <ul class="employee-card__participants">
-              <li *ngIf="detailedEmployeeData.participants.length > 1" class="employee-card__participant">
-                <digi-form-checkbox
-                  af-variation="primary"
-                  af-label="Välj alla"
-                  af-value="all"
-                  [afChecked]="pendingSelectedParticipants.length"
-                  [afIndeterminate]="pendingSelectedParticipants.length !== detailedEmployeeData.participants.length"
-                  (afOnChange)="
-                    handleChangeAllParticipants(detailedEmployeeData.participants, $event.detail.target.checked)
-                  "
-                ></digi-form-checkbox>
-              </li>
-              <li *ngFor="let participant of detailedEmployeeData.participants" class="employee-card__participant">
-                <digi-form-checkbox
-                  af-variation="primary"
-                  [afLabel]="participant.fullName"
-                  [afValue]="participant.id"
-                  [afChecked]="pendingSelectedParticipants.includes(participant.id)"
-                  (afOnChange)="handleChangeParticipant(participant.id, $event.detail.target.checked)"
-                ></digi-form-checkbox>
-              </li>
-            </ul>
-
-            <digi-button af-size="s" (afOnClick)="handleChangeEmployee()">Byt handledare</digi-button>
-          </ng-container>
-          <ng-template #noParticipantsInfo>
-            <p>Inga deltagare har kopplats till {{ detailedEmployeeData.fullName }}.</p>
-          </ng-template>
-        </digi-ng-layout-expansion-panel>
-      </div>
-    </div>
-  </digi-typography>
-</section>
-
-<ng-template #loadingRef>
-  <digi-ng-skeleton-base [afCount]="3" afText="Laddar personalkortet"></digi-ng-skeleton-base>
-</ng-template>
-
-<ng-template #emptyDD>
-  <dd>
-    <span aria-hidden="true">-</span>
-    <span class="dafa__a11y-sr-only">Info saknas</span>
-  </dd>
-</ng-template>
+  <ng-template #emptyDD>
+    <dd>
+      <span aria-hidden="true">-</span>
+      <span class="dafa__a11y-sr-only">Info saknas</span>
+    </dd>
+  </ng-template>
 </dafa-logged-in-shell>
diff --git a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.module.ts b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.module.ts
index ffbf5fd..48a0f03 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.module.ts
+++ b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.module.ts
@@ -6,6 +6,7 @@ import { RouterModule } from '@angular/router';
 import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
 import { EmployeeCardComponent } from './employee-card.component';
 import { LoggedInShellModule } from '../../../../components/logged-in-shell/logged-in-shell.module';
+import { HideTextModule } from '@dafa-shared/components/hide-text/hide-text.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -16,6 +17,7 @@ import { LoggedInShellModule } from '../../../../components/logged-in-shell/logg
     DigiNgSkeletonBaseModule,
     DigiNgLayoutExpansionPanelModule,
     LocalDatePipeModule,
+    HideTextModule,
     LoggedInShellModule
   ],
 })
diff --git a/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.html b/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.html
new file mode 100644
index 0000000..51adc9d
--- /dev/null
+++ b/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.html
@@ -0,0 +1,7 @@
+<span class="hide-text">
+  {{ transformedText }}
+  <button class="hide-text__button" type="button" [attr.aria-label]="ariaLabel" (click)="toggleText()">
+    <dafa-icon *ngIf="!hideText" [icon]="iconType.EYESLASH" size="l"></dafa-icon>
+    <dafa-icon *ngIf="hideText" [icon]="iconType.EYE" size="l"></dafa-icon>
+  </button>
+</span>
diff --git a/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.scss b/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.scss
new file mode 100644
index 0000000..5f3208f
--- /dev/null
+++ b/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.scss
@@ -0,0 +1,19 @@
+.hide-text {
+  display: flex;
+  align-items: center;
+  gap: var(--digi--layout--gutter);
+
+  &__button {
+    background-color: transparent;
+    color: var(--digi--typography--color--link);
+    font-size: var(--digi--typography--font-size--desktop--l);
+    border-width: 0;
+    width: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:hover {
+      color: var(--digi--typography--color--link--active);
+    }
+  }
+}
diff --git a/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.spec.ts b/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.spec.ts
new file mode 100644
index 0000000..2c39809
--- /dev/null
+++ b/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HideTextComponent } from './hide-text.component';
+
+describe('HideTextComponent', () => {
+  let component: HideTextComponent;
+  let fixture: ComponentFixture<HideTextComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [HideTextComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HideTextComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.ts b/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.ts
new file mode 100644
index 0000000..93e5c07
--- /dev/null
+++ b/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.ts
@@ -0,0 +1,30 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { IconType } from '@dafa-enums/icon-type.enum';
+
+@Component({
+  selector: 'dafa-hide-text',
+  templateUrl: './hide-text.component.html',
+  styleUrls: ['./hide-text.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HideTextComponent {
+  @Input() changingText: string;
+  @Input() symbols: string;
+  @Input() ariaLabelType = 'text';
+
+  hideText: boolean = true;
+  iconType = IconType;
+
+  get transformedText(): string {
+    return this.hideText ? this.symbols : this.changingText;
+  }
+
+  toggleText(): void {
+    this.hideText = !this.hideText;
+  }
+
+  get ariaLabel(): string {
+    const buttonText = this.hideText ? 'Visa' : 'Dölj';
+    return `${buttonText} ${this.ariaLabelType}`;
+  }
+}
diff --git a/apps/dafa-web/src/app/shared/components/hide-text/hide-text.module.ts b/apps/dafa-web/src/app/shared/components/hide-text/hide-text.module.ts
new file mode 100644
index 0000000..37d3370
--- /dev/null
+++ b/apps/dafa-web/src/app/shared/components/hide-text/hide-text.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { HideTextComponent } from './hide-text.component';
+import { IconModule } from '@dafa-shared/components/icon/icon.module';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [HideTextComponent],
+  imports: [CommonModule, IconModule],
+  exports: [HideTextComponent],
+})
+export class HideTextModule {}
diff --git a/apps/dafa-web/src/app/shared/components/icon/icon.component.html b/apps/dafa-web/src/app/shared/components/icon/icon.component.html
index 142b4fe..1497afa 100644
--- a/apps/dafa-web/src/app/shared/components/icon/icon.component.html
+++ b/apps/dafa-web/src/app/shared/components/icon/icon.component.html
@@ -42,5 +42,7 @@
     ></digi-icon-exclamation-triangle>
     <digi-icon-check-circle-reg *ngSwitchCase="iconType.APPROVED" [ngClass]="iconClass"></digi-icon-check-circle-reg>
     <digi-icon-x *ngSwitchCase="iconType.X" [ngClass]="iconClass"></digi-icon-x>
+    <digi-icon-eye *ngSwitchCase="iconType.EYE" [ngClass]="iconClass"></digi-icon-eye>
+    <digi-icon-eye-slash *ngSwitchCase="iconType.EYESLASH" [ngClass]="iconClass"></digi-icon-eye-slash> 
   </ng-container>
 </ng-template>