diff --git a/src/App.tsx b/src/App.tsx
index f784d871f37721ec4426066c7b4844f4ca6578d2..2149260ace8787ed3ea675e0ce69df4565239d03 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,6 +10,7 @@ import AvailableOrder from './pages/AvailableOrder'
 import AvailableOrderDetail from './pages/AvailableOrderDetail'
 import PickedOrder from './pages/PickedOrder'
 import PickedOrderDetail from './pages/PickedOrderDetail'
+import History from './pages/History'
 
 function App() {
 
@@ -24,6 +25,7 @@ function App() {
           <Route path='/AvailableOrderDetail' element={<AvailableOrderDetail/>}/>
           <Route path='/PickedOrder' element={<PickedOrder/>}/>
           <Route path='/PickedOrderDetail' element={<PickedOrderDetail/>}/>
+          <Route path='/History' element={<History/>}/>
           <Route path='/Logout' element={<Logout/>}/>
           <Route path='*' element={<NotFound/>}/>
         </Routes>
diff --git a/src/components/HistoryCard.tsx b/src/components/HistoryCard.tsx
index 6e698ac8b1616b10c514b1d07970be216f3702ea..36bc4b00350e88ca57d817346c973c9759496f5e 100644
--- a/src/components/HistoryCard.tsx
+++ b/src/components/HistoryCard.tsx
@@ -1 +1,67 @@
-// TODO : 
+import { 
+  Box, 
+  Card, 
+  CardBody, 
+  CardHeader, 
+  Heading,
+  LinkBox,
+  LinkOverlay,
+  Stack,
+  StackDivider,
+  Text
+} from '@chakra-ui/react'
+import HistoryInterface from '../interfaces/HistoryInterface';
+
+type paramInterface = {history : HistoryInterface};
+
+export default function HistoryCard({history} : paramInterface) {
+  return (
+  <Card
+    width={"80%"}
+    marginY={3}
+    marginX={10}
+    borderColor={"black"}
+    borderRadius={20}
+    >
+    <LinkBox>
+      <CardHeader>
+        <Heading>
+          <LinkOverlay href="/HistoryDetail">
+            {history.address}
+          </LinkOverlay>
+        </Heading>
+      </CardHeader>
+      <CardBody>
+        <Stack divider={<StackDivider/>} spacing={1}>
+          <Box>
+            <Text fontSize={"lg"} fontWeight={"bold"}>
+              Nama Pemesan
+            </Text>
+            <Text>
+              {history.customerName}
+            </Text>
+          </Box>
+          <Box>
+            <Text fontSize={"lg"} fontWeight={"bold"}>
+              Ongkos Kirim
+            </Text>
+            <Text>
+              {history.salary}
+            </Text>
+          </Box>
+          <Box>
+            <Text fontSize={"lg"} fontWeight={"bold"}>
+              Rating
+            </Text>
+            <Text>
+              {/* TODO : icon bintang */}
+              {history.rating === 0 ? "Belum di rating" : history.rating}
+            </Text>
+          </Box>
+        </Stack>
+      </CardBody>
+    </LinkBox>
+  </Card>
+  );
+}
+  
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 1b3c40bb277fb7c036ec1008b33a84ec20a66f50..d69a32325e02c6be2773180ebda8bbfa5a145c82 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -37,6 +37,10 @@ const NAV_ITEMS: Array<NavItem> = [
     label: 'Picked Order',
     href: 'PickedOrder',
   },
+  {
+    label: 'History',
+    href: 'History',
+  },
 ]
 
 export default function Navbar() {
diff --git a/src/interfaces/HistoryInterface.ts b/src/interfaces/HistoryInterface.ts
new file mode 100644
index 0000000000000000000000000000000000000000..542827c35d142dbb6048f98245d25b2d9dcadeba
--- /dev/null
+++ b/src/interfaces/HistoryInterface.ts
@@ -0,0 +1,7 @@
+
+export default interface HistoryInterface {
+    address : string
+    customerName : string
+    salary : number
+    rating : number
+}
diff --git a/src/pages/History.tsx b/src/pages/History.tsx
index 6e698ac8b1616b10c514b1d07970be216f3702ea..f37e876d14ac5447ab700c9b1b82f5a4ddfe4a6a 100644
--- a/src/pages/History.tsx
+++ b/src/pages/History.tsx
@@ -1 +1,72 @@
-// TODO : 
+import { 
+  Box, 
+  Heading,
+  Stack,
+} from '@chakra-ui/react'
+import HistoryInterface from '../interfaces/HistoryInterface';
+import { useState } from 'react'
+import HistoryCard from '../components/HistoryCard';
+
+// TODO : fetch data from SOAP
+const dummyData : HistoryInterface[] = [
+  {
+    address : "jl. imam bonjol no.69",
+    customerName : "ukin",
+    salary : 100,
+    rating : 0
+  },
+  {
+    address : "bullet",
+    customerName : "ishraul",
+    salary : 1111,
+    rating : 2
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69,
+    rating : 3
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69,
+    rating : 5
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69,
+    rating : 5
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69,
+    rating : 5
+  }
+];
+
+export default function History() {
+  const [histories, setHistories] = useState<HistoryInterface[]>(dummyData);
+
+  return (
+    <Box
+      bg={"red.800"}>
+      <Stack
+        minH={'90vh'}
+        py={{ base: 2 }}
+        px={{ base: 4 }}
+        align={'center'}
+        >
+        <Heading>
+          Pesanan yang tersedia
+        </Heading>
+        {histories.map(history => (
+          <HistoryCard history={history}/>
+        ))}
+      </Stack>
+    </Box>
+  );
+}
+  
\ No newline at end of file