diff --git a/src/api/History.ts b/src/api/History.ts
index 97a94207f34d25b4ed2e04fc16fceff818b851c0..4f203b42c8bcaab144715bbf5fd4b9d43abd465a 100644
--- a/src/api/History.ts
+++ b/src/api/History.ts
@@ -8,7 +8,7 @@ const REST_URL = "http://localhost:5000"; // TODO : using env
 export async function fetchHistory() {
     try {
         const API_URL = REST_URL + "/history";
-        let header = { headers: {"Authorization" : `Bearer ${getUser().jwt}`} };
+        const header = { headers: {"Authorization" : `Bearer ${getUser().jwt}`} };
         const response = await axios.get<HistoryInterface[]>(API_URL, header);
         return response;
     } catch(err) {
diff --git a/src/pages/AvailableOrderDetail.tsx b/src/pages/AvailableOrderDetail.tsx
index 546e393e3ff28a98b755c34956673b607eb04b29..57037c5fd4fe97feaecb66b042629b3bf659b04a 100644
--- a/src/pages/AvailableOrderDetail.tsx
+++ b/src/pages/AvailableOrderDetail.tsx
@@ -52,7 +52,7 @@ export default function AvailableOrderDetail() {
       setOrderDetails(response.data);
       console.log("detail", response.data);
     });
-  }, []);
+  }, [orderId]);
 
   return (
     <Box
diff --git a/src/pages/HistoryDetail.tsx b/src/pages/HistoryDetail.tsx
index a57925740332c91c3b0f1ea886f7c7f330327664..fba881ba7c2fb33b98e246f00ed232d8bb5e87d1 100644
--- a/src/pages/HistoryDetail.tsx
+++ b/src/pages/HistoryDetail.tsx
@@ -38,7 +38,7 @@ export default function HistoryDetail() {
       setHistoryDetails(response);
       console.log("detail", response);
     });
-  }, []);
+  }, [historyId]);
 
   return (
     <Box
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 029868eaf9da23f76b0d9961763a3fd02257f4f2..5eff79bc4d6fd907c3680e3e7d2ab3e5fe3588b5 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -2,7 +2,6 @@ import {
   Avatar,
   Box,
   Button,
-  Center,
   Flex,
   Heading,
   Stack,
@@ -13,8 +12,6 @@ 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';
 
@@ -110,4 +107,4 @@ export default function Home() {
       </Stack>
     </Flex>
   );
-};
+}
diff --git a/src/pages/PickedOrder.tsx b/src/pages/PickedOrder.tsx
index 60d1a2d6c57a46792cd65c68278a4f685aa6efe3..73241f5da73154f1f744476f33e3cadadfb9f10a 100644
--- a/src/pages/PickedOrder.tsx
+++ b/src/pages/PickedOrder.tsx
@@ -25,7 +25,7 @@ export default function PickedOrder() {
         });
       }
     );
-  }, []);
+  }, [user]);
 
   return (
     <Box
diff --git a/src/pages/PickedOrderDetail.tsx b/src/pages/PickedOrderDetail.tsx
index ca6132cbb009d7cd34997c547f9d0cd08550e9a1..41dccea655c72c89f9ce051a7ca98d3b6ee9ea1a 100644
--- a/src/pages/PickedOrderDetail.tsx
+++ b/src/pages/PickedOrderDetail.tsx
@@ -80,7 +80,7 @@ export default function PickedOrderDetail() {
       console.log("detail", response.data);
     });
 
-  }, []);
+  }, [orderId]);
   
   return (
     <Box
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index c8d3a560c46aaf2c21fab60e1ba7a9aecea04fb5..a1217c096a243f351e68c90079bbfb5c727ffcb9 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -76,68 +76,7 @@ export default function Profile() {
           {/* TODO : fetch real photo image */}
           <Avatar size="xl" name="John Doe" src="https://via.placeholder.com/150" />
           <Heading size="lg">{userDetail?.name}</Heading>
-          {isEditing ?
-          // TODO : edit photo logic
-          <Button
-            bg={'blue.400'}
-            color={'white'}
-            _hover={{
-              bg: 'blue.500',
-            }}
-            >
-            Edit photo
-          </Button> 
-          : 
-          <></>}
         </Stack>
-        {isEditing ? 
-        <Box
-          rounded={'lg'}
-          bg={useColorModeValue('white', 'gray.700')}
-          boxShadow={'lg'}
-          pl={8}
-          pr={8}
-          pt={4}
-          pb={8}
-          >
-          <form onSubmit={handleSubmit}>
-            <Stack spacing={4}>
-              <Center><Heading>Profile</Heading></Center>
-              <Text fontWeight="bold">Username</Text>
-              <Text>{userDetail?.username}</Text>
-              <FormControl id="email" isRequired isInvalid={!emailValid} onBlur={revalidateEmail}>
-                <FormLabel fontWeight="bold">Email address</FormLabel>
-                <Input name="email" type="email" 
-                  value={userDetail.email} 
-                  onChange={handleChange}
-                  borderColor={"black"}
-                  />
-                <FormErrorMessage>Email address has already been used</FormErrorMessage>
-              </FormControl>
-              <FormControl id="name" isRequired>
-                <FormLabel fontWeight="bold">Name</FormLabel>
-                <Input name="name" type="text" 
-                  value={userDetail.name} 
-                  onChange={handleChange}
-                  borderColor={"black"}
-                  />
-              </FormControl>
-              <Text fontWeight="bold">Saldo</Text>
-              <Text>{userDetail?.saldo}</Text>
-              <Button
-              bg={'blue.400'}
-              color={'white'}
-              _hover={{
-                bg: 'blue.500',
-              }}
-              type={"submit"}
-              >
-                Save profile
-              </Button>
-            </Stack>
-          </form>
-        </Box>
-        :
         <Box
           rounded={'lg'}
           bg={useColorModeValue('white', 'gray.700')}
@@ -147,6 +86,44 @@ export default function Profile() {
           pt={4}
           pb={8}
           >
+          {isEditing ? 
+            <form onSubmit={handleSubmit}>
+              <Stack spacing={4}>
+                <Center><Heading>Profile</Heading></Center>
+                <Text fontWeight="bold">Username</Text>
+                <Text>{userDetail?.username}</Text>
+                <FormControl id="email" isRequired isInvalid={!emailValid} onBlur={revalidateEmail}>
+                  <FormLabel fontWeight="bold">Email address</FormLabel>
+                  <Input name="email" type="email" 
+                    value={userDetail.email} 
+                    onChange={handleChange}
+                    borderColor={"black"}
+                    />
+                  <FormErrorMessage>Email address has already been used</FormErrorMessage>
+                </FormControl>
+                <FormControl id="name" isRequired>
+                  <FormLabel fontWeight="bold">Name</FormLabel>
+                  <Input name="name" type="text" 
+                    value={userDetail.name} 
+                    onChange={handleChange}
+                    borderColor={"black"}
+                    />
+                </FormControl>
+                <Text fontWeight="bold">Saldo</Text>
+                <Text>{userDetail?.saldo}</Text>
+                <Button
+                bg={'blue.400'}
+                color={'white'}
+                _hover={{
+                  bg: 'blue.500',
+                }}
+                type={"submit"}
+                >
+                  Save profile
+                </Button>
+              </Stack>
+            </form>
+          :
             <Stack spacing={4}>
                 <Center><Heading>Profile</Heading></Center>
                 <Text fontWeight="bold">Username</Text>
@@ -167,8 +144,8 @@ export default function Profile() {
                 Edit profile
                 </Button>
             </Stack>
+          }
         </Box>
-        }
       </Stack>
     </Flex>
   );