diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d0bca2dfd..c1259c812 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -84,6 +84,7 @@ import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
 import { TechnologyReportTableComponent } from './modules/technology-report/components/technology-report-table/technology-report-table.component';
 import { TechnologyReportComponent } from './modules/technology-report/pages/technology-report.component';
 import { CalendarComponent } from './modules/time-entries/components/calendar/calendar.component';
+import { DropdownComponent } from './modules/shared/components/dropdown/dropdown.component';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -137,6 +138,7 @@ const maskConfig: Partial<IConfig> = {
     TechnologyReportComponent,
     TechnologyReportTableComponent,
     CalendarComponent,
+    DropdownComponent,
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),
diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.html b/src/app/modules/activities-management/components/activity-list/activity-list.component.html
index 827993b28..457f0e0ce 100644
--- a/src/app/modules/activities-management/components/activity-list/activity-list.component.html
+++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.html
@@ -19,17 +19,10 @@
           </button>
         </td>
         <td class="col-2 text-center">
-          <button
-            class="btn btn-sm btn--switch"
-            data-toggle="modal"
-            data-target="#deleteModal"
-            [ngClass]="activity.btnColor"
-            (click)="changeOperation(activity)">
-            <em class="fa" [ngClass]="[activity.btnIcon, activity.iconColor]"></em>
-            {{ activity.btnName }}
-            <em class="fa iconTwo" [ngClass]="activity.btnIconTwo"></em>
-            <span *ngIf="activity._status">&nbsp;</span>
-          </button>
+            <app-dropdown
+              [info] = "activity"
+              (updateInfo) = "changeOperation($event)"
+            > </app-dropdown>
         </td>
       </tr>
     </tbody>
@@ -43,7 +36,7 @@
   tabindex="-1"
   role="dialog"
   aria-hidden="true"
-  [title]="'Archive Activity'"
+  [title]="'Inactive Activity'"
   [body]="message"
   (closeModalEvent)="deleteActivity()"
 >
diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.scss b/src/app/modules/activities-management/components/activity-list/activity-list.component.scss
index 4a2f8e068..5dd97fc35 100644
--- a/src/app/modules/activities-management/components/activity-list/activity-list.component.scss
+++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.scss
@@ -2,13 +2,6 @@
 
 .activity-list {
   overflow: auto;
-}
-.btn--switch{
-  font-size: 1rem;
-  border: 1px solid #c5c5c5;
-  border-radius: 20px;
+
 }
 
-.iconTwo{
-  color: #a1a1a1;
-}
\ No newline at end of file
diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts b/src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts
index e9cdea300..5235f5cd9 100644
--- a/src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts
+++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts
@@ -24,7 +24,7 @@ describe('ActivityListComponent', () => {
       _status: false,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo:  'fa-caret-down',
+      btnIconTwo:  'fa-check',
       btnName: 'Active',
       iconColor: 'text-success'
     },
@@ -33,7 +33,7 @@ describe('ActivityListComponent', () => {
       _status: true,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo:  'fa-caret-up',
+      btnIconTwo:  'fa-check',
       btnName: 'Inactive',
       iconColor: 'text-danger'
     },
@@ -107,8 +107,8 @@ describe('ActivityListComponent', () => {
     expect(store.dispatch).toHaveBeenCalledWith(new UnarchiveActivity('id'));
   });
 
-  it('openModal should set on true and display \"Are you sure you want to archive activity\"', () => {
-    const message = 'Are you sure you want to archive activity name?';
+  it('openModal should set on true and display \"Are you sure you want to inactive activity\"', () => {
+    const message = 'Are you sure you want to inactive activity name?';
     const itemData = {
       id: '1',
       name: 'name',
@@ -136,7 +136,9 @@ describe('ActivityListComponent', () => {
       _status: true,
       btnColor: 'btn-primary',
       btnIcon: 'fa-arrow-circle-up',
+      btnIconTwo:  'fa-check',
       btnName: 'Active',
+      iconColor: 'text-danger'
     };
 
     spyOn(component, 'unarchiveActivity');
@@ -154,7 +156,9 @@ describe('ActivityListComponent', () => {
       _status: false,
       btnColor: 'btn-danger',
       btnIcon: 'fa-arrow-circle-down',
+      btnIconTwo:  'fa-caret-check',
       btnName: 'Archive',
+      iconColor: 'text-success'
     };
 
     spyOn(component, 'openModal');
diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.ts b/src/app/modules/activities-management/components/activity-list/activity-list.component.ts
index d798be554..411afc2c3 100644
--- a/src/app/modules/activities-management/components/activity-list/activity-list.component.ts
+++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.ts
@@ -30,7 +30,7 @@ export class ActivityListComponent implements OnInit {
       _status: false,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo: 'fa-caret-down',
+      btnIconTwo: 'fa-check',
       btnName: 'Active',
       iconColor: 'text-success'
     }, {
@@ -38,7 +38,7 @@ export class ActivityListComponent implements OnInit {
       _status: true,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo:  'fa-caret-up',
+      btnIconTwo:  'fa-check',
       btnName: 'Inactive',
       iconColor: 'text-danger'
     }];
@@ -74,7 +74,7 @@ export class ActivityListComponent implements OnInit {
   }
 
   openModal(item: Activity): void {
-    this.message = `Are you sure you want to archive activity ${item.name}?`;
+    this.message = `Are you sure you want to inactive activity ${item.name}?`;
     this.showModal = true;
   }
 
diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html
index a74a69c6d..365baf5ed 100644
--- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html
+++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html
@@ -29,16 +29,10 @@
           </button>
         </td>
         <td class="col-2 text-center">
-          <button 
-          class="btn btn-sm btn--switch"
-          data-toggle="modal" 
-          data-target="#deleteModal"
-          [ngClass]="customer.btnColor"
-          (click)="switchStatus(customer)">
-            <em class="fa" [ngClass]="[customer.btnIcon, customer.iconColor]" ></em>
-            {{customer.btnName}}
-            <em class="fa iconTwo" [ngClass]="customer.btnIconTwo"></em>
-          </button>
+          <app-dropdown
+              [info] = "customer"
+              (updateInfo) = "switchStatus($event)"
+            > </app-dropdown>
         </td>
       </tr>
     </tbody>
@@ -52,7 +46,7 @@
   tabindex="-1"
   role="dialog"
   aria-hidden="true"
-  [title]="'Delete Customer'"
+  [title]="'Inactive Customer'"
   [body]="message"
   (closeModalEvent)="deleteCustomer()"
 >
diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss
index 417a9576b..e69de29bb 100644
--- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss
+++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss
@@ -1,9 +0,0 @@
-.btn--switch {
-    font-size: 1rem;
-    border: 1px solid #c5c5c5;
-    border-radius: 20px;
-}
-
-.iconTwo {
-    color: #a1a1a1;
-}
diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts
index f04bcb14a..7a792992a 100644
--- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts
+++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts
@@ -36,7 +36,7 @@ describe('CustomerTableListComponent', () => {
       _status: false,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo:  'fa-caret-down',
+      btnIconTwo:  'fa-check',
       btnName: 'Active',
       iconColor: 'text-success'
     },
@@ -45,7 +45,7 @@ describe('CustomerTableListComponent', () => {
       _status: true,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo:  'fa-caret-up',
+      btnIconTwo:  'fa-check',
       btnName: 'Inactive',
       iconColor: 'text-danger'
     },
@@ -220,7 +220,7 @@ describe('CustomerTableListComponent', () => {
   });
 
   it('openModal should set on true and display "Are you sure you want to archive customer"', () => {
-    const message = 'Are you sure you want to archive name?';
+    const message = 'Are you sure you want to inactive name?';
     const itemData = {
       id: '1',
       name: 'name',
@@ -248,7 +248,9 @@ describe('CustomerTableListComponent', () => {
       _status: false,
       btnColor: 'btn-danger',
       btnIcon: 'fa-arrow-circle-down',
+      btnIconTwo:  'fa-caret-check',
       btnName: 'Archive',
+      iconColor: 'text-success'
     };
 
     spyOn(component, 'openModal');
@@ -266,7 +268,9 @@ describe('CustomerTableListComponent', () => {
       _status: true,
       btnColor: 'btn-primary',
       btnIcon: 'fa-arrow-circle-up',
+      btnIconTwo:  'fa-check',
       btnName: 'Active',
+      iconColor: 'text-danger'
     };
 
     component.switchStatus(itemData);
diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts
index c9c18d8da..869cb6bff 100644
--- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts
+++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts
@@ -55,7 +55,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
         _status: false,
         btnColor: 'btn-white',
         btnIcon: 'fa-circle',
-        btnIconTwo:  'fa-caret-down',
+        btnIconTwo:  'fa-check',
         btnName: 'Active',
         iconColor: 'text-success'
       },
@@ -64,7 +64,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
         _status: true,
         btnColor: 'btn-white',
         btnIcon: 'fa-circle',
-        btnIconTwo:  'fa-caret-up',
+        btnIconTwo:  'fa-check',
         btnName: 'Inactive',
         iconColor: 'text-danger'
       },
@@ -176,7 +176,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
 
   openModal(item: Customer) {
     this.idToDelete = item.id;
-    this.message = `Are you sure you want to archive ${item.name}?`;
+    this.message = `Are you sure you want to inactive ${item.name}?`;
     this.showModal = true;
   }
 
diff --git a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html
index 08485e452..1e5c092f0 100644
--- a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html
+++ b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html
@@ -20,18 +20,10 @@
           </button>
         </td>
         <td class="col-sm-2 text-center">
-          <button
-          class="btn btn-sm btn--switch"
-          data-toggle="modal"
-          data-target="#deleteModal"
-          [ngClass]="project.btnColor"
-          (click)="switchStatus(project)"
-          >
-          <em class="fa" [ngClass]="[project.btnIcon, project.iconColor]"></em>
-          {{project.btnName}}
-          <em class="fa iconTwo" [ngClass]="project.btnIconTwo"></em>
-
-          </button>
+          <app-dropdown
+            [info] = "project"
+            (updateInfo) = "switchStatus($event)"> 
+          </app-dropdown>
         </td>
       </tr>
     </tbody>
@@ -45,7 +37,7 @@
   tabindex="-1"
   role="dialog"
   aria-hidden="true"
-  [title]="'Archive Project'"
+  [title]="'Inactive Project'"
   [body]="message"
   (closeModalEvent)="deleteProject()"
 >
diff --git a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.spec.ts b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.spec.ts
index 2975eb7d0..e9ecc59d2 100644
--- a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.spec.ts
+++ b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.spec.ts
@@ -34,7 +34,7 @@ describe('ProjectListComponent', () => {
       _status: false,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo:  'fa-caret-down',
+      btnIconTwo:  'fa-check',
       btnName: 'Active',
       iconColor: 'text-success'
     },
@@ -43,7 +43,7 @@ describe('ProjectListComponent', () => {
       _status: true,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo:  'fa-caret-up',
+      btnIconTwo:  'fa-check',
       btnName: 'Inactive',
       iconColor: 'text-danger'
     },
@@ -140,7 +140,9 @@ describe('ProjectListComponent', () => {
       _status: false,
       btnColor: 'btn-danger',
       btnIcon: 'fa-arrow-circle-down',
+      btnIconTwo:  'fa-caret-check',
       btnName: 'Archive',
+      iconColor: 'text-success'
     };
 
     spyOn(component, 'openModal');
@@ -159,7 +161,9 @@ describe('ProjectListComponent', () => {
       _status: true,
       btnColor: 'btn-primary',
       btnIcon: 'fa-arrow-circle-up',
+      btnIconTwo:  'fa-check',
       btnName: 'Active',
+      iconColor: 'text-danger'
     };
 
     component.switchStatus(itemData);
@@ -177,7 +181,9 @@ describe('ProjectListComponent', () => {
       _status: false,
       btnColor: 'btn-danger',
       btnIcon: 'fa-arrow-circle-down',
+      btnIconTwo:  'fa-caret-check',
       btnName: 'Archive',
+      iconColor: 'text-success'
     };
 
     component.openModal(itemData);
diff --git a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.ts b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.ts
index 9a0b720c5..643083906 100644
--- a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.ts
+++ b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.ts
@@ -6,7 +6,6 @@ import { ProjectState } from '../store/project.reducer';
 import { getCustomerProjects } from '../store/project.selectors';
 import * as actions from '../store/project.actions';
 import { ProjectUI } from '../../../../../shared/models/project.model';
-import {  ProjectTypeState } from '../../../projects-type/store';
 import { ProjectType } from 'src/app/modules/shared/models';
 
 @Component({
@@ -30,7 +29,6 @@ export class ProjectListComponent implements OnInit, OnDestroy {
 
   constructor(
     private store: Store<ProjectState>,
-    private projectTypeStore: Store<ProjectTypeState>
   ) {}
 
   ngOnInit(): void {
@@ -40,7 +38,7 @@ export class ProjectListComponent implements OnInit, OnDestroy {
         _status: false,
         btnColor: 'btn-white',
         btnIcon: 'fa-circle',
-        btnIconTwo:  'fa-caret-down',
+        btnIconTwo:  'fa-caret-check',
         btnName: 'Active',
         iconColor: 'text-success'
       },
@@ -49,7 +47,7 @@ export class ProjectListComponent implements OnInit, OnDestroy {
         _status: true,
         btnColor: 'btn-white',
         btnIcon: 'fa-circle',
-        btnIconTwo:  'fa-caret-up',
+        btnIconTwo: 'fa-check',
         btnName: 'Inactive',
         iconColor: 'text-danger'
       },
@@ -83,7 +81,7 @@ export class ProjectListComponent implements OnInit, OnDestroy {
 
   openModal(item: ProjectUI) {
     this.idToDelete = item.id;
-    this.message = `Are you sure you want archive ${item.name}?`;
+    this.message = `Are you sure you want Inactive ${item.name}?`;
     this.showModal = true;
   }
 
diff --git a/src/app/modules/shared/components/dropdown/dropdown.component.html b/src/app/modules/shared/components/dropdown/dropdown.component.html
new file mode 100644
index 000000000..3b0dc9c96
--- /dev/null
+++ b/src/app/modules/shared/components/dropdown/dropdown.component.html
@@ -0,0 +1,20 @@
+<button class="btn btn-sm dropdown-toggle btn--switch" type="button" data-toggle="dropdown" aria-haspopup="true"
+    aria-expanded="false" [ngClass]="info.btnColor"
+    (click)=changePropertiesItem(info)>
+    <em class="fa" [ngClass]="[info.btnIcon, info.iconColor]"></em>
+    {{ info.btnName }}
+    <span *ngIf="info._status">&nbsp;</span>
+</button>
+<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <div class="container-description-status dropdown-item">
+        <em class="fa icon" [ngClass]="[info.btnIcon, info.iconColor]"></em>
+        <p class=" description"> {{ info.btnName }}</p>
+        <em class="fa icon iconTwo" [ngClass]="info.btnIconTwo"></em>
+    </div>
+    <div class="dropdown-divider"></div>
+    <div class="container-description-status dropdown-item" *ngIf="dataChange !== undefined" data-toggle="modal"
+        data-target="#deleteModal" (click)=changeOperation(info)>
+        <em class="fa icon" [ngClass]="[dataChange.btnIcon, dataChange.iconColor]"></em>
+        <p class=" description">{{ dataChange.btnName }} </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/shared/components/dropdown/dropdown.component.scss b/src/app/modules/shared/components/dropdown/dropdown.component.scss
new file mode 100644
index 000000000..21129ac09
--- /dev/null
+++ b/src/app/modules/shared/components/dropdown/dropdown.component.scss
@@ -0,0 +1,29 @@
+@import '../../../../../styles/colors.scss';
+
+.btn--switch {
+    font-size: 1rem;
+    border: 1px solid #c5c5c5;
+    border-radius: 20px;
+}
+
+.iconTwo {
+    color: #a1a1a1;
+    text-align: center;
+}
+
+.container-description-status {
+    display: flex;
+    flex: wrap;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.icon {
+    flex: 0 0 20%;
+}
+
+.description {
+    flex: 0 0 60%;
+    padding: 0;
+    margin: 0;
+}
diff --git a/src/app/modules/shared/components/dropdown/dropdown.component.spec.ts b/src/app/modules/shared/components/dropdown/dropdown.component.spec.ts
new file mode 100644
index 000000000..31c2c9aff
--- /dev/null
+++ b/src/app/modules/shared/components/dropdown/dropdown.component.spec.ts
@@ -0,0 +1,109 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { DropdownComponent } from './dropdown.component';
+
+describe('DropdownComponent', () => {
+  let component: DropdownComponent;
+  let fixture: ComponentFixture<DropdownComponent>;
+  let fakeInfo: any;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DropdownComponent ]
+    })
+    .compileComponents();
+
+    fakeInfo = {
+      id: 'fake',
+      name: 'fake',
+      description: 'fake',
+      tenant_id: '',
+      status: '',
+      key: 'active',
+      _status: false,
+      btnColor: 'btn-white',
+      btnIcon: 'fa-circle',
+      btnIconTwo:  'fa-caret-check',
+      btnName: 'Active',
+      iconColor: 'text-success'
+    };
+
+    fixture = TestBed.createComponent(DropdownComponent);
+    component = fixture.componentInstance;
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit the item when clicked in method changeOperation', () => {
+    spyOn(component.updateInfo, 'emit');
+    component.info = fakeInfo;
+
+    fixture.detectChanges();
+    component.changeOperation(fakeInfo);
+
+    expect(component.updateInfo.emit).toHaveBeenCalled();
+  });
+
+  it('should changed properties of item when is Active', () => {
+    const fakeInfoActive = {
+      id: 'fake',
+      name: 'fake',
+      description: 'fake',
+      tenant_id: '',
+      status: '',
+      key: 'active',
+      _status: true,
+      btnColor: 'btn-white',
+      btnIcon: 'fa-circle',
+      btnIconTwo:  'fa-caret-check',
+      btnName: 'Active',
+      iconColor: 'text-success'
+    };
+    const expectChangeValue = {
+      btnName: 'Inactive',
+      btnIcon: 'fa-circle',
+      iconColor: 'text-danger'
+    };
+    component.info = fakeInfoActive;
+
+    component.changePropertiesItem(fakeInfoActive);
+
+    expect(expectChangeValue.btnName).toEqual('Inactive');
+    expect(fakeInfoActive.btnIcon).toEqual(expectChangeValue.btnIcon);
+    expect(expectChangeValue.iconColor).toEqual('text-danger');
+  });
+
+  it('should change properties of item when is Inactive', () => {
+    const fakeInfoInactive = {
+      id: 'fake',
+      name: 'fake',
+      description: 'fake',
+      tenant_id: '',
+      status: '',
+      key: 'active',
+      _status: true,
+      btnColor: 'btn-white',
+      btnIcon: 'fa-circle',
+      btnIconTwo:  'fa-caret-check',
+      btnName: 'Inactive',
+      iconColor: 'text-danger'
+    };
+    const expectChangeValue = {
+      btnName: 'Active',
+      btnIcon: 'fa-circle',
+      iconColor: 'text-success'
+    };
+    component.info = fakeInfoInactive;
+
+    component.changePropertiesItem(fakeInfoInactive);
+
+    expect(expectChangeValue.btnName).toEqual('Active');
+    expect(fakeInfoInactive.btnIcon).toEqual(expectChangeValue.btnIcon);
+    expect(expectChangeValue.iconColor).toEqual('text-success');
+
+  });
+});
+
+
+
diff --git a/src/app/modules/shared/components/dropdown/dropdown.component.ts b/src/app/modules/shared/components/dropdown/dropdown.component.ts
new file mode 100644
index 000000000..7dfe538a0
--- /dev/null
+++ b/src/app/modules/shared/components/dropdown/dropdown.component.ts
@@ -0,0 +1,46 @@
+import { Output, Component, EventEmitter, Input, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-dropdown',
+  templateUrl: './dropdown.component.html',
+  styleUrls: ['./dropdown.component.scss']
+})
+export class DropdownComponent {
+
+  @Input() info: any;
+  @Output() updateInfo: EventEmitter<any> = new EventEmitter();
+
+  dataChange: any = {
+    id: '',
+    name: '',
+    description: '',
+    tenant_id: '',
+    status: '',
+    key: '',
+    _status: false,
+    btnColor: '',
+    btnIcon: '',
+    btnIconTwo: '',
+    btnName: '',
+    iconColor: ''
+  };
+
+  changePropertiesItem(item: any){
+    if (item.btnName === 'Active'){
+      this.dataChange.btnName = 'Inactive';
+      this.dataChange.btnIcon = item.btnIcon;
+      this.dataChange.iconColor = 'text-danger';
+    }else{
+      this.dataChange.btnName = 'Active';
+      this.dataChange.btnIcon = item.btnIcon;
+      this.dataChange.iconColor = 'text-success';
+    }
+
+  }
+
+  changeOperation(item: any){
+    this.updateInfo.emit(item);
+
+  }
+}
diff --git a/src/app/modules/shared/components/index.ts b/src/app/modules/shared/components/index.ts
index 41d940e42..81c30d5f5 100644
--- a/src/app/modules/shared/components/index.ts
+++ b/src/app/modules/shared/components/index.ts
@@ -5,3 +5,5 @@ export * from './month-picker/month-picker.component';
 export * from './navbar/navbar.component';
 export * from './sidebar/sidebar.component';
 export * from './user/user.component';
+export * from './dropdown/dropdown.component';
+
diff --git a/src/app/modules/shared/models/activity.model.ts b/src/app/modules/shared/models/activity.model.ts
index d9fd4eb0c..d8c9332ff 100644
--- a/src/app/modules/shared/models/activity.model.ts
+++ b/src/app/modules/shared/models/activity.model.ts
@@ -14,9 +14,11 @@ export interface ActivityFront {
   status?: string;
   key: string;
   _status: boolean;
-  btnColor: string;
+  btnColor?: string;
   btnIcon: string;
+  btnIconTwo: string;
   btnName: string;
+  iconColor: string;
 }
 
 export interface ActivityStatus {
diff --git a/src/app/modules/shared/models/customer.model.ts b/src/app/modules/shared/models/customer.model.ts
index 42107c878..cfe704ed4 100644
--- a/src/app/modules/shared/models/customer.model.ts
+++ b/src/app/modules/shared/models/customer.model.ts
@@ -6,13 +6,17 @@ export interface Customer {
 }
 export interface CustomerUI {
   id?: string;
-  name?: string;
-  description?: string;
-  status?: any;
-  key?: string;
+  name: string;
+  description: string;
+  tenant_id?: string;
+  status?: string;
+  key: string;
+  _status: boolean;
   btnColor?: string;
-  btnIcon?: string;
-  btnName?: string;
+  btnIcon: string;
+  btnIconTwo: string;
+  btnName: string;
+  iconColor: string;
 }
 export interface Status {
   id: string;
diff --git a/src/app/modules/shared/models/project.model.ts b/src/app/modules/shared/models/project.model.ts
index 5a1c609d8..3c59e76c7 100644
--- a/src/app/modules/shared/models/project.model.ts
+++ b/src/app/modules/shared/models/project.model.ts
@@ -10,15 +10,16 @@ export interface Project {
   status?: any;
 }
 export interface ProjectUI {
-  id?: string;
-  customer_id?: string;
-  name?: string;
-  description?: string;
-  project_type_id?: string;
-  search_field?: string;
-  status?: any;
-  key?: string;
+  id: string;
+  name: string;
+  description: string;
+  tenant_id?: string;
+  status?: string;
+  key: string;
+  _status: boolean;
   btnColor?: string;
-  btnIcon?: string;
-  btnName?: string;
+  btnIcon: string;
+  btnIconTwo: string;
+  btnName: string;
+  iconColor: string;
 }