@@ -30,7 +30,8 @@ class App {
     document.getElementById('dropdown-select').addEventListener('change', event => {
       const selectedRepo = event.target.value;
       const selectedData = this.repos.filter(repoData => repoData.name === selectedRepo)[0];
-      this.fetchContributorsAndRender(selectedRepo);
+      const index = this.repos.indexOf(selectedData);
+      this.fetchContributorsAndRender(index);
     });
   }
 
@@ -54,7 +55,7 @@ class App {
       const repo = this.repos[index];
       const contributors = await repo.fetchContributors();
 
-      const container = document.getElementById('container');
+      const container = document.getElementById('contributors');
       App.clearContainer(container);
 
       const leftDiv = Util.createAndAppend('div', container);
 
@@ -15,10 +15,13 @@ class Contributor {
     // TODO: replace the next line with your code.
     const contributorsDiv = Util.createAndAppend('div', root, { id: 'contributors' });
     for (let contributor of listOfContributors) {
-      Util.createAndAppend('img', contributors, { src: contributor.avatar_url, class: 'contri' });
-      Util.createAndAppend('div', contributors, { text: contributor.login, class: 'contri' });
+      Util.createAndAppend('img', contributors, {
+        src: this.contributor.avatar_url,
+        class: 'contri',
+      });
+      Util.createAndAppend('div', contributors, { text: this.contributor.login, class: 'contri' });
       Util.createAndAppend('div', contributors, {
-        text: contributor.contributions,
+        text: this.contributor.contributions,
         class: 'contri',
       });
     }