diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5f7ee5b..9b7dc8c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,11 +4,17 @@ import { BrowserModule } from '@angular/platform-browser';
 import { HomeModule } from '../modules/home.module';  // updated import
 import { FormsModule } from '@angular/forms';
 import { SharedService } from 'src/app/shared.service';
-
+import { RouterModule, Routes } from '@angular/router';
 
 import { AppComponent } from './app.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
 
+import { FaqComponent } from './home/faq/faq.component';
+
+const routes: Routes = [
+  { path: 'faq', component: FaqComponent },
+];
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -18,6 +24,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
     HttpClientModule,
     FormsModule,
     HomeModule,
+    RouterModule.forRoot(routes),
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: true,
       // Register the ServiceWorker as soon as the application is stable
diff --git a/src/app/home/faq/faq.component.css b/src/app/home/faq/faq.component.css
index 8b5cbb3..63e230b 100644
--- a/src/app/home/faq/faq.component.css
+++ b/src/app/home/faq/faq.component.css
@@ -29,3 +29,17 @@
   }
 
 }
+
+button img {
+  height: 50px;
+  width: auto;
+  margin-right: 10px;
+  border: 0;
+  padding: 0;
+}
+
+button {
+  background-color: #2fa5e9;
+  border: 0;
+  padding: 0;
+}
\ No newline at end of file
diff --git a/src/app/home/faq/faq.component.html b/src/app/home/faq/faq.component.html
index 6f95975..34cfd14 100644
--- a/src/app/home/faq/faq.component.html
+++ b/src/app/home/faq/faq.component.html
@@ -5,6 +5,16 @@
       <div class="col-md-12 ">
         <h2 class="mb-4">FAQ</h2>
         <div class="card">
+          <div class="card-header" *ngIf="!serverMember">
+            <h5 class="mb-0">
+              Login with Discord! Supporters get access to more features! (Upscaling images with more detail!)
+            </h5>
+          </div>
+          <div class="card-body" *ngIf="!serverMember">
+            <button (click)="authenticateWithDiscord()">
+              <img src="assets/DiscordLogin.png" alt="Login with Discord">
+          </button>
+          </div>
           <div class="card-header">
             <h5 class="mb-0">
               What are some tips for good images?
diff --git a/src/app/home/faq/faq.component.ts b/src/app/home/faq/faq.component.ts
index 3d4d530..664b0fc 100644
--- a/src/app/home/faq/faq.component.ts
+++ b/src/app/home/faq/faq.component.ts
@@ -1,6 +1,10 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { SharedService } from 'src/app/shared.service';
+import { ActivatedRoute } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { StableDiffusionService } from 'src/app/stable-diffusion.service';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-faq',
@@ -8,7 +12,10 @@ import { SharedService } from 'src/app/shared.service';
   styleUrls: ['./faq.component.css']
 })
 export class FaqComponent implements OnInit, OnDestroy {
+  private clientId = '1186062405168549949';
+  private redirectUri = encodeURIComponent(environment.discordRedirectUri);
   prompt!: string;
+  serverMember: boolean = false;
   characterNames: string[] = [
     'Amy Rose', 'Barry the quokka', 'Big the cat', 'Blaze the cat', 'Bunnie Rabbot', 'Charmy the bee',
     'Cosmo the seedrian', 'Cream the rabbit', 'Eggman', 'Espio the chameleon', 'Fiona Fox', 'Honey the cat', 
@@ -25,12 +32,31 @@ export class FaqComponent implements OnInit, OnDestroy {
   
   private subscription: Subscription = new Subscription();
 
-  constructor(private sharedService: SharedService) { }
+  constructor(private sharedService: SharedService
+    , private route: ActivatedRoute
+    , private http: HttpClient
+    , private stableDiffusionService: StableDiffusionService) { }
 
   ngOnInit() {
     this.subscription = this.sharedService.getPrompt().subscribe(value => {
       this.prompt = value;
     });
+
+
+    this.route.queryParams.subscribe(params => {
+      console.log('Query Params:', params); // Add this to check if queryParams are received
+      const code = params['code'];
+      if (code) {
+        this.exchangeCode(code);
+      }
+    });
+
+    // Discord userdata check
+    this.sharedService.getUserData().subscribe(userData => {
+      if (userData) {
+        this.serverMember = userData.is_member_of_your_guild;
+      }
+    });
   }
 
   changePrompt(newPrompt: string) {
@@ -53,4 +79,19 @@ export class FaqComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.subscription.unsubscribe();
   }
+
+  authenticateWithDiscord() {
+    window.location.href = `https://discord.com/api/oauth2/authorize?client_id=${this.clientId}&redirect_uri=${this.redirectUri}&response_type=code&scope=identify%20guilds`;
+  }
+
+  private exchangeCode(code: string) {
+    this.stableDiffusionService.discordLogin({ code: code })
+        .subscribe(response => {
+            console.log(response);
+            this.sharedService.setUserData(response); // Assuming response contains user data
+        }, error => {
+            console.error(error);
+        });
+}
+
 }
diff --git a/src/app/home/options/options.component.html b/src/app/home/options/options.component.html
index 4c9f2d7..9e928f3 100644
--- a/src/app/home/options/options.component.html
+++ b/src/app/home/options/options.component.html
@@ -12,8 +12,9 @@
     </button>
   </div>
 
-  <!-- inpaint switch -->
+  <!-- buttons that show with reference images expanded -->
   <div *ngIf="referenceImage" class="inpaint-button">
+    <!-- inpaint switch -->
     <p-button label="Inpainting" (click)="openImageModal()"></p-button>
     <span class="ms-1 text-primary"
       pTooltip="Allows you to draw on the image you uploaded using your mouse to specify what should be changed. The inpainted areas will be the only ones changed while the rest of the image is unaffected"
@@ -25,6 +26,21 @@
     ">
       ?
     </span>
+
+    <!-- Upscale button -->
+    <span *ngIf="supporter">
+      <p-button label="Upscale" (click)="this.submitJob(true)"></p-button>
+      <span class="ms-1 text-primary"
+        pTooltip="Upscale the image by 1.5x. This will make the image look better and generate finer details. Due to longer generation times, this feature is currently only available to supporters."
+        tooltipPosition="top" style="
+        background-color: rgba(255, 255, 255, 0.8);
+        padding: 2px 4px;
+        border-radius: 50%;
+        cursor: pointer;
+        ">
+        ?
+      </span>
+    </span>
   </div>
 
   <!-- Denoise strength -->
@@ -175,4 +191,11 @@
       </button>
     </div>
   </div>
+
+  <!-- <p-overlayPanel #op>
+    <ng-template pTemplate="content">
+        <h4>Custom Content</h4>
+    </ng-template>
+</p-overlayPanel> -->
+  <!-- <p-button (click)="op.toggle($event)" icon="pi pi-image" label="Show"></p-button> -->
 </div>
\ No newline at end of file
diff --git a/src/app/home/options/options.component.ts b/src/app/home/options/options.component.ts
index a3a2d08..d0340b8 100644
--- a/src/app/home/options/options.component.ts
+++ b/src/app/home/options/options.component.ts
@@ -55,6 +55,8 @@ export class OptionsComponent {
   API_URL: string = "";
   referenceImage?: MobiansImage;
   currentSeed?: number;
+  supporter: boolean = false;
+  serverMember: boolean = false;
 
   @Input() inpaintMask?: string;
 
@@ -98,6 +100,15 @@ export class OptionsComponent {
         this.referenceImage = undefined;
       }
     });
+
+    // Discord userdata check
+    this.sharedService.getUserData().subscribe(userData => {
+      if (userData) {
+        this.supporter = userData.has_required_role;
+        this.serverMember = userData.is_member_of_your_guild;
+        console.log('premium member!');
+      }
+    });
   }
 
   ngOnDestroy() {
@@ -239,7 +250,11 @@ export class OptionsComponent {
   }
 
   // Send job to django api and retrieve job id.
-  submitJob() {
+  submitJob(upscale: boolean = false) {
+    if (upscale) {
+      this.generationRequest.job_type = "upscale";
+    }
+
     // Disable generation button
     this.enableGenerationButton = false;
 
diff --git a/src/app/shared.service.ts b/src/app/shared.service.ts
index e9b6048..2d6e924 100644
--- a/src/app/shared.service.ts
+++ b/src/app/shared.service.ts
@@ -10,6 +10,8 @@ export class SharedService {
   private _generationRequest: BehaviorSubject<GenerationRequest | null> = new BehaviorSubject<GenerationRequest | null>(null);
   private _images: BehaviorSubject<MobiansImage[]> = new BehaviorSubject<MobiansImage[]>([]);
   private _referenceImage: BehaviorSubject<MobiansImage | null> = new BehaviorSubject<MobiansImage | null>(null);
+  private _userData: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+
 
   constructor() { }
 
@@ -75,4 +77,17 @@ export class SharedService {
   getReferenceImageValue(): MobiansImage | null {
     return this._referenceImage.getValue();
   }
+
+  setUserData(value: any) {
+    this._userData.next(value);
+  }
+
+  getUserData(): Observable<any> {
+      return this._userData.asObservable();
+  }
+
+  getUserDataValue(): any {
+      return this._userData.getValue();
+  }
+
 }
diff --git a/src/app/stable-diffusion.service.ts b/src/app/stable-diffusion.service.ts
index af0b160..efc6b8b 100644
--- a/src/app/stable-diffusion.service.ts
+++ b/src/app/stable-diffusion.service.ts
@@ -1,13 +1,13 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class StableDiffusionService {
-  // private apiBaseUrl =  'http://76.157.184.213:9000';
-  private apiBaseUrl =  'https://mobians.azurewebsites.net'
+  private apiBaseUrl =  environment.apiBaseUrl;
 
   constructor(private http: HttpClient) {}
 
@@ -31,4 +31,11 @@ export class StableDiffusionService {
     const body = JSON.stringify(data);
     return this.http.post(url, body, {'headers':headers});
   }
+
+  discordLogin(data: any): Observable<any> {
+    const url = `${this.apiBaseUrl}/discord_auth/`;  // note the trailing slash
+    const headers = { 'content-type': 'application/json' };
+    const body = JSON.stringify(data);
+    return this.http.post(url, body, {'headers':headers});
+  }
 }
diff --git a/src/assets/DiscordLogin.png b/src/assets/DiscordLogin.png
new file mode 100644
index 0000000..a67d605
Binary files /dev/null and b/src/assets/DiscordLogin.png differ
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
new file mode 100644
index 0000000..429749f
--- /dev/null
+++ b/src/environments/environment.prod.ts
@@ -0,0 +1,6 @@
+export const environment = {
+    production: true,
+    discordRedirectUri: 'https://mobians.ai/',  // Replace with your production redirect URI
+    apiBaseUrl: 'https://mobians.azurewebsites.net'
+  };
+  
\ No newline at end of file
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
new file mode 100644
index 0000000..0ea0d01
--- /dev/null
+++ b/src/environments/environment.ts
@@ -0,0 +1,6 @@
+export const environment = {
+    production: false,
+    discordRedirectUri: 'http://localhost:4200/',  // Replace with your development redirect URI
+    apiBaseUrl: 'http://localhost:9000'
+  };
+  
\ No newline at end of file
diff --git a/src/modules/home.module.ts b/src/modules/home.module.ts
index 31da2af..78ab849 100644
--- a/src/modules/home.module.ts
+++ b/src/modules/home.module.ts
@@ -18,6 +18,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { ButtonModule } from 'primeng/button';
 import { ColorPickerModule } from 'primeng/colorpicker';
 import { ToggleButtonModule } from 'primeng/togglebutton';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
 
 @NgModule({
   declarations: [
@@ -38,7 +39,8 @@ import { ToggleButtonModule } from 'primeng/togglebutton';
     TooltipModule,
     ButtonModule,
     ColorPickerModule,
-    ToggleButtonModule
+    ToggleButtonModule,
+    OverlayPanelModule,
   ],
   exports: [
     ImageGridComponent,
@@ -47,6 +49,7 @@ import { ToggleButtonModule } from 'primeng/togglebutton';
     ImageModalComponent,
     GligenDisplayComponent, 
     InpaintingDisplayComponent,
+    OverlayPanelModule,
   ],
   providers: [MessageService]
 })