diff --git a/homework-classes/App.js b/homework-classes/App.js
index 7cc1c5772..2b8c8ec1a 100644
--- a/homework-classes/App.js
+++ b/homework-classes/App.js
@@ -1,62 +1,61 @@
 'use strict';
 
-/* global Util, Repository, Contributor */
-
 class App {
   constructor(url) {
-    this.mainContainer = null;
     this.initialize(url);
   }
 
   /**
-   * Initialization
    * @param {string} url The GitHub URL for obtaining the organization's repositories.
    */
   async initialize(url) {
-    // 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');
-    const header = Util.createAndAppend('header', root, { class: 'header' });
-    this.mainContainer = Util.createAndAppend('div', root, { id: 'container' });
+    Util.createAndAppend('h1', root, { text: 'REPOSITORIES' });
+    Util.createAndAppend('select', root, { id: 'dropdown-select' });
+    Util.createAndAppend('div', root, { id: 'details' });
+    Util.createAndAppend('div', root, { id: 'contributors' });
 
     try {
       const repos = await Util.fetchJSON(url);
       this.repos = repos.map(repo => new Repository(repo));
-      // TODO: add your own code here
+      this.repos.forEach(repoDataObj => {
+        repoDataObj.render(document.getElementById('dropdown-select'));
+      });
     } catch (error) {
       this.renderError(error);
     }
+    document.getElementById('dropdown-select').addEventListener('change', event => {
+      const selectedRepo = event.target.value;
+      const selectedData = this.repos.filter(
+        repoData => repoData.repository.name === selectedRepo,
+      )[0];
+      const index = this.repos.indexOf(selectedData);
+      this.fetchContributorsAndRender(index);
+    });
   }
 
   /**
-   * Removes all child elements from a container element
    * @param {*} container Container element to clear
    */
-  clearContainer() {
-    while (this.mainContainer.firstChild) {
-      this.mainContainer.removeChild(this.mainContainer.firstChild);
+  static clearContainer(container) {
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
     }
   }
 
   /**
-   * Fetch contributor information for the selected repository and render the
-   * repo and its contributors as HTML elements in the DOM.
-   * @param {object} repo The selected repository object
+   * @param {number} index The array index of the repository.
    */
-  async selectRepository(repo) {
+  async fetchContributorsAndRender(index) {
     try {
-      this.clearContainer();
+      const repo = this.repos[index];
       const contributors = await repo.fetchContributors();
-
-      const repoContainer = Util.createAndAppend('div', this.mainContainer);
-      const contributorContainer = Util.createAndAppend('div', this.mainContainer);
-
-      const contributorList = Util.createAndAppend('ul', contributorContainer);
-
-      repo.render(repoContainer);
-
+      const container = document.getElementById('contributors');
+      App.clearContainer(container);
+      const leftDiv = Util.createAndAppend('div', container);
+      const rightDiv = Util.createAndAppend('div', container);
+      const contributorList = Util.createAndAppend('div', rightDiv);
+      repo.render(leftDiv);
       contributors
         .map(contributor => new Contributor(contributor))
         .forEach(contributor => contributor.render(contributorList));
@@ -70,7 +69,7 @@ class App {
    * @param {Error} error An Error object describing the error.
    */
   renderError(error) {
-    console.error(error); // TODO: replace with your own code
+    console.error(error);
   }
 }
 
diff --git a/homework-classes/Contributor.js b/homework-classes/Contributor.js
index c74775216..5f109029d 100644
--- a/homework-classes/Contributor.js
+++ b/homework-classes/Contributor.js
@@ -1,19 +1,26 @@
 'use strict';
 
-/* global Util */
-
-// eslint-disable-next-line no-unused-vars
 class Contributor {
   constructor(contributor) {
     this.contributor = contributor;
   }
 
   /**
-   * Render the contributor info to the DOM.
    * @param {HTMLElement} container The container element in which to render the contributor.
    */
   render(container) {
-    // TODO: replace the next line with your code.
-    Util.createAndAppend('pre', container, { text: JSON.stringify(this.contributor, null, 2) });
+    const contributorsDiv = Util.createAndAppend('div', root, { id: 'contributorDiv' });
+    Util.createAndAppend('img', container, {
+      src: this.contributor.avatar_url,
+      class: 'contributors-detail',
+    });
+    Util.createAndAppend('p', container, {
+      text: this.contributor.login,
+      class: 'contributors-detail',
+    });
+    Util.createAndAppend('p', container, {
+      text: this.contributor.contributions,
+      class: 'contributors-detail',
+    });
   }
 }
diff --git a/homework-classes/OlJVkf.jpg b/homework-classes/OlJVkf.jpg
new file mode 100644
index 000000000..1bdf51997
Binary files /dev/null and b/homework-classes/OlJVkf.jpg differ
diff --git a/homework-classes/Repository.js b/homework-classes/Repository.js
index 86b72d71d..c80db636a 100644
--- a/homework-classes/Repository.js
+++ b/homework-classes/Repository.js
@@ -1,32 +1,25 @@
 'use strict';
 
-/* global Util */
-
-// eslint-disable-next-line no-unused-vars
 class Repository {
   constructor(repository) {
     this.repository = repository;
   }
 
   /**
-   * Render the repository info to the DOM.
    * @param {HTMLElement} container The container element in which to render the repository.
    */
   render(container) {
-    // TODO: replace the next line with your code.
-    Util.createAndAppend('pre', container, { text: JSON.stringify(this.repository, null, 2) });
+    Util.createAndAppend('option', container, { text: this.name() });
   }
 
-  /**
-   * Returns an array of contributors as a promise
-   */
   fetchContributors() {
+    App.clearContainer(details);
+    Util.createAndAppend('div', details, { text: `Description: ${this.repository.description}` });
+    Util.createAndAppend('div', details, { text: `Forks: ${this.repository.forks}` });
+    Util.createAndAppend('div', details, { text: `Last Update: ${this.repository.updated_at}` });
     return Util.fetchJSON(this.repository.contributors_url);
   }
 
-  /**
-   * Returns the name of the repository
-   */
   name() {
     return this.repository.name;
   }
diff --git a/homework-classes/index.html b/homework-classes/index.html
index 2d1fc8fa7..fd073fc3b 100644
--- a/homework-classes/index.html
+++ b/homework-classes/index.html
@@ -1,27 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <meta name="theme-color" content="#000000" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="format-detection" content="telephone=no" />
-    <link rel="apple-touch-icon" href="./hyf.png" />
-    <link rel="shortcut icon" type="image/png" href="./hyf.png" />
-    <title>HYF-GITHUB</title>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
-    <link rel="stylesheet" href="./style.css" />
-  </head>
 
-  <body>
-    <div id="root"></div>
-    <script src="./Util.js"></script>
-    <script src="./Repository.js"></script>
-    <script src="./Contributor.js"></script>
-    <script src="./App.js"></script>
-  </body>
-</html>
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+	<meta name="theme-color" content="#000000" />
+	<meta name="apple-mobile-web-app-capable" content="yes" />
+	<meta name="mobile-web-app-capable" content="yes" />
+	<meta name="format-detection" content="telephone=no" />
+	<link rel="apple-touch-icon" href="./hyf.png" />
+	<link rel="shortcut icon" type="image/png" href="./hyf.png" />
+	<title>HYF-GITHUB</title>
+	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
+	<link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+	<div id="root"></div>
+	<script src="./Util.js"></script>
+	<script src="./Repository.js"></script>
+	<script src="./Contributor.js"></script>
+	<script src="./App.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/homework-classes/style.css b/homework-classes/style.css
index a8985a8a5..394680432 100644
--- a/homework-classes/style.css
+++ b/homework-classes/style.css
@@ -1,3 +1,56 @@
 .alert-error {
-    color: red;
+	color: red;
+}
+
+body {
+	background-color: darkslategrey
+}
+
+h1 {
+	color: rgb(180, 244, 255);
+	font-family: Helvetica;
+	text-transform: uppercase;
+	text-align: center;
+	font-size: 3em;
+}
+
+#dropdown-select {
+	width: 25em;
+	height: 3em;
+	border-radius: 5px;
+}
+
+select {
+	width: 20em;
+	font-family: helvetica;
+	text-transform: uppercase;
+	position: relative;
+	color: rgb(13, 96, 110);
+	padding: 10px;
+}
+
+#root {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+}
+
+img {
+	width: 50px;
+}
+
+#contributors {
+	display: flex;
+	flex-direction: row;
+	align-content: space-around;
+	margin-left: 35%;
+	flex-wrap: wrap;
+	list-style-type: none;
+}
+
+.contributors-detail {
+	color: white;
+	flex-wrap: wrap;
+	margin: 20px;
+	flex-grow: 1;
 }
\ No newline at end of file
diff --git a/homework/OlJVkf.jpg b/homework/OlJVkf.jpg
new file mode 100644
index 000000000..1bdf51997
Binary files /dev/null and b/homework/OlJVkf.jpg differ
diff --git a/homework/Simple-Background-Images-53.png b/homework/Simple-Background-Images-53.png
new file mode 100644
index 000000000..844a90f85
Binary files /dev/null and b/homework/Simple-Background-Images-53.png differ
diff --git a/homework/index.html b/homework/index.html
index 9c8f80c1a..c162ece09 100644
--- a/homework/index.html
+++ b/homework/index.html
@@ -2,22 +2,25 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <meta name="theme-color" content="#000000">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="mobile-web-app-capable" content="yes">
-  <meta name="format-detection" content="telephone=no">
-  <link rel="apple-touch-icon" href="./hyf.png">
-  <link rel="shortcut icon" type="image/png" href="./hyf.png" />
-  <title>HYF-GITHUB</title>
-  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
-  <link rel="stylesheet" href="./style.css">
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+	<meta name="theme-color" content="#000000">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="mobile-web-app-capable" content="yes">
+	<meta name="format-detection" content="telephone=no">
+	<link rel="apple-touch-icon" href="./hyf.png">
+	<link rel="shortcut icon" type="image/png" href="./hyf.png" />
+	<title>HYF-GITHUB</title>
+	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+	<link rel="stylesheet" href="./style.css">
 </head>
 
 <body>
-  <div id="root"></div>
-  <script src="./index.js"></script>
+	<h1>Repositories</h1>
+	<div id="root"></div>
+
+
+	<script src="./index1.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/homework/index.js b/homework/index.js
index d150b6609..7cdc1db05 100644
--- a/homework/index.js
+++ b/homework/index.js
@@ -31,13 +31,51 @@
   }
 
   function main(url) {
-    fetchJSON(url, (err, repositories) => {
+    // create the layout with a div
+    // 2 - get repo from github
+    // add listener on select
+    createLayout();
+    getRepoData();
+    /* 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 createLayout() {
+    const root = document.getElementById('root');
+    createAndAppend('select', root, { id: 'repo-select' });
+    createAndAppend('div', root, { id: 'repo-details' });
+    createAndAppend('div', root, { id: 'contributors' });
+  }
+
+  function getRepoData() {
+    const REPO_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+    fetchJSON(REPO_URL, (err, listOfRepo) => {
+      listOfRepo.forEach(repoDataObj => {
+        createAndAppend(
+          'option',
+          document.getElementById('repo-select'),
+          { id: 'repo-select' },
+          {
+            text: listOfRepo.name,
+          },
+        );
+      });
+
+      listenerOnSelect(listofRepo);
+    });
+  }
+
+  function listenerOnSelect(listOfRepo) {
+    document.getElementById('repo-select').addEventListener('change', event => {
+      const selectedRepo = event.target.value;
+
+      const selectedData = listOfRepo.filter(repoData => repoData.name === selectedRepo);
     });
   }
 
diff --git a/homework/index1.js b/homework/index1.js
new file mode 100644
index 000000000..d1279825a
--- /dev/null
+++ b/homework/index1.js
@@ -0,0 +1,95 @@
+'use strict';
+
+{
+  function createAndAppend(name, parent, options = {}) {
+    const elem = document.createElement(name);
+    parent.appendChild(elem);
+    Object.keys(options).forEach(key => {
+      const value = options[key];
+      if (key === 'text') {
+        elem.textContent = value;
+      } else {
+        elem.setAttribute(key, value);
+      }
+    });
+    return elem;
+  }
+
+  function main() {
+    const root = document.getElementById('root');
+    createAndAppend('select', root, { id: 'dropdown-select' });
+    createAndAppend('div', root, { id: 'details' });
+    createAndAppend('div', root, { id: 'contributors' });
+    fetchAsyncMode(HYF_REPOS_URL);
+  }
+
+  async function fetchAsyncMode(url) {
+    try {
+      const response = await fetch(url);
+      const responseJSON = await response.json();
+      responseJSON.sort(sortByName).forEach(repoDataObj => {
+        createAndAppend('option', document.getElementById('dropdown-select'), {
+          text: repoDataObj.name,
+        });
+      });
+      listenerSelect(responseJSON);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  // sort repositories
+  function sortByName(repoObjA, repoObjB) {
+    const nameA = repoObjA.name.toUpperCase(); // ignore upper and lowercase
+    const nameB = repoObjB.name.toUpperCase(); // ignore upper and lowercase
+    if (nameA < nameB) {
+      return -1;
+    }
+    if (nameA > nameB) {
+      return 1;
+    }
+    return 0;
+  }
+  // add an event when selecting a repository
+  function listenerSelect(listOfRepos) {
+    document.getElementById('dropdown-select').addEventListener('change', event => {
+      const selectedRepo = event.target.value;
+      const selectedData = listOfRepos.filter(repoData => repoData.name === selectedRepo)[0];
+
+      repoDetails(selectedData);
+      asyncContributors(selectedData);
+    });
+  }
+
+  // display information of each repository
+  function repoDetails(data) {
+    const detailsDiv = document.getElementById('details');
+    detailsDiv.innerHTML = '';
+    createAndAppend('div', detailsDiv, {
+      text: `Repository's Name: ${data.name}`,
+    });
+    createAndAppend('div', detailsDiv, { text: `Description: ${data.description}` });
+    createAndAppend('div', detailsDiv, { text: `Forks: ${data.forks}` });
+    createAndAppend('div', detailsDiv, { text: `Last Update: ${data.updated_at}` });
+  }
+
+  async function asyncContributors(data) {
+    try {
+      const constributors = await fetch(data.contributors_url);
+      const dataJSON = await constributors.json();
+      for (let contributor of dataJSON) {
+        createAndAppend('img', contributors, { src: contributor.avatar_url, class: 'contri' });
+        createAndAppend('div', contributors, { text: contributor.login, class: 'contri' });
+        createAndAppend('div', contributors, {
+          text: contributor.contributions,
+          class: 'contri',
+        });
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+
+  window.onload = () => main(HYF_REPOS_URL);
+}
diff --git a/homework/style.css b/homework/style.css
index a8985a8a5..31c860671 100644
--- a/homework/style.css
+++ b/homework/style.css
@@ -1,3 +1,64 @@
 .alert-error {
-    color: red;
+	color: red;
+}
+
+body {
+	background-image: url(OlJVkf.jpg);
+}
+
+h1 {
+	color: rgb(180, 244, 255);
+	font-family: Helvetica;
+	text-transform: uppercase;
+	text-align: center;
+	font-size: 3em;
+}
+
+#dropdown-select {
+	width: 25em;
+	height: 3em;
+	border-radius: 5px;
+}
+
+select {
+	width: 20em;
+	font-family: helvetica;
+	text-transform: uppercase;
+	position: relative;
+	color: rgb(13, 96, 110);
+	padding: 10px;
+}
+
+#details {
+	color: white;
+	font-family: helvetica;
+	font-size: 1.5em;
+	margin-top: 1em;
+	width: 30%;
+}
+
+#root {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+}
+
+img {
+	width: 50px;
+}
+
+#contributors {
+	display: flex;
+	flex-direction: row;
+	align-content: space-around;
+	margin-left: 35%;
+	flex-wrap: wrap;
+	list-style-type: none;
+}
+
+.contri {
+	color: white;
+	flex-wrap: wrap;
+	margin: 20px;
+	flex-grow: 1;
 }
\ No newline at end of file