diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index cf8a471..dbd14d2 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,11 @@
+import { HttpClientModule } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'cnjg-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, HttpClientModule],
   template: '<router-outlet />',
 })
 export class AppComponent {}
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index bcd5df3..ecf3b75 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -3,7 +3,12 @@ import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideAnimationsAsync()],
+  providers: [
+    provideRouter(routes),
+    provideAnimationsAsync(),
+    provideHttpClient(),
+  ],
 };
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 0443762..329bec9 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,7 +1,8 @@
 import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
+import { FavouritesComponent } from './favourites/favourites.component';
 
 export const routes: Routes = [
   { path: '', component: HomeComponent },
-  // Add more routes here if needed
+  { path: 'favourites', component: FavouritesComponent },
 ];
diff --git a/src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.constant.ts b/src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.constant.ts
new file mode 100644
index 0000000..5ef4d04
--- /dev/null
+++ b/src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.constant.ts
@@ -0,0 +1 @@
+export const chuckNorrisApi = 'https://api.chucknorris.io/jokes/random';
diff --git a/src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.model.ts b/src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.model.ts
new file mode 100644
index 0000000..fd70d83
--- /dev/null
+++ b/src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.model.ts
@@ -0,0 +1,6 @@
+export interface ChuckNorrisJoke {
+  icon_url: string;
+  id: string;
+  url: string;
+  value: string;
+}
diff --git a/src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.service.spec.ts b/src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.service.spec.ts
new file mode 100644
index 0000000..245aa8d
--- /dev/null
+++ b/src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ChuckNorrisJokeGeneratorService } from './chuck-norris-joke-generator.service';
+
+describe('ChuckNorrisJokeGeneratorService', () => {
+  let service: ChuckNorrisJokeGeneratorService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ChuckNorrisJokeGeneratorService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.service.ts b/src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.service.ts
new file mode 100644
index 0000000..0737dd5
--- /dev/null
+++ b/src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.service.ts
@@ -0,0 +1,19 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { ChuckNorrisJoke } from './chuck-norris-joke-generator.model';
+import { Observable, forkJoin, map, switchMap, tap } from 'rxjs';
+import { chuckNorrisApi } from './chuck-norris-joke-generator.constant';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ChuckNorrisJokeGeneratorService {
+  constructor(private httpClient: HttpClient) {}
+
+  public getJoke(): Observable<string> {
+    return this.httpClient.get<ChuckNorrisJoke>(chuckNorrisApi).pipe(
+      tap((joke) => console.log(joke)),
+      map((joke) => joke.value)
+    );
+  }
+}
diff --git a/src/app/favourites/favourites.component.html b/src/app/favourites/favourites.component.html
new file mode 100644
index 0000000..14a5819
--- /dev/null
+++ b/src/app/favourites/favourites.component.html
@@ -0,0 +1 @@
+<p>favourites works!</p>
diff --git a/src/app/favourites/favourites.component.scss b/src/app/favourites/favourites.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/favourites/favourites.component.spec.ts b/src/app/favourites/favourites.component.spec.ts
new file mode 100644
index 0000000..b0e14d5
--- /dev/null
+++ b/src/app/favourites/favourites.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FavouritesComponent } from './favourites.component';
+
+describe('FavouritesComponent', () => {
+  let component: FavouritesComponent;
+  let fixture: ComponentFixture<FavouritesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FavouritesComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(FavouritesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/favourites/favourites.component.ts b/src/app/favourites/favourites.component.ts
new file mode 100644
index 0000000..a0dd239
--- /dev/null
+++ b/src/app/favourites/favourites.component.ts
@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'cnjg-favourites',
+  standalone: true,
+  imports: [],
+  templateUrl: './favourites.component.html',
+  styleUrl: './favourites.component.scss',
+  // changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FavouritesComponent {}
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index e69de29..e4dca38 100644
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 25px;
+}
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 081f0d3..df2fb26 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -7,6 +7,6 @@ import { JokesComponent } from '../jokes/jokes.component';
   imports: [JokesComponent],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  // changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomeComponent {}
diff --git a/src/app/joke-store/joke-store.service.spec.ts b/src/app/joke-store/joke-store.service.spec.ts
new file mode 100644
index 0000000..e860e0f
--- /dev/null
+++ b/src/app/joke-store/joke-store.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { JokeStoreService } from './joke-store.service';
+
+describe('JokeStoreService', () => {
+  let service: JokeStoreService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(JokeStoreService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/joke-store/joke-store.service.ts b/src/app/joke-store/joke-store.service.ts
new file mode 100644
index 0000000..8cd2bc9
--- /dev/null
+++ b/src/app/joke-store/joke-store.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { ChuckNorrisJokeGeneratorService } from '../chuck-norris-joke-generator/chuck-norris-joke-generator.service';
+import { Observable, forkJoin } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class JokeStoreService {
+  constructor(
+    private chuckNorrisJokeGeneratorService: ChuckNorrisJokeGeneratorService
+  ) {}
+
+  /**
+   * @returns a list of 10 jokes
+   */
+  public getJokes(): Observable<string[]> {
+    // TODO: Look into a more efficient way to do 10 concurrent requests (showing them as they return in the view):
+    return forkJoin(
+      Array(10).fill(this.chuckNorrisJokeGeneratorService.getJoke())
+    );
+  }
+}
diff --git a/src/app/jokes/jokes.component.scss b/src/app/jokes/jokes.component.scss
index e69de29..1e9e856 100644
--- a/src/app/jokes/jokes.component.scss
+++ b/src/app/jokes/jokes.component.scss
@@ -0,0 +1,25 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  ul {
+    width: 80%;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    li {
+      list-style: none;
+      margin-bottom: 20px;
+    }
+    li:nth-child(even) {
+      color: orange;
+    }
+
+    li:nth-child(odd) {
+      color: lightblue;
+    }
+  }
+}
diff --git a/src/app/jokes/jokes.component.ts b/src/app/jokes/jokes.component.ts
index 64b9c7b..fe7f56f 100644
--- a/src/app/jokes/jokes.component.ts
+++ b/src/app/jokes/jokes.component.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component } from '@angular/core';
+import { JokeStoreService } from '../joke-store/joke-store.service';
 
 @Component({
   selector: 'cnjg-jokes',
@@ -7,41 +8,15 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   imports: [CommonModule],
   templateUrl: './jokes.component.html',
   styleUrl: './jokes.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  // changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class JokesComponent {
-  public jokes = [
-    'Joke 1',
-    'Joke 2',
-    'Joke 3',
-    'Joke 4',
-    'Joke 5',
-    'Joke 6',
-    'Joke 7',
-    'Joke 8',
-    'Joke 9',
-    'Joke 10',
-    'Joke 11',
-    'Joke 12',
-    'Joke 13',
-    'Joke 14',
-    'Joke 15',
-    'Joke 16',
-    'Joke 17',
-    'Joke 18',
-    'Joke 19',
-    'Joke 20',
-    'Joke 21',
-    'Joke 22',
-    'Joke 23',
-    'Joke 24',
-    'Joke 25',
-    'Joke 26',
-    'Joke 27',
-    'Joke 28',
-    'Joke 29',
-    'Joke 30',
-    'Joke 31',
-    'Joke 32',
-  ];
+  public jokes: string[] = [];
+
+  constructor(private jokeStoreService: JokeStoreService) {
+    // TODO: Look into using async pipe?
+    this.jokeStoreService.getJokes().subscribe((jokes) => {
+      this.jokes = jokes;
+    });
+  }
 }
diff --git a/src/favicon.ico b/src/favicon.ico
index 57614f9..0eb37c5 100644
Binary files a/src/favicon.ico and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
index 4f6114c..1746ff7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>ChuckNorrisJokeGenerator</title>
+    <title>Chuck Norris Joke Generator</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />