diff --git a/ng-seed/src/app/appoinment/business/add-business/add-business.component.html b/ng-seed/src/app/appoinment/business/add-business/add-business.component.html
index 24b4c91..5648a42 100644
--- a/ng-seed/src/app/appoinment/business/add-business/add-business.component.html
+++ b/ng-seed/src/app/appoinment/business/add-business/add-business.component.html
@@ -7,12 +7,14 @@
   <div mat-dialog-content class="my-table">
    
     <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+      <mat-label>Name</mat-label>
       <input placeholder=" Name" matInput  formControlName="busName">
       <mat-error *ngIf="myError('busName', 'required')">Name is required</mat-error>
       <mat-error *ngIf="myError('busName', 'maxlength')">Limit exceed</mat-error>
     </mat-form-field>  
   
     <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+      <mat-label>Email</mat-label>
       <input type="email" placeholder=" Email" matInput [(ngModel)]="local_data.email" formControlName="email">
       <mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
         Please enter a valid email address
@@ -23,6 +25,7 @@
      </mat-error>
     </mat-form-field>
     <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+      <mat-label>Phone No</mat-label>
       <input   placeholder="Phone No" matInput [(ngModel)]="local_data.contactNo" formControlName="contactNo">
         <mat-error *ngIf="myError('contactNo', 'required')">Contact No is required</mat-error>
       <mat-error *ngIf="myError('contactNo', 'pattern')">Invalid Contact No  </mat-error>
@@ -30,16 +33,19 @@
       <mat-error *ngIf="myError('contactNo', 'maxlength')">Limit exceed</mat-error>
     </mat-form-field> 
     <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+      <mat-label>Address</mat-label>
       <input placeholder=" Address" matInput [(ngModel)]="local_data.address" formControlName="address">
       <mat-error *ngIf="myError('address', 'required')">Address is required</mat-error>
       <mat-error *ngIf="myError('address', 'maxlength')">Limit exceed</mat-error>
     </mat-form-field> 
     <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+      <mat-label>State</mat-label>
       <input placeholder=" State" matInput [(ngModel)]="local_data.state" formControlName="state">
       <mat-error *ngIf="myError('state', 'required')">State is required</mat-error>
       <mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error>
     </mat-form-field> 
     <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+      <mat-label>City</mat-label>
       <input placeholder=" City" matInput [(ngModel)]="local_data.city" formControlName="city">
       <mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
       <mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>
diff --git a/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.html b/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.html
index f96f0ab..8ed57b0 100644
--- a/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.html
+++ b/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.html
@@ -81,7 +81,7 @@
    <div class="availabilitys">
    <form novalidate #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
       <div class="mt-2">
-            <div class="field mb-1">
+            <div class="field mb-2">
                <label class="label-container">Staff</label>
                <input type="text" class="form-control mat-pane" placeholder="Staff" name="staff" ngModel #staffRef="ngModel">
             </div>
@@ -94,24 +94,33 @@
                </mat-radio-group>
              </section>
            </div> -->
-            <div class="field mb-1">
+
+
+            <div class="field mb-2">
                <label for="name-field" class="mr2">All-day Availability</label>
                <!-- <mat-slide-toggle class="toggle" (click)="toggleData()"></mat-slide-toggle> -->
-               <label class="switch" >
+               <!-- <label class="switch" >
                   <input class="switch-input" type="checkbox" (click)="toggle()" id="bt" />
                   <span class="switch-label" data-on="On" data-off="Off"></span> 
                   <span class="switch-handle"></span> 
-              </label>
+              </label> -->
+           <div class="onoffswitch">
+            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked >
+            <label class="onoffswitch-label" for="myonoffswitch" (click)="toggle()" id="bt" >
+                <span class="onoffswitch-inner"></span>
+                <span class="onoffswitch-switch"></span>
+            </label>
+                </div>
             </div>
 
-            <div class="field mb-1">
+            <div class="field">
                <label for="name-field" class="label-container">From</label>
                <mat-form-field appearance="outline"class="mate" >
                   <input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel">
                   <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                   <mat-datepicker #picker></mat-datepicker>
                 </mat-form-field>
-               <mat-form-field appearance="outline" class="mate date-marge"  *ngIf="show">
+               <mat-form-field appearance="outline" class="mates date-marge"  *ngIf="show">
                   <input  class="time-align" type="time" matInput name="from-time" min="09:00" max="18:00"  ngModel #timeRef="ngModel">
                </mat-form-field>
             </div>
@@ -123,7 +132,7 @@
                   <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                   <mat-datepicker #picker></mat-datepicker>
                 </mat-form-field>
-               <mat-form-field appearance="outline" class="mate date-marge"  *ngIf="show">
+               <mat-form-field appearance="outline" class="mates date-marge"  *ngIf="show">
                   <input class="time-align" type="time" matInput name="to-time" min="09:00" max="18:00"  ngModel #timesRef="ngModel">
                </mat-form-field>
             </div>
diff --git a/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.scss b/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.scss
index 405800a..3f5ebb9 100644
--- a/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.scss
+++ b/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.scss
@@ -21,6 +21,7 @@
     .label-container{
         margin-right: 8rem;
         margin-left: 1.5rem;
+        color: #666;
     }
     // .outline{
     //     width: 18%;
@@ -28,6 +29,12 @@
     .mate{
         width: 16% !important;
     }
+    .mates{
+        width: 16% !important;
+        ::ng-deep .mat-form-field-outline {
+            width: 115%!important;
+        }
+    }
     .date-marge{
         margin-left: 4.5rem;
     }
@@ -38,10 +45,12 @@
     .mr-8{
         margin-right: 7rem;
         margin-left: 1.5rem;
+        color: #666;
     }
     .mr2{
         margin-right: 3rem;
         margin-left: 1.5rem;
+        color: #666;
     }
     .cancel {
         background: #F5F5F5;
@@ -100,8 +109,8 @@
 }
 ::ng-deep .mat-icon-button {
     margin-right: -3rem;
-    margin-top: -12px;
-    padding-top: 10px;
+    // margin-top: -12px;
+    // padding-top: 10px;
 }
 ::ng-deep .mat-slide-toggle-bar {
     width: 50px;
@@ -116,6 +125,7 @@
 .container-to{
     margin-right: 9rem;
     margin-left: 1.5rem;
+    color: #666;
 }
 ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
     padding: 0em 0 1em 0;
@@ -146,115 +156,199 @@
     margin-left: 6rem;
 }
 .time-align{
-    padding-top: 10px!important;
+    padding-top: 10px !important;
+    font-size: 20px;
+    padding-left: 10px;
 }
 
 //switch
 
-.switch {
-	position: relative;
-	display: block;
-	// vertical-align: top;
-	width: 100px;
-	height: 30px;
-	padding: 3px;
-	margin: 0 10px 10px 0;
-	// background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
-	// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
-	border-radius: 18px;
-	// box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
-	cursor: pointer;
-	box-sizing:content-box;
-}
-.switch-input {
-	position: absolute;
-	top: 0;
-	left: 0;
-	opacity: 0;
-	box-sizing:content-box;
-}
-.switch-label {
-	position: relative;
-	display: block;
-	height: inherit;
-	font-size: 10px;
-	text-transform: uppercase;
-	// background: #eceeef;
-	border-radius: inherit;
-	// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
-	border: 1px solid #4CAE4C;
-    box-sizing:content-box;
-}
-.switch-label:before, .switch-label:after {
-	position: absolute;
-	top: 50%;
-	margin-top: -.5em;
-	line-height: 1;
-	-webkit-transition: inherit;
-	-moz-transition: inherit;
-	-o-transition: inherit;
-	transition: inherit;
-	box-sizing:content-box;
-}
-.switch-label:before {
-    // content: attr(data-off);
-	content: 'enable';
-	right: 11px;
-	color: #111111;
-	// text-shadow: 0 1px rgba(255, 255, 255, 0.5);
-}
-.switch-label:after {
-	// content: attr(data-on);
-    content: 'disable ';
-	left: 11px;
-	color: #111111;
-	// text-shadow: 0 1px rgba(0, 0, 0, 0.2);
-	opacity: 0;
-}
-.switch-input:checked ~ .switch-label {
-	background: #FFFFFF;
-	// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
-}
-.switch-input:checked ~ .switch-label:before {
-	opacity: 0;
-}
-.switch-input:checked ~ .switch-label:after {
-	opacity: 1;
-}
-.switch-handle {
-	position: absolute;
-	top: 4px;
-	left: 4px;
-	width: 28px;
-	height: 28px;
-	// background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
-	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
-	border-radius: 100%;
-	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
-}
-.switch-handle:before {
-	content: "";
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	margin: -6px 0 0 -6px;
-	width: 12px;
-	height: 12px;
-	// background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
-	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
-	border-radius: 6px;
-	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
-}
-.switch-input:checked ~ .switch-handle {
-	left: 74px;
-	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
-}
+// .switch {
+// 	position: relative;
+// 	display: block;
+// 	// vertical-align: top;
+// 	width: 100px;
+// 	height: 30px;
+// 	padding: 3px;
+// 	margin: 0 10px 10px 0;
+// 	// background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
+// 	// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
+// 	border-radius: 18px;
+// 	// box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
+// 	cursor: pointer;
+// 	box-sizing:content-box;
+// }
+// .switch-input {
+// 	position: absolute;
+// 	top: 0;
+// 	left: 0;
+// 	opacity: 0;
+// 	box-sizing:content-box;
+// }
+// .switch-label {
+// 	position: relative;
+// 	display: block;
+// 	height: inherit;
+// 	font-size: 10px;
+// 	text-transform: uppercase;
+// 	// background: #eceeef;
+// 	border-radius: inherit;
+// 	// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
+// 	border: 1px solid #4CAE4C;
+//     box-sizing:content-box;
+// }
+// .switch-label:before, .switch-label:after {
+// 	position: absolute;
+// 	top: 50%;
+// 	margin-top: -.5em;
+// 	line-height: 1;
+// 	-webkit-transition: inherit;
+// 	-moz-transition: inherit;
+// 	-o-transition: inherit;
+// 	transition: inherit;
+// 	box-sizing:content-box;
+// }
+// .switch-label:before {
+//     // content: attr(data-off);
+// 	content: 'enable';
+// 	right: 11px;
+// 	color: #111111;
+// 	// text-shadow: 0 1px rgba(255, 255, 255, 0.5);
+// }
+// .switch-label:after {
+// 	// content: attr(data-on);
+//     content: 'disable ';
+// 	left: 11px;
+// 	color: #111111;
+// 	// text-shadow: 0 1px rgba(0, 0, 0, 0.2);
+// 	opacity: 0;
+// }
+// .switch-input:checked ~ .switch-label {
+// 	background: #FFFFFF;
+// 	// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
+// }
+// .switch-input:checked ~ .switch-label:before {
+// 	opacity: 0;
+// }
+// .switch-input:checked ~ .switch-label:after {
+// 	opacity: 1;
+// }
+// .switch-handle {
+// 	position: absolute;
+// 	top: 4px;
+// 	left: 4px;
+// 	width: 28px;
+// 	height: 28px;
+// 	// background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
+// 	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
+// 	border-radius: 100%;
+// 	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+// }
+// .switch-handle:before {
+// 	content: "";
+// 	position: absolute;
+// 	top: 50%;
+// 	left: 50%;
+// 	margin: -6px 0 0 -6px;
+// 	width: 12px;
+// 	height: 12px;
+// 	// background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
+// 	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
+// 	border-radius: 6px;
+// 	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
+// }
+// .switch-input:checked ~ .switch-handle {
+// 	left: 74px;
+// 	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
+// }
  
-/* Transition
-========================== */
-.switch-label, .switch-handle {
-	transition: All 0.3s ease;
-	-webkit-transition: All 0.3s ease;
-	-moz-transition: All 0.3s ease;
-	-o-transition: All 0.3s ease;
+// /* Transition
+// ========================== */
+// .switch-label, .switch-handle {
+// 	transition: All 0.3s ease;
+// 	-webkit-transition: All 0.3s ease;
+// 	-moz-transition: All 0.3s ease;
+// 	-o-transition: All 0.3s ease;
+// }
+
+.onoffswitch {
+    position: relative; 
+    width: 135px;
+    // -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+}
+.onoffswitch-checkbox {
+    display: none;
+}
+.onoffswitch-label {
+    display: block; 
+    overflow: hidden; 
+    cursor: pointer;
+    // border: 2px solid #4CAE4C;
+     border-radius: 20px;
+    //  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+}
+.onoffswitch-inner {
+    display: block;
+     width: 200%;
+     margin-left: -100%;
+    // transition: margin 0.3s ease-in 0s;
+   
+}
+.onoffswitch-inner:before, .onoffswitch-inner:after {
+    display: block; 
+    float: left;
+     width: 50%;
+      height: 30px;
+       padding: 0;
+    line-height: 30px;
+    font-size: 12px; 
+    color: white; 
+    box-sizing: border-box;
+}
+.onoffswitch-inner:before {
+    content: " Enable";
+    padding-left: 10px;
+    background-color: #FFFFFF; color: #4C4C4C;
+    border: 1px solid #4CAE4C;
+    border-radius: 50px;
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+    // box-shadow: 0 0 10px rgb(82 81 144 / 38%);
+}
+.onoffswitch-inner:after {
+    content: "Disable";
+    padding-right: 10px;
+    background-color: #FFFFFF; color: #4C4C4C;;
+    text-align: right;
+    border: 1px solid #999999;
+    // border: 1px solid #DDD;
+    border-radius: 50px;
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+    // box-shadow: 0 0 10px rgb(82 81 144 / 38%);
+}
+
+.onoffswitch-switch {
+    display: block; 
+    width: 25px; 
+    margin: 2px;
+    background: #999999;
+    position: absolute; top: 0; bottom: 0;
+    right: 105px;
+    // border: 1px solid #999999; 
+    border-radius: 20px;
+    transition: all 0.3s ease-in 0s; 
+}
+
+// .onoffswitch-switch:after {
+//     display: block; 
+//     background: #999999!important;
+// }
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+    margin-left: 0;
+    // border: 1px solid #999999;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+    right: 0px; 
+    background: #4CAE4C;
+    // border: 1px solid #999999;
+   
 }
\ No newline at end of file
diff --git a/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.html b/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.html
index 55e4afb..e236936 100644
--- a/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.html
+++ b/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.html
@@ -26,21 +26,28 @@
             </div>
              <div class="field mb-1">
                 <label for="name-field" class="mr2">All-day Availability</label>
-                <label class="switch" >
+                <!-- <label class="switch" >
                     <input class="switch-input" type="checkbox" (click)="toggle()" id="bt" />
                     <span class="switch-label" data-on="On" data-off="Off"></span> 
                     <span class="switch-handle"></span> 
-                </label>
+                </label> -->
+                <div class="onoffswitch">
+                  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked >
+                  <label class="onoffswitch-label" for="myonoffswitch" (click)="toggle()" id="bt" >
+                      <span class="onoffswitch-inner"></span>
+                      <span class="onoffswitch-switch"></span>
+                  </label>
+              </div>
             </div>
  
-             <div class="field mb-1">
+             <div class="field">
                 <label for="name-field" class="label-container">From</label>
                 <mat-form-field appearance="outline"class="mate" >
                    <input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel">
                    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                  </mat-form-field>
-                <mat-form-field appearance="outline" class="mate date-marge"  *ngIf="show">
+                <mat-form-field appearance="outline" class="mates date-marge"  *ngIf="show">
                    <input class="time-align" type="time" matInput name="from-time" min="09:00" max="18:00"  ngModel #timeRef="ngModel">
                 </mat-form-field>
              </div>
@@ -52,7 +59,7 @@
                    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                  </mat-form-field>
-                <mat-form-field appearance="outline" class="mate date-marge"  *ngIf="show">
+                <mat-form-field appearance="outline" class="mates date-marge"  *ngIf="show">
                    <input class="time-align" type="time" matInput name="to-time" min="09:00" max="18:00"  ngModel #timesRef="ngModel">
                 </mat-form-field>
              </div>
diff --git a/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.scss b/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.scss
index 220a37d..6c296dc 100644
--- a/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.scss
+++ b/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.scss
@@ -21,6 +21,7 @@
     .label-container{
         margin-right: 8rem;
         margin-left: 1.5rem;
+        color: #666;
     }
     // .outline{
     //     width: 18%;
@@ -28,6 +29,12 @@
     .mate{
         width: 16% !important;
     }
+    .mates{
+        width: 16% !important;
+        ::ng-deep .mat-form-field-outline {
+            width: 115%!important;
+        }
+    }
     .date-marge{
         margin-left: 4.5rem;
     }
@@ -38,10 +45,12 @@
     .mr-8{
         margin-right: 7rem;
         margin-left: 1.5rem;
+        color: #666;
     }
     .mr2{
         margin-right: 3rem;
         margin-left: 1.5rem;
+        color: #666;
     }
     .cancel {
         background: #F5F5F5;
@@ -100,23 +109,23 @@
 }
 ::ng-deep .mat-icon-button {
     margin-right: -3rem;
-    margin-top: -12px;
-    padding-top: 10px;
+    // margin-top: -12px;
+    // padding-top: 10px;
+}
+::ng-deep .mat-slide-toggle-bar {
+    width: 50px;
+    height: 20px;
 }
-// ::ng-deep .mat-slide-toggle-bar {
-//     border-radius: 20px!important ;
-//     width: 80px!important;
-//     height: 35px!important;
-// }
-
 .form-control{
     padding: 10px;
     border-radius: 5px;
+    // border: 1px solid #666;
     border: 1px solid rgba(0, 0, 0, 0.12);
 }
 .container-to{
     margin-right: 9rem;
     margin-left: 1.5rem;
+    color: #666;
 }
 ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
     padding: 0em 0 1em 0;
@@ -125,7 +134,7 @@
     display: flex;
 }
 .popup-button{
-    margin-top: 3rem;
+    margin-top: 7rem;
 }
 .example-h2 {
     margin: 10px;
@@ -142,120 +151,199 @@
   .example-margin {
     margin: 0 10px!important;
     margin-left: 25px!important;
+    color: #666;
   }
 .mat-radio{
     margin-left: 6rem;
 }
 .time-align{
-    padding-top: 10px!important;
+    padding-top: 10px !important;
+    font-size: 20px;
+    padding-left: 10px;
 }
 
 //switch
 
-.switch {
-	position: relative;
-	display: block;
-	// vertical-align: top;
-	width: 100px;
-	height: 30px;
-	padding: 3px;
-	margin: 0 10px 10px 0;
-	// background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
-	// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
-	border-radius: 18px;
-	// box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
-	cursor: pointer;
-	box-sizing:content-box;
-}
-.switch-input {
-	position: absolute;
-	top: 0;
-	left: 0;
-	opacity: 0;
-	box-sizing:content-box;
-}
-.switch-label {
-	position: relative;
-	display: block;
-	height: inherit;
-	font-size: 10px;
-	text-transform: uppercase;
-	// background: #eceeef;
-	border-radius: inherit;
-	// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
-	border: 1px solid #4CAE4C;
-    box-sizing:content-box;
-}
-.switch-label:before, .switch-label:after {
-	position: absolute;
-	top: 50%;
-	margin-top: -.5em;
-	line-height: 1;
-	-webkit-transition: inherit;
-	-moz-transition: inherit;
-	-o-transition: inherit;
-	transition: inherit;
-	box-sizing:content-box;
-}
-.switch-label:before {
-    // content: attr(data-off);
-	content: 'enable';
-	right: 11px;
-	color: #111111;
-	// text-shadow: 0 1px rgba(255, 255, 255, 0.5);
-}
-.switch-label:after {
-	// content: attr(data-on);
-    content: 'disable ';
-	left: 11px;
-	color: #111111;
-	// text-shadow: 0 1px rgba(0, 0, 0, 0.2);
-	opacity: 0;
-}
-.switch-input:checked ~ .switch-label {
-	background: #FFFFFF;
-	// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
-}
-.switch-input:checked ~ .switch-label:before {
-	opacity: 0;
-}
-.switch-input:checked ~ .switch-label:after {
-	opacity: 1;
-}
-.switch-handle {
-	position: absolute;
-	top: 4px;
-	left: 4px;
-	width: 28px;
-	height: 28px;
-	// background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
-	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
-	border-radius: 100%;
-	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
-}
-.switch-handle:before {
-	content: "";
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	margin: -6px 0 0 -6px;
-	width: 12px;
-	height: 12px;
-	// background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
-	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
-	border-radius: 6px;
-	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
-}
-.switch-input:checked ~ .switch-handle {
-	left: 74px;
-	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
-}
+// .switch {
+// 	position: relative;
+// 	display: block;
+// 	// vertical-align: top;
+// 	width: 100px;
+// 	height: 30px;
+// 	padding: 3px;
+// 	margin: 0 10px 10px 0;
+// 	// background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
+// 	// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
+// 	border-radius: 18px;
+// 	// box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
+// 	cursor: pointer;
+// 	box-sizing:content-box;
+// }
+// .switch-input {
+// 	position: absolute;
+// 	top: 0;
+// 	left: 0;
+// 	opacity: 0;
+// 	box-sizing:content-box;
+// }
+// .switch-label {
+// 	position: relative;
+// 	display: block;
+// 	height: inherit;
+// 	font-size: 10px;
+// 	text-transform: uppercase;
+// 	// background: #eceeef;
+// 	border-radius: inherit;
+// 	// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
+// 	border: 1px solid #4CAE4C;
+//     box-sizing:content-box;
+// }
+// .switch-label:before, .switch-label:after {
+// 	position: absolute;
+// 	top: 50%;
+// 	margin-top: -.5em;
+// 	line-height: 1;
+// 	-webkit-transition: inherit;
+// 	-moz-transition: inherit;
+// 	-o-transition: inherit;
+// 	transition: inherit;
+// 	box-sizing:content-box;
+// }
+// .switch-label:before {
+//     // content: attr(data-off);
+// 	content: 'enable';
+// 	right: 11px;
+// 	color: #111111;
+// 	// text-shadow: 0 1px rgba(255, 255, 255, 0.5);
+// }
+// .switch-label:after {
+// 	// content: attr(data-on);
+//     content: 'disable ';
+// 	left: 11px;
+// 	color: #111111;
+// 	// text-shadow: 0 1px rgba(0, 0, 0, 0.2);
+// 	opacity: 0;
+// }
+// .switch-input:checked ~ .switch-label {
+// 	background: #FFFFFF;
+// 	// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
+// }
+// .switch-input:checked ~ .switch-label:before {
+// 	opacity: 0;
+// }
+// .switch-input:checked ~ .switch-label:after {
+// 	opacity: 1;
+// }
+// .switch-handle {
+// 	position: absolute;
+// 	top: 4px;
+// 	left: 4px;
+// 	width: 28px;
+// 	height: 28px;
+// 	// background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
+// 	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
+// 	border-radius: 100%;
+// 	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+// }
+// .switch-handle:before {
+// 	content: "";
+// 	position: absolute;
+// 	top: 50%;
+// 	left: 50%;
+// 	margin: -6px 0 0 -6px;
+// 	width: 12px;
+// 	height: 12px;
+// 	// background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
+// 	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
+// 	border-radius: 6px;
+// 	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
+// }
+// .switch-input:checked ~ .switch-handle {
+// 	left: 74px;
+// 	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
+// }
  
-/* Transition
-========================== */
-.switch-label, .switch-handle {
-	transition: All 0.3s ease;
-	-webkit-transition: All 0.3s ease;
-	-moz-transition: All 0.3s ease;
-	-o-transition: All 0.3s ease;
+// /* Transition
+// ========================== */
+// .switch-label, .switch-handle {
+// 	transition: All 0.3s ease;
+// 	-webkit-transition: All 0.3s ease;
+// 	-moz-transition: All 0.3s ease;
+// 	-o-transition: All 0.3s ease;
+// }
+
+.onoffswitch {
+    position: relative; 
+    width: 135px;
+    // -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+}
+.onoffswitch-checkbox {
+    display: none;
+}
+.onoffswitch-label {
+    display: block; 
+    overflow: hidden; 
+    cursor: pointer;
+    // border: 2px solid #4CAE4C;
+     border-radius: 20px;
+}
+.onoffswitch-inner {
+    display: block;
+     width: 200%;
+     margin-left: -100%;
+    // transition: margin 0.3s ease-in 0s;
+   
+}
+.onoffswitch-inner:before, .onoffswitch-inner:after {
+    display: block; 
+    float: left;
+     width: 50%;
+      height: 30px;
+       padding: 0;
+    line-height: 30px;
+    font-size: 12px; 
+    color: white; 
+    box-sizing: border-box;
+}
+.onoffswitch-inner:before {
+    content: " Enable";
+    padding-left: 10px;
+    background-color: #FFFFFF; color: #4C4C4C;
+    border: 1px solid #4CAE4C;
+    border-radius: 50px;
+}
+.onoffswitch-inner:after {
+    content: "Disable";
+    padding-right: 10px;
+    background-color: #FFFFFF; color: #4C4C4C;;
+    text-align: right;
+    border: 1px solid #999999;
+    border-radius: 50px;
+}
+
+.onoffswitch-switch {
+    display: block; 
+    width: 25px; 
+    margin: 2px;
+    background: #999999;
+    position: absolute; top: 0; bottom: 0;
+    right: 105px;
+    // border: 1px solid #999999; 
+    border-radius: 20px;
+    transition: all 0.3s ease-in 0s; 
+}
+
+// .onoffswitch-switch:after {
+//     display: block; 
+//     background: #999999!important;
+// }
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+    margin-left: 0;
+    // border: 1px solid #999999;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+    right: 0px; 
+    background: #4CAE4C;
+    // border: 1px solid #999999;
+   
 }
\ No newline at end of file
diff --git a/ng-seed/src/app/appoinment/user/add-user/add-user.component.html b/ng-seed/src/app/appoinment/user/add-user/add-user.component.html
index 007f2b6..b062322 100644
--- a/ng-seed/src/app/appoinment/user/add-user/add-user.component.html
+++ b/ng-seed/src/app/appoinment/user/add-user/add-user.component.html
@@ -58,12 +58,24 @@
         <mat-error *ngIf="myError('contactNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
         <mat-error *ngIf="myError('contactNo', 'maxlength')">Limit exceed</mat-error>
      </mat-form-field>
-      <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+      <!-- <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
         <mat-label>Password</mat-label>
         <input placeholder="Password" matInput  formControlName="password">
         <mat-error *ngIf="myError('password', 'required')">Password is required</mat-error>
         <mat-error *ngIf="myError('password', 'maxlength')">Limit exceed</mat-error>
-      </mat-form-field>  
+      </mat-form-field>   -->
+
+      <mat-form-field appearance="outline" class="mat-pane user-mate">
+        <mat-label>Password</mat-label>
+        <input matInput type="password" placeholder="Password" formControlName="password" [type]="hide ? 'password' : 'text'" name="password">    
+        <mat-error *ngIf="!form.get('password')?.errors?.required">
+          Password length must be greater than or equal to 8 and password must contain one or more uppercase ,
+           lowercase , numeric and special characters
+        </mat-error>
+        <mat-error *ngIf="form.get('password')?.invalid && (form.get('password')?.dirty || form.get('password')?.touched) && form.get('password')?.errors?.required">
+          Password is required
+        </mat-error>
+      </mat-form-field>
 
       <img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/>
       <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/>
diff --git a/ng-seed/src/app/appoinment/user/add-user/add-user.component.scss b/ng-seed/src/app/appoinment/user/add-user/add-user.component.scss
index 8da8901..2cd81c4 100644
--- a/ng-seed/src/app/appoinment/user/add-user/add-user.component.scss
+++ b/ng-seed/src/app/appoinment/user/add-user/add-user.component.scss
@@ -59,4 +59,12 @@ input[type=file]::file-selector-button {
   .imgSizeValidation{
     color: red;
     font-family: ui-serif;
+  }
+  .user-mate{
+    ::ng-deep .mat-form-field-subscript-wrapper {
+       position: inherit!important; 
+      box-sizing: border-box;
+      width: 100%;
+      overflow: hidden;
+    }
   }
\ No newline at end of file
diff --git a/ng-seed/src/app/appoinment/user/add-user/add-user.component.ts b/ng-seed/src/app/appoinment/user/add-user/add-user.component.ts
index fd16b1e..b61d4ca 100644
--- a/ng-seed/src/app/appoinment/user/add-user/add-user.component.ts
+++ b/ng-seed/src/app/appoinment/user/add-user/add-user.component.ts
@@ -58,7 +58,10 @@ export class AddUserComponent implements OnInit {
     email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
       '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
     ),]),
-    password: new FormControl('', [Validators.required, Validators.minLength(6)]),
+    // password: new FormControl('', [Validators.required, Validators.minLength(6)]),
+      password: new FormControl('', [Validators.required,Validators.pattern(
+        '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$'
+      )]),
     logo: new FormControl('', null),
     // confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)]),
     createdBy:new FormControl(userrole,null),