diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx
index 864f707..4b7833f 100644
--- a/src/components/LatestTransactions/LatestTransactions.jsx
+++ b/src/components/LatestTransactions/LatestTransactions.jsx
@@ -87,9 +87,9 @@ const LatestTransactions = () => {
               </GridItem>
               <GridItem  p={4}>
                 {/* <Box> */}
-                <Text // This ensures the text is truncated with ellipsis when it overflows
+                <Text // This ensures the text is truncated with ellipsis when it overflows ss__298
                   display={"flex"}
-                  fontSize={"sm"}
+                  fontSize={{base:"xs", md:"sm" }}
                   mb={2}
                   color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                 >
@@ -123,8 +123,8 @@ const LatestTransactions = () => {
                   </Text>
                 </Text>
 
-                <HStack fontSize={"sm"} gap={4} mb={2}>
-                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                <HStack fontSize={{base:"xs", md:"sm" }} gap={{base:2,md:4}} mb={2}>
+                  <Text  color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                     Sender:
                   </Text>
 
@@ -132,12 +132,13 @@ const LatestTransactions = () => {
                   <HStack
                     color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                     textDecoration={"underline"}
-                    w={'100%'}
+                    w={'84%'}
                     justifyContent={'space-between'}
+                    fontSize={{base:"xs", md:"sm" }}
                   >
                     <Text
                       cursor={"pointer"} 
-                      maxW={{base:"70%",md:"100%"}} // Set a max-width to control when the truncation happens
+                      maxW={{base:"90%",md:"100%"}} // Set a max-width to control when the truncation happens
                       // overflow={'hidden'} // Ensure overflow is hidden
                       whiteSpace={"nowrap"} // Prevent the text from wrapping
                       textOverflow={"ellipsis"}
@@ -166,17 +167,18 @@ const LatestTransactions = () => {
 
 
                 </HStack>
-                <HStack cursor={"pointer"} fontSize={"sm"} gap={4} mb={3}>
-                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                <HStack fontSize={{base:"xs", md:"sm" }} cursor={"pointer"}  gap={{base:2,md:4}} mb={3}>
+                  <Text  color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                     Receiver:
                   </Text>
                   <HStack
                     color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                     textDecoration={"underline"}
+                    fontSize={{base:"xs", md:"sm" }}
                   >
                     <Text
                       cursor={"pointer"} 
-                      maxW={{base:"65%",md:"100%"}} // Set a max-width to control when the truncation happens
+                      maxW={{base:"55%",md:"100%"}} // Set a max-width to control when the truncation happens
                       // overflow={'hidden'} // Ensure overflow is hidden
                       whiteSpace={"nowrap"} // Prevent the text from wrapping
                       textOverflow={"ellipsis"}
@@ -217,6 +219,7 @@ const LatestTransactions = () => {
                   <Box>
                     <Text
                       mb={2}
+                      // fontSize={{base:"xs", md:"sm" }}
                       color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                     >
                       Smart contract ID :
@@ -267,8 +270,8 @@ const LatestTransactions = () => {
                     color="#7B7B7B"
                   />
 
-                  <VStack>
-                    <HStack w={"100%"} justifyContent={"flex-start"}>
+                  <VStack fontSize={{base:"xs", md:"sm" }}>
+                    <HStack  w={"100%"} justifyContent={"flex-start"}>
                       <Text
                         color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                       >
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 13bbab5..5f3dd34 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -35,7 +35,7 @@ const Home = () => {
       backgroundSize="contain"
       backgroundRepeat="no-repeat">
       <Box>
-        <VStack pt={{base:20,md:28}} mb={14}>
+        <VStack pt={{base:20,md:28}} mb={{base:8,md: 14}}>
           <Container maxW="3xl" position={"relative"}>
             <Box  w={'100%'} display={"flex"} alignItems={"center"} >
               <InputGroup
@@ -115,7 +115,7 @@ const Home = () => {
           </Container>
         </VStack>
         <AmountCard />
-        <Container maxW="6xl" p={"4rem 1rem"}>
+        <Container maxW="6xl" p={{base:"2rem 1rem",md:"4rem 1rem"}}>
           <Box
             p={5}
             rounded={10}