diff --git a/src/app/hero-detail/hero-detail.html b/src/app/hero-detail/hero-detail.html
new file mode 100644
index 0000000..11ae4cc
--- /dev/null
+++ b/src/app/hero-detail/hero-detail.html
@@ -0,0 +1 @@
+<p>hero-detail works!</p>
diff --git a/src/app/hero-detail/hero-detail.scss b/src/app/hero-detail/hero-detail.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/hero-detail/hero-detail.ts b/src/app/hero-detail/hero-detail.ts
new file mode 100644
index 0000000..920aa08
--- /dev/null
+++ b/src/app/hero-detail/hero-detail.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hero-detail',
+  imports: [],
+  templateUrl: './hero-detail.html',
+  styleUrl: './hero-detail.scss'
+})
+export class HeroDetail {
+
+}