diff --git a/app/views/cities/show.html.erb b/app/views/cities/show.html.erb
index 2c89538..1c4f40e 100644
--- a/app/views/cities/show.html.erb
+++ b/app/views/cities/show.html.erb
@@ -30,12 +30,32 @@
           </h1>
 
           <div class="flex flex-wrap justify-center items-center gap-3">
-            <div class="badge badge-lg badge-primary gap-2">
-              <%= "#{@city&.country&.emoji + " " || ""}#{@city&.country&.name}" %>
-            </div>
-            <div class="badge badge-lg badge-secondary gap-2">
-              <%= @city&.state&.name %>
-            </div>
+            <!-- Country budge -->
+            <% if @city.country.present? && @city.country.region.present? %>
+              <%= link_to cities_path(country: @city.country, region: @city.country.region), class: "badge badge-lg badge-primary hover:badge-outline transition-all duration-200" do %>
+                <%= "#{@city.country.emoji + " " || ""}#{@city.country.localized_name}" %>
+              <% end %>
+            <% else %>
+              <div class="badge badge-lg badge-primary">
+                <%= "#{@city&.country&.emoji + " " || ""}#{@city&.country&.localized_name}" %>
+              </div>
+            <% end %>
+            <!-- State budge -->
+            <% if @city.country.present? && @city.state.present? && @city.country.region.present? %>
+              <%= link_to cities_path(country: @city.country, state: @city.state, region: @city.country.region), class: "badge badge-lg badge-secondary hover:badge-outline transition-all duration-200" do %>
+                <%= @city.state.name %>
+              <% end %>
+            <% else %>
+              <div class="badge badge-lg badge-secondary">
+                <%= @city&.state&.name %>
+              </div>
+            <% end %>
+<!--            <div class="badge badge-lg badge-primary gap-2">-->
+              <%#= "#{@city&.country&.emoji + " " || ""}#{@city&.country&.name}" %>
+<!--            </div>-->
+<!--            <div class="badge badge-lg badge-secondary gap-2">-->
+              <%#= @city&.state&.name %>
+<!--            </div>-->
             <%= render "shared/wiki_data_badge", city: @city %>
           </div>
 
diff --git a/app/views/weather_arts/show.html.erb b/app/views/weather_arts/show.html.erb
index 0e67b58..8644bd7 100644
--- a/app/views/weather_arts/show.html.erb
+++ b/app/views/weather_arts/show.html.erb
@@ -22,12 +22,26 @@
       </h1>
 
       <div class="flex flex-wrap gap-4 mb-6">
-        <div class="badge badge-lg badge-primary">
-          <%= "#{@weather_art&.city&.country&.emoji + " " || ""}#{@city&.country&.localized_name}" %>
-        </div>
-        <div class="badge badge-lg badge-secondary">
-          <%= @weather_art&.city&.state&.name %>
-        </div>
+        <!-- Country budge -->
+        <% if @weather_art.city.country.present? && @weather_art.city.country.region.present? %>
+          <%= link_to cities_path(country: @weather_art.city.country, region: @weather_art.city.country.region), class: "badge badge-lg badge-primary hover:badge-outline transition-all duration-200" do %>
+            <%= "#{@weather_art.city.country.emoji + " " || ""}#{@weather_art.city.country.localized_name}" %>
+          <% end %>
+        <% else %>
+          <div class="badge badge-lg badge-primary">
+            <%= "#{@weather_art&.city&.country&.emoji + " " || ""}#{@city&.country&.localized_name}" %>
+          </div>
+        <% end %>
+        <!-- State budge -->
+        <% if @weather_art.city.country.present? && @weather_art.city.state.present? && @weather_art.city.country.region.present? %>
+          <%= link_to cities_path(country: @weather_art.city.country, state: @weather_art.city.state, region: @weather_art.city.country.region), class: "badge badge-lg badge-secondary hover:badge-outline transition-all duration-200" do %>
+            <%= @weather_art.city.state.name %>
+          <% end %>
+        <% else %>
+          <div class="badge badge-lg badge-secondary">
+            <%= @weather_art&.city&.state&.name %>
+          </div>
+        <% end %>
         <%= render "shared/wiki_data_badge", city: @weather_art&.city %>
         <div class="badge badge-lg badge-ghost">
           <%= @weather_art.formatted_time(:date) %>