diff --git a/js/main.js b/js/main.js
index c20bccc..5c39269 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,7 @@
 import {getData} from './data.js'
+import {renderThumbnails} from './thumbnails.js'
 
 const data = getData();
+renderThumbnails(data);
 
-console.log(data)
\ No newline at end of file
+//console.log(data)
\ No newline at end of file
diff --git a/js/thumbnails.js b/js/thumbnails.js
new file mode 100644
index 0000000..1f87b57
--- /dev/null
+++ b/js/thumbnails.js
@@ -0,0 +1,19 @@
+const template = document.querySelector('#picture').content.querySelector('.picture');
+const container = document.querySelector('.pictures');
+
+export const renderThumbnails = (photos) => {
+  console.log('@@@', photos)
+  photos.forEach((photo) => {
+    const thumbnail = template.cloneNode(true);
+    const img = thumbnail.querySelector('.picture__img');
+    img.src = photo.url;
+    img.alt = photo.description;
+    thumbnail.querySelector('.picture__comments').textContent = photo.comments.length;
+    thumbnail.querySelector('.picture__likes').textContent = photo.likes;
+    container.append(thumbnail);
+  })
+}
+
+
+
+