diff --git a/src/modules/04_system/components/formDialog.vue b/src/modules/04_system/components/formDialog.vue
new file mode 100644
index 00000000..ee4e0cb2
--- /dev/null
+++ b/src/modules/04_system/components/formDialog.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const openDialog = defineModel<boolean>("openDialog", {
+  required: true,
+  default: false,
+});
+
+defineProps<{
+  title: string;
+  submit?: (...args: unknown[]) => void;
+  close?: (...args: unknown[]) => void;
+}>();
+</script>
+
+<template>
+  <q-dialog v-model="openDialog" class="dialog-content-top">
+    <q-card style="width: 80%">
+      <q-form
+        greedy
+        @submit.prevent
+        @validation-success="submit"
+        class="full-height"
+      >
+        <!-- header -->
+        <DialogHeader :tittle="title" :close="close" />
+        <q-separator />
+
+        <q-card-section> <slot /> </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss">
+.form-header {
+  border-bottom: 1px solid $grey-2;
+}
+</style>
diff --git a/src/modules/04_system/components/formSchedule .vue b/src/modules/04_system/components/formSchedule .vue
new file mode 100644
index 00000000..afb18b07
--- /dev/null
+++ b/src/modules/04_system/components/formSchedule .vue	
@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+const name = defineModel<string>("name");
+const typeTime = defineModel<string>("typeTime", { default: "set" });
+const time = defineModel<string>("time");
+const timeStartEvery = defineModel<string>("timeStartEvery");
+const startAt = defineModel<string>("startAt");
+const selectDate = defineModel<string[]>("date", { default: [] });
+const tab = defineModel<string>("tab");
+
+const timeStartEveryOptions: { value: string }[] = Array.from(
+  { length: 24 },
+  (_, i) => ({ value: (i + 1).toString() })
+);
+
+watch(typeTime, () => {
+  time.value = "";
+  timeStartEvery.value = "";
+});
+
+watch(tab, () => {
+  typeTime.value = "set";
+  time.value = "";
+  timeStartEvery.value = "";
+  selectDate.value = [];
+});
+</script>
+
+<template>
+  <div class="row q-col-gutter-md items-center text-grey-8">
+    <div class="col-12">
+      ชื่อของข้อมูลสำรองใหม่
+      <q-input
+        outlined
+        clearable
+        hide-bottom-space
+        dense
+        v-model="name"
+        label="ชื่อ Backup"
+        :rules="[(val:string) => val.length <= 30 || 'ชื่อต้องไม่เกิน 16 ตัวอักษร' , (val:string) => /^[A-Za-z0-9\-]+$/.test(val) || 'ชื่อต้องเป็นภาษาอังกฤษ พิมพ์ใหญ่หรือเล็ก และตัวเลขเท่านั้น']"
+      />
+    </div>
+
+    <div class="col-12 column" v-if="tab === 'daily'">
+      เริ่มเวลา
+      <div class="col-6 row items-center">
+        <div class="col-3">
+          <q-radio v-model="typeTime" val="set" label="กำหนดเวลา" />
+        </div>
+        <div class="col-3">
+          <q-input
+            v-model="time"
+            outlined
+            clearable
+            hide-bottom-space
+            dense
+            type="time"
+          />
+        </div>
+      </div>
+      <div class="col-6 row items-center q-pt-sm">
+        <div class="col-3">
+          <q-radio v-model="typeTime" val="start" label="เริ่มทุก" />
+        </div>
+        <div class="col-3">
+          <q-select
+            label="เลือก"
+            v-model="timeStartEvery"
+            :options="timeStartEveryOptions"
+            outlined
+            emit-value
+            dense
+            emit-option
+            option-label="value"
+            option-value="value"
+            map-options
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="col-12 column" v-if="tab === 'weekly'">
+      <div class="col-12 row">
+        <div>
+          เริ่มเวลา
+          <q-input
+            v-model="time"
+            outlined
+            clearable
+            hide-bottom-space
+            dense
+            type="time"
+          />
+        </div>
+      </div>
+
+      <div class="col-12 q-gutter-sm row q-pt-sm">
+        <q-card
+          :class="{
+            'bg-primary text-white': selectDate.includes(v.value),
+          }"
+          style="
+            user-select: none;
+            transition: 100ms background-color ease-in-out;
+          "
+          v-for="(v, i) in [
+            {
+              value: 'mon',
+              name: 'จันทร์',
+            },
+            {
+              value: 'tue',
+              name: 'อังคาร',
+            },
+            {
+              value: 'wed',
+              name: 'พุธ',
+            },
+            {
+              value: 'thu',
+              name: 'พฤหัสบดี',
+            },
+            {
+              value: 'fri',
+              name: 'ศุกร์',
+            },
+            {
+              value: 'sun',
+              name: 'อาทิตย์',
+            },
+            {
+              value: 'sat',
+              name: 'เสาร์',
+            },
+          ]"
+          flast
+          bordered
+          class="q-pa-sm col text-center cursor-pointer"
+          @click="
+            () => {
+              if (!selectDate.includes(v.value)) selectDate.push(v.value);
+              else selectDate.splice(selectDate.indexOf(v.value), 1);
+            }
+          "
+          >{{ v.name }}</q-card
+        >
+      </div>
+    </div>
+
+    <div class="col-12 column" v-if="tab === 'monthly'">
+      <div class="col-12 row">
+        <div>
+          เริ่มเวลา
+          <q-input
+            v-model="time"
+            outlined
+            clearable
+            hide-bottom-space
+            dense
+            type="time"
+          />
+        </div>
+      </div>
+
+      <div class="col-12 q-pt-sm">
+        <div class="row q-col-gutter-sm">
+          <div
+            class="col-2"
+            v-for="(v, i) in Array.from({ length: 31 }, (_, i) => ({
+              value: i + 1,
+            }))"
+          >
+            <q-card
+              :class="{
+                'bg-primary text-white': selectDate.includes(
+                  v.value.toString()
+                ),
+              }"
+              style="
+                user-select: none;
+                transition: 100ms background-color ease-in-out;
+              "
+              flat
+              bordered
+              class="text-center q-px-md q-py-sm cursor-pointer"
+              @click="
+                () => {
+                  if (!selectDate.includes(v.value.toString()))
+                    selectDate.push(v.value.toString());
+                  else
+                    selectDate.splice(
+                      selectDate.indexOf(v.value.toString()),
+                      1
+                    );
+                }
+              "
+              >{{ v.value }}</q-card
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-6 column">
+      วันที่เริ่มการสำรองข้อมูล
+
+      <q-input outlined clearable hide-bottom-space dense v-model="startAt">
+        <template v-slot:prepend>
+          <q-icon name="event" class="cursor-pointer">
+            <q-popup-proxy
+              cover
+              transition-show="scale"
+              transition-hide="scale"
+            >
+              <q-date v-model="startAt" mask="YYYY-MM-DD HH:mm">
+                <div class="row items-center justify-end">
+                  <q-btn v-close-popup label="Close" color="primary" flat />
+                </div>
+              </q-date>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+
+        <template v-slot:append>
+          <q-icon name="access_time" class="cursor-pointer">
+            <q-popup-proxy
+              cover
+              transition-show="scale"
+              transition-hide="scale"
+            >
+              <q-time v-model="startAt" mask="YYYY-MM-DD HH:mm" format24h>
+                <div class="row items-center justify-end">
+                  <q-btn v-close-popup label="Close" color="primary" flat />
+                </div>
+              </q-time>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+      </q-input>
+      <!-- 
+      <q-input v-model="startAt" outlined clearable hide-bottom-space dense>
+        <template v-slot:prepend>
+          <q-btn size="8px" icon="event" round>
+            <q-popup-proxy
+              cover
+              transition-show="scale"
+              transition-hide="scale"
+            >
+              <q-date
+                v-model="startAt"
+                minimal
+                navigation-min-year-month="2024/09"
+                navigation-max-year-month="2024/09"
+              >
+                <div class="row items-center justify-end q-gutter-sm">
+                  <q-btn label="Cancel" color="primary" flat v-close-popup />
+                  <q-btn label="OK" color="primary" flat v-close-popup />
+                </div>
+              </q-date>
+            </q-popup-proxy>
+          </q-btn>
+        </template>
+      </q-input> -->
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>