diff --git a/package-lock.json b/package-lock.json
index e3dcd5a49..ab3d3d5f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "digital-office-frontend",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3073,6 +3073,16 @@
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "blob": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz",
@@ -6627,6 +6637,13 @@
         }
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -10231,6 +10248,13 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
+    "nan": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
+      "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanoid": {
       "version": "3.1.16",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.16.tgz",
@@ -16383,7 +16407,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -17022,7 +17050,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
diff --git a/src/app/core/models/leave-time.model.ts b/src/app/core/models/leave-time.model.ts
new file mode 100644
index 000000000..0a338394a
--- /dev/null
+++ b/src/app/core/models/leave-time.model.ts
@@ -0,0 +1,23 @@
+import { LeaveType } from '@data/api/time-service/models/leave-type';
+
+export interface ILeaveType {
+	leaveType: LeaveType;
+	leaveInRussian: string;
+}
+
+export class LeaveTimeModel {
+	private static _leaveTypes: ILeaveType[] = [
+		{ leaveType: LeaveType.SickLeave, leaveInRussian: 'Больничный' },
+		{ leaveType: LeaveType.Idle, leaveInRussian: 'Отгул' },
+		{ leaveType: LeaveType.Training, leaveInRussian: 'Обучение' },
+		{ leaveType: LeaveType.Vacation, leaveInRussian: 'Отпуск' },
+	];
+
+	public static getLeaveInfoByLeaveType(leaveType: LeaveType) {
+		return this._leaveTypes.find((leave: ILeaveType) => leave.leaveType === leaveType);
+	}
+
+	public static getAllLeaveTypes(): ILeaveType[] {
+		return this._leaveTypes.slice();
+	}
+}
diff --git a/src/app/core/services/attendance.service.ts b/src/app/core/services/attendance.service.ts
index 568d3cb70..e2ea5047e 100644
--- a/src/app/core/services/attendance.service.ts
+++ b/src/app/core/services/attendance.service.ts
@@ -1,4 +1,3 @@
-//@ts-nocheck
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { Time } from '@angular/common';
@@ -8,11 +7,11 @@ import { DateService } from './date.service';
 
 @Injectable()
 export class AttendanceService {
-	private readonly _datePeriod = new BehaviorSubject<DatePeriod>(this.dateService.getDefaultDatePeriod(6));
+	private readonly _datePeriod = new BehaviorSubject<DatePeriod>(this.dateService.getDefaultDatePeriod());
 
 	readonly datePeriod$ = this._datePeriod.asObservable();
 
-	private readonly _recommendedTime = new BehaviorSubject<Time>(this.getRecommendedTime(this.datePeriod));
+	private readonly _recommendedTime = new BehaviorSubject<number>(this.getRecommendedTime(this.datePeriod));
 
 	readonly recommendedTime$ = this._recommendedTime.asObservable();
 
@@ -35,22 +34,25 @@ export class AttendanceService {
 		return timeString.length === 1 ? '0' + timeString : timeString;
 	}
 
-	public getRecommendedTime(datePeriod: DatePeriod, hoursPerDay: number = 8, rate: number = 1): Time {
+	public getRecommendedTime(datePeriod: DatePeriod, hoursPerDay: number = 8, skipHolidays = false, rate: number = 1): number {
 		const daysArray: Date[] = [];
 
 		if (datePeriod.endDate && this.dateService.isSameDay(datePeriod.startDate, datePeriod.endDate)) {
-			return { hours: hoursPerDay * rate, minutes: 0 };
+			return hoursPerDay * rate;
 		} else {
-			const startDate = new Date(datePeriod.startDate);
-			const endDate = new Date(datePeriod.endDate);
+			const startDate = new Date(datePeriod.startDate as Date);
+			const endDate = new Date(datePeriod.endDate as Date);
 
 			while (startDate.getDate() !== endDate.getDate()) {
 				daysArray.push(new Date(startDate));
 				startDate.setDate(startDate.getDate() + 1);
 			}
-			const hours = (daysArray.filter((day: Date) => day.getDay() !== 6 && day.getDay() !== 0).length + 1) * hoursPerDay * rate;
 
-			return { hours: hours, minutes: 0 };
+			if (skipHolidays) {
+				return (daysArray.filter((day: Date) => day.getDay() !== 6 && day.getDay() !== 0).length + 1) * hoursPerDay * rate;
+			} else {
+				return (daysArray.length + 1) * hoursPerDay * rate;
+			}
 		}
 	}
 }
diff --git a/src/app/core/services/date.service.ts b/src/app/core/services/date.service.ts
index 7b6f7bc60..c39378923 100644
--- a/src/app/core/services/date.service.ts
+++ b/src/app/core/services/date.service.ts
@@ -1,4 +1,3 @@
-//@ts-nocheck
 import { Injectable } from '@angular/core';
 import { DatePeriod } from '@data/models/date-period';
 import { DayOfWeek } from '@data/models/day-of-week';
@@ -9,8 +8,8 @@ import { DayOfWeek } from '@data/models/day-of-week';
 export class DateService {
 	constructor() {}
 
-	isSameDay(fromDate: Date, toDate: Date): boolean {
-		return fromDate.getTime() === toDate.getTime();
+	isSameDay(fromDate: Date | null, toDate: Date | null): boolean {
+		return fromDate?.getTime() === toDate?.getTime();
 	}
 
 	isSameMonth(fromDate: Date, toDate: Date): boolean {
@@ -31,10 +30,14 @@ export class DateService {
 		}
 	}
 
-	getDefaultDatePeriod(daysFromToday: number): DatePeriod {
-		const today = new Date();
-		const inWeek = this.addDays(today, daysFromToday);
-		return { startDate: today, endDate: inWeek };
+	getDefaultDatePeriod(): DatePeriod {
+		// const today: Date = new Date();
+		const startDate: Date = new Date();
+		const endDate: Date = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 7);
+
+		// const today = new Date();
+		// const inWeek = this.addDays(today, daysFromToday);
+		return { startDate, endDate };
 	}
 
 	getWeek(dateSelected: Date): DayOfWeek[] {
diff --git a/src/app/core/services/time/time.service.ts b/src/app/core/services/time/time.service.ts
index 8058fd105..47ad22f25 100644
--- a/src/app/core/services/time/time.service.ts
+++ b/src/app/core/services/time/time.service.ts
@@ -17,8 +17,9 @@ import { EditWorkTimeMonthLimitRequest } from '@data/api/time-service/models/edi
 export interface IFindWorkTimesRequest {
 	userid?: string;
 	projectid?: string;
-	starttime?: string;
-	endtime?: string;
+	month?: number;
+	year?: number;
+	includedayjobs?: boolean;
 	takeCount?: number;
 	skipCount?: number;
 }
diff --git a/src/app/core/services/user/user.service.ts b/src/app/core/services/user/user.service.ts
index 20d68cfe4..d34e76a7c 100644
--- a/src/app/core/services/user/user.service.ts
+++ b/src/app/core/services/user/user.service.ts
@@ -186,6 +186,7 @@ export class UserService {
 			includecommunications: true,
 			includerole: true,
 			includeimages: true,
+			includeprojects: true,
 		};
 
 		return this.getUser(params).pipe(tap(this._setUser.bind(this)));
diff --git a/src/app/modules/user/components/add-hours/add-hours.component.html b/src/app/modules/user/components/add-hours/add-hours.component.html
index 57964c985..7fe4a7065 100644
--- a/src/app/modules/user/components/add-hours/add-hours.component.html
+++ b/src/app/modules/user/components/add-hours/add-hours.component.html
@@ -1,206 +1,78 @@
-<mat-card class='add-hours card_grid'>
-  <div class="add-hours__header">
-    <h2 doText underlined underlinedSize='sm'>Внести часы</h2>
-  </div>
-  <form
-      [formGroup]="addHoursForm"
-      (ngSubmit)="onSubmit()"
-      autocomplete="off"
-      class="add-hours__form"
-  >
-    <div formGroupName="time" class="add-hours__period">
-      <div>
-        <mat-form-field appearance="fill">
-          <input matInput formControlName="hours" type="text" maxlength="3" />
-          <mat-icon matSuffix aria-label='time'>schedule</mat-icon>
-          <mat-error *ngIf="addHoursForm.get('time')?.invalid">{{ getTimePeriodErrorMessage() }}</mat-error>
-        </mat-form-field>
-        <mat-form-field appearance="fill">
-          <input matInput formControlName="minutes" type="text" maxlength="2" />
-        </mat-form-field>
-      </div>
-      <mat-form-field appearance="fill">
-        <mat-label>Куда</mat-label>
-        <mat-select>
-          <mat-option  *ngFor="let category of categories" [value]="category">
-            {{ category.name }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
+<mat-card class="add-hours card_grid">
+	<h3 class="add-hours__heading" doText underlined underlinedSize="sm">
+		Внести часы в
+		<a class="add-hours__menu text-accent_color_bright" [matMenuTriggerFor]="formTypeMenu"
+			>{{ isProjectForm ? 'проект' : 'отсутствие' }}
+			<mat-icon>expand_more</mat-icon>
+		</a>
+		<mat-menu #formTypeMenu="matMenu">
+			<button mat-menu-item (click)="toggleFormType(true)">Проект</button>
+			<button mat-menu-item (click)="toggleFormType(false)">Отсутствие</button>
+		</mat-menu>
+	</h3>
+	<form [formGroup]="addHoursForm" (ngSubmit)="onSubmit()" autocomplete="off" class="add-hours__form">
+		<div>
+			<ng-container *ngIf="isProjectForm; else absence">
+				<mat-form-field class="add-hours__time" appearance="fill">
+					<input matInput formControlName="time" type="text" maxlength="3" placeholder="0" />
+					<mat-error *ngIf="addHoursForm.controls['time'].errors?.required">Поле обязательно</mat-error>
+					<mat-error *ngIf="addHoursForm.controls['time'].errors?.min">Минимальное значение должно быть больше 0</mat-error>
+					<mat-error *ngIf="addHoursForm.controls['time'].errors?.periodExceedsMaxValue">Превышено максимальное значение</mat-error>
+				</mat-form-field>
+				<span class="h3"
+					>ч за
+					<a *ngIf="!isBeginningOfMonth; else selectMonth">{{ currentDate | date: 'LLLL y' }}</a>
+					<ng-template #selectMonth
+						><a class="add-hours__menu" [matMenuTriggerFor]="monthMenu"
+							>{{ currentDate | date: 'LLLL y' }} <mat-icon>expand_more</mat-icon></a
+						></ng-template
+					>
+				</span>
+				<mat-menu #monthMenu="matMenu">
+					<button mat-menu-item *ngFor="let month of monthOptions" (click)="setMonthToAddTimeTo(month)">
+						{{ month | date: 'LLLL y' | titlecase }}
+					</button>
+				</mat-menu>
+			</ng-container>
 
-    <mat-form-field appearance="fill">
-      <mat-label>{{ chosenCategory.name }}</mat-label>
-      <mat-select id="project" formControlName="project" [value]="options[0]">
-        <mat-option *ngFor="let option of options" [value]="option.id">
-          {{ option.name }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-    <ng-container *ngIf="chosenCategory.name === 'Проект'">
-      <mat-form-field appearance="fill">
-        <mat-label>Задача</mat-label>
-        <input id="task" type="text" matInput formControlName="task"/>
-      </mat-form-field>
-    </ng-container>
-    <mat-form-field appearance="fill">
-      <mat-label>Описание</mat-label>
-      <textarea id="description" matInput formControlName="description"></textarea>
-    </mat-form-field>
-    <ng-container *ngIf="chosenCategory.name === 'Больничный'">
-      <button mat-raised-button>
-        Загрузить документ
-        <mat-icon svgIcon="attach-file" aria-hidden="false" aria-label="Attach file"></mat-icon>
-      </button>
-      <input hidden id="upload-file" type="file" />
-    </ng-container>
-    <button mat-flat-button color='primary' [disabled]="addHoursForm.invalid">Добавить</button>
-  </form>
+			<ng-template #absence>
+				<mat-form-field appearance="fill">
+					<mat-label>Выберите диапазон отсутствия</mat-label>
+					<mat-date-range-input [dateFilter]="disableWeekends" [rangePicker]="$any(picker)" required>
+						<input matStartDate formControlName="startDate" />
+						<input matEndDate formControlName="endDate" />
+					</mat-date-range-input>
+					<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+					<mat-date-range-picker #picker (closed)="onClose()"></mat-date-range-picker>
+				</mat-form-field>
+				<div class="add-hours__absence-time">
+					<p doText>Выбрано</p>
+					<h3 doText>{{ recommendedTime }} ч</h3>
+				</div>
+			</ng-template>
+		</div>
+		<mat-form-field *ngIf="isProjectForm; else absenceSelection" appearance="fill">
+			<mat-label>Выберите проект</mat-label>
+			<mat-select formControlName="activity" required>
+				<mat-option *ngFor="let workTime of workTimes$ | async" [value]="workTime.id" (onSelectionChange)="patchWorkTimeInfoIntoForm(workTime)">
+					{{ workTime.project?.name }}
+				</mat-option>
+			</mat-select>
+		</mat-form-field>
+		<ng-template #absenceSelection>
+			<mat-form-field appearance="fill">
+				<mat-label>Выберите тип отсутствия</mat-label>
+				<mat-select formControlName="activity" required>
+					<mat-option *ngFor="let absence of absences" [value]="absence.leaveType">
+						{{ absence.leaveInRussian }}
+					</mat-option>
+				</mat-select>
+			</mat-form-field>
+		</ng-template>
+		<mat-form-field appearance="fill">
+			<mat-label>Комментарий</mat-label>
+			<textarea matInput formControlName="comment" placeholder="Оставьте комментарий для менеджера"></textarea>
+		</mat-form-field>
+		<button mat-flat-button color="primary" [disabled]="addHoursForm.invalid">{{ isProjectForm ? 'Сохранить' : 'Добавить' }} часы</button>
+	</form>
 </mat-card>
-
-<!--<div class="add-hours card bg-white">
-  <div class="add-hours__header">
-    <span class="add-hours__title h2">Внести часы</span>
-    <div class="add-hours__choice">
-      <button
-        mat-icon-button
-        [matMenuTriggerFor]="menu"
-        class="mat-flat-button add-hours__menu-button"
-        aria-label="Choose category"
-        matTooltipClass="tooltip"
-        matTooltip="Здесь ты можешь внести изменения, например выбрать: Отпуск."
-        [matTooltipPosition]="'above'"
-      >
-        <mat-icon
-          class="add-hours__icon"
-          svgIcon="more"
-          aria-label="More"
-        ></mat-icon>
-      </button>
-      <mat-menu #menu="matMenu" xPosition="before">
-        <div class="add-hours__menu-title h4 text_dark_1">
-          Куда внести часы?
-        </div>
-        <mat-radio-group [(ngModel)]="chosenCategory">
-          <button *ngFor="let category of categories" mat-menu-item>
-            <mat-radio-button
-              [value]="category"
-              class="add-hours__radio h4 text-gray"
-            >
-              {{ category.name }}
-            </mat-radio-button>
-          </button>
-        </mat-radio-group>
-      </mat-menu>
-    </div>
-  </div>
-  <form
-    [formGroup]="addHoursForm"
-    (ngSubmit)="onSubmit()"
-    autocomplete="off"
-    class="add-hours__form regular_text"
-  >
-    <div formGroupName="time" class="add-hours__period">
-      <mat-form-field
-        class="add-hours__form-element add-hours__form-element_ctrl_hours mat-form-field_time-input"
-        appearance="none"
-      >
-        <input
-          matInput
-          formControlName="hours"
-          class="add-hours__time h2 text-dark_1"
-          type="number"
-          maxlength="3"
-        />
-      </mat-form-field>
-      <span class="h2">:</span>
-      <mat-form-field
-        class="add-hours__form-element add-hours__form-element_ctrl_minutes mat-form-field_time-input"
-        appearance="none"
-      >
-        <input
-          matInput
-          formControlName="minutes"
-          class="add-hours__time h2 text-dark_1"
-          type="number"
-          maxlength="2"
-        />
-      </mat-form-field>
-      <span class="h2 add-hours__hours-char">ч</span>
-    </div>
-    <mat-error *ngIf="addHoursForm.get('time').invalid">{{
-      getTimePeriodErrorMessage()
-    }}</mat-error>
-
-    <label class="add-hours__label add-hours__label_for_project" for="project">
-      {{ chosenCategory.name }}
-    </label>
-
-    <mat-form-field
-      class="add-hours__form-element add-hours__form-element_ctrl_project select mat-form-field_default-select"
-      appearance="none"
-    >
-      <mat-select id="project" formControlName="project" [value]="options[0]">
-        <mat-option *ngFor="let option of options" [value]="option.id">
-          {{ option.name }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-    <ng-container *ngIf="chosenCategory.name === 'Проект'">
-      <label class="add-hours__label add-hours__label_for_task" for="task">
-        Задача
-      </label>
-      <mat-form-field
-        class="add-hours__form-element add-hours__form-element_ctrl_task"
-        appearance="none"
-      >
-        <input
-          id="task"
-          formControlName="task"
-          matInput
-          class="bg-light_2"
-          type="text"
-        />
-      </mat-form-field>
-    </ng-container>
-    <label
-      class="add-hours__label add-hours__label_for_description"
-      for="description"
-      >Описание</label
-    >
-    <mat-form-field
-      class="add-hours__form-element add-hours__form-element_ctrl_description"
-      appearance="none"
-    >
-      <textarea
-        id="description"
-        formControlName="description"
-        matInput
-        class="bg-light_2"
-      ></textarea>
-    </mat-form-field>
-    <ng-container *ngIf="chosenCategory.name === 'Больничный'">
-      <label
-        class="add-hours__label add-hours__label_for_description"
-        for="upload-file"
-      >
-        <span>Загрузить документ</span>
-        <mat-icon
-          class="add-hours__icon"
-          svgIcon="attach-file"
-          aria-hidden="false"
-          aria-label="Attach file"
-        >
-        </mat-icon>
-      </label>
-      <input hidden id="upload-file" type="file" />
-    </ng-container>
-    <button
-      mat-flat-button
-      [disabled]="addHoursForm.invalid"
-      class="mat-flat-button mat-flat-button_black add-hours__submit-btn"
-    >
-      Добавить
-    </button>
-  </form>
-</div>-->
diff --git a/src/app/modules/user/components/add-hours/add-hours.component.scss b/src/app/modules/user/components/add-hours/add-hours.component.scss
index 244317bd1..993725e98 100644
--- a/src/app/modules/user/components/add-hours/add-hours.component.scss
+++ b/src/app/modules/user/components/add-hours/add-hours.component.scss
@@ -2,133 +2,40 @@
 @import 'base/fonts';
 
 .add-hours {
-	padding: 40px;
-
-	&__title {
-		color: $dark_1;
-
-		&::after {
-			content: '';
-
-			margin-bottom: 35px;
-
-			display: block;
-
-			width: 123px;
-			height: 4px;
-
-			background-color: $accent_color_bright;
-		}
-	}
+	padding: 32px 48px;
 
 	&__form {
 		display: flex;
 		flex-direction: column;
+		gap: 16px;
 	}
 
-	&__label {
-		margin-bottom: 8px;
-
-		span {
-			margin-right: 10px;
-		}
-
-		&_for_project {
-			margin-top: 16px;
-		}
-
-		&_for_task {
-			margin-top: 12px;
-		}
-
-		&_for_description {
-			margin-top: 8px;
-		}
-	}
-
-	&__form-element {
-		&_ctrl_hours {
-			max-width: 60px;
-		}
-
-		&_ctrl_minutes {
-			max-width: 50px;
-		}
-
-		&_ctrl_description {
-			textarea {
-				resize: none;
-
-				height: 86px;
-			}
-		}
+	&__time {
+		width: 80px;
 	}
 
-	&__period {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-start;
+	&__heading {
+		margin-bottom: 25px;
 	}
 
-	&__hours-char {
-		margin-left: 8px;
-	}
-
-	&__submit-btn {
-		margin-top: 21px;
-	}
-
-	&__header {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	&__icon {
-		vertical-align: middle;
-
-		&_hint {
-			margin-right: 7px;
-
-			float: right;
-		}
-	}
-
-	&__menu-title {
-		padding: 10px;
-
-		font-size: 18px;
-
-		&::after {
-			content: '';
-
-			margin-bottom: 10px;
-
-			display: block;
-
-			width: 123px;
-			height: 2px;
+	&__menu {
+		display: inline-flex;
+		align-items: center;
 
-			background-color: $accent_color_bright;
-		}
+		cursor: pointer;
 	}
 
-	&__menu-button {
-		padding-top: 0;
-		padding-bottom: 0;
+	&__absence-time {
+		margin-left: 32px;
 
-		color: $dark_2;
-		background-color: $light_3;
+		display: inline-block;
 	}
 
-	&__radio {
-		width: inherit;
-		height: inherit;
+	&__date-picker {
+		display: inline-flex;
 
-		font-family: $header_font;
-		font-weight: 400;
+		align-items: center;
 
-		&.mat-radio-button.mat-radio-checked {
-			color: $dark_1;
-		}
+		cursor: pointer;
 	}
 }
diff --git a/src/app/modules/user/components/add-hours/add-hours.component.ts b/src/app/modules/user/components/add-hours/add-hours.component.ts
index 89016beff..9b7e57bdd 100644
--- a/src/app/modules/user/components/add-hours/add-hours.component.ts
+++ b/src/app/modules/user/components/add-hours/add-hours.component.ts
@@ -1,157 +1,172 @@
-//@ts-nocheck
-import { Component, Input, OnDestroy, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { Time } from '@angular/common';
-import { takeUntil } from 'rxjs/operators';
-import { ReplaySubject } from 'rxjs';
-
-import { MatIconRegistry } from '@angular/material/icon';
-import { DomSanitizer } from '@angular/platform-browser';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Observable, of } from 'rxjs';
 
 import { AttendanceService } from '@app/services/attendance.service';
-import { ProjectStore } from '@data/store/project.store';
-import { Project, } from '@app/models/project/project.model';
-import { ITask, Task } from '@app/models/task.model';
-import { UserInfo } from '@data/api/user-service/models/user-info';
+import { DateService } from '@app/services/date.service';
+import { DateFilterFn } from '@angular/material/datepicker';
+import { ILeaveType, LeaveTimeModel } from '@app/models/leave-time.model';
+import { CreateLeaveTimeRequest } from '@data/api/time-service/models/create-leave-time-request';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { OperationResultResponse } from '@data/api/time-service/models/operation-result-response';
+import { IEditWorkTimeRequest, TimeService } from '@app/services/time/time.service';
+import { UserService } from '@app/services/user/user.service';
+import { filter, switchMap } from 'rxjs/operators';
+import { WorkTimeInfo } from '@data/api/time-service/models';
+import { DatePeriod } from '@data/models/date-period';
 import { timeValidator } from './add-hours.validators';
 
 @Component({
 	selector: 'do-add-hours',
 	templateUrl: './add-hours.component.html',
 	styleUrls: ['./add-hours.component.scss'],
-changeDetection: ChangeDetectionStrategy.OnPush,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	providers: [AttendanceService],
 })
-export class AddHoursComponent implements OnInit, OnDestroy {
-	@Input() user: UserInfo;
-	private onDestroy$: ReplaySubject<any> = new ReplaySubject<any>(1);
-
-	public projects: Project[];
+export class AddHoursComponent implements OnInit {
+	public workTimes$: Observable<WorkTimeInfo[]>;
+	public absences: ILeaveType[];
 	public addHoursForm: FormGroup;
-	public setTimePeriod: Time;
-
-	public categories;
-	public chosenCategory;
+	public isProjectForm: boolean;
+	public currentDate: Date;
+	public monthOptions: [Date, Date] | null;
+	public isBeginningOfMonth: boolean;
+	public recommendedTime: number;
 
-	public listOfIcons = [
-		{ name: 'more', url: 'assets/svg/more.svg' },
-		{ name: 'hint', url: 'assets/svg/hint.svg' },
-		{ name: 'attach-file', url: 'assets/svg/attach-file.svg' },
-	];
+	private readonly userId: string | undefined;
 
 	constructor(
-		private fb: FormBuilder,
-		private attendanceService: AttendanceService,
-		private projectStore: ProjectStore,
-		iconRegistry: MatIconRegistry,
-		sanitizer: DomSanitizer
+		private _fb: FormBuilder,
+		private _attendanceService: AttendanceService,
+		private _dateService: DateService,
+		private _timeService: TimeService,
+		private _userService: UserService,
+		private _snackbar: MatSnackBar
 	) {
-		this.projects = [];
-		this.listOfIcons.forEach((icon) => {
-			iconRegistry.addSvgIcon(icon.name, sanitizer.bypassSecurityTrustResourceUrl(icon.url));
+		this.currentDate = new Date();
+		this.recommendedTime = _attendanceService.getRecommendedTime(_attendanceService.datePeriod, 8, true);
+		this.isProjectForm = true;
+		this.absences = LeaveTimeModel.getAllLeaveTypes();
+		this.userId = _userService.getCurrentUser()?.id;
+		this.isBeginningOfMonth = this._canAddTimeToPreviousMonth();
+		this.monthOptions = this.isBeginningOfMonth ? this._getMonthOptions() : null;
+
+		this.addHoursForm = this._fb.group({
+			time: ['', [Validators.required, Validators.min(1), timeValidator(() => this._countMaxHours())]],
+			startDate: [new Date(), [Validators.required]],
+			endDate: [new Date(), [Validators.required]],
+			activity: ['', Validators.required],
+			comment: [''],
 		});
-	}
 
-	ngOnInit() {
-		this.addHoursForm = this.fb.group({
-			time: this.fb.group({
-				hours: ['', [Validators.required, timeValidator(() => this.getHours())]],
-				minutes: ['', [Validators.required, Validators.max(59)]],
-			}),
-			project: ['', Validators.required],
-			task: ['', Validators.required],
-			description: [''],
-		});
+		this.workTimes$ = this._getWorkTimes(this.currentDate.getMonth());
+	}
 
-		this.attendanceService.recommendedTime$.pipe(takeUntil(this.onDestroy$)).subscribe((timePeriod) => {
-			this.setTimePeriod = timePeriod;
-			this.addHoursForm.get('time.hours').setValue(this.attendanceService.normalizeTime(timePeriod.hours));
-			this.addHoursForm.get('time.minutes').setValue(this.attendanceService.normalizeTime(timePeriod.minutes));
-		});
+	ngOnInit() {}
 
-		this.categories = [
-			{ name: 'Проект', options: this.projects },
-			{
-				name: 'Командировка',
-				options: [
-					{ id: 0, name: 'За счёт компании' },
-					{ id: 1, name: 'За счёт компании-партнёра' },
-				],
-			},
-			{
-				name: 'Обучение',
-				options: [
-					{ id: 0, name: 'За свой счёт' },
-					{ id: 1, name: 'За счёт компании' },
-				],
-			},
-			{
-				name: 'Больничный',
-				options: [
-					{ id: 0, name: 'Обычный' },
-					{ id: 1, name: 'Дети/родственники' },
-					{ id: 2, name: 'По беременности и родам' },
-				],
-			},
-			{
-				name: 'Отпуск',
-				options: [
-					{ id: 0, name: 'Ежегодный' },
-					{ id: 1, name: 'За свой счёт' },
-					{ id: 2, name: 'Декретный' },
-				],
-			},
-			{
-				name: 'Отгул',
-				options: [
-					{ id: 0, name: 'Суд' },
-					{ id: 1, name: 'ДТП' },
-					{ id: 2, name: 'Форс-мажор' },
-					{ id: 3, name: 'Похороны' },
-				],
-			},
-		];
-		this.chosenCategory = this.categories[0];
+	private _getWorkTimes(month?: number): Observable<WorkTimeInfo[]> {
+		return this._timeService.findWorkTimes({ skipCount: 0, takeCount: 10, userid: this.userId, month }).pipe(
+			filter((response) => response.body != null),
+			switchMap((response) => of(response.body as WorkTimeInfo[]))
+		);
 	}
 
-	get options() {
-		return this.chosenCategory.options;
+	private _getMonthOptions(): [Date, Date] {
+		return [this.currentDate, new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1)];
 	}
 
-	private getHours(): number {
-		const currentDatePeriod = this.attendanceService.datePeriod;
-		return Number(this.attendanceService.getRecommendedTime(currentDatePeriod, 24).hours);
+	private _canAddTimeToPreviousMonth(): boolean {
+		return new Date().getDate() < 5;
 	}
 
-	public onSubmit(): void {
-		const projectId = this.addHoursForm.get('project').value;
-		console.log(this.addHoursForm);
-		const task: Partial<ITask> = {
-			title: this.addHoursForm.get('task').value,
-			description: this.addHoursForm.get('description').value,
-			createdAt: new Date(),
-			minutes: Number(this.addHoursForm.get('time.minutes').value) + Number(this.addHoursForm.get('time.hours').value) * 60,
-		};
-		this.projectStore.addTaskToProject(task, projectId);
-		this.addHoursForm.reset();
-		const datePeriod = this.attendanceService.datePeriod;
-		this.attendanceService.onDatePeriodChange(datePeriod);
+	public setMonthToAddTimeTo(date: Date): void {
+		if (!this._dateService.isSameMonth(this.currentDate, date)) {
+			this.currentDate = date;
+			this.workTimes$ = this._getWorkTimes(date.getMonth() + 1);
+		}
 	}
 
-	public getTimePeriodErrorMessage(): String {
-		const hours = this.addHoursForm.get('time.hours');
-		const minutes = this.addHoursForm.get('time.minutes');
+	public patchWorkTimeInfoIntoForm(workTime: WorkTimeInfo): void {
+		this.addHoursForm.patchValue({
+			time: workTime.userHours,
+			comment: workTime.description,
+		});
+	}
 
-		if (hours.hasError('periodExceedsMaxValue')) {
-			return 'Превышено максимальное время для выбранного периода';
+	public toggleFormType(isProjectForm: boolean): void {
+		const timeControl = this.addHoursForm.get('time');
+		if (isProjectForm) {
+			timeControl?.setValidators([Validators.required, Validators.min(1), timeValidator(() => this._countMaxHours())]);
+		} else {
+			timeControl?.clearValidators();
 		}
-		if (minutes.hasError('max')) {
-			return 'Введите корректные минуты';
+		timeControl?.updateValueAndValidity();
+		this.isProjectForm = isProjectForm;
+		const { startDate, endDate } = this._dateService.getDefaultDatePeriod();
+		this.addHoursForm.reset({ startDate, endDate });
+	}
+
+	private _countMaxHours(): number {
+		const currentDatePeriod: DatePeriod = {
+			startDate: new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1),
+			endDate: new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 0),
+		};
+		return Number(this._attendanceService.getRecommendedTime(currentDatePeriod, 24));
+	}
+
+	public onSubmit(): void {
+		console.log(this.addHoursForm.value);
+		let timeService: Observable<OperationResultResponse>;
+
+		if (this.isProjectForm) {
+			const addWorkTime: IEditWorkTimeRequest = {
+				workTimeId: this.addHoursForm.get('activity')?.value,
+				body: [
+					{ op: 'replace', path: '/UserHours', value: this.addHoursForm.get('time')?.value },
+					{ op: 'replace', path: '/Description', value: this.addHoursForm.get('comment')?.value },
+				],
+			};
+			timeService = this._timeService.editWorkTime(addWorkTime);
+		} else {
+			const addLeaveTime: CreateLeaveTimeRequest = {
+				userId: this.userId as string,
+				startTime: this.addHoursForm.get('startDate')?.value.toISOString(),
+				endTime: this.addHoursForm.get('endDate')?.value.toISOString(),
+				leaveType: this.addHoursForm.get('activity')?.value,
+				comment: this.addHoursForm.get('comment')?.value,
+			};
+			timeService = this._timeService.addLeaveTime(addLeaveTime);
 		}
-		return 'Введите корретный период времени';
+
+		timeService.subscribe(
+			() => {
+				this._snackbar.open('Запись успешно добавлена!', 'Закрыть', { duration: 5000 });
+				this.addHoursForm.reset();
+				this.isProjectForm = true;
+			},
+			(error) => {
+				this._snackbar.open(error.error.Message, 'Закрыть', { duration: 5000 });
+				throw error;
+			}
+		);
 	}
 
-	ngOnDestroy() {
-		this.onDestroy$.next(null);
-		this.onDestroy$.complete();
+	public disableWeekends: DateFilterFn<Date> = (d: Date | null): boolean => {
+		const day = (d || new Date()).getDay();
+		return day !== 0 && day !== 6;
+	};
+
+	public onClose(): void {
+		const startDateValue = this.addHoursForm.get('startDate')?.value;
+		const endDateControl = this.addHoursForm.get('endDate');
+		if (!endDateControl?.value || this._dateService.isSameDay(startDateValue, endDateControl.value)) {
+			endDateControl?.setValue(new Date(startDateValue.getTime() + 1));
+		}
+
+		const datePeriod: DatePeriod = {
+			startDate: startDateValue,
+			endDate: endDateControl?.value,
+		};
+		this.recommendedTime = this._attendanceService.getRecommendedTime(datePeriod, 8, true);
 	}
 }
diff --git a/src/app/modules/user/components/add-hours/add-hours.validators.ts b/src/app/modules/user/components/add-hours/add-hours.validators.ts
index 4e397e524..9295609f6 100644
--- a/src/app/modules/user/components/add-hours/add-hours.validators.ts
+++ b/src/app/modules/user/components/add-hours/add-hours.validators.ts
@@ -1,7 +1,6 @@
-//@ts-nocheck
 import { AbstractControl, ValidatorFn } from '@angular/forms';
 
 export function timeValidator(countMaxPossibleHours: () => number): ValidatorFn {
 	return (control: AbstractControl): { [key: string]: any } | null =>
-		Number(control.value < countMaxPossibleHours()) ? null : { periodExceedsMaxValue: true };
+		Number(control.value <= countMaxPossibleHours()) ? null : { periodExceedsMaxValue: true };
 }
diff --git a/src/app/modules/user/components/attendance/attendance.component.html b/src/app/modules/user/components/attendance/attendance.component.html
index 228e98973..4ee2eb99d 100644
--- a/src/app/modules/user/components/attendance/attendance.component.html
+++ b/src/app/modules/user/components/attendance/attendance.component.html
@@ -1,13 +1,6 @@
-<h2 >Доска учета времени</h2>
-<do-datedesc></do-datedesc>
+<h2>Доска учета времени</h2>
 <div class="grid">
-  <do-add-hours></do-add-hours>
-  <do-doughnut-chart [projectList]='projects$ | async'></do-doughnut-chart>
-  <do-gradient-graphics [dailyHoursData]="dailyHoursData" [timePeriodSelected]="timePeriodSelected">
-  </do-gradient-graphics>
+	<do-add-hours></do-add-hours>
+	<do-doughnut-chart [projectList]="projects$ | async"></do-doughnut-chart>
 </div>
-<do-user-tasks
-    class='tasks'
-    [timePeriodSelected]='timePeriodSelected'
-    [projects]='projects$ | async'
-></do-user-tasks>
+<do-user-tasks class="tasks" [timePeriodSelected]="timePeriodSelected" [projects]="projects$ | async"></do-user-tasks>
diff --git a/src/app/modules/user/components/attendance/attendance.component.scss b/src/app/modules/user/components/attendance/attendance.component.scss
index 04f0920f6..85a524e46 100644
--- a/src/app/modules/user/components/attendance/attendance.component.scss
+++ b/src/app/modules/user/components/attendance/attendance.component.scss
@@ -1,32 +1,30 @@
 @import 'base/variables';
 
 .grid {
-  margin-top: 40px;
+	margin-top: 40px;
 
-  display: grid;
-  grid-template-columns: 1.1fr 1fr;
-  grid-auto-rows: auto;
-  grid-template-areas:
-    'add-hours doughnut'
-    'add-hours bar-graph';
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
+	display: grid;
+	grid-template-columns: 1.1fr 1fr;
+	grid-auto-rows: auto;
+	grid-template-areas: 'add-hours doughnut';
+	grid-column-gap: 20px;
+	grid-row-gap: 20px;
 
-  do-add-hours {
-    grid-area: add-hours;
-  }
+	do-add-hours {
+		grid-area: add-hours;
+	}
 
-  do-doughnut-chart {
-    grid-area: doughnut;
-  }
+	do-doughnut-chart {
+		grid-area: doughnut;
+	}
 
-  do-gradient-graphics {
-    grid-area: bar-graph;
-  }
+	do-gradient-graphics {
+		grid-area: bar-graph;
+	}
 }
 
 do-user-tasks {
-  margin-top: 48px;
+	margin-top: 48px;
 
-  display: block;
+	display: block;
 }
diff --git a/src/app/modules/user/components/attendance/attendance.component.ts b/src/app/modules/user/components/attendance/attendance.component.ts
index ac9e7171b..e9bd4be68 100644
--- a/src/app/modules/user/components/attendance/attendance.component.ts
+++ b/src/app/modules/user/components/attendance/attendance.component.ts
@@ -1,13 +1,14 @@
-//@ts-nocheck
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 import { DatePeriod } from '@data/models/date-period';
 import { ProjectService } from '@app/services/project/project.service';
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 import { Project } from '@app/models/project/project.model';
 import { map } from 'rxjs/operators';
 import { FindResponseProjectInfo } from '@data/api/project-service/models/find-response-project-info';
 import { ProjectInfo } from '@data/api/project-service/models/project-info';
+import { User } from '@app/models/user/user.model';
+import { UserService } from '@app/services/user/user.service';
 import { AttendanceService } from '@app/services/attendance.service';
 import { IDailyHoursData } from '../gradient-graphics/gradient-graphics.component';
 
@@ -15,10 +16,12 @@ import { IDailyHoursData } from '../gradient-graphics/gradient-graphics.componen
 	selector: 'do-attendance',
 	templateUrl: './attendance.component.html',
 	styleUrls: ['./attendance.component.scss'],
-changeDetection: ChangeDetectionStrategy.OnPush,
-	providers: [AttendanceService]
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	providers: [ AttendanceService ],
 })
 export class AttendanceComponent implements OnInit {
+	public user: User | null;
+
 	public timePeriodSelected: DatePeriod = {
 		startDate: new Date(),
 	};
@@ -34,14 +37,18 @@ export class AttendanceComponent implements OnInit {
 		{ day: '27', month: 'june', hours: 0, minutes: 0 },
 	];
 
-	constructor(private _projectService: ProjectService) {}
-
-	ngOnInit() {
+	constructor(private _projectService: ProjectService, private _userService: UserService) {
+		this.user = null;
 		this.projects$ = this._projectService.findProjects().pipe(
-			map((data: FindResponseProjectInfo) => data.body),
+			map((data: FindResponseProjectInfo) => data.body as ProjectInfo[]),
 			map((data: ProjectInfo[]) => {
 				return data.map((projectInfo: ProjectInfo) => new Project(projectInfo));
 			})
 		);
 	}
+
+	ngOnInit() {
+
+		this.user = this._userService.getCurrentUser();
+	}
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 6068bef35..fbb574e86 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,4 +1,3 @@
-//@ts-nocheck
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
diff --git a/src/stylesheets/base/_variables.scss b/src/stylesheets/base/_variables.scss
index 69d40e875..8d02d370c 100644
--- a/src/stylesheets/base/_variables.scss
+++ b/src/stylesheets/base/_variables.scss
@@ -52,7 +52,7 @@ $colors: (
 );
 
 //Fonts
-$header_font: 'Gotham Pro';
+$header_font: 'Gotham Pro', sans-serif;
 $regular_font: 'GillSansWGL';
 
 //Colors classes