diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
index e9d3030019..addbeb169d 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
@@ -61,8 +61,8 @@
                             <div [formGroupName]="n" fxLayout="row" fxLayoutGap="8px">
                               <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
                                 <div fxLayout="column" fxFlex.sm="60" fxFlex.gt-sm="50">
-                                  <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
-                                    <mat-form-field fxFlex="30" fxFlex.xs class="mat-block">
+                                  <div fxLayout="row" fxLayout.xs="column" fxLayout.md="column" fxLayoutGap="8px" fxLayoutGap.md="0px">
+                                    <mat-form-field fxFlex="30" fxFlex.md fxFlex.xs class="mat-block">
                                       <mat-label translate>admin.oauth2.protocol</mat-label>
                                       <mat-select formControlName="scheme">
                                         <mat-option *ngFor="let protocol of protocols" [value]="protocol">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/settings-card.scss b/ui-ngx/src/app/modules/home/pages/admin/settings-card.scss
index 6e7c08532d..b22c91d5cf 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/settings-card.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/settings-card.scss
@@ -18,7 +18,12 @@
 :host {
  mat-card.settings-card {
    margin: 8px;
-   @media #{$mat-gt-sm} {
+
+   @media #{$mat-md} {
+     width: 80%;
+   }
+
+   @media #{$mat-gt-md} {
      width: 60%;
    }
   }