diff --git a/app/components/NewNavigation.tsx b/app/components/NewNavigation.tsx
index 85854541..a5bb1e77 100644
--- a/app/components/NewNavigation.tsx
+++ b/app/components/NewNavigation.tsx
@@ -5,7 +5,6 @@ import { Logo } from "./new-landing/misc/Logo";
 import {
   ChevronDownIcon,
   ExternalIcon,
-  HamburgerIcon,
   DiscordIcon,
   TwitterIcon,
   TwitchIcon,
@@ -15,6 +14,7 @@ import { twMerge } from "tailwind-merge";
 import Button from "./new-landing/Button";
 import { Link } from "@remix-run/react";
 import { SOCIAL } from "./new-landing/misc/const";
+import { AnimatePresence, motion } from "framer-motion";
 
 type DropDownItems = {
   label: string;
@@ -141,17 +141,13 @@ const NewNavigation = () => {
     "bg-transparent h-9 w-9 justify-center hover:bg-new-night-100/5  text-new-night-100 flex cursor-pointer items-center rounded-md transition-colors ";
   const MOBILE_ITEM_CLASS =
     "hover:bg-new-night-100/10 h-10 w-full cursor-pointer rounded-lg px-4 text-start font-bold text-white transition-colors";
+  const GENERIC_HAMBURGER_LINE = `h-[3px] w-5 my-[2px] rounded-full bg-new-night-100 transition ease transform duration-300`;
 
   const [openHamburger, setOpenHamburger] = useState(false);
 
   return (
-    <div
-      className={twMerge(
-        "justify-centerp-0 fixed top-0 left-1/2 z-40 mx-auto flex max-h-screen w-screen max-w-9xl -translate-x-1/2 flex-col items-center lg:p-6",
-        openHamburger && "fixed h-screen max-h-screen lg:absolute lg:h-auto"
-      )}
-    >
-      <div className="relative flex h-16 w-full items-center justify-between border-white/5 bg-new-night-1200/25 px-6 backdrop-blur-lg md:px-4 lg:h-20 lg:rounded-2xl lg:border lg:px-6">
+    <div className="justify-centerp-0 fixed top-0 left-1/2 z-40 mx-auto flex max-h-screen w-screen max-w-9xl -translate-x-1/2 flex-col items-center lg:p-6">
+      <div className="relative z-[900] flex h-16 w-full items-center justify-between border-white/5 bg-new-night-1200/25 px-6 backdrop-blur-lg md:px-4 lg:h-20 lg:rounded-2xl lg:border lg:px-6">
         <div className="flex items-center gap-0 sm:gap-9">
           <Link to="/">
             <Logo className="w-[148px] xl:w-[160px]" />
@@ -238,83 +234,106 @@ const NewNavigation = () => {
           <Button color="ruby">Start Playing</Button>
         </div>
         <button
-          className="flex h-11 w-11 cursor-pointer items-center justify-center rounded-lg bg-new-night-1200/20 lg:hidden"
+          className="group flex h-11 w-11 cursor-pointer flex-col items-center justify-center rounded-lg bg-new-night-1200/20 lg:hidden"
           onClick={() => setOpenHamburger(!openHamburger)}
         >
-          <HamburgerIcon className="w-6" />
+          <div
+            className={`${GENERIC_HAMBURGER_LINE} ${
+              !openHamburger && "translate-y-[7px] rotate-45"
+            }`}
+          />
+          <div
+            className={`${GENERIC_HAMBURGER_LINE} ${
+              !openHamburger && "opacity-0"
+            }`}
+          />
+          <div
+            className={`${GENERIC_HAMBURGER_LINE} ${
+              !openHamburger && "-translate-y-[7px] -rotate-45"
+            }`}
+          />
         </button>
       </div>
-      <div
-        className={twMerge(
-          "flex h-full w-full flex-col bg-new-night-1200/25 py-6  backdrop-blur-lg lg:hidden",
-          !openHamburger && "hidden "
+      <AnimatePresence>
+        {!openHamburger && (
+          <motion.div
+            initial={{ opacity: 0, y: -100 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -100 }}
+            transition={{
+              type: "linear",
+              duration: 0.3,
+              ease: "easeInOut",
+            }}
+            className="z-[800] flex h-[calc(100vh-64px)] w-full flex-col bg-new-night-1200/25 py-6  backdrop-blur-lg lg:hidden"
+          >
+            <div className=" flex-1 space-y-6 overflow-hidden px-3 pb-3 sm:px-8">
+              <div className="max-h-full w-full overflow-scroll">
+                {dropdownItems.map((item, index) => (
+                  <>
+                    {item.items ? (
+                      <RA.Root
+                        type="single"
+                        key={index}
+                        defaultValue="item-1"
+                        collapsible
+                      >
+                        <RA.Item value={item.label}>
+                          <RA.Header className={MOBILE_ITEM_CLASS}>
+                            <RA.Trigger className="group flex h-full w-full items-center justify-between">
+                              {item.label}
+                              <ChevronDownIcon className="w-4 text-new-night-400 transition-transform group-data-[state=open]:-rotate-180" />
+                            </RA.Trigger>
+                          </RA.Header>
+                          <RA.Content className="space-y-1 overflow-hidden pt-2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
+                            {item.items.map((item, index) => (
+                              <div
+                                key={index}
+                                className={twMerge(
+                                  MOBILE_ITEM_CLASS,
+                                  "flex items-center gap-2 font-medium text-new-night-100/80"
+                                )}
+                              >
+                                {item.label}
+                                {item.type === "external" && (
+                                  <ExternalIcon className="w-4 text-new-night-400" />
+                                )}
+                              </div>
+                            ))}
+                          </RA.Content>
+                        </RA.Item>
+                      </RA.Root>
+                    ) : (
+                      <button className={MOBILE_ITEM_CLASS} key={index}>
+                        {item.label}
+                      </button>
+                    )}
+                  </>
+                ))}
+              </div>
+            </div>
+            <div className="space-y-2 border-t border-white/5 p-6 pb-0 sm:p-8">
+              <Button color="ruby">Start Building</Button>
+              <Button color="ruby">Start Playing</Button>
+              <Button color="honey">Read Litepaper</Button>
+              <div className="flex items-center gap-4 pt-2 text-new-night-100">
+                <a href={SOCIAL.DISCORD} target="_blank" rel="noreferrer">
+                  <DiscordIcon className="w-6" />
+                </a>
+                <a href={SOCIAL.TWITTER} target="_blank" rel="noreferrer">
+                  <TwitterIcon className="w-6" />
+                </a>
+                <a href={SOCIAL.YOUTUBE} target="_blank" rel="noreferrer">
+                  <YoutubeIcon className="w-6" />
+                </a>
+                <a href={SOCIAL.TWITCH} target="_blank" rel="noreferrer">
+                  <TwitchIcon className="w-6" />
+                </a>
+              </div>
+            </div>
+          </motion.div>
         )}
-      >
-        <div className=" flex-1 space-y-6 px-3 pb-3 sm:px-8">
-          <div className="h-full max-h-full w-full overflow-hidden">
-            {dropdownItems.map((item, index) => (
-              <>
-                {item.items ? (
-                  <RA.Root
-                    type="single"
-                    key={index}
-                    defaultValue="item-1"
-                    collapsible
-                  >
-                    <RA.Item value={item.label}>
-                      <RA.Header className={MOBILE_ITEM_CLASS}>
-                        <RA.Trigger className="group flex h-full w-full items-center justify-between">
-                          {item.label}
-                          <ChevronDownIcon className="w-4 text-new-night-400 transition-transform group-data-[state=open]:-rotate-180" />
-                        </RA.Trigger>
-                      </RA.Header>
-                      <RA.Content className="space-y-1 overflow-hidden pt-2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
-                        {item.items.map((item, index) => (
-                          <div
-                            key={index}
-                            className={twMerge(
-                              MOBILE_ITEM_CLASS,
-                              "flex items-center gap-2 font-medium"
-                            )}
-                          >
-                            {item.label}
-                            {item.type === "external" && (
-                              <ExternalIcon className="w-4 text-new-night-400" />
-                            )}
-                          </div>
-                        ))}
-                      </RA.Content>
-                    </RA.Item>
-                  </RA.Root>
-                ) : (
-                  <button className={MOBILE_ITEM_CLASS} key={index}>
-                    {item.label}
-                  </button>
-                )}
-              </>
-            ))}
-          </div>
-        </div>
-        <div className="space-y-2 border-t border-white/5 p-6 pb-0 sm:p-8">
-          <Button color="ruby">Start Building</Button>
-          <Button color="ruby">Start Playing</Button>
-          <Button color="honey">Read Litepaper</Button>
-          <div className="flex items-center gap-4 pt-2 text-new-night-100">
-            <a href={SOCIAL.DISCORD} target="_blank" rel="noreferrer">
-              <DiscordIcon className="w-6" />
-            </a>
-            <a href={SOCIAL.TWITTER} target="_blank" rel="noreferrer">
-              <TwitterIcon className="w-6" />
-            </a>
-            <a href={SOCIAL.YOUTUBE} target="_blank" rel="noreferrer">
-              <YoutubeIcon className="w-6" />
-            </a>
-            <a href={SOCIAL.TWITCH} target="_blank" rel="noreferrer">
-              <TwitchIcon className="w-6" />
-            </a>
-          </div>
-        </div>
-      </div>
+      </AnimatePresence>
     </div>
   );
 };
diff --git a/app/components/new-landing/NewLayout.tsx b/app/components/new-landing/NewLayout.tsx
index ec76e128..c643109f 100644
--- a/app/components/new-landing/NewLayout.tsx
+++ b/app/components/new-landing/NewLayout.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import NewNavigation from "../NewNavigation";
 import Footer from "./Footer";
 
-const DEV = true;
+const DEV = false;
 
 export const NewLayout = ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/app/components/new-landing/misc/Icons.tsx b/app/components/new-landing/misc/Icons.tsx
index ac24fdcc..a1167533 100644
--- a/app/components/new-landing/misc/Icons.tsx
+++ b/app/components/new-landing/misc/Icons.tsx
@@ -105,7 +105,7 @@ export const SteamIcon = ({ className }: IconProps) => (
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M4.32178 13.9196C5.28108 17.0683 8.21035 19.361 11.6746 19.361C15.9191 19.361 19.3599 15.9223 19.3599 11.6805C19.3599 7.43869 15.9191 4 11.6746 4C7.60187 4 4.26908 7.16652 4.00586 11.1702C4.0072 11.1725 4.00854 11.1747 4.00988 11.1769C4.01 11.1749 4.01006 11.1739 4.01006 11.1739L8.13972 12.8749C8.25261 12.7986 8.37319 12.7342 8.49949 12.6829C8.78961 12.5636 9.0951 12.5101 9.39963 12.524L11.2801 9.79385L11.2794 9.75593H11.277C11.277 8.14447 12.5866 6.83398 14.1962 6.83398C15.809 6.83734 17.1155 8.14447 17.1155 9.75593C17.1155 11.3674 15.8066 12.6793 14.1962 12.6793L14.1302 12.6781L11.442 14.5994C11.4498 14.9002 11.3938 15.1993 11.2777 15.4769C11.0602 15.9982 10.6445 16.4118 10.122 16.627C9.59955 16.8422 9.01295 16.8414 8.49108 16.6247C7.82774 16.3487 7.37623 15.7745 7.23213 15.1198L4.32178 13.9196ZM8.67769 16.1749C9.51515 16.5236 10.4787 16.1283 10.8279 15.2883H10.826C10.9946 14.8836 10.9955 14.4355 10.8284 14.0291C10.6612 13.6228 10.349 13.305 9.94073 13.1363C9.53773 12.969 9.10687 12.9738 8.72789 13.1178L9.71257 13.5246C10.0091 13.6485 10.2444 13.8849 10.3667 14.182C10.4889 14.479 10.4882 14.8124 10.3646 15.109C10.3036 15.2557 10.2142 15.389 10.1017 15.5013C9.98907 15.6135 9.85546 15.7024 9.70845 15.763C9.56145 15.8237 9.40394 15.8547 9.24492 15.8545C9.0859 15.8542 8.92849 15.8226 8.78168 15.7616L7.83134 15.368C8.00483 15.7316 8.30606 16.0188 8.67769 16.1749ZM12.8239 11.1316C13.1885 11.4965 13.6829 11.7022 14.1989 11.7036C14.715 11.7024 15.2095 11.4967 15.5741 11.1317C15.9388 10.7667 16.1438 10.2722 16.1442 9.7564C16.1437 9.24072 15.9386 8.74629 15.574 8.3814C15.2094 8.01651 14.7149 7.81091 14.1989 7.80964C13.683 7.81104 13.1886 8.01669 12.8241 8.38157C12.4596 8.74644 12.2546 9.24081 12.254 9.7564C12.2545 10.2721 12.4594 10.7666 12.8239 11.1316ZM13.1687 8.71979C12.8949 8.9941 12.7412 9.36583 12.7415 9.75328C12.7414 10.1407 12.8948 10.5123 13.1687 10.7866C13.4425 11.0608 13.8141 11.2151 14.2018 11.2157C14.5895 11.2153 14.9613 11.061 15.2353 10.7868C15.5093 10.5126 15.6631 10.1408 15.6629 9.75328C15.6629 8.94564 15.0075 8.29039 14.2018 8.29039C13.8141 8.29103 13.4425 8.44548 13.1687 8.71979Z"
-      fill="white"
+      fill="currentColor"
     />
   </svg>
 );
diff --git a/app/components/new-landing/misc/Svgs.tsx b/app/components/new-landing/misc/Svgs.tsx
index c43c538d..8bd1704c 100644
--- a/app/components/new-landing/misc/Svgs.tsx
+++ b/app/components/new-landing/misc/Svgs.tsx
@@ -280,7 +280,7 @@ export const BoTGraphicOne = ({ className }: Props) => (
       fill="#FDEBC0"
       stroke="#FACE61"
     />
-    <g filter="url(#filter0_d_942_20547)">
+    <g filter="url(#filter0_d_1006_19463)">
       <circle
         cx="364.444"
         cy="364.389"
@@ -296,7 +296,7 @@ export const BoTGraphicOne = ({ className }: Props) => (
         stroke="#FACE61"
       />
     </g>
-    <g filter="url(#filter1_d_942_20547)">
+    <g filter="url(#filter1_d_1006_19463)">
       <circle
         cx="364.451"
         cy="364.452"
@@ -312,38 +312,38 @@ export const BoTGraphicOne = ({ className }: Props) => (
         stroke="#FACE61"
       />
     </g>
-    <g filter="url(#filter2_d_942_20547)">
+    <g filter="url(#filter2_d_1006_19463)">
       <circle cx="364.406" cy="364.406" r="45.5" fill="#FFFAEF" />
       <circle cx="364.406" cy="364.406" r="45" stroke="#FACE61" />
     </g>
-    <g filter="url(#filter3_d_942_20547)">
+    <g filter="url(#filter3_d_1006_19463)">
       <circle
         cx="364.406"
         cy="364.5"
         r="86"
         stroke="#FACE61"
-        stroke-dasharray="2 2"
-        shape-rendering="crispEdges"
+        strokeDasharray="2 2"
+        shapeRendering="crispEdges"
       />
     </g>
-    <g filter="url(#filter4_d_942_20547)">
+    <g filter="url(#filter4_d_1006_19463)">
       <circle
         cx="364.406"
         cy="364.5"
         r="186"
         stroke="#FACE61"
-        stroke-dasharray="2 2"
-        shape-rendering="crispEdges"
+        strokeDasharray="2 2"
+        shapeRendering="crispEdges"
       />
     </g>
-    <g filter="url(#filter5_d_942_20547)">
+    <g filter="url(#filter5_d_1006_19463)">
       <circle
         cx="364.406"
         cy="364.5"
         r="296"
         stroke="#FACE61"
-        stroke-dasharray="2 2"
-        shape-rendering="crispEdges"
+        strokeDasharray="2 2"
+        shapeRendering="crispEdges"
       />
     </g>
     <rect
@@ -371,7 +371,7 @@ export const BoTGraphicOne = ({ className }: Props) => (
       height="10.4446"
       rx="1.79562"
       transform="rotate(2.39774 9.6582 344.152)"
-      fill="#FEF0D0"
+      fill="#FACE61"
     />
     <rect
       x="478.221"
@@ -398,24 +398,24 @@ export const BoTGraphicOne = ({ className }: Props) => (
       height="10.4446"
       rx="1.79562"
       transform="rotate(2.39774 709.268 373.446)"
-      fill="#FDEBC0"
+      fill="#FACE61"
     />
     <path d="M364.906 409.5V403.75V398" stroke="#FACE61" />
     <path d="M364.906 330.5V324.75V319" stroke="#FACE61" />
     <path d="M319.656 364.25L325.406 364.25L331.156 364.25" stroke="#FACE61" />
     <path d="M398.656 364.25L404.406 364.25L410.156 364.25" stroke="#FACE61" />
-    <g filter="url(#filter6_d_942_20547)">
+    <g filter="url(#filter6_d_1006_19463)">
       <path
         d="M346.906 356.291V373.143C346.906 375.933 348.384 378.507 350.773 379.893L361.788 386.305C363.558 387.336 365.732 387.336 367.502 386.305L378.517 379.893C380.906 378.498 382.384 375.925 382.384 373.143V356.291C382.384 353.501 380.906 350.927 378.517 349.541L367.502 343.12C365.732 342.089 363.558 342.089 361.788 343.12L350.773 349.532C348.384 350.927 346.906 353.501 346.906 356.291Z"
         fill="#DC2626"
       />
     </g>
     <path
-      d="M378.097 364.27L374.05 362.884C372.563 362.373 371.455 361.108 371.146 359.557L369.436 351.048C369.393 350.832 369.204 350.676 368.98 350.676C368.757 350.676 368.568 350.832 368.525 351.048L366.815 359.557C366.506 361.108 365.397 362.373 363.911 362.884L359.864 364.27C359.675 364.331 359.555 364.513 359.555 364.712C359.555 364.912 359.684 365.085 359.864 365.154L363.911 366.541C365.397 367.052 366.506 368.317 366.815 369.868L368.525 378.376C368.568 378.593 368.757 378.749 368.98 378.749C369.204 378.749 369.393 378.593 369.436 378.376L371.146 369.868C371.455 368.317 372.563 367.052 374.05 366.541L378.097 365.154C378.286 365.094 378.406 364.912 378.406 364.712C378.406 364.513 378.277 364.34 378.097 364.27Z"
+      d="M378.097 364.271L374.05 362.884C372.563 362.373 371.455 361.108 371.146 359.557L369.436 351.048C369.393 350.832 369.204 350.676 368.98 350.676C368.757 350.676 368.568 350.832 368.525 351.048L366.815 359.557C366.506 361.108 365.397 362.373 363.911 362.884L359.864 364.271C359.675 364.331 359.555 364.513 359.555 364.712C359.555 364.912 359.684 365.085 359.864 365.154L363.911 366.541C365.397 367.052 366.506 368.317 366.815 369.868L368.525 378.377C368.568 378.593 368.757 378.749 368.98 378.749C369.204 378.749 369.393 378.593 369.436 378.377L371.146 369.868C371.455 368.317 372.563 367.052 374.05 366.541L378.097 365.154C378.286 365.094 378.406 364.912 378.406 364.712C378.406 364.513 378.277 364.34 378.097 364.271Z"
       fill="#FFFDF7"
     />
     <path
-      d="M356.323 356.464L357.749 356.949C358.273 357.131 358.668 357.573 358.771 358.128L359.373 361.134C359.39 361.212 359.459 361.264 359.536 361.264C359.613 361.264 359.682 361.212 359.699 361.134L360.301 358.128C360.413 357.582 360.799 357.131 361.332 356.949L362.758 356.464C362.827 356.438 362.87 356.377 362.87 356.308C362.87 356.239 362.827 356.178 362.758 356.152L361.332 355.667C360.808 355.485 360.413 355.043 360.301 354.489L359.699 351.482C359.682 351.404 359.613 351.352 359.536 351.352C359.459 351.352 359.39 351.404 359.373 351.482L358.771 354.489C358.66 355.034 358.273 355.485 357.749 355.667L356.323 356.152C356.254 356.178 356.211 356.239 356.211 356.308C356.211 356.377 356.254 356.438 356.323 356.464"
+      d="M356.323 356.464L357.749 356.949C358.273 357.131 358.668 357.573 358.771 358.128L359.373 361.134C359.39 361.212 359.459 361.264 359.536 361.264C359.613 361.264 359.682 361.212 359.699 361.134L360.301 358.128C360.413 357.582 360.799 357.131 361.332 356.949L362.758 356.464C362.827 356.438 362.87 356.378 362.87 356.308C362.87 356.239 362.827 356.178 362.758 356.152L361.332 355.667C360.808 355.485 360.413 355.043 360.301 354.489L359.699 351.482C359.682 351.404 359.613 351.352 359.536 351.352C359.459 351.352 359.39 351.404 359.373 351.482L358.771 354.489C358.66 355.035 358.273 355.485 357.749 355.667L356.323 356.152C356.254 356.178 356.211 356.239 356.211 356.308C356.211 356.378 356.254 356.438 356.323 356.464"
       fill="#FFFDF7"
     />
     <path
@@ -424,7 +424,7 @@ export const BoTGraphicOne = ({ className }: Props) => (
     />
     <defs>
       <filter
-        id="filter0_d_942_20547"
+        id="filter0_d_1006_19463"
         x="123.502"
         y="123.447"
         width="481.885"
@@ -448,21 +448,21 @@ export const BoTGraphicOne = ({ className }: Props) => (
         <feBlend
           mode="normal"
           in2="BackgroundImageFix"
-          result="effect1_dropShadow_942_20547"
+          result="effect1_dropShadow_1006_19463"
         />
         <feBlend
           mode="normal"
           in="SourceGraphic"
-          in2="effect1_dropShadow_942_20547"
+          in2="effect1_dropShadow_1006_19463"
           result="shape"
         />
       </filter>
       <filter
-        id="filter1_d_942_20547"
+        id="filter1_d_1006_19463"
         x="231.477"
         y="231.478"
-        width="265.949"
-        height="269.948"
+        width="265.948"
+        height="269.949"
         filterUnits="userSpaceOnUse"
         colorInterpolationFilters="sRGB"
       >
@@ -482,17 +482,17 @@ export const BoTGraphicOne = ({ className }: Props) => (
         <feBlend
           mode="normal"
           in2="BackgroundImageFix"
-          result="effect1_dropShadow_942_20547"
+          result="effect1_dropShadow_1006_19463"
         />
         <feBlend
           mode="normal"
           in="SourceGraphic"
-          in2="effect1_dropShadow_942_20547"
+          in2="effect1_dropShadow_1006_19463"
           result="shape"
         />
       </filter>
       <filter
-        id="filter2_d_942_20547"
+        id="filter2_d_1006_19463"
         x="318.906"
         y="318.906"
         width="91"
@@ -516,17 +516,17 @@ export const BoTGraphicOne = ({ className }: Props) => (
         <feBlend
           mode="normal"
           in2="BackgroundImageFix"
-          result="effect1_dropShadow_942_20547"
+          result="effect1_dropShadow_1006_19463"
         />
         <feBlend
           mode="normal"
           in="SourceGraphic"
-          in2="effect1_dropShadow_942_20547"
+          in2="effect1_dropShadow_1006_19463"
           result="shape"
         />
       </filter>
       <filter
-        id="filter3_d_942_20547"
+        id="filter3_d_1006_19463"
         x="277.906"
         y="278"
         width="173"
@@ -550,17 +550,17 @@ export const BoTGraphicOne = ({ className }: Props) => (
         <feBlend
           mode="normal"
           in2="BackgroundImageFix"
-          result="effect1_dropShadow_942_20547"
+          result="effect1_dropShadow_1006_19463"
         />
         <feBlend
           mode="normal"
           in="SourceGraphic"
-          in2="effect1_dropShadow_942_20547"
+          in2="effect1_dropShadow_1006_19463"
           result="shape"
         />
       </filter>
       <filter
-        id="filter4_d_942_20547"
+        id="filter4_d_1006_19463"
         x="177.906"
         y="178"
         width="373"
@@ -584,17 +584,17 @@ export const BoTGraphicOne = ({ className }: Props) => (
         <feBlend
           mode="normal"
           in2="BackgroundImageFix"
-          result="effect1_dropShadow_942_20547"
+          result="effect1_dropShadow_1006_19463"
         />
         <feBlend
           mode="normal"
           in="SourceGraphic"
-          in2="effect1_dropShadow_942_20547"
+          in2="effect1_dropShadow_1006_19463"
           result="shape"
         />
       </filter>
       <filter
-        id="filter5_d_942_20547"
+        id="filter5_d_1006_19463"
         x="67.9062"
         y="68"
         width="593"
@@ -618,21 +618,21 @@ export const BoTGraphicOne = ({ className }: Props) => (
         <feBlend
           mode="normal"
           in2="BackgroundImageFix"
-          result="effect1_dropShadow_942_20547"
+          result="effect1_dropShadow_1006_19463"
         />
         <feBlend
           mode="normal"
           in="SourceGraphic"
-          in2="effect1_dropShadow_942_20547"
+          in2="effect1_dropShadow_1006_19463"
           result="shape"
         />
       </filter>
       <filter
-        id="filter6_d_942_20547"
+        id="filter6_d_1006_19463"
         x="346.906"
         y="342.347"
-        width="35.4785"
-        height="48.731"
+        width="35.4775"
+        height="48.7308"
         filterUnits="userSpaceOnUse"
         colorInterpolationFilters="sRGB"
       >
@@ -652,12 +652,12 @@ export const BoTGraphicOne = ({ className }: Props) => (
         <feBlend
           mode="normal"
           in2="BackgroundImageFix"
-          result="effect1_dropShadow_942_20547"
+          result="effect1_dropShadow_1006_19463"
         />
         <feBlend
           mode="normal"
           in="SourceGraphic"
-          in2="effect1_dropShadow_942_20547"
+          in2="effect1_dropShadow_1006_19463"
           result="shape"
         />
       </filter>
@@ -1384,7 +1384,7 @@ export const BoTGraphicTwo = ({ className }: Props) => (
         width="80"
         height="84"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
         <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feColorMatrix
@@ -1418,7 +1418,7 @@ export const BoTGraphicTwo = ({ className }: Props) => (
         width="35.4785"
         height="48.731"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
         <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feColorMatrix
@@ -3515,7 +3515,7 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
         <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
@@ -3549,7 +3549,7 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
         <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
@@ -3583,7 +3583,7 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
         <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
@@ -3617,7 +3617,7 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
         <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
@@ -3651,7 +3651,7 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
         <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
@@ -3685,7 +3685,7 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
         <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
@@ -3719,7 +3719,7 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
         <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
@@ -3753,7 +3753,7 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
         <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
@@ -3787,7 +3787,7 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
         <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
@@ -3821,9 +3821,9 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -3855,9 +3855,9 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -3889,9 +3889,9 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -3923,9 +3923,9 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -3957,9 +3957,9 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -3991,9 +3991,9 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -4025,9 +4025,9 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -4059,9 +4059,9 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -4093,9 +4093,9 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -4127,9 +4127,9 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -4161,9 +4161,9 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="44.8311"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -4195,9 +4195,9 @@ export const BoTGraphicThree = ({ className }: Props) => (
         width="1014.89"
         height="451.479"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feColorMatrix
           in="SourceAlpha"
           type="matrix"
@@ -6346,9 +6346,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6380,9 +6380,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6414,9 +6414,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6448,9 +6448,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6482,9 +6482,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6516,9 +6516,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6550,9 +6550,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6584,9 +6584,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6618,9 +6618,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6652,9 +6652,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6686,9 +6686,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6720,9 +6720,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6754,9 +6754,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6788,9 +6788,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6822,9 +6822,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6856,9 +6856,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6890,9 +6890,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6924,9 +6924,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6958,9 +6958,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -6992,9 +6992,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -7026,9 +7026,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -7060,9 +7060,9 @@ export const BoTGraphicFour = ({ className }: Props) => (
         width="44.8301"
         height="44.8306"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
@@ -7096,7 +7096,7 @@ export const BoTGraphicFour = ({ className }: Props) => (
         filterUnits="userSpaceOnUse"
         colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feBlend
           mode="normal"
           in="SourceGraphic"
diff --git a/app/components/new-landing/sections/BuildOnTreasure.tsx b/app/components/new-landing/sections/BuildOnTreasure.tsx
index 1de9d6ea..1cadc2ca 100644
--- a/app/components/new-landing/sections/BuildOnTreasure.tsx
+++ b/app/components/new-landing/sections/BuildOnTreasure.tsx
@@ -1,7 +1,12 @@
 import React from "react";
 import Button from "../Button";
 import { twMerge } from "tailwind-merge";
-import { ChevronRightIcon, DiscordIcon, TwitterIcon } from "../misc/Icons";
+import {
+  ChevronRightIcon,
+  DiscordIcon,
+  SteamIcon,
+  TwitterIcon,
+} from "../misc/Icons";
 import {
   Badge,
   BoTGraphicFour,
@@ -64,12 +69,12 @@ const BaseCard = ({
 }) => (
   <div
     className={twMerge(
-      "relative h-[300px] rounded-2xl border border-new-honey-1100 bg-new-honey-400 p-6 sm:p-12 lg:h-[460px] lg:p-8 xl:p-12",
+      "relative  h-[460px] rounded-2xl border border-new-honey-1100 bg-new-honey-400 p-6 sm:p-12 lg:p-8 xl:p-12",
       className
     )}
   >
     {children}
-    <h1 className="landing-h2 relative z-20 pb-4 text-new-ruby-900 sm:pb-6">
+    <h1 className="landing-h2 lg:max-w-auto relative z-20 max-w-[80%] pb-4 text-new-ruby-900 sm:pb-6">
       {title}
     </h1>
     <p className="relative z-20 max-w-[480px] text-lg leading-[150%] text-new-night-700">
@@ -87,7 +92,7 @@ const SocialCard = ({
   rank: number;
   username: string;
 }) => (
-  <div className="ml-4 h-[120px] w-[280px] space-y-3.5 rounded-2xl border border-new-honey-1100 bg-new-honey-400 p-3.5 shadow-lg ">
+  <div className="ml-4 h-[120px] w-[280px] space-y-3.5 rounded-2xl border border-new-honey-1100 bg-new-honey-400 p-3.5  ">
     <div className="flex gap-3">
       <img
         src={image}
@@ -112,7 +117,7 @@ const SocialCard = ({
         <DiscordIcon className="w-5" />
       </div>
       <div className="flex aspect-square h-8 items-center justify-center rounded-md border border-new-honey-1100">
-        <DiscordIcon className="w-5" />
+        <SteamIcon className="w-5" />
       </div>
     </div>
   </div>
@@ -146,7 +151,7 @@ const BuildOnTreasure = () => {
             className="col-span-3"
           >
             <div className="absolute inset-0 overflow-hidden rounded-2xl">
-              <BoTGraphicOne className="absolute left-1/2 -top-[50%] w-[110%%] -translate-x-1/2 text-new-light-background  lg:-top-[10%]" />
+              <BoTGraphicOne className="absolute left-1/2 -bottom-[48%] w-[110%%] -translate-x-1/2 text-new-light-background  lg:-top-[10%]" />
             </div>
           </BaseCard>
           <BaseCard
@@ -155,7 +160,7 @@ const BuildOnTreasure = () => {
             className="col-span-4"
           >
             <div className="absolute inset-0 h-full overflow-hidden rounded-2xl">
-              <BoTGraphicTwo className="absolute bottom-0 left-1/2 w-full -translate-x-1/2  text-new-light-background opacity-50 lg:h-full lg:w-auto lg:opacity-100" />
+              <BoTGraphicTwo className="absolute -bottom-[5%] left-1/2  h-auto w-[180%] -translate-x-1/2 text-new-light-background lg:bottom-0 lg:h-full lg:w-auto " />
             </div>
           </BaseCard>
 
@@ -165,7 +170,7 @@ const BuildOnTreasure = () => {
             className="col-span-4"
           >
             <div className="absolute inset-0 overflow-hidden rounded-2xl">
-              <div className="absolute -bottom-10 z-20 sm:-bottom-8 lg:-bottom-[64px]">
+              <div className="absolute bottom-10 z-20 sm:-bottom-8 lg:-bottom-[64px] ">
                 <div className="space-y-4">
                   <div className="relative hidden overflow-x-hidden lg:flex">
                     <div className="flex animate-marquee whitespace-nowrap pl-4">
@@ -213,7 +218,7 @@ const BuildOnTreasure = () => {
                   </div>
                 </div>
               </div>
-              <BoTGraphicThree className="absolute left-1/2 w-[200%] -translate-x-1/2 lg:bottom-0 lg:h-[100%] lg:w-auto " />
+              <BoTGraphicThree className="absolute left-1/2 -bottom-10 w-[200%] -translate-x-1/2 lg:bottom-0 lg:h-[100%] lg:w-auto " />
             </div>
           </BaseCard>
           <BaseCard
diff --git a/app/styles/new-landing.css b/app/styles/new-landing.css
index 1fdcc47c..e44f0ba7 100644
--- a/app/styles/new-landing.css
+++ b/app/styles/new-landing.css
@@ -7,7 +7,7 @@
 }
 
 .landing-h2 {
-  @apply text-[24px] font-[635] leading-[105%] md:text-[32px];
+  @apply text-[32px] font-[635] leading-[105%];
 }
 
 .swiper {