diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..4abfea8
Binary files /dev/null and b/.DS_Store differ
diff --git a/css/.DS_Store b/css/.DS_Store
new file mode 100644
index 0000000..792d702
Binary files /dev/null and b/css/.DS_Store differ
diff --git a/css/custom.css b/css/custom.css
index 6e7ce8b..40f7dad 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -1 +1,111 @@
-/* You can include your custom styling here */
\ No newline at end of file
+/* You can include your custom styling here */
+
+/*Navigation bar hover*/
+#navbar ul li a:hover {
+	text-decoration: none;
+	background: url(../images/logo/bg_nav_rollover.png) width="auto" height="100%" repeat-x;
+    color: #E8410E;
+}
+
+#header_dropdown{
+	float:left;
+}
+
+.twitter-follow-button {
+	margin-top: 15px;
+}
+
+#Wrapper_sidebar{
+  margin: 0 auto;
+  width: 100%;
+}
+
+#All_channels_dropdown button{
+	width:100%;
+}
+
+#latest_and_popular{
+  	float: right;
+  	width:100%;
+}
+
+#latest_and_popular button{
+  	width:50%;
+  	border-bottom-width: 2px;
+}
+
+#stream-switcher {
+  border-bottom: 1px solid #d9e0e2;
+  box-shadow: 0 2px 0 rgba(217,224,226,0.2);ß
+  padding: 20px 12px;
+
+}
+
+.clearfix {
+  display: block;
+}
+
+/*Dropdown all channels formatting*/
+
+/*.all_channel_dropdown_select {
+  background-color: #ff3c1f;
+  border: none;
+  border-radius: .25em;
+  color: #fff;
+  font-family: 'Source Sans Pro',sans-serif;
+  font-size: .875em;
+  font-style: normal;
+  line-height: 36px;
+  padding: 1px 40px 0 .8em;
+  text-transform: uppercase;
+  -webkit-font-smoothing: subpixel-antialiased !important;
+}*/
+
+/*Nav Bar footer*/
+.stream-footer ul li a{
+	font-family: 'Source Sans Pro',sans-serif;
+	font-size: 12px;
+	color: #ff3c1f;
+	text-align: center;
+	display: block;
+	text-decoration: none;
+	width:55px;
+	height:13px;
+}
+.stream-footer ul li {
+	display: inline;
+}
+
+.stream-footer{
+	width: 100%;
+}
+
+/*Main Wrapper*/
+.main {
+  background-color:#f8f9fb ;
+}
+
+#wrapper {
+  margin: 0 auto;
+  width: 90%;
+  background-color:#f8f9fb ;
+}
+
+/*Main Header*/
+#main_header{
+	text-align: center;
+	font-size:14px;
+}
+
+#main_article{
+	background-color: white;
+}
+
+#footer_main{
+	background-color: #E8410E;
+}
+
+#thumbnail{
+	border:none;
+}
+
diff --git a/images/.DS_Store b/images/.DS_Store
index 416248f..e8ce0ef 100644
Binary files a/images/.DS_Store and b/images/.DS_Store differ
diff --git a/images/favicon/.DS_Store b/images/favicon/.DS_Store
new file mode 100644
index 0000000..fa8c20a
Binary files /dev/null and b/images/favicon/.DS_Store differ
diff --git a/images/logo/.DS_Store b/images/logo/.DS_Store
new file mode 100644
index 0000000..c62476f
Binary files /dev/null and b/images/logo/.DS_Store differ
diff --git a/images/logo/bg_nav_rollover.png b/images/logo/bg_nav_rollover.png
new file mode 100755
index 0000000..449afa4
Binary files /dev/null and b/images/logo/bg_nav_rollover.png differ
diff --git a/images/logo/follow-logo.png b/images/logo/follow-logo.png
new file mode 100644
index 0000000..a9535cd
Binary files /dev/null and b/images/logo/follow-logo.png differ
diff --git a/images/logo/like-logo.png b/images/logo/like-logo.png
new file mode 100644
index 0000000..5e614a9
Binary files /dev/null and b/images/logo/like-logo.png differ
diff --git a/images/logo/rss-logo.png b/images/logo/rss-logo.png
new file mode 100644
index 0000000..28346ec
Binary files /dev/null and b/images/logo/rss-logo.png differ
diff --git a/images/main/.DS_Store b/images/main/.DS_Store
new file mode 100644
index 0000000..31bf56a
Binary files /dev/null and b/images/main/.DS_Store differ
diff --git a/images/screenshots/.DS_Store b/images/screenshots/.DS_Store
new file mode 100644
index 0000000..f80f1bb
Binary files /dev/null and b/images/screenshots/.DS_Store differ
diff --git a/images/sidebar/.DS_Store b/images/sidebar/.DS_Store
new file mode 100644
index 0000000..7c1ba41
Binary files /dev/null and b/images/sidebar/.DS_Store differ
diff --git a/index.html b/index.html
index ce15d9c..5a75080 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
-    <link rel="icon" href="images/favicon/favicon.ico">
+    <link rel="icon" href="images/favicon/favicon.ico"> 
 
     <title>The Next Web</title>
 
@@ -17,6 +17,7 @@
 
     <script src="js/ie-emulation-modes-warning.js"></script><style type="text/css"></style>
 
+
     <link href="css/custom.css" rel="stylesheet">
   </head>
 
@@ -25,57 +26,294 @@
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container-fluid">
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+          <button type="button" id="header_dropdown" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
+
           <a class="navbar-brand" href="#">
             <img src="images/logo/tnw-logo.svg" alt="" width="auto" height="100%">
           </a>
         </div>
+
         <div id="navbar" class="navbar-collapse collapse">
-          <ul class="nav navbar-nav navbar-right">
-            <li><a href="#">Dashboard</a></li>
-            <li><a href="#">Settings</a></li>
-            <li><a href="#">Profile</a></li>
-            <li><a href="#">Help</a></li>
-          </ul>
-          <form class="navbar-form navbar-right">
-            <input type="text" class="form-control" placeholder="Search...">
-          </form>
+          <div>
+             <ul class="nav navbar-nav navbar-left">
+               <li><a href="#">BLOG</a></li>
+               <li><a href="#">CONFERENCE</a></li>
+               <li><a href="#">DEALS</a></li>
+               <li><a href="#">PRO</a></li>
+             </ul>
+          </div>
+
+          <div> 
+            <ul class="nav navbar-nav navbar-right">
+              <li class="hidden-xs hidden-sm hidden-md">
+              <!-- Insert Facebook here -->
+              </li>
+              <li class="hidden-xs hidden-sm hidden-md">
+                <a href="https://twitter.com/thenextweb" class="twitter-follow-button" data-show-count="false">Follow</a>
+                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
+                </script>
+              </li>
+              <li class="hidden-xs hidden-sm hidden-md">
+                <a href="javascript:(function(){var a=window,b=document,c=encodeURIComponent,d=a.open('http://www.seocentro.com/cgi-bin/promotion/bookmark-rss/rss.pl?u='+c( 'http://thenextweb.com/feed/?token=116910' ),'bookmark_popup','left='+((a.screenX||a.screenLeft)+10)+',top='+((a.screenY||a.screenTop)+10)+',height=480px,width=720px,scrollbars=1,resizable=1,alwaysRaised=1');a.setTimeout(function(){ d.focus()},300)})();" title="Social Bookmark"><img src="http://www.seocentro.com/bookmark-rss/images/rss_button01.gif" alt="RSS Feed Readers" border="0" title="RSS Feed Readers"></a>
+              </li>
+              <li id="dropdown" >
+                  <a class="glyphicon glyphicon-triangle-bottom" aria-hidden="false"></a>
+              </li>
+              <li id="login">
+                  <a class="glyphicon glyphicon-user" aria-hidden="false"></a>
+              </li>
+              <li id="login" class="hidden-xs hidden-sm hidden-md">
+                  <a class="glyphicon glyphicon-info-sign" aria-hidden="false"></a>
+              </li> 
+              <li id="search">
+                <form class="navbar-form navbar-right" role="search">
+                  <a class="glyphicon glyphicon-search" aria-hidden="false"></a>
+                  <input type="text" class="form-control" placeholder="Search...">
+                </form>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
     </nav>
 
+    <!-- side nav bar -->
     <div class="container-fluid">
       <div class="row">
-        <div class="col-sm-3 col-md-2 sidebar">
-          <ul class="nav nav-sidebar">
-            <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
-            <li><a href="#">Reports</a></li>
-            <li><a href="#">Analytics</a></li>
-            <li><a href="#">Export</a></li>
-          </ul>
-          <ul class="nav nav-sidebar">
-            <li><a href="">Nav item</a></li>
-            <li><a href="">Nav item again</a></li>
-            <li><a href="">One more nav</a></li>
-            <li><a href="">Another nav item</a></li>
-            <li><a href="">More navigation</a></li>
-          </ul>
-          <ul class="nav nav-sidebar">
-            <li><a href="">Nav item again</a></li>
-            <li><a href="">One more nav</a></li>
-            <li><a href="">Another nav item</a></li>
-          </ul>
-        </div>
-        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
-          <h1>News Content</h1>
+        <div class="col-sm-4 col-md-3 sidebar">
+          <div id="Wrapper_sidebar">
+            <div class="btn-group" role="group" aria-label="...">
+              <div id="stream-switcher" class="clearfix">
+              <!-- channel dropdown -->
+                <div class="btn-group col-lg-12" id="All_channels_dropdown">
+                  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+                  ALL CHANNELS <span class="caret"></span>
+                  </button>
+                <ul class="dropdown-menu" role="menu">
+                  <li class="divider"></li>
+                    <li><a href="#">Channels</a></li>
+                    <li><a href="#">Apps</a></li>
+                    <li><a href="#">Creativity</a></li>
+                    <li><a href="#">Design & Dev</a></li>
+                    <li><a href="#">Entrepreneur</a></li>
+                    <li><a href="#">Gadgets</a></li>
+                    <li><a href="#">Insider</a></li>
+                    <li><a href="#">Lifehacks</a></li>
+                    <li><a href="#">Media</a></li>
+                    <li><a href="#">Offers</a></li>
+                    <li><a href="#">Shareables</a></li>
+                    <li><a href="#">Socialmedia</a></li>
+                  <li class="divider"></li>
+                    <li><a href="#">Editions</a></li>
+                    <li><a href="#">Africa</a></li>
+                    <li><a href="#">Asia</a></li>
+                    <li><a href="#">Australia</a></li>
+                    <li><a href="#">Canada</a></li>
+                    <li><a href="#">Europe</a></li>
+                    <li><a href="#">India</a></li>
+                    <li><a href="#">Latin America</a></li>
+                    <li><a href="#">Middle East</a></li>
+                    <li><a href="#">UK</a></li>
+                   <li class="divider"></li>
+                    <li><a href="#">Companies</a></li>
+                    <li><a href="#">Apple</a></li>
+                    <li><a href="#">Facebook</a></li>
+                    <li><a href="#">Google</a></li>
+                    <li><a href="#">Microsoft</a></li>
+                    <li><a href="#">Twitter</a></li>
+                </ul>
+              </div>
+              <br>
+                <!-- <div class="all_channel_dropdown_select">
+                  <select id="channel-select" name="channel" onclick="ga('send', 'event', 'Navigation', 'Sidebar', 'Channel Select', {'nonInteraction': 1, useBeacon: true});">
+                    <option value="all">All channels</option>
+                      <optgroup label="Channels">
+                       <option value="apps">Apps</option>
+                       <option value="creativity">Creativity</option>
+                       <option value="dd">Design &amp; Dev</option>
+                       <option value="entrepreneur">Entrepreneur</option>
+                       <option value="gadgets">Gadgets</option>
+                       <option value="insider">Insider</option>
+                       <option value="lifehacks">LifeHacks</option>
+                       <option value="media">Media</option>
+                       <option value="offers">Offers</option>
+                       <option value="shareables">Shareables</option>
+                       <option value="socialmedia">Social Media</option>
+                    
+                      </optgroup>
+                        
+                      <optgroup label="Editions">
+                       <option value="africa">Africa</option>
+                       <option value="asia">Asia</option>
+                       <option value="au">Australia</option>
+                       <option value="ca">Canada</option>
+                       <option value="eu">Europe</option>
+                       <option value="in">India</option>
+                       <option value="la">Latin America</option>
+                       <option value="me">Middle East</option>
+                       <option value="uk">UK</option>
+                    
+                      </optgroup>
+                        
+                      <optgroup label="Companies">
+                       <option value="apple">Apple</option>
+                       <option value="facebook">Facebook</option>
+                       <option value="google">Google</option>
+                       <option value="microsoft">Microsoft</option>
+                       <option value="twitter">Twitter</option>
+                    
+                      </optgroup>
+                  </select>
+                </div> -->
+                <br>
+              <!-- Latest and Popular -->
+                <div id="latest_and_popular" class="btn-group" role="group" aria-label="...">
+                  <button type="button" class="btn btn-default">LATEST</button>
+                  <button type="button" class="btn btn-default">POPULAR</button>
+                </div>
+              </div>
+              <div class="clearfix" sidebar>
+                <div id="stream-list" class="clearfix">
+                <!-- UL and LI -->
+                  <ul class="nav nav-sidebar" class="container-fluid">
+                    <li>
+                      <a href="#">
+                        <div class="media">
+                          <div class="media-left">
+                            <img class="img-rounded" src="images/sidebar/kits-and-themese-feat-60x50.jpg" alt="kits">
+                          </div>
+                          <div class="media-body">
+                          <h4 class="media-heading" class="text-capitalize">91% off a lifetime of premium UI kits & design resources</h4>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+
+                    <li>
+                      <a href="#">
+                        <div class="media">
+                          <div class="media-left">
+                            <img class="img-rounded" src="images/sidebar/Square-Reader-60x50.jpg" alt="kits">
+                          </div>
+                          <div class="media-body">
+                          <h4 class="media-heading" class="text-capitalize">Square takes its register software pLatform worldwide</h4>
+                          <cite>10 minutes ago</cite>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+
+                    <li>
+                      <a href="#">
+                        <div class="media">
+                          <div class="media-left">
+                            <img class="img-rounded" src="images/sidebar/well-dressed-man-in-coat-60x50.jpg" alt="kits">
+                          </div>
+                          <div class="media-body">
+                          <h4 class="media-heading" class="text-capitalize">The weird science of First impressions</h4>
+                          <cite>18 minutes ago</cite>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+
+                    <li>
+                      <a href="#">
+                        <div class="media">
+                          <div class="media-left">
+                            <img class="img-rounded" src="images/sidebar/FireShot-Screen-Capture-357-adidas-Originals-I-mi-ZX-FLUX-Photo-Print-App-www_adidas_co_uk_mizxflux-60x50.png" alt="kits">
+                          </div>
+                          <div class="media-body">
+                          <h4 class="media-heading" class="text-capitalize">Print photos on your Adidas sneakers. Why not?</h4>
+                          <cite>27 minutes ago</cite>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                    
+                    <li>
+                      <a href="#">
+                        <div class="media">
+                          <div class="media-left">
+                            <img class="img-rounded" src="images/sidebar/Full-Page-Beauty-Bundle-Screenshot-3-1-60x50.png" alt="kits">
+                          </div>
+                          <div class="media-body">
+                          <h4 class="media-heading" class="text-capitalize">Amazon begins its Black Friday deals a week early</h4>
+                          <cite>30 minutes ago</cite>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="stream-footer" class="navbar navbar-fixed-bottom" class="clearfix">
+              <!-- NavBar Footer -->
+                <ul class="nav navbar-nav">
+                  <li><a href="http://thenextweb.com/about/">About</a></li>
+                  <li><a href="http://goodies.thenextweb.com/">Goodies</a></li>
+                  <li><a href="http://thenextweb.com/advertise/">Advertise</a></li>
+                  <li><a href="http://thenextweb.com/privacy-policy/">Privacy</a></li>
+                  <li><a href="http://thenextweb.com/tos/">ToS</a></li>
+                </ul>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
+      <div>
+        <div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main">
+          <div id="wrapper">
+            <div id="main_header" class="hidden-xs hidden-sm col-md-12 col-lg-12"> Support TNW - <a href="#">become Pro</a> and we can ditch the banners.<p>
+            </div>
+              <div id="main_article">
+                <div class="container-fluid">
+                  <div class="row">
+                    <div class="col-sm-8 col-md-8">
+                      <div class="thumbnail">
+                        <img src="images/main/Square-Reader-520x245.jpg" alt="...">
+                          <div class="caption">
+                            <cite>By <a href="#" class="text-uppercase">Ben Woods</a> — 20 Nov'14</cite>
+                              <h1>Square officially launches its Register software platform worldwide</h1>
+                              <p>Square has today announced that its point-of-sale(POS) software Square Register is now available globally, having previously been restricted to users in the US, Canada and Japan. Announced at The Financial...<a href="#">Keep reading</a> </p>
+                          </div>
+                      </div>
+                    </div>
+                    <div class="col-sm-offset-4 col-md-offset-8">
+                      <div class="thumbnail">
+                        <img src="images/main/well-dressed-man-in-coat-520x245.jpg" alt="...">
+                        <div class="caption">
+                          <cite>20 Nov'14 — By <a href="#" class="text-uppercase">Jory Mackay</a></cite>
+                          <h3>The weird science of first impressions</h3>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-sm-offset-4 col-md-offset-8">
+                      <div class="thumbnail">
+                        <img src="images/main/FireShot-Screen-Capture-357-adidas-Originals-I-mi-ZX-FLUX-Photo-Print-App-www_adidas_co_uk_mizxflux-520x245.png" alt="...">
+                        <div class="caption">
+                          <cite>20 Nov'14 — By <a href="#" class="text-uppercase">Paul Sawers</a></cite>
+                          <h3>Adidas now lets Americans print photos on their sneakers too</h3>
+                        </div>
+                      </div>
+                    </div>
+                    <div id="footer_main" class="bottom_fixed">
+                    </div>
+                  </div>  
+                </div>
+              </div>
+             </div>
+            </div> 
+          </p>
+        </h1>
+      </div>
     </div>
+  </div>
 
     <!-- Bootstrap core JavaScript
     ================================================== -->
diff --git a/js/.DS_Store b/js/.DS_Store
new file mode 100644
index 0000000..8daa74a
Binary files /dev/null and b/js/.DS_Store differ