diff --git a/components/ChapterDirectory/ChapterDirectory.component.jsx b/components/ChapterDirectory/ChapterDirectory.component.jsx
index 1afdec2f..16bb8c77 100644
--- a/components/ChapterDirectory/ChapterDirectory.component.jsx
+++ b/components/ChapterDirectory/ChapterDirectory.component.jsx
@@ -42,13 +42,12 @@ const ChapterDirectory = ({
         );
     setStartedAChapter(result);
   }, [locationDetails]);
-
   return (
     <div className={styles.chapterDirectory}>
       {startedAChapter ? (
         <ChapterMenu userData={userData} active={active} />
       ) : (
-        <InterestForm setOpen={setOpen} token={token} />
+        <InterestForm setOpen={setOpen} userData={userData} token={token} />
       )}
       <div className={styles.joinWrapper}>
         <div className={styles.joinOuterContainer}>
diff --git a/components/ChapterDirectory/ChapterDirectory.module.css b/components/ChapterDirectory/ChapterDirectory.module.css
index 1d1bc312..63e17d75 100644
--- a/components/ChapterDirectory/ChapterDirectory.module.css
+++ b/components/ChapterDirectory/ChapterDirectory.module.css
@@ -4,8 +4,8 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  padding: 4em 0.5em 3em 0.5em;
-  background: linear-gradient(90deg, #ff00b8 0%, #ff655b 50.8%, #ffc700 100%);
+  padding: 10em 0.5em 3em 0.5em;
+  font-family: 'Poppins', sans-serif;
 }
 
 .joinWrapper {
@@ -18,13 +18,12 @@
 
 .joinOuterContainer {
   width: 100%;
-  border: 2px solid rgb(255, 255, 255, 0.5);
-  padding: 1em;
 }
 
 .joinContainer {
   width: 100%;
-  background: rgba(255, 255, 255, 0.7);
+  border-radius: 16px;
+  background-color: #1C1D37;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -42,23 +41,24 @@
   margin-bottom: 1em;
   font-size: 1.2rem;
   font-weight: 500;
-  color: black;
+  color: rgb(255, 255, 255);
 }
 
 .joinButton {
-  background: #151371;
-  padding: 8px 24px;
-  border-radius: 8px;
-  cursor: pointer;
-  color: white;
+  color: #ffffff;
+  padding: 0.3em 0.8em;
   text-transform: capitalize;
-  transition: all 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  background: #6938EF;
+  border-radius: 100px;
+  font-size: 18px;
+  font-weight: 500;
+  padding: 12px 30px;
 }
 
 .joinButton:hover {
-  background: white;
-  border: 2px solid #151371;
-  color: #151371;
+  /* background: white;
+  border: 2px solid #151371; */
+  color: #fff; 
 }
 
 @media screen and (max-width: 1024px) {
diff --git a/components/ChapterMenu/ChapterMenu.component.jsx b/components/ChapterMenu/ChapterMenu.component.jsx
index 5d0d7cfd..80b62a9b 100644
--- a/components/ChapterMenu/ChapterMenu.component.jsx
+++ b/components/ChapterMenu/ChapterMenu.component.jsx
@@ -17,7 +17,9 @@ const ChapterMenu = () => (
           />
           <div className={styles.text}>Find Advisor</div>
         </div>
-        <meter className={styles.meter} value="5" min="0" max="10" />
+        <div className={styles.meter}>
+          <div />
+        </div>
       </section>
 
       <section className={styles.item3}>
@@ -30,7 +32,9 @@ const ChapterMenu = () => (
           />
           <div className={styles.text}>Hold An Interest Meeting</div>
         </div>
-        <meter className={styles.meter} value="5" min="0" max="10" />
+        <div className={styles.meter}>
+          <div />
+        </div>
       </section>
 
       <section className={styles.item4}>
@@ -42,7 +46,9 @@ const ChapterMenu = () => (
           />
           <div className={styles.text}>Sign Chapter Agreement Form</div>
         </div>
-        <meter className={styles.meter} value="5" min="0" max="10" />
+        <div className={styles.meter}>
+          <div />
+        </div>
       </section>
 
       <section className={styles.item5}>
@@ -54,7 +60,9 @@ const ChapterMenu = () => (
           />
           <div className={styles.text}>Find Your Team</div>
         </div>
-        <meter className={styles.meter} value="5" min="0" max="10" />
+        <div className={styles.meter}>
+          <div />
+        </div>
       </section>
 
       <section className={styles.item6}>
@@ -66,7 +74,9 @@ const ChapterMenu = () => (
           />
           <div className={styles.text}>Get On Technologes</div>
         </div>
-        <meter className={styles.meter} value="5" min="0" max="10" />
+        <div className={styles.meter}>
+          <div />
+        </div>
       </section>
 
       <section className={styles.item7}>
@@ -78,7 +88,9 @@ const ChapterMenu = () => (
           />
           <div className={styles.text}>Develop Socially Impactful Project</div>
         </div>
-        <meter className={styles.meter} value="5" min="0" max="10" />
+        <div className={styles.meter}>
+          <div />
+        </div>
       </section>
 
       <section className={styles.item8}>
@@ -92,7 +104,9 @@ const ChapterMenu = () => (
             Host Meetings Workshops Carreer Development
           </div>
         </div>
-        <meter className={styles.meter} value="5" min="0" max="10" />
+        <div className={styles.meter}>
+          <div />
+        </div>
       </section>
     </div>
   </div>
diff --git a/components/ChapterMenu/ChapterMenu.module.css b/components/ChapterMenu/ChapterMenu.module.css
index 909f58df..6ddb6ff8 100644
--- a/components/ChapterMenu/ChapterMenu.module.css
+++ b/components/ChapterMenu/ChapterMenu.module.css
@@ -8,8 +8,16 @@
 
 .meter {
   width: 100%;
+  height: 8px;
+  background: rgba(82, 85, 141, 0.61);
+  border-radius: 17px;
+  display: flex;
+}
+.meter div{
+  border-radius: 17px;
+  height: 100%;
+  background: linear-gradient(270deg, #FD05B3 1.84%, rgba(253, 5, 179, 0.15) 100%);
 }
-
 .menuContainer {
   width: 100%;
   max-width: 64em;
@@ -26,11 +34,11 @@
   flex-direction: column;
   text-align: center;
   border-radius: 0.5em;
-  background: #282828;
+  background: #1C1D37;
 }
 
 .menuContainer > section:first-child {
-  background: #ffc700;
+  background: #6938EF;
 }
 
 .iconAndTextContainer {
@@ -52,8 +60,9 @@
 .item1 {
   padding: 1em 0;
   text-transform: uppercase;
+  font-size: 18px;
   font-weight: 500;
-  color: #151371;
+  color: #fff;
 }
 
 .item4,
@@ -106,10 +115,6 @@
   grid-row: 5/8;
 }
 
-.meter::-webkit-meter-optimum-value {
-  background: #ff655b;
-  height: 50px;
-}
 
 @media screen and (max-width: 1024px) {
   .menuContainer {
diff --git a/components/InterestForm/FormValidations.js b/components/InterestForm/FormValidations.js
index f1923a5c..d2b3c20e 100644
--- a/components/InterestForm/FormValidations.js
+++ b/components/InterestForm/FormValidations.js
@@ -1,32 +1,38 @@
 const validateSection_1 = (values) => {
   if (values.profession !== 'student' && values.profession.length !== 0) return {};
   if (values.profession.length === 0 && values.profession !== 'student') return { profession: 'Please select a profession' };
-  if (values.level.length === 0) return { level: 'Please select your level of education' };
-  if (values.school.length === 0) return { school: 'Please tell us the name of your school' };
   return {};
 };
 
 const validateSection_2 = (values) => {
-  if (values.interest.length === 0) return { interest: 'Please pick atleast one of your interests' };
+  if (values.level.length === 0) return { level: 'Please select your level of education' };
   return {};
 };
 
 const validateSection_3 = (values) => {
-  if (values.passion.length === 0) return { passion: 'Please pick atleast one of your passions' };
+  if (values.location.length === 0 || values.country.length === 0 || values.city.length === 0) return { school: 'Please fill in the missing fields' };
   return {};
 };
 
 const validateSection_4 = (values) => {
-  if (values.reasons.length === 0) return { reasons: 'Please tell us your reasons' };
+  if (values.interest.length === 0) return { interest: 'Please pick atleast one of your interests' };
   return {};
 };
-
 const validateSection_5 = (values) => {
-  if (values.support.length === 0) return { support: 'Please tells us how we may support you' };
+  if (values.passion.length === 0) return { passion: 'Please pick atleast one of your passions' };
+  return {};
+};
+const validateSection_6 = (values) => {
+  if (values.description.length === 0) return { reasons: 'Please fill in the missing fields' };
   return {};
 };
 
 const validateSection_7 = (values) => {
+  if (values.mission.length === 0) return { support: 'Please fill in the missing fields' };
+  return {};
+};
+
+const validateSection_9 = (values) => {
   if (values.contact.length === 0) return { contact: 'Please select how we may contact you' };
   if (values.email) {
     if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
@@ -37,7 +43,7 @@ const validateSection_7 = (values) => {
 };
 
 export const validateField = ({
-  section_1, section_2, section_3, section_4, section_5, section_7,
+  section_1, section_2, section_3, section_4, section_5, section_7, section_6,
 }, values) => {
   if (section_1) {
     return validateSection_1(values);
@@ -49,9 +55,16 @@ export const validateField = ({
     return validateSection_4(values);
   } if (section_5) {
     return validateSection_5(values);
-  } if (section_7) {
+  }
+  if (section_6) {
+    return validateSection_6(values);
+  }
+  if (section_7) {
     return validateSection_7(values);
   }
+  // if (section_8) {
+  //   return validateSection_8(values);
+  // }
   return {};
 };
 
@@ -69,7 +82,11 @@ export const validateStepper = (sections, values, nextStep) => {
       return { reasons: 'Field 4 is required' };
     } if (sectionsToArray[i] === 'section_5' && Object.keys(validateSection_5(values)).length !== 0) {
       return { support: 'Field 5 is required' };
-    } if (sectionsToArray[i] === 'section_7' && Object.keys(validateSection_7(values)).length !== 0) {
+    }
+    if (sectionsToArray[i] === 'section_7' && Object.keys(validateSection_7(values)).length !== 0) {
+      return { contact: 'Field 7 is required' };
+    }
+    if (sectionsToArray[i] === 'section_9' && Object.keys(validateSection_9(values)).length !== 0) {
       return { contact: 'Field 7 is required' };
     }
   }
@@ -78,10 +95,11 @@ export const validateStepper = (sections, values, nextStep) => {
 
 export const validateForm = (values) => {
   if (Object.entries(validateSection_1(values)).length !== 0) return validateSection_1(values);
-  if (Object.entries(validateSection_2(values)).length !== 0) return validateSection_2(values);
   if (Object.entries(validateSection_3(values)).length !== 0) return validateSection_3(values);
   if (Object.entries(validateSection_4(values)).length !== 0) return validateSection_4(values);
   if (Object.entries(validateSection_5(values)).length !== 0) return validateSection_5(values);
+  if (Object.entries(validateSection_6(values)).length !== 0) return validateSection_6(values);
   if (Object.entries(validateSection_7(values)).length !== 0) return validateSection_7(values);
+  if (Object.entries(validateSection_9(values)).length !== 0) return validateSection_9(values);
   return {};
 };
diff --git a/components/InterestForm/InterestForm.component.jsx b/components/InterestForm/InterestForm.component.jsx
index a917ac6d..eb944bb4 100644
--- a/components/InterestForm/InterestForm.component.jsx
+++ b/components/InterestForm/InterestForm.component.jsx
@@ -1,58 +1,110 @@
 import axios from 'axios';
 import React, { useState } from 'react';
 import Select from 'react-select';
+import Geocode from 'react-geocode';
 import { errorToast, successToast } from '../../contexts/utils/toasts';
-import { validateField, validateForm, validateStepper } from './FormValidations';
+import { validateField, validateForm } from './FormValidations';
 import styles from './InterestForm.module.css';
+import DropdownIndicator from '../settings/DropdownIndicator';
+import {
+  countries, passionOptions, interestOptions, countriesLoaction,
+} from './Options';
 
-const interestOptions = [
-  { label: 'Development', value: 'development' },
-  { label: 'Design', value: 'design' },
-  { label: 'Frontend', value: 'frontend' },
-  { label: 'Backend', value: 'backend' },
-  { label: 'Research', value: 'research' },
-  { label: 'Marketing', value: 'marketing' },
-  { label: 'Intructing', value: 'intructing' },
-  { label: 'Project Management', value: 'Project management' },
-];
+const customStyles = {
+  option: (provided, state) => ({
+    ...provided,
+    color: 'white',
+    border: state.isSelected ? '2px solid #6938EF' : state.isFocused ? '2px solid #6938EF' : '2px solid transparent',
+    background: '#1C1D37',
+    borderRadius: '8px',
+    padding: 20,
+    marginTop: 8,
+    width: '100%',
+    cursor: 'pointer',
+    fontWeight: 'bold',
+    ':active': {
+      // ...styles[':active'],
+      background: '#1C1D37',
+    },
+  }),
+  control: () => ({
+    // none of react-select's styles are passed to <Control />
+    // width: ,
+    display: 'flex',
+    height: '100%',
+  }),
+  menu: (provided) => ({
+    ...provided,
+    // borderBottom: '1px dotted pink',
+    background: '#1C1D37',
+    padding: 5,
+    border: '1px solid #6938EF',
+    width: '100%',
+    textAlign: 'center',
+    // marginLeft: '-70px',
+  }),
+  container: (provided) => ({
+    ...provided,
+    height: '60px',
+    margin: '0 !important',
+    cursor: 'pointer',
+    paddingLeft: '8px',
+    border: '1px solid #6938EF',
+    borderRadius: '16px',
+  }),
+  multiValueLabel: (provided) => ({
+    ...provided,
+    color: 'white',
+  }),
+  multiValue: (provided) => ({
+    ...provided,
+    border: '1px solid #6938EF',
+    borderRadius: '100px',
+    background: 'transparent',
+    padding: '5px',
+  }),
+  multiValueRemove: (provided) => ({
+    ...provided,
+    color: 'white',
+  }),
+  indicatorSeparator: (provided) => ({
+    ...provided,
+    display: 'none',
+  }),
+  singleValue: (provided) => {
+    const opacity = 1;
+    const color = '#fff';
+    const transition = 'opacity 300ms';
 
-const passionOptions = [
-  { label: 'Technology', value: 'technology' },
-  { label: 'Nature', value: 'nature' },
-  { label: 'Music', value: 'music' },
-  { label: 'Sports', value: 'sports' },
-  { label: 'Entreprenuership', value: 'entreprenuership' },
-  { label: 'Reading', value: 'reading' },
-  { label: 'Volunteering', value: 'volunteering' },
-  { label: 'Arts', value: 'arts' },
-  { label: 'Dancing', value: 'dancing' },
-  { label: 'Comedy', value: 'comedy' },
-  { label: 'Gaming', value: 'gaming' },
-  { label: 'Cooking', value: 'cooking' },
-  { label: 'Animals', value: 'animals' },
-  { label: 'Travel', value: 'travel' },
-];
+    return {
+      ...provided, opacity, transition, color,
+    };
+  },
+};
 
-const InterestForm = function ({ token }) {
+const InterestForm = ({ token, userData }) => {
   const [values, setValues] = useState({
     status: 'pending',
     interest: [],
     passion: [],
     profession: '',
     level: '',
-    school: '',
-    reasons: '',
-    support: '',
+    location: '',
+    description: '',
+    mission: '',
     contact: '',
     phone: '',
     email: '',
+    country: '',
+    lat: '',
+    lon: '',
+    city: '',
     interestedMembers: 0,
   });
 
   const [submitError, setSubmitError] = useState('');
   const [errors, setErrors] = useState({});
   const [isSubmit, toggleSubmit] = useState(false);
-  const [activeButton, setActiveButton] = useState('section_1');
   const [sections, setSections] = useState({
     section_1: true,
     section_2: false,
@@ -61,8 +113,12 @@ const InterestForm = function ({ token }) {
     section_5: false,
     section_6: false,
     section_7: false,
+    section_8: false,
+    section_9: false,
   });
 
+  Geocode.setApiKey('AIzaSyAj-BtIthMo51RCnyjesNP11pF_R07qbMA&callback');
+
   const handleChange = (event) => {
     const { name } = event.target;
     const { value } = event.target;
@@ -88,9 +144,28 @@ const InterestForm = function ({ token }) {
     const result = (validateField(sections, values));
     handleError(result);
     if (Object.keys(result).length === 0) {
-      const newSections = { ...sections };
-      const newSectionsArray = Object.keys(newSections);
+      let newSections = { ...sections };
+      let newSectionsArray = Object.keys(newSections);
+      if (values.profession === 'Professional') {
+        newSectionsArray = newSectionsArray.filter((e) => e !== 'section_2');
+        delete newSections.section_2;
+      } else if (values.profession === 'student' && newSections.section_1) {
+        newSections = {
+          section_1: true,
+          section_2: false,
+          section_3: false,
+          section_4: false,
+          section_5: false,
+          section_6: false,
+          section_7: false,
+          section_8: false,
+          section_9: false,
+        };
+        newSectionsArray = Object.keys(newSections);
+      }
       let id = null;
+      setSections(newSections);
+
       newSectionsArray.forEach((_, idx, arr) => {
         if (newSections[arr[idx]]) {
           id = idx;
@@ -98,9 +173,32 @@ const InterestForm = function ({ token }) {
       });
       newSections[newSectionsArray[id]] = false;
       newSections[newSectionsArray[id + 1]] = true;
-      setActiveButton(newSectionsArray[id + 1]);
       setSections(newSections);
     }
+    if (sections.section_4 === true) {
+      // Get latitude & longitude from address.
+      Geocode.setRegion(values.country.value.toLowerCase());
+      Geocode.fromAddress(values.location).then(
+        (response) => {
+          const { lat, lng } = response.results[0].geometry.location;
+          const newValue = values;
+          newValue.lat = lat;
+          newValue.lon = lng;
+          setValues(newValue);
+        },
+        (error) => {
+          countriesLoaction.forEach((country) => {
+            if (country.code === values.country.value) {
+              const newValue = values;
+              newValue.lat = country.latitude;
+              newValue.lon = country.longitude;
+              setValues(newValue);
+            }
+          });
+          console.error(error);
+        },
+      );
+    }
   };
 
   const handlePrev = () => {
@@ -115,12 +213,19 @@ const InterestForm = function ({ token }) {
     });
     newSections[newSectionsArray[id]] = false;
     newSections[newSectionsArray[id - 1]] = true;
-    setActiveButton(newSectionsArray[id - 1]);
     setSections(newSections);
   };
-
+  const getWidth = (stats) => {
+    let step = 0;
+    const arr = Object.values(stats);
+    step = arr.indexOf(true);
+    step /= (arr.length - 1);
+    step = `${step * 100}%`;
+    return step;
+  };
   const handleSubmit = () => {
     setErrors({});
+    console.log(values);
     const result = (validateForm(values));
     if (Object.keys(result).length === 0) {
       let _values = { ...values };
@@ -138,14 +243,36 @@ const InterestForm = function ({ token }) {
       });
 
       if (token) {
-        axios.post(`${process.env.BASE_URI}/chapter`, {
-          ..._values,
-        }, {
+        console.log(_values);
+        toggleSubmit(true);
+
+        // Main St, Harrisonburg, US
+        const inputs = {
+          location: _values.location,
+          LocationName: `${_values.city}, ${_values.country.value}`,
+          chapter_leader: `${userData.firstName} ${userData.lastName}`,
+          description: _values.description,
+          mission: _values.mission,
+          latitude: _values.lat,
+          longitude: _values.longitude,
+          member_size: '1',
+          phone: _values.phone,
+          email: _values.email,
+          interestedMembers: _values.interestedMembers,
+          profession: _values.profession,
+          passion: _values.passion,
+          interest: _values.interest,
+          // eslint-disable-next-line new-cap
+          date_founded: new Date().toDateString(),
+        };
+        setSubmitError('');
+        axios.post('http://localhost:5000/api/v1/location', inputs, {
           headers: {
             Authorization: ` Bearer ${token}`,
           },
         })
-          .then(() => {
+          .then((res) => {
+            console.log(res.data.data);
             setSubmitError('');
             successToast('Your chapter was successfully created');
             toggleSubmit(true);
@@ -163,45 +290,6 @@ const InterestForm = function ({ token }) {
       handleError(result);
     }
   };
-
-  const handleStepperClick = (step) => {
-    const result = (validateStepper(sections, values, step));
-    if (Object.keys(result).length === 0) {
-      const newSections = { ...sections };
-      Object.keys(newSections).forEach((section_key) => {
-        if (section_key === step) {
-          newSections[section_key] = true;
-          setActiveButton(section_key);
-        } else {
-          newSections[section_key] = false;
-        }
-      });
-      setSections(newSections);
-    } else {
-      // handleError(result)
-    }
-  };
-
-  const getButtonStatus = (button) => {
-    const sectionsToArray = Object.keys(sections);
-    if (sectionsToArray.indexOf(activeButton) > sectionsToArray.indexOf(button)) {
-      return { background: 'pink' };
-    } if (sectionsToArray.indexOf(activeButton) < sectionsToArray.indexOf(button)) {
-      return { background: '#d1d3d1' };
-    }
-    return { background: '#ff00b8' };
-  };
-
-  const getLineStatus = (button) => {
-    const sectionsToArray = Object.keys(sections);
-    if (sectionsToArray.indexOf(activeButton) > sectionsToArray.indexOf(button)) {
-      return { background: 'pink' };
-    } if (sectionsToArray.indexOf(activeButton) < sectionsToArray.indexOf(button)) {
-      return { background: '#d1d3d1' };
-    }
-    return { background: 'pink' };
-  };
-
   return (
     <div className={styles.formWrapper}>
       <div className={styles.formContainer}>
@@ -219,95 +307,125 @@ const InterestForm = function ({ token }) {
             </div>
           </div>
           )}
-        <div className={styles.title}>Interest Form</div>
         {
           !isSubmit
             ? (
               <>
+                <div className={styles.stepperWrapper}>
+                  <div style={{ width: getWidth(sections) }} className={styles.stepperContainer} />
+                </div>
+                <div className={styles.questionNum}>
+                  {' '}
+                  {`Question ${(Object.values(sections).indexOf(true)) + 1}`}
+                </div>
                 <form onSubmit={(handleSubmit)} className={styles.form}>
+
                   <section className={styles.question} style={{ display: sections.section_1 ? 'block' : 'none' }}>
-                    <label className={styles.label}>1. Are you a student or a professional?</label>
+                    <label className={styles.label}>Who are you?</label>
+                    <div className={`${styles.professionLabel}`}>
+                      <div
+                        className={`${styles.innerLabel}`}
+                        onClick={() => handleChange({ target: { name: 'profession', value: 'student' } })}
+                      >
+                        <img
+                          src="/assets/images/chapter/student.png"
+                          style={{ mixBlendMode: values.profession !== 'student' ? 'luminosity' : 'unset' }}
+                          alt="student"
+                        />
+                        <div>
+                          Student
+                        </div>
+                      </div>
+                      <div
+                        className={styles.innerLabel}
+                        onClick={() => { setValues({ ...values, location: '', level: '' }); handleChange({ target: { name: 'profession', value: 'Professional' } }); }}
+                      >
+                        <img
+                          src="/assets/images/chapter/pro.png"
+                          style={{ mixBlendMode: values.profession !== 'Professional' ? 'luminosity' : 'unset' }}
+                          alt="Professional"
+                        />
+                        <div>
+                          Professional
+                        </div>
+                      </div>
+                      {errors.profession && (
+                        <div className={styles.inputFeedback}>{errors.profession}</div>
+                      )}
+                    </div>
+                  </section>
+                  <section className={styles.question} style={{ display: sections.section_2 ? 'block' : 'none' }}>
+                    <label className={`${styles.label}`}>Are you a high school or college student?</label>
                     <div>
-                      <div className={styles.innerLabel}>
+                      <div className={`${styles.innerLabel} ${styles.radioField}`}>
                         <input
                           type="radio"
-                          name="profession"
-                          value="student"
+                          name="level"
+                          value="high school student"
                           className={styles.radio}
                           onChange={handleChange}
                         />
-                        <span>Student</span>
+                        <span>High School Student</span>
                       </div>
-                      <div className={styles.innerLabel}>
+                      <div className={`${styles.innerLabel} ${styles.radioField}`}>
                         <input
                           type="radio"
-                          name="profession"
-                          value="Professional"
+                          name="level"
+                          value="college student"
                           className={styles.radio}
-                          onChange={(e) => { setValues({ ...values, school: '', level: '' }); handleChange(e); }}
+                          onChange={handleChange}
                         />
-                        <span>Professional</span>
+                        <span>College Student</span>
                       </div>
-                      {errors.profession && (
-                      <div className={styles.inputFeedback}>{errors.profession}</div>
+                      {errors.level && (
+                        <div className={styles.inputFeedback}>{errors.level}</div>
                       )}
                     </div>
                   </section>
+                  <section className={styles.question} style={{ display: sections.section_3 ? 'block' : 'none' }}>
+                    <label className={styles.label} htmlFor="location">Please enter the location name?</label>
+                    <input
+                      name="location"
+                      type="text"
+                      placeholder="School Name (e.g University Of Miami)..."
+                      value={values.location}
+                      onChange={handleChange}
+                      onBlur={handleBlur}
+                      className={styles.textInput}
+                    />
+                    <label style={{ marginTop: '30px' }} className={styles.label} htmlFor="country">Please Select country?</label>
+                    <div className={styles.select}>
+                      <Select
+                        styles={customStyles}
+                        components={{ DropdownIndicator }}
+                        style={{ zIndex: 10 }}
+                        name="country"
+                        value={values.country}
+                        options={countries}
+                        onChange={(e) => handleChange({ target: { name: 'country', value: e } })}
+                      />
+                      <label style={{ marginTop: '30px' }} className={styles.label} htmlFor="city">Please enter the city?</label>
+                      <input
+                        name="city"
+                        type="text"
+                        placeholder="Harrisonburg"
+                        value={values.city}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                        className={styles.textInput}
+                      />
+                    </div>
+                    {errors.school && (
+                    <div className={styles.inputFeedback}>{errors.school}</div>
+                    )}
+                  </section>
 
-                  {
-                  values.profession === 'student' ? (
-                    <>
-                      <section className={styles.question} style={{ display: sections.section_1 ? 'block' : 'none' }}>
-                        <label className={`${styles.label}`}>1-1. Are you a high school or college student?</label>
-                        <div>
-                          <div className={styles.innerLabel}>
-                            <input
-                              type="radio"
-                              name="level"
-                              value="high school student"
-                              className={styles.radio}
-                              onChange={handleChange}
-                            />
-                            <span>High School Student</span>
-                          </div>
-                          <div className={styles.innerLabel}>
-                            <input
-                              type="radio"
-                              name="level"
-                              value="college student"
-                              className={styles.radio}
-                              onChange={handleChange}
-                            />
-                            <span>College Student</span>
-                          </div>
-                          {errors.level && (
-                            <div className={styles.inputFeedback}>{errors.level}</div>
-                          )}
-                        </div>
-                      </section>
-
-                      <section className={styles.question} style={{ display: sections.section_1 ? 'block' : 'none' }}>
-                        <label className={styles.label} htmlFor="school">1-2. Please Enter the name of your school.</label>
-                        <input
-                          name="school"
-                          type="text"
-                          value={values.school}
-                          onChange={handleChange}
-                          onBlur={handleBlur}
-                          className={styles.textInput}
-                        />
-                        {errors.school && (
-                          <div className={styles.inputFeedback}>{errors.school}</div>
-                        )}
-                      </section>
-                    </>
-                  ) : null
-                }
-
-                  <section className={styles.question} style={{ display: sections.section_2 ? 'block' : 'none' }}>
-                    <label className={styles.label}>2. What are your fields of interest?</label>
+                  <section className={styles.question} style={{ display: sections.section_4 ? 'block' : 'none' }}>
+                    <label className={styles.label}>What are your fields of interest?</label>
                     <div className={styles.select}>
                       <Select
+                        styles={customStyles}
+                        components={{ DropdownIndicator }}
                         style={{ zIndex: 10 }}
                         closeMenuOnSelect={false}
                         name="interest"
@@ -322,10 +440,12 @@ const InterestForm = function ({ token }) {
                     )}
                   </section>
 
-                  <section className={styles.question} style={{ display: sections.section_3 ? 'block' : 'none' }}>
-                    <label className={styles.label}>3. What are you passionate about?</label>
+                  <section className={styles.question} style={{ display: sections.section_5 ? 'block' : 'none' }}>
+                    <label className={styles.label}>What are you passionate about?</label>
                     <div className={styles.select}>
                       <Select
+                        styles={customStyles}
+                        components={{ DropdownIndicator }}
                         closeMenuOnSelect={false}
                         name="passion"
                         value={values.passion}
@@ -339,13 +459,15 @@ const InterestForm = function ({ token }) {
                     )}
                   </section>
 
-                  <section className={styles.question} style={{ display: sections.section_4 ? 'block' : 'none' }}>
+                  <section className={styles.question} style={{ display: sections.section_6 ? 'block' : 'none' }}>
                     <label className={styles.label}>
-                      4. What is your reason for wanting to start a chapter?
+                      Please give a brief description for the chapter?
+
                     </label>
                     <textarea
-                      name="reasons"
-                      value={values.reasons}
+                      name="description"
+                      placeholder="The reason I’d like to start a chapter is..."
+                      value={values.description}
                       onChange={handleChange}
                       onBlur={handleBlur}
                       className={styles.textareaInput}
@@ -355,13 +477,13 @@ const InterestForm = function ({ token }) {
                     )}
                   </section>
 
-                  <section className={styles.question} style={{ display: sections.section_5 ? 'block' : 'none' }}>
+                  <section className={styles.question} style={{ display: sections.section_7 ? 'block' : 'none' }}>
                     <label className={styles.label}>
-                      5. What kind of support would you like for starting a chapter?
+                      What is your reason for wanting to start a chapter?
                     </label>
                     <textarea
-                      name="support"
-                      value={values.support}
+                      name="mission"
+                      value={values.mission}
                       onChange={handleChange}
                       onBlur={handleBlur}
                       className={styles.textareaInput}
@@ -371,23 +493,45 @@ const InterestForm = function ({ token }) {
                     )}
                   </section>
 
-                  <section className={styles.question} style={{ display: sections.section_6 ? 'block' : 'none' }}>
+                  <section className={styles.question} style={{ display: sections.section_8 ? 'block' : 'none' }}>
                     <label className={styles.label}>
-                      6. How many interested members do you have right now?
+                      How many interested members do you have right now?
                     </label>
-                    <input
-                      name="interestedMembers"
-                      type="number"
-                      min="0"
-                      value={values.interestedMembers}
-                      onChange={handleChange}
-                      onBlur={handleBlur}
-                      className={styles.numberInput}
-                    />
+                    <div className={styles.numberInputContainer}>
+                      <input
+                        name="interestedMembers"
+                        type="text"
+                        min="0"
+                        value={values.interestedMembers}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                        className={styles.numberInput}
+                      />
+                      <div>
+                        <img
+                          src="/assets/images/chapter/arrow-top.svg"
+                          onClick={() => setValues((prevValues) => ({
+                            ...prevValues,
+                            interestedMembers: values.interestedMembers + 1,
+                          }))}
+                          alt="arrow"
+                        />
+                        <img
+                          src="/assets/images/chapter/arrow-down.svg"
+                          onClick={() => setValues((prevValues) => ({
+                            ...prevValues,
+                            interestedMembers:
+                             values.interestedMembers === 0
+                               ? values.interestedMembers : values.interestedMembers - 1,
+                          }))}
+                          alt="arrow"
+                        />
+                      </div>
+                    </div>
                   </section>
 
-                  <section className={styles.question} style={{ display: sections.section_7 ? 'block' : 'none' }}>
-                    <label className={styles.label}>7. Best way of contacting you</label>
+                  <section className={styles.question} style={{ display: sections.section_9 ? 'block' : 'none' }}>
+                    <label className={styles.label}> Best way of contacting you</label>
                     <div>
                       <div className={styles.innerLabel}>
                         <input
@@ -407,7 +551,7 @@ const InterestForm = function ({ token }) {
                           type="email"
                           name="email"
                           placeholder="enter your email address"
-                          className={styles.emailInput}
+                          className={styles.textInput}
                           onChange={handleChange}
                           onBlur={handleBlur}
                         />
@@ -432,7 +576,7 @@ const InterestForm = function ({ token }) {
                           type="tel"
                           name="phone"
                           placeholder="enter your phone number"
-                          className={styles.phoneInput}
+                          className={styles.textInput}
                           onChange={handleChange}
                           onBlur={handleBlur}
                         />
@@ -452,39 +596,22 @@ const InterestForm = function ({ token }) {
                         {' '}
                         Back
                       </div>
-                      <div style={{ display: sections.section_7 ? 'none' : 'block' }} className={`${styles.button} ${styles.next}`} onClick={handleNext}>
+                      <div style={{ display: sections.section_9 ? 'none' : 'block' }} className={`${styles.button} ${styles.next}`} onClick={handleNext}>
                         Next
-                        <i className="fas fa-angle-right" />
                       </div>
-                      <div style={{ display: sections.section_7 ? 'block' : 'none' }} className={`${styles.button} ${styles.submit}`} onClick={handleSubmit}>Submit</div>
+                      <div style={{ display: sections.section_9 ? 'block' : 'none' }} className={`${styles.button} ${styles.next}`} onClick={handleSubmit}>Submit</div>
                     </div>
                   </div>
                 </form>
-                <div className={styles.stepperWrapper}>
-                  <div className={styles.stepperContainer}>
-                    <div className={styles.stepperButtons}>
-                      <div className={styles.stepperButton} style={getButtonStatus('section_1')} onClick={() => handleStepperClick('section_1')}>1</div>
-                      <div className={styles.stepperLine} style={getLineStatus('section_2')} />
-                      <div className={styles.stepperButton} style={getButtonStatus('section_2')} onClick={() => handleStepperClick('section_2')}>2</div>
-                      <div className={styles.stepperLine} style={getLineStatus('section_3')} />
-                      <div className={styles.stepperButton} style={getButtonStatus('section_3')} onClick={() => handleStepperClick('section_3')}>3</div>
-                      <div className={styles.stepperLine} style={getLineStatus('section_4')} />
-                      <div className={styles.stepperButton} style={getButtonStatus('section_4')} onClick={() => handleStepperClick('section_4')}>4</div>
-                      <div className={styles.stepperLine} style={getLineStatus('section_5')} />
-                      <div className={styles.stepperButton} style={getButtonStatus('section_5')} onClick={() => handleStepperClick('section_5')}>5</div>
-                      <div className={styles.stepperLine} style={getLineStatus('section_6')} />
-                      <div className={styles.stepperButton} style={getButtonStatus('section_6')} onClick={() => handleStepperClick('section_6')}>6</div>
-                      <div className={styles.stepperLine} style={getLineStatus('section_7')} />
-                      <div className={styles.stepperButton} style={getButtonStatus('section_7')} onClick={() => handleStepperClick('section_7')}>7</div>
-                    </div>
-                    {/* <div className={styles.stepperLine} /> */}
-                  </div>
-                </div>
+
               </>
             )
             : (
               <section className={styles.thankyouSection}>
-                Thank you for submitting!
+                <img
+                  src="/assets/images/chapter/finished.png"
+                  alt="submitted"
+                />
               </section>
             )
         }
diff --git a/components/InterestForm/InterestForm.module.css b/components/InterestForm/InterestForm.module.css
index de5a16f1..c7332c36 100644
--- a/components/InterestForm/InterestForm.module.css
+++ b/components/InterestForm/InterestForm.module.css
@@ -14,12 +14,13 @@
 .formContainer {
   width: 100%;
   max-width: 64em;
+  padding: 3em 8em;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  border-radius: 0.5em;
-  background-color: white;
+  border-radius: 16px;
+  background-color: #1C1D37;
   position: relative;
 }
 
@@ -27,7 +28,7 @@
   width: 100%;
   padding: 1em;
   text-align: center;
-  background-color:#151371;
+  background-color:#ffffff;
   color: white;
   text-transform: uppercase;
   font-size: 1.2rem;
@@ -38,7 +39,6 @@
 .form {
   width: 100%;
   min-height: 20em;
-  padding: 3em 8em;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -47,7 +47,7 @@
 
 .buttonWrapper {
   width: 100%;
-  padding: 0 1em;
+  /* padding: 0 1em; */
 }
 
 .buttonContainer {
@@ -61,7 +61,7 @@
 
 .button {
   cursor: pointer;
-  position: absolute;
+  /* position: absolute; */
   top: 0;
 }
 
@@ -81,31 +81,45 @@
 
 .next {
   right: 0;
-  border-radius: 0.2em;
-  color: #151371;
-  background-color: #ffa500;
+  margin-left: auto;
+  color: #ffffff;
   padding: 0.3em 0.8em;
   text-transform: capitalize;
+  background: #6938EF;
+  border-radius: 100px;
+  font-size: 18px;
+  font-weight: 500;
+  padding: 12px 30px;
 }
 
 .prev {
+  font-size: 18px;
+  font-weight: 500;
   left: 0;
-  color: #151371;
+  color: #ffffff;
   text-transform: capitalize;
 }
 
 .stepperWrapper {
   width: 100%;
-  max-width: 28em;
-  margin-bottom: 4em;
+  height: 10px;
+  margin-top: 2rem;
+  background: rgba(82, 85, 141, 0.61);
+  border-radius: 17px;
+}
+.questionNum{
+  font-weight: normal;
+  font-size: 20px;
+  color: #CFCFCF;
+  margin-right: auto;
+  margin-bottom: 40px;
+  margin-top: 5px;
 }
-
 .stepperContainer {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
+  width: 14.2857%;
+  background: linear-gradient(270deg, #FD05B3 1.84%, rgba(253, 5, 179, 0.15) 100%);
+  border-radius: 17px;
+  height: 100%;
 }
 
 .stepperLine {
@@ -138,11 +152,10 @@
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  padding-top: 6em;
-  min-height: 24rem;
+  /* min-height: 24rem; */
   font-size: 1rem;
   font-weight: 500;
-  color: #151371;
+  color: #ffffff;
   text-transform: uppercase;
 }
 
@@ -194,8 +207,8 @@
   margin-top: 1em;
   width: 100%;
   border-radius: 0.2em;
-  color: #151371;
-  border: 1px solid #151371;
+  color: #ffffff;
+  border: 1px solid #ffffff;
   text-align: center;
   cursor: pointer;
   padding: 4px;
@@ -204,7 +217,7 @@
 }
 
 .select {
-  width: 80%;
+  width: 100%;
 }
 
 .select * {
@@ -232,30 +245,38 @@
 
 .numberInput {
   width: 6em;
-  background: white;
-  color: black;
+  color: white;
   font-size: 1.2rem;
   padding: 0.2em 0.5em;
-  border: 1px solid gray;
-  border-radius: 0.1em;
+  background: #1C1D37;
+  border: 1px solid #6938EF;
+  border-radius: 16px;  
 }
 
-.numberInput:focus {
-  outline: auto #ee8ad2;
-  border: none;
-  border-radius: 10px;
+.numberInputContainer{
+  position: relative;
+  width: fit-content;
+}
+.numberInputContainer div{
+  position: absolute;
+  top: 20%;
+  right: 10%;
 }
+.numberInputContainer div img{
+  cursor: pointer;
+}  
 
 .textareaInput {
   resize: none;
   width: 100%;
-  height: 6em;
+  height: 10em;
   border-radius: 0.2em;
-  background: white;
-  color: black;
-  padding: 0.5em;
+  background: transparent;
+  color: rgb(255, 255, 255);
+  padding: 1rem;
   font-size: 1rem;
-  border: 1px solid gray;
+  border: 1px solid #6938EF;
+  border-radius: 16px;
 }
 
 .textareaInput:focus {
@@ -267,13 +288,14 @@
 }
 
 .textInput {
-  width: 60%;
+  width: 100%;
   border-radius: 0.2em;
-  background: white;
-  color: black;
-  padding: 0.5em;
+  background: transparent;
+  color: white;
+  padding: 1em;
   font-size: 1rem;
-  border: 1px solid gray;
+  border: 1px solid #6938EF;
+  border-radius: 16px;
 }
 
 .textInput:focus {
@@ -285,18 +307,19 @@
 }
 
 .label{
-  font-size: 1rem;
+  font-size: 22px;
+  font-weight: normal;
   font-weight: 400;
   margin-bottom: 1em;
-  color: #151371;
+  color: #ffffff;
   display: block;
 }
 
 .innerLabel {
-  color: #151371;
+  color: #ffffff;
   font-size: 0.9rem;
   font-weight: 400;
-  margin-bottom: 0.5em;
+  margin: 0.8em 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -312,45 +335,82 @@
   background: white;
   width: 1px;
   height: 1px;
+  cursor: pointer;
+  margin-right: 20px;
+  margin-left: 10px;
 }
 
 .radio::after {
   content: '';
   position: absolute;
-  width: 10px;
-  height: 10px;
-  background: white;
+  width: 20px;
+  height: 20px;
+  background: #B3AFC3;
   border-radius: 50%;
 }
 
 .radio::before {
-  content: '';
+  /* content: ''; */
   position: absolute;
   width: 14px;
   height: 14px;
-  border: 1px solid #151371;
+  border: 1px solid #ffffff;
   border-radius: 50%;
 }
 
 .radio:checked::after {
-  background: #ffa500;
+  background: #6938EF;
 }
 
 .submit {
   position: absolute;
   right: 0;
   border-radius: 0.2em;
-  background: #151371;
+  background: #ffffff;
   color: white;
   padding: 0.5em 1.4em;
   transition: background 0.3s;
 }
 
 .submit:hover {
-  background: rgb(21, 19, 113, 0.8);
+  background: rgba(255, 255, 255, 0.8);
+}
+.professionLabel{
+  display: flex;
+  justify-content: space-between;
+}
+.professionLabel .innerLabel{
+  background: #1C1D37;
+  border: 1px solid #474BFF;
+  border-radius: 12px;
+  flex-direction: column;
+  padding-top: 2rem;
+  overflow: hidden;
+  cursor: pointer;
+}
+.professionLabel .innerLabel img{
+  margin-bottom: 2rem;
+}  
+.professionLabel .innerLabel div{
+  display: flex;
+  justify-content: center;
+  height: 50px;
+  margin-top: 1rem;
+  width: 250px;
+  background: #272948;
+  border-top: 1px solid #474BFF;
+  padding-top: 5px;
+  font-weight: bold;
+  font-size: 22px;
+  letter-spacing: 0.03em;
+  color: #CFCFCF;
+  margin-top: auto;
+}
+.radioField{
+  border: 1px solid rgba(71, 75, 255, 0.5);
+  border-radius: 16px;
+  padding: 1rem;
 }
-
-
 @media screen and (max-width: 1024px) {
   .formContainer {
     max-width: 48em;
diff --git a/components/InterestForm/Options.js b/components/InterestForm/Options.js
new file mode 100644
index 00000000..d0f93070
--- /dev/null
+++ b/components/InterestForm/Options.js
@@ -0,0 +1,522 @@
+export const countries = [
+  { label: 'Albania', value: 'AL' },
+  { label: 'Åland Islands', value: 'AX' },
+  { label: 'Algeria', value: 'DZ' },
+  { label: 'American Samoa', value: 'AS' },
+  { label: 'Andorra', value: 'AD' },
+  { label: 'Angola', value: 'AO' },
+  { label: 'Anguilla', value: 'AI' },
+  { label: 'Antarctica', value: 'AQ' },
+  { label: 'Antigua and Barbuda', value: 'AG' },
+  { label: 'Argentina', value: 'AR' },
+  { label: 'Armenia', value: 'AM' },
+  { label: 'Aruba', value: 'AW' },
+  { label: 'Australia', value: 'AU' },
+  { label: 'Austria', value: 'AT' },
+  { label: 'Azerbaijan', value: 'AZ' },
+  { label: 'Bahamas (the)', value: 'BS' },
+  { label: 'Bahrain', value: 'BH' },
+  { label: 'Bangladesh', value: 'BD' },
+  { label: 'Barbados', value: 'BB' },
+  { label: 'Belarus', value: 'BY' },
+  { label: 'Belgium', value: 'BE' },
+  { label: 'Belize', value: 'BZ' },
+  { label: 'Benin', value: 'BJ' },
+  { label: 'Bermuda', value: 'BM' },
+  { label: 'Bhutan', value: 'BT' },
+  { label: 'Bolivia (Plurinational State of)', value: 'BO' },
+  { label: 'Bonaire, Sint Eustatius and Saba', value: 'BQ' },
+  { label: 'Bosnia and Herzegovina', value: 'BA' },
+  { label: 'Botswana', value: 'BW' },
+  { label: 'Bouvet Island', value: 'BV' },
+  { label: 'Brazil', value: 'BR' },
+  { label: 'British Indian Ocean Territory (the)', value: 'IO' },
+  { label: 'Brunei Darussalam', value: 'BN' },
+  { label: 'Bulgaria', value: 'BG' },
+  { label: 'Burkina Faso', value: 'BF' },
+  { label: 'Burundi', value: 'BI' },
+  { label: 'Cabo Verde', value: 'CV' },
+  { label: 'Cambodia', value: 'KH' },
+  { label: 'Cameroon', value: 'CM' },
+  { label: 'Canada', value: 'CA' },
+  { label: 'Cayman Islands (the)', value: 'KY' },
+  { label: 'Central African Republic (the)', value: 'CF' },
+  { label: 'Chad', value: 'TD' },
+  { label: 'Chile', value: 'CL' },
+  { label: 'China', value: 'CN' },
+  { label: 'Christmas Island', value: 'CX' },
+  { label: 'Cocos (Keeling) Islands (the)', value: 'CC' },
+  { label: 'Colombia', value: 'CO' },
+  { label: 'Comoros (the)', value: 'KM' },
+  { label: 'Congo (the Democratic Republic of the)', value: 'CD' },
+  { label: 'Congo (the)', value: 'CG' },
+  { label: 'Cook Islands (the)', value: 'CK' },
+  { label: 'Costa Rica', value: 'CR' },
+  { label: 'Croatia', value: 'HR' },
+  { label: 'Cuba', value: 'CU' },
+  { label: 'Curaçao', value: 'CW' },
+  { label: 'Cyprus', value: 'CY' },
+  { label: 'Czechia', value: 'CZ' },
+  { label: "Côte d'Ivoire", value: 'CI' },
+  { label: 'Denmark', value: 'DK' },
+  { label: 'Djibouti', value: 'DJ' },
+  { label: 'Dominica', value: 'DM' },
+  { label: 'Dominican Republic (the)', value: 'DO' },
+  { label: 'Ecuador', value: 'EC' },
+  { label: 'Egypt', value: 'EG' },
+  { label: 'El Salvador', value: 'SV' },
+  { label: 'Equatorial Guinea', value: 'GQ' },
+  { label: 'Eritrea', value: 'ER' },
+  { label: 'Estonia', value: 'EE' },
+  { label: 'Eswatini', value: 'SZ' },
+  { label: 'Ethiopia', value: 'ET' },
+  { label: 'Falkland Islands (the) [Malvinas]', value: 'FK' },
+  { label: 'Faroe Islands (the)', value: 'FO' },
+  { label: 'Fiji', value: 'FJ' },
+  { label: 'Finland', value: 'FI' },
+  { label: 'France', value: 'FR' },
+  { label: 'French Guiana', value: 'GF' },
+  { label: 'French Polynesia', value: 'PF' },
+  { label: 'French Southern Territories (the)', value: 'TF' },
+  { label: 'Gabon', value: 'GA' },
+  { label: 'Gambia (the)', value: 'GM' },
+  { label: 'Georgia', value: 'GE' },
+  { label: 'Germany', value: 'DE' },
+  { label: 'Ghana', value: 'GH' },
+  { label: 'Gibraltar', value: 'GI' },
+  { label: 'Greece', value: 'GR' },
+  { label: 'Greenland', value: 'GL' },
+  { label: 'Grenada', value: 'GD' },
+  { label: 'Guadeloupe', value: 'GP' },
+  { label: 'Guam', value: 'GU' },
+  { label: 'Guatemala', value: 'GT' },
+  { label: 'Guernsey', value: 'GG' },
+  { label: 'Guinea', value: 'GN' },
+  { label: 'Guinea-Bissau', value: 'GW' },
+  { label: 'Guyana', value: 'GY' },
+  { label: 'Haiti', value: 'HT' },
+  { label: 'Heard Island and McDonald Islands', value: 'HM' },
+  { label: 'Holy See (the)', value: 'VA' },
+  { label: 'Honduras', value: 'HN' },
+  { label: 'Hong Kong', value: 'HK' },
+  { label: 'Hungary', value: 'HU' },
+  { label: 'Iceland', value: 'IS' },
+  { label: 'India', value: 'IN' },
+  { label: 'Indonesia', value: 'ID' },
+  { label: 'Iran (Islamic Republic of)', value: 'IR' },
+  { label: 'Iraq', value: 'IQ' },
+  { label: 'Ireland', value: 'IE' },
+  { label: 'Isle of Man', value: 'IM' },
+  { label: 'Israel', value: 'IL' },
+  { label: 'Italy', value: 'IT' },
+  { label: 'Jamaica', value: 'JM' },
+  { label: 'Japan', value: 'JP' },
+  { label: 'Jersey', value: 'JE' },
+  { label: 'Jordan', value: 'JO' },
+  { label: 'Kazakhstan', value: 'KZ' },
+  { label: 'Kenya', value: 'KE' },
+  { label: 'Kiribati', value: 'KI' },
+  { label: "Korea (the Democratic People's Republic of)", value: 'KP' },
+  { label: 'Korea (the Republic of)', value: 'KR' },
+  { label: 'Kuwait', value: 'KW' },
+  { label: 'Kyrgyzstan', value: 'KG' },
+  { label: "Lao People's Democratic Republic (the)", value: 'LA' },
+  { label: 'Latvia', value: 'LV' },
+  { label: 'Lebanon', value: 'LB' },
+  { label: 'Lesotho', value: 'LS' },
+  { label: 'Liberia', value: 'LR' },
+  { label: 'Libya', value: 'LY' },
+  { label: 'Liechtenstein', value: 'LI' },
+  { label: 'Lithuania', value: 'LT' },
+  { label: 'Luxembourg', value: 'LU' },
+  { label: 'Macao', value: 'MO' },
+  { label: 'Madagascar', value: 'MG' },
+  { label: 'Malawi', value: 'MW' },
+  { label: 'Malaysia', value: 'MY' },
+  { label: 'Maldives', value: 'MV' },
+  { label: 'Mali', value: 'ML' },
+  { label: 'Malta', value: 'MT' },
+  { label: 'Marshall Islands (the)', value: 'MH' },
+  { label: 'Martinique', value: 'MQ' },
+  { label: 'Mauritania', value: 'MR' },
+  { label: 'Mauritius', value: 'MU' },
+  { label: 'Mayotte', value: 'YT' },
+  { label: 'Mexico', value: 'MX' },
+  { label: 'Micronesia (Federated States of)', value: 'FM' },
+  { label: 'Moldova (the Republic of)', value: 'MD' },
+  { label: 'Monaco', value: 'MC' },
+  { label: 'Mongolia', value: 'MN' },
+  { label: 'Montenegro', value: 'ME' },
+  { label: 'Montserrat', value: 'MS' },
+  { label: 'Morocco', value: 'MA' },
+  { label: 'Mozambique', value: 'MZ' },
+  { label: 'Myanmar', value: 'MM' },
+  { label: 'Namibia', value: 'NA' },
+  { label: 'Nauru', value: 'NR' },
+  { label: 'Nepal', value: 'NP' },
+  { label: 'Netherlands (the)', value: 'NL' },
+  { label: 'New Caledonia', value: 'NC' },
+  { label: 'New Zealand', value: 'NZ' },
+  { label: 'Nicaragua', value: 'NI' },
+  { label: 'Niger (the)', value: 'NE' },
+  { label: 'Nigeria', value: 'NG' },
+  { label: 'Niue', value: 'NU' },
+  { label: 'Norfolk Island', value: 'NF' },
+  { label: 'Northern Mariana Islands (the)', value: 'MP' },
+  { label: 'Norway', value: 'NO' },
+  { label: 'Oman', value: 'OM' },
+  { label: 'Pakistan', value: 'PK' },
+  { label: 'Palau', value: 'PW' },
+  { label: 'Palestine, State of', value: 'PS' },
+  { label: 'Panama', value: 'PA' },
+  { label: 'Papua New Guinea', value: 'PG' },
+  { label: 'Paraguay', value: 'PY' },
+  { label: 'Peru', value: 'PE' },
+  { label: 'Philippines (the)', value: 'PH' },
+  { label: 'Pitcairn', value: 'PN' },
+  { label: 'Poland', value: 'PL' },
+  { label: 'Portugal', value: 'PT' },
+  { label: 'Puerto Rico', value: 'PR' },
+  { label: 'Qatar', value: 'QA' },
+  { label: 'Republic of North Macedonia', value: 'MK' },
+  { label: 'Romania', value: 'RO' },
+  { label: 'Russian Federation (the)', value: 'RU' },
+  { label: 'Rwanda', value: 'RW' },
+  { label: 'Réunion', value: 'RE' },
+  { label: 'Saint Barthélemy', value: 'BL' },
+  { label: 'Saint Helena, Ascension and Tristan da Cunha', value: 'SH' },
+  { label: 'Saint Kitts and Nevis', value: 'KN' },
+  { label: 'Saint Lucia', value: 'LC' },
+  { label: 'Saint Martin (French part)', value: 'MF' },
+  { label: 'Saint Pierre and Miquelon', value: 'PM' },
+  { label: 'Saint Vincent and the Grenadines', value: 'VC' },
+  { label: 'Samoa', value: 'WS' },
+  { label: 'San Marino', value: 'SM' },
+  { label: 'Sao Tome and Principe', value: 'ST' },
+  { label: 'Saudi Arabia', value: 'SA' },
+  { label: 'Senegal', value: 'SN' },
+  { label: 'Serbia', value: 'RS' },
+  { label: 'Seychelles', value: 'SC' },
+  { label: 'Sierra Leone', value: 'SL' },
+  { label: 'Singapore', value: 'SG' },
+  { label: 'Sint Maarten (Dutch part)', value: 'SX' },
+  { label: 'Slovakia', value: 'SK' },
+  { label: 'Slovenia', value: 'SI' },
+  { label: 'Solomon Islands', value: 'SB' },
+  { label: 'Somalia', value: 'SO' },
+  { label: 'South Africa', value: 'ZA' },
+  { label: 'South Georgia and the South Sandwich Islands', value: 'GS' },
+  { label: 'South Sudan', value: 'SS' },
+  { label: 'Spain', value: 'ES' },
+  { label: 'Sri Lanka', value: 'LK' },
+  { label: 'Sudan (the)', value: 'SD' },
+  { label: 'Surilabel', value: 'SR' },
+  { label: 'Svalbard and Jan Mayen', value: 'SJ' },
+  { label: 'Sweden', value: 'SE' },
+  { label: 'Switzerland', value: 'CH' },
+  { label: 'Syrian Arab Republic', value: 'SY' },
+  { label: 'Taiwan (Province of China)', value: 'TW' },
+  { label: 'Tajikistan', value: 'TJ' },
+  { label: 'Tanzania, United Republic of', value: 'TZ' },
+  { label: 'Thailand', value: 'TH' },
+  { label: 'Timor-Leste', value: 'TL' },
+  { label: 'Togo', value: 'TG' },
+  { label: 'Tokelau', value: 'TK' },
+  { label: 'Tonga', value: 'TO' },
+  { label: 'Trinidad and Tobago', value: 'TT' },
+  { label: 'Tunisia', value: 'TN' },
+  { label: 'Turkey', value: 'TR' },
+  { label: 'Turkmenistan', value: 'TM' },
+  { label: 'Turks and Caicos Islands (the)', value: 'TC' },
+  { label: 'Tuvalu', value: 'TV' },
+  { label: 'Uganda', value: 'UG' },
+  { label: 'Ukraine', value: 'UA' },
+  { label: 'United Arab Emirates (the)', value: 'AE' },
+  { label: 'United Kingdom of Great Britain and Northern Ireland (the)', value: 'GB' },
+  { label: 'United States Minor Outlying Islands (the)', value: 'UM' },
+  { label: 'United States of America (the)', value: 'US' },
+  { label: 'Uruguay', value: 'UY' },
+  { label: 'Uzbekistan', value: 'UZ' },
+  { label: 'Vanuatu', value: 'VU' },
+  { label: 'Venezuela (Bolivarian Republic of)', value: 'VE' },
+  { label: 'Viet Nam', value: 'VN' },
+  { label: 'Virgin Islands (British)', value: 'VG' },
+  { label: 'Virgin Islands (U.S.)', value: 'VI' },
+  { label: 'Wallis and Futuna', value: 'WF' },
+  { label: 'Western Sahara', value: 'EH' },
+  { label: 'Yemen', value: 'YE' },
+  { label: 'Zambia', value: 'ZM' },
+  { label: 'Zimbabwe', value: 'ZW' },
+];
+
+export const interestOptions = [
+  { label: 'Development', value: 'development' },
+  { label: 'Design', value: 'design' },
+  { label: 'Frontend', value: 'frontend' },
+  { label: 'Backend', value: 'backend' },
+  { label: 'Research', value: 'research' },
+  { label: 'Marketing', value: 'marketing' },
+  { label: 'Intructing', value: 'intructing' },
+  { label: 'Project Management', value: 'Project management' },
+];
+
+export const passionOptions = [
+  { label: 'Technology', value: 'technology' },
+  { label: 'Nature', value: 'nature' },
+  { label: 'Music', value: 'music' },
+  { label: 'Sports', value: 'sports' },
+  { label: 'Entreprenuership', value: 'entreprenuership' },
+  { label: 'Reading', value: 'reading' },
+  { label: 'Volunteering', value: 'volunteering' },
+  { label: 'Arts', value: 'arts' },
+  { label: 'Dancing', value: 'dancing' },
+  { label: 'Comedy', value: 'comedy' },
+  { label: 'Gaming', value: 'gaming' },
+  { label: 'Cooking', value: 'cooking' },
+  { label: 'Animals', value: 'animals' },
+  { label: 'Travel', value: 'travel' },
+];
+export const countriesLoaction = [{ code: 'AF', latitude: 33.0, longitude: 65.0 },
+  { code: 'AL', latitude: 41.0, longitude: 20.0 },
+  { code: 'DZ', latitude: 28.0, longitude: 3.0 },
+  { code: 'AS', latitude: -14.3333, longitude: -170.0 },
+  { code: 'AD', latitude: 42.5, longitude: 1.6 },
+  { code: 'AO', latitude: -12.5, longitude: 18.5 },
+  { code: 'AI', latitude: 18.25, longitude: -63.1667 },
+  { code: 'AQ', latitude: -90.0, longitude: 0.0 },
+  { code: 'AG', latitude: 17.05, longitude: -61.8 },
+  { code: 'AR', latitude: -34.0, longitude: -64.0 },
+  { code: 'AM', latitude: 40.0, longitude: 45.0 },
+  { code: 'AW', latitude: 12.5, longitude: -69.9667 },
+  { code: 'AU', latitude: -27.0, longitude: 133.0 },
+  { code: 'AT', latitude: 47.3333, longitude: 13.3333 },
+  { code: 'AZ', latitude: 40.5, longitude: 47.5 },
+  { code: 'BS', latitude: 24.25, longitude: -76.0 },
+  { code: 'BH', latitude: 26.0, longitude: 50.55 },
+  { code: 'BD', latitude: 24.0, longitude: 90.0 },
+  { code: 'BB', latitude: 13.1667, longitude: -59.5333 },
+  { code: 'BY', latitude: 53.0, longitude: 28.0 },
+  { code: 'BE', latitude: 50.8333, longitude: 4.0 },
+  { code: 'BZ', latitude: 17.25, longitude: -88.75 },
+  { code: 'BJ', latitude: 9.5, longitude: 2.25 },
+  { code: 'BM', latitude: 32.3333, longitude: -64.75 },
+  { code: 'BT', latitude: 27.5, longitude: 90.5 },
+  { code: 'BO', latitude: -17.0, longitude: -65.0 },
+  { code: 'BA', latitude: 44.0, longitude: 18.0 },
+  { code: 'BW', latitude: -22.0, longitude: 24.0 },
+  { code: 'BV', latitude: -54.4333, longitude: 3.4 },
+  { code: 'BR', latitude: -10.0, longitude: -55.0 },
+  { code: 'IO', latitude: -6.0, longitude: 71.5 },
+  { code: 'BN', latitude: 4.5, longitude: 114.6667 },
+  { code: 'BG', latitude: 43.0, longitude: 25.0 },
+  { code: 'BF', latitude: 13.0, longitude: -2.0 },
+  { code: 'BI', latitude: -3.5, longitude: 30.0 },
+  { code: 'KH', latitude: 13.0, longitude: 105.0 },
+  { code: 'CM', latitude: 6.0, longitude: 12.0 },
+  { code: 'CA', latitude: 60.0, longitude: -95.0 },
+  { code: 'CV', latitude: 16.0, longitude: -24.0 },
+  { code: 'KY', latitude: 19.5, longitude: -80.5 },
+  { code: 'CF', latitude: 7.0, longitude: 21.0 },
+  { code: 'TD', latitude: 15.0, longitude: 19.0 },
+  { code: 'CL', latitude: -30.0, longitude: -71.0 },
+  { code: 'CN', latitude: 35.0, longitude: 105.0 },
+  { code: 'CX', latitude: -10.5, longitude: 105.6667 },
+  { code: 'CC', latitude: -12.5, longitude: 96.8333 },
+  { code: 'CO', latitude: 4.0, longitude: -72.0 },
+  { code: 'KM', latitude: -12.1667, longitude: 44.25 },
+  { code: 'CG', latitude: -1.0, longitude: 15.0 },
+  { code: 'CD', latitude: 0.0, longitude: 25.0 },
+  { code: 'CK', latitude: -21.2333, longitude: -159.7667 },
+  { code: 'CR', latitude: 10.0, longitude: -84.0 },
+  { code: 'CI', latitude: 8.0, longitude: -5.0 },
+  { code: 'HR', latitude: 45.1667, longitude: 15.5 },
+  { code: 'CU', latitude: 21.5, longitude: -80.0 },
+  { code: 'CY', latitude: 35.0, longitude: 33.0 },
+  { code: 'CZ', latitude: 49.75, longitude: 15.5 },
+  { code: 'DK', latitude: 56.0, longitude: 10.0 },
+  { code: 'DJ', latitude: 11.5, longitude: 43.0 },
+  { code: 'DM', latitude: 15.4167, longitude: -61.3333 },
+  { code: 'DO', latitude: 19.0, longitude: -70.6667 },
+  { code: 'EC', latitude: -2.0, longitude: -77.5 },
+  { code: 'EG', latitude: 27.0, longitude: 30.0 },
+  { code: 'SV', latitude: 13.8333, longitude: -88.9167 },
+  { code: 'GQ', latitude: 2.0, longitude: 10.0 },
+  { code: 'ER', latitude: 15.0, longitude: 39.0 },
+  { code: 'EE', latitude: 59.0, longitude: 26.0 },
+  { code: 'ET', latitude: 8.0, longitude: 38.0 },
+  { code: 'FK', latitude: -51.75, longitude: -59.0 },
+  { code: 'FO', latitude: 62.0, longitude: -7.0 },
+  { code: 'FJ', latitude: -18.0, longitude: 175.0 },
+  { code: 'FI', latitude: 64.0, longitude: 26.0 },
+  { code: 'FR', latitude: 46.0, longitude: 2.0 },
+  { code: 'GF', latitude: 4.0, longitude: -53.0 },
+  { code: 'PF', latitude: -15.0, longitude: -140.0 },
+  { code: 'TF', latitude: -43.0, longitude: 67.0 },
+  { code: 'GA', latitude: -1.0, longitude: 11.75 },
+  { code: 'GM', latitude: 13.4667, longitude: -16.5667 },
+  { code: 'GE', latitude: 42.0, longitude: 43.5 },
+  { code: 'DE', latitude: 51.0, longitude: 9.0 },
+  { code: 'GH', latitude: 8.0, longitude: -2.0 },
+  { code: 'GI', latitude: 36.1833, longitude: -5.3667 },
+  { code: 'GR', latitude: 39.0, longitude: 22.0 },
+  { code: 'GL', latitude: 72.0, longitude: -40.0 },
+  { code: 'GD', latitude: 12.1167, longitude: -61.6667 },
+  { code: 'GP', latitude: 16.25, longitude: -61.5833 },
+  { code: 'GU', latitude: 13.4667, longitude: 144.7833 },
+  { code: 'GT', latitude: 15.5, longitude: -90.25 },
+  { code: 'GG', latitude: 49.5, longitude: -2.56 },
+  { code: 'GN', latitude: 11.0, longitude: -10.0 },
+  { code: 'GW', latitude: 12.0, longitude: -15.0 },
+  { code: 'GY', latitude: 5.0, longitude: -59.0 },
+  { code: 'HT', latitude: 19.0, longitude: -72.4167 },
+  { code: 'HM', latitude: -53.1, longitude: 72.5167 },
+  { code: 'VA', latitude: 41.9, longitude: 12.45 },
+  { code: 'HN', latitude: 15.0, longitude: -86.5 },
+  { code: 'HK', latitude: 22.25, longitude: 114.1667 },
+  { code: 'HU', latitude: 47.0, longitude: 20.0 },
+  { code: 'IS', latitude: 65.0, longitude: -18.0 },
+  { code: 'IN', latitude: 20.0, longitude: 77.0 },
+  { code: 'ID', latitude: -5.0, longitude: 120.0 },
+  { code: 'IR', latitude: 32.0, longitude: 53.0 },
+  { code: 'IQ', latitude: 33.0, longitude: 44.0 },
+  { code: 'IE', latitude: 53.0, longitude: -8.0 },
+  { code: 'IM', latitude: 54.23, longitude: -4.55 },
+  { code: 'IL', latitude: 31.5, longitude: 34.75 },
+  { code: 'IT', latitude: 42.8333, longitude: 12.8333 },
+  { code: 'JM', latitude: 18.25, longitude: -77.5 },
+  { code: 'JP', latitude: 36.0, longitude: 138.0 },
+  { code: 'JE', latitude: 49.21, longitude: -2.13 },
+  { code: 'JO', latitude: 31.0, longitude: 36.0 },
+  { code: 'KZ', latitude: 48.0, longitude: 68.0 },
+  { code: 'KE', latitude: 1.0, longitude: 38.0 },
+  { code: 'KI', latitude: 1.4167, longitude: 173.0 },
+  { code: 'KP', latitude: 40.0, longitude: 127.0 },
+  { code: 'KR', latitude: 37.0, longitude: 127.5 },
+  { code: 'KW', latitude: 29.3375, longitude: 47.6581 },
+  { code: 'KG', latitude: 41.0, longitude: 75.0 },
+  { code: 'LA', latitude: 18.0, longitude: 105.0 },
+  { code: 'LV', latitude: 57.0, longitude: 25.0 },
+  { code: 'LB', latitude: 33.8333, longitude: 35.8333 },
+  { code: 'LS', latitude: -29.5, longitude: 28.5 },
+  { code: 'LR', latitude: 6.5, longitude: -9.5 },
+  { code: 'LY', latitude: 25.0, longitude: 17.0 },
+  { code: 'LI', latitude: 47.1667, longitude: 9.5333 },
+  { code: 'LT', latitude: 56.0, longitude: 24.0 },
+  { code: 'LU', latitude: 49.75, longitude: 6.1667 },
+  { code: 'MO', latitude: 22.1667, longitude: 113.55 },
+  { code: 'MK', latitude: 41.8333, longitude: 22.0 },
+  { code: 'MG', latitude: -20.0, longitude: 47.0 },
+  { code: 'MW', latitude: -13.5, longitude: 34.0 },
+  { code: 'MY', latitude: 2.5, longitude: 112.5 },
+  { code: 'MV', latitude: 3.25, longitude: 73.0 },
+  { code: 'ML', latitude: 17.0, longitude: -4.0 },
+  { code: 'MT', latitude: 35.8333, longitude: 14.5833 },
+  { code: 'MH', latitude: 9.0, longitude: 168.0 },
+  { code: 'MQ', latitude: 14.6667, longitude: -61.0 },
+  { code: 'MR', latitude: 20.0, longitude: -12.0 },
+  { code: 'MU', latitude: -20.2833, longitude: 57.55 },
+  { code: 'YT', latitude: -12.8333, longitude: 45.1667 },
+  { code: 'MX', latitude: 23.0, longitude: -102.0 },
+  { code: 'FM', latitude: 6.9167, longitude: 158.25 },
+  { code: 'MD', latitude: 47.0, longitude: 29.0 },
+  { code: 'MC', latitude: 43.7333, longitude: 7.4 },
+  { code: 'MN', latitude: 46.0, longitude: 105.0 },
+  { code: 'ME', latitude: 42.0, longitude: 19.0 },
+  { code: 'MS', latitude: 16.75, longitude: -62.2 },
+  { code: 'MA', latitude: 32.0, longitude: -5.0 },
+  { code: 'MZ', latitude: -18.25, longitude: 35.0 },
+  { code: 'MM', latitude: 22.0, longitude: 98.0 },
+  { code: 'NA', latitude: -22.0, longitude: 17.0 },
+  { code: 'NR', latitude: -0.5333, longitude: 166.9167 },
+  { code: 'NP', latitude: 28.0, longitude: 84.0 },
+  { code: 'NL', latitude: 52.5, longitude: 5.75 },
+  { code: 'AN', latitude: 12.25, longitude: -68.75 },
+  { code: 'NC', latitude: -21.5, longitude: 165.5 },
+  { code: 'NZ', latitude: -41.0, longitude: 174.0 },
+  { code: 'NI', latitude: 13.0, longitude: -85.0 },
+  { code: 'NE', latitude: 16.0, longitude: 8.0 },
+  { code: 'NG', latitude: 10.0, longitude: 8.0 },
+  { code: 'NU', latitude: -19.0333, longitude: -169.8667 },
+  { code: 'NF', latitude: -29.0333, longitude: 167.95 },
+  { code: 'MP', latitude: 15.2, longitude: 145.75 },
+  { code: 'NO', latitude: 62.0, longitude: 10.0 },
+  { code: 'OM', latitude: 21.0, longitude: 57.0 },
+  { code: 'PK', latitude: 30.0, longitude: 70.0 },
+  { code: 'PW', latitude: 7.5, longitude: 134.5 },
+  { code: 'PS', latitude: 32.0, longitude: 35.25 },
+  { code: 'PA', latitude: 9.0, longitude: -80.0 },
+  { code: 'PG', latitude: -6.0, longitude: 147.0 },
+  { code: 'PY', latitude: -23.0, longitude: -58.0 },
+  { code: 'PE', latitude: -10.0, longitude: -76.0 },
+  { code: 'PH', latitude: 13.0, longitude: 122.0 },
+  { code: 'PN', latitude: -24.7, longitude: -127.4 },
+  { code: 'PL', latitude: 52.0, longitude: 20.0 },
+  { code: 'PT', latitude: 39.5, longitude: -8.0 },
+  { code: 'PR', latitude: 18.25, longitude: -66.5 },
+  { code: 'QA', latitude: 25.5, longitude: 51.25 },
+  { code: 'RE', latitude: -21.1, longitude: 55.6 },
+  { code: 'RO', latitude: 46.0, longitude: 25.0 },
+  { code: 'RU', latitude: 60.0, longitude: 100.0 },
+  { code: 'RW', latitude: -2.0, longitude: 30.0 },
+  { code: 'SH', latitude: -15.9333, longitude: -5.7 },
+  { code: 'KN', latitude: 17.3333, longitude: -62.75 },
+  { code: 'LC', latitude: 13.8833, longitude: -61.1333 },
+  { code: 'PM', latitude: 46.8333, longitude: -56.3333 },
+  { code: 'VC', latitude: 13.25, longitude: -61.2 },
+  { code: 'WS', latitude: -13.5833, longitude: -172.3333 },
+  { code: 'SM', latitude: 43.7667, longitude: 12.4167 },
+  { code: 'ST', latitude: 1.0, longitude: 7.0 },
+  { code: 'SA', latitude: 25.0, longitude: 45.0 },
+  { code: 'SN', latitude: 14.0, longitude: -14.0 },
+  { code: 'RS', latitude: 44.0, longitude: 21.0 },
+  { code: 'SC', latitude: -4.5833, longitude: 55.6667 },
+  { code: 'SL', latitude: 8.5, longitude: -11.5 },
+  { code: 'SG', latitude: 1.3667, longitude: 103.8 },
+  { code: 'SK', latitude: 48.6667, longitude: 19.5 },
+  { code: 'SI', latitude: 46.0, longitude: 15.0 },
+  { code: 'SB', latitude: -8.0, longitude: 159.0 },
+  { code: 'SO', latitude: 10.0, longitude: 49.0 },
+  { code: 'ZA', latitude: -29.0, longitude: 24.0 },
+  { code: 'GS', latitude: -54.5, longitude: -37.0 },
+  { code: 'SS', latitude: 8.0, longitude: 30.0 },
+  { code: 'ES', latitude: 40.0, longitude: -4.0 },
+  { code: 'LK', latitude: 7.0, longitude: 81.0 },
+  { code: 'SD', latitude: 15.0, longitude: 30.0 },
+  { code: 'SR', latitude: 4.0, longitude: -56.0 },
+  { code: 'SJ', latitude: 78.0, longitude: 20.0 },
+  { code: 'SZ', latitude: -26.5, longitude: 31.5 },
+  { code: 'SE', latitude: 62.0, longitude: 15.0 },
+  { code: 'CH', latitude: 47.0, longitude: 8.0 },
+  { code: 'SY', latitude: 35.0, longitude: 38.0 },
+  { code: 'TW', latitude: 23.5, longitude: 121.0 },
+  { code: 'TJ', latitude: 39.0, longitude: 71.0 },
+  { code: 'TZ', latitude: -6.0, longitude: 35.0 },
+  { code: 'TH', latitude: 15.0, longitude: 100.0 },
+  { code: 'TL', latitude: -8.55, longitude: 125.5167 },
+  { code: 'TG', latitude: 8.0, longitude: 1.1667 },
+  { code: 'TK', latitude: -9.0, longitude: -172.0 },
+  { code: 'TO', latitude: -20.0, longitude: -175.0 },
+  { code: 'TT', latitude: 11.0, longitude: -61.0 },
+  { code: 'TN', latitude: 34.0, longitude: 9.0 },
+  { code: 'TR', latitude: 39.0, longitude: 35.0 },
+  { code: 'TM', latitude: 40.0, longitude: 60.0 },
+  { code: 'TC', latitude: 21.75, longitude: -71.5833 },
+  { code: 'TV', latitude: -8.0, longitude: 178.0 },
+  { code: 'UG', latitude: 1.0, longitude: 32.0 },
+  { code: 'UA', latitude: 49.0, longitude: 32.0 },
+  { code: 'AE', latitude: 24.0, longitude: 54.0 },
+  { code: 'GB', latitude: 54.0, longitude: -2.0 },
+  { code: 'US', latitude: 38.0, longitude: -97.0 },
+  { code: 'UM', latitude: 19.2833, longitude: 166.6 },
+  { code: 'UY', latitude: -33.0, longitude: -56.0 },
+  { code: 'UZ', latitude: 41.0, longitude: 64.0 },
+  { code: 'VU', latitude: -16.0, longitude: 167.0 },
+  { code: 'VE', latitude: 8.0, longitude: -66.0 },
+  { code: 'VN', latitude: 16.0, longitude: 106.0 },
+  { code: 'VG', latitude: 18.5, longitude: -64.5 },
+  { code: 'VI', latitude: 18.3333, longitude: -64.8333 },
+  { code: 'WF', latitude: -13.3, longitude: -176.2 },
+  { code: 'EH', latitude: 24.5, longitude: -13.0 },
+  { code: 'YE', latitude: 15.0, longitude: 48.0 },
+  { code: 'ZM', latitude: -15.0, longitude: 30.0 },
+  { code: 'ZW', latitude: -20.0, longitude: 30.0 }];
diff --git a/components/chapter/chapter-document/documents.module.css b/components/chapter/chapter-document/documents.module.css
index 862c5d0e..5170d37d 100644
--- a/components/chapter/chapter-document/documents.module.css
+++ b/components/chapter/chapter-document/documents.module.css
@@ -8,22 +8,22 @@
 }
 
 .container.odd {
-    border: 2px solid #FF655B;
+    border: 2px solid #6938EF;
 }
 
 .container.even {
-    border: 2px solid #FF00B8
+    border: 2px solid #6938EF
 }
 
 .downloadButton {
-    background: #ffc700;
-    color: black;
+    background: #8040d2;
+    color: rgb(255, 255, 255);
     padding: 0 0.5em;
-    border-radius: 0.2em;
+    border-radius: 0.2em; 
 }
 
 .downloadButton > * {
-    color: #151371;
+    color: #ffffff;
 }
 
 .title {
diff --git a/components/chapter/chapter-intro/intro.component.jsx b/components/chapter/chapter-intro/intro.component.jsx
index fdccf470..4515ad16 100644
--- a/components/chapter/chapter-intro/intro.component.jsx
+++ b/components/chapter/chapter-intro/intro.component.jsx
@@ -1,12 +1,9 @@
-import React, { useState } from 'react';
-import { FaPlay } from 'react-icons/fa';
-import ModalVideo from 'react-modal-video';
+import React from 'react';
 import { useRouter } from 'next/router';
 import styles from './intro.module.css';
 import { errorToast } from '../../../contexts/utils/toasts';
 
 const Intro = ({ active }) => {
-  const [isOpen, setOpen] = useState(false);
   const router = useRouter();
 
   const handleStart = () => {
@@ -18,10 +15,12 @@ const Intro = ({ active }) => {
   };
 
   return (
-    <div className={styles.introWrapper}>
-      <div className={styles.introContainer}>
-        <div className={styles.tag}>01</div>
+    <div className={`${styles.introWrapper}`}>
+      <div className={`container ${styles.introContainer}`}>
         <div className={styles.contentContainer}>
+          <div onClick={handleStart} className={styles.button}>
+            Chapters
+          </div>
           <h1 className={styles.heading}>START CHAPTER</h1>
           <p className={styles.text}>
             Start a community of diverse developers today, and get
@@ -35,25 +34,24 @@ const Intro = ({ active }) => {
               of diverse talent here to empower the world!
             </span>
           </p>
-          <div onClick={handleStart} className={styles.button}>
-            Start Today
-          </div>
         </div>
         <div className={styles.globeContainer}>
-          <img src="/assets/images/chapter/world.png" alt="map" />
-          <div onClick={() => setOpen(true)} className={styles.playIcon}>
-            <FaPlay />
+          <img src="/assets/images/chapter/hero.svg" alt="map" />
+        </div>
+        <div className={styles.imgText}>
+          <p>
+            Join the Coding revolution! Learn, code, and build socially
+            impactiful projects with other creative minorities
+          </p>
+          <div onClick={handleStart} className={styles.button}>
+            Start Now
           </div>
         </div>
-
-        <ModalVideo
-          channel="youtube"
-          autoplay
-          isOpen={isOpen}
-          videoId="VZmd8EOj3UA"
-          onClose={() => setOpen(false)}
-        />
       </div>
+      <div className={styles.bgImg}>
+        <img src="/assets/images/home-page/about-us-bg.svg" alt="" />
+      </div>
+      <div className={styles.bgBlue} />
     </div>
   );
 };
diff --git a/components/chapter/chapter-intro/intro.module.css b/components/chapter/chapter-intro/intro.module.css
index 00a9489e..7bb690dd 100644
--- a/components/chapter/chapter-intro/intro.module.css
+++ b/components/chapter/chapter-intro/intro.module.css
@@ -3,10 +3,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: none;
   padding: 1em 0;
   padding-bottom: 4em;
   position: relative;
+  overflow-x: clip;
 }
 
 .tag {
@@ -23,17 +23,19 @@
 
 .introContainer {
   width: 100%;
-  max-width: 64em;
+  /* max-width: 64em; */
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
+  align-items: center;
   justify-content: space-between;
   padding: 3em;
   margin-top: 8em;
-  background: rgb(0,0,0,0.2);
+  /* background: rgb(0,0,0,0.2); */
 }
 
 .contentContainer {
-  width: 26em;
+  /* width: 26em; */
+  margin-top: 70px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -42,17 +44,26 @@
 }
 
 .heading {
-  font-size: 1.6rem;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 61px;
   text-align: center;
+  background: linear-gradient(90.87deg, #97C4F5 -2.84%, #33D2FF 82.04%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
   padding: 0;
   margin: 0;
-  margin-bottom: 1em;
+  margin-bottom: 38px;
 }
 
 .text {
   text-align: center;
   font-size: 1.2rem;
   margin-bottom: 1em;
+  font-weight: normal;
+  font-size: 30px;
+  padding: 0 3rem;
 }
 
 .showText {
@@ -61,17 +72,20 @@
 
 .button {
   padding: 0.8em 3em;
-  background: #151371;
-  color: white;
+  font-weight: 600;
+  font-size: 30px;
+  background: #6938EF;
+  border-radius: 100px;  color: white;
   cursor: pointer;
+  margin-bottom: 38px;
 }
 
-.button:hover {
+/* .button:hover {
   background: #100e5a;
-}
+} */
 
 .globeContainer {
-  width: 20em;
+  /* width: 20em; */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -94,128 +108,94 @@
     justify-content: center;
     border-radius: 50%;
 }
-
+.imgText{
+  background: #1C1D37;
+  border-radius: 29px;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 2rem;
+  margin-top: -50px;
+  position: relative;
+  z-index: 20;
+}
+.imgText p{
+  color: #FFFFFF;
+  font-weight: normal;
+  font-size: 30px;
+  text-align: center;
+  margin: 20px 0;
+}
+.imgText div{
+  width: fit-content;
+  margin: auto;
+  margin-bottom: 20px;
+}
+.bgBlue{
+  position: absolute;
+  width: 160.95px;
+  height: 170.28px;
+  background: #584ae6;
+  border-radius: 50%;
+  mix-blend-mode: hard-light;
+  box-shadow: inset 0px 4px 4px rgb(0 0 0 / 25%);
+  filter: blur(140.94px);
+  right: 10%;
+  top: 30%;
+}
+.bgImg{
+  position: absolute;
+  right: -90rem;
+  top: 60rem;
+  mix-blend-mode: color-dodge;
+}
 @media screen and (max-width: 1024px) {
-  .introContainer {
+  /* .introContainer {
     max-width: 48em;
-  }
+  } */
 
   .contentContainer {
-    width: 24em;
+    /* width: 24em; */
   }
 
   .heading {
-    font-size: 1.4em;
+    /* font-size: 1.4em; */
   }
 
   .text {
-    font-size: 1rem;
+    /* font-size: 1rem; */
   }
 
   .globeContainer {
-    width: 16em;
+    /* width: 16em; */
   }
 }
 
 @media screen and (max-width: 768px) {
-
-  .tag {
-    width: auto;
-    position: absolute;
-    top: 0;
-    left: 2em;
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%);
-    background: #151371;
-    color: white;    
-    padding-top: 1em;
-    padding-bottom: 1em;
-    padding-right: 0.5em;
-    padding-left: 0.5em;
-  }
-
-  .introWrapper {
-    position: static;
-  }
-
-  .introContainer {
-    max-width: 36em;
-    padding: 3em 1em;
-    margin-top: 6em;
-    position: relative;
-  }
-
-  .contentContainer {
-    width: 20em;
-  }
-
-  .heading {
-    font-size: 1.2em;
-  }
-
   .text {
-    font-size: 0.9rem;
-  }
-
-  .globeContainer {
-    width: 12em;
-  }
-
-  .button {
-      padding: 0.6em 3em;
-  }
-
-  .playIcon {
-      width: 3em;
-      height: 3em;
+    padding: 0;
   }
 }
 
 
 @media screen and (max-width: 480px) {  
-  .introContainer {
-    max-width: 100%;
-  }
-
-  .tag {
-    left: 1em;
-    font-size: 0.8em;
-  }
-
-  .contentContainer {
-    width: 16em;
-  }
-
-  .showText {
-    display: inline;
-  }
-
-  .hideText {
-    display: none;
-  }
-
-  .playIcon {
-      width: 2em;
-      height: 2em;
+  .heading{
+    font-size: 40px;
   }
-
-  .playIcon > * {
-      font-size: 0.8em;
+  .text{
+    padding: 0;
+    font-size: 24px;
   }
-
-  .heading {
-    font-size: 1.2em;
+  .button{
+    font-size: 20px;
   }
-
-  .text {
-    font-size: 0.8rem;
+  .imgText p{
+    font-size: 24px;
   }
-
-  .button {
-    padding: 0.5em 2em;
+  .imgText{
+    padding: 1rem 0rem;
   }
-
-  .globeContainer {
-    width: 10em;
+  .introContainer{
+    padding: 1em;
   }
 }
 
diff --git a/components/chapter/chapter-leaderboard/LeadboardCards.js b/components/chapter/chapter-leaderboard/LeadboardCards.js
new file mode 100644
index 00000000..3bc25b65
--- /dev/null
+++ b/components/chapter/chapter-leaderboard/LeadboardCards.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import styles from './leaderboard.module.css';
+
+const LeadboardCards = ({ topChapter }) => {
+  const TitleUpperCase = (title) => {
+    const words = title.toLowerCase().split(' ');
+
+    return words.map((word) => word[0].toUpperCase() + word.substring(1)).join(' ');
+  };
+  return (
+
+    <div style={{ justifyContent: topChapter.length > 2 ? 'space-between' : 'space-evenly' }} className={styles.LeadboardCards}>
+      {topChapter[1]
+      && (
+      <div className={styles.silver}>
+        <img src="/assets/images/chapter/silver.svg" alt="first" />
+        <div className={styles.detail}>
+          <h2>
+            {topChapter[1] ? TitleUpperCase(topChapter[1].name) : ''}
+          </h2>
+          <h3>{topChapter[1]?.place}</h3>
+          <p>
+            {`${topChapter[1]?.amount} Points`}
+          </p>
+        </div>
+        <div className={styles.viewBtn}>
+          <a>View Chapter</a>
+        </div>
+      </div>
+      )}
+      {topChapter[0]
+      && (
+      <div className={styles.gold}>
+        <img src="/assets/images/chapter/gold.svg" alt="first" />
+        <div className={styles.detail}>
+          <h2>
+            {topChapter[0] ? TitleUpperCase(topChapter[0].name) : ''}
+          </h2>
+          <h3>{topChapter[0]?.place}</h3>
+          <p>
+            {`${topChapter[0]?.amount} Points`}
+          </p>
+        </div>
+        <div className={styles.viewBtn}>
+          <a>View Chapter</a>
+        </div>
+      </div>
+      )}
+      {topChapter[2]
+      && (
+      <div className={styles.bronze}>
+        <img src="/assets/images/chapter/bronze.svg" alt="first" />
+        <div className={styles.detail}>
+          <h2>
+            {topChapter[2] ? TitleUpperCase(topChapter[2].name) : ''}
+          </h2>
+          <h3>{topChapter[2]?.place}</h3>
+          <p>
+            {`${topChapter[2]?.amount} Points`}
+          </p>
+        </div>
+        <div className={styles.viewBtn}>
+          <a>View Chapter</a>
+        </div>
+      </div>
+      )}
+    </div>
+
+  );
+};
+export default LeadboardCards;
diff --git a/components/chapter/chapter-leaderboard/leaderboard.component.jsx b/components/chapter/chapter-leaderboard/leaderboard.component.jsx
index 8ab402e2..dfc7db8b 100644
--- a/components/chapter/chapter-leaderboard/leaderboard.component.jsx
+++ b/components/chapter/chapter-leaderboard/leaderboard.component.jsx
@@ -3,25 +3,14 @@ import axios from 'axios';
 import Select from '../chapter-select/select.component';
 import styles from './leaderboard.module.css';
 import ChapterStat from '../chapter-stat/chapterStat.component';
+import LeadboardCards from './LeadboardCards';
 
 const Leaderboard = () => {
   const [stats, setStats] = useState([]);
   const [filteredStats, setFilteredStats] = useState([]);
   const [selectItems, setItems] = useState([]);
-  const [pageStart, setPageStart] = useState(0);
-  const [pageEnd, setPageEnd] = useState(5);
   const [toggle, toggleDropdown] = useState(false);
-  const [pageToDisplay, setPageToDisplay] = useState();
-  const [currentPage, setCurrentPage] = useState(1);
-  const pageNumDisplay = 5;
-
-  const [startView, setStartView] = useState();
-  const [endView, setEndView] = useState();
-  const [currentView, setCurrentView] = useState(0);
-  const [viewToDisplay, setViewToDisplay] = useState([]);
-  const [pageLink, setPageLink] = useState([]);
-  const [pointer, setPointer] = useState(1);
-  const view = 3;
+  const [topChapter, setTopChapter] = useState([]);
 
   useEffect(() => {
     axios
@@ -30,126 +19,65 @@ const Leaderboard = () => {
       .then((msg) => msg.data)
       .then((data) => {
         const newData = data.map((d, idx) => ({ ...d, number: idx + 1 }));
-        setStats(newData);
-        setFilteredStats(newData);
+        const items = newData;
+        items.sort((a, b) => b.amount - a.amount);
+        setStats(items);
+        setFilteredStats(items);
         const categories = new Set();
         newData.forEach((val) => {
           categories.add(val.category);
         });
-        const select = [...categories].map((c) => ({ [c]: false }));
-        setItems([...select, { all: false }]);
+        const arrayUniqueByKey = [...new Map(items.map(
+          (item) => [item.name, item],
+        )).values()];
+        setTopChapter(arrayUniqueByKey.slice(0, 3));
+        setItems([{ monthly: false }, { weekly: false }, { all: false }]);
       })
       .catch((err) => console.error(err));
   }, []);
 
-  useEffect(() => {
-    const pLink = [];
-    for (
-      let i = 0;
-      i < Math.ceil(filteredStats.length / pageNumDisplay);
-      i += 1
-    ) {
-      pLink.push(i + 1);
-    }
-    setPageLink(pLink);
-    setStartView(currentView);
-    setEndView(currentView + view);
-    setViewToDisplay(pLink.slice(startView, endView));
-  }, [currentView, startView, endView, filteredStats]);
-
-  useEffect(() => {
-    setPageEnd(currentPage * pageNumDisplay);
-    setPageStart(currentPage * pageNumDisplay - pageNumDisplay);
-    setPageToDisplay(filteredStats.slice(pageStart, pageEnd));
-  }, [pageStart, pageEnd, currentPage, filteredStats]);
-
-  const handlePage = (num) => {
-    setCurrentPage(num);
-    setPointer(num);
-  };
-
   const handleClick = () => {
     toggleDropdown(!toggle);
   };
 
-  const handlePrev = () => {
-    if (currentPage === 1) return;
-    setCurrentPage((c) => c - 1);
-    setPointer((p) => p - 1);
-    if (pointer === viewToDisplay[0]) {
-      setCurrentView((c) => c - 1);
-    }
-  };
-
-  const handleNext = () => {
-    if (currentPage === pageLink.length) return;
-    setCurrentPage((c) => c + 1);
-    setPointer((p) => p + 1);
-    if (pointer === viewToDisplay[viewToDisplay.length - 1]) {
-      setCurrentView((c) => c + 1);
-    }
-  };
-
   const handleChange = (val) => {
     const newStats = stats
       .filter((stat) => (val === 'all' ? stat : stat.category === val))
       .map((stat, idx) => ({ ...stat, number: idx + 1 }));
     setFilteredStats(newStats);
-    setCurrentPage(1);
-    setCurrentView(0);
-    setPointer(1);
+    const items = newStats;
+    items.sort((a, b) => b.amount - a.amount);
+    const arrayUniqueByKey = [...new Map(items.map(
+      (item) => [item.name, item],
+    )).values()];
+    setTopChapter(arrayUniqueByKey.slice(0, 3));
   };
 
   return (
     <div className={styles.wrapper}>
-      <div className={styles.container}>
+      <div className={`${styles.container} container`}>
         <div className={styles.heading}>
           <div className={styles.title}>CHAPTER LEADERBOARD</div>
-          <div className={styles.text}>Total points from programs</div>
+          <div className={styles.text}>
+            Top programs with the most points
+
+          </div>
         </div>
-        <div className={styles.tag}>03</div>
         <div className={styles.navbar}>
-          <div className={styles.paginate}>
-            <div onClick={handlePrev} className={styles.pageSelector}>
-              <i className="fas fa-chevron-left " />
-            </div>
-            {viewToDisplay.map((link) => (
-              <div
-                key={link}
-                onClick={() => handlePage(link)}
-                className={styles.pageSelector}
-                style={{
-                  borderBottom: pointer === link ? '2px solid white' : '',
-                }}
-              >
-                P
-                {link}
-              </div>
-            ))}
-            {pageLink.length !== viewToDisplay[viewToDisplay.length - 1] && (
-              <div className={styles.pageLengthInfo}>
-                ...P
-                {pageLink.length}
-              </div>
-            )}
-            <div onClick={handleNext} className={styles.pageSelector}>
-              <i className="fas fa-chevron-right" />
-            </div>
-          </div>
 
           <Select
             onClick={handleClick}
             onChange={handleChange}
             toggle={toggle}
             items={selectItems}
-            defaultValue="category"
+            defaultValue="all"
             setItems={setItems}
           />
         </div>
-
+        {topChapter.length > 0 && <LeadboardCards topChapter={topChapter} />}
         <div className={styles.stats}>
-          {pageToDisplay
-            && pageToDisplay.map((stat, idx) => (
+          {filteredStats.length > 0
+            && filteredStats.slice(0, 4).map((stat, idx) => (
               <ChapterStat key={stat._id} {...stat} idx={idx} />
             ))}
         </div>
diff --git a/components/chapter/chapter-leaderboard/leaderboard.module.css b/components/chapter/chapter-leaderboard/leaderboard.module.css
index 1176fa17..032f9092 100644
--- a/components/chapter/chapter-leaderboard/leaderboard.module.css
+++ b/components/chapter/chapter-leaderboard/leaderboard.module.css
@@ -4,19 +4,17 @@
     justify-content: center;
     align-items: center;
     padding-bottom: 4em;
-    background: linear-gradient(180deg, #151371 0%, rgba(21, 19, 113, 0) 100%);
 }
 
 .container {
-    border: 1px solid white;
     width: 100%;
-    max-width: 64em;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 2em 0;
     position: relative;
+    text-align: center;
 }
 
 .heading {
@@ -42,18 +40,31 @@
 }
 
 .title {
-    font-size: 1.4rem;
-    text-align: left;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 61px;
+    text-align: center;
+    background: linear-gradient(90.87deg, #97C4F5 -2.84%, #33D2FF 82.04%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 15px;
 }
 
 .text {
-    text-align: left;
+    text-align: center;
+    padding: 0 3em;
+    color: white;
+    font-weight: normal;
+    font-size: 30px;
 }
 
 .navbar {
     width: 100%;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: flex-start;
     padding: 0 4em;
     margin-bottom: 2em;
@@ -91,7 +102,6 @@
 
 .stats {
     width: 100%;
-    padding: 0 2em;
 }
 
 .loadButtonContainer {
@@ -111,21 +121,112 @@
     background: #151371;
     color: white;
 }
-
-@media screen and (max-width: 1024px) {
-    .container {
-        width: 48em;
+.LeadboardCards{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    text-align: center;
+    letter-spacing: 0.03em;
+    color: #FFFFFF;
+    height: 530px;
+    margin-bottom: 90px;
+    margin-top: 40px;
+}
+.LeadboardCards >div{
+    background: #1C1D37;
+    border: 1px solid #6938EF;
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 0px 0px 18.4694px rgb(0 0 0 / 10%);
+    border-radius: 18.4694px;
+}    
+.gold{
+    height: 100%;
+}
+.bronze{
+    height: 87%;
+    margin-top: auto;
+}
+.silver{
+    height: 92%;
+    margin-top: auto;
+}
+.detail{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: auto;
+}
+.detail h2{
+    font-weight: bold;
+    font-size: 36px;
+    text-align: center;
+    text-transform: capitalize;
+    letter-spacing: 0.03em;
+    font-family: 'SF Pro Display', sans-serif;
+}
+.detail h3{
+    font-size: 20px;
+    display: flex;
+    text-align: center;
+    text-transform: capitalize;
+    color: #FFFFFF;
+    font-weight: normal;
+    margin-top: 10px;
+}   
+.detail p{
+    font-weight: 600;
+    font-size: 18px;
+    display: flex;
+    text-align: center;
+    color: #FFFFFF;
+    margin: 30px 0 10px;
+}  
+.viewBtn{
+    margin-bottom: 20px;
+} 
+
+.viewBtn a{
+    background: #6938EF;
+    border-radius: 100px;
+    padding: 18px 30px;
+    display: block;
+    font-weight: 600;
+    font-size: 18px;
+    text-align: center;
+    color: #FFFFFF;
+}
+@media screen and (max-width: 992px) {
+    .detail h2{
+        font-size: 26px;
     }
+    .detail h3{
+        font-size: 14px;
+    }
+    .detail p{
+        font-size: 16px;
+    }
+    .viewBtn{
+        width: 100%;
+    }
+    .viewBtn a{
+        font-size: 16px;
+        max-width: 90%;
+        padding: 18px 0px;
+        margin: auto;
+    } 
 }
 
 @media screen and (max-width: 768px) {
+    .LeadboardCards{
+        padding: 0 10px;
+    }
     .wrapper {
         padding: 0 0.5em;
     }
 
-    .container {
-        width: 36em;
-    }
     .stats {
         padding:  1rem;
     }
@@ -150,36 +251,24 @@
 }
 
 @media screen and (max-width: 480px) {
-    .container {
-        padding: 1em 0;
-    }
-
-    .navbar {
-        padding: 0 1em;
-    }
-
-    .loadButtonContainer {
-        padding: 0 1em;
+    .title{
+        font-size: 40px;
     }
-    
-    .loadButton {
-        padding: 0.3em 1em;
+    .text{
+        padding: 0;
+        font-size: 24px;
     }
-
-    .heading{
+    .heading,
+    .navbar {
         padding: 0 1em;
-        font-size: 1rem;
     }
-
-    .tag {
-        right: 1em;
-        font-size: 0.8em;
+    .LeadboardCards{
+        height: fit-content;
+        flex-direction: column;
     }
-
-    .pageLengthInfo,
-    .pageSelector {
-        padding: 0.3em 0.6em;
-        font-size: 12px;
+    .LeadboardCards >div {
+        width: 100%;
+        margin-bottom: 20px;
     }
 }
 
diff --git a/components/chapter/chapter-map-guide/mapGuide.component.jsx b/components/chapter/chapter-map-guide/mapGuide.component.jsx
index 1f7ccecd..fe149ed1 100644
--- a/components/chapter/chapter-map-guide/mapGuide.component.jsx
+++ b/components/chapter/chapter-map-guide/mapGuide.component.jsx
@@ -5,8 +5,8 @@ const MapGuide = ({ categories }) => (
   <div className={styles.container}>
     <div className={styles.heading}>Chapter Type</div>
     {categories
-      && categories.map(({ _id, LocationLogo, chapter_type }) => (
-        <div key={_id} className={styles.iconAndName}>
+      && categories.map(({ id, LocationLogo, chapter_type }) => (
+        <div key={id} className={styles.iconAndName}>
           <div className={styles.icon}>
             <img src={LocationLogo} alt="icon" />
           </div>
diff --git a/components/chapter/chapter-map-guide/mapGuide.module.css b/components/chapter/chapter-map-guide/mapGuide.module.css
index 6496c7b3..ccab3655 100644
--- a/components/chapter/chapter-map-guide/mapGuide.module.css
+++ b/components/chapter/chapter-map-guide/mapGuide.module.css
@@ -28,11 +28,14 @@
 
 .icon {
     margin-right: 1em;
+    background: #1C1D37;
+    border-radius: 50%;
 }
 
 .icon > img {
     width: 100%;
     height: auto;
+    padding: 5px;
 }
 
 @media screen and (max-width: 480px) {
diff --git a/components/chapter/chapter-map/chapterMap.component.jsx b/components/chapter/chapter-map/chapterMap.component.jsx
index 194cafb5..a5d6fb4a 100644
--- a/components/chapter/chapter-map/chapterMap.component.jsx
+++ b/components/chapter/chapter-map/chapterMap.component.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
 import axios from 'axios';
 import styles from './chapterMap.module.css';
-import Dropdown from '../chapter-dropdown/dropdown.component';
+// import Dropdown from '../chapter-dropdown/dropdown.component';
 import ModalContent from '../chapter-modal-content/modalContent.component';
 import MapGuide from '../chapter-map-guide/mapGuide.component';
 
@@ -10,36 +10,47 @@ const mapStyles = {
   width: '100%',
 };
 
-function formatDate(dateStr) {
-  const MONTHS = [
-    'Jan',
-    'Feb',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'Sept',
-    'Oct',
-    'Nov',
-    'Dec',
-  ];
-  const d = new Date(dateStr);
-  const year = d.getFullYear();
-  const month = MONTHS[d.getMonth()];
-  const date = d.getDate();
-
-  return `${month} ${date} ${year}`;
-}
-
-const ChapterMap = ({ google, token }) => {
-  const [active, setActiveDropdown] = useState({});
+const categories = [
+  {
+    id: '1',
+    LocationLogo: '/assets/images/chapter/pre-collage.svg',
+    chapter_type: 'Pre-College',
+  },
+  {
+    id: '2',
+    LocationLogo: '/assets/images/chapter/continental.svg',
+    chapter_type: 'Continental',
+  },
+  {
+    id: '3',
+    LocationLogo: '/assets/images/chapter/national.svg',
+    chapter_type: 'National',
+  },
+  {
+    id: '4',
+    LocationLogo: '/assets/images/chapter/university.svg',
+    chapter_type: 'University',
+  },
+  {
+    id: '5',
+    LocationLogo: '/assets/images/chapter/professional.svg',
+    chapter_type: 'Professional',
+  },
+  {
+    id: '6',
+    LocationLogo: '/assets/images/chapter/regional.svg',
+    chapter_type: 'Regional',
+  },
+];
+
+const ChapterMap = ({
+  google, token, locations, filteredLocations,
+}) => {
+  // const [active, setActiveDropdown] = useState({});
   const [modalIsOpen, setIsOpen] = useState(false);
   const [modalDetails, setModalDetails] = useState({});
   const [activeArea, setActive] = useState();
-  const [locations, setLocations] = useState([]);
-  const [filteredLocations, setFilteredLocations] = useState([]);
+
   const [joinRequests, setJoinRequests] = useState([]);
 
   const location = new Set();
@@ -62,22 +73,6 @@ const ChapterMap = ({ google, token }) => {
 
   const userJoinRequests = findrequests(joinRequests);
 
-  useEffect(() => {
-    axios
-      .get(`${process.env.BASE_URI}/location`)
-      .then((res) => res.data)
-      .then((msg) => msg.data)
-      .then((data) => {
-        const newData = data.map((d) => ({
-          ...d,
-          date_founded: formatDate(d.date_founded),
-        }));
-        setLocations(newData);
-        setFilteredLocations(newData);
-      })
-      .catch((err) => console.error(err));
-  }, []);
-
   useEffect(() => {
     if (token) {
       axios
@@ -88,24 +83,26 @@ const ChapterMap = ({ google, token }) => {
         })
         .then((data) => {
           setJoinRequests(data.data.data);
+          console.log(data.data.data);
         })
         .catch((err) => console.error(err));
     }
   }, []);
 
-  const handlePlaces = (val, category) => {
-    const getNumFromStr = (str) => {
-      const result = str.match(/\d+/);
-      return parseInt(result[0]);
-    };
-    const newLocations = locations.filter((_location) => {
-      if (category === 'all') return _location;
-      if (category === 'member_size') return getNumFromStr(_location.member_size) >= getNumFromStr(val);
-      return _location[category] === val || _location[category] === val;
-    });
-    setFilteredLocations(newLocations);
-    setActiveDropdown({});
-  };
+  // const handlePlaces = (val, category) => {
+  //   const getNumFromStr = (str) => {
+  //     const result = str.match(/\d+/);
+  //     return parseInt(result[0]);
+  //   };
+  //   const newLocations = locations.filter((_location) => {
+  //     if (category === 'all') return _location;
+  //     if (category === 'member_size') return
+  //  getNumFromStr(_location.member_size) >= getNumFromStr(val);
+  //     return _location[category] === val || _location[category] === val;
+  //   });
+  //   setFilteredLocations(newLocations);
+  //   setActiveDropdown({});
+  // };
 
   const handleLocation = (details) => {
     setModalDetails(details);
@@ -115,27 +112,34 @@ const ChapterMap = ({ google, token }) => {
     }
   };
 
-  const handleClick = (key) => {
-    if (Object.keys(active)[0] === key) {
-      setActiveDropdown({});
-    } else {
-      setActiveDropdown({ [key]: true });
-    }
-  };
+  // const handleClick = (key) => {
+  //   if (Object.keys(active)[0] === key) {
+  //     setActiveDropdown({});
+  //   } else {
+  //     setActiveDropdown({ [key]: true });
+  //   }
+  // };
 
-  const handleMapClick = () => {
-    setActiveDropdown({});
-  };
+  // const handleMapClick = () => {
+  //   setActiveDropdown({});
+  // };
+
+  const getMarkerImg = (type) => {
+    let url = '';
 
+    categories.forEach((category) => {
+      if (type.toLowerCase() === category.chapter_type.toLowerCase()) url = category.LocationLogo;
+    });
+    return url;
+  };
   return (
     <div className={styles.wrapper}>
-      <div className={styles.tag}>04</div>
       <div className={styles.headingContainer}>
         <div className={styles.title}>CHAPTER MAP</div>
         <div className={styles.text}>
-          Checkout chapter locations accross the globe
+          View chapter locations across the globe
         </div>
-        <div className={styles.navbar}>
+        {/* <div className={styles.navbar}>
           <div className={styles.resetButtonContainer}>
             <button
               type="button"
@@ -173,7 +177,7 @@ const ChapterMap = ({ google, token }) => {
             heading="Member Size"
             list={[...memberSize]}
           />
-        </div>
+        </div> */}
       </div>
 
       <div id="map" className={styles.mapContainer}>
@@ -188,14 +192,14 @@ const ChapterMap = ({ google, token }) => {
           zoom={2}
           style={mapStyles}
           initialCenter={{ lat: 47.444, lng: -122.176 }}
-          onClick={handleMapClick}
+          // onClick={handleMapClick}
         >
           {filteredLocations
             && filteredLocations.map((place) => (
               <Marker
                 key={place._id}
                 onClick={() => handleLocation({ ...place })}
-                icon={{ url: place.LocationLogo }}
+                icon={{ url: getMarkerImg(place.chapter_type) }}
                 name={place.LocationName}
                 title={place.LocationName}
                 position={{ lat: place.latitude, lng: place.longitude }}
@@ -203,7 +207,7 @@ const ChapterMap = ({ google, token }) => {
             ))}
         </Map>
 
-        <MapGuide categories={locations} />
+        <MapGuide categories={categories} />
 
         {modalIsOpen && (
           <div className={styles.modal} onClick={() => setIsOpen(!!activeArea)}>
diff --git a/components/chapter/chapter-map/chapterMap.module.css b/components/chapter/chapter-map/chapterMap.module.css
index ec8afd48..5fc130e6 100644
--- a/components/chapter/chapter-map/chapterMap.module.css
+++ b/components/chapter/chapter-map/chapterMap.module.css
@@ -52,13 +52,24 @@
 }
 
 .title {
-    font-size: 1.4rem;
+    font-weight: 600;
+    font-size: 61px;
     text-align: center;
+    background: linear-gradient(90.87deg, #97C4F5 -2.84%, #33D2FF 82.04%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 15px;
 }
 
 .text {
     text-align: center;
-    margin-bottom: 2em;
+    padding: 0 3em;
+    color: white;
+    font-weight: normal;
+    font-size: 30px;
 }
 
 .navbar {
@@ -118,13 +129,6 @@
 }
 
 @media screen and (max-width: 768px) {
-    .mapContainer {
-        max-width: 36em;
-    }
-    .headingContainer {
-        max-width: 36em;
-        padding: 0 0.5em;
-    }
     .resetButtonContainer{
         width: 100%;
         justify-content: flex-start;
@@ -141,10 +145,12 @@
 }
 
 @media screen and (max-width: 480px) {
-    .tag {
-        width: 10%;
-        font-size: 10px;
-        padding: 0.3em;
+    .title{
+        font-size: 40px;
+    }
+    .text{
+        padding: 0;
+        font-size: 24px;
     }
 }
 
diff --git a/components/chapter/chapter-modal-content/modalContent.component.jsx b/components/chapter/chapter-modal-content/modalContent.component.jsx
index a727f093..7fae0e3c 100644
--- a/components/chapter/chapter-modal-content/modalContent.component.jsx
+++ b/components/chapter/chapter-modal-content/modalContent.component.jsx
@@ -37,7 +37,8 @@ const ModalContent = ({
         })
         .catch((err) => {
           try {
-            errorToast(err.response.data.data.message.msg);
+            // errorToast(err.response.data.data.message.msg);
+            console.log(err);
           } catch (error) {
             errorToast('Network Error');
           }
diff --git a/components/chapter/chapter-select/select.component.jsx b/components/chapter/chapter-select/select.component.jsx
index 5a732d48..896a2919 100644
--- a/components/chapter/chapter-select/select.component.jsx
+++ b/components/chapter/chapter-select/select.component.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import styles from './select.module.css';
 
 const Select = ({
@@ -6,70 +6,41 @@ const Select = ({
   setItems,
   onClick,
   onChange,
-  toggle,
   defaultValue,
 }) => {
   const [heading, setHeading] = useState(defaultValue);
-  const [list, setList] = useState([]);
-
-  useEffect(() => {
-    const arr = [];
-    if (items) {
-      items.forEach((item) => {
-        if (Object.values(item)[0] === true) {
-          setHeading(Object.keys(item)[0]);
-        } else {
-          arr.push(Object.keys(item)[0]);
-        }
-      });
-    }
-    setList(arr);
-  }, [items]);
+  const [list] = useState([
+    { category: 'weekly', text: 'week' }, { category: 'monthly', text: 'Month' }, { category: 'all', text: 'All Time' },
+  ]);
 
   const handleSelect = (active) => {
-    const arr = [];
     const arr2 = [];
     items.forEach((item) => {
       const i = Object.keys(item)[0];
-      if (i === active) {
+      if (i === active.category) {
         setHeading(i);
         arr2.push({ [i]: true });
       } else {
-        arr.push(i);
         arr2.push({ [i]: false });
       }
     });
-    setList(arr);
     setItems(arr2);
-    onChange(active);
+    onChange(active.category);
     onClick();
   };
 
   return (
     <div className={styles.selectContainer}>
-      <div onClick={onClick} className={styles.selectHeading}>
-        {heading}
-        <i
-          style={{
-            transform: toggle ? 'rotate(180deg)' : 'rotate(0deg)',
-            transition: 'transform 0.2s',
-            marginLeft: '0.5em',
-          }}
-          className="fas fa-angle-down"
-        />
-      </div>
-      <div className={`${styles.selectList} ${toggle && styles.toggle}`}>
-        {list
+      {list
           && list.map((item, idx) => (
             <div
               key={`${idx + 1}`}
               onClick={() => handleSelect(item)}
-              className={styles.selectItem}
+              className={`${styles.selectItem} ${heading === item.category && styles.toggle}`}
             >
-              {item}
+              {item.text}
             </div>
           ))}
-      </div>
     </div>
   );
 };
diff --git a/components/chapter/chapter-select/select.module.css b/components/chapter/chapter-select/select.module.css
index e11952db..60d4521b 100644
--- a/components/chapter/chapter-select/select.module.css
+++ b/components/chapter/chapter-select/select.module.css
@@ -1,11 +1,11 @@
 .selectContainer {
-    /* flex: 1 1 auto; */
-    width: auto;
     display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    position: relative;
-    z-index: 10;
+    background: #1C1D37;
+    border: 1px solid #6938EF;
+    box-sizing: border-box;
+    border-radius: 76.6666px;
+    font-size: 32px;
+    padding: 0 8px;
 }
 
 .selectHeading {
@@ -20,37 +20,43 @@
 }
 
 .selectList {
-    height: auto;
+    /* height: auto;
     max-height: 0;
     position: absolute;
     right: 0;
     top: 2.2em;
     white-space: nowrap;    
     transition: all 1s ease-in-out;
-    overflow: hidden;
+    overflow: hidden; */
 }
 
-.selectList.toggle {
-    max-height: 20em;
-    border-bottom: 3px solid #00000e;
+.toggle {
+    background: #6938EF;
+    border-radius: 70px;
 }
 
 .selectItem {
     width: auto;
-    min-width: 6em;
+    min-width: 4.5em;
     cursor: pointer;
-    background: #151371;
+    /* background: #151371; */
     color: white;
-    padding: 0.2em 2em;
+    padding: 20px 30px;
     text-transform: capitalize;
+    margin: 8px 0;
+    border-radius: 70px;
+    transition: .3s ease-in;
 }
 
 .selectItem:hover {
-    background: #0d0c4b;
+   color: #6938EF;
 }
 
+.toggle:hover {
+    color: white;
+}   
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 768px) {
     .selectHeading {
         padding: 0.1em 1em;
         font-size: 14px;
diff --git a/components/chapter/chapter-slider/ChapterSlider.js b/components/chapter/chapter-slider/ChapterSlider.js
new file mode 100644
index 00000000..a78673be
--- /dev/null
+++ b/components/chapter/chapter-slider/ChapterSlider.js
@@ -0,0 +1,216 @@
+import React, { useState, useEffect } from 'react';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import axios from 'axios';
+import { useRouter } from 'next/router';
+import styles from './slider.module.css';
+import { errorToast, successToast } from '../../../contexts/utils/toasts';
+
+const ChapterSlider = ({ locations: data, token }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [sliderRef, setSliderRef] = useState(null);
+  const [locations, setLocations] = useState(data);
+  const [winSize, setWinSize] = useState();
+  const [pagination, setPagination] = useState(1);
+  const router = useRouter();
+  // Slider Settings
+  let slidesToShow = 3;
+  const slidesPerRow = 2;
+  let totalSlides = slidesToShow * slidesPerRow;
+  useEffect(() => {
+    setLocations(data);
+  }, [data]);
+  useEffect(() => {
+    if (window.innerWidth > 1180) {
+      slidesToShow = 3;
+    }
+    if (window.innerWidth <= 1180) {
+      slidesToShow = 2;
+    }
+    if (window.innerWidth <= 768) {
+      slidesToShow = 1;
+    }
+
+    totalSlides = (slidesToShow * slidesPerRow) - 2;
+    const pag = Math.ceil(locations.length / totalSlides);
+    setPagination(pag);
+  }, [locations]);
+  useEffect(() => {
+    const handleResize = () => {
+      setWinSize(window.innerWidth);
+      if (winSize <= 1180) {
+        slidesToShow = 2;
+        totalSlides = slidesToShow * slidesPerRow;
+        const pag = Math.ceil(locations.length / totalSlides);
+        setPagination(pag);
+      }
+      if (winSize <= 768) {
+        slidesToShow = 1;
+        totalSlides = slidesToShow * slidesPerRow;
+        const pag = Math.ceil(locations.length / totalSlides);
+        setPagination(pag);
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [winSize]);
+
+  const conditionalInfinite = {
+    arrows: false,
+    dots: false,
+    className: 'chapter__slick-slider',
+    speed: 2000,
+    slidesToShow,
+    slidesPerRow,
+    infinite: locations.length > totalSlides,
+    autoplay: false,
+    slidesToScroll: 1,
+    afterChange: (current) => { if (current <= pagination) { setCurrentIndex(current); } },
+    responsive: [
+      {
+        breakpoint: 1755,
+        settings: {
+          slidesToShow: 3,
+          infinite: locations.length > totalSlides,
+        },
+      },
+      {
+        breakpoint: 1180,
+        settings: {
+          slidesToShow: 2,
+          infinite: locations.length > 2,
+        },
+      },
+      {
+        breakpoint: 768,
+        settings: {
+          slidesToShow: 1,
+          infinite: locations.length > 1,
+        },
+      },
+    ],
+  };
+  const searchHandler = (e) => {
+    const filterLocation = data.filter(
+      (location) => location.location.toLowerCase().includes(e.target.value.toLowerCase())
+      || location.LocationName.toLowerCase().includes(e.target.value.toLowerCase())
+      ,
+    );
+    setLocations(filterLocation);
+  };
+
+  const handleJoin = (location) => {
+    if (token) {
+      axios
+        .post(
+          'http://localhost:5000/api/v1/joinChapter',
+          {
+            chapterLocation_id: location._id,
+          },
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          },
+        )
+        .then(() => {
+          successToast('You have successfully joined a chapter');
+          setTimeout(location.reload(true), 2000);
+        })
+        .catch((err) => {
+          try {
+            errorToast(err.response.data.data.message.msg);
+            console.log(err);
+          } catch (error) {
+            errorToast('Network Error');
+          }
+        });
+    } else {
+      errorToast('Please login to continue');
+    }
+  };
+  return (
+    <div className="container">
+      <div className={styles.title}>
+        All Chapters
+      </div>
+      <div className={styles.text}>
+        Search and select a chapter to find out more
+      </div>
+      <div className={styles.serchBar}>
+        <div>
+          <input type="text" onChange={searchHandler} placeholder="Search by Location, School etc." />
+        </div>
+        <a>Search</a>
+      </div>
+      {locations?.length ? (
+
+        <>
+          <Slider ref={setSliderRef} {...conditionalInfinite}>
+            {locations.map(
+              (location) => (
+                <div key={location._id} className={styles.cardContainer}>
+                  <div className={styles.imgWrapper}>
+                    {location.LocationLogo && <img src={location.LocationLogo} alt="location-img" />}
+                    {!location.LocationLogo && <img src="/assets/images/favicons/android-chrome-512x512.png" className={styles.noImg} alt="location-img" />}
+                  </div>
+                  <div className={styles.universityName}>
+                    <img src="/assets/images/chapter/mpa-logo.png" alt="MPA logo" />
+                    <p>{location.location}</p>
+                  </div>
+                  <div className={styles.description}>
+                    {location.description}
+
+                  </div>
+                  <div className={styles.detail}>
+                    <div className="tw-flex tw-justify-between tw-mb-4">
+                      <div>
+                        <h2>Chapter Leader</h2>
+                        <p>{location.chapter_leader}</p>
+                      </div>
+                      <div>
+                        <h2>Member Size</h2>
+                        <p style={{ width: 'fit-content' }} className="tw-ml-auto">{location.member_size}</p>
+                      </div>
+                    </div>
+                    <div>
+                      <h2>Chapter Type</h2>
+                      <p>{location.chapter_type}</p>
+                    </div>
+                  </div>
+                  <div className={styles.btnRow}>
+                    <a onClick={() => handleJoin(location)}>Join Chapter</a>
+                    <p onClick={() => router.push(`chapter/${location._id}`)}>
+                      Learn More
+                    </p>
+                  </div>
+                </div>
+              ),
+            )}
+          </Slider>
+          <div style={{ justifyContent: 'center' }} className="profile-projects-controllers">
+            <div className={styles.sliderController}>
+              <img onClick={sliderRef?.slickPrev} style={{ transform: 'rotate(180deg)' }} src="/assets/images/arrow-righ-circle.svg" alt="control" />
+              <p>
+                {locations.length > 0
+                  ? `${currentIndex + 1}/${pagination}` : '1/1'}
+              </p>
+              <img onClick={sliderRef?.slickNext} src="/assets/images/arrow-righ-circle.svg" alt="control" />
+            </div>
+          </div>
+        </>
+
+      ) : (
+        <span className="note tw-text-white tw-m-4 tw" style={{ cursor: 'default' }}>
+          No Chapters yet
+        </span>
+      )}
+
+    </div>
+  );
+};
+
+export default ChapterSlider;
diff --git a/components/chapter/chapter-slider/slider.module.css b/components/chapter/chapter-slider/slider.module.css
new file mode 100644
index 00000000..031c373e
--- /dev/null
+++ b/components/chapter/chapter-slider/slider.module.css
@@ -0,0 +1,165 @@
+.cardContainer{
+    min-height: 580px;
+    color: white;
+    width: 100% !important;
+    border-radius: 17.6644px;
+    background: #1C1D37;
+    border: 1px solid #6938EF;
+    overflow: hidden; 
+    margin-bottom: 30px;
+    display: flex !important;
+    flex-direction: column;
+}
+.imgWrapper img{
+    height: 180px;
+    object-fit: contain;
+    width: 100%;
+    border-bottom: 1.17763px solid #6938EF;
+    filter: drop-shadow(0px 37.6841px 48.2827px rgba(0, 0, 0, 0.25));
+    object-fit: cover;
+}
+.universityName{
+    display: flex;
+    padding: 20px;
+    padding-bottom: 10px;
+    font-weight: 600;
+    font-size: 18px;
+    align-items: center;
+}
+.universityName img{
+    margin-right: 10px;
+    border-radius: 5.89px;
+    background: #fff;
+    padding: 2px;
+}   
+.description{
+    padding: 0 10px 0px 20px;
+    font-size: 16px;
+    font-weight: normal;
+    margin-bottom: 20px;
+}
+.detail{
+    display: flex;
+    flex-direction: column;
+    padding-left: 20px;
+    padding-right: 10px;
+    font-size: 16px;
+    font-weight: 500;
+}
+.detail h2{
+    margin-bottom: 10px;
+}   
+.detail p{
+    letter-spacing: 0.03em;
+    color: #FD05B3;
+    font-weight: 600;
+}
+.btnRow{
+    display: flex;
+    margin-top: auto;
+    margin-bottom: 20px;
+    justify-content: space-between;
+    padding-left: 20px;
+    padding-right: 10px;
+}
+.btnRow a,.btnRow p{
+    font-weight: 600;
+    font-size: 16px;
+    border: 1px solid #6938EF;
+    border-radius: 42.3946px;
+    padding: 12px 15px;
+    cursor: pointer;
+    transition: background 0.3s ease-in;
+}
+.btnRow a{
+    background: #6938EF;
+}
+.btnRow p:hover{
+    background: #6938EF;
+}
+.title {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 61px;
+    text-align: center;
+    background: linear-gradient(90.87deg, #97C4F5 -2.84%, #33D2FF 82.04%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 15px;
+}
+
+.text {
+    text-align: center;
+    padding: 0 3em;
+    color: white;
+    font-weight: normal;
+    font-size: 30px;
+}
+.serchBar{
+    display: grid;
+    grid-template-columns: 70% 28%;
+    grid-gap: 2%;
+    margin-top: 70px;
+    margin-bottom: 40px;
+}
+.serchBar div{
+    background: #D9D9D9;
+    border-radius: 37px;
+}
+
+.serchBar input{
+    background: url(/assets/images/chapter/search.svg);
+    color: black;
+    padding: 10px 20px 10px 30px;
+    width: 100%;
+    height: 100%;
+    font-weight: 400;
+    font-size: 24px;
+    background-repeat: no-repeat;
+    background-position-x: 97%;
+    background-position-y: 50%;
+    border: none;
+    outline: none;
+}
+.serchBar input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: rgba(0, 0, 0, 0.66);
+}
+  
+.serchBar input:-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color: rgba(0, 0, 0, 0.66);
+}
+
+.serchBar input::-ms-input-placeholder { /* Microsoft Edge */
+    color: rgba(0, 0, 0, 0.66);
+}
+.serchBar> a{
+    font-weight: 600;
+    color: white !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 42.3946px;
+    background: #6938EF;
+    font-size: 18px;
+    margin-right: 6%;
+}    
+.sliderController{
+    height: 70px !important;
+    font-size: 20px;
+    margin-bottom: 50px;
+}
+@media screen and (max-width: 480px) {
+    .title{
+        font-size: 40px;
+    }
+    .text{
+        padding: 0;
+        font-size: 24px;
+    }
+    .name {
+        font-size: 20px;
+    }
+}
\ No newline at end of file
diff --git a/components/chapter/chapter-stat/chapterStat.component.jsx b/components/chapter/chapter-stat/chapterStat.component.jsx
index acaeed2e..8f7cc658 100644
--- a/components/chapter/chapter-stat/chapterStat.component.jsx
+++ b/components/chapter/chapter-stat/chapterStat.component.jsx
@@ -1,51 +1,35 @@
 import React from 'react';
 import styles from './chapterStat.module.css';
 
-const ChapterStat = ({
-  number, place, amount, name, time, idx,
-}) => {
-  const d = new Date(time);
-  const h = d.getHours();
-  const m = d.getMinutes();
-  const s = d.getSeconds();
+const titleUpperCase = (title) => {
+  const words = title.toLowerCase().split(' ');
 
-  const isEven = () => {
-    if (parseInt(idx) % 2 === 0) {
-      return true;
-    }
-    return false;
-  };
+  return words.map((word) => word[0].toUpperCase() + word.substring(1)).join(' ');
+};
 
-  return (
-    <div className={styles.wrapper}>
-      <div
-        className={`${styles.effect} ${
-          isEven() ? styles.effect1 : styles.effect2
-        }`}
-      />
-      <div
-        className={`${styles.container} ${
-          isEven() ? styles.grad1 : styles.grad2
-        }`}
-      >
-        <div className={styles.number}>{number}</div>
-        <div className={styles.nameAndLocation}>
-          <div className={styles.name}>{name}</div>
-          <div className={styles.location}>{place}</div>
-        </div>
-        <div className={styles.timeAndPoints}>
-          <div className={styles.amount}>
-            {amount}
-            <span className={styles.points}>points</span>
-            {' '}
-            <div className={styles.pts}>pts</div>
-            {' '}
-          </div>
-          <div className={styles.time}>{`${h}:${m}:${s}`}</div>
+const ChapterStat = ({
+  place, amount, name, idx,
+}) => (
+  <div className={styles.wrapper}>
+    <div
+      className={`${styles.effect} `}
+    />
+    <div
+      className={`${styles.container}`}
+    >
+      <div className={styles.number}>{idx + 1}</div>
+      <div className={styles.nameAndLocation}>
+        <div className={styles.name}>{titleUpperCase(name)}</div>
+        <div className={styles.location}>{place}</div>
+      </div>
+      <div className={styles.timeAndPoints}>
+        <div className={styles.amount}>
+          {amount}
+&nbsp;points
         </div>
       </div>
     </div>
-  );
-};
+  </div>
+);
 
 export default ChapterStat;
diff --git a/components/chapter/chapter-stat/chapterStat.module.css b/components/chapter/chapter-stat/chapterStat.module.css
index 1fdd8498..d440f407 100644
--- a/components/chapter/chapter-stat/chapterStat.module.css
+++ b/components/chapter/chapter-stat/chapterStat.module.css
@@ -1,7 +1,5 @@
 .wrapper {
-    background: white;
     margin-bottom: 1em;
-    clip-path: polygon(0% 0%, 97% 0, 100% 50%, 97% 100%, 0% 100%);
     padding: 0.3em;
     padding-right: 0.5em;
 }
@@ -31,9 +29,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 1em 2em;
-    clip-path: polygon(0% 0%, 97.5% 0, 100% 50%, 97.5% 100%, 0% 100%);
-    z-index: 5;
+    height: 100px;
+    background: #1C1D37;
+    border: 1px solid #6938EF;
+    border-radius: 10px;
 }
 
 .container.grad2{
@@ -45,17 +44,40 @@
 }
 
 .number {
-    margin-right: 2em;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    width: 100px;
+    justify-content: center;
+    background: linear-gradient(91.39deg, #FF00B8 17.68%, #CC00FF 106.94%);
+    border-radius: 10px 1px 1px 10px;
+    color: #FFFFFF;
+    font-weight: bold;
+    font-size: 48px;
+    margin-right: 4%;
+    font-family: 'SF Pro Display', sans-serif;
 }
 
 .nameAndLocation {
-    flex: 1 1 auto;
     word-wrap: break-word;
+    margin-right: auto;
+    text-align: left;
+    /* padding: 1em 2em; */
 }
 
 .amount,
 .name {
-    color: #FFC700;
+    font-weight: bold;
+    font-size: 26px;
+    line-height: 31px;
+    text-align: center;
+    letter-spacing: 0.03em;
+    color: #FFFFFF;
+    font-family: 'SF Pro Display', sans-serif;
+}
+.amount{
+    font-weight: 500;
+    margin-right: 10px;
 }
 
 .number,
@@ -65,7 +87,11 @@
 .time {
     color: white;
 }
-
+.location{
+    font-size: 18px;
+    text-transform: capitalize;
+    font-weight: normal;
+}
 .timeAndPoints {
     width: auto;
 }
@@ -82,30 +108,22 @@
     .wrapper {
         padding: 0.3em;
     }
-
-    .container {
-        padding: 1em;
-    }
 }
 
 @media screen and (max-width: 480px) {
     .nameAndLocation,
     .timeAndPoints,
     .number {
-        font-size: 12px;
+        font-size: 20px;
     }
-    .number {
-        margin-right: 1em;
+    .name{
+        font-size: 20px;
     }
-    .wrapper {
-        padding: 0.2em 0.3em;
-    }
-
-    .points {
-        display: none;
+    .amount{
+        font-size: 16px;
     }
-    .pts {
-        display: inline-block;
+    .number{
+        width: 70px;
     }
 }
 
diff --git a/components/chapter/chapter-toolkit-content/toolkitContent.module.css b/components/chapter/chapter-toolkit-content/toolkitContent.module.css
index 2d83fc8c..474401bf 100644
--- a/components/chapter/chapter-toolkit-content/toolkitContent.module.css
+++ b/components/chapter/chapter-toolkit-content/toolkitContent.module.css
@@ -18,11 +18,12 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    background: white;
+    background: #1C1D37;
     padding: 0 4em;
     padding-bottom: 4em;
     padding-top: 6em;
     position: relative;
+    color: white;
 }
 
 .linkContainer {    
@@ -58,8 +59,8 @@
     width: 4em;
     height: 2.7em;
     cursor: pointer;
-    background: #ffc700;
-    color: #151371;
+    background: #8040d2;
+    color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -70,7 +71,7 @@
     margin-bottom: 0.5em;
     text-align: center;
     font-size: 2rem;
-    color: #151371;
+    color: #ffffff;
 }
 
 .subtitle {
@@ -93,7 +94,7 @@
     width: 100%;
     text-align: start;
     font-size: 1.6em;
-    color: #151371;
+    color: #ffffff;
 }
 
 @media screen and (max-width: 1024px) {
diff --git a/components/chapter/chapter-toolkit-item/toolkit.component.jsx b/components/chapter/chapter-toolkit-item/toolkit.component.jsx
index f1215df1..5692e49d 100644
--- a/components/chapter/chapter-toolkit-item/toolkit.component.jsx
+++ b/components/chapter/chapter-toolkit-item/toolkit.component.jsx
@@ -11,8 +11,9 @@ const ToolkitItem = ({ name, image, slug }) => (
       }}
     >
       <a>
-        <div className={styles.overlay} />
-        <img src={image} alt="icon" />
+        <div className={styles.imgContainer}>
+          <img src={image} alt="icon" />
+        </div>
         <div className={styles.name}>{name}</div>
       </a>
     </Link>
diff --git a/components/chapter/chapter-toolkit-item/toolkit.module.css b/components/chapter/chapter-toolkit-item/toolkit.module.css
index d58f67ce..07df2e56 100644
--- a/components/chapter/chapter-toolkit-item/toolkit.module.css
+++ b/components/chapter/chapter-toolkit-item/toolkit.module.css
@@ -1,25 +1,40 @@
 .container {
     position: relative;
+    background: #1C1D37;
+    border: 1px solid #6938EF;
+    display: flex;
+    box-shadow: 0px 0px 18.4694px rgba(0, 0, 0, 0.1);
+    border-radius: 18.4694px;
+    padding: 2rem 2rem;
+}
+.container >a{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
 }
-
 .container:hover .overlay {
     border-top: 2px solid white;
     border-right: 2px solid white;
     transform: translate(2px, -2px);
 }
 
-.container > img {
+.container  img {
     width: 100%;
     height: auto;
+    margin: auto;
 }
 
 .name {
     width: 100%;
-    padding: 1em 0;
-    background: #FF00B8;
+    /* padding: 1em 0; */
+    /* background: #FF00B8; */
     text-align: center;
     color: white;
     z-index: 5;
+    font-weight: bold;
+    font-size: 30px;
+    letter-spacing: 0.03em;
+    margin-top: 10px;
 }
 
 .overlay {
@@ -29,10 +44,27 @@
     transition: all 0.2s;
     background: transparent;
 }
-
+.imgContainer{
+    height: 310px;
+    display: flex;
+    width: 85%;
+    margin: 0 auto;
+}
+@media screen and (max-width: 768px) {
+    .container  img {
+        height: 100%;
+        object-fit: contain;
+    }
+}
 @media screen and (max-width: 480px) {
+    .heading{
+        font-size: 40px;
+    }
+    .text{
+        padding: 0;
+        font-size: 24px;
+    }
     .name {
-        font-size: 10px;
-        padding: 1em 0;
+        font-size: 20px;
     }
 }
\ No newline at end of file
diff --git a/components/chapter/chapter-toolkit-menu/chapterToolkit.component.jsx b/components/chapter/chapter-toolkit-menu/chapterToolkit.component.jsx
index 6b3f53ba..88f85d6e 100644
--- a/components/chapter/chapter-toolkit-menu/chapterToolkit.component.jsx
+++ b/components/chapter/chapter-toolkit-menu/chapterToolkit.component.jsx
@@ -5,8 +5,8 @@ import ToolkitItem from '../chapter-toolkit-item/toolkit.component';
 
 const Toolkit = () => (
   <div className={styles.wrapper}>
-    <div className={styles.tag}>02</div>
-    <div className={styles.container}>
+
+    <div className={`${styles.container} container`}>
       <div className={styles.heading}>CHAPTER TOOLKIT</div>
       <div className={styles.text}>
         Check out our valuable resources to get insight on our chapters.
diff --git a/components/chapter/chapter-toolkit-menu/chapterToolkit.module.css b/components/chapter/chapter-toolkit-menu/chapterToolkit.module.css
index c46e3e4e..f22987cf 100644
--- a/components/chapter/chapter-toolkit-menu/chapterToolkit.module.css
+++ b/components/chapter/chapter-toolkit-menu/chapterToolkit.module.css
@@ -3,14 +3,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(180deg, rgba(21, 19, 113, 0) 0%, #151371 100%);
     padding-bottom: 4em;
     position: relative;
 }
 
 .container {
     width: 100%;
-    max-width: 64em;
+    /* max-width: 64em; */
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -30,8 +29,17 @@
   }
 
 .heading {
-    font-size: 1.6rem;
-    color: white;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 61px;
+    text-align: center;
+    background: linear-gradient(90.87deg, #97C4F5 -2.84%, #33D2FF 82.04%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 15px;
 }
 
 .text {
@@ -39,28 +47,26 @@
     text-align: center;
     padding: 0 3em;
     color: white;
+    font-weight: normal;
+    font-size: 30px;
 }
 
 .menu {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 1em;
+    gap: 3em;
 }
 
 @media screen and (max-width: 1024px) {
-    .container {
-        width: 48rem;
-    }
+    .menu {
+        grid-template-columns: repeat(2, 1fr);
+    }   
 }
 
 @media screen and (max-width: 768px) {
-    .container {
-        width: 36rem;
-    }
-
     .menu {
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(1, 1fr);
     }
 }
 
@@ -69,26 +75,12 @@
         padding-right: 0.5em;
         padding-left: 0.5em;
     }
-
-    .tag {
-        width: 10%;
-        padding: 0.3em;
-        font-size: 10px;
-    }
-
-    .container {
-        width: 24rem;
-    }
-    .menu {
-        gap: 0.5em;
-    }
-
-    .heading {
-        font-size: 1rem;
+    .heading{
+        font-size: 40px;
     }
-
-    .text {
-        font-size: 12px;
+    .text{
+        padding: 0;
+        font-size: 24px;
     }
 }
 
diff --git a/components/chapter/chapter-wrapper/ChapterWrapper.module.css b/components/chapter/chapter-wrapper/ChapterWrapper.module.css
index 37239270..0c3acfe4 100644
--- a/components/chapter/chapter-wrapper/ChapterWrapper.module.css
+++ b/components/chapter/chapter-wrapper/ChapterWrapper.module.css
@@ -1,8 +1,4 @@
 .wrapper {
-    background: linear-gradient(
-        104.61deg,
-        #ff00b8 2.65%,
-        #ff655b 51.83%,
-        #ffc700 100%
-      );
+  background: #14152B;
+  font-family: 'Poppins', sans-serif;
 }
\ No newline at end of file
diff --git a/components/chapter/view/CategoriesIcons.js b/components/chapter/view/CategoriesIcons.js
new file mode 100644
index 00000000..566d5488
--- /dev/null
+++ b/components/chapter/view/CategoriesIcons.js
@@ -0,0 +1,114 @@
+import React from 'react';
+
+const Startup = (
+  <svg width="49" height="50" viewBox="0 0 49 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M48.1818 2.65894C48.1813 2.65572 48.1813 2.65244 48.1818 2.64922C48.0914 2.24904 47.892 1.88233 47.6062 1.59048C47.3204 1.29862 46.9595 1.09323 46.5643 0.997474C43.3784 0.212625 38.3666 1.04929 32.8127 3.2948C27.215 5.56191 21.9701 8.90858 18.425 12.4949C17.2887 13.6363 16.2331 14.8567 15.2659 16.1471C12.8786 16.0392 10.7758 16.3825 9.0043 17.163C2.83144 19.9062 1.06853 26.9266 0.599199 29.8091C0.531286 30.2187 0.557878 30.6385 0.676904 31.036C0.795931 31.4335 1.00418 31.7979 1.28545 32.1008C1.56672 32.4038 1.91342 32.6371 2.29856 32.7826C2.68371 32.9281 3.09692 32.9819 3.50603 32.9399H3.51992L10.3962 32.182C10.4048 32.2705 10.4144 32.3515 10.4219 32.426C10.5102 33.2721 10.8839 34.0619 11.4803 34.6629L14.8361 38.0538C15.4304 38.6569 16.2123 39.0347 17.0502 39.1237L17.28 39.1485L16.5317 46.0837V46.0977C16.4934 46.4712 16.5328 46.8487 16.6472 47.2059C16.7617 47.5632 16.9487 47.8924 17.1963 48.1726C17.444 48.4527 17.7467 48.6776 18.0853 48.8328C18.4239 48.988 18.7909 49.0702 19.1627 49.0741C19.3113 49.0742 19.4597 49.0619 19.6064 49.0374C22.4768 48.571 29.4258 46.8124 32.1349 40.5455C32.9014 38.7685 33.2403 36.6536 33.1452 34.2472C34.4289 33.2727 35.6418 32.2066 36.7747 31.0571C40.3486 27.4664 43.6735 22.2132 45.895 16.6426C48.1069 11.098 48.9398 5.99913 48.1818 2.65894ZM36.7362 21.5385C35.8578 22.4265 34.7383 23.0314 33.5193 23.2767C32.3004 23.5221 31.0367 23.3968 29.8883 22.9168C28.7398 22.4368 27.7582 21.6236 27.0675 20.5801C26.3768 19.5366 26.0082 18.3096 26.0082 17.0545C26.0082 15.7994 26.3768 14.5724 27.0675 13.5289C27.7582 12.4854 28.7398 11.6722 29.8883 11.1922C31.0367 10.7122 32.3004 10.5869 33.5193 10.8322C34.7383 11.0776 35.8578 11.6825 36.7362 12.5705C37.325 13.1561 37.7926 13.8541 38.1117 14.6239C38.4309 15.3937 38.5952 16.22 38.5952 17.0545C38.5952 17.889 38.4309 18.7152 38.1117 19.485C37.7926 20.2549 37.325 20.9529 36.7362 21.5385Z" fill="white" />
+  </svg>
+);
+
+const Community = (
+  <svg width="60" height="47" viewBox="0 0 60 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.51962 19.9959C12.74 19.9959 15.3582 17.0687 15.3582 13.4683C15.3582 9.86792 12.74 6.9407 9.51962 6.9407C6.29926 6.9407 3.68102 9.86792 3.68102 13.4683C3.68102 17.0687 6.29926 19.9959 9.51962 19.9959ZM50.3898 19.9959C53.6102 19.9959 56.2284 17.0687 56.2284 13.4683C56.2284 9.86792 53.6102 6.9407 50.3898 6.9407C47.1694 6.9407 44.5512 9.86792 44.5512 13.4683C44.5512 17.0687 47.1694 19.9959 50.3898 19.9959ZM53.3091 23.2597H47.4705C45.8649 23.2597 44.4144 23.9839 43.3561 25.1568C47.0326 27.4109 49.6417 31.4804 50.2073 36.3149H56.2284C57.8431 36.3149 59.1477 34.8564 59.1477 33.0511V29.7873C59.1477 26.1869 56.5294 23.2597 53.3091 23.2597ZM29.9547 23.2597C35.6017 23.2597 40.1723 18.1498 40.1723 11.8364C40.1723 5.52298 35.6017 0.413086 29.9547 0.413086C24.3077 0.413086 19.7372 5.52298 19.7372 11.8364C19.7372 18.1498 24.3077 23.2597 29.9547 23.2597ZM36.961 26.5235H36.2038C34.3063 27.5435 32.1989 28.1554 29.9547 28.1554C27.7105 28.1554 25.6123 27.5435 23.7056 26.5235H22.9484C17.1463 26.5235 12.4389 31.7864 12.4389 38.2732V41.2106C12.4389 43.9135 14.4003 46.1063 16.8179 46.1063H43.0916C45.5091 46.1063 47.4705 43.9135 47.4705 41.2106V38.2732C47.4705 31.7864 42.7631 26.5235 36.961 26.5235ZM16.5533 25.1568C15.4951 23.9839 14.0445 23.2597 12.4389 23.2597H6.60032C3.37997 23.2597 0.761719 26.1869 0.761719 29.7873V33.0511C0.761719 34.8564 2.06628 36.3149 3.68102 36.3149H9.69295C10.2677 31.4804 12.8768 27.4109 16.5533 25.1568Z" fill="white" />
+  </svg>
+);
+
+const Event = (
+  <svg width="54" height="59" viewBox="0 0 54 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.21034 54.4633H13.5166V45.0488H4.21034V54.4633ZM15.5847 54.4633H25.925V45.0488H15.5847V54.4633ZM4.21034 42.9567H13.5166V32.4961H4.21034V42.9567ZM15.5847 42.9567H25.925V32.4961H15.5847V42.9567ZM4.21034 30.404H13.5166V20.9895H4.21034V30.404ZM27.9931 54.4633H38.3334V45.0488H27.9931V54.4633ZM15.5847 30.404H25.925V20.9895H15.5847V30.404ZM40.4014 54.4633H49.7077V45.0488H40.4014V54.4633ZM27.9931 42.9567H38.3334V32.4961H27.9931V42.9567ZM16.6187 14.7132V5.29865C16.6187 5.01534 16.5164 4.77017 16.3117 4.56314C16.1071 4.3561 15.8647 4.25259 15.5847 4.25259H13.5166C13.2366 4.25259 12.9942 4.3561 12.7896 4.56314C12.5849 4.77017 12.4826 5.01534 12.4826 5.29865V14.7132C12.4826 14.9965 12.5849 15.2416 12.7896 15.4487C12.9942 15.6557 13.2366 15.7592 13.5166 15.7592H15.5847C15.8647 15.7592 16.1071 15.6557 16.3117 15.4487C16.5164 15.2416 16.6187 14.9965 16.6187 14.7132ZM40.4014 42.9567H49.7077V32.4961H40.4014V42.9567ZM27.9931 30.404H38.3334V20.9895H27.9931V30.404ZM40.4014 30.404H49.7077V20.9895H40.4014V30.404ZM41.4355 14.7132V5.29865C41.4355 5.01534 41.3331 4.77017 41.1285 4.56314C40.9238 4.3561 40.6815 4.25259 40.4014 4.25259H38.3334C38.0533 4.25259 37.811 4.3561 37.6063 4.56314C37.4017 4.77017 37.2993 5.01534 37.2993 5.29865V14.7132C37.2993 14.9965 37.4017 15.2416 37.6063 15.4487C37.811 15.6557 38.0533 15.7592 38.3334 15.7592H40.4014C40.6815 15.7592 40.9238 15.6557 41.1285 15.4487C41.3331 15.2416 41.4355 14.9965 41.4355 14.7132ZM53.8438 12.621V54.4633C53.8438 55.5966 53.4345 56.5772 52.6159 57.4054C51.7973 58.2335 50.8279 58.6476 49.7077 58.6476H4.21034C3.09014 58.6476 2.12074 58.2335 1.30213 57.4054C0.483523 56.5772 0.0742188 55.5966 0.0742188 54.4633V12.621C0.0742188 11.4878 0.483523 10.5071 1.30213 9.67901C2.12074 8.85088 3.09014 8.43682 4.21034 8.43682H8.34647V5.29865C8.34647 3.86032 8.85271 2.62902 9.8652 1.60476C10.8777 0.580492 12.0948 0.0683594 13.5166 0.0683594H15.5847C17.0065 0.0683594 18.2236 0.580492 19.2361 1.60476C20.2486 2.62902 20.7548 3.86032 20.7548 5.29865V8.43682H33.1632V5.29865C33.1632 3.86032 33.6695 2.62902 34.6819 1.60476C35.6944 0.580492 36.9116 0.0683594 38.3334 0.0683594H40.4014C41.8232 0.0683594 43.0404 0.580492 44.0528 1.60476C45.0653 2.62902 45.5716 3.86032 45.5716 5.29865V8.43682H49.7077C50.8279 8.43682 51.7973 8.85088 52.6159 9.67901C53.4345 10.5071 53.8438 11.4878 53.8438 12.621Z" fill="white" />
+  </svg>
+);
+
+const Chapter = (
+  <svg width="57" height="54" viewBox="0 0 57 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#clip0_370_35)">
+      <path d="M21.6047 36.2822H3.81238C2.86861 36.2822 1.9635 36.6608 1.29616 37.3347C0.628816 38.0086 0.253906 38.9226 0.253906 39.8756V50.6558C0.253906 51.6089 0.628816 52.5229 1.29616 53.1968C1.9635 53.8706 2.86861 54.2492 3.81238 54.2492H21.6047C22.5485 54.2492 23.4536 53.8706 24.121 53.1968C24.7883 52.5229 25.1632 51.6089 25.1632 50.6558V39.8756C25.1632 38.9226 24.7883 38.0086 24.121 37.3347C23.4536 36.6608 22.5485 36.2822 21.6047 36.2822ZM3.81238 50.6558V39.8756H21.6047V50.6558H3.81238Z" fill="white" />
+      <path d="M53.6282 36.2822H35.8358C34.8921 36.2822 33.9869 36.6608 33.3196 37.3347C32.6523 38.0086 32.2773 38.9226 32.2773 39.8756V50.6558C32.2773 51.6089 32.6523 52.5229 33.3196 53.1968C33.9869 53.8706 34.8921 54.2492 35.8358 54.2492H53.6282C54.572 54.2492 55.4771 53.8706 56.1444 53.1968C56.8118 52.5229 57.1867 51.6089 57.1867 50.6558V39.8756C57.1867 38.9226 56.8118 38.0086 56.1444 37.3347C55.4771 36.6608 54.572 36.2822 53.6282 36.2822ZM35.8358 50.6558V39.8756H53.6282V50.6558H35.8358Z" fill="white" />
+      <path d="M14.1319 28.7355H43.3114V34.2693H46.1582V25.8608H30.1451V20.1113H27.2983V25.8608H11.2852V34.2693H14.1319V28.7355V28.7355Z" fill="white" />
+      <path d="M19.828 18.3151H37.6204C38.5641 18.3151 39.4692 17.9366 40.1366 17.2627C40.8039 16.5888 41.1788 15.6748 41.1788 14.7217V3.94155C41.1788 2.98852 40.8039 2.07452 40.1366 1.40063C39.4692 0.726734 38.5641 0.348145 37.6204 0.348145H19.828C18.8842 0.348145 17.9791 0.726734 17.3118 1.40063C16.6444 2.07452 16.2695 2.98852 16.2695 3.94155V14.7217C16.2695 15.6748 16.6444 16.5888 17.3118 17.2627C17.9791 17.9366 18.8842 18.3151 19.828 18.3151ZM19.828 3.94155H37.6204V14.7217H19.828V3.94155Z" fill="white" />
+    </g>
+    <defs>
+      <clipPath id="clip0_370_35">
+        <rect width="57" height="54" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+const Hackthone = (
+  <svg width="50" height="40" viewBox="0 0 50 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M44.2262 4.97151H24.6882L21.2446 1.49414C20.3165 0.55697 19.071 0.0390625 17.7766 0.0390625H5.15013C2.46365 0.0390625 0.290048 2.25867 0.290048 4.97151L0.265625 34.5662C0.265625 37.2791 2.46365 39.4987 5.15013 39.4987H44.2262C46.9127 39.4987 49.1107 37.2791 49.1107 34.5662V9.90396C49.1107 7.19112 46.9127 4.97151 44.2262 4.97151ZM27.1304 29.6338H12.4769C11.1337 29.6338 10.0346 28.524 10.0346 27.1675C10.0346 25.8111 11.1337 24.7013 12.4769 24.7013H27.1304C28.4737 24.7013 29.5727 25.8111 29.5727 27.1675C29.5727 28.524 28.4737 29.6338 27.1304 29.6338ZM36.8994 19.7689H12.4769C11.1337 19.7689 10.0346 18.6591 10.0346 17.3026C10.0346 15.9462 11.1337 14.8364 12.4769 14.8364H36.8994C38.2427 14.8364 39.3417 15.9462 39.3417 17.3026C39.3417 18.6591 38.2427 19.7689 36.8994 19.7689Z" fill="white" />
+  </svg>
+);
+const Dapp = (
+  <svg width="50" height="51" viewBox="0 0 50 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21.9021 9.92385L23.4316 6.83465L26.4907 5.29005L23.4316 3.74545L21.9021 0.65625L20.3725 3.74545L17.3134 5.29005L20.3725 6.83465L21.9021 9.92385ZM8.13606 16.1022L10.6847 10.9539L15.7838 8.37925L10.6847 5.80459L8.13606 0.65625L5.58744 5.80459L0.488281 8.37925L5.58744 10.9539L8.13606 16.1022ZM41.7863 28.459L39.2377 33.6074L34.1385 36.182L39.2377 38.7567L41.7863 43.905L44.3349 38.7567L49.4341 36.182L44.3349 33.6074L41.7863 28.459ZM48.5374 9.75297L40.4259 1.56177C39.8294 0.957447 39.0465 0.65625 38.2635 0.65625C37.4806 0.65625 36.6977 0.957447 36.1002 1.56177L1.38498 36.6184C0.190018 37.8251 0.190018 39.7809 1.38498 40.9867L9.49641 49.1779C10.0939 49.7813 10.8768 50.0825 11.6588 50.0825C12.4418 50.0825 13.2247 49.7813 13.8222 49.1779L48.5374 14.1203C49.7323 12.9155 49.7323 10.9587 48.5374 9.75297ZM34.8507 20.2978L29.9839 15.383L38.2626 7.02289L43.1294 11.9376L34.8507 20.2978Z" fill="white" />
+  </svg>
+);
+const Incubator = (
+  <svg width="53" height="61" viewBox="0 0 53 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M51.2939 56.3453H48.974V3.08631C48.974 1.53818 47.7276 0.283203 46.19 0.283203H7.21464C5.67709 0.283203 4.43069 1.53818 4.43069 3.08631V56.3453H2.11073C1.34201 56.3453 0.71875 56.9729 0.71875 57.7469V60.0828H52.6859V57.7469C52.6859 56.9729 52.0626 56.3453 51.2939 56.3453ZM15.5665 9.15971C15.5665 8.3857 16.1898 7.75815 16.9585 7.75815H21.5984C22.3671 7.75815 22.9904 8.3857 22.9904 9.15971V13.8316C22.9904 14.6056 22.3671 15.2331 21.5984 15.2331H16.9585C16.1898 15.2331 15.5665 14.6056 15.5665 13.8316V9.15971ZM15.5665 20.3721C15.5665 19.5981 16.1898 18.9706 16.9585 18.9706H21.5984C22.3671 18.9706 22.9904 19.5981 22.9904 20.3721V25.044C22.9904 25.818 22.3671 26.4455 21.5984 26.4455H16.9585C16.1898 26.4455 15.5665 25.818 15.5665 25.044V20.3721ZM21.5984 37.658H16.9585C16.1898 37.658 15.5665 37.0304 15.5665 36.2564V31.5846C15.5665 30.8106 16.1898 30.183 16.9585 30.183H21.5984C22.3671 30.183 22.9904 30.8106 22.9904 31.5846V36.2564C22.9904 37.0304 22.3671 37.658 21.5984 37.658ZM30.4143 56.3453H22.9904V46.5345C22.9904 45.7605 23.6136 45.1329 24.3824 45.1329H29.0223C29.791 45.1329 30.4143 45.7605 30.4143 46.5345V56.3453ZM37.8381 36.2564C37.8381 37.0304 37.2149 37.658 36.4462 37.658H31.8062C31.0375 37.658 30.4143 37.0304 30.4143 36.2564V31.5846C30.4143 30.8106 31.0375 30.183 31.8062 30.183H36.4462C37.2149 30.183 37.8381 30.8106 37.8381 31.5846V36.2564ZM37.8381 25.044C37.8381 25.818 37.2149 26.4455 36.4462 26.4455H31.8062C31.0375 26.4455 30.4143 25.818 30.4143 25.044V20.3721C30.4143 19.5981 31.0375 18.9706 31.8062 18.9706H36.4462C37.2149 18.9706 37.8381 19.5981 37.8381 20.3721V25.044ZM37.8381 13.8316C37.8381 14.6056 37.2149 15.2331 36.4462 15.2331H31.8062C31.0375 15.2331 30.4143 14.6056 30.4143 13.8316V9.15971C30.4143 8.3857 31.0375 7.75815 31.8062 7.75815H36.4462C37.2149 7.75815 37.8381 8.3857 37.8381 9.15971V13.8316Z" fill="white" />
+  </svg>
+);
+const minority = (
+  <svg width="30" height="19" viewBox="0 0 30 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.4051 14.1813C16.5943 14.3727 16.8191 14.5246 17.0665 14.6282C17.3139 14.7318 17.5791 14.7851 17.847 14.7851C18.1148 14.7851 18.38 14.7318 18.6274 14.6282C18.8748 14.5246 19.0996 14.3727 19.2888 14.1813L29.4859 3.88419L26.6021 0.972168L17.847 9.81328L13.1706 5.09102C12.9814 4.8996 12.7566 4.74775 12.5092 4.64413C12.2618 4.54052 11.9966 4.48719 11.7287 4.48719C11.4609 4.48719 11.1957 4.54052 10.9483 4.64413C10.7009 4.74775 10.4761 4.8996 10.2869 5.09102L0.0898438 15.3881L2.97357 18.3002L11.7287 9.45906L16.4051 14.1813Z" fill="white" />
+  </svg>
+);
+const Policy = (
+  <svg width="45" height="49" viewBox="0 0 45 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#clip0_370_30)">
+      <path d="M3.61514 49.0787C2.69392 49.0777 1.8107 48.7078 1.1593 48.05C0.507905 47.3922 0.141545 46.5003 0.140625 45.57V3.46663C0.141545 2.53637 0.507905 1.64448 1.1593 0.986684C1.8107 0.328892 2.69392 -0.0410633 3.61514 -0.0419922H31.4113C32.3325 -0.0410633 33.2157 0.328892 33.8671 0.986684C34.5185 1.64448 34.8849 2.53637 34.8858 3.46663V10.4839H31.4113V3.46663H3.61514V45.57H20.9877V49.0787H3.61514Z" fill="white" />
+      <path d="M45.3105 28.027C45.314 26.2703 44.8821 24.5407 44.0541 22.9957C43.2261 21.4508 42.0284 20.1397 40.5701 19.1819C39.1118 18.2242 37.4393 17.6502 35.7051 17.5123C33.9708 17.3745 32.23 17.6771 30.6412 18.3926C29.0525 19.1082 27.6663 20.2138 26.6092 21.6089C25.552 23.004 24.8573 24.6441 24.5886 26.3796C24.3199 28.1152 24.4855 29.8911 25.0706 31.5455C25.6556 33.1999 26.6413 34.6801 27.938 35.8512V49.0787L34.887 45.7578L41.836 49.0787V35.8512C42.9282 34.8677 43.8023 33.6623 44.4011 32.3139C44.9998 30.9656 45.3098 29.5047 45.3105 28.027ZM38.3615 43.5351L34.887 41.8737L31.4125 43.5351V37.9388C33.6578 38.7577 36.1161 38.7577 38.3615 37.9388V43.5351ZM34.887 35.0442C33.5126 35.0442 32.1691 34.6327 31.0263 33.8616C29.8836 33.0905 28.9929 31.9946 28.4669 30.7124C27.941 29.4301 27.8033 28.0192 28.0715 26.658C28.3396 25.2968 29.0014 24.0464 29.9733 23.065C30.9451 22.0837 32.1833 21.4153 33.5313 21.1446C34.8793 20.8738 36.2765 21.0128 37.5463 21.5439C38.816 22.075 39.9013 22.9744 40.6649 24.1284C41.4285 25.2824 41.836 26.6391 41.836 28.027C41.8337 29.8874 41.1008 31.6709 39.7982 32.9863C38.4955 34.3018 36.7293 35.0419 34.887 35.0442V35.0442ZM8.82812 21.0097H20.9889V24.5184H8.82812V21.0097ZM8.82812 10.4839H26.2007V13.9925H8.82812V10.4839Z" fill="white" />
+    </g>
+    <defs>
+      <clipPath id="clip0_370_30">
+        <rect width="45" height="49" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+const Categories = [{
+  id: 1,
+  text: 'Start ups',
+  icon: Startup,
+},
+{
+  id: 2,
+  text: 'Community Programs',
+  icon: Community,
+},
+{
+  id: 3,
+  text: 'Policy / Research',
+  icon: Policy,
+},
+{
+  id: 4,
+  text: 'Events',
+  icon: Event,
+},
+{
+  id: 5,
+  text: 'Chapters',
+  icon: Chapter,
+},
+{
+  id: 6,
+  text: 'Hackthon Topics',
+  icon: Hackthone,
+},
+{
+  id: 7,
+  text: 'DApp Improvements',
+  icon: Dapp,
+},
+{
+  id: 8,
+  text: 'Incubator',
+  icon: Incubator,
+}, {
+  id: 9,
+  text: 'Minority Venture Capital',
+  icon: minority,
+},
+];
+export default Categories;
diff --git a/components/chapter/view/Events.js b/components/chapter/view/Events.js
new file mode 100644
index 00000000..9e886941
--- /dev/null
+++ b/components/chapter/view/Events.js
@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useRouter } from 'next/router';
+import styles from './chapter.module.scss';
+
+const Events = ({ token }) => {
+  const [pastEvents, setPastEvents] = useState([]);
+  const [upcomingEvents, setUpcomingEvents] = useState([]);
+  const [active, setActive] = useState(true);
+  const router = useRouter();
+  useEffect(() => {
+    if (token != null) {
+      axios
+        .get(`${process.env.BASE_URI}/event`, {
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET',
+            'Access-Control-Allow-Headers': 'Content-Type',
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+          },
+        })
+        .then((res) => {
+          const dateNow = Date.now();
+          // dateNow < new Date(event.time).getTime()
+          const events = res.data.data.filter((event) => (
+            event.approved !== null
+              && event.approved === true
+          ));
+          const upcoming = events.filter((event) => (
+            dateNow < new Date(event.time).getTime()
+          ));
+          setPastEvents(events.slice(0, 7));
+          setUpcomingEvents(upcoming.slice(0, 7));
+        })
+        .catch((error) => {
+          if (error.response) {
+            console.log(error.response.data);
+          } else if (error.request) {
+            console.log(error.request);
+          } else {
+            console.log('Error', error.message);
+          }
+          console.log(error.config);
+          setPastEvents([]);
+          setUpcomingEvents([]);
+        });
+    }
+  }, []);
+  const getTime = (date, time) => {
+    const eventDate = new Date(date);
+    let hr = eventDate.getHours();
+    if (hr === 0) hr = 1;
+    if (time) {
+      return hr > 12 ? `(EST ${hr} Pm - ${(hr + 2) < 12 ? `${hr + 2} pm` : `${hr - 12} Am`})` : `(EST ${hr} Am - ${(hr + 2) < 12 ? `${hr + 2} Am` : `${hr - 12} Pm`})`;
+    }
+
+    return eventDate.toDateString();
+  };
+  return (
+    <div className={styles.events}>
+      <div className="tw-flex tw-justify-between">
+        <h2>Chapter Events</h2>
+        <div className={styles.topPartBtns}>
+          <p style={{ background: !active ? ' #6938ef' : '' }} onClick={() => setActive(false)}>Upcoming</p>
+          <a style={{ background: active ? ' #6938ef' : '' }} onClick={() => setActive(true)}>Past Events</a>
+        </div>
+      </div>
+      <div className={styles.eventsCard}>
+        { active && pastEvents.map((event) => (
+          <div>
+            <img src={event?.EventPicture} alt="event cover" />
+            <div className={styles.detail}>
+              <h2>
+                {event?.eventName}
+              </h2>
+              <p>
+                {event?.EventDescription}
+
+              </p>
+              <div className={styles.date}>
+                <div>
+                  {getTime(event?.time, true)}
+                </div>
+                <p>
+                  {getTime(event?.time, false)}
+                </p>
+              </div>
+              <div className={styles.btnContainer}>
+                {/* <p>Pre Register</p> */}
+                <a onClick={() => router.push(
+                  '/events',
+                )}
+                >
+                  More Info
+
+                </a>
+              </div>
+            </div>
+          </div>
+        ))}
+        { !active && upcomingEvents.map((event) => (
+          <div>
+            <img src={event?.EventPicture} alt="event cover" />
+            <div className={styles.detail}>
+              <h2>
+                {event?.eventName}
+              </h2>
+              <p>
+                {event?.EventDescription}
+
+              </p>
+              <div className={styles.date}>
+                <div>
+                  {getTime(event?.time, true)}
+                </div>
+                <p>
+                  {getTime(event?.time, false)}
+                </p>
+              </div>
+              <div className={styles.btnContainer}>
+                <p>Pre Register</p>
+                <a onClick={() => router.push(
+                  '/events',
+                )}
+                >
+                  More Info
+
+                </a>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+    </div>
+  );
+};
+
+export default Events;
diff --git a/components/chapter/view/Governance.js b/components/chapter/view/Governance.js
new file mode 100644
index 00000000..7b26f199
--- /dev/null
+++ b/components/chapter/view/Governance.js
@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import Select from 'react-select';
+import styles from './chapter.module.scss';
+import Categories from './CategoriesIcons';
+
+const Governance = ({ customStyles, DropdownIndicator }) => {
+  const [active, setActice] = useState(true);
+  const [currentCategory, setCatergory] = useState('');
+
+  const searchHandler = (e) => {
+    // const filterLocation = data.filter(
+    //   (location) => location.location.toLowerCase().includes(e.target.value.toLowerCase())
+    //   || location.LocationName.toLowerCase().includes(e.target.value.toLowerCase())
+    //   ,
+    // );
+    // setLocations(filterLocation);
+  };
+  return (
+    <div className={styles.proposal}>
+      <div className={styles.titleContainer}>
+        <h2>Proposal</h2>
+        <div className={styles.topPartBtns}>
+          <Select
+            styles={customStyles}
+            components={{ DropdownIndicator }}
+            closeMenuOnSelect={false}
+            defaultValue={{ label: 'All', value: 'All' }}
+            name="passion"
+            // value={values.passion}
+            options={[{ label: 'All', value: 'All' }]}
+            // onChange={(e) => handleChange({ target: { name: 'passion', value: e } })}
+          />
+        </div>
+      </div>
+      <div className={styles.serchBar}>
+        <div>
+          <input type="text" onChange={searchHandler} placeholder="Search by Location, School etc." />
+        </div>
+        <a>Search</a>
+      </div>
+      <div className={styles.grid}>
+        <div className={styles.left}>
+          <div className={!active ? styles.active : ''} onClick={() => setActice(false)}>New Proposal</div>
+          <div className={active ? styles.active : ''} onClick={() => setActice(true)}>Proposals</div>
+        </div>
+        <div className={styles.right}>
+          {active && (
+          <div className={styles.proposalCard}>
+            <div>
+              <img src="/assets/images/chapter/mpa-logo.png" alt="MPA Logo" />
+              <div className={styles.detail}>
+                <h2>ThreeBox Integration </h2>
+                <p>Type: Enhancement | Category: Incubator</p>
+              </div>
+              <div className={styles.approved}>Approved</div>
+            </div>
+            <p>Implement 3 box implementation into MPA platform.</p>
+          </div>
+          ) }
+          {!active && (
+          <div className={styles.newProposal}>
+            <label> Title Of Proposal</label>
+            <input type="text" />
+            <label> Description Of Proposal</label>
+            <input type="text" />
+            <label> Choose a Category</label>
+            <div className={styles.categoryContainer}>
+              {Categories.map((category) => (
+
+                <div onClick={() => setCatergory(category.text)} className={category.text === currentCategory ? styles.activeCard : ''} key={category.id}>
+                  {category.icon}
+                  <p>
+                    {category.text}
+                  </p>
+                </div>
+              ))}
+
+            </div>
+            <label> Proposal Type</label>
+            <div style={{ height: '2px', marginBottom: '10px' }} className={styles.line} />
+            <p>Would you like to add a poll to your proposal?</p>
+            <p>
+              {`Start Date - ${new Date().toDateString()}`}
+            </p>
+            <label> Pool Question</label>
+            <input type="text" />
+            <label>Choice 1</label>
+            <input type="text" />
+            <label className="tw-cursor-pointer">+ Add Choice</label>
+            <div className={styles.buttons}>
+              <a>Discard Changes</a>
+              <p>Save & Continue </p>
+
+            </div>
+          </div>
+          ) }
+
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Governance;
diff --git a/components/chapter/view/HeroSection.js b/components/chapter/view/HeroSection.js
new file mode 100644
index 00000000..1bdfcfe0
--- /dev/null
+++ b/components/chapter/view/HeroSection.js
@@ -0,0 +1,378 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Modal, Upload } from 'antd';
+import { InboxOutlined } from '@ant-design/icons';
+import Select from 'react-select';
+import styles from './chapter.module.scss';
+import { errorToast, successToast } from '../../../contexts/utils/toasts';
+
+function getUniqueListBy(arr, key) {
+  return [...new Map(arr.map((item) => [item[key], item])).values()];
+}
+const categories = [
+  {
+    label: 'Pre-College',
+    value: 'Pre-College',
+  },
+  {
+
+    label: 'Continental',
+    value: 'Continental',
+  },
+  {
+
+    label: 'National',
+    value: 'National',
+  },
+  {
+
+    label: 'University',
+    value: 'University',
+  },
+  {
+
+    label: 'Professional',
+    value: 'Professional',
+  },
+  {
+    label: 'Regional',
+    value: 'Regional',
+  },
+];
+
+const customStyles = {
+  option: (provided, state) => ({
+    ...provided,
+    color: 'white',
+    border: state.isSelected ? '2px solid #6938EF' : state.isFocused ? '2px solid #6938EF' : '2px solid transparent',
+    background: '#1C1D37',
+    borderRadius: '8px',
+    padding: 20,
+    marginTop: 8,
+    width: '100%',
+    cursor: 'pointer',
+    fontWeight: 'bold',
+    ':active': {
+      // ...styles[':active'],
+      background: '#1C1D37',
+    },
+  }),
+  control: () => ({
+    // none of react-select's styles are passed to <Control />
+    // width: ,
+    display: 'flex',
+    height: '100%',
+  }),
+  menu: (provided) => ({
+    ...provided,
+    // borderBottom: '1px dotted pink',
+    background: '#1C1D37',
+    padding: 5,
+    border: '1px solid #6938EF',
+    width: 'fit-contnet',
+    textAlign: 'center',
+    // marginLeft: '-30px',
+  }),
+  container: (provided) => ({
+    ...provided,
+    height: '45px',
+    cursor: 'pointer',
+    paddingLeft: '8px',
+    border: '1px solid #6938EF',
+    borderRadius: '120px',
+    marginBottom: '20px',
+  }),
+  multiValueLabel: (provided) => ({
+    ...provided,
+    color: 'white',
+  }),
+  multiValue: (provided) => ({
+    ...provided,
+    border: '1px solid #6938EF',
+    borderRadius: '100px',
+    background: 'transparent',
+    padding: '5px',
+  }),
+  multiValueRemove: (provided) => ({
+    ...provided,
+    color: 'white',
+  }),
+  indicatorSeparator: (provided) => ({
+    ...provided,
+    display: 'none',
+  }),
+  singleValue: (provided) => {
+    const opacity = 1;
+    const color = '#fff';
+    const transition = 'opacity 300ms';
+
+    return {
+      ...provided, opacity, transition, color,
+    };
+  },
+};
+
+const HeroSection = ({
+  location, token, DropdownIndicator, setUpdate, update, data,
+}) => {
+  const { Dragger } = Upload;
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [approvedMembers, setApprovedMembers] = useState([]);
+  const [values, setValues] = useState({
+    about: '',
+    title: '',
+    mission: '',
+    type: '',
+    img: '',
+    advisor: '',
+    location: '',
+  });
+
+  // Image input props
+  const newPic = async (pic) => {
+    const src = await new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        resolve(e.target.result);
+      };
+      reader.readAsDataURL(pic);
+    });
+    const newValue = values;
+    newValue.img = src;
+    setValues(newValue);
+  };
+
+  const props = {
+    name: 'file',
+    multiple: true,
+    className: styles.imgInput,
+    // listType: 'picture-card',
+    maxCount: 1,
+    accept: 'image/*',
+    action: 'http://localhost:3000/',
+
+    onChange(info) {
+      const { status } = info.file;
+      if (status !== 'uploading') {
+        // console.log(info.file, info.fileList);
+      }
+      if (status === 'done') {
+        newPic(info.file.originFileObj);
+      } else if (status === 'error') {
+        // console.log(`${info.file.name} file upload failed.`);
+      }
+    },
+    onDrop() {
+      // console.log('Dropped files', e.dataTransfer.files);
+    },
+  };
+  const handleJoin = () => {
+    if (token) {
+      axios
+        .post(
+          'http://localhost:5000/api/v1/joinChapter',
+          {
+            chapterLocation_id: location._id,
+          },
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          },
+        )
+        .then(() => {
+          successToast('You have successfully joined a chapter');
+          setTimeout(location.reload(true), 2000);
+        })
+        .catch((err) => {
+          try {
+            errorToast(err.response.data.data.message.msg);
+          } catch (error) {
+            errorToast('Network Error');
+          }
+        });
+    } else {
+      errorToast('Please login to continue');
+    }
+  };
+
+  const handleOk = () => {
+    setIsModalVisible(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+  };
+  const handelChange = (name, value) => {
+    const newValues = values;
+    newValues[name] = value;
+    setValues(newValues);
+  };
+  useEffect(() => {
+    if (token) {
+      if (location._id) {
+        axios
+          .get(`http://localhost:5000/api/v1/joinChapter/location/${location._id}`, {
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: `Bearer ${token}`,
+            },
+          })
+          .then((res) => {
+            const arr = [];
+            res.data.data.forEach((member) => {
+              if (member.user_id) {
+                const newMember = {
+                  label: `${member.user_id.firstName} ${member.user_id.lastName}`,
+                  value: member.user_id._id,
+                  approved: member.approved,
+                };
+                arr.push(newMember);
+              }
+            });
+            // const results = users.filter((element) => element !== null);
+            const unique = getUniqueListBy(arr, 'value');
+            const approved = unique.filter((e) => (
+              e.approved
+            ));
+            setApprovedMembers(approved);
+          })
+          .catch(() => {
+            errorToast('Network Error');
+          });
+      }
+    }
+  }, [token, location]);
+  const handleSubmit = () => {
+    const formData = new FormData();
+    if (values.img) formData.append('LocationLogo', values.img);
+    if (values.about) formData.append('description', values.about);
+    if (values.mission) formData.append('mission', values.mission);
+    if (values.advisor) formData.append('advisor', values.advisor.value);
+    if (values.type) formData.append('chapter_type', values.type.value);
+    if (values.title) formData.append('location', values.title);
+    if (values.location) formData.append('LocationName', values.location);
+    axios
+      .patch(`http://localhost:5000/api/v1/location/${location._id}`, formData, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then(() => {
+        setUpdate(!update);
+        successToast('Chapter Updated');
+      })
+      .catch((e) => {
+        console.log(e);
+        errorToast('Something went wrong');
+      });
+  };
+  return (
+    <section>
+      <Modal
+        visible={isModalVisible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        footer={null}
+        closable={false}
+        // width="fit-contnet"
+        style={{ width: 'fit-contnet' }}
+        className={styles.editModel}
+      >
+        <div className={styles.modalBody}>
+          <label>
+            Title
+          </label>
+          <input defaultValue={location?.location} onChange={(e) => handelChange('title', e.target.value)} type="text" />
+          <label>
+            Location
+          </label>
+          <input defaultValue={location?.LocationName} onChange={(e) => handelChange('location', e.target.value)} type="text" />
+          <label>
+            Type
+          </label>
+          <Select
+            styles={customStyles}
+            components={{ DropdownIndicator }}
+            isSearchable={false}
+            closeMenuOnSelect
+            defaultValue={{ label: location?.chapter_type, value: location?.chapter_type }}
+            // value={values.type}
+            onChange={(e) => handelChange('type', e)}
+            options={categories}
+          />
+          <label>
+            Advisor
+          </label>
+          <Select
+            styles={customStyles}
+            components={{ DropdownIndicator }}
+            isSearchable={false}
+            closeMenuOnSelect
+            defaultValue={{
+              label: location.advisor?.firstName,
+              value: location.advisor?.lastName,
+            }}
+            onChange={(e) => handelChange('advisor', e)}
+            options={approvedMembers}
+          />
+          <label>
+            About
+          </label>
+          <textarea defaultValue={location?.description} onChange={(e) => handelChange('about', e.target.value)} cols="30" rows="6" />
+          <label>
+            Mission
+          </label>
+          <textarea defaultValue={location?.mission} onChange={(e) => handelChange('mission', e.target.value)} cols="30" rows="6" />
+          <label>
+            Cover
+          </label>
+          <Dragger {...props}>
+            <p className="ant-upload-drag-icon">
+              <InboxOutlined />
+            </p>
+            <p className="ant-upload-text">
+              Click or drag file to this area to upload
+            </p>
+          </Dragger>
+          <a className={styles.submitBtn} onClick={handleSubmit}>Update</a>
+        </div>
+      </Modal>
+      <div style={{ paddingTop: '10rem' }} className="container">
+        <div style={{ background: `linear-gradient(0deg, rgba(0, 0, 0, 0.67), rgba(0, 0, 0, 0.67)),url(${location?.LocationLogo})` }} className={`${styles.HeroContanier}`}>
+          <div className={styles.left}>
+            <div className={styles.title}>
+              <img src="/assets/images/chapter/mpa-logo.png" alt="logo" />
+              <div>
+                <h2>{location?.location}</h2>
+                <div className={styles.location}>
+                  <i className="fas fa-map-marked-alt" />
+                  <h2>{location?.LocationName}</h2>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+          <div className={styles.right}>
+            {location.added_by?._id === data?._id && <i onClick={(() => setIsModalVisible(true))} className="fas fa-edit" />}
+            {location.advisor && (
+            <p>
+              Advisor:
+              {`${location.advisor.firstName} ${location.advisor.lastName}`}
+            </p>
+            )}
+            <p>
+              Type:
+              {' '}
+              {location?.chapter_type}
+            </p>
+            <a onClick={handleJoin}>Join Chapter</a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;
diff --git a/components/chapter/view/Members.js b/components/chapter/view/Members.js
new file mode 100644
index 00000000..fb02ddb2
--- /dev/null
+++ b/components/chapter/view/Members.js
@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import styles from './chapter.module.scss';
+import { errorToast } from '../../../contexts/utils/toasts';
+
+const Members = ({ token, location, data }) => {
+  const [approvedMembers, setApprovedMembers] = useState([]);
+  const [totalMembers, setTotalMembers] = useState([]);
+  const [update, setUpdate] = useState(false);
+
+  const searchHandler = () => {
+    // const filterLocation = data.filter(
+    //   (location) => location.location.toLowerCase().includes(e.target.value.toLowerCase())
+    //   || location.LocationName.toLowerCase().includes(e.target.value.toLowerCase())
+    //   ,
+    // );
+    // setLocations(filterLocation);
+  };
+  const acceptReq = (id) => {
+    axios
+      .post(`http://localhost:5000/api/v1/joinChapter/accept/${id}`, { location: location._id }, {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then(() => {
+        setUpdate(!update);
+      })
+      .catch(() => {
+        errorToast('Network Error');
+      });
+  };
+  function getUniqueListBy(arr, key) {
+    return [...new Map(arr.map((item) => [item[key], item])).values()];
+  }
+  const dataFormat = (member) => {
+    const date = new Date(member.createdAt);
+    const year = date.getFullYear();
+    const month = date.toLocaleString('default', { month: 'short' });
+    return `Member Since ${month} ${year}`;
+  };
+  useEffect(() => {
+    if (token && location._id) {
+      axios
+        .get(`http://localhost:5000/api/v1/joinChapter/location/${location._id}`, {
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+          },
+        })
+        .then((res) => {
+          const arr = [];
+          res.data.data.forEach((member) => {
+            if (member.user_id) {
+              const newMember = {
+                name: `${member.user_id.firstName} ${member.user_id.lastName}`,
+                id: member.user_id._id,
+                member_id: member._id,
+                role: member.role,
+                approved: member.approved,
+                date: dataFormat(member),
+                facebook: member.user_id.FacebookLink,
+                profilePicture: member.user_id.profilePicture,
+                linkedin: member.user_id.LinkedinLink,
+              };
+              arr.push(newMember);
+            }
+          });
+          // const results = users.filter((element) => element !== null);
+          const unique = getUniqueListBy(arr, '_id');
+          const approved = unique.filter((e) => (
+            e.approved
+          ));
+          setApprovedMembers(approved);
+          setTotalMembers(unique);
+        })
+        .catch(() => {
+          errorToast('Network Error');
+        });
+    } else {
+      errorToast('Please login to continue');
+    }
+  }, [update]);
+  return (
+    <div className={styles.approvedMembers}>
+      <div className={styles.titleContainer}>
+        <h2>Chapter Members</h2>
+        <h2 style={{ fontWeight: '500' }}>
+          Total:
+          {' '}
+          {approvedMembers.length}
+        </h2>
+      </div>
+      <div className={styles.serchBar}>
+        <div>
+          <input type="text" onChange={searchHandler} placeholder="Search by Location, School etc." />
+        </div>
+        <a>Search</a>
+      </div>
+      <div className={styles.cardContainer}>
+
+        {(location?.added_by._id === data?._id
+          ? totalMembers : approvedMembers).map((member) => (
+            <div key={member?.id}>
+              {(location?.added_by._id === data?._id && !member.approved)
+             && (
+             <a
+               onClick={() => acceptReq(member?.member_id)}
+               className={styles.approveBtn}
+             >
+               approve
+             </a>
+             )}
+              <img src={member?.profilePicture} alt="profile-img" />
+              <h2>{member?.name}</h2>
+              <h3>{member?.role}</h3>
+              <p>{member?.date}</p>
+              <div className={styles}>
+                <a href={member?.linkedin}>
+                  {' '}
+                  <i className="fab fa-linkedin" />
+                </a>
+                {/* <i className="fab fa-twitter-square" /> */}
+                <a href={member?.facebook}>
+                  <i className="fab fa-facebook-square" />
+                </a>
+              </div>
+            </div>
+        ))}
+
+      </div>
+    </div>
+  );
+};
+
+export default Members;
diff --git a/components/chapter/view/Overview.js b/components/chapter/view/Overview.js
new file mode 100644
index 00000000..d0dcbaa8
--- /dev/null
+++ b/components/chapter/view/Overview.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import styles from './chapter.module.scss';
+
+const Overview = ({ location }) => {
+  const dataFormat = (joinDate) => {
+    const date = new Date(joinDate);
+    const year = date.getFullYear();
+    const month = date.toLocaleString('default', { month: 'short' });
+    return `${month} ${year}`;
+  };
+  return (
+
+    <div className={styles.overviewSection}>
+      <h2>About Chapter</h2>
+      <p>
+        {location?.description}
+      </p>
+      <h2>Mission</h2>
+      <p>
+        {location?.mission}
+      </p>
+      <h2>Chapter Officers</h2>
+      <div className={styles.cardContainer}>
+        <div>
+          <img src={location.added_by?.profilePicture} alt="" />
+          <h2>{`${location.added_by?.firstName} ${location.added_by?.lastName}`}</h2>
+          <h3>President</h3>
+          <p>
+            {dataFormat(location.createdAt)}
+            {' '}
+            -
+            {' '}
+            {dataFormat(new Date().toString())}
+          </p>
+          <div className="">
+            <a href={location.added_by?.LinkedinLink}>
+              <i className="fab fa-linkedin" />
+            </a>
+            <a href={location.added_by?.FacebookLink}>
+              <i className="fab fa-facebook-square" />
+            </a>
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+  );
+};
+
+export default Overview;
diff --git a/components/chapter/view/Resources.js b/components/chapter/view/Resources.js
new file mode 100644
index 00000000..f284fd5b
--- /dev/null
+++ b/components/chapter/view/Resources.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import styles from './chapter.module.scss';
+
+const Resources = () => {
+  const searchHandler = (e) => {
+    // const filterLocation = data.filter(
+    //   (location) => location.location.toLowerCase().includes(e.target.value.toLowerCase())
+    //   || location.LocationName.toLowerCase().includes(e.target.value.toLowerCase())
+    //   ,
+    // );
+    // setLocations(filterLocation);
+  };
+  return (
+    <div className={styles.resources}>
+      <h2>Resource Center</h2>
+      <div className={styles.serchBar}>
+        <div>
+          <input type="text" onChange={searchHandler} placeholder="Search by Location, School etc." />
+        </div>
+        <a>Search</a>
+      </div>
+      <div className={styles.grid}>
+        <div className={styles.left}>
+          <div>
+            Chapter Documents
+          </div>
+          <div>
+            Chapter Constitution
+          </div>
+          <div>
+            Meetings Minutes
+          </div>
+          <div>
+            Chapter Documents
+          </div>
+        </div>
+        <div className={styles.right}>
+          <div>
+            <img src="/assets/images/chapter/mpa-logo.png" alt="MPA Logo" />
+            <div className={styles.detail}>
+              <h2>First MPA Constitution Amendment</h2>
+              <p>01 Jan 2017</p>
+            </div>
+          </div>
+          <div>
+            <img src="/assets/images/chapter/mpa-logo.png" alt="MPA Logo" />
+            <div className={styles.detail}>
+              <h2>First MPA Constitution Amendment</h2>
+              <p>01 Jan 2017</p>
+            </div>
+          </div>
+          <div>
+            <img src="/assets/images/chapter/mpa-logo.png" alt="MPA Logo" />
+            <div className={styles.detail}>
+              <h2>First MPA Constitution Amendment</h2>
+              <p>01 Jan 2017</p>
+            </div>
+          </div>
+          <div>
+            <img src="/assets/images/chapter/mpa-logo.png" alt="MPA Logo" />
+            <div className={styles.detail}>
+              <h2>First MPA Constitution Amendment</h2>
+              <p>01 Jan 2017</p>
+            </div>
+          </div>
+          <div>
+            <img src="/assets/images/chapter/mpa-logo.png" alt="MPA Logo" />
+            <div className={styles.detail}>
+              <h2>First MPA Constitution Amendment</h2>
+              <p>01 Jan 2017</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Resources;
diff --git a/components/chapter/view/Tabs.js b/components/chapter/view/Tabs.js
new file mode 100644
index 00000000..b15a6202
--- /dev/null
+++ b/components/chapter/view/Tabs.js
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import styles from './chapter.module.scss';
+
+const Tabs = ({ active, setActive }) => {
+  const updateActive = (name) => {
+    const update = {};
+    const stats = Object.keys(active);
+    stats.forEach((stat) => {
+      update[stat] = false;
+    });
+    update[name] = true;
+    setActive(update);
+  };
+  return (
+    <>
+      <div className={styles.tabs}>
+        <div onClick={() => updateActive('overview')} className={active.overview ? styles.active : ''}>
+          <p>
+            Overview
+          </p>
+          <div />
+
+        </div>
+        <div onClick={() => updateActive('events')} className={active.events ? styles.active : ''}>
+          <p> Events</p>
+          {' '}
+          <div />
+        </div>
+        <div
+        //  onClick={() => updateActive('governance')}
+          className={active.governance ? styles.active : ''}
+        >
+          <p><a href="https://snapshot.org/#/minorityprogrammers.eth"> Governance</a></p>
+          <div />
+        </div>
+        <div onClick={() => updateActive('members')} className={active.members ? styles.active : ''}>
+
+          <p> Members</p>
+          <div />
+        </div>
+        <div onClick={() => updateActive('resources')} className={active.resources ? styles.active : ''}>
+          <p> Resources</p>
+          <div />
+        </div>
+      </div>
+      <div className={styles.line} />
+    </>
+  );
+};
+
+export default Tabs;
diff --git a/components/chapter/view/chapter.module.scss b/components/chapter/view/chapter.module.scss
new file mode 100644
index 00000000..c9ecd42f
--- /dev/null
+++ b/components/chapter/view/chapter.module.scss
@@ -0,0 +1,774 @@
+// Hero Section
+.HeroContanier {
+    border-radius: 15px;
+    border: 1px solid #6938ef;
+    box-shadow: 0px 32px 41px rgb(0 0 0 / 25%);
+    height: 315px;
+    background-repeat: no-repeat !important;
+    background-size: cover !important;
+    display: flex;
+    color: white;
+    align-items: center;
+    text-align: center;
+    position: relative;
+    > div {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+    }
+    .left {
+      width: 70%;
+    }
+    .right {
+      width: 30%;
+      font-weight: bold;
+      font-size: 30px;
+      text-align: left;
+      i{
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        font-size: 24px;
+        color: #6938ef;
+        cursor: pointer;
+      }
+      a {
+        background: #6938ef;
+        border-radius: 100px;
+        display: block;
+        font-weight: 600;
+        font-size: 18px;
+        text-align: center;
+        color: #ffffff;
+        padding: 18px 0px;
+        width: 70%;
+        margin-top: 10px;
+      }
+    }
+    .title {
+      font-weight: bold;
+      font-size: 48px;
+      letter-spacing: 0.03em;
+      display: flex;
+      text-align: left;
+      img {
+        object-fit: contain;
+        width: 25%;
+        margin-left: 5%;
+        margin-right: 6%;
+        max-height: 5rem;
+        margin: auto 1% auto 5%;
+      }
+      .location {
+        font-size: 24px;
+        letter-spacing: 0.03em;
+        display: flex;
+        margin-top: 10px;
+        i {
+          font-size: 24px;
+          margin-right: 8px;
+        }
+      }
+    }
+    @media screen and (max-width: 992px) {
+      .title {
+        font-size: 26px;
+        .location {
+          font-size: 18px;
+        }
+      }
+      .left{
+        width: 50%;
+      }
+      .right{
+        font-size: 26px;
+        width: 50%;
+      }
+    }
+    @media screen and (max-width: 768px) {
+      .title {
+        font-size: 16px;
+        .location {
+          font-size: 14px;
+        }
+      } 
+      .right{
+        font-size: 16px;
+        a{
+          font-size: 14px;
+        }
+      }
+    } 
+  }
+  // Tabs
+  .line {
+    height: 4px;
+    width: 100%;
+    background: #6938ef;
+  }
+  .tabs {
+    display: flex;
+    justify-content: space-between;
+    color: rgba(204, 210, 227, 0.6);
+    max-width: 1170px;
+    margin: auto;
+    font-size: 32px;
+    font-weight: 500;
+    div {
+      p {
+        cursor: pointer;
+        padding: 1rem;
+      }
+      div {
+        background: #6938ef;
+        border-radius: 15px 15px 0px 0px;
+        height: 10px;
+        width: 100%;
+        opacity: 0;
+      }
+    }
+    .active {
+      p {
+        color: #33d2ff;
+        padding: 1rem;
+      }
+      div {
+        opacity: 1;
+      }
+    }
+    @media screen and (max-width: 992px) {
+      font-size: 20px;
+    }  
+    @media screen and (max-width: 600px) {
+      div {
+        p {
+          padding: 1rem 0 !important;
+        }
+      }
+    }  
+    @media screen and (max-width: 480px) {
+      font-size: 14px;
+    }  
+    
+  }
+  // view components
+  .serchBar {
+    display: grid;
+    grid-template-columns: 70% 28%;
+    grid-gap: 2%;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+  .serchBar div {
+    background: #d9d9d9;
+    border-radius: 37px;
+  }
+  
+  .serchBar input {
+    background: url(/assets/images/chapter/search.svg);
+    color: black;
+    padding: 10px 20px 10px 30px;
+    width: 100%;
+    height: 100%;
+    font-weight: 400;
+    font-size: 24px;
+    background-repeat: no-repeat;
+    background-position-x: 97%;
+    background-position-y: 50%;
+    border: none;
+    outline: none;
+  }
+  .serchBar input::placeholder {
+    /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: rgba(0, 0, 0, 0.66);
+  }
+  
+  .serchBar input:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgba(0, 0, 0, 0.66);
+  }
+  
+  .serchBar input::-ms-input-placeholder {
+    /* Microsoft Edge */
+    color: rgba(0, 0, 0, 0.66);
+  }
+  .serchBar > a {
+    font-weight: 600;
+    color: white !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 42.3946px;
+    background: #6938ef;
+    font-size: 18px;
+  }
+  .detailsSection{
+    @media screen and (max-width: 576px) {
+      padding: 0 20px;
+    }
+  }
+  .bodyContainer {
+    background: #1c1d37;
+    border: 1px solid #6938ef;
+    box-shadow: 0px 32px 41px rgb(0 0 0 / 25%);
+    border-radius: 15px;
+    margin-top: 2rem;
+    padding: 2rem;
+    color: white;
+    font-family: "Poppins", sans-serif;
+    margin-bottom: 3rem;
+    > div {
+      > h2 {
+        font-size: 24px;
+        color: #ffffff;
+        font-weight: bold;
+      }
+      > P {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        margin-top: 20px;
+        margin-bottom: 40px;
+      }
+    }
+  }
+  .cardContainer {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 2%;
+    margin-top: 20px;
+    text-align: center;
+    > div {
+      border: 3px solid #6938ef;
+      border-radius: 24px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      img {
+        margin-top: 20px;
+        border-radius: 50%;
+        width: 50%;
+      }
+      h2 {
+        font-weight: 700;
+        font-size: 24px;
+        letter-spacing: 0.03em;
+        color: #ffffff;
+        margin-top: 10px;
+      }
+      h3 {
+        font-style: italic;
+        font-weight: 400;
+        font-size: 18px;
+        letter-spacing: 0.03em;
+        color: rgba(255, 255, 255, 0.84);
+        margin: 10px 0;
+      }
+      p {
+        font-weight: 400;
+        font-size: 18px;
+        letter-spacing: 0.03em;
+      }
+      > div {
+        display: flex;
+        flex-direction: row;
+        margin-top: auto;
+        margin: 10px 0;
+        i {
+          font-size: 21px;
+          cursor: pointer;
+          transition: color 0.3s ease;
+          &:first-child {
+            margin-right: 10px;
+          }
+          &:hover {
+            color: #6938ef;
+            transform: scale(1.1);
+          }
+        }
+      }
+    }
+    @media screen and (max-width: 992px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    @media screen and (max-width: 768px) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
+  .titleContainer {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    h2 {
+      font-size: 24px;
+      color: #ffffff;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .approved {
+    height: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #16a34a;
+    border-radius: 42.3946px;
+    width: 20%;
+    padding: 8px 0;
+    font-weight: 600;
+    font-size: 14px;
+  }
+  .buttons{
+    display: flex;
+    justify-content: space-evenly;
+    a{
+      font-weight: 600;
+      font-size: 18px;
+      border: 1px solid #6938EF;
+      padding: 12px 2rem;
+      border-radius: 44px;
+    }
+    p{
+      font-weight: 600;
+      font-size: 18px;
+      border: 1px solid #6938EF;
+      background: #6938EF;
+      padding: 12px 2rem;
+      border-radius: 44px;
+    }
+  }
+  .approveBtn{
+    font-weight: 500;
+    background: #16a34a;
+    border-radius: 100px;
+    padding: 4px 10px;
+    margin-top: 4%;
+    margin-right: auto;
+    margin-left: 4%;
+  }
+  .editModel >div{
+    background: #24203B;
+    border-radius: 15px;
+    color: white;
+    // height: 500px;
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+      width: 6px;              
+    }
+    &::-webkit-scrollbar-track{
+      background: #20213F;
+    }
+    &::-webkit-scrollbar-thumb{
+      background: #3E385D;
+    }
+
+    .modalBody{
+      display: flex;
+      flex-direction: column;
+      
+      height: 100%;
+      label{
+        font-size: 18px;
+        font-weight: 600;
+        margin-bottom: 10px;
+      }
+      >input{
+        background: #24203B;
+        border-radius: 8px;
+        border: 1px solid #6938EF;
+        width: 100%;
+        color: white;
+        padding: 0.6rem 1rem;
+        outline: none;
+        font-size: 18px;
+        font-weight: 500;
+        margin-bottom: 20px;
+      }
+      >textarea{
+        background: #1c1d37;
+        border-radius: 15px;
+        color: white;
+        font-size: 16px;
+        padding: 10px;
+        border: 1px solid #6938EF;
+        margin-bottom: 20px;
+        &:focus{
+          outline: none;
+          border: 1px solid #6938EF;
+        }
+      }
+    }
+  }
+  .imgInput{
+    background: #1c1d37 !important;
+    border: 1px dashed #6938EF !important;
+    border-radius: 15px !important;
+    p{
+    color: white !important;
+   }
+   span{
+     color: #6938EF !important;
+   }
+  }
+  // Overview
+  // .overviewSection {
+  // }
+  // Events
+  .events {
+    > div {
+      margin-bottom: 20px;
+      > h2 {
+        font-size: 24px;
+        color: #ffffff;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        @media screen and (max-width: 768px) {
+          font-size: 20px;
+        }
+      }
+    }
+    .topPartBtns {
+      display: flex;
+      font-size: 18px;
+      color: #ffffff;
+      font-weight: 600;
+      @media screen and (max-width: 768px) {
+        margin-top: 30px;
+        font-size: 16px;
+      }
+      a,
+      p {
+        border: 1px solid #6938ef;
+        box-sizing: border-box;
+        border-radius: 42.3946px;
+        padding: 10px 20px;
+        cursor: pointer;
+        color: #ffffff;
+        transition: background 0.3s ease;
+        &:hover{
+          background: #6938ef;
+        }
+      }
+      p {
+        margin-right: 15px;
+      }
+    }
+    .eventsCard {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-gap: 30px;
+      @media screen and (max-width: 992px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+      @media screen and (max-width: 768px) {
+        grid-template-columns: repeat(1, 1fr);
+      }
+      > div {
+        border: 1.85449px solid #6938ef;
+        box-shadow: 0px 34.9424px 44.7699px rgb(0 0 0 / 25%);
+        border-radius: 16.3792px;
+        display: flex;
+        flex-direction: column;
+        img {
+          height: 200px;
+          width: 100%;
+          object-fit: cover;
+          border-radius: 16.3792px 16.3792px 0 0;
+        }
+        .detail {
+          padding: 16px;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          > h2 {
+            font-weight: 600;
+            font-size: 22px;
+            margin-bottom: 1rem;
+          }
+          > p {
+            font-weight: 400;
+            font-size: 16px;
+            margin-bottom: 10px;
+          }
+          .date {
+            display: flex;
+            justify-content: space-between;
+            margin-top: auto;
+            div,
+            p {
+              letter-spacing: 0.03em;
+              text-transform: capitalize;
+              color: #949494;
+            }
+            div {
+              color: #fd05b3;
+            }
+          }
+          .btnContainer {
+            margin-top: 20px;
+            font-size: 16px;
+            display: flex;
+            justify-content: space-between;
+            a,
+            p {
+              border: 1px solid #6938ef;
+              box-sizing: border-box;
+              border-radius: 42.3946px;
+              padding: 10px 0px;
+              cursor: pointer;
+              color: #ffffff;
+              min-width: 40%;
+              text-align: center;
+              transition: background 0.3s ease;
+              &:hover{
+                background: #6938ef;
+              }
+            }
+            p {
+              background: #6938ef;
+            }
+          }
+        }
+      }
+    }
+  }
+  .submitBtn{
+    border: 1px solid #6938ef;
+              box-sizing: border-box;
+              border-radius: 42.3946px;
+              padding: 10px 0px;
+              cursor: pointer;
+              color: #ffffff;
+              min-width: 40%;
+              text-align: center;
+              transition: background 0.3s ease;
+              margin-top: 20px;
+          
+              &:hover{
+                background: #6938ef;
+              }
+  }
+  // Members
+  .members {
+    > div > h2 {
+      font-size: 24px;
+      color: #ffffff;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+    }
+  }
+//   resources
+  .resources {
+    .grid {
+      display: grid;
+      grid-template-columns: 30% 68%;
+      grid-gap: 2%;
+      @media screen and (max-width: 768px) {
+        grid-template-columns: 100%;
+      }
+      > div {
+        border: 1px solid #6938ef;
+        filter: drop-shadow(0px 0px 15.3753px rgba(0, 0, 0, 0.25));
+        border-radius: 22.38px;
+        padding: 1rem 0;
+      }
+      .left {
+        font-weight: 600;
+        font-size: 24px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        div {
+          border-radius: 44px;
+          border: 1px solid #6938ef;
+          background: #1c1d37;
+          width: 90%;
+          text-align: center;
+          padding: 1rem;
+          margin: 10px 0;
+          cursor: pointer;
+        }
+      }
+      > div.right {
+        padding: 1rem 2rem;
+        flex-direction: row;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        > div {
+          display: flex;
+          width: 45%;
+          justify-content: space-between;
+          padding: 15px 10px;
+          background: #1c1d37;
+          border: 1.07926px solid #6938ef;
+          box-shadow: 0px 0px 14.7368px rgb(0 0 0 / 10%);
+          border-radius: 12px;
+          cursor: pointer;
+          margin-bottom: 20px;
+          @media screen and (max-width: 768px) {
+            width: 100%;
+          }
+          img {
+            padding: 8px;
+            border-radius: 5px;
+            background: #ffffff;
+            border: 1px solid #6938ef;
+            margin-right: 10px;
+          }
+          h2 {
+            font-weight: 500;
+            font-size: 14px;
+          }
+          p {
+            letter-spacing: 0.03em;
+            color: #949494;
+            font-size: 12px;
+            margin-top: 4px;
+          }
+        }
+      }
+    }
+  }
+  //   proposal
+  .proposal {
+    .grid {
+      display: grid;
+      grid-template-columns: 30% 68%;
+      grid-gap: 2%;
+      > div {
+        border: 1px solid #6938ef;
+        filter: drop-shadow(0px 0px 15.3753px rgba(0, 0, 0, 0.25));
+        border-radius: 22.38px;
+        padding: 1rem 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .left {
+        font-weight: 600;
+        font-size: 24px;
+        div {
+          border-radius: 44px;
+          border: 1px solid #6938ef;
+          background: #1c1d37;
+          width: 90%;
+          text-align: center;
+          padding: 1rem;
+          margin: 10px 0;
+          cursor: pointer;
+        }
+      }
+      .right > .proposalCard {
+        border: 1.85449px solid #6938ef;
+        box-shadow: 0px 34.9424px 44.7699px rgb(0 0 0 / 25%);
+        border-radius: 16.3792px;
+        width: 90%;
+        padding: 1rem;
+        margin-bottom: 20px;
+        img {
+          background: #ffffff;
+          border-radius: 100px;
+          padding: 10px;
+          height: 70px;
+        }
+        > div {
+          display: flex;
+          justify-content: space-between;
+        }
+        .detail {
+          display: flex;
+          flex-direction: column;
+          h2 {
+            font-weight: 600;
+            font-size: 22px;
+            text-transform: capitalize;
+            color: #ffffff;
+          }
+          p {
+            font-size: 16px;
+            text-align: center;
+            letter-spacing: 0.03em;
+            text-transform: capitalize;
+            color: #949494;
+            margin-top: auto;
+          }
+        }
+        p {
+          margin-top: 15px;
+          font-weight: 400;
+          font-size: 16px;
+        }
+      }
+    }
+    .activeCard{
+      p{
+        color: #6938EF;
+      }
+      path{
+        fill: #6938EF;
+      }
+    }
+    .active {
+      background: #6938ef !important;
+    }
+  }
+  .newProposal{
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    label{
+      font-size: 20px;
+      font-weight: bold;
+      margin-top: 40px;
+    }
+    input{
+      font-size: 20px;
+      font-weight: 500;
+      background: #24203B;
+      border: 1px solid #6938EF;
+      box-shadow: 1px -1px 5px #A259FF;
+      border-radius: 8px;
+      padding: 16px;
+      margin-top: 16px;
+      &:focus{
+        border: 1px solid #6938EF;
+        outline: none;
+      }
+    }
+    .categoryContainer{
+      display: flex;
+      flex-wrap: wrap;
+      >div{
+        background: #24203B;
+        border: 0.729825px solid #6938EF;
+        box-shadow: 0.729825px -0.729825px 3.64912px #a259ff;
+        border-radius: 5.8386px;
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+        width: 130px;
+        align-items: center;
+        margin-right: 20px;
+        margin-top: 20px;
+        cursor: pointer;
+        text-align: center;
+        p{
+          margin-top: 20px;
+        }
+        &:hover{
+          p{
+            color: #6938EF;
+          }
+          path{
+            fill: #6938EF;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/components/dashboard/CourseCard.js b/components/dashboard/CourseCard.js
index e9df2ae4..b35dbc40 100644
--- a/components/dashboard/CourseCard.js
+++ b/components/dashboard/CourseCard.js
@@ -23,7 +23,7 @@ const CourseCard = ({
         </div>
       ) : (
         <EmptyOverviewComponent
-          imgURL="https://s3-alpha-sig.figma.com/img/4ee3/cff9/cf0ef958c8ee474d3c466885d8a7acb2?Expires=1639353600&Signature=TUwGQk6amGy9LVngHcQ9lpNszIIYYHcey9eFrtByZlXq4AYii34O9UV9gD6A12kkvefHyADputgq6M3rDcTSa693YyLBsATyREcjTHgqfSE3vIIzXCpyfxnfMQgt-TWTTyHYiGIO0V-6N0rj7Q0LcOK4Bou5G7gmGnbKSlQ1UGy19IXXOuSwtNaM2E1Yil-4DhsxCGDFN6shDvn6CiMzy~DPjAzOw2iLucONYSLAeHBvb4AkRf6T9f3UXtG3xhXG-RY69Yw2MP-NZFGgXYu0fivIn1CDxZf-PdnaSrvKjjg-vxylIHFfY1UviTIlhbj1WorWh~N1Y3d8SIPe~6FhNA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
+          imgURL="assets/images/dashboard/course.png"
           description={`You haven’t  enrolled for any courses in ${currentView} on MPA yet. You can enroll for one in the Courses Section. Remember, you earn $MINORITY tokens when you complete a course.`}
           btnText="Enroll For Your First Course"
         />
diff --git a/components/dashboard/OverviewCareer.js b/components/dashboard/OverviewCareer.js
index c8be63d7..7d0dd2b0 100644
--- a/components/dashboard/OverviewCareer.js
+++ b/components/dashboard/OverviewCareer.js
@@ -159,7 +159,7 @@ const OverviewCareer = ({ token }) => {
                 <img
                   className="empty-events"
                   alt="empty"
-                  src="https://s3-alpha-sig.figma.com/img/1246/595d/4a0da69c016851ce633343ee4f30313d?Expires=1639353600&Signature=EJMuUjTc9G61ydW6x2nU~hpJLuXYU8MfNm2x8OtLhmikkWVFKQEepE4zR0xBOZprHcbOwJcH4WmD5e3ugNYd3m4wqqBKhvTbuAjqIVhiSWIXM2WiNo3cZgDe1hHGoocFzHSWcnseBvgqafwvABhbZBjUeogeU0UPFEhb-7D2HzKUxGwrc4kkvCLz7~IQjQCy1sAGxLhqgRa0RD-p~VNtcgemF5N1qpiDe-cwFQL58kHg1v3tZMpGZagi7PC6ryl-i8-PBWVY20znzZ9iaUs2WdcBRqHYuopxGe9Oq4~tyIKsfdOOT05~sDFvwqA33c8YaNc8uhE8-kiu5g~NLGVbKg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
+                  src="assets/images/dashboard/career.png"
                 />
                 <p className="empty-events-description">
                   No Jobs Available At The Moment
@@ -212,7 +212,7 @@ const OverviewCareer = ({ token }) => {
               <img
                 className="empty-events"
                 alt="empty"
-                src="https://s3-alpha-sig.figma.com/img/1246/595d/4a0da69c016851ce633343ee4f30313d?Expires=1639353600&Signature=EJMuUjTc9G61ydW6x2nU~hpJLuXYU8MfNm2x8OtLhmikkWVFKQEepE4zR0xBOZprHcbOwJcH4WmD5e3ugNYd3m4wqqBKhvTbuAjqIVhiSWIXM2WiNo3cZgDe1hHGoocFzHSWcnseBvgqafwvABhbZBjUeogeU0UPFEhb-7D2HzKUxGwrc4kkvCLz7~IQjQCy1sAGxLhqgRa0RD-p~VNtcgemF5N1qpiDe-cwFQL58kHg1v3tZMpGZagi7PC6ryl-i8-PBWVY20znzZ9iaUs2WdcBRqHYuopxGe9Oq4~tyIKsfdOOT05~sDFvwqA33c8YaNc8uhE8-kiu5g~NLGVbKg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
+                src="assets/images/dashboard/career.png"
               />
               <p className="empty-events-description">
                 You haven’t applied for any jobs on MPA yet. You can do that in
diff --git a/components/dashboard/OverviewEvents.js b/components/dashboard/OverviewEvents.js
index 67567763..47ab4219 100644
--- a/components/dashboard/OverviewEvents.js
+++ b/components/dashboard/OverviewEvents.js
@@ -187,7 +187,7 @@ const OverviewEvents = ({ token }) => {
         Events
       </p>
       <EmptyOverviewComponent
-        imgURL="https://s3-alpha-sig.figma.com/img/31fc/7c17/7233f396628b579fecdc6e84671283fd?Expires=1638748800&Signature=X2QnrrzjRAUkj~YcRv3an4O3YWJYSQUhuhX2AnEVa~FHseg-cm1synSLvaBOYEOzBmVM3gMf9pgowYDgSmCzwH78i0fithM2iTSCUMglNtSB1V8lniyGYSm7l3kDl8kRIaIdsoNjheCPrjP97m2i8T099fHhjK0cKgHmxzgl39i8Mo9QhhVzbfrCU8QOJYVbYthKPeGFs4p7zNUEtGVwmaVM4axtHPk38aYX0BvpKHv6MhhUU3OsxDCZ2-2mM8y50MGtB5UFpZj-UMb9MvCgUD5Rs49i6YdnmiDbYXGqAJRsjGkkh9ezQj2fsHNvCPMi1fGPa3rPyARYVdgd-plZew__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
+        imgURL="assets/images/dashboard/event.png"
         description="You haven’t registered for any events yet. MPA has tons of events going on right now. Check them out in the Events Section."
         btnText="Schedule Your First Event"
         btnFunction={() => {
diff --git a/components/dashboard/OverviewMyChapter.js b/components/dashboard/OverviewMyChapter.js
index a65b4454..d0eef071 100644
--- a/components/dashboard/OverviewMyChapter.js
+++ b/components/dashboard/OverviewMyChapter.js
@@ -250,7 +250,7 @@ const OverviewMyChatper = () => {
       <div className="" style={{ height: '85%' }}>
         {loading ? (
           <EmptyOverviewComponent
-            imgURL="https://s3-alpha-sig.figma.com/img/19e3/44e7/4ec198df3b7bfd4e806f340dbcfd3bd3?Expires=1638748800&Signature=G4VB-qMqAue8RqTkOPa5kvXQDzQg-mGi6CSAmCvSDXe5Vy-2rQPyeHKf-uHFmgc9dherDLlcSfhNJx~5GtILjwwSROJhEUjujHn7DOuH43lB1fjiZor-DmLuxjQjREAo3hKEYi3KeU0qpR9-4FJFGfcwPZKy0UszzeOLdUzcDjxs0WIJDuWM6LfYw2SR4ls4g8lLZqEs8Z0rY-C95HBUCu5r~OKbiOerp~r90-m5~Vx3wIg9lisIQOLcZ87U2fY5IQULhPHJ0dfh7aT7sWN~CPuHhntEvfb6VA4Y5uVSvbcNHfu2DoHqycSDbpDcVsMUPfTgXgktO8t-MVGSfytXkA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
+            imgURL="assets/images/dashboard/chapter.png"
             description="You don’t belong to any chapters yet. You can find chapters to join in the Chapter Section."
             btnText="Join Your First Chapter"
             btnFunction={() => {
diff --git a/components/dashboard/OverviewProfile.js b/components/dashboard/OverviewProfile.js
index ee6ca518..6900b0fd 100644
--- a/components/dashboard/OverviewProfile.js
+++ b/components/dashboard/OverviewProfile.js
@@ -37,7 +37,7 @@ const OverviewProfile = ({ userData }) => {
       <div className="" style={{ height: '85%' }}>
         {loading ? (
           <EmptyOverviewComponent
-            imgURL="https://s3-alpha-sig.figma.com/img/1976/b39a/4a68697e58613b2b3abf46ed288c9fde?Expires=1638748800&Signature=dsRmuqGXpRcdYk4fxff2ov0f-HROtzNJttNSlsInzruZNZuWwLo56Ddwdt6JyBo-pyoCEgDi7EMxeEsuUF5mtQVnZZ3yPHoE2whR7YCw2A3EcNx~ErncNhoWRv2bX~XTPVPe0AnqWyNCi0kfmUqjOcpc4c5L3iW~1VngnsiqWgD7DzEx2hpXraw3UhOSN7pO1~1JpwA5KypjHx13vAc2nyooWcunAcMpbrw6Xs~LyO9rjZxll0HfiI3umXYp6cNUD~08Ej3l-pefgyMiGC1SazPjv03S~ElKgLrhZyENoLWZzPwS9pFvD3ZU0UEJSp9WmuwoCWGf5qX67Fz-NQOZRg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
+            imgURL="assets/images/dashboard/profile.png"
             description="Oops, you must be logged in to view your profile."
             btnText="Login"
             btnFunction={() => {
diff --git a/components/dashboard/OverviewStartups.js b/components/dashboard/OverviewStartups.js
index bfbe2716..50c3c4d3 100644
--- a/components/dashboard/OverviewStartups.js
+++ b/components/dashboard/OverviewStartups.js
@@ -56,7 +56,7 @@ const OverviewStartups = ({ userData, token }) => {
   const EmptyStartupComponent = useCallback(
     () => (
       <EmptyOverviewComponent
-        imgURL="https://s3-alpha-sig.figma.com/img/e964/1331/6f840dad9adc11eb036d0b485ebb0233?Expires=1639353600&Signature=RXwGa6MBpBjiVeurYUQh0TJw2fUop~2fEHntjng0YwETQ~oMj-FkgjSFj1DgcM8btl~fK~jWHK-Sy6v6e7AJ3ymEpHu0jfGhkN7q2aziZ77EqcAFCfFE6rM352S-1lVIryJxBfF0L~v6ATChxxKtJpFv5Fn1nkp37OWdkx4PCR4SqElXgKGPPihF~SMq4ZJUgqeFhg9gDfPCYGEWrSb9nA3vy3~BLrqsjrvyfffxQ5duVTKVLURVZtY-oBdbD09LVHnDm~8VzLyAjv-rcBn3z74ndOFojz7N7L1Zcj9dKQcn7WvR-qEH~CeByULnNEPCaZZfQ-ELHeKXCDRl~unXrA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
+        imgURL="assets/images/dashboard/startup.png"
         description="You currently have no stakes or founded any of the startups yet. To explore your options, go to the Startups Section."
         btnText="Try your first Stake in"
         btnFunction={() => {
diff --git a/components/dashboard/wallet/Balance.js b/components/dashboard/wallet/Balance.js
index 6c18d44a..54dec28f 100644
--- a/components/dashboard/wallet/Balance.js
+++ b/components/dashboard/wallet/Balance.js
@@ -25,7 +25,7 @@ const CurrencyBalances = (props) => {
       style={{ width: '100%', height: '100%' }}
     >
       {/* title row */}
-      <div
+      {/* <div
         className="d-flex flex-row justify-content-between align-items-start"
         style={{ height: '15%', width: '100%', marginBottom: '15px' }}
       >
@@ -33,18 +33,21 @@ const CurrencyBalances = (props) => {
           Currency Balances
         </p>
         <button type="button">Add Token</button>
-      </div>
-      <div className="d-flex flex-row" style={{ width: '100%', height: '80%' }}>
-        <div style={{ width: '50%', height: '100%', padding: '15px' }}>
+      </div> */}
+      <div className="d-flex flex-row top-chart-detail" style={{ width: '100%' }}>
+        <div className="donghut-chart-container">
           <Chart
-            width="100%"
-            height="100%"
+            width="220px"
+            height="220px"
+            margin="auto"
             chartType="PieChart"
             loader={<div> Loading Chart</div>}
             data={chartData}
             options={{
               pieHole: 0.7,
+              tooltip: { isHtml: true },
               backgroundColor: 'transparent',
+              pieSliceBorderColor: '#1C1D37',
               slices: colorData,
               pieSliceText: 'none',
               chartArea: { width: '100%', height: '100%' },
@@ -53,8 +56,10 @@ const CurrencyBalances = (props) => {
           />
         </div>
 
-        <div style={{ width: '50%', height: '100%', overflow: 'scroll' }}>
-          <CoinsLegend walletInfo={walletInfo} />
+        <div className="coin-legend">
+          <div>
+            <CoinsLegend walletInfo={walletInfo} />
+          </div>
         </div>
       </div>
     </div>
@@ -71,19 +76,20 @@ const CoinsLegend = ({ walletInfo }) => (
         style={{
           width: '100%',
           height: '70px',
-          background: '#F8F9FD',
+          background: '#20213F',
           marginBottom: '15px',
-          padding: '20px 10px',
+          padding: '0px 10px',
+          alignItems: 'center',
         }}
       >
         {/* first column name and symbol */}
         <div className="d-flex flex-column justify-content-start">
           <p style={{ color: 'white', fontWeight: '700' }}>{ownedCoin.name}</p>
-          <p style={{ color: 'gray', fontSize: '10px' }}>{ownedCoin.symbol}</p>
+          <p style={{ color: '#878787', fontSize: '10px' }}>{ownedCoin.symbol}</p>
         </div>
         {/* amount owned */}
         <div className="d-flex flex-column justify-content-start">
-          <p style={{ color: 'gray', fontSize: '12px' }}>
+          <p style={{ color: 'white', fontSize: '12px' }}>
             {ownedCoin.owned.toFixed(2)}
           </p>
         </div>
@@ -91,9 +97,9 @@ const CoinsLegend = ({ walletInfo }) => (
         <div className="d-flex flex-row justify-content-around">
           <div
             className="d-flex flex-column justify-content-start"
-            style={{ marginRight: '3px' }}
+            style={{ margin: 'auto 10px auto 0' }}
           >
-            <p style={{ color: 'gray', fontSize: '12px' }}>
+            <p style={{ color: 'white', fontSize: '12px' }}>
               $
               {ownedCoin.AmountInUSD.toFixed(2).toLocaleString()}
             </p>
diff --git a/components/dashboard/wallet/ButtonsRow.js b/components/dashboard/wallet/ButtonsRow.js
index 83c58353..9b7ff6cf 100644
--- a/components/dashboard/wallet/ButtonsRow.js
+++ b/components/dashboard/wallet/ButtonsRow.js
@@ -1,30 +1,37 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
-  faArrowRight, faArrowLeft, faExchangeAlt,
+  faArrowRight,
 } from '@fortawesome/free-solid-svg-icons';
 
+const SwapIcon = () => (
+  <svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M36.3463 15.6658L29.8178 9.13723C29.6656 8.98505 29.4849 8.86433 29.2861 8.78198C29.0872 8.69962 28.8741 8.65723 28.6589 8.65723C28.2243 8.65723 27.8074 8.82989 27.5001 9.13723C27.1928 9.44457 27.0201 9.86141 27.0201 10.2961C27.0201 10.7307 27.1928 11.1475 27.5001 11.4549L31.254 15.1925H12.3375C11.9046 15.1925 11.4894 15.3644 11.1834 15.6705C10.8773 15.9766 10.7053 16.3918 10.7053 16.8246C10.7053 17.2575 10.8773 17.6727 11.1834 17.9787C11.4894 18.2848 11.9046 18.4568 12.3375 18.4568H35.1875C35.5097 18.4552 35.8243 18.3582 36.0915 18.1781C36.3587 17.9981 36.5666 17.7429 36.6891 17.4449C36.8141 17.1476 36.8482 16.82 36.7872 16.5034C36.7262 16.1868 36.5728 15.8953 36.3463 15.6658ZM28.6589 21.7211H5.80887C5.48665 21.7227 5.17211 21.8196 4.90489 21.9997C4.63767 22.1798 4.42974 22.4349 4.3073 22.733C4.18231 23.0302 4.14816 23.3578 4.20916 23.6745C4.27016 23.9911 4.42358 24.2825 4.65005 24.5121L11.1786 31.0406C11.3304 31.1936 11.5109 31.315 11.7098 31.3979C11.9087 31.4808 12.122 31.5234 12.3375 31.5234C12.5529 31.5234 12.7663 31.4808 12.9651 31.3979C13.164 31.315 13.3446 31.1936 13.4963 31.0406C13.6493 30.8889 13.7707 30.7084 13.8535 30.5095C13.9364 30.3106 13.9791 30.0973 13.9791 29.8818C13.9791 29.6663 13.9364 29.453 13.8535 29.2541C13.7707 29.0552 13.6493 28.8747 13.4963 28.723L9.74235 24.9854H28.6589C29.0918 24.9854 29.5069 24.8134 29.813 24.5073C30.1191 24.2012 30.2911 23.7861 30.2911 23.3532C30.2911 22.9204 30.1191 22.5052 29.813 22.1991C29.5069 21.893 29.0918 21.7211 28.6589 21.7211Z" fill="#F5841F" />
+  </svg>
+
+);
+
 const ButtonsRow = () => (
   <div className="d-flex flex-row justify-content-between" style={{ width: '100%', height: '100%' }}>
-    <div className="d-flex flex-column justify-content-center align-items-center">
-      <div className="wallet-dashboard-button" style={{ background: '#474BFF' }}>
-        <FontAwesomeIcon icon={faArrowRight} className="fa-2x" style={{ color: 'white' }} />
+    <div className="d-flex flex-column justify-content-center align-items-center wallet-button-rows">
+      <div className="wallet-dashboard-button wallet-deposite">
+        <FontAwesomeIcon icon={faArrowRight} className="fa-2x" style={{ color: '#FD05B3', transform: 'rotate(135deg)' }} />
       </div>
-      <p>Deposit</p>
+      <p className="wallet-button-rows-text">Deposit</p>
     </div>
 
-    <div className="d-flex flex-column justify-content-center align-items-center">
-      <div className="wallet-dashboard-button" style={{ background: '#F070F0' }}>
-        <FontAwesomeIcon icon={faExchangeAlt} className="fa-2x" style={{ color: 'white' }} />
+    <div className="d-flex flex-column justify-content-center align-items-center wallet-button-rows">
+      <div className="wallet-dashboard-button wallet-swap">
+        <SwapIcon />
       </div>
-      <p>Swap</p>
+      <p className="wallet-button-rows-text">Swap</p>
     </div>
 
-    <div className="d-flex flex-column justify-content-center align-items-center">
-      <div className="wallet-dashboard-button" style={{ background: '#FFC700' }}>
-        <FontAwesomeIcon icon={faArrowLeft} className="fa-2x" style={{ color: 'white' }} />
+    <div className="d-flex flex-column justify-content-center align-items-center wallet-button-rows">
+      <div className="wallet-dashboard-button wallet-withdraw">
+        <FontAwesomeIcon icon={faArrowRight} className="fa-2x" style={{ color: '#33D2FF', transform: 'rotate(-45deg)' }} />
       </div>
-      <p>Withdraw</p>
+      <p className="wallet-button-rows-text">Withdraw</p>
     </div>
   </div>
 );
diff --git a/components/dashboard/wallet/CoinCard.js b/components/dashboard/wallet/CoinCard.js
index 807b5f82..b4d7624d 100644
--- a/components/dashboard/wallet/CoinCard.js
+++ b/components/dashboard/wallet/CoinCard.js
@@ -10,50 +10,40 @@ const CoinCard = ({ info, view }) => {
 
   return (
     <div
-      className="d-flex flex-row justify-content-between align-items-center"
-      style={{
-        height: '64px',
-        width: '100%',
-        padding: '4px 12px',
-        borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
-      }}
+      className="d-flex flex-row justify-content-between align-items-center coin-row"
     >
       {/* Logo */}
       <div className="d-flex flex-row">
-        <div
-          style={{
-            height: '54px',
-            width: '54px',
-            background: '#A474FD59',
-            marginRight: '4px',
-          }}
-        />
+        <img src={coinInfo.src} alt={coinInfo.name} />
         {/* Name */}
-        <div className="d-flex flex-column">
+        <div className="d-flex flex-column tw-justify-center">
           <p style={{ color: 'white', fontWeight: '700' }}>{coinInfo.name}</p>
-          <p style={{ color: 'gray', fontSize: '10px' }}>{coinInfo.symbol}</p>
+          <p style={{ color: '#A7AEF9', fontSize: '10px' }}>{coinInfo.symbol}</p>
         </div>
       </div>
       {/* Value */}
       <div
-        className="d-flex flex-column justify-content-start align-items-end"
-        style={{ height: '100%' }}
+        className="d-flex flex-column tw-justify-center align-items-end"
+        style={{ height: '100%', margin: 'auto', textAlign: 'center' }}
       >
         <p
           style={{
             margin: 0,
             fontWeight: '500',
-            color: 'gray',
+            color: '#FFFFFF',
             fontSize: '12px',
           }}
         >
-          $
           {coinInfo.price.toFixed(2)}
+          {' '}
+          USD
         </p>
         <p
           style={{
             fontSize: '10px',
-            color: coinInfo[localCurrentView] >= 0 ? '#2DB632' : '#ED5959',
+            width: '100%',
+            textAlign: 'left',
+            color: coinInfo[localCurrentView] >= 0 ? '#16A34A' : '#ED5959',
           }}
         >
           {coinInfo[localCurrentView] >= 0 ? '+' : ''}
diff --git a/components/dashboard/wallet/MarketChart.js b/components/dashboard/wallet/MarketChart.js
index 03262a32..08d7d3cf 100644
--- a/components/dashboard/wallet/MarketChart.js
+++ b/components/dashboard/wallet/MarketChart.js
@@ -1,80 +1,152 @@
 import React, { useState } from 'react';
 import { Chart } from 'react-google-charts';
+import Select from 'react-select';
+
+const DropdownIndicator = () => (
+  <img
+    style={{ maxWidth: '20px', marginRight: '10px' }}
+    src="/assets/images/settings/arrow-down.svg"
+    alt="link"
+  />
+);
+
+const currencies = [
+  { label: 'BTC', value: 'BTC' },
+  { label: 'ETH', value: 'ETH' },
+  { label: 'LTC', value: 'LTC' },
+];
 
 const MarketChart = () => {
+  const customStyles = {
+    option: (provided, state) => ({
+      ...provided,
+      color: 'white',
+      border: state.isSelected ? '2px solid #6938EF' : state.isFocused ? '2px solid #6938EF' : '2px solid transparent',
+      background: '#1C1D37',
+      borderRadius: '8px',
+      padding: 20,
+      marginTop: 8,
+      width: '100%',
+      cursor: 'pointer',
+      fontWeight: 'bold',
+      ':active': {
+        // ...styles[':active'],
+        background: '#1C1D37',
+      },
+    }),
+    control: () => ({
+    // none of react-select's styles are passed to <Control />
+    // width: ,
+      display: 'flex',
+      height: '100%',
+    }),
+    menu: (provided) => ({
+      ...provided,
+      // borderBottom: '1px dotted pink',
+      background: '#1C1D37',
+      padding: 5,
+      border: '1px solid #6938EF',
+      width: '150px',
+      textAlign: 'center',
+      marginLeft: '-70px',
+    }),
+    container: (provided) => ({
+      ...provided,
+      height: '35px',
+      margin: '0 !important',
+      cursor: 'pointer',
+      paddingLeft: '8px',
+      border: '1px solid #6938EF',
+      borderRadius: '100px',
+    }),
+    indicatorSeparator: (provided) => ({
+      ...provided,
+      display: 'none',
+    }),
+    singleValue: (provided) => {
+      const opacity = 1;
+      const color = '#fff';
+      const transition = 'opacity 300ms';
+
+      return {
+        ...provided, opacity, transition, color,
+      };
+    },
+  };
   const [currentView, setCurrentView] = useState('Daily');
   return (
     <div className="d-flex flex-column align-items-center" style={{ width: '100%', height: '100%' }}>
       {/* First row */}
-      <div className="d-flex flex-row justify-content-between" style={{ height: '20%', width: '100%' }}>
+      <div className="d-flex flex-row justify-content-between market-chart-tabs" style={{ height: '20%', width: '100%' }}>
         <div className="d-flex flex-row align-items-center">
           <p style={{
-            fontSize: '20px', fontWeight: '700', color: 'white', marginRight: '5px',
+            fontSize: '24px', fontWeight: '500', color: 'white', marginRight: '5px',
           }}
           >
             Market Chart
           </p>
-          <select name="crypto" className="btn btn-primary" style={{ background: '#474BFF' }}>
-            <option value="BTC" selected>BTC</option>
-            <option value="ETH">ETH</option>
-            <option value="LTC">LTC</option>
-          </select>
+          <div className="tw-ml-5">
+            <Select
+              name="fiat-currency"
+              styles={customStyles}
+              components={{ DropdownIndicator }}
+              isClearable={false}
+              isSearchable={false}
+              options={currencies}
+              defaultValue={currencies[0]}
+            />
+          </div>
         </div>
 
         <div>
-          <button
-            type="button"
+          <a
             onClick={() => { setCurrentView('Hourly'); }}
             className={currentView === 'Hourly' ? 'trends-button-selected' : 'trends-button'}
             style={{
-              borderRadius: '12px', fontSize: '12px', padding: '3px 15px', marginRight: '3px',
+              borderRadius: '12px', fontSize: '12px', padding: '3px 15px',
             }}
           >
-            1H
+            1 H
 
-          </button>
-          <button
-            type="button"
+          </a>
+          <a
             onClick={() => { setCurrentView('Daily'); }}
             className={currentView === 'Daily' ? 'trends-button-selected' : 'trends-button'}
             style={{
-              borderRadius: '12px', fontSize: '12px', padding: '3px 15px', marginRight: '3px',
+              borderRadius: '12px', fontSize: '12px', padding: '3px 15px',
             }}
           >
-            1D
+            1 D
 
-          </button>
-          <button
-            type="button"
+          </a>
+          <a
             onClick={() => { setCurrentView('Weekly'); }}
             className={currentView === 'Weekly' ? 'trends-button-selected' : 'trends-button'}
             style={{
-              borderRadius: '12px', fontSize: '12px', padding: '3px 15px', marginRight: '3px',
+              borderRadius: '12px', fontSize: '12px', padding: '3px 15px',
             }}
           >
-            1W
+            1 W
 
-          </button>
-          <button
-            type="button"
+          </a>
+          <a
             onClick={() => { setCurrentView('Monthly'); }}
             className={currentView === 'Monthly' ? 'trends-button-selected' : 'trends-button'}
             style={{
-              borderRadius: '12px', fontSize: '12px', padding: '3px 15px', marginRight: '3px',
+              borderRadius: '12px', fontSize: '12px', padding: '3px 15px',
             }}
           >
-            1M
+            1 M
 
-          </button>
-          <button
-            type="button"
+          </a>
+          <a
             onClick={() => { setCurrentView('Annually'); }}
             className={currentView === 'Annually' ? 'trends-button-selected' : 'trends-button'}
             style={{ borderRadius: '12px', fontSize: '12px', padding: '3px 15px' }}
           >
-            1Y
+            1 Y
 
-          </button>
+          </a>
         </div>
       </div>
       {/* Second row */}
@@ -86,31 +158,49 @@ const MarketChart = () => {
           loader={<div>Loading Chart</div>}
           data={[
             ['date', 'prices'],
-            [0, 0],
-            [1, 10],
-            [2, 23],
-            [3, 17],
-            [4, 18],
-            [5, 9],
-            [6, 11],
-            [7, 27],
-            [8, 33],
-            [9, 40],
-            [10, 32],
-            [11, 35],
+            ['23 oct', 0],
+            ['6 nov', 10],
+            ['20 nov', 23],
+            ['4 dec', 17],
+            ['18 dec', 18],
+            ['1 jan', 9],
+            ['10 feb', 11],
+            ['6 may', 27],
+            ['20 jun', 33],
+            ['20 jul', 40],
+            ['10 aug', 32],
+            ['3 sep', 35],
           ]}
           options={{
+            tooltip: { isHtml: true },
+            colors: ['#6938EF'],
+            backgroundColor: {
+              stroke: 'white',
+              fill: 'transparent',
+            },
             hAxis: {
-              title: 'Date',
+              baselineColor: 'transparent',
+              textStyle: {
+                color: '#FFFFFF',
+              },
+              colors: ['#fffff'],
+              // title: 'Date',
               gridlines: {
                 color: 'transparent',
               },
+              titleTextStyle: { color: '#FFF' },
             },
             vAxis: {
-              title: 'Prices (in USD)',
+              baselineColor: '#fff',
+              titleTextStyle: { color: '#FFF' },
+              textStyle: {
+                color: '#FFFFFF',
+              },
+              // title: 'Prices (in USD)',
               gridlines: {
-                color: 'transparent',
+                color: '#282948',
               },
+              minorGridlines: { color: '#282948' },
             },
             legend: 'none',
           }}
diff --git a/components/dashboard/wallet/TitleAndSearchBox.js b/components/dashboard/wallet/TitleAndSearchBox.js
index 13dc22e0..9020a40c 100644
--- a/components/dashboard/wallet/TitleAndSearchBox.js
+++ b/components/dashboard/wallet/TitleAndSearchBox.js
@@ -1,26 +1,17 @@
 import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
 
 const TitleAndSearchBox = () => (
-  <div className="d-flex flex-row align-items-center" style={{ width: '100%', height: '100%' }}>
-    <div className="d-flex flex-row" style={{ width: '30%' }}>
+  <div className="d-flex flex-row align-items-center wallet-dashboard-title" style={{ width: '100%', height: '100%' }}>
+    <div className="d-flex flex-row" style={{ width: '30%', color: 'white' }}>
       <p style={{ marginRight: '5px' }}>Dashboard</p>
-      <p style={{ color: '#474BFF', marginRight: '5px' }}>{'>'}</p>
+      <p style={{ color: '#fcfcfc', marginRight: '5px' }}>{'>'}</p>
       <p>Wallet Dashboard</p>
     </div>
 
     <div
-      className="d-flex flex-row justify-content-between align-items-center"
-      style={{
-        padding: '10px 20px', border: '1px solid #3E385D33', borderRadius: '5px', height: '40px', width: '30%', marginRight: '3%',
-      }}
+      className="d-flex flex-row justify-content-between align-items-center wallet-dashboard-search-bar"
     >
-      <p style={{ margin: 0 }}>Search</p>
-      <FontAwesomeIcon icon={faSearch} className="fa-1x" />
-    </div>
-    <div className="">
-      <button className="btn btn-primary" type="button" style={{ background: '#6C6FFF', height: '40px' }}>Add Wallet</button>
+      <input placeholder="Search" className="form-control" type="text" />
     </div>
   </div>
 );
diff --git a/components/dashboard/wallet/TotalBalance.js b/components/dashboard/wallet/TotalBalance.js
index 3b7ca6d0..d93d58ab 100644
--- a/components/dashboard/wallet/TotalBalance.js
+++ b/components/dashboard/wallet/TotalBalance.js
@@ -1,34 +1,134 @@
 import React from 'react';
+import Select from 'react-select';
+import Account from '../../Account';
 
-const TotalBalance = () => (
-  <div className="total-balance-card-dashboard-wallet">
-    <div className="inner-total-balance-card-dashboard-wallet d-flex flex-column justify-content-between">
-      {/* First Row */}
-      <div className="d-flex flex-row justify-content-between" style={{}}>
-        <p style={{ fontSize: '20px', margin: 0, fontWeight: 700 }}>Total Balance</p>
-        <select name="fiat-currency" className="btn btn-primary" style={{ background: '#474BFF' }}>
-          <option value="USD" selected>USD</option>
-          <option value="AUD">AUD</option>
-          <option value="JPY">JPY</option>
-          <option value="EUR">EUR</option>
-        </select>
+const DropdownIndicator = () => (
+  <img
+    style={{ maxWidth: '20px', marginRight: '10px' }}
+    src="/assets/images/settings/arrow-down.svg"
+    alt="link"
+  />
+);
 
-      </div>
-      {/* Second Row */}
-      <div style={{ marginBottom: '10px' }}>
-        <p style={{ fontSize: '40px', fontWeight: 700, margin: 0 }}>$ 60,300,000</p>
-      </div>
-      {/* Third Row */}
-      <div className="d-flex flex-row justify-content-between align-items-start">
-        <select name="fiat-currency" className="btn btn-primary" style={{ color: '#474BFF', background: 'white' }}>
-          <option value="deposit">Deposit</option>
-          <option value="swap">Exchange</option>
-          <option value="widthdraw">Withdraw</option>
-        </select>
-        <button type="button" className="btn btn-primary" style={{ background: '#474BFF', paddingLeft: '25px', paddingRight: '25px' }}>Connect Wallet</button>
+const currencies = [
+  { label: 'USD', value: 'USD' },
+  { label: 'AUD', value: 'AUD' },
+  { label: 'JPY', value: 'JPY' },
+  { label: 'EUR', value: 'EUR' },
+];
+
+const TotalBalance = () => {
+  const customStyles = {
+    option: (provided, state) => ({
+      ...provided,
+      color: 'white',
+      border: state.isSelected ? '2px solid #6938EF' : state.isFocused ? '2px solid #6938EF' : '2px solid transparent',
+      background: '#1C1D37',
+      borderRadius: '8px',
+      padding: 20,
+      marginTop: 8,
+      width: '100%',
+      cursor: 'pointer',
+      fontWeight: 'bold',
+      ':active': {
+        // ...styles[':active'],
+        background: '#1C1D37',
+      },
+    }),
+    control: () => ({
+    // none of react-select's styles are passed to <Control />
+    // width: ,
+      display: 'flex',
+      height: '100%',
+    }),
+    menu: (provided) => ({
+      ...provided,
+      // borderBottom: '1px dotted pink',
+      background: '#1C1D37',
+      padding: 5,
+      border: '1px solid #6938EF',
+      width: '150px',
+      textAlign: 'center',
+      marginLeft: '-70px',
+
+    }),
+    container: (provided) => ({
+      ...provided,
+      height: '100%',
+      margin: '0 !important',
+      cursor: 'pointer',
+      paddingLeft: '8px',
+      border: '1px solid #6938EF',
+      borderRadius: '100px',
+    }),
+    indicatorSeparator: (provided) => ({
+      ...provided,
+      display: 'none',
+    }),
+    singleValue: (provided) => {
+      const opacity = 1;
+      const color = '#fff';
+      const transition = 'opacity 300ms';
+
+      return {
+        ...provided, opacity, transition, color,
+      };
+    },
+  };
+
+  return (
+    <div className="total-balance-card-dashboard-wallet">
+      <div className="inner-total-balance-card-dashboard-wallet d-flex flex-column justify-content-between">
+        {/* First Row */}
+        <div className="d-flex flex-row justify-content-between" style={{}}>
+          <p style={{
+            fontSize: '20px', margin: 0, fontWeight: 700, color: 'white',
+          }}
+          >
+            Total Balance
+          </p>
+
+          <Select
+            name="fiat-currency"
+            styles={customStyles}
+            components={{ DropdownIndicator }}
+            isClearable={false}
+            isSearchable={false}
+            options={currencies}
+            defaultValue={currencies[0]}
+          />
+        </div>
+        {/* Second Row */}
+        <div style={{ marginBottom: '10px' }}>
+          <p style={{
+            fontSize: '34px', fontWeight: 700, margin: 0, color: 'white',
+          }}
+          >
+            00,000
+            <span style={{
+              fontSize: '18px', fontWeight: 500, color: '#16A34A', marginLeft: 10,
+            }}
+            >
+              (+ 0.00 )
+
+            </span>
+          </p>
+          <p style={{
+            fontSize: '18px', fontWeight: 500, color: '#8F95B2', margin: 0,
+          }}
+          >
+            $00,000
+          </p>
+        </div>
+        {/* Third Row */}
+        <div className="d-flex flex-row justify-content-end">
+          <div className="wallet-dashboard-connect">
+            <Account />
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default TotalBalance;
diff --git a/components/dashboard/wallet/TransactionCard.js b/components/dashboard/wallet/TransactionCard.js
index 7cddb6e9..6abcff9f 100644
--- a/components/dashboard/wallet/TransactionCard.js
+++ b/components/dashboard/wallet/TransactionCard.js
@@ -1,7 +1,13 @@
 import React from 'react';
-import { faArrowRight, faArrowLeft, faExchangeAlt } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faExchangeAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+const SwapIcon = () => (
+  <svg width="22" height="22" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M36.3463 15.6658L29.8178 9.13723C29.6656 8.98505 29.4849 8.86433 29.2861 8.78198C29.0872 8.69962 28.8741 8.65723 28.6589 8.65723C28.2243 8.65723 27.8074 8.82989 27.5001 9.13723C27.1928 9.44457 27.0201 9.86141 27.0201 10.2961C27.0201 10.7307 27.1928 11.1475 27.5001 11.4549L31.254 15.1925H12.3375C11.9046 15.1925 11.4894 15.3644 11.1834 15.6705C10.8773 15.9766 10.7053 16.3918 10.7053 16.8246C10.7053 17.2575 10.8773 17.6727 11.1834 17.9787C11.4894 18.2848 11.9046 18.4568 12.3375 18.4568H35.1875C35.5097 18.4552 35.8243 18.3582 36.0915 18.1781C36.3587 17.9981 36.5666 17.7429 36.6891 17.4449C36.8141 17.1476 36.8482 16.82 36.7872 16.5034C36.7262 16.1868 36.5728 15.8953 36.3463 15.6658ZM28.6589 21.7211H5.80887C5.48665 21.7227 5.17211 21.8196 4.90489 21.9997C4.63767 22.1798 4.42974 22.4349 4.3073 22.733C4.18231 23.0302 4.14816 23.3578 4.20916 23.6745C4.27016 23.9911 4.42358 24.2825 4.65005 24.5121L11.1786 31.0406C11.3304 31.1936 11.5109 31.315 11.7098 31.3979C11.9087 31.4808 12.122 31.5234 12.3375 31.5234C12.5529 31.5234 12.7663 31.4808 12.9651 31.3979C13.164 31.315 13.3446 31.1936 13.4963 31.0406C13.6493 30.8889 13.7707 30.7084 13.8535 30.5095C13.9364 30.3106 13.9791 30.0973 13.9791 29.8818C13.9791 29.6663 13.9364 29.453 13.8535 29.2541C13.7707 29.0552 13.6493 28.8747 13.4963 28.723L9.74235 24.9854H28.6589C29.0918 24.9854 29.5069 24.8134 29.813 24.5073C30.1191 24.2012 30.2911 23.7861 30.2911 23.3532C30.2911 22.9204 30.1191 22.5052 29.813 22.1991C29.5069 21.893 29.0918 21.7211 28.6589 21.7211Z" fill="#F5841F" />
+  </svg>
+
+);
 const TransactionCard = ({ info }) => {
   const transactionInfo = info;
 
@@ -9,17 +15,21 @@ const TransactionCard = ({ info }) => {
     {
       type: 'deposit',
       icon: faArrowRight,
-      background: '#474BFF',
+      className: 'wallet-deposite',
+      style: { color: '#FD05B3', transform: 'rotate(135deg)' },
     },
     {
       type: 'exchange',
       icon: faExchangeAlt,
-      background: '#F070F0',
+      className: 'wallet-swap',
+      style: { color: '#33D2FF', transform: 'rotate(-45deg)' },
     },
     {
       type: 'withdraw',
-      icon: faArrowLeft,
-      background: '#FFC700',
+      icon: faArrowRight,
+      className: 'wallet-withdraw',
+      style: { color: '#33D2FF', transform: 'rotate(-45deg)' },
+
     },
   ];
 
@@ -28,21 +38,22 @@ const TransactionCard = ({ info }) => {
   return (
     <div className="d-flex flex-row justify-content-between align-items-center trans-card">
       {/* icon for transaction type */}
-      <div className="d-flex flex-row justify-content-around align-items-center">
+      <div className="d-flex flex-row justify-content-around align-items-center wallet-button-rows">
 
         <div
-          className="wallet-dashboard-button"
+          className={`${transIcon.className} wallet-dashboard-button`}
           style={{
-            background: transIcon.background, width: '40px', height: '40px', marginRight: '10px',
+            width: '40px', height: '40px', marginRight: '10px',
           }}
         >
-          <FontAwesomeIcon icon={transIcon.icon} className="fa-1x" style={{ color: 'white' }} />
+          {transIcon.type === 'exchange' ? <SwapIcon />
+            : <FontAwesomeIcon icon={transIcon.icon} style={transIcon.style} className="fa-1x" />}
         </div>
 
         {/* Transaction basic info */}
         <div className="d-flex flex-column justify-content-start align-items center">
           <p className="trans-card-text" style={{ color: 'white', fontWeight: '500' }}>{transactionInfo.type.charAt(0).toUpperCase() + transactionInfo.type.slice(1)}</p>
-          <p className="trans-card-text" style={{ color: 'rgba(0, 0, 0, 0.47)' }}>Metamask Wallet</p>
+          <p className="trans-card-text" style={{ color: 'rgb(255, 255, 255)', fontSize: '10px' }}>Metamask Wallet</p>
         </div>
       </div>
       {/* Amount of transaction */}
diff --git a/components/dashboard/wallet/TransactionsHistory.js b/components/dashboard/wallet/TransactionsHistory.js
index 6e2584bf..fd312233 100644
--- a/components/dashboard/wallet/TransactionsHistory.js
+++ b/components/dashboard/wallet/TransactionsHistory.js
@@ -5,7 +5,7 @@ const TransactionsHistory = ({ data }) => {
   const TransactionsList = data;
 
   return (
-    <div className="d-flex flex-column justify-content-between" style={{ height: '420px', width: '100%', overflowY: 'scroll' }}>
+    <div className="d-flex flex-column justify-content-between" style={{ height: '420px', width: '100%' }}>
       {TransactionsList.map((transaction) => (
         <TransactionCard info={transaction} />
       ))}
diff --git a/components/dashboard/wallet/Trends.js b/components/dashboard/wallet/Trends.js
index 8b35231c..60836351 100644
--- a/components/dashboard/wallet/Trends.js
+++ b/components/dashboard/wallet/Trends.js
@@ -1,53 +1,18 @@
-import React, { useState } from 'react';
+import React from 'react';
 import CoinCard from './CoinCard';
 
-const Trends = ({ data }) => {
-  const [currentView, setCurrentView] = useState('Daily');
-
+const Trends = ({ data, currentView, setCurrentView }) => {
   const CoinsList = data;
 
   return (
     <div className="d-flex flex-column" style={{ width: '100%', height: '100%' }}>
-      {/* first row */}
-      <div className="d-flex flex-row justify-content-between align-items-center" style={{ height: '30px', width: '100%', marginBottom: '15px' }}>
-        <p style={{ fontSize: '20px', fontWeight: '700', color: 'white' }}> Trends</p>
-        <div>
-          <button
-            type="button"
-            onClick={() => { setCurrentView('Daily'); }}
-            className={currentView === 'Daily' ? 'trends-button-selected' : 'trends-button'}
-            style={{
-              borderRadius: '12px', fontSize: '12px', padding: '3px 15px', marginRight: '3px',
-            }}
-          >
-            1D
-          </button>
-          <button
-            type="button"
-            onClick={() => { setCurrentView('Weekly'); }}
-            className={currentView === 'Weekly' ? 'trends-button-selected' : 'trends-button'}
-            style={{
-              borderRadius: '12px', fontSize: '12px', padding: '3px 15px', marginRight: '3px',
-            }}
-          >
-            1W
-          </button>
-          <button
-            type="button"
-            onClick={() => { setCurrentView('Monthly'); }}
-            className={currentView === 'Monthly' ? 'trends-button-selected' : 'trends-button'}
-            style={{ borderRadius: '12px', fontSize: '12px', padding: '3px 15px' }}
-          >
-            1M
-          </button>
-        </div>
-
-      </div>
       {/* second row list of currency in possess */}
-      <div style={{ height: '365px', width: '100%', overflowY: 'scroll' }}>
-        {CoinsList.map((coin) => (
-          <CoinCard info={coin} view={currentView} />
-        ))}
+      <div className="currencies-update">
+        <div style={{ paddingRight: '4px' }}>
+          {CoinsList.map((coin) => (
+            <CoinCard info={coin} view={currentView} />
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/components/dashboard/wallet/WalletPage.js b/components/dashboard/wallet/WalletPage.js
index 1eada4f4..2ab37f49 100644
--- a/components/dashboard/wallet/WalletPage.js
+++ b/components/dashboard/wallet/WalletPage.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import TotalBalance from './TotalBalance';
 import TransactionsHistory from './TransactionsHistory';
 import Trends from './Trends';
@@ -9,106 +9,56 @@ import CoinsList from './coinsList';
 import OwnedCoins from './ownedCoins';
 import TitleAndSearchBox from './TitleAndSearchBox';
 import ButtonsRow from './ButtonsRow';
+import WalletTopTabs from './WalletTopTabs';
 
-const WalletComponent = () => (
-  <div
-    className=""
-    style={{
-      width: '1395px',
-      padding: '15px',
-      height: '900px',
-      overflowY: 'scroll',
-    }}
-  >
-    <div className="tw-grid tw-grid-cols-24 tw-grid-rows-10 tw-gap-2 tw-h-full tw-w-full">
-      <div className="tw-col-span-24 tw-row-span-1">
-        {/* Title Row */}
-        <div style={{ height: '75px', width: '100%' }}>
-          <TitleAndSearchBox />
-        </div>
-      </div>
+const WalletComponent = () => {
+  const [currentView, setCurrentView] = useState('Daily');
 
-      <div
-        className="tw-col-span-9 tw-row-span-9"
-        style={{ paddingRight: '5%' }}
-      >
-        <div className="d-flex flex-column justify-content-between align-items-center">
-          <div
-            className=""
-            style={{ height: '200px', width: '100%', marginBottom: '20px' }}
-          >
-            <TotalBalance />
-          </div>
-          <div style={{ height: '100px', width: '100%', marginBottom: '20px' }}>
-            <ButtonsRow />
-          </div>
-          <div style={{ width: '100%', height: '420px' }}>
-            <TransactionsHistory data={TransactionsList} />
-          </div>
-        </div>
+  return (
+    <div
+      className="wallet-dashboard-container"
+    >
+      <div style={{ height: '75px', width: '100%', marginBottom: '30px' }}>
+        <TitleAndSearchBox />
       </div>
-
-      <div className="tw-col-span-15 tw-row-span-9">
-        <div
-          className="d-flex flex-column"
-          style={{
-            width: '100%',
-            height: '760px',
-            background: '#fdfcf8',
-            borderRadius: '25px',
-            padding: '15px',
-          }}
-        >
-          {/* 1st row */}
-          <div
-            className="d-flex flex-row"
-            style={{
-              width: '100%',
-              height: '415px',
-              marginBottom: '20px',
-              background: 'white',
-            }}
-          >
-            <div
-              style={{
-                width: '30%',
-                marginRight: '2%',
-                height: '415px',
-                borderRadius: '25px',
-                padding: '15px',
-              }}
-            >
-              <Trends data={CoinsList} />
-            </div>
-
-            <div
-              style={{
-                width: '68%',
-                height: '100%',
-                borderRadius: '25px',
-                padding: '15px',
-                background: 'white',
-              }}
-            >
-              <CurrencyBalances walletInfo={OwnedCoins} coinsInfo={CoinsList} />
+      <div className="wallet-grid">
+        <div style={{ paddingRight: '30px' }}>
+          <div className="wallet-left">
+            <div style={{ paddingRight: '30px' }}>
+              <div
+                style={{ height: '200px', width: '100%', marginBottom: '20px' }}
+              >
+                <TotalBalance />
+              </div>
+              <div style={{ height: '110px', width: '100%', marginBottom: '20px' }}>
+                <ButtonsRow />
+              </div>
+              <div style={{ width: '100%', height: '420px' }}>
+                <TransactionsHistory data={TransactionsList} />
+              </div>
             </div>
           </div>
-          {/* 2nd row */}
-          <div
-            style={{
-              width: '100%',
-              height: '310px',
-              borderRadius: '25px',
-              padding: '15px',
-              background: 'white',
-            }}
-          >
-            <MarketChart coinsInfo={CoinsList} />
+        </div>
+        <div className="wallet-right">
+          <WalletTopTabs currentView={currentView} setCurrentView={setCurrentView} />
+          <div className="line" />
+          <div className="currency-chart">
+            <Trends currentView={currentView} setCurrentView={setCurrentView} data={CoinsList} />
+            <CurrencyBalances
+              walletInfo={OwnedCoins}
+              currentView={currentView}
+              coinsInfo={CoinsList}
+            />
+          </div>
+          <div className="market-chart-container">
+            <div>
+              <MarketChart coinsInfo={CoinsList} />
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default WalletComponent;
diff --git a/components/dashboard/wallet/WalletTopTabs.js b/components/dashboard/wallet/WalletTopTabs.js
new file mode 100644
index 00000000..b4bddc30
--- /dev/null
+++ b/components/dashboard/wallet/WalletTopTabs.js
@@ -0,0 +1,45 @@
+import React from 'react';
+
+const WalletTopTabs = ({ setCurrentView, currentView }) => (
+  <div
+    className="d-flex flex-row align-items-center tw-justify-between trends-button-contianer"
+    style={{ width: '100%', padding: '1rem' }}
+  >
+    <div className="tw-flex">
+      <p style={{
+        fontSize: '24px', fontWeight: '500', marginRight: '20px', color: 'white',
+      }}
+      >
+        {' '}
+        Trends
+      </p>
+      <div className="tw-flex">
+        <a
+          onClick={() => { setCurrentView('Daily'); }}
+          className={currentView === 'Daily' ? 'trends-button-selected' : 'trends-button'}
+        >
+          1 D
+        </a>
+        <a
+          onClick={() => { setCurrentView('Weekly'); }}
+          className={currentView === 'Weekly' ? 'trends-button-selected' : 'trends-button'}
+        >
+          1 W
+        </a>
+        <a
+          onClick={() => { setCurrentView('Monthly'); }}
+          className={currentView === 'Monthly' ? 'trends-button-selected' : 'trends-button'}
+        >
+          1 M
+        </a>
+      </div>
+    </div>
+    <p className="add-token-btn">
+      <span><i className="fas fa-plus" /></span>
+      {' '}
+      Add Token
+    </p>
+  </div>
+);
+
+export default WalletTopTabs;
diff --git a/components/dashboard/wallet/coinsList.js b/components/dashboard/wallet/coinsList.js
index 9a262c1a..05ca3fc8 100644
--- a/components/dashboard/wallet/coinsList.js
+++ b/components/dashboard/wallet/coinsList.js
@@ -10,8 +10,9 @@ export default [
     percent_change_24h: 1.41,
     percent_change_7d: -1.89,
     percent_change_30d: 4.73,
-    color: '#FFB35B',
+    color: '#FFCC40',
     volume_24h: 26140524526.52,
+    src: '/assets/images/dashboard/BTC.svg',
   },
   {
     id: 2,
@@ -23,8 +24,10 @@ export default [
     percent_change_24h: 1.41,
     percent_change_7d: -1.89,
     percent_change_30d: 4.73,
-    color: '#889FFF',
+    color: '#FE8F66',
     volume_24h: 26140524526.52,
+    src: '/assets/images/dashboard/ether.svg',
+
   },
   {
     id: 3,
@@ -36,59 +39,76 @@ export default [
     percent_change_24h: 1.41,
     percent_change_7d: -1.89,
     percent_change_30d: 4.73,
-    color: '#607DB2',
+    color: '#783EFD',
     volume_24h: 26140524526.52,
+    src: '/assets/images/dashboard/litecoin.svg',
+
   },
   {
-    id: 4,
-    name: 'Monero',
-    symbol: 'XMR',
-    price: 190.977911,
+    id: 8,
+    name: 'Binance',
+    symbol: 'BNB',
+    price: 162.12,
     price_btc: 1,
     market_cap: 180245643159,
     percent_change_24h: 1.41,
     percent_change_7d: -1.89,
     percent_change_30d: 4.73,
-    color: 'orange',
-    volume_24h: 26140524526.52,
-  },
-  {
-    id: 5,
-    name: 'Bitcoin Cash',
-    symbol: 'BCH',
-    price: 9798.977911,
-    price_btc: 1,
-    market_cap: 180245643159,
-    percent_change_24h: 1.41,
-    percent_change_7d: -1.89,
-    percent_change_30d: 4.73,
-    color: '#A474FD59',
-    volume_24h: 26140524526.52,
-  },
-  {
-    id: 6,
-    name: 'Ethereum Classic ',
-    symbol: 'ETC',
-    price: 2.977911,
-    price_btc: 1,
-    market_cap: 180245643159,
-    percent_change_24h: 1.41,
-    percent_change_7d: -1.89,
-    percent_change_30d: 4.73,
-    color: 'green',
-    volume_24h: 26140524526.52,
-  },
-  {
-    id: 7,
-    name: 'Dogecoin',
-    symbol: 'DOGE',
-    price: 0.17,
-    price_btc: 1,
-    market_cap: 180245643159,
-    percent_change_24h: 1.41,
-    percent_change_7d: -1.89,
-    percent_change_30d: 4.73,
-    color: 'yellow',
+    color: '#FD05B3',
     volume_24h: 26140524526.52,
+    src: '/assets/images/dashboard/binance.svg',
+
   },
+  // {
+  //   id: 4,
+  //   name: 'Monero',
+  //   symbol: 'XMR',
+  //   price: 190.977911,
+  //   price_btc: 1,
+  //   market_cap: 180245643159,
+  //   percent_change_24h: 1.41,
+  //   percent_change_7d: -1.89,
+  //   percent_change_30d: 4.73,
+  //   color: 'orange',
+  //   volume_24h: 26140524526.52,
+  // },
+  // {
+  //   id: 5,
+  //   name: 'Bitcoin Cash',
+  //   symbol: 'BCH',
+  //   price: 9798.977911,
+  //   price_btc: 1,
+  //   market_cap: 180245643159,
+  //   percent_change_24h: 1.41,
+  //   percent_change_7d: -1.89,
+  //   percent_change_30d: 4.73,
+  //   color: '#A474FD59',
+  //   volume_24h: 26140524526.52,
+  // },
+  // {
+  //   id: 6,
+  //   name: 'Ethereum Classic ',
+  //   symbol: 'ETC',
+  //   price: 2.977911,
+  //   price_btc: 1,
+  //   market_cap: 180245643159,
+  //   percent_change_24h: 1.41,
+  //   percent_change_7d: -1.89,
+  //   percent_change_30d: 4.73,
+  //   color: 'green',
+  //   volume_24h: 26140524526.52,
+  // },
+  // {
+  //   id: 7,
+  //   name: 'Dogecoin',
+  //   symbol: 'DOGE',
+  //   price: 0.17,
+  //   price_btc: 1,
+  //   market_cap: 180245643159,
+  //   percent_change_24h: 1.41,
+  //   percent_change_7d: -1.89,
+  //   percent_change_30d: 4.73,
+  //   color: 'yellow',
+  //   volume_24h: 26140524526.52,
+  // },
 ];
diff --git a/components/dashboard/wallet/ownedCoins.js b/components/dashboard/wallet/ownedCoins.js
index 54ccdaa1..b682e5fe 100644
--- a/components/dashboard/wallet/ownedCoins.js
+++ b/components/dashboard/wallet/ownedCoins.js
@@ -10,24 +10,24 @@ export default [
     id: 2,
     name: 'Ethereum',
     symbol: 'ETH',
-    owned: 40.212,
+    owned: 1.212,
   },
   {
     id: 3,
     name: 'Litecoin',
     symbol: 'LTC',
-    owned: 145.12,
+    owned: 10.12,
   },
   {
     id: 4,
-    name: 'Monero',
-    symbol: 'XMR',
-    owned: 300.12,
-  },
-  {
-    id: 5,
-    name: 'Dogecoin',
-    symbol: 'DOGE',
-    owned: 3000.12,
+    name: 'Binance',
+    symbol: 'BNB',
+    owned: 4.12,
   },
+  // {
+  //   id: 5,
+  //   name: 'Dogecoin',
+  //   symbol: 'DOGE',
+  //   owned: 3000.12,
+  // },
 ];
diff --git a/components/homepage/HomepageNav.js b/components/homepage/HomepageNav.js
index 60df468e..9a41daea 100644
--- a/components/homepage/HomepageNav.js
+++ b/components/homepage/HomepageNav.js
@@ -103,6 +103,7 @@ const HomepageNav = ({
         || page === 'learn'
         || page === 'About'
         || page === 'Careers'
+        || page === 'Chapter'
         || page === 'auth'
         || page === 'Incubator'
         || page === 'Chat'
@@ -123,6 +124,7 @@ const HomepageNav = ({
         || page === 'Consultancy'
         || page === 'About'
         || page === 'Careers'
+        || page === 'Chapter'
         || page === 'learn'
         || page === 'auth'
         || page === 'Incubator'
diff --git a/components/homepage/testimonialSectionData.js b/components/homepage/testimonialSectionData.js
index 7fc124d3..85600cd5 100644
--- a/components/homepage/testimonialSectionData.js
+++ b/components/homepage/testimonialSectionData.js
@@ -79,10 +79,6 @@ export const sponsors = [
     sponsorLink: 'https://near.foundation/',
     imgSrc: 'assets/images/sponsorship/sponsor17.png',
   },
-  {
-    sponsorLink: 'https://casper.network/en/network',
-    imgSrc: 'assets/images/sponsorship/sponsor18.png',
-  },
   {
     sponsorLink: 'https://algorand.foundation/',
     imgSrc: 'assets/images/sponsorship/sponsor13.png',
@@ -95,6 +91,18 @@ export const sponsors = [
     sponsorLink: 'https://www.unitmasters.org/',
     imgSrc: 'assets/images/sponsorship/unitmasters.png',
   },
+  {
+    sponsorLink: 'https://www.banyan.gg/',
+    imgSrc: 'assets/images/sponsorship/banyan-collective.png',
+  },
+  {
+    sponsorLink: 'https://www.genadrop.com/',
+    imgSrc: 'assets/images/sponsorship/genadrop.png',
+  },
+  {
+    sponsorLink: 'https://www.bluntdao.com/',
+    imgSrc: 'assets/images/sponsorship/bluntdao.png',
+  },
 ];
 
 export const allies = [
diff --git a/package.json b/package.json
index bc08832d..b4fa911f 100644
--- a/package.json
+++ b/package.json
@@ -101,9 +101,11 @@
     "react-dropdown-select": "^4.7.4",
     "react-elastic-carousel": "^0.11.5",
     "react-file-base64": "^1.0.3",
+    "react-geocode": "^0.2.3",
     "react-github-login": "^1.0.3",
-    "react-google-charts": "^3.0.15",
+    "react-google-charts": "^4.0.0",
     "react-google-login": "^5.2.2",
+    "react-google-places-autocomplete": "^3.3.4",
     "react-highlight-words": "^0.17.0",
     "react-hook-form": "^7.12.2",
     "react-icons": "^4.2.0",
diff --git a/pages/chapter/[id].js b/pages/chapter/[id].js
new file mode 100644
index 00000000..cfea7f23
--- /dev/null
+++ b/pages/chapter/[id].js
@@ -0,0 +1,217 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import axios from 'axios';
+import ComingSoon from '../../components/ComingSoon';
+import Footer from '../../components/Footer';
+import HomepageNav from '../../components/homepage/HomepageNav';
+import Layout from '../../components/Layout';
+import useDetectOutsideClick from '../../components/UseDetectOutsideClick';
+import SidebarTwo from '../../components/sidebar/SidebarTwo';
+import links from '../../contexts/utils/links';
+import HeroSection from '../../components/chapter/view/HeroSection';
+import Tabs from '../../components/chapter/view/Tabs';
+import Overview from '../../components/chapter/view/Overview';
+import Events from '../../components/chapter/view/Events';
+import Members from '../../components/chapter/view/Members';
+import Resources from '../../components/chapter/view/Resources';
+import Governance from '../../components/chapter/view/Governance';
+import styles from '../../components/chapter/view/chapter.module.scss';
+
+function formatDate(dateStr) {
+  const MONTHS = [
+    'Jan',
+    'Feb',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'Sept',
+    'Oct',
+    'Nov',
+    'Dec',
+  ];
+  const d = new Date(dateStr);
+  const year = d.getFullYear();
+  const month = MONTHS[d.getMonth()];
+  const date = d.getDate();
+
+  return `${month} ${date} ${year}`;
+}
+
+const DropdownIndicator = () => (
+  <img
+    style={{ maxWidth: '25px', marginRight: '10px' }}
+    src="/assets/images/settings/arrow-down.svg"
+    alt="link"
+  />
+);
+
+const customStyles = {
+  option: (provided, state) => ({
+    ...provided,
+    color: 'white',
+    border: state.isSelected ? '2px solid #6938EF' : state.isFocused ? '2px solid #6938EF' : '2px solid transparent',
+    background: '#1C1D37',
+    borderRadius: '8px',
+    padding: 20,
+    marginTop: 8,
+    width: '100%',
+    cursor: 'pointer',
+    fontWeight: 'bold',
+    ':active': {
+      // ...styles[':active'],
+      background: '#1C1D37',
+    },
+  }),
+  control: () => ({
+    // none of react-select's styles are passed to <Control />
+    // width: ,
+    display: 'flex',
+    height: '100%',
+  }),
+  menu: (provided) => ({
+    ...provided,
+    // borderBottom: '1px dotted pink',
+    background: '#1C1D37',
+    padding: 5,
+    border: '1px solid #6938EF',
+    width: '100px',
+    textAlign: 'center',
+    marginLeft: '-30px',
+  }),
+  container: (provided, state) => ({
+    ...provided,
+    height: '45px',
+    margin: '0 !important',
+    cursor: 'pointer',
+    paddingLeft: '8px',
+    border: `1px solid ${state.isFocused ? '#6938EF' : ''}`,
+    borderRadius: '120px',
+  }),
+  multiValueLabel: (provided) => ({
+    ...provided,
+    color: 'white',
+  }),
+  multiValue: (provided) => ({
+    ...provided,
+    border: '1px solid #6938EF',
+    borderRadius: '100px',
+    background: 'transparent',
+    padding: '5px',
+  }),
+  multiValueRemove: (provided) => ({
+    ...provided,
+    color: 'white',
+  }),
+  indicatorSeparator: (provided) => ({
+    ...provided,
+    display: 'none',
+  }),
+  singleValue: (provided) => {
+    const opacity = 1;
+    const color = '#fff';
+    const transition = 'opacity 300ms';
+
+    return {
+      ...provided, opacity, transition, color,
+    };
+  },
+};
+const Index = () => {
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const [active, setActive] = useState({
+    overview: true,
+    events: false,
+    governance: false,
+    members: false,
+    resources: false,
+  });
+  const [hide, setHide] = useDetectOutsideClick(dropdownRef, false);
+  const [token, setToken] = useState(null);
+  const [location, setLocation] = useState({});
+  const [data, setData] = useState({});
+  const [update, setUpdate] = useState(false);
+
+  const router = useRouter();
+  const { id } = router.query;
+
+  const handleClick = () => {
+    setHide(!hide);
+  };
+
+  if (hide === false) {
+    setTimeout(() => {
+      setHide(true);
+    }, 60000);
+  }
+  useEffect(() => {
+    const userToken = window.localStorage.getItem('jwtToken');
+    setToken(userToken);
+    if (id) {
+      axios
+        .get(`http://localhost:5000/api/v1/location/${id}`)
+        .then((res) => {
+          const d = res.data.data;
+          const newData = {
+            ...d,
+            date_founded: formatDate(d.date_founded),
+          };
+          setLocation(newData);
+        })
+        .catch((err) => console.error(err));
+    }
+  }, [update]);
+  useEffect(() => {
+    if (!data) {
+      router.push('/');
+    }
+  }, [data]);
+  return (
+    <Layout pageTitle="Chapter - MPA">
+      <HomepageNav
+        open={open}
+        setOpen={setOpen}
+        page="Chapter"
+        setData={setData}
+      />
+      <SidebarTwo
+        open={open}
+        setOpen={setOpen}
+        links={links}
+        active="Home"
+        handleClick={handleClick}
+      />
+      {hide === false && <ComingSoon closeClick={handleClick} />}
+      <HeroSection
+        DropdownIndicator={DropdownIndicator}
+        data={data}
+        customStyles={customStyles}
+        location={location}
+        update={update}
+        setUpdate={setUpdate}
+        token={token}
+      />
+      <Tabs active={active} setActive={setActive} />
+      <section className={styles.detailsSection}>
+        <div className={`container ${styles.bodyContainer}`}>
+          { active.overview
+          && <Overview location={location} token={token} />}
+          { active.events
+          && <Events token={token} />}
+          { active.members
+          && <Members data={data} location={location} token={token} />}
+          { active.resources
+          && <Resources />}
+          { active.governance
+          && <Governance DropdownIndicator={DropdownIndicator} customStyles={customStyles} />}
+        </div>
+      </section>
+      <Footer />
+    </Layout>
+  );
+};
+
+export default Index;
diff --git a/pages/chapter/index.js b/pages/chapter/index.js
index 989fecb1..9ec9ca1d 100644
--- a/pages/chapter/index.js
+++ b/pages/chapter/index.js
@@ -1,44 +1,71 @@
 import React, {
-  useState, useRef, useEffect, useContext,
+  useState, useRef, useEffect,
 } from 'react';
+import axios from 'axios';
 import HomepageNav from '../../components/homepage/HomepageNav';
 import Layout from '../../components/Layout';
 import Footer from '../../components/Footer';
 import Intro from '../../components/chapter/chapter-intro/intro.component';
 import ChapterToolkit from '../../components/chapter/chapter-toolkit-menu/chapterToolkit.component';
+import ChapterSlider from '../../components/chapter/chapter-slider/ChapterSlider';
 import ChapterMap from '../../components/chapter/chapter-map/chapterMap.component';
 import SidebarTwo from '../../components/sidebar/SidebarTwo';
 import links from '../../contexts/utils/links';
 import Leaderboard from '../../components/chapter/chapter-leaderboard/leaderboard.component';
 import ChapterWrapper from '../../components/chapter/chapter-wrapper/ChapterWrapper.component';
 import useDetectOutsideClick from '../../components/UseDetectOutsideClick';
-import { GlobalContext } from '../../contexts/provider';
+
+function formatDate(dateStr) {
+  const MONTHS = [
+    'Jan',
+    'Feb',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'Sept',
+    'Oct',
+    'Nov',
+    'Dec',
+  ];
+  const d = new Date(dateStr);
+  const year = d.getFullYear();
+  const month = MONTHS[d.getMonth()];
+  const date = d.getDate();
+
+  return `${month} ${date} ${year}`;
+}
 
 const index = () => {
   const [open, setOpen] = useState(false);
-  const [active, setActive] = useState('');
-  const [userData, setUserData] = useState([]);
+  const [userData, setUserData] = useState({});
   const [token, setToken] = useState(null);
-
-  const {
-    authState: {
-      auth: { data },
-    },
-  } = useContext(GlobalContext);
+  // map
+  const [locations, setLocations] = useState([]);
+  const [filteredLocations, setFilteredLocations] = useState([]);
 
   useEffect(() => {
-    const userToken = window.localStorage.getItem('jwtToken');
-    const userInfo = window.localStorage.getItem('userInfo');
-
-    if (userToken == null || userInfo === {}) {
-      setUserData(null);
-      setActive(false);
-    } else {
-      setUserData(Object.values(JSON.parse(userInfo))[1]);
-      setActive(true);
-    }
-  }, [data]);
-
+    axios
+      .get('http://localhost:5000/api/v1/location')
+      .then((res) => res.data)
+      .then((msg) => msg.data)
+      .then((res) => {
+        const newData = res.map((d) => ({
+          ...d,
+          date_founded: formatDate(d.date_founded),
+        }));
+        console.log(newData);
+        setLocations(newData);
+        setFilteredLocations(newData);
+      })
+      .catch((err) => console.error(err));
+    const userToken = typeof window !== 'undefined'
+      ? window.localStorage.getItem('jwtToken')
+      : null;
+    setToken(userToken);
+  }, []);
   const dropdownRef = useRef(null);
   const [hide, setHide] = useDetectOutsideClick(dropdownRef, true);
   const handleClick = () => {
@@ -56,6 +83,7 @@ const index = () => {
         setOpen={setOpen}
         page="Chapter"
         setToken={setToken}
+        setData={setUserData}
       />
       <SidebarTwo
         open={open}
@@ -65,13 +93,15 @@ const index = () => {
         handleClick={handleClick}
       />
       <ChapterWrapper>
-        <Intro userData={userData} active={active} />
+        <Intro userData={userData} active={token} />
 
         <ChapterToolkit />
 
         <Leaderboard />
 
-        <ChapterMap token={token} />
+        <ChapterSlider token={token} locations={locations} />
+
+        <ChapterMap filteredLocations={filteredLocations} locations={locations} token={token} />
 
         <Footer />
       </ChapterWrapper>
diff --git a/pages/chapter/start-a-chapter.js b/pages/chapter/start-a-chapter.js
index 277c5d0b..bb53f657 100644
--- a/pages/chapter/start-a-chapter.js
+++ b/pages/chapter/start-a-chapter.js
@@ -1,11 +1,12 @@
 import React, {
   useState, useRef, useEffect, useContext,
 } from 'react';
+import { geocodeByAddress, getLatLng } from 'react-google-places-autocomplete';
 import Layout from '../../components/Layout';
 import Footer from '../../components/Footer';
 import HomepageNav from '../../components/homepage/HomepageNav';
 import useDetectOutsideClick from '../../components/UseDetectOutsideClick';
-import ChapterHeader from '../../components/chapterHeader/chapterHeader.component';
+// import ChapterHeader from '../../components/chapterHeader/chapterHeader.component';
 import ChapterDirectory from '../../components/ChapterDirectory/ChapterDirectory.component';
 import SidebarTwo from '../../components/sidebar/SidebarTwo';
 import links from '../../contexts/utils/links';
@@ -32,6 +33,7 @@ const Chapter = () => {
       setActive(false);
     } else {
       setUserData(Object.values(JSON.parse(userInfo))[1]);
+      setToken(userToken);
       setActive(true);
     }
   }, [data]);
@@ -62,7 +64,6 @@ const Chapter = () => {
         handleClick={handleClick}
       />
 
-      <ChapterHeader />
       <ChapterDirectory token={token} userData={userData} active={active} />
       <Footer />
     </Layout>
diff --git a/pages/wallet.js b/pages/wallet.js
index c93dbf62..b4bfa0f0 100644
--- a/pages/wallet.js
+++ b/pages/wallet.js
@@ -11,7 +11,6 @@ import Footer from '../components/Footer';
 import ComingSoon from '../components/ComingSoon';
 import useDetectOutsideClick from '../components/UseDetectOutsideClick';
 
-
 const index = () => {
   const [userData, setUserData] = useState({});
   const [token, setToken] = useState('');
@@ -65,8 +64,8 @@ const index = () => {
         className="container dashboard-overall-container d-flex"
         style={{ padding: 0 }}
       >
-        <div className="outer-dashboard-container">
-          <div className="container inner-dashboard-container  tw-mt-28 tw-mb-10">
+        <div style={{ width: '100%' }} className="outer-dashboard-container">
+          <div className="container inner-wallet-dashboard-container  tw-mt-28 tw-mb-10">
             {loading ? (
               <></>
             ) : (
diff --git a/public/assets/images/chapter/agreement.png b/public/assets/images/chapter/agreement.png
index c251a12b..58ee4b18 100644
Binary files a/public/assets/images/chapter/agreement.png and b/public/assets/images/chapter/agreement.png differ
diff --git a/public/assets/images/chapter/arrow-down.svg b/public/assets/images/chapter/arrow-down.svg
new file mode 100644
index 00000000..e8dce9d9
--- /dev/null
+++ b/public/assets/images/chapter/arrow-down.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8713 0.539457L1.12134 0.539457C0.992252 0.539861 0.865719 0.575465 0.75536 0.642433C0.645002 0.709402 0.554997 0.805199 0.495034 0.919515C0.435071 1.03383 0.40742 1.16234 0.415058 1.2912C0.422696 1.42006 0.465334 1.5444 0.538381 1.65083L6.91338 10.8592C7.17759 11.241 7.81367 11.241 8.07859 10.8592L14.4536 1.65083C14.5274 1.54462 14.5707 1.42022 14.5787 1.29114C14.5868 1.16207 14.5593 1.03325 14.4993 0.918693C14.4392 0.804135 14.349 0.708214 14.2383 0.641355C14.1276 0.574495 14.0007 0.539253 13.8713 0.539457Z" fill="white"/>
+</svg>
diff --git a/public/assets/images/chapter/arrow-top.svg b/public/assets/images/chapter/arrow-top.svg
new file mode 100644
index 00000000..4cc95201
--- /dev/null
+++ b/public/assets/images/chapter/arrow-top.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.12476 11.4586H13.8748C14.0038 11.4582 14.1304 11.4226 14.2407 11.3556C14.3511 11.2886 14.4411 11.1928 14.5011 11.0785C14.561 10.9642 14.5887 10.8357 14.581 10.7068C14.5734 10.578 14.5308 10.4536 14.4577 10.3472L8.08271 1.13888C7.81851 0.757091 7.18242 0.757091 6.91751 1.13888L0.542505 10.3472C0.468715 10.4534 0.425442 10.5778 0.417389 10.7069C0.409336 10.836 0.436811 10.9648 0.496828 11.0794C0.556845 11.1939 0.647109 11.2898 0.757813 11.3567C0.868517 11.4236 0.995428 11.4588 1.12476 11.4586Z" fill="white"/>
+</svg>
diff --git a/public/assets/images/chapter/bronze.svg b/public/assets/images/chapter/bronze.svg
new file mode 100644
index 00000000..28f16fd5
--- /dev/null
+++ b/public/assets/images/chapter/bronze.svg
@@ -0,0 +1,22 @@
+<svg width="116" height="150" viewBox="0 0 116 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M84.9698 -48.2021L48.3047 44.587H76.8509L115.648 -48.2021H84.9698Z" fill="#6359CF"/>
+<mask id="mask0_3012_12884" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="11" y="38" width="99" height="112">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3613 38.832H109.17V149.273H11.3613V38.832Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3012_12884)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.2598 55.0113V46.9334C41.2598 45.6201 42.3258 44.5503 43.6358 44.5503H76.8951C78.2051 44.5503 79.2711 45.6201 79.2711 46.9334V55.0113C73.4285 52.5371 67.0061 51.1691 60.2654 51.1691C53.5248 51.1691 47.1023 52.5371 41.2598 55.0113ZM84.9737 57.8811V46.9338C84.9737 42.4664 81.3496 38.832 76.8955 38.832H43.6361C39.182 38.832 35.5586 42.4664 35.5586 46.9338V57.8811C21.0818 66.398 11.3613 82.1712 11.3613 100.221C11.3613 127.312 33.2561 149.273 60.2658 149.273C87.2749 149.273 109.17 127.312 109.17 100.221C109.17 82.1712 99.4504 66.398 84.9737 57.8811Z" fill="url(#paint0_linear_3012_12884)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M60.2766 140.37C37.9962 140.37 19.8711 122.579 19.8711 100.71C19.8711 78.8405 37.9962 61.0498 60.2766 61.0498C82.557 61.0498 100.683 78.8405 100.683 100.71C100.683 122.579 82.557 140.37 60.2766 140.37Z" fill="url(#paint1_linear_3012_12884)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.8705 108.884C73.1136 112.339 69.6265 114.836 66.4337 113.493L60.9382 111.181L55.4209 113.442C52.2162 114.756 48.7525 112.228 49.0268 108.775L49.5091 102.704L45.5948 97.9992C43.3939 95.3537 44.7323 91.3171 48.0778 90.5105L53.9513 89.0945L57.0945 83.9952C58.9192 81.0349 63.2297 81.0546 65.0274 84.0314L68.1247 89.1605L73.9856 90.6305C77.3235 91.4676 78.6248 95.5163 76.3999 98.1415L72.4433 102.81L72.8705 108.884Z" fill="#C5400D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.414063 -48.2021H34.4889L78.2333 46.0836H46.2328L0.414063 -48.2021Z" fill="#7367F0"/>
+<defs>
+<linearGradient id="paint0_linear_3012_12884" x1="49.8801" y1="24.5653" x2="-8.9017" y2="109.779" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7878"/>
+<stop offset="1" stop-color="#FF0000"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3012_12884" x1="56.3741" y1="46.4038" x2="9.14984" y2="109.557" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F6581B"/>
+<stop offset="1" stop-color="#FC9F7C"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/assets/images/chapter/community.png b/public/assets/images/chapter/community.png
index 3538418a..e5daa9d9 100644
Binary files a/public/assets/images/chapter/community.png and b/public/assets/images/chapter/community.png differ
diff --git a/public/assets/images/chapter/continental.svg b/public/assets/images/chapter/continental.svg
new file mode 100644
index 00000000..a44ffa7f
--- /dev/null
+++ b/public/assets/images/chapter/continental.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1535 2.81875C10.2051 2.81875 10.2695 2.84453 10.3254 2.92188C10.0762 2.56523 10.6047 2.71992 10.6348 2.38047C10.9355 2.15703 10.8281 2.01094 10.9141 2.00234L11.0086 1.925C10.8238 1.99375 10.7594 2.00664 10.7078 2.00664H10.6219C10.5574 2.00664 10.45 2.01953 10.1965 2.09687C9.61641 2.13984 9.19961 2.76719 9.00195 2.78438C8.8 2.8918 8.80859 2.91328 8.85586 2.91328C8.86875 2.91328 8.88594 2.90898 8.90312 2.90898C8.92031 2.90898 8.9332 2.90469 8.94609 2.90469C8.99336 2.90469 8.98047 2.92617 8.70547 3.05508C8.76992 3.07227 8.22422 3.31289 8.21992 3.69102C8.20273 3.83711 8.26289 3.93594 8.36172 3.93594C8.44766 3.93594 8.55508 3.87148 8.67109 3.7082C9.05781 3.26133 9.87422 3.21836 10.2266 2.94766C10.0074 2.93047 10.0504 2.81875 10.1535 2.81875V2.81875ZM8.18984 2.96914C8.15117 2.96914 8.20273 2.92188 8.25859 2.87461C8.31875 2.82734 8.3875 2.78008 8.3875 2.78008L8.3832 2.78438C8.61523 2.69414 8.47344 2.67266 8.59805 2.6125H8.58945C8.56367 2.6125 8.61094 2.57812 8.65391 2.53945C8.69687 2.50508 8.73555 2.46641 8.69687 2.46641C8.67539 2.46641 8.61953 2.4793 8.525 2.51797C8.55508 2.475 8.67109 2.44492 8.83438 2.35469C8.59805 2.43203 8.41328 2.4793 8.3918 2.4793C8.37461 2.4793 8.47344 2.44492 8.76992 2.35469C8.78281 2.35469 8.7957 2.35898 8.8043 2.35898C8.83437 2.35898 8.84727 2.35039 8.84297 2.3418C8.83867 2.3332 8.82148 2.32891 8.79141 2.32891C8.36602 2.36328 8.04805 2.62969 8.14258 2.66406C8.19844 2.64687 8.23711 2.63828 8.26289 2.63828C8.31875 2.63828 8.29297 2.68555 8.18125 2.7543C8.23281 2.87461 7.32188 3.18398 7.21875 3.2957C7.27031 3.26562 7.30469 3.25703 7.32187 3.25703C7.39062 3.25703 7.30039 3.39023 7.21016 3.45469C7.26602 3.50625 7.30898 3.52344 7.34336 3.52344C7.43359 3.52344 7.47227 3.39883 7.54961 3.36016C7.5668 3.39453 7.58398 3.41172 7.60547 3.41172C7.67852 3.41172 7.76875 3.23125 7.8418 3.13672C7.86328 3.1582 7.88906 3.17539 7.92344 3.17539C7.99219 3.17539 8.09531 3.11953 8.25859 2.96055C8.22422 2.96484 8.19844 2.96914 8.18984 2.96914V2.96914ZM7.20156 3.75977C7.04688 3.8543 6.96523 3.89297 6.93086 3.89297C6.86641 3.89297 6.95234 3.77266 7.02969 3.64805C7.10703 3.52773 7.17578 3.40742 7.07695 3.40742C7.02969 3.40742 6.94375 3.4332 6.80625 3.50195C6.43242 3.75117 5.80078 4.43867 5.52148 4.43867H5.4957C5.94688 4.10781 5.81367 3.45898 6.44531 3.29141C7.06836 2.93477 7.49375 3.04648 8.04805 2.63828C7.88477 2.71992 7.64414 2.81016 7.58828 2.81016C7.55391 2.81016 7.60547 2.76719 7.82891 2.65977C7.80742 2.66406 7.79023 2.66836 7.77734 2.66836C7.62695 2.66836 8.76563 2.26016 8.82148 2.25156C8.35313 2.31602 7.59687 2.70703 7.49375 2.70703C7.48086 2.70703 7.48086 2.70273 7.48086 2.69414C7.49805 2.68125 7.49805 2.67266 7.48086 2.67266C7.425 2.67266 7.19297 2.75 6.95664 2.82734C6.72461 2.90469 6.48828 2.98633 6.43672 2.98633C6.41953 2.98633 6.41953 2.97773 6.44531 2.96055C4.41719 4.11211 2.72422 6.0543 2.1957 8.35742C2.41484 8.86016 2.26445 9.81836 2.62539 10.0977C3.03789 10.4457 2.27305 11.4555 2.475 12.0785C2.68125 13.2043 3.5707 13.9734 3.66523 15.125C3.82852 15.9156 4.42578 16.8824 4.675 17.3852C4.86406 17.5742 5.38398 18.1199 5.47422 18.1199C5.50859 18.1199 5.48711 18.0383 5.34961 17.8191C5.26367 17.5742 4.76523 16.934 5.00586 16.934C5.01875 16.934 5.03164 16.934 5.04883 16.9383C4.75234 16.6375 5.70625 16.7191 5.04023 16.3109C4.96289 16.2164 4.9457 16.1863 4.96289 16.1863C4.98438 16.1863 5.04453 16.2207 5.11328 16.2551C5.18633 16.2895 5.27227 16.3238 5.34102 16.3238C5.44844 16.3238 5.52148 16.2508 5.47852 15.9844C5.4957 15.993 5.51289 15.993 5.52578 15.993C5.6375 15.993 5.59883 15.7738 5.60742 15.5547C5.61602 15.3355 5.67188 15.1164 5.97266 15.1164C6.00703 15.1164 6.0457 15.1207 6.08438 15.125C6.78047 14.7469 6.17461 13.7027 6.97383 13.3203C6.94375 12.4523 5.7793 12.4094 5.34102 12.057C5.26797 12.1 5.19922 12.1129 5.13047 12.1129C5.05313 12.1129 4.98437 12.0957 4.92422 12.0742C4.86406 12.057 4.8082 12.0355 4.76953 12.0355C4.76094 12.0355 4.75234 12.0355 4.74375 12.0398C5.49141 11.8422 4.9457 10.8023 4.32695 10.8023H4.28398C4.23672 10.3512 4.00469 10.523 3.97891 10.1492C3.94023 10.1707 3.90156 10.1793 3.86289 10.1793C3.75977 10.1793 3.66523 10.1063 3.58359 10.0375C3.50195 9.96445 3.4332 9.8957 3.37305 9.8957C3.32578 9.8957 3.28281 9.94297 3.24414 10.0805C3.28711 9.86992 3.27422 9.80117 3.23125 9.80117C3.18828 9.80117 3.11094 9.87422 3.025 9.94727C2.94336 10.0203 2.84883 10.0934 2.77578 10.0934H2.7543C2.25156 9.73672 2.75859 9.10508 2.49219 8.61953C2.66406 8.43477 2.73281 8.12109 2.65547 8.12109C2.6168 8.12109 2.53945 8.19844 2.41914 8.40898C2.24727 7.9707 2.70273 6.97813 3.08945 6.92227C3.10234 6.92227 3.11094 6.91797 3.12383 6.91797C3.19258 6.91797 3.26133 6.95234 3.32148 7.02539C3.35586 7.22734 3.26992 7.65273 3.3043 7.65273C3.32148 7.65273 3.35586 7.5668 3.4418 7.34336C3.55352 6.83203 4.33555 6.4625 4.41719 6.14883C4.42148 6.15313 4.42148 6.15312 4.42578 6.15312C4.51602 6.15312 5.09609 5.6418 5.34961 5.58594C5.44844 5.48711 5.51719 5.45273 5.56875 5.45273C5.62461 5.45273 5.65469 5.4957 5.67617 5.53438C5.69766 5.57734 5.71484 5.61602 5.73633 5.61602C5.75352 5.61602 5.775 5.59023 5.81367 5.51719C5.68047 5.25508 6.02422 5.00586 5.92969 5.00586C5.89531 5.00586 5.79219 5.04023 5.58164 5.12617C5.54727 5.14336 5.53008 5.14766 5.52148 5.14766C5.4957 5.14766 5.59883 5.07891 5.74922 5.01016C5.89961 4.94141 6.08867 4.87266 6.24766 4.87266C6.325 4.87266 6.39375 4.88984 6.44531 4.93281C7.11133 4.77383 6.74609 4.55469 6.78047 4.55469H6.78906C6.97813 4.44297 6.92227 4.02187 7.20156 3.75977V3.75977ZM4.22383 5.51719C4.21523 5.51719 4.25391 5.46133 4.38281 5.30234C4.64922 5.10469 4.86406 4.97148 4.61914 4.84258C4.72656 4.79531 4.82969 4.73945 4.92852 4.6793C4.92422 4.88984 4.74805 5.40117 4.65352 5.40117C4.63203 5.40117 4.61055 5.37109 4.60195 5.30664C4.65781 5.20781 4.66211 5.16914 4.64062 5.16914C4.60625 5.16914 4.50742 5.25508 4.41289 5.34531C4.31836 5.42695 4.23242 5.51719 4.22383 5.51719V5.51719ZM4.46875 5.6332C4.35273 5.6332 4.37422 5.56016 4.73086 5.48711C4.88555 5.46562 4.76523 5.47422 4.95 5.43125C4.76953 5.57734 4.56758 5.6332 4.46875 5.6332V5.6332ZM11.1504 5.19922C11.202 5.19062 11.2406 5.19063 11.2707 5.19063C11.3953 5.19063 11.3395 5.24219 11.2664 5.29375C11.1934 5.34531 11.1031 5.39687 11.1547 5.39687C11.1848 5.39687 11.2664 5.37969 11.434 5.33242C12.2805 5.27227 11.1031 4.55469 11.2922 4.31406L11.2406 4.29688C10.8926 4.73945 11.4727 4.74805 11.1504 5.19922V5.19922ZM10.798 5.21641C10.8582 5.21641 10.9355 5.14766 11.0172 4.9543C11.1289 4.82109 11.0816 4.80391 10.9613 4.73945C10.6305 4.82539 10.6605 5.21641 10.798 5.21641ZM13.7629 6.57852C13.75 6.57852 13.7414 6.58281 13.7328 6.58711C13.7672 6.5957 13.8016 6.6043 13.8359 6.6043C13.8016 6.58711 13.7801 6.57852 13.7629 6.57852ZM19.5336 7.64844C19.6066 7.80742 19.6453 7.87187 19.6496 7.87187C19.6797 7.87187 19.1082 6.47969 18.8719 6.23047C17.6387 4.20234 15.6105 2.65117 13.2988 2.07109H13.2945C13.2344 2.07109 13.3031 2.10117 13.3848 2.13125C13.4664 2.16133 13.5652 2.19141 13.5652 2.19141C13.5652 2.19141 13.5008 2.16992 13.3031 2.11406C13.084 2.04961 12.8605 2.00234 12.6328 1.98516C12.5941 1.99805 13.5738 2.38477 14.2313 2.58672C14.0121 2.51797 13.7844 2.45781 13.7285 2.45781C13.6898 2.45781 13.7285 2.48359 13.8875 2.55234C13.6941 2.49648 13.6125 2.4707 13.6039 2.4707C13.591 2.4707 13.8617 2.56094 14.1152 2.65117C14.373 2.74141 14.618 2.83164 14.5492 2.83164C14.532 2.83164 14.4848 2.82305 14.4117 2.81016C14.6309 2.93047 14.7082 2.97773 14.6953 2.97773C14.6738 2.97773 14.4031 2.84883 14.1238 2.71992C13.8488 2.59102 13.5695 2.46211 13.5309 2.46211C13.5094 2.46211 13.5652 2.50508 13.7543 2.6168C14.0121 2.72852 14.2699 2.84023 14.1969 2.84023C14.1625 2.84023 14.0637 2.81875 13.8703 2.76289C14.3 2.98203 13.5652 2.89609 13.8145 3.19258C13.677 3.06367 13.6211 3.0207 13.6082 3.0207C13.5953 3.0207 13.6297 3.07227 13.6641 3.12383C13.6984 3.17539 13.7242 3.22695 13.6941 3.22695H13.6855C13.9863 3.55352 13.475 3.26133 13.8402 3.55352C13.5652 3.42891 13.0969 3.22266 13.3074 3.22266C13.359 3.22266 13.4578 3.23555 13.6125 3.26992C13.3332 2.94336 12.5426 2.93047 12.5254 2.8918C12.3277 2.90469 12.3234 3.05508 12.3578 3.33008C12.3535 3.76406 11.9281 3.77266 11.984 4.02187C11.984 4.01758 11.9883 4.01758 11.9883 4.01758C11.9969 4.01758 12.0012 4.10352 12.027 4.19375C12.057 4.27969 12.1086 4.36992 12.2203 4.36992C12.2805 4.36992 12.3578 4.34414 12.4523 4.27969C12.5855 4.52031 12.7059 4.60625 12.8004 4.60625C12.9422 4.60625 13.0281 4.41289 13.0195 4.23672C12.8648 4.15078 12.6629 3.4375 12.8863 3.4375C12.9207 3.4375 12.9637 3.45469 13.0195 3.49336C12.6715 4.34844 14.3945 3.77695 13.4191 4.16797C13.6383 4.45586 13.2816 4.44297 13.3848 4.79102C13.2172 4.83828 13.0324 4.88125 12.8691 4.88125C12.6285 4.88125 12.4438 4.77813 12.4652 4.41719C12.1645 4.57617 12.766 5.11328 12.1688 5.11328H12.1344C11.8465 5.6418 10.768 5.46133 11.6145 6.01992C11.6617 6.26484 11.507 6.30781 11.3094 6.30781C11.2578 6.30781 11.202 6.30352 11.1461 6.29922C11.0902 6.29492 11.0344 6.29492 10.9828 6.29492C10.7594 6.29492 10.6004 6.35078 10.7379 6.69883C10.6391 7.05977 10.8711 7.21875 11.1547 7.21875C11.4984 7.21875 11.9195 6.99531 11.9496 6.62578C12.1344 6.34648 12.3707 6.23047 12.6156 6.23047C13.0023 6.23047 13.4105 6.52266 13.677 6.88359C13.6984 6.91797 13.7156 6.93086 13.7242 6.93086C13.7457 6.93086 13.7242 6.84492 13.7156 6.75898C13.707 6.69023 13.707 6.62148 13.7328 6.6C13.3504 6.49258 13.0582 6.02852 13.1871 6.02852C13.2301 6.02852 13.3203 6.08008 13.4664 6.21758H13.4879C13.7285 6.21758 13.9176 6.40664 14.0637 6.5957C14.2141 6.78477 14.3258 6.97383 14.4246 6.97383C14.4633 6.97383 14.502 6.93945 14.5363 6.86211C14.5191 6.83633 14.4762 6.76328 14.4547 6.69023C14.4289 6.6 14.4289 6.50977 14.5449 6.50977C14.5922 6.50977 14.6566 6.52695 14.7469 6.56133C15.0391 6.48398 14.5621 5.72344 14.9488 5.72344C14.9875 5.72344 15.0348 5.73203 15.0949 5.74922C15.0906 5.88242 15.1508 5.92969 15.2066 5.92969C15.3184 5.92969 15.4301 5.7707 15.1594 5.72344C15.2625 5.62461 15.3227 5.58594 15.3656 5.58594C15.516 5.58594 15.3957 6.08438 15.9156 6.08438C16.0918 6.50117 14.3859 6.11445 14.9316 6.91367C15.0563 7.00391 15.2109 7.02109 15.3613 7.02109C15.4086 7.02109 15.4516 7.02109 15.4945 7.0168C15.5375 7.0168 15.5805 7.0125 15.6191 7.0125C15.8855 7.0125 16.0746 7.07695 15.9586 7.62695C15.8168 7.73008 15.6578 7.76445 15.4945 7.76445C15.3484 7.76445 15.2023 7.73867 15.0605 7.71289C14.9188 7.68711 14.7813 7.66133 14.6566 7.66133C14.4633 7.66133 14.3086 7.72578 14.2141 7.94922C13.7113 7.74297 13.0496 7.73438 13.1141 7.11133C12.2375 7.23594 11.3223 7.17148 10.6777 7.70859C10.6391 8.49492 9.28984 8.74844 9.61641 9.64219C9.22539 10.4672 10.0891 11.623 10.9699 11.623C11 11.623 11.0344 11.623 11.0645 11.6187C11.5457 11.6145 12.0312 11.3996 12.4566 11.3996C12.6758 11.3996 12.8734 11.4555 13.0453 11.6273C13.084 11.623 13.1184 11.6187 13.1484 11.6187C13.8059 11.6187 12.9379 12.6629 13.7242 12.8391C14.4375 13.5781 13.2859 14.3387 13.8488 15.0477C13.909 15.602 14.184 16.066 14.184 16.6074C14.257 16.616 14.3258 16.6203 14.3988 16.6203C15.3055 16.6203 15.8727 15.8297 16.4055 15.2324C16.2422 14.3387 17.673 14.1625 17.1832 13.1613C16.9555 12.0656 18.2617 11.4168 18.1887 10.3211C18.2016 10.1664 18.1586 10.1191 18.0941 10.1191C18.0297 10.1191 17.9352 10.1664 17.8449 10.2094C17.7504 10.2566 17.6473 10.2996 17.5656 10.2996C17.4582 10.2996 17.3766 10.2266 17.368 9.98594C16.7363 9.39727 16.4484 8.59805 15.8598 7.94922C16.6246 8.31875 17.0586 9.15234 17.4109 9.90859C17.441 9.91719 17.4711 9.92148 17.5055 9.92148C18.1285 9.92148 18.9965 8.43047 18.0512 8.06953C17.9996 8.21133 17.9309 8.26289 17.8492 8.26289C17.7074 8.26289 17.5441 8.09102 17.4281 7.92344C17.3121 7.75156 17.252 7.57969 17.3164 7.57969C17.3594 7.57969 17.4539 7.64844 17.6172 7.82891C17.802 7.94492 17.9824 7.975 18.1715 7.975C18.3562 7.975 18.5453 7.94492 18.743 7.92773C18.9922 8.02656 19.0996 8.34453 19.177 8.34453C19.1898 8.34453 19.207 8.33164 19.2199 8.30156C19.4176 8.77422 19.6453 9.61641 19.8516 9.84414C19.7441 9.12227 19.7184 8.35742 19.5336 7.64844V7.64844ZM17.1359 6.65586C16.6504 6.53125 16.4914 5.92969 16.109 5.58164C16.1047 5.48711 16.2465 5.5043 16.2121 5.34531C16.7277 5.5043 16.5602 5.66328 16.5129 5.69336C16.702 6.00703 17.2305 6.22187 17.1359 6.65586ZM10.4629 3.38594C9.99453 3.52344 9.93008 3.37305 10.0117 3.66094C10.0461 3.68672 10.1105 3.69531 10.175 3.69531C10.4027 3.69961 10.7121 3.56641 10.4629 3.38594ZM17.3422 15.2238C17.9566 14.7039 18.034 14.0852 18.0641 13.4578C17.7891 13.9949 16.9727 14.5879 17.3422 15.2238ZM14.5449 6.84492C14.5406 6.84922 14.5406 6.84922 14.5406 6.85352C14.5449 6.86211 14.5492 6.86211 14.5492 6.86211C14.5492 6.86211 14.5492 6.85781 14.5449 6.84492V6.84492ZM11 0C4.92422 0 0 4.92422 0 11C0 17.0758 4.92422 22 11 22C17.0758 22 22 17.0758 22 11C22 4.92422 17.0758 0 11 0ZM11 21.1535C5.39258 21.1535 0.846484 16.6074 0.846484 11C0.846484 5.39258 5.39258 0.846484 11 0.846484C16.6074 0.846484 21.1535 5.39258 21.1535 11C21.1535 16.6074 16.6074 21.1535 11 21.1535Z" fill="#FD05B3"/>
+</svg>
diff --git a/public/assets/images/chapter/finished.png b/public/assets/images/chapter/finished.png
new file mode 100644
index 00000000..79a2e226
Binary files /dev/null and b/public/assets/images/chapter/finished.png differ
diff --git a/public/assets/images/chapter/gold.svg b/public/assets/images/chapter/gold.svg
new file mode 100644
index 00000000..df81a34c
--- /dev/null
+++ b/public/assets/images/chapter/gold.svg
@@ -0,0 +1,22 @@
+<svg width="116" height="198" viewBox="0 0 116 198" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M84.5558 0L47.8906 92.7892H76.4368L115.234 0H84.5558Z" fill="#6359CF"/>
+<mask id="mask0_3012_12905" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="87" width="99" height="111">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9434 87.0342H108.752V197.475H10.9434V87.0342Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3012_12905)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.8418 103.213V95.1356C40.8418 93.8223 41.9078 92.7524 43.2178 92.7524H76.4771C77.7871 92.7524 78.8531 93.8223 78.8531 95.1356V103.213C73.0106 100.739 66.5881 99.3712 59.8475 99.3712C53.1068 99.3712 46.6844 100.739 40.8418 103.213ZM84.5557 106.083V95.136C84.5557 90.6685 80.9316 87.0342 76.4775 87.0342H43.2182C38.7641 87.0342 35.1406 90.6685 35.1406 95.136V106.083C20.6638 114.6 10.9434 130.373 10.9434 148.423C10.9434 175.514 32.8381 197.475 59.8478 197.475C86.8569 197.475 108.752 175.514 108.752 148.423C108.752 130.373 99.0325 114.6 84.5557 106.083Z" fill="url(#paint0_linear_3012_12905)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M59.8625 188.572C37.5822 188.572 19.457 170.781 19.457 148.912C19.457 127.043 37.5822 109.252 59.8625 109.252C82.1429 109.252 100.269 127.043 100.269 148.912C100.269 170.781 82.1429 188.572 59.8625 188.572Z" fill="url(#paint1_linear_3012_12905)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.4565 157.086C72.6995 160.541 69.2124 163.038 66.0196 161.695L60.5242 159.383L55.0069 161.644C51.8021 162.958 48.3385 160.43 48.6127 156.977L49.095 150.906L45.1807 146.201C42.9798 143.556 44.3182 139.519 47.6637 138.713L53.5372 137.297L56.6804 132.197C58.5051 129.237 62.8157 129.257 64.6133 132.234L67.7107 137.363L73.5716 138.833C76.9094 139.67 78.2108 143.718 75.9859 146.344L72.0292 151.012L72.4565 157.086Z" fill="#FFEFB9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H34.0749L77.8192 94.2858H45.8188L0 0Z" fill="#7367F0"/>
+<defs>
+<linearGradient id="paint0_linear_3012_12905" x1="49.4622" y1="72.7674" x2="-9.31966" y2="157.981" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFDE78"/>
+<stop offset="1" stop-color="#FFBA3B"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3012_12905" x1="55.96" y1="94.6059" x2="8.73578" y2="157.759" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD06D"/>
+<stop offset="1" stop-color="#F99912"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/assets/images/chapter/hero.svg b/public/assets/images/chapter/hero.svg
new file mode 100644
index 00000000..f2531349
--- /dev/null
+++ b/public/assets/images/chapter/hero.svg
@@ -0,0 +1,152 @@
+<svg width="1104" height="712" viewBox="0 0 1104 712" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M422.297 555.869C426.356 533.522 434.094 512.001 445.196 492.184C448.38 486.529 451.834 481.012 455.559 475.634C457.315 473.099 452.942 470.757 451.197 473.281C437.954 492.38 427.997 513.557 421.738 535.937C420.026 542.102 418.633 548.351 417.564 554.659C417.357 555.866 417.899 557.097 419.277 557.446C420.456 557.745 422.076 557.09 422.297 555.866V555.869Z" fill="#13375B"/>
+<path d="M472.906 481.753C476.368 484.705 478.106 488.831 479.57 492.864C481.319 497.732 482.752 502.707 483.861 507.759C486.065 517.67 487.119 527.752 487.778 537.838C488.159 543.687 488.402 549.543 488.644 555.395C488.768 558.432 493.904 558.446 493.776 555.395C492.903 534.292 491.995 512.732 484.78 492.504C482.974 487.449 480.862 482.145 476.368 478.564C475.886 478.152 475.273 477.925 474.639 477.925C474.005 477.925 473.392 478.152 472.91 478.564C472.686 478.766 472.506 479.013 472.383 479.289C472.261 479.565 472.197 479.864 472.197 480.166C472.197 480.468 472.261 480.766 472.383 481.042C472.506 481.318 472.686 481.565 472.91 481.768L472.906 481.753Z" fill="#13375B"/>
+<path d="M480.543 463.836H412.109C407.22 463.836 403.256 467.482 403.256 471.978C403.256 476.474 407.205 480.522 412.095 480.522L491.697 483.413C496.234 483.413 501.295 477.293 502.381 473.245L522.912 397.35C524.172 392.679 521.035 387.962 515.939 386.869C510.953 385.801 505.992 388.588 504.728 393.131L486.173 459.82C485.525 462.177 483.203 463.836 480.543 463.836Z" fill="#13375B"/>
+<path d="M457.904 280.88L451.69 280.66L451.102 286.423L444.97 286.48L443.734 291.92L439.15 292.71L439.549 295.031L445.678 293.971L446.853 288.816L453.232 288.759L453.809 283.091L459.443 283.287L457.904 280.88Z" fill="#466EB6"/>
+<path d="M382.774 386.801L381.823 390.119L386.998 392.237L386.207 397.264L389.822 399.482L388.696 401.308L383.864 398.342L384.615 393.583L379.23 391.379L380.662 386.384L382.774 386.801Z" fill="#F7CC7F"/>
+<path d="M524.405 370.076L519.661 371.115L516.659 367.178L511.424 368.716L509.519 363.536L503.521 365.017L501.178 360.464L495.174 360.944L495.359 363.216L499.846 362.856L502.318 367.662L508.084 366.238L510.021 371.507L515.797 369.805L518.728 373.65L523.126 372.689L524.522 375.619L526.581 374.636L524.405 370.076Z" fill="#F7CC7F"/>
+<path d="M398.37 384.64L401.28 382.739L400.037 380.828L395.336 383.9L398.292 389.144L395.2 392.864L397.127 396.933L394.588 398.952L396.005 400.735L399.962 397.592L397.886 393.202L401.048 389.393L398.37 384.64Z" fill="#F7CC7F"/>
+<path d="M332.433 455.234H423.104V425.37H332.433V455.234Z" fill="#86B1F2"/>
+<path d="M294.862 540.18H362.676V423.665H294.862V540.18Z" fill="#FAE0B2"/>
+<path d="M419.022 555.122H428.609V419.511H419.022V555.122Z" fill="#184655"/>
+<path d="M323.02 555.125H329.9V539.892H323.02V555.125Z" fill="#184655"/>
+<path d="M284.875 555.118H291.756V540.13H284.875V555.118Z" fill="#184655"/>
+<path d="M342.76 416.929C342.926 416.929 343.09 416.911 343.252 416.876C344.676 416.559 345.595 414.953 345.324 413.291C345.324 413.291 334.089 348.438 333.216 348.107C332.938 348 332.276 346.683 332.251 346.683C332.114 346.687 331.978 346.705 331.845 346.736C330.421 347.053 329.502 348.659 329.769 350.321L340.207 414.451C340.438 415.907 341.528 416.929 342.76 416.929Z" fill="#355389"/>
+<path d="M365.613 352.749L376.008 415.263L343.761 415.711L332.236 346.672L361.567 348.303C363.782 348.403 365.335 351.037 365.613 352.749Z" fill="#466EB6"/>
+<path d="M421.215 413.914V414.024C421.215 416.018 420.054 417.662 418.604 417.666L377.649 417.769C376.196 417.769 375.021 416.16 375.018 414.166C375.018 414.081 375.018 413.999 375.018 413.914H421.215Z" fill="#355389"/>
+<path d="M409.367 413.914C409.367 413.949 409.367 413.985 409.367 414.02C409.367 416.042 407.611 417.687 405.449 417.691L344.103 417.819C341.93 417.819 340.164 416.188 340.16 414.166C340.16 414.081 340.16 413.995 340.16 413.914H409.367Z" fill="#355389"/>
+<path d="M396.699 527.065C394.206 531.693 388.113 546.976 387.881 548.133C387.817 548.468 386.952 549.582 386.663 549.792C378.796 550.582 373.038 546.357 368.668 542.195C372.795 542.483 379.103 541.419 380.021 541.262C382.415 540.853 382.158 533.576 383.526 525.399C385.648 526.371 393.608 524.267 396.699 527.065Z" fill="#F7A491"/>
+<path d="M387.91 548.033C387.258 550.589 384.548 555.306 384.028 555.153C383.401 554.989 360.168 546.655 358.177 543.327C356.945 541.276 363.294 541.191 368.405 541.44C372.775 545.619 386.567 548.695 387.91 548.033Z" fill="#355389"/>
+<path d="M471.743 461.732L417.711 464.843L398.013 533.032L382.344 529.97C382.344 529.97 391.129 459.421 396.233 453.519C410.193 437.417 458.958 439.322 458.958 439.322L471.743 461.732Z" fill="#3C8F7C"/>
+<path d="M430.051 530.731C429.851 533.875 429.132 537.68 429.274 541.344C429.37 543.807 430.282 546.801 430.392 547.26C430.471 547.595 430.15 548.966 429.976 549.275C423.152 553.273 416.158 551.831 410.449 549.87C414.324 548.414 417.016 545.512 417.988 544.459C419.634 542.679 418.462 537.317 416.293 529.314C418.629 529.314 426.076 529.478 430.051 530.731Z" fill="#F7A491"/>
+<path d="M466.147 434.519C466.147 434.519 415.755 435.466 403.091 453.992C393.618 467.876 417.211 536.228 417.211 536.228L431.407 533.615C431.407 533.615 428.138 487.282 425.773 471.995C425.37 469.403 423.526 461.753 423.526 461.753C423.526 461.753 429.822 463.625 441.524 464.373C457.607 465.398 481.005 465.128 486.041 462.5C494.769 457.965 498.43 445.658 494.588 437.63C490.745 429.603 466.147 434.519 466.147 434.519Z" fill="#50BFA5"/>
+<path d="M430.375 547.172C431.261 548.792 431.71 555.075 431.176 555.168C430.542 555.282 403.85 556.777 400.645 554.584C398.668 553.235 405.695 551.779 410.449 549.885C416.161 551.832 430.09 548.895 430.375 547.172Z" fill="#355389"/>
+<path d="M427.439 400.981C427.439 400.981 412.763 404.651 405.427 406.983C398.091 409.315 388.749 409.984 388.749 409.984L380.857 414.153L397.756 414.651L437.112 411.152L440.445 401.981L427.439 400.981Z" fill="#F48C7F"/>
+<path d="M438.444 371.308L431.443 372.309C431.443 372.309 428.95 372.811 426.938 383.811C424.926 394.812 422.102 400.65 422.102 400.65L439.278 407.485C451.831 390.155 460.439 369.621 438.444 371.308Z" fill="#B75742"/>
+<path d="M438.039 361.34C433.562 362.119 433.291 365.733 433.291 365.733L428.708 384.818C428.708 384.818 428.288 392.903 429.217 396C431.023 402.016 434.673 404.391 440.653 406.434C448.58 409.147 451.714 415.979 455.133 419.962C461.066 426.879 456.237 435.156 456.237 435.156L497.697 440.973C497.697 440.973 498.26 432.885 488.869 410.155C480.699 390.414 461.151 357.285 438.039 361.34Z" fill="#F47458"/>
+<path d="M452.787 363.64C447.701 358.058 434.777 364.975 438.78 383.48C438.805 383.597 440.269 403.028 439.033 405.495C438.285 406.997 420.276 406.246 409.374 408.538C409.374 408.538 397.587 404.167 393.448 403.871C390.382 403.654 383.081 405.982 383.081 405.982C383.081 405.982 373.676 412.921 374.994 414.067C376.774 415.637 381.219 408.791 384.944 408.791C384.944 408.791 378.153 414.035 380.247 414.153C382.341 414.27 385.232 412.7 386.75 412.234C388.267 411.767 393.837 414.569 398.758 415.153C399.57 415.249 402.783 415.075 406.511 415.569C410.24 416.064 414.57 417.449 419.574 417.681C433.036 418.307 448.271 419.792 452.042 415.997C454.852 413.17 461.344 373.035 452.787 363.64Z" fill="#F7A491"/>
+<path d="M455.061 404.547C446.842 403.479 438.597 400.371 438.597 400.371C438.597 400.371 437.921 384.091 437.86 383.479C437.333 374.974 437.654 368.135 441.215 363.721C442.996 361.503 444.922 360.973 447.202 360.973C449.338 360.973 452.305 361.809 453.872 363.821C459.605 371.14 457.412 392.432 455.62 404.141L455.546 404.622L455.061 404.547Z" fill="#B75742"/>
+<path d="M434.303 329.852C434.933 324.369 434.926 303.533 447.597 303.96C460.268 304.387 460.339 318.328 470.599 301.535C480.104 285.975 497.665 296.032 496.031 308.905C497.887 309.093 499.669 309.731 501.223 310.763C506.761 314.444 508.1 322.173 504.207 328.025C503.591 328.955 503.641 330.005 502.858 330.724C503.249 336.541 501.048 342.689 495.546 348.31C480.514 363.672 472.302 342.942 464.207 342.426C456.112 341.909 460.094 349.069 452.326 352.589C444.559 356.11 439.289 353.803 430.642 338.531L428.576 334.384C428.576 334.384 433.669 335.352 434.303 329.852Z" fill="#B75742"/>
+<path d="M426.998 326.095C435.901 332.311 437.882 348.146 429.676 355.708C424.334 360.624 413.839 361.478 408.006 356.605C398.547 348.698 397.493 339.752 400.844 332.724C405.171 323.643 419.641 320.948 426.998 326.095Z" fill="#B75742"/>
+<path d="M429.78 347.53C429.78 347.53 432.526 356.056 442.198 360.973C443.388 361.578 428.704 385.181 428.697 384.907C428.655 383.084 431.236 372.447 430.606 371.14C428.89 367.58 418.918 351.254 418.918 351.254L429.78 347.53Z" fill="#F7A491"/>
+<path d="M424.231 349.431L418.918 351.254C418.918 351.272 423.302 358.42 426.753 364.287C428.151 363.078 429.239 361.553 429.926 359.837C431.219 356.79 431.591 353.431 430.994 350.175C430.52 349.329 430.117 348.444 429.791 347.53L424.231 349.431Z" fill="#F47458"/>
+<path d="M409.994 331.536C409.994 331.536 414.751 329.524 419.926 331.461C425.101 333.398 434.399 345.975 429.606 357.007C424.812 368.04 413.359 362.557 408.273 355.559C403.188 348.56 398.127 338.011 409.994 331.536Z" fill="#F7A491"/>
+<path d="M430.61 337.783C426.508 330.663 422.01 326.491 415.689 328.111C409.367 329.73 403.698 330.813 403.27 338.228L402.814 339.496C402.814 339.496 411.971 335.028 415.767 338.524C419.563 342.02 427.519 343.152 428.588 345.59C429.656 348.029 432.259 352.408 432.259 352.408L432.733 349.681C432.733 349.681 434.709 344.9 430.61 337.783Z" fill="#B75742"/>
+<path d="M420.945 342.144C421.8 344.352 423.734 345.626 425.265 344.992C426.796 344.359 427.341 342.052 426.487 339.845C425.632 337.637 423.694 336.363 422.167 336.997C420.639 337.63 420.098 339.934 420.945 342.144Z" fill="#F7A491"/>
+<path d="M257.645 540.18H367.924V423.665H257.645V540.18Z" fill="#86B1F2"/>
+<path d="M366.388 555.178H375.498V421.08H366.388V555.178Z" fill="#184655"/>
+<path d="M255.241 556.189H260.387V422.091H255.241L255.241 556.189Z" fill="#184655"/>
+<path d="M237.296 425.926H435.902C437.847 425.926 439.424 424.349 439.424 422.405V421.195C439.424 419.25 437.847 417.674 435.902 417.674H237.296C235.35 417.674 233.774 419.25 233.774 421.195V422.405C233.774 424.349 235.35 425.926 237.296 425.926Z" fill="#184655"/>
+<path d="M884.846 557.09C884.846 555.719 884.169 554.598 883.336 554.598H205.444C204.432 554.598 203.613 555.708 203.613 557.09C203.613 558.471 204.432 559.582 205.444 559.582H883.336C884.169 559.582 884.846 558.471 884.846 557.09Z" fill="#86B1F2"/>
+<path d="M634.906 159.962H730.356C739.456 159.962 746.834 152.587 746.834 143.49V110.553C746.834 101.455 739.456 94.0806 730.356 94.0806L634.906 94.0806C625.806 94.0806 618.428 101.455 618.428 110.553V143.49C618.428 152.587 625.806 159.962 634.906 159.962Z" fill="#F7A491"/>
+<path d="M712.593 151.965L715.015 198.644L682.062 150.876L712.593 151.965Z" fill="#F7A491"/>
+<path d="M583.902 295.523L586.039 285.89C586.039 285.89 592.973 290.286 597.015 296.57C601.057 302.853 602.987 319.606 604.138 320.236C605.288 320.867 618.091 301.155 620.327 298.047C623.094 294.206 624.131 289.795 625.861 286.445C627.592 283.095 633.696 281.952 636.008 282.372C638.319 282.792 632.834 292.593 632.834 292.593C632.834 292.593 618.953 316.673 614.323 329.866C609.693 343.06 595.259 349.343 592.955 347.46C590.651 345.577 583.902 295.523 583.902 295.523Z" fill="#F48C7F"/>
+<path d="M626.001 288.289C626.001 288.289 626.578 285.754 628.138 285.234C629.698 284.715 632.411 285.177 632.579 285.234C632.746 285.291 635.748 283.679 635.748 283.679L633.255 288.289C633.255 288.289 628.412 293.985 626.799 291.849C625.186 289.713 626.001 288.289 626.001 288.289Z" fill="#F7A491"/>
+<path d="M636.609 283.889C636.609 283.889 638.358 292.789 637.916 294.647C637.475 296.505 636.356 295.516 636.136 295.11C635.274 293.437 634.672 287.73 634.672 287.73L636.609 283.889Z" fill="#F48C7F"/>
+<path d="M632.842 291.286C632.842 291.286 633.675 296.801 634.533 297.452C635.093 297.876 635.801 297.626 636.033 296.512C636.264 295.398 634.918 288.595 634.918 288.595L632.842 291.286Z" fill="#F48C7F"/>
+<path d="M627.744 306.939L624.842 305.515L637.171 280.239C637.94 280.614 638.529 281.28 638.809 282.089C639.088 282.898 639.034 283.784 638.66 284.554L627.744 306.939Z" fill="#184655"/>
+<path d="M596.77 255.91C598.512 248.003 600.214 240.047 595.627 231.346C591.916 224.315 585.499 220.271 578.073 219.392C557.03 216.9 561.528 236.529 532.133 240.784C522.994 242.104 514.504 243.372 506.876 247.904C493.097 256.092 487.898 269.264 497.036 290.706C519.408 343.201 574.316 298.637 581.104 288.299C586.136 280.638 595.652 260.997 596.77 255.91Z" fill="#13375B"/>
+<path d="M512.619 587.51C512.619 587.51 511.12 602.718 507.277 605.509C503.435 608.3 498.289 618.635 500.867 624.217C501.668 625.961 503.274 626.972 505.101 627.535C510.515 629.201 516.27 626.396 518.574 621.223C520.174 617.558 521.071 613.624 521.216 609.628C521.797 597.271 525.646 590.991 525.646 590.991L512.619 587.51Z" fill="#F7A491"/>
+<path d="M571.807 593.733C571.807 593.733 573.022 609.08 572.035 614.068C571.508 616.738 568.57 622.234 569.92 624.748C571.269 627.261 572.808 627.888 572.808 627.888L607.748 628.45C609.649 628.478 608.392 627.257 606.857 626.132C604.364 624.288 602.317 623.071 594.293 619.201C593.773 618.948 591.864 617.738 591.181 617.321C589.436 616.253 587.687 614.587 586.195 612.914C583.702 610.13 583.467 596.616 583.467 596.616L571.807 593.733Z" fill="#F7A491"/>
+<path d="M599.116 389.763C599.116 389.763 603.518 414.683 600.626 431.009C597.734 447.335 583.888 598.746 583.888 598.746L568.478 599.615C568.478 599.615 565.248 536.368 565.825 527.574C566.402 518.781 570.978 504.078 570.978 504.078L569.443 453.017L588.888 385.933L599.116 389.763Z" fill="#3C8F7C"/>
+<path d="M553.83 384.523C553.83 384.523 541.697 402.74 538.809 417.816C535.921 432.893 540.946 479.23 535.372 498.984C532.363 509.664 520.963 526.197 519.229 540.02C517.494 553.844 510.682 590.042 510.682 590.042L526.084 593.089L561.879 502.665L589.956 420.945L597.146 378.855L553.83 384.523Z" fill="#50BFA5"/>
+<path d="M563.653 280.884C563.653 280.884 553.026 282.087 546.673 288.997C540.32 295.907 556.944 351.457 558.101 360.254C559.258 369.051 548.632 389.563 548.632 389.563C548.632 389.563 588.333 396.901 599.116 389.781C599.116 389.781 600.274 326.534 599.116 320.254C597.959 313.974 588.333 288.42 586.022 285.907C583.71 283.394 563.653 280.884 563.653 280.884Z" fill="#FAE0B2"/>
+<path d="M548.626 294.195C548.877 293.465 549.277 292.795 549.801 292.227C550.325 291.66 550.96 291.207 551.668 290.897C552.375 290.588 553.139 290.428 553.912 290.429C554.684 290.43 555.448 290.591 556.155 290.902C560.257 292.682 565.92 296.039 568.687 301.806C573.316 311.439 589.485 344.526 594.492 345.783C599.499 347.039 619.916 311.439 619.916 311.439C619.916 311.439 619.339 305.156 621.07 301.596C622.801 298.036 628.004 294.266 628.773 295.523C629.542 296.779 625.885 299.919 625.885 300.549C625.885 301.179 627.427 301.596 629.546 300.339C631.665 299.083 632.811 296.541 632.811 296.541C632.811 296.541 636.284 302.853 632.626 308.506C628.969 314.159 627.427 316.484 627.427 316.484C627.427 316.484 603.737 369.047 595.069 369.674C586.999 370.24 540.513 318.705 548.626 294.195Z" fill="#F7A491"/>
+<path d="M568.999 259.449C568.999 259.449 568.917 259.922 568.767 260.723C568.055 264.579 565.295 277.359 563.425 280.873C561.175 285.12 571.135 298.673 580.722 297.01C583.571 296.519 578.311 284.55 578.564 283.301C579.049 280.876 579.704 277.569 580.377 274.18L581.499 268.505C582.524 263.329 583.361 259.093 583.361 259.093L568.999 259.449Z" fill="#F7A491"/>
+<path d="M568.766 260.723C568.916 259.922 568.998 259.449 568.998 259.449L583.364 259.093C583.364 259.093 582.527 263.329 581.502 268.505C581.146 270.317 580.764 272.247 580.387 274.148C578.168 273.824 575.85 272.749 573.528 270.716C571.152 268.645 569.361 265.987 568.332 263.009C568.507 262.105 568.656 261.321 568.766 260.723Z" fill="#F47458"/>
+<path d="M577.641 225.319C573.624 226.125 570.035 228.359 567.538 231.606C563.293 237.085 558.72 254.034 569.261 263.226C579.803 272.418 590.223 262.012 591.769 250.962C593.314 239.911 593.001 224.92 577.641 225.319Z" fill="#F7A491"/>
+<path d="M595.142 247.185C593.885 249.627 591.773 250.98 590.424 250.204C589.074 249.428 588.999 246.826 590.263 244.383C591.528 241.941 593.636 240.592 594.982 241.365C596.328 242.137 596.403 244.747 595.142 247.185Z" fill="#F7A491"/>
+<path d="M579.423 225.063C579.423 225.063 570.377 241.168 563.906 241.912C557.435 242.656 556.584 251.215 556.584 251.215C556.584 251.215 558.899 231.496 565.306 227.694C571.712 223.892 579.423 225.063 579.423 225.063Z" fill="#13375B"/>
+<path d="M566.025 245.75C566.552 248.598 565.494 251.232 563.66 251.606C561.826 251.98 559.917 249.968 559.386 247.11C558.856 244.251 559.921 241.627 561.751 241.25C563.582 240.873 565.498 242.888 566.025 245.75Z" fill="#F7A491"/>
+<path d="M519.592 618.504C511.198 620.031 505.614 615.133 502.708 611.466C500.571 615.62 499.264 620.807 500.835 624.218C502.216 627.226 505.981 628.045 509.161 628.162C510.813 628.226 512.45 627.835 513.894 627.032C515.339 626.229 516.535 625.045 517.352 623.609C518.268 621.987 519.019 620.276 519.592 618.504V618.504Z" fill="#3C8F7C"/>
+<path d="M591.174 617.304C581.936 619.667 575.106 618.058 571.284 616.524C570.298 619.308 568.991 622.804 569.685 624.819C570.533 627.289 571.74 627.845 572.809 627.873C581.249 628.094 603.724 628.397 610.159 628.478C610.361 628.482 610.558 628.427 610.729 628.321C610.9 628.214 611.036 628.061 611.122 627.88C611.208 627.698 611.24 627.495 611.214 627.296C611.188 627.096 611.105 626.909 610.975 626.755C609.379 624.869 591.865 617.738 591.174 617.304Z" fill="#3C8F7C"/>
+<path d="M209.585 258.659C224.215 238.05 256.779 247.58 257.726 272.835C257.726 273.13 257.748 273.426 257.755 273.725C258.403 303.586 235.675 311.375 242.819 332.8C249.963 354.224 271.665 338.243 280.105 373.298C288.546 408.353 259.703 427.784 262.299 448.556C264.895 469.329 277.256 483.174 276.587 510.226C276.103 530.344 239.571 592.665 239.571 592.665C239.571 592.665 190.884 539.436 189.57 503.74C188.338 469.877 212.58 473.049 213.876 441.241C215.172 409.432 167.757 405.181 190.884 365.256C195.756 356.84 208.267 348.631 208.267 330.457C208.267 312.283 191.8 284.59 204.773 265.551C206.362 263.241 207.979 260.948 209.585 258.659Z" fill="#50BFA5"/>
+<path d="M262.3 448.559C259.704 427.787 288.55 408.353 280.106 373.301C271.663 338.249 249.96 354.219 242.82 332.799C235.679 311.378 258.404 303.585 257.756 273.724C257.756 273.425 257.756 273.13 257.727 272.834C257.143 257.327 244.64 247.747 231.687 247.434L231.627 248.242C231.627 248.242 213.464 321.802 225.572 359.018C237.681 396.234 247.218 398.826 241.157 449.022C235.095 499.218 239.579 592.665 239.579 592.665C239.579 592.665 276.111 530.343 276.595 510.226C277.24 483.173 264.9 469.328 262.3 448.559Z" fill="#3C8F7C"/>
+<path d="M270.495 616.628H191.381C181.306 607.133 175.166 594.061 175.391 579.714C175.501 572.473 176.947 566.158 179.963 559.956L281.966 561.138C284.854 567.568 286.295 574.553 286.186 581.601C285.972 595.268 280.021 607.585 270.495 616.628Z" fill="#F47458"/>
+<path d="M652.457 137.198H575.451C568.111 137.198 562.16 143.147 562.16 150.484V177.06C562.16 184.397 568.111 190.345 575.451 190.345H652.457C659.797 190.345 665.747 184.397 665.747 177.06V150.484C665.747 143.147 659.797 137.198 652.457 137.198Z" fill="#FAE0B2"/>
+<path d="M595.16 183.017L585.078 213.259L614.412 183.017H595.16Z" fill="#FAE0B2"/>
+<path d="M592.567 165.797C592.567 168.47 590.245 170.638 587.378 170.638C584.511 170.638 582.189 168.47 582.189 165.797C582.189 163.123 584.511 160.955 587.378 160.955C590.245 160.955 592.567 163.123 592.567 165.797Z" fill="white"/>
+<path d="M619.089 165.797C619.089 168.47 616.763 170.638 613.9 170.638C611.036 170.638 608.711 168.47 608.711 165.797C608.711 163.123 611.033 160.955 613.9 160.955C616.767 160.955 619.089 163.123 619.089 165.797Z" fill="white"/>
+<path d="M645.604 165.797C645.604 168.47 643.283 170.638 640.416 170.638C637.549 170.638 635.23 168.47 635.23 165.797C635.23 163.123 637.552 160.955 640.416 160.955C643.279 160.955 645.604 163.123 645.604 165.797Z" fill="white"/>
+<path d="M260.401 457.502C260.401 457.502 303.446 444.59 305.181 444.911C306.915 445.231 300.12 459.596 300.964 464.224C301.235 465.712 264.123 486.926 255.875 485.359C246.882 483.654 212.313 453.928 208.624 447.485C204.503 440.279 197.288 422.312 202.096 415.544C204.286 412.458 209.574 408.353 213.275 409.222C227.922 412.668 243.731 438.592 260.401 457.502Z" fill="#355389"/>
+<path d="M262.766 506.834C262.485 505.552 253.553 484.79 253.097 482.672C247.164 454.997 224.329 414.527 213.756 409.336C212.046 408.482 199.842 408.403 199.842 408.403L206.149 411.522C213.336 418.087 221.38 425.676 226.512 434.146C241.391 458.71 251.523 515.314 252.866 515.196C254.39 515.068 263.393 509.667 262.766 506.834Z" fill="#466EB6"/>
+<path d="M248.631 507.602C227.734 495.449 224.446 466.759 215.607 451.354C204.788 432.486 188.834 430.432 161.365 464.63C127.693 506.556 144.827 590.903 191.323 617.934L302.816 617.692C325.79 609.426 335.997 597.304 344.248 577.108C380.944 487.31 295.127 534.63 248.631 507.602Z" fill="#F7CC7F"/>
+<path d="M298.079 600.743C298.079 600.743 297.303 614.477 297.3 614.506C297.011 616.25 295.875 620.558 295.875 622.142C295.875 628.098 322.382 617.087 316.441 614.449C315.904 614.207 312.253 611.052 312.075 609.027C311.815 605.912 311.968 600.928 311.968 600.928L298.079 600.743Z" fill="#F7A491"/>
+<path d="M316.072 614.188C316.072 614.188 309.85 616.008 306.663 616.463C303.476 616.919 299.273 613.085 297.019 614.121C295.178 614.968 294.458 621.105 294.213 624.213C294.194 624.447 294.222 624.683 294.296 624.906C294.37 625.129 294.487 625.334 294.642 625.511C294.797 625.688 294.985 625.831 295.197 625.934C295.408 626.036 295.638 626.095 295.872 626.107C303.201 626.488 331.069 627.773 338.302 625.68C342.052 624.594 328.796 618.428 316.072 614.188Z" fill="#07345A"/>
+<path d="M372.569 586.973C372.569 586.973 366.344 588.792 363.156 589.247C359.969 589.703 355.77 585.869 353.516 586.905C351.675 587.752 350.955 593.89 350.706 596.998C350.628 597.984 351.493 599.102 352.487 599.198C360.621 599.999 387.576 600.558 394.809 598.464C398.548 597.368 385.29 591.213 372.569 586.973Z" fill="#07345A"/>
+<path d="M346.449 575.841C346.449 575.841 353.903 586.321 354.601 588.635C355.299 590.949 372.571 592.644 372.571 586.976C372.571 586.902 367.229 582.548 365.702 580.568C363.173 577.25 357.272 566.165 357.272 566.165L346.449 575.841Z" fill="#F7A491"/>
+<path d="M185.949 347.549C185.949 347.549 177.537 341.853 173.98 351.821C173.98 351.821 169.229 350.397 167.213 355.263C167.213 355.263 159.065 354.651 159.735 366.481C159.735 366.481 155.639 366.606 156.152 371.39C156.422 374.195 157.685 376.81 159.713 378.767C159.713 378.767 157.868 380.903 159.824 384.982C161.483 388.446 164.628 388.336 164.628 388.336C164.628 388.336 166.804 394.31 169.881 395.573C172.958 396.837 176.401 395.146 176.401 395.146C176.401 395.146 178.1 398.268 181.152 397.282C184.204 396.296 187.402 392.48 191.184 393.046C194.966 393.612 203.702 390.198 203.702 390.198C203.702 390.198 212.865 383.434 207.531 373.722C207.531 373.722 211.804 367.723 205.853 362.971C205.853 362.971 207.278 353.174 199.34 349.325C191.401 345.477 185.949 347.549 185.949 347.549Z" fill="#07345A"/>
+<path d="M319.313 496.004C312.319 492.565 238.942 503.985 238.942 503.985L230.145 489.97L201.502 496.467C201.502 496.467 193.397 505.794 193.062 509.973C191.976 523.501 198.176 546.228 205.17 548.421C230.071 556.293 283.604 540.205 291.097 538.485C291.097 538.485 290.826 550.611 293.095 575.36C293.992 585.143 295.168 595.923 296.257 605.349C302.81 605.349 309.363 605.214 315.919 604.349C315.916 604.367 326.307 499.443 319.313 496.004Z" fill="#F47458"/>
+<path d="M365.824 574.36C353.274 542.675 326.034 480.468 316.162 478.717C303.22 476.424 238.932 503.993 238.932 503.993L304.157 502.633C304.157 502.633 304.513 503.277 307.362 516.944C309.573 527.595 334.111 565.107 348.099 585.887C354.545 582.989 360.938 580.28 365.824 574.36Z" fill="#B75742"/>
+<path d="M200.143 408.62C200.143 408.62 183.904 408.435 182.177 408.816C180.449 409.197 183.541 475.075 185.652 499.656C187.764 524.238 191.151 527.926 191.151 527.926C191.151 527.926 214.299 528.019 230.325 522.967C246.971 517.716 250.924 498.403 250.924 498.403C250.924 498.403 235.849 454.21 229.805 440.514C225.941 431.753 218.217 421.892 210.396 413.864C205.991 409.325 200.143 408.62 200.143 408.62Z" fill="white"/>
+<path d="M195.586 396.634L198.845 405.534C198.845 405.534 204.525 418.122 201.53 421.451C198.535 424.779 182.83 408.674 182.83 408.674L178.912 385.178L195.586 396.634Z" fill="#F7A491"/>
+<path d="M180.2 392.789C184.891 400.055 192.968 403.376 198.363 404.181L195.603 396.644L178.922 385.192L180.2 392.789Z" fill="#F47458"/>
+<path d="M181.76 358.972C183.329 358.026 185.085 357.434 186.907 357.239C188.728 357.044 190.57 357.25 192.303 357.843C194.036 358.436 195.619 359.401 196.939 360.671C198.259 361.94 199.285 363.483 199.944 365.192C201.386 368.956 202.585 372.809 203.534 376.726C206.095 387.381 202.854 399.019 197.993 400.09C193.132 401.162 178.167 397.203 174.328 382.123C171.956 372.81 174.755 363.255 181.76 358.972Z" fill="#F7A491"/>
+<path d="M178.176 382.532C178.696 384.893 177.553 387.16 175.622 387.577C173.692 387.993 171.705 386.438 171.181 384.077C170.658 381.717 171.805 379.449 173.735 379.029C175.665 378.609 177.652 380.172 178.176 382.532Z" fill="#F7A491"/>
+<path d="M182.797 408.591C182.797 408.591 163.94 407.844 159.649 411.795C156.921 414.316 162.448 439.539 162.448 439.539C162.448 439.539 177.829 468.973 180.066 486.175C183.78 514.772 187.167 532.341 188.634 533.288C197.11 536.328 225.127 530.543 226.291 527.236C239.151 490.721 182.797 408.591 182.797 408.591Z" fill="#466EB6"/>
+<path d="M273.994 469.158L286.512 416.317C286.669 415.652 287.046 415.06 287.582 414.636C288.118 414.212 288.781 413.982 289.464 413.981H312.196C312.661 413.982 313.12 414.089 313.537 414.294C313.954 414.5 314.318 414.798 314.601 415.166C314.885 415.535 315.08 415.963 315.172 416.419C315.263 416.874 315.249 417.345 315.131 417.794L301.323 469.792C301.157 470.418 300.794 470.975 300.287 471.381C299.781 471.786 299.158 472.019 298.51 472.045L277.067 472.889C276.6 472.907 276.134 472.818 275.706 472.626C275.279 472.435 274.902 472.147 274.604 471.786C274.306 471.425 274.096 471 273.991 470.544C273.885 470.088 273.886 469.613 273.994 469.158V469.158Z" fill="#184655"/>
+<path d="M294.736 467.784C293.498 468.01 292.277 468.323 291.082 468.72C289.893 469.154 288.664 469.183 287.61 469.4C285.516 469.831 283.995 470.173 284.028 470.08C284.06 469.987 283.597 469.76 284.686 469.343C286 468.845 289.02 468.385 290.897 467.506C291.966 467.008 294.245 466.082 294.245 466.082C294.245 466.082 297.45 464.081 297.393 463.861C297.105 462.672 294.544 463.441 293.176 464.302C292.033 464.42 289.654 465.441 289.654 465.441C289.654 465.441 284.391 466.467 284.245 465.744C284.181 465.438 287.34 464.434 290.299 462.978C293.038 461.625 295.584 459.827 295.402 459.265C295.092 458.307 291.894 459.496 291.894 459.496C291.894 459.496 289.701 460.443 288.946 460.706C288.062 461.013 285.352 461.732 285.352 461.732C285.352 461.732 275.805 463.811 275.737 463.113C275.669 462.415 276.189 460.539 276.741 460.212C277.293 459.884 278.611 459.792 279.159 459.464C279.708 459.137 280.149 458.254 279.8 457.57C279.451 456.887 276.189 457.492 276.189 457.492C276.189 457.492 273.507 458.026 272.083 459.24C267.143 463.384 268.027 464.01 267.382 464.526C266.613 465.135 253.575 466.563 253.575 466.563C253.575 466.563 215.174 471.02 213.094 471.191L214.44 483.971C216.73 484.206 261.047 476.495 265.594 475.577C265.594 475.577 271.392 476.442 275.053 476.869C278.714 477.296 282.411 476.104 283.465 476.068C286.157 475.777 288.804 475.162 291.35 474.238C294.993 472.939 290.958 472.554 290.958 472.554C290.958 472.554 283.789 473.79 283.796 473.223C283.796 472.786 287.753 472.337 291.798 470.938C292.838 470.582 293.864 470.226 294.804 469.87C297.283 468.983 297.461 467.268 294.736 467.784Z" fill="#F8A492"/>
+<path d="M207.366 464.914C207.366 464.914 252.16 464.594 253.894 464.914C255.629 465.235 256.074 476.719 256.921 481.358C257.192 482.846 209.706 488.161 201.458 486.595C192.462 484.89 169.816 460.019 164.566 451.625C160.165 444.587 150.774 426.669 153.11 418.83C154.534 414.092 161.849 408.741 165.852 409.98C181.81 414.928 207.366 464.914 207.366 464.914Z" fill="#86B1F2"/>
+<path d="M308.85 443.829C309.051 443.749 309.267 443.714 309.483 443.726C309.699 443.738 309.91 443.797 310.101 443.898C310.292 444 310.459 444.142 310.59 444.314C310.72 444.487 310.812 444.686 310.858 444.897C311.036 445.823 311.043 446.937 310.331 447.645C308.924 449.069 299.412 450.109 299.412 448.713C299.412 447.638 305.865 445 308.85 443.829Z" fill="#F7A491"/>
+<path d="M310.944 447.959C310.944 447.959 312.038 451.465 311.218 451.519C310.399 451.572 300.203 453.01 299.701 451.814C299.199 450.618 309.598 447.296 310.944 447.959Z" fill="#F7A491"/>
+<path d="M311.359 451.892C311.359 451.892 311.755 453.444 310.968 454.409C310.181 455.374 300.622 455.395 300.177 453.907C299.732 452.419 310.95 450.753 311.359 451.892Z" fill="#F7A491"/>
+<path d="M309.18 455.47C309.18 455.47 309.376 456.659 308.981 457.25C308.585 457.841 301.502 458.211 300.59 456.833C299.678 455.455 308.129 454.06 309.18 455.47Z" fill="#F7A491"/>
+<path d="M835.66 287.619C845.422 287.068 850.974 298.801 844.378 306.074C843.204 307.392 842.542 309.087 842.512 310.852L842.37 316.904C842.351 317.71 842.029 318.48 841.468 319.059C840.907 319.638 840.148 319.985 839.343 320.03L835.646 320.236C834.841 320.282 834.048 320.023 833.425 319.51C832.803 318.997 832.397 318.269 832.288 317.47C831.458 311.418 831.575 309.14 829.083 306.922C821.7 300.464 825.895 288.171 835.66 287.619Z" fill="#F7CC7F"/>
+<path d="M839.78 313.005C839.289 308.103 838.94 302.681 838.872 300.663C837.068 300.887 835.238 300.78 833.473 300.346C834.079 304.387 834.581 308.477 834.976 312.532L834.453 312.582C834.05 308.463 833.537 304.301 832.918 300.196C831.849 299.89 830.613 299.484 830.029 298.548C829.892 298.326 829.802 298.078 829.763 297.82C829.725 297.562 829.739 297.298 829.805 297.046C830.161 295.725 831.778 295.711 832.576 296.807C833.106 297.519 833.195 298.509 833.388 299.78C835.173 300.252 837.033 300.373 838.865 300.136C838.865 299.107 839.004 298.139 839.577 297.32C841.554 294.472 844.873 299.684 839.406 300.588C839.456 302.176 839.791 307.736 840.314 312.955L839.78 313.005ZM840.001 297.615C839.558 298.349 839.346 299.198 839.392 300.054C840.578 299.844 841.329 299.438 841.693 298.815C842.305 297.768 841.062 296.07 840.001 297.615ZM830.742 296.626C830.2 296.9 830.15 297.751 830.478 298.267C830.948 299.007 831.967 299.356 832.836 299.623C832.679 298.612 832.601 297.726 832.155 297.131C831.838 296.69 830.795 296.597 830.738 296.626H830.742Z" fill="white"/>
+<path d="M842.523 310.699V310.852L842.38 316.904C842.362 317.711 842.041 318.482 841.48 319.062C840.919 319.642 840.159 319.989 839.353 320.034L835.656 320.24C834.851 320.286 834.058 320.027 833.436 319.514C832.813 319.001 832.407 318.273 832.298 317.474C831.942 314.786 831.75 312.846 831.443 311.315L842.523 310.699Z" fill="#3C8F7C"/>
+<path d="M841.683 281.771L843.354 276.007C843.382 275.756 843.322 275.504 843.182 275.294C843.042 275.084 842.833 274.93 842.59 274.86C842.348 274.789 842.089 274.807 841.858 274.909C841.628 275.012 841.441 275.193 841.331 275.419L839.661 281.187C839.633 281.437 839.695 281.689 839.835 281.898C839.975 282.107 840.184 282.26 840.426 282.33C840.668 282.399 840.927 282.382 841.157 282.279C841.387 282.177 841.573 281.997 841.683 281.771V281.771Z" fill="#FAE0B2"/>
+<path d="M850.611 292.828L856.63 290.923C856.785 290.903 856.934 290.85 857.066 290.766C857.198 290.682 857.31 290.571 857.394 290.439C857.478 290.307 857.532 290.158 857.553 290.004C857.573 289.849 857.559 289.691 857.512 289.542C857.465 289.393 857.386 289.256 857.28 289.141C857.174 289.026 857.044 288.935 856.9 288.876C856.755 288.817 856.599 288.79 856.443 288.797C856.287 288.805 856.134 288.846 855.996 288.919L849.977 290.824C849.822 290.843 849.673 290.897 849.541 290.981C849.409 291.065 849.297 291.176 849.213 291.308C849.129 291.44 849.075 291.588 849.054 291.743C849.034 291.898 849.047 292.056 849.095 292.205C849.142 292.354 849.221 292.491 849.327 292.606C849.433 292.721 849.563 292.811 849.707 292.871C849.852 292.93 850.008 292.957 850.164 292.95C850.32 292.942 850.473 292.901 850.611 292.828V292.828Z" fill="#FAE0B2"/>
+<path d="M860.896 310.286C861.041 310.048 861.087 309.763 861.024 309.492C860.962 309.221 860.795 308.984 860.561 308.834C858.714 307.678 856.762 306.699 854.731 305.911C854.598 305.83 854.448 305.779 854.293 305.763C854.138 305.746 853.981 305.763 853.833 305.813C853.685 305.864 853.55 305.946 853.438 306.054C853.325 306.162 853.238 306.294 853.181 306.439C853.125 306.585 853.101 306.741 853.112 306.897C853.122 307.052 853.167 307.204 853.242 307.341C853.318 307.477 853.422 307.596 853.549 307.688C853.675 307.779 853.82 307.843 853.973 307.873C855.879 308.613 857.711 309.532 859.443 310.617C859.681 310.762 859.965 310.809 860.237 310.747C860.508 310.685 860.745 310.52 860.896 310.286V310.286Z" fill="#FAE0B2"/>
+<path d="M826.454 284.875C826.699 284.742 826.883 284.519 826.966 284.253C827.049 283.987 827.025 283.699 826.899 283.451C825.621 281 824.6 278.423 823.854 275.761C823.838 275.606 823.789 275.457 823.709 275.323C823.629 275.189 823.521 275.074 823.392 274.986C823.263 274.899 823.117 274.84 822.963 274.815C822.809 274.79 822.652 274.799 822.502 274.841C822.352 274.883 822.213 274.958 822.095 275.059C821.976 275.161 821.882 275.287 821.818 275.429C821.753 275.571 821.721 275.725 821.723 275.881C821.724 276.037 821.76 276.19 821.828 276.331C822.614 279.132 823.688 281.845 825.033 284.426C825.165 284.671 825.387 284.855 825.652 284.939C825.918 285.023 826.205 285 826.454 284.875Z" fill="#FAE0B2"/>
+<path d="M821.893 294.173C821.91 293.896 821.818 293.622 821.636 293.412C821.455 293.201 821.198 293.069 820.921 293.045L814.112 292.546C813.96 292.507 813.802 292.502 813.649 292.531C813.495 292.56 813.35 292.622 813.223 292.713C813.096 292.804 812.991 292.922 812.914 293.058C812.838 293.194 812.792 293.345 812.78 293.501C812.769 293.657 812.791 293.813 812.847 293.959C812.902 294.105 812.989 294.237 813.101 294.346C813.213 294.455 813.347 294.538 813.495 294.589C813.642 294.641 813.799 294.659 813.955 294.643L820.768 295.145C821.045 295.161 821.317 295.068 821.527 294.887C821.737 294.706 821.868 294.45 821.893 294.173Z" fill="#FAE0B2"/>
+<path d="M815.197 313.483C815.291 313.463 815.382 313.429 815.467 313.383C817.543 312.265 819.493 310.93 821.287 309.4C821.42 309.32 821.534 309.212 821.622 309.083C821.709 308.954 821.767 308.808 821.792 308.655C821.817 308.501 821.808 308.344 821.766 308.195C821.724 308.045 821.65 307.906 821.548 307.788C821.447 307.67 821.321 307.576 821.18 307.511C821.038 307.447 820.884 307.414 820.729 307.416C820.573 307.417 820.42 307.452 820.28 307.519C820.139 307.585 820.015 307.682 819.915 307.801C818.238 309.236 816.411 310.486 814.467 311.532C814.246 311.653 814.076 311.848 813.987 312.083C813.899 312.318 813.897 312.578 813.984 312.814C814.07 313.05 814.238 313.247 814.457 313.37C814.676 313.493 814.933 313.533 815.179 313.483H815.197Z" fill="#FAE0B2"/>
+<path d="M903.219 438.556C879.853 408.567 865.9 410.076 856.139 426.185C848.169 439.357 844.807 464.064 826.37 474.206C785.351 496.773 731.69 488.92 753.157 552.903C759.158 570.785 768.396 569.376 772.68 569.504L877.004 569.397C918.023 546.834 931.866 475.32 903.219 438.556Z" fill="#F7CC7F"/>
+<path d="M881.274 382.821C883.674 371.073 878.151 359.457 867.595 355.088C867.666 348.413 865.034 341.714 860.472 337.143C851.505 328.125 833.022 324.227 826.427 335.719C817.712 340.66 818.264 346.794 820.864 356.545C812.42 365.313 815.504 379.685 827.815 387.161C827.623 397 827.367 411.835 835.946 416.039C838.004 417.05 841.227 418.456 841.644 418.887C841.106 418.378 847.997 437.62 869.422 428.813C891.263 419.838 895.512 394.54 881.274 382.821Z" fill="#355389"/>
+<path d="M790.492 461.999C792.212 460.304 795.236 458.795 795.061 458.549C794.349 457.538 786.87 465.271 787.355 463.092C787.625 461.881 792.981 455.566 794.88 455.331C796.724 455.1 808.647 453.22 808.647 453.22L836.205 434.911C836.205 434.911 837.569 413.255 831.721 398.667C838.131 396.716 839.364 396.299 845.938 396.805C849.688 411.604 853.719 436.531 848.847 443.797C846.8 446.851 810.98 458.67 810.98 458.67C810.98 458.67 803.231 461.586 801.788 461.675C800.692 461.746 797.675 461.493 796.201 461.721C792.857 462.241 788.722 467.218 788.423 466.645C788.216 466.228 788.736 463.733 790.492 461.999Z" fill="#F48C7F"/>
+<path d="M828.355 396.94C829.957 393.991 831.711 391.126 833.608 388.357C836.293 383.569 843.223 381.151 843.223 381.151C843.223 381.151 845.542 381.198 848.209 381.329C848.303 381.661 848.475 381.965 848.711 382.216C849.712 382.967 855.449 381.995 859.157 384.519C871.575 395.199 868.142 446.958 867.162 463.305L836.154 463.441C836.154 463.441 834.107 428.489 826.421 419.453C821.087 413.152 824.53 404.031 828.355 396.94Z" fill="#F47458"/>
+<path d="M819.87 579.037C819.539 578.425 815.241 568.033 811.708 563.405C806.594 556.688 762.391 495.837 764.211 481.027C765.005 474.559 784.154 469.076 786.433 468.685C798.62 470.322 785.817 480.81 794.98 489.432C789.026 491.469 785.518 494.01 786.79 495.684C791.943 502.384 819.304 556.371 820.494 557.065C825.793 560.173 827.869 558.731 827.869 558.731C827.869 558.731 826.651 589.098 824.123 588.14C821.594 587.183 823.62 585.94 819.87 579.037Z" fill="#F79C8D"/>
+<path d="M830.112 558.919L825.001 589.535C823.851 593.494 821.917 593.451 821.44 592.921C820.422 591.828 819.955 583.665 819.834 579.016C822.138 571.928 821.921 558.588 820.5 557.083C823.958 557.139 830.108 558.243 830.112 558.919Z" fill="#B75742"/>
+<path d="M811.838 483.968C804.979 472.601 805.346 474.039 793.409 468.902C788.626 470.821 772.618 480.849 770.588 482.704L796.048 501.163C795.236 499.112 804.082 488.848 811.838 483.968Z" fill="#F7A491"/>
+<path d="M845.422 363.632C845.422 363.632 847.502 378.524 848.955 382.144C850.408 385.765 840.967 393.504 833.114 395.854C825.261 398.203 835.514 387.858 835.19 383.992C834.866 380.126 833.438 361.802 833.438 361.802L845.422 363.632Z" fill="#F7A491"/>
+<path d="M833.833 367.057L833.438 361.802L845.421 363.632C845.421 363.632 845.724 365.38 846.059 367.854C841.198 370.681 836.831 369.791 833.833 367.057Z" fill="#F47458"/>
+<path d="M841.665 336.42C844.79 337.295 847.499 339.257 849.304 341.952C852.221 346.416 854.222 359.56 844.617 365.694C835.013 371.828 827.523 363.152 827.413 354.686C827.302 346.22 829.101 334.935 841.665 336.42Z" fill="#F7A491"/>
+<path d="M825.214 352.044C826.033 354.088 827.661 355.355 828.847 354.892C830.033 354.43 830.328 352.372 829.509 350.328C828.69 348.285 827.066 347.018 825.877 347.498C824.687 347.979 824.395 350.001 825.214 352.044Z" fill="#F7A491"/>
+<path d="M849.457 353.725C848.744 355.925 849.4 358.09 850.881 358.563C852.363 359.036 854.129 357.634 854.827 355.434C855.525 353.234 854.884 351.066 853.403 350.596C851.921 350.126 850.155 351.525 849.457 353.725Z" fill="#F7A491"/>
+<path d="M813.238 464.306C818.544 463.818 836.098 462.038 836.098 462.038L867.234 457.852C867.234 457.852 872.737 470.995 872.954 479.24C873.331 493.665 860.051 505.823 848.691 505.125C841.924 504.712 803.658 503.872 796.187 501.102C794.645 489.354 792.871 476.616 784.947 468.158C797.633 466.417 806.041 464.968 813.238 464.306Z" fill="#466EB6"/>
+<path d="M812.844 573.106C811.989 572.223 805.155 525.509 801.035 505.904C800.546 503.572 799.558 501.373 798.137 499.46C796.716 497.546 794.897 495.964 792.805 494.822L770.589 482.718C762.897 489.756 798.802 568.767 802.089 577.058C804.35 582.754 805.775 594.541 805.939 595.257C807.787 603.338 805.376 604.021 807.676 605.716C809.977 607.41 820.273 577.916 820.273 577.916C820.273 577.916 817.349 577.788 812.844 573.106Z" fill="#F7A491"/>
+<path d="M819.531 466.338C819.531 467.513 818.462 468.474 817.116 468.474L779.388 468.563C778.052 468.563 776.71 467.41 776.275 465.979L776.963 466.438C776.963 465.26 778.031 464.302 779.377 464.302L817.106 464.213C818.445 464.224 819.531 465.16 819.531 466.338Z" fill="#355389"/>
+<path d="M779.769 467.784C779.996 467.783 780.224 467.769 780.449 467.741C782.401 467.495 783.683 466.249 783.298 464.961L768.9 415.153C768.544 413.86 766.642 413.017 764.687 413.262C762.732 413.508 761.453 414.754 761.838 416.046L776.24 465.851C776.567 466.997 778.077 467.784 779.769 467.784Z" fill="#355389"/>
+<path d="M790.881 461.041C793.042 459.973 796.386 459.471 796.294 459.179C795.938 457.997 786.322 464.11 787.472 462.191C788.106 461.123 795.243 455.697 797.12 456.061C798.943 456.417 810.867 458.321 810.867 458.321L841.547 447.235C841.547 447.235 847.398 428.161 846.358 412.479C853.043 412.604 857.715 413.714 863.809 416.235C862.787 431.464 858.898 456.417 852.01 461.803C849.115 464.074 811.411 464.213 811.411 464.213C811.411 464.213 803.139 464.569 801.739 464.213C800.671 463.939 797.886 462.764 796.415 462.525C793.071 461.984 787.586 465.43 787.494 464.797C787.401 464.359 788.676 462.145 790.881 461.041Z" fill="#F7A491"/>
+<path d="M844.225 395.844C844.652 391.024 845.243 386.168 850.158 384.096C853.206 382.807 856.846 383.277 859.61 385.05C862.893 387.157 864.189 391.002 864.595 394.733C865.55 403.206 865.999 412.052 865.425 420.572C859.335 418.051 851.048 419.386 844.364 419.258C842.886 411.778 843.669 402.124 844.225 395.844Z" fill="#B75742"/>
+<path d="M795.439 456.492C790.196 457.834 790.488 457.734 790.278 457.869C786.575 460.201 786.866 461.212 792.554 458.777C792.698 458.715 792.853 458.683 793.01 458.685L795.706 458.717C795.936 458.719 796.162 458.651 796.353 458.522C796.543 458.392 796.69 458.208 796.773 457.993C796.855 457.777 796.87 457.542 796.815 457.318C796.76 457.095 796.637 456.893 796.464 456.741V456.741C796.327 456.618 796.162 456.531 795.983 456.488C795.804 456.444 795.617 456.446 795.439 456.492V456.492Z" fill="#F7A491"/>
+<path d="M805.706 593.508C805.706 593.508 805.93 597.214 804.684 600.183C803.437 603.153 798.676 604.27 799.826 605.805C800.976 607.339 810.179 605.805 810.179 605.805L820.824 579.781C821.036 579.311 821.091 578.785 820.982 578.281C820.872 577.778 820.603 577.322 820.215 576.983C818.936 575.862 816.593 574.27 812.896 573.163C812.896 573.16 813.469 589.486 805.706 593.508Z" fill="#F47458"/>
+<path d="M628.397 400.653C634.897 398.781 635.071 399.941 635.897 399.678C636.87 399.368 644.733 388.724 644.733 388.724C644.733 388.724 668.131 357.524 669.327 355.79L676.706 315.416L698.875 315.242C698.875 315.242 689.616 358.837 688.708 360.998C687.8 363.159 650.723 401.262 647.582 404.729C647.582 404.729 645.552 410.361 644.153 413.847C642.753 417.332 639.754 419.899 639.199 420.785C637.576 422.988 635.659 424.958 633.501 426.641C630.424 429.076 632.051 425.288 632.051 425.288C632.051 425.288 636.813 419.703 636.254 419.372C635.826 419.115 633.426 422.334 630.053 425.068C629.188 425.78 628.33 426.46 627.536 427.086C625.449 428.731 623.682 427.855 625.545 425.769C626.381 424.811 627.294 423.922 628.273 423.11C629.288 422.319 629.922 421.251 630.659 420.454C632.119 418.866 633.205 417.731 633.098 417.699C632.991 417.666 633.002 417.125 632.055 417.841C630.915 418.699 628.967 421.088 627.179 422.216C626.164 422.853 624.142 424.324 624.142 424.324C624.142 424.324 620.602 425.951 620.413 425.773C619.391 424.801 621.421 422.996 622.934 422.312C623.615 421.376 625.783 419.891 625.783 419.891C625.783 419.891 629.395 415.862 628.764 415.303C628.494 415.061 625.947 417.246 623.066 418.973C620.388 420.575 617.368 421.743 616.905 421.244C616.125 420.401 618.871 418.293 618.871 418.293C618.871 418.293 620.887 416.926 621.513 416.417C622.251 415.822 624.298 413.861 624.298 413.861C624.298 413.861 631.065 406.684 630.424 406.2C629.783 405.716 627.685 405.057 627.09 405.345C626.496 405.634 625.755 406.741 625.16 407.029C624.785 407.182 624.371 407.209 623.98 407.106C623.588 407.002 623.241 406.774 622.991 406.456C622.5 405.744 624.704 403.227 624.704 403.227C624.704 403.227 626.524 401.212 628.397 400.653Z" fill="#F48C7F"/>
+<path d="M665.203 603.185C665.203 603.185 665.993 617.115 665.997 617.144C666.285 618.924 667.421 623.281 667.421 624.887C667.421 630.939 640.541 619.76 646.563 617.083C647.111 616.841 649.968 615.011 650.146 612.954C650.423 609.789 651.121 603.381 651.121 603.381L665.203 603.185Z" fill="#F7A491"/>
+<path d="M646.637 617.026C646.637 617.026 652.947 618.873 656.181 619.336C659.415 619.799 663.66 615.908 665.96 616.958C668.478 618.115 668.222 629.5 668.222 629.5C668.222 629.5 634.535 631.486 625.016 628.432C621.248 627.207 633.734 621.33 646.637 617.026Z" fill="#184655"/>
+<path d="M724.427 604.52C724.427 604.52 725.218 618.45 725.222 618.478C725.51 620.258 726.646 624.616 726.646 626.225C726.646 632.277 699.765 621.098 705.788 618.421C706.336 618.179 710.04 614.979 710.218 612.925C710.496 609.756 710.35 604.715 710.35 604.715L724.427 604.52Z" fill="#F7A491"/>
+<path d="M705.848 618.372C705.848 618.372 712.159 620.22 715.392 620.679C718.626 621.138 722.871 617.254 725.172 618.304C727.69 619.461 727.789 629.867 727.789 629.867C727.789 629.867 691.774 632.477 683.305 630.028C679.516 628.92 692.96 622.669 705.848 618.372Z" fill="#184655"/>
+<path d="M681.831 403.451L670.464 408.35L646.557 522.476L647.529 608.034L666.692 608.479C666.692 608.479 675.595 533.637 675.595 527.838C675.595 522.038 716.889 426.342 716.889 426.342L681.831 403.451Z" fill="#355389"/>
+<path d="M690.602 409.731C690.602 409.731 698.974 497.663 698.974 512.483C698.974 527.303 705.762 610.258 705.762 610.258L724.972 610.148C724.972 610.148 726.357 584.872 728.419 547.663C728.739 541.839 728.002 530.084 728.419 524.05C731.407 480.671 737.322 439.834 734.494 423.658C734.039 421.052 733.184 414.238 731.521 412.518C718.942 399.499 690.602 409.731 690.602 409.731Z" fill="#466EB6"/>
+<path d="M667.168 340.336L690.412 338.78C690.412 338.78 691.559 318.008 691.559 308.1C691.559 296.082 695.224 278.36 693.792 278.691C689.771 279.627 682.827 283.319 679.604 287.815C668.454 303.348 667.168 340.336 667.168 340.336Z" fill="#3C8F7C"/>
+<path d="M722.23 278.231C722.23 278.231 735.485 280.075 738.968 282.635C742.885 285.519 747.258 291.973 747.258 291.973C747.258 291.973 730.983 368.869 730.955 381.817C730.93 391.827 734.477 416.409 734.477 416.409C734.477 416.409 685.295 419.513 666.67 412.162C666.67 412.162 672.553 382.927 672.553 375.252C672.553 367.577 679.587 297.765 681.189 292.891C682.642 288.466 685.295 280.517 694.284 278.559C703.273 276.601 722.23 278.231 722.23 278.231Z" fill="#50BFA5"/>
+<path d="M718.622 257.527L721.902 279.001C721.902 279.001 709.919 304.572 702.767 302.354C696.767 300.492 700.456 277.869 700.456 277.869C700.456 277.869 703.729 265.718 702.746 259.638C701.763 253.557 718.622 257.527 718.622 257.527Z" fill="#F7A491"/>
+<path d="M702.747 259.638C701.767 253.557 718.623 257.527 718.623 257.527L718.894 259.307C718.468 260.406 717.849 261.42 717.067 262.301C713.302 266.324 707.416 268.741 702.33 268.922C702.839 265.644 703.149 262.133 702.747 259.638Z" fill="#F47458"/>
+<path d="M721.386 227.146C721.864 226.975 725.204 251.603 718.865 258.381C712.526 265.159 700.165 267.377 695.717 262.037C690.816 256.135 691.062 229.663 700.923 222.692C710.784 215.722 721.386 227.146 721.386 227.146Z" fill="#F7A491"/>
+<path d="M704.691 209.516C710.204 210.688 715.221 213.53 719.061 217.654C722.523 218.06 727.227 219.961 732.085 227.946C738.057 237.764 733.644 248.644 726.693 253.98C719.741 259.317 719.82 265.515 719.82 265.515L718.751 262.311C717.923 259.899 717.625 257.336 717.879 254.799C718.01 253.243 718.39 251.718 719.004 250.281C720.674 246.721 715.411 244.35 713.936 241.381C712.8 239.096 712.743 233.873 710.952 230.096L708.815 227.216C708.815 227.216 703.883 223.403 699.054 224.478C694.225 225.554 694.912 207.547 704.691 209.516Z" fill="#13375B"/>
+<path d="M714.249 245.753C714.2 248.758 715.574 251.218 717.323 251.246C719.071 251.275 720.528 248.865 720.578 245.86C720.628 242.855 719.249 240.395 717.504 240.367C715.759 240.338 714.299 242.749 714.249 245.753Z" fill="#F7A491"/>
+<path d="M688.437 356.455L688.12 358.289C688.083 358.514 688.001 358.73 687.88 358.923C687.759 359.117 687.6 359.285 687.414 359.417C687.228 359.55 687.017 359.644 686.794 359.694C686.571 359.745 686.34 359.751 686.115 359.713L648.102 353.13C647.877 353.093 647.661 353.011 647.467 352.89C647.273 352.769 647.105 352.61 646.973 352.424C646.84 352.238 646.746 352.027 646.696 351.804C646.645 351.582 646.639 351.351 646.677 351.126L646.994 349.292C647.032 349.067 647.114 348.851 647.235 348.658C647.356 348.464 647.514 348.296 647.701 348.164C647.887 348.031 648.098 347.937 648.321 347.886C648.543 347.836 648.774 347.83 648.999 347.868L687.016 354.447C687.242 354.485 687.458 354.567 687.651 354.689C687.845 354.81 688.012 354.969 688.145 355.156C688.277 355.342 688.37 355.553 688.421 355.776C688.471 355.999 688.476 356.23 688.437 356.455V356.455Z" fill="#13375B"/>
+<path d="M742.325 288.136C737.866 288.004 733.921 317.413 736.748 320.315C739.576 323.216 740.114 359.435 740.114 359.435L698.041 358.389C697.218 357.841 688.404 351.924 687.143 350.628C685.822 349.272 679.397 349.952 677.698 351.817C676 353.682 681.477 352.173 682.987 353.173C684.497 354.174 681.855 356.733 681.855 356.733C681.855 356.733 671.192 358.282 669.112 356.075C667.032 353.868 661.48 350.14 660.725 352.344C660.337 353.483 663.218 356.929 664.814 358.374C662.802 356.869 660.391 355.27 659.561 355.548C658.051 356.057 658.681 357.979 659.5 358.542C660.319 359.104 668.781 365.569 670.106 366.018C671.431 366.466 691.085 366.947 694.486 367.698C694.486 367.698 749.971 380.329 753.127 379.542C755.894 378.83 758.661 361.098 758.661 347.502C758.661 333.907 756.264 288.538 742.325 288.136Z" fill="#F7A491"/>
+<path d="M736.543 281.425C736.543 281.425 744.303 283.205 752.323 292.219C759.613 300.407 764.207 346.274 764.207 346.274L739.029 350.343L737.02 328.157L730.293 318.007L736.543 281.425Z" fill="#50BFA5"/>
+<path d="M310.768 332.597H249.898C244.096 332.597 239.393 337.299 239.393 343.099V364.106C239.393 369.906 244.096 374.608 249.898 374.608H310.768C316.57 374.608 321.274 369.906 321.274 364.106V343.099C321.274 337.299 316.57 332.597 310.768 332.597Z" fill="#FAE0B2"/>
+<path d="M265.48 368.812L291.403 409.895L280.698 368.812H265.48Z" fill="#FAE0B2"/>
+<path d="M774.886 153.315L772.394 147.423L766.126 146.138C765.965 146.105 765.816 146.028 765.697 145.915C765.577 145.802 765.492 145.658 765.45 145.499C765.409 145.34 765.413 145.172 765.462 145.015C765.51 144.858 765.602 144.718 765.727 144.611L770.559 140.424L769.847 134.066C769.829 133.903 769.856 133.739 769.927 133.591C769.997 133.443 770.108 133.318 770.246 133.23C770.383 133.142 770.543 133.094 770.707 133.092C770.871 133.09 771.032 133.134 771.172 133.219L776.653 136.519L782.479 133.877C782.629 133.81 782.794 133.786 782.956 133.808C783.119 133.829 783.272 133.896 783.399 134C783.525 134.104 783.62 134.241 783.673 134.396C783.726 134.551 783.734 134.718 783.697 134.878L782.251 141.108L786.564 145.828C786.675 145.949 786.75 146.099 786.78 146.261C786.81 146.422 786.795 146.589 786.735 146.742C786.675 146.895 786.574 147.028 786.442 147.127C786.311 147.225 786.154 147.285 785.991 147.299L779.616 147.847L776.457 153.408C776.375 153.548 776.255 153.663 776.111 153.739C775.968 153.816 775.806 153.851 775.643 153.842C775.481 153.832 775.324 153.778 775.191 153.685C775.057 153.592 774.952 153.464 774.886 153.315Z" fill="#9BC1F9"/>
+<path d="M448.498 129.584L446.522 124.917L441.536 123.895C441.412 123.863 441.3 123.799 441.21 123.709C441.119 123.62 441.055 123.507 441.023 123.384C440.991 123.261 440.992 123.131 441.028 123.009C441.063 122.886 441.13 122.776 441.223 122.688L445.054 119.367L444.488 114.329C444.478 114.199 444.503 114.069 444.561 113.953C444.619 113.837 444.708 113.739 444.818 113.669C444.929 113.6 445.056 113.562 445.186 113.56C445.316 113.557 445.444 113.591 445.557 113.656L449.898 116.269L454.528 114.18C454.647 114.132 454.778 114.117 454.905 114.138C455.032 114.158 455.152 114.213 455.251 114.296C455.349 114.379 455.424 114.487 455.466 114.609C455.508 114.731 455.516 114.862 455.489 114.988L454.342 119.925L457.761 123.671C457.842 123.769 457.896 123.887 457.916 124.012C457.936 124.138 457.922 124.267 457.876 124.385C457.829 124.504 457.752 124.608 457.652 124.686C457.551 124.765 457.432 124.815 457.305 124.831L452.255 125.269L449.763 129.673C449.695 129.785 449.597 129.876 449.481 129.936C449.365 129.996 449.234 130.023 449.103 130.014C448.972 130.005 448.847 129.96 448.74 129.884C448.633 129.808 448.55 129.704 448.498 129.584Z" fill="#F7CC7F"/>
+<path d="M846.287 133.29L844.591 140.115L833.302 138.602L829.591 148.278L820.955 148.527L821.08 152.895L832.629 152.564L836.148 143.393L847.893 144.97L850.443 134.696L846.287 133.29Z" fill="#F48C7F"/>
+<path d="M489.24 138.48L487.541 145.309L476.252 143.796L472.541 153.472L463.908 153.717L464.033 158.085L475.579 157.754L479.097 148.587L490.842 150.161L493.392 139.887L489.24 138.48Z" fill="#466EB6"/>
+<path d="M570.38 117.896L564.009 120.89L558.062 111.179L548.211 114.404L542.574 107.864L539.262 110.716L546.801 119.463L556.139 116.408L562.325 126.512L571.908 122.008L570.38 117.896Z" fill="#F48C7F"/>
+<path d="M773.074 109.955L762.757 112.771L760.535 100.271L763.911 99.6733L765.475 108.477L772.17 106.647L773.074 109.955Z" fill="#50BFA5"/>
+<path d="M536.625 169.954L506.874 170.04C506.322 170.042 505.775 169.935 505.264 169.725C504.753 169.516 504.288 169.207 503.896 168.818C503.504 168.429 503.193 167.967 502.98 167.457C502.767 166.948 502.656 166.402 502.654 165.85L540.821 165.739C540.822 166.291 540.715 166.838 540.505 167.349C540.295 167.86 539.986 168.324 539.596 168.715C539.207 169.107 538.744 169.418 538.234 169.63C537.724 169.843 537.178 169.953 536.625 169.954V169.954Z" fill="#FAE0B2"/>
+<path d="M537.623 151.011C534.294 151.011 531.591 153.165 531.598 155.792C531.605 158.42 534.318 160.545 537.652 160.538C540.985 160.531 543.685 158.38 543.678 155.757C543.67 153.133 540.96 151.001 537.623 151.011ZM537.645 158.388C535.533 158.388 533.749 157.202 533.727 155.785C533.706 154.368 535.508 153.162 537.613 153.158C539.717 153.154 541.509 154.343 541.512 155.76C541.516 157.177 539.753 158.384 537.645 158.388V158.388Z" fill="#FAE0B2"/>
+<path d="M536.469 146.786C536.504 158.755 529.624 168.477 521.094 168.502C512.565 168.527 505.631 158.847 505.596 146.879C505.596 145.358 512.498 144.105 521.023 144.08C529.549 144.056 536.465 145.269 536.469 146.786Z" fill="#FAE0B2"/>
+<path d="M536.469 146.786C536.469 148.306 529.567 149.559 521.041 149.584C512.515 149.609 505.603 148.395 505.596 146.879C505.589 145.362 512.498 144.105 521.023 144.08C529.549 144.056 536.465 145.269 536.469 146.786Z" fill="#F7CC7F"/>
+</svg>
diff --git a/public/assets/images/chapter/learn.png b/public/assets/images/chapter/learn.png
index 619e91cc..0806a846 100644
Binary files a/public/assets/images/chapter/learn.png and b/public/assets/images/chapter/learn.png differ
diff --git a/public/assets/images/chapter/locationDemo.png b/public/assets/images/chapter/locationDemo.png
new file mode 100644
index 00000000..555f208c
Binary files /dev/null and b/public/assets/images/chapter/locationDemo.png differ
diff --git a/public/assets/images/chapter/mentorship.png b/public/assets/images/chapter/mentorship.png
index 7758f66e..fe860387 100644
Binary files a/public/assets/images/chapter/mentorship.png and b/public/assets/images/chapter/mentorship.png differ
diff --git a/public/assets/images/chapter/mpa-logo.png b/public/assets/images/chapter/mpa-logo.png
new file mode 100644
index 00000000..a558d747
Binary files /dev/null and b/public/assets/images/chapter/mpa-logo.png differ
diff --git a/public/assets/images/chapter/national.svg b/public/assets/images/chapter/national.svg
new file mode 100644
index 00000000..34e404e4
--- /dev/null
+++ b/public/assets/images/chapter/national.svg
@@ -0,0 +1,11 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3019_13226)">
+<path d="M10.9992 0H10.9727C4.89791 0 -0.0273438 4.92525 -0.0273438 11C-0.0273438 17.0748 4.89791 22 10.9727 22H10.9992C17.074 22 21.9992 17.0748 21.9992 11C21.9992 4.92525 17.074 0 10.9992 0ZM10.9992 21.12H10.9727C5.38374 21.12 0.852656 16.5889 0.852656 11C0.852656 5.41108 5.38374 0.88 10.9727 0.88H10.9992C16.5882 0.88 21.1192 5.41108 21.1192 11C21.1192 16.5889 16.5882 21.12 10.9992 21.12Z" fill="#33D2FF"/>
+<path d="M14.5071 6.5472C13.5996 6.77637 12.5491 6.92487 11.4692 6.9597L11.4454 6.96062V10.5622H15.0204C14.9996 9.16618 14.8185 7.77718 14.4805 6.42254L14.5071 6.5472ZM11.4399 1.82454V6.15579C12.4318 6.12645 13.4178 5.99217 14.3815 5.7552L14.2852 5.77537C13.5922 3.58454 12.5133 2.1472 11.4399 1.82454ZM7.69072 5.76987C8.53955 5.98254 9.52405 6.12187 10.5342 6.15487L10.5571 6.15579V1.81445C9.48372 2.12612 8.3883 3.56529 7.69072 5.76987ZM17.5898 4.51587C16.3928 3.2924 14.8782 2.42704 13.2164 2.01704L13.1531 2.0042C14.0372 3.01316 14.6838 4.20756 15.0451 5.49945L15.0598 5.5627C15.9621 5.29078 16.8344 4.92775 17.6631 4.4792L17.5898 4.51587ZM15.8289 10.5622H20.2344C20.1449 8.56766 19.4069 6.65682 18.1325 5.11995L18.1444 5.13554C17.3286 5.5957 16.3816 6.00454 15.3898 6.31345L15.2844 6.34187C15.608 7.60229 15.8051 9.05337 15.828 10.5475V10.5631L15.8289 10.5622ZM6.95464 10.5622H10.5608V6.96062C9.48436 6.93003 8.41443 6.7825 7.36988 6.52062L7.47255 6.54262C7.14461 7.85319 6.97079 9.19757 6.95464 10.5485V10.5622ZM15.0204 11.4395H11.4399V15.0328C12.5436 15.0649 13.5968 15.2134 14.6088 15.4673L14.508 15.4462C14.8123 14.25 14.9975 12.8722 15.0204 11.455V11.4404V11.4395ZM7.47347 15.4535C8.39014 15.2198 9.4498 15.0685 10.5397 15.0365L10.5617 15.0355V11.4422H6.95464C6.97572 12.8759 7.16364 14.2555 7.49914 15.5764L7.47255 15.4535H7.47347ZM10.5626 20.1817V15.8395C9.5268 15.8734 8.54139 16.0118 7.59264 16.2455L7.69072 16.2254C8.38922 18.4309 9.48372 19.8728 10.5626 20.1817ZM13.1531 19.9965C14.8396 19.5894 16.3783 18.7177 17.5944 17.4803L17.5962 17.4785C16.822 17.0593 16.0083 16.7176 15.1671 16.4582L15.0681 16.4316C14.7062 17.7536 14.0485 18.9761 13.1449 20.0066L13.1541 19.9965H13.1531ZM8.81639 2.0152C7.14411 2.4246 5.61912 3.29217 4.41272 4.52045L4.41089 4.52229C5.1213 4.91095 5.94905 5.26295 6.81439 5.53245L6.91247 5.55904C7.27431 4.24588 7.92795 3.03135 8.82464 2.00604L8.81547 2.01612L8.81639 2.0152ZM15.2844 15.6598C16.3835 15.9944 17.3331 16.4041 18.2251 16.9037L18.1508 16.8652C19.4152 15.3378 20.1482 13.4404 20.239 11.4596L20.2399 11.4385H15.8344C15.8077 12.9072 15.6136 14.368 15.256 15.7927L15.2844 15.6598ZM11.4399 15.8395V20.1753C12.5133 19.8526 13.5922 18.4153 14.2852 16.2199C13.3598 15.994 12.4132 15.8665 11.461 15.8395L11.4399 15.8385V15.8395ZM6.69614 6.33545C5.68263 6.03066 4.7057 5.61536 3.78297 5.09704L3.85539 5.13462C2.59097 6.66202 1.858 8.55943 1.76722 10.5402L1.7663 10.5613H6.1498C6.17089 9.05154 6.36889 7.5977 6.72364 6.2062L6.69614 6.33454V6.33545ZM6.14522 11.4395H1.76172C1.8598 13.5166 2.63255 15.3958 3.86364 16.8817L3.85172 16.8661C4.66114 16.4087 5.60255 16.0017 6.58705 15.6937L6.69155 15.6653C6.35011 14.2878 6.16712 12.8759 6.14614 11.4569V11.4395H6.14522ZM4.4063 17.4785C5.59721 18.695 7.10175 19.558 8.75314 19.9718L8.81639 19.9855C7.93497 18.9787 7.28895 17.7881 6.9253 16.5004L6.90972 16.4362C6.01644 16.7104 5.15242 17.0721 4.33022 17.516L4.4063 17.4785Z" fill="#33D2FF"/>
+</g>
+<defs>
+<clipPath id="clip0_3019_13226">
+<rect width="22" height="22" rx="11" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/images/chapter/pre-collage.svg b/public/assets/images/chapter/pre-collage.svg
new file mode 100644
index 00000000..b16a05be
--- /dev/null
+++ b/public/assets/images/chapter/pre-collage.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0L0 5.6L3.2 7.04V9.76C2.24 10.08 1.6 11.04 1.6 12C1.6 12.96 2.24 13.92 3.2 14.24V14.4L1.76 17.76C1.28 19.2 1.6 20.8 4 20.8C6.4 20.8 6.72 19.2 6.24 17.76L4.8 14.4C5.76 13.92 6.4 13.12 6.4 12C6.4 10.88 5.76 10.08 4.8 9.76V7.84L12 11.2L24 5.6L12 0ZM19.04 10.4L11.84 13.6L8 11.84V12C8 13.12 7.52 14.08 6.72 14.88L7.68 17.12V17.28C7.84 17.92 8 18.56 7.84 19.2C8.96 19.68 10.24 20 11.84 20C17.12 20 19.04 16.8 19.04 15.2V10.4Z" fill="#6938EF"/>
+</svg>
diff --git a/public/assets/images/chapter/pro.png b/public/assets/images/chapter/pro.png
new file mode 100644
index 00000000..725fcf3f
Binary files /dev/null and b/public/assets/images/chapter/pro.png differ
diff --git a/public/assets/images/chapter/professional.svg b/public/assets/images/chapter/professional.svg
new file mode 100644
index 00000000..f15d9659
--- /dev/null
+++ b/public/assets/images/chapter/professional.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3571 6C14.3571 8.76172 12.1828 11 9.5 11C6.81719 11 4.64286 8.76172 4.64286 6C4.64286 3.23867 6.81719 1 9.5 1C12.1828 1 14.3571 3.23867 14.3571 6ZM8.9346 15.0312L7.67857 12.875H11.3214L10.0654 15.0312L11.329 19.8711L12.8279 13.5742C15.7574 14.043 18 16.6523 18 19.8008C18 20.4609 17.4763 21 16.835 21H2.16571C1.52176 21 1 20.4609 1 19.8008C1 16.6523 3.24225 14.043 6.1721 13.5742L7.67098 19.8711L8.9346 15.0312Z" fill="#CC00FF"/>
+</svg>
diff --git a/public/assets/images/chapter/project.png b/public/assets/images/chapter/project.png
index e944306e..954998cc 100644
Binary files a/public/assets/images/chapter/project.png and b/public/assets/images/chapter/project.png differ
diff --git a/public/assets/images/chapter/recruitment.png b/public/assets/images/chapter/recruitment.png
index 57b8570b..6d14ca62 100644
Binary files a/public/assets/images/chapter/recruitment.png and b/public/assets/images/chapter/recruitment.png differ
diff --git a/public/assets/images/chapter/regional.svg b/public/assets/images/chapter/regional.svg
new file mode 100644
index 00000000..a7abe888
--- /dev/null
+++ b/public/assets/images/chapter/regional.svg
@@ -0,0 +1,14 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.50065 7.91634C10.3405 7.91634 11.146 7.58271 11.7398 6.98885C12.3337 6.39498 12.6673 5.58953 12.6673 4.74967C12.6673 3.90982 12.3337 3.10437 11.7398 2.5105C11.146 1.91664 10.3405 1.58301 9.50065 1.58301C8.6608 1.58301 7.85534 1.91664 7.26148 2.5105C6.66761 3.10437 6.33398 3.90982 6.33398 4.74967C6.33398 5.58953 6.66761 6.39498 7.26148 6.98885C7.85534 7.58271 8.6608 7.91634 9.50065 7.91634V7.91634Z" stroke="url(#paint0_linear_3063_11132)" stroke-width="2" stroke-linejoin="round"/>
+<path d="M6.33398 12.666H4.75065L1.58398 17.416H17.4173L14.2507 12.666H12.6673M9.50065 7.91602V15.041V7.91602Z" stroke="url(#paint1_linear_3063_11132)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_3063_11132" x1="7.40506" y1="4.71242" x2="13.192" y2="4.85329" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF00B8"/>
+<stop offset="1" stop-color="#CC00FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3063_11132" x1="4.26168" y1="12.6101" x2="18.7139" y2="13.1965" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF00B8"/>
+<stop offset="1" stop-color="#CC00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/assets/images/chapter/search.svg b/public/assets/images/chapter/search.svg
new file mode 100644
index 00000000..13206f67
--- /dev/null
+++ b/public/assets/images/chapter/search.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 22.5C14.7187 22.4995 16.8735 21.7568 18.6213 20.39L24.1162 25.885L25.8838 24.1175L20.3888 18.6225C21.7563 16.8746 22.4995 14.7193 22.5 12.5C22.5 6.98625 18.0138 2.5 12.5 2.5C6.98625 2.5 2.5 6.98625 2.5 12.5C2.5 18.0137 6.98625 22.5 12.5 22.5ZM12.5 5C16.6362 5 20 8.36375 20 12.5C20 16.6362 16.6362 20 12.5 20C8.36375 20 5 16.6362 5 12.5C5 8.36375 8.36375 5 12.5 5Z" fill="black" fill-opacity="0.66"/>
+<path d="M14.2643 10.7329C14.738 11.2079 14.9993 11.8354 14.9993 12.5004H17.4993C17.5004 11.8434 17.3713 11.1927 17.1194 10.586C16.8675 9.9792 16.4979 9.42838 16.0318 8.96535C14.1393 7.07535 10.858 7.07535 8.9668 8.96535L10.7318 10.7354C11.6818 9.78785 13.3193 9.79035 14.2643 10.7329Z" fill="black" fill-opacity="0.66"/>
+</svg>
diff --git a/public/assets/images/chapter/silver.svg b/public/assets/images/chapter/silver.svg
new file mode 100644
index 00000000..60b28581
--- /dev/null
+++ b/public/assets/images/chapter/silver.svg
@@ -0,0 +1,22 @@
+<svg width="116" height="154" viewBox="0 0 116 154" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M84.5576 -44L47.8906 48.7892H76.4383L115.238 -44H84.5576Z" fill="#6359CF"/>
+<mask id="mask0_3012_12867" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="43" width="99" height="111">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9434 43.0342H108.757V153.475H10.9434V43.0342Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3012_12867)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.8477 59.2134V51.1356C40.8477 49.8223 41.9137 48.7524 43.2238 48.7524H76.4848C77.7949 48.7524 78.861 49.8223 78.861 51.1356V59.2134C73.0181 56.7393 66.5953 55.3712 59.8543 55.3712C53.1133 55.3712 46.6905 56.7393 40.8477 59.2134ZM84.5595 62.0833V51.136C84.5595 46.6685 80.9352 43.0342 76.4809 43.0342H43.2198C38.7655 43.0342 35.1418 46.6685 35.1418 51.136V62.0833C20.6643 70.6001 10.9434 86.3733 10.9434 104.423C10.9434 131.514 32.8393 153.475 59.8504 153.475C86.8608 153.475 108.757 131.514 108.757 104.423C108.757 86.3733 99.037 70.6001 84.5595 62.0833Z" fill="url(#paint0_linear_3012_12867)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M59.8646 144.572C37.5831 144.572 19.457 126.781 19.457 104.912C19.457 83.0426 37.5831 65.252 59.8646 65.252C82.1461 65.252 100.273 83.0426 100.273 104.912C100.273 126.781 82.1461 144.572 59.8646 144.572Z" fill="url(#paint1_linear_3012_12867)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.4581 113.086C72.7012 116.541 69.2142 119.038 66.0214 117.695L60.5252 115.383L55.0072 117.645C51.8025 118.958 48.3389 116.43 48.6132 112.977L49.0955 106.906L45.181 102.201C42.9801 99.556 44.3185 95.5192 47.664 94.7127L53.5379 93.2967L56.6815 88.1969C58.5062 85.2368 62.8166 85.2564 64.6143 88.2331L67.7121 93.3626L73.5733 94.8326C76.9113 95.6698 78.2126 99.7185 75.9876 102.344L72.0308 107.012L72.4581 113.086Z" fill="#B8B8B8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 -44H34.0766L77.8232 50.2858H45.8211L0 -44Z" fill="#6938EF"/>
+<defs>
+<linearGradient id="paint0_linear_3012_12867" x1="49.4641" y1="28.7674" x2="-9.31664" y2="113.984" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8B8B8"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3012_12867" x1="55.9619" y1="50.6059" x2="8.73833" y2="113.762" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#B8B8B8"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/assets/images/chapter/student.png b/public/assets/images/chapter/student.png
new file mode 100644
index 00000000..d8b4cef0
Binary files /dev/null and b/public/assets/images/chapter/student.png differ
diff --git a/public/assets/images/chapter/university.svg b/public/assets/images/chapter/university.svg
new file mode 100644
index 00000000..7f8c2dd6
--- /dev/null
+++ b/public/assets/images/chapter/university.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.4993 8.33294C17.7204 8.33294 17.9323 8.24514 18.0886 8.08886C18.2449 7.93258 18.3327 7.72062 18.3327 7.4996V4.9996C18.3327 4.82474 18.2776 4.65433 18.1753 4.51253C18.073 4.37072 17.9286 4.26474 17.7627 4.2096L10.2627 1.7096C10.0917 1.65279 9.90697 1.65279 9.73602 1.7096L2.23602 4.2096C2.07008 4.26474 1.92571 4.37072 1.8234 4.51253C1.72109 4.65433 1.66602 4.82474 1.66602 4.9996V7.4996C1.66602 7.72062 1.75381 7.93258 1.91009 8.08886C2.06637 8.24514 2.27834 8.33294 2.49935 8.33294H3.33268V14.3196C2.84659 14.4908 2.42542 14.8083 2.127 15.2285C1.82858 15.6487 1.66755 16.1509 1.66602 16.6663V18.3329C1.66602 18.5539 1.75381 18.7659 1.91009 18.9222C2.06637 19.0785 2.27834 19.1663 2.49935 19.1663H17.4993C17.7204 19.1663 17.9323 19.0785 18.0886 18.9222C18.2449 18.7659 18.3327 18.5539 18.3327 18.3329V16.6663C18.3312 16.1509 18.1701 15.6487 17.8717 15.2285C17.5733 14.8083 17.1521 14.4908 16.666 14.3196V8.33294H17.4993ZM16.666 17.4996H3.33268V16.6663C3.3329 16.4453 3.42077 16.2335 3.577 16.0773C3.73324 15.921 3.94507 15.8332 4.16602 15.8329H15.8327C16.0536 15.8332 16.2655 15.921 16.4217 16.0773C16.5779 16.2335 16.6658 16.4453 16.666 16.6663V17.4996ZM4.99935 14.1663V8.33294H6.66602V14.1663H4.99935ZM8.33268 14.1663V8.33294H11.666V14.1663H8.33268ZM13.3327 14.1663V8.33294H14.9993V14.1663H13.3327ZM3.33268 6.66627V5.5996L9.99935 3.37794L16.666 5.60044V6.66627H3.33268Z" fill="#FF00B8"/>
+</svg>
diff --git a/public/assets/images/chapter/world.png b/public/assets/images/chapter/world.png
deleted file mode 100644
index 5a104250..00000000
Binary files a/public/assets/images/chapter/world.png and /dev/null differ
diff --git a/public/assets/images/dashboard/BTC.svg b/public/assets/images/dashboard/BTC.svg
new file mode 100644
index 00000000..7b5b85b7
--- /dev/null
+++ b/public/assets/images/dashboard/BTC.svg
@@ -0,0 +1,19 @@
+<svg width="69" height="66" viewBox="0 0 69 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.2" filter="url(#filter0_d_2082_6336)">
+<rect x="10" y="10" width="48.4252" height="45.1968" rx="10" fill="#FFCC40"/>
+</g>
+<path d="M18.0708 24.4565C18.0708 20.0383 21.6525 16.4565 26.0708 16.4565H42.3543C46.7725 16.4565 50.3543 20.0383 50.3543 24.4565V40.74C50.3543 45.1583 46.7725 48.74 42.3543 48.74H26.0708C21.6525 48.74 18.0708 45.1583 18.0708 40.74V24.4565Z" fill="#FFCC40"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.4655 28.0952C42.2187 25.535 40.0086 24.6767 37.2182 24.4323L37.2181 20.8809L35.0559 20.8813L35.056 24.339C34.4883 24.339 33.9074 24.3502 33.3303 24.3617L33.3306 20.881L31.1701 20.881L31.1693 24.4313C30.7013 24.4409 30.2416 24.4496 29.7935 24.4499L29.7932 24.4389L26.8117 24.4379L26.8123 26.7466C26.8123 26.7466 28.4086 26.7162 28.3821 26.7456C29.2577 26.7458 29.5432 27.254 29.6255 27.6928L29.6257 31.7386C29.6861 31.7389 29.765 31.7414 29.8542 31.7537L29.6264 31.7538L29.6253 37.4217C29.5869 37.6972 29.4249 38.1366 28.8132 38.1377C28.8408 38.1622 27.2418 38.1372 27.2418 38.1372L26.8124 40.7194L29.6261 40.7192C29.9439 40.7196 30.2585 40.723 30.5696 40.7264L30.5697 40.7264C30.7712 40.7286 30.9713 40.7307 31.1698 40.7321L31.1709 44.3244L33.3303 44.3248L33.3308 40.7708C33.9231 40.7832 34.4969 40.7879 35.057 40.7874L35.0561 44.3249L37.2178 44.3246L37.2185 40.7392C40.8527 40.5307 43.3969 39.615 43.7118 36.203C43.9668 33.455 42.6747 32.2286 40.6115 31.7326C41.8646 31.0933 42.6481 29.9688 42.4649 28.0954L42.4655 28.0952ZM39.4402 35.7757C39.4408 38.2394 35.5698 38.185 33.8003 38.1602L33.8 38.1602C33.6416 38.158 33.5001 38.156 33.3798 38.1561L33.3803 33.3971C33.5276 33.3972 33.7064 33.3929 33.9091 33.3882L33.9091 33.3882C35.7227 33.3453 39.4394 33.2576 39.4408 35.7755L39.4402 35.7757ZM33.7361 31.2229C35.2135 31.2471 38.4338 31.2998 38.4344 29.0614C38.4347 26.7716 35.3366 26.8539 33.8235 26.8941C33.6534 26.8986 33.5033 26.9026 33.38 26.9026L33.3798 31.2188C33.4817 31.2188 33.6017 31.2207 33.7361 31.2229Z" fill="#F4FFFC"/>
+<defs>
+<filter id="filter0_d_2082_6336" x="0" y="0" width="68.4253" height="65.1968" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2082_6336"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2082_6336" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/binance.svg b/public/assets/images/dashboard/binance.svg
new file mode 100644
index 00000000..c59e3e15
--- /dev/null
+++ b/public/assets/images/dashboard/binance.svg
@@ -0,0 +1,19 @@
+<svg width="69" height="66" viewBox="0 0 69 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.2" filter="url(#filter0_d_2082_6345)">
+<rect x="10" y="10.5903" width="48.4252" height="45.1968" rx="10" fill="#FFCC40"/>
+</g>
+<path d="M18.0708 25.0471C18.0708 20.6288 21.6525 17.0471 26.0708 17.0471H42.3543C46.7725 17.0471 50.3543 20.6288 50.3543 25.0471V41.3306C50.3543 45.7489 46.7725 49.3306 42.3543 49.3306H26.0708C21.6525 49.3306 18.0708 45.7489 18.0708 41.3306V25.0471Z" fill="#311D05"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.7185 31.7523L34.2146 28.2578L37.712 31.7552L39.7451 29.7208L34.2146 24.189L28.684 29.7193L30.7185 31.7523ZM25.2129 33.1895L27.2466 31.1558L29.2804 33.1895L27.2466 35.2231L25.2129 33.1895ZM34.2145 38.1214L30.7185 34.6254L28.6812 36.657L28.684 36.6599L34.2145 42.1888L39.7451 36.657L39.7465 36.6556L37.712 34.624L34.2145 38.1214ZM39.145 33.1899L41.1788 31.1562L43.2125 33.1899L41.1788 35.2236L39.145 33.1899ZM34.2142 31.1235L36.2772 33.1878H36.2786L36.2772 33.1892L34.2142 35.2535L32.1513 33.1921L32.1484 33.1878L32.1513 33.185L32.5124 32.8239L32.6887 32.649L34.2142 31.1235Z" fill="#F3BA2F"/>
+<defs>
+<filter id="filter0_d_2082_6345" x="0" y="0.590332" width="68.4253" height="65.1968" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2082_6345"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2082_6345" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/career.png b/public/assets/images/dashboard/career.png
new file mode 100644
index 00000000..62296d4d
Binary files /dev/null and b/public/assets/images/dashboard/career.png differ
diff --git a/public/assets/images/dashboard/chaper.png b/public/assets/images/dashboard/chaper.png
new file mode 100644
index 00000000..4d6b1007
Binary files /dev/null and b/public/assets/images/dashboard/chaper.png differ
diff --git a/public/assets/images/dashboard/course.png b/public/assets/images/dashboard/course.png
new file mode 100644
index 00000000..35ee8c62
Binary files /dev/null and b/public/assets/images/dashboard/course.png differ
diff --git a/public/assets/images/dashboard/ether.svg b/public/assets/images/dashboard/ether.svg
new file mode 100644
index 00000000..8f7a804f
--- /dev/null
+++ b/public/assets/images/dashboard/ether.svg
@@ -0,0 +1,19 @@
+<svg width="69" height="66" viewBox="0 0 69 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.2" filter="url(#filter0_d_2082_6339)">
+<rect x="10" y="10.1968" width="48.4252" height="45.1968" rx="10" fill="#FE8F66"/>
+</g>
+<path d="M18.0708 24.6533C18.0708 20.235 21.6525 16.6533 26.0708 16.6533H42.3543C46.7725 16.6533 50.3543 20.235 50.3543 24.6533V40.9368C50.3543 45.3551 46.7725 48.9368 42.3543 48.9368H26.0708C21.6525 48.9368 18.0708 45.3551 18.0708 40.9368V24.6533Z" fill="#FE8F66"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.2131 32.5274L34.2108 20.7949V20.7959L34.211 20.7949L40.2086 32.5272L40.2092 32.5275L40.2089 32.5277L40.2089 32.5277L34.2114 36.7072L34.211 36.7075L34.2108 36.7072V36.7076L28.2129 32.5277L28.213 32.5276L28.2129 32.5275L28.2131 32.5274ZM34.2108 44.7936V44.7951L28.2129 34.8306L34.2107 39.0082L34.211 39.0077L40.2125 34.8301L34.211 44.7945L34.2108 44.7936Z" fill="#F4FFFC"/>
+<defs>
+<filter id="filter0_d_2082_6339" x="0" y="0.196777" width="68.4253" height="65.1968" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2082_6339"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2082_6339" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/event.png b/public/assets/images/dashboard/event.png
new file mode 100644
index 00000000..ca8fc0ef
Binary files /dev/null and b/public/assets/images/dashboard/event.png differ
diff --git a/public/assets/images/dashboard/litecoin.svg b/public/assets/images/dashboard/litecoin.svg
new file mode 100644
index 00000000..5c118f8c
--- /dev/null
+++ b/public/assets/images/dashboard/litecoin.svg
@@ -0,0 +1,19 @@
+<svg width="69" height="66" viewBox="0 0 69 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.2" filter="url(#filter0_d_2082_6342)">
+<rect x="10" y="10.3936" width="48.4252" height="45.1968" rx="10" fill="#783EFD"/>
+</g>
+<path d="M18.0708 24.8503C18.0708 20.4321 21.6525 16.8503 26.0708 16.8503H42.3543C46.7725 16.8503 50.3543 20.4321 50.3543 24.8503V41.1338C50.3543 45.5521 46.7725 49.1338 42.3543 49.1338H26.0708C21.6525 49.1338 18.0708 45.5521 18.0708 41.1338V24.8503Z" fill="#783EFD"/>
+<path d="M33.1859 38.4538L34.3268 34.0515L37.0279 33.0402L37.6997 30.453L37.6768 30.3888L35.018 31.3842L36.9337 23.9922H31.5006L28.9953 33.639L26.9036 34.422L26.2124 37.0893L28.3026 36.3069L26.826 41.9922H41.2854L42.2124 38.4538H33.1859Z" fill="#F4FFFC"/>
+<defs>
+<filter id="filter0_d_2082_6342" x="0" y="0.393555" width="68.4253" height="65.1968" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2082_6342"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2082_6342" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/profile.png b/public/assets/images/dashboard/profile.png
new file mode 100644
index 00000000..5fe7a545
Binary files /dev/null and b/public/assets/images/dashboard/profile.png differ
diff --git a/public/assets/images/dashboard/startup.png b/public/assets/images/dashboard/startup.png
new file mode 100644
index 00000000..fcde90d3
Binary files /dev/null and b/public/assets/images/dashboard/startup.png differ
diff --git a/public/assets/images/images - Shortcut.lnk b/public/assets/images/images - Shortcut.lnk
new file mode 100644
index 00000000..caf98ef4
Binary files /dev/null and b/public/assets/images/images - Shortcut.lnk differ
diff --git a/public/assets/images/search-icon.svg b/public/assets/images/search-icon.svg
new file mode 100644
index 00000000..7b64d5ff
--- /dev/null
+++ b/public/assets/images/search-icon.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.375 14.5H15.3875L15.0375 14.1625C16.2625 12.7375 17 10.8875 17 8.875C17 4.3875 13.3625 0.75 8.875 0.75C4.3875 0.75 0.75 4.3875 0.75 8.875C0.75 13.3625 4.3875 17 8.875 17C10.8875 17 12.7375 16.2625 14.1625 15.0375L14.5 15.3875V16.375L20.75 22.6125L22.6125 20.75L16.375 14.5ZM8.875 14.5C5.7625 14.5 3.25 11.9875 3.25 8.875C3.25 5.7625 5.7625 3.25 8.875 3.25C11.9875 3.25 14.5 5.7625 14.5 8.875C14.5 11.9875 11.9875 14.5 8.875 14.5Z" fill="white"/>
+</svg>
diff --git a/public/assets/images/sponsorship/banyan-collective.png b/public/assets/images/sponsorship/banyan-collective.png
new file mode 100644
index 00000000..cc64fd30
Binary files /dev/null and b/public/assets/images/sponsorship/banyan-collective.png differ
diff --git a/public/assets/images/sponsorship/bluntdao.png b/public/assets/images/sponsorship/bluntdao.png
new file mode 100644
index 00000000..6a0113e6
Binary files /dev/null and b/public/assets/images/sponsorship/bluntdao.png differ
diff --git a/public/assets/images/sponsorship/genadrop.png b/public/assets/images/sponsorship/genadrop.png
new file mode 100644
index 00000000..66296d51
Binary files /dev/null and b/public/assets/images/sponsorship/genadrop.png differ
diff --git a/public/assets/scss/_homepage.scss b/public/assets/scss/_homepage.scss
index bd6a979b..f1986800 100644
--- a/public/assets/scss/_homepage.scss
+++ b/public/assets/scss/_homepage.scss
@@ -1,3 +1,4 @@
+@import url(//db.onlinewebfonts.com/c/0b51833ff62e4af8acb5fd3e2bf59e97?family=SF+Pro+Display);
 .site-footer__social a svg:hover{
     path,rect,circle{
       stroke: #8040D2;
@@ -121,33 +122,14 @@
 .add-socail-links{
   padding: 0 !important;
 }
-// .add-socail-links > div{
-//   margin: 0 !important;
-//   display: flex;
-//   align-items: center;
-// }
-// .add-socail-links div .ant-dropdown-trigger{
-//   margin: 0 1rem;
-// }
-// .add-socail-links div .ant-dropdown-trigger img{
-//   border: 1px solid #6938EF;
-//   border-radius: 50%;
-//   padding: 5px 5px 3px;
-// }
-// .settings_socail-links-contaner ul{
-//   background: #24203B;
-//   color: #fff;
-// }
-// .settings_socail-links-contaner li{
-//   color: #fff;
-// }
-// .settings_socail-links-contaner{
-//   color: #fff;
-// }
-// .settings_socail-links-contaner ul .ant-dropdown-menu-item:hover {
-//   background: #6938EF;
-// }
 .add-socail-links input{
   text-align: left;
   font-weight: bold !important;
+}
+
+// Chapter Page
+.chapter__slick-slider .slick-slide >div{
+  flex-direction: column;
+  width: 95% !important;
+  display: flex;
 }
\ No newline at end of file
diff --git a/styles/DashboardCSS/dashboard.scss b/styles/DashboardCSS/dashboard.scss
index fcd80b3d..9d8a7548 100644
--- a/styles/DashboardCSS/dashboard.scss
+++ b/styles/DashboardCSS/dashboard.scss
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
 @media only screen and (min-width: 768px) {
   .outer-dashboard-container{
     max-width: 1460px;
@@ -389,7 +390,6 @@
   text-align: center;
 }
 
-
 /* Startups Component */
 
 .overview-startup-card{
@@ -478,19 +478,19 @@
 
 /* WALLET DASHBOARD */
 .total-balance-card-dashboard-wallet{
-  background: #474BFF;
+  background: #1C1D37;
+  box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   border-radius: 20px;
   width: 100%;
   height: 200px;
 }
 
 .inner-total-balance-card-dashboard-wallet{
-  width: 90%;
+  width: 100%;
   height: 100%;
-  border-bottom-right-radius: 20px ;
-  border-top-right-radius: 20px;
-  background: white;
-  margin-left: 10%;
+  background: #1C1D37;
+  box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
+  border-radius: 20px;
   padding: 20px;
 }
 
@@ -505,41 +505,52 @@
 }
 
 .trans-card{
-  background: #F8F9FD;
-  /* background: green; */
-  border-radius: 4px;
+  background: #1C1D37;
+  border: 2px solid transparent;
+  box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
+  border-radius: 20px;  /* background: green; */
   padding: 20px;
   margin-bottom: 2%;
-  color: black;
+  color: rgb(255, 255, 255);
   cursor: pointer;
 }
 
 .trans-card:hover{
-  background: #d0d7f2;
+  border-color: #6938EF;
 }
 
 .trans-card-text{
+  font-family: 'Inter', sans-serif;
+  font-size: 10px;
+  color: white;
   margin: 0;
   line-height: 18px;
 }
 
 .trends-button{
-  background: #C4C4C480;
-  border: 0px solid transparent;
+  background: #3E385D;
+  border-radius: 20px;
+  border: 1px solid transparent;
   font-weight: 700;
-  color: black;
+  color: white !important;
+  margin-right: 8px;
+  padding: 5px 20px;
+  height: fit-content;
 }
 
 .trends-button:hover{
-  background: #f8f9fd;
-  border: 0px solid transparent;
+  border-color: #6938EF;
 }
 
 .trends-button-selected{
-  background: #CFD0F6;
-  border: 0px solid transparent;
+  background: rgba(105, 56, 239, 0.2);
+  border: 1px solid #6938EF;
   font-weight: 700;
-  color: #474BFF;
+  color: white !important;
+  border-radius: 20px;
+  margin-right: 8px;
+  padding: 5px 20px;
+  height: fit-content;
 }
 
 .wallet-transaction-form{
@@ -741,9 +752,219 @@
   line-height: 15px;
   color: #D8D8D8;
 }
+.dashboard-progress-tasklist{
+  margin-top: auto;
+}  
 .row-custom-6{
   grid-row: span 6 / span 6 ;
 }
+.dashboard-progress-chart{
+  height: fit-content;
+}
+.wallet-dashboard-container{
+  .wallet-grid{
+    grid-template-columns: 35% 65%;
+    display: grid;
+  }
+  .wallet-left{
+    overflow-y: scroll;
+  }
+  .wallet-left::-webkit-scrollbar {
+    width: 10px;              
+  }
+  .wallet-left::-webkit-scrollbar-track{
+    background: #1C1D37;
+  }
+  .wallet-left::-webkit-scrollbar-thumb{
+    background: #3E385D;
+  }
+  .wallet-right{
+    background: #1C1D37;
+    box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
+    border-radius: 20px;
+  }
+  .line{
+    height: 2px;
+    background: #282948;
+    width: 100%;
+    // margin-bottom: 1rem;
+  }
+  .add-token-btn{
+    font-style: normal;
+    font-weight: 500;
+    font-size: 18px;
+    text-align: center;
+    color: #696F8C;
+    cursor: pointer;
+    span{
+      color: #6938EF;
+      font-size: 24px;
+      margin-right: 10px;
+    }
+  }
+  .currency-chart{
+    padding: 1rem;
+    display: grid;
+    grid-template-columns: 33% 67%;
+  }
+  .currencies-update{
+    overflow-y: scroll;
+    // background: #20213F;
+    border-radius: 20px;
+    height: 270px;
+    >div{
+      margin-right: 6px;
+      background: #20213F;
+    }
+  }
+  .currencies-update::-webkit-scrollbar {
+    width: 6px;              
+  }
+  .currencies-update::-webkit-scrollbar-track{
+    background: #20213F;
+  }
+  .currencies-update::-webkit-scrollbar-thumb{
+    background: #3E385D;
+  }
+  .coin-legend{
+    width: 50%;
+    height: 270px;
+    overflow-y: scroll;
+    margin-left: auto;
+    >div{
+      margin-right: 6px;
+    }
+  }
+  .coin-legend::-webkit-scrollbar {
+    width: 6px;              
+  }
+  .coin-legend::-webkit-scrollbar-track{
+    background: #20213F;
+  }
+  .coin-legend::-webkit-scrollbar-thumb{
+    background: #3E385D;
+  }
+  .coin-row{
+    height: 85px;
+    padding: 10px 10px;
+    border-bottom: 1px solid #282948;
+  }
+  .donghut-chart-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    svg{
+      overflow: inherit !important;
+    }
+  }
+  .donghut-chart-container div{
+    // margin: 0 auto;
+  }
+  .market-chart-container{
+    padding: 1rem;
+    height: 400px;
+    display: flex;
+    align-items: center;
+  }
+  .market-chart-container >div{
+    width: 100%;
+    height: 310px;
+    border-radius: 25px;
+    padding: 15px;
+    background: #20213F;
+    box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
+  }
+  .market-chart-container .trends-button{
+    margin-right: 10px;
+  }
+  .market-chart-container .trends-button-selected{
+    margin-right: 10px;
+  }
+  div.google-visualization-tooltip{
+    background-color: #3E385D !important; 
+    box-shadow:  none !important;
+    border: none !important;
+    border-radius: 2px;
+    > ul > li > span {
+    color:rgb(255, 255, 255) !important;
+    }
+  }
+}
+// Wallet dashboard ButtonRows
+.wallet-dashboard-connect .connect__button{
+  background: #6938EF;
+  padding: .9rem 2rem;
+  margin: 0;
+  width: fit-content;
+}
+.wallet-button-rows > div{
+  cursor: pointer;
+}
+.wallet-button-rows .wallet-deposite{
+  background: #fd05b326;
+  transition: background  0.3s ease-in-out;
+}
+.wallet-button-rows .wallet-deposite:hover{
+  background: #fd05b340;
+}
+.wallet-button-rows .wallet-swap{
+  background: #F5841F26;
+  transition: background  0.3s ease-in-out;
+}
+.wallet-button-rows .wallet-swap:hover{
+  background: #F5841F40;
+}
+.wallet-button-rows .wallet-withdraw{
+  background: #33D2FF26;
+  transition: background  0.3s ease-in-out;
+}
+.wallet-button-rows .wallet-withdraw:hover{
+  background: #33D2FF40;
+}
+.wallet-button-rows-text{
+  font-size: 18px;
+  font-weight: 500;
+  color: #696F8C;
+  margin-top: 13px;
+}
+.wallet-dashboard-search-bar{
+  border: 1px solid rgba(62, 56, 93, 0.2);
+  border-radius: 5px;
+  height: 50px;
+  width: 50%;
+  margin: auto;
+  background: rgba(58, 53, 81, 0.55);
+  box-shadow: 0px 32px 41px rgb(0 0 0 / 25%);
+  border-radius: 100px;
+}
+/* Search input */
+.form-control {
+  background: var(--secondary-high-contrast);
+  border: 1px solid var(--secondary-high-contrast);
+  width: 100%;
+  border-radius: 100px;
+  height: 40px;
+}
+
+.form-control:focus {
+  color: var(--light-high-contrast);
+  background-color: var(--secondary-high-contrast);
+  border-color: var(--tertiary-high-contrast);
+  box-shadow: 0 0 0 0.2rem rgba(161, 30, 236, 0.25);
+}
+.wallet-dashboard-search-bar input{
+  background: url('/assets/images/search-icon.svg');
+  padding: 10px 20px 10px 60px;
+  width: 100%;
+  height: 100%;
+  font-weight: normal;
+  font-size: 20px;
+  background-repeat: no-repeat;
+  background-position-x: 20px;
+  background-position-y: 50%;
+  border: none;
+}
 @media only screen and (max-width: 1440px) {
   .static-chart-detail .labels{
     display: grid;
@@ -780,6 +1001,22 @@
     margin: 0;
   }
 }
+@media only screen and (max-width: 1200px) {
+  .wallet-dashboard-container .wallet-grid{
+    display: flex;
+    flex-direction: column;
+    >div{
+      padding: 0 !important;
+    }
+  }
+  .wallet-dashboard-container .wallet-right{
+    margin-top: 40px;
+  }
+  .wallet-dashboard-container .wallet-left {
+    overflow-y: scroll;
+    height: 620px;
+  }
+}  
 @media only screen and (max-width: 1100px) {
   .dashboard-pofile-card{
     flex-direction: column !important;
@@ -869,6 +1106,61 @@
     height: fit-content !important;
   }
 }
+@media only screen and (max-width: 992px) {
+  .wallet-dashboard-container{ 
+    .top-chart-detail{
+      flex-direction: column !important;
+    }
+    .currency-chart{
+    display: flex;
+    flex-direction: column;
+    }
+    .donghut-chart-container{
+      width: 100%;
+      margin: 30px 0;
+    }
+    .coin-legend{
+      width: 100%;
+    }
+  }  
+}  
+@media only screen and (max-width: 768px) {
+  .wallet-dashboard-title{
+    flex-direction: column !important;
+    margin-top: 20px;
+  }
+  .wallet-dashboard-title >div{
+    margin-right: auto;
+    width: 100% !important;
+  } 
+  .wallet-dashboard-search-bar{
+   margin-top: 20px;
+  } 
+  .market-chart-tabs{
+    flex-direction: column !important;
+  }
+  .market-chart-tabs>div{
+    margin: 10px 0;
+  }
+  .wallet-dashboard-container .market-chart-container > div{
+    height: fit-content;
+  }
+}  
+@media only screen and (max-width: 485px) {
+  .wallet-right > .d-flex >.tw-flex{
+    flex-direction: column !important;
+  }
+  .wallet-right > .d-flex >.tw-flex p{
+    margin: 10px 0;
+  }
+  .market-chart-tabs > div{
+    display: flex;
+    flex-wrap: wrap;
+    >a{
+      margin-top: 4px;
+    }
+  }
+}
 @media only screen and (max-width: 460px) {
   .inner-dashboard-container{
     width: 100%;
@@ -877,3 +1169,14 @@
     width: 30% !important;
   }
 }  
+@media only screen and (max-width: 400px) {
+  .trends-button-contianer{
+    flex-direction: column !important;
+    div{
+      margin-right: auto;
+    }
+    .add-token-btn{
+      margin-left: auto;
+    }
+  }
+}  
\ No newline at end of file