diff --git a/angular/package-lock.json b/angular/package-lock.json
index e310dea..7c55bcd 100644
--- a/angular/package-lock.json
+++ b/angular/package-lock.json
@@ -2409,6 +2409,12 @@
       "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
       "dev": true
     },
+    "@types/uuid": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.0.0.tgz",
+      "integrity": "sha512-xSQfNcvOiE5f9dyd4Kzxbof1aTrLobL278pGLKOZI6esGfZ7ts9Ka16CzIN6Y8hFHE1C7jIBZokULhK1bOgjRw==",
+      "dev": true
+    },
     "@types/webpack-sources": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.8.tgz",
@@ -6953,6 +6959,12 @@
             "yallist": "^3.0.3"
           }
         },
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        },
         "which": {
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -13030,6 +13042,14 @@
         "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "require-directory": {
@@ -14043,6 +14063,14 @@
         "faye-websocket": "^0.10.0",
         "uuid": "^3.4.0",
         "websocket-driver": "0.6.5"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "sockjs-client": {
@@ -14941,6 +14969,12 @@
           "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
           "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==",
           "dev": true
+        },
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
         }
       }
     },
@@ -15476,6 +15510,12 @@
           "requires": {
             "ms": "^2.1.1"
           }
+        },
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
         }
       }
     },
@@ -15792,10 +15832,9 @@
       "dev": true
     },
     "uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "dev": true
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.2.0.tgz",
+      "integrity": "sha512-CYpGiFTUrmI6OBMkAdjSDM0k5h8SkkiTP4WAjQgDgNB1S3Ou9VBEvr6q0Kv2H1mMk7IWfxYGpMH5sd5AvcIV2Q=="
     },
     "valid-url": {
       "version": "1.0.9",
@@ -16719,6 +16758,14 @@
       "requires": {
         "ansi-colors": "^3.0.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "webpack-merge": {
diff --git a/angular/package.json b/angular/package.json
index 0cc5a48..9ad87f5 100644
--- a/angular/package.json
+++ b/angular/package.json
@@ -28,6 +28,7 @@
     "firebase": "^7.15.5",
     "rxjs": "~6.5.5",
     "tslib": "^2.0.0",
+    "uuid": "^8.2.0",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
@@ -38,6 +39,7 @@
     "@types/jasmine": "~3.5.11",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "^14.0.14",
+    "@types/uuid": "^8.0.0",
     "codecov": "^3.7.0",
     "codelyzer": "^6.0.0-next.1",
     "firebase-tools": "^8.4.3",
diff --git a/angular/src/app/app-routing.module.ts b/angular/src/app/app-routing.module.ts
index e854536..ca698b7 100644
--- a/angular/src/app/app-routing.module.ts
+++ b/angular/src/app/app-routing.module.ts
@@ -8,6 +8,7 @@ import {AuthComponent} from './navpages/auth/auth.component';
 import {InfoComponent} from './navpages/info/info.component';
 import {SvgComponent} from './navpages/svg/svg.component';
 import {NotificationComponent} from './navpages/notification/notification.component';
+import {PomodoroComponent} from './navpages/pomodoro/pomodoro.component';
 
 
 
@@ -19,6 +20,7 @@ const routes: Routes = [
   {path: 'page1', component: Page1Component},
   {path: 'info', component: InfoComponent},
   {path: 'notification', component: NotificationComponent},
+  {path: 'pomodoro', component: PomodoroComponent},
   {path: 'svg', component: SvgComponent},
   {path: 'auth', component: AuthComponent},
 
diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts
index 8c6b958..312e524 100644
--- a/angular/src/app/app.module.ts
+++ b/angular/src/app/app.module.ts
@@ -20,6 +20,7 @@ import { InfoComponent } from './navpages/info/info.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { NotificationComponent } from './navpages/notification/notification.component';
 import {HttpClientModule} from '@angular/common/http';
+import { PomodoroComponent, DialogComponent } from './navpages/pomodoro/pomodoro.component';
 
 
 @NgModule({
@@ -34,7 +35,8 @@ import {HttpClientModule} from '@angular/common/http';
     DataComponent,
     SvgComponent,
     InfoComponent,
-    NotificationComponent
+    NotificationComponent,
+    PomodoroComponent, DialogComponent
   ],
   imports: [
     BrowserModule,
diff --git a/angular/src/app/navbars/navbar/navbar.component.html b/angular/src/app/navbars/navbar/navbar.component.html
index 9130fe5..2bee93f 100644
--- a/angular/src/app/navbars/navbar/navbar.component.html
+++ b/angular/src/app/navbars/navbar/navbar.component.html
@@ -21,6 +21,7 @@
   <button mat-menu-item (click)="navigateMenu('Page0')">Page0</button>
   <button mat-menu-item (click)="navigateMenu('Page1')">Page1</button>
   <button mat-menu-item (click)="navigateMenu('Notification')">Notification</button>
+  <button mat-menu-item (click)="navigateMenu('Pomodoro')">Pomodoro</button>
   <button mat-menu-item (click)="navigateMenu('Info')">Info</button>
   <button mat-menu-item (click)="navigateMenu('SVG')">SVG</button>
   <button mat-menu-item (click)="navigateMenu('Auth')">Auth</button>
diff --git a/angular/src/app/navbars/navbar/navbar.component.ts b/angular/src/app/navbars/navbar/navbar.component.ts
index 6e4f5d0..397543c 100644
--- a/angular/src/app/navbars/navbar/navbar.component.ts
+++ b/angular/src/app/navbars/navbar/navbar.component.ts
@@ -39,6 +39,9 @@ export class NavbarComponent implements OnInit {
     if (tag === 'Notification'){
       this.router.navigate(['/notification']);
     }
+    if (tag === 'Pomodoro'){
+      this.router.navigate(['/pomodoro']);
+    }
   }
 
   onNavigate(): void{
diff --git a/angular/src/app/navpages/pomodoro/dialog-dialog.html b/angular/src/app/navpages/pomodoro/dialog-dialog.html
new file mode 100644
index 0000000..bf800ea
--- /dev/null
+++ b/angular/src/app/navpages/pomodoro/dialog-dialog.html
@@ -0,0 +1,18 @@
+<h1 mat-dialog-title>{{data.name}}</h1>
+<div mat-dialog-content>
+
+  <mat-form-field>
+    <mat-label>Tag</mat-label>
+    <input matInput [(ngModel)]="data.tag">
+  </mat-form-field>
+  <mat-form-field>
+    <mat-label>Description</mat-label>
+    <input matInput [(ngModel)]="data.description">
+  </mat-form-field>
+</div>
+
+<div mat-dialog-actions>
+  <p>Ready to execute task?</p>
+  <button mat-button (click)="onNoClick()">Cancel</button>
+  <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Execute</button>
+</div>
diff --git a/angular/src/app/navpages/pomodoro/pomodoro.component.css b/angular/src/app/navpages/pomodoro/pomodoro.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/angular/src/app/navpages/pomodoro/pomodoro.component.html b/angular/src/app/navpages/pomodoro/pomodoro.component.html
new file mode 100644
index 0000000..aea7392
--- /dev/null
+++ b/angular/src/app/navpages/pomodoro/pomodoro.component.html
@@ -0,0 +1,36 @@
+<p>pomodoro works!</p>
+
+
+<mat-card style="background-color: #edf3f6;">
+
+  <div *ngIf="fba.user | async as user; else showLogin">
+    <h2>Hello {{ user.displayName }}!</h2>
+    <button (click)="logout()">Logout</button>
+  </div>
+  <ng-template #showLogin>
+    <p>Please login.</p>
+    <button (click)="login()">Login with Google</button>
+  </ng-template>
+
+</mat-card>
+
+
+
+
+<div>
+<mat-form-field>
+  <mat-label>Task name?</mat-label>
+  <input matInput [(ngModel)]="name">
+</mat-form-field>
+</div>
+
+<div>
+<mat-form-field>
+  <mat-label>Time in minutes</mat-label>
+  <input matInput [(ngModel)]="minutes">
+</mat-form-field>
+</div>
+
+<div>
+<button mat-raised-button (click)="openDialog()">Set</button>
+</div>
diff --git a/angular/src/app/navpages/pomodoro/pomodoro.component.spec.ts b/angular/src/app/navpages/pomodoro/pomodoro.component.spec.ts
new file mode 100644
index 0000000..d9b52a0
--- /dev/null
+++ b/angular/src/app/navpages/pomodoro/pomodoro.component.spec.ts
@@ -0,0 +1,25 @@
+// import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+//
+// import { PomodoroComponent } from './pomodoro.component';
+//
+// describe('PomodoroComponent', () => {
+//   let component: PomodoroComponent;
+//   let fixture: ComponentFixture<PomodoroComponent>;
+//
+//   beforeEach(async(() => {
+//     TestBed.configureTestingModule({
+//       declarations: [ PomodoroComponent ]
+//     })
+//     .compileComponents();
+//   }));
+//
+//   beforeEach(() => {
+//     fixture = TestBed.createComponent(PomodoroComponent);
+//     component = fixture.componentInstance;
+//     fixture.detectChanges();
+//   });
+//
+//   it('should create', () => {
+//     expect(component).toBeTruthy();
+//   });
+// });
diff --git a/angular/src/app/navpages/pomodoro/pomodoro.component.ts b/angular/src/app/navpages/pomodoro/pomodoro.component.ts
new file mode 100644
index 0000000..0bf02f1
--- /dev/null
+++ b/angular/src/app/navpages/pomodoro/pomodoro.component.ts
@@ -0,0 +1,92 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {DataService, Data} from '../../service/firebase/pomodoro/data.service';
+import {AngularFireAuth} from '@angular/fire/auth';
+import {auth} from 'firebase';
+import { v1 as uuid } from 'uuid';
+
+
+export interface DialogData {
+  minutes: number;
+  name: string;
+  tag: string;
+  description: string;
+}
+
+
+@Component({
+  selector: 'app-pomodoro',
+  templateUrl: './pomodoro.component.html',
+  styleUrls: ['./pomodoro.component.css']
+})
+export class PomodoroComponent implements OnInit {
+  name: string;
+  minutes: string;
+  data: Data = {date: '', description: '', id: uuid(), minutes: 0, name: '', status: '', tag: '', timeStamp: undefined};
+
+  constructor(public dialog: MatDialog,
+              public dataService: DataService,
+              public fba: AngularFireAuth) {
+
+  }
+  login(): void {
+    // Make sure domain is white listed on Firebase
+    this.fba.signInWithPopup(new auth.GoogleAuthProvider());
+
+  }
+
+  logout(): void {
+    this.fba.signOut();
+  }
+
+  openDialog(): void {
+    const dialogRef = this.dialog.open(DialogComponent, {
+      width: '250px',
+      data: {name: this.name,
+        minutes: this.minutes,
+      description: this.data.description,
+      tag: this.data.tag}
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+      this.data.tag = result.tag;
+      this.data.description = result.description;
+      console.log(`result.tag: ${result.tag}`);
+      this.updateFirebase();
+    });
+  }
+
+  updateFirebase(): void {
+
+    const timeStamp = new Date();
+    this.data.name = this.name;
+    this.data.minutes = parseInt(this.minutes, 10);
+    this.data.timeStamp = timeStamp;
+    this.data.date = timeStamp.toDateString();
+    this.data.status = 'active';
+    this.dataService.addData(this.data);
+
+  }
+
+
+  ngOnInit(): void {
+  }
+
+}
+
+@Component({
+  selector: 'app-dialog',
+  templateUrl: './dialog-dialog.html',
+})
+export class DialogComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<DialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+}
diff --git a/angular/src/app/service/firebase/pomodoro/data.service.spec.ts b/angular/src/app/service/firebase/pomodoro/data.service.spec.ts
new file mode 100644
index 0000000..b759206
--- /dev/null
+++ b/angular/src/app/service/firebase/pomodoro/data.service.spec.ts
@@ -0,0 +1,16 @@
+// import { TestBed } from '@angular/core/testing';
+//
+// import { DataService } from './data.service';
+//
+// describe('DataService', () => {
+//   let service: DataService;
+//
+//   beforeEach(() => {
+//     TestBed.configureTestingModule({});
+//     service = TestBed.inject(DataService);
+//   });
+//
+//   it('should be created', () => {
+//     expect(service).toBeTruthy();
+//   });
+// });
diff --git a/angular/src/app/service/firebase/pomodoro/data.service.ts b/angular/src/app/service/firebase/pomodoro/data.service.ts
new file mode 100644
index 0000000..04fe240
--- /dev/null
+++ b/angular/src/app/service/firebase/pomodoro/data.service.ts
@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import {AngularFirestore, AngularFirestoreDocument} from '@angular/fire/firestore';
+import {Observable} from 'rxjs';
+
+
+
+export interface Data {
+  name: string;
+  minutes: number;
+  timeStamp: Date;
+  id: string;
+  date: string;
+  status: string;
+  tag: string;
+  description: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+  data: Observable<Data>;
+  now: Date;
+
+  // private collection: AngularFirestoreCollection<Data>;
+  private dataDoc: AngularFirestoreDocument<Data>;
+
+
+  constructor(private afs: AngularFirestore) {
+    // this.collection = afs.collection<Data>('pomodoro/mchirico/tasks')
+    // this.data = this.collection.valueChanges();
+    // this.now = new Date();
+
+    this.dataDoc = afs.doc<Data>('pomodoro/mchirico/tasks/0');
+    this.data = this.dataDoc.valueChanges();
+
+
+
+  }
+  addData(data: Data): void {
+
+    this.dataDoc.set(data).catch(e => {
+      console.log(e);
+    });
+
+  }
+}
diff --git a/angular/src/assets/icons/icon-128x128.png b/angular/src/assets/icons/icon-128x128.png
new file mode 100644
index 0000000..9f9241f
Binary files /dev/null and b/angular/src/assets/icons/icon-128x128.png differ
diff --git a/angular/src/assets/icons/icon-144x144.png b/angular/src/assets/icons/icon-144x144.png
new file mode 100644
index 0000000..4a5f8c1
Binary files /dev/null and b/angular/src/assets/icons/icon-144x144.png differ
diff --git a/angular/src/assets/icons/icon-152x152.png b/angular/src/assets/icons/icon-152x152.png
new file mode 100644
index 0000000..34a1a8d
Binary files /dev/null and b/angular/src/assets/icons/icon-152x152.png differ
diff --git a/angular/src/assets/icons/icon-192x192.png b/angular/src/assets/icons/icon-192x192.png
new file mode 100644
index 0000000..9172e5d
Binary files /dev/null and b/angular/src/assets/icons/icon-192x192.png differ
diff --git a/angular/src/assets/icons/icon-384x384.png b/angular/src/assets/icons/icon-384x384.png
new file mode 100644
index 0000000..e54e8d3
Binary files /dev/null and b/angular/src/assets/icons/icon-384x384.png differ
diff --git a/angular/src/assets/icons/icon-512x512.png b/angular/src/assets/icons/icon-512x512.png
new file mode 100644
index 0000000..51ee297
Binary files /dev/null and b/angular/src/assets/icons/icon-512x512.png differ
diff --git a/angular/src/assets/icons/icon-72x72.png b/angular/src/assets/icons/icon-72x72.png
new file mode 100644
index 0000000..2814a3f
Binary files /dev/null and b/angular/src/assets/icons/icon-72x72.png differ
diff --git a/angular/src/assets/icons/icon-96x96.png b/angular/src/assets/icons/icon-96x96.png
new file mode 100644
index 0000000..d271025
Binary files /dev/null and b/angular/src/assets/icons/icon-96x96.png differ