diff --git a/assets/css/styles.css b/assets/css/styles.css
index 11b8dd1..50a1a0a 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -44,6 +44,31 @@ header {
 #post .kg-card {
   @apply px-4 py-4 flex flex-col items-center object-contain my-4;
 }
+#post .kg-card .kg-image {
+  @apply w-full;
+}
+#post .kg-width-wide .kg-image {
+  min-width: 100vw;
+}
+@screen md {
+  #post .kg-width-wide .kg-image {
+    min-width: 125%;
+  }
+}
+@screen lg {
+  #post .kg-width-wide .kg-image {
+    min-width: 175%;
+  }
+}
+@screen xl {
+  #post .kg-width-wide .kg-image {
+    min-width: 140%;
+  }
+}
+
+#post .kg-width-full .kg-image {
+  min-width: 100vw;
+}
 #post .kg-card figcaption {
   @apply text-sm text-gray-800 mt-2;
 }
diff --git a/page.hbs b/page.hbs
index ffeab55..996423f 100644
--- a/page.hbs
+++ b/page.hbs
@@ -1,12 +1,8 @@
 {{!< default}}
-<div>
-{{> "site-header"}}
-</div>
 
 {{#post}}
 <article>
-
-<div class="h-64 relative group">
+<div class="relative group index-header">
   {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
     <div class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
     </div>
@@ -15,20 +11,20 @@
     {{#if primary_tag}}
     {{#primary_tag}}
     <div>
-      <a href="{{url}}"><p class="bg-green-500 w-auto inline-block px-2 py-1 text-white text-sm">{{name}}</p></a>
+      <a href="{{url}}"><p class="bg-green-700 w-auto inline-block px-2 py-1 text-white text-sm">{{name}}</p></a>
     </div>
     {{/primary_tag}}
     {{/if}}
-    <div>
+    <div class="mb-4">
       <h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
     </div>
-    <div class="mb-4">
-      <p><span class="text-white text-sm"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span></p>
-    </div>
+  </div>
+  <div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
+  {{> "site-header"}}
   </div>
 </div>
 
-<main class="container px-6 my-6 content" id="post">
+<main class="container px-2 md:px-24 lg:px-64 xl:px-64 my-6 mx-auto content" id="post">
     <div>
       {{content}}
     </div>
@@ -38,10 +34,11 @@
 
 {{#contentFor "scripts"}}
 <script>
-    $(function() {
+$(document).ready(function () {
+        // FitVids - start
         var $postContent = $("#post");
         $postContent.fitVids();
-    });
+        // FitVids - end
+});
 </script>
 {{/contentFor}}
-
diff --git a/post.hbs b/post.hbs
index 9f2b78c..90ee8ac 100644
--- a/post.hbs
+++ b/post.hbs
@@ -43,12 +43,12 @@
   </div>
 </div>
 
-<main class="container md:w-4/5 lg:w-4/6 md:mx-auto px-6 my-6 content" id="post">
+<main class="container px-2 md:px-24 lg:px-64 xl:px-64 my-6 mx-auto content" id="post">
     <div>
       {{content}}
     </div>
 </main>
-<div class="container md:w-4/5 lg:w-4/6 md:mx-auto px-6 my-6">
+<div class="container px-24 my-6">
     <div class="my-4" id="comments">
     </div>
     <div class="my-4 flex flex-row justify-between">