diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index fbf000e9d..4fdcfdbfb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -32,7 +32,9 @@ import { SearchProjectComponent } from './modules/shared/components/search-proje
 import { HomeComponent } from './modules/home/home.component';
 import { LoginComponent } from './modules/login/login.component';
 import { ActivityEffects } from './modules/activities-management/store/activity-management.effects';
-import { activityManagementReducer } from './modules/activities-management/store';
+import { ProjectEffects } from './modules/project-management/store/project.effects';
+import { reducers, metaReducers } from './reducers';
+import { environment } from '../environments/environment';
 
 @NgModule({
   declarations: [
@@ -68,11 +70,15 @@ import { activityManagementReducer } from './modules/activities-management/store
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
-    StoreModule.forRoot({ activities: activityManagementReducer }),
-    EffectsModule.forRoot([ActivityEffects]),
-    StoreDevtoolsModule.instrument({
-      maxAge: 15, // Retains last 15 states
+    StoreModule.forRoot(reducers, {
+      metaReducers,
     }),
+    !environment.production
+      ? StoreDevtoolsModule.instrument({
+          maxAge: 15, // Retains last 15 states
+        })
+      : [],
+    EffectsModule.forRoot([ProjectEffects, ActivityEffects]),
   ],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/src/app/modules/project-management/components/create-project/create-project.component.html b/src/app/modules/project-management/components/create-project/create-project.component.html
index 5f59426d4..83bad64fd 100644
--- a/src/app/modules/project-management/components/create-project/create-project.component.html
+++ b/src/app/modules/project-management/components/create-project/create-project.component.html
@@ -18,40 +18,23 @@ <h1 class="card-title">Project</h1>
     </div>
 
     <div class="form-group">
-      <label for="details">Details:</label>
+      <label for="description">Description:</label>
       <textarea
         class="form-control"
         rows="3"
-        id="details"
+        id="description"
         type="text"
-        formControlName="details"
-        [class.is-invalid]="details.invalid && details.touched"
+        formControlName="description"
+        [class.is-invalid]="description.invalid && description.touched"
         required
       ></textarea>
-      <p class="text-danger" *ngIf="(details.dirty || details.touched) && details.invalid && details.errors.required">
-        Project details are required.
+      <p
+        class="text-danger"
+        *ngIf="(description.dirty || description.touched) && description.invalid && description.errors.required"
+      >
+        Project description is required.
       </p>
     </div>
-
-    <div class="form-group">
-      <label for="status">Status:</label>
-      <select class="form-control" formControlName="status">
-        <option
-          *ngFor="let status of projectStatus"
-          [class.is-invalid]="status.invalid && status.touched"
-          [value]="status"
-          >{{ status }}</option
-        >
-      </select>
-      <p class="text-danger" *ngIf="(status.dirty || status.touched) && status.invalid && status.errors.required">
-        Project status is required.
-      </p>
-    </div>
-
-    <div class="form-group form-check" [hidden]="!projectToEdit">
-      <input type="checkbox" class="form-check-input" id="completedProject" formControlName="completed" />
-      <label class="form-check-label" for="completedProject">Completed project</label>
-    </div>
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group mr-2" role="group">
         <button class="btn save-button-style mb-2" type="submit" [disabled]="!projectForm.valid">Save</button>
diff --git a/src/app/modules/project-management/components/create-project/create-project.component.spec.ts b/src/app/modules/project-management/components/create-project/create-project.component.spec.ts
index 9bb897869..ade8f8f26 100644
--- a/src/app/modules/project-management/components/create-project/create-project.component.spec.ts
+++ b/src/app/modules/project-management/components/create-project/create-project.component.spec.ts
@@ -1,62 +1,106 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
+import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 
+import { ProjectState } from '../../store/project.reducer';
 import { CreateProjectComponent } from './create-project.component';
+import * as actions from '../../store/project.actions';
 
 describe('CreateProjectComponent', () => {
   let component: CreateProjectComponent;
   let fixture: ComponentFixture<CreateProjectComponent>;
+  let store: MockStore<ProjectState>;
+
+  const state = {
+    projectList: [{ id: 'id', name: 'name', description: 'description' }],
+    isLoading: false,
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CreateProjectComponent ],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule
-      ]
-    })
-    .compileComponents();
+      declarations: [CreateProjectComponent],
+      imports: [FormsModule, ReactiveFormsModule],
+      providers: [FormBuilder, provideMockStore({ initialState: state })],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CreateProjectComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    store = TestBed.inject(MockStore);
+    store.setState(state);
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should send the form data on onSubmit buton #onSubmit', () => {
+  it('should emit ngOnChange with projectToEdit', () => {
+    const newData = {
+      id: 'acf6a6c7-a24e-423c-8d1d-08505a82feae',
+      name: 'Project Test 13',
+      description: 'description',
+    };
+    component.projectToEdit = newData;
+
+    component.ngOnChanges();
+
+    expect(component.projectForm.value.name).toEqual(newData.name);
+    expect(component.projectForm.value.description).toEqual(newData.description);
+    expect(component.isUpdating).toEqual(true);
+  });
+
+  it('on ngOnChange with projectToEdit=null should reset projectForm', () => {
+    component.projectToEdit = null;
+
+    component.ngOnChanges();
+
+    expect(component.projectForm.value.name).toEqual(null);
+    expect(component.projectForm.value.description).toEqual(null);
+    expect(component.isUpdating).toEqual(false);
+  });
+
+  it('should dispatch CreateProject action #onSubmit if isUpdating=false', () => {
     const project = {
+      id: '1',
       name: 'app 4',
-      details: 'It is a good app',
-      status: 'inactive',
-      completed: true
+      description: 'It is a good app',
     };
+    component.isUpdating = false;
+    spyOn(store, 'dispatch');
 
-    spyOn(component.savedProject, 'emit');
     component.onSubmit(project);
-    expect(component.savedProject.emit).toHaveBeenCalled();
+
+    expect(store.dispatch).toHaveBeenCalledWith(new actions.CreateProject(project));
   });
 
-  it('should clean the form and send a cancelForm event #reset', () => {
+  it('should dispatch UpdateProject action #onSubmit if isUpdating=true', () => {
     const project = {
+      id: '1',
       name: 'app 4',
-      details: 'It is a good app',
-      status: 'inactive',
-      completed: true
+      description: 'It is a good app',
     };
+    component.isUpdating = true;
+    spyOn(store, 'dispatch');
+
+    component.onSubmit(project);
 
+    expect(store.dispatch).toHaveBeenCalledWith(new actions.UpdateProject(project));
+  });
+
+  it('should clean the form and emmit a cancelForm event on #reset', () => {
+    const project = {
+      name: 'app 4',
+      description: 'It is a good app',
+    };
     component.projectForm.setValue(project);
     spyOn(component.cancelForm, 'emit');
+
     component.reset();
-    expect(component.projectForm.value.name).toEqual(null);
-    expect(component.projectForm.value.details).toEqual(null);
-    expect(component.projectForm.value.status).toEqual(null);
-    expect(component.projectForm.value.completed).toEqual(null);
 
+    expect(component.projectForm.value.name).toEqual(null);
+    expect(component.projectForm.value.description).toEqual(null);
     expect(component.cancelForm.emit).toHaveBeenCalled();
   });
 
@@ -64,7 +108,7 @@ describe('CreateProjectComponent', () => {
     expect(component.projectForm.valid).toBeFalsy();
   });
 
-  it('name field validity', () => {
+  it('checks if name field is valid', () => {
     const name = component.projectForm.controls.name;
     expect(name.valid).toBeFalsy();
 
@@ -75,8 +119,8 @@ describe('CreateProjectComponent', () => {
     expect(name.hasError('required')).toBeFalsy();
   });
 
-  it('details field validity', () => {
-    const details = component.projectForm.controls.details;
+  it('checks if description field is valid', () => {
+    const details = component.projectForm.controls.description;
     expect(details.valid).toBeFalsy();
 
     details.setValue('');
@@ -85,16 +129,4 @@ describe('CreateProjectComponent', () => {
     details.setValue('A');
     expect(details.hasError('required')).toBeFalsy();
   });
-
-  it('status field validity', () => {
-    const status = component.projectForm.controls.status;
-    expect(status.valid).toBeFalsy();
-
-    status.setValue('');
-    expect(status.hasError('required')).toBeTruthy();
-
-    status.setValue('A');
-    expect(status.hasError('required')).toBeFalsy();
-  });
-
 });
diff --git a/src/app/modules/project-management/components/create-project/create-project.component.ts b/src/app/modules/project-management/components/create-project/create-project.component.ts
index 79b622a43..e352072e6 100644
--- a/src/app/modules/project-management/components/create-project/create-project.component.ts
+++ b/src/app/modules/project-management/components/create-project/create-project.component.ts
@@ -1,44 +1,39 @@
-import {
-  Component,
-  Input,
-  OnChanges,
-  Output,
-  EventEmitter
-} from '@angular/core';
+import { Component, Input, OnChanges, OnInit, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
 import { Project } from '../../../shared/models';
+import { ProjectState } from '../../store/project.reducer';
+import * as actions from '../../store/project.actions';
 
 @Component({
   selector: 'app-create-project',
   templateUrl: './create-project.component.html',
-  styleUrls: ['./create-project.component.scss']
+  styleUrls: ['./create-project.component.scss'],
 })
-export class CreateProjectComponent implements OnChanges {
-
+export class CreateProjectComponent implements OnChanges, OnInit {
   projectForm;
   editProjectId;
-  projectStatus = ['', 'Active', 'Inactive'];
+  isUpdating = false;
 
   @Input() projectToEdit: Project;
-  @Output() savedProject = new EventEmitter();
   @Output() cancelForm = new EventEmitter();
 
-  constructor(private formBuilder: FormBuilder) {
+  constructor(private formBuilder: FormBuilder, private store: Store<ProjectState>) {
     this.projectForm = this.formBuilder.group({
       name: ['', Validators.required],
-      details: ['', Validators.required],
-      status: ['', Validators.required],
-      completed: [false]
+      description: ['', Validators.required],
     });
   }
 
+  ngOnInit(): void {}
+
   ngOnChanges(): void {
     if (this.projectToEdit) {
-      this.editProjectId = this.projectToEdit.id;
-      this.projectForm.setValue({
-        name: this.projectToEdit.name, details: this.projectToEdit.details,
-        status: this.projectToEdit.status, completed: this.projectToEdit.completed
-      });
+      this.projectForm.patchValue(this.projectToEdit);
+      this.isUpdating = true;
+    } else {
+      this.projectForm.reset();
+      this.isUpdating = false;
     }
   }
 
@@ -46,21 +41,22 @@ export class CreateProjectComponent implements OnChanges {
     return this.projectForm.get('name');
   }
 
-  get details() {
-    return this.projectForm.get('details');
-  }
-
-  get status() {
-    return this.projectForm.get('status');
+  get description() {
+    return this.projectForm.get('description');
   }
 
-  onSubmit(projectData) {
+  onSubmit(formData) {
+    const projectData = { ...this.projectToEdit, ...formData };
+    if (this.isUpdating) {
+      this.store.dispatch(new actions.UpdateProject(projectData));
+    } else {
+      this.store.dispatch(new actions.CreateProject(projectData));
+    }
     this.reset();
-    this.savedProject.emit(projectData);
   }
+
   reset() {
     this.projectForm.reset();
     this.cancelForm.emit();
   }
-
 }
diff --git a/src/app/modules/project-management/components/project-list/project-list.component.html b/src/app/modules/project-management/components/project-list/project-list.component.html
index b98bc11b4..a95fdbaa4 100644
--- a/src/app/modules/project-management/components/project-list/project-list.component.html
+++ b/src/app/modules/project-management/components/project-list/project-list.component.html
@@ -16,7 +16,7 @@ <h2 class="mb-0">
                 {{ project.name }}
               </a>
               <div class="btn-group float-right" role="group">
-                <i (click)="editProject.emit(project.id)" class="far fa-edit btn btn-link text-white"></i>
+                <i (click)="editProject.emit(project)" class="far fa-edit btn btn-link text-white"></i>
                 <i
                   (click)="openModal(project)"
                   data-toggle="modal"
@@ -29,12 +29,8 @@ <h2 class="mb-0">
 
           <div [id]="'row' + rowIndex" class="collapse" data-parent="#accordionProject">
             <div class="card-body">
-              <h5>Details:</h5>
-              <p>{{ project.details }}</p>
-              <h5>Status:</h5>
-              <p>{{ project.status }}</p>
-              <h5>Completed project:</h5>
-              <p>{{ project.completed ? 'Yes' : 'No' }}</p>
+              <h5>Description:</h5>
+              <p>{{ project.description }}</p>
             </div>
           </div>
         </div>
diff --git a/src/app/modules/project-management/components/project-list/project-list.component.spec.ts b/src/app/modules/project-management/components/project-list/project-list.component.spec.ts
index 82394f593..22a02b5f3 100644
--- a/src/app/modules/project-management/components/project-list/project-list.component.spec.ts
+++ b/src/app/modules/project-management/components/project-list/project-list.component.spec.ts
@@ -1,16 +1,29 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
 
 import { ProjectListComponent } from './project-list.component';
+import { ProjectState } from '../../store/project.reducer';
+import { allProjects } from '../../store/project.selectors';
 import { FilterProjectPipe } from '../../../shared/pipes';
 
 describe('ProjectListComponent', () => {
   let component: ProjectListComponent;
   let fixture: ComponentFixture<ProjectListComponent>;
+  let store: MockStore<ProjectState>;
+  let mockProjectsSelector;
+
+  const state = {
+    projectList: [{ id: 'id', name: 'name', description: 'description' }],
+    isLoading: false,
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ProjectListComponent, FilterProjectPipe],
+      providers: [provideMockStore({ initialState: state })],
     }).compileComponents();
+    store = TestBed.inject(MockStore);
+    mockProjectsSelector = store.overrideSelector(allProjects, state);
   }));
 
   beforeEach(() => {
@@ -27,9 +40,7 @@ describe('ProjectListComponent', () => {
     const project = {
       id: '1',
       name: 'app 4',
-      details: 'It is a good app',
-      status: 'inactive',
-      completed: true,
+      description: 'It is a good app',
     };
 
     component.projectToDelete = project;
@@ -43,16 +54,12 @@ describe('ProjectListComponent', () => {
     const project = {
       id: '1',
       name: 'app 4',
-      details: 'It is a good app',
-      status: 'inactive',
-      completed: true,
+      description: 'It is a good app',
     };
 
     component.openModal(project);
     expect(component.projectToDelete.id).toBe('1');
     expect(component.projectToDelete.name).toBe('app 4');
-    expect(component.projectToDelete.details).toBe('It is a good app');
-    expect(component.projectToDelete.status).toBe('inactive');
-    expect(component.projectToDelete.completed).toBe(true);
+    expect(component.projectToDelete.description).toBe('It is a good app');
   });
 });
diff --git a/src/app/modules/project-management/components/project-list/project-list.component.ts b/src/app/modules/project-management/components/project-list/project-list.component.ts
index c1372d3e3..af399b2a5 100644
--- a/src/app/modules/project-management/components/project-list/project-list.component.ts
+++ b/src/app/modules/project-management/components/project-list/project-list.component.ts
@@ -1,5 +1,8 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Store, select } from '@ngrx/store';
 import { Project } from '../../../shared/models';
+import { allProjects } from '../../store/project.selectors';
+import * as actions from '../../store/project.actions';
 
 @Component({
   selector: 'app-project-list',
@@ -7,17 +10,27 @@ import { Project } from '../../../shared/models';
   styleUrls: ['./project-list.component.scss'],
 })
 export class ProjectListComponent implements OnInit {
-  @Input() projects: Project[] = [];
   @Output() editProject = new EventEmitter();
   @Output() deleteProject = new EventEmitter();
 
   projectToDelete: Project;
   openDeleteModal = false;
   filterProjects = '';
+  isLoading: boolean;
 
-  constructor() {}
+  projects: Project[] = [];
 
-  ngOnInit(): void {}
+  constructor(private store: Store<any>) {}
+
+  ngOnInit(): void {
+    this.store.dispatch(new actions.LoadProjects());
+    const projects$ = this.store.pipe(select(allProjects));
+
+    projects$.subscribe((response) => {
+      this.isLoading = response.isLoading;
+      this.projects = response.projectList;
+    });
+  }
 
   openModal(projectData) {
     this.projectToDelete = projectData;
diff --git a/src/app/modules/project-management/pages/project-management.component.html b/src/app/modules/project-management/pages/project-management.component.html
index 540d88b70..655071a7a 100644
--- a/src/app/modules/project-management/pages/project-management.component.html
+++ b/src/app/modules/project-management/pages/project-management.component.html
@@ -1,15 +1,5 @@
 <div class="parent">
-  <app-create-project
-    class="item"
-    [projectToEdit]="project"
-    (savedProject)="updateProject($event)"
-    (cancelForm)="cancelForm()"
-  ></app-create-project>
+  <app-create-project class="item" [projectToEdit]="project" (cancelForm)="cancelForm()"></app-create-project>
 
-  <app-project-list
-    class="item"
-    [projects]="projects"
-    (editProject)="editProject($event)"
-    (deleteProject)="deleteProject($event)"
-  ></app-project-list>
+  <app-project-list class="item" (editProject)="editProject($event)"></app-project-list>
 </div>
diff --git a/src/app/modules/project-management/pages/project-management.component.spec.ts b/src/app/modules/project-management/pages/project-management.component.spec.ts
index f7b2c0eb2..b283e0e76 100644
--- a/src/app/modules/project-management/pages/project-management.component.spec.ts
+++ b/src/app/modules/project-management/pages/project-management.component.spec.ts
@@ -1,153 +1,49 @@
-import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClient, HttpHandler } from '@angular/common/http';
+import { async, TestBed } from '@angular/core/testing';
 import { of } from 'rxjs';
-
-import { CreateProjectComponent, ProjectListComponent } from '../components';
 import { Project } from '../../shared/models';
+import { ProjectService } from './../services/project.service';
 import { ProjectManagementComponent } from './project-management.component';
-import { ProjectService } from '../services/project.service';
-import { FilterProjectPipe } from '../../shared/pipes';
 
-describe('ProjectManagementComponent', () => {
+describe('ProjectsManagementComponent', () => {
   let component: ProjectManagementComponent;
-  let fixture: ComponentFixture<ProjectManagementComponent>;
   let projectService: ProjectService;
+  const projectsFromApi: Project[] = [{ id: '123', name: 'aaa', description: 'xxx' }];
 
-  const projects: Project[] = [
-    {
-      id: '1',
-      name: 'app 1',
-      details: 'It is a good app',
-      status: 'inactive',
-      completed: true,
-    },
-    {
-      id: '2',
-      name: 'app 2',
-      details: 'It is a good app',
-      status: 'inactive',
-      completed: false,
-    },
-    {
-      id: '3',
-      name: 'app 3',
-      details: 'It is a good app',
-      status: 'active',
-      completed: true,
-    },
-  ];
-
-  const projectServiceStub = {
-    getProjects() {
-      const projectsMock = projects;
-      return of(projectsMock);
-    },
+  const project: Project = {
+    id: '1',
+    name: 'app 1',
+    description: 'It is a good app',
   };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ProjectManagementComponent, CreateProjectComponent, ProjectListComponent, FilterProjectPipe],
-      providers: [{ provide: ProjectService, useValue: projectServiceStub }],
-      imports: [FormsModule, ReactiveFormsModule],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ProjectManagementComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-
+      declarations: [ProjectManagementComponent],
+      providers: [ProjectService, HttpClient, HttpHandler],
+    });
+    component = TestBed.createComponent(ProjectManagementComponent).componentInstance;
     projectService = TestBed.inject(ProjectService);
-    component.projects = projects;
-  });
-
-  it('Service injected via inject(...) and TestBed.get(...) should be the same instance', inject(
-    [ProjectService],
-    (injectService: ProjectService) => {
-      expect(injectService).toBe(projectService);
-    }
-  ));
+    spyOn(projectService, 'getProjects').and.returnValue(of(projectsFromApi));
+  }));
 
-  it('should create', () => {
+  it('should create the component', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should add a project #updateProject', () => {
-    const project = {
-      name: 'app 4',
-      details: 'It is a good app',
-      status: 'inactive',
-      completed: true,
-    };
-
-    component.editedProjectId = null;
-    component.updateProject(project);
-    expect(component.projects.length).toEqual(4);
-  });
-
-  it('should edit a project #updateProject', () => {
-    const project = {
-      id: '1',
-      name: 'app test',
-      details: 'It is a excelent app',
-      status: 'inactive',
-      completed: true,
-    };
-
-    component.editedProjectId = '1';
-    component.updateProject(project);
-    expect(component.projects.length).toEqual(3);
-    expect(component.projects[0].name).toBe('app test');
-    expect(component.projects[0].details).toBe('It is a excelent app');
-    expect(component.projects[0].status).toBe('inactive');
-    expect(component.projects[0].completed).toBe(true);
-  });
-
   it('should filter the project to edit #editProject', () => {
-    const editProjectId = '2';
-    component.editProject(editProjectId);
-    expect(component.project.name).toBe('app 2');
+    component.editProject(project);
+    expect(component.project.name).toBe('app 1');
   });
 
   it('should clean the project #cancelForm', () => {
-    const project = {
+    const projectData = {
       id: '1',
       name: 'app 1',
-      details: 'It is a good app',
-      status: 'inactive',
-      completed: true,
+      description: 'It is a good app',
     };
 
-    component.project = project;
+    component.project = projectData;
     component.cancelForm();
     expect(component.project).toBe(null);
   });
-
-  it('should call getProjects method on init', () => {
-    const preojectServiceSpy = spyOn(projectService, 'getProjects').and.callThrough();
-    const componentSpy = spyOn(component, 'getProjects').and.callThrough();
-
-    expect(preojectServiceSpy).not.toHaveBeenCalled();
-    expect(componentSpy).not.toHaveBeenCalled();
-
-    component.ngOnInit();
-
-    expect(preojectServiceSpy).toHaveBeenCalledTimes(1);
-    expect(componentSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it('should call getProjects and return a list of projects', async(() => {
-    spyOn(projectService, 'getProjects').and.returnValue(of(projects));
-
-    component.ngOnInit();
-
-    expect(component.projects).toEqual(projects);
-  }));
-
-  it('should delete a project #deleteProject', () => {
-    const projectId = '1';
-
-    component.deleteProject(projectId);
-    expect(component.projects.length).toEqual(2);
-  });
 });
diff --git a/src/app/modules/project-management/pages/project-management.component.ts b/src/app/modules/project-management/pages/project-management.component.ts
index 177b2e189..616579818 100644
--- a/src/app/modules/project-management/pages/project-management.component.ts
+++ b/src/app/modules/project-management/pages/project-management.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { Project } from '../../shared/models';
-import { ProjectService } from '../services/project.service';
 
 @Component({
   selector: 'app-project-management',
@@ -8,53 +7,17 @@ import { ProjectService } from '../services/project.service';
   styleUrls: ['./project-management.component.scss'],
 })
 export class ProjectManagementComponent implements OnInit {
-  editedProjectId;
-
   project: Project;
 
-  projects: Project[] = [];
-
-  constructor(private projectService: ProjectService) {}
+  constructor() {}
 
-  ngOnInit(): void {
-    this.getProjects();
-  }
-
-  updateProject(projectData): void {
-    if (this.editedProjectId) {
-      const projectIndex = this.projects.findIndex((project) => project.id === this.editedProjectId);
-      this.projects[projectIndex].name = projectData.name;
-      this.projects[projectIndex].details = projectData.details;
-      this.projects[projectIndex].status = projectData.status;
-      this.projects[projectIndex].completed = projectData.completed;
-    } else {
-      const newProject: Project = {
-        id: (this.projects.length + 1).toString(),
-        name: projectData.name,
-        details: projectData.details,
-        status: projectData.status,
-        completed: false,
-      };
-      this.projects = this.projects.concat(newProject);
-    }
-  }
+  ngOnInit(): void {}
 
-  editProject(projectId) {
-    this.editedProjectId = projectId;
-    this.project = this.projects.filter((project) => project.id === projectId)[0];
-  }
-
-  deleteProject(projectId): void {
-    this.projects = this.projects.filter((project) => project.id !== projectId);
+  editProject(project) {
+    this.project = project;
   }
 
   cancelForm() {
     this.project = null;
   }
-
-  getProjects() {
-    this.projectService.getProjects().subscribe((data) => {
-      this.projects = data;
-    });
-  }
 }
diff --git a/src/app/modules/project-management/services/project.service.spec.ts b/src/app/modules/project-management/services/project.service.spec.ts
index 5e8fb3c03..8e3dcc0bc 100644
--- a/src/app/modules/project-management/services/project.service.spec.ts
+++ b/src/app/modules/project-management/services/project.service.spec.ts
@@ -7,55 +7,74 @@ describe('ProjectService', () => {
   let service: ProjectService;
   let httpMock: HttpTestingController;
 
-  const projectsList: Project[] = [{
-    id: '1',
-    name: 'app 1',
-    details: 'It is a good app',
-    status: 'inactive',
-    completed: true
-  },
-  {
-    id: '2',
-    name: 'app 2',
-    details: 'It is a good app',
-    status: 'inactive',
-    completed: false
-  },
-  {
-    id: '3',
-    name: 'app 3',
-    details: 'It is a good app',
-    status: 'active',
-    completed: true
-  }
+  const projectsList: Project[] = [
+    {
+      id: '1',
+      name: 'app 1',
+      description: 'It is a good app',
+    },
+    {
+      id: '2',
+      name: 'app 2',
+      description: 'It is a good app',
+    },
+    {
+      id: '3',
+      name: 'app 3',
+      description: 'It is a good app',
+    },
   ];
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule]
+      imports: [HttpClientTestingModule],
     });
     service = TestBed.inject(ProjectService);
     httpMock = TestBed.inject(HttpTestingController);
   });
 
-  afterEach (() => {
-    httpMock.verify ();
+  afterEach(() => {
+    httpMock.verify();
   });
 
-  it('should create', inject([HttpClientTestingModule, ProjectService],
+  it('should create', inject(
+    [HttpClientTestingModule, ProjectService],
     (httpClient: HttpClientTestingModule, apiService: ProjectService) => {
       expect(apiService).toBeTruthy();
       expect(httpClient).toBeTruthy();
-  }));
+    }
+  ));
 
-  it('should get projects  API/GET #getProjects', () => {
-    service.getProjects().subscribe(projects => {
-        expect(projects.length).toBe(3);
-        expect(projects).toEqual(projects);
+  it('projects are read using GET from url', () => {
+    const projectsFoundSize = projectsList.length;
+    service.url = '/projects';
+    service.getProjects().subscribe((projectsInResponse) => {
+      expect(projectsInResponse.length).toBe(projectsFoundSize);
     });
-    const request = httpMock.expectOne('assets/project.json');
-    expect(request.request.method).toBe('GET');
-    request.flush(projectsList);
+    const getProjectsRequest = httpMock.expectOne(service.url);
+    expect(getProjectsRequest.request.method).toBe('GET');
+    getProjectsRequest.flush(projectsList);
+  });
+
+  it('create project using POST from url', () => {
+    const project: Project[] = [{ id: '1', name: 'ccc', description: 'xxx' }];
+    service.url = 'projects';
+    service.createProject(project).subscribe((response) => {
+      expect(response.length).toBe(1);
     });
+    const createProjectsRequest = httpMock.expectOne(service.url);
+    expect(createProjectsRequest.request.method).toBe('POST');
+    createProjectsRequest.flush(project);
+  });
 
+  it('update project using PUT from url', () => {
+    const project: Project = { id: '1', name: 'new name', description: 'description' };
+    service.url = 'projects';
+    service.updateProject(project).subscribe((response) => {
+      expect(response.name).toBe('new name');
+    });
+    const updateProjectRequest = httpMock.expectOne(`${service.url}/${project.id}`);
+    expect(updateProjectRequest.request.method).toBe('PUT');
+    updateProjectRequest.flush(project);
+  });
 });
diff --git a/src/app/modules/project-management/services/project.service.ts b/src/app/modules/project-management/services/project.service.ts
index aec99ad4f..d30d8e771 100644
--- a/src/app/modules/project-management/services/project.service.ts
+++ b/src/app/modules/project-management/services/project.service.ts
@@ -1,19 +1,32 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
+import { environment } from './../../../../environments/environment';
 import { Project } from '../../shared/models';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ProjectService {
-
   projects: Project[] = [];
-  url = 'assets/project.json';
+  url = `${environment.timeTrackerApiUrl}/projects`;
 
   constructor(private http: HttpClient) {}
 
   getProjects(): Observable<Project[]> {
     return this.http.get<Project[]>(this.url);
   }
+
+  createProject(projectData): Observable<any> {
+    return this.http.post<Project[]>(this.url, {
+      ...projectData,
+      customer_id: 'b6e6a2f1-ce5c-49b3-8649-d154b4f3c305',
+      tenant_id: 'b95385bd-d0f4-4823-b874-af9421c14c8e',
+    });
+  }
+
+  updateProject(projectData): Observable<any> {
+    const { id } = projectData;
+    return this.http.put(`${this.url}/${id}`, projectData);
+  }
 }
diff --git a/src/app/modules/project-management/store/.gitkeep b/src/app/modules/project-management/store/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/modules/project-management/store/project.actions.spec.ts b/src/app/modules/project-management/store/project.actions.spec.ts
new file mode 100644
index 000000000..6600a194a
--- /dev/null
+++ b/src/app/modules/project-management/store/project.actions.spec.ts
@@ -0,0 +1,41 @@
+import * as actions from './project.actions';
+
+describe('Actions for Projects', () => {
+  it('LoadProjectsSuccess type is ProjectActionTypes.LOAD_PROJECTS_SUCCESS', () => {
+    const loadProjectsSuccess = new actions.LoadProjectsSuccess([]);
+    expect(loadProjectsSuccess.type).toEqual(actions.ProjectActionTypes.LOAD_PROJECTS_SUCCESS);
+  });
+
+  it('LoadProjectsFail type is ProjectActionTypes.LOAD_PROJECTS_FAIL', () => {
+    const loadProjectsFail = new actions.LoadProjectsFail('error');
+    expect(loadProjectsFail.type).toEqual(actions.ProjectActionTypes.LOAD_PROJECTS_FAIL);
+  });
+
+  it('CreateProjectSuccess type is ProjectActionTypes.CREATE_PROJECT_SUCCESS', () => {
+    const createProjectSuccess = new actions.CreateProjectSuccess({
+      id: '1',
+      name: 'Training',
+      description: 'It is good for learning',
+    });
+    expect(createProjectSuccess.type).toEqual(actions.ProjectActionTypes.CREATE_PROJECT_SUCCESS);
+  });
+
+  it('CreateProjectFail type is ProjectActionTypes.CREATE_PROJECT_FAIL', () => {
+    const createProjectFail = new actions.CreateProjectFail('error');
+    expect(createProjectFail.type).toEqual(actions.ProjectActionTypes.CREATE_PROJECT_FAIL);
+  });
+
+  it('UpdateProjectSuccess type is ProjectActionTypes.UPDATE_PROJECT_SUCCESS', () => {
+    const updateProjectSuccess = new actions.UpdateProjectSuccess({
+      id: '1',
+      name: 'Training',
+      description: 'It is good for learning',
+    });
+    expect(updateProjectSuccess.type).toEqual(actions.ProjectActionTypes.UPDATE_PROJECT_SUCCESS);
+  });
+
+  it('UpdateProjectFail type is ProjectActionTypes.UPDATE_PROJECT_FAIL', () => {
+    const updateProjectFail = new actions.UpdateProjectFail('error');
+    expect(updateProjectFail.type).toEqual(actions.ProjectActionTypes.UPDATE_PROJECT_FAIL);
+  });
+});
diff --git a/src/app/modules/project-management/store/project.actions.ts b/src/app/modules/project-management/store/project.actions.ts
new file mode 100644
index 000000000..97fbcf671
--- /dev/null
+++ b/src/app/modules/project-management/store/project.actions.ts
@@ -0,0 +1,76 @@
+import { Action } from '@ngrx/store';
+import { Project } from '../../shared/models';
+
+export enum ProjectActionTypes {
+  LOAD_PROJECTS = '[Projects] LOAD_PROJECTS',
+  LOAD_PROJECTS_SUCCESS = '[Projects] LOAD_PROJECTS_SUCCESS',
+  LOAD_PROJECTS_FAIL = '[Projects] LOAD_PROJECTS_FAIL',
+  CREATE_PROJECT = '[Projects] CREATE_PROJECT',
+  CREATE_PROJECT_SUCCESS = '[Projects] CREATE_PROJECT_SUCCESS',
+  CREATE_PROJECT_FAIL = '[Projects] CREATE_PROJECT_FAIL',
+  UPDATE_PROJECT = '[Projects] UPDATE_PROJECT',
+  UPDATE_PROJECT_SUCCESS = '[Projects] UPDATE_PROJECT_SUCCESS',
+  UPDATE_PROJECT_FAIL = '[Projects] UPDATE_PROJECT_FAIL',
+}
+
+export class LoadProjects implements Action {
+  public readonly type = ProjectActionTypes.LOAD_PROJECTS;
+}
+
+export class LoadProjectsSuccess implements Action {
+  readonly type = ProjectActionTypes.LOAD_PROJECTS_SUCCESS;
+  constructor(readonly payload: Project[]) {}
+}
+
+export class LoadProjectsFail implements Action {
+  public readonly type = ProjectActionTypes.LOAD_PROJECTS_FAIL;
+
+  constructor(public error: string) {}
+}
+
+export class CreateProject implements Action {
+  public readonly type = ProjectActionTypes.CREATE_PROJECT;
+
+  constructor(public payload: Project) {}
+}
+
+export class CreateProjectSuccess implements Action {
+  public readonly type = ProjectActionTypes.CREATE_PROJECT_SUCCESS;
+
+  constructor(public payload: Project) {}
+}
+
+export class CreateProjectFail implements Action {
+  public readonly type = ProjectActionTypes.CREATE_PROJECT_FAIL;
+
+  constructor(public error: string) {}
+}
+
+export class UpdateProject implements Action {
+  public readonly type = ProjectActionTypes.UPDATE_PROJECT;
+
+  constructor(public payload: Project) {}
+}
+
+export class UpdateProjectSuccess implements Action {
+  public readonly type = ProjectActionTypes.UPDATE_PROJECT_SUCCESS;
+
+  constructor(public payload: Project) {}
+}
+
+export class UpdateProjectFail implements Action {
+  public readonly type = ProjectActionTypes.UPDATE_PROJECT_FAIL;
+
+  constructor(public error: string) {}
+}
+
+export type ProjectActions =
+  | LoadProjects
+  | LoadProjectsSuccess
+  | LoadProjectsFail
+  | CreateProject
+  | CreateProjectSuccess
+  | CreateProjectFail
+  | UpdateProject
+  | UpdateProjectSuccess
+  | UpdateProjectFail;
diff --git a/src/app/modules/project-management/store/project.effects.ts b/src/app/modules/project-management/store/project.effects.ts
new file mode 100644
index 000000000..269651203
--- /dev/null
+++ b/src/app/modules/project-management/store/project.effects.ts
@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { ofType, Actions, Effect } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+import { of, Observable } from 'rxjs';
+import { catchError, map, mergeMap } from 'rxjs/operators';
+import { ProjectService } from '../services/project.service';
+import * as actions from './project.actions';
+
+@Injectable()
+export class ProjectEffects {
+  constructor(private actions$: Actions, private projectService: ProjectService) {}
+
+  @Effect()
+  loadProjects$: Observable<Action> = this.actions$.pipe(
+    ofType(actions.ProjectActionTypes.LOAD_PROJECTS),
+    mergeMap(() =>
+      this.projectService.getProjects().pipe(
+        map((project) => {
+          return new actions.LoadProjectsSuccess(project);
+        }),
+        catchError((error) => of(new actions.LoadProjectsFail(error)))
+      )
+    )
+  );
+
+  @Effect()
+  createProject$: Observable<Action> = this.actions$.pipe(
+    ofType(actions.ProjectActionTypes.CREATE_PROJECT),
+    map((action: actions.CreateProject) => action.payload),
+    mergeMap((project) =>
+      this.projectService.createProject(project).pipe(
+        map((projectData) => {
+          return new actions.CreateProjectSuccess(projectData);
+        }),
+        catchError((error) => of(new actions.CreateProjectFail(error)))
+      )
+    )
+  );
+
+  @Effect()
+  updateProject$: Observable<Action> = this.actions$.pipe(
+    ofType(actions.ProjectActionTypes.UPDATE_PROJECT),
+    map((action: actions.UpdateProject) => action.payload),
+    mergeMap((project) =>
+      this.projectService.updateProject(project).pipe(
+        map((projectData) => {
+          return new actions.UpdateProjectSuccess(projectData);
+        }),
+        catchError((error) => of(new actions.UpdateProjectFail(error)))
+      )
+    )
+  );
+}
diff --git a/src/app/modules/project-management/store/project.reducer.spec.ts b/src/app/modules/project-management/store/project.reducer.spec.ts
new file mode 100644
index 000000000..d6b3193ca
--- /dev/null
+++ b/src/app/modules/project-management/store/project.reducer.spec.ts
@@ -0,0 +1,77 @@
+import { Project } from './../../shared/models';
+import * as actions from './project.actions';
+import { projectReducer, ProjectState } from './project.reducer';
+
+describe('projectReducer', () => {
+  const initialState: ProjectState = { projectList: [], isLoading: false };
+
+  it('on LoadProjects, isLoading is true', () => {
+    const action = new actions.LoadProjects();
+    const state = projectReducer(initialState, action);
+    expect(state.isLoading).toEqual(true);
+  });
+
+  it('on LoadProjectsSuccess, projectsFound are saved in the store', () => {
+    const projectsFound: Project[] = [{ id: '', name: '', description: '' }];
+    const action = new actions.LoadProjectsSuccess(projectsFound);
+    const state = projectReducer(initialState, action);
+    expect(state.projectList).toEqual(projectsFound);
+  });
+
+  it('on LoadProjectsFail, projectList equal []', () => {
+    const action = new actions.LoadProjectsFail('error');
+    const state = projectReducer(initialState, action);
+    expect(state.projectList).toEqual([]);
+  });
+
+  it('on CreateProject, isLoading is true', () => {
+    const project: Project = { id: '1', name: 'Training', description: 'It is good for learning' };
+    const action = new actions.CreateProject(project);
+    const state = projectReducer(initialState, action);
+
+    expect(state.isLoading).toEqual(true);
+  });
+
+  it('on CreateProjectSuccess, project is saved in the store', () => {
+    const project: Project = { id: '1', name: 'Training', description: 'It is good for learning' };
+    const action = new actions.CreateProjectSuccess(project);
+    const state = projectReducer(initialState, action);
+
+    expect(state.projectList).toEqual([project]);
+    expect(state.isLoading).toEqual(false);
+  });
+
+  it('on CreateProjectFail, projectList equal []', () => {
+    const action = new actions.CreateProjectFail('error');
+    const state = projectReducer(initialState, action);
+
+    expect(state.projectList).toEqual([]);
+    expect(state.isLoading).toEqual(false);
+  });
+
+  it('on UpdateProject, isLoading is true', () => {
+    const project: Project = { id: '1', name: 'Training', description: 'It is good for learning' };
+    const action = new actions.UpdateProject(project);
+    const state = projectReducer(initialState, action);
+
+    expect(state.isLoading).toEqual(true);
+  });
+
+  it('on UpdateProjectSuccess, project is saved in the store', () => {
+    const project: Project = { id: '1', name: 'Training', description: 'It is good for learning' };
+    const currentState: ProjectState = { projectList: [project], isLoading: false };
+    const action = new actions.UpdateProjectSuccess(project);
+    const state = projectReducer(currentState, action);
+
+    expect(state.projectList).toEqual([project]);
+    expect(state.isLoading).toEqual(false);
+  });
+
+  it('on UpdateProjectFail, projectList equal []', () => {
+    const action = new actions.UpdateProjectFail('error');
+    const state = projectReducer(initialState, action);
+
+    expect(state.projectList).toEqual([]);
+    expect(state.isLoading).toEqual(false);
+  });
+});
diff --git a/src/app/modules/project-management/store/project.reducer.ts b/src/app/modules/project-management/store/project.reducer.ts
new file mode 100644
index 000000000..357078966
--- /dev/null
+++ b/src/app/modules/project-management/store/project.reducer.ts
@@ -0,0 +1,86 @@
+import { ProjectActions, ProjectActionTypes } from './project.actions';
+import { Project } from '../../shared/models';
+
+export interface ProjectState {
+  projectList: Project[];
+  isLoading: boolean;
+}
+
+export const initialState = {
+  projectList: [],
+  isLoading: false,
+};
+
+export const projectReducer = (state: ProjectState = initialState, action: ProjectActions) => {
+  const projects = [...state.projectList];
+  switch (action.type) {
+    case ProjectActionTypes.LOAD_PROJECTS: {
+      return {
+        ...state,
+        isLoading: true,
+      };
+    }
+    case ProjectActionTypes.LOAD_PROJECTS_SUCCESS:
+      return {
+        ...state,
+        projectList: action.payload,
+        isLoading: false,
+      };
+
+    case ProjectActionTypes.LOAD_PROJECTS_FAIL: {
+      return {
+        projectList: [],
+        isLoading: false,
+      };
+    }
+
+    case ProjectActionTypes.CREATE_PROJECT: {
+      return {
+        ...state,
+        isLoading: true,
+      };
+    }
+
+    case ProjectActionTypes.CREATE_PROJECT_SUCCESS: {
+      return {
+        ...state,
+        projectList: [...state.projectList, action.payload],
+        isLoading: false,
+      };
+    }
+
+    case ProjectActionTypes.CREATE_PROJECT_FAIL: {
+      return {
+        projectList: [],
+        isLoading: false,
+      };
+    }
+
+    case ProjectActionTypes.UPDATE_PROJECT: {
+      return {
+        ...state,
+        isLoading: true,
+      };
+    }
+
+    case ProjectActionTypes.UPDATE_PROJECT_SUCCESS: {
+      const index = projects.findIndex((project) => project.id === action.payload.id);
+      projects[`${index}`] = action.payload;
+
+      return {
+        ...state,
+        projectList: projects,
+        isLoading: false,
+      };
+    }
+
+    case ProjectActionTypes.UPDATE_PROJECT_FAIL: {
+      return {
+        projectList: [],
+        isLoading: false,
+      };
+    }
+    default:
+      return state;
+  }
+};
diff --git a/src/app/modules/project-management/store/project.selectors.ts b/src/app/modules/project-management/store/project.selectors.ts
new file mode 100644
index 000000000..bc57589cd
--- /dev/null
+++ b/src/app/modules/project-management/store/project.selectors.ts
@@ -0,0 +1,9 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+
+import { ProjectState } from './project.reducer';
+
+const getProjectState = createFeatureSelector<ProjectState>('projects');
+
+export const allProjects = createSelector(getProjectState, (state: ProjectState) => {
+  return state;
+});
diff --git a/src/app/modules/shared/components/modal/modal.component.spec.ts b/src/app/modules/shared/components/modal/modal.component.spec.ts
index 01154738d..2380cf7c0 100644
--- a/src/app/modules/shared/components/modal/modal.component.spec.ts
+++ b/src/app/modules/shared/components/modal/modal.component.spec.ts
@@ -8,9 +8,8 @@ describe('ModalComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ModalComponent ]
-    })
-    .compileComponents();
+      declarations: [ModalComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -27,7 +26,7 @@ describe('ModalComponent', () => {
     const merged = {
       id: '1',
       name: 'app 4',
-      details: 'It is a good app',
+      description: 'It is a good app',
       status: 'inactive',
       completed: true,
       project: 'ErnstYoung',
@@ -45,4 +44,3 @@ describe('ModalComponent', () => {
     component.cancelDeleteModal.nativeElement.click();
   });
 });
-
diff --git a/src/app/modules/shared/models/project.model.ts b/src/app/modules/shared/models/project.model.ts
index d5eb3b8ed..57486d20f 100644
--- a/src/app/modules/shared/models/project.model.ts
+++ b/src/app/modules/shared/models/project.model.ts
@@ -1,8 +1,7 @@
 export interface Project {
   id: string;
+  customer_id?: string;
+  tenant_id?: string;
   name: string;
-  details: string;
-  status: string;
-  completed: boolean;
+  description: string;
 }
-
diff --git a/src/app/modules/shared/pipes/filter-project/filter-project.pipe.spec.ts b/src/app/modules/shared/pipes/filter-project/filter-project.pipe.spec.ts
index 014bb53ba..b884a8c9b 100644
--- a/src/app/modules/shared/pipes/filter-project/filter-project.pipe.spec.ts
+++ b/src/app/modules/shared/pipes/filter-project/filter-project.pipe.spec.ts
@@ -6,23 +6,17 @@ describe('FilterProjectPipe', () => {
     {
       id: '1',
       name: 'app 1',
-      details: 'It is a good app',
-      status: 'inactive',
-      completed: true,
+      description: 'It is a good app',
     },
     {
       id: '2',
       name: 'app 2',
-      details: 'It is a good app',
-      status: 'inactive',
-      completed: false,
+      description: 'It is a good app',
     },
     {
       id: '3',
       name: 'app 3',
-      details: 'It is a good app',
-      status: 'active',
-      completed: true,
+      description: 'It is a good app',
     },
   ];
 
diff --git a/src/app/modules/shared/pipes/filter-project/filter-project.pipe.ts b/src/app/modules/shared/pipes/filter-project/filter-project.pipe.ts
index e0337a24a..51aded839 100644
--- a/src/app/modules/shared/pipes/filter-project/filter-project.pipe.ts
+++ b/src/app/modules/shared/pipes/filter-project/filter-project.pipe.ts
@@ -5,7 +5,7 @@ import { Project } from 'src/app/modules/shared/models/project.model';
   name: 'filterProject',
 })
 export class FilterProjectPipe implements PipeTransform {
-  transform(value: Project[] = [], arg: string): string[] {
+  transform(value: Project[] = [], arg: string): Project[] {
     const restultProjects = [];
     for (const project of value) {
       if (project.name.toLowerCase().indexOf(arg.toLowerCase()) > -1) {
diff --git a/src/app/modules/activities-management/store/.gitkeep b/src/app/modules/shared/services/.gitkeep
similarity index 100%
rename from src/app/modules/activities-management/store/.gitkeep
rename to src/app/modules/shared/services/.gitkeep
diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.html b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.html
index d4516ae96..8cf1fa6e6 100644
--- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.html
+++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.html
@@ -6,7 +6,7 @@
     (mouseenter)="showButton = i"
     (mouseleave)="showButton = -1"
     (click)="clockIn(item.id)"
-    [ngClass]="{ active: selectedId === item.id, hiddenList: item.status !== 'Active' }"
+    [ngClass]="{ active: selectedId === item.id }"
   >
     {{ item.name }}
     <span *ngIf="showButton === i && selectedId !== item.id" class="badge badge-light">Clock In</span>
diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss
index 0798014c2..996e88477 100644
--- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss
+++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss
@@ -10,10 +10,6 @@
     font-size: 0.8rem;
     padding: 0.5rem 0.8rem;
   }
-
-  .hiddenList {
-    display: none;
-  }
 }
 
 .button-clockIn {
diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts
index 926037e2f..67da84a30 100644
--- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts
+++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts
@@ -1,28 +1,37 @@
-import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 import { ProjectListHoverComponent } from './project-list-hover.component';
-import { ProjectService } from '../../../project-management/services/project.service';
+import { ProjectState } from '../../../project-management/store/project.reducer';
+import { allProjects } from '../../../project-management/store/project.selectors';
 import { FilterProjectPipe } from '../../../shared/pipes';
 
 describe('ProjectListHoverComponent', () => {
   let component: ProjectListHoverComponent;
   let fixture: ComponentFixture<ProjectListHoverComponent>;
-  let projectService: ProjectService;
+  let store: MockStore<ProjectState>;
+  let mockProjectsSelector;
+
+  const state = {
+    projectList: [{ id: 'id', name: 'name', description: 'description' }],
+    isLoading: false,
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ProjectListHoverComponent, FilterProjectPipe],
+      providers: [provideMockStore({ initialState: state })],
       imports: [HttpClientTestingModule],
-      providers: [ProjectService],
     }).compileComponents();
+    store = TestBed.inject(MockStore);
+    mockProjectsSelector = store.overrideSelector(allProjects, state);
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ProjectListHoverComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-    projectService = TestBed.inject(ProjectService);
   });
 
   it('should create', () => {
@@ -40,11 +49,4 @@ describe('ProjectListHoverComponent', () => {
     component.showFields.subscribe((showFields: boolean) => expect(showFields).toEqual(true));
     component.clockIn(id);
   });
-
-  it('Service injected via inject(...) and TestBed.get(...) should be the same instance', inject(
-    [ProjectService],
-    (injectService: ProjectService) => {
-      expect(injectService).toBe(projectService);
-    }
-  ));
 });
diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts
index 9ed01fe11..eb6514326 100644
--- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts
+++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts
@@ -1,6 +1,9 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Store, select } from '@ngrx/store';
 import { Project } from 'src/app/modules/shared/models';
-import { ProjectService } from 'src/app/modules/project-management/services/project.service';
+import { allProjects } from '../../../project-management/store/project.selectors';
+import { ProjectState } from '../../../project-management/store/project.reducer';
+import * as actions from '../../../project-management/store/project.actions';
 
 @Component({
   selector: 'app-project-list-hover',
@@ -8,20 +11,26 @@ import { ProjectService } from 'src/app/modules/project-management/services/proj
   styleUrls: ['./project-list-hover.component.scss'],
 })
 export class ProjectListHoverComponent implements OnInit {
-  @Input() projects: any;
   @Output() showFields = new EventEmitter<boolean>();
 
   selectedId: string;
   showButton: number;
   filterProjects = '';
   listProjects: Project[] = [];
+  isLoading: boolean;
 
-  constructor(private projectService: ProjectService) {
+  constructor(private store: Store<ProjectState>) {
     this.showButton = -1;
   }
 
   ngOnInit(): void {
-    this.projectService.getProjects().subscribe((data) => (this.listProjects = data));
+    this.store.dispatch(new actions.LoadProjects());
+    const projects$ = this.store.pipe(select(allProjects));
+
+    projects$.subscribe((response) => {
+      this.isLoading = response.isLoading;
+      this.listProjects = response.projectList;
+    });
   }
 
   clockIn(id: string) {
diff --git a/src/app/modules/time-clock/pages/time-clock.component.html b/src/app/modules/time-clock/pages/time-clock.component.html
index dc721361a..e78c95610 100644
--- a/src/app/modules/time-clock/pages/time-clock.component.html
+++ b/src/app/modules/time-clock/pages/time-clock.component.html
@@ -31,7 +31,7 @@ <h3>14:00</h3>
       </div>
       <h6 class="text-left"><strong>Projects</strong></h6>
       <ul class="list-group">
-        <app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
+        <app-project-list-hover (showFields)="setShowFields($event)"></app-project-list-hover>
       </ul>
       <br />
       <form *ngIf="!isClockIn || showFields">
diff --git a/src/app/modules/time-clock/pages/time-clock.component.spec.ts b/src/app/modules/time-clock/pages/time-clock.component.spec.ts
index 0a5ddc159..87fb266b1 100644
--- a/src/app/modules/time-clock/pages/time-clock.component.spec.ts
+++ b/src/app/modules/time-clock/pages/time-clock.component.spec.ts
@@ -1,9 +1,11 @@
 import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
 import { TimeClockComponent } from './time-clock.component';
+import { ProjectState } from '../../project-management/store/project.reducer';
 import { ProjectListHoverComponent } from '../components';
 import { ProjectService } from '../../project-management/services/project.service';
 import { FilterProjectPipe } from '../../shared/pipes';
@@ -12,14 +14,27 @@ describe('TimeClockComponent', () => {
   let component: TimeClockComponent;
   let fixture: ComponentFixture<TimeClockComponent>;
   let de: DebugElement;
+  let store: MockStore<ProjectState>;
   let projectService: ProjectService;
+  const state = {
+    projects: {
+      projectList: [{ id: 'id', name: 'name', description: 'description' }],
+      isLoading: false,
+    },
+    activities: {
+      data: [{ id: 'id', name: 'name', description: 'description' }],
+      isLoading: false,
+      message: 'message',
+    },
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
       declarations: [TimeClockComponent, ProjectListHoverComponent, FilterProjectPipe],
-      providers: [ProjectService],
+      providers: [ProjectService, provideMockStore({ initialState: state })],
     }).compileComponents();
+    store = TestBed.inject(MockStore);
   }));
 
   beforeEach(() => {
diff --git a/src/app/modules/time-clock/pages/time-clock.component.ts b/src/app/modules/time-clock/pages/time-clock.component.ts
index 50c7e40ba..e255c054c 100644
--- a/src/app/modules/time-clock/pages/time-clock.component.ts
+++ b/src/app/modules/time-clock/pages/time-clock.component.ts
@@ -3,18 +3,9 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-time-clock',
   templateUrl: './time-clock.component.html',
-  styleUrls: ['./time-clock.component.scss']
+  styleUrls: ['./time-clock.component.scss'],
 })
-
-export class TimeClockComponent  implements OnInit {
-
-  projects = [
-    { id: 'P1', name: 'Project 1' },
-    { id: 'P2', name: 'Project 2' },
-    { id: 'P3', name: 'Project 3' },
-    { id: 'P4', name: 'Project 4' }
-  ];
-
+export class TimeClockComponent implements OnInit {
   currentDate: Date = new Date();
   username = 'Dario';
   isClockIn: boolean;
@@ -43,65 +34,65 @@ export class TimeClockComponent  implements OnInit {
     this.hour = 0;
     this.minute = 0;
     this.seconds = 0;
-   }
+  }
 
-   employeClockIn(): boolean {
-     this.isClockInEnable = true;
-     this.isClockIn = !this.isClockIn;
-     this.isHidenForm = false;
-     this.startTimer();
-     this.setArrivalAndDepartureTimes();
-     return this.isClockIn;
-   }
+  employeClockIn(): boolean {
+    this.isClockInEnable = true;
+    this.isClockIn = !this.isClockIn;
+    this.isHidenForm = false;
+    this.startTimer();
+    this.setArrivalAndDepartureTimes();
+    return this.isClockIn;
+  }
 
-   employeClockOut() {
-     if ( this.isEnterTechnology === false ) {
-       this.isClockIn = false;
-       this.showAlertEnterTecnology = true;
-     } else {
-       this.setDefaultValuesToFields();
-       this.pauseTimer();
-       this.setArrivalAndDepartureTimes();
-     }
-   }
+  employeClockOut() {
+    if (this.isEnterTechnology === false) {
+      this.isClockIn = false;
+      this.showAlertEnterTecnology = true;
+    } else {
+      this.setDefaultValuesToFields();
+      this.pauseTimer();
+      this.setArrivalAndDepartureTimes();
+    }
+  }
 
-   enterTechnology(data: string) {
-     if ( data.length > 0 ) {
+  enterTechnology(data: string) {
+    if (data.length > 0) {
       this.isEnterTechnology = true;
-     } else {
-       this.isEnterTechnology = false;
-     }
-   }
+    } else {
+      this.isEnterTechnology = false;
+    }
+  }
 
-   setShowFields(show: boolean) {
-     this.isHidenForm = false;
-     if ( this.isClockInEnable !== true ) {
+  setShowFields(show: boolean) {
+    this.isHidenForm = false;
+    if (this.isClockInEnable !== true) {
       this.isClockIn = false;
       this.showFields = show;
-      if (  !this.execOnlyOneTimeCounter  ) {
+      if (!this.execOnlyOneTimeCounter) {
         this.startTimer();
         this.execOnlyOneTimeCounter = true;
       }
       this.setArrivalAndDepartureTimes();
-     }
+    }
   }
 
   startTimer() {
     this.interval = setInterval(() => {
-        this.timer();
-    }, 1000 );
-   }
+      this.timer();
+    }, 1000);
+  }
 
-   pauseTimer() {
-     clearInterval(this.interval);
-   }
+  pauseTimer() {
+    clearInterval(this.interval);
+  }
 
-   timer() {
+  timer() {
     this.secondsCounterRealTime += 1;
-    if ( this.secondsCounterRealTime === 59 ) {
+    if (this.secondsCounterRealTime === 59) {
       this.minuteCounterRealTime += 1;
       this.secondsCounterRealTime = 0;
-      if ( this.minuteCounterRealTime === 59 ) {
+      if (this.minuteCounterRealTime === 59) {
         this.hourCounterRealTime += 1;
         this.minuteCounterRealTime = 0;
       }
@@ -109,14 +100,13 @@ export class TimeClockComponent  implements OnInit {
   }
 
   setArrivalAndDepartureTimes() {
-    if ( !this.execOnlyOneTimeClockIn ) {
+    if (!this.execOnlyOneTimeClockIn) {
       this.currentDate = new Date();
       this.hour = this.currentDate.getHours();
       this.minute = this.currentDate.getMinutes();
       this.seconds = this.currentDate.getSeconds();
       this.execOnlyOneTimeClockIn = true;
     }
-
   }
 
   setDefaultValuesToFields() {
@@ -129,7 +119,5 @@ export class TimeClockComponent  implements OnInit {
     this.isClockInEnable = false;
   }
 
-  ngOnInit(): void {
-  }
-
+  ngOnInit(): void {}
 }
diff --git a/src/app/reducers/index.ts b/src/app/reducers/index.ts
new file mode 100644
index 000000000..65d8047dd
--- /dev/null
+++ b/src/app/reducers/index.ts
@@ -0,0 +1,16 @@
+import { ActionReducerMap, MetaReducer } from '@ngrx/store';
+import { projectReducer } from '../modules/project-management/store/project.reducer';
+import { activityManagementReducer } from '../modules/activities-management/store/activity-management.reducers';
+import { environment } from '../../environments/environment';
+
+export interface State {
+  projects;
+  activities;
+}
+
+export const reducers: ActionReducerMap<State> = {
+  projects: projectReducer,
+  activities: activityManagementReducer,
+};
+
+export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];