diff --git a/package-lock.json b/package-lock.json
index 326e4f8..d506ffa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2831,14 +2831,14 @@
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.8",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.8.tgz",
       "integrity": "sha512-syBUrW3/XpnW4WJ41Pft+I+aPoDVbrBVQGEnbD7NijDGlVC+8gV/XKRY+7vMDlfPpbwYt0l1vd/Sj8bJGMbs9Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
diff --git a/src/components/AmountCard/AmountCard.jsx b/src/components/AmountCard/AmountCard.jsx
index 11230db..1c62bd5 100644
--- a/src/components/AmountCard/AmountCard.jsx
+++ b/src/components/AmountCard/AmountCard.jsx
@@ -63,8 +63,9 @@ const AmountCard = () => {
       <Container maxW="4xl">
         <Grid
         
-          mb={8}
-          templateColumns="repeat(3, 2fr)"
+          mb={{base:"16px",md:"16px" }}
+          // templateColumns="repeat(3, 2fr)"
+          templateColumns={{base :"repeat(1, 1fr)",md : "repeat(3, 2fr)" }}
           gap={6}
           bg={colorMode === "light" ? "light.100" : "black.900"}
           justifyContent="center"
@@ -118,7 +119,8 @@ const AmountCard = () => {
       </Container>
       <Container maxW="6xl">
         <Grid
-          templateColumns="repeat(4, 2fr)"
+          // templateColumns="repeat(4, 2fr)"
+          templateColumns={{base:"repeat(1, 2fr)",md :"repeat(4, 2fr)"}}
           gap={6}
           bg={colorMode === "light" ? "light.100" : "black.900"}
           justifyContent="center"
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 51d36f3..843612e 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -30,10 +30,10 @@ const Home = () => {
 
   return (
     <Box 
-    bg={colorMode === "light" ? "#fff" : "none"}
-    backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
-    backgroundSize="contain"
-    backgroundRepeat="no-repeat">
+      bg={colorMode === "light" ? "#fff" : "none"}
+      backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
+      backgroundSize="contain"
+      backgroundRepeat="no-repeat">
       <Box>
         <VStack pt={28} mb={14}>
           <Container maxW="3xl" position={"relative"}>
@@ -45,7 +45,6 @@ const Home = () => {
                 bg={colorMode === "light" ? "light.100" : "#393939"}
                 // border={"none"}
                 rounded={'lg'}
-
               >
                 <Input
                   roundedLeft={8}
@@ -67,50 +66,16 @@ const Home = () => {
                       colorMode === "light" ? "#230A79" : "#7f8c8d",
                   }}
                 />
-                {/* <Button
-                  zIndex={99}
-                  h={"42px"}
-                  position={"absolute"}
-                  fontWeight={400}
-                  right={"0"}
-                  top={"0"}
-                  fontSize={"sm"}
-                  rounded={0}
-                  border={`1px solid ${
-                    colorMode === "light" ? "#230A79" : "#393939"
-                  }`}
-                  borderLeft={0}
-                  borderRight={0}
-                  bg={colorMode === "light" ? "transparent" : "#565252"}
-                  _hover={{
-                    border: `1px solid ${
-                      colorMode === "light" ? "#230A79" : "#393939"
-                    }`,
-                    borderLeft:"0px",
-                    borderRight:"0px",
-                    outline: "0px",
-                  }}
-                  _focus={{ outline: "none" }}
-                >
-                  Generate short url
-                </Button> */}
-
-
                 <Button
                   zIndex={99}
                   h={"42px"}
-                  w={'24%'}
-                  // position={"absolute"}
+                  w={{base :'205px',md :'24%'}}
                   fontWeight={400}
                   right={"0"}
                   top={"0"}
                   fontSize={"sm"}
                   rounded={0}
                   border="none"
-                  
-                  // borderLeft={0}
-                  // borderRight={0}
-                  
                   bg={colorMode === "light" ? "#4023A6" : "#565252"}
                   _hover={{
                     opacity:0.9,
@@ -125,47 +90,27 @@ const Home = () => {
                 </Button>
 
                 <Box
-                // pointerEvents="none"
-                position={"inherit"}
-                right={"0"}
-                h={"42px"}
-                w={"6%"}
-                roundedRight={7}
-                display={"flex"}
-                justifyContent={"center"}
-                alignItems={"center"}
-                bg={colorMode === "light" ? "#DEDBEB" : "#393939"}
-                color={colorMode === "light" ? "#230A79" : "#fff"}
-                cursor={'pointer'}
-                onClick={()=>navigate(`/transaction/${searchTerm}`)}
-                border={`1px solid ${
-                  colorMode === "light" ? "#230A79" : "#565252"
-                }`}
-              >
+                  position={"inherit"}
+                  right={"0"}
+                  h={"42px"}
+                  w={{base :'64px',md :'6%'}}
+                  roundedRight={7}
+                  display={"flex"}
+                  justifyContent={"center"}
+                  alignItems={"center"}
+                  bg={colorMode === "light" ? "#DEDBEB" : "#393939"}
+                  color={colorMode === "light" ? "#230A79" : "#fff"}
+                  cursor={'pointer'}
+                  onClick={()=>navigate(`/transaction/${searchTerm}`)}
+                  border={`1px solid ${
+                    colorMode === "light" ? "#230A79" : "#565252"
+                  }`}
+                >
                 {/* <IoSearch fontSize={"20px"} /> */}
                 <BiSearchAlt fontSize={"20px"} />
-
                 </Box>
                 
               </InputGroup>
-              {/* <Box
-                pointerEvents="none"
-                position={"inherit"}
-                right={"0"}
-                h={"42px"}
-                roundedRight={7}
-                w={"42px"}
-                display={"flex"}
-                justifyContent={"center"}
-                alignItems={"center"}
-                bg={colorMode === "light" ? "light.100" : "#393939"}
-                color={colorMode === "light" ? "#230A79" : "#fff"}
-                border={`1px solid ${
-                  colorMode === "light" ? "#230A79" : "#393939"
-                }`}
-              >
-                <IoSearch fontSize={"20px"} />
-              </Box> */}
             </Box>
           </Container>
         </VStack>