diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.html b/ui-ngx/src/app/shared/components/country-autocomplete.component.html
index eadf630dcd..c99ac037b2 100644
--- a/ui-ngx/src/app/shared/components/country-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/country-autocomplete.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="countryFormGroup" class="mat-block" subscriptSizing="{{subscriptSizing}}">
+<mat-form-field [formGroup]="countryFormGroup" class="mat-block" subscriptSizing="{{subscriptSizing}}" [appearance]="appearance">
   <mat-label>{{ labelText }}</mat-label>
   <input matInput type="text"
          #countryInput
diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.ts b/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
index 95629496eb..3bd7184bb4 100644
--- a/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
@@ -28,7 +28,7 @@ import {
 import { isNotEmptyStr } from '@core/utils';
 import { Observable, of } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';
-import { SubscriptSizing } from '@angular/material/form-field';
+import { SubscriptSizing, MatFormFieldAppearance } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { TranslateService } from '@ngx-translate/core';
 
@@ -71,6 +71,9 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
   @coerceBoolean()
   required = false;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   @Input()
   subscriptSizing: SubscriptSizing = 'fixed';