diff --git a/kibicara-frontend/src/app/hoodspage/hoodspage.component.html b/kibicara-frontend/src/app/hoodspage/hoodspage.component.html
index 7f50be3..9298696 100644
--- a/kibicara-frontend/src/app/hoodspage/hoodspage.component.html
+++ b/kibicara-frontend/src/app/hoodspage/hoodspage.component.html
@@ -1 +1 @@
-<p>hoodspage works!</p>
+<div *ngFor="let item of hoods$ | async">{{ item.name }}</div>
diff --git a/kibicara-frontend/src/app/hoodspage/hoodspage.component.ts b/kibicara-frontend/src/app/hoodspage/hoodspage.component.ts
index 292a8f4..9d700d0 100644
--- a/kibicara-frontend/src/app/hoodspage/hoodspage.component.ts
+++ b/kibicara-frontend/src/app/hoodspage/hoodspage.component.ts
@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
+import { HoodsService } from '../api/api/hoods.service';
 
 @Component({
   selector: 'app-hoodspage',
   templateUrl: './hoodspage.component.html',
-  styleUrls: ['./hoodspage.component.scss']
+  styleUrls: ['./hoodspage.component.scss'],
 })
 export class HoodspageComponent implements OnInit {
+  hoods$ = this.hoodsService.getHoods();
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor(private readonly hoodsService: HoodsService) {}
 
+  ngOnInit(): void {}
 }