diff --git a/package-lock.json b/package-lock.json
index a92eeb7..2f33e3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "jwt-decode": "^4.0.0",
         "pinia": "^2.1.7",
         "update-electron-app": "^3.0.0",
+        "vee-validate": "^4.12.6",
         "vue": "^3.4.20",
         "vue-router": "^4.3.0",
         "vue-toastification": "^2.0.0-rc.5"
@@ -12672,6 +12673,29 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vee-validate": {
+      "version": "4.12.6",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.12.6.tgz",
+      "integrity": "sha512-EKM3YHy8t1miPh30d5X6xOrfG/Ctq0nbN4eMpCK7ezvI6T98/S66vswP+ihL4QqAK/k5KqreWOxof09+JG7N/A==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.1",
+        "type-fest": "^4.8.3"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.11"
+      }
+    },
+    "node_modules/vee-validate/node_modules/type-fest": {
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.17.0.tgz",
+      "integrity": "sha512-9flrz1zkfLRH3jO3bLflmTxryzKMxVa7841VeMgBaNQGY6vH4RCcpN/sQLB7mQQYh1GZ5utT2deypMuCy4yicw==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/vite": {
       "version": "5.2.8",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
diff --git a/package.json b/package.json
index f749976..3853a28 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "jwt-decode": "^4.0.0",
     "pinia": "^2.1.7",
     "update-electron-app": "^3.0.0",
+    "vee-validate": "^4.12.6",
     "vue": "^3.4.20",
     "vue-router": "^4.3.0",
     "vue-toastification": "^2.0.0-rc.5"
diff --git a/src/index.css b/src/index.css
index 09b9594..b6b55b9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,23 +5,26 @@
 @tailwind utilities;
 
 @layer utilities {
-  /* font */
-  * {
-    font-family: 'Inter', sans-serif;
-  }
+    /* font */
+    * {
+        font-family: 'Inter', sans-serif;
+    }
 
-  /* background */
-  body {
-    @apply bg-[#fcfafa];
-  }
+    /* background */
+    body {
+        @apply bg-[#fcfafa];
+    }
 
-  /* form elements */
-  input {
-    @apply placeholder:text-[#8a8a8a] placeholder:text-[14px] placeholder:font-medium !rounded-[4px];
-  }
-  button,
-  select,
-  input {
-    @apply !outline-none !ring-0;
-  }
+    /* form elements */
+    input {
+        @apply placeholder:text-[#8a8a8a] placeholder:text-[14px] placeholder:font-medium !rounded-[4px];
+    }
+
+    button,
+    select,
+    input {
+        @apply !outline-none !ring-0;
+    }
+
+ 
 }
diff --git a/src/main.ts b/src/main.ts
index 4591d80..079c76b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -27,7 +27,7 @@ const createWindow = () => {
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
     },
-    autoHideMenuBar: process.env.NODE_ENV === 'development' ? false : true,
+    autoHideMenuBar: process.env.NODE_ENV !== 'development',
   });
 
   // and load the index.html of the app.
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index b83115b..96e770e 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -6,6 +6,7 @@ import TrainingDepartment from '../views/training-department/TrainingDepartment.
 import FinanceDepartment from '../views/finance-department/FinanceDepartment.vue';
 import Course from '../views/training-department/course/Course.vue';
 import StudentDepartment from '../views/student-department/StudentDepartment.vue';
+import Student from '../views/student-department/student/Student.vue';
 import resolveDepartmentRoute from '../../utils/resolveDepartmentRoute';
 import getSession from '../../utils/getSession';
 
@@ -50,9 +51,15 @@ const routes: Array<RouteRecordRaw> = [
     children: [],
   },
   {
+    //cải thiện load khi cần thiết //
     path: '/student-department', // phòng công tác sinh viên
     component: StudentDepartment,
-    children: [],
+    children: [
+      {
+        path: 'student',
+        component: Student,
+      },
+    ],
   },
 ];
 
diff --git a/src/renderer/views/student-department/StudentDepartment.vue b/src/renderer/views/student-department/StudentDepartment.vue
index 12480dd..57dc87b 100644
--- a/src/renderer/views/student-department/StudentDepartment.vue
+++ b/src/renderer/views/student-department/StudentDepartment.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="flex">
-    <SideBar title="phòng công tác sinh viên" />
+    <SideBar
+      :routes="[
+        { name: 'bảng điều khiển', path: '/student-department' },
+        { name: 'Sinh viên', path: '/student-department/student' },
+      ]"
+      title="phòng công tác sinh viên"
+    />
     <div class="flex flex-col grow">
       <Topbar />
       <RouterView />
diff --git a/src/renderer/views/student-department/student/Student.vue b/src/renderer/views/student-department/student/Student.vue
new file mode 100644
index 0000000..fa9245a
--- /dev/null
+++ b/src/renderer/views/student-department/student/Student.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import Table from './components/Table.vue';
+import FunctionBar from './components/FunctionBar.vue';
+import EditModal from './components/EditModal.vue';
+import { Suspense } from 'vue';
+</script>
+
+<template>
+  <FunctionBar />
+  <Suspense>
+    <Table />
+  </Suspense>
+  <EditModal />
+</template>
+
+<style scoped></style>
diff --git a/src/renderer/views/student-department/student/components/CreateModal.vue b/src/renderer/views/student-department/student/components/CreateModal.vue
new file mode 100644
index 0000000..1c01d29
--- /dev/null
+++ b/src/renderer/views/student-department/student/components/CreateModal.vue
@@ -0,0 +1,179 @@
+<template>
+  <button
+    class="btn bg-secondary-400 text-base-white hover:bg-secondary-300"
+    onclick="create_modal_student.showModal()"
+  >
+    Lập sinh viên
+  </button>
+  <dialog id="create_modal_student" class="modal">
+    <div class="modal-box min-w-[900px] w p-20">
+      <form method="dialog">
+        <button
+          class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+          @click="handleCloseModal"
+        >
+          ✕
+        </button>
+      </form>
+      <h1 class="font-semibold text-3xl">Thêm môn học</h1>
+      <button class="flex items-center gap-2">
+        <img :src="plusCircleIcon" alt="add icon" />
+        <p>Nhập từ CSV</p>
+      </button>
+      <Form class="mt-8 grid grid-cols-4 gap-10" @submit="handleSubmit">
+        <label class="flex flex-col col-span-2">
+          Họ và tên
+          <Field class="input input-bordered" name="name" type="text" />
+          <p
+            v-if="studentStore.errorMessages['name']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['name'] }}
+          </p>
+        </label>
+
+        <label class="flex flex-col">
+          Ngày sinh
+          <Field class="input input-bordered" name="dateOfBirth" type="date" />
+
+          <p
+            v-if="studentStore.errorMessages['dateOfBirth']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['dateOfBirth'] }}
+          </p>
+        </label>
+        <label>
+          Đối tượng ưu tiên
+          <Field as="select" class="select select-bordered" name="priorityId">
+            <option disabled value="">Chọn đối tượng ưu tiên</option>
+            <option
+              v-for="priority in studentStore.priorities"
+              :key="priority.id"
+              :value="priority.id"
+            >
+              {{ priority.name }}
+            </option>
+          </Field>
+
+          <p
+            v-if="studentStore.errorMessages['priorityId']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['priorityId'] }}
+          </p>
+        </label>
+        <label class="flex flex-col">
+          Địa chỉ
+
+          <select
+            class="select select-bordered"
+            @change="studentStore.getDistrict($event.target.value)"
+          >
+            <option>Chọn tỉnh thành</option>
+            <option
+              v-for="province in studentStore.provinces"
+              :key="province.id"
+              :value="province.id"
+            >
+              {{ province.name }}
+            </option>
+          </select>
+        </label>
+        <label class="flex flex-col">
+          <br />
+          <Field as="select" class="select select-bordered" name="districtId">
+            <option>Chọn quận/huyện</option>
+            <option
+              v-for="district in studentStore.districts"
+              :key="district.id"
+              :value="district.id"
+            >
+              {{ district.name }}
+            </option>
+          </Field>
+
+          <p
+            v-if="studentStore.errorMessages['districtId']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['districtId'] }}
+          </p>
+        </label>
+        <label class="flex flex-col col-span-2">
+          <br />
+          <Field class="input input-bordered" name="address" type="text" />
+          <p
+            v-if="studentStore.errorMessages['address']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['address'] }}
+          </p>
+        </label>
+        <label class="flex flex-col">
+          Giới tính
+          <Field as="select" class="select select-bordered" name="gender">
+            <option disabled selected value="">Chọn giới tính</option>
+            <option value="male">Nam</option>
+            <option value="female">Nữ</option>
+          </Field>
+
+          <p
+            v-if="studentStore.errorMessages['gender']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['gender'] }}
+          </p>
+        </label>
+
+        <label>
+          Chuyên ngành
+          <Field as="select" class="select select-bordered" name="majorId">
+            <option disabled selected value="">Chọn chuyên ngành</option>
+            <option
+              v-for="major in studentStore.majors"
+              :key="major.id"
+              :value="major.id"
+            >
+              {{ major.name }}
+            </option>
+          </Field>
+
+          <p
+            v-if="studentStore.errorMessages['majorId']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['majorId'] }}
+          </p>
+        </label>
+        <button
+          class="row-start-4 btn w-[200px] bg-secondary-400 text-base-white hover:bg-secondary-300"
+          type="submit"
+        >
+          Lưu lại
+        </button>
+      </Form>
+    </div>
+  </dialog>
+</template>
+
+<script setup>
+import plusCircleIcon from '../../../../../assets/images/plusCircleIcon.svg';
+import { useStudentStore } from '../stores/student';
+import { Form, Field } from 'vee-validate';
+
+const studentStore = useStudentStore();
+
+const handleCloseModal = () => {
+  studentStore.clearErrorMessages();
+};
+
+const handleSubmit = async (value) => {
+  await studentStore.addStudent(value);
+  if (Object.keys(studentStore.errorMessages).length === 0) {
+    document.getElementById('create_modal_student').close();
+    await studentStore.fetchStudents(studentStore.search.query);
+    handleCloseModal();
+  }
+};
+</script>
diff --git a/src/renderer/views/student-department/student/components/EditModal.vue b/src/renderer/views/student-department/student/components/EditModal.vue
new file mode 100644
index 0000000..b78fcde
--- /dev/null
+++ b/src/renderer/views/student-department/student/components/EditModal.vue
@@ -0,0 +1,260 @@
+<template>
+  <dialog id="edit_modal_student" class="modal">
+    <div class="modal-box min-w-[900px] w p-20">
+      <form method="dialog">
+        <button
+          class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+          @click="handleCloseModal"
+        >
+          ✕
+        </button>
+      </form>
+      <Form class="mt-8 grid grid-cols-4 gap-10" @submit="handleSubmit">
+        <label class="flex flex-col col-span-2">
+          Họ và tên
+          <Field
+            v-model="localStudent.name"
+            class="input input-bordered"
+            name="name"
+            type="text"
+          />
+          <p
+            v-if="studentStore.errorMessages['name']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['name'] }}
+          </p>
+        </label>
+
+        <label class="flex flex-col">
+          Ngày sinh
+          <Field
+            v-model="localStudent.dateOfBirth"
+            class="input input-bordered"
+            name="dateOfBirth"
+            type="date"
+          />
+
+          <p
+            v-if="studentStore.errorMessages['dateOfBirth']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['dateOfBirth'] }}
+          </p>
+        </label>
+        <label>
+          Đối tượng ưu tiên
+          <Field
+            v-model="localStudent.priorityId"
+            as="select"
+            class="select select-bordered"
+            name="priorityId"
+          >
+            <option disabled value="">Chọn đối tượng ưu tiên</option>
+            <option
+              v-for="priority in studentStore.priorities"
+              :key="priority.id"
+              :value="priority.id"
+            >
+              {{ priority.name }}
+            </option>
+          </Field>
+
+          <p
+            v-if="studentStore.errorMessages['priorityId']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['priorityId'] }}
+          </p>
+        </label>
+        <label class="flex flex-col">
+          Địa chỉ
+
+          <select
+            v-model="localStudent.district.provinceId"
+            class="select select-bordered"
+            @change="studentStore.getDistrict($event.target.value)"
+          >
+            <option>Chọn tỉnh thành</option>
+            <option
+              v-for="province in studentStore.provinces"
+              :key="province.id"
+              :value="province.id"
+            >
+              {{ province.name }}
+            </option>
+          </select>
+        </label>
+        <label class="flex flex-col">
+          <br />
+          <Field
+            v-model="localStudent.districtId"
+            as="select"
+            class="select select-bordered"
+            name="districtId"
+          >
+            <option>Chọn quận/huyện</option>
+            <option
+              v-for="district in studentStore.districts"
+              :key="district.id"
+              :value="district.id"
+            >
+              {{ district.name }}
+            </option>
+          </Field>
+
+          <p
+            v-if="studentStore.errorMessages['districtId']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['districtId'] }}
+          </p>
+        </label>
+        <label class="flex flex-col col-span-2">
+          <br />
+          <Field
+            v-model="localStudent.address"
+            class="input input-bordered"
+            name="address"
+            type="text"
+          />
+          <p
+            v-if="studentStore.errorMessages['address']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['address'] }}
+          </p>
+        </label>
+        <label class="flex flex-col">
+          Giới tính
+          <Field
+            v-model="localStudent.gender"
+            as="select"
+            class="select select-bordered"
+            name="gender"
+          >
+            <option disabled selected value="">Chọn giới tính</option>
+            <option value="male">Nam</option>
+            <option value="female">Nữ</option>
+          </Field>
+
+          <p
+            v-if="studentStore.errorMessages['gender']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['gender'] }}
+          </p>
+        </label>
+
+        <label>
+          Chuyên ngành
+          <Field
+            v-model="localStudent.majorId"
+            as="select"
+            class="select select-bordered"
+            name="majorId"
+          >
+            <option disabled selected value="">Chọn chuyên ngành</option>
+            <option
+              v-for="major in studentStore.majors"
+              :key="major.id"
+              :value="major.id"
+            >
+              {{ major.name }}
+            </option>
+          </Field>
+
+          <p
+            v-if="studentStore.errorMessages['majorId']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ studentStore.errorMessages['majorId'] }}
+          </p>
+        </label>
+        <div class="col-span-3 flex gap-10">
+          <button
+            class="row-start-4 btn w-[200px] bg-secondary-400 text-base-white hover:bg-secondary-300"
+            type="submit"
+          >
+            Lưu lại
+          </button>
+          <button
+            class="row-start-4 btn w-[200px] bg-delete-button text-base-white hover:bg-secondary-300"
+            type="button"
+            @click="handleDelete"
+          >
+            Xóa
+          </button>
+        </div>
+      </Form>
+    </div>
+  </dialog>
+</template>
+
+<script setup>
+import plusCircleIcon from '../../../../../assets/images/plusCircleIcon.svg';
+import { useStudentStore } from '../stores/student';
+import { Form, Field } from 'vee-validate';
+import { reactive, watch } from 'vue';
+
+const studentStore = useStudentStore();
+
+const localStudent = reactive({
+  id: '',
+  name: '',
+  dateOfBirth: '',
+  priorityId: '',
+  districtId: '',
+  majorId: '',
+  gender: '',
+  address: '',
+  district: {
+    provinceId: '',
+  },
+});
+
+watch(
+  () => studentStore.currentStudent,
+  async (newVal) => {
+    if (newVal) {
+      newVal['dateOfBirth'] = newVal['dateOfBirth'].split('T')[0];
+      Object.assign(localStudent, newVal);
+      console.log(newVal);
+      await studentStore.getProvince();
+      await studentStore.getDistrict(newVal.district.provinceId);
+    } else {
+      Object.assign(localStudent, {
+        name: '',
+        dateOfBirth: '',
+        priorityId: '',
+        districtId: '',
+        gender: '',
+        address: '',
+        district: {
+          provinceId: '',
+        },
+      });
+    }
+  },
+  { immediate: true }
+);
+const handleCloseModal = () => {
+  studentStore.clearErrorMessages();
+  studentStore.selectStudent(null);
+};
+const handleDelete = async () => {
+  await studentStore.deleteStudent(localStudent.id);
+  if (Object.keys(studentStore.errorMessages).length === 0) {
+    document.getElementById('edit_modal_student').close();
+    handleCloseModal();
+  }
+};
+const handleSubmit = async (value) => {
+  await studentStore.updateStudent(value);
+  if (Object.keys(studentStore.errorMessages).length === 0) {
+    document.getElementById('edit_modal_student').close();
+    await studentStore.fetchStudents(studentStore.search.query);
+    handleCloseModal();
+  }
+};
+</script>
diff --git a/src/renderer/views/student-department/student/components/FunctionBar.vue b/src/renderer/views/student-department/student/components/FunctionBar.vue
new file mode 100644
index 0000000..506b4f8
--- /dev/null
+++ b/src/renderer/views/student-department/student/components/FunctionBar.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="flex items-center justify-evenly">
+    <CreateModal />
+    <div class="flex">
+      <select v-model="studentStore.search.typeQuery">
+        <option value="name">Tên</option>
+        <option value="mssv">Mã số sinh viên</option>
+      </select>
+      <img
+        :src="searchIcon"
+        alt="search icon"
+        class="bg-base-silver pl-4 rounded-l"
+      />
+      <input
+        v-model="searchQuery"
+        class="input bg-base-silver max-w-[500px] placeholder:text-black focus:border-transparent"
+        placeholder="Tìm kiếm tên sinh viên"
+        type="search"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import searchIcon from '../../../../../assets/images/searchIcon.svg';
+import CreateModal from './CreateModal.vue';
+import { useStudentStore } from '../stores/student';
+import { ref, watchEffect, watch } from 'vue';
+
+const studentStore = useStudentStore();
+
+function debounce(fn, delay) {
+  let timeoutID = null;
+  return function (...args) {
+    clearTimeout(timeoutID);
+    timeoutID = setTimeout(() => fn(...args), delay);
+  };
+}
+
+const searchQuery = ref(studentStore.search.query);
+
+const debouncedSearch = debounce(async (query) => {
+  await studentStore.fetchStudents(query);
+}, 500);
+
+watchEffect(() => {
+  debouncedSearch(searchQuery.value);
+});
+watch(
+  () => studentStore.search.typeQuery,
+  () => {
+    searchQuery.value = '';
+  }
+);
+</script>
diff --git a/src/renderer/views/student-department/student/components/Table.vue b/src/renderer/views/student-department/student/components/Table.vue
new file mode 100644
index 0000000..f8656c9
--- /dev/null
+++ b/src/renderer/views/student-department/student/components/Table.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="overflow-x-auto w-full h-[calc(100vh-300px)]">
+    <table class="table table-zebra">
+      <thead>
+        <tr>
+          <th>MSSV</th>
+          <th>Họ và tên</th>
+          <th>Giới tính</th>
+          <th>Chuyên ngành</th>
+          <th>Đối tượng ưu tiên</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="student in studentStore.students"
+          :key="student.id"
+          class="hover:!bg-secondary-100 cursor-pointer"
+          @click="() => handleRowClick(student)"
+        >
+          <td>{{ student.id }}</td>
+          <td>{{ student.name }}</td>
+          <td>{{ resolveGender(student.gender) }}</td>
+          <td>{{ student.major.name }}</td>
+          <td>{{ student.priority.name }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script setup>
+import { useStudentStore } from '../stores/student';
+import Table from '../../../training-department/course/components/Table.vue';
+
+const studentStore = useStudentStore();
+await studentStore.fetchStudents('');
+await studentStore.getPriorities();
+await studentStore.getMajors();
+await studentStore.getProvince();
+const handleRowClick = (student) => {
+  studentStore.selectStudent(student);
+  document.getElementById('edit_modal_student').showModal();
+};
+const resolveGender = (gender) => {
+  return gender === 'male' ? 'Nam' : 'Nữ';
+};
+</script>
+<style scoped></style>
diff --git a/src/renderer/views/student-department/student/stores/student.ts b/src/renderer/views/student-department/student/stores/student.ts
new file mode 100644
index 0000000..3c2bbe4
--- /dev/null
+++ b/src/renderer/views/student-department/student/stores/student.ts
@@ -0,0 +1,138 @@
+import { defineStore } from 'pinia';
+import { axiosClient } from '../../../../../api/axiosClient';
+
+type Faculty = {
+  id: Number;
+  name: String;
+};
+type Major = {
+  id: Number;
+  name: String;
+  facultyId: Number;
+  faculty: Faculty;
+};
+type Province = {
+  id: Number;
+  name: String;
+};
+type Priority = {
+  id: Number;
+  name: String;
+  discountPercentage: Number;
+};
+type District = {
+  id: Number;
+  name: String;
+  isMinor: Boolean;
+  provinceId: Number;
+  province: Province;
+};
+export type Student = {
+  id: Number;
+  name: String;
+  dateOfBirth: String;
+  gender: String;
+  address: String;
+  districtId: Number;
+  priorityId: Number;
+  district: District;
+  priority: Priority;
+  majorId: Number;
+  major: Major;
+};
+
+enum TypeQuery {
+  name = 'name',
+  mssv = 'mssv',
+}
+
+function arrayToObject(array: string[]) {
+  const result: Record<string, any> = {};
+
+  array.forEach((item) => {
+    const [key, ...value] = item.split(' ');
+    result[key] = value.join(' ');
+  });
+
+  return result;
+}
+
+export const useStudentStore = defineStore('student', {
+  state: () => ({
+    currentStudent: null as Student | null,
+    students: [] as Student[],
+    priorities: [] as Priority[],
+    provinces: [] as Province[],
+    districts: [] as District[],
+    majors: [] as Major[],
+    errorMessages: {} as Record<string, any>,
+    search: {
+      query: '',
+      typeQuery: TypeQuery.name,
+    },
+  }),
+  getters: {
+    getErrorMessages() {
+      return this.errorMessages;
+    },
+  },
+  actions: {
+    async fetchStudents(queryString: string) {
+      const query = `?${this.search.typeQuery}=${queryString}`;
+      const response = await axiosClient.get(`/student${query}`);
+      this.students = response.data;
+    },
+
+    async getPriorities() {
+      const response = await axiosClient.get('/priority');
+      this.priorities = response.data;
+    },
+
+    async addStudent(student: { [p: string]: File | string }) {
+      try {
+        await axiosClient.post('/student', student);
+      } catch (error) {
+        this.errorMessages = arrayToObject(error.response.data.message) || {};
+      }
+    },
+    async getProvince() {
+      const response = await axiosClient.get('/province');
+      this.provinces = response.data;
+    },
+    async getDistrict(provinceId: number) {
+      const response = await axiosClient.get(
+        `/province/district/${provinceId}`
+      );
+
+      this.districts = response.data;
+      console.log(this.districts);
+    },
+    async updateStudent(student: Partial<Student>) {
+      try {
+        await axiosClient.patch(`/student/${this.currentStudent.id}`, student);
+      } catch (error) {
+        this.errorMessages = error.response.data.message || [];
+      }
+    },
+    async getMajors() {
+      const response = await axiosClient.get('/major');
+      this.majors = response.data;
+    },
+    async deleteStudent(id: number | string) {
+      await axiosClient.delete(`/student/${id}`);
+      this.currentStudent = null;
+    },
+    selectTypeQuery(value: TypeQuery) {
+      this.search.typeQuery = value;
+    },
+    selectStudent(student: Student) {
+      this.currentStudent = student;
+    },
+    updateSearchQuery(value: string) {
+      this.search.query = value;
+    },
+    clearErrorMessages() {
+      this.errorMessages = {};
+    },
+  },
+});
diff --git a/src/renderer/views/training-department/course/components/CreateModal.vue b/src/renderer/views/training-department/course/components/CreateModal.vue
index 4dd8595..ac69fdd 100644
--- a/src/renderer/views/training-department/course/components/CreateModal.vue
+++ b/src/renderer/views/training-department/course/components/CreateModal.vue
@@ -23,19 +23,19 @@
       <form class="mt-8 grid grid-cols-2 gap-10" @submit="handleSubmit">
         <label class="flex flex-col col-span-2">
           Tên môn học
-          <input name="name" type="text" class="input input-bordered" />
+          <input class="input input-bordered" name="name" type="text" />
         </label>
         <label class="flex flex-col">
           Số tiết
           <input
+            class="input input-bordered"
             name="numberOfPeriods"
             type="number"
-            class="input input-bordered"
           />
         </label>
         <label class="flex flex-col">
           Khoa
-          <select name="facultyId" class="select select-bordered">
+          <select class="select select-bordered" name="facultyId">
             <option
               v-for="faculty in courseStore.faculties"
               :key="faculty.id"
@@ -47,7 +47,7 @@
         </label>
         <label class="flex flex-col">
           loại môn học
-          <select name="courseTypeId" class="select select-bordered">
+          <select class="select select-bordered" name="courseTypeId">
             <option
               v-for="courseType in courseStore.courseTypes"
               :key="courseType.id"
@@ -76,6 +76,7 @@
 <script setup>
 import plusCircleIcon from '../../../../../assets/images/plusCircleIcon.svg';
 import { useCourseStore } from '../stores/course';
+
 const courseStore = useCourseStore();
 
 courseStore.getFaculties();
@@ -84,7 +85,7 @@ courseStore.getCourseTypes();
 const handleCloseModal = () => {
   courseStore.clearErrorMessages();
 };
-
+console.log(courseStore.errorMessages);
 const handleSubmit = (e) => {
   e.preventDefault();