diff --git a/frontend/src/app/components/sponsor/sponsor.component.html b/frontend/src/app/components/sponsor/sponsor.component.html
index 72d05bd3d..e5ec2310a 100644
--- a/frontend/src/app/components/sponsor/sponsor.component.html
+++ b/frontend/src/app/components/sponsor/sponsor.component.html
@@ -1,151 +1,153 @@
-<div class="container-xl">
-   <div class="text-center">
+<div class="container-xl sponsor-page">
+   
+   <h1 i18n="sponsor.title">Sponsor</h1>
 
-      <h1 i18n="sponsor.title">Sponsor</h1>
+   <p *ngIf="!sponsorsEnabled; else sponsorForm">
+      <ng-container i18n="about.navigate-to-sponsor">Navigate to <a href="https://mempool.space/sponsor" target="_blank">https://mempool.space/sponsor</a> to sponsor</ng-container>
+   </p>
 
-      <br>
+   <ng-template #sponsorForm>
+      <div [hidden]="donationStatus !== 1">
 
-      <p *ngIf="!sponsorsEnabled; else sponsorForm">
-         <ng-container i18n="about.navigate-to-sponsor">Navigate to <a href="https://mempool.space/sponsor" target="_blank">https://mempool.space/sponsor</a> to sponsor</ng-container>
-      </p>
-
-      <ng-template #sponsorForm>
-
-        <div [hidden]="donationStatus !== 1">
-
-          <form [formGroup]="donationForm" (submit)="submitDonation()" class="form">
+         <form [formGroup]="donationForm" (submit)="submitDonation()" class="form">
 
             <div class="flex-container">
-              <div class="card" (click)="setSelection(0.001)" [class.shiny-border]="donationForm.get('selection').value === 0.001">
-                <div class="card-header">Support the Project</div>
-                <div class="card-body">
-                  <h5 class="card-title">100K sats</h5>
-                    <p class="card-text">Make a donation and support the project</p>
-                </div>
-              </div>
 
-              <div class="card bigger" (click)="setSelection(0.01)" [class.shiny-border]="donationForm.get('selection').value === 0.01">
-                <div class="card-header">Community Sponsor</div>
-                <div class="card-body">
-                  <h5 class="card-title">1M sats</h5>
-                    <p class="card-text">Display your Twitter profile photo on our About page</p>
-                </div>
-              </div>
+               <div class="card" (click)="setSelection(0.001)" [class.shiny-border]="donationForm.get('selection').value === 0.001">
+                  <div class="card-header">Support the Project</div>
+                  <div class="card-body">
+                  <h5 class="card-title">100K <span class="symbol">sats</span></h5>
+                     <p class="card-text">Make a donation and support the project</p>
+                  </div>
+               </div>
 
-              <div class="card" (click)="setSelection(1)" [class.shiny-border]="donationForm.get('selection').value === 1">
-                <div class="card-header">Enterprise Sponsor</div>
-                <div class="card-body">
-                  <h5 class="card-title">1 BTC</h5>
+               <div class="card" (click)="setSelection(0.01)" [class.shiny-border]="donationForm.get('selection').value === 0.01">
+                  <div class="card-header">Community Sponsor</div>
+                  <div class="card-body">
+                  <h5 class="card-title">1M <span class="symbol">sats</span></h5>
+                     <p class="card-text">Display your Twitter profile photo on our About page</p>
+                  </div>
+               </div>
+
+               <div class="card" (click)="setSelection(1)" [class.shiny-border]="donationForm.get('selection').value === 1">
+                  <div class="card-header">Enterprise Sponsor</div>
+                  <div class="card-body">
+                  <h5 class="card-title">1 <span class="symbol">BTC</span></h5>
                   <p class="card-text">Backlink to your organization's website</p>
-                </div>
-              </div>
+                  </div>
+               </div>
             </div>
-            
-            <br>
 
-            <div style="max-width: 300px;" class="mx-auto">
-              <div class="input-group">
-                <div class="input-group-prepend" style="width: 42px;">
-                    <span class="input-group-text">@</span>
-                </div>
-                <input formControlName="handle" class="form-control" type="text" placeholder="Twitter handle (Optional)">
-              </div>
-              <div class="input-group mt-4">
-                <button class="btn btn-primary mx-auto" type="submit" [disabled]="donationForm.invalid" i18n="about.sponsor.request-invoice">Request invoice</button>
-              </div>
+            <div class="donation-form">
+               <div class="input-group">
+                  <div class="input-group-prepend">
+                     <span class="input-group-text">@</span>
+                  </div>
+                  <input formControlName="handle" class="form-control" type="text" placeholder="Twitter handle (Optional)">
+               </div>
+               <div class="input-group">
+                  <button class="btn btn-primary" type="submit" [disabled]="donationForm.invalid" i18n="about.sponsor.request-invoice">Request invoice</button>
+               </div>
             </div>
-          </form>
-        </div>
 
-        <br><br>
-      </ng-template>
+         </form>
+      </div>
+   </ng-template>
 
-      <div *ngIf="donationStatus === 2" class="text-center">
+   <div *ngIf="donationStatus === 2">
+      
+      <form [formGroup]="paymentForm">
+         <div class="btn-group btn-group-toggle" ngbRadioGroup formControlName="method">
 
-         <form [formGroup]="paymentForm">
-            <div class="btn-group btn-group-toggle mb-2" ngbRadioGroup formControlName="method">
             <label ngbButtonLabel class="btn-primary">
                <input ngbButton type="radio" value="chain"> <fa-icon [icon]="['fas', 'link']" [fixedWidth]="true" title="Onchain"></fa-icon>
             </label>
+
             <label ngbButtonLabel class="btn-primary" *ngIf="donationObj.addresses.BTC_LightningLike">
                <input ngbButton type="radio" value="lightning"> <fa-icon [icon]="['fas', 'bolt']" [fixedWidth]="true" title="Lightning"></fa-icon>
             </label>
+
             <label ngbButtonLabel class="btn-primary" *ngIf="donationObj.addresses.LBTC">
                <input ngbButton type="radio" value="lbtc"> <fa-icon [icon]="['fas', 'tint']" [fixedWidth]="true" title="Liquid Bitcoin"></fa-icon>
             </label>
-            </div>
-         </form>
 
-         <ng-template [ngIf]="paymentForm.get('method').value === 'chain'">
-            <div class="qr-wrapper mt-2 mb-2">
+         </div>
+      </form>
+
+      <ng-template [ngIf]="paymentForm.get('method').value === 'chain'">
+
+         <div class="qr-wrapper">
             <a [href]="bypassSecurityTrustUrl('bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount)" target="_blank">
                <app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="'bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount"></app-qrcode>
             </a>
-            </div>
-            <br>
-            <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
+         </div>
+         
+         <div class="input-group input-group-sm info-group">
             <input type="text" class="form-control" readonly [value]="donationObj.addresses.BTC">
             <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="donationObj.addresses.BTC"></app-clipboard></button>
             </div>
-            </div>
-            <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
-         </ng-template>
+         </div>
+         <p>{{ donationObj.amount }} <span class="symbol">BTC</span></p>
 
-         <ng-template [ngIf]="paymentForm.get('method').value === 'lightning'">
-            <div class="qr-wrapper mt-2 mb-2">
+      </ng-template>
+
+      <ng-template [ngIf]="paymentForm.get('method').value === 'lightning'">
+
+         <div class="qr-wrapper">
             <a [href]="bypassSecurityTrustUrl('lightning:' + donationObj.addresses.BTC_LightningLike)" target="_blank">
                <app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="donationObj.addresses.BTC_LightningLike.toUpperCase()"></app-qrcode>
             </a>
-            </div>
-            <br>
+         </div>
 
-            <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
+         <div class="input-group input-group-sm info-group">
             <input type="text" class="form-control" readonly [value]="donationObj.addresses.BTC_LightningLike">
             <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button"><app-clipboard [text]="donationObj.addresses.BTC_LightningLike"></app-clipboard></button>
             </div>
-            </div>
+         </div>
 
-            <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
+         <div class="input-group input-group-sm info-group">
             <input type="text" class="form-control" readonly value="036f7fad4938521ddc6fc87ab7d6c6a091cef23cad87564a1f55adb806c017575e@103.99.170.198:9735">
             <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button"><app-clipboard [text]="'036f7fad4938521ddc6fc87ab7d6c6a091cef23cad87564a1f55adb806c017575e@103.99.170.198:9735'"></app-clipboard></button>
             </div>
-            </div>
+         </div>
+         <p>{{ donationObj.amount }} <span class="symbol">BTC</span></p>
 
-            <p style="font-size: 10px;"></p>
-            <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
-         </ng-template>
+      </ng-template>
 
-         <ng-template [ngIf]="paymentForm.get('method').value === 'lbtc'">
-            <div class="qr-wrapper mt-2 mb-2">
+      <ng-template [ngIf]="paymentForm.get('method').value === 'lbtc'">
+
+         <div class="qr-wrapper">
             <a [href]="bypassSecurityTrustUrl('liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d')" target="_blank">
                <app-qrcode imageUrl="./resources/liquid-bitcoin.png" [size]="200" [data]="'liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d'"></app-qrcode>
             </a>
-            </div>
-            <br>
-            <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
-            <input type="text" class="form-control" readonly [value]="donationObj.addresses.LBTC">
+         </div>
+         <br>
+         <div class="input-group input-group-sm info-group">
+            <input type="text" class="form-control" readonly [value]="donationObj.addresses.LBTC" />
             <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="donationObj.addresses.LBTC"></app-clipboard></button>
             </div>
-            </div>
-            <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
-         </ng-template>
+         </div>
+         <p>{{ donationObj.amount }} <span class="symbol">BTC</span></p>
 
-         <p i18n="about.sponsor.waiting-for-transaction">Waiting for transaction... </p>
-         <div class="spinner-border text-light"></div>
-      </div>
-
-      <div *ngIf="donationStatus === 3" class="text-center">
-         <h2><span i18n="about.sponsor.donation-confirmed">Donation confirmed!</span><br><span i18n="about.sponsor.thank-you">Thank you!</span></h2>
-         <br>
-
-         Order ID:
-         <br>
-         {{ donationObj.id }}
-      </div>
+      </ng-template>
 
+      <p i18n="about.sponsor.waiting-for-transaction">Waiting for transaction... </p>
+      <div class="spinner-border text-light"></div>
    </div>
+
+   <div *ngIf="donationStatus === 3" class="donation-confirmed">
+      <h2>
+         <span i18n="about.sponsor.donation-confirmed">Donation confirmed!</span>
+         <span i18n="about.sponsor.thank-you">Thank you!</span>
+      </h2>
+      
+      <div class="order-details">
+         Order ID <span>{{ donationObj.id }}</span>
+      </div>
+   </div>
+
 </div>
diff --git a/frontend/src/app/components/sponsor/sponsor.component.scss b/frontend/src/app/components/sponsor/sponsor.component.scss
index 5f29e003e..d8cf49460 100644
--- a/frontend/src/app/components/sponsor/sponsor.component.scss
+++ b/frontend/src/app/components/sponsor/sponsor.component.scss
@@ -1,8 +1,13 @@
+.sponsor-page {
+  text-align: center;
+}
+
 .qr-wrapper {
     background-color: #FFF;
     padding: 10px;
     display: inline-block;
     padding-bottom: 5px;
+    margin: 20px auto 0px;
 }
 
 .info-group {
@@ -13,14 +18,46 @@
   width: 220px;
   height: 200px;
   background-color: #1d1f31;
-  margin: 10px 20px 20px 20px;
   border: 2px solid #1d1f31;
   cursor: pointer;
+  position: relative;
+  transition: 100ms all;
+  margin: 30px 30px 20px 30px;
+  @media(min-width: 476px) {
+    margin: 30px 100px 20px 100px;
+  }
+  @media(min-width: 851px) {
+    margin: 60px 20px 40px 20px;
+  }
+
+  .card-title {
+    font-weight: bold;
+    span {
+      font-weight: 100;
+    }
+  }
 
   &.bigger {
     height: 220px;
     width: 240px;
-    margin-top: 0px;
+    margin-top: 40px;
+  }
+
+  &:hover {
+    background-color: #5058926b;
+    border: 2px solid #505892;
+    transform: scale(1.11) translateY(-10px);
+    .card-header {
+      background-color: #505892;
+    }
+  }
+}
+
+.donation-form {
+  max-width: 240px;
+  margin: auto;
+  button {
+    width: 100%;
   }
 }
 
@@ -36,5 +73,37 @@
 }
 
 .shiny-border {
+  background-color: #5058926b;
   border: 2px solid #505892;
+  transform: scale(1.11) translateY(-10px);            
+  box-shadow: 0px 0px 100px #9858ff52;
+  .card-header {
+    background-color: #505892;
+  }
 }
+
+.input-group {
+  margin: 20px auto;
+}
+
+.donation-confirmed {
+  h2 {
+    margin-top: 50px;
+    span {
+      display: block;
+      &:last-child {
+        color: #9858ff;
+        font-weight: bold;
+        font-size: 2rem;
+      }
+    }
+  }
+
+  .order-details {
+    margin-top: 50px;
+    span {
+      color: #d81b60;
+      margin-left: 10px;
+    }
+  }
+}
\ No newline at end of file