diff --git a/src/app/modules/contact/components/contact/contact.component.ts b/src/app/modules/contact/components/contact/contact.component.ts
index 4d06139..90f6731 100644
--- a/src/app/modules/contact/components/contact/contact.component.ts
+++ b/src/app/modules/contact/components/contact/contact.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { LoadingService } from 'src/app/modules/shared/loading.service';
-import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
+import { LoadingService } from '../../../shared/services/loading/loading.service';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-contact',
diff --git a/src/app/modules/home/components/home/home.component.html b/src/app/modules/home/components/home/home.component.html
index b9e9e96..6c1b74b 100644
--- a/src/app/modules/home/components/home/home.component.html
+++ b/src/app/modules/home/components/home/home.component.html
@@ -1,6 +1,19 @@
-<mat-grid-list cols="2" rowHeight="2:1">
+<mat-grid-list cols="1" rowHeight="2:1">
   <mat-grid-tile>
     <h1 class="light-text">Welcome to VideoGamer</h1>
+    <h5>Explore gaming world.</h5>
+    <mat-form-field>
+      <input matInput placeholder="label" value="value">
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Cars</mat-label>
+      <select matNativeControl required>
+        <option value="volvo">Volvo</option>
+        <option value="saab">Saab</option>
+        <option value="mercedes">Mercedes</option>
+        <option value="audi">Audi</option>
+      </select>
+    </mat-form-field>
+    <button mat-raised-button color="primary" (click)="onClick();">Explore</button>
   </mat-grid-tile>
-  <mat-grid-tile>2</mat-grid-tile>
 </mat-grid-list>
diff --git a/src/app/modules/home/components/home/home.component.ts b/src/app/modules/home/components/home/home.component.ts
index 5eccafd..3ac34ca 100644
--- a/src/app/modules/home/components/home/home.component.ts
+++ b/src/app/modules/home/components/home/home.component.ts
@@ -1,16 +1,46 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { LoadingService } from 'src/app/modules/shared/loading.service';
+import { LoadingService } from '@service/loading/loading.service';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import { TeamsService } from '@serviceteams/teams.service';
+import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
-  constructor(private readonly titleService: Title, private readonly loadingService: LoadingService) {}
+  private subscription: Subscription;
 
-  ngOnInit() {
+  constructor(
+    private readonly titleService: Title,
+    private readonly loadingService: LoadingService,
+    private readonly snackBar: MatSnackBar,
+    private readonly teamsService: TeamsService
+  ) {}
+
+  ngOnInit(): void {
     this.loadingService.setLoading(true);
     this.titleService.setTitle('VideoGamer | Home');
+    this.openSnackBar();
+    this.subscription = this.teamsService.find(5).subscribe(data => {
+      console.log(data);
+    });
+  }
+
+  openSnackBar(): void {
+    const options: MatSnackBarConfig = {
+      direction: 'ltr',
+      duration: 4000,
+      horizontalPosition: 'end',
+      panelClass: ['example-pizza-party']
+    };
+
+    this.snackBar.open('Welcome to the best NBA analytics app. 👋', 'Dismiss', options);
+    // this.snackBar.openFromComponent(NotificationComponent, options);
+  }
+
+  onClick(): void {
+    this.openSnackBar();
   }
 }
diff --git a/src/app/modules/home/home.module.ts b/src/app/modules/home/home.module.ts
index 0ec0c4e..a0ef25d 100644
--- a/src/app/modules/home/home.module.ts
+++ b/src/app/modules/home/home.module.ts
@@ -3,6 +3,12 @@ import { CommonModule } from '@angular/common';
 import { HomeComponent } from './components/home/home.component';
 import { RouterModule, Routes } from '@angular/router';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { NotificationComponent } from '../shared-components/components/notification/notification.component';
+import { SharedModule } from '../shared/shared.module';
+import { TeamsService } from '@serviceteams/teams.service';
 
 const routes: Routes = [
   {
@@ -14,7 +20,25 @@ const routes: Routes = [
 
 @NgModule({
   declarations: [HomeComponent],
-  imports: [CommonModule, RouterModule.forChild(routes), MatGridListModule],
-  exports: [HomeComponent, RouterModule, MatGridListModule]
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    MatGridListModule,
+    MatButtonModule,
+    MatInputModule,
+    MatSnackBarModule,
+    SharedModule
+  ],
+  exports: [
+    HomeComponent,
+    RouterModule,
+    MatGridListModule,
+    MatButtonModule,
+    MatInputModule,
+    MatSnackBarModule,
+    SharedModule
+  ],
+  entryComponents: [NotificationComponent],
+  providers: [TeamsService]
 })
 export class HomeModule {}
diff --git a/src/app/modules/index.ts b/src/app/modules/index.ts
index 6aa82f2..8546ac4 100644
--- a/src/app/modules/index.ts
+++ b/src/app/modules/index.ts
@@ -1,3 +1,8 @@
 import { VideoGamerLayoutModule } from './layouts/video-gamer-layout/video-gamer-layout.module';
+import { HomeModule } from './home/home.module';
+import { ContactModule } from './contact/contact.module';
+import { SharedModule } from './shared/shared.module';
+import { SharedComponentsModule } from './shared-components/shared-components.module';
+import { MaterialModule } from './shared-components/material/material.module';
 
-export { VideoGamerLayoutModule };
+export { VideoGamerLayoutModule, HomeModule, ContactModule, SharedModule, SharedComponentsModule, MaterialModule };
diff --git a/src/app/modules/shared-components/components/notification/notification.component.css b/src/app/modules/shared-components/components/notification/notification.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/shared-components/components/notification/notification.component.html b/src/app/modules/shared-components/components/notification/notification.component.html
new file mode 100644
index 0000000..f705819
--- /dev/null
+++ b/src/app/modules/shared-components/components/notification/notification.component.html
@@ -0,0 +1,3 @@
+<span class="example-pizza-party">
+  {{ message }}
+</span>
diff --git a/src/app/modules/shared-components/components/notification/notification.component.spec.ts b/src/app/modules/shared-components/components/notification/notification.component.spec.ts
new file mode 100644
index 0000000..69192c5
--- /dev/null
+++ b/src/app/modules/shared-components/components/notification/notification.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationComponent } from './notification.component';
+
+describe('NotificationComponent', () => {
+  let component: NotificationComponent;
+  let fixture: ComponentFixture<NotificationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/modules/shared-components/components/notification/notification.component.ts b/src/app/modules/shared-components/components/notification/notification.component.ts
new file mode 100644
index 0000000..5131dfb
--- /dev/null
+++ b/src/app/modules/shared-components/components/notification/notification.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+export enum Color {
+  SUCCESS = '#00ff00',
+  ERROR = 'red',
+  WARNING = 'yellow',
+  INFO = 'cyan'
+}
+
+@Component({
+  selector: 'app-notification',
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.css']
+})
+export class NotificationComponent implements OnInit {
+  @Input()
+  message: string;
+  @Input()
+  color: string;
+
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/src/app/modules/shared-components/shared-components.module.ts b/src/app/modules/shared-components/shared-components.module.ts
index 9881e9d..4fd57cd 100644
--- a/src/app/modules/shared-components/shared-components.module.ts
+++ b/src/app/modules/shared-components/shared-components.module.ts
@@ -6,9 +6,10 @@ import { LoadingSpinnerComponent } from './components/loading-spinner/loading-sp
 import { FingerprintSpinnerModule } from 'angular-epic-spinners';
 import { RouterModule } from '@angular/router';
 import { MaterialModule } from './material/material.module';
+import { NotificationComponent } from './components/notification/notification.component';
 
 @NgModule({
-  declarations: [HeaderComponent, FooterComponent, LoadingSpinnerComponent],
+  declarations: [HeaderComponent, FooterComponent, LoadingSpinnerComponent, NotificationComponent],
   imports: [CommonModule, FingerprintSpinnerModule, RouterModule, MaterialModule],
   exports: [HeaderComponent, FooterComponent, LoadingSpinnerComponent]
 })
diff --git a/src/app/modules/shared/models/Game.ts b/src/app/modules/shared/models/Game.ts
new file mode 100644
index 0000000..a30cbd1
--- /dev/null
+++ b/src/app/modules/shared/models/Game.ts
@@ -0,0 +1,3 @@
+export interface Game {
+
+}
diff --git a/src/app/modules/shared/models/Player.ts b/src/app/modules/shared/models/Player.ts
new file mode 100644
index 0000000..5bdd632
--- /dev/null
+++ b/src/app/modules/shared/models/Player.ts
@@ -0,0 +1,7 @@
+export interface Player {
+  id: number;
+  position: string;
+  height: string;
+  weight: string;
+  club: string;
+}
diff --git a/src/app/modules/shared/models/Team.ts b/src/app/modules/shared/models/Team.ts
new file mode 100644
index 0000000..afbfbaa
--- /dev/null
+++ b/src/app/modules/shared/models/Team.ts
@@ -0,0 +1,9 @@
+export interface Team {
+  id: number;
+  abbreviation: string;
+  city: string;
+  conference: string;
+  division: string;
+  fullName: string;
+  name: string;
+}
diff --git a/src/app/modules/shared/services/ApiHttpHeaders.ts b/src/app/modules/shared/services/ApiHttpHeaders.ts
new file mode 100644
index 0000000..e57ced7
--- /dev/null
+++ b/src/app/modules/shared/services/ApiHttpHeaders.ts
@@ -0,0 +1,11 @@
+import { HttpHeaders } from '@angular/common/http';
+import { environment } from '../../../../environments/environment';
+
+export const apiHttpHeaders = {
+  headers: new HttpHeaders({
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+    'x-rapidapi-host': `${environment.xRapidApiHost}`,
+    'x-rapidapi-key': `${environment.xRapidApiKey}`
+  })
+};
diff --git a/src/app/modules/shared/services/IApiResource.ts b/src/app/modules/shared/services/IApiResource.ts
new file mode 100644
index 0000000..6460455
--- /dev/null
+++ b/src/app/modules/shared/services/IApiResource.ts
@@ -0,0 +1,7 @@
+import { Observable } from 'rxjs';
+
+export interface IApiResource<T = any> {
+  readonly resourcePath: string;
+  all(): Observable<T[]>;
+  find(id: number): Observable<T>;
+}
diff --git a/src/app/modules/shared/services/games/games.service.spec.ts b/src/app/modules/shared/services/games/games.service.spec.ts
new file mode 100644
index 0000000..6a370d1
--- /dev/null
+++ b/src/app/modules/shared/services/games/games.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GamesService } from './games.service';
+
+describe('GamesService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: GamesService = TestBed.get(GamesService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/modules/shared/services/games/games.service.ts b/src/app/modules/shared/services/games/games.service.ts
new file mode 100644
index 0000000..ad6db5b
--- /dev/null
+++ b/src/app/modules/shared/services/games/games.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { IApiResource } from '@service/IApiResource';
+import { Game } from '@model/Game';
+import { Observable } from 'rxjs';
+import { environment } from '../../../../../environments/environment';
+import { apiHttpHeaders } from '@serviceApiHttpHeaders';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GamesService implements IApiResource<Game> {
+  public readonly resourcePath: string = `${environment.apiUrl}/games`;
+
+  constructor(private readonly http: HttpClient) {}
+
+  public all(): Observable<Game[]> {
+    return this.http.get<{ data: Game[] }>(this.resourcePath, apiHttpHeaders).pipe(
+      map(response => {
+        return response.data;
+      })
+    );
+  }
+
+  public find(id: number): Observable<Game> {
+    return this.http.get<Game>(`${this.resourcePath}/${id}`, apiHttpHeaders);
+  }
+}
diff --git a/src/app/modules/shared/services/index.ts b/src/app/modules/shared/services/index.ts
new file mode 100644
index 0000000..c03b678
--- /dev/null
+++ b/src/app/modules/shared/services/index.ts
@@ -0,0 +1,5 @@
+import { GamesService } from '@service/games/games.service';
+import { LoadingService } from '@service/loading/loading.service';
+import { TeamsService } from '@service/teams/teams.service';
+
+export { GamesService, LoadingService, TeamsService };
diff --git a/src/app/modules/shared/loading.service.spec.ts b/src/app/modules/shared/services/loading/loading.service.spec.ts
similarity index 100%
rename from src/app/modules/shared/loading.service.spec.ts
rename to src/app/modules/shared/services/loading/loading.service.spec.ts
diff --git a/src/app/modules/shared/loading.service.ts b/src/app/modules/shared/services/loading/loading.service.ts
similarity index 100%
rename from src/app/modules/shared/loading.service.ts
rename to src/app/modules/shared/services/loading/loading.service.ts
diff --git a/src/app/modules/shared/services/teams/teams.service.spec.ts b/src/app/modules/shared/services/teams/teams.service.spec.ts
new file mode 100644
index 0000000..6aa220c
--- /dev/null
+++ b/src/app/modules/shared/services/teams/teams.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TeamsService } from './teams.service';
+
+describe('TeamsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: TeamsService = TestBed.get(TeamsService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/modules/shared/services/teams/teams.service.ts b/src/app/modules/shared/services/teams/teams.service.ts
new file mode 100644
index 0000000..422fe82
--- /dev/null
+++ b/src/app/modules/shared/services/teams/teams.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { environment } from 'environments/environment';
+import { Team } from '@model/Team';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { IApiResource } from '@serviceIApiResource';
+import { HttpClient } from '@angular/common/http';
+import { apiHttpHeaders } from '@service/ApiHttpHeaders';
+@Injectable({
+  providedIn: 'root'
+})
+export class TeamsService implements  IApiResource<Team> {
+  public readonly resourcePath: string = `${environment.apiUrl}/teams`;
+
+  constructor(private readonly http: HttpClient) {}
+
+  public all(): Observable<Team[]> {
+    return this.http.get<{ data: Team[] }>(this.resourcePath, apiHttpHeaders).pipe(
+        map(response => {
+          return response.data;
+        })
+      );
+    }
+
+    public find(id: number): Observable<Team> {
+      return this.http.get<Team>(`${this.resourcePath}/${id}`, apiHttpHeaders);
+    }
+}
diff --git a/src/app/modules/shared/shared.module.ts b/src/app/modules/shared/shared.module.ts
index 77fe817..3aa6a18 100644
--- a/src/app/modules/shared/shared.module.ts
+++ b/src/app/modules/shared/shared.module.ts
@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
+import { HttpClientModule } from '@angular/common/http';
 @NgModule({
   declarations: [],
-  imports: [CommonModule]
+  imports: [CommonModule, HttpClientModule]
 })
 export class SharedModule {}
diff --git a/src/environments/environment.interface.ts b/src/environments/environment.interface.ts
index b87f578..2249ae4 100644
--- a/src/environments/environment.interface.ts
+++ b/src/environments/environment.interface.ts
@@ -1,4 +1,6 @@
 export interface IEnvironment {
   production: boolean;
-  apiKey: string;
+  xRapidApiHost: string;
+  xRapidApiKey: string;
+  apiUrl: string;
 }
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 2e2584d..5de311f 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -2,5 +2,7 @@ import { IEnvironment } from './environment.interface';
 
 export const environment: IEnvironment = {
   production: true,
-  apiKey: ''
+  apiUrl: 'https://free-nba.p.rapidapi.com',
+  xRapidApiKey: 'aolN7ZvMgZmsh4QEr4r3ghUrDjIyp12Y5zejsnbDZaxGht72JT',
+  xRapidApiHost: 'free-nba.p.rapidapi.com'
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index dff419f..64de529 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -6,7 +6,9 @@ import { IEnvironment } from './environment.interface';
 
 export const environment: IEnvironment = {
   production: false,
-  apiKey: ''
+  apiUrl: 'https://free-nba.p.rapidapi.com',
+  xRapidApiKey: 'aolN7ZvMgZmsh4QEr4r3ghUrDjIyp12Y5zejsnbDZaxGht72JT',
+  xRapidApiHost: 'free-nba.p.rapidapi.com'
 };
 
 /*
diff --git a/tsconfig.json b/tsconfig.json
index 41c84bb..2804cab 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
+    "baseUrl": "src",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
@@ -17,15 +17,18 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "paths": {
+      "@service*": ["app/modules/shared/services/*"],
+      "@model*": ["app/modules/shared/models/*"],
+      "@pipe*": ["app/modules/pipes/*"],
+      "@env*": ["app/environments/*"],
+      "@shared*": ["app/modules/shared*"]
+    }
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true
   },
-  "paths": {
-    "@service*": ["app/services/*"],
-    "@model*": ["app/models/*"],
-    "@env*": ["environments/*"]
-  }
+
 }