diff --git a/_data/categories.yaml b/_data/categories.yaml
index e0b2f5b..108d03f 100644
--- a/_data/categories.yaml
+++ b/_data/categories.yaml
@@ -1,13 +1,12 @@
 ---
 - name: academics
+  title: Academics
   subcategories:
 - name: cultural
-  subcategories:
-- name: tech
-  subcategories:
-- name: sac
+  title: Cultural
   subcategories:
 - name: columns
+  title: Columns
   subcategories:
     - name: coverstory
       title: Cover Story
@@ -15,15 +14,25 @@
       title: Big Story
     - name: almostfamous
       title: Almost Famous
-    - name: phekingnews
-      title: Pheking News
     - name: guestcomentary
       title: Guest Comentary
-- name: editorial
-  title: Editorial
-- name: verbatim
+    - name: editorial
+      title: Editorial
+- name: tech
+  title: Tech
   subcategories:
 - name: career
+  title: Career
+  subcategories:
+- name: sac
+  title: SAC
+  subcategories:
+- name: phekingnews
+  title: Pheking News
+  subcategories:
+- name: verbatim
+  title: Verbatim
   subcategories:
 - name: sports
+  title: Sports
   subcategories:
diff --git a/_data/categories_name.yaml b/_data/categories_name.yaml
new file mode 100644
index 0000000..1c26c2a
--- /dev/null
+++ b/_data/categories_name.yaml
@@ -0,0 +1,15 @@
+---
+academics: Academics
+cultural: Cultual
+columns: Columns
+coverstory: Cover Story
+bigstory: Big Story
+almostfamous: Almost Famous
+phekingnews: Pheking News
+guestcomentary: Guest Comentary
+tech: Tech
+career: Career
+sac: SAC
+editorial: Editorial
+verbatim: Verbatim
+sports: Sports
diff --git a/_data/homepage_categories.yaml b/_data/homepage_categories.yaml
index a6c9425..7b2d8d8 100644
--- a/_data/homepage_categories.yaml
+++ b/_data/homepage_categories.yaml
@@ -1,10 +1,8 @@
 ---
 featured_articles:
-- bigstory
 - editorial
 - almostfamous
 - phekingnews
-- verbatim
 - tech
 
 new_articles:
diff --git a/_includes/cat_header.html b/_includes/cat_header.html
index 7eab159..95c4c7f 100644
--- a/_includes/cat_header.html
+++ b/_includes/cat_header.html
@@ -1,12 +1,25 @@
-<div id="header" class="container-fluid category-header">
-  <div class="cover center-both text-center">
-    <h1 class="title">{{ page.category | capitalize }}</h1>
-  </div>
+{% assign post = site.categories[page.category].first %}
+<div id="header" class="container category-header">
+  <div class="row">
+    <div class="col-md-8 tinted cover-image center-fill-container">
+      {% if post.image != nil %}
+      <div class="img-container">
+        <img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt="">
+      </div>
+      {% endif %}
+    </div>
 
-  <div class="left">
+    <div class="col-md-4 cover-details">
+      <div class="cover-title">
+        <a  href="{{ post.url }}" class="cover-link">
+          <h1 class="title">{{ post.title  }}</h1>
+        </a>
+      </div>
+      <div class="date">{{ post.date | date: "%-d %B %Y" }}</div>
+      <div class="cover-excerpt">
+        {{ post.excerpt | truncate: 350 }}
+      </div>
+    </div>
   </div>
-
-  <div class="right">
-  </div>
-
 </div>
+
diff --git a/_includes/footer.html b/_includes/footer.html
index 2769ef3..a613feb 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,15 +1,22 @@
 <footer class="container-fluid">
-  <div class="center-both">
-    <div class="container">
-      <div class="row">
-      <p class="col-sm-4 pull-left">&copy; Copyright 2016 &#8212; Watch Out! News Agency</p>
-      <div class="col-sm-4 pull-right">
-        <div class="row">
-          <a class="col-sm-4" href="/about/">About Us</a>
-          <a class="col-sm-4" href="http://fb.com/WatchOutNewsAgency">Facebook</a>
-        </div>
+  <div class="pre-footer container">
+    <div class="brand pull-left">
+      <img class="logo" src="/images/logo-black.png">
+      <div class="name-container">
+        <div class="name">Watch Out!</div>
+        <div class="desc">Official News<br>Body of IITR</div>
       </div>
-     </div>
     </div>
-	</div>
+    <div class="social pull-right">
+      <!--      <a href="/team">Team</a> -->
+      <a href="/about">About</a>
+      <img src="/images/fb-logo.svg" href="http://fb.com/WatchOutNewsAgency">
+      <img src="/images/youtube-play.svg" href="https://www.youtube.com/channel/UCthZ7tKOzy4EJpuVxtdcp1A">
+    </div>
+  </div>
+
+
+  <div class="container copyright">
+    <p>&copy; Copyright 2016 &#8212; Watch Out! News Agency</p>
+  </div>
 </footer>
diff --git a/_includes/head.html b/_includes/head.html
index 0a77c5f..a0f0894 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -38,7 +38,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link rel="alternate" type="application/rss+xml" href="/atom.xml" />
 
-  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
   <link rel="stylesheet" href="/css/base.css" type="text/css" media="screen, projection" />
 
   <script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
diff --git a/_includes/header.html b/_includes/header.html
index a99927a..a4bfde6 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -3,50 +3,66 @@
   {% assign post = page %}
 {% endif %}
 
-<div id="fb-root"></div>
-<script>(function(d, s, id) {
-  var js, fjs = d.getElementsByTagName(s)[0];
-  if (d.getElementById(id)) return;
-  js = d.createElement(s); js.id = id;
-  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=691723664330476";
-  fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk'));</script>
-
-<div id="fb-root"></div>
-<script>(function(d, s, id) {
-  var js, fjs = d.getElementsByTagName(s)[0];
-  if (d.getElementById(id)) return;
-  js = d.createElement(s); js.id = id;
-  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=691723664330476";
-  fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk'));</script>
-
-<div id="header" class="container-fluid {% if page.is_post %}post-header{% endif %}">
-  {% if post.image != nil %}
-  <div class="cover-image center-vertical"><img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt=""></div>
-  {% endif %}
-  {% unless page.is_post == true %}
-  <div class="cover center-both text-center">
-   <a  href="{{ post.url }}" class="cover-link"> <h1 class="title">{{ post.title }}</h1></a>
+<a  href="{{ post.url }}">
+<div id="header" class="container {% if page.is_post %}post-header{% endif %}">
+  <div class="row header-row outer-row">
+    {% if post.image != nil %}
+    <div class="col-md-8 tinted cover-image center-fill-container">
+      <div class="img-container">
+        <img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt="">
+      </div>
+    </div>
+    {% endif %}
+    <div class="col-md-4 cover-details">
+      <div class="cover-title-label">
+        Cover Story
+      </div>
+      <div class="cover-title">
+        <a  href="{{ post.url }}" class="cover-link">
+          <h1 class="title">{{ post.title  }}</h1>
+        </a>
+      </div>
+      <div class="red-strip"></div>
+      <div class="cover-excerpt">
+        {{ post.excerpt }}
+      </div>
+    </div>
+    </div>
   </div>
-   {% endunless %}
-
-  <div class="left">
-  {% if page.is_post and post.next %}
-    <a class="center-both scroll-buttons" href="{{ post.next.url }}">
-        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
-        <span class="sr-only">Next</span>
-    </a>
-  {% endif %}
-  </div>
-
-  <div class="right">
-  {% if page.is_post and post.next %}
-    <a class="center-both scroll-buttons" href="{{ post.previous.url }}">
-        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-        <span class="sr-only">Previous</span>
-    </a>
-  {% endif %}
-  </div>
-
+</div>
+</a>
+
+<div id="new-articles" class="container content">
+  <div class="container-title">New Articles</div>
+  <section>
+    <div class="row outer-row">
+      {% for post in site.related_posts limit: 5 %}
+
+      {% if forloop.index == 3 %}
+    </div>
+    <div class="row outer-row">
+      {% endif %}
+
+      <div class="col-sm-{% if forloop.index < 3 %}6{% else %}4{% endif %} article-col">
+        <a href="{{ post.url }}">
+          <div class="article">
+            <div class="center-fill-container img-container tinted">
+              <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}">
+            </div>
+            <div class="details">
+              <div class="head">
+                <h3 class="title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
+                <div class="tag"><a href="/category/{{ post.category }}/">{{ site.data.categories_name[post.category] }}</a></div>
+                <span class="date">{{ post.date | date: "%b %e, %Y" | upcase }}</span>
+              </div>
+              {% if forloop.index < 3 %}
+              <div class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify }}{% endif %}</div>
+              {% endif %}
+            </div> <!-- details -->
+          </div>
+        </a>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
 </div>
diff --git a/_includes/horizontal_post.html b/_includes/horizontal_post.html
new file mode 100644
index 0000000..658117e
--- /dev/null
+++ b/_includes/horizontal_post.html
@@ -0,0 +1,17 @@
+{% assign post = include.post %}
+<div class="row article article-horiozntal">
+  <div class="col-md-4 center-fill-container img-container">
+    <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}">
+  </div>
+  <div class="details-container col-md-8">
+    <div class="details">
+      <div class="head">
+        <h3 class="title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
+        <div class="tag"><a href="/category/{{ post.category }}/">{{ site.data.categories_name[post.category] }}</a></div>
+        <span class="date">{{ post.date | date: "%b %e, %Y" | upcase }}</span>
+      </div>
+      <div class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify | truncate: 250 }}{% endif %}</div>
+    </div> <!--details-->
+  </div> <!--details-container-->
+</div> <!--article-->
+
diff --git a/_includes/navbar.html b/_includes/navbar.html
index 4a026dd..473fb03 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -1,41 +1,50 @@
-<div class="navbar-wrapper" data-spy="affix" data-offset-top="0">
-  <div class="container-fuild">
-
-    <nav class="navbar navbar-default">
-      <div class="container">
-
-        <div class="navbar-header">
-          <button type="button" 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-left" href="/"><img class="navbar-logo" src="/images/watchout.svg" alt="WONA Logo"></a>
-        </div>
-
-        <div id="navbar" class="navbar-collapse collapse">
-          <ul class="nav navbar-nav">
-            {% for cat in site.data.categories %}
-              {% if cat.subcategories != nil %}
-              <li class = "dropdown">
-                <a class="hover-underline" href="#" class="dropdown-toggle" data-toggle="dropdown">{{ cat.name | uppercase }} <span class="caret"></span></a>
-                <ul class="dropdown-menu">
-                  {% for subcat in cat.subcategories %}
-                   {% if site.categories[subcat.name] != nil %}
-                    <li><a class="hover-underline" href="/category/{{ subcat.name }}/">{{ subcat.title | uppercase }}</a></li>
-                    {% endif %}
-                  {% endfor %}
-                </ul>
-              </li>
-              {% elsif  site.categories[cat.name] != nil%}
-              <li><a class="hover-underline" href="/category/{{ cat.name }}/">{{ cat.name | uppercase }}</a></li>
-              {% endif %}
-            {% endfor %}
-          </ul>
-        </div>
+<div class="pre-nav container">
+  <a href="/">
+    <div class="brand pull-left">
+      <img class="logo" src="/images/logo-black.png">
+      <div class="name-container">
+        <div class="name">Watch Out!</div>
+        <div class="desc">Official News<br>Body of IITR</div>
       </div>
-    </nav>
+    </div>
+  </a>
+  <div class="social pull-right">
+    <a href="/about">About</a>
+    <img src="/images/fb-logo.svg" href="http://fb.com/WatchOutNewsAgency">
+    <img src="/images/youtube-play.svg" href="https://www.youtube.com/channel/UCthZ7tKOzy4EJpuVxtdcp1A">
   </div>
 </div>
 
+<nav class="navbar navbar-default" data-spy="affix" data-offset-top="110">
+  <div class="container">
+    <div class="navbar-header">
+      <button type="button" 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="/">Watch Out!</a>
+    </div>
+    <div id="navbar" class="navbar-collapse collapse">
+      <ul class="nav navbar-nav navbar-right">
+        {% for cat in site.data.categories %}
+          {% if cat.subcategories != nil %}
+          <li class = "dropdown">
+            <a class="hover-underline" href="#" class="dropdown-toggle" data-toggle="dropdown">{{ cat.title }} <span class="caret"></span></a>
+            <ul class="dropdown-menu">
+              {% for subcat in cat.subcategories %}
+               {% if site.categories[subcat.name] != nil %}
+                <li><a class="hover-underline" href="/category/{{ subcat.name }}/">{{ subcat.title }}</a></li>
+                {% endif %}
+              {% endfor %}
+            </ul>
+          </li>
+          {% elsif  site.categories[cat.name] != nil%}
+          <li><a class="hover-underline" href="/category/{{ cat.name }}/">{{ cat.title }}</a></li>
+          {% endif %}
+        {% endfor %}
+      </ul>
+    </div><!--/.nav-collapse -->
+  </div>
+</nav>
diff --git a/_layouts/category.html b/_layouts/category.html
index a8a42eb..dfb07dc 100644
--- a/_layouts/category.html
+++ b/_layouts/category.html
@@ -5,25 +5,15 @@ layout: layout
 {% include cat_header.html %}
 
 <div class="category-posts container">
-  {% for post in site.categories[page.category] %}
-    <div class="category-post row">
-      {% if post.image != nil %}
-        <div class="col-sm-3 center-fill-container img-container">
-          <a href="{{ post.url }}">
-            <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill {% if post.image == null %}hidden{% endif %}">
-          </a>
-        </div>
-        <div class="col-sm-9 details">
-          <h3 class="title"><a href="{{ post.url }}">{{ post.title}}</a></h3>
-          <p class="tag">{{ post.excerpt }}</p>
-        </div>
-      {% else %}
-        <div class="col-sm-12 details">
-          <h3 class="title"><a href="{{ post.url }}">{{ post.title}}</a></h3>
-          <p class="tag">{{ post.excerpt }}</p>
-        </div>
-      {% endif %}
+  <div class="row">
+    <div class="col-md-8">
+      {% for post in site.categories[page.category] offset: 1 %}
+      {% include horizontal_post.html post=post %}
+      {% endfor %}
     </div>
-  {% endfor %}
+    <div class="col-md-4">
+      <div class="fb-page" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="540" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/WatchOutNewsAgency/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/WatchOutNewsAgency/">Watch Out! News Agency</a></blockquote></div>
+    </div>
+  </div>
 </div>
 
diff --git a/_layouts/layout.html b/_layouts/layout.html
index d16f824..9794608 100644
--- a/_layouts/layout.html
+++ b/_layouts/layout.html
@@ -5,6 +5,15 @@
 
   <body>
 
+    <div id="fb-root"></div>
+    <script>(function(d, s, id) {
+      var js, fjs = d.getElementsByTagName(s)[0];
+      if (d.getElementById(id)) return;
+      js = d.createElement(s); js.id = id;
+      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=691723664330476";
+      fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk'));</script>
+
     {% include navbar.html %}
     
     {{ content }}
diff --git a/_layouts/post.html b/_layouts/post.html
index 466353a..fc8c2d1 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,49 +1,63 @@
 ---
 layout: layout
 ---
-{% include header.html %}
-
 <section class="post container">
-  <h1>
-    <a href="{{ page.url }}">{{ page.title }}</a>
-  </h1>
-
-  <section class="byline col-md-12">
-    {{ page.date | date: "%B %e, %Y" }}
-  </section>
-
-  <div class="col-md-8">
-    <section class="content{% if page.justify %} justify{% endif %}">
-      {{ content }}
-    </section>
+  <div class="header">
+    <h3 class="tag">
+      <a href="/category/{{ page.category }}/">{{ site.data.categories_name[page.category] }}</a>
+    </h3>
+    <h1 class="title">
+      <a href="{{ page.url }}">{{ page.title }}</a>
+    </h1>
+    <div class="date">
+      {{ page.date | date: "%B %e, %Y" }}
+    </div>
   </div>
+  <div class="row body">
 
-  <div class="fb-page col-md-4" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="400" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/WatchOutNewsAgency/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/WatchOutNewsAgency/">Watch Out! News Agency</a></blockquote></div>
+    <section class="col-md-8 content{% if page.justify %} justify{% endif %}">
+      {{ content }}
 
-    <br/>
-  <div class="fb-like" data-href="{{ site.url }}{{ page.url }}" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
+      <div class="fb-content">
+        <div class="fb-like" data-href="{{ site.url }}{{ page.url }}" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
 
-  <br/>
+        <div class="fb-comments" data-href="{{ site.url }}{{ page.url }}" data-width="100%" data-numposts="5"></div>
+      </div>
 
-  <div class="fb-comments" data-href="{{ site.url }}{{ page.url }}" data-width="100%" data-numposts="5"></div>
+    </section>
+
+    <div class="col-md-4">
+      <div class="fb-page" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="400" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/WatchOutNewsAgency/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/WatchOutNewsAgency/">Watch Out! News Agency</a></blockquote></div>
+    </div>
+  </div> <!-- body -->
 
 </section>
 
-<div id="related-articles-container" class="container-fluid">
-  <section id="related-articles" class="row">
+<div id="more-articles-container" class="container">
+  <div class="head-wrapper">
+    <h1 class="container-title">More from {{ page.category | capitalize }}</h1>
+    <span class="view-all">view all</span>
+  </div>
+  <section id="more-articles" class="row">
 
-  {% for post in site.related_posts limit: 4 %}
+    {% for post in site.categories[page.category] limit: 5 %}
+    {% if post.url != page.url %}
+    {% if forloop.index < 5 or found %}
     <div class="article col-sm-3">
       <a href="{{ post.url }}">
         <div class="center-fill-container img-container">
           <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}">
         </div>
-        <div class="details text-center ">
-          <h3 class="title">{{ post.title | truncatewords: 4}}</h3>
-          <p class="tag">{{ post.tag }}</p>
+        <div class="details">
+          <h3 class="title">{{ post.title | truncatewords: 7}}</h3>
+          <div class="date">{{ post.date | date: "%B %e, %Y" }}</div>
         </div>
       </a>
     </div>
-  {% endfor %}
+    {% endif %}
+    {% else %}
+      {% assign found = true %}
+    {% endif %}
+    {% endfor %}
   </section>
 </div>
diff --git a/css/base.scss b/css/base.scss
index 8963e93..1619194 100644
--- a/css/base.scss
+++ b/css/base.scss
@@ -3,18 +3,24 @@
 
 // ================ VARS ===============//
 
+// Bootstrap vars
 $font-color: #333;
-$navbar-default-link-color: white;
-$navbar-default-link-active-color: darken($navbar-default-link-color, 25%);
-$navbar-default-link-hover-color: $navbar-default-link-color;
-$dropdown-link-hover-color: $navbar-default-link-color;
-$home-header-bg-color: #333;
+$container-lg: 1040px;
+$navbar-default-brand-color: #4e4e4e;
+$navbar-default-bg: #fff;
+$navbar-default-border: none;
+
+// Other vars
+$pre-nav-logo-height: 65px;
+$home-header-bg-color: #22221f;
+$home-header-height: 340px;
+$home-header-shadow: 0 0 30px 0px rgba(0,0,0,0.4);
 $new-article-img-height: 150px;
 $new-article-img-width: 225px;
 $new-article-title-color: black;
-$new-article-tag-color: #e5cb52;
+$new-article-tag-color: #ffd700;
 $featured-articles-bg-color: #f7f7f7;
-$featured-articles-title-color: #373737;
+$featured-articles-title-color: #4e4e4e;
 $article-cover-img-width: 355px;
 $article-cover-img-height: 190px;
 $carousel-bg-color: #333;
@@ -59,135 +65,177 @@ $carousel-height: 625px;
   src: local('Merriweather'), local('Merriweather Regular'), url(/fonts/Merriweather-Regular.ttf) format('woff');
 }
 
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v7/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+
 body {
 	font-size: 13px;
 	color: $font-color;
 	background: #fff;
+	font-family: Lato, Merriweather, Open Sans, sans-serif;
 	@include box-sizing();
 }
 
 *{	
-	font-family: Merriweather, Open Sans, sans-serif;
+	font-family: Lato, Merriweather, Open Sans, sans-serif;
 }
 
 
 // ================ NAV ================//
+.pre-nav, .pre-footer  {
+  height: $pre-nav-logo-height * 1.6;
+  border-bottom: 1px solid #f3f3f3;
 
-.navbar-wrapper {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 20;
-  transition: background-color 1s ease-in;
-  background: black;
-  background: rgba(45, 44, 40, 0.6);
-
-  &.affix {
-    position: fixed;
+  .brand {
+    height: 100%;
+    padding: $pre-nav-logo-height * .3 0;
   }
 
-  -webkit-transition-duration: .5s;
-  transition-duration: .5s;
+  .name-container {
+    height: $pre-nav-logo-height;
+    position: relative;
+    margin-left: 2em;
+    line-height: 1;
 
-  -webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000  );
-  transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000  );
+    .name {
+      position: absolute;
+      top: 0;
+      width: 7em;
+      font-size: 18px;
+      color: $navbar-default-brand-color;
+    }
 
+    .desc {
+      font-size: 22px;
+      width: 7em;
+      position: absolute;
+      bottom: 0;
+      color: #ababab;
+    }
+  }
 
-  -webkit-transition-property: -webkit-transform;
-  transition-property: transform;
-}
+  .logo {
+    height: $pre-nav-logo-height;
+    float: left;
+  }
 
-.navbar--hidden
-{
-  -webkit-transform: translateY( -100%  );
-  -ms-transform: translateY( -100%  );
-  transform: translateY( -100%  );
+  .social {
+    height: 100%;
+    padding: $pre-nav-logo-height * .623 0;
+    font-size: 16px; 
+    font-weight: bold;
+    color: #ababab;
+
+    > * {
+      margin-left: 1em;
+    }
+  }
 
 }
 
-
-.navbar-logo {
-  @media (min-width: $screen-sm-min) {
-    height: 2.5em;
-    padding: .5em;
-  }
-  @media (max-width: $screen-xs-max) {
-    height: 2.5em;
-    padding: .5em;
-  }
-}
-
-.navbar {
-  background: transparent;
-  border: none;
-  padding-top: 5px;
-  font-weight: bold;
-  font-family: 'Montserrat', sans-serif;
-  font-size: 14px;
-  margin-bottom: 0px;
-  border-bottom: 0px;
-
-  .navbar-header {
-    margin-top: 0.2em;
-  }
+nav {
+	width: 100%;
+  z-index: 200;
+  border-radius: 0;
 
   .navbar-brand {
-    text-transform: uppercase;
+    display: none;
   }
 
-  .navbar-toggle {
-    margin-top: 10px;
-    margin-bottom: 10px;
+  .nav {
+    width: 100%;
+    position: relative;
+    left: -15px;
   }
 
-  .active  a, .open a {
-    background: transparent !important;
-    color: white;
-  }
+  &.affix {
+    top: 0;
+    border-bottom: 2px solid #e5e5e5;
 
-  .dropdown-menu {
-    background-color: #565553;
-  }
-
-  @media (min-width: $screen-sm-min) {
-    .navbar-nav {
-      display: inline-block;
-      float: none;
-      vertical-align: top;
-      text-transform: uppercase;
+    .navbar-brand {
+      display: block;
     }
 
-    .navbar-collapse {
-      text-align: center;
+    .nav {
+      width: initial;
 
+      &:after {
+        width: initial;
+      }
     }
   }
 }
+
+#navbar {
+  padding: 0;
+}
+
+.nav > li {
+  text-align: center;
+  display: inline-block;
+  float: none;
+  margin-bottom: -100%; // Hack to fix the spacing between header and navbar
+
+  &:first-of-type a {
+    padding-left: 0;
+  }
+
+  &:last-of-type a {
+    padding-right: 0;
+  }
+}
+.navbar-nav {
+	font-size: 16px;
+  text-align: justify;
+  font-weight: bold;
+
+  &:after {
+    width: 100%; /* Ensures justification for single lines */
+    display: inline-block;
+  }
+}
+
 // ================ /NAV ================//
 
 // ============= HOME-HEADER ============= //
 
 #header {
-  position: relative;
-  height: 500px;
-  margin-bottom: -($new-article-img-height / 4);
-  background: $home-header-bg-color;
-  padding: 0;
-  overflow: hidden;
+  font-size: 12px;
 
-  &.category-header {
-    height: 300px;
-    box-shadow: 0 100px 125px -100px;
-  }
-
-  &.about-header {
-    height: 200px;
-  }
-
-  .cover {
-    z-index: 10;
+  .header-row {
+    position: relative;
+    height: $home-header-height;
+    background: $home-header-bg-color;
+    border-radius: 8px 8px 0 0;
+    overflow: hidden;
     color: white;
+    box-shadow: $home-header-shadow;
+
+  }
+
+  .row {
+    margin-left: 0;
+  }
+
+  .cover-image {
+    height: $home-header-height;
+  }
+
+  .cover-details {
+    padding: 2em 1.5em;
   }
 
   .cover-link {
@@ -196,61 +244,143 @@ body {
 
   .cover-link:hover {
     text-decoration: none;
+    color: rgb(174, 170, 170);
+  }
+  
+  .cover-title-label {
+    font-size: 14px;
+    font-weight: bold;
   }
 
   .title {
-    font-size: 42px;
+    font-size: 24px;
     font-weight: bold;
-    color: #ffffff;
-    text-shadow: 1px 1px 10px #000000;
-    -webkit-transition: text-shadow 0.5s ease;
-    -moz-transition: text-shadow 0.5s ease;
-    -o-transition: text-shadow 0.5s ease;
-    transition: text-shadow 0.5s ease;
+    margin-top: 0;
+    margin-bottom: 20px;
   }
+}
 
-  .title:hover {
-    text-shadow: 1px 1px 10px #777777;
-  }
+#header.category-header {
+  font-size: 16px;
 
   .cover-image {
-    width: 100%;
-    position: absolute;
-
-    .img-responsive {
-      width: 100%;
-    }
+    border-radius: 10px;
   }
 
-  .scroll-buttons {
-    color: white;
-    font-size: 32px;
-
+  .title {
+    margin-bottom: 0;
   }
 
-  .left {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 10%;
-    @include gradient-horizontal($start-color: rgba(0,0,0,.4), $end-color: rgba(0,0,0,.0001));
+  .date {
+    font-size: 12px;
+    font-weight: bold;
+    font-style: italic;
+    color: #e7ce00;
   }
-  .right {
-    position: absolute;
-    top: 0;
-    left: auto;
-    right: 0;
-    bottom: 0;
+}
 
-    width: 10%;
-    @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.4));
-  }
+.red-strip {
+  height: 0px;
+  width: 90px;
+  border-bottom: 8px solid red;
+}
+
+.cover-excerpt {
+  margin-top: 20px;
 }
 // ============= /HOME-HEADER ============= //
 
 // ============= NEW-ARTICLES ============ //
-#new-articles, #related-articles {
+#new-articles {
+  color: white;
+  margin-bottom: 60px;
+  position: relative;
+
+  .container-title {
+    position: absolute;
+    top: -2.25em;
+    left: -.5em;
+    z-index: 10;
+    color: #252525;
+    background: #fafafa;
+    font-size: 14px;
+    padding: 0.35em 2.35em;
+    box-shadow: $home-header-shadow;
+    border-radius: 0.4em;
+  }
+
+  .article-col {
+    padding: 0 5px;
+
+    &:first-of-type {
+      padding-left: 0;
+    }
+
+    &:last-of-type {
+      padding-right: 0;
+    }
+  }
+
+  .article {
+    position: relative;
+    height: 340px;
+    margin-top: 10px;
+    box-shadow: $home-header-shadow;
+  }
+
+  .details {
+    position: absolute;
+    bottom: 0;
+    padding: 1.5em 1.5em .25em;
+  }
+
+  a:hover {
+    color: #ddd;
+  }
+
+  .row:last-of-type {
+    .article-col:first-of-type .article {
+      overflow: hidden;
+      border-radius: 0px 0px 0px 10px;
+    }
+
+    .article-col:last-of-type .article {
+      overflow: hidden;
+      border-radius: 0px 0px 10px 0px;
+    }
+  }
+}
+
+.details {
+  width: 100%;
+  font-size: 12px;
+
+  .title {
+    text-transform: capitalize;
+    font-size: 20px;
+    margin: 0;
+  }
+
+  .tag {
+    margin-bottom: 5px;
+    text-transform: uppercase;
+    color: $new-article-tag-color;
+  }
+
+  .head {
+    width: 100%;
+    position: relative; 
+  }
+
+  .date {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    font-style: italic;
+  }
+}
+
+#related-articles {
   z-index: 10;
 
   .article:hover {
@@ -305,135 +435,67 @@ body {
 
 // ========== FEATURED-ARTICLE =========== //
 #featured-articles-container {
-  background: $featured-articles-bg-color;
-  padding-top: 3em;
+  padding-top: 20px;
+  padding-bottom: 10px;
+  border-top: 1px solid #ededed;
+  border-bottom: 1px solid #ededed;
+
 }
 
-#featured-articles-title {
-  font-size: 30px;
-  font-weight: bold;
-  color: $featured-articles-title-color;
-  margin-top: 22px;
-  margin-bottom: 22px;
-}
+.article-horiozntal {
+  height: 10em;
+  margin-bottom: 3.5em;
+  margin-left: 0;
 
-#featured-articles {
-  color: lighten($font-color, 10%);
-
-  .article-cover-container {
-    width: $article-cover-img-width;
-    height: $article-cover-img-height;
-    box-shadow: 0px 35px 40px -20px rgba(0,0,0, 0.4);
+  .title {
+    font-size: 19px;
   }
 
-  a {
-      &:hover{
-      color: darken($font-color, 10%);
-      text-decoration: none;
-      @include transition(all, 0.2s, ease-in);
-
-      .details {
-        box-shadow: -3px -3px 15px 0 rgba(0,0,0,0.25);
-      }
-    }
+  .tag {
+    font-size: 15px;
   }
 
-  .article-container {
-    margin-bottom: 10px + 0.1 * $article-cover-img-height;
+  .excerpt {
+    font-size: 14px;
+  }
 
-    .details {
-      position: relative;
-      z-index: 10;
-      margin: 0 auto;
-      top: -0.1 * $article-cover-img-height;
-      background: $featured-articles-bg-color;
-      width: 0.9 * $article-cover-img-width; ;
-      height: 120px;
-      font-size: 0.95em;
-      padding: 0 1em 0.5em;
-
-      .tag {
-        position: absolute;
-        top:0;
-        left: 50%;
-        transform: translate(-50%,-75%); 
-        text-transform: uppercase;
-        font-weight: bold;
-        font-size: 1.1em;
-        color: #ffffff;
-        background-color: rgba(146, 204, 102, 0.85);
-        padding: 0.5em 1em;
-        opacity: 0.9;
-      }
-
-      .title {
-        font-size: 1.85em;
-        font-family: 'Montserrat', sans-serif;
-      }
-
-      &:before {
-        content: " ";
-        display: table;
-      }
-
-    }
+  .img-container {
+    padding-left: 0;
   }
 }
+
 // ========= /FEATURED-ARTICLES ========== //
-// ============= CAROUSEL ============= //
 
-/* Carousel base class */
-.carousel {
-  height: $carousel-height;
+// ================ VIDEO ================ //
+#yt-videos-container {
+  padding-top: 20px;
 }
 
-.carousel-caption {
-    z-index: 10;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-    h1 {
-      font-weight: bold;
-      line-height: 0.98;
-      text-align: center;
-      color: #ffffff;
-    }
+.video-container {
+  height: 400px;
 }
 
-/* Declare heights because of positioning of img element */
-.carousel .item {
-  height: $carousel-height;;
-  background-color: $carousel-bg-color;
-}
-.carousel-inner{
-
-  .cover-image {
-    width: 100%;
-    position: absolute;
-
-    .img-responsive {
-      width: 100%;
-    }
-
-    img {
-      -webkit-filter: blur(15px);
-      filter: blur(15px);
-    }
-  }
-  .video-container {
-    width: 70%;
-    padding: 2%;
-  }
-
-  > .item > img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    min-width: 100%;
-    height: 500px;
+.video-caption {
+  text-align: center;
+  .caption {
+    margin-top: 0;
+    font-size: 28px;
   }
 }
-// ============ /CAROUSEL ============= //
+
+.video-list {
+  list-style: none;
+}
+
+.list-video {
+  height: 100px;
+  margin-bottom: 15px;
+
+  .caption {
+    height: 100%;
+  }
+}
+// =============== /VIDEO ================ //
 
 // ============== COMPONENTS ============== //
 .center-vertical {
@@ -480,6 +542,31 @@ body {
   }
 }
 
+.tinted {
+  background: black;
+  
+  img {
+    opacity: 0.6;
+  }
+}
+
+.img-container {
+  height: 100%;
+  overflow: hidden;
+}
+
+.container-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: $featured-articles-title-color;
+  margin-top: 22px;
+  margin-bottom: 22px;
+}
+
+.outer-row {
+  margin: 0;
+}
+
 a {
 	color: inherit;
 	text-decoration: none;
@@ -527,21 +614,18 @@ blockquote {
 // ============== POST ============== //
 
 .post {
-  z-index: 10;
-  position: relative;
-	background: white;
-	padding: 10px 50px;
-  margin-bottom: 20px;
-	font-size: 1.1em;
+ 	font-size: 1.1em;
 	line-height: 1.5em;
 	color: #333332;
 
-  .content {
-    margin-top: 2em;
+  .header {
+    border-bottom: 4px solid #e7ce00;
+    font-weight: bold;
+    padding-bottom: 30px;
   }
 
-  .fb-page {
-    top:2em;
+  .body {
+    padding-top: 4em;
   }
 
 	p img {
@@ -554,20 +638,80 @@ blockquote {
   .justify {
     text-align: justify;
   }
+
+  .fb-content {
+    margin-top: 40px;
+  }
+
+  .fb-like {
+    margin-bottom: 30px;
+  }
 }
 
-.post-header {
-  box-shadow: 0 100px 125px -100px;
+.header {
+  .tag {
+    text-transform: uppercase;
+    color: #e7ce00;
+    font-size: 16px;
+  }
+
+  .title {
+    font-size: 24px;
+    color: #333333;
+  }
+
+  .date {
+    color: #8b8b8b;
+    font-size: 12px;
+  }
 }
 
 // ============== /POST ============== //
 
 // ========= RELATED-ARTICLES ======== //
+#more-articles-container {
+  margin-top: 35px;
+  margin-bottom: 40px;
+  border-top: 1px solid #ededed;
+  padding-top: 15px;
 
-#related-articles {
-  padding-top: 40px;
-  padding-bottom: 20px;
-  background: #f0f0f0;
+  .head-wrapper {
+    position: relative;
+  }
+
+  .view-all {
+    font-family: Merriweather;
+    font-style: italic;
+    color: #ababab;
+    font-size: 16px;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+#more-articles {
+  color: white;
+
+  .article {
+    height: 155px;
+    position: relative;
+  }
+
+  .details {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    padding: 1.5em;
+  }
+
+  .title {
+    font-size: 16px;
+  }
+
+  .date {
+    position: static;
+  }
 }
 
 // ========= /RELATED-ARTICLES ======= //
@@ -576,36 +720,45 @@ blockquote {
 
 footer {
   position: relative;
-	background: #1c1c1c;
-  height: 65px;
-  font-weight: normal;
-  color: #ffffff;
+	background: #f3f3f3;
+  color: #b8b8b8;
+  margin-top: 20px;
+  padding-top: 22px;
+  border-top: 1px solid #c5c5c5;
 
   a:hover {
     color: #ddd;
   }
 }
 
+.copyright {
+  border-top: 1px solid #d9d9d9;
+  padding-top: 10px;
+  padding-bottom: 20px;
+}
+
 // ============== /FOOTER ============== //
 
 // ============== CATEGORY-POSTS ===========//
-.category-posts {
-  position: relative;
-  z-index: 10;
-  background: white;
-  padding-top: 20px;
-  min-height: 100px;
 
-  .category-post {
-    margin-bottom: 30px;
-    padding: 0 10px 30px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+.category-posts {
+  margin-top: 20px;
+
+  .tag {
+    display: none;
   }
 
-  .img-container {
-    height: $article-cover-img-height;
+  .date {
+    display: block;
+    position: static;
+    color: #d1d1d1;
+  }
+  
+  .excerpt {
+    margin-top: 10px;
   }
 }
+
 // ============= /CATEGORY-POSTS ===========//
 
 // ============== TEAM ============== //
diff --git a/images/fb-logo.svg b/images/fb-logo.svg
new file mode 100644
index 0000000..d06a1a3
--- /dev/null
+++ b/images/fb-logo.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="9px" height="19px" viewBox="0 0 9 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 41.1 (35376) - http://www.bohemiancoding.com/sketch -->
+    <title>7B296AC4-1149-4090-BBA4-E1F8D3190145</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.900000036">
+        <g id="Home---final" transform="translate(-1195.000000, -50.000000)" fill="#7B7B7B">
+            <g id="facebook" transform="translate(1195.000000, 50.000000)">
+                <path d="M5.9847592,19 L1.99410689,19 L1.99410689,9.49880081 L0,9.49880081 L0,6.22500631 L1.99410689,6.22500631 L1.99410689,4.25953042 C1.99410689,1.58892956 3.11948791,0 6.31883763,0 L8.98171103,0 L8.98171103,3.27499369 L7.31741516,3.27499369 C6.0719366,3.27499369 5.98963625,3.73248548 5.98963625,4.58631028 L5.98414956,6.22500631 L9,6.22500631 L8.64702296,9.49880081 L5.98414956,9.49880081 L5.98414956,19 L5.9847592,19 Z" id="Shape" opacity="0.6"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/images/logo-black.png b/images/logo-black.png
new file mode 100644
index 0000000..8838bc6
Binary files /dev/null and b/images/logo-black.png differ
diff --git a/images/youtube-play.svg b/images/youtube-play.svg
new file mode 100644
index 0000000..f72688e
--- /dev/null
+++ b/images/youtube-play.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="11px" viewBox="0 0 16 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 41.1 (35376) - http://www.bohemiancoding.com/sketch -->
+    <title>D5BAB643-0437-451A-9EBD-C075AAAD4F85</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.900000036">
+        <g id="Home---final" transform="translate(-1224.000000, -54.000000)" fill="#7B7B7B">
+            <g id="youtube-play" transform="translate(1224.000000, 54.000000)">
+                <path d="M16,8.30042703 L16,2.69957297 C16,2.69957297 16,0 13.2427093,0 L2.75634995,0 C2.75634995,0 0,0 0,2.69957297 L0,8.30042703 C0,8.30042703 0,11 2.75634995,11 L13.2427093,11 C13.2427093,11 16,11 16,8.30042703 M11.1063029,5.50782885 L5.86829727,8.51963493 L5.86829727,2.49510173 L11.1063029,5.50782885" id="Shape" opacity="0.6"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 31ce415..76ff508 100644
--- a/index.html
+++ b/index.html
@@ -4,105 +4,50 @@ title: "Watch Out!, IIT Roorkee"
 ---
 {% include header.html %}
 
-<div class="container content">
-  <section id="new-articles" class="row">
-
-  {% for cat in site.data.homepage_categories.new_articles %}
-    {% for post in site.categories[cat] %}
-      {% if post.image != null %}
-        <div class="article col-sm-3">
-          <a href="{{ post.url }}">
-            <div class="cover-container-container">
-              <div class="center-fill-container img-container">
-                <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}">
-              </div>
-            </div>
-            <div class="details text-center ">
-              <p class="tag">{{ post.category }}</p>
-              <h3 class="title">{{ post.title }}</h3>
-            </div>
-          </a>
-        </div>
-        {% break %}
-      {% endif %}
-    {% endfor %}
-  {% endfor %}
-  </section>
-</div>
-
-<div id="featured-articles-container" class=" container-fluid">
-  <div id="featured-articles" class=" container">
-    <div class="row">
+<div id="featured-articles-container" class="container">
+  <h1 class="container-title">Featured Articles</h1>
+  <div class="row">
+    <div id="featured-articles" class="col-md-8">
       {% for cat in site.data.homepage_categories.featured_articles %}
-        {% for post in site.categories[cat] %}
-          {% if post.image != null %}
-            <div class="article-container col-sm-4">
-              <div class="article {{post.category}}">
-
-                <a href="{{ post.url }}">
-                    <div class="center-fill-container article-cover-container">
-                      <img src="/images/posts/{{ post.image }}" class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}">
-                    </div>
-                  <div class="details text-center">
-                    <div class="tag">{{ post.category }}</div>
-                    <h3 class="title">{{ post.title }}</h3>
-                    <p class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify | truncate: 75 }}{% endif %}</p>
-                  </div>
-                </a>
-              </div>
-            </div>
-            {% break %}
-          {% endif %}
-        {% endfor %}
+      {% for post in site.categories[cat] %}
+      {% if post.image != null %}
+        {% include horizontal_post.html post=post %}
+      {% break %}
+      {% endif %}
       {% endfor %}
+      {% endfor %}
+    </div>
+    <div class="col-md-4">
+      <div class="fb-page" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="540" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/WatchOutNewsAgency/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/WatchOutNewsAgency/">Watch Out! News Agency</a></blockquote></div>
     </div>
   </div>
 </div>
 
-  <!-- Carousel
-    ================================================== -->
-    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
-      <!-- Indicators -->
-      <ol class="carousel-indicators">
-        {% for video in site.data.youtube %}
-          <li data-target="#myCarousel" data-slide-to="{{ forloop.index0 }}" class="{% if forloop.first %}active{% endif %}"></li>
-        {% endfor %}
-        <!--
-        <li data-target="#myCarousel" data-slide-to="0" class=""></li>
-        <li class="" data-target="#myCarousel" data-slide-to="1"></li>
-        <li class="" data-target="#myCarousel" data-slide-to="2"></li>
-        -->
-      </ol>
-      <div class="carousel-inner" role="listbox">
-        {% for video in site.data.youtube %}
-        <div class="item {% if forloop.first %}active{% endif %}">
-          <div class="cover-image center-vertical"><img class="center-both img-center-fill" src="http://img.youtube.com/vi/{{ video.id }}/hqdefault.jpg" alt=""></div>
-          <div class="container">
-            <div class="video-container center-both">
-              <div class="embed-responsive embed-responsive-16by9">
-                <iframe class="youtube-video" id="youtube-video-{{ video.id }}" data-id="{{ video.id }}" src="https://www.youtube.com/embed/{{ video.id }}?enablejsapi=1&showinfo=0" allowfullscreen></iframe>
-              </div>
-            </div>
-            <div class="carousel-caption" id="youtube-title-{{ video.id }}" data-id="{{ video.id }}">
-              <h1>{{ video.title }}</h1>
-            </div>
-          </div>
+<div id="yt-videos-container" class="container">
+  <h1 class="container-title">Videos</h1>
+  <div class="row">
+    <div class="col-md-8">
+      {% assign video = site.data.youtube.first %}
+      <div class="video-container">
+        <div class="embed-responsive embed-responsive-16by9">
+          <iframe class="youtube-video" id="youtube-video-{{ video.id }}" data-id="{{ video.id }}" src="https://www.youtube.com/embed/{{ video.id }}?enablejsapi=1&showinfo=0" allowfullscreen></iframe>
         </div>
-        {% endfor %}
       </div>
-      <a class="left carousel-control" href="#myCarousel" role="button"
-                                                          data-slide="prev">
-        <span class="glyphicon glyphicon-chevron-left"
-              aria-hidden="true"></span>
-        <span class="sr-only">Previous</span>
-      </a>
-      <a class="right carousel-control"
-         href="#myCarousel" role="button"
-                            data-slide="next">
-        <span class="glyphicon glyphicon-chevron-right"
-              aria-hidden="true"></span>
-        <span
-              class="sr-only">Next</span>
-      </a>
-      <script type="text/javascript" src="https://www.youtube.com/iframe_api" async></script>
-    </div><!-- /.carousel -->
+      <div class="video-caption" id="youtube-title-{{ video.id }}" data-id="{{ video.id }}">
+        <h2 class="caption">{{ video.title }}</h2>
+      </div>
+    </div> <!-- col-md-8 -->
+    <ul class="col-md-4 video-list">
+      {% for video in site.data.youtube offset: 1 limit: 4 %}
+        <li class="row list-video">
+          <a href="https://www.youtube.com/watch?v={{ video.id }}">
+            <div class="col-md-6 img-container">
+              <img class="center-both img-center-fill" src="http://img.youtube.com/vi/{{ video.id  }}/mqdefault.jpg">
+            </div>
+            <div class="col-md-6 caption"><span class="center-vertical">{{ video.title }}</span></div>
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </div> <!-- row -->
+</div>
diff --git a/js/application.js b/js/application.js
index a8faf3c..e3d7544 100644
--- a/js/application.js
+++ b/js/application.js
@@ -1,10 +1,20 @@
 // Your JavaScript
 $(function() {
-  $('.img-center-fill').load(function(){
+  function gradeImage(){
     var parent = $(this).parent();
     var imgClass = (this.width/this.height > parent.width()/parent.height()) ? 'wide' : 'tall';
     $(this).addClass(imgClass);
-  })
+    console.log(this);
+  }
+
+  $('.img-center-fill').each(function () {
+    if(this.complete) {
+      gradeImage.call(this);
+    }
+    else {
+      this.addEventListener('load', gradeImage);
+    }
+  });
 
   /*
   var switchPos = $('#new-articles').position().top + $('#new-articles').height();