diff --git a/src/app/hero-detail/hero-detail.scss b/src/app/hero-detail/hero-detail.component.css
similarity index 100%
rename from src/app/hero-detail/hero-detail.scss
rename to src/app/hero-detail/hero-detail.component.css
diff --git a/src/app/hero-detail/hero-detail.component.html b/src/app/hero-detail/hero-detail.component.html
new file mode 100644
index 0000000..698c682
--- /dev/null
+++ b/src/app/hero-detail/hero-detail.component.html
@@ -0,0 +1,10 @@
+<div *ngIf="hero">
+
+  <h2>{{hero.name | uppercase}} Details</h2>
+  <div><span>id: </span>{{hero.id}}</div>
+  <div>
+    <label for="hero-name">Hero name: </label>
+    <input id="hero-name" [(ngModel)]="hero.name" placeholder="name">
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/hero-detail/hero-detail.component.ts b/src/app/hero-detail/hero-detail.component.ts
new file mode 100644
index 0000000..f1bdbb2
--- /dev/null
+++ b/src/app/hero-detail/hero-detail.component.ts
@@ -0,0 +1,17 @@
+import {Component, Input} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {Hero} from '../hero';
+import {CommonModule} from '@angular/common';
+
+@Component({
+  standalone: true,
+  selector: 'app-hero-detail',
+  templateUrl: './hero-detail.component.html',
+  styleUrls: ['./hero-detail.component.css'],
+  imports: [CommonModule, FormsModule]
+})
+
+export class HeroDetailComponent {
+  @Input() hero?: Hero;
+
+}
diff --git a/src/app/hero-detail/hero-detail.html b/src/app/hero-detail/hero-detail.html
deleted file mode 100644
index 11ae4cc..0000000
--- a/src/app/hero-detail/hero-detail.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>hero-detail works!</p>
diff --git a/src/app/hero-detail/hero-detail.ts b/src/app/hero-detail/hero-detail.ts
deleted file mode 100644
index 920aa08..0000000
--- a/src/app/hero-detail/hero-detail.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-hero-detail',
-  imports: [],
-  templateUrl: './hero-detail.html',
-  styleUrl: './hero-detail.scss'
-})
-export class HeroDetail {
-
-}
diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html
index 3e59ac1..e049c03 100644
--- a/src/app/heroes/heroes.component.html
+++ b/src/app/heroes/heroes.component.html
@@ -1,18 +1,12 @@
 <h2>My Heroes</h2>
+
 <ul class="heroes">
   <li *ngFor="let hero of heroes">
-    <button type="button" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
+    <button [class.selected]="hero === selectedHero" type="button" (click)="onSelect(hero)">
       <span class="badge">{{hero.id}}</span>
       <span class="name">{{hero.name}}</span>
     </button>
   </li>
 </ul>
 
-<div *ngIf="selectedHero">
-  <h2>{{selectedHero.name | uppercase}} Details</h2>
-  <div>id: {{selectedHero.id}}</div>
-  <div>
-    <label for="hero-name">Hero name: </label>
-    <input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">
-  </div>
-</div>
\ No newline at end of file
+<app-hero-detail [hero]="selectedHero"></app-hero-detail>
\ No newline at end of file
diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts
index 7605b06..e1ab675 100644
--- a/src/app/heroes/heroes.component.ts
+++ b/src/app/heroes/heroes.component.ts
@@ -3,12 +3,13 @@ import { Hero } from '../hero';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {HEROES} from '../mock-heroes';
+import { HeroDetailComponent } from '../hero-detail/hero-detail.component';
 
 @Component({
   selector: 'app-heroes',
   templateUrl: './heroes.component.html',
   styleUrls: ['./heroes.component.css'],
-  imports: [CommonModule, FormsModule]
+  imports: [CommonModule, FormsModule, HeroDetailComponent]
 })
 
 export class HeroesComponent { //определяем класс со списком героев