diff --git a/src/axios-movies.js b/src/axios-movies.js
new file mode 100644
index 0000000..38399e5
--- /dev/null
+++ b/src/axios-movies.js
@@ -0,0 +1,8 @@
+import axios from 'axios'; 
+
+/** base url to make requests to the the movie database */
+const instance = axios.create({
+  baseURL: "https://api.themoviedb.org/3"
+});
+
+export default instance; 
\ No newline at end of file
diff --git a/src/components/ModalMovieDetails/ModalMovieDetails.js b/src/components/ModalMovieDetails/ModalMovieDetails.js
new file mode 100644
index 0000000..c851d18
--- /dev/null
+++ b/src/components/ModalMovieDetails/ModalMovieDetails.js
@@ -0,0 +1,41 @@
+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 ModalMovieDetails extends Component {
+
+
+   render() {
+      
+      return <Aux>
+          <div className="modal__container">
+            <h1 className="modal__title">
+              {this.props.movie.title || this.props.movie.name}
+            </h1>
+            <p className="modal__info">
+              <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
+            </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 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>;
+   }
+}
+
+export default ModalMovieDetails; 
\ No newline at end of file
diff --git a/src/containers/MovieGenreRow/MovieGenreImage.js b/src/containers/MovieGenreRow/MovieGenreImage.js
new file mode 100644
index 0000000..0ad8bd3
--- /dev/null
+++ b/src/containers/MovieGenreRow/MovieGenreImage.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+ 
+
+class MovieGenreImage extends Component {
+
+
+   render() {
+      let netflixUrl = false; 
+
+      if (this.props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
+        netflixUrl = true; 
+      }
+
+      return (
+        
+         <div onClick={this.props.movieDetailsModal} 
+            className={ "movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
+            <img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/>
+         </div>
+
+      ); 
+   }
+}
+
+export default MovieGenreImage; 
\ No newline at end of file
diff --git a/src/static/sass/base/_typography.scss b/src/static/sass/base/_typography.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/static/sass/layout/_navigation.scss b/src/static/sass/layout/_navigation.scss
index 621ccfe..4a19baa 100644
--- a/src/static/sass/layout/_navigation.scss
+++ b/src/static/sass/layout/_navigation.scss
@@ -256,7 +256,7 @@
 }
 
 .pseudo-link {
-
+   cursor: pointer;
    @include responsive(tab_port) {
       display: none;
    }
diff --git a/src/static/sass/style.scss b/src/static/sass/style.scss
index 10c935f..fdb061d 100644
--- a/src/static/sass/style.scss
+++ b/src/static/sass/style.scss
@@ -4,7 +4,6 @@
 
 @import "base/animations";
 @import "base/base";
-@import "base/typography";
 @import "base/utils";
 
 @import "components/backdrop";