diff --git a/app/components/day_tab_component.html.erb b/app/components/day_tab_component.html.erb
index a3121624..4512e15f 100644
--- a/app/components/day_tab_component.html.erb
+++ b/app/components/day_tab_component.html.erb
@@ -4,14 +4,14 @@
     controller: "tab",
     "tab-active-class": "active",
     "tab-inactive-class": "inactive",
-    "tab-target": "day"
+    "tab-target": "dayPrediction"
   } do
   %>
 <%= link_to update_styled_forecast_path(day: @day, format: :turbo_stream),
       data: {
         action: "click->tab#switch_tab"
     } do %>
-  <div class="day">
+  <div class="day" data-tab-target="day">
     <%= @forecast.date == Date.today ? 'Today' : @forecast.date.strftime('%A') %>
   </div>
   <div class="date">
@@ -19,14 +19,14 @@
   </div>
   <div class="daqi-symbol flex justify-center items-center daqi-marker text-4xl py-2 h-14">
     <div class="size-9 rounded-full <%= daqi_indicator_colour_class %>"></div>
-    <% if @forecast.air_pollution.value > 6 %>
-      <%= render partial: "shared/icons/exclamation_triangle" %>
+    <% if @forecast.air_pollution.value > 3 %>
+      <%= render partial: "shared/icons/exclamation_triangle", locals: {forecast: @forecast} %>
     <% end %>
   </div>
   <div class="daqi-label text-base">
     <%= @forecast.air_pollution.label.capitalize %>
   </div>
-  <div class="daqi-value font-normal">
+  <div class="daqi-value font-normal" data-tab-target="daqiValue">
     Index <%= @forecast.air_pollution.value %>/10
   </div>
 <% end %>
diff --git a/app/javascript/controllers/tab_controller.js b/app/javascript/controllers/tab_controller.js
index 793b2e45..6a640a0b 100644
--- a/app/javascript/controllers/tab_controller.js
+++ b/app/javascript/controllers/tab_controller.js
@@ -3,14 +3,21 @@ import { Controller } from "@hotwired/stimulus";
 // Connects to data-controller="tab"
 export default class extends Controller {
   static classes = ["active", "inactive"];
-  static targets = ["day"];
+  static targets = ["dayPrediction", "day", "daqiValue"];
 
   connect() {}
 
   switch_tab() {
     this.makeAllTabsInactive();
-    this.dayTarget.classList.toggle(this.activeClass);
-    this.dayTarget.classList.toggle(this.inactiveClass);
+    this.removeDaqiAlertClasses();
+    if (
+      this.dayTarget.innerText !== "Today" &&
+      this.daqiValueTarget.innerText[6] > 3
+    ) {
+      this.addDaqiAlertClass();
+    }
+    this.dayPredictionTarget.classList.toggle(this.activeClass);
+    this.dayPredictionTarget.classList.toggle(this.inactiveClass);
   }
 
   makeAllTabsInactive() {
@@ -19,4 +26,28 @@ export default class extends Controller {
       el.classList.add(this.inactiveClass);
     });
   }
+
+  addDaqiAlertClass() {
+    const daqiLevel = this.daqiValueTarget.innerText[6];
+
+    this.dayPredictionTarget.classList.add(
+      `daqi-alert-after-today-selected-level-${daqiLevel}`
+    );
+  }
+
+  removeDaqiAlertClasses() {
+    document.querySelectorAll(".tabs .tab").forEach((el) => {
+      const daqiAlertClassRegex = new RegExp(
+        "daqi-alert-after-today-selected-level-(\\d{1,2})"
+      );
+
+      const fullClassName = Array.from(el.classList).find((className) =>
+        className.match(daqiAlertClassRegex)
+      );
+
+      if (fullClassName) {
+        el.classList.remove(fullClassName);
+      }
+    });
+  }
 }