diff --git a/lib/core/form/components/widgets/people/people.widget.html b/lib/core/form/components/widgets/people/people.widget.html
index 00791451cb..54a0e7fbfa 100644
--- a/lib/core/form/components/widgets/people/people.widget.html
+++ b/lib/core/form/components/widgets/people/people.widget.html
@@ -11,10 +11,10 @@
                [id]="field.id"
                [formControl] ="searchTerm"
                [value]="getDisplayName(field.value)"
-               [disabled]="field.readOnly"
+               [attr.disabled]="field.readOnly"
                placeholder="{{field.placeholder}}"
                [matAutocomplete]="auto">
-        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onItemSelect($event.option.value)" [displayWith]="getDisplayName">
+        <mat-autocomplete class="adf-people-widget-list" #auto="matAutocomplete" (optionSelected)="onItemSelect($event.option.value)" [displayWith]="getDisplayName">
             <mat-option *ngFor="let user of users$ | async; let i = index" [value]="user">
                 <div class="adf-people-widget-row" id="adf-people-widget-user-{{i}}">
                     <div [outerHTML]="user | usernameInitials:'adf-people-widget-pic'"></div>
diff --git a/lib/core/form/components/widgets/people/people.widget.scss b/lib/core/form/components/widgets/people/people.widget.scss
index 445645d810..3d8946e6a3 100644
--- a/lib/core/form/components/widgets/people/people.widget.scss
+++ b/lib/core/form/components/widgets/people/people.widget.scss
@@ -9,6 +9,11 @@
             width: 100%;
         }
 
+        &-people-widget-list {
+            margin: 5px 0;
+            padding: 10px 0;
+        }
+
         &-people-widget-row {
             display: flex;
             align-items: center;