diff --git a/src/modules/03_logs/components/LogTable.vue b/src/modules/03_logs/components/LogTable.vue
index fa07ab3a..1bd52fa0 100644
--- a/src/modules/03_logs/components/LogTable.vue
+++ b/src/modules/03_logs/components/LogTable.vue
@@ -109,11 +109,11 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const startTime = ref<string>();
+const startTime = ref<Date | null>(null);
+const endTime = ref<Date | null>(null);
 const startDate = ref<string>("");
-const endTime = ref<string>();
-const sortTime = ref<"desc" | "asc">("desc");
 const endDate = ref<string>("");
+const sortTime = ref<"desc" | "asc">("desc");
 const openDialog = ref<boolean>(false);
 const currentlogData =
   ref<Omit<ResLog, "endTimeStamp" | "tId" | "processTime" | "systemName">>();
@@ -131,6 +131,39 @@ const pagination = ref({
   rowsPerPage: 0,
 });
 
+const labelDropdown = ref<string>("วันนี้");
+const valDropdown = ref<string>("");
+const searchStatus = ref<string>("");
+
+const itemsDropdown = ref<any[]>([
+  {
+    labal: "วันนี้",
+    val: "today",
+  },
+  {
+    labal: "เมื่อวาน",
+    val: "yesterday",
+  },
+  {
+    labal: "ย้อนหลัง 24 ชั่วโมง",
+    val: "past24hours",
+  },
+  {
+    labal: "ย้อนหลัง 7 วัน",
+    val: "past7days",
+  },
+  {
+    labal: "ย้อนหลัง 30 วัน",
+    val: "past30days",
+  },
+  {
+    labal: "กำหนดเอง",
+    val: "customized",
+  },
+]);
+
+const statusOpt = ref<any[]>(["info", "warning", "error"]);
+
 const visibleColumns = ref<string[]>([
   "startTimeStamp",
   "username",
@@ -146,6 +179,7 @@ const visibleColumns = ref<string[]>([
 
 function handleScroll() {
   let scrollFlag = false;
+
   return async (e: Event) => {
     if (scrollFlag) return;
 
@@ -179,23 +213,34 @@ function handleScroll() {
 const infiniteScroll = handleScroll();
 
 function selectedDate() {
-  startDate.value = date.value[0].toISOString();
-  endDate.value = date.value[1].toISOString();
+  if (!startDate.value) {
+    const startDateToday = new Date();
+    startDateToday.setHours(0, 0, 0, 0);
 
-  if (!!startTime.value) {
-    replaceTimeInISOString(startDate.value, startTime.value, "start");
-  } else {
-    const date = new Date(startDate.value);
-    date.setHours(0, 0, 0, 0);
-    startDate.value = date.toISOString();
-  }
-  if (!!endTime.value) {
-    replaceTimeInISOString(endDate.value, endTime.value, "end");
-  } else {
-    const date = new Date(endDate.value);
-    date.setHours(23, 59, 59, 999);
-    endDate.value = date.toISOString();
+    // ตั้งค่า endDate เป็นเวลา 23:59:59 ของวันนี้
+    const endDateToday = new Date();
+    endDateToday.setHours(23, 59, 59, 999);
+
+    startDate.value = startDateToday.toISOString();
+    endDate.value = endDateToday.toISOString();
   }
+  // startDate.value = date.value[0].toISOString();
+  // endDate.value = date.value[1].toISOString();
+
+  // if (!!startTime.value) {
+  //   replaceTimeInISOString(startDate.value, startTime.value, "start");
+  // } else {
+  //   const date = new Date(startDate.value);
+  //   date.setHours(0, 0, 0, 0);
+  //   startDate.value = date.toISOString();
+  // }
+  // if (!!endTime.value) {
+  //   replaceTimeInISOString(endDate.value, endTime.value, "end");
+  // } else {
+  //   const date = new Date(endDate.value);
+  //   date.setHours(23, 59, 59, 999);
+  //   endDate.value = date.toISOString();
+  // }
 
   logData.value = [];
   searchAfter.value = undefined;
@@ -206,6 +251,7 @@ function selectedDate() {
       systemName: systemName.value ?? undefined,
       searchAfter: searchAfter.value ?? undefined,
       sort: sortTime.value,
+      searchStatus: searchStatus.value ?? undefined,
       // date: new Date(startDate.value),
       startDate: new Date(startDate.value),
       endDate: new Date(endDate.value),
@@ -260,88 +306,112 @@ function dateThaiRange(val: [Date, Date]) {
   }
 }
 
+function onItemClick(labal: string, type: string) {
+  labelDropdown.value = labal;
+  valDropdown.value = type;
+
+  if (type === "today") {
+    // ตั้งค่า startDateToday เป็นเวลา 23:59:59 ของวันนี้
+    const startDateToday = new Date();
+    startDateToday.setHours(0, 0, 0, 0);
+
+    // ตั้งค่า endDate เป็นเวลา 23:59:59 ของวันนี้
+    const endDateToday = new Date();
+    endDateToday.setHours(23, 59, 59, 999);
+
+    startDate.value = startDateToday.toISOString();
+    endDate.value = endDateToday.toISOString();
+
+    selectedDate();
+  } else if (type === "yesterday") {
+    const endDateNow = new Date(); // เวลาปัจจุบัน
+
+    // ตั้งค่า endDate เป็นเวลา 23:59:59 ของวันก่อนหน้า
+    endDateNow.setDate(endDateNow.getDate() - 1);
+    endDateNow.setHours(23, 59, 59, 999);
+
+    // ตั้งค่า startDate เป็นเวลา 00:00:00 ของวันก่อนหน้า
+    const startDateYesterday = new Date(endDateNow);
+    startDateYesterday.setHours(0, 0, 0, 0);
+
+    startDate.value = startDateYesterday.toISOString();
+    endDate.value = endDateNow.toISOString();
+
+    selectedDate();
+  } else if (type === "past24hours") {
+    // ตั้งค่า startDatePast เป็นเวลาย้อนหลัง  24 hours
+    const startDatePast = new Date();
+    startDatePast.setHours(startDatePast.getHours() - 24);
+
+    startDate.value = startDatePast.toISOString();
+    endDate.value = new Date().toISOString();
+
+    selectedDate();
+  } else if (type === "past7days") {
+    // ตั้งค่า startDatePast  เป็นเวลาย้อนหลัง  7 วัน
+    const startDatePast = new Date();
+    startDatePast.setDate(startDatePast.getDate() - 7);
+
+    startDate.value = startDatePast.toISOString();
+    endDate.value = new Date().toISOString();
+
+    selectedDate();
+  } else if (type === "past30days") {
+    // ตั้งค่า startDatePast  เป็นเวลาย้อนหลัง  30 วัน
+    const startDatePast = new Date();
+    startDatePast.setDate(startDatePast.getDate() - 30);
+
+    startDate.value = startDatePast.toISOString();
+    endDate.value = new Date().toISOString();
+
+    selectedDate();
+  }
+
+  startTime.value = null;
+  endTime.value = null;
+}
+
+function updateDate() {
+  if (startTime.value && endTime.value) {
+    startDate.value = startTime.value.toISOString();
+    endDate.value = endTime.value.toISOString();
+
+    selectedDate();
+  }
+}
+
 onMounted(() => {
   systemName.value = route.query.system as string;
-  startDate.value = date.value[0].toISOString();
-  endDate.value = date.value[1].toISOString();
+  // startDate.value = date.value[0].toISOString();
+  // endDate.value = date.value[1].toISOString();
 });
 </script>
 
 <template>
-  <div class="bg-white">
-    <div class="row q-pa-md no-wrap">
-      <div class="row col-7">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="date"
-          :locale="'th'"
-          autoApply
-          range
-          class="col"
-          style="max-width: 300px"
-          :enableTimePicker="true"
-          @update:modelValue="selectedDate"
-          week-start="0"
-        >
-          <template #year="{ year }">{{ year + 543 }}</template>
-          <template #year-overlay-value="{ value }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              :model-value="dateThaiRange(date)"
-              hide-bottom-space
-            >
-              <template v-slot:prepend>
-                <q-icon name="event" class="cursor-pointer" color="primary">
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <div class="q-pl-sm row items-center">
-          จาก
-          <q-input
-            v-model="startTime"
-            outlined
-            clearable
-            @clear="selectedDate()"
-            @update:model-value="
-            (v:string) =>{
-              if(v){
-                replaceTimeInISOString(startDate,v,'start'),
-                selectedDate()
-              }}
-          "
-            hide-bottom-space
-            dense
-            class="q-px-sm"
-            type="time"
-          />
-        </div>
-        <div class="row items-center">
-          ถึง
-          <q-input
-            v-model="endTime"
-            outlined
-            clearable
-            @clear="selectedDate()"
-            hide-bottom-space
-            @update:model-value="
-            (v:string) =>{
-              if(v){
-                replaceTimeInISOString(endDate,v,'end'),
-                selectedDate()
-              }}
-          "
-            dense
-            stack-label="test"
-            class="q-px-sm"
-            type="time"
-          />
+  <div class="bg-white q-pa-md">
+    <div class="row no-wrap">
+      <div class="row col-7 q-col-gutter-md">
+        <div>
+          <q-btn-dropdown outline color="grey-5">
+            <template v-slot:label>
+              <div class="row items-center no-wrap">
+                <div class="text-black">{{ labelDropdown }}</div>
+              </div>
+            </template>
+            <q-list>
+              <q-item
+                dense
+                v-for="(item, index) in itemsDropdown"
+                clickable
+                v-close-popup
+                @click="onItemClick(item.labal, item.val)"
+              >
+                <q-item-section>
+                  <q-item-label>{{ item.labal }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
         </div>
       </div>
 
@@ -378,6 +448,46 @@ onMounted(() => {
             <q-icon name="search" />
           </template>
         </q-input>
+
+        <q-select
+          v-model="searchStatus"
+          label="ค้นหาสถานะ"
+          dense
+          emit-value
+          map-options
+          :options="statusOpt"
+          option-value="id"
+          option-label="name"
+          lazy-rules
+          hide-bottom-space
+          borderless
+          outlined
+          style="width: 150px"
+          :hide-dropdown-icon="false"
+          @update:modelValue="selectedDate()"
+          clearable
+        >
+          <template v-slot:selected-item="scope">
+            <q-chip
+              dense
+              :tabindex="scope.tabindex"
+              :color="
+                scope.opt === 'info'
+                  ? 'primary'
+                  : scope.opt === 'warning'
+                  ? 'warning'
+                  : scope.opt === 'error'
+                  ? 'red'
+                  : 'white'
+              "
+              text-color="white"
+              class="q-ma-none text-caption"
+              style="border-radius: 3px; max-width: 60vw; word-wrap: break-word"
+            >
+              {{ scope.opt }}
+            </q-chip>
+          </template>
+        </q-select>
         <!-- แสดงคอลัมน์ใน table -->
         <q-select
           v-model="visibleColumns"
@@ -395,156 +505,234 @@ onMounted(() => {
         />
       </div>
     </div>
-
-    <div class="q-pa-md">
-      <div style="max-height: 70vh; overflow: scroll" @scroll="infiniteScroll">
-        <d-table
-          ref="table"
-          :columns="columns"
-          :rows="storeData.logData"
-          row-key="name"
-          flat
-          bordered
-          hide-pagination
-          v-model:pagination="pagination"
-          dense
-          :rows-per-page-options="[0]"
-          class="custom-header-table"
-          :visible-columns="visibleColumns"
+    <div
+      v-if="valDropdown === 'customized'"
+      class="row q-col-gutter-md q-mt-xs"
+    >
+      <div class="col-3">
+        <datepicker
+          v-model="startTime"
+          :locale="'th'"
+          :max-date="endTime"
+          selectText="เลือก"
+          cancelText="ยกเลิก"
+          @update:modelValue="updateDate()"
         >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <div
-                  v-if="col.name === 'startTimeStamp'"
-                  class="text-weight-medium"
-                >
-                  {{ col.label }}
-                  <q-btn
-                    v-if="sortTime === 'desc'"
-                    flat
-                    round
-                    size="8px"
-                    icon="mdi-arrow-up"
-                    @click="
-                      () => {
-                        sortTime = 'asc';
-                        selectedDate();
-                      }
-                    "
-                  />
-                  <q-btn
-                    v-else
-                    flat
-                    round
-                    size="8px"
-                    icon="mdi-arrow-down"
-                    @click="
-                      () => {
-                        sortTime = 'desc';
-                        selectedDate();
-                      }
-                    "
-                  />
-                </div>
-                <span v-else class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr
-              :props="props"
-              class="cursor-pointer"
-              style="overflow: scroll"
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              :model-value="
+                startTime ? date2Thai(startTime, false, true) : null
+              "
+              :label="`${'วันเริ่มต้น'}`"
+              hide-bottom-space
             >
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div v-if="col.name === 'username'">
-                  <template v-if="props.row.userName && props.row.user">
-                    {{ props.row.userName ?? "-" }}
-                    <div class="text-grey" style="font-size: 65%">
-                      {{ props.row.user ?? "-" }}
-                    </div>
-                  </template>
-                  <template v-else> - </template>
-                </div>
-                <div v-else-if="col.name === 'method'">
-                  <q-badge
-                    :text-color="classColorMethod(col.value)"
-                    style="background-color: #f0ecec"
-                    >{{ col.value ?? "-" }}</q-badge
-                  >
-                </div>
-                <div v-else-if="col.name === 'logType'">
-                  <q-badge
-                    text-color="white"
-                    :color="
-                      col.value === 'error'
-                        ? 'red'
-                        : col.value === 'info'
-                        ? 'primary'
-                        : 'warning'
-                    "
-                    >{{ col.value ?? "-" }}</q-badge
-                  >
-                </div>
-                <div
-                  v-else-if="col.name === 'responseDescription'"
-                  :class="`text-${
-                    props.row.logType === 'Error'
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+
+          <template #action-preview="{ value }">
+            {{ date2Thai(value, false, true) }}
+          </template>
+        </datepicker>
+      </div>
+      <div class="col-3">
+        <datepicker
+          v-model="endTime"
+          :locale="'th'"
+          :enableTimePicker="true"
+          selectText="เลือก"
+          cancelText="ยกเลิก"
+          @update:modelValue="updateDate()"
+          :min-date="startTime"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              :model-value="endTime ? date2Thai(endTime, false, true) : null"
+              :label="`${'วันสิ้นสุด'}`"
+              hide-bottom-space
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+          <template #action-preview="{ value }">
+            {{ date2Thai(value, false, true) }}
+          </template>
+        </datepicker>
+      </div>
+    </div>
+
+    <div
+      class="q-mt-md"
+      style="max-height: 70vh; overflow: scroll"
+      @scroll="infiniteScroll"
+    >
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="storeData.logData"
+        row-key="name"
+        flat
+        bordered
+        hide-pagination
+        v-model:pagination="pagination"
+        dense
+        :rows-per-page-options="[0]"
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <div
+                v-if="col.name === 'startTimeStamp'"
+                class="text-weight-medium"
+              >
+                {{ col.label }}
+                <q-btn
+                  v-if="sortTime === 'desc'"
+                  flat
+                  round
+                  size="8px"
+                  icon="mdi-arrow-up"
+                  @click="
+                    () => {
+                      sortTime = 'asc';
+                      selectedDate();
+                    }
+                  "
+                />
+                <q-btn
+                  v-else
+                  flat
+                  round
+                  size="8px"
+                  icon="mdi-arrow-down"
+                  @click="
+                    () => {
+                      sortTime = 'desc';
+                      selectedDate();
+                    }
+                  "
+                />
+              </div>
+              <span v-else class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer" style="overflow: scroll">
+            <q-td v-for="col in props.cols" :key="col.id">
+              <div v-if="col.name === 'username'">
+                <template v-if="props.row.userName && props.row.user">
+                  {{ props.row.userName ?? "-" }}
+                  <div class="text-grey" style="font-size: 65%">
+                    {{ props.row.user ?? "-" }}
+                  </div>
+                </template>
+                <template v-else> - </template>
+              </div>
+              <div v-else-if="col.name === 'method'">
+                <q-badge
+                  :text-color="classColorMethod(col.value)"
+                  style="background-color: #f0ecec"
+                  >{{ col.value ?? "-" }}</q-badge
+                >
+              </div>
+              <div v-else-if="col.name === 'logType'">
+                <q-badge
+                  text-color="white"
+                  :color="
+                    col.value === 'error'
                       ? 'red'
-                      : props.row.logType === 'info'
+                      : col.value === 'info'
                       ? 'primary'
                       : 'warning'
-                  }`"
-                  class="ellipsis"
-                  style="max-width: 10vw"
+                  "
+                  >{{ col.value ?? "-" }}</q-badge
                 >
-                  {{ col.value ?? "-" }}
-                  <q-tooltip> {{ col.value }} </q-tooltip>
-                </div>
+              </div>
+              <div
+                v-else-if="col.name === 'responseDescription'"
+                :class="`text-${
+                  props.row.logType === 'Error'
+                    ? 'red'
+                    : props.row.logType === 'info'
+                    ? 'primary'
+                    : 'warning'
+                }`"
+                class="ellipsis"
+                style="max-width: 10vw"
+              >
+                {{ col.value ?? "-" }}
+                <q-tooltip> {{ col.value }} </q-tooltip>
+              </div>
 
-                <div v-else-if="col.name === 'dataDiff'">
-                  <q-btn
-                    dense
-                    flat
-                    round
-                    icon="mdi-eye-outline"
-                    color="primary"
-                    size="12px"
-                    @click.stop="
-                      () => {
-                        currentDataDiff = col.value;
-                        currentlogData = {
-                          startTimeStamp: props.row.startTimeStamp,
-                          username: props.row.userName,
-                          host: props.row.host,
-                          endpoint: props.row.endpoint,
-                          method: props.row.method,
-                          responseCode: props.row.responseCode,
-                          logType: props.row.logType,
-                          responseDescription: props.row.responseDescription,
-                          sequence: props.row.sequence,
-                          dataDiff: props.row.dataDiff,
-                          input: props.row.input,
-                          output: props.row.output,
-                        };
-                        openDialog = true;
-                      }
-                    "
-                  >
-                    <q-tooltip>ดูรายละเอียด </q-tooltip>
-                  </q-btn>
-                </div>
+              <div v-else-if="col.name === 'dataDiff'">
+                <q-btn
+                  dense
+                  flat
+                  round
+                  icon="mdi-eye"
+                  color="info"
+                  @click.stop="
+                    () => {
+                      currentDataDiff = col.value;
+                      currentlogData = {
+                        startTimeStamp: props.row.startTimeStamp,
+                        username: props.row.userName,
+                        host: props.row.host,
+                        endpoint: props.row.endpoint,
+                        method: props.row.method,
+                        responseCode: props.row.responseCode,
+                        logType: props.row.logType,
+                        responseDescription: props.row.responseDescription,
+                        sequence: props.row.sequence,
+                        dataDiff: props.row.dataDiff,
+                        input: props.row.input,
+                        output: props.row.output,
+                      };
+                      openDialog = true;
+                    }
+                  "
+                >
+                  <q-tooltip>ดูรายละเอียด </q-tooltip>
+                </q-btn>
+              </div>
 
-                <div v-else class="ellipsis" style="max-width: 10vw">
-                  {{ col.value === "" || col.value === null ? "-" : col.value }}
-                  <q-tooltip> {{ col.value }} </q-tooltip>
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </div>
+              <div v-else class="ellipsis" style="max-width: 10vw">
+                {{ col.value === "" || col.value === null ? "-" : col.value }}
+                <q-tooltip> {{ col.value }} </q-tooltip>
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
     </div>
   </div>
 
@@ -714,8 +902,12 @@ onMounted(() => {
   </DialogDataDiff>
 </template>
 
-<style scoped>
+<style>
 .row-color:nth-child(2n + 1) {
   background-color: #eeeeee;
 }
+
+.dp__action_row {
+  padding: 2px !important;
+}
 </style>
diff --git a/src/modules/03_logs/stores/main.ts b/src/modules/03_logs/stores/main.ts
index 1d743ee5..1b423b95 100644
--- a/src/modules/03_logs/stores/main.ts
+++ b/src/modules/03_logs/stores/main.ts
@@ -35,6 +35,7 @@ export const useDataStore = defineStore("logStore", () => {
       sort?: string;
       startDate?: Date;
       endDate?: Date;
+      searchStatus?: string;
     },
     isBottom?: boolean
   ) {