diff --git a/src/app/(main)/settings/changepassword/page.tsx b/src/app/(main)/settings/changepassword/page.tsx
index b6b9a41..e470ca7 100644
--- a/src/app/(main)/settings/changepassword/page.tsx
+++ b/src/app/(main)/settings/changepassword/page.tsx
@@ -14,40 +14,33 @@ import { Metadata } from "next";
 import Link from "next/link";
 import { Suspense } from "react";
 
-
 export const metadata: Metadata = {
-    title: "Change Password",
-  };
+  title: "Change Password",
+};
 
+const ChangePasswordPage: React.FC = async () => {
+  const { t } = await getServerI18n("User Group");
+  // preloadTeamLeads();
+  // preloadStaff();
+  return (
+    <>
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        flexWrap="wrap"
+        rowGap={2}
+      >
+        <Typography variant="h4" marginInlineEnd={2}>
+          {t("Change Password")}
+        </Typography>
+      </Stack>
+      <I18nProvider namespaces={["User Group", "common"]}>
+        <Suspense fallback={<ChangePassword.Loading />}>
+          <ChangePassword />
+        </Suspense>
+      </I18nProvider>
+    </>
+  );
+};
 
-  const ChangePasswordPage: React.FC = async () => {
-    const { t } = await getServerI18n("User Group");
-    // preloadTeamLeads();
-    // preloadStaff();
-    return (
-      <>
-        <Stack
-          direction="row"
-          justifyContent="space-between"
-          flexWrap="wrap"
-          rowGap={2}
-        >
-          <Typography variant="h4" marginInlineEnd={2}>
-            {t("Change Password")}
-          </Typography>
-        </Stack>
-        {/* <I18nProvider namespaces={["User Group", "common"]}>
-          <Suspense fallback={<UserGroupSearch.Loading />}>
-            <UserGroupSearch />
-          </Suspense>
-        </I18nProvider> */}
-                <I18nProvider namespaces={["User Group", "common"]}>
-          <Suspense fallback={<ChangePassword.Loading />}>
-            <ChangePassword />
-          </Suspense>
-        </I18nProvider>
-      </>
-    );
-  };
-  
-  export default ChangePasswordPage;
\ No newline at end of file
+export default ChangePasswordPage;
diff --git a/src/app/(main)/settings/staff/user/page.tsx b/src/app/(main)/settings/staff/user/page.tsx
index 86373bb..b45dc04 100644
--- a/src/app/(main)/settings/staff/user/page.tsx
+++ b/src/app/(main)/settings/staff/user/page.tsx
@@ -7,19 +7,15 @@ import { Suspense } from "react";
 import { preloadUser } from "@/app/api/user";
 import { searchParamsProps } from "@/app/utils/fetchUtil";
 
-const User: React.FC<searchParamsProps> = async ({
-  searchParams
-}) => {
+const User: React.FC<searchParamsProps> = async ({ searchParams }) => {
   const { t } = await getServerI18n("user");
-  preloadUser()
+  preloadUser();
   return (
     <>
       <Typography variant="h4">{t("Edit User")}</Typography>
       <I18nProvider namespaces={["user", "common"]}>
         <Suspense fallback={<EditUser.Loading />}>
-        <EditUser 
-        // id={parseInt(searchParams.id as string)}
-        />
+          <EditUser searchParams={searchParams} />
         </Suspense>
       </I18nProvider>
     </>
diff --git a/src/app/(main)/settings/user/edit/page.tsx b/src/app/(main)/settings/user/edit/page.tsx
index fc36425..f820520 100644
--- a/src/app/(main)/settings/user/edit/page.tsx
+++ b/src/app/(main)/settings/user/edit/page.tsx
@@ -20,10 +20,10 @@ const EditUserPage: React.FC<searchParamsProps> = async ({
 
   return (
     <>
-      <I18nProvider namespaces={["team", "common"]}>
+      <I18nProvider namespaces={["user", "common"]}>
         <Suspense fallback={<EditUser.Loading />}>
           <EditUser 
-          // id={id}
+            searchParams={searchParams}
           />
         </Suspense>
       </I18nProvider>
diff --git a/src/components/ChangePassword/ChangePasswordForm.tsx b/src/components/ChangePassword/ChangePasswordForm.tsx
index 19e2a29..9801ec7 100644
--- a/src/components/ChangePassword/ChangePasswordForm.tsx
+++ b/src/components/ChangePassword/ChangePasswordForm.tsx
@@ -33,19 +33,12 @@ const ChagnePasswordForm: React.FC = () => {
     setValue,
   } = useFormContext<PasswordInputs>();
 
-  // const resetGroup = useCallback(() => {
-  //     console.log(defaultValues);
-  //     if (defaultValues !== undefined) {
-  //       resetField("description");
-  //     }
-  //   }, [defaultValues]);
-
   return (
     <Card sx={{ display: "block" }}>
       <CardContent component={Stack} spacing={4}>
         <Box>
           <Typography variant="overline" display="block" marginBlockEnd={1}>
-            {t("Group Info")}
+            {t("Please Fill in all the Fields")}
           </Typography>
           <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
             <Grid item xs={6}>
diff --git a/src/components/ChangePassword/ChangePasswordWrapper.tsx b/src/components/ChangePassword/ChangePasswordWrapper.tsx
index 30acb9d..2de12db 100644
--- a/src/components/ChangePassword/ChangePasswordWrapper.tsx
+++ b/src/components/ChangePassword/ChangePasswordWrapper.tsx
@@ -7,10 +7,6 @@ interface SubComponents {
 } 
 
 const ChangePasswordWrapper: React.FC & SubComponents = async () => {
-    // const records = await fetchAuth()
-    // const users = await fetchUser()
-    // console.log(users)
-    // const auth = records.records as auth[]
 
   return <ChangePassword />;
 };
diff --git a/src/components/EditUser/EditUser.tsx b/src/components/EditUser/EditUser.tsx
index 58067b9..bbbd174 100644
--- a/src/components/EditUser/EditUser.tsx
+++ b/src/components/EditUser/EditUser.tsx
@@ -33,11 +33,15 @@ import { auth, fetchAuth } from "@/app/api/group/actions";
 import AuthAllocation from "./AuthAllocation";
 
 interface Props {
-  rules: passwordRule
+  user: UserResult,
+  rules: passwordRule,
+  auths: auth[]
 } 
 
 const EditUser: React.FC<Props> = async ({
-  rules
+  user,
+  rules,
+  auths
 }) => {
   const { t } = useTranslation();
   const formProps = useForm<UserInputs>();
@@ -46,8 +50,6 @@ const EditUser: React.FC<Props> = async ({
   const [tabIndex, setTabIndex] = useState(0);
   const router = useRouter();
   const [serverError, setServerError] = useState("");
-  const [data, setData] = useState<UserResult>();
-  const [auths, setAuths] = useState<auth[]>();
 
   const handleTabChange = useCallback<NonNullable<TabsProps["onChange"]>>(
     (_e, newValue) => {
@@ -57,34 +59,23 @@ const EditUser: React.FC<Props> = async ({
   );
 
   const errors = formProps.formState.errors;
-console.log("asdasd")
-  const fetchUserDetail = async () => {
+
+  useEffect(() => {
     try {
-      // fetch user info
-      const userDetail = await fetchUserDetails(id);
-      console.log(userDetail);
-      const _data = userDetail.data as UserResult;
-      console.log(_data);
-      setData(_data);
-      //fetch user auths
-      const authDetail = await fetchAuth("user", id);
-      setAuths(authDetail.records)
-      const addAuthIds = authDetail.records.filter((item) => item.v === 1).map((item) => item.id).sort((a, b) => a - b);
+      const addAuthIds = auths && auths.length > 0 
+      ? auths.filter((item) => item.v === 1).map((item) => item.id).sort((a, b) => a - b)
+      : []
 
       formProps.reset({
-        name: _data.username,
-        email: _data.email,
-        addAuthIds: addAuthIds || []
+        name: user.username,
+        email: user.email,
+        addAuthIds: addAuthIds
       });
     } catch (error) {
       console.log(error);
       setServerError(t("An error has occurred. Please try again later."));
     }
-  }
-
-  useEffect(() => {
-    fetchUserDetail();
-  }, []);
+  }, [user, auths]);
 
   const hasErrorsInTab = (
     tabIndex: number,
@@ -92,10 +83,8 @@ console.log("asdasd")
   ) => {
     switch (tabIndex) {
       case 0:
-        console.log("yolo")
         return Object.keys(errors).length > 0;
       default:
-        console.log("yolo")
         false;
     }
   };
@@ -123,7 +112,7 @@ console.log("asdasd")
           if (!regex_pw.test(pw)) {
             haveError = true
             formProps.setError("password", { message: "A combination of uppercase letters, lowercase letters, numbers, and symbols is required.", type: "required" })
-        }
+          }
         }
         const userData = {
           name: data.name,
diff --git a/src/components/EditUser/EditUserWrapper.tsx b/src/components/EditUser/EditUserWrapper.tsx
index 9273d4a..f7d77eb 100644
--- a/src/components/EditUser/EditUserWrapper.tsx
+++ b/src/components/EditUser/EditUserWrapper.tsx
@@ -6,20 +6,23 @@ import { useSearchParams } from "next/navigation";
 import { fetchTeam, fetchTeamDetail } from "@/app/api/team";
 import { fetchStaff } from "@/app/api/staff";
 import { fetchPwRules, fetchUser, fetchUserDetail } from "@/app/api/user";
+import { searchParamsProps } from "@/app/utils/fetchUtil";
+import { fetchUserDetails } from "@/app/api/user/actions";
+import { fetchAuth } from "@/app/api/group/actions";
 
 interface SubComponents {
   Loading: typeof EditUserLoading;
 }
 
-interface Props {
-  // id: number
-}
-const EditUserWrapper: React.FC<Props> & SubComponents = async ({
-  // id
+const EditUserWrapper: React.FC<searchParamsProps> & SubComponents = async ({
+  searchParams
 }) => {
+  const id = parseInt(searchParams.id as string)
   const pwRule = await fetchPwRules()
+  const user = await fetchUserDetails(id);
+  const auths = await fetchAuth("user", id);
 
-  return <EditUser rules={pwRule} />
+  return <EditUser user={user.data} rules={pwRule} auths={auths.records}/>
 };
 
 EditUserWrapper.Loading = EditUserLoading;