diff --git a/components/App/index.js b/components/App/index.js
index 2d82b62..c85a688 100644
--- a/components/App/index.js
+++ b/components/App/index.js
@@ -4,13 +4,11 @@ import Header from '../Header';
 import LoginContainer from '../LoginContainer';
 import styles from './styles.scss';
 
-const App = () => {
-  return(
-      <div className="app">
-        <Header className="header"/>
-        <LoginContainer />
-      </div>
-  );
-}
+const App = () => (
+  <div className={styles.app}>
+    <Header />
+    <LoginContainer />
+  </div>
+);
 
 export default App;
diff --git a/components/Categories/English/index.js b/components/Categories/English/index.js
index a0597bc..ba7f5f5 100644
--- a/components/Categories/English/index.js
+++ b/components/Categories/English/index.js
@@ -1,40 +1,45 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import EnglishMovies from './EnglishMovies';
 import styles from './styles.scss';
 
 class English extends Component {
-  constructor(props){
+  constructor(props) {
     super(props);
     this.state = {
       documentary: false,
       drama: false,
       movie: false,
       variety: false
-    }
+    };
   }
 
   componentWillReceiveProps(nextProps) {
-    if(this.props.genre !== nextProps.genre) {
-      const genre = nextProps.genre;
-      var updatedState = {
+    if (this.props.genre !== nextProps.genre) {
+      const { genre } = nextProps;
+      const updatedState = {
         documentary: false,
         drama: false,
         movie: false,
-        variety: false
+        variety: false,
       };
 
       switch (genre) {
-        case "documentary": updatedState.documentary = true;
+        case 'documentary':
+          updatedState.documentary = true;
           break;
 
-        case "drama": updatedState.drama = true;
+        case 'drama':
+          updatedState.drama = true;
           break;
 
-        case "movie": updatedState.movie = true;
+        case 'movie':
+          updatedState.movie = true;
           break;
 
-        case "variety": updatedState.variety = true;
+        case 'variety':
+          updatedState.variety = true;
           break;
 
         default:
@@ -46,19 +51,20 @@ class English extends Component {
   }
 
   render() {
-    if(this.props.render)
-    {
-      return(
-        <div>
-          <h1>English</h1>
-          <EnglishMovies render={this.state.movie} />
-        </div>
-      );
-    }
-    else {
-      return <div></div>;
-    }
+    return this.props.render ? (
+      <div>
+        <h1>English</h1>
+        <EnglishMovies render={this.state.movie} />
+      </div>
+    ) : (
+      <div />
+    );
   }
 }
 
+English.propTypes = {
+  genre: PropTypes.string.isRequired,
+  render: PropTypes.bool.isRequired,
+};
+
 export default English;
diff --git a/components/Categories/Korean/index.js b/components/Categories/Korean/index.js
index a16d36a..4936921 100644
--- a/components/Categories/Korean/index.js
+++ b/components/Categories/Korean/index.js
@@ -1,64 +1,70 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import KoreanMovies from './KoreanMovies';
 import styles from './styles.scss';
 
 class Korean extends Component {
-  constructor(props){
+  constructor(props) {
     super(props);
     this.state = {
       documentary: false,
       drama: false,
       movie: false,
-      variety: false
-    }
+      variety: false,
+    };
   }
 
   componentWillReceiveProps(nextProps) {
-    if(this.props.genre !== nextProps.genre) {
-      const genre = nextProps.genre;
-      var updatedState = {
+    if (this.props.genre !== nextProps.genre) {
+      const { genre } = nextProps;
+      const updatedState = {
         documentary: false,
         drama: false,
         movie: false,
-        variety: false
+        variety: false,
       };
 
       switch (genre) {
-        case "documentary": updatedState.documentary = true;
+        case 'documentary':
+          updatedState.documentary = true;
           break;
 
-        case "drama": updatedState.drama = true;
+        case 'drama':
+          updatedState.drama = true;
           break;
 
-        case "movie": updatedState.movie = true;
+        case 'movie':
+          updatedState.movie = true;
           break;
 
-        case "variety": updatedState.variety = true;
+        case 'variety':
+          updatedState.variety = true;
           break;
 
         default:
           break;
       }
-      
+
       this.setState(updatedState);
     }
   }
 
   render() {
-    if(this.props.render)
-    {
-      return(
-        <div>
-          <h1>Korean</h1>
-          <KoreanMovies render={this.state.movie} />
-        </div>
-      );
-    }
-    else {
-      return <div></div>;
-    }
+    return this.props.render ? (
+      <div>
+        <h1>Korean</h1>
+        <KoreanMovies render={this.state.movie} />
+      </div>
+    ) : (
+      <div />
+    );
   }
 }
 
+Korean.propTypes = {
+  genre: PropTypes.string.isRequired,
+  render: PropTypes.bool.isRequired,
+};
+
 export default Korean;
diff --git a/components/CategoryTags/index.js b/components/CategoryTags/index.js
index 5ffb8f9..4412db6 100644
--- a/components/CategoryTags/index.js
+++ b/components/CategoryTags/index.js
@@ -10,104 +10,92 @@ class CategoryTags extends Component {
     this.state = {
       tags: [],
       suggestions: [
-        { id: 0, name: "English" },
-        { id: 2, name: "Japanese"},
-        { id: 4, name: "Korean"},
-        { id: 6, name: "Tamil"}
+        { id: 0, name: 'English' },
+        { id: 2, name: 'Japanese' },
+        { id: 4, name: 'Korean' },
+        { id: 6, name: 'Tamil' },
       ],
       languages: [
-        { id: 0, name: "English" },
-        { id: 2, name: "Japanese"},
-        { id: 4, name: "Korean"},
-        { id: 6, name: "Tamil"}
+        { id: 0, name: 'English' },
+        { id: 2, name: 'Japanese' },
+        { id: 4, name: 'Korean' },
+        { id: 6, name: 'Tamil' },
       ],
       genres: [
-        { id: 1, name: "Documentary"},
-        { id: 3, name: "Drama"},
-        { id: 5, name: "Movie" },
-        { id: 7, name: "Variety"}
-      ]
-
-    }
+        { id: 1, name: 'Documentary' },
+        { id: 3, name: 'Drama' },
+        { id: 5, name: 'Movie' },
+        { id: 7, name: 'Variety' },
+      ],
+    };
 
     this.handleDelete = (i) => {
-      if(this.state.tags.length > 0) {
+      if (this.state.tags.length > 0) {
         const tag = this.state.tags[i];
         const tags = this.state.tags.slice(0);
         tags.splice(i, 1);
         this.setState({ tags });
 
+        if (tag.id % 2 === 0) {
+          // language list
+          const { languages } = this.state;
+          const suggestions = this.state.languages;
+          languages[languages.indexOf(tag)].disabled = false;
+          this.setState({ languages });
+          this.setState({ suggestions });
+        } else {
+          // genre list
+          const { genres } = this.state;
+          let suggestions = this.state.genres;
 
-
-          if(tag.id % 2 == 0) {     // language list
-            var languages = this.state.languages;
-            const suggestions = this.state.languages;
-            languages[myIndexOf(languages, tag)].disabled = false;
-            this.setState({ languages });
-            this.setState({ suggestions });
+          // reset suggestions back to languages when last tag removed
+          if (tags.length === 0) {
+            suggestions = this.state.languages;
           }
-          else {                    // genre list
-            var genres = this.state.genres;
-            var suggestions = this.state.genres;
 
-            // reset suggestions back to languages when last tag removed
-            if (tags.length == 0)
-              suggestions = this.state.languages;
-
-            genres[myIndexOf(genres, tag)].disabled = false;
-            this.setState({ genres });
-            this.setState({ suggestions });
-          }
+          genres[genres.indexOf(tag)].disabled = false;
+          this.setState({ genres });
+          this.setState({ suggestions });
         }
-      else {
-        console.log("Nothing to delete.");
+      } else {
+        console.log('Nothing to delete.');
       }
-    }
+    };
 
     this.handleAddition = (tag) => {
-      if(this.state.tags.length < 2) {
+      if (this.state.tags.length < 2) {
         const tags = [].concat(this.state.tags, tag);
         this.setState({ tags });
 
-        if(tag.id % 2 == 0) {
-          var languages = this.state.languages;
+        if (tag.id % 2 === 0) {
+          const { languages } = this.state;
           const suggestions = this.state.genres;
-          languages[myIndexOf(languages, tag)].disabled = true;
+          languages[languages.findIndex(tag)].disabled = true;
           this.setState({ languages });
           this.setState({ suggestions });
-        }
-        else {
-          var genres = this.state.genres;
+        } else {
+          const { genres } = this.state;
           const suggestions = this.state.languages;
-          genres[myIndexOf(genres, tag)].disabled = true;
+          genres[genres.indexOf(tag)].disabled = true;
           this.setState({ genres });
           this.setState({ suggestions });
         }
       }
 
-      if(this.state.tags.length == 1) {
+      if (this.state.tags.length === 1) {
         const suggestions = [];
         this.setState({ suggestions });
       }
     }
-
-    function myIndexOf(arr, obj) {
-      for (var i = 0; i < arr.length; i++) {
-        if (arr[i].id == obj.id && arr[i].name == obj.name) {
-          return i;
-        }
-      }
-      return -1;
-    }
   }
   render() {
-    return(
+    return (
       <div>
         <div>Categories</div>
         <ReactTags
-          autofocus={true}
+          autofocus
           autoresize={false}
-          className="reactTags"
+          className={styles['react-tags']}
           handleAddition={this.handleAddition}
           handleDelete={this.handleDelete}
           handleInputChange={this.handleInputChange}
diff --git a/components/Content/index.js b/components/Content/index.js
index 3ea434a..39c600f 100644
--- a/components/Content/index.js
+++ b/components/Content/index.js
@@ -1,38 +1,40 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import CategoryTags from '../CategoryTags';
 import styles from './styles.scss';
 
 class Content extends Component {
-  constructor(props){
+  constructor(props) {
     super(props);
-    this.state = { emptyList: true };
-
-    this.handleSignOut = (e) => {
-      this.props.onSignOut(e);
-    }
+    this.state = {
+      emptyList: true,
+    };
   }
 
   render() {
-    if(this.state.emptyList) {
-      return(
-        <div className="content" id="content">
-          <h1>Looks like you're new! Select your favourite category from below.</h1>
-          <CategoryTags />
-          <div id='logoutBtn' className="logout" href="#" onClick={this.handleSignOut}>Sign out</div>
-        </div>
-      );
-    }
-    else {
-      return(
-          <div className="content" id="content">
-            <div>your watched list</div>
-            <div id='logoutBtn' className="logout" href="#" onClick={this.handleSignOut}>Sign out</div>
-          </div>
-      );
-    }
-
+    return (
+      <div className={styles.content} id="content">
+        {
+          this.state.emptyList ? (
+            <div>
+              <h1>Looks like you&#39;re new! Select your favourite category from below.</h1>
+              <CategoryTags />
+            </div>
+          ) : (
+            <div>
+              <h1>your watched list</h1>
+            </div>
+          )
+        }
+        <div id="logoutBtn" className={styles.logout} href="#" onClick={this.props.onSignOut}>Sign out</div>
+      </div>
+    );
   }
 }
 
+Content.propTypes = {
+  onSignOut: PropTypes.func.isRequired,
+};
+
 export default Content;
diff --git a/components/Header/index.js b/components/Header/index.js
index 50f141c..a1de0b4 100644
--- a/components/Header/index.js
+++ b/components/Header/index.js
@@ -1,16 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import styles from './styles.scss';
 
-class Header extends Component {
-
-  render() {
-    return (
-      <div className="header">
-        <h1>Watched</h1>
-      </div>
-    );
-  }
-}
+const Header = () => (
+  <div className={styles.header}>
+    <h1>Watched</h1>
+  </div>
+);
 
 export default Header;
diff --git a/components/Login/index.js b/components/Login/index.js
index 643ca20..9d3a64b 100644
--- a/components/Login/index.js
+++ b/components/Login/index.js
@@ -1,24 +1,23 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import GoogleLogin from 'react-google-login';
 
 import styles from './styles.scss';
 
-class Login extends Component {
-  render() {
-    return (
-      <div>
-        <div className="loginBtn">
-          <GoogleLogin
-            className="g-signin2"
-            clientId={process.env.GOOGLE_CLIENT_ID}
-            onSuccess={(googleUser) => {this.props.onSignIn(googleUser);}}
-            tag="div"
-            scope="https://www.googleapis.com/auth/drive.appfolder"
-          />
-        </div>
-      </div>
-    );
-  }
-}
+const Login = (props) => (
+  <div className={styles.loginBtn}>
+    <GoogleLogin
+      className={styles['g-signin2']}
+      clientId={process.env.GOOGLE_CLIENT_ID}
+      onSuccess={(googleUser) => { props.onSignIn(googleUser); }}
+      tag="div"
+      scope="https://www.googleapis.com/auth/drive.appfolder"
+    />
+  </div>
+);
+
+Login.propTypes = {
+  onSignIn: PropTypes.func.isRequired,
+};
 
 export default Login;
diff --git a/components/Login/styles.scss b/components/Login/styles.scss
index 041d022..76a4a86 100644
--- a/components/Login/styles.scss
+++ b/components/Login/styles.scss
@@ -7,10 +7,10 @@ input, button {
   left: 50%;
   margin-left: -100px;
   position: absolute;
-}
 
-.g-signin2 {
-  display: block;
-  margin: 0 auto;
-  width: 50%;
+  .g-signin2 {
+    display: block;
+    margin: 0 auto;
+    width: 50%;
+  }
 }
diff --git a/components/LoginContainer/index.js b/components/LoginContainer/index.js
index 2b721ad..1d7df4f 100644
--- a/components/LoginContainer/index.js
+++ b/components/LoginContainer/index.js
@@ -9,31 +9,28 @@ class LoginContainer extends Component {
     super(props);
     this.state = { isLogin: false };
 
-    this.onSignIn = (googleUser) => {
-      if(!this.state.isLogin) {
-
-        this.setState({isLogin: true});
-
-        console.log('User signed in.')
+    this.onSignIn = () => {
+      if (!this.state.isLogin) {
+        this.setState({ isLogin: true });
+        console.log('User signed in.');
       }
-    }
+    };
 
-    this.onSignOut = (e) => {
-      var auth2 = gapi.auth2.getAuthInstance();
+    this.onSignOut = () => {
+      const auth2 = window.gapi.auth2.getAuthInstance();
       auth2.signOut().then(() => {
-
-        this.setState({isLogin: false});
-
+        this.setState({ isLogin: false });
         console.log('User signed out.');
       });
-    }
+    };
   }
 
   render() {
-    if(this.state.isLogin)
-      return <Content onSignOut={this.onSignOut} />
-    else
-      return <Login onSignIn={this.onSignIn} />
+    return this.state.isLogin ? (
+      <Content onSignOut={this.onSignOut} />
+    ) : (
+      <Login onSignIn={this.onSignIn} />
+    );
   }
 }
 
diff --git a/package.json b/package.json
index a73e792..e90f2b1 100644
--- a/package.json
+++ b/package.json
@@ -12,11 +12,11 @@
   "license": "ISC",
   "dependencies": {
     "babel-core": "^6.26.0",
-    "dotenv": "^6.0.0",
     "express": "^4.16.2",
     "google-images": "^2.1.0",
     "graceful-fs": "^4.1.11",
     "parcel-bundler": "^1.8.1",
+    "prop-types": "^15.6.1",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-google-login": "^3.0.2",
diff --git a/yarn.lock b/yarn.lock
index 8f33bed..c5af3b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1738,10 +1738,6 @@ dotenv@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
 
-dotenv@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.0.0.tgz#24e37c041741c5f4b25324958ebbc34bca965935"
-
 duplexer2@~0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"