diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html
index 92e4853..cc46089 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html
@@ -127,25 +127,18 @@
                           [afLabel]="activitiesFormArrayMetadata[i].name"
                         ></digi-ng-form-checkbox>
                         <div class="periodisk-redovisning-form__activity-details" *ngIf="isSelected.currentValue">
-                          <div class="periodisk-redovisning-form__activity-group">
-                            <digi-form-input
-                              class="periodisk-redovisning-form__activity-hours"
-                              af-label="Antal timmar under perioden"
-                              af-type="number"
-                              af-max="200"
-                              af-min="0"
-                              [afValidation]="activityHoursIsInvalid(activityFormGroup) ? 'error' : 'neutral'"
-                              formControlName="hours"
-                            ></digi-form-input>
-                            <div aria-atomic="true" role="alert">
-                              <digi-form-validation-message
-                                *ngIf="activityHoursIsInvalid(activityFormGroup)"
-                                af-variation="error"
-                              >
-                                {{activityFormGroup.errors.hours}}
-                              </digi-form-validation-message>
-                            </div>
-                          </div>
+                          <ui-input
+                            class="periodisk-redovisning-form__activity-hours"
+                            formControlName="hours"
+                            uiType="number"
+                            [uiMin]="0"
+                            [uiMax]="200"
+                            uiLabel="Antal timmar under perioden"
+                            [uiRequired]="true"
+                            [uiAnnounceIfOptional]="true"
+                            [uiInvalid]="activityHoursIsInvalid(activityFormGroup)"
+                            [uiValidationMessage]="activityFormGroup.errors?.hours"
+                          ></ui-input>
 
                           <div class="periodisk-redovisning-form__activity-group">
                             <digi-ng-form-checkbox
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.model.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.model.ts
index 61a24d2..29ee03d 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.model.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.model.ts
@@ -2,7 +2,7 @@ export interface PeriodiskRedovisningFormActivity {
   isSelected: boolean;
   performedRemotely: boolean;
   performedPhysically: boolean;
-  hours: string;
+  hours: number;
 }
 
 export interface PeriodiskRedovisningFormData {
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts
index 1f50f3a..5562564 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts
@@ -7,6 +7,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiInputModule } from '@ui/input/input.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
@@ -32,6 +33,7 @@ import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.se
     DigiNgFormSelectModule,
     DigiNgFormCheckboxModule,
     UiRadiobuttonGroupModule,
+    UiInputModule,
   ],
   providers: [PeriodiskRedovisningFormService],
   exports: [PeriodiskRedovisningFormComponent],
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning.validator.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning.validator.ts
index 92f26ae..6fe5992 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning.validator.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning.validator.ts
@@ -47,7 +47,7 @@ export class PeriodiskRedovisningValidator {
         };
       }
 
-      const isValidHours = hours?.length > 0 && Number.isInteger(+hours) && +hours >= 0 && +hours <= 200;
+      const isValidHours = Number.isInteger(hours) && hours >= 0 && hours <= 200;
 
       if (isSelected && !isValidHours) {
         errors = {
diff --git a/libs/ui/src/input/input.component.ts b/libs/ui/src/input/input.component.ts
index fa4f200..f423b59 100644
--- a/libs/ui/src/input/input.component.ts
+++ b/libs/ui/src/input/input.component.ts
@@ -75,7 +75,7 @@ export class InputComponent implements AfterViewInit, ControlValueAccessor, OnCh
   }
 
   checkForChange(rawValue: string): void {
-    const value = this.uiType === UiInputType.NUMBER ? +rawValue : rawValue;
+    const value = this.uiType === UiInputType.NUMBER ? (rawValue !== '' ? +rawValue : null) : rawValue;
     if (this._value !== value) {
       if (this.onChange) {
         this.onChange(value);