diff --git a/angular.json b/angular.json
index 98e35a34a..09f0ed075 100644
--- a/angular.json
+++ b/angular.json
@@ -1,132 +1,130 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "time-tracker": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/time-tracker",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "aot": true,
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "src/styles.css"
-           ],
-            "scripts": [
-              "./node_modules/jquery/dist/jquery.min.js",
-              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
-            ]
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "time-tracker": {
+            "projectType": "application",
+            "schematics": {},
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/time-tracker",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.app.json",
+                        "aot": true,
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "./node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "src/styles.css"
+                        ],
+                        "scripts": [
+                            "./node_modules/jquery/dist/jquery.min.js",
+                            "./node_modules/bootstrap/dist/js/bootstrap.min.js"
+                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.prod.ts"
+                            }],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true,
+                            "budgets": [{
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "5mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb",
+                                    "maximumError": "10kb"
+                                }
+                            ]
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "time-tracker:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "time-tracker:build:production"
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "time-tracker:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
+                        "codeCoverage": true,
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.css"
+                        ],
+                        "scripts": []
+                    }
                 },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "tsconfig.app.json",
+                            "tsconfig.spec.json",
+                            "e2e/tsconfig.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                },
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "e2e/protractor.conf.js",
+                        "devServerTarget": "time-tracker:serve"
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "time-tracker:serve:production"
+                        }
+                    }
                 }
-              ]
-            }
-          }
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "time-tracker:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "time-tracker:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "time-tracker:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
-            "scripts": []
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "time-tracker:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "time-tracker:serve:production"
             }
-          }
         }
-      }
+    },
+    "defaultProject": "time-tracker",
+    "cli": {
+        "analytics": false
     }
-  },
-  "defaultProject": "time-tracker",
-  "cli": {
-    "analytics": false
-  }
 }
\ No newline at end of file
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index f7fe85f6d..65da222c8 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -7,7 +7,6 @@ import { TimeEntriesComponent } from './components/options-sidebar/time-entries/
 import { TimeOffComponent } from './components/options-sidebar/time-off/time-off.component';
 import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
 
-
 const routes: Routes = [
   {path: 'getting-started', component: GettingStartedComponent},
   {path: 'reports', component: ReportsComponent},
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6365744e7..b611dc7bc 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,16 +1,23 @@
+import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
+
 import { AppComponent } from './app.component';
 import { NavbarComponent } from './components/shared/navbar/navbar.component';
 import { UserComponent } from './components/shared/user/user.component';
 import { SidebarComponent } from './components/shared/sidebar/sidebar.component';
 import { ClockComponent } from './components/shared/clock/clock.component';
+import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component';
 import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
 import { ProjectListComponent } from './components/shared/project-list/project-list.component';
 import { CreateProjectComponent } from './components/shared/create-project/create-project.component';
+import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component';
+import { ProjectListHoverComponent } from './components/shared/project-list-hover/project-list-hover.component';
+import { ModalComponent } from './components/shared/modal/modal.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -18,15 +25,22 @@ import { CreateProjectComponent } from './components/shared/create-project/creat
     UserComponent,
     SidebarComponent,
     ClockComponent,
+    TimeClockComponent,
     ProjectManagementComponent,
     ProjectListComponent,
-    CreateProjectComponent
+    CreateProjectComponent,
+    TimeClockComponent,
+    DetailsFieldsComponent,
+    ProjectListHoverComponent,
+    ModalComponent
   ],
   imports: [
+    CommonModule,
     BrowserModule,
     AppRoutingModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts b/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts
index d36756064..bff58d1a2 100644
--- a/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts
+++ b/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts
@@ -6,6 +6,13 @@ describe('GettingStartedComponent', () => {
   let component: GettingStartedComponent;
   let fixture: ComponentFixture<GettingStartedComponent>;
 
+  function setup() {
+    // tslint:disable-next-line: no-shadowed-variable
+    const fixture = TestBed.createComponent(GettingStartedComponent);
+    const app = fixture.debugElement.componentInstance;
+    return { fixture, app };
+  }
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ GettingStartedComponent ]
@@ -22,4 +29,15 @@ describe('GettingStartedComponent', () => {
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have p tag as \'getting-started works!\'', async(() => {
+    // tslint:disable-next-line: no-shadowed-variable
+    const { app, fixture } = setup();
+    fixture.detectChanges();
+    const compile = fixture.debugElement.nativeElement;
+    const ptag = compile.querySelector('p');
+    expect(ptag.textContent).toBe('getting-started works!');
+  }));
+
+
 });
diff --git a/src/app/components/options-sidebar/project-management/project-management.component.html b/src/app/components/options-sidebar/project-management/project-management.component.html
index ade840ad1..261ac240f 100644
--- a/src/app/components/options-sidebar/project-management/project-management.component.html
+++ b/src/app/components/options-sidebar/project-management/project-management.component.html
@@ -11,6 +11,7 @@
   <app-project-list class="item"
   [projects] = "projects"
   (editProject) = "editProject($event)"
+  (deleteProject) = "deleteProject($event)"
   >
   </app-project-list>
 </div>
diff --git a/src/app/components/options-sidebar/project-management/project-management.component.spec.ts b/src/app/components/options-sidebar/project-management/project-management.component.spec.ts
index 1cd920886..99d961944 100644
--- a/src/app/components/options-sidebar/project-management/project-management.component.spec.ts
+++ b/src/app/components/options-sidebar/project-management/project-management.component.spec.ts
@@ -1,11 +1,15 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
 
 import { ProjectManagementComponent } from './project-management.component';
 import { Project } from '../../../interfaces/project';
+import { ProjectService } from '../../../services/project.service';
+import { of } from 'rxjs';
 
 describe('ProjectManagementComponent', () => {
   let component: ProjectManagementComponent;
   let fixture: ComponentFixture<ProjectManagementComponent>;
+  let projectService: ProjectService;
+
   const projects: Project[] = [{
     id: 1,
     name: 'app 1',
@@ -29,9 +33,17 @@ describe('ProjectManagementComponent', () => {
   }
   ];
 
+  const projectServiceStub = {
+    getProjects() {
+      const projectsMock = projects;
+      return of(projectsMock);
+    }
+  };
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProjectManagementComponent ]
+      declarations: [ ProjectManagementComponent ],
+      providers: [ { provide: ProjectService, useValue: projectServiceStub }]
     })
     .compileComponents();
   }));
@@ -40,9 +52,18 @@ describe('ProjectManagementComponent', () => {
     fixture = TestBed.createComponent(ProjectManagementComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+
+    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);
+    })
+  );
+
   it('should create', () => {
     expect(component).toBeTruthy();
   });
@@ -97,4 +118,34 @@ describe('ProjectManagementComponent', () => {
     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/components/options-sidebar/project-management/project-management.component.ts b/src/app/components/options-sidebar/project-management/project-management.component.ts
index 95dd40cb9..b3404d6a3 100644
--- a/src/app/components/options-sidebar/project-management/project-management.component.ts
+++ b/src/app/components/options-sidebar/project-management/project-management.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Project } from '../../../interfaces/project';
-import { Input } from '@angular/core';
-import { Output, EventEmitter } from '@angular/core';
+import { ProjectService } from '../../../services/project.service';
+
 @Component({
   selector: 'app-project-management',
   templateUrl: './project-management.component.html',
@@ -13,14 +13,13 @@ export class ProjectManagementComponent implements OnInit {
 
   project: Project;
 
-  projects: Project[] = [
-    { id: 1, name: 'GoSpace', details: 'Improve workspaces', status: 'Active', completed: false},
-    { id: 2, name: 'MidoPlay', details: 'Lottery', status: 'Inactive', completed: true}
-  ];
+  projects: Project[] = [];
 
-  constructor() { }
+  constructor(private projectService: ProjectService) {
+  }
 
   ngOnInit(): void {
+    this.getProjects();
   }
 
   updateProject(projectData): void {
@@ -44,7 +43,17 @@ export class ProjectManagementComponent implements OnInit {
     this.project = this.projects.filter((project) => project.id === projectId)[0];
   }
 
+  deleteProject(projectId): void {
+    this.projects = this.projects.filter((project) => project.id !== projectId);
+  }
+
   cancelForm() {
     this.project = null;
   }
+
+   getProjects() {
+    this.projectService.getProjects().subscribe(data => {
+      this.projects = data;
+    });
+  }
 }
diff --git a/src/app/components/options-sidebar/reports/reports.component.spec.ts b/src/app/components/options-sidebar/reports/reports.component.spec.ts
index 8b8ed574f..f2f2f33e7 100644
--- a/src/app/components/options-sidebar/reports/reports.component.spec.ts
+++ b/src/app/components/options-sidebar/reports/reports.component.spec.ts
@@ -6,6 +6,13 @@ describe('ReportsComponent', () => {
   let component: ReportsComponent;
   let fixture: ComponentFixture<ReportsComponent>;
 
+  function setup() {
+    // tslint:disable-next-line: no-shadowed-variable
+    const fixture = TestBed.createComponent(ReportsComponent);
+    const app = fixture.debugElement.componentInstance;
+    return { fixture, app };
+  }
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ ReportsComponent ]
@@ -22,4 +29,14 @@ describe('ReportsComponent', () => {
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
-});
+
+  it('should have p tag as \'reports works!\'', async(() => {
+    // tslint:disable-next-line: no-shadowed-variable
+    const { app, fixture } = setup();
+    fixture.detectChanges();
+    const compile = fixture.debugElement.nativeElement;
+    const ptag = compile.querySelector('p');
+    expect(ptag.textContent).toBe('reports works!');
+  }));
+
+});
\ No newline at end of file
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.css b/src/app/components/options-sidebar/time-clock/time-clock.component.css
index e69de29bb..0e808f74e 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.css
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.css
@@ -0,0 +1,10 @@
+.content-ClockIn {
+  padding: 2.1rem 1rem;
+}
+
+.timer {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+}
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html
index 80644640c..86009b891 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.html
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html
@@ -1,5 +1,85 @@
-<div class="text-center mt-5">
+<div class="text-center mt-3">
 
-    <p>time-clock works!</p>
+    <div *ngIf="showAlertEnterTecnology" class="alert alert-danger" role="alert">
+        Field technology is requiered. Enter this field for clock out.
+    </div>
 
+    <div class="card">
+        <div class="card-header">
+            <div class="row">
+                <div class="col-2 text-left">
+                    <strong>Time clock</strong>
+                </div>
+                <div class="col-10 text-right">
+                    <i class="far fa-question-circle"></i>
+                </div>
+            </div>
+        </div>
+
+        <div class="card-body">
+            <p *ngIf="!isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-success">in</strong> at <strong>{{ clockInUsername }}</strong></p>
+            <p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-danger">out</strong> at <strong>{{ clockOutUsername }}</strong></p>
+            <h6 class="text-left"><strong>Totals</strong></h6>
+            <hr>
+            <div class="row">
+                <div class="col-4">
+                    <h6>Current</h6>
+                    <h3>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
+                </div>
+                <div class="col-4">
+                    <h6>Day</h6>
+                    <h3>4:22</h3>
+                </div>
+                <div class="col-4">
+                    <h6>Week</h6>
+                    <h3>14:00</h3>
+                </div>
+            </div>
+            <h6 class="text-left"><strong>Projects</strong></h6>
+            <form>
+                <div class="form-group">
+                    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="&#xF002; Search project" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
+                </div>
+            </form>
+            <p class="text-left"><i class="fas fa-folder"></i><strong>  Top</strong></p>
+            <ul class="list-group">
+                <app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
+            </ul>
+            <br>
+            <form *ngIf="!isClockIn || showFields">
+                <div class="form-group row">
+                    <label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
+                    <div class="col-sm-10">
+                        <input type="text" class="form-control">
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label for="inputJiraTicket" class="col-sm-2 col-form-label text-center"><strong>Jira Ticket</strong></label>
+                    <div class="col-sm-10">
+                        <input type="text" class="form-control">
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
+                    <div class="col-sm-10">
+                        <input #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
+                    </div>
+                </div>
+            </form>
+            <hr>
+            <div class="container">
+                <div class="row">
+                    <div class="col text-left">
+                        <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Options
+                          </button>
+                    </div>
+                    <div class="col text-right">
+                        <button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock In</button>
+                        <button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock Out</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts
index 1c55547bb..4927e4433 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts
@@ -1,25 +1,66 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
 import { TimeClockComponent } from './time-clock.component';
+import { ProjectListHoverComponent } from '../../shared/project-list-hover/project-list-hover.component';
 
 describe('TimeClockComponent', () => {
   let component: TimeClockComponent;
   let fixture: ComponentFixture<TimeClockComponent>;
+  let de: DebugElement;
+
+  function setup() {
+    // tslint:disable-next-line: no-shadowed-variable
+    const fixture = TestBed.createComponent(TimeClockComponent);
+    const app = fixture.debugElement.componentInstance;
+    return { fixture, app };
+  }
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TimeClockComponent ]
-    })
-    .compileComponents();
+      declarations: [TimeClockComponent, ProjectListHoverComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TimeClockComponent);
     component = fixture.componentInstance;
+    de = fixture.debugElement;
     fixture.detectChanges();
   });
 
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have p tag as \'Dario clocked out at hh:mm:ss\'', async(() => {
+    // tslint:disable-next-line: no-shadowed-variable
+    const { app, fixture } = setup();
+    fixture.detectChanges();
+    const compile = fixture.debugElement.nativeElement;
+    const ptag = compile.querySelector('p');
+    expect(ptag.textContent).toBe('Dario clocked out at hh:mm:ss');
+  }));
+
+  it('should set showfileds as true', () => {
+    const show = true;
+    component.setShowFields(show);
+    expect(component.showFields).toBe(true);
+  });
+
+  it('should be called the setShowFields event #1', () => {
+    spyOn(component, 'setShowFields');
+    const showFields = de.query(By.directive(ProjectListHoverComponent));
+    const cmp = showFields.componentInstance;
+    cmp.showFields.emit(true);
+    expect(component.setShowFields).toHaveBeenCalledWith(true);
+  });
+
+  it('should be called the setShowFields event #2', () => {
+    spyOn(component, 'setShowFields');
+    const showFields = de.query(By.directive(ProjectListHoverComponent));
+    const li = showFields.query(By.css('li'));
+    li.nativeElement.click();
+    expect(component.setShowFields).toHaveBeenCalledWith(true);
+  });
 });
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
index f34bb7b11..674c774e8 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
@@ -5,11 +5,66 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './time-clock.component.html',
   styleUrls: ['./time-clock.component.css']
 })
-export class TimeClockComponent implements OnInit {
 
-  constructor() { }
+export class TimeClockComponent  implements OnInit {
 
-  ngOnInit(): void {
+  projects = [
+    { id: 'P1', name: 'Project 1' },
+    { id: 'P2', name: 'Project 2' },
+    { id: 'P3', name: 'Project 3' },
+    { id: 'P4', name: 'Project 4' }
+  ];
+
+  username = 'Dario';
+  clockInUsername = 'hh:mm:ss';
+  clockOutUsername = 'hh:mm:ss';
+  isClockIn: boolean;
+  isEnterTechnology: boolean;
+  showAlertEnterTecnology: boolean;
+
+  hour: number;
+  minute: number;
+  seconds: number;
+
+  showFields: boolean;
+
+  constructor() {
+    this.isClockIn = true;
+    this.isEnterTechnology = false;
+    this.hour = 0;
+    this.minute = 0;
+    this.seconds = 0;
+   }
+
+   employeClockIn(): boolean {
+     this.isClockIn = !this.isClockIn;
+     return this.isClockIn;
+   }
+
+   employeClockOut() {
+     if ( this.isEnterTechnology === false ) {
+       this.isClockIn = false;
+       this.showAlertEnterTecnology = true;
+     } else {
+       this.isClockIn = true;
+       this.isEnterTechnology = false;
+       this.showAlertEnterTecnology = false;
+     }
+   }
+
+   enterTechnology(data: string) {
+     if ( data.length > 0 ) {
+      this.isEnterTechnology = true;
+     } else {
+       this.isEnterTechnology = false;
+     }
+   }
+
+   setShowFields(show: boolean) {
+    this.isClockIn = false;
+    this.showFields = show;
   }
 
+  ngOnInit(): void {}
+
 }
diff --git a/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts b/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts
index 2ed82ad2e..304646888 100644
--- a/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts
+++ b/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts
@@ -6,6 +6,13 @@ describe('TimeEntriesComponent', () => {
   let component: TimeEntriesComponent;
   let fixture: ComponentFixture<TimeEntriesComponent>;
 
+  function setup() {
+    // tslint:disable-next-line: no-shadowed-variable
+    const fixture = TestBed.createComponent(TimeEntriesComponent);
+    const app = fixture.debugElement.componentInstance;
+    return { fixture, app };
+  }
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ TimeEntriesComponent ]
@@ -22,4 +29,14 @@ describe('TimeEntriesComponent', () => {
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
-});
+
+  it('should have p tag as \'time-entries works!\'', async(() => {
+    // tslint:disable-next-line: no-shadowed-variable
+    const { app, fixture } = setup();
+    fixture.detectChanges();
+    const compile = fixture.debugElement.nativeElement;
+    const ptag = compile.querySelector('p');
+    expect(ptag.textContent).toBe('time-entries works!');
+  }));
+
+});
\ No newline at end of file
diff --git a/src/app/components/options-sidebar/time-off/time-off.component.spec.ts b/src/app/components/options-sidebar/time-off/time-off.component.spec.ts
index dfa074f03..8aa6ed544 100644
--- a/src/app/components/options-sidebar/time-off/time-off.component.spec.ts
+++ b/src/app/components/options-sidebar/time-off/time-off.component.spec.ts
@@ -6,6 +6,13 @@ describe('TimeOffComponent', () => {
   let component: TimeOffComponent;
   let fixture: ComponentFixture<TimeOffComponent>;
 
+  function setup() {
+    // tslint:disable-next-line: no-shadowed-variable
+    const fixture = TestBed.createComponent(TimeOffComponent);
+    const app = fixture.debugElement.componentInstance;
+    return { fixture, app };
+  }
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ TimeOffComponent ]
@@ -22,4 +29,13 @@ describe('TimeOffComponent', () => {
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have p tag as \'time-off works!\'', async(() => {
+    // tslint:disable-next-line: no-shadowed-variable
+    const { app, fixture } = setup();
+    fixture.detectChanges();
+    const compile = fixture.debugElement.nativeElement;
+    const ptag = compile.querySelector('p');
+    expect(ptag.textContent).toBe('time-off works!');
+  }));
 });
diff --git a/src/app/components/shared/clock/clock.component.spec.ts b/src/app/components/shared/clock/clock.component.spec.ts
index 22d176fcc..761908de4 100644
--- a/src/app/components/shared/clock/clock.component.spec.ts
+++ b/src/app/components/shared/clock/clock.component.spec.ts
@@ -6,6 +6,7 @@ describe('ClockComponent', () => {
   let component: ClockComponent;
   let fixture: ComponentFixture<ClockComponent>;
 
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ ClockComponent ]
@@ -22,4 +23,15 @@ describe('ClockComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should show the current hour of day', () => {
+    const currentHour = 11;
+    expect(component.currentDate.getHours()).toEqual(currentHour);
+  });
+
+  it('should show the current minutes of day', () => {
+    const currenMinutes = 5;
+    expect(component.currentDate.getMinutes()).toEqual(currenMinutes);
+  });
+
 });
diff --git a/src/app/components/shared/clock/clock.component.ts b/src/app/components/shared/clock/clock.component.ts
index cf8f474d4..0eea6b977 100644
--- a/src/app/components/shared/clock/clock.component.ts
+++ b/src/app/components/shared/clock/clock.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { interval, timer } from 'rxjs';
 
 @Component({
   selector: 'app-clock',
@@ -7,23 +8,30 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ClockComponent implements OnInit {
 
-  currentDate: Date;
+  currentDate: Date = new Date();
   hour: number;
   minutes: number;
   seconds: number;
   displayTime: boolean;
 
   constructor() {
-    this.currentDate = new Date();
-    this.hour = this.currentDate.getHours();
-    this.minutes = this.currentDate.getMinutes();
-    this.seconds = this.currentDate.getSeconds();
+    this.showClcok();
     this.displayTime = false;
     setTimeout(() => {
       this.displayTime = true;
     }, 3000);
    }
 
+   showClcok() {
+    const timenInterval = interval(1000);
+    timenInterval.subscribe( (data) => {
+      this.currentDate = new Date();
+      this.hour = this.currentDate.getHours();
+      this.minutes = this.currentDate.getMinutes();
+      this.seconds = this.currentDate.getSeconds();
+    });
+   }
+
   ngOnInit(): void {
   }
 
diff --git a/src/app/components/shared/details-fields/details-fields.component.css b/src/app/components/shared/details-fields/details-fields.component.css
new file mode 100644
index 000000000..82869783c
--- /dev/null
+++ b/src/app/components/shared/details-fields/details-fields.component.css
@@ -0,0 +1,3 @@
+.span-width {
+  width: 6rem;
+}
diff --git a/src/app/components/shared/details-fields/details-fields.component.html b/src/app/components/shared/details-fields/details-fields.component.html
new file mode 100644
index 000000000..7365bc192
--- /dev/null
+++ b/src/app/components/shared/details-fields/details-fields.component.html
@@ -0,0 +1,44 @@
+<form>
+  <div class="input-group input-group-sm mb-3">
+    <div class="input-group-prepend">
+      <label class="input-group-text span-width" for="inputGroupSelect01">Activity</label>
+    </div>
+    <select class="custom-select" id="inputGroupSelect01">
+      <option selected>Choose...</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-3">
+    <div class="input-group-prepend">
+      <span class="input-group-text span-width" id="inputGroup-sizing-sm"
+        >Jira Ticket</span
+      >
+    </div>
+    <input
+      type="text"
+      class="form-control"
+      aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm"
+    />
+  </div>
+  <div class="input-group input-group-sm mb-3">
+    <div class="input-group-prepend">
+      <span class="input-group-text span-width" id="inputGroup-sizing-sm">Technology</span>
+    </div>
+    <input
+      type="text"
+      class="form-control"
+      aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm"
+    />
+  </div>
+  <div class="form-group">
+    <label for="NotesTextarea">Notes</label>
+    <textarea class="form-control" id="NotesTextarea" rows="3"></textarea>
+  </div>
+</form>
+<button class="btn btn-danger btn-sm">
+  Clock Out
+</button>
diff --git a/src/app/components/shared/details-fields/details-fields.component.spec.ts b/src/app/components/shared/details-fields/details-fields.component.spec.ts
new file mode 100644
index 000000000..18266ca45
--- /dev/null
+++ b/src/app/components/shared/details-fields/details-fields.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsFieldsComponent } from './details-fields.component';
+
+describe('DetailsFieldsComponent', () => {
+  let component: DetailsFieldsComponent;
+  let fixture: ComponentFixture<DetailsFieldsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DetailsFieldsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailsFieldsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/details-fields/details-fields.component.ts b/src/app/components/shared/details-fields/details-fields.component.ts
new file mode 100644
index 000000000..eea5de70b
--- /dev/null
+++ b/src/app/components/shared/details-fields/details-fields.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-details-fields',
+  templateUrl: './details-fields.component.html',
+  styleUrls: ['./details-fields.component.css']
+})
+export class DetailsFieldsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/components/shared/modal/modal.component.css b/src/app/components/shared/modal/modal.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/components/shared/modal/modal.component.html b/src/app/components/shared/modal/modal.component.html
new file mode 100644
index 000000000..8e07addaa
--- /dev/null
+++ b/src/app/components/shared/modal/modal.component.html
@@ -0,0 +1,17 @@
+<div class="modal-dialog" role="document">
+  <div class="modal-content" *ngIf="project">
+    <div class="modal-header">
+      <h5 class="modal-title" id="exampleModalLabel">Delete Project</h5>
+      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="modal-body">
+      Are you sure you want to delete {{project.name}} project?
+    </div>
+    <div class="modal-footer">
+      <button #cancelDeleteModal type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+      <button (click)="removedProject(project.id)" type="button" class="btn btn-primary">Delete</button>
+    </div>
+  </div>
+</div>
diff --git a/src/app/components/shared/modal/modal.component.spec.ts b/src/app/components/shared/modal/modal.component.spec.ts
new file mode 100644
index 000000000..fc32a90f0
--- /dev/null
+++ b/src/app/components/shared/modal/modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalComponent } from './modal.component';
+
+describe('ModalComponent', () => {
+  let component: ModalComponent;
+  let fixture: ComponentFixture<ModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/modal/modal.component.ts b/src/app/components/shared/modal/modal.component.ts
new file mode 100644
index 000000000..1180b9572
--- /dev/null
+++ b/src/app/components/shared/modal/modal.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Output, EventEmitter } from '@angular/core';
+import { Input } from '@angular/core';
+import { Project } from '../../../interfaces/project'
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.css']
+})
+export class ModalComponent implements OnInit {
+
+  @Input() project: Project;
+  @Output() removeProject = new EventEmitter();
+
+  @ViewChild('cancelDeleteModal') cancelDeleteModal: ElementRef;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  removedProject(projectId) {
+    this.removeProject.emit(projectId);
+    this.cancelDeleteModal.nativeElement.click();
+  }
+}
diff --git a/src/app/components/shared/project-list-hover/project-list-hover.component.css b/src/app/components/shared/project-list-hover/project-list-hover.component.css
new file mode 100644
index 000000000..4bdee70fe
--- /dev/null
+++ b/src/app/components/shared/project-list-hover/project-list-hover.component.css
@@ -0,0 +1,15 @@
+.content-projects {
+  max-height: 10rem;
+  overflow-x: auto;
+}
+
+.content-projects > li {
+  cursor: pointer;
+  font-size: 0.8rem;
+  padding: 0.5rem 0.8rem;
+}
+
+.button-clockIn {
+  font-size: 0.7rem;
+  padding: 0 0.3rem;
+}
diff --git a/src/app/components/shared/project-list-hover/project-list-hover.component.html b/src/app/components/shared/project-list-hover/project-list-hover.component.html
new file mode 100644
index 000000000..212bf4d2d
--- /dev/null
+++ b/src/app/components/shared/project-list-hover/project-list-hover.component.html
@@ -0,0 +1,17 @@
+<ul class="list-group content-projects">
+  <li
+    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
+    *ngFor="let item of projects; let i = index"
+    (mouseenter)="showButton = i"
+    (mouseleave)="showButton = -1"
+    (click)="clockIn(item.id)"
+    [ngClass]="{ active: selectedId === item.id }"
+  >
+    {{ item.name }}
+    <span
+      *ngIf="showButton === i && selectedId !== item.id"
+      class="badge badge-light"
+      >Clock In</span
+    >
+  </li>
+</ul>
diff --git a/src/app/components/shared/project-list-hover/project-list-hover.component.spec.ts b/src/app/components/shared/project-list-hover/project-list-hover.component.spec.ts
new file mode 100644
index 000000000..85024d03a
--- /dev/null
+++ b/src/app/components/shared/project-list-hover/project-list-hover.component.spec.ts
@@ -0,0 +1,38 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { ProjectListHoverComponent } from "./project-list-hover.component";
+
+describe("ProjectListHoverComponent", () => {
+  let component: ProjectListHoverComponent;
+  let fixture: ComponentFixture<ProjectListHoverComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProjectListHoverComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectListHoverComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("should set selectedId with Id", () => {
+    const id: string = "P1";
+    component.clockIn(id);
+    expect(component.selectedId).toBe(id);
+  });
+
+  it("should emit showFields event", () => {
+    const id: string = "P1";
+    component.showFields.subscribe((showFields: boolean) =>
+      expect(showFields).toEqual(true)
+    );
+    component.clockIn(id);
+  });
+});
diff --git a/src/app/components/shared/project-list-hover/project-list-hover.component.ts b/src/app/components/shared/project-list-hover/project-list-hover.component.ts
new file mode 100644
index 000000000..caf0c8b4c
--- /dev/null
+++ b/src/app/components/shared/project-list-hover/project-list-hover.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
+
+@Component({
+  selector: "app-project-list-hover",
+  templateUrl: "./project-list-hover.component.html",
+  styleUrls: ["./project-list-hover.component.css"]
+})
+export class ProjectListHoverComponent implements OnInit {
+  @Input() projects: any;
+  @Output() showFields = new EventEmitter<boolean>();
+
+  selectedId: string;
+  showButton: number;
+
+  constructor() {
+    this.showButton = -1;
+  }
+
+  ngOnInit(): void {}
+
+  clockIn(id: string) {
+    this.selectedId = id;
+    this.showFields.emit(true);
+  }
+}
diff --git a/src/app/components/shared/project-list/project-list.component.html b/src/app/components/shared/project-list/project-list.component.html
index 4edb05638..b7204311f 100644
--- a/src/app/components/shared/project-list/project-list.component.html
+++ b/src/app/components/shared/project-list/project-list.component.html
@@ -1,28 +1,47 @@
 <div class="card-body">
   <h1 class="card-title">Project List</h1>
   <div class="scroll">
-    <div class="accordion" id="accordionExample">
-      <div class="card" *ngFor="let project of projects; let rowIndex = index">
-        <div class="card-header">
-          <h2 class="mb-0">
-            <a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex" [attr.aria-controls]="'row'+rowIndex">
-              {{project.name}}
-            </a>
-            <button (click)="editProject.emit(project.id)" class="btn btn-outline-primary float-right">edit</button>
-          </h2>
-        </div>
+    <div class="accordion" id="accordionProject">
+      <div *ngIf="projects?.length > 0; else notShow">
+        <div class="card" *ngFor="let project of projects; let rowIndex = index">
+          <div class="card-header">
+            <h2 class="mb-0">
+              <a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex" [attr.aria-controls]="'row'+rowIndex">
+                {{project.name}}
+              </a>
+              <div class="btn-group float-right" role="group" >
+                <i (click)="editProject.emit(project.id)" class="far fa-edit btn btn-link"></i>
+                <i (click)="openModal(project)" data-toggle="modal" data-target="#deleteModal" class="far fa-trash-alt btn btn-link"></i>
+              </div>
+            </h2>
+          </div>
 
-        <div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionExample">
-          <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>
+          <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>
+            </div>
           </div>
         </div>
       </div>
+      <ng-template #notShow>
+        <div class="card">
+          <div class="card-body">
+            <h4 class="card-text">There is no any project.</h4>
+            <h5 class="card-text">Please, create one.</h5>
+          </div>
+        </div>
+      </ng-template>
     </div>
   </div>
 </div>
+
+<app-modal *ngIf = "openDeleteModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true"
+[project] = "projectToDelete"
+(removeProject) = "removeProject($event)"
+>
+</app-modal>
diff --git a/src/app/components/shared/project-list/project-list.component.ts b/src/app/components/shared/project-list/project-list.component.ts
index 760dbf0c3..6fc799c95 100644
--- a/src/app/components/shared/project-list/project-list.component.ts
+++ b/src/app/components/shared/project-list/project-list.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Input } from '@angular/core';
 import { Output, EventEmitter } from '@angular/core';
+import { Project } from '../../../interfaces/project';
 
 @Component({
   selector: 'app-project-list',
@@ -9,11 +10,25 @@ import { Output, EventEmitter } from '@angular/core';
 })
 export class ProjectListComponent implements OnInit {
 
-  @Input() projects: any[];
+  @Input() projects: Project[] = [];
   @Output() editProject = new EventEmitter();
+  @Output() deleteProject = new EventEmitter();
+
+  projectToDelete: Project;
+  openDeleteModal: Boolean = false;
 
   constructor() { }
 
   ngOnInit(): void {
   }
+
+  openModal(projectData) {
+    this.projectToDelete = projectData;
+    this.openDeleteModal = true;
+  }
+
+  removeProject(projectId) {
+    this.deleteProject.emit(projectId);
+    this.projectToDelete = null;
+  }
 }
diff --git a/src/app/services/project.service.spec.ts b/src/app/services/project.service.spec.ts
new file mode 100644
index 000000000..856ff3780
--- /dev/null
+++ b/src/app/services/project.service.spec.ts
@@ -0,0 +1,23 @@
+import { TestBed, inject, async } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+import { ProjectService } from './project.service';
+
+describe('ProjectService', () => {
+  let service: ProjectService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule]
+    });
+    service = TestBed.inject(ProjectService);
+  });
+
+
+  it('should create', inject([HttpClientTestingModule, ProjectService],
+    (httpClient: HttpClientTestingModule, apiService: ProjectService) => {
+      expect(apiService).toBeTruthy();
+      expect(httpClient).toBeTruthy();
+  }));
+
+});
diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts
new file mode 100644
index 000000000..33a2395b9
--- /dev/null
+++ b/src/app/services/project.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Project } from '../interfaces/project';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProjectService {
+
+  projects: Project[] = [];
+  url = 'assets/project.json';
+
+  constructor(private http: HttpClient) {}
+
+  getProjects(): Observable<Project[]> {
+    return this.http.get<Project[]>(this.url);
+  }
+}
diff --git a/src/assets/project.json b/src/assets/project.json
new file mode 100644
index 000000000..440418f9c
--- /dev/null
+++ b/src/assets/project.json
@@ -0,0 +1,16 @@
+[
+  {
+    "id": 1,
+    "name": "GoSpace",
+    "details": "This app help to improve your workspace.",
+    "status": "Active",
+    "completed": false
+  },
+  {
+    "id": 2,
+    "name": "MidoPlay",
+    "details": "It's a good app to play Lottery",
+    "status": "Inactive",
+    "completed": true
+  }
+]