diff --git a/src/app/movie-detail/movie-detail.component.html b/src/app/movie-detail/movie-detail.component.html
index 6839e61..ea4ad6b 100644
--- a/src/app/movie-detail/movie-detail.component.html
+++ b/src/app/movie-detail/movie-detail.component.html
@@ -1,28 +1,28 @@
 <app-loader [loading]="loading"></app-loader>
 
-<div class="ngmp-movie-details-container" *ngIf="movie" [@simpleFadeAnimation]="'in'">
-        <div *ngIf="(movie.Poster !== MOVIE_PROPS.NO_IMG_URL || null)" class="ngmp-movie-cover">
+<div class="ngma-movie-details-container" *ngIf="movie" [@simpleFadeAnimation]="'in'">
+        <div *ngIf="(movie.Poster !== MOVIE_PROPS.NO_IMG_URL || null)" class="ngma-movie-cover">
             <img src="{{movie.Poster}}" alt="movie cover">
         </div>
-    <div class="ngmp-movie-details">
-        <div class="ngmp-movie-poster">
+    <div class="ngma-movie-details">
+        <div class="ngma-movie-poster">
             <img src="{{movie.Poster}}" alt="movie poster">
         </div>
-        <div class="ngmp-movie-contents">
+        <div class="ngma-movie-contents">
             <h2>{{movie.Title}}</h2>
-            <div class="ngmp-movie-info">
-                <div class="ngmp-movie-rate">
+            <div class="ngma-movie-info">
+                <div class="ngma-movie-rate">
                     <a>
-                        <img class="ngmp-star-img" src="assets/icons/star.svg" alt="movie poster">
+                        <img class="ngma-star-img" src="assets/icons/star.svg" alt="movie poster">
                         <strong>{{movie.imdbRating}}</strong>
                     </a>
                 </div>
-                <div class="ngmp-movie-duration">
-                    <a><img class="ngmp-duration-img" src="assets/icons/duration.svg" alt="movie poster">
+                <div class="ngma-movie-duration">
+                    <a><img class="ngma-duration-img" src="assets/icons/duration.svg" alt="movie poster">
                         <strong>{{movie.Runtime}}</strong>
                     </a>
                 </div>
-                <div class="ngmp-movie-rating-container">
+                <div class="ngma-movie-rating-container">
                     <strong>Ratings:</strong>
                     <a *ngFor="let rating of movie.Ratings">
                         {{rating.Source}}
@@ -30,19 +30,19 @@ <h2>{{movie.Title}}</h2>
                     </a>
                 </div>
             </div>
-            <div class="ngmp-movie-info">
-                <div class="ngmp-movie-rating-container">
+            <div class="ngma-movie-info">
+                <div class="ngma-movie-rating-container">
                     <a *ngFor="let genre of movie.Genre.split(',')">
                         {{genre}}
                     </a>
                 </div>
             </div>
 
-            <p class="ngmp-movie-plot">
-                <img class="ngmp-plot-img" src="assets/icons/plot.svg" alt="movie poster">
+            <p class="ngma-movie-plot">
+                <img class="ngma-plot-img" src="assets/icons/plot.svg" alt="movie poster">
                 {{movie.Plot}}
             </p>
-            <div class="ngmp-movie-info">
+            <div class="ngma-movie-info">
                 <a class="ngma-actor-details">
                     <div class="ngma-icon-container ngma-avatar"
                         style="background-image: url('assets/icons/director.svg');">
diff --git a/src/app/movie-detail/movie-detail.component.scss b/src/app/movie-detail/movie-detail.component.scss
index ec04799..a43954b 100644
--- a/src/app/movie-detail/movie-detail.component.scss
+++ b/src/app/movie-detail/movie-detail.component.scss
@@ -1,10 +1,10 @@
 @import "variables";
 
-.ngmp-movie-details-container {
+.ngma-movie-details-container {
   width: 100%;
 }
 
-.ngmp-movie-cover {
+.ngma-movie-cover {
   position: relative;
   max-height: 25em;
   overflow: hidden;
@@ -42,7 +42,7 @@
   }
 }
 
-.ngmp-movie-details {
+.ngma-movie-details {
   position: relative;
   display: flex;
   flex-direction: row;
@@ -51,7 +51,7 @@
   transform: translateY(-4em);
 }
 
-.ngmp-movie-contents {
+.ngma-movie-contents {
   padding: 0 1em;
   color: darken($light, 35);
 
@@ -61,7 +61,7 @@
     font-size: 44px;
   }
 
-  .ngmp-movie-info {
+  .ngma-movie-info {
     display: flex;
     justify-content: flex-start;
     flex-direction: row;
@@ -102,7 +102,7 @@
     }
   }
 
-  .ngmp-movie-rating-container {
+  .ngma-movie-rating-container {
     a {
       margin-left: 0.5em;
       background-color: $secondary-color;
@@ -113,26 +113,26 @@
     }
   }
 
-  .ngmp-movie-plot {
+  .ngma-movie-plot {
     max-width: 70%;
     line-height: 1.8;
   }
 
-  .ngmp-plot-img {
+  .ngma-plot-img {
     top: 10px;
     position: relative;
     height: 25px;
     width: 25px;
   }
 
-  .ngmp-star-img {
+  .ngma-star-img {
     top: 5px;
     position: relative;
     height: 25px;
     width: 25px;
   }
 
-  .ngmp-duration-img {
+  .ngma-duration-img {
     top: 10px;
     position: relative;
     height: 20px;
@@ -140,15 +140,15 @@
 }
 
 @media only screen and (max-width: 48em) {
-  .ngmp-movie-details {
+  .ngma-movie-details {
     flex-direction: column-reverse;
     transform: translateY(0);
     padding: 0 0.5em;
 
-    .ngmp-movie-poster {
+    .ngma-movie-poster {
       padding: 0 1em;
     }
-    .ngmp-movie-info {
+    .ngma-movie-info {
       display: block;
       div {
         flex-direction: column;
@@ -160,14 +160,14 @@
         margin-bottom: 1em;
       }
     }
-    .ngmp-movie-rating-container {
+    .ngma-movie-rating-container {
       flex-direction: column;
       span {
         display: block;
         margin-bottom: 1em;
       }
     }
-    .ngmp-movie-plot {
+    .ngma-movie-plot {
       max-width: 100%;
     }
   }
diff --git a/src/app/movie-detail/movie-detail.component.spec.ts b/src/app/movie-detail/movie-detail.component.spec.ts
index f78c44b..48c5430 100644
--- a/src/app/movie-detail/movie-detail.component.spec.ts
+++ b/src/app/movie-detail/movie-detail.component.spec.ts
@@ -1,17 +1,26 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { ActivatedRoute } from "@angular/router";
 
-import { MovieDetailComponent } from './movie-detail.component';
+import { MovieDetailComponent } from "./movie-detail.component";
+import { MovieService } from "../movie/services/movie.services";
 
-describe('MovieDetailComponent', () => {
+describe("MovieDetailComponent", () => {
   let component: MovieDetailComponent;
   let fixture: ComponentFixture<MovieDetailComponent>;
-  
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ MovieDetailComponent ]
-    })
-    .compileComponents();
+      imports: [HttpClientTestingModule],
+      declarations: [MovieDetailComponent],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: { snapshot: { params: { id: 1 } } },
+        },
+        MovieService,
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -20,7 +29,7 @@ describe('MovieDetailComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it("should create", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/src/app/movie/movie.component.html b/src/app/movie/movie.component.html
index e3788b1..9b2bc6f 100644
--- a/src/app/movie/movie.component.html
+++ b/src/app/movie/movie.component.html
@@ -2,13 +2,13 @@
 <app-nav-menu (onNavMenuChange)="onNavMenuChange($event)" (showLoading)="showLoading($event)"></app-nav-menu>
 <app-loader [loading]="loading"></app-loader>
 
-<div class="ngmp-main-container">
-    <div *ngIf="movies; else elseBlock" class="ngmp-movies-container">
-        <div class="ngmp-movies-list-header">
-            <span class="ngmp-movies-count">
+<div class="ngma-main-container">
+    <div *ngIf="movies; else elseBlock" class="ngma-movies-container">
+        <div class="ngma-movies-list-header">
+            <span class="ngma-movies-count">
                 {{movies.length}} Movies
             </span>
-            <div class="ngmp-movies-sort"> Sort By:
+            <div class="ngma-movies-sort"> Sort By:
                 <select [(ngModel)]="sortBy" (change)="sortMovies()">
                     <option selected="true" disabled="disabled">Select</option>
                     <option value="Title">Title</option>
@@ -17,22 +17,22 @@
             </div>
         </div>
         <hr>
-        <div class="ngmp-movies-list">
-            <div *ngFor="let movie of movies" class="ngmp-movie">
+        <div class="ngma-movies-list">
+            <div *ngFor="let movie of movies" class="ngma-movie">
                 <a
                     [routerLink]="(movie.Poster === MOVIE_PROPS.NO_IMG_URL || null)? ['..'] :['/movies/' + movie.Type + '/' + movie.imdbID]">
                     <div *ngIf="(movie.Poster === MOVIE_PROPS.NO_IMG_URL || null);  else elseBlock"
-                        class="ngmp-noimageposter">
-                        <img src="assets/icons/notfound.svg" alt="search icon" class="ngmp-noimage">
+                        class="ngma-noimageposter">
+                        <img src="assets/icons/notfound.svg" alt="search icon" class="ngma-noimage">
                     </div>
                     <ng-template #elseBlock>
                         <figure>
-                            <img src="{{movie.Poster}}" alt="movie poster" class="ngmp-poster">
+                            <img src="{{movie.Poster}}" alt="movie poster" class="ngma-poster">
                         </figure>
                     </ng-template>
 
-                    <h3 class="ngmp-movie-title">{{movie.Title}}</h3>
-                    <div class="ngmp-movie-year">
+                    <h3 class="ngma-movie-title">{{movie.Title}}</h3>
+                    <div class="ngma-movie-year">
                         <img src="assets/icons/calender.svg" alt="movie poster" class="ngma-rateimg">
                         {{movie.Year}}
                     </div>
diff --git a/src/app/movie/movie.component.scss b/src/app/movie/movie.component.scss
index c99f2e4..3bd2c45 100644
--- a/src/app/movie/movie.component.scss
+++ b/src/app/movie/movie.component.scss
@@ -6,31 +6,31 @@
   flex-direction: column;
 }
 
-.ngmp-main-container {
+.ngma-main-container {
   display: flex;
   justify-content: flex-start;
   flex-direction: row;
 }
 
-.ngmp-movies-container {
+.ngma-movies-container {
   display: flex;
   justify-content: flex-start;
   flex-direction: column;
   width: 100%;
   max-height: 100vh;
 
-  .ngmp-movies-list-header {
+  .ngma-movies-list-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: row;
     padding: 1em;
 
-    .ngmp-movies-count {
+    .ngma-movies-count {
       color: $secondary-title;
     }
 
-    .ngmp-movies-sort {
+    .ngma-movies-sort {
       color: $primary-title;
       padding-right: 1em;
       font-size: 0.8em;
@@ -53,7 +53,7 @@
     opacity: 0.6;
   }
 
-  .ngmp-movies-list {
+  .ngma-movies-list {
     display: flex;
     justify-content: flex-start;
     flex-direction: row;
@@ -61,7 +61,7 @@
     padding: 1em;
   }
 
-  .ngmp-movie {
+  .ngma-movie {
     margin-bottom: 1em;
     flex-basis: 25%;
 
@@ -75,7 +75,7 @@
       &:hover {
         opacity: 0.7;
 
-        .ngmp-poster {
+        .ngma-poster {
           transform: scale(1.05);
         }
       }
@@ -87,18 +87,18 @@
       }
     }
 
-    .ngmp-poster {
+    .ngma-poster {
       transition: all 0.2s;
       display: block;
     }
 
-    .ngmp-movie-title,
-    .ngmp-movie-year {
+    .ngma-movie-title,
+    .ngma-movie-year {
       text-decoration: none;
       display: inline-block;
     }
 
-    .ngmp-movie-title {
+    .ngma-movie-title {
       color: $orange;
       margin: 15px 0 5px 42px;
       overflow: hidden;
@@ -107,7 +107,7 @@
       width: 300px;
     }
 
-    .ngmp-movie-year {
+    .ngma-movie-year {
       color: $grey;
       margin: 0;
       margin-left: 70px;
@@ -119,11 +119,11 @@
       margin-top: 0px;
       margin-left: -30px;
     }
-    .ngmp-noimageposter {
+    .ngma-noimageposter {
       text-align: center;
       height: 100px;
     }
-    .ngmp-noimage {
+    .ngma-noimage {
       text-align: center;
       height: 100px;
       margin-right: 100px;
@@ -170,13 +170,13 @@
         &:hover {
           opacity: 0.7;
 
-          .ngmp-poster {
+          .ngma-poster {
             transform: scale(1.05);
           }
         }
       }
 
-      .ngmp-poster {
+      .ngma-poster {
         transition: all 0.2s;
         display: block;
       }
diff --git a/src/app/movie/movie.component.spec.ts b/src/app/movie/movie.component.spec.ts
index 4b78a9e..55eb3c2 100644
--- a/src/app/movie/movie.component.spec.ts
+++ b/src/app/movie/movie.component.spec.ts
@@ -1,6 +1,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from "@angular/common/http/testing";
 
 import { MovieComponent } from './movie.component';
+import { MovieService } from "../movie/services/movie.services";
 
 describe('MovieComponent', () => {
   let component: MovieComponent;
@@ -8,7 +10,9 @@ describe('MovieComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ MovieComponent ]
+      imports: [HttpClientTestingModule],
+      declarations: [ MovieComponent ],
+      providers: [MovieService]
     })
     .compileComponents();
   }));
diff --git a/src/app/movie/services/movies.service.spec.ts b/src/app/movie/services/movies.service.spec.ts
index ebf3315..37895b4 100644
--- a/src/app/movie/services/movies.service.spec.ts
+++ b/src/app/movie/services/movies.service.spec.ts
@@ -10,7 +10,8 @@ import { dataSet1, dataSet2 } from "../test-data/sample-data";
 
 describe("Movie Service", () => {
   let httpTestingController: HttpTestingController;
-  let service: MovieService;
+  let movieService: MovieService;
+  let httpClientSpy: { get: jasmine.Spy };
 
   const movies = [dataSet1, dataSet2];
   const moviesEndpoint = `${API_CONIG.API_ENDPOINT}?apikey=${API_CONIG.API_KEY}`;
@@ -22,27 +23,38 @@ describe("Movie Service", () => {
     });
 
     httpTestingController = TestBed.get(HttpTestingController);
-    service = TestBed.get(MovieService);
+    movieService = TestBed.get(MovieService);
   });
 
-  describe("getMovies", () => {
-    it("should call get method to retrieve all movies initial time", () => {
-      service.getMovies().subscribe((movies) => {
-        expect(movies[1].Title).toEqual("The Avenger");
-      });
-    });
-  });
-
-  describe("getMovieById", () => {
-    it("should call get method to retrieve the movie by id", () => {
-      service.getMovieById(movies[0]["imdbID"]).subscribe((data:any) => {
-        expect(data['Title']).toEqual(movies[0].Title);
-      });
-
-      const req = httpTestingController.expectOne(`${moviesEndpoint}&i=${movies[0]["imdbID"]}&plot=full`);
-      // console.log(req);
-      // req.flush(movies[0]);
-      // httpTestingController.verify();
-    });
+  beforeEach(() => {
+    // TODO: spy on other methods too
+    httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
+    movieService = new MovieService(<any> httpClientSpy);
   });
-});
+  
+  // it('should return expected heroes (HttpClient called once)', () => {
+    
+  //   httpClientSpy.get.and.returnValue(asyncData(movies[0]));
+  
+  //   heroService.getHeroes().subscribe(
+  //     heroes => expect(heroes).toEqual(expectedHeroes, 'expected heroes'),
+  //     fail
+  //   );
+  //   expect(httpClientSpy.get.calls.count()).toBe(1, 'one call');
+  // });
+  
+  // it('should return an error when the server returns a 404', () => {
+  //   const errorResponse = new HttpErrorResponse({
+  //     error: 'test 404 error',
+  //     status: 404, statusText: 'Not Found'
+  //   });
+  
+  //   httpClientSpy.get.and.returnValue(asyncError(errorResponse));
+  
+  //   heroService.getHeroes().subscribe(
+  //     heroes => fail('expected an error, not heroes'),
+  //     error  => expect(error.message).toContain('test 404 error')
+  //   );
+  // });
+
+});
\ No newline at end of file
diff --git a/src/app/nav-menu/nav-menu.component.spec.ts b/src/app/nav-menu/nav-menu.component.spec.ts
index c6e15c5..64522ff 100644
--- a/src/app/nav-menu/nav-menu.component.spec.ts
+++ b/src/app/nav-menu/nav-menu.component.spec.ts
@@ -1,6 +1,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from "@angular/common/http/testing";
 
 import { NavMenuComponent } from './nav-menu.component';
+import { MovieService } from "../movie/services/movie.services";
 
 describe('NavMenuComponent', () => {
   let component: NavMenuComponent;
@@ -8,7 +10,9 @@ describe('NavMenuComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ NavMenuComponent ]
+      imports: [HttpClientTestingModule],
+      declarations: [ NavMenuComponent ],
+      providers: [MovieService]
     })
     .compileComponents();
   }));
diff --git a/src/app/no-data/no-data.component.html b/src/app/no-data/no-data.component.html
index f799b9c..57286cf 100644
--- a/src/app/no-data/no-data.component.html
+++ b/src/app/no-data/no-data.component.html
@@ -1 +1 @@
-<div class="ngmp-nodata">No movies found</div>
+<div class="ngma-nodata">No movies found</div>
diff --git a/src/app/no-data/no-data.component.scss b/src/app/no-data/no-data.component.scss
index 0955b35..53b3fe2 100644
--- a/src/app/no-data/no-data.component.scss
+++ b/src/app/no-data/no-data.component.scss
@@ -1,5 +1,5 @@
 @import "variables";
-.ngmp-nodata {
+.ngma-nodata {
     color: $grey;
     position: absolute;
     top: 50%;
diff --git a/src/app/search-bar/search-bar.component.html b/src/app/search-bar/search-bar.component.html
index 0f32234..9b97e70 100644
--- a/src/app/search-bar/search-bar.component.html
+++ b/src/app/search-bar/search-bar.component.html
@@ -1,4 +1,4 @@
-<div class="ngmp-search-bar">
+<div class="ngma-search-bar">
     <img src="assets/icons/search.svg" alt="search icon">
     <input [(ngModel)]="searchText" name="searchText" type="search" placeholder="Search movie here " aria-label="Search"
         (keyup.enter)="onEnter()" autocomplete="off">
diff --git a/src/app/search-bar/search-bar.component.scss b/src/app/search-bar/search-bar.component.scss
index 0f3e662..acad4b8 100644
--- a/src/app/search-bar/search-bar.component.scss
+++ b/src/app/search-bar/search-bar.component.scss
@@ -1,6 +1,6 @@
 @import "variables";
 
-.ngmp-search-bar {
+.ngma-search-bar {
   position: relative;
 
   input {
diff --git a/src/app/search-bar/search-bar.component.spec.ts b/src/app/search-bar/search-bar.component.spec.ts
index ce49237..858354f 100644
--- a/src/app/search-bar/search-bar.component.spec.ts
+++ b/src/app/search-bar/search-bar.component.spec.ts
@@ -1,17 +1,19 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
 
-import { SearchBarComponent } from './search-bar.component';
+import { SearchBarComponent } from "./search-bar.component";
+import { MovieService } from "../movie/services/movie.services";
 
-describe('SearchBarComponent', () => {
+describe("SearchBarComponent", () => {
   let component: SearchBarComponent;
   let fixture: ComponentFixture<SearchBarComponent>;
 
-  
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SearchBarComponent ]
-    })
-    .compileComponents();
+      imports: [HttpClientTestingModule],
+      declarations: [SearchBarComponent],
+      providers: [MovieService]
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -20,7 +22,7 @@ describe('SearchBarComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it("should create", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/src/app/search-bar/search-bar.component.ts b/src/app/search-bar/search-bar.component.ts
index f22c704..ceb8046 100644
--- a/src/app/search-bar/search-bar.component.ts
+++ b/src/app/search-bar/search-bar.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit, Output, EventEmitter } from "@angular/core";
 
 import { MovieService } from "../movie/services/movie.services";
-
 import { Movie } from "../movie/models/movie.models";
 @Component({
   selector: "app-search-bar",