diff --git a/package-lock.json b/package-lock.json
index 5b1d93c..5624766 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1212,6 +1212,129 @@
       "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
       "dev": true
     },
+    "@syncfusion/ej2-base": {
+      "version": "18.2.57",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-18.2.57.tgz",
+      "integrity": "sha512-3DGtZmNjgulpQuZqqMxLHrWBtTADCZoZqCLG/m4T62Rxinh9xF9LDQdE1Xcf28aJBVvx4Xyn+smB8a8rVN73dA==",
+      "requires": {
+        "@syncfusion/ej2-icons": "~18.2.54"
+      }
+    },
+    "@syncfusion/ej2-buttons": {
+      "version": "18.2.58",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-buttons/-/ej2-buttons-18.2.58.tgz",
+      "integrity": "sha512-N1cXj0ZZfOIk7MeGeMXqgEwMszY6XD4AQzhgXkF8HowzuesjO72olrdbeUfwrTQ9vKZ3pXAtx9sjEZnP200A2w==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.57"
+      }
+    },
+    "@syncfusion/ej2-data": {
+      "version": "18.2.54",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-18.2.54.tgz",
+      "integrity": "sha512-wjP0yQFynyV30EhTkdwrAP6f7DTfTKGDloee8x+g6n8j7coRyYYmELas9F1UdSOK7sIDJQ39GcAjmhQhZZqaBg==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.54"
+      }
+    },
+    "@syncfusion/ej2-dropdowns": {
+      "version": "18.2.58",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.2.58.tgz",
+      "integrity": "sha512-BVxfMzDQcVx1UE3jBlN9ZPxmQu8OwpcWFF+AJMV1SY+TRCJ9TPG/PyRfAHt6syL8qkRBk8de04Z2WBmvfamL3w==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.57",
+        "@syncfusion/ej2-data": "~18.2.54",
+        "@syncfusion/ej2-inputs": "~18.2.58",
+        "@syncfusion/ej2-lists": "~18.2.54",
+        "@syncfusion/ej2-navigations": "~18.2.57",
+        "@syncfusion/ej2-popups": "~18.2.54"
+      }
+    },
+    "@syncfusion/ej2-icons": {
+      "version": "18.2.54",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-18.2.54.tgz",
+      "integrity": "sha512-KheTKLmj9BgiQdp/yJ2JTTvCB1KQK134uGDBx6A5/J+8+mVTqOWwzZhqxzUIYpUhWtt1/gKohkjF86CZ/Ucs3A=="
+    },
+    "@syncfusion/ej2-inputs": {
+      "version": "18.2.58",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-inputs/-/ej2-inputs-18.2.58.tgz",
+      "integrity": "sha512-g/uQv30Wlbu7uAOoXCy8mEboc2P9amQZT37HFyAdtBtAI0G+u5yTduVB4nb1Hc1p359wMd+MgNO8EBzXklGxGQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.57",
+        "@syncfusion/ej2-buttons": "~18.2.58",
+        "@syncfusion/ej2-popups": "~18.2.54",
+        "@syncfusion/ej2-splitbuttons": "~18.2.54"
+      }
+    },
+    "@syncfusion/ej2-lists": {
+      "version": "18.2.58",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-lists/-/ej2-lists-18.2.58.tgz",
+      "integrity": "sha512-JYFX+4XqwZK0PClGOk7CyzSDK7vKZFG++Djwm0eXQknezBoEDDb+GlsS7I1JUZpeaDaeUkfQ6tnS4XlC7djgJw==",
+      "requires": {
+        "@syncfusion/ej2-base": "18.2.57",
+        "@syncfusion/ej2-buttons": "18.2.58",
+        "@syncfusion/ej2-data": "18.2.54"
+      }
+    },
+    "@syncfusion/ej2-navigations": {
+      "version": "18.2.58",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-navigations/-/ej2-navigations-18.2.58.tgz",
+      "integrity": "sha512-8YUkdPToOk0wQnJ/pqmOGd1Wl4KqK7dvByPNhoW/lms4gJqDdPwl/7w9jBikmKdQq9Vu38z3n9reSR9LHQuPIw==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.57",
+        "@syncfusion/ej2-buttons": "~18.2.58",
+        "@syncfusion/ej2-data": "~18.2.54",
+        "@syncfusion/ej2-inputs": "~18.2.58",
+        "@syncfusion/ej2-lists": "~18.2.58",
+        "@syncfusion/ej2-popups": "~18.2.58"
+      },
+      "dependencies": {
+        "@syncfusion/ej2-popups": {
+          "version": "18.2.58",
+          "resolved": "https://registry.npmjs.org/@syncfusion/ej2-popups/-/ej2-popups-18.2.58.tgz",
+          "integrity": "sha512-gfb7Ut6lqomo2XKt63yWV3M8nRgVUiKOo0wgRUpQA83U0WW0CokIF+2Q2D70aeNICIGExrHapnmvCs7frVu0vw==",
+          "requires": {
+            "@syncfusion/ej2-base": "~18.2.57",
+            "@syncfusion/ej2-buttons": "~18.2.58"
+          }
+        }
+      }
+    },
+    "@syncfusion/ej2-popups": {
+      "version": "18.2.57",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-popups/-/ej2-popups-18.2.57.tgz",
+      "integrity": "sha512-NA2MHhW+teuzla8I1AxUOYMddUmIEwLeX3VaGTSKE43IY1ItA5Q7oPF9xFTqY1QYxrsZOlzUcCNzTOgHryBNpw==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.57",
+        "@syncfusion/ej2-buttons": "~18.2.58"
+      }
+    },
+    "@syncfusion/ej2-splitbuttons": {
+      "version": "18.2.54",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-18.2.54.tgz",
+      "integrity": "sha512-F7LpcYY1X5hPXreA68S4lHNpIKxn5Qza+v6/AWIxpHJ4tlN5zUqzbwmGi6NoRMdOq2RnwGnFRCig/T2cw0QnLg==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.54",
+        "@syncfusion/ej2-popups": "~18.2.54"
+      }
+    },
+    "@syncfusion/ej2-vue-base": {
+      "version": "18.2.58",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-vue-base/-/ej2-vue-base-18.2.58.tgz",
+      "integrity": "sha512-b5CAJbSIPSlWjaskEYa1ItWJTf7ppu3A3m7P0r6yVQot+02Sqp+ApaHTky0ih86ZwVK9cFnq01HU3kEjK6nrpA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.57"
+      }
+    },
+    "@syncfusion/ej2-vue-dropdowns": {
+      "version": "18.2.58",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-vue-dropdowns/-/ej2-vue-dropdowns-18.2.58.tgz",
+      "integrity": "sha512-V56ZvGBryq57QV1/KxcVRJ5UwuwJ8srhar7GyvQsk7rDAoL9rJw+98d+9blGAKpX4islis3oV6TTpyUlfsY0SQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.57",
+        "@syncfusion/ej2-dropdowns": "18.2.58",
+        "@syncfusion/ej2-vue-base": "~18.2.58"
+      }
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
diff --git a/package.json b/package.json
index bb9634c..f2fa097 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@syncfusion/ej2-vue-dropdowns": "^18.2.58",
     "axios": "^0.20.0",
     "core-js": "^3.6.5",
     "vue": "^2.6.12",
diff --git a/src/App.vue b/src/App.vue
index 0e163ae..ed488d8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="app">
-    <app-header @setPathForFetch="fetchSearchMoveis" />
+    <app-header
+      :autoCompleteMoviesTitle="moviesTitleToAutoComplete"
+      @setPathForFetch="fetchSearchMoveis"
+    />
     <search-movie-result
-      :search-movie="allSearchMovies"
+      :movies="allSearchMovies"
       @close-results="isSearchMovesResultVisible"
     />
     <router-view />
@@ -26,15 +29,28 @@ export default {
   },
   data () {
     return {
-      allSearchMovies: {}
+      allSearchMovies: {},
+      moviesTitleToAutoComplete: ''
     }
   },
+  async mounted () {
+    await this.fetchMoviesTitle()
+  },
   computed: {
     searchMovies () {
       return this.$store.getters['searchMovies']
     }
   },
   methods: {
+    async fetchMoviesTitle () {
+      try {
+        const fetchData = await axios.get(`${process.env.VUE_APP_API_URL}/discover/movie?sort_by=popularity.desc&api_key=${process.env.VUE_APP_API_KEY}`)
+        this.moviesTitleToAutoComplete = Object.values(fetchData.data.results).map(item => item.title)
+      }
+      catch (error) {
+        console.log(error)
+      }
+    },
     async fetchSearchMoveis (allPath) {
       try {
         const fetchSeatchData = await axios.get(allPath)
diff --git a/src/components/MovieCard.vue b/src/components/MovieCard.vue
index f5e2bae..8e85f83 100644
--- a/src/components/MovieCard.vue
+++ b/src/components/MovieCard.vue
@@ -6,6 +6,12 @@
       :alt="movie.title"
       class="movie-card__poster"
     >
+    <div
+      v-else
+      class="movie-card__un-poster"
+    >
+      Not Found
+    </div>
     <div class="movie-card__detail detail">
       <p class="detail__title">
         {{ movie.title }}
@@ -74,7 +80,7 @@ export default {
   &::before {
     content: '';
     position: absolute;
-    width: 100%;
+    width: 210px;
     max-height: 315px;
     height: 100%;
     background: rgba(0, 0, 0, .8);
@@ -90,15 +96,27 @@ export default {
   }
 
   &__poster {
-    max-width: 210px;
+    width: 210px;
+    height: 315px;
+  }
+
+  &__un-poster {
+    width: 210px;
+    height: 315px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    font-weight: 600;
+    background-color: #908c8c;
+    color: #fff;
   }
 
   &__detail {
     position: absolute;
     top: 0;
-    width: 100%;
-    height: 100%;
-    max-height: 315px;
+    width: 210px;
+    height: 315px;
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/src/components/SearchMovieResult.vue b/src/components/SearchMovieResult.vue
index ea50abb..0cf1e8d 100644
--- a/src/components/SearchMovieResult.vue
+++ b/src/components/SearchMovieResult.vue
@@ -11,27 +11,11 @@
         Your search result
       </h2>
       <div class="search-movie-result__wrap">
-        <div
-          v-for="searchMovie in searchMovies"
-          :key="searchMovie.id"
-          class="search-movie-result__box-item box-item"
-        >
-          <img
-            v-if="searchMovie.poster_path !== null" 
-            :src="`https://image.tmdb.org/t/p/w1280${searchMovie.poster_path}`" 
-            :alt="searchMovie.title"
-            class="box-item__image"
-          >
-          <div
-            v-else
-            class="box-item__un-image"
-          >
-            Not found
-          </div>
-          <p class="box-item__title">
-            {{ searchMovie.title }}
-          </p>
-        </div>
+        <movie-card
+          v-for="movie in movies"
+          :key="movie.id"
+          :movie="movie"
+        />
       </div>
     </div>
     <div
@@ -54,12 +38,19 @@
 </template>
 
 <script>
+import MovieCard from '../components/MovieCard'
+
 export default {
   name: 'SearchMovieResult',
+  props: {
+    movies: {
+      required: true
+    }
+  },
+  components: {
+    MovieCard
+  },
   computed: {
-    searchMovies () {
-      return { ...this.$store.state.searchMovies }
-    },
     isSectionVisible () {
       return this.$store.state.isSearchMovieResultVisible
     },
@@ -79,7 +70,7 @@ export default {
 .search-movie-result {
   position: relative;
   max-width: 80rem;
-  margin: 0 auto 2rem;
+  margin: 0 auto 2rem auto;
   padding: 0 1rem;
 
   &__content {
@@ -94,40 +85,14 @@ export default {
   }
 
   &__wrap {
+    margin-bottom: 2rem;
     display: grid;
     grid-gap: 2rem;
     grid-template-columns: repeat(5, 1fr);
   }
 
-  &__box-item {
-    display: flex;
-    flex-direction: column;
-
-    .box-item {
-      &__image {
-        max-width: 210px;
-        height: 315px;
-      }
-
-      &__un-image {
-        width: 210px;
-        height: 315px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 2rem;
-        font-weight: 600;
-        background-color: #908c8c;
-        color: #fff;
-      }
-
-      &__title {
-        max-width: 210px;
-      }
-    }
-  }
-
   &__empty-state {
+    padding-bottom: 2rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
diff --git a/src/components/Shared/AppHeader.vue b/src/components/Shared/AppHeader.vue
index 3148dce..3799937 100644
--- a/src/components/Shared/AppHeader.vue
+++ b/src/components/Shared/AppHeader.vue
@@ -3,7 +3,7 @@
     <div class="app-header__container">
       <router-link :to="{ name: 'Main' }">
         <img
-          src="../../assets/images/film-logo.svg"
+          src="@/assets/images/film-logo.svg"
           alt="Logo"
           class="app-header__logo"
         >
@@ -18,6 +18,7 @@
         </router-link>
       </nav>
       <app-search-input
+        :autoCompleteMoviesTitle="autoCompleteMoviesTitle"
         class="app-header__search-box"
         @setSearchQuery="setSearchQuery"
       />
@@ -30,6 +31,11 @@ import AppSearchInput from './AppSearchInput'
 
 export default {
   name: 'AppHeader',
+  props: {
+    autoCompleteMoviesTitle: {
+      required: true
+    }
+  },
   components: {
     AppSearchInput
   },
diff --git a/src/components/Shared/AppSearchInput.vue b/src/components/Shared/AppSearchInput.vue
index 46d564d..23b1046 100644
--- a/src/components/Shared/AppSearchInput.vue
+++ b/src/components/Shared/AppSearchInput.vue
@@ -1,11 +1,13 @@
 <template>
   <form class="search-box">
-    <input
+    <ejs-autocomplete
       v-model="searchMovieName"
-      type="text"
-      placeholder="Search movie..."
-      class="search-box__input"
-    >
+      :dataSource="autocompleteMovie"
+      :fields="dataFields"
+      :showClearButton="false"
+      :highlight="true"
+      placeholder="Select a movie"
+    />
     <button
       class="search-box__button"
       @keyup.enter="getSearchMoveisData"
@@ -18,9 +20,15 @@
 
 <script>
 export default {
-  name: 'AppSearchInput',
+  name: '',
+  props: {
+    autoCompleteMoviesTitle: {
+      required: true
+    }
+  },
   data () {
     return {
+      dataFields: { value: 'title' },
       searchMovieName : '',
       fullPathName: ''
     }
@@ -30,6 +38,11 @@ export default {
       this.fullPathName = `${process.env.VUE_APP_API_URL}/search/movie?&api_key=${process.env.VUE_APP_API_KEY}&query=${this.searchMovieName}`
     }
   },
+  computed: {
+    autocompleteMovie () {
+      return Object.values(this.autoCompleteMoviesTitle)
+    }
+  },
   methods: {
     getSearchMoveisData () {
       this.$store.commit('setSearchMoviesVisibility')
@@ -40,25 +53,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.search-box {
-  &__input {
-    margin: 0;
-    padding: .5rem 1rem;
-    font-size: 1rem;
-    font-weight: 500;
-    border-radius: 3rem;
-    outline: none;
-    transition: all .2s ease;
-
-    &:hover {
-      box-shadow: 0 1px 2px 1px #b7a3a3;
-    }
-  }
+@import url(https://cdn.syncfusion.com/ej2/material.css);
 
+.search-box {
   &__button {
     position: absolute;
-    right: 1rem;
-    top: 7px;
+    right: 0;
+    top: 3px;
     padding: 2px 10px;
     background: no-repeat;
     border: 1px solid #333;
diff --git a/src/main.js b/src/main.js
index 8f181db..112ee6c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,9 @@ import router from './router'
 import { store } from './store/store'
 
 import VueCarousel from 'vue-carousel'
+import { AutoCompletePlugin } from '@syncfusion/ej2-vue-dropdowns'
 
+Vue.use(AutoCompletePlugin)
 Vue.use(VueCarousel)
 Vue.config.productionTip = false