diff --git a/app/javascript/controllers/forecasts_controller.js b/app/javascript/controllers/forecasts_controller.js
deleted file mode 100644
index 43f6d95..0000000
--- a/app/javascript/controllers/forecasts_controller.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-// Connects to data-controller="forecasts"
-export default class extends Controller {
-  connect() {
-    console.log("connected Stimulus!")
-  }
-}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index 7e792bd..608283b 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -4,6 +4,5 @@
 
 import { application } from "./application"
 
-import ForecastsController from "./forecasts_controller"
-application.register("forecasts", ForecastsController)
-
+import TabController from "./tab_controller"
+application.register("tab", TabController)
diff --git a/app/javascript/controllers/tab_controller.js b/app/javascript/controllers/tab_controller.js
new file mode 100644
index 0000000..53c875a
--- /dev/null
+++ b/app/javascript/controllers/tab_controller.js
@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="tab"
+export default class extends Controller {
+  static classes = [ "active" ]
+  static targets = [ "day" ]
+
+  connect() {
+  }
+
+  switch_tab() {
+    this.makeAllTabsInactive()
+    this.dayTarget.classList.toggle(this.activeClass)
+  }
+
+  makeAllTabsInactive() {
+    document.querySelectorAll('.tabs .tab').forEach(
+      (el) => el.classList.remove(this.activeClass)
+    )
+  }
+}
diff --git a/app/views/styled_forecasts/_day_tab.html.erb b/app/views/styled_forecasts/_day_tab.html.erb
index d98d7e6..3fdf66f 100644
--- a/app/views/styled_forecasts/_day_tab.html.erb
+++ b/app/views/styled_forecasts/_day_tab.html.erb
@@ -1,19 +1,31 @@
-<div class="tab py-4 flex-1 <%= day %> mx-2 px-1 text-center daqi-low border-b-0 border-l-2 border-r-2 border-t-2 border-gray-300" data-date="<%= forecast.date %>" >
-  <%= link_to update_styled_forecast_path(day: day), data: { turbo_frame: "day_predictions" } do %>
-    <div class="day">
-      <%= forecast.date == Date.today ? 'Today' : forecast.date.strftime('%A') %>
-    </div>
-    <div class="date">
-      <%= forecast.date.strftime("%d %B") %>
-    </div>
-    <div class="daqi-marker text-4xl py-2 text-green-600">
-      ●
-    </div>
-    <div class="daqi-label text-base">
-      <%= forecast.air_pollution.label.capitalize %>
-    </div>
-    <div class="daqi-value font-normal">
-      Index <%= forecast.air_pollution.value %>/10
-    </div>
-  <% end %>
-</div>
+<%= tag.div class: "tab py-4 flex-1 #{day} mx-2 px-1 text-center daqi-low border-b-0 border-l-2 border-r-2 border-t-2 border-gray-300 #{day == :today ? "active" : ''}",
+  data: {
+    date: forecast.date.to_s,
+    controller: "tab",
+    "tab-active-class": "active",
+    "tab-target": "day"
+  } do
+  %>
+<%=
+      link_to update_styled_forecast_path(day: day),
+      data: {
+        turbo_frame: "day_predictions",
+        action: "click->tab#switch_tab"
+    } do %>
+  <div class="day">
+    <%= forecast.date == Date.today ? 'Today' : forecast.date.strftime('%A') %>
+  </div>
+  <div class="date">
+    <%= forecast.date.strftime("%d %B") %>
+  </div>
+  <div class="daqi-marker text-4xl py-2 text-green-600">
+    ●
+  </div>
+  <div class="daqi-label text-base">
+    <%= forecast.air_pollution.label.capitalize %>
+  </div>
+  <div class="daqi-value font-normal">
+    Index <%= forecast.air_pollution.value %>/10
+  </div>
+<% end %>
+<% end %>
diff --git a/app/views/styled_forecasts/_forecast_tabs.html.erb b/app/views/styled_forecasts/_forecast_tabs.html.erb
index fa2f0b3..2475341 100644
--- a/app/views/styled_forecasts/_forecast_tabs.html.erb
+++ b/app/views/styled_forecasts/_forecast_tabs.html.erb
@@ -2,7 +2,10 @@
   <header class="text-xl px-4 font-bold">
     Air pollution
   </header>
-  <div class="tabs flex flex-row items-stretch mt-4 m-1 text-xs font-bold" data-turbo-prefetch="false">
+  <div
+    class="tabs flex flex-row items-stretch mt-4 m-1 text-xs font-bold"
+    data-turbo-prefetch="false"
+    >
     <%= render "day_tab", forecast: @forecasts.first, day: :today %>
     <%= render "day_tab", forecast: @forecasts.second, day: :tomorrow %>
     <%= render "day_tab", forecast: @forecasts.third, day: :day_after_tomorrow %>
diff --git a/app/views/styled_forecasts/show.html.erb b/app/views/styled_forecasts/show.html.erb
index 62cff03..ed464f4 100644
--- a/app/views/styled_forecasts/show.html.erb
+++ b/app/views/styled_forecasts/show.html.erb
@@ -1,8 +1,6 @@
-<div data-controller="forecasts">
-  <%= render partial: "styled_forecasts/location" %>
-  <%= render partial: "styled_forecasts/forecast_tabs", forecasts: @forecasts %>
-  <%= render partial: "styled_forecasts/predictions", locals: { forecast: @forecasts.first } %>
-  <%= render partial: "sharing" %>
-  <%= render partial: "learning" %>
-  <%= render partial: "subscribe" %>
-</div>
+<%= render partial: "styled_forecasts/location" %>
+<%= render partial: "styled_forecasts/forecast_tabs", forecasts: @forecasts %>
+<%= render partial: "styled_forecasts/predictions", locals: { forecast: @forecasts.first } %>
+<%= render partial: "sharing" %>
+<%= render partial: "learning" %>
+<%= render partial: "subscribe" %>
diff --git a/spec/feature_steps/forecast_steps.rb b/spec/feature_steps/forecast_steps.rb
index ee7017d..317a32e 100644
--- a/spec/feature_steps/forecast_steps.rb
+++ b/spec/feature_steps/forecast_steps.rb
@@ -111,6 +111,27 @@ def and_i_see_predicted_uv_level_v2
     expect_prediction_v2(category: "ultraviolet-rays-uv", value: "Low")
   end
 
+  def then_i_see_that_the_tomorrow_tab_is_active
+    expect(page).to have_css(".tab.tomorrow.active")
+
+    expect(page).not_to have_css(".tab.today.active")
+    expect(page).not_to have_css(".tab.day_after_tomorrow.active")
+  end
+
+  def and_i_see_that_the_today_tab_is_active
+    expect(page).to have_css(".tab.today.active")
+
+    expect(page).not_to have_css(".tab.tomorrow.active")
+    expect(page).not_to have_css(".tab.day_after_tomorrow.active")
+  end
+
+  def then_i_see_that_the_day_after_tomorrow_tab_is_active
+    expect(page).to have_css(".tab.day_after_tomorrow.active")
+
+    expect(page).not_to have_css(".tab.today.active")
+    expect(page).not_to have_css(".tab.tomorrow.active")
+  end
+
   def and_i_see_predicted_uv_level_for_tomorrow
     expect_styled_prediction(category: :"ultraviolet-rays-uv", level: :moderate)
   end
diff --git a/spec/features/visitors/view_styled_forecasts_spec.rb b/spec/features/visitors/view_styled_forecasts_spec.rb
index 403fdeb..f367c56 100644
--- a/spec/features/visitors/view_styled_forecasts_spec.rb
+++ b/spec/features/visitors/view_styled_forecasts_spec.rb
@@ -24,6 +24,8 @@
     visit root_path
     when_i_select_view_forecasts_v2
     then_i_see_the_forecasts_page_v2
+
+    and_i_see_that_the_today_tab_is_active
     and_i_see_predicted_air_pollution_status_for_each_day_v2
     and_i_see_predicted_uv_level_v2
     and_i_see_predicted_pollen_level_v2
@@ -40,7 +42,7 @@
     when_i_select_view_forecasts_v2
     and_i_switch_to_the_tab_for_tomorrow
 
-    # then I see that the _tomorrow_ tab is active
+    then_i_see_that_the_tomorrow_tab_is_active
     and_i_see_predicted_uv_level_for_tomorrow
     and_i_see_predicted_pollen_level_for_tomorrow
     and_i_see_predicted_temperature_level_for_tomorrow
@@ -56,7 +58,7 @@
     when_i_select_view_forecasts_v2
     and_i_switch_to_the_tab_for_day_after_tomorrow
 
-    # then I see that the _day_after_tomorrow_ tab is active
+    then_i_see_that_the_day_after_tomorrow_tab_is_active
     and_i_see_predicted_uv_level_for_day_after_tomorrow
     and_i_see_predicted_pollen_level_for_day_after_tomorrow
     and_i_see_predicted_temperature_level_for_day_after_tomorrow