diff --git a/public/index.html b/public/index.html
index 44c26b4..ebb0970 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@ <h2 class="visually-hidden">Filter events</h2>
             </div>
           </div>
 
-          <button class="trip-main__event-add-btn  btn  btn--big  btn--yellow" type="button">New event</button>
+          <!-- Кнопка -->
         </div>
       </div>
     </header>
diff --git a/src/const.js b/src/const.js
index a54e4c7..dbbdff2 100644
--- a/src/const.js
+++ b/src/const.js
@@ -50,10 +50,24 @@ const SortType = {
   TIME: 'time',
 };
 
+const UserAction = {
+  UPDATE_EVENT: 'UPDATE_EVENT',
+  ADD_EVENT: 'ADD_EVENT',
+  DELETE_EVENT: 'DELETE_EVENT',
+};
+
+const UpdateType = {
+  PATCH: 'PATCH',
+  MINOR: 'MINOR',
+  MAJOR: 'MAJOR',
+};
+
 export {
   EVENTS_TYPES,
   CITIES,
   SENTENCES,
   FilterType,
-  SortType
+  SortType,
+  UserAction,
+  UpdateType
 };
diff --git a/src/main.js b/src/main.js
index a3efec8..2af8dc7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,10 @@
 import { render } from './framework/render.js';
 import EventsModel from './model/events-model.js';
+import FilterModel from './model/filter-model.js';
 import NewTripInfoView from './view/new-trip-info-view.js';
-import NewTripFiltersView from './view/new-filters-view.js';
 import BoardPresenter from './presenter/board-presenter.js';
-import { generateFilter } from './mock/filter.js';
+import FilterPresenter from './presenter/filter-presenter.js';
+import NewAddEventButtonView from './view/new-add-event-button-view.js';
 
 
 const tripMainContainer = document.querySelector('.trip-main');
@@ -11,16 +12,36 @@ const tripFiltersContainer = tripMainContainer.querySelector('.trip-controls__fi
 const tripEventsContainer = document.querySelector('.trip-events');
 
 const eventsModel = new EventsModel();
+const filterModel = new FilterModel();
 const boardPresenter = new BoardPresenter({
   container: tripEventsContainer,
+  eventsModel,
+  filterModel,
+  onNewEventDestroy: handleNewEventFormClose,
+});
+const filterPresenter = new FilterPresenter({
+  filterContainer: tripFiltersContainer,
+  filterModel,
   eventsModel
 });
 
-const filters = generateFilter(eventsModel.userEvents);
+const newEventButtonComponent = new NewAddEventButtonView({
+  onClick: handleNewEventButtonClick
+});
 
-render (new NewTripInfoView(), tripMainContainer, 'AFTERBEGIN');
-render (new NewTripFiltersView({filters}), tripFiltersContainer);
+function handleNewEventFormClose() {
+  newEventButtonComponent.element.disabled = false;
+}
 
+function handleNewEventButtonClick() {
+  boardPresenter.createEvent();
+  newEventButtonComponent.element.disabled = true;
+}
+
+
+render (new NewTripInfoView(), tripMainContainer, 'AFTERBEGIN');
+render(newEventButtonComponent, tripMainContainer);
 
+filterPresenter.init();
 boardPresenter.init();
 
diff --git a/src/mock/filter.js b/src/mock/filter.js
deleted file mode 100644
index af7d8a6..0000000
--- a/src/mock/filter.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { filter } from '../utils/filter.js';
-
-function generateFilter(userEvents) {
-  return Object.entries(filter).map(
-    ([filterType, filterEvents]) => ({
-      type: filterType,
-      count: filterEvents(userEvents).length,
-    }),
-  );
-}
-
-export { generateFilter };
diff --git a/src/model/events-model.js b/src/model/events-model.js
index 0f41d62..98f61b1 100644
--- a/src/model/events-model.js
+++ b/src/model/events-model.js
@@ -1,6 +1,7 @@
 import EventsConnector from './events-connector';
+import Observable from '../framework/observable.js';
 
-export default class EventsModel {
+export default class EventsModel extends Observable {
   #EventsConnector = new EventsConnector;
   #eventsList = this.#EventsConnector.userEvents;
   #destinationsData = this.#EventsConnector.destinationsData;
@@ -10,12 +11,71 @@ export default class EventsModel {
     return this.#eventsList;
   }
 
-  get destinationsData() {
+  get destinationsData () {
     return this.#destinationsData;
   }
 
+  #generateDefaultEvent = () => {
+    const defaultType = 'flight';
+    const defaultOffers = this.getOffersMapByType(defaultType);
+    return {
+      id: '',
+      basePrice: 0,
+      dateFrom: '',
+      dateTo: '',
+      destination: {},
+      isFavorite: false,
+      offers: defaultOffers,
+      type: defaultType,
+    };
+  };
+
+  get defaultEvent () {
+    return this.#generateDefaultEvent();
+  }
+
   findDestinationData = (destinationId) => this.#destinationsData.find((destination) => destination.id === destinationId);
 
   getOffersMapByType = (type) => this.#offersMap.get(type) || null;
 
+  updateEvent(updateType, update) {
+    const index = this.#eventsList.findIndex((event) => event.id === update.id);
+
+    if (index === -1) {
+      throw new Error('Can\'t update unexisting event');
+    }
+
+    this.#eventsList = [
+      ...this.#eventsList.slice(0, index),
+      update,
+      ...this.#eventsList.slice(index + 1),
+    ];
+
+    this._notify(updateType, update);
+  }
+
+  addEvent(updateType, update) {
+    this.#eventsList = [
+      update,
+      ...this.#eventsList,
+    ];
+
+    this._notify(updateType, update);
+  }
+
+  deleteEvent(updateType, update) {
+    const index = this.#eventsList.findIndex((event) => event.id === update.id);
+
+    if (index === -1) {
+      throw new Error('Can\'t delete unexisting event');
+    }
+
+    this.#eventsList = [
+      ...this.#eventsList.slice(0, index),
+      ...this.#eventsList.slice(index + 1),
+    ];
+
+    this._notify(updateType);
+  }
+
 }
diff --git a/src/model/filter-model.js b/src/model/filter-model.js
new file mode 100644
index 0000000..cd06887
--- /dev/null
+++ b/src/model/filter-model.js
@@ -0,0 +1,15 @@
+import Observable from '../framework/observable.js';
+import { FilterType } from '../const.js';
+
+export default class FilterModel extends Observable {
+  #filter = FilterType.EVERYTHING;
+
+  get filter() {
+    return this.#filter;
+  }
+
+  setFilter(updateType, filter) {
+    this.#filter = filter;
+    this._notify(updateType, filter);
+  }
+}
diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js
index 9719fbb..7cd7229 100644
--- a/src/presenter/board-presenter.js
+++ b/src/presenter/board-presenter.js
@@ -1,47 +1,83 @@
-import { render } from '../framework/render.js';
-import { updateItem } from '../utils/common.js';
+import { render, remove } from '../framework/render.js';
 import NewTripSortView from '../view/new-sort-container-view.js';
 import NewEventsListView from '../view/new-events-list-view.js';
 import EventPresenter from './event-presenter.js';
 import NoEventsView from '../view/no-events-view.js';
-import { SortType } from '../const.js';
+import NewEventPresenter from './new-event-presenter.js';
+import { SortType, UpdateType, UserAction, FilterType } from '../const.js';
 import { sortEventsPrice, sortEventsTime } from '../utils/event.js';
+import { filter } from '../utils/filter.js';
 
 
 export default class BoardPresenter {
   #container = null;
   #eventsModel = null;
+  #filterModel = null;
 
   #sortComponent = null;
+  #noEventComponent = null;
   #eventsListComponent = new NewEventsListView();
 
-  #eventsList = [];
   #eventPresenters = new Map();
+  #newEventPresenter = null;
   #currentSortType = SortType.DEFAULT;
-  #sourcedBoardEvents = [];
+  #filterType = FilterType.EVERYTHING;
   #findDestinationData = null;
   #destinationsData = null;
   #getOffersMapByType = null;
+  #defaultEvent = null;
 
-  constructor ({container, eventsModel}) {
+  constructor ({container, filterModel, eventsModel, onNewEventDestroy}) {
     this.#container = container;
     this.#eventsModel = eventsModel;
+    this.#filterModel = filterModel;
     this.#findDestinationData = this.#eventsModel.findDestinationData;
     this.#destinationsData = this.#eventsModel.destinationsData;
     this.#getOffersMapByType = this.#eventsModel.getOffersMapByType;
+    this.#defaultEvent = this.#eventsModel.defaultEvent;
+
+    this.#newEventPresenter = new NewEventPresenter({
+      eventListContainer: this.#eventsListComponent.element,
+      onDataChange: this.#handleViewAction,
+      onDestroy: onNewEventDestroy,
+      findDestinationData: this.#findDestinationData,
+      destinationsData: this.#destinationsData,
+      getOffersMapByType: this.#getOffersMapByType,
+      userEvent: this.#defaultEvent,
+    });
+
+    this.#eventsModel.addObserver(this.#handleModelEvent);
+    this.#filterModel.addObserver(this.#handleModelEvent);
+  }
+
+  get eventsList () {
+    this.#filterType = this.#filterModel.filter;
+    const userEvents = this.#eventsModel.userEvents;
+    const filteredEvents = filter[this.#filterType](userEvents);
+
+    switch (this.#currentSortType) {
+      case SortType.PRICE:
+        return filteredEvents.sort(sortEventsPrice);
+      case SortType.TIME:
+        return filteredEvents.sort(sortEventsTime);
+    }
+    return filteredEvents;
   }
 
   init () {
-    this.#eventsList = [...this.#eventsModel.userEvents];
-    this.#sourcedBoardEvents = [...this.#eventsModel.userEvents];
     this.#renderBoard();
-    this.#renderSort();
+  }
+
+  createEvent() {
+    this.#currentSortType = SortType.DEFAULT;
+    this.#filterModel.setFilter(UpdateType.MAJOR, FilterType.EVERYTHING);
+    this.#newEventPresenter.init();
   }
 
   #renderEvent(inputUserEvent) {
     const eventPresenter = new EventPresenter({
       container: this.#eventsListComponent.element,
-      onDataChange: this.#handleEventChange,
+      onDataChange: this.#handleViewAction,
       onModeChange: this.#handleModeChange,
       findDestinationData: this.#findDestinationData,
       destinationsData: this.#destinationsData,
@@ -52,22 +88,10 @@ export default class BoardPresenter {
   }
 
   #renderNoEvents() {
-    render (new NoEventsView(), this.#container);
-  }
-
-  #sortEvents(sortType) {
-    switch (sortType) {
-      case SortType.PRICE:
-        this.#eventsList.sort(sortEventsPrice);
-        break;
-      case SortType.TIME:
-        this.#eventsList.sort(sortEventsTime);
-        break;
-      default:
-        this.#eventsList = [...this.#sourcedBoardEvents];
-    }
-
-    this.#currentSortType = sortType;
+    this.#noEventComponent = new NoEventsView({
+      filterType: this.#filterType
+    });
+    render (this.#noEventComponent, this.#container);
   }
 
   #handleSortTypeChange = (sortType) => {
@@ -75,14 +99,15 @@ export default class BoardPresenter {
       return;
     }
 
-    this.#sortEvents(sortType);
+    this.#currentSortType = sortType;
 
-    this.#clearEventList();
+    this.#clearBoard();
     this.#renderBoard();
   };
 
   #renderSort() {
     this.#sortComponent = new NewTripSortView({
+      currentSortType: this.#currentSortType,
       onSortTypeChange: this.#handleSortTypeChange
     });
 
@@ -90,31 +115,67 @@ export default class BoardPresenter {
   }
 
   #renderBoard () {
-    if (this.#eventsList.length === 0) {
+    if (this.eventsList.length === 0) {
       this.#renderNoEvents();
       return;
     }
 
     render(this.#eventsListComponent, this.#container);
 
-    for (let i = 0; i < this.#eventsList.length; i++) {
-      this.#renderEvent(this.#eventsList[i]);
+    for (let i = 0; i < this.eventsList.length; i++) {
+      this.#renderEvent(this.eventsList[i]);
     }
+    this.#renderSort();
   }
 
-  #handleEventChange = (updatedEvent) => {
-    this.#eventsList = updateItem(this.#eventsList, updatedEvent);
-    this.#sourcedBoardEvents = updateItem(this.#sourcedBoardEvents, updatedEvent);
-    this.#eventPresenters.get(updatedEvent.id).init(updatedEvent);
-  };
-
   #handleModeChange = () => {
+    this.#newEventPresenter.destroy();
     this.#eventPresenters.forEach((presenter) => presenter.resetView());
   };
 
-  #clearEventList() {
+  #clearBoard({resetSortType = false} = {}) {
+    this.#newEventPresenter.destroy();
     this.#eventPresenters.forEach((presenter) => presenter.destroy());
     this.#eventPresenters.clear();
+
+    remove(this.#sortComponent);
+    if (this.#noEventComponent) {
+      remove(this.#noEventComponent);
+    }
+
+    if (resetSortType) {
+      this.#currentSortType = SortType.DEFAULT;
+    }
   }
 
+  #handleViewAction = (actionType, updateType, update) => {
+    switch (actionType) {
+      case UserAction.UPDATE_EVENT:
+        this.#eventsModel.updateEvent(updateType, update);
+        break;
+      case UserAction.ADD_EVENT:
+        this.#eventsModel.addEvent(updateType, update);
+        break;
+      case UserAction.DELETE_EVENT:
+        this.#eventsModel.deleteEvent(updateType, update);
+        break;
+    }
+  };
+
+  #handleModelEvent = (updateType, data) => {
+    switch (updateType) {
+      case UpdateType.PATCH:
+        this.#eventPresenters.get(data.id).init(data);
+        break;
+      case UpdateType.MINOR:
+        this.#clearBoard();
+        this.#renderBoard();
+        break;
+      case UpdateType.MAJOR:
+        this.#clearBoard({resetSortType: true});
+        this.#renderBoard();
+        break;
+    }
+  };
+
 }
diff --git a/src/presenter/event-presenter.js b/src/presenter/event-presenter.js
index 99aeaf6..2b76a7a 100644
--- a/src/presenter/event-presenter.js
+++ b/src/presenter/event-presenter.js
@@ -2,6 +2,8 @@ import { render, replace, remove } from '../framework/render.js';
 import { isEscapeKey } from '../utils/common.js';
 import NewEventsItemView from '../view/new-events-item-view.js';
 import NewEventEditElementView from '../view/new-event-edit-element-view.js';
+import { UserAction, UpdateType } from '../const.js';
+import {isEventFuture, isEventPresent, isEventPast, isDatesEqual} from '../utils/event.js';
 
 const Mode = {
   DEFAULT: 'DEFAULT',
@@ -44,10 +46,13 @@ export default class EventPresenter {
     });
     this.#eventEditComponent = new NewEventEditElementView({
       userEvent: this.#eventItem,
-      onClick: this.#handleSaveClick,
+      onClick: this.#handleOpenEventClick,
+      onSubmit: this.#handleFormSubmit,
+      onDeleteClick: this.#handleDeleteClick,
       findDestinationData: this.#findDestinationData,
       destinationsData: this.#destinationsData,
       getOffersMapByType: this.#getOffersMapByType,
+
     });
 
     if (prevEventComponent === null || prevEventEditComponent === null) {
@@ -101,12 +106,45 @@ export default class EventPresenter {
     this.#replaceEventCardToEditForm();
   };
 
+  #handleDeleteClick = (event) => {
+    this.#handleDataChange(
+      UserAction.DELETE_EVENT,
+      UpdateType.MINOR,
+      event,
+    );
+  };
+
   #handleFavoriteClick = () => {
-    this.#handleDataChange({...this.#eventItem, isFavorite: !this.#eventItem.isFavorite});
+    this.#handleDataChange(
+      UserAction.UPDATE_EVENT,
+      UpdateType.MINOR,
+      {...this.#eventItem, isFavorite: !this.#eventItem.isFavorite}
+    );
+  };
+
+  #handleOpenEventClick = (eventItem) => {
+    this.#handleDataChange(
+      UserAction.UPDATE_EVENT,
+      UpdateType.MINOR,
+      eventItem,
+    );
+    this.#replaceEditFormToEventCard();
   };
 
-  #handleSaveClick = (eventItem) => {
-    this.#handleDataChange(eventItem);
+  #handleFormSubmit = (update) => {
+
+    const isMinorUpdate =
+        !isDatesEqual(this.#eventItem.dateFrom, update.dateFrom) ||
+        !isDatesEqual(this.#eventItem.dateTo, update.dateTo) ||
+        isEventFuture(update.dateFrom) !== isEventFuture(this.#eventItem.dateFrom) ||
+        isEventPresent(update.dateFrom, update.dateTo) !== isEventPresent(this.#eventItem.dateFrom, this.#eventItem.dateTo) ||
+        isEventPast(update.dateTo) !== isEventPast(this.#eventItem.dateTo);
+
+    this.#handleDataChange(
+      UserAction.UPDATE_EVENT,
+      isMinorUpdate ? UpdateType.MINOR : UpdateType.PATCH,
+      update,
+    );
     this.#replaceEditFormToEventCard();
   };
 
diff --git a/src/presenter/filter-presenter.js b/src/presenter/filter-presenter.js
new file mode 100644
index 0000000..52a5f9a
--- /dev/null
+++ b/src/presenter/filter-presenter.js
@@ -0,0 +1,61 @@
+import { render, replace, remove } from '../framework/render.js';
+import NewTripFiltersView from '../view/new-filters-view.js';
+import { filter } from '../utils/filter.js';
+import { FilterType, UpdateType } from '../const.js';
+
+export default class FilterPresenter {
+  #filterContainer = null;
+  #filterModel = null;
+  #eventsModel = null;
+
+  #filterComponent = null;
+
+  constructor({filterContainer, filterModel, eventsModel}) {
+    this.#filterContainer = filterContainer;
+    this.#filterModel = filterModel;
+    this.#eventsModel = eventsModel;
+
+    this.#eventsModel.addObserver(this.#handleModelEvent);
+    this.#filterModel.addObserver(this.#handleModelEvent);
+  }
+
+  get filters() {
+    const userEvents = this.#eventsModel.userEvents;
+
+    return Object.values(FilterType).map((type) => ({
+      type,
+      count: filter[type](userEvents).length
+    }));
+  }
+
+  init() {
+    const filters = this.filters;
+    const prevFilterComponent = this.#filterComponent;
+
+    this.#filterComponent = new NewTripFiltersView({
+      filters,
+      currentFilterType: this.#filterModel.filter,
+      onFilterTypeChange: this.#handleFilterTypeChange
+    });
+
+    if (prevFilterComponent === null) {
+      render(this.#filterComponent, this.#filterContainer);
+      return;
+    }
+
+    replace(this.#filterComponent, prevFilterComponent);
+    remove(prevFilterComponent);
+  }
+
+  #handleModelEvent = () => {
+    this.init();
+  };
+
+  #handleFilterTypeChange = (filterType) => {
+    if (this.#filterModel.filter === filterType) {
+      return;
+    }
+
+    this.#filterModel.setFilter(UpdateType.MAJOR, filterType);
+  };
+}
diff --git a/src/presenter/new-event-presenter.js b/src/presenter/new-event-presenter.js
new file mode 100644
index 0000000..014f173
--- /dev/null
+++ b/src/presenter/new-event-presenter.js
@@ -0,0 +1,81 @@
+import { remove, render, RenderPosition } from '../framework/render.js';
+import NewEventEditElementView from '../view/new-event-edit-element-view.js';
+import { nanoid } from 'nanoid';
+import { UserAction, UpdateType } from '../const.js';
+
+export default class NewEventPresenter {
+  #eventListContainer = null;
+  #handleDataChange = null;
+  #handleDestroy = null;
+
+  #findDestinationData = null;
+  #destinationsData = null;
+  #getOffersMapByType = null;
+  #userEvent = null;
+
+  #eventEditComponent = null;
+
+  constructor({eventListContainer, onDataChange, onDestroy, findDestinationData, destinationsData, getOffersMapByType, userEvent}) {
+    this.#eventListContainer = eventListContainer;
+    this.#handleDataChange = onDataChange;
+    this.#handleDestroy = onDestroy;
+    this.#findDestinationData = findDestinationData;
+    this.#destinationsData = destinationsData;
+    this.#getOffersMapByType = getOffersMapByType;
+    this.#userEvent = userEvent;
+  }
+
+  init() {
+    if (this.#eventEditComponent !== null) {
+      return;
+    }
+
+    this.#eventEditComponent = new NewEventEditElementView({
+      userEvent: this.#userEvent,
+      onClick: this.#handleDeleteClick,
+      onSubmit: this.#handleFormSubmit,
+      onDeleteClick: this.#handleDeleteClick,
+      findDestinationData: this.#findDestinationData,
+      destinationsData: this.#destinationsData,
+      getOffersMapByType: this.#getOffersMapByType,
+      isDefaultEvent: true,
+    });
+
+    render(this.#eventEditComponent, this.#eventListContainer, RenderPosition.AFTERBEGIN);
+
+    document.addEventListener('keydown', this.#escKeyDownHandler);
+  }
+
+  destroy() {
+    if (this.#eventEditComponent === null) {
+      return;
+    }
+
+    this.#handleDestroy();
+
+    remove(this.#eventEditComponent);
+    this.#eventEditComponent = null;
+
+    document.removeEventListener('keydown', this.#escKeyDownHandler);
+  }
+
+  #handleFormSubmit = (event) => {
+    this.#handleDataChange(
+      UserAction.ADD_EVENT,
+      UpdateType.MINOR,
+      {id: nanoid(), ...event},
+    );
+    this.destroy();
+  };
+
+  #handleDeleteClick = () => {
+    this.destroy();
+  };
+
+  #escKeyDownHandler = (evt) => {
+    if (evt.key === 'Escape' || evt.key === 'Esc') {
+      evt.preventDefault();
+      this.destroy();
+    }
+  };
+}
diff --git a/src/utils/common.js b/src/utils/common.js
index ac2612d..fb2a07f 100644
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -47,10 +47,8 @@ const convertKeysToCamelCase = (items) => {
   return items;
 };
 
-const updateItem = (items, update) => items.map((item) => item.id === update.id ? update : item);
 
 export {
-  updateItem,
   getRandomNumber,
   getRandomString,
   getRandomBoolean,
diff --git a/src/utils/event.js b/src/utils/event.js
index 50ed9f5..af33c9b 100644
--- a/src/utils/event.js
+++ b/src/utils/event.js
@@ -2,18 +2,19 @@ import dayjs from 'dayjs';
 
 const humanizeDueDate = (dueDate, dateFormat) => dueDate ? dayjs(dueDate).format(dateFormat) : '';
 
-const isEventFuture = (dateFrom) => dateFrom && dayjs().isAfter(dateFrom, 'D');
+const isEventFuture = (dateFrom) => dateFrom && dayjs().isBefore(dateFrom, 'D');
 
 const isEventPresent = (dateFrom, dateTo) => {
   const now = dayjs();
   return dateFrom && dateTo &&
-  now.isAfter(dateFrom, 'D') &&
-  now.isBefore(dateTo, 'D') ||
-  now.isSame(dateTo, 'D');
+         (now.isAfter(dateFrom, 'D') || now.isSame(dateFrom, 'D')) &&
+         (now.isBefore(dateTo, 'D') || now.isSame(dateTo, 'D'));
 };
 
 const isEventPast = (dateTo) => dateTo && dayjs().isAfter(dateTo, 'D');
 
+const isDatesEqual = (dateA, dateB) => (dateA === null && dateB === null) || dayjs(dateA).isSame(dateB, 'D');
+
 const sortEventsPrice = (eventA, eventB) => eventB.basePrice - eventA.basePrice;
 
 const sortEventsTime = (eventA, eventB) => {
@@ -33,6 +34,7 @@ export {
   isEventFuture,
   isEventPresent,
   isEventPast,
+  isDatesEqual,
   sortEventsPrice,
   sortEventsTime
 };
diff --git a/src/utils/filter.js b/src/utils/filter.js
index 549190a..9492cff 100644
--- a/src/utils/filter.js
+++ b/src/utils/filter.js
@@ -4,8 +4,8 @@ import { isEventFuture, isEventPresent, isEventPast } from './event';
 const filter = {
   [FilterType.EVERYTHING]: (userEvents) => userEvents,
   [FilterType.FUTURE]: (userEvents) => userEvents.filter((userEvent) => isEventFuture(userEvent.dateFrom)),
-  [FilterType.PRESENT]: (userEvents) => userEvents.filter((userEvent) => isEventPresent(userEvent.dateFrom)),
-  [FilterType.PAST]: (userEvents) => userEvents.filter((userEvent) => isEventPast(userEvent.dateFrom)),
+  [FilterType.PRESENT]: (userEvents) => userEvents.filter((userEvent) => isEventPresent(userEvent.dateFrom, userEvent.dateTo)),
+  [FilterType.PAST]: (userEvents) => userEvents.filter((userEvent) => isEventPast(userEvent.dateTo)),
 };
 
 export { filter };
diff --git a/src/view/new-add-event-button-view.js b/src/view/new-add-event-button-view.js
new file mode 100644
index 0000000..a3143bc
--- /dev/null
+++ b/src/view/new-add-event-button-view.js
@@ -0,0 +1,24 @@
+import AbstractView from '../framework/view/abstract-view';
+
+
+const createAddEventButtonTemplate = () => '<button class="trip-main__event-add-btn  btn  btn--big  btn--yellow" type="button">New event</button>';
+
+export default class NewAddEventButtonView extends AbstractView {
+  #handleClick = null;
+
+  constructor({onClick}) {
+    super();
+    this.#handleClick = onClick;
+    this.element.addEventListener('click', this.#clickHandler);
+  }
+
+  get template() {
+    return createAddEventButtonTemplate();
+  }
+
+  #clickHandler = (evt) => {
+    evt.preventDefault();
+    this.#handleClick();
+  };
+
+}
diff --git a/src/view/new-event-add-element-view.js b/src/view/new-event-add-element-view.js
deleted file mode 100644
index 70af7d5..0000000
--- a/src/view/new-event-add-element-view.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import AbstractView from '../framework/view/abstract-view';
-
-function createNewEventAddElementTemplate() {
-  return `<li class="trip-events__item">
-              <form class="event event--edit" action="#" method="post">
-                <header class="event__header">
-                  <div class="event__type-wrapper">
-                    <label class="event__type  event__type-btn" for="event-type-toggle-1">
-                      <span class="visually-hidden">Choose event type</span>
-                      <img class="event__type-icon" width="17" height="17" src="img/icons/flight.png" alt="Event type icon">
-                    </label>
-                    <input class="event__type-toggle  visually-hidden" id="event-type-toggle-1" type="checkbox">
-
-                    <div class="event__type-list">
-                      <fieldset class="event__type-group">
-                        <legend class="visually-hidden">Event type</legend>
-
-                        <div class="event__type-item">
-                          <input id="event-type-taxi-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="taxi">
-                          <label class="event__type-label  event__type-label--taxi" for="event-type-taxi-1">Taxi</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-bus-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="bus">
-                          <label class="event__type-label  event__type-label--bus" for="event-type-bus-1">Bus</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-train-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="train">
-                          <label class="event__type-label  event__type-label--train" for="event-type-train-1">Train</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-ship-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="ship">
-                          <label class="event__type-label  event__type-label--ship" for="event-type-ship-1">Ship</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-drive-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="drive">
-                          <label class="event__type-label  event__type-label--drive" for="event-type-drive-1">Drive</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-flight-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="flight" checked>
-                          <label class="event__type-label  event__type-label--flight" for="event-type-flight-1">Flight</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-check-in-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="check-in">
-                          <label class="event__type-label  event__type-label--check-in" for="event-type-check-in-1">Check-in</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-sightseeing-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="sightseeing">
-                          <label class="event__type-label  event__type-label--sightseeing" for="event-type-sightseeing-1">Sightseeing</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-restaurant-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="restaurant">
-                          <label class="event__type-label  event__type-label--restaurant" for="event-type-restaurant-1">Restaurant</label>
-                        </div>
-                      </fieldset>
-                    </div>
-                  </div>
-
-                  <div class="event__field-group  event__field-group--destination">
-                    <label class="event__label  event__type-output" for="event-destination-1">
-                      Flight
-                    </label>
-                    <input class="event__input  event__input--destination" id="event-destination-1" type="text" name="event-destination" value="Geneva" list="destination-list-1">
-                    <datalist id="destination-list-1">
-                      <option value="Amsterdam"></option>
-                      <option value="Geneva"></option>
-                      <option value="Chamonix"></option>
-                    </datalist>
-                  </div>
-
-                  <div class="event__field-group  event__field-group--time">
-                    <label class="visually-hidden" for="event-start-time-1">From</label>
-                    <input class="event__input  event__input--time" id="event-start-time-1" type="text" name="event-start-time" value="19/03/19 00:00">
-                    &mdash;
-                    <label class="visually-hidden" for="event-end-time-1">To</label>
-                    <input class="event__input  event__input--time" id="event-end-time-1" type="text" name="event-end-time" value="19/03/19 00:00">
-                  </div>
-
-                  <div class="event__field-group  event__field-group--price">
-                    <label class="event__label" for="event-price-1">
-                      <span class="visually-hidden">Price</span>
-                      &euro;
-                    </label>
-                    <input class="event__input  event__input--price" id="event-price-1" type="text" name="event-price" value="">
-                  </div>
-
-                  <button class="event__save-btn  btn  btn--blue" type="submit">Save</button>
-                  <button class="event__reset-btn" type="reset">Cancel</button>
-                </header>
-                <section class="event__details">
-                  <section class="event__section  event__section--offers">
-                    <h3 class="event__section-title  event__section-title--offers">Offers</h3>
-
-                    <div class="event__available-offers">
-                      <div class="event__offer-selector">
-                        <input class="event__offer-checkbox  visually-hidden" id="event-offer-luggage-1" type="checkbox" name="event-offer-luggage" checked>
-                        <label class="event__offer-label" for="event-offer-luggage-1">
-                          <span class="event__offer-title">Add luggage</span>
-                          &plus;&euro;&nbsp;
-                          <span class="event__offer-price">30</span>
-                        </label>
-                      </div>
-
-                      <div class="event__offer-selector">
-                        <input class="event__offer-checkbox  visually-hidden" id="event-offer-comfort-1" type="checkbox" name="event-offer-comfort" checked>
-                        <label class="event__offer-label" for="event-offer-comfort-1">
-                          <span class="event__offer-title">Switch to comfort class</span>
-                          &plus;&euro;&nbsp;
-                          <span class="event__offer-price">100</span>
-                        </label>
-                      </div>
-
-                      <div class="event__offer-selector">
-                        <input class="event__offer-checkbox  visually-hidden" id="event-offer-meal-1" type="checkbox" name="event-offer-meal">
-                        <label class="event__offer-label" for="event-offer-meal-1">
-                          <span class="event__offer-title">Add meal</span>
-                          &plus;&euro;&nbsp;
-                          <span class="event__offer-price">15</span>
-                        </label>
-                      </div>
-
-                      <div class="event__offer-selector">
-                        <input class="event__offer-checkbox  visually-hidden" id="event-offer-seats-1" type="checkbox" name="event-offer-seats">
-                        <label class="event__offer-label" for="event-offer-seats-1">
-                          <span class="event__offer-title">Choose seats</span>
-                          &plus;&euro;&nbsp;
-                          <span class="event__offer-price">5</span>
-                        </label>
-                      </div>
-
-                      <div class="event__offer-selector">
-                        <input class="event__offer-checkbox  visually-hidden" id="event-offer-train-1" type="checkbox" name="event-offer-train">
-                        <label class="event__offer-label" for="event-offer-train-1">
-                          <span class="event__offer-title">Travel by train</span>
-                          &plus;&euro;&nbsp;
-                          <span class="event__offer-price">40</span>
-                        </label>
-                      </div>
-                    </div>
-                  </section>
-
-                  <section class="event__section  event__section--destination">
-                    <h3 class="event__section-title  event__section-title--destination">Destination</h3>
-                    <p class="event__destination-description">Geneva is a city in Switzerland that lies at the southern tip of expansive Lac Léman (Lake Geneva). Surrounded by the Alps and Jura mountains, the city has views of dramatic Mont Blanc.</p>
-
-                    <div class="event__photos-container">
-                      <div class="event__photos-tape">
-                        <img class="event__photo" src="img/photos/1.jpg" alt="Event photo">
-                        <img class="event__photo" src="img/photos/2.jpg" alt="Event photo">
-                        <img class="event__photo" src="img/photos/3.jpg" alt="Event photo">
-                        <img class="event__photo" src="img/photos/4.jpg" alt="Event photo">
-                        <img class="event__photo" src="img/photos/5.jpg" alt="Event photo">
-                      </div>
-                    </div>
-                  </section>
-                </section>
-              </form>
-            </li>`;
-}
-
-export default class NewEventAddElementView extends AbstractView {
-  get template () {
-    return createNewEventAddElementTemplate();
-  }
-}
diff --git a/src/view/new-event-edit-element-view.js b/src/view/new-event-edit-element-view.js
index 928264e..072f002 100644
--- a/src/view/new-event-edit-element-view.js
+++ b/src/view/new-event-edit-element-view.js
@@ -24,6 +24,19 @@ const createOffers = (offersMap) => {
   return offersHTML;
 };
 
+const createOffersContainer = (offersMap) => {
+  if (!offersMap.size > 0) {
+    return '';
+  }
+  return `<section class="event__section  event__section--offers">
+                    <h3 class="event__section-title  event__section-title--offers">Offers</h3>
+
+                    <div class="event__available-offers">
+                    ${createOffers(offersMap)}
+                    </div>
+                  </section>`;
+};
+
 const createType = (type) => {
   const typeToLowerCase = type.toLowerCase();
   return `<div class="event__type-item">
@@ -54,7 +67,26 @@ const createDestinations = (destinationsList) => {
   return destinationsHTML;
 };
 
-const createNewEventEditElementTemplate = (eventData, destinationsList) => {
+const createDestinationDescription = (description) => {
+  if (!description) {
+    return '';
+  }
+  return `<section class="event__section  event__section--destination">
+                    <h3 class="event__section-title  event__section-title--destination">Destination</h3>
+                    <p class="event__destination-description">${description}</p>
+                  </section>`;
+};
+
+const createOpenEventButton = (isDefaultEvent) => {
+  if (isDefaultEvent) {
+    return '';
+  }
+  return `<button class="event__rollup-btn" type="button">
+                    <span class="visually-hidden">Open event</span>
+                  </button>`;
+};
+
+const createNewEventEditElementTemplate = (eventData, destinationsList, isDefaultEvent) => {
   const {basePrice, type, offers, destination, dateFrom, dateTo} = eventData;
 
   return `<li class="trip-events__item">
@@ -79,7 +111,7 @@ const createNewEventEditElementTemplate = (eventData, destinationsList) => {
                     <label class="event__label  event__type-output" for="event-destination-1">
                       ${type}
                     </label>
-                    <input class="event__input  event__input--destination" id="${destination.id}" type="text" name="event-destination" value="${destination.name}" list="destination-list-1">
+                    <input class="event__input  event__input--destination" id="${destination.id === undefined ? '' : destination.id}" type="text" name="event-destination" value="${destination.name === undefined ? '' : destination.name}" list="destination-list-1">
                     <datalist id="destination-list-1">
                     ${createDestinations(destinationsList)}
                     </datalist>
@@ -103,23 +135,11 @@ const createNewEventEditElementTemplate = (eventData, destinationsList) => {
 
                   <button class="event__save-btn  btn  btn--blue" type="submit">Save</button>
                   <button class="event__reset-btn" type="reset">Delete</button>
-                  <button class="event__rollup-btn" type="button">
-                    <span class="visually-hidden">Open event</span>
-                  </button>
+                  ${createOpenEventButton(isDefaultEvent)}
                 </header>
                 <section class="event__details">
-                  <section class="event__section  event__section--offers">
-                    <h3 class="event__section-title  event__section-title--offers">Offers</h3>
-
-                    <div class="event__available-offers">
-                    ${createOffers(offers)}
-                    </div>
-                  </section>
-
-                  <section class="event__section  event__section--destination">
-                    <h3 class="event__section-title  event__section-title--destination">Destination</h3>
-                    <p class="event__destination-description">${destination.description}</p>
-                  </section>
+                    ${createOffersContainer(offers)}
+                    ${createDestinationDescription(destination.description)}
                 </section>
               </form>
             </li>`;
@@ -128,24 +148,28 @@ const createNewEventEditElementTemplate = (eventData, destinationsList) => {
 export default class NewEventEditElementView extends AbstractStatefulView {
   #eventData = null;
   #handleClick = null;
+  #handleDeleteClick = null;
   #rollupButton = null;
   #destinationsData = null;
   #findDestinationData = null;
   #getOffersMapByType = null;
   #datepicker = null;
+  #isDefaultEvent = null;
 
   #handleSubmit = null;
   #formElement = null;
 
-  constructor ({userEvent, onClick, findDestinationData, destinationsData, getOffersMapByType, onSubmit}) {
+  constructor ({userEvent, onClick, onSubmit, onDeleteClick, findDestinationData, destinationsData, getOffersMapByType, isDefaultEvent}) {
     super();
     this.#eventData = userEvent;
     this.#findDestinationData = findDestinationData;
     this.#destinationsData = destinationsData;
     this.#getOffersMapByType = getOffersMapByType;
+    this.#isDefaultEvent = isDefaultEvent;
     this._setState(NewEventEditElementView.parseEventDataToState(userEvent));
 
     this.#handleClick = onClick;
+    this.#handleDeleteClick = onDeleteClick;
     this.#handleSubmit = onSubmit;
 
     this._restoreHandlers();
@@ -153,7 +177,7 @@ export default class NewEventEditElementView extends AbstractStatefulView {
   }
 
   get template () {
-    return createNewEventEditElementTemplate(this._state, this.#destinationsData);
+    return createNewEventEditElementTemplate(this._state, this.#destinationsData, this.#isDefaultEvent);
   }
 
   removeElement() {
@@ -175,7 +199,12 @@ export default class NewEventEditElementView extends AbstractStatefulView {
     this.#rollupButton = this.element.querySelector('.event__rollup-btn');
     this.#formElement = this.element.querySelector('.event--edit');
     this.#formElement.addEventListener('submit', this.#submitHandler);
-    this.#rollupButton.addEventListener('click', this.#clickHandler);
+    if (!this.#isDefaultEvent) {
+      this.#rollupButton.addEventListener('click', this.#clickHandler);
+    }
+
+    this.element.querySelector('.event__reset-btn')
+      .addEventListener('click', this.#deleteHandler);
 
     this.element.querySelector('#event-price-1')
       .addEventListener('input', this.#eventPriceToggleHandler);
@@ -201,7 +230,12 @@ export default class NewEventEditElementView extends AbstractStatefulView {
 
   #submitHandler = (evt) => {
     evt.preventDefault();
-    this.#handleClick(NewEventEditElementView.parseStateToEventData(this._state));
+    this.#handleSubmit(NewEventEditElementView.parseStateToEventData(this._state));
+  };
+
+  #deleteHandler = (evt) => {
+    evt.preventDefault();
+    this.#handleDeleteClick(NewEventEditElementView.parseStateToEventData(this._state));
   };
 
   removeEventListeners() {
@@ -294,7 +328,7 @@ export default class NewEventEditElementView extends AbstractStatefulView {
     evt.preventDefault();
 
     const offerId = evt.currentTarget.dataset.offerId;
-    const offers = new Map (this._state.offers);
+    const offers = this._state.offers;
 
     if (offers.has(offerId)) {
       const offer = offers.get(offerId);
diff --git a/src/view/new-events-item-view.js b/src/view/new-events-item-view.js
index a4ac1cc..7449a5d 100644
--- a/src/view/new-events-item-view.js
+++ b/src/view/new-events-item-view.js
@@ -35,7 +35,9 @@ const createNewOffer = (offer) => {
 const createOffers = (offers) => {
   let offersHTML = '';
   offers.forEach((offer) => {
-    offersHTML += createNewOffer(offer);
+    if (offer.isActive) {
+      offersHTML += createNewOffer(offer);
+    }
   });
   return offersHTML;
 };
diff --git a/src/view/new-filters-view.js b/src/view/new-filters-view.js
index 4d7ed05..1fc01cb 100644
--- a/src/view/new-filters-view.js
+++ b/src/view/new-filters-view.js
@@ -1,6 +1,6 @@
 import AbstractView from '../framework/view/abstract-view';
 
-const createFilterItemTemplate = (filter, isChecked) => {
+const createFilterItemTemplate = (filter, currentFilterType) => {
   const {type, count} = filter;
 
   return `<div class="trip-filters__filter">
@@ -10,15 +10,15 @@ const createFilterItemTemplate = (filter, isChecked) => {
                   type="radio"
                   name="trip-filter"
                   value="${type}"
-                  ${isChecked ? 'checked' : ''}
+                  ${type === currentFilterType ? 'checked' : ''}
                   ${count === 0 ? 'disabled' : ''}>
                   <label class="trip-filters__filter-label" for="filter-${type}">${type}</label>
                 </div>`;
 };
 
-const createNewTripFiltersTemplate = (filterItems) => {
+const createNewTripFiltersTemplate = (filterItems, currentFilterType) => {
   const filterItemsTemplate = filterItems
-    .map((filter, index) => createFilterItemTemplate(filter, index === 0))
+    .map((filter) => createFilterItemTemplate(filter, currentFilterType))
     .join('');
 
   return `<form class="trip-filters" action="#" method="get">
@@ -29,13 +29,24 @@ const createNewTripFiltersTemplate = (filterItems) => {
 
 export default class NewTripFiltersView extends AbstractView {
   #filters = null;
+  #currentFilter = null;
+  #handleFilterTypeChange = null;
 
-  constructor (filters) {
+  constructor ({filters, currentFilterType, onFilterTypeChange}) {
     super();
     this.#filters = filters;
+    this.#currentFilter = currentFilterType;
+    this.#handleFilterTypeChange = onFilterTypeChange;
+
+    this.element.addEventListener('change', this.#filterTypeChangeHandler);
   }
 
   get template () {
-    return createNewTripFiltersTemplate(this.#filters.filters);
+    return createNewTripFiltersTemplate(this.#filters, this.#currentFilter);
   }
+
+  #filterTypeChangeHandler = (evt) => {
+    evt.preventDefault();
+    this.#handleFilterTypeChange(evt.target.value);
+  };
 }
diff --git a/src/view/new-sort-container-view.js b/src/view/new-sort-container-view.js
index d5fdcc8..8cc9c73 100644
--- a/src/view/new-sort-container-view.js
+++ b/src/view/new-sort-container-view.js
@@ -1,10 +1,10 @@
 import AbstractView from '../framework/view/abstract-view';
 import { SortType } from '../const';
 
-function createNewTripSortTemplate() {
+function createNewTripSortTemplate(currentSortType) {
   return `<form class="trip-events__trip-sort  trip-sort" action="#" method="get">
             <div class="trip-sort__item  trip-sort__item--day">
-              <input id="sort-day" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-day" checked>
+              <input id="sort-day" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-day"${currentSortType === SortType.DEFAULT ? 'checked' : ''}>
               <label class="trip-sort__btn" for="sort-day" data-sort-type="${SortType.DEFAULT}">Day</label>
             </div>
 
@@ -14,12 +14,12 @@ function createNewTripSortTemplate() {
             </div>
 
             <div class="trip-sort__item  trip-sort__item--time">
-              <input id="sort-time" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-time">
+              <input id="sort-time" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-time"${currentSortType === SortType.TIME ? 'checked' : ''}>
               <label class="trip-sort__btn" for="sort-time" data-sort-type="${SortType.TIME}">Time</label>
             </div>
 
             <div class="trip-sort__item  trip-sort__item--price">
-              <input id="sort-price" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-price">
+              <input id="sort-price" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-price"${currentSortType === SortType.PRICE ? 'checked' : ''}>
               <label class="trip-sort__btn" for="sort-price" data-sort-type="${SortType.PRICE}">Price</label>
             </div>
 
@@ -32,16 +32,18 @@ function createNewTripSortTemplate() {
 
 export default class NewTripSortView extends AbstractView {
   #handleSortTypeChange = null;
+  #currentSortType = null;
 
-  constructor({onSortTypeChange}) {
+  constructor({currentSortType, onSortTypeChange}) {
     super();
+    this.#currentSortType = currentSortType;
     this.#handleSortTypeChange = onSortTypeChange;
 
     this.element.addEventListener('click', this.#sortTypeChangeHandler);
   }
 
   get template () {
-    return createNewTripSortTemplate();
+    return createNewTripSortTemplate(this.#currentSortType);
   }
 
   #sortTypeChangeHandler = (evt) => {
diff --git a/src/view/no-events-view.js b/src/view/no-events-view.js
index 382d50d..cacd286 100644
--- a/src/view/no-events-view.js
+++ b/src/view/no-events-view.js
@@ -1,11 +1,27 @@
 import AbstractView from '../framework/view/abstract-view';
+import { FilterType } from '../const.js';
 
-function createNoEventsViewTemplate() {
-  return '<p class="trip-events__msg">Loading...</p>';
-}
+const NoTasksTextType = {
+  [FilterType.EVERYTHING]: 'Click New Event to create your first point',
+  [FilterType.FUTURE]: 'There are no future events',
+  [FilterType.PRESENT]: 'There are no present events',
+  [FilterType.PAST]: 'There are no past events',
+};
+
+const createNoEventsViewTemplate = (filterType) => {
+  const noEventTextValue = NoTasksTextType[filterType];
+  return `<p class="trip-events__msg">${noEventTextValue}</p>`;
+};
 
 export default class NoEventsView extends AbstractView {
+  #filterType = null;
+
+  constructor({filterType}) {
+    super();
+    this.#filterType = filterType;
+  }
+
   get template () {
-    return createNoEventsViewTemplate();
+    return createNoEventsViewTemplate(this.#filterType);
   }
 }