diff --git a/Frontend/vue-project/src/components/CatalogCollections.vue b/Frontend/vue-project/src/components/CatalogCollections.vue
new file mode 100644
index 0000000..a9edefd
--- /dev/null
+++ b/Frontend/vue-project/src/components/CatalogCollections.vue
@@ -0,0 +1,246 @@
+<script>
+	import 'axios';
+    import axios from "axios";
+    import Collection from "../models/Collection";
+    import Film from "../models/Film";
+    export default {
+        created() {
+            this.getCollections();
+            this.getFilms();
+        },
+        mounted() {
+            const addModal = document.getElementById('editModal');
+            addModal.addEventListener('shown.bs.modal', function () {
+            })
+            const openModalForAdd = document.getElementById('openModalForAdd');
+            openModalForAdd.addEventListener('shown.bs.modal', function () {
+            })
+        },
+        data() {
+            return{
+                collections: [],
+                URL: "http://localhost:8080/",
+                collection: new Collection(),
+                films: [],
+                selectedFilms: []
+            }
+        },
+        methods: {
+            getCollections(){
+                axios.get(this.URL + "collection")
+                    .then(response => {
+                        this.collections = response.data;
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
+            },
+            addCollection(collection){
+                console.log(collection);
+                axios.post(this.URL + "collection", collection)
+                    .then(() => {
+                        this.getCollections();
+                        this.closeModal();
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
+            },
+            deleteCollection(id){
+                axios.delete(this.URL + `collection/${id}`)
+                    .then(() =>{
+                        this.getCollections();
+                    })
+            },
+            editCollection(collection){
+                axios.put(this.URL + `collection/${collection.id}`, collection)
+                    .then(() =>{
+                        const index = this.collections.findIndex((s) => s.id === collection.id);
+                        if (index !== -1) {
+                            this.collections[index] = { ...collection };
+                        }
+                        this.closeModal();
+                        this.getCollections();
+                    })
+                this.closeModal();
+            },
+            openModalForAdd(status, collection = null) {
+                if (status === "create") {
+                    this.collection = new Collection();
+                    this.collection.status = "create";
+                } else if (status === "edit" && collection) {
+                    this.collection = { ...collection };
+                    this.collection.status = "edit";
+                }
+                this.selectedFilms = this.collection.filmIds;
+                document.getElementById("openModalForAdd").style.display = "block";
+            },
+            closeModalForAdd() {
+                document.getElementById("openModalForAdd").style.display = "none";
+                this.selectedFilms = [];
+                this.collection = new Collection();
+            },
+            openModal(status, collection = null) {
+            if (status === "create") {
+                this.collection = new Collection();
+                this.collection.status = "create";
+            } else if (status === "edit" && collection) {
+                this.collection = { ...collection };
+                this.collection.status = "edit";
+            }
+            document.getElementById("editModal").style.display = "block";
+            },
+            closeModal() {
+                document.getElementById("editModal").style.display = "none";
+            },
+            getFilms(){
+                axios.get(this.URL + "film")
+                    .then(response => {
+                        this.films = response.data;
+                        console.log(response.data);
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
+            },
+
+            addCollectionFilm(id) {
+                let filmId = document.getElementById('films').value;
+                axios
+                    .post(this.URL + `collection/add_film/${id}?film_id=${filmId}`)
+                    .then(() => {
+                        this.closeModalForAdd();
+                        this.getCollections();
+                    })
+                    .catch((error) => {
+                        console.log(error);
+                    });
+            },
+            delCollectionFilm(id) {
+                let filmId = document.getElementById('films').value;
+                axios
+                    .delete(this.URL + `collection/del_film/${id}?film_id=${filmId}`)
+                    .then(() => {
+                        this.closeModalForAdd();
+                        this.getCollections();
+                    })
+                    .catch((error) => {
+                        console.log(error);
+                    });
+            },
+            itemsGenres(filmIds) {
+                let result = [];
+                if (typeof filmIds === 'undefined') {
+                    return;
+                }
+                this.films.forEach(film => {
+                    for (let i = 0; i < filmIds.length; i++) {
+                        if (film.id === filmIds[i]) {
+                            result.push(film);
+                        }
+                    }
+                });
+                return result;
+            }
+        }
+    }
+</script>
+<template>
+    <div class="container mt-4">
+        <h1 class="text-center text-danger mb-4">Коллекции</h1>
+        <button class="btn btn-success mr-2" @click="openModal('create')">Добавить</button>
+        <table class="table text-light">
+            <thead>
+            <tr>
+                <th>Название</th>
+                <th></th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="col in collections" :key="col.id">
+                <td>{{ col.name }}</td>
+                <td>
+                    <td>
+                        <button class="btn btn-warning mr-2" @click="openModal('edit', col)">Изменить</button>
+                    </td>
+                    <td>
+                        <button class="btn btn-danger" @click="deleteCollection(col.id)">Удалить</button>
+                    </td>
+                    <td>
+                        <button class="btn btn-success mr-2" @click="openModalForAdd('edit', col);">Добавить фильмы</button>
+                    </td>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+<!--Форма для создания коллекций-->
+    <div class="modal" tabindex="-1" id="editModal">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Коллекция</h5>
+                </div>
+                <div class="modal-body">
+                    <form>
+                        <div class="form-group">
+                            <label for="name">Название:</label>
+                            <input type="text" class="form-control" id="name" name="name" v-model="collection.name">
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="editModal" @click="closeModal()">Закрыть</button>
+                    <button type="button" class="btn btn-primary" v-if="collection.status === 'create'" @click="addCollection(collection)">Создать</button>
+                    <button type="button" class="btn btn-primary" v-else @click="editCollection(collection)">Сохранить</button>
+                </div>
+            </div>
+        </div>
+    </div>
+<!--Форма для привязки коллекции и фильма   -->
+    <div class="modal" tabindex="-1" id="openModalForAdd">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Добавление фильмов</h5>
+                </div>
+                <div class="modal-body">
+                    <form>
+                        <div class="form-group">
+                            <label for="name">Название:</label>
+                            <input readonly type="text" class="form-control" id="name" name="name" v-model="collection.name">
+                        </div>
+                        <div class="form-group">
+                            <label for="name">Фильмы:</label>
+                            <ul class="list-group">
+                                <li class="list-group-item" v-for="film in itemsGenres(this.collection.filmIds)" :key="film.id">
+                                    <div>
+                                        <label>{{ film.name }}</label>
+                                    </div>
+                                </li>
+                            </ul>
+                            <div class="mt-4">
+                            <label>Выберите фильм</label>
+                            <select class="form-select" id="films" required>
+                                <option v-for="film in this.films"
+                                    :value="film.id">
+                                    {{ film.name }}
+                                </option>
+                            </select>
+                            </div>
+                        </div>
+                        <div class="d-flex justify-content-between mt-4">
+                            <button class="btn btn-success" type="button" id="addFilmButton"
+                            @click="addCollectionFilm(this.collection.id)">Добавить</button>
+                            <button class="btn btn-danger" type="button" id="delFilmButton"
+                            @click="delCollectionFilm(this.collection.id)">Удалить</button>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="editModal" @click="closeModalForAdd()">Закрыть</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/vue-project/src/components/CatalogFilms.vue b/Frontend/vue-project/src/components/CatalogFilms.vue
index b9a40c1..827fa9f 100644
--- a/Frontend/vue-project/src/components/CatalogFilms.vue
+++ b/Frontend/vue-project/src/components/CatalogFilms.vue
@@ -2,7 +2,7 @@
 	import 'axios';
     import axios from "axios";
     import Film from "../models/Film";
-    import Group from "../models/Genre";
+    import Genre from "../models/Genre";
     export default {
         created() {
             this.getFilms();
@@ -131,7 +131,7 @@
 </script>
 <template>
 <div class="container mt-4">
-        <h1 class="text-center mb-4">Фильмы</h1>
+        <h1 class="text-center text-danger mb-4">Фильмы</h1>
         <button class="btn btn-success mr-2" @click="openModal('create')">Добавить</button>
         <table class="table text-light">
             <thead>
diff --git a/Frontend/vue-project/src/components/CatalogGenres.vue b/Frontend/vue-project/src/components/CatalogGenres.vue
index 75ba887..2412d6e 100644
--- a/Frontend/vue-project/src/components/CatalogGenres.vue
+++ b/Frontend/vue-project/src/components/CatalogGenres.vue
@@ -83,7 +83,7 @@
 
 <template>
 <div class="container mt-4">
-    <h1 class="text-center mb-4">Жанры</h1>
+    <h1 class="text-center text-danger mb-4">Жанры</h1>
     <button class="btn btn-success mr-2" @click="openModal('create')">Добавить</button>
     <table class="table text-light">
                 <thead>
diff --git a/Frontend/vue-project/src/main.js b/Frontend/vue-project/src/main.js
index 3183483..5c568ad 100644
--- a/Frontend/vue-project/src/main.js
+++ b/Frontend/vue-project/src/main.js
@@ -4,12 +4,14 @@ import App from './App.vue'
 import Index from './components/Index.vue'
 import CatalogGenres from './components/CatalogGenres.vue'
 import CatalogFilms from './components/CatalogFilms.vue'
+import CatalogCollections from './components/CatalogCollections.vue'
 
 const routes = [
     { path: '/', redirect: '/index' },
     { path: '/index', component: Index},
     { path: '/catalogs/genres', component: CatalogGenres},
-    { path: '/catalogs/films', component: CatalogFilms}
+    { path: '/catalogs/films', component: CatalogFilms},
+    { path: '/catalogs/collections', component: CatalogCollections}
 ]
 
 const router = createRouter({
diff --git a/data.mv.db b/data.mv.db
index a570385..482449d 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/CollectionDTO.java b/src/main/java/ru/ulstu/is/lab1/DataBase/controller/CollectionDTO.java
index 61a25cf..b58d69d 100644
--- a/src/main/java/ru/ulstu/is/lab1/DataBase/controller/CollectionDTO.java
+++ b/src/main/java/ru/ulstu/is/lab1/DataBase/controller/CollectionDTO.java
@@ -27,4 +27,6 @@ public class CollectionDTO {
     public List<Long> getFilmIds(){
         return filmIds;
     }
+    public void setId(long id){ this.id = id; }
+    public void setName(String name){ this.name = name; }
 }