diff --git a/src/App.tsx b/src/App.tsx
index 6b0bad7e76c508e8eac9edf0afc79edbc6eee240..71ee0a2154b3a255b11effb9fc46c951b34d37e5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ import PickedOrderDetail from './pages/PickedOrderDetail'
 import History from './pages/History'
 import HistoryDetail from './pages/HistoryDetail'
 import Profile from './pages/Profile'
+import Home from './pages/Home'
 
 function App() {
 
@@ -22,6 +23,9 @@ function App() {
       <>
         <Navbar/>
         <Routes>
+          <Route path='' element={<Home/>}/>
+          <Route path='/' element={<Home/>}/>
+          <Route path='/Home' element={<Home/>}/>
           <Route path='/Balance' element={<Balance/>}/>
           <Route path='/AvailableOrder' element={<AvailableOrder/>}/>
           <Route path='/AvailableOrderDetail/:id' element={<AvailableOrderDetail/>}/>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index a64ba2cfb08c6c4870cbdaeda26d8d00f5cf338d..029868eaf9da23f76b0d9961763a3fd02257f4f2 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,31 +1,113 @@
-import { useNavigate } from 'react-router-dom';
-import { Box, Heading, Text, Button, useBreakpointValue } from '@chakra-ui/react';
-import Navbar from '../components/Navbar';
+import { 
+  Avatar,
+  Box,
+  Button,
+  Center,
+  Flex,
+  Heading,
+  Stack,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import { useEffect, useState } from 'react'
+import { getUserDetail } from '../utils/Profile';
+import { getUser } from '../utils/LocalStorage';
+import UserInterface from '../interfaces/UserInterface';
+import OrderInterface from '../interfaces/OrderInterface';
+import History from '../interfaces/HistoryInterface';
+import { getAvailableOrder, getOrderByCourier } from '../utils/Order';
+import { getHistory } from '../utils/History';
+
+function HomeButton(hrefLink : string, title : string) {
+  return <Button
+          as={'a'}
+          display={{ base: 'none', md: 'inline-flex' }}
+          fontSize={'sm'}
+          fontWeight={600}
+          color={'black'}
+          href={hrefLink}
+          bg={"blue.300"}
+          _hover={{
+            bg: 'pink.300',
+          }}>
+          {title}
+        </Button>;
+}
 
 export default function Home() {
-    const headingSize = useBreakpointValue({ base: 'xl', md: '2xl' });
-    const textSize = useBreakpointValue({ base: 'md', md: 'xl' });
-    const buttonSize = useBreakpointValue({ base: 'md', md: 'lg' });
-    const navigate = useNavigate();
+  const user = getUser();
+  const username = user.username;
+  const [availableCount, setAvailableCount] = useState(0);
+  const [courierCount, setCourierCount] = useState(0);
+  const [historyCount, setHistoryCount] = useState(0);
+  const [userDetail, setUserDetail] = useState<UserInterface>({username : "",
+                                                                name : "",
+                                                                email : "",
+                                                                saldo : 0});
 
-    const navigateToAvailableOrders = () => {
-        navigate('/AvailableOrder');
+  useEffect(() => {
+    if(!username) {
+      alert("Perlu log in");
+      return;
     }
+    
+    getUserDetail(username).then((user) => {
+      setUserDetail(user.data);
+
+      getAvailableOrder().then((res) => {
+        setAvailableCount(res.data.length);
+      })
+  
+      getOrderByCourier(user.data.id ? user.data.id : 0).then((res) => {
+        setCourierCount(res.data.length);
+      })
+
+      getHistory().then((res) => {
+        setHistoryCount(res.length);
+      })
+    })
+
+  }, [username]);
 
-    return (
-        <>
-            <Navbar />
-            <Box w="100%" h="100vh" px={{ base: 4, md: 0 }} display="flex" flexDirection="column" alignItems="center" justifyContent="center">
-                <Heading as="h1" size={headingSize} mb={6}>
-                    Welcome to the Courier App!
-                </Heading>
-                <Text fontSize={textSize} mb={6}>
-                    Manage your orders all in one place
-                </Text>
-                <Button colorScheme="teal" size={buttonSize} onClick={navigateToAvailableOrders} aria-label="Navigate to available orders">
-                    View available orders
-                </Button>
-            </Box>
-        </>
-    );
-}
\ No newline at end of file
+  return (
+    <Flex
+      h={'130vh'}
+      align={'center'}
+      justify={'center'}
+      bg={useColorModeValue('red.800', 'white')}>
+      <Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}
+        bg={useColorModeValue('white', 'gray.700')}
+        minW={'70vh'}
+        >
+        <Stack align={'center'}>
+          <Avatar size="xl" name="John Doe" src="https://via.placeholder.com/150" />
+          <Heading size="lg">{userDetail?.name}</Heading>
+        </Stack>
+        <Box
+          rounded={'lg'}
+          bg={useColorModeValue('white', 'gray.700')}
+          boxShadow={'lg'}
+          pl={8}
+          pr={8}
+          pt={4}
+          pb={8}
+          >
+          <Stack spacing={4}>
+            <Text fontWeight="bold">Saldo mu sekarang</Text>
+            <Text>{userDetail?.saldo}</Text>
+            {HomeButton('/Balance', "Tarik saldo")}
+            <Text fontWeight="bold">Jumlah pesanan yang tersedia</Text>
+            <Text>{availableCount}</Text>
+            {HomeButton('/AvailableOrder', "Ambil pesanan")}
+            <Text fontWeight="bold">Jumlah pesanan yang sedang kamu antar</Text>
+            <Text>{courierCount}</Text>
+            {HomeButton('/PickedOrder', "Lanjut mengantar")}
+            <Text fontWeight="bold">Pesanan yang telah kamu antar</Text>
+            <Text>{historyCount}</Text>
+            {HomeButton('/History', "Cek riwayat")}
+          </Stack>
+        </Box>
+      </Stack>
+    </Flex>
+  );
+};