diff --git a/apps/angular-intro/src/app/app.component.html b/apps/angular-intro/src/app/app.component.html
index fc6faa1..6bbfba1 100644
--- a/apps/angular-intro/src/app/app.component.html
+++ b/apps/angular-intro/src/app/app.component.html
@@ -1 +1,4 @@
-<div class="p-4">Hello world</div>
+<div class="p-4">
+  Hello world
+  <app-counter />
+</div>
diff --git a/apps/angular-intro/src/app/app.component.ts b/apps/angular-intro/src/app/app.component.ts
index 7fc0e58..1a32f2b 100644
--- a/apps/angular-intro/src/app/app.component.ts
+++ b/apps/angular-intro/src/app/app.component.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { CounterComponent } from '../counter/counter.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
+  imports: [CounterComponent],
 })
 export class AppComponent {
   title = 'angular-intro';
diff --git a/apps/angular-intro/src/counter/button/button.component.html b/apps/angular-intro/src/counter/button/button.component.html
new file mode 100644
index 0000000..808fce5
--- /dev/null
+++ b/apps/angular-intro/src/counter/button/button.component.html
@@ -0,0 +1,3 @@
+<button class="bg-gray-400 px-4 py-2 rounded-sm h-min">
+  <ng-content />
+</button>
diff --git a/apps/angular-intro/src/counter/button/button.component.ts b/apps/angular-intro/src/counter/button/button.component.ts
new file mode 100644
index 0000000..9e33285
--- /dev/null
+++ b/apps/angular-intro/src/counter/button/button.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'app-button',
+  templateUrl: './button.component.html',
+})
+export class ButtonComponent {}
diff --git a/apps/angular-intro/src/counter/counter.component.html b/apps/angular-intro/src/counter/counter.component.html
new file mode 100644
index 0000000..7197a10
--- /dev/null
+++ b/apps/angular-intro/src/counter/counter.component.html
@@ -0,0 +1,7 @@
+<div class="flex flex-row items-center gap-4">
+  <h3>
+    <app-value [value]="count" />
+  </h3>
+  <app-button (click)="increment()">+1</app-button>
+  <app-button (click)="decrement()">-1</app-button>
+</div>
diff --git a/apps/angular-intro/src/counter/counter.component.ts b/apps/angular-intro/src/counter/counter.component.ts
new file mode 100644
index 0000000..3b2860c
--- /dev/null
+++ b/apps/angular-intro/src/counter/counter.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { ButtonComponent } from './button/button.component';
+import { ValueComponent } from './value/value.component';
+
+@Component({
+  standalone: true,
+  selector: 'app-counter',
+  templateUrl: './counter.component.html',
+  imports: [ButtonComponent, ValueComponent],
+})
+export class CounterComponent {
+  count = 0;
+
+  increment() {
+    this.count++;
+  }
+
+  decrement() {
+    this.count--;
+  }
+}
diff --git a/apps/angular-intro/src/counter/value/value.component.ts b/apps/angular-intro/src/counter/value/value.component.ts
new file mode 100644
index 0000000..99d1498
--- /dev/null
+++ b/apps/angular-intro/src/counter/value/value.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'app-value',
+  template: `<div>Value: {{ value }}</div> `,
+})
+export class ValueComponent {
+  @Input({ required: true })
+  value!: number;
+}