diff --git a/index.html b/index.html
index 3ba0ab0..a1657ad 100755
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
       <meta charset="utf-8">
       <meta http-equiv="x-ua-compatible" content="ie=edge">
       <title>Feedr @ GA</title>
+      <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
       <link rel="stylesheet" href="styles/normalize.css" media="screen" charset="utf-8">
       <link rel="stylesheet" href="styles/html5bp.css" media="screen" charset="utf-8">
       <link rel="stylesheet" href="styles/style.css" media="screen" charset="utf-8">
@@ -20,14 +21,14 @@
 
         <header>
           <section class="container">
-            <a href="#"><h1>Feedr</h1></a>
+            <a href="#" id="logo"><h1>Feedr</h1></a>
             <nav>
               <ul>
-                <li><a href="#">News Source: <span>Source Name</span></a>
-                  <ul>
-                      <li><a href="#">Source 1</a></li>
-                      <li><a href="#">Source 2</a></li>
-                      <li><a href="#">Source 3</a></li>
+                <li><a href="#">News Source: <span id="currentPub">All</span></a>
+                  <ul id="sourceList">
+                      <li><a href="#" id="nyt">The New York Times</a></li>
+                      <li><a href="#" id="guardian">The Guardian</a></li>
+                      <li><a href="#" id="digg">Digg</a></li>
                   </ul>
                 </li>
               </ul>
@@ -50,58 +51,6 @@ <h1>Article title here</h1>
           </div>
         </div>
         <section id="main" class="container">
-          <article class="article">
-            <section class="featuredImage">
-              <img src="images/article_placeholder_1.jpg" alt="" />
-            </section>
-            <section class="articleContent">
-                <a href="#"><h3>Test article title</h3></a>
-                <h6>Lifestyle</h6>
-            </section>
-            <section class="impressions">
-              526
-            </section>
-            <div class="clearfix"></div>
-          </article>
-          <article class="article">
-            <section class="featuredImage">
-              <img src="images/article_placeholder_2.jpg" alt="" />
-            </section>
-            <section class="articleContent">
-                <a href="#"><h3>Test article title</h3></a>
-                <h6>Lifestyle</h6>
-            </section>
-            <section class="impressions">
-              526
-            </section>
-            <div class="clearfix"></div>
-          </article>
-          <article class="article">
-            <section class="featuredImage">
-              <img src="images/article_placeholder_2.jpg" alt="" />
-            </section>
-            <section class="articleContent">
-                <a href="#"><h3>Test article title</h3></a>
-                <h6>Lifestyle</h6>
-            </section>
-            <section class="impressions">
-              526
-            </section>
-            <div class="clearfix"></div>
-          </article>
-          <article class="article">
-            <section class="featuredImage">
-              <img src="images/article_placeholder_1.jpg" alt="" />
-            </section>
-            <section class="articleContent">
-                <a href="#"><h3>Test article title</h3></a>
-                <h6>Lifestyle</h6>
-            </section>
-            <section class="impressions">
-              526
-            </section>
-            <div class="clearfix"></div>
-          </article>
         </section>
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
diff --git a/js/app.js b/js/app.js
index a6502cd..3549550 100755
--- a/js/app.js
+++ b/js/app.js
@@ -1,3 +1,139 @@
 /*
+  GA SF JSD6
+  Jules Forrest
   Please add all Javascript code to this file.
 */
+
+var createArticleListing = function(title, image, category, impressions, timestamp, publication) {
+  timestamp = new Date(timestamp).getTime();
+  return `<article class="article" data-date="${timestamp}" data-pub="${publication}"><section class="featuredImage">
+    <img src="${image}" alt="" />
+  </section>
+  <section class="articleContent">
+      <a href="#"><h3> ${title} </h3></a>
+      <h6 class="category">${category}</h6>
+  </section>
+  <section class="impressions">
+    ${impressions}
+  </section>
+  <div class="clearfix"></div></article>`;
+}
+
+$(function() {
+  $('#popUp').removeClass('hidden');
+
+  var guardianRequest = $.get("https://accesscontrolalloworiginall.herokuapp.com/http://content.guardianapis.com/search?show-fields=thumbnail%2CtrailText%2Cwordcount&api-key=e8a00826-f3d6-4965-a89b-16ad2066bfa4");
+  var nytRequest = $.get("http://api.nytimes.com/svc/topstories/v2/home.json?api-key=2999869bd86b4da48852d255f65250ff");
+  var diggRequest = $.get("https://accesscontrolalloworiginall.herokuapp.com/http://digg.com/api/news/popular.json");
+
+  $.when(guardianRequest, nytRequest, diggRequest).done(function(guardianResponse, nytResponse, diggResponse){
+
+    if (guardianResponse){
+      if (guardianResponse[0].response == null){
+        alert('This feed could not be loaded');
+      } else {
+        console.log(guardianResponse);
+        guardianResponse[0].response.results.forEach(function(result){
+          var newArticle = createArticleListing(result.webTitle, result.fields.thumbnail, result.sectionName, result.fields.wordcount, result.webPublicationDate, "guardian");
+          newArticle = $(newArticle).data( "articleData", { description: result.fields.trailText, url: result.webUrl } );
+          $("#main").append(newArticle);
+        })
+      }
+    }
+
+    if (nytResponse){
+      if (nytResponse[0].results == null){
+        alert('This feed could not be loaded');
+      } else {
+        console.log(nytResponse);
+        nytResponse[0].results.forEach(function(result){
+          var imgUrl = result.multimedia[0] ? result.multimedia[0].url : null;
+          var newArticle = createArticleListing(result.title, imgUrl, result.section, result.abstract.length, result.published_date, "nyt");
+          newArticle = $(newArticle).data( "articleData", { description: result.abstract, url: result.url } );
+          $("#main").append(newArticle);
+        })
+      }
+    }
+
+    if (diggResponse){
+      if (diggResponse[0].data == null){
+        alert('This feed could not be loaded');
+      } else {
+        console.log(diggResponse);
+        diggResponse[0].data.feed.forEach(function(result){
+          var newArticle = createArticleListing(result.content.title, result.content.media.images[0].url, result.content.tags[0].name, result.digg_score, (result.date_published*1000), "digg");
+          newArticle = $(newArticle).data( "articleData", { description: result.content.description, url: result.content.url } );
+          $("#main").append(newArticle);
+        })
+      }
+    }
+
+    var $articleListContainer = $('#main');
+    var $articleList = $articleListContainer.children('article');
+    $articleList.sort(function(a,b){
+      var ad = a.getAttribute('data-date');
+      var bd = b.getAttribute('data-date');
+
+      if(ad > bd) {
+        return 1;
+      }
+      if(ad < bd) {
+        return -1;
+      }
+      return 0;
+    });
+
+    $articleList.detach().appendTo($articleListContainer);
+    $('#popUp').addClass('hidden');
+  }).fail(function() {
+
+});
+
+});
+
+$('#search img').click(function(){
+  $(this).parents('#search').toggleClass('active');
+});
+
+$('#main').on('click', '.article', function(){
+  $('#popUp').removeClass('hidden loader');
+  var headline = $(this).find('h3').text();
+  $('#popUp').find('h1').text(headline);
+  var description = $(this).data("articleData").description;
+  $('#popUp').find('p').text(description);
+  var url = $(this).data("articleData").url;
+  $('#popUp').find('.popUpAction').attr("href", url);
+});
+
+$('.closePopUp').click(function(){
+  $('#popUp').addClass('hidden');
+});
+
+$('#main').on('click', '.article', function(){
+  $('#popUp').removeClass('hidden loader');
+  var headline = $(this).find('h3').text();
+  $('#popUp').find('h1').text(headline);
+  var description = $(this).data("articleData").description;
+  $('#popUp').find('p').text(description);
+  var url = $(this).data("articleData").url;
+  $('#popUp').find('.popUpAction').attr("href", url);
+});
+
+var pubToggle = function(pub, pubName){
+  $('#popUp').removeClass('hidden');
+  $('#currentPub').text(pubName);
+  $("#main").find(`article[data-pub="${pub}"]`).removeClass('hidden');
+  $("#main").find(`article[data-pub!="${pub}"]`).addClass('hidden');
+  $('#popUp').addClass('hidden');
+};
+
+$('#sourceList li').on('click', function(){
+  var pub = $(this).children('a').attr('id');
+  var pubName = $(this).text();
+  pubToggle(pub, pubName);
+});
+
+$('#logo').on('click', function(){
+  $('#currentPub').text("All");
+  $("#main").find('.article').removeClass('hidden');
+})
diff --git a/styles/normalize.css b/styles/normalize.css
index 5e5e3c8..8251d0e 100755
--- a/styles/normalize.css
+++ b/styles/normalize.css
@@ -7,7 +7,7 @@
  */
 
 html {
-  font-family: sans-serif; /* 1 */
+  font-family: 'Work Sans', sans-serif; /* 1 */
   -ms-text-size-adjust: 100%; /* 2 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
diff --git a/styles/style.css b/styles/style.css
index fcfbf38..42732c3 100755
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,4 +1,3 @@
-/* General styles */
 .container {
   max-width: 1000px;
   margin: 0 auto;
@@ -174,7 +173,7 @@ nav ul li:hover > ul {
 
 /* First Tier Dropdown */
 nav ul ul li {
-	width:170px;
+	width: 200px;
 	float:none;
 	display:list-item;
 	position: relative;
@@ -235,3 +234,8 @@ nav ul ul li {
   text-align: right;
   color: #097FB2;
 }
+
+.category {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}