diff --git a/package-lock.json b/package-lock.json
index 3bf1d52..dfcf9b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21398,7 +21398,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
       "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
-      "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
diff --git a/public/index.html b/public/index.html
index 3d2d553..1004524 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,6 +24,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Poppins:ital,wght@0,200;1,400&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Poppins:ital,wght@0,200;0,300;1,400&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter&family=Montserrat:wght@500&family=Poppins:ital,wght@0,200;0,300;1,400&display=swap" rel="stylesheet">
     <style>
       /* width */
       ::-webkit-scrollbar {
diff --git a/src/components/DataSection.css b/src/components/DataSection.css
index e93a602..a4b5e23 100644
--- a/src/components/DataSection.css
+++ b/src/components/DataSection.css
@@ -1,5 +1,8 @@
 .data{
     display: flex;
+    font-family: "poppins";
+    font-size: 20px;
+    text-align: left;
   }
   .data p{
     text-align: center;
@@ -31,6 +34,9 @@
     padding: 4px; 
     margin: 10px;
     margin-top: -15px;
+    font-family: "poppins";
+    font-size: 10px;
+    
     /* left: 2%; */
   }
   .scroll-container{
diff --git a/src/components/main_body.css b/src/components/main_body.css
index 665671d..cd31c86 100644
--- a/src/components/main_body.css
+++ b/src/components/main_body.css
@@ -1,3 +1,4 @@
+
 .master_container{
     height: 100vh;
     background-color: rgba(128, 128, 128, 0.288);
@@ -43,10 +44,11 @@ img{
 }
 
 .username{
-    font-size: 30px;
+    font-size: 24px;
     font-weight: 600;
     text-align: center;
     margin-top: 0.5vh;
+    font-family: "poppins";
 }
 
 .sub_name{
@@ -60,6 +62,10 @@ img{
     width: 30%;
     height: 35vh;
     align-items: center;
+    font-family: "poppins";
+    font-size: 14px;
+    
+    /* background: #FFFFEC; */
     /* border: 2px solid red; */
 }
 
@@ -69,10 +75,12 @@ img{
     font-weight: 700;
     text-align: center;
     margin-bottom: 1vh;
+    font-family: "montserrat";
 }
 
 .parent_button{
     display: flex;
     flex-direction: column;
     gap: 2vh;
-}
\ No newline at end of file
+}
+
diff --git a/src/components/main_body.js b/src/components/main_body.js
index 8e1e9f1..d92e521 100644
--- a/src/components/main_body.js
+++ b/src/components/main_body.js
@@ -35,18 +35,20 @@ const Content = () => {
             </div>
             <div className='parent_button'>
             <div className="web3Button">
-            <Web3Button 
-                        contractAddress= {contractAddress}
-                        action={(contract) => contract.call(
-                            "showUser",
-                            [],{from: userAddress}
-                        )}
-                        onSuccess={(results)=>{
-                            console.log(results);
-                        }}
-                        style={{backgroundColor: 'white',color: 'black',fontSize: '25px'}}
-                          
-            > Button 1</Web3Button>
+              <Web3Button 
+                  contractAddress= {contractAddress}
+                  action={(contract) => contract.call(
+                      "addUser",
+                      [userAddress],{from: userAddress}
+                  )}
+                  onSuccess={(results)=>{
+					toast.success('User Added to DocChain', {position: "top-right",autoClose: 5000,hideProgressBar: false,closeOnClick: true,pauseOnHover: true,draggable: true,progress: undefined,theme: "dark"}); 	
+                  }}
+                  onError={(error)=>{
+					toast.error('User Already Exists', {position: "top-right",autoClose: 5000,hideProgressBar: false,closeOnClick: true,pauseOnHover: true,draggable: true,progress: undefined,theme: "dark"}); 
+                  }}
+                  style={{backgroundColor: '#FFFFEC',color: 'black',fontSize: '20px', fontFamily: 'poppins'}}            
+              > Add Yourself </Web3Button>
             </div>
             <div className="web3Button">
             <Web3Button 
@@ -72,7 +74,7 @@ const Content = () => {
                         onSuccess={(results)=>{
                             console.log(results);
                         }}
-                        style={{backgroundColor: 'white',color: 'black',fontSize: '25px'}}
+                        style={{backgroundColor: '#FFFFEC',color: 'black',fontSize: '20px', fontFamily: 'poppins'}}
                           
             > Button 3</Web3Button>
             </div>
@@ -86,7 +88,7 @@ const Content = () => {
                         onSuccess={(results)=>{
                             console.log(results);
                         }}
-                        style={{backgroundColor: 'white',color: 'black',fontSize: '25px'}}
+                        style={{backgroundColor: '#FFFFEC',color: 'black',fontSize: '20px', fontFamily: 'poppins'}}
                           
             > Button 4</Web3Button>
             </div>
diff --git a/src/components/navbar.css b/src/components/navbar.css
index 7cbea4a..7cc91f3 100644
--- a/src/components/navbar.css
+++ b/src/components/navbar.css
@@ -11,6 +11,7 @@
     /* border: 2px solid red; */
     background-color: #FFFFFF;
     align-items: center;
+    font-family: "inter";
 }
 
 .navbar_right{
diff --git a/src/index.js b/src/index.js
index 6f06f90..3cd6a7b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,7 @@ import reportWebVitals from "./reportWebVitals";
 import { ThirdwebProvider } from "@thirdweb-dev/react";
 import "./styles/globals.css";
 import { Sepolia } from "@thirdweb-dev/chains"
+import LandingPage from "./landingPage/landingPage.jsx";
 
 // This is the chain your dApp will work on.
 // Change this to the chain your app is built for.
@@ -19,7 +20,8 @@ root.render(
       activeChain={activeChain}
       clientId={process.env.REACT_APP_TEMPLATE_CLIENT_ID}
     >
-      <App />
+      {/* <App /> */}
+      <LandingPage />
     </ThirdwebProvider>
   </React.StrictMode>
 );
diff --git a/src/landingPage/landingPage.css b/src/landingPage/landingPage.css
new file mode 100644
index 0000000..9503c61
--- /dev/null
+++ b/src/landingPage/landingPage.css
@@ -0,0 +1,89 @@
+@header-font{
+    font-family: petrona;
+    src: url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,300&display=swap');
+}
+
+@header-font-chain{
+    font-family: petrona_bold;
+    src: url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,300;1,500&display=swap');
+}
+
+html, body{
+    height: 100%;
+    background: linear-gradient(135deg, #0B1623, #439E9F, #217974);
+    margin: 0;
+    padding: 0;
+}
+header {
+    color: #FFFFEC;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.landingPg {
+    
+    color: #FFFFEC; /* Set text color to white */
+    padding: 20px; /* Add padding for better readability */
+}
+
+.landingPg .header-left .logo span {
+    font-family: Petrona;
+    font-weight: 300; /* Light */
+    font-style: italic;
+    font-size: 36px;
+}
+
+.landingPg .header-left .logo span.chain {
+    font-family: Petrona;
+    font-weight: 600; /* Light */
+    font-style: italic;
+    font-size: 36px;
+}
+  
+.header-right a {
+    color: #fff;
+    margin-right: 35px;
+    text-decoration: none;
+    font-family: Inter;
+    padding-left: 25px;
+    font-weight:500;
+}
+
+.main{
+    font-size:95px;
+    font-family: Montserrat;
+    font-weight: 600;
+    margin: 30px;
+    margin-left: 2 rem;
+    /* display: flex;
+    align-items: left; */
+}
+
+.button{
+    /* font-size: 20px;
+    font-family: Poppins;
+    padding: 10px 24px;
+    text-align: center;
+    display: flex;
+    justify-content: flex-start;
+    border-radius: 8px;
+     */
+     color: #122631;
+text-align: center;
+font-family: Poppins;
+font-size: 24px;
+font-style: normal;
+font-weight: 600;
+line-height: 28px; /* 116.667% */
+     display: inline-flex;
+padding: 20px 34px;
+justify-content: center;
+align-items: center;
+gap: 10px;
+     border-radius: 25px;
+background: #FFFFEC;
+margin: 30px;
+box-shadow: 0px 7px 16px 0px rgba(7, 18, 24, 0.18), 0px 29px 29px 0px rgba(7, 18, 24, 0.15), 0px 66px 40px 0px rgba(7, 18, 24, 0.09), 0px 118px 47px 0px rgba(7, 18, 24, 0.03), 0px 184px 52px 0px rgba(7, 18, 24, 0.00);
+}
\ No newline at end of file
diff --git a/src/landingPage/landingPage.jsx b/src/landingPage/landingPage.jsx
new file mode 100644
index 0000000..e3af3ca
--- /dev/null
+++ b/src/landingPage/landingPage.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const YourComponent = () => {
+  return (
+    <div className="landingPg">
+      <header>
+        <div className="header-left">
+          <a className="logo">
+            <span>Doc</span>
+            <span className="chain">Chain</span>
+          </a>
+        </div>
+        <div className="header-right">
+          <a><b>About Us</b></a>
+          <a><b>Contacts</b></a>
+        </div>
+      </header>
+      <hr className="line" /><br /><br /><br /><br /><br /><br />
+
+      <div className="main">
+        <div>Secure Your</div>
+        <div>Identity</div>
+      </div>
+      
+      <button className="button">Connect Your Wallet</button>
+    </div>
+  );
+};
+
+export default YourComponent;
diff --git a/yarn.lock b/yarn.lock
index e348437..2a07634 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2592,11 +2592,6 @@
   resolved "https://registry.npmjs.org/@paperxyz/sdk-common-utilities/-/sdk-common-utilities-0.1.1.tgz"
   integrity sha512-RefjXB3d5Ub1I3GoIf/mfgTsvmAneWoeQwpmiuXYx1NmmSdbtBxDUk4POtSWUCnvoiJP0Y2frATnYMV30J1b1A==
 
-"@parcel/watcher-darwin-arm64@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.0.tgz"
-  integrity sha512-T/At5pansFuQ8VJLRx0C6C87cgfqIYhW2N/kBfLCUvDhCah0EnLLwaD/6MW3ux+rpgkpQAnMELOCTKlbwncwiA==
-
 "@parcel/watcher-wasm@2.3.0":
   version "2.3.0"
   resolved "https://registry.npmjs.org/@parcel/watcher-wasm/-/watcher-wasm-2.3.0.tgz"
@@ -8114,11 +8109,6 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.3.2, fsevents@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
-  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
-
 function-bind@^1.1.1, function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"