diff --git a/src/app/(main)/stockIssue/page.tsx b/src/app/(main)/stockIssue/page.tsx
new file mode 100644
index 0000000..e8cc375
--- /dev/null
+++ b/src/app/(main)/stockIssue/page.tsx
@@ -0,0 +1,29 @@
+import SearchPage from "@/components/StockIssue/index";
+import { PreloadList } from "@/components/StockIssue/action";
+import { getServerI18n } from "@/i18n";
+import { I18nProvider } from "@/i18n";
+import { Stack, Typography } from "@mui/material";
+import { Metadata } from "next";
+import { Suspense } from "react";
+
+export const metadata: Metadata = {
+  title: "Pick Order",
+};
+
+const SearchView: React.FC = async () => {
+  const { t } = await getServerI18n("pickOrder");
+
+  PreloadList();
+
+  return (
+    <>
+      <I18nProvider namespaces={["pickOrder", "common"]}>
+        <Suspense fallback={<SearchPage.Loading />}>
+          <SearchPage />
+        </Suspense>
+      </I18nProvider>
+    </>
+  );
+};
+
+export default SearchView;
diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
index f06168e..1022e26 100644
--- a/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -28,6 +28,7 @@ const pathToLabelMap: { [path: string]: string } = {
   "/jo": "Job Order",
   "/jo/edit": "Edit Job Order",
   "/putAway": "Put Away",
+  "/stockIssue": "Stock Issue",
 };
 
 const Breadcrumb = () => {
diff --git a/src/components/NavigationContent/NavigationContent.tsx b/src/components/NavigationContent/NavigationContent.tsx
index 3695359..bf56617 100644
--- a/src/components/NavigationContent/NavigationContent.tsx
+++ b/src/components/NavigationContent/NavigationContent.tsx
@@ -84,6 +84,12 @@ const NavigationContent: React.FC = () => {
           label: "Stock Take Management",
           path: "/stocktakemanagement",
         },
+        //TODO: anna
+        //  {
+        //   icon: <RequestQuote />,
+        //   label: "Stock Issue",
+        //   path: "/stockIssue",
+        // },
         {
           icon: <RequestQuote />,
           label: "Put Away Scan",
diff --git a/src/components/StockIssue/SearchPage.tsx b/src/components/StockIssue/SearchPage.tsx
index dd6d0a5..af37375 100644
--- a/src/components/StockIssue/SearchPage.tsx
+++ b/src/components/StockIssue/SearchPage.tsx
@@ -20,7 +20,7 @@ const SearchPage: React.FC<Props> = ({dataList}) => {
         () => [
           {
             label: t("Lot No."),
-            paramName: "lot_no",
+            paramName: "lotNo",
             type: "text",
           },
         ],
@@ -29,11 +29,11 @@ const SearchPage: React.FC<Props> = ({dataList}) => {
 
     const columns = useMemo<Column<StockIssueResult>[]>(
     () => [
-      { name: "item_code", label: t("Item Code") },
-      { name: "item_description", label: t("Item") },
-      { name: "lot_no", label: t("Lot No.") },
-      { name: "store_location", label: t("Location") },
-      { name: "bad_item_qty", label: t("Defective Qty") }
+      { name: "itemCode", label: t("Item Code") },
+      { name: "itemDescription", label: t("Item") },
+      { name: "lotNo", label: t("Lot No.") },
+      { name: "storeLocation", label: t("Location") },
+      { name: "badItemQty", label: t("Defective Qty") }
     ],
     [t],
   );
diff --git a/src/components/StockIssue/action.ts b/src/components/StockIssue/action.ts
index 8884874..7c2a0b0 100644
--- a/src/components/StockIssue/action.ts
+++ b/src/components/StockIssue/action.ts
@@ -7,21 +7,25 @@ import { cache } from "react";
 export interface StockIssueResult {
   action: any;
   id: number;
-  item_id: number;
-  item_code: string;
-  item_description: string;
-  lot_id: number;
-  lot_no: string;
-  store_location: string;
-  required_qty: number;
-  bad_item_qty: number;
-  issue_remark: string;
-  picker_name: string;
-  handle_status: string;
-  handle_date: string;
-  handled_by: number;
+  itemId: number;
+  itemCode: string;
+  itemDescription: string;
+  lotId: number;
+  lotNo: string;
+  storeLocation: string;
+  requiredQty: number;
+  badItemQty: number;
+  issueRemark: string;
+  pickerName: string;
+  handleStatus: string;
+  handleDate: string;
+  handledBy: number;
 }
 
+export const PreloadList = () => {
+  fetchList();
+};
+
 export const fetchList = cache(async () => {
   return serverFetchJson<StockIssueResult[]>(`${BASE_API_URL}/pickExecution/badItemList`, {
     next: { tags: ["Bad Item List"] },