diff --git a/UI/Web/src/app/user-settings/api-key/api-key.component.ts b/UI/Web/src/app/user-settings/api-key/api-key.component.ts
index 5b07b87e4..04269068e 100644
--- a/UI/Web/src/app/user-settings/api-key/api-key.component.ts
+++ b/UI/Web/src/app/user-settings/api-key/api-key.component.ts
@@ -4,6 +4,7 @@ import { Subject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { ConfirmService } from 'src/app/shared/confirm.service';
 import { AccountService } from 'src/app/_services/account.service';
+import { Clipboard } from '@angular/cdk/clipboard';
 
 @Component({
   selector: 'app-api-key',
@@ -21,7 +22,7 @@ export class ApiKeyComponent implements OnInit, OnDestroy {
   private readonly onDestroy = new Subject<void>();
   
 
-  constructor(private confirmService: ConfirmService, private accountService: AccountService, private toastr: ToastrService) { }
+  constructor(private confirmService: ConfirmService, private accountService: AccountService, private toastr: ToastrService, private clipboard: Clipboard) { }
 
   ngOnInit(): void {
     this.accountService.currentUser$.pipe(takeUntil(this.onDestroy)).subscribe(user => {
@@ -44,7 +45,9 @@ export class ApiKeyComponent implements OnInit, OnDestroy {
   }
 
   async copy() {
-    await navigator.clipboard.writeText(this.key);
+    this.inputElem.nativeElement.select();
+    this.clipboard.copy(this.inputElem.nativeElement.value);
+    this.inputElem.nativeElement.setSelectionRange(0, 0);
   }
 
   async refresh() {