diff --git a/app/index.html b/app/index.html
index 7279c92..278a394 100644
--- a/app/index.html
+++ b/app/index.html
@@ -7,7 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Odoo Hours</title>
   <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 
 <body>
diff --git a/app/package-lock.json b/app/package-lock.json
index 2cdb163..912eb65 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -9,8 +9,10 @@
       "version": "0.0.0",
       "dependencies": {
         "bootstrap": "^5.3.3",
+        "chart.js": "^4.4.8",
         "pinia": "^3.0.1",
         "vue": "^3.5.13",
+        "vue-chartjs": "^5.3.2",
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
@@ -298,14 +300,14 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz",
-      "integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==",
+      "version": "7.26.10",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.10.tgz",
+      "integrity": "sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.26.9",
-        "@babel/types": "^7.26.9"
+        "@babel/types": "^7.26.10"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -476,9 +478,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
-      "integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
+      "version": "7.26.10",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.10.tgz",
+      "integrity": "sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
@@ -965,6 +967,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.28",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
@@ -1631,6 +1639,18 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chart.js": {
+      "version": "4.4.8",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.8.tgz",
+      "integrity": "sha512-IkGZlVpXP+83QpMm4uxEiGqSI7jFizwVtF3+n5Pc3k7sMO+tkd0qxh2OzLhenM0K80xtmAONWGBn082EiBQSDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2759,6 +2779,16 @@
         }
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
+      "integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
diff --git a/app/package.json b/app/package.json
index ff051e4..a22247c 100644
--- a/app/package.json
+++ b/app/package.json
@@ -10,8 +10,10 @@
   },
   "dependencies": {
     "bootstrap": "^5.3.3",
+    "chart.js": "^4.4.8",
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
+    "vue-chartjs": "^5.3.2",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
diff --git a/app/src/components/BarChartComponent.vue b/app/src/components/BarChartComponent.vue
new file mode 100644
index 0000000..f824989
--- /dev/null
+++ b/app/src/components/BarChartComponent.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="chart-container">
+        <Bar :data="chartData" :options="chartOptions" :plugins="[chartOptions.plugins.customLabels]" />
+    </div>
+</template>
+
+<script setup>
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+// Rejestracja wymaganych komponentów Chart.js
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+// Dane wykresu z dwiema seriami, które będą układane jedna nad drugą
+const chartData = {
+    labels: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec'],
+    datasets: [
+        {
+            label: 'Sprzedaż Online',
+            data: [30, 40, 50, 60, 70],
+            backgroundColor: 'rgba(54, 162, 235, 0.7)',
+            stack: 'stack1',
+            // borderWidth: 5,
+            // borderRadius: 15,
+            // borderSkipped: false,
+            // borderColor: 'rgba(64, 148, 204, 0.7)',
+        },
+        {
+            label: 'Sprzedaż Stacjonarna',
+            data: [20, 30, 40, 50, -50],
+            backgroundColor: 'rgba(255, 99, 132, 0.7)',
+            stack: 'stack1',
+            // borderWidth: 5,
+            // borderRadius: 15,
+            // borderSkipped: false,
+            // borderColor: 'rgba(64, 148, 204, 0.7)',
+        }
+    ]
+}
+
+// Konfiguracja wykresu – włączenie stacking
+const chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: { position: 'top' },
+        tooltip: { enabled: true },
+        // Własny plugin do wyświetlania sumy wartości nad słupkami
+        customLabels: {
+            id: 'customLabels',
+            afterDatasetsDraw(chart) {
+                const { ctx, data, scales: { x, y } } = chart
+
+                ctx.save()
+                ctx.font = 'bold 12px Arial'
+                ctx.fillStyle = 'black'
+                ctx.textAlign = 'center'
+
+                data.labels.forEach((label, index) => {
+                    const total = data.datasets.reduce((sum, dataset) => sum + dataset.data[index], 0) // Oblicza sumę wartości dla danej kategorii
+                    const barX = x.getPixelForValue(index)
+                    const barY = y.getPixelForValue(total) - 10 // Umieszcza tekst nad słupkiem
+                    ctx.fillText(total, barX, barY)
+                })
+
+                ctx.restore()
+            }
+        }
+    },
+    scales: {
+        x: {
+            stacked: true,
+            grid: { display: false }
+        },
+        y: {
+            stacked: true,
+            // grid: { display: false }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.chart-container {
+    width: 100%;
+    height: 200px;
+    /* Ustawienie wysokości */
+}
+</style>
diff --git a/app/src/views/EditView.vue b/app/src/views/EditView.vue
index 7eb99dd..bf78171 100644
--- a/app/src/views/EditView.vue
+++ b/app/src/views/EditView.vue
@@ -114,13 +114,13 @@
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="addModalLabel">Wklej swój tekst</h1>
+                    <h1 class="modal-title fs-5" id="addModalLabel">Dodaj dzień roboczy</h1>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
 
                     <label for="inputDate" class="form-label">wybierz date:</label>
-                    <input type="date" id="inputDate" class="form-control" v-model="newDate">
+                    <input type="date" id="inputDate" class="form-control" placeholder="dd-mm-yyyy" v-model="newDate">
 
 
                 </div>
diff --git a/app/src/views/TableView.vue b/app/src/views/TableView.vue
index 60bdd56..845e919 100644
--- a/app/src/views/TableView.vue
+++ b/app/src/views/TableView.vue
@@ -1,7 +1,169 @@
 <template>
-    <h1>Table</h1>
+    <div class="container">
+        <div class="row gx-3">
+            <div class="col-4">
+                <div class="card bg-left text-light h-100">
+                    <div class="row g-0 h-100">
+                        <div class="col-3 ">
+                            <h2 class="rounded-start bg-light h-100 d-flex justify-content-center align-items-center">
+                                <i class="text-left fa-solid fa-calendar"></i>
+                            </h2>
+                        </div>
+                        <div class="col-9 ">
+                            <div class="card-body">
+                                <h6 class="card-title">MIESIĄC:</h6>
+                                <h3 class="card-subtitle">Marzec</h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-4">
+                <div class="card bg-mid text-light h-100">
+                    <div class="row g-0 ">
+                        <div class="col-3 ">
+                            <h2 class="rounded-start bg-light h-100 d-flex justify-content-center align-items-center">
+                                <i class="text-mid fa-solid fa-hammer"></i>
+                            </h2>
+                        </div>
+                        <div class="col-9 ">
+                            <div class="card-body">
+                                <h6 class="card-title">ILOŚĆ DNI ROBOCZYCH:</h6>
+                                <h3 class="card-subtitle">21</h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-4">
+                <div class="card bg-right text-light h-100">
+                    <div class="row g-0 ">
+                        <div class="col-3 ">
+                            <h2 class="rounded-start bg-light h-100 d-flex justify-content-center align-items-center">
+                                <i class="text-right fa-solid fa-clock "></i>
+                            </h2>
+                        </div>
+                        <div class="col-9 ">
+                            <div class="card-body">
+                                <h6 class="card-title">WYMAGANA ILOŚĆ GODZIN:</h6>
+                                <h3 class="card-subtitle">168</h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row gx-3 mt-3 text-center">
+            <div class="col-2">
+                <div class="card h-100">
+                    <div class="card-header text-bg-primary">ILOŚĆ GODZIN</div>
+                    <div class="card-body">
+                        <h3 class="card-title">182</h3>
+                        <!-- <h6 class="card-text mb-2 ">Marzec 2025</h6> -->
+                    </div>
+                </div>
+            </div>
+            <div class="col-2">
+                <div class="card h-100">
+                    <div class="card-header text-bg-primary">RÓŻNICA GODZIN</div>
+                    <div class="card-body">
+                        <h5 class="card-title">+15</h5>
+                        <!-- <h6 class="card-text mb-2 ">Marzec 2025</h6> -->
+                    </div>
+                </div>
+            </div>
+            <div class="col-2">
+                <div class="card h-100">
+                    <div class="card-header text-bg-primary">PROGRES</div>
+                    <div class="card-body">
+                        <h5 class="card-title">18/21</h5>
+                        <!-- <h6 class="card-text mb-2 ">Marzec 2025</h6> -->
+                    </div>
+                </div>
+            </div>
+            <div class="col-2">
+                <div class="card h-100">
+                    <div class="card-header text-bg-primary">DNI URLOPU</div>
+                    <div class="card-body">
+                        <h5 class="card-title">0</h5>
+                        <!-- <h6 class="card-text mb-2 ">Marzec 2025</h6> -->
+                    </div>
+                </div>
+            </div>
+            <div class="col-2">
+                <div class="card h-100">
+                    <div class="card-header text-bg-primary">DNI CHOROBOWEGO</div>
+                    <div class="card-body">
+                        <h5 class="card-title">0</h5>
+                        <!-- <h6 class="card-text mb-2 ">Marzec 2025</h6> -->
+                    </div>
+                </div>
+            </div>
+            <div class="col-2">
+                <div class="card h-100">
+                    <div class="card-header text-bg-primary">DNI ŚWIĄTECZNE</div>
+                    <div class="card-body">
+                        <h5 class="card-title">1</h5>
+                        <!-- <h6 class="card-text mb-2 ">Marzec 2025</h6> -->
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- <div class="d-flex justify-content-center g-1">
+            <div class="col-auto mx-auto"></div>
+        </div> -->
+        <div class="row gx-3">
+            <!-- <div class="col-auto"> -->
+            <BarChartComponent />
+
+            <!-- </div> -->
+
+        </div>
+    </div>
+
+
+
 </template>
 
 
 <script setup>
-</script>
\ No newline at end of file
+import BarChartComponent from '@/components/BarChartComponent.vue';
+</script>
+
+<style scoped>
+.bg-left {
+    background: rgb(25, 135, 84);
+}
+
+.text-left {
+    color: rgb(25, 135, 84);
+}
+
+.text-left-light {
+    color: rgb(253, 126, 20);
+}
+
+.bg-mid {
+    background: rgb(202, 101, 16);
+}
+
+.text-mid {
+    color: rgb(202, 101, 16);
+}
+
+.text-mid-light {
+    color: rgb(253, 126, 20);
+}
+
+.bg-right {
+    background: rgb(10, 162, 192);
+}
+
+.text-right {
+    color: rgb(10, 162, 192);
+}
+
+.text-right-light {
+    color: rgb(253, 126, 20);
+}
+</style>
\ No newline at end of file
