diff --git a/README.md b/README.md
index b12f3e3..e69de29 100644
--- a/README.md
+++ b/README.md
@@ -1,34 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/components/Converter.js b/components/Converter.js
index 9525a0b..dbb32ce 100644
--- a/components/Converter.js
+++ b/components/Converter.js
@@ -1,12 +1,14 @@
 import { useState,useCallback } from "react"
 import Currency from "./Currency"
-import Modal from './Modal';
+import WalletModal from './WalletModal';
+import { VStack,Heading ,useDisclosure} from "@chakra-ui/react";
 export default function Converter(){
     const exchangeRate=3;
     const [data,setData]=useState()
     const [isValueFromBase,setIsValueFromBase]=useState('true');
     const [errors,setErrors]=useState([]);
     const [showModal,setShowModal]=useState(false);
+      const { isOpen, onOpen, onClose } = useDisclosure()
     function busdOnChange(event){
         setIsValueFromBase(false);
         setData(event.target.value);
@@ -16,19 +18,18 @@ export default function Converter(){
         setData(event.target.value);
     }
 
-    function handleOnClick(event){
-        setShowModal(prev=>!prev);
-    }
+
     
     return (
-        <>
+        <VStack>
+              <Heading as='h3' size={3*1}>Converter</Heading>
         <form>
             <Currency handleOnChange={nepOnChange} setErrors={setErrors} data={isValueFromBase?data:data&&Math.round((data/3)*100)/100} label="NEP"/>
             <Currency handleOnChange={busdOnChange} setErrors={setErrors} data={!isValueFromBase?data:data&&Math.round(data*3*100)/100} label="BUSD"/>
         </form>
 
-        <button onClick={handleOnClick}>Connect</button>
-        {showModal&&<Modal setShowModal={setShowModal}/>}
-        </>
+        <button onClick={onOpen}>Show Wallet Details</button>
+        <WalletModal onClose={onClose} isOpen={isOpen}/>
+        </VStack>
     )
 }
\ No newline at end of file
diff --git a/components/Currency.js b/components/Currency.js
index 4693bc2..46ceb5e 100644
--- a/components/Currency.js
+++ b/components/Currency.js
@@ -1,4 +1,5 @@
 import styles from "../styles/Currency.module.css";
+import {Box, Input, VStack,FormControl,FormLabel} from "@chakra-ui/react"
 export default function Currency({handleOnChange,data,label,setErrors}){
 
     // function handleInputChange(event){
@@ -18,9 +19,16 @@ export default function Currency({handleOnChange,data,label,setErrors}){
 
     return (
         
-        <div className={styles.group}>
-            <label htmlFor="nep">{label} : </label>
-            <input className={styles.input} id='nep' onChange={handleOnChange} step={.01} type='number' value={data}></input>
-        </div>
+        // <div className={styles.group}>
+        //     <label htmlFor="nep">{label} : </label>
+        //     <input className={styles.input} id='nep' onChange={handleOnChange} step={.01} type='number' value={data}></input>
+        // </div>
+
+        <VStack>
+            <FormControl>
+                <FormLabel htmlFor={label.toLowerCase()}>{label+" : "}</FormLabel>
+                <Input id={label.toLowerCase()} type='number' onChange={handleOnChange} value={data}/>
+                </FormControl>
+        </VStack>
     )
 }
\ No newline at end of file
diff --git a/components/ErrorModal.js b/components/ErrorModal.js
deleted file mode 100644
index fdc6be0..0000000
--- a/components/ErrorModal.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import styles from "../styles/Home.module.css";
-export default function ErrorModal({errors}){
-
-    return (
-        <div id='error'>
-            {errors.map(item=><span className={styles.err} >{item}</span>)}
-        </div>
-
-    )
-}
\ No newline at end of file
diff --git a/components/Modal.js b/components/Modal.js
deleted file mode 100644
index ce51a0c..0000000
--- a/components/Modal.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import styles from "../styles/Modal.module.css";
-import { useEffect, useState } from "react";
-import Web3 from "web3"
-export default function Modal({setShowModal}){
-    const [balance,setBalance]=useState();
-    const [chainId,setChainId]=useState();
-    
-   async function handleOnClick(){
-       if(window.ethereum){
-           await window.ethereum.send('eth_requestAccounts');
-            const web3=new Web3(window.ethereum);
-            const accounts=await web3.eth.getAccounts();
-            const balance=await web3.eth.getBalance(accounts[0]);
-            setBalance(balance);
-            setChainId(accounts[0]);
-       }
-   }
-
-    return <div className={styles.modal}>
-        <div className={styles.modalBody}>
-            <button onClick={()=>setShowModal(false)} className={styles.close}>&times;</button>
-            <div className={styles.main}>
-                <button className={styles.connect} onClick={handleOnClick}>Connect to metamask</button>
-                <div className={styles.details}>
-                   
-                    {
-                        chainId&&
-                        <>
-                            <div>
-                                <label>Chain ID:</label>
-                                <span>{chainId}</span>
-                            </div>
-                           <div>
-                                 <label>Balance </label>
-                                 <span>{balance}</span>
-                           </div>
-                           
-                        </>
-                    }
-
-                </div>
-            </div>
-        </div>
-
-    </div>
-}
\ No newline at end of file
diff --git a/components/WalletModal.js b/components/WalletModal.js
new file mode 100644
index 0000000..984dda8
--- /dev/null
+++ b/components/WalletModal.js
@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  VStack,
+  Text,
+} from '@chakra-ui/react'
+import Web3 from "web3"
+export default function WalletModal({onClose,isOpen}){
+    const [balance,setBalance]=useState();
+    const [chainId,setChainId]=useState();
+
+   async function handleOnClick(){
+       if(window.ethereum){
+           await window.ethereum.send('eth_requestAccounts');
+            const web3=new Web3(window.ethereum);
+            const accounts=await web3.eth.getAccounts();
+            const balance=await web3.eth.getBalance(accounts[0]);
+            setBalance(balance);
+            setChainId(accounts[0]);
+       }
+   }
+
+   async function handleDisconnect(){
+     setChainId();
+     setBalance();
+   }
+    return (
+    <Modal onClose={onClose} isOpen={isOpen}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Wallet Details</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <VStack>
+                {chainId?<Button bgColor="red" color='white' onClick={handleDisconnect}>Disconnect Wallet</Button>:<Button onClick={handleOnClick}>Connect to Metamask</Button>}
+                {
+                  chainId&&<>
+                    <Text>Chain Id : {chainId}</Text>
+                    <Text>Balance : {balance&&balance+" ETH"}</Text>
+                  </>
+                }
+            </VStack>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    )
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3165469..d183042 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3,6 +3,33 @@
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
+      "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
+      "requires": {
+        "@babel/highlight": "^7.16.7"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
+      "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
+      "requires": {
+        "@babel/types": "^7.16.7"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.16.8",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz",
+          "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.16.7",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
     "@babel/helper-plugin-utils": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
@@ -13,6 +40,67 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
       "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw=="
     },
+    "@babel/highlight": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.7.tgz",
+      "integrity": "sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==",
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.16.7",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "@babel/plugin-syntax-jsx": {
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz",
@@ -657,20 +745,131 @@
       "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
       "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ=="
     },
+    "@emotion/babel-plugin": {
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
+      "integrity": "sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        },
+        "stylis": {
+          "version": "4.0.13",
+          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+          "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      },
+      "dependencies": {
+        "stylis": {
+          "version": "4.0.13",
+          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+          "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+        }
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "@emotion/is-prop-valid": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "optional": true,
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.1.tgz",
+      "integrity": "sha512-bW1Tos67CZkOURLc0OalnfxtSXQJMrAMV0jZTVGJUPSOd4qgjF3+tTD5CwJM13PHA8cltGW1WGbbvV9NpvUZPw==",
       "requires": {
-        "@emotion/memoize": "0.7.4"
+        "@emotion/memoize": "^0.7.4"
       }
     },
     "@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "optional": true
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/react": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.7.1.tgz",
+      "integrity": "sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+    },
+    "@emotion/styled": {
+      "version": "11.6.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.6.0.tgz",
+      "integrity": "sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.3.0",
+        "@emotion/is-prop-valid": "^1.1.1",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.0.0"
+      }
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
     "@eslint/eslintrc": {
       "version": "1.0.5",
@@ -1151,6 +1350,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.8.tgz",
       "integrity": "sha512-YofkM6fGv4gDJq78g4j0mMuGMkZVxZDgtU0JRdx6FgiJDG+0fY0GKVolOV8WqVmEhLCXkQRjwDdKyPxJp/uucg=="
     },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
     "@types/pbkdf2": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@types/pbkdf2/-/pbkdf2-3.1.0.tgz",
@@ -1415,6 +1619,16 @@
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
       "dev": true
     },
+    "babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1687,8 +1901,7 @@
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
     },
     "caniuse-lite": {
       "version": "1.0.30001299",
@@ -1891,6 +2104,18 @@
         "vary": "^1"
       }
     },
+    "cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      }
+    },
     "crc-32": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
@@ -2173,6 +2398,14 @@
         "ansi-colors": "^4.1.1"
       }
     },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "es-abstract": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
@@ -2247,8 +2480,7 @@
     "escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
     },
     "eslint": {
       "version": "8.6.0",
@@ -2863,6 +3095,11 @@
         }
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
@@ -2943,6 +3180,21 @@
         "tslib": "^2.1.0"
       },
       "dependencies": {
+        "@emotion/is-prop-valid": {
+          "version": "0.8.8",
+          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+          "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+          "optional": true,
+          "requires": {
+            "@emotion/memoize": "0.7.4"
+          }
+        },
+        "@emotion/memoize": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+          "optional": true
+        },
         "framesync": {
           "version": "6.0.1",
           "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
@@ -3231,6 +3483,21 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "http-cache-semantics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@@ -3301,7 +3568,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "requires": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -3360,6 +3626,11 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
+    },
     "is-bigint": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
@@ -3386,7 +3657,6 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
       "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==",
-      "dev": true,
       "requires": {
         "has": "^1.0.3"
       }
@@ -3585,6 +3855,11 @@
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
       "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg="
     },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
     "json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
@@ -3686,6 +3961,11 @@
         "type-check": "~0.4.0"
       }
     },
+    "lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
     "loader-utils": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
@@ -4184,7 +4464,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "requires": {
         "callsites": "^3.0.0"
       }
@@ -4206,6 +4485,17 @@
       "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.4.tgz",
       "integrity": "sha512-psZ9iZoCNFLrgRjZ1d8mn0h9WRqJwFxM9q3x7iUjN/YT2OksthDJ5TiPCu2F38kS4zutqfW+YdVVkBZZx3/1aw=="
     },
+    "parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      }
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -4232,8 +4522,7 @@
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "path-to-regexp": {
       "version": "0.1.7",
@@ -4243,8 +4532,7 @@
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
     "pbkdf2": {
       "version": "3.1.2",
@@ -4612,7 +4900,6 @@
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.21.0.tgz",
       "integrity": "sha512-3wCbTpk5WJlyE4mSOtDLhqQmGFi0/TD9VPwmiolnk8U0wRgMEktqCXd3vy5buTO3tljvalNvKrjHEfrd2WpEKA==",
-      "dev": true,
       "requires": {
         "is-core-module": "^2.8.0",
         "path-parse": "^1.0.7",
@@ -4622,8 +4909,7 @@
     "resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
     },
     "responselike": {
       "version": "1.0.2",
@@ -5029,8 +5315,7 @@
     "supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
     "swarm-js": {
       "version": "0.1.40",
@@ -5837,6 +6122,11 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
+    },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
     }
   }
 }
diff --git a/package.json b/package.json
index e36968e..d136105 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^1.7.4",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
     "framer-motion": "^5.6.0",
     "next": "12.0.8",
     "react": "17.0.2",
diff --git a/pages/_app.js b/pages/_app.js
index 1e1cec9..fc8f88b 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,7 +1,11 @@
 import '../styles/globals.css'
-
+import {ChakraProvider} from "@chakra-ui/react"
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+  <ChakraProvider>
+    <Component {...pageProps} />
+  </ChakraProvider>
+  )
 }
 
 export default MyApp
diff --git a/pages/index.js b/pages/index.js
index 1c23a2c..ee4c3ff 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,6 @@
 import Head from 'next/head'
 import Image from 'next/image'
+import {Box,VStack,Input,Heading} from "@chakra-ui/react"
 import Converter from "../components/Converter";
 import styles from '../styles/Home.module.css'
 export default function Home() {
@@ -16,28 +17,10 @@ export default function Home() {
           Assignment
         </h1>
 
-        <div className={styles.grid}>
-          <div className={styles.card}>
-            <h2>Converter &rarr;</h2>
-            <Converter/>
-          </div>
-
-         
-        </div>
+        <Box w='50%' mt='2' p={4} borderWidth={"1px"} borderRadius={'lg'} overflow={'hidden'}>
+          <Converter/>
+        </Box>
       </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
     </div>
   )
 }
diff --git a/styles/Modal.module.css b/styles/Modal.module.css
deleted file mode 100644
index e48ae3d..0000000
--- a/styles/Modal.module.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.modal{
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    opacity: 1;
-    z-index: 10;
-}
-.close {
-  background-color: inherit;
-  border: 0px ;
-  color: inherit;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-}
-
-.modalBody{
-    margin: 15% auto;
-    background-color: rgb(190, 189, 189);
-    border: 2px solid rgb(58, 57, 57);
-    width: 80%;
-    height: 50%;
-}
-
-.main{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-}
-
-.connect{
-    flex-grow: 0;
-    flex-basis: 1;
-}
\ No newline at end of file