diff --git a/src/app/(main)/settings/staff/edit/page.tsx b/src/app/(main)/settings/staff/edit/page.tsx
index bb2b759..94138fa 100644
--- a/src/app/(main)/settings/staff/edit/page.tsx
+++ b/src/app/(main)/settings/staff/edit/page.tsx
@@ -7,17 +7,34 @@ import { I18nProvider } from "@/i18n";
 import EditStaffWrapper from "@/components/EditStaff/EditStaffWrapper";
 import { Metadata } from "next";
 import { searchParamsProps } from "@/app/utils/fetchUtil";
+import { fetchIndivStaff, fetchStaffInvolvedProjects, fetchStaffSalaryEffectiveInfo } from "@/app/api/staff";
+import { fetchCompanyCombo } from "@/app/api/companys/actions";
+import { fetchTeamCombo } from "@/app/api/team";
+import { fetchDepartmentCombo } from "@/app/api/departments/actions";
+import { fetchPositionCombo } from "@/app/api/positions/actions";
+import { fetchGradeCombo } from "@/app/api/grades/actions";
+import { fetchSkillCombo } from "@/app/api/skill/actions";
+import { fetchSalaryCombo } from "@/app/api/salarys/actions";
 
 // export const metadata: Metadata = {
 //     title: "staff-edit",
 //   };
 
 const EditStaffPage: React.FC<searchParamsProps> = async ({
-  searchParams,
-}) => {
-    // const searchParams = useSearchParams();
-    // const userId = searchParams.get('param');
-    // console.log(userId); // Access the value of the "user_id" parameter
+    searchParams,
+  }) => {
+  
+  // preload 
+  fetchIndivStaff(parseInt(searchParams.id as string)),
+  fetchCompanyCombo(),
+  fetchTeamCombo(),
+  fetchDepartmentCombo(),
+  fetchPositionCombo(),
+  fetchGradeCombo(),
+  fetchSkillCombo(),
+  fetchSalaryCombo(),
+  fetchStaffSalaryEffectiveInfo(parseInt(searchParams.id as string)),
+  fetchStaffInvolvedProjects(parseInt(searchParams.id as string))
 
   return (
     <>
diff --git a/src/app/api/staffInfoHistory/index.ts b/src/app/api/staffInfoHistory/index.ts
new file mode 100644
index 0000000..d88b1a9
--- /dev/null
+++ b/src/app/api/staffInfoHistory/index.ts
@@ -0,0 +1,63 @@
+import { serverFetchJson } from "@/app/utils/fetchUtil";
+import { BASE_API_URL } from "@/config/api";
+import { cache } from "react";
+import { Grade } from "../grades";
+import { PositionResult } from "../positions";
+
+export type GradeLogInfo = {
+    id: number,
+    staffId: number,
+    staffName: String,
+    staffCode: String,
+    grade: Grade,
+    from: String,
+    to?: String,
+}
+
+export type PositionLogInfo = {
+    id: number,
+    staffId: number,
+    staffName: String,
+    staffCode: String,
+    position: PositionResult,
+    from: String,
+    to?: String,
+}
+
+type team = {
+    id: number;
+    description: string;
+    name: string;
+    code: string;
+    teamLead?: number
+}
+
+export type TeamLogInfo = {
+    id: number,
+    staffId: number,
+    staffName: String,
+    staffCode: String,
+    Team: team,
+    from: String,
+    to?: String,
+}
+
+export const fetchGradesLog = cache(async (staffId: number) => {
+    return serverFetchJson<GradeLogInfo[]>(`${BASE_API_URL}/gradeLog/${staffId}`, {
+      next: { tags: ["grades"] },
+    });
+  });
+  
+
+export const fetchPositionLog = cache(async (staffId: number) => {
+    return serverFetchJson<PositionLogInfo[]>(`${BASE_API_URL}/positionLog/${staffId}`, {
+      next: { tags: ["position"] },
+    });
+  });
+
+export const fetchTeamLog = cache(async (staffId: number) => {
+    return serverFetchJson<TeamLogInfo[]>(`${BASE_API_URL}/teamLog/${staffId}`, {
+      next: { tags: ["team"] },
+    });
+  });
+  
\ No newline at end of file
diff --git a/src/components/EditStaff/EditStaff.tsx b/src/components/EditStaff/EditStaff.tsx
index 9426e1a..2192542 100644
--- a/src/components/EditStaff/EditStaff.tsx
+++ b/src/components/EditStaff/EditStaff.tsx
@@ -20,6 +20,7 @@ import StaffInfo from "./StaffInfo";
 import { IndividualStaff, projects, SalaryEffectiveInfo } from "@/app/api/staff";
 import dayjs from "dayjs";
 import ProjectHistory from "./ProjectHistory";
+import { InfoHistory } from "./EditStaffWrapper";
 // import { useGridApiContext } from '@mui/x-data-grid';
 
 export interface comboItem {
@@ -37,11 +38,13 @@ interface formProps {
   combos: comboItem;
   SalaryEffectiveInfo: SalaryEffectiveInfo[];
   InvolvedProject?: projects[]
+  InfoHistory: InfoHistory
 }
 
 
-const EditStaff: React.FC<formProps> = ({ Staff, combos, SalaryEffectiveInfo, InvolvedProject }) => {
-  console.log(InvolvedProject)
+
+const EditStaff: React.FC<formProps> = ({ Staff, combos, SalaryEffectiveInfo, InvolvedProject, InfoHistory }) => {
+  console.log(InfoHistory)
   const defaultSkillset = Staff.skillset.map((s: any) => s.skill.id)
   const { t } = useTranslation();
   const searchParams = useSearchParams()
diff --git a/src/components/EditStaff/EditStaffWrapper.tsx b/src/components/EditStaff/EditStaffWrapper.tsx
index cd97c09..c55a92c 100644
--- a/src/components/EditStaff/EditStaffWrapper.tsx
+++ b/src/components/EditStaff/EditStaffWrapper.tsx
@@ -9,6 +9,7 @@ import { fetchGradeCombo } from "@/app/api/grades/actions";
 import { fetchSkillCombo } from "@/app/api/skill/actions";
 import { fetchSalaryCombo } from "@/app/api/salarys/actions";
 import { fetchCompanyCombo } from "@/app/api/companys/actions";
+import { GradeLogInfo, PositionLogInfo, TeamLogInfo, fetchGradesLog, fetchPositionLog, fetchTeamLog } from "@/app/api/staffInfoHistory";
 
 interface SubComponents {
   Loading: typeof EditStaffLoading;
@@ -18,6 +19,12 @@ interface Props {
   id: number
 }
 
+export type InfoHistory = {
+  gradesLog?: GradeLogInfo[],
+  positionLog?: PositionLogInfo[],
+  teamLog?: TeamLogInfo[],
+}
+
 const EditStaffWrapper: React.FC<Props> & SubComponents = async ({ 
   id
  }) => {
@@ -33,7 +40,10 @@ const EditStaffWrapper: React.FC<Props> & SubComponents = async ({
     SkillCombo,
     SalaryCombo,
     SalaryEffectiveInfo,
-    InvolvedProject
+    InvolvedProject,
+    GradesLog,
+    PositionLog,
+    TeamLog,
   ] = await Promise.all([
     fetchIndivStaff(id),
     fetchCompanyCombo(),
@@ -44,11 +54,12 @@ const EditStaffWrapper: React.FC<Props> & SubComponents = async ({
     fetchSkillCombo(),
     fetchSalaryCombo(),
     fetchStaffSalaryEffectiveInfo(id),
-    fetchStaffInvolvedProjects(id)
+    fetchStaffInvolvedProjects(id),
+    fetchGradesLog(id),
+    fetchPositionLog(id),
+    fetchTeamLog(id),
   ]);
 
-  console.log(InvolvedProject)
-  console.log(SalaryCombo.records)
   const combos: comboItem = {
     company: CompanyCombo.records,
     team: TeamCombo.records,
@@ -59,12 +70,17 @@ const EditStaffWrapper: React.FC<Props> & SubComponents = async ({
     salary: SalaryCombo.records,
   }   
 
+  const InfoHistory: InfoHistory = {
+    gradesLog: GradesLog,
+    positionLog: PositionLog,
+    teamLog: TeamLog,
+  }
+  console.log(InfoHistory)
+
 Staff.data.joinDate = Staff.data.joinDate && dateArrayToString(Staff.data.joinDate) as string
 Staff.data.departDate = Staff.data.departDate && dateArrayToString(Staff.data.departDate) as string
-// [{id:0, salaryPoint: 1, date:"2021-05-05"}, {id:1, salaryPoint: 43, date:"2024-05-05"}]
-console.log(Staff.data)
 
-  return <EditStaff Staff={Staff.data} combos={combos} SalaryEffectiveInfo={SalaryEffectiveInfo} InvolvedProject={InvolvedProject}/>;
+  return <EditStaff Staff={Staff.data} combos={combos} SalaryEffectiveInfo={SalaryEffectiveInfo} InvolvedProject={InvolvedProject} InfoHistory={InfoHistory}/>;
 };
 
 EditStaffWrapper.Loading = EditStaffLoading;
diff --git a/src/components/EditStaff/PositionGradeHistory.tsx b/src/components/EditStaff/PositionGradeHistory.tsx
new file mode 100644
index 0000000..cfffe1f
--- /dev/null
+++ b/src/components/EditStaff/PositionGradeHistory.tsx
@@ -0,0 +1,11 @@
+
+interface Props {
+    gradeLog?: any[]
+  }
+
+
+const PositionGradeHistory: React.FC<Props> = async ({ gradeLog }) => {
+
+
+    return null
+}
\ No newline at end of file