diff --git a/Core/Core/ClientApp/src/app/home/home.component.css b/Core/Core/ClientApp/src/app/home/home.component.css
index 59554c9ffea7bd5e78a93403070d9d0b22f06e89..6cc904753a976b81cee1f9a126beeaf66b91b735 100644
--- a/Core/Core/ClientApp/src/app/home/home.component.css
+++ b/Core/Core/ClientApp/src/app/home/home.component.css
@@ -14,3 +14,7 @@
   text-align: left;
   background-color: lightblue;
 }
+
+.chart{
+  max-width: 20em;
+}
diff --git a/Core/Core/ClientApp/src/app/home/home.component.html b/Core/Core/ClientApp/src/app/home/home.component.html
index ee62225cd5221abdf12753736570a510005bec31..839b243676478cf20573b1436623bc91a025f6c8 100644
--- a/Core/Core/ClientApp/src/app/home/home.component.html
+++ b/Core/Core/ClientApp/src/app/home/home.component.html
@@ -5,15 +5,20 @@
   </header>
 
   <article class="row">
-    <div id="entries" class="col-md-auto"><app-file-history></app-file-history></div>
+    <div id="Entries" class="col-md-auto"><app-file-history></app-file-history></div>
 
     <div id="main" class="col">
       <div class="container-fluid">
         <div class="row justify-content-center">
-          <div id="History" class="col-md-auto"><div class="placeholder"><div class="placeholder_inner_text">history_placeholder</div></div></div>
-          <div id="CashFlow_placeholder" class="col-md-auto"><div class="placeholder"><div class="placeholder_inner_text">CashFlow_placeholder</div></div></div>
+          <div id="History_Bar" class="col-md-auto, chart"><div [chart]="HistoryBarChart"></div></div>
+          <div id="History_Pie" class="col-md-auto, chart"><div [chart]="HistoryPieChart"></div></div>
         </div>
-        <div id="Expense" class="row justify-content-center"><div class="colauto"><app-expenses>Expenses</app-expenses></div></div>
+        <div class="row justify-content-center"><div class="col-md-auto">&nbsp;</div></div>
+        <div class="row justify-content-center">
+          <div id="Forecast_Table" class="col-md-auto"><div class="placeholder"><div class="placeholder_inner_text">forecast_table_placeholder</div></div></div>
+          <div id="Forecast_Pie" class="col-md-auto, chart"><div [chart]="ForecastPieChart"></div></div>
+        </div>
+        <!--<div id="Expense" class="row justify-content-center"><div class="colauto"><app-expenses>Expenses</app-expenses></div></div>-->
       </div>
     </div>
   </article>
diff --git a/Core/Core/ClientApp/src/app/home/home.component.ts b/Core/Core/ClientApp/src/app/home/home.component.ts
index a95848ec744d880f13868d87a8a9961045085da7..4be59bc9f1c0e3a51b607c111773f5c1e71a0943 100644
--- a/Core/Core/ClientApp/src/app/home/home.component.ts
+++ b/Core/Core/ClientApp/src/app/home/home.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { LoginService } from '../login/login.service';
+import { Chart } from 'angular-highcharts';
+import { HomeService } from './home.service';
 
 @Component({
     selector: 'app-home',
@@ -13,13 +15,20 @@ export class HomeComponent implements OnInit {
   LoginStatus$: Observable<boolean>;
   Username$: Observable<string>;
 
+  public HistoryPieChart: Chart;
+  public HistoryBarChart: Chart;
+  public ForecastPieChart: Chart;
+
   /** home ctor */
-  constructor(private LoginService: LoginService) {
+  constructor(private LoginService: LoginService, private HomeService: HomeService) {
   }
 
   ngOnInit() {
     this.LoginStatus$ = this.LoginService.IsLoggedIn;
     this.Username$ = this.LoginService.CurrentUsername;
+    this.HistoryPieChart = this.HomeService.GetHistoryPie();
+    this.HistoryBarChart = this.HomeService.GetHistoryBar();
+    this.ForecastPieChart = this.HomeService.GetForecastPie();
   }
 
   onLogout() {
diff --git a/Core/Core/ClientApp/src/app/home/home.module.ts b/Core/Core/ClientApp/src/app/home/home.module.ts
index 8283d37573dbbe76b1fa45f5d3e5bdbb15058898..5491269426daff33d8410848d53c44fa0f376229 100644
--- a/Core/Core/ClientApp/src/app/home/home.module.ts
+++ b/Core/Core/ClientApp/src/app/home/home.module.ts
@@ -13,6 +13,7 @@ import { ImportService } from "./components/import/import.service";
 import { AccountPropertiesModule } from "./components/account-properties/account-properties.module";
 import { FileHistoryComponent } from "./components/file-history/file-history.component";
 import { MatTableModule, MatPaginatorModule } from "@angular/material";
+import { HomeService } from "./home.service";
 
 
 @NgModule({
@@ -34,6 +35,7 @@ import { MatTableModule, MatPaginatorModule } from "@angular/material";
   providers: [
     ExpensesService,
     ImportService,
+    HomeService,
     { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }
   ]
 })
diff --git a/Core/Core/ClientApp/src/app/home/home.service.ts b/Core/Core/ClientApp/src/app/home/home.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3a449d83ec29e9df5bc149a033ef47ab320a2fdf
--- /dev/null
+++ b/Core/Core/ClientApp/src/app/home/home.service.ts
@@ -0,0 +1,74 @@
+import { Injectable } from '@angular/core';
+import { Chart } from 'angular-highcharts';
+
+@Injectable()
+export class HomeService {
+  TestData: number[] = new Array(1, 2, 3);
+  TestData2: number[] = new Array(3, 4, 5, 6);
+
+  constructor() { }
+
+  public GetHistoryBar(): Chart {
+    return new Chart({
+      chart: {
+        type: 'column'
+      },
+      title: {
+        text: 'Uplynulá hisotrie'
+      },
+      credits: {
+        enabled: false
+      },
+      series: [
+        {
+          name: 'Line 1',
+          data: this.TestData
+        } as Highcharts.SeriesColumnOptions
+      ]
+    });
+  }
+
+  public GetHistoryPie(): Chart {
+    return new Chart({
+      chart: {
+        type: 'pie'
+      },
+      title: {
+        text: 'Velikost transakcĂ­'
+      },
+      credits: {
+        enabled: false
+      },
+      series: [
+        {
+          name: 'Line 1',
+          data: this.TestData2
+        } as Highcharts.SeriesColumnOptions
+      ]
+    });
+  }
+
+  public GetForecastPie(): Chart {
+    return new Chart({
+      chart: {
+        type: 'pie'
+      },
+      title: {
+        text: 'Předpovídaná velikost transakcí'
+      },
+      credits: {
+        enabled: false
+      },
+      series: [
+        {
+          name: 'Line 1',
+          data: this.TestData
+        } as Highcharts.SeriesColumnOptions
+      ]
+    });
+  }
+
+  public GetForecastData() {
+
+  }
+}