diff --git a/src/app/(main)/stockOutIssueRecord/detail/page.tsx b/src/app/(main)/stockOutIssueRecord/detail/page.tsx
new file mode 100644
index 0000000..d40809a
--- /dev/null
+++ b/src/app/(main)/stockOutIssueRecord/detail/page.tsx
@@ -0,0 +1,30 @@
+import { PreloadPickOrder } from "@/app/api/pickOrder";
+import { SearchParams } from "@/app/utils/fetchUtil";
+import PickOrderDetail from "@/components/PickOrderDetail";
+import { getServerI18n, I18nProvider } from "@/i18n";
+import { Stack, Typography } from "@mui/material";
+import { Metadata } from "next";
+import { Suspense } from "react";
+
+export const metadata: Metadata = {
+  title: "Consolidated Pick Order Flow",
+};
+type Props = {} & SearchParams;
+
+const PickOrder: React.FC<Props> = async ({ searchParams }) => {
+  const { t } = await getServerI18n("pickOrder");
+
+  PreloadPickOrder();
+
+  return (
+    <>
+      <I18nProvider namespaces={["pickOrder"]}>
+        <Suspense fallback={<PickOrderDetail.Loading />}>
+          <PickOrderDetail consoCode={`${searchParams["consoCode"]}`} />
+        </Suspense>
+      </I18nProvider>
+    </>
+  );
+};
+
+export default PickOrder;
diff --git a/src/app/(main)/stockOutIssueRecord/page.tsx b/src/app/(main)/stockOutIssueRecord/page.tsx
new file mode 100644
index 0000000..88f6790
--- /dev/null
+++ b/src/app/(main)/stockOutIssueRecord/page.tsx
@@ -0,0 +1,29 @@
+import { PreloadPickOrder } from "@/app/api/pickOrder";
+import PickOrderSearch from "@/components/PickOrderSearch";
+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 PickOrder: React.FC = async () => {
+  const { t } = await getServerI18n("pickOrder");
+
+  PreloadPickOrder();
+
+  return (
+    <>
+      <I18nProvider namespaces={["pickOrder", "common"]}>
+        <Suspense fallback={<PickOrderSearch.Loading />}>
+          <PickOrderSearch />
+        </Suspense>
+      </I18nProvider>
+    </>
+  );
+};
+
+export default PickOrder;
diff --git a/src/components/StockIssue/SearchPage.tsx b/src/components/StockIssue/SearchPage.tsx
new file mode 100644
index 0000000..dd6d0a5
--- /dev/null
+++ b/src/components/StockIssue/SearchPage.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import SearchBox, { Criterion } from "../SearchBox";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import SearchResults, { Column } from "../SearchResults/index";
+import { StockIssueResult } from "./action";
+
+interface Props {
+  dataList: StockIssueResult[];
+};
+type SearchQuery = Partial<Omit<StockIssueResult, "id">>;
+type SearchParamNames = keyof SearchQuery;
+
+const SearchPage: React.FC<Props> = ({dataList}) => {
+    const { t } = useTranslation("user");
+    const [filteredList, setFilteredList] = useState(dataList);
+
+    const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
+        () => [
+          {
+            label: t("Lot No."),
+            paramName: "lot_no",
+            type: "text",
+          },
+        ],
+        [t],
+      );
+
+    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") }
+    ],
+    [t],
+  );
+
+  return (
+    <>
+      <SearchBox
+        criteria={searchCriteria}
+        onSearch={(query) => {
+        }}
+      />
+      <SearchResults<StockIssueResult>
+        items={filteredList}
+        columns={columns}
+        pagingController={{ pageNum: 1, pageSize: 10 }}
+      />
+    </>
+  );
+};
+
+export default SearchPage;
\ No newline at end of file
diff --git a/src/components/StockIssue/action.ts b/src/components/StockIssue/action.ts
new file mode 100644
index 0000000..8b20aff
--- /dev/null
+++ b/src/components/StockIssue/action.ts
@@ -0,0 +1,29 @@
+import "server-only";
+
+import { BASE_API_URL } from "@/config/api";
+import { serverFetchJson } from "@/app/utils/fetchUtil";
+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;
+}
+
+export const fetchList = cache(async () => {
+  return serverFetchJson<StockIssueResult[]>(`${BASE_API_URL}/stock-issue-list`, {
+    next: { tags: ["stock issue"] },
+  });
+});
diff --git a/src/components/StockIssue/index.tsx b/src/components/StockIssue/index.tsx
new file mode 100644
index 0000000..7dc47a9
--- /dev/null
+++ b/src/components/StockIssue/index.tsx
@@ -0,0 +1,19 @@
+import GeneralLoading from "../General/GeneralLoading";
+import SearchPage from "./SearchPage";
+import { fetchList } from "./action";
+
+
+interface SubComponents {
+  Loading: typeof GeneralLoading;
+}
+
+const Wrapper: React.FC & SubComponents = async () => {
+  const dataList = await fetchList();
+  console.log(dataList);
+
+  return <SearchPage dataList={dataList} />;
+};
+
+Wrapper.Loading = GeneralLoading;
+
+export default Wrapper;