diff --git a/MyOffice.SPA/src/app/dashboard/outcome/dashboard.component.html b/MyOffice.SPA/src/app/dashboard/outcome/dashboard.component.html
index 1fb082e..db2d6f1 100644
--- a/MyOffice.SPA/src/app/dashboard/outcome/dashboard.component.html
+++ b/MyOffice.SPA/src/app/dashboard/outcome/dashboard.component.html
@@ -13,34 +13,7 @@
 					</div>
 					<div class="body">
 						<div class="example-container">
-							<form [formGroup]="form!" (ngSubmit)="onSubmitClick()">
-								<div class="row">
-									<div class="col-md-6">
-										<mat-form-field class="example-full-width" appearance="fill">
-											<mat-label>From</mat-label>
-											<input matInput [matDatepicker]="pickerFrom" (focus)="pickerFrom.open()" formControlName="dateFrom" required>
-											<mat-hint>YYYY/MM/DD</mat-hint>
-											<mat-datepicker-toggle tabindex="-1" matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
-											<mat-datepicker #pickerFrom></mat-datepicker>
-											<mat-error *ngIf="form.controls?.['dateFrom']?.hasError('required')">
-												Please enter rate date
-											</mat-error>
-										</mat-form-field>
-									</div>
-									<div class="col-md-6">
-										<mat-form-field class="example-full-width" appearance="fill">
-											<mat-label>To</mat-label>
-											<input matInput [matDatepicker]="pickerTo" (focus)="pickerTo.open()" formControlName="dateTo" required>
-											<mat-hint>YYYY/MM/DD</mat-hint>
-											<mat-datepicker-toggle tabindex="-1" matSuffix [for]="pickerTo"></mat-datepicker-toggle>
-											<mat-datepicker #pickerTo></mat-datepicker>
-											<mat-error *ngIf="form.controls?.['dateTo']?.hasError('required')">
-												Please enter rate date
-											</mat-error>
-										</mat-form-field>
-									</div>
-								</div>
-							</form>
+							<app-date-period [from]="dateFrom" [to]="dateTo" (onChange)="onChangePeriod($event)"></app-date-period>
 						</div>
 					</div>
 				</div>
diff --git a/MyOffice.SPA/src/app/dashboard/outcome/dashboard.component.ts b/MyOffice.SPA/src/app/dashboard/outcome/dashboard.component.ts
index c4c0fb6..0d7800f 100644
--- a/MyOffice.SPA/src/app/dashboard/outcome/dashboard.component.ts
+++ b/MyOffice.SPA/src/app/dashboard/outcome/dashboard.component.ts
@@ -8,7 +8,6 @@ import { DecimalPipe } from '@angular/common';
 import { UntypedFormBuilder } from '@angular/forms';
 import { UntypedFormGroup } from '@angular/forms';
 import { Validators } from '@angular/forms';
-import { Inject } from '@angular/core';
 
 // libs
 import {
@@ -21,7 +20,6 @@ import {
 	ApexLegend
 } from "ng-apexcharts";
 import * as moment from 'moment'
-import { MAT_DATE_FORMATS } from '@angular/material/core';
 
 // app
 import { ApiRoutes } from '../../api-routes';
@@ -61,27 +59,20 @@ export class DashboardOutcomeComponent implements OnInit {
 
 	ngOnInit() {
 		this.form = this.fb.group({
-			dateFrom: [
-				this.dateFrom,
-				[Validators.required],
-			],
-			dateTo: [
-				this.dateTo,
-				[Validators.required],
-			],
 		});
-
 		this.loadData();
 	}
 
-	onSubmitClick() {
-
+	onChangePeriod(dates: Date[]) {
+		this.dateFrom = dates[0];
+		this.dateTo = dates[1];
+		this.loadData();
 	}
 
 	private loadData(update?: boolean, category?: string) {
 		let params = new HttpParams()
-			.set('from', '2023-07-01')
-			.set('to', '2023-08-01')
+			.set('from', moment(this.dateFrom).format('YYYY-MM-DD'))
+			.set('to', moment(this.dateTo).format('YYYY-MM-DD'))
 			.set('category', category || '')
 			;
 
diff --git a/MyOffice.SPA/src/app/pages/accounts/account.component.html b/MyOffice.SPA/src/app/pages/accounts/account.component.html
index 685e48d..50c925d 100644
--- a/MyOffice.SPA/src/app/pages/accounts/account.component.html
+++ b/MyOffice.SPA/src/app/pages/accounts/account.component.html
@@ -8,34 +8,9 @@
 			</h4>
 		</mat-panel-description>
 	</mat-expansion-panel-header>
-	<form [formGroup]="form!" (ngSubmit)="onSubmitClick()">
-		<div class="row">
-			<div class="col-md-6">
-				<mat-form-field class="example-full-width" appearance="fill">
-					<mat-label>From</mat-label>
-					<input matInput [matDatepicker]="pickerFrom" (focus)="pickerFrom.open()" formControlName="dateFrom" required>
-					<mat-hint>YYYY/MM/DD</mat-hint>
-					<mat-datepicker-toggle tabindex="-1" matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
-					<mat-datepicker #pickerFrom></mat-datepicker>
-					<mat-error *ngIf="form.controls?.['dateFrom']?.hasError('required')">
-						Please enter rate date
-					</mat-error>
-				</mat-form-field>
-			</div>
-			<div class="col-md-6">
-				<mat-form-field class="example-full-width" appearance="fill">
-					<mat-label>To</mat-label>
-					<input matInput [matDatepicker]="pickerTo" (focus)="pickerTo.open()" formControlName="dateTo" required>
-					<mat-hint>YYYY/MM/DD</mat-hint>
-					<mat-datepicker-toggle tabindex="-1" matSuffix [for]="pickerTo"></mat-datepicker-toggle>
-					<mat-datepicker #pickerTo></mat-datepicker>
-					<mat-error *ngIf="form.controls?.['dateTo']?.hasError('required')">
-						Please enter rate date
-					</mat-error>
-				</mat-form-field>
-			</div>
-		</div>
-	</form>
+	<div>
+		<app-date-period [from]="dateFrom" [to]="dateTo" (onChange)="onChangePeriod($event)"></app-date-period>
+	</div>
 	<hr />
 	<account-motion [motion]="newMotion" [account]="account.account" (onAdd)="handlerOnAdd($event)">
 	</account-motion>
diff --git a/MyOffice.SPA/src/app/pages/accounts/account.component.ts b/MyOffice.SPA/src/app/pages/accounts/account.component.ts
index 27bcb34..96817a2 100644
--- a/MyOffice.SPA/src/app/pages/accounts/account.component.ts
+++ b/MyOffice.SPA/src/app/pages/accounts/account.component.ts
@@ -26,7 +26,8 @@ import { MotionModel } from '../../model/motion.model';
 export class AccountComponent {
 	public motions?: MotionModel[];
 	public newMotion: MotionModel;
-	public form!: UntypedFormGroup;
+	public dateFrom: Date = moment(new Date).add(-7, 'days').toDate();
+	public dateTo: Date = moment(new Date).add(0, 'days').toDate();
 	@Input('account') account!: AccountDetailedModel;
 	@Input('active') active: boolean = false;
 	@Input() reloadEvent!: Observable<string[]>;
@@ -46,16 +47,6 @@ export class AccountComponent {
 	}
 
 	ngOnInit(): void {
-		this.form = this.fb.group({
-			dateFrom: [
-				moment(new Date).add(-7, 'days').toDate(),
-				[Validators.required],
-			],
-			dateTo: [
-				new Date,
-				[Validators.required],
-			],
-		});
 		this.loadMotions();
 
 		this.reloadEvent.subscribe(x => {
@@ -84,10 +75,16 @@ export class AccountComponent {
 		this.motions!.splice(index, 1);
 	}
 
+	onChangePeriod(dates: Date[]) {
+		this.dateFrom = dates[0];
+		this.dateTo = dates[1];
+		this.loadMotions();
+	}
+
 	private loadMotions() {
 		var url = ApiRoutes.Motions.replace(':id', this.account.account.id!);
-		url += '?from=' + moment(this.form.value.dateFrom).format('yyyy-MM-DD');
-		url += '&to=' + moment(this.form.value.dateTo).format('yyyy-MM-DD');
+		url += '?from=' + moment(this.dateFrom).format('yyyy-MM-DD');
+		url += '&to=' + moment(this.dateTo).format('yyyy-MM-DD');
 
 		this.activatedRoute.params.subscribe(params => {
 			this.httpClient
diff --git a/MyOffice.SPA/src/app/shared/components/components.module.ts b/MyOffice.SPA/src/app/shared/components/components.module.ts
index deb4fae..397f535 100644
--- a/MyOffice.SPA/src/app/shared/components/components.module.ts
+++ b/MyOffice.SPA/src/app/shared/components/components.module.ts
@@ -6,11 +6,13 @@ import { TranslateModule } from '@ngx-translate/core';
 import { FileUploadComponent } from './file-upload/file-upload.component';
 import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 import { SharedModule } from '../shared.module';
+import { DatePeriodComponent } from './date-period/date-period.component';
 
 @NgModule({
 	declarations: [
 		FileUploadComponent,
-		BreadcrumbComponent
+		BreadcrumbComponent,
+		DatePeriodComponent,
 	],
 	imports: [
 		SharedModule,
@@ -18,7 +20,8 @@ import { SharedModule } from '../shared.module';
 	],
 	exports: [
 		FileUploadComponent,
-		BreadcrumbComponent
+		BreadcrumbComponent,
+		DatePeriodComponent,
 	],
 })
 export class ComponentsModule {
diff --git a/MyOffice.SPA/src/app/shared/components/date-period/date-period.component.css b/MyOffice.SPA/src/app/shared/components/date-period/date-period.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/MyOffice.SPA/src/app/shared/components/date-period/date-period.component.html b/MyOffice.SPA/src/app/shared/components/date-period/date-period.component.html
new file mode 100644
index 0000000..d4a9468
--- /dev/null
+++ b/MyOffice.SPA/src/app/shared/components/date-period/date-period.component.html
@@ -0,0 +1,28 @@
+<form [formGroup]="form!" (ngSubmit)="onSubmitClick()">
+	<div class="row">
+		<div class="col-md-6">
+			<mat-form-field class="example-full-width" appearance="fill">
+				<mat-label>From</mat-label>
+				<input matInput [matDatepicker]="pickerFrom" (focus)="pickerFrom.open()" formControlName="dateFrom" required (ngModelChange)="onInputChange()">
+				<mat-hint>YYYY/MM/DD</mat-hint>
+				<mat-datepicker-toggle tabindex="-1" matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
+				<mat-datepicker #pickerFrom></mat-datepicker>
+				<mat-error *ngIf="form.controls?.['dateFrom']?.hasError('required')">
+					Please enter rate date
+				</mat-error>
+			</mat-form-field>
+		</div>
+		<div class="col-md-6">
+			<mat-form-field class="example-full-width" appearance="fill">
+				<mat-label>To</mat-label>
+				<input matInput [matDatepicker]="pickerTo" (focus)="pickerTo.open()" formControlName="dateTo" required (ngModelChange)="onInputChange()">
+				<mat-hint>YYYY/MM/DD</mat-hint>
+				<mat-datepicker-toggle tabindex="-1" matSuffix [for]="pickerTo"></mat-datepicker-toggle>
+				<mat-datepicker #pickerTo></mat-datepicker>
+				<mat-error *ngIf="form.controls?.['dateTo']?.hasError('required')">
+					Please enter rate date
+				</mat-error>
+			</mat-form-field>
+		</div>
+	</div>
+</form>
diff --git a/MyOffice.SPA/src/app/shared/components/date-period/date-period.component.spec.ts b/MyOffice.SPA/src/app/shared/components/date-period/date-period.component.spec.ts
new file mode 100644
index 0000000..81cf7ca
--- /dev/null
+++ b/MyOffice.SPA/src/app/shared/components/date-period/date-period.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatePeriodComponent } from './date-period.component';
+
+describe('DatePeriodComponent', () => {
+  let component: DatePeriodComponent;
+  let fixture: ComponentFixture<DatePeriodComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DatePeriodComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DatePeriodComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/MyOffice.SPA/src/app/shared/components/date-period/date-period.component.ts b/MyOffice.SPA/src/app/shared/components/date-period/date-period.component.ts
new file mode 100644
index 0000000..6f3f6b3
--- /dev/null
+++ b/MyOffice.SPA/src/app/shared/components/date-period/date-period.component.ts
@@ -0,0 +1,53 @@
+// app
+import { Component } from '@angular/core';
+import { UntypedFormBuilder } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
+import { Validators } from '@angular/forms';
+import { Input } from '@angular/core';
+import { Output } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+
+// libs
+import * as moment from 'moment'
+
+
+@Component({
+  selector: 'app-date-period',
+  templateUrl: './date-period.component.html',
+  styleUrls: ['./date-period.component.css']
+})
+export class DatePeriodComponent {
+
+	@Input('from') dateFrom!: Date;
+	@Input('to') dateTo!: Date;
+
+	@Output() onChange: EventEmitter<Date[]> = new EventEmitter<Date[]>();
+
+	form!: UntypedFormGroup;
+
+	constructor(
+		private fb: UntypedFormBuilder
+	) {
+
+	}
+
+	ngOnInit() {
+		this.form = this.fb.group({
+			dateFrom: [
+				this.dateFrom,
+				[Validators.required],
+			],
+			dateTo: [
+				this.dateTo,
+				[Validators.required],
+			],
+		});
+	}
+
+	onSubmitClick() {
+	}
+
+	onInputChange() {
+		this.onChange.emit([this.form.value.dateFrom, this.form.value.dateTo]);
+	}
+}