diff --git a/js/data.js b/js/data.js
index c5962f6..bbcf9b8 100644
--- a/js/data.js
+++ b/js/data.js
@@ -94,6 +94,6 @@ const createPhoto = () => {
   };
 };
 
-const CreatePhotoList = () => Array.from({length: PHOTO_LIST_LENGTH}, createPhoto());
+const createPhotoList = () => Array.from({length: PHOTO_LIST_LENGTH}, createPhoto());
 
-export {CreatePhotoList};
+export {createPhotoList, createComment};
diff --git a/js/main.js b/js/main.js
index 6285485..db70755 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,12 @@
 import './util.js';
-import {CreatePhotoList} from './data.js';
-import './thumbnails.js';
+import {createPhotoList} from './data.js';
+import {renderThumbnails, picturesContainer} from './render-thumbnails.js';
+import {initClickListener} from './open-full-picture.js';
+
+const data = createPhotoList();
+
+renderThumbnails(data);
+initClickListener(data);
+
+
 
-console.log(CreatePhotoList());
diff --git a/js/open-full-picture.js b/js/open-full-picture.js
new file mode 100644
index 0000000..928c1a8
--- /dev/null
+++ b/js/open-full-picture.js
@@ -0,0 +1,56 @@
+import {isEscapeKey} from './util.js';
+import {picturesContainer} from './render-thumbnails.js';
+import { clearComments, renderComments } from './render-comments.js';
+
+const fullPicture = document.querySelector('.big-picture');
+const closeButton = document.querySelector('.big-picture__cancel');
+
+const onDocumentKeydown = (evt) => {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    closeFullPicture();
+  }
+};
+
+const onClickButtonClose = (evt) => {
+  evt.preventDefault();
+  closeFullPicture();
+};
+
+
+const openFullPicture = (pictureId, data) => {
+  const currentPhoto = data.find((photo) => photo.id === Number(pictureId));
+
+  document.querySelector('body').classList.add('modal-open');
+  fullPicture.classList.remove('hidden');
+
+  document.querySelector('.big-picture .big-picture__img img').src = currentPhoto.url;
+  document.querySelector('.likes-count').textContent = currentPhoto.likes;
+  document.querySelector('.social__comment-shown-count').textContent = currentPhoto.comments.length;
+  document.querySelector('.social__caption').textContent = currentPhoto.description;
+
+  renderComments(currentPhoto.comments);
+
+  document.addEventListener('keydown', onDocumentKeydown);
+  closeButton.addEventListener('click', onClickButtonClose);
+};
+
+function closeFullPicture() {
+  clearComments();
+  fullPicture.classList.add('hidden');
+  document.querySelector('body').classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+}
+
+const initClickListener = (data) => {
+  picturesContainer.addEventListener('click', (evt) => {
+    const currentPicture = evt.target.closest('.picture');
+
+    if (currentPicture) {
+      openFullPicture(currentPicture.dataset.pictureId, data);
+    }
+  });
+};
+
+export {openFullPicture, closeFullPicture, initClickListener};
+
diff --git a/js/render-comments.js b/js/render-comments.js
new file mode 100644
index 0000000..40f1d54
--- /dev/null
+++ b/js/render-comments.js
@@ -0,0 +1,53 @@
+const commentsList = document.querySelector('.social__comments');
+const commentTemplate = commentsList.querySelector('.social__comment');
+const commentCount = document.querySelector('.social__comment-count');
+const commentsLoader = document.querySelector('.social__comment-loader');
+
+const VISIBLE_COMMENTS = 5;
+let shownComments = 0;
+let comments = [];
+
+commentsList.innerHTML = '';
+
+const renderNextComments = () => {
+  const commentsFragment = document.createDocumentFragment();
+  const renderedComments = comments.slice(shownComments, shownComments + VISIBLE_COMMENTS);
+  const renderedCommentsLength = renderedComments.length + shownComments;
+
+  renderedComments.forEach ((comment) => {
+    const pictureComment = commentTemplate.cloneNode(true);
+
+    pictureComment.querySelector('.social__picture').src = comment.avatar;
+    pictureComment.querySelector('.social__picture').alt = comment.name;
+    pictureComment.querySelector('.social__text').textContent = comment.message;
+
+    commentsFragment.appendChild(pictureComment);
+  });
+
+  commentsList.appendChild(commentsFragment);
+
+  commentCount.firstChild.textContent = `${renderedCommentsLength} из `;
+  commentCount.querySelector('.comments-count').textContent = comments.length;
+
+  if (renderedCommentsLength >= comments.length) {
+    commentsLoader.classList.add('hidden');
+  }
+
+  shownComments += VISIBLE_COMMENTS;
+};
+
+const clearComments = () => {
+  shownComments = 0;
+  commentsList.innerHTML = '';
+  commentsLoader.classList.remove('hidden');
+  commentsLoader.removeEventListener('click', renderNextComments);
+};
+
+const renderComments = (currentPhotoComments) => {
+  comments = currentPhotoComments;
+  renderNextComments();
+
+  commentsLoader.addEventListener('click', renderNextComments);
+};
+
+export {clearComments, renderComments};
diff --git a/js/render-thumbnails.js b/js/render-thumbnails.js
new file mode 100644
index 0000000..4e22476
--- /dev/null
+++ b/js/render-thumbnails.js
@@ -0,0 +1,27 @@
+import {createPhotoList} from './data.js';
+
+const picturesContainer = document.querySelector('.pictures');
+const thumbnailTemplate = document.querySelector('#picture')
+  .content
+  .querySelector('.picture');
+
+const usersThumbnails = createPhotoList ();
+
+const renderThumbnails = () => {
+  const usersThumbnailsFragment = document.createDocumentFragment();
+
+  usersThumbnails.forEach((photo) => {
+    const usersElement = thumbnailTemplate.cloneNode(true);
+    usersElement.dataset.pictureId = photo.id;
+    usersElement.querySelector('.picture__img').src = photo.url;
+    usersElement.querySelector('.picture__img').alt = photo.description;
+    usersElement.querySelector('.picture__likes').textContent = photo.likes;
+    usersElement.querySelector('.picture__comments').textContent = photo.comments.length;
+    usersThumbnailsFragment.appendChild(usersElement);
+  });
+
+  picturesContainer.appendChild(usersThumbnailsFragment);
+
+};
+
+export {renderThumbnails, picturesContainer};
diff --git a/js/thumbnails.js b/js/thumbnails.js
deleted file mode 100644
index ee29566..0000000
--- a/js/thumbnails.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {CreatePhotoList} from './data.js';
-
-const pictures = document.querySelector('.pictures');
-const thumbnailsTemplate = document.querySelector('#picture')
-  .content
-  .querySelector('.picture');
-
-const usersThumbnails = CreatePhotoList ();
-
-const usersThumbnailsFragment = document.createDocumentFragment();
-
-usersThumbnails.forEach((photo) => {
-  const usersElement = thumbnailsTemplate.cloneNode(true);
-  usersElement.querySelector('.picture__img').src = photo.url;
-  usersElement.querySelector('.picture__img').alt = photo.description;
-  usersElement.querySelector('.picture__likes').textContent = photo.likes;
-  usersElement.querySelector('.picture__comments').textContent = photo.comments.length;
-  usersThumbnailsFragment.appendChild(usersElement);
-});
-
-pictures.appendChild(usersThumbnailsFragment);
-
diff --git a/js/util.js b/js/util.js
index a6ae866..fb60e19 100644
--- a/js/util.js
+++ b/js/util.js
@@ -12,4 +12,7 @@ const getRandomInteger = (a, b) => {
   };
 };
 
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
 export {getRandomInteger};
+export {isEscapeKey};