diff --git a/components/FooterSection.tsx b/components/FooterSection.tsx
index f9b5b31..5e3b045 100644
--- a/components/FooterSection.tsx
+++ b/components/FooterSection.tsx
@@ -1,8 +1,31 @@
+import { useState } from 'react'
 import MangoPill from '../components/MangoPill'
 import Button from './Button'
-import GradientText from './GradientText'
+
+const doNothing = (e) => {
+  e.stopPropagation()
+}
 
 const FooterSection = () => {
+  const [done, setDone] = useState(false)
+  const [email, setEmail] = useState('')
+
+  const handleChange = (e) => {
+    setEmail(e.target.value)
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+
+    await fetch('/api/signup', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email }),
+    })
+
+    setDone(true)
+  }
+
   return (
     <div className="bg-bg-texture bg-cover bg-bottom bg-no-repeat">
       <div className="max-w-7xl mx-auto ">
@@ -10,44 +33,52 @@ const FooterSection = () => {
           <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
             <h2 className="inline text-3xl font-extrabold sm:block sm:text-4xl">
               Want product news and updates?{' '}
-              <GradientText className="sm:block sm:text-4xl">
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green sm:block sm:text-4xl">
                 Sign up for our newsletter.
-              </GradientText>
+              </span>
             </h2>
 
-            <form className="mt-8 sm:flex">
+            <form className="mt-8 sm:flex" onSubmit={handleSubmit}>
               <label className="sr-only">Email address</label>
-              <input
-                id="email-address"
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                className="w-full px-5 py-2 placeholder-gray-500 sm:max-w-xs border-gray-300 rounded-full"
-                placeholder="Enter your email"
-              />
-              <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
-                <Button>
-                  <span className="">Sign me up!</span>
-                </Button>
-              </div>
+              {done ? (
+                <span>Thank you for signing up! 🎉</span>
+              ) : (
+                <>
+                  <input
+                    id="email-address"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
+                    required
+                    className="w-full px-5 py-2 placeholder-gray-400 text-black text-opacity-80 sm:max-w-xs border-gray-300 rounded-full focus:outline-none"
+                    placeholder="Drop us your email..."
+                    value={email}
+                    onChange={handleChange}
+                  />
+                  <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
+                    <Button>
+                      <span className="">Sign me up!</span>
+                    </Button>
+                  </div>
+                </>
+              )}
             </form>
             <div className="w-full mt-4">
-              <p className="text-xl text-gray-400">
+              <p className="text-xl text-white text-opacity-50">
                 We promise to never spam and only send alpha.
               </p>
             </div>
           </div>
         </section>
 
-        <footer className="py-20">
-          <div className="container px-4 mx-auto">
+        <footer className="py-20 px-4">
+          <div className="px-4 py-8 mx-auto">
             <div className="flex flex-wrap -mx-4 mb-8 lg:mb-16">
               <div className="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
                 <a className="text-gray-600 text-2xl leading-none" href="#">
                   <img
                     className="h-8"
-                    src="img/logoMango.png"
+                    src="img/logo_mango.svg"
                     alt=""
                     width="auto"
                   />
@@ -55,21 +86,21 @@ const FooterSection = () => {
                 <p className="mt-5 mb-6 max-w-xs text-gray-500 leading-loose">
                   Mango is a decentralized autonomous organization.{' '}
                 </p>
-                <div>
+                <div className="flex flex-row">
                   <a
-                    className="inline-block h-6 mr-8"
+                    className="flex h-6 w-6 m-2"
                     href="https://github.com/blockworks-foundation"
                   >
                     <img className="mx-auto" src="socials/github.svg" />
                   </a>
                   <a
-                    className="inline-block h-6 mr-8"
+                    className="flex h-6 w-6 m-2"
                     href="https://discord.gg/67jySBhxrg"
                   >
                     <img className="mx-auto" src="socials/discord.svg" />
                   </a>
                   <a
-                    className="inline-block h-6"
+                    className="flex h-6 w-6 m-2"
                     href="https://twitter.com/mangomarkets"
                   >
                     <img className="mx-auto" src="socials/twitter.svg" />
@@ -92,9 +123,16 @@ const FooterSection = () => {
                         </a>
                       </li>
                       <li className="mb-4">
-                        <a
+                        {/* 
+                          <a
                           className="text-gray-500 hover:text-gray-600"
                           href="#"
+                        >
+                        */}
+                        <a
+                          onClick={doNothing}
+                          className="text-gray-500 hover:text-gray-600 disabled opacity-50"
+                          href="#"
                         >
                           Perpetual Futures
                         </a>{' '}
@@ -111,7 +149,7 @@ const FooterSection = () => {
                       <li className="mb-4">
                         <a
                           className="text-gray-500 hover:text-gray-600"
-                          href="#"
+                          href="https://gitlab.com/OpinionatedGeek/mango-explorer/-/blob/master/Quickstart.md"
                         >
                           Liquidator Program
                         </a>
@@ -176,7 +214,7 @@ const FooterSection = () => {
               </div>
             </div>
             <div className="pt-8">
-              <p className="lg:text-center text-sm text-gray-400">
+              <p className="lg:text-center text-sm text-white text-opacity-20">
                 All rights reserved &copy; Blockworks Foundation 2021
               </p>
             </div>
diff --git a/components/GradientText.tsx b/components/GradientText.tsx
index 36186a8..88b8245 100644
--- a/components/GradientText.tsx
+++ b/components/GradientText.tsx
@@ -1,6 +1,6 @@
 const GradientText = (props) => (
   <span
-    className={`${props.className} text-transparent bg-clip-text bg-gradient-to-bl from-secondary-1-light via-primary-dark to-secondary-2-light`}
+    className={`${props.className} text-transparent bg-clip-text bg-gradient-to-br from-mango-red via-mango-yellow to-mango-green`}
   >
     {props.children}
   </span>
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index bbf98b6..63401d3 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -9,7 +9,7 @@ const HeroSection = () => {
               Join the <GradientText>Mango DAO</GradientText> and help build the
               ecosystem.
             </h2>
-            <p className="mb-8 text-2xl text-gray-400">
+            <p className="mb-8 text-2xl text-white text-opacity-50">
               The Mango DAO is an experiment in self governance that aims to
               build a completely decentralzied financial ecosystem.
             </p>
diff --git a/components/LandingContent.tsx b/components/LandingContent.tsx
index 6288cf8..d856164 100644
--- a/components/LandingContent.tsx
+++ b/components/LandingContent.tsx
@@ -1,14 +1,15 @@
-import Link from './Link'
+import Button from './Button'
+import GradientText from './GradientText'
 
 const LandingContent = () => {
   return (
-    <div className="bg-bkg-2 transform -skew-y-3 pt-12 lg:pb-48 lg:mb-48  z-0">
+    <div className="bg-bkg-2 transform -skew-y-3 pt-12 pb-16 mb-16 z-0">
       <div className="max-w-7xl mx-auto px-4 py-40 transform skew-y-3">
-        <div className="max-w-2xl mb-16 mx-auto text-center">
+        <div className="max-w-2xl mx-auto text-center">
           <h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
             It is still the early days.
           </h2>
-          <p className="mb-8 text-2xl text-gray-400">
+          <p className="mb-8 text-2xl text-white text-opacity-50">
             This is the first moment for non-developers to participate in
             helping build the Mango protocol by supporting the inception of the
             protocols Insurance Fund.
@@ -16,76 +17,84 @@ const LandingContent = () => {
         </div>
 
         {/* Section 1 */}
-        <div className="flex flex-wrap overflow-hidden mb-36 xl:-mx-4">
-          <div className="w-1/2 overflow-hidden xl:my-4 xl:px-4 md:w-1/2 sm:w-full xs:w-full">
-            <h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
-              What is Mango?
-            </h2>
-            <p className="mb-8 text-gray-400 leading-relaxed">
-              Mango is a decentralized autonomous organization. Its purpose is
-              to contribute maximum value for the defi ecosystem and its
-              developer community to create commercially viable decentralized
-              trading and lending products for traders.
-            </p>
 
-            <h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
-              Why the{' '}
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-yellow-300 to-green-300">
-                Insurance fund
-              </span>
-              ?
-            </h2>
-            <p className="mb-8 text-gray-400 leading-relaxed">
-              Mango protocol is powered by lenders providing their capital for
-              the community to use for trading and borrowing purposes. The
-              insurance fund is the last line of defense for protecting our
-              mango lenders.
-            </p>
-          </div>
+    <div className="py-16 xl:py-36 px-4 sm:px-6 lg:px-8 overflow-hidden">
+      <div className="max-w-max lg:max-w-7xl mx-auto">
+        <div className="relative">
+          <div className="relative md:p-6">
+            <div className="lg:grid lg:grid-cols-2 lg:gap-6">
+              <div className="lg:max-w-none">
+                <h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
+                  What is Mango?
+                </h2>
+                <p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
+                  Mango is a decentralized autonomous organization. Its purpose is
+                  to contribute maximum value for the defi ecosystem and its
+                  developer community to create commercially viable decentralized
+                  trading and lending products for traders.
+                </p>
 
-          <div className="w-1/2 overflow-hidden xl:my-4 xl:px-4 md:w-1/2 sm:w-full xs:w-full">
-            <h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
-              What is the{' '}
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-yellow-300 to-green-300">
-                $MNGO
-              </span>{' '}
-              token?
-            </h2>
-            <p className="mb-8 text-gray-400 leading-relaxed">
-              We believe that substantial rewards to a strong developer
-              community and liquidity incentives are the essential drivers for
-              growth and therefore the foundation of the Mango DAO.
-            </p>
-            <p className="mb-8 text-gray-400 leading-relaxed">
-              Mango Governance tokens ($MNGO) will serve as the incentive for
-              those who can proove their work is useful to the DAO.
-            </p>
-            <Link>Check out the whitepaper</Link>
+                <h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
+                  Why the{' '}
+                  <GradientText>
+                  Insurance fund
+                  </GradientText>
+                  ?
+                </h2>
+                <p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
+                  Mango protocol is powered by lenders providing their capital for
+                  the community to use for trading and borrowing purposes. The
+                  insurance fund is the last line of defense for protecting our
+                  mango lenders.
+                </p>
+              </div>
 
-            <p className="text-white leading-relaxed py-4">
-              <span className="text-yellow-300">$MNGO</span> were only provided
-              to developers who helped to build out the protocol.
-            </p>
+              <div className="mt-6 lg:mt-0">
+              <h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
+                What is the{' '}
+                <GradientText>$MNGO</GradientText>{' '}
+                token?
+              </h2>
+                <p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
+                  We believe that substantial rewards to a strong developer
+                  community and liquidity incentives are the essential drivers for
+                  growth and therefore the foundation of the Mango DAO.
+                </p>
+                <p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
+                  Mango Governance tokens ($MNGO) will serve as the incentive for
+                  those who can proove their work is useful to the DAO.
+                </p>
+                <Button>Check out the whitepaper</Button>
+
+                <p className="text-white leading-relaxed py-4">
+                  <span className="text-mango-yellow">$MNGO</span> were only provided
+                  to developers who helped to build out the protocol.
+                </p>
+              </div>
+            </div>
           </div>
         </div>
+      </div>
+    </div>
+
 
         {/* Section 2 */}
         <div className="max-w-2xl mb-12 mx-auto text-center">
           <h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
             How it works.
           </h2>
-          <p className="mb-8 text-2xl text-gray-400">
+          <p className="mb-8 text-2xl text-white text-opacity-50">
             We take the view that token sales should be simple, transparent and
             minimize randomness and luck in the distribution.
           </p>
         </div>
         <section className="">
           <div className="grid grid-cols-3 gap-6 mb-6">
-            <div className="lg:col-span-1 md:col-span-3 sm:col-span-3 xs:col-span-3">
+            <div className="col-span-3 lg:col-span-1">
               <div className="bg-bkg-3 bg-feature-one bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
                 <div className="py-4 px-8 mt-3">
                   <div className="flex flex-col mb-8">
-                    <h2 className="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
+                    <h2 className="text-mango-yellow font-semibold text-xl tracking-wide mb-2">
                       Deposit your USDC contribution.
                     </h2>
                     <p className="text-white text-opacity-50 text-base">
@@ -97,21 +106,21 @@ const LandingContent = () => {
               </div>
             </div>
 
-            <div className="lg:col-span-2 md:col-span-3 sm:col-span-3 xs:col-span-3">
-              <div className="bg-bkg-3 bg-feature-two bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
+            <div className="col-span-3 lg:col-span-2">
+              <div className="bg-bkg-3 bg-feature-two bg-contain lg:bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
                 <div className="py-4 px-8 mt-3">
                   <div className="flex flex-col mb-8">
-                    <h2 className="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
+                    <h2 className="text-mango-yellow font-semibold text-xl tracking-wide mb-2">
                       48 hour participation period.
                     </h2>
                     <p className="text-white text-opacity-50 text-base">
                       The event will span over a 2 day period split into two
                       sections,{' '}
-                      <span className="text-secondary-1-light italic">
+                      <span className="text-mango-green italic">
                         Unrestricted
                       </span>{' '}
                       and{' '}
-                      <span className="text-secondary-2-light italic">
+                      <span className="text-mango-red italic">
                         Restricted
                       </span>
                       .
@@ -119,11 +128,11 @@ const LandingContent = () => {
                     <div className="flex flex-wrap overflow-hiddenm mt-8">
                       <div className="w-full overflow-hidden lg:w-1/2 pr-4">
                         <p>
-                          <span className="text-secondary-1-light italic">
+                          <span className="text-mango-green italic">
                             Unrestricted
                           </span>
                         </p>
-                        <p>
+                        <p className="text-white text-opacity-50">
                           During the unrestricted period users may deposit or
                           withdraw their USDC from the vault. During the
                           unrestricted period price can fluctuate.
@@ -132,11 +141,11 @@ const LandingContent = () => {
 
                       <div className="w-full overflow-hidden lg:w-1/2">
                         <p>
-                          <span className="text-secondary-2-light italic">
+                          <span className="text-mango-red italic">
                             Restricted
                           </span>
                         </p>
-                        <p>
+                        <p className="text-white text-opacity-50">
                           After 24 hours deposits will be restricted and only
                           withdrawals allowed. During the restricted period
                           price can only goin down.
@@ -150,11 +159,11 @@ const LandingContent = () => {
           </div>
 
           <div className="grid grid-cols-3 gap-6">
-            <div className="lg:col-span-2 md:col-span-3 sm:col-span-3 xs:col-span-3">
-              <div className="bg-bkg-3 bg-feature-three bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
+            <div className="col-span-3 lg:col-span-2">
+              <div className="bg-bkg-3 bg-feature-three bg-contain lg:bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
                 <div className="py-4 px-8 mt-3">
                   <div className="flex flex-col mb-8">
-                    <h2 className="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
+                    <h2 className="text-mango-yellow font-semibold text-xl tracking-wide mb-2">
                       Why does it work this way?
                     </h2>
                     <p className="text-white text-opacity-50 text-base mb-4">
@@ -168,19 +177,19 @@ const LandingContent = () => {
                       value randomly to those, who are most willing to do the
                       arbitrary, worthless tasks to get the free value.
                     </p>
-                    <p className="text-white font-bold leading-relaxed">
+                    {/*<p className="text-white font-bold leading-relaxed">
                       We believe all &quot;excess&quot; value should be captured
                       by token holders in the DAO.
-                    </p>
+                    </p>*/}
                   </div>
                 </div>
               </div>
             </div>
-            <div className="lg:col-span-1 md:col-span-3 sm:col-span-3 xs:col-span-3">
+            <div className="col-span-3 lg:col-span-1">
               <div className="bg-bkg-3 bg-feature-four bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
                 <div className="py-4 px-8 mt-3">
                   <div className="flex flex-col mb-8">
-                    <h2 className="text-yellow-300 font-semibold text-xl tracking-wide mb-2">
+                    <h2 className="text-mango-yellow font-semibold text-xl tracking-wide mb-2">
                       MNGO unlocked and distributed.
                     </h2>
                     <p className="text-white text-opacity-50 text-base">
diff --git a/components/NavBarBeta.tsx b/components/NavBarBeta.tsx
index 60a6622..a796cf7 100644
--- a/components/NavBarBeta.tsx
+++ b/components/NavBarBeta.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import MangoPill from '../components/MangoPill'
-import MangoSale from '../components/MangoSale'
+//import MangoSale from '../components/MangoSale'
 import Button from './Button'
 
 const NavBarBeta = () => {
@@ -43,7 +43,7 @@ const NavBarBeta = () => {
   return (
     <div className="">
       {/* Main Menu */}
-      <div className="px-10 py-8 bg-transparent">
+      <div className="lg:px-10 lg:py-8 xs:px-6 xs:py-1 bg-transparent">
         <div className="max-w-7xl mx-auto px-4 sm:px-6">
           <div className="flex justify-between items-center py-6 md:justify-start md:space-x-10">
             <div className="flex justify-start lg:w-0 lg:flex-1">
@@ -51,7 +51,7 @@ const NavBarBeta = () => {
                 <span className="sr-only">Mango</span>
                 <img
                   className="h-8"
-                  src="img/logoMango.png"
+                  src="img/logo_mango.svg"
                   alt=""
                   width="auto"
                 />
@@ -60,7 +60,7 @@ const NavBarBeta = () => {
             <div className="-mr-2 -my-2 md:hidden">
               <button
                 type="button"
-                className=" rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-yellow-300"
+                className=" rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"
                 onClick={toggleMobileMenu}
               >
                 <span className="sr-only">Open menu</span>
@@ -85,7 +85,7 @@ const NavBarBeta = () => {
               <div className="relative">
                 <button
                   type="button"
-                  className="text-gray-500 group  rounded-md p-1 px-2 inline-flex items-center text-base font-medium hover:bg-bkg-3 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-yellow-300"
+                  className="text-gray-500 group rounded-md p-1 px-2 inline-flex items-center text-base font-medium hover:bg-bkg-3 hover:text-white focus:outline-none "
                   onClick={toggleProducts}
                 >
                   <span>Products</span>
@@ -205,8 +205,8 @@ const NavBarBeta = () => {
                             Decentralized Lending
                           </p>
                           <p className="mt-1 text-sm text-gray-500">
-                            Earn interest on deposit, a take out collateralized
-                            loans against assets
+                            Earn interest on deposits and take out
+                            collateralized loans against assets
                           </p>
                         </div>
                       </a>
@@ -250,7 +250,7 @@ const NavBarBeta = () => {
 
               <a
                 href="https://docs.mango.markets/"
-                className="text-base font-medium text-gray-500 p-1 px-2 hover:bg-bkg-3 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-yellow-300 rounded-md"
+                className="text-base font-medium text-gray-500 p-1 px-2 hover:bg-bkg-3 hover:text-white focus:outline-none rounded-md"
               >
                 Docs
               </a>
@@ -258,7 +258,7 @@ const NavBarBeta = () => {
               <div className="relative">
                 <button
                   type="button"
-                  className="text-gray-500 group rounded-md p-1 px-2 inline-flex items-center text-base font-medium hover:bg-bkg-3 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-yellow-300"
+                  className="text-gray-500 group rounded-md p-1 px-2 inline-flex items-center text-base font-medium hover:bg-bkg-3 hover:text-white focus:outline-none"
                   onClick={toggleSupport}
                 >
                   <span>Support</span>
@@ -338,7 +338,7 @@ const NavBarBeta = () => {
                             Twitter
                           </p>
                           <p className="mt-1 text-sm text-gray-500">
-                            See what we&apos;re up to quicky, and meme with us.
+                            Quickly see what we're up to and meme with us.
                           </p>
                         </div>
                       </a>
@@ -382,19 +382,33 @@ const NavBarBeta = () => {
                   </div>
                 </div>
               </div>
-              <a
+
+              {/*
+               <a
                 href="https://mango-token-sale.netlify.app"
-                className="text-base font-medium text-gray-500 p-1 px-2 hover:bg-bkg-3 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-yellow-300 rounded-md"
+                className="text-base font-medium text-gray-500 p-1 px-2 hover:bg-th-fgd-4 focus:outline-none rounded-md"
+              >             
+              */}
+              <a
+                href="#"
+                onClick={doNothing}
+                className="disabled text-base font-medium text-gray-500 p-1 px-2 opacity-50"
               >
                 <div className="flex flex-row">
                   <p>Mango DAO</p>
-                  <MangoSale />
+                  <MangoPill />
                 </div>
               </a>
             </nav>
             <div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
               <div>
-                <Button>Start trading</Button>
+                <a
+                  rel="noreferrer"
+                  target="_blank"
+                  href="https://trade.mango.markets"
+                >
+                  <Button>Start trading</Button>
+                </a>
               </div>
             </div>
           </div>
@@ -405,15 +419,15 @@ const NavBarBeta = () => {
         <div
           className={`${
             !mobileMenuVisible && 'hidden'
-          } absolute top-0 inset-x-0 p-2 transition transform origin-top-right z-10`}
+          } absolute top-1 inset-x-0 px-4 py-2 transition transform origin-top-right z-50`}
         >
-          <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-bkg-2">
+          <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-th-bkg-3">
             <div className="pt-5 pb-6 px-5">
               <div className="flex items-center justify-between">
                 <div>
                   <img
-                    className="h-8"
-                    src="img/logoMango.png"
+                    className="h-8 ml-1"
+                    src="img/logo_mango.svg"
                     alt=""
                     width="auto"
                   />
@@ -421,7 +435,7 @@ const NavBarBeta = () => {
                 <div className="-mr-2">
                   <button
                     type="button"
-                    className="bg-bkg-2 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-th-bkg-4 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-yellow-300"
+                    className="bg-th-bkg-3 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-th-bkg-4 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-yellow-300"
                     onClick={closeMenu}
                   >
                     <span className="sr-only">Close menu</span>
diff --git a/pages/index.tsx b/pages/index.tsx
index 79cf38c..6ae4598 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,12 +10,14 @@ const Index = () => {
   const { endIdo } = usePool()
 
   return (
-    <div className={`bg-bkg-1 text-fgd-1 transition-all`}>
+    <div className={`bg-bkg-1 text-white transition-all overflow-hidden`}>
+      <div className="w-screen h-2 bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green"></div>
       <NavBarBeta />
       <Notifications />
       {endIdo?.isAfter() && <ContributionPage />}
       {endIdo?.isBefore() && <RedeemPage />}
       <FooterSection />
+      <div className="w-screen h-2 bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green"></div>
     </div>
   )
 }
diff --git a/public/img/feature3.png b/public/img/feature3.png
index c9e71cb..0229a79 100644
Binary files a/public/img/feature3.png and b/public/img/feature3.png differ
diff --git a/public/img/logo_mango.svg b/public/img/logo_mango.svg
new file mode 100644
index 0000000..48c6e28
--- /dev/null
+++ b/public/img/logo_mango.svg
@@ -0,0 +1,56 @@
+<svg width="2963" height="864" viewBox="0 0 2963 864" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1274.13 488.608C1277.75 495.431 1281.05 502.575 1284.04 510.039C1287.24 517.289 1290.33 524.646 1293.31 532.11C1296.29 524.433 1299.39 516.863 1302.58 509.399C1305.78 501.935 1309.19 494.792 1312.81 487.968L1449.66 231.754C1451.37 228.556 1453.07 225.997 1454.78 224.077C1456.69 222.158 1458.72 220.772 1460.85 219.919C1463.2 219.066 1465.75 218.533 1468.52 218.32C1471.3 218.107 1474.6 218 1478.44 218H1543.34V680.528H1467.57V381.772C1467.57 376.228 1467.67 370.15 1467.89 363.54C1468.31 356.929 1468.84 350.212 1469.48 343.388L1329.76 605.679C1326.56 611.65 1322.41 616.341 1317.29 619.753C1312.17 622.952 1306.21 624.551 1299.39 624.551H1287.56C1280.73 624.551 1274.77 622.952 1269.65 619.753C1264.53 616.341 1260.38 611.65 1257.18 605.679L1115.54 342.428C1116.39 349.465 1116.92 356.396 1117.14 363.22C1117.56 369.83 1117.78 376.014 1117.78 381.772V680.528H1042V218H1106.91C1110.74 218 1114.05 218.107 1116.82 218.32C1119.59 218.533 1122.04 219.066 1124.17 219.919C1126.52 220.772 1128.65 222.158 1130.57 224.077C1132.48 225.997 1134.3 228.556 1136 231.754L1274.13 488.608Z" fill="white"/>
+<path d="M1889.09 680.528H1853.6C1846.14 680.528 1840.28 679.462 1836.02 677.329C1831.76 674.984 1828.56 670.399 1826.43 663.575L1819.39 640.225C1811.08 647.688 1802.87 654.299 1794.77 660.056C1786.89 665.601 1778.68 670.292 1770.15 674.131C1761.63 677.969 1752.57 680.848 1742.98 682.767C1733.38 684.686 1722.73 685.646 1711 685.646C1697.15 685.646 1684.36 683.833 1672.63 680.208C1660.91 676.37 1650.79 670.719 1642.26 663.255C1633.95 655.792 1627.45 646.515 1622.76 635.427C1618.07 624.338 1615.72 611.437 1615.72 596.723C1615.72 584.355 1618.92 572.2 1625.31 560.258C1631.92 548.103 1642.79 537.227 1657.93 527.631C1673.06 517.822 1693.2 509.719 1718.36 503.322C1743.51 496.924 1774.74 493.299 1812.04 492.446V473.254C1812.04 451.29 1807.35 435.083 1797.97 424.634C1788.8 413.972 1775.38 408.641 1757.68 408.641C1744.89 408.641 1734.24 410.134 1725.71 413.119C1717.18 416.104 1709.72 419.516 1703.33 423.355C1697.15 426.98 1691.39 430.285 1686.06 433.271C1680.73 436.256 1674.87 437.749 1668.48 437.749C1663.15 437.749 1658.57 436.363 1654.73 433.59C1650.89 430.818 1647.8 427.406 1645.46 423.355L1631.07 398.085C1668.8 363.54 1714.31 346.267 1767.6 346.267C1786.78 346.267 1803.83 349.465 1818.75 355.863C1833.89 362.047 1846.68 370.79 1857.12 382.092C1867.57 393.181 1875.45 406.508 1880.78 422.075C1886.32 437.642 1889.09 454.702 1889.09 473.254V680.528ZM1735.62 631.268C1743.72 631.268 1751.18 630.522 1758 629.029C1764.82 627.537 1771.22 625.298 1777.19 622.312C1783.37 619.327 1789.23 615.702 1794.77 611.437C1800.53 606.958 1806.28 601.734 1812.04 595.763V540.426C1789.02 541.492 1769.73 543.518 1754.17 546.504C1738.82 549.276 1726.46 552.901 1717.08 557.379C1707.7 561.857 1700.98 567.082 1696.93 573.053C1693.1 579.023 1691.18 585.527 1691.18 592.564C1691.18 606.425 1695.23 616.341 1703.33 622.312C1711.64 628.283 1722.41 631.268 1735.62 631.268Z" fill="white"/>
+<path d="M1966.75 680.528V352.344H2015.03C2025.26 352.344 2031.98 357.142 2035.17 366.738L2040.61 392.648C2047.22 385.824 2054.14 379.64 2061.39 374.095C2068.85 368.551 2076.63 363.753 2084.73 359.701C2093.04 355.65 2101.89 352.557 2111.27 350.425C2120.65 348.293 2130.88 347.226 2141.96 347.226C2159.87 347.226 2175.75 350.318 2189.6 356.503C2203.46 362.473 2214.97 371.003 2224.14 382.092C2233.51 392.967 2240.55 406.082 2245.24 421.436C2250.14 436.576 2252.59 453.316 2252.59 471.655V680.528H2173.62V471.655C2173.62 451.61 2168.93 436.149 2159.55 425.274C2150.38 414.185 2136.53 408.641 2117.98 408.641C2104.34 408.641 2091.55 411.733 2079.62 417.917C2067.68 424.101 2056.38 432.524 2045.72 443.187V680.528H1966.75Z" fill="white"/>
+<path d="M2443.7 346.587C2457.77 346.587 2470.99 348.079 2483.35 351.065C2495.71 353.837 2507.01 357.995 2517.24 363.54H2611.56V392.967C2611.56 397.872 2610.28 401.71 2607.73 404.483C2605.17 407.255 2600.8 409.174 2594.62 410.24L2565.2 415.678C2567.33 421.222 2568.93 427.087 2570 433.271C2571.28 439.455 2571.92 445.959 2571.92 452.783C2571.92 468.989 2568.61 483.703 2562 496.924C2555.61 509.932 2546.66 521.021 2535.15 530.19C2523.85 539.36 2510.31 546.504 2494.54 551.621C2478.98 556.526 2462.03 558.978 2443.7 558.978C2431.34 558.978 2419.3 557.806 2407.57 555.46C2397.34 561.644 2392.23 568.574 2392.23 576.251C2392.23 582.862 2395.21 587.766 2401.18 590.965C2407.36 593.951 2415.35 596.083 2425.16 597.362C2435.18 598.642 2446.47 599.495 2459.05 599.921C2471.63 600.135 2484.52 600.774 2497.74 601.841C2510.95 602.907 2523.85 604.826 2536.43 607.598C2549 610.157 2560.19 614.315 2570 620.073C2580.02 625.831 2588.01 633.721 2593.98 643.743C2600.16 653.552 2603.25 666.241 2603.25 681.807C2603.25 696.308 2599.63 710.382 2592.38 724.03C2585.34 737.678 2575.01 749.833 2561.36 760.495C2547.94 771.157 2531.42 779.687 2511.81 786.084C2492.2 792.695 2469.81 796 2444.66 796C2419.72 796 2398.09 793.548 2379.76 788.643C2361.42 783.952 2346.18 777.554 2334.03 769.451C2322.1 761.561 2313.14 752.391 2307.18 741.942C2301.21 731.493 2298.22 720.618 2298.22 709.316C2298.22 693.962 2302.91 681.061 2312.29 670.612C2321.67 660.163 2334.67 651.847 2351.3 645.662C2343.2 641.184 2336.7 635.213 2331.8 627.75C2326.89 620.286 2324.44 610.584 2324.44 598.642C2324.44 593.737 2325.29 588.726 2327 583.608C2328.71 578.277 2331.26 573.053 2334.67 567.935C2338.3 562.817 2342.77 558.019 2348.1 553.541C2353.43 548.849 2359.72 544.691 2366.97 541.066C2350.34 532.11 2337.23 520.168 2327.64 505.241C2318.26 490.314 2313.57 472.828 2313.57 452.783C2313.57 436.576 2316.77 421.969 2323.16 408.961C2329.77 395.74 2338.83 384.544 2350.34 375.375C2362.06 365.992 2375.81 358.848 2391.59 353.944C2407.57 349.039 2424.94 346.587 2443.7 346.587ZM2530.35 695.242C2530.35 688.845 2528.43 683.62 2524.6 679.568C2520.76 675.517 2515.54 672.425 2508.93 670.292C2502.32 667.947 2494.54 666.241 2485.59 665.174C2476.85 664.108 2467.47 663.362 2457.45 662.935C2447.65 662.296 2437.41 661.762 2426.76 661.336C2416.31 660.696 2406.19 659.737 2396.38 658.457C2387.43 663.362 2380.18 669.226 2374.64 676.05C2369.31 682.66 2366.65 690.337 2366.65 699.08C2366.65 704.838 2368.03 710.169 2370.8 715.074C2373.79 720.191 2378.37 724.563 2384.55 728.188C2390.95 731.813 2399.15 734.586 2409.17 736.505C2419.19 738.637 2431.45 739.703 2445.94 739.703C2460.65 739.703 2473.33 738.531 2483.99 736.185C2494.65 734.052 2503.39 730.96 2510.21 726.909C2517.24 723.07 2522.36 718.379 2525.55 712.834C2528.75 707.503 2530.35 701.639 2530.35 695.242ZM2443.7 508.439C2453.51 508.439 2462.03 507.16 2469.28 504.601C2476.53 501.829 2482.5 498.097 2487.19 493.406C2492.09 488.714 2495.71 483.063 2498.06 476.453C2500.62 469.842 2501.89 462.592 2501.89 454.702C2501.89 438.495 2496.99 425.7 2487.19 416.318C2477.59 406.722 2463.1 401.924 2443.7 401.924C2424.31 401.924 2409.7 406.722 2399.9 416.318C2390.31 425.7 2385.51 438.495 2385.51 454.702C2385.51 462.379 2386.68 469.522 2389.03 476.133C2391.59 482.743 2395.21 488.501 2399.9 493.406C2404.8 498.097 2410.88 501.829 2418.12 504.601C2425.58 507.16 2434.11 508.439 2443.7 508.439Z" fill="white"/>
+<path d="M2801.21 347.226C2825.73 347.226 2847.9 351.171 2867.72 359.061C2887.76 366.952 2904.81 378.147 2918.88 392.648C2932.95 407.148 2943.82 424.847 2951.49 445.745C2959.16 466.643 2963 489.994 2963 515.796C2963 541.812 2959.16 565.269 2951.49 586.167C2943.82 607.065 2932.95 624.871 2918.88 639.585C2904.81 654.299 2887.76 665.601 2867.72 673.491C2847.9 681.381 2825.73 685.326 2801.21 685.326C2776.7 685.326 2754.43 681.381 2734.39 673.491C2714.35 665.601 2697.19 654.299 2682.91 639.585C2668.85 624.871 2657.87 607.065 2649.98 586.167C2642.31 565.269 2638.47 541.812 2638.47 515.796C2638.47 489.994 2642.31 466.643 2649.98 445.745C2657.87 424.847 2668.85 407.148 2682.91 392.648C2697.19 378.147 2714.35 366.952 2734.39 359.061C2754.43 351.171 2776.7 347.226 2801.21 347.226ZM2801.21 624.551C2828.5 624.551 2848.64 615.382 2861.64 597.043C2874.86 578.704 2881.47 551.835 2881.47 516.436C2881.47 481.037 2874.86 454.062 2861.64 435.51C2848.64 416.957 2828.5 407.681 2801.21 407.681C2773.5 407.681 2753.04 417.064 2739.83 435.83C2726.61 454.382 2720 481.251 2720 516.436C2720 551.621 2726.61 578.49 2739.83 597.043C2753.04 615.382 2773.5 624.551 2801.21 624.551Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M337.746 201.289C337.751 201.283 337.755 201.277 337.76 201.27C374.05 219.89 413.76 226.27 451.76 226.16C473.84 246.44 492.21 270.26 509.47 294.72C516.627 304.937 523.082 315.628 528.79 326.72C541.989 352.136 551.696 379.028 561.518 406.237C564.398 414.217 567.289 422.225 570.28 430.23C571.217 433.656 572.196 437.084 573.217 440.514L573.27 440.5C588.44 492.53 610.59 548.11 640.27 594L640.241 594.012C650.058 609.087 661.055 623.361 673.13 636.7C675.506 639.27 677.936 641.816 680.369 644.365L680.37 644.366L680.371 644.367L680.374 644.37C691.742 656.28 703.19 668.274 709.68 683.28C717.76 701.98 717.14 723.49 712.28 743.28C689.35 836.56 599.52 861.07 513.67 863.33L513.711 863.223C481.522 863.864 449.556 861.465 421.21 858.56C421.21 858.56 284.5 844.41 168.62 759.69L164.88 756.91C164.88 756.91 164.88 756.91 164.881 756.909C151.355 746.83 138.451 735.941 126.24 724.3C93.76 693.3 64.86 658.14 42.76 619.54C42.9078 619.392 43.0553 619.243 43.2026 619.095C40.587 614.388 38.0795 609.634 35.68 604.83C14.3 562.04 1.27 515.46 0.679999 465.95C-0.325631 382.873 28.0953 297.795 82.1176 236.113C82.0984 236.062 82.0792 236.011 82.06 235.96C111.31 203.92 147.87 178.75 191.15 164.42C218.283 155.354 246.768 151.001 275.37 151.55C292.775 171.987 313.954 188.874 337.746 201.289ZM271.153 744.85C290.711 737.711 309.24 728.11 326.518 716.279C309.131 728.03 290.575 737.637 271.153 744.85Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M621.498 133.628C621.512 133.628 621.526 133.628 621.54 133.627L622.72 132.867C470.3 -127.133 271 77.5671 271 77.5671L271.285 78.0685C271.273 78.0714 271.262 78.0742 271.25 78.0771C385.856 279.01 603.664 145.087 621.498 133.628Z" fill="url(#paint1_linear)"/>
+<path d="M432.56 581.44C390.56 681.84 309.92 748.32 212.22 758.39C210.12 758.67 183.38 760.78 168.62 759.69C284.5 844.41 421.21 858.56 421.21 858.56C450.48 861.56 483.61 864.02 516.86 863.15C528.57 832.58 535.16 797.58 533.27 757.87C528.88 665.64 582.36 618.29 640.27 594C610.59 548.11 588.44 492.53 573.27 440.5C528.05 452.53 470.62 490.36 432.56 581.44Z" fill="url(#paint2_linear)"/>
+<path d="M531.44 757.22C533.34 796.93 525.38 832.76 513.67 863.33C599.52 861.07 689.35 836.56 712.28 743.28C717.14 723.49 717.76 701.98 709.68 683.28C701.8 665.06 686.61 651.28 673.13 636.7C660.519 622.769 649.084 607.818 638.94 592C581.08 616.3 527.05 665 531.44 757.22Z" fill="url(#paint3_linear)"/>
+<path d="M570.28 430.23C557.09 394.93 545.86 359.59 528.79 326.72C523.082 315.628 516.627 304.937 509.47 294.72C492.21 270.26 473.84 246.44 451.76 226.16C413.76 226.27 374.05 219.89 337.76 201.27C301 253.41 258.94 341.86 297.44 442.82C354.29 591.92 238.92 693.82 164.88 756.91L168.62 759.69C182.502 760.773 196.455 760.573 210.3 759.09C307.99 749.01 393.3 680.93 435.3 580.54C473.37 489.46 528.75 454.86 573.91 442.82C572.637 438.62 571.427 434.423 570.28 430.23Z" fill="url(#paint4_linear)"/>
+<path d="M86.09 231.67C29.49 293.67 -0.350001 380.86 0.679999 465.95C1.27 515.46 14.3 562.04 35.68 604.83C38.887 611.25 42.287 617.583 45.88 623.83C164.87 504.39 121.88 326.42 86.09 231.67Z" fill="url(#paint5_linear)"/>
+<path d="M299.44 442.82C260.94 341.82 302.06 253.95 338.77 201.82C314.561 189.357 293.024 172.28 275.37 151.55C246.768 151.001 218.283 155.354 191.15 164.42C147.87 178.75 111.31 203.92 82.06 235.96C117.06 328.63 159.12 502.72 42.76 619.54C64.86 658.14 93.76 693.3 126.24 724.3C139.051 736.513 152.625 747.899 166.88 758.39C240.92 695.33 356.29 591.92 299.44 442.82Z" fill="url(#paint6_linear)"/>
+<path d="M443 94.13C523.57 125.92 580 134.53 620.91 133.3L622.09 132.54C469.67 -127.46 270.37 77.24 270.37 77.24L270.66 77.75C313.65 70.13 376.13 67.76 443 94.13Z" fill="url(#paint7_linear)"/>
+<path d="M444 92.33C377.17 66 314.33 67 270.62 77.75C385.23 278.69 603.05 144.75 620.87 133.3C579.93 134.53 524.57 124.12 444 92.33Z" fill="url(#paint8_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="-88.5" y1="273.5" x2="843.5" y2="832" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E54033"/>
+<stop offset="0.489583" stop-color="#FECA1A"/>
+<stop offset="1" stop-color="#AFD803"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="263632" y1="31154.5" x2="205286" y2="-28862.6" gradientUnits="userSpaceOnUse">
+<stop offset="0.15" stop-color="#6CBF00"/>
+<stop offset="1" stop-color="#AFD803"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="72.43" y1="766.73" x2="656.43" y2="624.73" gradientUnits="userSpaceOnUse">
+<stop offset="0.21" stop-color="#E54033"/>
+<stop offset="0.84" stop-color="#FECA1A"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="532.54" y1="727.34" x2="712.74" y2="728.69" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FECA1A"/>
+<stop offset="0.4" stop-color="#FECA1A"/>
+<stop offset="1" stop-color="#AFD803"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="124.65" y1="770.37" x2="494.1" y2="270.2" gradientUnits="userSpaceOnUse">
+<stop offset="0.16" stop-color="#E54033"/>
+<stop offset="0.84" stop-color="#FECA1A"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="70.85" y1="273.39" x2="54.49" y2="596.45" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FECA1A"/>
+<stop offset="0.76" stop-color="#E54033"/>
+</linearGradient>
+<linearGradient id="paint6_linear" x1="251.58" y1="189.5" x2="152.91" y2="564.17" gradientUnits="userSpaceOnUse">
+<stop offset="0.16" stop-color="#FECA1A"/>
+<stop offset="1" stop-color="#E54033"/>
+</linearGradient>
+<linearGradient id="paint7_linear" x1="289.8" y1="10.1199" x2="655.13" y2="144.78" gradientUnits="userSpaceOnUse">
+<stop offset="0.15" stop-color="#6CBF00"/>
+<stop offset="1" stop-color="#AFD803"/>
+</linearGradient>
+<linearGradient id="paint8_linear" x1="263631" y1="31154.2" x2="205285" y2="-28862.9" gradientUnits="userSpaceOnUse">
+<stop offset="0.15" stop-color="#6CBF00"/>
+<stop offset="1" stop-color="#AFD803"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/socials/discord.svg b/public/socials/discord.svg
new file mode 100644
index 0000000..863d77d
--- /dev/null
+++ b/public/socials/discord.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="20" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.7187 1.67497C21.9061 0.89249 19.9681 0.323786 17.9421 0C17.6932 0.41511 17.4025 0.973432 17.2021 1.4176C15.0482 1.11872 12.9142 1.11872 10.8 1.4176C10.5996 0.973432 10.3023 0.41511 10.0513 0C8.02293 0.323786 6.08271 0.894565 4.27023 1.67912C0.614418 6.77668 -0.376613 11.7477 0.118903 16.648C2.54363 18.3188 4.89347 19.3337 7.20367 19.9979C7.77407 19.2736 8.2828 18.5036 8.72106 17.692C7.88639 17.3993 7.08696 17.0382 6.33156 16.6189C6.53197 16.482 6.72798 16.3387 6.91738 16.1914C11.5246 18.1797 16.5304 18.1797 21.0826 16.1914C21.2741 16.3387 21.4701 16.482 21.6683 16.6189C20.9107 17.0402 20.1091 17.4014 19.2744 17.6941C19.7127 18.5036 20.2192 19.2757 20.7918 20C23.1042 19.3358 25.4563 18.3209 27.881 16.648C28.4624 10.9672 26.8878 6.04193 23.7187 1.67497ZM9.34871 13.6343C7.96567 13.6343 6.83149 12.4429 6.83149 10.9922C6.83149 9.54132 7.94144 8.34791 9.34871 8.34791C10.756 8.34791 11.8901 9.53924 11.8659 10.9922C11.8682 12.4429 10.756 13.6343 9.34871 13.6343ZM18.6512 13.6343C17.2682 13.6343 16.1339 12.4429 16.1339 10.9922C16.1339 9.54132 17.2439 8.34791 18.6512 8.34791C20.0584 8.34791 21.1926 9.53924 21.1684 10.9922C21.1684 12.4429 20.0584 13.6343 18.6512 13.6343Z" fill="#4F4C67"/>
+</svg>
diff --git a/public/socials/facebook-light.svg b/public/socials/facebook-light.svg
new file mode 100644
index 0000000..f251a50
--- /dev/null
+++ b/public/socials/facebook-light.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6347 20.7273V12.766H16.3581L16.7666 9.66245H13.6347V7.68128C13.6347 6.783 13.888 6.17084 15.2027 6.17084L16.8769 6.17017V3.39423C16.5874 3.35733 15.5935 3.27272 14.4368 3.27272C12.0215 3.27272 10.3679 4.7188 10.3679 7.3739V9.66245H7.63623V12.766H10.3679V20.7273H13.6347Z" fill="#F1F5FB"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="7" y="3" width="10" height="18">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6347 20.7273V12.766H16.3581L16.7666 9.66245H13.6347V7.68128C13.6347 6.783 13.888 6.17084 15.2027 6.17084L16.8769 6.17017V3.39423C16.5874 3.35733 15.5935 3.27272 14.4368 3.27272C12.0215 3.27272 10.3679 4.7188 10.3679 7.3739V9.66245H7.63623V12.766H10.3679V20.7273H13.6347Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</svg>
diff --git a/public/socials/facebook.svg b/public/socials/facebook.svg
new file mode 100644
index 0000000..fca7296
--- /dev/null
+++ b/public/socials/facebook.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6348 20.7273V12.766H16.3582L16.7668 9.66246H13.6348V7.68128C13.6348 6.78301 13.8881 6.17085 15.2029 6.17085L16.877 6.17017V3.39424C16.5875 3.35733 15.5937 3.27273 14.437 3.27273C12.0216 3.27273 10.368 4.71881 10.368 7.37391V9.66246H7.63635V12.766H10.368V20.7273H13.6348Z" fill="#67798E"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="7" y="3" width="10" height="18">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6348 20.7273V12.766H16.3582L16.7668 9.66246H13.6348V7.68128C13.6348 6.78301 13.8881 6.17085 15.2029 6.17085L16.877 6.17017V3.39424C16.5875 3.35733 15.5937 3.27273 14.437 3.27273C12.0216 3.27273 10.368 4.71881 10.368 7.37391V9.66246H7.63635V12.766H10.368V20.7273H13.6348Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</svg>
diff --git a/public/socials/github-light.svg b/public/socials/github-light.svg
new file mode 100644
index 0000000..136389c
--- /dev/null
+++ b/public/socials/github-light.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3C7.0275 3 3 7.13211 3 12.2284C3 16.3065 5.5785 19.7648 9.15375 20.9841C9.60375 21.0709 9.76875 20.7853 9.76875 20.5403C9.76875 20.3212 9.76125 19.7405 9.7575 18.9712C7.254 19.5277 6.726 17.7332 6.726 17.7332C6.3165 16.6681 5.72475 16.3832 5.72475 16.3832C4.9095 15.8111 5.78775 15.8229 5.78775 15.8229C6.6915 15.887 7.16625 16.7737 7.16625 16.7737C7.96875 18.1847 9.273 17.777 9.7875 17.5414C9.8685 16.9443 10.1003 16.5381 10.3575 16.3073C8.35875 16.0764 6.258 15.2829 6.258 11.7471C6.258 10.7399 6.60675 9.91659 7.18425 9.27095C7.083 9.03774 6.77925 8.0994 7.263 6.82846C7.263 6.82846 8.01675 6.58116 9.738 7.77462C10.458 7.56958 11.223 7.46785 11.988 7.46315C12.753 7.46785 13.518 7.56958 14.238 7.77462C15.948 6.58116 16.7017 6.82846 16.7017 6.82846C17.1855 8.0994 16.8818 9.03774 16.7917 9.27095C17.3655 9.91659 17.7142 10.7399 17.7142 11.7471C17.7142 15.2923 15.6105 16.0725 13.608 16.2995C13.923 16.5765 14.2155 17.1423 14.2155 18.0071C14.2155 19.242 14.2043 20.2344 14.2043 20.5341C14.2043 20.7759 14.3617 21.0647 14.823 20.9723C18.4237 19.7609 21 16.3002 21 12.2284C21 7.13211 16.9703 3 12 3Z" fill="#F1F5FB"/>
+</svg>
diff --git a/public/socials/github.svg b/public/socials/github.svg
new file mode 100644
index 0000000..6e60764
--- /dev/null
+++ b/public/socials/github.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="27" viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 0C6.26967 0 0 6.19744 0 13.8413C0 19.9568 4.011 25.145 9.57483 26.9755C10.2737 27.1035 10.5 26.6745 10.5 26.31V23.7332C6.60567 24.5706 5.79483 22.0999 5.79483 22.0999C5.15783 20.5001 4.23967 20.0745 4.23967 20.0745C2.96917 19.2152 4.3365 19.2336 4.3365 19.2336C5.74233 19.3305 6.482 20.6604 6.482 20.6604C7.73033 22.7758 9.75683 22.1645 10.556 21.8104C10.6808 20.9165 11.0437 20.3052 11.445 19.9603C8.33583 19.6085 5.06683 18.4216 5.06683 13.1192C5.06683 11.6071 5.614 10.3729 6.50883 9.404C6.36417 9.05451 5.88467 7.64616 6.64533 5.74067C6.64533 5.74067 7.82133 5.36926 10.4965 7.1594C11.613 6.85259 12.81 6.69918 14 6.69341C15.19 6.69918 16.3882 6.85259 17.507 7.1594C20.1798 5.36926 21.3535 5.74067 21.3535 5.74067C22.1153 7.64731 21.6358 9.05566 21.4912 9.404C22.3895 10.3729 22.932 11.6082 22.932 13.1192C22.932 18.4354 19.6572 19.6062 16.5398 19.9488C17.0415 20.3778 17.5 21.2198 17.5 22.5117V26.31C17.5 26.6779 17.724 27.1105 18.4345 26.9744C23.9937 25.1415 28 19.9545 28 13.8413C28 6.19744 21.7315 0 14 0Z" fill="#4F4C67"/>
+</svg>
diff --git a/public/socials/instagram-light.svg b/public/socials/instagram-light.svg
new file mode 100644
index 0000000..00f7e6a
--- /dev/null
+++ b/public/socials/instagram-light.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.60045 2.18182H16.399C19.3871 2.18182 21.8181 4.61282 21.818 7.60075V16.3993C21.818 19.3872 19.3871 21.8182 16.399 21.8182H7.60045C4.61252 21.8182 2.18164 19.3873 2.18164 16.3993V7.60075C2.18164 4.61282 4.61252 2.18182 7.60045 2.18182ZM16.3991 20.076C18.4265 20.076 20.0759 18.4266 20.0759 16.3993H20.0758V7.60075C20.0758 5.57349 18.4263 3.92406 16.399 3.92406H7.60045C5.57319 3.92406 3.92387 5.57349 3.92387 7.60075V16.3993C3.92387 18.4266 5.57319 20.0761 7.60045 20.076H16.3991ZM6.85696 12.0001C6.85696 9.16424 9.16401 6.85715 11.9998 6.85715C14.8356 6.85715 17.1427 9.16424 17.1427 12.0001C17.1427 14.8359 14.8356 17.1429 11.9998 17.1429C9.16401 17.1429 6.85696 14.8359 6.85696 12.0001ZM8.6278 12C8.6278 13.8593 10.1406 15.3719 11.9998 15.3719C13.8591 15.3719 15.3718 13.8593 15.3718 12C15.3718 10.1406 13.8592 8.62791 11.9998 8.62791C10.1404 8.62791 8.6278 10.1406 8.6278 12Z" fill="#F1F5FB"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.60045 2.18182H16.399C19.3871 2.18182 21.8181 4.61282 21.818 7.60075V16.3993C21.818 19.3872 19.3871 21.8182 16.399 21.8182H7.60045C4.61252 21.8182 2.18164 19.3873 2.18164 16.3993V7.60075C2.18164 4.61282 4.61252 2.18182 7.60045 2.18182ZM16.3991 20.076C18.4265 20.076 20.0759 18.4266 20.0759 16.3993H20.0758V7.60075C20.0758 5.57349 18.4263 3.92406 16.399 3.92406H7.60045C5.57319 3.92406 3.92387 5.57349 3.92387 7.60075V16.3993C3.92387 18.4266 5.57319 20.0761 7.60045 20.076H16.3991ZM6.85696 12.0001C6.85696 9.16424 9.16401 6.85715 11.9998 6.85715C14.8356 6.85715 17.1427 9.16424 17.1427 12.0001C17.1427 14.8359 14.8356 17.1429 11.9998 17.1429C9.16401 17.1429 6.85696 14.8359 6.85696 12.0001ZM8.6278 12C8.6278 13.8593 10.1406 15.3719 11.9998 15.3719C13.8591 15.3719 15.3718 13.8593 15.3718 12C15.3718 10.1406 13.8592 8.62791 11.9998 8.62791C10.1404 8.62791 8.6278 10.1406 8.6278 12Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</svg>
diff --git a/public/socials/instagram.svg b/public/socials/instagram.svg
new file mode 100644
index 0000000..ce9775e
--- /dev/null
+++ b/public/socials/instagram.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.60063 2.18182H16.3991C19.3873 2.18182 21.8183 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3873 21.8182 16.3991 21.8182H7.60063C4.6127 21.8182 2.18182 19.3873 2.18182 16.3993V7.60074C2.18182 4.61281 4.6127 2.18182 7.60063 2.18182ZM16.3993 20.0759C18.4266 20.0759 20.0761 18.4266 20.0761 16.3993H20.076V7.60074C20.076 5.57348 18.4265 3.92405 16.3991 3.92405H7.60063C5.57337 3.92405 3.92406 5.57348 3.92406 7.60074V16.3993C3.92406 18.4266 5.57337 20.0761 7.60063 20.0759H16.3993ZM6.85715 12.0001C6.85715 9.16424 9.16419 6.85714 12 6.85714C14.8358 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8358 17.1429 12 17.1429C9.16419 17.1429 6.85715 14.8359 6.85715 12.0001ZM8.62799 12C8.62799 13.8593 10.1407 15.3719 12 15.3719C13.8593 15.3719 15.372 13.8593 15.372 12C15.372 10.1406 13.8594 8.6279 12 8.6279C10.1406 8.6279 8.62799 10.1406 8.62799 12Z" fill="#67798E"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.60063 2.18182H16.3991C19.3873 2.18182 21.8183 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3873 21.8182 16.3991 21.8182H7.60063C4.6127 21.8182 2.18182 19.3873 2.18182 16.3993V7.60074C2.18182 4.61281 4.6127 2.18182 7.60063 2.18182ZM16.3993 20.0759C18.4266 20.0759 20.0761 18.4266 20.0761 16.3993H20.076V7.60074C20.076 5.57348 18.4265 3.92405 16.3991 3.92405H7.60063C5.57337 3.92405 3.92406 5.57348 3.92406 7.60074V16.3993C3.92406 18.4266 5.57337 20.0761 7.60063 20.0759H16.3993ZM6.85715 12.0001C6.85715 9.16424 9.16419 6.85714 12 6.85714C14.8358 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8358 17.1429 12 17.1429C9.16419 17.1429 6.85715 14.8359 6.85715 12.0001ZM8.62799 12C8.62799 13.8593 10.1407 15.3719 12 15.3719C13.8593 15.3719 15.372 13.8593 15.372 12C15.372 10.1406 13.8594 8.6279 12 8.6279C10.1406 8.6279 8.62799 10.1406 8.62799 12Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</svg>
diff --git a/public/socials/linkedin-light.svg b/public/socials/linkedin-light.svg
new file mode 100644
index 0000000..8ace6e8
--- /dev/null
+++ b/public/socials/linkedin-light.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2 3H4.8C3.81 3 3 3.81 3 4.8V19.2C3 20.19 3.81 21 4.8 21H19.2C20.19 21 21 20.19 21 19.2V4.8C21 3.81 20.19 3 19.2 3ZM8.4 18.3H5.7V10.2H8.4V18.3ZM7.05 8.67C6.15 8.67 5.43 7.95 5.43 7.05C5.43 6.15 6.15 5.43 7.05 5.43C7.95 5.43 8.67 6.15 8.67 7.05C8.67 7.95 7.95 8.67 7.05 8.67ZM18.3 18.3H15.6V13.53C15.6 12.81 14.97 12.18 14.25 12.18C13.53 12.18 12.9 12.81 12.9 13.53V18.3H10.2V10.2H12.9V11.28C13.35 10.56 14.34 10.02 15.15 10.02C16.86 10.02 18.3 11.46 18.3 13.17V18.3Z" fill="#F1F5FB"/>
+</svg>
diff --git a/public/socials/linkedin.svg b/public/socials/linkedin.svg
new file mode 100644
index 0000000..48dbdf4
--- /dev/null
+++ b/public/socials/linkedin.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2 3H4.8C3.81 3 3 3.81 3 4.8V19.2C3 20.19 3.81 21 4.8 21H19.2C20.19 21 21 20.19 21 19.2V4.8C21 3.81 20.19 3 19.2 3ZM8.4 18.3H5.7V10.2H8.4V18.3ZM7.05 8.67C6.15 8.67 5.43 7.95 5.43 7.05C5.43 6.15 6.15 5.43 7.05 5.43C7.95 5.43 8.67 6.15 8.67 7.05C8.67 7.95 7.95 8.67 7.05 8.67ZM18.3 18.3H15.6V13.53C15.6 12.81 14.97 12.18 14.25 12.18C13.53 12.18 12.9 12.81 12.9 13.53V18.3H10.2V10.2H12.9V11.28C13.35 10.56 14.34 10.02 15.15 10.02C16.86 10.02 18.3 11.46 18.3 13.17V18.3Z" fill="#67798E"/>
+</svg>
diff --git a/public/socials/twitter-light.svg b/public/socials/twitter-light.svg
new file mode 100644
index 0000000..2e26f04
--- /dev/null
+++ b/public/socials/twitter-light.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8184 6.14597C21.1358 6.44842 20.4034 6.65354 19.6339 6.74512C20.4196 6.2746 21.0211 5.5283 21.3061 4.64175C20.5691 5.07748 19.7556 5.39387 18.8887 5.56539C18.1946 4.82487 17.2072 4.36363 16.112 4.36363C14.011 4.36363 12.3075 6.06718 12.3075 8.16706C12.3075 8.46487 12.3411 8.75575 12.406 9.03391C9.24459 8.87512 6.44128 7.36048 4.56507 5.05894C4.2371 5.61984 4.05053 6.27342 4.05053 6.97109C4.05053 8.29106 4.72268 9.45572 5.74249 10.1371C5.11901 10.1163 4.53262 9.94475 4.01925 9.65966V9.70718C4.01925 11.5498 5.3311 13.0876 7.07056 13.4376C6.75186 13.5234 6.4158 13.5709 6.06813 13.5709C5.82246 13.5709 5.58489 13.5465 5.35195 13.5002C5.83634 15.0125 7.24092 16.1123 8.90507 16.1424C7.60365 17.1622 5.96268 17.7683 4.18034 17.7683C3.87325 17.7683 3.57077 17.7498 3.27295 17.7162C4.9568 18.7974 6.95586 19.4278 9.1044 19.4278C16.1028 19.4278 19.9283 13.6311 19.9283 8.60397L19.9155 8.11145C20.663 7.57833 21.3096 6.90851 21.8184 6.14597Z" fill="#F1F5FB"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="4" width="19" height="16">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8184 6.14597C21.1358 6.44842 20.4034 6.65354 19.6339 6.74512C20.4196 6.2746 21.0211 5.5283 21.3061 4.64175C20.5691 5.07748 19.7556 5.39387 18.8887 5.56539C18.1946 4.82487 17.2072 4.36363 16.112 4.36363C14.011 4.36363 12.3075 6.06718 12.3075 8.16706C12.3075 8.46487 12.3411 8.75575 12.406 9.03391C9.24459 8.87512 6.44128 7.36048 4.56507 5.05894C4.2371 5.61984 4.05053 6.27342 4.05053 6.97109C4.05053 8.29106 4.72268 9.45572 5.74249 10.1371C5.11901 10.1163 4.53262 9.94475 4.01925 9.65966V9.70718C4.01925 11.5498 5.3311 13.0876 7.07056 13.4376C6.75186 13.5234 6.4158 13.5709 6.06813 13.5709C5.82246 13.5709 5.58489 13.5465 5.35195 13.5002C5.83634 15.0125 7.24092 16.1123 8.90507 16.1424C7.60365 17.1622 5.96268 17.7683 4.18034 17.7683C3.87325 17.7683 3.57077 17.7498 3.27295 17.7162C4.9568 18.7974 6.95586 19.4278 9.1044 19.4278C16.1028 19.4278 19.9283 13.6311 19.9283 8.60397L19.9155 8.11145C20.663 7.57833 21.3096 6.90851 21.8184 6.14597Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</svg>
diff --git a/public/socials/twitter.svg b/public/socials/twitter.svg
new file mode 100644
index 0000000..5764366
--- /dev/null
+++ b/public/socials/twitter.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.78874 23C5.55374 23 2.53817 22.0591 0 20.4356C2.15499 20.5751 5.95807 20.2411 8.32358 17.9848C4.76508 17.8215 3.16026 15.0923 2.95094 13.926C3.25329 14.0426 4.6953 14.1826 5.50934 13.856C1.4159 12.8296 0.787928 9.23732 0.927477 8.14097C1.695 8.67749 2.99745 8.8641 3.50913 8.81744C-0.305207 6.08823 1.06703 1.98276 1.74151 1.09635C4.47882 4.88867 8.5812 7.01857 13.6564 7.13704C13.5607 6.71736 13.5102 6.28042 13.5102 5.83164C13.5102 2.61092 16.1134 0 19.3247 0C21.0025 0 22.5144 0.712754 23.5757 1.85284C24.6969 1.59011 26.3843 0.975068 27.2092 0.443205C26.7934 1.93611 25.4989 3.18149 24.7159 3.64308C24.7224 3.65878 24.7095 3.62731 24.7159 3.64308C25.4037 3.53904 27.2648 3.18137 28 2.68256C27.6364 3.52125 26.264 4.91573 25.1377 5.69642C25.3473 14.9381 18.2765 23 8.78874 23Z" fill="#4F4C67"/>
+</svg>