diff --git a/client/src/components/Movies.tsx b/client/src/components/Movies.tsx
index f686111db6905ac76c07c5a91ab49d48f2c0c80e..15dbb92010c619190301a18fa2cbc19fe9052cf5 100644
--- a/client/src/components/Movies.tsx
+++ b/client/src/components/Movies.tsx
@@ -1,18 +1,12 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import './movies.css';
 import PrintTable from "./PrintTable";
 import InfiniteScroll from "react-infinite-scroller";
 
 
-type MyProps = {};
-type MyState = {
-    movies: any,
-    lim: number
-};
-
 enum ColumnType{
     Id,
-    Title, 
+    Title,
     Genre,
     Rating,
     Year,
@@ -21,31 +15,27 @@ enum ColumnType{
     Description
 }
 
-class Movies extends React.Component<MyProps, MyState> {
-    constructor(props: any) {
-        super(props);
-
-        this.state = {
-            movies: [],
-            lim: 33
-        }
-    }
+function Movies(){
+    const [movies, setMovies] = useState([]);
 
+    useEffect(() => {
+        getAllMovies({lim: 13});
+    }, []);
 
-    getAllMoviesQuery = `
+    let getAllMoviesQuery = `
     query {
         getAllMovies(lim: 13) {
             id,title,genre,rating_dice_throw,year,director_first_name,director_last_name,description,cover_image
         }
     }`
-    createMovieQuery = `
+    let createMovieQuery = `
     mutation {
         createMovie(title: "testing", genre: "gaming", rating_dice_throw: 1, year: '2000', director_first_name: "torje", director_last_name: "the_gamer", description: "amazing", cover_image: "url123") {
             id
         }
     }`
 
-    generateAllMoviesQuery(lim: number){
+    function generateAllMoviesQuery(lim: number){
         return `
             query {
                 getAllMovies(lim: ${lim}) {
@@ -53,16 +43,15 @@ class Movies extends React.Component<MyProps, MyState> {
                 }
             }`
     }
-    
 
-    getAllMovies() {
-        this.queryFetch(this.generateAllMoviesQuery(this.state.lim), 'POST')
+
+    function getAllMovies(params: any) {
+        queryFetch(generateAllMoviesQuery(params.lim), 'POST')
         .then(res => res.json())
-        .then(res => this.setState({ movies: res.data.getAllMovies }))
-        .then(res => console.log(this.state.movies))
+        .then(res => setMovies(res.data.getAllMovies))
     }
 
-    generateQuery(columnType: ColumnType, value: string, neededData: string){
+    function generateQuery(columnType: ColumnType, value: string, neededData: string){
 
         let column = '';
 
@@ -91,7 +80,7 @@ class Movies extends React.Component<MyProps, MyState> {
             default:
                 column = 'id';
                 break;
-        
+
         }
 
         return `
@@ -102,21 +91,15 @@ class Movies extends React.Component<MyProps, MyState> {
         }`;
     }
 
-    getMovieByColumnType(columnType : ColumnType, value: string, neededData: string) {
-        this.queryFetch(this.generateQuery(columnType, value, neededData) , 'POST')
+    function getMovieByColumnType(columnType : ColumnType, value: string, neededData: string) {
+        queryFetch(generateQuery(columnType, value, neededData) , 'POST')
         .then(res => res.json())
-        .then(res => this.setState({ movies: res.data.getMovieByColumnType }))
-        .then(res => console.log(this.state.movies))
+        .then(res => setMovies(res.data.getMovieByColumnType))
     }
 
 
-    componentDidMount() {
-        this.getAllMovies();
-        //this.getMovieByColumnType(ColumnType.Genre, 'Drama', 'title genre year');
-    }
-
 
-    queryFetch(query: String, method: string) {
+    function queryFetch(query: String, method: string) {
         return fetch('/graphql', {
             method: method,
             headers: { "Content-Type": "application/json" },
@@ -128,11 +111,22 @@ class Movies extends React.Component<MyProps, MyState> {
     }
 
 
-    render() {
-        return (
-            <PrintTable data={this.state.movies}/>
-        );
-    }
+    return (
+        <InfiniteScroll
+            pageStart={0}
+            loadMore={() => getAllMovies({ lim: movies.length + 13 })}
+            hasMore={true || false}
+            useWindow={true}
+            loader={
+                <div key="loading" className="loader">
+                    Loading ...
+                </div>
+            }
+        >
+        <PrintTable data={movies}/>
+        </InfiniteScroll>
+    );
+
 }
 
 export default Movies;