diff --git a/src/app/pages/elections/election-speeches/election-speeches.component.spec.ts b/src/app/pages/elections/election-speeches/election-speeches.component.spec.ts
index 534b56d..b5c2183 100644
--- a/src/app/pages/elections/election-speeches/election-speeches.component.spec.ts
+++ b/src/app/pages/elections/election-speeches/election-speeches.component.spec.ts
@@ -9,8 +9,7 @@ describe('ElectionSpeechesComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ElectionSpeechesComponent]
-    })
-    .compileComponents();
+    }).compileComponents();
 
     fixture = TestBed.createComponent(ElectionSpeechesComponent);
     component = fixture.componentInstance;
diff --git a/src/app/pages/elections/upcoming/elections-schedule.component.spec.ts b/src/app/pages/elections/upcoming/elections-schedule.component.spec.ts
index 35825e1..bb5c1fb 100644
--- a/src/app/pages/elections/upcoming/elections-schedule.component.spec.ts
+++ b/src/app/pages/elections/upcoming/elections-schedule.component.spec.ts
@@ -9,8 +9,7 @@ describe('UpcomingComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ElectionsScheduleComponent]
-    })
-    .compileComponents();
+    }).compileComponents();
 
     fixture = TestBed.createComponent(ElectionsScheduleComponent);
     component = fixture.componentInstance;
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 8d094a8..f0b5ded 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -6,5 +6,6 @@ <h2>Computing Science Student Society</h2>
   <p>Please read and accept the terms of condition below.</p>
   <nav>
     <a><code-button label="README" [icon]="fileIcon" (click)="readmeAction()" /></a>
+    <a><code-button label="Discord" [icon]="discordIcon" (click)="discordAction()" /></a>
   </nav>
 </article>
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index 9994120..b89956a 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -2,6 +2,7 @@ import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { ButtonComponent } from '@csss-code/button/button.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faDiscord } from '@fortawesome/free-brands-svg-icons';
 import { faFile, faSquare } from '@fortawesome/free-solid-svg-icons';
 import { csssLogo } from 'assets/icons/csss-logo';
 import { RainbowDirective } from './directives/rainbow.directive';
@@ -16,10 +17,15 @@ export class HomeComponent {
   csssIcon = csssLogo;
   squareIcon = faSquare;
   fileIcon = faFile;
+  discordIcon = faDiscord;
 
   private router = inject(Router);
 
   readmeAction(): void {
     this.router.navigate(['/readme']);
   }
+
+  discordAction(): void {
+    window.open('https://discord.gg/sfucsss', '_blank');
+  }
 }
diff --git a/src/ui/csss-code/button/button.component.scss b/src/ui/csss-code/button/button.component.scss
index cfae922..a0ce87e 100644
--- a/src/ui/csss-code/button/button.component.scss
+++ b/src/ui/csss-code/button/button.component.scss
@@ -8,7 +8,7 @@ button {
   transition: transform 0.1s ease;
 
   &:hover {
-    background-color: g.$accent2;
+    background-color: g.$accent;
   }
 
   &:active {