diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 373c740..6f1822c 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -3,15 +3,22 @@ import {
   provideBrowserGlobalErrorListeners,
   provideZonelessChangeDetection,
 } from '@angular/core';
-import { provideRouter, Routes } from '@angular/router';
+import {
+  provideRouter,
+  Routes,
+  withComponentInputBinding,
+  withRouterConfig,
+} from '@angular/router';
 import { NoTaskComponent } from './tasks/noTask/noTask.component';
 import { TasksComponent } from './tasks/tasks.component';
+import { UserTasksComponent } from './users/user-tasks/userTasks.component';
 
 const routes: Routes = [
   { path: '', component: NoTaskComponent },
   {
     path: 'users/:userId',
     component: TasksComponent,
+    children: [{ path: 'tasks', component: UserTasksComponent }],
   },
 ];
 
@@ -19,6 +26,10 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
-    provideRouter(routes),
+    provideRouter(
+      routes,
+      withComponentInputBinding(),
+      withRouterConfig({ paramsInheritanceStrategy: 'always' })
+    ),
   ],
 };
diff --git a/src/app/tasks/task.model.ts b/src/app/tasks/task.model.ts
new file mode 100644
index 0000000..382f54c
--- /dev/null
+++ b/src/app/tasks/task.model.ts
@@ -0,0 +1,10 @@
+import { UserType } from "../users/user/user.model";
+
+export interface ITask {
+  id: string;
+  title: string;
+  dueDate: string;
+  summary: string;
+  complete: boolean;
+  userId: UserType['id'];
+}
\ No newline at end of file
diff --git a/src/app/tasks/task/task.component.html b/src/app/tasks/task/task.component.html
new file mode 100644
index 0000000..02b5cab
--- /dev/null
+++ b/src/app/tasks/task/task.component.html
@@ -0,0 +1,12 @@
+<article class="bg-primary pl-4 pt-5 pr-4 pb-5 rounded-2 shadow-1">
+  <h3 class="heading-6">{{ title }}</h3>
+  <p class="mb-5 opacity-70">{{ dueDate | date: 'fullDate'}}</p>
+  <p class="mb-5">
+    {{ summary }}
+  </p>
+  <div class="d-flex justify-content-end">
+    <button type="button" class="button button--secondary shadow-2">
+      Complete
+    </button>
+  </div>
+</article>
diff --git a/src/app/tasks/task/task.component.ts b/src/app/tasks/task/task.component.ts
new file mode 100644
index 0000000..26b6d04
--- /dev/null
+++ b/src/app/tasks/task/task.component.ts
@@ -0,0 +1,15 @@
+import { DatePipe } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { ITask } from '../task.model';
+
+@Component({
+  selector: 'app-task',
+  templateUrl: './task.component.html',
+  imports: [DatePipe],
+})
+export class TaskComponent {
+  @Input({ required: true }) id!: ITask['id'];
+  @Input({ required: true }) title!: ITask['title'];
+  @Input({ required: true }) summary!: ITask['summary'];
+  @Input({ required: true }) dueDate!: ITask['dueDate'];
+}
diff --git a/src/app/tasks/tasks.service.ts b/src/app/tasks/tasks.service.ts
new file mode 100644
index 0000000..36dc922
--- /dev/null
+++ b/src/app/tasks/tasks.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { UserType } from '../users/user/user.model';
+import { ITask } from './task.model';
+import { DUMMY_TASKS } from '../../dummy-tasks';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TasksService {
+  tasks = DUMMY_TASKS;
+
+  getTasksByUserId(userId: UserType['id']): ITask[] {
+    return this.tasks.filter((t) => t.userId == userId);
+  }
+}
diff --git a/src/app/users/user-tasks/userTasks.component.html b/src/app/users/user-tasks/userTasks.component.html
index f97cc5d..ce6264b 100644
--- a/src/app/users/user-tasks/userTasks.component.html
+++ b/src/app/users/user-tasks/userTasks.component.html
@@ -1,3 +1,10 @@
 <ul class="d-flex flex-column gap">
-  ...TODO
+  @for (task of tasks; track task.id) {
+  <app-task
+    [id]="task.id"
+    [title]="task.title"
+    [summary]="task.summary"
+    [dueDate]="task.dueDate"
+  />
+  }
 </ul>
diff --git a/src/app/users/user-tasks/userTasks.component.ts b/src/app/users/user-tasks/userTasks.component.ts
index 0256239..a1fa296 100644
--- a/src/app/users/user-tasks/userTasks.component.ts
+++ b/src/app/users/user-tasks/userTasks.component.ts
@@ -1,7 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TasksService } from '../../tasks/tasks.service';
+import { UserType } from '../user/user.model';
+import { ITask } from '../../tasks/task.model';
+import { TaskComponent } from '../../tasks/task/task.component';
 
 @Component({
   selector: 'app-user/tasks',
   templateUrl: './userTasks.component.html',
+  imports: [TaskComponent]
 })
-export class UserTasksComponent {}
+export class UserTasksComponent implements OnChanges {
+  @Input() userId: UserType['id'] = '';
+  tasks: ITask[] = [];
+
+  constructor(
+    private tasksService: TasksService
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['userId'] && this.userId) {
+      this.loadTasks(this.userId);
+    }
+  }
+
+  loadTasks(userId: ITask['id']): void {
+    this.tasks = this.tasksService.getTasksByUserId(userId);
+  }
+}