diff --git a/ui/src/app/config/co2-levels.config.spec.ts b/ui/src/app/config/co2-levels.config.spec.ts
index bb3372c..0cdfdc4 100644
--- a/ui/src/app/config/co2-levels.config.spec.ts
+++ b/ui/src/app/config/co2-levels.config.spec.ts
@@ -2,8 +2,8 @@ import { CO2_LEVELS, getCO2Color, getCO2Level } from './co2-levels.config';
 
 describe('CO2 Levels Config', () => {
   describe('CO2_LEVELS', () => {
-    it('should have 6 levels', () => {
-      expect(CO2_LEVELS.length).toBe(6);
+    it('should have at least one level', () => {
+      expect(CO2_LEVELS.length).toBeGreaterThan(0);
     });
 
     it('should have Infinity as maxPpm for the last level', () => {
@@ -18,58 +18,22 @@ describe('CO2 Levels Config', () => {
   });
 
   describe('getCO2Color', () => {
-    it('returns Excellent color for value below 800', () => {
-      expect(getCO2Color(400)).toBe('#4caf50');
-      expect(getCO2Color(799)).toBe('#4caf50');
-    });
-
-    it('returns Good color for value in [800, 1000)', () => {
-      expect(getCO2Color(800)).toBe('#8bc34a');
-      expect(getCO2Color(999)).toBe('#8bc34a');
-    });
-
-    it('returns Moderate color for value in [1000, 1200)', () => {
-      expect(getCO2Color(1000)).toBe('#ffc107');
-      expect(getCO2Color(1199)).toBe('#ffc107');
-    });
-
-    it('returns Poor color for value in [1200, 1500)', () => {
-      expect(getCO2Color(1200)).toBe('#ff9800');
-    });
-
-    it('returns Very Poor color for value in [1500, 2000)', () => {
-      expect(getCO2Color(1500)).toBe('#ff5722');
-    });
-
-    it('returns Critical color for value >= 2000', () => {
-      expect(getCO2Color(2000)).toBe('#f44336');
-      expect(getCO2Color(9999)).toBe('#f44336');
+    it('returns the correct color for a value within each level', () => {
+      CO2_LEVELS.forEach((level, i) => {
+        const prevMax = i === 0 ? 0 : CO2_LEVELS[i - 1].maxPpm;
+        const testPpm = level.maxPpm === Infinity ? prevMax + 1 : (prevMax + level.maxPpm) / 2;
+        expect(getCO2Color(testPpm)).toBe(level.color);
+      });
     });
   });
 
   describe('getCO2Level', () => {
-    it('returns Excellent for 400 ppm', () => {
-      expect(getCO2Level(400).label).toBe('Excellent');
-    });
-
-    it('returns Good for 900 ppm', () => {
-      expect(getCO2Level(900).label).toBe('Good');
-    });
-
-    it('returns Moderate for 1100 ppm', () => {
-      expect(getCO2Level(1100).label).toBe('Moderate');
-    });
-
-    it('returns Poor for 1300 ppm', () => {
-      expect(getCO2Level(1300).label).toBe('Poor');
-    });
-
-    it('returns Very Poor for 1800 ppm', () => {
-      expect(getCO2Level(1800).label).toBe('Very Poor');
-    });
-
-    it('returns Critical for 2500 ppm', () => {
-      expect(getCO2Level(2500).label).toBe('Critical');
+    it('returns the correct level for a value within each level', () => {
+      CO2_LEVELS.forEach((level, i) => {
+        const prevMax = i === 0 ? 0 : CO2_LEVELS[i - 1].maxPpm;
+        const testPpm = level.maxPpm === Infinity ? prevMax + 1 : (prevMax + level.maxPpm) / 2;
+        expect(getCO2Level(testPpm).label).toBe(level.label);
+      });
     });
 
     it('returned level has matching color and range', () => {
diff --git a/ui/src/environments/environment.template.ts b/ui/src/environments/environment.template.ts
index 2edbdd3..25f9144 100644
--- a/ui/src/environments/environment.template.ts
+++ b/ui/src/environments/environment.template.ts
@@ -12,4 +12,8 @@ export const environment = {
     mapIntervalMs: 30_000,
     detailIntervalMs: 15_000,
   },
+  api: {
+    username: '__API_USERNAME__',
+    password: '__API_PASSWORD__',
+  },
 };