diff --git a/src/app/features/home/components/footer/footer.component.html b/src/app/features/home/components/footer/footer.component.html
index 47bf453b..a43cc49f 100644
--- a/src/app/features/home/components/footer/footer.component.html
+++ b/src/app/features/home/components/footer/footer.component.html
@@ -80,7 +80,7 @@
           <li>
             <div class="relative flex md:px-10 md:py-3 px-4 py-1">
               <a href="https://up.edu.ph/" target="_blank"
-                ><img src="assets/icons/up.png"
+                ><img src="assets/icons/up.png" class="w-10"
               /></a>
 
               <a
@@ -88,7 +88,7 @@
                 target="_blank"
                 class="px-4"
               >
-                <img src="assets/icons/upri.png" class="pl-2"
+                <img src="assets/icons/upri.png" class="h-10 pl-2"
               /></a>
             </div>
           </li>
diff --git a/src/app/features/home/components/navigation/navigation.component.html b/src/app/features/home/components/navigation/navigation.component.html
index 0ca6b20c..72c33468 100644
--- a/src/app/features/home/components/navigation/navigation.component.html
+++ b/src/app/features/home/components/navigation/navigation.component.html
@@ -28,10 +28,8 @@
             routerLink="/"
           >
             <div class="flex max-w-xs p-2 items-center">
-              <img src="assets/icons/logo-noah.svg" class="z-50 w-20" />
-              <div class="text-xs font-bold uppercase tracking-wider p-2 z-50">
-                Nationwide Operational Assessment of Hazards
-              </div>
+              <img src="assets/icons/noah_logo.png" class="z-50 w-20" />
+              <img src="assets/icons/noah_text.png" class="z-50 h-10 pl-2" />
             </div>
           </a>
         </div>
@@ -193,21 +191,7 @@
             routerLink="/"
           >
             <div class="flex max-w-xs p-2 items-center">
-              <img src="assets/icons/logo-noah.svg" class="z-50 w-20" />
-              <div
-                class="
-                  text-xs
-                  font-bold
-                  uppercase
-                  tracking-wider
-                  p-2
-                  z-50
-                  hidden
-                  sm:block
-                "
-              >
-                Nationwide Operational Assessment of Hazards
-              </div>
+              <img src="assets/icons/noah_logo.png" class="z-50 w-20" />
             </div>
           </a>
         </div>
@@ -315,7 +299,7 @@
                       >
                         <div class="flex max-w-xs p-2 items-center">
                           <img
-                            src="assets/icons/logo-noah.svg"
+                            src="assets/icons/noah_logo.png"
                             class="z-50 w-32"
                           />
                         </div>
diff --git a/src/app/features/know-your-hazards/pages/base/base.component.html b/src/app/features/know-your-hazards/pages/base/base.component.html
index 34fd34d1..d49a3f2d 100644
--- a/src/app/features/know-your-hazards/pages/base/base.component.html
+++ b/src/app/features/know-your-hazards/pages/base/base.component.html
@@ -11,21 +11,8 @@
     routerLink="/"
   >
     <div class="flex max-w-xs items-center">
-      <img src="assets/icons/logo-noah.svg" class="z-50 w-16 lg:w-20" />
-      <div
-        class="
-          text-xs
-          font-bold
-          uppercase
-          tracking-wider
-          p-2
-          z-50
-          hidden
-          lg:block
-        "
-      >
-        Nationwide Operational Assessment of Hazards
-      </div>
+      <img src="assets/icons/noah_logo.png" class="z-50 w-16 lg:w-20" />
+      <img src="assets/icons/noah_text.png" class="z-50 h-10 pl-2" />
     </div>
   </a>
 </div>
diff --git a/src/app/features/noah-playground/components/qc-sensors-group/qc-sensors-group.component.html b/src/app/features/noah-playground/components/qc-sensors-group/qc-sensors-group.component.html
index a43879bd..8b338ca4 100644
--- a/src/app/features/noah-playground/components/qc-sensors-group/qc-sensors-group.component.html
+++ b/src/app/features/noah-playground/components/qc-sensors-group/qc-sensors-group.component.html
@@ -115,10 +115,39 @@ <h6 class="text-xl leading-none font-bold">IoT (Internet of Things)</h6>
         [qcCriticalFacilities]="qcCriticalFacilities"
       >
       </noah-qc-critical-facilities>
-      <noah-summary
-        [ngClass]="(shown$ | async) ? ' pt-5 ' : ' hidden '"
-      ></noah-summary>
+
+      <div class="px-6 justify-center items-center">
+        <button
+          class="
+            text-xs
+            font-bold
+            bg-green-600
+            rounded-full
+            px-10
+            py-2
+            my-4
+            inline-flex
+            items-center
+            justify-center
+            text-white
+            focus:outline-none
+            mx-auto
+            lg:mx-0
+            tracking-widest
+            hover:bg-green-700
+            focus:ring-opacity-50
+            border-2
+            disabled:opacity-25
+            disabled:cursor-not-allowed
+            disabled:hover:bg-green-600
+            whitespace-nowrap
+          "
+          (click)="iotModalOpen()"
+          [disabled]="!(shown$ | async)"
+        >
+          View Data Summary
+        </button>
+      </div>
     </div>
   </div>
 </div>
-<noah-disclaimer *ngIf="disclaimerModal"></noah-disclaimer>
diff --git a/src/app/features/noah-playground/components/qc-sensors-group/qc-sensors-group.component.ts b/src/app/features/noah-playground/components/qc-sensors-group/qc-sensors-group.component.ts
index 60fa6215..e1d1f4dc 100644
--- a/src/app/features/noah-playground/components/qc-sensors-group/qc-sensors-group.component.ts
+++ b/src/app/features/noah-playground/components/qc-sensors-group/qc-sensors-group.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ModalServicesService } from '@features/noah-playground/services/modal-services.service';
 import { NoahPlaygroundService } from '@features/noah-playground/services/noah-playground.service';
 import { QCSENSORS } from '@features/noah-playground/services/qc-sensor.service';
 import {
@@ -10,7 +11,9 @@ import {
   QuezonCityMunicipalBoundaryState,
   QuezonCitySensorType,
 } from '@features/noah-playground/store/noah-playground.store';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
+
+import { BehaviorSubject } from 'rxjs';
 @Component({
   selector: 'noah-qc-sensors-group',
   templateUrl: './qc-sensors-group.component.html',
@@ -34,8 +37,12 @@ export class QcSensorsGroupComponent implements OnInit {
   qcbShown: QuezonCityMunicipalBoundaryState;
   brgyShown: BarangayBoundaryState;
   disclaimerModal = false;
+  isChecked: boolean = false;
 
-  constructor(private pgService: NoahPlaygroundService) {}
+  constructor(
+    private pgService: NoahPlaygroundService,
+    private modalService: ModalServicesService
+  ) {}
 
   ngOnInit(): void {
     this.expanded$ = this.pgService.qcSensorsGroupExpanded$;
@@ -46,6 +53,7 @@ export class QcSensorsGroupComponent implements OnInit {
     this.qcbexpanded$ = this.pgService.qcMunicipalBoundaryExpanded$;
     this.brgyShown$ = this.pgService.barangayBoundaryShown$;
     this.brgyExpanded$ = this.pgService.barangayExpanded$;
+    this.disclaimerLoginModal();
   }
 
   toggleExpansion() {
@@ -57,12 +65,29 @@ export class QcSensorsGroupComponent implements OnInit {
     event.stopImmediatePropagation();
     this.pgService.toggleQuezonCityIOTGroupShown();
 
-    const discStatus = localStorage.getItem('disclaimerStatus');
-    if (discStatus == 'true') {
-      this.disclaimerModal = true;
+    if (event.target instanceof HTMLInputElement) {
+      const checked = event.target.checked;
+      if (checked) {
+        this.modalService.disclaimerModalOpen();
+      } else {
+        this.modalService.disclaimerModalClose();
+      }
+    }
+  }
+
+  iotModalOpen() {
+    this.modalService.iotSummaryModalOpen();
+  }
+
+  disclaimerLoginModal() {
+    const adminLogin = localStorage.getItem('loginStatus');
+    if (adminLogin == '1') {
+      this.modalService.disclaimerModalOpen();
     }
-    if (discStatus == 'false') {
-      this.disclaimerModal = false;
+    if (adminLogin == '2') {
+      localStorage.setItem('disclaimerStatus', 'false');
+    } else {
+      this.modalService.disclaimerModalClose();
     }
   }
 }
diff --git a/src/app/features/noah-playground/pages/noah-playground/noah-playground.component.html b/src/app/features/noah-playground/pages/noah-playground/noah-playground.component.html
index bd9cc065..890b1537 100644
--- a/src/app/features/noah-playground/pages/noah-playground/noah-playground.component.html
+++ b/src/app/features/noah-playground/pages/noah-playground/noah-playground.component.html
@@ -213,7 +213,7 @@
     <div class="relative flex items-center justify-between mb-2">
       <div class="w-full">
         <img
-          src="assets/icons/logo-noah.svg"
+          src="assets/icons/noah_logo.png"
           routerLink="/"
           role="button"
           class="z-50 w-20"
@@ -221,7 +221,7 @@
       </div>
       <!-- QC IOT ACCOUNT LOCAL   -->
       <img
-        class="w-auto h-10 rounded-full mx-auto"
+        class="w-auto h-10 mx-auto"
         src="assets/icons/qclogo.png"
         alt=""
         width="100%"
@@ -230,7 +230,7 @@
       />
 
       <img
-        class="w-auto h-10 rounded-full mx-auto"
+        class="w-auto h-10 mx-auto"
         src="assets/icons/laguna_logo.png"
         alt=""
         width="100%"
@@ -445,12 +445,8 @@
     <noah-map-playground></noah-map-playground>
   </main>
 </div>
-<div *ngIf="DisclaimerStatus$ | async as DisclaimerStatus">
-  <noah-disclaimer
-    *ngIf="DisclaimerStatus || disclaimerModal"
-  ></noah-disclaimer>
-</div>
 <noah-alert *ngIf="showAlert"></noah-alert>
+<noah-summary *ngIf="iotModalOpen"></noah-summary>
 <noah-qc-login *ngIf="modalAlert"></noah-qc-login>
 
 <!-- LOGOUT ALERT -->
@@ -766,3 +762,4 @@
     </div>
   </div>
 </div>
+<noah-disclaimer *ngIf="disclaimerModalOpen"></noah-disclaimer>
diff --git a/src/app/features/noah-playground/pages/noah-playground/noah-playground.component.ts b/src/app/features/noah-playground/pages/noah-playground/noah-playground.component.ts
index 3d34516e..d412e642 100644
--- a/src/app/features/noah-playground/pages/noah-playground/noah-playground.component.ts
+++ b/src/app/features/noah-playground/pages/noah-playground/noah-playground.component.ts
@@ -25,10 +25,12 @@ export class NoahPlaygroundComponent implements OnInit {
   UserName$: Observable<string>;
   showAlert: boolean;
   modalAlert: boolean;
-  DisclaimerStatus$: Observable<boolean>;
   qcAdmin: boolean;
   lagunaAdmin: boolean;
   isWarningAlert = false;
+  disclaimerModalOpen = false;
+  iotModalOpen = false;
+
   constructor(
     private pgService: NoahPlaygroundService,
     private title: Title,
@@ -41,12 +43,19 @@ export class NoahPlaygroundComponent implements OnInit {
     this.title.setTitle('NOAH Studio');
     this.LoginStatus$ = this.qcLoginService.isLoggesIn;
     this.UserName$ = this.qcLoginService.currentUserName;
-    this.DisclaimerStatus$ = this.qcLoginService.isDisclaimerStatus;
 
     this.modalService.accountWarning$.subscribe((isWarningAlert) => {
       this.isWarningAlert = isWarningAlert;
     });
 
+    this.modalService.disclaimerModal$.subscribe((disclaimerModal) => {
+      this.disclaimerModalOpen = disclaimerModal;
+    });
+
+    this.modalService.iotSummaryModal$.subscribe((iotModalOpen) => {
+      this.iotModalOpen = iotModalOpen;
+    });
+
     const disableAlert = localStorage.getItem('loginStatus');
     if (disableAlert == '1') {
       this.showAlert = false;
diff --git a/src/app/features/noah-playground/services/modal-services.service.ts b/src/app/features/noah-playground/services/modal-services.service.ts
index 5810d5e9..c88252e1 100644
--- a/src/app/features/noah-playground/services/modal-services.service.ts
+++ b/src/app/features/noah-playground/services/modal-services.service.ts
@@ -20,8 +20,30 @@ export class ModalServicesService {
   private lagunaLogin = new Subject<boolean>();
   lagunaLogin$ = this.lagunaLogin.asObservable();
 
+  private disclaimerModal = new Subject<boolean>();
+  disclaimerModal$ = this.disclaimerModal.asObservable();
+
+  private iotSummaryModal = new Subject<boolean>();
+  iotSummaryModal$ = this.iotSummaryModal.asObservable();
+
   constructor() {}
 
+  disclaimerModalOpen() {
+    this.disclaimerModal.next(true);
+  }
+
+  disclaimerModalClose() {
+    this.disclaimerModal.next(false);
+  }
+
+  iotSummaryModalOpen() {
+    this.iotSummaryModal.next(true);
+  }
+
+  iotSummaryModalClose() {
+    this.iotSummaryModal.next(false);
+  }
+
   lagunaLoginPopup() {
     this.lagunaLogin.next(true);
   }
diff --git a/src/app/shared/components/disclaimer/disclaimer.component.html b/src/app/shared/components/disclaimer/disclaimer.component.html
index 1bb03cc1..51a238e7 100644
--- a/src/app/shared/components/disclaimer/disclaimer.component.html
+++ b/src/app/shared/components/disclaimer/disclaimer.component.html
@@ -107,7 +107,7 @@
                     "
                   >
                     <img
-                      class="h-10 w-10 sm:h-16 sm:w-16 rounded-full"
+                      class="h-10 w-10 sm:h-16 sm:w-auto"
                       src="assets/icons/up.png"
                       alt="up logo"
                     />
@@ -124,7 +124,7 @@
                     "
                   >
                     <img
-                      class="h-10 w-10 sm:h-16 sm:w-16 rounded-full"
+                      class="h-10 w-10 sm:h-16 sm:w-auto"
                       src="assets/icons/upri.png"
                       alt="upri logo"
                     />
@@ -140,8 +140,8 @@
                     "
                   >
                     <img
-                      class="h-16 w-16 sm:h-28 sm:w-28"
-                      src="assets/icons/logo-noah.svg"
+                      class="h-16 sm:h-16 sm:w-auto"
+                      src="assets/icons/noah_logo.png"
                       alt="noah logo"
                     />
                   </button>
diff --git a/src/app/shared/components/login/login.component.html b/src/app/shared/components/login/login.component.html
index a168b1c4..19fa9fc4 100644
--- a/src/app/shared/components/login/login.component.html
+++ b/src/app/shared/components/login/login.component.html
@@ -129,9 +129,9 @@
       <div class="md:flex w-full">
         <div class="w-full py-10 px-5 md:px-10">
           <div class="flex justify-center gap-x-4 mb-4">
-            <img src="assets/icons/up.png" />
-            <img src="assets/icons/logo-noah.svg" class="z-50 w-20" />
-            <img src="assets/icons/upri.png" />
+            <img src="assets/icons/up.png" class="h-10" />
+            <img src="assets/icons/noah_logo.png" class="z-50 h-10" />
+            <img src="assets/icons/upri.png" class="h-10" />
           </div>
 
           <div class="text-center mb-10">
@@ -353,8 +353,8 @@ <h1 class="font-bold text-3xl text-gray-900">Login Your Account</h1>
                 "
               ></div>
               <img
-                src="assets/icons/logo-noah.svg"
-                class="w-24 h-24 animate-none"
+                src="assets/icons/noah_logo.png"
+                class="w-24 h-auto animate-none"
                 fill="none"
               />
             </div>
@@ -418,16 +418,14 @@ <h1 class="font-bold text-3xl text-gray-900">Login Your Account</h1>
         </div>
         <div class="sm:w-1/2 w-full py-10 px-5 md:px-10">
           <div class="flex justify-center space-x-8 mb-4">
-            <img src="assets/icons/up.png" />
-            <img src="assets/icons/logo-noah.svg" class="z-50 w-20" />
+            <img src="assets/icons/up.png" class="h-10" />
+            <img src="assets/icons/noah_logo.png" class="z-50 h-10" />
             <img
-              class="w-12 h-10 rounded-full mx-auto block md:hidden"
-              src="https://th.bing.com/th/id/R.0e46cbc8c39a4c607359ca736c2c6ec3?rik=j7NvGiGXEIqUYQ&riu=http%3a%2f%2f3.bp.blogspot.com%2f-Kyen0ow8-ZM%2fVL9G10YOXHI%2fAAAAAAAAE9c%2fbzXXi8foQFg%2fs355%2fQCSealnew.png&ehk=VLaZJ5SLWlVst6pIxmgIzOjx%2fQPDP8Kq%2fvAPxI5t6Fs%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
+              class="w-auto h-10 mx-auto block md:hidden"
+              src="assets/icons/qclogo.png"
               alt=""
-              width="384"
-              height="512"
             />
-            <img src="assets/icons/upri.png" />
+            <img src="assets/icons/upri.png" class="h-10" />
           </div>
 
           <div class="text-center mb-10">
@@ -649,8 +647,8 @@ <h1 class="font-bold text-3xl text-gray-900">
                 "
               ></div>
               <img
-                src="assets/icons/logo-noah.svg"
-                class="w-24 h-24 animate-none"
+                src="assets/icons/noah_logo.png"
+                class="w-24 h-auto animate-none"
                 fill="none"
               />
             </div>
diff --git a/src/app/shared/components/qc-login/qc-login.component.html b/src/app/shared/components/qc-login/qc-login.component.html
index 06b1615c..10d2fca6 100644
--- a/src/app/shared/components/qc-login/qc-login.component.html
+++ b/src/app/shared/components/qc-login/qc-login.component.html
@@ -23,8 +23,8 @@
               "
             ></div>
             <img
-              src="assets/icons/logo-noah.svg"
-              class="w-24 h-24 animate-none"
+              src="assets/icons/noah_logo.png"
+              class="w-24 h-auto animate-none"
               fill="none"
             />
           </div>
@@ -84,16 +84,14 @@
             </div>
             <div class="sm:w-1/2 w-full py-10 px-5 md:px-10">
               <div class="flex justify-center space-x-8 mb-4">
-                <img src="assets/icons/up.png" />
-                <img src="assets/icons/logo-noah.svg" class="z-50 w-20" />
+                <img src="assets/icons/up.png" class="h-10" />
+                <img src="assets/icons/noah_logo.png" class="z-50 h-10" />
                 <img
-                  class="w-12 h-10 rounded-full mx-auto block md:hidden"
+                  class="w-auto h-10 mx-auto block md:hidden"
                   src="assets/icons/qclogo.png"
                   alt=""
-                  width="384"
-                  height="512"
                 />
-                <img src="assets/icons/upri.png" />
+                <img src="assets/icons/upri.png" class="h-10" />
               </div>
 
               <div class="text-center mb-10">
@@ -320,16 +318,14 @@ <h1 class="font-bold text-3xl text-gray-900">
             </div>
             <div class="sm:w-1/2 w-full py-10 px-5 md:px-10">
               <div class="flex justify-center space-x-8 mb-4">
-                <img src="assets/icons/up.png" />
-                <img src="assets/icons/logo-noah.svg" class="z-50 w-20" />
+                <img src="assets/icons/up.png" class="h-10" />
+                <img src="assets/icons/noah_logo.png" class="z-50 h-10" />
                 <img
-                  class="w-12 h-10 rounded-full mx-auto block md:hidden"
+                  class="w-auto h-10 mx-auto block md:hidden"
                   src="assets/icons/laguna_logo.png"
                   alt=""
-                  width="384"
-                  height="512"
                 />
-                <img src="assets/icons/upri.png" />
+                <img src="assets/icons/upri.png" class="h-10" />
               </div>
 
               <div class="text-center mb-10">
diff --git a/src/app/shared/components/summary/summary.component.html b/src/app/shared/components/summary/summary.component.html
index 0c87dc18..688cb5e9 100644
--- a/src/app/shared/components/summary/summary.component.html
+++ b/src/app/shared/components/summary/summary.component.html
@@ -1,46 +1,22 @@
-<div class="px-6 justify-center items-center">
-  <button
-    class="
-      text-xs
-      font-bold
-      bg-green-600
-      rounded-full
-      px-10
-      py-2
-      my-4
-      inline-flex
-      items-center
-      justify-center
-      text-white
-      focus:outline-none
-      mx-auto
-      lg:mx-0
-      tracking-widest
-      hover:bg-green-700
-      focus:ring-opacity-50
-      border-2
-    "
-    (click)="viewSummary()"
-  >
-    View Data Summary
-  </button>
-</div>
-
 <!-- MODAL -->
-<div
-  class="relative z-50"
-  aria-labelledby="modal-title"
-  role="dialog"
-  aria-modal="true"
-  *ngIf="summaryModal"
->
+<div class="relative z-50" *ngIf="iotSummaryModal">
   <div
     class="fixed inset-0 bg-black opacity-80 transition-opacity"
     (click)="closeModal()"
   ></div>
 
   <div class="fixed inset-0 z-10 overflow-y-auto">
-    <div class="flex min-h-full justify-center p-4 text-center items-center">
+    <div
+      class="
+        flex
+        min-h-full
+        justify-center
+        p-4
+        text-center
+        items-center
+        xl:px-48
+      "
+    >
       <div
         class="
           relative
@@ -54,6 +30,7 @@
           shadow-xl
           transition-all
           sm:my-8 sm:w-full sm:max-w-screen-lg
+          xl:min-w-full
         "
       >
         <div class="bg-blue-50 px-4 pt-5">
@@ -343,8 +320,8 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                     "
                                   ></div>
                                   <img
-                                    src="assets/icons/logo-noah.svg"
-                                    class="w-10 h-10 animate-none"
+                                    src="assets/icons/noah_logo.png"
+                                    class="w-10 h-auto animate-none"
                                     fill="none"
                                   />
                                 </div>
@@ -381,6 +358,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                     text-left
                                     font-extrabold
                                     sticky
+                                    whitespace-nowrap
                                   "
                                   *ngFor="let col of columns"
                                 >
@@ -511,11 +489,81 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                     <ng-container
                                       *ngIf="data.iot_type == 'rain'"
                                     >
-                                      <span class="pl-10 text-lg font-bold"
-                                        >-</span
+                                      <ng-container
+                                        *ngIf="
+                                          data.latest_data >= '0' &&
+                                          data.latest_data < '7.5'
+                                        "
+                                      >
+                                        <span
+                                          class="
+                                            p-1.5
+                                            text-xs
+                                            font-normal
+                                            tracking-wider
+                                            text-black
+                                            rounded-lg
+                                            bg-gray-300
+                                          "
+                                          >Light (0 - 7.5mm/hr)</span
+                                        >
+                                      </ng-container>
+                                      <ng-container
+                                        *ngIf="
+                                          data.latest_data >= '7.51' &&
+                                          data.latest_data < '15'
+                                        "
                                       >
+                                        <span
+                                          class="
+                                            p-1.5
+                                            text-xs
+                                            font-medium
+                                            tracking-wider
+                                            text-black
+                                            rounded-lg
+                                            bg-low
+                                          "
+                                          >Heavy (7.51 - 15mm/hr)</span
+                                        >
+                                      </ng-container>
+                                      <ng-container
+                                        *ngIf="
+                                          data.latest_data >= '15.1' &&
+                                          data.latest_data <= '30'
+                                        "
+                                      >
+                                        <span
+                                          class="
+                                            p-1.5
+                                            text-xs
+                                            font-medium
+                                            tracking-wider
+                                            text-black
+                                            rounded-lg
+                                            bg-medium
+                                          "
+                                          >Intense (15 - 30mm/hr)</span
+                                        >
+                                      </ng-container>
+                                      <ng-container
+                                        *ngIf="data.latest_data > '30'"
+                                      >
+                                        <span
+                                          class="
+                                            p-1.5
+                                            text-xs
+                                            font-medium
+                                            tracking-wider
+                                            text-black
+                                            rounded-lg
+                                            bg-high
+                                          "
+                                          >Torrential (> 30.1mm/hr)</span
+                                        >
+                                      </ng-container>
+                                      <!-- Flood -->
                                     </ng-container>
-
                                     <ng-container
                                       *ngIf="data.iot_type == 'flood'"
                                     >
@@ -530,7 +578,6 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             p-1.5
                                             text-xs
                                             font-medium
-                                            uppercase
                                             tracking-wider
                                             text-black
                                             bg-low
@@ -551,7 +598,6 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             p-1.5
                                             text-xs
                                             font-medium
-                                            uppercase
                                             tracking-wider
                                             text-black
                                             bg-medium
@@ -569,7 +615,6 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             p-1.5
                                             text-xs
                                             font-medium
-                                            uppercase
                                             tracking-wider
                                             text-black
                                             bg-high
@@ -927,8 +972,8 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                     "
                                   ></div>
                                   <img
-                                    src="assets/icons/logo-noah.svg"
-                                    class="w-10 h-10 animate-none"
+                                    src="assets/icons/noah_logo.png"
+                                    class="w-10 h-auto animate-none"
                                     fill="none"
                                   />
                                 </div>
@@ -1474,8 +1519,8 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                     "
                                   ></div>
                                   <img
-                                    src="assets/icons/logo-noah.svg"
-                                    class="w-10 h-10 animate-none"
+                                    src="assets/icons/noah_logo.png"
+                                    class="w-10 h-auto animate-none"
                                     fill="none"
                                   />
                                 </div>
@@ -1619,10 +1664,81 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                     <ng-container
                                       *ngIf="data.iot_type == 'rain'"
                                     >
-                                      <span class="pl-8 text-lg font-bold"
-                                        >-</span
+                                      <ng-container
+                                        *ngIf="
+                                          data.latest_data >= '0' &&
+                                          data.latest_data < '7.5'
+                                        "
+                                      >
+                                        <span
+                                          class="
+                                            p-1.5
+                                            text-xs
+                                            font-normal
+                                            tracking-wider
+                                            text-black
+                                            rounded-lg
+                                            bg-gray-300
+                                          "
+                                          >Light (0 - 7.5mm/hr)</span
+                                        >
+                                      </ng-container>
+                                      <ng-container
+                                        *ngIf="
+                                          data.latest_data >= '7.51' &&
+                                          data.latest_data < '15'
+                                        "
+                                      >
+                                        <span
+                                          class="
+                                            p-1.5
+                                            text-xs
+                                            font-medium
+                                            tracking-wider
+                                            text-black
+                                            rounded-lg
+                                            bg-low
+                                          "
+                                          >Heavy (7.51 - 15mm/hr)</span
+                                        >
+                                      </ng-container>
+                                      <ng-container
+                                        *ngIf="
+                                          data.latest_data >= '15.1' &&
+                                          data.latest_data <= '30'
+                                        "
                                       >
+                                        <span
+                                          class="
+                                            p-1.5
+                                            text-xs
+                                            font-medium
+                                            tracking-wider
+                                            text-black
+                                            rounded-lg
+                                            bg-medium
+                                          "
+                                          >Intense (15 - 30mm/hr)</span
+                                        >
+                                      </ng-container>
+                                      <ng-container
+                                        *ngIf="data.latest_data > '30'"
+                                      >
+                                        <span
+                                          class="
+                                            p-1.5
+                                            text-xs
+                                            font-medium
+                                            tracking-wider
+                                            text-black
+                                            rounded-lg
+                                            bg-high
+                                          "
+                                          >Torrential (> 30.1mm/hr)</span
+                                        >
+                                      </ng-container>
                                     </ng-container>
+                                    <!-- END RAIN TAB -->
                                   </ng-template>
                                 </td>
                                 <td
diff --git a/src/app/shared/components/summary/summary.component.ts b/src/app/shared/components/summary/summary.component.ts
index b44271c7..c2a6c7d4 100644
--- a/src/app/shared/components/summary/summary.component.ts
+++ b/src/app/shared/components/summary/summary.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ModalServicesService } from '@features/noah-playground/services/modal-services.service';
 import {
   QcSensorService,
   SummaryItem,
@@ -31,6 +32,8 @@ export class SummaryComponent implements OnInit {
   rainFetchedData: SummaryItem[] = [];
   activeRainSensor: number;
 
+  iotSummaryModal = false;
+
   searchValue: string;
 
   itemsPerPage: number = 20;
@@ -47,7 +50,10 @@ export class SummaryComponent implements OnInit {
   sortField = 'latest_date';
   sortDirection = 'ascending';
 
-  constructor(private qcSensorService: QcSensorService) {}
+  constructor(
+    private qcSensorService: QcSensorService,
+    private modalService: ModalServicesService
+  ) {}
   columns = [
     {
       key: 'name',
@@ -81,7 +87,9 @@ export class SummaryComponent implements OnInit {
     },
   ];
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.viewSummary();
+  }
 
   async viewSummary() {
     if (this.loading) {
@@ -89,7 +97,7 @@ export class SummaryComponent implements OnInit {
     }
 
     try {
-      this.summaryModal = true;
+      this.iotSummaryModal = true;
       this.loading = true;
 
       const response: any = await this.qcSensorService
@@ -271,7 +279,7 @@ export class SummaryComponent implements OnInit {
       this.activeRainSensor = activeRain.length;
       this.activeFloodSensor = activeFlood.length;
     } catch (error) {
-      this.summaryModal = false;
+      this.iotSummaryModal = false;
       this.loading = !this.loading;
       this.alertSummary = true;
       setTimeout(() => {
@@ -283,9 +291,8 @@ export class SummaryComponent implements OnInit {
   }
 
   closeModal() {
-    this.subscription.unsubscribe(); //stop popup modal
+    this.modalService.iotSummaryModalClose();
     this.alert = !this.alert;
-    this.summaryModal = !this.summaryModal;
   }
 
   onPageChange(page: number = 1): void {
diff --git a/src/assets/icons/noah_logo.png b/src/assets/icons/noah_logo.png
new file mode 100644
index 00000000..5d1b34a2
Binary files /dev/null and b/src/assets/icons/noah_logo.png differ
diff --git a/src/assets/icons/noah_text.png b/src/assets/icons/noah_text.png
new file mode 100644
index 00000000..e2bb7bf8
Binary files /dev/null and b/src/assets/icons/noah_text.png differ
diff --git a/src/assets/icons/up.png b/src/assets/icons/up.png
index 3c4f0ff1..9d99d8f0 100644
Binary files a/src/assets/icons/up.png and b/src/assets/icons/up.png differ
diff --git a/src/assets/icons/upri.png b/src/assets/icons/upri.png
index cd3c464e..3c3b2179 100644
Binary files a/src/assets/icons/upri.png and b/src/assets/icons/upri.png differ