diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 6e698ac8b1616b10c514b1d07970be216f3702ea..1c154e0fa00fee4c73643df8a6dbfa5a4802b11f 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1 +1,25 @@
-// TODO : 
+import { Box, Heading, Text, Button, useBreakpointValue } from '@chakra-ui/react';
+import Navbar from '../components/Navbar';
+
+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' });
+
+    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={() => { window.location.href = '/AvailableOrder' }}>
+                    View available orders
+                </Button>
+            </Box>
+        </>
+    );
+}
\ No newline at end of file