diff --git a/src/components/movieDetails.jsx b/src/components/movieDetails.jsx
index 10348b6..857918d 100644
--- a/src/components/movieDetails.jsx
+++ b/src/components/movieDetails.jsx
@@ -5,7 +5,6 @@ import { Row, Col } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import TitleAndContent from "./titleAndContent";
 
-
 class MovieDetails extends Component {
     constructor(props) {
         super(props);
@@ -59,31 +58,23 @@ class MovieDetails extends Component {
                     </Col>
                     <Col md={6} sm={12} >
                         <Row>
-                            <Col className="description">
-                                {movie.Rated}
-                            </Col>
-                            <Col className="description">
-                                {movie.Runtime}
-                            </Col>
-                            <Col className="description">
-                                {movie.Genre}
-                            </Col>
+                            <Col className="description">{movie.Rated}</Col>
+                            <Col className="description">{movie.Runtime}</Col>
+                            <Col className="description">{movie.Genre}</Col>
                         </Row>
                         <hr></hr>
                         <Row>
-                            <Col className="description">
-                                {movie.Plot}
-                            </Col>
+                            <Col className="description">{movie.Plot}</Col>
                         </Row>
-                        {this.displayTitledDataWithLine("Writer:", movie.Writer)}
+                        <TitleAndContent displayLine="true" title="Writer:" content={movie.Writer}></TitleAndContent>
                         <TitleAndContent title="Actors:" content={movie.Actors}></TitleAndContent>
                         <TitleAndContent title="Director:" content={movie.Director}></TitleAndContent>
                         <TitleAndContent title="Country:" content={movie.Country}></TitleAndContent>
-                        {this.displayTitledDataWithLine("Awards:", movie.Awards)}
+                        <TitleAndContent displayLine="true" title="Awards:" content={movie.Awards}></TitleAndContent>
                         <TitleAndContent title="Metascore:" content={movie.Metascore}></TitleAndContent>
                         <TitleAndContent title="Imdb Rating:" content={movie.imdbRating}></TitleAndContent>
                         <TitleAndContent title="Imdb Votes:" content={movie.imdbVotes}></TitleAndContent>
-                        {this.displayTitledDataWithLine("Box Office:", movie.BoxOffice)}
+                        <TitleAndContent displayLine="true" title="Box Office:" content={movie.BoxOffice}></TitleAndContent>
                         <TitleAndContent title="Production:" content={movie.Production}></TitleAndContent>
                     </Col>
                 </Row>
@@ -94,8 +85,6 @@ class MovieDetails extends Component {
             </>
         );
     }
-
 }
 
-export default MovieDetails;
-
+export default MovieDetails;
\ No newline at end of file
diff --git a/src/components/movies.jsx b/src/components/movies.jsx
index 782ed44..a49a8a6 100644
--- a/src/components/movies.jsx
+++ b/src/components/movies.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import MoviesTable from "./moviesTable";
 import restService from '../services/restService';
 import config from "../config.json";
@@ -6,89 +6,86 @@ import { Form, Row, Col } from "react-bootstrap";
 import { toast } from 'react-toastify';
 
 
-class Movies extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            movies: [],
-            totalMovies: 0,
-            isLoading: false,
-            didSearch: false,
-            movieSearchName: null,
-            movieYear: null,
-            lastPage: 1,
-            errors: {}
-        }
-    }
+export default function Movies(props) {
+    const [movies, setMovies] = useState([]);
+    const [totalMovies, setTotalMovies] = useState(0);
+    const [isLoading, setIsLoading] = useState(false);
+    const [didSearch, setDidSearch] = useState(false);
+    const [movieSearchName, setMovieSearchName] = useState(null);
+    const [movieYear, setMovieYear] = useState(null);
+    const [lastPage, setLastPage] = useState(1);
+    const [errors, setErrors] = useState([]);
 
-    validate() {
-        const errors = {};
-        const { movieSearchName, movieYear } = this.state;
+    function validate() {
+        const validationErrors = {};
 
-        if (movieSearchName.trim() === '')
-            errors.movieSearchName = "Name of movie is required";
+        if (!movieSearchName || movieSearchName.trim() === '')
+            validationErrors.movieSearchName = "Name of movie is required";
         if (movieYear && movieYear.trim().length > 0 && isNaN(parseInt(movieYear.trim()))) {
-            errors.movieYear = "Year is invalid";
+            validationErrors.movieYear = "Year is invalid";
         }
-        return errors;
+
+        return validationErrors;
     }
 
-    handleSubmit = event => {
+    const handleSubmit = event => {
         event.preventDefault();
-        const errors = this.validate();
-        this.setState({ errors });
-        for (let key in errors) {
-            toast.error(errors[key]);
+        const validationErrors = validate();
+        setErrors(validationErrors);
+        for (let key in validationErrors) {
+            toast.error(validationErrors[key]);
             return; // return on first error
         }
 
-        if (this.state.movieSearchName) {
-            this.performSearch(1)
+        if (movieSearchName) {
+            performSearch(1)
         }
     }
 
-    getMoreMovies = event => {
-        this.performSearch(this.state.lastPage + 1);
+    const getMoreMovies = event => {
+        performSearch(lastPage + 1);
     }
 
-    getUrl(page) {
-        let url = config.endpointBase + '&s=' + this.state.movieSearchName;
-        if (this.state.movieYear)
-            url += "&y=" + this.state.movieYear;
+    function getUrl(page) {
+        let url = config.endpointBase + '&s=' + movieSearchName;
+        if (movieYear)
+            url += "&y=" + movieYear;
         if (page > 1)
             url += "&page=" + page;
         return url;
     }
 
-
-    async performSearch(page) {
+    async function performSearch(page) {
         try {
-            this.setState({ isLoading: true });
-            const moviesRetrieved = await restService.get(this.getUrl(page));
-            if (page > 1)
-                this.setState({ movies: this.state.movies.concat(moviesRetrieved.data.Search), totalMovies: moviesRetrieved.data.totalResults });
+            setIsLoading(true);
+            const moviesRetrieved = await restService.get(getUrl(page));
+            if (page > 1) {
+                let holdMovies = movies.concat(moviesRetrieved.data.Search);
+                setMovies(holdMovies);
+            }
             else
-                this.setState({ movies: moviesRetrieved.data.Search, totalMovies: moviesRetrieved.data.totalResults });
-            this.setState({ isLoading: false, lastPage: page, didSearch: true });
+                setMovies(moviesRetrieved.data.Search);
+            setTotalMovies(moviesRetrieved.data.totalResults);
+            setIsLoading(false);
+            setDidSearch(true);
+            setLastPage(page);
         } catch (ex) {
-            this.setState({ isLoading: false });
+            setIsLoading(false);
             if (ex.response && ex.response.status === 404) {
                 alert("not found")
             }
         }
     }
 
-    handleChange = event => {
-        const { id, value } = event.target;
-        this.setState(prevState => ({
-            ...prevState,
-            [id]: value
-        }));
+    const handleTitleChange = event => {
+        setMovieSearchName(event.target.value);
     }
 
-    showMovies() {
-        const { totalMovies, movies } = this.state;
+    const handleYearChange = event => {
+        setMovieYear(event.target.value);
+    }
 
+    function showMovies() {
         return (
             <div className="row margin-top-40">
                 <div className="col">
@@ -99,24 +96,18 @@ class Movies extends Component {
         );
     }
 
-    render() {
-        const { isLoading, movies, totalMovies, movieSearchName, movieYear } = this.state;
-
-        return (
-            <>
-                {isLoading && <p>Loading...</p>}
-                <Form onSubmit={this.handleSubmit}>
-                    <Row>
-                        <Col className="searchControl" md={8} sm={6} xs={8}><Form.Control id="movieSearchName" onChange={this.handleChange} value={movieSearchName || ""} placeholder="Search for any movie" /></Col>
-                        <Col className="searchControl" md={2} sm={3} xs={4}><Form.Control id="movieYear" onChange={this.handleChange} value={movieYear || ""} placeholder="Year" /></Col>
-                        <Col className="searchControlButton" md={2} sm={3} xs={12}><button disabled={isLoading || !(movieSearchName && movieSearchName.length)} className=" btn-custom wideButton" type="submit">Search</button></Col>
-                    </Row>
-                </Form >
-                {this.state.didSearch ? this.showMovies() : null}
-                {movies && movies.length > 0 && movies.length < totalMovies ? <button className="btn-custom margin-top-10" onClick={this.getMoreMovies}>Show More Movies</button> : null}
-            </>
-        );
-    }
+    return (
+        <>
+            {isLoading && <p>Loading...</p>}
+            <Form onSubmit={handleSubmit}>
+                <Row>
+                    <Col className="searchControl" md={8} sm={6} xs={8}><Form.Control id="movieSearchName" onChange={handleTitleChange} value={movieSearchName || ""} placeholder="Search for any movie" /></Col>
+                    <Col className="searchControl" md={2} sm={3} xs={4}><Form.Control id="movieYear" onChange={handleYearChange} value={movieYear || ""} placeholder="Year" /></Col>
+                    <Col className="searchControlButton" md={2} sm={3} xs={12}><button disabled={isLoading || !(movieSearchName && movieSearchName.length)} className=" btn-custom wideButton" type="submit">Search</button></Col>
+                </Row>
+            </Form >
+            {didSearch ? showMovies() : null}
+            {movies && movies.length > 0 && movies.length < totalMovies ? <button className="btn-custom margin-top-10" onClick={getMoreMovies}>Show More Movies</button> : null}
+        </>
+    );
 }
-
-export default Movies;
diff --git a/src/components/moviesTable.jsx b/src/components/moviesTable.jsx
index 36401c4..35e1a29 100644
--- a/src/components/moviesTable.jsx
+++ b/src/components/moviesTable.jsx
@@ -1,27 +1,22 @@
-import React, { Component } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 
-class MoviesTable extends Component {
-    render() {
-        const { movies } = this.props;
-
-        return (
-            <div className="row">
-                {movies.map(movie => (
-                    <div key={movie.imdbID} className="col-xs-12 col-sm-6 col-md-4 col-lg-3 movieListEntry">
-                        <Link to={'/movies/' + movie.imdbID}>
-                            <img loading="lazy" onError={this.setDefaultSource} className="movieListImage" src={movie.Poster} alt={"Movie poster for " + movie.Title}></img>
-                            <h4 className="movieListTitle">{movie.Title} {"(" + movie.Year + ")"}</h4>
-                        </Link>
-                    </div>
-                ))}
-            </div>
-        );
-    }
-
-    setDefaultSource(event) {
+export default function MoviesTable(props) {
+    function setDefaultSource(event) {
         event.target.src = "../../noimage.png";
     }
-}
+    const { movies } = props;
 
-export default MoviesTable;
+    return (
+        <div className="row">
+            {movies.map(movie => (
+                <div key={movie.imdbID} className="col-xs-12 col-sm-6 col-md-4 col-lg-3 movieListEntry">
+                    <Link to={'/movies/' + movie.imdbID}>
+                        <img loading="lazy" onError={setDefaultSource} className="movieListImage" src={movie.Poster} alt={"Movie poster for " + movie.Title}></img>
+                        <h4 className="movieListTitle">{movie.Title} {"(" + movie.Year + ")"}</h4>
+                    </Link>
+                </div>
+            ))}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/titleAndContent.jsx b/src/components/titleAndContent.jsx
index 84f2838..4c1c5c1 100644
--- a/src/components/titleAndContent.jsx
+++ b/src/components/titleAndContent.jsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { Row, Col } from "react-bootstrap";
 
-
 export default function TitleAndContent(props) {
     return (
         <>
+            {props.displayLine && <hr></hr>}
             <Row>
                 <Col lg={3} md={4} xs={6} className="title">
                     {props.title}
diff --git a/src/services/restService.js b/src/services/restService.js
index 55ad5da..c4de1ed 100644
--- a/src/services/restService.js
+++ b/src/services/restService.js
@@ -1,10 +1,10 @@
 import axios from 'axios';
 import { toast } from 'react-toastify';
-import logger from "./loggerService";
+import { error } from "./loggerService";
 
 axios.interceptors.response.use(null, error => {
     if (!error.response || error.response.status < 400 || error.response.status >= 500) {
-        logger.error("Error getting movies from server - " + error);
+        error("Error getting movies from server - " + error);
         toast.error("an unexpected error happened");
     }
     return Promise.reject(error);