diff --git a/Blazor/Components/Counter.razor.css b/Blazor/Components/Counter.razor.css
index 8443830..f9b166c 100644
--- a/Blazor/Components/Counter.razor.css
+++ b/Blazor/Components/Counter.razor.css
@@ -1,7 +1,9 @@
 div {
     display: inline-block;
-    border: 2px solid black;
-    background: #eee;
+    border: 2px solid #55328c;
+    background: #f0eaf7;
     padding: 1em;
     margin: 1em;
+    background-image: url("assets/blazor-icon.png");
+    background-repeat: no-repeat;
 }
diff --git a/Blazor/Components/HeroEditor.razor b/Blazor/Components/HeroEditor.razor
new file mode 100644
index 0000000..391aaa2
--- /dev/null
+++ b/Blazor/Components/HeroEditor.razor
@@ -0,0 +1,29 @@
+<div class="container">
+    <div><span>id: </span>@Hero.id</div>
+    <div>
+        <label for="hero-name">Hero name: </label>
+        <input id="hero-name" @bind="newName" placeholder="Hero name" @bind:event="oninput" @onkeyup="UpdateHero" />
+    </div>
+</div>
+
+@code {
+
+    [Parameter]
+    public Hero Hero { get; set; } = new(0, "");
+
+    [Parameter]
+    public EventCallback<Hero> HeroChanged { get; set; }
+
+    private string newName = "";
+
+
+    protected override void OnParametersSet() {
+        newName = Hero.name;
+    }
+
+    private async Task UpdateHero() {
+        Hero = Hero with { name = newName };
+        await HeroChanged.InvokeAsync(Hero);
+    }
+
+}
\ No newline at end of file
diff --git a/Blazor/Components/HeroEditor.razor.css b/Blazor/Components/HeroEditor.razor.css
new file mode 100644
index 0000000..10b3c4b
--- /dev/null
+++ b/Blazor/Components/HeroEditor.razor.css
@@ -0,0 +1,9 @@
+div.container {
+    display: inline-block;
+    border: 2px solid #55328c;
+    background: #f0eaf7;
+    padding: 30px;
+    margin: 1em;
+    background-image: url("assets/blazor-icon.png");
+    background-repeat: no-repeat;
+}
diff --git a/Blazor/Pages/Index.razor b/Blazor/Pages/Index.razor
index 2c353f6..3d2fbbf 100644
--- a/Blazor/Pages/Index.razor
+++ b/Blazor/Pages/Index.razor
@@ -2,6 +2,20 @@
 
 <h1>Blazor Components Test Project</h1>
 
-<Counter />
-<Counter />
-<Counter />
+<div>
+    <Counter />
+    <Counter />
+    <Counter />
+</div>
+
+<HeroEditor Hero="@testHero" HeroChanged="OnHeroChanged"/>
+
+@code {
+    private Hero testHero = new(5, "Arnold");
+
+    private void OnHeroChanged(Hero hero) {
+        testHero = hero;
+        Console.WriteLine("Hero changed: " + hero);
+    }
+
+}
\ No newline at end of file
diff --git a/Blazor/wwwroot/assets/blazor-icon.png b/Blazor/wwwroot/assets/blazor-icon.png
new file mode 100644
index 0000000..a79946e
Binary files /dev/null and b/Blazor/wwwroot/assets/blazor-icon.png differ