diff --git a/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.html b/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.html
index 3e4fc7b82712dd1bab41d0eb048d93d9d8bc7fb7..f4b6067471dd48155f9ebf8f5966e87b06768dee 100644
--- a/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.html
+++ b/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.html
@@ -80,18 +80,21 @@
         <ng-container *ngIf="variableCreditCourses$ | async as variableCreditCourses; else loading">
           <ng-container *ngIf="variableCreditCourses.length > 0; else noVariableCreditCourses">
             <div class="credit-selector" *ngFor="let course of variableCreditCourses; let i = index" [formGroupName]="i">
-              <label>
+              <label id="credits-range-{{ course.id }}">
                 {{ course.termCode | getTermDescription }}: {{ course | courseDescription }}
                 <br>
                 <small>{{ course.title }}</small>
               </label>
-              <mat-select formControlName="credits">
-                <mat-option
-                  *ngFor="let credit of course.range"
-                  [value]="credit">
-                  {{ credit }}
-                </mat-option>
-              </mat-select>
+              <mat-form-field>
+                <mat-label>{{ course.creditMin }}-{{ course.creditMax }} cr</mat-label>
+                <mat-select formControlName="credits" aria-labelledby="credits-range-{{ course.id }}">
+                  <mat-option
+                    *ngFor="let credit of course.range"
+                    [value]="credit">
+                    {{ credit }} cr
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
             </div>
           </ng-container>
 
diff --git a/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.scss b/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.scss
index b49b8645b141acbc102e34005c3eb036dc8c1ed3..056e9fc9eb52c5f5f0d4ad097488927a4524f085 100644
--- a/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.scss
+++ b/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.scss
@@ -34,9 +34,10 @@
     flex-grow: 1;
   }
 
-  mat-select {
-    width: 48px;
+  mat-form-field {
+    width: 72px;
     display: block;
     flex-grow: 0;
+    text-align: right;
   }
 }
diff --git a/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.html b/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.html
index daab7f8533f404293bacff3876577eb2aad0c994..c8fbe2238a308ff0e2539098bdb82a516c739caa 100644
--- a/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.html
+++ b/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.html
@@ -114,18 +114,21 @@
         <ng-container *ngIf="variableCreditCourses$ | async as variableCreditCourses; else loading">
           <ng-container *ngIf="variableCreditCourses.length > 0; else noVariableCreditCourses">
             <div class="credit-selector" *ngFor="let course of variableCreditCourses; let i = index" [formGroupName]="i">
-              <label>
+              <label id="credits-range-{{ course.id }}">
                 {{ course.termCode | getTermDescription }}: {{ course | courseDescription }}
                 <br>
                 <small>{{ course.title }}</small>
               </label>
-              <mat-select formControlName="credits">
-                <mat-option
-                  *ngFor="let credit of course.range"
-                  [value]="credit">
-                  {{ credit }}
-                </mat-option>
-              </mat-select>
+              <mat-form-field>
+                <mat-label>{{ course.creditMin }}-{{ course.creditMax }} cr</mat-label>
+                <mat-select formControlName="credits" aria-labelledby="credits-range-{{ course.id }}">
+                  <mat-option
+                    *ngFor="let credit of course.range"
+                    [value]="credit">
+                    {{ credit }} cr
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
             </div>
           </ng-container>
 
diff --git a/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.scss b/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.scss
index b49b8645b141acbc102e34005c3eb036dc8c1ed3..056e9fc9eb52c5f5f0d4ad097488927a4524f085 100644
--- a/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.scss
+++ b/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.scss
@@ -34,9 +34,10 @@
     flex-grow: 1;
   }
 
-  mat-select {
-    width: 48px;
+  mat-form-field {
+    width: 72px;
     display: block;
     flex-grow: 0;
+    text-align: right;
   }
 }