diff --git a/README.md b/README.md
index 9ff48dd..78fb9f8 100644
--- a/README.md
+++ b/README.md
@@ -49,9 +49,9 @@ Edit this document to include your answers after each question. Make sure to lea
 
 Your finished project must include all of the following requirements:
 
-* [ ] Look through the HTML code and familiarize yourself with the different sections. Some of them already exist, but some need to be filled it. DO NOT add any code to the HTML file itself.
+* [x] Look through the HTML code and familiarize yourself with the different sections. Some of them already exist, but some need to be filled it. DO NOT add any code to the HTML file itself.
 
-* [ ] Following the instructions in the `Header/index.js` file, create the Header component. 
+* [x] Following the instructions in the `Header/index.js` file, create the Header component. 
 
 * [ ] Following the instructions in the `Tabs/index.js` file, create individual Tabs components.
 
diff --git a/components/Cards/index.js b/components/Cards/index.js
index 1482e60..6691ac4 100644
--- a/components/Cards/index.js
+++ b/components/Cards/index.js
@@ -17,3 +17,51 @@
 // </div>
 //
 // Create a card for each of the articles and add the card to the DOM.
+
+const cardsContainer = document.querySelector('.cards-container');
+
+axios.get('https://lambda-times-backend.herokuapp.com/articles')
+  .then(x => {
+    articlesByTopic = x.data.articles;
+    topicsCom(articlesByTopic);
+  })
+
+  .catch(error => {
+    console.log('There is an error in your Cards/index.js file', error)
+  })
+
+
+function topicsCom(objectArticlesByTopic) {
+
+  Object.keys(objectArticlesByTopic).forEach(topic => {
+    let articles = objectArticlesByTopic[topic];
+    articles.forEach(article => cardsContainer.append(cardComponent(article, topic)));
+  })
+}
+
+function cardComponent(articleObj, topic) {
+  const card = document.createElement('div'),
+    headline = document.createElement('div'),
+    author = document.createElement('div'),
+    imgContainer = document.createElement('div'),
+    imgSrc = document.createElement('img'),
+    authorName = document.createElement('span');
+
+
+  headline.textContent = articleObj.headline;
+  imgSrc.src = articleObj.authorPhoto;
+  authorName.textContent = articleObj.authorName;
+
+  card.append(author);
+  card.append(headline);
+  author.append(authorName);
+  author.append(imgContainer);
+  imgContainer.append(imgSrc);
+
+  card.classList.add('card');
+  headline.classList.add('headline');
+  author.classList.add('author');
+  imgContainer.classList.add('img-container');
+
+  return card;
+}
\ No newline at end of file
diff --git a/components/Header/index.js b/components/Header/index.js
index c41ba8c..b4050e4 100644
--- a/components/Header/index.js
+++ b/components/Header/index.js
@@ -7,6 +7,37 @@
 //    <h1>Lambda Times</h1>
 //    <span class="temp">98°</span>
 //  </div >
-// And add it to the DOM in the .headerContainer component
+// And add it to the DOM in the header-container component
 
-function Header() {}
+function Header() {
+
+//define new elements
+const head = document.createElement('div');
+const date = document.createElement('span');
+const headingOne = document.createElement('h1');
+const temperature = document.createElement('span');
+
+//setup structure of elements
+head.appendChild(date)
+head.appendChild(headingOne)
+head.appendChild(temperature)
+
+//set class names
+head.classList.add('header');
+date.classList.add('date');
+headingOne.classList.add('h1');
+temperature.classList.add('temp');
+
+//set text content
+date.textContent = "MARCH 28";
+headingOne.textContent = "Lambda Times";
+temperature.textContent = "95%";
+
+
+return head;
+}
+
+const project = document.querySelector('.header-container');
+console.log(project)
+
+project.appendChild(Header());
\ No newline at end of file
diff --git a/components/Tabs/index.js b/components/Tabs/index.js
index 5215a3d..d0d3270 100644
--- a/components/Tabs/index.js
+++ b/components/Tabs/index.js
@@ -7,3 +7,27 @@
 //
 //  The tab component should look like this:
 //    <div class="tab">topic here</div>
+
+
+let a = document.querySelector(".tabs");
+console.log(a);
+
+axios.get("https://lambda-times-backend.herokuapp.com/topics")
+.then (x => {
+
+   x.data.topics.forEach(to => { a.appendChild(Tabtab(to))}) 
+    //createCards(data)
+    //console.log(data)
+    })
+  
+.catch (data => {console.log(data)})
+
+function Tabtab(headingTitle){
+   // console.log(headingTitle)
+const tabsTabs = document.createElement('div');
+
+tabsTabs.textContent = `${headingTitle}`;
+tabsTabs.classList.add('tab'); 
+
+return tabsTabs
+}
\ No newline at end of file