diff --git a/src/app/dialogs/dialog-loan-lend/dialog-loan-lend.component.html b/src/app/dialogs/dialog-loan-lend/dialog-loan-lend.component.html
index 42f4ad262..625546742 100644
--- a/src/app/dialogs/dialog-loan-lend/dialog-loan-lend.component.html
+++ b/src/app/dialogs/dialog-loan-lend/dialog-loan-lend.component.html
@@ -1,25 +1,29 @@
-<app-dialog-header title="Lending Checkout">
-</app-dialog-header>
+<app-dialog-header title="Lending Checkout"> </app-dialog-header>
 
 <mat-dialog-content class="dialog">
   <div class="container">
     <div class="dialog-content">
       <div class="row">
-        <div class="item col-sm-12 col-md-3 title main-h6">
-          <div class="item__subtitle">
-            Lending currency
-          </div>
+        <div class="col-sm-12 col-md-3 mt-2">
+          <div class="item__subtitle">Lending currency</div>
           <mat-form-field>
-            <mat-label class="item__select-label" *ngIf="!lendCurrency" id="label">
+            <mat-label class="item__select-label" *ngIf="!lendCurrency">
               Select Currency
             </mat-label>
-            <mat-select class="item__select-value" [(value)]="lendCurrency" (selectionChange)="onChangeCurrency()">
-              <mat-option *ngFor="let item of availableCurrencies" [value]="item.symbol">
-                <div class="row align-items-center">
-                  <div class="icon-box item">
-                    <img matPrefix class="input-icon" [src]="item.img">
+            <mat-select
+              class="item__select-value"
+              [(value)]="lendCurrency"
+              (selectionChange)="onChangeCurrency()"
+            >
+              <mat-option
+                *ngFor="let item of availableCurrencies"
+                [value]="item.symbol"
+              >
+                <div class="row">
+                  <div class="wrapper-icons">
+                    <img matPrefix [src]="item.img" />
                   </div>
-                  <div class="currency">
+                  <div class="item__text-currency">
                     {{ item.symbol }}
                   </div>
                 </div>
@@ -28,72 +32,74 @@
           </mat-form-field>
         </div>
         <div class="col-sm-1"></div>
-        <div class="col-sm-8 item">
-          <div class="small-table-row d-flex">
-            <div class="item__subtitle col --auto pl-0">
-              Lend
-            </div>
-            <div class="col-sm-1 no-gutters --auto"></div>
-            <div class="item__subtitle col --auto">
-              Receive
-            </div>
+        <div class="col-sm-8 mt-2">
+          <div class="row">
+            <div class="col-6 col-sm-5 pl-3 item__subtitle">Lend</div>
+            <div class="col-2 d-none d-sm-block"></div>
+            <div class="col-6 col-sm-5 item__subtitle pl-4 pl-sm-0">Receive</div>
           </div>
-          <div class="mt-3"></div>
-          <div class="small-table-row --highlight">
-            <div class="col --auto no-pad-left --data-margin data-style">
+          <div class="item__background mt-3">
+            <div class="item__table-content col-6 col-sm-5">
               <span>
                 {{ lendAmount }}
               </span>
-              <span class="data--currency-style">
-                {{ lendCurrency || '-' }}
+              <span class="item__currency-style">
+                {{ lendCurrency || "-" }}
               </span>
             </div>
-            <div class="col-sm-1 no-gutters --auto"></div>
-            <div class="col --auto --data-margin data-style">
+            <div class="col-2 d-none d-sm-block"></div>
+            <div class="item__table-content col-6 col-sm-5 pl-4 pl-sm-1">
               <span>
                 {{ lendExpectedReturn }}
               </span>
-              <span class="data--currency-style">
-                {{ lendCurrency ? engineCurrency?.toString() : '-' }}
+              <span class="item__currency-style">
+                {{ lendCurrency ? engineCurrency?.toString() : "-" }}
               </span>
               <div
                 class="d-inline"
                 matTooltip="This return is calculated using current exchange rates and may vary as a result of their fluctuations."
                 *ngIf="lendCurrency"
               >
-                <i class="fas fa-exclamation-triangle margin-left triangle"></i>
+                <i
+                  class="fas fa-exclamation-triangle ml-1 item__icon-warning"
+                ></i>
               </div>
             </div>
           </div>
-          <div class="mt-2"></div>
-          <div class="small-table-row d-flex">
-            <div class="col title-2 --auto no-pad-left --data-margin baseline">
-              <div class="--auto">
-                <span class="--lend-amount mr-2" [innerHTML]="loanAmount">
-                </span>
-                <span class="--lend-currency" [innerHTML]="loan.currency">
-                </span>
-              </div>
+          <div class="row mt-2">
+            <div class="col-5 pl-4 item__table-footer">
+              <span
+                class="item__text-currency--title mr-2"
+                [innerHTML]="loanAmount"
+              >
+              </span>
+              <span
+                class="item__text-currency--subtitle"
+                [innerHTML]="loan.currency"
+              >
+              </span>
             </div>
-            <div class="col-sm-1 no-gutters --auto vertical-center">
-              <i class="fas fa-arrow-right"></i>
+            <div class="col-2">
+              <div class="item__icon-arrow pl-sm-3">
+                <i class="fas fa-arrow-right"></i>
+              </div>
             </div>
-            <div class="col title-2 --auto --data-margin wrap baseline">
-              <div class="--auto wrap end">
-                <span
-                  id="label"
-                  class="--return-amount mr-2"
-                  [innerHTML]="loanExpectedReturn"
-                >
-                </span>
-                <span class="--return-currency" [innerHTML]="loan.currency">
-                </span>
-                <div
-                  class="d-inline"
-                  matTooltip="This return is not affected by exchange rate fluctuations."
-                >
-                  <i class="fas fa-check-circle check margin-left"></i>
-                </div>
+            <div class="col-5 pl-0 item__table-footer">
+              <span
+                class="item__text-currency--title mr-2"
+                [innerHTML]="loanExpectedReturn"
+              >
+              </span>
+              <span
+                class="item__text-currency--subtitle"
+                [innerHTML]="loan.currency"
+              >
+              </span>
+              <div
+                class="d-inline"
+                matTooltip="This return is not affected by exchange rate fluctuations."
+              >
+                <i class="fas fa-check-circle check ml-1"></i>
               </div>
             </div>
           </div>
@@ -102,27 +108,26 @@
       <mat-accordion class="accordion-details">
         <mat-expansion-panel class="mat-elevation-z">
           <mat-expansion-panel-header>
-            <mat-panel-title>
-              More details
-            </mat-panel-title>
+            <mat-panel-title> More details </mat-panel-title>
           </mat-expansion-panel-header>
           <div class="accordion-details__item" *ngIf="exchangeTooltips?.length">
             <i class="fas fa-exchange-alt"></i>
-            <span class="mr-1">
-              Exchange Rate 1 {{ loan.currency }}
-            </span>
-            <span class="mr-1" *ngIf="loan.currency.toString() !== engineCurrency?.toString()">
-              = {{ exchangeEngineToken }} {{ engineCurrency?.toString() }}
+            <span class="mr-1"> Exchange Rate 1 {{ loan.currency }} </span>
+            <span
+              class="mr-1"
+              *ngIf="loan.currency.toString() !== engineCurrency?.toString()"
+            >
+              = {{ exchangeEngineToken }} {{ engineCurrency?.toString() }}
             </span>
-            <span *ngIf="exchangeToken && loan.currency.toString() !== lendCurrency">
+            <span
+              *ngIf="exchangeToken && loan.currency.toString() !== lendCurrency"
+            >
               = {{ exchangeToken }} {{ lendCurrency }}
             </span>
           </div>
           <div class="accordion-details__item">
             <i class="fas fa-arrows-alt-h"></i>
-            <span>
-              Tx Cost: {{ txCost || '-' }}
-            </span>
+            <span> Tx Cost: {{ txCost || "-" }} </span>
           </div>
           <div
             class="accordion-details__item"
diff --git a/src/app/dialogs/dialog-loan-lend/dialog-loan-lend.component.scss b/src/app/dialogs/dialog-loan-lend/dialog-loan-lend.component.scss
index 327973a10..f93c0d826 100644
--- a/src/app/dialogs/dialog-loan-lend/dialog-loan-lend.component.scss
+++ b/src/app/dialogs/dialog-loan-lend/dialog-loan-lend.component.scss
@@ -1,397 +1,124 @@
-@import './../../../scss/mixins';
-@import './../../../scss/fonts';
-@import './../dialog-generic';
+@import "./../../../scss/mixins";
+@import "./../../../scss/fonts";
+@import "./../dialog-generic";
 
-.dialog-content {
-  .item {
-    &__select-label {
-      @include styled-font('Roboto', 400, 12px);
-      color: #989898;
-    }
-    &__select-value {
-      @include typography-headline(6);
-    }
-  }
-  .accordion-details {
-    mat-expansion-panel {
-      margin-top: 35px;
-    }
-  }
-}
-
-//Dialog Client
 .dialog {
-    max-width: 100vw;
-    min-height: fit-content;
-    overflow-x: hidden;
-}
-
-.mat-option {
-  height: auto;
-}
-.dialog-padding{
-  padding: 25px 15px;
-  text-align: left;
-}
+  max-width: 100vw;
+  min-height: fit-content;
+  overflow-x: hidden;
 
-.no-pad-left {
-  padding-left: 0;
-}
-
-.padding {
-    padding: 0px 20px;
-}
-
-.padding-2 {
-  padding: 0px 30px;
-}
-
-// ---------------
-
-.i {
-    display: inline-block;
-    cursor: pointer;
-    .fa-question-circle {
-        color: #6D6E6F !important;
-        margin: 0 8px;
+  .dialog-content {
+    .item {
+      &__select-label {
+        @include typography-body(3);
+        color: #989898;
+      }
+      &__select-value,
+      &__text-currency {
+        @include typography-headline(6);
+      }
+      &__currency-style {
+        @include typography-subtitle(2);
+        color: #989898;
+      }
+      &__background {
+        background-color: var(--app-color-gray-600);
+        height: 35px;
+        display: flex;
+        align-items: center;
+      }
+      &__table-content:first-child {
+        padding-left: 8px;
+      }
+      &__table-content {
+        @include typography-subtitle(2);
+        color: #989898;
+        padding-left: 17px;
+      }
+      &__table-footer {
+        display: flex;
+        align-items: center;
+        width: auto;
+        svg {
+          color: #6eb548;
+          margin-top: 3px;
+        }
+      }
+      &__icon-warning {
         font-size: 16px;
-    }
-}
-
-.data-style,
-.data--currency-style {
-  @include typography-subtitle(2);
-  color: #989898;
-}
-
-.lending {
-    font-size: 16px;
-    font-family: 'Roboto', sans-serif;
-    font-weight: 800;
-    color: #2C2C2C;
-    display: flex;
-    align-items: center;
-}
-
-.ars {
-    font-weight: 400;
-    display: inline-block;
-    margin-left: 5px;
-}
-
-.icon-box {
-    width: 35px;
-    height: 35px;
-    display: flex;
-    align-items: center;
-    margin: 30px 20px;
-    border-radius: 50px;
-    background-color: white;
-    padding: 3px;
-    .imgs {
-        width: 20px;
-        height: 20px;
-        .input-icon {
-            display: inline-block;
-            max-height: 100%;
+        color: #eaa219;
+        cursor: pointer;
+      }
+      &__icon-arrow {
+        padding: 0;
+        display: flex;
+        align-items: center;
+        width: auto;
+      }
+      &__icon-arrow {
+        margin-top: 4px;
+      }
+      &__text-currency {
+        &--title,
+        &--subtitle {
+          @include typography-body(1);
+          font-weight: 700;
         }
+      }
     }
-
+  }
 }
 
-.--highlight {
-  background-color: var(--app-color-gray-600);
+.wrapper-icons {
+  width: 35px;
   height: 35px;
   display: flex;
   align-items: center;
-}
-
-.--data-margin {
-  margin-left: 10px;
-}
-
-.item {
-    margin-top: 8px;
-    margin-bottom: 8px;
-}
-
-.currency {
-    font-size: 18px;
-    font-family: 'proxima-nova', sans-serif;
-    font-weight: 500;
-}
-
-.exchange {
-  background-color: none;
-  height: auto;
-  display: flex;
-  align-items: center;
-  .rate {
-    font-size: 12px;
-    color: #6D6E6F;
-  }
-  i {
-    cursor: pointer;
-    font-size: 1.5em;
-  }
-}
-
-img {
+  margin: 8px 20px;
+  border-radius: 50px;
+  background-color: white;
+  padding: 3px;
+  img {
+    display: inline-block;
     max-height: 100%;
     margin: auto;
-}
-
-.data {
-    font-size: 14px;
-    font-family: 'Roboto', sans-serif;
-    font-weight: 800;
-    color: #ADADAD;
-    display: flex;
-    flex-wrap: nowrap;
-}
-
-.inline {
-    display: inline-block;
-}
-
-.--auto {
-  width: auto !important;
-}
-
-.in {
-    display: inline;
-}
-
-.img-container{
-  text-align: center;
-  margin-top: 20px;
-  img{
-    height: 150px;
-    margin: 0 auto;
   }
 }
 
-.wrap {
-  display: flex;
-  flex-wrap: nowrap;
-}
-
-.title {
-  font-size: 14px;
-}
-.account {
-  display: none;
-  font-family: 'Roboto', sans-serif;
-  color: #ADADAD;
-}
-
-.mobile {
-  display: block;
-}
-
-.desktop {
-  display: none;
-}
-
-.cancel {
-  display: none;
-}
-
-.title-2 {
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.no-gutters {
-  margin-right: 0;
-  margin-left: 0;
-  padding: 0;
-
-  > .col,
-  > [class*="col-"] {
-    padding-right: 0;
-    padding-left: 0;
+.accordion-details {
+  mat-expansion-panel {
+    margin-top: 35px;
   }
 }
 
-.wrap {
-  display: flex;
-  flex-wrap: nowrap;
-}
-
-.no-margin {
-  margin: 0;
-}
-
-.vertical-center {
-  display: flex;
-  align-items: center;
-}
-
-.baseline {
-  display: flex;
-  align-items: center;
-}
-
-.fa-arrow-right {
-  margin-left: 10px;
-}
-
-.margin-left {
-  margin-left: 5px;
-}
-
-.cero-box {
-  height: 40px;
-  display: flex;
-  align-content: flex-end;
-}
-
-.mat-raised-button {
-  width: 100%;
-}
-.pad-left {
-  padding-left: 0;
-}
-
-.fa-arrow-left {
-  color: white;
-}
-
-.arrow-space {
-  display: none;
-}
-
-.cur {
-  font-size: 14px;
-  color: white;
-}
-
-.center-data {
-  display: flex;
-  align-items: center;
-}
-
-.check {
-  font-size: 16px;
-  color: #6EB548;
-}
-
-.triangle {
-  font-size: 16px;
-  color: #EAA219;
-  cursor: pointer;
-}
-
-.end {
-  display: flex;
-  align-items: baseline;
-}
-
-.--lend-amount,
-.--lend-currency,
-.--return-amount,
-.--return-currency {
-  @include styled-font('Roboto', 700, 16px);
-}
-
-@media (min-width: 768px){
-  .dialog-content {
-    .accordion-details {
-      mat-expansion-panel {
-        margin-top: 60px;
+@media (min-width: 768px) {
+  .dialog {
+    max-width: 800px;
+    .dialog-content {
+      .item {
+        &__text-currency {
+          &--title {
+            @include typography-headline(4);
+          }
+          &--subtitle {
+            @include typography-subtitle(2);
+          }
+        }
+        &__icon-arrow {
+          margin-top: 12px;
+        }
+      }
+      .accordion-details {
+        mat-expansion-panel {
+          margin-top: 60px;
+        }
       }
     }
   }
-  .arrow-space {
-    display: block;
-  }
-  .arrow {
-    display: none;
-  }
-
-  .exchange {
-    background-color: var(--app-color-gray-600);
-    border-bottom: 1px solid var(--app-color-gray-100);
-    height: 40px;
-    display: flex;
-    align-items: center;
-    .rate {
-      font-size: 14px;
-      color: #ADADAD;
-      margin-left: 10px;
-      font-family: 'Roboto', sans-serif;
-    }
-  }
-
-  .--lend-amount,
-  .--return-amount {
-    @include typography-headline(4);
-  }
-
-  .--lend-currency,
-  .--return-currency {
-    @include typography-subtitle(2);
-  }
-
-  .fa-arrow-left {
-    display: none;
-  }
-
-  .mat-raised-button {
-    width: 88px;
-  }
-
-  .dialog {
-      max-width: 800px;
-  }
-  .dialog-padding{
-    padding: 30px 53px;
-  }
-
-  .account {
-    display: block;
-  }
-
-  .title {
-    font-size: 18px;
-  }
-
-  .padding {
-    padding: 0px 42px;
-  }
-
-  .padding-2 {
-    padding: 0px 40px;
-  }
-
-  .data {
-    font-size: 16px;
-    // .ars {
-    //   font-size: 12px !important;
-    // }
-  }
-
-  .cancel {
-    display: block;
-  }
-
-  .wrap {
-    width: 60%;
-  }
-
-  .mobile {
-    display: none;
-  }
-
-  .desktop {
-    display: block;
-  }
+}
 
-  .cero-box {
-    height: 56px;
-    display: flex;
-    align-content: flex-end;
+::ng-deep {
+  mat-label.item__select-label {
+    font-size: 12px !important;
   }
-
 }