diff --git a/Frontend/vue-project/src/components/CatalogFilms.vue b/Frontend/vue-project/src/components/CatalogFilms.vue
index c4d4744..96e159e 100644
--- a/Frontend/vue-project/src/components/CatalogFilms.vue
+++ b/Frontend/vue-project/src/components/CatalogFilms.vue
@@ -20,9 +20,10 @@
                 headersGenres: [
                     { name: 'name', label: 'Жанр' }
                 ],
-                selectedItemsGenres: [],
+                selectedGenres: [],
                 genreUrl: 'genre/',
-                genres: []
+                genres: [],
+                open: []
             }
         },
         created() {
@@ -32,15 +33,21 @@
                 });
         },
         methods: {
-            addGenre(filmId) {
-                let genreId = document.getElementById('genres').value;
+            addGenre(filmId, genreId) {
                 let response = axios.post(`http://localhost:8080/film/add_genre/${filmId}?genre_id=${genreId}`);
                 console.log(response);
+                return response;
             },
-            delGenre(filmId) {
-                let genreId = document.getElementById('genres').value;
-                let response = axios.delete(`http://localhost:8080/film/del_genre/${filmId}?genre_id=${genreId}`);
+            delGenres(filmId) {
+                let response = axios.delete(`http://localhost:8080/film/del_genres/${filmId}`);
                 console.log(response);
+                return response;
+            },
+            async createGenres(filmId, genreIds){
+                await this.delGenres(filmId);
+                for(var j=0; j<genreIds.length; j++){
+                    await this.addGenre(filmId, genreIds[j]);
+                }
             },
             itemsGenres(genreIds) {
                 let result = [];
@@ -81,26 +88,18 @@
             <label for="name" class="form-label">Название фильма</label>
             <input type="text" class="form-control" id="name" required v-model="data.name">
         </div>
-        <DataTable
-             :headers="this.headersGenres"
-             :items="itemsGenres(data.genreIds)"
-             :selectedItems="this.selectedItemsGenres">
-        </DataTable>
-        <div class="mb-3">
-            <label for="genres" class="form-label">Жанры</label>
-            <select class="form-select" id="genres" required>
-                <option disabled value="">Выберите жанр</option>
-                <option v-for="genre in this.genres"
-                    :value="genre.id">
-                    {{ genre.name }}
-                </option>
-            </select>
-        </div>
-        <div class="d-flex justify-content-between">
-            <button class="btn btn-outline-secondary" type="button" id="addGenreButton"
-            @click.prevent="addGenre(data.id)">Добавить</button>
-            <button class="btn btn-outline-secondary" type="button" id="delGenreButton"
-            @click.prevent="delGenre(data.id)">Удалить</button>
+        <div class="form-genre">
+            <label for="name">Выберите жанры для добавления:</label>
+            <ul class="list-genre">
+                <li class="list-genre-item" v-for="genre in genres" :key="genre.id">
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" v-model="selectedGenres" :value="genre.id">
+                        <label class="form-check-label" for="genreCheck{{ genre.id }}">{{ genre.name }}</label>
+                    </div>
+                </li>
+            </ul>
+            <button class="btn btn-outline-secondary" type="button" id="GenreOnFilm"
+            @click="createGenres(data.id, selectedGenres)">Добавить</button>
         </div>
     </Modal>
 </template>
\ No newline at end of file
diff --git a/data.mv.db b/data.mv.db
index d2d9af4..e9122c6 100644
Binary files a/data.mv.db and b/data.mv.db differ
diff --git a/src/main/java/ru/ulstu/is/lab1/DataBase/controller/FilmController.java b/src/main/java/ru/ulstu/is/lab1/DataBase/controller/FilmController.java
index d1937b3..5ca4a30 100644
--- a/src/main/java/ru/ulstu/is/lab1/DataBase/controller/FilmController.java
+++ b/src/main/java/ru/ulstu/is/lab1/DataBase/controller/FilmController.java
@@ -54,4 +54,9 @@ public class FilmController {
     public FilmDTO delGenre(@PathVariable Long id, @RequestParam Long genre_id) {
         return new FilmDTO(filmService.deleteGenre(id, genre_id));
     }
+
+    @DeleteMapping("/del_genres/{id}")
+    public FilmDTO delGenres(@PathVariable Long id) {
+        return new FilmDTO(filmService.deleteGenres(id));
+    }
 }
diff --git a/src/main/java/ru/ulstu/is/lab1/DataBase/model/Film.java b/src/main/java/ru/ulstu/is/lab1/DataBase/model/Film.java
index 747c0d0..691640f 100644
--- a/src/main/java/ru/ulstu/is/lab1/DataBase/model/Film.java
+++ b/src/main/java/ru/ulstu/is/lab1/DataBase/model/Film.java
@@ -60,6 +60,10 @@ public class Film {
         }
     }
 
+    public void removeGenres(){
+        genres = new ArrayList<>();
+    }
+
     public void addCollection(Collection collection) {
         if(this.collections==null)
             collections=new ArrayList<>();
diff --git a/src/main/java/ru/ulstu/is/lab1/DataBase/service/FilmService.java b/src/main/java/ru/ulstu/is/lab1/DataBase/service/FilmService.java
index e19280b..9895231 100644
--- a/src/main/java/ru/ulstu/is/lab1/DataBase/service/FilmService.java
+++ b/src/main/java/ru/ulstu/is/lab1/DataBase/service/FilmService.java
@@ -97,4 +97,15 @@ public class FilmService {
         film.removeGenre(genre);
         return filmRepository.save(film);
     }
+
+    @Transactional
+    public Film deleteGenres(Long filmId) {
+        Film film = findFilm(filmId);
+        if (film == null) {
+            throw new EntityNotFoundException(String.format("Film with id [%s] is not found", filmId));
+        }
+
+        film.removeGenres();
+        return filmRepository.save(film);
+    }
 }