diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 51229048b0c0453336dda542181a5e8745794812..cd37e6efb69cf9c8a0b4e813b2cc1e0c8a641f01 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -42,6 +42,7 @@ build-client-pages:
     - cp build/index.html build/404.html
     - mkdir ../public
     - mv -v build/* ../public/
+    - ls
     - echo "Build successfully!"
   artifacts:
     paths:
diff --git a/client/package.json b/client/package.json
index cbd025708cc10d4870a9c1704e6968721661178c..a9f7ff0a240bdc7fa241869ab1f9de0748a00bd8 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,4 +1,5 @@
 {
+  "homepage": "https://it2810-h21.pages.stud.idi.ntnu.no/team-54/project-3",
   "name": "project-3",
   "version": "0.1.0",
   "private": true,
diff --git a/client/src/App.css b/client/src/App.css
index 0ccb286c02dfb731ba277b3a2fd94d2273e06627..d256666ae52ea27efe656953f2c1acec5395ea00 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -17,13 +17,30 @@
   background-color: gray;
   min-height: 5vh;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
+  font-size: large;
+  margin: auto;
 }
 
+#textfield1, #textfield2, #checkbox1  {
+  /* background-color: red; */
+  margin: 1em;
+}
+/* 
+#textfield2 {
+  background-color: yellow;
+}
+
+#checkbox1 {
+  background-color: green;
+} */
+
+
+
 .App-link {
   color: #61dafb;
 }
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 8762b517158653ff34f5ae833d1313b8007887bb..31bdc57860564e5c794b2f8c6d765462cbd855f1 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -5,7 +5,9 @@ import { inject, observer } from 'mobx-react';
 import * as services from './services';
 
 type MyState = {
-    input: string
+    inputTitle: string,
+    inputGenre: string,
+    checkbox1_checked: boolean
 };
 
 interface MoviesProps {
@@ -17,7 +19,9 @@ class Header extends React.Component<MoviesProps, MyState> {
         super(props);
 
         this.state = {
-            input: ''
+            inputTitle: '',
+            inputGenre: '',
+            checkbox1_checked: false
         }
     }
 
@@ -25,7 +29,12 @@ class Header extends React.Component<MoviesProps, MyState> {
     render() {
         return (
             <div className="header"> 
-                <input type="text" placeholder="Search for movies..." onChange={this.handleChange}></input>
+                Movie title:
+                <input type="text" placeholder="Search for movie titles..." onChange={this.handleChange} id="textfield1"></input>
+                Movie genre:
+                <input type="text" placeholder="Filter on genre..." onChange={this.handleChange} id="textfield2"></input>
+                Order by year:
+                <input type="checkbox" id="checkbox1" onChange={this.handleChange}></input>
 
                 <button onClick={this.search}>Search</button>
             </div>
@@ -33,24 +42,50 @@ class Header extends React.Component<MoviesProps, MyState> {
     }
 
 
-    handleChange = (e: any) => {
-        this.setState({ input: e.target.value })
-    }
+    handleChange = (event: any) => {
+        let element = event.target.id
+        if (event.keyCode === 13) { // not working
+            console.log("enter")
+            this.search()
+        }
 
+        if (element == 'textfield1') {
+            this.setState({ inputTitle: event.target.value })
+        }
+        if (element == 'textfield2') {
+            this.setState({ inputGenre: event.target.value })
+        }
+        else if (element == 'checkbox1') {
+            this.setState({ checkbox1_checked: event.target.checked })
+        }
+        // else if (element == 'checkbox12') {
+        //     this.setState({ checkbox2_checked: event.target.checked })
+        // }
+    }
 
+// TODO mysql ordering not working because of graphql scrambling
     search = () => {
-        this.getMovieByColumnType(services.ColumnType.Title, this.state.input, 'id title genre description');
+        this.getMoviesBySearch('title genre year', this.state.inputTitle, this.state.inputGenre, this.state.checkbox1_checked);
     }
 
 
     getMovieByColumnType(columnType : services.ColumnType, value: string, neededData: string) {
-        services.queryFetch(services.generateQuery(columnType, value, neededData) , 'POST')
+        services.queryFetch(services.generateQuery(columnType, value, neededData))
         .then(res => res.json())
         .then(res => {
             this.props.moviesStore.setHasMore(false);
             this.props.moviesStore.setMovies(res.data.getMovieByColumnType);
         })
     }
+
+    getMoviesBySearch(neededData: string, title: string, genre: string, order: boolean) {
+        services.queryFetch(services.generateSearchQuery(neededData, title, genre, order))
+        .then(res => res.json())
+        .then(res => {
+            this.props.moviesStore.setHasMore(false);
+            this.props.moviesStore.setMovies(res.data.getMoviesBySearch);
+        })
+    }
 }
 
 
diff --git a/client/src/components/Movies.tsx b/client/src/components/Movies.tsx
index 8d8a738306575908131024124f389209f69e877b..d0c058703ed9fe5996980557ff898ea78b448d01 100644
--- a/client/src/components/Movies.tsx
+++ b/client/src/components/Movies.tsx
@@ -6,6 +6,11 @@ import { inject, observer } from 'mobx-react';
 import * as services from './services';
 import { observe } from 'mobx';
 
+// type MyProps = {};
+type MyState = {
+    movies: any
+};
+
 interface MoviesProps {
     moviesStore: MoviesStoreImplementation
 }
@@ -33,7 +38,7 @@ function Movies(props: MoviesProps){
 
 
     function getAllMovies(params: any) {
-        services.queryFetch(generateAllMoviesQuery(params.lim), 'POST')
+        services.queryFetch(generateAllMoviesQuery(params.lim))
         .then(res => res.json())
         // .then(res => setMovies(res.data.getAllMovies))
         .then(res => {
@@ -44,7 +49,7 @@ function Movies(props: MoviesProps){
     }
 
     function getMovieByColumnType(columnType : services.ColumnType, value: string, neededData: string) {
-        services.queryFetch(services.generateQuery(columnType, value, neededData) , 'POST')
+        services.queryFetch(services.generateQuery(columnType, value, neededData))
         .then(res => res.json())
         // .then(res => setMovies(res.data.getMovieByColumnType))
         .then(res => props.moviesStore.setMovies(res.data.getMovieByColumnType))
diff --git a/client/src/components/services.ts b/client/src/components/services.ts
index f88cff23bcff0bcbdd97f464e1cfe3e1c0149486..3519d71d7804d4f0eaf00e3033de5793dedcb731 100644
--- a/client/src/components/services.ts
+++ b/client/src/components/services.ts
@@ -1,6 +1,6 @@
-export function queryFetch(query: String, method: string) {
+export function queryFetch(query: String) {
     return fetch('/graphql', {
-        method: method,
+        method: 'POST',
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
         query: query,
@@ -61,6 +61,17 @@ export function generateQuery(columnType: ColumnType, value: string, neededData:
 }
 
 
+export function generateSearchQuery(neededData: string, title: string, genre: string, order: boolean){
+    let query = `
+    query {
+        getMoviesBySearch(title: "${title}", genre: "${genre}", order: ${order}) {
+            ${neededData}
+        }
+    }`;
+    console.log(query)
+    return query
+}
+
 export const getAllMoviesQuery = `
 query {
     getAllMovies {
diff --git a/server/package.json b/server/package.json
index 36baeeffd0d058cab19d7c6ee1368a3ad15a3ef5..363c2dfb84c2745ffee9b4bd352f9e93bb38f18d 100644
--- a/server/package.json
+++ b/server/package.json
@@ -28,7 +28,7 @@
   },
   "scripts": {
     "start": "nodemon src/server.ts --exec ts-node",
-    "build": "react-scripts build",
+    "build": "tsc --build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
diff --git a/server/src/database.ts b/server/src/database.ts
index 93fdd2fe9ce56a9cf40f8722fd2c7346a3eb5ab6..392f5432313fff688f1b20c1c1761531db1e4491 100644
--- a/server/src/database.ts
+++ b/server/src/database.ts
@@ -4,12 +4,12 @@ dotenv.config({ path: ('../.env') });
 
 export async function connect(): Promise<Pool>{
   const connection = createPool({
-      host: process.env.DB_HOST,
-      user: process.env.DB_USER,
-      password: process.env.DB_PASS,
-      database: process.env.DB_NAME,
+      host: "mysql.ansatt.ntnu.no",
+      user: 'abbasj_abbas',
+      password: 'abbas2021',
+      database: 'abbasj_project3',
       connectionLimit: 10
   })
 
   return connection;
-}
\ No newline at end of file
+}
diff --git a/server/src/server.ts b/server/src/server.ts
index 6ee0a5a2affaf370004a3c79818cb8760fb9d968..f1656132e28c12ce2eb5712cd911c89f60aeb200 100644
--- a/server/src/server.ts
+++ b/server/src/server.ts
@@ -1,9 +1,7 @@
 declare var require: any
-// id,title,genre,rating_dice_throw,year,director_first_name,director_last_name,description,cover_image
-const movieData = require("../movies_with_image.json")
 var express = require('express');
 var { graphqlHTTP } = require('express-graphql');
-var { GraphQLObjectType, GraphQLSchema, buildSchema, GraphQLInt, GraphQLString, GraphQLList } = require('graphql');
+var { GraphQLObjectType, GraphQLSchema, buildSchema, GraphQLInt, GraphQLString, GraphQLList, GraphQLBoolean } = require('graphql');
 
 import {connect} from "./database"
 
@@ -35,7 +33,6 @@ const RootQuery = new GraphQLObjectType({
                 const connection = await connect();
                 const response = await connection.query('SELECT * FROM movie LIMIT '+args.lim);
                 return response[0];
-                // return filmControllers.getFilms()
             }
         },
         getMovieByColumnType: {
@@ -62,6 +59,35 @@ const RootQuery = new GraphQLObjectType({
                 else if(typeof args.director_last_name!='undefined' && args.director_last_name){query = getQuery('director_last_name' , args.director_last_name)}
                 else if(typeof args.description!='undefined' && args.description){query = getQuery('description' , args.description)}
 
+                const response = await connection.query(query);
+                return response[0];
+            }
+        },
+        getMoviesBySearch: {
+            type: new GraphQLList(MovieType),
+            args: {
+                id: {type: GraphQLInt},
+                title: { type: GraphQLString },
+                genre: { type: GraphQLString },
+                rating_dice_throw: { type: GraphQLInt },
+                year: { type: GraphQLInt },
+                description: { type: GraphQLString },
+                order: {type: GraphQLBoolean}
+            },
+            async resolve(parent: any, args: any) {
+                const connection = await connect();
+                let query = '';
+                // if(typeof args.id!='undefined' && args.id){query = getQuery('id' , args.id)}
+                if(typeof args.title!='undefined'  && typeof args.genre!='undefined'){
+                    console.log("resolve")
+                    query = getSearchQuery(args.title, args.genre, args.order)}
+                // else if(typeof args.genre!='undefined' && args.genre){query = getQuery('genre' , args.genre)}
+                // else if(typeof args.rating_dice_throw!='undefined' && args.rating_dice_throw){query = getQuery('rating_dice_throw' , args.rating_dice_throw)}
+                // else if(typeof args.year!='undefined' && args.year){query = getQuery('year' , args.year)}
+                // else if(typeof args.director_first_name!='undefined' && args.director_first_name){query = getQuery('director_first_name' , args.director_first_name)}
+                // else if(typeof args.director_last_name!='undefined' && args.director_last_name){query = getQuery('director_last_name' , args.director_last_name)}
+                // else if(typeof args.description!='undefined' && args.description){query = getQuery('description' , args.description)}
+
                 const response = await connection.query(query);
                 return response[0];
             }
@@ -69,10 +95,31 @@ const RootQuery = new GraphQLObjectType({
     }
 })
 
-function getQuery(key: String, value: string){
+function getQuery(key: string, value: string){
     return 'SELECT * FROM movie WHERE ' + key + ' = "'  + value + '"'
 }
 
+function getSearchQuery(title: string, genre: string, order: boolean): string {
+    let query = 'SELECT * FROM movie'
+    if (title != '') {
+        query = query + ' WHERE title LIKE "%' + title + '%"'
+    }
+    if (title != '' && genre != '') {
+        query = query + ' AND'
+    }
+    if (title == '' && genre != '') {
+        query = query + ' WHERE'
+    }
+    if (genre != '') {
+        query = query +  ' genre LIKE "%' + genre + '%"'
+    }
+    if (order) {
+        query = query + ' ORDER BY "year"'
+    }
+    console.log(query)
+    return query
+}
+
 const Mutation = new GraphQLObjectType({
     name: "Mutation",
     description: 'This is for creating a movie',
@@ -125,15 +172,24 @@ const Mutation = new GraphQLObjectType({
                 const response = await connection.query('UPDATE movie SET title = ?, genre = ?, rating_dice_throw = ?, year = ?, director_first_name = ?, director_last_name = ? , description = ?, cover_image = ? WHERE id = ?', [args.title, args.genre, args.rating_dice_throw, args.year, args.director_first_name, args.director_last_name, args.description, args.cover_image, args.id]);
                 return response[0];
             }
+        },
+        updateRating: { // TODO test this
+            type: MovieType,
+            args: {
+                id: {type: GraphQLInt},
+                rating_dice_throw: { type: GraphQLInt }
+            },
+            async resolve(parent: any, args: any) { 
+                const connection = await connect();
+                const response = await connection.query('UPDATE movie SET rating_dice_throw = ? WHERE id = ?', [args.genre, args.id]);
+                return response[0];
+            }
         }
     }
 })
 
 const schema = new GraphQLSchema({query: RootQuery, mutation: Mutation})
 
-
-// var root = { hello: () => 'Hello world!' };
-
 var app = express();
 app.use('/graphql', graphqlHTTP({
     schema: schema,