diff --git a/src/app/heroes/hero.ts b/src/app/heroes/hero.ts
new file mode 100644
index 0000000..2849018
--- /dev/null
+++ b/src/app/heroes/hero.ts
@@ -0,0 +1,4 @@
+export interface Hero {
+  id: number;
+  name: string;
+}
\ No newline at end of file
diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html
index e37b264..b46b288 100644
--- a/src/app/heroes/heroes.component.html
+++ b/src/app/heroes/heroes.component.html
@@ -1 +1,3 @@
-<h2>{{hero}}</h2>
\ No newline at end of file
+<h2>{{hero.name}} Details</h2>
+<div><span>id: </span>{{hero.id}}</div>
+<div><span>name: </span>{{hero.name}}</div>
\ No newline at end of file
diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts
index c329855..8ec0fa4 100644
--- a/src/app/heroes/heroes.component.ts
+++ b/src/app/heroes/heroes.component.ts
@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
-
+import { Hero } from './hero';
 
 @Component({
   selector: 'app-heroes',
   templateUrl: './heroes.component.html',
-  styleUrl: './heroes.component.css'
+  styleUrls: ['./heroes.component.css']
 })
-
 export class HeroesComponent {
- hero = 'Windstorm';
+  hero: Hero = {
+    id: 1,
+    name: 'Windstorm'
+  };
 }