diff --git a/frontend/components/applicant/Board.tsx b/frontend/components/applicant/Board.tsx
index 042bce56..d20b14c7 100644
--- a/frontend/components/applicant/Board.tsx
+++ b/frontend/components/applicant/Board.tsx
@@ -17,21 +17,18 @@ interface ApplicantBoardProps {
 }
 
 const ApplicantBoard = ({ generation }: ApplicantBoardProps) => {
-  const [data, setData] = useState<ApplicantReq[]>([]);
+  const [userApplicationData, setUserApplicationData] = useState<
+    ApplicantReq[]
+  >([]);
+
   const searchParams = useSearchParams();
   const pageIndex = searchParams.get("page") || "1";
   const order = searchParams.get("order") || ORDER_MENU.APPLICANT[0].type;
-  const { createSearchData } = useSearchQuery(pageIndex);
 
-  const onClick = (id: string) => {
-    if (!allData) return;
-    setData(
-      applicants?.filter((value) => applicantDataFinder(value, "id") === id)[0]
-    );
-  };
+  const { createSearchData } = useSearchQuery(pageIndex);
 
   const {
-    data: allData,
+    data: pageUserApplications,
     isLoading,
     isError,
   } = useQuery(
@@ -42,7 +39,7 @@ const ApplicantBoard = ({ generation }: ApplicantBoardProps) => {
     }
   );
 
-  if (!allData || isLoading) {
+  if (!pageUserApplications || isLoading) {
     return <div>로딩중...</div>;
   }
 
@@ -50,7 +47,7 @@ const ApplicantBoard = ({ generation }: ApplicantBoardProps) => {
     return <div>에러 발생</div>;
   }
 
-  const { applicants } = allData;
+  const { applicants } = pageUserApplications;
 
   const boardData = applicants.map((value) => ({
     id: applicantDataFinder(value, "id"),
@@ -73,6 +70,13 @@ const ApplicantBoard = ({ generation }: ApplicantBoardProps) => {
     ],
   }));
 
+  const onClick = (id: string) => {
+    if (!pageUserApplications) return;
+    setUserApplicationData(
+      applicants?.filter((value) => applicantDataFinder(value, "id") === id)[0]
+    );
+  };
+
   return (
     <Board
       wapperClassname="divide-x"
@@ -83,14 +87,14 @@ const ApplicantBoard = ({ generation }: ApplicantBoardProps) => {
         <div className="flex-1 overflow-auto px-12 min-w-[40rem]">
           <ApplicantDetailLeft
             cardId={-1}
-            data={data}
+            data={userApplicationData}
             generation={generation}
           />
         </div>
       </div>
       <div className="flex flex-1 min-h-0">
         <div className="flex-1 overflow-auto px-12">
-          <ApplicantDetailRight data={data} />
+          <ApplicantDetailRight data={userApplicationData} />
         </div>
       </div>
     </Board>
diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
index d6ff1ccb..526a5a88 100644
--- a/frontend/components/applicant/applicantNode/CustomResource.component.tsx
+++ b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
@@ -2,22 +2,78 @@ import Txt from "@/components/common/Txt.component";
 import { ApplicantReq } from "@/src/apis/applicant";
 import { applicantDataFinder } from "@/src/functions/finder";
 import Portfolio from "./Portfolio";
+import { getApplicantPassState } from "@/src/functions/formatter";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  postApplicantPassState,
+  PostApplicantPassStateParams,
+} from "@/src/apis/passState";
+import { getMyInfo } from "@/src/apis/interview";
 interface ApplicantResourceProps {
   data: ApplicantReq[];
   postId: string;
 }
 
 const ApplicantResource = ({ data, postId }: ApplicantResourceProps) => {
+  const queryClient = useQueryClient();
+  const { mutate: updateApplicantPassState } = useMutation({
+    mutationFn: (params: PostApplicantPassStateParams) =>
+      postApplicantPassState(params),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          "allApplicantsWithPassState",
+          applicantDataFinder(data, "generation"),
+        ],
+      });
+    },
+  });
+  const { data: userData, isLoading } = useQuery(["user"], getMyInfo);
+
   return (
     <>
       <div className="flex flex-col gap-1 mb-2">
         <Txt className="text-xl text-secondary-200 font-medium">
           {applicantDataFinder(data, "major")}
         </Txt>
-        <Txt typography="h2">{`[${applicantDataFinder(
-          data,
-          "field"
-        )}] ${applicantDataFinder(data, "name")}`}</Txt>
+        <div className="flex gap-8 items-center">
+          <Txt typography="h2">{`[${applicantDataFinder(
+            data,
+            "field"
+          )}] ${applicantDataFinder(data, "name")}`}</Txt>
+          <div className="flex justify-between grow items-center">
+            <Txt typography="h5" color="light_gray" className="truncate">
+              {getApplicantPassState(applicantDataFinder(data, "passState")) ||
+                "에러 발생"}
+            </Txt>
+            {userData?.role === "ROLE_OPERATION" && (
+              <div className="flex gap-4">
+                <button
+                  className="border rounded-lg px-4 py-2 truncate"
+                  onClick={() => {
+                    updateApplicantPassState({
+                      applicantsId: applicantDataFinder(data, "id"),
+                      afterState: "pass",
+                    });
+                  }}
+                >
+                  합격
+                </button>
+                <button
+                  className="border rounded-lg px-4 py-2 truncate"
+                  onClick={() => {
+                    updateApplicantPassState({
+                      applicantsId: applicantDataFinder(data, "id"),
+                      afterState: "non-pass",
+                    });
+                  }}
+                >
+                  불합격
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
       </div>
       <div className="flex gap-4 mb-8">
         <div className="flex gap-1">
diff --git a/frontend/src/apis/applicant/index.ts b/frontend/src/apis/applicant/index.ts
index a2a5db74..802687d5 100644
--- a/frontend/src/apis/applicant/index.ts
+++ b/frontend/src/apis/applicant/index.ts
@@ -1,6 +1,7 @@
 import { getAllInterviewerWithOrder } from "@/src/apis/interview";
 import { APPLICANT_KEYS } from "@/src/constants";
 import { https } from "@/src/functions/axios";
+import { ApplicantPassState } from "../kanban";
 
 export interface ApplicantReq {
   name: string;
@@ -35,16 +36,56 @@ export interface PageInfo {
   boardLimit: number;
 }
 
+interface ApplicantByPageReqAnswer {
+  field: string;
+  field1: string;
+  field2: string;
+  name: string;
+  contacted: string;
+  classOf: string;
+  registered: string;
+  grade: string;
+  semester: string;
+  major: string;
+  doubleMajor: string;
+  minor: string;
+  activity: string;
+  reason: string;
+  future: string;
+  experience: string;
+  experienceTextarea: string;
+  restoration: string;
+  deep: string;
+  collaboration: string;
+  studyPlan: string;
+  portfolio: string;
+  fileUrl: string;
+  email: string;
+  check: string;
+  personalInformationAgree: string;
+  personalInformationAgreeForPortfolio: string;
+  generation: string;
+  uploadDate: string;
+  channel: string;
+  timeline: number[];
+  id: string;
+  year: number;
+  created_at: string;
+  passState: {
+    passState: ApplicantPassState;
+  };
+}
+
 interface ApplicantByPageReq {
   pageInfo: PageInfo;
-  answers: AllApplicantReq[];
+  answers: ApplicantByPageReqAnswer[];
 }
 
 export const getApplicantByPageWithGeneration = async (
   page: number,
   generation: string,
   order: string
-): Promise<{ maxPage: number; applicants: ApplicantReq[][] }> => {
+) => {
   const {
     data: { pageInfo, answers },
   } = await https.get<ApplicantByPageReq>(
@@ -53,11 +94,20 @@ export const getApplicantByPageWithGeneration = async (
 
   return {
     maxPage: pageInfo.endPage,
-    applicants: answers.map((applicant) =>
-      Object.keys(applicant).map((key) => ({
-        name: key,
-        answer: applicant[key],
-      }))
+    applicants: answers.map(
+      (applicant) =>
+        Object.keys(applicant).map((key) => {
+          if (key === "passState") {
+            return {
+              name: "passState",
+              answer: applicant.passState.passState,
+            };
+          }
+          return {
+            name: key,
+            answer: applicant[key as keyof ApplicantByPageReqAnswer],
+          };
+        }) as ApplicantReq[]
     ),
   };
 };