diff --git a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html
index 0d5e1e8..0161759 100644
--- a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html
+++ b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html
@@ -104,7 +104,7 @@
                             <div class="input-group">
                               <select
                                 id="voltageId"
-                                class="form-control"
+                                class="form-control custom-select"
                                 formControlName="voltageId"
                                 [ngClass]="{
                                   'is-invalid': submitted && f.voltageId.errors
@@ -138,7 +138,7 @@
                             >
                             <select
                               id="typeId"
-                              class="form-control"
+                              class="form-control custom-select"
                               formControlName="typeId"
                               [ngClass]="{
                                 'is-invalid': submitted && f.typeId.errors
@@ -169,7 +169,7 @@
                             >
                             <select
                               id="durationId"
-                              class="form-control"
+                              class="form-control custom-select"
                               formControlName="durationId"
                               [ngClass]="{
                                 'is-invalid': submitted && f.durationId.errors
@@ -200,7 +200,7 @@
                             >
                             <select
                               id="roomBuildingId"
-                              class="form-control"
+                              class="form-control custom-select"
                               formControlName="roomBuildingId"
                               [ngClass]="{
                                 'is-invalid':
@@ -241,15 +241,15 @@
                                 'is-invalid': submitted && f.watt.errors
                               }"
                             />
-                            <small
-                              class="form-text text-muted danger"
-                              *ngIf="submitted && f.watt.errors"
-                              class="invalid-feedback"
+                            <div
+                              *ngIf="
+                                projectInfo.get('watt').invalid &&
+                                projectInfo.get('watt').touched
+                              "
+                              class="text-danger"
                             >
-                              <div *ngIf="f.watt.errors.required">
-                                watt is required
-                              </div>
-                            </small>
+                              <small class="text-danger">Please enter a valid Watt.</small> 
+                            </div>
                           </div>
                         </div>
                       </div>
diff --git a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts
index cbb650c..6ecabfa 100644
--- a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts
+++ b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts
@@ -65,7 +65,7 @@ export class AddEditDeviceComponent implements OnInit {
       typeId: ["", Validators.required],
       durationId: ["", Validators.required],
       roomBuildingId: ["", Validators.required],
-      watt: ["", Validators.required],
+      watt: ["", [Validators.required, Validators.maxLength(15), Validators.pattern(/^[0-9]{1,7}$/)]],
     });
   }