diff --git a/src/app/accounts/two-factor-options.component.html b/src/app/accounts/two-factor-options.component.html
index 4f76862f440..53805a20f50 100644
--- a/src/app/accounts/two-factor-options.component.html
+++ b/src/app/accounts/two-factor-options.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
-    <div class="modal-dialog modal-dialog-scrollable" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h2 class="modal-title" id="twoStepOptionsTitle">{{'twoStepOptions' | i18n}}</h2>
@@ -8,21 +8,46 @@
                 </button>
             </div>
             <div class="modal-body">
-                <div class="list-group list-group-flush">
-                    <a href="#" appStopClick *ngFor="let p of providers" (click)="choose(p)"
-                        class="list-group-item list-group-item-action">
-                        <img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="pull-right">
-                        <h3>{{p.name}}</h3>
-                        {{p.description}}
-                    </a>
-                    <a href="#" appStopClick class="list-group-item list-group-item-action" (click)="recover()">
-                        <h3>{{'recoveryCodeTitle' | i18n}}</h3>
-                        {{'recoveryCodeDesc' | i18n}}
-                    </a>
+                <div class="list-group list-group-flush-2fa">
+                    <div *ngFor="let p of providers" class="list-group-item list-group-item-action">
+                        <div class="two-factor-content">
+                            <div class="logo-col">
+                                <img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'">
+                            </div>
+                            <div class="text-col">
+                                <h3>{{p.name}}</h3>
+                                {{p.description}}
+                            </div>
+                            <div class="btn-col">
+                                <button [attr.aria-describedby]="p.name" type="button"
+                                    class="btn btn-outline-secondary btn-sm" (click)="choose(p)">
+                                    {{'select' | i18n}}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="list-group-item list-group-item-action" (click)="recover()">
+                        <div class="two-factor-content">
+                            <div class="logo-col">
+                                <img class="recovery-code-img" alt="rc logo">
+                            </div>
+                            <div class="text-col">
+                                <h3>{{'recoveryCodeTitle' | i18n}}</h3>
+                                {{'recoveryCodeDesc' | i18n}}
+                            </div>
+                            <div class="btn-col">
+                                <button [attr.aria-descibedby]="'recoveryCodeTitle' | i18n" type="button"
+                                    class="btn btn-outline-secondary btn-sm" (click)="recover()">
+                                    {{'select' | i18n}}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' |
+                    i18n}}</button>
             </div>
         </div>
     </div>
diff --git a/src/images/two-factor/1-w.png b/src/images/two-factor/1-w.png
new file mode 100644
index 00000000000..05392099cbd
Binary files /dev/null and b/src/images/two-factor/1-w.png differ
diff --git a/src/images/two-factor/1.png b/src/images/two-factor/1.png
index b47a12b1db8..85079dfed59 100644
Binary files a/src/images/two-factor/1.png and b/src/images/two-factor/1.png differ
diff --git a/src/images/two-factor/rc-w.png b/src/images/two-factor/rc-w.png
new file mode 100644
index 00000000000..8e213f669ea
Binary files /dev/null and b/src/images/two-factor/rc-w.png differ
diff --git a/src/images/two-factor/rc.png b/src/images/two-factor/rc.png
new file mode 100644
index 00000000000..5e5900e300a
Binary files /dev/null and b/src/images/two-factor/rc.png differ
diff --git a/src/scss/forms.scss b/src/scss/forms.scss
index 1be32529f48..a354dd77709 100644
--- a/src/scss/forms.scss
+++ b/src/scss/forms.scss
@@ -160,9 +160,33 @@ input[type="radio"], input[type="checkbox"] {
     @include themify($themes) {
         background-color: themed('foregroundColor');
         border-color: themed('listItemBorder');
-        color: themed('listItemColor');
-        font-weight: themed('linkWeight');
+        color: themed('textColor');
     }
+    >.two-factor-content {
+        justify-content: center;
+        flex-direction: row;
+        display: flex;
+        >.text-col {
+            flex-direction: column;
+            flex: 1;
+        }
+        >.logo-col {
+            min-width: 100px; 
+            margin-right: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+                height: fit-content;
+            }
+        }
+        >.btn-col {
+            width: 85px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }      
 }
 
 .list-group-item.active {
diff --git a/src/scss/modals.scss b/src/scss/modals.scss
index d39b1714bfd..de3ac21a658 100644
--- a/src/scss/modals.scss
+++ b/src/scss/modals.scss
@@ -52,6 +52,20 @@
     }
 }
 
+.modal .list-group-flush-2fa {
+    div {
+        border-left: none;
+        border-right: none;
+    }
+    div:first-child {
+        border-top: none;
+    }
+    
+    div:last-child {
+        border-bottom: none;
+    }
+}
+
 .modal-footer {
     border-radius: 0.3rem 0.3rem 0 0;
     justify-content: flex-start;
diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss
index 7c911499c1e..b9029873a55 100644
--- a/src/scss/plugins.scss
+++ b/src/scss/plugins.scss
@@ -43,6 +43,14 @@
     }
 }
 
+.mfaType1 {
+    @include themify($themes) {
+        content: url('../images/two-factor/1' + themed('mfaLogoSuffix'));
+        max-width: 100px;
+        max-height: 45px;
+    }
+}
+
 .mfaType7 {
     @include themify($themes) {
         content: url('../images/two-factor/7' + themed('mfaLogoSuffix'));
@@ -50,6 +58,14 @@
     }
 }
 
+.recovery-code-img {
+    @include themify($themes) {
+        content: url('../images/two-factor/rc' + themed('mfaLogoSuffix'));
+        max-width: 100px;
+        max-height: 45px; 
+    }
+}
+
 .progress {
     @include themify($themes) {
         background-color: themed('pwStrengthBackground');
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 6853cdbacfd..fcb232d078b 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -79,7 +79,7 @@ $fa-font-path: "~font-awesome/fonts";
 
 // MFA Types for logo styling with no dark theme alternative
 
-$mfaTypes: 0, 1, 2, 3, 4, 6;
+$mfaTypes: 0, 2, 3, 4, 6;
 
 // Theme Variables