diff --git a/src/ui/static/css/datepicker-foundation.css b/src/ui/static/css/datepicker-foundation.css
index eb16026c..db3267ac 100644
--- a/src/ui/static/css/datepicker-foundation.css
+++ b/src/ui/static/css/datepicker-foundation.css
@@ -10,7 +10,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 10;
+  z-index: 100;
   padding-top: 4px;
 }
 
@@ -38,9 +38,9 @@
   text-align: center;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .datepicker-main {
@@ -92,8 +92,11 @@
 
 .datepicker-controls .button {
   margin: 0;
+  margin-top: 0.4rem;
+  margin-bottom: 0.4rem;
+
   background-color: #fefefe;
-  color: #0a0a0a;
+  color: #707070;
 }
 
 .datepicker-controls .button:hover,
@@ -105,7 +108,10 @@
 .datepicker-controls .button:focus[disabled] {
   opacity: 0.25;
   background-color: #fefefe;
-  color: #0a0a0a;
+  margin-top: 0.4rem;
+  margin-bottom: 0.4rem;
+
+  color: #707070;
 }
 
 .datepicker-header .datepicker-controls .button {
@@ -141,6 +147,7 @@
   line-height: 1.5rem;
   font-size: 0.875rem;
   font-weight: bold;
+  color: #064059;
 }
 
 .datepicker-view .week {
@@ -200,7 +207,9 @@
   background-color: #f7f7f7;
 }
 
-.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
+.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(
+    .disabled
+  ):hover {
   background-color: #f1f1f1;
 }
 
@@ -272,4 +281,4 @@
 .datepicker-input.in-edit:focus,
 .datepicker-input.in-edit:active {
   box-shadow: 0 0 0.25em 0.25em rgba(164, 164, 164, 0.2);
-}
\ No newline at end of file
+}
diff --git a/src/ui/static/css/datepicker.css b/src/ui/static/css/datepicker.css
deleted file mode 100644
index e51ff9c1..00000000
--- a/src/ui/static/css/datepicker.css
+++ /dev/null
@@ -1,318 +0,0 @@
-.datepicker {
-  display: none;
-}
-
-.datepicker.active {
-  display: block;
-}
-
-.datepicker-dropdown {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 20;
-  padding-top: 4px;
-}
-
-.datepicker-dropdown.datepicker-orient-top {
-  padding-top: 0;
-  padding-bottom: 4px;
-}
-
-.datepicker-picker {
-  display: inline-block;
-  border-radius: 4px;
-  background-color: white;
-}
-
-.datepicker-dropdown .datepicker-picker {
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-}
-
-.datepicker-picker span {
-  display: block;
-  flex: 1;
-  border: 0;
-  border-radius: 4px;
-  cursor: default;
-  text-align: center;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-.datepicker-main {
-  padding: 2px;
-}
-
-.datepicker-footer {
-  box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
-  background-color: whitesmoke;
-}
-
-.datepicker-grid,
-.datepicker-view .days-of-week,
-.datepicker-view,
-.datepicker-controls {
-  display: flex;
-}
-
-.datepicker-grid {
-  flex-wrap: wrap;
-}
-
-.datepicker-view .days .datepicker-cell,
-.datepicker-view .dow {
-  flex-basis: 14.2857142857%;
-}
-
-.datepicker-view.datepicker-grid .datepicker-cell {
-  flex-basis: 25%;
-}
-
-.datepicker-cell,
-.datepicker-view .week {
-  height: 2.25rem;
-  line-height: 2.25rem;
-}
-
-.datepicker-title {
-  box-shadow: inset 0 -1px 1px rgba(10, 10, 10, 0.1);
-  background-color: whitesmoke;
-  padding: 0.375rem 0.75rem;
-  text-align: center;
-  font-weight: 700;
-}
-
-.datepicker-header .datepicker-controls {
-  padding: 2px 2px 0;
-}
-
-.datepicker-controls .button {
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  border: 1px solid #dbdbdb;
-  border-radius: 4px;
-  box-shadow: none;
-  background-color: white;
-  cursor: pointer;
-  padding: calc(0.375em - 1px) 0.75em;
-  height: 2.25em;
-  vertical-align: top;
-  text-align: center;
-  line-height: 1.5;
-  white-space: nowrap;
-  color: #363636;
-  font-size: 1rem;
-}
-
-.datepicker-controls .button:focus,
-.datepicker-controls .button:active {
-  outline: none;
-}
-
-.datepicker-controls .button:hover {
-  border-color: #b5b5b5;
-  color: #363636;
-}
-
-.datepicker-controls .button:focus {
-  border-color: #3273dc;
-  color: #363636;
-}
-
-.datepicker-controls .button:focus:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
-}
-
-.datepicker-controls .button:active {
-  border-color: #4a4a4a;
-  color: #363636;
-}
-
-.datepicker-controls .button[disabled] {
-  cursor: not-allowed;
-}
-
-.datepicker-header .datepicker-controls .button {
-  border-color: transparent;
-  font-weight: bold;
-}
-
-.datepicker-header .datepicker-controls .button:hover {
-  background-color: #f9f9f9;
-}
-
-.datepicker-header .datepicker-controls .button:focus:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
-}
-
-.datepicker-header .datepicker-controls .button:active {
-  background-color: #f2f2f2;
-}
-
-.datepicker-header .datepicker-controls .button[disabled] {
-  box-shadow: none;
-}
-
-.datepicker-footer .datepicker-controls .button {
-  margin: calc(0.375rem - 1px) 0.375rem;
-  border-radius: 2px;
-  width: 100%;
-  font-size: 0.75rem;
-}
-
-.datepicker-controls .view-switch {
-  flex: auto;
-}
-
-.datepicker-controls .prev-btn,
-.datepicker-controls .next-btn {
-  padding-right: 0.375rem;
-  padding-left: 0.375rem;
-  width: 2.25rem;
-}
-
-.datepicker-controls .prev-btn.disabled,
-.datepicker-controls .next-btn.disabled {
-  visibility: hidden;
-}
-
-.datepicker-view .dow {
-  height: 1.5rem;
-  line-height: 1.5rem;
-  font-size: 0.875rem;
-  font-weight: 700;
-}
-
-.datepicker-view .week {
-  width: 2.25rem;
-  color: #b5b5b5;
-  font-size: 0.75rem;
-}
-
-@media (max-width: 22.5rem) {
-  .datepicker-view .week {
-    width: 1.96875rem;
-  }
-}
-
-.datepicker-grid {
-  width: 15.75rem;
-}
-
-@media (max-width: 22.5rem) {
-  .calendar-weeks + .days .datepicker-grid {
-    width: 13.78125rem;
-  }
-}
-
-.datepicker-cell:not(.disabled):hover {
-  background-color: #f9f9f9;
-  cursor: pointer;
-}
-
-.datepicker-cell.focused:not(.selected) {
-  background-color: #e8e8e8;
-}
-
-.datepicker-cell.selected,
-.datepicker-cell.selected:hover {
-  background-color: #3273dc;
-  color: #fff;
-  font-weight: 600;
-}
-
-.datepicker-cell.disabled {
-  color: #dbdbdb;
-}
-
-.datepicker-cell.prev:not(.disabled),
-.datepicker-cell.next:not(.disabled) {
-  color: #7a7a7a;
-}
-
-.datepicker-cell.prev.selected,
-.datepicker-cell.next.selected {
-  color: #e6e6e6;
-}
-
-.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
-  border-radius: 0;
-  background-color: whitesmoke;
-}
-
-.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
-  background-color: #eeeeee;
-}
-
-.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
-  background-color: #e8e8e8;
-}
-
-.datepicker-cell.today:not(.selected) {
-  background-color: #00d1b2;
-}
-
-.datepicker-cell.today:not(.selected):not(.disabled) {
-  color: #fff;
-}
-
-.datepicker-cell.today.focused:not(.selected) {
-  background-color: #00c4a7;
-}
-
-.datepicker-cell.range-end:not(.selected),
-.datepicker-cell.range-start:not(.selected) {
-  background-color: #b5b5b5;
-  color: #fff;
-}
-
-.datepicker-cell.range-end.focused:not(.selected),
-.datepicker-cell.range-start.focused:not(.selected) {
-  background-color: #afafaf;
-}
-
-.datepicker-cell.range-start {
-  border-radius: 4px 0 0 4px;
-}
-
-.datepicker-cell.range-end {
-  border-radius: 0 4px 4px 0;
-}
-
-.datepicker-cell.range {
-  border-radius: 0;
-  background-color: #dbdbdb;
-}
-
-.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
-  background-color: #d5d5d5;
-}
-
-.datepicker-cell.range.disabled {
-  color: #c2c2c2;
-}
-
-.datepicker-cell.range.focused {
-  background-color: #cfcfcf;
-}
-
-.datepicker-view.datepicker-grid .datepicker-cell {
-  height: 4.5rem;
-  line-height: 4.5rem;
-}
-
-.datepicker-input.in-edit {
-  border-color: #2366d1;
-}
-
-.datepicker-input.in-edit:focus,
-.datepicker-input.in-edit:active {
-  box-shadow: 0 0 0.25em 0.25em rgba(35, 102, 209, 0.2);
-}
\ No newline at end of file
diff --git a/src/ui/static/css/datepicker.min.css b/src/ui/static/css/datepicker.min.css
deleted file mode 100644
index c2cfa680..00000000
--- a/src/ui/static/css/datepicker.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px hsla(0,0%,4%,.1),0 0 0 1px hsla(0,0%,4%,.1)}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px hsla(0,0%,4%,.1)}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px hsla(0,0%,4%,.1);font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em rgba(50,115,220,.25)}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em hsla(0,0%,100%,.25)}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media (max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media (max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em rgba(35,102,209,.2)}
\ No newline at end of file
diff --git a/src/ui/static/js/logs.js b/src/ui/static/js/logs.js
index ccc66559..62f63710 100644
--- a/src/ui/static/js/logs.js
+++ b/src/ui/static/js/logs.js
@@ -199,10 +199,10 @@ class FetchLogs {
       //remove prev logs
       this.logListContainer.textContent = "";
       //wait if live update previously
-      if (this.isLiveUpdate && !this.toDate) {
+      if (this.isLiveUpdate) {
         setTimeout(() => {
           const isSettings = this.getSettings();
-          return isSettings ? this.getLogsFromToDate() : "";
+          return isSettings ? this.getLogsSinceLastUpdate() : "";
         }, this.updateDelay);
       } else {
         const isSettings = this.getSettings();
@@ -270,22 +270,17 @@ class FetchLogs {
       response = await fetch(
         `${location.href}/${this.instanceName}?from_date=${this.fromDate}&to_date=${this.toDate}`
       );
+      const data = await response.json();
+      return await this.showLogs(data);
     }
 
     if (!this.toDate) {
       response = await fetch(
         `${location.href}/${this.instanceName}?from_date=${this.fromDate}`
       );
+      const data = await response.json();
+      return await this.showLogs(data);
     }
-
-    if (response.status === 200) {
-      const res = await response.json();
-      //last update
-      return await this.showLogs(res);
-    } else {
-      console.log(`Error: ${response.status}`);
-    }
-    return null;
   }
 
   async getLogsSinceLastUpdate() {
@@ -293,15 +288,8 @@ class FetchLogs {
       `${location.href}/${this.instanceName}` +
         (this.lastUpdate ? `?last_update=${this.lastUpdate}` : "")
     );
-
-    if (response.status === 200) {
-      const res = await response.json();
-      //last update
-      return await this.showLogs(res);
-    } else {
-      console.log(`Error: ${response.status}`);
-    }
-    return null;
+    const data = await response.json();
+    return await this.showLogs(data);
   }
 
   async showLogs(res) {
@@ -329,11 +317,8 @@ class FetchLogs {
       this.logListContainer.appendChild(logContainer);
     });
 
-    setTimeout(() => {
-      this.goBottomList();
-    }, 100);
     //loop if no to date and live update true
-    if (this.isLiveUpdate && !this.toDate) {
+    if (this.isLiveUpdate) {
       setTimeout(() => {
         this.getLogsSinceLastUpdate();
       }, this.updateDelay);
@@ -424,8 +409,13 @@ class Filter {
 
 class LogsDate {
   constructor(el, options = {}) {
-    this.datepicker = new Datepicker(el, options);
-    this.container = document.querySelector("[logs-settings]");
+    this.el = el;
+    this.options = options;
+    this.init();
+  }
+
+  init() {
+    this.datepicker = new Datepicker(this.el, this.options);
   }
 }
 
diff --git a/src/ui/templates/logs.html b/src/ui/templates/logs.html
index e55822af..934f8344 100644
--- a/src/ui/templates/logs.html
+++ b/src/ui/templates/logs.html
@@ -75,7 +75,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
         id="from-date"
         name="from-date"
         class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
-        placeholder="dd/mm/yyyy or yyyy/mm/dd"
+        placeholder="pick start date"
         pattern="(.*?)"
         required
       />
@@ -95,7 +95,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
         id="to-date"
         name="to-date"
         class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
-        placeholder="dd/mm/yyyy or yyyy/mm/dd"
+        placeholder="pick end date"
         pattern="(.*?)"
         required
       />