diff --git a/frontend/src/src/components/ContentComponent.vue b/frontend/src/src/components/ContentComponent.vue
index 7d36707..9ccf505 100644
--- a/frontend/src/src/components/ContentComponent.vue
+++ b/frontend/src/src/components/ContentComponent.vue
@@ -2,7 +2,7 @@
   <div class="content">
     <div class="header-search">
       <h1>Проекты</h1>
-       <div class="filter-container">
+      <div class="filter-container">
         <p>Интервал выполнения</p>
         <div class="date-filter">
           <input
@@ -23,20 +23,20 @@
             placeholder="Поиск проекта"
             class="search-input"
         />
-         <div class="status-filter">
-           <label for="status">Статус</label>
-           <select v-model="selectedStatus">
-             <option v-for="status in statuses" :key="status.text" :value="status.text === 'Все'? '': status.text ">
-               {{ status.text }}
-             </option>
-           </select>
-         </div>
+        <div class="status-filter">
+          <label for="status">Статус</label>
+          <select v-model="selectedStatus">
+            <option v-for="status in statuses" :key="status.text" :value="status.text === 'Все'? '': status.text ">
+              {{ status.text }}
+            </option>
+          </select>
+        </div>
         <button @click="applyFilters">Применить</button>
         <button @click="resetFilters">Сбросить</button>
       </div>
     </div>
     <div class="projects-container">
-      <div v-for="(item, index) in items" :key="index" class="project-item">
+      <div v-for="(item, index) in paginatedItems" :key="index" class="project-item">
         <Project
             v-if="item.type === 'project'"
             :projectName="item.name"
@@ -50,6 +50,23 @@
         <NewProjectButton v-if="item.type === 'newProjectButton' && userRole !== 'Рабочий' && userRole !== 'Прораб'" />
       </div>
     </div>
+    <div class="pagination">
+      <button @click="prevPage" :disabled="currentPage === 1">Предыдущая</button>
+      <span>
+        <template v-if="currentPage > 2">
+          <button @click="goToPage(1)">1</button>
+          <span v-if="currentPage > 3">...</span>
+        </template>
+        <button @click="goToPage(currentPage - 1)" v-if="currentPage > 1">{{ currentPage - 1 }}</button>
+        <button class="active">{{ currentPage }}</button>
+        <button @click="goToPage(currentPage + 1)" v-if="currentPage < totalPages">{{ currentPage + 1 }}</button>
+        <template v-if="currentPage < totalPages - 1">
+          <span v-if="currentPage < totalPages - 2">...</span>
+          <button @click="goToPage(totalPages)">{{ totalPages }}</button>
+        </template>
+      </span>
+      <button @click="nextPage" :disabled="currentPage === totalPages">Следующая</button>
+    </div>
   </div>
 </template>
 
@@ -70,11 +87,7 @@ export default {
       endDate: '',
       startDate: '',
       selectedStatus: '',
-      items: [
-        {
-          type: 'newProjectButton',
-        },
-      ],
+      items: [],
       statuses: [
         { text: 'Готово' },
         { text: 'Опоздание'},
@@ -83,6 +96,7 @@ export default {
         { text: 'Нет статуса' },
         { text: 'Новый' }
       ],
+      currentPage: 1,
     };
   },
   computed: {
@@ -90,6 +104,20 @@ export default {
       const user = this.$store.getters.getUser[0];
       return user ? user.role : null;
     },
+    itemsPerPage() {
+      if (this.currentPage === 1 && (this.userRole === 'Рабочий' || this.userRole === 'Прораб')) {
+        return 7;
+      }
+      return 6;
+    },
+    paginatedItems() {
+      const start = (this.currentPage - 1) * this.itemsPerPage;
+      const end = start + this.itemsPerPage;
+      return this.items.slice(start, end);
+    },
+    totalPages() {
+      return Math.ceil(this.items.length / this.itemsPerPage);
+    },
   },
   methods: {
     formatToDateTime(date) {
@@ -97,8 +125,7 @@ export default {
     },
     async applyFilters() {
       try {
-        const params = new URLSearchParams({
-        });
+        const params = new URLSearchParams({});
 
         if (this.endDate) {
           params.append('end_date', this.formatToDateTime(this.endDate));
@@ -124,7 +151,7 @@ export default {
             projectId: project.id,
           })),
         ];
-        // console.log(response.data);
+        this.currentPage = 1;
       } catch (error) {
         if(error.response.status === 401){
           this.$store.commit('removeUsers');
@@ -151,6 +178,7 @@ export default {
             projectId: project.id,
           })),
         ];
+        this.currentPage = 1;
       } catch (error) {
         if (error.response.status === 401) {
           this.$store.commit('removeUsers');  // Изменяем состояние
@@ -174,6 +202,21 @@ export default {
       this.selectedStatus = '';
       this.fetchProjects();
     },
+    prevPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+      }
+    },
+    nextPage() {
+      if (this.currentPage < this.totalPages) {
+        this.currentPage++;
+      }
+    },
+    goToPage(page) {
+      if (page >= 1 && page <= this.totalPages) {
+        this.currentPage = page;
+      }
+    },
   },
   beforeMount() {
     this.fetchProjects();
@@ -192,7 +235,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   background-color: #fff;
-  padding: 10px 20px;
+  /*padding: 10px 20px;*/
 }
 
 .search-input {
@@ -265,4 +308,34 @@ button:hover {
 .project-item {
   box-sizing: border-box;
 }
-</style>
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.pagination button {
+  background-color: #6e6b93;
+  color: white;
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 0 10px;
+}
+
+.pagination button.active {
+  background-color: #5c5583;
+}
+
+.pagination button:hover {
+  background-color: #5c5583;
+}
+
+.pagination button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/src/components/project/NewProjectButton.vue b/frontend/src/src/components/project/NewProjectButton.vue
index 5140835..d377ffe 100644
--- a/frontend/src/src/components/project/NewProjectButton.vue
+++ b/frontend/src/src/components/project/NewProjectButton.vue
@@ -18,7 +18,7 @@
   <style scoped>
   .create-project-button {
     width: 500px; /* Ширина, соответствующая компоненту проекта */
-    height: 350px; /* Высота, соответствующая компоненту проекта */
+    height: 250px; /* Высота, соответствующая компоненту проекта */
     background-color: #625b71; /* Фоновый цвет кнопки */
     color: white; /* Цвет текста */
     border: 1px solid #ccc;
diff --git a/frontend/src/src/components/project/ProjectComponent.vue b/frontend/src/src/components/project/ProjectComponent.vue
index 563221b..4f9915e 100644
--- a/frontend/src/src/components/project/ProjectComponent.vue
+++ b/frontend/src/src/components/project/ProjectComponent.vue
@@ -63,7 +63,7 @@ export default {
 .project-card {
   position: relative; /* Устанавливает относительное позиционирование для внутренних элементов */
   width: 500px;
-  height: 350px;
+  height: 250px;
   background-color: #f9f9f9;
   border: 1px solid #ccc;
   border-radius: 8px;
diff --git a/frontend/src/src/components/task/TasksListPage.vue b/frontend/src/src/components/task/TasksListPage.vue
index 61e81f2..280352e 100644
--- a/frontend/src/src/components/task/TasksListPage.vue
+++ b/frontend/src/src/components/task/TasksListPage.vue
@@ -30,7 +30,7 @@
     </div>
     <button @click="addTask">Добавить задачу</button>
 
-    <div v-if="filteredTasks.length">
+    <div v-if="paginatedTasks.length">
       <table class="task-table">
         <thead>
         <tr>
@@ -42,7 +42,7 @@
         </thead>
         <tbody>
         <tr
-            v-for="task in filteredTasks"
+            v-for="task in paginatedTasks"
             :key="task.taskId"
             :taskName="task.taskName"
             :class="{ selected: selectedTaskId === task.taskId}"
@@ -64,6 +64,24 @@
     <div v-else>
       <p>Задачи отсутствуют для этого этапа.</p>
     </div>
+
+    <div class="pagination">
+      <button @click="prevPage" :disabled="currentPage === 1">Предыдущая</button>
+      <span>
+        <template v-if="currentPage > 2">
+          <button @click="goToPage(1)">1</button>
+          <span v-if="currentPage > 3">...</span>
+        </template>
+        <button @click="goToPage(currentPage - 1)" v-if="currentPage > 1">{{ currentPage - 1 }}</button>
+        <button class="active">{{ currentPage }}</button>
+        <button @click="goToPage(currentPage + 1)" v-if="currentPage < totalPages">{{ currentPage + 1 }}</button>
+        <template v-if="currentPage < totalPages - 1">
+          <span v-if="currentPage < totalPages - 2">...</span>
+          <button @click="goToPage(totalPages)">{{ totalPages }}</button>
+        </template>
+      </span>
+      <button @click="nextPage" :disabled="currentPage === totalPages">Следующая</button>
+    </div>
   </div>
 </template>
 
@@ -94,6 +112,8 @@ export default {
         {text: 'Все'},
         {text: 'Нет статуса'}
       ],
+      currentPage: 1,
+      itemsPerPage: 10,
     };
   },
   computed: {
@@ -101,7 +121,15 @@ export default {
       return this.tasks.filter(task =>
           task.taskName.toLowerCase().includes(this.searchQuery.toLowerCase())
       );
-    }
+    },
+    paginatedTasks() {
+      const start = (this.currentPage - 1) * this.itemsPerPage;
+      const end = start + this.itemsPerPage;
+      return this.filteredTasks.slice(start, end);
+    },
+    totalPages() {
+      return Math.ceil(this.filteredTasks.length / this.itemsPerPage);
+    },
   },
   methods: {
     addTask() {
@@ -189,6 +217,7 @@ export default {
           taskId: task.id
         }));
         console.log(this.tasks);
+        this.currentPage = 1; // Сброс текущей страницы после применения фильтров
       } catch (error) {
         if (error.response.status === 401) {
           this.$store.commit('removeUsers');  // Изменяем состояние
@@ -211,6 +240,22 @@ export default {
       this.taskName = '';
       this.selectedStatus = '';
       this.fetchTaskData();
+      this.currentPage = 1; // Сброс текущей страницы после сброса фильтров
+    },
+    prevPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+      }
+    },
+    nextPage() {
+      if (this.currentPage < this.totalPages) {
+        this.currentPage++;
+      }
+    },
+    goToPage(page) {
+      if (page >= 1 && page <= this.totalPages) {
+        this.currentPage = page;
+      }
     },
   },
   beforeMount() {
@@ -324,4 +369,34 @@ button {
 button:hover {
   background-color: #5c5583;
 }
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.pagination button {
+  background-color: #6e6b93;
+  color: white;
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 0 10px;
+}
+
+.pagination button.active {
+  background-color: #5c5583;
+}
+
+.pagination button:hover {
+  background-color: #5c5583;
+}
+
+.pagination button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
 </style>