diff --git a/homework/App.js b/homework/App.js
index 32b71e34b..90c51ab4d 100644
--- a/homework/App.js
+++ b/homework/App.js
@@ -12,18 +12,20 @@ class App {
    * @param {string} url The GitHub URL for obtaining the organization's repositories.
    */
   async initialize(url) {
+    createLayout();
     // Add code here to initialize your app
     // 1. Create the fixed HTML elements of your page
     // 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your <select> element
 
     const root = document.getElementById('root');
 
-    Util.createAndAppend('h1', root, { text: 'It works!' }); // TODO: replace with your own code
-
     try {
       const repos = await Util.fetchJSON(url);
-      this.repos = repos.map(repo => new Repository(repo));
-      // TODO: add your own code here
+      let arrayOfRepos = this.repos = repos.map(repo => new Repository(repo));
+      console.log(arrayOfRepos[0].keys);
+      for (let i = 0; i < arrayOfRepos.length; i++) {
+        console.log(arrayOfRepos[i].name);
+      }
     } catch (error) {
       this.renderError(error);
     }
@@ -76,6 +78,16 @@ class App {
   }
 }
 
-const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+function createLayout() {
+  const root = document.getElementById('root');
+  Util.createAndAppend('select', root, { id: 'repo-select' });
+  Util.createAndAppend('option', document.getElementById('repo-select'), { text: 'Choose a Repository' });
+  Util.createAndAppend('div', root, { id: 'body-container' });
+  Util.createAndAppend('div', document.getElementById('body-container'), { id: 'repo-details' });
+  Util.createAndAppend('div', document.getElementById('body-container'), { id: 'contributors' });
+
+}
+
+const HYF_REPOS_URL = 'https://api.github.com/orgs/FooCoding/repos?per_page=100';
 
 window.onload = () => new App(HYF_REPOS_URL);
diff --git a/homework/Repository.js b/homework/Repository.js
index 267960a5a..39d45d529 100644
--- a/homework/Repository.js
+++ b/homework/Repository.js
@@ -27,7 +27,7 @@ class Repository {
   /**
    * Returns the name of the repository
    */
-  name() {
-    return this.repository.name;
-  }
+  // name() {
+  //   return this.repository.name;
+  // }
 }
diff --git a/homework/index.js b/homework/index.js
index d3a97645e..a44430a2f 100644
--- a/homework/index.js
+++ b/homework/index.js
@@ -1,19 +1,23 @@
 'use strict';
 
 {
-  function fetchJSON(url, cb) {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url);
-    xhr.responseType = 'json';
-    xhr.onload = () => {
-      if (xhr.status < 400) {
-        cb(null, xhr.response);
-      } else {
-        cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
+  function fetchJSON(url) {
+    return new Promise((resolve, reject) => {
+      let xhr = new XMLHttpRequest();
+      xhr.open('GET', url);
+      xhr.responseType = 'json';
+      xhr.onload = function () {
+        if (xhr.status < 400) {
+          resolve(xhr.response);
+        } else {
+          reject(Error(xhr.status));
+        }
+      };
+      xhr.onerror = () => {
+        reject(Error('Network request failed'));
       }
-    };
-    xhr.onerror = () => cb(new Error('Network request failed'));
-    xhr.send();
+      xhr.send();  
+    });
   }
 
   function createAndAppend(name, parent, options = {}) {
@@ -30,18 +34,67 @@
     return elem;
   }
 
-  function main(url) {
-    fetchJSON(url, (err, data) => {
-      const root = document.getElementById('root');
-      if (err) {
-        createAndAppend('div', root, { text: err.message, class: 'alert-error' });
-      } else {
-        createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
-      }
-    });
+  function createLayout() {
+    const root = document.getElementById('root');
+    createAndAppend('select', root, { id: 'repo-select' });
+    createAndAppend('option', document.getElementById('repo-select'), { text: 'Choose a Repository' });
+    createAndAppend('div', root, { id: 'body-container' });
+    createAndAppend('div', document.getElementById('body-container'), { id: 'repo-details' });
+    createAndAppend('div', document.getElementById('body-container'), { id: 'contributors' });
+
+  }
+
+  async function getRepoDataFromOrgAndAddToDOM() {
+    const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100';
+    try {
+      let response = await fetchJSON(REPOS_URL);
+      response.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1);
+      response.forEach(repoDataObj => {
+        createAndAppend('option', document.getElementById('repo-select'), { text: repoDataObj.name });
+      })
+      addListenerOnSelect(response);
+    } catch (error) {
+      root.innerHTML = error.message;
+    }
   }
 
-  const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+  function addDataToRepoDetails(data) {
+    const repoDetailsDiv = document.getElementById('repo-details');
+    repoDetailsDiv.innerHTML = '';
+    createAndAppend('div', repoDetailsDiv, { id: "repoNameID" });
+    createAndAppend('a', document.getElementById("repoNameID"), { href: data.html_url, target: "_blank", text: data.name })
+    createAndAppend('div', repoDetailsDiv, { text: `Repository Description: ${data.description}` });
+    createAndAppend('div', repoDetailsDiv, { text: `Number of Forks: ${data.forks}` });
+  }
+
+  async function getContributors(data) {
+    const contributorsDiv = document.getElementById('contributors');
+    contributorsDiv.innerHTML = 'Contributors:';
+    try {
+      let response = await fetchJSON(data.contributors_url);
+      response.forEach(repoObj => {
+        let key = repoObj.login;
+        createAndAppend('div', contributorsDiv, { id: key });
+        createAndAppend('a', document.getElementById(key), { href: repoObj.html_url, target: "_blank", text: key });
+      })
+    } catch (error) {
+      root.innerHTML = error.message;
+    }
+  }
+
+  function addListenerOnSelect(arrayOfRepoData) {
+    document.getElementById('repo-select').addEventListener('change', event => {
+      const selectedRepo = event.target.value;
+      const selectedData = arrayOfRepoData.filter(repoData => repoData.name === selectedRepo)[0];
+      addDataToRepoDetails(selectedData);
+      getContributors(selectedData);
+    })
+  }
+
+  function main() {
+    createLayout();
+    getRepoDataFromOrgAndAddToDOM();
+  }
 
-  window.onload = () => main(HYF_REPOS_URL);
-}
+  window.onload = () => main();
+}
\ No newline at end of file
diff --git a/homework/style.css b/homework/style.css
index a8985a8a5..2bb4e1e0c 100644
--- a/homework/style.css
+++ b/homework/style.css
@@ -1,3 +1,6 @@
-.alert-error {
-    color: red;
+
+#body-container {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: auto;
 }
\ No newline at end of file