diff --git a/app/Http/Controllers/Api/TimeTrackerController.php b/app/Http/Controllers/Api/TimeTrackerController.php
index cc41134..2c3e7ef 100644
--- a/app/Http/Controllers/Api/TimeTrackerController.php
+++ b/app/Http/Controllers/Api/TimeTrackerController.php
@@ -80,8 +80,8 @@ public function getTimeTrackerOfDateByUser(string $date, int $user_id)
     public function report(Request $request)
     {
         $today    = Carbon::now()->format('Y-m-d');
-        $fromDate = Carbon::now()->subDays(5)->format('Y-m-d');
-        $toDate   = $today;
+        $fromDate = $request->input('dateFrom') ?: Carbon::now()->subDays(1)->format('Y-m-d');
+        $toDate   = $request->input('dateTo') ?: $today;
         
         $usersGroupByDate   = TimeTracker::select('user_id','date')
                                         ->whereBetween('date', [$fromDate, $toDate])
diff --git a/package-lock.json b/package-lock.json
index a874451..e8a789a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "@vuepic/vue-datepicker": "^3.5.3",
                 "ag-grid-community": "^28.2.1",
                 "ag-grid-vue3": "^28.2.1"
             },
@@ -326,6 +327,20 @@
             "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
             "dev": true
         },
+        "node_modules/@vuepic/vue-datepicker": {
+            "version": "3.5.3",
+            "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-3.5.3.tgz",
+            "integrity": "sha512-tyqnRDuqj02decCwzwGP7ht0erc33Ktcm8zyEx90C7Vt5Y4roq2CV21ovzmdRluUW8p/1abLcL7ZSqedWtAzKw==",
+            "dependencies": {
+                "date-fns": "^2.29.3"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "peerDependencies": {
+                "vue": ">=3.2.0"
+            }
+        },
         "node_modules/acorn": {
             "version": "7.4.1",
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -611,6 +626,18 @@
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
             "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
         },
+        "node_modules/date-fns": {
+            "version": "2.29.3",
+            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+            "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+            "engines": {
+                "node": ">=0.11"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/date-fns"
+            }
+        },
         "node_modules/deepmerge": {
             "version": "4.2.2",
             "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
@@ -2229,6 +2256,14 @@
             "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
             "dev": true
         },
+        "@vuepic/vue-datepicker": {
+            "version": "3.5.3",
+            "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-3.5.3.tgz",
+            "integrity": "sha512-tyqnRDuqj02decCwzwGP7ht0erc33Ktcm8zyEx90C7Vt5Y4roq2CV21ovzmdRluUW8p/1abLcL7ZSqedWtAzKw==",
+            "requires": {
+                "date-fns": "^2.29.3"
+            }
+        },
         "acorn": {
             "version": "7.4.1",
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -2424,6 +2459,11 @@
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
             "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
         },
+        "date-fns": {
+            "version": "2.29.3",
+            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+            "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+        },
         "deepmerge": {
             "version": "4.2.2",
             "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
diff --git a/package.json b/package.json
index 5c0fef3..9ffe70e 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
         "vue": "^3.2.41"
     },
     "dependencies": {
+        "@vuepic/vue-datepicker": "^3.5.3",
         "ag-grid-community": "^28.2.1",
         "ag-grid-vue3": "^28.2.1"
     }
diff --git a/resources/js/Components/Report/ReportTimeTracker.vue b/resources/js/Components/Report/ReportTimeTracker.vue
index d4bb65c..b2e549d 100644
--- a/resources/js/Components/Report/ReportTimeTracker.vue
+++ b/resources/js/Components/Report/ReportTimeTracker.vue
@@ -1,18 +1,33 @@
 <script setup>
-import "ag-grid-community/styles/ag-grid.css";
-import "ag-grid-community/styles/ag-theme-alpine.css";
-import { AgGridVue } from "ag-grid-vue3";
+    import "ag-grid-community/styles/ag-grid.css";
+    import "ag-grid-community/styles/ag-theme-alpine.css";
+    import { AgGridVue } from "ag-grid-vue3";
+    import PrimaryButton from '@/Components/PrimaryButton.vue';
+    import Datepicker from '@vuepic/vue-datepicker';
+    import '@vuepic/vue-datepicker/dist/main.css';
+    import { computed, ref } from 'vue';
+
+
 </script>
 
 <script>
+
 export default {
     components: {
-        "ag-grid-vue": AgGridVue
+        AgGridVue,
+        Datepicker 
     },
     data() {
         return {
+            date,
+            format,
+            handleDate,
             columnDefs: [
-                { headerName: "Date", field: "date" },
+                {   headerName: "Date", 
+                    field: "date",
+                    filter: 'agDateColumnFilter',
+                    filterParams: filterParams,
+                },
                 { headerName: "User Name", field: "user_name" },
                 { headerName: "User Email", field: "user_email" },
                 { headerName: "Worked time", field: "workedTimeFormat" },
@@ -27,34 +42,109 @@ export default {
                 minWidth: 100,
                 sortable: true,
                 filter: true,
+                floatingFilter: true,
             },
             rowData: null        
         };
     },
+    created() {
+        const startDate = new Date(new Date().setDate(new Date().getDate() - 1));
+        const endDate = new Date();
+        date.value = [startDate, endDate];
+    },
     methods: {
+        onBtnExport() {
+            this.gridApi.exportDataAsCsv();
+        },
+        onRefreshTable() {
+            this.onFetchData().then((data) => this.gridApi.setRowData(data))
+        },
+        onFetchData() {
+            const from  = formatDateInYYYYMMDD(date.value[0]);
+            const to    = formatDateInYYYYMMDD(date.value[1]);
+            return fetch('/sanctum/csrf-cookie').then(() => fetch(`api/report/time-tracker?dateFrom=${from}&dateTo=${to}`)
+                .then((resp) => resp.json())
+            )
+        },
         onGridReady(params) {
             this.gridApi = params.api;
             this.gridColumnApi = params.columnApi;
-
             const updateData = (data) => params.api.setRowData(data);
+            this.onFetchData().then((data) => updateData(data)).then((data) => console.log('200'));
+        },
+    }
+}
 
-            fetch('api/report/time-tracker')
-                .then((resp) => resp.json())
-                .then((data) => updateData(data));
-
-        }
+const filterParams = {
+  comparator: (filterLocalDateAtMidnight, cellValue) => {
+    var dateAsString = cellValue;
+    if (dateAsString == null) return -1;
+    var dateParts = dateAsString.split('/');
+    var cellDate = new Date(
+      Number(dateParts[2]),
+      Number(dateParts[1]) - 1,
+      Number(dateParts[0])
+    );
+    if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
+      return 0;
+    }
+    if (cellDate < filterLocalDateAtMidnight) {
+      return -1;
     }
+    if (cellDate > filterLocalDateAtMidnight) {
+      return 1;
+    }
+  },
+  browserDatePicker: true,
+  minValidYear: 2000,
+  maxValidYear: 2025,
+  inRangeFloatingFilterDateFormat: 'YYYY-MM-DD',
+};
+
+const date = ref();
+
+const formatDateInYYYYMMDD = (date) => {
+    const day   = date.getDate();
+    const month = date.getMonth() + 1;
+    const year  = date.getFullYear();
+    return `${year}-${month}-${day}`;
+}
+
+const format = (date) => {
+    let from  = formatDateInYYYYMMDD(date[0]);
+    let to    = formatDateInYYYYMMDD(date[1]);
+    return `Display from ${from} until ${to}`;
 }
+
+const handleDate = (modelData) => {
+     date.value = modelData;
+} 
+
 </script>
 
 
+
 <template>
+
+    <PrimaryButton v-on:click="onBtnExport()" class="mb-2" :class="{ 'opacity-25': false }" :disabled="false">
+        Export CSV
+    </PrimaryButton>
+
+    <Datepicker 
+    @update:modelValue="handleDate"
+    @closed="onRefreshTable"
+    v-model="date" 
+    class="w-45 mb-2" 
+    :format="format" 
+    range />
+    
   <ag-grid-vue
     style="height: 500px"
     class="ag-theme-alpine"
     :columnDefs="columnDefs"
     @grid-ready="onGridReady"
     :defaultColDef="defaultColDef"
+    :pagination="true"
     :rowData="rowData">
     </ag-grid-vue>
 </template>
\ No newline at end of file