diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx
index 32d60f0..e06db9f 100644
--- a/src/components/LatestTransactions/LatestTransactions.jsx
+++ b/src/components/LatestTransactions/LatestTransactions.jsx
@@ -1,4 +1,15 @@
-import { Box, Container, Grid, GridItem, HStack, Text, VStack, useColorMode, useToast } from "@chakra-ui/react";
+import {
+  Box,
+  Container,
+  Grid,
+  GridItem,
+  HStack,
+  Icon,
+  Text,
+  VStack,
+  useColorMode,
+  useToast,
+} from "@chakra-ui/react";
 import React, { useContext } from "react";
 import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
 import Pagination from "../Pagination";
@@ -6,15 +17,13 @@ import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import { Link, useNavigate } from "react-router-dom";
 import ToastBox from "../ToastBox";
 
-
-
 const LatestTransactions = () => {
-  const toast = useToast()
-  const navigate = useNavigate()
+  const toast = useToast();
+  const navigate = useNavigate();
+
+  const { colorMode } = useColorMode();
+  const { transactions } = useContext(GlobalStateContext);
 
-  const { colorMode} = useColorMode();
-   const { transactions } = useContext(GlobalStateContext);
-   
   function copyToClipboard(text) {
     navigator.clipboard
       .writeText(text)
@@ -31,111 +40,260 @@ const LatestTransactions = () => {
         console.error("Failed to copy text: ", err);
       });
   }
-  
 
   return (
     <Box>
       <Container maxW="6xl">
         <Grid
-          templateColumns="10% 90%"
+          templateColumns={{ basee: "10% 90%", md: "100% 0%" }}
           gap={0}
           bg={colorMode === "light" ? "#230A79" : "#232127"}
           // bg={"#232127"}
-          roundedTop={'lg'}
+          roundedTop={"lg"}
         >
-          <GridItem p={2}>
+          <GridItem display={{ base: "none", md: "grid" }} p={2}>
             <Text color={"#fff"}>Sr. no</Text>
           </GridItem>
           <GridItem p={2}>
             <Text color={"#fff"}>Transactions</Text>
           </GridItem>
         </Grid>
-        <Box  roundedBottom={'lg'} overflow={'hidden'} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
+        <Box
+          roundedBottom={"lg"}
+          overflow={"hidden"}
+          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}
+        >
           {transactions.map((transaction, index) => (
             <Grid
-              bg={index % 2 === 0 ? (colorMode === "light" ? "#F2EFFF" : "#312F35") : (colorMode === "light" ? "#fff" : "#232127")}
+              bg={
+                index % 2 === 0
+                  ? colorMode === "light"
+                    ? "#F2EFFF"
+                    : "#312F35"
+                  : colorMode === "light"
+                  ? "#fff"
+                  : "#232127"
+              }
               key={transaction.id}
-              templateColumns="10% 90%"
+              templateColumns={{ basee: "10% 90%", md: "100% 0%" }}
               gap={0}
             >
-              <GridItem p={4} color={colorMode === "light" ? "#000" : "#fff"}>{index + 1}.</GridItem>
-              <GridItem p={4}>
-                <Box>
-                  <Text display={'flex'} fontSize={"sm"} mb={2} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                    <Link to={`/transaction/${transaction?.description}`}> {transaction.description}</Link>
-                    
-                  <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
-                          <MdContentCopy onClick={() => copyToClipboard(transaction.description)}/>
-                      </Text>
+              <GridItem
+                display={{ base: "none", md: "grid" }}
+                p={4}
+                color={colorMode === "light" ? "#000" : "#fff"}
+              >
+                {index + 1}.
+              </GridItem>
+              <GridItem overflow={"hidden"} p={4}>
+                {/* <Box> */}
+                <Text // This ensures the text is truncated with ellipsis when it overflows
+                  display={"flex"}
+                  fontSize={"sm"}
+                  mb={2}
+                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                >
+                  <Text
+                    maxW={{base:"100%",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"}
+                    isTruncated
+                    cursor={"pointer"}
+                    onClick={() =>
+                      navigate(`/transaction/${transaction?.description}`)
+                    }
+                  >
+                    {" "}
+                    {transaction.description}
                   </Text>
 
-                  <HStack fontSize={"sm"} gap={4} mb={2}>
-                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Sender :</Text>
-                    <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
-                      <Text cursor={"pointer"} onClick={()=> navigate(`/did-info/${transaction.sender}`)}  >{transaction.sender}</Text>
-                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
-                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
-                      </Text>
-                    </HStack>
-                  </HStack>
-                  <HStack cursor={'pointer'} fontSize={"sm"} gap={4} mb={3}>
-                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Receiver :</Text>
-                    <HStack  color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
-                      <Text onClick={()=> navigate(`/did-info/${transaction.receiver}`)} >{transaction.receiver}</Text>
-                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.receiver)} /></Text>
-                    </HStack>
-                  </HStack>
-                  <HStack
-                    display={"flex"}
-                    justifyContent={"space-between"}
-                    w={"80%"}
-                    fontSize={"sm"}
-                    mb={3}
+                  <Text
+                    _hover={{ bg: "gray.50" }}
+                    transition={"0.5s"}
+                    rounded={"sm"}
+                    p={1}
+                    as={"span"}
+                    ml={1}
+                    cursor={"pointer"}
                   >
-                    <Box>
-                      <Text mb={2}  color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
-                        Smart contract ID :
-                      </Text>
-                      <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}><Link to="/smart-contract">{transaction.contract}</Link></Text>
-                    </Box>
-                    <Box>
-                      <Text mb={2} color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
-                        Date and Time Stamp :
-                      </Text>
-                      <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>{transaction.date}</Text>
-                    </Box>
-                    <Box>
-                      <Text mb={2} color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
-                        Amount:
-                      </Text>
-                      <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>{transaction.amount}</Text>
-                    </Box>
-                  </HStack>
-                  <HStack fontSize={"sm"} alignItems={"flex-start"} position={"relative"}>
-                    <MdOutlineErrorOutline
-                      fontSize={"18px"}
-                      style={{ marginTop: "1px",position:"absolute",top:"2px",left:"-24px" }}
-                      color="#7B7B7B"
+                    <MdContentCopy
+                      onClick={() => copyToClipboard(transaction.description)}
                     />
+                  </Text>
+                </Text>
 
-                    <VStack>
-                      <HStack w={'100%'} justifyContent={'flex-start'}>
-                        <Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Transaction type :</Text>
-                        <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                        <Text>{transaction.transactionType}</Text>
-                        </Text>
-                      </HStack>
-
-                      <HStack>
-                        <Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Subnet ID/Main net :</Text>
-                        <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                         <Link to={`/subnet-id-overview/${transaction.subnetID}`} style={{fontWeight:"inherit"}}>{transaction.subnetID}</Link>
-                        </Text>
-                      </HStack>
-                      
-                    </VStack>
+                <HStack fontSize={"sm"} gap={4} mb={2}>
+                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                    Sender:
+                  </Text>
+                  <HStack
+                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                    textDecoration={"underline"}
+                  >
+                    <Text
+                      cursor={"pointer"} 
+                      maxW={{base:"70%",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"}
+                      isTruncated
+                      onClick={() =>
+                        navigate(`/did-info/${transaction.sender}`)
+                      }
+                    >
+                      {transaction.sender}
+                    </Text>
+                    <Text
+                      _hover={{ bg: "gray.50" }}
+                      transition={"0.5s"}
+                      rounded={"sm"}
+                      p={1}
+                      as={"span"}
+                      ml={1}
+                      cursor={"pointer"}
+                    >
+                      <MdContentCopy
+                        onClick={() => copyToClipboard(transaction.sender)}
+                      />
+                    </Text>
                   </HStack>
-                </Box>
+                </HStack>
+                <HStack cursor={"pointer"} fontSize={"sm"} gap={4} mb={3}>
+                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                    Receiver:
+                  </Text>
+                  <HStack
+                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                    textDecoration={"underline"}
+                  >
+                    <Text
+                      cursor={"pointer"} 
+                      maxW={{base:"65%",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"}
+                      isTruncated
+                      
+                      onClick={() =>
+                        navigate(`/did-info/${transaction.receiver}`)
+                      }
+                    >
+                      {transaction.receiver}
+                    </Text>
+                    <Text
+                      _hover={{ bg: "gray.50" }}
+                      transition={"0.5s"}
+                      rounded={"sm"}
+                      p={1}
+                      as={"span"}
+                      ml={1}
+                      cursor={"pointer"}
+                    >
+                      <MdContentCopy
+                        onClick={() => copyToClipboard(transaction.receiver)}
+                      />
+                    </Text>
+                  </HStack>
+                </HStack>
+                <HStack
+                  flexDirection={{ base: "column", md: "row" }}
+                  justifyContent={{ base: "", md: "space-between" }}
+                  alignItems={{ base: "flex-start", md: "" }}
+                  // flexWrap={'wrap'}
+
+                  // w={"80%"}
+                  w={{ base: "100%", md: "80%" }}
+                  fontSize={{ base: "xs", md: "sm" }}
+                  mb={3}
+                >
+                  <Box>
+                    <Text
+                      mb={2}
+                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                    >
+                      Smart contract ID :
+                    </Text>
+                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      <Link to="/smart-contract">{transaction.contract}</Link>
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text
+                      mb={2}
+                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                    >
+                      Date and Time Stamp :
+                    </Text>
+                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      {transaction.date}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text
+                      mb={2}
+                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                    >
+                      Amount:
+                    </Text>
+                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      {transaction.amount}
+                    </Text>
+                  </Box>
+                </HStack>
+
+                <HStack
+                  fontSize={"sm"}
+                  alignItems={"flex-start"}
+                  position={"relative"}
+                >
+                  <Icon
+                    as={MdOutlineErrorOutline}
+                    fontSize={"18px"}
+                    display={{ base: "none", md: "block" }}
+                    style={{
+                      marginTop: "1px",
+                      position: "absolute",
+                      top: "2px",
+                      left: "-24px",
+                    }}
+                    color="#7B7B7B"
+                  />
+
+                  <VStack>
+                    <HStack w={"100%"} justifyContent={"flex-start"}>
+                      <Text
+                        color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                      >
+                        Transaction type :
+                      </Text>
+                      <Text
+                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                      >
+                        <Text>{transaction.transactionType}</Text>
+                      </Text>
+                    </HStack>
+
+                    <HStack>
+                      <Text
+                        color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                      >
+                        Subnet ID/Main net :
+                      </Text>
+                      <Text
+                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                      >
+                        <Link
+                          to={`/subnet-id-overview/${transaction.subnetID}`}
+                          style={{ fontWeight: "inherit" }}
+                        >
+                          {transaction.subnetID}
+                        </Link>
+                      </Text>
+                    </HStack>
+                  </VStack>
+                </HStack>
+                {/* </Box> */}
               </GridItem>
             </Grid>
           ))}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 843612e..13bbab5 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={28} mb={14}>
+        <VStack pt={{base:20,md:28}} mb={14}>
           <Container maxW="3xl" position={"relative"}>
             <Box  w={'100%'} display={"flex"} alignItems={"center"} >
               <InputGroup