diff --git a/webapp/src/app/app.component.html b/webapp/src/app/app.component.html
index 7a9f3251..7835f94e 100644
--- a/webapp/src/app/app.component.html
+++ b/webapp/src/app/app.component.html
@@ -1,3 +1,6 @@
+@if (isDevMode()) {
+  <angular-query-devtools />
+}
 <div class="flex flex-col min-h-dvh">
   <header class="container flex items-center justify-between pt-4">
     <a class="flex gap-2 items-center hover:text-muted-foreground" routerLink="/">
diff --git a/webapp/src/app/app.component.ts b/webapp/src/app/app.component.ts
index b30ba0c0..647cf15a 100644
--- a/webapp/src/app/app.component.ts
+++ b/webapp/src/app/app.component.ts
@@ -1,15 +1,20 @@
-import { Component } from '@angular/core';
+import { Component, isDevMode } from '@angular/core';
+import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { ThemeSwitcherComponent } from './components/theme-switcher/theme-switcher.component';
 import { LucideAngularModule } from 'lucide-angular';
+import { ThemeSwitcherComponent } from './components/theme-switcher/theme-switcher.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, LucideAngularModule, ThemeSwitcherComponent, RouterLink, RouterLinkActive],
+  imports: [RouterOutlet, LucideAngularModule, ThemeSwitcherComponent, RouterLink, RouterLinkActive, AngularQueryDevtools],
   templateUrl: './app.component.html',
   styles: []
 })
 export class AppComponent {
   title = 'Hephaestus';
+
+  isDevMode() {
+    return isDevMode();
+  }
 }
diff --git a/webapp/src/app/example/hello/hello.component.html b/webapp/src/app/example/hello/hello.component.html
index 8dde5e42..1323ef60 100644
--- a/webapp/src/app/example/hello/hello.component.html
+++ b/webapp/src/app/example/hello/hello.component.html
@@ -19,5 +19,3 @@
 }
 
 <app-button class="p-2" (onClick)="addHello()"> Add Hello </app-button>
-
-<angular-query-devtools initialIsOpen />
diff --git a/webapp/src/app/example/hello/hello.component.ts b/webapp/src/app/example/hello/hello.component.ts
index 4d2d665e..98860aae 100644
--- a/webapp/src/app/example/hello/hello.component.ts
+++ b/webapp/src/app/example/hello/hello.component.ts
@@ -1,6 +1,5 @@
 import { Component, inject } from '@angular/core';
 import { injectMutation, injectQuery, injectQueryClient } from '@tanstack/angular-query-experimental';
-import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental';
 import { lastValueFrom } from 'rxjs';
 import { HelloService } from 'app/core/modules/openapi';
 import { ButtonComponent } from 'app/ui/button/button.component';
@@ -8,7 +7,7 @@ import { ButtonComponent } from 'app/ui/button/button.component';
 @Component({
   selector: 'app-hello',
   standalone: true,
-  imports: [ButtonComponent, AngularQueryDevtools],
+  imports: [ButtonComponent],
   templateUrl: './hello.component.html'
 })
 export class HelloComponent {