diff --git a/src/blog/templates/blog/author_index_page.html b/src/blog/templates/blog/author_index_page.html
index 0313df0..58fd910 100644
--- a/src/blog/templates/blog/author_index_page.html
+++ b/src/blog/templates/blog/author_index_page.html
@@ -3,7 +3,7 @@
 
 {% block content %}
 <div class="bg-green-700 py-8 flex-grow">
-    <div class="max-w-3xl md:max-w-5xl mx-auto p-4">
+    <div class="max-w-3xl md:max-w-5xl lg:max-w-7xl xl:max-w-[1800px] 2xl:max-w-full mx-auto p-4">
         <div class="bg-white rounded-xl overflow-hidden drop-shadow">
             <div class="p-8">
                 <h1 class="text-4xl font-bold mb-4 text-black">{{ page.title }}</h1>
diff --git a/src/blog/templates/blog/author_page.html b/src/blog/templates/blog/author_page.html
index d37565b..b815978 100644
--- a/src/blog/templates/blog/author_page.html
+++ b/src/blog/templates/blog/author_page.html
@@ -3,9 +3,13 @@
 
 {% block content %}
 <div class="bg-green-700 py-8 flex-grow">
-    <div class="flex flex-col gap-4 max-w-3xl md:max-w-5xl mx-auto p-4 bg-white rounded-xl overflow-hidden drop-shadow">
-        <h1 class="text-4xl font-bold text-black">{{ page.title }}</h1>
-        
+    <div class="flex flex-col gap-4 max-w-3xl md:max-w-5xl lg:max-w-7xl xl:max-w-[1500px] mx-auto p-4 bg-white rounded-xl overflow-hidden drop-shadow">
+        <div class="flex flex-row justify-between items-center">
+            <h1 class="text-4xl font-bold text-black">{{ page.title }}</h1>
+            {% include "blog/includes/subscribe-author.html" with author=page.user user=user class="h-10 w-10" %}
+        </div>
+
+
         <div class="flex flex-row gap-4 items-center">
             <div>
                 {% user_avatar page.user %}
diff --git a/src/blog/templates/blog/blog_index_page.html b/src/blog/templates/blog/blog_index_page.html
index 4e730a8..cf75f68 100644
--- a/src/blog/templates/blog/blog_index_page.html
+++ b/src/blog/templates/blog/blog_index_page.html
@@ -4,7 +4,7 @@
 {% block content %}
 {% include "blog/includes/timeline.html" with grouped_blog_posts=grouped_blog_posts itinerary=itinerary %}
 
-<div class="bg-green-700 py-8 flex-grow">
+<div class="bg-green-700 py-8 px-4 flex-grow">
     {% include "blog/includes/filter-bar.html" %}
     {% include "blog/includes/blogpost-grid.html" with blogposts=blogpages only %}
     <div class="container mx-auto mt-8">
diff --git a/src/blog/templates/blog/blog_page.html b/src/blog/templates/blog/blog_page.html
index 1319db9..a48d705 100644
--- a/src/blog/templates/blog/blog_page.html
+++ b/src/blog/templates/blog/blog_page.html
@@ -14,36 +14,52 @@
                 {% else %}
                     <div class="h-full w-full bg-gray-300"></div>
                 {% endif %}
-                <div class="h-full absolute top-0 p-4 w-full flex flex-col justify-end bg-gradient-to-t to-transparent from-yellow-500">
-                    <div class="flex items-end justify-between gap-4">
+                <div class="absolute top-0 right-0 flex flex-row z-10 items-center p-2 gap-2">
+                    <div id="like-section" class="flex items-center">
+                        <button 
+                            id="like-button" 
+                            data-post-id="{{ page.id }}" 
+                            class="flex items-center space-x-2 px-2 py-1 rounded-full transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600
+                            {% if user in page.likes.all %}
+                                bg-blue-600 text-white hover:bg-blue-700
+                            {% else %}
+                                bg-white text-gray-700 hover:bg-gray-300
+                            {% endif %}
+                        ">
+                            <div class="text-xl rounded-full -ml-1">😻</div>
+                            <div id="like-count" class="font-bold block mt-0.5">{{ page.like_count }}</div>
+                        </button>
+                    </div>
+                    {% include "blog/includes/subscribe-author.html" with author=page.author user=user class="h-10 w-10" %}
+                </div>
+                <div class="h-full absolute top-0 p-4 w-full flex flex-col justify-end gap-2 bg-gradient-to-t to-transparent from-yellow-500">
+
+                    <div class="flex justify-between gap-4">
                         <div class="flex-col flex-1">
-                            <h1 class="header-text-color flex-wrap font-bold text-xl md:text-4xl mb-0 line-clamp-3">{{ page.title }}</h1>
-                            <div class="text-sm italic">{{ page.specific.date | date:"d-m-Y H:i" }}</div>
-                            <div id="like-section" class="flex items-center space-x-2 pr-2 mt-2">
-                                <button id="like-button" data-post-id="{{ page.id }}" class="flex items-center space-x-2 px-2 py-1 rounded-full transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
-                                    {% if user in page.likes.all %}
-                                        bg-red-500 text-white hover:bg-red-600
-                                    {% else %}
-                                        bg-white text-gray-700 hover:bg-gray-300
-                                    {% endif %}
-                                ">
-                                    <div class="text-xl rounded-full -ml-1 bg-white">😻</div>
-                                    <div id="like-count" class="font-bold block mt-0.5">{{ page.like_count }}</div>
-                                </button>
+                            <h1 class="header-text-color flex-wrap font-bold text-xl md:text-4xl line-clamp-3">{{ page.title }}</h1>
+                            <div class="flex justify-between items-center">
+                                <div class="flex flex-col">
+                                    <div class="text-sm italic">{{ page.specific.date | date:"d-m-Y H:i" }}</div>
+                                    <div class="text-sm">
+                                        {% for location in page.location.all %}
+                                        📍{{location.name}}
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                                {% if page.author.author_page %}
+                                    <a href="{{ page.author.author_page.url }}" class="flex flex-row items-center gap-2 hover:underline">
+                                        <p class="text-sm italic hidden sm:block">{% post_user_display_name page %}</p>
+                                        {% post_user_avatar page 'w-10 h-10 rounded-full object-cover sm:w-12 sm:h-12' %}
+                                    </a>
+                                {% else %}
+                                    <div class="flex flex-row items-center gap-4">
+                                        <p class="hidden sm:flex text-sm italic">{% post_user_display_name page %}</p>
+                                        {% post_user_avatar page %}
+                                    </div>
+                                {% endif %}
                             </div>
                         </div>
-                        {% if page.author.author_page %}
-                            <a href="{{ page.author.author_page.url }}" class="flex flex-row items-center gap-2 hover:underline">
-                                <p class="text-sm italic hidden sm:block">{% post_user_display_name page %}</p>
-                                {% post_user_avatar page 'w-10 h-10 rounded-full object-cover sm:w-16 sm:h-16' %}
-                            </a>
-                        {% else %}
-                            <div class="flex flex-row items-center gap-4">
-                                <p class="hidden sm:flex text-sm italic">{% post_user_display_name page %}</p>
-                                {% post_user_avatar page %}
-                            </div>
-                        {% endif %}
-                        {% include "blog/includes/subscribe-author.html" with author=page.author user=user %}
+
                     </div>
                     {% if page.hero_text %}
                         <div class="flex ml-auto items-center gap-4">
@@ -121,9 +137,9 @@ <h1 class="header-text-color flex-wrap font-bold text-xl md:text-4xl mb-0 line-c
             likeCount.textContent = data.like_count;
             if (data.liked) {
                     likeButton.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-300');
-                    likeButton.classList.add('bg-red-500', 'text-white', 'hover:bg-red-600');
+                    likeButton.classList.add('bg-blue-600', 'text-white', 'hover:bg-blue-700');
                 } else {
-                    likeButton.classList.remove('bg-red-500', 'text-white', 'hover:bg-red-600');
+                    likeButton.classList.remove('bg-blue-600', 'text-white', 'hover:bg-blue-700');
                     likeButton.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-300');
                 }
         });
diff --git a/src/blog/templates/blog/includes/blogpost-grid.html b/src/blog/templates/blog/includes/blogpost-grid.html
index cf09dd7..0897e07 100644
--- a/src/blog/templates/blog/includes/blogpost-grid.html
+++ b/src/blog/templates/blog/includes/blogpost-grid.html
@@ -1,6 +1,6 @@
 {% load i18n static wagtailcore_tags wagtailimages_tags custom_image_tags user_tags %}
 
-<div class="max-w-3xl md:max-w-5xl w-full mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-4" id="grid">
+<div class="max-w-3xl md:max-w-5xl lg:max-w-7xl xl:max-w-[1800px] 2xl:max-w-full w-full mx-auto grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4" id="grid">
     {% for post in blogposts %}
         <a 
             href="{% pageurl post %}"
@@ -16,26 +16,35 @@
                 {% else %}
                     <div class="h-80 bg-gray-300"></div>
                 {% endif %}
+                <div class="absolute top-0 right-0 p-2">
+                    <div class="flex items-center ml-auto bg-yellow-500 bg-opacity-60 rounded-full px-1">
+                        <span class="text-xl">😻</span>
+                        <span class="pr-1 mt-0.5">{{ post.specific.like_count }}</span>
+                        <span class="text-xl">💬</span>
+                        <span class="pr-1">{{ post.specific.comments.count }}</span>
+                    </div>
+                </div>
                 <div class="h-full absolute top-0 p-4 w-full flex flex-col justify-end bg-gradient-to-t to-transparent from-yellow-500">
                     <h2 class="header-text-color font-bold text-4xl group-hover:underline hover:underline decoration-wavy mb-2 pb-2.5 line-clamp-2">{{ post.title }} </h2>
                     <div class="flex flex-col justify-between gap-2 text-sm">
-                        <div class="flex flex-row items-center flex-wrap gap-2">
+                        <div class="flex flex-row items-center gap-2">
                             {% post_user_avatar post 'w-8 h-8 rounded-full object-cover' %}
-                            {{ post.specific.date | date:"d-m-Y H:i" }}
-                            <div class="flex items-center space-x-1 ml-auto bg-white rounded-full px-1">
-                                <span class="text-xl">😻</span>
-                                <span class="font-bold pr-1 mt-0.5">{{ post.specific.like_count }}</span>
-                                <span class="text-xl">💬</span>
-                                <span class="font-bold pr-1">{{ post.specific.comments.count }}</span>
+                            <div class="flex flex-row justify-between w-full">
+                                <div>
+                                    {{ post.specific.date | date:"d-m-Y H:i" }}
+                                </div>
+                                <div>
+                                    {% for location in post.location.all %}
+                                    📍{{location.name}}
+                                    {% endfor %}
+                                </div>
                             </div>
                         </div>
-                        <div>
-                            {% if post.specific.intro %}
-                                <div class="line-clamp-2">{{ post.specific.intro }}</div>
-                            {% else %}
-                                {{ post.specific.body|richtext|slice:":500" }}
-                            {% endif %}
-                        </div>
+                        {% if post.specific.intro %}
+                            <div class="line-clamp-2">{{ post.specific.intro }}</div>
+                        {% else %}
+                            {{ post.specific.body|richtext|slice:":500" }}
+                        {% endif %}
                     </div>
                 </div>
             </div>
diff --git a/src/blog/templates/blog/includes/filter-bar.html b/src/blog/templates/blog/includes/filter-bar.html
index 742bc19..6fc981e 100644
--- a/src/blog/templates/blog/includes/filter-bar.html
+++ b/src/blog/templates/blog/includes/filter-bar.html
@@ -1,6 +1,6 @@
 {% load wagtailcore_tags wagtailimages_tags user_tags %}
 
-<div class="max-w-3xl md:max-w-5xl mx-auto drop-shadow-lg">
+<div class="max-w-3xl md:max-w-5xl lg:max-w-7xl xl:max-w-[1800px] 2xl:max-w-full mx-auto drop-shadow-lg">
 
     <div class="transition p-4 rounded-lg relative min-h-16">
     
diff --git a/src/blog/templates/blog/includes/subscribe-author.html b/src/blog/templates/blog/includes/subscribe-author.html
index 4bcfc31..57ce2ec 100644
--- a/src/blog/templates/blog/includes/subscribe-author.html
+++ b/src/blog/templates/blog/includes/subscribe-author.html
@@ -1,6 +1,15 @@
 <!-- Add this to your author_page.html template -->
 {% if user.is_authenticated %}
-    <button id="subscribeButton" data-author-id="{{ author.id }}" title="{% if user in author.subscribers.all %}Unsubscribe{% else %}Subscribe{% endif %}" class="focus:outline-none bg-green-600 hover:bg-green-700 text-white block flex-0 w-10 h-10 sm:w-16 sm:h-16 rounded-full">
+    <button 
+        id="subscribeButton" 
+        data-author-id="{{ author.id }}" 
+        title="{% if user in author.subscribers.all %}Unsubscribe{% else %}Subscribe{% endif %}"
+        class="
+        {% if class %}
+            {{class}} bg-green-600 hover:bg-green-700 text-white rounded-full
+        {% else %}
+            focus:outline-none bg-green-600 hover:bg-green-700 text-white block flex-0 w-10 h-10 sm:w-16 sm:h-16 rounded-full
+        {% endif %}">
         {% if user in author.subscribers.all %}
             🔕
         {% else %}
diff --git a/src/brazil_blog/static/css/brazil_blog_compiled.css b/src/brazil_blog/static/css/brazil_blog_compiled.css
index 2764242..7648ebc 100644
--- a/src/brazil_blog/static/css/brazil_blog_compiled.css
+++ b/src/brazil_blog/static/css/brazil_blog_compiled.css
@@ -1471,6 +1471,10 @@ select {
   z-index: 30;
 }
 
+.col-auto {
+  grid-column: auto;
+}
+
 .float-left {
   float: left;
 }
@@ -1566,6 +1570,13 @@ select {
   -webkit-line-clamp: 3;
 }
 
+.line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
 .block {
   display: block;
 }
@@ -1751,6 +1762,10 @@ select {
   max-width: 20rem;
 }
 
+.max-w-5xl {
+  max-width: 64rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1824,6 +1839,10 @@ select {
   list-style-type: none;
 }
 
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -2075,11 +2094,6 @@ select {
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
 
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
 .bg-red-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -2115,6 +2129,14 @@ select {
   background-color: rgb(202 138 4 / var(--tw-bg-opacity));
 }
 
+.bg-opacity-80 {
+  --tw-bg-opacity: 0.8;
+}
+
+.bg-opacity-60 {
+  --tw-bg-opacity: 0.6;
+}
+
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
@@ -2246,10 +2268,6 @@ select {
   padding-right: 0.25rem;
 }
 
-.pr-2 {
-  padding-right: 0.5rem;
-}
-
 .pt-16 {
   padding-top: 4rem;
 }
@@ -2417,6 +2435,14 @@ select {
   opacity: 0.5;
 }
 
+.opacity-80 {
+  opacity: 0.8;
+}
+
+.opacity-20 {
+  opacity: 0.2;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2571,11 +2597,6 @@ select {
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-red-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-slate-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity));
@@ -2661,6 +2682,11 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-blue-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-indigo-200:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
@@ -2671,11 +2697,6 @@ select {
   --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-red-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-opacity-50:focus {
   --tw-ring-opacity: 0.5;
 }
@@ -2714,10 +2735,26 @@ select {
     height: 4rem;
   }
 
+  .sm\:h-12 {
+    height: 3rem;
+  }
+
+  .sm\:h-14 {
+    height: 3.5rem;
+  }
+
   .sm\:w-16 {
     width: 4rem;
   }
 
+  .sm\:w-12 {
+    width: 3rem;
+  }
+
+  .sm\:w-14 {
+    width: 3.5rem;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -2765,6 +2802,11 @@ select {
     padding: 3rem;
   }
 
+  .md\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
   .md\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
@@ -2787,6 +2829,14 @@ select {
 }
 
 @media (min-width: 1024px) {
+  .lg\:max-w-6xl {
+    max-width: 72rem;
+  }
+
+  .lg\:max-w-7xl {
+    max-width: 80rem;
+  }
+
   .lg\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -2794,4 +2844,53 @@ select {
   .lg\:p-24 {
     padding: 6rem;
   }
+
+  .lg\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:max-w-full {
+    max-width: 100%;
+  }
+
+  .xl\:max-w-7xl {
+    max-width: 80rem;
+  }
+
+  .xl\:max-w-\[1600px\] {
+    max-width: 1600px;
+  }
+
+  .xl\:max-w-\[1500px\] {
+    max-width: 1500px;
+  }
+
+  .xl\:max-w-\[1800px\] {
+    max-width: 1800px;
+  }
+
+  .xl\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .xl\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1536px) {
+  .\32xl\:max-w-full {
+    max-width: 100%;
+  }
+
+  .\32xl\:max-w-\[full\] {
+    max-width: full;
+  }
+
+  .\32xl\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
 }
\ No newline at end of file
diff --git a/src/brazil_blog/templates/includes/footer.html b/src/brazil_blog/templates/includes/footer.html
index eb26335..a200ff6 100644
--- a/src/brazil_blog/templates/includes/footer.html
+++ b/src/brazil_blog/templates/includes/footer.html
@@ -1,7 +1,7 @@
 {% load cache %}
 {% cache 500 footer %}
 <footer class="bg-blue-800 text-white">
-    <div class="max-w-3xl md:max-w-5xl px-4 py-4 mx-auto">
+    <div class="max-w-3xl md:max-w-5xl lg:max-w-7xl xl:max-w-[1800px] 2xl:max-w-full px-4 py-4 mx-auto">
         <p>Built with Wagtail</p>
     </div>
 </footer>
diff --git a/src/brazil_blog/templates/includes/header.html b/src/brazil_blog/templates/includes/header.html
index 4ef7de8..a5fa13b 100644
--- a/src/brazil_blog/templates/includes/header.html
+++ b/src/brazil_blog/templates/includes/header.html
@@ -4,7 +4,7 @@
 {% get_site_root as site_root %}
 {% with site_name=settings.base.NavigationSettings.site_name site_logo=settings.base.NavigationSettings.site_logo %}
 <header class="bg-yellow-500 font-bold">
-    <div class="max-w-3xl md:max-w-5xl px-4 py-4 mx-auto flex flex-row justify-between items-center gap-3">
+    <div class="max-w-3xl md:max-w-5xl lg:max-w-7xl xl:max-w-[1800px] 2xl:max-w-full px-4 py-4 mx-auto flex flex-row justify-between items-center gap-3">
         {% cache 500 static_header %}
         <div class="flex items-center gap-3">
             <a href="{% pageurl site_root %}" class="inline-block">
diff --git a/src/home/templates/home/home_page.html b/src/home/templates/home/home_page.html
index d72250e..45e2605 100644
--- a/src/home/templates/home/home_page.html
+++ b/src/home/templates/home/home_page.html
@@ -14,7 +14,7 @@
 {% block content %}
 
 <div class="bg-green-700 py-8 flex-grow">
-    <div class="max-w-3xl md:max-w-5xl mx-auto p-4">
+    <div class="max-w-3xl md:max-w-5xl lg:max-w-7xl xl:max-w-[1800px] 2xl:max-w-full mx-auto p-4">
         <div class="bg-white rounded-xl overflow-hidden drop-shadow">
             <div class="relative aspect-w-16 aspect-h-4">
             {% if page.image %}
diff --git a/src/locations/templates/itinerary_overview.html b/src/locations/templates/itinerary_overview.html
index 22195a6..8312e87 100644
--- a/src/locations/templates/itinerary_overview.html
+++ b/src/locations/templates/itinerary_overview.html
@@ -3,7 +3,7 @@
 
 {% block content %}
 <div class="bg-green-700 py-8">
-    <div class="max-w-3xl md:max-w-5xl mx-auto p-4 bg-white rounded-xl overflow-hidden drop-shadow-lg">
+    <div class="max-w-3xl md:max-w-5xl lg:max-w-7xl xl:max-w-[1800px] 2xl:max-w-full mx-auto p-4 bg-white rounded-xl overflow-hidden drop-shadow-lg">
         <h1 class="text-3xl font-bold mb-4 text-slate-900">{{ itinerary.name }}</h1>
         <p class="text-gray-600 mb-6">{{ itinerary.description }}</p>