diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index be718f3..56362fe 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -8,17 +8,22 @@ class Header extends Component {
   render() {
 
     const backgroundStyle = {
-      transform: "scaleY(-45rem)",
-      backgroundPosition: "center",
+     
+      // backgroundPosition: "center fixed",
+      // backgroundPosition: "center",
+      // backgroundAttachment: "fixed",
+    
       backgroundSize: "cover",
-      backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`
+      backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`,
+       backgroundPosition: "center",
     }
 
     return (
       <header style={backgroundStyle} className="header">
+
           <div className="header__container">
               <h1 className="header__container-heading">{this.props.movie.name}</h1>
-          <button onClick={() => alert("not a moive!")} className="header__container-btnPlay">
+          <button onClick={() => alert("not a movie!")} className="header__container-btnPlay">
             <PlayLogo className="header__container-btnMyList-play" />
             Play
           </button>
@@ -28,8 +33,8 @@ class Header extends Component {
           </button>
               <p className="header__container-overview">{this.props.movie.overview}</p>
           </div>    
-    
-        </header>
+        <div className="header--fadeBottom"></div>
+      </header>
     )
 
   }
diff --git a/src/components/MovieRow/MovieSummary/MovieSummary.js b/src/components/MovieRow/MovieSummary/MovieSummary.js
index 70e229d..847aa34 100644
--- a/src/components/MovieRow/MovieSummary/MovieSummary.js
+++ b/src/components/MovieRow/MovieSummary/MovieSummary.js
@@ -1,12 +1,14 @@
 import React, { Component } from 'react'; 
 import Aux from '../../../hoc/Aux/Aux';
+import AddIcon from '../../../static/images/add.svg'; 
+import PlayIcon from '../../../static/images/play-button.svg'; 
  
 
 class MovieSummary extends Component {
 
 
    render() {
-
+      
       return <Aux>
           <div className="modal__container">
             <h1 className="modal__title">
@@ -16,17 +18,22 @@ class MovieSummary extends Component {
               <span className="modal__rating">
                 Rating: {this.props.movie.vote_average * 10}%{" "}
               </span>
-              Release date: {this.props.movie.release_date || this.props.movie.first_air_date} Runtime: {this.props.movie.runtime || this.props.movie.episode_run_time }m
+              Release date: {this.props.movie.release_date || this.props.movie.first_air_date} Runtime:
+              {this.props.movie.runtime || this.props.movie.episode_run_time} m
             </p>
             <p className="modal__episode">
               {this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""}
               {this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""}
             </p>
             <p className="modal__overview">{this.props.movie.overview}</p>
-            <button>Play</button>
-            <button>My list</button>
-            <p>staring: mdf gglo bool emmy djf </p>
-            <p>Genres: mdf gglo bool emmy djf </p>
+            <button className="modal__btn modal__btn--red">
+              <PlayIcon className="modal__btn--icon" />
+              Play
+            </button>
+            <button className="modal__btn">
+              <AddIcon className="modal__btn--icon" />
+              My List
+            </button>
           </div>
         </Aux>;
    }
@@ -35,24 +42,5 @@ class MovieSummary extends Component {
 
 
 
-// const movieSummary = (props) => (
-
-//    <Aux>
-//       <div>
-//          <h1 className="modal__title">{props.movie.title || props.movie.name}</h1>
-//          <p className="modal__info">
-//             <span className="modal__rating">Rating: {props.movie.vote_average * 10}%  </span> 
-//             Release date: {props.movie.release_date || props.movie.first_air_date}  Runtime: {props.movie.runtime  || props.movie.episode_run_time}m
-//          </p>
-//          <p className="modal__episode">{props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""} 
-//             {props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""}</p>
-//          <p className="modal__overview">{props.movie.overview}</p>
-//          <button>Play</button>  
-//          <button>My list</button>  
-//          <p>staring: mdf gglo bool emmy djf </p>
-//          <p>Genres: mdf gglo bool emmy djf </p>
-//       </div>
-//    </Aux>
-// ); 
 
 export default MovieSummary; 
\ No newline at end of file
diff --git a/src/containers/App.js b/src/containers/App.js
index fa30057..d616991 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -69,14 +69,17 @@ makeAipCall = (searchItem) => {
   /* Get the appropriate details for a specific movie that was clicked */
   selectMovieHandler = (movie) => {
     this.setState({toggleModal: true}); 
+
     let url; 
     if (movie.media_type === "movie") {
       const movieId = movie.id; 
+      console.log(movie.id); 
       url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
     } else if (movie.media_type === "tv") {
       const tvId = movie.id 
       url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
     }
+
     axios.get(url)
       .then(res => {
         console.log(res);
diff --git a/src/containers/Layout/Layout.js b/src/containers/Layout/Layout.js
index 7614766..9dca1da 100644
--- a/src/containers/Layout/Layout.js
+++ b/src/containers/Layout/Layout.js
@@ -7,44 +7,44 @@ import { BrowserRouter } from "react-router-dom";
 
 
 class Layout extends Component {
-
   state = {
     selectedMovie: {}
-  }
+  };
 
   componentDidMount = () => {
-    this.getMovie(); 
-  }
-  
-  // 71411
+    this.getMovie();
+  };
+
+
   getMovie = () => {
-    
-    const url = "https://api.themoviedb.org/3/tv/71411?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0";
-    axios.get(url) 
+    /**
+     * @param movieId narcos netflix series id 
+     */
+    const movieId = 63351;
+
+    const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
+    axios
+      .get(url)
       .then(res => {
-        const movieData = res.data; 
-        this.setState({ selectedMovie: movieData })
-
-      }).catch(error => {
-        console.log(error); 
+        const movieData = res.data;
+        this.setState({ selectedMovie: movieData });
       })
-  
-  }
+      .catch(error => {
+        console.log(error);
+      });
+  };
 
-
-   render() {
-
-
-      return (
+  render() {
+    return (
       <BrowserRouter>
-          <div className="container">
-            <Header movie={this.state.selectedMovie}/>
-            <MovieShowcase />
-            {/* <MovieOriginals /> */}
-           <Footer /> 
-          </div>
-        </BrowserRouter>)
-   }
+        <div className="container">
+          <Header movie={this.state.selectedMovie} />
+          <MovieShowcase />
+          <Footer />
+        </div>
+      </BrowserRouter>
+    );
+  }
 }
 
 export default Layout; 
\ No newline at end of file
diff --git a/src/containers/MovieShowcase/MovieShowcase.js b/src/containers/MovieShowcase/MovieShowcase.js
index 7f4ea1c..d49eb61 100644
--- a/src/containers/MovieShowcase/MovieShowcase.js
+++ b/src/containers/MovieShowcase/MovieShowcase.js
@@ -58,7 +58,7 @@ class MovieShowcase extends Component {
       }
       
       if (movie.poster_path && movie.backdrop_path !== null) {
-        console.log(movieImageUrl);
+       
         const movieComponent = <MovieShowCaseRow
           movieDetails={() => this.getMovieDetails(movie)}
           key={movie.id}
@@ -82,8 +82,9 @@ class MovieShowcase extends Component {
    
     axios.get(url)
       .then(res => {
-       
+        console.log(res);
         const movieRows = this.getMovieRows(res, url);
+        
         this.setState({ trendingMovieRow: movieRows });
       })
       .catch(error => {
@@ -114,7 +115,7 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-        
+        console.log(res);
         const movieRows = this.getMovieRows(res, url); 
         this.setState({ netflixOriginalsRow: movieRows }); 
       })
@@ -128,7 +129,7 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-        console.log(res);
+       console.log(res);
         const movieRows = this.getMovieRows(res, url);
         this.setState({ actionMovieRow: movieRows });
       })
@@ -142,7 +143,7 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-        console.log(res);
+       
         const movieRows = this.getMovieRows(res, url);
         this.setState({ comedyMovieRow: movieRows });
       })
@@ -156,7 +157,7 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-        console.log(res);
+      
         const movieRows = this.getMovieRows(res, url);
         this.setState({ horrorMovieRow: movieRows });
       })
@@ -170,7 +171,7 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-        console.log(res);
+      
         const movieRows = this.getMovieRows(res, url);
         this.setState({ romanceMovieRow: movieRows });
       })
@@ -184,7 +185,7 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-        console.log(res);
+       
         const movieRows = this.getMovieRows(res, url);
         this.setState({ animatedMovieRow: movieRows });
       })
@@ -198,7 +199,7 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-        console.log(res);
+      
         const movieRows = this.getMovieRows(res, url);
         this.setState({ documentaryRow: movieRows });
       })
@@ -212,7 +213,6 @@ class MovieShowcase extends Component {
 
       return (  
         <div className="movieShowcase">
-
           <h1 className="movieShowcase__heading">Netflix Originals</h1>
           <div className="movieShowcase__container">
             {this.state.netflixOriginalsRow}
diff --git a/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js b/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js
index 0086a85..34e4d01 100644
--- a/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js
+++ b/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js
@@ -7,24 +7,17 @@ class movieShowcaseRow extends Component {
    render() {
       let netflixUrl = false; 
 
-      const netflixStyle = {
-         height: "52rem",  
-      
-      }
-
       if (this.props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
         netflixUrl = true; 
       }
 
       return (
-         // style = { netflixUrl? netflixStyle : null}
-
+        
          <div onClick={this.props.movieDetails} 
             className={ "movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
             <img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/>
          </div>
 
-    
       ); 
    }
 }
diff --git a/src/static/sass/abstracts/_variables.scss b/src/static/sass/abstracts/_variables.scss
index e719366..2045475 100644
--- a/src/static/sass/abstracts/_variables.scss
+++ b/src/static/sass/abstracts/_variables.scss
@@ -1,13 +1,15 @@
 $color-dark: #171818;
-$color-background: #141414;
+$color-background: #111111;
 $color-background-modal: #000000;
 $color-white: rgb(221, 218, 218);
 
 $color-green: #1cb831; 
 $color-green-modal: rgb(92, 223, 92); 
 $color-modal-grey: rgb(172, 171, 171);
+$color-modal-grey-2: rgb(122, 122, 122);
 
 $color-red: #e21221;
+$color-red-2: #f80616de;
 
 $color-dark-blue: #082452;
 $color-light-blue: rgb(15, 61, 129);
diff --git a/src/static/sass/base/_base.scss b/src/static/sass/base/_base.scss
index 0392931..e3ce14f 100644
--- a/src/static/sass/base/_base.scss
+++ b/src/static/sass/base/_base.scss
@@ -58,6 +58,6 @@ html {
 .container {
 	
 	display: grid;      
-	grid-template-rows: 50vw min-content min-content min-content; 
+	grid-template-rows: min-content min-content min-content min-content; 
 	grid-template-columns:  4% repeat(10, 1fr) 4%;
 }
diff --git a/src/static/sass/components/_modal.scss b/src/static/sass/components/_modal.scss
index 6adcd2c..d6f2d3c 100644
--- a/src/static/sass/components/_modal.scss
+++ b/src/static/sass/components/_modal.scss
@@ -5,9 +5,17 @@
    top:  25%; 
    left: 0; 
    color: #fff;
-   height: 50rem;
+   height: 52rem;
    box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);
 
+   &__container {
+      background: linear-gradient(90deg, #000 50%, transparent);
+      width: 70%;
+      padding-top: 3rem;
+      height: 100%;
+      padding-left: 5rem;
+   }
+
    &__title {
       font-size: 4rem;
    }
@@ -37,11 +45,43 @@
    }
 
    &__overview {
-      color: $color-modal-grey;
+      color: $color-modal-grey-2;
       padding-top: 2rem;
       font-size: 2rem;
       hyphens: auto;
-      width: 60%;
+      width: 55%;
+      line-height: 1.2;
+   }
+
+   &__btn {
+      text-transform: uppercase;
+      font-weight: 500;
+      cursor: pointer;
+      background-color: transparent;
+      color: #fff;
+      border: .5px solid $color-modal-grey-2;
+      border-radius: 2px;
+      font-size: 1.5rem;
+      margin-top: 2rem;
+      margin-right: 1rem;
+      padding: 1rem 2rem 1rem 2rem;
+      transition: all .2s;
+
+      &:hover {
+         transform: scale(1.09); 
+      }
+
+      &--red {
+         background-color: $color-red-2;
+         border: none;
+      }
+
+      &--icon {
+         fill: #fff;
+         padding-right: 1rem;
+         height: 1.4rem;
+         width: 1.4rem;
+      }
    }
 }
 
@@ -54,10 +94,3 @@
    display: none;
 }
 
-.modal__container {
-   background: linear-gradient(90deg, #000 50%, transparent);
-   width: 70%;
-   padding-top: 3rem;
-   height: 100%;
-   padding-left: 3.5rem;
-}
\ No newline at end of file
diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss
index 5edc8b8..a788502 100644
--- a/src/static/sass/components/_movieShowcase.scss
+++ b/src/static/sass/components/_movieShowcase.scss
@@ -37,7 +37,7 @@
 
 
       &:hover > &--movie__netflix  {
-         transform: translate3d(-2rem, 0, 0); 
+         transform: translate3d(-1rem, 0, 0); 
       }
 
       &--movie__netflix:hover ~ &--movie__netflix {
@@ -71,7 +71,6 @@
          }
 
          &__netflix {
-            // width: 2rem;
             padding-top: 3rem;
             padding-bottom: 4rem;
             padding-right: 1rem;
diff --git a/src/static/sass/layout/_footer.scss b/src/static/sass/layout/_footer.scss
index 90b0682..cb041be 100644
--- a/src/static/sass/layout/_footer.scss
+++ b/src/static/sass/layout/_footer.scss
@@ -4,11 +4,6 @@
    padding-bottom: 4rem;
    grid-column: 1 / 13;
    text-align: center;
-   
-
-   // // &__container {
-   //    // display: grid;
-   //    // grid-template-columns: repeat(4, 1fr);
 
       &__copyright {
          color: #fff;
@@ -16,8 +11,8 @@
         
          &--link {
             text-decoration: none; 
-            color: #fff;
-             transition: all .3s;
+            color: $color-red-2;
+            transition: all .3s;
 
          }
 
diff --git a/src/static/sass/layout/_header.scss b/src/static/sass/layout/_header.scss
index 09c3dbf..243690c 100644
--- a/src/static/sass/layout/_header.scss
+++ b/src/static/sass/layout/_header.scss
@@ -1,9 +1,10 @@
 .header {
    background-color: $color-background;
    grid-column: 1 / 13;
-   display: flex; 
-  
+   height: 65rem;
+   display: inline-block;
    
+  
    &__container {
       padding-top: 20rem;
       padding-left: 4.5rem;
@@ -63,5 +64,19 @@
          font-size: 1.8rem;
       }
    }
+
+   &--fadeBottom {
+      
+   //  height: 65vw;
+   // height: 34rem;
+   // padding-top: 45rem;
+      // width: 100%;
+      // height: 20vh;
+      height: 27.4rem;
+      // padding-bottom: 100rem;
+   //  transform: translateY(-1rem);
+   
+    background-image: linear-gradient(180deg, transparent,rgba(37, 37, 37, 0.61), rgb(17, 17, 17));
+   }
 }