diff --git a/package.json b/package.json
index 55694d8..8a232ef 100644
--- a/package.json
+++ b/package.json
@@ -20,12 +20,14 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.8",
+    "@types/recharts": "^1.8.20",
     "graphql": "^15.5.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.1",
     "react-scripts": "4.0.3",
+    "recharts": "^2.1.3",
     "swiper": "^6.8.1",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
diff --git a/src/App.tsx b/src/App.tsx
index dda2ff1..95e2e97 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,8 +11,9 @@ import { ApolloProvider } from "@apollo/client";
 import client from "./graphql";
 import Logout from "./logout";
 import AuthContext from "./utils/context";
-import Body1 from "./Body1";
-import { Rejected, Selected } from "./Body2";
+import thank from "./thank";
+import { Rejected, Selected } from "./Selected";
+
 
 const App = () => {
   const { role } = useContext(AuthContext);
@@ -22,9 +23,10 @@ const App = () => {
         <Router>
           <Route exact path="/" component={Home} />
           <Route exact path="/login" component={Login} />
+         
           <Route exact path="/profile" component={Profile} />
           {role === "REGISTERED" && (
-            <Route exact path="/me" component={Body1} />
+            <Route exact path="/me" component={thank} />
           )}
           {role === "SELECTED" && <Route exact path="/me" component={Selected} />}
           {role === "REJECTED" && <Route exact path="/me" component={Rejected} />}
diff --git a/src/Body.css b/src/Body.css
deleted file mode 100644
index eb1f71e..0000000
--- a/src/Body.css
+++ /dev/null
@@ -1,412 +0,0 @@
-
-
-
-
-
-
-/* desktop */
-
-.Body{
-    margin-top: 30px;
-    padding-left: 10%;
-    padding-right: 10%;
-}
-
-.Body_Item1{
-    margin-top: 40px;
-    margin-bottom: 30px;  
-    height: fit-content;
-    display: flex;
-    flex-direction: row;   
-    justify-content: space-between;
-    transition: .3s all;
-    margin-bottom: 85px;
-}
-
-.Image_Container > img{
-    height: 110%;
-    margin-top: 10px;
-    transition: .3s all;
-    padding-bottom: 5%;
-    display: inline-block;
-}
-
-.Landing_text{
-    flex-direction: column;
-    margin-top: 20px;
-    transition: .3s all;
-    width: 100%;
-}
-
-.ambassador{
-    text-align: right;
-    margin-top: 10px;
-    font-size: 25px;
-    transition: .3s all;
-}
-
-.Join{
-    font-size: 70px;
-    color: rgb(47, 47, 189);
-    transition: .3s all;
-    text-align: right;
-}
-
-.Register_Container{
-    margin-top: 15px;
-    transition: .3s all;
-}
-
-.button{
-    text-align: center;
-    font-size: 25px;
-    width: 190px;
-    height: 35px;
-    line-height: 35px;
-    background-color: rgb(48, 48, 187);
-    color: white;
-    padding: 10px;
-    cursor: pointer;
-    transition: .3s all;
-    position: absolute;
-    margin-right: 10%;
-    right: 0;
-}
-
-.button:hover{
-    background-color: rgba(108,99,255,255);
-    transition: all 500ms linear;
-}
-
-.Left{
-    margin-top: 20px;
-    font-size: 70px;
-    color: rgb(47, 47, 189);
-    transition: .3s all;
-    text-align: left;
-}
-
-#Center{
-    font-size: 70px;
-    color: rgb(47, 47, 189);
-    transition: .3s all;
-    margin-top: 1%;
-    margin-bottom: 3%;
-}
-
-.Body_Item2{
-    margin-top: 25px;
-    margin-bottom: 20px;
-}
-
-.Role_Image > img{
-    width: 115%;
-   
-}
-
-.heading{
-    font-size: 50px;
-    color: rgb(47, 47, 189);
-}
-
-.Role_details{
-    display: flex;
-    padding-top: 30px;
-    margin-bottom: 20px;
-}
-
-.text{
-    font-size: 20px;
-    width: 50%;
-    text-align: left;
-    padding-right: 50px;
-}
-
-.information{
-    margin-top: 20px;
-    display: flex;
-    align-items: center; 
-}
-
-.Body_Item3{
-    margin-bottom: 8px;
-}
-
-       /* Media Queries */
-
-@media(max-width:760px){
-    .Body_Item1{
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-    }
-    .Image_Container > img {
-        width: 100%;
-    }
-    .Join{
-        font-size: 40px;
-        color: rgb(47, 47, 189);
-        text-align: center;
-    }
-    
-    #Center{
-        font-size: 30px;
-        color: rgb(47, 47, 189);
-        text-align: left;
-        padding-left: 2%;
-    }
-
-    .Left{
-        font-size: 30px;
-        color: rgb(47, 47, 189);
-        transition: .3s all;
-        text-align: center;
-        /* margin-top: 50px; */
-    }
-    
-
-    .ambassador{
-        text-align: center !important ;
-        margin-top: 10px;
-        font-size: 18px;
-    }
-    .Register_Container{
-        
-        display: flex;
-        justify-content: center;
-        margin-top: 15px;
-        transition: .3s all;
-        position:relative ! important ;
-    }
-    .button{ 
-        width: 35%;
-        margin-right: -2%;
-        right: 0;
-        position:relative ; 
-        justify-content:center;
-    }
-
-    
-    .heading{
-        font-size: 35px !important;
-        text-align: center;
-    }
-
-    #Center{
-        text-align: center;
-    }
-
-    .Role_details{
-        display: flex;
-        flex-direction: column-reverse;
-    }
-  
-    .text{
-        text-align: center;
-        width: 100%;
-    }
-
-    .Role_Image > img{
-        width: 100%;
-        align-content: center;
-        margin-bottom: 5%;
-    }
-}
-
-
-@media(max-width:1200px){
-    .Join{
-        font-size: 50px;
-        color: rgb(47, 47, 189);
-    }
-
-    .Image_Container > img{
-        width: 170%;
-        }
-    .ambassador{
-        text-align: right;
-        margin-top: 10px;
-        font-size: 20px;
-    }
-    .Left{
-        font-size: 50px;
-        color: rgb(47, 47, 189);
-        transition: .3s all;
-        text-align: left;
-    }
-    
-    #Center{
-        font-size: 50px;
-        color: rgb(47, 47, 189);
-        text-align: left;
-        padding-left: 2%;
-    }
-
-    .button{
-        text-align: center;
-        font-size: 19px;
-        width: 120px;
-        line-height: 20px;
-        height: 20px;
-        background-color: rgb(48, 48, 187);
-        color: white;
-        padding: 10px;
-        cursor: pointer;
-        transition: .3s all;
-        position: absolute;
-        margin-right: 10%;
-        right: 0;
-    }
-
-}
-
-@media(max-width:1040px){
-
-    .Body{
-        padding-left: 10%;
-        padding-right: 10%;
-        text-overflow: inherit;
-    }
-
-    .Image_Container {
-    width: 90%;
-    }
-
-    .Body_Item1{
-        margin-bottom: 30px;
-    }
-    
-    
-    .Join{
-        font-size: 40px;
-        color: rgb(47, 47, 189);
-        /* margin-left: 5%; */
-    }
-
-
-    .ambassador{
-        text-align: right;
-        margin-top: 10px;
-        font-size: 18px;
-    }
-
-    .button{
-        text-align: center;
-        font-size: 19px;
-        width: 105px;
-        height: 18px;
-        background-color: rgb(48, 48, 187);
-        color: white;
-        padding: 10px;
-        cursor: pointer;
-        transition: .3s all;
-        position: absolute;
-        margin-right: 10%;
-        right: 0;
-    }
-
-    .Image_Container > img{
-        height: 100%;
-        margin-top: 10px;
-        transition: .3s all;
-        padding-bottom: 5%;
-    }
-    
-    .Left{
-        font-size: 40px;
-        color: rgb(47, 47, 189);
-        transition: .3s all;
-        text-align: center;
-        /* margin-top: 50px; */
-    }
-    
-    #Center{
-        font-size: 40px;
-        color: rgb(47, 47, 189);
-        transition: .3s all;
-        text-align: left;
-        padding-left: 2%;
-    }
-
-}
-
-@media (max-width:760px){
-    .Image_Container > img {
-        width: 112%;
-    }
-
-    .heading{
-        font-size: 40px;
-        color: rgb(47, 47, 189);
-    }
-    
-    .button{
-        position: relative;
-        margin-right: 10%;
-        margin-left: 10%;
-        right: 0;
-    }
-}
-
-/* div styles */
-
-.divider {
-    display: flex;
-}
-.divider:before,
-.divider:after {
-  content: "";
-  flex: 1;
-}
-
-.glow:before,
-.glow:after {
-      height: 6px;
-      -webkit-filter: blur(5px);
-      filter: blur(5px);
-      border-radius: 5px;
-}
-    
-.glow:before {
-      background: linear-gradient(to right, blue, hotpink);
-}
-    
-.glow:after {
-      background: linear-gradient(to left, blue, hotpink);
-}
-
-.gradient {
-    align-items: stretch;
-    margin: 1em 0;
-    height: 2em;
-    line-height: 2em;
-    color: white;
-    background: rgb(47, 47, 189);
-}
-    
-.gradient:before {
-      background: linear-gradient(to right, white, rgb(47, 47, 189));
-    }
-    
-.gradient:after {
-      background: linear-gradient(to left, white, rgb(47, 47, 189));
-}
-
-/* .donotcross {
-    overflow: hidden;
-    align-items: center;
-    background: rgb(47, 47, 189);
-    color: black;
-    height: 2em;
-    line-height: 2em;
-}
-      
-.donotcross:before,
-.donotcross:after {
-      background: white;
-      padding: 50px 0;
-      height: 0;
-      transform: rotate(45deg);
-} */
-
-/* div styles */
\ No newline at end of file
diff --git a/src/Body.tsx b/src/Body.tsx
deleted file mode 100644
index 2340485..0000000
--- a/src/Body.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import React from 'react'
-import "./Body.css"
-// import Landing from "/assets/illustration1.png"
-// import Role from "/assets/illustrations2.png"
-// import infoicon from "/assets/ic1.png"
-const Body = () => {
-    return (
-        <>
-        <div className="Body" >
-
-        <div className="divider line glow"></div>
-
-       {/* Part 1 with image and join family  - Body Item1*/}
-
-       {/* JOin the family */}
-
-            <div className="Body_Item1">
-                <div className="Image_Container">
-                <img src={'/assets/illustration1.png'} alt="landing" />
-                </div>
-
-                <div className="Landing_text">
-                    <div className="Join">
-                        <b>Join the</b> Family
-                    </div>
-
-                    <div className="ambassador">
-                        STUDENT <b>AMBASSADOR</b>
-                        <br/>
-                        <div style={{paddingTop:"6px"}} >Lorem ipsum dolor sit.</div>
-                    </div>
-                    <div className="Register_Container">
-                        <div className="button" id='Bflex'>REGISTER</div>
-                    </div>
-                </div>
-            </div>
-            
-            <div className="divider gradient"></div>
-            {/* <div className="divider donotcross"></div> */}
-
-            {/* role of a student ambassador */}
-
-            <div className="Body_Item2">
-                <div  className='Left'>
-                    <b>Role</b> of a Student Ambassador 
-                </div>
-                
-                <div className="Role_details">
-                    <div className="text">
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores debitis at similique perferendis tempora recusandae nam, accusantium eius ducimus itaque numquam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic perferendis fuga officiis reprehenderit dicta. Tempore veritatis harum expedita accusamus magni. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur praesentium, illo beatae porro optio provident obcaecati laboriosam inventore explicabo numquam eaque laborum iusto dignissimos? Non aliquid magnam impedit deleniti expedita.
-                    </div>
-                    <div className="Role_Image">
-                        <img src={'/assets/illustration2.png'} alt="Role" />
-                    </div>
-                </div>
-
-                {/* responsibilities */}
-
-            <div className="divider gradient"></div>
-            {/* <div className="divider donotcross"></div> */}
-                
-                
-            </div>
-            <div className="Body_Item3">
-            <div  id='Center'>
-                <b>Responsibilities</b> and specific duties
-            </div>
-            <div className="information">
-                <div className="icon">
-                    <img src={'/assets/ic1.png'} alt="icon" />
-                </div>
-                <div className="info_text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga amet incidunt obcaecati minus, neque tempora nulla eum sequi quia sint.</div>
-            </div>
-
-            <div className="information">
-                <div className="icon">
-                    <img src={'/assets/ic1.png'} alt="icon" />
-                </div>
-                <div className="info_text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga amet incidunt obcaecati minus, neque tempora nulla eum sequi quia sint.</div>
-            </div>
-
-            <div className="information">
-                <div className="icon">
-                    <img src={'/assets/ic1.png'} alt="icon" />
-                </div>
-                <div className="info_text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga amet incidunt obcaecati minus, neque tempora nulla eum sequi quia sint.</div>
-            </div>
-
-            <div className="information">
-                <div className="icon">
-                    <img src={'/assets/ic1.png'} alt="icon" />
-                </div>
-                <div className="info_text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga amet incidunt obcaecati minus, neque tempora nulla eum sequi quia sint.</div>
-            </div>
-
-            <div className="information">
-                <div className="icon">
-                    <img src={'/assets/ic1.png'} alt="icon" />
-                </div>
-                <div className="info_text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga amet incidunt obcaecati minus, neque tempora nulla eum sequi quia sint.</div>
-            </div>
-
-            <div className="information">
-                <div className="icon">
-                    <img src={'/assets/ic1.png'} alt="icon" />
-                </div>
-                <div className="info_text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga amet incidunt obcaecati minus, neque tempora nulla eum sequi quia sint.</div>
-            </div>
-            </div>
-            <br /> 
-            {/* <div className="divider line glow"></div> */}
-            <div className="divider gradient"></div>
-            {/* <div className="divider donotcross"></div> */}
-            <br />
-
-        </div>
-
-</>
-    )
-}
-
-export default Body
-// const Body = () => {
-//     return (
-//         <>
-//         <div className="Body" >
-
-//        {/* Part 1 with image and join family  - Body Item1*/}
-
-//             <div className="Body_Item1">
-//                 <div className="Image_Container">
-//                 <img src={'/assets/illustration1.png'} alt="landing" />
-//                 </div>
-
-//                 <div className="Landing_text">
-//                     <div className="Join">
-//                         <b>Join the</b> Family
-//                     </div>
-//                     <div className="ambassador">
-//                         STUDENT <b>AMBASSADOR</b>
-//                         <br/>
-//                         <div style={{paddingTop:"6px"}} >Lorem ipsum dolor sit.</div>
-//                     </div>
-//                     <div className="Register_Container">
-//                         <div className="button" id='Bflex'>REGISTER</div>
-//                     </div>
-//                 </div>
-//             </div>
-
-//             <div className="Body_Item2">
-//                 <div  className='Left'>
-//                     <b>Role</b> of a Student Ambassador 
-//                 </div>
-//                 <div className='Acenter'>
-//                 <div className="Role_details">
-//                     <div className="text">
-//                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores debitis at similique perferendis tempora recusandae nam, accusantium eius ducimus itaque numquam reiciendis unde inventore libero consequatur expedita doloremque voluptatem tenetur vel autem ea blanditiis minus ad! Dicta quisquam quas sint sit, nam perferendis veniam molestiae modi fuga accusamus recusandae animi. Numquam minus ratione odio magni incidunt deleniti animi eaque maiores corporis, necessitatibus aperiam sit velit, perferendis dolor veniam? Veritatis laudantium velit voluptates illum ducimus odit deleniti nisi impedit, officia autem.
-//                     </div>
-//                     <div className="Role_Image">
-//                         <img src={'/assets/illustration2.png'} alt="Role" />
-//                     </div>
-//                 </div>
-                
-//                 </div>
-//             </div>
-//             <div className="Body_Item3">
-//             <div  className="kkk" id='Center' >
-//                 <b>Responsibilities</b> and specific duties
-//             </div>
-//             <div className="information">
-//                 <div className="icon">
-//                     <img src={'/assets/ic1.png'} alt="icon" />
-//                 </div>
-//                 <div className="info_text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga amet incidunt obcaecati minus, neque tempora nulla eum sequi quia sint.</div>
-//             </div>
-
-//             <div className="information">
-//                 <div className="icon">
-//                     <img src={'/assets/ic1.png'} alt="icon" />
-//                 </div>
-//                 <div className="info_text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga amet incidunt obcaecati minus, neque tempora nulla eum sequi quia sint.</div>
-//             </div>
-
-//             <div className="information">
-//                 <div className="icon">
-//                     <img src={'/assets/ic1.png'} alt="icon" />
-//                 </div>
-//                 <div className="info_text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga amet incidunt obcaecati minus, neque tempora nulla eum sequi quia sint.</div>
-//             </div>
-
-//             <div className="information">
-//                 <div className="icon">
-//                     <img src={'/assets/ic1.png'} alt="icon" />
-//                 </div>
-//                 <div className="info_text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga amet incidunt obcaecati minus, neque tempora nulla eum sequi quia sint.</div>
-//             </div>
-
-//             <div className="information">
-//                 <div className="icon">
-//                     <img src={'/assets/ic1.png'} alt="icon" />
-//                 </div>
-//                 <div className="info_text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga amet incidunt obcaecati minus, neque tempora nulla eum sequi quia sint.</div>
-//             </div>
-
-//             <div className="information">
-//                 <div className="icon">
-//                     <img src={'/assets/ic1.png'} alt="icon" />
-//                 </div>
-//                 <div className="info_text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga amet incidunt obcaecati minus, neque tempora nulla eum sequi quia sint.</div>
-//             </div>
-//             </div>
-//             <br /> <br /> <br />
-//         </div>
-
-// </>
-//     )
-// }
-
-// export default Body
diff --git a/src/Profile.css b/src/Profile.css
index 068ce4e..39c18a7 100644
--- a/src/Profile.css
+++ b/src/Profile.css
@@ -1,103 +1,188 @@
-.Profile {
-  width: 100%;
+.bodyp{
+  margin-left: 7%;
+  margin-right: 7%;
 }
-.Profile_details {
-  width: 100%;
-  height: 500px;
+
+.Part1p{
   display: flex;
-  align-items: center;
-  justify-content: center;
+  margin-top: 20px;
+  justify-content: space-between;
+  height: 320px;  
+}
+
+.P1L{
+  line-height: 22px;
+  font-size: 15px;
+}
+
+.Cardp{
+  position: relative;
+  display: inline-block;
+  margin-bottom: 10px;
 }
-.Profile_details .imgBox {
-  width: 300px;
-  height: 300px;
+
+.Cardp>img{
   border-radius: 50%;
-  margin-right: 50px;
-  overflow: hidden;
 }
-.Profile_details .imgBox img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+
+.Cardp .End{
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 99;
 }
-.Profile_details .contentBox {
-  height: 250px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: flex-start;
-}
-.Profile_details .contentBox h1 {
-  letter-spacing: 3px;
-  font-size: 3.5em;
-  font-weight: 600;
-  position: relative;
-  left: -15px;
+
+.Cardp:hover .End{
+  display: inline;
+  transition: .3s all;
+}
+
+.P1R{
+  line-height: 25px;
+  text-align: center;
+}
+
+.Style1p{
+  font-size: 30px;
+  font-weight: 300;
+}
+
+.P1L>img{
+  border-radius: 50%;
+  margin-bottom: 10px;
 }
-.Profile_details .contentBox p {
-  letter-spacing: 1px;
-  font-size: 1.2em;
-  font-weight: 500;
+
+.PStyle2p{
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-size: 30px;
+  font-weight:500;
   text-align: left;
 }
-.Profile_details .contentBox button {
-  letter-spacing: 2px;
-  font-size: 1em;
-  font-weight: 600;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  color: #564ed3;
+
+.PStyle3p{
+  margin-top: 20px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  border-radius: 6px;
+  border: 1px solid black;
+  padding: 12px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.PStyle4p{
+  font-size: 20px;
+  width: 110px;
+  height: 20px;
+  line-height: 20px;
+  background-color: rgb(48, 48, 187);
+  color: white;
+  padding: 10px;
   cursor: pointer;
+  transition: .3s all;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  align-content: center;
+  text-align: center;
 }
-.Profile_details .contentBox button:hover {
-  color: #413a9e;
+
+@media(max-width:1175px){
+  
+  .P1R>img{
+      width:650px;
+      height: 250px;
+  }
 }
-.Profile .Profile_status {
-  letter-spacing: 3px;
-  font-size: 2em;
-  font-weight: 600;
-  text-align: center;
+
+@media(max-width:1065px){
+  
+  .P1R>img{
+      width:570px;
+      height: 240px;
+  }
 }
-.Profile .Profile_status span {
-  color: #ff5e00;
+
+@media(max-width:965px){
+
+  .Part1p{
+      height: 340px;  
+  }
+
+  .P1L{
+      padding-right: 10px;
+  }
+ 
+  .P1R>img{
+      width:500px;
+      height: 230px;
+  }
 }
 
-@media screen and (max-width: 600px) {
-  .Profile_details {
-    height: fit-content;
-    flex-direction: column;
+@media(max-width:795px){
+
+  .Part1p{
+      height: 340px;  
   }
-  .Profile_details .imgBox {
-    width: 150px;
-    height: 150px;
-    margin: 0;
+  .P1L{
+      padding-right: 10px;
+  }   
+  .P1R>img{
+      width:400px;
+      height: 210px;
   }
-  .Profile {
-    min-height: calc(100vh - 80px);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    align-items: center;
-    padding: 0 20px;
+}
+
+@media(max-width:670px){
+
+  .Part1p{
+      flex-wrap: wrap;
+      margin-top: 20px;
   }
-  .Profile_details .contentBox {
-    align-items: center;
+
+  .Part1p{
+      height: 260px;  
   }
-  .Profile_details .contentBox h1 {
-    text-align: center;
-    left: 0;
-    font-size: 2.5em;
+
+  .P1L{
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      align-content: center;
+      text-align: center;
   }
-  .Profile_details .contentBox p {
-    text-align: center;
-    font-size: 1.1em;
+
+  .P1R{
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      align-content: center;
+      text-align: center;
+  }  
+  .P1R>img{
+      margin-top: 20px;
+      width:400px;
+      height: 210px;
+      
   }
-  .Profile_details .contentBox button {
-    margin-top: 20px;
+  .Part2p{
+      margin-top: 350px;
   }
-  .Profile .Profile_status {
-    font-size: 1.3em;
-    text-align: center;
+}
+
+@media(max-width:450px){ 
+  .P1R>img{
+      width:300px;
+      height: 200px;
   }
 }
+
+@media(max-width:450px){    
+  .P1R>img{
+      width:220px;
+      height: 150px;
+  }
+}
\ No newline at end of file
diff --git a/src/Profile.tsx b/src/Profile.tsx
index 3584d9d..c840600 100644
--- a/src/Profile.tsx
+++ b/src/Profile.tsx
@@ -1,33 +1,166 @@
-import React from "react";
-import user from "./assets/Ranveer-Singh.jpg";
-import "./Profile.css";
+// import React from "react";
+// import user from "./assets/Ranveer-Singh.jpg";
+// import "./Profile.css";
+// import Header from "./Header";
+
+// function Profile() {
+//   return (
+//     <>
+//       <Header />
+//       <div className="Profile">
+//         <div className="Profile_details">
+//           <div className="imgBox">
+//             <img src={user} alt="" />
+//           </div>
+//           <div className="contentBox">
+//             <h1>FULL NAME</h1>
+//             <p>EMAIL@GMAIL.COM</p>
+//             <p>INDIAN INSTITUTE OF TECHNOLOGY MADRAS, TAMIL NADU</p>
+//             <p>CHENNAI ,TAMIL NADU - 444444</p>
+//           </div>
+//         </div>
+//         <p className="Profile_status">
+//           APPLICATION STATUS : <span>PENDING</span>
+//         </p>
+//         <div className="Profile_edit">
+//           <form></form>
+//         </div>
+//       </div>
+//     </>
+//   );
+// }
+
+// export default Profile;
+
+import './Profile.css';
+
+import React, { PureComponent } from 'react';
+import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 import Header from "./Header";
+const data = [
+  {
+    name: 'Page A',
+    uv: 4000,
+    pv: 2400,
+    amt: 2400,
+  },
+  {
+    name: 'Page B',
+    uv: 3000,
+    pv: 1398,
+    amt: 2210,
+  },
+  {
+    name: 'Page C',
+    uv: 2000,
+    pv: 9800,
+    amt: 2290,
+  },
+  {
+    name: 'Page D',
+    uv: 2780,
+    pv: 3908,
+    amt: 2000,
+  },
+  {
+    name: 'Page E',
+    uv: 1890,
+    pv: 4800,
+    amt: 2181,
+  },
+  {
+    name: 'Page F',
+    uv: 2390,
+    pv: 3800,
+    amt: 2500,
+  },
+  {
+    name: 'Page G',
+    uv: 3490,
+    pv: 4300,
+    amt: 2100,
+  },
+];
+
 
-function Profile() {
-  return (
-    <>
+// import Pic from "./img/Picture3.png";
+// import Pic2 from "./img/Picture2.png";
+
+const Profile = () => {
+    return (
+      <>
       <Header />
-      <div className="Profile">
-        <div className="Profile_details">
-          <div className="imgBox">
-            <img src={user} alt="" />
-          </div>
-          <div className="contentBox">
-            <h1>FULL NAME</h1>
-            <p>EMAIL@GMAIL.COM</p>
-            <p>INDIAN INSTITUTE OF TECHNOLOGY MADRAS, TAMIL NADU</p>
-            <p>CHENNAI , TAMIL NADU - 444444</p>
-          </div>
-        </div>
-        <p className="Profile_status">
-          APPLICATION STATUS : <span>PENDING</span>
-        </p>
-        <div className="Profile_edit">
-          <form></form>
+        <div className='bodyp'>
+        
+            <div className='Part1p'> 
+            <div className='P1L'>
+                <div className='Cardp'>
+                <img className='Top' src={'/assets/Picture3.png'} alt="Pic"  height='180' width='180' />
+                <img className='End' src={'/assets/Picture2.png'} alt="Pic2"  height='180' width='180' />
+                
+                </div>
+                <div> <b className='Style1p'>FULL NAME</b> </div>
+                <div>EMAIL@GMAIL.COM</div>
+                <div>INDIAN INSTITUTE OF TECNOLOGY</div>
+                <div>MADRAS</div>
+                <div>CA-REFERRAL CODE</div>
+                {/* <div></div> */}
+            </div>
+
+            <div className='P1R'>
+            <ResponsiveContainer width="100%" aspect={3}>
+        <BarChart
+          width={500}
+          height={300}
+          data={data}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Bar dataKey="pv" fill="#8884d8" />
+          <Bar dataKey="uv" fill="#82ca9d" />
+        </BarChart>
+      </ResponsiveContainer>
+              
+                <div> <span>POSITION  :  </span> someposition</div>
+                <div>TOTAL POINTS EARNED : 30</div>
+            </div>
+
+            </div>
+            <div className='Part2p'>
+            <div className='PStyle2p'> TASK PENDING </div>
+            <div className='PStyle3p'>
+                 <p>TASK TITLE</p> <p>POINTS : 10</p> </div>
+             <div className='PStyle3p'>
+                 <p>TASK TITLE</p> <p>POINTS : 5</p> </div>
+             <div className='PStyle3p'>
+                 <p>TASK TITLE</p> <p>POINTS : 15</p> </div> 
+             <div className='PStyle4p'>SEE MORE</div>
+                    
+            </div>
+            <div className='Part3p'>
+            <div className='PStyle2p'> TASK COMPLETED </div>
+            <div className='PStyle3p'>
+                 <p>TASK TITLE</p> <p>POINTS : 10</p> </div>
+             <div className='PStyle3p'>
+                 <p>TASK TITLE</p> <p>POINTS : 5</p> </div>
+             <div className='PStyle3p'>
+                 <p>TASK TITLE</p> <p>POINTS : 15</p> </div> 
+                 <div className='PStyle4p'>SEE MORE</div>
+
+            </div>
+            
         </div>
-      </div>
-    </>
-  );
+        </>
+    );
 }
 
-export default Profile;
+export default Profile;
\ No newline at end of file
diff --git a/src/Body2.tsx b/src/Selected.tsx
similarity index 97%
rename from src/Body2.tsx
rename to src/Selected.tsx
index c5a9dc6..5d33311 100644
--- a/src/Body2.tsx
+++ b/src/Selected.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import "./Body1.css"
+import "./thank.css"
 
 const Selected = () => {
     return (
diff --git a/src/Body1.css b/src/thank.css
similarity index 100%
rename from src/Body1.css
rename to src/thank.css
diff --git a/src/Body1.tsx b/src/thank.tsx
similarity index 87%
rename from src/Body1.tsx
rename to src/thank.tsx
index 4084327..fda49ee 100644
--- a/src/Body1.tsx
+++ b/src/thank.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import "./Body1.css"
+import "./thank.css"
 
-const Body1 = () => {
+const thank = () => {
     return (
         
         <div className="Bodyt" >
@@ -15,4 +15,4 @@ const Body1 = () => {
     )
 }
 
-export default Body1
\ No newline at end of file
+export default thank
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 935b2d5..e05cf8f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2649,6 +2649,54 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/d3-color@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.0.2.tgz#53f2d6325f66ee79afd707c05ac849e8ae0edbb0"
+  integrity sha512-WVx6zBiz4sWlboCy7TCgjeyHpNjMsoF36yaagny1uXfbadc9f+5BeBf7U+lRmQqY3EHbGQpP8UdW8AC+cywSwQ==
+
+"@types/d3-interpolate@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc"
+  integrity sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-path@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.0.tgz#939e3a784ae4f80b1fde8098b91af1776ff1312b"
+  integrity sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==
+
+"@types/d3-path@^1":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-1.0.9.tgz#73526b150d14cd96e701597cbf346cfd1fd4a58c"
+  integrity sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==
+
+"@types/d3-scale@^4.0.0":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.1.tgz#fbe8238e2eff27af577d2b7d0b933ae50a546970"
+  integrity sha512-GDuXcRcR6mKcpUVMhPNttpOzHi2dP6YcDqLZYSZHgwTZ+sfCa8e9q0VEBwZomblAPNMYpVqxojnSyIEb4s/Pwg==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-shape@^1":
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-1.3.8.tgz#c3c15ec7436b4ce24e38de517586850f1fea8e89"
+  integrity sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==
+  dependencies:
+    "@types/d3-path" "^1"
+
+"@types/d3-shape@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.0.2.tgz#4b1ca4ddaac294e76b712429726d40365cd1e8ca"
+  integrity sha512-5+ButCmIfNX8id5seZ7jKj3igdcxx+S9IDBiT35fQGTLZUfkFgTv+oBH34xgeoWDKpWcMITSzBILWQtBoN5Piw==
+  dependencies:
+    "@types/d3-path" "*"
+
+"@types/d3-time@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819"
+  integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
+
 "@types/eslint@^7.2.6":
   version "7.2.6"
   resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.6.tgz#5e9aff555a975596c03a98b59ecd103decc70c3c"
@@ -2826,6 +2874,19 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/recharts@^1.8.20":
+  version "1.8.20"
+  resolved "https://registry.yarnpkg.com/@types/recharts/-/recharts-1.8.20.tgz#cb028430a7df1aa163b41cea291a414e77c95cc8"
+  integrity sha512-pxHNh404uxhv2oTCF5rWrca2Nl32g8cvetJsy8YnznlfNZtvo7Hgk2zQjkPJeefQAKRIDfCtjE2LllSeW9uoJA==
+  dependencies:
+    "@types/d3-shape" "^1"
+    "@types/react" "*"
+
+"@types/resize-observer-browser@^0.1.6":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.6.tgz#d8e6c2f830e2650dc06fe74464472ff64b54a302"
+  integrity sha512-61IfTac0s9jvNtBCpyo86QeaN8qqpMGHdK0uGKCCIy2dt5/Yk84VduHIdWAcmkC5QvdkPL0p5eWYgUZtHKKUVg==
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -4520,6 +4581,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -5075,6 +5141,11 @@ css-tree@^1.1.2:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
+css-unit-converter@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
+  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
+
 css-vendor@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
@@ -5234,6 +5305,67 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+"d3-array@2 - 3", "d3-array@2.10.0 - 3":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.0.4.tgz#60550bcc9818be9ace88d269ccd97038fc399b55"
+  integrity sha512-ShFl90cxNqDaSynDF/Bik/kTzISqePqU3qo2fv6kSJEvF7y7tDCDpcU6WiT01rPO6zngZnrvJ/0j4q6Qg+5EQg==
+  dependencies:
+    internmap "1 - 2"
+
+"d3-color@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.0.1.tgz#03316e595955d1fcd39d9f3610ad41bb90194d0a"
+  integrity sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==
+
+"d3-format@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.0.1.tgz#e41b81b2ab79277141ec1404aa5d05001da64084"
+  integrity sha512-hdL7+HBIohpgfolhBxr1KX47VMD6+vVD/oEFrxk5yhmzV2prk99EkFKYpXuhVkFpTgHdJ6/4bYcjdLPPXV4tIA==
+
+"d3-interpolate@1.2.0 - 3", d3-interpolate@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+"d3-path@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.0.1.tgz#f09dec0aaffd770b7995f1a399152bf93052321e"
+  integrity sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==
+
+d3-scale@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.1.tgz#c65aa7a357e4f58954a66e1edacc712bab4b1034"
+  integrity sha512-akUAsUujCFnw6Sf1dF7y/FXTxz+VvEIOB3ValKtLhNrzFp8q5wPO3VCAmsbCLJWRTxyJCZDoooodjOI1plFqlw==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
+d3-shape@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.0.1.tgz#9ccdfb28fd9b0d12f2d8aec234cd5c4a9ea27931"
+  integrity sha512-HNZNEQoDhuCrDWEc/BMbF/hKtzMZVoe64TvisFLDp2Iyj0UShB/E6/lBsLlJTfBMbYgftHj90cXJ0SEitlE6Xw==
+  dependencies:
+    d3-path "1 - 3"
+
+"d3-time-format@2 - 4":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.0.0.tgz#930ded86a9de761702344760d8a25753467f28b7"
+  integrity sha512-nzaCwlj+ZVBIlFuVOT1RmU+6xb/7D5IcnhHzHQcBgS/aTa5K9fWZNN5LCXA27LgF5WxoSNJqKBbLcGMtM6Ca6A==
+  dependencies:
+    d3-time "1 - 3"
+
+"d3-time@1 - 3", "d3-time@2.1.1 - 3":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.0.0.tgz#65972cb98ae2d4954ef5c932e8704061335d4975"
+  integrity sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==
+  dependencies:
+    d3-array "2 - 3"
+
 d@1, d@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
@@ -5311,6 +5443,11 @@ decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
+decimal.js-light@^2.4.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
+  integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
+
 decimal.js@^10.2.0:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.1.tgz#238ae7b0f0c793d3e3cea410108b35a2c01426a3"
@@ -5546,6 +5683,13 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-helpers@^5.0.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
@@ -6160,7 +6304,7 @@ eventemitter3@^3.1.0:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
   integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
 
-eventemitter3@^4.0.0:
+eventemitter3@^4.0.0, eventemitter3@^4.0.1:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -6359,6 +6503,11 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-equals@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-2.0.3.tgz#7039b0a039909f345a2ce53f6202a14e5f392efc"
+  integrity sha512-0EMw4TTUxsMDpDkCg0rXor2gsg+npVrMIHbEhvD0HZyIhUX6AktC/yasm+qKwfyswd06Qy95ZKk8p2crTo0iPA==
+
 fast-glob@^3.1.1:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
@@ -7504,6 +7653,11 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -8944,6 +9098,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.get@^4:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -9009,6 +9168,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -10918,7 +11082,7 @@ postcss-unique-selectors@^4.0.1:
     postcss "^7.0.0"
     uniqs "^2.0.0"
 
-postcss-value-parser@^3.0.0:
+postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@@ -11176,7 +11340,7 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.2.tgz#abf64491e6ecf0f38a6502403d4cda04f372dfd3"
   integrity sha512-dB15eXv3p2jDlbOiNLyMabYg1/sXvppd8DP2J3EOCQ0AkuSXCW2tP7mnVouVLJKgUMY6yP0kcQDVpLCN13h4Xg==
 
-raf@^3.4.1:
+raf@^3.4.0, raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
   integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -11284,6 +11448,11 @@ react-icons@^4.2.0:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
   integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
 
+react-is@16.10.2:
+  version "16.10.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab"
+  integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -11299,11 +11468,26 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-resize-detector@^6.6.3:
+  version "6.7.6"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-6.7.6.tgz#4416994e5ead7eba76606e3a248a1dfca49b67a3"
+  integrity sha512-/6RZlul1yePSoYJxWxmmgjO320moeLC/khrwpEVIL+D2EjLKhqOwzFv+H8laMbImVj7Zu4FlMa0oA7au3/ChjQ==
+  dependencies:
+    "@types/resize-observer-browser" "^0.1.6"
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+    resize-observer-polyfill "^1.5.1"
+
 react-router-dom@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.1.tgz#34af8b551a4ce17487d3f80e651b91651978dff6"
@@ -11399,6 +11583,25 @@ react-scripts@4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-smooth@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.0.tgz#561647b33e498b2e25f449b3c6689b2e9111bf91"
+  integrity sha512-wK4dBBR6P21otowgMT9toZk+GngMplGS1O5gk+2WSiHEXIrQgDvhR5IIlT74Vtu//qpTcipkgo21dD7a7AUNxw==
+  dependencies:
+    fast-equals "^2.0.0"
+    raf "^3.4.0"
+    react-transition-group "2.9.0"
+
+react-transition-group@2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
+  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+  dependencies:
+    dom-helpers "^3.4.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
 react-transition-group@^4.4.0:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -11498,6 +11701,33 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+recharts-scale@^0.4.4:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
+  integrity sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==
+  dependencies:
+    decimal.js-light "^2.4.1"
+
+recharts@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.1.3.tgz#f7e82b274a569ca3c9665570bd6d4e78a0e8f24e"
+  integrity sha512-M0i8x+NKI2Bu/DTGm0LH3FzOhk0YJ4dmBY43YX/KIV82CXfkwkJ07obkje8yJbjdKMjEPZnS5K0XdP6VLx/hPw==
+  dependencies:
+    "@types/d3-interpolate" "^3.0.0"
+    "@types/d3-scale" "^4.0.0"
+    "@types/d3-shape" "^3.0.0"
+    classnames "^2.2.5"
+    d3-interpolate "^3.0.0"
+    d3-scale "^4.0.0"
+    d3-shape "^3.0.0"
+    eventemitter3 "^4.0.1"
+    lodash "^4.17.19"
+    react-is "16.10.2"
+    react-resize-detector "^6.6.3"
+    react-smooth "^2.0.0"
+    recharts-scale "^0.4.4"
+    reduce-css-calc "^2.1.8"
+
 recursive-readdir@2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
@@ -11513,6 +11743,14 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+reduce-css-calc@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
+  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -11746,6 +11984,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"