diff --git a/TestUI/src/app/app.component.html b/TestUI/src/app/app.component.html
index 56bba0c..71ff692 100644
--- a/TestUI/src/app/app.component.html
+++ b/TestUI/src/app/app.component.html
@@ -1,12 +1,15 @@
 <div class="container">
+  <div class="content">
+    <span> {{title}} app is running! </span>
+  </div>
   <div class="row">
     <div class="col-6 offset-3" *ngFor="let weather of weatherData">
       <div class="card">
         <div class="card-body">
-          <h5 class="card-title">{{weather.date}}</h5>
+          <h5 class="card-title">{{ weather.date | date: 'full' }}</h5>
           <h6 class="card-subtitle mb-2 text-muted">{{weather.temperatureF}} &#176;F </h6>
           <h6 class="card-subtitle mb-2 text-muted">{{weather.temperatureC}} &#176;C</h6>
-          <p class="card-text">{{weather.summary}}</p>
+          <p class="card-text" [style.color]="getWeatherSummaryColor(weather.summary!)">{{weather.summary}}</p>
         </div>
       </div>
     </div>
diff --git a/TestUI/src/app/app.component.spec.ts b/TestUI/src/app/app.component.spec.ts
index 0254631..3779727 100644
--- a/TestUI/src/app/app.component.spec.ts
+++ b/TestUI/src/app/app.component.spec.ts
@@ -1,12 +1,30 @@
 import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { AppComponent } from './app.component';
+import { of, throwError } from 'rxjs';
+import { WeatherForecast } from './weatherapp.swagger';
+
+const weatherData: WeatherForecast[] = [
+  {
+    date: new Date('2024-01-01'),
+    temperatureC: 38, 
+    temperatureF: 100, 
+    summary: 'Hot'
+  }
+];
 
 describe('AppComponent', () => {
+
+  let fixture = TestBed.createComponent(AppComponent);
+  let app = fixture.componentInstance;
+
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule
+        RouterTestingModule,
+        HttpClientTestingModule
       ],
       declarations: [
         AppComponent
@@ -15,21 +33,77 @@ describe('AppComponent', () => {
   });
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
   it(`should have as title 'TestUI'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
     expect(app.title).toEqual('TestUI');
   });
 
   it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('TestUI app is running!');
+    const rendered = fixture.nativeElement as HTMLElement;
+    expect(rendered.querySelector('.content span')?.textContent).toContain('TestUI app is running!');
+  });
+
+  describe('getWeatherSummaryColor', () => {
+
+    it('should return cyan for Freezing, Bracing, or Chilly', () => {
+
+      expect(app.getWeatherSummaryColor('Freezing')).toEqual('cyan');
+      expect(app.getWeatherSummaryColor('Bracing')).toEqual('cyan');
+      expect(app.getWeatherSummaryColor('Chilly')).toEqual('cyan');
+
+    });
+
+    it('should return green for Mild, Balmy, or Cool', () => {
+
+      expect(app.getWeatherSummaryColor('Mild')).toEqual('green');
+      expect(app.getWeatherSummaryColor('Balmy')).toEqual('green');
+      expect(app.getWeatherSummaryColor('Cool')).toEqual('green');
+
+    });
+
+    it('should return orange for Warm or Hot', () => {
+
+      expect(app.getWeatherSummaryColor('Warm')).toEqual('orange');
+      expect(app.getWeatherSummaryColor('Hot')).toEqual('orange');
+
+    });
+
+    it('should return red for Sweltering or Scorching', () => {
+
+      expect(app.getWeatherSummaryColor('Sweltering')).toEqual('red');
+      expect(app.getWeatherSummaryColor('Scorching')).toEqual('red');
+
+    });
+
   });
+
+  describe('getWeather', () => {
+
+    it('should handle complete', () => {
+      const completeSpy = spyOn( app, 'getWeather').and.callThrough();
+      app.getWeather();
+      expect(completeSpy).toHaveBeenCalled();
+    }); 
+  
+    it('should handle error', () => {
+      const error = 'Error message';
+      spyOn(app, 'handleError');
+      app.getWeather();
+      expect(app.handleError).toHaveBeenCalledWith(error);
+    }); 
+  
+    it('should handle next', () => {
+      app.getWeather();
+      expect(app.weatherData).toEqual(weatherData);
+    }); 
+  
+  }); 
+
 });
+
+
+
+
diff --git a/TestUI/src/app/app.component.ts b/TestUI/src/app/app.component.ts
index 12ba596..fe0e8b0 100644
--- a/TestUI/src/app/app.component.ts
+++ b/TestUI/src/app/app.component.ts
@@ -10,9 +10,12 @@ import {Client, WeatherForecast} from "./weatherapp.swagger";
 export class AppComponent {
   weatherData: WeatherForecast[] = [];
 
+  title: string;
+
   constructor(
     private client: Client
   ) {
+    this.title = "TestUI";
     this.getWeather();
   }
 
@@ -43,4 +46,25 @@ export class AppComponent {
   handleError(error: string) {
     alert(error);
   }
+
+  getWeatherSummaryColor(summary: string): string {
+      switch (summary) {
+        case 'Freezing':
+        case 'Bracing':
+        case 'Chilly':
+          return 'cyan';
+        case 'Mild':
+        case 'Balmy':
+        case 'Cool':
+          return 'green';
+        case 'Warm':
+        case 'Hot':
+          return 'orange';
+        case 'Sweltering':
+        case 'Scorching':
+          return 'red';
+        default:
+          return 'black';
+      }
+  }
 }