diff --git a/frontend/public/icons/humidity-empty.svg b/frontend/public/icons/humidity-empty.svg
new file mode 100644
index 000000000..7eec039c9
--- /dev/null
+++ b/frontend/public/icons/humidity-empty.svg
@@ -0,0 +1,4 @@
+
diff --git a/frontend/public/icons/humidity-full.svg b/frontend/public/icons/humidity-full.svg
new file mode 100644
index 000000000..458efe292
--- /dev/null
+++ b/frontend/public/icons/humidity-full.svg
@@ -0,0 +1,4 @@
+
diff --git a/frontend/public/icons/humidity-half.svg b/frontend/public/icons/humidity-half.svg
new file mode 100644
index 000000000..6c926e012
--- /dev/null
+++ b/frontend/public/icons/humidity-half.svg
@@ -0,0 +1,4 @@
+
diff --git a/frontend/src/components/control/AMSSectionDual.tsx b/frontend/src/components/control/AMSSectionDual.tsx
index fd8a7ff90..dc549fe2f 100644
--- a/frontend/src/components/control/AMSSectionDual.tsx
+++ b/frontend/src/components/control/AMSSectionDual.tsx
@@ -29,6 +29,26 @@ function isLightColor(hex: string | null): boolean {
return luminance > 0.5;
}
+// Single humidity icon that fills based on level
+// <25% = empty (dry/good)
+// <40% = half filled
+// >=40% = full (wet/bad)
+function HumidityIcon({ humidity }: { humidity: number }) {
+ const getIconSrc = (): string => {
+ if (humidity < 25) return '/icons/humidity-empty.svg';
+ if (humidity < 40) return '/icons/humidity-half.svg';
+ return '/icons/humidity-full.svg';
+ };
+
+ return (
+
+ );
+}
+
interface AMSPanelContentProps {
units: AMSUnit[];
side: 'left' | 'right';
@@ -54,20 +74,16 @@ function AMSPanelContent({
return (