diff --git a/js/main.js b/js/main.js
index 4588c36..6285485 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,4 +1,5 @@
 import './util.js';
 import {CreatePhotoList} from './data.js';
+import './thumbnails.js';
 
 console.log(CreatePhotoList());
diff --git a/js/thumbnails.js b/js/thumbnails.js
new file mode 100644
index 0000000..ee29566
--- /dev/null
+++ b/js/thumbnails.js
@@ -0,0 +1,22 @@
+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);
+