diff --git a/Week2/lecture.js b/Week2/lecture.js
new file mode 100644
index 000000000..b31d48ff1
--- /dev/null
+++ b/Week2/lecture.js
@@ -0,0 +1,5 @@
+//promises.them and catch
+//build small app that shows ransom dogs and cats
+// try and catch
+
+//event loop 
\ No newline at end of file
diff --git a/homework/index.js b/homework/index.js
index d150b6609..0f62bc563 100644
--- a/homework/index.js
+++ b/homework/index.js
@@ -1,21 +1,23 @@
 'use strict';
 
 {
-  function fetchJSON(url, cb) {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url);
-    xhr.responseType = 'json';
-    xhr.onload = () => {
-      if (xhr.status >= 200 && xhr.status <= 299) {
-        cb(null, xhr.response);
-      } else {
-        cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
-      }
-    };
-    xhr.onerror = () => cb(new Error('Network request failed'));
-    xhr.send();
+  function fetchJson(url) {
+    return new Promise((resolve, reject) => {
+      const xhr = newXMLHttpRequest();
+      xhr.open('GET', url);
+      xhr.responseType = 'json';
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status <= 299) {
+          resolve(xhr.response)
+        } else {
+          reject(Error('Network request failed'));
+        }
+      };
+      xhr.send();
+    });
   }
 
+
   function createAndAppend(name, parent, options = {}) {
     const elem = document.createElement(name);
     parent.appendChild(elem);
@@ -30,17 +32,89 @@
     return elem;
   }
 
-  function main(url) {
-    fetchJSON(url, (err, repositories) => {
-      const root = document.getElementById('root');
-      if (err) {
-        createAndAppend('div', root, { text: err.message, class: 'alert-error' });
-        return;
-      }
-      createAndAppend('pre', root, { text: JSON.stringify(repositories, null, 2) });
-    });
+  function getContributorInformation(contribsUrl, contribs) {
+    fetch(contribsUrl)
+      .then(data => data.json())
+      .then((jsonData) => {
+        jsonData.forEach(contributor => {
+          createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' })
+          createAndAppend('img', contribs, { src: contributor.avatar_url, height: 150, widtth: 150, id: 'img' })
+          createAndAppend('div', contribs, { text: contributor.contributions })
+        })
+      })
+      .catch((err) => {
+        const root = document.getElementById('root');
+        createAndAppend('div', contribs, { text: err.message, class: 'alert-error' })
+      })
+
+  }
+  function compare(a, b) {
+    if (a.name < b.name) {
+      return -1;
+    }
+    if (a.name > b.name) {
+      return 1
+    }
+    return 0;
   }
 
+  function main(url) {
+
+    fetch(url)
+      .then(data => data.json())
+      .then(json => {
+        const root = document.getElementById('root');
+        const select = createAndAppend('select', root, { class: 'select' });
+        // createAndAppend('option', select, { text: 'Choose your favorite repo' });
+        let sorted = json.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1);
+        sorted.forEach(repo => {
+          const name = repo.name;
+          createAndAppend('option', select, { text: name });
+        })
+        const wraper = createAndAppend('div', root, { class: 'wraper' });
+        const repoInfo = createAndAppend('div', wraper, { class: 'repoinfo' });
+        const contribs = createAndAppend('div', wraper, { class: 'contribs' });
+        select.addEventListener('change', evt => {
+
+          const selectedRepo = evt.target.value;
+          const repo = json.filter(r => r.name == selectedRepo)[0];
+          getallInfo(repo, repoInfo, contribs)
+        })
+
+        function getallInfo(repo, repoInfo, contribs) {
+          repoInfo.innerHTML = '';
+          contribs.innerHTML = '';
+
+          const addInfo = (label, value) => {
+
+            const container = createAndAppend('div', repoInfo, { class: 'container' });
+            createAndAppend('span', container, { text: label });
+            createAndAppend('span', container, { text: value });
+
+          };
+          addInfo('Name: ', repo.name);
+          addInfo('Desciption: ', repo.description);
+          addInfo('Number of forks: ', repo.forks);
+
+          addInfo('Updated: ', repo.updated_at)
+          const contribsUrl = repo.contributors_url;
+          getContributorInformation(contribsUrl, contribs);
+
+        };
+        let firstRepo = sorted[1];
+        getallInfo(firstRepo, repoInfo, contribs);
+      })
+
+      .catch((err) => {
+        const root = document.getElementById('root');
+        createAndAppend('div', root, { text: err.message, class: 'alert-error' })
+      })
+
+
+
+
+  }
   const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+
   window.onload = () => main(HYF_REPOS_URL);
-}
+}
\ No newline at end of file
diff --git a/homework/style.css b/homework/style.css
index a8985a8a5..e68224591 100644
--- a/homework/style.css
+++ b/homework/style.css
@@ -1,3 +1,96 @@
 .alert-error {
     color: red;
-}
\ No newline at end of file
+}
+
+body {
+  background-color:whitesmoke;
+}
+#root {
+  display: flex;
+   flex-direction: column;
+  align-items: flex-start;
+
+  justify-content: center;
+}
+.header {
+  background-color: #444;
+  width: 100%;
+
+}
+
+.h1 {
+  text-align: center;
+
+}
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  margin: 1rem;
+
+ 
+
+}
+.eachContrib {
+    display: flex;
+  flex-direction: row;
+}
+
+
+.wraper {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  margin: 1rem;
+}
+.contribs {
+  padding: 16px;
+  margin-right: 25px;
+ flex: row;
+ background-color: beige;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+.select {
+    display: flex;
+    flex-direction: row;
+    font-size: 16px;
+    font-family: sans-serif;
+    font-weight: 700;
+    color: #444;
+    line-height: 1.3;
+    padding: .6em 1.4em .5em .8em;
+    width: auto;
+    max-width: 100%; 
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid #aaa;
+    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
+    border-radius: .5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    text-align: center;
+  
+}
+
+.contributions {
+  background-color: #aaa
+}
+
+
+@media (max-width: 767px){
+  body {
+    width: 100%;
+  }
+  .container {
+    margin: 0;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .left-div {
+    margin: 0;
+  }
+}